Farbschema wie VVL-Tool, Dark Mode und lila Textmarkierung

- Farbwerte (hell/dunkel), IBM Plex Sans und Textmarkierung aus dem VVL-Tool übernommen
- Umschalter Hell/Dunkel in der Kopfzeile, Wahl wird gemerkt (Standard: Systemeinstellung)
- Kopfleiste <hi-topbar> folgt dem Farbschema des jeweiligen Tools

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
kerimatilganandClaude Opus 5.5 committed 2026-09-27 13:35:55 +02:00
1 parent cfe59e3652
commit 97acf2cb66
11 files changed
+221 -68

No files matched your search

+2 -1
View File
@@ -3,7 +3,8 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#2B0F71" />
<meta name="theme-color" content="#2d1b69" />
<script src="/theme-init.js"></script>
<link rel="icon" type="image/png" href="/favicon.png" />
<link rel="apple-touch-icon" href="/icon-192.png" />
<title>Handy-Insel Portal</title>
+48 -37
View File
@@ -1,6 +1,7 @@
import { useEffect, useMemo, useRef, useState } from 'react';
import { api, type App as PortalApp, type Links, type News, type NewsInput, type User } from './api';
import { Icon } from './icons';
import { useTheme } from './useTheme';
function greeting(date = new Date()): string {
const h = date.getHours();
@@ -25,14 +26,14 @@ export function App() {
});
}, []);
if (!me) return <div className="grid min-h-screen place-items-center text-sm text-slate-500">Lade Portal …</div>;
if (!me) return <div className="grid min-h-screen place-items-center text-sm text-fg-3">Lade Portal …</div>;
return (
<div className="flex min-h-screen flex-col">
<Header user={me.user} links={me.links} />
<main className="mx-auto grid w-full max-w-6xl flex-1 gap-12 px-4 pb-16 pt-10 sm:px-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] lg:pt-14">
<section>
<h1 className="text-3xl font-bold leading-tight text-ink sm:text-4xl">
<h1 className="text-3xl font-bold leading-tight text-fg sm:text-4xl">
{greeting()},
<br />
{me.user.firstName}.
@@ -49,6 +50,7 @@ export function App() {
function Header({ user, links }: { user: User; links: Links }) {
const [open, setOpen] = useState(false);
const { theme, toggle } = useTheme();
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
@@ -65,19 +67,28 @@ function Header({ user, links }: { user: User; links: Links }) {
}, [open]);
return (
<header className="sticky top-0 z-20 border-b border-slate-200 bg-white">
<header className="sticky top-0 z-20 border-b border-line bg-surface">
<div className="flex h-14 items-center justify-between px-4 sm:px-6">
<a href="/" className="flex items-center gap-2.5" aria-label="Handy-Insel Portal">
<img src="/icon-192.png" alt="" className="h-8 w-8" />
<span className="text-lg tracking-tight text-ink">
<img src="/icon-192.png" alt="" className="logo-badge h-8 w-8 rounded-full" />
<span className="text-lg tracking-tight text-fg">
Handy-<span className="font-bold">Insel</span>
</span>
</a>
<div className="relative" ref={ref}>
<div className="relative flex items-center gap-2" ref={ref}>
<button
type="button"
onClick={toggle}
className="grid h-9 w-9 place-items-center rounded-full text-fg-2 hover:bg-surface-3 hover:text-fg"
title={theme === 'dark' ? 'Helles Design' : 'Dunkles Design'}
aria-label={theme === 'dark' ? 'Helles Design' : 'Dunkles Design'}
>
<Icon name={theme === 'dark' ? 'sun' : 'moon'} className="h-[18px] w-[18px]" />
</button>
<button
type="button"
onClick={() => setOpen((v) => !v)}
className="grid h-9 w-9 place-items-center rounded-full border-2 border-slate-300 bg-slate-100 text-xs font-bold text-ink hover:border-brand-500"
className="grid h-9 w-9 place-items-center rounded-full border-2 border-line-2 bg-surface-3 text-xs font-bold text-fg hover:border-accent"
aria-haspopup="menu"
aria-expanded={open}
title={user.name}
@@ -87,17 +98,17 @@ function Header({ user, links }: { user: User; links: Links }) {
{open && (
<div
role="menu"
className="absolute right-0 mt-2 w-64 overflow-hidden rounded-xl border border-slate-200 bg-white shadow-lg"
className="absolute right-0 top-full mt-2 w-64 overflow-hidden rounded-xl border border-line bg-surface shadow-pop"
>
<div className="border-b border-slate-100 px-4 py-3">
<div className="font-semibold text-ink">{user.name}</div>
<div className="truncate text-sm text-slate-500">{user.email}</div>
<div className="border-b border-line px-4 py-3">
<div className="font-semibold text-fg">{user.name}</div>
<div className="truncate text-sm text-fg-3">{user.email}</div>
</div>
<a role="menuitem" href={links.account} className="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-brand-50">
<Icon name="user" className="h-4 w-4 text-brand-600" /> Konto &amp; Passwort
<a role="menuitem" href={links.account} className="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-accent-soft">
<Icon name="user" className="h-4 w-4 text-accent" /> Konto &amp; Passwort
</a>
<a role="menuitem" href={links.logout} className="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-brand-50">
<Icon name="logout" className="h-4 w-4 text-brand-600" /> Abmelden
<a role="menuitem" href={links.logout} className="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-accent-soft">
<Icon name="logout" className="h-4 w-4 text-accent" /> Abmelden
</a>
</div>
)}
@@ -119,14 +130,14 @@ function AppSections({ apps, error }: { apps: PortalApp[] | null; error: string
if (apps === null) {
return (
<SectionTitle title="Anwendungen">
<div className="text-sm text-slate-500">Lade Anwendungen …</div>
<div className="text-sm text-fg-3">Lade Anwendungen …</div>
</SectionTitle>
);
}
if (!apps.length) {
return (
<SectionTitle title="Anwendungen">
<p className="text-sm text-slate-600">
<p className="text-sm text-fg-2">
{error || 'Für dein Konto sind noch keine Anwendungen freigeschaltet. Bitte wende dich an einen Admin.'}
</p>
</SectionTitle>
@@ -152,8 +163,8 @@ function AppSections({ apps, error }: { apps: PortalApp[] | null; error: string
function SectionTitle({ title, children }: { title: string; children: React.ReactNode }) {
return (
<div className="mt-12">
<h2 className="mb-5 flex items-center gap-2 text-base font-semibold text-ink">
<Icon name="grid" className="h-4 w-4 text-slate-500" />
<h2 className="mb-5 flex items-center gap-2 text-base font-semibold text-fg">
<Icon name="grid" className="h-4 w-4 text-fg-3" />
{title}
</h2>
{children}
@@ -170,10 +181,10 @@ function AppTile({ app }: { app: PortalApp }) {
title={app.description || app.name}
className="group flex flex-col items-center gap-2 text-center"
>
<span className="grid h-[72px] w-[72px] place-items-center rounded-xl border border-slate-200 bg-white shadow-[0_1px_2px_rgba(15,23,42,0.04)] transition group-hover:-translate-y-0.5 group-hover:border-brand-200 group-hover:shadow-md">
<span className="grid h-[72px] w-[72px] place-items-center rounded-xl border border-line bg-[var(--tile-icon-bg)] shadow-card transition group-hover:-translate-y-0.5 group-hover:border-line-2 group-hover:shadow-pop">
<img src={app.iconUrl} alt="" className="h-10 w-10 object-contain" loading="lazy" />
</span>
<span lang="de" className="w-full hyphens-auto break-words text-[13px] font-medium leading-tight text-ink">{app.name}</span>
<span lang="de" className="w-full hyphens-auto break-words text-[13px] font-medium leading-tight text-fg">{app.name}</span>
</a>
);
}
@@ -212,7 +223,7 @@ function NewsPanel({ canEdit }: { canEdit: boolean }) {
return (
<aside className="lg:pt-[4.5rem]">
<div className="mb-4 flex items-center justify-between gap-4">
<h2 className="flex items-center gap-2 text-base font-semibold text-ink">
<h2 className="flex items-center gap-2 text-base font-semibold text-fg">
<Icon name="megaphone" className="h-4 w-4" />
Aktuelles
</h2>
@@ -220,7 +231,7 @@ function NewsPanel({ canEdit }: { canEdit: boolean }) {
<button
type="button"
onClick={() => setEditing('new')}
className="inline-flex items-center gap-1.5 rounded-md border border-brand-500 bg-white px-3 py-1 text-xs font-semibold text-brand-600 hover:bg-brand-50"
className="inline-flex items-center gap-1.5 rounded-md border border-accent bg-surface px-3 py-1 text-xs font-semibold text-accent hover:bg-accent-soft"
>
<Icon name="plus" className="h-3.5 w-3.5" /> Neuigkeit
</button>
@@ -231,15 +242,15 @@ function NewsPanel({ canEdit }: { canEdit: boolean }) {
<NewsForm initial={editing === 'new' ? undefined : editing} onCancel={() => setEditing(null)} onSave={save} />
)}
{error && <p className="text-sm text-red-600">{error}</p>}
{news && !news.length && !editing && <p className="text-sm text-slate-600">Es gibt noch keine Neuigkeiten.</p>}
{error && <p className="text-sm text-danger">{error}</p>}
{news && !news.length && !editing && <p className="text-sm text-fg-2">Es gibt noch keine Neuigkeiten.</p>}
<ul className="space-y-3">
{news?.map((item) => (
<li key={item.id} className="rounded-xl border border-slate-200 bg-white p-4">
<li key={item.id} className="rounded-xl border border-line bg-surface p-4">
<div className="flex items-start justify-between gap-3">
<h3 className="font-semibold text-ink">
{item.pinned && <Icon name="pin" className="-mt-0.5 mr-1.5 inline h-3.5 w-3.5 text-brand-600" />}
<h3 className="font-semibold text-fg">
{item.pinned && <Icon name="pin" className="-mt-0.5 mr-1.5 inline h-3.5 w-3.5 text-accent" />}
{item.title}
</h3>
{canEdit && (
@@ -249,10 +260,10 @@ function NewsPanel({ canEdit }: { canEdit: boolean }) {
</div>
)}
</div>
<div className="mt-0.5 text-xs text-slate-500">
<div className="mt-0.5 text-xs text-fg-3">
{dateFmt.format(new Date(item.createdAt))} · {item.author}
</div>
{item.body && <p className="mt-2 whitespace-pre-line text-sm leading-relaxed text-slate-700">{item.body}</p>}
{item.body && <p className="mt-2 whitespace-pre-line text-sm leading-relaxed text-fg-2">{item.body}</p>}
</li>
))}
</ul>
@@ -267,7 +278,7 @@ function IconButton({ label, icon, onClick }: { label: string; icon: 'pencil' |
onClick={onClick}
title={label}
aria-label={label}
className="grid h-7 w-7 place-items-center rounded-md text-slate-500 hover:bg-slate-100 hover:text-ink"
className="grid h-7 w-7 place-items-center rounded-md text-fg-3 hover:bg-surface-3 hover:text-fg"
>
<Icon name={icon} className="h-3.5 w-3.5" />
</button>
@@ -301,24 +312,24 @@ function NewsForm({
}
}
const field = 'w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm focus:border-brand-500 focus:outline-none';
const field = 'w-full rounded-md border border-line-2 bg-surface px-3 py-2 text-sm focus:border-accent focus:outline-none';
return (
<form onSubmit={submit} className="mb-4 space-y-3 rounded-xl border border-brand-200 bg-white p-4">
<form onSubmit={submit} className="mb-4 space-y-3 rounded-xl border border-line-2 bg-surface p-4">
<input className={field} placeholder="Titel" value={title} onChange={(e) => setTitle(e.target.value)} maxLength={200} required autoFocus />
<textarea className={`${field} min-h-28`} placeholder="Text (optional)" value={body} onChange={(e) => setBody(e.target.value)} />
<label className="flex items-center gap-2 text-sm">
<input type="checkbox" checked={pinned} onChange={(e) => setPinned(e.target.checked)} className="accent-brand-600" />
<input type="checkbox" checked={pinned} onChange={(e) => setPinned(e.target.checked)} className="accent-[var(--accent)]" />
Oben anheften
</label>
{error && <p className="text-sm text-red-600">{error}</p>}
{error && <p className="text-sm text-danger">{error}</p>}
<div className="flex justify-end gap-2">
<button type="button" onClick={onCancel} className="rounded-md px-3 py-1.5 text-sm text-slate-600 hover:bg-slate-100">
<button type="button" onClick={onCancel} className="rounded-md px-3 py-1.5 text-sm text-fg-2 hover:bg-surface-3">
Abbrechen
</button>
<button
type="submit"
disabled={busy}
className="rounded-md bg-brand-600 px-4 py-1.5 text-sm font-semibold text-white hover:bg-brand-700 disabled:opacity-60"
className="rounded-md bg-accent px-4 py-1.5 text-sm font-semibold text-on-accent hover:bg-accent-2 disabled:opacity-60"
>
{initial ? 'Speichern' : 'Veröffentlichen'}
</button>
+2
View File
@@ -8,6 +8,8 @@ const paths = {
trash: 'M9 3h6l1 2h4v2H4V5h4zm-3 6h12l-1 12H7z',
user: 'M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9zm-8 9c0-4.4 3.6-7 8-7s8 2.6 8 7z',
logout: 'M10 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h5v-2H5V5h5zm6.6 4.4L15.2 8.8 17.4 11H9v2h8.4l-2.2 2.2 1.4 1.4L21.2 12z',
moon: 'M20.4 14.6A8.5 8.5 0 0 1 9.4 3.6a8.5 8.5 0 1 0 11 11z',
sun: 'M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm-1-5h2v3h-2zm0 17h2v3h-2zM2 11h3v2H2zm17 0h3v2h-3zM4.2 5.6l1.4-1.4 2.1 2.1-1.4 1.4zm12.1 12.1 1.4-1.4 2.1 2.1-1.4 1.4zM4.2 18.4l2.1-2.1 1.4 1.4-2.1 2.1zM16.3 6.3l2.1-2.1 1.4 1.4-2.1 2.1z',
} as const;
export function Icon({ name, className }: { name: keyof typeof paths; className?: string }) {
+4
View File
@@ -1,5 +1,9 @@
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import '@fontsource/ibm-plex-sans/400.css';
import '@fontsource/ibm-plex-sans/500.css';
import '@fontsource/ibm-plex-sans/600.css';
import '@fontsource/ibm-plex-sans/700.css';
import './styles.css';
import { App } from './App';
+86 -14
View File
@@ -1,25 +1,97 @@
@import "tailwindcss";
@theme {
--color-brand-50: #f3f0fd;
--color-brand-100: #e6defb;
--color-brand-200: #cbbdf7;
--color-brand-500: #6a3de8;
--color-brand-600: #5a2fd6;
--color-brand-700: #4a22b8;
--color-brand-900: #2b0f71;
--color-ink: #1f2a52;
--color-canvas: #f4f4f5;
--font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
/*
* Farbschema wie im VVL-Tool (lavendel-getönte Purple-Palette, Light + Dark).
* Umgeschaltet über :root[data-theme="…"], gesetzt von theme-init.js bzw. useTheme.
*/
:root,
:root[data-theme="light"] {
--bg: #f1eef8;
--surface: #ffffff;
--surface-2: #faf8fd;
--surface-3: #f1edf8;
--border: #e5e0f0;
--border-2: #d6cee8;
--text: #211a38;
--text-2: #5b5372;
--text-3: #8a83a0;
--primary: #2d1b69;
--accent: #5e35b1;
--accent-2: #7c4dd6;
--accent-soft: #ede7fa;
--on-accent: #ffffff;
--red: #d42a4e;
--tile-icon-bg: #ffffff;
--shadow: 0 1px 2px rgba(45, 27, 105, 0.06), 0 4px 16px rgba(45, 27, 105, 0.06);
--shadow-lg: 0 8px 40px rgba(45, 27, 105, 0.18);
color-scheme: light;
}
:root[data-theme="dark"] {
--bg: #120c22;
--surface: #1c1436;
--surface-2: #221940;
--surface-3: #2a2049;
--border: #312551;
--border-2: #3f3167;
--text: #ece8f6;
--text-2: #ada5c6;
--text-3: #7b7396;
--primary: #c3adee;
--accent: #a88beb;
--accent-2: #bca4f2;
--accent-soft: #2a2048;
--on-accent: #1b1233;
--red: #f26982;
--tile-icon-bg: #f4f0fc;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 20px rgba(0, 0, 0, 0.35);
--shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.55);
color-scheme: dark;
}
@theme inline {
--color-bg: var(--bg);
--color-surface: var(--surface);
--color-surface-2: var(--surface-2);
--color-surface-3: var(--surface-3);
--color-line: var(--border);
--color-line-2: var(--border-2);
--color-fg: var(--text);
--color-fg-2: var(--text-2);
--color-fg-3: var(--text-3);
--color-primary: var(--primary);
--color-accent: var(--accent);
--color-accent-2: var(--accent-2);
--color-accent-soft: var(--accent-soft);
--color-on-accent: var(--on-accent);
--color-danger: var(--red);
--shadow-card: var(--shadow);
--shadow-pop: var(--shadow-lg);
--font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
html,
body {
background: var(--color-canvas);
color: var(--color-ink);
background: var(--bg);
color: var(--text);
}
/* Markierter Text in Flieder statt Browser-Blau (wie im VVL-Tool) */
::selection {
background: #d7c6f7;
color: #1b1233;
}
:root[data-theme="dark"] ::selection {
background: #5b3fa0;
color: #f4efff;
}
:focus-visible {
outline: 2px solid var(--color-brand-500);
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* Das dunkle Insel-Logo braucht auf dunklem Grund einen hellen Rand */
:root[data-theme="dark"] .logo-badge {
box-shadow: 0 0 0 2px #f4f0fc;
}
+24
View File
@@ -0,0 +1,24 @@
import { useCallback, useEffect, useState } from 'react';
export type Theme = 'light' | 'dark';
function current(): Theme {
return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
}
/** Hell/Dunkel-Umschaltung; merkt sich die Wahl (localStorage "hi-theme"). */
export function useTheme() {
const [theme, setTheme] = useState<Theme>(current);
useEffect(() => {
document.documentElement.setAttribute('data-theme', theme);
try {
localStorage.setItem('hi-theme', theme);
} catch {
/* Speicher gesperrt */
}
}, [theme]);
const toggle = useCallback(() => setTheme((t) => (t === 'dark' ? 'light' : 'dark')), []);
return { theme, toggle };
}
+9
View File
@@ -8,6 +8,7 @@
"name": "handy-insel-portal",
"version": "0.1.0",
"dependencies": {
"@fontsource/ibm-plex-sans": "^5.3.0",
"better-sqlite3": "^12.11.1",
"express": "^4.22.3",
"express-session": "^1.19.0",
@@ -451,6 +452,14 @@
"node": ">=18"
}
},
"node_modules/@fontsource/ibm-plex-sans": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/@fontsource/ibm-plex-sans/-/ibm-plex-sans-5.3.0.tgz",
"integrity": "sha512-CbE4CbbEEZJX860XyUiRpsksXIQR8Rp2XDva2VO53NJox9tVNtusrysd2x5YkUEY3ErQ66W1IiiQL8/wihhw5w==",
"funding": {
"url": "https://github.com/sponsors/ayuhito"
}
},
"node_modules/@jridgewell/gen-mapping": {
"version": "0.3.13",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+1
View File
@@ -18,6 +18,7 @@
"node": ">=20"
},
"dependencies": {
"@fontsource/ibm-plex-sans": "^5.3.0",
"better-sqlite3": "^12.11.1",
"express": "^4.22.3",
"express-session": "^1.19.0",
+7
View File
@@ -0,0 +1,7 @@
// Setzt das Farbschema vor dem ersten Rendern (verhindert Aufblitzen im Dark Mode).
(function () {
var t;
try { t = localStorage.getItem('hi-theme'); } catch (e) {}
if (t !== 'light' && t !== 'dark') t = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
document.documentElement.setAttribute('data-theme', t);
})();
Binary file not shown.
+38 -16
View File
@@ -37,10 +37,14 @@ const PORTAL = (script?.dataset.portal || (script?.src ? new URL(script.src).ori
const css = `
:host { all: initial; display: block; position: relative; z-index: 2147483000; height: ${HEIGHT}px;
font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; font-size: 14px; color: #fff; }
font-family: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; font-size: 14px; color: #fff;
--p-bg: #ffffff; --p-text: #211a38; --p-text-3: #8a83a0; --p-border: #e5e0f0; --p-hover: #ede7fa; --p-current: #e3d9f8;
--p-accent: #5e35b1; --p-tile: transparent; --p-shadow: 0 8px 40px rgba(45,27,105,.18); }
:host([theme="dark"]) { --p-bg: #1c1436; --p-text: #ece8f6; --p-text-3: #7b7396; --p-border: #312551; --p-hover: #2a2048;
--p-current: #2f2452; --p-accent: #a88beb; --p-tile: #f4f0fc; --p-shadow: 0 12px 48px rgba(0,0,0,.55); }
:host([sticky]) { position: sticky; top: 0; }
* { box-sizing: border-box; }
.bar { display: flex; align-items: center; gap: 6px; height: ${HEIGHT}px; padding: 0 8px 0 4px; background: #2b0f71;
.bar { display: flex; align-items: center; gap: 6px; height: ${HEIGHT}px; padding: 0 8px 0 4px; background: #2d1b69;
box-shadow: 0 1px 0 rgba(0,0,0,.12); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
@@ -54,29 +58,29 @@ a { color: inherit; text-decoration: none; }
.app-name { opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sep { width: 1px; height: 18px; background: rgba(255,255,255,.3); margin: 0 4px; }
.spacer { flex: 1; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #2b0f71; font-size: 12px; font-weight: 700;
.avatar { width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #2d1b69; font-size: 12px; font-weight: 700;
display: grid; place-items: center; }
.panel { position: absolute; top: ${HEIGHT + 6}px; background: #fff; color: #1f2a52; border-radius: 12px;
border: 1px solid #e2e8f0; box-shadow: 0 12px 32px rgba(15,23,42,.18); overflow: hidden; }
.panel { position: absolute; top: ${HEIGHT + 6}px; background: var(--p-bg); color: var(--p-text); border-radius: 12px;
border: 1px solid var(--p-border); box-shadow: var(--p-shadow); overflow: hidden; }
.panel[hidden] { display: none; }
.apps { left: 6px; width: 344px; max-width: calc(100vw - 12px); max-height: calc(100vh - 60px); overflow-y: auto; padding: 12px; }
.apps h3 { margin: 4px 6px 8px; font-size: 12px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .04em; }
.apps h3 { margin: 4px 6px 8px; font-size: 12px; font-weight: 600; color: var(--p-text-3); text-transform: uppercase; letter-spacing: .04em; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-bottom: 8px; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 10px;
text-align: center; font-size: 12.5px; font-weight: 500; line-height: 1.2; overflow-wrap: anywhere; hyphens: auto; }
.tile:hover { background: #f3f0fd; }
.tile[aria-current="page"] { background: #e6defb; }
.tile img { width: 36px; height: 36px; }
.footer { display: block; margin: 4px -12px -12px; padding: 12px 18px; border-top: 1px solid #f1f5f9; font-weight: 600; color: #5a2fd6; }
.footer:hover { background: #f3f0fd; }
.hint { margin: 6px; font-size: 13px; line-height: 1.45; color: #475569; }
.hint a { color: #5a2fd6; font-weight: 600; }
.tile:hover { background: var(--p-hover); }
.tile[aria-current="page"] { background: var(--p-current); }
.tile img { width: 36px; height: 36px; padding: 2px; border-radius: 8px; background: var(--p-tile); }
.footer { display: block; margin: 4px -12px -12px; padding: 12px 18px; border-top: 1px solid var(--p-border); font-weight: 600; color: var(--p-accent); }
.footer:hover { background: var(--p-hover); }
.hint { margin: 6px; font-size: 13px; line-height: 1.45; color: var(--p-text); }
.hint a { color: var(--p-accent); font-weight: 600; }
.user { right: 6px; width: 260px; }
.user .who { padding: 12px 16px; border-bottom: 1px solid #f1f5f9; }
.user .who { padding: 12px 16px; border-bottom: 1px solid var(--p-border); }
.user .who div:first-child { font-weight: 600; }
.user .who div:last-child { font-size: 13px; color: #64748b; overflow: hidden; text-overflow: ellipsis; }
.user .who div:last-child { font-size: 13px; color: var(--p-text-3); overflow: hidden; text-overflow: ellipsis; }
.user a { display: block; padding: 10px 16px; font-size: 14px; }
.user a:hover { background: #f3f0fd; }
.user a:hover { background: var(--p-hover); }
@media (max-width: 480px) { .brand span { display: none; } }
`;
@@ -112,8 +116,24 @@ class HiTopbar extends HTMLElement {
private nav: Navigation | null = null;
private open: 'apps' | 'user' | null = null;
private themeObserver?: MutationObserver;
private darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
/** Folgt dem Farbschema des Tools: data-theme="dark" (VVL, Portal), Klasse "dark" (Tailwind) oder System. */
private syncTheme = () => {
const html = document.documentElement;
const attr = html.getAttribute('data-theme');
const dark = attr ? attr === 'dark' : html.classList.contains('dark') || this.darkQuery.matches;
if (dark) this.setAttribute('theme', 'dark');
else this.removeAttribute('theme');
};
connectedCallback(): void {
document.documentElement.style.setProperty('--hi-topbar-height', `${HEIGHT}px`);
this.syncTheme();
this.themeObserver = new MutationObserver(this.syncTheme);
this.themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme', 'class'] });
this.darkQuery.addEventListener('change', this.syncTheme);
this.nav = readCache();
this.render();
void this.load();
@@ -122,6 +142,8 @@ class HiTopbar extends HTMLElement {
}
disconnectedCallback(): void {
this.themeObserver?.disconnect();
this.darkQuery.removeEventListener('change', this.syncTheme);
document.removeEventListener('mousedown', this.onOutside);
document.removeEventListener('keydown', this.onKey);
}