/* ============================================================ ASMeteo — Shared public page styles CSS custom properties drive dark (default) and light themes. Theme is toggled via data-theme="light" on . ============================================================ */ /* ── Dark theme tokens (default) ─────────────────────────── */ :root { --pub-body-bg: #070d1f; --pub-card-bg: rgba(15, 25, 50, 0.72); --pub-card-border: rgba(255, 255, 255, 0.13); --pub-card-shadow: 0 24px 64px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.05); --pub-card-color: #e2e8f0; --pub-card-radius: 20px; --pub-focus-ring: rgba(125, 211, 252, 0.18); --pub-header-bg: linear-gradient(135deg, rgba(14,165,233,0.18) 0%, rgba(99,102,241,0.14) 100%); --pub-header-border: rgba(255, 255, 255, 0.10); --pub-footer-bg: rgba(0, 0, 0, 0.18); --pub-footer-border: rgba(255, 255, 255, 0.08); --pub-title-color: #f1f5f9; --pub-muted-color: rgba(255, 255, 255, 0.50); --pub-accent-color: #7dd3fc; --pub-accent-hover: #38bdf8; --pub-graph-bold: #e2e8f0; --pub-graph-italic: rgba(255, 255, 255, 0.55); --pub-graph-title: #f1f5f9; --pub-pill-bg: rgba(255, 255, 255, 0.07); --pub-pill-color: rgba(255, 255, 255, 0.55); --pub-pill-active-bg: rgba(14, 165, 233, 0.30); --pub-pill-active-color: #7dd3fc; --pub-pill-hover-bg: rgba(255, 255, 255, 0.10); --pub-pill-hover-color: #ffffff; --pub-summary-panel-bg: rgba(10, 20, 45, 0.65); --pub-summary-panel-border: rgba(255, 255, 255, 0.10); --pub-summary-card-bg: rgba(10, 20, 50, 0.60); --pub-accordion-bg: rgba(10, 18, 40, 0.70); --pub-accordion-border: rgba(255, 255, 255, 0.08); --pub-accordion-btn-bg: rgba(14, 165, 233, 0.10); --pub-accordion-btn-color: #e2e8f0; --pub-accordion-body-bg: rgba(8, 15, 35, 0.55); --pub-accordion-chevron: brightness(0) invert(0.8); --pub-form-bg: rgba(10, 20, 50, 0.60); --pub-form-bg-solid: #0a1432; --pub-form-border: rgba(255, 255, 255, 0.14); --pub-form-color: #e2e8f0; --pub-form-placeholder: rgba(255, 255, 255, 0.30); --pub-label-color: rgba(255, 255, 255, 0.70); --pub-table-color: #e2e8f0; --pub-table-th-bg: rgba(0, 0, 0, 0.35); --pub-table-th-color: #94a3b8; --pub-table-border: rgba(255, 255, 255, 0.07); --pub-table-td-border: rgba(255, 255, 255, 0.05); --pub-table-hover-bg: rgba(255, 255, 255, 0.06); --pub-table-hover-color: #e2e8f0; --pub-table-link: #7dd3fc; --pub-table-link-hover: #38bdf8; --pub-offcanvas-bg: rgba(8, 15, 35, 0.96); --pub-offcanvas-border: rgba(255, 255, 255, 0.10); --pub-stats-bg: rgba(10, 20, 45, 0.50); --pub-stats-border: rgba(255, 255, 255, 0.08); --pub-alert-danger-bg: rgba(185, 28, 28, 0.25); --pub-alert-danger-border: rgba(239, 68, 68, 0.40); --pub-alert-danger-color: #fca5a5; --pub-btn-primary-bg: linear-gradient(135deg, #0ea5e9, #2563eb); --pub-btn-primary-hover: linear-gradient(135deg, #38bdf8, #3b82f6); --pub-btn-primary-shadow: rgba(14, 165, 233, 0.35); --pub-breadcrumb-link: #7dd3fc; --pub-breadcrumb-active: rgba(255, 255, 255, 0.45); --pub-breadcrumb-sep: rgba(255, 255, 255, 0.25); } /* ── Light theme token overrides ─────────────────────────── */ :is([data-theme="light"], body.light-mode) { --pub-body-bg: #f0f5fb; --pub-card-bg: rgba(255, 255, 255, 0.92); --pub-card-border: rgba(100, 116, 139, 0.40); --pub-card-shadow: 0 8px 32px rgba(15,23,42,0.10), 0 1px 4px rgba(0,0,0,0.06); --pub-card-color: #1e293b; --pub-header-bg: linear-gradient(135deg, rgba(224,242,254,0.95) 0%, rgba(219,234,254,0.90) 100%); --pub-header-border: rgba(148, 163, 184, 0.25); --pub-footer-bg: rgba(241, 245, 249, 0.95); --pub-footer-border: rgba(148, 163, 184, 0.20); --pub-title-color: #0f172a; --pub-muted-color: #64748b; --pub-accent-color: #0369a1; --pub-accent-hover: #0284c7; --pub-graph-bold: #1e293b; --pub-graph-italic: #475569; --pub-graph-title: #0f172a; --pub-pill-bg: #e2e8f0; --pub-pill-color: #475569; --pub-pill-active-bg: #0ea5e9; --pub-pill-active-color: #ffffff; --pub-pill-hover-bg: rgba(14, 165, 233, 0.12); --pub-pill-hover-color: #0369a1; --pub-summary-panel-bg: rgba(255, 255, 255, 0.95); --pub-summary-panel-border: rgba(148, 163, 184, 0.25); --pub-summary-card-bg: #f8fafc; --pub-accordion-bg: rgba(255, 255, 255, 0.96); --pub-accordion-border: rgba(148, 163, 184, 0.20); --pub-accordion-btn-bg: rgba(241, 245, 249, 0.95); --pub-accordion-btn-color: #1e293b; --pub-accordion-body-bg: rgba(248, 250, 252, 0.95); --pub-accordion-chevron: none; --pub-form-bg: rgba(255, 255, 255, 0.95); --pub-form-bg-solid: #ffffff; --pub-form-border: rgba(148, 163, 184, 0.40); --pub-form-color: #1e293b; --pub-form-placeholder: #94a3b8; --pub-label-color: #334155; --pub-table-color: #1e293b; --pub-table-th-bg: rgba(241, 245, 249, 0.95); --pub-table-th-color: #475569; --pub-table-border: rgba(148, 163, 184, 0.25); --pub-table-td-border: rgba(148, 163, 184, 0.15); /* Match the summary leaderboard hover on light theme for visual consistency */ --pub-table-hover-bg: #e0e3e5; --pub-table-hover-color: #0f172a; --pub-table-link: #0369a1; --pub-table-link-hover: #0284c7; --pub-offcanvas-bg: rgba(248, 250, 252, 0.98); --pub-offcanvas-border: rgba(148, 163, 184, 0.30); --pub-stats-bg: rgba(241, 245, 249, 0.95); --pub-stats-border: rgba(148, 163, 184, 0.20); --pub-alert-danger-bg: rgba(254, 242, 242, 0.95); --pub-alert-danger-border: rgba(239, 68, 68, 0.30); --pub-alert-danger-color: #991b1b; --pub-btn-primary-bg: linear-gradient(135deg, #0ea5e9, #2563eb); --pub-btn-primary-hover: linear-gradient(135deg, #0284c7, #1d4ed8); --pub-btn-primary-shadow: rgba(14, 165, 233, 0.25); --pub-breadcrumb-link: #0369a1; --pub-breadcrumb-active: #64748b; --pub-breadcrumb-sep: #94a3b8; --pub-focus-ring: rgba(3, 105, 161, 0.12); } /* ── Base card ── */ .public-page .card { border: 1px solid var(--pub-card-border) !important; border-radius: var(--pub-card-radius) !important; box-shadow: var(--pub-card-shadow) !important; background: var(--pub-card-bg) !important; backdrop-filter: blur(28px) saturate(1.6); -webkit-backdrop-filter: blur(28px) saturate(1.6); color: var(--pub-card-color); } /* ── Card header ── */ .public-page .card-header { /* Subtle blended header that sits visually inside the card - reduced opacity of the header gradient so it doesn't look cut-out - remove header box-shadow and use a soft border to blend with card - preserve card corner radius but tighten header radius to match */ background: linear-gradient(135deg, rgba(14,165,233,0.06) 0%, rgba(99,102,241,0.05) 100%) !important; border-bottom: 1px solid rgba(255,255,255,0.04) !important; border-radius: calc(var(--pub-card-radius) - 6px) calc(var(--pub-card-radius) - 6px) 0 0 !important; padding: 1.0rem 1.25rem !important; box-shadow: none !important; backdrop-filter: blur(8px) saturate(1.2); } /* Light theme-specific header blend */ :is([data-theme="light"], body.light-mode) .public-page .card-header { background: linear-gradient(135deg, rgba(14,165,233,0.03) 0%, rgba(219,234,254,0.03) 100%) !important; border-bottom: 1px solid rgba(148,163,184,0.12) !important; box-shadow: none !important; } .public-page .card-footer { border-top: 1px solid var(--pub-footer-border) !important; border-radius: 0 0 var(--pub-card-radius) var(--pub-card-radius) !important; padding: 1rem 1.5rem !important; background: var(--pub-footer-bg) !important; color: var(--pub-card-color) !important; } .public-page .card-body { color: var(--pub-card-color); background: transparent !important; } /* Accessibility & polish: focused controls, subtle focus ring, improved spacing */ .public-page :where(.card, .btn, .form-control):focus { outline: none !important; box-shadow: 0 0 0 4px var(--pub-focus-ring) !important; border-color: var(--pub-accent-color) !important; } /* Utility: subtle divider used across cards */ .pub-divider { height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); margin: 8px 0; } /* Improve nav-pill alignment: brand left, actions right */ .public-page .card-header { display: flex; align-items: center; gap: 0.75rem; } .public-page .card-header .nav-pills { margin-left: auto; } @media (max-width: 767px) { .public-page .card-header { flex-wrap: wrap; } .public-page .card-header .nav-pills { width: 100%; margin-left: 0; margin-top: 0.5rem; } } /* ── Headings / text inside cards ── */ .public-page .card .card-title, .public-page .card h1, .public-page .card h2, .public-page .card h3, .public-page .card h4, .public-page .card h5, .public-page .card h6 { color: var(--pub-title-color); } .public-page .card .text-muted, .public-page .card .text-secondary { color: var(--pub-muted-color) !important; } .public-page .card .text-primary { color: var(--pub-accent-color) !important; } /* graph helpers already defined in site.css — override for current theme */ .graph-card-title { color: var(--pub-graph-title) !important; } .graph-bold { color: var(--pub-graph-bold) !important; } /* Highlight global extremes in the stats pivot heatmap */ .stats-pivot-table .pivot-temp.extreme-low { box-shadow: 0 0 12px 4px rgba(59, 130, 246, 0.28) inset, 0 2px 10px rgba(59,130,246,0.12); border-radius: 4px; } .stats-pivot-table .pivot-temp.extreme-high { box-shadow: 0 0 12px 4px rgba(236, 72, 153, 0.28) inset, 0 2px 10px rgba(236,72,153,0.12); border-radius: 4px; } .graph-italic { color: var(--pub-graph-italic) !important; } .UwTextColor { color: var(--pub-accent-color) !important; } /* ── Nav pills inside card header (single consolidated rule consuming theme tokens) ── */ .public-page .card-header .nav-pills { background: var(--pub-pill-bg) !important; border-radius: 6px; padding: 4px; } .public-page .card-header .nav-pills .nav-link { color: var(--pub-pill-color) !important; background: transparent; border: none; border-radius: 4px; padding: 0.45rem 1rem; font-size: 0.85rem; font-weight: 500; transition: all 0.2s ease; } .public-page .card-header .nav-pills .nav-link.active { background: var(--pub-pill-active-bg) !important; color: var(--pub-pill-active-color) !important; box-shadow: 0 1px 6px rgba(0,0,0,0.25); font-weight: 600; } .public-page .card-header .nav-pills .nav-link:not(.active):hover { background: var(--pub-pill-hover-bg) !important; color: var(--pub-pill-hover-color) !important; } /* ── Logo in card header ── */ .public-page .card-header #site-logo, .public-page .card-header .header-brand-img { filter: drop-shadow(0 2px 10px rgba(0,0,0,0.60)) brightness(1.08); } :is([data-theme="light"], body.light-mode) .public-page .card-header #site-logo, :is([data-theme="light"], body.light-mode) .public-page .card-header .header-brand-img { filter: drop-shadow(0 1px 4px rgba(0,0,0,0.20)) brightness(1.0); } /* ── Page wrapper ── */ .page-wrapper { padding: 10px; } /* ── Summary dashboard header ── */ .summary-dashboard-header { background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 60%, #1a4f8a 100%); padding: 14px 18px; display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* branded-header ensures the gradient is preserved on public pages where other rules may override */ .summary-dashboard-header.branded-header { background: linear-gradient(135deg, rgba(14,165,233,0.25) 0%, rgba(99,102,241,0.22) 100%) !important; } /* ── Compact stats in dashboard header (right-aligned) ── */ .summary-dashboard-header .header-stats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .summary-dashboard-header .hdr-pill { min-width: 52px; padding: 5px 8px; border-radius: 8px; background: rgba(255,255,255,0.10); color: #fff; border: 1px solid rgba(255,255,255,0.15); } .summary-dashboard-header .hdr-online { background: rgba(52,211,153,0.25); border-color: rgba(52,211,153,0.35); } .summary-dashboard-header .hdr-offline { background: rgba(251,113,133,0.22); border-color: rgba(251,113,133,0.35); } .summary-dashboard-header .hdr-total { background: rgba(165,180,252,0.20); border-color: rgba(165,180,252,0.30); } .summary-dashboard-header .hdr-pill strong { display:block; font-size:1.0rem; font-weight:800; color:#fff; } .summary-dashboard-header .hdr-pill small { opacity:0.80; font-size:0.62rem; color:#fff; } .summary-dashboard-header .hdr-mini { min-width: 110px; max-width: 130px; padding: 5px 8px; border-radius: 8px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); color: #fff; } .summary-dashboard-header .hdr-mini small { font-size:0.62rem; opacity:0.75; color:#fff; } .summary-dashboard-header .mini-val { font-weight:800; font-size:0.9rem; line-height:1.2; color:#fff; } .summary-dashboard-header .mini-val.cold { color:#7dd3fc; } .summary-dashboard-header .mini-val.hot { color:#fdba74; } .summary-dashboard-header .mini-name { font-size:0.60rem; opacity:0.70; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff; } .summary-dashboard-header a.hdr-mini:hover { background: rgba(255,255,255,0.14); } /* Light theme — darken text so it stays readable on pale background */ :is([data-theme="light"], body.light-mode) .summary-dashboard-header { background: linear-gradient(135deg, rgba(224,242,254,0.95) 0%, rgba(219,234,254,0.90) 100%); } :is([data-theme="light"], body.light-mode) .summary-dashboard-header .header-title, :is([data-theme="light"], body.light-mode) .summary-dashboard-header .header-subtitle { color: #0f172a; } :is([data-theme="light"], body.light-mode) .summary-dashboard-header .header-icon { color: #0369a1; } :is([data-theme="light"], body.light-mode) .summary-dashboard-header .hdr-pill { background: rgba(255,255,255,0.70); border-color: rgba(100,116,139,0.30); color: #0f172a; } :is([data-theme="light"], body.light-mode) .summary-dashboard-header .hdr-pill strong { color: #0f172a; } :is([data-theme="light"], body.light-mode) .summary-dashboard-header .hdr-pill small { color: #475569; } :is([data-theme="light"], body.light-mode) .summary-dashboard-header .hdr-online { background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.30); } :is([data-theme="light"], body.light-mode) .summary-dashboard-header .hdr-offline { background: rgba(225,29,72,0.08); border-color: rgba(225,29,72,0.25); } :is([data-theme="light"], body.light-mode) .summary-dashboard-header .hdr-total { background: rgba(99,102,241,0.08); border-color: rgba(99,102,241,0.20); } :is([data-theme="light"], body.light-mode) .summary-dashboard-header .hdr-mini { background: rgba(255,255,255,0.80); border-color: rgba(100,116,139,0.25); color: #0f172a; } :is([data-theme="light"], body.light-mode) .summary-dashboard-header .hdr-mini small { color: #475569; } :is([data-theme="light"], body.light-mode) .summary-dashboard-header .mini-val { color: #0f172a; } :is([data-theme="light"], body.light-mode) .summary-dashboard-header .mini-val.cold { color: #0369a1; } :is([data-theme="light"], body.light-mode) .summary-dashboard-header .mini-val.hot { color: #c2410c; } :is([data-theme="light"], body.light-mode) .summary-dashboard-header .mini-name { color: #475569; } :is([data-theme="light"], body.light-mode) .summary-dashboard-header a.hdr-mini:hover { background: rgba(14,165,233,0.08); } :is([data-theme="light"], body.light-mode) .summary-dashboard-header .live-badge { color: #0369a1; background: rgba(3,105,161,0.10); } /* ── Summary card tile (per-sensor cards in StationGraphs) ── */ .summary-card-tile { background: var(--pub-summary-card-bg) !important; border: 1px solid var(--pub-card-border); border-left: 4px solid var(--pub-summary-card-border-l); border-radius: 10px; transition: transform 0.2s ease, box-shadow 0.2s ease; padding: 12px 14px; } .summary-card-tile:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important; } /* ── Summary panel (map right panel) ── */ .summary-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .summary-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important; } .summary-panel { background: var(--pub-summary-panel-bg) !important; border: 1px solid var(--pub-summary-panel-border); border-radius: 14px; padding: 15px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* ── Reading display ── */ .reading-large { font-size: 1.35rem; font-weight: 700; color: var(--pub-accent-color); line-height: 1.1; } .reading-large .unit { font-size: 1.1rem; color: var(--pub-muted-color); font-weight: 500; margin-left: 2px; } @media (max-width: 576px) { .reading-large { font-size: 1.5rem; } .reading-large .unit { font-size: 1.2rem; } } /* ── Stats display (SingleChart) ── */ .stats-display { background: var(--pub-stats-bg); border: 1px solid var(--pub-stats-border); border-radius: 8px; padding: 12px 20px; color: var(--pub-card-color); } /* ── Chart / map size ── */ .graph-map-size { min-height: 350px; isolation: isolate; } @media (max-width: 991.98px) { .graph-map-size { height: 300px !important; } } /* ── Chart container ── */ .chart-container { height: calc(100vh - 380px); min-height: 400px; } /* ── Share buttons ── */ .share-buttons { display: flex; gap: 5px; } .share-buttons .btn { width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; border-color: rgba(255,255,255,0.25) !important; color: rgba(255,255,255,0.75) !important; } :is([data-theme="light"], body.light-mode) .share-buttons .btn { border-color: rgba(0,0,0,0.15) !important; color: #334155 !important; } .share-buttons .btn svg { display: block; } .share-buttons .btn:hover { transform: scale(1.1); transition: transform 0.2s ease; } .share-buttons .btn-outline-primary:hover { background-color: #1877f2; border-color: #1877f2 !important; color: #fff !important; } .share-buttons .btn-outline-info:hover { background-color: #000; border-color: #000 !important; color: #fff !important; } .share-buttons .btn-outline-secondary:hover { background-color: #6c757d; border-color: #6c757d !important; color: #fff !important; } /* ── Form controls ── */ .public-page .input-group-text, .public-page .pub-input-icon { background: var(--pub-form-bg) !important; border: 1px solid var(--pub-form-border) !important; color: var(--pub-muted-color) !important; } .public-page .form-control, .public-page .form-select { background: var(--pub-form-bg) !important; border: 1px solid var(--pub-form-border) !important; color: var(--pub-form-color) !important; border-radius: 8px; } .public-page .form-control:focus, .public-page .form-select:focus { background: var(--pub-form-bg) !important; border-color: rgba(14, 165, 233, 0.55) !important; box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.20) !important; color: var(--pub-form-color) !important; } .public-page .form-control::placeholder { color: var(--pub-form-placeholder); } .public-page .form-label { color: var(--pub-label-color); font-size: 0.8rem; font-weight: 500; } /* ── Buttons ── */ .public-page .btn-primary { background: var(--pub-btn-primary-bg) !important; border: none !important; box-shadow: 0 4px 12px var(--pub-btn-primary-shadow); } .public-page .btn-primary:hover { background: var(--pub-btn-primary-hover) !important; } .public-page .btn-outline-primary { border-color: rgba(14, 165, 233, 0.50) !important; color: var(--pub-accent-color) !important; } .public-page .btn-outline-primary:hover { background: rgba(14, 165, 233, 0.18) !important; border-color: var(--pub-accent-color) !important; color: var(--pub-pill-active-color) !important; } .public-page .btn-outline-secondary { border-color: rgba(255,255,255,0.25) !important; color: rgba(255,255,255,0.65) !important; } :is([data-theme="light"], body.light-mode) .public-page .btn-outline-secondary { border-color: rgba(0,0,0,0.20) !important; color: #475569 !important; } .public-page .btn-outline-secondary:hover { background: rgba(255,255,255,0.10) !important; color: #fff !important; } :is([data-theme="light"], body.light-mode) .public-page .btn-outline-secondary:hover { background: rgba(14,165,233,0.10) !important; color: #1e293b !important; } /* ── Alert ── */ .public-page .alert-danger { background: var(--pub-alert-danger-bg) !important; border-color: var(--pub-alert-danger-border) !important; color: var(--pub-alert-danger-color) !important; border-radius: 10px; } .public-page .alert-danger .text-black { color: var(--pub-alert-danger-color) !important; } /* ── Table ── */ .public-page .table { color: var(--pub-table-color) !important; } .public-page .table th { background: var(--pub-table-th-bg) !important; color: var(--pub-table-th-color) !important; border-color: var(--pub-table-border) !important; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; } .public-page .table td { color: var(--pub-table-color) !important; border-color: var(--pub-table-td-border) !important; } /* ============================================================ TABLE HOVER - Consistent for all public page tables Uses CSS variables for theme-aware hover colors ============================================================ */ .public-page .table tbody tr:hover { background-color: var(--pub-table-hover-bg) !important; color: var(--pub-table-hover-color) !important; } /* Exception: disable hover on heatmap tables */ .public-page .table.heatmap-table tbody tr:hover, .public-page .table.no-hover tbody tr:hover { background-color: inherit !important; } .public-page .table-hover tbody tr:hover td { background-color: var(--pub-table-hover-bg) !important; color: var(--pub-table-hover-color) !important; } /* Override Bootstrap 5's CSS-variable-based hover (used by DataTables too) */ .public-page .table-hover > tbody > tr:hover > * { --bs-table-accent-bg: var(--pub-table-hover-bg); --bs-table-hover-bg: var(--pub-table-hover-bg); --bs-table-bg: var(--pub-table-hover-bg); color: var(--pub-table-hover-color) !important; background-color: var(--pub-table-hover-bg) !important; } /* Ensure DataTables / main dashboard table uses same subtle hover as summary tables */ .public-page .tblTable-responsive.table-hover > tbody > tr:hover > *, .public-page .tblTable-responsive.table-hover tbody tr:hover td, .public-page .tblTable-responsive.table-hover tbody tr:hover th, .public-page .tblTable-responsive.table-hover tbody tr:hover { background-color: var(--pub-table-hover-bg) !important; color: var(--pub-table-hover-color) !important; --bs-table-accent-bg: var(--pub-table-hover-bg) !important; --bs-table-hover-bg: var(--pub-table-hover-bg) !important; --bs-table-bg: var(--pub-table-hover-bg) !important; } /* Ensure hover on main DataTable matches summary in light theme too (stronger selector) */ html:is([data-theme="light"], body.light-mode) .public-page .tblTable-responsive.table-hover > tbody > tr:hover > *, html:is([data-theme="light"], body.light-mode) .public-page .tblTable-responsive.table-hover tbody tr:hover td, html:is([data-theme="light"], body.light-mode) .public-page .tblTable-responsive.table-hover tbody tr:hover th, html:is([data-theme="light"], body.light-mode) .public-page .tblTable-responsive.table-hover tbody tr:hover, html:is([data-theme="light"], body.light-mode) .public-page .dataTables_wrapper .tblTable-responsive.table-hover tbody tr:hover > * { background-color: var(--pub-table-hover-bg) !important; color: var(--pub-table-hover-color) !important; --bs-table-accent-bg: var(--pub-table-hover-bg) !important; --bs-table-hover-bg: var(--pub-table-hover-bg) !important; --bs-table-bg: var(--pub-table-hover-bg) !important; } /* Strong dark-mode overrides for DataTables/table-hover to neutralise Bootstrap inset highlight and ensure the subtle white tint applied on hover is visible for pivot and detailed tables. */ html:not([data-theme="light"]) .public-page .table-hover > tbody > tr:hover > *, html:not([data-theme="light"]) .public-page .tblTable-responsive.table-hover > tbody > tr:hover > *, html:not([data-theme="light"]) .public-page .dataTables_scrollBody table.dataTable tbody tr:hover td, html:not([data-theme="light"]) .public-page table.tblTable-responsive.dataTable tbody tr:hover td, html:not([data-theme="light"]) .public-page #tblTable_stats.table-hover > :not(caption) > * > tbody > tr:hover > *, html:not([data-theme="light"]) .public-page .stats-pivot-table:not(#tblPivot) tbody tr:hover > * { background-color: rgba(255, 255, 255, 0.09) !important; color: var(--pub-table-hover-color) !important; --bs-table-accent-bg: rgba(255, 255, 255, 0.09) !important; --bs-table-hover-bg: rgba(255, 255, 255, 0.09) !important; --bs-table-bg: rgba(255, 255, 255, 0.09) !important; box-shadow: none !important; background-image: none !important; } /* Heatmap pivot (#tblPivot): hover completely disabled — preserves per-cell heatmap colors */ .public-page #tblPivot.stats-pivot-table > :not(caption) > * > * { --bs-table-hover-bg: transparent !important; --bs-table-accent-bg: transparent !important; --bs-table-hover-color: inherit !important; } .public-page #tblPivot.stats-pivot-table tbody tr:hover > *, .public-page #tblPivot.stats-pivot-table tbody tr:hover td { background-color: transparent !important; background-image: none !important; box-shadow: none !important; filter: none !important; color: inherit !important; } /* Fallback for internal cell wrapper that Bootstrap uses */ html:not([data-theme="light"]) .public-page #tblTable_stats > :not(caption) > * > *, html:not([data-theme="light"]) .public-page .stats-pivot-table > :not(caption) > * > * { box-shadow: none !important; background-image: none !important; } /* Stronger fallbacks for DataTables scroll/stripe implementations */ html:is([data-theme="light"], body.light-mode) .public-page .dataTables_scrollBody table.dataTable tbody tr:hover, html:is([data-theme="light"], body.light-mode) .public-page .dataTables_scrollBody table.dataTable tbody tr:hover td, html:is([data-theme="light"], body.light-mode) .public-page table.tblTable-responsive.dataTable tbody tr:hover, html:is([data-theme="light"], body.light-mode) .public-page table.tblTable-responsive.dataTable tbody tr:hover td { background: var(--pub-table-hover-bg) !important; background-image: none !important; color: var(--pub-table-hover-color) !important; } .public-page .table a { color: var(--pub-table-link); } .public-page .table a:hover { color: var(--pub-table-link-hover); } .public-page .table-bordered { border-color: var(--pub-table-border) !important; } /* ── Accordion ── */ .public-page .accordion-item { background: var(--pub-accordion-bg) !important; border: 1px solid var(--pub-accordion-border) !important; border-radius: 12px !important; overflow: hidden; margin-bottom: 0.5rem; } .public-page .accordion-button { background: var(--pub-accordion-btn-bg) !important; color: var(--pub-accordion-btn-color) !important; box-shadow: none !important; } .public-page .accordion-button:not(.collapsed) { background: var(--pub-accordion-btn-bg) !important; color: var(--pub-accordion-btn-color) !important; border-bottom: 1px solid var(--pub-accordion-border) !important; } .public-page .accordion-button::after { filter: var(--pub-accordion-chevron); } .public-page .accordion-button:focus { box-shadow: none !important; } .public-page .accordion-body { background: var(--pub-accordion-body-bg) !important; color: var(--pub-card-color); } .public-page .accordion-body .form-control { background: var(--pub-stats-bg) !important; border: 1px solid var(--pub-stats-border) !important; color: var(--pub-card-color) !important; } /* ── Offcanvas ── */ .public-page .offcanvas { background: var(--pub-offcanvas-bg) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-left: 1px solid var(--pub-offcanvas-border) !important; color: var(--pub-card-color); } .public-page .offcanvas-header { border-bottom: 1px solid var(--pub-offcanvas-border); } .public-page .offcanvas-title { color: var(--pub-title-color); } .public-page .btn-close { filter: invert(1) brightness(0.7); } :is([data-theme="light"], body.light-mode) .public-page .btn-close { filter: none; } /* Compare panel selects */ #compareOffcanvas .form-select, #compareStationSelect, #compareSensorSelect { max-height: 260px; overflow-y: auto; } #compareOffcanvas .form-select { height: auto; } /* Fix: compare offcanvas was rendered under top header card on some pages Ensure the offcanvas panel and its backdrop are above other page cards */ #compareOffcanvas { position: fixed !important; z-index: 20010 !important; } .offcanvas-backdrop { z-index: 20000 !important; } /* ── Breadcrumb ── */ .breadcrumb-item a { color: var(--pub-breadcrumb-link) !important; } .breadcrumb-item.active { color: var(--pub-breadcrumb-active) !important; } .breadcrumb-item + .breadcrumb-item::before { color: var(--pub-breadcrumb-sep); } /* ── Theme toggle FAB ── */ #theme-toggle-btn { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9998; width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; transition: transform 0.2s ease, box-shadow 0.2s ease; background: rgba(14, 165, 233, 0.85); color: #fff; box-shadow: 0 4px 16px rgba(14, 165, 233, 0.50); backdrop-filter: blur(8px); } #theme-toggle-btn:hover { transform: scale(1.12) rotate(15deg); box-shadow: 0 6px 22px rgba(14, 165, 233, 0.70); } :is([data-theme="light"], body.light-mode) #theme-toggle-btn { background: rgba(30, 41, 59, 0.85); color: #fde047; box-shadow: 0 4px 16px rgba(30, 41, 59, 0.30); }