/* ============================================ Virkisskipan Themes Switch via data-theme attribute on ============================================ */ /* ---- Theme: Dark ---- */ [data-theme="dark"] { --bg-body: #0f1117; --bg-sidebar: #1a1d28; --bg-card: #1e2130; --bg-main: linear-gradient(135deg, #12141d 0%, #181b27 50%, #1a1d28 100%); --bg-topbar: transparent; --bg-hover: linear-gradient(to right, rgba(99,132,255,0.12), transparent); --bg-active: linear-gradient(to right, rgba(99,132,255,0.2), transparent); --bg-login: linear-gradient(135deg, #12141d 0%, #1e2130 100%); --text-primary: #e4e6f0; --text-secondary: #8b8fa4; --text-heading: #f0f1f7; --text-menu: #c4c7d8; --border-color: #2a2e3e; --accent: #6384ff; --accent-hover: #8aa4ff; --accent-red: #ff5a5a; --shadow-card: 0 4px 24px rgba(0,0,0,0.4); --shadow-login: 0 20px 60px rgba(0,0,0,0.6); --input-bg: #252838; --input-border: #3a3e52; --table-stripe: rgba(99,132,255,0.04); --table-header: #252838; --btn-primary: #6384ff; --btn-primary-hover: #4a6aee; --logout-bg: #6384ff; --logout-hover: #ff5a5a; } [data-theme="dark"] body { background: var(--bg-body); color: var(--text-primary); } [data-theme="dark"] a { color: var(--accent); } [data-theme="dark"] a:hover { color: var(--accent-red); } [data-theme="dark"] .sidebar { background: var(--bg-sidebar); border-right-color: var(--border-color); } [data-theme="dark"] .sidebar-logo { border-bottom-color: var(--border-color); } [data-theme="dark"] .logo-tg { color: var(--accent-red); } [data-theme="dark"] .logo-text { color: var(--accent); } [data-theme="dark"] .menu-item, [data-theme="dark"] .menu-heading { color: var(--text-menu); } [data-theme="dark"] .menu-item:hover, [data-theme="dark"] .menu-heading:hover { background: var(--bg-hover); color: var(--accent); } [data-theme="dark"] .menu-item.active { background: var(--bg-active); color: var(--accent); } [data-theme="dark"] .menu-icon { color: var(--accent); } [data-theme="dark"] .menu-heading .chevron { color: var(--text-secondary); } [data-theme="dark"] .main-content { background: var(--bg-main); } [data-theme="dark"] .content-card { background: var(--bg-card); box-shadow: var(--shadow-card); } [data-theme="dark"] .topbar-user { color: var(--text-secondary); } [data-theme="dark"] .btn-toggle-sidebar { color: var(--accent); } [data-theme="dark"] .btn-logout { background: var(--logout-bg); } [data-theme="dark"] .btn-logout:hover { background: var(--logout-hover); } [data-theme="dark"] .app-footer { color: var(--text-secondary); } [data-theme="dark"] .login-wrapper { background: var(--bg-login); } [data-theme="dark"] .login-card { background: var(--bg-card); box-shadow: var(--shadow-login); } [data-theme="dark"] .login-card h2 { color: var(--accent); } [data-theme="dark"] .login-card .subtitle { color: var(--text-secondary); } [data-theme="dark"] .login-card .form-control { background: var(--input-bg); border-color: var(--input-border); color: var(--text-primary); } [data-theme="dark"] .login-card .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,132,255,0.15); } [data-theme="dark"] .login-card .btn-login { background: var(--btn-primary); } [data-theme="dark"] .login-card .btn-login:hover { background: var(--btn-primary-hover); } [data-theme="dark"] .login-card .form-check-label { color: var(--text-secondary); } [data-theme="dark"] .login-card .form-label { color: var(--text-secondary); } [data-theme="dark"] .table { color: var(--text-primary); } [data-theme="dark"] .table > thead { background: var(--table-header); } [data-theme="dark"] .table > thead th { color: var(--text-secondary); border-bottom-color: var(--border-color); } [data-theme="dark"] .table > tbody > tr { border-bottom-color: var(--border-color); } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background: var(--table-stripe); } [data-theme="dark"] .table-dark { background: var(--accent) !important; } [data-theme="dark"] .table > tfoot td { border-top-color: var(--border-color); } [data-theme="dark"] .btn-primary { background: var(--btn-primary); border-color: var(--btn-primary); } [data-theme="dark"] .btn-primary:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); } [data-theme="dark"] .btn-outline-secondary { color: var(--text-secondary); border-color: var(--border-color); } [data-theme="dark"] .btn-outline-secondary:hover { background: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .btn-success { background: #34d399; border-color: #34d399; } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background: var(--input-bg); border-color: var(--input-border); color: var(--text-primary); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background: var(--input-bg); border-color: var(--accent); color: var(--text-primary); box-shadow: 0 0 0 3px rgba(99,132,255,0.15); } [data-theme="dark"] .form-label { color: var(--text-secondary); } [data-theme="dark"] .form-check-input { background-color: var(--input-bg); border-color: var(--input-border); } [data-theme="dark"] .card { background: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] .alert-info { background: rgba(99,132,255,0.1); border-color: var(--border-color); color: var(--accent); } [data-theme="dark"] .alert-warning { background: rgba(255,180,50,0.1); border-color: var(--border-color); color: #ffb432; } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5 { color: var(--text-heading); } [data-theme="dark"] .text-muted { color: var(--text-secondary) !important; } [data-theme="dark"] .users-table th { background: var(--table-header); color: var(--text-secondary); } [data-theme="dark"] .lang-flag.active { background: rgba(99,132,255,0.15); } [data-theme="dark"] .dash-stock { background: linear-gradient(135deg, #2a3f6f 0%, #4a6aee 100%); } [data-theme="dark"] .dash-production { background: linear-gradient(135deg, #1a5c3a 0%, #34d399 100%); } [data-theme="dark"] .dash-landings { background: linear-gradient(135deg, #1a4a5c 0%, #38bdf8 100%); } [data-theme="dark"] .dash-containers { background: linear-gradient(135deg, #6b3a0a 0%, #f59e0b 100%); } [data-theme="dark"] .dash-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.4); } [data-theme="dark"] h1 { color: var(--text-heading); } [data-theme="dark"] h3 { color: var(--text-heading); } [data-theme="dark"] .btn-primary { box-shadow: 0 2px 6px rgba(99,132,255,0.3); } [data-theme="dark"] .btn-primary:hover { box-shadow: 0 4px 12px rgba(99,132,255,0.4); } [data-theme="dark"] .table > thead > tr > th { background: var(--table-header); color: var(--text-secondary); border-bottom-color: var(--border-color); } /* ---- Theme: Ocean ---- */ [data-theme="ocean"] { --bg-sidebar: linear-gradient(180deg, #0c2d48 0%, #145374 100%); --bg-main: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 40%, #e0f2f1 100%); --bg-card: #ffffff; --accent: #00838f; --accent-hover: #006064; --accent-light: #e0f7fa; --accent-red: #ef5350; --text-sidebar: #b2dfdb; --text-sidebar-active: #ffffff; --border-sidebar: rgba(255,255,255,0.1); --shadow-card: 0 2px 12px rgba(0,131,143,0.08); } [data-theme="ocean"] a { color: var(--accent); } [data-theme="ocean"] a:hover { color: var(--accent-red); } [data-theme="ocean"] .sidebar { background: var(--bg-sidebar); border-right: none; box-shadow: 4px 0 20px rgba(0,0,0,0.15); } [data-theme="ocean"] .sidebar-logo { border-bottom-color: var(--border-sidebar); } [data-theme="ocean"] .logo-tg { color: #ff8a65; } [data-theme="ocean"] .logo-text { color: #ffffff; } [data-theme="ocean"] .menu-item, [data-theme="ocean"] .menu-heading { color: var(--text-sidebar); } [data-theme="ocean"] .menu-item:hover, [data-theme="ocean"] .menu-heading:hover { background: linear-gradient(to right, rgba(255,255,255,0.1), transparent); color: #fff; } [data-theme="ocean"] .menu-item.active { background: linear-gradient(to right, rgba(255,255,255,0.18), transparent); color: #fff; font-weight: 600; } [data-theme="ocean"] .menu-icon { color: #4dd0e1; } [data-theme="ocean"] .menu-heading .chevron { color: rgba(255,255,255,0.35); } [data-theme="ocean"] .main-content { background: var(--bg-main); } [data-theme="ocean"] .content-card { box-shadow: var(--shadow-card); } [data-theme="ocean"] .btn-toggle-sidebar { color: var(--accent); } [data-theme="ocean"] .btn-logout { background: var(--accent); } [data-theme="ocean"] .btn-logout:hover { background: var(--accent-red); } [data-theme="ocean"] .login-wrapper { background: linear-gradient(135deg, #0c2d48 0%, #145374 50%, #2e8b8b 100%); } [data-theme="ocean"] .login-card h2 { color: var(--accent); } [data-theme="ocean"] .login-card .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,131,143,0.12); } [data-theme="ocean"] .login-card .btn-login { background: var(--accent); } [data-theme="ocean"] .login-card .btn-login:hover { background: var(--accent-hover); } [data-theme="ocean"] .btn-primary { background: var(--accent); border-color: var(--accent); } [data-theme="ocean"] .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } [data-theme="ocean"] .table-dark { background: var(--accent) !important; } [data-theme="ocean"] .lang-flag.active { background: rgba(0,131,143,0.12); } [data-theme="ocean"] .dash-stock { background: linear-gradient(135deg, #0c2d48 0%, #145374 100%); } [data-theme="ocean"] .dash-production { background: linear-gradient(135deg, #004d40 0%, #00897b 100%); } [data-theme="ocean"] .dash-landings { background: linear-gradient(135deg, #01579b 0%, #0288d1 100%); } [data-theme="ocean"] .dash-containers { background: linear-gradient(135deg, #bf360c 0%, #e64a19 100%); } [data-theme="ocean"] h1 { color: var(--accent); } [data-theme="ocean"] .table > thead > tr > th { background: #e0f7fa; color: #00697a; } /* ---- Theme: Nordic ---- */ [data-theme="nordic"] { --bg-sidebar: #faf9f7; --bg-main: linear-gradient(135deg, #f5f0eb 0%, #ede7df 50%, #e8e0d6 100%); --accent: #8b6f47; --accent-hover: #6d5635; --accent-light: #f5f0eb; --accent-red: #b85c38; --text-primary: #3d3225; --text-secondary: #8a7e72; --border-color: #ddd5ca; } [data-theme="nordic"] body { color: var(--text-primary); } [data-theme="nordic"] a { color: var(--accent); } [data-theme="nordic"] a:hover { color: var(--accent-red); } [data-theme="nordic"] .sidebar { background: var(--bg-sidebar); border-right-color: var(--border-color); } [data-theme="nordic"] .sidebar-logo { border-bottom-color: var(--border-color); } [data-theme="nordic"] .logo-tg { color: var(--accent-red); } [data-theme="nordic"] .logo-text { color: var(--accent); } [data-theme="nordic"] .menu-item, [data-theme="nordic"] .menu-heading { color: var(--text-primary); } [data-theme="nordic"] .menu-item:hover, [data-theme="nordic"] .menu-heading:hover { background: linear-gradient(to right, #ede7df, var(--bg-sidebar)); color: var(--accent); } [data-theme="nordic"] .menu-item.active { background: linear-gradient(to right, #ddd5ca, var(--bg-sidebar)); color: var(--accent); } [data-theme="nordic"] .menu-icon { color: var(--accent); } [data-theme="nordic"] .menu-heading .chevron { color: var(--text-secondary); } [data-theme="nordic"] .main-content { background: var(--bg-main); } [data-theme="nordic"] .content-card { box-shadow: 0 1px 8px rgba(139,111,71,0.06); } [data-theme="nordic"] .btn-toggle-sidebar { color: var(--accent); } [data-theme="nordic"] .topbar-user { color: var(--text-secondary); } [data-theme="nordic"] .btn-logout { background: var(--accent); } [data-theme="nordic"] .btn-logout:hover { background: var(--accent-red); } [data-theme="nordic"] .app-footer { color: var(--text-secondary); } [data-theme="nordic"] .login-wrapper { background: linear-gradient(135deg, #8b6f47 0%, #6d5635 100%); } [data-theme="nordic"] .login-card h2 { color: var(--accent); } [data-theme="nordic"] .login-card .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(139,111,71,0.1); } [data-theme="nordic"] .login-card .btn-login { background: var(--accent); } [data-theme="nordic"] .login-card .btn-login:hover { background: var(--accent-hover); } [data-theme="nordic"] .btn-primary { background: var(--accent); border-color: var(--accent); } [data-theme="nordic"] .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } [data-theme="nordic"] .table-dark { background: var(--accent) !important; } [data-theme="nordic"] .users-table th { background: var(--accent-light); color: var(--text-secondary); } [data-theme="nordic"] .lang-flag.active { background: rgba(139,111,71,0.1); } [data-theme="nordic"] .dash-stock { background: linear-gradient(135deg, #5d4e37 0%, #8b6f47 100%); } [data-theme="nordic"] .dash-production { background: linear-gradient(135deg, #2e5f3f 0%, #4a8c5e 100%); } [data-theme="nordic"] .dash-landings { background: linear-gradient(135deg, #4a6072 0%, #6b8a9e 100%); } [data-theme="nordic"] .dash-containers { background: linear-gradient(135deg, #8b4513 0%, #b85c38 100%); } [data-theme="nordic"] h1 { color: var(--accent); } [data-theme="nordic"] .table > thead > tr > th { background: var(--accent-light); color: var(--text-secondary); } /* ---- Theme switcher button ---- */ .theme-switcher { position: relative; display: inline-block; } .theme-switcher-btn { background: none; border: 1px solid rgba(128,128,128,0.3); border-radius: 8px; padding: 5px 10px; cursor: pointer; font-size: 1.1em; line-height: 1; transition: all 0.2s; } .theme-switcher-btn:hover { background: rgba(128,128,128,0.1); transform: scale(1.1); } .theme-menu { display: none; position: absolute; right: 0; top: 100%; margin-top: 6px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.15); padding: 8px; z-index: 999; min-width: 160px; } .theme-menu.show { display: block; } .theme-menu-item { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 0.88em; color: #3c3c3c; border: none; background: none; width: 100%; text-align: left; transition: background 0.15s; } .theme-menu-item:hover { background: #f3f4f6; } .theme-menu-item.active { background: #e8f0fe; font-weight: 600; } .theme-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.1); flex-shrink: 0; } [data-theme="dark"] .theme-menu { background: #1e2130; border-color: #2a2e3e; } [data-theme="dark"] .theme-menu-item { color: #c4c7d8; } [data-theme="dark"] .theme-menu-item:hover { background: #252838; } [data-theme="dark"] .theme-menu-item.active { background: rgba(99,132,255,0.15); }