From 4d9151fb74a56c1bde854d6997fd34c5e8fe75a4 Mon Sep 17 00:00:00 2001 From: Christian Wolf Date: Fri, 15 Apr 2022 08:22:07 +0200 Subject: [PATCH 01/10] Remove obsolete and outdated file --- .buildpath | 5 ---- .project | 28 ------------------- .settings/org.eclipse.php.core.prefs | 2 -- ....eclipse.wst.common.project.facet.core.xml | 7 ----- slt.xml | 21 -------------- 5 files changed, 63 deletions(-) delete mode 100644 .buildpath delete mode 100644 .project delete mode 100644 .settings/org.eclipse.php.core.prefs delete mode 100644 .settings/org.eclipse.wst.common.project.facet.core.xml delete mode 100644 slt.xml diff --git a/.buildpath b/.buildpath deleted file mode 100644 index 7d2c19b..0000000 --- a/.buildpath +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/.project b/.project deleted file mode 100644 index d442fe5..0000000 --- a/.project +++ /dev/null @@ -1,28 +0,0 @@ - - - template - - - - - - org.eclipse.wst.common.project.facet.core.builder - - - - - org.eclipse.wst.validation.validationbuilder - - - - - org.eclipse.dltk.core.scriptbuilder - - - - - - org.eclipse.php.core.PHPNature - org.eclipse.wst.common.project.facet.core.nature - - diff --git a/.settings/org.eclipse.php.core.prefs b/.settings/org.eclipse.php.core.prefs deleted file mode 100644 index 94975cb..0000000 --- a/.settings/org.eclipse.php.core.prefs +++ /dev/null @@ -1,2 +0,0 @@ -eclipse.preferences.version=1 -include_path=0;/template diff --git a/.settings/org.eclipse.wst.common.project.facet.core.xml b/.settings/org.eclipse.wst.common.project.facet.core.xml deleted file mode 100644 index fe725be..0000000 --- a/.settings/org.eclipse.wst.common.project.facet.core.xml +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/slt.xml b/slt.xml deleted file mode 100644 index aae7761..0000000 --- a/slt.xml +++ /dev/null @@ -1,21 +0,0 @@ - - - - Joomla Template - Template for the SLT for the Joomla! CMS - slt - template - 0.0.1 - - - http://localhost/slt-update/slt1.tar - - - Christian Wolf - - - - - \ No newline at end of file From 803add1c45b93b4c2b27ae091f0920a3ce46d230 Mon Sep 17 00:00:00 2001 From: Christian Wolf Date: Fri, 15 Apr 2022 08:23:23 +0200 Subject: [PATCH 02/10] Corrected indendation in XML manifest --- res/templateDetails.tmpl.xml | 56 ++++++++++++++++++------------------ 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/res/templateDetails.tmpl.xml b/res/templateDetails.tmpl.xml index c61ab2d..e8695cd 100644 --- a/res/templateDetails.tmpl.xml +++ b/res/templateDetails.tmpl.xml @@ -50,39 +50,39 @@
- - - - + + + +
- - - - - + + + + +
- - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + +
From e3cb982ee2fd2091558995516767690059c4ed8b Mon Sep 17 00:00:00 2001 From: Christian Wolf Date: Fri, 15 Apr 2022 10:18:39 +0200 Subject: [PATCH 03/10] Enhanced administrator menu description --- res/templateDetails.tmpl.xml | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/res/templateDetails.tmpl.xml b/res/templateDetails.tmpl.xml index e8695cd..3e7f05f 100644 --- a/res/templateDetails.tmpl.xml +++ b/res/templateDetails.tmpl.xml @@ -70,16 +70,20 @@ + + + + From 7bfd331aa1bc87e053a5c9422eb060411e52cd4f Mon Sep 17 00:00:00 2001 From: Christian Wolf Date: Fri, 15 Apr 2022 10:20:18 +0200 Subject: [PATCH 04/10] Added some comments and restructuring language file --- slt/css/dynamic-styles.css.php | 22 ++++++++++++++++++++++ slt/language/en-GB/en-GB.tpl_slt.ini | 10 ++++++---- 2 files changed, 28 insertions(+), 4 deletions(-) diff --git a/slt/css/dynamic-styles.css.php b/slt/css/dynamic-styles.css.php index 2d86ef8..d5e558e 100644 --- a/slt/css/dynamic-styles.css.php +++ b/slt/css/dynamic-styles.css.php @@ -63,6 +63,9 @@ a, a:hover, a:active, a:visited color: ; } +/* + General menu coloring +*/ #mobile-menu li.current > a { background-color: ; color: ; @@ -92,8 +95,14 @@ ul.mod-menu__sub > li > a:focus { background-color: ; color: ; +/* + Mobile menu settings +*/ } +/* + Top menu coloring +*/ #topmenu, #topmenu > ul.mod-menu { background-color: ; @@ -122,6 +131,11 @@ ul.mod-menu__sub > li > a:focus color: ; } + +/* + Side styling +*/ + #left-side-image { background-image: ; @@ -132,6 +146,12 @@ ul.mod-menu__sub > li > a:focus background-image: ; } + +/* + Misc styling +*/ + +/* Striped styling */ .list-striped li:nth-child(odd), .row-striped .row-fluid:nth-child(odd), .table-striped > tbody > tr:nth-child(odd) @@ -177,6 +197,8 @@ table.alternating tr:nth-child(1) { table.alternating tr:nth-child(1) a { color: ; } + +/* Read more */ .readmore > .btn { color: ; diff --git a/slt/language/en-GB/en-GB.tpl_slt.ini b/slt/language/en-GB/en-GB.tpl_slt.ini index fb1bb22..ab43a64 100644 --- a/slt/language/en-GB/en-GB.tpl_slt.ini +++ b/slt/language/en-GB/en-GB.tpl_slt.ini @@ -11,17 +11,19 @@ TPL_SLT_LINK_COLOR_MAIN="Foreground color of links in main text" TPL_SLT_FOREGROUND_COLOR_MAIN="Foreground color of main text" TPL_SLT_BACKGROUND_COLOR_MAIN_TOP="Background color at top of gradient" TPL_SLT_BACKGROUND_COLOR_MAIN_BOTTOM="Background color at bottom of gradient" - -TPL_SLT_BACKGROUND_COLOR_1="Background color of menu" -TPL_SLT_BACKGROUND_COLOR_2="Background color of selected menu entry" -TPL_SLT_BACKGROUND_COLOR_3="Background color of active menu entry" + TPL_SLT_FOREGROUND_COLOR_1="Foreground color of menu" TPL_SLT_FOREGROUND_COLOR_2="Foreground color of selected menu entry" TPL_SLT_FOREGROUND_COLOR_3="Foreground color of active menu entry" + TPL_SLT_LINK_COLOR_1="Foreground link color of menu" TPL_SLT_LINK_COLOR_2="Foreground link color of selected menu entry" TPL_SLT_LINK_COLOR_3="Foreground link color of active menu entry" +TPL_SLT_BACKGROUND_COLOR_1="Background color of menu" +TPL_SLT_BACKGROUND_COLOR_2="Background color of selected menu entry" +TPL_SLT_BACKGROUND_COLOR_3="Background color of active menu entry" + TPL_SLT_BACKGROUND_COLOR_AT_SIDES="Background Color at the Sides" TPL_SLT_LEFT_BACKGROUND_IMAGE="Left background image" TPL_SLT_RIGHT_BACKGROUND_IMAGE="Right background image" From 6441682afe8c1e465bbd66308b433dc0209be6e9 Mon Sep 17 00:00:00 2001 From: Christian Wolf Date: Fri, 15 Apr 2022 10:22:05 +0200 Subject: [PATCH 05/10] Simplified menu coloring This reduces the number of required colors and makes desktop and mobile colors closer. Partly fixes #702 --- slt/css/dynamic-styles.css.php | 35 +++++++++++++++++----------------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/slt/css/dynamic-styles.css.php b/slt/css/dynamic-styles.css.php index d5e558e..e3deb55 100644 --- a/slt/css/dynamic-styles.css.php +++ b/slt/css/dynamic-styles.css.php @@ -58,29 +58,16 @@ a, a:hover, a:active, a:visited color: ; } -#mobile-menu li > a { - background-color: ; - color: ; -} /* General menu coloring */ -#mobile-menu li.current > a { - background-color: ; - color: ; -} ul.mod-menu { background-color: ; color: ; } -#mobile-menu { - background-color: ; - color: ; -} - ul.mod-menu li.current > a, ul.mod-menu li.current:hover > a { @@ -88,21 +75,35 @@ ul.mod-menu li.current:hover > a color: ; } -ul.nav > li > a:hover, -ul.nav > li > a:focus, +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: ; - color: ; + background-color: ; + color: ; +} + + /* Mobile menu settings */ + +#mobile-menu li > a { + background-color: ; + color: ; } +#mobile-menu li.current > a { + background-color: ; + color: ; +} + + /* Top menu coloring */ + #topmenu, #topmenu > ul.mod-menu { background-color: ; From d31cba17b95c1a5a826261f4b9987a963033bd5b Mon Sep 17 00:00:00 2001 From: Christian Wolf Date: Fri, 15 Apr 2022 14:38:33 +0200 Subject: [PATCH 06/10] Definition of effect color --- res/templateDetails.tmpl.xml | 8 ++++++++ slt/css/dynamic-styles.css.php | 21 +++++++++++---------- slt/language/en-GB/en-GB.tpl_slt.ini | 5 +++++ 3 files changed, 24 insertions(+), 10 deletions(-) diff --git a/res/templateDetails.tmpl.xml b/res/templateDetails.tmpl.xml index 3e7f05f..5198688 100644 --- a/res/templateDetails.tmpl.xml +++ b/res/templateDetails.tmpl.xml @@ -64,6 +64,7 @@
+ @@ -83,6 +84,13 @@ + + + + + + + diff --git a/slt/css/dynamic-styles.css.php b/slt/css/dynamic-styles.css.php index e3deb55..589713c 100644 --- a/slt/css/dynamic-styles.css.php +++ b/slt/css/dynamic-styles.css.php @@ -157,32 +157,33 @@ ul.mod-menu__sub > li > a:focus .row-striped .row-fluid:nth-child(odd), .table-striped > tbody > tr:nth-child(odd) { - background-color: ; - color: ; + background-color: ; + color: ; } -.row-striped .row-fluid:nth-child(odd) a, +/*.row-striped .row-fluid:nth-child(odd) a, .table-striped > tbody > tr:nth-child(odd) a { color: ; -} +}*/ .list-striped li:hover, .row-striped .row-fluid:hover, .table-striped > tbody > tr:hover { - background-color: ; - color: ; + background-color: ; + color: ; } -.row-striped .row-fluid:hover a, +/*.row-striped .row-fluid:hover a, .table-striped > tbody > tr:hover a { color: ; -} +}*/ .table-striped > thead > tr { - background-color: ; - color: ; + background-color: ; + color: ; } + table.alternating tr:nth-child(even) { background-color: ; color: ; diff --git a/slt/language/en-GB/en-GB.tpl_slt.ini b/slt/language/en-GB/en-GB.tpl_slt.ini index ab43a64..b0dab41 100644 --- a/slt/language/en-GB/en-GB.tpl_slt.ini +++ b/slt/language/en-GB/en-GB.tpl_slt.ini @@ -24,6 +24,11 @@ TPL_SLT_BACKGROUND_COLOR_1="Background color of menu" TPL_SLT_BACKGROUND_COLOR_2="Background color of selected menu entry" TPL_SLT_BACKGROUND_COLOR_3="Background color of active menu entry" +TPL_SLT_FOREGROUND_EFFECT_COLOR="Foreground effect color" +TPL_SLT_BACKGROUND_EFFECT_COLOR="Background effect color" +TPL_SLT_FOREGROUND_EFFECT_HEADER_COLOR="Foreground effect color for headers" +TPL_SLT_BACKGROUND_EFFECT_HEADER_COLOR="Background effect color for headers" + TPL_SLT_BACKGROUND_COLOR_AT_SIDES="Background Color at the Sides" TPL_SLT_LEFT_BACKGROUND_IMAGE="Left background image" TPL_SLT_RIGHT_BACKGROUND_IMAGE="Right background image" From c20a170dc359827fff7b3ecb77edf9be83ad45a7 Mon Sep 17 00:00:00 2001 From: Christian Wolf Date: Fri, 15 Apr 2022 14:38:50 +0200 Subject: [PATCH 07/10] Adding all style parameters into CSS variables --- slt/css/dynamic-styles.css.php | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/slt/css/dynamic-styles.css.php b/slt/css/dynamic-styles.css.php index 589713c..45e55fd 100644 --- a/slt/css/dynamic-styles.css.php +++ b/slt/css/dynamic-styles.css.php @@ -211,3 +211,33 @@ table.alternating tr:nth-child(1) a { color: ; background-color: ; } + + +:root { + --color-fg-top: ; + --color-bg-top: ; + --color-fg-top-dark: ; + --color-bg-top-dark: ; + --color-fg-top-light: ; + --color-bg-top-light: ; + + --color-main: ; + --color-main-link: ; + + --color-page-bg-top: ; + --color-page-bg-bottom: ; + + --color-menu: ; + --color-menu-background: ; + --color-menu-active: ; + --color-menu-background-active: ; + + --color-effect: ; + --color-effect-background: ; + --color-effect-header: ; + --color-effect-background-header: ; + + --color-side-background: ; + --image-left-side: ; + --image-right-side: ; +} From bc3a0ad36d6e9e8684742bb0852a768fdb79c8a1 Mon Sep 17 00:00:00 2001 From: Christian Wolf Date: Fri, 15 Apr 2022 16:52:10 +0200 Subject: [PATCH 08/10] 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'] . "\")"; + ?> - -#left-menu -{ - display: none; + - -body -{ - background-color: ; -} - -a, a:hover, a:active, a:visited -{ - color: ; -} - -#page-bg -{ - background-image: linear-gradient(to bottom, ); - color: ; -} - - -/* - General menu coloring -*/ - -ul.mod-menu { - background-color: ; - color: ; -} - -ul.mod-menu li.current > a, -ul.mod-menu li.current:hover > a -{ - background-color: ; - color: ; -} - -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: ; - color: ; -} - - -/* - Mobile menu settings -*/ - -#mobile-menu li > a { - background-color: ; - color: ; -} - -#mobile-menu li.current > a { - background-color: ; - color: ; -} - - -/* - Top menu coloring -*/ - -#topmenu, -#topmenu > ul.mod-menu { - background-color: ; - color: ; -} - -#topmenu .mod-menu__sub > li.current - -{ - background-color: ; - color: ; -} - -#topmenu .mod-menu__sub { - background-color: ; - color: ; -} - -#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: ; - color: ; -} - - -/* - Side styling -*/ - -#left-side-image -{ - background-image: ; -} - -#right-side-image -{ - background-image: ; -} - - -/* - 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: ; - color: ; -} -/*.row-striped .row-fluid:nth-child(odd) a, -.table-striped > tbody > tr:nth-child(odd) a -{ - color: ; -}*/ -.list-striped li:hover, -.row-striped .row-fluid:hover, -.table-striped > tbody > tr:hover -{ - background-color: ; - color: ; -} -/*.row-striped .row-fluid:hover a, -.table-striped > tbody > tr:hover a -{ - color: ; -}*/ -.table-striped > thead > tr -{ - background-color: ; - color: ; -} - - -table.alternating tr:nth-child(even) { - background-color: ; - color: ; -} -table.alternating tr:nth-child(even) a -{ - color: ; -} -table.alternating tr:nth-child(1) { - background-color: ; - color: ; -} -table.alternating tr:nth-child(1) a { - color: ; -} - -/* Read more */ -.readmore > .btn -{ - color: ; - background-color: ; -} -.readmore > .btn:hover -{ - color: ; - background-color: ; -} - +?> :root { --color-fg-top: ; @@ -237,7 +62,20 @@ table.alternating tr:nth-child(1) a { --color-effect-header: ; --color-effect-background-header: ; + --color-side-background: ; - --image-left-side: ; - --image-right-side: ; + --image-left-side: ; + --image-right-side: ; +} + + + +: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; From def6d36a4375f8d2c9e64418e6b1f563a5f73676 Mon Sep 17 00:00:00 2001 From: Christian Wolf Date: Fri, 15 Apr 2022 16:54:11 +0200 Subject: [PATCH 09/10] Automatic fixes --- slt/css/components/_read-more.scss | 12 +++++------- slt/css/core/_core.scss | 6 ++++-- slt/css/dynamic-styles.css.php | 16 ++++++---------- slt/css/layout/_alternating-table.scss | 3 ++- slt/css/layout/_menu.scss | 3 +-- slt/css/layout/_mobile-menu.scss | 3 +-- slt/css/layout/_mobile-table.scss | 1 - slt/css/layout/_page-layout.scss | 9 +++++---- slt/css/layout/_side-images.scss | 2 +- slt/css/layout/_topmenu.scss | 5 ++--- 10 files changed, 27 insertions(+), 33 deletions(-) diff --git a/slt/css/components/_read-more.scss b/slt/css/components/_read-more.scss index 47ddf20..6920cbe 100644 --- a/slt/css/components/_read-more.scss +++ b/slt/css/components/_read-more.scss @@ -1,10 +1,8 @@ -.readmore > .btn -{ - color: var(--color-menu, #000); - background-color: var(--color-menu-background, #eee); - - &:hover - { +.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 1f3fdc3..351ffc1 100644 --- a/slt/css/core/_core.scss +++ b/slt/css/core/_core.scss @@ -6,7 +6,6 @@ body { display: flex; flex-direction: column; align-items: center; - background-color: var(--color-side-background, #fff); /* padding: 0px 20px 10px 20px; */ @@ -25,7 +24,10 @@ a { text-decoration: none; } -a, a:hover, a:active, a:visited { +a, +a:hover, +a:active, +a:visited { color: var(--color-main-link, #000); } diff --git a/slt/css/dynamic-styles.css.php b/slt/css/dynamic-styles.css.php index a3db160..0eae0d6 100644 --- a/slt/css/dynamic-styles.css.php +++ b/slt/css/dynamic-styles.css.php @@ -29,14 +29,11 @@ $leftImageValue = empty($params['imgleft']) $rightImageValue = empty($params['imgright']) ? 'none' : "url(\"" . JPATH_BASE . $params['imgright'] . "\")"; - ?> - + :root { --color-fg-top: ; @@ -68,10 +65,9 @@ if ($params['titlepage'] === '1') { --image-right-side: ; } - + :root { --color-effect: blue; diff --git a/slt/css/layout/_alternating-table.scss b/slt/css/layout/_alternating-table.scss index 2426f7c..a6a7d6d 100644 --- a/slt/css/layout/_alternating-table.scss +++ b/slt/css/layout/_alternating-table.scss @@ -2,7 +2,7 @@ tr:nth-child(even) { color: var(--color-effect, #000); background-color: var(--color-effect-background, #ccc); - + a { color: inherit; } @@ -11,6 +11,7 @@ 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/_menu.scss b/slt/css/layout/_menu.scss index dc15358..b267359 100644 --- a/slt/css/layout/_menu.scss +++ b/slt/css/layout/_menu.scss @@ -2,7 +2,6 @@ .nav { font-size: inherit; - color: var(--color-menu, #000); background-color: var(--color-menu-background, #eee); @@ -14,7 +13,7 @@ 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); diff --git a/slt/css/layout/_mobile-menu.scss b/slt/css/layout/_mobile-menu.scss index 8715049..c03c6dd 100644 --- a/slt/css/layout/_mobile-menu.scss +++ b/slt/css/layout/_mobile-menu.scss @@ -28,11 +28,10 @@ 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); diff --git a/slt/css/layout/_mobile-table.scss b/slt/css/layout/_mobile-table.scss index 6ff7f50..7191603 100644 --- a/slt/css/layout/_mobile-table.scss +++ b/slt/css/layout/_mobile-table.scss @@ -16,7 +16,6 @@ table:not(.no-responsive-table) { border-style: none; border-bottom-style: solid; border-width: 1px; - border-color: var(--color-mobile-table-border, #000); &:nth-child(1) { diff --git a/slt/css/layout/_page-layout.scss b/slt/css/layout/_page-layout.scss index 55c387c..0e611a8 100644 --- a/slt/css/layout/_page-layout.scss +++ b/slt/css/layout/_page-layout.scss @@ -36,10 +36,11 @@ #page-bg { display: none; - - background-image: linear-gradient(to bottom, - var(--color-page-bg-top, #eee), - var(--color-page-bg-bottom, #fff)); + background-image: linear-gradient( + to bottom, + var(--color-page-bg-top, #eee), + var(--color-page-bg-bottom, #fff) + ); @include abstract.for-desktop { display: block; diff --git a/slt/css/layout/_side-images.scss b/slt/css/layout/_side-images.scss index ea85b28..a456234 100644 --- a/slt/css/layout/_side-images.scss +++ b/slt/css/layout/_side-images.scss @@ -17,7 +17,7 @@ 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 4cec7e5..1b38a18 100644 --- a/slt/css/layout/_topmenu.scss +++ b/slt/css/layout/_topmenu.scss @@ -57,7 +57,6 @@ flex-flow: row nowrap; justify-content: space-between; align-items: center; - color: var(--color-fg-top, #fff); background-color: var(--color-bg-top, #000); @@ -95,13 +94,13 @@ > .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%); From 1e6b737d3c3e86b8221e12eed755c1548b34f3eb Mon Sep 17 00:00:00 2001 From: Christian Wolf Date: Fri, 15 Apr 2022 17:18:46 +0200 Subject: [PATCH 10/10] Corrected all code styles that need manual intervention --- slt/.stylelintrc.json | 4 ++- slt/css/core/_default-classes.scss | 14 +++++----- slt/css/layout/_menu.scss | 41 ++++++++++++++---------------- slt/css/layout/_mobile-menu.scss | 26 +++++++++---------- slt/css/layout/_topmenu.scss | 21 ++++++++++----- slt/css/style.scss | 8 +++--- 6 files changed, 59 insertions(+), 55 deletions(-) diff --git a/slt/.stylelintrc.json b/slt/.stylelintrc.json index 99e7990..8d9844d 100644 --- a/slt/.stylelintrc.json +++ b/slt/.stylelintrc.json @@ -6,6 +6,8 @@ ], "rules": { "indentation": 4, - "selector-class-pattern": "^([a-z][a-z0-9]*)((-|__)[a-z0-9]+)*$" + "selector-class-pattern": "^([a-z][a-z0-9]*)((-|__)[a-z0-9]+)*$", + "string-quotes": "single", + "declaration-colon-newline-after": null } } diff --git a/slt/css/core/_default-classes.scss b/slt/css/core/_default-classes.scss index eec656c..346362d 100644 --- a/slt/css/core/_default-classes.scss +++ b/slt/css/core/_default-classes.scss @@ -27,6 +27,13 @@ li.row-fluid { // background-color: initial; // } +.table-striped { + > thead > tr { + color: var(--color-effect-header, #000); + background-color: var(--color-effect-background-header, #aaa); + } +} + .list-striped li:nth-child(odd), .row-striped .row-fluid:nth-child(odd), .table-striped > tbody > tr:nth-child(odd) { @@ -41,13 +48,6 @@ li.row-fluid { 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; } diff --git a/slt/css/layout/_menu.scss b/slt/css/layout/_menu.scss index b267359..c2ac6b8 100644 --- a/slt/css/layout/_menu.scss +++ b/slt/css/layout/_menu.scss @@ -1,5 +1,14 @@ @use '../abstract' as abstract; +.nav, +.mod-menu__sub { + padding: 0; + + > li { + display: block; + } +} + .nav { font-size: inherit; color: var(--color-menu, #000); @@ -19,32 +28,20 @@ color: var(--color-menu-active, #000); background-color: var(--color-menu-background-active, #ccc); } -} -.mod-menu__sub { - font-size: small; + .mod-menu__sub { + font-size: small; + padding-left: 10px; + margin-left: 10px; - > li > a { - @include abstract.for-desktop { - display: block; - } - } -} + /* border-left: solid gray 1px; */ -.nav, -.mod-menu__sub { - padding: 0; + /* TODO */ - > li { - display: block; - - > .mod-menu__sub { - padding-left: 10px; - margin-left: 10px; - - /* border-left: solid gray 1px; */ - - /* TODO */ + > li > a { + @include abstract.for-desktop { + display: block; + } } } } diff --git a/slt/css/layout/_mobile-menu.scss b/slt/css/layout/_mobile-menu.scss index c03c6dd..3443de0 100644 --- a/slt/css/layout/_mobile-menu.scss +++ b/slt/css/layout/_mobile-menu.scss @@ -36,6 +36,18 @@ color: var(--color-menu-active, #000); background-color: var(--color-menu-background-active, #ccc); } + + margin-left: 5px; + margin-right: 5px; + + ul { + border: none; + } + + > ul.nav { + margin-left: -5px; + margin-right: -5px; + } } .nav { @@ -50,20 +62,6 @@ flex-direction: column; } - li { - margin-left: 5px; - margin-right: 5px; - } - - li > ul.nav { - margin-left: -5px; - margin-right: -5px; - } - - li ul { - border: none; - } - > ul.mod-menu { background-color: initial; color: initial; diff --git a/slt/css/layout/_topmenu.scss b/slt/css/layout/_topmenu.scss index 1b38a18..57ab572 100644 --- a/slt/css/layout/_topmenu.scss +++ b/slt/css/layout/_topmenu.scss @@ -42,13 +42,6 @@ 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 { @@ -91,6 +84,13 @@ background-color: inherit; } + &:hover, + &:focus, + &.active { + color: var(--color-fg-top-dark, #000); + background-color: var(--color-bg-top-dark, #aaa); + } + > .mod-menu__sub { position: absolute; display: none; @@ -119,6 +119,13 @@ } } + &:hover, + &:focus, + &.active { + color: var(--color-fg-top-dark, #000); + background-color: var(--color-bg-top-dark, #aaa); + } + &:hover > a { text-decoration: none; } diff --git a/slt/css/style.scss b/slt/css/style.scss index 7a1cee1..c7ca936 100644 --- a/slt/css/style.scss +++ b/slt/css/style.scss @@ -1,7 +1,7 @@ -@use "abstract"; -@use "core"; -@use "layout"; -@use "components"; +@use 'abstract'; +@use 'core'; +@use 'layout'; +@use 'components'; /* * Debug