/** * GENELEC Design System v2 * * HOW TO USE: * 1. Load this file AFTER your existing style.css * 2. Add class "v2" to to activate the new design * 3. Migrate pages one by one * * Example: */ /* ========================================================================== 1. DESIGN TOKENS (CSS Variables) ========================================================================== */ :root { /* Primary Colors */ --v2-black: #000000; --v2-bg-primary: #141414; --v2-bg-secondary: #202020; --v2-bg-card: #1a1a1a; --v2-bg-elevated: #252525; /* Grays */ --v2-gray-100: #383838; --v2-gray-200: #626262; --v2-gray-300: #AAAAAA; --v2-gray-400: #B2B2B2; --v2-gray-500: #D2D2D2; --v2-white: #FFFFFF; /* Purple (Secondary/Accent) */ --v2-purple-dark: #3B2170; --v2-purple: #4A298D; --v2-purple-main: #7431FE; --v2-purple-light: #784DD2; --v2-purple-muted: #7F69AD; --v2-purple-pale: #B293E5; --v2-purple-wash: #DDCAFF; /* Status: Active/Success */ --v2-green-dark: #61C200; --v2-green: #95FF00; --v2-green-muted: rgba(97, 194, 0, 0.2); --v2-green-alt: #3DC2BB; /* Status: Warning */ --v2-yellow-dark: #E6B220; --v2-yellow: #FFC300; --v2-yellow-muted: rgba(230, 178, 32, 0.2); /* Status: Error */ --v2-red-dark: #E62020; --v2-red: #D54848; --v2-red-muted: rgba(230, 32, 32, 0.2); /* Additional */ --v2-blue: #2F7DD5; /* Typography */ --v2-font-primary: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif; --v2-font-mono: 'IBM Plex Mono', monospace; /* Spacing */ --v2-space-xs: 4px; --v2-space-sm: 8px; --v2-space-md: 16px; --v2-space-lg: 24px; --v2-space-xl: 32px; --v2-space-2xl: 48px; /* Border Radius */ --v2-radius-sm: 6px; --v2-radius-md: 10px; --v2-radius-lg: 16px; --v2-radius-xl: 20px; /* Shadows */ --v2-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --v2-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --v2-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5); /* Transitions */ --v2-transition-fast: 150ms ease; --v2-transition-base: 250ms ease; --v2-transition-slow: 400ms ease; } /* ========================================================================== 2. BASE OVERRIDES (Only when body.v2 is active) ========================================================================== */ body.v2 { background-color: var(--v2-bg-primary) !important; color: var(--v2-gray-300) !important; font-family: var(--v2-font-primary) !important; } body.v2 h1, body.v2 h2, body.v2 h3, body.v2 h4, body.v2 h5, body.v2 h6 { color: var(--v2-white) !important; font-family: var(--v2-font-primary) !important; } body.v2 p { color: var(--v2-gray-300); } body.v2 a { color: var(--v2-purple-light); } body.v2 a:hover { color: var(--v2-purple-pale); } /* ========================================================================== 3. HEADER ========================================================================== */ body.v2 .header { background-color: var(--v2-bg-primary) !important; border-bottom: 1px solid var(--v2-gray-100) !important; box-shadow: none !important; } body.v2 .header .header-title { color: var(--v2-white) !important; } body.v2 .header .header-icon { color: var(--v2-gray-300) !important; } /* ========================================================================== 4. CARDS & CONTENT BOXES ========================================================================== */ body.v2 .content-box { background-color: var(--v2-bg-card) !important; border: 1px solid var(--v2-gray-100) !important; border-radius: var(--v2-radius-lg) !important; box-shadow: var(--v2-shadow-sm) !important; } /* Card with colored left border (status indicator) */ body.v2 .card-status-active { border-left: 4px solid var(--v2-green-dark) !important; } body.v2 .card-status-warning { border-left: 4px solid var(--v2-yellow-dark) !important; } body.v2 .card-status-error { border-left: 4px solid var(--v2-red-dark) !important; } /* Location/Site Cards (like in design) */ body.v2 .location-card { background: linear-gradient(135deg, var(--v2-bg-card) 0%, var(--v2-bg-secondary) 100%); border: 1px dashed var(--v2-purple-muted); border-radius: var(--v2-radius-lg); padding: var(--v2-space-md); } body.v2 .location-card-active { border-left: 4px solid var(--v2-green-dark); border-left-style: solid; } body.v2 .location-card-warning { border-left: 4px solid var(--v2-yellow-dark); border-left-style: solid; } body.v2 .location-card-error { border-left: 4px solid var(--v2-red-dark); border-left-style: solid; } /* ========================================================================== 5. BUTTONS ========================================================================== */ /* Primary Button (Purple filled) */ body.v2 .btn-v2-primary { background-color: var(--v2-purple-main) !important; color: var(--v2-white) !important; border: none !important; border-radius: var(--v2-radius-md) !important; font-weight: 600 !important; padding: 12px 24px !important; transition: var(--v2-transition-base) !important; } body.v2 .btn-v2-primary:hover { background-color: var(--v2-purple-light) !important; transform: translateY(-1px); } /* Secondary Button (Outline) */ body.v2 .btn-v2-secondary { background-color: transparent !important; color: var(--v2-purple-light) !important; border: 1px solid var(--v2-purple-muted) !important; border-radius: var(--v2-radius-md) !important; font-weight: 500 !important; padding: 12px 24px !important; transition: var(--v2-transition-base) !important; } body.v2 .btn-v2-secondary:hover { background-color: var(--v2-purple-dark) !important; border-color: var(--v2-purple-light) !important; } /* Ghost Button (Dark filled) */ body.v2 .btn-v2-ghost { background-color: var(--v2-gray-100) !important; color: var(--v2-gray-300) !important; border: none !important; border-radius: var(--v2-radius-md) !important; font-weight: 500 !important; padding: 12px 24px !important; transition: var(--v2-transition-base) !important; } body.v2 .btn-v2-ghost:hover { background-color: var(--v2-gray-200) !important; color: var(--v2-white) !important; } /* Action Button (Green) */ body.v2 .btn-v2-action { background-color: var(--v2-green-dark) !important; color: var(--v2-white) !important; border: none !important; border-radius: var(--v2-radius-md) !important; font-weight: 600 !important; padding: 10px 20px !important; } /* Icon Button (Circle) */ body.v2 .btn-v2-icon { width: 40px !important; height: 40px !important; padding: 0 !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background-color: var(--v2-purple-main) !important; color: var(--v2-white) !important; border: none !important; } /* ========================================================================== 6. STATUS INDICATORS ========================================================================== */ body.v2 .status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; } body.v2 .status-active { background-color: var(--v2-green-muted); color: var(--v2-green); } body.v2 .status-active::before { content: ''; width: 8px; height: 8px; background-color: var(--v2-green); border-radius: 50%; } body.v2 .status-warning { background-color: var(--v2-yellow-muted); color: var(--v2-yellow); } body.v2 .status-warning::before { content: ''; width: 8px; height: 8px; background-color: var(--v2-yellow); border-radius: 50%; } body.v2 .status-error { background-color: var(--v2-red-muted); color: var(--v2-red); } body.v2 .status-error::before { content: ''; width: 8px; height: 8px; background-color: var(--v2-red); border-radius: 50%; } /* Shield-style status icons (like in design) */ body.v2 .status-shield { width: 24px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px 4px 50% 50%; } body.v2 .status-shield-success { background-color: var(--v2-green); color: var(--v2-black); } body.v2 .status-shield-warning { background-color: var(--v2-yellow); color: var(--v2-black); } body.v2 .status-shield-error { background-color: var(--v2-red); color: var(--v2-white); } /* ========================================================================== 7. TABLES ========================================================================== */ body.v2 table { width: 100%; border-collapse: collapse; } body.v2 table thead { background-color: var(--v2-bg-secondary); border-bottom: 1px solid var(--v2-gray-100); } body.v2 table th { color: var(--v2-gray-300) !important; font-weight: 500; padding: var(--v2-space-md); text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; } body.v2 table td { padding: var(--v2-space-md); border-bottom: 1px solid var(--v2-gray-100); color: var(--v2-gray-400); } body.v2 table tbody tr:hover { background-color: var(--v2-bg-elevated); } /* ========================================================================== 8. FORMS & INPUTS ========================================================================== */ body.v2 input[type="text"], body.v2 input[type="email"], body.v2 input[type="password"], body.v2 input[type="number"], body.v2 input[type="search"], body.v2 textarea, body.v2 select, body.v2 .form-control { background-color: var(--v2-bg-secondary) !important; border: 1px solid var(--v2-gray-100) !important; border-radius: var(--v2-radius-md) !important; color: var(--v2-white) !important; padding: 12px 16px !important; transition: var(--v2-transition-fast) !important; } body.v2 input:focus, body.v2 textarea:focus, body.v2 select:focus, body.v2 .form-control:focus { border-color: var(--v2-purple-main) !important; outline: none !important; box-shadow: 0 0 0 3px var(--v2-purple-dark) !important; } body.v2 input::placeholder, body.v2 textarea::placeholder { color: var(--v2-gray-200) !important; } body.v2 label { color: var(--v2-gray-300); font-weight: 500; margin-bottom: var(--v2-space-sm); display: block; } /* ========================================================================== 9. FOOTER BAR (Bottom Menu) - Minimal changes, keep functionality ========================================================================== */ body.v2 #footer-bar { background-color: var(--v2-bg-primary) !important; border-top: 1px solid var(--v2-gray-100) !important; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3) !important; } body.v2 #footer-bar a { color: var(--v2-gray-200) !important; } body.v2 #footer-bar a span { opacity: 0.6; } body.v2 #footer-bar a i { color: var(--v2-gray-200); } body.v2 #footer-bar .active-nav, body.v2 #footer-bar .active-nav i, body.v2 #footer-bar .active-nav span { color: var(--v2-purple-main) !important; opacity: 1 !important; } /* Active indicator circle (like in design) */ body.v2 .footer-bar-4 .active-nav::after { background-color: var(--v2-purple-main) !important; border-radius: var(--v2-radius-md) !important; } /* ========================================================================== 10. STAT CARDS (Dashboard widgets) ========================================================================== */ body.v2 .stat-card { background: linear-gradient(135deg, var(--v2-purple-dark) 0%, var(--v2-purple) 100%); border-radius: var(--v2-radius-lg); padding: var(--v2-space-md); text-align: center; } body.v2 .stat-card-value { font-size: 28px; font-weight: 700; color: var(--v2-white); } body.v2 .stat-card-label { font-size: 12px; color: var(--v2-purple-pale); text-transform: uppercase; letter-spacing: 0.5px; } /* ========================================================================== 11. DROPDOWN / SELECT2 OVERRIDES ========================================================================== */ body.v2 .select2-container--default .select2-selection--single { background-color: var(--v2-bg-secondary) !important; border: 1px solid var(--v2-gray-100) !important; border-radius: var(--v2-radius-md) !important; } body.v2 .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--v2-white) !important; } body.v2 .select2-dropdown { background-color: var(--v2-bg-secondary) !important; border: 1px solid var(--v2-gray-100) !important; } body.v2 .select2-results__option { color: var(--v2-gray-300) !important; } body.v2 .select2-results__option--highlighted { background-color: var(--v2-purple-dark) !important; color: var(--v2-white) !important; } /* ========================================================================== 12. TABS & FILTERS ========================================================================== */ body.v2 .tab-v2 { display: inline-flex; background-color: var(--v2-bg-secondary); border-radius: var(--v2-radius-md); padding: 4px; gap: 4px; } body.v2 .tab-v2-item { padding: 8px 16px; border-radius: var(--v2-radius-sm); color: var(--v2-gray-300); cursor: pointer; transition: var(--v2-transition-fast); border: none; background: transparent; } body.v2 .tab-v2-item:hover { color: var(--v2-white); } body.v2 .tab-v2-item.active { background-color: var(--v2-purple-main); color: var(--v2-white); } /* ========================================================================== 13. UTILITY CLASSES ========================================================================== */ /* Text colors */ body.v2 .text-v2-white { color: var(--v2-white) !important; } body.v2 .text-v2-muted { color: var(--v2-gray-300) !important; } body.v2 .text-v2-purple { color: var(--v2-purple-main) !important; } body.v2 .text-v2-green { color: var(--v2-green) !important; } body.v2 .text-v2-yellow { color: var(--v2-yellow) !important; } body.v2 .text-v2-red { color: var(--v2-red) !important; } /* Background colors */ body.v2 .bg-v2-primary { background-color: var(--v2-bg-primary) !important; } body.v2 .bg-v2-secondary { background-color: var(--v2-bg-secondary) !important; } body.v2 .bg-v2-card { background-color: var(--v2-bg-card) !important; } body.v2 .bg-v2-purple { background-color: var(--v2-purple-main) !important; } /* Borders */ body.v2 .border-v2 { border: 1px solid var(--v2-gray-100) !important; } body.v2 .border-v2-dashed { border: 1px dashed var(--v2-purple-muted) !important; } /* Spacing helpers */ body.v2 .p-v2-sm { padding: var(--v2-space-sm) !important; } body.v2 .p-v2-md { padding: var(--v2-space-md) !important; } body.v2 .p-v2-lg { padding: var(--v2-space-lg) !important; } /* Border radius */ body.v2 .rounded-v2 { border-radius: var(--v2-radius-md) !important; } body.v2 .rounded-v2-lg { border-radius: var(--v2-radius-lg) !important; } /* ========================================================================== 14. CIRCUIT PATTERN BACKGROUND (Optional decorative) ========================================================================== */ body.v2 .pattern-circuit { position: relative; } body.v2 .pattern-circuit::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 40%; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0v20M30 40v20M0 30h20M40 30h20M30 30m-3 0a3 3 0 1 0 6 0a3 3 0 1 0-6 0' stroke='%237431FE' stroke-width='0.5' fill='none' opacity='0.15'/%3E%3C/svg%3E"); opacity: 0.3; pointer-events: none; } /* ========================================================================== 15. LOGIN PAGE ========================================================================== */ body.v2 .login-container { min-height: 100vh; width: 100vw; background-color: var(--v2-bg-primary); display: flex; align-items: center; justify-content: center; padding: var(--v2-space-md); position: fixed; top: 0; left: 0; } body.v2 .login-card { background-color: var(--v2-bg-card); border: 1px solid var(--v2-gray-100); border-radius: var(--v2-radius-xl); max-width: 400px; width: 100%; overflow: hidden; } body.v2 .login-header { background: linear-gradient(135deg, var(--v2-purple-dark) 0%, var(--v2-purple) 100%); text-align: center; padding: var(--v2-space-xl) var(--v2-space-lg); } body.v2 .login-header .logo-container { background: var(--v2-white); border-radius: 50%; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--v2-space-md); box-shadow: var(--v2-shadow-md); } body.v2 .login-header .login-title { font-size: 1.4rem; font-weight: 600; color: var(--v2-white) !important; margin: 0; } body.v2 .login-body { padding: var(--v2-space-lg); } /* Login buttons */ body.v2 .login-btn-full { display: flex; align-items: center; justify-content: center; gap: var(--v2-space-sm); width: 100%; padding: 14px var(--v2-space-lg) !important; border-radius: 25px !important; font-weight: 600 !important; text-decoration: none; cursor: pointer; } body.v2 .login-btn-full.btn-v2-action { background: linear-gradient(135deg, var(--v2-green-dark) 0%, var(--v2-green-alt) 100%) !important; } /* Login divider */ body.v2 .login-divider { display: flex; align-items: center; margin: var(--v2-space-lg) 0; color: var(--v2-gray-200); font-size: 14px; } body.v2 .login-divider::before, body.v2 .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--v2-gray-100); } body.v2 .login-divider span { padding: 0 var(--v2-space-md); } /* Login form */ body.v2 .login-form { margin-top: var(--v2-space-lg); padding-top: var(--v2-space-lg); border-top: 1px solid var(--v2-gray-100); } body.v2 .login-form .form-group { margin-bottom: var(--v2-space-md); } body.v2 .login-form .form-group label { display: block; color: var(--v2-gray-300); font-size: 13px; font-weight: 500; margin-bottom: var(--v2-space-xs); } body.v2 .login-form .form-group label .required { color: var(--v2-red); } body.v2 .login-form .form-input { width: 100%; font-size: 16px; } /* Login error states */ body.v2 .login-error-box { background-color: var(--v2-red-muted); color: var(--v2-red); padding: 12px var(--v2-space-md); border-radius: var(--v2-radius-md); margin-bottom: var(--v2-space-md); border-left: 4px solid var(--v2-red); display: flex; align-items: center; gap: var(--v2-space-sm); font-size: 14px; } body.v2 .login-field-error { color: var(--v2-red); font-size: 12px; margin-top: var(--v2-space-xs); display: block; } /* Login remember row */ body.v2 .login-remember-row { display: flex; align-items: center; justify-content: space-between; margin-top: var(--v2-space-lg); } body.v2 .login-checkbox-label { display: flex; align-items: center; gap: var(--v2-space-sm); color: var(--v2-gray-300); font-size: 14px; cursor: pointer; } body.v2 .login-checkbox-label input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--v2-purple-main); padding: 0 !important; } /* Login links */ body.v2 .login-links { margin-top: var(--v2-space-md); padding-top: var(--v2-space-md); border-top: 1px solid var(--v2-gray-100); display: flex; justify-content: space-between; } body.v2 .login-links a { color: var(--v2-gray-300); font-size: 13px; text-decoration: none; transition: var(--v2-transition-fast); } body.v2 .login-links a:hover { color: var(--v2-purple-light); } /* Login mobile styles */ @media (max-width: 480px) { body.v2 .login-container { padding: var(--v2-space-sm); } body.v2 .login-header { padding: var(--v2-space-lg) var(--v2-space-md); } body.v2 .login-header .logo-container { width: 60px; height: 60px; } body.v2 .login-header .login-title { font-size: 1.2rem; } body.v2 .login-body { padding: var(--v2-space-md); } body.v2 .login-remember-row { flex-direction: column; gap: var(--v2-space-md); align-items: stretch; } body.v2 .login-remember-row .btn-v2-primary { width: 100%; justify-content: center; } body.v2 .login-links { flex-direction: column; gap: var(--v2-space-sm); text-align: center; } }