/* ============================================ MULTI-TENANT THEME SYSTEM ============================================ This file defines CSS variables for both themes: - Špekonaut (RPG fantasy, beige/brown) - Hemoskop (Dark medical/terminal, black/green/red) Usage: Apply class "theme-spekonaut" or "theme-hemoskop" to ============================================ */ /* ============================================ DEFAULT THEME: ŠPEKONAUT ============================================ */ :root, body.theme-spekonaut { /* === TYPOGRAPHY === */ --font-heading: 'Cinzel Decorative', cursive; /* RPG fantasy font for headings */ --font-body: 'Inter', sans-serif; /* Modern sans-serif for body text */ /* === PRIMARY COLORS === */ --color-primary: #8B1538; /* Saddle Brown - nadpisy, tlačítka, důležité texty */ --color-secondary: #D4A574; /* Tan/Sand - sekundární pozadí, boxy */ --color-text-main: #5C4033; /* Dark Coffee - hlavní text, ikony */ --color-bg-light: #E8D5B7; /* Champagne/Béžová - světlé sekce, overlay */ --color-accent: #2C5F2D; /* Sienna - odkazy hover, akcenty */ --color-link: #1B4965; /* Deep Blue - odkazy */ --color-link-hover: #4CAF50; /* Link hover state */ --color-link-visited: #1B4965; /* Visited links */ /* === BACKGROUNDS === */ --bg-image: url('../pics/900.jpg'); --bg-body: #E8D5B7; /* Fallback if image fails */ --bg-main-container: rgba(232, 213, 183, 0.75); --bg-container: rgba(212, 165, 116, 0.3); --bg-stat-box: #E8D5B7; --bg-modal: rgba(232, 213, 183, 0.98); --bg-input: rgba(255, 255, 255, 0.95); --bg-table-row-even: #E8D5B7; --bg-table-row-hover: rgba(212, 165, 116, 0.3); --bg-dropdown: #E8D5B7; --bg-button: #D4A574; --bg-button-hover: #2C5F2D; --bg-button-active: #8B1538; --bg-scrollbar-track: #E8D5B7; --bg-scrollbar-thumb: linear-gradient(180deg, #8B1538, #2C5F2D); /* === BORDERS === */ --border-main: 3px solid #8B1538; --border-secondary: 2px solid #D4A574; --border-input: 2px solid #D4A574; --border-input-focus: 2px solid #8B1538; --border-muted: 1px solid #D4A574; /* === SHADOWS === */ --shadow-main: 0 8px 32px 0 rgba(92, 64, 51, 0.4); --shadow-secondary: 0 4px 15px rgba(92, 64, 51, 0.3); --shadow-button: 0 2px 8px rgba(92, 64, 51, 0.2); --shadow-button-hover: 0 4px 12px rgba(92, 64, 51, 0.4); --shadow-text: 2px 2px 4px rgba(92, 64, 51, 0.3); /* === SPECIAL EFFECTS === */ --golden-gradient: linear-gradient(135deg, rgba(139, 69, 19, 0.4), rgba(212, 165, 116, 0.3), rgba(160, 82, 45, 0.4)); --glass-blur: blur(8px) saturate(120%); /* === STATUS COLORS === */ --color-success: #4CAF50; --color-warning: #FF9800; --color-error: #F44336; --color-info: #2196F3; /* === ADDITIONAL UI COLORS === */ --color-calendar-header: #8B7355; --color-lab-header: #8B7355; } /* ============================================ THEME: HEMOSKOP (Dark Medical/Terminal) ============================================ */ body.theme-hemoskop { /* === TYPOGRAPHY === */ --font-heading: 'Courier New', 'Consolas', monospace; /* Terminal/computer font for headings */ --font-body: 'Courier New', 'Consolas', monospace; /* Terminal/computer font for body text */ /* === PRIMARY COLORS === */ --color-primary: #C51F47; /* Jasná burgundská červená - nadpisy, důležité texty */ --color-secondary: #121A21; /* Velmi tmavá šedo-modrá - sekundární pozadí */ --color-text-main: #b5fcae; /* Světle zelená - hlavní text (terminálový styl) */ --color-bg-light: #121A21; /* Tmavé pozadí pro světlé sekce */ --color-accent: #119a03; /* Tmavá zelená - terminálový akcent */ --color-link: #119a03; /* Zelené odkazy */ --color-link-hover: #4CAF50; /* Světlejší zelená pro hover */ --color-link-visited: #0d7002; /* Tmavší zelená pro visited */ /* === BACKGROUNDS === */ --bg-image: url('../pics/hemoskopbck.png'); --bg-body: #000000; /* Černá - hlavní pozadí */ --bg-main-container: rgba(18, 26, 33, 0.95); --bg-container: rgba(18, 26, 33, 0.7); --bg-stat-box: #121A21; --bg-modal: rgba(18, 26, 33, 0.98); --bg-input: rgba(0, 0, 0, 0.8); --bg-table-row-even: #0a0f14; --bg-table-row-hover: rgba(0, 255, 65, 0.1); --bg-dropdown: #121A21; --bg-button: #121A21; --bg-button-hover: #FF0F3D; --bg-button-active: #00FF41; --bg-scrollbar-track: #121A21; --bg-scrollbar-thumb: linear-gradient(180deg, #C51F47, #119a03); /* === BORDERS === */ --border-main: 3px solid #C51F47; --border-secondary: 2px solid #119a03; --border-input: 2px solid #5C0014; --border-input-focus: 2px solid #119a03; --border-muted: 1px solid #5C0014; /* === SHADOWS === */ --shadow-main: 0 8px 32px 0 rgba(197, 31, 71, 0.4); --shadow-secondary: 0 4px 15px rgba(17, 154, 3, 0.3); --shadow-button: 0 2px 8px rgba(197, 31, 71, 0.3); --shadow-button-hover: 0 4px 12px rgba(197, 31, 71, 0.6); --shadow-text: 2px 2px 4px rgba(0, 0, 0, 0.8); /* === SPECIAL EFFECTS === */ --golden-gradient: linear-gradient(135deg, rgba(197, 31, 71, 0.3), rgba(17, 154, 3, 0.2), rgba(92, 0, 20, 0.4)); --glass-blur: blur(10px) saturate(150%); /* === STATUS COLORS === */ --color-success: #119a03; /* Tmavá zelená */ --color-warning: #FFAA00; /* Oranžová */ --color-error: #C51F47; /* Jasná burgundská červená */ --color-info: #00AAFF; /* Světle modrá */ /* === ADDITIONAL UI COLORS === */ --color-calendar-header: #C51F47; --color-lab-header: #119a03; } /* ============================================ THEME-SPECIFIC ADJUSTMENTS ============================================ */ /* Hemoskop: Text color inversions for better contrast */ body.theme-hemoskop { /* Buttons need light text on dark background */ --color-button-text: #b5fcae; --color-button-text-hover: #000000; --color-button-text-active: #000000; } body.theme-spekonaut { /* Spekonaut: Dark text on light backgrounds */ --color-button-text: #5C4033; --color-button-text-hover: #E8D5B7; --color-button-text-active: #E8D5B7; } /* ============================================ RESPONSIVE FONT SIZES ============================================ */ :root { --font-size-small: 0.9em; --font-size-normal: 1em; --font-size-large: 1.3em; --font-size-xlarge: 2.5em; --font-size-xxlarge: 3.5em; } @media (max-width: 768px) { :root { --font-size-xlarge: 2em; --font-size-xxlarge: 2em; } } /* ============================================ HEMOSKOP: Font Overrides (Terminal Style) ============================================ */ body.theme-hemoskop { font-family: var(--font-body) !important; } body.theme-hemoskop h1, body.theme-hemoskop h2, body.theme-hemoskop h3, body.theme-hemoskop h4, body.theme-hemoskop h5, body.theme-hemoskop h6, body.theme-hemoskop .main-title, body.theme-hemoskop .section-title, body.theme-hemoskop .rpgui-button, body.theme-hemoskop button, body.theme-hemoskop .btn, body.theme-hemoskop .stat-label, body.theme-hemoskop .log-date, body.theme-hemoskop th { font-family: var(--font-heading) !important; } /* ============================================ LOGO POSITIONING ============================================ */ /* Špekonaut: Keep logo at top (original position) */ body.theme-spekonaut .app-logo-container { margin-top: -58px; margin-bottom: 10px; } /* Hemoskop: Move logo down into container */ body.theme-hemoskop .app-logo-container { margin-top: 5px !important; margin-bottom: 30px !important; } /* ============================================ DEV ENVIRONMENT LABEL ============================================ */ /* Show DEV label next to logo in development environment */ body.env-dev .app-logo-container::after { content: 'DEV'; color: #ff0000; font-size: 48px; font-weight: 900; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); letter-spacing: 3px; margin-left: 20px; display: inline-block; vertical-align: middle; position: absolute; right: -120px; top: 50%; transform: translateY(-50%); }