/* cp-theme.css — claudePanel Design System * Shared across all pages for consistent look & feel * Dark + Light mode via [data-theme] on * * Plesk-Klon Phase 1 (2026-05-10): kanonische Plesk-Design-Tokens als * additive `--cp-*`-Schicht. Bestehende Tokens (--accent/--bg/--card/etc.) * bleiben für Backward-Compat. Doku: docs/architecture/plesk-design-tokens.md */ /* ──────── PLESK-DESIGN-TOKENS (kanonisch, Sprint 7.5 + Plesk-Material 2026-05-11) ──────── * Werte verifiziert aus docs/references/plesk-source-material/css-variables.txt * (Plesk-Trial getComputedStyle :root Dump, 465 Custom-Properties). * Mapping-Tabelle: docs/architecture/plesk-token-mapping-2026-05-11.md */ :root { /* Farben — Plesk-Obsidian-Palette (Plesk-Material verifiziert 2026-05-11) */ --cp-primary: #28aade; /* Plesk blue-600 — war #2F7CF6 (Material-Blau) */ --cp-primary-hover: #259ccc; /* Plesk blue-700 */ --cp-primary-active: #16759a; /* Plesk blue-800 */ --cp-primary-subtle: #d6f3ff; /* Plesk blue-200 — Info-Tints, Badge-BG */ --cp-primary-subtler: #f0faff; /* Plesk blue-100 — leichteste Tints */ --cp-sidebar-bg: #384859; /* Plesk slate-800 (verifiziert sitesucker/main.css, 2026-05-11) — war #1F2937 */ --cp-sidebar-bg-alt: #2d3a47; /* Plesk slate-900 — Section-Header-BG — war #253041 */ --cp-sidebar-text: #FFFFFF; /* Plesk: weisser Item-Text, .title-Span hat opacity:.8 — war #D1D5DB */ --cp-sidebar-text-muted: rgba(255,255,255,0.8); /* Plesk .title opacity .8 */ --cp-sidebar-section-bg: #2d3a47; /* Plesk Section-Header (.menu-group-title) */ --cp-sidebar-hover-bg: #4dccff; /* PLESK-HELLBLAU (blue-500 / primary-on-dark) — war rgba(255,255,255,0.04) */ --cp-sidebar-hover-color: #FFFFFF; --cp-sidebar-active-bg: #4dccff; /* identisch zu Hover (Plesk-Pattern: aktives Item = Hover-Look) */ --cp-sidebar-active-color: #FFFFFF; --cp-sidebar-sub-active-bg: #536a7d; /* Plesk slate-700 fuer Sub-Menu .active */ --cp-content-bg: #f0f0f0; /* Plesk gray-100 — war #F5F7FA */ --cp-card-bg: #FFFFFF; /* Plesk bg-surface */ --cp-border: #ccc; /* Plesk border-subtler (gray-300) — war #E5E7EB */ --cp-border-input: #b5b5b5; /* Plesk border-subtle (gray-400) — war #D1D5DB */ --cp-text-primary: #202020; /* Plesk gray-900 — war #1F2937 */ --cp-text-secondary: #737373; /* Plesk text-subtle / gray-600 — war #6B7280 */ --cp-text-muted: #343434; /* Plesk gray-800 — war #374151 */ --cp-text-link: #16759a; /* Plesk text-link — dunkler als Primary-BG */ --cp-text-link-hover: #259ccc; /* Plesk text-link-hover */ --cp-success: #629a1e; /* Plesk bg-success (olive-grün) — war #22C55E */ --cp-success-text: #487f1e; /* Plesk text-success */ --cp-success-subtle: #ddf5ce; /* Plesk green-200 */ --cp-warning: #d66b0d; /* Plesk bg-warning — war #F59E0B */ --cp-warning-text: #c84a0b; /* Plesk text-warning */ --cp-warning-subtle: #ffeed4; /* Plesk yellow-200 */ --cp-danger: #d02d4b; /* Plesk bg-danger (rosa-rot) — war #EF4444 */ --cp-danger-text: #b30122; /* Plesk text-danger */ --cp-danger-subtle: #ffdee0; /* Plesk red-200 */ --cp-row-hover: #F9FAFB; /* claudePanel-eigen */ /* Typografie — Open Sans als Plesk-Schrift (Plesk verifiziert 2026-05-11) */ --cp-font-family: "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif; /* war: Inter */ --cp-font-family-heading: "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif; --cp-font-family-code: "Consolas", "Liberation Mono", "Menlo", "Courier", monospace; --cp-font-xs: 12px; --cp-font-sm: 13px; --cp-font-md: 14px; --cp-font-lg: 16px; --cp-font-xl: 20px; --cp-font-2xl: 24px; --cp-weight-normal: 400; --cp-weight-medium: 500; --cp-weight-semibold: 600; --cp-line-height-default: 1.5; /* Radius — Plesk-main.css zaehlte 38x 2px (Default), 9x 4px, 4x 8px */ --cp-radius-sm: 2px; /* Plesk-Default — war 4px (Buttons, Inputs, Badges) */ --cp-radius-md: 4px; /* war 6px (Cards, Tabellen) */ --cp-radius-lg: 8px; /* unveraendert (Modals, grosse Cards) */ /* Schatten — Plesk-Verifiziert (Bottom-Inset statt Drop-Shadow auf Cards) */ --cp-shadow-card: inset 0 -1px 0 #0000002e; /* Plesk-Pattern (16x in main.css) */ --cp-shadow-card-classic: 0 1px 2px rgba(0,0,0,0.05); /* Fallback fuer existierendes Markup */ --cp-shadow-dropdown: 0 4px 8px #0000002b; /* Plesk-Pattern (6x in main.css) */ --cp-shadow-modal: 0 10px 25px rgba(0,0,0,0.15); /* claudePanel-eigen */ /* Spacing — Plesk nutzt auch 6/10px Zwischenstufen, nicht striktes 8px-Grid */ --cp-space-1: 4px; --cp-space-1half: 6px; /* Plesk-spezifisch (22x in main.css) */ --cp-space-2: 8px; --cp-space-2half: 10px;/* Plesk-spezifisch (16x in main.css) */ --cp-space-3: 12px; --cp-space-4: 16px; --cp-space-5: 20px; --cp-space-6: 24px; --cp-space-8: 32px; /* Sidebar (Plesk-DevTools-Polish Sprint 9.5) */ --cp-sidebar-width: 224px; /* Plesk verifiziert (.page-sidebar-menu-wrapper width:224px) — war 240px */ --cp-sidebar-width-collapsed: 56px; --cp-sidebar-item-height: 32px; /* Plesk: 8px+16px line + 8px padding-y = 32px */ --cp-sidebar-item-padding: 8px 8px 8px 16px; /* Plesk exakt */ --cp-sidebar-item-padding-x: 16px; /* Legacy fallback */ --cp-sidebar-icon-gap: 10px; --cp-sidebar-item-font-size: 14px; /* Plesk: 14px / line-height 1.429 */ --cp-sidebar-section-font-size: 12px; /* Plesk: 12px Section-Header */ --cp-sidebar-section-padding: 8px 16px; --cp-sidebar-text-active: #FFFFFF; --cp-sidebar-section-header-color: rgba(255,255,255,0.6); /* Plesk .menu-group-name opacity .6 */ /* WICHTIG: KEIN transition auf Sidebar-Items (Plesk hat instant hover). Falls man transition braucht, max 60ms beidseitig. NIEMALS asymmetrisch (Echo-Effekt). */ --cp-sidebar-transition: none; /* Inputs */ --cp-input-height: 36px; --cp-input-padding-x: 12px; --cp-input-focus-shadow: 0 0 0 3px rgba(40,170,222,0.15); /* Plesk blue-600 alpha */ /* Tabellen */ --cp-table-row-height: 48px; --cp-table-cell-padding: 10px 12px; /* Plesk-Standard, Sprint-3b Token, Marathon-Tag-3 */ /* Transitions */ --cp-transition-fast: 0.15s ease; /* ──── Plesk-Card-Tokens (Welle 1 Dashboard-Klon, 2026-05-11) ──── * Werte verifiziert aus docs/references/plesk-source-material/sitesucker/ * (ui-library/plesk-ui-library.css `.pul-panel` + `.home-page-dashboard__*`) * und /tmp/Plesk-Dashboard/Bildschirmfoto 2026-05-11 um 22.52.43.png. */ --cp-card-border: #e5e5e5; /* Plesk --pul-gray-200 */ --cp-card-border-radius: 4px; /* Plesk pul-panel */ --cp-card-shadow: none; /* Plesk-Look: Border statt Shadow */ --cp-card-header-padding: 12px 16px; --cp-card-body-padding: 12px 16px; --cp-card-header-bg: transparent; --cp-card-header-border-bottom: 1px solid #ececec; /* Plesk Trennlinie */ --cp-card-header-font-size: 14px; /* Plesk pul-heading--h5 */ --cp-card-header-font-weight: 600; /* Plesk pul-panel__title */ --cp-card-header-color: #202020; /* Plesk --pul-gray-900 */ --cp-card-icon-color: #737373; /* Plesk --pul-gray-600 (text-subtle) */ --cp-card-link-color: #16759a; /* Plesk --pul-blue-800 (text-link) */ --cp-card-footer-bg: transparent; /* Plesk: gleiches BG wie Body */ --cp-card-footer-border-top: 1px solid #ececec; --cp-card-footer-padding: 8px 16px; } /* ──────── PLESK-PRIMITIVES (--plesk-*, parallele Schicht zu --cp-*) ──────── * Foundation 2026-05-13. Quelle: docs/references/plesk-source-material/css/plesk-ui-library.css * (verbatim aus Plesk-Trial-CSS, --pul-* → --plesk-* umbenannt). * * Naming-Trennung: * --cp-* : claudePanel-semantic Tokens (z.B. --cp-primary, --cp-text-secondary) * --plesk-* : Plesk-Palette + Component-Tokens (z.B. --plesk-blue-600, --plesk-radius-btn) * --pul-* : Plesk-UI-Library (NICHT verwendet — wir embedden React nicht) * * Eine Page nutzt entweder die semantischen --cp-* ODER die granularen --plesk-*. * cp-laravel.css und cp-mail-relay.css nutzen die granulare --plesk-*-Schicht. */ :root { /* ── Plesk-Fonts ── */ --plesk-font-body: "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif; --plesk-font-heading: "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif; --plesk-font-code: "Consolas", "Liberation Mono", "Menlo", "Courier", monospace; /* ── Plesk-Palette (verbatim aus plesk-ui-library.css :where(html)) ── */ --plesk-black: #000; --plesk-white: #fff; --plesk-gray-100: #f0f0f0; --plesk-gray-200: #e5e5e5; --plesk-gray-300: #ccc; --plesk-gray-400: #b5b5b5; --plesk-gray-500: #979797; --plesk-gray-600: #737373; --plesk-gray-700: #525252; --plesk-gray-800: #343434; --plesk-gray-900: #202020; --plesk-gray-a100: #ececec1a; --plesk-gray-a200: #ececec33; --plesk-gray-a600: #2222220a; --plesk-gray-a700: #2222221a; --plesk-gray-a800: #22222240; --plesk-gray-a900: #222222b3; --plesk-slate-100: #f7fafe; --plesk-slate-200: #ddebf7; --plesk-slate-300: #b4cfe6; --plesk-slate-400: #93b1c9; --plesk-slate-500: #7d99b0; --plesk-slate-600: #678196; --plesk-slate-700: #536a7d; --plesk-slate-800: #384859; /* text-primary, system-Hauptfarbe */ --plesk-slate-900: #2d3a47; --plesk-blue-100: #f0faff; --plesk-blue-200: #d6f3ff; --plesk-blue-300: #b4e9ff; --plesk-blue-400: #a0e4ff; --plesk-blue-500: #4dccff; --plesk-blue-600: #28aade; /* primary */ --plesk-blue-700: #259ccc; /* primary hover */ --plesk-blue-800: #16759a; /* primary pressed / text-link */ --plesk-blue-900: #005678; --plesk-blue-a100: #28aade1a; --plesk-blue-a200: #28aade33; --plesk-green-100: #ecfae3; --plesk-green-200: #ddf5ce; --plesk-green-300: #c4f28a; --plesk-green-400: #b1e252; --plesk-green-500: #9cd13a; --plesk-green-600: #80af26; /* bg-success */ --plesk-green-700: #629a1e; /* text-success */ --plesk-green-800: #487f1e; --plesk-green-900: #366807; --plesk-yellow-100: #fceed7; --plesk-yellow-200: #ffeed4; --plesk-yellow-300: #ffd68c; --plesk-yellow-400: #ffc65f; --plesk-yellow-500: #ffb633; --plesk-yellow-600: #d66b0d; /* bg-warning */ --plesk-yellow-700: #c84a0b; /* text-warning */ --plesk-yellow-800: #b45309; --plesk-yellow-900: #92400e; /* ── FALLTÜR 2026-06-02: Token, die im Code (var(--…)) genutzt, aber nie definiert waren — heilt 150+ Stellen, die bisher nur am Fallback hingen. Als Alias auf bestehende, theme-bewusste Token (folgen Hell/Dunkel automatisch). Prüfung: node scripts/check-theme-vars.js */ --plesk-amber-500: #f3b51e; /* Warnung/Amber (war 154x nur Fallback) */ --cp-border-light: var(--cp-card-border); /* Editor-Komponenten */ --cp-text: var(--cp-text-primary); --cp-bg-subtle: var(--cp-content-bg); --plesk-red-100: #fde7e7; --plesk-red-200: #ffdee0; --plesk-red-300: #fbb8b8; --plesk-red-400: #f87171; --plesk-red-500: #f24263; --plesk-red-600: #d02d4b; /* bg-danger */ --plesk-red-700: #b30122; /* text-danger */ --plesk-red-800: #991b1b; --plesk-red-900: #7f1d1d; /* ── Plesk-Brand-Akzente (kein Plesk-Original, fuer Sub-Brands wie Laravel) ── */ --plesk-laravel-red: #FF2D20; /* ── Plesk-Radii (Plesk-main.css zaehlte 38× 2px, 9× 4px, 4× 8px) ── */ --plesk-radius-btn: 2px; /* .pul-button border-radius */ --plesk-radius-input: 2px; /* .pul-input__input border-radius */ --plesk-radius-card: 4px; /* .pul-card border-radius */ --plesk-radius-pill: 8px; /* .pul-card__label border-radius */ --plesk-radius-modal: 4px; /* .pul-dialog */ /* ── Plesk-Shadows ── */ --plesk-card-shadow: 0 2px 4px #28283426, 0 0 1px #28283459; /* .pul-card */ --plesk-card-shadow-hover: 0 4px 8px #28283440, 0 0 1px #28283459; --plesk-modal-shadow: 0 24px 60px rgba(40,40,52,0.22); --plesk-shadow-inset-bottom: inset 0 -1px 0 var(--plesk-gray-a800); --plesk-shadow-inset-input: inset 0 2px 1px #22222212; /* ── Plesk-Spacing (8px-Grid + Plesk 6/10px Zwischenstufen) ── */ --plesk-space-0: 0; --plesk-space-1: 4px; --plesk-space-1half: 6px; --plesk-space-2: 8px; --plesk-space-2half: 10px; --plesk-space-3: 12px; --plesk-space-4: 16px; --plesk-space-5: 20px; --plesk-space-6: 24px; --plesk-space-8: 32px; --plesk-space-10: 40px; /* ── Plesk-Buttons (.pul-button) ── */ --plesk-btn-padding: 6px 20px; --plesk-btn-sm-padding: 4px 12px; --plesk-btn-lg-padding: 12px 24px; --plesk-btn-min-h: 28px; --plesk-btn-sm-min-h: 24px; --plesk-btn-lg-min-h: 40px; --plesk-btn-min-w: 70px; --plesk-btn-font-size: 12px; --plesk-btn-sm-font-size: 11px; --plesk-btn-lg-font-size: 14px; --plesk-btn-font-weight: 600; --plesk-btn-line-height: 16px; /* ── Plesk-Inputs (.pul-input__input) ── */ --plesk-input-padding: 3px 8px; --plesk-input-min-h: 28px; --plesk-input-font-size: 13px; --plesk-input-line-height: 18px; --plesk-input-border-color: var(--plesk-gray-300); --plesk-input-focus-ring: 0 0 0 3px var(--plesk-blue-a100); /* ── Plesk-Cards (.pul-card / .pul-panel) ── */ --plesk-card-bg: #fff; --plesk-card-bg-translucent: rgba(255,255,255,0.96); --plesk-card-border-color: var(--plesk-gray-200); --plesk-card-header-bg: var(--plesk-slate-100); /* #f7fafe */ --plesk-card-header-padding: 8px 16px; --plesk-card-body-padding: 16px; --plesk-card-footer-padding: 12px 16px; /* ── Plesk-Sections (.pul-section) ── */ --plesk-section-title-size: 20px; --plesk-section-title-weight: 600; --plesk-section-mb: 20px; /* ── Plesk-Tabs (.pul-tabs) ── */ --plesk-tabs-link-size: 14px; --plesk-tabs-link-weight: 600; --plesk-tabs-link-height: 26px; --plesk-tabs-gap: 24px; --plesk-tabs-border-color: var(--plesk-gray-200); --plesk-tabs-underline-width: 2px; /* ── Plesk-Pills/Badges (.pul-card__label) ── */ --plesk-pill-padding: 1px 8px; --plesk-pill-font-size: 11px; --plesk-pill-font-weight: 600; --plesk-pill-line-height: 16px; /* ── Plesk-Tables ── */ --plesk-table-header-bg: var(--plesk-card-header-bg); --plesk-table-row-padding: 12px 16px; --plesk-table-row-hover-bg: var(--plesk-blue-100); --plesk-table-border-color: var(--plesk-gray-100); /* ── Plesk-Transitions ── */ --plesk-transition-fast: .15s ease; --plesk-transition-btn: background-color .2s linear, box-shadow .2s linear, opacity .2s linear; /* Semantic-Aliases — zeigen auf Palette-Tokens, keine Wert-Duplikation */ --plesk-accent: var(--plesk-blue-600); --plesk-accent-hover: var(--plesk-blue-700); --plesk-accent-pressed: var(--plesk-blue-800); --plesk-text-primary: var(--plesk-slate-800); --plesk-text-secondary: var(--plesk-slate-700); --plesk-text-muted: var(--plesk-slate-500); --plesk-border: var(--plesk-gray-300); --plesk-border-light: var(--plesk-gray-200); --plesk-success: var(--plesk-green-600); --plesk-warning: var(--plesk-yellow-600); --plesk-danger: var(--plesk-red-600); --plesk-bg-surface: #ffffff; --plesk-bg-page: var(--plesk-gray-100); } /* ──────── DESIGN TOKENS (Legacy, Backward-Compat für ~143 Pages) ──────── */ :root, [data-theme="dark"] { --slate: #384859; /* System-Hauptfarbe (Logo, Headings, etc.) */ --footer-row-h: 46px; /* gemeinsame Höhe für Footer-Bar + Sidebar-Bottom-Buttons */ /* === Glasshintergrund (Backdrop-Blur / "Frosted Glass") — System-Default === Wird von allen Overlay-Komponenten genutzt (.modal-bg, .cp-claude-backdrop, .cfg-backdrop, beliebige neue Drawer/Sheet-Backdrops). Aenderung hier wirkt system-weit. Pattern + Doku in designvorlage.html. */ --cp-glass-bg: rgba(15, 23, 42, 0.45); --cp-glass-blur: 4px; /* Dark-Goldstandard Phase 5 (User-Wunsch 2026-05-24): Slide-In-Farbpattern * auf Content migrieren. Slide-In-Body=#1a1d24 / Input=#12151c / Border=#2a2f3a * — astrein lesbar. Page-BG bleibt #2a3a52 heller Slate, Cards bekommen * Slide-In-Body-Ton #1a1d24 → sichtbarer Kontrast wie zwischen Slide-In-Head und Body. */ --bg: #2a3a52; /* Page-BG bleibt heller Slate */ --bg-soft: #12151c; /* dunkelster Ton fuer Inputs = Slide-In Input-BG */ --bg-elevated: #1a1d24; /* Card/Widget = Slide-In-Body */ --card: #1a1d24; --border: #2a2f3a; /* Slide-In-Border */ --border-strong: #3a3f4a; --text: #e2e8f0; --text-strong: #ffffff; --muted: #b0bbcd; --accent: #28aade; /* Plesk-Akzent (= --plesk-blue-600); zuvor verbotenes Royal-Blau, systemweite Kanonisierung Lane 5 */ --accent-hover: #259ccc; /* = cp-btn-primary:hover */ --accent-soft: rgba(40, 170, 222, 0.12); --purple: var(--plesk-accent, #28aade); --green: #3ec28f; --green-soft: rgba(62, 194, 143, 0.15); --red: #ff5f6d; --red-soft: rgba(255, 95, 109, 0.15); --orange: #ff9f43; --orange-soft: rgba(255, 159, 67, 0.15); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); /* ────────────────────────────────────────────────────────────────── * Plesk-Tokens Dark-Override 2026-05-24 * Sonst rendern Widgets/Cards mit weißem BG (Plesk-Tokens * --cp-card-bg etc. werden nur in :root definiert und nicht im * Dark-Theme überschrieben). Folge: Dashboard, Kunden-Tabelle etc. * bleiben weiß auch wenn Dark-Mode an ist. * ────────────────────────────────────────────────────────────────── */ /* Slate-Palette Phase 5 — Card-BG = Slide-In-Body #1a1d24 (sichtbarer Kontrast * zu Page-BG #2a3a52, harmoniert mit Slide-In-Pattern). */ --cp-card-bg: #1a1d24; --cp-card-bg-hover: #232831; --cp-card-border: #2a2f3a; --cp-card-header-bg: transparent; --cp-card-header-color: #ffffff; --cp-card-header-border-bottom: 1px solid #2a2f3a; --cp-content-bg: #2a3a52; --plesk-card-bg: #1a1d24; --plesk-card-bg-translucent: rgba(26, 29, 36, 0.96); --plesk-gray-50: #1a1d24; --plesk-gray-100: #1a1d24; --plesk-gray-200: #2a2f3a; --plesk-gray-300: #4a5b77; --plesk-gray-400: #6b7d96; --plesk-gray-500: #a8b3c4; --plesk-gray-600: #c0c9d8; --plesk-gray-700: #d8dde6; --plesk-gray-800: #e2e8f0; --plesk-gray-900: #ffffff; /* Page-spezifische kpx-Tokens (kunden/pakete/abonnements etc.) */ --kpx-text: #e2e8f0; --kpx-muted: #a8b3c4; --kpx-border: #2a2f3a; --kpx-border-soft: #2a2f3a; --kpx-row-hover: rgba(40, 170, 222, 0.08); --kpx-header-bg: #232831; --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5); --sidebar-bg: #1a1d24; /* Plesk-Text-Tokens Dark — vorher nur in :root mit Light-Werten (#202020/#737373/#343434). Sonst sind Card-Titel/Headlines im Dark schwarz auf Slate = unlesbar (tools-settings .ts-card-title, viele Pages). */ --cp-text-primary: #e2e8f0; --cp-text-secondary: #b0bbcd; --cp-text-muted: #d8dde6; --cp-text-link: #4dccff; --cp-text-link-hover: #7ed3ee; } /* Maximilian 2026-06-01: Im Dunkel-Modus war der Seiten-Hintergrund (--bg) ein heller Slate (#2a3a52). Hinter dem transparenten Kopfbereich (Ueberschrift, Untertitel, Reiter) stach das als hellblauer Kasten hervor, waehrend die Eintraege/Karten dunkles Blau (#1a1d24) haben. Auf Wunsch: Kopf-Hintergrund = dunkles Blau der Eintraege, auf ALLEN Seiten. Knapp dunkler als die Karten, damit sich Karten weiter abheben. !important schlaegt die Inline-Force-Overrides aus cp-app.js (--bg/--bg-soft) und ein evtl. altes DB-Theme. */ html[data-theme="dark"] { --bg: #161922 !important; --bg-soft: #12141a !important; --cp-content-bg: #161922 !important; } html[data-theme="dark"] body { background-color: #161922 !important; } /* Fundgrube #270: ein gespeichertes Design konnte beim Laden kurz einen Misch- Zustand erzeugen (heller Hintergrund, aber dunkle Textfarbe inline kleben geblieben) -> Ueberschriften hell auf weiss = unlesbar. Die Text-Variablen je Modus per !important festnageln, damit sie IMMER zum Hintergrund passen; das schlaegt jeden inline gesetzten Rest und garantiert lesbaren Kontrast, ohne in die (heikle) Theme-Lade-Logik einzugreifen. */ html[data-theme="light"] { --cp-text-primary: #202020 !important; --cp-text-secondary: #5a5a5a !important; --cp-text-muted: #737373 !important; --text: #202020 !important; --muted: #5a5a5a !important; } html[data-theme="dark"] { --cp-text-primary: #e2e8f0 !important; --cp-text-secondary: #b0bbcd !important; --cp-text-muted: #d8dde6 !important; --text: #e2e8f0 !important; --muted: #b0bbcd !important; } [data-theme="light"] { --slate: #384859; /* System-Hauptfarbe (Logo, Headings, etc.) */ --cp-glass-bg: rgba(15, 23, 42, 0.45); --cp-glass-blur: 4px; --bg: #ffffff; --bg-soft: #f5f7fa; --bg-elevated: #ffffff; --card: #ffffff; --border: #e2e6ed; --border-strong: #cbd2dc; --text: #1a1d24; --text-strong: #0a0c10; --muted: #6b7280; --accent: #28aade; /* Plesk-Akzent (= --plesk-blue-600); zuvor verbotenes Royal-Blau, systemweite Kanonisierung Lane 5 */ --accent-hover: #259ccc; /* = cp-btn-primary:hover */ --accent-soft: rgba(40, 170, 222, 0.12); --purple: var(--plesk-accent, #28aade); --green: #10b981; --green-soft: rgba(16, 185, 129, 0.1); --red: #ef4444; --red-soft: rgba(239, 68, 68, 0.1); --orange: #f59e0b; --orange-soft: rgba(245, 158, 11, 0.1); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12); --sidebar-bg: #ffffff; /* ────────────────────────────────────────────────────────────────── * Plesk-Tokens Light-Override 2026-05-24 (Mobile-Dark-Bug-Fix) * Root-Cause: der Block `:root, [data-theme="dark"]` setzt * --cp-card-bg etc. auf dark-Werte direkt in :root. Folge: ohne * expliziten Light-Reset erbt der Light-Mode die dark-Werte aus * :root (Cascade-Match, da [data-theme="light"] sie nicht * überschreibt). Mobile-Inkognito (cp_theme=light) zeigt dann * dunkle Widgets. * Fix: alle Plesk-Tokens hier explizit auf Light-Werte setzen. * Werte aus den Original-:root-Definitionen (Z.32-50, 162-170). * ────────────────────────────────────────────────────────────────── */ --cp-card-bg: #ffffff; --cp-card-bg-hover: #f9fafb; --cp-card-border: #e5e5e5; --cp-card-header-bg: transparent; --cp-card-header-color: #202020; --cp-card-header-border-bottom: 1px solid #ececec; --plesk-card-bg: #ffffff; --plesk-card-bg-translucent: rgba(255,255,255,0.96); --plesk-gray-50: #f7f7f7; --plesk-gray-100: #f0f0f0; --plesk-gray-200: #e5e5e5; --plesk-gray-300: #ccc; --plesk-gray-400: #b5b5b5; --plesk-gray-500: #979797; --plesk-gray-600: #737373; --plesk-gray-700: #525252; --plesk-gray-800: #343434; --plesk-gray-900: #202020; /* Page-spezifische kpx-Tokens (kunden/pakete/abonnements etc.) — Light-Werte */ --kpx-text: #202020; --kpx-muted: #737373; --kpx-border: #e5e5e5; --kpx-border-soft: #f0f0f0; --kpx-row-hover: #f5f7fa; --kpx-header-bg: #f7fafe; } /* ────────────────────────────────────────────────────────────────── * Mobile-Dark-Force-Defense 2026-05-24 * Chrome Android Force-Dark kann meta color-scheme ignorieren. Defensiv: * (a) html[data-theme="light"] erzwingt color-scheme strikt → ALLE * UA-Defaults (Scrollbar/Form-Controls/SystemColors) bleiben hell. * (b) Höhere Spezifität als :root, schlägt Cascade-Match. * ────────────────────────────────────────────────────────────────── */ html[data-theme="light"] { color-scheme: light only; forced-color-adjust: none; /* Schützt vor Windows-High-Contrast */ } html[data-theme="light"] body { background: #ffffff; color: #1a1d24; } /* Widgets/Cards/Panels — defensive Light-BG für alle bekannten * Container-Klassen die im Mobile-Force-Dark als „dark" erscheinen * könnten. Spezifität 0,2,0 (html[data-theme=light] .cp-widget) schlägt * jeden :root-Token-Cascade. */ html[data-theme="light"] .cp-widget, html[data-theme="light"] .cp-card, html[data-theme="light"] .pul-card, html[data-theme="light"] .pul-panel, html[data-theme="light"] .stat-card, html[data-theme="light"] .tv-card, html[data-theme="light"] .tv-section, html[data-theme="light"] .cp-box, html[data-theme="light"] .grid-stack-item-content { background-color: #ffffff; color: #202020; } html[data-theme="light"] .cp-widget-head, html[data-theme="light"] .cp-card-header, html[data-theme="light"] .pul-card__header, html[data-theme="light"] .pul-panel__header { background-color: transparent; color: #202020; border-bottom-color: #ececec; } html[data-theme="light"] .cp-widget-title, html[data-theme="light"] .cp-card-title, html[data-theme="light"] .pul-card__title, html[data-theme="light"] .pul-panel__title { color: #202020; } html[data-theme="light"] .cp-widget-body, html[data-theme="light"] .cp-card-body, html[data-theme="light"] .pul-card__body, html[data-theme="light"] .pul-panel__body { background-color: #ffffff; color: #202020; } /* ──────── RESET & BASE ──────── */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--cp-font-family); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; transition: background 0.2s, color 0.2s; min-height: 100vh; } a { color: inherit; text-decoration: none; } input, button, select, textarea { font-family: inherit; color: inherit; } /* ──────── LAYOUT ──────── */ .cp-app { display: flex; min-height: 100vh; } .cp-sidebar { /* Plesk-verifiziert 2026-05-11: sidebar slate-800 #384859, Items weiss. Hartgecodet damit Sidebar schon BEIM ERSTEN PAINT richtig aussieht (kein Flash bis cp-sidebar-v2.css ankommt). */ width: var(--cp-sidebar-width, 224px); background: var(--cp-sidebar-bg, #384859); color: var(--cp-sidebar-text, #FFFFFF); border-right: 1px solid rgba(255,255,255,0.04); font-family: var(--cp-font-family); font-size: 14px; line-height: 20px; flex-shrink: 0; overflow-y: auto; overflow-x: hidden; transition: transform 0.25s ease, width 0.2s ease; position: sticky; top: 0; height: 100vh; z-index: 40; } .cp-sidebar-header { /* Höhe an .cp-header angleichen, damit beide Trennlinien (Logo↔Menü und Header↔Content) auf exakt derselben Y-Position liegen. */ padding: 0 18px; height: 60px; min-height: 60px; box-sizing: border-box; border-bottom: 1px solid var(--border); box-shadow: 0 2px 4px rgba(0,0,0,0.06); display: flex; align-items: center; justify-content: center; gap: 10px; position: sticky; top: 0; background: #ffffff; z-index: 2; overflow: hidden; } .cp-sidebar-header .cp-logo { display: inline-block; max-width: 100%; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.45)) drop-shadow(0 8px 6px rgba(0,0,0,0.20)); } .cp-sidebar-header .cp-logo-mask { display: block; width: 220px; max-width: 100%; height: 44px; aspect-ratio: 873/191; background-color: #384859; -webkit-mask: url('/content/media/file/9c88c496-c191-43d5-8cce-2158964315cc?v=trim2') center / contain no-repeat; mask: url('/content/media/file/9c88c496-c191-43d5-8cce-2158964315cc?v=trim2') center / contain no-repeat; } .cp-logo-mark { width: 34px; height: 34px; background: var(--plesk-accent, #28aade); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 4px 12px rgba(40, 170, 222, 0.3); } .cp-logo-name { font-size: 17px; font-weight: 700; letter-spacing: -0.3px; } .cp-sidebar-nav { padding: 0; } /* Sprint 9.5 — Plesk-DevTools-Polish. Section-Header (cp-nav-cat) und Items (cp-nav-item) auf Plesk-exakte Werte. Border-Radius 0 (konservativ, kein Pill-Shape). */ .cp-nav-cat { padding: 24px 16px 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cp-sidebar-section-header-color, #9CA3AF); } .cp-nav-item { /* Plesk-verifiziert 2026-05-11 (.page-sidebar-menu a): 8px 8px 8px 16px padding, 14px / 1.429, weiss .8 opacity. Kein transition (instant hover). Memory no-color-stripes: kein border-left, nur BG-Fill. */ min-height: var(--cp-sidebar-item-height, 32px); padding: var(--cp-sidebar-item-padding, 8px 8px 8px 16px); border-radius: 0; display: flex; align-items: center; gap: var(--cp-sidebar-icon-gap, 10px); font-size: var(--cp-sidebar-item-font-size, 14px); line-height: 1.429; font-weight: 400; color: var(--cp-sidebar-text, #FFFFFF); cursor: pointer; transition: none !important; /* Plesk-instant Hover */ -webkit-transition: none !important; animation: none !important; margin: 0; position: relative; } .cp-nav-item:hover, .cp-nav-item:focus { background: #4dccff !important; /* Plesk-Hellblau verifiziert */ background-color: #4dccff !important; color: #FFFFFF !important; outline: none !important; transition: none !important; } .cp-nav-item.active { /* Maximilian-Pref 2026-05-12: kein permanenter Active-BG — Aktives Item zeigt sich nur durch Hover-Reaktion, ansonsten visuell identisch zu inaktiven Items. */ background: transparent !important; background-color: transparent !important; color: var(--cp-sidebar-text, #FFFFFF) !important; font-weight: 400; } /* Memory-Regel no-color-stripes: KEIN border-left/-top auf Active-Item. Active wird durch BG-Fill markiert wie Plesk (.page-sidebar-menu a:hover und .active teilen den gleichen Look). */ .cp-nav-item.active::before { display: none !important; } .cp-nav-ico { font-size: 16px; width: 16px; height: 16px; text-align: center; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .cp-nav-badge { margin-left: auto; font-size: 14px; padding: 2px 7px; border-radius: 99px; background: var(--orange-soft); color: var(--orange); font-weight: 600; } .cp-nav-badge.err { background: var(--red-soft); color: var(--red); } .cp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .cp-header { height: 60px; padding: 0 24px 0 12px; border-bottom: 1px solid var(--border); box-shadow: 0 2px 4px rgba(0,0,0,0.06); display: flex; align-items: center; justify-content: space-between; background: var(--bg-elevated, #ffffff); color: var(--text, #222); position: sticky; top: 0; z-index: 30; gap: 12px; } html[data-theme="dark"] .cp-header, [data-theme="dark"] .cp-header { background: var(--bg-elevated, #1a1d24) !important; color: var(--text, #e6e8ee) !important; border-bottom-color: var(--border, #2a2f3a) !important; } html[data-theme="dark"] .cp-header *, [data-theme="dark"] .cp-header * { color: inherit; } html[data-theme="dark"] body[data-portal] .cp-header, [data-theme="dark"] body[data-portal] .cp-header { background: var(--bg-elevated, #1a1d24) !important; border-bottom-color: var(--border, #2a2f3a) !important; } html[data-theme="dark"] body[data-portal] .cp-search-pill, [data-theme="dark"] body[data-portal] .cp-search-pill { background: var(--bg, #0a0c10) !important; border-color: var(--border, #2a2f3a) !important; } html[data-theme="dark"] body[data-portal] .cp-search-pill input, [data-theme="dark"] body[data-portal] .cp-search-pill input { color: var(--text, #e6e8ee) !important; } html[data-theme="dark"] body[data-portal] .cp-search-pill input::placeholder, [data-theme="dark"] body[data-portal] .cp-search-pill input::placeholder { color: var(--muted, #8a92a3) !important; } .cp-header-left { display: flex; align-items: center; gap: 14px; } .cp-mobile-toggle { display: none; background: transparent; border: 0; color: var(--text); width: 36px; height: 36px; border-radius: 8px; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; } .cp-mobile-toggle:hover { background: var(--bg-elevated); } .cp-header-title { font-size: 16px; font-weight: 600; } .cp-header-actions { display: flex; align-items: center; gap: 8px; } .cp-theme-toggle { background: var(--bg-elevated); border: 1px solid var(--border); width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; transition: all 0.15s; } .cp-theme-toggle:hover { border-color: var(--accent); transform: scale(1.05); } .cp-user-chip { background: var(--bg-elevated); border: 1px solid var(--border); padding: 6px 12px; border-radius: 99px; display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; } .cp-user-chip:hover { border-color: var(--accent); } .cp-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--plesk-accent, #28aade); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: #fff; } .cp-content { padding: 24px; flex: 1; min-width: 0; } /* ──────── COMPONENTS ──────── */ /* Page header */ .cp-page-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; } /* Globale Heading-Defaults — einheitliche Farbe/Gewicht/Spacing */ h1, h2, h3, h4, h5, h6 { color: var(--slate); font-weight: 700; line-height: 1.25; margin: 0; } h1, h1.cp-title, h1.cp-page-title { font-size: 26px; letter-spacing: -0.5px; } h2 { font-size: 20px; } h3 { font-size: 16px; font-weight: 600; } h4 { font-size: 14px; font-weight: 600; } h5 { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } h6 { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } h1.cp-title .cp-accent { color: var(--slate); background: none; -webkit-background-clip: initial; background-clip: initial; } .cp-subtitle { color: var(--muted); font-size: 14px; margin-top: 2px; } /* Cards */ .cp-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px; } .cp-card-hover { transition: all 0.2s; } .cp-card-hover:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); } /* ──── Plesk-Card-Subkomponenten (Welle 1 Dashboard-Klon, 2026-05-11) * Diese Klassen sind ADDITIV. Sie ersetzen `.cp-card` nicht — sie geben * Pages, die Plesk-1:1 wollen, ein Header/Body/Footer-Pattern. * Vorbild: Plesk `.pul-panel__header / __content / __footer + .home-page-dashboard__panel-footer`. */ .cp-card-header { padding: var(--cp-card-header-padding); background: var(--cp-card-header-bg); border-bottom: var(--cp-card-header-border-bottom); font-size: var(--cp-card-header-font-size); font-weight: var(--cp-card-header-font-weight); color: var(--cp-card-header-color); display: flex; align-items: center; gap: 8px; line-height: 1.429; } .cp-card-header .ti, .cp-card-header svg, .cp-card-header img.cp-card-icon { color: var(--cp-card-icon-color); width: 16px; height: 16px; flex-shrink: 0; } .cp-card-header-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-card-header-extra { flex: none; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; } .cp-card-body { padding: var(--cp-card-body-padding); } .cp-card-footer { padding: var(--cp-card-footer-padding); border-top: var(--cp-card-footer-border-top); background: var(--cp-card-footer-bg); font-size: 13px; color: var(--cp-card-icon-color); } .cp-card-link { color: var(--cp-card-link-color); text-decoration: none; } .cp-card-link:hover { text-decoration: underline; color: var(--cp-text-link-hover, #259ccc); } .cp-card-gradient { background: linear-gradient(135deg, var(--card), var(--bg-soft)); border: 1px solid var(--border); border-radius: 14px; padding: 22px; position: relative; overflow: hidden; } .cp-card-gradient::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, var(--accent-soft) 0%, transparent 60%); pointer-events: none; } /* Stats */ .cp-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; } .cp-stat { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; position: relative; overflow: hidden; } .cp-stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--plesk-accent, #28aade); } .cp-stat-num { font-size: 28px; font-weight: 700; line-height: 1; } .cp-stat-lbl { color: var(--muted); font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 6px; } .cp-stat-sub { font-size: 14px; color: var(--muted); margin-top: 4px; } .cp-stat-delta { font-size: 14px; margin-top: 4px; } .cp-stat-delta.up { color: var(--green); } .cp-stat-delta.down { color: var(--red); } /* Buttons — Plesk 1:1 (Quelle: docs/references/plesk-source-material/css/main.css .btn>button + .btn-primary>button). PFLICHT-Werte, nicht abweichen: bg #ececec, color #222, font-size 12px / weight 600, padding 4px 20px, border 0, border-radius 2px, box-shadow inset 0 -1px 0 #0000002e. Die 12px sind eine bewusste Ausnahme vom systemweiten 14px-Minimum (siehe CLAUDE.md Anti-Pattern-Sektion). */ .cp-btn { background-color: #ececec; color: #222; border: 0; border-radius: 2px; box-shadow: inset 0 -1px 0 #0000002e; padding: 4px 20px; min-height: 28px; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 20px; text-align: center; text-decoration: none; text-transform: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; vertical-align: middle; white-space: nowrap; transition: background-color 0.18s; box-sizing: border-box; } .cp-btn:hover { background-color: #dddddd; color: #222; } .cp-btn:active { background-color: #cccccc; } .cp-btn:focus { outline: 0; box-shadow: inset 0 -1px 0 #0000002e, 0 0 0 4px #0095ff3d; } .cp-btn-primary { background-color: #28aade; color: #fff; } .cp-btn-primary:hover { background-color: #259ccc; color: #fff; } .cp-btn-primary:active { background-color: #2089b2; color: #fff; } .cp-btn-primary:focus { box-shadow: inset 0 -1px 0 #0000002e, 0 0 0 4px #0095ff3d; } .cp-btn-danger { background-color: #cb2c43; color: #fff; } .cp-btn-danger:hover { background-color: #a52337; color: #fff; } .cp-btn-danger:active { background-color: #8a1c2d; color: #fff; } .cp-btn-ghost { background: transparent; box-shadow: none; } .cp-btn-ghost:hover { background: rgba(0, 0, 0, 0.04); } .cp-btn-sm { padding: 2px 12px; min-height: 22px; line-height: 18px; } .cp-btn-lg { padding: 8px 24px; min-height: 36px; line-height: 24px; } .cp-btn:disabled { opacity: 0.55; cursor: not-allowed; } .cp-btn:disabled:hover { background-color: #ececec; color: #222; } .cp-btn-primary:disabled:hover { background-color: #28aade; color: #fff; } .cp-btn-danger:disabled:hover { background-color: #cb2c43; color: #fff; } /* cp-btn-gradient ist VERBOTEN (Plesk-Klon-Regel). Kein Re-Add. */ /* cp-btn-warn / cp-btn-success entfallen — Plesk hat keine Warn/Success-Button- Varianten. Falls semantisch nötig: .cp-btn-primary + Icon, oder weglassen. */ /* Inputs */ .cp-input, .cp-select { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 10px 12px; border-radius: 8px; font-size: 14px; outline: none; font-family: inherit; transition: border-color 0.15s; width: 100%; } .cp-input:focus, .cp-select:focus { border-color: var(--accent); } .cp-field { margin-bottom: 12px; } .cp-label { font-size: 14px; color: var(--muted); font-weight: 500; display: block; margin-bottom: 6px; } /* Table — Plesk-verifiziert 2026-05-11 aus sitesucker/main.css: .list>tbody>tr>td: line-height 1.429, padding 10px 8px, vertical-align top .list>thead>tr>th: font-size 14px, font-weight 400, border-bottom 2px */ .cp-table-wrap { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .cp-table { width: 100%; border-collapse: collapse; font-family: var(--cp-font-family); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .cp-table th { text-align: left; padding: var(--cp-table-cell-padding); font-size: 14px; font-weight: 400; line-height: 1.429; font-family: var(--cp-font-family); color: var(--muted); background: var(--bg-soft); border-bottom: 2px solid var(--border); vertical-align: bottom; } .cp-table td { padding: var(--cp-table-cell-padding); border-bottom: 1px solid var(--border); font-size: 14px; line-height: 1.429; vertical-align: middle; font-family: var(--cp-font-family); } .cp-table tr:last-child td { border-bottom: 0; } .cp-table tr.cp-row { cursor: pointer; transition: background 0.1s; } .cp-table tr.cp-row:hover { background: var(--accent-soft); } /* Bulk-Selection (CP.bulk) — generischer Pattern für Listen-Pages */ .cp-bulk-th, .cp-bulk-td { width: 36px; padding-left: 14px; padding-right: 4px; text-align: center; } .cp-bulk-th input, .cp-bulk-td input { cursor: pointer; width: 16px; height: 16px; accent-color: #28aade; vertical-align: middle; } .cp-table tr.cp-bulk-selected td { background: rgba(40, 170, 222, 0.06); } .cp-bulk-bar { position: fixed; left: 50%; transform: translateX(-50%) translateY(120%); bottom: 18px; z-index: 90; background: #0F172A; color: #fff; border-radius: 999px; padding: 8px 12px 8px 18px; display: flex; align-items: center; gap: 14px; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.32); transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease; opacity: 0; pointer-events: none; font-family: 'Montserrat', sans-serif; font-size: 14px; max-width: calc(100vw - 32px); } .cp-bulk-bar.open { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; } .cp-bulk-bar .cp-bulk-count { font-weight: 600; white-space: nowrap; } .cp-bulk-bar .cp-bulk-actions { display: flex; gap: 6px; flex-wrap: wrap; } .cp-bulk-bar .cp-bulk-btn { font: 600 13px 'Montserrat', sans-serif; background: rgba(255, 255, 255, 0.12); color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.22); border-radius: 7px; padding: 6px 12px; cursor: pointer; transition: background 200ms, border-color 200ms; display: inline-flex; align-items: center; gap: 6px; } .cp-bulk-bar .cp-bulk-btn:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.40); } .cp-bulk-bar .cp-bulk-btn.danger { background: #DC2626; border-color: #DC2626; } .cp-bulk-bar .cp-bulk-btn.danger:hover { background: #B91C1C; border-color: #B91C1C; } .cp-bulk-bar .cp-bulk-btn.primary { background: #28aade; border-color: #28aade; } .cp-bulk-bar .cp-bulk-btn.primary:hover { background: #259ccc; border-color: #259ccc; } .cp-bulk-bar .cp-bulk-clear { background: transparent; border: 0; color: rgba(255, 255, 255, 0.7); cursor: pointer; padding: 6px 10px; font-size: 13px; border-radius: 7px; } .cp-bulk-bar .cp-bulk-clear:hover { color: #fff; background: rgba(255, 255, 255, 0.12); } /* Badges — Plesk-verifiziert 2026-05-11 aus sitesucker/main.css .label: font-size 11px, font-weight 400, line-height 1.455, padding 0 8px, border-radius 8px, text-transform uppercase, letter-spacing 0.5px. Background-Fill (kein Border-Stripe) gemaess Memory no-color-stripes. */ .cp-badge { /* Fundgrube #363: ~20% kompakter (weniger wuchtig) */ display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: 0 6px; border-radius: 7px; font-family: var(--cp-font-family); font-size: 10px; font-weight: 400; line-height: 1.5; letter-spacing: 0.3px; text-transform: uppercase; background: var(--accent-soft); color: var(--accent); vertical-align: middle; } .cp-badge.success { background: var(--green-soft); color: var(--green); } .cp-badge.warn { background: var(--orange-soft); color: var(--orange); } .cp-badge.err { background: var(--red-soft); color: var(--red); } .cp-badge.running::before { content: ''; width: 7px; height: 7px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: cp-spin 0.8s linear infinite; } @keyframes cp-spin { to { transform: rotate(360deg); } } /* Tabs */ .cp-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 16px; } .cp-tab { padding: 10px 16px; font-size: 14px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; transition: all 0.12s; } .cp-tab:hover { color: var(--text); } .cp-tab.active { color: var(--accent); border-color: var(--accent); font-weight: 500; } /* Defensive Tab-Bar-Fix (siehe CLAUDE.md "Tab-Leiste verschwindet"): .tabs muss zwingend sichtbar bleiben; Page-lokale display:none-Overrides (z.B. docs-admin.html) gewinnen weiterhin, da inline-styles spaeter geladen werden als cp-theme.css. */ .tabs { display: flex !important; visibility: visible !important; min-height: 42px; position: relative; z-index: 5; } /* Muted text */ .cp-muted { color: var(--muted); font-size: 14px; } .cp-mono { font-family: 'JetBrains Mono', Consolas, monospace; font-size: 14px; } /* Grid utility */ .cp-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; } .cp-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } /* Progress */ .cp-progress { height: 4px; background: var(--border); border-radius: 99px; overflow: hidden; } .cp-progress-fill { height: 100%; background: var(--plesk-accent, #28aade); transition: width 0.3s; } .cp-progress-indet .cp-progress-fill { animation: cp-indet 1.5s ease-in-out infinite; } @keyframes cp-indet { 0% { width: 0%; margin-left: 0%; } 50% { width: 60%; margin-left: 20%; } 100% { width: 0%; margin-left: 100%; } } /* Toast */ /* Legacy-Fallback (#cpToast) — greift nur wenn cp-toaster.js (noch) nicht geladen ist. MUSS Plesk-konform sein: dunkel #343434, weiß, rechts (NICHT grün, NICHT zentriert). Plesk-Default = oben/top-end. */ .cp-toast { position: fixed; top: 24px; right: 24px; left: auto; transform: translateX(120%); background: #343434; color: #fff; padding: 12px 16px; border-radius: 2px; box-shadow: 0 4px 16px #28283426, 0 0 1px #28283459; max-width: 400px; opacity: 0; transition: transform 0.25s ease-out, opacity 0.2s ease-out; z-index: 10010; font-size: 14px; pointer-events: none; } .cp-toast.show { opacity: 1; transform: translateX(0); } .cp-toast.err { background: #343434; } /* Empty state */ .cp-empty { text-align: center; padding: 50px 20px; color: var(--muted); } .cp-empty-ico { font-size: 44px; margin-bottom: 10px; opacity: 0.5; } /* Mobile overlay */ .cp-mobile-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 35; backdrop-filter: blur(4px); } .cp-mobile-backdrop.show { display: block; } /* Header-Dropdown-Backdrop: wenn Schild/Glocke/Kebab/Lion/User offen, verschwommener Dimmer hinter dem Dropdown (wie Sidebar-Mobile-Overlay). z-index 28 sitzt UNTER den Dropdowns (z-index 30+) aber ueber Page-Content. */ body.cp-dd-open::before { content: ''; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 28; pointer-events: none; animation: cpDdBackdropIn .15s ease-out; } @keyframes cpDdBackdropIn { from { opacity: 0 } to { opacity: 1 } } /* ──────── MOBILE ──────── */ @media (max-width: 900px) { .cp-mobile-toggle { display: inline-flex; } .cp-sidebar { position: fixed; top: 0; left: 0; bottom: 0; transform: translateX(-100%); box-shadow: var(--shadow-lg); } .cp-sidebar.open { transform: translateX(0); } .cp-content { padding: 16px; } .cp-page-head { flex-direction: column; align-items: flex-start; } h1.cp-title { font-size: 22px; } .cp-stats-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; } .cp-stat { padding: 12px; } .cp-stat-num { font-size: 22px; } .cp-header { padding: 0 16px; height: 56px; } .cp-sidebar-header { height: 56px; min-height: 56px; padding: 0 16px; } .cp-sidebar-header .cp-logo { max-height: 40px; } .cp-user-chip { padding: 5px 10px; font-size: 14px; } .cp-user-chip .cp-user-name { display: none; } .cp-table th, .cp-table td { padding: 9px 10px; } .cp-btn { padding: 8px 12px; font-size: 14px; } } /* Loading skeleton */ .cp-skel { background: linear-gradient(90deg, var(--bg-soft), var(--border), var(--bg-soft)); background-size: 200% 100%; animation: cp-skel 1.4s infinite; border-radius: 6px; } @keyframes cp-skel { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* BUGFIX-A - Paket A Bug-Fixes */ /* Sidemenu scrollbar */ .cp-sidebar, .cp-side-menu, [class*="sidebar"], aside.menu { overflow-y: auto !important; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .cp-sidebar::-webkit-scrollbar, .cp-side-menu::-webkit-scrollbar { width: 6px; } .cp-sidebar::-webkit-scrollbar-thumb, .cp-side-menu::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } .cp-sidebar::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* Filemanager mobile white-screen fix */ @media (max-width: 768px) { .cp-filemanager, [class*="filemanager"], [id*="filemanager"] { background: var(--bg) !important; color: var(--text) !important; } .fm-list, .fm-item { background: var(--elev) !important; color: var(--text) !important; } } /* Modal-Solid (globally) */ .cp-modal .cp-modal-content { background: var(--elev, #1a1d24) !important; backdrop-filter: blur(0) !important; opacity: 1 !important; } /* Less emoji noise in headers */ .cp-tab { font-weight: 500; } /* Docker: long names ellipsis */ .docker-name, .container-name, [class*="container-id"] { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; } /* Tabler-Icons in Sidebar → currentColor via filter */ .cp-nav-ico img { filter: brightness(0) invert(0.7); opacity: 0.9; } .cp-nav-item.active .cp-nav-ico img { filter: brightness(0) invert(0.72) sepia(1) saturate(5) hue-rotate(6deg); opacity: 1; } /* ═══ Tabler-Icons: Farbtinting per Filter ═══ */ /* Sidebar-Icons im Dark-Mode: hellgrau */ [data-theme="dark"] .cp-nav-ico img { filter: brightness(0) invert(0.78); opacity: 0.9; } [data-theme="dark"] .cp-nav-item.active .cp-nav-ico img, [data-theme="dark"] .cp-nav-item:hover .cp-nav-ico img { filter: brightness(0) invert(0.78) sepia(1) saturate(6) hue-rotate(3deg); opacity: 1; } /* Sidebar-Icons im Light-Mode: dunkel */ [data-theme="light"] .cp-nav-ico img { filter: brightness(0) invert(0.35); opacity: 0.9; } [data-theme="light"] .cp-nav-item.active .cp-nav-ico img, [data-theme="light"] .cp-nav-item:hover .cp-nav-ico img { filter: brightness(0) invert(0.55) sepia(1) saturate(8) hue-rotate(6deg); opacity: 1; } /* Header-Icons sind theme-INDEPENDENT — fixe Light-Filter unabhaengig vom data-theme des Documents (User-Wunsch 2026-05-05). */ .cp-header img, .cp-bell-btn img, .cp-theme-toggle img, .cp-kebab-item img, .cp-lion-btn img, .cp-lion-head img, .cp-user-btn img { filter: brightness(0) invert(0.3); } /* Customer-Portal: Lila-Accent */ body[data-portal="customer"] [data-theme="dark"] .cp-nav-item.active .cp-nav-ico img, body[data-portal="customer"] .cp-nav-item.active .cp-nav-ico img { filter: brightness(0) invert(0.45) sepia(1) saturate(15) hue-rotate(230deg); } /* ═══ Footer-Buttons (Ansicht wechseln + Zur Startseite) Icons tinten ═══ */ .cp-view-btn img, .cp-sidebar-footer-link a img { filter: brightness(0) invert(0.7) !important; opacity: 0.9; } .cp-view-btn:hover img, .cp-sidebar-footer-link a:hover img { filter: brightness(0) invert(0.85) !important; } [data-theme="light"] .cp-view-btn img, [data-theme="light"] .cp-sidebar-footer-link a img { filter: brightness(0) invert(0.4) !important; } /* ═══ Force: keine Borders zwischen Menü-Items ═══ */ .cp-nav-item, .cp-nav-cat, .cp-nav-cat-items, .cp-nav-standalone { border: none !important; box-shadow: none !important; } .cp-nav-item + .cp-nav-item { border-top: none !important; } .cp-sidebar-nav { gap: 0 !important; } /* ═══ Items: kein margin, kein gap, lückenlos ═══ */ .cp-sidebar-nav { display: block !important; gap: 0 !important; padding: 0 !important; } .cp-nav-cat-items { padding: 0 !important; margin: 0 !important; } .cp-nav-item { margin: 0 !important; } .cp-nav-item.active::before { display: none !important; } /* ═══ Logo: immer das dunkle Logo zeigen — Sidebar bleibt im PUL-Slate, Theme-Wechsel ändert nichts am Sidebar-Hintergrund. Light-Variante wird nicht eingeblendet. ═══ */ .cp-sidebar-header .cp-logo { display: block; } .cp-sidebar-header .cp-logo-dark { display: block; } .cp-sidebar-header .cp-logo-light { display: none; } [data-theme="light"] .cp-sidebar-header .cp-logo-dark { display: block; } [data-theme="light"] .cp-sidebar-header .cp-logo-light { display: none; } /* ═══ Sidebar-Scrollbar dauerhaft sichtbar ═══ */ .cp-sidebar { scrollbar-width: thin; /* Firefox */ scrollbar-color: rgba(255,255,255,0.2) transparent; /* Firefox */ overflow-y: auto !important; } .cp-sidebar::-webkit-scrollbar { width: 8px; } /* Chrome/Safari */ .cp-sidebar::-webkit-scrollbar-track { background: transparent; } .cp-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; } .cp-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.35); } [data-theme="light"] .cp-sidebar { scrollbar-color: rgba(0,0,0,0.2) transparent; } [data-theme="light"] .cp-sidebar::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); } [data-theme="light"] .cp-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.35); } /* ═══════════════════════════════════════════════════════ * FONT-SIZE-Toggle — User-Wunsch 2026-05-05: * --cp-font-scale (0.9 / 1.0 / 1.15) skaliert NUR Lesetext im Content. * Menu / Header / Footer / Tabs / Buttons / Ueberschriften bleiben fix. * ═══════════════════════════════════════════════════════ */ :root { --cp-font-scale: 1.0; } /* HTML-base bleibt fix — kein rem-Drift bei A-Toggle. */ html { font-size: 16px !important; } /* Body skaliert — Lesetext ohne eigene font-size erbt automatisch. */ body { font-size: calc(15px * var(--cp-font-scale)) !important; line-height: 1.55; } /* Lesetext-Container im Content. */ table, th, td { font-size: calc(14px * var(--cp-font-scale)) !important; } .cp-card, .cp-panel { font-size: calc(14px * var(--cp-font-scale)); } code:not(pre code), kbd { font-size: calc(13px * var(--cp-font-scale)) !important; } small, .cp-muted, .text-muted { font-size: calc(13px * var(--cp-font-scale)) !important; } /* === FIXE GROESSEN — Chrome unabhaengig vom A-Toggle === */ /* Ueberschriften */ h1, h1.cp-title, .cp-page-head h1 { font-size: 26px !important; } h2 { font-size: 22px !important; } h3 { font-size: 18px !important; } h4 { font-size: 16px !important; } /* Buttons + Form-Controls */ .cp-btn, button:not(.cp-font-toggle):not(.cp-theme-toggle), input, select, textarea, label, .cp-label { font-size: 14px !important; } .cp-btn-sm { font-size: 13px !important; } .cp-btn-lg { font-size: 16px !important; } /* Sidebar / Menu (alle Varianten) */ .cp-sidebar, .cp-sidebar *, .cp-side-menu, .cp-side-menu *, .sidebar-col, .sidebar-col *, .sb, .sb *, .sb-item, .sb-cat-head, .cp-nav-item, .cp-nav-cat-label, [class*="sidebar"] a, [class*="menu"] a { font-size: 14px !important; } /* Header */ .cp-header, .cp-header *, .cp-shell-breadcrumb, .cp-shell-breadcrumb * { font-size: 14px !important; } .cp-header h1, .cp-header .cp-title { font-size: 16px !important; } /* Footer (Global) */ .cp-global-footer, .cp-global-footer * { font-size: 13px !important; } /* Tabs (Designvorlage) */ .cp-tabs, .cp-tabs *, .tabs, .tabs * { font-size: 14px !important; } /* Page-Breadcrumb (auf iframe-Pages — im Embed versteckt, sonst fix) */ .breadcrumb, .breadcrumb *, .help-breadcrumb, .help-breadcrumb * { font-size: 14px !important; } /* Badges / Pills / Chips — Plesk-Standard 11px (sitesucker/main.css .label) */ .badge, .cp-badge, .tag, .chip, .pill, .sys-badge { font-size: 10px !important; } /* Fundgrube #363: kompakter */ /* === GLASSHINTERGRUND / BACKDROP-BLUR — System-Default fuer alle Overlays === Frosted-Glass-Effekt: dunkler Slate-Tint + 4px Blur. Steuerung ueber --cp-glass-bg und --cp-glass-blur (im :root-Block oben definiert). Gilt automatisch fuer Modal-Backdrops, Drawer-Backdrops und Sheet-Overlays. Eigene Overlays nutzen das Pattern via: .my-backdrop { position: fixed; inset: 0; z-index: 9999; background: var(--cp-glass-bg); backdrop-filter: blur(var(--cp-glass-blur)); -webkit-backdrop-filter: blur(var(--cp-glass-blur)); } */ .modal-bg, .cp-claude-backdrop, .cfg-backdrop { background: var(--cp-glass-bg) !important; backdrop-filter: blur(var(--cp-glass-blur)) !important; -webkit-backdrop-filter: blur(var(--cp-glass-blur)) !important; } /* Shell-Backdrop: wenn der iframe ein Overlay oeffnet, legen wir denselben Glass-Tint ueber die gesamte .cp-content — inkl. Padding/Rahmen rund um den iframe — damit der Effekt nahtlos vom iframe-Backdrop in den Shell ueberlaeuft. Pseudo-Element mit z-index < iframe → die iframe-Pixel selbst sind nicht ueberdeckt (Modal bleibt sichtbar), die Padding-Streifen tragen den Tint. */ body.cp-shell-overlay-open .cp-content { position: relative; } body.cp-shell-overlay-open .cp-content::before { content: ''; position: absolute; inset: 0; z-index: 0; background: var(--cp-glass-bg); backdrop-filter: blur(var(--cp-glass-blur)); -webkit-backdrop-filter: blur(var(--cp-glass-blur)); pointer-events: none; } body.cp-shell-overlay-open .frame-wrap, body.cp-shell-overlay-open #cp-frame { position: relative; z-index: 1; } /* === Header + Footer sind theme-INDEPENDENT (User-Wunsch 2026-05-05) === Die Gluehbirne flippt --text/--bg/--muted/--border im :root. Innerhalb von .cp-header und .cp-global-footer ueberschreiben wir die Vars zurueck auf ihre Light-/Slate-Werte, damit Schrift und Icons immer gleich aussehen. */ .cp-header, .cp-shell-breadcrumb { --text: #1a1d24; --text-strong: #0a0c10; --muted: #6b7280; --bg: #ffffff; --bg-soft: #f5f7fa; --bg-elevated: #ffffff; --border: #e2e6ed; --border-strong: #cbd2dc; --accent-soft: rgba(40, 170, 222, 0.12); } .cp-global-footer { --text: #ffffff; --text-strong: #ffffff; --muted: rgba(255,255,255,0.7); --bg: #384859; --bg-soft: #2d3a47; --bg-elevated: #384859; --border: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.18); } /* KB spezifisch — Lesetext skaliert, Headings + Listen-Titel fix */ .kb-list-title { font-size: 17px !important; } .kb-list-meta { font-size: 14px !important; } .kb-tree-item { font-size: 17px !important; } .kb-detail-head h1 { font-size: 26px !important; } .kb-content p, .kb-content li { font-size: calc(17px * var(--cp-font-scale)) !important; line-height: 1.7; } .kb-content h1 { font-size: 26px !important; } .kb-content h2 { font-size: 22px !important; } .kb-content h3 { font-size: 19px !important; } .kb-detail-footer { font-size: calc(15px * var(--cp-font-scale)) !important; } .kb-description { font-size: calc(17px * var(--cp-font-scale)) !important; } /* Editor-Form-Felder (Neuer Eintrag / Eintrag bearbeiten) — Standard 16px statt 14px */ .kb-form input, .kb-form select, .kb-form textarea { font-size: calc(16px * var(--cp-font-scale)) !important; } .kb-form label { font-size: calc(14px * var(--cp-font-scale)) !important; } /* cp-dropdown-Toggles im Editor-Form (Sichtbarkeit/Priorität/Status) — selbe 16px wie Input */ .kb-form .cp-dropdown-toggle, .kb-form .cp-dropdown-option { font-size: calc(16px * var(--cp-font-scale)) !important; } /* ═══════════════════════════════════════════════════════════════ * GLOBAL SCROLLBAR — applies to ALL elements (*, html, body, widgets, modals) * Theme-aware (dark + light), schlank wie die Sidebar * Maximilian Koeninger 2026 * ═══════════════════════════════════════════════════════════════ */ /* Firefox (alle Elemente inkl. html) */ * { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.2) transparent; } /* Chromium (Chrome, Brave, Edge, Safari) */ *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; transition: background 0.2s ease; } *::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.35); } *::-webkit-scrollbar-corner { background: transparent; } /* Light-Theme: invertierte Farben */ [data-theme="light"] * { scrollbar-color: rgba(0,0,0,0.2) transparent; } [data-theme="light"] *::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); } [data-theme="light"] *::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.4); } /* Special: Code-Blöcke mit dunklem Hintergrund bekommen immer helle Scrollbar */ pre::-webkit-scrollbar-thumb, code::-webkit-scrollbar-thumb, .cp-mono::-webkit-scrollbar-thumb, [style*="#0a0c10"]::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); } pre::-webkit-scrollbar-thumb:hover, code::-webkit-scrollbar-thumb:hover, .cp-mono::-webkit-scrollbar-thumb:hover, [style*="#0a0c10"]::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.5); } /* Disable: wer expliziten eigenen Style will, setzt class="cp-native-scroll" */ .cp-native-scroll, .cp-native-scroll * { scrollbar-width: auto; scrollbar-color: auto; } .cp-native-scroll::-webkit-scrollbar, .cp-native-scroll *::-webkit-scrollbar { width: initial; height: initial; } /* ═══════════════════════════════════════════════════════════════ * AURORA BACKGROUND — lebendig, sichtbar, schönes Panel-Feature * Toggle via body.cp-aurora + Intensität via cp-aurora-{soft|medium|strong} * Maximilian Koeninger 2026 * ═══════════════════════════════════════════════════════════════ */ body.cp-aurora { position: relative; overflow-x: hidden; } html:has(body.cp-aurora) { overflow-x: hidden; } body.cp-aurora::before, body.cp-aurora::after { content: ''; position: fixed; inset: -50%; pointer-events: none; z-index: 0; /* liegt über body-bg, aber unter content (content nutzt z-index:1) */ filter: blur(90px); opacity: var(--cp-aurora-intensity, 0.5); will-change: transform; } /* Body-Hintergrund semi-transparent bei Aurora aktiv */ body.cp-aurora { background: transparent !important; } /* html bleibt dunkel als Basis (verhindert hellen Flash beim Reload) */ html:has(body.cp-aurora) { background: var(--bg); } [data-theme="light"] html:has(body.cp-aurora) { background: #f5f7fa; } /* Content-Layer: z-index höher als Aurora, damit lesbar */ body.cp-aurora > *:not(script):not(style) { position: relative; z-index: 1; } /* Layer 1 — Cyan + Purple links oben/mitte */ body.cp-aurora::before { background: radial-gradient(ellipse 40% 50% at 20% 20%, rgba(94,179,240,0.95), transparent 55%), radial-gradient(ellipse 35% 45% at 75% 25%, rgba(124,92,255,0.9), transparent 55%), radial-gradient(ellipse 30% 40% at 50% 70%, rgba(0,217,126,0.65), transparent 55%); animation: cp-aurora-flow-1 14s ease-in-out infinite; } /* Layer 2 — Orange + Pink rechts unten */ body.cp-aurora::after { background: radial-gradient(ellipse 45% 55% at 80% 80%, rgba(255,140,50,0.85), transparent 55%), radial-gradient(ellipse 35% 45% at 15% 85%, rgba(255,100,180,0.85), transparent 55%), radial-gradient(ellipse 30% 40% at 60% 40%, rgba(255,184,0,0.6), transparent 55%); animation: cp-aurora-flow-2 17s ease-in-out infinite; } @keyframes cp-aurora-flow-1 { 0% { transform: translate(0, 0) rotate(0deg) scale(1); } 25% { transform: translate(4%, -3%) rotate(2deg) scale(1.08); } 50% { transform: translate(-3%, 4%) rotate(-2deg) scale(0.95); } 75% { transform: translate(3%, 2%) rotate(1deg) scale(1.05); } 100% { transform: translate(0, 0) rotate(0deg) scale(1); } } @keyframes cp-aurora-flow-2 { 0% { transform: translate(0, 0) rotate(0deg) scale(1); } 30% { transform: translate(-4%, 3%) rotate(-2deg) scale(1.1); } 60% { transform: translate(3%, -3%) rotate(2deg) scale(0.93); } 85% { transform: translate(-2%, -3%) rotate(-1deg) scale(1.03); } 100% { transform: translate(0, 0) rotate(0deg) scale(1); } } /* Intensitäts-Stufen */ body.cp-aurora.cp-aurora-soft { --cp-aurora-intensity: 0.25; } body.cp-aurora.cp-aurora-medium { --cp-aurora-intensity: 0.45; } body.cp-aurora.cp-aurora-strong { --cp-aurora-intensity: 0.7; } /* Light-Theme: dezentere opacity + multiply-Mode statt screen */ [data-theme="light"] body.cp-aurora::before, [data-theme="light"] body.cp-aurora::after { opacity: calc(var(--cp-aurora-intensity, 0.5) * 0.45); mix-blend-mode: multiply; } /* Reduced-Motion: Position fix, Animation aus */ @media (prefers-reduced-motion: reduce) { body.cp-aurora::before, body.cp-aurora::after { animation: none; } } /* ═══ KI-Button & Opt-out: Emoji-Icons die durchgerutscht sind verstecken ═══ */ /* Wenn Parent data-no-icon="1" hat, sollen inserted Icons unsichtbar sein */ [data-no-icon="1"] .cp-icon-auto, .cp-raw-emoji .cp-icon-auto { display: none !important; } /* Stattdessen: das ursprüngliche Emoji aus data-auto-converted zeigen */ [data-no-icon="1"] .cp-icon-auto::before, .cp-raw-emoji .cp-icon-auto::before { content: attr(data-auto-converted); display: inline !important; font-size: inherit; background: none !important; mask: none !important; width: auto !important; height: auto !important; color: initial; } /* ═══ GLASSMORPHISM — eigenständig, unabhängig von Aurora ═══ */ /* Aktivierbar via body.cp-glass + Intensitäts-Class (soft/medium/strong) */ body.cp-glass .cp-card, body.cp-glass .cp-widget, body.cp-glass .tv-card, body.cp-glass .tv-section, body.cp-glass .stat-card, body.cp-glass .cp-box { background: var(--cp-glass-bg, rgba(20, 23, 29, 0.7)) !important; backdrop-filter: blur(var(--cp-glass-blur, 10px)) saturate(130%); -webkit-backdrop-filter: blur(var(--cp-glass-blur, 10px)) saturate(130%); border: 1px solid rgba(255,255,255,0.08); transition: background 0.3s; } [data-theme="light"] body.cp-glass .cp-card, [data-theme="light"] body.cp-glass .cp-widget, [data-theme="light"] body.cp-glass .tv-card, [data-theme="light"] body.cp-glass .tv-section, [data-theme="light"] body.cp-glass .stat-card, [data-theme="light"] body.cp-glass .cp-box { background: var(--cp-glass-bg-light, rgba(255,255,255,0.72)) !important; border: 1px solid rgba(0,0,0,0.08); } /* Aurora liegt als ::before/::after fixed hinter allem — body behält dunklen bg */ body.cp-aurora { background: var(--bg); /* behält Dark-Mode-Hintergrund */ } body.cp-aurora .cp-main, body.cp-aurora .cp-content, body.cp-aurora main, body.cp-glass .cp-main, body.cp-glass .cp-content, body.cp-glass main { background: transparent !important; } /* html-Root bekommt auch explizit den bg, falls Browser-Default sonst greift */ html { background: var(--bg); } [data-theme="light"] html { background: #f5f7fa; } /* Sidebar bleibt opaque (soll nicht durchscheinen) */ body.cp-aurora .cp-sidebar { background: var(--bg) !important; backdrop-filter: none !important; } /* Stärker bei "strong" — mehr Transparenz */ /* Glass-Intensitäten als CSS-Variablen via Class */ body.cp-glass-soft { --cp-glass-bg: rgba(20, 23, 29, 0.85); --cp-glass-bg-light: rgba(255,255,255,0.85); --cp-glass-blur: 6px; } body.cp-glass-medium { --cp-glass-bg: rgba(20, 23, 29, 0.65); --cp-glass-bg-light: rgba(255,255,255,0.72); --cp-glass-blur: 10px; } body.cp-glass-strong { --cp-glass-bg: rgba(20, 23, 29, 0.45); --cp-glass-bg-light: rgba(255,255,255,0.55); --cp-glass-blur: 16px; } /* Garantiert dass das Emoji da ist, egal was die Icon-Engine macht */ .cp-claude-fab .ico { font-size: 26px !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; filter: grayscale(0) !important; } .cp-claude-fab .ico .cp-icon-auto, .cp-claude-fab .ico .cp-icon { display: none !important; /* Hide any auto-inserted icons */ } .cp-claude-fab .ico::after { content: '🤖'; font-size: 26px; display: inline-block; } .cp-claude-fab .ico > * + ::after { display: none; } /* Wenn Span schon Text hat, nichts zusätzlich rendern */ .cp-claude-fab .ico:not(:empty)::after { display: none; } /* ═══ KI-Button Robot-Emoji — FINAL CLEAN ═══ */ /* Lösung: Icon-Auto-Engine wird in cp-app.js geskippt für cp-claude-fab, aber falls doch mal ein Icon-Span reinrutscht, ist er unsichtbar und ::before zeigt das Emoji. */ .cp-claude-fab .ico { font-size: 26px; line-height: 1; } .cp-claude-fab .ico .cp-icon-auto, .cp-claude-fab .ico .cp-icon { /* Fake-Icon komplett weg */ display: none !important; width: 0 !important; height: 0 !important; } /* Emoji garantiert anzeigen via ::before wenn .ico leer wirkt */ .cp-claude-fab .ico::before { content: '🤖'; display: inline-block; font-size: 26px; line-height: 1; } /* ────────────────────────────────────────────────────────────────── GLOBAL FIX: btn-primary / btn-danger Hover ist EXAKT Plesk-Wert. Frueher stand hier ein Blau-Lila-Gradient (`--accent` → `--purple`) als Hover-Override — verstoesst gegen die Plesk-Klon-Mission (Gradient-Buttons sind verboten). Auf Plesk-Originalwerte gesetzt: primary hover → #259ccc (--plesk-blue-700) primary active → #2089b2 (--plesk-blue-800) danger hover → #a52337 !important bleibt, weil mehrere Pages eigene `.btn-primary`-Hover Regeln definieren die hier neutralisiert werden muessen. ────────────────────────────────────────────────────────────────── */ .btn-primary:hover, button.btn-primary:hover, .cp-btn-primary:hover, button.cp-btn-primary:hover { background: #259ccc !important; border-color: transparent !important; filter: none !important; color: #fff !important; } .btn-primary:active, button.btn-primary:active, .cp-btn-primary:active, button.cp-btn-primary:active { background: #2089b2 !important; color: #fff !important; } .btn-danger:hover, .cp-btn-danger:hover { background: #a52337 !important; border-color: transparent !important; color: #fff !important; } /* btn-success existiert in der Plesk-Klon-Mission nicht (keine Gruen- Variante). Hover-Override entfaellt — falls eine alte Page noch .btn-success rendert, gewinnen ihre eigenen Stile. */ /* ────────────────────────────────────────────────────────────────── PRE-MOUNT LAYOUT-RESERVIERUNG — verhindert das Content-Wackeln beim Seitenwechsel. Problem: HTML wird geparsed mit Page-Content direkt im . Browser paintet -> Content erscheint volle Breite ohne Sidebar. Dann läuft cp-app.js mountLayout() und wrappt Body in .cp-app > .cp-sidebar + .cp-main(.cp-header + .cp-content) → Content rutscht plötzlich um 224px nach rechts und 60px runter. Sieht aus wie ein weisser Flash auf der linken Seite. Lösung: bekommt VORM Mount per CSS exakt den selben Padding-Offset, den die Layout-Wrapper später bringen würden — plus Pseudo-Bg für Sidebar und Header. mountLayout setzt am Ende `.cp-mounted` aufs Body und der Pre-Mount-Stil fällt weg. Da alle Mount-Schritte synchron innerhalb einer Task laufen, sieht der Browser nie einen Zwischenzustand → kein Flash, kein Shift. ────────────────────────────────────────────────────────────────── */ body[data-portal]:not(.cp-mounted) { margin: 0; padding: 84px 24px 24px 248px; /* top: 60header+24content, left: 224sidebar+24content */ background: var(--bg, #ffffff); } /* Solide Pseudo-Elemente fuer Sidebar + Header VOR dem JS-Mount. - Robuster als Gradient (single solid Block, instant paint). - Decken jeden Content darunter ab — kein "altes Menue durchblitzen" auch wenn die Page kurz an der falschen Position rendert. - Verschwinden in dem Moment wo cp-app.js die `cp-mounted`-Klasse setzt. z-index 41 ist eine Stufe über der spaeter mountenden .cp-sidebar (z:40) damit die Pseudos das echte Markup waehrend des Mounts noch verdecken. */ body[data-portal]:not(.cp-mounted)::before { content: ''; position: fixed; top: 0; left: 0; bottom: 0; width: 224px; background: #384859; border-right: 1px solid rgba(255,255,255,0.10); z-index: 41; pointer-events: none; } body[data-portal]:not(.cp-mounted)::after { content: ''; position: fixed; top: 0; left: 224px; right: 0; height: 60px; background: #ffffff; border-bottom: 1px solid var(--border, #e2e6ed); box-shadow: 0 2px 4px rgba(0,0,0,0.06); z-index: 41; pointer-events: none; } @media (max-width: 900px) { body[data-portal]:not(.cp-mounted) { padding: 76px 16px 16px 16px; } body[data-portal]:not(.cp-mounted)::before { display: none; } body[data-portal]:not(.cp-mounted)::after { left: 0; } } /* Mobile/Tablet: Sidebar ist Overlay → kein Pre-Reserve nach links nötig */ @media (max-width: 900px) { body[data-portal]:not(.cp-mounted) { padding: 76px 16px 16px 16px; /* top: 60header+16, sides+bottom 16 */ background-image: linear-gradient(to bottom, var(--card, #ffffff) 60px, transparent 60px); background-size: 100% 60px; } } /* ═══════════════════════════════════════════════════════════════════ * Sprint 7 — User-Friendly Tooltips (cp-tooltips.js) * ═══════════════════════════════════════════════════════════════════ */ .cp-tip { position: absolute; z-index: 9999; pointer-events: none; opacity: 0; transform: translateY(-4px); transition: opacity 120ms ease, transform 120ms ease; max-width: 320px; font-family: 'Raleway', system-ui, sans-serif; font-size: 14px; line-height: 1.4; } .cp-tip-visible { opacity: 1; transform: translateY(0); } .cp-tip-inner { background: #384859; color: #ffffff; padding: 8px 12px; border-radius: 6px; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.18); white-space: normal; word-wrap: break-word; } .cp-tip-arrow { position: absolute; width: 8px; height: 8px; background: #384859; transform: rotate(45deg); left: var(--cp-tip-arrow-x, 50%); margin-left: -4px; } .cp-tip[data-placement="bottom"] .cp-tip-arrow { top: -3px; } .cp-tip[data-placement="top"] .cp-tip-arrow { bottom: -3px; } .cp-tip-icon { display: inline-block; width: 14px; height: 14px; line-height: 14px; font-size: 12px; text-align: center; color: var(--accent, #28aade); cursor: help; user-select: none; vertical-align: middle; opacity: 0.75; } .cp-tip-icon:hover { opacity: 1; } [data-help] { cursor: help; } [data-help-icon] { cursor: help; } @media (max-width: 600px) { .cp-tip { max-width: calc(100vw - 24px); } } /* ═══════════════════════════════════════════════════════════════════════ PLESK-KLON COMPONENT-LAYER (Sprint 7.5) Additive Plesk-Pattern auf Token-Basis. Wirkt zusammen mit existierenden .cp-btn / .cp-card / .cp-sidebar — Pages können einzeln auf Plesk-Pattern migriert werden via Plesk-Klassen (.cp-plesk-*) oder über data-Attribute. Hardcoded-Color-Replacement-Sweep über alle Pages bewusst NICHT — wird pro Sprint-Themen-Page migriert. ═══════════════════════════════════════════════════════════════════════ */ /* Inter-Font (Plesk-Schrift) via Google Fonts. Lädt asynchron; Fallback bleibt bisherige Schriftauswahl. */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"); /* Plesk-Card-Pattern */ .cp-plesk-card { background: var(--cp-card-bg); border: 1px solid var(--cp-border); border-radius: var(--cp-radius-md); padding: var(--cp-space-5); box-shadow: var(--cp-shadow-card); } /* Plesk-Button-Pattern */ .cp-plesk-btn-primary { background: var(--cp-primary); color: #FFFFFF; border: 1px solid var(--cp-primary); padding: var(--cp-space-2) var(--cp-space-4); border-radius: var(--cp-radius-sm); font-size: var(--cp-font-md); font-weight: var(--cp-weight-medium); font-family: var(--cp-font-family); cursor: pointer; transition: background var(--cp-transition-fast), border-color var(--cp-transition-fast); } .cp-plesk-btn-primary:hover { background: var(--cp-primary-hover); border-color: var(--cp-primary-hover); } .cp-plesk-btn-primary:active { background: var(--cp-primary-active); border-color: var(--cp-primary-active); } .cp-plesk-btn-secondary { background: #FFFFFF; color: var(--cp-text-muted); border: 1px solid var(--cp-border-input); padding: var(--cp-space-2) var(--cp-space-4); border-radius: var(--cp-radius-sm); font-size: var(--cp-font-md); font-weight: var(--cp-weight-medium); font-family: var(--cp-font-family); cursor: pointer; transition: border-color var(--cp-transition-fast), color var(--cp-transition-fast); } .cp-plesk-btn-secondary:hover { border-color: var(--cp-primary); color: var(--cp-primary); } /* Plesk-Input-Pattern */ .cp-plesk-input, .cp-plesk-select { height: var(--cp-input-height); padding: 0 var(--cp-input-padding-x); border: 1px solid var(--cp-border-input); border-radius: var(--cp-radius-sm); font-family: var(--cp-font-family); font-size: var(--cp-font-md); color: var(--cp-text-primary); background: #FFFFFF; box-sizing: border-box; transition: border-color var(--cp-transition-fast), box-shadow var(--cp-transition-fast); } .cp-plesk-input:focus, .cp-plesk-select:focus { outline: none; border-color: var(--cp-primary); box-shadow: var(--cp-input-focus-shadow); } /* Plesk-Table-Pattern */ .cp-plesk-table { width: 100%; border-collapse: collapse; border: 1px solid var(--cp-border); border-radius: var(--cp-radius-md); overflow: hidden; font-family: var(--cp-font-family); font-size: var(--cp-font-md); color: var(--cp-text-primary); background: var(--cp-card-bg); } .cp-plesk-table thead th { text-align: left; padding: 0 var(--cp-space-4); height: var(--cp-table-row-height); background: #F9FAFB; border-bottom: 1px solid var(--cp-border); color: var(--cp-text-secondary); font-weight: var(--cp-weight-semibold); font-size: var(--cp-font-sm); } .cp-plesk-table tbody td { padding: 0 var(--cp-space-4); height: var(--cp-table-row-height); border-top: 1px solid var(--cp-border); } .cp-plesk-table tbody tr { transition: background var(--cp-transition-fast); } .cp-plesk-table tbody tr:hover { background: var(--cp-row-hover); } .cp-plesk-table tbody tr:first-child td { border-top: 0; } /* Plesk-Sidebar-Pattern (Modifier — bestehende .cp-sidebar bleibt) */ .cp-sidebar.cp-plesk { width: var(--cp-sidebar-width); background: var(--cp-sidebar-bg); color: var(--cp-sidebar-text); font-family: var(--cp-font-family); } .cp-sidebar.cp-plesk .cp-nav-item.active, .cp-sidebar.cp-plesk [data-active="true"] { /* Maximilian-Pref 2026-05-12: keine permanente Active-Markierung — Hover zeigt den Hellblau-Look, ansonsten unveraendert. */ background: transparent; border-left: 0; } /* Plesk-Modal-Pattern (für künftige Modals; cp-wizard-modal nutzt eigene Tokens kompatibel zu Plesk-Werten) */ .cp-plesk-modal-card { background: var(--cp-card-bg); border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); box-shadow: var(--cp-shadow-modal); } /* Plesk-Density-Reset für Pages die opt-in machen (data-plesk-density="1" auf body) */ body[data-plesk-density="1"] { font-family: var(--cp-font-family); font-size: var(--cp-font-md); line-height: var(--cp-line-height-default); color: var(--cp-text-primary); background: var(--cp-content-bg); } body[data-plesk-density="1"] h1 { font-size: var(--cp-font-2xl); font-weight: var(--cp-weight-semibold); } body[data-plesk-density="1"] h2 { font-size: var(--cp-font-xl); font-weight: var(--cp-weight-semibold); } body[data-plesk-density="1"] h3 { font-size: var(--cp-font-lg); font-weight: var(--cp-weight-semibold); } /* ═══════════════════════════════════════════════════════════════════════ PLESK-KLON HEADER-POLISH (Sprint 9.6) Header-Werte 1:1 nach Plesk-Screenshots: weißer Bg, schwache Border, keine Box-Shadow, kompakte 56px-Höhe, dezente Icons, inline-Search links nach Sidebar (statt floated/centered fixed). ═══════════════════════════════════════════════════════════════════════ */ :root { --cp-header-height: 56px; --cp-header-bg: #FFFFFF; --cp-header-border: #E5E7EB; --cp-header-padding-x: 24px; --cp-header-icon-color: #6B7280; --cp-header-icon-hover-color: #1F2937; --cp-header-icon-hover-bg: #F3F4F6; --cp-header-icon-size: 18px; --cp-header-icon-btn-size: 36px; --cp-header-search-max-width: 420px; } html[data-theme="dark"], [data-theme="dark"] { --cp-header-bg: #1a1d24; --cp-header-border: #2a2f3a; --cp-header-icon-color: #cbd5e1; --cp-header-icon-hover-color: #e6e8ee; --cp-header-icon-hover-bg: #232831; } /* Header-Container — Plesk: weiß, 56px, schwache 1px Border, keine Shadow */ body[data-portal] .cp-header { height: var(--cp-header-height); background: var(--cp-header-bg); border-bottom: 1px solid var(--cp-header-border); box-shadow: none; font-family: var(--cp-font-family); padding: 0 var(--cp-header-padding-x); gap: var(--cp-space-3); } /* Such-Feld im Header — Plesk-Stil (.main-header-search). Hellgrauer Hintergrund, kein Rahmen sichtbar, 4px Radius, 32px hoch. Positionierung in cp-app.js (Such-Wrap in Grid-Spalte 2, justify-self:start). */ body[data-portal] .cp-search-pill { border-radius: 4px; border: 1px solid #f5f5f5; box-shadow: none; height: 32px; padding: 0 12px; background: #f5f5f5; width: 100%; } body[data-portal] .cp-search-pill:focus-within { background: #ffffff; border-color: #d0d4d9; box-shadow: none; } body[data-portal] .cp-search-pill input { font-family: var(--cp-font-family); font-size: var(--cp-font-md); color: var(--cp-text-primary); } body[data-portal] .cp-search-pill input::placeholder { color: var(--cp-text-secondary); opacity: 1; } body[data-portal] .cp-search-pill .cp-search-icon { opacity: 0.6; } /* Header-Actions rechts — Plesk: User-Dropdown + 4 schlanke Icon-Buttons */ body[data-portal] .cp-header-actions { gap: var(--cp-space-1); font-family: var(--cp-font-family); } /* Gemeinsame Plesk-Icon-Button-Optik für alle Header-Buttons. Wirkt auf existierende Buttons: cp-shield-btn, cp-notif-bell-v2, cp-lion-btn, cp-theme-toggle (falls vorhanden). */ body[data-portal] .cp-header-actions > button, body[data-portal] .cp-shield-btn, body[data-portal] .cp-notif-bell-v2, body[data-portal] .cp-lion-btn, body[data-portal] .cp-theme-toggle { width: var(--cp-header-icon-btn-size); height: var(--cp-header-icon-btn-size); min-width: var(--cp-header-icon-btn-size); padding: 0; background: transparent; border: 0; border-radius: var(--cp-radius-sm); color: var(--cp-header-icon-color); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: var(--cp-header-icon-size); transition: background var(--cp-transition-fast), color var(--cp-transition-fast); position: relative; } body[data-portal] .cp-header-actions > button:hover, body[data-portal] .cp-shield-btn:hover, body[data-portal] .cp-notif-bell-v2:hover, body[data-portal] .cp-lion-btn:hover, body[data-portal] .cp-theme-toggle:hover { background: var(--cp-header-icon-hover-bg); color: var(--cp-header-icon-hover-color); } /* User-Button: Plesk zeigt "Administrator ▼" als Text-Pill, kein Icon-Square */ body[data-portal] .cp-user-btn { width: auto; min-width: auto; padding: 0 var(--cp-space-3); height: var(--cp-header-icon-btn-size); background: transparent; border: 0; border-radius: var(--cp-radius-sm); color: var(--cp-text-primary); font-family: var(--cp-font-family); font-size: var(--cp-font-md); font-weight: var(--cp-weight-medium); display: inline-flex; align-items: center; gap: var(--cp-space-2); cursor: pointer; transition: background var(--cp-transition-fast); } body[data-portal] .cp-user-btn:hover { background: var(--cp-header-icon-hover-bg); } body[data-portal] .cp-user-btn .cp-user-lbl { display: none; /* Plesk zeigt nur den Username, nicht "Angemeldet als:" */ } body[data-portal] .cp-user-btn .cp-user-name-v2 { font-weight: var(--cp-weight-medium); color: var(--cp-text-primary); } body[data-portal] .cp-user-btn .cp-user-chev { color: var(--cp-text-secondary); font-size: 11px; margin-left: 2px; } /* Notification-Badge (rote Punkte) — Plesk hat winzig kleine Dots */ body[data-portal] .cp-notif-badge-v2 { position: absolute; top: 6px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--cp-danger); color: #FFFFFF; border-radius: 999px; font-size: 10px; font-weight: var(--cp-weight-semibold); font-family: var(--cp-font-family); display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--cp-header-bg); box-sizing: content-box; } /* Mobile-Toggle (Hamburger) — Plesk minimal */ body[data-portal] .cp-mobile-toggle { width: var(--cp-header-icon-btn-size); height: var(--cp-header-icon-btn-size); background: transparent; border: 0; color: var(--cp-header-icon-color); border-radius: var(--cp-radius-sm); font-size: 18px; cursor: pointer; } body[data-portal] .cp-mobile-toggle:hover { background: var(--cp-header-icon-hover-bg); color: var(--cp-header-icon-hover-color); } /* Header-Logo (Sidebar-Header-Bereich) bleibt sidebar-internes Slate. Hier kein Override — Plesk-Sidebar bleibt #1F2937 dark mit weißem Logo. */ /* ═══════════════════════════════════════════════════════════════════ * PLESK-TABLE-NORMALIZATION (Hotfix 2026-05-11) * Page-lokale Tabellen-Klassen (.sites-table, .tbl, .dsb-table) auf * Plesk-Standard angleichen: Open Sans, sharp Smoothing, kompakte Cells. * Quelle: sitesucker/main.css `.list>tbody>tr>td`. * ═══════════════════════════════════════════════════════════════════ */ table, .cp-table, .cp-list, .tbl, .sites-table, .dsb-table, table.list { font-family: var(--cp-font-family) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .sites-table th, .tbl th, .dsb-table th, table.list > thead > tr > th { font-family: var(--cp-font-family) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.429 !important; padding: 10px 12px !important; vertical-align: bottom !important; text-transform: none !important; letter-spacing: normal !important; } .sites-table td, .tbl td, .dsb-table td, table.list > tbody > tr > td { font-family: var(--cp-font-family) !important; font-size: 14px !important; line-height: 1.429 !important; padding: 10px 12px !important; } /* ═══════════════════════════════════════════════════════════════════ * PLESK-BADGE-NORMALIZATION (Hotfix 2026-05-11) * Page-lokale Badge-Klassen auf Plesk-Spec angleichen: 11px, weight 400, * line-height 1.455, padding 0 8px, border-radius 8px, uppercase 0.5px. * Quelle: sitesucker/main.css `.label`. Background-Fill, kein Stripe. * ═══════════════════════════════════════════════════════════════════ */ .badge-status, .cb-customer, .cb-admin, .app-source, .app-installed-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; padding: 0 8px !important; border-radius: 8px !important; font-family: var(--cp-font-family) !important; font-size: 11px !important; font-weight: 400 !important; line-height: 1.455 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; vertical-align: middle !important; border: 0 !important; border-left: 0 !important; } /* ════════════════════════════════════════════════════════════════════ * PLESK-DASHBOARD-WIDGET-HELPERS (Welle 2 / CC1, 2026-05-11) * * Subkomponenten-Klassen fuer die 14 Plesk-Widgets aus * docs/specs/plesk-widgets-spec.md. Werte verifiziert gegen * docs/references/plesk-source-material/sitesucker/. * ════════════════════════════════════════════════════════════════════ */ /* Footer-Bereich einer Card (separat von cp-card-footer, da Widgets ihn als .cp-widget-foot ansprechen — siehe cp-dashboard.js wrapPlesk()). */ .cp-widget-foot { padding: 10px 16px; border-top: var(--cp-card-footer-border-top, 1px solid #ececec); background: var(--cp-card-footer-bg, transparent); font-size: 13px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .cp-widget-foot .cp-card-link { display: inline-flex; align-items: center; gap: 4px; color: var(--cp-card-link-color, #16759a); text-decoration: none; font-size: 13px; cursor: pointer; } .cp-widget-foot .cp-card-link:hover { text-decoration: underline; } .cp-widget-foot .cp-card-link svg, .cp-widget-foot .cp-card-link img { width: 14px; height: 14px; opacity: 0.75; } /* Stat-Block / Update-Status (Widget #1) */ .cp-stat-large { font-size: 20px; font-weight: 600; color: #202020; line-height: 1.2; margin: 0 0 6px; font-family: "Open Sans", sans-serif; } .cp-update-status { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; line-height: 1.4; margin-bottom: 6px; } .cp-update-status--ok { color: #487f1e; } .cp-update-status--upd { color: #16759a; } .cp-update-status--upd svg { color: #28aade; } .cp-meta { font-size: 12px; color: #737373; line-height: 1.5; } /* KV-Liste (Widget #3) */ .cp-kv-list { margin: 0; display: grid; grid-template-columns: minmax(100px, 35%) 1fr; gap: 6px 12px; font-size: 13px; } .cp-kv-list dt { color: #737373; margin: 0; } .cp-kv-list dd { color: #202020; margin: 0; word-break: break-word; } /* Row-Stat (Widgets #8, #9) */ .cp-row-stat { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; font-size: 13px; line-height: 1.4; } .cp-row-stat + .cp-row-stat { border-top: 1px solid #f0f0f0; } .cp-row-label { color: #202020; } .cp-row-value { color: #202020; font-variant-numeric: tabular-nums; } /* Pill-Badge (Widget #9) */ .cp-pill { display: inline-block; background: #f0f0f0; color: #202020; border-radius: 10px; padding: 2px 10px; font-size: 12px; font-weight: 600; line-height: 1.4; } .cp-pill--warn { background: #ffeed4; color: #c84a0b; } .cp-pill--err { background: #ffdee0; color: #b30122; } .cp-pill--ok { background: #ddf5ce; color: #487f1e; } /* Badge-Varianten (Widget #4) */ .cp-badge--ok { background: #ddf5ce; color: #487f1e; } .cp-badge--info { background: #d6f3ff; color: #16759a; } .cp-badge--err { background: #ffdee0; color: #b30122; } .cp-badge--neutral { background: #f0f0f0; color: #737373; } /* zweite .cp-badge-Basis 2026-05-13 entfernt (Plesk-konforme Definition Z. ~866 gewinnt jetzt; --ok/--info/--err/--neutral-Variants oben bleiben) */ /* Empty-State (mehrere Widgets) */ .cp-empty-state { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #737373; padding: 8px 0; } .cp-empty-state--ok { flex-direction: row; align-items: flex-start; gap: 6px; color: #487f1e; } .cp-empty-state--ok .cp-check { color: #4caf50; font-weight: 700; font-size: 14px; flex-shrink: 0; } /* Performance-Booster-Row (Widget #5) */ .cp-perf-row { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; font-size: 13px; text-decoration: none; color: #202020; border-bottom: 1px solid #f0f0f0; } .cp-perf-row:last-child { border-bottom: none; } .cp-perf-row:hover .cp-perf-label { color: #16759a; } .cp-perf-label { font-weight: 500; } .cp-perf-detail { color: #737373; font-size: 12px; font-variant-numeric: tabular-nums; } .cp-led { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .cp-led-on { background: #4caf50; box-shadow: 0 0 0 2px rgba(76,175,80,0.15); } .cp-led-off { background: #b5b5b5; box-shadow: 0 0 0 2px rgba(0,0,0,0.05); } /* Sparkline (Widgets #6, #7) */ .cp-chart-wrap { display: block; text-decoration: none; color: #202020; } .cp-chart-wrap:hover .cp-sparkline path:last-child { stroke-width: 2; } .cp-sparkline { width: 100%; height: 60px; display: block; } .cp-spark-value { font-size: 20px; font-weight: 600; color: #202020; text-align: right; margin-bottom: 4px; font-variant-numeric: tabular-nums; } /* Changelog (Widget #2) */ .cp-changelog-list { list-style: none; margin: 0; padding: 0; } .cp-changelog-item { padding: 8px 0; border-bottom: 1px solid var(--border, #f0f0f0); } .cp-changelog-item:last-child { border-bottom: none; } .cp-changelog-item--hero { background: #dceefa; margin: 0 -12px 4px; padding: 10px 12px; border-radius: 3px; border-bottom: none; } html[data-theme="dark"] .cp-changelog-item--hero, [data-theme="dark"] .cp-changelog-item--hero { background: rgba(40, 170, 222, 0.12) !important; border: 1px solid rgba(40, 170, 222, 0.30) !important; } .cp-changelog-date { font-size: 11px; color: var(--muted, #737373); margin-bottom: 2px; } .cp-changelog-title { font-size: 13px; color: var(--text, #202020); display: flex; align-items: center; gap: 6px; } .cp-changelog-sub { font-size: 11px; color: var(--muted, #737373); margin-top: 2px; font-variant-numeric: tabular-nums; } /* Advisor (Widget #10) */ .cp-advisor-score { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 12px; } .cp-advisor-score-label { font-size: 13px; color: #737373; font-variant-numeric: tabular-nums; } .cp-donut { display: block; } .cp-advisor-findings { list-style: none; margin: 0; padding: 0; } .cp-advisor-findings li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; color: #202020; border-top: 1px solid #f0f0f0; } .cp-advisor-findings li:first-child { border-top: none; } .cp-sev-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } /* Overuse-Row (Widget #11) */ .cp-overuse-row { display: block; padding: 8px 0; text-decoration: none; color: #202020; border-bottom: 1px solid #f0f0f0; } .cp-overuse-row:last-child { border-bottom: none; } .cp-overuse-head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 2px; } .cp-overuse-meta { font-size: 11px; color: #737373; margin-bottom: 4px; } .cp-progress { height: 4px; background: #f0f0f0; border-radius: 2px; overflow: hidden; } .cp-progress-bar { height: 100%; background: #d66b0d; } /* My-Subscriptions (Widget #12) */ .cp-sub-list { list-style: none; margin: 0; padding: 0; } .cp-sub-list li { padding: 4px 0; font-size: 14px; border-bottom: 1px solid #f5f5f5; } .cp-sub-list li:last-child { border-bottom: none; } .cp-sub-list .cp-card-link { display: block; color: #16759a; text-decoration: none; } .cp-sub-list .cp-card-link:hover { text-decoration: underline; } /* Custom-Buttons (Widget #13) */ .cp-cb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .cp-cb-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border: 1px solid #ececec; border-radius: 3px; text-decoration: none; color: #202020; font-size: 12px; text-align: center; transition: border-color 0.12s linear; } .cp-cb-tile:hover { border-color: #28aade; } .cp-cb-icon { color: #737373; } .cp-cb-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; } /* ════════════════════════════════════════════════════════════════════════ * Dark-Mode Global-Override 2026-05-24 (Maximilian-Wunsch) * Page-CSS hat oft `.cp-content{background:#FFFFFF !important}` hartcodiert. * Wir überschreiben mit höherer Spezifität (html[data-theme="dark"] …) + * !important, damit der Dark-Modus auch ohne Page-Sweep funktioniert. * ════════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .cp-content, html[data-theme="dark"] .cp-page-container, html[data-theme="dark"] .k-table-wrap, html[data-theme="dark"] .panel, html[data-theme="dark"] .card, html[data-theme="dark"] .tpl-row { background: var(--card, #1c2330) !important; color: var(--text, #e5e7eb) !important; } html[data-theme="dark"] .k-table-wrap, html[data-theme="dark"] .tpl-row { border-color: var(--border, #2a3441) !important; } html[data-theme="dark"] .k-table thead th { background: var(--bg, #131820) !important; color: var(--text, #e5e7eb) !important; border-bottom-color: var(--border, #2a3441) !important; } html[data-theme="dark"] .k-table tbody td { color: var(--text, #e5e7eb) !important; border-bottom-color: var(--border, #2a3441) !important; } html[data-theme="dark"] .k-table tbody tr:hover { background: rgba(40, 170, 222, 0.08) !important; } /* SYSTEMWEITER FUND: Viele Seiten setzen bei Maus-/Touch-Markierung einer Tabellenzeile einen HELLEN Hintergrund (#F5F7FA, #f7f9fb, --kpx-row-hover …), ohne die Textfarbe anzupassen. Im Dunkel-Modus bleibt die Schrift hell -> heller Text auf hellem Grund = voellig unlesbar. Hier zentral fuer ALLE Tabellen den Markier-Hintergrund auf ein dezentes Dunkelblau zwingen; die Schrift bleibt hell (Dunkel-Modus-Standard) und damit lesbar. */ html[data-theme="dark"] tr:hover td, html[data-theme="dark"] tr:hover th, html[data-theme="dark"] tr:hover { background-color: rgba(40, 170, 222, 0.12) !important; } html[data-theme="dark"] body { background: var(--bg, #131820) !important; color: var(--text, #e5e7eb) !important; } html[data-theme="dark"] .k-search, html[data-theme="dark"] .k-funnel, html[data-theme="dark"] .k-input, html[data-theme="dark"] .k-select { background: var(--card, #1c2330) !important; color: var(--text, #e5e7eb) !important; border-color: var(--border, #2a3441) !important; } /* Dark-Mode: hartcodierte page-CSS Backgrounds (#fff, white) auf Card-BG zwingen */ html[data-theme="dark"] [style*="background:#fff"], html[data-theme="dark"] [style*="background: #fff"], html[data-theme="dark"] [style*="background:#FFFFFF"], html[data-theme="dark"] [style*="background: #FFFFFF"], html[data-theme="dark"] [style*="background:white"] { background-color: #1a1d24 !important; color: #e6e8ee !important; } /* Hartcodierte schwarze Schrift (#000/#222/#333) auf hell zwingen */ html[data-theme="dark"] [style*="color:#000"], html[data-theme="dark"] [style*="color: #000"], html[data-theme="dark"] [style*="color:#111"], html[data-theme="dark"] [style*="color:#222"], html[data-theme="dark"] [style*="color: #222"], html[data-theme="dark"] [style*="color:#333"] { color: #e6e8ee !important; } /* Tabellen/Listen-Header dark — alle gängigen Klassen */ html[data-theme="dark"] .k-table thead, html[data-theme="dark"] .k-table thead tr, html[data-theme="dark"] .k-table thead th, html[data-theme="dark"] table.cp-table thead, html[data-theme="dark"] table.cp-table thead th, html[data-theme="dark"] .tpl-list-head, html[data-theme="dark"] thead.cp-list-head { background: #232831 !important; color: #e6e8ee !important; border-bottom-color: #2a2f3a !important; } /* ────────────────────────────────────────────────────────────────── * Hosting-Services-Tabellen Force-Inherit (Maximilian-Pflicht): * tbody-Zellen + Sub-Elemente (a, span, b) erben font-family/-size * vom .k-table → identisch über alle 6 Pages (kunden/ssl/pakete/ * abonnements/admin-resellers/extensions). Ausnahmen: .dot/.cp-icon/ * .cp-badge/.badge (eigene Größe per Design). * ────────────────────────────────────────────────────────────────── */ .k-table tbody td, .k-table tbody td a, .k-table tbody td span:not(.dot):not(.cp-icon):not(.cp-badge):not(.badge), .k-table tbody td b, .k-table tbody td strong { font-family: inherit !important; font-size: 14px !important; font-weight: 400; line-height: 1.429; } .k-table tbody td b, .k-table tbody td strong { font-weight: 600 !important; } .k-table tbody td a { color: var(--kpx-accent, var(--accent, #28aade)); text-decoration: none; } .k-table tbody td a:hover { text-decoration: underline; } /* ────────────────────────────────────────────────────────────────── * Bulk/Liste-Checkboxen — global Plesk-Style (war nur in kunden.html) * Maximilian-Pflicht: alle 6 Hosting-Services-Pages müssen IDENTISCH * weiße Box mit Plesk-Blau-Tick haben, NICHT die native Browser- * Checkbox (zu dunkel, sieht „schwarz" aus). * ────────────────────────────────────────────────────────────────── */ .k-table input[type="checkbox"], .k-cb { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; border: 1px solid var(--kpx-border, #d4d4d4); border-radius: 2px; background: var(--card, #fff); cursor: pointer; vertical-align: middle; position: relative; margin: 0; } .k-table input[type="checkbox"]:checked, .k-cb:checked { background: var(--kpx-accent, var(--accent, #28aade)); border-color: var(--kpx-accent, var(--accent, #28aade)); } .k-table input[type="checkbox"]:checked::after, .k-cb:checked::after { content: ''; position: absolute; left: 3px; top: 0; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .k-table input[type="checkbox"]:hover, .k-cb:hover { border-color: var(--kpx-accent, var(--accent, #28aade)); } /* Hosting-Services-Tabellen Force-Inherit STÄRKER (auch page-spezifische col-Klassen) */ .k-table tbody td.col-num, .k-table tbody td.col-check, .k-table tbody td.col-actions, .k-table tbody td.col-sel, .k-table tbody td.cb, .k-table tbody td.act, .k-table tbody td.ico, .k-table tbody td.k-desc, .k-table tbody td.k-anbieter, .k-table tbody td.price, .k-table tbody td.fp, .k-table tbody td.mono, .k-table tbody td.empty { font-family: inherit !important; font-size: 14px !important; line-height: 1.429 !important; padding: 10px 12px !important; vertical-align: middle !important; } .k-table tbody td.empty, .k-table tbody .k-empty { text-align: center !important; padding: 36px 12px !important; } /* Date-Cells (admin-resellers font-mono) wieder Standard */ .k-table tbody td.mono { font-family: inherit !important; } /* ════════════════════════════════════════════════════════════════════════ * color-scheme — verhindert Chrome Android/Samsung Browser Force-Dark * der unsere Light-Pages auf Mobile automatisch invertiert. * Pflicht 2026-05-24 (Bug: Widgets schwarz auch bei data-theme="light"). * ════════════════════════════════════════════════════════════════════════ */ html[data-theme="light"] { color-scheme: light only; } html[data-theme="dark"] { color-scheme: dark; } /* ════════════════════════════════════════════════════════════════════════ * Hosting-Services-Tabellen Mobile-Override (Maximilian-Pflicht 2026-05-24): * Alle Pages mit .k-table hatten min-width:780px → Horizontal-Scroll auf * Mobile. admin-hosting versteckt die Tabelle dort und zeigt Cards, andere * Pages haben keinen Card-Modus. Quick-Fix: min-width:0 auf Mobile, * tbody-Zellen werden umgebrochen / Spalten ggf. ausgeblendet via .hide-mobile. * ════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Höhere Spezifität (html body .k-table = 0,1,3) als Page-Goldstandard (.k-table thead th = 0,1,2) damit Mobile-Override echte Wirkung hat. Plus html,body overflow-x:hidden gegen page-overflow. */ html, body { overflow-x: hidden !important; max-width: 100vw !important; } html body .k-table-wrap { max-width: 100% !important; overflow-x: hidden !important; } html body .k-table { min-width: 0 !important; width: 100% !important; max-width: 100% !important; font-size: 13px !important; table-layout: fixed !important; /* Spalten passen sich an Container-Breite an */ box-sizing: border-box !important; border-collapse: collapse !important; } html body .k-table thead th, html body .k-table tbody td { padding: 8px 6px !important; white-space: normal !important; word-break: break-word !important; overflow-wrap: anywhere !important; font-size: 13px !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box !important; } html body .k-table tbody td a { word-break: break-word !important; } /* Action-Spalten + .hide-mobile auf Mobile ausblenden (Drawer öffnet Aktionen) */ html body .k-table .hide-mobile, html body .k-table th.act, html body .k-table td.act, html body .k-table th.col-actions, html body .k-table td.col-actions { display: none !important; } /* Toolbar responsive */ html body .k-toolbar, html body .toolbar { flex-direction: column !important; align-items: stretch !important; } html body .k-toolbar .k-input, html body .k-toolbar .k-select, html body .k-toolbar .pk-search-wrap { width: 100% !important; min-width: 0 !important; } } /* === Dark-Mode k-tab Schrift heller (2026-05-24 User-Wunsch) === Viele Pages haben page-lokal .k-tab { color: #737373 !important } — im Dark zu dunkel. System-weit ueberschreiben: inaktive Tabs hellgrau, active Plesk-Akzent (#28aade). */ html[data-theme="dark"] .k-tab, [data-theme="dark"] .k-tab, html[data-theme="dark"] .tabs .tab, [data-theme="dark"] .tabs .tab { color: #c0c9d8 !important; } html[data-theme="dark"] .k-tab:hover, [data-theme="dark"] .k-tab:hover, html[data-theme="dark"] .tabs .tab:hover, [data-theme="dark"] .tabs .tab:hover { color: #ffffff !important; } html[data-theme="dark"] .k-tab.is-active, [data-theme="dark"] .k-tab.is-active, html[data-theme="dark"] .tabs .tab.active, [data-theme="dark"] .tabs .tab.active { color: #4dccff !important; border-bottom-color: #4dccff !important; } /* === Mobile-Search-Toggle (2026-05-24) === Mobile: Such-Bar standardmaessig versteckt. Lupen-Icon-Button neben Hamburger. Tap auf Lupe → body.cp-search-expanded → Such-Bar zeigt sich als Overlay/Strip. */ .cp-mobile-search-toggle { display: none; } @media (max-width: 900px) { .cp-mobile-search-toggle { display: inline-flex !important; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: transparent; border: 0; border-radius: 8px; cursor: pointer; color: inherit; -webkit-tap-highlight-color: transparent; } .cp-mobile-search-toggle img { filter: brightness(0) saturate(100%) invert(38%); } html[data-theme="dark"] .cp-mobile-search-toggle img { filter: brightness(0) saturate(100%) invert(82%); } /* Such-Wrap auf Mobile standardmaessig versteckt */ .cp-header .cp-search-wrap { display: none !important; } /* Tap auf Lupe → Such-Wrap als Full-Width-Strip unter dem Header */ body.cp-search-expanded .cp-header .cp-search-wrap { display: block !important; position: fixed; top: var(--cp-header-height, 56px); left: 0; right: 0; padding: 8px 12px; background: var(--cp-header-bg, #fff); border-bottom: 1px solid var(--border, #e5e7eb); z-index: 30; } body.cp-search-expanded .cp-header .cp-search-pill { width: 100% !important; } } /* Mobile-Search-Expanded: Pill dunkel + Panel im Strip-Bereich anzeigen */ @media (max-width: 900px) { body.cp-search-expanded .cp-header .cp-search-pill { background: var(--bg-soft, #f5f5f5) !important; border-color: var(--border, #f5f5f5) !important; } html[data-theme="dark"] body.cp-search-expanded .cp-header .cp-search-pill, [data-theme="dark"] body.cp-search-expanded .cp-header .cp-search-pill { background: #12151c !important; border-color: #2a2f3a !important; } html[data-theme="dark"] body.cp-search-expanded .cp-header .cp-search-pill input, [data-theme="dark"] body.cp-search-expanded .cp-header .cp-search-pill input { color: #e2e8f0 !important; } /* Such-Panel: schwebt jetzt absolut zum (fixed) cp-search-wrap → fixed unter dem Strip */ body.cp-search-expanded .cp-header .cp-search-panel { position: fixed !important; top: calc(var(--cp-header-height, 56px) + 52px) !important; left: 8px !important; right: 8px !important; width: auto !important; max-height: 70vh !important; overflow-y: auto !important; z-index: 31 !important; } /* Such-Results forcen sichtbar wenn Input nicht leer (cpSearchResults wird via JS open class gesetzt) */ body.cp-search-expanded .cp-header .cp-search-results.open { display: block !important; } }