/** * Kopfbereich rechts: Tag/Nacht-Umschalter, Konto, Sprachwahl. * * ── Why a file of its own (2026-08-16) ──────────────────────────────────────────────────────── * The rules stood in frontend.css. But the admin layout does not load that file (only Tabler and * admin-custom.css) -- so in the backend BOTH symbols of the switch were visible at once, and the whole * group stayed unstyled. In the frontend everything looked right, which kept the fault invisible for a * long time. * * A copy in admin-custom.css would have been the obvious but wrong solution: two versions of the same * rules drift apart at the next intervention. Both layouts now load this one file. * * * The colour values come out of CSS variables that BOTH environments define (frontend.css and Tabler) * -- which is why the same block works in both. */ /* ══ Kopfbereich: Umschalter, Konto, Sprache (2026-08-16) ═════════════════════════════════════ */ .header-controls { display: flex; align-items: center; gap: 0.5rem; } .header-btn { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-color); color: var(--text-muted); width: 2.2rem; height: 2.2rem; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; transition: all 0.2s ease; } .header-btn:hover { background: rgba(255, 255, 255, 0.1); color: var(--text-main); border-color: var(--border-highlight); } /* The sun and the moon lie on top of each other; only the side the click leads to is ever visible. Switching by CSS rather than by JavaScript keeps the logic of the state at ONE place -- that one attribute on the element. */ .header-btn .theme-icon-sun { display: none; } html[data-theme="light"] .header-btn .theme-icon-sun { display: block; } html[data-theme="light"] .header-btn .theme-icon-moon { display: none; } .lang-switch { display: inline-flex; align-items: center; gap: 0.3rem; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0 0.45rem; height: 2.2rem; color: var(--text-muted); } .lang-select { background: transparent; border: 0; color: inherit; font-family: inherit; font-size: 0.8rem; cursor: pointer; padding: 0 0.15rem; } .lang-select option { background: #12131a; color: #e6e8ef; } html[data-theme="light"] .lang-select option { background: #ffffff; color: #0f172a; } /* Languages that are not available stay VISIBLE rather than missing -- otherwise the switch would look as if there were only one language, and nobody would see that EN is planned. */ .lang-select option:disabled { color: #6b7280; } /* ── Only needed in the admin area ──────────────────────────────────────────────────────────── Tabler sets variable names of its own. Without this mapping the group falls back to the default values in the backend and does not fit the surroundings in colour. */ .admin-topbar .header-controls { --border-color: var(--tblr-border-color, rgba(255, 255, 255, 0.12)); --text-muted: var(--tblr-secondary, #8a92a6); --text-main: var(--tblr-body-color, #e6e8ef); --border-highlight: var(--tblr-primary, #4263eb); --radius-md: 6px; } html[data-theme="light"] .admin-topbar .header-btn, html[data-theme="light"] .admin-topbar .lang-switch { background: rgba(15, 23, 42, 0.04); } /* ══ The account pulldown (2026-08-29, the user's wish) ═══════════════════════════════════════ Built out of
/. The marker to the left of the text falls away -- a triangle beside a person symbol is one sign too many; the opening shows itself through the list. The list carries THE SAME background colour as the button above it (an express wish), only opaque instead of translucent -- translucent, the page content would lie underneath and the entries would not be readable. */ .header-menu { position: relative; } .header-menu > summary { list-style: none; } .header-menu > summary::-webkit-details-marker { display: none; } /* The button with a caption is wider than the square ones beside it. As a class of its own rather than as a style attribute as before: a declaration in the markup cannot be overridden, and it is the first thing to stand out at every change of theme. */ .header-btn-wide { width: auto; padding: 0 0.7rem; gap: 0.45rem; } .header-menu-label { font-size: 0.8rem; white-space: nowrap; } .header-menu[open] > summary { background: rgba(255, 255, 255, 0.1); color: var(--text-main); border-color: var(--border-highlight); } .header-menu-list { position: absolute; top: calc(100% + 0.35rem); right: 0; min-width: 13rem; z-index: 60; /* The same colour as the button, but OPAQUE -- see above. */ background: #161e2e; border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0.35rem; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); } html[data-theme="light"] .header-menu-list { background: #ffffff; } .header-menu-item { display: block; padding: 0.45rem 0.65rem; border-radius: var(--radius-sm); color: var(--text-muted); font-size: 0.85rem; text-decoration: none; white-space: nowrap; } .header-menu-item:hover { background: rgba(255, 255, 255, 0.07); color: var(--text-main); } html[data-theme="light"] .header-menu-item:hover { background: rgba(0, 0, 0, 0.05); } /* Signing out stands apart: the only entry that changes anything. */ .header-menu-item.has-separator { margin-top: 0.35rem; padding-top: 0.6rem; border-top: 1px solid var(--border-color); }