tsc-vfl/hugo-page
3
0
Fork 1
Code Issues 8 Pull Requests Actions Packages Projects 1 Releases 2 Wiki Activity

Usage of CSS variables for color distribution

Browse Source
This commit is contained in:
Christian Wolf
2025-12-23 15:03:34 +01:00
parent c21d9b401a
commit 9a8a202188
3 changed files with 102 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
themes/tsc_vfl/assets/css/_colors.scss
View File

@@ -1,18 +1,55 @@
@use "sass:color";
$color-blue: #193f78;
// $color-blue replaced by a color palette
$palette-primary: #193f78;
$color-blue-light: color.adjust($color-blue, $lightness: 40%);
$color-blue-super-light: color.adjust($color-blue, $lightness: 60%);
$color-blue-thin: color.adjust($color-blue, $lightness: 65%);
$color-blue-super-thin: color.adjust($color-blue, $lightness: 69%);
// Lighter variants of the primary color
// $color-blue-light
$palette-primary-10: color.adjust($palette-primary, $lightness: 40%);
// $color-blue-super-light
$palette-primary-20: color.adjust($palette-primary, $lightness: 60%);
// $color-blue-thin
$palette-primary-30: color.adjust($palette-primary, $lightness: 65%);
// $color-blue-super-thin
$palette-primary-40: color.adjust($palette-primary, $lightness: 69%);
$color-background-mobile-menu: #f5f5f5;
$color-background-mobile-menu: $color-blue-super-thin;
$color-background-mobile-menu-header: #e0e0e0;
$color-background-mobile-menu-header: $color-blue-super-light;
$color-hor-line: $color-blue-light;
$color-vh-vorne: #ddcb55;
$color-vh-mitte: #c98879;
$color-vh-hinten: #0082c9;
$color-img-dots-gray: #eee;
$color-img-dots-dark-blue: $palette-primary;
$color-img-dots-light-blue: $palette-primary-10;
:root {
--color-bg: #ececec;
--color-wrapper-bg: #fcfcfc;
--color-fg: black;
--color-fg-inverted: white;
// Former $color-blue
--color-fg-primary: #{$palette-primary};
// Former $color-blue-thin
--color-bg-primary: #{$palette-primary-30};
// Mobile menu colors
--color-bg-mobile-menu-header: #{$palette-primary-20};
--color-bg-mobile-menu: #{$palette-primary-40};
--color-hor-line: #{$palette-primary-10};
--color-tr-a: #dedede;
--color-tr-b: #f7f7f7;
--color-th-bg: #{$palette-primary};
--color-th-fg: white;
--color-dots-gray: #{$color-img-dots-gray};
--color-dots-dark-blue: #{$color-img-dots-dark-blue};
--color-dots-light-blue: #{$color-img-dots-light-blue};
// Overlay for image galleries
--color-overlay-bg: #d3d3d3B0;
--color-overlay-bg-inner: white;
}

12
themes/tsc_vfl/assets/css/_schedule.scss
View File

@@ -70,23 +70,23 @@
box-sizing: border-box;
overflow: hidden;
--fg-color: black;
&.room-vorne {
--bg-color: var(--color-vhvorne);
--bg-color: var(--color-bg-vhvorne);
--fg-color: var(--color-fg-vhvorne);
left: 2.5%;
}
&.room-mitte {
--bg-color: var(--color-vhmitte);
--bg-color: var(--color-bg-vhmitte);
--fg-color: var(--color-fg-vhmitte);
left: 35%
}
&.room-hinten {
--bg-color: var(--color-vhhinten);
--fg-color: white;
--bg-color: var(--color-bg-vhhinten);
--fg-color: var(--color-fg-vhhinten);
left: 67.5%;
}

91
themes/tsc_vfl/assets/css/main.scss
View File

@@ -13,12 +13,12 @@ $left-menu-width: 180px;
@mixin menu-style() {
font-family: 'Open Sans Condensed', sans-serif;
color: $color-blue;
color: var(--color-fg-primary);
text-decoration: none;
&.active, &:hover {
background-color: $color-blue;
color: white
background-color: var(--color-fg-primary);
color: var(--color-fg-inverted);
}
}
@@ -28,13 +28,13 @@ $left-menu-width: 180px;
body {
padding: 0;
margin: 0;
background-color: #ececec;
background-color: var(--color-bg);
font: 90% 'Open Sans', sans-serif;
height: 100vh;
}
h1, h2, h3, h4, h5, h6 {
color: $color-blue;
color: var(--color-fg-primary);
font-family: 'Droid Serif',serif;
font-weight: normal;
}
@@ -49,7 +49,7 @@ h1 {
min-height: 100.5vh;
max-width: 1280px;
margin: auto;
background-color: #fcfcfc;
background-color: var(--color-wrapper-bg);
overflow: auto;
@@ -72,7 +72,7 @@ h1 {
.announcements {
margin-top: 20px;
background-color: $color-blue-thin;
background-color: var(--color-bg-primary);
.entry {
margin: 25px 0;
@@ -91,7 +91,7 @@ h1 {
}
a {
color: black;
color: var(--color-fg);
}
}
}
@@ -110,12 +110,12 @@ h1 {
justify-content: center;
padding: 0 15px;
font: 1.5em 'Open Sans Condensed', sans-serif;
color: black;
background-color: $color-blue-thin;
color: var(--color-fg);
background-color: var(--color-bg-primary);
&.active, &:hover {
background-color: $color-blue;
color: white;
background-color: var(--color-fg-primary);
color: var(--color-fg-inverted);
}
}
}
@@ -136,7 +136,7 @@ h1 {
}
a {
color: black;
color: var(--color-fg);
&[href^="http"] , &.download {
&::before {
@@ -183,16 +183,16 @@ table {
}
tr {
background-color: #dedede;
background-color: var(--color-tr-a);
&:nth-of-type(2n) {
background-color: #f7f7f7;
background-color: var(--color-tr-b);
}
}
thead > tr {
background-color: $color-blue;
color: white;
background-color: var(--color-th-bg);
color: var(--color-th-fg);
text-align: left;
}
}
@@ -200,7 +200,7 @@ table {
// @include schedule.legacy;
#header {
border-bottom: 1px solid $color-blue;
border-bottom: 1px solid var(--color-fg-primary);
margin: 0 auto 30px;
width: 100%;
@@ -233,8 +233,8 @@ table {
// height: 250px;
display: none;
padding: 0 10px;
border-right: 20px solid $color-blue;
border-left: 20px solid $color-blue;
border-right: 20px solid var(--color-fg-primary);
border-left: 20px solid var(--color-fg-primary);
position: relative;
@include r.media-large {
@@ -279,12 +279,12 @@ table {
height: 10px;
margin: 0 10px 0 0;
border-radius: 5px;
background-color: #eee;
border: 1.5px solid $color-blue;
background-color: var(--color-dots-gray);
border: 1.5px solid var(--color-dots-dark-blue);
&.active {
background-color: $color-blue-light;
border: 1.5px solid #eee;
background-color: var(--color-dots-light-blue);
border: 1.5px solid var(--color-dots-gray);
}
}
}
@@ -326,9 +326,9 @@ table {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid $color-hor-line;
border-top: 1px solid var(--color-hor-line);
box-sizing: border-box;
color: $color-blue;
color: var(--color-fg-primary);
.first-entry {
font: 1em 'Open Sans Condensed', sans-serif;
@@ -358,7 +358,7 @@ table {
a {
@include menu-style;
color: $color-blue;
color: var(--color-fg-primary);
}
}
}
@@ -383,8 +383,8 @@ table {
height: 100%;
position: absolute;
z-index: -10;
background-color: lightgrey;
opacity: 0.5;
background-color: var(--color-overlay-bg);
// opacity: 0.5;
}
.spacer {
@@ -398,7 +398,7 @@ table {
justify-content: center;
.dialog {
background-color: white;
background-color: var(--color-overlay-bg-inner);
padding: 10px;
flex: 30% 0 0;
@@ -558,7 +558,7 @@ table {
margin: 30px 0;
padding: 30px 5% 0;
box-sizing: border-box;
border-top: 1px solid $color-hor-line;
border-top: 1px solid var(--color-hor-line);
@include r.media-large {
display: none;
@@ -568,7 +568,7 @@ table {
width: 100%;
a {
background-color: $color-background-mobile-menu-header;
background-color: var(--color-bg-mobile-menu-header);
}
}
@@ -576,7 +576,7 @@ table {
width: 50%;
a {
background-color: $color-background-mobile-menu;
background-color: var(--color-bg-mobile-menu);
}
}
@@ -594,8 +594,8 @@ table {
@include menu-style;
&.active {
color: white;
background-color: $color-blue;
color: var(--color-fg-inverted);
background-color: var(--color-fg-primary);
}
}
}
@@ -650,9 +650,12 @@ table {
}
:root {
--color-vhvorne: #{$color-vh-vorne};
--color-vhmitte: #{$color-vh-mitte};
--color-vhhinten: #{$color-vh-hinten};
--color-bg-vhvorne: #{$color-vh-vorne};
--color-fg-vhvorne: var(--color-fg);
--color-bg-vhmitte: #{$color-vh-mitte};
--color-fg-vhmitte: var(--color-fg);
--color-bg-vhhinten: #{$color-vh-hinten};
--color-fg-vhhinten: var(--color-fg-inverted);
}
.calendar-color-legend {
@@ -661,16 +664,18 @@ table {
margin: 10px;
.vorne {
background-color: var(--color-vhvorne);
background-color: var(--color-bg-vhvorne);
color: val(--color-fg-vhvorne);
}
.mitte {
background-color: var(--color-vhmitte);
background-color: var(--color-bg-vhmitte);
color: var(--color-fg-vhmitte);
}
.hinten {
background-color: var(--color-vhhinten);
color: white;
background-color: var(--color-bg-vhhinten);
color: var(--color-fg-vhhinten);
}
.vorne, .mitte, .hinten {
@@ -824,7 +829,7 @@ table.time {
margin: 0 0 2em;
.press-article {
border-bottom: solid 1px $color-hor-line;
border-bottom: solid 1px var(--color-hor-line);
margin: 0 0 3em;
padding: 0 0 3em;