arnaudne
4fbc578413
- NightModeProvider context (localStorage persisted) in contexts/NightMode.tsx - Full-screen fixed red overlay (rgba 160,0,0 @ 55%, mix-blend-mode: multiply) fades in over the entire UI; multiply blend keeps dark backgrounds black while turning all white/bright content deep red - Desktop: toggle button at the bottom of the sidebar, glows red when active - Mobile: floating red circle button fixed just above the bottom nav bar Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
214 lines
6.3 KiB
CSS
214 lines
6.3 KiB
CSS
@import './tokens.css';
|
||
|
||
*, *::before, *::after {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
html, body, #root {
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
|
||
body {
|
||
background: var(--bg-void);
|
||
color: var(--text-hi);
|
||
font-family: var(--font-sans);
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
h1, h2, h3, h4 {
|
||
font-family: var(--font-display);
|
||
font-weight: 700;
|
||
}
|
||
|
||
code, kbd, pre, .mono {
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
a {
|
||
color: var(--amber);
|
||
text-decoration: none;
|
||
}
|
||
|
||
button {
|
||
font-family: var(--font-sans);
|
||
cursor: pointer;
|
||
border: none;
|
||
background: none;
|
||
}
|
||
|
||
input, select, textarea {
|
||
font-family: var(--font-sans);
|
||
background: var(--bg-deep);
|
||
border: 1px solid var(--border);
|
||
color: var(--text-hi);
|
||
border-radius: 4px;
|
||
padding: 6px 10px;
|
||
outline: none;
|
||
}
|
||
|
||
input:focus, select:focus, textarea:focus {
|
||
border-color: var(--amber-dim);
|
||
}
|
||
|
||
::-webkit-scrollbar {
|
||
width: 6px;
|
||
height: 6px;
|
||
}
|
||
::-webkit-scrollbar-track { background: var(--bg-deep); }
|
||
::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 3px; }
|
||
::-webkit-scrollbar-thumb:hover { background: var(--text-lo); }
|
||
|
||
/* ─── Bottom navigation (mobile only, hidden on desktop) ───── */
|
||
.bottom-nav {
|
||
display: none;
|
||
position: fixed;
|
||
bottom: 0; left: 0; right: 0;
|
||
height: 58px;
|
||
background: var(--bg-deep);
|
||
border-top: 1px solid var(--border);
|
||
z-index: 200;
|
||
align-items: stretch;
|
||
}
|
||
.bottom-nav a {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 3px;
|
||
color: var(--text-lo);
|
||
font-family: var(--font-mono);
|
||
font-size: 8px;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
text-decoration: none;
|
||
padding: 8px 0;
|
||
border-top: 2px solid transparent;
|
||
transition: color 0.1s;
|
||
}
|
||
.bottom-nav a.active {
|
||
color: var(--amber);
|
||
border-top-color: var(--amber);
|
||
}
|
||
.bottom-nav a .bnav-icon {
|
||
font-size: 18px;
|
||
line-height: 1;
|
||
}
|
||
|
||
/* ─── Responsive ────────────────────────────────────────────── */
|
||
@media (max-width: 767px) {
|
||
body { min-width: 0; }
|
||
|
||
/* Sidebar hidden; bottom nav shown */
|
||
.app-sidebar { display: none !important; }
|
||
.bottom-nav { display: flex !important; }
|
||
.night-fab { display: flex !important; }
|
||
|
||
/* Main content: zero out PageShell padding; bottom-nav clearance */
|
||
.app-main { padding: 0 0 68px 0 !important; }
|
||
|
||
/* Page body: reduced padding on mobile */
|
||
.page-body { padding: 12px 14px !important; }
|
||
|
||
/* Dashboard: 4-col stat row → 2×2 */
|
||
.dash-stat-grid { grid-template-columns: 1fr 1fr !important; }
|
||
/* Dashboard: 2-col grids → single column */
|
||
.dash-two-col { grid-template-columns: 1fr !important; }
|
||
/* Dashboard: 3-col timing/targets/forecast → single column */
|
||
.dash-three-col { grid-template-columns: 1fr !important; }
|
||
|
||
/* Targets filter bar rows: horizontal scroll */
|
||
.filter-row {
|
||
flex-wrap: nowrap !important;
|
||
overflow-x: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
scrollbar-width: none;
|
||
padding-bottom: 4px;
|
||
}
|
||
.filter-row::-webkit-scrollbar { display: none; }
|
||
|
||
/* Targets table: show only Type(1) Name(2) Filter(8) Alt(9) */
|
||
/* Hide cols 3-7 */
|
||
.targets-table th:nth-child(n+3):nth-child(-n+7),
|
||
.targets-table td:nth-child(n+3):nth-child(-n+7) { display: none !important; }
|
||
/* Hide cols 10 and beyond */
|
||
.targets-table th:nth-child(n+10),
|
||
.targets-table td:nth-child(n+10) { display: none !important; }
|
||
|
||
/* Compare modal: stack columns */
|
||
.compare-body { flex-direction: column !important; }
|
||
.compare-col { border-right: none !important; border-bottom: 1px solid var(--border) !important; }
|
||
}
|
||
|
||
/* Utility classes */
|
||
.text-hi { color: var(--text-hi); }
|
||
.text-mid { color: var(--text-mid); }
|
||
.text-lo { color: var(--text-lo); }
|
||
.text-amber { color: var(--amber); }
|
||
.text-good { color: var(--good); }
|
||
.text-warn { color: var(--warn); }
|
||
.text-danger { color: var(--danger); }
|
||
|
||
.mono { font-family: var(--font-mono); }
|
||
.display { font-family: var(--font-display); }
|
||
|
||
/* Type badge pills */
|
||
.type-badge {
|
||
display: inline-block;
|
||
padding: 1px 6px;
|
||
border-radius: 3px;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.05em;
|
||
font-family: var(--font-mono);
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.type-badge.galaxy { background: var(--type-galaxy); color: #fff; }
|
||
.type-badge.emission_nebula { background: var(--type-emission); color: #fff; }
|
||
.type-badge.planetary_nebula { background: var(--type-planetary); color: #fff; }
|
||
.type-badge.snr { background: var(--type-snr); color: #fff; }
|
||
.type-badge.globular_cluster { background: var(--type-globular); color: #fff; }
|
||
.type-badge.open_cluster { background: var(--type-open); color: #111; }
|
||
.type-badge.reflection_nebula { background: var(--type-reflection); color: #fff; }
|
||
.type-badge.dark_nebula { background: var(--type-dark); color: var(--text-mid); }
|
||
.type-badge.nebula { background: var(--teal); color: #fff; }
|
||
.type-badge.galaxy_cluster { background: #7b3f9e; color: #fff; }
|
||
.type-badge.galaxy_group { background: #4a5268; color: #fff; }
|
||
.type-badge.interacting_galaxy { background: #5c4070; color: #fff; }
|
||
|
||
/* Quality chips */
|
||
.quality-chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 2px 8px;
|
||
border-radius: 10px;
|
||
font-size: 11px;
|
||
font-family: var(--font-mono);
|
||
}
|
||
.quality-chip.keeper { background: var(--good); color: #fff; }
|
||
.quality-chip.needs_more { background: var(--blue); color: #fff; }
|
||
.quality-chip.rejected { background: var(--danger); color: #fff; }
|
||
.quality-chip.pending { background: var(--muted); color: var(--text-mid); }
|
||
|
||
/* Filter pills */
|
||
.filter-pill {
|
||
display: inline-block;
|
||
padding: 1px 6px;
|
||
border-radius: 3px;
|
||
font-size: 10px;
|
||
font-family: var(--font-mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
}
|
||
.filter-pill.sv220 { background: rgba(155, 89, 182, 0.3); color: #c39dde; border: 1px solid rgba(155,89,182,0.4); }
|
||
.filter-pill.c2 { background: rgba(77, 157, 224, 0.3); color: #8cbee8; border: 1px solid rgba(77,157,224,0.4); }
|
||
.filter-pill.sv260 { background: rgba(232, 131, 42, 0.3); color: #e8a870; border: 1px solid rgba(232,131,42,0.4); }
|
||
.filter-pill.uvir { background: rgba(61, 186, 114, 0.3); color: #7dd1a1; border: 1px solid rgba(61,186,114,0.4); }
|