/* CWho Styles */ /* Status dots */ .status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; } .status-dot.up { background-color: #198754; } .status-dot.down { background-color: #dc3545; } .status-dot.degraded { background-color: #ffc107; } .status-dot.unknown { background-color: #6c757d; } .status-dot.timeout { background-color: #dc3545; } .status-dot.error { background-color: #dc3545; } /* Site cards */ .site-card { transition: transform 0.15s ease, box-shadow 0.15s ease; cursor: pointer; } .site-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } /* Sparkline container */ .sparkline-container { height: 40px; } /* Response time colors */ .response-fast { color: #198754; } .response-medium { color: #ffc107; } .response-slow { color: #dc3545; } /* Uptime bar */ .uptime-bar { display: flex; gap: 2px; height: 32px; } .uptime-bar-segment { flex: 1; border-radius: 2px; min-width: 3px; } .uptime-bar-segment.up { background-color: #198754; } .uptime-bar-segment.partial { background-color: #ffc107; } .uptime-bar-segment.down { background-color: #dc3545; } .uptime-bar-segment.unknown { background-color: #dee2e6; } /* Big number display */ .big-number { font-size: 3rem; font-weight: 700; line-height: 1; } /* Metric cards */ .metric-card { border-left: 3px solid #0d6efd; } .metric-card .metric-value { font-size: 1.5rem; font-weight: 600; } .metric-card .metric-label { font-size: 0.8rem; color: #6c757d; text-transform: uppercase; letter-spacing: 0.5px; } /* Tab navigation for site detail */ .site-tabs .nav-link { color: #6c757d; border: none; padding: 0.75rem 1.25rem; } .site-tabs .nav-link.active { color: #0d6efd; border-bottom: 2px solid #0d6efd; background: none; } .site-tabs .nav-link.disabled { color: #adb5bd; } /* Hero section */ .hero-section { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); color: white; padding: 5rem 0; } .hero-section h1 { font-size: 3rem; font-weight: 800; } /* Feature cards */ .feature-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; } /* Pricing cards */ .pricing-card { transition: transform 0.15s ease; } .pricing-card:hover { transform: translateY(-4px); } .pricing-card.featured { border: 2px solid #0d6efd; } /* Code blocks */ pre.snippet-code { background: #1e1e2e; color: #cdd6f4; border-radius: 8px; padding: 1rem; position: relative; } /* Trend arrows */ .trend-up { color: #198754; } .trend-down { color: #dc3545; } .trend-flat { color: #6c757d; } /* Loading spinner */ .loading-spinner { display: flex; justify-content: center; align-items: center; min-height: 200px; } /* ================================================================ DARK MODE OVERRIDES Uses Bootstrap 5's [data-bs-theme="dark"] attribute on Bootstrap handles most surfaces; these patches cover custom styles. ================================================================ */ [data-bs-theme="dark"] .status-dot.unknown { background-color: #6c757d; } [data-bs-theme="dark"] .uptime-bar-segment.unknown { background-color: #3a3f47; } [data-bs-theme="dark"] .metric-card { background-color: var(--bs-card-bg); border-color: var(--bs-border-color); } [data-bs-theme="dark"] .metric-card .metric-label { color: #9aa0ac; } [data-bs-theme="dark"] .site-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } [data-bs-theme="dark"] pre.snippet-code { background: #12121e; border: 1px solid rgba(255, 255, 255, 0.08); } [data-bs-theme="dark"] .hero-section { background: linear-gradient(135deg, #0d0d1a 0%, #0e1628 50%, #071e3d 100%); } [data-bs-theme="dark"] .site-tabs .nav-link { color: #9aa0ac; } [data-bs-theme="dark"] .site-tabs .nav-link.active { color: #6ea8fe; border-bottom-color: #6ea8fe; } [data-bs-theme="dark"] .site-tabs .nav-link.disabled { color: #495057; } [data-bs-theme="dark"] .pricing-card.featured { border-color: #6ea8fe; } /* Dark mode callouts (used in docs) */ [data-bs-theme="dark"] .callout-info { border-color: #6ea8fe; background: rgba(110, 168, 254, 0.08); color: var(--bs-body-color); } [data-bs-theme="dark"] .callout-tip { border-color: #75b798; background: rgba(117, 183, 152, 0.08); color: var(--bs-body-color); } [data-bs-theme="dark"] .callout-warn { border-color: #ffda6a; background: rgba(255, 218, 106, 0.08); color: var(--bs-body-color); } /* Inline code in docs dark mode */ [data-bs-theme="dark"] .docs-content code { background: #2a2a3e; color: #f48fb1; } /* Navbar dark mode toggle icon contrast */ [data-bs-theme="dark"] #darkModeToggle { color: #adb5bd; } [data-bs-theme="dark"] #darkModeToggle:hover { color: #f8f9fa; background-color: rgba(255, 255, 255, 0.1); }