/** * GreenWise Global Theme System * Supports both dark (default) and light modes * * Usage: * 1. Include this CSS in before other stylesheets * 2. Use var(--variable-name) in your styles instead of hardcoded colors * 3. Theme is controlled via data-theme="light" or data-theme="dark" on element */ /* ============================================================ CSS VARIABLES - DARK THEME (Default) ============================================================ */ :root, [data-theme="dark"] { /* Background colors */ --bg-body: linear-gradient(135deg, #0f1419 0%, #1a2332 100%); --bg-primary: #111827; --bg-secondary: #1f2937; --bg-tertiary: #374151; --bg-card: rgba(31, 41, 55, 0.95); --bg-card-solid: #1f2937; --bg-input: rgba(17, 24, 39, 0.5); --bg-hover: rgba(55, 65, 81, 0.5); --bg-overlay: rgba(0, 0, 0, 0.5); --bg-nav-item: rgba(255, 255, 255, 0.05); --bg-nav-hover: rgba(255, 255, 255, 0.1); /* Text colors */ --text-primary: #ffffff; --text-secondary: #e5e7eb; --text-muted: #9ca3af; --text-placeholder: #6b7280; /* Border colors */ --border-primary: rgba(75, 85, 99, 0.3); --border-secondary: rgba(75, 85, 99, 0.5); --border-nav: rgba(255, 255, 255, 0.1); --border-focus: #3b82f6; /* Accent colors (same in both themes) */ --accent-blue: #3b82f6; --accent-green: #10b981; --accent-green-light: #4ade80; --accent-red: #ef4444; --accent-yellow: #f59e0b; --accent-purple: #8b5cf6; --accent-cyan: #06b6d4; /* Status colors */ --status-success: #10b981; --status-warning: #f59e0b; --status-error: #ef4444; --status-info: #3b82f6; /* Button colors */ --btn-primary-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --btn-secondary-bg: rgba(156, 163, 175, 0.1); --btn-danger-bg: rgba(248, 113, 113, 0.2); --btn-danger-color: #f87171; --btn-danger-border: rgba(248, 113, 113, 0.3); /* Shadow */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5); --shadow-header: 0 4px 20px rgba(0, 0, 0, 0.3); /* Backdrop */ --backdrop-blur: blur(20px); /* Scrollbar */ --scrollbar-track: #1f2937; --scrollbar-thumb: #4b5563; --scrollbar-thumb-hover: #6b7280; /* Kanban specific */ --kanban-column-bg: rgba(17, 24, 39, 0.6); --kanban-card-bg: rgba(31, 41, 55, 0.95); --kanban-card-border: rgba(75, 85, 99, 0.3); /* Favorite star */ --favorite-star-bg: rgba(31, 41, 55, 0.8); --favorite-star-border: rgba(255, 255, 255, 0.1); --favorite-star-hover-bg: rgba(31, 41, 55, 0.95); /* ITB badge */ --itb-badge-bg: rgba(168, 85, 247, 0.2); --itb-badge-color: #c084fc; --itb-badge-border: rgba(168, 85, 247, 0.3); } /* ============================================================ CSS VARIABLES - LIGHT THEME ============================================================ */ [data-theme="light"] { /* Background colors */ --bg-body: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%); --bg-primary: #f9fafb; --bg-secondary: #ffffff; --bg-tertiary: #f3f4f6; --bg-card: rgba(255, 255, 255, 0.95); --bg-card-solid: #ffffff; --bg-input: rgba(243, 244, 246, 0.8); --bg-hover: rgba(229, 231, 235, 0.5); --bg-overlay: rgba(0, 0, 0, 0.3); --bg-nav-item: rgba(0, 0, 0, 0.05); --bg-nav-hover: rgba(0, 0, 0, 0.1); /* Text colors */ --text-primary: #111827; --text-secondary: #374151; --text-muted: #6b7280; --text-placeholder: #9ca3af; /* Border colors */ --border-primary: rgba(209, 213, 219, 0.5); --border-secondary: rgba(209, 213, 219, 0.8); --border-nav: rgba(0, 0, 0, 0.1); --border-focus: #3b82f6; /* Button colors - adjusted for light theme */ --btn-secondary-bg: rgba(107, 114, 128, 0.1); --btn-danger-bg: rgba(239, 68, 68, 0.1); --btn-danger-color: #dc2626; --btn-danger-border: rgba(239, 68, 68, 0.3); /* Shadow - softer for light theme */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15); --shadow-header: 0 4px 20px rgba(0, 0, 0, 0.1); /* Backdrop - less blur for light theme */ --backdrop-blur: blur(10px); /* Scrollbar */ --scrollbar-track: #f3f4f6; --scrollbar-thumb: #d1d5db; --scrollbar-thumb-hover: #9ca3af; /* Kanban specific */ --kanban-column-bg: rgba(243, 244, 246, 0.8); --kanban-card-bg: rgba(255, 255, 255, 0.95); --kanban-card-border: rgba(209, 213, 219, 0.5); /* Favorite star */ --favorite-star-bg: rgba(229, 231, 235, 0.9); --favorite-star-border: rgba(156, 163, 175, 0.3); --favorite-star-hover-bg: rgba(209, 213, 219, 0.95); /* ITB badge */ --itb-badge-bg: rgba(147, 51, 234, 0.15); --itb-badge-color: #7c3aed; --itb-badge-border: rgba(147, 51, 234, 0.4); } /* ============================================================ LOGO VISIBILITY FIX Logo has white text - needs dark background in light mode ============================================================ */ /* Logo container styling - add dark pill background in light mode */ [data-theme="light"] .gh-header a[href="/portal.html"] { background: linear-gradient(135deg, #1a2332 0%, #0f1419 100%) !important; padding: 0.5rem 1rem !important; border-radius: 10px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important; } /* Target the logo image specifically */ [data-theme="light"] .gh-header img[src="/Greenwise-Logo.png"], [data-theme="light"] .gh-header img[src*="Greenwise-Logo"], [data-theme="light"] .gh-header img[alt="GreenWise Logo"] { background: linear-gradient(135deg, #1a2332 0%, #0f1419 100%) !important; padding: 0.5rem 1rem !important; border-radius: 10px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important; } /* ============================================================ BASE ELEMENT STYLES ============================================================ */ /* Scrollbar styling */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }