Moved dynamic styles to static SCSS using valiables

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

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