Improved tutorials
diff --git a/dev/scss/header/header.scss b/dev/scss/header/header.scss
new file mode 100644
index 0000000..60a3bf4
--- /dev/null
+++ b/dev/scss/header/header.scss
@@ -0,0 +1,141 @@
+@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
+
+header {
+ position: relative;
+ background-color: $light-green;
+// @include light-noise;
+ @include box-sizing-box();
+ padding: 8px;
+ padding-bottom: 0;
+ font-size: 10pt;
+ color: $nearly-white;
+ // text-shadow: none;
+ button {
+ color: $light-green;
+ background-color: transparent;
+ border-width: 0;
+ font-weight: normal;
+ margin: 0;
+ padding: 0;
+ outline: none;
+ }
+ span.select, #vc-choose { /* Formally vc.location */
+ cursor: pointer;
+ line-height: 1.8em;
+ border: {
+ width: 0;
+ bottom-width: 3px;
+ style: solid;
+ color: transparent;
+ }
+ display: inline-block;
+ &:hover {
+ color: $dark-green;
+ border-color: $dark-green;
+ }
+ &::after {
+ pointer-events: none;
+ font-family: FontAwesome;
+ text-align: center;
+ background-color: $light-green;
+ }
+ }
+ span.select::after {
+ content: $fa-down;
+ }
+
+ form {
+ padding-left: $logo-left-distance;
+ min-height: 2.7em;
+ display: block;
+ margin: 0px;
+ position: relative;
+ }
+
+ .button {
+ &.right {
+ float: right;
+ display: inline-block;
+ }
+ &.top {
+ position: absolute;
+ display: block;
+ top: 0;
+ right: 0;
+ margin-right: 0;
+ width: 22px;
+ background-color: $dark-green;
+ text-align: center;
+ height: 100%;
+ }
+ color: $nearly-white;
+ line-height: 2em;
+ margin-right: $right-distance;
+ > a {
+ color: $nearly-white;
+ cursor:pointer;
+ position: relative;
+ font-size: 120%;
+ > span {
+ @include blind;
+ }
+ }
+ > a::after {
+ font-family: 'FontAwesome';
+ }
+ > a.tutorial::after {
+ content: $fa-tutorial;
+ }
+ > a.align.left::after {
+ content: $fa-left-align;
+ }
+ > a.align.right::after {
+ content: $fa-right-align;
+ }
+ > a.question::after {
+ content: $fa-question;
+ }
+ > a.login::after {
+ content: $fa-login;
+ }
+ }
+}
+
+
+/**
+ * Temporary hack for language chooser
+ * http://cssdeck.com/labs/styling-select-box-with-css3
+ */
+#ql-field {
+ cursor: pointer;
+ margin: 0;
+ outline: none;
+ border: none;
+ display: inline-block;
+ position: relative;
+ color: white;
+ background-color: $light-green;
+ border-width: 0;
+ border-radius: 0;
+ @include no-appearance;
+ &:checked {
+ outline: none;
+ }
+ > option {
+ padding: 0pt 2pt;
+ outline: none;
+ }
+}
+
+/**
+ * funny hack for firefox
+ */
+#ql-field:-moz-focusring {
+ color: transparent;
+ text-shadow: 0 0 0 white;
+}
diff --git a/dev/scss/header/hint.scss b/dev/scss/header/hint.scss
new file mode 100644
index 0000000..a373abc
--- /dev/null
+++ b/dev/scss/header/hint.scss
@@ -0,0 +1,61 @@
+@charset "utf-8";
+@import "../util";
+
+$border-size: 2px;
+
+ul.menu.hint {
+ display: inline-block;
+ white-space: normal;
+ text-align:left;
+ top: 0;
+ max-width: 23em !important;
+
+ > li:first-of-type {
+ border-top: {
+ width: 1px;
+ left-radius: 0;
+ right-radius: 0;
+ }
+ }
+ span.desc {
+ display: block;
+ font-size: 75%;
+ }
+}
+
+#searchMirror {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 900;
+ white-space: pre-wrap;
+ height: 0;
+ display: block;
+ > span {
+ opacity: 0;
+ white-space: pre-wrap;
+ overflow: hidden;
+ }
+ // Todo: Besser nur, wenn im Focus
+ > div {
+ position: absolute;
+ display: block;
+ cursor: pointer;
+ transition: left 0.2s ease 0s;
+ top: 0;
+ left: 0;
+ text-align: left;
+ padding: 0;
+ border-top: 5px solid $dark-orange;
+ height: 10px;
+ width: 1.2em;
+ &:hover:not(.active) {
+ border-top: 10px solid $dark-orange;
+ }
+ &.active {
+ border-top-width: 0;
+ height: 0;
+ width: 23em;
+ }
+ }
+}
\ No newline at end of file
diff --git a/dev/scss/header/menu.scss b/dev/scss/header/menu.scss
new file mode 100644
index 0000000..46529bd
--- /dev/null
+++ b/dev/scss/header/menu.scss
@@ -0,0 +1,140 @@
+@charset "utf-8";
+@import "../util";
+
+$border-size: 2px;
+
+/**
+ * Menu list - used nearly everywhere
+ */
+ul.menu,
+ul.menu > span.pref:not(:empty) {
+ box-sizing: border-box;
+ text-shadow: none;
+ font-weight: normal;
+ // Pagination border?
+
+ z-index: 7000;
+}
+
+ul.menu > li,
+ul.menu > span.pref:not(:empty) {
+ box-shadow: $choose-box-shadow;
+ border: {
+ width: $border-size;
+ bottom-width: 0px;
+ top-width: 0px;
+ style: solid;
+ }
+ @include choose-item;
+ cursor: pointer;
+ padding: $item-padding;
+ white-space: normal;
+}
+
+ul.menu > li,
+ul.menu > span.pref:not(.active) {
+ @include choose-item;
+}
+
+ul.menu {
+ position: absolute;
+ padding: 0;
+ margin: 0;
+ text-indent: 0;
+ list-style-type: none;
+ list-style-position: outside;
+
+ /**
+ * List items
+ */
+ > li {
+ padding-right: 1.6em;
+
+ &:first-of-type {
+ border-top: {
+ width: $border-size;
+ left-radius: $standard-border-radius;
+ right-radius: $standard-border-radius;
+ }
+ }
+ &:last-of-type {
+ border-bottom: {
+ width: $border-size;
+ left-radius: $standard-border-radius;
+ right-radius: $standard-border-radius;
+ }
+ }
+ mark {
+ text-decoration: underline;
+ background-color: transparent;
+ color: inherit;
+ font-weight: bold;
+ }
+ }
+ > li.active,
+ > span.pref.active {
+ @include choose-active;
+ }
+ > li:hover,
+ > span.pref:hover {
+ @include choose-hover;
+ }
+
+ /**
+ * Default prefix view
+ */
+ > span.pref:not(:empty) {
+ position: absolute;
+ min-width: 5px;
+ font-size: 80%;
+ left: 0;
+ bottom: 0;
+ display: block;
+ margin-bottom: -2.1em;
+ padding: 2px 6px;
+ border: {
+ radius: $standard-border-radius;
+ width: $border-size;
+ }
+ }
+}
+
+/**
+ * Rolling menu
+ */
+ul.menu.roll {
+ > li:first-of-type {
+ &:not(.no-more):before {
+ position: absolute;
+ font-family: "FontAwesome";
+ content: $fa-up;
+ right: .5em;
+ top: .4em;
+ }
+ }
+ > li:last-of-type {
+ &:not(.no-more):before {
+ position: absolute;
+ font-family: "FontAwesome";
+ content: $fa-down;
+ right: .5em;
+ bottom: .4em;
+ }
+ }
+}
+
+
+/**
+ * Sorting menu
+ */
+ul.menu.sort {
+ position: relative;
+ display: inline-block;
+ > li::before {
+ content: '';
+ }
+ > li.active:hover {
+ @include choose-remove;
+ }
+
+}
\ No newline at end of file
diff --git a/dev/scss/header/searchbar.scss b/dev/scss/header/searchbar.scss
new file mode 100644
index 0000000..883f003
--- /dev/null
+++ b/dev/scss/header/searchbar.scss
@@ -0,0 +1,109 @@
+@charset "utf-8";
+@import "../util";
+
+$border-size: 2px;
+
+/**
+ * Input field
+ */
+#q-field {
+ width: 100%;
+ margin: 0;
+ margin-bottom: 3px;
+ display: block;
+}
+
+header input {
+ outline: none;
+ font-size: 11pt;
+ border: $border-size solid $nearly-white;
+ padding: 2px;
+}
+
+#searchbar {
+ position: relative;
+ width: 100%;
+ padding-right: 60px;
+ button[type=submit] {
+ position: absolute;
+ font-weight: normal;
+ @include choose-item;
+ padding: 0;
+ height: 100%;
+ top: 0;
+ right: $right-distance;
+ width: 30px;
+ cursor:pointer;
+ > span:nth-of-type(1) {
+ @include blind;
+ }
+ &::after {
+ font-family: "FontAwesome";
+ content: $fa-search;
+ }
+ border: {
+ width: $border-size;
+ style: solid;
+ color: $nearly-white;
+ }
+ &:hover {
+ @include choose-hover;
+ }
+ &:active {
+ @include choose-active;
+ }
+
+ /**
+ * This is just for styling the last button,
+ * in case there are more than one buttons.
+ */
+ &:last-of-type {
+ @include box-sizing-box();
+ border: {
+ right-width: $border-size;
+ right-style: solid;
+ top-right-radius: $standard-border-radius;
+ bottom-right-radius: $standard-border-radius;
+ }
+ }
+ }
+ button + button {
+ right: 0;
+ }
+}
+
+/**
+ * Checkbox styling
+ * http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css
+*/
+.checkbox {
+ display: none;
+ + label {
+ cursor: pointer;
+ span {
+ border-radius: 4px;
+ display: inline-block;
+ width: 1em; // 12px
+ height: 1em;
+ line-height: 1em; // 12px;
+ vertical-align: middle;
+ padding: 0;
+ margin-right: .2em;
+/*
+ background-color: $nearly-white;
+ &:hover {
+ border-color: $nearly-white;
+ }
+*/
+ &::after {
+ font-family: "FontAwesome";
+ content: '\f096';
+ }
+ }
+ }
+ &:checked + label span {
+ &:after {
+ content:"\f046";
+ }
+ }
+}
diff --git a/dev/scss/header/vc.scss b/dev/scss/header/vc.scss
new file mode 100644
index 0000000..992fac0
--- /dev/null
+++ b/dev/scss/header/vc.scss
@@ -0,0 +1,250 @@
+@charset "utf-8";
+@import "../util";
+
+$left-padding: 28pt; // 2.8em;
+$border-size: 2px;
+
+.vc {
+ background-color: $light-green;
+ margin-top: 10px;
+ .docGroup {
+ position: relative;
+ display: inline-block;
+ color: $nearly-white;
+
+ margin-left: $left-padding; // 2.8em
+
+ // .6em .5em
+ border-width: 0 (2 * $border-size);
+
+ padding: {
+ top: 10pt;
+ bottom: 2pt;
+ left: 0pt;
+ right: 6pt;
+ }
+
+ border: {
+ radius: $standard-border-radius * 2;
+ style: solid;
+ }
+
+ .docGroup {
+ display: block;
+ }
+
+ > .operators {
+ position: absolute;
+ display: block;
+ top: 10px;
+ vertical-align: middle;
+ left: 3px;
+ border-width: 2px 2px 2px 0;
+ border-top-right-radius: 7px;
+ border-bottom-right-radius: 7px;
+ margin-left: 100%;
+ padding: 0;
+ }
+
+ &:hover {
+ background-color: rgba(255,255,255,.05);
+ }
+
+ &[data-operation=or] {
+ border-color: $dark-orange;
+ > .doc::before,
+ > .docGroup::before {
+ content: "or";
+ }
+ > .operators {
+ border-color: $dark-orange;
+ background-color: $dark-orange;
+ color: $nearly-white;
+ }
+ }
+
+ &[data-operation=and] {
+ > .doc::before,
+ > .docGroup::before {
+ content: "and";
+ }
+ }
+
+ &[data-operation] {
+ > .doc:first-child::before,
+ > .docGroup:first-child::before {
+ content: '';
+ }
+ > .doc::before,
+ > .docGroup::before {
+ display: inline-block;
+ text-align: right;
+// width: 2.2em;
+ width: $left-padding;
+ color: $dark-green;
+ }
+ > .doc::before {
+ padding-right: 1.2em;
+ margin-right: .1em;
+ }
+ > .docGroup::before {
+ position: absolute;
+ }
+ }
+ }
+
+ .doc {
+ > span + span {
+ margin-left: 5pt;
+ }
+ > span.key,
+ > span.value {
+ font-weight: bold;
+ }
+ > .operators {
+ display: inline-block;
+ border-color: $dark-orange;
+ border-width: 2px 2px 2px 2px;
+ border-radius: 7px;
+
+ margin-left: 10px;
+ > span {
+ &.and {
+ border: {
+ radius: inherit;
+ top-right-radius: 0;
+ bottom-right-radius: 0;
+ }
+ &.delete {
+ border: {
+ top-left-radius: 0;
+ bottom-left-radius: 0;
+ }
+ }
+ }
+ }
+ }
+ > span.key {
+ position: relative;
+ > ul {
+ margin: 0;
+ margin-left: 3.3em;
+ }
+ }
+ }
+
+ .rewritten {
+ .rewrite {
+ margin-left: 4pt;
+ display: inline-block;
+ color: $dark-orange;
+ &::after {
+ font-family: FontAwesome;
+ font-style: normal;
+ font-weight: normal;
+ content: $fa-rewrite;
+ text-decoration: underline;
+ }
+ span {
+ display: none;
+ }
+ }
+ }
+
+ .operators {
+ opacity: 0;
+ white-space: nowrap;
+ padding: 0;
+ font-size: 0;
+ line-height: 0;
+ color: $light-green;
+ border-color: $nearly-white;
+ text-align: center;
+ font-weight: bold;
+ border-style: solid;
+
+ > span {
+ cursor: pointer;
+ font-size: 9pt;
+ line-height: 1.3em;
+ padding: 0 4px;
+ display: inline-block;
+ &.and {
+ background-color: $nearly-white;
+ color: $light-green;
+ }
+ &.or {
+ background-color: $dark-orange;
+ color: $nearly-white;
+ }
+ &.delete {
+ background-color: red;
+ border-radius: inherit;
+ color: $nearly-white;
+ }
+ }
+ }
+
+ > .docGroup {
+ margin-left: 0;
+ }
+
+
+ .docGroup > .docGroup::before {
+ background-color: red;
+ margin-left: -1 * $left-padding; // -3.4em;
+ }
+
+ .doc, .docGroup {
+ &:hover > .operators {
+ opacity: 1;
+ }
+ }
+
+}
+
+
+/*
+.vc .docGroup[data-operation=and]::before,
+.vc .docGroup[data-operation=and] .operators {
+ background-color: white;
+}
+*/
+
+$dg-index : 30;
+
+.docGroup {
+ > .operators {
+ z-index: $dg-index;
+ }
+ .docGroup {
+ > .operators {
+ z-index: $dg-index + 1;
+ }
+ .docGroup {
+ > .operators {
+ z-index: $dg-index + 2;
+ }
+ .docGroup {
+ > .operators {
+ z-index: $dg-index + 3;
+ }
+ .docGroup {
+ > .operators {
+ z-index: $dg-index + 4;
+ }
+ .docGroup {
+ > .operators {
+ z-index: $dg-index + 5;
+ }
+ .docGroup {
+ > .operators {
+ z-index: $dg-index + 6;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}