From b57daf6fc2d27eef647cfa5b797d78ee323bef6d Mon Sep 17 00:00:00 2001 From: FlorianEisenmenger Date: Wed, 27 May 2026 09:48:00 +0200 Subject: [PATCH] coloring --- httpdocs/.claude/settings.local.json | 8 ++ httpdocs/assets/scripts/account.js | 17 +++- httpdocs/assets/styles/atoms/_variables.scss | 3 + .../assets/styles/components/_account.scss | 14 ++-- httpdocs/assets/styles/components/_crud.scss | 10 +-- .../styles/components/_duration-help.scss | 28 +++---- .../assets/styles/components/_entry-list.scss | 6 +- .../styles/components/_month-calendar.scss | 16 ++-- .../assets/styles/components/_week-nav.scss | 18 ++--- httpdocs/assets/styles/sections/_home.scss | 2 +- httpdocs/assets/styles/sections/_report.scss | 14 ++-- .../assets/styles/sections/_timetracking.scss | 4 +- httpdocs/assets/styles/themes/_minimal.scss | 80 ++++++++++++------- httpdocs/src/Service/BrandColorService.php | 20 +++-- httpdocs/templates/base.html.twig | 3 + 15 files changed, 147 insertions(+), 96 deletions(-) create mode 100644 httpdocs/.claude/settings.local.json diff --git a/httpdocs/.claude/settings.local.json b/httpdocs/.claude/settings.local.json new file mode 100644 index 0000000..863809d --- /dev/null +++ b/httpdocs/.claude/settings.local.json @@ -0,0 +1,8 @@ +{ + "permissions": { + "allow": [ + "Bash(xargs grep -l 'color-white\\\\|color: $color-white\\\\|#fff\\\\b')", + "Bash(grep *)" + ] + } +} diff --git a/httpdocs/assets/scripts/account.js b/httpdocs/assets/scripts/account.js index 034dc39..83aed1d 100644 --- a/httpdocs/assets/scripts/account.js +++ b/httpdocs/assets/scripts/account.js @@ -21,16 +21,31 @@ document.addEventListener('DOMContentLoaded', () => { return json; } - // ── Farbfeld: Picker ↔ Hex-Input synchron ──────────────────────────────── + // ── Farbfeld: Picker ↔ Hex-Input synchron + Live-Kontrast ──────────────── const colorPicker = document.getElementById('account-color-picker'); const colorHex = document.getElementById('account-color'); + + function applyHeaderContrast(hex) { + const r = parseInt(hex.slice(1, 3), 16); + const g = parseInt(hex.slice(3, 5), 16); + const b = parseInt(hex.slice(5, 7), 16); + const brightness = (r * 299 + g * 587 + b * 114) / 1000; + const isLight = brightness > 128; + const root = document.documentElement; + root.style.setProperty('--header-text', isLight ? '#1a2a3a' : '#ffffff'); + root.style.setProperty('--header-text-muted', isLight ? 'rgba(26, 42, 58, 0.65)' : 'rgba(255, 255, 255, 0.75)'); + root.style.setProperty('--header-overlay', isLight ? 'rgba(0, 0, 0, 0.08)' : 'rgba(255, 255, 255, 0.18)'); + } + if (colorPicker && colorHex) { colorPicker.addEventListener('input', () => { colorHex.value = colorPicker.value; + applyHeaderContrast(colorPicker.value); }); colorHex.addEventListener('input', () => { if (/^#[0-9a-fA-F]{6}$/.test(colorHex.value)) { colorPicker.value = colorHex.value; + applyHeaderContrast(colorHex.value); } }); } diff --git a/httpdocs/assets/styles/atoms/_variables.scss b/httpdocs/assets/styles/atoms/_variables.scss index 86a225c..d1ac98a 100644 --- a/httpdocs/assets/styles/atoms/_variables.scss +++ b/httpdocs/assets/styles/atoms/_variables.scss @@ -22,6 +22,9 @@ $color-bg: #dce9f5; --color-header-to: #{$color-header-to}; --color-bg: #{$color-bg}; --color-primary-rgb: 74, 144, 217; + --header-text: #{$color-white}; + --header-text-muted: rgba(255, 255, 255, 0.75); + --header-overlay: rgba(255, 255, 255, 0.18); } $color-card: #f0f0f0; $color-card-white: #ffffff; diff --git a/httpdocs/assets/styles/components/_account.scss b/httpdocs/assets/styles/components/_account.scss index 7f8b0f3..575c780 100644 --- a/httpdocs/assets/styles/components/_account.scss +++ b/httpdocs/assets/styles/components/_account.scss @@ -22,13 +22,13 @@ .account-header__title { font-size: $font-size-xl; font-weight: $font-weight-bold; - color: $color-white; + color: var(--header-text); } // ─── Tab-Navigation (Pill im Header) ───────────────────────────────────────── .account-tabs { display: flex; - background: rgba($color-white, 0.18); + background: var(--header-overlay); border-radius: $radius-pill; padding: 3px; gap: $space-1; @@ -42,15 +42,15 @@ padding: $space-2 $space-5; font-size: $font-size-sm; font-weight: $font-weight-medium; - color: rgba($color-white, 0.8); + color: var(--header-text-muted); text-decoration: none; border-radius: $radius-pill; transition: background $transition-fast, color $transition-fast; white-space: nowrap; &:hover:not(.account-tab--active) { - color: $color-white; - background: rgba($color-white, 0.12); + color: var(--header-text); + background: var(--header-overlay); } &--active { @@ -114,10 +114,10 @@ .account-form__link { font-size: $font-size-sm; - color: var(--color-primary); + color: $color-text-muted; text-decoration: none; - &:hover { text-decoration: underline; } + &:hover { color: $color-text-dark; text-decoration: underline; } } // ─── Farbfeld ───────────────────────────────────────────────────────────────── diff --git a/httpdocs/assets/styles/components/_crud.scss b/httpdocs/assets/styles/components/_crud.scss index d8ec263..66e218b 100644 --- a/httpdocs/assets/styles/components/_crud.scss +++ b/httpdocs/assets/styles/components/_crud.scss @@ -54,7 +54,7 @@ transition: background $transition-fast; &:hover { - background: rgba($color-primary, 0.03); + background: rgba(var(--color-primary-rgb), 0.05); .crud-row__btn { opacity: 1; } } @@ -101,7 +101,7 @@ svg { width: 14px; height: 14px; pointer-events: none; } - &--edit:hover { background: rgba($color-primary, 0.1); color: var(--color-primary); } + &--edit:hover { background: rgba(var(--color-primary-rgb), 0.1); color: var(--color-primary); } &--delete:hover{ background: rgba($color-error, 0.1); color: $color-error; } @media (hover: none) { opacity: 1; } @@ -110,7 +110,7 @@ // ─── Edit-Formular innerhalb der Zeile ───────────────────────────────────────── .crud-row__edit { padding: $space-4 $space-6; - background: rgba($color-primary, 0.03); + background: rgba(var(--color-primary-rgb), 0.04); border-top: 1px solid rgba($color-border, 0.5); } @@ -154,7 +154,7 @@ &--active { background: var(--color-primary); - color: $color-white; + color: var(--header-text); } } @@ -185,7 +185,7 @@ color: $color-text-muted; text-transform: uppercase; letter-spacing: 0.06em; - background: rgba($color-primary, 0.03); + background: rgba(var(--color-primary-rgb), 0.03); border-bottom: 1px solid rgba($color-border, 0.5); } diff --git a/httpdocs/assets/styles/components/_duration-help.scss b/httpdocs/assets/styles/components/_duration-help.scss index 90d334e..4297751 100644 --- a/httpdocs/assets/styles/components/_duration-help.scss +++ b/httpdocs/assets/styles/components/_duration-help.scss @@ -1,13 +1,15 @@ @use '../atoms/variables' as *; // ── Dauer-Hilfe Tooltip ─────────────────────────────────────────────────────── -// Zeigt "?" an, auf Hover klappt der Hilfetext aus +// Zeigt "?" an, auf Hover klappt der Hilfetext aus (absolut positioniert, +// damit er die Grid-Spaltenbreite nicht verschiebt). .duration-help { display: inline-flex; align-items: center; cursor: help; flex-shrink: 0; + position: relative; &__icon { display: inline-flex; @@ -22,35 +24,27 @@ font-size: $font-size-xs; font-weight: $font-weight-bold; flex-shrink: 0; - transition: - width $transition-base, - opacity $transition-base, - border $transition-base, - margin $transition-base; - overflow: hidden; + transition: opacity $transition-fast; } &__hint { + position: absolute; + left: calc(100% + #{$space-2}); + top: 50%; + transform: translateY(-50%); font-size: $font-size-xs; color: $color-text-muted; white-space: nowrap; - max-width: 0; - overflow: hidden; opacity: 0; - transition: - max-width 0.28s ease, - opacity 0.2s ease; + pointer-events: none; + transition: opacity 0.2s ease; } &:hover &__icon { - width: 0; opacity: 0; - border-width: 0; - margin-right: 0; } &:hover &__hint { - max-width: 500px; opacity: 1; } -} +} \ No newline at end of file diff --git a/httpdocs/assets/styles/components/_entry-list.scss b/httpdocs/assets/styles/components/_entry-list.scss index 58c34a3..4e0067e 100644 --- a/httpdocs/assets/styles/components/_entry-list.scss +++ b/httpdocs/assets/styles/components/_entry-list.scss @@ -77,7 +77,7 @@ padding: $space-4 $space-8; &:hover { - background: rgba($color-primary, 0.03); + background: rgba(var(--color-primary-rgb), 0.05); .entry-row__btn { opacity: 1; @@ -147,7 +147,7 @@ svg { width: 14px; height: 14px; pointer-events: none; } -m &--edit:hover { background: rgba($color-primary, 0.1); color: var(--color-primary); } + &--edit:hover { background: rgba(var(--color-primary-rgb), 0.1); color: var(--color-primary); } &--delete:hover{ background: rgba($color-error, 0.1); color: $color-error; } // immer sichtbar auf Touch-Geräten @@ -176,7 +176,7 @@ m &--edit:hover { background: rgba($color-primary, 0.1); color: var(--color-pr // ─── Bearbeiten-Modus ───────────────────────────────────────────────────── .entry-row__edit { padding: $space-4 $space-8; - background: rgba($color-primary, 0.03); + background: rgba(var(--color-primary-rgb), 0.04); border-top: 1px solid rgba($color-border, 0.5); } diff --git a/httpdocs/assets/styles/components/_month-calendar.scss b/httpdocs/assets/styles/components/_month-calendar.scss index 2c26c2a..7f74ff6 100644 --- a/httpdocs/assets/styles/components/_month-calendar.scss +++ b/httpdocs/assets/styles/components/_month-calendar.scss @@ -39,7 +39,7 @@ .month-calendar__title { font-size: $font-size-md; font-weight: $font-weight-bold; - color: $color-white; + color: var(--header-text); letter-spacing: 0.01em; } @@ -52,11 +52,11 @@ border-radius: 50%; background: transparent; border: none; - color: $color-white; + color: var(--header-text); cursor: pointer; transition: background $transition-fast; - &:hover { background: rgba($color-white, 0.2); } + &:hover { background: var(--header-overlay); } svg { width: 8px; height: 14px; } } @@ -81,7 +81,7 @@ text-align: center; font-size: $font-size-xs; font-weight: $font-weight-bold; - color: rgba($color-white, 0.6); + color: var(--header-text-muted); padding: $space-1 0; text-transform: uppercase; letter-spacing: 0.04em; @@ -103,18 +103,18 @@ border-radius: $radius-md; font-size: $font-size-sm; font-weight: $font-weight-medium; - color: $color-white; + color: var(--header-text); cursor: pointer; transition: background $transition-fast; user-select: none; &:hover:not(&--other) { - background: rgba($color-white, 0.2); + background: var(--header-overlay); } // Tage aus Vor-/Nachmonat &--other { - color: rgba($color-white, 0.35); + color: var(--header-text-muted); cursor: default; } @@ -131,7 +131,7 @@ // Ausgewählter Tag &--active:not(&--today) { - background: rgba($color-white, 0.25); + background: var(--header-overlay); font-weight: $font-weight-bold; } } diff --git a/httpdocs/assets/styles/components/_week-nav.scss b/httpdocs/assets/styles/components/_week-nav.scss index 61b8b27..8778b64 100644 --- a/httpdocs/assets/styles/components/_week-nav.scss +++ b/httpdocs/assets/styles/components/_week-nav.scss @@ -5,7 +5,7 @@ display: flex; align-items: center; gap: $space-1; - background: rgba($color-white, 0.18); + background: var(--header-overlay); border-radius: $radius-pill; padding: $space-1 $space-2; backdrop-filter: blur(6px); @@ -22,13 +22,13 @@ border-radius: 50%; background: transparent; border: none; - color: $color-white; + color: var(--header-text); cursor: pointer; text-decoration: none; flex-shrink: 0; transition: background $transition-fast; - &:hover { background: rgba($color-white, 0.2); } + &:hover { background: var(--header-overlay); } svg { width: 8px; height: 14px; } } @@ -68,7 +68,7 @@ user-select: none; &:hover:not(.week-nav__day--active) { - background: rgba($color-white, 0.15); + background: var(--header-overlay); } &--active { @@ -89,13 +89,13 @@ .week-nav__day-name { font-size: $font-size-sm; font-weight: $font-weight-bold; - color: $color-white; + color: var(--header-text); line-height: 1.2; } .week-nav__day-date { font-size: $font-size-xs; - color: rgba($color-white, 0.78); + color: var(--header-text-muted); line-height: 1.3; } @@ -107,8 +107,8 @@ width: 34px; height: 34px; border-radius: $radius-md; - background: rgba($color-white, 0.2); - color: $color-white; + background: var(--header-overlay); + color: var(--header-text); cursor: pointer; border: none; margin-left: $space-1; @@ -118,5 +118,5 @@ svg { width: 16px; height: 16px; pointer-events: none; } &:hover, - &--active { background: rgba($color-white, 0.35); } + &--active { background: var(--header-overlay); } } diff --git a/httpdocs/assets/styles/sections/_home.scss b/httpdocs/assets/styles/sections/_home.scss index 94a4cbe..fdbf07d 100644 --- a/httpdocs/assets/styles/sections/_home.scss +++ b/httpdocs/assets/styles/sections/_home.scss @@ -24,7 +24,7 @@ .home-header__brand { font-size: $font-size-lg; font-weight: $font-weight-bold; - color: $color-white; + color: var(--header-text); span { font-weight: $font-weight-regular; diff --git a/httpdocs/assets/styles/sections/_report.scss b/httpdocs/assets/styles/sections/_report.scss index cd6918a..4f2b3f9 100644 --- a/httpdocs/assets/styles/sections/_report.scss +++ b/httpdocs/assets/styles/sections/_report.scss @@ -22,7 +22,7 @@ .report-header__title { font-size: $font-size-xl; font-weight: $font-weight-bold; - color: $color-white; + color: var(--header-text); } .report-header__right { @@ -39,9 +39,9 @@ padding: $space-2 $space-4; font-size: $font-size-sm; font-weight: $font-weight-medium; - color: rgba($color-white, 0.9); - background: rgba($color-white, 0.15); - border: 1px solid rgba($color-white, 0.25); + color: var(--header-text); + background: var(--header-overlay); + border: 1px solid var(--header-overlay); border-radius: $radius-pill; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); @@ -160,7 +160,7 @@ transition: background $transition-fast; &:hover { - background: rgba($color-primary, 0.035); + background: rgba(var(--color-primary-rgb), 0.05); } &:hover .report-action-btn { @@ -179,7 +179,7 @@ } &--editing { - background: rgba($color-primary, 0.04); + background: rgba(var(--color-primary-rgb), 0.05); .report-table__cell--actions { visibility: hidden; @@ -312,7 +312,7 @@ .report-row__edit { grid-column: 1 / -1; padding: $space-4 0; - background: rgba($color-primary, 0.025); + background: rgba(var(--color-primary-rgb), 0.04); border-top: 1px solid $color-border; } diff --git a/httpdocs/assets/styles/sections/_timetracking.scss b/httpdocs/assets/styles/sections/_timetracking.scss index 38c9ba0..1d6ac23 100644 --- a/httpdocs/assets/styles/sections/_timetracking.scss +++ b/httpdocs/assets/styles/sections/_timetracking.scss @@ -30,14 +30,14 @@ .tt-header__date { font-size: $font-size-lg; font-weight: $font-weight-bold; - color: $color-white; + color: var(--header-text); line-height: 1.2; } .tt-header__kw { font-size: $font-size-sm; font-weight: $font-weight-bold; - color: rgba($color-white, 0.75); + color: var(--header-text-muted); line-height: 1.3; } diff --git a/httpdocs/assets/styles/themes/_minimal.scss b/httpdocs/assets/styles/themes/_minimal.scss index 87454da..916cd39 100644 --- a/httpdocs/assets/styles/themes/_minimal.scss +++ b/httpdocs/assets/styles/themes/_minimal.scss @@ -14,16 +14,17 @@ body[data-theme="minimal"] { .hamburger-nav { display: flex; justify-content: flex-end; - padding: $space-3 $space-3 0; + padding: $space-4 $space-4 $space-5; } // ── Page-Background weiß ─────────────────────────────────────────────────── .tt-page { background: #fff; } - // ── TT-Header: kein Gradient, cleaner Rahmen ─────────────────────────────── + // ── TT-Header: kein Gradient, kein Schatten, cleaner Rahmen ─────────────── .tt-header { background: #fff; - box-shadow: 0 1px 0 $color-border; + box-shadow: none; + border-bottom: 1px solid $color-border; padding: $space-3 $space-5; min-height: auto; flex-direction: column; @@ -31,6 +32,20 @@ body[data-theme="minimal"] { gap: 0; } + // Account/Report-Header: kein Schatten + .account-header, + .report-header { + box-shadow: none; + } + + // Karten ohne Schatten + .account-card, + .crud-list, + .crud-create, + .entry-form { + box-shadow: none; + } + // Standard-Meta und Collapsible umschalten .tt-header__meta { display: none; } .tt-header__minimal-bar { display: flex; } @@ -61,9 +76,9 @@ body[data-theme="minimal"] { // ── Greeting versteckt ───────────────────────────────────────────────────── .greeting { display: none; } - // ── Content zentriert und schmaler ──────────────────────────────────────── + // ── Content zentriert, angenehme Breite ─────────────────────────────────── .tt-content { - max-width: 520px; + max-width: 660px; padding: $space-6 $space-4; gap: $space-6; } @@ -72,7 +87,6 @@ body[data-theme="minimal"] { .entry-form { background: #fff; border: none; - box-shadow: none; border-radius: 0; padding: $space-4 0; } @@ -95,12 +109,12 @@ body[data-theme="minimal"] { padding: 0 $space-3; } - // Borderless inputs inside the entry form + // Borderless inputs inside the entry form — Markenfarbe statt hardcoded .entry-form .input, .entry-form .select { border: none; box-shadow: none; - background-color: $color-bg; + background-color: var(--color-bg); &:focus { box-shadow: none; } } @@ -118,7 +132,19 @@ body[data-theme="minimal"] { // Bemerkung-Toggle-Row: standardmäßig sichtbar (im Standard ausgeblendet) .entry-form__note-toggle-row { display: flex; } - // ── Entry-List-Summary ───────────────────────────────────────────────────── + // ── Primärbutton in Minimal: Markenfarbe statt Orange ───────────────────── + .btn-primary { + background: var(--color-primary); + color: var(--header-text); + box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.35); + + &:hover { + background: var(--color-primary-dark); + box-shadow: 0 3px 12px rgba(var(--color-primary-rgb), 0.45); + } + } + + // ── Entry-List ───────────────────────────────────────────────────────────── .entry-list__summary { display: block; } // Entry List standardmäßig versteckt (JS steuert) @@ -127,16 +153,13 @@ body[data-theme="minimal"] { } .entry-list { + background: #fff; box-shadow: none; border: 1px solid $color-border; border-radius: $radius-md; } // ── Unterseiten (Report, Clients, etc.): nur Navigation ─────────────────── - // Subpages übernehmen den Hamburger und das weiße Layout automatisch - // durch .main-nav { display: none } und .hamburger-nav { display: block } - - // Report-Seite weißer Hintergrund .report-page, .crud-page, .account-page, @@ -153,19 +176,18 @@ body[data-theme="minimal"] { } .hamburger-nav__toggle { - width: 40px; - height: 40px; - border: 1px solid $color-border; - border-radius: $radius-md; + width: 52px; + height: 52px; + border: none; + border-radius: $radius-lg; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; - box-shadow: $shadow-card; transition: background $transition-fast; - &:hover { background: $color-bg; } + &:hover { background: var(--color-bg); } } // Hamburger-Icon aus drei Balken @@ -173,7 +195,7 @@ body[data-theme="minimal"] { .hamburger-nav__icon::before, .hamburger-nav__icon::after { display: block; - width: 18px; + width: 22px; height: 2px; background: $color-text-dark; border-radius: 2px; @@ -190,16 +212,16 @@ body[data-theme="minimal"] { left: 0; } - &::before { top: -5px; } - &::after { top: 5px; } + &::before { top: -6px; } + &::after { top: 6px; } } // X-Icon wenn geöffnet .hamburger-nav__toggle[aria-expanded="true"] { .hamburger-nav__icon { background: transparent; - &::before { transform: translateY(5px) rotate(45deg); } - &::after { transform: translateY(-5px) rotate(-45deg); } + &::before { transform: translateY(6px) rotate(45deg); } + &::after { transform: translateY(-6px) rotate(-45deg); } } } @@ -225,7 +247,7 @@ body[data-theme="minimal"] { text-decoration: none; transition: background $transition-fast, color $transition-fast; - &:hover { background: $color-bg; color: $color-text-dark; } + &:hover { background: var(--color-bg); color: $color-text-dark; } &--active { color: var(--color-primary); @@ -281,7 +303,7 @@ body[data-theme="minimal"] { align-items: center; gap: $space-2; padding: $space-3 $space-4; - background: none; + background: #fff; border: 1px solid $color-border; border-radius: $radius-md; font-size: $font-size-base; @@ -290,7 +312,7 @@ body[data-theme="minimal"] { cursor: pointer; transition: background $transition-fast; - &:hover { background: $color-bg; } + &:hover { background: var(--color-bg); } } .entry-list__summary-count { font-weight: $font-weight-bold; color: $color-text-dark; } @@ -319,12 +341,12 @@ body[data-theme="minimal"] { border: none; padding: 0; font-size: $font-size-sm; - color: $color-primary; + color: $color-text-muted; cursor: pointer; font-weight: $font-weight-medium; transition: color $transition-fast; - &:hover { color: var(--color-primary-dark); } + &:hover { color: $color-text-dark; } &.is-open { color: $color-text-muted; } } diff --git a/httpdocs/src/Service/BrandColorService.php b/httpdocs/src/Service/BrandColorService.php index e40604d..c9d0910 100644 --- a/httpdocs/src/Service/BrandColorService.php +++ b/httpdocs/src/Service/BrandColorService.php @@ -29,14 +29,20 @@ class BrandColorService [$h, $s, $l] = $this->hexToHsl($hex); [$r, $g, $b] = $this->hexToRgb($hex); + $brightness = ($r * 299 + $g * 587 + $b * 114) / 1000; + $isLight = $brightness > 128; + return [ - 'headerTo' => $hex, - 'headerFrom' => $this->hslToHex($h, max(0, $s - 4), $this->clamp($l + 13)), - 'primary' => $this->hslToHex($h, $s, $this->clamp($l + 9)), - 'primaryDark' => $this->hslToHex($h, $s, $this->clamp($l - 3)), - 'primaryLight' => $this->hslToHex($h, max(0, $s - 5), $this->clamp($l + 20)), - 'bg' => $this->hslToHex($h, max(0, $s - 30), $this->clamp($l + 40)), - 'rgb' => "$r, $g, $b", + 'headerTo' => $hex, + 'headerFrom' => $this->hslToHex($h, max(0, $s - 4), $this->clamp($l + 13)), + 'primary' => $this->hslToHex($h, $s, $this->clamp($l + 9)), + 'primaryDark' => $this->hslToHex($h, $s, $this->clamp($l - 3)), + 'primaryLight' => $this->hslToHex($h, max(0, $s - 5), $this->clamp($l + 20)), + 'bg' => $this->hslToHex($h, max(0, $s - 30), $this->clamp($l + 40)), + 'rgb' => "$r, $g, $b", + 'headerText' => $isLight ? '#1a2a3a' : '#ffffff', + 'headerTextMuted' => $isLight ? 'rgba(26, 42, 58, 0.65)' : 'rgba(255, 255, 255, 0.75)', + 'headerOverlay' => $isLight ? 'rgba(0, 0, 0, 0.08)' : 'rgba(255, 255, 255, 0.18)', ]; } diff --git a/httpdocs/templates/base.html.twig b/httpdocs/templates/base.html.twig index 1a86268..cfe63f4 100644 --- a/httpdocs/templates/base.html.twig +++ b/httpdocs/templates/base.html.twig @@ -19,6 +19,9 @@ --color-header-to: {{ _bp.headerTo }}; --color-bg: {{ _bp.bg }}; --color-primary-rgb: {{ _bp.rgb }}; + --header-text: {{ _bp.headerText }}; + --header-text-muted: {{ _bp.headerTextMuted }}; + --header-overlay: {{ _bp.headerOverlay }}; } {% endif %}