From bc3a0ad36d6e9e8684742bb0852a768fdb79c8a1 Mon Sep 17 00:00:00 2001
From: Christian Wolf <git@christianwolf.email>
Date: Fri, 15 Apr 2022 16:52:10 +0200
Subject: [PATCH] Moved dynamic styles to static SCSS using valiables

---
 slt/css/components/_index.scss         |   1 +
 slt/css/components/_read-more.scss     |  11 ++
 slt/css/core/_core.scss                |   6 +
 slt/css/core/_default-classes.scss     |  33 +++-
 slt/css/dynamic-styles.css.php         | 206 +++----------------------
 slt/css/layout/_alternating-table.scss |  18 +++
 slt/css/layout/_index.scss             |   1 +
 slt/css/layout/_menu.scss              |  14 ++
 slt/css/layout/_mobile-menu.scss       |  18 ++-
 slt/css/layout/_mobile-table.scss      |   4 +-
 slt/css/layout/_page-layout.scss       |   4 +
 slt/css/layout/_side-images.scss       |   4 +-
 slt/css/layout/_topmenu.scss           |  46 ++++--
 13 files changed, 158 insertions(+), 208 deletions(-)
 create mode 100644 slt/css/components/_read-more.scss
 create mode 100644 slt/css/layout/_alternating-table.scss

diff --git a/slt/css/components/_index.scss b/slt/css/components/_index.scss
index 83e9d0a..4fca922 100644
--- a/slt/css/components/_index.scss
+++ b/slt/css/components/_index.scss
@@ -6,3 +6,4 @@
 @use 'verbandstag';
 @use 'vereine';
 @use 'contact-list';
+@use 'read-more';
diff --git a/slt/css/components/_read-more.scss b/slt/css/components/_read-more.scss
new file mode 100644
index 0000000..47ddf20
--- /dev/null
+++ b/slt/css/components/_read-more.scss
@@ -0,0 +1,11 @@
+.readmore > .btn
+{
+	color: var(--color-menu, #000);
+	background-color: var(--color-menu-background, #eee);
+    
+    &:hover
+    {
+        color: var(--color-menu-active, #000);
+        background-color: var(--color-menu-background-active, #ccc);
+    }
+}
diff --git a/slt/css/core/_core.scss b/slt/css/core/_core.scss
index 892bd3c..1f3fdc3 100644
--- a/slt/css/core/_core.scss
+++ b/slt/css/core/_core.scss
@@ -7,6 +7,8 @@ body {
     flex-direction: column;
     align-items: center;
 
+    background-color: var(--color-side-background, #fff);
+
     /*    padding: 0px 20px 10px 20px; */
     padding: 0;
     font-size: 12pt;
@@ -23,6 +25,10 @@ a {
     text-decoration: none;
 }
 
+a, a:hover, a:active, a:visited {
+    color: var(--color-main-link, #000);
+}
+
 p {
     text-align: justify;
     hyphens: auto;
diff --git a/slt/css/core/_default-classes.scss b/slt/css/core/_default-classes.scss
index 4dbbf78..eec656c 100644
--- a/slt/css/core/_default-classes.scss
+++ b/slt/css/core/_default-classes.scss
@@ -21,10 +21,35 @@ li.row-fluid {
     padding-bottom: 0;
 }
 
-.row-striped .row-fluid:nth-child(n),
-.list-striped li:nth-child(n),
-.table-striped tbody > tr:nth-child(n) > td {
-    background-color: initial;
+// .row-striped .row-fluid:nth-child(n),
+// .list-striped li:nth-child(n),
+// .table-striped tbody > tr:nth-child(n) > td {
+//     background-color: initial;
+// }
+
+.list-striped li:nth-child(odd),
+.row-striped .row-fluid:nth-child(odd),
+.table-striped > tbody > tr:nth-child(odd) {
+    color: var(--color-effect, #000);
+    background-color: var(--color-effect-background, #ccc);
+}
+
+.list-striped li:hover,
+.row-striped .row-fluid:hover,
+.table-striped > tbody > tr:hover {
+    color: var(--color-effect-header, #000);
+    background-color: var(--color-effect-background-header, #aaa);
+}
+
+.table-striped {
+    > thead > tr {
+        color: var(--color-effect-header, #000);
+        background-color: var(--color-effect-background-header, #aaa);
+    }
+}
+
+.table-hover > tbody > tr:hover > * {
+    color: unset;
 }
 
 .well {
diff --git a/slt/css/dynamic-styles.css.php b/slt/css/dynamic-styles.css.php
index 45e55fd..a3db160 100644
--- a/slt/css/dynamic-styles.css.php
+++ b/slt/css/dynamic-styles.css.php
@@ -25,193 +25,18 @@ header("Cache-Control: must-revalidate, max-age=$offset, public");
 
 $leftImageValue = empty($params['imgleft'])
     ? 'none'
-    : "url(\"" . JPATH_BASE . '/' . $params['imgleft'] . "\")";
+    : "url(\"" . JPATH_BASE . $params['imgleft'] . "\")";
 $rightImageValue = empty($params['imgright'])
     ? 'none'
-    : "url(\"" . JPATH_BASE . '/' . $params['imgright'] . "\")";
+    : "url(\"" . JPATH_BASE . $params['imgright'] . "\")";
+
 ?>
 
-<?php if ($params['titlepage'] === '1') { ?>
-#left-menu
-{
-	display: none;
+<?php 
+if ($params['titlepage'] === '1') {
+	echo "#left-menu { display: none; }\n";
 }
-<?php } ?>
-
-body
-{
-	background-color: <?php echo $params['bgcolorside']; ?>;
-}
-
-a, a:hover, a:active, a:visited
-{
-	color: <?php echo $params['mainlicolor']; ?>;
-}
-
-#page-bg
-{
-	background-image: linear-gradient(to bottom, <?php echo $params[
-     'mainbgcolortop'
- ] .
-     ',' .
-     $params['mainbgcolorbot']; ?>);
-	color: <?php echo $params['mainfgcolor']; ?>;
-}
-
-
-/*
-	General menu coloring
-*/
-
-ul.mod-menu {
-	background-color: <?php echo $params['bgcolor1']; ?>;
-	color: <?php echo $params['fgcolor1']; ?>;
-}
-
-ul.mod-menu li.current > a,
-ul.mod-menu li.current:hover > a
-{
-	background-color: <?php echo $params['bgcolor2']; ?>;
-	color: <?php echo $params['licolor2']; ?>;
-}
-
-ul.mod-menu > li > a:hover,
-ul.mod-menu > li > a:focus,
-ul.mod-menu__sub > li > a:hover,
-ul.mod-menu__sub > li > a:focus
-{
-	background-color: <?php echo $params['bgcolor2']; ?>;
-	color: <?php echo $params['licolor2']; ?>;
-}
-
-
-/*
-	Mobile menu settings
-*/
-
-#mobile-menu li > a {
-	background-color: <?php echo $params['bgcolor1']; ?>;
-    color: <?php echo $params['licolor1']; ?>;
-}
-
-#mobile-menu li.current > a {
-	background-color: <?php echo $params['bgcolor2']; ?>;
-    color: <?php echo $params['licolor2']; ?>;
-}
-
-
-/*
-	Top menu coloring
-*/
-
-#topmenu,
-#topmenu > ul.mod-menu {
-  background-color: <?php echo $params['topbgcolor1']; ?>;
-  color: <?php echo $params['topfgcolor1']; ?>;
-}
-
-#topmenu .mod-menu__sub > li.current
-
-{
-  background-color: <?php echo $params['topbgcolor2']; ?>;
-  color: <?php echo $params['topfgcolor2']; ?>;
-}
-
-#topmenu .mod-menu__sub {
-  background-color: <?php echo $params['topbgcolor3']; ?>;
-  color: <?php echo $params['topfgcolor3']; ?>;
-}
-
-#topmenu .nav > li:hover,
-#topmenu .nav > li:focus,
-#topmenu .nav > li.active,
-#topmenu .mod-menu__sub > li:hover,
-#topmenu .mod-menu__sub > li:focus
-{
-  background-color: <?php echo $params['topbgcolor2']; ?>;
-  color: <?php echo $params['topfgcolor2']; ?>;
-}
-
-
-/*
-	Side styling
-*/
-
-#left-side-image
-{
-	background-image: <?php echo $leftImageValue; ?>;
-}
-
-#right-side-image
-{
-	background-image: <?php echo $rightImageValue; ?>;
-}
-
-
-/*
-	Misc styling
-*/
-
-/* Striped styling */
-.list-striped li:nth-child(odd),
-.row-striped .row-fluid:nth-child(odd),
-.table-striped > tbody > tr:nth-child(odd)
-{
-	background-color: <?php echo $params['bgeffect']; ?>;
-	color: <?php echo $params['fgeffect']; ?>;
-}
-/*.row-striped .row-fluid:nth-child(odd) a,
-.table-striped > tbody > tr:nth-child(odd) a
-{
-	color: <?php echo $params['licolor2']; ?>;
-}*/
-.list-striped li:hover,
-.row-striped .row-fluid:hover,
-.table-striped > tbody > tr:hover
-{
-	background-color: <?php echo $params['bgeffecthdr']; ?>;
-	color: <?php echo $params['fgeffecthdr']; ?>;
-}
-/*.row-striped .row-fluid:hover a,
-.table-striped > tbody > tr:hover a
-{
-	color: <?php echo $params['licolor3']; ?>;
-}*/
-.table-striped > thead > tr
-{
-	background-color: <?php echo $params['bgeffecthdr']; ?>;
-	color: <?php echo $params['fgeffecthdr']; ?>;
-}
-
-
-table.alternating tr:nth-child(even) {
-	background-color: <?php echo $params['bgcolor2']; ?>;
-	color: <?php echo $params['fgcolor2']; ?>;
-}
-table.alternating tr:nth-child(even) a
-{
-	color: <?php echo $params['licolor2']; ?>;
-}
-table.alternating tr:nth-child(1) {
-	background-color: <?php echo $params['bgcolor3']; ?>;
-	color: <?php echo $params['fgcolor3']; ?>;
-}
-table.alternating tr:nth-child(1) a {
-	color: <?php echo $params['licolor3']; ?>;
-}
-
-/* Read more */
-.readmore > .btn
-{
-	color: <?php echo $params['fgcolor1']; ?>;
-	background-color: <?php echo $params['bgcolor1']; ?>;
-}
-.readmore > .btn:hover
-{
-	color: <?php echo $params['fgcolor3']; ?>;
-	background-color: <?php echo $params['bgcolor3']; ?>;
-}
-
+?>
 
 :root {
 	--color-fg-top: <?php echo $params['topfgcolor1']; ?>;
@@ -237,7 +62,20 @@ table.alternating tr:nth-child(1) a {
 	--color-effect-header: <?php echo $params['fgeffecthdr']; ?>;
 	--color-effect-background-header: <?php echo $params['bgeffecthdr']; ?>;
 
+	
 	--color-side-background: <?php echo $params['bgcolorside']; ?>;
-	--image-left-side: <?php echo $params['imgleft']; ?>;
-	--image-right-side: <?php echo $params['imgright']; ?>;
+	--image-left-side: <?php echo $leftImageValue; ?>;
+	--image-right-side: <?php echo $rightImageValue; ?>;
+}
+
+<?php
+// Stop execution here, the rest is for debugging
+exit();
+?>
+
+:root {
+	--color-effect: blue;
+	--color-effect-background: red;
+	--color-effect-header: yellow;
+	--color-effect-background-header: green;
 }
diff --git a/slt/css/layout/_alternating-table.scss b/slt/css/layout/_alternating-table.scss
new file mode 100644
index 0000000..2426f7c
--- /dev/null
+++ b/slt/css/layout/_alternating-table.scss
@@ -0,0 +1,18 @@
+.alternating {
+    tr:nth-child(even) {
+        color: var(--color-effect, #000);
+        background-color: var(--color-effect-background, #ccc);
+        
+        a {
+            color: inherit;
+        }
+    }
+
+    tr:nth-child(1) {
+        color: var(--color-effect-header, #000);
+        background-color: var(--color-effect-background-header, #aaa);
+        a {
+            color: inherit;
+        }
+    }
+}
diff --git a/slt/css/layout/_index.scss b/slt/css/layout/_index.scss
index 0480bf5..3ab0501 100644
--- a/slt/css/layout/_index.scss
+++ b/slt/css/layout/_index.scss
@@ -9,3 +9,4 @@
 @use 'main-content';
 @use 'blog';
 @use 'mobile-table';
+@use 'alternating-table';
diff --git a/slt/css/layout/_menu.scss b/slt/css/layout/_menu.scss
index a2170fb..dc15358 100644
--- a/slt/css/layout/_menu.scss
+++ b/slt/css/layout/_menu.scss
@@ -3,9 +3,23 @@
 .nav {
     font-size: inherit;
 
+    color: var(--color-menu, #000);
+    background-color: var(--color-menu-background, #eee);
+
     a {
         color: inherit;
     }
+
+    li.current > a {
+        color: var(--color-menu-active, #000);
+        background-color: var(--color-menu-background-active, #ccc);
+    }
+    
+    li > a:hover,
+    li > a:focus {
+        color: var(--color-menu-active, #000);
+        background-color: var(--color-menu-background-active, #ccc);
+    }
 }
 
 .mod-menu__sub {
diff --git a/slt/css/layout/_mobile-menu.scss b/slt/css/layout/_mobile-menu.scss
index 681a904..8715049 100644
--- a/slt/css/layout/_mobile-menu.scss
+++ b/slt/css/layout/_mobile-menu.scss
@@ -23,10 +23,20 @@
         padding-right: 0;
     }
 
-    li > a {
-        margin: 5px 0;
-        padding: 10px;
-        display: block;
+    li {
+        > a {
+            margin: 5px 0;
+            padding: 10px;
+            display: block;
+
+            color: var(--color-menu, #000);
+            background-color: var(--color-menu-background, #eee);
+        }
+        
+        &.current > a {
+            color: var(--color-menu-active, #000);
+            background-color: var(--color-menu-background-active, #ccc);
+        }
     }
 
     .nav {
diff --git a/slt/css/layout/_mobile-table.scss b/slt/css/layout/_mobile-table.scss
index 0344e46..6ff7f50 100644
--- a/slt/css/layout/_mobile-table.scss
+++ b/slt/css/layout/_mobile-table.scss
@@ -17,7 +17,9 @@ table:not(.no-responsive-table) {
             border-bottom-style: solid;
             border-width: 1px;
 
-            &:nth-child(2) {
+            border-color: var(--color-mobile-table-border, #000);
+
+            &:nth-child(1) {
                 border-top-style: solid;
             }
 
diff --git a/slt/css/layout/_page-layout.scss b/slt/css/layout/_page-layout.scss
index b4f4e32..55c387c 100644
--- a/slt/css/layout/_page-layout.scss
+++ b/slt/css/layout/_page-layout.scss
@@ -37,6 +37,10 @@
 #page-bg {
     display: none;
 
+    background-image: linear-gradient(to bottom, 
+        var(--color-page-bg-top, #eee), 
+        var(--color-page-bg-bottom, #fff));
+
     @include abstract.for-desktop {
         display: block;
         position: fixed;
diff --git a/slt/css/layout/_side-images.scss b/slt/css/layout/_side-images.scss
index ea0854b..ea85b28 100644
--- a/slt/css/layout/_side-images.scss
+++ b/slt/css/layout/_side-images.scss
@@ -15,9 +15,11 @@
 
     #left-side-image {
         left: 0;
+        background-image: var(--image-left-side, none);
     }
-
+    
     #right-side-image {
         right: 0;
+        background-image: var(--image-right-side, none);
     }
 }
diff --git a/slt/css/layout/_topmenu.scss b/slt/css/layout/_topmenu.scss
index db78910..4cec7e5 100644
--- a/slt/css/layout/_topmenu.scss
+++ b/slt/css/layout/_topmenu.scss
@@ -1,5 +1,17 @@
 @use '../abstract/' as abstract;
 
+#topmenu-div {
+    @include abstract.for-desktop {
+        position: sticky;
+        top: 0;
+        width: 100%;
+        z-index: 1;
+    }
+
+    color: var(--color-fg-top, #fff);
+    background-color: var(--color-bg-top, #000);
+}
+
 #topmenu {
     display: none;
     font-weight: bold;
@@ -30,6 +42,13 @@
         padding: 0;
         border-style: none;
         height: 100%;
+
+        &:hover,
+        &:focus,
+        &.active {
+            color: var(--color-fg-top-dark, #000);
+            background-color: var(--color-bg-top-dark, #aaa);
+        }
     }
 
     .nav {
@@ -39,6 +58,9 @@
         justify-content: space-between;
         align-items: center;
 
+        color: var(--color-fg-top, #fff);
+        background-color: var(--color-bg-top, #000);
+
         @include abstract.for-desktop {
             padding: 0 10px;
             margin: 0;
@@ -73,12 +95,16 @@
             > .mod-menu__sub {
                 position: absolute;
                 display: none;
-
+                
                 @include abstract.for-desktop {
                     margin: 0 20px 10px 0;
                     border: none;
                     padding: 0;
                 }
+                
+                color: var(--color-fg-top-light, #000);
+                background-color: var(--color-bg-top-light, #ddd);
+                box-shadow: 3px 5px 5px 2px rgb(0 0 0 / 50%);
 
                 > li {
                     @include abstract.for-desktop {
@@ -97,15 +123,16 @@
                     &:hover > a {
                         text-decoration: none;
                     }
+
+                    &.current {
+                        color: var(--color-fg-top-dark, #000);
+                        background-color: var(--color-bg-top-dark, #aaa);
+                    }
                 }
             }
 
             &:hover > .mod-menu__sub {
                 display: block;
-
-                @include abstract.for-desktop {
-                    box-shadow: 3px 5px 5px 2px rgb(0 0 0 / 50%);
-                }
             }
         }
     }
@@ -152,15 +179,6 @@
     }
 }
 
-#topmenu-div {
-    @include abstract.for-desktop {
-        position: sticky;
-        top: 0;
-        width: 100%;
-        z-index: 1;
-    }
-}
-
 a.facebook {
     img {
         display: none;