/* Legal Work — visual system modelled on linear.app (light + dark). */ /* Inter, served from this site (no Google Fonts: it can hang the first paint for many seconds). */ @font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/inter-cyrillic-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/inter-latin-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } :root { /* light */ --frame: lch(94.44% 0.5 282); /* app frame & sidebar */ --base: lch(98.5% 0.5 282); /* content card */ --elev: #ffffff; /* popovers, modals */ --elev2: lch(96.5% 0.5 282); --hover: lch(91.5% 0.8 282 / 0.55); --active: lch(90% 1 282 / 0.9); --group: lch(95.6% 0.5 282); /* group header strip */ --border: lch(88.49% 0 282); --border-soft: lch(92.5% 0 282); --text: lch(9.44% 0 282); --text-2: lch(30% 1.25 282); --text-3: lch(45% 1.25 282); --text-4: lch(64.64% 1.25 282); --icon: lch(37.776% 1.25 282); --accent: lch(48% 59.31 288.43); --accent-hover: lch(54% 59 288); --accent-soft: lch(48% 59 288 / 0.12); --accent-text: lch(44% 60 288); --red: lch(50% 80 29); --orange: lch(66% 80 48); --date-soon: lch(44% 55 50); --date-overdue: lch(46% 65 29); --yellow: lch(80% 82 85); --green: lch(60% 50 150); --blue: lch(60% 50 250); --purple: lch(55% 60 300); --row-h: 40px; --shadow: 0 0 0 1px lch(85% 0 282 / 0.7), 0 4px 10px lch(0% 0 0 / 0.04), 0 16px 32px lch(0% 0 0 / 0.08); --mono: "Berkeley Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --frame: lch(3.8% 0.5 282); --base: lch(6.3% 0.6 282); --elev: lch(9.5% 1 282); --elev2: lch(11.5% 1 282); --hover: lch(14% 1.2 282 / 0.6); --active: lch(17% 1.5 282 / 0.8); --group: lch(8.6% 0.8 282); --border: lch(15.5% 1 282); --border-soft: lch(12% 1 282); --text: lch(96% 0.5 282); --text-2: lch(82% 1 282); --text-3: lch(64% 1.25 282); --text-4: lch(46% 1.25 282); --icon: lch(64% 1.25 282); --date-soon: lch(75% 55 60); --date-overdue: lch(65% 65 29); --accent-soft: lch(48% 59 288 / 0.22); --accent-text: lch(70% 45 288); --shadow: 0 0 0 1px lch(20% 1 282), 0 8px 24px lch(0% 0 0 / 0.5); color-scheme: dark; } } :root[data-theme="dark"] { --frame: lch(3.8% 0.5 282); --base: lch(6.3% 0.6 282); --elev: lch(9.5% 1 282); --elev2: lch(11.5% 1 282); --hover: lch(14% 1.2 282 / 0.6); --active: lch(17% 1.5 282 / 0.8); --group: lch(8.6% 0.8 282); --border: lch(15.5% 1 282); --border-soft: lch(12% 1 282); --text: lch(96% 0.5 282); --text-2: lch(82% 1 282); --text-3: lch(64% 1.25 282); --text-4: lch(46% 1.25 282); --icon: lch(64% 1.25 282); --accent-soft: lch(48% 59 288 / 0.22); --accent-text: lch(70% 45 288); --date-soon: lch(75% 55 60); --date-overdue: lch(65% 65 29); --shadow: 0 0 0 1px lch(20% 1 282), 0 8px 24px lch(0% 0 0 / 0.5); color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { background: var(--frame); color: var(--text); font: 450 13px/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-feature-settings: "cv01", "ss03"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } ::selection { background: var(--accent-soft); } b, strong { font-weight: 600; } code { font-family: var(--mono); font-size: 12px; background: var(--elev2); border-radius: 4px; padding: 1px 4px; } /* ---------- frame ---------- */ .shell { display: grid; grid-template-columns: 244px 1fr; grid-template-rows: minmax(0, 1fr); height: 100vh; height: 100dvh; overflow: hidden; background: var(--frame); } /* side menu: the name + search / create on top and the person at the bottom stay; only the list between them scrolls */ .side { display: flex; flex-direction: column; padding: 8px 10px 10px; min-width: 0; min-height: 0; overflow: hidden; } .side-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 1px; margin: 0 -10px; padding: 0 10px 8px; -webkit-overflow-scrolling: touch; } .side-nav > * { flex-shrink: 0; } .ws { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px; margin-bottom: 6px; } .ws-logo { width: 20px; height: 20px; border-radius: 5px; background: linear-gradient(135deg, lch(62% 50 300), lch(52% 60 280)); display: grid; place-items: center; color: #fff; font: 600 12px Georgia, serif; flex: none; } .ws-name { font-weight: 550; font-size: 13.5px; } .ws-user { margin-left: auto; color: var(--text-4); font-size: 12px; } .nav-item { display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 8px; border-radius: 6px; color: var(--text-2); cursor: pointer; user-select: none; white-space: nowrap; font-weight: 500; font-size: 13.5px; } @media (hover: hover) { .nav-item:hover { background: var(--hover); color: var(--text); } } .nav-item.active { background: var(--active); color: var(--text); } .nav-item svg, .nav-item .i { width: 16px; height: 16px; flex: none; color: var(--icon); } .nav-item .count { margin-left: auto; color: var(--text-4); font-size: 12px; font-weight: 450; } .nav-section { color: var(--text-3); font-size: 12.5px; font-weight: 500; padding: 16px 8px 4px; display: flex; align-items: center; gap: 4px; } .nav-section::after { content: "▾"; font-size: 9px; color: var(--text-4); } .nav-sub { font-weight: 450; padding-left: 10px; } .nav-sub .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-4); flex: none; margin: 0 4px 0 3px; } .side-foot { margin-top: auto; padding-top: 8px; display: flex; gap: 2px; align-items: center; } .side-foot .btn.ghost { color: var(--text-3); } .main { display: flex; flex-direction: column; min-width: 0; overflow: hidden; margin: 8px 8px 8px 0; background: var(--base); border: 1px solid var(--border); border-radius: 10px; } .topbar { height: 46px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 18px; border-bottom: 1px solid var(--border-soft); } .crumbs { display: flex; align-items: center; gap: 6px; color: var(--text-3); min-width: 0; font-size: 13.5px; } .crumbs b { color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crumbs .sep { color: var(--text-4); } .topbar .spacer { flex: 1; } .btn.menu-btn { display: none; } .subbar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--border-soft); } .subbar-tabs { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; } .subbar-tabs::-webkit-scrollbar { display: none; } .subbar-tabs > * { flex: none; } .tab { height: 28px; padding: 0 12px; border-radius: 14px; border: 1px solid transparent; background: transparent; display: inline-flex; align-items: center; color: var(--text-2); cursor: pointer; font-weight: 500; white-space: nowrap; flex: none; } @media (hover: hover) { .tab:hover { background: var(--hover); } } .tab.on { background: var(--active); border-color: transparent; color: var(--text); } .content { flex: 1; overflow-y: auto; padding-bottom: 12px; } .split { display: flex; flex: 1; min-height: 0; } .split > .content { flex: 1; min-width: 0; } /* Peek panel: own scroll, never taller than the window */ #peek-slot { display: flex; min-height: 0; } #peek-slot:empty { display: none; } /* ---------- controls ---------- */ .btn { height: 28px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--base); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 13px; white-space: nowrap; box-shadow: 0 1px 1px lch(0% 0 0 / 0.03); } @media (hover: hover) { .btn:hover { background: var(--hover); } } .btn.primary { background: var(--accent); border-color: transparent; color: #fff; box-shadow: none; } @media (hover: hover) { .btn.primary:hover { background: var(--accent-hover); } } .btn.ghost { background: transparent; border-color: transparent; color: var(--text-3); box-shadow: none; } @media (hover: hover) { .btn.ghost:hover { background: var(--hover); color: var(--text); } } .btn.danger { color: var(--red); } .btn svg, .btn .i { width: 15px; height: 15px; } .btn:disabled { opacity: 0.5; cursor: default; } .kbd { font: 500 11px var(--mono); color: var(--text-4); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; line-height: 16px; background: var(--base); } .input, .textarea, .select { width: 100%; background: var(--base); border: 1px solid var(--border); border-radius: 6px; padding: 6px 9px; outline: none; transition: border-color 0.12s, box-shadow 0.12s; } .input:focus, .textarea:focus, .select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .textarea { resize: vertical; min-height: 72px; line-height: 1.5; } /* ---------- list ---------- */ .group-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; min-height: 38px; white-space: nowrap; margin: 6px 8px 2px; padding: 0 8px 0 12px; border-radius: 6px; background: var(--group); font-weight: 500; font-size: 13.5px; } .group-head > span:first-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; display: inline-flex; align-items: center; gap: 8px; } .group-head .muted { font-weight: 450; color: var(--text-4); } .group-head .btn.ghost { height: 26px; padding: 0 6px; } .row { display: flex; align-items: center; gap: 12px; height: var(--row-h); padding: 0 18px 0 22px; margin: 0 8px; border-radius: 6px; cursor: pointer; min-width: 0; } @media (hover: hover) { .row:hover { background: var(--hover); } } .row.selected { background: var(--active); } .row .ident { color: var(--text-4); font-size: 13px; width: 58px; flex: none; font-variant-numeric: tabular-nums; } .row .title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; font-size: 13.5px; } .row .title .sub { color: var(--text-3); margin-left: 8px; font-weight: 450; } .row .meta { display: flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 12px; flex: none; } .row .date { width: 104px; display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; white-space: nowrap; font-size: 13px; color: var(--text-3); flex: none; font-variant-numeric: tabular-nums; } .row .date.overdue { color: var(--date-overdue); } .row .date.soon { color: var(--date-soon); } .indent-1 { padding-left: 46px; } .indent-2 { padding-left: 70px; } .indent-3 { padding-left: 94px; } .muted { color: var(--text-3); } .faint { color: var(--text-4); } .chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 12px; border: 1px solid transparent; color: var(--text-2); font-size: 12.5px; font-weight: 500; white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; background: var(--elev2); } .chip .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .chip.ball-us { color: var(--red); border-color: lch(50% 80 29 / 0.35); } .chip.accent { border-color: transparent; background: var(--accent-soft); color: var(--accent-text); } /* A leading avatar always sits flush against the left edge of the chip */ .chip:has(> .avatar:first-child) { padding-left: 0; gap: 6px; } .chip > .avatar:first-child { width: 22px; height: 22px; font-size: 10px; margin: 0; } .avatar { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font-size: 9.5px; font-weight: 600; color: #fff; letter-spacing: 0; } /* Avatar colours (class from colorFor) */ .av0 { background: #5e6ad2; } .av1 { background: #4cb782; } .av2 { background: #f2994a; } .av3 { background: #eb5757; } .av4 { background: #a67bf5; } .av5 { background: #4ea7fc; } .av6 { background: #e2a43b; } .av7 { background: #26b5ce; } /* Palette colours by name (class from tone()): set --c, which dots, SWOT marks and file badges paint with */ .t-red { --c: var(--red); } .t-orange { --c: var(--orange); } .t-yellow { --c: var(--yellow); } .t-green { --c: var(--green); } .t-blue { --c: var(--blue); } .t-purple { --c: var(--purple); } .t-text-3 { --c: var(--text-3); } .t-text-4 { --c: var(--text-4); } .dot[class*="t-"], .swot-mark { background: var(--c, var(--text-4)); } /* Small helpers instead of style="" */ .spacer { flex: 1; } .contents { display: contents; } .note.mb { margin-bottom: 10px; } .note.mt { margin-top: 8px; } .warn.strong { font-weight: 500; } #actions { display: flex; gap: 6px; } .btn.ws-btn { padding: 0 6px; } .btn.ws-new { border: 1px solid var(--border); background: var(--base); } .pop-foot { display: flex; justify-content: flex-end; padding: 6px; border-top: 1px solid var(--border); } .chip-check { display: flex; gap: 6px; align-items: center; cursor: pointer; } .fthumb.big { width: 64px; height: 64px; font-size: 14px; margin: 0 auto 12px; } .login-alt { margin-top: 18px; font-size: 12px; } .login-card p b { color: var(--text); } .login-card .input { font-family: inherit; } .login-card .input.code-input { font-size: 20px; letter-spacing: 8px; height: 46px; } .ico { width: 15px; height: 15px; flex: none; display: inline-block; vertical-align: -3px; } .empty { padding: 90px 20px; text-align: center; color: var(--text-3); } .empty h3 { color: var(--text); font-weight: 550; margin: 14px 0 4px; font-size: 15px; } .empty svg, .empty .i { width: 32px; height: 32px; color: var(--text-4); } /* ---------- case header ---------- */ .case-head { padding: 26px 30px 18px; border-bottom: 1px solid var(--border-soft); } .case-head h1 { font-size: 22px; font-weight: 600; margin: 0 0 12px; letter-spacing: -0.012em; } .props { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .goal { margin-top: 16px; display: grid; grid-template-columns: 120px 1fr; gap: 6px 14px; font-size: 13.5px; } .goal .k { color: var(--text-3); } .goal .v { color: var(--text-2); white-space: pre-wrap; } /* ---------- peek panel ---------- */ .peek { width: 460px; flex: none; border-left: 1px solid var(--border-soft); background: var(--base); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; min-height: 0; } .peek-head { display: flex; align-items: center; gap: 6px; height: 46px; padding: 0 10px 0 18px; border-bottom: 1px solid var(--border-soft); flex: none; } .peek-body { padding: 18px; } .peek-title { font-size: 18px; font-weight: 600; margin: 2px 0 16px; letter-spacing: -0.01em; outline: none; border-radius: 4px; } @media (hover: hover) { .peek-title[contenteditable="true"]:hover { background: var(--hover); } } .fields { display: grid; grid-template-columns: 130px 1fr; gap: 2px 8px; align-items: center; margin-bottom: 18px; } .fields .k { color: var(--text-3); font-size: 13px; padding: 4px 0; align-self: start; line-height: 22px; } .fields .v { min-width: 0; } .prop { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 6px; border-radius: 6px; cursor: pointer; flex-wrap: nowrap; } .prop:has(.chip) { flex-wrap: wrap; } @media (hover: hover) { .prop:hover { background: var(--hover); } } .prop.ro { cursor: default; } @media (hover: hover) { .prop.ro:hover { background: transparent; } } .prop .placeholder { color: var(--text-4); } .prop select, .prop input[type="date"], .prop input[type="text"], .prop input[type="email"] { background: transparent; border: none; outline: none; flex: 1; min-width: 0; width: auto; padding: 0; cursor: pointer; } .prop select option { background: var(--elev); color: var(--text); } .prop textarea { background: transparent; border: none; outline: none; width: 100%; resize: none; padding: 0; line-height: 1.5; min-height: 22px; } .section-title { font-weight: 550; font-size: 13px; color: var(--text-2); margin: 24px 0 8px; display: flex; align-items: center; gap: 8px; } .section-title .spacer { flex: 1; } .body-md { color: var(--text-2); line-height: 1.5; font-size: 14px; } .body-md h1, .body-md h2, .body-md h3 { color: var(--text); font-size: 14.5px; margin: 20px 0 8px; font-weight: 600; } .body-md hr { border: none; border-top: 1px solid var(--border-soft); margin: 20px 0; } .body-md p { margin: 0 0 12px; } .body-md ul { margin: 0 0 8px; padding-left: 18px; } .comment { display: flex; gap: 10px; padding: 8px 0; } .comment .c-body { flex: 1; } .comment .c-meta { color: var(--text-4); font-size: 12px; } .comment-box { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--base); box-shadow: 0 1px 2px lch(0% 0 0 / 0.03); } .comment-box textarea { background: transparent; border: none; outline: none; resize: none; min-height: 40px; } .comment-box .actions { display: flex; justify-content: flex-end; } /* ---------- overlays ---------- */ .backdrop { position: fixed; inset: 0; background: lch(0% 0 0 / 0.32); z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: min(12vh, 96px) 16px 16px; animation: fade 0.12s ease-out; } /* A dialog never leaves the screen: head and buttons stay, the body scrolls. */ .modal { width: min(660px, calc(100vw - 32px)); max-height: calc(100dvh - min(12vh, 96px) - 16px); display: flex; flex-direction: column; background: var(--elev); border-radius: 12px; box-shadow: var(--shadow); animation: pop 0.14s ease-out; overflow: auto; } .modal > .modal-head, .modal > .modal-foot { flex: none; } .modal > .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .modal-head { display: flex; align-items: center; gap: 8px; padding: 14px 18px 0; color: var(--text-3); font-size: 13px; } .modal-body { padding: 10px 18px 16px; } .modal-title-input { width: 100%; border: none; outline: none; background: transparent; font-size: 19px; font-weight: 600; padding: 6px 0; letter-spacing: -0.01em; } .modal-desc { width: 100%; border: none; outline: none; background: transparent; resize: none; min-height: 64px; color: var(--text-2); line-height: 1.5; font-size: 14.5px; } .modal-props { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 2px; } .modal-foot { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border-soft); } .modal-foot .spacer { flex: 1; } .pchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--base); cursor: pointer; color: var(--text-2); font-size: 12.5px; font-weight: 500; } @media (hover: hover) { .pchip:hover { background: var(--hover); color: var(--text); } } .pchip.set { color: var(--text); } .pchip.req { border-style: dashed; } .pchip select, .pchip input { background: transparent; border: none; outline: none; cursor: pointer; font-size: 12.5px; max-width: 180px; } .popover { position: fixed; z-index: 60; width: 300px; max-height: 340px; background: var(--elev); border-radius: 10px; box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; animation: pop 0.1s ease-out; } .popover input { border: none; border-bottom: 1px solid var(--border-soft); background: transparent; outline: none; padding: 10px 12px; } .popover .opts { overflow-y: auto; overscroll-behavior: contain; padding: 4px; } .opt { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 8px; border-radius: 6px; cursor: pointer; } .popover.menu button.opt { width: 100%; border: 0; background: transparent; text-align: left; font: inherit; } .opt.hl { background: var(--hover); } @media (hover: hover) { .opt:hover, .popover.menu button.opt:hover { background: var(--hover); } } .opt .check { margin-left: auto; color: var(--accent-text); } .opt > span:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .opt .hint { color: var(--text-4); font-size: 12px; margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; flex: 0 1 auto; } .cmdk { width: min(640px, calc(100vw - 32px)); } .cmdk input { width: 100%; border: none; outline: none; background: transparent; padding: 16px 18px; font-size: 15px; border-bottom: 1px solid var(--border-soft); } .cmdk .opts { max-height: 380px; overflow-y: auto; padding: 6px; } .cmdk .opt { gap: 10px; } .cmdk .opt .m-ic { display: inline-flex; color: var(--text-3); flex: none; } .cmdk .opt .m-ic svg, .cmdk .opt .m-ic .i { width: 15px; height: 15px; } .cmdk .opt .opt-l { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cmdk .opt .hint { margin-left: 0; } .opt-group { padding: 10px 8px 4px; font-size: 11.5px; font-weight: 500; color: var(--text-4); } .opt-group:first-child { padding-top: 4px; } .opt-empty { padding: 14px 8px; color: var(--text-4); font-size: 13px; } /* Shortcut keys: grey caps, per OS (kbdHtml) */ .keys { display: inline-flex; align-items: center; gap: 3px; flex: none; } .keys .kbd { min-width: 18px; text-align: center; } .keys .then { font-size: 11px; color: var(--text-4); margin: 0 3px; } .keys-help { width: min(480px, calc(100vw - 32px)); } .keys-help .modal-body { max-height: min(70vh, 560px); overflow-y: auto; } .kh-group { font-size: 11.5px; font-weight: 500; color: var(--text-4); margin: 14px 0 4px; } .kh-group:first-child { margin-top: 0; } .kh-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; font-size: 13px; color: var(--text-2); } /* Phones and tablets without a keyboard: no key hints */ @media (hover: none) and (pointer: coarse) { .cmdk .keys, .popover.menu .m-kbd { display: none; } } #toasts { position: fixed; bottom: 16px; right: 16px; z-index: 80; display: flex; flex-direction: column; gap: 8px; } .toast { background: var(--elev); box-shadow: var(--shadow); border-radius: 8px; padding: 10px 14px; max-width: 380px; animation: pop 0.14s ease-out; font-weight: 500; } .toast.err { border-left: 3px solid var(--red); } /* ---------- login ---------- */ .login { height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--frame); } .login-card { width: min(360px, 100%); text-align: center; } .login-card .ws-logo { width: 44px; height: 44px; font-size: 24px; border-radius: 11px; margin: 0 auto 20px; } .login-card h1 { font-size: 21px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.012em; } .login-card p { color: var(--text-3); margin: 0 0 24px; } .login-card .input { height: 40px; margin-bottom: 10px; text-align: center; font-size: 14px; } .login-card .btn { width: 100%; height: 40px; justify-content: center; font-size: 14px; } /* ---------- tables ---------- */ .table { width: 100%; border-collapse: separate; border-spacing: 0; } .table th { text-align: left; font-weight: 500; color: var(--text-4); font-size: 12.5px; padding: 0 18px; height: 36px; border-bottom: 1px solid var(--border-soft); } .table td { padding: 0 18px; height: 48px; border-bottom: 1px solid var(--border-soft); } @media (hover: hover) { .table tr:hover td { background: var(--hover); } } .token-box { font: 500 12.5px var(--mono); background: var(--elev2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; word-break: break-all; margin: 10px 0; user-select: all; } .note { color: var(--text-3); font-size: 13px; line-height: 1.5; } .warn { color: var(--orange); } .spinner { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--text-3); border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; } .loading { display: flex; justify-content: center; padding: 60px; } @keyframes fade { from { opacity: 0; } } @keyframes pop { from { opacity: 0; transform: translateY(4px) scale(0.985); } } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 860px) { .shell { grid-template-columns: 1fr; } .side { position: fixed; inset: 0 auto 0 0; width: 264px; z-index: 40; transform: translateX(-100%); transition: transform 0.18s; background: var(--frame); } .shell.nav-open .side { transform: none; box-shadow: var(--shadow); } .main { margin: 0; border-radius: 0; border: none; } .btn.menu-btn { display: inline-flex; } .peek { position: fixed; inset: 0; width: 100%; z-index: 45; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } /* iPhone notch / home bar when installed as an app */ .topbar { height: calc(46px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); } .side { padding-top: calc(8px + env(safe-area-inset-top)); padding-bottom: calc(10px + env(safe-area-inset-bottom)); } .content { padding-bottom: calc(12px + env(safe-area-inset-bottom)); } input, select, textarea { font-size: 16px; } /* no zoom-in on focus in iOS */ .row .ident { display: none; } .row { padding: 0 12px; margin: 0 4px; } .group-head { margin: 4px; } .group-head .chip:not(.ball-us), .group-head .muted { display: none; } .group-head > span:first-child { flex: 1; } .case-head { padding: 20px 16px 14px; } .goal { grid-template-columns: 1fr; gap: 2px; } .goal .v { margin-bottom: 8px; } .indent-1 { padding-left: 30px; } .indent-2 { padding-left: 48px; } .indent-3 { padding-left: 66px; } .table .hide-m { display: none; } .table th, .table td { padding: 0 12px; } } /* ---------- full record page (Linear issue layout) ---------- */ .crumbs a.crumb { color: var(--text-3); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; } @media (hover: hover) { .crumbs a.crumb:hover { color: var(--text); } } .issue { display: grid; grid-template-columns: minmax(0, 1fr) 300px; min-height: 100%; } .issue-main { padding: 28px 48px 40px; max-width: 860px; width: 100%; margin: 0 auto; box-sizing: border-box; } .issue-side { padding: 28px 20px 18px 8px; } /* «Детали»: its baseline on the baseline of the first line of the record's title (the panel and the page start at * the same height; 22px is measured for the title's 24px / 1.3 and this 12.5px / 16px), a little to the right of * the values under it, with a thin line under it — what follows is additional content (Vlad, 07.11.2026) */ .issue-side .side-title { color: var(--text-3); font-size: 12.5px; line-height: 16px; font-weight: 500; margin: 22px 0 12px; padding: 0 0 8px 6px; border-bottom: 1px solid var(--border-soft); } .issue-side .fields { grid-template-columns: 130px 1fr; background: var(--frame); border-radius: 12px; padding: 10px 8px; } .issue-ident { color: var(--text-3); font: 500 12px var(--mono); display: flex; align-items: center; gap: 10px; } .role-chip { font: 500 11.5px Inter, sans-serif; color: var(--accent-text); background: var(--accent-soft); padding: 2px 8px; border-radius: 10px; } .issue-title { font-size: 24px; font-weight: 600; letter-spacing: -0.012em; margin: 10px 0 14px; outline: none; line-height: 1.3; } .desc { font-size: 14.5px; line-height: 1.5; color: var(--text); } .desc.empty { font-size: 13.5px; } .desc p { margin: 0 0 12px; } .desc-edit { margin: 6px 0 0 -8px; color: var(--text-3); } .desc-editor { display: grid; gap: 8px; } .desc-editor textarea { width: 100%; box-sizing: border-box; min-height: 160px; font: inherit; font-size: 14.5px; line-height: 1.5; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--base); color: var(--text); resize: vertical; } .desc-editor .input { height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--base); color: var(--text); font: inherit; } .desc-editor .actions { display: flex; justify-content: flex-end; gap: 6px; } .tblock { display: grid; grid-template-columns: 170px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border-soft); } .tblock:first-child { margin-top: 18px; } .tblock-k { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-weight: 500; font-size: 13px; padding-top: 3px; } .tblock-v { font-size: 14.5px; line-height: 1.5; } .tblock-v textarea { width: 100%; border: none; outline: none; background: transparent; color: var(--text); font: inherit; resize: none; padding: 3px 6px; margin-left: -6px; border-radius: 6px; line-height: 1.5; } .tblock-v textarea:focus { background: var(--hover); } @media (hover: hover) { .tblock-v textarea:hover { background: var(--hover); } } .section-title .ico, .section-title .i { margin-right: 6px; } .subs { border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; } .subs .row { margin: 0; border-radius: 0; } .sub-add { display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 38px; color: var(--text-3); } .sub-add input { flex: 1; border: none; outline: none; background: transparent; color: var(--text); font: inherit; } .approve { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin: 16px 0 0; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); font-weight: 500; } .activity-title { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--border-soft); } .feed { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } .ev { display: grid; grid-template-columns: 6px 1fr; gap: 10px; align-items: baseline; color: var(--text-3); font-size: 12.5px; line-height: 1.5; padding-left: 8px; } .ev b { color: var(--text-2); font-weight: 500; } .ev-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-4); flex: none; transform: translateY(-1px); } .cm { display: flex; gap: 10px; border: none; border-radius: 10px; padding: 10px 2px; background: transparent; } .cm .avatar { width: 22px; height: 22px; font-size: 10px; } .cm-body { flex: 1; min-width: 0; } .cm-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; } .cm-head b { font-weight: 550; } .cm-files { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .file-chip { cursor: pointer; } @media (hover: hover) { .file-chip:hover { background: var(--hover); color: var(--text); } } .composer { border: 1px solid var(--border); border-radius: 10px; background: var(--base); box-shadow: 0 1px 2px rgba(0,0,0,.04); } .composer textarea { width: 100%; box-sizing: border-box; border: none; outline: none; resize: vertical; background: transparent; color: var(--text); font: inherit; font-size: 14px; padding: 12px 14px 4px; min-height: 56px; } .composer-files { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px; } .composer-files .x { cursor: pointer; color: var(--text-4); margin-left: 2px; } .composer-bar { display: flex; align-items: center; gap: 8px; padding: 6px 8px 8px 8px; } .composer-bar .spacer, .approve .spacer, .section-title .spacer { flex: 1; } .page-foot { max-width: 900px; padding: 0 30px 40px; box-sizing: border-box; } @media (max-width: 860px) { .issue { grid-template-columns: minmax(0, 1fr); } .issue-side { border-left: none; border-top: 1px solid var(--border-soft); order: 2; } .issue-main { padding: 18px 16px 30px; order: 1; } .issue-title { font-size: 22px; line-height: 1.3; } .desc, .body-md, .tblock-v { font-size: 16px; line-height: 1.5; } .body-md h2, .desc h2 { font-size: 17px; } .body-md h3, .desc h3 { font-size: 16px; } .tblock { grid-template-columns: 1fr; gap: 2px; } .page-foot { padding: 0 16px 30px; } .hide-m { display: none; } } .sub-add > svg, .sub-add > .i { width: 15px; height: 15px; flex: none; } .issue-main, .issue-side { min-width: 0; } .desc, .tblock-v, .cm-body { overflow-wrap: anywhere; } .warn-chip { color: var(--orange); border-style: dashed; } /* ---------- task page v2 ---------- */ .who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: -4px 0 16px; } .who-k { color: var(--text-3); font-size: 12.5px; margin-left: 4px; } .who-k:first-child { margin-left: 0; } .who[hidden] { display: none; } .who .chip { height: 26px; font-size: 13px; } .record-context { gap: 4px 12px; margin-bottom: 12px; } .record-context .chip { height: auto; min-height: 26px; max-width: 100%; padding: 0 4px; background: transparent; color: var(--text-2); white-space: normal; overflow-wrap: anywhere; } .record-context .chip-label { color: var(--text-3); font-weight: 450; flex: none; } .who .chip > .avatar:first-child { width: 24px; height: 24px; } .rich { position: relative; } .rich-body { font-size: 14.5px; line-height: 1.5; outline: none; min-height: 28px; border-radius: 8px; padding: 4px 8px; margin: 0 -8px; } @media (hover: hover) { .rich.editable .rich-body:hover { background: var(--hover); } } .rich.editable .rich-body:focus { background: transparent; } .rich-body:empty::before { content: attr(data-placeholder); color: var(--text-4); } .rich-body p { margin: 0 0 12px; } .rich-body ul, .rich-body ol { margin: 0 0 12px; padding-left: 22px; } .rich-body h2 { font-size: 17px; margin: 20px 0 8px; } .rich-body h3 { font-size: 15px; margin: 20px 0 8px; } .rich-body blockquote { margin: 0 0 12px; padding-left: 12px; border-left: 3px solid var(--border); color: var(--text-2); } .rich-body a { color: var(--accent-text); } .rich.saving .rich-body { opacity: .6; } .tblock { display: block; padding: 10px 0 2px; border-top: none; } .tblock:first-child { margin-top: 10px; } .tblock-k { padding: 0; margin-bottom: 2px; font-size: 12.5px; } .tblock-v { font-size: 14.5px; } .tblock-v textarea { display: block; width: calc(100% + 16px); box-sizing: border-box; margin: 0 -8px; padding: 4px 8px; font-size: 14.5px; line-height: 1.5; overflow: hidden; } .tblock-v p { margin: 0 0 12px; } .tblock-v > :last-child { margin-bottom: 0; } .file-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 0; color: var(--text-3); } .act-head { display: flex; align-items: center; gap: 8px; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--border-soft); margin-bottom: 12px; } .act-head .section-title { margin: 0; } .composer textarea { min-height: 40px; padding: 10px 14px; } .composer .composer-bar, .composer .composer-files { display: none; } .composer.open .composer-bar { display: flex; } .composer.open .composer-files { display: flex; } .feed { margin-top: 12px; } .history { margin-top: 6px; } .history > .btn { color: var(--text-3); padding-left: 6px; } .hist-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .sol { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--base); } .sol.proposed { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 0 3px var(--accent-soft); } .sol.rejected, .sol.superseded { opacity: .75; } .sev { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--text-4); } .sev.critical { background: var(--red); } .sev.important { background: var(--orange); } .reject { width: 100%; display: grid; gap: 6px; } .reject textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font: inherit; background: var(--base); color: var(--text); } .row-btns { display: flex; justify-content: flex-end; gap: 6px; } .modal-wide { width: min(760px, calc(100vw - 32px)); } .modal-wide .rich-body { border: 1px solid var(--border); margin: 0; padding: 10px 12px; min-height: 140px; } .criteria { display: flex; gap: 8px; padding: 8px 10px; background: var(--frame); border-radius: 8px; margin-bottom: 10px; font-size: 13px; } .hours { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); } .hours input { width: 80px; height: 28px; border: 1px solid var(--border); border-radius: 6px; padding: 0 8px; background: var(--base); color: var(--text); font: inherit; } .goal .short { outline: none; border-radius: 4px; } @media (hover: hover) { .goal .short[contenteditable]:hover { background: var(--hover); } } .goal .more { height: 22px; padding: 0 6px; color: var(--text-3); font-size: 12px; } .goal .full { margin-top: 6px; color: var(--text-2); } @media (max-width: 860px) { .issue-side { padding: 0 16px 16px; } .act-head { flex-wrap: wrap; } } [hidden] { display: none !important; } .chip.ball-us { color: var(--orange); border-color: color-mix(in srgb, var(--orange) 45%, transparent); background: color-mix(in srgb, var(--orange) 8%, var(--base)); font-weight: 550; } .chip.ball-them, .chip.ball-court, .chip.ball-authority { color: var(--text-3); } .chip.ball-none { color: var(--text-4); border-style: dashed; } .chip.ok-chip { color: var(--green); } .dir-row { padding-left: 22px; } .row.need-outcome .sub { color: var(--orange); } .date.soon { color: var(--orange); } .thread-head { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; } .thread { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--frame); border-radius: 14px; margin-bottom: 18px; } .mv { display: flex; } .mv.theirs { justify-content: flex-end; } .mv.internal { justify-content: center; } .mv { flex-direction: column; } .mv.ours { align-items: flex-start; } .mv.theirs { align-items: flex-end; } .mv.internal { align-items: center; } .outcome { margin: 4px 0 16px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--orange) 9%, var(--base)); border: 1px solid color-mix(in srgb, var(--orange) 35%, transparent); } .outcome-q { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; color: var(--orange); } .outcome-a { display: grid; grid-template-columns: 200px 1fr auto; gap: 8px; align-items: start; } .outcome-a textarea { border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font: inherit; background: var(--base); color: var(--text); resize: vertical; } @media (max-width: 860px) { .outcome-a { grid-template-columns: 1fr; } } /* files */ .files-box { margin-top: 14px; } .file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; } .fcard { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--base); cursor: pointer; overflow: hidden; transition: border-color .15s, box-shadow .15s; } @media (hover: hover) { .fcard:hover { border-color: var(--text-4); box-shadow: 0 1px 3px rgba(0,0,0,.06); } } .fcard.just { animation: pop .25s ease-out; } .fthumb { width: 38px; height: 38px; flex: none; border-radius: 8px; display: grid; place-items: center; font: 700 10px Inter, sans-serif; color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--base)); background-size: cover; background-position: center; } .fthumb.mini { width: 26px; height: 26px; font-size: 8px; } .fmeta { min-width: 0; flex: 1; } .fname { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fsub { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fdel { opacity: 0; border: none; background: transparent; color: var(--text-3); cursor: pointer; padding: 4px; border-radius: 6px; } .fdel svg, .fdel .i { width: 14px; height: 14px; } @media (hover: hover) { .fcard:hover .fdel { opacity: 1; } } @media (hover: hover) { .fdel:hover { background: var(--hover); color: var(--red); } } .fbar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; display: none; } .fbar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .15s; } .fcard.uploading { cursor: default; } .fcard.uploading .fbar { display: block; background: var(--border-soft); } .fcard.uploading .fmeta { opacity: .7; } .fcard.failed { border-color: var(--red); } .fcard.failed .fsub { color: var(--red); } #drop-overlay { position: fixed; inset: 0; z-index: 90; background: color-mix(in srgb, var(--accent) 10%, transparent); backdrop-filter: blur(2px); display: grid; place-items: center; pointer-events: none; } .drop-box { border: 2px dashed var(--accent); border-radius: 18px; background: var(--elev); padding: 34px 44px; text-align: center; box-shadow: var(--shadow); color: var(--accent-text); } .drop-box svg, .drop-box .i { width: 28px; height: 28px; } .drop-t { font-weight: 600; font-size: 15px; margin: 8px 0 4px; color: var(--text); } .cm.just { animation: pop .25s ease-out; } /* text size (profile setting): scales the content, not the window */ /* text size: applyTextSize() (app.js) writes the zoom of the page content as a literal number — some browsers ignore zoom: var() */ .seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .seg button { border: none; background: var(--base); color: var(--text-2); padding: 6px 14px; font: inherit; cursor: pointer; } .seg button + button { border-left: 1px solid var(--border); } .seg button.on { background: var(--active); color: var(--text); font-weight: 550; } /* no double-tap zoom; pinch zoom stays */ html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } .nav-backdrop { display: none; } @media (max-width: 860px) { /* mobile menu: everything behind it is dimmed and blurred; tap outside closes */ /* behind the open side menu the page is dimmed and softly blurred — the same as behind a sheet from the bottom */ .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(0,0,0,.18); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .18s; } .shell.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; } /* iOS zooms into fields with text smaller than 16px — keep every field at 16px */ input, select, textarea, [contenteditable="true"]:not(.issue-title), .rich-body { font-size: 16px !important; } } /* settings page */ .settings { max-width: 720px; padding: 28px 40px 48px; } .settings-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .settings-head .avatar { width: 44px; height: 44px; font-size: 16px; } .settings-head h1 { font-size: 20px; margin: 0 0 2px; font-weight: 600; } .settings section { border-top: 1px solid var(--border-soft); padding: 18px 0 6px; } .settings h2 { font-size: 13px; font-weight: 600; color: var(--text-3); margin: 0 0 10px; text-transform: none; } .set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; } .set-row b { font-weight: 550; } .set-act { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .set-row .set-act { margin-top: 0; flex: none; } .ok-text { color: var(--green); font-weight: 500; } .switch { appearance: none; width: 38px; height: 22px; border-radius: 11px; background: var(--border); position: relative; cursor: pointer; flex: none; transition: background .15s; } .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); } .switch:checked { background: var(--accent); } .switch:checked::after { transform: translateX(16px); } .btn.active-foot { background: var(--active); } @media (max-width: 860px) { .settings { padding: 18px 16px 40px; } .set-row { flex-direction: column; align-items: flex-start; } } .set-row > div:first-child { flex: 1; min-width: 0; } .set-row > .seg, .set-row > .btn, .set-row > .switch { flex: none; } .seg { flex: none; white-space: nowrap; } /* Icons never grow: every svg and .i in headers, rows, chips and sections has a fixed size */ .group-head svg, .group-head .i, .section-title svg, .section-title .i, .row svg, .row .i, .chip svg, .chip .i, .who svg, .who .i, .tblock-k svg, .tblock-k .i, .file-strip svg, .file-strip .i, .thread-head svg, .thread-head .i, .btn svg, .btn .i { width: 15px; height: 15px; flex: none; } .group-head > span:first-child svg, .group-head > span:first-child .i { margin-right: 2px; } @media (max-width: 860px) { /* long group titles wrap instead of being cut */ .group-head { height: auto; min-height: 36px; padding-top: 6px; padding-bottom: 6px; white-space: normal; } .group-head > span:first-child { min-width: 0; overflow-wrap: anywhere; } .group-head > span:first-child { white-space: normal; overflow: visible; line-height: 1.3; } } @media (max-width: 860px) { /* the title takes the free space; the spacer next to it does not split it in half */ .group-head > span:first-child { flex: 1 1 auto; } .group-head > span[style*="flex:1"] { flex: 0 0 0 !important; } /* top bar: buttons show only icons, the path gets the room */ #actions .btn > span { display: none; } #actions .btn { padding: 0 8px; } } /* ---------- file viewer ---------- */ body.viewer-open { overflow: hidden; } .viewer { position: fixed; inset: 0; z-index: 100; background: #111114; color: #eee; display: flex; flex-direction: column; animation: fade .12s; --text: #ececf1; --text-2: #c9c9d1; --text-3: #9a9aa5; } .vw-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top)); border-bottom: 1px solid rgba(255,255,255,.08); } .vw-name { display: flex; align-items: center; gap: 10px; min-width: 0; } .vw-title { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; color: #fff; } .vw-name .faint { color: #9a9aa5; font-size: 12px; } .vw-top .spacer { flex: 1; } .vw-top .btn { color: #eee; border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); } .vw-top .btn.ghost { background: transparent; border-color: transparent; } .vw-body { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } .vw-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border: none; border-radius: 10px; background: rgba(255,255,255,.08); color: #fff; font-size: 30px; cursor: pointer; z-index: 2; } @media (hover: hover) { .vw-nav:hover { background: rgba(255,255,255,.16); } } .vw-nav.prev { left: 12px; } .vw-nav.next { right: 12px; } .vw-loading { display: grid; place-items: center; } .vw-msg { color: #c9c9d1; text-align: center; max-width: 420px; padding: 20px; line-height: 1.5; } .vw-img { width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; touch-action: none; cursor: zoom-in; } .vw-img.zoomed { cursor: grab; } .vw-img img { max-width: 94%; max-height: 94%; object-fit: contain; transform-origin: center; transition: transform .05s; user-select: none; -webkit-user-drag: none; } .vw-pdf { width: 100%; height: 100%; display: flex; flex-direction: column; } .vw-pdf-bar { display: flex; align-items: center; gap: 6px; padding: 6px 14px; color: #c9c9d1; } .vw-pdf-bar .btn { color: #eee; min-width: 32px; font-size: 18px; } .vw-zoom { min-width: 48px; text-align: center; } .vw-pages { flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 12px 40px; } .vw-pg { background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.4); flex: none; } .vw-pg canvas { display: block; } .vw-audio { width: min(640px, 92vw); } .au-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 18px; } .au-wave { width: 100%; height: 90px; cursor: pointer; display: block; } .au-ctrl { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .au-play { width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--accent); color: #fff; font-size: 16px; cursor: pointer; } .au-time { font-variant-numeric: tabular-nums; color: #c9c9d1; } .au-ctrl .spacer { flex: 1; } .au-rate { border: 1px solid rgba(255,255,255,.18); background: transparent; color: #c9c9d1; border-radius: 8px; padding: 4px 9px; cursor: pointer; } .au-rate.on { background: rgba(255,255,255,.14); color: #fff; } .vw-video { max-width: 94%; max-height: 92%; border-radius: 8px; background: #000; } .vw-text, .vw-doc, .vw-sheet-wrap { width: 100%; height: 100%; overflow: auto; } .vw-text pre { margin: 0 auto; max-width: 980px; padding: 20px 24px 60px; white-space: pre-wrap; word-break: break-word; font: 13px/1.6 var(--mono); color: #e6e6ea; } .vw-doc { padding: 20px 12px 60px; } .paper { max-width: 820px; margin: 0 auto; background: #fff; color: #1b1c1f; padding: 48px 56px; border-radius: 4px; box-shadow: 0 2px 16px rgba(0,0,0,.4); line-height: 1.5; font-size: 14.5px; --text: #1b1c1f; --text-2: #3b3c40; } .paper table { border-collapse: collapse; margin: 10px 0; } .paper td, .paper th { border: 1px solid #ccc; padding: 4px 8px; } .paper img { max-width: 100%; } .vw-sheet-wrap { display: flex; flex-direction: column; } .vw-tabs { display: flex; gap: 4px; padding: 8px 12px; overflow-x: auto; flex: none; } .vw-tabs button { border: 1px solid rgba(255,255,255,.18); background: transparent; color: #c9c9d1; border-radius: 8px; padding: 4px 10px; cursor: pointer; white-space: nowrap; } .vw-tabs button.on { background: rgba(255,255,255,.14); color: #fff; } .vw-sheet { flex: 1; overflow: auto; padding: 8px 12px 40px; width: 100%; box-sizing: border-box; } .vw-sheet table { border-collapse: collapse; background: #fff; color: #1b1c1f; font-size: 13px; } .vw-sheet td, .vw-sheet th { border: 1px solid #d5d5da; padding: 4px 8px; white-space: nowrap; max-width: 360px; overflow: hidden; text-overflow: ellipsis; } .vw-sheet th { background: #f2f2f5; position: sticky; top: 0; } @media (max-width: 860px) { .vw-nav { display: none; } .paper { padding: 22px 18px; } .vw-dl span { display: none; } } /* ---------- lists on phones: a small card of up to 3 lines ---------- */ .row .tt { overflow: hidden; text-overflow: ellipsis; } @media (max-width: 860px) { .row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "lead title title" "lead meta date"; align-items: start; column-gap: 10px; row-gap: 3px; height: auto; min-height: 0; padding: 9px 12px; margin: 0 4px; } .row > .ident { display: none; } .row > :not(.ident):not(.title):not(.meta):not(.date):not(.swipe-act) { grid-area: lead; margin-top: 2px; } .row > .title { grid-area: title; white-space: normal; overflow: visible; font-size: 14.5px; line-height: 1.35; } .row > .title .tt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; } .row > .title .sub { display: block; margin: 1px 0 0; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row > .meta { grid-area: meta; min-width: 0; flex-wrap: nowrap; overflow: hidden; gap: 4px; } .row > .meta:empty { display: none; } .row > .date { grid-area: date; width: auto !important; font-size: 12px; align-self: center; } .row .meta .chip { height: 22px; font-size: 12px; padding: 0 7px; } .row .meta .chip.ic { font-size: 0; gap: 0; padding: 0 5px; } .row .meta .chip.round { width: 22px; padding: 0; } .row .meta .chip.ic svg, .row .meta .chip.ic .i { width: 14px; height: 14px; } .row .meta .chip.keep > .avatar:first-child { width: 20px; height: 20px; font-size: 9px; } .audit-row .ip { display: none; } .row.dir-row { padding-left: 16px; } /* parts opened under their parent («2/5»): one step to the right per level */ } /* ---------- motion (Linear-like: short, eased, never in the way) ---------- */ :root { --ease: cubic-bezier(.2, .8, .2, 1); --t-fast: 120ms; --t: 180ms; } @keyframes rise { from { opacity: 0; transform: translateY(6px); } } @keyframes sheet-up { from { transform: translateY(100%); } } @keyframes slide-in { from { opacity: 0; transform: translateX(16px); } } @keyframes fade-out { to { opacity: 0; transform: translateY(4px); } } /* page change: the content rises in */ #content.enter > * { animation: rise var(--t) var(--ease) both; } /* list rows appear one after another (first 16 rows) */ #content.enter > .row, #content.enter > .group-head { animation: rise var(--t) var(--ease) both; } #content.enter > :nth-child(1) { animation-delay: 0ms; } #content.enter > :nth-child(2) { animation-delay: 14ms; } #content.enter > :nth-child(3) { animation-delay: 28ms; } #content.enter > :nth-child(4) { animation-delay: 42ms; } #content.enter > :nth-child(5) { animation-delay: 56ms; } #content.enter > :nth-child(6) { animation-delay: 70ms; } #content.enter > :nth-child(7) { animation-delay: 84ms; } #content.enter > :nth-child(8) { animation-delay: 98ms; } #content.enter > :nth-child(9) { animation-delay: 112ms; } #content.enter > :nth-child(10) { animation-delay: 126ms; } #content.enter > :nth-child(11) { animation-delay: 140ms; } #content.enter > :nth-child(12) { animation-delay: 154ms; } #content.enter > :nth-child(13) { animation-delay: 168ms; } #content.enter > :nth-child(14) { animation-delay: 182ms; } #content.enter > :nth-child(15) { animation-delay: 196ms; } #content.enter > :nth-child(16) { animation-delay: 210ms; } .row, .btn, .tab, .chip, .nav-item, .fcard, .opt { transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .backdrop { animation: fade var(--t) var(--ease); } .modal { animation: pop var(--t) var(--ease); } .toast { animation: slide-in var(--t) var(--ease); } .toast.out { animation: fade-out 160ms var(--ease) forwards; } .popover, .cmdk { animation: pop var(--t-fast) var(--ease); } .viewer { animation: fade var(--t) var(--ease); } .vw-body > * { animation: rise var(--t) var(--ease); } .side .nav-item.active { transition: background-color var(--t) var(--ease); } @media (max-width: 860px) { /* dialogs open as bottom sheets on phones */ .backdrop { align-items: flex-end !important; padding: 0 !important; } .backdrop > .modal { width: 100% !important; max-width: none; border-radius: 16px 16px 0 0; max-height: 92dvh; overflow: auto; animation: sheet-up 260ms var(--ease); padding-bottom: env(safe-area-inset-bottom); } .backdrop > .modal::before { content: ""; display: block; width: 38px; height: 4px; border-radius: 2px; background: var(--border); margin: 8px auto 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* log entry details */ .log-d { display: grid; grid-template-columns: 120px 1fr; gap: 8px 12px; font-size: 13.5px; } .log-d .k { color: var(--text-3); } .log-d .v { min-width: 0; overflow-wrap: anywhere; } .log-ch { display: grid; gap: 4px; } .log-ch div { padding: 6px 8px; background: var(--frame); border-radius: 6px; } .log-ch s { color: var(--text-3); } /* ====================================================================== Shared parts (ui.js) — rows, sections, views, AI badge, details, tooltip. See admin/UI-RULES.md before adding anything page-specific. ====================================================================== */ .row .lead { display: inline-flex; align-items: center; flex: none; } .row.static { cursor: default; } .row.empty-row .tt { font-weight: 450; } .row.older { opacity: .65; } .row.disabled { opacity: .5; } .row .date.strong { font-weight: 600; color: var(--text); width: auto; } .row.wide-date .date { width: 110px; } .row .meta .btn { height: 26px; } /* AI check badge: «AI» + a drawn status icon in a circle */ .ai { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 4px 0 7px; border-radius: 11px; border: 1px solid var(--border); background: var(--base); flex: none; cursor: default; } .ai b { font: 650 10.5px/1 Inter, sans-serif; letter-spacing: .02em; color: var(--text-2); } .ai svg, .ai .i { width: 15px !important; height: 15px !important; flex: none; } @keyframes ai-spin { to { transform: rotate(360deg); } } .row .lead .ai { margin-right: 2px; } /* tooltip (hover on a computer, tap on a phone) */ #tip { position: fixed; z-index: 1000; max-width: 280px; padding: 6px 9px; border-radius: 7px; background: var(--text); color: var(--base); font-size: 12px; line-height: 1.35; pointer-events: none; box-shadow: var(--shadow); animation: tip-in .12s var(--ease); } @keyframes tip-in { from { opacity: 0; transform: translateY(3px); } } /* section: title, count, view switch, actions, fold */ .sec { margin-top: 6px; } .issue-main .sec { margin-top: 22px; } .issue-main .sec .group-head { margin-left: 0; margin-right: 0; } .issue-main .sec-empty { margin-top: 12px; } .sec-empty .btn { padding-left: 4px; } .sec-head { cursor: pointer; user-select: none; } .group-head.sec-head > .sec-count { display: inline; white-space: nowrap; font-variant-numeric: tabular-nums; } .sec-t .fold { display: inline-flex; color: var(--text-4); transition: transform var(--t-fast) var(--ease); transform: rotate(90deg); margin-right: -2px; } .sec-t .fold svg, .sec-t .fold .i { width: 12px !important; height: 12px !important; } .sec.folded .fold { transform: rotate(0); } .sec.folded .sec-body:not(.sliding) { display: none; } .sec-head .btn { height: 26px; padding: 0 8px; font-size: 12.5px; } .sec-body > .thread { margin: 6px 0 4px; } .group-head.minor { background: transparent; height: 32px; font-size: 12.5px; color: var(--text-3); } .group-head.minor.link { cursor: pointer; color: var(--text-2); } .vswitch { display: inline-flex; gap: 1px; padding: 2px; border-radius: 7px; background: var(--hover); margin-right: 2px; } .vbtn { width: 26px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 5px; background: transparent; color: var(--text-3); cursor: pointer; } .vbtn svg, .vbtn .i { width: 14px !important; height: 14px !important; } .vbtn.on { background: var(--base); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08); } .subbar .vswitch { flex: none; } /* record page: «Детали» panel */ .issue.no-side { grid-template-columns: minmax(0, 1fr); } .issue.no-side .issue-side { display: none; } .details-btn.on { background: var(--active); color: var(--text); } .record-more { display: none; } @media (max-width: 1199px) { .issue { grid-template-columns: minmax(0, 1fr); } .issue .issue-side { display: none; } } @media (min-width: 861px) and (max-width: 1199px) { .issue-main { padding: 28px 32px 40px; } } @media (max-width: 860px) { .record-secondary { display: none; } .record-more { display: inline-flex; } } .who { cursor: default; } .person-extras > div { margin-top: 14px; } @media (max-width: 860px) { .issue .issue-side { display: none; } .who { cursor: pointer; } .sec-head .btn { padding: 0 8px; } .row.empty-row .tt { display: block; -webkit-line-clamp: unset; } .issue-main .sec { margin-top: 16px; } .details-sheet .fields { grid-template-columns: 110px 1fr; } } /* computer: one line — the title always keeps at least ~40% of the row, extra chips give way first */ @media (min-width: 861px) { .row .title { flex: 1 1 0; min-width: min(40%, 320px); } .row .meta { flex: 0 1 auto; min-width: 0; overflow: hidden; } .row .meta > * { flex: none; } } /* a row that does not fit (fitRows in ui.js): less important chips become icons, then step aside */ .row .meta .chip.fit-ic { font-size: 0; gap: 0; padding: 0 5px; } .row .meta .chip.fit-ic > .avatar:first-child { margin: 0; } .row .meta .fit-hide { display: none !important; } .row.empty-row { height: auto; min-height: 36px; padding-top: 8px; padding-bottom: 8px; } .row.empty-row .title, .row.empty-row .tt { white-space: normal; } .who .kv { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; max-width: 100%; } /* only the top-level heading of a block sticks while scrolling; sub-headings (status groups, directions) scroll away */ .group-head.minor { position: static; z-index: auto; } /* ---- icons: a CSS mask painted with the text colour (sizes are set next to the svg rules above) */ .i { display: inline-block; width: 15px; height: 15px; flex: none; vertical-align: -2px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; } .st-todo { color: var(--text-3); } .st-progress { color: var(--yellow); } .st-wait { color: var(--orange); } .st-review { color: var(--green); } .st-done { color: var(--accent); } .st-cancel { color: var(--text-4); } .prio-u { color: var(--orange); } .ai .i { width: 15px; height: 15px; } /* activity: «Добавить» on the right */ .act-head .spacer { flex: 1; } /* menus: a name and a hint under it — nothing is cut */ /* record header: «X создал задачу для Y», then the value chips */ .who-line { margin-bottom: 8px; } .chip.editable { cursor: pointer; } @media (hover: hover) { .chip.editable:hover { background: var(--hover); border-color: var(--border); } } /* A chip with only an icon is a circle (repeat, thought type, key event, temperature, priority) */ .chip.round { width: 24px; height: 24px; padding: 0; gap: 0; justify-content: center; border-radius: 50%; flex: none; font-size: 0; } .chip.round .dot { width: 9px; height: 9px; } .date-pick { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .chip[data-field] { position: relative; } .pay { margin-top: 14px; } .pay a { color: var(--accent-text); text-decoration: none; } /* «Детали»: rare fields folded */ .more-fields { margin-top: 8px; } .more-fields > summary { cursor: pointer; color: var(--text-3); font-size: 12.5px; padding: 4px 6px; list-style: none; } .more-fields > summary::-webkit-details-marker { display: none; } .more-fields > summary::before { content: "›"; display: inline-block; width: 12px; transition: transform var(--t-fast) var(--ease); } .more-fields[open] > summary::before { transform: rotate(90deg); } .more-fields.closing > summary::before { transform: none; } .more-fields > .fields { margin-top: 6px; background: var(--frame); border-radius: 12px; padding: 10px 8px; grid-template-columns: 130px 1fr; } /* create dialog: title length hint */ .title-count { text-align: right; font-size: 11.5px; color: var(--text-4); margin: -6px 2px 6px; min-height: 14px; } .title-count.over { color: var(--orange); } /* ---- moves: the side is visible in a list too (ours — blue, theirs — grey) */ /* chat: no steps — every bubble of a side sits at the same edge; the sender is named once per run */ .mv.cont { margin-top: -6px; } /* ---- sub-tasks inline (like Linear «+ Add sub-issues») */ .subs-inline { margin-top: 14px; } .subs-head { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-weight: 550; font-size: 13px; margin-bottom: 4px; } .subs-rows .row { margin: 0; border-radius: 8px; } .sub-add-btn { display: inline-flex; align-items: center; gap: 6px; border: none; background: transparent; color: var(--text-3); font: inherit; font-size: 13px; padding: 6px 4px; cursor: pointer; border-radius: 6px; } @media (hover: hover) { .sub-add-btn:hover { color: var(--text); background: var(--hover); } } .sub-add-btn .i { width: 13px !important; height: 13px !important; } .sub-add { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border-radius: 8px; background: var(--hover); } /* ---- comment threads (one level of replies, like Linear) */ .cthread { padding: 2px 0 6px; } .cthread .replies { margin-left: 32px; border-left: 2px solid var(--border-soft); padding-left: 12px; } .cthread .replies:empty { display: none; } .cm-head .spacer { flex: 1; } .cm-reply { height: 22px; padding: 0 6px; font-size: 12px; color: var(--text-3); opacity: 0; } @media (hover: hover) { .cm:hover .cm-reply { opacity: 1; } } @media (hover: none) { .cm-reply { opacity: 1; } } .composer.reply { margin-left: 44px; margin-top: 4px; box-shadow: none; } .composer.reply textarea { min-height: 34px; padding: 7px 12px; font-size: 13.5px; } .reply-to { margin: 2px 0 0 46px; font-size: 12px; } .ev-more { height: 22px; padding: 0 8px; font-size: 12px; color: var(--text-3); margin-left: 8px; align-self: flex-start; } /* ---- file card: «⋮» menu instead of a delete cross */ .fmenu { border: none; background: transparent; color: var(--text-3); cursor: pointer; padding: 4px; border-radius: 6px; flex: none; align-self: center; } .fmenu .i { width: 15px !important; height: 15px !important; } @media (hover: hover) { .fmenu:hover { background: var(--hover); color: var(--text); } } .composer.reply textarea { resize: none; } .cthread .composer.reply { border-color: var(--border-soft); } /* ---- formatting bar on selection (like Linear) */ .rich-bar { position: fixed; z-index: 900; display: flex; align-items: center; gap: 1px; padding: 4px; background: var(--elev); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); animation: tip-in .12s var(--ease); } .rich-bar button { display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 30px; height: 30px; padding: 0 6px; border: none; background: transparent; color: var(--text-2); border-radius: 7px; cursor: pointer; } @media (hover: hover) { .rich-bar button:hover { background: var(--hover); color: var(--text); } } .rich-bar button.on { background: var(--active); color: var(--text); } .rich-bar .i { width: 16px; height: 16px; } .rich-bar button.wide .i:last-child { width: 11px; height: 11px; opacity: .6; } .rich-bar .aa { font: 500 14px Inter, sans-serif; color: var(--text-3); } .rich-bar button[data-c="text"] { border-right: 1px solid var(--border-soft); border-radius: 7px 0 0 7px; margin-right: 3px; padding-right: 8px; } .rich-body h1 { font-size: 20px; margin: 24px 0 8px; } .rich-body code { font: 12.5px var(--mono); background: var(--hover); padding: 1px 4px; border-radius: 4px; } .rich-body pre { font: 12.5px/1.55 var(--mono); background: var(--frame); padding: 10px 12px; border-radius: 8px; white-space: pre-wrap; margin: 0 0 12px; } /* comment box = the same editor */ .composer .rich { padding: 8px 14px 4px; } .composer .rich-body { margin: 0; padding: 2px 0; min-height: 22px; font-size: 14px; } .composer .rich.editable .rich-body:focus { background: transparent; box-shadow: none; } @media (hover: hover) { .composer .rich.editable .rich-body:hover { background: transparent; box-shadow: none; } } .composer.reply .rich { padding: 6px 12px 2px; } .composer.reply .rich-body { font-size: 13.5px; } /* ---- own dropdown (instead of