Merge branch '21-make-primary-color-green-like-on-website' into 'master'

Resolve "Make primary color green (like on website)"

Closes #21

See merge request !13

scenarios/xslt/edxml2html/css/styles.css

 :root {
-    --sub-blue: #003967;
-    --sub-blue-light: #aeb7c6;
-    --sub-blue-light-bg: rgba(174, 183, 198, 0.185);
+    /*
+    --theme-color: #003967;
+    --theme-color-light: #aeb7c6;
+    --theme-color-light-bg: rgba(174, 183, 198, 0.185);
+    */
+    --theme-color: #266d4d;
+    --theme-color-light: #adbac7;
+    --theme-color-light-bg: rgba(173, 186, 199, 0.185);
+
     --tech-font: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     --mono-font: monospace;
 }
@@ -15,7 +21,7 @@
 
 .column-anchor,
 .anchor {
-    color: var(--sub-blue);
+    color: var(--theme-color);
 }
 
 
@@ -67,7 +73,7 @@ div.column {
     text-align: right;
     margin-right: 1em;
     padding: 0 .3em;
-    color: var(--sub-blue-light);
+    color: var(--theme-color-light);
 }
 
 .line-nr.calculated {
@@ -76,12 +82,12 @@ div.column {
 }
 
 .line:hover .line-nr {
-    background-color: var(--sub-blue-light);
-    color: var(--sub-blue);
+    background-color: var(--theme-color-light);
+    color: var(--theme-color);
 }
 
 .line:hover {
-    background-color: var(--sub-blue-light-bg);
+    background-color: var(--theme-color-light-bg);
 }
 
 
@@ -101,7 +107,7 @@ span.seg{
 span.seg:hover{
     /* background-color: rgba(165, 42, 42, 0.150); */
     /* background-color: rgba(0, 57, 103, 0.150); */
-    background-color: var(--sub-blue);
+    background-color: var(--theme-color);
     color: white !important;
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
@@ -115,7 +121,7 @@ hr.metamark-line::before {
     background: inherit;
     font-family: var(--tech-font);
     padding: 0 .3em 0 0;
-    color: var(--sub-blue);
+    color: var(--theme-color);
 }
 
 hr.metamark-line::before {
@@ -140,13 +146,13 @@ hr.metamark-line {
 
 hr.metamark-line.line {
     height:4px;
-    border-top:1px solid var(--sub-blue);
+    border-top:1px solid var(--theme-color);
 }
 
 hr.metamark-line.doubleLine {
     height:4px;
-    border-top:1px solid var(--sub-blue);
-    border-bottom:1px solid var(--sub-blue);
+    border-top:1px solid var(--theme-color);
+    border-bottom:1px solid var(--theme-color);
 }
 
 
@@ -166,7 +172,7 @@ hr.metamark-line.doubleLine {
 }
 
 .section-tab + .section-tab {
-  border-left: solid 1px var(--sub-blue-light);
+  border-left: solid 1px var(--theme-color-light);
   padding-left: 5px;
 }
 
@@ -181,7 +187,7 @@ hr.metamark-line.doubleLine {
 }
 
 .philology .unit:hover {
-    background-color: var(--sub-blue-light-bg);
+    background-color: var(--theme-color-light-bg);
 }
 
 
@@ -214,7 +220,7 @@ hr.metamark-line.doubleLine {
 
 /*----------------------------------{ LINEBREAKS }--------------------------------*/
 .lb {
-    color: var(--sub-blue-light);
+    color: var(--theme-color-light);
     font-family: var(--tech-font);
     font-size: small;
     line-height: 1.5;
@@ -241,7 +247,7 @@ hr.metamark-line.doubleLine {
 }
 
 .item {
-    border: 0px solid var(--sub-blue);
+    border: 0px solid var(--theme-color);
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     border-radius: 3px;
@@ -279,7 +285,7 @@ hr.metamark-line.doubleLine {
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     border-radius: 3px;
-    background-color: var(--sub-blue);
+    background-color: var(--theme-color);
     color: white;
 }
 
@@ -289,8 +295,8 @@ hr.metamark-line.doubleLine {
 }
 
 .item .annotation > span:hover {
-    background-color: var(--sub-blue-light);
-    color: var(--sub-blue);
+    background-color: var(--theme-color-light);
+    color: var(--theme-color);
 }
 
 /*----- Kommentare als tooltip -----*/
@@ -311,7 +317,7 @@ div:has(> .philology.section) {
     -moz-border-radius: 3px;
     -ms-overflow-style: none; /* Internet Explorer 10+ */
     -webkit-border-radius: 3px;
-    background-color: var(--sub-blue);
+    background-color: var(--theme-color);
     border-radius: 3px;
     color: white;
     font-size: small;
@@ -334,7 +340,7 @@ div:has(> .philology.section) {
 /*----------------------------------{ ITEMS: WORDS }--------------------------------*/
 
 .item.w:hover {
-    background-color: var(--sub-blue);
+    background-color: var(--theme-color);
     color: white;
 }