viberoom 0.7.0 → 0.9.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/NOTICE +5 -3
- package/README.md +90 -19
- package/assets/vendors/grok.svg +3 -0
- package/assets/vendors/hermes.svg +1 -0
- package/dist/agent-health.js +1 -1
- package/dist/hub.js +98 -49
- package/dist/jsonrpc.js +3 -1
- package/dist/look-lint.js +180 -0
- package/dist/looks.js +151 -0
- package/dist/main.js +4 -1
- package/dist/mcp-skills-server.js +87 -0
- package/dist/persona.js +10 -3
- package/dist/recipes.js +110 -8
- package/dist/room-design.js +9 -6
- package/dist/room.js +190 -26
- package/dist/server.js +73 -1
- package/dist/skills.js +23 -2
- package/package.json +1 -1
- package/ui/app.css +23 -16
- package/ui/app.js +198 -66
- package/ui/components.css +96 -115
- package/ui/components.js +8 -3
- package/ui/index.html +3 -2
- package/ui/looks.css +462 -77
- package/ui/theme.css +94 -13
- package/ui/tokens.js +526 -57
package/ui/components.css
CHANGED
|
@@ -1,99 +1,106 @@
|
|
|
1
1
|
/* viberoom - Copyright (c) 2026 Todor Rusev - AGPL-3.0-or-later; see LICENSE */
|
|
2
|
-
[data-ui="row-button"] { display: inline-grid; place-items: center; width: var(--row-button-size); height: var(--row-button-size); padding: 0; border: 0; border-radius: var(--row-button-radius); background: var(--row-button-bg); color: var(--row-button-ink); cursor: pointer; transition: background var(--t-fast), color var(--t-fast), opacity var(--t-fast); }
|
|
2
|
+
[data-ui="row-button"] { display: inline-grid; place-items: center; width: var(--row-button-size); height: var(--row-button-size); padding: 0; border: 0; border-radius: var(--row-button-radius); background-color: var(--row-button-bg); background-image: var(--bevel); box-shadow: var(--row-button-shadow); color: var(--row-button-ink); cursor: pointer; transition: background var(--t-fast), color var(--t-fast), opacity var(--t-fast); }
|
|
3
3
|
[data-ui="row-button"] .i { width: var(--row-button-icon); height: var(--row-button-icon); }
|
|
4
|
-
[data-ui="row-button"]:is(:hover, [data-state="hover"]):not(:disabled) { background: var(--row-button-hover-bg); color: var(--row-button-hover-ink); }
|
|
5
|
-
[data-ui="row-button"]:is(:active, [data-state="active"]):not(:disabled) { transform: translateY(1px); }
|
|
4
|
+
[data-ui="row-button"]:is(:hover, [data-state="hover"]):not(:disabled) { background-color: var(--row-button-hover-bg); color: var(--row-button-hover-ink); }
|
|
5
|
+
[data-ui="row-button"]:is(:active, [data-state="active"]):not(:disabled) { transform: translateY(1px); box-shadow: var(--row-button-active-shadow); background-image: var(--bevel-pressed); }
|
|
6
6
|
[data-ui="row-button"]:is(:disabled, [data-state="disabled"]) { opacity: var(--row-button-disabled-opacity); cursor: default; }
|
|
7
7
|
[data-ui="hub-row"] { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; max-width: 80%; padding: 2px 10px; border: 0; background: none; color: var(--hub-row-ink); font: inherit; font-size: var(--fs-xs); font-weight: 700; text-align: left; }
|
|
8
8
|
[data-ui="hub-row"] .hush-face { font-size: var(--hub-row-face-size); line-height: 1; }
|
|
9
9
|
[data-ui="hub-row"][data-tone="attention"], [data-ui="hub-row"][data-tone="hush"] { color: var(--hub-row-attention-ink); font-weight: 800; }
|
|
10
10
|
[data-ui="hub-row"][data-tone="error"] { color: var(--hub-row-error-ink); font-weight: 800; }
|
|
11
|
-
[data-ui="hub-row"][data-ref] { padding: 6px 14px 6px 8px; border-radius: var(--r-pill); background: var(--hub-row-action-bg); color: var(--hub-row-action-ink); font-size: var(--fs-sm); font-weight: 800; cursor: pointer; box-shadow: var(--
|
|
12
|
-
[data-ui="hub-row"][data-ref]:is(:hover, [data-state="hover"]) { background: var(--hub-row-action-hover-bg); }
|
|
13
|
-
[data-ui="
|
|
11
|
+
[data-ui="hub-row"][data-ref] { padding: 6px 14px 6px 8px; border-radius: var(--r-pill); background-color: var(--hub-row-action-bg); background-image: var(--bevel); color: var(--hub-row-action-ink); font-size: var(--fs-sm); font-weight: 800; cursor: pointer; box-shadow: var(--hub-row-action-shadow); transition: background var(--t-fast); }
|
|
12
|
+
[data-ui="hub-row"][data-ref]:is(:hover, [data-state="hover"]) { background-color: var(--hub-row-action-hover-bg); }
|
|
13
|
+
[data-ui="hub-row"]::before { content: var(--hub-row-prefix); margin-right: var(--hub-row-prefix-gap); opacity: 0.6; }
|
|
14
|
+
[data-ui="button"] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: var(--btn-border); background-color: var(--btn-bg); background-image: var(--bevel); box-shadow: var(--btn-shadow); color: var(--btn-ink); border-radius: max(var(--r-sm), var(--r-ctl-min)); height: var(--btn-h); padding: 0 16px; font-weight: 800; font-size: var(--btn-fs); line-height: 1; text-transform: var(--btn-case); letter-spacing: var(--btn-tracking); white-space: nowrap; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast); }
|
|
14
15
|
[data-ui="button"] .i { width: 16px; height: 16px; }
|
|
15
|
-
[data-ui="button"]:is(:hover, [data-state="hover"]):not(:disabled) { background: var(--btn-hover-bg); color: var(--btn-hover-ink); }
|
|
16
|
-
[data-ui="button"]:is(:active, [data-state="active"]):not(:disabled) { transform: translateY(1px); }
|
|
16
|
+
[data-ui="button"]:is(:hover, [data-state="hover"]):not(:disabled) { background-color: var(--btn-hover-bg); color: var(--btn-hover-ink); box-shadow: var(--btn-hover-shadow); transform: translateY(var(--btn-hover-lift)); }
|
|
17
|
+
[data-ui="button"]:is(:active, [data-state="active"]):not(:disabled) { transform: translateY(1px); box-shadow: var(--btn-active-shadow); background-image: var(--bevel-pressed); }
|
|
17
18
|
[data-ui="button"]:is(:disabled, [data-state="disabled"]) { opacity: var(--btn-disabled-opacity); cursor: default; }
|
|
18
|
-
[data-ui="button"][data-kind="primary"] { background: var(--grad-primary); color: var(--btn-on-primary); box-shadow: var(--shadow-primary); }
|
|
19
|
-
[data-ui="button"][data-kind="primary"]:is(:hover, [data-state="hover"]):not(:disabled) { background: var(--grad-primary); color: var(--btn-on-primary); filter:
|
|
20
|
-
[data-ui="button"][data-kind="primary"]:is(:active, [data-state="active"]):not(:disabled) { transform: translateY(1px); }
|
|
21
|
-
[data-ui="button"][data-kind="secondary"] { background: var(--btn-secondary-bg); color: var(--btn-ink); box-shadow: var(--shadow-tile); }
|
|
22
|
-
[data-ui="button"][data-kind="secondary"]:is(:hover, [data-state="hover"]):not(:disabled) { background: var(--btn-secondary-bg); color: var(--btn-hover-ink); }
|
|
23
|
-
[data-ui="button"][data-kind="
|
|
24
|
-
[data-ui="button"][data-kind="soft"]
|
|
25
|
-
[data-ui="button"][data-kind="
|
|
26
|
-
[data-ui="button"][data-kind="ghost"]
|
|
27
|
-
[data-ui="button"][data-kind="
|
|
28
|
-
[data-ui="button"][data-kind="danger"]
|
|
29
|
-
[data-ui="button"][data-kind="danger-
|
|
30
|
-
[data-ui="button"][data-kind="danger-solid"]
|
|
31
|
-
[data-ui="button"][data-kind="
|
|
32
|
-
[data-ui="button"][data-kind="
|
|
33
|
-
[data-ui="button"][data-kind="
|
|
34
|
-
[data-ui="button"][data-kind="
|
|
35
|
-
[data-ui="button"][data-kind="
|
|
36
|
-
[data-ui="button"][data-kind="
|
|
37
|
-
[data-ui="button"][data-kind="
|
|
38
|
-
[data-ui="button"][data-kind="
|
|
39
|
-
[data-ui="button"][data-kind="
|
|
40
|
-
[data-ui="button"][data-kind="
|
|
41
|
-
[data-ui="button"][data-kind="
|
|
42
|
-
[data-ui="button"][data-kind="
|
|
43
|
-
[data-ui="button"][data-
|
|
19
|
+
[data-ui="button"][data-kind="primary"] { background-color: transparent; background-image: var(--bevel), var(--grad-primary); color: var(--btn-on-primary); box-shadow: var(--shadow-primary); }
|
|
20
|
+
[data-ui="button"][data-kind="primary"]:is(:hover, [data-state="hover"]):not(:disabled) { background-color: transparent; background-image: var(--bevel), var(--grad-primary); color: var(--btn-on-primary); box-shadow: var(--shadow-primary); filter: var(--btn-primary-hover-filter); transform: translateY(-1px); }
|
|
21
|
+
[data-ui="button"][data-kind="primary"]:is(:active, [data-state="active"]):not(:disabled) { transform: translateY(1px); box-shadow: var(--btn-primary-active-shadow); background-color: transparent; background-image: var(--bevel-pressed), var(--grad-primary); }
|
|
22
|
+
[data-ui="button"][data-kind="secondary"] { background-color: var(--btn-secondary-bg); color: var(--btn-ink); box-shadow: var(--shadow-tile); }
|
|
23
|
+
[data-ui="button"][data-kind="secondary"]:is(:hover, [data-state="hover"]):not(:disabled) { background-color: var(--btn-secondary-hover-bg); color: var(--btn-hover-ink); box-shadow: var(--btn-secondary-hover-shadow); }
|
|
24
|
+
[data-ui="button"][data-kind="secondary"]:is(:active, [data-state="active"]):not(:disabled) { box-shadow: var(--btn-secondary-active-shadow); }
|
|
25
|
+
[data-ui="button"][data-kind="soft"] { background-color: var(--btn-soft-bg); color: var(--btn-hover-ink); }
|
|
26
|
+
[data-ui="button"][data-kind="soft"]:is(:hover, [data-state="hover"]):not(:disabled) { background-color: var(--btn-soft-hover-bg); }
|
|
27
|
+
[data-ui="button"][data-kind="ghost"] { background-color: var(--btn-ghost-bg); color: var(--btn-ghost-ink); font-weight: 700; }
|
|
28
|
+
[data-ui="button"][data-kind="ghost"]:is(:hover, [data-state="hover"]):not(:disabled) { background-color: var(--btn-ghost-hover-bg); color: var(--btn-hover-ink); }
|
|
29
|
+
[data-ui="button"][data-kind="danger"] { background-color: var(--btn-danger-bg); color: var(--btn-danger-ink); }
|
|
30
|
+
[data-ui="button"][data-kind="danger"]:is(:hover, [data-state="hover"]):not(:disabled) { background-color: var(--btn-danger-hover-bg); color: var(--btn-danger-ink); }
|
|
31
|
+
[data-ui="button"][data-kind="danger-solid"] { background-color: var(--btn-danger-ink); color: var(--btn-danger-solid-ink); box-shadow: var(--btn-danger-solid-shadow); }
|
|
32
|
+
[data-ui="button"][data-kind="danger-solid"]:is(:hover, [data-state="hover"]):not(:disabled) { background-color: var(--btn-danger-solid-hover-bg); color: var(--btn-danger-solid-ink); box-shadow: var(--btn-danger-solid-hover-shadow); }
|
|
33
|
+
[data-ui="button"][data-kind="danger-solid"]:is(:active, [data-state="active"]):not(:disabled) { box-shadow: var(--btn-danger-solid-active-shadow); }
|
|
34
|
+
[data-ui="button"][data-kind="dark"] { background-color: var(--btn-dark-bg); color: var(--btn-dark-ink); border-radius: max(calc(7px * var(--r-scale)), var(--r-ctl-min)); }
|
|
35
|
+
[data-ui="button"][data-kind="dark"]:is(:hover, [data-state="hover"]):not(:disabled) { background-color: var(--btn-dark-hover-bg); color: var(--btn-dark-ink); }
|
|
36
|
+
[data-ui="button"][data-kind="warn"] { background-color: transparent; color: var(--btn-warn-ink); letter-spacing: max(0.02em, var(--btn-tracking)); border-radius: var(--r-pill); box-shadow: var(--btn-warn-shadow); }
|
|
37
|
+
[data-ui="button"][data-kind="warn"]:is(:hover, [data-state="hover"]):not(:disabled) { background-color: var(--btn-warn-hover-bg); color: var(--btn-warn-ink); }
|
|
38
|
+
[data-ui="button"][data-kind="inverse"] { background-color: var(--btn-inverse-bg); color: var(--btn-inverse-ink); border-radius: max(calc(10px * var(--r-scale)), var(--r-ctl-min)); }
|
|
39
|
+
[data-ui="button"][data-kind="inverse"]:is(:hover, [data-state="hover"]):not(:disabled) { background-color: var(--btn-inverse-hover-bg); color: var(--btn-inverse-ink); }
|
|
40
|
+
[data-ui="button"][data-kind="link"] { background-color: transparent; background-image: none; box-shadow: none; border: 0; text-transform: none; letter-spacing: 0; text-decoration: var(--btn-link-underline); color: var(--btn-link-ink); height: auto; padding: 2px 0; border-radius: 0; }
|
|
41
|
+
[data-ui="button"][data-kind="link"]:is(:hover, [data-state="hover"]):not(:disabled) { background-color: transparent; background-image: none; box-shadow: none; color: var(--btn-link-ink); text-decoration: underline; transform: none; }
|
|
42
|
+
[data-ui="button"][data-kind="ok"] { background-color: var(--btn-ok-bg); color: var(--btn-ok-ink); border-radius: max(calc(10px * var(--r-scale)), var(--r-ctl-min)); box-shadow: var(--btn-ok-shadow); }
|
|
43
|
+
[data-ui="button"][data-kind="ok"]:is(:hover, [data-state="hover"]):not(:disabled) { background-color: var(--btn-ok-hover-bg); color: var(--btn-ok-ink); transform: translateY(-1px); }
|
|
44
|
+
[data-ui="button"][data-kind="paper"] { background-color: var(--btn-paper-bg); color: var(--btn-paper-ink); border-radius: max(calc(10px * var(--r-scale)), var(--r-ctl-min)); }
|
|
45
|
+
[data-ui="button"][data-kind="paper"]:is(:hover, [data-state="hover"]):not(:disabled) { background-color: var(--btn-paper-hover-bg); color: var(--btn-paper-ink); transform: translateY(-1px); }
|
|
46
|
+
[data-ui="button"][data-size="sm"] { height: var(--btn-h-sm); padding: 0 12px; font-size: var(--btn-fs-sm); border-radius: max(calc(10px * var(--r-scale)), var(--r-ctl-min)); }
|
|
44
47
|
[data-ui="button"][data-size="sm"] .i { width: 15px; height: 15px; }
|
|
45
|
-
[data-ui="button"][data-size="xs"] { height: var(--btn-h-xs); padding: 0 9px; font-size: var(--fs-xs); border-radius: calc(7px * var(--r-scale)); }
|
|
48
|
+
[data-ui="button"][data-size="xs"] { height: var(--btn-h-xs); padding: 0 9px; font-size: var(--fs-xs); border-radius: max(calc(7px * var(--r-scale)), var(--r-ctl-min)); }
|
|
46
49
|
[data-ui="button"][data-size="xs"] .i { width: 13px; height: 13px; }
|
|
47
|
-
[data-ui="button"][data-size="lg"] { height: var(--btn-h-lg); padding: 0 22px; font-size: var(--btn-fs-lg); border-radius: calc(14px * var(--r-scale)); }
|
|
48
|
-
[data-ui="button"][data-size="cta"] { height: var(--btn-h-cta); border-radius: var(--r-md); font-size: var(--btn-fs-cta); padding: 0 18px; }
|
|
50
|
+
[data-ui="button"][data-size="lg"] { height: var(--btn-h-lg); padding: 0 22px; font-size: var(--btn-fs-lg); border-radius: max(calc(14px * var(--r-scale)), var(--r-ctl-min)); }
|
|
51
|
+
[data-ui="button"][data-size="cta"] { height: var(--btn-h-cta); border-radius: max(var(--r-md), var(--r-ctl-min)); font-size: var(--btn-fs-cta); padding: 0 18px; }
|
|
49
52
|
[data-ui="button"][data-full] { width: 100%; }
|
|
50
53
|
[data-ui="button"][data-pill] { border-radius: var(--r-pill); }
|
|
51
54
|
[data-ui="button"][data-state="loading"] { position: relative; color: transparent !important; pointer-events: none; }
|
|
52
55
|
[data-ui="button"][data-state="loading"]::after { content: ""; position: absolute; width: 15px; height: 15px; border-radius: calc(50% * var(--r-scale)); border: 2px solid var(--btn-spinner-track); border-top-color: var(--btn-spinner-head); animation: spin 0.8s linear infinite; }
|
|
53
56
|
[data-ui="button"][data-state="loading"]:not([data-kind="primary"]):not([data-kind="danger-solid"])::after { border-color: var(--btn-spinner-track-quiet); border-top-color: var(--btn-spinner-head-quiet); }
|
|
54
|
-
[data-ui="icon-button"] { width: var(--icon-button-size); height: var(--icon-button-size); border-radius: calc(12px * var(--r-scale)); border: 0; background: transparent; color: var(--icon-button-ink); display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: none; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease-out); }
|
|
57
|
+
[data-ui="icon-button"] { width: var(--icon-button-size); height: var(--icon-button-size); border-radius: max(calc(12px * var(--r-scale)), var(--r-ctl-min)); border: 0; background-color: transparent; background-image: var(--bevel); box-shadow: var(--icon-button-shadow); color: var(--icon-button-ink); display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: none; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease-out); }
|
|
55
58
|
[data-ui="icon-button"] .i { width: var(--icon-button-icon); height: var(--icon-button-icon); }
|
|
56
|
-
[data-ui="icon-button"]:is(:hover, [data-state="hover"]):not(:disabled) { background: var(--icon-button-hover-bg); color: var(--icon-button-hover-ink); }
|
|
57
|
-
[data-ui="icon-button"]:is(:active, [data-state="active"]):not(:disabled) { transform: translateY(1px); }
|
|
59
|
+
[data-ui="icon-button"]:is(:hover, [data-state="hover"]):not(:disabled) { background-color: var(--icon-button-hover-bg); color: var(--icon-button-hover-ink); box-shadow: var(--icon-button-hover-shadow); transform: translateY(var(--icon-button-hover-lift)); }
|
|
60
|
+
[data-ui="icon-button"]:is(:active, [data-state="active"]):not(:disabled) { transform: translateY(1px); box-shadow: var(--icon-button-active-shadow); background-image: var(--bevel-pressed); }
|
|
58
61
|
[data-ui="icon-button"]:is(:disabled, [data-state="disabled"]) { opacity: var(--icon-button-disabled-opacity); cursor: default; }
|
|
59
|
-
[data-ui="icon-button"][data-size="sm"] { width: var(--icon-button-size-sm); height: var(--icon-button-size-sm); border-radius: calc(10px * var(--r-scale)); }
|
|
62
|
+
[data-ui="icon-button"][data-size="sm"] { width: var(--icon-button-size-sm); height: var(--icon-button-size-sm); border-radius: max(calc(10px * var(--r-scale)), var(--r-ctl-min)); }
|
|
60
63
|
[data-ui="icon-button"][data-size="sm"] .i { width: var(--icon-button-icon-sm); height: var(--icon-button-icon-sm); }
|
|
61
|
-
[data-ui="icon-button"][data-kind="primary"] { width: var(--icon-button-size-primary); height: var(--icon-button-size-primary); border-radius: calc(14px * var(--r-scale)); background: var(--grad-primary); color: var(--btn-on-primary); box-shadow: var(--
|
|
62
|
-
[data-ui="icon-button"][data-kind="primary"]:is(:hover, [data-state="hover"]):not(:disabled) { color: var(--btn-on-primary); background: var(--grad-primary); filter: brightness(1.05); }
|
|
64
|
+
[data-ui="icon-button"][data-kind="primary"] { width: var(--icon-button-size-primary); height: var(--icon-button-size-primary); border-radius: max(calc(14px * var(--r-scale)), var(--r-ctl-min)); background-color: transparent; background-image: var(--bevel), var(--grad-primary); color: var(--btn-on-primary); box-shadow: var(--icon-button-primary-shadow); }
|
|
65
|
+
[data-ui="icon-button"][data-kind="primary"]:is(:hover, [data-state="hover"]):not(:disabled) { color: var(--btn-on-primary); background-color: transparent; background-image: var(--bevel), var(--grad-primary); box-shadow: var(--icon-button-primary-hover-shadow); filter: brightness(1.05); }
|
|
66
|
+
[data-ui="icon-button"][data-kind="primary"]:is(:active, [data-state="active"]):not(:disabled) { box-shadow: var(--icon-button-primary-active-shadow); background-color: transparent; background-image: var(--bevel-pressed), var(--grad-primary); }
|
|
63
67
|
[data-ui="icon-button"][data-kind="danger"] { color: var(--btn-danger-ink); }
|
|
64
|
-
[data-ui="icon-button"][data-kind="danger"]:is(:hover, [data-state="hover"]):not(:disabled) { background: var(--btn-danger-bg); color: var(--btn-danger-ink); }
|
|
65
|
-
[data-ui="icon-button"][data-size="xs"] { width: var(--icon-button-size-xs); height: var(--icon-button-size-xs); border-radius: calc(6px * var(--r-scale)); }
|
|
68
|
+
[data-ui="icon-button"][data-kind="danger"]:is(:hover, [data-state="hover"]):not(:disabled) { background-color: var(--btn-danger-bg); color: var(--btn-danger-ink); }
|
|
69
|
+
[data-ui="icon-button"][data-size="xs"] { width: var(--icon-button-size-xs); height: var(--icon-button-size-xs); border-radius: max(calc(6px * var(--r-scale)), var(--r-ctl-min)); }
|
|
66
70
|
[data-ui="icon-button"][data-size="xs"] .i { width: var(--icon-button-icon-xs); height: var(--icon-button-icon-xs); }
|
|
67
|
-
[data-ui="icon-button"][data-kind="ghost"] { background:
|
|
68
|
-
[data-ui="icon-button"][data-kind="inline"] { background: var(--icon-button-inline-bg); color: var(--icon-button-inline-ink); vertical-align: middle; position: relative; top: -1px; margin-left: 5px; }
|
|
69
|
-
[data-ui="icon-button"][data-kind="inline"]:is(:hover, [data-state="hover"]):not(:disabled) { background: var(--icon-button-hover-bg-strong); color: var(--btn-on-primary); }
|
|
70
|
-
[data-ui="icon-button"][data-kind="inline"][data-state="on"] { background: var(--icon-button-inline-on-bg); color: var(--icon-button-inline-on-ink); }
|
|
71
|
-
[data-ui="choice"] { display: inline-flex; align-items: center; gap: 6px; border: 2px solid
|
|
72
|
-
[data-ui="choice"]
|
|
73
|
-
[data-ui="choice"][data-state="
|
|
71
|
+
[data-ui="icon-button"][data-kind="ghost"] { background-color: var(--icon-button-ghost-bg); color: var(--icon-button-ghost-ink); }
|
|
72
|
+
[data-ui="icon-button"][data-kind="inline"] { background-color: var(--icon-button-inline-bg); color: var(--icon-button-inline-ink); vertical-align: middle; position: relative; top: -1px; margin-left: 5px; }
|
|
73
|
+
[data-ui="icon-button"][data-kind="inline"]:is(:hover, [data-state="hover"]):not(:disabled) { background-color: var(--icon-button-hover-bg-strong); color: var(--btn-on-primary); }
|
|
74
|
+
[data-ui="icon-button"][data-kind="inline"][data-state="on"] { background-color: var(--icon-button-inline-on-bg); color: var(--icon-button-inline-on-ink); }
|
|
75
|
+
[data-ui="choice"] { display: inline-flex; align-items: center; gap: 6px; border: 2px solid var(--choice-border); background-color: var(--choice-bg); background-image: var(--bevel); box-shadow: var(--choice-shadow); color: var(--choice-ink); border-radius: var(--r-pill); padding: 0 12px; height: var(--choice-h); font: inherit; font-size: var(--fs-sm); font-weight: 800; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
|
|
76
|
+
[data-ui="choice"][data-state="on"] { background-color: var(--choice-hover-bg); color: var(--choice-on-ink); border-color: var(--choice-on-border); box-shadow: var(--choice-on-shadow); background-image: var(--bevel-pressed); }
|
|
77
|
+
[data-ui="choice"]:is(:hover, [data-state="hover"]) { background-color: var(--choice-hover-bg); color: var(--choice-on-ink); box-shadow: var(--choice-hover-shadow); background-image: var(--bevel); transform: translateY(var(--choice-hover-lift)); }
|
|
78
|
+
[data-ui="choice"]:is(:active, [data-state="active"]) { box-shadow: var(--choice-active-shadow); background-image: var(--bevel-pressed); transform: translateY(var(--choice-active-drop)); }
|
|
74
79
|
[data-ui="choice"][data-quiet] { color: var(--choice-quiet-ink); font-weight: 700; }
|
|
75
|
-
[data-ui="badge"] { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); padding: 3px 10px; border-radius: var(--r-pill); background: var(--badge-bg); color: var(--badge-ink); font-weight: 800; white-space: nowrap; vertical-align: middle; }
|
|
80
|
+
[data-ui="badge"] { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); padding: 3px 10px; border-radius: var(--r-pill); border: var(--badge-border); background-color: color-mix(in srgb, var(--badge-bg) var(--badge-fill), transparent); background-image: var(--bevel); box-shadow: var(--badge-shadow); color: var(--badge-ink); font-weight: 800; text-transform: var(--badge-case); letter-spacing: var(--badge-tracking); white-space: nowrap; vertical-align: middle; }
|
|
76
81
|
[data-ui="badge"] .dot { width: 6px; height: 6px; border-radius: calc(50% * var(--r-scale)); background: currentColor; }
|
|
77
|
-
[data-ui="badge"][data-tone="ready"] { background: var(--st-ready); color: var(--st-ready-ink); }
|
|
78
|
-
[data-ui="badge"][data-tone="waiting"] { background: var(--st-waiting); color: var(--st-waiting-ink); }
|
|
79
|
-
[data-ui="badge"][data-tone="thinking"] { background: var(--st-thinking); color: var(--st-thinking-ink); }
|
|
80
|
-
[data-ui="badge"][data-tone="writing"] { background: var(--st-writing); color: var(--st-writing-ink); }
|
|
81
|
-
[data-ui="badge"][data-tone="error"] { background: var(--st-error); color: var(--st-error-ink); }
|
|
82
|
-
[data-ui="badge"][data-tone="asleep"] { background: var(--st-asleep); color: var(--st-asleep-ink); }
|
|
83
|
-
[data-ui="badge"][data-tone="attention"] { background: var(--badge-attention-bg); color: var(--badge-attention-ink); }
|
|
84
|
-
[data-ui="badge"][data-tone="muted"] { background: var(--badge-muted-bg); color: var(--badge-muted-ink); }
|
|
85
|
-
[data-ui="badge"][data-tone="outline"] { background: transparent; border:
|
|
82
|
+
[data-ui="badge"][data-tone="ready"] { background-color: color-mix(in srgb, var(--st-ready) var(--badge-fill), transparent); color: var(--st-ready-ink); }
|
|
83
|
+
[data-ui="badge"][data-tone="waiting"] { background-color: color-mix(in srgb, var(--st-waiting) var(--badge-fill), transparent); color: var(--st-waiting-ink); }
|
|
84
|
+
[data-ui="badge"][data-tone="thinking"] { background-color: color-mix(in srgb, var(--st-thinking) var(--badge-fill), transparent); color: var(--st-thinking-ink); }
|
|
85
|
+
[data-ui="badge"][data-tone="writing"] { background-color: color-mix(in srgb, var(--st-writing) var(--badge-fill), transparent); color: var(--st-writing-ink); }
|
|
86
|
+
[data-ui="badge"][data-tone="error"] { background-color: color-mix(in srgb, var(--st-error) var(--badge-fill), transparent); color: var(--st-error-ink); }
|
|
87
|
+
[data-ui="badge"][data-tone="asleep"] { background-color: color-mix(in srgb, var(--st-asleep) var(--badge-fill), transparent); color: var(--st-asleep-ink); }
|
|
88
|
+
[data-ui="badge"][data-tone="attention"] { background-color: color-mix(in srgb, var(--badge-attention-bg) var(--badge-fill), transparent); color: var(--badge-attention-ink); }
|
|
89
|
+
[data-ui="badge"][data-tone="muted"] { background-color: color-mix(in srgb, var(--badge-muted-bg) var(--badge-fill), transparent); color: var(--badge-muted-ink); }
|
|
90
|
+
[data-ui="badge"][data-tone="outline"] { background-color: transparent; border: var(--badge-outline-w) solid var(--badge-outline-border); color: var(--badge-outline-ink); }
|
|
86
91
|
[data-ui="badge"]:is([data-tone="thinking"], [data-tone="writing"]) .dot { animation: pulse 1.2s ease-in-out infinite; }
|
|
87
92
|
[data-ui="badge"][data-size="xs"] { font-size: var(--badge-fs-xs); padding: 1px 7px; }
|
|
88
|
-
[data-ui="chip"] { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: var(--fs-xs); font-weight: 800; background: var(--chip-bg); color: var(--chip-ink); border:
|
|
93
|
+
[data-ui="chip"] { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: var(--fs-xs); font-weight: 800; background-color: color-mix(in srgb, var(--chip-bg) var(--chip-fill), transparent); background-image: var(--bevel); box-shadow: var(--chip-shadow); color: var(--chip-ink); border: var(--chip-border); border-radius: var(--r-pill); padding: 4px 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; text-align: left; }
|
|
89
94
|
[data-ui="chip"] .i { width: 13px; height: 13px; flex: none; }
|
|
90
|
-
[data-ui="chip"][data-tone="ready"] { background: var(--st-ready); color: var(--st-ready-ink); }
|
|
91
|
-
[data-ui="chip"][data-tone="error"] { background: var(--st-error); color: var(--st-error-ink); }
|
|
92
|
-
[data-ui="chip"][data-tone="thinking"] { background: var(--st-thinking); color: var(--st-thinking-ink); }
|
|
93
|
-
[data-ui="chip"][data-tone="waiting"] { background: var(--st-waiting); color: var(--st-waiting-ink); }
|
|
95
|
+
[data-ui="chip"][data-tone="ready"] { background-color: color-mix(in srgb, var(--st-ready) var(--chip-fill), transparent); color: var(--st-ready-ink); }
|
|
96
|
+
[data-ui="chip"][data-tone="error"] { background-color: color-mix(in srgb, var(--st-error) var(--chip-fill), transparent); color: var(--st-error-ink); }
|
|
97
|
+
[data-ui="chip"][data-tone="thinking"] { background-color: color-mix(in srgb, var(--st-thinking) var(--chip-fill), transparent); color: var(--st-thinking-ink); }
|
|
98
|
+
[data-ui="chip"][data-tone="waiting"] { background-color: color-mix(in srgb, var(--st-waiting) var(--chip-fill), transparent); color: var(--st-waiting-ink); }
|
|
94
99
|
[data-ui="chip"][data-button] { cursor: pointer; transition: background var(--t-fast); }
|
|
95
|
-
[data-ui="chip"][data-button]:not([data-tone]):is(:hover, [data-state="hover"]) { background: var(--chip-hover-bg); }
|
|
96
|
-
[data-ui="
|
|
100
|
+
[data-ui="chip"][data-button]:not([data-tone]):is(:hover, [data-state="hover"]) { background-color: var(--chip-hover-bg); }
|
|
101
|
+
[data-ui="chip"]:is(:hover, [data-state="hover"]) { box-shadow: var(--chip-hover-shadow); transform: translateY(var(--chip-hover-lift)); }
|
|
102
|
+
[data-ui="chip"]:is(:active, [data-state="active"]) { box-shadow: var(--chip-active-shadow); background-image: var(--bevel-pressed); transform: translateY(var(--chip-active-drop)); }
|
|
103
|
+
[data-ui="file-card"] { border-radius: calc(12px * var(--r-scale)); overflow: hidden; background-color: var(--file-card-bg); background-image: var(--bevel); box-shadow: var(--file-card-shadow); }
|
|
97
104
|
[data-ui="file-card"] > .head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--file-card-head-bg); color: var(--file-card-head-ink); font-size: var(--fs-xs); font-weight: 800; }
|
|
98
105
|
[data-ui="file-card"] > .head .name { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
99
106
|
[data-ui="file-card"] > .head .name .i { width: 13px; height: 13px; flex: none; }
|
|
@@ -121,31 +128,31 @@
|
|
|
121
128
|
[data-ui="tool-call"] .sec.quiet { color: var(--tool-call-quiet-ink); font-style: italic; }
|
|
122
129
|
[data-ui="tool-call"] .sec pre { margin: 3px 0 0; padding: 6px 8px; border-radius: calc(8px * var(--r-scale)); background: var(--tool-call-pre-bg); color: var(--tool-call-pre-ink); white-space: pre-wrap; word-break: break-word; font-size: var(--tool-call-pre-fs); line-height: 1.45; }
|
|
123
130
|
[data-ui="tool-fold"] { flex-basis: 100%; min-width: 0; }
|
|
124
|
-
[data-ui="tool-fold"] > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: var(--tool-fold-fs); font-weight: 800; color: var(--tool-fold-ink); background: var(--tool-fold-bg); border-radius: var(--r-pill); padding: 4px 12px; transition: background var(--t-fast), color var(--t-fast); }
|
|
131
|
+
[data-ui="tool-fold"] > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: var(--tool-fold-fs); font-weight: 800; color: var(--tool-fold-ink); background-color: var(--tool-fold-bg); background-image: var(--bevel); box-shadow: var(--tool-fold-shadow); border-radius: var(--r-pill); padding: 4px 12px; transition: background var(--t-fast), color var(--t-fast); }
|
|
125
132
|
[data-ui="tool-fold"] > summary::-webkit-details-marker { display: none; }
|
|
126
|
-
[data-ui="tool-fold"] > summary:hover, [data-ui="tool-fold"][data-state="hover"] > summary { background: var(--tool-fold-hover-bg); color: var(--tool-fold-hover-ink); }
|
|
133
|
+
[data-ui="tool-fold"] > summary:hover, [data-ui="tool-fold"][data-state="hover"] > summary { background-color: var(--tool-fold-hover-bg); color: var(--tool-fold-hover-ink); }
|
|
127
134
|
[data-ui="tool-fold"] > summary .i { width: 13px; height: 13px; }
|
|
128
135
|
[data-ui="tool-fold"] > summary::after { content: "▾"; opacity: 0.55; transition: transform var(--t-fast); }
|
|
129
136
|
[data-ui="tool-fold"][open] > summary::after { transform: rotate(180deg); }
|
|
130
137
|
[data-ui="tool-fold"] > summary .failed { color: var(--tool-fold-failed-ink); }
|
|
131
138
|
[data-ui="tool-fold"] > .list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
|
|
132
|
-
[data-ui="ask-card"] { background: var(--ask-card-bg); color: var(--ask-card-ink); border-radius: calc(12px * var(--r-scale)); padding: 10px 12px; font-size: var(--ask-card-fs); font-weight: 600; }
|
|
139
|
+
[data-ui="ask-card"] { background-color: var(--ask-card-bg); background-image: var(--bevel); box-shadow: var(--ask-card-shadow); color: var(--ask-card-ink); border-radius: calc(12px * var(--r-scale)); padding: 10px 12px; font-size: var(--ask-card-fs); font-weight: 600; }
|
|
133
140
|
[data-ui="ask-card"][data-state="resolved"] { opacity: var(--ask-card-resolved-opacity); }
|
|
134
141
|
[data-ui="ask-card"] > .title .kind { font-size: var(--ask-card-kind-fs); color: var(--ask-card-quiet-ink); }
|
|
135
142
|
[data-ui="ask-card"] > .input { margin: 6px 0; max-height: 160px; overflow: auto; font-size: var(--ask-card-input-fs); }
|
|
136
143
|
[data-ui="ask-card"] > .choices { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
|
|
137
144
|
[data-ui="ask-card"] > .choices .outcome { color: var(--ask-card-quiet-ink); font-size: var(--ask-card-outcome-fs); }
|
|
138
|
-
[data-ui="logo-tile"] { position: relative; display: inline-grid; place-items: center; width: var(--logo-tile-md); height: var(--logo-tile-md); flex: none; border-radius:
|
|
145
|
+
[data-ui="logo-tile"] { position: relative; display: inline-grid; place-items: center; width: var(--logo-tile-md); height: var(--logo-tile-md); flex: none; border-radius: var(--logo-tile-radius); background-color: var(--logo-tile-bg); background-image: var(--bevel); color: var(--logo-tile-ink); box-shadow: var(--logo-tile-shadow); font-weight: 800; font-size: 14px; overflow: hidden; user-select: none; }
|
|
139
146
|
[data-ui="logo-tile"] .mark { width: 60%; height: 60%; background: currentColor; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
|
|
140
147
|
[data-ui="logo-tile"] .i { width: 66%; height: 66%; }
|
|
141
|
-
[data-ui="logo-tile"][data-size="sm"] { width: var(--logo-tile-sm); height: var(--logo-tile-sm); border-radius:
|
|
142
|
-
[data-ui="logo-tile"][data-size="lg"] { width: var(--logo-tile-lg); height: var(--logo-tile-lg); border-radius:
|
|
143
|
-
[data-ui="logo-tile"][data-size="badge"] { width: 18px; height: 18px; min-width: 15px; min-height: 15px; box-sizing: border-box; border-radius:
|
|
148
|
+
[data-ui="logo-tile"][data-size="sm"] { width: var(--logo-tile-sm); height: var(--logo-tile-sm); border-radius: var(--logo-tile-radius-sm); font-size: 12px; }
|
|
149
|
+
[data-ui="logo-tile"][data-size="lg"] { width: var(--logo-tile-lg); height: var(--logo-tile-lg); border-radius: var(--logo-tile-radius-lg); font-size: 16px; }
|
|
150
|
+
[data-ui="logo-tile"][data-size="badge"] { width: 18px; height: 18px; min-width: 15px; min-height: 15px; box-sizing: border-box; border-radius: var(--logo-tile-radius-badge); background-color: var(--logo-tile-badge-bg); border: 2px solid var(--logo-tile-badge-border); color: var(--logo-tile-badge-ink); font-size: 9px; }
|
|
144
151
|
[data-ui="logo-tile"][data-size="badge"] .mark { width: 72%; height: 72%; }
|
|
145
152
|
[data-ui="logo-tile"][data-size="badge"] .i { width: 78%; height: 78%; }
|
|
146
|
-
[data-ui="logo-tile"][data-tone="muted"] { background: var(--logo-tile-muted-bg); color: var(--logo-tile-muted-ink); border-color: var(--logo-tile-badge-border); }
|
|
153
|
+
[data-ui="logo-tile"][data-tone="muted"] { background-color: var(--logo-tile-muted-bg); color: var(--logo-tile-muted-ink); border-color: var(--logo-tile-badge-border); }
|
|
147
154
|
[data-ui="face"] { position: relative; display: inline-block; flex: none; }
|
|
148
|
-
[data-ui="face"] .tile { display: grid; place-items: center; width: 100%; height: 100%; font-weight: 800; line-height: 1; font-family: var(--font); user-select: none; color: var(--face-color); background: color-mix(in srgb, var(--face-color) var(--face-tint), var(--face-paper)); border-radius: calc(var(--face-size) * var(--face-corner) * var(--r-scale)); }
|
|
155
|
+
[data-ui="face"] .tile { display: grid; place-items: center; width: 100%; height: 100%; font-weight: 800; line-height: 1; font-family: var(--font); user-select: none; color: var(--face-color); background-color: color-mix(in srgb, var(--face-color) var(--face-tint), var(--face-paper)); background-image: var(--bevel); box-shadow: var(--face-shadow); border-radius: calc(var(--face-size) * var(--face-corner) * var(--r-scale)); }
|
|
149
156
|
[data-ui="face"] > [data-ui="logo-tile"] { position: absolute; right: -4px; bottom: -4px; width: 44%; height: 44%; z-index: 2; }
|
|
150
157
|
[data-ui="face"] .status { position: absolute; left: -3px; bottom: -3px; width: 12px; height: 12px; z-index: 2; border-radius: calc(50% * var(--r-scale)); border: 2px solid var(--face-ring); background: var(--face-dot-bg); }
|
|
151
158
|
[data-ui="face"] .status[data-status="idle"] { background: var(--st-ready-dot); }
|
|
@@ -155,23 +162,23 @@
|
|
|
155
162
|
[data-ui="face"] .status[data-status="error"] { background: var(--st-error-dot); }
|
|
156
163
|
[data-ui="face"] .status:is([data-status="starting"], [data-status="queued"]) { background: var(--st-waiting-dot); }
|
|
157
164
|
[data-ui="face"] .status[data-status="unstaffed"] { background: var(--attention); }
|
|
158
|
-
[data-ui="face"][data-me] .tile { box-shadow: 0 0 0 2px var(--face-ring), 0 0 0 4px var(--face-me-ring); }
|
|
159
|
-
[data-ui="face"][data-ring] .tile { box-shadow: 0 0 0 2px var(--face-ring); }
|
|
165
|
+
[data-ui="face"][data-me] .tile { box-shadow: 0 0 0 2px var(--face-ring), 0 0 0 4px var(--face-me-ring), var(--face-shadow); }
|
|
166
|
+
[data-ui="face"][data-ring] .tile { box-shadow: 0 0 0 2px var(--face-ring), var(--face-shadow); }
|
|
160
167
|
[data-ui="face"][data-dim="asleep"] .tile { filter: grayscale(0.6); opacity: 0.8; }
|
|
161
168
|
[data-ui="face"][data-dim="unstaffed"] .tile { filter: grayscale(0.8); opacity: 0.55; }
|
|
162
|
-
[data-ui="face"][data-kind="card"] .tile { background: var(--face-card-bg); border-radius: calc(26px * var(--r-scale)); box-shadow: var(--shadow
|
|
163
|
-
[data-ui="face"][data-kind="bare"] .tile { background: transparent; }
|
|
164
|
-
[data-ui="room-mark"] { width: 44px; height: 44px; border-radius:
|
|
165
|
-
[data-ui="room-mark"][data-size="lg"] { width: 52px; height: 52px; border-radius:
|
|
169
|
+
[data-ui="face"][data-kind="card"] .tile { background-color: var(--face-card-bg); border-radius: calc(26px * var(--r-scale)); box-shadow: var(--face-card-shadow); }
|
|
170
|
+
[data-ui="face"][data-kind="bare"] .tile { background-color: transparent; }
|
|
171
|
+
[data-ui="room-mark"] { width: 44px; height: 44px; border-radius: var(--room-mark-radius); display: grid; place-content: center; color: var(--room-mark-ink); background: linear-gradient(var(--room-mark-grad-angle), hsl(var(--room-hue) var(--room-mark-grad-from)), hsl(var(--room-hue-2) var(--room-mark-grad-to))); box-shadow: var(--room-mark-shadow); font-weight: 800; font-size: 18px; flex: none; text-transform: uppercase; user-select: none; }
|
|
172
|
+
[data-ui="room-mark"][data-size="lg"] { width: 52px; height: 52px; border-radius: var(--room-mark-radius-lg); font-size: 22px; }
|
|
166
173
|
[data-ui="room-mark"][data-kind="emoji"] { background: hsl(var(--room-hue) var(--room-mark-emoji)); font-size: 24px; text-transform: none; }
|
|
167
174
|
[data-ui="room-mark"][data-kind="emoji"][data-size="lg"] { font-size: 28px; }
|
|
168
175
|
[data-ui="room-mark"][data-kind="accent"] { background: var(--grad-primary); }
|
|
169
176
|
[data-ui="room-mark"] .i { width: 22px; height: 22px; }
|
|
170
177
|
[data-ui="unseen-line"] { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
|
|
171
178
|
[data-ui="unseen-line"] .line { flex: 1; height: var(--unseen-line-line-h); background: var(--unseen-line-line); opacity: var(--unseen-line-line-opacity); }
|
|
172
|
-
[data-ui="unseen-line"] .label { color: var(--unseen-line-ink); background: var(--unseen-line-bg); border-radius: var(--r-pill); padding: 4px 12px; font-size: var(--fs-xs); font-weight: 800; white-space: nowrap; max-width: 70%; overflow: hidden; text-overflow: ellipsis; }
|
|
179
|
+
[data-ui="unseen-line"] .label { color: var(--unseen-line-ink); background-color: var(--unseen-line-bg); background-image: var(--bevel); box-shadow: var(--unseen-line-label-shadow); border: var(--unseen-line-label-border); text-transform: var(--unseen-line-label-case); letter-spacing: var(--unseen-line-label-tracking); border-radius: var(--r-pill); padding: 4px 12px; font-size: var(--fs-xs); font-weight: 800; white-space: nowrap; max-width: 70%; overflow: hidden; text-overflow: ellipsis; }
|
|
173
180
|
[data-ui="number-field"] { position: relative; display: inline-flex; width: 100%; min-width: 0; vertical-align: middle; }
|
|
174
|
-
[data-ui="number-field"] > input { flex: 1; min-width: 0; padding-right: calc(var(--number-field-step-w) + 10px) !important; appearance: textfield; -moz-appearance: textfield; }
|
|
181
|
+
[data-ui="number-field"] > input { flex: 1; min-width: 0; padding-right: calc(var(--number-field-step-w) + 10px) !important; appearance: textfield; -moz-appearance: textfield; box-shadow: var(--input-shadow); }
|
|
175
182
|
[data-ui="number-field"] > input::-webkit-inner-spin-button, [data-ui="number-field"] > input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
|
|
176
183
|
[data-ui="number-field"] > .steps { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 1px; width: var(--number-field-step-w); }
|
|
177
184
|
[data-ui="number-field"] > .steps > button { height: 14px; padding: 0; border: 0; background: transparent; color: var(--number-field-step-ink); cursor: pointer; border-radius: calc(5px * var(--r-scale)); display: grid; place-items: center; transition: background var(--t-fast), color var(--t-fast); }
|
|
@@ -185,7 +192,7 @@
|
|
|
185
192
|
[data-ui="adjust-row"] .what .label { font-size: var(--fs-sm); font-weight: 800; color: var(--ink); }
|
|
186
193
|
[data-ui="adjust-row"] .what .hint { font-size: var(--fs-xs); font-weight: 600; color: var(--adjust-row-hint-ink); margin: 0; }
|
|
187
194
|
[data-ui="adjust-row"] .ctl { display: inline-flex; align-items: center; gap: 8px; flex: none; }
|
|
188
|
-
[data-ui="adjust-row"][data-kind="colour"] .ctl > input[type="color"] { appearance: none; -webkit-appearance: none; width: 30px; height: 30px; min-width: 0; padding: 0; border: 2px solid var(--adjust-row-swatch-border); border-radius: calc(9px * var(--r-scale)); background: none; cursor: pointer; }
|
|
195
|
+
[data-ui="adjust-row"][data-kind="colour"] .ctl > input[type="color"] { appearance: none; -webkit-appearance: none; width: 30px; height: 30px; min-width: 0; padding: 0; border: 2px solid var(--adjust-row-swatch-border); border-radius: calc(9px * var(--r-scale)); background: none; box-shadow: var(--input-shadow); cursor: pointer; }
|
|
189
196
|
[data-ui="adjust-row"][data-kind="colour"] .ctl > input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
|
|
190
197
|
[data-ui="adjust-row"][data-kind="colour"] .ctl > input[type="color"]::-webkit-color-swatch { border: 0; border-radius: calc(6px * var(--r-scale)); }
|
|
191
198
|
[data-ui="adjust-row"][data-kind="scale"] .ctl > input[type="range"] { width: 120px; height: auto; min-width: 0; padding: 0; border: 0; background: none; accent-color: var(--primary); cursor: pointer; }
|
|
@@ -195,39 +202,13 @@
|
|
|
195
202
|
[data-ui="adjust-row"] .ctl .back:hover { background: var(--adjust-row-back-hover-bg); color: var(--ink); }
|
|
196
203
|
[data-ui="adjust-row"][data-state="changed"] .ctl .back { visibility: visible; }
|
|
197
204
|
[data-ui="adjust-row"][data-state="changed"] .ctl .value { color: var(--adjust-row-changed-ink); }
|
|
198
|
-
[data-
|
|
199
|
-
[data-look="terminal"] [data-ui="button"][data-kind="link"] { border: 0; text-transform: none; letter-spacing: 0; text-decoration: underline; }
|
|
200
|
-
[data-look="terminal"] [data-ui="badge"] { background: transparent; border: 1px solid currentColor; text-transform: uppercase; letter-spacing: 0.04em; }
|
|
201
|
-
[data-look="terminal"] [data-ui="chip"] { background: transparent; border: 1px solid currentColor; }
|
|
202
|
-
[data-look="terminal"] [data-ui="choice"] { border-color: currentColor; }
|
|
203
|
-
[data-look="terminal"] [data-ui="hub-row"]::before { content: ">"; margin-right: 6px; opacity: 0.6; }
|
|
204
|
-
[data-look="terminal"] [data-ui="unseen-line"] .label { background: transparent; border: 1px solid currentColor; text-transform: uppercase; letter-spacing: 0.04em; }
|
|
205
|
-
[data-look="plush"] :is([data-ui="button"], [data-ui="icon-button"], [data-ui="row-button"], [data-ui="logo-tile"], [data-ui="look-card"], [data-ui="file-card"], [data-ui="ask-card"], [data-ui="tool-fold"] > summary) { box-shadow: var(--shadow-tile); background-image: var(--bevel); }
|
|
206
|
-
[data-look="plush"] :is([data-ui="chip"], [data-ui="badge"], [data-ui="choice"], [data-ui="hub-row"][data-ref], [data-ui="unseen-line"] .label) { box-shadow: var(--shadow-soft); background-image: var(--bevel); }
|
|
207
|
-
[data-look="plush"] [data-ui="room-mark"] { box-shadow: var(--shadow-soft); }
|
|
208
|
-
[data-look="plush"] :is([data-ui="button"], [data-ui="icon-button"], [data-ui="chip"], [data-ui="badge"], [data-ui="choice"]) { border-radius: var(--r-pill); }
|
|
209
|
-
[data-look="plush"] [data-ui="button"]:is([data-kind="primary"], [data-kind="ok"], [data-kind="danger-solid"], [data-kind="warn"]) { box-shadow: var(--shadow-primary); }
|
|
210
|
-
[data-look="plush"] [data-ui="button"][data-kind="primary"] { background-image: var(--bevel), var(--grad-primary); }
|
|
211
|
-
[data-look="plush"] [data-ui="icon-button"]:is([data-kind="ghost"], [data-kind="plain"]), [data-look="plush"] [data-ui="button"]:is([data-kind="ghost"], [data-kind="plain"], [data-kind="soft"], [data-kind="secondary"], [data-kind="paper"]) { background-color: var(--btn-bg); }
|
|
212
|
-
[data-look="plush"] :is([data-ui="button"], [data-ui="icon-button"], [data-ui="chip"], [data-ui="choice"]):is(:hover, [data-state="hover"]):not(:disabled) { box-shadow: var(--shadow-ctl-hover); background-image: var(--bevel); transform: translateY(-1px); }
|
|
213
|
-
[data-look="plush"] [data-ui="button"][data-kind="primary"]:is(:hover, [data-state="hover"]):not(:disabled) { box-shadow: var(--shadow-primary); background-image: var(--bevel), var(--grad-primary); transform: translateY(-1px); filter: none; }
|
|
214
|
-
[data-look="plush"] :is([data-ui="button"], [data-ui="icon-button"], [data-ui="row-button"], [data-ui="choice"], [data-ui="chip"]):is(:active, [data-state="active"]):not(:disabled) { box-shadow: var(--shadow-inset); background-image: none; transform: translateY(1px); }
|
|
215
|
-
[data-look="plush"] [data-ui="choice"]:is([data-state="on"], [aria-pressed="true"]) { box-shadow: var(--shadow-inset); background-image: none; }
|
|
216
|
-
[data-look="plush"] :is([data-ui="number-field"] > input, [data-ui="adjust-row"] .ctl > input[type="color"]) { box-shadow: var(--input-shadow); }
|
|
217
|
-
[data-look="plush"] [data-ui="face"] .tile { box-shadow: var(--shadow-soft); background-image: var(--bevel); }
|
|
218
|
-
[data-look="plush"] [data-ui="room-mark"][data-kind] { border-radius: calc(10px * var(--r-scale)); }
|
|
219
|
-
[data-look="plush"] [data-ui="room-mark"][data-kind][data-size="lg"] { border-radius: calc(12px * var(--r-scale)); }
|
|
220
|
-
[data-look="plush"] [data-ui="logo-tile"] { border-radius: calc(8px * var(--r-scale)); }
|
|
221
|
-
[data-look="plush"] [data-ui="logo-tile"][data-size="sm"] { border-radius: calc(7px * var(--r-scale)); }
|
|
222
|
-
[data-look="plush"] [data-ui="logo-tile"][data-size="lg"] { border-radius: calc(9px * var(--r-scale)); }
|
|
223
|
-
[data-look="plush"] [data-ui="face"][data-me] .tile { box-shadow: 0 0 0 2px var(--face-ring), 0 0 0 4px var(--face-me-ring), var(--shadow-soft); }
|
|
224
|
-
[data-look="terminal"] :is([data-ui="button"], [data-ui="icon-button"], [data-ui="row-button"], [data-ui="choice"], [data-ui="badge"], [data-ui="chip"], [data-ui="hub-row"], [data-ui="file-card"], [data-ui="ask-card"], [data-ui="reply-note"], [data-ui="tool-fold"] > summary, [data-ui="tool-call"] > [data-ui="chip"], [data-ui="tool-call"] > .body) { border-radius: 0; }
|
|
225
|
-
[data-ui="look-card"] { display: inline-flex; flex-direction: column; align-items: stretch; gap: 6px; width: var(--look-card-w); padding: 6px; border: 2px solid var(--look-card-border); border-radius: var(--r-md); background: var(--look-card-bg); color: var(--look-card-ink); cursor: pointer; font: inherit; text-align: center; transition: border-color var(--t-fast), transform var(--t-fast) var(--ease-out); }
|
|
205
|
+
[data-ui="look-card"] { display: inline-flex; flex-direction: column; align-items: stretch; gap: 6px; width: var(--look-card-w); padding: 6px; border: 2px solid var(--look-card-border); border-radius: var(--r-md); background-color: var(--look-card-bg); background-image: var(--bevel); box-shadow: var(--look-card-shadow); color: var(--look-card-ink); cursor: pointer; font: inherit; text-align: center; transition: border-color var(--t-fast), transform var(--t-fast) var(--ease-out); }
|
|
226
206
|
[data-ui="look-card"] .paper { position: relative; display: block; height: var(--look-card-paper-h); overflow: hidden; }
|
|
227
207
|
[data-ui="look-card"] .reply { position: absolute; left: 10px; top: 10px; width: 50%; height: 24px; display: flex; align-items: center; padding: 0 8px; font-size: 11px; font-weight: 800; }
|
|
228
208
|
[data-ui="look-card"] .mine { position: absolute; right: 12px; top: 42px; width: 36%; height: 18px; }
|
|
229
209
|
[data-ui="look-card"] .accent { position: absolute; left: 10px; bottom: 10px; width: 34px; height: 12px; }
|
|
230
210
|
[data-ui="look-card"] .name { font-size: var(--fs-sm); font-weight: 800; }
|
|
211
|
+
[data-ui="look-card"] .tag { align-self: center; margin-top: -2px; padding: 1px 8px; border-radius: var(--r-pill); background-color: var(--badge-bg); color: var(--badge-ink); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
|
|
231
212
|
[data-ui="look-card"]:is(:hover, [data-state="hover"]) { border-color: var(--look-card-hover-border); transform: translateY(-1px); }
|
|
232
213
|
[data-ui="look-card"]:is([data-state="on"], [aria-pressed="true"]) { border-color: var(--look-card-on-border); }
|
|
233
214
|
[data-ui="reply-note"] { display: flex; align-items: flex-start; gap: 6px; font-size: var(--reply-note-fs); font-weight: 700; line-height: 1.5; color: var(--reply-note-ink); background: var(--reply-note-bg); border-radius: calc(10px * var(--r-scale)); padding: 5px 10px; }
|
package/ui/components.js
CHANGED
|
@@ -519,12 +519,13 @@
|
|
|
519
519
|
describe: "A look, shown as a small picture of itself: its paper, a reply and your bubble on it, its accent, its corners, its name in its own font. The picker in Settings and the style guide's own switch are rows of these; the colours come from the look's tokens, so the card is right whatever look the page wears.",
|
|
520
520
|
props: {
|
|
521
521
|
look: { type: "object", required: true, note: "a look from VIBEROOM_TOKENS.looks: id, label, palette, shape, type, elements" },
|
|
522
|
+
tag: { type: "string", note: "a small word under the name: whose look it is (one of the human's own)" },
|
|
522
523
|
on: { type: "boolean", default: false },
|
|
523
524
|
act: { type: "string" },
|
|
524
525
|
title: { type: "string" },
|
|
525
526
|
data: { type: "object" },
|
|
526
527
|
},
|
|
527
|
-
build: ({ look, on, act, title, data }, ui) => {
|
|
528
|
+
build: ({ look, tag, on, act, title, data }, ui) => {
|
|
528
529
|
const p = look.palette;
|
|
529
530
|
const e = look.elements;
|
|
530
531
|
const r = (px) => `calc(${px}px * ${look.shape.rScale || 1})`;
|
|
@@ -535,9 +536,13 @@
|
|
|
535
536
|
ui.h("span", { class: "reply", style: `background:${e.bubble.bg};color:${e.bubble.ink};border-radius:${r(8)};font-family:${look.type.font};box-shadow:${e.bubble.shadow || "none"}` }, "Aa"),
|
|
536
537
|
ui.h("span", { class: "mine", style: `background:${e.bubble.mineBg};border-radius:${r(8)};box-shadow:${e.bubble.mineShadow || "none"}` }),
|
|
537
538
|
ui.h("span", { class: "accent", style: `background:${p.primary};border-radius:${r(6)};box-shadow:${shadows.shadowPrimary || "none"}` })),
|
|
538
|
-
ui.h("span", { class: "name", style: `font-family:${look.type.font}` }, look.label)
|
|
539
|
+
ui.h("span", { class: "name", style: `font-family:${look.type.font}` }, look.label),
|
|
540
|
+
tag ? ui.h("span", { class: "tag" }, tag) : null);
|
|
539
541
|
},
|
|
540
542
|
states: ["rest", "hover", "on"],
|
|
541
|
-
samples:
|
|
543
|
+
samples: [
|
|
544
|
+
...Object.values(globalThis.VIBEROOM_TOKENS.looks).map((l) => ({ label: l.label, props: { look: l, on: l.id === globalThis.VIBEROOM_TOKENS.current.id } })),
|
|
545
|
+
{ label: "one of the human's own", props: { look: globalThis.VIBEROOM_TOKENS.current, tag: "Sam's look" } },
|
|
546
|
+
],
|
|
542
547
|
});
|
|
543
548
|
})();
|
package/ui/index.html
CHANGED
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
<meta name="theme-color" content="#6d5dfc">
|
|
13
13
|
<link rel="stylesheet" href="/theme.css">
|
|
14
14
|
<link rel="stylesheet" href="/looks.css">
|
|
15
|
+
<link rel="stylesheet" href="/looks-custom.css" id="looks-custom">
|
|
15
16
|
<link rel="stylesheet" href="/components.css">
|
|
16
17
|
<link rel="stylesheet" href="/app.css">
|
|
17
18
|
</head>
|
|
@@ -146,7 +147,7 @@
|
|
|
146
147
|
<form method="dialog">
|
|
147
148
|
<h3 id="cf-title">Are you sure?</h3>
|
|
148
149
|
<p class="lead" id="cf-text"></p>
|
|
149
|
-
<div class="actions"><button data-ui="button" data-kind="ghost" value="cancel" type="submit">Cancel</button><button data-ui="button" data-kind="primary" id="cf-ok" value="ok" type="submit">OK</button></div>
|
|
150
|
+
<div class="actions"><button data-ui="button" data-kind="ghost" id="cf-cancel" value="cancel" type="submit">Cancel</button><button data-ui="button" data-kind="ghost" id="cf-alt" value="alt" type="submit" hidden>Alt</button><button data-ui="button" data-kind="primary" id="cf-ok" value="ok" type="submit">OK</button></div>
|
|
150
151
|
</form>
|
|
151
152
|
</dialog>
|
|
152
153
|
<dialog id="room-dialog" class="dialog">
|
|
@@ -199,7 +200,7 @@
|
|
|
199
200
|
<div class="choice-row"><span class="label">Mode</span><div class="chips" data-for="inv-mode"></div><select id="inv-mode" hidden></select></div>
|
|
200
201
|
</div>
|
|
201
202
|
<div class="two-col">
|
|
202
|
-
<label>Vibename <span class="hint">(required)</span><input id="inv-name" type="text" maxlength="24" required autocomplete="off" placeholder="letters, digits, _ or -"></label>
|
|
203
|
+
<label>Vibename <span class="hint req">(required)</span><input id="inv-name" type="text" maxlength="24" required autocomplete="off" placeholder="letters, digits, _ or -"></label>
|
|
203
204
|
<label>Vibersona <span class="hint">(optional; a few words under the vibename)</span><input id="inv-tagline" type="text" maxlength="80" placeholder="e.g. curious analyst"></label>
|
|
204
205
|
</div>
|
|
205
206
|
<label>Vibeface <span class="hint">(pick one, or type any emoji)</span>
|