/* ============================================================ envisia UI — zentrales Designsystem (Variante F „Lime & Ink") ------------------------------------------------------------ ALLE Farben liegen als CSS-Variablen (Tokens) in den beiden Blöcken unten: :root = HELLES Design (Default), [data-theme="dark"] = DUNKLES Design. Farbänderungen bitte NUR dort vornehmen — Komponenten greifen ausschließlich auf var(--ev-…) zu. Das Theme wird über data-theme="light|dark" auf gesetzt (Cookie "evtheme", Default hell; siehe Standard.master). Präfix aller Klassen: ev- ============================================================ */ :root { /* Flächen & Text */ --ev-bg: #F4F6F1; /* Seitenhintergrund */ --ev-card: #FFFFFF; /* Karten / Panels */ --ev-border: #E3E8DD; /* Rahmen */ --ev-border-soft: #EEF1EA; /* feine Trennlinien */ --ev-text: #1A1D16; /* Standardtext */ --ev-muted: #6B7263; /* gedämpfter Text / Labels */ --ev-soft: #4A5245; /* Sekundärtext (zwischen Text und gedämpft) */ --ev-accent-text: #64810A; /* Lime als TEXT-Farbe (lesbare Stufe je Theme) */ /* Marke */ --ev-ink: #171B10; /* envisia-Tinte (Kopfleiste, Primärbuttons hell) */ --ev-lime: #A9D600; /* envisia-Lime (Akzent, aktive Zustände) */ --ev-lime-strong: #C9E44D; /* helleres Lime (Buttontext auf Tinte) */ /* Bedienelemente */ --ev-btn-primary-bg: #171B10; --ev-btn-primary-fg: #C9E44D; --ev-btn2-border: #D6DCCE; --ev-seg-bg: #ECEFE7; --ev-seg-active: #FFFFFF; --ev-input-bg: #FFFFFF; --ev-shadow: 0 1px 2px rgba(23, 27, 16, .05); /* Semantik */ --ev-crit: #B3402F; --ev-crit-bg: #FBEAE6; --ev-good: #2E7D4F; --ev-good-bg: #E7F3EA; --ev-warn: #A8730F; --ev-warn-bg: #FBF3E1; --ev-info: #2F6FB3; --ev-info-bg: #E7F0FB; --ev-neutral: #6B7263; --ev-neutral-bg: #EEF1EA; /* Bereichsfarben (fix in beiden Themes): 1 Lizenzen · 2 Dienstleistung · 3 Module · 4 Verbräuche · 5 Hardware · 6 Sonstiges */ --ev-cat1: #E9C46A; --ev-cat1-text: #8A6A1B; --ev-cat1-bg: rgba(233, 196, 106, .18); --ev-cat2: #3E9BFF; --ev-cat2-text: #2264AC; --ev-cat2-bg: rgba(62, 155, 255, .14); --ev-cat3: #6FC894; --ev-cat3-text: #2E7D4F; --ev-cat3-bg: rgba(111, 200, 148, .18); --ev-cat4: #B48EF0; --ev-cat4-text: #6E4BAE; --ev-cat4-bg: rgba(180, 142, 240, .16); --ev-cat5: #ED8B4E; --ev-cat5-text: #A85721; --ev-cat5-bg: rgba(237, 139, 78, .16); --ev-cat6: #9AA3AB; --ev-cat6-text: #5D666E; --ev-cat6-bg: rgba(154, 163, 171, .18); } [data-theme="dark"] { --ev-bg: #121517; --ev-card: #1A1E21; --ev-border: #2A3034; --ev-border-soft: #22272B; --ev-text: #E8EBE6; --ev-muted: #78827B; --ev-soft: #AEB6AC; --ev-accent-text: #C9E44D; --ev-btn-primary-bg: #C9E44D; --ev-btn-primary-fg: #171B10; --ev-btn2-border: #343B40; --ev-seg-bg: #15181B; --ev-seg-active: #262B2F; --ev-input-bg: #121517; --ev-shadow: none; --ev-crit: #E8907F; --ev-crit-bg: rgba(232, 121, 106, .16); --ev-good: #8FD6A9; --ev-good-bg: rgba(111, 200, 148, .18); --ev-warn: #E0B354; --ev-warn-bg: rgba(224, 179, 84, .18); --ev-info: #7FB5F0; --ev-info-bg: rgba(106, 169, 240, .16); --ev-neutral: #9AA48F; --ev-neutral-bg: #22272B; --ev-cat1-text: #E9C46A; --ev-cat2-text: #6AB2FF; --ev-cat3-text: #8AD8AC; --ev-cat4-text: #C6A6F4; --ev-cat5-text: #F4A272; --ev-cat6-text: #A9B2BA; } /* Basis (ehemals StandardSite.css) */ body { margin: 0; background-image: none; background-color: var(--ev-bg); color: var(--ev-text); font-family: "Segoe UI", system-ui, sans-serif; font-size: 13.5px; } a { color: var(--ev-info); text-decoration: none; } a:hover { text-decoration: none; } h1, h2 { margin: 0; padding: 0; font-weight: normal; } /* box-sizing nur im ev-Namensraum — Alt-Layouts bleiben unberührt */ [class^="ev-"], [class*=" ev-"], [class^="ev-"] *, [class*=" ev-"] * { box-sizing: border-box; } /* ---------- Typo-Utilities ---------- */ .ev-h1 { margin: 0; font-family: "Archivo", "Segoe UI", sans-serif; font-size: 26px; font-weight: 700; letter-spacing: -.01em; color: var(--ev-text); } .ev-h2 { margin: 0; font-family: "Archivo", "Segoe UI", sans-serif; font-size: 17px; font-weight: 700; color: var(--ev-text); } .ev-mono { font-family: "JetBrains Mono", Consolas, monospace; } .ev-num { font-variant-numeric: tabular-nums; } .ev-micro { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ev-muted); } .ev-muted { color: var(--ev-muted); } .ev-right { text-align: right; } /* ---------- Kopfleiste (konstant dunkel in beiden Themes) ---------- */ .ev-header { background: #171B10; height: 56px; padding: 0 20px; display: flex; align-items: center; gap: 16px; position: sticky; top: 0; z-index: 50; } .ev-header-brand { display: flex; align-items: center; gap: 10px; flex: none; } .ev-header-logo { height: 28px; width: 28px; border: 0; display: block; } .ev-wordmark { display: flex; align-items: baseline; gap: 6px; font-family: "Archivo", "Segoe UI", sans-serif; white-space: nowrap; } .ev-wordmark .ev-wm-name { color: #FFFFFF; font-weight: 800; font-size: 17px; } .ev-wordmark .ev-wm-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--ev-lime); display: inline-block; } .ev-wordmark .ev-wm-sub { color: #9AA48F; font-weight: 500; font-size: 13px; } .ev-nav { display: flex; align-items: stretch; gap: 2px; height: 100%; flex: 1; min-width: 0; } .ev-nav-item { display: flex; align-items: center; padding: 0 12px; cursor: pointer; color: #C7CDBE; font-size: 14px; font-weight: 500; text-decoration: none; border-bottom: 3px solid transparent; border-top: 3px solid transparent; user-select: none; white-space: nowrap; } .ev-nav-item:hover { color: #FFFFFF; text-decoration: none; } .ev-nav-item.active { color: #DDE8B8; border-bottom-color: var(--ev-lime); font-weight: 600; } .ev-nav-group { position: relative; display: flex; height: 100%; } .ev-nav-top { gap: 5px; } .ev-nav-top svg { opacity: .65; } .ev-nav-menu { position: absolute; top: 100%; left: 0; min-width: 200px; background: #171B10; border: 1px solid #2E3524; border-top: 0; border-radius: 0 0 10px 10px; padding: 6px; display: none; flex-direction: column; gap: 2px; z-index: 60; box-shadow: 0 12px 24px rgba(0, 0, 0, .28); } .ev-nav-group.open .ev-nav-menu { display: flex; } .ev-nav-group.open > .ev-nav-top { color: #FFFFFF; } .ev-nav-menu .ev-nav-item { border-radius: 6px; padding: 9px 12px; height: auto; border-bottom-color: transparent; border-top-color: transparent; } .ev-nav-menu .ev-nav-item:hover { background: #262B1E; } .ev-nav-menu .ev-nav-item.active { color: var(--ev-lime-strong); border-bottom-color: transparent; } .ev-nav-group.active > .ev-nav-top { color: #DDE8B8; border-bottom-color: var(--ev-lime); font-weight: 600; } .ev-header-right { display: flex; align-items: center; gap: 14px; flex: none; margin-left: auto; } .ev-theme-toggle { display: flex; align-items: center; background: #262B1E; border-radius: 999px; padding: 3px; gap: 2px; } .ev-theme-btn { width: 28px; height: 24px; border-radius: 999px; border: 0; background: transparent; color: #9AA48F; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .ev-theme-btn.active { background: #171B10; color: var(--ev-lime-strong); } .ev-userchip { width: 32px; height: 32px; border-radius: 999px; background: #262B1E; color: #DDE8B8; display: flex; align-items: center; justify-content: center; font-family: "Archivo", "Segoe UI", sans-serif; font-weight: 700; font-size: 12px; } .ev-iconbtn-dark { width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: #9AA48F; display: flex; align-items: center; justify-content: center; cursor: pointer; } .ev-iconbtn-dark:hover { color: #FFFFFF; background: #262B1E; } @media (max-width: 1320px) { .ev-wordmark .ev-wm-sub { display: none; } } @media (max-width: 960px) { .ev-nav-item { padding: 0 7px; font-size: 12px; } } /* ---------- Seiten-Layout ---------- */ .ev-page { max-width: 1600px; margin: 0 auto; padding: 24px 32px 48px; color: var(--ev-text); font-family: "Segoe UI", system-ui, sans-serif; font-size: 13.5px; line-height: 1.45; } .ev-page.full { max-width: none; } .ev-pagehead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; } .ev-stack { display: flex; flex-direction: column; gap: 18px; } .ev-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ev-spacer { flex: 1; } .ev-duo { display: grid; grid-template-columns: 54fr 46fr; gap: 18px; align-items: start; } .ev-duo > :only-child { grid-column: 1 / -1; } .ev-postype { color: var(--ev-info); font-weight: 600; font-size: 12px; } /* Icon-Links (z. B. FontAwesome-Aktionen in Tabellenzeilen) */ .ev-iconlink { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; font-size: 14px; color: var(--ev-muted); text-decoration: none; cursor: pointer; } .ev-iconlink:hover { background: var(--ev-border-soft); color: var(--ev-text); text-decoration: none; } .ev-iconlink.good { color: var(--ev-good); } .ev-iconlink.good:hover { color: var(--ev-good); } .ev-iconlink.crit:hover { color: var(--ev-crit); background: var(--ev-crit-bg); } /* ---------- Karten ---------- */ .ev-card { background: var(--ev-card); border: 1px solid var(--ev-border); border-radius: 12px; box-shadow: var(--ev-shadow); padding: 18px 20px; overflow-x: auto; } .ev-card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } /* ---------- Buttons ---------- */ .ev-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--ev-btn2-border); background: var(--ev-card); color: var(--ev-text); font-family: "Archivo", "Segoe UI", sans-serif; font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; text-decoration: none; } .ev-btn:hover { border-color: var(--ev-muted); text-decoration: none; color: var(--ev-text); } .ev-btn.primary { background: var(--ev-btn-primary-bg); color: var(--ev-btn-primary-fg); border-color: transparent; } .ev-btn.primary:hover { opacity: .92; color: var(--ev-btn-primary-fg); } .ev-btn.crit { color: var(--ev-crit); border-color: var(--ev-crit-bg); } .ev-btn.crit:hover { color: var(--ev-crit); } .ev-btn.small { height: 30px; padding: 0 12px; font-size: 12px; } .ev-btn.iconbtn { width: 36px; padding: 0; justify-content: center; } .ev-btn.small.iconbtn { width: 30px; } .ev-btn .ev-badge { min-width: 17px; height: 17px; border-radius: 999px; background: var(--ev-crit); color: #FFFFFF; font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; } /* ---------- Segmented Control ---------- */ .ev-seg { display: inline-flex; background: var(--ev-seg-bg); border: 1px solid var(--ev-border); border-radius: 10px; padding: 3px; gap: 2px; } .ev-seg-item { border: 0; background: transparent; color: var(--ev-muted); cursor: pointer; height: 32px; padding: 0 14px; border-radius: 8px; display: inline-flex; align-items: center; font-family: "Archivo", "Segoe UI", sans-serif; font-weight: 600; font-size: 13px; white-space: nowrap; text-decoration: none; } .ev-seg-item:hover { color: var(--ev-text); text-decoration: none; } .ev-seg-item.active { background: var(--ev-seg-active); color: var(--ev-text); box-shadow: var(--ev-shadow); } /* ---------- Chips ---------- */ .ev-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ev-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--ev-btn2-border); background: var(--ev-card); color: var(--ev-text); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none; } .ev-chip:hover { border-color: var(--ev-muted); text-decoration: none; color: var(--ev-text); } .ev-chip .ev-chip-count { color: var(--ev-muted); font-weight: 500; font-variant-numeric: tabular-nums; } .ev-chip.active { background: var(--ev-ink); border-color: var(--ev-ink); color: var(--ev-lime-strong); } .ev-chip.active .ev-chip-count { color: #9AA48F; } /* ---------- KPI-Kacheln ---------- */ .ev-kpis { display: grid; gap: 12px; } .ev-kpis.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ev-kpis.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .ev-kpis.cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .ev-kpi { background: var(--ev-card); border: 1px solid var(--ev-border); border-radius: 12px; box-shadow: var(--ev-shadow); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ev-text); } .ev-kpi-value { font-family: "Archivo", "Segoe UI", sans-serif; font-weight: 700; font-size: 24px; color: var(--ev-text); font-variant-numeric: tabular-nums; } .ev-kpi-sub { font-size: 12px; color: var(--ev-muted); } .ev-kpi.crit .ev-kpi-value { color: var(--ev-crit); } .ev-kpi.good .ev-kpi-value { color: var(--ev-good); } .ev-kpi.total { background: #171B10; border-color: #171B10; } .ev-kpi.total .ev-micro { color: #9AA48F; } .ev-kpi.total .ev-kpi-value { color: var(--ev-lime-strong); } .ev-kpi.total .ev-kpi-sub { color: #C7CDBE; } .ev-kpi.cat { border-top: 4px solid var(--cat, var(--ev-border)); } /* ---------- Pillen & Punkte ---------- */ .ev-pill { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; } .ev-pill.crit { background: var(--ev-crit-bg); color: var(--ev-crit); } .ev-pill.good { background: var(--ev-good-bg); color: var(--ev-good); } .ev-pill.warn { background: var(--ev-warn-bg); color: var(--ev-warn); } .ev-pill.info { background: var(--ev-info-bg); color: var(--ev-info); } .ev-pill.neutral { background: var(--ev-neutral-bg); color: var(--ev-neutral); } .ev-pill.cat1 { background: var(--ev-cat1-bg); color: var(--ev-cat1-text); } .ev-pill.cat2 { background: var(--ev-cat2-bg); color: var(--ev-cat2-text); } .ev-pill.cat3 { background: var(--ev-cat3-bg); color: var(--ev-cat3-text); } .ev-pill.cat4 { background: var(--ev-cat4-bg); color: var(--ev-cat4-text); } .ev-pill.cat5 { background: var(--ev-cat5-bg); color: var(--ev-cat5-text); } .ev-pill.cat6 { background: var(--ev-cat6-bg); color: var(--ev-cat6-text); } .ev-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; flex: none; } /* ---------- Tabellen ---------- */ .ev-table { width: 100%; border-collapse: collapse; } .ev-table th { text-align: left; padding: 0 12px 8px; border-bottom: 1px solid var(--ev-border); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ev-muted); white-space: nowrap; } .ev-table td { padding: 0 12px; height: 42px; border-bottom: 1px solid var(--ev-border-soft); font-size: 13px; color: var(--ev-text); font-variant-numeric: tabular-nums; } .ev-table th.ev-right, .ev-table td.ev-right { text-align: right; } .ev-table tr.ev-clickable { cursor: pointer; } .ev-table tr.ev-clickable:hover td { background: var(--ev-border-soft); } .ev-table tr:last-child td { border-bottom: 0; } .ev-table tfoot td, .ev-table tr.ev-sumrow td { border-top: 2px solid var(--ev-ink); border-bottom: 0; font-family: "Archivo", "Segoe UI", sans-serif; font-weight: 600; height: 46px; } [data-theme="dark"] .ev-table tfoot td, [data-theme="dark"] .ev-table tr.ev-sumrow td { border-top-color: var(--ev-lime-strong); } .ev-table th a { color: inherit; text-decoration: none; } .ev-table th a:hover { color: var(--ev-text); } .ev-table td a { color: var(--ev-info); text-decoration: none; font-weight: 600; } .ev-table td a:hover { text-decoration: underline; } .ev-table.rows-hover tr:hover td { background: var(--ev-border-soft); } .ev-table span.ev-cell-good, .ev-table span.ev-cell-warn, .ev-table span.ev-cell-crit { padding: 3px 8px; white-space: nowrap; } .ev-table td .ev-pill { vertical-align: middle; } .ev-table.compact th { font-size: 10.5px; padding: 0 10px 6px; } .ev-table.compact td { height: 32px; font-size: 12.5px; padding: 0 10px; } .ev-table.vtop td { vertical-align: top; height: auto; padding-top: 9px; padding-bottom: 9px; } .ev-table .ev-input, .ev-table .ev-select { height: 30px; font-size: 12.5px; } .ev-table tr.ev-rownew td { background: var(--ev-good-bg); } .ev-note { color: var(--ev-muted); font-size: 12px; margin: 4px 0 12px; line-height: 1.5; } .ev-good-text { color: var(--ev-good) !important; } .ev-crit-text { color: var(--ev-crit) !important; } .ev-warn-text { color: var(--ev-warn) !important; } .ev-table a.active { color: var(--ev-accent-text); font-weight: 700; } /* Zeile mit aktivem Filter-Link: farbig hinterlegt wie Auswahl-Zustände */ .ev-table tr:has(a.active) td { background: var(--ev-good-bg); } .ev-table tr:has(a.active) td:first-child { box-shadow: inset 3px 0 0 var(--ev-lime); } .ev-table.mini th { font-size: 10px; padding: 0 7px 4px; letter-spacing: .04em; } .ev-table.mini td { height: 26px; font-size: 11.5px; padding: 0 7px; } .ev-table.mini span.ev-cell-good, .ev-table.mini span.ev-cell-warn, .ev-table.mini span.ev-cell-crit { padding: 2px 5px; } .ev-cell-good { background: var(--ev-good-bg); color: var(--ev-good); font-weight: 600; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ev-good) 40%, transparent); border-radius: 6px; } .ev-cell-warn { background: var(--ev-warn-bg); color: var(--ev-warn); font-weight: 600; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ev-warn) 40%, transparent); border-radius: 6px; } .ev-cell-crit { background: var(--ev-crit-bg); color: var(--ev-crit); font-weight: 600; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ev-crit) 40%, transparent); border-radius: 6px; } .ev-table tr.ev-lic-out td { opacity: .45; } /* ---------- Formulare ---------- */ .ev-field { display: flex; flex-direction: column; gap: 5px; } .ev-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ev-muted); } .ev-label .req { color: var(--ev-crit); } .ev-input, .ev-select, .ev-textarea { height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--ev-btn2-border); background: var(--ev-input-bg); color: var(--ev-text); font-family: inherit; font-size: 13px; width: 100%; } .ev-textarea { height: auto; padding: 10px 12px; resize: vertical; } .ev-input:focus, .ev-select:focus, .ev-textarea:focus { outline: 2px solid var(--ev-lime); outline-offset: 1px; border-color: transparent; } .ev-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; } .ev-form-grid .span2 { grid-column: span 2; } .ev-search { position: relative; } .ev-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ev-muted); pointer-events: none; } .ev-search .ev-input { padding-left: 34px; } .ev-hr { border: 0; border-top: 1px solid var(--ev-border); margin: 4px 0; } .ev-toggle { width: 34px; height: 20px; border-radius: 999px; background: var(--ev-btn2-border); position: relative; cursor: pointer; border: 0; padding: 0; flex: none; } .ev-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: var(--ev-card); transition: left .12s ease; } .ev-toggle.on { background: var(--ev-good); } .ev-toggle.on::after { left: 16px; } /* ---------- Key-Value-Raster ---------- */ .ev-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; } .ev-kv > div { display: flex; flex-direction: column; gap: 2px; } .ev-kv .v { font-size: 13px; font-variant-numeric: tabular-nums; } /* ---------- Master/Detail & Sidebar ---------- */ .ev-split { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 18px; align-items: start; } .ev-list { display: flex; flex-direction: column; } .ev-list-item { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; cursor: pointer; border-bottom: 1px solid var(--ev-border-soft); border-left: 3px solid transparent; color: var(--ev-text); text-decoration: none; } .ev-list-item:last-child { border-bottom: 0; } .ev-list-item:hover { background: var(--ev-border-soft); text-decoration: none; color: var(--ev-text); } .ev-list-item.active { background: var(--ev-good-bg); border-left-color: var(--ev-lime); } [data-theme="dark"] .ev-list-item.active { background: rgba(201, 228, 77, .10); } .ev-list-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 600; font-size: 13px; } .ev-list-sub { font-size: 12px; color: var(--ev-muted); } .ev-sidebar-nav { display: flex; flex-direction: column; gap: 2px; } .ev-sidenav-item { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; border-radius: 8px; border-left: 3px solid transparent; cursor: pointer; color: var(--ev-text); text-decoration: none; } .ev-sidenav-item:hover { background: var(--ev-border-soft); text-decoration: none; color: var(--ev-text); } .ev-sidenav-item.active { background: var(--ev-good-bg); border-left-color: var(--ev-lime); } [data-theme="dark"] .ev-sidenav-item.active { background: rgba(201, 228, 77, .10); } .ev-sidenav-item .t { font-weight: 600; font-size: 13.5px; } .ev-sidenav-item .s { font-size: 12px; color: var(--ev-muted); } /* ---------- Hinweise / Banner ---------- */ .ev-banner { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px; font-size: 13px; border: 1px solid transparent; } .ev-banner.warn { background: var(--ev-warn-bg); color: var(--ev-warn); } .ev-banner.good { background: var(--ev-good-bg); color: var(--ev-good); } .ev-banner.crit { background: var(--ev-crit-bg); color: var(--ev-crit); } /* ---------- Overlay / Dialog ---------- */ .ev-overlay { position: fixed; inset: 0; background: rgba(23, 27, 16, .45); display: flex; align-items: flex-start; justify-content: center; z-index: 100; padding: 48px 16px; overflow-y: auto; /* visibility statt display:none — AjaxToolkit-Controls (ComboBox/Calendar) im Dialog müssen beim Initialisieren messbar sein, sonst bleibt z. B. die Vorschlagsliste leer */ visibility: hidden; pointer-events: none; } .ev-overlay.open { visibility: visible; pointer-events: auto; } /* Geschlossen: auch Toolkit-Popups (ComboBox-Listen, Kalender) zwangsweise verstecken, die eigene inline-visibility setzen und sonst durchscheinen würden */ .ev-overlay:not(.open) * { visibility: hidden !important; } [data-theme="dark"] .ev-overlay { background: rgba(0, 0, 0, .55); } .ev-dialog { background: var(--ev-card); border: 1px solid var(--ev-border); border-radius: 14px; box-shadow: 0 24px 48px rgba(0, 0, 0, .25); width: 100%; max-width: 700px; padding: 20px 22px; } /* Formular-Hülle im Inline-Modus (z. B. Neues Ticket): gleicher Inhalt, aber als Karte statt Dialog */ .ev-inline-form { display: block; } .ev-inline-form .ev-dialog { box-shadow: var(--ev-shadow); max-width: 700px; } .ev-inline-form [data-close-modal] { display: none; } /* ---------- Chart-Hilfen (CSS-Säulen) ---------- */ .ev-chart { display: flex; align-items: flex-end; gap: 0; border-bottom: 1px solid var(--ev-border); } .ev-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; } .ev-chart-sum { font-family: "Archivo", "Segoe UI", sans-serif; font-weight: 600; font-size: 12px; color: var(--ev-text); font-variant-numeric: tabular-nums; } .ev-chart-stack { width: 44px; display: flex; flex-direction: column-reverse; border-radius: 4px 4px 0 0; overflow: hidden; } .ev-chart-x { font-size: 12px; color: var(--ev-muted); padding-top: 6px; } .ev-legend { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--ev-muted); } .ev-legend > span { display: inline-flex; align-items: center; gap: 6px; } /* ---------- Timeline (Verlauf) ---------- */ .ev-timeline { display: flex; flex-direction: column; } .ev-tl-item { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ev-border-soft); font-size: 13px; } .ev-tl-item:last-child { border-bottom: 0; } .ev-tl-date { color: var(--ev-muted); white-space: nowrap; font-variant-numeric: tabular-nums; } .ev-tl-user { font-family: "Archivo", "Segoe UI", sans-serif; font-weight: 700; font-size: 11px; color: var(--ev-muted); background: var(--ev-neutral-bg); border-radius: 6px; padding: 2px 6px; height: fit-content; white-space: nowrap; } /* ---------- Alt-Bausteine im ev-Design ---------- AjaxToolkit-ComboBox/Autocomplete/ValidatorCallout und der jQueryAlert-Dialog nutzen noch ihre historischen Klassen/IDs — hier token-basiert neu definiert (ersetzt Elements.css, StandardElements.css und jQuery_Alert.css). */ .sitecontent { margin: 5px 20px; } .standardinputelements { background: var(--ev-input-bg); color: var(--ev-text); border: 1px solid var(--ev-btn2-border); border-radius: 8px; display: inline-block; padding: 6px 10px; vertical-align: middle; font-family: inherit; font-size: 13px; text-align: left; } .standardinputelements:focus { outline: 2px solid var(--ev-lime); outline-offset: 1px; border-color: transparent; } .standardinputelementscombo table { position: absolute; top: -4px; } .standardinputelementscombo .ajax__combobox_inputcontainer { position: static; } .standardinputelementscombo .ajax__combobox_textboxcontainer input { background: var(--ev-input-bg); color: var(--ev-text); border: 1px solid var(--ev-btn2-border); border-right: 0; border-radius: 8px 0 0 8px; display: inline-block; padding: 7px 10px; vertical-align: middle; font-family: inherit; font-size: 13px; } .standardinputelementscombo .ajax__combobox_buttoncontainer button { background: var(--ev-seg-bg); border: 1px solid var(--ev-btn2-border); color: var(--ev-muted); cursor: pointer; display: inline-block; font-family: inherit; font-size: 13px; padding: 6px 8px; text-align: center; border-radius: 0 8px 8px 0; position: relative; min-width: 28px; } /* Chevron nach unten als reines CSS (theme-fähig) — das Sprite-Icon des Toolkits ist ersetzt */ .standardinputelementscombo .ajax__combobox_buttoncontainer button::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -6px 0 0 -4px; border-right: 2px solid var(--ev-muted); border-bottom: 2px solid var(--ev-muted); transform: rotate(45deg); } .standardinputelementscombo .ajax__combobox_buttoncontainer button:hover::after { border-color: var(--ev-text); } .ajax__combobox_itemlist { background: var(--ev-card); color: var(--ev-text); border: 1px solid var(--ev-border) !important; border-radius: 8px; box-shadow: 0 12px 24px rgba(0, 0, 0, .18); z-index: 300 !important; } .ajax__combobox_itemlist li { padding: 4px 10px; } .ajax__combobox_itemlist li.ajax__combobox_highlighteditem { background: var(--ev-good-bg); } .standardinputelementsrepeater { padding: 5px 0; margin: 0; } .standardinputelementsrepeater td { padding-right: 14px; } .autocomplete_completionListElement { margin: 0; padding: 0; background: var(--ev-card); color: var(--ev-text); border: 1px solid var(--ev-border); border-radius: 8px; overflow: auto; height: 300px; box-shadow: 0 12px 24px rgba(0, 0, 0, .18); } .autocomplete_listItem { background: transparent; padding: 4px 10px; margin: 0; } .autocomplete_highlightedListItem { background: var(--ev-good-bg); color: var(--ev-text); padding: 4px 10px; margin: 0; } .ValidatorCalloutExtender div, .ValidatorCalloutExtender td { border: 0; background: var(--ev-card); color: var(--ev-crit); font-family: inherit; font-size: 13px; } .ValidatorCalloutExtender .ajax__validatorcallout_popup_table { border: 1px solid var(--ev-crit); border-radius: 8px; } .ValidatorCalloutExtender .ajax__validatorcallout_error_message_cell { padding: 10px 12px; color: var(--ev-crit); } /* jQueryAlert-Hinweisdialog (IDs kommen aus jQuery_Alert_1_1.js) */ #popup_container { font-family: "Segoe UI", system-ui, sans-serif; font-size: 13.5px; min-width: 320px; max-width: 620px; background: var(--ev-card); border: 1px solid var(--ev-border); border-radius: 12px; color: var(--ev-text); position: absolute !important; top: 40%; box-shadow: 0 24px 48px rgba(0, 0, 0, .25); overflow: hidden; } #popup_title { background: var(--ev-ink); border-bottom: 2px solid var(--ev-lime); color: #FFFFFF; cursor: default; font-family: "Archivo", "Segoe UI", sans-serif; font-size: 15px; font-weight: 600; margin: 0; padding: 9px 0; text-align: center; } #popup_content { padding: 1em 1.5em; margin: 0; } #popup_message { padding-left: 0; } #popup_panel { text-align: center; margin: 18px 0 0; } #popup_panel input { background: var(--ev-btn-primary-bg); color: var(--ev-btn-primary-fg); border: 0; border-radius: 8px; cursor: pointer; display: inline-block; font-family: "Archivo", "Segoe UI", sans-serif; font-size: 13px; font-weight: 600; padding: 7px 4px; text-align: center; width: 110px; margin: 0 4px; } #popup_panel input:hover { opacity: .92; } #popup_prompt { margin: .5em 0; } /* ---------- Monats-Matrix (Lizenz-Entwicklung) mit Kreuz-Hervorhebung ---------- */ .ev-mtx { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .ev-mtx th { text-align: right; padding: 0 9px 6px; border-bottom: 1px solid var(--ev-border); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ev-muted); white-space: nowrap; } .ev-mtx td { position: relative; padding: 0 9px; height: 30px; text-align: right; font-size: 12.5px; border-bottom: 1px solid var(--ev-border-soft); white-space: nowrap; } .ev-mtx th.left, .ev-mtx td.left { text-align: left; } .ev-mtx td.dim { color: var(--ev-muted); opacity: .55; } .ev-mtx th.sum, .ev-mtx td.sum { font-weight: 700; border-left: 1px solid var(--ev-border); } .ev-mtx tr.total td { border-top: 2px solid var(--ev-ink); border-bottom: 0; font-family: "Archivo", "Segoe UI", sans-serif; font-weight: 700; } [data-theme="dark"] .ev-mtx tr.total td { border-top-color: var(--ev-lime-strong); } /* Kreuz: Zeile über tr:hover, Spalte über einen hohen ::after-Schleier der Zelle (der umgebende Container braucht overflow-y: hidden, damit der Schleier geclippt wird) */ .ev-mtx tbody tr:hover td { background: var(--ev-border-soft); } .ev-mtx tbody td:hover::after { content: ""; position: absolute; left: 0; right: 0; top: -6000px; bottom: -6000px; background: rgba(169, 214, 0, .09); pointer-events: none; } .ev-mtx tbody td:hover { box-shadow: inset 0 0 0 2px var(--ev-lime); border-radius: 4px; } /* ---------- Responsiv ---------- */ @media (max-width: 1240px) { .ev-kpis.cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ev-kpis.cols-7 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ev-split { grid-template-columns: 300px minmax(0, 1fr); } .ev-duo { grid-template-columns: 1fr; } } @media (max-width: 1020px) { .ev-split { grid-template-columns: 1fr; } .ev-kpis.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ev-page { padding: 20px 16px 40px; } }