/** * Design tokens from style.md and components.md. * Mirrors variables.js — import once, then use var(--token-name). * * @example * @import "./variables.css"; * .title { font-size: var(--font-view-title-size); } */ :root { /* Font family (shared) */ --font-family: "SF Pro", "Inter", system-ui, sans-serif; /* Colors — style.md */ --color-background: #214d93; --color-secondary: rgba(0, 145, 255, 0.6); --color-secondary-hex: #0091ff; --color-secondary-opacity: 0.6; --color-third: rgba(0, 145, 255, 0.4); --color-third-hex: #0091ff; --color-third-opacity: 0.4; --color-accent: #febc2e; --color-text: #f4f4f4; --color-text-secondary: rgba(255, 255, 255, 0.7); --color-text-secondary-hex: #ffffff; --color-text-secondary-opacity: 0.7; --color-extra: #131313; } /* Dark mode — deeper charcoal surfaces, same accent/text. Toggled from Settings > Preferences (localStorage `pathora.darkMode`); applied as data-theme="dark" on . Default :root above stays the Pathora brand blue. */ :root[data-theme="dark"] { color-scheme: dark; --color-background: #0b1220; --color-secondary: rgba(56, 90, 140, 0.55); --color-secondary-hex: #385a8c; --color-secondary-opacity: 0.55; --color-third: rgba(56, 90, 140, 0.35); --color-third-hex: #385a8c; --color-third-opacity: 0.35; --color-accent: #febc2e; --color-text: #f4f4f4; --color-text-secondary: rgba(255, 255, 255, 0.7); --color-text-secondary-hex: #ffffff; --color-text-secondary-opacity: 0.7; --color-extra: #070a10; } :root { /* Typography — viewTitle */ --font-view-title-family: var(--font-family); --font-view-title-weight: 700; --font-view-title-size: 34px; --font-view-title-line-height: 41px; --font-view-title-letter-spacing: 0.4px; --font-view-title-align: left; --font-view-title-color: var(--color-text); /* Typography — tabBar */ --font-tab-bar-family: var(--font-family); --font-tab-bar-weight: 500; --font-tab-bar-size: 15px; --font-tab-bar-line-height: 20px; --font-tab-bar-letter-spacing: -0.23px; --font-tab-bar-align: center; --font-tab-bar-color: var(--color-text); /* Typography — rowTitle */ --font-row-title-family: var(--font-family); --font-row-title-weight: 400; --font-row-title-size: 17px; --font-row-title-line-height: 22px; --font-row-title-letter-spacing: -0.43px; --font-row-title-align: left; --font-row-title-color: var(--color-text); /* Typography — rowSubtitle */ --font-row-subtitle-family: var(--font-family); --font-row-subtitle-weight: 400; --font-row-subtitle-size: 15px; --font-row-subtitle-line-height: 20px; --font-row-subtitle-letter-spacing: -0.23px; --font-row-subtitle-align: left; --font-row-subtitle-color: var(--color-text-secondary); /* Typography — sectionTitle (superseded viewSubtitle, which went unused) */ --font-section-title-family: var(--font-family); --font-section-title-weight: 600; --font-section-title-size: 13px; --font-section-title-line-height: 18px; --font-section-title-letter-spacing: 0.6px; --font-section-title-align: left; --font-section-title-color: var(--color-text-secondary); --font-section-title-transform: uppercase; /* Typography — sectionHelper, a short helper line right under a sectionTitle, e.g. explaining that Phases expand -- the same idea as the helper text SwiftUI adds below a control. Smaller and unstyled (no uppercase/letter spacing) next to sectionTitle, so it reads as a caption, not a label */ --font-section-helper-family: var(--font-family); --font-section-helper-weight: 400; --font-section-helper-size: 12px; --font-section-helper-line-height: 16px; --font-section-helper-align: left; --font-section-helper-color: var(--color-text-secondary); /* Typography — lightBold */ --font-light-bold-weight: 600; /* Typography — addNewButton */ --font-add-new-button-family: var(--font-family); --font-add-new-button-weight: 400; --font-add-new-button-size: 17px; --font-add-new-button-line-height: 22px; --font-add-new-button-letter-spacing: -0.43px; --font-add-new-button-align: left; --font-add-new-button-color: var(--color-text); /* Containers — components.md */ --container-view-display: flex; --container-view-direction: column; --container-view-align: center; --container-view-justify: flex-start; --container-view-gap: 5.8vh; --container-view-padding-top: 1.3vh; --container-view-overflow: hidden; --container-body-display: flex; --container-body-direction: column; --container-body-height: 81.8vh; --container-body-width: 86.1vw; --container-body-align: flex-start; --container-body-justify: flex-start; --container-body-gap: 4.1vh; --container-body-padding-top: 1.3vh; --container-body-overflow: hidden; --container-list-display: flex; --container-list-direction: column; --container-list-height: fit-content; --container-list-max-height: 67.67vh; --container-list-width: 100%; --container-list-align: center; --container-list-justify: flex-start; --container-list-gap: 0; --container-list-padding: 0; --container-list-overflow: hidden; --container-list-border-radius: 30px; --container-leading-layout: vertical; --container-leading-display: flex; --container-leading-direction: column; --container-leading-height: 4.58vh; --container-leading-width: fit-content; --container-leading-max-width: 100%; --container-leading-align: flex-start; --container-leading-justify: center; --container-leading-gap: 0.29vh; --container-leading-padding: 0; --container-leading-overflow: hidden; --container-sheet-display: flex; --container-sheet-direction: column; --container-sheet-height: 90vh; --container-sheet-width: 100vw; --container-sheet-align: flex-start; --container-sheet-justify: flex-start; --container-sheet-gap: 4.1vh; --container-sheet-padding: 0 6.94vw; --container-sheet-overflow: hidden; --container-sheet-background: var(--color-background); --container-sheet-border-top-left-radius: 30px; --container-sheet-border-top-right-radius: 30px; --container-canvas-display: flex; --container-canvas-direction: column; --container-canvas-height: 81.8vh; --container-canvas-width: 86.1vw; --container-canvas-align: flex-start; --container-canvas-justify: flex-start; --container-canvas-gap: 0; --container-canvas-padding: 0; --container-canvas-overflow: hidden; --container-toolbar-display: flex; --container-toolbar-direction: row; --container-toolbar-height: 4.85vh; --container-toolbar-width: 100%; --container-toolbar-align: center; --container-toolbar-justify: flex-start; --container-toolbar-gap: 0; --container-toolbar-padding: 0; --container-toolbar-overflow: hidden; --container-blocks-display: flex; --container-blocks-direction: row; --container-blocks-height: 9.7vh; --container-blocks-width: 100%; --container-blocks-align: center; --container-blocks-justify: flex-start; --container-blocks-gap: 0; --container-blocks-padding: 0; --container-blocks-overflow: hidden; --container-pages-display: flex; --container-pages-direction: row; --container-pages-height: 6.8vh; --container-pages-width: 100%; --container-pages-align: center; --container-pages-justify: flex-start; --container-pages-gap: 0; --container-pages-padding: 0; --container-pages-overflow: hidden; --container-canvas-workspace-display: flex; --container-canvas-workspace-direction: row; --container-canvas-workspace-flex: 1 1 auto; --container-canvas-workspace-min-height: 0; --container-canvas-workspace-height: 100%; --container-canvas-workspace-width: 100%; --container-canvas-workspace-align: flex-start; --container-canvas-workspace-justify: flex-start; --container-canvas-workspace-gap: 0.69vw; --container-canvas-workspace-padding: 0; --container-canvas-workspace-overflow: hidden; --container-outline-display: flex; --container-outline-direction: column; --container-outline-flex-shrink: 0; --container-outline-width: 24vw; --container-outline-height: 100%; --container-outline-align: flex-start; --container-outline-justify: flex-start; --container-outline-gap: 0; --container-outline-padding: 0; --container-outline-overflow: hidden; --container-outline-background: var(--color-third); --container-outline-border-radius: 30px; --container-outline-list-display: flex; --container-outline-list-direction: column; --container-outline-list-flex: 1 1 auto; --container-outline-list-min-height: 0; --container-outline-list-width: 100%; --container-outline-list-align: flex-start; --container-outline-list-justify: flex-start; --container-outline-list-gap: 0; --container-outline-list-padding: 0; --container-outline-list-overflow: auto; --container-authoring-display: flex; --container-authoring-direction: column; --container-authoring-flex: 1 1 auto; --container-authoring-min-width: 0; --container-authoring-height: 100%; --container-authoring-width: auto; --container-authoring-align: flex-start; --container-authoring-justify: flex-start; --container-authoring-gap: 0; --container-authoring-padding: 0; --container-authoring-overflow: hidden; --animation-sheet-duration: 0.32s; --animation-sheet-easing: cubic-bezier(0.4, 0, 0.2, 1); --animation-sheet-transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); --animation-sheet-backdrop-background: rgba(0, 0, 0, 0.4); --animation-sheet-backdrop-transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.32s cubic-bezier(0.4, 0, 0.2, 1); /* Detail view (push navigation) — reuses the sheet's duration/easing */ --component-detail-view-z-index: 90; --component-detail-view-background: var(--color-background); --component-detail-view-back-gap: 0.35vw; --animation-detail-view-transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.32s cubic-bezier(0.4, 0, 0.2, 1); /* Components — tabBar */ --component-tab-bar-display: flex; --component-tab-bar-direction: row; --component-tab-bar-height: 4.3vh; --component-tab-bar-width: fit-content; --component-tab-bar-max-width: 86.1vw; --component-tab-bar-align: center; --component-tab-bar-justify: center; --component-tab-bar-gap: 0; --component-tab-bar-padding: 0.39vh 0.27vw; --component-tab-bar-background: var(--color-secondary); --component-tab-bar-border-radius: 30px; /* Components — secondaryTabBar */ --component-secondary-tab-bar-display: flex; --component-secondary-tab-bar-direction: row; --component-secondary-tab-bar-height: 4.3vh; --component-secondary-tab-bar-width: fit-content; --component-secondary-tab-bar-max-width: 86.1vw; --component-secondary-tab-bar-align: center; --component-secondary-tab-bar-justify: center; --component-secondary-tab-bar-gap: 0; --component-secondary-tab-bar-padding: 0.39vh 0.27vw; --component-secondary-tab-bar-background: var(--color-third); --component-secondary-tab-bar-border-radius: 30px; /* Components — tab */ --component-tab-display: flex; --component-tab-direction: row; --component-tab-height: 3.5vh; --component-tab-width: fit-content; --component-tab-align: center; --component-tab-justify: center; --component-tab-gap: 0.7vw; --component-tab-padding: 0.78vh 1.94vw; --component-tab-border-radius: 30px; --component-tab-white-space: nowrap; --component-tab-background-standby: transparent; --component-tab-background-active: var(--color-background); /* Components — row */ --component-row-display: flex; --component-row-direction: row; --component-row-height: 6.64vh; --component-row-width: 86.1vw; --component-row-align: center; --component-row-justify: flex-start; --component-row-gap: 0; --component-row-padding: 0; --component-row-background: var(--color-secondary); --component-row-border-top-width: 2px; --component-row-border-top-color: var(--color-background); --component-row-border-top: 2px solid var(--color-background); --component-row-cursor: pointer; --component-row-hover-filter: brightness(1.06); --component-row-active-filter: brightness(0.97); --component-row-transition: background-color 0.2s ease, filter 0.2s ease; --component-row-active-transition-duration: 0.1s; --component-row-chevron-color: var(--color-text); --component-row-chevron-transition: transform 0.2s ease; --component-row-chevron-hover-translate-x: 0.15vw; --component-row-focus-outline: 2px solid var(--color-text); /* Components — rowNew */ --component-row-new-display: flex; --component-row-new-direction: row; --component-row-new-height: 5.64vh; --component-row-new-width: 86.1vw; --component-row-new-align: center; --component-row-new-justify: center; --component-row-new-gap: 0; --component-row-new-padding: 0; --component-row-new-background: transparent; --component-row-new-color: var(--color-text-secondary); --component-row-new-border: 2px dotted var(--color-text-secondary); --component-row-new-border-bottom-left-radius: 30px; --component-row-new-border-bottom-right-radius: 30px; --component-row-new-cursor: pointer; --component-row-new-transition: color 0.2s ease, border-color 0.2s ease; --component-row-new-hover-color: var(--color-text); --component-row-new-hover-border-color: var(--color-text); /* Components — outlineModule */ --component-outline-module-display: flex; --component-outline-module-direction: column; --component-outline-module-width: 100%; --component-outline-module-gap: 0; --component-outline-module-padding: 0; --component-outline-module-overflow: hidden; --component-outline-module-row-display: flex; --component-outline-module-row-direction: row; --component-outline-module-row-height: 5.5vh; --component-outline-module-row-width: 100%; --component-outline-module-row-align: center; --component-outline-module-row-justify: flex-start; --component-outline-module-row-gap: 0; --component-outline-module-row-padding: 0; --component-outline-module-row-background: var(--color-secondary); --component-outline-module-row-border-top: 2px solid var(--color-background); --component-outline-module-row-cursor: pointer; --component-outline-module-row-transition: background-color 0.2s ease, filter 0.2s ease; --component-outline-module-row-hover-filter: brightness(1.06); --component-outline-module-row-active-filter: brightness(0.97); --component-outline-module-lessons-display: flex; --component-outline-module-lessons-direction: column; --component-outline-module-lessons-width: 100%; --component-outline-module-lessons-gap: 0; --component-outline-module-lessons-padding: 0; --component-outline-module-lessons-overflow: hidden; /* Components — outlineLesson */ --component-outline-lesson-display: flex; --component-outline-lesson-direction: row; --component-outline-lesson-height: 4.8vh; --component-outline-lesson-width: 100%; --component-outline-lesson-align: center; --component-outline-lesson-justify: flex-start; --component-outline-lesson-gap: 0; --component-outline-lesson-padding: 0 0.68vw 0 1.94vw; --component-outline-lesson-background-standby: transparent; --component-outline-lesson-background-active: var(--color-background); --component-outline-lesson-cursor: pointer; --component-outline-lesson-transition: background-color 0.2s ease, filter 0.2s ease; --component-outline-lesson-hover-filter: brightness(1.06); --component-outline-lesson-active-filter: brightness(0.97); --component-outline-lesson-focus-outline: 2px solid var(--color-text); /* Components — outlineAddModule / outlineAddLesson (rowNew adapted to outline width) */ --component-outline-add-module-height: 5vh; --component-outline-add-lesson-height: 4.5vh; --component-outline-add-width: 100%; --component-outline-add-border-radius: 0; --component-outline-add-module-border-bottom-left-radius: 30px; --component-outline-add-module-border-bottom-right-radius: 30px; /* Components — newUserForm */ --component-new-user-form-display: grid; --component-new-user-form-width: 86.1vw; --component-new-user-form-column-gap: 2.08vw; --component-new-user-form-row-gap: 2.92vh; --component-new-user-form-padding: 2.92vh 2.08vw; --component-new-user-form-border-radius: 30px; --component-new-user-form-columns: calc( (100% - var(--component-new-user-form-column-gap)) / 2 ) calc( (100% - var(--component-new-user-form-column-gap)) / 2 ); --component-new-user-form-rows: repeat(3, auto); --component-new-user-form-background: var(--color-secondary); --component-new-user-form-field-background: var(--color-background); --component-new-user-form-field-padding: 0 2.08vw; --component-new-user-form-field-min-height: 4.5vh; --component-new-user-form-field-border-radius: 30px; --component-new-user-form-input-color: var(--color-text); --component-new-user-form-input-padding: 1.5vh 0; --component-new-user-form-input-min-height: 100%; --component-new-user-form-input-placeholder-color: var(--color-text-secondary); /* Components — checkbox (Deadline? toggle in the New Task wizard) */ --component-checkbox-size: 20px; --component-checkbox-border-radius: 6px; --component-checkbox-border: 2px solid var(--color-text-secondary); --component-checkbox-checked-background: var(--color-accent); --component-checkbox-checked-color: var(--color-extra); /* Components — completeToggle (a Task row's "mark complete" circle, and the read-only version of it a Milestone row shows once every one of its Tasks is done -- see createTaskCompletionToggle/ createMilestoneCompletionIndicator in public/views/projects.js). Same tokens as checkbox above, just circular -- this reads as "check this item off", not a plain on/off form field. */ --component-complete-toggle-size: 20px; --component-complete-toggle-border: 2px solid var(--color-text-secondary); --component-complete-toggle-checked-background: var(--color-accent); --component-complete-toggle-checked-color: var(--color-extra); /* Components — calendarPanel (the New Task wizard's Due date picker, standing in for a native 's OS-drawn popup) */ --component-calendar-nav-button-size: 3.2vh; --component-calendar-nav-button-color: var(--color-text); --component-calendar-day-size: 4.4vh; --component-calendar-day-border-radius: 50%; --component-calendar-day-color: var(--color-text); --component-calendar-day-muted-color: var(--color-text-secondary); --component-calendar-today-border: 2px solid var(--color-text-secondary); --component-calendar-selected-background: var(--color-accent); --component-calendar-selected-color: var(--color-extra); /* Components — gantt (Gantt Chart tab's timeline grid, see public/views/gantt-chart.js). A single scrolling grid with two frozen ("sticky") edges -- the outline label column on the left, the date scale on top -- so scrolling either axis keeps whichever one isn't being scrolled in place, without any JS scroll-syncing. cellWidth is a px value, not vw/vh like the rest of this file -- unlike the rest of this design system, which sizes to the viewport for a fixed single-screen app, a day column's width is decided by its own content (staying a stable, readable size), not by the viewport -- the viewport only decides how much of the resulting grid is visible before it scrolls. */ --component-gantt-outline-width: 22vw; --component-gantt-row-height: 5vh; --component-gantt-cell-width: 56px; --component-gantt-indent-step: 1.8vw; --component-gantt-background: var(--color-third); --component-gantt-border-radius: 30px; --component-gantt-seam: 2px solid var(--color-background); --component-gantt-outline-padding: 0 0.68vw; --component-gantt-phase-background: var(--color-third); --component-gantt-phase-accent-border: 4px solid var(--color-accent); /* A Milestone spans the full grid width as its own left-aligned divider bar (see .gantt-milestone-divider) -- backgroundColor itself (not a tint) is what reads as a distinct band against the card's own thirdColor fill, with a left border marking it the same way a Phase's own stripe does, just in a muted color instead of accentColor so the two are never confused. */ --component-gantt-milestone-border-color: var(--color-text-secondary); --component-gantt-milestone-border: 2px solid var(--component-gantt-milestone-border-color); --component-gantt-lane-line-color: rgba(255, 255, 255, 0.12); --component-gantt-scale-color: var(--color-text-secondary); --component-gantt-today-color: var(--color-accent); --component-gantt-bar-height: 2.6vh; --component-gantt-bar-color: var(--color-accent); --component-gantt-bar-radius: 10px; --component-gantt-bar-inset: 3px; /* A completed Task's bar/pin (task.status === "done") -- same accent hue, tinted down to a low-opacity fill rather than swapped for an unrelated color, the same tinting technique --color-secondary/ --color-third already use for their own muted surfaces. Reads as "this one's done, no longer needs attention" against the still- vivid solid accentColor every unfinished bar/pin keeps using. */ --component-gantt-bar-complete-color: rgba(254, 188, 46, 0.32); --component-gantt-pin-size: 10px; --component-gantt-pin-color: var(--color-accent); --component-gantt-pin-complete-color: rgba(254, 188, 46, 0.32); /* Components — reportStats (Reports tab detail view's plain summary tiles -- see public/views/reports.js). A 2x2 grid of number+label tiles above the Milestone 2 breakdown charts. Reuses the same third/secondary fills and 30px radius every other filled surface in this app already uses (board columns, list containers). */ --component-report-stats-display: grid; --component-report-stats-columns: repeat(2, minmax(0, 1fr)); --component-report-stats-gap: 1.4vw; --component-report-stats-width: 100%; --component-report-stats-padding-bottom: 0; --component-report-stat-display: flex; --component-report-stat-direction: column; --component-report-stat-align: flex-start; --component-report-stat-justify: flex-start; --component-report-stat-gap: 0.6vh; --component-report-stat-padding: 2vh 1.4vw; --component-report-stat-background: var(--color-third); --component-report-stat-border-radius: 30px; --component-report-stat-value-color: var(--color-text); --component-report-stat-label-color: var(--color-text-secondary); /* Components — reportCharts (Reports tab breakdown bars under the summary tiles). Bars are plain divs sized with --report-bar-width, same approach .gantt-bar uses for --gantt-bar-width — no charting library. Track uses thirdColor; fill uses accentColor. */ --component-report-charts-display: flex; --component-report-charts-direction: column; --component-report-charts-gap: 2.4vh; --component-report-charts-width: 100%; --component-report-charts-padding-bottom: 2vh; --component-report-chart-display: flex; --component-report-chart-direction: column; --component-report-chart-gap: 1.2vh; --component-report-chart-width: 100%; --component-report-chart-padding: 1.6vh 1.4vw; --component-report-chart-background: var(--color-third); --component-report-chart-border-radius: 30px; --component-report-bar-row-display: grid; --component-report-bar-row-columns: 12vw minmax(0, 1fr) 8vw; --component-report-bar-row-align: center; --component-report-bar-row-gap: 1vw; --component-report-bar-row-width: 100%; --component-report-bar-track-height: 1.6vh; --component-report-bar-track-background: var(--color-secondary); --component-report-bar-track-border-radius: 10px; --component-report-bar-fill-height: 100%; /* Resolved on the fill element itself (where JS sets --report-bar-width), not baked at :root — routing through a :root token made every bar 0%. */ --component-report-bar-fill-background: var(--color-accent); --component-report-bar-fill-border-radius: 10px; --component-report-bar-label-color: var(--color-text); --component-report-bar-value-color: var(--color-text-secondary); --component-report-bar-value-align: right; /* Components — reportDonut / reportMode (Milestone 3) */ --component-report-donut-size: 140px; --component-report-donut-gap: 1.4vw; --component-report-donut-center-size: 22px; --component-report-donut-center-line-height: 26px; --component-report-swatch-size: 0.9vh; --component-report-swatch-radius: 3px; --component-report-breakdown-display: grid; --component-report-breakdown-columns: minmax(0, 18vw) minmax(0, 1fr); --component-report-breakdown-gap: 1.6vw; --component-report-breakdown-align: center; /* Components — leading (inside row) */ --component-leading-display: flex; --component-leading-direction: column; --component-leading-height: 100%; --component-leading-width: 70%; --component-leading-align: flex-start; --component-leading-justify: center; --component-leading-gap: 0.3vh; --component-leading-padding: 0.97vh 0.68vw; --component-leading-background: transparent; /* Components — trailing (inside row) */ --component-trailing-display: flex; --component-trailing-direction: row; --component-trailing-height: 100%; --component-trailing-width: 30%; --component-trailing-align: center; --component-trailing-justify: flex-end; --component-trailing-gap: 2.92vw; --component-trailing-padding: 0.97vh 2.77vw 0.97vh 0.69vw; --component-trailing-background: transparent; /* Tab indicator animation */ --animation-tab-indicator-duration: 0.28s; --animation-tab-indicator-easing: cubic-bezier(0.4, 0, 0.2, 1); --animation-tab-indicator-transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), top 0.28s cubic-bezier(0.4, 0, 0.2, 1), width 0.28s cubic-bezier(0.4, 0, 0.2, 1), height 0.28s cubic-bezier(0.4, 0, 0.2, 1); /* Micro-animations — list entrance, icon actions, tab press */ --animation-list-enter-duration: 0.45s; --animation-list-enter-easing: cubic-bezier(0.22, 1, 0.36, 1); --animation-list-enter-distance: 1.4vh; --animation-list-enter-stagger: 0.05s; --animation-title-enter-duration: 0.5s; --animation-icon-transition: transform 0.2s ease, opacity 0.2s ease; --animation-icon-hover-scale: 1.12; --animation-icon-active-scale: 0.92; --animation-tab-press-scale: 0.96; --animation-tab-press-transition: transform 0.15s ease; /* Kanban board card drop -- a direct result of the user's own drag/tap, so it uses the tab indicator's snappier timing (0.28s) rather than the list entrance's slower, staggered one (0.45s), which is meant for several rows appearing at once on a page load the user didn't trigger themselves. */ --animation-card-drop-duration: 0.28s; --animation-card-drop-easing: cubic-bezier(0.4, 0, 0.2, 1); --animation-outline-chevron-transition: transform 0.2s ease; --animation-outline-chevron-rotation-collapsed: 0deg; --animation-outline-chevron-rotation-expanded: 90deg; } /* Typography utilities */ .font-view-title { font-family: var(--font-view-title-family); font-weight: var(--font-view-title-weight); font-size: var(--font-view-title-size); line-height: var(--font-view-title-line-height); letter-spacing: var(--font-view-title-letter-spacing); text-align: var(--font-view-title-align); color: var(--font-view-title-color); } .font-tab-bar { font-family: var(--font-tab-bar-family); font-weight: var(--font-tab-bar-weight); font-size: var(--font-tab-bar-size); line-height: var(--font-tab-bar-line-height); letter-spacing: var(--font-tab-bar-letter-spacing); text-align: var(--font-tab-bar-align); color: var(--font-tab-bar-color); } .font-row-title { font-family: var(--font-row-title-family); font-weight: var(--font-row-title-weight); font-size: var(--font-row-title-size); line-height: var(--font-row-title-line-height); letter-spacing: var(--font-row-title-letter-spacing); text-align: var(--font-row-title-align); color: var(--font-row-title-color); } .font-row-subtitle { font-family: var(--font-row-subtitle-family); font-weight: var(--font-row-subtitle-weight); font-size: var(--font-row-subtitle-size); line-height: var(--font-row-subtitle-line-height); letter-spacing: var(--font-row-subtitle-letter-spacing); text-align: var(--font-row-subtitle-align); color: var(--font-row-subtitle-color); } .font-section-title { font-family: var(--font-section-title-family); font-weight: var(--font-section-title-weight); font-size: var(--font-section-title-size); line-height: var(--font-section-title-line-height); letter-spacing: var(--font-section-title-letter-spacing); text-align: var(--font-section-title-align); color: var(--font-section-title-color); text-transform: var(--font-section-title-transform); } /* Collapses to nothing when left empty (e.g. the Milestone Task view, which has no helper text) instead of leaving a stray gap from sectionHeader's own gap between its children. */ .font-section-helper { font-family: var(--font-section-helper-family); font-weight: var(--font-section-helper-weight); font-size: var(--font-section-helper-size); line-height: var(--font-section-helper-line-height); text-align: var(--font-section-helper-align); color: var(--font-section-helper-color); } .font-section-helper:empty { display: none; } .font-add-new-button { font-family: var(--font-add-new-button-family); font-weight: var(--font-add-new-button-weight); font-size: var(--font-add-new-button-size); line-height: var(--font-add-new-button-line-height); letter-spacing: var(--font-add-new-button-letter-spacing); text-align: var(--font-add-new-button-align); color: var(--font-add-new-button-color); } /* Container utilities */ .view-container { display: var(--container-view-display); flex-direction: var(--container-view-direction); align-items: var(--container-view-align); justify-content: var(--container-view-justify); gap: var(--container-view-gap); padding-top: var(--container-view-padding-top); overflow: var(--container-view-overflow); } .body-container { display: var(--container-body-display); flex-direction: var(--container-body-direction); height: var(--container-body-height); width: var(--container-body-width); align-items: var(--container-body-align); justify-content: var(--container-body-justify); gap: var(--container-body-gap); padding-top: var(--container-body-padding-top); overflow: var(--container-body-overflow); } /* Wraps a sectionHeader (sectionTitle + sectionHelper) and the listContainer beneath it as one unit, with a tight gap between the two -- like a SwiftUI List Section header hugging its rows. This is what gets the bodyContainer's normal gap from the viewTitle above, not the sectionHeader itself. */ .list-section { display: flex; flex-direction: column; align-items: flex-start; gap: 0.8vh; width: 100%; } /* Groups a sectionTitle with its sectionHelper right underneath it, with a much tighter gap than listSection uses before the rows themselves -- the helper reads as a caption on the title above it, not another section of its own. */ .section-header { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2vh; width: 100%; } .list-container { display: var(--container-list-display); flex-direction: var(--container-list-direction); height: var(--container-list-height); max-height: var(--container-list-max-height); width: var(--container-list-width); align-items: var(--container-list-align); justify-content: var(--container-list-justify); gap: var(--container-list-gap); padding: var(--container-list-padding); overflow: var(--container-list-overflow); border-radius: var(--container-list-border-radius); } /* Wraps a Project's Phases when it has any -- each Phase gets its own .list-container (header row, plus its Milestones underneath when expanded) instead of every Phase sharing one long list, so each Phase reads as its own separate card. */ .phase-groups { display: flex; flex-direction: column; gap: 1.6vh; width: 100%; } /* Expandable Row modifiers -- used for a Project's Phases, each one an ordinary Row that expands in place to reveal its Milestones directly underneath (Notion toggle-list style) instead of navigating to a new view. .row--phase sets the Phase row itself apart from its nested Milestone rows -- a distinct background (reusing colors.thirdColor, the same tier already used to set outlineContainer apart from the page behind it) and a bold title, so the two levels of hierarchy are visually distinct, not just structurally nested. Nesting itself is conveyed by the shared listContainer and row--phase's background, not by extra indent -- a Phase's title and its Milestones' titles share the same, more generous Leading padding (see below) so they line up. */ .accordion-chevron { color: var(--component-row-chevron-color); font-size: 17px; line-height: 1; transition: var(--animation-outline-chevron-transition); transform: rotate(var(--animation-outline-chevron-rotation-collapsed)); } .row--expanded .accordion-chevron { transform: rotate(var(--animation-outline-chevron-rotation-expanded)); } /* .row.row--phase (not just .row--phase) so this reliably beats .row's own background-color further down the file regardless of source order. The left accent stripe reuses colors.accentColor -- the same amber already used for the active Phase bubble in the New Project wizard -- so a Phase reads as a Phase everywhere in the app, not just here, without adding a color that means nothing anywhere else. */ .row.row--phase { background-color: var(--color-third); border-left: 4px solid var(--color-accent); } .row--phase .row-leading, .row--nested .row-leading { padding-left: 1.8vw; } /* Wraps a Phase's revealed Milestones (see togglePhase in public/views/projects.js) so expanding/collapsing is a genuine smooth slide -- height and opacity animating together -- instead of the rows just popping straight to their full height the instant they're inserted or removed. Reuses the sheet/detailView's own duration and easing (0.32s, cubic-bezier(0.4, 0, 0.2, 1)) rather than a third near-identical "panel sliding" token, since that's exactly what this is too. JS drives max-height/opacity directly (not a class toggle), since the target height has to be measured per Phase (however many Milestones it has) rather than being a fixed value. Not a .list-container itself, and not a direct child of one either (it sits inside a Phase's own .list-container, after the header row) -- so listEnter's ".list-container > .row" selector doesn't reach the rows inside it, and they never replay listEnter just because a Phase was toggled open again. */ .accordion-panel { display: flex; flex-direction: column; width: 100%; overflow: hidden; transition: max-height var(--animation-sheet-duration) var(--animation-sheet-easing), opacity var(--animation-sheet-duration) var(--animation-sheet-easing); } /* New Task wizard options (Deadline?, Due date, Priority, Owner, Show every day) -- each its own standalone field, not Rows sharing one listContainer, so they read as form fields rather than a navigation list. .option-fields stacks them with a real gap between each one (unlike Rows, which sit flush against each other); .option-field-group is the rounded, clipped card a single field's trigger (and, once expanded, its panel) share -- the same role a Phase's own listContainer plays for its accordionRow + accordionPanel, just for one field instead of a whole list. */ .option-fields { display: flex; flex-direction: column; gap: 1.2vh; width: 100%; } .option-field-group { width: 100%; border-radius: 30px; overflow: hidden; } /* A field's own trigger -- its label on one side, its current value and an accordionChevron on the other (Due date, Priority, Owner, Show every day), or a checkbox (Deadline?). Carries its own background (rather than the group above it) so hovering/pressing it, like any other tappable surface in the app, actually has something to darken. */ .option-field { display: flex; align-items: center; justify-content: space-between; min-height: 5.2vh; width: 100%; padding: 0 2.08vw; background-color: var(--color-secondary); box-sizing: border-box; cursor: pointer; transition: var(--component-row-transition); } .option-field:hover { filter: var(--component-row-hover-filter); } .option-field:active { filter: var(--component-row-active-filter); transition-duration: var(--component-row-active-transition-duration); } .option-field:focus-visible { outline: var(--component-row-focus-outline); outline-offset: -2px; } .option-field-trailing { display: flex; align-items: center; gap: 0.5vw; } .option-field-value { color: var(--color-text-secondary); } /* A field's revealed choices (Priority/Owner/Show every day) or its calendarPanel (Due date) -- sits directly beneath the trigger inside the same option-field-group, a thin border-top (the same "2px backgroundColor" seam a Row uses against the one above it) marking where the trigger ends and the choices begin. Its own bottom corners round to match option-field-group's -- that group's overflow: hidden already clips this panel to the same shape whenever it happens to be the group's last child (which it always is here), but a field this short makes that 30px clip easy to miss entirely against a flat run of choices, reading as square even though it technically isn't. Rounding the panel itself removes any doubt. */ .option-field-panel { display: flex; flex-direction: column; width: 100%; background-color: var(--color-secondary); border-top: 2px solid var(--color-background); border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; box-sizing: border-box; } .option-field-choice { display: flex; align-items: center; justify-content: space-between; padding: 1vh 2.08vw; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .option-field-choice:hover { background-color: var(--color-third); } .option-field-choice--selected { color: var(--color-accent); } /* Deadline?'s on/off toggle -- a plain checkbox rather than a Yes/No field like Priority or Show every day, since flipping it also decides whether the Due date field beneath it exists at all. */ .checkbox { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--component-checkbox-size); height: var(--component-checkbox-size); border-radius: var(--component-checkbox-border-radius); border: var(--component-checkbox-border); box-sizing: border-box; transition: background-color 0.2s ease, border-color 0.2s ease; } .checkbox--checked { background-color: var(--component-checkbox-checked-background); border-color: var(--component-checkbox-checked-background); } .checkbox-icon { display: none; font-size: 12px; line-height: 1; color: var(--component-checkbox-checked-color); } /* A Task row's "mark complete" circle (createTaskCompletionToggle) and a Milestone row's read-only version of the same look (createMilestoneCompletionIndicator), both in public/views/projects.js. Same shape/states as .checkbox above -- an outline that fills with accentColor and grows a checkmark once checked -- just round instead of a rounded square, and sized to sit inline with a Row's other trailing icons (see .attachment-indicator) rather than a form field's own line height. */ .complete-toggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--component-complete-toggle-size); height: var(--component-complete-toggle-size); border-radius: 50%; border: var(--component-complete-toggle-border); box-sizing: border-box; background: none; padding: 0; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; } /* The static (Milestone row) version is never clicked -- a plain span, not a