/* ============================================================= SEOlyze — Global CI Design Tokens v=20260422o Definiert alle --ci-* Custom Properties für das gesamte CI-Layout-System (Sidebar, Topbar, Area-Akzente). Wird von ci_layout.css, finalDocument.css, geoAnalysis.css, gscHub.css, outline.css, rankTracker.css etc. benötigt. ============================================================= */ /* ── Chrome / Layout ──────────────────────────────────────────── */ :root { --ci-sb-w: 260px; --ci-nav-h: 52px; --ci-help-w: 340px; --ci-radius-sm: 10px; --ci-radius: 14px; /* Sidebar (dark) */ --ci-sb-bg: #0f1419; --ci-sb-bg-2: #1a2230; --ci-sb-border: rgba(255,255,255,0.07); --ci-sb-fg: rgba(255,255,255,0.60); --ci-sb-fg-heading: rgba(255,255,255,0.28); --ci-sb-hover: rgba(255,255,255,0.07); /* Content area */ --ci-app-bg: #f5f6f8; --ci-card: #ffffff; --ci-border: #e8eaed; --ci-t1: #0f172a; --ci-t2: #334155; --ci-t3: #64748b; /* Accent: Default = AI Creation (violet) */ --ci-accent: #8f5fc4; --ci-accent-hover: #7a4fb0; --ci-accent-strong: #6b3fa0; --ci-accent-soft: rgba(143,95,196,0.12); --ci-accent-shadow: rgba(143,95,196,0.25); --ci-accent-gradient: linear-gradient(135deg, #8f5fc4 0%, #7a4fb0 100%); /* Tabellen-Kopf: helles Akzent-Tint (dunkler Text) — per Area überschrieben */ --ci-table-head-bg: #e8d9f4; /* violet-100 */ --ci-table-head-fg: #4a2c68; /* violet-800 */ } /* ── Intern CI Layout ─────────────────────────────────────────── */ /* Outer wrapper: sidebar + main side-by-side */ .intern-ci-wrapper { display: flex; min-height: 100vh; } /* Main content wrapper (flex sibling of .fd-ci-sidebar) */ .intern-ci-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; background: var(--ci-app-bg); min-height: 100vh; } /* Topbar */ .intern-ci-topbar { height: var(--ci-nav-h); min-height: var(--ci-nav-h); background: var(--ci-card); border-bottom: 1px solid var(--ci-border); display: flex; align-items: center; padding: 0 24px; gap: 12px; position: sticky; top: 0; z-index: 100; } /* Content area */ .intern-ci-content { flex: 1; padding: 24px 28px 48px; overflow: visible; } /* ── Area Overrides ───────────────────────────────────────────── */ /* WICHTIG: Selektoren nutzen [data-area] (auf gesetzt, synchron vor DOMContentLoaded) STATT body.area-* (die erst nach DOMContentLoaded gesetzt werden → kein Farb-Flash mehr). */ /* AI Creation — Violett */ [data-area="ai"], body.area-ai { --ci-accent: #8f5fc4; --ci-accent-hover: #7a4fb0; --ci-accent-strong: #6b3fa0; --ci-accent-soft: rgba(143,95,196,0.12); --ci-accent-shadow: rgba(143,95,196,0.25); --ci-accent-gradient: linear-gradient(135deg, #8f5fc4 0%, #7a4fb0 100%); --ci-table-head-bg: #e8d9f4; /* violet-100 */ --ci-table-head-fg: #4a2c68; /* violet-800 */ } /* Analyse / OnPage — Orange */ [data-area="analyse"], body.area-analyse { --ci-accent: #ff8f00; --ci-accent-hover: #e07d00; --ci-accent-strong: #c06b00; --ci-accent-soft: rgba(255,143,0,0.12); --ci-accent-shadow: rgba(255,143,0,0.25); --ci-accent-gradient: linear-gradient(135deg, #ff8f00 0%, #e07d00 100%); --ci-table-head-bg: #ffe4bf; /* orange-100 */ --ci-table-head-fg: #8f4c00; /* orange-800 */ } /* Rank Tracker — Grün */ [data-area="rank"], body.area-rank { --ci-accent: #97bf0d; --ci-accent-hover: #7ba00a; --ci-accent-strong: #5e7f07; --ci-accent-soft: rgba(151,191,13,0.12); --ci-accent-shadow: rgba(151,191,13,0.25); --ci-accent-gradient: linear-gradient(135deg, #97bf0d 0%, #7ba00a 100%); --ci-table-head-bg: #e6f3c9; /* green-100 */ --ci-table-head-fg: #4a6206; /* green-800 */ } /* Future / Autopilot — Blau */ [data-area="future"], body.area-future { --ci-accent: #1a70a1; --ci-accent-hover: #155e8a; --ci-accent-strong: #0f4d73; --ci-accent-soft: rgba(26,112,161,0.12); --ci-accent-shadow: rgba(26,112,161,0.25); --ci-accent-gradient: linear-gradient(135deg, #1a70a1 0%, #155e8a 100%); } /* ── Sidebar "Refined" Style – Analyse Area ───────────────────── */ /* data-area ist synchron verfügbar → kein Farb-Flash. Flatter look: Gradient links→rechts, 2px Left-Stroke. Scoped zu area-analyse — nach Abnahme auf andere Areas. */ /* Active item: gradient fill + left stroke */ [data-area="analyse"] .fd-sb-item.active, body.area-analyse .fd-sb-item.active { background: linear-gradient( 90deg, rgba(255,143,0, 0.28) 0%, rgba(255,143,0, 0.12) 55%, transparent 100% ); color: #fff; font-weight: 600; box-shadow: inset 2px 0 0 var(--ci-accent), inset 0 0 0 1px rgba(255,143,0, 0.18); } /* Active icon: subtle orange tint */ [data-area="analyse"] .fd-sb-item.active .fd-sb-icon, body.area-analyse .fd-sb-item.active .fd-sb-icon { background: rgba(255,143,0, 0.20); } /* Hover */ [data-area="analyse"] .fd-sb-item:hover, body.area-analyse .fd-sb-item:hover { background: rgba(255,255,255, 0.06); color: #fff; } /* Sub-menu: active item uses orange (not default violet) */ [data-area="analyse"] .intern-sb-subitem.active, body.area-analyse .intern-sb-subitem.active { color: #fff; background: rgba(255,143,0, 0.22); } /* ── Sidebar Icons – SVG (Lucide-Style, stroke="currentColor") ── */ /* SVGs erben die Textfarbe (white/muted) automatisch. Icon-Box: kein farbiger Hintergrund, nur zentriert. */ [data-area="analyse"] .fd-sb-icon, body.area-analyse .fd-sb-icon { background: transparent; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: inherit; opacity: .75; } [data-area="analyse"] .fd-sb-item:hover .fd-sb-icon, body.area-analyse .fd-sb-item:hover .fd-sb-icon { opacity: 1; } [data-area="analyse"] .fd-sb-item.active .fd-sb-icon, body.area-analyse .fd-sb-item.active .fd-sb-icon { background: transparent !important; opacity: 1; color: var(--ci-accent); } /* ── Sidebar "Refined" Style – Rank Tracker Area (Grün) ──────────── */ [data-area="rank"] .fd-sb-item.active, body.area-rank .fd-sb-item.active { background: linear-gradient( 90deg, rgba(151,191,13, 0.28) 0%, rgba(151,191,13, 0.12) 55%, transparent 100% ); color: #fff; font-weight: 600; box-shadow: inset 2px 0 0 var(--ci-accent), inset 0 0 0 1px rgba(151,191,13, 0.18); } [data-area="rank"] .fd-sb-item.active .fd-sb-icon, body.area-rank .fd-sb-item.active .fd-sb-icon { background: rgba(151,191,13, 0.20); } [data-area="rank"] .fd-sb-item:hover, body.area-rank .fd-sb-item:hover { background: rgba(255,255,255, 0.06); color: #fff; } [data-area="rank"] .intern-sb-subitem.active, body.area-rank .intern-sb-subitem.active { color: #fff; background: rgba(151,191,13, 0.22); } [data-area="rank"] .fd-sb-icon, body.area-rank .fd-sb-icon { background: transparent; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: inherit; opacity: .75; } [data-area="rank"] .fd-sb-item:hover .fd-sb-icon, body.area-rank .fd-sb-item:hover .fd-sb-icon { opacity: 1; } [data-area="rank"] .fd-sb-item.active .fd-sb-icon, body.area-rank .fd-sb-item.active .fd-sb-icon { background: transparent !important; opacity: 1; color: var(--ci-accent); } /* ── Sidebar "Refined" Style – AI Creation Area (Violett) ────────── */ [data-area="ai"] .fd-sb-item.active, body.area-ai .fd-sb-item.active { background: linear-gradient( 90deg, rgba(143,95,196, 0.28) 0%, rgba(143,95,196, 0.12) 55%, transparent 100% ); color: #fff; font-weight: 600; box-shadow: inset 2px 0 0 var(--ci-accent), inset 0 0 0 1px rgba(143,95,196, 0.18); } [data-area="ai"] .fd-sb-item.active .fd-sb-icon, body.area-ai .fd-sb-item.active .fd-sb-icon { background: rgba(143,95,196, 0.20); } [data-area="ai"] .fd-sb-item:hover, body.area-ai .fd-sb-item:hover { background: rgba(255,255,255, 0.06); color: #fff; } [data-area="ai"] .intern-sb-subitem.active, body.area-ai .intern-sb-subitem.active { color: #fff; background: rgba(143,95,196, 0.22); } [data-area="ai"] .fd-sb-icon, body.area-ai .fd-sb-icon { background: transparent; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: inherit; opacity: .75; } [data-area="ai"] .fd-sb-item:hover .fd-sb-icon, body.area-ai .fd-sb-item:hover .fd-sb-icon { opacity: 1; } [data-area="ai"] .fd-sb-item.active .fd-sb-icon, body.area-ai .fd-sb-item.active .fd-sb-icon { background: transparent !important; opacity: 1; color: var(--ci-accent); } /* Sub-Menu SVG Icons */ .intern-sb-subitem svg { display: inline-block; vertical-align: middle; flex-shrink: 0; opacity: .65; margin-right: 5px; position: relative; top: -1px; } .intern-sb-subitem:hover svg, .intern-sb-subitem.active svg { opacity: 1; }