/* Public calendar display pages. Everything is driven by CSS custom * properties (--c-*, --fs-*, --font-main) set per display, so a live * restyle is just a variable swap. */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } /* Hide scrollbars on display pages (still scrollable) — cleaner kiosk look. * The viewport scrollbar lives on , so target it too (this stylesheet is * only loaded on display pages). */ html, body, * { scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { width: 0; height: 0; display: none; } .display-body { background: var(--c-bg, #1e2128); color: var(--c-text, #e8eaed); font-family: var(--font-main, 'Inter'), system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; min-height: 100vh; } .display { min-height: 100vh; padding: clamp(16px, 3vw, 40px); max-width: 1100px; margin: 0 auto; zoom: var(--zoom, 1); /* true zoom: text + spacing + cards together */ } .display-loading { display: flex; align-items: center; justify-content: center; min-height: 60vh; font-size: 40px; color: var(--c-muted, #9aa0a6); } .display-header { display: flex; align-items: baseline; gap: 14px; padding-bottom: 14px; margin-bottom: 22px; border-bottom: 2px solid var(--c-border, #3a3f48); } .display-title { font-size: var(--fs-title, 30px); font-weight: 700; color: var(--c-text, #e8eaed); margin: 0; line-height: 1.1; } .display-clock { margin-left: auto; color: var(--c-muted); font-variant-numeric: tabular-nums; font-size: calc(var(--fs-title, 30px) * 0.7); } /* ===== Agenda ===== */ .agenda-group { margin-bottom: 26px; } .agenda-date { font-size: var(--fs-date_group, 18px); color: var(--c-accent, #bb6f41); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 12px; } .agenda-event { display: flex; align-items: flex-start; gap: 20px; padding: 12px 16px; margin-bottom: 8px; background: var(--c-surface, #272b33); border-radius: 12px; border-left: 4px solid transparent; } .agenda-event.priority { border-left-color: var(--c-priority, #e6a23c); } .agenda-time { font-size: var(--fs-event_time, 16px); color: var(--c-muted, #9aa0a6); font-variant-numeric: tabular-nums; min-width: 6.5ch; white-space: nowrap; padding-top: 2px; font-weight: 600; } .agenda-icon { font-size: var(--fs-event_title, 21px); width: 30px; text-align: center; padding-top: 1px; } .agenda-body { flex: 1; min-width: 0; } .agenda-name { font-size: var(--fs-event_title, 21px); font-weight: 600; line-height: 1.25; } .agenda-name .star { color: var(--c-priority, #e6a23c); margin-right: 4px; } .agenda-desc { font-size: var(--fs-event_desc, 14px); color: var(--c-muted, #9aa0a6); margin-top: 3px; line-height: 1.4; } .agenda-recurring { color: var(--c-accent); font-size: .8em; margin-left: 6px; opacity: .8; } .agenda-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex-shrink: 0; align-self: center; } .display-empty { text-align: center; color: var(--c-muted); padding: 60px 20px; font-size: var(--fs-event_title, 21px); } /* Minor (yearly-recurring) agenda events — smaller, dimmer than manual ones. */ .agenda-event.minor { padding: 7px 12px; opacity: .85; } .agenda-event.minor .agenda-name { font-size: calc(var(--fs-event_title, 21px) * var(--minor-scale, .72)); font-weight: 500; color: var(--c-muted); } .agenda-event.minor .agenda-time { font-size: calc(var(--fs-event_time, 16px) * var(--minor-scale, .72)); } .agenda-event.minor .agenda-icon { font-size: calc(var(--fs-event_title, 21px) * var(--minor-scale, .72)); } /* Recurring events pinned into the left (agenda) column of split view — shrink * title + description proportionally via the configurable --pinned-scale (1 = same). */ .agenda-event.pinned-recur .agenda-name { font-size: calc(var(--fs-event_title, 21px) * var(--pinned-scale, 1)); } .agenda-event.pinned-recur .agenda-desc { font-size: calc(var(--fs-event_desc, 14px) * var(--pinned-scale, 1)); } .agenda-event.pinned-recur .agenda-time { font-size: calc(var(--fs-event_time, 16px) * var(--pinned-scale, 1)); } .agenda-event.pinned-recur .agenda-icon { font-size: calc(var(--fs-event_title, 21px) * var(--pinned-scale, 1)); } /* ===== Full-bleed types (fill the whole screen) ===== */ /* The box is divided by --zoom so that, once CSS `zoom` scales it back up, it * maps to EXACTLY one viewport (zoom still enlarges the content inside). */ .display-month, .display-split { max-width: none; margin: 0; width: calc(100vw / var(--zoom, 1)); min-height: calc(100vh / var(--zoom, 1)); padding: clamp(10px, 1.5vw, 22px); display: flex; flex-direction: column; } /* Month never exceeds the viewport: height = one screen (zoom-compensated), the * grid shrinks to fit. min-height:0 on the flex children is what lets the grid * shrink below its content height instead of overflowing. */ .display-month { height: calc(100vh / var(--zoom, 1)); min-height: 0; overflow: hidden; } /* ===== Month grid (fills width + height) ===== */ .month-title { font-size: var(--fs-weekday, 16px); font-weight: 700; text-align: center; margin: 0 0 10px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .04em; } .month-grid-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; } .month-head, .month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .month-grid { flex: 1; min-height: 0; grid-auto-rows: minmax(0, 1fr); } .month-wd { text-align: center; font-size: var(--fs-weekday, 14px); color: var(--c-muted); font-weight: 600; padding: 4px 0; } .month-head { margin-bottom: 6px; } .month-cell { background: var(--c-surface); border-radius: 8px; min-height: 0; padding: 6px; overflow: hidden; display: flex; flex-direction: column; } .month-cell.empty { background: transparent; } .month-day { font-size: var(--fs-day_number, 15px); font-weight: 600; margin-bottom: 4px; line-height: 1.6em; } .month-day.today { background: var(--c-today, #bb6f41); color: #fff; width: 1.7em; height: 1.7em; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; } .month-ev { font-size: var(--fs-event_text, 12px); background: var(--c-bg); border-radius: 4px; padding: 2px 5px; margin-bottom: 3px; overflow: hidden; border-left: 3px solid var(--c-accent); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--month-lines, 1); line-clamp: var(--month-lines, 1); word-break: break-word; } .month-ev.priority { border-left-color: var(--c-priority); } .month-ev.minor { font-size: calc(var(--fs-event_text, 12px) * var(--minor-scale, .72)); opacity: .8; border-left-color: var(--c-border); } .month-more { font-size: calc(var(--fs-event_text, 12px) * .9); color: var(--c-muted); padding-left: 4px; } /* ===== Week ===== */ .week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; min-height: calc(100vh - 80px); } .week-col { background: var(--c-surface); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; } .week-col.today { outline: 2px solid var(--c-today); } .week-col-head { font-size: var(--fs-weekday, 15px); font-weight: 700; text-align: center; padding-bottom: 8px; border-bottom: 1px solid var(--c-border); margin-bottom: 8px; } .week-col-head span { display: block; font-size: var(--fs-date_number, 16px); color: var(--c-muted); font-weight: 500; margin-top: 2px; } .week-ev { font-size: var(--fs-event_text, 13px); background: var(--c-bg); border-radius: 6px; padding: 5px 7px; margin-bottom: 5px; border-left: 3px solid var(--c-accent); } .week-ev.priority { border-left-color: var(--c-priority); } .week-ev.minor { font-size: calc(var(--fs-event_text, 13px) * var(--minor-scale, .72)); opacity: .8; border-left-color: var(--c-border); } .week-ev-time { display: block; font-size: .85em; color: var(--c-muted); font-variant-numeric: tabular-nums; } .week-empty { color: var(--c-border); text-align: center; padding-top: 10px; } /* ===== Today / TV ===== */ .today-wrap { max-width: 920px; margin: 0 auto; } .today-head { display: flex; align-items: baseline; gap: 16px; border-bottom: 2px solid var(--c-border); padding-bottom: 14px; margin-bottom: 26px; } .today-date { font-size: var(--fs-today_title, 30px); font-weight: 700; } .today-head .display-clock { margin-left: auto; font-size: var(--fs-clock, 60px); font-weight: 700; color: var(--c-accent); font-variant-numeric: tabular-nums; line-height: 1; } .today-events { display: flex; flex-direction: column; gap: 14px; } .today-ev { display: flex; align-items: center; gap: 16px; background: var(--c-surface); border-radius: 14px; padding: 16px 20px; border-left: 5px solid transparent; } .today-ev.priority { border-left-color: var(--c-priority); } .today-ev-time { font-size: var(--fs-event_time, 18px); color: var(--c-accent); font-weight: 700; min-width: 6.5ch; white-space: nowrap; font-variant-numeric: tabular-nums; } .today-ev-icon { font-size: var(--fs-event_title, 24px); } .today-ev-name { font-size: var(--fs-event_title, 24px); font-weight: 600; } .today-ev.minor { opacity: .85; } .today-ev.minor .today-ev-name { font-size: calc(var(--fs-event_title, 24px) * var(--minor-scale, .72)); color: var(--c-muted); } .today-ev.minor .today-ev-time { font-size: calc(var(--fs-event_time, 18px) * var(--minor-scale, .72)); } .today-empty { font-size: var(--fs-event_title, 24px); color: var(--c-muted); text-align: center; padding: 48px; } .today-next { margin-top: 32px; display: grid; grid-template-columns: max-content 1fr; align-content: start; } .today-next-label { grid-column: 1 / -1; font-size: var(--fs-next_label, 16px); text-transform: uppercase; letter-spacing: .06em; color: var(--c-accent); font-weight: 700; margin-bottom: 12px; } .today-next-ev { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; column-gap: 22px; align-items: baseline; font-size: var(--fs-next_label, 16px); color: var(--c-muted); padding: 8px 0; border-bottom: 1px solid var(--c-border); } .today-next-ev .tn-date { color: var(--c-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .today-next-ev .tn-name { color: var(--c-text); } .today-next-ev.minor { opacity: .75; } /* ===== Split (custom 2/3 + recurring 1/3) ===== */ .split-wrap { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; flex: 1; align-items: start; } .split-left { min-width: 0; } .split-right { background: var(--c-surface); border-radius: 14px; padding: 14px 18px; } .split-right-head { font-size: var(--fs-side_title, 16px); text-transform: uppercase; letter-spacing: .05em; color: var(--c-accent); font-weight: 700; margin-bottom: 12px; border-bottom: 1px solid var(--c-border); padding-bottom: 8px; } /* Grid + subgrid: the date column auto-sizes to the widest date and every * row's name aligns to it — no fixed widths, adapts to any font size. */ .split-right-body { display: grid; grid-template-columns: max-content 1fr; align-content: start; } .split-side-ev { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; column-gap: 22px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--c-border); } .split-side-ev:last-child { border-bottom: none; } .split-side-date { font-size: var(--fs-side_date, 13px); color: var(--c-muted); white-space: nowrap; font-variant-numeric: tabular-nums; } .split-side-name { font-size: var(--fs-side_title, 16px); color: var(--c-text); line-height: 1.3; } .split-side-desc { grid-column: 2; font-size: var(--fs-side_desc, 12.5px); color: var(--c-muted); line-height: 1.35; margin-top: 3px; } .split-clock-wrap { position: fixed; right: 28px; bottom: 18px; z-index: 10; text-align: right; } .split-cl-date { font-size: calc(var(--fs-clock, 40px) * 0.3); color: var(--c-muted); font-weight: 600; line-height: 1.15; margin-bottom: 2px; white-space: nowrap; } .split-clock { color: var(--c-accent); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; font-size: var(--fs-clock, 40px); } /* ===== Mobile / narrow screens ===== */ @media (max-width: 760px) { .display { padding: 12px; } .split-wrap { grid-template-columns: 1fr; } .week-grid { grid-template-columns: 1fr; min-height: 0; } .week-col { min-height: 0; } .agenda-event { gap: 12px; padding: 10px 12px; } .split-clock-wrap { right: 14px; bottom: 12px; } }