/* ═══════════════════════════════════════════════════════════════ IvesTravels — Shared Theme System All pages import this file. Theme switching via data-theme on ═══════════════════════════════════════════════════════════════ */ /* ── Dark Theme (default) ─────────────────────────────────────── */ :root, [data-theme="dark"] { --bg-primary: #03091e; --bg-secondary: #0d1a45; --bg-card: rgba(255,255,255,0.055); --bg-card-hover: rgba(255,255,255,0.09); --bg-input: rgba(255,255,255,0.07); --bg-nav: rgba(3,9,30,0.96); --bg-sidebar: #060f2a; --bg-modal: #0d1a45; --bg-table-head: rgba(255,255,255,0.06); --bg-table-row: rgba(255,255,255,0.025); --bg-table-hover: rgba(255,255,255,0.06); --text-primary: #ffffff; --text-secondary: rgba(255,255,255,0.68); --text-muted: rgba(255,255,255,0.38); --text-label: rgba(255,255,255,0.45); --text-heading: #ffffff; --text-inverse: #03091e; --border-color: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.18); --divider: rgba(255,255,255,0.07); --accent-blue: #2563eb; --accent-cyan: #08b4d4; --accent-lime: #c8f027; --accent-gold: #f59e0b; --accent-green: #22c55e; --accent-red: #ef4444; --accent-purple: #8b5cf6; --btn-primary-bg: linear-gradient(135deg,#2563eb,#1d4ed8); --btn-primary-text: #ffffff; --btn-ghost-bg: rgba(255,255,255,0.07); --btn-ghost-border: rgba(255,255,255,0.12); --btn-ghost-text: rgba(255,255,255,0.82); --shadow-sm: 0 2px 8px rgba(0,0,0,0.4); --shadow-md: 0 8px 24px rgba(0,0,0,0.5); --shadow-lg: 0 20px 60px rgba(0,0,0,0.6); --scrollbar-track: #060f2a; --scrollbar-thumb: rgba(255,255,255,0.15); } /* ── Blue Theme ───────────────────────────────────────────────── */ [data-theme="blue"] { --bg-primary: #0c2340; --bg-secondary: #143260; --bg-card: rgba(255,255,255,0.07); --bg-card-hover: rgba(255,255,255,0.12); --bg-input: rgba(255,255,255,0.09); --bg-nav: rgba(12,35,64,0.97); --bg-sidebar: #0a1e38; --bg-modal: #143260; --bg-table-head: rgba(255,255,255,0.08); --bg-table-row: rgba(255,255,255,0.03); --bg-table-hover: rgba(255,255,255,0.08); --text-primary: #ffffff; --text-secondary: rgba(255,255,255,0.72); --text-muted: rgba(255,255,255,0.42); --text-label: rgba(255,255,255,0.5); --text-heading: #ffffff; --text-inverse: #0c2340; --border-color: rgba(255,255,255,0.12); --border-strong: rgba(255,255,255,0.22); --divider: rgba(255,255,255,0.08); --accent-blue: #60a5fa; --accent-cyan: #22d3ee; --accent-lime: #a3e635; --accent-gold: #fbbf24; --accent-green: #4ade80; --accent-red: #f87171; --accent-purple: #c084fc; --btn-primary-bg: linear-gradient(135deg,#3b82f6,#2563eb); --btn-primary-text: #ffffff; --btn-ghost-bg: rgba(255,255,255,0.08); --btn-ghost-border: rgba(255,255,255,0.15); --btn-ghost-text: rgba(255,255,255,0.85); --shadow-sm: 0 2px 8px rgba(0,0,0,0.35); --shadow-md: 0 8px 24px rgba(0,0,0,0.45); --shadow-lg: 0 20px 60px rgba(0,0,0,0.55); --scrollbar-track: #0a1e38; --scrollbar-thumb: rgba(255,255,255,0.18); } /* ══════════════════════════════════════════════════════════════ GLOBAL BASE — applies to ALL pages automatically ══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { transition: background-color 0.3s ease; } body { background: var(--bg-primary) !important; color: var(--text-primary) !important; transition: background-color 0.3s ease, color 0.3s ease; } /* Cards */ /* Navigation */ /* Inputs */ input, select, textarea { background: var(--bg-input) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; transition: background 0.3s, color 0.3s, border-color 0.3s; } /* Tables */ /* Sidebars */ /* Tab bars */ /* Modals */ /* Labels and muted text */ /* Login cards — always white bg with dark text */ [data-theme="blue"] .card { background: var(--bg-modal) !important; } /* Scrollbars */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; } /* ══════════════════════════════════════════════════════════════ INNER PAGE NAV — my-tickets, booking, seat-booking etc. These pages use a simpler nav without the full IvesTravels nav ══════════════════════════════════════════════════════════════ */ .ivt-inner-nav { background: #03091e; border-bottom: 1px solid rgba(255,255,255,0.08); transition: background 0.3s, border-color 0.3s; } .ivt-inner-logo { font-size: 1.1rem; font-weight: 700; color: #ffffff; transition: color 0.3s; } .ivt-inner-navbtn { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.8); padding: 5px 12px; border-radius: 8px; font-size: .8rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; } .ivt-inner-navbtn:hover { background: rgba(255,255,255,0.15); } .ivt-nav-username { font-size: .85rem; font-weight: 700; color: #08b4d4; /* cyan — visible on all dark themes */ margin: 0; transition: color 0.3s; } .ivt-nav-subrole { font-size: .7rem; color: rgba(255,255,255,0.45); margin: 0; transition: color 0.3s; } .ivt-inner-homelink { font-size: .85rem; color: rgba(255,255,255,0.65); text-decoration: none; transition: color 0.2s; } .ivt-inner-homelink:hover { color: #fff; } /* Blue theme — inner nav */ [data-theme="blue"] .ivt-inner-nav { background: rgba(12,35,64,0.97) !important; border-color: rgba(255,255,255,0.12) !important; } [data-theme="blue"] .ivt-nav-username { color: #22d3ee !important; } /* ══════════════════════════════════════════════════════════════ NAV THEME PICKER — sits inside every page's nav bar ══════════════════════════════════════════════════════════════ */ /* Hide the old floating widget injected by theme.js */ #ivt-theme-switcher { display: none !important; } /* Nav Theme button */ .ivt-theme-nav-wrap { position: relative; } .ivt-theme-nav-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 8px; background: var(--btn-ghost-bg); border: 1px solid var(--btn-ghost-border); color: var(--btn-ghost-text); font-size: 0.78rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.2s, border-color 0.2s, color 0.2s; font-family: inherit; } .ivt-theme-nav-btn:hover { background: var(--bg-card-hover); border-color: var(--border-strong); } /* Dropdown — default right-aligned (for right-side buttons) */ .ivt-theme-nav-panel { display: none; position: absolute; top: calc(100% + 8px); left: 0; /* left-align when near logo */ background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 8px; box-shadow: var(--shadow-lg); z-index: 99999; min-width: 130px; flex-direction: column; gap: 4px; } .ivt-theme-nav-panel.open { display: flex; } .ivt-tnp-opt { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-primary); cursor: pointer; font-size: 0.79rem; font-weight: 600; white-space: nowrap; transition: background 0.15s, border-color 0.15s; font-family: inherit; text-align: left; width: 100%; } .ivt-tnp-opt:hover { background: var(--bg-card-hover); border-color: var(--border-strong); } .ivt-tnp-opt.active { border-color: var(--accent-cyan); background: rgba(8,180,212,0.12); } .ivt-tdot { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; } /* Inner-page (my-tickets, booking etc.) theme button — same style */ .ivt-inner-theme-wrap { position: relative; } .ivt-inner-theme-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 8px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.82); font-size: 0.77rem; font-weight: 600; cursor: pointer; transition: background 0.2s; font-family: inherit; } .ivt-inner-theme-btn:hover { background: rgba(255,255,255,0.14); }