grabowski
2f55723585
The palette already lived in CSS custom properties, so dark mode is a token-override block in the new theme.css, applied via data-theme on the document element. A moon/sun toggle sits top right in the navbar; an explicit choice persists in localStorage, otherwise the app follows the OS preference live. An inline head script applies the theme before first paint so a dark reload never flashes light. Token hygiene sweep alongside: literal colours that broke under a dark palette (timeline chip text, color-mix against white, calendar stripes and bands, warning banners, nav background) moved into ten new tokens with light-mode values unchanged. The flip clock keeps its fixed dark look by design; the map keeps standard light tiles in both themes.
59 lines
3.0 KiB
CSS
59 lines
3.0 KiB
CSS
/* Hourly day-timeline (dayTimeline.js) and the "now" indicators in both the
|
|
month calendar and the timeline (see docs/API.md "Hourly day timeline &
|
|
'now' indicator"). Split out of styles.css — which is at its 500-line cap
|
|
— following the same per-feature stylesheet convention as checklist.css. */
|
|
|
|
:root {
|
|
--now: #ef4444;
|
|
}
|
|
|
|
/* ---------- Day timeline (day-editor slideover) ---------- */
|
|
.day-timeline { display: flex; flex-direction: column; gap: 0.6rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--border); }
|
|
|
|
.dt-allday { display: flex; flex-wrap: wrap; gap: 0.35rem; }
|
|
.dt-chip { display: inline-flex; align-items: center; gap: 0.3rem; max-width: 100%; border: none; border-left: 3px solid var(--chip); border-radius: 6px; background: color-mix(in srgb, var(--chip) 16%, var(--surface)); color: var(--chip-text); font-size: 0.78rem; font-weight: 600; padding: 0.2rem 0.5rem; cursor: pointer; }
|
|
.dt-chip-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 11rem; }
|
|
|
|
.dt-grid-wrap { position: relative; display: flex; }
|
|
.dt-hours { flex: 1; display: flex; flex-direction: column; }
|
|
.dt-hour-row { flex-shrink: 0; box-sizing: border-box; border-top: 1px solid var(--border); padding-left: 3rem; position: relative; }
|
|
.dt-hour-row:first-child { border-top: none; }
|
|
.dt-hour-label { position: absolute; left: 0; top: -0.55em; width: 2.7rem; font-size: 0.68rem; font-weight: 700; color: var(--text-faint); text-align: right; padding-right: 0.4rem; }
|
|
|
|
.dt-events { position: absolute; inset: 0; left: 3rem; }
|
|
.dt-block {
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
border: none;
|
|
border-left: 3px solid var(--chip);
|
|
border-radius: 5px;
|
|
background: color-mix(in srgb, var(--chip) 22%, var(--surface));
|
|
color: var(--chip-text);
|
|
font-size: 0.74rem;
|
|
font-weight: 600;
|
|
text-align: left;
|
|
padding: 0.15rem 0.4rem;
|
|
margin-right: 3px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
}
|
|
.dt-block-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
|
|
.dt-now-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--now); z-index: 3; pointer-events: none; }
|
|
.dt-now-dot { position: absolute; left: -0.3rem; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--now); box-shadow: 0 0 0 2px var(--surface); }
|
|
|
|
/* ---------- Month calendar "now" slider (calendar.js) ---------- */
|
|
.cal-day.cal-today { position: relative; }
|
|
.cal-today .cal-daynum { color: var(--now); font-weight: 800; }
|
|
.cal-now-slider { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--now); pointer-events: none; z-index: 2; }
|
|
.cal-now-dot { position: absolute; top: -3px; left: 50%; transform: translateX(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--now); box-shadow: 0 0 0 2px var(--surface); }
|
|
|
|
@media (max-width: 480px) {
|
|
.dt-hour-row { padding-left: 2.4rem; }
|
|
.dt-hour-label { width: 2.1rem; }
|
|
.dt-events { left: 2.4rem; }
|
|
}
|