@cboxdk/cbox-ui 0.9.0 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +160 -78
- package/dist/index.d.ts +441 -539
- package/dist/index.js +3741 -3371
- package/dist/index.js.map +1 -1
- package/package.json +11 -3
- package/tokens/cbox.css +3 -35
- package/tokens/shell.css +347 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cboxdk/cbox-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.10.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Cbox shared UI — layout primitives, design tokens, and brand assets used across every Cbox-family app (id, cortex, atlas, track, …).",
|
|
6
6
|
"repository": {
|
|
@@ -41,14 +41,17 @@
|
|
|
41
41
|
},
|
|
42
42
|
"./tokens": "./tokens/cbox.css",
|
|
43
43
|
"./tailwind": "./tailwind.preset.js",
|
|
44
|
-
"./assets/*": "./assets/*"
|
|
44
|
+
"./assets/*": "./assets/*",
|
|
45
|
+
"./shell.css": "./tokens/shell.css"
|
|
45
46
|
},
|
|
46
47
|
"scripts": {
|
|
47
48
|
"build": "tsup",
|
|
48
49
|
"dev": "tsup --watch",
|
|
49
50
|
"test": "vitest run",
|
|
50
51
|
"test:watch": "vitest",
|
|
51
|
-
"typecheck": "tsc --noEmit"
|
|
52
|
+
"typecheck": "tsc --noEmit",
|
|
53
|
+
"test:visual": "scripts/visual.sh",
|
|
54
|
+
"test:visual:update": "scripts/visual.sh --update-snapshots"
|
|
52
55
|
},
|
|
53
56
|
"peerDependencies": {
|
|
54
57
|
"echarts": "^6.0.0",
|
|
@@ -70,6 +73,11 @@
|
|
|
70
73
|
"tailwind-merge": "^3.0.0"
|
|
71
74
|
},
|
|
72
75
|
"devDependencies": {
|
|
76
|
+
"@axe-core/playwright": "4.11.0",
|
|
77
|
+
"@playwright/test": "^1.65.0",
|
|
78
|
+
"@testing-library/dom": "^10.4.2",
|
|
79
|
+
"@testing-library/react": "^16.3.3",
|
|
80
|
+
"@testing-library/user-event": "^14.6.9",
|
|
73
81
|
"@types/node": "^22.0.0",
|
|
74
82
|
"@types/react": "^19.0.0",
|
|
75
83
|
"@types/react-dom": "^19.0.0",
|
package/tokens/cbox.css
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
/* The shell's own stylesheet (CboxShell). */
|
|
2
|
+
@import './shell.css';
|
|
3
|
+
|
|
1
4
|
/* Cbox colour tokens — cbox-ui structure, warmed toward cbox.dk's cream/ink palette
|
|
2
5
|
* so the products share temperature with the brand site (and aren't a Linear clone).
|
|
3
6
|
* Single deep-blue primary (matches the logo). Light default; dark under `.dark` or
|
|
@@ -242,41 +245,6 @@
|
|
|
242
245
|
}
|
|
243
246
|
}
|
|
244
247
|
|
|
245
|
-
/* Workspace shell: one geometry for every product, including floating hover expansion. */
|
|
246
|
-
.cbx-workspace{display:flex;height:100svh;overflow:hidden;font-family:var(--font-sans)}
|
|
247
|
-
.cbx-rail-slot{position:relative;flex:0 0 64px;width:64px;z-index:40}
|
|
248
|
-
.cbx-rail-slot[data-pinned=true]{flex-basis:222px;width:222px}
|
|
249
|
-
.cbx-rail{position:absolute;inset:6px auto 6px 6px;width:52px;border:1px solid var(--border);border-radius:12px;background:var(--sidebar);display:flex;flex-direction:column;padding:6px;transition:width 200ms cubic-bezier(.4,0,.2,1)}
|
|
250
|
-
.cbx-rail[data-open=true]{width:210px;box-shadow:0 1px 2px #0001,0 8px 24px #0001}
|
|
251
|
-
.cbx-rail-brand{display:flex;align-items:center;justify-content:space-between;height:44px;flex-shrink:0;gap:4px}
|
|
252
|
-
.cbx-rail-brand button,.cbx-subnav-header button,.cbx-mobile-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;border-radius:8px}
|
|
253
|
-
.cbx-rail nav{flex:1;overflow:auto;padding-top:12px}
|
|
254
|
-
.cbx-workspace-link{display:flex;align-items:center;gap:10px;min-height:34px;padding:0 10px;margin-bottom:3px;border-radius:8px;font-size:13px;white-space:nowrap;color:var(--sidebar-foreground);text-decoration:none}
|
|
255
|
-
.cbx-workspace-link span{overflow:hidden;text-overflow:ellipsis}
|
|
256
|
-
.cbx-workspace-link:hover{background:var(--secondary)}
|
|
257
|
-
.cbx-workspace-link.is-active{background:var(--accent-soft);font-weight:600}
|
|
258
|
-
.cbx-workspace-link.is-active svg{color:var(--primary)}
|
|
259
|
-
.cbx-rail-account{padding-top:8px;border-top:1px solid var(--border)}
|
|
260
|
-
.cbx-workspace-column{display:flex;flex:1;min-width:0;flex-direction:column}
|
|
261
|
-
.cbx-workspace-header{height:56px;flex-shrink:0;display:flex;align-items:center;gap:12px;padding:0 20px;background:var(--background);border-bottom:1px solid var(--border)}
|
|
262
|
-
.cbx-workspace-context{min-width:0;flex:1}
|
|
263
|
-
.cbx-workspace-tools{display:flex;align-items:center;gap:8px;flex-shrink:0}
|
|
264
|
-
.cbx-workspace-body{display:flex;flex:1;min-height:0}
|
|
265
|
-
.cbx-workspace-main{flex:1;min-width:0;overflow:auto}
|
|
266
|
-
.cbx-subnav{width:210px;flex-shrink:0;background:var(--background);border-right:1px solid var(--border);overflow:auto;padding:12px 8px}
|
|
267
|
-
.cbx-subnav[data-collapsed=true]{width:26px;padding:0}
|
|
268
|
-
.cbx-subnav-header{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:34px;margin-bottom:12px;padding:0 8px;font-size:13px}
|
|
269
|
-
.cbx-subnav-strip{display:flex;align-items:center;gap:16px;padding:14px 4px;height:100%;width:26px;flex-direction:column;font-size:12px}
|
|
270
|
-
.cbx-subnav-strip span{writing-mode:vertical-rl}
|
|
271
|
-
.cbx-mobile-trigger{display:none}
|
|
272
|
-
.cbx-workspace-mobile{margin:0;height:100svh;max-height:100svh;width:min(320px,90vw);padding:20px 12px;background:var(--background);color:var(--foreground);border-right:1px solid var(--border)}
|
|
273
|
-
.cbx-workspace-mobile::backdrop{background:#0006}
|
|
274
|
-
@media(max-width:1023px){.cbx-rail-slot,.cbx-subnav{display:none}.cbx-mobile-trigger{display:flex}.cbx-workspace-header{padding:0 12px;gap:8px}}
|
|
275
|
-
@media(prefers-reduced-motion:reduce){.cbx-rail{transition:none}}
|
|
276
|
-
|
|
277
|
-
.cbx-workspace-context [data-component=context-bar] button{max-width:100%}
|
|
278
|
-
@media(max-width:639px){.cbx-workspace-header{flex-wrap:wrap;height:auto;min-height:56px;padding-block:8px}.cbx-workspace-context{order:3;flex-basis:100%;width:100%}.cbx-workspace-tools{margin-left:auto}.cbx-workspace-context [data-component=context-bar]>div{flex:1}}
|
|
279
|
-
|
|
280
248
|
/* App icons come from Cbox ID's catalog: one light and one dark upload per app. The dark one
|
|
281
249
|
shows under the same switch as the dark tokens. */
|
|
282
250
|
.cbx-app-icon{display:block;object-fit:contain}
|
package/tokens/shell.css
ADDED
|
@@ -0,0 +1,347 @@
|
|
|
1
|
+
/* Cbox shell v1 (docs/specs/2026-11-10-shell-v1.md). Plain CSS on the shared tokens, so it needs
|
|
2
|
+
* no Tailwind scan of the package. Density follows §5.5: rows at least 40px, 12px row padding,
|
|
3
|
+
* 4px between rows, 8px around a list, 12px inside a pane, 12px above and 6px below a heading. */
|
|
4
|
+
|
|
5
|
+
.cbx-shell {
|
|
6
|
+
--cbx-ease: cubic-bezier(.4, 0, .2, 1);
|
|
7
|
+
--cbx-shadow: 0 1px 2px oklch(0.2 0.02 75 / 0.06), 0 8px 24px oklch(0.2 0.02 75 / 0.12);
|
|
8
|
+
--cbx-tile-l: 0.9;
|
|
9
|
+
--cbx-tile-c: 0.06;
|
|
10
|
+
--cbx-tile-fg-l: 0.36;
|
|
11
|
+
--cbx-tone-production: var(--success);
|
|
12
|
+
--cbx-tone-sandbox: var(--warning);
|
|
13
|
+
--cbx-tone-neutral: oklch(0.62 0.01 80);
|
|
14
|
+
--cbx-font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
15
|
+
--cbx-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
16
|
+
--cbx-font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
|
|
17
|
+
display: flex;
|
|
18
|
+
height: 100svh;
|
|
19
|
+
overflow: hidden;
|
|
20
|
+
font-family: var(--cbx-font-sans);
|
|
21
|
+
font-size: 14px;
|
|
22
|
+
line-height: 1.45;
|
|
23
|
+
color: var(--foreground);
|
|
24
|
+
background: var(--background);
|
|
25
|
+
}
|
|
26
|
+
:is(.dark, [data-theme='dark']) .cbx-shell,
|
|
27
|
+
.cbx-shell:is(.dark, [data-theme='dark']) {
|
|
28
|
+
--cbx-shadow: 0 1px 2px oklch(0 0 0 / 0.3), 0 12px 32px oklch(0 0 0 / 0.45);
|
|
29
|
+
--cbx-tile-l: 0.36;
|
|
30
|
+
--cbx-tile-c: 0.08;
|
|
31
|
+
--cbx-tile-fg-l: 0.93;
|
|
32
|
+
--cbx-tone-neutral: oklch(0.6 0.01 80);
|
|
33
|
+
}
|
|
34
|
+
/* Resets carry no specificity (:where), so every component rule below wins over them. */
|
|
35
|
+
:where(.cbx-shell, .cbx-overlay, .cbx-popover) *, :where(.cbx-shell, .cbx-overlay, .cbx-popover) *::before, :where(.cbx-shell, .cbx-overlay, .cbx-popover) *::after { box-sizing: border-box; }
|
|
36
|
+
:where(.cbx-shell, .cbx-overlay, .cbx-popover) :where(button, input, textarea) { font: inherit; color: inherit; }
|
|
37
|
+
:where(.cbx-shell, .cbx-overlay, .cbx-popover) :where(button) { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; }
|
|
38
|
+
:where(.cbx-shell, .cbx-overlay, .cbx-popover) :where(a) { color: inherit; text-decoration: none; }
|
|
39
|
+
:where(.cbx-shell, .cbx-overlay, .cbx-popover) :where(h1, h2, h3, p) { margin: 0; }
|
|
40
|
+
:is(.cbx-shell, .cbx-overlay, .cbx-popover) :is(a, button, input, textarea, [tabindex]):focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
|
|
41
|
+
:is(.cbx-shell, .cbx-overlay, .cbx-popover) :is(input, textarea):focus-visible { outline-offset: 0; }
|
|
42
|
+
.cbx-truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
43
|
+
.cbx-kbd { font-family: var(--cbx-font-mono); font-size: 11px; line-height: 16px; padding: 0 5px; border: 1px solid var(--border); border-radius: 5px; background: var(--secondary); color: var(--muted-foreground); white-space: nowrap; }
|
|
44
|
+
.cbx-link { color: var(--primary); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
|
|
45
|
+
.cbx-link:hover { text-decoration: underline; }
|
|
46
|
+
.cbx-icon-button { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 8px; color: var(--muted-foreground); transition: background 150ms var(--cbx-ease), color 150ms var(--cbx-ease); }
|
|
47
|
+
.cbx-icon-button:hover { background: var(--secondary); color: var(--foreground); }
|
|
48
|
+
|
|
49
|
+
/* ── Rail (tier 1) ───────────────────────────────────────────────────────────── */
|
|
50
|
+
.cbx-rail-slot { position: relative; flex: 0 0 64px; width: 64px; z-index: 40; transition: flex-basis 300ms var(--cbx-ease), width 300ms var(--cbx-ease); }
|
|
51
|
+
.cbx-rail-slot[data-pinned='true'] { flex-basis: 222px; width: 222px; }
|
|
52
|
+
.cbx-rail { position: absolute; inset: 6px auto 6px 6px; width: 52px; display: flex; flex-direction: column; padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--sidebar); color: var(--sidebar-foreground); overflow: hidden; transition: width 200ms var(--cbx-ease), box-shadow 200ms var(--cbx-ease); }
|
|
53
|
+
.cbx-rail[data-open='true'] { width: 210px; }
|
|
54
|
+
.cbx-rail-slot[data-pinned='false'] .cbx-rail[data-open='true'] { box-shadow: var(--cbx-shadow); }
|
|
55
|
+
.cbx-rail-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; height: 44px; flex: none; margin-bottom: 8px; }
|
|
56
|
+
.cbx-rail-home { display: flex; align-items: center; gap: 7px; min-width: 0; height: 40px; padding: 0 3px; border-radius: 8px; }
|
|
57
|
+
.cbx-app-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; border-radius: 9px; overflow: hidden; font-size: 12px; }
|
|
58
|
+
.cbx-app-mark img { width: 100%; height: 100%; object-fit: contain; }
|
|
59
|
+
.cbx-rail-brand { display: none; }
|
|
60
|
+
.cbx-rail[data-open='true'] .cbx-rail-home { flex: 1; }
|
|
61
|
+
.cbx-rail[data-open='true'] .cbx-rail-brand { display: contents; }
|
|
62
|
+
.cbx-rail[data-open='true'] .cbx-app-mark { order: 2; width: 22px; height: 22px; border-radius: 6px; font-size: 10px; }
|
|
63
|
+
.cbx-wordmark { order: 1; height: 19px; width: auto; display: block; }
|
|
64
|
+
.cbx-wordmark-dark { display: none; }
|
|
65
|
+
:is(.dark, [data-theme='dark']) .cbx-wordmark-light { display: none; }
|
|
66
|
+
:is(.dark, [data-theme='dark']) .cbx-wordmark-dark { display: block; }
|
|
67
|
+
.cbx-rail-app { order: 3; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
68
|
+
.cbx-rail-pin { display: none; width: 28px; height: 28px; }
|
|
69
|
+
.cbx-rail[data-open='true'] .cbx-rail-pin { display: inline-flex; }
|
|
70
|
+
.cbx-rail-slot[data-pinned='true'] .cbx-rail-pin { color: var(--primary); }
|
|
71
|
+
.cbx-rail-nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 4px; overscroll-behavior: contain; }
|
|
72
|
+
.cbx-rail-link { display: flex; align-items: center; gap: 12px; min-height: 36px; padding: 0 10px; border-radius: 8px; color: var(--sidebar-muted); white-space: nowrap; flex: none; transition: background 150ms var(--cbx-ease), color 150ms var(--cbx-ease); }
|
|
73
|
+
.cbx-rail-link svg { flex: none; }
|
|
74
|
+
.cbx-rail-link:hover { background: var(--sidebar-accent); color: var(--sidebar-foreground); }
|
|
75
|
+
.cbx-rail-link.is-active { background: var(--accent-soft); color: var(--primary); }
|
|
76
|
+
.cbx-rail-link.is-active .cbx-rail-label { color: var(--sidebar-foreground); font-weight: 600; }
|
|
77
|
+
.cbx-rail-label { opacity: 0; font-size: 13.5px; transition: opacity 150ms var(--cbx-ease); }
|
|
78
|
+
.cbx-rail[data-open='true'] .cbx-rail-label { opacity: 1; }
|
|
79
|
+
.cbx-rail-foot { flex: none; padding-top: 6px; border-top: 1px solid var(--border); }
|
|
80
|
+
.cbx-rail-account { display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; padding: 0 3px; border-radius: 10px; white-space: nowrap; }
|
|
81
|
+
.cbx-rail-account:hover, .cbx-rail-account.is-open { background: var(--sidebar-accent); }
|
|
82
|
+
.cbx-rail-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; opacity: 0; transition: opacity 150ms var(--cbx-ease); }
|
|
83
|
+
.cbx-rail[data-open='true'] .cbx-rail-who { opacity: 1; }
|
|
84
|
+
.cbx-rail-name { font-weight: 600; font-size: 13px; }
|
|
85
|
+
.cbx-rail-sub { font-size: 12px; color: var(--muted-foreground); }
|
|
86
|
+
.cbx-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 999px; overflow: hidden; background: var(--primary); color: var(--primary-foreground); font-weight: 700; font-size: 12px; }
|
|
87
|
+
.cbx-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
|
88
|
+
|
|
89
|
+
/* ── Column, header, banner ─────────────────────────────────────────────────── */
|
|
90
|
+
.cbx-shell-column { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; }
|
|
91
|
+
.cbx-header { position: relative; z-index: 30; display: flex; align-items: center; gap: 12px; height: 56px; flex: none; padding: 0 16px 0 12px; background: var(--background); border-bottom: 1px solid var(--border); }
|
|
92
|
+
.cbx-context { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 1 1 auto; }
|
|
93
|
+
.cbx-trigger { display: flex; align-items: center; gap: 8px; height: 32px; min-width: 0; max-width: 360px; padding: 0 6px 0 5px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--foreground); transition: background 150ms var(--cbx-ease); }
|
|
94
|
+
.cbx-trigger:hover, .cbx-trigger.is-open { background: var(--secondary); }
|
|
95
|
+
.cbx-trigger-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
96
|
+
.cbx-trigger-chevron { flex: none; color: var(--muted-foreground); }
|
|
97
|
+
.cbx-trigger-dot { color: var(--border-strong); flex: none; }
|
|
98
|
+
.cbx-trigger-env { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-weight: 500; }
|
|
99
|
+
.cbx-separator { flex: none; margin: 0 4px; color: var(--border-strong); font-size: 18px; font-weight: 300; }
|
|
100
|
+
.cbx-chip { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.01em; }
|
|
101
|
+
.cbx-chip-solid { background: var(--primary); color: var(--primary-foreground); }
|
|
102
|
+
.cbx-chip-soft { background: var(--accent-soft); color: var(--primary); box-shadow: inset 0 0 0 1px var(--accent-edge); }
|
|
103
|
+
/* In dark, --primary on its own soft tint is under 4.5:1; the chip's letters go lighter. */
|
|
104
|
+
:is(.dark, [data-theme='dark']) .cbx-chip-soft { color: oklch(0.85 0.09 258); }
|
|
105
|
+
.cbx-tone { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--cbx-tone-neutral); }
|
|
106
|
+
.cbx-tone-production { background: var(--cbx-tone-production); }
|
|
107
|
+
.cbx-tone-sandbox { background: var(--cbx-tone-sandbox); }
|
|
108
|
+
.cbx-tools { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
|
|
109
|
+
.cbx-search-button { display: flex; align-items: center; gap: 8px; width: 232px; height: 32px; padding: 0 6px 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--muted-foreground); font-size: 13px; transition: border-color 150ms var(--cbx-ease), color 150ms var(--cbx-ease); }
|
|
110
|
+
.cbx-search-button:hover { border-color: var(--border-strong); color: var(--foreground); }
|
|
111
|
+
.cbx-search-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
112
|
+
.cbx-tool { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); font-size: 13px; font-weight: 500; white-space: nowrap; transition: background 150ms var(--cbx-ease), border-color 150ms var(--cbx-ease); }
|
|
113
|
+
.cbx-tool:hover { background: var(--secondary); border-color: var(--border-strong); }
|
|
114
|
+
.cbx-tool.is-on { background: var(--accent-soft); border-color: var(--accent-edge); color: var(--primary); }
|
|
115
|
+
.cbx-tool-icon { width: 32px; padding: 0; justify-content: center; }
|
|
116
|
+
.cbx-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--primary); color: var(--primary-foreground); font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--background); }
|
|
117
|
+
.cbx-count.is-inline { position: static; margin-left: auto; box-shadow: none; }
|
|
118
|
+
.cbx-banner { display: flex; align-items: center; gap: 12px; flex: none; min-height: 36px; padding: 6px 20px; border-bottom: 1px solid var(--border); font-size: 13px; }
|
|
119
|
+
.cbx-banner-sandbox { background: var(--warning-soft); color: var(--foreground); }
|
|
120
|
+
.cbx-banner-sandbox::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--cbx-tone-sandbox); flex: none; }
|
|
121
|
+
.cbx-banner-impersonation { background: var(--destructive-soft); }
|
|
122
|
+
.cbx-banner-notice { background: var(--info-soft); }
|
|
123
|
+
.cbx-banner-text { min-width: 0; }
|
|
124
|
+
.cbx-banner-action { margin-left: auto; font-weight: 600; text-decoration: underline; white-space: nowrap; }
|
|
125
|
+
.cbx-shell-body { display: flex; flex: 1; min-height: 0; }
|
|
126
|
+
.cbx-shell-main { flex: 1; min-width: 0; overflow: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
|
|
127
|
+
|
|
128
|
+
/* ── Subnav (tier 2) ────────────────────────────────────────────────────────── */
|
|
129
|
+
.cbx-subnav { width: 210px; flex: none; overflow-y: auto; padding: 12px 8px; background: var(--background); border-right: 1px solid var(--border); overscroll-behavior: contain; }
|
|
130
|
+
.cbx-subnav[data-collapsed='true'] { width: 26px; padding: 0; }
|
|
131
|
+
.cbx-subnav-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 0 4px 0 12px; margin-bottom: 8px; font-size: 13px; }
|
|
132
|
+
.cbx-subnav-list { display: flex; flex-direction: column; gap: 4px; }
|
|
133
|
+
.cbx-subnav-link { display: flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 8px; font-size: 13.5px; color: var(--muted-foreground); }
|
|
134
|
+
.cbx-subnav-link:hover { background: var(--secondary); color: var(--foreground); }
|
|
135
|
+
.cbx-subnav-link.is-active { background: var(--accent-soft); color: var(--foreground); font-weight: 600; }
|
|
136
|
+
.cbx-subnav-strip { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 26px; height: 100%; padding: 14px 0; font-size: 12px; color: var(--muted-foreground); }
|
|
137
|
+
.cbx-subnav-strip:hover { background: var(--secondary); color: var(--foreground); }
|
|
138
|
+
.cbx-subnav-strip span { writing-mode: vertical-rl; }
|
|
139
|
+
|
|
140
|
+
/* ── Menus (§5.3–§5.5) ──────────────────────────────────────────────────────── */
|
|
141
|
+
.cbx-popover { z-index: 60; display: flex; flex-direction: column; overflow: hidden; background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--cbx-shadow); font-family: var(--cbx-font-sans); font-size: 14px; line-height: 1.45; animation: cbx-pop 200ms var(--cbx-ease); }
|
|
142
|
+
@keyframes cbx-pop { from { opacity: 0; transform: translateY(-4px); } }
|
|
143
|
+
.cbx-menu { display: flex; min-height: 0; max-height: inherit; }
|
|
144
|
+
.cbx-menu-org, .cbx-menu-single { width: 340px; }
|
|
145
|
+
.cbx-menu-cascade { width: 680px; }
|
|
146
|
+
.cbx-menu-account { width: 340px; flex-direction: column; overflow-y: auto; }
|
|
147
|
+
.cbx-menu-apps { width: 440px; flex-direction: column; overflow-y: auto; padding: 12px; }
|
|
148
|
+
.cbx-pane { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; min-height: 0; padding: 12px; }
|
|
149
|
+
.cbx-pane + .cbx-pane { border-left: 1px solid var(--border); }
|
|
150
|
+
.cbx-pane-search { display: flex; align-items: center; gap: 10px; height: 40px; flex: none; margin: 0 0 4px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--background); color: var(--muted-foreground); }
|
|
151
|
+
.cbx-pane-search:focus-within { border-color: var(--ring); box-shadow: 0 0 0 3px var(--accent-soft); }
|
|
152
|
+
.cbx-pane-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none !important; background: none; font-size: 14px; color: var(--foreground); }
|
|
153
|
+
.cbx-pane-search input::placeholder { color: var(--muted-foreground); }
|
|
154
|
+
.cbx-pane-search input::-webkit-search-cancel-button { display: none; }
|
|
155
|
+
.cbx-pane-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0 6px; padding: 0 12px; font-family: var(--cbx-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
|
|
156
|
+
.cbx-pane-all { flex: none; font-family: var(--cbx-font-sans); font-size: 12.5px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--primary); }
|
|
157
|
+
.cbx-pane-all:hover { text-decoration: underline; }
|
|
158
|
+
.cbx-list { display: flex; flex-direction: column; gap: 4px; min-height: 0; margin: 0 -8px; padding: 8px; list-style: none; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; outline: none; }
|
|
159
|
+
.cbx-pane .cbx-list { flex: 1 1 auto; max-height: 360px; min-height: 96px; }
|
|
160
|
+
.cbx-list-tall { max-height: 320px; }
|
|
161
|
+
.cbx-list > li { display: block; }
|
|
162
|
+
/* A pane's listbox sits inside its scroller, so the status notes can stay outside it. */
|
|
163
|
+
.cbx-listbox { display: flex; flex-direction: column; gap: 4px; outline: none; }
|
|
164
|
+
.cbx-listbox:empty { display: none; }
|
|
165
|
+
.cbx-list-note { margin: 0; padding: 10px 12px; color: var(--muted-foreground); font-size: 13px; }
|
|
166
|
+
.cbx-row { display: flex; align-items: center; gap: 4px; min-height: 40px; flex: none; border-radius: 8px; color: var(--foreground); transition: background 150ms var(--cbx-ease); }
|
|
167
|
+
.cbx-row:hover, .cbx-row.is-active { background: var(--secondary); }
|
|
168
|
+
.cbx-row-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; min-height: 40px; padding: 0 12px; border-radius: 8px; cursor: pointer; }
|
|
169
|
+
.cbx-row.is-current .cbx-row-name { font-weight: 600; }
|
|
170
|
+
.cbx-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
|
|
171
|
+
.cbx-row-label { flex: none; max-width: 40%; font-size: 12.5px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
172
|
+
.cbx-row-value { max-width: 45%; font-size: 13px; color: var(--muted-foreground); }
|
|
173
|
+
.cbx-row-check { flex: none; color: var(--primary); }
|
|
174
|
+
.cbx-row-chevron { flex: none; margin-right: 10px; color: var(--muted-foreground); }
|
|
175
|
+
.cbx-row-trail { flex: none; color: var(--muted-foreground); }
|
|
176
|
+
.cbx-row-icon { display: inline-flex; flex: none; width: 22px; justify-content: center; color: var(--muted-foreground); }
|
|
177
|
+
.cbx-row-icon-gap { width: 16px; flex: none; }
|
|
178
|
+
.cbx-row-gear { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; margin-right: 4px; border-radius: 6px; color: var(--muted-foreground); opacity: 0; transition: opacity 150ms var(--cbx-ease); }
|
|
179
|
+
.cbx-row:hover .cbx-row-gear, .cbx-row.is-active .cbx-row-gear, .cbx-row-gear:focus-visible { opacity: 1; }
|
|
180
|
+
.cbx-row-gear:hover, .cbx-row-gear.is-active { background: var(--popover); color: var(--foreground); }
|
|
181
|
+
.cbx-row-gear.is-active { opacity: 1; box-shadow: inset 0 0 0 2px var(--ring); }
|
|
182
|
+
.cbx-row-action { gap: 12px; width: 100%; padding: 0 12px; font-size: 14px; }
|
|
183
|
+
.cbx-row-more .cbx-row-name { color: var(--primary); }
|
|
184
|
+
.cbx-row-more { padding: 0 12px; cursor: pointer; }
|
|
185
|
+
.cbx-pane-foot { flex: none; margin: 8px -12px -12px; padding: 8px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
|
|
186
|
+
.cbx-menu-apps > .cbx-pane-foot { margin: 12px -12px -12px; }
|
|
187
|
+
.cbx-pane-foot > .cbx-row-action { color: var(--primary); font-weight: 500; }
|
|
188
|
+
.cbx-pane-foot > .cbx-row-action svg { color: var(--primary); }
|
|
189
|
+
.cbx-back { color: var(--muted-foreground); flex: none; width: auto; margin: 8px 8px 0; }
|
|
190
|
+
.cbx-create { display: flex; flex-direction: column; gap: 6px; padding: 4px 4px 2px; }
|
|
191
|
+
.cbx-create-label { padding: 0 2px; font-size: 12.5px; font-weight: 500; color: var(--muted-foreground); }
|
|
192
|
+
.cbx-create-row { display: flex; gap: 8px; }
|
|
193
|
+
.cbx-create-error { margin: 0; padding: 0 2px; font-size: 12.5px; color: var(--destructive); }
|
|
194
|
+
.cbx-input { flex: 1; min-width: 0; height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--input); color: var(--foreground); outline: none; }
|
|
195
|
+
.cbx-input:focus { border-color: var(--ring); box-shadow: 0 0 0 3px var(--accent-soft); }
|
|
196
|
+
textarea.cbx-input { height: auto; padding: 10px 12px; resize: vertical; min-height: 72px; line-height: 1.45; }
|
|
197
|
+
.cbx-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 8px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
|
|
198
|
+
.cbx-button-primary { background: var(--primary); color: var(--primary-foreground); }
|
|
199
|
+
.cbx-button-primary:hover { filter: brightness(1.08); }
|
|
200
|
+
.cbx-button:disabled { opacity: 0.55; cursor: default; filter: none; }
|
|
201
|
+
|
|
202
|
+
/* Account menu */
|
|
203
|
+
.cbx-account-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px 12px; border-bottom: 1px solid var(--border); }
|
|
204
|
+
.cbx-account-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
|
|
205
|
+
.cbx-account-name { font-weight: 600; }
|
|
206
|
+
.cbx-account-sub { font-size: 12.5px; color: var(--muted-foreground); }
|
|
207
|
+
.cbx-menu-account > .cbx-list { margin: 0; overflow: visible; }
|
|
208
|
+
.cbx-menu-account > .cbx-pane { padding-top: 8px; }
|
|
209
|
+
.cbx-list-foot { border-top: 1px solid var(--border); }
|
|
210
|
+
.cbx-theme { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px 6px 40px; }
|
|
211
|
+
.cbx-theme-label { font-size: 14px; }
|
|
212
|
+
.cbx-segmented { display: flex; gap: 2px; padding: 3px; border-radius: 8px; background: var(--secondary); }
|
|
213
|
+
.cbx-menu-account .cbx-row-name { flex: 1 0 auto; }
|
|
214
|
+
.cbx-menu-account .cbx-row-value { flex: 0 1 auto; margin-left: auto; text-align: right; }
|
|
215
|
+
.cbx-segmented button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex: 1; height: 30px; border-radius: 6px; font-size: 12.5px; color: var(--muted-foreground); text-align: center; }
|
|
216
|
+
.cbx-segmented button.is-on { background: var(--card); color: var(--foreground); box-shadow: 0 1px 2px oklch(0 0 0 / 0.14); font-weight: 500; }
|
|
217
|
+
.cbx-menu-account.is-inline { width: auto; border-top: 1px solid var(--border); margin-top: 8px; }
|
|
218
|
+
.cbx-menu-account.is-inline .cbx-account-head { padding: 16px 12px 12px; border-bottom: 0; }
|
|
219
|
+
.cbx-menu-account.is-inline > .cbx-list { margin: 0 -8px; }
|
|
220
|
+
|
|
221
|
+
/* App switcher (§9) */
|
|
222
|
+
.cbx-menu-apps .cbx-pane-heading { margin-top: 4px; }
|
|
223
|
+
.cbx-menu-apps section + section .cbx-pane-heading { margin-top: 16px; }
|
|
224
|
+
.cbx-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
|
|
225
|
+
.cbx-app { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 14px 8px 12px; border: 1px solid transparent; border-radius: 12px; text-align: center; transition: background 150ms var(--cbx-ease); }
|
|
226
|
+
.cbx-app:hover { background: var(--secondary); }
|
|
227
|
+
.cbx-app.is-current { background: var(--accent-soft); border-color: var(--accent-edge); }
|
|
228
|
+
.cbx-app-tile { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: none; border-radius: 13px; overflow: hidden; background: oklch(var(--cbx-tile-l) var(--cbx-tile-c) var(--cbx-hue, 258)); color: oklch(var(--cbx-tile-fg-l) 0.12 var(--cbx-hue, 258)); font-family: var(--cbx-font-display); font-weight: 700; font-size: 16px; }
|
|
229
|
+
.cbx-app-tile img { width: 70%; height: 70%; object-fit: contain; }
|
|
230
|
+
.cbx-app-mark.cbx-app-tile { width: 32px; height: 32px; border-radius: 9px; font-size: 12px; }
|
|
231
|
+
.cbx-app-icon-dark { display: none; }
|
|
232
|
+
:is(.dark, [data-theme='dark']) .cbx-app-icon-light { display: none; }
|
|
233
|
+
:is(.dark, [data-theme='dark']) .cbx-app-icon-dark { display: block; }
|
|
234
|
+
.cbx-app-name { max-width: 100%; font-size: 13px; font-weight: 600; line-height: 1.25; }
|
|
235
|
+
.cbx-app-purpose { max-width: 100%; font-size: 12px; line-height: 1.25; color: var(--muted-foreground); }
|
|
236
|
+
.cbx-app.is-elsewhere .cbx-app-tile { filter: saturate(0.3); }
|
|
237
|
+
.cbx-app.is-elsewhere .cbx-app-name { color: var(--muted-foreground); font-weight: 500; }
|
|
238
|
+
|
|
239
|
+
/* ── Palette (§6) ───────────────────────────────────────────────────────────── */
|
|
240
|
+
.cbx-overlay { position: fixed; inset: 0; z-index: 70; font-family: var(--cbx-font-sans); font-size: 14px; line-height: 1.45; color: var(--foreground); }
|
|
241
|
+
.cbx-palette-backdrop { display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; background: oklch(0.18 0.01 80 / 0.32); animation: cbx-fade 150ms var(--cbx-ease); }
|
|
242
|
+
@keyframes cbx-fade { from { opacity: 0; } }
|
|
243
|
+
.cbx-palette { display: flex; flex-direction: column; width: min(640px, 100%); max-height: min(560px, 76vh); overflow: hidden; background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--cbx-shadow); outline: none; animation: cbx-pop 200ms var(--cbx-ease); }
|
|
244
|
+
.cbx-palette-search { display: flex; align-items: center; gap: 12px; height: 56px; flex: none; padding: 0 16px; border-bottom: 1px solid var(--border); color: var(--muted-foreground); }
|
|
245
|
+
.cbx-palette-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none !important; background: none; font-size: 16px; color: var(--foreground); }
|
|
246
|
+
.cbx-palette-search input::-webkit-search-cancel-button { display: none; }
|
|
247
|
+
.cbx-palette-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px 8px; overscroll-behavior: contain; scroll-behavior: smooth; }
|
|
248
|
+
.cbx-palette-group { display: flex; flex-direction: column; gap: 4px; }
|
|
249
|
+
.cbx-palette-group .cbx-row { padding: 0 12px; gap: 12px; cursor: pointer; }
|
|
250
|
+
.cbx-palette-busy { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--primary); animation: cbx-spin 800ms linear infinite; }
|
|
251
|
+
@keyframes cbx-spin { to { transform: rotate(360deg); } }
|
|
252
|
+
.cbx-palette-foot { display: flex; gap: 16px; flex: none; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted-foreground); }
|
|
253
|
+
.cbx-palette-foot .cbx-kbd + .cbx-kbd { margin-left: 2px; }
|
|
254
|
+
|
|
255
|
+
/* ── Help column (§7) ───────────────────────────────────────────────────────── */
|
|
256
|
+
.cbx-help { display: flex; flex-direction: column; flex: 0 0 360px; width: 360px; min-height: 0; background: var(--background); border-left: 1px solid var(--border); outline: none; }
|
|
257
|
+
.cbx-help[hidden] { display: none; }
|
|
258
|
+
/* Help left open from an earlier visit only shows docked: below 1280px it waits for the person,
|
|
259
|
+
also on the server-rendered first paint, before the client knows the width. */
|
|
260
|
+
@media (max-width: 1279px) { .cbx-help[data-restored="true"] { display: none; } }
|
|
261
|
+
@media (min-width: 1440px) { .cbx-help { flex-basis: 400px; width: 400px; } }
|
|
262
|
+
@media (max-width: 1279px) {
|
|
263
|
+
.cbx-help { position: fixed; inset: 0; z-index: 65; width: auto; border-left: 0; animation: cbx-fade 150ms var(--cbx-ease); }
|
|
264
|
+
}
|
|
265
|
+
.cbx-help-head { display: flex; align-items: center; gap: 8px; height: 56px; flex: none; padding: 0 12px 0 16px; border-bottom: 1px solid var(--border); }
|
|
266
|
+
.cbx-help-mark { color: var(--primary); flex: none; }
|
|
267
|
+
.cbx-help-title { flex: 1; margin: 0; font-size: 15px; font-weight: 600; }
|
|
268
|
+
.cbx-help-page { display: flex; flex-direction: column; gap: 2px; flex: none; margin: 0; padding: 12px 20px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--muted-foreground); }
|
|
269
|
+
.cbx-help-page strong { color: var(--foreground); font-weight: 600; }
|
|
270
|
+
.cbx-help-page-label { font-family: var(--cbx-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
|
|
271
|
+
.cbx-help-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 20px 20px; overscroll-behavior: contain; scroll-behavior: smooth; }
|
|
272
|
+
.cbx-help-section { margin-top: 8px; }
|
|
273
|
+
.cbx-help-section .cbx-pane-heading { padding: 0; }
|
|
274
|
+
.cbx-help-section .cbx-list { margin: 0 -8px; padding: 0 0 4px; }
|
|
275
|
+
.cbx-help-notice { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--warning-soft); font-size: 13px; }
|
|
276
|
+
.cbx-help-notice svg { flex: none; margin-top: 2px; color: var(--warning-foreground); }
|
|
277
|
+
.cbx-help-search { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; margin-top: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--input); color: var(--muted-foreground); }
|
|
278
|
+
.cbx-help-search:focus-within { border-color: var(--ring); box-shadow: 0 0 0 3px var(--accent-soft); }
|
|
279
|
+
.cbx-help-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none !important; background: none; font-size: 14px; color: var(--foreground); }
|
|
280
|
+
.cbx-update { display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: 40px; padding: 10px 12px; border-radius: 8px; color: var(--foreground); }
|
|
281
|
+
.cbx-update:hover { background: var(--secondary); }
|
|
282
|
+
.cbx-update > svg { flex: none; margin-top: 2px; color: var(--muted-foreground); }
|
|
283
|
+
.cbx-update-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
|
|
284
|
+
.cbx-update-title { font-size: 14px; }
|
|
285
|
+
.cbx-update.is-unread .cbx-update-title { font-weight: 600; }
|
|
286
|
+
.cbx-update-excerpt { font-size: 12.5px; color: var(--muted-foreground); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
|
287
|
+
.cbx-update-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; font-size: 12px; color: var(--muted-foreground); }
|
|
288
|
+
.cbx-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
|
|
289
|
+
.cbx-ask { display: flex; flex-direction: column; gap: 8px; }
|
|
290
|
+
.cbx-ask .cbx-button { align-self: flex-end; }
|
|
291
|
+
.cbx-chat-host { position: relative; }
|
|
292
|
+
.cbx-chat-host cbox-support { position: fixed; bottom: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
|
|
293
|
+
.cbx-help-article h3 { margin: 16px 0 8px; font-family: var(--cbx-font-display); font-size: 18px; line-height: 1.3; }
|
|
294
|
+
.cbx-help-article p { margin: 0 0 12px; }
|
|
295
|
+
.cbx-help-foot { display: flex; flex-direction: column; gap: 4px; flex: none; padding: 8px; border-top: 1px solid var(--border); }
|
|
296
|
+
.cbx-help-foot .cbx-row-action:disabled { opacity: 0.55; cursor: default; }
|
|
297
|
+
|
|
298
|
+
/* ── Sheets (phone) ─────────────────────────────────────────────────────────── */
|
|
299
|
+
.cbx-sheet-backdrop { background: oklch(0.18 0.01 80 / 0.45); animation: cbx-fade 150ms var(--cbx-ease); }
|
|
300
|
+
.cbx-sheet { position: absolute; display: flex; flex-direction: column; background: var(--popover); color: var(--popover-foreground); outline: none; box-shadow: var(--cbx-shadow); }
|
|
301
|
+
.cbx-sheet-left { inset: 0 auto 0 0; width: min(340px, 88vw); border-right: 1px solid var(--border); animation: cbx-slide-left 200ms var(--cbx-ease); }
|
|
302
|
+
.cbx-sheet-bottom { left: 0; right: 0; bottom: 0; max-height: 88svh; border-top: 1px solid var(--border); border-radius: 16px 16px 0 0; animation: cbx-slide-up 200ms var(--cbx-ease); }
|
|
303
|
+
@keyframes cbx-slide-left { from { transform: translateX(-16px); opacity: 0; } }
|
|
304
|
+
@keyframes cbx-slide-up { from { transform: translateY(16px); opacity: 0; } }
|
|
305
|
+
.cbx-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 56px; flex: none; padding: 0 8px 0 20px; border-bottom: 1px solid var(--border); }
|
|
306
|
+
.cbx-sheet-head .cbx-back { margin: 0 0 0 -12px; }
|
|
307
|
+
.cbx-sheet-title { font-size: 15px; }
|
|
308
|
+
.cbx-sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 12px 24px; overscroll-behavior: contain; }
|
|
309
|
+
.cbx-sheet-body > .cbx-list { margin: 0; }
|
|
310
|
+
.cbx-sheet-body .cbx-menu-apps { width: auto; padding: 4px 0; }
|
|
311
|
+
.cbx-sheet-pages { display: flex; flex-direction: column; gap: 4px; padding-left: 28px; }
|
|
312
|
+
.cbx-sheet-area { display: flex; flex-direction: column; gap: 4px; }
|
|
313
|
+
.cbx-sheet-area .cbx-row-action.is-current { background: var(--accent-soft); font-weight: 600; }
|
|
314
|
+
.cbx-sheet-area .cbx-row-action.is-open { font-weight: 600; }
|
|
315
|
+
.cbx-sheet-area .cbx-row-action.is-open svg { color: var(--primary); }
|
|
316
|
+
.cbx-sheet-level .cbx-pane { padding: 4px 0 8px; }
|
|
317
|
+
.cbx-sheet-level .cbx-pane .cbx-list { max-height: 228px; min-height: 0; }
|
|
318
|
+
.cbx-sheet-level + .cbx-sheet-level { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 4px; }
|
|
319
|
+
.cbx-sheet-level .cbx-pane-foot { margin: 4px 0 0; padding: 0; border-top: 0; }
|
|
320
|
+
|
|
321
|
+
/* ── Breakpoints ────────────────────────────────────────────────────────────── */
|
|
322
|
+
.cbx-only-mobile { display: none !important; }
|
|
323
|
+
@media (max-width: 767px) {
|
|
324
|
+
.cbx-only-desktop { display: none !important; }
|
|
325
|
+
.cbx-only-mobile { display: inline-flex !important; }
|
|
326
|
+
.cbx-rail-slot, .cbx-subnav { display: none; }
|
|
327
|
+
.cbx-header { gap: 6px; padding: 0 8px; }
|
|
328
|
+
.cbx-context-mobile { flex: 1 1 auto; max-width: none; }
|
|
329
|
+
.cbx-search-button { width: 40px; height: 40px; justify-content: center; padding: 0; border-color: transparent; background: none; }
|
|
330
|
+
.cbx-search-button .cbx-search-label, .cbx-search-button .cbx-kbd { display: none; }
|
|
331
|
+
.cbx-tool { width: 40px; height: 40px; padding: 0; justify-content: center; border-color: transparent; background: none; }
|
|
332
|
+
.cbx-tool-label { display: none; }
|
|
333
|
+
.cbx-icon-button { width: 40px; height: 40px; }
|
|
334
|
+
.cbx-banner { padding: 6px 12px; }
|
|
335
|
+
}
|
|
336
|
+
/* Touch targets: 44px on a coarse pointer (§12.2). */
|
|
337
|
+
@media (pointer: coarse) {
|
|
338
|
+
.cbx-row, .cbx-row-main, .cbx-rail-link, .cbx-subnav-link { min-height: 44px; }
|
|
339
|
+
.cbx-icon-button, .cbx-row-gear, .cbx-tool, .cbx-search-button { min-width: 44px; min-height: 44px; }
|
|
340
|
+
.cbx-row-gear { opacity: 1; }
|
|
341
|
+
.cbx-pane-search, .cbx-help-search { height: 44px; }
|
|
342
|
+
.cbx-segmented button { height: 38px; }
|
|
343
|
+
.cbx-palette-foot { display: none; }
|
|
344
|
+
}
|
|
345
|
+
@media (prefers-reduced-motion: reduce) {
|
|
346
|
+
.cbx-shell *, .cbx-overlay *, .cbx-popover, .cbx-rail, .cbx-rail-slot { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
|
|
347
|
+
}
|