Major redesign of JS and Sass assets
diff --git a/public/scss/alertify.scss b/public/scss/alertify.scss
new file mode 100644
index 0000000..ee83a5d
--- /dev/null
+++ b/public/scss/alertify.scss
@@ -0,0 +1,11 @@
+@import "util";
+
+/*
+article.alertify-log {
+ text-shadow:none;
+}
+*/
+
+article.alertify-log-warn {
+ background-color: $dark-orange;
+}
diff --git a/public/scss/base.scss b/public/scss/base.scss
index 8337b78..da95c81 100644
--- a/public/scss/base.scss
+++ b/public/scss/base.scss
@@ -1,8 +1,101 @@
@charset "utf-8";
-@import "colors";
+@import "util";
-body, html, select {
+body, html, select, g > text {
color: $dark-grey;
font-family: verdana, tahoma, arial;
margin: 0;
}
+
+g > text {
+ fill: $dark-grey;
+}
+
+* {
+ @include box-sizing-box;
+}
+
+body {
+ font-size: 12pt;
+}
+
+.intro p {
+ text-shadow: $light-shadow
+}
+
+a {
+ &[href^="http://"]:after {
+ font-family: "FontAwesome";
+ content: " \f08e";
+ font-size: 75%;
+ }
+ &:link {
+ color: $dark-orange;
+ text-decoration: none;
+ }
+ &:link:hover:hover {
+ color: $light-green; // $darkest-orange;
+ @include color-transition;
+ }
+ &:active, &:visited {
+ color: $darkest-orange;
+ }
+}
+
+main {
+ margin: {
+ left: $standard-margin;
+ right: $standard-margin; // Todo: -16px
+ }
+ &.embedded {
+ margin: {
+ left: 14px;
+ right: 14px;
+ }
+ }
+ p {
+ text-align: justify;
+ hyphens: auto;
+ }
+/*
+ > section > p, > p {
+ a {
+ border-radius: 6px;
+ padding: 0 .3em;
+ background-color: $choose-bg;
+ text-shadow: light-shadow;
+ color: $light-green;
+ &:hover {
+ color: $dark-green;
+ text-shadow: none;
+ background-color: $light-green;
+ }
+ }
+ }
+*/
+}
+/*
+blockquote {
+ border-radius: 12px;
+ margin: 0;
+ text-indent: 0;
+ padding: 1em;
+ border-left: {
+ color: $dark-grey;
+ style: solid;
+ width: 1em;
+ }
+ background-color: $light-grey;
+ &.warning {
+ border-left-color: $dark-orange;
+ }
+ &.exception {
+ border-left-color: red;
+ }
+}
+*/
+
+div.intro {
+ width: 70%;
+ min-width: 600px;
+}
\ No newline at end of file
diff --git a/public/scss/colors.scss b/public/scss/colors.scss
deleted file mode 100644
index 40082e1..0000000
--- a/public/scss/colors.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-/*
- * Orange
- */
-// $light-orange-2: #f4eebb;
-$light-orange: #ffe56a;
-// #ffd080;
-$dark-orange: #ffa500;
-$darker-orange: #ff8000;
-$darkest-orange: darken($dark-orange, 20%);
-
-// Yellow: #fff48d
-
-/*
- * Blue
- */
-$light-blue: #cfe6f4;
-$dark-blue: #73b2f4;
-$darkest-blue: darken($dark-blue, 40%);
-
-/*
- * Green
- */
-$dark-green: #496000;
-$middle-green: #688704;
-$light-green: #7ba400;
-
-/*
- * Grey
- */
-$light-grey: #ddd;
-$middle-grey: #999;
-$dark-grey: #333;
-// $nearly-white: #f5f5f5;
-$nearly-white: #fff;
-
-$light-shadow: 3px 3px 3px rgba(0,0,0,0.3);
-
-/**
- * KWIC colors
- */
-$kwic-border: $middle-grey;
-$kwic-line-noneven: $nearly-white;
-$kwic-line-even: $light-grey;
-$kwic-match-color: $dark-grey;
-$kwic-match-shadow: $light-shadow;
-
-$kwic-highlight-1: #c1002b;
-$kwic-highlight-2: $dark-blue; // #009ee0;
-$kwic-highlight-3: $dark-orange; // #f29400;
-$kwic-highlight-4: $light-green;
-
-$pagination-bg: $light-grey;
-$pagination-border: $middle-grey;
-$pagination-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
-
-$standard-border-radius: 6px;
-
-@mixin standard-text-padding {
- padding-left: .4em;
- padding-right: .4em;
-}
\ No newline at end of file
diff --git a/public/scss/fonts.scss b/public/scss/fonts.scss
new file mode 100644
index 0000000..be46ba2
--- /dev/null
+++ b/public/scss/fonts.scss
@@ -0,0 +1,10 @@
+@charset "utf-8";
+@import "util";
+
+@font-face {
+ font-family: 'FontAwesome';
+ src: url('#{$font-path}/fontawesome-webfont.eot?v=4.3.0');
+ src: url('#{$font-path}/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('#{$font-path}/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('#{$font-path}/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('#{$font-path}/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('#{$font-path}/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
\ No newline at end of file
diff --git a/public/scss/header.scss b/public/scss/header.scss
new file mode 100644
index 0000000..522be5e
--- /dev/null
+++ b/public/scss/header.scss
@@ -0,0 +1,85 @@
+@charset "utf-8";
+@import "util";
+
+header {
+ position: relative;
+ background-color: $light-green;
+ @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, span.location {
+ cursor: pointer;
+ font-weight: bold;
+ 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 {
+ content: "\f0dd";
+ pointer-events: none;
+ font-family: FontAwesome;
+ text-align: center;
+ background-color: $light-green;
+ }
+ }
+ form {
+ display: block;
+ padding-left: 230px;
+ margin: 0px;
+ position: relative;
+ }
+}
+
+
+/**
+ * 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/public/scss/kalamar.scss b/public/scss/kalamar.scss
index 7526d92..be2cf6f 100644
--- a/public/scss/kalamar.scss
+++ b/public/scss/kalamar.scss
@@ -1,8 +1,14 @@
@charset "utf-8";
-@import "colors"; // Color varia
+// Global variables and mixins
+@import "fonts"; // Font families
-@import "base"; // Base values
+@import "base"; // Base styles
+@import "logos"; // Logo images
+@import "header"; // Top
+@import "searchbar"; // The search bar
@import "menu"; // Menu list
-@import "matchinfo"; // Match table and tree
@import "pagination"; // Pagination
+@import "resultinfo"; // Information on results
+@import "matchinfo"; // Match table and tree
+@import "kwic"; // Kwic view information
diff --git a/public/scss/kwic.scss b/public/scss/kwic.scss
new file mode 100644
index 0000000..88a7da3
--- /dev/null
+++ b/public/scss/kwic.scss
@@ -0,0 +1,268 @@
+@charset "utf-8";
+@import "util";
+
+$border-size: 2px;
+
+#search {
+ position: relative;
+ margin-bottom: 44px;
+ overflow: visible;
+
+ &.match {
+ margin-top: 14pt;
+ }
+
+ ol {
+ width: auto;
+ overflow-x: hidden;
+ overflow-y: visible;
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ text-indent: 0;
+ border: 1px solid $kwic-border;
+ font-size: 10pt;
+ > li {
+ border: {
+ style: solid;
+ color: $dark-orange;
+ width: 0;
+ }
+ &:not(.active):not(:target) {
+ width: 99999%;
+ margin-left: -49999.5%;
+ background-color: $kwic-line-noneven;
+ overflow-x: hidden;
+ overflow-y: visible;
+ white-space: no-wrap;
+ cursor: pointer;
+ padding: 5pt 0 6pt 0;
+ &:nth-of-type(even) {
+ background-color: $kwic-line-even;
+ }
+ }
+ > div {
+ > div.snippet {
+ text-overflow: ellipsis;
+ text-indent: 0;
+ text-shadow: $light-shadow;
+
+ > span,
+ > mark {
+ white-space: no-wrap !important;
+ > span {
+ white-space: no-wrap !important;
+ }
+ color: #666;
+ }
+ > mark,
+ > span.match {
+ font-weight: bold;
+ /* text-shadow: $kwic-match-shadow; */
+ color: $kwic-match-color;
+ padding-left: 4pt;
+ padding-right: 2pt;
+ }
+ }
+ }
+ }
+
+ /* active view */
+ > li.active,
+ > li:target {
+ text-align: left;
+ width: auto;
+ cursor: normal;
+ white-space: wrap;
+ height: auto;
+ border-width: 2px;
+ background-color: $light-orange;
+ position: relative;
+ > div {
+ min-height: 42pt;
+ > div.snippet {
+ margin: 5pt 10pt;
+ margin-right: 3em;
+ > span {
+ line-height: 1.4em;
+ width: auto;
+ &.context-left {
+ margin-left: 0;
+ display: inline;
+ overflow: visible;
+ text-align: left;
+ width: auto;
+ }
+ }
+ }
+ }
+ }
+
+ /* Actions */
+ > li {
+ ul.action {
+ display: none;
+ > li {
+ cursor: pointer;
+ color: white;
+ text-decoration: none;
+ }
+ }
+
+
+ /* active actions */
+ &.active, &:target {
+ ul.action {
+ background-color: $dark-orange;
+ font-size: 12pt;
+ color: white;
+ text: {
+ shadow: none;
+ indent: 0;
+ }
+ margin: 0;
+ padding: 0;
+ z-index: 5;
+
+ display: block;
+ list-style: {
+ type: none;
+ position: inline;
+ }
+ &.right {
+ position: absolute;
+ width: $right-match-distance;
+ float: right;
+ text-align: center;
+ padding: 0pt 3pt;
+ height: 100%;
+ right: 0;
+ top: 0;
+ li {
+ > span {
+ @include blind;
+ }
+ &.close::after {
+ font-family: "FontAwesome";
+ content: "\f00d";
+ }
+ &.info::after {
+ font-family: "FontAwesome";
+ content: "\f05a";
+ }
+ }
+ }
+ }
+ }
+ &:not(.active):not(:target) p.ref {
+ display: none;
+ }
+ &.active p.ref,
+ &:target p.ref {
+ background-color: $dark-orange;
+ color: white;
+ padding: 3pt 10pt;
+ padding-right: $right-match-distance;
+ margin: 0pt;
+ width: 100%;
+ bottom: 0;
+ z-index: 30;
+ }
+ }
+ }
+}
+
+/*
+ol.align-free > li:not(.active):not(:target) > div > div.snippet > span.left {
+ display: inline-block;
+ text-align: right;
+ width: 50.046%;
+}
+
+ol.align-free > li:not(.active):not(:target) > div > div.snippet > span.separator {
+ width: 0px;
+ height: 1em;
+ margin-bottom: -2px;
+ display: inline-block;
+ line-height: 100%;
+ border: 1px solid #009EE0;
+ margin-left: 2px;
+ margin-right: 2px;
+}
+
+ol.align-free > li > div > div.snippet > span.right {
+ text-align: left;
+}
+*/
+
+ol.align-left > li > div > div.snippet > span.context-left {
+ display: inline-block;
+ text-align: right;
+ width: 50.01%;
+}
+
+ol.align-right {
+ text-align: right;
+ > li:not(.active):not(:target) > div > div.snippet > span.context-right {
+ display: inline-block;
+ text-align: left;
+ width: 49.915%;
+ }
+}
+
+/**
+ * Highlights
+ */
+mark > mark,
+em,
+.level-0 {
+ border-bottom-width: 2px;
+ border-bottom-style: solid;
+ padding-bottom: 0px;
+ font-style: normal;
+}
+
+mark > mark > mark,
+em > em,
+.level-1 {
+ padding-bottom: 3px;
+}
+
+mark > mark > mark > mark,
+em > em > em,
+.level-2 {
+ padding-bottom: 6px;
+}
+
+li {
+ &:not(.active) mark > mark > mark > mark,
+ &:not(.active) em > em > em {
+ line-height: 180%;
+ }
+ &.active mark > mark > mark > mark,
+ &.active em > em > em {
+ line-height: 250%;
+ }
+}
+
+.class-1 { border-color: $kwic-highlight-1; }
+.class-2 { border-color: $kwic-highlight-2; }
+.class-3 { border-color: $kwic-highlight-3; }
+.class-4 { border-color: $kwic-highlight-4; }
+
+/*
+span.more:before {
+ content: "…";
+ padding-left: 2pt;
+ padding-right: 2pt;
+}
+*/
+
+div.snippet.startMore:before,
+div.snippet.endMore:after {
+ content: "…";
+ padding-left: 2pt;
+ padding-right: 2pt;
+}
+
+
diff --git a/public/scss/logos.scss b/public/scss/logos.scss
new file mode 100644
index 0000000..0141bf6
--- /dev/null
+++ b/public/scss/logos.scss
@@ -0,0 +1,106 @@
+@charset "utf-8";
+@import "util";
+
+.logo {
+ &::after {
+ content: "" !important;
+ }
+ > * {
+ background: {
+ repeat: no-repeat;
+ size: 90%;
+ position: 50% 50%;
+ }
+ > span {
+ margin-left: -3000px;
+ }
+ }
+}
+
+/**
+ * Background image for the front page
+ */
+#kalamar-bg {
+ position: fixed;
+ height: 110%;
+ width: 175%;
+ top: 0;
+ z-index: -5000;
+ background: {
+ image:url('#{$img-path}/korap-bg-kalamar.svg');
+ size: 50%;
+ repeat: no-repeat;
+ position: 50% 50%;
+ }
+}
+
+/**
+ * Logo table of the front page
+ */
+#logos {
+ position: relative;
+ text-align: right;
+ font-size: 85%;
+ right: 0;
+ width: 100%;
+ margin-left: $standard-margin;
+ padding-left: 60%;
+ > div {
+ border-top: 26px solid $dark-orange;
+ padding-right: 2em;
+ }
+ p {
+ text-align: left;
+ display: inline-block;
+ }
+}
+
+
+/**
+ * Logo: Institute for German Language
+ */
+#ids-logo {
+ display: block;
+ width: (910 / 60) + em;
+ height: (176 / 60) + em;
+ background: {
+ image:url('#{$img-path}/ids-institute-for-german-language.svg');
+ }
+}
+
+/**
+ * Logo: Member of the Leibniz Association
+ */
+#leibniz-logo {
+ display: block;
+ width: (199 / 20) + em;
+ height: (130 / 20) + em;
+ background: {
+ image:url('#{$img-path}/member-of-the-leibniz-association.svg');
+ }
+}
+
+/**
+ * Logo: KorAP
+ */
+h1 {
+ position: absolute;
+ margin-left:15px;
+ margin: 0;
+ left: 0;
+ top: 0;
+ width: 7.8em;
+ height: 2.4em;
+ z-index: 999;
+ background: {
+ size: 72%;
+ image: url('#{$img-path}/korap-logo-kalamar.svg');
+ }
+}
+
+/*
+#leibniz-logo, #ids-logo {
+ height: (130 / 20) + em;
+}
+
+*/
\ No newline at end of file
diff --git a/public/scss/matchinfo.scss b/public/scss/matchinfo.scss
index 0ddea47..d26c6e5 100644
--- a/public/scss/matchinfo.scss
+++ b/public/scss/matchinfo.scss
@@ -1,10 +1,17 @@
@charset "utf-8";
-@import "colors";
+@import "util";
$left-width: 176px;
$border-size: 2px;
$left-distance: $left-width + ($border-size * 2);
+@mixin cell-info {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ padding: 1px 6px;
+ margin: 0px;
+}
+
/**
* Table view
*
@@ -20,39 +27,52 @@
div.matchinfo {
position: relative;
width: 100%;
+ padding-top: $border-size;
+ background-color: $dark-orange;
height: auto;
font-size: 10pt;
- > p {
+ text-align: left;
+ > p.addtree {
position: relative;
- background-color: $darker-orange;
- box-sizing: border-box;
- color: $nearly-white;
+ @include choose-item;
+ border: {
+ width: $border-size;
+ style: solid;
+ radius: $standard-border-radius;
+ }
+
font-size: inherit;
- margin: $border-size 0 0 0 !important;
- font-weight: bold;
+ margin: $border-size $border-size 0 $border-size !important;
width: $left-width;
- text-align: left !important;
+ text-align: center;
cursor: pointer;
- padding-left: $border-size * 2 !important;
+ padding: 0 !important;
+
+ &:hover {
+ cursor:pointer;
+ @include choose-hover;
+ }
+
*.menu {
border-top-right-radius: 8px;
position: absolute;
- top: 0;
- left: $left-distance;
+ width: $left-width;
+ left: 0;
+ bottom: 0;
+ text-align: left;
+ margin: -1* $border-size;
margin-top: 0;
> li:first-of-type {
border-top-right-radius: 5px;
}
}
- &:before {
- content: '+ '; // FontAwesome
- }
}
}
div.matchtable {
z-index: 20;
margin-left: $left-distance - ($border-size / 2);
+ margin-right: $right-match-distance;
padding: 0;
overflow-x: auto;
overflow-y: visible;
@@ -72,9 +92,6 @@
}
}
tbody {
- th {
- text-overflow: ellipsis;
- }
> tr:nth-of-type(1) > th {
border-top-color: transparent;
}
@@ -113,14 +130,12 @@
left: ($left-width / 2) + $border-size;
}
> * {
- box-sizing: border-box;
- padding: 1px 6px;
- margin: 0px;
+ @include cell-info;
border: ($border-size / 2) solid $dark-orange;
}
}
tr > td {
- background-color: $nearly-white;
+ background-color: $middle-orange; // $nearly-white;
white-space: nowrap;
vertical-align: top;
text-align: center;
@@ -147,12 +162,12 @@
display: inline;
font-size: inherit;
color: $nearly-white;
- text-align: center;
margin: 0;
padding: 0 !important;
float: left;
> span {
@include matchinfo-head;
+ @include cell-info;
display: inline-block;
margin: 0;
&:nth-of-type(2) {
@@ -163,28 +178,28 @@
> div {
overflow-x: auto;
margin: $border-size;
- box-sizing: border-box;
margin-left: $left-distance;
- background-color: $nearly-white; // $light-orange;
+ margin-right: $right-match-distance;
+
+ background-color: $light-orange; // $nearly-white; // $light-orange;
> em {
- background-color: $dark-orange;
- display: block;
- width: 1.5em;
- height: 1.5em;
- line-height: 1.2em;
- position: absolute;
- right: 10px;
- top: 10px;
- border-radius: 5px;
- border: $border-size solid $darker-orange;
- cursor: pointer;
- text-align: center;
color: $nearly-white;
+ cursor: pointer;
+ display: block;
+ position: absolute;
+ right: 0px;
+ top: 0px;
+ width: $right-match-distance;
+ border-width: 0;
+ z-index: 8;
+ text-decoration:none;
+ text-align: center;
font-weight: bold;
font-style: normal;
- &:after {
- // FontAwesome
- content: 'x';
+
+ &::after {
+ font-family: 'FontAwesome';
+ content: '\f00d';
}
}
}
@@ -203,7 +218,7 @@
g.middle > rect {
stroke: $darker-orange;
stroke-width: 2px;
- fill: $light-orange; // $nearly-white;
+ fill: $middle-orange;
}
g.leaf > rect {
diff --git a/public/scss/menu.scss b/public/scss/menu.scss
index 43fab57..e8b9f41 100644
--- a/public/scss/menu.scss
+++ b/public/scss/menu.scss
@@ -1,35 +1,31 @@
@charset "utf-8";
-@import "colors";
+@import "util";
+$border-size: 2px;
/**
* Menu list - used nearly everywhere
*/
-ul.menu {
- position: absolute;
- margin: 0;
- text-indent: 0;
- list-style-type: none;
- list-style-position: outside;
- padding-left: 0;
- padding-bottom: 3px;
- background-color: $pagination-bg;
-}
-
ul.menu,
ul.menu > span.pref:not(:empty) {
box-sizing: border-box;
text-shadow: none;
font-weight: normal;
// Pagination border?
- border: 2px solid $middle-green;
- box-shadow: $pagination-box-shadow;
- z-index: 16;
- border-radius: $standard-border-radius;
+
+ 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: 3px 10px;
white-space: normal;
@@ -37,25 +33,50 @@
ul.menu > li,
ul.menu > span.pref:not(.active) {
- background-color: $pagination-bg;
- color: $light-green
+ @include choose-item;
}
-/**
- * List items
- */
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: 3px solid transparent;
- &:not(.no-more) {
- border-top-color: $dark-orange;
+ border-top: {
+ width: $border-size;
+ left-radius: $standard-border-radius;
+ right-radius: $standard-border-radius;
+ }
+ &:not(.no-more):before {
+ position: absolute;
+ font-family: "FontAwesome";
+ content: '\f0de';
+ right: .5em;
+ top: .4em;
}
}
&:last-of-type {
- border-bottom: 3px solid transparent;
- &:not(.no-more) {
- border-bottom-color: $dark-orange;
+ border-bottom: {
+ width: $border-size;
+ left-radius: $standard-border-radius;
+ right-radius: $standard-border-radius;
+ }
+
+ &:not(.no-more):before {
+ position: absolute;
+ font-family: "FontAwesome";
+ content: '\f0dd';
+ right: .5em;
+ bottom: .4em;
}
}
mark {
@@ -65,33 +86,32 @@
font-weight: bold;
}
}
- > *.active {
- background-color: $light-green;
- color: $dark-green;
+ > li.active,
+ > span.pref.active {
+ @include choose-active;
}
> li:hover,
> span.pref:hover {
- background-color: $dark-orange;
- color: $nearly-white;
+ @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;
+ }
}
}
-/**
- * Default prefix view
- */
-ul.menu > span.pref:not(:empty) {
- position: absolute;
- min-width: 5px;
-/*
- border-bottom-right-radius: 10px;
-*/
- font-size: 80%;
- left: 0;
- bottom: 0;
- display: block;
- margin-bottom: -2.1em;
- padding: 2px 6px;
- margin-left: -2px;
- border-radius: $standard-border-radius;
-}
diff --git a/public/scss/pagination.scss b/public/scss/pagination.scss
index c0cfdd1..0e099ac 100644
--- a/public/scss/pagination.scss
+++ b/public/scss/pagination.scss
@@ -1,5 +1,7 @@
@charset "utf-8";
-@import "colors";
+@import "util";
+
+$border-size : 2px;
/**
* The pagination view
@@ -8,11 +10,11 @@
<div id="pagination">
<a rel="prev"><span><i class="fa fa-caret-left"></i></span></a>
<a rel="self"><span>1</span></a>
- <a href="/?ql=poliqarp&q=test&action=ok&p=2"><span>2</span></a>
- <a href="/?ql=poliqarp&q=test&action=ok&p=3"><span>3</span></a>
+ <a href="#p=2"><span>2</span></a>
+ <a href="#3"><span>3</span></a>
<span><i class="fa fa-ellipsis-h"></i></span>
- <a href="/?ql=poliqarp&q=test&action=ok&p=67"><span>67</span></a>
- <a rel="next" href="/?ql=poliqarp&q=test&action=ok&p=2"><span><i class="fa fa-caret-right"></i></span></a>
+ <a href="#67"><span>67</span></a>
+ <a rel="next" href="#2"><span><i class="fa fa-caret-right"></i></span></a>
</div>
*/
#pagination {
@@ -21,65 +23,92 @@
* This may need to be overwritten in case multiple
* paginations have to be activated.
*/
+ font-size: 0;
position: fixed;
right: 20px;
-
bottom: 10px;
z-index: 400;
+ padding: 0;
+ height: auto;
+ line-height: 0;
- span {
- display: inline-block;
- background-color: $pagination-bg;
- height: 1.5em;
- line-height: 1.5em;
- @include standard-text-padding;
- text-align: center;
- border: {
- top-width: 2px;
- top-style: solid;
- bottom-width: 2px;
- bottom-style: solid;
- color: $pagination-border;
- }
- box-shadow: $pagination-box-shadow;
- }
- a {
- text-shadow: $light-shadow;
- &[rel=self] span {
+ > a {
+ margin: 0;
+ font-size: 10pt;
+ padding: 0;
+
+ > span {
+ box-shadow: $choose-box-shadow;
+ @include standard-text-padding;
+ @include choose-item;
+ display: inline-block;
+ line-height: 2em;
+ text-align: center;
border: {
- color: $dark-orange;
+ top-width: $border-size;
+ bottom-width: $border-size;
+ top-style: solid;
+ bottom-style: solid;
+ }
+ }
+
+ &:not(:link):not([rel=self]) span {
+ color: $choose-blind-color;
+ }
+
+ &.ellipsis > span {
+ > span {
+ @include blind;
+ }
+ &::after {
+ font-family: 'FontAwesome';
+ content: '\f141';
+ }
+ }
+
+ &[rel=self] > span {
+ @include choose-active;
+ border {
+ left-width: $border-size;
+ right-width: $border-size;
left-style: solid;
right-style: solid;
- left-width: 2px;
- right-width: 2px;
- }
- background-color: $light-orange;
- color: $darkest-orange;
- }
- &[rel=next] span {
- border: {
- right-width: 2px;
- right-style: solid;
- top-right-radius: 12px;
- bottom-right-radius: 12px;
}
}
- &[rel=prev] span {
+
+ &[rel=prev] > span {
border: {
- left-width: 2px;
+ top-left-radius: $standard-border-radius;
+ bottom-left-radius: $standard-border-radius;
+ left-width: $border-size;
left-style: solid;
- top-left-radius: 12px;
- bottom-left-radius: 12px;
- }
- }
- &[href] {
- color: $light-green;
- span:hover {
- background-color: $light-green;
- border-color: $dark-green;
- color: $dark-green;
- text-shadow: none;
}
+ > span {
+ @include blind;
+ }
+ &::after {
+ font-family: 'FontAwesome';
+ content: '\f0d9';
+ }
+ }
+
+ &[rel=next] > span {
+ border: {
+ top-right-radius: $standard-border-radius;
+ bottom-right-radius: $standard-border-radius;
+ right-width: $border-size;
+ right-style: solid;
+ }
+ > span {
+ @include blind;
+ }
+ &::after {
+ font-family: 'FontAwesome';
+ content: '\f0da';
+ }
+ }
+ &:link:hover span {
+ @include choose-hover;
}
}
-}
+}
\ No newline at end of file
diff --git a/public/scss/resultinfo.scss b/public/scss/resultinfo.scss
new file mode 100644
index 0000000..1f1097f
--- /dev/null
+++ b/public/scss/resultinfo.scss
@@ -0,0 +1,19 @@
+@charset "utf-8";
+@import "util";
+
+div.resultinfo {
+ clear: both;
+
+ p.found {
+ font-size: 10pt;
+ padding: 0;
+ margin: 0;
+ text-align: right;
+ }
+}
+
+#total-results {
+ color: $total-results;
+ font-weight: bold;
+}
+
diff --git a/public/scss/searchbar.scss b/public/scss/searchbar.scss
new file mode 100644
index 0000000..5ac8c0c
--- /dev/null
+++ b/public/scss/searchbar.scss
@@ -0,0 +1,134 @@
+@charset "utf-8";
+@import "util";
+
+$border-size: 2px;
+$right-distance: 30px;
+
+#q-field {
+ @include box-sizing-box();
+ outline: none;
+ font-size: 11pt;
+ border: $border-size solid $nearly-white;
+ padding: 2px;
+ width: 100%;
+ margin: 0;
+ display: block;
+}
+
+#searchbar {
+ position: relative;
+ @include box-sizing-box();
+ 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: "\f002";
+ }
+ 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";
+ }
+ }
+}
+
+#button-right {
+ display: inline-block;
+ float: right;
+ 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: '\f19d';
+ }
+ > a.align.left::after {
+ content: '\f036';
+ }
+ > a.align.right::after {
+ content: '\f038';
+ }
+}
diff --git a/public/scss/util.scss b/public/scss/util.scss
new file mode 100644
index 0000000..7c3f056
--- /dev/null
+++ b/public/scss/util.scss
@@ -0,0 +1,122 @@
+/**
+ * Orange Colors
+ */
+$light-orange: #f4eebb; // #ffe56a;
+$middle-orange: #ffd080;
+$dark-orange: #ffa500;
+$darker-orange: #ff8000;
+$darkest-orange: darken($dark-orange, 20%);
+// $light-orange-2: #f4eebb;, #ffd080;
+// Yellow: #fff48d
+
+/**
+ * Green Colors
+ */
+$dark-green: #496000;
+$middle-green: #688704;
+$light-green: #7ba400;
+
+/**
+ * Blue Colors
+ */
+$light-blue: #cfe6f4;
+$dark-blue: #73b2f4;
+$darkest-blue: darken($dark-blue, 40%);
+
+
+/*
+ * Grey
+ */
+$light-grey: #ddd;
+$dark-grey: #555;
+$middle-grey: #999;
+// $nearly-white: #f5f5f5;
+$nearly-white: #fff;
+
+$dark-shadow: 1px 1px 1px rgba(0,0,0,0.3);
+$light-shadow: 1px 1px rgba(255,255,255,0.5);
+
+$total-results: $light-green;
+
+/**
+ * KWIC colors
+ */
+$kwic-border: $middle-grey;
+$kwic-line-noneven: $light-grey;
+$kwic-line-even: $nearly-white;
+$kwic-match-color: $dark-grey;
+$kwic-match-shadow: $light-shadow;
+
+$kwic-highlight-1: #c1002b;
+$kwic-highlight-2: $dark-blue; // #009ee0;
+$kwic-highlight-3: $dark-orange; // #f29400;
+$kwic-highlight-4: $light-green;
+
+$choose-bg: $light-grey;
+$choose-border-color: $middle-grey;
+$choose-border: 2px solid $choose-border-color;
+$choose-color: $dark-grey;
+$choose-blind-color: $middle-grey;
+$choose-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
+$standard-border-radius: 6px;
+
+/**
+ * Path information
+ */
+$img-path: '../../img/build';
+$font-path: '../../font';
+
+/**
+ * Margins
+ */
+$standard-margin: 30px;
+$right-match-distance: 20px;
+
+@mixin blind {
+ position: absolute;
+ margin-left: -3000px;
+}
+
+@mixin choose-item {
+ color: $choose-color;
+ background-color: $choose-bg;
+ border-color: $choose-border-color;
+ text-shadow: $light-shadow;
+}
+
+@mixin choose-hover {
+ color: $nearly-white;
+ text-shadow: none;
+ background-color: $dark-orange;
+ border-color: $darker-orange;
+}
+
+@mixin choose-active {
+ color: $dark-green;
+ text-shadow: none;
+ background-color: $light-green;
+ border-color: $dark-green;
+}
+
+@mixin color-transition {
+ transition: color 0.3s ease 0s;
+}
+
+@mixin standard-text-padding {
+ padding-left: .4em;
+ padding-right: .4em;
+}
+
+@mixin box-sizing-box() {
+ -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+ -moz-box-sizing: border-box; /* Firefox, other Gecko */
+ box-sizing: border-box; /* Opera/IE 8+ */
+}
+
+
+// https://css-tricks.com/almanac/properties/a/appearance/
+@mixin no-appearance {
+ -webkit-appearance:none;
+ -moz-appearance:none;
+ appearance:none;
+}