/* ===================================================== KODI APPS THEME - THEMES.CSS Complete theme system sourced from Print OS v4. 4 themes + 11 colorways + glow token system. Switch via data-theme and data-colorway on . ===================================================== */ /* ============= SHARED SIZING (all themes) ============= */ :root { --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; --font-size-display-4: 2.75rem; --font-size-display-3: 3.5rem; --font-size-display-2: 4.5rem; --font-size-display-1: 6rem; --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px; --blur-sm: 4px; --blur-md: 8px; --blur-lg: 16px; /* --- Z-Index Scale (overlay stacking order) --- */ --z-dropdown: 1000; --z-sticky: 1020; --z-popover: 1030; --z-tooltip: 1040; --z-toast: 1050; --z-modal-backdrop: 1060; --z-modal: 1070; --z-lightbox: 1080; /* --- Animation Timing --- */ --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); } /* ============================================================= BLACK GLASS THEME (Default) — Dark frosted glass + Purple glow Merged from Print OS v4 dark + glass-pro themes. Colorways: ENABLED (only theme that supports colorway switching) ============================================================= */ :root, [data-theme="black-glass"] { color-scheme: dark; /* --- Glow Tokens --- */ --glow-purple: #8a53f9; --glow-blue: #3b82f6; --glow-pink: #ec4899; --glow-yellow: #facc15; --glow-grey: rgba(148, 163, 184, 0.6); --glow-white: rgba(255, 255, 255, 0.7); --ol-thick: 4px; --ol-med: 1px; --ol-btn: 3px; --glow-soft: 0 0 10px; --glow-med: 0 0 16px; /* --- Core Backgrounds (glass-deepened) --- */ --bg-primary: #121419; --bg-secondary: #0e1015; --bg-tertiary: #151921; --bg-elevated: #1c2029; --bg-card: rgba(0, 0, 0, 0.65); --bg-hover: #181c25; --bg-overlay: rgba(0, 0, 0, 0.5); --bg-input: rgba(0, 0, 0, 0.5); --bg-accent-subtle: rgba(138, 83, 249, 0.08); /* --- Text --- */ --text-primary: #e8eaef; --text-secondary: #8b95a8; --text-tertiary: #5b647a; --text-disabled: #3b4255; --text-inverse: #000000; /* --- Accent (purple default, overridden by colorway) --- */ --accent: #8a53f9; --accent-rgb: 138, 83, 249; --accent-hover: #a67bfa; --accent-dark: #6c35d4; --accent-light: #c5a8fc; --accent-bg: rgba(138, 83, 249, 0.12); /* --- Secondary Accent --- */ --accent-2: #8a53f9; --accent-2-rgb: 138, 83, 249; /* --- Borders (accent-tinted glass) --- */ --border-primary: rgba(var(--accent-rgb), 0.15); --border-secondary: rgba(255, 255, 255, 0.06); --border-input: rgba(255, 255, 255, 0.12); /* --- Shadows --- */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.6); --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.5); --shadow-accent: 0 0 15px rgba(var(--accent-rgb), 0.3); --shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 15px rgba(var(--accent-rgb), 0.15); /* --- Accent Glows --- */ --glow-accent-sm: 0 0 4px rgba(var(--accent-rgb), 0.2); --glow-accent-md: 0 0 8px rgba(var(--accent-rgb), 0.3); --glow-accent-lg: 0 0 16px rgba(var(--accent-rgb), 0.4); --glow-accent-xl: 0 0 24px rgba(var(--accent-rgb), 0.5); /* --- Status Glows --- */ --glow-danger: 0 0 8px rgba(239, 68, 68, 0.3); --glow-warning: 0 0 8px rgba(250, 204, 21, 0.3); --glow-info: 0 0 8px rgba(59, 130, 246, 0.3); --glow-success: 0 0 8px rgba(34, 197, 94, 0.3); /* --- Alerts --- */ --alert-success-bg: rgba(34, 197, 94, 0.12); --alert-success-border: #22c55e; --alert-success-text: #86efac; --alert-info-bg: rgba(59, 130, 246, 0.12); --alert-info-border: #3b82f6; --alert-info-text: #93c5fd; --alert-warning-bg: rgba(250, 204, 21, 0.12); --alert-warning-border: #facc15; --alert-warning-text: #fde047; --alert-error-bg: rgba(239, 68, 68, 0.12); --alert-error-border: #ef4444; --alert-error-text: #fca5a5; /* --- Buttons --- */ --btn-primary-bg: var(--accent); --btn-primary-text: #ffffff; --btn-primary-hover: var(--accent-hover); --btn-secondary-bg: #1c2029; --btn-secondary-text: #e5e7eb; --btn-secondary-hover: #242934; --btn-outline-border: var(--accent); --btn-outline-text: var(--accent); --btn-ghost-text: var(--text-secondary); --btn-ghost-hover: rgba(255, 255, 255, 0.06); --btn-success-bg: #22c55e; --btn-success-text: #ffffff; --btn-danger-bg: #ef4444; --btn-danger-text: #ffffff; /* --- Badge Text Colors (light on dark) --- */ --badge-text-blue: #93c5fd; --badge-text-green: #86efac; --badge-text-red: #fca5a5; --badge-text-yellow: #fde047; --badge-text-purple: #c4b5fd; --badge-text-pink: #f9a8d4; --badge-text-orange: #fdba74; --badge-opacity: 0.15; /* --- Tables --- */ --table-bg: transparent; --table-border: var(--glow-white); --table-glow: var(--glow-soft) var(--glow-white); --table-header-bg: rgba(0, 0, 0, 0.3); --table-row-hover: rgba(var(--accent-rgb), 0.08); --table-row-border: var(--glow-grey); --table-row-glow: inset 0 -1px 8px var(--glow-grey); --table-radius: 12px; /* --- Forms --- */ --input-bg: rgba(0, 0, 0, 0.5); --input-border: rgba(255, 255, 255, 0.12); --input-focus-border: var(--accent); --input-focus-glow: 0 0 8px rgba(var(--accent-rgb), 0.55), 0 0 16px rgba(var(--accent-rgb), 0.35); --input-placeholder: #5b647a; --option-bg: #1c2029; --toggle-bg: #3b4255; /* --- Navigation --- */ --nav-bg: transparent; --nav-btn-border: var(--glow-white); --nav-btn-glow: 0 0 15px var(--glow-white); --nav-btn-radius: var(--radius-lg); /* --- Cards --- */ --card-bg: rgba(0, 0, 0, 0.65); --card-border: rgba(255, 255, 255, 0.1); --card-blur: blur(24px) saturate(1.4); --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05); --card-radius: var(--radius-xl); /* --- Misc --- */ --divider: rgba(148, 163, 184, 0.2); --scrollbar-thumb: #2a3040; --scrollbar-track: #000000; /* --- Status Colors --- */ --color-success: #22c55e; --color-warning: #facc15; --color-danger: #ef4444; --color-info: #3b82f6; /* --- Chart Colors (Print OS v4) --- */ --chart-1: hsl(220, 70%, 55%); --chart-2: #4ade80; --chart-3: hsl(30, 80%, 60%); --chart-4: hsl(280, 65%, 65%); --chart-5: hsl(340, 75%, 60%); /* --- Status Button Colors --- */ --status-booked: var(--glow-purple); --status-printing: var(--glow-blue); --status-packing: var(--glow-pink); --status-done: var(--glow-yellow); /* --- Summary Cells --- */ --summary-red-bg: rgba(127, 29, 29, 0.2); --summary-red-border: rgba(239, 68, 68, 0.5); --summary-red-text: #fca5a5; --summary-blue-bg: rgba(30, 58, 138, 0.2); --summary-blue-border: rgba(59, 130, 246, 0.5); --summary-blue-text: #93c5fd; --summary-green-bg: rgba(20, 83, 45, 0.2); --summary-green-border: rgba(34, 197, 94, 0.5); --summary-green-text: #86efac; /* --- Badge Color Variants --- */ --badge-blue-bg: rgba(59, 130, 246, 0.15); --badge-blue-border: rgba(59, 130, 246, 0.3); --badge-blue-shadow: 0 0 8px rgba(59, 130, 246, 0.2); --badge-blue-shadow-hover: 0 0 12px rgba(59, 130, 246, 0.35); --badge-green-bg: rgba(34, 197, 94, 0.15); --badge-green-border: rgba(34, 197, 94, 0.3); --badge-green-shadow: 0 0 8px rgba(34, 197, 94, 0.2); --badge-green-shadow-hover:0 0 12px rgba(34, 197, 94, 0.35); --badge-red-bg: rgba(239, 68, 68, 0.15); --badge-red-border: rgba(239, 68, 68, 0.3); --badge-red-shadow: 0 0 8px rgba(239, 68, 68, 0.2); --badge-red-shadow-hover: 0 0 12px rgba(239, 68, 68, 0.35); --badge-yellow-bg: rgba(250, 204, 21, 0.15); --badge-yellow-border: rgba(250, 204, 21, 0.3); --badge-yellow-shadow: 0 0 8px rgba(250, 204, 21, 0.2); --badge-yellow-shadow-hover:0 0 12px rgba(250, 204, 21, 0.35); --badge-purple-bg: rgba(138, 83, 249, 0.15); --badge-purple-border: rgba(138, 83, 249, 0.3); --badge-purple-shadow: 0 0 8px rgba(138, 83, 249, 0.2); --badge-purple-shadow-hover:0 0 12px rgba(138, 83, 249, 0.35); --badge-pink-bg: rgba(236, 72, 153, 0.15); --badge-pink-border: rgba(236, 72, 153, 0.3); --badge-pink-shadow: 0 0 8px rgba(236, 72, 153, 0.2); --badge-pink-shadow-hover: 0 0 12px rgba(236, 72, 153, 0.35); /* --- Badge Button Variants --- */ --badge-btn-primary-bg: rgba(var(--accent-rgb), 0.15); --badge-btn-primary-border:rgba(var(--accent-rgb), 0.3); --badge-btn-primary-text: var(--accent-light); --badge-btn-primary-glow: 0 0 8px rgba(var(--accent-rgb), 0.25); --badge-btn-success-bg: rgba(34, 197, 94, 0.15); --badge-btn-success-border:rgba(34, 197, 94, 0.3); --badge-btn-success-text: #86efac; --badge-btn-success-glow: 0 0 8px rgba(34, 197, 94, 0.25); --badge-btn-info-bg: rgba(59, 130, 246, 0.15); --badge-btn-info-border: rgba(59, 130, 246, 0.3); --badge-btn-info-text: #93c5fd; --badge-btn-info-glow: 0 0 8px rgba(59, 130, 246, 0.25); --badge-btn-danger-bg: rgba(239, 68, 68, 0.15); --badge-btn-danger-border: rgba(239, 68, 68, 0.3); --badge-btn-danger-text: #fca5a5; --badge-btn-danger-glow: 0 0 8px rgba(239, 68, 68, 0.25); --badge-btn-warning-bg: rgba(250, 204, 21, 0.15); --badge-btn-warning-border:rgba(250, 204, 21, 0.3); --badge-btn-warning-text: #fde047; --badge-btn-warning-glow: 0 0 8px rgba(250, 204, 21, 0.25); --badge-btn-orange-bg: rgba(249, 115, 22, 0.15); --badge-btn-orange-border: rgba(249, 115, 22, 0.3); --badge-btn-orange-text: #fdba74; --badge-btn-orange-glow: 0 0 8px rgba(249, 115, 22, 0.25); --badge-btn-pink-bg: rgba(236, 72, 153, 0.15); --badge-btn-pink-border: rgba(236, 72, 153, 0.3); --badge-btn-pink-text: #f9a8d4; --badge-btn-pink-glow: 0 0 8px rgba(236, 72, 153, 0.25); /* --- Stat Card Variants --- */ --stat-blue-bg: rgba(59, 130, 246, 0.08); --stat-blue-border: rgba(59, 130, 246, 0.2); --stat-blue-shadow: 0 0 12px rgba(59, 130, 246, 0.15); --stat-blue-shadow-hover: 0 0 20px rgba(59, 130, 246, 0.25); --stat-green-bg: rgba(34, 197, 94, 0.08); --stat-green-border: rgba(34, 197, 94, 0.2); --stat-green-shadow: 0 0 12px rgba(34, 197, 94, 0.15); --stat-green-shadow-hover: 0 0 20px rgba(34, 197, 94, 0.25); --stat-red-bg: rgba(239, 68, 68, 0.08); --stat-red-border: rgba(239, 68, 68, 0.2); --stat-red-shadow: 0 0 12px rgba(239, 68, 68, 0.15); --stat-red-shadow-hover: 0 0 20px rgba(239, 68, 68, 0.25); /* --- KPI Circle Variants --- */ --kpi-blue-bg: rgba(59, 130, 246, 0.1); --kpi-blue-border: rgba(59, 130, 246, 0.25); --kpi-blue-shadow: 0 0 10px rgba(59, 130, 246, 0.2); --kpi-blue-shadow-hover: 0 0 16px rgba(59, 130, 246, 0.3); --kpi-green-bg: rgba(34, 197, 94, 0.1); --kpi-green-border: rgba(34, 197, 94, 0.25); --kpi-green-shadow: 0 0 10px rgba(34, 197, 94, 0.2); --kpi-green-shadow-hover: 0 0 16px rgba(34, 197, 94, 0.3); --kpi-purple-bg: rgba(138, 83, 249, 0.1); --kpi-purple-border: rgba(138, 83, 249, 0.25); --kpi-purple-shadow: 0 0 10px rgba(138, 83, 249, 0.2); --kpi-purple-shadow-hover: 0 0 16px rgba(138, 83, 249, 0.3); --kpi-red-bg: rgba(239, 68, 68, 0.1); --kpi-red-border: rgba(239, 68, 68, 0.25); --kpi-red-shadow: 0 0 10px rgba(239, 68, 68, 0.2); --kpi-red-shadow-hover: 0 0 16px rgba(239, 68, 68, 0.3); --kpi-yellow-bg: rgba(250, 204, 21, 0.1); --kpi-yellow-border: rgba(250, 204, 21, 0.25); --kpi-yellow-shadow: 0 0 10px rgba(250, 204, 21, 0.2); --kpi-yellow-shadow-hover: 0 0 16px rgba(250, 204, 21, 0.3); /* --- Background System --- */ --overlay-bg: rgba(0, 0, 0, 0.7); --theme-overlay: rgba(0, 0, 0, 0.6); } /* ============================================================= WHITE GLASS THEME — White frosted glass + Crimson primary Sourced from Print OS v4 :is(.white-glass, .light) Colorways: LOCKED (accent fixed to crimson) ============================================================= */ [data-theme="white-glass"] { color-scheme: light; /* --- Glow Tokens (subtle for light) --- */ --glow-purple: var(--accent); --glow-blue: #3b82f6; --glow-pink: #ec4899; --glow-yellow: #facc15; --glow-grey: rgba(0, 0, 0, 0.1); --glow-white: rgba(0, 0, 0, 0.15); --ol-thick: 1px; --ol-med: 1px; --ol-btn: 2px; --glow-soft: 0 0 4px; --glow-med: 0 0 8px; /* --- Core Backgrounds --- */ --bg-primary: #f2f2f2; --bg-secondary: #ffffff; --bg-tertiary: #fafafa; --bg-elevated: #ffffff; --bg-card: rgba(255, 255, 255, 0.65); --bg-hover: #f0f0f0; --bg-overlay: rgba(0, 0, 0, 0.4); --bg-input: rgba(255, 255, 255, 0.6); --bg-accent-subtle: rgba(196, 30, 58, 0.04); /* --- Text --- */ --text-primary: #1a1a1a; --text-secondary: #555555; --text-tertiary: #888888; --text-disabled: #cccccc; --text-inverse: #ffffff; /* --- Accent (crimson default for light) --- */ --accent: #c41e3a; --accent-rgb: 196, 30, 58; --accent-hover: #d42c4d; --accent-dark: #9a1830; --accent-light: #e57589; --accent-bg: rgba(196, 30, 58, 0.06); /* --- Secondary Accent --- */ --accent-2: hsl(25, 90%, 55%); --accent-2-rgb: 242, 142, 38; /* --- Borders --- */ --border-primary: rgba(0, 0, 0, 0.1); --border-secondary: rgba(0, 0, 0, 0.06); --border-input: rgba(0, 0, 0, 0.1); /* --- Shadows (subtle) --- */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1); --shadow-card: none; --shadow-accent: 0 2px 12px rgba(var(--accent-rgb), 0.15); --shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12); /* --- Accent Glows (very subtle on light) --- */ --glow-accent-sm: 0 0 4px rgba(var(--accent-rgb), 0.1); --glow-accent-md: 0 0 8px rgba(var(--accent-rgb), 0.15); --glow-accent-lg: 0 0 16px rgba(var(--accent-rgb), 0.2); --glow-accent-xl: 0 0 24px rgba(var(--accent-rgb), 0.25); /* --- Status Glows --- */ --glow-danger: 0 0 6px rgba(239, 68, 68, 0.15); --glow-warning: 0 0 6px rgba(250, 204, 21, 0.15); --glow-info: 0 0 6px rgba(59, 130, 246, 0.15); --glow-success: 0 0 6px rgba(34, 197, 94, 0.15); /* --- Alerts --- */ --alert-success-bg: #e8f5e9; --alert-success-border: #22c55e; --alert-success-text: #166534; --alert-info-bg: #e3f2fd; --alert-info-border: #3b82f6; --alert-info-text: #1e40af; --alert-warning-bg: #fff8e1; --alert-warning-border: #facc15; --alert-warning-text: #854d0e; --alert-error-bg: #ffebee; --alert-error-border: #ef4444; --alert-error-text: #991b1b; /* --- Buttons --- */ --btn-primary-bg: var(--accent); --btn-primary-text: #ffffff; --btn-primary-hover: var(--accent-hover); --btn-secondary-bg: #f0f0f0; --btn-secondary-text: #333333; --btn-secondary-hover: #e5e5e5; --btn-outline-border: var(--accent); --btn-outline-text: var(--accent); --btn-ghost-text: var(--text-secondary); --btn-ghost-hover: rgba(0, 0, 0, 0.04); --btn-success-bg: #16a34a; --btn-success-text: #ffffff; --btn-danger-bg: #dc2626; --btn-danger-text: #ffffff; /* --- Badge Text Colors (dark on light) --- */ --badge-text-blue: #1e40af; --badge-text-green: #166534; --badge-text-red: #991b1b; --badge-text-yellow: #854d0e; --badge-text-purple: #6b21a8; --badge-text-pink: #9d174d; --badge-text-orange: #9a3412; --badge-opacity: 0.08; /* --- Tables --- */ --table-bg: #ffffff; --table-border: rgba(0, 0, 0, 0.08); --table-glow: 0 2px 8px rgba(0, 0, 0, 0.06); --table-header-bg: rgba(255, 255, 255, 0.3); --table-row-hover: rgba(255, 255, 255, 0.3); --table-row-border: rgba(0, 0, 0, 0.06); --table-row-glow: none; --table-radius: 12px; /* --- Forms --- */ --input-bg: rgba(255, 255, 255, 0.6); --input-border: rgba(0, 0, 0, 0.1); --input-focus-border: var(--accent); --input-focus-glow: 0 0 0 3px rgba(var(--accent-rgb), 0.15); --input-placeholder: #999999; --option-bg: #f9f9f9; --toggle-bg: #dddddd; /* --- Navigation --- */ --nav-bg: transparent; --nav-btn-border: rgba(0, 0, 0, 0.08); --nav-btn-glow: 0 2px 8px rgba(0, 0, 0, 0.08); --nav-btn-radius: var(--radius-lg); /* --- Cards --- */ --card-bg: rgba(255, 255, 255, 0.65); --card-border: rgba(255, 255, 255, 0.4); --card-blur: blur(24px) saturate(1.4); --card-shadow: none; --card-radius: var(--radius-xl); /* --- Misc --- */ --divider: rgba(0, 0, 0, 0.08); --scrollbar-thumb: #cccccc; --scrollbar-track: #f5f5f5; /* --- Status Colors --- */ --color-success: #16a34a; --color-warning: #ca8a04; --color-danger: #dc2626; --color-info: #2563eb; /* --- Chart Colors --- */ --chart-1: hsl(220, 70%, 55%); --chart-2: #4ade80; --chart-3: hsl(30, 80%, 60%); --chart-4: hsl(280, 65%, 65%); --chart-5: hsl(340, 75%, 60%); /* --- Status Buttons (solid fills on light) --- */ --status-booked: var(--accent); --status-printing: #2563eb; --status-packing: #db2777; --status-done: #facc15; /* --- Summary Cells (solid fills on light) --- */ --summary-red-bg: var(--accent); --summary-red-border: transparent; --summary-red-text: #ffffff; --summary-blue-bg: var(--chart-1); --summary-blue-border: transparent; --summary-blue-text: #ffffff; --summary-green-bg: #16a34a; --summary-green-border: transparent; --summary-green-text: #ffffff; /* --- Badge Color Variants (solid on light) --- */ --badge-blue-bg: rgba(59, 130, 246, 0.1); --badge-blue-border: rgba(59, 130, 246, 0.2); --badge-blue-shadow: 0 2px 6px rgba(59, 130, 246, 0.1); --badge-blue-shadow-hover: 0 2px 8px rgba(59, 130, 246, 0.15); --badge-green-bg: rgba(34, 197, 94, 0.1); --badge-green-border: rgba(34, 197, 94, 0.2); --badge-green-shadow: 0 2px 6px rgba(34, 197, 94, 0.1); --badge-green-shadow-hover:0 2px 8px rgba(34, 197, 94, 0.15); --badge-red-bg: rgba(239, 68, 68, 0.1); --badge-red-border: rgba(239, 68, 68, 0.2); --badge-red-shadow: 0 2px 6px rgba(239, 68, 68, 0.1); --badge-red-shadow-hover: 0 2px 8px rgba(239, 68, 68, 0.15); --badge-yellow-bg: rgba(250, 204, 21, 0.1); --badge-yellow-border: rgba(250, 204, 21, 0.2); --badge-yellow-shadow: 0 2px 6px rgba(250, 204, 21, 0.1); --badge-yellow-shadow-hover:0 2px 8px rgba(250, 204, 21, 0.15); --badge-purple-bg: rgba(138, 83, 249, 0.1); --badge-purple-border: rgba(138, 83, 249, 0.2); --badge-purple-shadow: 0 2px 6px rgba(138, 83, 249, 0.1); --badge-purple-shadow-hover:0 2px 8px rgba(138, 83, 249, 0.15); --badge-pink-bg: rgba(236, 72, 153, 0.1); --badge-pink-border: rgba(236, 72, 153, 0.2); --badge-pink-shadow: 0 2px 6px rgba(236, 72, 153, 0.1); --badge-pink-shadow-hover: 0 2px 8px rgba(236, 72, 153, 0.15); --badge-btn-primary-bg: rgba(var(--accent-rgb), 0.1); --badge-btn-primary-border:rgba(var(--accent-rgb), 0.2); --badge-btn-primary-text: var(--accent); --badge-btn-primary-glow: 0 2px 6px rgba(var(--accent-rgb), 0.12); --badge-btn-success-bg: rgba(22, 163, 74, 0.1); --badge-btn-success-border:rgba(22, 163, 74, 0.2); --badge-btn-success-text: #166534; --badge-btn-success-glow: none; --badge-btn-info-bg: rgba(37, 99, 235, 0.1); --badge-btn-info-border: rgba(37, 99, 235, 0.2); --badge-btn-info-text: #1e40af; --badge-btn-info-glow: none; --badge-btn-danger-bg: rgba(220, 38, 38, 0.1); --badge-btn-danger-border: rgba(220, 38, 38, 0.2); --badge-btn-danger-text: #991b1b; --badge-btn-danger-glow: none; --badge-btn-warning-bg: rgba(202, 138, 4, 0.1); --badge-btn-warning-border:rgba(202, 138, 4, 0.2); --badge-btn-warning-text: #854d0e; --badge-btn-warning-glow: none; --badge-btn-orange-bg: rgba(234, 88, 12, 0.1); --badge-btn-orange-border: rgba(234, 88, 12, 0.2); --badge-btn-orange-text: #9a3412; --badge-btn-orange-glow: none; --badge-btn-pink-bg: rgba(219, 39, 119, 0.1); --badge-btn-pink-border: rgba(219, 39, 119, 0.2); --badge-btn-pink-text: #9d174d; --badge-btn-pink-glow: none; --stat-blue-bg: rgba(59, 130, 246, 0.06); --stat-blue-border: rgba(59, 130, 246, 0.15); --stat-blue-shadow: 0 2px 8px rgba(59, 130, 246, 0.08); --stat-blue-shadow-hover: 0 4px 12px rgba(59, 130, 246, 0.12); --stat-green-bg: rgba(34, 197, 94, 0.06); --stat-green-border: rgba(34, 197, 94, 0.15); --stat-green-shadow: 0 2px 8px rgba(34, 197, 94, 0.08); --stat-green-shadow-hover: 0 4px 12px rgba(34, 197, 94, 0.12); --stat-red-bg: rgba(239, 68, 68, 0.06); --stat-red-border: rgba(239, 68, 68, 0.15); --stat-red-shadow: 0 2px 8px rgba(239, 68, 68, 0.08); --stat-red-shadow-hover: 0 4px 12px rgba(239, 68, 68, 0.12); --kpi-blue-bg: rgba(59, 130, 246, 0.06); --kpi-blue-border: rgba(59, 130, 246, 0.15); --kpi-blue-shadow: 0 2px 6px rgba(59, 130, 246, 0.08); --kpi-blue-shadow-hover: 0 2px 10px rgba(59, 130, 246, 0.12); --kpi-green-bg: rgba(34, 197, 94, 0.06); --kpi-green-border: rgba(34, 197, 94, 0.15); --kpi-green-shadow: 0 2px 6px rgba(34, 197, 94, 0.08); --kpi-green-shadow-hover: 0 2px 10px rgba(34, 197, 94, 0.12); --kpi-purple-bg: rgba(138, 83, 249, 0.06); --kpi-purple-border: rgba(138, 83, 249, 0.15); --kpi-purple-shadow: 0 2px 6px rgba(138, 83, 249, 0.08); --kpi-purple-shadow-hover: 0 2px 10px rgba(138, 83, 249, 0.12); --kpi-red-bg: rgba(239, 68, 68, 0.06); --kpi-red-border: rgba(239, 68, 68, 0.15); --kpi-red-shadow: 0 2px 6px rgba(239, 68, 68, 0.08); --kpi-red-shadow-hover: 0 2px 10px rgba(239, 68, 68, 0.12); --kpi-yellow-bg: rgba(250, 204, 21, 0.06); --kpi-yellow-border: rgba(250, 204, 21, 0.15); --kpi-yellow-shadow: 0 2px 6px rgba(250, 204, 21, 0.08); --kpi-yellow-shadow-hover: 0 2px 10px rgba(250, 204, 21, 0.12); /* --- Background System --- */ --overlay-bg: rgba(0, 0, 0, 0.3); --theme-overlay: rgba(255, 255, 255, 0.7); } /* ============================================================= SKEUOMORPHIC THEME — Realistic tactile UI Glossy buttons, raised panels, inset inputs, linen texture ============================================================= */ [data-theme="skeuomorphic"] { color-scheme: light; --glow-purple: transparent; --glow-blue: transparent; --glow-pink: transparent; --glow-yellow: transparent; --glow-grey: rgba(0, 0, 0, 0.15); --glow-white: rgba(0, 0, 0, 0.1); --ol-thick: 1px; --ol-med: 1px; --ol-btn: 1px; --glow-soft: 0 1px 2px; --glow-med: 0 2px 4px; --bg-primary: #f8f9fa; --bg-secondary: #f0f1f3; --bg-tertiary: #e5e7ea; --bg-elevated: #ffffff; --bg-card: #ffffff; --bg-hover: #ecedf0; --bg-overlay: rgba(0, 0, 0, 0.45); --bg-input: #e9eaed; --bg-accent-subtle: rgba(196, 30, 58, 0.05); --text-primary: #212529; --text-secondary: #6c757d; --text-tertiary: #868e96; --text-disabled: #c4c8cc; --text-inverse: #ffffff; --accent: #c41e3a; --accent-rgb: 196, 30, 58; --accent-hover: #d42c4d; --accent-dark: #9a1830; --accent-light: #e57589; --accent-bg: rgba(196, 30, 58, 0.08); --accent-2: hsl(25, 90%, 55%); --accent-2-rgb: 242, 142, 38; --border-primary: rgba(0, 0, 0, 0.12); --border-secondary: rgba(0, 0, 0, 0.08); --border-input: rgba(0, 0, 0, 0.15); --shadow-sm: 0 1px 2px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.6); --shadow-md: 0 2px 8px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.5); --shadow-lg: 0 4px 16px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.4); --shadow-card: 0 2px 8px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.8); --shadow-accent: 0 2px 8px rgba(196,30,58,0.2); --shadow-inset: inset 0 2px 4px rgba(0,0,0,0.12); --shadow-hover: 0 4px 12px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.6); --glow-accent-sm: 0 1px 3px rgba(var(--accent-rgb), 0.12); --glow-accent-md: 0 2px 6px rgba(var(--accent-rgb), 0.15); --glow-accent-lg: 0 3px 10px rgba(var(--accent-rgb), 0.18); --glow-accent-xl: 0 4px 14px rgba(var(--accent-rgb), 0.2); --glow-danger: 0 2px 6px rgba(239, 68, 68, 0.2); --glow-warning: 0 2px 6px rgba(250, 204, 21, 0.2); --glow-info: 0 2px 6px rgba(59, 130, 246, 0.2); --glow-success: 0 2px 6px rgba(34, 197, 94, 0.2); --alert-success-bg: #e8f5e9; --alert-success-border: #22c55e; --alert-success-text: #166534; --alert-info-bg: #e3f2fd; --alert-info-border: #3b82f6; --alert-info-text: #1e40af; --alert-warning-bg: #fff8e1; --alert-warning-border: #facc15; --alert-warning-text: #854d0e; --alert-error-bg: #ffebee; --alert-error-border: #ef4444; --alert-error-text: #991b1b; --btn-primary-bg: var(--accent); --btn-primary-text: #ffffff; --btn-primary-hover: var(--accent-hover); --btn-secondary-bg: #f0f1f3; --btn-secondary-text: #343a40; --btn-secondary-hover: #e5e7ea; --btn-outline-border: var(--accent); --btn-outline-text: var(--accent); --btn-ghost-text: var(--text-secondary); --btn-ghost-hover: rgba(0, 0, 0, 0.05); --btn-success-bg: #16a34a; --btn-success-text: #ffffff; --btn-danger-bg: #dc2626; --btn-danger-text: #ffffff; --badge-text-blue: #1e40af; --badge-text-green: #166534; --badge-text-red: #991b1b; --badge-text-yellow: #854d0e; --badge-text-purple: #6b21a8; --badge-text-pink: #9d174d; --badge-text-orange: #9a3412; --badge-opacity: 0.1; --table-bg: #ffffff; --table-border: rgba(0, 0, 0, 0.1); --table-glow: 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255,255,255,0.6); --table-header-bg: #f0f1f3; --table-row-hover: #f8f9fa; --table-row-border: rgba(0, 0, 0, 0.06); --table-row-glow: none; --table-radius: 12px; --input-bg: #e9eaed; --input-border: rgba(0, 0, 0, 0.15); --input-focus-border: var(--accent); --input-focus-glow: 0 0 0 3px rgba(var(--accent-rgb), 0.15), inset 0 1px 3px rgba(0,0,0,0.1); --input-placeholder: #959da5; --option-bg: #f8f9fa; --toggle-bg: #d6dade; --nav-bg: transparent; --nav-btn-border: rgba(0, 0, 0, 0.1); --nav-btn-glow: 0 2px 6px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255,255,255,0.5); --nav-btn-radius: var(--radius-lg); --card-bg: #ffffff; --card-border: rgba(0, 0, 0, 0.08); --card-blur: none; --card-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.8); --card-radius: var(--radius-xl); --divider: rgba(0, 0, 0, 0.1); --scrollbar-thumb: #cdd1d5; --scrollbar-track: #f0f1f3; --color-success: #16a34a; --color-warning: #ca8a04; --color-danger: #dc2626; --color-info: #2563eb; --chart-1: hsl(220, 70%, 55%); --chart-2: #4ade80; --chart-3: hsl(30, 80%, 60%); --chart-4: hsl(280, 65%, 65%); --chart-5: hsl(340, 75%, 60%); --status-booked: var(--accent); --status-printing: #2563eb; --status-packing: #db2777; --status-done: #facc15; --summary-red-bg: var(--accent); --summary-red-border: transparent; --summary-red-text: #ffffff; --summary-blue-bg: var(--chart-1); --summary-blue-border: transparent; --summary-blue-text: #ffffff; --summary-green-bg: #16a34a; --summary-green-border: transparent; --summary-green-text: #ffffff; --badge-blue-bg: rgba(59, 130, 246, 0.1); --badge-blue-border: rgba(59, 130, 246, 0.2); --badge-blue-shadow: 0 1px 4px rgba(59, 130, 246, 0.12); --badge-blue-shadow-hover: 0 2px 6px rgba(59, 130, 246, 0.18); --badge-green-bg: rgba(34, 197, 94, 0.1); --badge-green-border: rgba(34, 197, 94, 0.2); --badge-green-shadow: 0 1px 4px rgba(34, 197, 94, 0.12); --badge-green-shadow-hover: 0 2px 6px rgba(34, 197, 94, 0.18); --badge-red-bg: rgba(239, 68, 68, 0.1); --badge-red-border: rgba(239, 68, 68, 0.2); --badge-red-shadow: 0 1px 4px rgba(239, 68, 68, 0.12); --badge-red-shadow-hover: 0 2px 6px rgba(239, 68, 68, 0.18); --badge-yellow-bg: rgba(250, 204, 21, 0.1); --badge-yellow-border: rgba(250, 204, 21, 0.2); --badge-yellow-shadow: 0 1px 4px rgba(250, 204, 21, 0.12); --badge-yellow-shadow-hover:0 2px 6px rgba(250, 204, 21, 0.18); --badge-purple-bg: rgba(138, 83, 249, 0.1); --badge-purple-border: rgba(138, 83, 249, 0.2); --badge-purple-shadow: 0 1px 4px rgba(138, 83, 249, 0.12); --badge-purple-shadow-hover:0 2px 6px rgba(138, 83, 249, 0.15); --badge-pink-bg: rgba(236, 72, 153, 0.1); --badge-pink-border: rgba(236, 72, 153, 0.2); --badge-pink-shadow: 0 1px 4px rgba(236, 72, 153, 0.12); --badge-pink-shadow-hover: 0 2px 6px rgba(236, 72, 153, 0.18); --badge-btn-primary-bg: rgba(var(--accent-rgb), 0.1); --badge-btn-primary-border: rgba(var(--accent-rgb), 0.2); --badge-btn-primary-text: var(--accent); --badge-btn-primary-glow: 0 1px 4px rgba(var(--accent-rgb), 0.15); --badge-btn-success-bg: rgba(22, 163, 74, 0.1); --badge-btn-success-border: rgba(22, 163, 74, 0.2); --badge-btn-success-text: #166534; --badge-btn-success-glow: none; --badge-btn-info-bg: rgba(37, 99, 235, 0.1); --badge-btn-info-border: rgba(37, 99, 235, 0.2); --badge-btn-info-text: #1e40af; --badge-btn-info-glow: none; --badge-btn-danger-bg: rgba(220, 38, 38, 0.1); --badge-btn-danger-border: rgba(220, 38, 38, 0.2); --badge-btn-danger-text: #991b1b; --badge-btn-danger-glow: none; --badge-btn-warning-bg: rgba(202, 138, 4, 0.1); --badge-btn-warning-border: rgba(202, 138, 4, 0.2); --badge-btn-warning-text: #854d0e; --badge-btn-warning-glow: none; --badge-btn-orange-bg: rgba(234, 88, 12, 0.1); --badge-btn-orange-border: rgba(234, 88, 12, 0.2); --badge-btn-orange-text: #9a3412; --badge-btn-orange-glow: none; --badge-btn-pink-bg: rgba(219, 39, 119, 0.1); --badge-btn-pink-border: rgba(219, 39, 119, 0.2); --badge-btn-pink-text: #9d174d; --badge-btn-pink-glow: none; --stat-blue-bg: rgba(59, 130, 246, 0.06); --stat-blue-border: rgba(59, 130, 246, 0.15); --stat-blue-shadow: 0 2px 6px rgba(59, 130, 246, 0.1); --stat-blue-shadow-hover: 0 3px 10px rgba(59, 130, 246, 0.15); --stat-green-bg: rgba(34, 197, 94, 0.06); --stat-green-border: rgba(34, 197, 94, 0.15); --stat-green-shadow: 0 2px 6px rgba(34, 197, 94, 0.1); --stat-green-shadow-hover: 0 3px 10px rgba(34, 197, 94, 0.15); --stat-red-bg: rgba(239, 68, 68, 0.06); --stat-red-border: rgba(239, 68, 68, 0.15); --stat-red-shadow: 0 2px 6px rgba(239, 68, 68, 0.1); --stat-red-shadow-hover: 0 3px 10px rgba(239, 68, 68, 0.15); --kpi-blue-bg: rgba(59, 130, 246, 0.06); --kpi-blue-border: rgba(59, 130, 246, 0.15); --kpi-blue-shadow: 0 1px 4px rgba(59, 130, 246, 0.1); --kpi-blue-shadow-hover: 0 2px 6px rgba(59, 130, 246, 0.15); --kpi-green-bg: rgba(34, 197, 94, 0.06); --kpi-green-border: rgba(34, 197, 94, 0.15); --kpi-green-shadow: 0 1px 4px rgba(34, 197, 94, 0.1); --kpi-green-shadow-hover: 0 2px 6px rgba(34, 197, 94, 0.15); --kpi-purple-bg: rgba(138, 83, 249, 0.06); --kpi-purple-border: rgba(138, 83, 249, 0.15); --kpi-purple-shadow: 0 1px 4px rgba(138, 83, 249, 0.1); --kpi-purple-shadow-hover: 0 2px 6px rgba(138, 83, 249, 0.15); --kpi-red-bg: rgba(239, 68, 68, 0.06); --kpi-red-border: rgba(239, 68, 68, 0.15); --kpi-red-shadow: 0 1px 4px rgba(239, 68, 68, 0.1); --kpi-red-shadow-hover: 0 2px 6px rgba(239, 68, 68, 0.15); --kpi-yellow-bg: rgba(250, 204, 21, 0.06); --kpi-yellow-border: rgba(250, 204, 21, 0.15); --kpi-yellow-shadow: 0 1px 4px rgba(250, 204, 21, 0.1); --kpi-yellow-shadow-hover: 0 2px 6px rgba(250, 204, 21, 0.15); --overlay-bg: rgba(0, 0, 0, 0.35); --theme-overlay: rgba(248, 249, 250, 0.85); --skeu-highlight: rgba(255, 255, 255, 0.7); --skeu-gloss-start: rgba(255, 255, 255, 0.4); --skeu-gloss-end: rgba(255, 255, 255, 0); --skeu-inset: inset 0 2px 4px rgba(0, 0, 0, 0.12); --skeu-raised: 0 2px 6px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.6); } [data-theme="skeuomorphic"] body { background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.008) 2px, rgba(0,0,0,0.008) 4px), repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,0.005) 2px, rgba(0,0,0,0.005) 4px), #f8f9fa; } /* ============================================================= RETRO THEME — Windows 95 / AIM style Sourced from Print OS v4 .retro-aim ============================================================= */ [data-theme="retro"] { color-scheme: light; /* --- Glow Tokens (killed — no glow on retro) --- */ --glow-purple: #000080; --glow-blue: #000080; --glow-pink: #800080; --glow-yellow: #808000; --glow-grey: #808080; --glow-white: #808080; --ol-thick: 0px; --ol-med: 0px; --ol-btn: 0px; --glow-soft: 0 0 0; --glow-med: 0 0 0; /* --- Core --- */ --bg-primary: #c0c0c0; --bg-secondary: #d4d0c8; --bg-tertiary: #d4d0c8; --bg-elevated: #c0c0c0; --bg-card: #c0c0c0; --bg-hover: #d4d0c8; --bg-overlay: #008080; --bg-input: #ffffff; --bg-accent-subtle: rgba(0, 0, 128, 0.08); /* --- Text --- */ --text-primary: #000000; --text-secondary: #333333; --text-tertiary: #555555; --text-disabled: #808080; --text-inverse: #ffffff; /* --- Accent --- */ --accent: #000080; --accent-rgb: 0, 0, 128; --accent-hover: #0000a0; --accent-dark: #000060; --accent-light: #4040c0; --accent-bg: rgba(0, 0, 128, 0.08); --accent-2: #008080; --accent-2-rgb: 0, 128, 128; /* --- Borders --- */ --border-primary: #808080; --border-secondary: #a0a0a0; --border-input: #808080; /* --- Win95 3D Bevel Shadows --- */ --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-card: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; --shadow-accent: none; --shadow-inset: inset -1px -1px #ffffff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; --shadow-hover: none; --glow-accent-sm: none; --glow-accent-md: none; --glow-accent-lg: none; --glow-accent-xl: none; --glow-danger: none; --glow-warning: none; --glow-info: none; --glow-success: none; /* --- Alerts --- */ --alert-success-bg: #c0c0c0; --alert-success-border: #808080; --alert-success-text: #008000; --alert-info-bg: #c0c0c0; --alert-info-border: #808080; --alert-info-text: #000080; --alert-warning-bg: #c0c0c0; --alert-warning-border: #808080; --alert-warning-text: #808000; --alert-error-bg: #c0c0c0; --alert-error-border: #808080; --alert-error-text: #800000; /* --- Buttons --- */ --btn-primary-bg: #c0c0c0; --btn-primary-text: #000000; --btn-primary-hover: #d4d0c8; --btn-secondary-bg: #c0c0c0; --btn-secondary-text: #000000; --btn-secondary-hover: #d4d0c8; --btn-outline-border: #808080; --btn-outline-text: #000000; --btn-ghost-text: #333333; --btn-ghost-hover: rgba(0, 0, 0, 0.06); --btn-success-bg: #008000; --btn-success-text: #ffffff; --btn-danger-bg: #800000; --btn-danger-text: #ffffff; /* --- Badges --- */ --badge-text-blue: #000080; --badge-text-green: #008000; --badge-text-red: #800000; --badge-text-yellow: #808000; --badge-text-purple: #800080; --badge-text-pink: #800040; --badge-text-orange: #804000; --badge-opacity: 0.15; /* --- Tables --- */ --table-bg: #ffffff; --table-border: #808080; --table-glow: none; --table-header-bg: #c0c0c0; --table-row-hover: #d4d0c8; --table-row-border: #808080; --table-row-glow: none; --table-radius: 0px; /* --- Forms --- */ --input-bg: #ffffff; --input-border: #808080; --input-focus-border: #000000; --input-focus-glow: none; --input-placeholder: #808080; --option-bg: #ffffff; --toggle-bg: #c0c0c0; /* --- Navigation --- */ --nav-bg: #c0c0c0; --nav-btn-border: none; --nav-btn-glow: none; --nav-btn-radius: 0px; /* --- Cards --- */ --card-bg: #c0c0c0; --card-border: none; --card-blur: none; --card-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; --card-radius: 0px; /* --- Misc --- */ --divider: #808080; --scrollbar-thumb: #c0c0c0; --scrollbar-track: #d4d0c8; /* --- Status Colors --- */ --color-success: #008000; --color-warning: #808000; --color-danger: #800000; --color-info: #000080; /* --- Status Buttons --- */ --status-booked: #000080; --status-printing: #1084d0; --status-packing: #800080; --status-done: #008000; /* --- Summary Cells --- */ --summary-red-bg: #800000; --summary-red-border: #808080; --summary-red-text: #ffffff; --summary-blue-bg: #000080; --summary-blue-border: #808080; --summary-blue-text: #ffffff; --summary-green-bg: #008000; --summary-green-border: #808080; --summary-green-text: #ffffff; /* --- Badge/Stat/KPI (flat Win95 style) --- */ --badge-blue-bg: #c0c0c0; --badge-blue-border: #808080; --badge-blue-shadow: none; --badge-blue-shadow-hover: none; --badge-green-bg: #c0c0c0; --badge-green-border: #808080; --badge-green-shadow: none; --badge-green-shadow-hover: none; --badge-red-bg: #c0c0c0; --badge-red-border: #808080; --badge-red-shadow: none; --badge-red-shadow-hover: none; --badge-yellow-bg: #c0c0c0; --badge-yellow-border: #808080; --badge-yellow-shadow: none; --badge-yellow-shadow-hover: none; --badge-purple-bg: #c0c0c0; --badge-purple-border: #808080; --badge-purple-shadow: none; --badge-purple-shadow-hover: none; --badge-pink-bg: #c0c0c0; --badge-pink-border: #808080; --badge-pink-shadow: none; --badge-pink-shadow-hover: none; --badge-btn-primary-bg: #c0c0c0; --badge-btn-primary-border: #808080; --badge-btn-primary-text: #000; --badge-btn-primary-glow: none; --badge-btn-success-bg: #c0c0c0; --badge-btn-success-border: #808080; --badge-btn-success-text: #008000; --badge-btn-success-glow: none; --badge-btn-info-bg: #c0c0c0; --badge-btn-info-border: #808080; --badge-btn-info-text: #000080; --badge-btn-info-glow: none; --badge-btn-danger-bg: #c0c0c0; --badge-btn-danger-border: #808080; --badge-btn-danger-text: #800000; --badge-btn-danger-glow: none; --badge-btn-warning-bg: #c0c0c0; --badge-btn-warning-border: #808080; --badge-btn-warning-text: #808000; --badge-btn-warning-glow: none; --badge-btn-orange-bg: #c0c0c0; --badge-btn-orange-border: #808080; --badge-btn-orange-text: #804000; --badge-btn-orange-glow: none; --badge-btn-pink-bg: #c0c0c0; --badge-btn-pink-border: #808080; --badge-btn-pink-text: #800040; --badge-btn-pink-glow: none; --stat-blue-bg: #c0c0c0; --stat-blue-border: #808080; --stat-blue-shadow: none; --stat-blue-shadow-hover: none; --stat-green-bg: #c0c0c0; --stat-green-border: #808080; --stat-green-shadow: none; --stat-green-shadow-hover: none; --stat-red-bg: #c0c0c0; --stat-red-border: #808080; --stat-red-shadow: none; --stat-red-shadow-hover: none; --kpi-blue-bg: #c0c0c0; --kpi-blue-border: #808080; --kpi-blue-shadow: none; --kpi-blue-shadow-hover: none; --kpi-green-bg: #c0c0c0; --kpi-green-border: #808080; --kpi-green-shadow: none; --kpi-green-shadow-hover: none; --kpi-purple-bg: #c0c0c0; --kpi-purple-border: #808080; --kpi-purple-shadow: none; --kpi-purple-shadow-hover: none; --kpi-red-bg: #c0c0c0; --kpi-red-border: #808080; --kpi-red-shadow: none; --kpi-red-shadow-hover: none; --kpi-yellow-bg: #c0c0c0; --kpi-yellow-border: #808080; --kpi-yellow-shadow: none; --kpi-yellow-shadow-hover: none; /* --- Force all radii to 0 --- */ --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; --radius-2xl: 0; --radius-full: 0; } /* Retro desktop background (Win95 teal) */ [data-theme="retro"] body, [data-theme="retro"] { background-color: #008080; } /* ============================================================= HOMEBREW THEME — Terminal green on dark Sourced from Print OS v4 .homebrew ============================================================= */ [data-theme="homebrew"] { color-scheme: dark; /* --- Glow Tokens (all green) --- */ --glow-purple: #00ff00; --glow-blue: #00cc00; --glow-pink: #00ff00; --glow-yellow: #00cc00; --glow-grey: rgba(0, 255, 0, 0.15); --glow-white: rgba(0, 255, 0, 0.2); --ol-thick: 1px; --ol-med: 1px; --ol-btn: 1px; --glow-soft: 0 0 6px; --glow-med: 0 0 12px; /* --- Core --- */ --bg-primary: #0d1117; --bg-secondary: #0a0e14; --bg-tertiary: #111820; --bg-elevated: #151d27; --bg-card: rgba(0, 255, 0, 0.03); --bg-hover: rgba(0, 255, 0, 0.06); --bg-overlay: #0d1117; --bg-input: rgba(0, 0, 0, 0.6); --bg-accent-subtle: rgba(0, 255, 0, 0.04); /* --- Text (green) --- */ --text-primary: #00ff00; --text-secondary: #00cc00; --text-tertiary: #008800; --text-disabled: #005500; --text-inverse: #000000; /* --- Accent (green) --- */ --accent: #00ff00; --accent-rgb: 0, 255, 0; --accent-hover: #33ff33; --accent-dark: #00aa00; --accent-light: #66ff66; --accent-bg: rgba(0, 255, 0, 0.12); --accent-2: #00cc00; --accent-2-rgb: 0, 204, 0; /* --- Borders --- */ --border-primary: rgba(0, 255, 0, 0.2); --border-secondary: rgba(0, 255, 0, 0.1); --border-input: rgba(0, 255, 0, 0.3); /* --- Shadows --- */ --shadow-sm: 0 0 4px rgba(0, 255, 0, 0.05); --shadow-md: 0 0 8px rgba(0, 255, 0, 0.08); --shadow-lg: 0 0 16px rgba(0, 255, 0, 0.1); --shadow-card: 0 0 8px rgba(0, 255, 0, 0.05); --shadow-accent: 0 0 12px rgba(0, 255, 0, 0.2); --shadow-inset: none; --shadow-hover: 0 0 12px rgba(0, 255, 0, 0.1); --glow-accent-sm: 0 0 4px rgba(0, 255, 0, 0.15); --glow-accent-md: 0 0 8px rgba(0, 255, 0, 0.25); --glow-accent-lg: 0 0 16px rgba(0, 255, 0, 0.35); --glow-accent-xl: 0 0 24px rgba(0, 255, 0, 0.45); --glow-danger: 0 0 8px rgba(255, 0, 0, 0.3); --glow-warning: 0 0 8px rgba(0, 204, 0, 0.3); --glow-info: 0 0 8px rgba(0, 255, 0, 0.3); --glow-success: 0 0 8px rgba(0, 255, 0, 0.3); /* --- Alerts --- */ --alert-success-bg: rgba(0, 255, 0, 0.08); --alert-success-border: rgba(0, 255, 0, 0.3); --alert-success-text: #00ff00; --alert-info-bg: rgba(0, 204, 0, 0.08); --alert-info-border: rgba(0, 204, 0, 0.3); --alert-info-text: #00cc00; --alert-warning-bg: rgba(0, 170, 0, 0.08); --alert-warning-border: rgba(0, 170, 0, 0.3); --alert-warning-text: #00aa00; --alert-error-bg: rgba(255, 0, 0, 0.08); --alert-error-border: rgba(255, 0, 0, 0.3); --alert-error-text: #ff4444; /* --- Buttons --- */ --btn-primary-bg: transparent; --btn-primary-text: #00ff00; --btn-primary-hover: rgba(0, 255, 0, 0.06); --btn-secondary-bg: rgba(0, 0, 0, 0.3); --btn-secondary-text: #00ff00; --btn-secondary-hover: rgba(0, 255, 0, 0.06); --btn-outline-border: rgba(0, 255, 0, 0.4); --btn-outline-text: #00ff00; --btn-ghost-text: #00cc00; --btn-ghost-hover: rgba(0, 255, 0, 0.04); --btn-success-bg: rgba(0, 255, 100, 0.12); --btn-success-text: #00ff64; --btn-danger-bg: rgba(255, 0, 0, 0.12); --btn-danger-text: #ff4444; /* --- Badges (all green variants) --- */ --badge-text-blue: #00cc00; --badge-text-green: #00ff00; --badge-text-red: #ff4444; --badge-text-yellow: #00cc00; --badge-text-purple: #00ff00; --badge-text-pink: #00aa00; --badge-text-orange: #00cc00; --badge-opacity: 0.1; /* --- Tables --- */ --table-bg: transparent; --table-border: rgba(0, 255, 0, 0.2); --table-glow: 0 0 6px rgba(0, 255, 0, 0.05); --table-header-bg: rgba(0, 255, 0, 0.04); --table-row-hover: rgba(0, 255, 0, 0.06); --table-row-border: rgba(0, 255, 0, 0.1); --table-row-glow: none; --table-radius: 0px; /* --- Forms --- */ --input-bg: rgba(0, 0, 0, 0.6); --input-border: rgba(0, 255, 0, 0.3); --input-focus-border: #00ff00; --input-focus-glow: 0 0 8px rgba(0, 255, 0, 0.3), 0 0 16px rgba(0, 255, 0, 0.1); --input-placeholder: #005500; --option-bg: rgba(0, 0, 0, 0.6); --toggle-bg: rgba(0, 255, 0, 0.2); /* --- Navigation --- */ --nav-bg: transparent; --nav-btn-border: rgba(0, 255, 0, 0.2); --nav-btn-glow: 0 0 6px rgba(0, 255, 0, 0.1); --nav-btn-radius: 0px; /* --- Cards --- */ --card-bg: rgba(0, 255, 0, 0.03); --card-border: rgba(0, 255, 0, 0.2); --card-blur: none; --card-shadow: 0 0 8px rgba(0, 255, 0, 0.05); --card-radius: 0px; /* --- Misc --- */ --divider: rgba(0, 255, 0, 0.15); --scrollbar-thumb: rgba(0, 255, 0, 0.3); --scrollbar-track: #0d1117; /* --- Status Colors --- */ --color-success: #00ff00; --color-warning: #00cc00; --color-danger: #ff4444; --color-info: #00ff00; /* --- Status Buttons (green variants) --- */ --status-booked: rgba(0, 255, 0, 0.4); --status-printing: rgba(0, 204, 0, 0.4); --status-packing: rgba(0, 170, 0, 0.4); --status-done: rgba(0, 255, 100, 0.4); /* --- Summary Cells --- */ --summary-red-bg: rgba(0, 255, 0, 0.08); --summary-red-border: rgba(0, 255, 0, 0.3); --summary-red-text: #00ff00; --summary-blue-bg: rgba(0, 204, 0, 0.08); --summary-blue-border: rgba(0, 204, 0, 0.3); --summary-blue-text: #00cc00; --summary-green-bg: rgba(0, 255, 100, 0.08); --summary-green-border: rgba(0, 255, 100, 0.3); --summary-green-text: #00ff64; /* --- Badge/Stat/KPI (green terminal) --- */ --badge-blue-bg: rgba(0,255,0,0.08); --badge-blue-border: rgba(0,255,0,0.2); --badge-blue-shadow: 0 0 4px rgba(0,255,0,0.1); --badge-blue-shadow-hover: 0 0 8px rgba(0,255,0,0.2); --badge-green-bg: rgba(0,255,0,0.08); --badge-green-border: rgba(0,255,0,0.2); --badge-green-shadow: 0 0 4px rgba(0,255,0,0.1); --badge-green-shadow-hover: 0 0 8px rgba(0,255,0,0.2); --badge-red-bg: rgba(255,0,0,0.08); --badge-red-border: rgba(255,0,0,0.2); --badge-red-shadow: 0 0 4px rgba(255,0,0,0.1); --badge-red-shadow-hover: 0 0 8px rgba(255,0,0,0.2); --badge-yellow-bg: rgba(0,204,0,0.08); --badge-yellow-border: rgba(0,204,0,0.2); --badge-yellow-shadow: 0 0 4px rgba(0,204,0,0.1); --badge-yellow-shadow-hover: 0 0 8px rgba(0,204,0,0.2); --badge-purple-bg: rgba(0,255,0,0.08); --badge-purple-border: rgba(0,255,0,0.2); --badge-purple-shadow: 0 0 4px rgba(0,255,0,0.1); --badge-purple-shadow-hover: 0 0 8px rgba(0,255,0,0.2); --badge-pink-bg: rgba(0,170,0,0.08); --badge-pink-border: rgba(0,170,0,0.2); --badge-pink-shadow: 0 0 4px rgba(0,170,0,0.1); --badge-pink-shadow-hover: 0 0 8px rgba(0,170,0,0.2); --badge-btn-primary-bg: rgba(0,255,0,0.08); --badge-btn-primary-border: rgba(0,255,0,0.3); --badge-btn-primary-text: #00ff00; --badge-btn-primary-glow: 0 0 6px rgba(0,255,0,0.2); --badge-btn-success-bg: rgba(0,255,0,0.08); --badge-btn-success-border: rgba(0,255,0,0.3); --badge-btn-success-text: #00ff00; --badge-btn-success-glow: 0 0 6px rgba(0,255,0,0.2); --badge-btn-info-bg: rgba(0,204,0,0.08); --badge-btn-info-border: rgba(0,204,0,0.3); --badge-btn-info-text: #00cc00; --badge-btn-info-glow: 0 0 6px rgba(0,204,0,0.2); --badge-btn-danger-bg: rgba(255,0,0,0.08); --badge-btn-danger-border: rgba(255,0,0,0.3); --badge-btn-danger-text: #ff4444; --badge-btn-danger-glow: 0 0 6px rgba(255,0,0,0.2); --badge-btn-warning-bg: rgba(0,170,0,0.08); --badge-btn-warning-border: rgba(0,170,0,0.3); --badge-btn-warning-text: #00aa00; --badge-btn-warning-glow: 0 0 6px rgba(0,170,0,0.2); --badge-btn-orange-bg: rgba(0,204,0,0.08); --badge-btn-orange-border: rgba(0,204,0,0.3); --badge-btn-orange-text: #00cc00; --badge-btn-orange-glow: 0 0 6px rgba(0,204,0,0.2); --badge-btn-pink-bg: rgba(0,170,0,0.08); --badge-btn-pink-border: rgba(0,170,0,0.3); --badge-btn-pink-text: #00aa00; --badge-btn-pink-glow: 0 0 6px rgba(0,170,0,0.2); --stat-blue-bg: rgba(0,255,0,0.04); --stat-blue-border: rgba(0,255,0,0.15); --stat-blue-shadow: 0 0 6px rgba(0,255,0,0.08); --stat-blue-shadow-hover: 0 0 10px rgba(0,255,0,0.15); --stat-green-bg: rgba(0,255,0,0.04); --stat-green-border: rgba(0,255,0,0.15); --stat-green-shadow: 0 0 6px rgba(0,255,0,0.08); --stat-green-shadow-hover: 0 0 10px rgba(0,255,0,0.15); --stat-red-bg: rgba(255,0,0,0.04); --stat-red-border: rgba(255,0,0,0.15); --stat-red-shadow: 0 0 6px rgba(255,0,0,0.08); --stat-red-shadow-hover: 0 0 10px rgba(255,0,0,0.15); --kpi-blue-bg: rgba(0,204,0,0.06); --kpi-blue-border: rgba(0,204,0,0.2); --kpi-blue-shadow: 0 0 6px rgba(0,204,0,0.1); --kpi-blue-shadow-hover: 0 0 10px rgba(0,204,0,0.2); --kpi-green-bg: rgba(0,255,0,0.06); --kpi-green-border: rgba(0,255,0,0.2); --kpi-green-shadow: 0 0 6px rgba(0,255,0,0.1); --kpi-green-shadow-hover: 0 0 10px rgba(0,255,0,0.2); --kpi-purple-bg: rgba(0,255,0,0.06); --kpi-purple-border: rgba(0,255,0,0.2); --kpi-purple-shadow: 0 0 6px rgba(0,255,0,0.1); --kpi-purple-shadow-hover: 0 0 10px rgba(0,255,0,0.2); --kpi-red-bg: rgba(255,0,0,0.06); --kpi-red-border: rgba(255,0,0,0.2); --kpi-red-shadow: 0 0 6px rgba(255,0,0,0.1); --kpi-red-shadow-hover: 0 0 10px rgba(255,0,0,0.2); --kpi-yellow-bg: rgba(0,204,0,0.06); --kpi-yellow-border: rgba(0,204,0,0.2); --kpi-yellow-shadow: 0 0 6px rgba(0,204,0,0.1); --kpi-yellow-shadow-hover: 0 0 10px rgba(0,204,0,0.2); /* --- Force square corners --- */ --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; --radius-2xl: 0; --radius-full: 0; } /* ============================================================= COLORWAYS — Independent accent color overrides Applied on top of any theme via data-colorway attribute. ============================================================= */ /* Crimson (June brand red) */ [data-colorway="crimson"] { --accent: #c41e3a; --accent-rgb: 196, 30, 58; --accent-hover: #d42c4d; --accent-dark: #9a1830; --accent-light: #e57589; --accent-bg: rgba(196, 30, 58, 0.12); } /* February (Valentine pink) */ [data-colorway="february"] { --accent: #ec4899; --accent-rgb: 236, 72, 153; --accent-hover: #f472b6; --accent-dark: #db2777; --accent-light: #f9a8d4; --accent-bg: rgba(236, 72, 153, 0.12); --accent-2: #f472b6; --accent-2-rgb: 244, 114, 182; } /* March (St Patrick green) */ [data-colorway="march"] { --accent: #22c55e; --accent-rgb: 34, 197, 94; --accent-hover: #4ade80; --accent-dark: #16a34a; --accent-light: #86efac; --accent-bg: rgba(34, 197, 94, 0.12); --accent-2: #4ade80; --accent-2-rgb: 74, 222, 128; } /* July (Patriotic red/blue) */ [data-colorway="july"] { --accent: #ef4444; --accent-rgb: 239, 68, 68; --accent-hover: #f87171; --accent-dark: #dc2626; --accent-light: #fca5a5; --accent-bg: rgba(239, 68, 68, 0.12); --accent-2: #3b82f6; --accent-2-rgb: 59, 130, 246; } /* October (Halloween orange/purple) */ [data-colorway="october"] { --accent: #f97316; --accent-rgb: 249, 115, 22; --accent-hover: #fb923c; --accent-dark: #ea580c; --accent-light: #fdba74; --accent-bg: rgba(249, 115, 22, 0.12); --accent-2: #8a53f9; --accent-2-rgb: 138, 83, 249; } /* December (Christmas red/green) */ [data-colorway="december"] { --accent: #dc2626; --accent-rgb: 220, 38, 38; --accent-hover: #ef4444; --accent-dark: #b91c1c; --accent-light: #fca5a5; --accent-bg: rgba(220, 38, 38, 0.12); --accent-2: #16a34a; --accent-2-rgb: 22, 163, 74; } /* Navy Professional */ [data-colorway="navy"] { --accent: #2563eb; --accent-rgb: 37, 99, 235; --accent-hover: #3b82f6; --accent-dark: #1d4ed8; --accent-light: #93c5fd; --accent-bg: rgba(37, 99, 235, 0.12); } /* Forest Green */ [data-colorway="forest"] { --accent: #16a34a; --accent-rgb: 22, 163, 74; --accent-hover: #22c55e; --accent-dark: #15803d; --accent-light: #86efac; --accent-bg: rgba(22, 163, 74, 0.12); } /* Sunset Orange */ [data-colorway="sunset"] { --accent: #f97316; --accent-rgb: 249, 115, 22; --accent-hover: #fb923c; --accent-dark: #ea580c; --accent-light: #fdba74; --accent-bg: rgba(249, 115, 22, 0.12); } /* Gold */ [data-colorway="gold"] { --accent: #eab308; --accent-rgb: 234, 179, 8; --accent-hover: #facc15; --accent-dark: #ca8a04; --accent-light: #fde047; --accent-bg: rgba(234, 179, 8, 0.12); } /* Rose */ [data-colorway="rose"] { --accent: #e11d48; --accent-rgb: 225, 29, 72; --accent-hover: #fb7185; --accent-dark: #be123c; --accent-light: #fda4af; --accent-bg: rgba(225, 29, 72, 0.12); } /* ===================== AMBIENT GLOW ===================== */ /* Layered radial gradients on body background (Print OS v4 signature). Adapts to colorways via --accent-rgb. Three-point glow for depth. */ [data-theme="black-glass"] body { background: radial-gradient(ellipse at 20% 50%, rgba(var(--accent-rgb), 0.18) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(var(--accent-rgb), 0.12) 0%, transparent 55%), radial-gradient(ellipse at 50% 90%, rgba(var(--accent-rgb), 0.07) 0%, transparent 50%), var(--bg-primary); } /* White glass: subtle accent ambient glow */ [data-theme="white-glass"] body { background: radial-gradient(ellipse at 20% 50%, rgba(var(--accent-rgb), 0.06) 0%, transparent 55%), radial-gradient(ellipse at 80% 20%, rgba(var(--accent-rgb), 0.04) 0%, transparent 50%), var(--bg-primary); } /* Retro + Homebrew: solid bg only, no glow */ [data-theme="retro"] body, [data-theme="homebrew"] body { background: var(--bg-primary); } /* ============================================================= BACKGROUND SYSTEM — Image/Video backgrounds for glass themes Controlled via data-bg-mode attribute on . Both Black Glass and White Glass support bg image/video. ============================================================= */ .theme-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; pointer-events: none; } .theme-bg-image, .theme-bg-video { width: 100%; height: 100%; object-fit: cover; display: none; } .theme-bg-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--theme-overlay); pointer-events: none; } /* Show media based on bg mode */ [data-bg-mode="image"] .theme-bg-image { display: block; } [data-bg-mode="video"] .theme-bg-video { display: block; } [data-bg-mode="solid"] .theme-bg { display: none; }