slt/template
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Moved dynamic styles to static SCSS using valiables

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
slt/css/components/_index.scss
View File

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

11
slt/css/components/_read-more.scss Normal file
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);
}
}

6
slt/css/core/_core.scss
View File

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

33
slt/css/core/_default-classes.scss
View File

@ -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 {

206
slt/css/dynamic-styles.css.php
View File

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

18
slt/css/layout/_alternating-table.scss Normal file
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;
}
}
}

1
slt/css/layout/_index.scss
View File

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

14
slt/css/layout/_menu.scss
View File

@ -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 {

18
slt/css/layout/_mobile-menu.scss
View File

@ -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 {

4
slt/css/layout/_mobile-table.scss
View File

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

4
slt/css/layout/_page-layout.scss
View File

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

4
slt/css/layout/_side-images.scss
View File

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

46
slt/css/layout/_topmenu.scss
View File

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