Moved dynamic styles to static SCSS using valiables

slt/css/components/_index.scss

@@ -6,3 +6,4 @@
 @use 'verbandstag';
 @use 'vereine';
 @use 'contact-list';
+@use 'read-more';

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);
+    }
+}

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;

slt/css/core/_default-classes.scss

@@ -21,10 +21,35 @@ li.row-fluid {
     padding-bottom: 0;
 }
 
-.row-striped .row-fluid:nth-child(n),
+// .row-striped .row-fluid:nth-child(n),
-.list-striped li:nth-child(n),
+// .list-striped li:nth-child(n),
-.table-striped tbody > tr:nth-child(n) > td {
+// .table-striped tbody > tr:nth-child(n) > td {
-    background-color: initial;
+//     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 {

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') { ?>
+<?php 
-#left-menu
+if ($params['titlepage'] === '1') {
-{
+	echo "#left-menu { display: none; }\n";
-	display: none;
 }
-<?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-left-side: <?php echo $leftImageValue; ?>;
-	--image-right-side: <?php echo $params['imgright']; ?>;
+	--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;
 }

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;
+        }
+    }
+}

slt/css/layout/_index.scss

@@ -9,3 +9,4 @@
 @use 'main-content';
 @use 'blog';
 @use 'mobile-table';
+@use 'alternating-table';

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 {

slt/css/layout/_mobile-menu.scss

@@ -23,10 +23,20 @@
         padding-right: 0;
     }
 
-    li > a {
+    li {
-        margin: 5px 0;
+        > a {
-        padding: 10px;
+            margin: 5px 0;
-        display: block;
+            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 {

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;
             }
 

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;

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);
     }
 }

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;