Moved dynamic styles to static SCSS using valiables

This commit is contained in:
Christian Wolf 2022-04-15 16:52:10 +02:00
parent c20a170dc3
commit bc3a0ad36d
13 changed files with 158 additions and 208 deletions

View File

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

View File

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

View File

@ -7,6 +7,8 @@ body {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
background-color: var(--color-side-background, #fff);
/* padding: 0px 20px 10px 20px; */ /* padding: 0px 20px 10px 20px; */
padding: 0; padding: 0;
font-size: 12pt; font-size: 12pt;
@ -23,6 +25,10 @@ a {
text-decoration: none; text-decoration: none;
} }
a, a:hover, a:active, a:visited {
color: var(--color-main-link, #000);
}
p { p {
text-align: justify; text-align: justify;
hyphens: auto; hyphens: auto;

View File

@ -21,10 +21,35 @@ li.row-fluid {
padding-bottom: 0; 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 { .well {

View File

@ -25,193 +25,18 @@ header("Cache-Control: must-revalidate, max-age=$offset, public");
$leftImageValue = empty($params['imgleft']) $leftImageValue = empty($params['imgleft'])
? 'none' ? 'none'
: "url(\"" . JPATH_BASE . '/' . $params['imgleft'] . "\")"; : "url(\"" . JPATH_BASE . $params['imgleft'] . "\")";
$rightImageValue = empty($params['imgright']) $rightImageValue = empty($params['imgright'])
? 'none' ? '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 { :root {
--color-fg-top: <?php echo $params['topfgcolor1']; ?>; --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-header: <?php echo $params['fgeffecthdr']; ?>;
--color-effect-background-header: <?php echo $params['bgeffecthdr']; ?>; --color-effect-background-header: <?php echo $params['bgeffecthdr']; ?>;
--color-side-background: <?php echo $params['bgcolorside']; ?>; --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;
} }

View File

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

View File

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

View File

@ -3,9 +3,23 @@
.nav { .nav {
font-size: inherit; font-size: inherit;
color: var(--color-menu, #000);
background-color: var(--color-menu-background, #eee);
a { a {
color: inherit; 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 { .mod-menu__sub {

View File

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

View File

@ -17,7 +17,9 @@ table:not(.no-responsive-table) {
border-bottom-style: solid; border-bottom-style: solid;
border-width: 1px; border-width: 1px;
&:nth-child(2) { border-color: var(--color-mobile-table-border, #000);
&:nth-child(1) {
border-top-style: solid; border-top-style: solid;
} }

View File

@ -37,6 +37,10 @@
#page-bg { #page-bg {
display: none; display: none;
background-image: linear-gradient(to bottom,
var(--color-page-bg-top, #eee),
var(--color-page-bg-bottom, #fff));
@include abstract.for-desktop { @include abstract.for-desktop {
display: block; display: block;
position: fixed; position: fixed;

View File

@ -15,9 +15,11 @@
#left-side-image { #left-side-image {
left: 0; left: 0;
background-image: var(--image-left-side, none);
} }
#right-side-image { #right-side-image {
right: 0; right: 0;
background-image: var(--image-right-side, none);
} }
} }

View File

@ -1,5 +1,17 @@
@use '../abstract/' as abstract; @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 { #topmenu {
display: none; display: none;
font-weight: bold; font-weight: bold;
@ -30,6 +42,13 @@
padding: 0; padding: 0;
border-style: none; border-style: none;
height: 100%; height: 100%;
&:hover,
&:focus,
&.active {
color: var(--color-fg-top-dark, #000);
background-color: var(--color-bg-top-dark, #aaa);
}
} }
.nav { .nav {
@ -39,6 +58,9 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
color: var(--color-fg-top, #fff);
background-color: var(--color-bg-top, #000);
@include abstract.for-desktop { @include abstract.for-desktop {
padding: 0 10px; padding: 0 10px;
margin: 0; margin: 0;
@ -80,6 +102,10 @@
padding: 0; 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 { > li {
@include abstract.for-desktop { @include abstract.for-desktop {
padding: 0 5px; padding: 0 5px;
@ -97,15 +123,16 @@
&:hover > a { &:hover > a {
text-decoration: none; text-decoration: none;
} }
&.current {
color: var(--color-fg-top-dark, #000);
background-color: var(--color-bg-top-dark, #aaa);
}
} }
} }
&:hover > .mod-menu__sub { &:hover > .mod-menu__sub {
display: block; 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 { a.facebook {
img { img {
display: none; display: none;