/* ================================================================= GLAZE TOKENS — ported directly from gridloop-mockups/mockups.html, the approved brand reference. Light mode only for now (dark mode is specified in the source brand guide, not yet built). ================================================================= */ :root { --canvas: #E7DFD1; --tile: #FBF8F2; --ink: #33465A; --muted: #6D7F8F; --sage: #7C9C8C; --clay: #C97B63; --honey: #DDA23E; --danger: #A6342E; --warning: #A85F26; --success: #3F7A56; --info: #3B6488; --focus: #3B6488; /* Bare "R,G,B" companions of the tokens above, so hardcoded tints/overlays scattered through this file (a faint border, a hover-state background, etc.) can be written as rgba(var(--ink-rgb),0.06) instead of a literal rgba(51,70,90,0.06) — letting them flip automatically under [data-theme="dark"] below, the same way a plain var(--ink) reference already would. */ --ink-rgb: 51,70,90; --muted-rgb: 109,127,143; --sage-rgb: 124,156,140; --clay-rgb: 201,123,99; --honey-rgb: 221,162,62; --danger-rgb: 166,52,46; --warning-rgb: 168,95,38; --success-rgb: 63,122,86; --info-rgb: 59,100,136; /* Deliberately constant across both themes (never redefined under [data-theme="dark"]) — each one below has a job that stays the same regardless of which theme is active: */ --scrim-rgb: 51,70,90; /* dimming overlays (modal/sheet backdrops, tour spotlight, video-tile label backing) must stay dark in both themes — the opposite of --ink-rgb, which flips light in dark mode */ --gloss-rgb: 255,255,255; /* white shine/gloss highlights (shadow inset highlight, wordmark emboss, glaze-sweep) */ --on-accent: #FBF8F2; /* light text/icons drawn on a solid saturated fill (danger/success/warning/info pills and badges) — needs to stay light regardless of theme, since those fills stay saturated */ --ink-on-accent: #33465A; /* dark text drawn on a solid sage/clay/honey fill (pills, primary button, active nav states, own-message bubble) — fixed to today's --ink value since sage/clay/honey themselves don't change in dark mode, but --ink does */ --radius-pill: 9999px; --radius-card: 20px; --radius-modal: 24px; /* .notif-menu (right: 4.2rem, 38px wide) + .settings-menu (right: 1.5rem, 38px wide) are both position:fixed at top:1rem, always floating over page content regardless of viewport width — together they occupy the rightmost ~6.6rem of the viewport, in the topmost ~3.4rem. A page header's own action-button row sits at roughly that same height (right after .main-panel's top padding), so on a desktop window narrow enough that the row's content reaches this same horizontal band — narrower than full-width monitors, but still well above the mobile breakpoint — a button can end up rendered directly underneath one of these icons. Reserving this as right-side padding on that header row means content wraps (or just stops short) before ever reaching that zone, rather than colliding with it. */ --fixed-icon-clearance: 7rem; --shadow-tile: 0 10px 20px rgba(51,70,90,0.12), inset 0 1px 0 rgba(255,255,255,0.6); --shadow-modal: 0 16px 32px rgba(51,70,90,0.18), inset 0 1px 0 rgba(255,255,255,0.6); --font: 'Roboto', -apple-system, "Segoe UI", Oxygen, Ubuntu, Helvetica, Arial, sans-serif; } /* ================================================================= DARK MODE — same token names as the light :root block above, values only. Applied by setting data-theme="dark" on (see the inline anti-flash script in index.html's and the toggle wiring in app.js); everything else in this file references these tokens via var(...) and repaints automatically once the attribute flips. Kept warm (dark charcoal, not pure black) to match the light theme's own warm, editorial palette rather than a generic dark-mode default. ================================================================= */ :root[data-theme="dark"] { --canvas: #211D19; --tile: #2B2621; --ink: #EDE6DA; --muted: #9C8F80; /* sage/clay/honey intentionally unchanged — already muted mid-tones that read well as accents against a dark charcoal ground, and keeping them fixed means --ink-on-accent (also fixed) stays exactly as legible on them as it is today. */ /* danger/warning/success/info/focus are tuned in light mode to work as *text on a light background* (dark, muted tones) — on a dark canvas they're nearly invisible. Brightened so they read clearly both as status text on dark tile and as pill/badge fills under --on-accent. */ --danger: #E2685C; --warning: #E0A34A; --success: #4FB07A; --info: #5B9BD1; --focus: #5B9BD1; --ink-rgb: 237,230,218; --muted-rgb: 156,143,128; --danger-rgb: 226,104,92; --warning-rgb: 224,163,74; --success-rgb: 79,176,122; --info-rgb: 91,155,209; /* A navy-tinted shadow at these alphas is invisible against a dark canvas — needs near-black at higher alpha. Gloss highlight dialed way down so it reads as a subtle sheen rather than a glary white line. */ --shadow-tile: 0 10px 20px rgba(0,0,0,0.45), inset 0 1px 0 rgba(var(--gloss-rgb),0.05); --shadow-modal: 0 16px 32px rgba(0,0,0,0.55), inset 0 1px 0 rgba(var(--gloss-rgb),0.05); } /* ---- Dark-mode special cases — colors baked into a fixed rule (not a var(...) reference) that var(--token) substitution alone can't reach, plus third-party (Quill) chrome that needs its own override layer. ---- */ /* The embossed/pressed-into-paper look was tuned for a light tile surface — dark shadow below, bright highlight above. On a dark tile, the analogous "engraved" look needs a near-black shadow and only a faint light edge. */ [data-theme="dark"] .wordmark { text-shadow: 0 -1px 0 rgba(0,0,0,0.5), 0 1px 0 rgba(var(--gloss-rgb),0.08); } /* Graph-paper texture's stroke color is baked into the data-URI string itself — can't reference var(--ink-rgb) inside url(), so it needs its own dark-mode background-image with a light-on-dark stroke instead. */ [data-theme="dark"] .sidebar { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M 24 0 L 0 0 0 24' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1'/%3E%3C/svg%3E"); } /* Same data-URI limitation for the custom for board grouping) — a track of equal-weight options with the active one raised on its own tile, same visual language as everything else on --tile surfaces (shadow-tile, not a full elevation shadow, since it's a small in-page control, not a floating one). */ .segmented { display: inline-flex; background: rgba(var(--ink-rgb),0.1); border-radius: var(--radius-pill); padding: 0.2rem; gap: 0.15rem; } .segmented button { font-family: inherit; font-size: 0.8rem; font-weight: 600; border: none; background: none; color: var(--muted); padding: 0.4rem 0.75rem; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap; } .segmented button:hover { color: var(--ink); } .segmented button.is-active { background: var(--tile); color: var(--ink); box-shadow: 0 1px 3px rgba(var(--ink-rgb),0.18); } /* Board/Grid now sits in the primary action row next to Add task/Start call (both .btn-sized), not tucked into the secondary Group-by row — sized up to match rather than reading as a smaller, lesser control beside them. */ .segmented-lg { padding: 0.25rem; flex-shrink: 0; } .segmented-lg button { font-size: 0.92rem; padding: 0.6rem 1.15rem; } /* Five segments don't reliably fit a phone width without wrapping onto a cramped extra line — scrolls horizontally instead, with the same fade-to-edge mask already used on .message-list, so a cut-off segment reads as "more this way" rather than looking clipped. Harmless (mask has nothing to fade) whenever the segments already fit without scrolling. */ .segmented-scroll { overflow-x: auto; flex: 0 1 auto; min-width: 0; scrollbar-width: none; -ms-overflow-style: none; } .segmented-scroll::-webkit-scrollbar { display: none; } .segmented-scroll { mask-image: linear-gradient(to right, black calc(100% - 1.25rem), transparent); -webkit-mask-image: linear-gradient(to right, black calc(100% - 1.25rem), transparent); } /* ---- Queue stat widgets ---- */ #queue-stats { display: flex; gap: 0.9rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .queue-stat-tile { flex: 1 1 140px; background: var(--tile); border-radius: var(--radius-card); box-shadow: var(--shadow-tile); padding: 0.9rem 1rem; } .queue-stat-value { font-size: 1.6rem; font-weight: 700; color: var(--ink); line-height: 1.1; } .queue-stat-value.is-overdue { color: var(--danger); } .queue-stat-label { font-size: 0.78rem; color: var(--muted); margin-top: 0.2rem; } /* ---- Queue rows ---- */ /* flex-wrap so a task with several tag pills overflows onto a second line instead of squeezing the title column (flex:1, no minimum width) down to a sliver it has to wrap word-by-word to fit. */ .queue-row { display: flex; align-items: center; gap: 0.6rem 0.9rem; flex-wrap: wrap; border-radius: var(--radius-card); box-shadow: var(--shadow-tile); padding: 0.9rem 1.15rem; margin-bottom: 0.7rem; cursor: pointer; } .task-title { font-weight: 500; color: var(--ink); font-size: 0.94rem; } .task-title.is-done { text-decoration: line-through; color: var(--muted); } .space-name-muted { color: var(--muted); font-size: 0.8rem; margin-top: 1px; } /* ---- Status / priority pills ---- */ .pill { font-size: 0.72rem; font-weight: 600; padding: 0.22rem 0.7rem; border-radius: var(--radius-pill); white-space: nowrap; display: inline-flex; align-items: center; gap: 0.3rem; /* Category names and tags are both free-form/user-authored text with no hard length limit enforced everywhere (tags are capped server-side, but this also covers any legacy data from before that cap existed) — truncate rather than let a long value overflow the card/row. */ max-width: 12rem; overflow: hidden; text-overflow: ellipsis; } .pill .icon { width: 0.85em; height: 0.85em; flex-shrink: 0; } .pill-sage { background: var(--sage); color: var(--ink-on-accent); } .pill-clay { background: var(--clay); color: var(--ink-on-accent); } .pill-honey { background: var(--honey); color: var(--ink-on-accent); } .pill-todo { background: transparent; color: var(--muted); border: 1px solid rgba(var(--muted-rgb),0.4); } .pill-danger { background: var(--danger); color: var(--on-accent); } .pill-success { background: var(--success); color: var(--on-accent); } .pill-warning { background: var(--warning); color: var(--on-accent); } .pill-info { background: var(--info); color: var(--on-accent); } .avatar { width: 26px; height: 26px; border-radius: 50%; color: var(--on-accent); font-size: 0.68rem; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; } .collab-avatars { display: flex; } .collab-avatars .avatar { margin-left: -8px; border: 2px solid var(--canvas); } .collab-avatars .avatar:first-child { margin-left: 0; } .avatar-unassigned { background: rgba(var(--ink-rgb),0.12); color: var(--muted); border: 1px dashed rgba(var(--ink-rgb),0.3); } .account-avatar-preview .avatar { width: 56px; height: 56px; font-size: 1.1rem; } /* ---- Live cursor presence (quill-cursors) on collaborative note pages ---- quill-cursors' default "name flag" is a wide pill that only shows briefly on move/hover — restyled here into a small persistent avatar-style badge (matching .avatar above) that stays visible, centered above the caret. */ #note-editor .ql-cursor .ql-cursor-flag { opacity: 1 !important; visibility: visible !important; transition: none !important; width: 20px !important; height: 20px !important; border-radius: 50%; padding: 0; display: flex; align-items: center; justify-content: center; transform: translate3d(-50%, -130%, 0) !important; cursor: default; } #note-editor .ql-cursor .ql-cursor-name { margin: 0 !important; font-size: 0.6rem; font-weight: 700; color: #fff; white-space: nowrap; } /* Positioned in JS via getBoundingClientRect() against the hovered badge — appended to rather than nested inside it so it isn't clipped by quill-cursors' own .ql-container{overflow:hidden}. */ .note-cursor-tooltip { position: fixed; transform: translate(-50%, calc(-100% - 8px)); background: var(--tile); color: var(--ink); border-radius: var(--radius-card); box-shadow: var(--shadow-modal); padding: 0.4rem 0.6rem; font-size: 0.8rem; white-space: nowrap; pointer-events: none; z-index: 35; display: flex; flex-direction: column; gap: 0.1rem; } .note-cursor-tooltip.hidden { display: none; } .note-cursor-tooltip strong { font-weight: 700; } .note-cursor-tooltip span { color: var(--muted); font-size: 0.72rem; } /* ---- Task checklist / subtasks ---- */ .checklist-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0; } .checklist-item-text { flex: 1; font-size: 0.9rem; } .checklist-item-text.is-done { text-decoration: line-through; color: var(--muted); } .checklist-item-actions { display: flex; gap: 0.1rem; flex-shrink: 0; } .checklist-icon-btn { background: none; border: none; cursor: pointer; color: var(--muted); padding: 0.3rem; display: flex; align-items: center; border-radius: 6px; } .checklist-icon-btn:hover { color: var(--ink); background: rgba(var(--ink-rgb),0.06); } .checklist-icon-btn .icon { width: 1rem; height: 1rem; } /* The chip a promoted checklist item becomes — deliberately styled like a link (info color, pill shape) rather than a plain row, so it's visually obvious this item now points at a real task elsewhere instead of just being text with a checkbox. */ .checklist-chip { flex: 1; background: rgba(var(--info-rgb),0.1); color: var(--info); border: none; cursor: pointer; font-size: 0.85rem; font-weight: 600; padding: 0.4rem 0.75rem; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 0.4rem; text-align: left; max-width: 100%; overflow: hidden; } .checklist-chip:hover { background: rgba(var(--info-rgb),0.18); } .checklist-chip .icon { width: 0.85em; height: 0.85em; flex-shrink: 0; } .checklist-chip-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .checklist-chip-title.is-done { text-decoration: line-through; opacity: 0.7; } .promoted-from-chip { display: inline-flex; align-items: center; gap: 0.35rem; background: rgba(var(--sage-rgb),0.18); color: var(--ink); font-size: 0.78rem; font-weight: 600; padding: 0.3rem 0.65rem; border-radius: var(--radius-pill); border: none; cursor: pointer; } .promoted-from-chip:hover { background: rgba(var(--sage-rgb),0.3); } /* ---- Notes — Quill rich text, Yjs-collaborative for space notes via y-quill (architecture doc Section 4, mockups Screen 5); plain load/save-on-change for per-task notes, no CRDT needed there. Quill draws its own toolbar/editor chrome (loaded via the quill.snow.css CDN link) — these rules just make it match the rest of this form language instead of Quill's stock look. ---- */ /* Note folder/page tree — rendered inline in the left sidebar under the active note space's own link (see spaceLink()/renderNoteTreeHtml() in app.js), not as a separate panel in the content area, so it reads as part of the app's normal navigation instead of a one-off widget. */ .note-sidebar-tree { margin: 0.2rem 0 0.5rem 0.6rem; } .note-tree-actions { display: flex; gap: 0.3rem; margin-bottom: 0.4rem; } .note-tree-action-btn { flex: 1; font-family: var(--font); font-size: 0.78rem; font-weight: 600; color: var(--muted); background: none; border: 1px dashed rgba(var(--ink-rgb),0.3); border-radius: var(--radius-pill); padding: 0.4rem 0.65rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.3rem; } .note-tree-action-btn:hover { color: var(--ink); border-color: rgba(var(--ink-rgb),0.5); } /* Replaces four separate always-visible Page/Folder/Table/Import buttons with one "+ Add" trigger — same anchored-dropdown shape as .settings-menu, just relative-positioned instead of fixed since it lives inline in the sidebar rather than the top-right corner. Item rows reuse .settings-menu-item directly rather than duplicating that styling. */ .note-add-menu { position: relative; flex: 1; display: flex; } .note-add-menu-dropdown { position: absolute; top: calc(100% + 0.3rem); left: 0; width: 170px; z-index: 5; background: var(--tile); border-radius: var(--radius-card); box-shadow: var(--shadow-modal); padding: 0.4rem; display: flex; flex-direction: column; gap: 0.1rem; } .note-tree-row { display: flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.4rem; border-radius: 8px; cursor: pointer; font-size: 0.82rem; color: var(--ink); } .note-tree-row:hover { background: rgba(var(--ink-rgb),0.06); } .note-tree-row.is-active { background: var(--sage); color: var(--ink-on-accent); font-weight: 600; } .note-tree-row.is-drag-over { box-shadow: inset 0 0 0 2px var(--sage); } .note-tree-row.is-dragging { opacity: 0.4; } .note-tree-toggle { width: 0.9rem; flex-shrink: 0; background: none; border: none; cursor: pointer; color: var(--muted); font-size: 0.65rem; padding: 0; display: flex; align-items: center; justify-content: center; } .note-tree-row .icon { flex-shrink: 0; color: var(--muted); width: 0.95em; height: 0.95em; } .note-tree-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .note-tree-row-actions { display: none; gap: 0.2rem; flex-shrink: 0; } .note-tree-row:hover .note-tree-row-actions { display: flex; } .note-tree-icon-btn { background: none; border: none; cursor: pointer; color: var(--muted); padding: 0.3rem; display: flex; border-radius: 6px; } .note-tree-icon-btn:hover { color: var(--ink); background: rgba(var(--ink-rgb),0.08); } .note-tree-icon-btn .icon { width: 0.9em; height: 0.9em; } .note-tree-children { margin-left: 0.9rem; } .note-tree-empty { color: var(--muted); font-size: 0.75rem; padding: 0.3rem 0.4rem; } .note-column { max-width: 600px; } .note-page-title { font-size: 1.05rem; margin: 0.2rem 0 0.8rem; color: var(--ink); } .note-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; } .note-meta-text { color: var(--muted); font-size: 0.8rem; } .note-body { width: 100%; } .note-body .ql-toolbar.ql-snow { border-radius: 10px 10px 0 0; border-color: rgba(var(--ink-rgb),0.18); font-family: var(--font); } .note-body .ql-container.ql-snow { border-radius: 0 0 10px 10px; border-color: rgba(var(--ink-rgb),0.18); } .note-body .ql-editor { font-family: var(--font); font-size: 0.96rem; line-height: 1.75; color: var(--ink); min-height: 60vh; } .sheet-notes-body .ql-editor { min-height: 140px; } /* ---- Note table view — a plain versioned grid, not a Yjs doc; see the comment on POST /api/spaces/:spaceId/pages in server.js for why. ---- */ .note-table-actions { display: flex; gap: 0.4rem; margin-bottom: 0.75rem; } .note-table-scroll { overflow-x: auto; max-width: 100%; } .note-table { border-collapse: collapse; font-size: 0.88rem; } .note-table th, .note-table td { border: 1px solid rgba(var(--ink-rgb),0.15); padding: 0; background: var(--tile); } .note-table-corner { background: transparent; border: none; } .note-table-cell { font-family: var(--font); font-size: 0.88rem; color: var(--ink); background: none; border: none; padding: 0.5rem 0.6rem; width: 140px; min-width: 100px; } .note-table-cell:focus { outline: 2px solid var(--focus); outline-offset: -2px; } /* The first data row reads as a header purely by styling convention — the underlying data is a plain 2D array with no structural distinction, so this is the only thing that makes it look like one. */ .note-table tbody tr:first-child .note-table-cell { font-weight: 700; } .note-table-row-handle, .note-table th { position: relative; } .note-table-delete-btn { background: none; border: none; cursor: pointer; color: var(--muted); padding: 0.3rem; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .note-table-delete-btn:hover { color: var(--danger); } .note-table-delete-btn .icon { width: 0.7em; height: 0.7em; } .note-table-row-handle { width: 1.6rem; background: rgba(var(--ink-rgb),0.04); } /* ---- Calling — bare-bones P2P, no SFU (architecture doc Section 7) ---- */ .call-toggle-btn { background: transparent; border: 1px solid rgba(var(--ink-rgb),0.3); color: var(--ink); } .call-toggle-btn.is-active { background: var(--danger); color: var(--on-accent); border-color: transparent; } .call-panel { margin-bottom: 1.5rem; } .call-controls { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; } .call-grid { display: flex; gap: 0.9rem; flex-wrap: wrap; } .call-tile { position: relative; width: 200px; height: 150px; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-tile); background: var(--ink); } .call-tile video { width: 100%; height: 100%; object-fit: cover; display: block; } .call-tile-label { position: absolute; left: 0.5rem; bottom: 0.5rem; font-size: 0.72rem; font-weight: 600; color: var(--on-accent); background: rgba(var(--scrim-rgb),0.55); padding: 0.15rem 0.5rem; border-radius: var(--radius-pill); } /* ---- Voice channels — persistent, join-anytime rooms (distinct from the ad-hoc space calls above). This floating indicator is a direct child of #app-shell in the HTML (not nested in any view), so it stays visible across every navigation while connected — same z-index tier as .settings-menu/.notif-menu since it's another persistent chrome element. ---- */ .voice-indicator { position: fixed; bottom: 1.25rem; right: 1.5rem; z-index: 19; display: flex; align-items: center; gap: 0.6rem; background: var(--tile); border-radius: var(--radius-pill); box-shadow: var(--shadow-modal); padding: 0.5rem 0.6rem 0.5rem 1rem; font-size: 0.85rem; font-weight: 600; color: var(--ink); } .voice-indicator-btn { background: transparent; border: 1px solid rgba(var(--ink-rgb),0.25); color: var(--ink); border-radius: var(--radius-pill); padding: 0.35rem 0.7rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; } .voice-indicator-btn.is-active { background: rgba(var(--ink-rgb),0.12); } .voice-indicator-btn.is-danger { border-color: transparent; background: var(--danger); color: var(--on-accent); } /* ---- Kanban board ---- */ /* Categories are user-defined and can grow past however many columns fit in the viewport at once (unlike the old fixed 4-status pipeline) — the board scrolls horizontally instead of squeezing columns illegibly thin or silently overflowing off-screen with no way to reach them. */ .board { display: flex; gap: 1.1rem; align-items: flex-start; overflow-x: auto; padding-bottom: 0.5rem; } .board-col { flex: 1 0 220px; min-width: 220px; min-height: 3rem; border-radius: var(--radius-card); transition: background-color 120ms ease, box-shadow 120ms ease; /* A column with many tasks used to grow the whole page's scroll height instead of scrolling on its own — every other column (and the page header/sidebar) scrolled along with it, making it impossible to compare two columns side by side once either had enough cards to scroll at all. --board-col-max-height is set by updateBoardColMaxHeight() in app.js from the board's actual measured position, not a guessed constant — a fixed "100vh minus an estimate of everything above the board" can't be right at every viewport height, since the header/ filter row above the board is a roughly fixed pixel amount while 100vh scales with the screen, so any fixed guess is either too tight on a short viewport or (as originally shipped here) wastes a growing amount of space below the column on a tall one. The calc() fallback only matters for the brief window before JS first runs. Even if the JS value is ever off, min-height above still wins over max-height when they conflict (CSS's own conflict-resolution rule) — the column is never at real risk of collapsing to an unusable sliver. */ max-height: var(--board-col-max-height, calc(100vh - 20rem)); overflow-y: auto; } .board-col.is-drag-over { background: rgba(var(--sage-rgb),0.15); box-shadow: inset 0 0 0 2px var(--sage); } /* Pinned to the top of its own column's scroll area (not the page's) so the "12 tasks" count and column name stay visible while scrolling through a long column — background matches the page so cards scrolling underneath don't show through the sticky header transparently. .board-col's overflow-y: auto (added above) combined with its 20px border-radius means content is now actually clipped to the rounded-rect shape, not just visually rounded — .board-card already clears that via its own padding, but this header used to sit flush at the column's (0,0) origin with none, so its first character(s) were clipped by the corner curve. padding-top+padding-left here (rather than adding padding to .board-col itself) clears the curve without touching the scroll- height budget tuned above. */ .board-col-header { position: sticky; top: 0; background: var(--canvas); padding: 0.5rem 0 0.4rem 0.5rem; z-index: 1; } .board-col-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.8rem; font-size: 0.82rem; font-weight: 600; color: var(--muted); } .board-card { border-radius: var(--radius-card); box-shadow: var(--shadow-tile); padding: 0.9rem 1rem; margin-bottom: 0.75rem; cursor: pointer; } .board-card.is-dragging { opacity: 0.4; } .board-card-title { font-weight: 500; font-size: 0.9rem; margin-bottom: 0.55rem; } .board-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 0.6rem; } .board-card-status-select { font-size: 0.72rem; color: var(--muted); background: var(--canvas); cursor: pointer; border: 1px solid rgba(var(--ink-rgb),0.15); border-radius: 6px; padding: 0.15rem 0.35rem; max-width: 60%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .board-card-status-select:hover { color: var(--ink); } /* ---- Grid view: a flat, sortable, spreadsheet-style alternative to the column board — every task in the space as one row, no grouping. Reuses .tile-surface's own shadow-tile via the table sitting on --tile directly rather than each row being its own elevated card, since a dense table reads better as one contained surface than N stacked tiles. Clicking a row opens the same task sheet a board card's click does — this view only changes how tasks are laid out to look at, not how they're edited. */ .grid-table-scroll { overflow-x: auto; border-radius: var(--radius-card); box-shadow: var(--shadow-tile); background: var(--tile); } .grid-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .grid-table th { text-align: left; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); padding: 0.75rem 1rem; cursor: pointer; white-space: nowrap; user-select: none; border-bottom: 1px solid rgba(var(--ink-rgb),0.1); } .grid-table th:hover { color: var(--ink); } /* ▲/▼ only rendered on whichever header is actually driving the current sort — a static arrow on every header would look like every column is sorted at once, which is never true. */ .grid-table th.is-sorted-asc::after { content: ' \25B2'; font-size: 0.65em; } .grid-table th.is-sorted-desc::after { content: ' \25BC'; font-size: 0.65em; } .grid-table td { padding: 0.7rem 1rem; border-bottom: 1px solid rgba(var(--ink-rgb),0.07); vertical-align: middle; } .grid-table tr:last-child td { border-bottom: none; } .grid-row { cursor: pointer; } .grid-row:hover td { background: rgba(var(--ink-rgb),0.035); } .grid-cell-title { font-weight: 500; color: var(--ink); } .grid-cell-title.is-done { text-decoration: line-through; color: var(--muted); } .grid-cell-empty { color: var(--muted); } /* ---- Calendar view ---- */ .calendar-weekday-row, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); } .calendar-weekday-row { gap: 0.5rem; margin-bottom: 0.5rem; text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .calendar-grid { gap: 0.5rem; } /* min-width: 0 overrides the grid-item default of min-width: auto — without it, a long task title (via .calendar-task-chip's own white-space: nowrap) forces its whole column wider than 1fr instead of eliding, pushing the 7-column grid past the viewport on a narrow screen. Same fix, same reasoning as .main-panel's identical override elsewhere in this file. */ .calendar-day-cell { min-width: 0; min-height: 6.5rem; border-radius: var(--radius-card); background: var(--tile); box-shadow: var(--shadow-tile); padding: 0.5rem; display: flex; flex-direction: column; gap: 0.3rem; } /* A day outside the currently-viewed month still needs to render (it fills out the grid's leading/trailing week) but shouldn't visually compete with the month actually being looked at. */ .calendar-day-cell.is-other-month { opacity: 0.45; } .calendar-day-cell.is-today { box-shadow: var(--shadow-tile), inset 0 0 0 2px var(--sage); } .calendar-day-number { font-size: 0.8rem; font-weight: 600; color: var(--muted); } .calendar-day-cell.is-today .calendar-day-number { color: var(--ink); } /* Cell height is fixed (min-height above) rather than growing with content — a day with many due tasks scrolls internally instead of blowing out every other cell in its row to match. */ .calendar-day-tasks { display: flex; flex-direction: column; gap: 0.2rem; overflow-y: auto; min-height: 0; flex: 1; } .calendar-task-chip { font-family: var(--font); font-size: 0.72rem; text-align: left; border: none; cursor: pointer; background: rgba(var(--info-rgb),0.12); color: var(--ink); border-radius: 6px; padding: 0.2rem 0.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; } .calendar-task-chip:hover { background: rgba(var(--info-rgb),0.22); } .calendar-task-chip.is-urgent { background: rgba(var(--clay-rgb),0.2); } .calendar-task-chip.is-urgent:hover { background: rgba(var(--clay-rgb),0.32); } .calendar-task-chip.is-done { text-decoration: line-through; color: var(--muted); background: rgba(var(--ink-rgb),0.08); } .btn { font-family: var(--font); font-weight: 600; font-size: 0.92rem; border: none; cursor: pointer; padding: 0.65rem 1.25rem; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; } .btn-primary { background: var(--sage); color: var(--ink-on-accent); } /* .btn.btn-icon-only (not a bare .btn-icon-only rule) — a single-class selector here would tie on specificity with .btn's own padding above and lose since source order would put .btn last; PR #199 hit and fixed this exact trap once already for #space-header-more-btn's display toggle. Compounding onto .btn wins regardless of declaration order. */ .btn.btn-icon-only { padding: 0.65rem; border-radius: 50%; width: 2.6rem; height: 2.6rem; flex-shrink: 0; position: relative; } .btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } /* ---- Icon pack (Brand/Icons): monochrome SVGs rendered via mask-image so they inherit currentColor through background-color — no inline-SVG duplication and no build step to tint them per-button/per-state. Size is controlled by font-size since width/height are set in em. ---- */ .icon { display: inline-block; width: 1.05em; height: 1.05em; flex-shrink: 0; background-color: currentColor; vertical-align: -0.15em; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .icon-add { -webkit-mask-image: url(icons/add.svg); mask-image: url(icons/add.svg); } .icon-bell { -webkit-mask-image: url(icons/bell.svg); mask-image: url(icons/bell.svg); } .icon-calendar { -webkit-mask-image: url(icons/calendar.svg); mask-image: url(icons/calendar.svg); } .icon-call { -webkit-mask-image: url(icons/call.svg); mask-image: url(icons/call.svg); } .icon-camera-off { -webkit-mask-image: url(icons/camera-off.svg); mask-image: url(icons/camera-off.svg); } .icon-check { -webkit-mask-image: url(icons/check.svg); mask-image: url(icons/check.svg); } .icon-close { -webkit-mask-image: url(icons/close.svg); mask-image: url(icons/close.svg); } .icon-delete { -webkit-mask-image: url(icons/delete.svg); mask-image: url(icons/delete.svg); } .icon-edit { -webkit-mask-image: url(icons/edit.svg); mask-image: url(icons/edit.svg); } .icon-emoji { -webkit-mask-image: url(icons/emoji.svg); mask-image: url(icons/emoji.svg); } .icon-filter { -webkit-mask-image: url(icons/filter.svg); mask-image: url(icons/filter.svg); } .icon-folder { -webkit-mask-image: url(icons/folder.svg); mask-image: url(icons/folder.svg); } .icon-grip { -webkit-mask-image: url(icons/grip.svg); mask-image: url(icons/grip.svg); } .icon-menu { -webkit-mask-image: url(icons/menu.svg); mask-image: url(icons/menu.svg); } .icon-message { -webkit-mask-image: url(icons/message.svg); mask-image: url(icons/message.svg); } .icon-page { -webkit-mask-image: url(icons/page.svg); mask-image: url(icons/page.svg); } .icon-pin { -webkit-mask-image: url(icons/pin.svg); mask-image: url(icons/pin.svg); } .icon-reply { -webkit-mask-image: url(icons/reply.svg); mask-image: url(icons/reply.svg); } .icon-search { -webkit-mask-image: url(icons/search.svg); mask-image: url(icons/search.svg); } .icon-send { -webkit-mask-image: url(icons/send.svg); mask-image: url(icons/send.svg); } .icon-settings { -webkit-mask-image: url(icons/settings.svg); mask-image: url(icons/settings.svg); } .icon-star { -webkit-mask-image: url(icons/star.svg); mask-image: url(icons/star.svg); } .icon-table { -webkit-mask-image: url(icons/table.svg); mask-image: url(icons/table.svg); } .icon-user { -webkit-mask-image: url(icons/user.svg); mask-image: url(icons/user.svg); } .icon-video { -webkit-mask-image: url(icons/video.svg); mask-image: url(icons/video.svg); } .modal-close-btn { position: absolute; top: 1.1rem; right: 1.25rem; background: none; border: none; cursor: pointer; color: var(--muted); padding: 0.25rem; line-height: 1; } .modal-close-btn:hover { color: var(--ink); } .modal-close-btn .icon { width: 1.15em; height: 1.15em; } .field-input { width: 100%; padding: 0.6rem 0.75rem; border-radius: 10px; margin-bottom: 0.8rem; border: 1px solid rgba(var(--ink-rgb),0.18); background: var(--tile); color: var(--ink); font-family: var(--font); font-size: 0.88rem; } .field-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* ---- Multi-tag chip input — same visual chrome as .field-input, but a flex container holding rendered chips plus the actual text input rather than being the input itself. ---- */ .tag-chip-input { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; border: 1px solid rgba(var(--ink-rgb),0.18); border-radius: 10px; padding: 0.4rem 0.5rem; background: var(--tile); margin-bottom: 0.8rem; } .tag-chip-input:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; } .tag-chip-list { display: flex; flex-wrap: wrap; gap: 0.35rem; } .tag-chip { display: inline-flex; align-items: center; gap: 0.3rem; } .tag-chip-remove { background: none; border: none; cursor: pointer; display: inline-flex; padding: 0; color: inherit; opacity: 0.8; } .tag-chip-remove:hover { opacity: 1; } .tag-chip-remove .icon { width: 0.7em; height: 0.7em; } .tag-chip-text { flex: 1 1 6rem; min-width: 6rem; border: none; background: none; outline: none; font: inherit; color: var(--ink); padding: 0.15rem 0; } /* ---- Multi-assignee checklist — a known, fixed roster (team members), so a checkbox list fits better than the tag chip-input's free-text model. Same row shape as .checklist-item above, minus the done/remove affordances. ---- */ .assignee-checklist { border: 1px solid rgba(var(--ink-rgb),0.18); border-radius: 10px; padding: 0.3rem 0.6rem; margin-bottom: 0.8rem; max-height: 160px; overflow-y: auto; } .assignee-checklist-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; font-size: 0.88rem; cursor: pointer; } .assignee-checklist-row input[type="checkbox"] { flex-shrink: 0; } /* Height is set directly on the element by the auto-grow input listener (see app.js) as content wraps to multiple lines — resize/scroll are disabled so it never shows its own scrollbar or a manual drag handle. min-height matters even though the listener also runs on every input: an EMPTY textarea's scrollHeight is 0 in Chrome once its own height is reset to 'auto' (there's no content to size to yet), so without a floor here the field would render half-collapsed, clipping its own placeholder, every time the modal opens — not an edge case, its default resting state. Matches .field-input's own rendered height (padding + one line at this font-size) so it looks identical to the plain it replaced and to the tag field right below it. */ .auto-grow-textarea { resize: none; overflow: hidden; line-height: 1.35; min-height: 2.35rem; } /* Native