Redesign of VC section
Change-Id: Id1eb6e86aff2632036e2ca21b119f3a1cf80dce7
diff --git a/dev/scss/header/header.scss b/dev/scss/header/header.scss
index b29be0c..2bd0158 100644
--- a/dev/scss/header/header.scss
+++ b/dev/scss/header/header.scss
@@ -1,18 +1,19 @@
@charset "utf-8";
@import "../util";
-@import "hint"; // Hint specific menu list
-@import "menu"; // Menu list
-@import "searchbar"; // The search bar
-@import "vc"; // Virtual collection builder
-@import "datepicker"; // Datepicker
+@import "hint"; // Hint specific menu list
+@import "menu"; // Menu list
+@import "searchbar"; // The search bar
+@import "vc"; // Virtual corpus builder
+@import "statistics"; // Statistics for VCs
+@import "datepicker"; // Datepicker
header {
position: relative;
background-color: $light-green;
// @include light-noise;
@include box-sizing-box();
- padding: $base-padding;
- padding-bottom: 0;
+ padding-top: $base-padding;
+ // padding-bottom: 0;
font-size: 10pt;
color: $nearly-white;
// text-shadow: none;
@@ -124,10 +125,6 @@
content: $fa-logout;
}
}
-
- #vc-view > div {
- margin: 1.3em 0 .5em 0;
- }
}
diff --git a/dev/scss/header/statistics.scss b/dev/scss/header/statistics.scss
new file mode 100644
index 0000000..44d8930
--- /dev/null
+++ b/dev/scss/header/statistics.scss
@@ -0,0 +1,83 @@
+@charset "utf-8";
+@import "../util";
+
+/*
+div.view.vcstatistic {
+ position: relative;
+ display: inline-flex;
+ width: auto;
+}
+*/
+
+div.stattable {
+ display: flex;
+ flex-direction: row;
+}
+/*
+div.stattable ul.action.image {
+ display: block;
+ li {
+ cursor: pointer;
+ color: $nearly-white;
+ text-decoration: none;
+ > span {
+ @include blind;
+ }
+ border-width: 0;
+ // z-index: 8;
+ text-decoration:none;
+ text-align: center;
+ font-style: normal;
+
+ &.close::after {
+ font-family: 'FontAwesome';
+ content: $fa-close;
+ }
+ }
+}
+*/
+
+div.stattable > dl {
+ display: flex;
+ flex-flow: row wrap;
+ //margin-top: 4 * $border-size !important;
+ margin-top:4px;
+ margin-bottom:4px;
+ padding-bottom: 1px;
+ > div {
+ /*
+ display: flex;
+ margin-right: 5px;
+ margin-left: 5px;
+ > * {
+ @include cell-info;
+ }
+ */
+ border-color: $dark-green;
+ > dt {
+ background-color: $middle-green;
+ /*
+ text-align: right;
+ // padding: 1px;
+ */
+ width: 15em;
+ margin: 0;
+ &:after {
+ content: ":";
+ }
+ }
+ > dd {
+ /*
+ text-align: left;
+ // padding: 1px;
+ margin: 0;
+ width: 100%;
+ max-width: none;
+ max-height: 6em;
+ margin-left: $border-size;
+ */
+ background-color: $lightest-green;
+ color: $dark-grey;
+ }
+ }
+}
diff --git a/dev/scss/header/vc.scss b/dev/scss/header/vc.scss
index 668d871..b7b97cd 100644
--- a/dev/scss/header/vc.scss
+++ b/dev/scss/header/vc.scss
@@ -12,6 +12,13 @@
.vc {
margin-top: 4pt;
+ .docGroup, .doc {
+ // color: $nearly-white;
+ // color: $dark-green;
+ color: $dark-grey;
+ // text-shadow: $light-shadow;
+ }
+
/**
* Rules for all docGroups
*/
@@ -22,7 +29,6 @@
.docGroup { display: block; }
- color: $nearly-white;
padding: 4pt 2pt 4pt 0pt;
border: {
radius: $standard-border-radius * 2;
@@ -33,7 +39,8 @@
// Whiten on hover
&:hover {
- background-color: rgba(255,255,255,.06);
+ // background-color: rgba(255,255,255,.06);
+ background-color: rgba(255,255,255,.3);
}
&[data-operation] {
@@ -48,7 +55,8 @@
text-align: right;
width: $left-padding;
margin-left: -1 * ($left-padding + .5em); // -28pt
- color: $dark-green;
+ // color: $dark-green;
+ color: $dark-orange;
line-height: 1.5em;
border-top: $border-size solid transparent;
}
@@ -65,37 +73,34 @@
// This will be overruled by JS!
content: "or";
}
-
- &:after {
- .button-stat {
-
-
- > span {
- cursor: pointer;
- box-shadow: $choose-box-shadow;
- font-size: 9pt;
- line-height: 1.5em;
- padding: 0 4px;
- display: inline-block;
- @include choose-item;
- border-style: solid;
- border-width: $border-size 0;
- &:hover {
- @include choose-hover;
- }
- &:first-child {
- border: {
- left-width: $border-size;
- right-width: $border-size;
- }
- }
-
- }
-}
-
-
+ /*
+ &:after {
+ .button-stat {
+ > span {
+ cursor: pointer;
+ box-shadow: $choose-box-shadow;
+ font-size: 9pt;
+ line-height: 1.5em;
+ padding: 0 4px;
+ display: inline-block;
+ @include choose-item;
+ border-style: solid;
+ border-width: $border-size 0;
+ &:hover {
+ @include choose-hover;
+ }
+ &:first-child {
+ border: {
+ left-width: $border-size;
+ right-width: $border-size;
+ }
+ }
+
+ }
+ }
}
+ */
}
// And operation
@@ -191,7 +196,8 @@
.doc > span {
cursor: pointer;
&:hover {
- color: $dark-green;
+ // color: $dark-green;
+ color: $dark-orange;
}
}
@@ -314,6 +320,10 @@
border-radius: $standard-border-radius;
}
+header #vc-view > div {
+ margin: 1.3em 0 .5em 0;
+}
+
#vc-choose > span.rewritten {
&::after {
@@ -330,64 +340,31 @@
}
}
-div.stattable{
- display: flex;
- flex-direction: row;
- }
-
-div.stattable ul.action.image {
- display: block;
- li {
- cursor: pointer;
- color: $nearly-white;
- text-decoration: none;
- > span {
- @include blind;
- }
- border-width: 0;
- // z-index: 8;
- text-decoration:none;
- text-align: center;
- font-style: normal;
-
- &.close::after {
- font-family: 'FontAwesome';
- content: $fa-close;
- }
+div#vc-view > div.vc {
+ border: 2px solid $dark-green;
+ background-color: $nearly-white;
+ > div:first-child {
+ margin: 1.3em;
}
}
-
-div.stattable > dl {
- display: flex;
- flex-flow: row wrap;
+div.panel.vcinfo {
+ padding: 3pt 0pt 3pt 3pt;
background-color: $dark-green;
- //margin-top: 4 * $border-size !important;
- margin-top:4px;
- margin-bottom:4px;
- padding-bottom: 1px;
- > div {
- display: flex;
- margin-right: 5px;
- margin-left: 5px;
- > dt {
- text-align: right;
- padding: 1px;
- margin: 0;
- &:after {
- content: ":";
- }
+ /*
+ div.button-group {
+ display: inline-block;
+ margin-right: .5em;
+ > span {
+ position: relative;
+ box-shadow: none;
}
- > dd {
- text-align: left;
- padding: 1px;
- margin: 0;
- width: 100%;
- max-width: none;
- max-height: 6em;
- margin-left: $border-size;
- }
}
+*/
}
-
+/*
+.button-group.vcstatistic{
+ position:relative;
+ }
+*/
\ No newline at end of file