/* ========================================================================= Nopea design system One place for tokens and components. Every page reuses these classes — do not restyle a component locally, extend it here instead. ========================================================================= */ :root { /* Brand. --brand the fill: buttons, the logo mark, active accents --on-brand what sits ON that fill --brand-text brand colour used as TEXT on a light surface --brand-soft a pale tint for active rows and focus halos Light mode uses the Aerion blue. It is dark enough to carry white text and to be read as link text, so --on-brand is white and --brand-text is the brand colour itself. Dark mode keeps the teal below. */ --brand: #1C46F2; --on-brand: #FFFFFF; --brand-text: #1C46F2; --brand-soft: #E8EDFE; --brand-hover: #1739C9; --bg: #F6F7F9; --surface: #FFFFFF; --surface-2: #FAFBFB; --sidebar: #FFFFFF; --border: #E3E7E8; --border-strong: #CFD6D7; --text: #16181D; --text-muted: #626B6E; --text-faint: #8B9397; --ok: #10B981; --warn: #F59E0B; --danger: #EF4444; --info: #0EA5E9; --purple: #8B5CF6; --radius: 10px; --radius-sm: 7px; --radius-lg: 14px; --shadow-sm: 0 1px 2px rgba(16, 18, 23, .06); --shadow: 0 4px 16px rgba(16, 18, 23, .09); --shadow-lg: 0 18px 48px rgba(16, 18, 23, .18); --sidebar-w: 284px; --topbar-h: 56px; /* The reading column. The sidebar stays pinned left; page content is capped and centred so a very wide monitor does not stretch a table to 2000px. */ --page-w: 1300px; /* Two faces: Space Grotesk for headings, Inter Tight for everything else. The stacks after each one are what shows while the webfont loads, or if it never arrives. */ --font: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-head: 'Space Grotesk', 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; } [data-theme='dark'] { --brand: #7BB4BC; --on-brand: #10262A; --brand-text: #93C2C9; --brand-soft: #1B2C30; --brand-hover: #8DC1C8; --bg: #121618; --surface: #171C1F; --surface-2: #1D2428; --sidebar: #151A1C; --border: #252D31; --border-strong: #323B40; --text: #E4E9EA; --text-muted: #9AA6AA; --text-faint: #6E7B80; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 4px 18px rgba(0, 0, 0, .45); --shadow-lg: 0 20px 52px rgba(0, 0, 0, .6); } * { box-sizing: border-box; } /* Headings and the big display numbers carry the heading face. Everything else inherits the body face from . */ h1, h2, h3, h4, h5, h6, .brand-name, .stat .value, .stat-line, .donut-total, .auth-card h1, .modal-head h3 { font-family: var(--font-head); letter-spacing: -.01em; } html, body { margin: 0; height: 100%; font-family: var(--font); background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--brand-text); text-decoration: none; } a:hover { text-decoration: underline; } button { font-family: inherit; font-size: inherit; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-track { background: transparent; } /* ------------------------------------------------------------- app shell -- */ /* One bar across the top, the menu and the page beneath it. The bar is not part of the menu, so collapsing the menu leaves the workspace name, the search and the actions exactly where they were. */ .app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: var(--topbar-h) 1fr; height: 100vh; transition: grid-template-columns .16s ease; } .app > .topbar { grid-column: 1 / -1; } .app.collapsed { grid-template-columns: 0 1fr; } .app.collapsed .sidebar { border-right: none; } .panel-btn { border: none; background: none; cursor: pointer; flex: none; color: var(--text-faint); border-radius: 6px; padding: 5px; display: grid; place-items: center; line-height: 0; } .panel-btn:hover { background: var(--surface-2); color: var(--text); } .panel-btn .icon { width: 18px; height: 18px; } .panel-btn svg { width: 18px; height: 18px; } .sidebar { background: var(--sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; } .logo { width: 26px; height: 26px; border-radius: 8px; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; } .sidebar-scroll { overflow-y: auto; padding: 12px 8px 24px; flex: 1; } .nav-item { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; user-select: none; font-size: 15px; font-weight: 500; border: none; background: none; width: 100%; text-align: left; } .nav-item:hover { background: var(--surface-2); color: var(--text); } .nav-item.active { background: var(--brand-soft); color: var(--brand-text); font-weight: 600; } .nav-item .icon { width: 16px; height: 16px; flex: none; } .nav-item .count { margin-left: auto; font-size: 14px; color: var(--text-faint); } .nav-item .pill { margin-left: auto; background: var(--danger); color: #fff; border-radius: 999px; font-size: 10px; padding: 1px 6px; font-weight: 700; } /* A badge with nothing to say takes no room. */ .pill.none { display: none; } .nav-group-title { display: flex; align-items: center; gap: 6px; padding: 14px 10px 6px; font-size: 14px; font-weight: 600; color: var(--text-faint); letter-spacing: .02em; } .nav-group-title button { margin-left: auto; border: none; background: none; cursor: pointer; color: var(--text-faint); border-radius: 5px; padding: 2px 5px; line-height: 1; } .nav-group-title button:hover { background: var(--surface-2); color: var(--text); } .nav-children { margin: 2px 0 8px 13px; padding-left: 9px; border-left: 1px solid var(--border); } .nav-toggle { position: relative; width: 16px; height: 16px; flex: none; display: grid; place-items: center; cursor: pointer; } .nav-toggle .icon, .nav-toggle .chev { grid-area: 1 / 1; display: grid; place-items: center; transition: opacity .12s ease, transform .15s ease; } .nav-toggle .chev { opacity: 0; } .nav-item:hover .nav-toggle .icon { opacity: 0; } .nav-item:hover .nav-toggle .chev { opacity: 1; } .nav-toggle .chev.open { transform: rotate(180deg); } .nav-add { border: none; background: none; cursor: pointer; color: var(--text-faint); border-radius: 5px; padding: 1px 6px; line-height: 1; font-size: 15px; flex: none; } .nav-add:hover { background: var(--surface-2); color: var(--text); } .tree-client > .row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14.5px; font-weight: 550; color: var(--text); } .tree-client > .row:hover { background: var(--surface-2); } .tree-children { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--border); } /* One row, always. A nested row is narrower than the ones above it, and without this the key wraps onto a second line and the list goes ragged. */ .tree-project { display: flex; align-items: center; gap: 8px; padding: 5px 9px; border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; font-size: 14px; white-space: nowrap; min-width: 0; } .tree-project > .truncate { min-width: 0; flex: 1 1 auto; } .tree-project:hover { background: var(--surface-2); color: var(--text); } .tree-project.active { background: var(--brand-soft); color: var(--brand-text); font-weight: 600; } .tree-project .key { font-family: var(--mono); font-size: 14px; color: var(--text-faint); margin-left: auto; flex: none; white-space: nowrap; max-width: 45%; overflow: hidden; text-overflow: ellipsis; } .tree-cat { font-size: 14px; color: var(--text-faint); padding: 6px 9px 2px; font-weight: 600; } /* Starred things that belong together: a project under its client, an issue under that project. The rule down the left says they belong together without needing a second heading. */ .tree-project.tree-nested, .tree-project.tree-nested-2 { padding-left: 11px; position: relative; } .tree-project.tree-nested { margin-left: 18px; } .tree-project.tree-nested-2 { margin-left: 34px; } .tree-project.tree-nested::before, .tree-project.tree-nested-2::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: var(--border-strong); } .tree-project.tree-nested-2::before { opacity: .65; } .star-btn-bare { border: none; background: none; cursor: pointer; padding: 0; } /* Row stars stay out of the way until you are on the row. */ .row-star { opacity: 0; margin-left: 6px; transition: opacity .12s ease; } .tree-project:hover .row-star, .tree-client > .row:hover .row-star, .row-star.on { opacity: 1; } .row-star.on { color: var(--warn); } .nav-caption { font-size: 14px; font-weight: 650; color: var(--text-faint); padding: 8px 9px 3px; letter-spacing: .02em; } .tree-more { color: var(--brand-text); font-weight: 550; font-size: 14px; } .more-row { border: 1px solid var(--border); margin-top: 4px; } .more-row .more-chevron { margin-left: auto; font-size: 16px; line-height: 1; color: var(--text-faint); } .more-row:hover, .more-row.open { border-color: var(--brand); color: var(--brand-text); } .more-row.open { background: var(--brand-soft); } /* ---------------------------------------------------------- category card */ /* The card answers "how much of this service line is running" and then hands you off to the projects page filtered to it, rather than trying to be a second project list of its own. */ .cat-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .cat-card > * { min-width: 0; } .cat-card:hover { border-color: var(--brand); } .cat-head { display: flex; align-items: center; gap: 8px; } .cat-head h3 { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -.01em; } .cat-head .spacer { margin-left: auto; } .cat-head .btn { flex: none; } /* Three figures, three columns — the card-width reflow that suits a client card's four would leave this one with a hole in it. */ .cat-card .pc-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cat-preview { display: flex; flex-direction: column; } .cat-line { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 0; font-size: 14px; border-top: 1px solid var(--border); } .cat-line:first-child { border-top: none; } .cat-line:hover { color: var(--brand-text); } .cat-line .spacer { margin-left: auto; } .cat-client { max-width: 42%; } .cat-empty { margin: 0; } .cat-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13.5px; font-weight: 550; color: var(--brand-text); } /* ------------------------------------------------------------ client icons */ /* The mark sits on the client's own colour, so a client reads the same way in the menu, on its page and in a picker: shape says who, colour confirms. */ .cicon { display: inline-grid; place-items: center; flex: none; color: #fff; line-height: 0; } .logo-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .logo-row .tiny { flex-basis: 100%; } .cicon-logo { background-size: cover; background-position: center; background-repeat: no-repeat; background-color: var(--surface-2); } .dd-cicon { width: 18px; height: 18px; border-radius: 5px; } .icon-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; } .icon-tile { aspect-ratio: 1; width: 100%; border: none; padding: 0; cursor: pointer; border-radius: 8px; display: grid; place-items: center; color: #fff; box-shadow: 0 0 0 0 transparent; transition: box-shadow .12s, transform .12s; } .icon-tile:hover { transform: translateY(-1px); } .icon-tile.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand); } .icon-tile:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; } @media (max-width: 640px) { .icon-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* ----------------------------------------------------------- client flyout */ /* Opens beside the menu instead of inside it, so the rest of the navigation stays where it was while you look for a client. */ .fly { position: fixed; z-index: 120; width: 300px; max-height: min(70vh, 560px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); overflow: hidden; } .fly-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); font-weight: 650; font-size: 14px; font-family: var(--font-head); } .fly-close { margin-left: auto; border: none; background: none; cursor: pointer; color: var(--text-faint); font-size: 18px; line-height: 1; padding: 0 2px; } .fly-close:hover { color: var(--text); } .fly-search { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); color: var(--text-faint); } .fly-search .icon { display: inline-grid; place-items: center; line-height: 0; flex: none; } .fly-search input { flex: 1; min-width: 0; border: none; background: none; outline: none; color: var(--text); font: inherit; font-size: 14px; padding: 2px 0; } .fly-list { overflow: auto; padding: 6px; flex: 1; min-height: 0; } .fly-group { font-size: 12.5px; font-weight: 650; color: var(--text-faint); padding: 8px 8px 4px; letter-spacing: .02em; } .fly-group:first-child { padding-top: 2px; } .fly-opt { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 8px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; color: var(--text); } .fly-opt:hover { background: var(--surface-2); } .fly-opt .key { font-family: var(--mono); font-size: 13px; color: var(--text-faint); margin-left: auto; flex: none; } .fly-empty { padding: 14px 10px; font-size: 14px; color: var(--text-faint); } .fly-foot { padding: 9px 12px; border-top: 1px solid var(--border); font-size: 14px; font-weight: 550; color: var(--brand-text); cursor: pointer; } .fly-foot:hover { background: var(--surface-2); } .star-btn { color: var(--text-faint); display: inline-grid; place-items: center; line-height: 0; } .star-btn:hover { color: var(--warn); } .star-btn.on { color: var(--warn); } .dot { width: 8px; height: 8px; border-radius: 3px; flex: none; } .caret { width: 12px; color: var(--text-faint); font-size: 14px; flex: none; transition: transform .12s; } .caret.open { transform: rotate(90deg); } /* ---------------------------------------------------------------- topbar -- */ .main { display: flex; flex-direction: column; min-width: 0; overflow: hidden; } .topbar { height: var(--topbar-h); flex: none; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--surface); border-bottom: 1px solid var(--border); } /* The app switcher, beside the menu switch: a mark and a name, nothing else. The row is the size of the thing you are aiming at, so it reads as a place to go rather than as a line in a menu. */ .app-mark { width: 26px; height: 26px; border-radius: 7px; flex: none; display: grid; place-items: center; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; } .app-mark svg { display: block; width: 26px; height: 26px; } .menu .opt:has(.app-name) { padding: 9px 11px; gap: 12px; align-items: center; } .app-name { font-size: 15px; font-weight: 600; color: var(--text); } /* The mark in the bar is the same mark, at the same size. */ .brand .logo { padding: 0; background: none; overflow: hidden; } .brand .logo svg { display: block; width: 26px; height: 26px; } /* The workspace, at the far left beside the menu switch. */ .brand { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--text); text-decoration: none; flex: none; padding: 4px 6px; margin-left: 2px; border-radius: var(--radius-sm); } .brand:hover { background: var(--surface-2); text-decoration: none; } .brand .brand-name { font-weight: 650; letter-spacing: -.01em; font-size: 15px; } @media (max-width: 720px) { .brand .brand-name { display: none; } } /* The search sits in the middle of the bar, not against the workspace. */ .topbar .search-box { margin: 0 auto; } /* The trail, on its own line above the page. */ .crumbbar { flex: none; padding: 10px 16px 0; display: flex; align-items: center; min-width: 0; } .crumbbar.empty { display: none; } .crumbs { display: flex; align-items: center; gap: 7px; min-width: 0; } .crumbs .sep { color: var(--text-faint); } .crumbs .here { font-weight: 650; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crumbs .muted { color: var(--text-muted); white-space: nowrap; } .crumb-link { color: var(--text-muted); white-space: nowrap; text-decoration: none; border-radius: 6px; padding: 2px 5px; margin: 0 -5px; transition: color .12s, background .12s; } .crumb-link:hover { color: var(--brand); background: var(--brand-soft); text-decoration: none; } .crumb-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; } .search-box { position: relative; flex: 1 1 420px; max-width: 520px; min-width: 140px; } .search-box input[type='search'] { width: 100%; padding-left: 32px; } .search-box .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-faint); } .search-results { position: absolute; top: 40px; left: 0; right: 0; z-index: 60; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); max-height: 60vh; overflow: auto; padding: 6px; } .search-results .group { font-size: 14px; color: var(--text-faint); padding: 8px 10px 4px; font-weight: 600; } .search-results .hit { padding: 7px 10px; border-radius: var(--radius-sm); cursor: pointer; display: flex; gap: 8px; align-items: center; } .search-results .hit:hover { background: var(--surface-2); } /* -------------------------------------------------------------- controls -- */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-weight: 550; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s; } .btn:hover { background: var(--surface-2); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); } .btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); } /* The brand as an outline: same weight as a primary button without claiming to be the one thing on the screen to press. */ .btn.outline { border-color: var(--brand); color: var(--brand-text); background: transparent; font-weight: 600; } .btn.outline:hover { background: var(--brand-soft); border-color: var(--brand); } .btn.ghost { border-color: transparent; background: transparent; color: var(--text-muted); } .btn.ghost:hover { background: var(--surface-2); color: var(--text); } .btn.danger { border-color: var(--danger); color: var(--danger); background: transparent; } .btn.danger:hover { background: rgba(239, 68, 68, .1); } .btn.sm { padding: 4px 9px; font-size: 14px; } .btn.icon-only { padding: 7px; } input[type='text'], input[type='email'], input[type='password'], input[type='number'], input[type='date'], input[type='search'], select, textarea { width: 100%; padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-family: inherit; font-size: 14px; outline: none; transition: border-color .12s, box-shadow .12s; } input:focus, select:focus, textarea:focus { border-color: var(--brand-text); box-shadow: 0 0 0 3px var(--brand-soft); } textarea { resize: vertical; min-height: 84px; line-height: 1.55; } .field { display: block; margin-bottom: 18px; } .modal-body .field > .field-label { font-size: 15px; } .modal-body .field input, .modal-body .field .dd-trigger, .modal-body .field textarea { font-size: 15px; } .modal-body .field:last-child { margin-bottom: 0; } .field > .field-label { /* Block, so the control always starts on the next line. `width: fit-content` keeps the clickable box the width of the words themselves, so blank space beside a label no longer forwards a click into the field's dropdown. */ display: block; width: fit-content; font-size: 14px; color: var(--text-muted); margin-bottom: 4px; font-weight: 550; cursor: default; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--border); flex: none; } .toolbar .spacer { margin-left: auto; } .toolbar .group { display: flex; align-items: center; gap: 8px; } /* Sizing meant for text fields — a checkbox or radio here would otherwise be stretched to 118px and float away from its label. */ .toolbar select, .toolbar input:not([type='checkbox']):not([type='radio']) { width: auto; min-width: 118px; padding: 5px 9px; font-size: 14px; } input[type='checkbox'], input[type='radio'] { width: auto; min-width: 0; flex: none; margin: 0; } .segmented { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px; } .segmented button { border: none; background: none; padding: 5px 12px; border-radius: 5px; color: var(--text-muted); cursor: pointer; font-weight: 550; display: inline-flex; gap: 6px; align-items: center; } .segmented button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); } /* The activity tabs, with the sort at the far end of the same line. */ .tab-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .tab-row .spacer { margin-left: auto; } .order-btn { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 30px; padding: 0 10px; border-radius: var(--radius-sm); border: 1px solid transparent; background: none; cursor: pointer; color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 600; } .order-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); } .order-btn .icon { display: grid; place-items: center; line-height: 0; } @media (max-width: 720px) { .order-btn .order-label { display: none; } } /* ---------------------------------------------------------------- pieces -- */ .avatar { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-size: 10.5px; font-weight: 650; letter-spacing: .02em; } .avatar.lg { width: 32px; height: 32px; font-size: 12.5px; } .avatar.xl { width: 46px; height: 46px; font-size: 17px; } .avatar.sm { width: 20px; height: 20px; font-size: 9px; } .avatar.empty { background: var(--surface-2); color: var(--text-faint); border: 1px dashed var(--border-strong); } /* A photo fills the circle whatever shape it arrived as. */ .avatar.has-photo { background-size: cover; background-position: center; background-repeat: no-repeat; background-color: var(--surface-2); color: transparent; } .tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 14px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); } .prio { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; } .prio-icon { display: inline-grid; place-items: center; line-height: 0; } .prio-highest { color: #E03131; } .prio-high { color: #F76707; } .prio-medium { color: #F59E0B; } .prio-low { color: #3B82F6; } .prio-lowest { color: #60A5FA; } .type-icon { width: 14px; height: 14px; border-radius: 3px; display: inline-grid; place-items: center; color: #fff; font-size: 9px; font-weight: 700; flex: none; } .type-task { background: #3B82F6; } .type-bug { background: #EF4444; } .type-subtask { background: #10B981; } .key-badge { font-family: var(--mono); font-size: 14px; color: var(--text-faint); white-space: nowrap; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .card-pad { padding: 16px; } .card-head { padding: 13px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; } .card-head h3 { margin: 0; font-size: 14px; font-weight: 650; letter-spacing: -.01em; } .card-head .spacer { margin-left: auto; } .empty-state { padding: 48px 24px; text-align: center; color: var(--text-muted); } .empty-state h3 { margin: 0 0 6px; font-size: 15px; color: var(--text); font-weight: 650; } .empty-state p { margin: 0 0 14px; font-size: 14px; } /* The reading rail is made of padding on the scroller, not auto margins on each child. The scrollbar still sits at the edge of the window, but a block that sets its own `margin` — as several do, for spacing — can no longer knock itself out of the rail by overwriting the centring margins. */ .content { flex: 1; overflow: auto; padding: 18px max(18px, (100% - var(--page-w)) / 2); } .content.flush { padding: 0; } .content > * { max-width: 100%; } /* A settings page is a column of forms; full width would leave every field stretched across a monitor. */ .content.narrow > * { max-width: 680px; } /* A board is the exception — its columns are meant to run off to the right. */ .content.flush > .board { max-width: none; } .cal { max-width: min(var(--page-w), 100%); margin: 0 auto; } .list-scroll { max-width: min(var(--page-w), 100%); margin: 0 auto; } .page-head { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 16px; } .page-head h1 { margin: 0; font-size: 21px; font-weight: 680; letter-spacing: -.02em; } .page-head p { margin: 2px 0 0; color: var(--text-muted); font-size: 14px; } .page-head .spacer { margin-left: auto; } .grid { display: grid; gap: 14px; } .grid.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 1100px) { .grid.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.k3, .grid.k2 { grid-template-columns: 1fr; } } .stat { padding: 14px 16px; } .stat .label { font-size: 14px; color: var(--text-muted); font-weight: 550; } .stat .value { font-size: 26px; font-weight: 680; letter-spacing: -.02em; margin-top: 3px; } .stat .value.warn { color: var(--warn); } .stat .value.danger { color: var(--danger); } .stat .sub { font-size: 14px; color: var(--text-faint); margin-top: 2px; } .bar { height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; display: flex; } .bar > span { height: 100%; } /* ----------------------------------------------------------------- board -- */ .board { display: flex; gap: 12px; padding: 16px; align-items: flex-start; overflow-x: auto; height: 100%; } .column { width: 292px; flex: none; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; max-height: 100%; } .column-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); } .column-head .name { font-weight: 620; font-size: 14px; } .column-head .n { font-size: 14px; color: var(--text-faint); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 0 7px; } .column-head .spacer { margin-left: auto; } .column-body { padding: 8px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 60px; } .column.drag-over { outline: 2px dashed var(--brand); outline-offset: -2px; } .column.over-limit .column-head .n { color: var(--danger); border-color: var(--danger); } .issue-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 11px; cursor: pointer; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 8px; } .issue-card:hover { border-color: var(--border-strong); } .issue-card.dragging { opacity: .45; } .issue-card .title { font-weight: 520; line-height: 1.4; font-size: 14px; } .issue-card .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .issue-card .meta .spacer { margin-left: auto; } .issue-card .labels { display: flex; gap: 4px; flex-wrap: wrap; } .due { font-size: 14px; color: var(--text-faint); display: inline-flex; gap: 4px; align-items: center; } .due.soon { color: var(--warn); font-weight: 600; } .due.over { color: var(--danger); font-weight: 600; } /* ------------------------------------------------------------------ list -- */ .table-scroll { overflow-x: auto; max-width: 100%; } .table-scroll::-webkit-scrollbar { height: 8px; } table.list { width: 100%; border-collapse: collapse; background: var(--surface); } table.list th { text-align: left; font-size: 14px; color: var(--text-faint); font-weight: 600; padding: 9px 12px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 2; } table.list td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; } /* Everything inside a table row reads at one size. The small and tiny helpers are for dense chrome elsewhere, not for rows people scan. */ table.list td, table.list td .small, table.list td .tiny, table.list td .key-badge, table.list td .tag, table.list td .chip, table.list td .prio, table.list td .due { font-size: 14px; } table.list tbody tr { cursor: pointer; } table.list tbody tr:hover { background: var(--surface-2); } table.list td.title-cell { font-weight: 520; min-width: 210px; } .group-row td { background: var(--surface-2); font-weight: 620; font-size: 14px; color: var(--text-muted); } /* ---------------------------------------------------------- issue table -- */ /* The work column carries the fold caret, the key and the title, so it sets its own padding from the row's depth rather than the shared cell rule. */ table.list td.work-cell { padding-top: 7px; padding-bottom: 7px; padding-right: 12px; } table.list tr.has-kids td.work-cell { font-weight: 600; } .row-caret { border: none; background: none; cursor: pointer; padding: 0; flex: none; width: 16px; height: 16px; display: grid; place-items: center; line-height: 0; color: var(--text-faint); border-radius: 3px; transition: transform .14s ease; } .row-caret:hover { background: var(--border); color: var(--text); } .row-caret.open { transform: rotate(90deg); } .row-caret-gap { width: 16px; flex: none; } /* Finished work keeps its key struck through, the way a checked-off list reads. */ .key-badge.struck { text-decoration: line-through; opacity: .6; } .resolved { color: var(--ok); font-weight: 600; } /* A thin strip above the table for the count and the column picker. It lives outside the scrolling box so its panel is not clipped by it. */ .table-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--surface); } .table-bar .spacer { margin-left: auto; } .table-bar .btn { padding: 4px 8px; } /* --------------------------------------------------- dashboard calendars -- */ .mini-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .mini-dow { text-align: center; font-size: 14px; font-weight: 650; color: var(--text-faint); padding-bottom: 3px; } .mini-day { position: relative; min-height: 70px; padding: 5px 6px; border-radius: 0; background: var(--surface-2); display: flex; flex-direction: column; gap: 3px; font-size: 14px; color: var(--text-muted); } .mini-day .n { font-weight: 600; line-height: 1; } .mini-day.dim { opacity: .38; } .mini-day.has { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 0; } .mini-day.today { outline: 2px solid var(--brand); outline-offset: -2px; color: var(--text); } .mini-day.today .n { font-weight: 800; color: var(--brand-text); } .cal-chip.sm { width: 13px; height: 13px; border-radius: 0; } .mini-day .cal-chips { gap: 3px; } /* Column widths come from the header cells alone, never from what happens to be in the rows — so sorting can never make a column jump wider or narrower. */ table.fixed-cols { table-layout: fixed; } table.fixed-cols td { overflow: hidden; text-overflow: ellipsis; } table.fixed-cols td.title-cell { white-space: normal; } /* Paging under a table: range on the left, rows-per-page and arrows right. */ .pager { display: flex; align-items: center; gap: 9px; padding: 9px 16px; border-top: 1px solid var(--border); } .pager .spacer { margin-left: auto; } .pager .btn[disabled] { opacity: .38; pointer-events: none; } th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } th.sortable:hover { color: var(--text); } th.sortable.sorted { color: var(--brand-text); } .sort-arrow { margin-left: 4px; opacity: .45; font-size: 10px; } th.sortable.sorted .sort-arrow { opacity: 1; } /* -------------------------------------------------------------- calendar -- */ .cal { padding: 16px; } .cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .cal-head h2 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.01em; } .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .cal-dow { background: var(--surface-2); padding: 7px 10px; font-size: 14px; color: var(--text-muted); font-weight: 600; } .cal-day { background: var(--surface); min-height: 112px; padding: 6px 7px; display: flex; flex-direction: column; gap: 4px; } .cal-day.dim { background: var(--surface-2); } .cal-day .n { font-size: 14px; color: var(--text-faint); font-weight: 600; } /* Today's date sits in a square, matching the task chips in the cells rather than reading as a separate kind of thing. */ .cal-day.today .n { background: var(--brand); color: var(--on-brand); border-radius: 0; padding: 2px 7px; align-self: flex-start; min-width: 24px; text-align: center; } .cal-item { font-size: 14px; padding: 3px 6px; border-radius: 5px; cursor: pointer; background: var(--surface-2); border-left: 3px solid var(--brand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-item:hover { background: var(--brand-soft); } /* A day holds as many issues as it holds, so each one is a square rather than a row. Solid means it is due that day, hollow means it starts. */ .cal-count { font-size: 14px; color: var(--text-faint); font-weight: 600; } /* One square per task. Sharp corners and a decent size — at 13px with rounded corners a run of them read as dots rather than as a count you can scan. */ .cal-chips { display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; } .cal-chip { width: 17px; height: 17px; border-radius: 0; cursor: pointer; flex: none; transition: transform .1s ease, box-shadow .1s ease; } /* A subtask is a smaller square, inset, so a day reads as jobs and their pieces rather than as one undifferentiated wall of colour. */ .cal-chip.sub { width: 11px; height: 11px; align-self: center; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); } .hc-parent { font-size: 12px; color: var(--text-faint); margin-bottom: 2px; } .hc-parent b { color: var(--text-muted); font-family: var(--mono); } /* ------------------------------------------------- board card: subtasks */ .card-due { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px; } .card-sub-wrap { margin: 8px -10px -8px; border-top: 1px solid var(--border); } .card-sub-head { display: flex; align-items: center; gap: 7px; width: 100%; background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 7px 10px; font: inherit; font-size: 12.5px; font-weight: 600; } .card-sub-head:hover { color: var(--text); background: var(--surface-2); } .card-sub-head .icon { display: grid; place-items: center; line-height: 0; } .card-sub-caret { transition: transform .14s ease; } .card-sub-head.open .card-sub-caret { transform: rotate(180deg); } .card-sub-head .spacer { margin-left: auto; } .card-subs { padding: 2px 10px 8px; display: flex; flex-direction: column; gap: 4px; } .card-sub { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 12.5px; cursor: pointer; } .card-sub:hover { border-color: var(--brand); } .card-sub-title { font-size: 13px; line-height: 1.35; } .card-sub-meta { display: flex; align-items: center; gap: 6px; min-width: 0; } .card-sub-meta .spacer { margin-left: auto; } .card-sub-meta .key-badge { flex: none; } .card-sub .tag { font-size: 11px; padding: 1px 6px; max-width: 96px; flex: none; } .card-sub .avatar { flex: none; } .cal-chip:hover { transform: scale(1.2); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px currentColor; } .cal-chip.start { background: transparent !important; border: 2px solid currentColor; } .cal-chip.done { opacity: .4; } .hover-card { position: fixed; z-index: 120; width: 300px; max-width: 92vw; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 11px 13px; pointer-events: none; animation: fade .1s ease; } .hover-card .hc-title { font-weight: 620; line-height: 1.35; margin: 5px 0 4px; } .hover-card .hc-desc { font-size: 14px; color: var(--text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .hover-card .hc-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; } /* ----------------------------------------------------------------- panel -- */ /* The issue opens in the middle of the screen rather than sliding in from the edge: it is the thing you came to read, so it gets the centre and the page behind it dims out of the way. */ .overlay { position: fixed; inset: 0; background: rgba(12, 14, 18, .52); z-index: 80; display: flex; align-items: center; justify-content: center; padding: 24px; animation: fade .12s ease; } @keyframes fade { from { opacity: 0; } } /* A fixed size, not one that follows the content. Opening the description editor or switching a tab used to resize the whole dialog under the cursor; the panel now stands still and the two columns scroll inside it. */ .panel { width: min(1280px, 100%); height: min(90vh, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-lg); animation: rise .16s ease; } @keyframes rise { from { transform: translateY(14px) scale(.99); opacity: .6; } } /* Swapping to another issue in the same dialog: a short dim, no movement. */ .panel.busy { opacity: .55; transition: opacity .12s ease; pointer-events: none; } @media (max-width: 720px) { .overlay { padding: 0; } .panel { border-radius: 0; height: 100%; } } .panel-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); flex: none; } /* The row of actions at the top right: same size, same spacing, so they read as one set rather than as a pile of odd buttons. */ .head-btn { display: inline-flex; align-items: center; gap: 5px; flex: none; height: 30px; padding: 0 9px; border-radius: var(--radius-sm); border: 1px solid transparent; background: none; cursor: pointer; color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 600; } .head-btn .icon { display: grid; place-items: center; line-height: 0; } .head-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); } .head-btn.on { color: var(--brand-text); background: var(--brand-soft); border-color: var(--brand); } /* Filling the window, for an issue with a long thread to read. */ .panel.full { width: 100%; height: 100%; } .overlay:has(.panel.full) { padding: 0; } .panel.full { border-radius: 0; } .panel-head .spacer { margin-left: auto; } /* Two columns that scroll on their own: reading a long comment thread should not carry the field list away with it. */ .panel-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 326px; } @media (max-width: 900px) { .panel-body { grid-template-columns: 1fr; overflow: auto; } } /* `scrollbar-gutter: stable` keeps room for the scrollbar whether or not it is showing, so a growing list cannot nudge the column narrower as it appears. */ /* A ticket is the thing you sit and read, so both columns run a step larger than the tables and lists elsewhere in the app. */ .panel-main { padding: 18px 22px 28px; min-width: 0; overflow-y: auto; scrollbar-gutter: stable; font-size: 15px; } .panel-side { border-left: 1px solid var(--border); padding: 16px 12px 16px 16px; background: var(--surface-2); min-width: 0; overflow-y: auto; scrollbar-gutter: stable; font-size: 15px; } .panel-side .row { margin-bottom: 12px; } .panel-side .row > span { display: block; font-size: 14px; color: var(--text-faint); font-weight: 600; margin-bottom: 3px; } .panel-side .dd-trigger, .panel-side input[type='date'], .panel-side input[type='text'] { font-size: 15px; } .panel-main .body, .panel-main .comment, .panel-main .cmp .cmp-box { font-size: 15px; } /* The small print stays small print. */ .panel-main .tiny, .panel-side .tiny { font-size: 13px; } /* Same idea as the description: the control only draws its box when you are pointing at it, so nine fields do not read as nine boxes. */ /* * A dropdown panel inside the side column must stay inside it. Left to its * natural width it was wider than the column, and since the column scrolls, * that gave it a horizontal scroll area — so opening a chooser shunted every * field 53px to the left. That was the "right side keeps shifting". */ .panel-side { overflow-x: hidden; } .panel-side .dd-panel:not(.dd-portal) { left: 0; right: auto; width: 100%; max-width: 100%; } .panel-side .dd-opt { white-space: nowrap; } .panel-side .dd-opt-hint { max-width: 45%; overflow: hidden; text-overflow: ellipsis; flex: none; } /* The person matters more than the field label here, so their face is given room rather than being shrunk to fit a text row. */ .panel-side .dd-trigger .avatar, .dd-panel .dd-icon .avatar { flex: none; } .panel-side .dd-trigger { min-height: 38px; } .dd-panel .dd-opt:has(.avatar) { padding-top: 6px; padding-bottom: 6px; } .panel-side .dd-trigger, .panel-side input[type='date'], .panel-side input[type='text'] { border-color: transparent; background: transparent; } .panel-side .dd-trigger:hover, .panel-side input[type='date']:hover, .panel-side input[type='text']:hover, .panel-side .dd.open .dd-trigger { border-color: var(--border-strong); background: var(--surface); } .panel-side input[type='date']:focus, .panel-side input[type='text']:focus { background: var(--surface); } /* The native date control paints itself from the page's colour scheme — say which one we are in and the picker icon stops being black on black. */ :root[data-theme='dark'] { color-scheme: dark; } :root[data-theme='light'] { color-scheme: light; } input[type='date']::-webkit-calendar-picker-indicator { width: 17px; height: 17px; cursor: pointer; opacity: .65; padding: 2px; margin-left: 2px; } input[type='date']::-webkit-calendar-picker-indicator:hover { opacity: 1; } /* ---------------------------------------------------- checklist (in side) */ .check-list { display: flex; flex-direction: column; gap: 2px; } .check-list .check-row { padding: 4px 4px 4px 0; border: none; gap: 7px; font-size: 13.5px; align-items: flex-start; } .check-list .check-row .check { margin-top: 2px; } .check-list .check-text { line-height: 1.4; } .check-x { border: none; background: none; cursor: pointer; color: var(--text-faint); font-size: 15px; line-height: 1; padding: 0 3px; margin-left: auto; opacity: 0; } .check-row:hover .check-x { opacity: 1; } .check-x:hover { color: var(--danger); } .check-list input[type='text'] { font-size: 13.5px; margin-top: 4px; } .issue-title-input { font-size: 25px; font-weight: 700; letter-spacing: -.025em; line-height: 1.25; font-family: var(--font-head); color: var(--text); border: 1px solid transparent; border-radius: var(--radius-sm); padding: 6px 8px; margin: -6px -8px 6px; background: transparent; width: calc(100% + 16px); } .issue-title-input:hover { border-color: var(--border); } .issue-title-input:focus { border-color: var(--brand); background: var(--surface); } /* --------------------------------------------------------- issue: crumbs */ .issue-crumbs { display: flex; align-items: center; gap: 7px; min-width: 0; } .issue-crumbs .crumb { display: inline-flex; align-items: center; gap: 6px; } .issue-crumbs .crumb.clickable:hover .key-badge { color: var(--brand-text); } .issue-crumbs .sep { color: var(--text-faint); } /* How far along a parent task is, above its subtask table. */ .sub-progress { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; } .sub-bar { flex: 1; height: 8px; border-radius: 999px; overflow: hidden; background: var(--surface-3, var(--surface-2)); border: 1px solid var(--border); } .sub-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--ok, #4ea72e); transition: width .2s ease; } .sub-pct { font-size: 13.5px; color: var(--text-muted); font-weight: 600; flex: none; } /* Inside a ticket the table sits in a frame of its own, so it reads as a list of work rather than as more of the description. */ .panel-main .issue-table { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .panel-main .issue-table table { font-size: 14px; } /* ------------------------------------------------------ issue: accordion */ .acc { border-bottom: 1px solid var(--border); } .acc:last-of-type { border-bottom: none; } /* Room to breathe between sections: the gap is what lets you find the one you want without reading every heading on the way past. */ .acc-head { display: flex; align-items: center; gap: 9px; width: 100%; background: none; border: none; cursor: pointer; color: var(--text); padding: 18px 2px; text-align: left; font: inherit; } .acc-head:hover .acc-label { color: var(--brand-text); } .acc-caret { display: grid; place-items: center; line-height: 0; color: var(--text-faint); transition: transform .14s ease; flex: none; } .acc-head.open .acc-caret { transform: rotate(90deg); } .acc-label { font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; } .acc-body { padding: 0 2px 22px; } .section-title { font-size: 13px; color: var(--text-faint); font-weight: 680; letter-spacing: .03em; text-transform: uppercase; margin: 22px 0 8px; gap: 8px; } .section-title:first-of-type { margin-top: 14px; } /* ------------------------------------------------------- issue: sections */ /* Quiet until you reach for it: the box appears on hover rather than sitting there permanently, so the page reads as text and not as a form. */ .desc-view { border: 1px solid transparent; border-radius: var(--radius); padding: 10px 12px; margin: -10px -12px; min-height: 44px; background: none; transition: border-color .12s, background .12s; } .desc-view.editable { cursor: text; } .desc-view.editable:hover { border-color: var(--border-strong); background: var(--surface); } .desc-view .text, .comment .text { white-space: pre-wrap; word-break: break-word; line-height: 1.6; } .text ul, .text ol { margin: 8px 0; padding-left: 24px; } .text ul { list-style: disc; } .text ol { list-style: decimal; } .text li { margin: 3px 0; padding-left: 2px; } .text li::marker { color: var(--text-faint); } .text code { background: var(--surface-2); border-radius: 4px; padding: 1px 5px; font-family: var(--mono); font-size: .92em; } .body-img { max-width: 100%; border-radius: var(--radius-sm); margin: 8px 0; display: block; } /* Links read as chips rather than as a run of blue characters: you can see at a glance that there is one link here and one file there. */ .url-chip, .file-chip { display: inline-flex; align-items: center; gap: 6px; vertical-align: baseline; max-width: 100%; border: 1px solid var(--border); border-radius: 999px; background: var(--brand-soft); color: var(--brand-text); padding: 1px 10px 1px 8px; text-decoration: none; font-size: .94em; } .url-chip:hover, .file-chip:hover { border-color: var(--brand); text-decoration: none; } .url-icon { width: 14px; height: 14px; flex: none; border-radius: 3px; background-size: contain; background-repeat: no-repeat; background-position: center; } .url-text, .file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-chip { background: var(--surface-2); color: var(--text); border-radius: var(--radius-sm); } /* ------------------------------------------------------ attachments panel */ .file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; margin-bottom: 4px; } .file-card { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; background: var(--surface); } .file-card:hover { border-color: var(--brand); text-decoration: none; } .file-thumb { height: 108px; display: grid; place-items: center; overflow: hidden; background: var(--surface-2); border-bottom: 1px solid var(--border); } .file-thumb img { width: 100%; height: 100%; object-fit: cover; } .file-ext.big { font-size: 15px; padding: 7px 9px; border-radius: 5px; } .file-foot { padding: 8px 10px; min-width: 0; } .file-foot .file-name { font-size: 13px; font-weight: 600; } .file-x { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border: none; border-radius: 50%; cursor: pointer; opacity: 0; background: rgba(12, 14, 18, .72); color: #fff; font-size: 15px; line-height: 1; } .file-card:hover .file-x { opacity: 1; } .file-x:hover { background: var(--danger); } .file-ext { font-size: 10px; font-weight: 700; letter-spacing: .04em; line-height: 1; background: var(--danger); color: #fff; border-radius: 3px; padding: 3px 4px; flex: none; } .menu .opt { display: flex; align-items: center; gap: 8px; } .menu .opt-label { flex: 1; min-width: 0; } .menu .opt-tick { display: grid; place-items: center; width: 14px; flex: none; color: var(--brand-text); } .menu .opt.checked .opt-label { color: var(--brand-text); font-weight: 600; } .sub-row, .link-row, .check-row, .log-row { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 14px; } .sub-row .spacer, .link-row .spacer, .check-row .spacer, .log-row .spacer { margin-left: auto; } .sub-row:hover { color: var(--brand-text); } .link-kind { font-size: 12.5px; color: var(--text-faint); text-transform: lowercase; min-width: 96px; flex: none; } .check-row .check { width: 16px; height: 16px; flex: none; accent-color: var(--brand); cursor: pointer; } .check-text { min-width: 0; overflow-wrap: anywhere; } .check-row.done .check-text { text-decoration: line-through; color: var(--text-faint); } .inline-form { gap: 8px; padding: 10px 0 2px; } .inline-form input[type='text'] { flex: 1; min-width: 0; } .inline-add { padding-left: 0; margin-top: 6px; } .quote { color: var(--text); } .diff { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 2px 0 10px; } @media (max-width: 720px) { .diff { grid-template-columns: 1fr; } } .diff-side { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .diff-label { font-size: 12px; font-weight: 650; color: var(--text-faint); padding: 5px 9px; background: var(--surface-2); border-bottom: 1px solid var(--border); } .diff-text { padding: 9px; font-size: 13.5px; white-space: pre-wrap; word-break: break-word; max-height: 200px; overflow: auto; line-height: 1.5; } .tabs { margin-bottom: 12px; flex-wrap: wrap; } .tab-body { min-height: 60px; } .comment .who .name { font-weight: 600; font-size: 14px; } .comment .who .when { font-size: 14px; color: var(--text-faint); } .comment .text { white-space: pre-wrap; word-break: break-word; line-height: 1.55; } .mention { background: var(--brand-soft); color: var(--brand-text); border-radius: 4px; padding: 0 4px; font-weight: 600; } .activity-item { display: flex; gap: 9px; padding: 6px 0; font-size: 14px; color: var(--text-muted); align-items: baseline; } /* One entry of the history: who, what, when — and the change itself, rather than the change described in a sentence. */ .hist-item { display: flex; gap: 10px; padding: 11px 0; align-items: flex-start; } .hist-item + .hist-item { border-top: 1px solid var(--border); } .hist-body { min-width: 0; flex: 1; } .hist-what { font-size: 14.5px; color: var(--text-muted); } .hist-what b { color: var(--text); font-weight: 650; } .hist-when { font-size: 13px; color: var(--text-faint); margin-top: 2px; } .hist-change { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 7px; } .hist-val { display: inline-flex; align-items: center; max-width: 320px; padding: 2px 9px; border-radius: 4px; font-size: 13px; font-weight: 600; background: var(--brand-soft); color: var(--brand-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hist-val.gone { background: var(--surface-2); color: var(--text-muted); } .hist-arrow { color: var(--text-faint); font-size: 14px; } .hist-toggle { margin-top: 7px; } /* What was actually said, under the line saying somebody said it. */ .hist-quote { margin-top: 7px; padding: 7px 0 7px 12px; font-size: 14px; border-left: 3px solid var(--border-strong); color: var(--text); max-height: 180px; overflow: auto; } .hist-quote.gone { color: var(--text-muted); text-decoration: line-through; opacity: .85; } .hist-quote > *:first-child { margin-top: 0; } .hist-quote > *:last-child { margin-bottom: 0; } /* A field you change straight from the table. The control only draws its box on hover, so a table of forty rows is not a wall of boxes. */ .edit-cell { padding-top: 3px; padding-bottom: 3px; } .edit-cell .dd-trigger { border-color: transparent; background: transparent; } .edit-cell .dd-trigger:hover, .edit-cell .dd.open .dd-trigger { border-color: var(--border-strong); background: var(--surface); } .activity-item b { color: var(--text); font-weight: 600; } /* ------------------------------------------------- comments: reply & react */ .thread { border-bottom: 1px solid var(--border); padding: 4px 0 10px; } .thread:last-child { border-bottom: none; } /* Arriving from a notification's View thread: say which comment was meant, then get out of the way. Scrolling to it silently leaves people scanning for the line they were sent to read. */ .thread.flash { background: var(--brand-soft); border-radius: var(--radius-sm); box-shadow: 0 0 0 6px var(--brand-soft); transition: background .4s ease, box-shadow .4s ease; } .comment { display: flex; gap: 10px; padding: 9px 0; border-bottom: none; } .comment .body { min-width: 0; flex: 1; } .comment .who { display: flex; align-items: baseline; gap: 7px; margin-bottom: 3px; } /* Replies sit under the comment they answer, one level in, with a rule down the side so the thread reads as one conversation. */ .replies { margin-left: 18px; padding-left: 16px; border-left: 2px solid var(--border); } .comment.reply { padding: 7px 0; } .reply-host:not(:empty) { margin: 6px 0 4px 18px; } .react-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; } .react-pill { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); background: var(--surface-2); border-radius: 999px; padding: 2px 9px 2px 7px; cursor: pointer; font-size: 12.5px; color: var(--text-muted); line-height: 1.6; } .react-pill:hover { border-color: var(--border-strong); } .react-pill.mine { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-text); } .react-emoji { font-size: 14px; line-height: 1; } .react-holder { position: relative; display: inline-flex; } .react-add { border: 1px solid transparent; background: none; cursor: pointer; border-radius: 999px; padding: 2px 7px; font-size: 14px; line-height: 1.6; filter: grayscale(1); opacity: .6; } .react-add:hover { filter: none; opacity: 1; border-color: var(--border); background: var(--surface-2); } .react-action { border: none; background: none; cursor: pointer; padding: 2px 6px; font-size: 12.5px; font-weight: 550; color: var(--text-faint); border-radius: 5px; } .react-action:hover { color: var(--brand-text); background: var(--surface-2); } /* ------------------------------------------------------------- emoji picker */ /* Plain Unicode characters drawn by whatever emoji font the reader's system provides, so they copy, search and paste like the text they are. */ .emoji-panel { position: absolute; z-index: 130; width: 328px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; } .emoji-panel.quick-only { width: auto; bottom: calc(100% + 6px); left: 0; } .emoji-tabs { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .emoji-tab { flex: 1; border: none; background: none; cursor: pointer; border-radius: 6px; padding: 5px 0; font-size: 16px; line-height: 1; } .emoji-tab:hover { background: var(--surface); } .emoji-search-row { padding: 8px 10px; border-bottom: 1px solid var(--border); } .emoji-panel .emoji-search, .emoji-panel .emoji-search:focus { width: 100%; border: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius-sm); padding: 6px 9px; font: inherit; font-size: 13.5px; color: var(--text); outline: none; box-shadow: none; } .emoji-body { overflow-y: auto; max-height: 260px; padding: 6px 8px 10px; } .emoji-group { font-size: 12px; font-weight: 650; color: var(--text-faint); padding: 8px 2px 4px; position: sticky; top: 0; background: var(--surface); } .emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; } .react-quick { display: flex; gap: 2px; padding: 5px; } .emoji-cell { border: none; background: none; cursor: pointer; border-radius: 6px; font-size: 19px; line-height: 1; padding: 5px 0; text-align: center; } .react-quick .emoji-cell { padding: 5px 7px; } .emoji-cell:hover { background: var(--surface-2); } .emoji-cell.more { font-size: 15px; color: var(--text-faint); } .emoji-empty { padding: 16px 8px; font-size: 13.5px; color: var(--text-faint); } .emoji-preview { display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 7px 12px; border-top: 1px solid var(--border); background: var(--surface-2); } .emoji-preview-char { font-size: 20px; line-height: 1; } .emoji-preview-name { font-size: 13px; color: var(--text-muted); text-transform: capitalize; } /* --------------------------------------------------------------- create row */ /* The same row in every view, because "add work here" should not look or behave differently depending on which tab you happen to be on. */ .create-row { padding: 2px 0; } .create-btn { display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: none; cursor: pointer; color: var(--text-muted); padding: 9px 10px; border-radius: var(--radius-sm); font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; } .create-btn .icon { display: grid; place-items: center; line-height: 0; } .create-btn:hover { background: var(--surface-2); color: var(--text); } .create-open { padding: 8px; border: 1px solid var(--brand); border-radius: var(--radius); background: var(--surface); } .create-open .create-box, .create-open .create-box:focus { width: 100%; border: none; outline: none; box-shadow: none; background: none; resize: none; padding: 2px; font: inherit; font-size: 14px; color: var(--text); } .column-body .create-row { margin-top: 2px; } .list-create, .tl-create { border-top: 1px solid var(--border); padding: 4px 8px; } .cal-create .create-btn { padding: 4px 6px; font-size: 12px; opacity: 0; } .cal-day:hover .cal-create .create-btn { opacity: 1; } .cal-create .create-open { position: relative; z-index: 3; } /* ------------------------------------------------------------ person card */ /* Who is this? — answered where you are reading, rather than by sending you off to another page and losing your place in the thread. */ .person-card { position: fixed; z-index: 140; width: 290px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); animation: fade .1s ease; } .pcard-banner { height: 46px; opacity: .85; } .pcard-body { display: flex; gap: 12px; padding: 0 14px 12px; margin-top: -18px; } .pcard-face .avatar { box-shadow: 0 0 0 3px var(--surface); } .pcard-who { min-width: 0; padding-top: 22px; } .pcard-name { font-family: var(--font-head); font-weight: 680; font-size: 15px; } .pcard-mail { font-size: 12.5px; color: var(--text-faint); margin-bottom: 4px; } .pcard-actions { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); background: var(--surface-2); } .mention { cursor: pointer; } .comment-face { cursor: pointer; display: inline-flex; flex: none; } .comment .who .name.clickable:hover { color: var(--brand-text); } .mention:hover { background: var(--brand); color: var(--on-brand); } /* ---------------------------------------------------------------- composer */ /* One box for comments and descriptions alike. The toolbar writes the same markers a person can type by hand, so what is stored stays plain text. */ .cmp { position: relative; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; } .cmp:focus-within { border-color: var(--brand); } .cmp.drop { border-color: var(--brand); background: var(--brand-soft); } .cmp-bar { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 5px 6px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .cmp-tool { border: none; background: none; cursor: pointer; color: var(--text-muted); border-radius: 5px; padding: 5px 6px; display: grid; place-items: center; line-height: 0; } .cmp-tool:hover { background: var(--surface); color: var(--text); } .cmp-sep { width: 1px; height: 17px; background: var(--border); margin: 0 4px; flex: none; } .cmp-chev { display: grid; place-items: center; line-height: 0; margin-left: 1px; opacity: .6; } .cmp-tool:has(.cmp-chev) { gap: 1px; display: inline-flex; align-items: center; } /* ------------------------------------------------------------- task lists */ /* A checkbox where the work is described, rather than in a panel off to one side. Ticking one rewrites that line in the text it came from. */ .task-list { list-style: none; padding-left: 2px !important; } .task-item { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0; } .task-check { width: 15px; height: 15px; margin-top: 3px; flex: none; accent-color: var(--brand); cursor: pointer; } .task-item.done > span { text-decoration: line-through; color: var(--text-faint); } .body-h { font-family: var(--font-head); letter-spacing: -.015em; margin: 14px 0 6px; } h3.body-h { font-size: 17px; font-weight: 700; } h4.body-h { font-size: 15px; font-weight: 680; } h5.body-h { font-size: 14px; font-weight: 650; color: var(--text-muted); } .body-quote { margin: 8px 0; padding: 4px 0 4px 12px; border-left: 3px solid var(--border-strong); color: var(--text-muted); } .body-hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; } /* The editor is a formatted surface, not a box of markup: what you see while typing is what the description looks like once it is saved. The text is turned back into markdown on the way to the database (rich.js), so nothing stored depends on this styling. */ .cmp-input { position: relative; } .cmp .cmp-box { width: 100%; box-sizing: border-box; min-height: 96px; max-height: 460px; overflow-y: auto; padding: 11px 13px; font: inherit; font-size: 14.5px; line-height: 1.6; overflow-wrap: break-word; border: none; outline: none; background: none; color: var(--text); scrollbar-gutter: stable; } .cmp-box.is-empty::before { content: attr(data-placeholder); position: absolute; top: 11px; left: 13px; right: 13px; color: var(--text-faint); pointer-events: none; } .cmp-box > *:first-child { margin-top: 0; } .cmp-box > *:last-child { margin-bottom: 0; } .cmp-box p { margin: 0 0 8px; } .cmp-box h2, .cmp-box h3, .cmp-box h4 { font-family: var(--font-head); letter-spacing: -.015em; margin: 13px 0 6px; } .cmp-box h2 { font-size: 19px; font-weight: 700; } .cmp-box h3 { font-size: 17px; font-weight: 700; } .cmp-box h4 { font-size: 15px; font-weight: 680; } .cmp-box ul, .cmp-box ol { margin: 6px 0; padding-left: 22px; } .cmp-box li { margin: 3px 0; } .cmp-box blockquote { margin: 8px 0; padding: 4px 0 4px 12px; border-left: 3px solid var(--border-strong); color: var(--text-muted); } .cmp-box pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; margin: 8px 0; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; } .cmp-box code { background: var(--surface-2); border-radius: 4px; padding: 1px 5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; } .cmp-box pre code { background: none; padding: 0; } .cmp-box hr { border: none; border-top: 1px solid var(--border); margin: 13px 0; } .cmp-box a { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; } .cmp-box img { max-width: 100%; border-radius: 6px; margin: 4px 0; } .cmp-box .mention { cursor: default; } /* A checklist item carries its own box, so ticking things off happens where the work is written down. */ .cmp-box li.cmp-task { list-style: none; display: flex; gap: 8px; align-items: flex-start; margin-left: -20px; } .cmp-box li.cmp-task.done { color: var(--text-muted); text-decoration: line-through; } .cmp-check { width: 16px; height: 16px; flex: none; margin-top: 3px; cursor: pointer; border: 1.7px solid var(--border-strong); border-radius: 4px; background: var(--surface); transition: background .12s, border-color .12s; } .cmp-check:hover { border-color: var(--brand); } li.cmp-task.done > .cmp-check { background: var(--brand) url("data:image/svg+xml;utf8,") center / 12px no-repeat; border-color: var(--brand); } .cmp-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; } .cmp-files:empty { display: none; } .cmp-file { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 5px 3px 10px; font-size: 13px; } .cmp-file-x { border: none; background: none; cursor: pointer; color: var(--text-faint); font-size: 15px; line-height: 1; padding: 0 3px; } .cmp-file-x:hover { color: var(--danger); } .cmp-foot { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-top: 1px solid var(--border); background: var(--surface-2); } .cmp-foot .tiny { margin-left: auto; } @media (max-width: 620px) { .cmp-foot .tiny { display: none; } } .mention-menu { position: absolute; z-index: 90; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); min-width: 220px; max-height: 220px; overflow: auto; padding: 5px; } .mention-menu .opt { padding: 6px 9px; border-radius: 6px; cursor: pointer; display: flex; gap: 8px; align-items: center; } .mention-menu { bottom: 52px; left: 12px; } .mention-menu .opt.active, .mention-menu .opt:hover { background: var(--brand-soft); } /* ----------------------------------------------------------------- modal -- */ .modal-wrap { position: fixed; inset: 0; background: rgba(12, 14, 18, .42); z-index: 100; display: grid; place-items: center; padding: 20px; animation: fade .12s ease; } .modal { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: min(560px, 100%); height: min(92vh, max-content); max-height: 92vh; display: flex; flex-direction: column; } .modal.wide { width: min(860px, 100%); } .modal-head { padding: 15px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; } .modal-head h3 { margin: 0; font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; } .modal-head .spacer { margin-left: auto; } .modal-body { padding: 18px; overflow: auto; } .modal-foot { padding: 13px 18px; border-top: 1px solid var(--border); display: flex; gap: 9px; justify-content: flex-end; } /* Above .modal-wrap (100): a menu opened from a toolbar inside a dialog has to sit on top of the dialog, not behind its backdrop. */ .menu { position: absolute; z-index: 160; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 5px; min-width: 190px; max-height: 320px; overflow: auto; } .menu .opt { padding: 7px 10px; border-radius: 6px; cursor: pointer; display: flex; gap: 8px; align-items: center; font-size: 14px; } .menu .opt:hover { background: var(--surface-2); } .menu .opt.danger { color: var(--danger); } /* Icons sit in one column so the labels line up whether or not a row has one. */ .menu .menu-icon { display: grid; place-items: center; width: 15px; flex: none; color: var(--text-faint); line-height: 0; } .menu .opt:hover .menu-icon { color: var(--text); } .menu .opt.danger .menu-icon { color: var(--danger); } .menu .sep { height: 1px; background: var(--border); margin: 5px 0; } .menu .head { font-size: 14px; color: var(--text-faint); padding: 7px 10px 3px; font-weight: 650; } /* ------------------------------------------------------------ notifications * * A panel rather than a menu. It was a 300px list with every unread line set * in bold, which is unreadable the moment there is more than a handful of * them and leaves no room to say what each one is about. Unread is carried by * a dot and a tint here; the only weight on the row is the name. */ .menu.panel { padding: 0; overflow: hidden; display: flex; flex-direction: column; } .notif-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px; border-bottom: 1px solid var(--border); background: var(--surface); flex: none; } .notif-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 650; color: var(--text); letter-spacing: -.01em; } .notif-count { display: none; min-width: 19px; height: 19px; padding: 0 6px; border-radius: 10px; background: var(--brand); color: var(--on-brand); font-size: 11px; font-weight: 650; line-height: 19px; text-align: center; } .notif-count.show { display: block; } .notif-only { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); cursor: pointer; user-select: none; white-space: nowrap; } .notif-switch { width: 32px; height: 18px; flex: none; padding: 2px; cursor: pointer; border: none; border-radius: 10px; background: var(--border-strong); transition: background .15s; } .notif-switch.on { background: var(--brand); } .notif-knob { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--on-brand); box-shadow: var(--shadow-sm); transition: transform .15s; } .notif-switch.on .notif-knob { transform: translateX(14px); } .notif-list { overflow: auto; flex: 1; padding: 4px 0 6px; } .notif-group { padding: 10px 16px 4px; font-size: 11.5px; font-weight: 650; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; } .notif-row { display: flex; gap: 11px; align-items: flex-start; padding: 10px 14px 11px 16px; border-bottom: 1px solid var(--border); } .notif-row:last-child { border-bottom: none; } .notif-row.clickable { cursor: pointer; } .notif-row.clickable:hover { background: var(--surface-2); } /* Unread is the dot on the right and nothing else. Tinting the row was tried first, but when everything is unread — which is the state the panel is usually opened in — every row is tinted and the cue says nothing. */ .notif-row .avatar { width: 30px; height: 30px; font-size: 11.5px; margin-top: 1px; } .notif-bot { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); } .notif-bot .icon { line-height: 0; } .notif-body { min-width: 0; flex: 1; } .notif-line { font-size: 13.5px; line-height: 1.45; color: var(--text); } /* The one thing worth picking out of the sentence. */ .notif-who { font-weight: 650; } .notif-when { color: var(--text-faint); font-size: 12px; margin-left: 6px; white-space: nowrap; } .notif-ref { display: flex; align-items: center; gap: 6px; margin-top: 5px; min-width: 0; } .notif-ref-title { font-size: 13px; color: var(--text); } .notif-meta { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 12px; color: var(--text-muted); } .notif-key { font-family: var(--mono); font-size: 11.5px; } .notif-sep { color: var(--text-faint); } /* Kudos arrive with their own words, so they are shown rather than described. */ .notif-quote { margin-top: 7px; padding: 8px 10px; font-size: 13px; line-height: 1.45; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); } /* Always in the layout, so a read row and an unread one line up the same. */ .notif-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 8px; background: transparent; } .notif-row.unread .notif-dot { background: var(--brand); } /* The comment a notification is about: a few lines of it, then an ellipsis. The whole of it is behind View thread. */ .notif-quote { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* React, reply, read the thread. Only on rows that carry a comment. */ .notif-actions { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; min-width: 0; } .notif-reacts { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-width: 0; flex: 1; } /* Reply and View thread keep their place at the end whatever the reactions do. */ .notif-acts { display: flex; align-items: center; gap: 2px; flex: none; } .notif-react { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; min-height: 25px; cursor: pointer; font-size: 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); line-height: 1; } .notif-react:hover { border-color: var(--border-strong); background: var(--surface-2); } .notif-react.mine { border-color: var(--brand); background: var(--brand-soft); } .notif-react-n { font-size: 11.5px; color: var(--text-muted); font-weight: 600; } .notif-react.mine .notif-react-n { color: var(--brand-text); } /* The offer to add one sits back until it is pointed at, so a row of buttons does not shout louder than the comment above it. */ .notif-react.add, .notif-react.more { opacity: .6; } .notif-row:hover .notif-react.add, .notif-row:hover .notif-react.more { opacity: 1; } .notif-react-holder { position: relative; display: inline-flex; } .notif-act { border: none; background: none; cursor: pointer; padding: 4px 5px; font-size: 12.5px; font-weight: 550; color: var(--brand-text); border-radius: 6px; } .notif-act:hover { background: var(--surface-2); text-decoration: underline; } .notif-reply:empty { display: none; } .notif-reply { margin-top: 8px; } .notif-reply-box { width: 100%; resize: vertical; font: inherit; font-size: 13px; line-height: 1.45; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); } .notif-reply-box:focus { outline: none; border-color: var(--brand); } .notif-reply-foot { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; } .notif-replied { font-size: 12.5px; color: var(--ok); padding: 4px 0; } /* The emoji panel hangs off a button inside a list that scrolls, so it is pinned to the button rather than left to be clipped by the list's edge. */ .notif-react-holder .emoji-panel { top: auto; bottom: calc(100% + 6px); left: 0; } .notif-empty { padding: 34px 16px; text-align: center; color: var(--text-faint); font-size: 13.5px; } /* The foot of the list while another page is on its way, and once there is no page left to fetch. */ .notif-more { padding: 14px 16px; display: flex; justify-content: center; } .notif-more .loading { font-size: 12.5px; color: var(--text-faint); padding: 0; } .notif-end { padding: 16px; text-align: center; font-size: 12px; color: var(--text-faint); } .notif-retry { display: block; width: 100%; padding: 12px 16px; border: none; background: none; cursor: pointer; font-size: 12.5px; color: var(--danger); text-align: center; } .notif-retry:hover { background: var(--surface-2); } .notif-foot { flex: none; border-top: 1px solid var(--border); background: var(--surface); } .notif-foot:empty { display: none; } .notif-readall { width: 100%; padding: 11px 16px; border: none; background: none; cursor: pointer; font-size: 13px; font-weight: 550; color: var(--brand-text); text-align: center; } .notif-readall:hover { background: var(--surface-2); } /* On a phone the panel is the width of the window, less a margin either side. */ @media (max-width: 520px) { .menu.panel { width: calc(100vw - 16px) !important; left: 8px !important; } .notif-only { font-size: 12px; } } /* An account menu is wider than a list of verbs: it has to hold an address. */ .menu.menu-wide { min-width: 268px; max-height: none; } /* Who you are signed in as, at the top of your own menu. */ .menu-card { display: flex; align-items: center; gap: 13px; padding: 13px 13px 14px; margin: -5px -5px 4px; border-bottom: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius) var(--radius) 0 0; } .menu-card .avatar { width: 46px; height: 46px; font-size: 17px; } .menu-card-who { min-width: 0; } .menu-card-name { font-size: 15px; font-weight: 650; color: var(--text); line-height: 1.3; } .menu-card-sub { font-size: 13px; color: var(--text-muted); line-height: 1.35; } /* The arrow that says there is more behind this row. */ .menu .opt-more { display: grid; place-items: center; width: 13px; flex: none; color: var(--text-faint); line-height: 0; } .menu .opt.has-sub:hover .opt-more { color: var(--text); } .menu .submenu { min-width: 172px; } /* -------------------------------------------------------------- dropdown -- */ /* A select we draw ourselves. The native control hands its menu to the operating system, which ignores every token on this page. */ .dd { position: relative; display: inline-block; vertical-align: top; } .dd-trigger { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; min-height: 34px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-family: inherit; font-size: 14px; text-align: left; cursor: pointer; transition: border-color .12s, box-shadow .12s; } .dd-trigger:hover { border-color: var(--brand-text); } .dd-trigger:focus-visible, .dd.open .dd-trigger { border-color: var(--brand-text); box-shadow: 0 0 0 3px var(--brand-soft); outline: none; } .dd-label { display: flex; align-items: center; gap: 7px; min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dd-placeholder { color: var(--text-faint); } .dd-chevron { display: flex; color: var(--text-faint); flex: none; transition: transform .14s ease; } .dd.open .dd-chevron { transform: rotate(180deg); color: var(--brand-text); } /* Seven rows, then it scrolls — a client list can run to hundreds, and a panel that grows with it covers the page and still cannot be read. The search box stays put while the rows scroll under it, so it is always in reach rather than something you have to scroll back up to find. */ .dd-panel { --dd-row: 34px; --dd-visible-rows: 7; position: absolute; z-index: 95; top: calc(100% + 5px); left: 0; min-width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 5px; display: flex; flex-direction: column; overflow: hidden; animation: fade .1s ease; } .dd-list { max-height: calc(var(--dd-row) * var(--dd-visible-rows)); overflow-y: auto; overscroll-behavior: contain; padding-top: 4px; } .dd-panel.right { left: auto; right: 0; } .dd-panel.up { top: auto; bottom: calc(100% + 5px); } /* Hung off the page, above the dialog layer, so a table or a column with its own overflow cannot slice the list in half. The script sets left and top from where the trigger actually is on screen. */ .dd-panel.dd-portal { position: fixed; z-index: 170; top: auto; bottom: auto; left: auto; right: auto; min-width: 0; max-width: min(92vw, 420px); } .dd-panel.dd-portal.right { left: auto; right: auto; } /* Long lists get a search box of their own. Below the threshold the panel is unchanged — a box above four options is clutter. */ .dd-panel.searchable { padding-top: 0; } .dd-search { flex: none; display: flex; align-items: center; gap: 8px; background: var(--surface); padding: 8px 4px 6px; margin: 0 -1px; border-bottom: 1px solid var(--border); } .dd-search-icon { display: grid; place-items: center; color: var(--text-faint); padding-left: 6px; line-height: 0; } /* Specific enough to beat the generic input rules, including their focus ring — the box is the panel's own header, not a field sitting in a form. */ .dd-panel .dd-search-input, .dd-panel .dd-search-input:focus { border: none; background: none; outline: none; box-shadow: none; flex: 1; min-width: 0; padding: 3px 6px 3px 0; font-size: 14px; color: var(--text); width: auto; } .dd-empty { padding: 12px 10px; font-size: 14px; color: var(--text-faint); white-space: nowrap; } .dd-opt { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; line-height: 1.3; white-space: nowrap; } .dd-opt.active { background: var(--surface-2); } .dd-opt.selected { color: var(--brand-text); font-weight: 600; } .dd-opt.selected.active { background: var(--brand-soft); } .dd-opt-label { flex: 1; overflow: hidden; text-overflow: ellipsis; } .dd-opt-hint { color: var(--text-faint); font-size: 14px; font-weight: 400; } .dd-tick { display: flex; width: 14px; flex: none; color: var(--brand-text); } .dd-icon { display: inline-grid; place-items: center; line-height: 0; flex: none; } /* Keep the scrollbar visible rather than letting it fade out, so a long list reads as scrollable before you try. */ .dd-list::-webkit-scrollbar { width: 10px; } .dd-list::-webkit-scrollbar-track { background: transparent; } .dd-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; border: 3px solid var(--surface); } .dd-list::-webkit-scrollbar-thumb:hover { background: var(--text-faint); } .toolbar .dd-trigger { padding: 5px 9px; min-height: 30px; } /* The key a project is about to get, shown while you pick its number. */ .key-preview { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; font-weight: 650; letter-spacing: .03em; color: var(--brand-text); background: var(--brand-soft); padding: 3px 8px; border-radius: var(--radius-sm); } .key-preview.faint { color: var(--text-faint); background: var(--surface-2); font-weight: 500; letter-spacing: 0; } /* A consequence worth reading before you press Save. */ .warn-text { color: var(--warn); background: rgba(245, 158, 11, .1); border-radius: var(--radius-sm); padding: 7px 10px; margin: 6px 0 0; } /* Settings that open their own editor, kept apart from the fields you fill in. */ .settings-links { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--border); } /* --------------------------------------------------------------- toasts -- */ /* The saved filter that is currently on screen, so you can see at a glance which one you are looking at. */ .chip.on { background: var(--brand-soft); color: var(--brand-text); border-color: var(--brand); font-weight: 600; } .toasts { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; } .toast { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 10px 14px; min-width: 230px; animation: slide .14s ease; } .toast.error { border-left-color: var(--danger); } .toast.ok { border-left-color: var(--ok); } /* ------------------------------------------------------------------ auth -- */ .auth-wrap { height: 100vh; display: grid; place-items: center; background: var(--bg); padding: 20px; } .auth-card { width: min(410px, 100%); } .auth-card .card-pad { padding: 26px; } .auth-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .auth-card h1 { margin: 0 0 4px; font-size: 19px; font-weight: 680; letter-spacing: -.02em; } .auth-card p.sub { margin: 0 0 20px; color: var(--text-muted); font-size: 14px; } .auth-error { background: rgba(239, 68, 68, .1); color: var(--danger); border-radius: var(--radius-sm); padding: 9px 12px; margin-bottom: 14px; font-size: 14px; } /* ------------------------------------------------------------ utilities -- */ .muted { color: var(--text-muted); } .faint { color: var(--text-faint); } .small { font-size: 14px; } .tiny { font-size: 14px; } .bold { font-weight: 650; } .row-flex { display: flex; align-items: center; gap: 8px; } .wrap { flex-wrap: wrap; } .spacer { margin-left: auto; } .mt { margin-top: 14px; } .mb { margin-bottom: 14px; } .hidden { display: none !important; } .nowrap { white-space: nowrap; } .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .clickable { cursor: pointer; } .loading { padding: 40px; text-align: center; color: var(--text-faint); } /* ------------------------------------------------- project toolbar rows -- */ /* The second toolbar row: who is on the project, then everything else behind one button. Filtering by person is the common case, so it stays visible. */ .toolbar.filters { padding: 8px 16px; gap: 10px; border-bottom: 1px solid var(--border); } .face-strip { display: flex; align-items: center; } .face { border: none; background: none; padding: 0; cursor: pointer; border-radius: 999px; margin-right: -7px; line-height: 0; box-shadow: 0 0 0 2px var(--surface); transition: transform .12s ease, box-shadow .12s ease; } .face:last-child { margin-right: 0; } .face:hover { transform: translateY(-2px); z-index: 2; } .face.on { box-shadow: 0 0 0 2px var(--brand); z-index: 3; } .face.ghost { margin-left: 13px; box-shadow: none; } .face.more { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); font-size: 11px; font-weight: 650; margin-left: 12px; line-height: 1; } /* A panel of real controls hanging off a button, unlike .menu which is a list. */ .pop { position: relative; display: inline-block; } .pop-panel { position: absolute; z-index: 94; top: calc(100% + 6px); left: 0; width: 260px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 14px; animation: fade .1s ease; } .pop-panel.right { left: auto; right: 0; } .pop-panel.up { top: auto; bottom: calc(100% + 6px); } .pop-panel .field { margin-bottom: 10px; } .pop-panel .field:last-of-type { margin-bottom: 0; } .chip.brand { background: var(--brand); color: var(--on-brand); border-color: transparent; } .chip.bad { background: rgba(239, 68, 68, .12); color: var(--danger); border-color: transparent; } /* ------------------------------------------------------------- summary -- */ .content.scrolls { overflow: auto; } .card-pad.tight { padding: 4px 16px 10px; } .summary-row { padding: 8px 0; border-bottom: 1px solid var(--border); gap: 9px; } .summary-row:last-child { border-bottom: none; } .warn-inline { color: var(--warn); font-weight: 600; } .progress { height: 9px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .progress > span { display: block; height: 100%; background: var(--ok); border-radius: 999px; transition: width .3s ease; } /* The four week counters. Each is a button, because every one of them is a question with a list of tasks as its answer. */ .stat-tile { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; width: 100%; cursor: pointer; border: 1px solid var(--border); font: inherit; color: inherit; } .stat-tile:hover { border-color: var(--brand); background: var(--surface-2); } .stat-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-muted); } .stat-tile:hover .stat-icon { color: var(--brand-text); background: var(--brand-soft); } .stat-line { font-size: 15px; } .stat-line b { font-weight: 680; } .head-block { padding-bottom: 4px; } .head-block h3 { margin: 0 0 3px; font-size: 15px; font-weight: 650; } .head-block p { margin: 0; } /* ------ status donut ------ */ .donut-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .donut-wrap { position: relative; width: 168px; height: 168px; flex: none; } .donut { width: 100%; height: 100%; display: block; } .donut-arc { cursor: pointer; transition: opacity .12s ease; } .donut-wrap:hover .donut-arc { opacity: .55; } .donut-wrap .donut-arc:hover { opacity: 1; } .donut-hole { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; } /* A tooltip that follows the cursor. The browser's own title tooltip waits a second and cannot carry a colour swatch — which is the part that tells you which slice you are actually on. */ .chart-tip { position: absolute; z-index: 5; pointer-events: none; transform: translate(14px, -50%); display: flex; align-items: center; gap: 8px; white-space: nowrap; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: var(--radius-sm); padding: 6px 10px; font-size: 14px; } .chart-tip b { font-weight: 680; } .chart-tip.hidden { display: none; } .donut-total { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; } .donut-legend { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .legend-row { display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: none; font: inherit; color: var(--text-muted); padding: 5px 7px; border-radius: var(--radius-sm); cursor: pointer; text-align: left; } .legend-row:hover { background: var(--surface-2); color: var(--text); } .legend-row b { margin-left: auto; color: var(--text); font-weight: 650; } .legend-swatch { width: 11px; height: 11px; border-radius: 0; flex: none; } /* ------ distribution bars ------ */ .dist { display: flex; flex-direction: column; gap: 2px; } .dist-head { display: flex; gap: 14px; font-size: 14px; color: var(--text-faint); font-weight: 600; padding: 0 7px 6px; } .dist-head span:first-child { width: 184px; flex: none; } .dist-row { display: flex; align-items: center; gap: 14px; width: 100%; border: none; background: none; font: inherit; color: inherit; padding: 6px 7px; border-radius: var(--radius-sm); cursor: pointer; text-align: left; } .dist-row:hover { background: var(--surface-2); } .dist-label { width: 184px; flex: none; display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; } .dist-bar { position: relative; flex: 1; height: 22px; border-radius: 0; background: var(--surface-2); overflow: hidden; min-width: 60px; } .dist-fill { position: absolute; inset: 0 auto 0 0; border-radius: 0; opacity: .85; } .dist-pct { position: absolute; left: 9px; top: 0; line-height: 22px; font-size: 12px; font-weight: 650; color: var(--text); } /* ------ priority column chart ------ */ .chart { display: flex; gap: 10px; height: 210px; } .chart-axis { display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; color: var(--text-faint); padding-bottom: 42px; text-align: right; flex: none; } .chart-plot { position: relative; flex: 1; display: flex; align-items: flex-end; gap: 10px; border-left: 1px solid var(--border); } .chart-plot .chart-tip { transform: translate(-50%, -140%); } .chart-line { position: absolute; left: 0; right: 0; height: 1px; background: var(--border); opacity: .7; } .chart-col { position: relative; flex: 1; height: 100%; display: flex; flex-direction: column; border: none; background: none; font: inherit; color: inherit; cursor: pointer; padding: 0; border-radius: var(--radius-sm); } .chart-col:hover { background: var(--surface-2); } .chart-bar-wrap { flex: 1; display: flex; align-items: flex-end; padding: 0 18%; min-height: 0; } .chart-bar { width: 100%; border-radius: 0; min-height: 2px; display: flex; align-items: flex-start; justify-content: center; transition: filter .12s ease; } .chart-col:hover .chart-bar { filter: brightness(1.15); } .chart-bar span { font-size: 12px; font-weight: 700; color: #fff; padding-top: 3px; text-shadow: 0 1px 2px rgba(0,0,0,.35); } .chart-tick { height: 42px; display: flex; flex-direction: column; align-items: center; gap: 2px; justify-content: center; font-size: 12px; color: var(--text-muted); white-space: nowrap; } /* ------ activity feed ------ */ .feed-scroll { max-height: 268px; overflow: auto; padding: 0 16px 12px; } .feed-day { font-size: 14px; font-weight: 650; color: var(--text-muted); padding: 10px 0 6px; position: sticky; top: 0; background: var(--surface); } .feed-item { display: flex; gap: 10px; padding: 7px 0; align-items: flex-start; border-radius: var(--radius-sm); } .feed-item:hover { background: var(--surface-2); } .feed-body { min-width: 0; flex: 1; font-size: 14px; line-height: 1.45; } /* ------ related projects ------ */ .related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } @media (max-width: 1100px) { .related-grid { grid-template-columns: 1fr; } } .related { display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-sm); padding: 9px 11px; cursor: pointer; font: inherit; color: inherit; } .related:hover { border-color: var(--brand); background: var(--surface-2); } .related-mark { width: 32px; height: 32px; border-radius: var(--radius-sm); flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12px; } .related-text { display: flex; flex-direction: column; min-width: 0; } /* A number in a sentence that you can click through to the list. */ .link-stat { border: none; background: none; padding: 0; font: inherit; font-size: 14px; color: var(--brand-text); cursor: pointer; text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color .12s; } .link-stat:hover { text-decoration-color: currentColor; } /* ------------------------------------------------------------ timeline -- */ .tl-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; } .tl-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--border); flex: none; } .tl-toolbar .spacer { margin-left: auto; } .tl-body { display: flex; flex: 1; min-height: 0; } /* The table of work. Fixed width; the chart beside it scrolls sideways. */ .tl-table { width: 452px; flex: none; display: flex; flex-direction: column; border-right: 1px solid var(--border); background: var(--surface); min-height: 0; } .tl-thead, .tl-tr { display: flex; align-items: center; height: 34px; flex: none; } .tl-thead { height: 42px; border-bottom: 1px solid var(--border); font-size: 14px; font-weight: 650; color: var(--text-faint); } .tl-tbody { overflow: hidden; flex: 1; min-height: 0; } .tl-tr { border-bottom: 1px solid var(--border); font-size: 14px; } .tl-tr:hover { background: var(--surface-2); } .tl-tr.parent { font-weight: 600; } .tl-td { display: flex; align-items: center; gap: 7px; overflow: hidden; } .tl-td.work { flex: 1; min-width: 0; padding-right: 10px; } .tl-td.status { width: 132px; flex: none; padding-right: 10px; } .tl-td.who { width: 46px; flex: none; } .tl-caret { border: none; background: none; cursor: pointer; padding: 0; flex: none; width: 15px; height: 15px; display: grid; place-items: center; line-height: 0; color: var(--text-faint); border-radius: 3px; transition: transform .14s ease; } .tl-caret:hover { background: var(--surface-2); color: var(--text); } .tl-caret.open { transform: rotate(90deg); } .tl-caret-gap { width: 15px; flex: none; } /* Finished work keeps its key struck through, the way a checked-off list reads. */ .key-badge.struck { text-decoration: line-through; opacity: .65; } /* A parent shows how far its children have got rather than its own status. */ .tl-progress { width: 100%; height: 8px; border-radius: 3px; background: var(--surface-2); overflow: hidden; } .tl-progress > span { display: block; height: 100%; background: var(--ok); border-radius: 3px; } .tl-scroll { flex: 1; overflow: auto; position: relative; } .tl-inner { position: relative; min-width: 100%; } .tl-header { height: 42px; position: sticky; top: 0; z-index: 3; min-width: 100%; background: var(--surface); border-bottom: 1px solid var(--border); } .tl-months { display: flex; height: 100%; } /* The month name sits high in the band so the Today pill can sit below it without the two overlapping. */ .tl-month { border-right: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: center; padding-top: 5px; font-size: 14px; font-weight: 600; color: var(--text-muted); overflow: hidden; white-space: nowrap; } .tl-month.now { color: var(--brand-text); background: var(--brand-soft); } .tl-chart { position: relative; min-width: 100%; } .tl-grid { position: absolute; inset: 0; pointer-events: none; } .tl-line { position: absolute; top: 0; bottom: 0; } .tl-line.weekend { background: var(--surface-2); } .tl-line.month { width: 1px; background: var(--border); } .tl-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--danger); opacity: .6; z-index: 2; pointer-events: none; } .tl-today-cap { position: absolute; bottom: 2px; transform: translateX(-50%); background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 3px; white-space: nowrap; z-index: 4; } .tl-row { height: 34px; border-bottom: 1px solid var(--border); position: relative; } .tl-row.parent { background: var(--surface-2); } .tl-nodate { position: sticky; left: 10px; font-size: 12px; color: var(--text-faint); line-height: 34px; padding-left: 2px; } /* Bars keep a light 5px edge — enough to read as a block, not a pill. */ .tl-bar { position: absolute; top: 7px; height: 20px; border-radius: 5px; cursor: pointer; display: flex; align-items: center; overflow: hidden; box-shadow: var(--shadow-sm); transition: filter .12s ease, transform .12s ease; } .tl-bar:hover { filter: brightness(1.08); transform: translateY(-1px); } .tl-bar.point { border-radius: 5px; } .tl-bar.summary { height: 12px; top: 11px; opacity: .9; } .tl-bar.done { opacity: .5; } .tl-bar.late { outline: 2px solid var(--danger); outline-offset: 1px; } .tl-bar-text { padding: 0 8px; font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); } /* --------------------------------------------------------- filter panel -- */ /* Fields down the left, that field's values on the right. A single flat list of every possible filter gets long enough that you stop reading it. */ .pop-panel.filter-panel { width: 560px; padding: 0; overflow: hidden; } .fp-body { display: flex; height: 316px; } .fp-rail { width: 172px; flex: none; padding: 10px 8px; border-right: 1px solid var(--border); background: var(--surface-2); display: flex; flex-direction: column; gap: 2px; } .fp-field { display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: none; font: inherit; color: var(--text-muted); padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; text-align: left; border-left: 2px solid transparent; } .fp-field:hover { background: var(--surface); color: var(--text); } .fp-field.on { background: var(--brand-soft); color: var(--brand-text); font-weight: 600; border-left-color: var(--brand); } .fp-field .chip { margin-left: auto; } .fp-pane { flex: 1; min-width: 0; padding: 12px; display: flex; flex-direction: column; } .fp-search { display: flex; align-items: center; gap: 8px; flex: none; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 0 10px; margin-bottom: 8px; color: var(--text-faint); } .fp-search:focus-within { border-color: var(--brand-text); box-shadow: 0 0 0 3px var(--brand-soft); } .fp-search input { border: none; background: none; padding: 8px 0; flex: 1; min-width: 0; color: var(--text); font-size: 14px; outline: none; box-shadow: none; } /* A fixed height, not a maximum: otherwise the panel resizes as you move between a field with four values and one with eight, and the whole thing jumps under the cursor. */ .fp-list { height: 250px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; } .fp-opt { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; } .fp-opt:hover { background: var(--surface-2); } .fp-foot { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--border); background: var(--surface-2); } .fp-foot .spacer { margin-left: auto; } .fp-foot .btn[disabled] { opacity: .4; pointer-events: none; } /* * The count on the Filter button. A normal .chip is taller than the button's * own line box, so adding one made the button grow and pushed the whole * toolbar row down the moment you picked a filter. This one is sized to sit * inside the line instead, and the button's height is pinned either way. */ .filter-count { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; flex: none; border: none; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-size: 11px; font-weight: 700; line-height: 1; } /* Hidden, not removed: taking it out of the flow would shrink the button and slide everything after it sideways the moment a filter is picked. The space is held whether or not there is a number in it. */ .filter-count:empty { visibility: hidden; } /* On the filled button the badge inverts, or it would vanish into the fill. */ .btn.primary .filter-count { background: var(--on-brand); color: var(--brand); } .toolbar.filters { min-height: 48px; } .toolbar.filters .pop > .btn { height: 30px; } /* A heading above a run of options — "Recent" then the rest. Only shown on the unfiltered list; once you search, the matches are the answer. */ .dd-group { font-size: 12px; font-weight: 650; color: var(--text-faint); padding: 8px 10px 4px; letter-spacing: .02em; } .dd-group:first-child { padding-top: 4px; } /* ---------------------------------------------------- project card (client) */ /* The card answers "how is this project doing?" without opening it — the numbers, not just a name and a count. */ .pc { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; /* never let content widen the grid cell */ container-type: inline-size; /* figures reflow on card width, not window width */ } .pc > * { min-width: 0; } .pc:hover { border-color: var(--brand); } .pc-head { display: flex; align-items: center; gap: 8px; } .pc-head .spacer { margin-left: auto; } .pc-head .key-badge { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* Two lines, then ellipsis — a long project name stays readable instead of being cut after three words. The fixed height keeps every card's figures on the same line whether the name wraps or not. */ .pc-name { font-family: var(--font-head); font-size: 15px; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; min-height: calc(2 * 1.3em); } .pc-cat { align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pc-cat .dot { flex: none; } /* Four across when the card is wide enough, otherwise a tidy 2x2 — never a lopsided 3+1. Keyed to the card, not the window, since a two-column grid halves the card long before the window gets small. */ .pc-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px 0 2px; border-top: 1px solid var(--border); } @container (min-width: 360px) { .pc-figures { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .pc-figure { min-width: 0; } .pc-value { font-family: var(--font-head); font-size: 19px; font-weight: 680; letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pc-value.bad { color: var(--danger); } .pc-label { font-size: 12px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pc-progress { height: 5px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .pc-progress > span { display: block; height: 100%; background: var(--ok); border-radius: 999px; } .pc-foot { display: flex; align-items: center; gap: 8px; } .pc-foot .spacer { margin-left: auto; } .pc .face { box-shadow: 0 0 0 2px var(--surface); cursor: default; } .pc .face:hover { transform: none; } .pc-foot .face-strip { min-width: 0; } /* ---------------------------------------------------------------- account -- */ /* The photo, beside what you can do about it. */ .face-row { display: flex; align-items: center; gap: 14px; } .face-row .avatar { box-shadow: 0 0 0 1px var(--border); } .face-actions { display: flex; flex-direction: column; gap: 6px; min-width: 0; } /* A fact about your account that only somebody else can change. */ .readonly-field { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 34px; color: var(--text); } /* One of a few settings, picked by clicking anywhere on the row. */ .choice-list { display: flex; flex-direction: column; gap: 6px; } .choice { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .choice:hover { background: var(--surface-2); } .choice.on { border-color: var(--brand); background: var(--brand-soft); } .choice input { width: auto; margin: 2px 0 0; flex: none; accent-color: var(--brand); } .choice-label { display: block; font-weight: 600; color: var(--text); font-size: 14px; } .choice-note { display: block; font-size: 13px; color: var(--text-muted); margin-top: 1px; } /* ---------------------------------------------------------------- profile -- */ .profile-page { padding: 0; } .profile-head { position: relative; background: var(--surface); border-bottom: 1px solid var(--border); } /* The band across the top. Without a picture it is a drawn one, so a fresh account still looks like somebody lives there. */ .profile-cover { height: 168px; position: relative; background: radial-gradient(900px 200px at 18% 120%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 70%), radial-gradient(700px 240px at 78% -20%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 72%), linear-gradient(120deg, var(--brand-soft), var(--surface-2)); background-size: cover; background-position: center; } .cover-tools { position: absolute; inset: 0; display: flex; gap: 8px; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; } .profile-cover:hover .cover-tools, .cover-tools:focus-within { opacity: 1; } .cover-tools .btn { background: var(--surface); box-shadow: var(--shadow-sm); } .profile-id { padding: 0 max(18px, (100% - var(--page-w)) / 2) 0; position: relative; } .profile-face { margin-top: -44px; position: relative; z-index: 1; width: fit-content; } .avatar.huge { width: 88px; height: 88px; font-size: 30px; box-shadow: 0 0 0 4px var(--surface); } .profile-name-row { display: flex; align-items: flex-start; gap: 16px; margin-top: 10px; } .profile-who { min-width: 0; flex: 1; } .profile-who h1 { font-size: 26px; margin: 0; line-height: 1.2; } .profile-role { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-muted); margin-top: 3px; } .add-role { border: none; background: none; padding: 3px 0; margin-top: 2px; cursor: pointer; color: var(--text-muted); font-size: 14px; font-weight: 550; } .add-role:hover { color: var(--brand-text); } .profile-actions { display: flex; align-items: center; gap: 8px; flex: none; } .profile-tabs { display: flex; gap: 4px; margin-top: 14px; } .profile-tabs button { border: none; background: none; cursor: pointer; font-size: 14.5px; font-weight: 550; color: var(--text-muted); padding: 9px 10px; border-bottom: 2px solid transparent; } .profile-tabs button:hover { color: var(--text); } .profile-tabs button.on { color: var(--brand-text); border-bottom-color: var(--brand); } .profile-body { padding: 20px max(18px, (100% - var(--page-w)) / 2) 32px; } .profile-section { margin-bottom: 26px; } .profile-section:last-child { margin-bottom: 0; } .section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .section-head h2 { font-size: 16px; margin: 0; } .section-head .spacer { margin-left: auto; } .info-dot { display: inline-grid; place-items: center; color: var(--text-faint); line-height: 0; cursor: help; } .link-btn { border: none; background: none; padding: 0; cursor: pointer; color: var(--brand-text); font-size: 14px; font-weight: 550; } .link-btn:hover { text-decoration: underline; } .working-text { margin: 0; font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; } .working-text.placeholder { color: var(--text-faint); } /* Recent work, and the projects they live in. */ .work-list, .work-extra, .space-list { display: flex; flex-direction: column; } .work-extra.hidden { display: none; } .work-row, .space-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 9px 8px; border: none; border-radius: var(--radius-sm); background: none; cursor: pointer; color: var(--text); font: inherit; } .space-row { cursor: default; } .work-row:hover, .space-row:hover { background: var(--surface-2); } .work-what, .space-what { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; } .work-title, .space-name { font-size: 14.5px; font-weight: 550; } .work-where, .space-kind { font-size: 13px; color: var(--text-muted); display: flex; gap: 6px; } .work-where .dot { opacity: .6; } .work-when { font-size: 13px; color: var(--text-faint); flex: none; } .show-more { margin: 6px 0 0 8px; align-self: flex-start; } /* Goals. */ .goal-list { display: flex; flex-direction: column; gap: 10px; } .goal-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 14px 15px; } .goal-top { display: flex; align-items: flex-start; gap: 12px; } .goal-who { min-width: 0; flex: 1; } .goal-title { font-size: 15px; margin: 0; } .goal-detail { margin: 4px 0 0; font-size: 13.5px; color: var(--text-muted); line-height: 1.5; } .goal-bar { height: 7px; border-radius: 999px; background: var(--surface-2); margin: 12px 0 8px; overflow: hidden; } .goal-fill { height: 100%; border-radius: 999px; background: var(--brand); transition: width .18s; } .goal-card.at_risk .goal-fill { background: #F59E0B; } .goal-card.off_track .goal-fill { background: var(--danger); } .goal-card.done .goal-fill { background: #10B981; } .goal-foot { display: flex; align-items: center; gap: 10px; } .goal-foot .spacer { margin-left: auto; } .goal-pct { font-size: 13px; font-weight: 650; color: var(--text-muted); min-width: 34px; } .goal-range { width: 140px; accent-color: var(--brand); padding: 0; } .goal-chip { font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); } .goal-chip.at_risk { background: #FEF3C7; color: #92400E; } .goal-chip.off_track { background: #FEE2E2; color: #991B1B; } .goal-chip.done { background: #D1FAE5; color: #065F46; } /* Projects. */ .proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; } .proj-card { display: flex; align-items: center; gap: 12px; text-align: left; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 13px 14px; cursor: pointer; color: var(--text); font: inherit; } .proj-card:hover { border-color: var(--border-strong); background: var(--surface-2); } .proj-what { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; } .proj-name { font-size: 14.5px; font-weight: 600; } .proj-sub { font-size: 13px; color: var(--text-muted); } /* Kudos. */ .kudos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; } .kudos-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 13px; display: flex; flex-direction: column; gap: 11px; } .kudos-from { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; } .kudos-from .spacer { margin-left: auto; } .kudos-art { border-radius: var(--radius-sm); overflow: hidden; line-height: 0; } .kudos-art svg { display: block; width: 100%; height: 118px; } .kudos-message { margin: 0; font-size: 14px; line-height: 1.55; white-space: pre-wrap; } .kudos-card.prompt .kudos-message { font-size: 13.5px; } .btn.wide { width: 100%; justify-content: center; } /* Picking the card art when writing one. */ .card-picker { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 8px; } .card-pick { padding: 0; border: 2px solid transparent; border-radius: 7px; overflow: hidden; background: none; cursor: pointer; line-height: 0; } .card-pick.on { border-color: var(--brand); } .card-pick-art svg { display: block; width: 100%; height: 34px; } @media (max-width: 860px) { .profile-name-row { flex-direction: column; gap: 10px; } .profile-actions { width: 100%; } .card-picker { grid-template-columns: repeat(3, 1fr); } /* A heading, a toggle and a button do not fit on one line on a phone — let the row wrap rather than push the button off the edge. */ .section-head { flex-wrap: wrap; } .section-head .spacer { margin-left: auto; } .profile-tabs { overflow-x: auto; scrollbar-width: none; } .profile-tabs::-webkit-scrollbar { display: none; } } /* A name that leads to the person behind it. */ .person-link { color: var(--text); text-decoration: none; font-weight: 550; } .person-link:hover { color: var(--brand-text); text-decoration: underline; } /* -------------------------------------------------------- account settings -- */ .acct-page { padding-top: 16px; } .acct-layout { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 28px; align-items: start; } .acct-nav { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 16px; } .acct-nav-group { display: flex; flex-direction: column; gap: 1px; } .acct-nav-head { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); padding: 4px 10px 6px; } .acct-nav-row { text-align: left; border: none; background: none; cursor: pointer; font: inherit; padding: 7px 10px; border-radius: var(--radius-sm); color: var(--text-muted); font-weight: 550; } .acct-nav-row:hover { background: var(--surface-2); color: var(--text); } .acct-nav-row.on { background: var(--brand-soft); color: var(--brand-text); font-weight: 650; } .acct-panel { min-width: 0; max-width: 760px; } .acct-head { margin-bottom: 18px; } .acct-head h1 { font-size: 24px; margin: 0 0 6px; } .acct-head p { margin: 0 0 4px; color: var(--text-muted); font-size: 14.5px; } .acct-sub { font-size: 15px; margin: 22px 0 9px; } .acct-sub:first-of-type { margin-top: 4px; } .acct-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; } /* The banner and the face that sits over it. */ .acct-banner { height: 116px; position: relative; background-size: cover; background-position: center; background-image: radial-gradient(700px 160px at 20% 120%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 70%), linear-gradient(120deg, var(--brand-soft), var(--surface-2)); } .acct-banner-face { position: absolute; left: 20px; bottom: -26px; } .acct-banner-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 36px 16px 14px; } .acct-vis-block { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; } .acct-vis-q { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-muted); } /* One fact per row: what it is, what it says, who can see it. */ .acct-row { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--border); } .acct-row:last-child { border-bottom: none; } .acct-row.head { padding: 9px 16px 5px; border-bottom: 1px solid var(--border); } .acct-row-what { flex: 1; min-width: 0; } .acct-row-label { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 650; color: var(--text-muted); margin-bottom: 2px; } .acct-row-vis { flex: none; width: 190px; display: flex; justify-content: flex-end; } .acct-static { font-size: 14.5px; padding: 5px 0; } /* The value edits in place — no Save button for a job title. */ /* Specific enough to beat the general input rule, which would otherwise draw a box around every one of these and turn the page into a form. */ .acct-row input.acct-inline { width: 100%; height: auto; border: 1px solid transparent; background: none; padding: 4px 7px; margin-left: -7px; border-radius: var(--radius-sm); font: inherit; font-size: 14.5px; color: var(--text); box-shadow: none; } .acct-row input.acct-inline:hover { border-color: var(--border); background: var(--surface-2); } .acct-row input.acct-inline:focus { border-color: var(--brand); background: var(--surface); outline: none; } .acct-row input.acct-inline.empty { color: var(--text-faint); } .acct-row input.acct-inline::placeholder { color: var(--text-faint); } .vis-pick { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; border: 1px solid transparent; background: none; cursor: pointer; font: inherit; padding: 5px 8px; border-radius: var(--radius-sm); color: var(--text-muted); font-size: 14px; } .vis-pick:hover { border-color: var(--border); background: var(--surface-2); color: var(--text); } .vis-pick .icon { line-height: 0; flex: none; } .vis-pick.locked { cursor: default; opacity: .85; } .vis-pick.locked:hover { border-color: transparent; background: none; color: var(--text-muted); } .vis-label { font-weight: 550; } .vis-opt { display: flex; flex-direction: column; gap: 1px; } .vis-opt-label { font-weight: 600; color: var(--text); } .vis-opt-note { font-size: 12.5px; color: var(--text-muted); line-height: 1.35; white-space: normal; } .menu .opt:has(.vis-opt) { align-items: flex-start; padding: 9px 10px; } .menu .opt:has(.vis-opt) .menu-icon { margin-top: 2px; } /* Email and sign-in. */ .acct-current { font-size: 14.5px; margin: 0 0 12px; } .google-row { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); } .google-row .icon { line-height: 0; flex: none; } .google-what { min-width: 0; } .google-title { font-size: 14px; font-weight: 600; } .google-row .spacer { margin-left: auto; } .google-btn { width: 100%; justify-content: center; gap: 9px; } .auth-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 12px; color: var(--text-faint); font-size: 13px; } .auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--border); } .notice { display: flex; gap: 11px; padding: 12px 14px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); } .notice .icon { line-height: 0; flex: none; margin-top: 1px; } .notice-title { font-weight: 650; font-size: 14px; margin-bottom: 2px; } .notice p { margin: 0; font-size: 13.5px; color: var(--text-muted); line-height: 1.5; } .notice.warn { border-color: #B4820033; background: color-mix(in srgb, #F59E0B 10%, var(--surface)); } .notice.warn .icon { color: #B45309; } /* Admin: a row that leads somewhere, and the figures on the billing page. */ .acct-link-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: none; border-bottom: 1px solid var(--border); background: none; cursor: pointer; font: inherit; color: var(--text); padding: 12px 16px; } .acct-link-row:last-child { border-bottom: none; } .acct-link-row:hover { background: var(--surface-2); } .acct-link-what { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; } .acct-link-title { font-size: 14.5px; font-weight: 600; } .acct-link-row .icon { line-height: 0; color: var(--text-faint); } .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 4px; } .stat-tile { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 14px 15px; display: flex; flex-direction: column; gap: 2px; } .stat-value { font-size: 22px; font-weight: 700; line-height: 1.15; } .stat-label { font-size: 13px; color: var(--text-muted); font-weight: 550; } @media (max-width: 860px) { .acct-layout { grid-template-columns: 1fr; gap: 16px; } .acct-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 10px; } .acct-nav-group { flex-direction: row; flex-wrap: wrap; gap: 4px; } .acct-nav-head { width: 100%; padding: 0 0 2px; } .acct-row { flex-wrap: wrap; } .acct-row-vis { width: auto; justify-content: flex-start; } .acct-row.head { display: none; } } /* ------------------------------------------------------- starting a workspace * * The bare domain, where a company signs up. Nothing here belongs to anybody * yet, so it is one card and no shell around it. */ .auth-card.wide { max-width: 440px; } .auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .auth-brand .logo { line-height: 0; } .auth-name { font-size: 15px; font-weight: 650; color: var(--text); } .auth-tag { font-size: 13px; color: var(--text-muted); } .auth-rule { height: 1px; background: var(--border); margin: 16px 0; } .auth-foot { text-align: center; font-size: 12.5px; color: var(--text-faint); margin-top: 14px; } .auth-foot code { font-family: var(--mono); font-size: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; } .auth-aside { text-align: center; font-size: 13px; color: var(--text-muted); margin-top: 16px; } /* The address as it will read, shown while it is typed. */ .slug-preview { margin-top: 6px; font-family: var(--mono); font-size: 13px; color: var(--text-muted); } .slug-preview strong { color: var(--text); font-weight: 650; } .slug-verdict { margin-top: 4px; font-size: 12.5px; min-height: 16px; color: var(--text-faint); } .slug-verdict.ok { color: var(--ok); } .slug-verdict.bad { color: var(--danger); } /* --------------------------------------------------------- requests to join */ /* Said once at the top of the queue, because "this address matches" is not the same as "this is who they say they are". */ .notice { display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; padding: 11px 14px; margin-bottom: 14px; font-size: 13px; line-height: 1.5; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--warn); border-radius: var(--radius-sm); } .notice strong { color: var(--text); font-weight: 600; } .join-row { display: flex; align-items: flex-start; gap: 13px; padding: 14px 0; border-bottom: 1px solid var(--border); } .join-row:last-child { border-bottom: none; } .join-who { flex: 1; min-width: 0; } .join-name { font-size: 14.5px; font-weight: 600; color: var(--text); } .join-email { font-size: 13px; color: var(--text-muted); font-family: var(--mono); } .join-message { margin-top: 7px; padding: 8px 10px; font-size: 13px; line-height: 1.45; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); } .join-actions { display: flex; align-items: center; gap: 7px; flex: none; padding-top: 2px; } /* A phone has no room for a face, a name and two buttons on one line. */ @media (max-width: 560px) { .join-row { flex-wrap: wrap; } .join-actions { width: 100%; justify-content: flex-end; } }