/* ============================================================ CTI Project Tracker — built around the Chickasaw Telecom brand orange (#e8880f). Light is the default. Dark is opt-in via the toggle in the bottom bar, which sets data-theme="dark" on and remembers the choice. The OS setting is deliberately NOT consulted, so the app opens light for everyone. ============================================================ */ :root { color-scheme: light; --page: #edeae4; /* behind the app shell */ --bg: #fdfcf9; /* app shell */ --panel: #f4f2ec; /* recessed centre column */ --card: #ffffff; --ink: #1a1a18; --muted: #76736c; --faint: #a5a199; --border: #e6e2d9; --border-strong: #d6d1c6; /* Brand orange, sampled from the logo. Dark ink on orange reads at ~8:1; white on orange would fail contrast, hence --on-accent is near-black. */ --accent: #e8880f; --accent-strong: #a85c08; /* links and hovers: ~4.6:1 on white */ --accent-soft: #fbead4; --on-accent: #241505; --link: #a85c08; --star: #e8880f; --badge-bg: #f1eee7; --badge-ink: #6a6258; --done-bg: #e9f2e9; --done-ink: #4a7550; --due-bg: #e6eef7; --due-ink: #2c5c8c; --overdue-bg: #fbe2dc; --overdue-ink: #a83f28; --danger-border: #e7c4b8; --shadow: 0 1px 2px rgba(35, 30, 20, .05), 0 6px 20px rgba(35, 30, 20, .045); --radius: 14px; } :root[data-theme="dark"] { color-scheme: dark; --page: #121110; --bg: #1c1b19; --panel: #232220; --card: #292826; --ink: #eceae4; --muted: #a39e95; /* Lighter than the obvious charcoal choice: --faint carries activity timestamps and counts, which are content. At #7c766d it measured 3.27:1 and failed AA. */ --faint: #9c968c; --border: #37342e; --border-strong: #48443c; /* The brand orange holds up on charcoal. Links lift to a lighter tint so they clear 4.5:1 against the dark surface, where #a85c08 would be far too dim. */ --accent: #e8880f; --accent-strong: #f2a744; --accent-soft: #3a2912; --on-accent: #241505; --link: #f2a744; --star: #e8880f; --badge-bg: #302e2a; --badge-ink: #b3ada2; --done-bg: #1f2a20; --done-ink: #93b193; --due-bg: #1e3347; --due-ink: #9dc4ea; --overdue-bg: #45251e; --overdue-ink: #f0a292; --danger-border: #5c3328; --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 20px rgba(0, 0, 0, .3); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--page); color: var(--ink); font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } h1 { font-size: 1.6rem; letter-spacing: -.02em; margin: 0 0 4px; } h2 { font-size: 1.02rem; letter-spacing: -.01em; margin: 0; } p { margin: 0 0 10px; } /* ---------- app shell ---------- */ .app-shell { min-height: 100vh; max-width: 1180px; margin: 0 auto; background: var(--bg); border: 1px solid var(--border); border-radius: 18px; display: flex; flex-direction: column; overflow: hidden; } @media (min-width: 1240px) { body { padding: 16px; } .app-shell { min-height: calc(100vh - 32px); } } /* ---------- top nav ---------- */ .topnav { display: flex; align-items: center; justify-content: center; gap: 26px; /* Symmetric padding reserves room for the absolutely-positioned account cluster on the right while keeping the brand centred on the page, not on the leftover space. */ padding: 14px 130px; position: relative; flex-wrap: wrap; min-height: 58px; /* Lifts the whole header, and anything it opens, above the page content below. Without this the account dropdown renders under the home page's cards. */ z-index: 100; } /* Pinned right so the brand stays optically centred regardless of this cluster. Centred with top/bottom rather than a transform: a transform would create a stacking context that traps the dropdown's z-index inside this element. */ .topnav-right { position: absolute; right: 18px; top: 0; bottom: 0; display: flex; align-items: center; gap: 8px; z-index: 1; } .icon-btn { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--muted); font-size: 1.05rem; line-height: 1; border: 1px solid transparent; background: none; cursor: pointer; text-decoration: none; } .icon-btn:hover { color: var(--ink); background: var(--panel); border-color: var(--border); text-decoration: none; } .icon-btn.active { color: var(--accent); background: var(--accent-soft); } .avatar-btn { background: none; border: 2px solid transparent; border-radius: 50%; padding: 0; cursor: pointer; display: block; line-height: 0; } .avatar-btn:hover { border-color: var(--border-strong); } .avatar-btn[aria-expanded="true"] { border-color: var(--accent); } /* ---------- account dropdown ---------- */ .user-menu { position: relative; } .menu-panel { position: absolute; right: 0; top: calc(100% + 10px); width: 260px; background: var(--card); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow); z-index: 50; overflow: hidden; text-align: left; } .menu-panel[hidden] { display: none; } .menu-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--border); } .menu-name { font-weight: 700; font-size: .92rem; } .menu-mail { color: var(--muted); font-size: .8rem; word-break: break-all; } .menu-tags { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .menu-items { padding: 6px; display: flex; flex-direction: column; } .menu-items a, .menu-items .theme-toggle { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; font-size: .875rem; color: var(--ink); text-decoration: none; background: none; border: none; width: 100%; font-family: inherit; cursor: pointer; text-align: left; } .menu-items a:hover, .menu-items .theme-toggle:hover { background: var(--panel); text-decoration: none; border-color: transparent; } .menu-foot { border-top: 1px solid var(--border); padding: 6px; } .menu-signout { width: 100%; text-align: left; padding: 9px 10px; border-radius: 8px; background: none; border: none; font-family: inherit; font-size: .875rem; color: var(--overdue-ink); cursor: pointer; font-weight: 600; } .menu-signout:hover { background: var(--overdue-bg); } @media (max-width: 760px) { /* Too little room to reserve both sides; let the group sit left of the cluster. */ .topnav { padding: 12px 96px 12px 16px; gap: 16px; justify-content: flex-start; } .menu-panel { width: 230px; } } .topnav a { color: var(--muted); font-size: .875rem; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px; text-decoration: none; } .topnav a:hover { color: var(--ink); text-decoration: none; } .topnav a.active { color: var(--ink); font-weight: 600; } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; color: var(--ink) !important; } .brand:hover { text-decoration: none; } .brand-logo { height: 30px; width: auto; display: block; } .brand-name { white-space: nowrap; } /* The wordmark is black ink, so each theme gets its own artwork. Both are in the markup and CSS picks one, which avoids a swap flicker on load. */ /* `:root` prefix keeps these ahead of `.home-logo img`, which also sets display. */ :root .logo-dark { display: none; } :root[data-theme="dark"] .logo-light { display: none; } :root[data-theme="dark"] .logo-dark { display: block; } @media (max-width: 760px) { .brand-name { display: none; } } /* ---------- main ---------- */ .app-body { flex: 1; padding: 8px 22px 28px; width: 100%; } .app-body.narrow { max-width: 960px; margin: 0 auto; } .container { max-width: 940px; margin: 0 auto; } /* ---------- home: three columns ---------- */ .home-grid { display: grid; grid-template-columns: 1fr minmax(340px, 400px) 1fr; gap: 24px; align-items: start; } @media (max-width: 1020px) { .home-grid { grid-template-columns: 1fr; } .home-left { order: 2; } .home-centre { order: 1; } .home-right { order: 3; } } .home-left { padding-top: 46px; text-align: right; } .home-left .greeting { font-size: 1.22rem; font-weight: 700; margin-bottom: 16px; } .side-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; } .pill-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--card); color: var(--ink); border: 1px solid var(--border-strong); border-radius: 10px; padding: 7px 13px; font-size: .865rem; font-weight: 500; font-family: inherit; cursor: pointer; text-decoration: none; box-shadow: 0 1px 1px rgba(35,30,20,.04); } .pill-btn:hover { border-color: var(--faint); text-decoration: none; } /* centre panel */ .home-centre { background: var(--panel); border-radius: var(--radius); padding: 22px 18px 24px; } .home-logo { display: grid; place-items: center; margin-bottom: 18px; } .home-logo img { height: 52px; width: auto; display: block; } .search-box { width: 100%; background: var(--card); border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px 13px; font: inherit; font-size: .88rem; color: var(--ink); margin-bottom: 16px; } .search-box::placeholder { color: var(--faint); } /* ---------- project cards ---------- */ .project-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 520px) { .project-grid { grid-template-columns: 1fr; } } .project-card { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 11px; padding: 14px 15px 13px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 5px; min-height: 108px; box-shadow: 0 1px 1px rgba(35,30,20,.035); } .project-card:hover { border-color: var(--border-strong); text-decoration: none; } .project-card h2 { font-size: .95rem; font-weight: 700; } .project-card .blurb { color: var(--muted); font-size: .8rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .project-card .card-foot { margin-top: auto; padding-top: 9px; display: flex; align-items: center; gap: 8px; } .star { position: absolute; top: 12px; right: 12px; color: var(--faint); font-size: .95rem; line-height: 1; } .star.on { color: var(--star); } .badge { display: inline-block; font-size: .67rem; font-weight: 600; letter-spacing: .02em; padding: 3px 8px; border-radius: 6px; background: var(--badge-bg); color: var(--badge-ink); } /* overlapping avatar cluster */ .avatar-stack { display: flex; } .avatar-stack .avatar { margin-left: -6px; border: 2px solid var(--card); } .avatar-stack .avatar:first-child { margin-left: 0; } .avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-size: .66rem; font-weight: 700; flex: none; } .avatar.lg { width: 32px; height: 32px; font-size: .74rem; } /* archived projects, folded away under the grid */ .archived { margin-top: 14px; font-size: .84rem; } .archived summary { cursor: pointer; color: var(--muted); font-weight: 500; padding: 6px 2px; list-style-position: inside; } .archived summary:hover { color: var(--ink); } .archived ul { margin: 4px 0 0; padding-left: 20px; } .archived li { padding: 3px 0; } .archived a { color: var(--muted); } .archived a:hover { color: var(--accent-strong); } /* ---------- danger zone ---------- */ .danger-zone { border-color: var(--danger-border); } .danger-zone h2 { color: var(--overdue-ink); } .flash.danger { background: var(--overdue-bg); color: var(--overdue-ink); border-color: var(--danger-border); } .danger-box { border: 1px solid var(--danger-border); background: var(--overdue-bg); border-radius: 10px; padding: 14px 16px; margin-top: 4px; } .danger-box strong { color: var(--overdue-ink); } .btn-danger { background: var(--overdue-ink); color: #fff; border-color: transparent; } .btn-danger:hover { filter: brightness(1.1); } /* ---------- activity rail ---------- */ .home-right { padding-top: 46px; } .rail-head { display: flex; align-items: baseline; gap: 8px; font-weight: 700; font-size: .98rem; margin-bottom: 14px; } .rail-head a { font-size: .8rem; font-weight: 500; } .activity { list-style: none; margin: 0; padding: 0; position: relative; } .activity::before { content: ""; position: absolute; left: 3px; top: 6px; bottom: 6px; width: 1px; background: var(--border); } .activity li { position: relative; padding: 0 0 18px 20px; } .activity li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); } .activity .when { display: block; font-size: .73rem; color: var(--faint); margin-bottom: 3px; } .activity .what { font-size: .83rem; line-height: 1.45; } .activity .who { font-weight: 600; } .activity .where { color: var(--muted); } .active-now { margin-top: 6px; font-size: .82rem; color: var(--muted); } .active-now .avatar-stack { margin-top: 8px; } /* ---------- bottom bar ---------- */ .bottombar { border-top: 1px solid var(--border); padding: 11px 20px; display: flex; align-items: center; gap: 16px; } .bottombar .spacer { flex: 1; } .bottom-links { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; } .bottom-links a, .bottom-links button { color: var(--muted); font-size: .84rem; font-weight: 500; background: none; border: none; font-family: inherit; cursor: pointer; padding: 0; } .bottom-links a:hover, .bottom-links button:hover { color: var(--ink); text-decoration: none; } .notify-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--card); border: 1px solid var(--border-strong); border-radius: 999px; padding: 5px 13px 5px 6px; font-size: .82rem; font-weight: 500; color: var(--ink); } /* theme toggle */ .theme-toggle { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--border-strong); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: .82rem; font-weight: 500; color: var(--ink); cursor: pointer; } .theme-toggle:hover { border-color: var(--faint); } .theme-toggle .icon { font-size: .9rem; line-height: 1; } .notify-pill:hover { border-color: var(--faint); text-decoration: none; } .notify-pill.has-new { border-color: var(--star); } .notify-count { width: 20px; height: 20px; border-radius: 50%; background: var(--panel); color: var(--muted); display: grid; place-items: center; font-size: .7rem; font-weight: 800; } .notify-pill.has-new .notify-count { background: var(--star); color: #4a3405; } /* a form button that has to read as a link, used in notification rows */ .link-open { background: none; border: none; padding: 0; font: inherit; color: var(--link); cursor: pointer; text-align: left; } .link-open:hover { text-decoration: underline; } /* inline comment thread under a to-do */ .todo-thread { list-style: none; padding: 4px 0 14px 28px; border-bottom: 1px solid var(--border); } .todo-thread .comments { margin-top: 0; } a.chip { text-decoration: none; } a.chip:hover { background: var(--border); text-decoration: none; } /* ---------- generic page furniture ---------- */ .page-head { display: flex; align-items: flex-start; gap: 16px; margin: 10px 0 20px; } .page-head .grow { flex: 1; } .subtle { color: var(--muted); font-size: .875rem; } .flash { background: var(--accent-soft); color: #8f4830; border: 1px solid #e8c3b3; border-radius: 10px; padding: 10px 14px; margin-bottom: 18px; font-size: .875rem; } .btn { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: var(--on-accent); border: 1px solid transparent; border-radius: 9px; padding: 8px 15px; font-size: .875rem; font-weight: 600; cursor: pointer; text-decoration: none; font-family: inherit; } .btn:hover { filter: brightness(1.06); text-decoration: none; } .btn-secondary { background: var(--card); color: var(--ink); border-color: var(--border-strong); font-weight: 500; } .btn-secondary:hover { border-color: var(--faint); filter: none; } input[type=text], input[type=date], input[type=time], input[type=email], input[type=file], textarea, select { font: inherit; font-size: .88rem; color: var(--ink); background: var(--card); border: 1px solid var(--border-strong); border-radius: 9px; padding: 8px 11px; } input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; } textarea { width: 100%; resize: vertical; } label { font-size: .8rem; color: var(--muted); display: block; margin-bottom: 4px; } .field { margin-bottom: 13px; } .validation { color: var(--overdue-ink); font-size: .82rem; } .inline { display: inline; } .link-btn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: .82rem; padding: 0; font-family: inherit; } .link-btn:hover { color: var(--ink); text-decoration: underline; } .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px; box-shadow: 0 1px 1px rgba(35,30,20,.035); } .empty { color: var(--muted); font-size: .9rem; text-align: center; padding: 40px 20px; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--card); } .stats { display: flex; gap: 26px; margin-bottom: 20px; } .stat .num { font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; } .stat .label { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; } /* ---------- project tool nav ---------- */ .project-nav { display: flex; gap: 4px; margin-bottom: 20px; background: var(--panel); border-radius: 10px; padding: 4px; flex-wrap: wrap; } .project-nav a { padding: 7px 14px; border-radius: 7px; color: var(--muted); font-size: .855rem; font-weight: 500; text-decoration: none; } .project-nav a:hover { color: var(--ink); text-decoration: none; } .project-nav a.active { color: var(--ink); background: var(--card); font-weight: 600; box-shadow: 0 1px 2px rgba(35,30,20,.07); } /* ---------- to-dos ---------- */ .todo-list { list-style: none; margin: 0; padding: 0; } .todo { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); } .todo:last-child { border-bottom: none; } .todo form.toggle { display: flex; align-items: center; padding-top: 1px; } .todo input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); } .todo .title { flex: 1; font-size: .9rem; } .todo.done .title { color: var(--muted); text-decoration: line-through; } .todo .notes { display: block; color: var(--muted); font-size: .81rem; margin-top: 2px; } .chip { font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--panel); color: var(--muted); white-space: nowrap; } .chip.due { background: var(--due-bg); color: var(--due-ink); } .chip.overdue { background: var(--overdue-bg); color: var(--overdue-ink); } .chip.assignee { background: var(--accent-soft); color: var(--accent-strong); } .chip.shared { background: var(--done-bg); color: var(--done-ink); } .add-row { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: flex-end; } .add-row input[type=text] { flex: 1; min-width: 180px; } .checkbox-inline { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .84rem; color: var(--ink); } .list-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .list-head .count { color: var(--faint); font-size: .8rem; font-weight: 500; } /* ---------- settings: tables, key/value, stat grid ---------- */ .table-scroll { overflow-x: auto; } table.grid { width: 100%; border-collapse: collapse; font-size: .875rem; } table.grid th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; padding: 0 10px 8px 0; border-bottom: 1px solid var(--border); white-space: nowrap; } table.grid td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--border); vertical-align: middle; } table.grid tr:last-child td { border-bottom: none; } table.grid td.num, table.grid th.num { text-align: right; padding-right: 18px; } table.grid td.right, table.grid th.right { text-align: right; padding-right: 0; } table.grid tr.row-off td { opacity: .55; } table.grid td .avatar { display: inline-grid; vertical-align: middle; margin-right: 8px; } .cell-name { display: inline-block; vertical-align: middle; } .cell-name .notes { display: block; color: var(--muted); font-size: .8rem; } .inline-form { display: inline; } .chip.overdue-chip { background: var(--overdue-bg); color: var(--overdue-ink); } .kv { display: grid; gap: 10px; } .kv > div { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; } .kv .k { min-width: 240px; color: var(--muted); font-size: .85rem; } .kv code { font-size: .82rem; background: var(--panel); color: var(--ink); padding: 3px 8px; border-radius: 6px; word-break: break-all; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 18px; } hr.rule { border: none; border-top: 1px solid var(--border); margin: 18px 0; } .btn[disabled] { opacity: .5; cursor: not-allowed; } /* ---------- calendar ---------- */ .cal { margin-bottom: 14px; } .cal-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; } .cal-head h2 { font-size: 1.05rem; } .cal-nav { display: flex; gap: 4px; margin-left: auto; } .cal-nav a { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 9px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--card); color: var(--ink); text-decoration: none; font-size: .82rem; line-height: 1; } .cal-nav a:hover { border-color: var(--faint); text-decoration: none; } .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .cal-dow { background: var(--panel); padding: 7px 8px; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); text-align: center; } .cal-day { background: var(--card); min-height: 104px; padding: 5px 5px 7px; display: flex; flex-direction: column; gap: 3px; } .cal-day.outside { background: var(--sunken, var(--panel)); } .cal-day.outside .cal-daynum { color: var(--faint); } .cal-day.today { box-shadow: inset 0 0 0 2px var(--accent); } .cal-day.selected { box-shadow: inset 0 0 0 2px var(--link); } .cal-daynum { align-self: flex-start; font-size: .78rem; font-weight: 600; color: var(--muted); min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; text-decoration: none; } a.cal-daynum:hover { background: var(--accent-soft); color: var(--accent-strong); text-decoration: none; } .cal-day.today .cal-daynum { background: var(--accent); color: var(--on-accent); } .cal-entry { display: flex; align-items: center; gap: 5px; font-size: .74rem; line-height: 1.25; text-decoration: none; color: var(--ink); padding: 2px 4px; border-radius: 5px; background: color-mix(in srgb, var(--entry) 13%, transparent); border-left: 3px solid var(--entry); overflow: hidden; } .cal-entry:hover { background: color-mix(in srgb, var(--entry) 24%, transparent); text-decoration: none; } .cal-entry .dot { display: none; } .cal-entry .txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-entry.done .txt { text-decoration: line-through; color: var(--muted); } .cal-entry.milestone { font-weight: 700; } .cal-more { font-size: .68rem; color: var(--faint); padding-left: 4px; } /* Browsers without color-mix still get a readable chip. */ @supports not (background: color-mix(in srgb, red 10%, transparent)) { .cal-entry { background: var(--panel); } } @media (max-width: 760px) { .cal-day { min-height: 72px; } .cal-entry .txt { display: none; } .cal-entry { justify-content: center; padding: 3px; border-left-width: 0; } .cal-entry .dot { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--entry); } } /* project colour swatches */ .swatches { display: flex; gap: 8px; flex-wrap: wrap; } .swatch { position: relative; } .swatch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .swatch span { display: block; width: 30px; height: 30px; border-radius: 8px; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); cursor: pointer; } .swatch input:checked + span { border-color: var(--ink); } /* Same swatch, as a submit button for changing an existing project's colour. */ .swatch-btn { background: none; border: none; padding: 0; cursor: pointer; line-height: 0; } .swatch-btn span { display: block; width: 30px; height: 30px; border-radius: 8px; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); } .swatch-btn.on span { border-color: var(--ink); } .swatch-btn:focus-visible span { outline: 2px solid var(--accent); outline-offset: 2px; } .swatch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; } .project-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: baseline; flex: none; } .cal-filter { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; } .cal-filter .pill-btn.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); } .cal-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: .8rem; } .cal-legend a { color: var(--muted); text-decoration: none; display: flex; align-items: center; } .cal-legend a:hover { color: var(--ink); } /* ---------- messages & documents ---------- */ .msg-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; } .msg-head .grow { flex: 1; } .msg-body { white-space: pre-wrap; font-size: .92rem; padding-bottom: 15px; border-bottom: 1px solid var(--border); } /* ---------- comments ---------- */ .comments { margin-top: 14px; } .comment { display: flex; gap: 10px; padding: 11px 0; } .comment + .comment { border-top: 1px solid var(--border); } .comment .avatar { width: 24px; height: 24px; font-size: .62rem; } .comment-body { flex: 1; } .comment-meta { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--faint); margin-bottom: 2px; } .comment-meta strong { color: var(--ink); font-size: .83rem; } .comment-text { white-space: pre-wrap; font-size: .89rem; } .comment-form { margin-top: 12px; padding-top: 13px; border-top: 1px solid var(--border); } /* ---------- sign in ---------- */ /* Step two of identifier-first sign-in: shows who we think you are. */ .who-row { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; } .who-row .avatar { width: 28px; height: 28px; font-size: .75rem; } .who-mail { flex: 1; font-size: .86rem; word-break: break-all; } .login-wrap { max-width: 400px; margin: 60px auto; } .login-card { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 30px; box-shadow: var(--shadow); } .login-card .home-logo { margin-bottom: 14px; } .user-pick { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; } .user-pick button { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; cursor: pointer; font-family: inherit; color: var(--ink); } .user-pick button:hover { border-color: var(--accent); background: var(--panel); } .user-pick .u-name { font-weight: 600; font-size: .9rem; } .user-pick .u-mail { color: var(--muted); font-size: .78rem; } /* "or, for development" divider on the sign-in card */ .or-rule { display: flex; align-items: center; gap: 12px; margin: 22px 0 4px; color: var(--faint); font-size: .78rem; } .or-rule::before, .or-rule::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* password controls in the users table */ .pw-cell { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pw-form { display: flex; align-items: center; gap: 6px; } .pw-form input[type=password] { width: 150px; font-size: .82rem; padding: 5px 8px; } .dev-warning { margin-top: 20px; font-size: .78rem; color: var(--muted); border-top: 1px solid var(--border); padding-top: 14px; }