/* ============================================================================= zero.css — die gemeinsame Gestaltung des Zero-Netzes. ============================================================================= EINE Datei für alle Dienste: Konto, Kalender, Finance, Office, Konverter, Chat, Cloud und die Karte. Wer hier etwas ändert, ändert es überall. /var/www/shared/css/zero.css <- diese Datei, die Quelle /var/www/shared/deploy-ui.sh <- verteilt sie an alle Dienste Die Kopien in den Diensten werden vom Verteilskript überschrieben. Bitte nicht dort ändern, sondern hier. Warum Kopien und kein gemeinsamer Verweis: Die Sicherheitsregel jedes Dienstes trägt `style-src 'self'` — ein Stylesheet von einer fremden Herkunft würde der Browser gar nicht erst laden. Jeder Dienst liefert seine eigene Kopie aus, aus derselben Quelle. Aufbau: 1. Farben und Maße — der Wortschatz. Nur hier stehen Zahlen. 2. Grundlage — Körper, Formularteile, Schaltflächen, Karten. 3. Anmeldemaske — überall dieselbe, in jedem Dienst. 4. Anwendungsgerüst — Navigation links, Blattfenster, Listen. Jeder Dienst legt darüber sein eigenes Stylesheet mit dem, was nur ihn betrifft — office.css, kalender.css, finance.css, konverter.css. ============================================================================= */ /* --- 1. Farben und Maße --------------------------------------------------- Der ganze Wortschatz auf einmal. Wer eine Farbe braucht, nimmt einen Namen von hier; wer eine neue braucht, trägt sie hier ein. Hex-Werte weiter unten sind Einzelfälle und kein Vorbild. Die Farbwelt stammt aus Zero Chat: dunkler Grund, EIN Akzent in Mint, Rot nur für Gefährliches, Gelb nur für Warnungen. Drei Bedeutungsfarben und sonst keine — was keine Bedeutung hat, bleibt grau. */ :root{ /* Eine Schriftfamilie und EINE Fettstufe für Betontes. Vorher stand an zwanzig Stellen `font-weight:800` — das ist keine Betonung mehr, das ist der Normalzustand. 700 trägt genauso und wirkt ruhiger. */ font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; font-feature-settings:"cv05","ss01"; /* geschlossenes ß, einstöckiges g */ --fett:700; --fett-leicht:600; /* Grund und Schrift */ --grund:#080b12; /* der Untergrund der ganzen Seite */ --text:#e8ecf4; /* Fließtext auf dem Grund */ --muted:#8c98aa; /* Nebensächliches, Zusätze, Erklärungen */ /* Flächen: vom Grund nach oben, drei Stufen */ --panel:#111722; /* Karten und Leisten */ --panel2:#151d2a; /* was auf einer Karte noch einmal absetzt */ --flaeche:#1a2331; /* Schaltflächen im Ruhezustand */ --flaeche-hoch:#22304a; /* dieselbe beim Überfahren */ --line:#263044; /* Trennlinien und Ränder von Karten */ --rand:#303c50; /* Ränder von Schaltflächen */ /* Eingabefelder — dunkler als ihre Umgebung, damit sie als Loch lesbar sind */ --feld:#090e16; --feld-rand:#2b3548; /* Der Akzent. Genau einer, im ganzen Netz derselbe. */ --accent:#62e5bd; --accent-hell:#85f6d3; --accent-tief:#31bd93; --auf-akzent:#06110e; /* Schrift AUF dem Akzent */ /* Die drei Bedeutungsfarben */ --gut-feld:#15241f; --gut-rand:#2c5a4a; --warn-feld:#2c2413; --warn-rand:#6a5622; --warn-text:#f0c86a; --bad-feld:#481d27; --bad-rand:#80303f; --bad-text:#ffd7dc; --danger:#ff7785; /* Rundungen. Größere Flächen runden stärker — sonst wirkt eine große Karte wie ein Kasten mit abgeknabberten Ecken. */ --rund-klein:10px; --rund:12px; --rund-gross:18px; --rund-voll:999px; color:var(--text);background:var(--grund); } /* --app-height folgt dem tatsächlich sichtbaren Bereich (siehe viewport.js) und berücksichtigt Browserleisten und die Bildschirmtastatur. dvh ist der erste Rückfall, 100vh der zweite für ältere Browser. */ :root{--app-height:100vh;--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px); --safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px)} @supports (height:100dvh){:root{--app-height:100dvh}} *{box-sizing:border-box} body{margin:0;min-height:var(--app-height);overscroll-behavior:none; background:radial-gradient(circle at 30% -10%,#182534 0,var(--grund) 38%); -webkit-tap-highlight-color:transparent} button,input,select,textarea{font:inherit} button{cursor:pointer;border:0;background:none;color:inherit} /* --- Anmeldemaske -------------------------------------------------------- */ /* Zweigeteilt: links die Aussage, rechts das Formular. Auf schmalen Bildschirmen bleibt nur das Formular. */ .auth{min-height:var(--app-height);display:grid;grid-template-columns:1.1fr .9fr} .story{display:flex;flex-direction:column;justify-content:center;padding:8vw;background:linear-gradient(125deg,#0d151b,#101e26 55%,#0d131c)} .story h1{font-size:clamp(3rem,6vw,6rem);line-height:.95;letter-spacing:-.06em;margin:12vh 0 24px} .story p,.muted{color:var(--muted);line-height:1.7} .authbox{display:grid;place-items:center;padding:30px} .authbox form{width:min(420px,100%);padding:34px} .brand{display:flex;align-items:center;gap:10px;font-weight:var(--fett)} .logo{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--rund); color:var(--auf-akzent);background:var(--accent);font-weight:var(--fett)} .security{font-size:12px;color:var(--accent)} /* --- Flächen und Formularteile ------------------------------------------ */ /* Auch die Karte kommt ohne Verlauf aus. Eine Fläche, ein Rand, ein Schatten — was darauf steht, soll wirken, nicht der Untergrund. */ .card{background:#111a24ed;border:1px solid var(--line);border-radius:var(--rund-gross); box-shadow:0 18px 50px #0006} label{display:grid;gap:7px;margin:15px 0;color:#c9d0dc;font-size:13px;font-weight:700} /* `hidden` muss `display` schlagen. Ohne diese Zeile bleibt ein `