/* =========================================================================== IPRAW Analyzer – Design-System --------------------------------------------------------------------------- Liegt ÜBER Bootstrap 5.3 und setzt dessen eigene Custom Properties mit, damit Bootstrap-Komponenten (Modal, Dropdown, Offcanvas, Toast …) das Thema ohne Extraarbeit übernehmen. Reihenfolge im : vendor/bootstrap/bootstrap.min.css vendor/bootstrap-icons/bootstrap-icons.css assets/css/ipraw-theme.css <-- diese Datei (danach erst seitenspezifisches CSS) Dark ist Standard. Umschaltung über [data-bs-theme] am -Element, gesetzt von assets/js/ipraw-theme.js noch vor dem ersten Rendern. =========================================================================== */ /* --------------------------------------------------------------------------- 1 TOKENS --------------------------------------------------------------------------- */ :root { /* Schrift ------------------------------------------------------------- */ --ip-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Liberation Sans", Arial, sans-serif; --ip-font-display: "Teko", var(--ip-font-body); --ip-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace; --ip-text-xs: 0.75rem; --ip-text-sm: 0.8125rem; --ip-text-base: 0.9375rem; --ip-text-lg: 1.0625rem; /* Raster – 4px-Basis --------------------------------------------------- */ --ip-1: 0.25rem; --ip-2: 0.5rem; --ip-3: 0.75rem; --ip-4: 1rem; --ip-5: 1.5rem; --ip-6: 2rem; --ip-7: 3rem; --ip-radius-sm: 4px; --ip-radius: 8px; --ip-radius-lg: 12px; --ip-sidebar-w: 252px; --ip-sidebar-w-collapsed: 76px; --ip-topbar-h: 76px; --ip-transition: 160ms cubic-bezier(0.4, 0, 0.2, 1); /* Semantische Farben, unabhängig vom Thema ----------------------------- */ --ip-signal: #4da6ff; /* Markenblau, Primäraktion */ --ip-signal-deep: #1f7fe0; --ip-ok: #35c98d; --ip-warn: #f0a02a; --ip-alert: #ff5d6c; --ip-trace: #b98cff; /* Geo / zweite Datenreihe */ --ip-neutral: #7b8fa3; /* Zweite Zeile der Wortmarke. Bewusst ein gedeckter Terracotta-Ton und nicht --ip-alert: das Signalrot kennzeichnet in der Oberflaeche Fehler und Auffaelligkeiten. Ein gedecktes Rot bleibt davon unterscheidbar. */ --ip-brand-sub: #c2726f; color-scheme: dark; } /* --- Dunkel (Standard) ----------------------------------------------------- */ :root, [data-bs-theme="dark"] { --ip-void: #0b131c; --ip-surface: #121c27; --ip-surface-raised: #18242f; --ip-surface-sunken: #0e1721; --ip-line: #23323f; --ip-line-strong: #33475a; --ip-ink: #e2eaf2; --ip-ink-dim: #93a7bb; --ip-ink-faint: #64798e; --ip-shadow: 0 1px 2px rgb(0 0 0 / 0.35), 0 4px 16px rgb(0 0 0 / 0.25); --ip-shadow-lg: 0 12px 40px rgb(0 0 0 / 0.45); --ip-glow: 0 0 0 3px rgb(77 166 255 / 0.22); color-scheme: dark; /* Bootstrap mitziehen */ --bs-body-bg: var(--ip-void); --bs-body-color: var(--ip-ink); --bs-border-color: var(--ip-line); --bs-secondary-color: var(--ip-ink-dim); --bs-tertiary-bg: var(--ip-surface-raised); --bs-emphasis-color: #fff; --bs-link-color: var(--ip-signal); --bs-link-hover-color: #7cc0ff; --bs-primary: var(--ip-signal); --bs-primary-rgb: 77, 166, 255; --bs-code-color: var(--ip-trace); } /* --- Hell ------------------------------------------------------------------ */ [data-bs-theme="light"] { --ip-void: #eef2f6; --ip-surface: #ffffff; --ip-surface-raised: #ffffff; --ip-surface-sunken: #f5f8fb; --ip-line: #dce4ec; --ip-line-strong: #c2cfdc; --ip-ink: #16202b; --ip-ink-dim: #55697d; --ip-ink-faint: #7b8fa3; --ip-signal: #1878d4; --ip-signal-deep: #10599f; --ip-ok: #158a5f; --ip-warn: #b57209; --ip-alert: #d33b4a; --ip-trace: #7c4fd4; --ip-brand-sub: #a2544f; --ip-shadow: 0 1px 2px rgb(16 32 48 / 0.06), 0 4px 14px rgb(16 32 48 / 0.07); --ip-shadow-lg: 0 16px 44px rgb(16 32 48 / 0.16); --ip-glow: 0 0 0 3px rgb(24 120 212 / 0.18); color-scheme: light; --bs-body-bg: var(--ip-void); --bs-body-color: var(--ip-ink); --bs-border-color: var(--ip-line); --bs-secondary-color: var(--ip-ink-dim); --bs-tertiary-bg: var(--ip-surface-sunken); --bs-emphasis-color: #000; --bs-link-color: var(--ip-signal); --bs-link-hover-color: var(--ip-signal-deep); --bs-primary: var(--ip-signal); --bs-primary-rgb: 24, 120, 212; } /* --------------------------------------------------------------------------- 2 GRUNDLAGEN --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; font-family: var(--ip-font-body); font-size: var(--ip-text-base); line-height: 1.55; color: var(--ip-ink); background: var(--ip-void); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Thema-Wechsel weich, aber ohne dass jedes Hover-Event mitzieht */ body, .ip-card, .ip-sidebar, .ip-topbar, .modal-content, .table { transition: background-color var(--ip-transition), border-color var(--ip-transition); } h1, h2, h3, h4, h5, h6, .ip-display { font-family: var(--ip-font-display); font-weight: 500; letter-spacing: 0.01em; line-height: 1.15; color: var(--ip-ink); margin: 0 0 var(--ip-3); } h1 { font-size: 2rem; } h2 { font-size: 1.625rem; } h3 { font-size: 1.375rem; } a { color: var(--ip-signal); text-decoration: none; } a:hover { color: var(--ip-signal); text-decoration: underline; text-underline-offset: 2px; } code, kbd, samp, pre, .ip-mono { font-family: var(--ip-font-mono); font-size: 0.9em; font-variant-numeric: tabular-nums; } /* IP-Adressen, Ports, Hashes: immer Mono mit fester Ziffernbreite, damit Werte in Listen sauber untereinander stehen. */ .ip-addr, .ip-port, .ip-hash, td.ip-num, .ip-num { font-family: var(--ip-font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } hr { border: 0; border-top: 1px solid var(--ip-line); opacity: 1; margin: var(--ip-5) 0; } /* Sichtbarer Fokus – Pflicht für Tastaturbedienung */ :focus-visible { outline: 2px solid var(--ip-signal); outline-offset: 2px; border-radius: var(--ip-radius-sm); } ::selection { background: rgb(77 166 255 / 0.3); } /* Bildlaufleisten passend zum Thema */ * { scrollbar-width: thin; scrollbar-color: var(--ip-line-strong) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--ip-line-strong); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--ip-ink-faint); background-clip: content-box; } /* Für Screenreader, optisch versteckt */ .ip-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* --------------------------------------------------------------------------- 3 LAYOUT: SEITENLEISTE --------------------------------------------------------------------------- */ .ip-sidebar, .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--ip-sidebar-w); z-index: 1030; display: flex; flex-direction: column; background: var(--ip-surface); border-right: 1px solid var(--ip-line); overflow-y: auto; overscroll-behavior: contain; padding: 0; } /* --- Wortmarke ------------------------------------------------------------ Zweizeiliger Aufbau: "IPraw" gross, "ANALYZER" gesperrt darunter. Das ist in einer 252px breiten Leiste kompakter als nebeneinander und laesst der Bildmarke Luft. Die Sperrung der Unterzeile ist so gewaehlt, dass sie ungefaehr auf die Breite von "IPraw" kommt. -------------------------------------------------------------------------- */ .ip-brand { display: flex; align-items: center; gap: 0.625rem; flex-shrink: 0; color: var(--ip-ink); text-decoration: none; white-space: nowrap; } .ip-brand:hover { color: var(--ip-ink); text-decoration: none; } .ip-brand:hover .ip-brand-mark { color: var(--ip-ink-dim); } .ip-brand-mark { flex-shrink: 0; color: var(--ip-ink-faint); transition: color var(--ip-transition); } .ip-brand-text { display: flex; flex-direction: column; line-height: 1; min-width: 0; } .ip-brand-name { font-family: var(--ip-font-display); font-weight: 600; letter-spacing: 0.005em; /* Teko traegt reichlich Luft unter der Grundlinie mit. Ohne das Kuerzen steht die Unterzeile spuerbar zu tief. */ line-height: 0.82; color: var(--ip-ink); } .ip-brand-name em { font-style: normal; color: var(--ip-signal); } .ip-brand-sub { font-family: var(--ip-font-display); font-weight: 500; line-height: 1; text-transform: uppercase; color: var(--ip-brand-sub); } /* Massstab: Seitenleiste. Beide Zeilen und die Bildmarke skalieren gemeinsam – wird nur die Schrift groesser, wirkt das Symbol daneben verloren. Die Sperrung der Unterzeile bleibt im selben Verhaeltnis, damit "ANALYZER" weiter buendig unter "IPraw" steht. */ .ip-brand--sm { height: var(--ip-topbar-h); padding: 0 var(--ip-4); gap: 0.8rem; } .ip-brand--sm .ip-brand-name { font-size: 2.2rem; } .ip-brand--sm .ip-brand-sub { font-size: 0.95rem; letter-spacing: 0.297em; margin-top: 2px; margin-right: -0.297em; } /* Massstab: Anmeldeseite */ .ip-brand--lg { gap: 1rem; } .ip-brand--lg .ip-brand-name { font-size: clamp(3rem, 6vw, 4.25rem); } .ip-brand--lg .ip-brand-sub { font-size: clamp(0.95rem, 1.5vw, 1.28rem); letter-spacing: 0.395em; margin-top: 0.1rem; /* Sperrung haengt rechts nach – ausgleichen, damit die Unterzeile buendig unter dem N von IPraw beginnt und endet. */ margin-right: -0.395em; } /* Eingeklappte Leiste: nur die Bildmarke, mittig */ body.sidebar-collapsed .ip-brand--sm { justify-content: center; padding-inline: 0; } /* Bestandsseiten, die noch das alte Markup nutzen */ .sidebar-brand { display: flex; align-items: center; gap: var(--ip-2); height: var(--ip-topbar-h); padding: 0 var(--ip-4); flex-shrink: 0; font-family: var(--ip-font-display); font-size: 1.5rem; font-weight: 600; color: var(--ip-ink); text-decoration: none; white-space: nowrap; } .sidebar-brand:hover { color: var(--ip-ink); text-decoration: none; } .sidebar-brand .text-primary { color: var(--ip-signal) !important; } .ip-nav, .sidebar .nav { padding: var(--ip-3) var(--ip-2); gap: 1px; } .ip-nav-label { padding: var(--ip-4) var(--ip-3) var(--ip-1); font-family: var(--ip-font-display); font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ip-ink-faint); } .sidebar .nav-link { display: flex; align-items: center; gap: var(--ip-3); padding: 0.5rem var(--ip-3); border-radius: var(--ip-radius-sm); color: var(--ip-ink-dim); font-size: var(--ip-text-sm); font-weight: 500; white-space: nowrap; position: relative; transition: background-color var(--ip-transition), color var(--ip-transition); } .sidebar .nav-link i { width: 1.15rem; font-size: 1rem; text-align: center; flex-shrink: 0; } .sidebar .nav-link:hover { background: var(--ip-surface-raised); color: var(--ip-ink); text-decoration: none; } .sidebar .nav-link.active { background: color-mix(in srgb, var(--ip-signal) 14%, transparent); color: var(--ip-signal); } /* Markierung des aktiven Bereichs statt Vollflächen-Highlight */ .sidebar .nav-link.active::before { content: ""; position: absolute; left: calc(-1 * var(--ip-2)); top: 20%; bottom: 20%; width: 3px; border-radius: 0 2px 2px 0; background: var(--ip-signal); } /* Eingeklappt */ body.sidebar-collapsed .sidebar { width: var(--ip-sidebar-w-collapsed); } body.sidebar-collapsed .sidebar .nav-link-text, body.sidebar-collapsed .sidebar .ip-brand-text, body.sidebar-collapsed .sidebar .brand-text, body.sidebar-collapsed .ip-nav-label { display: none; } body.sidebar-collapsed .sidebar .nav-link { justify-content: center; padding-inline: 0; } body.sidebar-collapsed .ip-topbar, body.sidebar-collapsed .ip-main, body.sidebar-collapsed .navbar, body.sidebar-collapsed .content { margin-left: var(--ip-sidebar-w-collapsed); } /* --------------------------------------------------------------------------- 4 LAYOUT: KOPFLEISTE UND INHALT --------------------------------------------------------------------------- */ .ip-topbar, .navbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: var(--ip-3); height: var(--ip-topbar-h); margin-left: var(--ip-sidebar-w); padding: 0 var(--ip-5); background: color-mix(in srgb, var(--ip-surface) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--ip-line); box-shadow: none; transition: margin-left var(--ip-transition); } .ip-main, .content { margin-left: var(--ip-sidebar-w); padding: var(--ip-5); transition: margin-left var(--ip-transition); } .ip-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--ip-3); margin-bottom: var(--ip-5); } .ip-page-head h1 { margin: 0; font-size: 1.75rem; } .ip-page-head .ip-page-sub { color: var(--ip-ink-dim); font-size: var(--ip-text-sm); margin: var(--ip-1) 0 0; } /* --------------------------------------------------------------------------- 5 KARTEN – mit Zustandslinie und Stand-Stempel --------------------------------------------------------------------------- */ .ip-card, .card { position: relative; display: flex; flex-direction: column; background: var(--ip-surface); border: 1px solid var(--ip-line); border-radius: var(--ip-radius); box-shadow: var(--ip-shadow); overflow: hidden; } /* Haarlinie am oberen Rand: zeigt den Zustand der angezeigten Daten an. Das ist die sichtbare Konsequenz der Vorberechnung – wer zwischengespeicherte Werte zeigt, muss ihr Alter zeigen. */ .ip-card::before, .card[data-widget-id]::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--ip-line); transition: background-color var(--ip-transition); } [data-state="ok"]::before { background: var(--ip-ok); } [data-state="stale"]::before { background: var(--ip-warn); } [data-state="building"]::before{ background: var(--ip-signal); } [data-state="error"]::before { background: var(--ip-alert); } .ip-card-head, .card-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ip-3); padding: var(--ip-3) var(--ip-4); background: transparent; border-bottom: 1px solid var(--ip-line); } .ip-card-head h2, .ip-card-head h3, .card-header h5, .card-header h6 { margin: 0; font-family: var(--ip-font-display); font-size: 1.125rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ip-ink); } .ip-card-body, .card-body { padding: var(--ip-4); flex: 1 1 auto; } .ip-card-foot, .card-footer { padding: var(--ip-2) var(--ip-4); border-top: 1px solid var(--ip-line); background: var(--ip-surface-sunken); font-size: var(--ip-text-xs); color: var(--ip-ink-dim); } /* Stand-Stempel */ .ip-stamp { display: inline-flex; align-items: center; gap: var(--ip-1); font-family: var(--ip-font-mono); font-size: var(--ip-text-xs); letter-spacing: 0.02em; color: var(--ip-ink-faint); white-space: nowrap; } .ip-stamp::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .ip-stamp[data-state="ok"] { color: var(--ip-ok); } .ip-stamp[data-state="stale"] { color: var(--ip-warn); } .ip-stamp[data-state="building"] { color: var(--ip-signal); } .ip-stamp[data-state="error"] { color: var(--ip-alert); } .ip-stamp[data-state="building"]::before { animation: ip-pulse 1.4s ease-in-out infinite; } @keyframes ip-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } } /* --------------------------------------------------------------------------- 6 KENNZAHLEN --------------------------------------------------------------------------- */ .ip-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--ip-3); margin-bottom: var(--ip-5); } .ip-kpi { position: relative; padding: var(--ip-3) var(--ip-4); background: var(--ip-surface); border: 1px solid var(--ip-line); border-radius: var(--ip-radius); overflow: hidden; } .ip-kpi-label { display: block; font-size: var(--ip-text-xs); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ip-ink-faint); margin-bottom: var(--ip-1); } .ip-kpi-value { font-family: var(--ip-font-display); font-size: 2.5rem; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ip-ink); } .ip-kpi-unit { font-size: 1rem; color: var(--ip-ink-dim); margin-left: 0.15em; } .ip-kpi-meta { font-size: var(--ip-text-xs); color: var(--ip-ink-dim); margin-top: var(--ip-1); } .ip-kpi-icon { position: absolute; right: var(--ip-3); top: var(--ip-3); font-size: 1.15rem; color: var(--ip-ink-faint); opacity: 0.55; } .ip-kpi[data-accent="signal"] .ip-kpi-value { color: var(--ip-signal); } .ip-kpi[data-accent="alert"] .ip-kpi-value { color: var(--ip-alert); } .ip-kpi[data-accent="ok"] .ip-kpi-value { color: var(--ip-ok); } .ip-kpi[data-accent="warn"] .ip-kpi-value { color: var(--ip-warn); } /* --------------------------------------------------------------------------- 7 TABELLEN --------------------------------------------------------------------------- */ .table { --bs-table-bg: transparent; --bs-table-color: var(--ip-ink); --bs-table-border-color: var(--ip-line); --bs-table-hover-bg: var(--ip-surface-raised); --bs-table-hover-color: var(--ip-ink); --bs-table-striped-bg: color-mix(in srgb, var(--ip-ink) 3%, transparent); margin-bottom: 0; font-size: var(--ip-text-sm); } .table > thead > tr > th { position: sticky; top: 0; z-index: 2; padding: var(--ip-2) var(--ip-3); background: var(--ip-surface-sunken); border-bottom: 1px solid var(--ip-line-strong); font-family: var(--ip-font-display); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ip-ink-dim); white-space: nowrap; } .table > tbody > tr > td { padding: var(--ip-2) var(--ip-3); border-bottom: 1px solid var(--ip-line); vertical-align: middle; } .table > tbody > tr:last-child > td { border-bottom: 0; } .table-hover > tbody > tr { transition: background-color 80ms linear; } /* --- DataTables ------------------------------------------------------------- DataTables misst die Tabelle beim Aufsetzen und schreibt eine feste Breite als Inline-Stil. Steckt die Tabelle zusaetzlich in einem .table-responsive mit overflow-x, entsteht daraus eine Bildlaufleiste, obwohl nichts ueberlaeuft. Deshalb hier die Breite zurueckholen und den Ueberlauf nur dort zulassen, wo er wirklich gebraucht wird. --------------------------------------------------------------------------- */ .dataTables_wrapper { width: 100%; } .dataTables_wrapper .dataTables_scroll, .dataTables_wrapper .table-responsive { overflow: visible; } .dataTables_wrapper table.dataTable { width: 100% !important; margin: 0 !important; border-collapse: collapse; } /* Kopfzeile: Anzahl je Seite links, Suche rechts */ .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { padding: var(--ip-3) var(--ip-4); margin: 0; font-size: var(--ip-text-sm); color: var(--ip-ink-dim); } .dataTables_wrapper .dataTables_length { float: left; } .dataTables_wrapper .dataTables_filter { float: right; } .dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_filter label { display: flex; align-items: center; gap: var(--ip-2); margin: 0; font-weight: 400; } .dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input { height: 32px; padding: 0.25rem 0.6rem; background: var(--ip-surface-sunken); border: 1px solid var(--ip-line); border-radius: var(--ip-radius-sm); color: var(--ip-ink); font-size: var(--ip-text-sm); transition: border-color var(--ip-transition), box-shadow var(--ip-transition); } .dataTables_wrapper .dataTables_length select { width: auto; min-width: 4.5rem; } .dataTables_wrapper .dataTables_filter input { min-width: 16rem; } .dataTables_wrapper .dataTables_length select:focus, .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--ip-signal); box-shadow: var(--ip-glow); outline: none; } .dataTables_wrapper .dataTables_filter input::placeholder { color: var(--ip-ink-faint); } /* Trennlinie zwischen Bedienzeile und Tabelle */ .dataTables_wrapper .dataTables_length::after { content: none; } .dataTables_wrapper > .row:first-child, .dataTables_wrapper .dt-toolbar { border-bottom: 1px solid var(--ip-line); } /* Fusszeile: Zaehlung links, Blaetterei rechts */ .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { padding: var(--ip-3) var(--ip-4); margin: 0; font-size: var(--ip-text-sm); color: var(--ip-ink-dim); border-top: 1px solid var(--ip-line); } .dataTables_wrapper .dataTables_info { float: left; } .dataTables_wrapper .dataTables_paginate { float: right; } /* Die Blaetterei kommt von Bootstrap als .pagination – hier auf das Erscheinungsbild der uebrigen Schaltflaechen gebracht. */ .dataTables_wrapper .pagination { margin: 0; gap: 2px; } .dataTables_wrapper .page-item .page-link { min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0 0.6rem; background: transparent; border: 1px solid transparent; border-radius: var(--ip-radius-sm); color: var(--ip-ink-dim); font-size: var(--ip-text-sm); line-height: 1; transition: background-color var(--ip-transition), color var(--ip-transition); } .dataTables_wrapper .page-item .page-link:hover { background: var(--ip-surface-raised); border-color: var(--ip-line); color: var(--ip-ink); } .dataTables_wrapper .page-item.active .page-link { background: color-mix(in srgb, var(--ip-signal) 16%, transparent); border-color: color-mix(in srgb, var(--ip-signal) 34%, transparent); color: var(--ip-signal); font-weight: 600; } .dataTables_wrapper .page-item.disabled .page-link { color: var(--ip-ink-faint); opacity: 0.5; pointer-events: none; } .dataTables_wrapper .page-link:focus { box-shadow: var(--ip-glow); outline: none; } /* Umbruchsicherung: Floats muessen wieder eingefangen werden, sonst faellt die Karte in sich zusammen. */ .dataTables_wrapper::after, .dataTables_wrapper .dataTables_length + .dataTables_filter::after { content: ""; display: table; clear: both; } /* Sortiersymbole. Die mitgelieferten Grafiken sind fuer helle Oberflaechen gezeichnet; hier durch Zeichen ersetzt, die die Themenfarbe annehmen. */ table.dataTable thead th.sorting, table.dataTable thead th.sorting_asc, table.dataTable thead th.sorting_desc { position: relative; padding-right: 1.6rem !important; cursor: pointer; background-image: none !important; } table.dataTable thead th.sorting::after, table.dataTable thead th.sorting_asc::after, table.dataTable thead th.sorting_desc::after { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); font-size: 0.7rem; line-height: 1; opacity: 0.45; } table.dataTable thead th.sorting::after { content: "\2195"; } table.dataTable thead th.sorting_asc::after { content: "\2191"; opacity: 1; color: var(--ip-signal); } table.dataTable thead th.sorting_desc::after{ content: "\2193"; opacity: 1; color: var(--ip-signal); } table.dataTable thead th.sorting:hover::after { opacity: 0.8; } /* Zeile "keine Treffer" */ table.dataTable td.dataTables_empty { padding: var(--ip-6) var(--ip-4); text-align: center; color: var(--ip-ink-faint); } @media (max-width: 768px) { .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { float: none; width: 100%; } .dataTables_wrapper .dataTables_filter input { min-width: 0; width: 100%; } .dataTables_wrapper .dataTables_paginate { display: flex; justify-content: center; } } /* --------------------------------------------------------------------------- 8 FORMULARE --------------------------------------------------------------------------- */ .form-label { font-size: var(--ip-text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ip-ink-dim); margin-bottom: var(--ip-1); } .form-control, .form-select, .input-group-text { background: var(--ip-surface-sunken); border: 1px solid var(--ip-line); color: var(--ip-ink); border-radius: var(--ip-radius-sm); font-size: var(--ip-text-base); padding: 0.5rem 0.75rem; transition: border-color var(--ip-transition), box-shadow var(--ip-transition); } .form-control::placeholder { color: var(--ip-ink-faint); } .form-control:focus, .form-select:focus { background: var(--ip-surface-sunken); border-color: var(--ip-signal); box-shadow: var(--ip-glow); color: var(--ip-ink); outline: none; } .form-control:disabled, .form-control[readonly] { opacity: 0.55; } .input-group-text { color: var(--ip-ink-dim); } .form-check-input { background-color: var(--ip-surface-sunken); border-color: var(--ip-line-strong); } .form-check-input:checked { background-color: var(--ip-signal); border-color: var(--ip-signal); } .form-check-input:focus { box-shadow: var(--ip-glow); border-color: var(--ip-signal); } .form-check-label { font-size: var(--ip-text-sm); color: var(--ip-ink-dim); } .form-text { color: var(--ip-ink-faint); font-size: var(--ip-text-xs); } .invalid-feedback { color: var(--ip-alert); } .is-invalid { border-color: var(--ip-alert) !important; } /* --------------------------------------------------------------------------- 9 SCHALTFLÄCHEN --------------------------------------------------------------------------- */ .btn { --bs-btn-focus-shadow-rgb: 77, 166, 255; font-size: var(--ip-text-sm); font-weight: 600; letter-spacing: 0.01em; border-radius: var(--ip-radius-sm); padding: 0.5rem 1rem; transition: background-color var(--ip-transition), border-color var(--ip-transition), transform 60ms ease; } .btn:active { transform: translateY(1px); } .btn-primary { --bs-btn-bg: var(--ip-signal); --bs-btn-border-color: var(--ip-signal); --bs-btn-color: #04121f; --bs-btn-hover-bg: #6db6ff; --bs-btn-hover-border-color: #6db6ff; --bs-btn-hover-color: #04121f; --bs-btn-active-bg: var(--ip-signal-deep); --bs-btn-active-border-color: var(--ip-signal-deep); --bs-btn-disabled-bg: var(--ip-line-strong); --bs-btn-disabled-border-color: var(--ip-line-strong); --bs-btn-disabled-color: var(--ip-ink-faint); } [data-bs-theme="light"] .btn-primary { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; } .btn-outline-secondary { --bs-btn-color: var(--ip-ink-dim); --bs-btn-border-color: var(--ip-line-strong); --bs-btn-hover-bg: var(--ip-surface-raised); --bs-btn-hover-border-color: var(--ip-ink-faint); --bs-btn-hover-color: var(--ip-ink); } .btn-danger { --bs-btn-bg: var(--ip-alert); --bs-btn-border-color: var(--ip-alert); --bs-btn-hover-bg: #ff7784; --bs-btn-hover-border-color: #ff7784; } .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: var(--ip-radius-sm); border: 1px solid transparent; background: transparent; color: var(--ip-ink-dim); } .btn-icon:hover { background: var(--ip-surface-raised); color: var(--ip-ink); } /* --------------------------------------------------------------------------- 10 ABZEICHEN UND ZUSTÄNDE --------------------------------------------------------------------------- */ .ip-badge, .badge { display: inline-flex; align-items: center; gap: var(--ip-1); padding: 0.15rem 0.5rem; border-radius: 999px; border: 1px solid transparent; font-family: var(--ip-font-mono); font-size: var(--ip-text-xs); font-weight: 500; letter-spacing: 0.03em; line-height: 1.5; } .ip-badge--neu, .ip-badge--pending { color: var(--ip-signal); background: color-mix(in srgb, var(--ip-signal) 14%, transparent); border-color: color-mix(in srgb, var(--ip-signal) 30%, transparent); } .ip-badge--bearbeitung, .ip-badge--processing { color: var(--ip-warn); background: color-mix(in srgb, var(--ip-warn) 14%, transparent); border-color: color-mix(in srgb, var(--ip-warn) 30%, transparent); } .ip-badge--abgeschlossen, .ip-badge--completed { color: var(--ip-ok); background: color-mix(in srgb, var(--ip-ok) 14%, transparent); border-color: color-mix(in srgb, var(--ip-ok) 30%, transparent); } .ip-badge--failed { color: var(--ip-alert); background: color-mix(in srgb, var(--ip-alert) 14%, transparent); border-color: color-mix(in srgb, var(--ip-alert) 30%, transparent); } .alert { border-radius: var(--ip-radius); border: 1px solid var(--ip-line); background: var(--ip-surface-raised); color: var(--ip-ink); font-size: var(--ip-text-sm); padding: var(--ip-3) var(--ip-4); } .alert-danger { border-color: color-mix(in srgb, var(--ip-alert) 45%, transparent); background: color-mix(in srgb, var(--ip-alert) 10%, var(--ip-surface)); color: var(--ip-ink); } .alert-success { border-color: color-mix(in srgb, var(--ip-ok) 45%, transparent); background: color-mix(in srgb, var(--ip-ok) 10%, var(--ip-surface)); } .alert-warning { border-color: color-mix(in srgb, var(--ip-warn) 45%, transparent); background: color-mix(in srgb, var(--ip-warn) 10%, var(--ip-surface)); } .alert-info { border-color: color-mix(in srgb, var(--ip-signal) 45%, transparent); background: color-mix(in srgb, var(--ip-signal) 10%, var(--ip-surface)); } .progress { background: var(--ip-surface-sunken); border-radius: 999px; height: 6px; } .progress-bar { background: var(--ip-signal); } /* --------------------------------------------------------------------------- 11 ÜBERLAGERUNGEN: MODAL, DROPDOWN, TOOLTIP, TOAST --------------------------------------------------------------------------- */ .modal-backdrop { --bs-backdrop-bg: #04090f; --bs-backdrop-opacity: 0.72; } .modal-content { background: var(--ip-surface); border: 1px solid var(--ip-line-strong); border-radius: var(--ip-radius-lg); box-shadow: var(--ip-shadow-lg); overflow: hidden; } .modal-header { padding: var(--ip-3) var(--ip-5); border-bottom: 1px solid var(--ip-line); background: var(--ip-surface-sunken); } .modal-title { font-family: var(--ip-font-display); font-size: 1.25rem; letter-spacing: 0.03em; text-transform: uppercase; } .modal-body { padding: var(--ip-5); } .modal-footer { padding: var(--ip-3) var(--ip-5); border-top: 1px solid var(--ip-line); background: var(--ip-surface-sunken); gap: var(--ip-2); } .btn-close { filter: invert(1) grayscale(1) brightness(1.9); opacity: 0.55; } .btn-close:hover { opacity: 1; } [data-bs-theme="light"] .btn-close { filter: none; } .dropdown-menu { --bs-dropdown-bg: var(--ip-surface-raised); --bs-dropdown-border-color: var(--ip-line-strong); --bs-dropdown-link-color: var(--ip-ink-dim); --bs-dropdown-link-hover-bg: var(--ip-surface-sunken); --bs-dropdown-link-hover-color: var(--ip-ink); --bs-dropdown-link-active-bg: color-mix(in srgb, var(--ip-signal) 18%, transparent); --bs-dropdown-link-active-color: var(--ip-signal); --bs-dropdown-divider-bg: var(--ip-line); border-radius: var(--ip-radius); box-shadow: var(--ip-shadow-lg); font-size: var(--ip-text-sm); padding: var(--ip-1); } .dropdown-item { border-radius: var(--ip-radius-sm); } .tooltip-inner { background: var(--ip-surface-raised); border: 1px solid var(--ip-line-strong); color: var(--ip-ink); font-size: var(--ip-text-xs); border-radius: var(--ip-radius-sm); box-shadow: var(--ip-shadow); } .tooltip .tooltip-arrow::before { border-top-color: var(--ip-line-strong); } .toast { background: var(--ip-surface-raised); border: 1px solid var(--ip-line-strong); border-radius: var(--ip-radius); box-shadow: var(--ip-shadow-lg); color: var(--ip-ink); } .offcanvas { background: var(--ip-surface); color: var(--ip-ink); border-color: var(--ip-line); } /* --------------------------------------------------------------------------- 12 LADEZUSTÄNDE – Skelette statt Spinner --------------------------------------------------------------------------- */ /* Ein Spinner sagt "warte". Ein Skelett sagt "hier kommt eine Tabelle mit fünf Zeilen". Bei vorberechneten Daten ist die Wartezeit ohnehin kurz – das Skelett verhindert zusätzlich das Springen des Layouts. */ .ip-skeleton { position: relative; overflow: hidden; border-radius: var(--ip-radius-sm); background: var(--ip-surface-raised); } .ip-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ip-ink) 7%, transparent), transparent); animation: ip-shimmer 1.3s infinite; } @keyframes ip-shimmer {100% { transform: translateX(100%); } } .ip-skeleton-line { height: 0.75rem; margin-bottom: var(--ip-2); } .ip-skeleton-line:nth-child(3n) { width: 72%; } .ip-skeleton-line:nth-child(3n+1) { width: 90%; } .ip-skeleton-line:nth-child(3n+2) { width: 58%; } .ip-skeleton-block { height: 180px; } .ip-skeleton-kpi { height: 2.5rem; width: 60%; margin-top: var(--ip-1); } /* Leerer Zustand: eine Einladung zum Handeln, keine Fehlermeldung */ .ip-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ip-2); padding: var(--ip-6) var(--ip-4); text-align: center; color: var(--ip-ink-dim); } .ip-empty i { font-size: 1.75rem; color: var(--ip-ink-faint); } .ip-empty-title { font-family: var(--ip-font-display); font-size: 1.125rem; color: var(--ip-ink); } .ip-empty-hint { font-size: var(--ip-text-sm); max-width: 34ch; } .ip-error { display: flex; gap: var(--ip-2); align-items: flex-start; padding: var(--ip-4); color: var(--ip-ink-dim); font-size: var(--ip-text-sm); } .ip-error i { color: var(--ip-alert); margin-top: 0.15rem; } .spinner-border { border-color: var(--ip-line-strong); border-right-color: var(--ip-signal); } /* --------------------------------------------------------------------------- 13 VERLAUFSLISTE (Aktivitäten) --------------------------------------------------------------------------- */ .ip-timeline, .timeline { list-style: none; margin: 0; padding: var(--ip-3) var(--ip-4); position: relative; } .ip-timeline::before, .timeline::before { content: ""; position: absolute; left: calc(var(--ip-4) + 8px); top: var(--ip-4); bottom: var(--ip-4); width: 1px; background: var(--ip-line); } .ip-timeline > li, .timeline > li { position: relative; padding-left: var(--ip-6); padding-bottom: var(--ip-4); } .ip-timeline > li:last-child, .timeline > li:last-child { padding-bottom: 0; } .ip-timeline > li > i, .timeline > li > i { position: absolute; left: 0; top: 2px; width: 17px; height: 17px; display: grid; place-items: center; font-size: 0.6rem; border-radius: 50%; background: var(--ip-surface-raised); border: 1px solid var(--ip-line-strong); color: var(--ip-ink-dim); } .ip-timeline .ip-tl-time { display: block; font-family: var(--ip-font-mono); font-size: var(--ip-text-xs); color: var(--ip-ink-faint); margin-bottom: 1px; } .ip-timeline .ip-tl-text { font-size: var(--ip-text-sm); color: var(--ip-ink); } .ip-timeline li[data-type="analysis_complete"] > i { color: var(--ip-ok); border-color: color-mix(in srgb, var(--ip-ok) 45%, transparent); } .ip-timeline li[data-type="analysis_failed"] > i { color: var(--ip-alert); border-color: color-mix(in srgb, var(--ip-alert) 45%, transparent); } .ip-timeline li[data-type="pcap_uploaded"] > i { color: var(--ip-signal); border-color: color-mix(in srgb, var(--ip-signal) 45%, transparent); } .ip-timeline li[data-type="case_created"] > i { color: var(--ip-trace); border-color: color-mix(in srgb, var(--ip-trace) 45%, transparent); } /* Länderliste */ .ip-rank-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--ip-2); padding: 0.4rem 0; border-bottom: 1px solid var(--ip-line); } .ip-rank-item:last-child { border-bottom: 0; } .ip-rank-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ip-text-sm); } .ip-rank-count { font-family: var(--ip-font-mono); font-variant-numeric: tabular-nums; font-size: var(--ip-text-sm); color: var(--ip-ink-dim); } .ip-rank-bar { grid-column: 1 / -1; height: 2px; background: var(--ip-line); border-radius: 1px; overflow: hidden; } .ip-rank-bar > span { display: block; height: 100%; background: var(--ip-signal); } /* --------------------------------------------------------------------------- 13b DATEIABLAGE UND UEBERTRAGUNG --------------------------------------------------------------------------- */ /* Ablageflaeche. Der gestrichelte Rand ist die einzige Stelle im System, an der gestrichelt wird - er bedeutet ueberall "hier faellt etwas hinein". */ .ip-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ip-1); padding: var(--ip-6) var(--ip-4); border: 1.5px dashed var(--ip-line-strong); border-radius: var(--ip-radius); background: var(--ip-surface-sunken); color: var(--ip-ink-dim); text-align: center; cursor: pointer; transition: border-color var(--ip-transition), background-color var(--ip-transition); } .ip-dropzone:hover, .ip-dropzone:focus-visible { border-color: var(--ip-signal); background: color-mix(in srgb, var(--ip-signal) 6%, var(--ip-surface-sunken)); } .ip-dropzone.is-over { border-color: var(--ip-signal); border-style: solid; background: color-mix(in srgb, var(--ip-signal) 12%, var(--ip-surface-sunken)); } .ip-dropzone > i { font-size: 1.75rem; color: var(--ip-ink-faint); } .ip-dropzone.is-over > i { color: var(--ip-signal); } .ip-dropzone-title { font-family: var(--ip-font-display); font-size: 1.125rem; color: var(--ip-ink); } .ip-dropzone-hint { font-size: var(--ip-text-sm); color: var(--ip-ink-faint); } /* Liste der ausgewaehlten Dateien */ .ip-filelist { list-style: none; margin: var(--ip-2) 0 0; padding: 0; } .ip-filelist-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--ip-2); padding: 0.4rem var(--ip-2); border-bottom: 1px solid var(--ip-line); font-size: var(--ip-text-sm); } .ip-filelist-item:last-child { border-bottom: 0; } .ip-filelist-item > i { color: var(--ip-ink-faint); font-size: 0.95rem; } .ip-filelist-item.is-invalid > i { color: var(--ip-alert); } .ip-filelist-item.is-invalid .ip-filelist-meta { color: var(--ip-alert); } .ip-filelist-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--ip-font-mono); font-size: var(--ip-text-xs); } .ip-filelist-meta { font-family: var(--ip-font-mono); font-variant-numeric: tabular-nums; font-size: var(--ip-text-xs); color: var(--ip-ink-dim); white-space: nowrap; } .ip-filelist-item .btn-icon { width: 24px; height: 24px; } /* Fortschrittsanzeige waehrend der Uebertragung */ .ip-upload-overlay { position: fixed; inset: 0; z-index: 1080; display: grid; place-items: center; padding: var(--ip-4); background: rgb(4 9 15 / 0.72); backdrop-filter: blur(3px); } .ip-upload-overlay[hidden] { display: none; } .ip-upload-panel { width: min(460px, 100%); padding: var(--ip-5); background: var(--ip-surface); border: 1px solid var(--ip-line-strong); border-radius: var(--ip-radius-lg); box-shadow: var(--ip-shadow-lg); } .ip-upload-title { font-family: var(--ip-font-display); font-size: 1.125rem; letter-spacing: 0.02em; color: var(--ip-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ip-upload-panel .ip-num { font-family: var(--ip-font-mono); font-variant-numeric: tabular-nums; } .ip-upload-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ip-2); margin: 0; } .ip-upload-stats dt { font-size: var(--ip-text-xs); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ip-ink-faint); font-weight: 400; margin-bottom: 2px; } .ip-upload-stats dd { margin: 0; font-size: var(--ip-text-sm); color: var(--ip-ink); } /* --------------------------------------------------------------------------- 13c KONTO UND PASSWORT --------------------------------------------------------------------------- */ .ip-avatar { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; background: color-mix(in srgb, var(--ip-signal) 16%, transparent); border: 1px solid color-mix(in srgb, var(--ip-signal) 32%, transparent); color: var(--ip-signal); font-family: var(--ip-font-display); font-size: 1.25rem; letter-spacing: 0.04em; } /* Staerkeanzeige. Bewusst schmal und ohne Beschriftung wie "gut" oder "sehr stark" - solche Urteile sind bestenfalls geraten, und ein gruener Balken verleitet dazu, sich auf ihn zu verlassen. */ .ip-pw-meter { height: 3px; border-radius: 2px; background: var(--ip-line); overflow: hidden; } .ip-pw-meter > span { display: block; height: 100%; width: 0; border-radius: 2px; transition: width var(--ip-transition), background-color var(--ip-transition); } .ip-pw-meter > span.is-schwach { background: var(--ip-alert); } .ip-pw-meter > span.is-mittel { background: var(--ip-warn); } .ip-pw-meter > span.is-stark { background: var(--ip-ok); } /* --- Blaetterleiste -------------------------------------------------------- Drei Bereiche in einer Zeile: Zeilenzahl links, Zaehler in der Mitte, Seitenwahl rechts. Der Zaehler steht bewusst dazwischen und nicht am Rand – er ist die Angabe, die man beim Blaettern im Blick behaelt. --------------------------------------------------------------------------- */ .ip-blaettern { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ip-3); padding: var(--ip-2) var(--ip-4); font-size: var(--ip-text-sm); color: var(--ip-ink-dim); } /* Zeilenzahl */ .ip-blaettern-groesse { display: inline-flex; align-items: center; gap: var(--ip-2); margin: 0; white-space: nowrap; } .ip-blaettern-groesse > span { font-size: var(--ip-text-xs); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ip-ink-faint); } .ip-blaettern-groesse select { height: 30px; padding: 0 1.6rem 0 0.6rem; background: var(--ip-surface-sunken); border: 1px solid var(--ip-line); border-radius: var(--ip-radius-sm); color: var(--ip-ink); font-family: var(--ip-font-mono); font-size: var(--ip-text-sm); cursor: pointer; appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 0.75rem center, right 0.5rem center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .ip-blaettern-groesse select:focus { border-color: var(--ip-signal); box-shadow: var(--ip-glow); outline: none; } /* Zaehler */ .ip-blaettern-zaehler { font-family: var(--ip-font-mono); font-variant-numeric: tabular-nums; font-size: var(--ip-text-xs); color: var(--ip-ink-faint); white-space: nowrap; } .ip-blaettern-zaehler b { color: var(--ip-ink-dim); font-weight: 600; } /* Seitenwahl */ .ip-blaettern-seiten { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; } .ip-blaettern-knopf { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 0.45rem; border: 1px solid transparent; border-radius: var(--ip-radius-sm); background: transparent; color: var(--ip-ink-dim); font-family: var(--ip-font-mono); font-variant-numeric: tabular-nums; font-size: var(--ip-text-sm); line-height: 1; text-decoration: none; transition: background-color var(--ip-transition), color var(--ip-transition), border-color var(--ip-transition); } .ip-blaettern-knopf:hover { background: var(--ip-surface-raised); border-color: var(--ip-line); color: var(--ip-ink); text-decoration: none; } .ip-blaettern-knopf.is-aktiv { background: color-mix(in srgb, var(--ip-signal) 16%, transparent); border-color: color-mix(in srgb, var(--ip-signal) 34%, transparent); color: var(--ip-signal); font-weight: 600; } .ip-blaettern-knopf.is-aus { color: var(--ip-ink-faint); opacity: 0.4; cursor: default; } .ip-blaettern-knopf:focus-visible { outline: 2px solid var(--ip-signal); outline-offset: 1px; } .ip-blaettern-luecke { padding: 0 0.2rem; color: var(--ip-ink-faint); user-select: none; } @media (max-width: 768px) { .ip-blaettern { justify-content: center; } .ip-blaettern-seiten { margin-left: 0; width: 100%; justify-content: center; } .ip-blaettern-zaehler { width: 100%; text-align: center; } } /* Rollenauswahl beim Anlegen eines Kontos. Untereinander, nicht nebeneinander: die Erlaeuterungen sind unterschiedlich lang, und die Rollen bauen aufeinander auf - eine senkrechte Anordnung bildet das ab. */ .ip-rollen { display: block; /* kein Flex - jede Kachel eine eigene Zeile */ margin: 0; } .ip-rolle { position: relative; display: block; width: 100%; margin-bottom: var(--ip-2); padding: var(--ip-3); border: 1px solid var(--ip-line); border-radius: var(--ip-radius); background: var(--ip-surface-sunken); cursor: pointer; transition: border-color var(--ip-transition), background-color var(--ip-transition); } .ip-rolle:last-child { margin-bottom: 0; } /* Der Radiobutton bleibt fuer Tastatur und Screenreader erhalten, wird aber optisch durch die Kachel ersetzt. */ .ip-rolle > input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; } .ip-rolle:hover { border-color: var(--ip-line-strong); } .ip-rolle-name { display: block; margin-bottom: 2px; font-weight: 600; font-size: var(--ip-text-sm); color: var(--ip-ink); } .ip-rolle-text { display: block; font-size: var(--ip-text-xs); line-height: 1.5; color: var(--ip-ink-dim); } /* Gewaehlte Kachel. Doppelt abgesichert: ueber :has() und ueber eine Klasse, die das Skript setzt - sonst bleibt die Auswahl in aelteren Browsern unsichtbar. */ .ip-rolle:has(input:checked), .ip-rolle.is-gewaehlt { border-color: var(--ip-signal); background: color-mix(in srgb, var(--ip-signal) 8%, var(--ip-surface-sunken)); } .ip-rolle:has(input:checked) .ip-rolle-name, .ip-rolle.is-gewaehlt .ip-rolle-name { color: var(--ip-signal); } .ip-rolle:has(input:focus-visible), .ip-rolle.hat-fokus { outline: 2px solid var(--ip-signal); outline-offset: 2px; } /* Aendernde Zugriffe im Revisionsprotokoll hervorheben. Lesende Zugriffe sind die Regel, aendernde die Ausnahme - sie sollen beim Durchsehen auffallen. */ .ip-revision-aenderung { background: color-mix(in srgb, var(--ip-warn) 6%, transparent); } .ip-revision-aenderung:hover { background: color-mix(in srgb, var(--ip-warn) 11%, transparent) !important; } /* Einmalige Anzeige neuer Zugangsdaten */ .ip-zugangsdaten { display: flex; flex-wrap: wrap; gap: var(--ip-2) var(--ip-5); padding: var(--ip-2) var(--ip-3); border-radius: var(--ip-radius-sm); background: var(--ip-surface-sunken); border: 1px solid var(--ip-line); } .ip-zugangsdaten > div { display: flex; align-items: center; gap: var(--ip-2); } .ip-zugangsdaten-label { font-size: var(--ip-text-xs); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ip-ink-faint); } .ip-zugangsdaten .ip-mono { font-size: var(--ip-text-base); letter-spacing: 0.04em; user-select: all; } /* Einstellungen: Abschnittsnavigation */ .ip-settings-nav { position: sticky; top: calc(var(--ip-topbar-h) + var(--ip-4)); list-style: none; margin: 0; padding: 0; } .ip-settings-nav a { display: flex; align-items: center; gap: var(--ip-2); padding: 0.45rem var(--ip-3); border-radius: var(--ip-radius-sm); color: var(--ip-ink-dim); font-size: var(--ip-text-sm); text-decoration: none; } .ip-settings-nav a:hover { background: var(--ip-surface-raised); color: var(--ip-ink); text-decoration: none; } .ip-settings-nav a.active { background: color-mix(in srgb, var(--ip-signal) 14%, transparent); color: var(--ip-signal); } .ip-settings-nav i { width: 1.1rem; text-align: center; } /* Zeile mit Bezeichnung links und Bedienelement rechts */ .ip-setting-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--ip-4); padding: var(--ip-3) 0; border-bottom: 1px solid var(--ip-line); } .ip-setting-row:last-child { border-bottom: 0; } .ip-setting-label { font-size: var(--ip-text-sm); color: var(--ip-ink); } .ip-setting-hint { font-size: var(--ip-text-xs); color: var(--ip-ink-faint); margin-top: 2px; } .ip-setting-control { min-width: 12rem; } @media (max-width: 576px) { .ip-setting-row { grid-template-columns: 1fr; } .ip-setting-control { min-width: 0; } } /* --------------------------------------------------------------------------- 13d AUSWERTUNG: REITER, PROTOKOLL, KARTE --------------------------------------------------------------------------- */ /* Reiterleiste. 26 Reiter passen nicht nebeneinander – sie laufen waagerecht um und scrollen bei Bedarf. Keine Umbruchzeilen, weil eine dreizeilige Reiterleiste den halben Bildschirm frisst. */ .ip-tabs { display: flex; gap: 1px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; padding-bottom: 1px; margin-bottom: var(--ip-4); border-bottom: 1px solid var(--ip-line); } .ip-tabs::-webkit-scrollbar { height: 4px; } .ip-tab { display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0; padding: 0.55rem 0.85rem; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ip-ink-dim); font-size: var(--ip-text-sm); font-weight: 500; white-space: nowrap; cursor: pointer; transition: color var(--ip-transition), border-color var(--ip-transition), background-color var(--ip-transition); } .ip-tab:hover { color: var(--ip-ink); background: var(--ip-surface-raised); } .ip-tab.active { color: var(--ip-signal); border-bottom-color: var(--ip-signal); } .ip-tab > i { font-size: 0.95rem; } /* Die Anzahl steht direkt am Reiter – man sieht vor dem Klick, was einen erwartet, und muss nicht 26 Bereiche durchprobieren. */ .ip-tab-count { padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--ip-surface-sunken); border: 1px solid var(--ip-line); font-family: var(--ip-font-mono); font-variant-numeric: tabular-nums; font-size: 0.68rem; color: var(--ip-ink-faint); } .ip-tab.active .ip-tab-count { background: color-mix(in srgb, var(--ip-signal) 16%, transparent); border-color: color-mix(in srgb, var(--ip-signal) 32%, transparent); color: var(--ip-signal); } .ip-tab-content { min-height: 320px; } .ip-tab-loading { padding: var(--ip-4); } /* Protokollansicht */ .ip-log { max-height: 62vh; overflow: auto; margin: 0; padding: var(--ip-4); background: var(--ip-surface-sunken); border: 1px solid var(--ip-line); border-radius: var(--ip-radius-sm); font-family: var(--ip-font-mono); font-size: 0.78rem; line-height: 1.55; color: var(--ip-ink-dim); white-space: pre-wrap; word-break: break-word; tab-size: 4; } /* --- Karte ----------------------------------------------------------------- Leaflet bringt durchweg helle Vorgaben mit. Ohne diese Regeln steht ein weiss leuchtendes Rechteck in der dunklen Oberflaeche. --------------------------------------------------------------------------- */ .leaflet-container { position: relative; background: var(--ip-surface-sunken); font-family: var(--ip-font-body); font-size: var(--ip-text-xs); } /* Bedienelemente */ .leaflet-bar, .leaflet-control-layers { border: 1px solid var(--ip-line-strong) !important; border-radius: var(--ip-radius-sm) !important; box-shadow: var(--ip-shadow) !important; background: var(--ip-surface-raised) !important; } .leaflet-bar a, .leaflet-bar a:hover { background: var(--ip-surface-raised) !important; color: var(--ip-ink-dim) !important; border-color: var(--ip-line) !important; } .leaflet-bar a:hover { color: var(--ip-ink) !important; } .leaflet-bar a.leaflet-disabled { color: var(--ip-ink-faint) !important; opacity: .5; } /* Ebenenumschalter unten links. Leaflet liefert dafuer eine helle PNG-Grafik mit, die in der dunklen Oberflaeche als weisser Kasten steht. Ersetzt durch ein SVG, das die Themenfarben aufnimmt. Wichtig: die data-URI muss in einer Zeile stehen. Ueber mehrere Zeilen mit Backslash-Fortsetzung geschrieben verwerfen manche Browser die Regel still, und die alte PNG-Grafik bleibt sichtbar. Ebenso muss die Retina-Regel mit ueberschrieben werden – sonst greift auf hochaufloesenden Bildschirmen weiterhin layers-2x.png. -------------------------------------------------------------------------- */ .leaflet-control-layers-toggle, .leaflet-retina .leaflet-control-layers-toggle { width: 34px !important; height: 34px !important; background-color: var(--ip-surface-raised) !important; background-size: 18px 18px !important; background-position: center !important; background-repeat: no-repeat !important; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2393a7bb' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M8 1.7 1.7 5 8 8.3 14.3 5z'/%3E%3Cpath d='M1.7 8.4 8 11.7l6.3-3.3'/%3E%3Cpath d='M1.7 11.6 8 14.9l6.3-3.3'/%3E%3C/svg%3E") !important; border-radius: var(--ip-radius-sm); } [data-bs-theme="light"] .leaflet-control-layers-toggle, [data-bs-theme="light"] .leaflet-retina .leaflet-control-layers-toggle { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2355697d' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M8 1.7 1.7 5 8 8.3 14.3 5z'/%3E%3Cpath d='M1.7 8.4 8 11.7l6.3-3.3'/%3E%3Cpath d='M1.7 11.6 8 14.9l6.3-3.3'/%3E%3C/svg%3E") !important; } .leaflet-control-layers-toggle:hover { background-color: var(--ip-surface-sunken) !important; } .leaflet-control-layers-expanded { padding: var(--ip-2) var(--ip-3) !important; background: var(--ip-surface-raised) !important; color: var(--ip-ink) !important; min-width: 9rem; } .leaflet-control-layers-list label { display: flex; align-items: center; gap: var(--ip-2); padding: 0.2rem 0; font-size: var(--ip-text-sm); color: var(--ip-ink-dim); cursor: pointer; } .leaflet-control-layers-list label:hover { color: var(--ip-ink); } .leaflet-control-layers-selector { accent-color: var(--ip-signal); margin: 0 !important; } /* Sprechblasen der Markierungen */ .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--ip-surface-raised); color: var(--ip-ink); border: 1px solid var(--ip-line-strong); box-shadow: var(--ip-shadow); } .leaflet-popup-content-wrapper { border-radius: var(--ip-radius); } .leaflet-popup-content { margin: 0.6rem 0.8rem; } .leaflet-popup-close-button { color: var(--ip-ink-faint) !important; } .leaflet-popup-close-button:hover { color: var(--ip-ink) !important; } .leaflet-tooltip { background: var(--ip-surface-raised); border: 1px solid var(--ip-line-strong); color: var(--ip-ink); box-shadow: var(--ip-shadow); font-size: var(--ip-text-xs); } .leaflet-tooltip-top::before { border-top-color: var(--ip-line-strong); } /* Attribution und Massstab. Die Hinweise sind Pflicht – OSM, CARTO und Esri verlangen sie in ihren Nutzungsbedingungen. */ .leaflet-control-attribution { background: color-mix(in srgb, var(--ip-surface) 82%, transparent) !important; color: var(--ip-ink-faint) !important; font-size: 0.65rem !important; padding: 1px 5px !important; } .leaflet-control-attribution a { color: var(--ip-ink-dim) !important; } .leaflet-control-scale-line { background: color-mix(in srgb, var(--ip-surface) 82%, transparent) !important; border-color: var(--ip-line-strong) !important; color: var(--ip-ink-dim) !important; } /* Einblendbarer Hinweis über der Karte */ .ip-map-hinweis { position: absolute; z-index: 500; top: var(--ip-2); left: 50%; transform: translateX(-50%); max-width: 90%; padding: 0.4rem 0.8rem; border-radius: var(--ip-radius-sm); background: var(--ip-surface-raised); border: 1px solid var(--ip-line-strong); box-shadow: var(--ip-shadow); font-size: var(--ip-text-xs); color: var(--ip-ink-dim); text-align: center; transition: opacity 400ms ease; } .ip-map-hinweis.is-fehler { border-color: color-mix(in srgb, var(--ip-warn) 45%, transparent); color: var(--ip-ink); } .ip-map-hinweis.is-weg { opacity: 0; pointer-events: none; } /* Hinweis auf den Mausradzoom. Sitzt unten mittig, damit er weder den Ebenenumschalter noch die Attribution verdeckt. */ .ip-map-zoomhinweis { position: absolute; z-index: 450; bottom: var(--ip-3); left: 50%; transform: translateX(-50%); padding: 0.25rem 0.7rem; border-radius: 999px; background: color-mix(in srgb, var(--ip-surface) 88%, transparent); border: 1px solid var(--ip-line); font-size: var(--ip-text-xs); color: var(--ip-ink-faint); white-space: nowrap; pointer-events: none; transition: opacity 300ms ease; } .ip-map-zoomhinweis.is-weg { opacity: 0; } /* Legende oben rechts */ .ip-map-legende { min-width: 8.5rem; padding: var(--ip-2) var(--ip-3); border-radius: var(--ip-radius-sm); background: color-mix(in srgb, var(--ip-surface) 92%, transparent); border: 1px solid var(--ip-line-strong); box-shadow: var(--ip-shadow); backdrop-filter: blur(6px); font-size: var(--ip-text-xs); color: var(--ip-ink-dim); line-height: 1.5; } .ip-legende-titel { margin-bottom: 0.3rem; font-family: var(--ip-font-display); font-size: 0.8rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ip-ink-faint); } .ip-legende-zeile { display: grid; grid-template-columns: 1.1rem 1fr auto; align-items: center; gap: var(--ip-2); padding: 1px 0; } .ip-legende-strich { height: 3px; border-radius: 2px; background: var(--ip-neutral); } .ip-legende-strich.is-gestrichelt { background: repeating-linear-gradient( 90deg, var(--ip-ink-faint) 0 4px, transparent 4px 7px); } .ip-legende-name { font-family: var(--ip-font-mono); color: var(--ip-ink); } .ip-legende-zahl { font-family: var(--ip-font-mono); font-variant-numeric: tabular-nums; color: var(--ip-ink-faint); } .ip-legende-fuss { display: grid; grid-template-columns: 1.1rem 1fr; align-items: center; gap: var(--ip-2); margin-top: 0.35rem; padding-top: 0.35rem; border-top: 1px solid var(--ip-line); font-size: 0.68rem; color: var(--ip-ink-faint); } /* Verbindungslinien reagieren auf den Zeiger, damit die Sprechblase mit Anzahl und Volumen erreichbar bleibt. */ .leaflet-interactive { cursor: pointer; } /* --------------------------------------------------------------------------- 13e CHAT UND BERICHTE --------------------------------------------------------------------------- */ /* --- Auswahlkacheln (Herkunft des Chatexports) ----------------------------- Der Radiobutton bleibt fuer Tastatur und Screenreader erhalten, wird aber optisch durch die Kachel ersetzt. --------------------------------------------------------------------------- */ .ip-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: var(--ip-2); } .ip-choice { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ip-1); padding: var(--ip-3) var(--ip-2); border: 1px solid var(--ip-line); border-radius: var(--ip-radius); background: var(--ip-surface-sunken); color: var(--ip-ink-dim); font-size: var(--ip-text-sm); text-align: center; cursor: pointer; transition: border-color var(--ip-transition), color var(--ip-transition), background-color var(--ip-transition); } .ip-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; } .ip-choice > i { font-size: 1.35rem; } .ip-choice:hover { border-color: var(--ip-line-strong); color: var(--ip-ink); } .ip-choice:has(input:checked), .ip-choice.is-gewaehlt { border-color: var(--ip-signal); background: color-mix(in srgb, var(--ip-signal) 10%, var(--ip-surface-sunken)); color: var(--ip-signal); } .ip-choice:has(input:focus-visible) { outline: 2px solid var(--ip-signal); outline-offset: 2px; } /* --- Anleitung je Herkunft ------------------------------------------------- */ .ip-anleitung[hidden] { display: none; } .ip-anleitung ol { margin: 0 0 var(--ip-3); padding-left: 1.15rem; font-size: var(--ip-text-sm); color: var(--ip-ink-dim); line-height: 1.6; } .ip-anleitung ol li { margin-bottom: 0.3rem; } .ip-anleitung ol li::marker { color: var(--ip-ink-faint); } .ip-anleitung strong { color: var(--ip-ink); font-weight: 600; } .ip-anleitung code { padding: 0.05rem 0.3rem; border-radius: 3px; background: var(--ip-surface-sunken); border: 1px solid var(--ip-line); color: var(--ip-signal); font-size: 0.8em; } .ip-anleitung-warnung { display: flex; gap: var(--ip-2); padding: var(--ip-2) var(--ip-3); border-radius: var(--ip-radius-sm); background: color-mix(in srgb, var(--ip-warn) 10%, transparent); border: 1px solid color-mix(in srgb, var(--ip-warn) 28%, transparent); font-size: var(--ip-text-xs); color: var(--ip-ink-dim); } .ip-anleitung-warnung > i { color: var(--ip-warn); flex-shrink: 0; margin-top: 1px; } /* --- Chatverlauf ----------------------------------------------------------- Darstellung wie in der Messenger-App. Welche Seite rechts erscheint, waehlt der Bearbeiter ausdruecklich aus (.is-eigene) – ohne Auswahl stehen alle Nachrichten links, weil aus dem Export nicht hervorgeht, wem das Geraet gehoerte. --------------------------------------------------------------------------- */ .ip-chat { --c0: var(--ip-signal); --c1: #b98cff; --c2: #35c98d; --c3: #f0a02a; --c4: #4ecdc4; --c5: #f78fb3; --c6: #8fa4ff; --c7: #c9a227; --c8: var(--ip-neutral); display: flex; flex-direction: column; gap: 2px; padding: var(--ip-1) 0; } [data-farbe="0"] { --beteiligt: var(--c0); } [data-farbe="1"] { --beteiligt: var(--c1); } [data-farbe="2"] { --beteiligt: var(--c2); } [data-farbe="3"] { --beteiligt: var(--c3); } [data-farbe="4"] { --beteiligt: var(--c4); } [data-farbe="5"] { --beteiligt: var(--c5); } [data-farbe="6"] { --beteiligt: var(--c6); } [data-farbe="7"] { --beteiligt: var(--c7); } [data-farbe="8"] { --beteiligt: var(--c8); } .ip-chat-punkt { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--ip-neutral); } .ip-chat-punkt[data-farbe="0"] { background: var(--ip-signal); } .ip-chat-punkt[data-farbe="1"] { background: #b98cff; } .ip-chat-punkt[data-farbe="2"] { background: #35c98d; } .ip-chat-punkt[data-farbe="3"] { background: #f0a02a; } .ip-chat-punkt[data-farbe="4"] { background: #4ecdc4; } .ip-chat-punkt[data-farbe="5"] { background: #f78fb3; } .ip-chat-punkt[data-farbe="6"] { background: #8fa4ff; } .ip-chat-punkt[data-farbe="7"] { background: #c9a227; } .ip-chat-tag { align-self: center; margin: var(--ip-4) 0 var(--ip-2); padding: 0.2rem 0.8rem; border-radius: 999px; background: var(--ip-surface-raised); border: 1px solid var(--ip-line); font-size: var(--ip-text-xs); color: var(--ip-ink-faint); white-space: nowrap; } .ip-chat-system { align-self: center; max-width: 60ch; margin: var(--ip-2) 0; padding: 0.3rem 0.8rem; border-radius: var(--ip-radius-sm); background: color-mix(in srgb, var(--ip-warn) 10%, transparent); border: 1px solid color-mix(in srgb, var(--ip-warn) 25%, transparent); font-size: var(--ip-text-xs); color: var(--ip-ink-dim); text-align: center; } .ip-chat-zeile { display: flex; justify-content: flex-start; } .ip-chat-zeile.is-eigene { justify-content: flex-end; } .ip-chat-zeile.is-neu { margin-top: var(--ip-2); } .ip-chat-blase { position: relative; max-width: min(64ch, 78%); padding: 0.4rem 0.65rem 0.3rem; border-radius: 12px; background: var(--ip-surface-raised); border: 1px solid var(--ip-line); box-shadow: 0 1px 1px rgb(0 0 0 / 0.12); } .ip-chat-zeile.is-neu .ip-chat-blase { border-radius: 12px 12px 12px 4px; } .ip-chat-zeile.is-eigene.is-neu .ip-chat-blase { border-radius: 12px 12px 4px 12px; } .ip-chat-zeile.is-eigene .ip-chat-blase { background: color-mix(in srgb, var(--ip-signal) 16%, var(--ip-surface-raised)); border-color: color-mix(in srgb, var(--ip-signal) 34%, transparent); } .ip-chat-zeile:not(.is-eigene) .ip-chat-blase { border-left: 2px solid var(--beteiligt, var(--ip-line-strong)); } .ip-chat-von { margin-bottom: 1px; font-size: var(--ip-text-xs); font-weight: 600; color: var(--beteiligt, var(--ip-signal)); } .ip-chat-text { font-size: var(--ip-text-sm); line-height: 1.45; color: var(--ip-ink); overflow-wrap: anywhere; } .ip-chat-text mark { background: color-mix(in srgb, var(--ip-warn) 40%, transparent); color: var(--ip-ink); padding: 0 2px; border-radius: 2px; } .ip-chat-fuss { display: flex; align-items: baseline; justify-content: flex-end; gap: var(--ip-2); margin-top: 1px; font-family: var(--ip-font-mono); font-size: 0.66rem; color: var(--ip-ink-faint); white-space: nowrap; } .ip-chat-eigenname { font-family: var(--ip-font-body); } .ip-chat-medium { display: flex; align-items: center; gap: var(--ip-2); margin-bottom: var(--ip-1); padding: 0.35rem 0.5rem; border-radius: var(--ip-radius-sm); background: var(--ip-surface-sunken); border: 1px solid var(--ip-line); font-size: var(--ip-text-xs); color: var(--ip-ink-dim); } .ip-chat-medium > i { flex-shrink: 0; font-size: 0.95rem; color: var(--ip-ink-faint); } .ip-chat-medium-meta { margin-left: auto; flex-shrink: 0; font-family: var(--ip-font-mono); font-variant-numeric: tabular-nums; color: var(--ip-ink-faint); } .ip-chat-reaktionen { display: flex; flex-wrap: wrap; gap: 3px; margin: var(--ip-1) 0 -0.5rem; } .ip-chat-reaktion { display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px; border-radius: 999px; background: var(--ip-surface); border: 1px solid var(--ip-line-strong); font-size: 0.7rem; line-height: 1.4; } .ip-chat-reaktion b { font-weight: 600; color: var(--ip-ink-dim); font-size: 0.65rem; } @media (max-width: 576px) { .ip-chat-blase { max-width: 88%; } } @media print { .ip-chat-blase { break-inside: avoid; box-shadow: none; } .ip-chat-zeile.is-eigene { justify-content: flex-start; } } /* --- Berichtsinhalt -------------------------------------------------------- Ein Bericht ist ein Fliesstextdokument. Die kondensierte Auszeichnungsschrift der Oberflaeche gehoert dort nicht hinein. --------------------------------------------------------------------------- */ .ip-report-body { max-width: 82ch; font-size: var(--ip-text-base); line-height: 1.7; } .ip-report-body h1, .ip-report-body h2, .ip-report-body h3, .ip-report-body h4, .ip-report-body h5, .ip-report-body h6 { font-family: var(--ip-font-body) !important; font-weight: 600; letter-spacing: 0; } .ip-report-body h2 { font-size: 1.5rem; margin-top: var(--ip-5); } .ip-report-body h3 { font-size: 1.25rem; margin-top: var(--ip-4); } .ip-report-body p { margin-bottom: var(--ip-3); } .ip-report-body table { width: 100%; margin: var(--ip-3) 0; border-collapse: collapse; font-size: var(--ip-text-sm); } .ip-report-body th, .ip-report-body td { padding: 0.4rem 0.6rem; border: 1px solid var(--ip-line); text-align: left; } .ip-report-body th { background: var(--ip-surface-sunken); color: var(--ip-ink-dim); font-weight: 600; } .ip-report-body blockquote { margin: var(--ip-3) 0; padding-left: var(--ip-4); border-left: 2px solid var(--ip-line-strong); color: var(--ip-ink-dim); } .ip-report-body pre { padding: var(--ip-3); background: var(--ip-surface-sunken); border: 1px solid var(--ip-line); border-radius: var(--ip-radius-sm); overflow-x: auto; font-size: var(--ip-text-xs); } /* --- Summernote ------------------------------------------------------------ Bringt eigene, helle Vorgaben mit und misst seine Breite beim Aufsetzen. --------------------------------------------------------------------------- */ .note-editor.note-frame { width: 100% !important; margin-bottom: 0; border: 1px solid var(--ip-line) !important; border-radius: var(--ip-radius-sm); background: var(--ip-surface-sunken); } .note-editor + textarea, textarea#inhalt { display: none !important; } .note-toolbar { display: flex; flex-wrap: wrap; gap: 2px; background: var(--ip-surface-sunken) !important; border-bottom: 1px solid var(--ip-line) !important; padding: var(--ip-1) !important; } .note-btn-group { display: inline-flex; gap: 1px; margin-right: var(--ip-2); } .note-editable { min-height: 320px; background: var(--ip-surface) !important; color: var(--ip-ink) !important; font-family: var(--ip-font-body) !important; font-size: var(--ip-text-base) !important; line-height: 1.7 !important; padding: var(--ip-4) !important; } .note-editable h1, .note-editable h2, .note-editable h3, .note-editable h4, .note-editable h5, .note-editable h6, .note-style .dropdown-style h1, .note-style .dropdown-style h2, .note-style .dropdown-style h3, .note-style .dropdown-style h4, .note-style .dropdown-style h5, .note-style .dropdown-style h6 { font-family: var(--ip-font-body) !important; font-weight: 600; letter-spacing: 0; } .note-editable table { width: 100%; border-collapse: collapse; margin: var(--ip-3) 0; } .note-editable table th, .note-editable table td { border: 1px solid var(--ip-line); padding: 0.35rem 0.55rem; } .note-editable table th { background: var(--ip-surface-sunken); } .note-editable blockquote { margin: var(--ip-3) 0; padding-left: var(--ip-4); border-left: 2px solid var(--ip-line-strong); color: var(--ip-ink-dim); } .note-btn { min-width: 32px; background: transparent !important; border-color: var(--ip-line) !important; color: var(--ip-ink-dim) !important; } .note-btn:hover { background: var(--ip-surface-raised) !important; color: var(--ip-ink) !important; } .note-btn.active { background: color-mix(in srgb, var(--ip-signal) 18%, transparent) !important; color: var(--ip-signal) !important; } .note-dropdown-menu { background: var(--ip-surface-raised) !important; border: 1px solid var(--ip-line-strong) !important; border-radius: var(--ip-radius) !important; box-shadow: var(--ip-shadow-lg); color: var(--ip-ink) !important; padding: var(--ip-1) !important; } .note-dropdown-item, .note-dropdown-menu > li > a { border-radius: var(--ip-radius-sm); color: var(--ip-ink-dim) !important; padding: 0.3rem 0.6rem !important; } .note-dropdown-item:hover, .note-dropdown-menu > li > a:hover { background: var(--ip-surface-sunken) !important; color: var(--ip-ink) !important; } .note-statusbar { background: var(--ip-surface-sunken) !important; border-top: 1px solid var(--ip-line) !important; } .note-resizebar .note-icon-bar { border-color: var(--ip-line-strong) !important; } .note-placeholder { color: var(--ip-ink-faint) !important; padding: var(--ip-4) !important; } .note-modal-content { background: var(--ip-surface) !important; color: var(--ip-ink) !important; border: 1px solid var(--ip-line-strong); } .note-modal-header, .note-modal-footer { background: var(--ip-surface-sunken) !important; border-color: var(--ip-line) !important; } .note-modal .form-control { background: var(--ip-surface-sunken); color: var(--ip-ink); } .note-codable { background: var(--ip-surface-sunken) !important; color: var(--ip-ink) !important; font-family: var(--ip-font-mono) !important; font-size: var(--ip-text-xs) !important; } .note-editor.fullscreen { z-index: 1050; } @media print { .ip-report-body { max-width: none; color: #000; } .ip-report-body th { background: #eee; } } /* --------------------------------------------------------------------------- 13f EREIGNIS-ZEITACHSE --------------------------------------------------------------------------- Die Einstiegsansicht eines Mitschnitts. Wichtigste gestalterische Entscheidung: die Belegqualitaet ist doppelt kodiert – als Farbe der linken Kante und als Abzeichen im Text. Wer durch die Liste scrollt, sieht ohne zu lesen, wo die belastbaren Stellen sind. --------------------------------------------------------------------------- */ .ip-filterzeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ip-1); margin-bottom: var(--ip-2); } .ip-filterzeile:last-child { margin-bottom: 0; } .ip-filterlabel { min-width: 7.5rem; font-size: var(--ip-text-xs); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ip-ink-faint); } .ip-filterknopf { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.65rem; border: 1px solid var(--ip-line); border-radius: 999px; background: var(--ip-surface-sunken); color: var(--ip-ink-dim); font-size: var(--ip-text-xs); line-height: 1.6; cursor: pointer; transition: border-color var(--ip-transition), color var(--ip-transition), background-color var(--ip-transition); } .ip-filterknopf b { font-weight: 600; font-variant-numeric: tabular-nums; } .ip-filterknopf:hover { border-color: var(--ip-line-strong); color: var(--ip-ink); } .ip-filterknopf.is-aktiv { border-color: var(--ip-signal); background: color-mix(in srgb, var(--ip-signal) 14%, transparent); color: var(--ip-signal); } .ip-filterknopf.ist-belegt.is-aktiv { border-color: var(--ip-ok); background: color-mix(in srgb, var(--ip-ok) 14%, transparent); color: var(--ip-ok); } .ip-filterknopf.ist-wahrscheinlich.is-aktiv { border-color: var(--ip-warn); background: color-mix(in srgb, var(--ip-warn) 14%, transparent); color: var(--ip-warn); } .ip-filterknopf.ist-moeglich.is-aktiv { border-color: var(--ip-line-strong); background: var(--ip-surface-raised); color: var(--ip-ink-dim); } /* Tagestrenner */ .ip-ereignis-tag { position: sticky; top: var(--ip-topbar-h); z-index: 3; margin: var(--ip-4) 0 var(--ip-2); padding: 0.3rem var(--ip-3); background: color-mix(in srgb, var(--ip-surface) 92%, transparent); backdrop-filter: blur(6px); border-radius: var(--ip-radius-sm); border: 1px solid var(--ip-line); font-family: var(--ip-font-display); font-size: 0.95rem; letter-spacing: 0.05em; color: var(--ip-ink-dim); } .ip-ereignis-tag:first-child { margin-top: 0; } /* Ein Vorgang */ .ip-ereignis { display: grid; grid-template-columns: 4.5rem 3px minmax(0, 1fr) auto; align-items: start; gap: var(--ip-3); padding: var(--ip-3) var(--ip-3) var(--ip-3) 0; border-bottom: 1px solid var(--ip-line); } .ip-ereignis:last-child { border-bottom: 0; } .ip-ereignis:hover { background: var(--ip-surface-sunken); } .ip-ereignis-zeit { font-family: var(--ip-font-mono); font-variant-numeric: tabular-nums; font-size: var(--ip-text-sm); color: var(--ip-ink-dim); padding-top: 1px; text-align: right; } /* Farbige Kante: dieselbe Aussage wie das Abzeichen, ohne Lesen erfassbar */ .ip-ereignis-kante { align-self: stretch; min-height: 2.5rem; border-radius: 0; background: var(--ip-line-strong); } .ip-ereignis[data-sicherheit="belegt"] .ip-ereignis-kante { background: var(--ip-ok); } .ip-ereignis[data-sicherheit="wahrscheinlich"] .ip-ereignis-kante { background: var(--ip-warn); } .ip-ereignis[data-sicherheit="moeglich"] .ip-ereignis-kante { background: var(--ip-neutral); } .ip-ereignis-inhalt { min-width: 0; } .ip-ereignis-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ip-2); } .ip-ereignis-symbol { font-size: 1rem; color: var(--ip-ink-dim); } .ip-ereignis[data-art="anruf"] .ip-ereignis-symbol { color: var(--ip-ok); } .ip-ereignis[data-art="verbindung"] .ip-ereignis-symbol { color: var(--ip-signal); } .ip-ereignis-titel { font-weight: 600; font-size: var(--ip-text-base); color: var(--ip-ink); } .ip-ereignis-zeile2 { margin-top: 2px; font-size: var(--ip-text-sm); color: var(--ip-ink-dim); } .ip-ereignis-endpunkte { margin-top: 2px; font-size: var(--ip-text-xs); color: var(--ip-ink-faint); overflow-wrap: anywhere; } .ip-ereignis-schwach { color: var(--ip-ink-faint); } /* Worauf die Einordnung beruht. Bewusst leise gesetzt, aber immer sichtbar – nicht hinter einem Aufklappen versteckt. */ .ip-ereignis-grundlage { margin-top: var(--ip-1); padding-top: var(--ip-1); border-top: 1px dashed var(--ip-line); font-size: 0.7rem; color: var(--ip-ink-faint); } .ip-ereignis-knopf { align-self: start; white-space: nowrap; } .ip-ereignis-hinweis { padding: var(--ip-3); text-align: center; font-size: var(--ip-text-sm); color: var(--ip-ink-faint); } /* Abzeichen der Belegqualitaet */ .ip-beleg.ist-belegt { color: var(--ip-ok); background: color-mix(in srgb, var(--ip-ok) 14%, transparent); border-color: color-mix(in srgb, var(--ip-ok) 32%, transparent); } .ip-beleg.ist-wahrscheinlich { color: var(--ip-warn); background: color-mix(in srgb, var(--ip-warn) 14%, transparent); border-color: color-mix(in srgb, var(--ip-warn) 32%, transparent); } .ip-beleg.ist-moeglich { color: var(--ip-ink-dim); background: var(--ip-surface-raised); border-color: var(--ip-line-strong); } /* Belegansicht */ .ip-beleg-kopf { margin-bottom: var(--ip-4); } .ip-beleg-einordnung { display: flex; align-items: center; gap: var(--ip-2); margin-bottom: var(--ip-3); padding: var(--ip-2) var(--ip-3); border-radius: var(--ip-radius-sm); background: var(--ip-surface-sunken); border: 1px solid var(--ip-line); font-size: var(--ip-text-sm); color: var(--ip-ink-dim); } .ip-beleg-daten { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0.3rem var(--ip-3); margin: 0; font-size: var(--ip-text-sm); } .ip-beleg-daten dt { color: var(--ip-ink-faint); font-weight: 400; } .ip-beleg-daten dd { margin: 0; color: var(--ip-ink); overflow-wrap: anywhere; } .ip-beleg-ueberschrift { margin: var(--ip-4) 0 var(--ip-2); font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ip-ink-dim); } @media (max-width: 768px) { .ip-ereignis { grid-template-columns: 3.6rem 3px minmax(0, 1fr); } .ip-ereignis-knopf { grid-column: 3; margin-top: var(--ip-2); } .ip-filterlabel { min-width: 100%; } .ip-beleg-daten { grid-template-columns: 1fr; } .ip-beleg-daten dt { margin-top: var(--ip-2); } } /* --------------------------------------------------------------------------- 14 THEMA-UMSCHALTER --------------------------------------------------------------------------- */ .ip-theme-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--ip-line); border-radius: 999px; background: var(--ip-surface-sunken); } .ip-theme-toggle button { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--ip-ink-faint); cursor: pointer; font-size: 0.85rem; transition: background-color var(--ip-transition), color var(--ip-transition); } .ip-theme-toggle button:hover { color: var(--ip-ink); } .ip-theme-toggle button[aria-pressed="true"] { background: var(--ip-surface-raised); color: var(--ip-signal); box-shadow: inset 0 0 0 1px var(--ip-line-strong); } /* --------------------------------------------------------------------------- 15 ANMELDESEITE --------------------------------------------------------------------------- Der Hintergrund nimmt die ganze Flaeche ein, das Formular schwebt mittig darueber. Die fruehere Zweiteilung liess auf breiten Bildschirmen zwei grosse leere Felder stehen; so bleibt die Seite auf jeder Breite ruhig. --------------------------------------------------------------------------- */ .ip-login { position: relative; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--ip-5); overflow: hidden; background: radial-gradient(1100px 700px at 12% 8%, color-mix(in srgb, var(--ip-signal) 13%, transparent), transparent 60%), radial-gradient(900px 600px at 88% 92%, color-mix(in srgb, var(--ip-trace) 9%, transparent), transparent 60%), var(--ip-void); } /* Paketspuren: ruhig und kontrastarm, damit sie das Formular nicht stoeren */ .ip-login-lanes { position: absolute; inset: 0; opacity: 0.5; pointer-events: none; } .ip-login-lanes span { position: absolute; left: -30%; width: 130%; height: 1px; background: linear-gradient(90deg, transparent, var(--ip-signal), transparent); opacity: 0; animation: ip-lane 9s linear infinite; } .ip-login-lanes span:nth-child(1) { top: 18%; animation-delay: 0s; } .ip-login-lanes span:nth-child(2) { top: 37%; animation-delay: 2.2s; } .ip-login-lanes span:nth-child(3) { top: 62%; animation-delay: 4.4s; } .ip-login-lanes span:nth-child(4) { top: 81%; animation-delay: 6.6s; } @keyframes ip-lane { 0% { transform: translateX(-40%) scaleX(0.3); opacity: 0; } 12% { opacity: 0.5; } 60% { opacity: 0.18; } 100% { transform: translateX(40%) scaleX(1); opacity: 0; } } /* Marke oben links, Version unten links – rahmen die Flaeche, ohne dem Formular Aufmerksamkeit zu nehmen. */ .ip-login-mark { position: absolute; z-index: 2; top: var(--ip-6); left: var(--ip-6); } .ip-login-meta { position: absolute; z-index: 2; bottom: var(--ip-5); left: var(--ip-6); display: flex; flex-wrap: wrap; gap: var(--ip-4); font-family: var(--ip-font-mono); font-size: var(--ip-text-xs); letter-spacing: 0.04em; color: var(--ip-ink-faint); } .ip-login-claim { position: absolute; z-index: 2; bottom: var(--ip-5); right: var(--ip-6); max-width: 34ch; text-align: right; font-size: var(--ip-text-sm); line-height: 1.5; color: var(--ip-ink-faint); } /* Die schwebende Karte */ .ip-login-panel { position: relative; z-index: 3; width: 100%; max-width: 402px; padding: var(--ip-6) var(--ip-5) var(--ip-5); border: 1px solid var(--ip-line-strong); border-radius: var(--ip-radius-lg); background: color-mix(in srgb, var(--ip-surface) 94%, transparent); backdrop-filter: blur(14px); box-shadow: var(--ip-shadow-lg); } /* Haarlinie oben in Markenfarbe – dasselbe Mittel wie auf den Karten */ .ip-login-panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; border-radius: var(--ip-radius-lg) var(--ip-radius-lg) 0 0; background: linear-gradient(90deg, var(--ip-signal), var(--ip-brand-sub)); } .ip-login-form { width: 100%; } .ip-login-form h1 { font-size: 1.5rem; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: var(--ip-1); } .ip-login-form .ip-login-hint { color: var(--ip-ink-dim); font-size: var(--ip-text-sm); margin-bottom: var(--ip-5); } .ip-login-form .form-control { padding: 0.625rem 0.75rem; } .ip-login-form .btn-primary { width: 100%; padding: 0.625rem; } .ip-login-foot { margin-top: var(--ip-5); padding-top: var(--ip-3); border-top: 1px solid var(--ip-line); display: flex; justify-content: space-between; gap: var(--ip-2); font-family: var(--ip-font-mono); font-size: var(--ip-text-xs); color: var(--ip-ink-faint); } /* Auf kleinen Bildschirmen tritt das Beiwerk zurueck */ @media (max-width: 860px) { .ip-login { padding: var(--ip-4); } .ip-login-claim { display: none; } .ip-login-mark { position: static; margin-bottom: var(--ip-5); } .ip-login-meta { position: static; margin-top: var(--ip-4); justify-content: center; } .ip-login { grid-auto-flow: row; align-content: center; justify-items: center; } } @media (max-height: 700px) { .ip-login-mark, .ip-login-meta, .ip-login-claim { display: none; } } /* --------------------------------------------------------------------------- 16 RESPONSIV --------------------------------------------------------------------------- */ @media (max-width: 992px) { .sidebar { transform: translateX(-100%); transition: transform var(--ip-transition); } body.sidebar-open .sidebar { transform: none; box-shadow: var(--ip-shadow-lg); } .ip-topbar, .navbar, .ip-main, .content { margin-left: 0 !important; } .ip-main, .content { padding: var(--ip-4) var(--ip-3); } .ip-topbar, .navbar { padding-inline: var(--ip-3); } } /* Abdunklung hinter der eingeblendeten Leiste */ .ip-sidebar-scrim { position: fixed; inset: 0; z-index: 1025; background: rgb(4 9 15 / 0.6); backdrop-filter: blur(2px); } .ip-sidebar-scrim[hidden] { display: none; } @media (min-width: 993px) { .ip-sidebar-scrim { display: none !important; } } @media (max-width: 576px) { .ip-kpi-value { font-size: 2rem; } .modal-body { padding: var(--ip-4); } } /* --------------------------------------------------------------------------- 17 BEWEGUNG UND DRUCK --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .ip-login-lanes { display: none; } } @media print { .sidebar, .ip-topbar, .navbar, .ip-theme-toggle, .btn { display: none !important; } .ip-main, .content { margin: 0; padding: 0; } .ip-card, .card { break-inside: avoid; border: 1px solid #999; box-shadow: none; } body { background: #fff; color: #000; } }