/* * Homepage prototypes: design tokens + the popup's components, used to draw * product mockups on the page instead of screenshots. * * Copied from app/styles/base.css and app/styles/components.css (the calm * redesign, see docs/design-system.md). Differences from the popup: * - Every component rule is scoped under `.ts` so page styles can't clash. * - Theme, window color and density can be set on ANY element, not just * , so one page can show a light and a dark mockup side by side: * data-theme="light|dark" data-wstyle="tint|stripe|plain" * data-density="comfortable|compact" * Window style and density travel as custom properties, so the nearest * ancestor wins. */ /* ---------- Tokens ---------- */ :root, [data-theme="light"] { --brand: #3b82f6; --brand-strong: #2563eb; --brand-soft: rgba(59, 130, 246, 0.08); --brand-line: rgba(59, 130, 246, 0.35); --page: #e9eaee; --app: #f6f7f9; --surface: #ffffff; --surface-hover: #f5f6f8; --side: #fbfbfc; --side-hover: #f0f1f4; --border: #e6e7eb; --border-strong: #d7d9de; --text: #17181c; --text-2: #3f424a; --muted: #70737c; --faint: #a3a6ae; --warn: #b45309; --warn-soft: rgba(180, 83, 9, 0.07); --warn-line: rgba(180, 83, 9, 0.3); --danger: #dc2626; --ok: #16a34a; --ok-soft: rgba(22, 163, 74, 0.07); --ok-line: rgba(22, 163, 74, 0.28); --anchor: #009688; --shadow: 0 1px 2px rgba(16, 18, 24, .04), 0 1px 1px rgba(16, 18, 24, .03); --shadow-pop: 0 12px 40px rgba(16, 18, 24, .16), 0 2px 6px rgba(16, 18, 24, .06); --menu-bg: #ffffff; --menu-border: #d7d9de; --menu-shadow: 0 18px 48px rgba(16, 18, 24, .22), 0 4px 12px rgba(16, 18, 24, .10); --toast-bg: #17181c; --toast-text: #fff; --scrim: rgba(12, 14, 18, .32); --font: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif; --mono: ui-monospace, "Cascadia Mono", Consolas, monospace; color-scheme: light; } [data-theme="dark"] { --brand-strong: #60a5fa; --brand-soft: rgba(59, 130, 246, 0.12); --brand-line: rgba(96, 165, 250, 0.4); --page: #07080a; --app: #111317; --surface: #17191e; --surface-hover: #1d2026; --side: #0d0f12; --side-hover: #16181d; --border: #25282f; --border-strong: #30343c; --text: #e8e9ec; --text-2: #c4c6cc; --muted: #8d919a; --faint: #5d616a; --warn: #f0b429; --warn-soft: rgba(240, 180, 41, 0.1); --warn-line: rgba(240, 180, 41, 0.32); --danger: #f87171; --ok: #22c55e; --ok-soft: rgba(34, 197, 94, 0.1); --ok-line: rgba(34, 197, 94, 0.3); --shadow: none; --shadow-pop: 0 12px 40px rgba(0, 0, 0, .5); --menu-bg: #22252c; --menu-border: #363a43; --menu-shadow: 0 18px 48px rgba(0, 0, 0, .6), 0 4px 12px rgba(0, 0, 0, .4); --toast-bg: #e8e9ec; --toast-text: #111317; --scrim: rgba(0, 0, 0, .55); color-scheme: dark; } /* Window color style (Tint is the default) and density */ :root, [data-wstyle="tint"] { --w-wash: 4%; --w-edge: 18%; --w-stripe: 3px; } [data-wstyle="stripe"] { --w-wash: 0%; --w-edge: 0%; --w-stripe: 3px; } [data-wstyle="plain"] { --w-wash: 0%; --w-edge: 0%; --w-stripe: 0px; } :root, [data-density="comfortable"] { --row-h: 32px; } [data-density="compact"] { --row-h: 27px; } /* ---------- Mockup roots ---------- */ .ts { color: var(--text); font: 13px/1.4 var(--font); -webkit-font-smoothing: antialiased; text-align: left; letter-spacing: normal; } .ts, .ts * { box-sizing: border-box; } .ts svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .ts button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; margin: 0; text-align: inherit; } .ts h1, .ts h2, .ts h3, .ts p { margin: 0; } .ts kbd { font: 11px var(--mono); color: var(--faint); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; background: none; } /* The whole popup at its real size: 752 x 600. Scaled down by mock.js when its container is narrower. */ .ts.pop { width: 752px; height: 600px; flex: none; display: flex; overflow: hidden; position: relative; background: var(--app); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-pop); } .pop-fit { width: 100%; min-width: 0; display: flex; justify-content: center; } /* ---------- Sidebar ---------- */ .ts .sidebar { width: 176px; flex: none; background: var(--side); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 12px 8px; } .ts .brand { display: flex; align-items: center; gap: 9px; padding: 2px 8px 14px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; } .ts .logo { width: 24px; height: 24px; border-radius: 7px; flex: none; background: linear-gradient(135deg, #2e63ff, #0a1fb8); color: #fff; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; } .ts .nav { display: flex; flex-direction: column; gap: 1px; } .ts .nav-sep { height: 1px; background: var(--border); margin: 8px; } .ts .nav-item { position: relative; display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: 7px; color: var(--text-2); white-space: nowrap; width: 100%; } .ts .nav-item svg { color: var(--muted); } .ts .nav-item:hover { background: var(--side-hover); color: var(--text); } .ts .nav-item .count { margin-left: auto; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; } .ts .nav-item[aria-current="page"] { background: var(--side-hover); color: var(--text); font-weight: 600; } .ts .nav-item[aria-current="page"] svg { color: var(--brand-strong); } .ts .nav-item[aria-current="page"]::before { content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); } .ts .nav-bottom { margin-top: auto; } .ts .dot-ok { position: absolute; left: 21px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px var(--side); } /* ---------- Main ---------- */ .ts .main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; } .ts .topbar { display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px; min-height: 54px; } .ts .topbar h1 { font-size: 17px; font-weight: 650; letter-spacing: -.015em; margin: 0 4px 0 0; white-space: nowrap; } .ts .search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--faint); } .ts .search.focus { border-color: var(--brand-line); box-shadow: 0 0 0 3px var(--brand-soft); } .ts .search .q { flex: 1; min-width: 0; color: var(--text); white-space: nowrap; overflow: hidden; } .ts .search .q.ph { color: var(--faint); } .ts .caret-blink { display: inline-block; width: 1px; height: 15px; background: var(--text); vertical-align: -3px; margin-left: 1px; animation: ts-blink 1s steps(1) infinite; } @keyframes ts-blink { 50% { opacity: 0; } } .ts .icon-btn { width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; color: var(--muted); flex: none; } .ts .icon-btn:hover { background: var(--surface-hover); color: var(--text); } .ts .icon-btn[aria-pressed="true"], .ts .icon-btn[aria-expanded="true"] { color: var(--text); background: var(--border); } .ts .toolbar { display: flex; align-items: center; gap: 6px; padding: 0 14px 10px; border-bottom: 1px solid var(--border); } .ts .chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px 0 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text-2); font-size: 12px; white-space: nowrap; flex: none; } .ts .chip:hover { border-color: var(--border-strong); background: var(--surface-hover); } .ts .chip svg { width: 13px; height: 13px; color: var(--muted); } .ts .tool-sep { width: 1px; height: 16px; background: var(--border); margin: 0 4px; flex: none; } .ts .stats { margin-left: auto; display: flex; gap: 12px; font-size: 12px; color: var(--muted); white-space: nowrap; } .ts .stats b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } .ts .stats span { border-bottom: 1px dashed var(--border-strong); } .ts .subtitle { margin: 0; padding: 0 14px 10px; color: var(--muted); font-size: 12.5px; border-bottom: 1px solid var(--border); } .ts .list { flex: 1; overflow: hidden; padding: 10px 12px 72px; display: flex; flex-direction: column; gap: 10px; } .ts .list.flush { padding: 0; } .ts .list > * { flex: none; } /* ---------- Cards & window cards ---------- */ .ts .card, .ts.card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); } .ts .win, .ts.win { --wc: #8b5cf6; position: relative; border: 1px solid; border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; flex: none; background: color-mix(in srgb, var(--wc) var(--w-wash), var(--surface)); border-color: color-mix(in srgb, var(--wc) var(--w-edge), var(--border)); } .ts .win::before, .ts.win::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w-stripe); background: var(--wc); transition: width .2s; } .ts .win.neutral, .ts.win.neutral { background: var(--surface); border-color: var(--border); } .ts .win.neutral::before, .ts.win.neutral::before { background: var(--border-strong); } .ts .win, .ts.win { transition: background-color .2s, border-color .2s; } .ts .win-head { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 10px; } .ts .caret { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 5px; color: var(--faint); flex: none; } .ts .caret:hover { background: var(--surface-hover); color: var(--text); } .ts .caret svg { width: 14px; height: 14px; transition: transform .15s; } .ts .win.closed .caret svg { transform: rotate(-90deg); } .ts .wdot { width: 8px; height: 8px; border-radius: 50%; background: var(--wc); flex: none; } .ts .win-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .ts .tag { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 19px; padding: 0 7px; border-radius: 5px; font-size: 11px; font-weight: 500; color: var(--muted); background: var(--app); border: 1px solid var(--border); white-space: nowrap; } .ts .tag svg { width: 11px; height: 11px; } .ts .tag.brand { color: var(--brand-strong); background: var(--brand-soft); border-color: transparent; } .ts .tag.anchor { color: #00796b; background: rgba(0, 150, 136, .1); border-color: transparent; } [data-theme="dark"] .ts .tag.anchor, .ts[data-theme="dark"] .tag.anchor { color: #4db6ac; background: rgba(0, 150, 136, .2); } .ts .win-meta { color: var(--faint); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; flex: none; } .ts .win-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; flex: none; } .ts .win-actions .icon-btn { width: 28px; height: 28px; } .ts .win.menu-open .win-head { background: color-mix(in srgb, var(--wc) 8%, var(--surface)); } .ts .tabs { border-top: 1px solid var(--border); padding: 4px 0; } .ts .win.closed .tabs { display: none; } /* ---------- Tab row ---------- */ .ts .tab { display: grid; grid-template-columns: 56px 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; height: var(--row-h); padding: 0 10px 0 12px; margin: 0 4px; border-radius: 6px; position: relative; transition: height .2s; } .ts .tab:hover, .ts .tab.ctx-open { background: var(--surface-hover); } .ts .tab.active { background: var(--brand-soft); } .ts .tab.active::before { content: ""; position: absolute; left: -4px; top: 7px; bottom: 7px; width: 2px; border-radius: 2px; background: var(--brand); } .ts .park { font: 11.5px var(--mono); color: var(--faint); display: flex; align-items: center; gap: 5px; white-space: nowrap; } .ts .park.soon { color: var(--warn); } .ts .park.locked { color: var(--muted); } .ts .park.locked svg { width: 13px; height: 13px; } .ts .fav { width: 16px; height: 16px; border-radius: 4px; display: grid; place-items: center; font-size: 9.5px; font-weight: 700; color: #fff; background: var(--c, #888); flex: none; overflow: hidden; letter-spacing: 0; line-height: 1; } .ts .t-main { display: flex; align-items: center; gap: 7px; min-width: 0; } .ts .t-title { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; } .ts mark, .ts .search-highlight { background: color-mix(in srgb, var(--brand) 18%, transparent); color: inherit; border-radius: 2px; } .ts .t-url { color: var(--faint); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 0; min-width: 40px; } .ts .t-flag { display: inline-flex; align-items: center; color: var(--muted); flex: none; } .ts .t-flag svg { width: 13px; height: 13px; } .ts .t-flag.audio { color: var(--brand-strong); } .ts .lbl, .ts .pri, .ts .later { display: inline-flex; align-items: center; gap: 4px; height: 17px; padding: 0 6px; border-radius: 4px; font-size: 10.5px; font-weight: 500; white-space: nowrap; flex: none; } .ts .lbl { color: color-mix(in srgb, var(--lc) 75%, var(--text)); background: color-mix(in srgb, var(--lc) 13%, transparent); } .ts .pri { color: var(--text-2); border: 1px solid var(--border); } .ts .pri::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pc); } .ts .later { color: var(--muted); border: 1px solid var(--border); } .ts .later svg { width: 10px; height: 10px; } .ts .t-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 76px; } .ts .wd { width: 6px; height: 6px; border-radius: 50%; background: var(--wc); flex: none; } .ts .t-when { color: var(--faint); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; } .ts .t-when.now { color: var(--brand-strong); font-weight: 500; } .ts .t-when.soon { color: var(--warn); } .ts .t-actions { display: none; } .ts .t-actions .icon-btn { width: 24px; height: 24px; } .ts .t-actions .icon-btn svg { width: 13px; height: 13px; } .ts .tab:hover .t-when, .ts .tab.ctx-open .t-when { display: none; } .ts .tab:hover .t-actions, .ts .tab.ctx-open .t-actions { display: flex; } /* A tab leaving the list (parking) */ .ts .tab.leaving { height: 0; opacity: 0; overflow: hidden; transition: height .35s ease .15s, opacity .2s; } .ts .tab.arriving { animation: ts-arrive .45s ease; } @keyframes ts-arrive { from { opacity: 0; transform: translateY(-4px); background: var(--surface-hover); } } /* simple row (saved / closed / parked) */ .ts .srow { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; height: 32px; padding: 0 10px 0 14px; margin: 0 4px; border-radius: 6px; } .ts .srow:hover { background: var(--surface-hover); } .ts .srow .r-actions { display: none; } .ts .srow:hover .r-actions { display: flex; } .ts .srow:hover .r-hide { display: none; } .ts .sub-meta { color: var(--faint); font-size: 12px; white-space: nowrap; } .ts .fav-strip { display: flex; gap: 3px; align-items: center; flex: none; } .ts .fav-strip .fav { width: 14px; height: 14px; font-size: 8px; border-radius: 3px; } .ts .fav-strip .more { font-size: 11px; color: var(--faint); margin-left: 2px; } /* buttons */ .ts .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 12.5px; font-weight: 500; white-space: nowrap; flex: none; } .ts .btn:hover { border-color: var(--border-strong); background: var(--surface-hover); } .ts .btn svg { width: 14px; height: 14px; color: var(--muted); } .ts .btn.sm { height: 24px; padding: 0 9px; font-size: 12px; } .ts .btn.primary { background: var(--brand); border-color: transparent; color: #fff; } .ts .btn.primary svg { color: #fff; } .ts .btn.primary:hover { background: #2f74e6; } .ts .btn.quiet { border-color: transparent; background: none; color: var(--muted); } .ts .btn.quiet:hover { background: var(--surface-hover); color: var(--text); } .ts .empty-state { text-align: center; padding: 28px 24px; color: var(--muted); } .ts .empty-state .ico { width: 42px; height: 42px; margin: 0 auto 12px; border-radius: 11px; background: var(--surface); border: 1px solid var(--border); display: grid; place-items: center; color: var(--muted); } .ts .empty-state h3 { margin: 0 0 4px; font-size: 14px; color: var(--text); font-weight: 600; } .ts .empty-state p { margin: 0 auto; max-width: 320px; font-size: 12.5px; } .ts .group-label { font-size: 11px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; margin: 6px 4px -2px; } /* ---------- Menus ---------- */ .ts .menu, .ts.menu { z-index: 20; min-width: 200px; max-width: 280px; padding: 4px; background: var(--menu-bg); border: 1px solid var(--menu-border); border-radius: 10px; box-shadow: var(--menu-shadow); } .ts .menu { position: absolute; } .ts .menu-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 30px; padding: 0 10px; border-radius: 6px; color: var(--text-2); white-space: nowrap; } .ts .menu-item > svg, .ts .menu-item .mi-pad { width: 14px; height: 14px; color: var(--muted); flex: none; } .ts .menu-item .mi-l { overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 8px; min-width: 0; } .ts .menu-item:hover, .ts .menu-item.hot { background: var(--surface-hover); color: var(--text); } .ts .menu-item .hint { margin-left: auto; padding-left: 12px; font-size: 11.5px; color: var(--faint); display: flex; align-items: center; } .ts .menu-item .hint svg { width: 12px; height: 12px; } .ts .menu-item .check { margin-left: auto; padding-left: 12px; color: var(--brand-strong); display: flex; } .ts .menu-item .check svg { width: 14px; height: 14px; } .ts .menu-item.on { color: var(--text); font-weight: 500; } .ts .menu-item.danger, .ts .menu-item.danger > svg { color: var(--danger); } .ts .menu-sep { height: 1px; background: var(--border); margin: 4px 6px; } .ts .dd-header { font-size: 10.5px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; padding: 7px 10px 3px; } .ts .mdot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; } /* ---------- AutoParked ---------- */ .ts .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex: none; } .ts .stat { padding: 12px 14px; } .ts .stat .k { font-size: 12px; color: var(--muted); } .ts .stat .v { font-size: 22px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 2px; } .ts .stat .d { font-size: 11.5px; color: var(--faint); } .ts .card-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 6px; } .ts .card-head h3 { margin: 0; font-size: 13px; font-weight: 600; } .ts .card-head .r { margin-left: auto; display: flex; align-items: center; gap: 6px; } .ts .card-body { padding: 4px 14px 12px; } .ts .bars { width: 100%; height: 96px; stroke: none; display: block; } .ts .bars rect { fill: var(--border-strong); } .ts .bars rect.hi { fill: var(--brand); } .ts .axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); margin-top: 6px; font-variant-numeric: tabular-nums; } .ts .card .rows { padding: 2px 0 6px; } /* ---------- Cloud / help rows ---------- */ .ts .status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); } .ts .status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); } .ts .link-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; text-align: left; border-top: 1px solid var(--border); } .ts .link-row:first-child { border-top: 0; } .ts .link-row:hover { background: var(--surface-hover); } .ts .link-row .ico { width: 30px; height: 30px; border-radius: 8px; background: var(--app); border: 1px solid var(--border); display: grid; place-items: center; color: var(--muted); flex: none; } .ts .link-row .ico svg { width: 15px; height: 15px; } .ts .link-row .txt { flex: 1; min-width: 0; } .ts .link-row .txt b { display: block; font-weight: 600; } .ts .link-row .txt span { color: var(--muted); font-size: 12px; } .ts .link-row > svg:last-child { color: var(--faint); width: 14px; height: 14px; } /* ---------- Settings ---------- */ .ts .set-layout { display: grid; grid-template-columns: 186px minmax(0, 1fr); height: 100%; } .ts .set-nav { border-right: 1px solid var(--border); padding: 10px 8px 12px; overflow: hidden; display: flex; flex-direction: column; gap: 1px; } .ts .set-nav button { display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 9px; border-radius: 6px; color: var(--text-2); white-space: nowrap; font-size: 12.5px; } .ts .set-nav button svg { width: 14px; height: 14px; color: var(--muted); } .ts .set-nav button:hover { background: var(--surface-hover); color: var(--text); } .ts .set-nav button[aria-current="true"] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow); } .ts .set-nav button[aria-current="true"] svg { color: var(--brand-strong); } .ts .set-body { overflow: hidden; padding: 14px 16px 40px; } .ts .set-body h2 { margin: 0 0 2px; font-size: 15px; font-weight: 650; } .ts .set-body > p { margin: 0 0 14px; color: var(--muted); font-size: 12.5px; } .ts .set-group { margin-bottom: 16px; } .ts .set-group h3 { font-size: 12px; font-weight: 600; color: var(--muted); margin: 0 2px 6px; } .ts .set-row { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-top: 1px solid var(--border); } .ts .set-row:first-child { border-top: 0; } .ts .set-text { flex: 1; min-width: 0; } .ts .set-label { font-weight: 500; } .ts .set-sub { color: var(--muted); font-size: 12px; margin-top: 1px; } .ts .set-ctl { flex: none; display: flex; align-items: center; gap: 6px; } .ts .set-row.dim { opacity: .5; } .ts .switch { width: 32px; height: 18px; border-radius: 999px; background: var(--border-strong); position: relative; transition: background .15s; flex: none; } .ts .switch i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; } .ts .switch[aria-checked="true"] { background: var(--brand); } .ts .switch[aria-checked="true"] i { transform: translateX(14px); } .ts .select { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-width: 132px; height: 30px; padding: 0 9px 0 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); font-size: 12.5px; white-space: nowrap; } .ts .select svg { width: 12px; height: 12px; color: var(--muted); } .ts .input { display: inline-flex; align-items: center; width: 76px; height: 30px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); font-size: 12.5px; font-variant-numeric: tabular-nums; } .ts .rule.sub { padding-left: 34px; } .ts .rule .icon-btn { width: 28px; height: 28px; } .ts .set-version { margin-top: auto; padding: 8px 9px 0; display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--faint); } .ts .seg { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 2px; flex: none; } .ts .seg button { padding: 3px 9px; border-radius: 6px; color: var(--muted); font-size: 12px; white-space: nowrap; } .ts .seg button[aria-pressed="true"] { background: var(--app); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); } .ts .rule { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--border); } .ts .rule:first-child { border-top: 0; } .ts .rule .txt { flex: 1; min-width: 0; } .ts .rule .txt b { font-weight: 600; } .ts .rule .txt div { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Option cards + mini popup previews (Settings -> Design) */ .ts .opt-grid, .ts.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 8px; } .ts .opt { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 6px 6px 8px; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); } .ts .opt:hover { border-color: var(--border-strong); } .ts .opt[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); } .ts .opt-l { display: flex; flex-direction: column; padding: 0 4px; min-width: 0; } .ts .opt-l b { font-weight: 600; font-size: 12.5px; } .ts .opt-l span { color: var(--muted); font-size: 11.5px; line-height: 1.3; } .ts .opt-check { position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); color: #fff; display: none; place-items: center; box-shadow: 0 0 0 2px var(--surface); } .ts .opt-check svg { width: 11px; height: 11px; stroke-width: 2.5; } .ts .opt[aria-pressed="true"] .opt-check { display: grid; } .ts .mini { --m-app: #f6f7f9; --m-surface: #fff; --m-side: #fbfbfc; --m-border: #e6e7eb; --m-line: #dcdee3; --m-strong: #b8bbc3; --m-active: #eceef2; display: flex; height: 76px; border-radius: 7px; overflow: hidden; border: 1px solid var(--m-border); background: var(--m-app); } .ts .mini[data-t="dark"] { --m-app: #111317; --m-surface: #17191e; --m-side: #0d0f12; --m-border: #2a2d34; --m-line: #2c3038; --m-strong: #4a4f59; --m-active: #1d2026; } .ts .mini i, .ts .mini span { display: block; } .ts .m-side { width: 26%; background: var(--m-side); border-right: 1px solid var(--m-border); padding: 6px 5px; display: flex; flex-direction: column; gap: 4px; } .ts .m-logo { width: 9px; height: 9px; border-radius: 3px; background: var(--brand); margin-bottom: 3px; } .ts .m-nav { height: 5px; border-radius: 3px; background: var(--m-line); width: 80%; } .ts .m-nav.on { background: var(--m-active); box-shadow: inset 2px 0 0 var(--brand); width: 100%; height: 8px; position: relative; } .ts .m-main { flex: 1; padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .ts .m-search { height: 7px; border-radius: 3px; background: var(--m-surface); border: 1px solid var(--m-border); flex: none; } .ts .m-win { position: relative; background: var(--m-surface); border: 1px solid var(--m-border); border-radius: 4px; padding: 3px 4px 3px 6px; display: flex; flex-direction: column; gap: 3px; overflow: hidden; flex: none; } .ts .m-win::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--wc); } .ts .mini[data-ws="tint"] .m-win { background: color-mix(in srgb, var(--wc) 10%, var(--m-surface)); border-color: color-mix(in srgb, var(--wc) 30%, var(--m-border)); } .ts .mini[data-ws="plain"] .m-win::before { display: none; } .ts .m-head { display: flex; align-items: center; gap: 3px; } .ts .m-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--wc); } .ts .m-title { height: 4px; width: 45%; border-radius: 2px; background: var(--m-strong); } .ts .m-row { height: 3px; border-radius: 2px; background: var(--m-line); width: 85%; } .ts .m-row:nth-child(odd) { width: 70%; } .ts .rows-mini { padding: 6px 6px 0; } .ts .rm-card { flex: 1; background: var(--m-surface); border: 1px solid var(--m-border); border-bottom: 0; border-radius: 5px 5px 0 0; overflow: hidden; } .ts .rm-row { display: flex; align-items: center; gap: 7px; height: 24px; padding: 0 8px; border-bottom: 1px solid var(--m-border); flex: none; } .ts .rows-mini[data-dn="compact"] .rm-row { height: 11px; gap: 5px; } .ts .rm-fav { width: 10px; height: 10px; border-radius: 3px; flex: none; } .ts .rows-mini[data-dn="compact"] .rm-fav { width: 7px; height: 7px; border-radius: 2px; } .ts .rm-title { height: 5px; border-radius: 3px; background: var(--m-strong); } .ts .rows-mini[data-dn="compact"] .rm-title { height: 4px; } /* ---------- Dialog, toast, fab ---------- */ .ts .scrim { position: absolute; inset: 0; z-index: 40; background: var(--scrim); display: grid; place-items: center; padding: 16px; } .ts .dialog, .ts.dialog { width: 380px; max-width: 100%; background: var(--menu-bg); border: 1px solid var(--menu-border); border-radius: 12px; box-shadow: var(--menu-shadow); padding: 16px; } .ts .dialog h2, .ts.dialog h2 { margin: 0 0 4px; font-size: 15px; font-weight: 650; } .ts .d-desc { margin: 0 0 12px; color: var(--muted); font-size: 12.5px; } .ts .d-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; } .ts .toast { position: absolute; left: 50%; bottom: 18px; z-index: 50; transform: translate(-50%, 8px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; background: var(--toast-bg); color: var(--toast-text); border-radius: 8px; padding: 8px 12px; font-size: 12.5px; box-shadow: var(--shadow-pop); white-space: nowrap; display: flex; align-items: center; gap: 12px; } .ts .toast.show { opacity: 1; transform: translate(-50%, 0); } .ts .toast b { font-weight: 600; color: inherit; opacity: .75; } .ts .fab { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px 0 11px; border-radius: 999px; background: var(--surface); color: var(--text); font-weight: 600; font-size: 12.5px; border: 1px solid var(--border); box-shadow: var(--shadow-pop); z-index: 5; } .ts .fab svg { color: var(--brand-strong); } /* Session restore banner (app/styles/tabs.css .recovery-banner) */ .ts .rb { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); } .ts .rb-ok { background: color-mix(in srgb, var(--ok) 7%, var(--surface)); border-color: var(--ok-line); box-shadow: none; } .ts .rb-missing { background: color-mix(in srgb, var(--warn) 7%, var(--surface)); border-color: var(--warn-line); } .ts .rb-head { display: flex; align-items: center; gap: 8px; } .ts .rb-icon { display: grid; color: var(--ok); } .ts .rb-missing .rb-icon { color: var(--warn); } .ts .rb-title-main { font-weight: 600; } .ts .rb-ok .rb-title-main { font-weight: 400; color: var(--text-2); font-size: 13px; } .ts .rb-dismiss { margin-left: auto; } .ts .rb-restored > summary { display: flex; align-items: center; gap: 6px; padding: 2px 0; color: var(--muted); font-size: 12px; cursor: default; list-style: none; } .ts .rb-restored > summary::-webkit-details-marker { display: none; } .ts .rb-restored > summary:hover { color: var(--text-2); } .ts .rb-chev svg { width: 12px; height: 12px; display: block; transition: transform .12s ease; } .ts .rb-restored[open] .rb-chev svg { transform: rotate(90deg); } .ts .rb-restored ul { margin: 4px 0 0; padding: 0 0 0 18px; list-style: none; display: flex; flex-direction: column; gap: 3px; } .ts .rb-restored li { display: flex; align-items: center; gap: 8px; min-width: 0; } .ts .rb-missing-head { display: flex; justify-content: flex-end; } .ts .rb-window { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); } .ts .rb-wtxt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ts .rb-wtxt b { font-weight: 500; } .ts .rb-wtxt span { color: var(--muted); font-size: 12px; } /* ---------- Homepage demos (mock.js) ---------- */ .ts .search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); font: inherit; padding: 0; } .ts .search input::placeholder { color: var(--faint); } .ts .search input::-webkit-search-cancel-button { display: none; } .ts.search-demo { display: flex; flex-direction: column; gap: 10px; } .ts.search-demo .search { flex: none; height: 36px; background: var(--surface); } .ts .sd-meta { font-size: 12px; color: var(--muted); padding: 0 2px; } .ts .sd-meta b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } .ts .sd-rows { border-top: 0; min-height: calc(var(--row-h) * 3 + 8px); } .ts .sd-empty { color: var(--muted); padding: 12px 16px; font-size: 12.5px; } .ts.ap-demo { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; align-items: start; padding-bottom: 56px; } .ts .ap-parked .card-head { padding-bottom: 8px; border-bottom: 1px solid var(--border); } .ts .ap-ico { color: var(--muted); display: grid; } .ts .ap-ico svg { width: 15px; height: 15px; } .ts.ap-demo .toast { bottom: 4px; } @media (max-width: 760px) { .ts.ap-demo { grid-template-columns: 1fr; } } .ts.ctx-demo { position: relative; padding-bottom: 330px; container-type: inline-size; } .ts.ctx-demo .ctx-main { left: 20%; top: 118px; } .ts.ctx-demo .ctx-sub { left: calc(20% + 206px); top: 238px; min-width: 180px; } @container (max-width: 470px) { .ts.ctx-demo .ctx-main { left: auto; right: 8px; } .ts.ctx-demo .ctx-sub { display: none; } } .ts.restored { overflow: hidden; } /* Narrow window cards (phones): drop the URL and chips, tighten the columns */ .ts .win, .ts.win { container-type: inline-size; } @container (max-width: 460px) { .ts .tab { grid-template-columns: 34px 16px minmax(0, 1fr) auto; gap: 8px; padding-left: 8px; } .ts .tab .t-url, .ts .tab .lbl, .ts .tab .pri, .ts .tab .later, .ts .win-head .tag:not(.brand):not(.anchor) { display: none; } .ts .t-right { min-width: 0; } } /* "Everything else" feature pictures (mock.js featureHTML) */ .ts.feature-mock { display: flex; flex-direction: column; gap: 10px; } .ts .f-cap { margin: 0 2px; color: var(--muted); font-size: 12.5px; } .ts .f-note { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--muted); font-size: 12.5px; } .ts .f-note b { color: var(--text); font-weight: 500; margin-right: 6px; } .ts .f-note svg { width: 14px; height: 14px; } .ts .f-fab { display: flex; align-items: center; gap: 12px; } .ts .kbd-list { display: flex; flex-direction: column; } .ts .kbd-list div { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); } .ts .kbd-list div:first-child { border-top: 0; } .ts .kbd-list kbd { font-size: 11.5px; color: var(--text-2); padding: 1px 6px; } .ts .feature-mock .set-group:last-child, .ts.feature-mock .set-group:last-child { margin-bottom: 0; } .ts .win.neutral .wdot { background: var(--border-strong); }