/* * testr. - gemeinsames Stylesheet von Testbogen und Verwaltung * ============================================================ * * Hier steht, was index.html (der Testbogen des Testers) und admin.html (die Verwaltung) * gleich aussehen lassen soll: Farben, feste Leiste, Knoepfe, Dialog- und Hilfefenster, * Bildvorschau, Kennzahlenkacheln. Beide Seiten binden zuerst diese Datei ein und danach * ihre eigene - css/index.css bzw. css/admin.css -, die sie ergaenzt und wo noetig * ueberschreibt. * * Ladereihenfolge im Kopf beider Seiten: * <- Font Awesome * <- diese Datei * <- bzw. admin.css * * Nicht verwandt mit /_raw/css/core.css: Das ist der Kern der App-Familie (MyTripWallet, * Mallorca spielt Golf) mit eigenen Tokens (--primary, --card-bg). testr. hat sein eigenes * Farbschema (--accent, --surface, --ink) und teilt mit den Apps nur den Aufbau des * Hilfefensters. */ /* ============================================================================= FARB-TOKENS Dunkel gilt in zwei Faellen, und beide brauchen dieselben Werte: - das Geraet steht auf dunkel UND niemand hat hier ausdruecklich hell gewaehlt - der Knopf in der Leiste steht auf dunkel Das data-theme am setzt js/i18n.js noch vor diesem Stylesheet; ohne Attribut entscheidet allein das Geraet. Die Werte stehen deshalb zweimal da - ein Regelblock kann nicht gleichzeitig in einer @media-Abfrage und ausserhalb stehen. Wer hier eine Farbe aendert, aendert sie in BEIDEN Bloecken. ============================================================================= */ :root{ --bg:#f4f7fb; --surface:#fff; --ink:#10202f; --ink-soft:#56636f; --accent:#0a66ff; --accent-soft:#e4edff; --border:#dde4ec; --done:#0f9d58; --done-soft:#e3f5ea; --crit-bg:#ffe3e1; --crit-ink:#b3261e; --tier-bg:#fff2cf; --tier-ink:#8a6100; --plat-bg:#e4edff; --plat-ink:#0a4bb3; --shadow:0 1px 2px rgba(16,32,47,.06),0 8px 24px rgba(16,32,47,.06); /* Hoehe der festen Leiste. Der Wert hier ist nur der Ausgangswert fuer den ersten Aufbau - beim Anzeigen misst js/core.js die Leiste und schreibt die tatsaechliche Hoehe hinein, damit kein Spalt entsteht. */ --navh:57px; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#0b1420; --surface:#111d2c; --ink:#eef3f8; --ink-soft:#9db0c2; --accent:#5b9dff; --accent-soft:#16273f; --border:#24354a; --done:#48c98a; --done-soft:#12301f; --crit-bg:#3a1a1a; --crit-ink:#ff8f88; --tier-bg:#3a2e0e; --tier-ink:#ffcf5c; --plat-bg:#16273f; --plat-ink:#8fb8ff; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35); } } :root[data-theme="dark"]{ --bg:#0b1420; --surface:#111d2c; --ink:#eef3f8; --ink-soft:#9db0c2; --accent:#5b9dff; --accent-soft:#16273f; --border:#24354a; --done:#48c98a; --done-soft:#12301f; --crit-bg:#3a1a1a; --crit-ink:#ff8f88; --tier-bg:#3a2e0e; --tier-ink:#ffcf5c; --plat-bg:#16273f; --plat-ink:#8fb8ff; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35); } /* ============================================================================= GRUNDLAGEN Schriftgroesse und Innenabstaende des body setzt jede Seite selbst: Der Testbogen liest sich wie ein Formular, die Verwaltung wie ein Arbeitsplatz. ============================================================================= */ *{box-sizing:border-box} html,body{margin:0;background:var(--bg);color:var(--ink); font-family:ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif} a{color:var(--accent)} ::selection{background:var(--accent-soft)} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* ============================================================================= FESTE LEISTE Halbdurchsichtig mit Weichzeichner, damit der Inhalt darunter durchlaeuft. Was rechts darin steht, entscheidet die Seite - die Marke links ist auf beiden gleich. ============================================================================= */ .navbar{position:fixed;top:0;left:0;right:0;z-index:60; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:saturate(160%) blur(9px); -webkit-backdrop-filter:saturate(160%) blur(9px); border-bottom:1px solid var(--border)} .nav{display:flex;align-items:center;gap:12px;padding:13px 0} .nav .grow{flex:1 1 auto} .logo{display:inline-flex;align-items:center;font-size:21px;font-weight:750; letter-spacing:-.02em;text-decoration:none;color:var(--ink);white-space:nowrap} /* Ohne border-radius: das PNG bringt seine runden Ecken schon mit. */ .logo img{display:block;height:30px;width:auto;margin-right:10px} .logo .dot{color:var(--accent)} .logo .sep{color:var(--ink-soft);font-weight:400;margin:0 .35em} .logo .sub{font-weight:650;font-size:17px;color:var(--ink-soft);letter-spacing:0} /* ============================================================================= KNOEPFE Groesse und Innenabstand des Hauptknopfes weichen ab: Im Testbogen ist "Absenden" der eine grosse Knopf der Seite, in der Verwaltung steht er in Reihen neben anderen. Beide Seiten setzen .btn.primary deshalb selbst. ============================================================================= */ .btn{font-family:ui-sans-serif,-apple-system,sans-serif;font-size:15px;font-weight:600; color:var(--ink-soft);background:var(--surface);border:1px solid var(--border); border-radius:9px;padding:10px 17px;cursor:pointer} .btn:hover{color:var(--ink);border-color:var(--accent)} .btn.primary{background:var(--accent);color:#fff;border-color:transparent} .btn.primary:hover{filter:brightness(1.08);color:#fff} code{font-family:ui-monospace,"SF Mono",Menlo,monospace;background:var(--accent-soft); padding:2px 6px;border-radius:4px} /* ============================================================================= DIALOGFENSTER Ersetzt alert/confirm/prompt des Browsers: Die halten das ganze Fenster an, sehen auf jedem System anders aus und lassen sich nicht beschriften. Beide Seiten nutzen dieselbe Flaeche - es soll hier nur EINE Art von Ueberlagerung geben. Die Breite der Karte setzt jede Seite selbst. ============================================================================= */ .sheet{position:fixed;inset:0;background:rgba(16,32,47,.55);z-index:80; display:none;align-items:center;justify-content:center;padding:20px; backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)} .sheet.on{display:flex} @keyframes sheetIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}} /* ============================================================================= HILFEFENSTER Aufbau und Klassennamen absichtlich identisch zur MyTripWallet-App (/_mytripwallet/index.html): #help-modal > .modal-content > .modal-header mit .modal-grabber, .close-btn und darunter das iframe. Wer eine der Anwendungen kennt, findet sich in der anderen zurecht - die Farben sind hier die von testr, der Bau ist derselbe. Ganzseitig statt als Kasten wie .sheet: Die Hilfe ist eine Seite zum Lesen und Scrollen, kein Dialog mit einer Frage. Welche Datei im iframe landet, entscheidet initHelpModal() in js/core.js anhand der eingestellten Sprache. ============================================================================= */ .help-btn{font-family:ui-sans-serif,-apple-system,sans-serif;font-size:15.5px; line-height:1;color:var(--ink-soft);background:var(--surface);border:1px solid var(--border); border-radius:9px;width:37px;height:37px;padding:0;cursor:pointer;flex:0 0 auto; display:inline-flex;align-items:center;justify-content:center} .help-btn:hover{border-color:var(--accent);color:var(--accent)} .modal{position:fixed;inset:0;background:rgba(16,32,47,.55);z-index:2500; display:none;align-items:center;justify-content:center; backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)} .modal .modal-content{height:100vh;height:100dvh;max-height:100vh;max-height:100dvh; width:100%;padding:0;margin:0;border-radius:0;display:flex;flex-direction:column; overflow:hidden;background:var(--bg)} .modal .modal-header{flex-shrink:0;margin:0; padding:env(safe-area-inset-top,0) 20px 12px 20px; padding-top:calc(env(safe-area-inset-top,0px) + 15px); border-bottom:1px solid var(--border);background:var(--surface); position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between} .modal .modal-header h2{font-size:18px;font-weight:750;letter-spacing:-.01em;margin:0} /* Der Griff ist auf dem Telefon der Hinweis, dass sich das Fenster nach unten wegwischen laesst. Am Rechner stoert er nicht, also steht er immer da. */ .modal .modal-grabber{position:absolute;top:6px;left:50%;transform:translateX(-50%); width:38px;height:4px;border-radius:2px;background:var(--border)} .modal .close-btn{font-family:ui-sans-serif,-apple-system,sans-serif;font-size:22px; line-height:1;color:var(--ink-soft);background:none;border:0;padding:6px 4px;cursor:pointer} .modal .close-btn:hover{color:var(--accent)} .modal iframe{flex:1 1 auto;width:100%;height:100%;border:none;display:block; background:var(--bg)} @media print{.modal{display:none !important}} /* ============================================================================= BILDVORSCHAU Ein angetipptes Bild gross. Bewusst keine Bildergalerie: ein Bild, ein Klick zum Schliessen - mehr braucht es beim Sichten eines Screenshots nicht. ============================================================================= */ .lightbox{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:120;display:none; align-items:center;justify-content:center;padding:24px;cursor:zoom-out} .lightbox.on{display:flex} .lightbox img{max-width:100%;max-height:100%;border-radius:8px} /* ============================================================================= KENNZAHLEN-KACHELN Rahmen und Farbe der Zahl sind gleich; Innenabstand und Untergrund setzt jede Seite selbst - in der Verwaltung stehen sie auf --surface und tragen zusaetzlich einen Ring, im Testbogen schlicht auf --bg. ============================================================================= */ .stat.ok .n{color:var(--done)} .stat.fail .n{color:var(--crit-ink)} .stat.na .n{color:var(--ink-soft)} /* ============================================================================= BEWEGUNG UND DRUCK Auf Papier immer hell. Ohne das druckte ein dunkel eingestellter Bildschirm helle Schrift auf weisses Blatt - lesbar ist daran nichts. Der zweite Selektor muss sein: Er sticht das :root[data-theme="dark"] von oben. Was jede Seite darueber hinaus ausblendet, steht in ihrer eigenen Datei. ============================================================================= */ @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} @media print{ :root,:root[data-theme]{ --bg:#fff; --surface:#fff; --ink:#111; --ink-soft:#555; --accent:#0a4bb3; --accent-soft:#fff; --border:#bbb; --done:#0b7a45; --done-soft:#fff; --crit-bg:#fff; --crit-ink:#a3231b; --tier-bg:#fff; --tier-ink:#6b4a00; --plat-bg:#fff; --plat-ink:#0a4bb3; --shadow:none; } body{background:#fff} .lightbox{display:none !important} } /* ============================================================================= HILFE ALS SEITLICHES PANEL Faehrt von rechts ein und steht NEBEN dem, worueber sie spricht. Bis zum 28.08.2026 war es hier ein bildschirmfuellendes Fenster (#help-modal) und in cookiemonster sogar ein neuer Browser-Tab - drei Bauweisen fuer denselben Zweck. Beim Vollbild ist die Anwendung verdeckt, beim neuen Fenster ganz weg; wer eine Einstellung sucht, muss sie aber sehen, waehrend er liest. Uebernommen aus _mytripwallet/css/site.css, damit alle Anwendungen dieselbe Hilfe haben. Die Mechanik steckt in js/help.js (in allen Apps gleich). Das alte Markup #help-modal steht in den Seiten noch, wird aber nicht mehr geoeffnet - js/help.js baut sein Panel selbst. Unter 800px nimmt das Panel die volle Breite: Auf dem Telefon waere ein Streifen von 40 Prozent unlesbar. ============================================================================= */ .help-overlay{position:fixed;inset:0;z-index:2400;background:rgba(3,6,12,.6); display:none;opacity:0;transition:opacity .3s ease} .help-overlay.open{display:block;opacity:1} .help-panel{position:fixed;top:0;right:0;height:100%;width:40%;max-width:520px;min-width:320px; background:var(--surface);border-left:1px solid var(--border); box-shadow:-30px 0 60px -20px rgba(0,0,0,.35);z-index:2500; display:flex;flex-direction:column;transform:translateX(100%);transition:transform .32s ease} .help-panel.open{transform:translateX(0)} @media (max-width:800px){ .help-panel{width:100%;max-width:none;min-width:0} } .help-panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0} .help-panel-header h3{margin:0;font-size:16px;font-weight:750;color:var(--ink)} .help-panel iframe{flex:1;width:100%;border:0;background:var(--surface)} .help-close{width:40px;height:40px;flex:0 0 auto;border-radius:50%; border:1px solid var(--border);background:var(--surface);color:var(--ink); font:inherit;font-size:24px;line-height:1;cursor:pointer;display:grid;place-content:center} .help-close:hover{border-color:var(--accent);color:var(--accent)} @media (prefers-reduced-motion:reduce){ .help-panel,.help-overlay{transition:none} }