/** * Optional color palettes (4 + default Keystone). * Add class on : theme-keystone theme-palette-emerald (etc.) */ .theme-keystone.theme-palette-emerald { --primary: #059669; --primary-dark: #047857; --primary-light: #10b981; --secondary: #0d9488; --accent: #34d399; --accent-dark: #22c55e; --dark: #022c22; --darker: #011f18; --dark-blue: #064e3b; --card-bg: rgba(6, 78, 59, 0.55); --sidebar-bg: rgba(2, 44, 34, 0.98); --gradient: linear-gradient(135deg, #059669 0%, #0d9488 100%); --gradient-accent: linear-gradient(135deg, #34d399 0%, #059669 100%); --glow: 0 0 25px rgba(5, 150, 105, 0.35); --ks-bg: #022c22; --ks-surface: #14532d; --ks-line: rgba(52, 211, 153, 0.35); --ks-muted: #a7f3d0; --text-dark: #ecfdf5; --text-muted: #a7f3d0; --text-light: #f0fdf4; --ks-chart-text: #ecfdf5; --ks-chart-text-muted: #bbf7d0; --ks-chart-grid: rgba(167, 243, 208, 0.2); --ks-chart-border: rgba(52, 211, 153, 0.45); --ks-chart-fill-primary: rgba(5, 150, 105, 0.25); --ks-chart-fill-accent: rgba(52, 211, 153, 0.18); } .theme-keystone.theme-palette-slate { --primary: #64748b; --primary-dark: #475569; --primary-light: #94a3b8; --secondary: #6366f1; --accent: #818cf8; --accent-dark: #6366f1; --dark: #0f172a; --darker: #020617; --dark-blue: #1e293b; --card-bg: rgba(30, 41, 59, 0.92); --sidebar-bg: rgba(15, 23, 42, 0.99); --gradient: linear-gradient(135deg, #475569 0%, #6366f1 100%); --gradient-accent: linear-gradient(135deg, #94a3b8 0%, #64748b 100%); --glow: 0 0 25px rgba(99, 102, 241, 0.2); --ks-bg: #0f172a; --ks-surface: #1e293b; --ks-line: rgba(148, 163, 184, 0.4); --ks-muted: #cbd5e1; --text-dark: #f1f5f9; --text-muted: #cbd5e1; --text-light: #f8fafc; --ks-chart-text: #f1f5f9; --ks-chart-text-muted: #cbd5e1; --ks-chart-grid: rgba(148, 163, 184, 0.22); --ks-chart-border: rgba(148, 163, 184, 0.4); --ks-chart-fill-primary: rgba(99, 102, 241, 0.2); --ks-chart-fill-accent: rgba(129, 140, 248, 0.15); } .theme-keystone.theme-palette-amber { --primary: #d97706; --primary-dark: #b45309; --primary-light: #f59e0b; --secondary: #ea580c; --accent: #fbbf24; --accent-dark: #f59e0b; --dark: #1c1917; --darker: #0c0a09; --dark-blue: #292524; --card-bg: rgba(41, 37, 36, 0.95); --sidebar-bg: rgba(28, 25, 23, 0.98); --gradient: linear-gradient(135deg, #d97706 0%, #ea580c 100%); --gradient-accent: linear-gradient(135deg, #fbbf24 0%, #d97706 100%); --glow: 0 0 25px rgba(217, 119, 6, 0.3); --ks-bg: #1c1917; --ks-surface: #292524; --ks-line: rgba(251, 191, 36, 0.25); --ks-muted: #d6d3d1; --text-dark: #fafaf9; --text-muted: #e7e5e4; --text-light: #fafaf9; --ks-chart-text: #fafaf9; --ks-chart-text-muted: #d6d3d1; --ks-chart-grid: rgba(251, 191, 36, 0.18); --ks-chart-border: rgba(251, 191, 36, 0.35); --ks-chart-fill-primary: rgba(217, 119, 6, 0.22); --ks-chart-fill-accent: rgba(251, 191, 36, 0.14); } .theme-keystone.theme-palette-steel { --primary: #2563eb; --primary-dark: #1d4ed8; --primary-light: #3b82f6; --secondary: #0ea5e9; --accent: #38bdf8; --accent-dark: #0ea5e9; --dark: #0c1929; --darker: #071018; --dark-blue: #172554; --card-bg: rgba(23, 37, 84, 0.45); --sidebar-bg: rgba(12, 25, 41, 0.98); --gradient: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%); --gradient-accent: linear-gradient(135deg, #38bdf8 0%, #1d4ed8 100%); --glow: 0 0 28px rgba(37, 99, 235, 0.35); --ks-bg: #0c1929; --ks-surface: #172554; --ks-line: rgba(56, 189, 248, 0.3); --ks-muted: #93c5fd; --text-dark: #f0f9ff; --text-muted: #bae6fd; --text-light: #f8fafc; --ks-chart-text: #f0f9ff; --ks-chart-text-muted: #bae6fd; --ks-chart-grid: rgba(56, 189, 248, 0.2); --ks-chart-border: rgba(56, 189, 248, 0.38); --ks-chart-fill-primary: rgba(37, 99, 235, 0.22); --ks-chart-fill-accent: rgba(14, 165, 233, 0.16); } .theme-keystone.theme-palette-light { --primary: #2563eb; --primary-dark: #1d4ed8; --primary-light: #3b82f6; --secondary: #7c3aed; --accent: #0ea5e9; --accent-dark: #0284c7; --warning: #d97706; --danger: #dc2626; --success: #16a34a; --info: #0284c7; --dark: #f8fafc; --darker: #eef2ff; --dark-blue: #e2e8f0; --light: #0f172a; --card-bg: rgba(255, 255, 255, 0.96); --sidebar-bg: rgba(248, 250, 252, 0.98); --glow: 0 0 20px rgba(37, 99, 235, 0.12); --gradient: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%); --gradient-accent: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%); --shadow: 0 6px 14px rgba(15, 23, 42, 0.08); --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06); --shadow-lg: 0 15px 32px rgba(15, 23, 42, 0.12); --border: rgba(148, 163, 184, 0.65); --border-light: 1px solid rgba(148, 163, 184, 0.35); --text-dark: #0f172a; --text-muted: #475569; --text-light: #0f172a; --ks-bg: #f8fafc; --ks-surface: #ffffff; --ks-line: rgba(148, 163, 184, 0.35); --ks-muted: #475569; --ks-chart-text: #0f172a; --ks-chart-text-muted: #475569; --ks-chart-grid: rgba(15, 23, 42, 0.12); --ks-chart-border: rgba(148, 163, 184, 0.55); --ks-chart-fill-primary: rgba(37, 99, 235, 0.12); --ks-chart-fill-accent: rgba(14, 165, 233, 0.1); } /* Dashboard link + language/theme (see ks_render_module_chrome in includes/i18n_theme.php) */ .ks-module-chrome { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; background: #f3eee4; border-bottom: 1px solid rgba(133, 119, 96, 0.3); position: relative; z-index: 50; } .ks-module-chrome__dashboard { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; color: #2e2a25; text-decoration: none; font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; font-weight: 600; border-radius: 0 7px 7px 0; transition: background 0.15s ease, color 0.15s ease; } .ks-module-chrome__dashboard:hover { background: rgba(138, 106, 59, 0.16); color: #2e2a25; } .ks-module-chrome__right { flex: 1 1 200px; display: flex; justify-content: flex-end; min-width: 0; } .ks-module-chrome__right .ks-module-langbar { border-bottom: none; flex: 0 0 auto; } /* Compact language + theme bar (module pages; see ks_render_lang_theme_bar in includes/i18n_theme.php) */ .ks-module-langbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 7px 12px; font-size: 11px; background: #f7f4ee; border-bottom: 1px solid rgba(133, 119, 96, 0.26); position: relative; z-index: 50; } .ks-module-langbar__label { color: #6b645b; margin-right: 2px; } .ks-module-langbar__sep { width: 1px; height: 16px; background: rgba(133, 119, 96, 0.3); margin: 0 4px; } .ks-module-langbar__dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; flex-shrink: 0; } .ks-module-langbar__dot--active { border-color: #fff !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); } .ks-module-langbar__btn { padding: 4px 9px; border-radius: 7px; border: 1px solid rgba(133, 119, 96, 0.36); background: #fffaf1; color: #2e2a25; cursor: pointer; font-weight: 600; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; } .ks-module-langbar__btn:hover { background: rgba(138, 106, 59, 0.12); } .ks-module-langbar__btn--active { background: rgba(31, 42, 68, 0.9); border-color: rgba(31, 42, 68, 0.9); color: #fdfaf4; } /* Movable PWA install popup */ .ks-open-app-popup { position: fixed; right: 12px; bottom: 16px; z-index: 1200; display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; background: linear-gradient(180deg, #f4f6f8 0%, #e6eaef 100%); border: 1px solid rgba(107, 114, 128, 0.28); box-shadow: 0 4px 12px rgba(44, 39, 31, 0.12); color: #1f2937; } .ks-open-app-popup.is-dragging { cursor: grabbing; user-select: none; } .ks-open-app-popup__drag, .ks-open-app-popup__close { width: 28px; height: 28px; border: 1px solid rgba(107, 114, 128, 0.28); border-radius: 8px; background: rgba(255, 255, 255, 0.7); color: #334155; display: inline-flex; align-items: center; justify-content: center; cursor: grab; } .ks-open-app-popup__close { cursor: pointer; font-size: 18px; line-height: 1; } .ks-open-app-popup__action { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #1f2937; font-weight: 700; letter-spacing: 0.01em; padding: 4px 8px; border-radius: 10px; border: none; background: transparent; cursor: pointer; font: inherit; text-align: left; } .ks-open-app-popup__action:hover { background: rgba(255, 255, 255, 0.55); } .ks-open-app-popup__icon { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #d6dae0 0%, #aeb6c2 100%); overflow: hidden; } .ks-open-app-popup__icon img { width: 100%; height: 100%; object-fit: cover; display: block; } .ks-open-app-popup__icon-glyph { font-size: 14px; background: linear-gradient(135deg, #eef2f7 0%, #b2bcc8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); } .ks-open-app-popup__text { font-size: 14px; line-height: 1; } @media (max-width: 640px) { .ks-open-app-popup { right: 8px; bottom: 10px; padding: 6px; gap: 8px; } .ks-open-app-popup__text { font-size: 14px; } } .theme-keystone.theme-palette-light body { background: var(--dark); color: var(--text-dark); } .theme-keystone.theme-palette-light .ks-module-chrome, .theme-keystone.theme-palette-light .ks-module-langbar { background: rgba(248, 250, 252, 0.98); border-bottom: 1px solid rgba(148, 163, 184, 0.35); } .theme-keystone.theme-palette-light .ks-module-chrome__dashboard { color: #1e293b; } .theme-keystone.theme-palette-light .ks-module-chrome__dashboard:hover { background: rgba(37, 99, 235, 0.12); color: #0f172a; } .theme-keystone.theme-palette-light .ks-module-langbar__label { color: #475569; } .theme-keystone.theme-palette-light .ks-module-langbar__sep { background: rgba(100, 116, 139, 0.35); } .theme-keystone.theme-palette-light .ks-module-langbar__btn { border: 1px solid rgba(148, 163, 184, 0.55); background: rgba(148, 163, 184, 0.15); color: #1e293b; } .theme-keystone.theme-palette-light .ks-module-langbar__btn:hover { background: rgba(37, 99, 235, 0.12); } .theme-keystone.theme-palette-light .ks-module-langbar__dot--active { border-color: #0f172a !important; box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.8); } @media print { .ks-module-chrome, .ks-module-langbar, .ks-open-app-popup { display: none !important; } }