/* ===================================================================== R.DiagX.Web — Design-System "Calibrated Instrument Bench" Alle Komponenten & Tokens handgebaut (kein MudBlazor). ===================================================================== */ /* ===================================================================== Design Tokens – ROSI Corporate Identity (Basis #265aa6) 14 Themes, gruppiert wie im Auswahlfenster (siehe ThemeCatalog) dunkel: rosi-dark · midnight · graphite · petrol · indigo · amber hell: rosi-light · paper · nordic · zinc · sage · solar kontrast: contrast-dark · contrast-light ===================================================================== */ /* ---------- Theme-unabhängige Tokens ---------- */ :root { --brand: #265aa6; /* ROSI-CI (Referenz) */ --brand-600: #1f4d8f; --brand-400: #4a83d0; /* Die dunkelblaue CI-Fläche. Sie liegt hinter dem ROSI-Logo oben links in der Navigation und in der Kopfzeile von Ro.Ki – beide sollen dieselbe sein, und zweimal dieselben Hexwerte zu tippen heißt, dass sie beim nächsten Mal auseinanderlaufen. */ --brand-grad: linear-gradient(135deg, #1c4278 0%, #0f2340 100%); --radius: 10px; --radius-sm: 6px; --font-ui: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Consolas', ui-monospace, monospace; /* gemeinsame Signal-/Status-Palette (Amber bleibt Warn-Signal) */ --s-amber: #F5A623; --s-cyan: #38BDF8; --s-violet: #A78BFA; --s-green: #34D399; --s-rose: #FB7185; --s-slate: #94A3B8; } /* ---------- ROSI Dark (Standard) ---------- */ :root, :root[data-theme="rosi-dark"] { --bg: #0A0E15; --bg-grid: rgba(120,170,240,0.022); --panel: #111823; --panel-raised: #18212E; --panel-inset: #0D131C; --line: #212C3B; --line-strong: #2C3A4D; --text: #E6EDF6; --text-dim: #8A98AB; --text-faint: #586475; --accent: #3E7BD1; /* aufgehelltes CI-Blau für Dark */ --accent-hover: #5590de; --accent-soft: rgba(62,123,209,0.15); --accent-glow: rgba(62,123,209,0.5); --on-accent: #FFFFFF; --ok: #34D399; --warn: #F5A623; --fault: #F0483E; --stale: #6B7684; --info: #4A9FE8; --shadow: 0 18px 40px -20px rgba(0,0,0,0.72); color-scheme: dark; } /* ---------- ROSI Light ---------- */ :root[data-theme="rosi-light"] { --bg: #EDF1F6; --bg-grid: rgba(38,90,166,0.04); --panel: #FFFFFF; --panel-raised: #F5F8FC; --panel-inset: #EEF3F9; --line: #D9E1EC; --line-strong: #C2CEDD; --text: #13233A; --text-dim: #536379; --text-faint: #8A99AD; --accent: #265AA6; /* reines CI-Blau */ --accent-hover: #1f4d8f; --accent-soft: rgba(38,90,166,0.10); --accent-glow: rgba(38,90,166,0.35); --on-accent: #FFFFFF; --ok: #0F9D63; --warn: #C77D0A; --fault: #D3382E; --stale: #94A3B8; --info: #265AA6; --shadow: 0 14px 34px -22px rgba(20,40,70,0.34); color-scheme: light; } /* ---------- Paper (warmes Off-White, hoher Kontrast) ---------- */ :root[data-theme="paper"] { --bg: #F7F6F3; --bg-grid: rgba(60,50,40,0.035); --panel: #FFFFFF; --panel-raised: #FBFAF8; --panel-inset: #F2F0EC; --line: #E0DDD6; --line-strong: #C8C4BA; --text: #1A1815; --text-dim: #5A554D; --text-faint: #8C867C; --accent: #265AA6; /* reines CI-Blau auf warmem Grund */ --accent-hover: #1f4d8f; --accent-soft: rgba(38,90,166,0.10); --accent-glow: rgba(38,90,166,0.32); --on-accent: #FFFFFF; --ok: #0E7A50; --warn: #A8620A; --fault: #C22F26; --stale: #8C867C; --info: #265AA6; --shadow: 0 14px 34px -22px rgba(40,34,26,0.32); color-scheme: light; } /* ---------- Nordic (kühles Blaugrau, gedämpft) ---------- */ :root[data-theme="nordic"] { --bg: #E9EEF4; --bg-grid: rgba(46,109,164,0.045); --panel: #F7FAFD; --panel-raised: #FFFFFF; --panel-inset: #E4EBF3; --line: #D2DCE7; --line-strong: #B4C3D3; --text: #1B2A3A; --text-dim: #55677C; --text-faint: #8496A9; --accent: #2E6DA4; --accent-hover: #245A8B; --accent-soft: rgba(46,109,164,0.11); --accent-glow: rgba(46,109,164,0.34); --on-accent: #FFFFFF; --ok: #0F8A5F; --warn: #B06E09; --fault: #C9382D; --stale: #8496A9; --info: #2E6DA4; --shadow: 0 14px 34px -22px rgba(27,42,58,0.30); color-scheme: light; } /* ---------- Solar (helles Beige, Amber-Akzent – Pendant zu amber) ---------- */ :root[data-theme="solar"] { --bg: #F6F1E7; --bg-grid: rgba(140,100,20,0.05); --panel: #FFFDF8; --panel-raised: #FFFFFF; --panel-inset: #F1EADB; --line: #E3D9C4; --line-strong: #CBBE9F; --text: #241D10; --text-dim: #6B5D45; --text-faint: #9C8D72; --accent: #B4770E; /* abgedunkeltes Amber – lesbar auf Hell */ --accent-hover: #96620A; --accent-soft: rgba(180,119,14,0.12); --accent-glow: rgba(180,119,14,0.35); --on-accent: #FFFFFF; --ok: #0E7A50; --warn: #B4770E; --fault: #C22F26; --stale: #9C8D72; --info: #2E6DA4; --shadow: 0 14px 34px -22px rgba(60,45,15,0.30); color-scheme: light; } /* ---------- Midnight (tiefblau, passend zum Login-Hintergrund) ---------- */ :root[data-theme="midnight"] { --bg: #050B15; --bg-grid: rgba(90,150,230,0.03); --panel: #0B1728; --panel-raised: #122238; --panel-inset: #081221; --line: #16283F; --line-strong: #21395A; --text: #DCE8F8; --text-dim: #7C90AE; --text-faint: #4C607D; --accent: #4C86D6; --accent-hover: #6699e2; --accent-soft: rgba(76,134,214,0.16); --accent-glow: rgba(76,134,214,0.55); --on-accent: #04101F; --ok: #34D399; --warn: #F5A623; --fault: #FB5D53; --stale: #5A6E8C; --info: #4C86D6; --shadow: 0 20px 44px -20px rgba(0,0,0,0.8); color-scheme: dark; } /* ---------- Graphite (neutral dunkel) ---------- */ :root[data-theme="graphite"] { --bg: #131417; --bg-grid: rgba(255,255,255,0.02); --panel: #1B1D21; --panel-raised: #23262B; --panel-inset: #17181B; --line: #2B2F35; --line-strong: #3A3F47; --text: #E7E9ED; --text-dim: #9AA0A9; --text-faint: #666C75; --accent: #4A83D0; --accent-hover: #5f95dc; --accent-soft: rgba(74,131,208,0.15); --accent-glow: rgba(74,131,208,0.5); --on-accent: #FFFFFF; --ok: #3DD39B; --warn: #F5A623; --fault: #F0483E; --stale: #6B7178; --info: #4A83D0; --shadow: 0 18px 40px -20px rgba(0,0,0,0.75); color-scheme: dark; } /* ---------- Amber (Legacy-Look) ---------- */ :root[data-theme="amber"] { --bg: #0B0F14; --bg-grid: rgba(255,255,255,0.018); --panel: #12181F; --panel-raised: #1A2029; --panel-inset: #0E131A; --line: #232B36; --line-strong: #2E3846; --text: #E6EDF3; --text-dim: #8B97A5; --text-faint: #5B6672; --accent: #F5A623; --accent-hover: #ffb734; --accent-soft: rgba(245,166,35,0.14); --accent-glow: rgba(245,166,35,0.45); --on-accent: #10130A; --ok: #34D399; --warn: #F5A623; --fault: #F0483E; --stale: #6B7684; --info: #38BDF8; --shadow: 0 18px 40px -20px rgba(0,0,0,0.7); color-scheme: dark; } /* ---------- Petrol (dunkel) ---------- */ /* Blaugruen statt Blau: derselbe kuehle Eindruck, aber deutlich von ROSI Dark und Midnight zu unterscheiden - und Petrol ist keine Statusfarbe, kollidiert also nicht mit gruen/bernstein/rot. */ :root[data-theme="petrol"] { --bg: #081316; --bg-grid: rgba(120,220,235,0.022); --panel: #0E1D21; --panel-raised: #14272C; --panel-inset: #0A171A; --line: #1B3036; --line-strong: #254149; --text: #E2EEF0; --text-dim: #88A3A9; --text-faint: #566D73; --accent: #2A9DB5; --accent-hover: #3BB4CD; --accent-soft: rgba(42,157,181,0.15); --accent-glow: rgba(42,157,181,0.45); --on-accent: #04191E; --ok: #34D399; --warn: #F5A623; --fault: #F0483E; --stale: #63787E; --info: #38BDF8; --shadow: 0 18px 40px -20px rgba(0,0,0,0.72); color-scheme: dark; } /* ---------- Indigo (dunkel) ---------- */ /* Violettblau. Der einzige Akzent im Katalog, der nicht aus der blau-gruenen Haelfte des Farbkreises kommt - und trotzdem keine Statusfarbe. Fuer Arbeitsplaetze, an denen mehrere Portale nebeneinander offen sind: Man erkennt das Fenster an der Farbe. */ :root[data-theme="indigo"] { --bg: #0B0A14; --bg-grid: rgba(170,160,255,0.024); --panel: #15131F; --panel-raised: #1D1B2A; --panel-inset: #100E19; --line: #252236; --line-strong: #332F47; --text: #E9E7F4; --text-dim: #9994AE; --text-faint: #635E78; --accent: #8B7BE8; --accent-hover: #9E90F0; --accent-soft: rgba(139,123,232,0.16); --accent-glow: rgba(139,123,232,0.45); --on-accent: #0D0A1A; --ok: #34D399; --warn: #F5A623; --fault: #F0483E; --stale: #6E6885; --info: #8B7BE8; --shadow: 0 18px 40px -20px rgba(0,0,0,0.75); color-scheme: dark; } /* ---------- Zinc (hell) ---------- */ /* Neutralgrau ohne Farbstich. Paper ist warm, Nordic kuehl - hier ist die Flaeche ausdruecklich farblos, damit die Statusfarben und die Diagramme das einzige Farbige auf dem Bildschirm sind. Die sachlichste der hellen Fassungen. */ :root[data-theme="zinc"] { --bg: #F2F3F5; --bg-grid: rgba(30,32,36,0.035); --panel: #FFFFFF; --panel-raised: #F7F8F9; --panel-inset: #F0F1F3; --line: #DCDEE2; --line-strong: #C4C7CD; --text: #1A1C1F; --text-dim: #5A5F67; --text-faint: #8B9098; --accent: #2F5FA8; --accent-hover: #264F8E; --accent-soft: rgba(47,95,168,0.10); --accent-glow: rgba(47,95,168,0.32); --on-accent: #FFFFFF; --ok: #0F9D63; --warn: #C77D0A; --fault: #D3382E; --stale: #8B9098; --info: #2F5FA8; --shadow: 0 14px 34px -22px rgba(20,25,35,0.30); color-scheme: light; } /* ---------- Sage (hell) ---------- */ /* Graugruen mit Petrol-Akzent. Der Grund ist leicht gruenlich, der AKZENT bleibt Petrol und nicht Gruen: Gruen ist Statusfarbe (siehe ThemeCatalog), und ein gruener Knopf neben einer gruenen Statuslampe heisst zweimal etwas anderes. */ :root[data-theme="sage"] { --bg: #EDF2EF; --bg-grid: rgba(25,60,50,0.035); --panel: #FBFDFB; --panel-raised: #F3F7F4; --panel-inset: #E9F0EC; --line: #D5E0DA; --line-strong: #BCCCC3; --text: #152220; --text-dim: #4F6159; --text-faint: #82948B; --accent: #1F7C8C; --accent-hover: #186675; --accent-soft: rgba(31,124,140,0.11); --accent-glow: rgba(31,124,140,0.32); --on-accent: #FFFFFF; --ok: #0F9D63; --warn: #C77D0A; --fault: #D3382E; --stale: #82948B; --info: #1F7C8C; --shadow: 0 14px 34px -22px rgba(20,40,35,0.28); color-scheme: light; } /* ---------- Kontrast Dunkel ---------- */ /* Reines Schwarz, reines Weiss, und Raender, die man sieht. Das ist kein dunkles Theme mit mehr Kontrast, sondern eine Bedienhilfe: Jede Textfarbe erreicht gegen ihren Grund mindestens 7:1 (WCAG AAA fuer Fliesstext), und --text-dim ist nicht mehr grau, sondern nur wenig abgesetzt - gedaempfte Schrift ist genau das, was hier nicht helfen wuerde. Die Statusfarben sind aufgehellt: #34D399 auf Schwarz ist lesbar, #0F9D63 nicht. */ :root[data-theme="contrast-dark"] { --bg: #000000; --bg-grid: rgba(255,255,255,0.03); --panel: #0A0A0A; --panel-raised: #141414; --panel-inset: #050505; --line: #5A5A5A; --line-strong: #8A8A8A; --text: #FFFFFF; --text-dim: #D6D6D6; --text-faint: #ABABAB; --accent: #5AB0FF; --accent-hover: #82C4FF; --accent-soft: rgba(90,176,255,0.22); --accent-glow: rgba(90,176,255,0.6); --on-accent: #000000; --ok: #57E6A6; --warn: #FFC24D; --fault: #FF7A6E; --stale: #ABABAB; --info: #5AB0FF; --shadow: none; color-scheme: dark; } /* ---------- Kontrast Hell ---------- */ :root[data-theme="contrast-light"] { --bg: #FFFFFF; --bg-grid: rgba(0,0,0,0.035); --panel: #FFFFFF; --panel-raised: #F2F2F2; --panel-inset: #EBEBEB; --line: #6A6A6A; --line-strong: #3A3A3A; --text: #000000; --text-dim: #2E2E2E; --text-faint: #555555; --accent: #0B4FA8; --accent-hover: #093C80; --accent-soft: rgba(11,79,168,0.14); --accent-glow: rgba(11,79,168,0.45); --on-accent: #FFFFFF; --ok: #056B43; --warn: #8A5200; --fault: #A5201A; --stale: #555555; --info: #0B4FA8; --shadow: none; color-scheme: light; } /* ---------- Was die Kontrastthemes ueber Farben hinaus aendern ---------- Farbtoken allein reichen nicht. Diese Oberflaeche traegt einen Teil ihrer Gliederung in duennen Linien, halbdurchsichtigen Flaechen und Schatten - und genau das ist es, was bei eingeschraenktem Sehen zuerst verschwindet. Deshalb hier: * Raender einen Punkt dicker. Ein 1px-Rand bei 125 % Skalierung auf einem Billigmonitor ist kein Rand. * Keine Schatten und keine Weichzeichner. Sie ersetzen einen Rand durch eine Ahnung. * Der Tastaturfokus doppelt so kraeftig. Wer den Kontrastmodus braucht, bedient die Seite oefter mit der Tastatur. * Der animierte Hintergrund bleibt aus. Er ist Zierde, und Zierde unter Text ist genau das Gegenteil von Kontrast. */ :root[data-theme="contrast-dark"] .panel, :root[data-theme="contrast-light"] .panel, :root[data-theme="contrast-dark"] .table-wrap, :root[data-theme="contrast-light"] .table-wrap, :root[data-theme="contrast-dark"] .btn, :root[data-theme="contrast-light"] .btn, :root[data-theme="contrast-dark"] .input, :root[data-theme="contrast-light"] .input, :root[data-theme="contrast-dark"] .select, :root[data-theme="contrast-light"] .select, :root[data-theme="contrast-dark"] .chip, :root[data-theme="contrast-light"] .chip { border-width: 2px; } :root[data-theme="contrast-dark"] *, :root[data-theme="contrast-light"] * { box-shadow: none !important; backdrop-filter: none !important; } :root[data-theme="contrast-dark"] :focus-visible, :root[data-theme="contrast-light"] :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } /* Der Hintergrund bleibt im Kontrastmodus aus - unabhaengig von der Einstellung. Das ist bewusst nicht abwaehlbar: Wer Kontrast waehlt, waehlt gegen Zierde unter Text. */ :root[data-theme="contrast-dark"] .cx-quiet, :root[data-theme="contrast-light"] .cx-quiet { display: none; } /* ---------- Der animierte Hintergrund, abschaltbar ---------- Als Attribut am Wurzelelement und nicht als Klasse an einem Element im Baum: Es wird genauso frueh gesetzt wie data-theme (siehe js/app.js), noch bevor Blazor laeuft. Sonst liefe der Hintergrund beim Laden einen Moment mit und verschwaende dann - und genau das waere bei jemandem, der Bewegung abbestellt hat, das Aergerlichste. */ :root[data-backdrop="off"] .cx-quiet { display: none; } /* ---------- Reset / Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-body); background-color: var(--bg); background-image: linear-gradient(var(--bg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px); background-size: 40px 40px; color: var(--text); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } h1,h2,h3,h4 { font-family: var(--font-ui); font-weight: 600; letter-spacing: -0.01em; margin: 0; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } ::selection { background: var(--accent-soft); } /* Scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; } /* Focus */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } /* ---------- Micro-Label (Kanal-Stil) ---------- */ .eyebrow { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); } /* ---------- Mono-Readout (Signatur) ---------- */ .readout { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .readout-lg { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; } .readout-unit { font-size: 0.55em; color: var(--text-dim); margin-left: 0.35em; font-weight: 500; } @keyframes phosphor { 0% { color: var(--accent); text-shadow: 0 0 14px var(--accent-glow); } 100% { color: var(--text); text-shadow: none; } } .readout.tick { animation: phosphor 0.9s ease-out; } @media (prefers-reduced-motion: reduce) { /* Die Leiterplatte hört als Erstes auf, sich zu bewegen – auf der Anmeldeseite wie auf dem Dashboard, denn beide benutzen dieselben Klassen (siehe CircuitBackdrop). Ihre Bewegung ist Zierde, und Zierde ist das Erste, was jemand abbestellt, dem Bewegung schadet. */ .lb-orb, .cx-glow use, .cx-pulse use { animation: none; } /* Ohne Lauf kein Strichmuster: Der helle Abschnitt bliebe sonst irgendwo auf seiner Bahn liegen, an einer Stelle, die nichts bedeutet. Stattdessen verschwindet der Strom, und es bleibt eine Leiterplatte – die ist im Stillstand richtig. */ .cx-glow, .cx-pulse { display: none; } .readout.tick { animation: none; } } /* ---------- Panel (mit Eck-Ticks) ---------- */ .panel { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .panel::before, .panel::after { content: ''; position: absolute; width: 8px; height: 8px; pointer-events: none; border-color: var(--line-strong); border-style: solid; } .panel::before { top: 6px; left: 6px; border-width: 1px 0 0 1px; } .panel::after { bottom: 6px; right: 6px; border-width: 0 1px 1px 0; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); } .panel-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .panel-title h3 { font-size: 14px; } .panel-body { padding: 16px; } /* ---------- Status-LED ---------- */ .led { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); } .led .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--stale); box-shadow: 0 0 0 3px rgba(255,255,255,0.03); flex: none; } .led.ok .dot { background: var(--ok); box-shadow: 0 0 8px var(--ok); } .led.warn .dot { background: var(--warn); box-shadow: 0 0 8px var(--warn); } .led.fault .dot { background: var(--fault); box-shadow: 0 0 8px var(--fault); } .led.ok, .led.fault, .led.warn { color: var(--text); } @keyframes ledpulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } } .led.live .dot { animation: ledpulse 1.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .led.live .dot { animation: none; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: var(--radius-sm); background: var(--panel-raised); color: var(--text); border: 1px solid var(--line-strong); font-family: var(--font-ui); font-size: 13px; font-weight: 500; cursor: pointer; transition: background .15s, border-color .15s, transform .05s; white-space: nowrap; } .btn:hover { border-color: var(--accent); background: var(--panel-inset); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn-ghost { background: transparent; border-color: transparent; } .btn-ghost:hover { background: var(--panel-raised); border-color: var(--line); } .btn-danger { border-color: var(--fault); color: var(--fault); } .btn-danger:hover { background: var(--fault); color: #fff; } .btn-sm { height: 30px; padding: 0 11px; font-size: 12px; } .btn-icon { width: 38px; padding: 0; } .btn-icon.btn-sm { width: 30px; } /* ---------- Inputs ---------- */ .field { display: flex; flex-direction: column; gap: 6px; } .field > label { font-size: 12px; color: var(--text-dim); font-weight: 500; } .input, .select, textarea.input { height: 38px; padding: 0 12px; width: 100%; background: var(--panel-inset); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 13px; transition: border-color .15s; } textarea.input { height: auto; padding: 10px 12px; resize: vertical; } .input:focus, .select:focus, textarea.input:focus { border-color: var(--accent); outline: none; } .input::placeholder { color: var(--text-faint); } .select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%238B97A5' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; } .input-mono { font-family: var(--font-mono); } /* Toggle */ .toggle { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle .track { position: absolute; inset: 0; background: var(--line-strong); border-radius: 22px; transition: background .15s; cursor: pointer; } .toggle .track::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: var(--text); border-radius: 50%; transition: transform .15s; } .toggle input:checked + .track { background: var(--accent); } .toggle input:checked + .track::before { transform: translateX(18px); background: var(--on-accent); } /* Checkbox */ .check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: 13px; } .check input { width: 16px; height: 16px; accent-color: var(--accent); } /* ---------- Chips / Badges ---------- */ .chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 20px; background: var(--panel-raised); border: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-dim); white-space: nowrap; flex: none; } .chip.accent { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } button.chip { cursor: pointer; } /* ---------- Tabs ---------- */ .tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--panel-inset); border: 1px solid var(--line); border-radius: var(--radius-sm); } .tabs button { height: 30px; padding: 0 14px; border: none; background: transparent; color: var(--text-dim); font-family: var(--font-ui); font-size: 12px; font-weight: 500; border-radius: 4px; cursor: pointer; transition: background .12s, color .12s; } .tabs button.active { background: var(--panel-raised); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); } .tabs button:hover:not(.active) { color: var(--text); } /* ---------- Table ---------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); } table.data { width: 100%; border-collapse: collapse; font-size: 13px; } table.data th { text-align: left; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); font-weight: 500; padding: 11px 14px; border-bottom: 1px solid var(--line-strong); background: var(--panel-raised); position: sticky; top: 0; white-space: nowrap; } table.data th.sortable { cursor: pointer; } table.data th.sortable:hover { color: var(--text); } table.data td { padding: 10px 14px; border-bottom: 1px solid var(--line); } table.data tbody tr:hover { background: var(--panel-raised); } table.data tbody tr:last-child td { border-bottom: none; } table.data .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; } /* ---------- App-Shell ---------- */ /* dvh: auf Mobile-Browsern zählt die ein-/ausfahrende URL-Leiste nicht zur Höhe. */ /* Die Breite der Navigation steht als Variable und nicht als Zahl in sechs Regeln: js/shell.js liest sie, um zu pruefen, ob ein Dialog die Rail beruehrt - und zwar die AUSGEKLAPPTE Breite, auch wenn die Rail gerade eingeklappt ist. Mit der gemessenen Breite waere das eine Schaukel: eingeklappt beruehrt der Dialog nichts mehr, also klappte die Rail auf, also beruehrte er sie wieder. */ .app-shell { --rail-w: 232px; --rail-w-min: 64px; display: grid; grid-template-columns: var(--rail-w) 1fr; min-height: 100vh; min-height: 100dvh; } .nav-rail { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--panel); border-right: 1px solid var(--line); z-index: 20; } /* Scrim und Menü-Button existieren nur unterhalb des Drawer-Breakpoints (≤900px). Ohne dieses display:none bliebe nach einem Resize auf Desktop-Breite ein unsichtbarer Klick-Blocker über der Seite liegen. */ .nav-scrim { display: none; position: fixed; inset: 0; z-index: 19; background: rgba(4,7,11,0.55); backdrop-filter: blur(2px); animation: fade .15s ease-out; } .nav-toggle { display: none; } /* Der Gegenknopf zum Schubladenknopf: Er macht die Leiste schmal, statt sie zu oeffnen, und steht deshalb genau dort, wo auf dem Telefon der andere steht. Unter 900px faellt er weg - dort IST die Leiste eine Schublade. */ .nav-narrow { display: inline-flex; } /* Feste dunkelblaue CI-Fläche, damit das weiße Logo in ALLEN Themes lesbar bleibt */ .brand { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 7px; padding: 18px 14px; border-bottom: 1px solid var(--line); background: var(--brand-grad); } /* Feiner Rasterschimmer über der CI-Fläche – gibt dem Kopf Tiefe, ohne Bild. */ .brand::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 15% -10%, rgba(122,176,255,0.30), transparent 62%), repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 4px); opacity: 0.5; } .brand > * { position: relative; } .brand .brand-logo { height: 26px; width: auto; display: block; } /* Terminalzeile: Prompt, getippter Name, blinkender Cursor – alles in einer Zeile. Die Rail ist 232px breit, abzüglich Polsterung bleiben 196px: darin müssen Prompt, „R.DiagX – Remote Diagnostics" und der Cursor Platz finden, ohne umzubrechen. */ .brand-term { display: flex; align-items: baseline; gap: 6px; min-width: 0; } .brand-prompt { font-family: var(--font-mono); font-size: 11.5px; color: var(--brand-400); opacity: 0.9; flex: none; } /* Der Text wird beim Laden aufgebaut – steps() macht daraus ein Tippen, kein Wischen. */ .brand-type { display: flex; align-items: baseline; gap: 5px; min-width: 0; overflow: hidden; white-space: nowrap; animation: brand-type 1.4s steps(27, end) both; } .brand-name { font-family: var(--font-ui); font-weight: 700; font-size: 14px; letter-spacing: -0.01em; color: #F1F6FC; flex: none; } .brand-caret { width: 7px; height: 14px; flex: none; align-self: center; border-radius: 1px; background: var(--brand-400); box-shadow: 0 0 10px -1px rgba(74,131,208,0.9); animation: brand-blink 1.05s steps(1, end) infinite; } /* Sperrung knapp gehalten: mit 0.06em passt die Zeile nicht mehr in die 232px-Rail. */ .brand-sub { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.04em; color: #9DB4D6; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } @keyframes brand-type { from { max-width: 0; } to { max-width: 230px; } } @keyframes brand-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .brand-type { animation: none; } .brand-caret { animation: none; opacity: 0.85; } } .nav-list { display: flex; flex-direction: column; gap: 2px; padding: 12px; flex: 1; overflow-y: auto; } /* Gruppentitel: ordnet die Einträge, ohne selbst anklickbar zu wirken. */ .nav-group { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); padding: 14px 12px 5px; user-select: none; } .nav-group:first-child { padding-top: 2px; } /* Kennzeichen am Gruppentitel, etwa „DEV“ für einen Bereich in Entwicklung. */ .nav-badge { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 3px; vertical-align: 1px; border: 1px solid color-mix(in srgb, var(--warn) 60%, transparent); color: var(--warn); font-size: 8.5px; letter-spacing: .08em; line-height: 14px; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text-dim); font-family: var(--font-ui); font-size: 13.5px; font-weight: 500; cursor: pointer; position: relative; transition: background .12s, color .12s; } .nav-item svg { width: 18px; height: 18px; flex: none; } .nav-item:hover { background: var(--panel-raised); color: var(--text); } .nav-item.active { background: var(--accent-soft); color: var(--accent); } .nav-item.active::before { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; background: var(--accent); border-radius: 0 3px 3px 0; } .nav-foot { padding: 12px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.06em; } /* Ein-/Ausklappen der Navigation */ .nav-collapse { display: flex; align-items: center; gap: 10px; margin: 0 12px 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-raised); color: var(--text-dim); cursor: pointer; font-family: var(--font-ui); font-size: 12.5px; font-weight: 500; transition: color .12s, border-color .12s; } .nav-collapse:hover { color: var(--accent); border-color: var(--accent); } .nav-collapse svg { width: 16px; height: 16px; flex: none; transition: transform .16s ease; } /* Eingeklappt: Icon-Rail. Nur auf dem Desktop – ab 900px abwärts ist die Rail ein Drawer und wird über .nav-rail.open gesteuert. */ @media (min-width: 901px) { .app-shell { transition: grid-template-columns .16s ease; } .app-shell.nav-collapsed { grid-template-columns: var(--rail-w-min) 1fr; } .nav-rail.collapsed .brand { padding: 16px 8px; align-items: center; } /* object-fit statt max-width: sonst klemmt die Breite, während height fix bleibt, und das Logo wird gequetscht statt verkleinert. */ .nav-rail.collapsed .brand-logo { height: 22px; width: 100%; object-fit: contain; } .nav-rail.collapsed .brand-term { display: none; } .nav-rail.collapsed .nav-list { padding: 12px 8px; } /* Eingeklappt bleibt von der Gruppe nur ein Trennstrich – der Titel hätte keinen Platz. */ .nav-rail.collapsed .nav-group { font-size: 0; padding: 9px 0 8px; margin: 0 6px; border-top: 1px solid var(--line); } .nav-rail.collapsed .nav-group:first-child { border-top: 0; padding-top: 0; } .nav-rail.collapsed .nav-badge { display: none; } .nav-rail.collapsed .nav-item { justify-content: center; padding: 10px 0; } .nav-rail.collapsed .nav-item > span { display: none; } .nav-rail.collapsed .nav-item.active::before { left: -8px; } .nav-rail.collapsed .nav-collapse { margin: 0 8px 10px; padding: 8px 0; justify-content: center; } .nav-rail.collapsed .nav-collapse > span { display: none; } .nav-rail.collapsed .nav-collapse svg { transform: rotate(180deg); } .nav-rail.collapsed .nav-foot { display: none; } } @media (prefers-reduced-motion: reduce) { .app-shell, .nav-rail, .nav-collapse svg { transition: none; } } .main-col { display: flex; flex-direction: column; min-width: 0; } .topbar { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 58px; padding: 0 22px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .topbar .left { display: flex; align-items: center; gap: 16px; min-width: 0; } .topbar .right { display: flex; align-items: center; gap: 12px; } .page-title { font-family: var(--font-ui); font-size: 15px; font-weight: 600; } .content { padding: 22px; flex: 1; } /* ---------- Schmale Fenster: die Rail wird zum Drawer ---------- Unter 900px bleibt neben 232px Rail zu wenig für Tabellen und Diagramme. Die Rail verlässt deshalb das Raster (position: fixed) und fährt nur auf Anforderung über den Inhalt; ausgelöst wird das vom Menü-Knopf in der Topbar, geschlossen durch Klick auf den Scrim oder durch den Seitenwechsel (siehe MainLayout). Das gilt für die Fensterbreite, nicht für das Gerät: ein schmal gezogenes Fenster auf dem Desktop bekommt genau dieselbe Darstellung. */ @media (max-width: 900px) { /* Einspaltig – auch wenn der Benutzer die Rail auf dem Desktop eingeklappt hat. */ .app-shell, .app-shell.nav-collapsed { grid-template-columns: 1fr; } .nav-rail, .nav-rail.collapsed { position: fixed; top: 0; left: 0; width: min(280px, 84vw); transform: translateX(-100%); transition: transform .18s ease; box-shadow: var(--shadow); } .nav-rail.open { transform: none; } .nav-scrim { display: block; } .nav-toggle { display: inline-flex; } .nav-narrow { display: none; } /* Was auf schmalen Fenstern nur Platz kostet: der Name neben dem Avatar, der Theme-Knopf (steht auch im Benutzermenü) und das Einklappen der Rail – im Drawer gibt es nichts einzuklappen. */ .hide-sm { display: none; } .topbar { padding: 0 14px; gap: 10px; } .topbar .left { gap: 10px; } .topbar .right { gap: 8px; } .content { padding: 14px; } } /* Sehr schmal: der Seitentitel weicht, damit Statusanzeige und Bereichswahl bleiben. */ @media (max-width: 520px) { .page-title { display: none; } .content { padding: 12px 10px; } } /* User menu */ .usermenu { position: relative; } .user-btn { display: flex; align-items: center; gap: 10px; padding: 5px 6px 5px 12px; border-radius: 20px; background: var(--panel-raised); border: 1px solid var(--line); cursor: pointer; color: var(--text); } .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-family: var(--font-ui); font-weight: 700; font-size: 12px; flex: none; overflow: hidden; } /* Das Bild füllt den Kreis und wird dabei nicht verzerrt: der Zuschnitt auf ein Quadrat passiert zwar schon beim Hochladen, ältere Einträge oder ein anderer Weg dorthin dürfen die Anzeige aber nicht in die Länge ziehen. */ .avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Auf der Profilseite steht der Kreis groß neben dem Namen und ist zugleich die Vorschau des gewählten Bildes – ein feiner Rand trennt ihn dort vom Hintergrund. */ .avatar-lg { border: 1px solid var(--line-strong); } .menu-pop { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px; z-index: 40; } .menu-pop .mi { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; color: var(--text); } .menu-pop .mi:hover { background: var(--panel-raised); } /* Die Zeichen im Benutzermenü sprechen dieselbe Sprache wie die der Navigation: Lucide-Striche in der Textfarbe, 16px. Vorher standen hier Emoji – bunte Bildchen in einer Oberfläche, die sonst durchweg einfarbige Striche trägt, und jedes von ihnen mit der Schriftart des Systems gezeichnet: unter Windows anders als auf dem Telefon. Gedämpft, weil im Menü der Text die Aussage ist und das Zeichen nur die Zeile findet; beim Überfahren zieht es mit. */ .menu-pop .mi svg { width: 16px; height: 16px; flex: none; color: var(--text-dim); } .menu-pop .mi:hover svg { color: var(--text); } .menu-pop .sep { height: 1px; background: var(--line); margin: 6px 2px; } /* Überschrift einer Gruppe im Benutzermenü – dieselbe Schrift wie die Gruppentitel in der Navigation links, damit „Verwaltung" nach dem Umzug wiedererkennbar bleibt. */ .menu-pop .menu-group { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); padding: 4px 10px 4px; user-select: none; } /* Dept switcher */ .dept-switch { position: relative; } /* ---------- Grid helpers ---------- */ .grid { display: grid; gap: 16px; } .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; } /* ---------- Modal ---------- */ .overlay { position: fixed; inset: 0; background: rgba(4,7,11,0.62); backdrop-filter: blur(3px); z-index: 100; display: grid; place-items: center; padding: 20px; animation: fade .15s ease-out; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } .modal { width: 100%; max-width: 560px; max-height: 88vh; overflow: auto; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow); } .modal.lg { max-width: 760px; } /* Dialog mit Reitern: gleiche Höhe für jeden Reiter, damit Fußzeile und Laschen beim Wechseln nicht springen. Der Rumpf füllt den Platz, der Reiterrahmen läuft bis unten; was länger ist, rollt wie bisher im Dialog. */ .modal.fixed-h { height: min(760px, 88vh); display: flex; flex-direction: column; } .modal.fixed-h > .modal-body { flex: 1 0 auto; display: flex; flex-direction: column; } .modal.fixed-h > .modal-body > .cfg-tabpanel { flex: 1 0 auto; } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); } .modal-body { padding: 20px; } .modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--line); position: sticky; bottom: 0; background: var(--panel); } /* ---------- Slide-over (Widget-Katalog) ---------- */ .slideover { position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: 380px; max-width: 92vw; background: var(--panel); border-left: 1px solid var(--line-strong); box-shadow: -20px 0 50px -30px rgba(0,0,0,0.8); z-index: 90; display: flex; flex-direction: column; animation: slidein .2s ease-out; } @keyframes slidein { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .slideover .so-head { padding: 18px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; } .slideover .so-body { padding: 16px; overflow: auto; display: flex; flex-direction: column; gap: 10px; } /* Catalog item */ .cat-item { display: flex; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-raised); cursor: pointer; transition: border-color .12s, transform .05s; } .cat-item:hover { border-color: var(--accent); } .cat-item:active { transform: scale(0.99); } .cat-item .ci-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--panel-inset); border: 1px solid var(--line); display: grid; place-items: center; color: var(--accent); flex: none; } .cat-item .ci-icon svg { width: 20px; height: 20px; } .cat-item h4 { font-size: 13.5px; margin-bottom: 2px; } .cat-item p { font-size: 11.5px; color: var(--text-dim); margin: 0; } .cat-group-label { margin: 8px 2px 2px; } /* ---------- Toasts ---------- */ .toast-stack { position: fixed; bottom: 22px; right: 22px; display: flex; flex-direction: column; gap: 10px; z-index: 200; } .toast { display: flex; align-items: center; gap: 12px; min-width: 260px; max-width: 380px; padding: 13px 16px; background: var(--panel); border: 1px solid var(--line-strong); border-left-width: 3px; border-radius: var(--radius-sm); box-shadow: var(--shadow); animation: slidein .2s ease-out; } .toast.info { border-left-color: var(--info); } .toast.success { border-left-color: var(--ok); } .toast.warning { border-left-color: var(--warn); } .toast.error { border-left-color: var(--fault); } .toast .t-text { font-size: 13px; } /* ---------- Dashboard: Kopfleiste ---------- */ /* Ersetzt die frühere .section-head des Dashboards. Die Knöpfe bleiben im kleinen Maßstab; neu ist allein, dass die Leiste den Bearbeiten-Modus benennt – vorher fehlte jeder Hinweis, dass man sich darin befindet. */ /* Die Leiste steht nur noch im Bearbeiten-Modus (siehe Dashboard.razor): Im Ruhezustand wäre sie ein leerer Streifen über dem Board, und die Höhe, die er kostet, fehlt dem Board unten. */ .dash-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; min-height: 38px; padding: 4px 8px; border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 9%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line)); } .dash-bar-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; flex: none; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .dash-bar-hint { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 900px) { .dash-bar-hint { display: none; } } /* Der Einstieg ins Bearbeiten in der Kopfzeile. Als Geisterknopf und nicht als gefüllter: Er steht neben Bereichswahl und Benutzermenü und soll dort nicht lauter sein als die – gesucht wird er erst, wenn man etwas am Board ändern will. */ .dash-edit-btn { gap: 6px; flex: none; } /* ---------- Dashboard Grid ---------- */ .dash-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 92px; gap: 14px; } /* Im Bearbeiten-Modus wird das Raster selbst sichtbar – ohne es ist nicht erkennbar, in welchen Einheiten Breite und Höhe überhaupt springen. */ .dash-grid.is-editing { background-image: repeating-linear-gradient(to right, color-mix(in srgb, var(--accent) 12%, transparent) 0 1px, transparent 1px calc((100% - 11 * 14px) / 12 + 14px)); background-position: 0 0; border-radius: var(--radius); } /* Der Rasterplatz einer Kachel. Er kommt als Variablen aus dem Markup (siehe Dashboard.razor) und wird hier zu grid-column/grid-row zusammengesetzt – nicht umgekehrt im style-Attribut fertig hingeschrieben. Nur so kann die schmale Darstellung weiter unten die Platzierung überschreiben, ohne mit !important gegen ein style-Attribut anzutreten. */ .dash-grid > .widget { grid-column: var(--gx) / span var(--gw); grid-row: var(--gy) / span var(--gh); } /* Benannter Container: die Aktionsknöpfe im Kopf richten sich nach der Breite des Widgets, nicht nach der des Fensters. */ .widget { position: relative; container: widget / inline-size; } /* Das Panel füllt seine Grid-Zelle und teilt sie selbst auf: der Kopf so hoch, wie sein Inhalt es verlangt, der Body bekommt den Rest. Vorher stand im Body ein height:calc(100% - 46px). 46px ist aber die Höhe eines Kopfes OHNE Kanal-Mikrolabel (21px Titelzeile + 24px Polsterung + 1px Trennlinie). Board- und Dashboard-Panels setzen Channel immer – das sind 15px Zeile plus 3px Abstand mehr, macht 64px. Der Body war also 18px höher als seine Zelle und ragte über den Panelrand hinweg in das Panel darunter: genau die beobachtete Überlappung. Ein umbrechender Kopf oder die Aktionsknöpfe des Bearbeiten-Modus vergrößerten den Überstand zusätzlich. */ .widget > .panel { height: 100%; display: flex; flex-direction: column; min-height: 0; } .widget > .panel > .panel-head { flex: none; } .widget > .panel > .panel-body { flex: 1; min-height: 0; overflow: auto; } /* Der Kanal nennt Gerät und Signal. Mit den Namen des Lese-Payloads – etwa "vehicle.acceleratorPositionPercent" – ist er breiter als ein 3-Spalten-Panel. Umbrechen darf er trotzdem nicht: jede zusätzliche Kopfzeile nimmt der Anzeige Platz weg und rückt bei kleinen Panels den Messwert aus dem Bild. */ .widget > .panel > .panel-head .eyebrow, .widget > .panel > .panel-head h3 { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .widget.editing { outline: 1px dashed var(--line-strong); outline-offset: 2px; border-radius: var(--radius); cursor: grab; transition: outline-color .15s, opacity .15s, transform .15s, box-shadow .15s; } .widget.editing:hover { outline-color: color-mix(in srgb, var(--accent) 55%, var(--line-strong)); } .widget.editing:active { cursor: grabbing; } /* Das gegriffene Widget bleibt sichtbar, tritt aber zurück: der Blick soll bei der Ablagefläche sein, nicht bei der Quelle. */ .widget.dragging { opacity: .38; transform: scale(.985); outline-style: solid; } /* Zielbereich. Der Rahmen liegt als eigene Ebene über dem Panel (::after), damit er das Layout nicht anfasst; die Kante zeigt an, auf welcher Seite eingefügt wird. */ .widget.drop-target::after { content: ''; position: absolute; inset: -3px; pointer-events: none; z-index: 6; border-radius: var(--radius); border: 2px dashed var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent), inset 0 0 22px color-mix(in srgb, var(--accent) 12%, transparent); animation: drop-pulse 1.1s ease-in-out infinite; } /* Einfügemarke: fette Kante an der Seite, an der das Widget landet. */ .widget.drop-target::before { content: ''; position: absolute; top: -3px; bottom: -3px; width: 4px; z-index: 7; pointer-events: none; border-radius: 3px; background: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent); } .widget.drop-target.drop-before::before { left: -7px; } .widget.drop-target.drop-after::before { right: -7px; } @keyframes drop-pulse { 0%, 100% { border-color: var(--accent); opacity: .95; } 50% { border-color: color-mix(in srgb, var(--accent) 60%, transparent); opacity: .75; } } @media (prefers-reduced-motion: reduce) { .widget.drop-target::after { animation: none; } } /* Während eines Ziehvorgangs treten die unbeteiligten Widgets leicht zurück, damit Quelle und Ziel die einzigen kräftigen Elemente im Raster sind. */ .dash-grid.is-dragging .widget:not(.dragging):not(.drop-target) { opacity: .72; } /* Ablagefläche hinter dem letzten Widget (nur während des Ziehens im DOM). */ .dash-endzone { grid-column: span 12; min-height: 62px; display: grid; place-items: center; border: 2px dashed color-mix(in srgb, var(--accent) 45%, var(--line-strong)); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 4%, transparent); color: var(--text-faint); font-size: 12px; transition: background .15s, border-color .15s, color .15s; } .dash-endzone.over { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 26px color-mix(in srgb, var(--accent) 12%, transparent); } /* Aktionsknöpfe im Widget-Kopf (Konfigurieren / Entfernen). Vorher: .btn-ghost .btn-icon .btn-sm – randlos, transparent, 30px, mit einem Schrift-Glyph als Symbol. Im Panelkopf neben Kanal und Titel war davon kaum etwas zu sehen, obwohl Konfigurieren die zentrale Aktion des Bearbeiten-Modus ist. Jetzt 34px mit eigenem Grund und Rahmen; das Zahnrad trägt zusätzlich Akzentfarbe und blendet auf breiten Widgets seine Beschriftung ein. */ .widget .w-act { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; min-width: 34px; padding: 0 8px; flex: none; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--panel-raised); color: var(--text); cursor: pointer; font-family: var(--font-ui); font-size: 12px; font-weight: 600; transition: background .14s, border-color .14s, color .14s, box-shadow .14s, transform .05s; } .widget .w-act svg { width: 17px; height: 17px; flex: none; } .widget .w-act:active { transform: translateY(1px); } .widget .w-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Konfigurieren: die eigentliche Aktion, deshalb in Akzentfarbe angelegt. */ .widget .w-act-cfg { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--line-strong)); background: color-mix(in srgb, var(--accent) 14%, var(--panel-raised)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent); } .widget .w-act-cfg:hover { color: var(--on-accent); background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent); } /* Entfernen bleibt zurückhaltend und färbt sich erst beim Zeigen – ein Klick darauf ist nicht rückgängig zu machen, er soll nicht der auffälligste Knopf im Kopf sein. */ .widget .w-act-del { color: var(--text-dim); } .widget .w-act-del:hover { color: #fff; background: var(--fault); border-color: var(--fault); } /* Die Beschriftung erscheint nur, wenn das Widget breit genug ist; auf schmalen Kacheln würde sie den Titel aus dem Kopf drängen. */ .widget .w-act-label { display: none; } @container widget (min-width: 380px) { .widget .w-act-label { display: inline; } } /* Rastermaß im Kopf – Rückmeldung beim Ziehen der Kanten. */ .widget .w-size { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); padding: 0 4px; white-space: nowrap; } .widget.resizing .w-size { color: var(--accent); } /* Griffe zum Ziehen der Größe. Sie liegen über dem Panelrand, sind erst im Bearbeiten-Modus im DOM und schlucken die Zeigergeste (touch-action), sonst würde der Browser daraus ein Scrollen oder ein natives Drag des Widgets machen. */ .widget .w-resize { position: absolute; z-index: 8; touch-action: none; background: transparent; transition: background .12s; } /* Die Griffe liegen zu zwei Dritteln außerhalb des Panels: innen würden sie im Bearbeiten-Modus die Bildlaufleiste des Panelinhalts verdecken. */ .widget .w-resize-e { top: 10px; bottom: 16px; right: -6px; width: 9px; cursor: ew-resize; } .widget .w-resize-s { left: 10px; right: 16px; bottom: -6px; height: 9px; cursor: ns-resize; } .widget .w-resize-se { right: -6px; bottom: -6px; width: 18px; height: 18px; cursor: nwse-resize; display: grid; place-items: center; color: var(--line-strong); border-radius: 4px; } .widget .w-resize-se svg { width: 10px; height: 10px; } .widget.editing:hover .w-resize-e, .widget.editing:hover .w-resize-s { background: color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 4px; } .widget.editing:hover .w-resize-se { color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); } .widget .w-resize:hover { background: var(--accent) !important; } .widget .w-resize-se:hover { color: var(--on-accent) !important; } /* Während des Ziehens: Widget hervorheben und die Karten-/Chart-Inhalte nicht mit Zeigerereignissen belasten. */ .widget.resizing { outline: 2px solid var(--accent); outline-offset: 2px; z-index: 9; } .widget.resizing .panel { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); } body.dash-resizing { cursor: nwse-resize; user-select: none; } body.dash-resizing .widget .panel-body { pointer-events: none; } .widget .w-drag { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity .12s; z-index: 5; } .widget.editing .w-drag { opacity: 1; } .w-empty { display: grid; place-items: center; height: 100%; color: var(--text-faint); text-align: center; font-size: 12px; } /* Der Hinweis, dass die Kacheln gestapelt stehen – sichtbar nur dort, wo das gilt (die Regel dazu steht in der Abfrage darunter). Vor der Abfrage und nicht hinter ihr: Bei gleicher Spezifität gewinnt die spätere Regel, und ein display:none dahinter hätte den Hinweis auch im schmalen Fenster verschluckt. */ .dash-bar-note { display: none; font-size: 11.5px; line-height: 1.4; color: var(--text-dim); flex-basis: 100%; } /* ---------- Dashboard im schmalen Fenster ---------- Unter 700px stehen die Kacheln untereinander, jede über die ganze Breite. Der Grund ist das Raster selbst: Zwölf Spalten auf 360 Pixel sind Spalten von 25 Pixeln, und eine Kachel, die am Bildschirm drei davon belegt, ist auf dem Telefon einen Daumen breit – mit einem Diagramm darin, das nichts mehr zeigt. Die gespeicherte Anordnung bleibt dabei unangetastet: Sie gehört zu dem Bildschirm, an dem sie gelegt wurde, und kommt dort unverändert wieder. Was die Kachel behalten darf, ist ihre Höhe (--gh) – sie sagt, wie viel eine Kachel zu zeigen hat, und das ändert sich mit der Fensterbreite nicht. 700px und nicht 900px (wo die Navigation zum Drawer wird): Zwischen beiden Maßen ist das Raster noch benutzbar – 60 Pixel je Spalte –, und wer sein Board dort kennt, soll es nicht schon beim halben Bildschirm neu sortiert finden. */ @media (max-width: 700px) { /* Die Marke, an der js/dashgrid.js erkennt, dass die Kacheln gestapelt sind: Dort würde eine Ziehgeste in einem 12-Spalten-Raster rechnen, das gerade nicht gilt – und das Ergebnis in die gespeicherte Anordnung schreiben. */ .dash-grid { --stacked: 1; grid-template-columns: 1fr; } /* Das Rasterbild im Bearbeiten-Modus zeigt zwölf Spalten. Hier gibt es eine, also zeigt es etwas, das nicht da ist. Mit .is-editing und nicht nur .dash-grid: Die Regel darüber trägt zwei Klassen und gewinnt sonst auch innerhalb dieser Abfrage – Spezifität schlägt Reihenfolge. */ .dash-grid.is-editing { background-image: none; } .dash-grid > .widget { grid-column: 1 / -1; grid-row: auto / span var(--gh); } /* Verschieben und Größe ziehen sind hier abgeschaltet – also auch keine Griffe und kein Greifen-Zeiger. Hinzufügen, Einstellen und Entfernen bleiben. */ .dash-grid .w-resize { display: none; } .widget.editing { cursor: default; } /* Die Leiste im Bearbeiten-Modus trägt vier Knöpfe; in einer Zeile würden sie zusammengequetscht. */ .dash-bar { flex-wrap: wrap; } .dash-bar > .row { flex-wrap: wrap; } .dash-bar-note { display: block; } } /* Release-Notes-Widget: Versionen untereinander, je Eintrag ein Etikett für die Art der Änderung. Die Liste scrollt im Panel – sie wird mit jeder Version länger. */ .rn-list { display: flex; flex-direction: column; gap: 14px; height: 100%; overflow: auto; } .rn-release { display: flex; flex-direction: column; gap: 5px; } .rn-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .rn-version { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--on-accent); background: var(--accent); padding: 1px 7px; border-radius: 20px; flex: none; } .rn-title { font-size: 12.5px; font-weight: 600; } .rn-date { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); margin-left: auto; } .rn-entry { display: flex; align-items: flex-start; gap: 8px; } .rn-kind { flex: none; width: 62px; text-align: center; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 0; border-radius: 3px; margin-top: 1px; } .rn-kind-neu { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); } .rn-kind-fix { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); } .rn-kind-aenderung { background: var(--panel-inset); color: var(--text-dim); } .rn-text { font-size: 12px; color: var(--text-dim); line-height: 1.45; } /* ---------- Release Notes: kompakt und ausführlich ---------- Die Hülle teilt die Höhe zwischen der Werkzeugzeile und der Liste auf. Ohne sie nähme die Liste (height:100%) die volle Höhe und schöbe den Umschalter aus der Kachel – im Dashboard-Widget ist das eine Fläche von vier Rasterzeilen. */ .rn-wrap { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; } .rn-wrap > .rn-list { flex: 1; min-height: 0; } .rn-tools { display: flex; align-items: center; gap: 8px; flex: none; } .rn-scope { font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); } .rn-tools .btn { margin-left: auto; } /* Die Bilanz einer Version: die Zeile zwischen Kopf und Einträgen. Eingerückt auf die Fluchtlinie der Texte, damit die Etiketten daneben die Kante behalten. */ .rn-sum { font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); margin: -1px 0 3px 70px; } /* Kompakt heißt: eine Zeile je Eintrag, abgeschnitten statt umgebrochen. Der volle Text steht im Tooltip – ein Eintrag, der zwei Zeilen bekommt, weil er länger ist, macht die Liste wieder zu dem Textblock, den die Kurzfassung ersetzen soll. */ .rn-list.compact .rn-release { gap: 3px; } .rn-entry-short .rn-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* Der Weg in die Tiefe steht dort, wo die Kürzung sichtbar wird: unter den Einträgen der Version. Als Text und nicht als Knopf – drei davon untereinander wären sonst die auffälligsten Elemente der Liste. */ .rn-more { align-self: flex-start; margin-top: 1px; background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font-ui); font-size: 11px; color: var(--accent); } .rn-more:hover { text-decoration: underline; } .rn-more-all { margin-top: 4px; font-size: 11.5px; } /* Live value widget */ .lv { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .lv .lv-val { display: flex; align-items: baseline; } .lv .lv-meta { display: flex; align-items: center; justify-content: space-between; } /* Gauge */ .gauge-wrap { display: grid; place-items: center; height: 100%; min-height: 0; overflow: hidden; } /* Das SVG stand auf width:100%;height:auto – seine Höhe folgte damit allein der Breite und lief in einem flachen Panel unten heraus. max-height bindet es zusätzlich an die verfügbare Höhe; der Bogen skaliert über die viewBox mit. */ .gauge-wrap > svg { max-height: 100%; } /* Status grid widget */ .veh-list { display: flex; flex-direction: column; gap: 6px; max-height: 100%; overflow: auto; } .veh-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--panel-raised); } .veh-row .vn { font-family: var(--font-mono); font-size: 12px; } /* Bundle-Zeile (Diagnoseergebnis): links Fahrzeug + Bundle-Key, rechts Zeit + Dateizahl. */ .bundle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: var(--radius-sm); background: var(--panel-raised); border-left: 2px solid var(--accent-soft); } .bundle-row .vn { font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- Login ---------- */ .login-wrap { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1.1fr 1fr; } .login-brandside { position: relative; overflow: hidden; background-color: #081527; background-image: url("img/Background/bg_login_rweb3_clean.svg"); background-size: cover; background-position: center; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: flex-start; padding: 48px; } /* Logo oben, Aussage in der Mitte, unten nichts. Die Kennzahlenzeile unten links (ISO 14229, Latenz, Dongles) ist entfallen – drei Zahlen ohne Zusammenhang beantworten keine Frage, die sich vor dem Anmelden stellt. */ .login-brandside .lb-hero { margin-top: auto; margin-bottom: auto; } /* Lesbarkeits-Verlauf über dem Hintergrundbild */ .login-brandside::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(160deg, rgba(6,15,30,0.35) 0%, rgba(6,15,30,0.72) 70%, rgba(6,15,30,0.9) 100%); } .login-brandside > * { position: relative; z-index: 2; } .login-brandside .lb-top { display: flex; align-items: center; gap: 14px; } .login-brandside .lb-logo { height: 34px; width: auto; display: block; } /* Der Trennstrich zwischen Herkunft und Produkt. Ohne ihn stehen zwei Marken nebeneinander und man weiß nicht, welche die Firma ist. */ .login-brandside .lb-div { width: 1px; height: 28px; flex: none; background: rgba(140,175,220,0.34); } /* ---------- Der Produktname ---------- Das R in der Hausfarbe, der Rest in Weiß – so steht die Marke überall im Haus, und so soll sie auch hier stehen. Als eigene Klasse und nicht als Sonderfall der Anmeldeseite: Der nächste Ort, an dem der Name groß steht, soll ihn nicht neu erfinden. */ .wordmark { font-family: var(--font-ui); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; color: #F1F6FC; line-height: 1; } .wordmark .wm-r { color: var(--brand-400); } .login-brandside .lb-hero { max-width: 460px; } .login-brandside .lb-hero h1 { font-size: clamp(28px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -0.02em; color: #F1F6FC; } .login-brandside .lb-hero h1 em { color: var(--brand-400); font-style: normal; } .login-brandside .lb-hero p { color: #A9BAD0; margin-top: 16px; font-size: 15px; max-width: 420px; } .login-formside { display: grid; place-items: center; padding: 40px; } .login-card { width: 100%; max-width: 380px; } .login-card .lc-head { margin-bottom: 26px; } .login-card h2 { font-size: 22px; } .login-card .lc-head p { color: var(--text-dim); margin-top: 6px; } .login-err { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid var(--fault); background: rgba(240,72,62,0.08); border-radius: var(--radius-sm); color: #ffb4ae; font-size: 13px; margin-top: 4px; } /* Dieselbe Zeile in Gelb – für Hinweise, die kein Fehler sind (ein vermerkter Passwortwechsel, ein fehlender Benutzerdatensatz). In Rot liest sich ein Hinweis wie eine abgewiesene Eingabe, und wer die Farbe zweimal für Verschiedenes benutzt, verliert sie für den echten Fehler daneben. */ .login-err--warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); color: var(--warn); } /* ---------- Der lebende Hintergrund der Markenseite ---------- Zwei langsam driftende Lichter und eine Messkurve, die durchläuft. Alles CSS und SVG: keine Bibliothek, kein Canvas, keine Schleife in JavaScript. Auf einer Anmeldeseite soll nichts rechnen, was noch nicht angemeldet ist. Warum eine Kurve und kein Partikelfeld: Sie ist das, was dieses Produkt tut. Ein Partikelfeld wäre Dekoration von der Stange. Die Deckkraft ist bewusst niedrig. Wer sich anmeldet, soll das Eingabefeld finden und nicht das Bild ansehen – eine Anmeldeseite, die man erst betrachtet, hat ihre Aufgabe verfehlt. */ .login-brandside .lb-live { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .lb-orb { position: absolute; border-radius: 50%; filter: blur(70px); } .lb-orb-a { width: 46vmin; height: 46vmin; left: -12%; top: 6%; background: radial-gradient(circle, rgba(74,131,208,0.50), transparent 68%); animation: lb-drift-a 28s ease-in-out infinite; } .lb-orb-b { width: 38vmin; height: 38vmin; right: -10%; bottom: 2%; background: radial-gradient(circle, rgba(46,170,200,0.34), transparent 68%); animation: lb-drift-b 37s ease-in-out infinite; } /* Unterschiedliche Dauern und kein gemeinsamer Takt: Zwei Lichter, die im Gleichschritt wandern, lesen sich als Mechanik. */ @keyframes lb-drift-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(7%, 9%) scale(1.12); } } @keyframes lb-drift-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-9%, -7%) scale(1.08); } } /* ---------- Der Hintergrund: eine Leiterplatte, auf der Strom läuft ---------- Hier standen nacheinander ein Messdiagramm und ein nachgebautes Live-Board. Beide wollten gesehen werden, und ein Hintergrund, den man ansieht, ist keiner: Die Überschrift lag darauf, und damit war beides halb zu erkennen. Was ein Hintergrund kann, ist Bewegung ohne Inhalt. Deshalb jetzt Leiterbahnen, über die in großen Abständen ein heller Abschnitt läuft. Man liest ihn nicht, man bemerkt ihn – und die Messtechnik am Fahrzeug ist tatsächlich ein kleiner Rechner, das Bild behauptet also nichts Falsches. Alles CSS und SVG. Auf einer Anmeldeseite soll nichts rechnen, was noch nicht angemeldet ist. */ .cx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* Die ruhenden Bahnen. Sie sind dunkel und stehen nur da, damit der helle Abschnitt etwas hat, worauf er laufen kann – ein Licht ohne Leitung wäre eine Sternschnuppe. */ .cx-traces { fill: none; stroke: #1B3E6B; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; } /* Anschlussfelder, Durchkontaktierungen, Bauteile. Der dunkle Kern im Anschlussfeld ist das Loch: Ohne ihn wären es Punkte, mit ihm sind es Pads. */ .cx-pad { fill: #0A182B; stroke: #26547F; stroke-width: 1.4; opacity: 0.75; } .cx-via { fill: #26547F; opacity: 0.5; } .cx-chip { fill: rgba(13,30,53,0.72); stroke: #244E7C; stroke-width: 1.4; opacity: 0.75; } .cx-pin { stroke: #2C5C8C; stroke-width: 2; stroke-linecap: round; opacity: 0.7; } .cx-key { fill: #2C5C8C; opacity: 0.55; } /* ---------- Der Strom ---------- Ein kurzes Stück Licht, das über die Bahn wandert: stroke-dasharray setzt einen Strich von 54 und eine Lücke von 1400, stroke-dashoffset schiebt das Muster über den Zug. Die Lücke ist länger als jede Bahn – deshalb läuft je Durchgang genau ein Abschnitt hindurch, und danach ist es kurz still. Liefe ununterbrochen Licht, wäre es ein Förderband und kein Stromstoß. Zwei Lagen mit denselben Zeiten: eine breite, fast durchsichtige als Schein und eine schmale, helle darüber. Ein Weichzeichner täte dasselbe, kostet aber bei fünfzehn bewegten Zügen spürbar mehr. */ .cx-glow use, .cx-pulse use { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 54 1400; animation-name: cx-run; animation-timing-function: linear; animation-iteration-count: infinite; } .cx-glow use { stroke: #4E9BE8; stroke-width: 8; opacity: 0.16; } .cx-pulse use { stroke: #A6D8FF; stroke-width: 2.2; opacity: 0.85; } /* Die Bahnen in der Bildmitte gibt es nur dort, wo keine Überschrift darüber steht – siehe die Regel für schmale Fenster weiter unten. */ .cx-inner { display: none; } @keyframes cx-run { from { stroke-dashoffset: 1454; } to { stroke-dashoffset: 0; } } /* Je Bahn eine eigene Dauer und ein eigener Versatz. Der Versatz ist negativ: Damit beginnt der Lauf nicht bei null, sondern mittendrin – sonst starteten beim Aufbau der Seite fünfzehn Lichter gleichzeitig am selben Punkt ihrer Bahn. */ .cx-t1 { animation-duration: 10.7s; animation-delay: -2.9s; } .cx-t2 { animation-duration: 12.4s; animation-delay: -5.8s; } .cx-t3 { animation-duration: 14.1s; animation-delay: -8.7s; } .cx-t4 { animation-duration: 9.3s; animation-delay: -2.3s; } .cx-t5 { animation-duration: 11.0s; animation-delay: -3.5s; } .cx-t6 { animation-duration: 12.7s; animation-delay: -4.7s; } .cx-t7 { animation-duration: 14.4s; animation-delay: -5.9s; } .cx-t8 { animation-duration: 9.6s; animation-delay: -4.0s; } .cx-t9 { animation-duration: 11.3s; animation-delay: -3.5s; } .cx-t10 { animation-duration: 13.0s; animation-delay: -3.0s; } .cx-t11 { animation-duration: 14.7s; animation-delay: -2.5s; } .cx-t12 { animation-duration: 9.9s; animation-delay: -5.1s; } .cx-t13 { animation-duration: 11.6s; animation-delay: -2.9s; } .cx-t14 { animation-duration: 13.3s; animation-delay: -0.7s; } .cx-t15 { animation-duration: 15.0s; animation-delay: -13.5s; } .cx-t16 { animation-duration: 10.2s; animation-delay: -5.6s; } .cx-t17 { animation-duration: 11.9s; animation-delay: -1.7s; } .cx-t18 { animation-duration: 13.6s; animation-delay: -11.4s; } .cx-t19 { animation-duration: 15.3s; animation-delay: -9.2s; } /* ---------- Leiterplatte, ruhige Fassung (Hauptseite) ---------- */ /* Dieselbe Zeichnung wie auf der Anmeldeseite (CircuitBackdrop), aber nicht dasselbe Bild. Drei Unterschiede, und jeder hat einen Grund: 1 DIE FARBEN kommen aus dem Theme und nicht aus der Zeichnung. Auf der Anmeldeseite liegt der Hintergrund auf einer immer dunklen Flaeche und darf seine eigenen Blautoene haben. In der Anwendung liegt er unter acht Themes, von denen vier hell sind - dieselben Blautoene waeren dort ein dunkler Fleck auf hellem Grund. Also --line-strong fuer die ruhenden Bahnen und --accent fuer den Strom: Damit ist er in jedem Theme richtig, ohne dass ihn jemand achtmal einstellt. 2 ER LIEGT FEST AM FENSTER und nicht im Textfluss. Ein Hintergrund, der mitscrollt, wird zum Inhalt: Man verfolgt ihn, statt ihn zu bemerken. 3 ER IST DEUTLICH LEISER UND LANGSAMER. Auf der Anmeldeseite hat man Zeit; hier liest man Zahlen, die sich im Sekundentakt aendern. Was daneben blinkt, konkurriert mit ihnen - und verliert nicht der Hintergrund, sondern die Zahl. */ .cx-field { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .cx-quiet { /* fixed und z-index 0: hinter jedem Panel (die haben eigene Hintergruende), aber ueber dem Raster des Koerpers. Die Rail (20) und die Kopfzeile liegen ohnehin darueber. */ position: fixed; inset: 0; z-index: 0; } /* Die ruhenden Bahnen: nur noch angedeutet. Auf hellem Grund traegt --line-strong; auf dunklem ist es dieselbe Linie, die auch die Panelraender zeichnet - der Hintergrund gehoert damit sichtbar zur Oberflaeche und nicht auf sie. */ .cx-quiet .cx-traces { stroke: var(--line-strong); opacity: 0.4; stroke-width: 1.4; } .cx-quiet .cx-pad { fill: var(--bg); stroke: var(--line-strong); opacity: 0.45; } .cx-quiet .cx-via { fill: var(--line-strong); opacity: 0.35; } .cx-quiet .cx-chip { fill: var(--panel-inset); stroke: var(--line-strong); opacity: 0.38; } .cx-quiet .cx-pin { stroke: var(--line-strong); opacity: 0.4; } .cx-quiet .cx-key { fill: var(--line-strong); opacity: 0.3; } /* Der Strom in der Akzentfarbe des Themes. Schmaler und blasser als auf der Anmeldeseite, der Schein ebenso: Er soll am Rand des Blickfelds auffallen und nicht in seiner Mitte. */ .cx-quiet .cx-glow use { stroke: var(--accent); stroke-width: 6; opacity: 0.07; } .cx-quiet .cx-pulse use { stroke: var(--accent); stroke-width: 1.6; opacity: 0.30; } /* Laenger als jede Bahn: Nach jedem Durchgang ist es lange still. Auf der Anmeldeseite laufen fuenfzehn Lichter in zehn bis fuenfzehn Sekunden durch, hier braucht dasselbe Licht das Zweieinhalbfache - aus Betrieb wird damit Atmen. */ .cx-quiet .cx-glow use, .cx-quiet .cx-pulse use { animation-duration: 34s; } /* Je Bahn trotzdem verschieden: Fuenfzehn Lichter mit derselben Dauer laufen nach dem ersten Durchgang im Gleichschritt, und Gleichschritt liest sich als Mechanik. Die Faktoren sind Primzahlverhaeltnisse - so treffen sich die Bahnen erst nach Minuten wieder. */ .cx-quiet .cx-t1, .cx-quiet .cx-t6, .cx-quiet .cx-t11 { animation-duration: 29s; } .cx-quiet .cx-t2, .cx-quiet .cx-t7, .cx-quiet .cx-t12 { animation-duration: 37s; } .cx-quiet .cx-t3, .cx-quiet .cx-t8, .cx-quiet .cx-t13 { animation-duration: 43s; } .cx-quiet .cx-t4, .cx-quiet .cx-t9, .cx-quiet .cx-t14 { animation-duration: 31s; } .cx-quiet .cx-t5, .cx-quiet .cx-t10, .cx-quiet .cx-t15 { animation-duration: 41s; } /* Der Inhalt liegt ueber dem Hintergrund. Als Stapelkontext an der Spalte und nicht als Regel je Kind: Vorher stand hier ".content > *:not(.cx-field)", solange der Hintergrund in der Dashboard-Seite lag. Seit er in der Huelle haengt (MainLayout), gilt es fuer jede Seite - und eine Regel an der Spalte trifft auch Inhalte, die kein direktes Kind von .content sind. */ .main-col { position: relative; z-index: 1; } /* Vollbild (Diagramm .ts-fs, Live-Board .lm-fs, Antwortzeiten .ct-fs): Die Auflagen liegen in dieser Spalte und kommen mit ihrem z-index 60 nicht über deren Stapelkontext hinaus – die Navigation (20) malte darüber und verdeckte links Titel, Legende und Achse. Solange eine offen ist, steht die Spalte deshalb über der Navigation. Unter den Dialogen der Hülle (100) bleibt sie trotzdem. */ .main-col:has(.ts-fs, .lm-fs, .ct-fs) { z-index: 25; } /* Ro.Ki im Vollbild. Schwebend liegt er ohnehin darüber (z-index 90). Angedockt ist er eine Spalte des Rasters mit z-index 1 – das Vollbild bedeckte mit inset:0 auch diese Spalte, und das geöffnete Gespräch lag unsichtbar dahinter. Das Vollbild endet deshalb vor der Andockspalte, in voller oder eingeklappter Breite; der Assistent bleibt neben dem Diagramm, über das man ihn gerade fragt. */ @media (min-width: 901px) { .app-shell.assist-docked :is(.ts-chart-host.ts-fs, .lm-stage.lm-fs, .ct-plot-host.ct-fs) { right: var(--asx-dock-w, 380px); } .app-shell.assist-docked.assist-min :is(.ts-chart-host.ts-fs, .lm-stage.lm-fs, .ct-plot-host.ct-fs) { right: min(var(--asx-dock-w, 380px), 252px); } } /* Schmal liegt das angedockte Fenster als Blatt über der Seite (siehe „Schmale Fenster“ bei Ro.Ki) – dort muss es über das Vollbild, nicht daneben. */ .app-shell:has(.ts-fs, .lm-fs, .ct-fs) .asx-panel.is-docked { z-index: 90; } /* Auf hellem Grund ist der Strom sonst zu kraeftig: Eine Akzentfarbe auf Weiss traegt weiter als auf Dunkelblau, und "subtil" ist der ganze Zweck. */ :root[data-theme="rosi-light"] .cx-quiet .cx-pulse use, :root[data-theme="paper"] .cx-quiet .cx-pulse use, :root[data-theme="nordic"] .cx-quiet .cx-pulse use, :root[data-theme="solar"] .cx-quiet .cx-pulse use { opacity: 0.20; } :root[data-theme="rosi-light"] .cx-quiet .cx-traces, :root[data-theme="paper"] .cx-quiet .cx-traces, :root[data-theme="nordic"] .cx-quiet .cx-traces, :root[data-theme="solar"] .cx-quiet .cx-traces { opacity: 0.5; } /* Auf schmalen Fenstern ganz weg. Dort ist der Inhalt einspaltig und nimmt die ganze Breite - der Hintergrund liegt dann nicht daneben, sondern darunter, und ein Telefon zahlt fuenfzehn laufende Animationen mit seiner Laufzeit. */ @media (max-width: 900px) { .cx-quiet { display: none; } } .cx-t20 { animation-duration: 10.5s; animation-delay: -5.5s; } .cx-t21 { animation-duration: 12.2s; animation-delay: -12.1s; } .cx-t22 { animation-duration: 13.9s; animation-delay: -8.2s; } /* ---------- Die Kernaussage ---------- */ .login-brandside .lb-claim { color: #CFE0F4; font-size: 13.5px; margin-top: 10px; max-width: 420px; border-left: 2px solid var(--brand-400); padding-left: 11px; } .login-brandside .lb-for { margin-top: 24px; max-width: 470px; } .login-brandside .lb-for-head { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; color: #8A9BB4; margin-bottom: 9px; } .login-brandside .lb-for-list { display: flex; flex-wrap: wrap; gap: 7px; } .login-brandside .lb-for-list span { padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(122,164,220,0.32); background: rgba(24,52,92,0.42); color: #BFD4EC; font-size: 11.5px; white-space: nowrap; } /* ---------- Passwort vergessen ---------- */ .login-forgot { margin-top: 18px; } .login-link { background: none; border: 0; padding: 0; color: var(--text-dim); font-size: 12.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .login-link:hover:not(:disabled) { color: var(--accent); } .login-link:disabled { opacity: .5; cursor: default; } .login-forgot-box { display: flex; flex-direction: column; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-raised); } .login-forgot-head { font-size: 13.5px; font-weight: 600; } .login-forgot-sub { font-size: 11.5px; line-height: 1.55; color: var(--text-dim); } .login-ok { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); color: var(--ok); font-size: 12.5px; } /* ---------- Der rechtliche Fuß ---------- Er steht unter der Karte und nicht am Seitenrand: Auf einem schmalen Fenster ist die Karte die ganze Seite, und ein Fuß am Seitenrand stünde dort unerreichbar weit unten. */ .login-legal { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 26px; } .login-legal a { color: var(--text-dim); font-size: 11.5px; text-decoration: none; } .login-legal a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .login-legal-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-faint); flex: none; } .login-copy { text-align: center; margin-top: 8px; font-size: 10.5px; color: var(--text-faint); } /* Schmale Fenster: aus den zwei Spalten wird ein Markenstreifen oben und darunter das mittig stehende Formular. Der Werbetext der Markenseite entfällt dabei – er erklärt das Produkt, wer hier anmeldet kennt es bereits, und nebeneinander bliebe für die Eingabefelder zu wenig Breite. */ @media (max-width: 900px) { /* Aus dem Nebeneinander wird ein Übereinander: Die Markenseite ist keine Spalte mehr, sondern die Unterlage der ganzen Seite. Vorher stand hier ein Streifen mit dem Logo und darunter eine weiße Fläche mit Feldern – auf dem Telefon war vom Produkt nichts mehr zu sehen, und genau das Telefon zeigt die Seite am häufigsten. */ .login-wrap { display: block; position: relative; } /* inset:0 misst die volle Höhe des Elternteils, nicht die des Fensters: Wird das Formular länger als der Schirm, wächst die Unterlage mit und die Platine hört nicht auf halber Strecke auf. */ .login-brandside { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 26px 18px 0; border-right: 0; border-bottom: 0; } .login-brandside .lb-live { display: block; } .cx-inner { display: inline; } .login-brandside .lb-top { justify-content: center; } .login-brandside .lb-logo { height: 28px; } /* Von der Aussage bleibt der erste Satz. Das Logo allein sagt, von wem die Seite ist, aber nicht, wofür sie da ist – und auf dem Telefon ist dieser Kopf alles, was das Produkt zeigt. Der Rest des Textes bliebe ohnehin unter der Karte. Die Ränder werden im Ganzen gesetzt: Auf dem Großbild stehen dort zwei auto, die den Text mittig halten; in einer Spalte, die oben beginnt, schöben sie ihn nach unten. */ .login-brandside .lb-hero { display: block; margin: 13px 0 0; max-width: 330px; text-align: center; } .login-brandside .lb-hero h1 { font-size: 17px; line-height: 1.32; letter-spacing: 0; } /* Der Umbruch gehört zur großen Überschrift, hier läuft der Satz in einer Zeile weiter und bricht dort, wo die Breite es verlangt. */ .login-brandside .lb-hero h1 br { display: none; } .login-brandside .lb-hero p, .login-brandside .lb-claim, .login-brandside .lb-for { display: none; } .login-formside { position: relative; z-index: 2; min-height: 100vh; min-height: 100dvh; padding: 152px 18px 36px; } /* Das Formular bekommt eine eigene Fläche. Ohne sie stünden die Felder unmittelbar auf den Leiterbahnen: Der Strom liefe mitten durch die Eingabe, und lesbar wäre weder das eine noch das andere. Die Farben kommen aus dem Thema, nicht aus dieser Regel – sonst wäre die Karte in einem hellen Thema dunkel und in einem dunklen hell. */ .login-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 20px 20px; box-shadow: 0 26px 64px rgba(3,10,22,0.55); } } /* Auf sehr schmalen Fenstern trägt der Kopf nur noch das Logo. */ @media (max-width: 480px) { .login-brandside { padding: 20px 14px 0; } .login-brandside .lb-logo { height: 24px; } .login-brandside .lb-hero h1 { font-size: 15.5px; } .login-formside { padding: 136px 12px 28px; } .login-card { padding: 20px 16px 16px; } } /* ---------- Toolbar / filters ---------- */ .toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .toolbar .grow { flex: 1; } .section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } /* ---------- Misc ---------- */ .route-loading { display: grid; place-items: center; min-height: 60vh; } .spinner { width: 26px; height: 26px; border: 2.5px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } .empty-state { display: grid; place-items: center; gap: 10px; padding: 60px 20px; text-align: center; color: var(--text-dim); } .empty-state .es-icon { color: var(--text-faint); } .text-dim { color: var(--text-dim); } .mono { font-family: var(--font-mono); } .divider { height: 1px; background: var(--line); margin: 16px 0; } .row { display: flex; align-items: center; gap: 10px; } .col { display: flex; flex-direction: column; gap: 10px; } .spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* ---------- Formular-Raster (Modals) ---------- */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* Erklärung unter einem Eingabefeld – die Regel steht dort, wo getippt wird, und nicht erst in der Fehlermeldung danach. */ .field-hint { font-size: 11px; color: var(--text-faint); line-height: 1.45; } .field-hint--warn { color: var(--warn); } /* Aktionszeile am Fuß eines Panels. Das Panel selbst kennt keinen Fuß (sein Kopf trägt die Aktionen) – bei einem Formular gehören Speichern und Verwerfen aber unter die Felder, in Leserichtung hinter das, was sie betrifft. */ .panel-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); } /* ---------- Eigenes Profil ---------- */ /* Die Seite trägt die Höhe des Fensters: Kopf, Registerleiste und ein etwaiger Vermerk stehen fest, gerollt wird nur der Inhalt der offenen Karte. Vorher lagen alle Abschnitte in einer Bahn untereinander – auf 1366×768 gut die doppelte Fensterhöhe, und der Passwortwechsel begann mit Scrollen. Höhe = Viewport − Topbar(58) − .content-Padding oben+unten(2×22) = 102px. Gemessen, nicht geschätzt: ein zu kleiner Abzug erzeugt genau den Seiten-Scroll, den dieses Layout vermeidet. min-height niedrig – bei 1366×768 bleiben ~666px. */ .prof-layout { display: flex; flex-direction: column; gap: 12px; height: calc(100vh - 102px); min-height: 420px; } /* Der Kopf bringt seinen Abstand selbst mit; hier setzt ihn die Flex-Lücke. */ .prof-head { flex: none; margin-bottom: 0; } .prof-head .prof-ident { gap: 14px; min-width: 0; } .prof-head h1 { font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .prof-head .prof-badges { gap: 6px; flex: none; } /* Registerleiste mit dem Hinweis daneben, was die offene Karte kann – derselbe Aufbau wie im ODX-Arbeitsbereich. */ .prof-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex: none; } .prof-bar .tabs button { display: inline-flex; align-items: center; gap: 7px; } .prof-hint { font-size: 11.5px; } /* Punkt an der Karte „Sicherheit", solange ein Passwortwechsel vermerkt ist. */ .prof-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warn); flex: none; } /* Der Vermerk steht über den Karten und bleibt beim Blättern stehen; sein Knopf rechts. */ .prof-flag { flex: none; margin: 0; } .prof-flag > button { margin-left: auto; flex: none; } /* Nur dieser Bereich rollt. Rechts 4px Luft, sonst liegt die Rollleiste auf dem Panelrahmen. */ .prof-body { flex: 1; min-height: 0; overflow: auto; padding-right: 4px; } /* Zwei Karten je Register, solange Platz ist – die Felder eines Abschnitts bleiben so zusammen sichtbar. Die Breite ist begrenzt: ein Formular über die ganze Breite eines Ultrawide hat Beschriftung und Eingabe eine Armlänge auseinander. */ .prof-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; max-width: 1180px; } @media (max-width: 1100px) { /* Untereinander passt der Inhalt nicht mehr ins Fenster. Die feste Höhe fällt deshalb weg: ein Rollbereich im Rollbereich ist schlechter als ein Seiten-Scroll. */ .prof-layout { height: auto; min-height: 0; } .prof-body { overflow: visible; padding-right: 0; } .prof-grid { grid-template-columns: 1fr; } } /* Auf schmalen Fenstern stehen auch Vor- und Nachname untereinander. */ @media (max-width: 640px) { .prof-grid .form-grid { grid-template-columns: 1fr; } } /* Beschriftung mit Merkzeichen: „fest" an einem ausgegrauten Feld sagt auf einen Blick, was der Absatz darunter im Satz erklärt. Ohne das sieht ein gesperrtes Eingabefeld nach einem Fehler aus. */ .prof-grid .field > label { display: flex; align-items: center; gap: 8px; } .prof-fixed { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px; } /* Nachschlagewerte als Zeilenliste: Beschriftung links, Wert rechts, Haarlinie dazwischen. Als .col mit Lücke stünde dieselbe Angabe da, nur ohne die Führung, an der das Auge die Zeile bis zum Wert entlangläuft. */ .prof-rows { display: flex; flex-direction: column; } .prof-rows > .spread { min-height: 34px; padding: 9px 0; border-top: 1px solid var(--line); } .prof-rows > .spread:first-child { padding-top: 0; border-top: 0; } .prof-rows > .spread:last-child { padding-bottom: 0; } .prof-rows .k { font-size: 12.5px; color: var(--text-dim); } .prof-empty { padding: 4px 0; color: var(--text-faint); font-size: 12.5px; } /* Erklärender Absatz am Fuß einer Karte. */ .prof-note { margin: 12px 0 0; max-width: 70ch; } /* Bild links, Erklärung und Knöpfe rechts – unter 480px untereinander, dort reicht die Breite neben einem 96er-Kreis für keinen Satz mehr. */ .avatar-edit { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; } @media (max-width: 480px) { .avatar-edit { flex-direction: column; } } /* Das Dateifeld wird vom Knopf daneben ausgelöst und darf nicht selbst zu sehen sein. Nicht display:none: ein ausgeblendetes Feld nimmt in manchen Browsern keine Programmklicks an, und der Dialog ginge nicht auf. */ .avatar-file { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- Recherche-Seiten: Filter fest oben, Tabelle scrollt intern ---------- */ /* Genutzt von Resultate und Messaufgaben (Klassenpräfix res- historisch von den Resultaten). Bei 50 Zeilen je Seite wäre ein Seiten-Scroll sonst die Regel und der Filter ständig aus dem Bild. Höhe = Viewport − Topbar(58) − .content-Padding(2×22). min-height niedrig: bei 1366×768 bleiben ~666px. */ .res-layout { display: flex; flex-direction: column; gap: 12px; height: calc(100vh - 102px); min-height: 400px; } .res-layout > .res-panel { flex: 1; min-height: 0; } /* Tabelle randlos im Panel – der Panel-Rahmen fasst sie ein, sonst zwei Rahmen. */ .res-panel > .panel-body { padding: 0; } /* Kein unterer Radius mehr: unter der Tabelle sitzt jetzt das Blättern, und das trägt die abgerundete Kante des Panels. */ .res-panel .table-wrap { flex: 1; min-height: 0; overflow: auto; border: 0; border-radius: 0; } /* Kompaktes Filterpanel: jede gesparte Zeile hier ist eine Tabellenzeile mehr. */ .res-filters > .panel-body { padding: 10px 12px; } .res-filters .toolbar { gap: 8px; margin: 0; } .res-filters .field { gap: 2px; } .res-filters .field > label { font-size: 10.5px; letter-spacing: 0.02em; } .res-filters .input, .res-filters .select { height: 30px; font-size: 12.5px; padding-left: 9px; } .res-filters .select { background-position: right 9px center; padding-right: 26px; } .res-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } /* Der Aufklappknopf trägt einen Rahmen. Als rahmenloser grauer Pfeil war er kaum als Knopf zu erkennen – man sah der Zeile nicht an, dass sich etwas darin öffnen lässt. Offen trägt er die Akzentfarbe: in einer langen Liste ist damit auf einen Blick zu sehen, welche Zeile die aufgeklappte ist. */ .res-expand { width: 22px; height: 22px; padding: 0; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel-raised); color: var(--text-dim); font-size: 11px; line-height: 1; cursor: pointer; transition: border-color .12s, background .12s, color .12s; } .res-expand:hover { border-color: var(--accent); color: var(--text); } .res-expand.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } /* Das Blättern sitzt unter der Tabelle, wo es bei einer Tabelle hingehört. Es rollt nicht mit: der Streifen liegt außerhalb von .table-wrap und bleibt am unteren Rand stehen. */ .res-pager { display: flex; align-items: center; gap: 7px; flex: none; flex-wrap: wrap; padding: 8px 14px; border-top: 1px solid var(--line); font-size: 12px; border-radius: 0 0 var(--radius) var(--radius); } .res-check { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; vertical-align: middle; } /* Schmale Fenster: feste Höhe aufgeben, die Seite darf scrollen. */ @media (max-width: 1100px) { .res-layout { height: auto; min-height: 0; } .res-layout > .res-panel { flex: none; } .res-panel .table-wrap { max-height: 60vh; } } /* ---------- Tabellen mit aufklappbarer Unterzeile (Resultate, Messaufgaben) ---------- */ /* Zeilen flacher als in den übrigen Tabellen – hier zählt die Menge. */ .res-table th { padding: 8px 14px; } .res-table > tbody > tr > td { padding: 7px 14px; } /* Auffällige Zeilen bekommen eine Kante statt einer Flächenfarbe – eingefärbte Zeilen kämpfen sonst mit dem :hover der Tabelle und mit jedem zweiten Theme. */ .res-table tbody tr.res-faulty td:first-child { box-shadow: inset 2px 0 0 var(--fault); } .res-table tbody tr.res-warn td:first-child { box-shadow: inset 2px 0 0 var(--warn); } .res-table tbody tr.res-files-row:hover { background: transparent; } .res-files-row > td { padding: 0 14px 12px 48px; background: var(--panel-raised); } table.data.res-files { font-size: 12px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } table.data.res-files th { padding: 7px 12px; background: transparent; position: static; } table.data.res-files td { padding: 7px 12px; } .res-sub-head { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin: 10px 0 6px; display: block; } .res-pre { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.55; background: var(--panel-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin: 0; max-height: 52vh; overflow: auto; white-space: pre-wrap; word-break: break-word; } /* ---------- Skript-Editor ---------- */ /* Bildschirmfüllend wie die Recherche-Seiten: Kopfleiste fest, darunter links die Sektionen des Skripts, rechts Editor/Flow und die Prüfbefunde. */ .ed-layout { display: flex; flex-direction: column; gap: 10px; height: calc(100vh - 102px); min-height: 460px; } .ed-bar > .panel-body { padding: 8px 12px; } .ed-bar-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .ed-bar .field > label { font-size: 10.5px; } .ed-bar .select { height: 30px; font-size: 12.5px; } .ed-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 10px; } /* Linke Spalte: Sektionen, jede einzeln auf- und zuklappbar, insgesamt scrollend. */ .ed-side { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; padding-right: 2px; } .ed-section { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); } .ed-section-grow { display: flex; flex-direction: column; min-height: 0; } .ed-section-head { width: 100%; display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 9px 11px; background: var(--panel-raised); border: 0; cursor: pointer; border-radius: var(--radius) var(--radius) 0 0; color: var(--text); font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; text-align: left; } .ed-section-head:hover { color: var(--accent); } .ed-section-body { padding: 10px 11px; border-top: 1px solid var(--line); } .ed-section-scroll { max-height: 40vh; overflow-y: auto; } .ed-lock { font-size: 11px; opacity: 0.75; } /* ECU-Karten */ .ecu-card { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel-inset); } .ecu-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; border-bottom: 1px solid var(--line); } .ecu-name { font-size: 12.5px; font-weight: 600; color: var(--accent); } .ecu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 9px; } .ecu-grid .field > label, .ecu-sub .field > label { font-size: 10px; } .ecu-grid .input, .ecu-grid .select, .ecu-sub .input, .ecu-sub .select { height: 28px; font-size: 12px; padding-left: 8px; } .ecu-sub { display: flex; flex-direction: column; gap: 6px; padding: 0 9px 9px; } /* Servicekatalog: eine Liste, die auch bei 60 Einträgen je ECU bedienbar bleibt. */ .svc-list { display: flex; flex-direction: column; gap: 2px; } .svc-item { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 5px 8px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; cursor: pointer; text-align: left; color: var(--text); } .svc-item:hover { background: var(--panel-raised); border-color: var(--line); } .svc-name { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .svc-meta { font-size: 10.5px; color: var(--accent); flex: none; } /* Variantenerkennung */ .vd-item { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; } .vd-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 9px; background: var(--panel-inset); border: 0; cursor: pointer; color: var(--text); font-size: 11.5px; text-align: left; } .vd-head:hover { color: var(--accent); } .vd-body { padding: 7px 9px; display: flex; flex-direction: column; gap: 6px; } .vd-or { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--text-faint); text-align: center; } .vd-value { color: var(--accent); } /* Bausteine */ .tpl-grid { display: flex; flex-wrap: wrap; gap: 5px; } .tpl-item { padding: 5px 9px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel-raised); color: var(--text-dim); cursor: pointer; font-family: var(--font-ui); font-size: 11.5px; white-space: nowrap; } .tpl-item:hover { color: var(--accent); border-color: var(--accent); } /* Rechte Spalte */ .ed-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; } .ed-panes { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } .ed-panes-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ed-pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; } .ed-pane-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 11px; background: var(--panel-raised); border-bottom: 1px solid var(--line); } .monaco-host { width: 100%; height: 100%; } .ed-monaco { flex: 1; min-height: 0; } /* Kurzes Aufblitzen der Zielzeile beim Sprung aus Flow oder Befundliste. */ .diag-line-flash { background: rgba(38, 90, 166, 0.35); transition: background .4s; } /* Prüfbefunde */ .ed-issues { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); display: flex; flex-direction: column; max-height: 34%; min-height: 0; } .ed-issues-collapsed { max-height: none; } .ed-issues-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 11px; background: var(--panel-raised); border: 0; cursor: pointer; color: var(--text); font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; border-radius: var(--radius) var(--radius) 0 0; } .ed-issues-body { overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 3px; border-top: 1px solid var(--line); } .ed-issue { display: flex; align-items: baseline; gap: 8px; padding: 5px 8px; text-align: left; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text); cursor: pointer; font-size: 12px; } .ed-issue:hover { background: var(--panel-raised); border-color: var(--line); } .ed-issue-sev { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; flex: none; } .ed-issue-error .ed-issue-sev { color: var(--fault); } .ed-issue-warning .ed-issue-sev { color: var(--warn); } .ed-issue-info .ed-issue-sev { color: var(--text-dim); } .ed-issue-line { font-size: 10.5px; color: var(--text-faint); flex: none; } .ed-issue-msg { min-width: 0; } /* ---------- OnEvent-Editor ---------- */ /* Links die Triggerliste, rechts der gewählte Trigger in drei Schritten. Der Referenz-Editor führte jeden Schritt in einem eigenen Dialog; hier bleibt alles sichtbar und die Schritte sind frei anwählbar. */ .oe-body { grid-template-columns: 320px minmax(0, 1fr); } .oe-list { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); } .oe-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: var(--panel-raised); border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; } .oe-list-body { flex: 1; min-height: 0; overflow-y: auto; padding: 7px; display: flex; flex-direction: column; gap: 5px; } .oe-item { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-inset); padding: 7px 8px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: border-color .12s, background .12s; } .oe-item:hover { border-color: var(--accent); } .oe-item.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: var(--panel-raised); } .oe-item-main { display: flex; align-items: center; gap: 8px; min-width: 0; } .oe-item-icon { font-size: 15px; flex: none; width: 20px; text-align: center; } .oe-item-name { font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oe-item-note { font-size: 10.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oe-item-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .oe-dots { display: inline-flex; gap: 3px; } /* Drei Punkte = drei Schritte. Auf einen Blick, welcher Trigger noch nicht fertig ist. */ .oe-dot { width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 9px; border: 1px solid var(--line-strong); color: var(--text-faint); } .oe-dot.ok { border-color: var(--ok); color: var(--ok); } .oe-dot.miss { border-color: var(--warn); color: var(--warn); } .oe-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; } .oe-head { display: flex; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .oe-head .field > label { font-size: 10.5px; } .oe-head .input { height: 30px; font-size: 12.5px; } /* ---------- Ablaufkette (Aktivitätsdiagramm) ---------- Start ▸ Ereignis ▸ Messaufgabe ▸ Ausführung ▸ Fertig. Jeder Schritt ist ein eigenes Panel, dazwischen liegen Kanten. Die Kanten bis zum aktuellen Schritt sind gefüllt; die Kante, die in den aktuellen Schritt führt, trägt einen laufenden Punkt. */ /* Der Ablauf bekommt ein Drittel der Fläche, die Bearbeitung darunter zwei Drittel. */ .oe-flow { flex: 1 1 0; min-height: 132px; display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 12px 12px 13px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--panel-raised), transparent); } /* Die Kette nimmt die volle Breite ein: der Platz geht zuerst an die Kanten, die Panels wachsen nur maßvoll mit – ein Ablauf liest sich über lange Linien. */ .oe-flow-chain { flex: 1; display: flex; align-items: stretch; min-width: 0; overflow-x: auto; padding: 2px 2px 4px; height: 100%; max-height: 210px; } /* Start-/Endknoten: runde Marken wie im Aktivitätsdiagramm. */ .oe-cap { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: none; align-self: center; color: var(--text-faint); } .oe-cap-dot { width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--panel-inset); transition: border-color .3s, background .3s, box-shadow .3s; } .oe-cap-end .oe-cap-dot { box-shadow: inset 0 0 0 2px var(--panel); } .oe-cap.lit { color: var(--ok); } .oe-cap.lit .oe-cap-dot { border-color: var(--ok); background: var(--ok); } .oe-cap-end.lit .oe-cap-dot { box-shadow: inset 0 0 0 2px var(--panel), 0 0 10px -1px var(--ok); } .oe-cap-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; } /* Kante: Grundlinie, darüber die gefüllte Linie, dazu Pfeilspitze und laufender Punkt. */ .oe-link { position: relative; flex: 3 1 40px; min-width: 34px; align-self: center; height: 14px; } .oe-link::before, .oe-link::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; border-radius: 2px; } .oe-link::before { background: var(--line-strong); } .oe-link::after { background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform .45s cubic-bezier(.4, 0, .2, 1); } .oe-link.on::after { transform: scaleX(1); } .oe-link-arrow { position: absolute; right: -1px; top: 50%; width: 0; height: 0; margin-top: -4px; border-left: 5px solid var(--line-strong); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: border-left-color .45s .2s; } .oe-link.on .oe-link-arrow { border-left-color: var(--accent); } /* Der Punkt läuft nur auf der Kante, die in den aktuellen Schritt führt. */ .oe-link-pulse { display: none; } .oe-link.flow .oe-link-pulse { display: block; position: absolute; top: 50%; left: 0; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px 1px var(--accent-glow); animation: oe-run 1.5s cubic-bezier(.55, 0, .45, 1) infinite; } @keyframes oe-run { 0% { left: 0; opacity: 0; transform: scale(.4); } 18% { opacity: 1; transform: scale(1); } 72% { opacity: 1; transform: scale(1); } 100% { left: calc(100% - 6px); opacity: 0; transform: scale(.4); } } /* Schritt-Panel in der Kette */ .oe-node { flex: 1 1 168px; min-width: 150px; max-width: 300px; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; justify-content: center; padding: 10px 13px; cursor: pointer; text-align: left; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel-inset); color: var(--text-dim); transition: border-color .18s, background .18s, color .18s, box-shadow .18s, transform .18s; } .oe-node:hover { border-color: var(--accent); color: var(--text); transform: translateY(-1px); } .oe-node.active { border-color: var(--accent); color: var(--text); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset, 0 0 18px -6px var(--accent-glow); } .oe-node.done { border-color: color-mix(in srgb, var(--ok) 45%, var(--line-strong)); } .oe-node.done.active { border-color: var(--accent); } .oe-node-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; } .oe-node-no { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--panel-raised); border: 1px solid var(--line-strong); font-family: var(--font-mono); font-size: 10px; } .oe-node.active .oe-node-no { border-color: var(--accent); color: var(--accent); } .oe-node.done .oe-node-no { border-color: var(--ok); color: var(--ok); } .oe-node-state { font-size: 11px; flex: none; color: var(--warn); } .oe-node.done .oe-node-state { color: var(--ok); } .oe-node-name { font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; } .oe-node-note { font-size: 10px; color: var(--text-faint); } .oe-node-val { max-width: 100%; margin-top: 3px; padding: 1px 7px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel); font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oe-node.active .oe-node-val { border-color: var(--accent); color: var(--accent); } .oe-flow-all { flex: none; align-self: center; padding: 6px 11px; cursor: pointer; border: 1px solid var(--line-strong); border-radius: 20px; background: var(--panel-inset); color: var(--text-dim); font-family: var(--font-ui); font-size: 11.5px; white-space: nowrap; } .oe-flow-all:hover { border-color: var(--accent); color: var(--text); } .oe-flow-all.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .oe-step-body { flex: 2 1 0; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; } .oe-step-body.oe-stack { gap: 0; } /* Das Panel zum aktuellen Schritt – es fährt bei jedem Wechsel neu ein. */ .oe-stage { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-inset); } .oe-stage.solo { flex: 1; } .oe-stage.solo.oe-stage-1 { animation: oe-enter-1 .28s ease-out; } .oe-stage.solo.oe-stage-2 { animation: oe-enter-2 .28s ease-out; } .oe-stage.solo.oe-stage-3 { animation: oe-enter-3 .28s ease-out; } @keyframes oe-enter-1 { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } } @keyframes oe-enter-2 { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } } @keyframes oe-enter-3 { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } } .oe-stage-head { display: flex; align-items: center; gap: 8px; padding: 8px 11px; background: var(--panel-raised); border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; } .oe-stage-no { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 1px solid var(--accent); color: var(--accent); font-family: var(--font-mono); font-size: 10px; } .oe-stage-title { font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; } .oe-stage-sub { font-size: 10.5px; color: var(--text-faint); flex: 1; min-width: 0; } .oe-stage-flag { flex: none; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 7px; border-radius: 20px; border: 1px solid currentColor; } .oe-stage-flag.ok { color: var(--ok); } .oe-stage-flag.miss { color: var(--warn); } .oe-stage-body { padding: 11px; overflow: auto; } /* Übersicht: die drei Panels untereinander, senkrecht verbunden. */ .oe-vlink { position: relative; height: 26px; flex: none; } /* Senkrecht unter der Nummer im Kopf des Panels – die Kette bleibt in einer Flucht. */ .oe-vlink::before, .oe-vlink::after { content: ''; position: absolute; top: 0; bottom: 0; left: 21px; width: 1.5px; border-radius: 2px; } .oe-vlink::before { background: var(--line-strong); } .oe-vlink::after { background: var(--accent); transform: scaleY(0); transform-origin: top center; transition: transform .45s cubic-bezier(.4, 0, .2, 1); } .oe-vlink.on::after { transform: scaleY(1); } .oe-vlink-dot { position: absolute; left: 17px; bottom: 3px; width: 0; height: 0; border-top: 6px solid var(--line-strong); border-left: 5px solid transparent; border-right: 5px solid transparent; transition: border-top-color .45s .2s; } .oe-vlink.on .oe-vlink-dot { border-top-color: var(--accent); } @media (prefers-reduced-motion: reduce) { .oe-link.flow .oe-link-pulse { animation: none; } .oe-stage.solo { animation: none; } } .oe-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--line); background: var(--panel-raised); } /* Auswahlkarten für Trigger- und Aufgabenart */ .trig-kind { display: flex; align-items: center; gap: 9px; padding: 8px 11px; cursor: pointer; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel-inset); color: var(--text-dim); text-align: left; min-width: 190px; transition: border-color .12s, color .12s, background .12s; } .trig-kind:hover { border-color: var(--accent); color: var(--text); } .trig-kind.active { border-color: var(--accent); color: var(--text); background: var(--accent-soft); } .trig-kind-icon { font-size: 16px; flex: none; width: 22px; text-align: center; } .trig-kind-name { font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; } .trig-kind-note { font-size: 10.5px; color: var(--text-faint); } /* Dongle-Taste: das Bild zeigt, welche Taste gemeint ist – links oder rechts am Gehäuse. */ .gpio-grid { display: flex; gap: 12px; flex-wrap: wrap; } .gpio-card { display: flex; flex-direction: column; gap: 7px; padding: 9px; cursor: pointer; text-align: left; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--panel-inset); color: var(--text-dim); width: 230px; transition: border-color .15s, color .15s, background .15s, box-shadow .15s, transform .15s; } .gpio-card:hover { border-color: var(--accent); color: var(--text); transform: translateY(-1px); } .gpio-card.active { border-color: var(--accent); color: var(--text); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; } /* Die Zeichnung hat einen weißen Grund; die helle Fläche bleibt in jedem Theme gleich. */ .gpio-img { width: 100%; height: 138px; object-fit: contain; background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px; } .gpio-foot { display: flex; align-items: center; gap: 7px; } .gpio-name { font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; flex: 1; } .gpio-note { font-size: 10.5px; color: var(--text-faint); } .gpio-check { font-size: 12px; color: var(--accent); flex: none; } /* GPS: Karte neben den Feldern, Klick setzt die Position */ .geo-map { flex: 1; min-width: 280px; height: 300px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; } /* CAN-Signale */ .sig-card { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-inset); } .sig-head { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-bottom: 1px solid var(--line); } .sig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; padding: 9px; } .sig-grid .field > label { font-size: 10px; } .sig-grid .input, .sig-grid .select { height: 28px; font-size: 12px; padding-left: 8px; } /* Ausführungsarten */ .exec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; } .exec-card { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 11px 13px; cursor: pointer; text-align: left; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel-inset); color: var(--text-dim); transition: border-color .12s, color .12s, background .12s; } .exec-card:hover { border-color: var(--accent); color: var(--text); } .exec-card.active { border-color: var(--accent); color: var(--text); background: var(--accent-soft); } .exec-icon { font-family: var(--font-mono); font-size: 15px; color: var(--accent); } .exec-name { font-family: var(--font-ui); font-size: 13px; font-weight: 600; } .exec-note { font-size: 10.5px; color: var(--text-faint); } @media (max-width: 1200px) { .oe-body { grid-template-columns: 1fr; } .oe-list { max-height: 320px; } .oe-pane { height: auto; } .geo-map { width: 100%; } /* Die Kette bleibt waagerecht und scrollt lieber, als umzubrechen – ein umgebrochener Ablauf liest sich nicht mehr als Ablauf. */ .oe-flow { flex-direction: column; align-items: stretch; gap: 9px; } .oe-flow-all { align-self: flex-end; } } /* ---------- Flow-Ansicht (OTX-/UML-Anlehnung) ---------- */ .flow-wrap { flex: 1; min-height: 0; overflow: auto; padding: 14px 16px; } .flow-chain { display: flex; flex-direction: column; gap: 0; } .flow-step { display: flex; flex-direction: column; } /* Verbindungslinie zwischen den Schritten – der Ablauf liest sich von oben nach unten. */ .flow-step + .flow-step > .flow-node::before, .flow-step > .flow-children > .flow-step + .flow-step > .flow-node::before { content: ''; position: absolute; left: 50%; top: -9px; width: 1px; height: 9px; background: var(--line-strong); } .flow-node { position: relative; display: flex; align-items: center; gap: 9px; margin: 9px 0 0; padding: 7px 11px; width: 100%; text-align: left; cursor: pointer; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel-raised); color: var(--text); font-family: var(--font-ui); font-size: 12.5px; transition: border-color .12s, background .12s; } .flow-node:hover { border-color: var(--accent); background: var(--panel-inset); } .flow-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; } .flow-badge { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 7px; border-radius: 20px; border: 1px solid currentColor; flex: none; opacity: 0.9; } .flow-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 12px; } .flow-note { font-size: 10.5px; color: var(--text-dim); flex: none; } .flow-line { font-size: 10px; color: var(--text-faint); flex: none; } /* Verschachtelung: Kinder eingerückt mit Klammerlinie, wie im Aktivitätsdiagramm. */ .flow-children { margin: 0 0 0 22px; padding-left: 14px; border-left: 1px dashed var(--line-strong); } .flow-loopback { font-size: 10.5px; color: var(--text-faint); padding: 6px 0 2px; font-family: var(--font-mono); } .flow-start .flow-badge, .flow-end .flow-badge { color: var(--ok); } .flow-start, .flow-end { border-radius: 20px; } .flow-ecu .flow-badge { color: var(--warn); } .flow-ecu { border-left: 2px solid var(--warn); } .flow-request .flow-badge { color: var(--accent); } .flow-request { border-left: 2px solid var(--accent); } .flow-block { background: var(--panel-inset); font-weight: 600; } .flow-block .flow-badge { color: var(--text-dim); } .flow-loop, .flow-condition { background: var(--panel-inset); } .flow-loop .flow-badge, .flow-condition .flow-badge { color: #C792EA; } .flow-try .flow-badge { color: var(--fault); } .flow-log .flow-badge, .flow-progress .flow-badge, .flow-statement .flow-badge { color: var(--text-faint); } .flow-comment { opacity: 0.75; font-style: italic; } .flow-progress .flow-title { color: var(--text-dim); } /* Schmale Fenster: Sektionen über den Editor legen, Seite darf scrollen. */ @media (max-width: 1200px) { .ed-layout { height: auto; min-height: 0; } .ed-body { grid-template-columns: 1fr; } .ed-side { overflow: visible; } .ed-panes, .ed-panes-split { grid-template-columns: 1fr; } .ed-pane { height: 60vh; } .ed-issues { max-height: none; } } /* ================= Zeitreihen ================= Zwei Spalten: links die Auswahl (Messungen, Signale), rechts die Ansicht. Alle Bedienelemente sind hier eine Nummer kleiner als im Rest des Portals – auf dieser Seite stehen viele davon gleichzeitig auf dem Schirm, und der Platz gehört dem Diagramm. Die Seite füllt das Fenster und scrollt nicht: 58px Topbar + 2×22px Padding von .content gehen ab, den Rest teilen Kopfzeile, Leiste und Inhalt unter sich auf. Gescrollt wird nur innerhalb der Panels – wer zum Diagramm scrollen muss, verliert die Auswahl aus dem Blick. Die Höhe hängt an dvh statt vh, damit die Adressleiste mobiler Browser nichts abschneidet. */ .ts-page { display: flex; flex-direction: column; height: calc(100dvh - 58px - 44px); min-height: 460px; } /* Die mittlere Spalte ist der Steg für die Breite der Auswahl (js/splitpane.js setzt --ts-side-w). Sie ersetzt den Abstand zwischen den Spalten; Auswahl und Ansicht stehen fest in ihren Spalten, damit die Ansicht nicht in die Stegspalte rutscht, wenn es den Steg gerade nicht gibt (Leiste). */ .ts-layout { display: grid; grid-template-columns: var(--ts-side-w, 340px) 12px minmax(0, 1fr); gap: 0; flex: 1; min-height: 0; } .ts-side { grid-column: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; } .ts-layout > .ts-main { grid-column: 3; } /* Trennstege: schmal im Ruhezustand, deutlich unter dem Zeiger – wie im ODX-Editor. Die Fläche zum Greifen ist der ganze Zwischenraum, gezeichnet wird nur eine Linie. */ .ts-split { position: relative; flex: none; touch-action: none; } .ts-split::before { content: ''; position: absolute; border-radius: 1px; background: transparent; transition: background .12s; } .ts-split:hover::before, .ts-split.dragging::before { background: var(--accent); } .ts-split-x { grid-column: 2; cursor: col-resize; } .ts-split-x::before { top: 0; bottom: 0; left: 5px; width: 2px; } .ts-split-y { height: 12px; cursor: row-resize; } .ts-split-y::before { left: 0; right: 0; top: 5px; height: 2px; } /* Mit Steg teilen sich die Panels die Höhe nicht mehr zu gleichen Teilen: die Messungen bekommen, was gezogen wurde (Vorgabe: die Hälfte), die Signale den Rest. Schrumpfen dürfen die Messungen trotzdem – ein gemerktes Maß aus einem größeren Fenster soll die Signale nicht unter ihre Mindesthöhe drücken. Der Steg selbst ist der Abstand. */ .ts-side.ts-side-split { gap: 0; } .ts-side-split > .ts-p-sessions { flex: 0 1 var(--ts-sessions-h, 50%); } /* Laschen oben, Ansicht darunter: die Spalte ist seit den Reitern eine Säule aus zwei Teilen. Die Ansicht nimmt, was die Laschen übrig lassen – mit height:100% wäre sie so hoch wie die ganze Spalte und stünde um die Laschenhöhe über. */ .ts-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .ts-main > .panel, .ts-main > .ts-chart-host { flex: 1; min-height: 0; height: auto; } /* Messungen und Signale teilen sich die Spalte zu gleichen Teilen – zwei gleich hohe Panels lesen sich als ein Paar, ungleiche wie ein Versehen. Beide behalten dieselbe Mindesthöhe, damit keines bei vielen Einträgen dem anderen den Platz nimmt. Auf dem Kommunikations-Reiter fehlt das Signal-Panel, und die Messungen nehmen die ganze Spalte. */ .ts-p-sessions { flex: 1 1 0; min-height: 168px; } /* Die Auswahlspalte ist schmal: Titel und Knopfreihe teilen sich den Kopf nicht mehr auf einer Zeile, sobald eine Aktion dazukommt. Umbrechen ist die ehrlichere Lösung als ein Titel, der zu „M“ zusammenfällt. */ .ts-side .panel-head { flex-wrap: wrap; row-gap: 6px; } .ts-side .panel-head > .row { margin-left: auto; } .ts-side .panel-title { min-width: 0; } .ts-side .panel-title h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ts-p-signals { flex: 1 1 0; min-height: 168px; } /* Eingeklappt: nur der Kopf bleibt, das andere Panel bekommt die Spalte. Der Körper wird versteckt und nicht weggelassen – Rollposition und Filter der Liste überleben so das Einklappen. Mit .panel-fill im Selektor, weil dessen height:100% sonst gewönne. */ .panel-fill.ts-folded { flex: 0 0 auto; height: auto; min-height: 0; } .panel-fill.ts-folded > .panel-body { display: none; } .ts-folded > .panel-head { border-bottom-color: transparent; } .ts-fold svg { transition: transform .15s; } .ts-folded .ts-fold svg { transform: rotate(-90deg); } /* Beides eingeklappt: die Spalte wird zur Leiste, die Ansicht bekommt die Breite. Die Panels bleiben im Dokument (siehe oben), nur unsichtbar; an ihrer Stelle stehen zwei Laschen mit senkrechter Schrift und der Zahl der gewählten Einträge. */ .ts-layout.ts-rail-mode { grid-template-columns: 38px 12px minmax(0, 1fr); } .ts-rail-mode .ts-side { gap: 8px; } .ts-rail-mode .ts-side > .panel { display: none; } .ts-rail-tab { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0; width: 100%; cursor: pointer; background: var(--panel); color: var(--text-dim); border: 1px solid var(--line); border-radius: var(--radius); font: inherit; transition: border-color .12s, color .12s; } .ts-rail-tab:hover, .ts-rail-tab:focus-visible { border-color: var(--line-strong); color: var(--text); } .ts-rail-ico { font-size: 11px; line-height: 1; } .ts-rail-label { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; } .ts-rail-count { min-width: 20px; padding: 1px 4px; border-radius: 9px; font-size: 10.5px; text-align: center; background: var(--accent-soft); color: var(--accent); } /* Die Auswahlleiste steht fest, der Rest ist der Inhalt. */ .ts-bar { margin-bottom: 10px; flex: none; } /* Die Ansicht selbst: Diagramm, Karte und Tabelle füllen ihr Panel und scrollen intern. */ .ts-chart-area { flex: 1; min-height: 180px; } .ts-map-area { flex: 1; min-height: 180px; display: flex; } .ts-map-area > .map-wrap { flex: 1; min-height: 0; } .ts-table-area { flex: 1; min-height: 0; overflow: auto; } .ts-pager { display: flex; align-items: center; gap: 7px; padding-top: 9px; margin-top: 9px; border-top: 1px solid var(--line); font-size: 11.5px; flex: none; } /* Trennstrich zwischen Bedien- und Exportknöpfen in einer Panel-Kopfzeile. */ .ts-sep { width: 1px; height: 18px; background: var(--line-strong); margin: 0 3px; flex: none; } .ts-f-dongle { min-width: 230px; flex: 1 1 230px; max-width: 460px; } /* So hoch wie die Auswahlfelder daneben. */ .ts-f-dongle .sels-btn { height: 38px; } .ts-f-range { width: 128px; } /* Die Trennpause sitzt hinter einem Knopf, nicht in einem Auswahlfeld: die Auflage dazu hängt darunter und braucht den Knopf als Bezugspunkt. */ .ts-f-gap { position: relative; align-self: flex-end; } .ts-gap-pop { right: auto; left: 0; min-width: 208px; } .ts-gap-note { font-size: 11px; line-height: 1.45; color: var(--text-dim); padding: 2px 10px 4px; max-width: 208px; } /* Der eigene Zeitraum: ein Knopf mit dem gesuchten Zeitraum, darunter die Auflage mit Von, Bis und „Übernehmen“ (siehe Timeseries.razor). */ .ts-f-custom { position: relative; } .ts-custom-btn { gap: 8px; padding: 0 12px; font-size: 12.5px; } .ts-custom-btn svg { width: 15px; height: 15px; flex: none; color: var(--text-dim); } .ts-custom-btn.btn-toggled svg { color: var(--accent); } .ts-custom-pop { right: auto; left: 0; width: 318px; padding: 8px 10px 10px; } .ts-cp-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 92px; gap: 6px; align-items: center; margin-top: 7px; } .ts-cp-row > label { font-size: 11.5px; color: var(--text-dim); } .ts-cp-row .input { height: 32px; padding: 0 8px; font-size: 12.5px; } .ts-cp-quick { display: flex; gap: 6px; margin-top: 9px; } .ts-cp-quick .chip:hover { border-color: var(--accent); color: var(--accent); } .ts-cp-err { margin-top: 8px; font-size: 11.5px; color: var(--warn); } .ts-cp-foot { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); } @media (max-width: 640px) { .ts-custom-pop { position: fixed; left: 12px; right: 12px; top: auto; width: auto; } } /* Knöpfe ohne Beschriftung stehen auf der Grundlinie der Eingabefelder – die Leiste zentriert sonst, und die Felder mit Beschriftung darüber sind höher. */ .ts-f-load, .ts-f-report { align-self: flex-end; } .ts-f-color { margin: 0; width: 200px; } .ts-f-search { margin: 0; width: 210px; } /* ---------- Darstellungsschalter in der Auswahlleiste ---------- */ .ts-display { display: flex; align-items: center; gap: 5px; margin-left: auto; align-self: flex-end; flex-wrap: wrap; } .ts-display .ts-y { width: 74px; } .ts-display .ts-f-smooth { margin: 0; width: 132px; } /* --- Vollbild des Diagramms ------------------------------------------------ Derselbe Panel-Inhalt, nur als Auflage über dem Fenster: der Wirt wechselt die Klasse, das Diagramm-Bauteil bleibt dasselbe und behält Zoom und Marken. */ .ts-chart-host { height: 100%; min-height: 0; outline: none; } .ts-chart-host > .panel { height: 100%; } .ts-chart-host.ts-fs { position: fixed; inset: 0; z-index: 60; padding: 10px; background: var(--bg); display: flex; } /* min-width: 0, weil die Auflage eine Zeile ist: Ohne ließe sich das Panel nicht schmaler machen als das Diagramm darin, und das trägt seine zuletzt gemessene Breite als feste Pixelzahl. Wurde das Vollbild schmaler – Ro.Ki angedockt –, blieb das Diagramm auf der alten Breite, ragte unter die Andockspalte, und sein ResizeObserver meldete nie etwas. */ .ts-chart-host.ts-fs > .panel { flex: 1; height: auto; min-height: 0; min-width: 0; } /* Im Vollbild ist reichlich Platz: die Werkzeuge stehen in einer Zeile und der Kopf darf umbrechen, statt die Knopfreihe abzuschneiden. */ .ts-chart-host.ts-fs .panel-head { flex-wrap: wrap; gap: 8px; } .ts-chart-host.ts-fs .ts-display { margin-left: 0; } /* Die Warnung zur Glättung bleibt auch auf schmalen Fenstern stehen: sie sagt, dass die gezeichnete Kurve gerechnet ist – das darf nicht die erste Zeile sein, die wegfällt. */ .chart-hint-warn { color: var(--warn); } /* Segmentierte Umschaltung (Linie/Fläche/Stufe): wie .tabs, nur in Knopfgröße. */ .seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--panel-inset); border: 1px solid var(--line); border-radius: var(--radius-sm); flex: none; } .seg button { height: 23px; padding: 0 9px; border: none; background: transparent; cursor: pointer; color: var(--text-dim); font-family: var(--font-ui); font-size: 11px; border-radius: 3px; transition: background .12s, color .12s; } .seg button:hover:not(.active) { color: var(--text); } .seg button.active { background: var(--panel-raised); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); } /* Eingeschalteter Umschaltknopf – abgesetzt vom gewöhnlichen Knopf, aber ruhiger als btn-primary: es sind Anzeigeoptionen, keine Hauptaktion. */ .btn.btn-toggled { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .btn.btn-toggled:hover { background: var(--accent-soft); border-color: var(--accent-hover); } /* ---------- Kompaktere Bedienelemente, nur auf dieser Seite ---------- */ .ts-page .toolbar { gap: 9px; } .ts-page .field { gap: 3px; } .ts-page .field > label { font-size: 10.5px; } .ts-page .input, .ts-page .select { height: 29px; font-size: 12px; padding: 0 9px; } .ts-page .select { padding-right: 26px; background-position: right 8px center; } .ts-page .btn { height: 29px; padding: 0 11px; font-size: 12px; gap: 6px; } .ts-page .btn-sm { height: 25px; padding: 0 8px; font-size: 11px; } .ts-page .btn-icon { width: 29px; padding: 0; } .ts-page .btn-sm.btn-icon { width: 25px; } .ts-page .chip { height: 20px; padding: 0 8px; font-size: 10px; gap: 4px; } .ts-page .tabs { padding: 2px; } .ts-page .tabs button { height: 26px; padding: 0 11px; font-size: 11.5px; } .ts-page .panel-head { padding: 8px 11px; } .ts-page .panel-title h3 { font-size: 12.5px; } .ts-page .check { font-size: 12px; gap: 7px; } .ts-page .check input { width: 14px; height: 14px; } .ts-page .data th, .ts-page .data td { padding: 5px 8px; font-size: 12px; } /* ---------- Liste der einzelnen Messungen ---------- */ /* Die Liste nimmt die Höhe ihres Panels – kein fester Deckel, sonst bliebe bei hohem Fenster Platz ungenutzt und bei niedrigem stünde sie über. Gerollt wird der Panelkörper als Ganzes, nicht die Liste: unter ihr stehen die kurzen Aufzeichnungen, und solange nur die obere Liste rollte, drückte der aufgeklappte Block sie auf null Höhe und ragte selbst aus dem Panel – dessen overflow:hidden (.panel-fill) schnitt ihn ab, ohne Bildlaufleiste. Mit einer Rollfläche für beide ist jede Messung erreichbar, und in der schmalen Spalte stehen nicht zwei Leisten nebeneinander. Mit .panel-fill im Selektor, weil dessen Regel weiter unten steht und sonst gewönne. */ .panel-fill.ts-p-sessions > .panel-body { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; } .ms-list { display: flex; flex-direction: column; gap: 3px; flex: none; padding: 1px; } .ms-item { display: flex; align-items: flex-start; gap: 7px; cursor: pointer; padding: 5px 7px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel-raised); transition: border-color .12s, background .12s; } .ms-item:hover { border-color: var(--line-strong); } .ms-item.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel-raised)); } .ms-item input[type="checkbox"] { flex: none; width: 14px; height: 14px; margin-top: 1px; accent-color: var(--accent); } /* Feste Breite: die Nummern sollen untereinander stehen, auch wenn eine Zeile keine hat. */ .ms-item .ms-no { flex: none; width: 15px; text-align: center; margin-top: 1px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); } .ms-item.sel .ms-no { color: var(--accent); font-weight: 700; } .ms-item .ms-main { flex: 1 1 auto; min-width: 0; } .ms-item .ms-title { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ms-item .ms-sub { font-size: 11px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ms-item .ms-meta { font-size: 10px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Beide Zeilen reihen ihre Angaben mit einem Mittelpunkt – als Trenner im CSS, damit eine fehlende Angabe (keine Strecke, kein GPS) keinen doppelten Punkt hinterlässt. Die Zusätze in der zweiten Zeile (Grund, Gerät) bringen ihren eigenen Abstand mit. */ .ms-item .ms-sub > span + span::before, .ms-item .ms-meta > .ms-sep::before, .ms-item .ms-meta > .ms-gps::before { content: '·'; margin: 0 5px; color: var(--text-faint); } .ms-item .ms-sub > span:first-child { font-weight: 600; } .ms-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .ms-item .ms-live { margin-left: 6px; padding: 0 5px; border-radius: 8px; font-size: 9.5px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); } /* Die selbst geschriebene Beschreibung darf zwei Zeilen hoch werden: ein Satz, der nach vier Wörtern abschneidet, hilft beim Wiedererkennen nicht. Mehr als zwei nicht – die Liste soll eine Liste bleiben und keine Zettelsammlung. */ .ms-item .ms-desc { margin-top: 1px; font-size: 10.5px; line-height: 1.35; color: var(--text-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Der Stift bleibt unsichtbar, bis die Zeile unter dem Zeiger liegt – bei dreißig Messungen wären dreißig deutliche Knöpfe lauter als die Namen daneben. Der Platz ist trotzdem belegt: sonst rückte die Zeile beim Überfahren zusammen. Mit der Tastatur wird er beim Fokus sichtbar, und ohne Hover (Tablet) steht er dauerhaft blass da. */ .ms-item .ms-edit { flex: none; width: 24px; height: 24px; margin-top: -1px; font-size: 12px; opacity: 0; transition: opacity .12s; } .ms-item:hover .ms-edit, .ms-item .ms-edit:focus-visible { opacity: 1; } @media (hover: none) { .ms-item .ms-edit { opacity: 0.55; } } /* Der Papierkorb steht nur im Bearbeiten-Modus da – dann aber voll sichtbar: Wer „Bearbeiten“ gedrückt hat, sucht ihn und soll nicht erst über die Zeile fahren. */ .ms-item .ms-edit.ms-del { opacity: 1; } /* Kopfangaben im Benennen-Dialog. Abgesetzter Kasten, weil daran nichts zu ändern ist: er sagt, welche Messung gemeint ist, und steht damit vor den beiden Feldern. */ .ms-edit-meta { display: flex; flex-direction: column; gap: 6px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-inset); } /* ---------- Signalliste ---------- */ .sig-filter { padding: 8px 10px 0; flex: none; } .sig-table-wrap { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 6px 4px 4px; } /* Feste Spaltenbreiten: in der schmalen Auswahlspalte bestimmt sonst der längste Signalname die Tabellenbreite, und die Liste rollt waagerecht – mit dem Häkchen als erstem, was aus dem Bild läuft. */ .sig-table { width: 100%; border-collapse: collapse; table-layout: fixed; } .sig-table thead th { position: sticky; top: 0; z-index: 1; background: var(--panel); text-align: left; font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); padding: 0 6px 5px; } .sig-table tbody tr { cursor: pointer; border-top: 1px solid var(--line); } .sig-table tbody tr:hover { background: var(--panel-raised); } .sig-table tbody tr.sel { background: color-mix(in srgb, var(--accent) 8%, transparent); } /* Ein Signal ohne Zahlenwerte lässt sich nicht zeichnen – es steht da, aber blass. */ .sig-table tbody tr.textonly { opacity: 0.45; cursor: default; } .sig-table tbody tr.textonly:hover { background: transparent; } /* Die GPS-Position: steht mit in der Liste, ist aber nicht wählbar – sie hängt an jeder Zeile und ist in Tabelle und Export immer dabei. Abgesetzt, damit niemand nach dem fehlenden Häkchen sucht. */ .sig-table tbody tr.sig-gps { cursor: help; background: color-mix(in srgb, var(--info) 6%, transparent); } .sig-table tbody tr.sig-gps:hover { background: color-mix(in srgb, var(--info) 10%, transparent); } .sig-table tbody tr.sig-gps .sig-name { color: var(--text); font-weight: 600; } .sig-gps-ico { display: inline-block; width: 14px; text-align: center; color: var(--info); font-size: 13px; line-height: 1; } /* Positionsspalte der Rohtabelle: zwei Koordinaten nebeneinander, nie umbrechen. */ .ts-pos { white-space: nowrap; font-size: 11px; } .sig-table td { padding: 4px 6px; font-size: 11.5px; vertical-align: middle; } .sig-table .c-check { width: 24px; } .sig-table .c-check input { width: 14px; height: 14px; accent-color: var(--accent); } .sig-table .c-name { display: flex; align-items: center; gap: 6px; min-width: 0; } .sig-table .sig-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sig-table .c-unit { width: 58px; color: var(--text-dim); font-size: 10.5px; } /* Aus dem Namen abgeleitet statt vom Steuergerät gemeldet – siehe SignalUnits. */ .sig-table .c-unit.derived { font-style: italic; color: var(--text-faint); } .sig-table .c-count { width: 52px; text-align: right; color: var(--text-faint); font-size: 10.5px; } .sig-table .sig-dot { flex: none; width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--line-strong); background: transparent; } .sig-table .sig-color { flex: none; width: 14px; height: 14px; padding: 0; border: none; background: none; cursor: pointer; border-radius: 3px; } /* ---------- Fußzeile unter dem Diagramm ---------- */ .chart-foot { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; flex: none; } /* Bedienhinweis richtet sich nach dem Eingabegerät, nicht nach der Fensterbreite. */ .chart-hint, .chart-hint-touch { font-size: 10.5px; color: var(--text-dim); } .chart-hint-touch { display: none; } @media (pointer: coarse) { .chart-hint { display: none; } .chart-hint-touch { display: block; } .chart-hint-warn { display: block; } } /* ---------- Markierte Werte ---------- Der Block wächst mit der Zahl der Marken, nimmt dem Diagramm aber höchstens ein Drittel der Panelhöhe – die Kurve bleibt die Hauptsache. */ .mk-block { flex: none; max-height: 34%; display: flex; flex-direction: column; min-height: 0; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); } .mk-head { flex: none; margin-bottom: 7px; } .mk-wrap { flex: 1; min-height: 0; overflow: auto; } .mk-table .c-no { width: 28px; color: var(--text-dim); } .mk-table .c-del { width: 30px; text-align: right; } /* --- Art eines Signals in der Auswahlliste --------------------------------- Ein Signal, das kein Zahlenwert ist, ergibt keine Kurve, sondern ein Band unter dem Diagramm. Ohne diese Kennzeichnung sähe es wie ein wirkungsloses Häkchen aus. Die Angabe steht in der Einheitenspalte: ein Zustand hat keine Einheit, dort stand also ohnehin nur ein Gedankenstrich. */ .sig-table .sig-kind { display: inline-block; font-family: var(--font-mono); font-size: 9px; line-height: 1; padding: 2px 4px; border-radius: 3px; border: 1px solid var(--line-strong); color: var(--text-dim); white-space: nowrap; } .sig-table .sig-kind.sk-state { border-color: color-mix(in srgb, var(--ok) 60%, transparent); color: var(--ok); } .sig-table .sig-kind.sk-hex { border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--accent); } .sig-table .sig-kind.sk-text { border-color: var(--line-strong); color: var(--text-dim); } /* --- Löschen einer Messung ------------------------------------------------- */ .ms-item .ms-del { color: var(--fault); } .ms-item .ms-del:hover { background: var(--fault); color: #fff; } .del-lead { font-size: 12.5px; color: var(--text-dim); } .del-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 7px 9px; background: var(--panel-inset); } .del-item { display: flex; gap: 10px; align-items: baseline; font-size: 12px; min-width: 0; } .del-item .del-when { flex: none; font-size: 11px; color: var(--text); } .del-item .del-what { display: flex; gap: 8px; min-width: 0; align-items: baseline; overflow: hidden; } .del-item .del-what > span { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .del-warn { font-size: 12px; line-height: 1.5; color: var(--fault); border-left: 2px solid var(--fault); padding-left: 10px; } .del-sum { font-size: 11.5px; color: var(--text-dim); } .del-final { font-size: 14px; font-weight: 600; } .mk-table tr.mk-delta { background: var(--panel-inset); font-weight: 600; } .mk-table tr.mk-delta td { border-top: 1px solid var(--line-strong); } /* ---------- Legende unter der Karte ---------- Eine Linie trägt nur eine Farbe. Das einfärbende Signal steht mit Skala, alle weiteren gewählten Signale mit ihrer Spanne – abzulesen sind sie am Punkt selbst. */ .track-legend { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; flex: none; } .track-legend .tl-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; } .track-legend .tl-item .tl-name { color: var(--text); } .track-legend .tl-item .tl-range { color: var(--text-dim); font-size: 10.5px; } /* Das einfärbende Signal ist hervorgehoben: es ist das einzige, das die Karte selbst zeigt. */ .track-legend .tl-color .tl-name { color: var(--accent); font-weight: 600; } .track-legend .tl-sum { margin-left: auto; font-size: 10.5px; } @media (max-width: 1180px) { /* Unter dieser Breite bleibt für Auswahl und Diagramm nebeneinander zu wenig übrig. Die Auswahl wandert nach oben und bekommt eine feste Höhe; die Seite darf dann scrollen, weil sonst weder Auswahl noch Diagramm brauchbar hoch wären. */ .ts-page { height: auto; min-height: 0; } .ts-layout { grid-template-columns: 1fr; gap: 12px; } /* Übereinander gibt es nichts zu ziehen: die Breite ist die des Fensters, und die Panels stehen nebeneinander in fester Höhe. */ .ts-split { display: none; } .ts-side, .ts-layout > .ts-main { grid-column: auto; } .ts-side.ts-side-split { gap: 12px; } .ts-side-split > .ts-p-sessions { flex: 1 1 280px; } .ts-side { flex-direction: row; flex-wrap: wrap; height: 260px; } .ts-side > * { flex: 1 1 280px; height: 100%; } .ts-main { height: 560px; } /* Übereinander: ein eingeklapptes Panel ist nur sein Kopf, beide eingeklappt ist die Leiste eine Zeile über der Ansicht – mit waagrechter Schrift. */ .ts-side:has(> .ts-folded) { height: auto; min-height: 0; } .ts-side:has(> .ts-folded) > .panel:not(.ts-folded) { height: 260px; } .ts-side > .panel-fill.ts-folded { height: auto; align-self: flex-start; } .ts-layout.ts-rail-mode { grid-template-columns: 1fr; } .ts-rail-mode .ts-side { flex-direction: row; height: auto; } .ts-side > .ts-rail-tab { flex: 1 1 0; height: auto; flex-direction: row; justify-content: center; padding: 8px 12px; } .ts-rail-label { writing-mode: horizontal-tb; transform: none; } .ts-display { margin-left: 0; } } @media (max-width: 640px) { .ts-side { flex-direction: column; height: auto; } .ts-side > * { height: 240px; } .ts-side > .panel-fill.ts-folded { align-self: stretch; } .ts-f-dongle { min-width: 100%; } .ts-f-search, .ts-f-color { width: 100%; } } /* Bedienhinweis richtet sich nach dem Eingabegerät, nicht nach der Fensterbreite. */ .chart-hint, .chart-hint-touch { font-size: 11px; margin-top: 8px; } .chart-hint-touch { display: none; } @media (pointer: coarse) { .chart-hint { display: none; } .chart-hint-touch { display: block; } .chart-hint-warn { display: block; } } /* ---------- Theme-Selector ---------- */ /* ---------- Theme-Auswahl ---------- */ /* Drei Abschnitte statt eines Rasters: Bei vierzehn Themes ist "hell oder dunkel" die erste Entscheidung, und die trifft man an der Ueberschrift und nicht an vierzehn Karten. */ .ts-group { margin-top: 20px; } .ts-group:first-of-type { margin-top: 14px; } .ts-group-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--line); } .ts-group-hint { font-size: 11.5px; color: var(--text-dim); } /* ---- Der Schalter fuer den Hintergrund ---- */ /* Er steht ueber den Themes, weil er fuer alle vierzehn gilt. */ .ts-switch { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 13px 15px; margin-bottom: 4px; background: var(--panel-inset); border: 1px solid var(--line); border-radius: var(--radius-sm); } .ts-switch-text { min-width: 0; } .ts-switch-name { font-family: var(--font-ui); font-weight: 600; font-size: 13px; } .ts-switch-hint { font-size: 11.5px; line-height: 1.55; color: var(--text-dim); margin-top: 4px; } /* Ein Kippschalter und kein Kontrollkaestchen: Die Wahl wirkt sofort und hat kein "Speichern" - ein Kaestchen verspricht einen Formularschritt, den es nicht gibt. */ .ts-toggle { flex: none; width: 42px; height: 24px; padding: 0; cursor: pointer; background: var(--panel-raised); border: 1px solid var(--line-strong); border-radius: 12px; position: relative; transition: background .15s, border-color .15s; } .ts-toggle-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-faint); transition: transform .15s, background .15s; } .ts-toggle.on { background: var(--accent-soft); border-color: var(--accent); } .ts-toggle.on .ts-toggle-knob { transform: translateX(18px); background: var(--accent); } .ts-note { font-size: 11.5px; line-height: 1.55; color: var(--text-dim); padding: 9px 12px; margin-top: 8px; background: var(--panel-inset); border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: var(--radius-sm); } /* ---- Die Karten ---- */ /* Breiter als vorher (150 -> 176px): Die Vorschau ist jetzt ein Miniaturbildschirm mit Navigation und Panel, und darunter zerfaellt sie zu Streifen. */ .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; } .theme-card { padding: 0; overflow: hidden; cursor: pointer; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); color: inherit; font: inherit; transition: border-color .12s, transform .05s; } .theme-card:hover { border-color: var(--accent); } .theme-card:active { transform: scale(0.99); } .theme-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; } /* ---- Die Vorschau: ein Bildschirm im Kleinen ---- */ /* Vorher standen hier vier Farbbalken. Die zeigten die Farben, aber nicht, was sie tun: Man sah, dass ein Theme ein kraeftiges Blau enthaelt, nicht aber, ob das der Grund oder der Knopf ist. Dieselben Flaechen an ihrem Platz sagen es in einem Blick. */ .tc-shot { display: flex; height: 78px; } .tc-rail { flex: none; width: 34px; padding: 7px 5px; display: flex; flex-direction: column; gap: 5px; } .tc-rail > span { display: block; height: 4px; border-radius: 2px; opacity: 0.9; } .tc-rail > span:first-child { opacity: 1; } .tc-body { flex: 1; min-width: 0; padding: 8px; } .tc-panel { height: 100%; border-radius: 3px; padding: 7px; display: flex; flex-direction: column; gap: 5px; } .tc-line { display: block; height: 3px; border-radius: 2px; width: 100%; opacity: 0.85; } .tc-line.short { width: 62%; opacity: 1; } .tc-btn { display: block; height: 9px; width: 42%; border-radius: 3px; margin-top: auto; } .tc-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px 0; } .tc-name { font-family: var(--font-ui); font-weight: 600; font-size: 12.5px; } .tc-check { color: var(--accent); display: flex; flex: none; } /* Die Beschreibung auf eine Zeile: Zwei Zeilen bei einer und eine bei der naechsten Karte machten das Raster ungleich hoch, und ein ungleiches Raster liest sich als Unordnung. */ .tc-desc { padding: 2px 11px 10px; font-size: 10.5px; line-height: 1.45; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .theme-swatches { display: inline-flex; gap: 3px; } .theme-swatches .sw { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.12); } /* ---------- Fleets ---------- */ /* Bildschirmfüllendes Layout: Flotten links über die volle Höhe, rechts Karte oben und Fahrzeugtabelle darunter. Jedes Panel scrollt intern, die Seite selbst nicht. Höhe = Viewport − Topbar(58) − .content-Padding oben+unten(2×22) − .section-head inkl. Abstand(61) = 163px. Gemessen, nicht geschätzt: ein zu kleiner Abzug erzeugt genau den Seiten-Scroll, den dieses Layout vermeiden soll. min-height bewusst niedrig – bei 1366×768 bleiben nur ~509px übrig. */ .fleet-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: minmax(240px, 42%) minmax(0, 1fr); grid-template-areas: "fleets map" "fleets cars"; gap: 16px; height: calc(100vh - 163px); min-height: 420px; } .fleet-layout > .fleets-panel { grid-area: fleets; } .fleet-layout > .map-panel { grid-area: map; } .fleet-layout > .cars-panel { grid-area: cars; } /* Karte ausgeblendet: Zeile schrumpft auf den Panel-Kopf, Tabelle bekommt den Rest. */ .fleet-layout.map-off { grid-template-rows: auto minmax(0, 1fr); } /* Panel füllt seine Grid-Zelle und scrollt intern statt die Seite zu verlängern. */ .panel-fill { height: 100%; display: flex; flex-direction: column; min-height: 0; } .panel-fill > .panel-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } /* Liste scrollt, die Aktionsknöpfe darunter bleiben sichtbar. */ .fleets-panel .fleet-list { flex: 1; min-height: 0; overflow-y: auto; margin: -2px; padding: 2px; } /* Tabelle scrollt, die Kopfzeile bleibt dank position:sticky stehen. */ .cars-panel .table-wrap { flex: 1; min-height: 0; overflow: auto; } /* Karte randlos: Panel-Kopf (46px) + Body-Padding (32px) fressen sonst über ein Drittel der Kartenzeile. Der Panel-Rahmen fasst die Karte selbst ein. */ .map-panel > .panel-body { padding: 0; } .map-panel .map-wrap { flex: 1; min-height: 0; border: 0; border-radius: 0 0 var(--radius) var(--radius); } /* Schmale Fenster: gestapelt, feste Höhen, Seite darf scrollen. */ @media (max-width: 1100px) { .fleet-layout { grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: "fleets" "map" "cars"; height: auto; min-height: 0; } .fleet-layout > .fleets-panel { max-height: 320px; } .fleet-layout > .map-panel { height: 340px; } .fleet-layout > .cars-panel { height: 460px; } .fleet-layout.map-off > .map-panel { height: auto; } } /* ---------- Rollout: Flotte links, Fahrzeuge mit ihren Aufgaben rechts ---------- */ .ro-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; /* Wie .fleet-split: Kopfzeile, Reiterleiste und die Zeile mit den Schaltflaechen sind abgezogen. Das Rollout ist ein Reiter des Flottenbereichs und traegt dieselbe Umgebung ueber sich. */ height: calc(100vh - 248px); min-height: 400px; } .ro-layout > .panel-fill > .panel-body { overflow: hidden; } .ro-layout .fleet-list { flex: 1; min-height: 0; overflow-y: auto; margin: -2px; padding: 2px; } .ro-layout .table-wrap { flex: 1; min-height: 0; overflow: auto; } .ro-table td { vertical-align: top; } .ro-table tr.ro-marked > td { background: var(--accent-soft); } /* Eine Zuordnung: Typ, Name, und das ✕, das sie wieder wegnimmt. */ .ro-chips { display: flex; flex-wrap: wrap; gap: 5px; } .ro-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 4px 3px 8px; border: 1px solid var(--line-strong); border-radius: 20px; background: var(--panel-inset); font-size: 11.5px; } .ro-chip.oe { border-color: var(--accent); } .ro-chip-type { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); flex: none; } .ro-chip.oe .ro-chip-type { color: var(--accent); } .ro-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ro-chip-x { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 0; cursor: pointer; background: transparent; color: var(--text-faint); font-size: 11px; line-height: 1; } .ro-chip-x:hover { background: var(--fault); color: #fff; } /* Auswahl der Messaufgabe im Dialog */ .ro-picker { max-height: 42vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px; background: var(--panel-inset); } .ro-pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 7px 9px; cursor: pointer; text-align: left; color: var(--text); border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; } .ro-pick:hover { background: var(--panel-raised); border-color: var(--line); } .ro-pick.active { border-color: var(--accent); background: var(--accent-soft); } .ro-pick-name { font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; } /* ---------- Weiterleitungen ---------- */ /* Der UNC-Pfad ist lang und wird trotzdem ganz gebraucht – er darf umbrechen. */ .gw-target { font-size: 11.5px; word-break: break-all; } .gw-detail-row > td { background: var(--panel-inset); } .gw-depts { display: flex; flex-wrap: wrap; gap: 6px; } .gw-dept { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; cursor: pointer; border: 1px solid var(--line-strong); border-radius: 20px; background: var(--panel-inset); color: var(--text-dim); font-size: 12px; } .gw-dept:hover { border-color: var(--accent); color: var(--text); } .gw-dept.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } /* Abhängigkeiten eines Ziels im Löschdialog. Der Dialog muss zwei Dinge gleichzeitig leisten: zeigen, wie viel daran hängt, und zeigen, wo es hängt. Die Zahl links trägt das Gewicht, die Balken darunter die Verteilung – ein Bereich mit 69 Zuordnungen soll sich von einem mit 2 unterscheiden, bevor man die Zahlen liest. */ .gw-dep { display: flex; flex-direction: column; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-inset); } .gw-dep-head { display: flex; align-items: center; gap: 12px; min-width: 0; } .gw-dep-count { flex: none; min-width: 46px; padding: 0 8px; text-align: center; font-family: var(--font-mono); font-size: 21px; font-weight: 600; line-height: 1.15; color: var(--warn); } .gw-dep-scope { display: flex; flex-direction: column; gap: 5px; padding-left: 58px; } /* Was außerhalb des gewählten Bereichs liegt, steht in keiner Liste der Seite – hier ist es der einzige Ort, an dem es sichtbar wird, also bekommt es eine Kante. */ .gw-dep-scope.foreign { padding-left: 52px; margin-left: 0; border-left: 2px solid var(--warn); padding-top: 2px; padding-bottom: 2px; } .gw-dep-bar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; } .gw-dep-fill { height: 100%; border-radius: 3px; background: var(--accent); } .gw-dep-scope.foreign .gw-dep-fill { background: var(--warn); } .gw-dep-note { font-size: 11.5px; line-height: 1.5; color: var(--text-dim); padding-left: 58px; } .gw-dep .gw-dep-note:only-child { padding-left: 0; } .gw-dep-none { display: flex; align-items: center; gap: 10px; padding: 11px 13px; font-size: 12.5px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-inset); color: var(--text-dim); } .gw-dep-none > span:first-child { color: var(--ok); font-size: 15px; } .gw-dep-ack { align-items: flex-start; gap: 10px; line-height: 1.5; } .gw-dep-ack input { margin-top: 2px; flex: none; } /* Zweite Bestätigung: nur noch die drei Zahlen, die verschwinden. */ .gw-dep-sum { display: flex; gap: 8px; flex-wrap: wrap; } .gw-dep-sum > div { flex: 1 1 130px; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-inset); } .gw-dep-sum-n { font-family: var(--font-mono); font-size: 22px; font-weight: 600; color: var(--fault); } .gw-dep-sum-l { font-size: 11px; line-height: 1.4; color: var(--text-dim); } /* In der Tabelle: die Zuordnungen, die der gewählte Bereich nicht zählt. */ .gw-foreign-note { font-size: 10.5px; color: var(--warn); } /* Eine Zeile, die man nur ansehen darf. Bewusst Text und keine graue Schaltflaeche: Ein abgeblendeter Knopf sieht aus wie ein Fehler, der sich gleich behebt – das hier ist eine dauerhafte Auskunft, und der Grund steht im Tooltip. */ .gw-readonly { font-size: 11px; color: var(--text-dim); font-style: italic; cursor: help; padding-right: 4px; white-space: nowrap; } @media (max-width: 700px) { .gw-dep-scope, .gw-dep-note { padding-left: 0; } .gw-dep-scope.foreign { padding-left: 9px; } } @media (max-width: 1100px) { .ro-layout { grid-template-columns: 1fr; height: auto; min-height: 0; } .ro-layout > .panel-fill:first-child { max-height: 300px; } .ro-layout > .panel-fill:last-child { height: 560px; } } .fleet-list { display: flex; flex-direction: column; gap: 8px; } .fleet-item { display: flex; align-items: center; gap: 12px; padding: 12px 13px; cursor: pointer; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-raised); transition: border-color .12s, background .12s; } .fleet-item:hover { border-color: var(--line-strong); } .fleet-item.active { border-color: var(--accent); background: var(--accent-soft); } .fleet-item .fi-ic { width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--panel-inset); border: 1px solid var(--line); display: grid; place-items: center; color: var(--accent); flex: none; } .fleet-item .fi-body { min-width: 0; flex: 1; } .fleet-item .fi-name { font-family: var(--font-ui); font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fleet-item .fi-sub { font-size: 11.5px; color: var(--text-dim); } .fleet-item .fi-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); flex: none; } /* ===================================================================== Karte (Leaflet / OpenStreetMap) Leaflet bringt eigenes CSS mit – hier nur die Einbettung ins Design-System. ===================================================================== */ .map-wrap { position: relative; width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--panel-inset); /* Leaflet vergibt intern z-index bis 1000 (Controls) – ohne eigenen Stacking- Kontext konkurrieren die mit .overlay (100) und malen über Dialoge. isolate sperrt sie in die Karte ein, ohne Layout oder Darstellung zu verändern. */ isolation: isolate; } .diagx-map { width: 100%; height: 100%; background: var(--panel-inset); } /* Damit die Werkzeugleiste auf ihre eigene Breite reagieren kann (Beschriftung des Übersichtsknopfes fällt auf schmalen Karten weg) – nicht auf die des Fensters. */ .map-wrap { container-type: inline-size; } /* Leaflet setzt einen eigenen Font/Hintergrund – an die Tokens angleichen. */ .diagx-map.leaflet-container { font-family: var(--font-body); background: var(--panel-inset); } /* Dunkle Themes: OSM-Kacheln sind hell. Invertieren + Farbdrehung ergibt eine dunkle Karte, ohne einen zweiten Tile-Server zu benötigen. */ .diagx-map--dark .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.9) saturate(0.85); } /* Pins: DivIcon ohne eigenen Hintergrund. */ .diagx-pin { background: none; border: none; } .diagx-pin svg { display: block; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.35)); } .diagx-pin--ok svg { animation: pin-live 2.4s ease-in-out infinite; } @keyframes pin-live { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } /* Bedienelemente / Attribution in Panel-Optik. */ .diagx-map .leaflet-bar a { background: var(--panel); color: var(--text); border-bottom-color: var(--line); } .diagx-map .leaflet-bar a:hover { background: var(--panel-raised); color: var(--accent); } .diagx-map .leaflet-control-attribution { background: color-mix(in srgb, var(--panel) 88%, transparent); color: var(--text-faint); font-size: 10px; } .diagx-map .leaflet-control-attribution a { color: var(--text-dim); } /* Popup in Panel-Optik. */ .diagx-map .leaflet-popup-content-wrapper { background: var(--panel); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow); } .diagx-map .leaflet-popup-tip { background: var(--panel); border: 1px solid var(--line-strong); } .diagx-map .leaflet-popup-content { margin: 10px 12px; } .diagx-map .leaflet-popup-close-button { color: var(--text-faint); } .diagx-map .leaflet-popup-close-button:hover { color: var(--text); } .diagx-pop .dp-title { font-family: var(--font-ui); font-weight: 600; font-size: 13.5px; } .diagx-pop .dp-sub { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); margin-bottom: 6px; } .diagx-pop .dp-row { display: flex; justify-content: space-between; gap: 14px; font-size: 11.5px; padding: 2px 0; } .diagx-pop .dp-k { color: var(--text-faint); } .diagx-pop .dp-v { font-family: var(--font-mono); color: var(--text); text-align: right; } .diagx-pop .dp-act { margin-top: 9px; width: 100%; } /* Overlay, wenn keine Koordinaten vorliegen. */ .map-empty { position: absolute; inset: 0; z-index: 500; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: color-mix(in srgb, var(--panel-inset) 82%, transparent); color: var(--text-faint); font-size: 12.5px; } /* Über Leaflets Controls (800/1000) – bleiben durch isolation trotzdem in der Karte. */ .map-tools { position: absolute; right: 10px; top: 10px; z-index: 1001; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .map-tool { background: var(--panel); } .map-tool svg { width: 15px; height: 15px; flex: none; } /* Der Übersichtsknopf zoomt so weit heraus, dass alle Fahrzeuge im Bild sind. Als reines Icon zwischen Vollbild und Leaflets +/- war er nicht als das erkennbar; Akzentfarbe und Beschriftung machen ihn zur sichtbaren Standardaktion. Auf sehr schmalen Karten bleibt nur das Symbol übrig. */ .map-tool--fit { gap: 7px; padding: 0 11px; background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; box-shadow: 0 2px 10px rgba(0,0,0,.28); } .map-tool--fit:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); } .map-tool-label { font-size: 11.5px; letter-spacing: .01em; } @container (max-width: 300px) { .map-tool-label { display: none; } } /* Vollbild: die Inline-Höhe der Komponente (z.B. 420px oder 100%) muss weichen, sonst bliebe die Karte ein Streifen auf schwarzem Grund. Getrennte Regeln, weil ein unbekannter Selektor in einer Liste die ganze Regel verwerfen würde. */ .map-wrap:fullscreen { height: 100% !important; width: 100%; border: 0; border-radius: 0; } .map-wrap:-webkit-full-screen { height: 100% !important; width: 100%; border: 0; border-radius: 0; } /* Farbskala der eingefärbten Strecke (blau = niedrig, rot = hoch – wie in map.js). Die Legende selbst steht oben bei den Zeitreihen, sie trägt dort mehrere Signale. */ .track-scale { width: 140px; height: 8px; border-radius: 4px; border: 1px solid var(--line); background: linear-gradient(90deg, hsl(220,85%,55%), hsl(165,85%,55%), hsl(110,85%,55%), hsl(55,85%,55%), hsl(0,85%,55%)); } /* ---------- Live-Karte ---------- */ /* Gleiche Rechnung wie beim Fleets-Layout: Viewport minus Topbar(58), .content-Padding(2×22) und .section-head inkl. Abstand(61) = 163px. */ .livemap-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; height: calc(100vh - 163px); min-height: 420px; } .livemap-layout .live-list-panel .veh-list { flex: 1; min-height: 0; overflow-y: auto; } .livemap-layout .live-map-panel > .panel-body { padding: 0; } .livemap-layout .live-map-panel .map-wrap { flex: 1; min-height: 0; border: 0; border-radius: 0 0 var(--radius) var(--radius); } .live-veh { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--panel-raised); border: 1px solid transparent; cursor: pointer; transition: border-color .12s, background .12s; } .live-veh:hover { border-color: var(--line-strong); } .live-veh.active { border-color: var(--accent); background: var(--accent-soft); } .live-veh .vn { font-family: var(--font-ui); font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Der gerichtete Pfeil rotiert selbst – der Bounce des ok-Pins würde ihn verzerren. */ .diagx-pin--arrow svg { animation: none !important; } @media (max-width: 1100px) { .livemap-layout { grid-template-columns: 1fr; grid-template-rows: auto auto; height: auto; min-height: 0; } .livemap-layout .live-list-panel { max-height: 280px; } .livemap-layout .live-map-panel { height: 460px; } } /* ===================================================================== Live Measurements – frei gebaute Überwachungsflächen je Bereich Ein Grundsatz zieht sich durch: der Zustand steht in der Farbe, der Zahlenwert bleibt lesbar. Alarm rot, Warnung amber, ohne Daten grau – nie grün, wenn nichts ankommt. ===================================================================== */ /* ---------- Bearbeiten-Modus: Werkzeuge als Auflage im Panel ---------- Die Knöpfe lagen früher im Panelkopf. Bei 200 Pixel Panelbreite – und genau so schmal wird ein 3-Spalten-Panel neben der Messleiste – passen sieben Knöpfe dort nicht hinein und schoben sich über Titel und Nachbarpanel. Jetzt liegen sie als eigene Leisten über dem Panel: oben die Aktionen, unten Griff und Größe. */ /* (Titel und Kanal kürzen sich in jedem Widget, siehe .widget > .panel > .panel-head.) */ /* Nur die Live-Boards arbeiten mit Auflagen. Das Dashboard hat seine Knöpfe weiterhin im Panelkopf – dort würden Polsterung und Fußabstand nur Platz wegnehmen. */ .live-main .widget.editing .panel-head { padding-right: 96px; } .live-main .widget.editing .panel-body { padding-bottom: 38px; } .pe-tools, .pe-size { position: absolute; z-index: 4; display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 20px; background: color-mix(in srgb, var(--panel-raised) 92%, transparent); backdrop-filter: blur(6px); } .pe-tools { top: 7px; right: 8px; gap: 2px; padding: 3px; box-shadow: var(--shadow); } .pe-size { left: 8px; right: 8px; bottom: 7px; gap: 8px; padding: 2px 4px 2px 9px; } .pe-btn { width: 28px; height: 28px; flex: none; border: 0; border-radius: 50%; cursor: pointer; background: transparent; color: var(--text-dim); font-size: 12px; line-height: 1; display: grid; place-items: center; transition: background .14s, color .14s, box-shadow .14s; } .pe-btn svg { width: 16px; height: 16px; } .pe-btn:hover { background: var(--panel-inset); color: var(--accent); } .pe-btn.danger:hover { background: var(--fault); color: #fff; } /* Konfigurieren ist die zentrale Aktion des Bearbeiten-Modus und war als graues Glyph in der Werkzeugauflage kaum zu finden – wie auf dem Dashboard bekommt es ein echtes Icon und Akzentfarbe. */ .pe-btn-cfg { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); } .pe-btn-cfg:hover { color: var(--on-accent); background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent); } .pe-grip { color: var(--text-faint); cursor: grab; font-size: 12px; line-height: 1; } .pe-dim { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); margin-left: auto; } /* Schmale Panels: die Größenleiste zeigt nur noch den Griff. */ @media (max-width: 1500px) { .widget.editing .pe-dim { display: none; } } /* Die Werkzeugauflagen liegen über dem Panel und würden die Ziehgriffe an der rechten und unteren Kante überdecken – deshalb enden sie ein Stück vor dem Rand. */ .widget.editing .pe-tools { right: 14px; } .widget.editing .pe-size { left: 8px; right: 14px; bottom: 13px; } /* Während eines Zieh- oder Größenvorgangs treten die Auflagen zurück: sie gehören zum ruhenden Zustand und lenken sonst vom Zielbereich ab. */ .widget.dragging .pe-tools, .widget.dragging .pe-size, .widget.resizing .pe-tools, .widget.resizing .pe-size { opacity: 0; transition: opacity .12s; } /* ---------- Resultate: Tabellenansichten ---------- */ .res-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; } .res-col { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-inset); } .res-col.on { border-color: var(--accent); } .res-col-name { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Enge Zeilen: mehr Bundles je Bildschirm, gleiche Lesbarkeit. */ .res-table.res-compact td { padding-top: 3px; padding-bottom: 3px; } .res-table.res-compact .chip { height: 18px; padding: 0 6px; font-size: 10px; } /* ---------- Resultate: Auslöser (OnEvent) ---------- Die Art des Auslösers steht als Plakette, der Name des Triggers daneben. Beides in einer Zeile: die Spalte steht zwischen Messaufgabe und Flotte und darf die Zeilenhöhe der Tabelle nicht bestimmen. Reicht die Breite nicht, wird der Name gekürzt – die Plakette bleibt, weil sie die eigentliche Auskunft ist. */ .res-onevent { display: flex; align-items: center; gap: 6px; min-width: 0; } .res-onevent .chip { height: 20px; padding: 0 8px; font-size: 10.5px; gap: 4px; } .res-onevent-icon { font-family: var(--font-body); font-size: 11px; line-height: 1; opacity: .85; } /* Die Triggernamen sind frei vergeben und werden lang ("Start_diagscript_with_ left_button_on_rdongle"). Ungekürzt schöbe ein einziger davon die halbe Tabelle nach rechts – der volle Name steht im Tooltip der Zelle. */ .res-onevent-name { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); min-width: 0; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .res-table.res-compact .res-onevent .chip { height: 18px; font-size: 10px; } /* Im Detaildialog sitzt dieselbe Plakette in einem Feldrahmen – dort ohne Kürzung, der Dialog ist breit genug. */ .res-onevent-field { display: flex; align-items: center; gap: 8px; overflow: hidden; } .res-onevent-field .chip { flex: none; } .res-onevent-field .res-onevent-name { max-width: none; font-size: 12px; } /* ---------- Resultate: Position auf OpenStreetMap ---------- Die Spalte ist rechtsbündig, der Link richtet sich deshalb nach rechts aus. Er sieht im Ruhezustand aus wie der Text vorher – erst beim Zeigen tritt er als Link hervor; in einer Tabelle voller Zahlen wäre eine durchgehend blaue Spalte nur Unruhe. */ .res-geo { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; color: var(--text); text-decoration: none; font-size: 11px; white-space: nowrap; } .res-geo:hover { color: var(--accent); text-decoration: underline; } .res-geo-pin { font-size: 12px; line-height: 1; color: var(--accent); opacity: .75; } .res-geo:hover .res-geo-pin { opacity: 1; } /* Im Detaildialog steht die Koordinate links im Feld und der Kartenlink rechts davon. */ .res-geo-field { display: flex; align-items: center; gap: 8px; font-size: 13px; } .res-geo-field .res-geo { font-size: 12px; color: var(--accent); } .live-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; } .live-layout.runs-off { grid-template-columns: minmax(0, 1fr); } .live-main { min-width: 0; } .live-runs { position: sticky; top: 74px; } /* ---------- Panel-Grundgerüst ---------- */ .lp { display: flex; flex-direction: column; justify-content: space-between; height: 100%; gap: 8px; } .lp-value { display: flex; align-items: baseline; gap: 6px; min-width: 0; } /* Der Messwert war fest auf 2.1rem. In einem schmalen Panel lief er dadurch aus dem Rahmen – mit Einheit daneben und vierstelliger Zahl reicht die Breite nicht. cqw bezieht sich auf die Breite des Widgets (container: widget), die Grenzen halten ihn lesbar: nie kleiner als 1.15rem, nie größer als bisher. */ .lp-number { font-family: var(--font-mono); font-variant-numeric: tabular-nums; /* Alle drei Eckwerte tragen denselben Faktor: die Zahl skaliert weiter mit der Panelbreite, die Einstellung verschiebt nur das Fenster. Wuerde nur der Mittelwert skaliert, liefe die Groesse gegen die feste Obergrenze und die Einstellung haette ab einer bestimmten Panelbreite keine Wirkung mehr. */ font-size: clamp(calc(1.15rem * var(--lp-num-scale, 1)), calc(11cqw * var(--lp-num-scale, 1)), calc(2.1rem * var(--lp-num-scale, 1))); font-weight: 700; letter-spacing: -0.02em; line-height: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lp-number.sm { font-size: clamp(0.95rem, 6cqw, 1.25rem); } .lp-unit { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-dim); margin-left: 0.3em; } /* ---------- Lage des Messwerts ---------- Ohne Klasse steht die Zahl links oben – so sahen die Panels aus, bevor die Lage wählbar war. Die vier Ecken entstehen aus zwei Angaben: waagerecht über justify-content im Wertblock, senkrecht über die Reihenfolge der Flex-Kinder. Die Fußzeile (Zustand und Alter) wandert dabei mit ans andere Ende, statt zwischen Wert und Panelrand zu klemmen. */ .lp-pos-tr .lp-value, .lp-pos-br .lp-value { justify-content: flex-end; } /* Unten: Fuß nach oben, Wert nach unten. Beim Balken-Panel bleibt der Balken dazwischen – der Wert steht dann unter seiner eigenen Skala. */ .lp-pos-bl .lp-foot, .lp-pos-br .lp-foot { order: -1; } .lp-pos-bl .lp-value, .lp-pos-br .lp-value { order: 1; } /* Mittig: der Wertblock nimmt den freien Platz und richtet sich darin in beiden Achsen mittig aus. Als Grid und nicht als Flexbox, weil place-content auch senkrecht zentriert; align-items: baseline hält die Einheit dabei auf der Grundlinie der Zahl. */ .lp-pos-c .lp-value { flex: 1; min-height: 0; display: grid; grid-auto-flow: column; place-content: center; align-items: baseline; } .lp-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; } .lp-badge { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 7px; border-radius: 20px; border: 1px solid currentColor; flex: none; } /* Fußzeile: das Abzeichen behält seine Breite, der Text daneben wird gekürzt. Sonst schiebt „5 min · vor 12 s" neben „in Ordnung" die Zeile aus dem schmalen Panel. */ .lp-age, .lp-limits { font-size: 10.5px; color: var(--text-faint); font-family: var(--font-mono); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Zustandsfarben: eine Regel, alle Paneltypen. */ .lp-ok .lp-number { color: var(--text); } .lp-ok .lp-badge { color: var(--ok); } .lp-warn .lp-number { color: var(--warn); } .lp-alarm .lp-number { color: var(--fault); } .lp-unknown .lp-number, .lp-unknown .lp-badge { color: var(--text-faint); } /* Das Abzeichen war nur umrandet und in derselben Farbe wie die Zahl daneben – bei einem Alarm zwei blasse rote Elemente. Gefüllt ist es ein Etikett und keine Nuance. */ .lp-warn .lp-badge { background: var(--warn); border-color: var(--warn); color: #14100a; font-weight: 700; } .lp-alarm .lp-badge { background: var(--fault); border-color: var(--fault); color: #fff; font-weight: 700; } /* Solange der Grenzwert verletzt ist, schlägt das Etikett. Nicht der ganze Panelinhalt: die frühere Regel blendete ihn im Sekundentakt auf 72 % ab und machte damit ausgerechnet den Messwert schlechter lesbar, um den es geht. */ .lp-alarm .lp-badge { animation: lp-badge-beat 1.1s ease-in-out infinite; } .lp-warn .lp-badge { animation: lp-badge-beat 2s ease-in-out infinite; } @keyframes lp-badge-beat { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 currentColor; } 50% { transform: scale(1.06); box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 28%, transparent); } } /* Tabellen- und Fehlerspeicherzeilen: ein farbiger Balken links statt eines Farbtons, der bei zwölf Zeilen untereinander verschwimmt. */ .lp-row.lp-warn { border-left: 3px solid var(--warn); padding-left: 7px; } .lp-row.lp-alarm { border-left: 3px solid var(--fault); padding-left: 7px; } .lp-row.lp-alarm .lp-row-dot { animation: lp-dot-beat 1.1s ease-in-out infinite; } @keyframes lp-dot-beat { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } /* ---------- Ordner (Gruppen) auf dem Live-Board ---------- Der Kopf nimmt eine eigene Rasterzeile über die volle Breite. Er ist Beschriftung, Bilanz und Ablagefläche in einem: ein Panel darauf fallen zu lassen steckt es in diese Gruppe. Ohne ihn unterscheiden sich zwölf gleich aussehende Kacheln nur durch die RIN in ihrer Kopfzeile. */ .bg-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 7px 12px; margin-top: 4px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--panel-raised) 70%, transparent); transition: background .15s, border-color .15s, box-shadow .15s; } /* Der erste Kopf braucht keinen Abstand nach oben – darüber steht schon die Seite. */ .dash-grid > .bg-head:first-child { margin-top: 0; } .bg-head.loose { border-left-color: var(--line-strong); opacity: .8; } .bg-toggle { width: 22px; height: 22px; flex: none; border: 0; border-radius: 4px; cursor: pointer; background: transparent; color: var(--text-dim); display: grid; place-items: center; transition: background .12s, color .12s, transform .18s; } .bg-toggle svg { width: 15px; height: 15px; } .bg-toggle:hover { background: var(--panel-inset); color: var(--accent); } /* Zugeklappt zeigt der Pfeil nach rechts – dieselbe Sprache wie in einem Dateibaum. */ .bg-head.collapsed .bg-toggle { transform: rotate(-90deg); } .bg-name { font-family: var(--font-ui); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .bg-dongle { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); padding: 1px 7px; border-radius: 20px; background: var(--panel-inset); flex: none; } .bg-count { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); flex: none; } /* Bilanz der Gruppe. Sie steht auch am zugeklappten Ordner – gerade dann ist sie die einzige Auskunft darüber, ob darin etwas nicht stimmt. */ .bg-chip { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border-radius: 20px; flex: none; color: #fff; } .bg-chip.alarm { background: var(--fault); animation: chip-beat 1.1s ease-in-out infinite; } .bg-chip.warn { background: var(--warn); color: #14100a; } .bg-tools { margin-left: auto; display: flex; align-items: center; gap: 2px; flex: none; } /* Ohne Werkzeuge schiebt die Zählung selbst nach rechts, damit der Kopf ausbalanciert bleibt statt links zusammenzukleben. */ .bg-head:not(:has(.bg-tools)) .bg-count { margin-left: auto; } /* Ablagefläche beim Ziehen – dieselbe Sprache wie der Zielrahmen am Panel. */ .dash-grid.is-dragging .bg-head { border-style: dashed; border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); } .bg-head.drop-into { border-color: var(--accent); border-style: solid; background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); } /* ---------- Enge Panels ---------- Zwei Rasterzeilen sind 198 Pixel; davon nimmt die Kopfzeile mit Kanal-Mikrolabel allein 64. Was dann noch für Messwert und Fußzeile bleibt, reicht nicht – der Inhalt wurde abgeschnitten oder bekam eine Bildlaufleiste. In engen Panels tritt deshalb alles Beiwerk zurück, damit der Messwert selbst vollständig bleibt. */ .widget.dense-y > .panel > .panel-head { padding: 7px 12px; } .widget.dense-y > .panel > .panel-body { padding: 9px 12px; } .widget.dense-y > .panel > .panel-head h3 { font-size: 12.5px; } .widget.dense-y .lp { gap: 4px; } /* Das Kanal-Mikrolabel kostet 18 Pixel Kopfhöhe. In einem flachen und zugleich schmalen Panel ist das der Unterschied zwischen passend und abgeschnitten – der Titel nennt die Sache ohnehin. */ .widget.dense-y.dense-x > .panel > .panel-head .eyebrow { display: none; } /* Fußzeile: das Zustandsabzeichen bleibt, die Nebenangaben (Alter, Grenzen, Skala) weichen. Sie sind erklärend, das Abzeichen ist die Aussage. */ .widget.dense-y .lp-age, .widget.dense-y .lp-limits { display: none; } .widget.dense-x .lp-limits { display: none; } /* Verlauf und Tabelle: kleinere Zeilen, damit mehr davon sichtbar bleibt. */ .widget.dense-y .lp-row { padding: 4px 8px; font-size: 11.5px; } .widget.dense-y .lp-chart { gap: 3px; } /* Die Meldezeile deckt in einem flachen Panel viel ab – dort nur eine Zeile. */ .widget.dense-y .lp-alarmbar { padding: 5px 8px; gap: 7px; } .widget.dense-y .lp-alarmbar .lab-sub { display: none; } .widget.dense-y .lp-alarmbar .lab-ack { height: 22px; padding: 0 8px; font-size: 11px; } /* Letzte Rettung: was trotz allem nicht passt, wird scrollbar statt abgeschnitten. Das gilt schon durch .widget > .panel > .panel-body – hier nur die Bildlaufleiste schmal halten, damit sie in einer 200-Pixel-Kachel nicht die halbe Breite frisst. */ .widget > .panel > .panel-body { scrollbar-width: thin; } /* ---------- Alarm am Panel: Rahmen, Meldezeile, Quittierung ---------- Der Grenzwertvergleich färbte bisher nur den Messwert im Panelinneren. Auf einem Board mit zwölf Kacheln fällt eine rote Zahl unter elf grauen nicht auf – der Alarm muss den ganzen Rahmen ergreifen, damit er aus dem Augenwinkel wirkt. */ .widget.alarmed { border-radius: var(--radius); } .widget.alarmed::after { content: ''; position: absolute; inset: -3px; pointer-events: none; z-index: 6; border-radius: var(--radius); border: 2px solid transparent; } .widget.alarmed-warn::after { border-color: var(--warn); } .widget.alarmed-alarm::after { border-color: var(--fault); } /* Offen: der Rahmen pulsiert und wirft einen Schein nach außen. */ .widget.alarmed-live.alarmed-alarm::after { animation: wa-alarm 1.1s ease-in-out infinite; } .widget.alarmed-live.alarmed-warn::after { animation: wa-warn 2s ease-in-out infinite; } @keyframes wa-alarm { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fault) 55%, transparent), inset 0 0 20px color-mix(in srgb, var(--fault) 16%, transparent); border-color: var(--fault); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--fault) 0%, transparent), inset 0 0 34px color-mix(in srgb, var(--fault) 30%, transparent); border-color: color-mix(in srgb, var(--fault) 65%, transparent); } } @keyframes wa-warn { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warn) 45%, transparent), inset 0 0 16px color-mix(in srgb, var(--warn) 12%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--warn) 0%, transparent), inset 0 0 26px color-mix(in srgb, var(--warn) 22%, transparent); } } /* Quittiert: der Rahmen bleibt und bleibt farbig, aber er hört auf zu rufen. Der Zustand ist weiterhin ablesbar – nur eben ohne Bewegung. */ .widget.alarmed-ack::after { opacity: .5; border-style: dashed; animation: none; } /* Meldezeile mit der Quittierung. Sie legt sich über den Panelkopf, weil jeder Paneltyp sein Inneres selbst gestaltet und keine Stelle dafür freilässt. */ /* Die Meldezeile stand als Auflage ueber dem ganzen Panel (position:absolute, top:0) und verdeckte damit Kanalzeile und Titel - also gerade die Angabe, welches Signal betroffen ist, und das ausgerechnet im Alarmfall. Jetzt steht sie im Fluss zwischen Kopf und Inhalt (Banner-Bereich der Panel- Komponente). Den Platz nimmt sie dem Inhalt, und der darf rollen; verdeckt wird nichts mehr. flex:none, damit sie in der Spalte des Panels ihre Hoehe behaelt und nicht selbst zusammengedrueckt wird. */ .lp-alarmbar { flex: none; display: flex; align-items: center; gap: 9px; padding: 7px 10px; color: #fff; font-size: 12px; animation: lp-bar-in .22s ease-out; } /* Kein Hochschieben mehr: im Fluss wuerde ein translateY(-100%) die Zeile durch den Panelkopf wandern lassen. Ein kurzes Aufblenden reicht - dass sie ueberhaupt erscheint, ist auffaellig genug. */ @keyframes lp-bar-in { from { opacity: 0; } to { opacity: 1; } } .lp-alarmbar-alarm { background: var(--fault); } .lp-alarmbar-warn { background: var(--warn); color: #14100a; } .lp-alarmbar.acked { opacity: .82; } .lp-alarmbar .lab-icon { display: grid; place-items: center; flex: none; } .lp-alarmbar .lab-icon svg { width: 17px; height: 17px; display: block; } .lp-alarmbar.live .lab-icon { animation: lab-icon-beat 1.1s ease-in-out infinite; } @keyframes lab-icon-beat { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: .6; } } .lp-alarmbar .lab-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; } .lp-alarmbar .lab-head { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lp-alarmbar .lab-sub { font-family: var(--font-mono); font-size: 10px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lp-alarmbar .lab-ack { flex: none; height: 26px; padding: 0 11px; cursor: pointer; border-radius: 20px; border: 1px solid currentColor; background: rgba(255,255,255,0.16); color: inherit; font-family: var(--font-ui); font-size: 11.5px; font-weight: 700; transition: background .14s, transform .05s; } .lp-alarmbar .lab-ack:hover { background: rgba(255,255,255,0.32); } .lp-alarmbar .lab-ack:active { transform: translateY(1px); } .lp-alarmbar .lab-acked { flex: none; font-size: 11px; font-weight: 700; opacity: .9; } /* Die Meldezeile legt sich über den Panelkopf, statt ihn nach unten zu schieben. Ein padding-top von 44px hätte jedem Panel im Alarmfall 44 Pixel Inhaltshöhe genommen – bei einem Panel von einer Rasterzeile (92px) bleibt dafür nichts übrig. Verdeckt wird nur das Kanal-Mikrolabel; den Paneltitel trägt die Meldezeile selbst. */ /* Kopfzeilen-Chips und Sammelquittung. */ .chip.chip-alarm { border-color: var(--fault); color: var(--fault); } .chip.chip-warn { border-color: var(--warn); color: var(--warn); } .chip.beating { animation: chip-beat 1.1s ease-in-out infinite; } @keyframes chip-beat { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 50%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 0%, transparent); } } .btn-ack-all { background: var(--fault); border-color: var(--fault); color: #fff; font-weight: 600; } .btn-ack-all:hover { background: color-mix(in srgb, var(--fault) 84%, #000); border-color: color-mix(in srgb, var(--fault) 84%, #000); } /* Wer Bewegung abbestellt hat, bekommt Farbe und Rahmen – aber keine Animation. Der Alarm bleibt dadurch vollständig erkennbar. */ @media (prefers-reduced-motion: reduce) { .lp-alarm .lp-badge, .lp-warn .lp-badge, .lp-row.lp-alarm .lp-row-dot, .widget.alarmed::after, .lp-alarmbar, .lp-alarmbar.live .lab-icon, .chip.beating { animation: none; } .widget.alarmed-live.alarmed-alarm::after { box-shadow: 0 0 0 4px color-mix(in srgb, var(--fault) 30%, transparent); } .widget.alarmed-live.alarmed-warn::after { box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 30%, transparent); } } /* ---------- Verlauf ---------- */ .lp-chart { gap: 6px; } .lp-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .lp-chart-body { flex: 1; min-height: 0; } .live-trend { border-radius: var(--radius-sm); } /* ---------- Rundinstrument ---------- */ .lp-gauge { align-items: center; } .lp-gauge .lp-foot { width: 100%; } /* ---------- Balken ---------- */ .lp-bar { position: relative; height: 14px; border-radius: 7px; overflow: hidden; background: var(--panel-inset); border: 1px solid var(--line); } .lp-bar-zone { position: absolute; top: 0; bottom: 0; } .lp-bar-zone.warn { background: var(--warn); opacity: 0.18; } .lp-bar-zone.alarm { background: var(--fault); opacity: 0.2; } .lp-bar-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 7px; transition: width .3s ease-out, background .3s; } /* ---------- Ampel ---------- */ .lp-state { flex-direction: row; align-items: center; gap: 12px; justify-content: flex-start; } .lp-lamp { width: 34px; height: 34px; border-radius: 50%; flex: none; border: 2px solid var(--line-strong); background: var(--panel-inset); } .lp-ok .lp-lamp { border-color: var(--ok); background: var(--ok); box-shadow: 0 0 16px -2px var(--ok); } .lp-warn .lp-lamp { border-color: var(--warn); background: var(--warn); box-shadow: 0 0 16px -2px var(--warn); } .lp-alarm .lp-lamp { border-color: var(--fault); background: var(--fault); box-shadow: 0 0 18px -2px var(--fault); } .lp-state-label { font-family: var(--font-ui); font-size: 14px; font-weight: 600; } /* ---------- Signaltabelle ---------- */ .lp-table { display: flex; flex-direction: column; gap: 3px; height: 100%; overflow-y: auto; } /* Die Wertspalte muss mitschrumpfen dürfen: die Zeilen der negativen Antworten tragen dort Bedeutung, Dienst und Steuergerät. Mit einem festen "auto" wuchs die Spalte über die Panelbreite hinaus und schob die Zeitangabe aus der Zeile. */ .lp-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) minmax(0, auto) auto; align-items: center; gap: 9px; padding: 5px 8px; border-radius: var(--radius-sm); background: var(--panel-inset); } .lp-row-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); } .lp-row.lp-ok .lp-row-dot { background: var(--ok); } .lp-row.lp-warn .lp-row-dot { background: var(--warn); } .lp-row.lp-alarm .lp-row-dot { background: var(--fault); } .lp-row-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lp-row-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lp-row.lp-warn .lp-row-value { color: var(--warn); } .lp-row.lp-alarm .lp-row-value { color: var(--fault); } .lp-row-limit { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); white-space: nowrap; } .lp-note { height: 100%; overflow: auto; white-space: pre-wrap; font-size: 13px; color: var(--text-dim); } /* ---------- Katalog und Konfiguration ---------- */ /* Kompakte Zeilen statt hoher Kacheln: das Vorschaubild ueber die volle Breite wurde rund 145 Pixel hoch, und schon vier Eintraege fuellten den Dialog. Bild links in fester Groesse, Text rechts - damit passen alle elf Paneltypen ohne Rollen ins Bild, und darum geht es bei einer Auswahl. */ .lp-catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 6px; } .lp-cat { display: flex; flex-direction: row; align-items: center; gap: 9px; padding: 7px 9px; cursor: pointer; text-align: left; min-width: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel-inset); color: var(--text-dim); transition: border-color .15s, color .15s; } .lp-cat:hover { border-color: var(--accent); color: var(--text); } /* Das Vorschaubild sitzt auf der Flaeche, die ein Panel spaeter auch hat - dunkler Grund, gleicher Radius. Ohne diesen Rahmen schwebten die Formen im Nichts und man erkennt nicht, dass es eine Kachel darstellt. Feste Breite: waechst sie mit der Spalte, wird das Bild in einem breiten Dialog wieder gross und die Zeile hoch. */ .lp-cat-prev { flex: none; width: 68px; display: block; border-radius: 3px; background: var(--panel); border: 1px solid var(--line); padding: 3px 4px; } .lp-cat .pp { display: block; width: 100%; height: auto; color: var(--accent); } .lp-cat-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .lp-cat-name { font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Der Hinweis auf eine Zeile begrenzt - er ist die Nebenangabe, und ungleich hohe Zeilen machen aus dem Raster ein Treppenmuster. Vollstaendig steht er im Tooltip. */ .lp-cat-note { font-size: 10px; color: var(--text-faint); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lp-series { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px; display: flex; flex-direction: column; gap: 8px; } /* Die RIN unter der Fahrzeugauswahl: sie wird gebraucht, wenn etwas nicht stimmt, und soll bis dahin nicht mit dem Fahrzeugnamen um Aufmerksamkeit streiten. Leer bleibt die Zeile ohne Höhe – sonst springt der Dialog beim ersten Auswählen. */ .lp-rin { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); } .lp-rin:empty { display: none; } /* Vorlagenauswahl. Zwei Spalten ab 620 Pixel: sechs Kacheln untereinander zwingen zum Rollen, und dann liegt die zuletzt gelesene Vorlage außerhalb des Bildes, während man die erste bewertet. */ /* auto-fit statt fester Umbruchbreite: die Kacheln entscheiden selbst, ob zwei nebeneinander passen. Eine Medienabfrage auf die Fensterbreite war hier ohnehin die falsche Groesse - massgeblich ist die Breite des Dialogs, nicht die des Bildschirms. */ .lp-tpls { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 8px; } .lp-tpl { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; cursor: pointer; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel-inset); transition: border-color .15s, background .15s; /* Ohne das schiebt die Kachel den Dialog auf. Ein Grid-Item darf von sich aus nicht schmaler werden als sein Min-Content - und die Signalzeile darin stand auf nowrap, ihre Min-Content-Breite war also der ganze Text. Beide Spalten zusammen waren damit breiter als der Dialog, und nichts konnte nachgeben. */ min-width: 0; } .lp-tpl > input[type=radio] { flex: none; margin-top: 2px; } .lp-tpl:hover { border-color: var(--accent); } .lp-tpl.active { border-color: var(--accent); background: var(--accent-soft); } .lp-tpl-icon { font-size: 17px; width: 22px; text-align: center; flex: none; color: var(--accent); line-height: 1.35; } .lp-tpl-head { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; min-width: 0; } .lp-tpl-name { font-family: var(--font-ui); font-size: 13px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lp-tpl-count { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); flex: none; } .lp-tpl-note { font-size: 11.5px; color: var(--text-dim); line-height: 1.4; } /* Die Signalnamen umbrechen jetzt, statt abgeschnitten zu werden. Einzeilig gekuerzt war der laengste Fall schon nach dem zweiten Namen zu Ende und damit wertlos; zwei Zeilen zeigen ihn ganz, und der Deckel haelt die Kacheln trotzdem gleich hoch. overflow-wrap: anywhere ist noetig, weil ein einzelner Signalname laenger sein kann als die Spalte und sonst selbst wieder ueberstuende. */ .lp-tpl-sig { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); line-height: 1.45; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- Messläufe ---------- */ .lr { display: flex; flex-direction: column; gap: 12px; } .lr-start { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; } .lr-runs { display: flex; flex-direction: column; gap: 8px; } .lr-run { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-inset); padding: 9px 10px; display: flex; flex-direction: column; gap: 6px; } .lr-run.active { border-color: var(--accent); } .lr-run-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .lr-run-name { font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lr-run-state { flex: none; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 7px; border-radius: 20px; border: 1px solid currentColor; } .lr-run-state.ok { color: var(--accent); } .lr-run-state.warn { color: var(--warn); } .lr-run-state.alarm { color: var(--fault); } .lr-run-state.done { color: var(--ok); } .lr-run-meta, .lr-run-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--text-dim); } .lr-run-meta span { font-family: var(--font-mono); } .lr-bar { position: relative; height: 8px; border-radius: 4px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; } .lr-bar-fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--accent); border-radius: 4px; transition: width .9s linear; } .lr-bar.over .lr-bar-fill { background: var(--warn); } /* Ohne erwartete Laufzeit gibt es keinen Anteil – der Streifen zeigt nur „aktiv". */ .lr-bar-fill.indeterminate { width: 35%; animation: lr-sweep 1.8s ease-in-out infinite; transition: none; } @keyframes lr-sweep { 0% { left: -35%; } 100% { left: 100%; } } @media (prefers-reduced-motion: reduce) { .lr-bar-fill.indeterminate { animation: none; left: 0; } } .lr-flow { font-size: 10.5px; font-family: var(--font-mono); } .lr-flow.on { color: var(--ok); } .lr-flow.off { color: var(--text-faint); } .lr-age { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); } @media (max-width: 1200px) { .live-layout { grid-template-columns: minmax(0, 1fr); } .live-runs { position: static; } } /* ---------- Hub-Analyse: Mitschnitt ---------- */ /* Zwei Spalten: links der schmale Strom-Wähler, rechts das Paket. Die Liste bekommt ein festes Maß, weil sie sonst mit jedem hinzukommenden Fahrzeugnamen anders breit wäre und der JSON-Block daneben bei jedem Takt springt. */ .hm { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 14px; align-items: start; } @media (max-width: 900px) { .hm { grid-template-columns: 1fr; } } .hm-list .panel-body { display: flex; flex-direction: column; gap: 4px; max-height: 70vh; overflow: auto; } .hm-dongle { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; cursor: pointer; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: inherit; font: inherit; transition: background .12s, border-color .12s; } .hm-dongle:hover { background: var(--panel-inset); } .hm-dongle.active { border-color: var(--accent); background: var(--accent-soft); } /* Der Punkt ist die eigentliche Aussage der Zeile: sendet das Gerät gerade oder nicht. Er pulsiert nur im laufenden Fall – ein Blinken für Stille wäre ein Alarm, und Stille ist hier oft der Normalzustand. */ .hm-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .hm-dot.live { background: var(--ok); animation: hm-pulse 1.6s ease-in-out infinite; } .hm-dot.silent { background: var(--text-faint); } @keyframes hm-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ok) 0%, transparent); } } /* Feste Spalten in der Zeile. Vorher waren Name und Zahlen zwei flex-Kinder ohne Mass: sobald aus "9 s" ein "12 s" wurde, wanderte die Zahlenspalte, und mit ihr der abgeschnittene Fahrzeugname daneben - die ganze Liste zuckte im Sekundentakt. */ .hm-dongle { display: grid; grid-template-columns: 8px minmax(0, 1fr) 56px; } .hm-ident { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .hm-nums { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; } .hm-car { font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Die CAR-ID führt die Zeile an: Unter ihr wird das Fahrzeug in der Fahrzeugverwaltung geführt, und mit ihr wird ein auffälliger Strom weitergemeldet. Die Nummer steht in Ziffern gleicher Breite, damit die Liste beim Aktualisieren nicht atmet. */ .hm-carid { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Die Beschriftung gehört zur Nummer, trägt aber nicht die Aussage - sie steht deshalb klein und gesperrt davor, wie die Spaltenköpfe im übrigen Portal. */ .hm-cap { font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); font-weight: 500; margin-right: 6px; } .hm-vin { font-family: var(--font-ui); font-size: 11px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hm-rin { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Ziffern gleicher Breite: sonst ist "1.0/s" schmaler als "0.8/s" und die Spalte atmet bei jeder Aktualisierung. */ .hm-rate, .hm-age { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; } .hm-rate { font-size: 11px; color: var(--accent); } .hm-age { font-size: 10px; color: var(--text-faint); } .hm-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--text-dim); } .hm-meta b { font-weight: 500; color: var(--text-faint); margin-right: 5px; } .hm-meta .mono { color: var(--text); } .hm-warn .mono, .hm-warn b { color: var(--warn); } .hm-hint { font-size: 11.5px; color: var(--text-dim); margin-bottom: 10px; line-height: 1.45; } /* Der Rohtext bleibt unumbrochen: JSON lebt von der Einrückung, und ein Umbruch mitten in einer langen Response-Hexkette macht sie unlesbar. Deshalb rollt der Block waagerecht statt umzubrechen. */ .hm-json { margin: 0; padding: 12px 14px; max-height: 58vh; overflow: auto; background: var(--panel-inset); border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 11.5px; line-height: 1.55; color: var(--text); white-space: pre; tab-size: 2; } .hm-signals { font-size: 12px; } .hm-signals td { padding: 6px 12px; } /* Zahlen rechtsbuendig und gleich breit: nur so kann man eine Spalte ueberfliegen, statt jede Zeile einzeln zu lesen. */ .hm-signals .hm-val { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Gliederung wie im JSON. Die beiden Ebenen unterscheiden sich in Farbe und Einzug, nicht in der Schriftgroesse - ein Block ist keine Ueberschrift, sondern der Name eines Knotens, und der steht im selben Mass wie sein Inhalt. */ .hm-signals .hm-grp > td { padding: 9px 12px 5px; background: var(--panel-raised); border-bottom: 1px solid var(--line-strong); } .hm-signals .hm-grp-name { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: var(--accent); } .hm-signals .hm-grp-note { font-size: 10.5px; color: var(--text-faint); margin-left: 8px; } .hm-signals .hm-sub > td { padding: 6px 12px 4px 26px; background: var(--panel-inset); } .hm-signals .hm-sub-name { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--text); } /* Der Einzug macht die Zugehoerigkeit sichtbar, ohne dass die Zeile eine Klammer oder ein Baumzeichen braucht. */ .hm-signals .hm-sig { padding-left: 26px; } .hm-signals .hm-sig-deep { padding-left: 40px; } /* Ein Block soll nicht mitten im Seitenumbruch der Rollflaeche haengen. */ .hm-signals tbody + tbody .hm-grp > td { border-top: 1px solid var(--line); } .hm-frames { display: flex; flex-direction: column; gap: 2px; max-height: 52vh; overflow: auto; } .hm-frame { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; width: 100%; text-align: left; cursor: pointer; padding: 6px 10px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-dim); font-family: var(--font-mono); font-size: 11px; } .hm-frame:hover { background: var(--panel-inset); color: var(--text); } .hm-frame.active { border-color: var(--accent); background: var(--accent-soft); color: var(--text); } .hm-frame-time { color: var(--text); } .hm-frame-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hm-frame-size, .hm-frame-seq { color: var(--text-faint); } .hm-pinned { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 7px 10px; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent-soft); font-size: 11.5px; color: var(--text-dim); } /* ---------- Kopfzeile Live Measurements ---------- */ /* Die Werkzeugleiste soll einzeilig bleiben. Sie steht über jedem Board, und bricht sie mitten in den Knöpfen um, verschiebt schon ein hinzukommender Alarm-Chip das ganze Raster nach unten – man verliert die Kachel, auf die man gerade sieht. Der Platz wird deshalb in dieser Reihenfolge geholt: 1. der Boardtitel schrumpft (Auslassungspunkte, voller Name im Tooltip), 2. die Board-Auswahl schrumpft bis 110 Pixel, 3. die Leiste rutscht als geschlossener Block unter den Titel, 4. erst auf schmalen Geräten bricht sie selbst um. */ .section-head.lm-head { flex-wrap: wrap; row-gap: 10px; } .lm-head > .lm-title { flex: 1 1 auto; min-width: 0; } .lm-head .lm-title h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Umbrechen statt abschneiden. Vorher stand hier nowrap zusammen mit min-width:0 – eine Kombination, bei der die Leiste beliebig schmal werden darf, ihre Kinder aber nicht mitschrumpfen: Was nicht mehr passte, lief nach rechts aus dem Bild und war weg. Der Bearbeiten-Knopf, letzter in der Reihe, traf es zuerst. Ohne min-width zählt die Leiste ihre eigene Mindestbreite, und .lm-head (flex-wrap) setzt sie eine Zeile tiefer, bevor es eng wird. Reicht auch das nicht, bricht sie in sich um – rechtsbündig, damit die Knöpfe an der Kante bleiben, an der man sie sucht. */ .lm-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; margin-left: auto; } /* Knöpfe und Chips tragen Text – schrumpfen dürfen sie nicht, sonst werden sie abgeschnitten statt umzubrechen. */ .lm-bar > * { flex: none; } /* Auswahl und Stern in einer Fassung: eine gemeinsame Kante, ein gemeinsamer Block. */ .lm-pick { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; } .lm-pick.with-star .lm-boards { border-top-right-radius: 0; border-bottom-right-radius: 0; } .lm-pick .btn-star { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; /* die beiden Rahmen teilen sich einen Strich */ } .lm-bar .lm-boards { flex: 0 1 230px; min-width: 130px; height: 30px; } /* Der Strich zwischen Auskunft und Bedienung. Kein Abstand allein: sechs Pixel mehr Luft liest sich als Zufall, ein Strich als Grenze. */ .lm-sep { flex: none; width: 1px; height: 18px; background: var(--line-strong); margin: 0 3px; } /* Ein Zeichen vor der Beschriftung, überall gleich groß und gleich weit weg – vorher steckte das Pluszeichen mal im übersetzten Text („＋ Ordner"), mal in einer eigenen Hülle, und die Knöpfe standen entsprechend unterschiedlich weit ein. */ .btn .btn-ico { flex: none; width: 1.15em; height: 1.15em; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1em; line-height: 1; } /* Ein Schalter, der an ist. Nur Rahmen und ein Hauch Fläche, die Schrift bleibt normal: „eingeschaltet" ist ein Nebensatz. Die kräftigen Farben in dieser Leiste gehören dem Speichern (gefüllt), den offenen Meldungen (rot) und dem Startboard (gold) – ein vierter lauter Ton machte alle vier leiser. */ .lm-bar .btn.is-on { border-color: var(--accent); background: var(--accent-soft); } /* ---------- Startboard-Stern ---------- */ /* Zwei Zustände an einem Knopf, und beide müssen ohne Tooltip lesbar sein: nicht markiert ist ein leerer Stern in der gedämpften Schriftfarbe, markiert ein gefüllter in der Warnfarbe – in jedem der Themes der goldene Ton, und der einzige Ort in dieser Leiste, an dem er vorkommt. Die Beschriftung wechselt beim Klicken nicht mit („Als Startboard“ / „Startboard“): der Knopf säße sonst bei jedem Umschalten an einer anderen Stelle, und die halbe Leiste rutschte mit. Den Zustand tragen Füllung und Farbe. Kein btn-primary und kein btn-add: in dieser Leiste gehören die gefüllten Knöpfe dem Speichern und dem Hinzufügen. Der Stern ist eine Markierung, kein Auftrag. */ .btn.btn-star .btn-ico { color: var(--text-dim); } .btn.btn-star:hover .btn-ico { color: var(--warn); } .btn.btn-star.on { border-color: var(--warn); color: var(--warn); background: var(--panel-raised); } .btn.btn-star.on .btn-ico { color: var(--warn); } /* Während geschrieben wird, bleibt der Knopf stehen und wird nur blass – ein verschwindender Stern sähe aus, als hätte der Klick etwas gelöscht. */ .btn.btn-star:disabled { opacity: .55; cursor: default; } /* Auf schmalen Geräten darf auch die Auswahl auf eine eigene Zeile: nebeneinander blieben von Board-Name und Stern zusammen keine lesbaren 130 Pixel übrig. */ @media (max-width: 720px) { .lm-pick { flex: 1 1 100%; } .lm-pick .lm-boards { flex: 1 1 auto; } } /* ---------- Vollbild der Boardfläche ---------- Dieselben Panels, nur als Auflage über dem Fenster – wie beim Diagramm (.ts-fs) und mit demselben z-index: Dialoge (100), Slideover (90) und Meldungen (200) liegen darüber und bleiben bedienbar. Für das Telefon gebaut. Dort kosten Navigationsleiste, Topbar, Seitenkopf und Adressleiste zusammen rund 40 Prozent der Höhe – bei vier Kacheln auf einem 6-Zoll- Schirm ist das der Unterschied zwischen zwei sichtbaren Werten und allen vier. 100dvh und nicht 100vh: die Einheit vh rechnet auf mobilen Browsern mit ausgefahrener Adressleiste, und das Board stünde um deren Höhe zu tief im Bild. */ .lm-stage { outline: none; } .lm-stage.lm-fs { position: fixed; inset: 0; z-index: 60; height: 100dvh; overflow: auto; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--bg); /* Auf iOS gibt es kein echtes Vollbild – die Statusleiste bleibt stehen und würde sonst die erste Kachelreihe anschneiden. */ padding-top: calc(10px + env(safe-area-inset-top)); } /* Die Kopfzeile der Auflage: schmal, aber sie trägt alles, was im Vollbild sonst verdeckt wäre – Board, Verbindung, offene Meldungen und der Weg zurück. Sie bleibt beim Rollen stehen; auf einem langen Board wäre sie sonst nach der zweiten Kachel fort, und mit ihr die einzige Auskunft darüber, ob die Zahlen noch aktuell sind. */ .lm-fsbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 2px 10px; background: var(--bg); } .lm-fsname { font-family: var(--font-ui); font-weight: 600; font-size: 14px; color: var(--text); min-width: 0; max-width: 45vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lm-fsconn { font-size: 11.5px; color: var(--fault); } .lm-fsgap { flex: 1 1 auto; } /* ---------- Boardfläche auf kleinen Geräten ---------- Das Raster hat zwölf Spalten, und ein Panel steht auf der Zelle, auf die es gelegt wurde. Auf 390 Pixel Gerätebreite ist eine Spalte 24 Pixel breit – diese Anordnung lässt sich auf einem Telefon nicht zeigen. Unterhalb von 820 Pixeln fällt das Raster deshalb auf zwei Spalten zusammen, und die Panels werden der Reihe nach gesetzt. Zwei und nicht eine: Ein Messwertpanel trägt eine Zahl, ein Abzeichen und sonst nichts – über die volle Telefonbreite gezogen ist es ein Band mit einer Handbreit Luft daneben, und auf den Schirm passen drei davon. Nebeneinander passen sechs, und ein Board mit zwölf Kacheln ist damit in zwei Blicken gelesen statt in vier. Welche Kachel sich die halbe Breite nimmt und welche die ganze bekommt, entscheidet die Seite (MobileSpanClass in LiveMeasurements.razor) und schreibt es als .m-half oder .m-full ans Element: Wer ein Panel auf höchstens sechs der zwölf Spalten gelegt hat, hat es als halbe Breite gemeint. Tabellen, Karten, Heatmap und die Messungssteuerung bekommen unabhängig davon die ganze Zeile – von ihren Spalten bliebe in 180 Pixeln nichts übrig. Die Rasterplätze der Panels stehen als Inline-Stil am Element – nur !important kommt dagegen an. Die Reihenfolge übernimmt das Dokument, und die stimmt: Layout() gibt die Panels eines Abschnitts nach Zeile und Spalte sortiert aus. Die Höhe kommt aus derselben Zahl wie am großen Schirm (--gh, die Rasterzeilen des Panels), nur mit kleinerem Zeilenmaß und gedeckelt: ein Panel über sechs Zeilen füllt sonst den ganzen Schirm, und man rollt an einem einzigen Wert entlang. Die halbe Kachel ist flacher als die ganze – sie zeigt weniger, also braucht sie weniger. */ @media (max-width: 820px) { .dash-grid.lm-grid { /* Die Marke, an der js/dashgrid.js erkennt, dass das 12-Spalten-Raster gerade nicht gilt (dasselbe Signal wie beim Dashboard). Ohne sie rechnete eine Zieh- oder Kantengeste hier weiter in zwölf Spalten und schriebe das Ergebnis in die gespeicherte Anordnung – das Board des großen Schirms wäre zerlegt, ohne dass jemand es dort angefasst hätte. */ --stacked: 1; /* Das Zeilenmaß der beiden Kachelbreiten. Als Variable, damit die Abfrage für ganz schmale Geräte weiter unten nur zwei Zahlen zu ändern hat. */ --m-row: 46px; --m-row-full: 56px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 8px; } /* Volle Zeile: der Grundfall und alles ohne Klasse. */ .dash-grid.lm-grid > .widget { grid-column: 1 / -1 !important; grid-row: auto !important; min-height: clamp(110px, calc(var(--gh, 2) * var(--m-row-full)), 52dvh); } /* Die halbe Kachel – zwei davon nebeneinander. „auto“ und nicht „1 / -1“, damit sie sich die Spalte nimmt, die gerade frei ist; eine volle Kachel dazwischen fängt dadurch von selbst wieder links an. */ .dash-grid.lm-grid > .widget.m-half { grid-column: auto / span 1 !important; min-height: clamp(94px, calc(var(--gh, 2) * var(--m-row)), 38dvh); } /* Der Ordnerkopf geht immer über beide Spalten – er ist die Überschrift für das, was darunter steht. */ .dash-grid.lm-grid > .bg-head { grid-column: 1 / -1 !important; grid-row: auto !important; padding: 5px 9px; gap: 7px; margin-top: 2px; } .dash-grid.lm-grid > .bg-head .bg-name { font-size: 12px; } .dash-grid.lm-grid > .bg-head .bg-dongle, .dash-grid.lm-grid > .bg-head .bg-count { font-size: 9.5px; } .dash-grid.lm-grid > .bg-head .bg-toggle { width: 20px; height: 20px; } /* Die Ablagefläche des Bearbeiten-Modus ergibt gestapelt keinen Sinn – auf dem Telefon wird nicht per Zeiger angeordnet. */ .dash-grid.lm-grid > .dash-pad { display: none; } /* Das Rasterbild des Bearbeiten-Modus zeigte zwölf Spalten, die es nicht mehr gibt. */ .dash-grid.lm-grid.is-editing { background-image: none; } /* Verschieben und Kanten ziehen sind durch --stacked abgeschaltet – also weg mit den Griffen, die sonst etwas versprechen, was nicht passiert. Hinzufügen, Einstellen und Entfernen bleiben. */ .dash-grid.lm-grid .w-resize { display: none; } .dash-grid.lm-grid .pe-grip { display: none; } .dash-grid.lm-grid .widget.editing { cursor: default; } /* ---- Die kompakte Kachel ---- Alles, was am großen Schirm Luft ist, kostet hier eine Zeile Inhalt. Die Maße gelten für beide Breiten gleich: zwei verschieden große Messwerte nebeneinander liest man als Fehler, und nebeneinander stehen sie jetzt. Die Selektoren tragen .dash-grid mit, damit sie gegen die Regeln für enge Panels (.widget.dense-y) gewinnen, ohne sich auf die Reihenfolge im Stylesheet zu verlassen. */ .dash-grid.lm-grid > .widget > .panel > .panel-head { padding: 6px 9px; gap: 6px; } .dash-grid.lm-grid > .widget > .panel > .panel-body { padding: 8px 9px; } .dash-grid.lm-grid > .widget > .panel > .panel-head h3 { font-size: 12px; } .dash-grid.lm-grid > .widget .panel-title { gap: 1px; } .dash-grid.lm-grid > .widget .eyebrow { font-size: 8.5px; letter-spacing: 0.1em; } .dash-grid.lm-grid > .widget .led.led-xs { gap: 4px; font-size: 9px; } /* Die Eck-Ticks sitzen 6 Pixel vom Rand. Bei 9 Pixeln Polsterung liegen sie im Text statt in der Ecke – auf einer Kachel dieser Größe sind sie Zierrat, der Platz kostet. */ .dash-grid.lm-grid > .widget > .panel::before, .dash-grid.lm-grid > .widget > .panel::after { display: none; } /* Der Messwert. cqw bezieht sich auf die Kachelbreite (container: widget), deshalb schrumpft die Zahl in der halben Spalte von allein mit – nachzuziehen ist nur die Untergrenze: 1,15rem waren in 180 Pixeln mit vierstelliger Zahl und Einheit daneben zu breit. Der Faktor aus der Paneleinstellung (--lp-num-scale) bleibt an allen drei Eckwerten, sonst liefe die Einstellung gegen die feste Obergrenze. */ .dash-grid.lm-grid > .widget .lp-number { font-size: clamp(calc(0.9rem * var(--lp-num-scale, 1)), calc(12cqw * var(--lp-num-scale, 1)), calc(1.65rem * var(--lp-num-scale, 1))); } .dash-grid.lm-grid > .widget .lp-unit { font-size: 0.64rem; } .dash-grid.lm-grid > .widget .lp { gap: 4px; } .dash-grid.lm-grid > .widget .lp-badge { font-size: 8px; padding: 1px 5px; } .dash-grid.lm-grid > .widget .lp-age, .dash-grid.lm-grid > .widget .lp-limits { font-size: 9.5px; } /* Auf der halben Kachel steht neben dem Zustandsabzeichen kein zweiter Text mehr: „12,4 … 14,8 V“ neben „in Ordnung“ ergibt in 180 Pixeln zwei abgeschnittene Angaben statt einer lesbaren. Das Alter bleibt – es beantwortet, ob die Zahl überhaupt noch gilt. */ .dash-grid.lm-grid > .widget.m-half .lp-limits { display: none; } /* Zeilen und Listen: kleineres Maß, damit mehr davon ins Bild passt. */ .dash-grid.lm-grid > .widget .lp-table { gap: 2px; } .dash-grid.lm-grid > .widget .lp-row { padding: 3px 7px; gap: 6px; } .dash-grid.lm-grid > .widget .lp-row-name { font-size: 11px; } .dash-grid.lm-grid > .widget .lp-row-value { font-size: 11.5px; } .dash-grid.lm-grid > .widget .lp-row-limit { font-size: 9px; } /* Ampel, Balken, Zellen und Häufigkeiten. */ .dash-grid.lm-grid > .widget .lp-lamp { width: 24px; height: 24px; } .dash-grid.lm-grid > .widget .lp-state { gap: 9px; } .dash-grid.lm-grid > .widget .lp-state-label { font-size: 12px; } .dash-grid.lm-grid > .widget .lp-bar { height: 11px; } .dash-grid.lm-grid > .widget .lph { gap: 5px; } .dash-grid.lm-grid > .widget .lph-cell { font-size: 9px; min-height: 15px; } .dash-grid.lm-grid > .widget .lph-i { font-size: 7px; } .dash-grid.lm-grid > .widget .lph-stats, .dash-grid.lm-grid > .widget .lph-end, .dash-grid.lm-grid > .widget .lph-unit { font-size: 9px; } .dash-grid.lm-grid > .widget .vb-row { grid-template-columns: minmax(44px, 26%) 1fr auto auto; gap: 6px; } .dash-grid.lm-grid > .widget .vb-label { font-size: 10px; } .dash-grid.lm-grid > .widget .vb-track { height: 10px; } .dash-grid.lm-grid > .widget .vb-count { font-size: 10px; min-width: 32px; } .dash-grid.lm-grid > .widget .vb-share { font-size: 9px; min-width: 32px; } /* Ort, Fahrzeug und Notiz. */ .dash-grid.lm-grid > .widget .lp-gps-value { font-size: 12px; } .dash-grid.lm-grid > .widget .lp-gps-sub { font-size: 10px; } /* Das Fahrzeugbild deckelt sein eingestelltes Maß. Getrennt nach Lage, weil die drei Aufbauten verschiedene Maße führen: oben die Höhe, daneben die Breite, und beim füllenden Bild gibt die Rasterzeile die Höhe vor – dort darf hier nichts stehen, sonst wäre aus dem füllenden Bild wieder ein festes. */ .dash-grid.lm-grid > .widget .lp-veh:not(.lp-veh-fill):not(.lp-veh-side):not(.lp-veh-noimg) .lp-veh-shot { height: min(var(--veh-img, 120px), 92px); } .dash-grid.lm-grid > .widget .lp-veh.lp-veh-side .lp-veh-shot { width: min(var(--veh-img, 120px), 92px); } .dash-grid.lm-grid > .widget .lp-veh-led-text b { font-size: 11px; } .dash-grid.lm-grid > .widget .lp-note-text { font-size: 11.5px; } /* Die Meldezeile deckt auf einer Kachel dieser Größe viel ab – auf der halben bleiben Symbol, Kopfzeile und der Knopf zum Quittieren. */ .dash-grid.lm-grid > .widget .lp-alarmbar { padding: 4px 7px; gap: 6px; } .dash-grid.lm-grid > .widget .lp-alarmbar .lab-head { font-size: 11px; } .dash-grid.lm-grid > .widget .lp-alarmbar .lab-ack { height: 22px; padding: 0 8px; font-size: 11px; } .dash-grid.lm-grid > .widget.m-half .lp-alarmbar .lab-sub { display: none; } /* Vollbild ist auf dem Telefon der Grund, warum diese Leiste angefasst wird – er steht deshalb vorn und nicht hinter fünf anderen Knöpfen. */ .lm-bar .btn-fs { order: -1; } /* Der Seitenkopf nimmt sonst zwei Zeilen für Augenbraue und Titel. */ .lm-head .eyebrow { display: none; } .lm-head .lm-title h1 { font-size: 17px !important; } .lm-fsbar { gap: 6px; } .lm-fsname { max-width: 40vw; font-size: 13px; } } /* Ganz schmale Geräte: die Kacheln dürfen flacher werden und rücken enger zusammen, sonst passt selbst im Vollbild nur eine Reihe ins Bild. */ @media (max-width: 430px) { .dash-grid.lm-grid { --m-row: 40px; --m-row-full: 48px; gap: 7px; } .lm-stage.lm-fs { padding-left: 8px; padding-right: 8px; } } /* ============================================================================ Instrumente, Heatmap und Häufigkeiten ============================================================================ */ /* ---------- Rundinstrument und Zeigerinstrument ---------- */ /* Beide Instrumente teilen sich Schriftgrößen und Töne: sie stehen auf demselben Board oft nebeneinander, und zwei verschieden große Messwerte in gleich großen Kacheln liest man als Fehler. Die Fassung des Zeigers ist dieselbe wie die des Bogens (.gauge-wrap weiter oben): mittig, an die Panelhöhe gebunden, damit das SVG in einer flachen Kachel nicht unten herausläuft. */ .ndl-wrap { display: grid; place-items: center; height: 100%; min-height: 0; overflow: hidden; } .ndl-wrap > svg { max-height: 100%; } .ndl { width: 100%; max-width: 210px; height: auto; } .gauge-readout, .ndl-readout { font-family: var(--font-ui); font-size: 19px; font-weight: 700; fill: var(--text); } .gauge-unit, .ndl-unit { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.12em; fill: var(--text-dim); } /* Skalenanfang und -ende am Rundinstrument, Teilstrichzahlen am Zeigerinstrument. Bewusst klein: sie sind Bezugsgröße, nicht Messwert – wer sie so groß setzt wie den Wert, hat drei gleich wichtige Zahlen im Bild und liest keine davon. */ .gauge-end, .ndl-tick { font-family: var(--font-mono); font-size: 6.5px; fill: var(--text-faint); } /* Der Zeiger wandert, statt zu springen – wie der Wertbogen (.gauge-value). Die Feder ist bewusst leicht überschwingend: ein Zeiger, der linear anfährt und abrupt stehenbleibt, sieht aus wie ein Standbild, das weitergeschaltet wurde. */ .ndl-hand { transition: transform .5s cubic-bezier(.34,1.32,.44,1); } .ndl-hand.off { opacity: .28; } @media (prefers-reduced-motion: reduce) { .ndl-hand { transition: none; } } /* ---------- Heatmap ---------- */ .lp-heat { display: flex; flex-direction: column; min-height: 0; } .lph { display: flex; flex-direction: column; gap: 7px; min-height: 0; flex: 1; } /* Die Felder füllen die Höhe gleichmäßig aus: eine Heatmap, die oben klebt und unten Luft lässt, sieht nach halb geladen aus. */ .lph-grid { display: grid; gap: 3px; flex: 1; min-height: 0; align-content: stretch; } .lph-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 3px; min-height: 18px; min-width: 0; font-family: var(--font-mono); font-size: 10px; line-height: 1.1; overflow: hidden; position: relative; } .lph-v { font-weight: 600; } .lph-i { font-size: 8px; opacity: .7; } /* Warnung und Alarm bekommen einen Rahmen und keine andere Füllung: die Füllung trägt schon den Messwert. Zwei Aussagen in einem Kanal wären eine zu viel – so sagt die Fläche „wie warm" und der Rahmen „zu warm". */ .lph-cell.warn { box-shadow: inset 0 0 0 1.5px var(--warn); } .lph-cell.alarm { box-shadow: inset 0 0 0 2px var(--fault); } .lph-legend { display: flex; align-items: center; gap: 6px; flex: none; } .lph-ramp { flex: 1; height: 6px; border-radius: 3px; min-width: 40px; } .lph-end, .lph-unit { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-dim); white-space: nowrap; } .lph-unit { color: var(--text-faint); } /* Derselbe Streifen als Vorschau im Konfigurationsdialog, unter der Auswahlliste. */ .lph-ramp-pick { height: 8px; margin-top: 2px; } .lph-stats { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: none; font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); } .lph-stats b { color: var(--text-faint); font-weight: 500; margin-right: 3px; } /* Die Spanne ist bei Zellen die Kennzahl, wegen der man hinsieht. */ .lph-stats .lph-delta { color: var(--text); } .lph-stats .lph-count { margin-left: auto; color: var(--text-faint); } /* ---------- Häufigkeiten ---------- */ .lp-dist { display: flex; flex-direction: column; min-height: 0; } .vb { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; } .vb-rows { display: flex; flex-direction: column; gap: 4px; overflow: auto; flex: 1; min-height: 0; } /* Feste Spalten: Beschriftung, Balken, Zahl, Anteil. Ohne sie wandern die Zahlen mit der Länge der Beschriftung, und untereinander lässt sich nichts vergleichen. */ .vb-row { display: grid; grid-template-columns: minmax(56px, 22%) 1fr auto auto; align-items: center; gap: 8px; } .vb-label { font-size: 11px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vb-track { height: 12px; border-radius: 6px; background: var(--panel-raised); overflow: hidden; } .vb-fill { display: block; height: 100%; border-radius: 6px; transition: width .35s ease-out; } .vb-count { font-family: var(--font-mono); font-size: 11px; color: var(--text); min-width: 44px; text-align: right; } .vb-share { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); min-width: 44px; text-align: right; } /* Der Sammelbalken ist keine Ausprägung, sondern eine Auskunft über die Grenze. */ .vb-row.other .vb-label { color: var(--text-faint); font-style: italic; } .vb-foot { display: flex; align-items: center; gap: 10px; flex: none; flex-wrap: wrap; font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); } .vb-foot .vb-over { margin-left: auto; color: var(--warn); } @media (prefers-reduced-motion: reduce) { .vb-fill { transition: none; } } /* ---------- Verbindungslage Fahrzeug (online / offline) ---------- */ /* Die kleine Variante der Geräte-LED. In der Kanalzeile eines Panels steht schon Text in 10 px – eine LED in Normalgröße daneben zöge die Zeile auseinander. */ .led.led-xs { gap: 5px; font-size: 9.5px; } .led.led-xs .dot { width: 6px; height: 6px; } /* Die Kanalzeile trägt jetzt Lampe und Text nebeneinander. */ .eyebrow-row { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .eyebrow-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Die Lampe darf nicht mitschrumpfen, wenn der Kanalname zu lang wird - sie ist der Teil der Zeile, der auch bei 200 Pixel Panelbreite noch lesbar bleiben muss. */ .eyebrow-row > .led, .lm-panel-link > .led { flex: none; } .lm-panel-link { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .lm-link-age { color: var(--fault); text-transform: none; letter-spacing: 0; } /* Nur der stille Zustand wird am Rahmen markiert. Wären auch die laufenden Panels eingefärbt, hätte man auf einem gesunden Board zwölf farbige Rahmen und sähe den einen stummen darunter nicht mehr. Gedimmt statt rot umrandet: Rot gehört auf diesem Board den Grenzwertalarmen, und ein Fahrzeug, das nicht sendet, ist kein Messwert außerhalb seines Bereichs. */ .panel.lm-offline { opacity: 0.62; } .panel.lm-offline .lp-number { color: var(--text-dim); } .panel.lm-nohub { border-color: var(--warn); } .lr-link { display: inline-flex; align-items: center; gap: 7px; height: 30px; font-size: 11.5px; color: var(--text-dim); white-space: nowrap; } /* Die Lampe im Gruppenkopf sitzt im vorhandenen Chip. */ .bg-dongle { display: inline-flex; align-items: center; gap: 6px; } /* ---------- Panel-Dialog: feste Raster statt umbrechender Reihen ---------- */ /* Vorher lagen die Felder in .row mit flex-wrap. Sobald ein Feld eine Zeile mehr brauchte - eine Verbindungsmeldung unter der Fahrzeugauswahl, ein laengerer Hinweis - wuchs es, und alles dahinter rutschte in die naechste Zeile. Beim Durchprobieren der Fahrzeuge sprang so der halbe Dialog. Ein Raster haelt jede Spalte an ihrem Platz, unabhaengig davon, was in der Nachbarzelle steht. */ .lp-grid { display: grid; gap: 12px; align-items: start; } .lp-grid > .field { min-width: 0; } .lp-grid-2 { grid-template-columns: 1fr 1fr; } .lp-grid-4 { grid-template-columns: repeat(4, 1fr); } .lp-grid-5 { grid-template-columns: repeat(5, 1fr); } .lp-grid-run { grid-template-columns: 2fr 1fr; } /* Signal trägt den laengsten Text, Stellen den kuerzesten. */ .lp-grid-signal { grid-template-columns: 2.4fr 0.8fr 0.7fr 1fr; } .lp-grid-series { grid-template-columns: 2fr 1.6fr 0.8fr 0.7fr auto; } /* Unter 640 px (schmales Fenster, geteilter Bildschirm) darf gestapelt werden - dort ist ein Raster mit fuenf Spalten unlesbar. */ @media (max-width: 640px) { .lp-grid-2, .lp-grid-run { grid-template-columns: 1fr; } .lp-grid-4, .lp-grid-5, .lp-grid-signal { grid-template-columns: 1fr 1fr; } .lp-grid-series { grid-template-columns: 1fr 1fr; } } /* Die Statuszeile unter einer Auswahl. Feste Hoehe und kein Umbruch: ihre Hoehe darf nicht davon abhaengen, ob gerade "online" oder "offline - zuletzt vor 12 min" darin steht. Sie wird immer gerendert, auch leer. */ .lp-link { display: flex; align-items: center; gap: 6px; height: 15px; min-width: 0; overflow: hidden; font-size: 10.5px; color: var(--text-faint); } .lp-link-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Kästchen in einer Rasterzelle: gleiche Hoehe wie ein Eingabefeld, damit die Zeile eine gemeinsame Grundlinie behaelt. */ .lp-check { display: inline-flex; align-items: center; gap: 8px; height: 38px; white-space: nowrap; } /* Ein deaktiviertes Auswahlfeld muss als solches erkennbar sein - sonst haelt man die leere Signalliste fuer einen Fehler statt fuer "erst ein Fahrzeug waehlen". */ .select:disabled { opacity: .5; cursor: not-allowed; } /* ---------- JSON-Einfaerbung im Mitschnitt ---------- */ /* Vier Farben reichen: Schluessel, Zeichenkette, Zahl, Literal. Mehr Kategorien unterscheidet man beim Ueberfliegen ohnehin nicht mehr auseinander. */ .hm-json .j-key { color: var(--accent); } .hm-json .j-str { color: var(--ok); } .hm-json .j-num { color: var(--warn); font-variant-numeric: tabular-nums; } .hm-json .j-lit { color: var(--text-dim); font-style: italic; } /* Fussnote innerhalb einer Gruppe: erklaert, was im Rohtext steht, aber absichtlich kein Signal ist. Zurueckgenommen, damit sie nicht wie eine Messzeile aussieht. */ .hm-signals .hm-note > td { padding: 6px 12px 8px 26px; font-size: 10.5px; line-height: 1.5; color: var(--text-faint); border-bottom: 1px solid var(--line); } .hm-signals .hm-note b { font-family: var(--font-mono); font-weight: 500; color: var(--text-dim); } /* ---------- Firmenlogo, themeabhaengig (BrandLogo) ---------- */ /* Zwei Dateien, eine sichtbar. Voreingestellt die weisse Fassung: Das Standardtheme ist dunkel, und :root ohne data-theme ist ebenfalls dunkel - so ist der erste Bildaufbau richtig, noch bevor ein Theme gesetzt wurde. Praefix blogo- und nicht brand-logo-: Letzteres gehoert der Nav-Rail (.brand .brand-logo), und eine Klasse, die an zwei Stellen etwas anderes bedeutet, ist beim naechsten Umbau der Fehler. Kein filter: invert(1) auf einem einzigen Logo: Invertiert wuerde aus dem blauen Zeichen ein orangefarbenes, und das Zeichen ist Teil der Marke. */ .blogo { display: inline-flex; align-items: center; } .blogo img { width: auto; display: block; } .blogo-light { display: none; } :root[data-theme="rosi-light"] .blogo-dark, :root[data-theme="paper"] .blogo-dark, :root[data-theme="nordic"] .blogo-dark, :root[data-theme="solar"] .blogo-dark { display: none; } :root[data-theme="rosi-light"] .blogo-light, :root[data-theme="paper"] .blogo-light, :root[data-theme="nordic"] .blogo-light, :root[data-theme="solar"] .blogo-light { display: block; } /* ---------- Panel: Fahrzeug / Pruefstand ---------- */ /* Die Kachel beantwortet die Frage vor jeder Messung: Welches Fahrzeug ist das, und lebt es? Der Aufbau folgt der Reihenfolge des Zweifels - Bild, Lampen, Bewegung, Kennungen. Wer nur ueberfliegt, hat nach dem Bild und den Lampen schon, was er braucht. Zwei Ebenen statt einer: aussen Bild und Rumpf, innen die drei Bloecke des Rumpfs. Nur so laesst sich das Bild per Einstellung daneben stellen - in einem einzigen Grid mit vier Zeilen muesste dafuer jede Zeile ihre Spalte neu zugewiesen bekommen. --veh-img ist das eingestellte Bildmass. Es steht am Element und wird hier je Lage als Hoehe oder als Breite gelesen; welche der beiden gemeint ist, weiss das Stylesheet und nicht das Bauteil. */ .lp-veh { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 9px; height: 100%; min-height: 0; } /* Vollflaechig - die Vorgabe: Das Bild nimmt die Zeile, die uebrig bleibt, die Statuszeilen darunter nur, was sie brauchen. Umgekehrt zu allen anderen Lagen, und genau das ist der Zweck: Mit festem Bildmass blieb unter drei Statuszeilen ein Streifen Schwarz stehen, und der sah nach einem Ladefehler aus. Eine Mindesthoehe fuer das Bild, weil der Rumpf wachsen kann - haekt jemand acht Stammdatenzeilen dazu, soll das Bild schmaler werden und nicht verschwinden. */ .lp-veh.lp-veh-fill { grid-template-rows: minmax(84px, 1fr) auto; } .lp-veh.lp-veh-fill .lp-veh-shot { height: auto; min-height: 0; } .lp-veh.lp-veh-fill .lp-veh-body { align-content: end; } /* Bild daneben: aus den zwei Zeilen werden zwei Spalten. align-items:start haelt das Bild oben, wenn der Rumpf hoeher ist - ein mittig schwebendes Foto neben einer Liste sieht nach Versehen aus. */ .lp-veh.lp-veh-side { grid-template-rows: minmax(0, 1fr); grid-template-columns: auto minmax(0, 1fr); align-items: start; } /* Rechts: die Spalten tauschen, das Bild wandert per order hinter den Rumpf. Zwei Markup-Varianten dafuer waeren dieselbe Kachel doppelt gepflegt. */ .lp-veh.lp-veh-right { grid-template-columns: minmax(0, 1fr) auto; } .lp-veh.lp-veh-right .lp-veh-shot { order: 2; } /* Ohne Bild bleibt nur der Rumpf, und der nimmt die ganze Hoehe. */ .lp-veh.lp-veh-noimg { grid-template-rows: minmax(0, 1fr); } /* overflow:auto und eine Mindesthoehe an der Liste: Ohne beides bekam die 1fr-Zeile in einer knapp gezogenen Kachel exakt 0 Pixel - Bild, Lampen und Bewegung standen da, und die Stammdaten waren spurlos weg. Kein Abschneiden, kein Rollbalken, nichts. Jetzt behaelt die Liste drei Zeilen Anspruch, und passt auch das nicht, rollt der ganze Rumpf. Der Reihe nach: erst so viel zeigen wie geht, dann erreichbar machen. */ .lp-veh-body { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 9px; min-height: 0; overflow: auto; } /* Ohne Stammdatenliste gibt es keine Zeile, die den Rest nehmen soll: dann stehen Lampen und Bewegung oben und dehnen sich nicht auf halbe Kachelhoehe. Das trifft jede Kachel, an der die Stammdaten abgewaehlt sind oder zu der nichts hinterlegt ist. */ .lp-veh-body:not(:has(> .lp-veh-meta)) { grid-template-rows: auto auto; align-content: start; } /* Das Bild bekommt ein festes Mass statt sein Seitenverhaeltnis zu behalten: In einer Kachel, deren Hoehe der Benutzer zieht, waere ein 3:2-Bild bei jeder Groesse anders hoch - und die Lampen darunter wanderten mit. object-fit in .veh-img > img schneidet dafuer zu, und da das Motiv mittig liegt, verliert es nichts. Oben ist das Mass die Hoehe (die Breite gibt die Kachel vor), daneben die Breite - dort haelt aspect-ratio die Hoehe im Bildformat, weil eine Spalte keine Hoehe vorgibt. */ .lp-veh-shot { height: var(--veh-img, 120px); min-height: 0; } .lp-veh-shot .veh-img { width: 100%; height: 100%; } .lp-veh-side .lp-veh-shot { width: var(--veh-img, 120px); height: auto; aspect-ratio: 3 / 2; } /* ---- Die Lampen ---- */ /* Nebeneinander und gleich breit: Sie sind gleichrangig. "Fahrzeug sendet" und "Fahrzeug weiss, wo es ist" sind zwei Aussagen - ein Fahrzeug in der Halle sendet tadellos und hat keinen Satelliten. Spalten aus dem Fluss und nicht "1fr 1fr": Ist eine der beiden Lampen abgewaehlt, fuellt die andere die Breite, statt neben einer Luecke zu stehen. */ .lp-veh-leds { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; } .lp-veh-led { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 9px; background: var(--panel-inset); border: 1px solid var(--line); border-radius: var(--radius-sm); } .lp-veh-led-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .lp-veh-led-text b { font-size: 12px; font-weight: 600; color: var(--text); } .lp-veh-led-text span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lp-veh-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--stale); } .lp-veh-led.ok .lp-veh-dot { background: var(--ok); } .lp-veh-led.warn .lp-veh-dot { background: var(--warn); } .lp-veh-led.fault .lp-veh-dot { background: var(--fault); } .lp-veh-led.stale .lp-veh-dot { background: var(--text-faint); } .lp-veh-led.ok { border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); } .lp-veh-led.warn { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); } .lp-veh-led.fault { border-color: color-mix(in srgb, var(--fault) 40%, var(--line)); } /* Der Puls nur im guten Fall, und das ist Absicht: Er heisst "es kommt gerade etwas an". Ein blinkender roter Punkt hiesse "hier passiert etwas" - genau das Gegenteil von "nichts kommt". Stillstand ist die richtige Darstellung fuer Stillstand. box-shadow und kein Massstab: Eine wachsende Flaeche verschiebt die Zeile daneben um Bruchteile eines Pixels, und bei zwei Sekunden Takt sieht man das Zittern. */ .lp-veh-led.pulse .lp-veh-dot { animation: lp-veh-pulse 2s ease-out infinite; } @keyframes lp-veh-pulse { 0% { box-shadow: 0 0 0 0 currentColor; } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .lp-veh-led.ok .lp-veh-dot { color: color-mix(in srgb, var(--ok) 55%, transparent); } .lp-veh-led.warn .lp-veh-dot { color: color-mix(in srgb, var(--warn) 55%, transparent); } /* ---- Faehrt oder steht ---- */ /* Eine eigene Zeile: Ob ein Pruefling steht, entscheidet darueber, ob eine Messung ueberhaupt gueltig ist - bei einer Rollenmessung ebenso wie bei einer Fahrt. */ .lp-veh-move { display: flex; align-items: center; gap: 9px; padding: 6px 9px; border: 1px solid var(--line); border-left-width: 2px; border-radius: var(--radius-sm); background: var(--panel-inset); font-size: 12px; } .lp-veh-move.moving { border-left-color: var(--ok); } .lp-veh-move.still { border-left-color: var(--text-faint); } .lp-veh-move.unknown { border-left-color: var(--line-strong); } .lp-veh-move-icon { font-size: 10px; line-height: 1; color: var(--text-dim); flex: none; width: 14px; text-align: center; } .lp-veh-move.moving .lp-veh-move-icon { color: var(--ok); } .lp-veh-move-text { font-weight: 600; color: var(--text); } .lp-veh-move.unknown .lp-veh-move-text { font-weight: 500; color: var(--text-dim); } .lp-veh-move-num { margin-left: auto; font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums; color: var(--text-dim); white-space: nowrap; } .lp-veh-move-num + .lp-veh-move-num { margin-left: 0; } /* ---- Stammdaten ---- */ /* Bezeichnung und Wert in zwei Spalten, die Liste rollt in sich. Als Tabelle waere es dieselbe Information mit Rahmen und einer Kopfzeile, die nichts zu sagen haette. */ .lp-veh-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; align-content: start; margin: 0; overflow: auto; /* Drei Zeilen Anspruch - siehe .lp-veh-body. Mit min-height:0 gab die Liste in einer knappen Kachel ihren ganzen Platz her, ohne es anzuzeigen. */ min-height: 46px; font-size: 11.5px; } .lp-veh-meta dt { color: var(--text-faint); white-space: nowrap; font-size: 10.5px; padding-top: 1px; } .lp-veh-meta dd { margin: 0; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lp-veh-meta dd.mono { font-family: var(--font-mono); font-size: 11px; } /* ---------- Rechtsseiten: Impressum und AGB ---------- */ /* Eine eigene Bahn und nicht die Huelle der Anwendung: Beide Seiten laufen unter LoginLayout, weil sie OHNE Anmeldung erreichbar sein muessen. Es gibt hier also keine Navigation, keine Kopfzeile und keinen Inhaltsrahmen - die Seite bringt ihren eigenen mit. Eine Lesebreite und keine volle Seite: Fliesstext ueber 1600 Pixel liest niemand. 760 Pixel sind rund 90 Zeichen je Zeile, und damit endet eine Zeile dort, wo das Auge sie noch ohne Suchen wiederfindet. */ .legal-wrap { max-width: 760px; margin: 0 auto; padding: 28px 20px 60px; min-height: 100vh; min-height: 100dvh; } .legal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 30px; } .legal-back { font-size: 13px; color: var(--text-dim); text-decoration: none; } .legal-back:hover { color: var(--accent); } .legal-brand { display: flex; align-items: center; gap: 10px; } .legal-brand-name { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--text-dim); } .legal-title { font-size: clamp(24px, 3vw, 34px); line-height: 1.15; letter-spacing: -0.01em; } .legal-sub { color: var(--text-dim); font-size: 14px; margin-top: 8px; } .legal-card { margin-top: 26px; padding: 4px 24px 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); } /* Ein Abschnitt je Pflichtangabe. Die Trennlinie trennt Sachverhalte und nicht Absaetze - ohne sie liest sich ein Impressum als eine lange Aufzaehlung, in der man die Registernummer nicht wiederfindet. */ .legal-sec { padding: 20px 0; border-bottom: 1px solid var(--line); } .legal-sec:last-child { border-bottom: none; } .legal-sec h2 { font-size: 13px; font-weight: 600; color: var(--accent); letter-spacing: 0.01em; margin-bottom: 10px; } .legal-sec p { font-size: 13.5px; line-height: 1.7; color: var(--text); } .legal-sec p + p { margin-top: 10px; } .legal-sec a { color: var(--accent); text-decoration: none; } .legal-sec a:hover { text-decoration: underline; } .legal-strong { font-weight: 600; } .legal-lines { line-height: 1.8 !important; } .legal-sec .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* Bezeichnung und Wert in zwei Spalten. Auf dem Telefon untereinander: Zwei Spalten mit je 40 Prozent Breite brechen sonst beide mitten im Wort. */ .legal-dl { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 14px; font-size: 13.5px; line-height: 1.7; } .legal-dl dt { color: var(--text-dim); } .legal-dl dd { margin: 0; color: var(--text); } @media (max-width: 560px) { .legal-dl { grid-template-columns: 1fr; gap: 0 0; } .legal-dl dt { margin-top: 8px; } } /* ---- Die Dokumentkarten der AGB-Seite ---- */ /* Nebeneinander, solange Platz ist: Die beiden Dokumente sind gleichrangig, und untereinander laese sich das erste als das wichtigere. */ .legal-docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 26px; } .legal-doc { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); } .legal-doc-icon { width: 40px; height: 40px; display: grid; place-items: center; font-size: 20px; background: var(--panel-inset); border: 1px solid var(--line); border-radius: var(--radius-sm); } .legal-doc-body h2 { font-size: 14px; font-weight: 600; color: var(--text); } .legal-doc-body p { font-size: 12.5px; line-height: 1.6; color: var(--text-dim); margin-top: 6px; } .legal-doc-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } /* Der Betrachter im Fenster. Feste Hoehe in vh und nicht nach Inhalt: Ein Dokument von vierzig Seiten hat keine Hoehe, die sich aus ihm ableiten liesse - es rollt in sich. */ .legal-pdf { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: var(--radius-sm); display: block; background: var(--panel-inset); } /* ---- Fuss ---- */ .legal-foot { margin-top: 30px; text-align: center; } .legal-foot-links { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; } .legal-foot-links a { font-size: 12px; color: var(--text-dim); text-decoration: none; } .legal-foot-links a:hover { color: var(--accent); } /* Die Seite, auf der man steht, ist kein Verweis mehr - sie wird als Ort markiert statt als Ziel angeboten. */ .legal-foot-links a.is-here { color: var(--text); cursor: default; pointer-events: none; } .legal-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-faint); } .legal-copy { margin-top: 10px; font-size: 11px; color: var(--text-faint); } /* ---------- Hub-Analyse: Auswertung ---------- */ /* Eigenes Praefix ha-, weil hm- den Mitschnitt traegt: Die beiden Reiter teilen die Seite, aber kein Bauteil - und eine Klasse, die an zwei Stellen etwas anderes bedeutet, ist beim naechsten Umbau der Fehler. */ .ha { display: flex; flex-direction: column; gap: 14px; } .ha-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .ha-scope-line { font-size: 11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; } /* Die Plakette: Anzahl offener Befunde in der Farbe des schwersten. Sie steht am Bereichsreiter der Seite und im Kopf des Befund-Panels - wer den Mitschnitt liest, soll von einem Ausfall erfahren, ohne dafuer nachzusehen. */ .ha-badge { display: inline-block; margin-left: 6px; min-width: 16px; padding: 0 5px; border-radius: 9px; border: 1px solid transparent; font-family: var(--font-mono); font-size: 9.5px; line-height: 15px; text-align: center; font-variant-numeric: tabular-nums; } .ha-badge.info { background: var(--panel-inset); color: var(--text-dim); border-color: var(--line); } .ha-badge.notice { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .ha-badge.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 55%, transparent); } .ha-badge.fault { background: color-mix(in srgb, var(--fault) 16%, transparent); color: var(--fault); border-color: color-mix(in srgb, var(--fault) 55%, transparent); } /* ---- Kachelzeile ---- */ /* auto-fit statt fester Spaltenzahl: sechs Kacheln passen auf einen Monitor in eine Reihe, auf einem Laptop in zwei und auf dem Telefon untereinander - ohne eigene Umbruchregeln. */ .ha-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 10px; } .ha-kpi { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 11px 13px; background: var(--panel); border: 1px solid var(--line); border-left: 2px solid var(--line-strong); border-radius: var(--radius-sm); } .ha-kpi.ok { border-left-color: var(--ok); } .ha-kpi.warn { border-left-color: var(--warn); } .ha-kpi.fault { border-left-color: var(--fault); } .ha-kpi-cap { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); } /* tabular-nums und eine feste Zeilenhoehe: Die Kacheln werden im Sekundentakt neu geschrieben, und ohne gleich breite Ziffern atmet die ganze Zeile mit jeder Rate. */ .ha-kpi-val { font-family: var(--font-mono); font-size: 19px; line-height: 1.15; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ha-kpi-of { font-size: 12px; font-weight: 400; color: var(--text-faint); margin-left: 4px; } .ha-kpi-sub { font-size: 10.5px; line-height: 1.35; color: var(--text-dim); } /* ---- Flotte und Befunde nebeneinander ---- */ /* Das Bild links ist der Beleg fuer die Aussagen rechts, also stehen sie in einer Zeile. Die Flotte bekommt mehr Platz: Eine Sekundenreihe ueber fuenf Minuten braucht Breite, ein Befund braucht Hoehe. Unter 1100px stapeln beide - nebeneinander waere die Reihe dann zu schmal, um eine Luecke von einer Sekunde noch zu zeigen. */ .ha-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; align-items: start; } @media (max-width: 1100px) { .ha-top { grid-template-columns: 1fr; } } /* Die Befundliste rollt in sich. Ohne Deckel zieht sie bei zwanzig Befunden das ganze Dashboard auseinander, und die Gerätetabelle darunter waere nicht mehr zu sehen - genau das, was die Reiter vorher falsch gemacht haben. */ .ha-findings-panel .panel-body { max-height: 420px; overflow: auto; } /* ---- Erklaerzeile ueber einer Auswertung ---- */ /* Sie traegt auf dieser Seite mehr als ueblich: Eine Zahl wie "p95 = 1,2 s" ist ohne den Satz daneben keine Auskunft, sondern nur eine Zahl. Deshalb nicht zurueckgenommen bis zur Unlesbarkeit - lesbar, aber ruhiger als der Inhalt. */ .ha-hint { font-size: 11.5px; line-height: 1.55; color: var(--text-dim); padding: 9px 12px; margin-bottom: 12px; background: var(--panel-inset); border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: var(--radius-sm); } .ha-hint b { color: var(--text); font-weight: 600; } .ha-hint .mono { font-family: var(--font-mono); font-size: 11px; } .ha-dim { color: var(--text-dim); font-size: 11.5px; line-height: 1.45; } .ha-warn { color: var(--warn); } .ha-fault { color: var(--fault); } /* ---- Gemeinsame Ausfaelle, unter der Flottenreihe ---- */ /* Sie stehen bei der Reihe und nicht in einer eigenen Tabelle weiter unten: Die Liste ist die Lesehilfe zum Bild darueber - welcher der grauen Sockel welcher Vorfall war. */ .ha-outages { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); } .ha-outage { display: grid; grid-template-columns: 68px 52px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 3px 0; font-size: 11px; } .ha-outage .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ---- Befundliste ---- */ .ha-findings { display: flex; flex-direction: column; gap: 8px; } .ha-finding { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 11px 13px; background: var(--panel-raised); border: 1px solid var(--line); border-left: 2px solid var(--line-strong); border-radius: var(--radius-sm); } .ha-finding.notice { border-left-color: var(--accent); } .ha-finding.warn { border-left-color: var(--warn); } .ha-finding.fault { border-left-color: var(--fault); } /* Das Zeichen traegt die Stufe, nicht die Schriftfarbe des Textes: Eine ganze Meldung in Rot liest sich schlechter als eine in normaler Schrift mit rotem Zeichen davor. */ .ha-sev { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-family: var(--font-mono); font-size: 11px; font-weight: 600; line-height: 1; background: var(--panel-inset); color: var(--text-dim); border: 1px solid var(--line); } .ha-finding.notice .ha-sev { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); } .ha-finding.warn .ha-sev { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 60%, transparent); } .ha-finding.fault .ha-sev { color: var(--fault); border-color: color-mix(in srgb, var(--fault) 60%, transparent); } .ha-finding-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .ha-finding-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ha-finding-title { font-size: 13px; font-weight: 600; color: var(--text); } .ha-finding-detail { font-size: 12px; line-height: 1.5; color: var(--text); font-variant-numeric: tabular-nums; } /* Die Deutung steht zurueckgenommen unter der Begruendung: Sie ist der Satz, den man beim zweiten Lesen braucht, nicht beim ersten Ueberfliegen. */ .ha-finding-advice { font-size: 11.5px; line-height: 1.5; color: var(--text-dim); } /* Der Sprung vom Befund zu seinen Zahlen. Als Knopf und nicht als Link: Er waehlt das Geraet und rollt zur Einzelansicht, fuehrt aber nirgends hin. */ .ha-pill { font-family: var(--font-mono); font-size: 10.5px; padding: 2px 8px; border-radius: 10px; background: var(--panel-inset); border: 1px solid var(--line); color: var(--text-dim); cursor: pointer; transition: border-color .12s, color .12s; } .ha-pill:hover { border-color: var(--accent); color: var(--accent); } .ha-pill-flat { cursor: default; } .ha-pill-flat:hover { border-color: var(--line); color: var(--text-dim); } /* ---- Tabellen ---- */ /* Enger als .data sonst: Sechzehn Spalten je Zeile sind der Zweck dieser Tabelle, und mit der ueblichen Polsterung braeuchte eine Zeile zwei Bildschirmbreiten. */ .ha-table { font-size: 12px; } .ha-table th { padding: 8px 9px; } .ha-table td { padding: 6px 9px; } .ha-table td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } /* Der Zeigefinger nur dort, wo eine Zeile wirklich etwas tut: Die Schwellentabelle ist Auskunft und kein Auswahlmittel. */ .ha-table.ha-pick tbody tr { cursor: pointer; } .ha-table .ha-row-sel { background: var(--accent-soft); } .ha-table .ha-row-sel:hover { background: var(--accent-soft); } /* Die Gruppenzeile ueber den Spaltennamen. Sie ist bewusst leiser als die Namen darunter: Sie ordnet ein, sie benennt nicht - und zwei gleich laute Kopfzeilen laesen sich wie eine doppelte Ueberschrift. */ .ha-table .ha-th-group > th { border-bottom: 1px solid var(--line); background: var(--panel-inset); color: var(--text-faint); font-size: 9px; letter-spacing: 0.16em; text-align: center; padding-top: 7px; padding-bottom: 5px; } .ha-table .ha-th-group > th[rowspan] { text-align: left; letter-spacing: 0.1em; vertical-align: bottom; border-bottom: 1px solid var(--line-strong); } /* Die Gruppen voneinander abgrenzen: Bei sechzehn Zahlenspalten ist der senkrechte Strich die einzige Hilfe, um beim Lesen einer Zeile nicht in die Nachbargruppe zu rutschen. */ .ha-table .ha-th-group > th + th { border-left: 1px solid var(--line); } .ha-th-mark, .ha-td-mark { width: 26px; text-align: center; padding-right: 0 !important; padding-left: 8px !important; } /* Das Zeichen in der Tabelle: nur Glyphe und Farbe, keine Flaeche. In einer Tabelle mit sechzig Zeilen waeren sechzig farbige Plaketten lauter als die Zahlen daneben. */ .ha-mark { font-size: 12px; line-height: 1; color: var(--text-faint); } .ha-mark.info { color: var(--ok); } .ha-mark.notice { color: var(--accent); } .ha-mark.warn { color: var(--warn); } .ha-mark.fault { color: var(--fault); } .ha-veh { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; white-space: nowrap; } .ha-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; } .ha-dot.live { background: var(--ok); } .ha-dot.silent { background: var(--text-faint); } /* ---- Einzelansicht ---- */ /* Sie ist als Block abgesetzt und nicht nur eine weitere Panelreihe: Alles darin gilt fuer EIN Fahrzeug, alles darueber fuer die Flotte. Ohne diese Grenze liest man eine Zahl aus der Einzelansicht als Flottenwert. */ .ha-detail { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 4%, transparent); scroll-margin-top: 72px; } .ha-detail-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 0 2px; } .ha-detail-name { font-size: 14px; font-weight: 600; color: var(--text); } .ha-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 12px; align-items: start; } /* ---- Kennzahlenliste ---- */ /* Zwei Spalten je Zeile, Bezeichnung links und Zahl rechts. Als Tabelle waere es dieselbe Information mit Rahmen, Kopfzeile und Zeilentrennern - und die Kopfzeile haette nichts zu sagen ("Groesse" / "Wert"). */ .ha-stats { display: flex; flex-direction: column; } .ha-stat-grp { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); margin: 10px 0 3px; padding-bottom: 3px; border-bottom: 1px solid var(--line); } .ha-stat-grp:first-child { margin-top: 0; } .ha-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 11.5px; } .ha-stat-key { color: var(--text-dim); min-width: 0; } .ha-stat-val { font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; } /* ---- Zeitverlaeufe ---- */ .ha-plot { width: 100%; display: block; background: var(--panel-inset); border: 1px solid var(--line); border-radius: var(--radius-sm); } /* Die Nadel ist der Abstand EINES Pakets. Alle Nadeln einer Art liegen in EINEM Pfad - zweihundert Rechtecke, jede Sekunde ersetzt, waren genau die Last, an der die Rohtextanzeige dieser Seite vorher den Browser angehalten hat. */ .ha-needle { fill: var(--accent); opacity: 0.55; } .ha-needle.over { fill: var(--fault); opacity: 0.95; } .ha-plot-limit { stroke: var(--fault); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.7; } .ha-plot-median { stroke: var(--ok); stroke-width: 1; stroke-dasharray: 2 5; opacity: 0.7; } .ha-plot-zero { stroke: var(--line-strong); stroke-width: 1; } .ha-skew { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linejoin: round; } /* Die Achsenbeschriftung liegt in HTML und nicht im SVG: Die Plots sind mit preserveAspectRatio="none" gezogen, und mitverzerrte Schrift ist unlesbar. */ .ha-axis { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: 10.5px; color: var(--text-faint); flex-wrap: wrap; } .ha-axis .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .ha-axis .ha-dim { font-size: 10.5px; text-align: center; flex: 1 1 auto; } /* ---- Verteilung und Anteile ---- */ /* Dieselben vier Spalten fuer Abstandsklassen und Abfragearten: Beide beantworten "wie oft welcher Fall", und zwei verschiedene Balkenzeilen fuer dieselbe Frage waeren zwei Lesegewohnheiten fuer nichts. */ .ha-hist { display: flex; flex-direction: column; gap: 3px; } .ha-hist-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) 54px 48px; gap: 8px; align-items: center; font-size: 11px; } .ha-hist-lab { color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ha-hist-bar { height: 9px; background: var(--panel-inset); border-radius: 2px; overflow: hidden; } .ha-hist-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 2px; } /* Klassen oberhalb der Aussetzerschwelle: Sie sind nicht "der rechte Rand der Verteilung", sondern ein anderer Sachverhalt - dort war die Strecke unterbrochen. */ .ha-hist-row.over .ha-hist-lab { color: var(--fault); } .ha-hist-row.over .ha-hist-bar > span { background: var(--fault); } .ha-hist-num, .ha-hist-pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-dim); } .ha-hist-pct { color: var(--text-faint); } /* ---- Pakete je Sekunde (SvgSecondBars) ---- */ .sb { display: flex; flex-direction: column; gap: 3px; } .sb-plot { width: 100%; display: block; background: var(--panel-inset); border: 1px solid var(--line); border-radius: var(--radius-sm); } .sb-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; } /* Drei Pfade, drei Aussagen. Eine leere Sekunde ist grau, solange sie nur dieses Geraet betrifft, und rot, sobald die ganze Flotte gleichzeitig schwieg - genau diese Unterscheidung ist der Grund, warum das Bauteil die Ausfallsekunden uebergeben bekommt und nicht selbst herleitet. */ .sb-bar.live { fill: var(--accent); } .sb-bar.empty { fill: var(--text-faint); } .sb-bar.outage { fill: var(--fault); } /* Das Geraeteband: Flaeche unter der Zahl gleichzeitig sendender Geraete. Eine eigene Farbe, weil es eine andere Groesse zaehlt als die Balken darueber. */ .sb-band { width: 100%; display: block; height: 14px; background: var(--panel-inset); border: 1px solid var(--line); border-radius: 2px; } .sb-cell { fill: color-mix(in srgb, var(--ok) 55%, transparent); } @media (max-width: 700px) { /* Die Beschriftungsspalte der Verteilung ist auf dem Telefon der Engpass: Sie traegt "1,50 s - 2,00 s" und laesst dem Balken daneben sonst nichts. */ .ha-hist-row { grid-template-columns: 92px minmax(0, 1fr) 46px 44px; gap: 6px; font-size: 10.5px; } .ha-kpi-val { font-size: 16px; } .ha-detail { padding: 8px; } } /* ---------- Wertwechsel: kurze Einblendung ---------- */ /* Die Zahl wechselte bisher hart. Ein Uebergang macht sichtbar, DASS sich etwas geaendert hat - bei einem Panel, das man nebenher im Blick hat, ist das der halbe Zweck. Die Dauer ist bewusst kurz: die Mock-Dongles senden mit 5 Hz, also alle 200 ms. Eine Animation von 300 ms liefe dauerhaft und das Panel flimmerte - schlimmer als der harte Wechsel vorher. 140 ms lassen zwischen zwei Werten einen ruhigen Moment. Ausgeloest wird sie ueber @key auf dem dargestellten Text: Blazor tauscht das Element nur bei einer echten Aenderung aus, und nur dann laeuft die Animation erneut an. Ein stehender Wert bleibt ruhig, auch wenn im Sekundentakt gerendert wird. */ /* Die Zahl selbst wird nicht mehr per CSS animiert - sie wird in js/app.js fortlaufend nachgefuehrt (.dx-num). Eine Animation JE AKTUALISIERUNG kann bei 5 Hz nicht ruhig wirken: 200 ms Takt gegen 140 ms Animation hiess 70 % der Zeit in Bewegung, und das sah aus wie Flackern. Eine fortlaufende Annaeherung hat keinen Ausloeser und damit nichts, was blinken koennte. Animiert werden hier nur noch die analogen Teile - Balken und Bogen -, denn deren Bewegung IST die Aussage. */ .lp-bar-fill { transition: width .22s cubic-bezier(0.33, 1, 0.68, 1), background-color .25s ease; } .gauge-value { transition: stroke-dashoffset .28s cubic-bezier(0.33, 1, 0.68, 1), stroke .25s ease; } /* Ziffern gleicher Breite sind Voraussetzung fuer die Nachfuehrung: ohne sie wackelt die Zahl bei jedem Ziffernwechsel seitlich, und genau das sollte weg. */ .dx-num { font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { .lp-bar-fill, .gauge-value { transition: none; } } /* Stufenwechsel weich: von "in Ordnung" auf "Warnung" springt sonst Farbe und Rahmen im selben Bild um. Das ist der eine Moment, den man bemerken soll - ein Uebergang von einer Viertelsekunde macht ihn deutlicher, nicht leiser. */ .lp-number, .lp-row-value, .lp-row-dot, .lp-lamp { transition: color .25s ease, background-color .25s ease; } .lp-row { transition: background-color .25s ease; } .widget > .panel { transition: border-color .25s ease, opacity .25s ease; } @media (prefers-reduced-motion: reduce) { .lp-number, .lp-row-value, .lp-row-dot, .lp-lamp, .lp-row, .widget > .panel { transition: none; } } /* ---------- Panel: Signale tabellarisch ---------- */ .lp-sigtable { gap: 2px; } /* Der Blockkopf ist kein Titel, sondern der Name eines Knotens - gleiche Groesse wie die Zeilen darunter, nur zurueckgenommen und mit Abstand darueber. */ .lp-sig-grp { display: flex; align-items: baseline; gap: 8px; padding: 7px 8px 3px; margin-top: 2px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--text-dim); border-bottom: 1px solid var(--line); } .lp-sig-grp:first-child { margin-top: 0; padding-top: 2px; } .lp-sig-grp-name { font-weight: 600; } .lp-sig-grp.vehicle .lp-sig-grp-name { color: var(--accent); } .lp-sig-grp-note { color: var(--text-faint); margin-left: auto; } /* ---------- Panel: Position ---------- */ .lp-gps { justify-content: flex-start; gap: 10px; } .lp-gps-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; align-items: baseline; } .lp-gps-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); } /* Koordinaten sind zum Ablesen und Kopieren da - Ziffern gleicher Breite, damit die Nachkommastellen untereinander stehen und die Zeile beim Zaehlen nicht wandert. */ .lp-gps-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: clamp(0.9rem, 5.5cqw, 1.2rem); font-weight: 700; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all; } .lp-gps-sub { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--text-dim); } .lp-gps-sub b { font-family: var(--font-mono); font-weight: 700; color: var(--text); } .lp-gps-move { margin-left: auto; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 7px; border-radius: 20px; border: 1px solid currentColor; flex: none; } .lp-gps.lp-ok .lp-gps-move { color: var(--ok); } /* ---------- Signalauswahl im Panel-Dialog ---------- */ .lp-pick { display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow: auto; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-inset); } .lp-pick-grp { display: flex; flex-direction: column; gap: 6px; } .lp-pick-head { display: flex; align-items: center; gap: 8px; } .lp-pick-name { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; } .lp-pick-name.vehicle { color: var(--accent); } .lp-pick-note { font-size: 10.5px; color: var(--text-faint); margin-right: auto; } /* Mehrspaltig: vierzig Signale untereinander waeren eine Rollflaeche, in der man das gesuchte nicht findet. */ .lp-pick-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 12px; } .lp-pick-item { font-size: 12px; padding: 2px 0; min-width: 0; } .lp-pick-item .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lp-pick-unit { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); flex: none; } /* ---------- Dialog: Klick daneben schliesst nicht ---------- */ /* Der Dialog bleibt stehen und gibt stattdessen eine kurze Rueckmeldung. Ohne sie wirkt er eingefroren - man klickt zwei-, dreimal, weil nichts passiert, und sucht den Fehler bei der Anwendung statt bei der eigenen Zielgenauigkeit. Kleine Amplitude und kurze Dauer: das ist keine Fehlermeldung, sondern ein Hinweis. Ein kraeftiges Ruetteln liest sich als "das war verboten" - gemeint ist aber nur "hier geht es nicht raus, oben rechts oder unten schon". */ @keyframes modal-nudge { 0% { transform: translateX(0); } 22% { transform: translateX(-3px); } 55% { transform: translateX(3px); } 80% { transform: translateX(-1px); } 100% { transform: translateX(0); } } .modal.nudge { animation: modal-nudge .24s ease-in-out; border-color: var(--accent); } /* Ohne Bewegung bleibt der Rahmen als Rueckmeldung - schon damit ist erkennbar, dass der Klick angekommen ist. */ @media (prefers-reduced-motion: reduce) { .modal.nudge { animation: none; } } /* Die Fusszeile steht jetzt in jedem Dialog, auch in denen ohne eigene Schaltflächen. Bei einem Dialog mit nur einer Schaltflaeche sass diese bisher am rechten Rand weit weg vom Inhalt - deshalb rueckt ein alleinstehendes "Schliessen" nach links. */ .modal-foot > .btn:only-child { margin-right: auto; } /* ---------- Hervorgehobene Hinzufuegen-Schaltflaeche ---------- */ /* "Panel" ist im Bearbeiten-Modus die Schaltflaeche, wegen der man ueberhaupt dort ist - sie stand aber als eine von fuenf gleich aussehenden in der Reihe. Bewusst nicht btn-primary: das gehört "Speichern". Zwei gefuellte Knoepfe nebeneinander heben sich gegenseitig auf, und dann faellt wieder keiner auf. Diese hier trägt die Akzentfarbe als Rahmen und Schrift und fuellt sich erst beim Ueberfahren - deutlich genug, um gefunden zu werden, ohne dem Speichern die Rolle streitig zu machen. */ .btn.btn-add { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 600; } .btn.btn-add:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } /* Das Plus dieses Knopfes kommt aus derselben Hülle wie jedes andere Zeichen in der Leiste (.btn-ico) – hier bleibt nur seine Farbe, die der Akzent des Knopfes ist. */ /* Die Meldezeile grenzt sich nach unten ab, damit sie nicht mit dem Inhalt verschwimmt - bei einem Panel mit dunklem Koerper sass sie sonst scheinbar direkt auf dem Messwert. */ .lp-alarmbar + .panel-body { border-top: 1px solid rgba(0,0,0,0.18); } /* ============================================================================ ODX-Workspace Die Ansichten des Workspace zeigen fast durchgehend Kennungen, Hex und Zahlen - also Text, den man zeichenweise liest und vergleicht. Deshalb steht hier haeufiger die Schreibmaschinenschrift als sonst im Portal, und die Zeilen sind enger: ein Parameterbaum mit 40 Zeilen soll auf einen Bildschirm passen, sonst scrollt man zwischen Byte und Bedeutung hin und her. ============================================================================ */ /* ---------- Chip-Varianten, die es bisher nur als Sonderfall gab ---------- */ .chip.ok { border-color: var(--ok); color: var(--ok); } .chip.warn { border-color: var(--warn); color: var(--warn); } .chip.danger { border-color: var(--fault); color: var(--fault); } /* ---------- Bestand ---------- */ .odx-inv { display: flex; flex-direction: column; gap: 14px; } .odx-inv-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; margin-bottom: 10px; } /* Der erste Schritt als Zeile über dem Bestand. Eine abgeblendete Reiterleiste sieht nach einem Fehler aus; hier steht, dass noch etwas zu tun ist und was. */ .odx-onboard { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--accent); background: var(--accent-soft); font-size: 12.5px; line-height: 1.5; } .odx-onboard.ok { border-color: var(--line-strong); background: var(--panel-inset); } .odx-onboard-step { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--bg); font-family: var(--font-mono); font-size: 12px; font-weight: 600; } .odx-onboard.ok .odx-onboard-step { background: var(--ok); } .odx-onboard .text-dim { font-size: 11.5px; } /* Neue Container einspielen. Der Bereich ist eingeklappt, bis jemand ihn braucht: er ist ein seltener Vorgang und stünde sonst über der Liste, die man täglich benutzt. */ .odx-upload { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; padding: 12px; margin-bottom: 12px; background: var(--panel-inset); border: 1px solid var(--accent); border-radius: var(--radius-sm); } .odx-upload input[type="file"] { padding: 6px 8px; font-size: 12px; height: auto; cursor: pointer; } .odx-upload .spinner { width: 16px; height: 16px; border-width: 2px; } /* Die Bestandsliste rollt in sich: der Kopf mit Suche und Filtern bleibt stehen, während man die Treffer durchgeht. Ohne das wanderte er beim Blättern aus dem Bild und man scrollte für jede Filteränderung wieder nach oben. */ .odx-inv-scroll { max-height: 58vh; overflow: auto; } @media (max-height: 900px) { .odx-inv-scroll { max-height: 48vh; } } /* Das Bestandsverzeichnis ist eine Auskunft und kein Eingabefeld – es liegt fest. */ .odx-inv-path { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; margin-bottom: 12px; background: var(--panel-inset); border: 1px solid var(--line); border-radius: var(--radius-sm); } .odx-inv-path .mono { font-size: 12px; word-break: break-all; } .odx-scan { display: flex; align-items: center; gap: 12px; padding: 10px 0; } .odx-bar { height: 4px; background: var(--panel-inset); border-radius: 2px; overflow: hidden; } .odx-bar-fill { height: 100%; background: var(--accent); transition: width .3s ease; } .odx-stats { display: flex; gap: 10px; flex-wrap: wrap; } .odx-stat { display: flex; flex-direction: column; gap: 1px; min-width: 110px; padding: 8px 12px; background: var(--panel-inset); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 11px; color: var(--text-dim); } .odx-stat-num { font-family: var(--font-mono); font-size: 17px; color: var(--text); } .odx-stat-dim .odx-stat-num { color: var(--text-dim); } .odx-row-active > td { background: var(--accent-soft); } button.chip.odx-chip-ecu { cursor: pointer; font-size: 10.5px; height: 21px; } button.chip.odx-chip-ecu:hover { border-color: var(--accent); color: var(--accent); } /* ---------- Zweiteilung Liste / Detail ---------- */ /* Die Liste bekommt eine feste Spalte: sie ist Navigation und soll beim Blaettern durch die Detailansicht nicht springen. */ .odx-split { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 14px; align-items: start; } @media (max-width: 1100px) { .odx-split { grid-template-columns: 1fr; } } .odx-split-list { position: sticky; top: 12px; } .odx-split-detail { min-width: 0; } .odx-list { display: flex; flex-direction: column; gap: 2px; max-height: 62vh; overflow: auto; } .odx-list-item { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent; } .odx-list-item:hover { background: var(--panel-inset); } .odx-list-item.active { background: var(--accent-soft); border-color: var(--accent); } .odx-list-name { font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .odx-list-hex { font-size: 10.5px; color: var(--text-dim); flex: none; } /* ---------- Destillat: Dienstauswahl ---------- Eine Auswahlliste und keine Navigationsliste: die Zeile ist eine Kästchenzeile, und die Beschriftung gehört links an den Rand. Vorher trug sie .odx-list-item mit justify-content:space-between – der Name saß dann je nach Zeile mittig oder am Rand, weil nur manche Dienste einen Hex-Vorsatz haben. Kompakter als die Dienstliste des Viewers: hier zählt, wie viele Dienste gleichzeitig zu sehen sind – man hakt zwanzig Stück an und will dabei nicht rollen. */ .odx-pick { display: flex; flex-direction: column; gap: 1px; max-height: 66vh; overflow: auto; } .odx-pick-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 3px 6px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; text-align: left; } .odx-pick-row:hover { background: var(--panel-inset); } .odx-pick-row.on { background: var(--accent-soft); border-color: var(--accent); } .odx-pick-row input { width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; } .odx-pick-name { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .odx-pick-sub { font-size: 10px; color: var(--text-faint); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .odx-pick-hex { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); flex: none; } /* Die Hauptaktion des Reiters. Sie stand als btn-sm in der Kopfzeile des Panels und ging dort neben den Feldern unter – sie ist der Grund, warum man hier ist. */ .odx-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .odx-act .btn-lg { height: 42px; padding: 0 24px; font-size: 13.5px; font-weight: 600; flex: none; } /* Der Wartekreisel ist auf 26px ausgelegt – in einem Knopf ist das ein Rad. */ .odx-act .btn .spinner { width: 14px; height: 14px; border-width: 2px; } .odx-act-note { font-size: 11.5px; color: var(--text-dim); flex: 1; min-width: 200px; line-height: 1.45; } /* ---------- Destillat: Befund ---------- Der Befund ist eine Aussage und keine Kacheltafel: oben eine Zeile, die sagt, ob das Extrakt taugt, darunter die Zahlen und erst dann die Einzelheiten. */ .odx-verdict { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius); margin-bottom: 12px; border: 1px solid var(--ok); background: rgba(60,200,120,0.08); } .odx-verdict.bad { border-color: var(--fault); background: rgba(240,72,62,0.08); } .odx-verdict-mark { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ok); color: var(--bg); font-size: 14px; font-weight: 700; } .odx-verdict.bad .odx-verdict-mark { background: var(--fault); } .odx-verdict-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .odx-verdict-text strong { font-size: 13px; } .odx-verdict-text span { font-size: 11.5px; color: var(--text-dim); } /* Die beiden Wege nach dem Destillieren: laden oder festschreiben. Beide gehören nach oben und groß – sie sind der Abschluss des Vorgangs. */ .odx-verdict-acts { margin-left: auto; display: flex; gap: 8px; flex: none; } .odx-verdict-acts .btn { height: 34px; padding: 0 16px; font-size: 12.5px; font-weight: 600; } /* Vier Zahlen in einer Reihe, gleich breit – als Zeile lesbar und nicht als Kachelhaufen. */ .odx-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; } .odx-figure { display: flex; flex-direction: column; gap: 1px; padding: 8px 11px; background: var(--panel-inset); border: 1px solid var(--line); border-radius: var(--radius-sm); } .odx-figure-num { font-family: var(--font-mono); font-size: 18px; line-height: 1.1; } .odx-figure-cap { font-size: 10.5px; color: var(--text-dim); } .odx-figure.warn { border-color: var(--warn); } .odx-figure.warn .odx-figure-num { color: var(--warn); } .odx-figure.bad { border-color: var(--fault); } .odx-figure.bad .odx-figure-num { color: var(--fault); } .odx-figure.dim .odx-figure-num { color: var(--text-dim); font-size: 15px; } /* Der Mengenvergleich Quelle/Extrakt: eine Balkenzeile je Elementart. Eine Prozentzahl in einer Tabellenspalte muss man lesen, einen Balken sieht man. */ .odx-reduce { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; } /* Gedeckelt: ein Balken über die ganze Breite eines 27-Zoll-Schirms sagt nicht mehr als einer über 300 Pixel, aber die Zeile wird unlesbar weit. */ .odx-reduce-row { display: grid; grid-template-columns: minmax(110px, 190px) 84px minmax(60px, 300px) 46px; align-items: center; gap: 12px; font-size: 11.5px; padding: 2px 0; } .odx-reduce-kind { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .odx-reduce-num { font-family: var(--font-mono); font-size: 11px; text-align: right; color: var(--text-dim); } .odx-reduce-num b { color: var(--text); font-weight: 500; } .odx-reduce-bar { height: 5px; background: var(--panel-inset); border-radius: 3px; overflow: hidden; } .odx-reduce-bar > i { display: block; height: 100%; background: var(--accent); border-radius: 3px; } .odx-reduce-pct { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); text-align: right; } /* Die Einzelheiten stehen zugeklappt darunter: beim Übernehmen liest sie niemand, beim Nachsehen will man sie vollständig. */ .odx-fold { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; } .odx-fold > summary { cursor: pointer; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); list-style: none; } .odx-fold > summary::-webkit-details-marker { display: none; } .odx-fold > summary::before { content: "▸ "; } .odx-fold[open] > summary::before { content: "▾ "; } .odx-fold > summary:hover { color: var(--text); } .odx-fold-body { padding: 8px 0 2px; } /* ---------- Dienst-Detail ---------- */ .odx-detail { display: flex; flex-direction: column; gap: 12px; } .odx-desc { font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; } .odx-meta-row { display: flex; gap: 6px; flex-wrap: wrap; } .odx-built { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; background: var(--panel-inset); border: 1px solid var(--line); border-radius: var(--radius-sm); } .odx-hex { font-size: 12.5px; letter-spacing: 0.06em; word-break: break-all; } .odx-tmpl { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; } .odx-tmpl-head { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--panel-inset); cursor: pointer; } .odx-tmpl-table td, .odx-tmpl-table th { padding: 4px 8px; } /* ---------- Parameter-Trace ---------- */ .odx-param { border-top: 1px solid var(--line); } .odx-param:first-child { border-top: none; } .odx-param-child { margin-left: 14px; border-left: 1px solid var(--line); border-top: none; } .odx-param-head { display: flex; align-items: center; gap: 8px; padding: 5px 6px; cursor: pointer; font-size: 12px; } .odx-param-head:hover { background: var(--panel-inset); } .odx-param-caret { display: inline-block; width: 10px; transition: transform .12s; color: var(--text-dim); flex: none; } .odx-param-caret.open { transform: rotate(90deg); } .odx-param-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .odx-param-pos { font-size: 10.5px; flex: none; } .odx-param-raw { font-size: 11px; color: var(--accent); flex: none; } .odx-param-phys { margin-left: auto; font-size: 11.5px; flex: none; } .odx-param-body { padding: 4px 6px 10px 24px; } .odx-param-collapsed { padding: 0 6px 5px 24px; font-size: 10.5px; } .chip.odx-chip-type { height: 18px; padding: 0 7px; font-size: 9.5px; flex: none; } .odx-trace-grid { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 2px 10px; font-size: 11.5px; } .odx-trace-key { color: var(--text-faint); } .odx-trace-val { word-break: break-word; } .odx-issues { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; } .odx-issue { display: flex; gap: 7px; align-items: flex-start; font-size: 11.5px; padding: 5px 8px; border-radius: var(--radius-sm); border: 1px solid var(--line); } .odx-issue.err { border-color: var(--fault); color: var(--fault); background: rgba(240,72,62,0.08); } .odx-issue.warn { border-color: var(--warn); color: var(--warn); background: rgba(245,166,35,0.08); } .odx-notes { margin-top: 6px; font-size: 11px; color: var(--text-faint); } .odx-note-line { font-size: 12px; color: var(--text-dim); padding: 2px 0; } /* ---------- Interpreter ---------- */ .odx-interp { display: flex; flex-direction: column; gap: 14px; } /* Der passende Kandidat trägt links eine gruene Kante, ein unpassender eine gelbe - bei zehn Kandidaten untereinander findet man den Treffer sonst nur durch Lesen. */ .odx-cand-exact { border-left: 3px solid var(--ok); } .odx-cand-weak { border-left: 3px solid var(--warn); } /* ---------- Simulation ---------- */ .odx-exchange { display: flex; flex-direction: column; gap: 4px; } .odx-exchange-line { display: flex; gap: 10px; align-items: baseline; font-size: 12px; } .odx-dir { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); flex: none; width: 62px; } .odx-dir-out { color: var(--accent); } .odx-dir-in { color: var(--ok); } /* ---------- Dokument ---------- */ .odx-doc { display: flex; flex-direction: column; gap: 14px; } .odx-tree { max-height: 66vh; overflow: auto; font-size: 12px; } .odx-node-head { display: flex; align-items: center; gap: 7px; padding: 2px 4px; cursor: pointer; border-radius: 4px; white-space: nowrap; } .odx-node-head:hover { background: var(--panel-inset); } .odx-node-head.leaf { cursor: default; } .odx-node-dot { width: 10px; color: var(--text-faint); flex: none; } .odx-node-name { font-family: var(--font-mono); font-size: 11.5px; color: var(--accent); } .odx-node-sn { font-size: 11.5px; } .odx-node-attr { font-size: 10.5px; color: var(--text-faint); } .odx-node-attr-val { color: var(--text-dim); } .odx-node-text { font-size: 11.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; } .odx-node-count { font-size: 10px; } .odx-node-children { margin-left: 14px; border-left: 1px solid var(--line); padding-left: 4px; } .odx-node-more { height: 22px; font-size: 10.5px; margin: 2px 0 2px 14px; } .odx-xml { max-height: 66vh; overflow: auto; background: var(--panel-inset); border-radius: var(--radius-sm); padding: 8px 0; } .odx-xml-line { display: flex; gap: 12px; font-family: var(--font-mono); font-size: 11px; line-height: 1.55; padding: 0 10px; } .odx-xml-line.hit { background: var(--accent-soft); } .odx-xml-no { color: var(--text-faint); text-align: right; width: 58px; flex: none; user-select: none; } .odx-xml-text { white-space: pre; } .odx-edit { width: 100%; min-height: 420px; font-size: 11.5px; line-height: 1.5; resize: vertical; white-space: pre; overflow-wrap: normal; overflow-x: auto; } /* ---------- Analyse: der Auswertungsbericht der Zeitreihen ---------- */ /* Ein Bericht und keine Kacheltafel. Oben die Reiterzeile, darunter der gewählte Abschnitt – und nur der rollt: Reiter, Werkzeugleiste und Datenhinweis bleiben stehen, auch bei einer Tabelle über mehrere Bildschirmhöhen. */ .an-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 12px; } .an-sections { flex: 1; min-height: 0; overflow: auto; padding-right: 2px; } /* Die Reiterzeile der Abschnitte, dahinter der Satz, der den ganzen Bericht einordnet. Der Satz darf umbrechen und schrumpfen – er ist nicht der Grund, warum die Zeile zu breit wird –, die Reiter dagegen bleiben immer vollständig. */ .an-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .an-head .an-note { flex: 1 1 200px; min-width: 0; } /* Sechs Reiter mit Abzeichen passen auf einem schmalen Fenster nicht in eine Zeile. Sie brechen dann innerhalb ihres Kastens um, statt seitlich hinauszulaufen – ein Reiter, der aus dem Bild ragt, ist keiner. */ .an-tabs { flex: 0 1 auto; flex-wrap: wrap; max-width: 100%; } .an-tabs button { display: inline-flex; align-items: center; gap: 6px; } /* Das Abzeichen am Reiter: neutral, solange es nur eine Menge ist (Signalpaare), grün mit Haken, wenn geprüft und nichts gefunden, und in Warn- bzw. Fehlerfarbe mit der Anzahl, sobald etwas dasteht. Ohne diesen Unterschied läse sich „28“ neben „Zusammenhänge“ wie achtundzwanzig Probleme. Die Farben sind die der Seite (--ok/--warn/--fault) und die Flächen bleiben schwach: ein Bericht, in dem sechs Reiter leuchten, sagt nichts mehr aus. */ .an-badge { min-width: 17px; height: 15px; padding: 0 4px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; line-height: 1; font-variant-numeric: tabular-nums; background: var(--panel-inset); color: var(--text-dim); border: 1px solid var(--line); } .tabs button.active .an-badge { background: var(--panel-inset); } .an-badge.ok { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); } .an-badge.warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 55%, transparent); } .an-badge.fault { background: color-mix(in srgb, var(--fault) 14%, transparent); color: var(--fault); border-color: color-mix(in srgb, var(--fault) 55%, transparent); } /* Das Zeichen in der Tabelle: nur Glyphe und Farbe, keine Fläche. In einer Tabelle mit zwanzig Zeilen wären zwanzig farbige Plaketten lauter als die Zahlen daneben. „Nicht geprüft“ bekommt einen Strich in Grau und ausdrücklich keinen Haken. */ .an-mark { font-size: 12px; line-height: 1; color: var(--text-faint); } .an-mark.ok { color: var(--ok); } .an-mark.warn { color: var(--warn); } .an-mark.fault { color: var(--fault); } .an-mark.none { color: var(--text-faint); } .an-th-mark, .an-td-mark { width: 22px; padding-right: 0 !important; text-align: center; } /* Die auffällige Zeile bekommt eine Kante und keine Färbung: ein eingefärbter Hintergrund über die ganze Breite überstrahlt die Zahlen, um die es geht. Zeilen ohne Befund bleiben ganz unmarkiert – sonst trüge jede Zeile etwas, und keine sagte mehr etwas. */ .an-row-warn > td:first-child { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--warn) 70%, transparent); } .an-row-fault > td:first-child { box-shadow: inset 2px 0 0 var(--fault); } /* Ein Messwert außerhalb der physikalischen Grenze. Nur diese eine Zahl, damit zu sehen ist, welcher der beiden Ränder gemeint ist. */ .an-bad { color: var(--fault); font-weight: 600; } /* Befund-Plakette in den aufklappbaren Blöcken – dieselbe Form wie .chip.accent, aber in der Warnfarbe: die Akzentfarbe der Seite ist das CI-Blau und kein Warnsignal. */ .chip.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 55%, transparent); background: color-mix(in srgb, var(--warn) 12%, transparent); } .chip.fault { color: var(--fault); border-color: color-mix(in srgb, var(--fault) 55%, transparent); background: color-mix(in srgb, var(--fault) 12%, transparent); } /* Die Notiz neben den Zahlen darf umbrechen und schrumpfen – sie ist der Satz, der die Zahlen einordnet, und nicht der Grund, warum die Zeile zu breit wird. */ .an-note { font-size: 10.5px; line-height: 1.4; } /* Was für diesen einen Abschnitt gilt: die Schwelle, das Fenster, das Raster. Steht über der Tabelle, weil es beim Lesen der Zahlen darunter gebraucht wird. */ .an-sec-note { margin: 0; font-size: 10.5px; line-height: 1.4; color: var(--text-dim); } .an-warn { display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px; border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); color: var(--text); font-size: 11.5px; line-height: 1.5; } .an-warn .an-mark { margin-top: 2px; flex: none; } /* „Nichts gefunden“ ist ein Ergebnis: der leere Abschnitt bekommt einen Haken und liest sich damit als geprüft und in Ordnung – nicht als Liste, die noch nicht geladen ist. */ .an-clear { display: flex; align-items: center; justify-content: center; gap: 8px; } .an-sec { display: flex; flex-direction: column; gap: 7px; } /* Der Satz unter einer Tabelle sagt, was ihre Zahlen bedeuten und wo sie aufhören zu gelten. Er steht bewusst in Fließtextbreite und nicht über die ganze Tabelle: gelesen wird er als Satz und nicht als Fußzeile einer Spalte. */ .an-foot { margin: 0; max-width: 96ch; font-size: 11px; line-height: 1.55; color: var(--text-dim); } .an-table { font-size: 12px; } .an-table th, .an-table td { padding: 5px 8px; white-space: nowrap; } .an-table td.num, .an-table th.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; } .an-sub-table { background: var(--panel-inset); border-radius: var(--radius-sm); } .an-sub-table th { background: transparent; position: static; } /* Der Farbpunkt ist dieselbe Farbe wie die Kurve im Diagramm. Ohne ihn müsste man beim Blättern zwischen Diagramm und Bericht die Namen vergleichen. */ .an-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; flex: none; } /* Zwei Klassen tief, damit die Zeilenhöhe der Tabelle gegen `.ts-page .select` besteht – ein 29 px hohes Auswahlfeld sprengte die Zeile, in der es steht. */ .an-body .an-unit { height: 22px; font-size: 11px; padding: 0 20px 0 6px; background-position: right 5px center; min-width: 74px; } /* Zweite Zeile in einer Zahlenzelle: dieselbe Größe in einer anderen Einheit. */ .an-sub { display: block; font-size: 10px; color: var(--text-dim); font-family: var(--font-mono); } .an-sub-inline { margin-left: 6px; font-size: 10.5px; } .an-f { margin: 0; width: 152px; } /* ---------- DiagX Assist: der Befund, den ein Sprachmodell schreibt ---------- Dieser Abschnitt darf aussehen wie etwas anderes als der Rest des Berichts, und er soll es auch: Alles daneben sind gerechnete Zahlen, das hier ist ein geschriebener Text. Der Unterschied ist keine Zierde, sondern die Aussage – wer den Verlauf sieht, weiß auf einen Blick, dass er hier etwas Formuliertes liest und keine Messung. Die Farben kommen nicht aus der Statuspalette. Grün, Amber und Rot sind in diesem Portal Urteile über ein Fahrzeug; ein Assistent, der sich daraus bedient, behauptete mit seiner Farbe etwas über die Messung. Der Verlauf mischt stattdessen den CI-Akzent mit Violett und Cyan – über color-mix aus dem Akzent des jeweiligen Themes gebildet, damit er in allen acht Themen sitzt und in den hellen dunkel genug für weiße Schrift bleibt. Es sind zwei Verläufe und nicht einer, weil sie zwei verschiedene Aufgaben haben. --ai-grad liegt unter weißer Schrift und bleibt deshalb akzentnah und dunkel genug, auch wenn das Theme hell ist. --ai-vivid trägt keine Schrift, sondern Ränder, Punkte und das Funkeln – dort darf und soll man Cyan und Violett wirklich sehen. Mit nur einem Verlauf wäre entweder der Knopf unlesbar oder der Rand ein blauer Strich. */ :root { --ai-a: var(--accent); --ai-b: color-mix(in srgb, var(--accent) 45%, var(--s-violet)); --ai-c: color-mix(in srgb, var(--accent) 55%, var(--s-cyan)); --ai-b2: color-mix(in srgb, var(--accent) 14%, var(--s-violet)); --ai-c2: color-mix(in srgb, var(--accent) 20%, var(--s-cyan)); --ai-grad: linear-gradient(115deg, var(--ai-c) 0%, var(--ai-a) 45%, var(--ai-b) 100%); --ai-vivid: linear-gradient(115deg, var(--ai-c2) 0%, var(--ai-a) 42%, var(--ai-b2) 100%); } /* Der Knopf, der den Abschnitt aufruft – in der Werkzeugleiste des Berichts und im Reiter selbst. Gefüllt und nicht umrandet: Er ist die einzige Stelle im Bericht, an der etwas Neues entsteht. */ .btn-ai { background: var(--ai-grad); background-size: 160% 160%; /* Die Schriftfarbe kommt aus dem Theme und ist nicht fest weiß: Zwei der acht Themen (amber, midnight) tragen auf ihrem Akzent dunkle Schrift, und weiß darauf wäre kaum zu lesen. */ color: var(--on-accent); border-color: transparent; font-weight: 600; } .btn-ai:hover { filter: brightness(1.09); box-shadow: 0 8px 20px -10px var(--accent-glow); } .btn-ai:disabled { filter: grayscale(0.7) opacity(0.5); box-shadow: none; } /* Das Funkeln trägt den Verlauf als Schrift-Füllung. Es steht im Reiter und im Knopf und ist das einzige, was diesen Abschnitt in einer Zeile aus sechs Reitern markiert. */ .ai-spark { background: var(--ai-vivid); -webkit-background-clip: text; background-clip: text; color: transparent; } .btn-ai .ai-spark { background: none; color: var(--on-accent); } /* Der eine Reiter, hinter dem keine Tabelle steht. Er trägt eine getönte Kante statt der grauen – gerade so viel, dass das Auge ihn in einer Zeile aus sieben Reitern zuerst findet, und nicht so viel, dass er wie ein Alarm aussieht. */ .an-tabs button.ai-tab { border-color: color-mix(in srgb, var(--ai-b2) 42%, transparent); } .an-tabs button.ai-tab:hover { background: color-mix(in srgb, var(--ai-b2) 10%, transparent); } .an-tabs button.ai-tab.active { border-color: color-mix(in srgb, var(--ai-b2) 62%, transparent); background: color-mix(in srgb, var(--ai-b2) 13%, var(--panel-raised)); } .an-tabs button.active .ai-spark { background: var(--ai-vivid); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Die Karte. Der Verlauf liegt als ein Pixel breiter Rand darunter – ein gefüllter Kasten wäre in einem Bericht aus Tabellen ein Fremdkörper, ein leuchtender Rand ist eine Auszeichnung. Während das Modell schreibt, wandert er. */ .ai-hero { border-radius: var(--radius); padding: 1px; background: var(--ai-vivid); background-size: 220% 220%; box-shadow: 0 16px 40px -26px color-mix(in srgb, var(--ai-b2) 75%, transparent); } .ai-hero.busy { animation: ai-flow 4.5s linear infinite; } .ai-hero-in { border-radius: calc(var(--radius) - 1px); /* Ein Schimmer aus der oberen rechten Ecke. Er ist der Grund, warum die Karte auch ohne gefüllten Rahmen als eigener Bereich gelesen wird – eine Fläche in Panelfarbe mit einem Strich drumherum wäre nur ein Kasten mehr. */ background: radial-gradient(130% 90% at 100% 0%, color-mix(in srgb, var(--ai-b2) 13%, transparent) 0%, transparent 62%), radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--ai-c2) 9%, transparent) 0%, transparent 58%), var(--panel-raised); padding: 15px 16px; display: flex; flex-direction: column; gap: 13px; } @keyframes ai-flow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .ai-head { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; } .ai-avatar { width: 37px; height: 37px; border-radius: 11px; flex: none; background: var(--ai-vivid); color: var(--on-accent); display: grid; place-items: center; box-shadow: 0 7px 18px -8px color-mix(in srgb, var(--ai-b2) 80%, transparent); } .ai-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 200px; } .ai-name { font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; } .ai-sub { font-size: 10.5px; color: var(--text-dim); } /* Was der Assistent tut, in drei Worten je Plakette. Steht nur im leeren Zustand: Wer den Text vor sich hat, braucht das Versprechen nicht mehr. */ .ai-caps { display: flex; gap: 6px; flex-wrap: wrap; } .ai-cap { font-size: 10.5px; padding: 3px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ai-a) 35%, transparent); background: color-mix(in srgb, var(--ai-a) 8%, transparent); color: var(--text-dim); } /* Der Befund selbst. Der erste Satz ist das Gesamturteil und steht deshalb größer und in der Schrift der Oberfläche – er ist die Zeile, die auch liest, wer sonst nichts liest. Die Befunde darunter tragen einen Punkt im Verlauf statt eines Strichs. */ .ai-lead { margin: 0; max-width: 80ch; font-family: var(--font-ui); font-size: 14.5px; line-height: 1.5; font-weight: 600; color: var(--text); letter-spacing: -0.01em; } .ai-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .ai-point { display: flex; gap: 10px; max-width: 92ch; font-size: 12.5px; line-height: 1.62; color: var(--text); } .ai-point::before { content: ""; width: 6px; height: 6px; border-radius: 50%; margin-top: 7px; flex: none; background: var(--ai-vivid); } .ai-para { margin: 0; max-width: 92ch; font-size: 12.5px; line-height: 1.62; color: var(--text-dim); } /* Der Schreibbalken am Textende. Er ist das Einzige, was sagt, dass noch etwas kommt – ohne ihn liest sich ein halber Satz wie ein abgebrochener. */ .ai-caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -0.15em; background: var(--ai-b); animation: ai-blink 1.05s step-end infinite; } @keyframes ai-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } /* Denkt das Modell, kommt noch kein Wort. Drei laufende Punkte sagen das besser als ein Kreisel, der auch beim Laden einer Tabelle steht. */ .ai-status { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-dim); } .ai-dots { display: inline-flex; gap: 4px; } .ai-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ai-b); animation: ai-bounce 1.25s ease-in-out infinite; } .ai-dots i:nth-child(2) { animation-delay: .16s; } .ai-dots i:nth-child(3) { animation-delay: .32s; } @keyframes ai-bounce { 0%, 60%, 100% { opacity: .28; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } /* Die Fußzeile: das Modell als Plakette und daneben der Satz, der sagt, was dieser Text ist und was er nicht ist. Er bleibt stehen, auch wenn der Abschnitt jetzt schöner aussieht – gerade dann. */ .ai-foot { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; padding-top: 2px; border-top: 1px solid var(--line); } .ai-model { display: inline-flex; align-items: center; gap: 6px; flex: none; font-family: var(--font-mono); font-size: 10px; padding: 3px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ai-a) 35%, transparent); background: color-mix(in srgb, var(--ai-a) 8%, transparent); color: var(--text-dim); } .ai-model::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ai-vivid); flex: none; } .ai-note { flex: 1 1 320px; min-width: 0; margin: 0; font-size: 10.5px; line-height: 1.5; color: var(--text-faint); } .ai-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* Die Faktentafel unter dem Text. Klein, einfarbig und rollend: Sie ist der Beleg und nicht der Inhalt – wer sie aufmacht, sucht eine bestimmte Zahl und liest sie nicht von oben. */ .an-fi-facts { margin: 0; padding: 8px 10px; max-height: 320px; overflow: auto; background: var(--panel-inset); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 10.5px; line-height: 1.5; color: var(--text-dim); white-space: pre; } @media (prefers-reduced-motion: reduce) { .ai-hero.busy, .ai-caret, .ai-dots i { animation: none; } } /* Aufklappbare Blöcke je Signal: die Zahl steht in der Kopfzeile, die Liste dahinter. Bei acht Signalen mit je fünfundzwanzig Zeilen wäre der Bericht sonst eine Rolle. */ .an-det { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-raised); } .an-det > summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 9px; cursor: pointer; font-size: 12px; list-style: none; } .an-det > summary::-webkit-details-marker { display: none; } .an-det > summary::before { content: "▸"; color: var(--text-faint); font-size: 10px; flex: none; } .an-det[open] > summary::before { content: "▾"; } .an-det > summary:hover { background: var(--panel-inset); border-radius: var(--radius-sm); } .an-det > .table-wrap { padding: 0 9px 9px; } .an-det > .an-foot { padding: 0 9px 9px; } /* Befunde der Plausibilisierung: je Regel eine Zeile, damit „12× über 100 %“ und „3× zu schnell geändert“ nicht zu einem Satz verkleben. */ .an-findings { display: flex; flex-direction: column; gap: 2px; white-space: normal; } .an-finding { font-size: 11.5px; line-height: 1.45; } /* Der Balken zeigt den Betrag von r. Er steht neben der Zahl und nicht statt ihr: die Länge ist zum Vergleichen da, die Zahl zum Ablesen. */ .an-bar { display: inline-block; width: 54px; height: 6px; border-radius: 3px; background: var(--panel-inset); overflow: hidden; vertical-align: middle; } .an-bar > span { display: block; height: 100%; border-radius: 3px; } .an-corr-strong { background: var(--accent); } .an-corr-mid { background: color-mix(in srgb, var(--accent) 60%, var(--text-faint)); } .an-corr-weak { background: var(--text-faint); } /* ---------- Zusammenhänge: Filter, Zeilen, Punktwolke ---------- */ .an-corr-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; } .an-corr-field { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; color: var(--text-dim); } .an-corr-field .input, .an-corr-field .select { height: 29px; font-size: 12px; } .an-corr-search { flex: 1 1 260px; max-width: 380px; } .an-corr-count { font-size: 11px; color: var(--text-dim); padding-bottom: 6px; } /* Die Zeile ist der Schalter für ihre Wolke – der Pfeil sagt es, bevor man es probiert. */ .an-corr-table tbody tr.an-corr-row { cursor: pointer; } .an-corr-table tbody tr.an-corr-row:hover { background: var(--panel-raised); } .an-corr-table tbody tr.an-corr-row.open { background: color-mix(in srgb, var(--accent) 9%, transparent); } .an-corr-caret { display: inline-block; width: 12px; margin-right: 4px; font-size: 9px; color: var(--text-faint); transition: transform .15s; } .an-corr-row.open .an-corr-caret { transform: rotate(90deg); color: var(--accent); } .an-corr-table tbody tr.an-corr-detail > td { padding: 8px 8px 12px; white-space: normal; background: var(--panel-inset); } /* Die Tabelle ist breiter als ihr Panel (die Zellen brechen nicht um), und die Detailzeile ist so breit wie die Tabelle. Ohne sticky und feste Breite lag die Zahlenspalte rechts außerhalb des Sichtbaren; so bleibt die Wolke samt Zahlen links im Blick, auch wenn die Tabelle seitlich gerollt ist. */ .an-corr-wrap { container-type: inline-size; } .an-scatter { position: sticky; left: 0; width: min(790px, calc(100cqw - 16px)); display: grid; grid-template-columns: minmax(0, 540px) 230px; gap: 14px; align-items: start; } .an-scatter-plot { min-width: 0; } .an-scatter-plot svg { display: block; width: 100%; height: auto; } .an-scatter-side { display: flex; flex-direction: column; gap: 9px; font-size: 11.5px; } .an-sc-grid { stroke: var(--line); stroke-width: 1; } .an-sc-frame { fill: none; stroke: var(--line-strong); stroke-width: 1; } .an-sc-tick { font-family: var(--font-mono); font-size: 10px; fill: var(--text-faint); } .an-sc-axis { font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; fill: var(--text-dim); } .an-sc-pt { fill-opacity: .62; } /* Früh nach spät in fünf Stufen, von der Info- zur Warnfarbe – dieselbe Rampe wie in der Legende. */ .an-sc-t0 { fill: var(--info); } .an-sc-t1 { fill: color-mix(in srgb, var(--info) 75%, var(--warn)); } .an-sc-t2 { fill: color-mix(in srgb, var(--info) 50%, var(--warn)); } .an-sc-t3 { fill: color-mix(in srgb, var(--info) 25%, var(--warn)); } .an-sc-t4 { fill: var(--warn); } .an-sc-fit { stroke: var(--text); stroke-width: 1.6; stroke-dasharray: 6 4; opacity: .85; } .an-sc-facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; } .an-sc-facts dt { color: var(--text-dim); } .an-sc-facts dd { margin: 0; } .an-sc-eq { white-space: normal; word-break: break-word; font-size: 11px; } .an-sc-legend { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--text-dim); } .an-sc-ramp { flex: 1; max-width: 120px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--info), var(--warn)); } .an-sc-note { font-size: 10.5px; line-height: 1.45; color: var(--text-faint); } @media (max-width: 900px) { .an-scatter { grid-template-columns: 1fr; } } /* ===================================================================== Fahrzeugbilder --------------------------------------------------------------------- Die Aufnahmen des Katalogs sind Studiorenderings vor dunklem Verlauf, alle im Verhaeltnis 3:2. Deshalb steht das Verhaeltnis hier fest und nicht die Hoehe: ein Bild, das seine Zeile mal 24 und mal 31 Pixel hoch macht, laesst eine Liste flackern. Der eigene Upload wird im Browser auf dasselbe Mass beschnitten (js/vehicleimage.js). Auf hellen Themes trägt das Bild einen eigenen dunklen Grund: die Renderings haben keinen freigestellten Hintergrund, und ein dunkler Kasten auf weissem Panel sieht ohne Rahmen wie ein Ladefehler aus. ===================================================================== */ .veh-img { position: relative; flex: none; display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel-inset); } .veh-img > img { width: 100%; height: 100%; object-fit: cover; display: block; } .veh-img-xs { width: 40px; } .veh-img-sm { width: 56px; } /* Fuer Listen, in denen das Bild zum Wiedererkennen da ist und nicht als Beiwerk neben der Kennung steht - der Fahrzeugbestand. Bei 40 Pixeln ist ein Kombi von einem Transporter nicht zu unterscheiden; bei 96 schon, und die Zeile bleibt mit 64 Pixeln Hoehe noch eine Tabellenzeile und keine Karte. */ .veh-img-list { width: 96px; } .veh-img-md { width: 132px; } .veh-img-lg { width: 200px; } /* Fuellt die Breite des Kastens - fuer Karten und Panels, wo das Bild die Ueberschrift trägt statt sie zu begleiten. */ .veh-img-card { width: 100%; } /* Kein Bild: die Kontur sitzt mittig und bleibt zurueckhaltend. Sie soll sagen „hier gehört ein Fahrzeug hin", nicht um Aufmerksamkeit bitten. */ /* Die Strichzeichnung: nur noch in der Katalogverwaltung, wo sie eine leere Kachel markiert. Als Platzhalter fuer ein Fahrzeug wurde sie durch ein Foto ersetzt - siehe .veh-img-mock. */ .veh-img-empty { display: grid; place-items: center; color: var(--text-faint); } .veh-img-empty > svg { width: 62%; height: 62%; opacity: .55; } /* Der Platzhalter: ein verhuelltes Fahrzeug. Er traegt dieselben Regeln wie ein echtes Bild (.veh-img > img), damit sich Zuschnitt und Rahmen nicht unterscheiden - ein Platzhalter, der anders sitzt als die Bilder daneben, faellt in einer Liste mehr auf als das fehlende Bild selbst. Der Unterschied steckt nur im Tooltip und, bei genauem Hinsehen, im Bild: Ein Fahrzeug unter einer Plane ist erkennbar kein Modellfoto. Bewusst NICHT abgedunkelt oder ausgegraut: Das saehe aus wie ein Ladefehler, und genau davon kommt diese Aenderung. Deshalb steht hier auch KEINE eigene Regel. Die Klasse .veh-img-mock gibt es trotzdem im Markup: Sie sagt beim Lesen der Seite und beim Pruefen, dass dieses Bild ein Platzhalter ist - eine Auskunft, die man aus der Bildadresse sonst erst heraussuchen muesste. */ /* Von Hand gesetzt: eine angeschnittene Ecke oben rechts. Kein Text und kein Symbol - in einer 40 Pixel breiten Kachel waere beides unlesbar. */ .veh-img-pin { position: absolute; top: 0; right: 0; width: 0; height: 0; border-top: 9px solid var(--accent); border-left: 9px solid transparent; opacity: .85; } /* Anklickbar: das Bild ist in Listen zugleich der Weg in den Auswahldialog. */ .veh-img-btn { cursor: pointer; padding: 0; background: none; } .veh-img-btn:hover .veh-img { border-color: var(--accent); } .veh-img-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* ---------- Auswahldialog ---------- */ .vip { display: flex; flex-direction: column; gap: 14px; } .vip-now { display: flex; gap: 16px; align-items: flex-start; } .vip-now-title { font-family: var(--font-ui); font-size: 14.5px; line-height: 1.3; } /* Was die VIN hergibt: zwei Spalten, damit die Beschriftungen untereinander stehen und sich die Zeilen mit einem Blick abtasten lassen. */ .vip-vin { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin-top: 6px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-inset); font-size: 11.5px; } .vip-vin-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; } .vip-vin-v { font-family: var(--font-mono); word-break: break-word; } .vip-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Der Hinweis auf die Reichweite steht rechts aussen und leise: er korrigiert eine Erwartung, er ist keine Warnung. */ .vip-scope { margin-left: auto; font-size: 11px; } .vip-filter { display: flex; gap: 8px; align-items: center; } .vip-filter .input { flex: 1; min-width: 0; } .vip-filter .select { width: 170px; flex: none; } .vip-group { margin-top: 2px; } .vip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; } .vip-card { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-raised); overflow: hidden; cursor: pointer; transition: border-color .12s, transform .05s; } .vip-card:hover { border-color: var(--accent); } .vip-card:active { transform: scale(.99); } .vip-card.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .vip-card > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; background: var(--panel-inset); } .vip-card-body { padding: 7px 9px; display: flex; flex-direction: column; gap: 1px; min-width: 0; } .vip-card-name { font-size: 12px; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Die Herkunftsmarke an nachgepflegten Modellen. Klein und blass: sie ist eine Randnotiz zur Kachel und nicht deren Aussage - die steht im Bild. */ .vip-card-src { margin-left: 5px; padding: 0 4px; border: 1px solid var(--line); border-radius: 3px; font-size: 9px; font-weight: 500; color: var(--text-faint); vertical-align: 1px; } /* Die zweite Zeile trägt bei den Vorschlaegen die Begruendung und im Katalog die volle Bezeichnung. Zwei Zeilen Platz, danach abgeschnitten - drei Zeilen machten aus dem Raster eine Liste. */ .vip-card-hint { font-size: 10.5px; color: var(--text-dim); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vip-more { font-size: 11.5px; text-align: center; padding: 6px 0 2px; } /* ---------- Fahrzeugliste, Dashboard, Live-Board ---------- */ /* Die Spalte mit dem Bild trägt keine Ueberschrift und soll auch keine Breite verhandeln: sie ist so breit wie das Bild plus Zellenrand. */ table.data td.cell-img, table.data th.cell-img { width: 1%; padding-right: 0; } /* Auf dem Dashboard sitzt das Bild vor der Kennung. Die Zeile wird dadurch hoeher als vorher - das ist beabsichtigt: eine Statuskachel mit zwanzig 20-Pixel-Zeilen liest niemand, mit acht Fahrzeugen samt Bild schon. */ .veh-row .veh-img { margin-right: 2px; } .veh-row-lead { display: flex; align-items: center; gap: 9px; min-width: 0; } /* Im Gruppenkopf des Live-Boards steht das Bild vor dem Namen des Ordners. Klein genug, dass der Kopf einzeilig bleibt. */ .bg-head .veh-img { margin-right: 2px; } /* ===================================================================== Kommunikation: Antwortzeiten der Steuergeräte --------------------------------------------------------------------- Die Ansicht beantwortet zwei Fragen, und die Gestaltung hält sie getrennt: was üblich ist (Kennzahlen, Verteilung – ruhig, einfarbig) und was herausfällt (Zeitverlauf, Liste – und nur dort Rot). Die Farben sind deshalb streng verteilt: --text-faint für den Normalfall, --warn für „zäh, aber unter der Schwelle“, --fault für Ausreißer und verdrehte Uhren. Kein Grün für „in Ordnung“ außer im Häkchen der leeren Befundliste: eine Fläche in Grün neben einer in Rot liest sich als Wertung, und die meisten Antwortzeiten sind einfach nur unauffällig. ===================================================================== */ /* Die Ausreißerschwelle in der Kopfzeile des Panels – dasselbe Maß wie die Schwellen der Signalauswertung (.an-f), damit der Wechsel zwischen den beiden Reitern die Kopfzeile nicht umbaut. */ .ct-f { margin: 0; width: 152px; flex: none; } /* Nur der Bericht rollt, nicht die Seite: die Zeitreihenseite bindet ihre Höhe an das Fenster (.ts-page), und ein Reiter, der sie sprengt, schiebt Kopf- und Auswahlleiste aus dem Bild. Gleiche Lösung wie in der Signalauswertung. */ .ct-body { display: flex; flex-direction: column; gap: 18px; min-width: 0; min-height: 0; flex: 1; overflow: auto; padding-right: 2px; } /* ---------- Kennzahlen ---------- */ /* Auto-fit statt fester Spaltenzahl: die Reihe trägt sechs oder sieben Kacheln, je nachdem, ob verdrehte Uhren vorkommen. */ .ct-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 8px; } .ct-kpi { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 9px 11px; background: var(--panel-inset); border: 1px solid var(--line); border-left-width: 3px; border-left-color: var(--line-strong); border-radius: var(--radius-sm); } /* Die Kante links trägt die Wertung, nicht die Fläche: sechs verschieden getönte Kacheln nebeneinander wären ein Farbmuster und keine Auskunft. */ .ct-kpi.ok { border-left-color: var(--ok); } .ct-kpi.warn { border-left-color: var(--warn); } .ct-kpi.alarm { border-left-color: var(--fault); } .ct-kpi-k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; } .ct-kpi-v { font-family: var(--font-ui); font-size: 19px; font-weight: 700; line-height: 1.15; color: var(--text); font-variant-numeric: tabular-nums; } /* Die dritte Zeile sagt, was die Zahl bedeutet – „19 von 20 sind schneller“ erklärt p95 besser als jede Legende daneben. Zwei Zeilen Platz, dann abgeschnitten: die Kachelhöhe darf nicht am Namen der langsamsten Abfrage hängen. */ .ct-kpi-n { font-size: 10.5px; line-height: 1.3; color: var(--text-faint); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- Abschnitte ---------- */ .ct-sec { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .ct-sec-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .ct-sec-head h4 { margin: 0; font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; } /* Der Kurzhinweis rechts neben der Abschnittsüberschrift. Eigene Klasse und nicht "span": die Legende des Zeitverlaufs ist ebenfalls ein span an dieser Stelle und trägt ihre eigene Größe. */ .ct-sec-head .ct-hint { font-size: 11px; color: var(--text-dim); } /* Der erklärende Satz unter jedem Abschnitt. Er steht bewusst da: eine Kennzahl ohne diesen Satz ist eine Zahl, die geglaubt wird, statt gelesen zu werden. */ .ct-note { margin: 0; max-width: 92ch; font-size: 11px; line-height: 1.55; color: var(--text-faint); } .ct-warn, .ct-clean { display: flex; align-items: flex-start; gap: 9px; padding: 8px 11px; border-radius: var(--radius-sm); font-size: 11.5px; line-height: 1.5; color: var(--text-dim); } .ct-warn { background: color-mix(in srgb, var(--warn) 9%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); } .ct-clean { background: var(--panel-inset); border: 1px solid var(--line); } .ct-mark { flex: none; font-size: 12px; line-height: 1.4; } .ct-mark.ok { color: var(--ok); } .ct-mark.warn { color: var(--warn); } .ct-mark.slow { color: var(--warn); } .ct-mark.outlier { color: var(--fault); } .ct-mark.reversed { color: var(--fault); } /* ---------- Legende des Zeitverlaufs ---------- */ .ct-legend { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-left: auto; font-size: 10.5px; color: var(--text-dim); } .ct-lg { width: 10px; height: 2px; border-radius: 1px; flex: none; margin-left: 6px; } .ct-lg:first-child { margin-left: 0; } .ct-lg.normal { background: var(--text-faint); } .ct-lg.slow { background: var(--warn); } .ct-lg.outlier { background: var(--fault); height: 3px; } .ct-lg.reversed { background: var(--fault); opacity: .4; } /* ---------- Zeitverlauf ---------- */ /* Zwei Spalten: links die Höhenachse als Text, rechts die Zeichenfläche. Der Text steht außerhalb des SVG, weil das SVG ungleich skaliert wird (preserveAspectRatio="none") – Schrift darin würde in die Breite gezogen. */ .ct-plot { display: grid; grid-template-columns: 52px 1fr; gap: 0 8px; } .ct-plot-scale { position: relative; } .ct-plot-lab { position: absolute; right: 0; transform: translateY(-50%); font-family: var(--font-mono); font-size: 9.5px; white-space: nowrap; color: var(--text-faint); } /* Median und Schwelle in den Farben ihrer Linien im Diagramm – ohne diese Zuordnung sind es drei Zahlen am Rand, von denen man nicht weiß, welche zu welcher Linie gehört. */ .ct-plot-lab.med { color: var(--accent); } .ct-plot-lab.thr { color: var(--warn); } .ct-plot-area { position: relative; min-width: 0; } .ct-plot-svg { display: block; width: 100%; height: 170px; background: var(--panel-inset); border: 1px solid var(--line); border-radius: var(--radius-sm); } /* Die Marke über einem Ausreißer. Ein einzelner Ausschlag in einem Bild mit tausend Nadeln ist sonst genau das, was man übersieht – und er ist der Grund, warum man das Bild ansieht. Als Dreieck am oberen Rand, weil die Nadel selbst in der Fläche steckt und die Marke darüber hinausragen soll. */ .ct-flag { position: absolute; top: -1px; transform: translateX(-50%); width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid var(--fault); cursor: help; } .ct-flag.rev { opacity: .5; } .ct-plot-x { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-left: 60px; font-family: var(--font-mono); font-size: 9.5px; color: var(--text-faint); } .ct-plot-span { color: var(--text-dim); } /* ---------- Verteilung und Auffälligkeiten nebeneinander ---------- */ /* Sie beantworten die Gegenfrage zueinander – „wie breit ist das übliche Feld“ und „was liegt außerhalb“. Untereinander wäre zwischen ihnen eine Rolle. */ .ct-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); gap: 20px; } @media (max-width: 1000px) { .ct-split { grid-template-columns: 1fr; } } .ct-hist { display: flex; align-items: flex-end; gap: 2px; height: 104px; padding: 6px 8px; background: var(--panel-inset); border: 1px solid var(--line); border-radius: var(--radius-sm); } /* min-height, damit ein Balken mit einem einzigen Wert nicht unsichtbar ist: „kommt einmal vor“ ist eine andere Auskunft als „kommt nicht vor“. */ .ct-hist-bar { flex: 1; min-width: 0; min-height: 2px; border-radius: 1.5px 1.5px 0 0; background: var(--accent); opacity: .85; cursor: help; } .ct-hist-bar:hover { opacity: 1; } /* Der Sammelbalken rechts trägt alles über der Skala – er ist keine weitere Klasse von Antwortzeiten, sondern der Rest, und steht deshalb gestreift statt gefüllt. */ .ct-hist-bar.over { background: repeating-linear-gradient(45deg, var(--fault) 0 3px, transparent 3px 6px); border: 1px solid color-mix(in srgb, var(--fault) 50%, transparent); border-bottom: none; flex: 0 0 14px; margin-left: 6px; } .ct-hist-x { display: flex; justify-content: space-between; gap: 8px; font-family: var(--font-mono); font-size: 9.5px; color: var(--text-faint); } .ct-hist-over { color: var(--fault); } /* ---------- Liste der Auffälligkeiten ---------- */ /* Rollt selbst, statt die Seite zu verlängern: dreißig Zeilen neben einem Diagramm von hundert Pixeln Höhe schöben sonst die Tabelle darunter außer Sicht. */ .ct-finds { display: flex; flex-direction: column; gap: 2px; max-height: 232px; overflow: auto; padding-right: 2px; } .ct-find { display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 10px; padding: 4px 8px; border-radius: 4px; border-left: 2px solid var(--fault); background: color-mix(in srgb, var(--fault) 7%, transparent); font-size: 11.5px; } .ct-find.reversed { border-left-style: dashed; background: color-mix(in srgb, var(--fault) 4%, transparent); } .ct-find-time { color: var(--text-dim); font-size: 10.5px; white-space: nowrap; cursor: help; } .ct-find-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ct-find-ms { font-weight: 600; color: var(--text); white-space: nowrap; } /* Der Faktor ist die Aussage der Zeile: „×340“ sagt mehr als „1360 ms“, weil 1360 ms für eine Fehlerspeicherabfrage normal und für einen Kilometerstand ein Aussetzer ist. */ .ct-find-fac { color: var(--fault); font-weight: 600; white-space: nowrap; cursor: help; } /* ---------- Plaketten ---------- */ .ct-tag, .ct-tag-ok { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 999px; font-family: var(--font-mono); font-size: 10px; white-space: nowrap; } .ct-tag.hot { color: var(--fault); background: color-mix(in srgb, var(--fault) 12%, transparent); } .ct-tag.rev { color: var(--fault); background: color-mix(in srgb, var(--fault) 8%, transparent); } .ct-tag.nrc { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); } /* Unauffällig heißt: ein Punkt. Kein „ok“, kein Häkchen, keine Farbe – in einer Tabelle mit dreißig Zeilen wäre dreißigmal „ok“ der lauteste Inhalt der Seite, und die eine Zeile mit dem Befund ginge darin unter. */ .ct-tag-ok { color: var(--text-faint); cursor: help; } /* ---------- Tabelle je Abfrageart ---------- */ /* Ohne eigene Höhenbegrenzung: der Bericht rollt als Ganzes (.ct-body). Zwei Rollbereiche übereinander sind beim Lesen einer langen Tabelle das Ärgerlichste, was man bauen kann – der äußere fängt das Rad, sobald der innere am Ende ist. Das waagerechte Rollen bringt .table-wrap schon mit; senkrecht wächst die Tabelle einfach mit ihren Zeilen. */ .ct-tw { max-height: none; } .ct-table { font-size: 12px; } .ct-table th, .ct-table td { padding: 6px 10px; } .ct-th-mark { width: 22px; padding-left: 8px; padding-right: 0; } .ct-th-bar { width: 120px; } .ct-th-trail { width: 92px; } .ct-table .ct-td-mark { text-align: center; padding-left: 8px; padding-right: 0; } /* Steuergerät und Abfrage in zwei Zeilen: „BMU“ und „SOH_PACK“ nebeneinander ergäben eine Spalte, die bei zwölf Zeichen Steuergerätename die halbe Tabelle einnimmt. Übereinander bleibt die Spalte schmal, und die Zuordnung ist trotzdem eindeutig. */ .ct-row-ecu { display: block; font-size: 11.5px; font-weight: 600; line-height: 1.25; } .ct-row-svc { display: block; font-size: 10.5px; color: var(--text-dim); line-height: 1.25; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Der Median ist die Zahl, wegen der man die Zeile liest – die übrigen sind ihr Rahmen. */ .ct-table .ct-td-med { color: var(--text); font-weight: 600; } .ct-table .ct-td-hot { color: var(--fault); font-weight: 600; } /* Die Zeile mit Befund wird nicht flächig eingefärbt, sondern nur an der Kante markiert: eine rote Fläche über acht Spalten macht ihre eigenen Zahlen unlesbar. */ .ct-table tbody tr.outlier > td:first-child, .ct-table tbody tr.reversed > td:first-child { box-shadow: inset 2px 0 0 var(--fault); } .ct-table tbody tr.outlier, .ct-table tbody tr.reversed { background: color-mix(in srgb, var(--fault) 5%, transparent); } /* Ein Balken mit zwei Marken statt dreier Balken: es ist eine Größe in drei Ausprägungen. Die Füllung reicht bis p95 („so weit reicht der Normalfall“), der Strich sitzt auf dem Median, die Raute auf dem Höchstwert. Bezugsgröße ist die langsamste Antwort der ganzen Tabelle – nur dann sind die Zeilen untereinander vergleichbar. */ .ct-scale { position: relative; display: block; height: 8px; min-width: 100px; background: var(--panel-inset); border-radius: 4px; cursor: help; } .ct-scale-fill { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 4px; } .ct-scale-med { position: absolute; top: -1px; bottom: -1px; width: 2px; margin-left: -1px; background: var(--accent); border-radius: 1px; } .ct-scale-max { position: absolute; top: 1px; width: 6px; height: 6px; margin-left: -3px; background: var(--text-faint); transform: rotate(45deg); } .ct-scale-max.hot { background: var(--fault); } .ct-table .ct-td-trail { padding: 2px 10px; } .ct-td-trail .sparkline { opacity: .9; } .ct-td-find { white-space: nowrap; } @media (max-width: 860px) { /* Auf schmalen Fenstern fallen Balken und Verlauf weg – sie sind der Vergleich zwischen den Zeilen, und der ist bei vier sichtbaren Spalten ohnehin nicht zu ziehen. Die Zahlen bleiben. */ .ct-th-bar, .ct-td-bar, .ct-th-trail, .ct-td-trail { display: none; } } /* ===================================================================== Kommunikation, zweite Ebene: Abschnitt, Zoom, Einzelansicht --------------------------------------------------------------------- Der Bericht beantwortet dieselbe Frage in drei Auflösungen, und die Gestaltung hält sie auseinander: der ABSCHNITT sagt, welches Stück überhaupt gelesen wird (ganz oben, waagerechter Streifen – eine Landkarte, kein Diagramm), der ZOOM zeigt die gelesenen Antworten genauer (im Bild selbst, mit Werkzeugen in seiner Kopfzeile), die EINZELANSICHT eine Abfrage für sich (als Auflage, weil sie den Bericht nicht ersetzt, sondern in ihn hineinsieht). Die Farbregel der Ansicht gilt weiter: --accent für das, was geladen ist, --warn für das, was eingestellt aber noch nicht gelesen ist, --fault nur für Befunde. ===================================================================== */ /* ---------- Abschnitt ---------- */ .ct-range { gap: 7px; } /* Der Streifen ist die ganze Spanne der gewählten Messungen. Zwei Marken darin, und ihr Unterschied ist die Aussage: satt gefüllt, was ausgewertet IST – umrissen, was eingestellt ist. Ohne diese Trennung sähe ein noch nicht geladener Entwurf aus wie eine Auskunft über Daten. */ .ct-range-strip { position: relative; height: 24px; overflow: hidden; background: var(--panel-inset); border: 1px solid var(--line); border-radius: var(--radius-sm); } .ct-range-win { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--accent) 26%, transparent); border-left: 1px solid var(--accent); border-right: 1px solid var(--accent); } .ct-range-edit { position: absolute; top: 2px; bottom: 2px; border: 1px dashed var(--warn); border-radius: 2px; background: color-mix(in srgb, var(--warn) 7%, transparent); } .ct-range-x { display: flex; justify-content: space-between; gap: 10px; font-family: var(--font-mono); font-size: 9.5px; color: var(--text-faint); } .ct-range-ctl { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; } .ct-range-ctl .field { margin: 0; gap: 3px; } .ct-range-ctl .field > label { font-size: 10.5px; } .ct-range-ctl .input, .ct-range-ctl .select { height: 30px; font-size: 12px; padding: 0 8px; } .ct-f-time { width: 196px; flex: none; } .ct-f-len { width: 132px; flex: none; } .ct-range-pager { display: flex; gap: 3px; flex: none; } /* ---------- Zeitverlauf: Wirt, Werkzeuge, Vollbild ---------- */ .ct-plot-host { display: flex; flex-direction: column; gap: 8px; min-width: 0; outline: none; } /* Die Werkzeuge des Bildes stehen in seiner eigenen Kopfzeile und nicht in der des Panels: dort steht die Ausreißerschwelle, die für den ganzen Bericht gilt. Ein Zoomknopf daneben ließe offen, was er zoomt. */ .ct-plot-tools { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-wrap: wrap; } .ct-plot-tools .btn { height: 26px; } .ct-plot-tools .btn-icon.btn-sm { width: 26px; } .ct-plot-tools + .ct-legend, .ct-legend + .ct-plot-tools { margin-left: 10px; } .ct-zoom-chip { height: 22px; color: var(--accent); border-color: var(--accent); } /* Die Bedienhinweise stehen unter dem Bild und nicht darin: im Bild wären sie eine Schrift über den Nadeln, und beim zweiten Ansehen liest sie niemand mehr. */ .ct-plot-hint { color: var(--text-faint); } /* Vollbild – dieselbe Auszeichnung, nur als Auflage über dem Fenster. Wie beim Signaldiagramm (.ts-chart-host.ts-fs) bleibt dabei dasselbe Bauteil im Baum und behält seinen Ausschnitt: ein zweites fürs Vollbild hätte den Zoom zurückgesetzt, den man gerade sehen will. Der z-Index liegt unter dem der Dialoge (100), damit die Einzelansicht darüber malt und nicht darunter. */ .ct-plot-host.ct-fs { position: fixed; inset: 0; z-index: 60; padding: 12px 14px; background: var(--bg); gap: 10px; } /* Die Zeile des Rasters muss ausdruecklich fuellen: ohne grid-template-rows ist die implizite Zeile inhaltsgross, und eine Hoehe von 100 Prozent darin bezoege sich auf sich selbst - das SVG blieb bei seinen 170 Pixeln. */ .ct-plot-host.ct-fs .ct-plot { flex: 1; min-height: 0; grid-template-rows: 1fr; } .ct-plot-host.ct-fs .ct-plot-area { min-height: 0; } .ct-plot-host.ct-fs .ct-plot-svg { height: 100%; } .ct-plot-host.ct-fs .ct-sec-head h4 { font-size: 15px; } /* Flacher für die Einzelansicht: dort trägt das Bild eine Abfrage und nicht zwanzigtausend Antworten – die halbe Höhe reicht, und der Dialog bleibt lesbar. */ .ct-plot-svg.sm { height: 118px; } /* ---------- Fadenkreuz und Zeiger ---------- */ /* In einem Bild aus tausend gleich aussehenden Nadeln ist der Zeiger der einzige Weg von einer Nadel zu der Abfrage, die sie erzeugt hat. */ .ct-cursor { position: absolute; top: 0; bottom: 0; width: 1px; margin-left: -0.5px; background: var(--accent); opacity: .8; pointer-events: none; z-index: 3; } .ct-tip { position: absolute; top: 6px; margin-left: 8px; z-index: 6; pointer-events: none; display: flex; flex-direction: column; gap: 2px; max-width: 260px; padding: 6px 9px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line-strong); box-shadow: var(--shadow); } /* Am rechten Rand klappt das Fenster auf die andere Seite – sonst stünde es zur Hälfte außerhalb des Bildes, und zwar genau dort, wo die jüngsten Antworten liegen. */ .ct-tip.flip { transform: translateX(-100%); margin-left: -8px; } .ct-tip-t { font-size: 10px; color: var(--text-dim); } .ct-tip-w { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ct-tip-v { font-size: 13px; font-weight: 600; color: var(--text); } .ct-tip-v.slow { color: var(--warn); } .ct-tip-v.outlier, .ct-tip-v.reversed { color: var(--fault); } /* Auswahlrechteck beim Aufziehen – von charts.js eingehängt, damit es der Maus ohne Umweg über den Server folgt. Die Regel liegt hier und nicht mehr im Signaldiagramm, weil sie inzwischen zwei Bilder betrifft: eine Auszeichnung, die von einem Bauteil ins DOM gesetzt wird, kann nicht in dessen eigenem