Refactoring of style files
Change-Id: I56d3641741f2289bb0f9dbaf641b85a401cf1042
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;
}
}