Refactoring of style files
Change-Id: I56d3641741f2289bb0f9dbaf641b85a401cf1042
diff --git a/Changes b/Changes
index 6bfcd63..46d7fa3 100755
--- a/Changes
+++ b/Changes
@@ -1,10 +1,11 @@
-0.39 2020-08-24
+0.39 2020-08-25
- Add information on secret file to Readme.
- Change default API endpoint to korap.ids-mannheim.de.
- Fix label for toggle plugins.
- Activate plugin registry.
- Forward 'pipe' parameter to backend.
- Introduce base css file for plugins.
+ - Refactoring of sass files.
WARNING: If you relied on the former default API endpoint
being http://localhost:9999/, this will break your
diff --git a/Gruntfile.js b/Gruntfile.js
index 114014a..d30b19e 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -79,10 +79,10 @@
},
files: {
'public/css/kalamar-<%= pkg.version %>.css' : 'dev/scss/kalamar.scss',
- 'public/css/kalamar-plugin-<%= pkg.pluginVersion %>.css' : 'dev/scss/base.scss',
+ 'public/css/kalamar-plugin-<%= pkg.pluginVersion %>.css' : 'dev/scss/plugin.scss',
'dev/css/kalamar.css' : 'dev/scss/kalamar.scss',
'dev/css/kwic.css' : 'dev/scss/main/kwic.scss',
- 'dev/css/kalamar-plugin.css' : 'dev/scss/base.scss'
+ 'dev/css/kalamar-plugin.css' : 'dev/scss/plugin.scss'
}
}
},
diff --git a/dev/demo/all.html b/dev/demo/all.html
index 79130e6..4ca3c6b 100644
--- a/dev/demo/all.html
+++ b/dev/demo/all.html
@@ -143,6 +143,10 @@
"type": "type:string"
},
{
+ "@type":"koral:docGroupRef",
+ "ref":"@admin/derekosub"
+ },
+ {
"@type": "koral:doc",
"key": "subTitle",
"match": "match:eq",
diff --git a/dev/demo/alldemo.js b/dev/demo/alldemo.js
index 108bfe6..ab252ee 100644
--- a/dev/demo/alldemo.js
+++ b/dev/demo/alldemo.js
@@ -315,6 +315,10 @@
"match":"match:eq"
},
{
+ "@type":"koral:docGroupRef",
+ "ref":"@admin/derekosub"
+ },
+ {
"@type":"koral:doc",
"key":"subTitle",
"value":"Gedichte",
diff --git a/dev/img/noise.png b/dev/img/noise.png
deleted file mode 100644
index 12ca37d..0000000
--- a/dev/img/noise.png
+++ /dev/null
Binary files differ
diff --git a/dev/scss/base.scss b/dev/scss/base.scss
deleted file mode 100644
index fe16021..0000000
--- a/dev/scss/base.scss
+++ /dev/null
@@ -1,128 +0,0 @@
-@charset "utf-8";
-@import "util";
-@import "base/fonts";
-@import "base/flextable";
-@import "base/fragment";
-@import "base/load";
-@import "base/form";
-@import "base/view";
-
-/**
- * Basic global CSS rules for Kalamar
- */
-
-body,
-html,
-select,
-g > text {
- color: $dark-grey;
- font-family: verdana, tahoma, arial, Helvetica, sans-serif;
- margin: 0;
-}
-
-* {
- @include box-sizing-box;
-}
-
-g > text {
- fill: $dark-grey;
-}
-
-html {
- height: 100%;
-}
-
-body {
- position: relative;
- min-height: 100%;
- font-size: 12pt;
- margin: 0;
- padding: 0;
-}
-
-
-a {
- &:link {
- color: $dark-orange;
- text-decoration: none;
- &:hover {
- color: $darkest-orange;
- @include color-transition;
- }
- }
-
- // External links
- &[href^="http://"]::after,
- &[href^="https://"]::after {
- font-family: FontAwesome;
- white-space: nowrap;
- content: " " + $fa-extlink;
- font-size: 75%;
- }
-}
-
-// Styles for Mojolicious::Plugin::TagHelpers::MailToChiffre
-a[onclick$='return PArok(this,false)'] {
- direction:rtl;
- unicode-bidi:bidi-override;
- text-align:left;
- & > span {
- &:nth-child(1n+2){
- display:none
- }
- &:nth-child(1)::after{
- content:'@'
- }
- }
-}
-
-button {
- cursor: pointer;
-}
-
-button[type=submit] {
- font-weight: normal;
- @include choose-item;
- padding: 0;
- height: 100%;
- top: 0;
- width: $button-width;
- cursor:pointer;
- > span:nth-of-type(1) {
- @include blind;
- }
- &::after {
- font-family: "FontAwesome";
- }
- border: {
- width: $border-size;
- style: solid;
- color: $nearly-white;
- }
- &:hover, &:focus {
- @include choose-hover;
- }
- &::-moz-focus-inner {
- border: none;
- }
- &: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;
-}
diff --git a/dev/scss/base/base.scss b/dev/scss/base/base.scss
new file mode 100644
index 0000000..022c590
--- /dev/null
+++ b/dev/scss/base/base.scss
@@ -0,0 +1,128 @@
+@charset "utf-8";
+@import "../util";
+@import "fonts";
+@import "flextable";
+@import "fragment";
+@import "load";
+@import "form";
+@import "view";
+@import "menu";
+
+/**
+ * Basic global CSS rules for Kalamar
+ */
+
+
+* {
+ @include box-sizing-box;
+}
+
+body,
+html,
+select,
+g > text {
+ font-family: verdana, tahoma, arial, Helvetica, sans-serif;
+ color: $dark-grey;
+ margin: 0;
+}
+
+g > text {
+ fill: $dark-grey;
+}
+
+html {
+ height: 100%;
+}
+
+body {
+ position: relative;
+ min-height: 100%;
+ font-size: 12pt;
+ margin: 0;
+ padding: 0;
+}
+
+a {
+ &:link {
+ text-decoration: none;
+ color: $dark-orange;
+ &:hover {
+ color: $darkest-orange;
+ transition: color 0.3s ease 0s;
+ }
+ }
+
+ // External links
+ &[href^="http://"]::after,
+ &[href^="https://"]::after {
+ @include icon-font;
+ content: " " + $fa-extlink;
+ font-size: 75%;
+ }
+}
+
+// Styles for Mojolicious::Plugin::TagHelpers::MailToChiffre
+a[onclick$='return PArok(this,false)'] {
+ unicode-bidi: bidi-override;
+ direction: rtl;
+ text-align: left;
+ & > span {
+ &:nth-child(1n+2){
+ display: none
+ }
+ &:nth-child(1)::after{
+ content: '@'
+ }
+ }
+}
+
+.clear {
+ clear: both;
+}
+
+blockquote {
+ border-radius: $standard-border-radius;
+ padding: 2pt 5pt 2pt 20pt;
+ margin: 0;
+ border-left: 5px solid $ids-blue-1;
+ background-color: $ids-blue-2;
+ color: $ids-blue-1;
+
+ &.bug,
+ &.missing {
+ border-left-color: $dark-red;
+ background-color: $middle-red;
+ color: $nearly-white;
+ }
+}
+
+dl {
+ margin: 0;
+ padding-bottom: .5em;
+
+ dt {
+ font-weight: bold;
+
+ abbr {
+ border-width: 0;
+
+ &[data-type=token]::after {
+ color: $ids-blue-1;
+ }
+
+ &[data-type=span]::after {
+ color: $ids-pink-1;
+ }
+
+ &::after {
+ content: ' (' attr(title) ')';
+ vertical-align: bottom;
+ font: {
+ style: italic;
+ weight: normal;
+ size: 80%;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/dev/scss/base/choose.scss b/dev/scss/base/choose.scss
new file mode 100644
index 0000000..fc3d250
--- /dev/null
+++ b/dev/scss/base/choose.scss
@@ -0,0 +1,66 @@
+@import "colors";
+
+/**
+ * Some color definitions and mixins for
+ * buttons and menus.
+ */
+$choose-bg: $light-grey;
+$choose-color: $dark-grey;
+$choose-blind-color: $middle-grey;
+$choose-border-color: $middle-grey;
+$choose-border: 2px solid $choose-border-color;
+$choose-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
+
+
+/**
+ * Chooseable items (default)
+ */
+@mixin choose-item {
+ color: $choose-color;
+ background-color: $choose-bg;
+ border-color: $choose-border-color;
+ text-shadow: $light-shadow;
+}
+
+
+/**
+ * Chooseable items (mouse over)
+ */
+@mixin choose-hover {
+ color: $nearly-white;
+ background-color: $dark-orange;
+ border-color: $darker-orange;
+ text-shadow: none;
+}
+
+
+/**
+ * Chooseable items (not available)
+ */
+@mixin choose-inactive {
+ color: lighten($choose-color, 20%);
+ background-color: lighten($choose-bg, 20%);
+ border-color: transparent;
+ text-shadow: none;
+}
+
+/**
+ * Chooseable items (active)
+ */
+@mixin choose-active {
+ color: $dark-green;
+ background-color: $light-green;
+ border-color: $dark-green;
+ text-shadow: none;
+}
+
+
+/**
+ * Chooseable items (action: remove something)
+ */
+@mixin choose-remove {
+ color: $nearly-white;
+ background-color: $middle-red;
+ border-color: $dark-red;
+ text-shadow: none;
+}
diff --git a/dev/scss/base/colors.scss b/dev/scss/base/colors.scss
new file mode 100644
index 0000000..244d1fe
--- /dev/null
+++ b/dev/scss/base/colors.scss
@@ -0,0 +1,87 @@
+/**
+ * Some colors and shadow definitions
+ * for Kalamar,
+ */
+
+/**
+ * Official IDS colors
+ */
+$ids-orange-1: rgb(246, 168, 0);
+$ids-orange-2: rgb(242, 148, 0);
+$ids-grey-1: rgb(135, 136, 138);
+$ids-grey-2: rgb(217, 218, 219);
+$ids-blue-1: rgb( 0, 158, 224); // Pragmatik
+$ids-blue-2: rgb(188, 228, 247); // Pragmatik
+$ids-green-1: rgb( 99, 111, 7); // Grammatik
+$ids-green-2: rgb(227, 232, 163); // Grammatik
+$ids-pink-1: rgb(193, 0, 43); // Lexik
+$ids-pink-2: rgb(250, 243, 222); // Lexik
+
+$black: #333;
+
+
+/**
+ * Orange Colors
+ */
+$light-orange: #f4eebb;
+$middle-orange: #ffd080;
+$dark-orange: $ids-orange-1;
+$darker-orange: #ff8000;
+$darkest-orange: #e55d00;
+
+
+/**
+ * Green Colors
+ */
+$dark-green: $ids-green-1; // #496000;
+$middle-green: lighten($ids-green-1, 9%);
+$light-green: lighten($ids-green-1, 13%); // #7ba400;
+$lightest-green: desaturate(lighten($light-green, 35%), 20%); // #d8e38c;
+$grey-green: darken(desaturate($lightest-green, 25%), 12%); // #bcc387;
+
+
+/**
+ * Blue Colors
+ */
+$light-blue: $ids-blue-2;
+$dark-blue: $ids-blue-1;
+$darkest-blue: darken($dark-blue, 40%);
+
+
+/**
+ * Grey Colors
+ */
+$middle-grey: $ids-grey-1; // #999;
+$light-grey: $ids-grey-2; // #ddd;
+$dark-grey: darken($middle-grey, 15%);
+$nearly-white: #fefefe;
+
+
+/**
+ * Red Colors (no IDS relation)
+ */
+$middle-red: #c1002b;
+$light-red: lighten($middle-red, 40%);
+$dark-red: darken($middle-red, 40%);
+$alert-red: rgb(254,26,0);
+
+/**
+ * Basic shadows
+ */
+$dark-shadow: 1px 1px 1px rgba(0,0,0,0.3);
+$light-shadow: 1px 1px rgba(255,255,255,0.5);
+
+
+/**
+ * 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: $middle-red;
+$kwic-highlight-2: $dark-blue;
+$kwic-highlight-3: $dark-orange;
+$kwic-highlight-4: $light-green;
diff --git a/dev/scss/base/flextable.scss b/dev/scss/base/flextable.scss
index 910d275..dc5ffd9 100644
--- a/dev/scss/base/flextable.scss
+++ b/dev/scss/base/flextable.scss
@@ -1,6 +1,9 @@
+@import "lengths";
+@import "mixins";
+
/**
* This defines flexible table cells
- * for views.
+ * for views (including media queries).
*/
dl.flex {
diff --git a/dev/scss/base/fonts.scss b/dev/scss/base/fonts.scss
index 81726ad..febfa57 100644
--- a/dev/scss/base/fonts.scss
+++ b/dev/scss/base/fonts.scss
@@ -1,5 +1,5 @@
@charset "utf-8";
-@import "../util";
+@import "paths";
/**
* Load web fonts for Kalamar
@@ -10,5 +10,5 @@
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;
+ font-style: normal;
}
\ No newline at end of file
diff --git a/dev/scss/base/form.scss b/dev/scss/base/form.scss
index d5c9aba..6fc75dc 100644
--- a/dev/scss/base/form.scss
+++ b/dev/scss/base/form.scss
@@ -1,4 +1,9 @@
-// This class defines form views
+@import "lengths";
+@import "colors";
+
+/**
+ * Definition of form elements for Kalamar.
+ */
.form-table {
display: block;
@@ -8,11 +13,9 @@
border-width: 0;
padding: 0;
margin: 0;
- // margin-left: 5em;
- }
-
- fieldset > div {
- white-space: nowrap;
+ > div {
+ white-space: nowrap;
+ }
}
legend {
@@ -22,7 +25,8 @@
border-radius: $standard-border-radius;
}
- label, input[type=radio] {
+ label,
+ input[type=radio] {
font-size: 80%;
}
@@ -31,63 +35,65 @@
text-align: left;
}
- label[for], input[type=submit], a.form-button {
+ label[for],
+ input[type=submit],
+ a.form-button {
margin-top: 2em;
}
- input, textarea, button, a.form-button {
+ input,
+ textarea,
+ button,
+ a.form-button {
border-radius: $standard-border-radius;
}
- input, textarea {
- border-color: $ids-grey-2;
+ input,
+ textarea {
+ border-color: $ids-grey-2;
background-color: $nearly-white;
- border-style: solid;
+ border-style: solid;
}
- input, textarea, select, a.form-button {
+ input,
+ textarea,
+ select,
+ a.form-button {
border-style: solid;
- display: inline-block;
- width: 20%;
- min-width: 20em;
- padding: $base-padding;
+ display: inline-block;
+ width: 20%;
+ min-width: 20em;
+ padding: $base-padding;
}
input[type=radio] {
- display: inline;
- text-aline: right;
+ display: inline;
+ text-aline: right;
background-color: red;
- width: auto;
- min-width: auto;
+ width: auto;
+ min-width: auto;
}
- input[readonly=readonly],textarea[readonly] {
- background-color: $light-orange; // rgba(0,0,0,0.5);
+ input[readonly=readonly],
+ textarea[readonly] {
+ background-color: $light-orange;
}
.field-with-error {
border-color: $ids-pink-1;
}
- /*
- input:not([type=radio]),
- button,
- a.form-button {
- height: 3em;
- }
-*/
-
input[type=submit],
button,
a.form-button {
- display: inline-block;
- cursor: pointer;
- border-width: thin;
- text-align: center;
+ display: inline-block;
+ cursor: pointer;
+ border-width: thin;
+ text-align: center;
background-color: $middle-green;
- border-color: $dark-green;
- font-size: 8pt;
- color: $dark-green;
+ border-color: $dark-green;
+ font-size: 8pt;
+ color: $dark-green;
}
a.form-button:hover {
@@ -95,13 +101,98 @@
}
label.field-required::after {
- color: $ids-blue-1;
- content:'*';
+ color: $ids-blue-1;
+ content: '*';
}
}
.button-abort {
background-color: $middle-orange !important;
- color: $darkest-orange !important;
- border-color: $darkest-orange !important;
+ color: $darkest-orange !important;
+ border-color: $darkest-orange !important;
+}
+
+button {
+ cursor: pointer;
+
+ + button {
+ right: 0;
+ }
+
+ &[type=submit] {
+ @include choose-item;
+ font-weight: normal;
+ padding: 0;
+ height: 100%;
+ top: 0;
+ width: $button-width;
+
+ > span:nth-of-type(1) {
+ @include blind;
+ }
+
+ &::after {
+ font-family: "FontAwesome";
+ }
+
+ border: $border-size solid $nearly-white;
+
+ &:hover,
+ &:focus {
+ @include choose-hover;
+ }
+
+ &::-moz-focus-inner {
+ border: none;
+ }
+
+ &:active {
+ @include choose-active;
+ }
+
+ /*
+ * This is just for styling the last button,
+ * in case there are more than one buttons.
+ */
+ &:last-of-type {
+ border: {
+ right-width: $border-size;
+ right-style: solid;
+ top-right-radius: $standard-border-radius;
+ bottom-right-radius: $standard-border-radius;
+ }
+ }
+ }
+}
+
+/**
+ * Checkbox styling
+ * http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css
+ */
+.checkbox {
+ display: none;
+
+ + label {
+ cursor: pointer;
+
+ span {
+ display: inline-block;
+ border-radius: 4px;
+ width: 1em;
+ height: 1em;
+ line-height: 1em;
+ vertical-align: middle;
+ padding: 0;
+ margin-right: .2em;
+
+ &::after {
+ @include icon-font;
+ content: $fa-check;
+ }
+ }
+ }
+
+ &:checked + label span::after {
+ content: $fa-checked;
+ }
}
diff --git a/dev/scss/base/fragment.scss b/dev/scss/base/fragment.scss
index 0a986d5..f68e7db 100644
--- a/dev/scss/base/fragment.scss
+++ b/dev/scss/base/fragment.scss
@@ -1,31 +1,40 @@
@charset "utf-8";
-@import "../util";
+@import "choose";
+@import "lengths";
+@import "icons";
-.vc.fragment, p.query.fragment {
- position:relative;
+/**
+ * Definitions of fragments for vc and query
+ * builder.
+ */
+
+.vc.fragment,
+p.query.fragment {
@include choose-item;
+ position: relative;
+ padding: 4pt 6pt !important;
border : {
- width: $border-size;
- style: solid;
+ width: $border-size;
+ style: solid;
radius: $standard-border-radius;
}
- padding: 4pt 6pt !important;
+
margin: {
- // left: $border-size;
- left: $left-distance;
- top: .5em;
+ left: $left-distance;
+ top: .5em;
bottom: .5em;
- right: $right-view-distance;
+ right: $right-view-distance;
}
+
&:hover {
- cursor:pointer;
@include choose-hover;
+ cursor: pointer;
}
// This is the description
> span:first-of-type {
- font-weight: bold;
+ font-weight: bold;
padding-right: 4pt;
}
@@ -36,9 +45,9 @@
&::after {
font-family: 'FontAwesome';
- content: $fa-to-query;
- position: absolute;
- right: 4pt;
- top: $border-size;
+ content: $fa-to-query;
+ position: absolute;
+ right: 4pt;
+ top: $border-size;
}
}
diff --git a/dev/scss/base/icons.scss b/dev/scss/base/icons.scss
new file mode 100644
index 0000000..64b9a60
--- /dev/null
+++ b/dev/scss/base/icons.scss
@@ -0,0 +1,35 @@
+/**
+ * Font Awesome symbol table.
+ */
+
+$fa-bars: "\f0c9";
+$fa-extlink: "\f08e";
+$fa-up: "\f0d8";
+$fa-down: "\f0d7";
+$fa-minimize: "\f0d8";
+$fa-close: "\f00d";
+$fa-download: "\f019";
+$fa-info: "\f05a";
+$fa-elipsis: "\f141";
+$fa-previous: "\f0d9";
+$fa-next: "\f0da";
+$fa-search: "\f002";
+$fa-rewrite: "\f040";
+$fa-login: "\f090";
+$fa-logout: "\f08b";
+$fa-tutorial: "\f19d";
+$fa-left-align: "\f036";
+$fa-right-align: "\f038";
+$fa-center-align: "\f037";
+$fa-question: "\f128";
+$fa-checked: "\f046";
+$fa-check: "\f096";
+$fa-code: "\f121";
+$fa-marked: "\f005";
+// $fa-metadata: "\f067";
+$fa-metadata: "\f055";
+$fa-to-query: "\f102";
+$fa-cut: "\f0c4";
+$fa-plugin: "\f1e6";
+$fa-referto: "\f0c5";
+$fa-redo: "\f01e";
diff --git a/dev/scss/base/lengths.scss b/dev/scss/base/lengths.scss
new file mode 100644
index 0000000..d0aafd5
--- /dev/null
+++ b/dev/scss/base/lengths.scss
@@ -0,0 +1,21 @@
+/*
+ * Defined lengths and sizes for the
+ * Kalamar layout.
+ */
+$standard-border-radius: 6px;
+$item-padding: 3pt 6pt;
+$button-width: 30px;
+$base-padding: 8px;
+$border-size: 2px;
+$result-border-size: 1px;
+$left-width: 176px;
+$border-size: 2px;
+$left-distance: $left-width + ($border-size * 2);
+
+/**
+ * Margins
+ */
+$standard-margin: 40px;
+$right-distance: $standard-margin;
+$right-view-distance: $standard-margin / 2;
+$logo-left-distance: 230px;
diff --git a/dev/scss/base/load.scss b/dev/scss/base/load.scss
index 1917a54..c634fa9 100644
--- a/dev/scss/base/load.scss
+++ b/dev/scss/base/load.scss
@@ -1,14 +1,18 @@
+/**
+ * Load indicator.
+ */
+
div.loading {
background-color: transparent !important;
- height: 16px !important;
- width: 16px !important;
- margin: 0 auto !important;
+ height: 16px !important;
+ width: 16px !important;
+ margin: 0 auto !important;
}
.loading {
background: {
position: center;
- repeat: no-repeat;
- image: url('data:image/gif;base64,R0lGODlhEAAQAIABAP///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJBAABACwAAAAAEAAQAAACKYQPobt44QyM01VW0cVNPq48Hzh2UngyGvet6OpmKWmBb5TI+LlTOlAAACH5BAkEAAEALAAAAAAQABAAAAIohA+hu3gMnXyBqnkNw1XDnHThZ32bd6LUg0SOOIJsCaPmtOJvrctHAQAh+QQJBAABACwAAAAAEAAQAAACKYQPobt44QyM01VW0cVNPq48nxZKGLkxqGiungmyCXh9nRUleSZrO10AACH5BAkEAAEALAAAAAAQABAAAAIohA8RyKwN04pSWdumufp0niHghnkPyaWmqZLsKL3QWXUrJdpo66RKAQAh+QQJBAABACwAAAAAEAAQAAACJoQPEcisDdOKUlnbrp4IH989n1iBJUhK47itxkbGsEvRtXq/8B4UACH5BAkEAAEALAAAAAAQABAAAAIphA8RyKwN04pSWdvuNPto1HEX6G1YOYrain5im0pQ/GSnTIFr7eyhUQAAIfkECQQAAQAsAAAAABAAEAAAAiqMf6ALwWoelJFS5CbESTdeNUu3jWP4IWe2qS0TsmC8cuZFsrAkWrgtKQAAIfkECQQAAQAsAAAAABAAEAAAAiiMf6AL6LwMnDFQVG9SkrveWN6XjR82Mmi4cdMTvWsjnyIV4rIOgUwBACH5BAkEAAEALAAAAAAQABAAAAImjH+gC8HrXpNTxoeuzkltrkFg6BnMiJxpaYpWV76jDFKujV14LBUAIfkEAR4AAQAsAAAAABAAEAAAAiSEDxHIrA3TilJZ266eaN/8HJixdd4nailXgafrwSUVUqltQgUAOw==');
+ repeat: no-repeat;
+ image: url('data:image/gif;base64,R0lGODlhEAAQAIABAP///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJBAABACwAAAAAEAAQAAACKYQPobt44QyM01VW0cVNPq48Hzh2UngyGvet6OpmKWmBb5TI+LlTOlAAACH5BAkEAAEALAAAAAAQABAAAAIohA+hu3gMnXyBqnkNw1XDnHThZ32bd6LUg0SOOIJsCaPmtOJvrctHAQAh+QQJBAABACwAAAAAEAAQAAACKYQPobt44QyM01VW0cVNPq48nxZKGLkxqGiungmyCXh9nRUleSZrO10AACH5BAkEAAEALAAAAAAQABAAAAIohA8RyKwN04pSWdumufp0niHghnkPyaWmqZLsKL3QWXUrJdpo66RKAQAh+QQJBAABACwAAAAAEAAQAAACJoQPEcisDdOKUlnbrp4IH989n1iBJUhK47itxkbGsEvRtXq/8B4UACH5BAkEAAEALAAAAAAQABAAAAIphA8RyKwN04pSWdvuNPto1HEX6G1YOYrain5im0pQ/GSnTIFr7eyhUQAAIfkECQQAAQAsAAAAABAAEAAAAiqMf6ALwWoelJFS5CbESTdeNUu3jWP4IWe2qS0TsmC8cuZFsrAkWrgtKQAAIfkECQQAAQAsAAAAABAAEAAAAiiMf6AL6LwMnDFQVG9SkrveWN6XjR82Mmi4cdMTvWsjnyIV4rIOgUwBACH5BAkEAAEALAAAAAAQABAAAAImjH+gC8HrXpNTxoeuzkltrkFg6BnMiJxpaYpWV76jDFKujV14LBUAIfkEAR4AAQAsAAAAABAAEAAAAiSEDxHIrA3TilJZ266eaN/8HJixdd4nailXgafrwSUVUqltQgUAOw==');
}
}
diff --git a/dev/scss/base/menu.scss b/dev/scss/base/menu.scss
new file mode 100644
index 0000000..054dabd
--- /dev/null
+++ b/dev/scss/base/menu.scss
@@ -0,0 +1,248 @@
+@charset "utf-8";
+@import "choose";
+@import "lengths";
+@import "icons";
+
+/**
+ * Definitions for menu design.
+ */
+
+ul.menu {
+ position: absolute;
+ padding: 0;
+ margin: 0;
+ text-indent: 0;
+
+ opacity: 0;
+ &.visible {
+ opacity: 1;
+ }
+
+ list-style: {
+ type: none;
+ position: outside;
+ }
+
+ &,
+ > span.pref:not(:empty) {
+ box-sizing: border-box;
+ text-shadow: none;
+ font-weight: normal;
+ z-index: 120;
+ }
+
+ > li,
+ > span.pref:not(.active) {
+ @include choose-item;
+ }
+
+ > li,
+ > span.pref:not(:empty) {
+ @include choose-item;
+ box-shadow: $choose-box-shadow;
+ cursor: pointer;
+ padding: $item-padding;
+ white-space: normal;
+ border: {
+ width: $border-size;
+ bottom-width: 0px;
+ top-width: 0px;
+ style: solid;
+ }
+ }
+ span.desc {
+ display: block;
+ font-size: 75%;
+ }
+
+ div.lengthField {
+ border: {
+ color: transparent;
+ width: $border-size;
+ }
+ padding: $item-padding;
+ padding-top: 0;
+ padding-bottom: 0;
+ span {
+ display: block !important;
+ line-height: 0;
+ color: transparent;
+ }
+ }
+
+ /**
+ * Ruler
+ */
+ > div.ruler {
+ position: absolute;
+ right: 0px;
+ margin-right: -14px;
+ background-color: transparent;
+ width: 14px;
+ height: 100%;
+ opacity: 0;
+ cursor: pointer;
+ transition: opacity .5s ease 1s;
+
+ > span {
+ @include choose-active;
+ position: absolute;
+ display: block;
+ right: 0;
+ width: 10px;
+ z-index: 115;
+ border: {
+ radius: 4px;
+ width: 2px;
+ style: solid;
+ }
+ }
+
+ &.active > span {
+ @include choose-hover;
+ }
+
+ > div {
+ @include choose-item;
+ box-shadow: $choose-box-shadow;
+ position: absolute;
+ right: 0;
+ width: 10px;
+ height: 100%;
+ border: {
+ radius: 4px;
+ width: 2px;
+ style: solid;
+ }
+ }
+ }
+
+ &:active > div.ruler,
+ &:hover > div.ruler,
+ > div.ruler.active {
+ transition: opacity .1s ease;
+ opacity: 1;
+ }
+
+
+ /**
+ * List items
+ */
+ > li,
+ div.lengthField {
+ padding-right: 1.6em;
+ }
+
+ > li {
+ &: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;
+ }
+ }
+ &:not(.visible) {
+ height: 0;
+ }
+}
+
+
+/**
+ * Sorting menu
+ */
+ul.menu.sort {
+ position: relative;
+ display: inline-block;
+ > li::before {
+ content: '';
+ }
+ > li.active:hover {
+ @include choose-remove;
+ }
+}
+
+
+/**
+ * select menu
+ */
+span.menu.select {
+ > span {
+ z-index: 105;
+ }
+ > ul.menu.roll {
+ display: none;
+ z-index: -100;
+ &.visible {
+ display: block;
+ z-index: 110;
+ }
+ }
+}
diff --git a/dev/scss/base/mixins.scss b/dev/scss/base/mixins.scss
new file mode 100644
index 0000000..765ea76
--- /dev/null
+++ b/dev/scss/base/mixins.scss
@@ -0,0 +1,67 @@
+@import "colors";
+
+/**
+ * Mixin for blind elements
+ * (e.g., spans in elements with an icon background)
+ */
+@mixin blind {
+ position: absolute;
+ margin-left: -3000px;
+}
+
+
+@mixin cell-info {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ max-width: 25em;
+ overflow: hidden;
+ padding: 1px 6px;
+ margin: 0px;
+}
+
+
+/**
+ * Mixin for basic color transition
+ */
+@mixin input-field {
+ outline: none;
+ font-size: 11pt;
+ border: $border-size solid $nearly-white;
+ padding: 2px;
+ margin: 0;
+}
+
+
+/**
+ * Mixing for basic text padding
+ */
+@mixin standard-text-padding {
+ padding-left: .4em;
+ padding-right: .4em;
+}
+
+
+/**
+ * Mixing for icon fonts
+ */
+@mixin icon-font {
+ font-family: 'FontAwesome';
+ white-space: nowrap;
+}
+
+
+/**
+ * Mixing for correct box sizing (probably not necessary)
+ * DEPRECATED
+ */
+@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+ */
+}
+
+
+@mixin matchinfo-head {
+ border-top: $border-size solid $darker-orange; // #ff8000;
+ width: $left-width / 2;
+}
\ No newline at end of file
diff --git a/dev/scss/base/paths.scss b/dev/scss/base/paths.scss
new file mode 100644
index 0000000..7ff9527
--- /dev/null
+++ b/dev/scss/base/paths.scss
@@ -0,0 +1,5 @@
+/**
+ * Path information - relative to css!
+ */
+$img-path: '../img';
+$font-path: '../font';
diff --git a/dev/scss/base/view.scss b/dev/scss/base/view.scss
index 96162cf..5aa4b6e 100644
--- a/dev/scss/base/view.scss
+++ b/dev/scss/base/view.scss
@@ -1,4 +1,4 @@
-@import "../util.scss";
+@import "colors";
.result-view {
background-color: $nearly-white;
diff --git a/dev/scss/footer/footer.scss b/dev/scss/footer/footer.scss
index 0581985..8c2675c 100644
--- a/dev/scss/footer/footer.scss
+++ b/dev/scss/footer/footer.scss
@@ -5,23 +5,24 @@
* Rules for the footer section of Kalamar
*/
footer {
- position: absolute;
background-color: $dark-grey;
- bottom: 0;
- padding-bottom: 2px;
- font-size: 70%;
- width: 100%;
- text-align: right;
+ position: absolute;
+ bottom: 0;
+ padding-bottom: 2px;
+ font-size: 70%;
+ width: 100%;
+ text-align: right;
+
a {
&:link {
margin: 0 .5em;
- color: $light-grey;
+ color: $light-grey;
}
&:visited {
- color: $light-grey;
+ color: $light-grey;
}
&:hover {
- color: $nearly-white;
+ color: $nearly-white;
}
&[href^="http://"]::after,
&[href^="https://"]::after {
@@ -31,7 +32,7 @@
span.separator {
&:after {
content: "-";
- color: $light-grey;
+ color: $light-grey;
}
}
}
diff --git a/dev/scss/header/datepicker.scss b/dev/scss/header/datepicker.scss
index faf8336..ecc509d 100644
--- a/dev/scss/header/datepicker.scss
+++ b/dev/scss/header/datepicker.scss
@@ -7,112 +7,125 @@
* in Kalamar.
*/
-$border-size: 2px;
-
div.datepicker {
- display: inline-block;
- position: absolute;
- z-index: 90;
-
- font-size: 80%;
- padding: 4pt;
@include choose-item;
+ position: absolute;
+ display: inline-block;
+ z-index: 90;
+ font-size: 80%;
+ padding: 4pt;
box-shadow: $choose-box-shadow;
border: {
- width: $border-size;
- style: solid;
+ width: $border-size;
+ style: solid;
radius: $standard-border-radius;
}
+
> div {
font-size: 120%;
- width: 45%;
+ width: 45%;
+
&.month {
float: right;
}
> span {
- display: inline-block;
+ display: inline-block;
+ overflow: hidden;
+ white-space: nowrap;
+
&:first-child,
&:last-child {
- width: 15%;
- &::before {
- display: inline-block;
- text-align: center;
- cursor: pointer;
- font-family: 'FontAwesome';
- min-width: 14px;
- }
+ width: 15%;
+ &::before {
+ @include icon-font;
+ display: inline-block;
+ text-align: center;
+ cursor: pointer;
+ min-width: 14px;
+ }
}
+
&:first-child::before {
- content: $fa-previous;
+ content: $fa-previous;
}
+
&:last-child::before {
- content: $fa-next;
+ content: $fa-next;
}
- overflow: hidden;
- white-space: nowrap;
+
&:nth-child(2) {
- cursor: pointer;
- display: inline-block;
- width: 70%;
- text-align: center;
- text-overflow: ellipsis;
- border: {
- radius: $standard-border-radius;
- style: solid;
- width: $border-size;
- color: transparent;
- }
- &:hover {
- @include choose-hover;
- }
- &.selected {
- @include choose-active;
- }
+ display: inline-block;
+ cursor: pointer;
+ width: 70%;
+ text-align: center;
+ text-overflow: ellipsis;
+
+ border: {
+ radius: $standard-border-radius;
+ style: solid;
+ width: $border-size;
+ color: transparent;
+ }
+
+ &:hover {
+ @include choose-hover;
+ }
+
+ &.selected {
+ @include choose-active;
+ }
}
}
}
table {
border-collapse: separate;
- border-spacing: 1px;
+ border-spacing: 1px;
}
input {
+ @include choose-item;
@include standard-text-padding;
+ background-color: $nearly-white;
+ width: 100%;
+
border: {
style: solid;
width: 1px;
}
- @include choose-item;
- background-color: $nearly-white;
- width: 100%;
}
td {
@include standard-text-padding;
text-align: center;
+
border: {
style: solid;
width: 1px;
}
+
&:not(.out) {
- cursor: pointer;
@include choose-item;
+ cursor: pointer;
background-color: $nearly-white;
+
&.today {
- background-color: $light-blue;
- color: $dark-blue;
- text-shadow: none;
+ background-color: $light-blue;
+ color: $dark-blue;
+ text-shadow: none;
}
+
&.selected {
- @include choose-active;
+ @include choose-active;
}
+
&:hover {
- @include choose-hover;
+ @include choose-hover;
}
}
+
&.out {
border-color: transparent;
}
diff --git a/dev/scss/header/header.scss b/dev/scss/header/header.scss
index 65e2483..763c20e 100644
--- a/dev/scss/header/header.scss
+++ b/dev/scss/header/header.scss
@@ -1,167 +1,131 @@
@charset "utf-8";
@import "../util";
@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
+@import "querylanguage"; // Query language
+@import "pipe"; // Pipe
header {
- position: relative;
- background-color: $light-green;
-// @include light-noise;
@include box-sizing-box();
- padding: $base-padding 0 0 $base-padding;
- // 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;
+ position: relative;
+ background-color: $light-green;
+ padding: $base-padding 0 0 $base-padding;
+ font-size: 10pt;
+ color: $nearly-white;
+
+ span.select {
+ display: inline-block;
+ cursor: pointer;
line-height: 1.8em;
+
> span {
font-weight: bold;
}
+
border: {
- width: 0;
+ width: 0;
bottom-width: 3px;
- style: solid;
- color: transparent;
+ style: solid;
+ color: transparent;
}
- display: inline-block;
+
&:hover {
- color: $dark-green;
+ color: $dark-green;
border-color: $dark-green;
}
- &.active {
- border-color: $dark-orange;
- }
+
&::after {
+ @include icon-font;
pointer-events: none;
- font-family: FontAwesome;
- text-align: center;
- }
- }
- span.select {
- &::after {
- content: $fa-down;
+ text-align: center;
+ content: $fa-down;
+
padding: {
- left: 4pt;
+ left: 4pt;
right: 4pt;
}
}
- &.active::after {
- content: $fa-up;
+
+ &.active {
+ border-color: $dark-orange;
+ &::after {
+ content: $fa-up;
+ }
}
}
form {
+ position: relative;
+ display: block;
padding-left: $logo-left-distance;
- min-height: 2.7em;
- display: block;
- margin: 0px;
- position: relative;
+ min-height: 2.7em;
+ margin: 0px;
}
- .clear {
- clear: both;
+
+ input {
+ @include input-field;
}
.button {
+ color: $nearly-white;
+ line-height: 2em;
+ margin-right: $right-distance;
+
&.right {
- float: right;
+ float: right;
display: inline-block;
}
+
&.top {
- position: absolute;
- display: block;
- top: 0;
- right: 0;
- margin-right: 0;
- width: ($standard-margin / 2);
+ position: absolute;
+ display: block;
+ top: 0;
+ right: 0;
+ margin-right: 0;
+ width: ($standard-margin / 2);
background-color: $dark-green;
- text-align: center;
- height: 100%;
- z-index: 20;
+ text-align: center;
+ height: 100%;
+ z-index: 20;
+
> a:hover {
- color: $nearly-white
+ color: $nearly-white
}
}
- color: $nearly-white;
- line-height: 2em;
- margin-right: $right-distance;
+
> a {
- color: $nearly-white;
- cursor:pointer;
- position: relative;
+ color: $nearly-white;
+ cursor: pointer;
+ position: relative;
font-size: 120%;
+
> span {
- @include blind;
+ @include blind;
}
}
+
> a::after {
- font-family: 'FontAwesome';
+ @include icon-font;
}
+
+ // Icons for buttons
> a.tutorial::after {
content: $fa-tutorial;
}
+
> a.question::after {
content: $fa-question;
}
+
> a.login::after {
content: $fa-login;
}
+
> a.logout::after {
content: $fa-logout;
}
}
-}
-
-
-/**
- * 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;
-}
-
-
-// Hide pipe
-input.pipe {
- display: none;
}
\ No newline at end of file
diff --git a/dev/scss/header/hint.scss b/dev/scss/header/hint.scss
index b2e9bee..ae763b2 100644
--- a/dev/scss/header/hint.scss
+++ b/dev/scss/header/hint.scss
@@ -4,91 +4,94 @@
/**
* Rules for the Kalamar hint helper.
*/
-
-$border-size: 2px;
-
ul.menu.hint {
- display: inline-block;
+ display: inline-block;
white-space: normal;
- text-align:left;
- top: 0;
- max-width: 23em !important;
+ text-align: left;
+ max-width: 23em !important;
+ top: 0;
> li:first-of-type {
border-top: {
- width: 1px;
- left-radius: 0;
+ width: 1px;
+ left-radius: 0;
right-radius: 0;
}
}
}
+// Alert bubble
div.alert.hint {
- position: absolute;
-// background-color: rgba(254,26,0,.9); // from alertify
- background-color: rgb(254,26,0); // from alertify
- color: $nearly-white;
- padding: $item-padding;
- margin-top: 8px;
- box-shadow: $choose-box-shadow;
+ position: absolute;
+ background-color: $alert-red;
+ color: $nearly-white;
+ padding: $item-padding;
+ margin-top: 8px;
+ box-shadow: $choose-box-shadow;
+ width: auto;
+ min-width: 10em;
+ max-width: 23em !important;
+ transition: opacity 0.2s ease 0s;
+
border: {
- radius: $standard-border-radius;
+ radius: $standard-border-radius;
top-left-radius: 0;
}
- width: auto;
- min-width: 10em;
- max-width: 23em !important;
- transition: opacity 0.2s ease 0s;
-}
-div.hint.alert::before {
- position: absolute;
- content: "";
- display: block;
- top: -12px;
- left: 0;
- width: 0;
- white-space: normal;
- border: {
- width: 0 8px 12px 0;
- style: solid;
- color: rgb(254,26,0) transparent; // from alertify
+ &::before {
+ position: absolute;
+ content: "";
+ display: block;
+ top: -12px;
+ left: 0;
+ width: 0;
+ white-space: normal;
+ border: {
+ width: 0 8px 12px 0;
+ style: solid;
+ color: $alert-red transparent;
+ }
}
}
+// Mirror element for the hint helper
.hint.mirror {
- position: absolute;
- left: 0;
- top: 0;
- z-index: 90;
+ position: absolute;
+ display: block;
+ left: 0;
+ top: 0;
+ z-index: 90;
white-space: pre-wrap;
- height: 0;
- display: block;
+ height: 0;
+
> span {
- opacity: 0;
+ opacity: 0;
white-space: pre-wrap;
- overflow: hidden;
+ overflow: hidden;
}
+
// TODO: Only in focus
> div {
- position: absolute;
- display: block;
- cursor: pointer;
+ position: absolute;
+ display: block;
+ cursor: pointer;
transition: left 0.2s ease 0s;
- top: 0;
- left: 0;
+ top: 0;
+ left: 0;
text-align: left;
- padding: 0;
+ padding: 0;
border-top: 5px solid $dark-orange;
- height: 10px;
- width: 1.2em;
+ height: 10px;
+ width: 1.2em;
+
&:hover:not(.active) {
border-top: 10px solid $dark-orange;
}
+
&.active {
border-top-width: 0;
- height: 0;
- width: 23em;
+ height: 0;
+ width: 23em;
}
}
}
\ No newline at end of file
diff --git a/dev/scss/header/menu.scss b/dev/scss/header/menu.scss
deleted file mode 100644
index 7d76f4e..0000000
--- a/dev/scss/header/menu.scss
+++ /dev/null
@@ -1,239 +0,0 @@
-@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: 120;
-}
-
-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 span.desc {
- display: block;
- font-size: 75%;
-}
-
-ul.menu div.lengthField {
- border: {
- color: transparent;
- width: $border-size;
- }
- padding: $item-padding;
- padding-top: 0;
- padding-bottom: 0;
- span {
- display: block !important;
- line-height: 0;
- color: transparent;
- }
-}
-
-ul.menu > li,
-ul.menu > span.pref:not(.active) {
- @include choose-item;
-}
-
-ul.menu:active > div.ruler,
-ul.menu:hover > div.ruler,
-ul.menu > div.ruler.active {
- transition: opacity .1s ease;
- opacity: 1;
-}
-
-ul.menu {
- position: absolute;
- padding: 0;
- margin: 0;
- text-indent: 0;
- list-style-type: none;
- list-style-position: outside;
-
- > div.ruler {
- position: absolute;
- right: 0px;
- margin-right: -14px;
- background-color: transparent;
- width: 14px;
- height: 100%;
- opacity: 0;
- cursor: pointer;
- transition: opacity .5s ease 1s;
-
- > span {
- position: absolute;
- @include choose-active;
- display: block;
- right: 0;
- width: 10px;
- z-index: 115;
- border: {
- radius: 4px;
- width: 2px;
- style: solid;
- }
- }
- &.active > span {
- @include choose-hover;
- }
- > div {
- box-shadow: $choose-box-shadow;
- position: absolute;
- right: 0;
- border: {
- width: 2px;
- style: solid;
- }
- width: 10px;
- @include choose-item;
- // background-color: -grey;
- height: 100%;
- border-radius: 4px;
- }
- }
-
- /**
- * List items
- */
- > li, div.lengthField {
- padding-right: 1.6em;
- }
- > li {
-
- &: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;
- }
- }
-}
-
-ul.menu {
- opacity: 0;
-}
-ul.menu.visible {
- opacity: 1;
-}
-
-/**
- * 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;
- }
- }
-}
-
-ul.menu.roll:not(.visible) {
- height: 0;
-}
-
-
-/**
- * Sorting menu
- */
-ul.menu.sort {
- position: relative;
- display: inline-block;
- > li::before {
- content: '';
- }
- > li.active:hover {
- @include choose-remove;
- }
-}
-
-/**
- * select menu
- */
-span.menu.select {
- > span {
- z-index: 105;
- }
- > ul.menu.roll {
- display: none;
- z-index: -100;
- &.visible {
- display: block;
- z-index: 110;
- }
- }
-}
diff --git a/dev/scss/header/pipe.scss b/dev/scss/header/pipe.scss
new file mode 100644
index 0000000..f0c0807
--- /dev/null
+++ b/dev/scss/header/pipe.scss
@@ -0,0 +1,8 @@
+/**
+ * The pipe input field
+ */
+
+// Hide pipe
+input.pipe {
+ display: none;
+}
\ No newline at end of file
diff --git a/dev/scss/header/querylanguage.scss b/dev/scss/header/querylanguage.scss
new file mode 100644
index 0000000..44978bb
--- /dev/null
+++ b/dev/scss/header/querylanguage.scss
@@ -0,0 +1,40 @@
+@import "../util";
+
+/**
+ * Temporary hack for language chooser
+ * http://cssdeck.com/labs/styling-select-box-with-css3
+ * This is only active in no-js environment and before the
+ * javascript is loaded.
+ */
+#ql-field {
+ position: relative;
+ background-color: $light-green;
+ cursor: pointer;
+ margin: 0;
+ outline: none;
+ border: none;
+ display: inline-block;
+ color: white;
+ border-width: 0;
+ border-radius: 0;
+
+ // https://css-tricks.com/almanac/properties/a/appearance/
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+
+ &:checked {
+ outline: none;
+ }
+
+ > option {
+ padding: 0pt 2pt;
+ outline: none;
+ }
+
+ // funny hack for firefox
+ &:-moz-focusring {
+ color: transparent;
+ text-shadow: 0 0 0 white;
+ }
+}
diff --git a/dev/scss/header/searchbar.scss b/dev/scss/header/searchbar.scss
index 7e34b27..45bc4ec 100644
--- a/dev/scss/header/searchbar.scss
+++ b/dev/scss/header/searchbar.scss
@@ -1,87 +1,46 @@
@charset "utf-8";
@import "../util";
-$border-size: 2px;
-$qmargin: 3px;
-// $right-padding: 60px;
-
-
/**
- * Input field
+ * Search field
*/
#q-field {
- width: 100%;
- margin: 0;
- margin-bottom: $qmargin;
- display: block;
+ display: block;
+ margin-bottom: 3px;
+ width: 100%;
+ margin: 0;
&::-webkit-search-cancel-button {
display: none;
}
&.loading {
- background-color: $light-orange;
- background-image: none;
+ background: {
+ color: $light-orange;
+ image: none;
+ }
}
}
-header input {
- @include input-field;
-}
#searchbar {
- position: relative;
- width: 100%;
- padding: 0;
+ position: relative;
+ width: 100%;
+ padding: 0;
padding-right: $right-distance + $button-width;
+
button[type=submit] {
position: absolute;
- padding: 0;
- right: $right-distance;
+ padding: 0;
+ right: $right-distance;
+
&:not(.loading)::after {
content: $fa-search;
}
}
}
-/**
- * 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: $fa-check;
- }
- }
- }
- &:checked + label span {
- &:after {
- content: $fa-checked;
- }
- }
-}
-
-
.query.panel {
padding-right: $right-distance + $button-width;
}
@@ -89,11 +48,12 @@
// Specify result button group layout
.query.button-group.button-panel {
- width: auto;
- text-align: right;
+ display: block;
+ width: auto;
+ text-align: right;
vertical-align: top;
- display: block;
- line-height: 1.3em;
+ line-height: 1.3em;
+
> span {
box-shadow: none;
}
diff --git a/dev/scss/header/statistics.scss b/dev/scss/header/statistics.scss
index 234e81b..500fc70 100644
--- a/dev/scss/header/statistics.scss
+++ b/dev/scss/header/statistics.scss
@@ -2,37 +2,45 @@
@import "../util";
-/*
-Corpus statistic
-Graying corpus statistic
-*/
+/**
+ * Corpus statistic
+ * Graying corpus statistic
+ */
div.stattable {
- display: flex;
- flex-direction: row;
- margin-right: $right-view-distance;
+ display: flex;
+ flex-direction: row;
+ margin-right: $right-view-distance;
}
+
div.stattable {
> dl {
margin-bottom:4px;
+
> div {
border-color: $dark-green;
+
> dt {
background-color: $middle-green;
- width: 15em;
- margin: 0;
- &:after {
+ width: 15em;
+ margin: 0;
+
+ &::after {
content: ":";
}
}
> dd {
background-color: $lightest-green;
- color: $dark-grey;
+ color: $dark-grey;
}
}
}
+
&.stdisabled {
- dt, dd {
- @include vcinfo-inactive;
+ dt,
+ dd {
+ background-color: $grey-green;
+ color: $dark-green;
+ text-shadow: none;
}
}
}
@@ -45,7 +53,7 @@
span.refresh::after{
vertical-align: sub;
- content : $fa-redo;
+ content : $fa-redo;
}
// Default value 20% doesn't work with < 5 items,
diff --git a/dev/scss/header/vc.scss b/dev/scss/header/vc.scss
index 2a4a3b8..cdc700b 100644
--- a/dev/scss/header/vc.scss
+++ b/dev/scss/header/vc.scss
@@ -1,14 +1,14 @@
@charset "utf-8";
@import "../util";
-$left-padding: 4em; // 32pt; // 2.8em;
-$border-size: 2px;
-$bracket-size: .4em; // 4pt;
-
/**
* Virtual Collection Builder
*/
+$left-padding: 4em;
+$bracket-size: .4em;
+
+// Rules for VC view (including fragments)
.vc {
margin-top: 4pt;
@@ -17,35 +17,39 @@
}
.docGroup {
- position: relative;
+ position: relative;
+ display: inline-block;
+ margin-left: $left-padding;
+ padding: 4pt 2pt 4pt 0pt;
- display: inline-block;
- margin-left: $left-padding; // 28pt
+ .docGroup {
+ display: block;
+ }
- .docGroup { display: block; }
-
- padding: 4pt 2pt 4pt 0pt;
border: {
radius: $standard-border-radius * 2;
- style: solid;
- width: 0 $bracket-size; // .6em .5em
+ style: solid;
+ width: 0 $bracket-size;
}
&[data-operation] {
+
> .doc:first-child::before,
> .docGroup:first-child::before {
content: none;
}
+
> .doc::before,
> .docGroup::before {
- display: inline-block;
- position: absolute;
- text-align: right;
- width: $left-padding;
- margin-left: -1 * ($left-padding + .5em); // -28pt
+ position: absolute;
+ display: inline-block;
+ text-align: right;
+ width: $left-padding;
+ margin-left: -1 * ($left-padding + .5em);
line-height: 1.5em;
- border-top: $border-size solid transparent;
+ border-top: $border-size solid transparent;
}
+
> .docGroup::before {
margin-left: -1 * ($left-padding + .5em) + (-1 * $bracket-size);
}
@@ -74,19 +78,20 @@
* All operators on groups
*/
> .operators {
- position: absolute;
- display: block;
- top: 10px;
+ position: absolute;
+ display: block;
vertical-align: middle;
- left: 3px;
+ top: 10px;
+ left: 3px;
+ margin-left: 100%;
+ padding: 0;
+
> span:first-child {
border: {
- top-left-radius: 0;
- bottom-left-radius: 0;
+ top-left-radius: 0;
+ bottom-left-radius: 0;
+ }
}
- }
- margin-left: 100%;
- padding: 0;
}
}
@@ -97,78 +102,78 @@
.doc {
line-height: 170%;
padding-left: $left-padding;
- > span + span,
- > span + div + span,
- > span + ul + span {
- margin-left: 5pt;
- }
- > span.key,
- > span.value {
- font-weight: bold;
- }
- > span.value {
- &[data-type=regex] {
+ > span {
+
+ + span,
+ + div + span,
+ + ul + span {
+ margin-left: 5pt;
+ }
+
+ &.key,
+ &.value {
+ font-weight: bold;
+ }
+
+ &.value[data-type=regex] {
font-style: italic;
+
&::after,
&::before {
content: '/';
}
}
+
+ &.key {
+ position: relative;
+
+ > ul {
+ margin: 0;
+ margin-left: 3.3em;
+ }
+
+ &.fixed {
+ color: $light-green;
+ }
+ }
}
// Unspecified value
- &.unspecified > span, span.unspecified {
- padding: 0 4px;
+ &.unspecified > span,
+ span.unspecified {
+ @include choose-item;
+ padding: 0 4px;
box-shadow: $choose-box-shadow;
+
border: {
- style: solid;
- width: $border-size;
+ style: solid;
+ width: $border-size;
radius: $standard-border-radius;
}
- @include choose-item;
- &:hover {
- @include choose-hover;
- }
}
- > span.key.fixed {
- color: $light-green;
- }
-
- /**
- * All operators on docs
- */
+ // All operators on docs
> .operators {
- display: inline-block;
+ display: inline-block;
margin-left: 10px;
}
- > 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;
- style: normal;
- weight: normal;
- }
- content: $fa-rewrite;
- text-decoration: underline;
- }
- > span {
- display: none;
- }
+ .rewritten .rewrite {
+ display: inline-block;
+ margin-left: 4pt;
+ color: $dark-orange;
+ &::after {
+ @include icon-font;
+ font-style: normal;
+ font-weight: normal;
+ content: $fa-rewrite;
+ text-decoration: underline;
+ }
+
+ > span {
+ display: none;
}
}
@@ -176,12 +181,12 @@
* All operators
*/
.operators {
- opacity: 0;
+ opacity: 0;
white-space: nowrap;
- padding: 0;
- font-size: 0;
+ padding: 0;
+ font-size: 0;
line-height: 0;
- text-align: center;
+ text-align: center;
}
> .docGroup {
@@ -192,48 +197,50 @@
display: inline-block;
}
- .menu li[data-type=ref]:before,
- span.key.ref:before {
- content: $fa-referto;
- font-family: 'FontAwesome';
+ // referTo entries
+ .menu li[data-type=ref]::before,
+ span.key.ref::before {
+ @include icon-font;
+ content: $fa-referto;
padding-right: 4pt;
- style: normal;
- weight: normal;
+ style: normal;
+ weight: normal;
}
div.value {
- position: absolute;
- display: inline-block;
- z-index: 8000;
- padding: 4pt;
+ position: absolute;
+ display: inline-block;
+ z-index: 8000;
+ padding: 4pt;
margin-top: -6pt;
+
border: {
- width: $border-size;
- style: solid;
radius: $standard-border-radius;
+ width: $border-size;
+ style: solid;
}
+
input {
border-width: 0;
}
+
> div {
+ @include choose-item;
+ display: inline-block;
padding: 2pt;
- cursor: pointer;
+
font: {
- size: 80%;
+ size: 80%;
style: italic;
}
- display: inline-block;
- @include choose-item;
+
border: {
- width: $border-size;
- style: solid;
+ width: $border-size;
+ style: solid;
radius: $standard-border-radius;
}
-
- &:hover {
- @include choose-hover;
- }
}
+
&.regex {
> input {
font-style: italic;
@@ -246,12 +253,14 @@
}
}
+/* Rules for vcs excluding fragments,
+ * i.e. includingy dynamic changes.
+ */
.vc:not(.fragment) {
- .docGroup, .doc {
- // color: $nearly-white;
- // color: $dark-green;
+
+ .docGroup,
+ .doc {
color: $dark-grey;
- // text-shadow: $light-shadow;
}
/**
@@ -259,26 +268,24 @@
*/
// Whiten on hover
.docGroup:hover {
- // background-color: rgba(255,255,255,.06);
background-color: rgba(255,255,255,.3);
}
- .doc > span.key.fixed {
- color: $light-green;
- }
-
.doc > span:not(.fixed) {
cursor: pointer;
&:hover {
- // color: $dark-green;
color: $dark-orange;
}
}
- .rewritten .rewrite {
- color: $dark-orange;
+ // Unspecified value
+ .doc.unspecified > span,
+ span.unspecified {
+ &:hover {
+ @include choose-hover;
+ }
}
-
+
.doc, .docGroup {
&:hover > .operators {
opacity: 1;
@@ -289,7 +296,6 @@
&[data-operation] {
> .doc::before,
> .docGroup::before {
- // color: $dark-green;
color: $dark-orange;
}
}
@@ -301,6 +307,13 @@
div.value {
@include choose-item;
box-shadow: $choose-box-shadow;
+
+ > div {
+ cursor: pointer;
+ &:hover {
+ @include choose-hover;
+ }
+ }
}
}
@@ -359,47 +372,40 @@
border-radius: $standard-border-radius;
}
-/*
-header #vc-view > div {
- margin: 1.3em 0 .5em 0;
-}
-*/
-
-#vc-choose > span.rewritten {
- &::after {
- color: $dark-orange;
- padding: 0;
- padding-left: 4px;
- font: {
- family: FontAwesome;
- style: normal;
- weight: normal;
- }
- content: $fa-rewrite;
- text-decoration: underline;
- }
+#vc-choose > span.rewritten::after {
+ @include icon-font;
+ color: $dark-orange;
+ padding: 0;
+ padding-left: 4px;
+ content: $fa-rewrite;
+ text-decoration: underline;
+ font-style: normal;
+ font-weight: normal;
}
div#vc-view {
position:relative;
+
> div.vc {
- display: none;
+ display: none;
+ margin: 1.3em 0 .5em 0;
+ border: 2px solid $dark-green;
+ background-color: $nearly-white;
+
&.active {
display: block;
}
- margin: 1.3em 0 .5em 0;
- border: 2px solid $dark-green;
- background-color: $nearly-white;
+
> div:first-child {
- // margin: 1.3em;
padding: 1.3em;
}
}
}
div.panel.vcinfo {
- padding: 3pt 0pt 3pt 3pt;
+ padding: 3pt 0pt 3pt 3pt;
background-color: $dark-green;
+
div.button-group > span {
box-shadow: none;
}
diff --git a/dev/scss/kalamar.scss b/dev/scss/kalamar.scss
index 084b443..b38fe31 100644
--- a/dev/scss/kalamar.scss
+++ b/dev/scss/kalamar.scss
@@ -5,7 +5,7 @@
*/
// Global variables and mixins
-@import "base"; // Base styles
+@import "base/base"; // Base styles
@import "main/main"; // Main frame styles
@import "header/header"; // Top frame styles
@import "footer/footer"; // Bottom frame styles
diff --git a/dev/scss/main/alertify.scss b/dev/scss/main/alertify.scss
index 55f6c59..be2f656 100644
--- a/dev/scss/main/alertify.scss
+++ b/dev/scss/main/alertify.scss
@@ -2,11 +2,9 @@
@import "alertify/alertify-core";
@import "alertify/alertify-default";
-/*
-article.alertify-log {
- text-shadow:none;
-}
-*/
+/**
+ * Alertify styles.
+ */
article.alertify-log-warn {
background-color: $dark-orange;
@@ -19,4 +17,8 @@
display: block;
color: $dark-red;
font-size: 70%;
+}
+
+.alertify-log-error {
+ background-color: $alert-red;
}
\ No newline at end of file
diff --git a/dev/scss/main/alertify/alertify-default.scss b/dev/scss/main/alertify/alertify-default.scss
index 97a1232..82637d4 100644
--- a/dev/scss/main/alertify/alertify-default.scss
+++ b/dev/scss/main/alertify/alertify-default.scss
@@ -72,11 +72,13 @@
color: #FFF;
// text-shadow: -1px -1px 0 rgba(0,0,0,.5);
}
+/*
.alertify-log-error {
background: #FE1A00;
// background: rgba(254,26,0,.9);
background: rgb(254,26,0);
}
+*/
.alertify-log-success {
background: #5CB811;
// background: rgba(92,184,17,.9);
diff --git a/dev/scss/main/buttongroup.scss b/dev/scss/main/buttongroup.scss
index 55bd6b9..49df159 100644
--- a/dev/scss/main/buttongroup.scss
+++ b/dev/scss/main/buttongroup.scss
@@ -8,58 +8,61 @@
> span {
cursor: pointer;
}
-
- span.button-icon {
- font-family: 'FontAwesome';
- > span {
- @include blind;
- }
- }
- &.button-panel, &.operators {
- > span, a {
- box-shadow: $choose-box-shadow;
- font-size: 9pt;
- font-weight: normal;
- line-height: 1.5em;
- padding: 0 4px;
- display: inline-block;
+ &.button-panel,
+ &.operators {
+ > span,
+ a {
@include choose-item;
+ box-shadow: $choose-box-shadow;
+ font-size: 9pt;
+ font-weight: normal;
+ line-height: 1.5em;
+ padding: 0 4px;
+ display: inline-block;
border-style: solid;
border-width: $border-size 0;
+
&:hover {
@include choose-hover;
}
+
&:first-child {
border: {
- left-width: $border-size;
- top-left-radius: $standard-border-radius;
- bottom-left-radius: $standard-border-radius;
- }
+ left-width: $border-size;
+ top-left-radius: $standard-border-radius;
+ bottom-left-radius: $standard-border-radius;
+ }
}
+
&:last-child {
border: {
- right-width: $border-size;
- top-right-radius: $standard-border-radius;
- bottom-right-radius: $standard-border-radius;
- }
+ right-width: $border-size;
+ top-right-radius: $standard-border-radius;
+ bottom-right-radius: $standard-border-radius;
+ }
}
}
}
&.button-panel {
- > span, a {
+ > span,
+ a {
+
> span.check {
- font-family: 'FontAwesome';
- width: 1.2em;
- display: inline-block;
+ @include icon-font;
+ width: 1.2em;
+ display: inline-block;
text-align: left;
+
&:not(.checked)::after {
content: $fa-check;
}
+
&.checked::after {
content: $fa-checked;
}
+
> span {
@include blind;
}
@@ -68,23 +71,27 @@
}
&.button-view {
- display: block;
- position: absolute;
- right: 0;
- top: 0;
- z-index: 20;
- margin: 0;
- padding: 0;
- width: $right-view-distance;
+ position: absolute;
+ display: block;
+ right: 0;
+ top: 0;
+ z-index: 20;
+ margin: 0;
+ padding: 0;
+ width: $right-view-distance;
+ font-size: 10pt;
+ color: $nearly-white;
+
> span:first-child {
margin-top: $border-size
}
+
> span {
- display: block !important;
- border-width: 0;
- text-decoration:none;
- text-align: center;
- font-style: normal;
+ display: block !important;
+ border-width: 0;
+ text-decoration: none;
+ text-align: center;
+ font-style: normal;
&.download::after {
content: $fa-download;
@@ -105,22 +112,24 @@
}
}
-.button-group.button-view {
- font-size: 10pt;
- color: $nearly-white;
-}
-
ul.menu.button-group-list {
border-top-right-radius: 8px;
- font-size: 10pt;
- position: fixed;
- left: 0;
+ position: fixed;
+ font-size: 10pt;
+ left: 0;
text-align: left;
- margin: -1 * $border-size;
+ margin: -1 * $border-size;
margin-top: 0;
+
> li:first-of-type {
border-top-right-radius: 5px;
}
}
+.button-icon {
+ @include icon-font;
+ > span {
+ @include blind;
+ }
+}
diff --git a/dev/scss/main/helper.scss b/dev/scss/main/helper.scss
index ec33901..31b07fa 100644
--- a/dev/scss/main/helper.scss
+++ b/dev/scss/main/helper.scss
@@ -1,5 +1,8 @@
+@import "../util"
+
// Make cursor helper
-body.helper, body.helper a {
+body.helper,
+body.helper a {
cursor: help !important;
}
diff --git a/dev/scss/main/intro.scss b/dev/scss/main/intro.scss
index 7c71e1b..8f83175 100644
--- a/dev/scss/main/intro.scss
+++ b/dev/scss/main/intro.scss
@@ -1,4 +1,10 @@
+@import "../util";
+
+/**
+ * Styles for the intro page
+ */
div.intro {
+
// Visited links
a:visited {
color: $darkest-orange
@@ -6,11 +12,11 @@
div.announcement {
background-color: $light-orange;
- padding: $base-padding;
- border: 5px dashed $dark-orange;
- border-radius: 1em;
- width: 90%;
- margin: auto;
+ padding: $base-padding;
+ border: 5px dashed $dark-orange;
+ border-radius: 1em;
+ width: 90%;
+ margin: auto;
}
}
diff --git a/dev/scss/main/introjs-ids.scss b/dev/scss/main/introjs-ids.scss
index 01c751e..d97013a 100644
--- a/dev/scss/main/introjs-ids.scss
+++ b/dev/scss/main/introjs-ids.scss
@@ -1,28 +1,32 @@
@import "../util";
+/**
+ * Styles overriding introJS styles
+ */
+
.introjs-helperLayer {
- background-color:transparent;
- }
+ background-color: transparent;
+}
-.introjs-tooltip.gTstartSearch{
- max-width: 500px;
- }
+.introjs-tooltip.gTstartSearch {
+ max-width: 500px;
+}
.tgreeting {
- font-weight: bold;
- color: $darkest-orange;
- }
+ font-weight: bold;
+ color: $darkest-orange;
+}
-.pfirstStep{
- width: 500px;
- }
+.pfirstStep {
+ width: 500px;
+}
.introjs-donebutton {
- float: right;
- margin-left: 5px;
- }
+ float: right;
+ margin-left: 5px;
+}
-.introjs-skipbutton{
- color: $black;
- }
+.introjs-skipbutton {
+ color: $black;
+}
diff --git a/dev/scss/main/koralquery.scss b/dev/scss/main/koralquery.scss
index d6d4818..53dd64d 100644
--- a/dev/scss/main/koralquery.scss
+++ b/dev/scss/main/koralquery.scss
@@ -1,7 +1,9 @@
@charset "utf-8";
@import "../util";
-$border-size: 2px;
+/**
+ * Styles for the KoralQuery view.
+ */
#koralquery {
white-space: pre;
@@ -9,13 +11,14 @@
// TODO:
// Mark this with result-view
background-color: $nearly-white;
- overflow-x: auto;
- font-size: 85%;
+ overflow-x: auto;
+ font-size: 85%;
+
margin: {
- top: 2pt;
- right: $right-view-distance; // 3em;
+ top: 2pt;
+ right: $right-view-distance;
bottom: 2pt;
- left: 2pt;
+ left: 2pt;
}
}
}
diff --git a/dev/scss/main/kwic.scss b/dev/scss/main/kwic.scss
index 4a3ecce..f207045 100644
--- a/dev/scss/main/kwic.scss
+++ b/dev/scss/main/kwic.scss
@@ -1,389 +1,373 @@
@charset "utf-8";
@import "../util";
-$border-size: 2px;
+/**
+ * Styles for the KWIC view.
+ */
+
$font-size: 10pt;
#search {
- position: relative;
+ position: relative;
margin-bottom: 30px;
- overflow: visible;
-// margin-top: 14pt;
-}
+ overflow: visible;
-#search > ol {
- overflow-x: hidden;
- overflow-y: visible;
- width: auto;
- text-indent: 0;
- list-style-type: none;
- margin: 0;
- padding: 0;
- border: $result-border-size solid $kwic-border;
- font-size: $font-size;
+ div.matchinfo {
+ display: none;
+ }
- > li {
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- align-items: stretch;
- align-content: stretch;
+ > ol {
+ overflow-x: hidden;
+ overflow-y: visible;
+ width: auto;
+ text-indent: 0;
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ border: $result-border-size solid $kwic-border;
+ font-size: $font-size;
- div.meta {
- position: relative;
- flex: 1 0;
- min-width: 12em;
- max-width: 15em;
+ > li {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ align-items: stretch;
+ align-content: stretch;
+
+ border: {
+ style: solid;
+ color: $dark-orange;
+ width: 0;
+ }
- // Tiny hack
- &:before {
- content:" ";
- display:inline-block;
- height:100%;
- vertical-align:middle;
+ // Actions
+ .button-group.button-view {
+ display: none;
+ }
+
+ // Zebra style
+ &:nth-of-type(even) div.match-main div.match-wrap {
+ background-color: $kwic-line-even;
+ }
+
+ // References
+ p.ref {
+ display: none;
}
- text-align: left;
- // cursor: initial;
- width: 2px;
- z-index: 5;
- overflow-y: hidden;
- overflow-x: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- background-color: lighten($middle-grey, 5%);
- // @include light-noise;
- border: {
- color: $dark-grey;
- style: solid;
- width: 2px 1px 0 0;
+ div.meta,
+ div.match-main {
+ position: relative;
+ cursor: pointer;
}
- &:empty {
- border-width: 0 1px 0 0;
+
+ div.match-main {
+ display: block;
+ flex: 7 0;
+ z-index: 4;
+ overflow: hidden;
+
+ > div.match-wrap {
+ width: 99999%;
+ margin-left: -49999.5%;
+ background-color: $kwic-line-noneven;
+ overflow-x: hidden;
+ overflow-y: visible;
+ white-space: normal;
+ }
}
- &.flip {
- background-color: lighten($middle-grey, 17%);
+
+ div.meta {
+ flex: 1 0;
+ min-width: 12em;
+ max-width: 15em;
+ text-align: left;
+ width: 2px;
+ z-index: 5;
+ overflow-y: hidden;
+ overflow-x: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ background-color: lighten($middle-grey, 5%);
+ color: $nearly-white;
+ font-size: 75%;
+ padding: 0 5pt;
+
+ border: {
+ color: $dark-grey;
+ style: solid;
+ width: 2px 1px 0 0;
+ }
+
+ // Tiny hack
+ &:before {
+ content: " ";
+ display: inline-block;
+ height: 100%;
+ vertical-align: middle;
+ }
+
+ &:empty {
+ border-width: 0 1px 0 0;
+ }
+
+ &.flip {
+ background-color: lighten($middle-grey, 17%);
+ }
}
- color: $nearly-white;
- font-size: 75%;
- padding: 0 5pt;
- }
- &:first-of-type div.meta {
- border-top-width: 0;
- }
- &:last-of-type div.meta {
- border-bottom-width: 0;
+
+ &:first-of-type div.meta {
+ border-top-width: 0;
+ }
+
+ &:last-of-type div.meta {
+ border-bottom-width: 0;
+ }
}
}
}
-#search > ol > li {
- border: {
- style: solid;
- color: $dark-orange;
- width: 0;
- }
-}
-#search {
- div.meta, div.match-main {
- position: relative;
- cursor: pointer;
- }
- /*
- &:not(.active):not(:target) {
- &:nth-of-type(even) div.main-col {
+/**
+ * Snippet rules
*/
- div.match-main {
- display: block;
- flex: 7 0;
- z-index: 4;
- overflow: hidden;
-
- > div.match-wrap {
- width: 99999%;
- margin-left: -49999.5%;
- background-color: $kwic-line-noneven;
- overflow-x: hidden;
- overflow-y: visible;
- white-space: normal;
- }
- }
-}
-
-#search ol li:nth-of-type(even) div.match-main div.match-wrap {
- background-color: $kwic-line-even;
-}
-
-
div.snippet {
text-overflow: ellipsis;
- text-indent: 0;
- text-shadow: $light-shadow;
- font-size: 0;
- white-space: nowrap !important;
+ text-indent: 0;
+ text-shadow: $light-shadow;
+ font-size: 0;
+ white-space: nowrap !important;
> span, mark {
- padding: 5pt 0 6pt 0;
+ padding: 5pt 0 6pt 0;
font-size: $font-size;
- // white-space: nowrap;
- // > span {
- // white-space: nowrap;
- // }
}
- > mark, > span.match {
+
+ > mark,
+ > span.match {
font-weight: bold;
color: $black;
text-shadow: none;
padding-left: 4pt;
padding-right: 2pt;
}
+
> span.match > span.cutted::after {
+ @include icon-font;
content: $fa-cut;
- font-family: FontAwesome;
+ color: $light-green;
+
padding: {
- left: 4pt;
+ left: 4pt;
right: 4pt;
}
- color: $light-green;
- }
-}
-
-
-
-#search div.matchinfo {
- display: none;
-}
-
-#search {
- li.active div.matchinfo {
- display: block;
}
- li.active + li.active {
- border-top: $border-size solid $light-grey;
- padding-top: 3 * $border-size;
- // > ul.action.right {
- .button-group.button-view {
- padding-top: 3 * $border-size;
- }
+ &.startMore:before,
+ &.endMore:after {
+ content: "…";
+ padding-left: 2pt;
+ padding-right: 2pt;
}
-}
-
-
-/*
-#search div.match-main {
- position: relative;
- z-index: 4;
- > div.match-wrap {
- margin-left: -49999.5%;
- width: 99999%;
- overflow-x: hidden;
- overflow-y: visible;
- position: relative;
- box-sizing: border-box;
+ // Flags
+ div.flag {
+ position: absolute;
+ height: 100%;
+ top: 0;
+ left: 0;
+ width: 11px;
+ background-color: $dark-orange;
+ border-right: 1px solid $darkest-orange;
}
}
-*/
-
-div.snippet.startMore:before,
-div.snippet.endMore:after {
- content: "…";
- padding-left: 2pt;
- padding-right: 2pt;
-}
-
-/**
- * flag
- */
-div.snippet div.flag {
- position: absolute;
- height: 100%;
- top: 0;
- left: 0;
- width: 11px;
- background-color: $dark-orange;
- border-right-color: $nearly-white;
- border-right: 1px solid $darkest-orange;
-}
-
-/**
- * References
- */
-
-#search > ol > li p.ref {
- display: none;
-}
/**
- * Active
+ * Active rules
*/
body.no-js #search > ol > li:active,
#search > ol > li.active,
#search > ol > li:target {
+ position: relative;
+ display: block;
background-color: $dark-orange;
- display: block;
- text-align: left;
- position: relative;
- border-width: 2px;
- white-space: wrap;
- height: auto;
- width: auto;
+ text-align: left;
+ border-width: 2px;
+ white-space: wrap;
+ height: auto;
+ width: auto;
+ overflow: hidden;
- div.match-main > div.match-wrap {
- cursor: default;
+ div.matchinfo {
+ display: block;
}
- .snippet {
- white-space: normal !important;
+
+ + li.active {
+ border-top: $border-size solid $light-grey;
+ padding-top: 3 * $border-size;
+
+ .button-group.button-view {
+ padding-top: 3 * $border-size;
+ }
}
- .snippet span {
- display: inline !important;
+ .snippet {
+ white-space: normal !important;
+ padding: 2pt 0 5pt 5pt;
+ background-color: $light-orange;
+
+ span {
+ display: inline !important;
+ }
+
+ > * {
+ background-color: transparent;
+ }
+
+ div.flag {
+ display: none;
+ }
+
+ margin: {
+ top: 0;
+ right: $right-view-distance;
+ bottom: 0;
+ left: 0;
+ }
+
+ > span {
+ line-height: 1.4em;
+ width: auto;
+
+ &.context-left {
+ margin-left: 0;
+ display: inline;
+ overflow: visible;
+ text-align: left;
+ width: auto;
+ }
+ }
}
+
.button-group.button-view {
display: block;
}
- div.match-wrap {
- min-height: 20pt;
- div.snippet {
-
- background-color: $light-orange;
- > * {
- background-color: transparent;
- }
- div.flag {
- display: none;
- }
- padding: 2pt 0 5pt 5pt;
- margin: {
- top: 0;
- right: $right-view-distance;
- bottom: 0;
- left: 0; // 5pt margin-top
- }
- > span {
- line-height: 1.4em;
- width: auto;
- &.context-left {
- margin-left: 0;
- display: inline;
- overflow: visible;
- text-align: left;
- width: auto;
- }
- }
+
+ div.match-main {
+ display: block;
+ width: 100%;
+
+ div.match-wrap {
+ cursor: default;
+ min-height: 20pt;
+ background-color: $dark-orange;
+ width: 100%;
+ margin-left: 0;
+ overflow-x: visible;
+ white-space: wrap;
}
}
- overflow: hidden;
-
div.meta {
display: none;
- // visibility: hidden;
}
- div.match-main {
- display: block;
- width: 100%;
-
- div.match-wrap {
- background-color: $dark-orange;
- width: 100%;
- margin-left: 0;
- overflow-x: visible;
- white-space: wrap;
- }
- }
+
p.ref {
- display: block;
- color: $nearly-white;
- padding: 3pt 10pt 3pt 3pt;
+ display: block;
+ color: $nearly-white;
+ padding: 3pt 10pt 3pt 3pt;
padding-right: $right-view-distance;
- margin: 0pt;
- width: 100%;
- bottom: 0;
- z-index: 30;
+ margin: 0pt;
+ width: 100%;
+ bottom: 0;
+ z-index: 30;
+
> span.sigle {
- font-size: 75%;
+ font-size: 75%;
vertical-align: top;
- color: $light-orange;
- float: right;
+ color: $light-orange;
+ float: right;
}
}
}
-
-#search ol span.context-left {
- display: inline-block;
- width: 50.01%;
- text-align: right;
-}
/**
- * Right aligned
+ * Alignment rules
*/
-
-#search ol.align-right {
- text-align: right;
-
- div.match-main span.context-right {
- display: inline-block;
- width: 49.915%;
- text-align: left;
- }
-}
-
-/**
- * Center aligned
- */
-#search ol.align-center {
- div.match-main {
- width: 100% !important;
-
- > .match-wrap {
- margin-left: 0;
- position: relative;
- }
+#search ol {
+ span.context-left {
+ display: inline-block;
+ width: 50.01%;
+ text-align: right;
}
- li:not(.active) div.snippet {
- white-space: normal;
- text-align: center;
- width: 100000pt;
- margin-left: -50000pt;
+ // Right aligned
+ &.align-right {
+ text-align: right;
- span.context-left {
- display: inline-block;
- text-align: right;
- width: 40000pt;
- margin-left: 70vw;
- }
-
- span.context-right {
- display: inline-block;
+ div.match-main span.context-right {
+ display: inline-block;
+ width: 49.915%;
text-align: left;
- width: 40000pt;
+ }
+ }
+
+ // Center aligned
+ &.align-center {
+ div.match-main {
+ width: 100% !important;
+
+ > .match-wrap {
+ position: relative;
+ margin-left: 0;
+ }
+ }
+
+ li:not(.active) div.snippet {
+ white-space: normal;
+ text-align: center;
+ width: 100000pt;
+ margin-left: -50000pt;
+
+ span.context-left {
+ display: inline-block;
+ text-align: right;
+ width: 40000pt;
+ margin-left: 70vw;
+ }
+
+ span.context-right {
+ display: inline-block;
+ text-align: left;
+ width: 40000pt;
+ }
}
}
}
-// fix empty contexts
-#search ol span.context-left,
-#search ol span.context-right {
- &:empty::after {
- content: " ";
- display: inline-block;
+/**
+ * Fix empty contexts
+ */
+#search ol span {
+ &.context-left,
+ &.context-right {
+ &:empty::after {
+ content: " ";
+ display: inline-block;
+ }
}
}
+
/**
- * Highlights
+ * Highlight rules
*/
mark {
background-color: inherit;
- color: inherit;
+ color: inherit;
}
mark > mark,
@@ -391,8 +375,8 @@
.level-0 {
border-bottom-width: 2px;
border-bottom-style: solid;
- padding-bottom: 0px !important;
- font-style: normal;
+ padding-bottom: 0px !important;
+ font-style: normal;
}
mark > mark > mark,
@@ -423,11 +407,3 @@
.class-2 { border-color: $kwic-highlight-2; }
.class-3 { border-color: $kwic-highlight-3; }
.class-4 { border-color: $kwic-highlight-4; }
-
-
-/**
- * Actions
- */
-#search > ol > li .button-group.button-view {
- display: none;
-}
diff --git a/dev/scss/main/logos.scss b/dev/scss/main/logos.scss
index 705ea43..3b87e96 100644
--- a/dev/scss/main/logos.scss
+++ b/dev/scss/main/logos.scss
@@ -1,59 +1,66 @@
@charset "utf-8";
@import "../util";
+/**
+ * Rules for logos.
+ */
.logo {
&::after {
content: "" !important;
}
+
> * {
background: {
- repeat: no-repeat;
- size: 90%;
+ repeat: no-repeat;
+ size: 90%;
position: 50% 50%;
}
+
> span {
- margin-left: -30000px;
+ @include blind;
}
}
}
+
/**
* Background image for the front page
*/
#kalamar-bg {
position: fixed;
- height: 110%;
- width: 175%;
- top: 0;
- z-index: -5000;
- opacity: .1;
+ height: 110%;
+ width: 175%;
+ top: 0;
+ z-index: -5000;
+ opacity: .1;
background: {
- image:url('#{$img-path}/korap-bg-kalamar.svg');
- size: 50%;
- repeat: no-repeat;
+ 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%;
+ position: relative;
+ text-align: right;
+ font-size: 85%;
+ right: 0;
+ width: 100%;
margin-left: ($standard-margin / 2);
-
padding-left: 60%;
+
> div {
- border-top: 26px solid $dark-orange;
+ border-top: 26px solid $dark-orange;
padding-right: 2em;
}
p {
text-align: left;
- display: inline-block;
+ display: inline-block;
}
}
@@ -62,12 +69,10 @@
* Logo: Institute for German Language
*/
#ids-logo {
- display: block;
- width: (631 / 30) + em;
- height: (200 / 30) + em;
- background: {
- image:url('#{$img-path}/ids-leibniz-institute-for-the-german-language.svg');
- }
+ display: block;
+ width: (631 / 30) + em;
+ height: (200 / 30) + em;
+ background-image: url('#{$img-path}/ids-leibniz-institute-for-the-german-language.svg');
}
@@ -75,21 +80,21 @@
* Logo: KorAP
*/
h1 {
- position: absolute;
- margin: 0;
- margin-left:15px;
- left: 0;
- top: 0;
- width: 7.8em;
- height: 2.4em;
- z-index: 105;
+ position: absolute;
+ margin: 0;
+ margin-left: 15px;
+ left: 0;
+ top: 0;
+ width: 7.8em;
+ height: 2.4em;
+ z-index: 105;
background: {
- size: 72%;
+ size: 72%;
image: url('#{$img-path}/korap-logo-kalamar.svg');
}
}
#overview {
text-align: center;
- width: 100%;
+ width: 100%;
}
diff --git a/dev/scss/main/main.scss b/dev/scss/main/main.scss
index 67b48fa..c49ceb1 100644
--- a/dev/scss/main/main.scss
+++ b/dev/scss/main/main.scss
@@ -2,74 +2,65 @@
@import "kwic"; // Kwic view information
@import "logos"; // Logo images
@import "matchinfo"; // Match table
-@import "tree"; // Tree view
@import "pagination"; // Pagination
@import "query"; // View query
@import "resultinfo"; // Information on results
@import "tutorial"; // Embedded and non-embedded tutorial
@import "koralquery"; // KoralQuery
-@import "tagger"; // Tagger
@import "alertify"; // Styling alerts
@import "intro"; // Intro page
@import "buttongroup"; // Button groups
@import "panel"; // Base panel system
-@import "plugin"; // Plugin mechanism
@import "introjs"; // Guided Tour
@import "introjs-ids"; // Guided Tour: IDS specific
@import "oauth"; // OAuth Management styles
+// @import "tagger"; // Tagger
+
+@import "../util";
main {
+ padding-bottom: 20pt;
+
margin: {
- left: $standard-margin;
+ left: $standard-margin;
right: ($standard-margin / 2);
}
- padding-bottom: 20pt;
+
&.embedded {
margin: {
- left: 14px;
+ left: 14px;
right: 14px;
}
}
+
p {
text-align: justify;
- hyphens: auto;
+ hyphens: auto;
}
h2#page-top {
- margin-top: 0;
+ margin-top: 0;
padding-top: 1em;
}
&.page {
margin-left: $logo-left-distance + 15px;
- p,li, dd, dt {
+ p,
+ li,
+ dd,
+ dt {
code {
background-color: $ids-grey-2;
- color: $ids-grey-1;
- padding: 0 .5em;
- border-radius: $standard-border-radius;
+ color: $ids-grey-1;
+ padding: 0 .5em;
+ border-radius: $standard-border-radius;
}
}
}
p.hint {
- margin: 0 auto;
+ margin: 0 auto;
text-align: center;
}
}
-
-blockquote {
- border-radius: $standard-border-radius;
- padding: 2pt 5pt 2pt 20pt;
- margin: 0;
- border-left: 5px solid $ids-blue-1;
- background-color: $ids-blue-2;
- color: $ids-blue-1;
-
- &.bug, &.missing {
- border-left-color: $dark-red;
- background-color: $middle-red;
- color: $nearly-white;
- }
-}
diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
index 3039d03..a0f98c4 100644
--- a/dev/scss/main/matchinfo.scss
+++ b/dev/scss/main/matchinfo.scss
@@ -1,286 +1,47 @@
@charset "utf-8";
@import "../util";
+@import "view/matchtable";
+@import "view/matchtree";
+@import "view/metatable";
-$left-width: 176px;
-$border-size: 2px;
-$left-distance: $left-width + ($border-size * 2);
/**
- * Table view
- *
- * The table view is complicated, as the
- * first column has to be static.
+ * General matchinfo styles.
*/
-@mixin matchinfo-head {
- // border-width: 0px;
- border-top: $border-size solid $darker-orange; // #ff8000;
- width: $left-width / 2;
-}
-div.matchinfo:empty {
- display: none !important;
-}
+// TODO: This should be moved to panel/match
div.matchinfo {
- position: relative;
- width: 100%;
+ position: relative;
+ width: 100%;
padding-top: $border-size;
- // background-color: $dark-orange;
- height: auto;
- font-size: 10pt;
- text-align: left;
-}
+ height: auto;
+ font-size: 10pt;
+ text-align: left;
-
-div.matchtable > div {
- z-index: 20;
- margin-left: $left-distance - ($border-size / 2);
- margin-right: $right-view-distance;
- padding: 0;
- overflow-x: auto;
- overflow-y: visible;
- width: auto;
-
- table {
- display: table;
- border-collapse: separate;
- border-spacing: 0px;
- }
- th {
- color: $nearly-white;
+ &:empty {
+ display: none !important;
}
- // Use matchinfo cells for query creation
- td,
- tbody th,
- thead th:not(:nth-child(1)):not(:nth-child(2)):not(.cutted) {
- cursor: pointer;
- }
- td:empty {
- cursor: default;
- // Fix for empty annotation lines:
- &::after {
- content: " ";
- white-space: pre;
- }
- }
- tr {
- outline: none;
- // equal to dd.chosen
- td.chosen,
- th.chosen,
- div.chosen {
- background-color: $light-green !important;
- color: $nearly-white;
- // transition: color 0.1s, background-color 0.15s ease-out;
- }
- }
-
- thead {
- tr th {
- background-color: $darker-orange;
- border-top-width: 0px !important;
- text-align: center;
- &:nth-of-type(1), &:nth-of-type(2) {
- text-align: left;
- }
- &.mark {
- background-color: $darkest-orange; // #f6a800;
- }
-
- &.cutted {
- background-color: $light-orange;
- &::after {
- content: $fa-cut;
- font-family: FontAwesome;
- padding: {
- left: 4pt;
- right: 4pt;
- }
- color: $light-green;
- }
- }
- }
- }
-
- tbody {
- > tr:nth-of-type(1) > th {
- border-top-color: transparent;
- }
- }
- tr {
- /**
- * The first two columns.
- */
- > th:nth-of-type(1),
- > th:nth-of-type(2) {
- position: absolute;
- z-index: 80;
- vertical-align: middle;
- left: 0px;
- @include matchinfo-head;
- }
- > th:nth-of-type(2) {
- left: ($left-width / 2) + $border-size;
- }
-
- // Includes header line as well
- > * {
- @include cell-info;
- border: ($border-size / 2) solid $dark-orange;
- }
- }
- tr > td {
- background-color: $middle-orange; // $nearly-white;
- white-space: nowrap;
- vertical-align: top;
- text-align: center;
- &.mark {
- background-color: $light-orange;
- }
- }
- tr:nth-child(even) > td {
- background-color: $light-orange;
- &.mark {
- background-color: $middle-orange;
- }
- }
-
- // table for key-value pairs
- td.matchkeyvalues {
- padding: 0;
- > div {
- @include cell-info;
- > span {
- color: $darkest-orange;
- text-align: right;
- &::after {
- content: ":"
- }
- padding-right: .5em;
- }
- }
+ .view + .view {
+ margin-top: 4 * $border-size !important;
}
}
-div.metatable, div.matchtable {
- background-color: $dark-orange;
- position: relative;
-}
-
-/**
- * Label
- */
-// The metatable branch was experimental
+div.metatable,
+div.matchtable,
div.matchtree {
- h6 {
- display: inline;
- font-size: inherit;
- color: $nearly-white;
- margin: 0;
- padding: 0 !important;
- float: left;
- > span { // , > div {
- @include matchinfo-head;
- @include cell-info;
- display: inline-block !important;
- margin: 0;
- &:nth-of-type(2) {
- margin-left: $border-size;
- }
- }
- }
-}
-
-/**
- * Tree view
- */
-div.matchtree {
- position: relative;
- overflow-x: hidden;
- overflow-y: visible;
- padding: 0;
- margin-top: 1pt;
+ position: relative;
background-color: $dark-orange;
-
- > div {
- position: unset;
- z-index: 4;
- overflow-x: auto;
- margin: $border-size;
- margin-left: $left-distance;
- margin-right: $right-view-distance;
-
- background-color: $light-orange;
- }
}
div.button-group.button-panel.button-matchinfo {
- display: inline-block;
+ display: inline-block;
margin-right: .5em;
+
> span {
- position: relative;
+ position: relative;
box-shadow: none;
}
}
-
-div.matchinfo .view + .view {
- margin-top: 4 * $border-size !important;
-}
-
-
-// Metatable
-div.metatable > dl {
- margin-right: $right-view-distance;
- margin-top: $border-size;
-
- > div {
- border-color: $dark-orange;
- > * {
- padding: .2em;
- }
- > dt {
- background: $darker-orange;
- color: $nearly-white;
- width: 12.5em;
- }
- > dd {
- background-color: $light-orange;
- cursor: pointer;
- }
- > dd[data-type="type:store"],
- > dd[data-type="type:attachement"]{
- background-color: $middle-orange;
- cursor: default;
-
- a {
- color: inherit;
- }
- }
-
- > dd.metakeyvalues {
- padding:0;
- > div {
- padding: .2em;
- &::before {
- content: "\2022\00A0";
- color: $dark-orange
- }
- }
- }
-
- // equal to td.chosen
- > dd.chosen, > dd > div.chosen {
- background-color: $light-green !important;
- color: $nearly-white;
- }
- }
-}
-
-// This is a temporary feature to disable
-// corpusByMatch assistant. See corpusByMatch.js
-// for reasons.
-div.metatable > dl.cbm-disabled > div > dd {
- cursor: default !important;
-}
diff --git a/dev/scss/main/oauth.scss b/dev/scss/main/oauth.scss
index 0b37285..9dca691 100644
--- a/dev/scss/main/oauth.scss
+++ b/dev/scss/main/oauth.scss
@@ -1,28 +1,35 @@
+@import "../util";
+
+/**
+ * Styles for OAuth management form.
+ */
+
ul.client-list {
padding-left: 1.5em;
+
li.client {
list-style-type: none;
- span.client-name {
- &::before {
- margin-left: -1.5em;
- }
- font-weight: bold;
+
+ span.client-name::before {
+ margin-left: -1.5em;
}
+
span.client-desc {
font-size: 70%;
- display: block;
+ display: block;
}
}
}
span.client-name {
+ font-weight: bold;
+
&::before {
- display: inline-block;
- width: 1.5em;
- content: $fa-plugin;
- font-family: 'FontAwesome';
- color: $ids-blue-1;
+ @include icon-font;
+ display: inline-block;
+ width: 1.5em;
+ content: $fa-plugin;
+ color: $ids-blue-1;
font-size: 100%;
}
- font-weight: bold;
}
\ No newline at end of file
diff --git a/dev/scss/main/pagination.scss b/dev/scss/main/pagination.scss
index 9704638..daa9bd9 100644
--- a/dev/scss/main/pagination.scss
+++ b/dev/scss/main/pagination.scss
@@ -1,54 +1,52 @@
@charset "utf-8";
@import "../util";
-$border-size : 2px;
-
/**
* The pagination view
+ *
+ * <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="#p=2"><span>2</span></a>
+ * <a href="#3"><span>3</span></a>
+ * <span><i class="fa fa-ellipsis-h"></i></span>
+ * <a href="#67"><span>67</span></a>
+ * <a rel="next" href="#2"><span><i class="fa fa-caret-right"></i></span></a>
+ * </div>
*/
-/*
-<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="#p=2"><span>2</span></a>
- <a href="#3"><span>3</span></a>
- <span><i class="fa fa-ellipsis-h"></i></span>
- <a href="#67"><span>67</span></a>
- <a rel="next" href="#2"><span><i class="fa fa-caret-right"></i></span></a>
-</div>
-*/
#pagination {
- /**
+ /*
* Always in fixed position.
* This may need to be overwritten in case multiple
* paginations have to be activated.
*/
- font-size: 0;
- position: fixed;
- right: ($standard-margin / 4);
- bottom: ($standard-margin / 2);
- z-index: 35;
- padding: 0;
- height: auto;
+ position: fixed;
+ font-size: 0;
+ right: ($standard-margin / 4);
+ bottom: ($standard-margin / 2);
+ z-index: 35;
+ padding: 0;
+ height: auto;
line-height: 0;
> a {
- margin: 0;
+ margin: 0;
font-size: 10pt;
- padding: 0;
+ padding: 0;
> span {
- box-shadow: $choose-box-shadow;
@include standard-text-padding;
@include choose-item;
- display: inline-block;
+ box-shadow: $choose-box-shadow;
+ display: inline-block;
line-height: 2em;
- text-align: center;
+ text-align: center;
+
border: {
- top-width: $border-size;
- bottom-width: $border-size;
- top-style: solid;
- bottom-style: solid;
+ top-width: $border-size;
+ bottom-width: $border-size;
+ top-style: solid;
+ bottom-style: solid;
}
}
@@ -58,63 +56,70 @@
&.ellipsis > span {
> span {
- @include blind;
+ @include blind;
}
+
&::after {
- font-family: 'FontAwesome';
- content: $fa-elipsis;
- line-height: 1em;
+ @include icon-font;
+ content: $fa-elipsis;
+ line-height: 1em;
}
}
&[rel=self] > span {
@include choose-active;
+
border {
- left-width: $border-size;
- right-width: $border-size;
- left-style: solid;
- right-style: solid;
+ left-width: $border-size;
+ right-width: $border-size;
+ left-style: solid;
+ right-style: solid;
}
}
&[rel=prev] > span {
border: {
- top-left-radius: $standard-border-radius;
- bottom-left-radius: $standard-border-radius;
- left-width: $border-size;
- left-style: solid;
+ top-left-radius: $standard-border-radius;
+ bottom-left-radius: $standard-border-radius;
+ left-width: $border-size;
+ left-style: solid;
}
+
> span {
- @include blind;
+ @include blind;
}
+
&::after {
- font-family: 'FontAwesome';
- content: $fa-previous;
- line-height: 1em;
+ @include icon-font;
+ content: $fa-previous;
+ line-height: 1em;
}
}
&[rel=next] > span {
border: {
- top-right-radius: $standard-border-radius;
- bottom-right-radius: $standard-border-radius;
- right-width: $border-size;
- right-style: solid;
+ top-right-radius: $standard-border-radius;
+ bottom-right-radius: $standard-border-radius;
+ right-width: $border-size;
+ right-style: solid;
}
+
> span {
- @include blind;
+ @include blind;
}
+
&::after {
- font-family: 'FontAwesome';
- content: $fa-next;
- line-height: 1em;
+ @include icon-font;
+ content: $fa-next;
+ line-height: 1em;
}
}
+
&:link:hover,
&:link:focus {
outline: none;
span {
- @include choose-hover;
+ @include choose-hover;
}
}
}
diff --git a/dev/scss/main/panel.scss b/dev/scss/main/panel.scss
index 55d0c9c..adddf71 100644
--- a/dev/scss/main/panel.scss
+++ b/dev/scss/main/panel.scss
@@ -1,14 +1,18 @@
@import "../util";
+/**
+ * Base styles for all panels and views
+ */
+
div.panel {
position: relative;
- width: 100%;
- display: block;
+ width: 100%;
+ display: block;
}
div.view {
- position: relative;
+ position: relative;
padding-top: $border-size;
- display: block;
- width: 100%;
+ display: block;
+ width: 100%;
}
diff --git a/dev/scss/main/plugin.scss b/dev/scss/main/plugin.scss
deleted file mode 100644
index 42867f6..0000000
--- a/dev/scss/main/plugin.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@import "../util";
-
-div.view.widget {
- padding-right: $right-view-distance;
- > iframe {
- margin: 0;
- box-sizing: border-box;
- padding: 0;
- width: 100%;
- overflow-x: auto;
- }
-}
\ No newline at end of file
diff --git a/dev/scss/main/resultinfo.scss b/dev/scss/main/resultinfo.scss
index d767d19..67b4157 100644
--- a/dev/scss/main/resultinfo.scss
+++ b/dev/scss/main/resultinfo.scss
@@ -1,102 +1,113 @@
@charset "utf-8";
@import "../util";
+/**
+ * Rules applicable for the result panel
+ */
+
+// TODO: This should be moved to panel/result
#resultinfo {
- clear: both;
- text-align: right;
+ clear: both;
+ text-align: right;
line-height: 1.5em;
- min-height: 1.5em;
- margin-top:.4em;
- font-size: 10pt;
+ min-height: 1.5em;
+ margin-top: .4em;
+ font-size: 10pt;
+
p.found {
- display: inline;
- padding: 0;
- margin: 0;
+ display: inline;
+ padding: 0;
+ margin: 0;
text-align: right;
}
+
+ /*
+ * TODO:
+ * This rule should not be dependent on
+ * whether something is found or not,
+ * but whether #search contains a result,
+ * e.g. when a result view is open in the
+ * result panel. This should probably be
+ * indicated by a class on the button group
+ * rather than a class on the resultinfo.
+ */
+ &.found {
+ position: relative;
+ margin-bottom: 0px;
+
+ .button-group > span {
+ margin-bottom: 0;
+ border-bottom-width: 0;
+ box-shadow: none;
+
+ &:first-child {
+ border-bottom-left-radius: 0;
+ }
+
+ &:last-child {
+ border-bottom-right-radius: 0;
+ }
+ }
+ }
}
+
div.result.panel .view {
- border: 1px solid $kwic-border;
+ border: 1px solid $kwic-border;
background-color: $dark-orange;
}
+
// Specify result button group layout
.result.button-group.button-panel {
- width: auto;
+ display: inline-block;
+ width: auto;
vertical-align: bottom;
- display: inline-block;
- line-height: 1.3em;
+ line-height: 1.3em;
> span {
- line-height: 1.3em;
+ line-height: 1.3em;
border-width: $result-border-size 0;
+
&:first-child {
border-left-width: $result-border-size;
}
+
&:last-child {
border-right-width: $result-border-size;
}
}
-
- // Define icons for result buttons
- .button-icon {
- &.align.left::after {
- content: $fa-left-align;
- }
- &.align.right::after {
- content: $fa-right-align;
- }
- &.align.center::after {
- content: $fa-center-align;
- }
- &.show-kq::after {
- content: $fa-code;
- }
- }
}
-/*
- * TODO:
- * This rule should not be dependent on
- * whether something is found or not,
- * but whether #search contains a result,
- * e.g. when a result view is open in the
- * result panel. This should probably be
- * indicated by a class on the button group
- * rather than a class on the resultinfo.
- */
-#resultinfo.found {
- position: relative;
- // z-index: 20;
- margin-bottom: 0px;
-
- .button-group > span {
- margin-bottom: 0;
- border-bottom-width: 0;
- box-shadow: none;
- &:first-child {
- border-bottom-left-radius: 0;
- }
- &:last-child {
- border-bottom-right-radius: 0;
- }
- }
-}
-
-
#total-results {
- color: $total-results;
+ color: $light-green;
font-weight: bold;
}
+
.no-results {
- margin: 0 auto;
+ margin: 0 auto;
text-align: center;
code {
font-weight: bold;
}
}
+
+// Define icons for result buttons
+.button-icon {
+ &.align.left::after {
+ content: $fa-left-align;
+ }
+ &.align.right::after {
+ content: $fa-right-align;
+ }
+ &.align.center::after {
+ content: $fa-center-align;
+ }
+ &.show-kq::after {
+ content: $fa-code;
+ }
+}
diff --git a/dev/scss/main/tagger.scss b/dev/scss/main/tagger.scss
index c3a08be..d7ba90f 100644
--- a/dev/scss/main/tagger.scss
+++ b/dev/scss/main/tagger.scss
@@ -1,62 +1,70 @@
@charset "utf-8";
@import "../util";
-$border-size: 1px;
+/**
+ * Styles for tags.
+ */
+
+// Currently not used
+
$tagcolor: rgba(0,0,0,0.5);
.tagger {
- display: table;
+ display: table;
border-collapse: collapse;
- width: 100%;
- font-size: 100%;
+ width: 100%;
+ font-size: 100%;
// The tag list
> div {
- display: table-cell;
- font-size: inherit;
+ display: table-cell;
+ font-size: inherit;
white-space: nowrap;
- width: 0;
+ width: 0;
// The tag
> span {
- font-size: 80%;
- display: inline-block;
- white-space: nowrap;
+ display: inline-block;
+ font-size: 80%;
+ white-space: nowrap;
background-color: $dark-orange;
- padding: 2px 6px;
- color: $tagcolor;
- text-shadow: 1px 1px 0px rgba(255,255,255,0.3);
- margin-right: 2px;
- box-shadow: $choose-box-shadow;
- cursor: pointer;
+ padding: 2px 6px;
+ color: $tagcolor;
+ text-shadow: $light-shadow;
+ margin-right: 2px;
+ box-shadow: $choose-box-shadow;
+ cursor: pointer;
+
border: {
- width: $border-size;
- style:solid;
- color: rgba(0,0,0,0.3);
- radius: $standard-border-radius;
+ width: $border-size;
+ style: solid;
+ color: rgba(0,0,0,0.3);
+ radius: $standard-border-radius;
}
+
> span {
- cursor: crosshair;
- &::after {
- font-size: 70%;
- vertical-align: top;
- padding-left: 3px;
- color: $tagcolor;
- text-shadow: none;
- font-family: 'FontAwesome';
- content: $fa-close;
- }
+ cursor: crosshair;
+
+ &::after {
+ @include icon-font;
+ font-size: 70%;
+ vertical-align: top;
+ padding-left: 3px;
+ color: $tagcolor;
+ text-shadow: none;
+ content: $fa-close;
+ }
}
}
}
// The tag input field
input[type=text] {
- display: table-cell;
- width: 100%;
- border: none;
+ display: table-cell;
+ width: 100%;
+ border: none;
background-color: $light-grey;
- font-size: inherit;
+ font-size: inherit;
}
}
diff --git a/dev/scss/main/tutorial.scss b/dev/scss/main/tutorial.scss
index 526a190..6ccc32e 100644
--- a/dev/scss/main/tutorial.scss
+++ b/dev/scss/main/tutorial.scss
@@ -1,45 +1,45 @@
@charset "utf-8";
@import "../util";
-$border-size: 2px;
+/**
+ * Rules for the embedded documentation.
+ */
#tutorial {
- position: fixed;
- z-index: 9999;
- top: 5%;
- bottom: 5%;
- left: 2%;
- right: 2%;
- padding-right: $right-view-distance;
-/*
- padding: 0;
- margin: 0;
-*/
+ position: fixed;
+ z-index: 9999;
+ top: 5%;
+ bottom: 5%;
+ left: 2%;
+ right: 2%;
+ padding-right: $right-view-distance;
background-color: $nearly-white;
+ box-shadow: $choose-box-shadow;
.button-group.button-view {
background-color: $middle-grey;
- display: block;
- height: 100%;
+ display: block;
+ height: 100%;
}
+
border: {
- width: 2 * $border-size;
-// color: $dark-orange;
- color: $dark-grey;
- style: solid;
+ width: 2 * $border-size;
+ color: $dark-grey;
+ style: solid;
radius: $standard-border-radius;
}
- box-shadow: $choose-box-shadow;
+
iframe {
border-width: 0;
width: 100%;
+
// Hack for a Firefox bug
min-height: 100.1%;
background: {
- image:url('#{$img-path}/korap-bg-kalamar.svg');
- repeat: no-repeat;
+ image: url('#{$img-path}/korap-bg-kalamar.svg');
+ repeat: no-repeat;
position: center center;
- size: 20%;
+ size: 20%;
}
}
}
@@ -47,59 +47,23 @@
body.embedded {
background-color: $nearly-white;
aside {
-/*
- border-right: {
- width: $border-size;
- style: solid;
- }
-*/
- padding-top: 0;
@include choose-item;
+ padding-top: 0;
background-color: $middle-grey;
+
> div {
- position: relative;
- top: 50%;
+ position: relative;
+ top: 50%;
-webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- // margin-right: -1 * $border-size;
+ -ms-transform: translateY(-50%);
+ transform: translateY(-50%);
}
}
}
-main.tutorial {
- // Link to documentation
- a.embedded-link::after {
- font-family: FontAwesome;
- white-space: nowrap;
- content: " " + $fa-tutorial;
- font-size: 75%;
- }
-}
-
-dl {
- margin: 0;
- padding-bottom: .5em;
- dt {
- font-weight: bold;
- abbr {
- border-width: 0;
- &[data-type=token]::after {
- color: $ids-blue-1;
- }
- &[data-type=span]::after {
- color: $ids-pink-1;
- }
- &::after {
- content: ' (' attr(title) ')';
- vertical-align: bottom;
- font-style: italic;
- font-weight: normal;
- font-size: 80%;
- }
- }
- }
-}
-
-
-
+// Link to documentation
+main.tutorial a.embedded-link::after {
+ @include icon-font;
+ content: " " + $fa-tutorial;
+ font-size: 75%;
+}
\ No newline at end of file
diff --git a/dev/scss/main/view/matchtable.scss b/dev/scss/main/view/matchtable.scss
new file mode 100644
index 0000000..6239c61
--- /dev/null
+++ b/dev/scss/main/view/matchtable.scss
@@ -0,0 +1,148 @@
+@import "../../util";
+
+/**
+ * Table view
+ *
+ * The table view is complicated, as the
+ * first column has to be static.
+ */
+div.matchtable {
+
+ > div {
+ z-index: 20;
+ margin-left: $left-distance - ($border-size / 2);
+ margin-right: $right-view-distance;
+ padding: 0;
+ overflow-x: auto;
+ overflow-y: visible;
+ width: auto;
+ }
+
+ table {
+ display: table;
+ border-collapse: separate;
+ border-spacing: 0px;
+ }
+
+ th {
+ color: $nearly-white;
+ }
+
+ // Use matchinfo cells for query creation
+ td,
+ tbody th,
+ thead th:not(:nth-child(1)):not(:nth-child(2)):not(.cutted) {
+ cursor: pointer;
+ }
+
+ td {
+ &:empty {
+ cursor: default;
+ // Fix for empty annotation lines:
+ &::after {
+ content: " ";
+ white-space: pre;
+ }
+ }
+
+ // table for key-value pairs
+ &.matchkeyvalues {
+ padding: 0;
+ > div {
+ @include cell-info;
+ > span {
+ color: $darkest-orange;
+ text-align: right;
+ padding-right: .5em;
+ &::after {
+ content: ":"
+ }
+ }
+ }
+ }
+ }
+
+ tr {
+ outline: none;
+
+ // equal to dd.chosen
+ td.chosen,
+ th.chosen,
+ div.chosen {
+ background-color: $light-green !important;
+ color: $nearly-white;
+ }
+
+ /**
+ * The first two columns.
+ */
+ > th:nth-of-type(1),
+ > th:nth-of-type(2) {
+ @include matchinfo-head;
+ position: absolute;
+ z-index: 80;
+ vertical-align: middle;
+ left: 0px;
+ }
+
+ > th:nth-of-type(2) {
+ left: ($left-width / 2) + $border-size;
+ }
+
+ // Includes header line as well
+ > * {
+ @include cell-info;
+ border: ($border-size / 2) solid $dark-orange;
+ }
+
+ > td {
+ background-color: $middle-orange;
+ white-space: nowrap;
+ vertical-align: top;
+ text-align: center;
+ &.mark {
+ background-color: $light-orange;
+ }
+ }
+
+ &:nth-child(even) > td {
+ background-color: $light-orange;
+ &.mark {
+ background-color: $middle-orange;
+ }
+ }
+ }
+
+ thead th {
+ background-color: $darker-orange;
+ border-top-width: 0px !important;
+ text-align: center;
+
+ &:nth-of-type(1),
+ &:nth-of-type(2) {
+ text-align: left;
+ }
+
+ &.mark {
+ background-color: $darkest-orange;
+ }
+
+ &.cutted {
+ background-color: $light-orange;
+
+ &::after {
+ @include icon-font;
+ content: $fa-cut;
+ color: $light-green;
+ padding: {
+ left: 4pt;
+ right: 4pt;
+ }
+ }
+ }
+ }
+
+ tbody > tr:nth-of-type(1) > th {
+ border-top-color: transparent;
+ }
+}
diff --git a/dev/scss/main/view/matchtree.scss b/dev/scss/main/view/matchtree.scss
new file mode 100644
index 0000000..96fb86a
--- /dev/null
+++ b/dev/scss/main/view/matchtree.scss
@@ -0,0 +1,44 @@
+@import "../../util";
+@import "tree";
+
+/**
+ * Matchtree view
+ */
+
+div.matchtree {
+ overflow-x: hidden;
+ overflow-y: visible;
+ padding: 0;
+ margin-top: 1pt;
+
+ // Label
+ h6 {
+ display: inline;
+ font-size: inherit;
+ color: $nearly-white;
+ margin: 0;
+ padding: 0 !important;
+ float: left;
+
+ > span {
+ @include matchinfo-head;
+ @include cell-info;
+ display: inline-block !important;
+ margin: 0;
+
+ &:nth-of-type(2) {
+ margin-left: $border-size;
+ }
+ }
+ }
+
+ > div {
+ position: unset;
+ z-index: 4;
+ overflow-x: auto;
+ margin: $border-size;
+ margin-left: $left-distance;
+ margin-right: $right-view-distance;
+ background-color: $light-orange;
+ }
+}
diff --git a/dev/scss/main/view/metatable.scss b/dev/scss/main/view/metatable.scss
new file mode 100644
index 0000000..8be5679
--- /dev/null
+++ b/dev/scss/main/view/metatable.scss
@@ -0,0 +1,64 @@
+@charset "utf-8";
+@import "../../util";
+
+// Metatable
+div.metatable > dl {
+ margin-right: $right-view-distance;
+ margin-top: $border-size;
+
+ > div {
+ border-color: $dark-orange;
+
+ > * {
+ padding: .2em;
+ }
+
+ > dt {
+ background: $darker-orange;
+ color: $nearly-white;
+ width: 12.5em;
+ }
+
+ > dd {
+ background-color: $light-orange;
+ cursor: pointer;
+
+ &.metakeyvalues {
+ padding: 0;
+
+ > div {
+ padding: .2em;
+
+ &::before {
+ content: "\2022\00A0";
+ color: $dark-orange
+ }
+ }
+ }
+
+ // equal to td.chosen
+ &.chosen,
+ > div.chosen {
+ background-color: $light-green !important;
+ color: $nearly-white;
+ }
+
+ &[data-type="type:store"],
+ &[data-type="type:attachement"] {
+ background-color: $middle-orange;
+ cursor: default;
+
+ a {
+ color: inherit;
+ }
+ }
+ }
+ }
+
+ // This is a temporary feature to disable
+ // corpusByMatch assistant. See corpusByMatch.js
+ // for reasons.
+ &.cbm-disabled > div > dd {
+ cursor: default !important;
+ }
+}
\ No newline at end of file
diff --git a/dev/scss/main/tree.scss b/dev/scss/main/view/tree.scss
similarity index 60%
rename from dev/scss/main/tree.scss
rename to dev/scss/main/view/tree.scss
index 088690f..c7e064b 100644
--- a/dev/scss/main/tree.scss
+++ b/dev/scss/main/view/tree.scss
@@ -1,13 +1,13 @@
@charset "utf-8";
-@import "../util";
+@import "../../util";
/**
* SVG tree
*/
path.edge {
- stroke: $darker-orange;
+ stroke: $darker-orange;
stroke-width: 2px;
- fill: none;
+ fill: none;
}
g.arc.infocus > path.edge {
@@ -17,37 +17,38 @@
marker#arr {
overflow: visible;
path {
- stroke: $darkest-orange;
- fill: $darkest-orange;
- fill-opacity:1;
+ stroke: $darkest-orange;
+ fill: $darkest-orange;
+ fill-opacity: 1;
stroke-width: 2;
}
}
path.anchor {
- stroke: $darkest-orange;
- stroke-width: 3;
+ stroke: $darkest-orange;
+ stroke-width: 3;
stroke-linecap: round;
- z-index: 20;
+ z-index: 20;
}
g.root rect.empty {
- stroke: $darker-orange;
- fill: $darker-orange;
+ stroke: $darker-orange;
+ fill: $darker-orange;
stroke-width: 2px;
}
-g.middle, g.label {
+g.middle,
+g.label {
rect {
- stroke: $darker-orange;
+ stroke: $darker-orange;
stroke-width: 2px;
- fill: $middle-orange;
+ fill: $middle-orange;
}
}
g.label.infocus rect {
stroke: $dark-green;
- fill: $lightest-green;
+ fill: $lightest-green;
}
g.middle.mark {
@@ -56,6 +57,7 @@
}
> text {
fill: $light-orange;
+
> tspan {
stroke: $light-orange;
}
@@ -72,13 +74,13 @@
g > text > tspan {
text-anchor: middle;
- font-size: 9pt;
+ font-size: 9pt;
}
g.leaf > text,
text.leaf {
> tspan {
font-size: 10pt;
- overflow: visible;
+ overflow: visible;
}
}
diff --git a/dev/scss/no-js.scss b/dev/scss/no-js.scss
index f948e44..c5f6410 100644
--- a/dev/scss/no-js.scss
+++ b/dev/scss/no-js.scss
@@ -1,50 +1,57 @@
@import "util";
-// Aside in noscript mode
-body.no-js aside {
- > * {
- opacity: 1 !important;
- transition: none;
- }
- transition: none;
- position: relative;
- margin-left: 0 !important;
- display: block;
- padding-top:0;
- width: 100%;
- top: 0;
- form.login {
- > input, > div {
- width: auto;
- margin-top: 0;
- &:first-of-type {
- float: left;
- margin-right: 1em;
+/**
+ * Optimization for no-js behaviour
+ */
+body.no-js {
+
+ // Aside in noscript mode
+ aside {
+ position: relative;
+ display: block;
+ transition: none;
+ margin-left: 0 !important;
+ padding-top: 0;
+ width: 100%;
+ top: 0;
+
+ > * {
+ opacity: 1 !important;
+ transition: none;
+ }
+
+ form.login {
+ > input,
+ > div {
+ width: auto;
+ margin-top: 0;
+ &:first-of-type {
+ float: left;
+ margin-right: 1em;
+ }
+ }
+ button {
+ height: 100%
}
}
- button {
- height: 100%
+
+ p,
+ &::after {
+ display: none;
}
}
- &::after {
- display: none;
- }
- p {
- display: none;
+
+ main div.intro {
+ margin-left: $base-padding !important;
}
}
-body.no-js main div.intro {
- margin-left: $base-padding !important;
-}
-
-
#activate {
- text-align: right;
+ text-align: right;
background-color: $dark-orange;
- margin-top: 0;
- padding: $base-padding;
- padding-right: $standard-margin;
- color: $nearly-white;
- font-size: 80%;
+ margin-top: 0;
+ padding: $base-padding;
+ padding-right: $standard-margin;
+ color: $nearly-white;
+ font-size: 80%;
}
\ No newline at end of file
diff --git a/dev/scss/plugin.scss b/dev/scss/plugin.scss
new file mode 100644
index 0000000..5203758
--- /dev/null
+++ b/dev/scss/plugin.scss
@@ -0,0 +1,18 @@
+@import "base/base";
+
+/**
+ * Base rules for all plugin related styles,
+ * like widgets.
+ */
+
+div.view.widget {
+ padding-right: $right-view-distance;
+
+ > iframe {
+ margin: 0;
+ box-sizing: border-box;
+ padding: 0;
+ width: 100%;
+ overflow-x: auto;
+ }
+}
\ No newline at end of file
diff --git a/dev/scss/sidebar/sidebar.scss b/dev/scss/sidebar/sidebar.scss
index 2a99589..f9cb33d 100644
--- a/dev/scss/sidebar/sidebar.scss
+++ b/dev/scss/sidebar/sidebar.scss
@@ -1,67 +1,71 @@
@charset "utf-8";
@import "../util";
-$border-size: 2px;
-$right-padding: 60px;
-
aside {
- outline: none;
- font-size: 10pt;
- display: block;
background-color: $dark-green;
- position: fixed;
- z-index: 100; // Needs to be behind alerts
- color: $nearly-white;
- width: $logo-left-distance;
- top: 0;
- left: 0;
- height: 100%;
+ color: $nearly-white;
+ width: $logo-left-distance;
+ position: fixed;
+ display: block;
+ transition: all .3s ease-in-out;
+ outline: none;
+ font-size: 10pt;
+ z-index: 100; // Needs to be behind alerts
+ top: 0;
+ left: 0;
+ height: 100%;
padding-top: 65px;
+
> div {
overflow-y: auto;
overflow-x: visible;
max-height: 100%;
}
+
> * {
opacity: 1;
}
+
&::after {
- position: absolute;
- display: block;
- opacity: 0;
- cursor: pointer;
- right: 0;
- bottom: 0;
- margin-right: -1 * ($standard-margin / 2);
- background-color: $dark-green;
- font-family: FontAwesome;
- content: $fa-login; // $fa-bars
+ @include icon-font;
+ position: absolute;
+ display: block;
+ opacity: 0;
+ cursor: pointer;
+ right: 0;
+ bottom: 0;
+ content: $fa-login;
font-size: 16pt;
- width: 16pt;
- height: 17pt;
- padding: 6pt;
+ width: 16pt;
+ height: 17pt;
+ padding: 6pt;
+ background-color: $dark-green;
border-top-right-radius: $standard-border-radius;
- }
- h2, legend {
- font: {
- size: 100%;
- weight: bold;
- }
- line-height: 2em;
- text-align: center;
- padding: 0;
- margin: 0;
+ margin-right: -1 * ($standard-margin / 2);
}
+ h2,
+ legend {
+ line-height: 2em;
+ text-align: center;
+ padding: 0;
+ margin: 0;
+ font: {
+ size: 100%;
+ weight: bold;
+ }
+ }
+
+ /**
+ * Navigation menu
+ */
ul.nav {
list-style-type: none;
-/*
- background-color: $light-green;
-*/
- margin: 0;
- font-size: 10pt;
- text-indent: 0;
- padding: 0;
+ margin: 0;
+ font-size: 10pt;
+ text-indent: 0;
+ padding: 0;
+
li {
padding: 0;
> a {
@@ -86,171 +90,127 @@
> a:link {
@include choose-item;
+ display: block;
+
border-right: {
width: $border-size;
style: solid;
}
- display: block;
&:hover {
- // color: inherit;
- transition: none;
@include choose-hover;
+ transition: none;
}
}
+
h3 {
- font: {
- weight: bold;
- size: 100%;
- }
padding: 0;
margin: 0;
+ font: {
+ weight: bold;
+ size: 100%;
+ }
}
-/*
- &.active {
- text-shadow: none;
- h3 {
- margin-bottom: 2pt;
- padding-bottom: 2pt;
- border-bottom: 1px solid black;
- }
- }
-*/
+
> a {
padding-left: 6pt;
}
+
li > a {
padding-left: 18pt;
}
+
li li > a {
padding-left: 36pt;
}
}
}
+
nav > ul > li > a {
font-weight: bold;
}
fieldset {
- position: relative;
+ position: relative;
border-width: 0;
+
legend {
display: none;
}
- input[type=text], input[type=password] {
+ input[type=text],
+ input[type=password] {
@include input-field;
width: 100%;
}
> form > div {
- position: relative;
- width: 100%;
- margin-top: 4px;
+ position: relative;
+ width: 100%;
+ margin-top: 4px;
padding-right: $button-width
}
> p {
color: $light-green;
}
+
> p.announcement {
color: $nearly-white;
> time {
- display: block;
+ display: block;
font-size: 70%;
}
}
+
hr {
border: none;
border-top: 2px solid $ids-grey-2;
}
+
ul {
- display: block;
- font-size: 80%;
+ display: block;
+ font-size: 80%;
text-align: right;
- > li {
- display: inline;
- &:first-child::after {
- content: ' | ';
- }
- }
- padding: 0;
+ padding: 0;
margin-top: 0;
+
+ > li {
+ display: inline;
+ &:first-child::after {
+ content: ' | ';
+ }
+ }
}
button {
position: absolute;
- // height: 100%;
- top: 0;
- right: 0;
+ top: 0;
+ right: 0;
&::after {
content: $fa-login;
}
}
}
-}
-aside {
- transition: all .3s ease-in-out;
-}
-
-aside.off, aside:not(:focus):not(.active) {
- margin-left: -1 * ($logo-left-distance - ($standard-margin / 2));
- &::after {
- opacity: 1;
- }
+ // Off aside
+ &.off,
+ &:not(:focus):not(.active) {
+ margin-left: -1 * ($logo-left-distance - ($standard-margin / 2));
+ &::after {
+ opacity: 1;
+ }
- > * {
- opacity: 0;
- transition: {
- property: opacity;
- duration: .3s;
+ > * {
+ opacity: 0;
+ transition: {
+ property: opacity;
+ duration: .3s;
+ }
}
}
-}
-aside.off::after {
- display:none;
-}
-
-
-/*
-#sidebar {
- text-shadow: none;
- height: 105%;
- margin-top: -10px;
- background-color: #496000;
- left: 0;
- top: 0;
- &.active {
- box-shadow: 2px 2px 5px darken($dark-green, 15%);
- margin-left: 0px;
- left: 0;
- top: 0;
- }
- &:not(.active) > i.fa-bars {
- opacity: 1;
- cursor: pointer;
- background-color: #496000;
- position: fixed;
- font-size: 16pt;
- width: 16pt;
- height: 17pt;
- padding: 6pt;
- bottom: 0;
- left: 0;
- border-top-right-radius: 5pt;
- }
- dl.info {
- font-size: 9pt;
- padding: 0 10pt;
- > dt {
- font-weight: bold;
- float: left;
- }
- > dd {
- text-align: right;
- }
+ &.off::after {
+ display:none;
}
}
-*/
\ No newline at end of file
diff --git a/dev/scss/util.scss b/dev/scss/util.scss
index 6edd3e7..12fb54b 100644
--- a/dev/scss/util.scss
+++ b/dev/scss/util.scss
@@ -1,281 +1,6 @@
-/**
- * Some variables and mixins for Kalamar,
- * other Sass styles will use.
- */
-
-/**
- * Official IDS colors
- */
-$ids-orange-1: rgb(246, 168, 0);
-$ids-orange-2: rgb(242, 148, 0);
-$ids-grey-1: rgb(135, 136, 138);
-$ids-grey-2: rgb(217, 218, 219);
-$ids-blue-1: rgb( 0, 158, 224); // Pragmatik
-$ids-blue-2: rgb(188, 228, 247); // Pragmatik
-$ids-green-1: rgb( 99, 111, 7); // Grammatik
-$ids-green-2: rgb(227, 232, 163); // Grammatik
-$ids-pink-1: rgb(193, 0, 43); // Lexik
-$ids-pink-2: rgb(250, 243, 222); // Lexik
-
-$black: #333;
-
-/**
- * Orange Colors
- */
-$light-orange: #f4eebb; // #ffe56a;
-$middle-orange: #ffd080;
-$dark-orange: $ids-orange-1; // #ffa500;
-$darker-orange: #ff8000;
-$darkest-orange: #e55d00;
-// $light-orange-2: #f4eebb;, #ffd080;
-// Yellow: #fff48d
-
-/**
- * Green Colors
- */
-$dark-green: $ids-green-1; // #496000;
-// $middle-green: lighten($ids-green-1, 5%);
-$middle-green: lighten($ids-green-1, 9%);
-$light-green: lighten($ids-green-1, 13%); // #7ba400;
-$lightest-green: desaturate(lighten($light-green, 35%), 20%); // #d8e38c;
-$grey-green: darken(desaturate($lightest-green, 25%), 12%); // #bcc387;
-
-/**
- * Blue Colors
- */
-$light-blue: $ids-blue-2;
-$dark-blue: $ids-blue-1;
-$darkest-blue: darken($dark-blue, 40%);
-
-/**
- * Grey Colors
- */
-$middle-grey: $ids-grey-1; // #999;
-// $semilight-grey: #8d8d8d;
-$light-grey: $ids-grey-2; // #ddd;
-$dark-grey: darken($middle-grey, 15%);
-$nearly-white: #fefefe;
-
-/**
- * Red Colors (no IDS relation)
- */
-$middle-red: #c1002b;
-$light-red: lighten($middle-red, 40%);
-$dark-red: darken($middle-red, 40%);
-
-
-/**
- * Basic shadows
- */
-$dark-shadow: 1px 1px 1px rgba(0,0,0,0.3);
-$light-shadow: 1px 1px rgba(255,255,255,0.5);
-
-/**
- * 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: $middle-red;
-$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;
-$item-padding: 3pt 6pt;
-$button-width: 30px;
-$base-padding: 8px;
-$border-size: 2px;
-$result-border-size: 1px;
-$total-results: $light-green;
-
-$left-width: 176px;
-$border-size: 2px;
-$left-distance: $left-width + ($border-size * 2);
-
-/**
- * Path information - relative to css!
- */
-$img-path: '../img';
-$font-path: '../font';
-
-/**
- * Margins
- */
-$standard-margin: 40px;
-$right-distance: $standard-margin;
-$right-view-distance: $standard-margin / 2;
-$logo-left-distance: 230px;
-
-/**
- * Mixin for blind elements
- * (e.g., spans in elements with an icon background)
- */
-@mixin blind {
- position: absolute;
- margin-left: -3000px;
-}
-
-
-/**
- * Chooseable items (default)
- */
-@mixin choose-item {
- color: $choose-color;
- background-color: $choose-bg;
- border-color: $choose-border-color;
- text-shadow: $light-shadow;
-}
-
-/**
- * Chooseable items (mouse over)
- */
-@mixin choose-hover {
- color: $nearly-white;
- text-shadow: none;
- background-color: $dark-orange;
- border-color: $darker-orange;
-}
-
-/**
- * Chooseable items (not available)
- */
-@mixin choose-inactive {
- color: lighten($choose-color, 20%);
- background-color: lighten($choose-bg, 20%);
- border-color: transparent;
- text-shadow: none;
-}
-
-/**
- * Chooseable items (active)
- */
-@mixin choose-active {
- color: $dark-green;
- text-shadow: none;
- background-color: $light-green;
- border-color: $dark-green;
-}
-
-/**
- * Chooseable items (action: remove something)
- */
-@mixin choose-remove {
- color: $nearly-white;
- text-shadow: none;
- background-color: $middle-red;
- border-color: $dark-red;
-}
-
-@mixin cell-info {
- text-overflow: ellipsis;
- white-space: nowrap;
- max-width: 25em;
- overflow: hidden;
- padding: 1px 6px;
- margin: 0px;
-}
-
-/**
- * Mixin for basic color transition
- */
-@mixin color-transition {
- transition: color 0.3s ease 0s;
-}
-
-@mixin input-field {
- outline: none;
- font-size: 11pt;
- border: $border-size solid $nearly-white;
- padding: 2px;
- margin: 0;
-}
-
-/**
- * Mixing for basic text padding
- */
-@mixin standard-text-padding {
- padding-left: .4em;
- padding-right: .4em;
-}
-
-
-/**
- * Mixing for correct box sizing (probably not necessary)
- * DEPRECATED
- */
-@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+ */
-}
-
-/**
- * Noisy background
- */
-@mixin light-noise {
- background-image:url('#{$img-path}/noise.png');
-}
-
-/**
- * Mixin for no-appearance rules
- */
-// https://css-tricks.com/almanac/properties/a/appearance/
-@mixin no-appearance {
- -webkit-appearance:none;
- -moz-appearance:none;
- appearance:none;
-}
-
-/**
-* Mixin for the appearance of inactive elements in the vcinfo panel
-*/
-@mixin vcinfo-inactive{
- background-color: $grey-green;
- color: $dark-green; // $semilight-grey;
- // border-color: $semilight-grey;
- text-shadow: none;
-}
-/**
- * Font Awesome symbol table
- */
-$fa-bars: "\f0c9";
-$fa-extlink: "\f08e";
-$fa-up: "\f0d8";
-$fa-down: "\f0d7";
-$fa-minimize: "\f0d8";
-$fa-close: "\f00d";
-$fa-download: "\f019";
-$fa-info: "\f05a";
-$fa-elipsis: "\f141";
-$fa-previous: "\f0d9";
-$fa-next: "\f0da";
-$fa-search: "\f002";
-$fa-rewrite: "\f040";
-$fa-login: "\f090";
-$fa-logout: "\f08b";
-$fa-tutorial: "\f19d";
-$fa-left-align: "\f036";
-$fa-right-align: "\f038";
-$fa-center-align: "\f037";
-$fa-question: "\f128";
-$fa-checked: "\f046";
-$fa-check: "\f096";
-$fa-code: "\f121";
-$fa-marked: "\f005";
-// $fa-metadata: "\f067";
-$fa-metadata: "\f055";
-$fa-to-query: "\f102";
-$fa-cut: "\f0c4";
-$fa-plugin: "\f1e6";
-$fa-referto: "\f0c5";
-$fa-redo: "\f01e";
+@import "base/colors";
+@import "base/icons";
+@import "base/mixins";
+@import "base/choose";
+@import "base/lengths";
+@import "base/paths";
