/* ========================================================= DBX DESIGN TOKENS – colors.css ========================================================= ZWECK --------------------------------------------------------- Diese Datei enthält zentrale Farb-, Schatten- und Komponententokens für das aktuelle Design. REGELN --------------------------------------------------------- 1. Komponenten-CSS (z. B. c-menu.css, c-grid.css, c-openWin.css) verwendet nach Möglichkeit nur diese Variablen. 2. Keine festen Farben in Komponenten, wenn es dafür bereits ein passendes Token gibt. 3. Helle neutrale Default-Werte in :root (Skin „hell“) 4. Farb-Skins in skin-*.css überschreiben nur Tokens 5. Theme-Varianten (z. B. .theme-dark) überschreiben nur Tokens, nicht die Komponentenregeln selbst. SCHNELLE ORIENTIERUNG --------------------------------------------------------- CORE / BASIS: --dbx-primary --dbx-bg-* --dbx-text-* --dbx-border-* --dbx-shadow-* MENU: --dbx-bg-menu-main-* --dbx-bg-menu-admin-* --dbx-menu-text --dbx-menu-top-hover-bg --dbx-menu-top-active-bg --dbx-menu-sub-hover-bg --dbx-menu-separator --dbx-menu-accent-active --dbx-menu-accent-glow --dbx-menu-glass-light --dbx-menu-glass-shadow --dbx-submenu-* WINDOW: --dbx-window-* GRID: --dbx-grid-* ========================================================= */ :root { /* ===================================================== CORE – BRAND / STATUS COLORS ===================================================== Grundfarben des Systems. Diese Tokens sind die Basis für viele Komponenten. ===================================================== */ --dbx-primary: #4e5d6c; --dbx-secondary: #6c757d; --dbx-success: #198754; --dbx-warning: #ffc107; --dbx-danger: #dc3545; --dbx-info: #0dcaf0; /* ===================================================== CORE – BACKGROUNDS ===================================================== Allgemeine Flächenfarben. ===================================================== */ --dbx-bg-body: #f8f9fa; --dbx-bg-main: #ffffff; --dbx-bg-header: #ffffff; --dbx-bg-footer: #ffffff; --dbx-bg-panel: #ffffff; --dbx-bg-muted: #f1f3f5; /* ===================================================== CORE – PANELS ===================================================== Helle DBX-Arbeitsflaechen. Komponenten-Panels sollen nicht flach weiss sein, sondern den typischen hellblauen DBX-Verlauf mit blaeulicher Kante verwenden. ===================================================== */ --dbx-panel-bg-top: rgba(252,252,253,0.98); --dbx-panel-bg-bottom: rgba(241,243,245,0.98); --dbx-panel-bg-base: #f4f6f8; --dbx-panel-head-bg-top: var(--dbx-bg-menu-main-top, rgba(248,249,250,0.96)); --dbx-panel-head-bg-bottom: var(--dbx-bg-menu-main-bottom, rgba(233,236,239,0.96)); --dbx-panel-head-border: rgba(90, 102, 118, .20); --dbx-panel-head-text: var(--dbx-menu-text, var(--dbx-text-main, #212529)); --dbx-panel-inner-bg-top: #ffffff; --dbx-panel-inner-bg-bottom: #f8f9fa; --dbx-panel-border: #c8d0da; --dbx-panel-border-light: #d9e1ec; --dbx-panel-border-strong: #b9c7d9; --dbx-panel-shadow: 0 16px 34px rgba(28,43,63,0.20), 0 4px 10px rgba(28,43,63,0.12); --dbx-panel-inset-highlight: rgba(255,255,255,0.98); --dbx-panel-inset-shadow: rgba(58,78,102,0.16); --dbx-panel-row-highlight: rgba(255,255,255,0.72); --dbx-shell-max-width: 1800px; --dbx-content-max-width: 1180px; --dbx-content-media-bg: #0f172a; --dbx-content-gallery-border: var(--dbx-panel-border-light, #d7e3f0); --dbx-content-gallery-accent: var(--dbx-panel-border-strong, #b9c7d9); --dbx-gallery-overlay-bg: rgba(15, 23, 36, 0.86); --dbx-bar-icon-color: var(--dbx-primary); --dbx-bar-meta-color: rgba(29, 53, 87, 0.75); --dbx-bar-outset-light: rgba(255, 255, 255, 0.72); --dbx-bar-inset-dark: rgba(40, 58, 82, 0.18); --dbx-report-bar-bg-top: rgba(248, 251, 255, 0.98); --dbx-report-bar-bg-bottom: rgba(232, 240, 250, 0.96); --dbx-report-bar-border: rgba(148, 176, 210, 0.55); --dbx-report-bar-title-color: rgba(29, 53, 87, 0.82); --dbx-surface-glass-blur: 10px; --dbx-report-row-bg: #ffffff; --dbx-report-row-striped-bg: #f1f3f5; --dbx-report-row-hover-bg: #fff1b8; --dbx-report-row-hover-border: #ead58a; /* ===================================================== CORE – TEXT ===================================================== Allgemeine Textfarben. ===================================================== */ --dbx-text-main: #212529; --dbx-text-muted: #6c757d; --dbx-text-invert: #ffffff; --dbx-text-link: #4e5d6c; /* ===================================================== CORE – BORDERS ===================================================== ===================================================== */ --dbx-border-color: #dee2e6; --dbx-border-light: #e9ecef; --dbx-border-dark: #adb5bd; /* ===================================================== CORE – STATE / INTERACTION ===================================================== Universelle Zustände, z. B. Hover / Active / Focus. ===================================================== */ --dbx-hover-bg: rgba(0, 0, 0, 0.04); --dbx-active-bg: rgba(0, 0, 0, 0.08); --dbx-focus-ring: rgba(78, 93, 108, 0.25); --dbx-input-bg: #fef9e0; --dbx-input-bg-focus: #fde68a; --dbx-input-bg-disabled: #f0ead0; /* ===================================================== CORE – SHADOWS ===================================================== Globale Schattenstaffelung. ===================================================== */ --dbx-shadow-sm: 0 1px 2px rgba(0,0,0,.08); --dbx-shadow-md: 0 4px 12px rgba(0,0,0,.12); --dbx-shadow-lg: 0 8px 24px rgba(0,0,0,.16); /* ===================================================== COMPONENT TOKENS: MENU ===================================================== ZENTRALE MENÜ-FARBEN ----------------------------------------------------- HIER STYLST DU DAS MENÜ GLOBAL: - main/admin Leiste - Top-Level Hover / Active - Mobile Toggle Buttons - Submenüs - Active Accent / Glow ----------------------------------------------------- VERWENDET VON: - c-menu.css ===================================================== */ /* ------------------------------ MENU – BACKGROUNDS (TOP BARS) ------------------------------ */ --dbx-menu-mobile-panel-main-top: rgba(255,255,255,0.97); --dbx-menu-mobile-panel-main-bottom: rgba(245,246,248,0.97); --dbx-menu-mobile-panel-admin-top: rgba(230,233,237,0.97); --dbx-menu-mobile-panel-admin-bottom: rgba(210,214,220,0.97); --dbx-bg-menu-main-top: rgba(248,249,250,0.96); --dbx-bg-menu-main-bottom: rgba(233,236,239,0.96); --dbx-bg-menu-admin-top: rgba(206,212,218,0.96); --dbx-bg-menu-admin-bottom: rgba(173,181,189,0.96); /* ------------------------------ MENU – TEXT ------------------------------ */ --dbx-menu-text: var(--dbx-text-main); --dbx-menu-main-text: #18324f; --dbx-menu-admin-text: #f7fbff; --dbx-menu-text-active: var(--dbx-text-invert); /* Technische Bildmotive bleiben ueber alle Skins dosierbar. */ --dbx-menu-tech-opacity-main: 0.62; --dbx-menu-tech-opacity-admin: 0.68; --dbx-tech-canvas-opacity: 0.14; --dbx-content-stamp-opacity: 0.56; --dbx-content-stamp-opacity-mobile: 0.44; /* Login-Bildflaeche rechts neben der kompakten Formularkarte. */ --dbx-auth-visual-overlay-top: rgba(92, 180, 235, 0.32); --dbx-auth-visual-overlay-bottom: rgba(28, 105, 165, 0.58); --dbx-auth-visual-text: #f5faff; --dbx-auth-visual-muted: #d6e9fb; --dbx-auth-visual-border: rgba(126, 190, 244, 0.56); --dbx-auth-visual-item-bg: rgba(4, 28, 56, 0.44); --dbx-auth-visual-item-border: rgba(188, 224, 255, 0.32); /* ------------------------------ MENU – TOP LEVEL STATES ------------------------------ Hover / Active-Flächen der oberen Menüeinträge. ------------------------------ */ --dbx-menu-top-hover-bg: rgba(255,255,255,0.22); --dbx-menu-top-active-bg: rgba(255,255,255,0.30); /* ------------------------------ MENU – SUBMENU STATES ------------------------------ */ --dbx-menu-sub-hover-bg: rgba(255,255,255,0.22); /* ------------------------------ MENU – STRUCTURE / LINES ------------------------------ */ --dbx-menu-separator: rgba(0,0,0,0.10); --dbx-submenu-line-light: rgba(255, 255, 255, 0.62); --dbx-submenu-line-dark: rgba(0, 0, 0, 0.17); --dbx-submenu-line-shadow: rgba(0, 0, 0, 0.08); /* ------------------------------ MENU – ACCENT / ACTIVE ------------------------------ */ --dbx-menu-accent-active: var(--dbx-primary); --dbx-menu-accent-glow: rgba(78,93,108,0.35); /* dbXapp-Markensteg unter dem Benutzer-Menue (skinfaehig). */ --dbx-menu-user-edge-light: #ff747c; --dbx-menu-user-edge-main: #e32636; --dbx-menu-user-edge-dark: #850914; --dbx-menu-user-edge-shadow: rgba(78, 5, 12, 0.38); /* ------------------------------ MENU – GLASS / DEPTH ------------------------------ */ --dbx-menu-glass-light: rgba(255,255,255,0.80); --dbx-menu-glass-shadow: rgba(0,0,0,0.12); /* ------------------------------ MENU – SUBMENU PANELS ------------------------------ */ --dbx-submenu-bg-top: rgba(255,255,255,0.97); --dbx-submenu-bg-bottom: rgba(241,243,245,0.97); --dbx-submenu-admin-bg-top: rgba(222,226,230,0.97); --dbx-submenu-admin-bg-bottom: rgba(206,212,218,0.97); --dbx-submenu-panel-border-light: rgba(255, 255, 255, 0.88); --dbx-submenu-panel-border-dark: rgba(0, 0, 0, 0.24); --dbx-submenu-panel-shadow: 0 6px 20px rgba(0, 0, 0, 0.20), 0 2px 6px rgba(0, 0, 0, 0.12); /* ===================================================== COMPONENT TOKENS: SPINNER / OVERLAY / EDITOR ===================================================== Allgemeine Overlays und Editor-Icons. ===================================================== */ --dbx-overlay-bg: rgba(255,255,255,0.6); /* Editor overlay icon für tpl edit ace */ --dbx-editor-bg: rgba(0,0,0,0.65); --dbx-editor-bg-hover: rgba(0,0,0,0.9); --dbx-editor-border: rgba(255,255,255,0.28); --dbx-editor-border-hover: rgba(255,255,255,0.42); --dbx-editor-color: #ffffff; --dbx-editor-shadow: rgba(0,0,0,0.6); --dbx-editor-icon-filter: saturate(1.7) contrast(1.45) brightness(0.58) drop-shadow(0 0 1px #ffffff) drop-shadow(0 0 2.5px #ffffff) drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.92)) drop-shadow(1px 0 0 rgba(0, 0, 0, 0.78)) drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.95)); --dbx-editor-icon-filter-hover: saturate(1.85) contrast(1.5) brightness(0.68) drop-shadow(0 0 1.5px #ffffff) drop-shadow(0 0 3px #ffffff) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.95)) drop-shadow(1px 0 0 rgba(0, 0, 0, 0.82)) drop-shadow(-1px 0 0 #ffffff); /* ===================================================== COMPONENT TOKENS: OPENWIN (c-openWin) ===================================================== */ /* ------------------------------ WINDOW – CONTAINER ------------------------------ */ --dbx-window-bg: var(--dbx-bg-main); --dbx-window-border: var(--dbx-border-color); --dbx-window-radius: 8px; --dbx-window-shadow: var(--dbx-shadow-lg); /* ------------------------------ WINDOW – HEADER ------------------------------ */ /* normales Fenster */ --dbx-window-header: var(--dbx-primary); --dbx-window-header-top: color-mix(in srgb, var(--dbx-primary) 72%, #27445f); --dbx-window-header-bottom: color-mix(in srgb, var(--dbx-primary) 58%, #071b30); /* Modal → bewusst dunkler */ --dbx-window-header-modal: #3d4a57; --dbx-window-header-modal-top: color-mix(in srgb, var(--dbx-window-header-modal) 78%, #526f8b); --dbx-window-header-modal-bottom: color-mix(in srgb, var(--dbx-window-header-modal) 72%, #081827); --dbx-window-header-color: var(--dbx-text-invert); --dbx-window-header-gradient: linear-gradient( to bottom, rgba(255,255,255,0.05), rgba(0,0,0,0.05) ); /* Sekundaere Werkzeug-/Modulleiste direkt im Fenster. */ --dbx-window-subbar-top: color-mix(in srgb, var(--dbx-primary) 16%, #f6fbff); --dbx-window-subbar-bottom: color-mix(in srgb, var(--dbx-primary) 34%, #dce9f5); --dbx-window-subbar-text: color-mix(in srgb, var(--dbx-primary) 34%, #10263c); --dbx-window-subbar-border: color-mix(in srgb, var(--dbx-primary) 58%, #44627f); /* ------------------------------ WINDOW – BODY ------------------------------ */ --dbx-window-body-bg: var(--dbx-bg-panel); --dbx-window-body-color: var(--dbx-text-main); /* ------------------------------ WINDOW – FOOTER ------------------------------ */ --dbx-window-footer-bg: rgba(78,93,108,0.08); --dbx-window-footer-border: var(--dbx-border-light); /* ------------------------------ WINDOW – CONTROLS ------------------------------ */ --dbx-window-control-color: rgba(255,255,255,0.85); --dbx-window-control-hover: rgba(255,255,255,1); /* ------------------------------ WINDOW – OVERLAY ------------------------------ */ --dbx-window-overlay-bg: rgba(0,0,0,0.35); --dbx-window-overlay-blur: blur(2px); /* ===================================================== COMPONENT TOKENS: GRID (c-grid) ===================================================== */ /* ------------------------------ GRID – HEADER ------------------------------ */ --dbx-grid-header-top: rgba(248,249,250,0.95); --dbx-grid-header-bottom: rgba(233,236,239,0.95); --dbx-grid-header-border: rgba(0,0,0,0.45); --dbx-grid-col-top: #f1f3f5; --dbx-grid-col-bottom: #dee2e6; --dbx-grid-col-hover-top: #e9ecef; --dbx-grid-col-hover-bottom: #ced4da; --dbx-grid-col-text: #343a40; /* ------------------------------ GRID – LINES ------------------------------ */ --dbx-grid-line-row: rgba(70,70,70,0.85); --dbx-grid-line-col: rgba(0,0,0,0.25); --dbx-grid-line-header: rgba(0,0,0,0.35); /* ------------------------------ GRID – STATES ------------------------------ */ --dbx-grid-hover-shadow: rgba(0,0,0,0.28); --dbx-grid-select-shadow: rgba(0,0,0,0.38); /* ------------------------------ GRID – EDIT ------------------------------ */ --dbx-grid-edit-border: var(--dbx-primary); /* ------------------------------ GRID – SCROLLBAR ------------------------------ */ --dbx-grid-scroll-thumb: #5f6a72; --dbx-grid-scroll-thumb-hover: #495057; --dbx-grid-scroll-thumb-active: #343a40; --dbx-grid-scroll-track: #e9ecef; /* ------------------------------ GRID – SEPARATORS ------------------------------ */ --dbx-grid-sep-header: #d8d8d8; --dbx-grid-sep-body: #e0e0e0; /* ------------------------------ GRID – CONFLICT ------------------------------ */ --dbx-grid-conflict-bg: rgba(255,193,7,0.25); --dbx-grid-conflict-border: var(--dbx-warning); } /* ========================================================= THEME: DARK ========================================================= Überschreibt nur Tokens. Komponenten-CSS bleibt gleich. ========================================================= */ .theme-dark { /* ===================================================== CORE – DARK ===================================================== */ --dbx-bg-body: #12161c; --dbx-bg-main: #1a2028; --dbx-bg-header: #1a2028; --dbx-bg-footer: #1a2028; --dbx-bg-panel: #1c2430; --dbx-bg-muted: #232c39; /* ===================================================== NIGHT SURFACES ===================================================== */ --dbx-night-surface: #c2c9d3; --dbx-night-surface-2: #d0d6df; --dbx-night-surface-3: #dde2e8; --dbx-night-surface-text: #172231; --dbx-night-surface-muted: #526173; --dbx-night-surface-border: #aeb8c6; --dbx-panel-bg-top: #141820; --dbx-panel-bg-bottom: #0d1016; --dbx-panel-bg-base: #10141a; --dbx-panel-head-bg-top: #1a1a1a; --dbx-panel-head-bg-bottom: #000000; --dbx-panel-head-border: rgba(255, 255, 255, 0.14); --dbx-panel-head-text: #ffffff; --dbx-bar-icon-color: #ffffff; --dbx-content-media-bg: #0a1018; --dbx-gallery-overlay-bg: rgba(0, 0, 0, 0.92); --dbx-content-gallery-border: var(--dbx-night-surface-border); --dbx-content-gallery-accent: #7f93ad; --dbx-bar-meta-color: rgba(255, 255, 255, 0.72); --dbx-bar-outset-light: rgba(255, 255, 255, 0.16); --dbx-bar-inset-dark: rgba(0, 0, 0, 0.85); --dbx-panel-inner-bg-top: var(--dbx-night-surface-3); --dbx-panel-inner-bg-bottom: var(--dbx-night-surface-2); --dbx-panel-border: var(--dbx-night-surface-border); --dbx-panel-border-light: var(--dbx-night-surface-border); --dbx-panel-border-strong: #9ca8b8; --dbx-panel-shadow: 0 8px 24px rgba(0,0,0,.35); --dbx-panel-inset-highlight: rgba(255,255,255,0.28); --dbx-panel-inset-shadow: rgba(20,31,45,0.22); --dbx-panel-row-highlight: rgba(255,255,255,0.22); --dbx-report-row-bg: var(--dbx-night-surface-2); --dbx-report-row-striped-bg: var(--dbx-night-surface-3); --dbx-report-row-hover-bg: #6b5f32; --dbx-report-row-hover-border: #8a783a; --dbx-text-main: #e9eef5; --dbx-text-muted: #aeb8c5; --dbx-text-invert: #ffffff; --dbx-text-link: #6ea8fe; --dbx-border-color: #344050; --dbx-border-light: #3b4656; --dbx-border-dark: #566375; --dbx-hover-bg: rgba(255,255,255,0.05); --dbx-active-bg: rgba(255,255,255,0.10); --dbx-focus-ring: rgba(110,168,254,0.30); --dbx-input-bg: #ebe4be; --dbx-input-bg-focus: #ddd08a; --dbx-input-bg-disabled: #d9d4bc; --dbx-shadow-sm: 0 1px 2px rgba(0,0,0,.30); --dbx-shadow-md: 0 4px 12px rgba(0,0,0,.35); --dbx-shadow-lg: 0 8px 24px rgba(0,0,0,.42); /* ===================================================== MENU – DARK ===================================================== */ --dbx-bg-menu-main-top: rgba(18, 18, 18, 0.98); --dbx-bg-menu-main-bottom: rgba(0, 0, 0, 0.98); --dbx-bg-menu-admin-top: rgba(10, 10, 10, 0.98); --dbx-bg-menu-admin-bottom: rgba(0, 0, 0, 0.98); --dbx-menu-mobile-panel-main-top: rgba(14, 16, 20, 0.98); --dbx-menu-mobile-panel-main-bottom: rgba(0, 0, 0, 0.98); --dbx-menu-mobile-panel-admin-top: rgba(10, 10, 12, 0.98); --dbx-menu-mobile-panel-admin-bottom: rgba(0, 0, 0, 0.98); --dbx-menu-text: #f5f7fa; --dbx-menu-main-text: #f5f7fa; --dbx-menu-admin-text: #f7fbff; --dbx-menu-text-active: var(--dbx-text-invert); --dbx-menu-tech-opacity-main: 0.64; --dbx-menu-tech-opacity-admin: 0.70; --dbx-tech-canvas-opacity: 0.24; --dbx-menu-top-hover-bg: rgba(255,255,255,0.10); --dbx-menu-top-active-bg: rgba(255,255,255,0.16); --dbx-menu-sub-hover-bg: rgba(255,255,255,0.10); --dbx-menu-separator: rgba(255,255,255,0.10); --dbx-menu-accent-active: #6ea8fe; --dbx-menu-accent-glow: rgba(110,168,254,0.42); --dbx-menu-glass-light: rgba(255,255,255,0.10); --dbx-menu-glass-shadow: rgba(0,0,0,0.35); --dbx-submenu-bg-top: rgba(22, 24, 30, 0.98); --dbx-submenu-bg-bottom: rgba(0, 0, 0, 0.98); --dbx-submenu-admin-bg-top: rgba(16, 16, 20, 0.98); --dbx-submenu-admin-bg-bottom: rgba(0, 0, 0, 0.98); --dbx-submenu-line-light: rgba(255, 255, 255, 0.16); --dbx-submenu-line-dark: rgba(0, 0, 0, 0.38); --dbx-submenu-line-shadow: rgba(0, 0, 0, 0.22); --dbx-submenu-panel-border-light: rgba(255, 255, 255, 0.22); --dbx-submenu-panel-border-dark: rgba(0, 0, 0, 0.58); --dbx-submenu-panel-shadow: 0 8px 26px rgba(0, 0, 0, 0.48), 0 2px 8px rgba(0, 0, 0, 0.32); /* ===================================================== EDITOR – DARK ===================================================== */ --dbx-editor-bg: rgba(5,14,25,0.94); --dbx-editor-bg-hover: rgba(13,110,253,0.96); --dbx-editor-border: rgba(255,255,255,0.42); --dbx-editor-border-hover: rgba(255,255,255,0.60); --dbx-editor-color: #ffffff; --dbx-editor-shadow: rgba(0,0,0,0.95); --dbx-editor-icon-filter: saturate(1.8) contrast(1.35) brightness(1.12) drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 4px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 1px rgba(0, 0, 0, 1)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.88)) drop-shadow(0 0 6px rgba(110, 168, 254, 0.35)); --dbx-editor-icon-filter-hover: saturate(1.95) contrast(1.4) brightness(1.2) drop-shadow(0 0 2.5px #ffffff) drop-shadow(0 0 5px rgba(255, 255, 255, 1)) drop-shadow(0 0 1px rgba(0, 0, 0, 1)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.92)) drop-shadow(0 0 8px rgba(110, 168, 254, 0.45)); /* ===================================================== OPENWIN – DARK ===================================================== */ --dbx-window-bg: var(--dbx-bg-main); --dbx-window-border: var(--dbx-border-color); --dbx-window-body-bg: var(--dbx-bg-panel); --dbx-window-body-color: var(--dbx-text-main); --dbx-window-footer-bg: rgba(110,168,254,0.10); --dbx-window-footer-border: var(--dbx-border-light); --dbx-window-overlay-bg: rgba(0,0,0,0.45); /* ===================================================== GRID – DARK ===================================================== */ --dbx-grid-header-top: rgba(49,63,84,0.96); --dbx-grid-header-bottom: rgba(36,47,63,0.96); --dbx-grid-header-border: rgba(255,255,255,0.14); --dbx-grid-col-top: #38506f; --dbx-grid-col-bottom: #2c4360; --dbx-grid-col-hover-top: #426081; --dbx-grid-col-hover-bottom: #315172; --dbx-grid-col-text: #e7eef8; --dbx-grid-line-row: rgba(255,255,255,0.12); --dbx-grid-line-col: rgba(255,255,255,0.08); --dbx-grid-line-header: rgba(255,255,255,0.12); --dbx-grid-hover-shadow: rgba(0,0,0,0.40); --dbx-grid-select-shadow: rgba(0,0,0,0.52); --dbx-grid-scroll-thumb: #6b7785; --dbx-grid-scroll-thumb-hover: #7d8894; --dbx-grid-scroll-thumb-active: #8f9aa6; --dbx-grid-scroll-track: #24303d; --dbx-grid-sep-header: #4b5969; --dbx-grid-sep-body: #3f4d5c; --dbx-grid-conflict-bg: rgba(255,193,7,0.20); --dbx-grid-conflict-border: #ffd24d; } /* ========================================================= NIGHT: WHITE WORK SURFACES -> LIGHT GRAY --------------------------------------------------------- Nicht auf Icons/Menu-Controls anwenden. Ziel sind Content, Formulare, Reports, Views und Arbeitsflaechen, die sonst in Night reinweiss bleiben. ========================================================= */ .theme-dark .dbx-content > .container-fluid, .theme-dark #dbxContent, .theme-dark .dbx-content-page, .theme-dark .dbx-content-body, .theme-dark .dbx-content-col, .theme-dark .dbx-content-hero-split, .theme-dark .dbx-content-header-in-hero, .theme-dark .dbx-window-body, .theme-dark .card, .theme-dark .card-body, .theme-dark .modal-content, .theme-dark .list-group-item, .theme-dark .bg-white, .theme-dark .bg-light { background: var(--dbx-night-surface) !important; background-color: var(--dbx-night-surface) !important; color: var(--dbx-night-surface-text) !important; border-color: var(--dbx-night-surface-border) !important; } .theme-dark #dbxContent :where( .card, .card-body, .panel, .border, fieldset, .dbx-cms-tree-panel, .dbx-cms-editor-panel, .dbx-cms-media-panel, .dbx-cms-folder-editor, .dbx-cms-view-panel, .dbx-cms-form, .dbx-cms-editor-group, .dbx-cms-editor, .jodit-container, .jodit-workplace, .jodit-wysiwyg, .jodit-source, .jodit-source textarea ) { background: var(--dbx-night-surface) !important; background-color: var(--dbx-night-surface) !important; color: var(--dbx-night-surface-text) !important; border-color: var(--dbx-night-surface-border) !important; } .theme-dark .dbxForm_wrapper { --dbx-form-bg: var(--dbx-night-surface); --dbx-form-panel: var(--dbx-night-surface-2); --dbx-form-border: var(--dbx-night-surface-border); --dbx-form-border-strong: #9ca8b8; --dbx-form-text: var(--dbx-night-surface-text); --dbx-form-muted: var(--dbx-night-surface-muted); background: var(--dbx-night-surface) !important; color: var(--dbx-night-surface-text) !important; } .theme-dark .dbxForm_wrapper .dbx-form-bar, .theme-dark .dbxForm_wrapper .border, .theme-dark .dbxForm_wrapper .panel, .theme-dark .dbxForm_wrapper fieldset, .theme-dark .dbxForm_wrapper .dbx-form-group, .theme-dark .dbx-select1-control, .theme-dark .dbx-select1-prompt, .theme-dark .dbx-ms2-list, .theme-dark .dbx-ms2-item, .theme-dark .dbx-clear-btn, .theme-dark .dbx-grid-head, .theme-dark .dbx-grid-stat, .theme-dark .dbx-report .dbx_pagination, .theme-dark .dbxReport .dbx_pagination, .theme-dark .dbxReport .dbx-trace-summary, .theme-dark .dbxReport .dbx-trace-section-title, .theme-dark .dbxReport .dbx-trace-pair, .theme-dark .dbxReport .dbx-trace-delta-row, .theme-dark .dbxReport .dbx-trace-muted, .theme-dark .dbxReport .dbx-trace-raw, .theme-dark .dbx-trace-history-row, .theme-dark .dbx-mapping-panel, .theme-dark .dbx-mapping-source, .theme-dark .dbx-mapping-target, .theme-dark .dbx-mapping-actions, .theme-dark .dbx-media-gallery-item, .theme-dark .dbx-gallery-lightbox-figure { background: linear-gradient(180deg, var(--dbx-night-surface-2), var(--dbx-night-surface)) !important; background-color: var(--dbx-night-surface-2) !important; color: var(--dbx-night-surface-text) !important; border-color: var(--dbx-night-surface-border) !important; } .theme-dark .dbx-select1-chip { background: linear-gradient(180deg, #29476d, #1e385b) !important; border-color: #5f7898 !important; color: var(--dbx-night-surface-text) !important; } .theme-dark .dbx-select1-option { color: var(--dbx-night-surface-text) !important; } .theme-dark .dbx-select1-option:hover, .theme-dark .dbx-select1-option.is-selected { background: linear-gradient(180deg, #2a4366, #223a5a) !important; border-color: #6f87a7 !important; } .theme-dark .dbx-select1-option i { color: #b9c8dc !important; } .theme-dark .form-control, .theme-dark .form-select, .theme-dark .dbx-content input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]), .theme-dark .dbx-content select, .theme-dark .dbx-content textarea, .theme-dark .dbxForm_wrapper input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]), .theme-dark .dbxForm_wrapper select, .theme-dark .dbxForm_wrapper textarea, .theme-dark .dbxForm_wrapper .form-control, .theme-dark .dbxForm_wrapper .form-select { background-color: var(--dbx-input-bg) !important; color: var(--dbx-night-surface-text) !important; border: 1px solid var(--dbx-night-surface-border) !important; } .theme-dark .form-control:focus, .theme-dark .form-select:focus, .theme-dark .dbx-content input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus, .theme-dark .dbx-content select:focus, .theme-dark .dbx-content textarea:focus, .theme-dark .dbxForm_wrapper input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus, .theme-dark .dbxForm_wrapper select:focus, .theme-dark .dbxForm_wrapper textarea:focus, .theme-dark .dbxForm_wrapper .form-control:focus, .theme-dark .dbxForm_wrapper .form-select:focus { background-color: var(--dbx-input-bg-focus) !important; } .theme-dark .dbx-content-page, .theme-dark .dbx-content-page h1, .theme-dark .dbx-content-page h2, .theme-dark .dbx-content-page h3, .theme-dark .dbx-content-page h4, .theme-dark .dbx-content-page h5, .theme-dark .dbx-content-page h6, .theme-dark .dbxForm_wrapper h1, .theme-dark .dbxForm_wrapper h2, .theme-dark .dbxForm_wrapper h3, .theme-dark .dbxForm_wrapper h4, .theme-dark .dbxForm_wrapper h5, .theme-dark .dbxForm_wrapper .panel-title, .theme-dark .dbx-grid-title, .theme-dark .dbx-grid-stat strong, .theme-dark .dbxReport .dbx-trace-key, .theme-dark .dbx-mapping-field-name { color: var(--dbx-night-surface-text) !important; } .theme-dark .dbx-content-header-text, .theme-dark .dbx-content-teaser, .theme-dark .dbx-media figcaption, .theme-dark .dbxForm_wrapper label, .theme-dark .dbxForm_wrapper .dbx-form-bar-kicker, .theme-dark .dbx-grid-subtitle, .theme-dark .dbx-grid-stat span, .theme-dark .dbxReport .dbx-trace-summary-fields, .theme-dark .dbxReport .dbx-trace-empty, .theme-dark .dbxReport .dbx-trace-muted, .theme-dark .dbx-mapping-subtitle, .theme-dark .dbx-mapping-meta, .theme-dark .dbx-mapping-field-meta { color: var(--dbx-night-surface-muted) !important; } .theme-dark .table, .theme-dark table.table, .theme-dark .dbx-report table, .theme-dark .dbxReport table, .theme-dark .tabulator, .theme-dark .tabulator .tabulator-tableholder, .theme-dark .tabulator .tabulator-table, .theme-dark .tabulator .tabulator-row, .theme-dark .tabulator .tabulator-cell { background-color: var(--dbx-night-surface) !important; color: var(--dbx-night-surface-text) !important; border-color: var(--dbx-night-surface-border) !important; } .theme-dark .table > :not(caption) > * > *, .theme-dark .dbx-report table > :not(caption) > * > *, .theme-dark .dbxReport table > :not(caption) > * > * { background-color: var(--dbx-night-surface-2) !important; color: var(--dbx-night-surface-text) !important; border-color: var(--dbx-night-surface-border) !important; }