grabowski
b0bdd2570c
Days with 4+ entries open with an hour-grid timeline in the day editor: untimed entries in an all-day strip, timed ones positioned by start/end with side-by-side columns for overlaps, click-to-edit. Layout math lives in a pure, unit-tested module (timelineLayout.js). Today's month-grid cell gets a vertical red slider positioned by the fraction of the day elapsed; the timeline gets the classic horizontal red current-time line. Both tick every minute with cleanup on unmount, and the initial positioning runs unconditionally while the node is still detached (the isConnected self-heal gates only interval ticks). Also splits entryRow rendering out of dayEditor.js to stay under the 500-line cap.
59 lines
2.9 KiB
CSS
59 lines
2.9 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%, white); color: #334155; 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%, white);
|
|
color: #334155;
|
|
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; }
|
|
}
|