@kevin5251984/guild 0.2.13 → 0.2.14
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/package.json +1 -1
- package/src/public/chat.css +184 -41
- package/src/public/chat.html +1 -1
- package/src/public/style.css +75 -13
package/package.json
CHANGED
package/src/public/chat.css
CHANGED
|
@@ -16,10 +16,148 @@
|
|
|
16
16
|
--thread-max: 1600px;
|
|
17
17
|
--thread-gutter: 28px;
|
|
18
18
|
--you-max: min(56rem, 86%);
|
|
19
|
+
--press: 0.97;
|
|
20
|
+
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
|
|
21
|
+
--press-ms: 140ms;
|
|
22
|
+
--hover-ms: 160ms;
|
|
23
|
+
--danger: #f0a8a8;
|
|
24
|
+
--ok: #9fdfb2;
|
|
19
25
|
--focus: 0 0 0 2px var(--bg), 0 0 0 3px var(--steel);
|
|
20
26
|
}
|
|
21
27
|
* { box-sizing: border-box; }
|
|
22
28
|
html, body { margin: 0; height: 100%; }
|
|
29
|
+
/* Enamel press language: paper / steel / ghost. Wood rail and tavern stay out. */
|
|
30
|
+
.icon-btn,
|
|
31
|
+
.add-ch,
|
|
32
|
+
.bot-card-btn,
|
|
33
|
+
.create-row button,
|
|
34
|
+
.traj-btn,
|
|
35
|
+
.members-btn,
|
|
36
|
+
.invite-btn,
|
|
37
|
+
.jump-bottom,
|
|
38
|
+
.turn-actions button,
|
|
39
|
+
.msg-actions button,
|
|
40
|
+
.composer-add,
|
|
41
|
+
.composer-reply-clear,
|
|
42
|
+
.primary,
|
|
43
|
+
.model-btn,
|
|
44
|
+
.dialog-actions button,
|
|
45
|
+
.queue-chip button,
|
|
46
|
+
.attach-chip-x,
|
|
47
|
+
.attach-item,
|
|
48
|
+
.attach-back,
|
|
49
|
+
.attach-row,
|
|
50
|
+
.attach-term button,
|
|
51
|
+
.assign-list button,
|
|
52
|
+
.mention-item,
|
|
53
|
+
.model-row,
|
|
54
|
+
.model-choice,
|
|
55
|
+
.stats-ico,
|
|
56
|
+
.html-zoom-close,
|
|
57
|
+
.assistant-text .md-fence-btn,
|
|
58
|
+
.assistant-text .md-fence-tab {
|
|
59
|
+
transition:
|
|
60
|
+
background-color var(--hover-ms) ease,
|
|
61
|
+
border-color var(--hover-ms) ease,
|
|
62
|
+
color var(--hover-ms) ease,
|
|
63
|
+
transform var(--press-ms) var(--ease-out),
|
|
64
|
+
opacity var(--hover-ms) ease;
|
|
65
|
+
}
|
|
66
|
+
.icon-btn:active:not(:disabled),
|
|
67
|
+
.add-ch:active:not(:disabled),
|
|
68
|
+
.bot-card-btn:active:not(:disabled),
|
|
69
|
+
.create-row button:active:not(:disabled),
|
|
70
|
+
.traj-btn:active:not(:disabled),
|
|
71
|
+
.members-btn:active:not(:disabled),
|
|
72
|
+
.invite-btn:active:not(:disabled),
|
|
73
|
+
.jump-bottom:active:not(:disabled),
|
|
74
|
+
.turn-actions button:active:not(:disabled),
|
|
75
|
+
.msg-actions button:active:not(:disabled),
|
|
76
|
+
.composer-add:active:not(:disabled),
|
|
77
|
+
.composer-reply-clear:active:not(:disabled),
|
|
78
|
+
.primary:active:not(:disabled),
|
|
79
|
+
.model-btn:active:not(:disabled),
|
|
80
|
+
.dialog-actions button:active:not(:disabled),
|
|
81
|
+
.queue-chip button:active:not(:disabled),
|
|
82
|
+
.attach-chip-x:active:not(:disabled),
|
|
83
|
+
.attach-item:active:not(:disabled),
|
|
84
|
+
.attach-back:active:not(:disabled),
|
|
85
|
+
.attach-row:active:not(:disabled),
|
|
86
|
+
.attach-term button:active:not(:disabled),
|
|
87
|
+
.assign-list button:active:not(:disabled),
|
|
88
|
+
.mention-item:active:not(:disabled),
|
|
89
|
+
.model-row:active:not(:disabled),
|
|
90
|
+
.model-choice:active:not(:disabled),
|
|
91
|
+
.stats-ico:active:not(:disabled),
|
|
92
|
+
.html-zoom-close:active:not(:disabled),
|
|
93
|
+
.assistant-text .md-fence-btn:active:not(:disabled),
|
|
94
|
+
.assistant-text .md-fence-tab:active:not(:disabled) {
|
|
95
|
+
transform: scale(var(--press));
|
|
96
|
+
}
|
|
97
|
+
@media (prefers-reduced-motion: reduce) {
|
|
98
|
+
.icon-btn,
|
|
99
|
+
.add-ch,
|
|
100
|
+
.bot-card-btn,
|
|
101
|
+
.create-row button,
|
|
102
|
+
.traj-btn,
|
|
103
|
+
.members-btn,
|
|
104
|
+
.invite-btn,
|
|
105
|
+
.jump-bottom,
|
|
106
|
+
.turn-actions button,
|
|
107
|
+
.msg-actions button,
|
|
108
|
+
.composer-add,
|
|
109
|
+
.composer-reply-clear,
|
|
110
|
+
.primary,
|
|
111
|
+
.model-btn,
|
|
112
|
+
.dialog-actions button,
|
|
113
|
+
.queue-chip button,
|
|
114
|
+
.attach-chip-x,
|
|
115
|
+
.attach-item,
|
|
116
|
+
.attach-back,
|
|
117
|
+
.attach-row,
|
|
118
|
+
.attach-term button,
|
|
119
|
+
.assign-list button,
|
|
120
|
+
.mention-item,
|
|
121
|
+
.model-row,
|
|
122
|
+
.model-choice,
|
|
123
|
+
.stats-ico,
|
|
124
|
+
.html-zoom-close,
|
|
125
|
+
.assistant-text .md-fence-btn,
|
|
126
|
+
.assistant-text .md-fence-tab {
|
|
127
|
+
transition: none;
|
|
128
|
+
}
|
|
129
|
+
.icon-btn:active:not(:disabled),
|
|
130
|
+
.add-ch:active:not(:disabled),
|
|
131
|
+
.bot-card-btn:active:not(:disabled),
|
|
132
|
+
.create-row button:active:not(:disabled),
|
|
133
|
+
.traj-btn:active:not(:disabled),
|
|
134
|
+
.members-btn:active:not(:disabled),
|
|
135
|
+
.invite-btn:active:not(:disabled),
|
|
136
|
+
.jump-bottom:active:not(:disabled),
|
|
137
|
+
.turn-actions button:active:not(:disabled),
|
|
138
|
+
.msg-actions button:active:not(:disabled),
|
|
139
|
+
.composer-add:active:not(:disabled),
|
|
140
|
+
.composer-reply-clear:active:not(:disabled),
|
|
141
|
+
.primary:active:not(:disabled),
|
|
142
|
+
.model-btn:active:not(:disabled),
|
|
143
|
+
.dialog-actions button:active:not(:disabled),
|
|
144
|
+
.queue-chip button:active:not(:disabled),
|
|
145
|
+
.attach-chip-x:active:not(:disabled),
|
|
146
|
+
.attach-item:active:not(:disabled),
|
|
147
|
+
.attach-back:active:not(:disabled),
|
|
148
|
+
.attach-row:active:not(:disabled),
|
|
149
|
+
.attach-term button:active:not(:disabled),
|
|
150
|
+
.assign-list button:active:not(:disabled),
|
|
151
|
+
.mention-item:active:not(:disabled),
|
|
152
|
+
.model-row:active:not(:disabled),
|
|
153
|
+
.model-choice:active:not(:disabled),
|
|
154
|
+
.stats-ico:active:not(:disabled),
|
|
155
|
+
.html-zoom-close:active:not(:disabled),
|
|
156
|
+
.assistant-text .md-fence-btn:active:not(:disabled),
|
|
157
|
+
.assistant-text .md-fence-tab:active:not(:disabled) {
|
|
158
|
+
transform: none;
|
|
159
|
+
}
|
|
160
|
+
}
|
|
23
161
|
button:focus-visible,
|
|
24
162
|
a:focus-visible,
|
|
25
163
|
input:focus-visible,
|
|
@@ -35,6 +173,10 @@ select:focus-visible,
|
|
|
35
173
|
.icon-btn:hover { background: var(--lift); }
|
|
36
174
|
.add-ch:hover { color: var(--text); background: var(--lift); }
|
|
37
175
|
}
|
|
176
|
+
body.grok .sidebar .add-ch:active:not(:disabled),
|
|
177
|
+
body.grok .sidebar .create-row button:active:not(:disabled) {
|
|
178
|
+
transform: none;
|
|
179
|
+
}
|
|
38
180
|
body.grok {
|
|
39
181
|
display: grid;
|
|
40
182
|
grid-template-columns: var(--sidebar-w, 292px) 1fr;
|
|
@@ -1255,7 +1397,7 @@ a.invite-btn:hover { text-decoration: none; }
|
|
|
1255
1397
|
align-items: center;
|
|
1256
1398
|
justify-content: center;
|
|
1257
1399
|
}
|
|
1258
|
-
.assistant-text .md-fence-btn:hover { background:
|
|
1400
|
+
.assistant-text .md-fence-btn:hover { background: var(--lift); color: var(--text); }
|
|
1259
1401
|
.assistant-text .md-fence-btn[data-fence-input]:hover::after,
|
|
1260
1402
|
.assistant-text .md-fence-btn[data-fence-copy]:hover::after,
|
|
1261
1403
|
.assistant-text .md-fence-btn[data-html-expand]:hover::after {
|
|
@@ -1327,7 +1469,7 @@ a.invite-btn:hover { text-decoration: none; }
|
|
|
1327
1469
|
cursor: pointer;
|
|
1328
1470
|
}
|
|
1329
1471
|
.assistant-text .md-fence-tab.on,
|
|
1330
|
-
.assistant-text .md-fence-tab:hover { background:
|
|
1472
|
+
.assistant-text .md-fence-tab:hover { background: var(--lift); color: var(--text); }
|
|
1331
1473
|
.assistant-text .md-html-frame {
|
|
1332
1474
|
display: block;
|
|
1333
1475
|
width: 100%;
|
|
@@ -1364,12 +1506,12 @@ a.invite-btn:hover { text-decoration: none; }
|
|
|
1364
1506
|
height: 36px;
|
|
1365
1507
|
border: 0;
|
|
1366
1508
|
border-radius: 50%;
|
|
1367
|
-
background:
|
|
1368
|
-
color:
|
|
1509
|
+
background: var(--fill);
|
|
1510
|
+
color: var(--text);
|
|
1369
1511
|
font-size: 1.35rem;
|
|
1370
1512
|
cursor: pointer;
|
|
1371
1513
|
}
|
|
1372
|
-
.html-zoom-close:hover { background:
|
|
1514
|
+
.html-zoom-close:hover { background: var(--lift); }
|
|
1373
1515
|
.html-zoom-frame {
|
|
1374
1516
|
width: min(1100px, 100%);
|
|
1375
1517
|
height: 100%;
|
|
@@ -1633,21 +1775,22 @@ a.invite-btn:hover { text-decoration: none; }
|
|
|
1633
1775
|
.turn-actions button {
|
|
1634
1776
|
height: 28px;
|
|
1635
1777
|
padding: 0 10px;
|
|
1636
|
-
border: 1px solid
|
|
1778
|
+
border: 1px solid var(--line);
|
|
1637
1779
|
border-radius: 8px;
|
|
1638
|
-
background:
|
|
1639
|
-
color:
|
|
1780
|
+
background: var(--fill);
|
|
1781
|
+
color: var(--text);
|
|
1640
1782
|
font: inherit;
|
|
1641
1783
|
font-size: 12px;
|
|
1642
1784
|
line-height: 28px;
|
|
1643
1785
|
cursor: pointer;
|
|
1644
1786
|
}
|
|
1645
1787
|
.turn-actions button:hover {
|
|
1646
|
-
border-color:
|
|
1647
|
-
color:
|
|
1788
|
+
border-color: color-mix(in srgb, var(--steel) 45%, var(--line));
|
|
1789
|
+
color: var(--text);
|
|
1790
|
+
background: var(--lift);
|
|
1648
1791
|
}
|
|
1649
1792
|
.turn-actions .turn-stop {
|
|
1650
|
-
color:
|
|
1793
|
+
color: var(--danger);
|
|
1651
1794
|
}
|
|
1652
1795
|
.turn-actions .turn-steer {
|
|
1653
1796
|
color: #b4c8e8;
|
|
@@ -1699,8 +1842,8 @@ body.grok .turn-actions .turn-steer { color: #c4b090; }
|
|
|
1699
1842
|
font-size: 0.72rem;
|
|
1700
1843
|
cursor: pointer;
|
|
1701
1844
|
}
|
|
1702
|
-
.msg-actions button:hover { background:
|
|
1703
|
-
.msg-actions button.danger:hover { color:
|
|
1845
|
+
.msg-actions button:hover { background: var(--lift); color: var(--text); }
|
|
1846
|
+
.msg-actions button.danger:hover { color: var(--danger); }
|
|
1704
1847
|
.toast {
|
|
1705
1848
|
position: fixed;
|
|
1706
1849
|
left: calc(var(--sidebar-w, 292px) + (100vw - var(--sidebar-w, 292px)) / 2);
|
|
@@ -1734,18 +1877,18 @@ body.grok .turn-actions .turn-steer { color: #c4b090; }
|
|
|
1734
1877
|
height: 22px;
|
|
1735
1878
|
margin: 8px 0 0;
|
|
1736
1879
|
padding: 0;
|
|
1737
|
-
border: 1px solid
|
|
1880
|
+
border: 1px solid var(--line);
|
|
1738
1881
|
border-radius: 6px;
|
|
1739
|
-
background:
|
|
1740
|
-
color:
|
|
1882
|
+
background: var(--fill);
|
|
1883
|
+
color: var(--muted);
|
|
1741
1884
|
cursor: pointer;
|
|
1742
1885
|
flex: none;
|
|
1743
1886
|
}
|
|
1744
1887
|
.stats-ico:hover,
|
|
1745
1888
|
.stats-ico.on {
|
|
1746
1889
|
color: var(--text);
|
|
1747
|
-
border-color:
|
|
1748
|
-
background:
|
|
1890
|
+
border-color: color-mix(in srgb, var(--steel) 45%, var(--line));
|
|
1891
|
+
background: var(--lift);
|
|
1749
1892
|
}
|
|
1750
1893
|
.stats-panel {
|
|
1751
1894
|
margin: 0.4rem 0 0.15rem;
|
|
@@ -1909,7 +2052,7 @@ body.grok .composer.drop-on .composer-card::after {
|
|
|
1909
2052
|
line-height: 1;
|
|
1910
2053
|
cursor: pointer;
|
|
1911
2054
|
}
|
|
1912
|
-
.composer-reply-clear:hover { background:
|
|
2055
|
+
.composer-reply-clear:hover { background: var(--lift); color: var(--text); }
|
|
1913
2056
|
.mention-pop {
|
|
1914
2057
|
position: absolute;
|
|
1915
2058
|
left: 0;
|
|
@@ -1960,7 +2103,7 @@ body.grok .composer.drop-on .composer-card::after {
|
|
|
1960
2103
|
font: inherit;
|
|
1961
2104
|
cursor: pointer;
|
|
1962
2105
|
}
|
|
1963
|
-
.mention-item:hover, .mention-item.on { background:
|
|
2106
|
+
.mention-item:hover, .mention-item.on { background: var(--lift); }
|
|
1964
2107
|
.mention-item strong { display: block; font-size: 0.9rem; font-weight: 560; }
|
|
1965
2108
|
.mention-item em {
|
|
1966
2109
|
display: block;
|
|
@@ -2027,7 +2170,7 @@ body.grok .composer.drop-on .composer-card::after {
|
|
|
2027
2170
|
margin: 0;
|
|
2028
2171
|
border: 0;
|
|
2029
2172
|
border-radius: 999px;
|
|
2030
|
-
background:
|
|
2173
|
+
background: var(--lift);
|
|
2031
2174
|
color: var(--text);
|
|
2032
2175
|
font-size: 1.05rem;
|
|
2033
2176
|
line-height: 1;
|
|
@@ -2067,7 +2210,7 @@ body.grok .composer.drop-on .composer-card::after {
|
|
|
2067
2210
|
text-align: left;
|
|
2068
2211
|
cursor: pointer;
|
|
2069
2212
|
}
|
|
2070
|
-
.attach-item:hover { background:
|
|
2213
|
+
.attach-item:hover { background: var(--lift); }
|
|
2071
2214
|
.attach-ico {
|
|
2072
2215
|
width: 18px;
|
|
2073
2216
|
color: #9a9a9a;
|
|
@@ -2156,7 +2299,7 @@ body.grok .composer.drop-on .composer-card::after {
|
|
|
2156
2299
|
line-height: 1;
|
|
2157
2300
|
cursor: pointer;
|
|
2158
2301
|
}
|
|
2159
|
-
.queue-chip button:hover { color:
|
|
2302
|
+
.queue-chip button:hover { color: var(--text); background: var(--lift); }
|
|
2160
2303
|
.composer-steer {
|
|
2161
2304
|
margin: 6px 16px 0;
|
|
2162
2305
|
color: #6f6f6f;
|
|
@@ -2171,10 +2314,10 @@ body.grok .composer.drop-on .composer-card::after {
|
|
|
2171
2314
|
max-width: 240px;
|
|
2172
2315
|
margin: 0;
|
|
2173
2316
|
padding: 0;
|
|
2174
|
-
border: 1px solid
|
|
2317
|
+
border: 1px solid var(--line);
|
|
2175
2318
|
border-radius: 999px;
|
|
2176
|
-
background:
|
|
2177
|
-
color:
|
|
2319
|
+
background: var(--fill);
|
|
2320
|
+
color: var(--text);
|
|
2178
2321
|
font: inherit;
|
|
2179
2322
|
font-size: 12px;
|
|
2180
2323
|
line-height: 1;
|
|
@@ -2203,8 +2346,8 @@ body.grok .composer.drop-on .composer-card::after {
|
|
|
2203
2346
|
font-size: 13px;
|
|
2204
2347
|
cursor: pointer;
|
|
2205
2348
|
}
|
|
2206
|
-
.attach-chip:hover { background:
|
|
2207
|
-
.attach-chip-x:hover { color:
|
|
2349
|
+
.attach-chip:hover { background: var(--lift); }
|
|
2350
|
+
.attach-chip-x:hover { color: var(--text); }
|
|
2208
2351
|
.attach-chip.has-preview { padding-left: 3px; }
|
|
2209
2352
|
.attach-thumb {
|
|
2210
2353
|
width: 22px;
|
|
@@ -2323,7 +2466,7 @@ body.grok .composer.drop-on .composer-card::after {
|
|
|
2323
2466
|
font-size: 18px;
|
|
2324
2467
|
cursor: pointer;
|
|
2325
2468
|
}
|
|
2326
|
-
.attach-back:hover { background:
|
|
2469
|
+
.attach-back:hover { background: var(--lift); }
|
|
2327
2470
|
.attach-q {
|
|
2328
2471
|
width: 100%;
|
|
2329
2472
|
margin: 0 0 8px;
|
|
@@ -2359,7 +2502,7 @@ body.grok .composer.drop-on .composer-card::after {
|
|
|
2359
2502
|
text-align: left;
|
|
2360
2503
|
cursor: pointer;
|
|
2361
2504
|
}
|
|
2362
|
-
.attach-row:hover { background:
|
|
2505
|
+
.attach-row:hover { background: var(--lift); }
|
|
2363
2506
|
.attach-row em {
|
|
2364
2507
|
margin-left: auto;
|
|
2365
2508
|
color: #8b8b8b;
|
|
@@ -2387,7 +2530,7 @@ body.grok .composer.drop-on .composer-card::after {
|
|
|
2387
2530
|
padding: 0 12px;
|
|
2388
2531
|
border: 0;
|
|
2389
2532
|
border-radius: 8px;
|
|
2390
|
-
background:
|
|
2533
|
+
background: var(--fill);
|
|
2391
2534
|
color: var(--text);
|
|
2392
2535
|
font: inherit;
|
|
2393
2536
|
cursor: pointer;
|
|
@@ -2405,9 +2548,9 @@ body.grok .composer.drop-on .composer-card::after {
|
|
|
2405
2548
|
color: var(--ink);
|
|
2406
2549
|
cursor: pointer;
|
|
2407
2550
|
}
|
|
2408
|
-
.primary:hover:not(:disabled) { background:
|
|
2551
|
+
.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--paper) 88%, white); }
|
|
2409
2552
|
.primary:disabled { opacity: 0.4; cursor: default; }
|
|
2410
|
-
.primary.stopping { background: var(--paper); }
|
|
2553
|
+
.primary.stopping { background: var(--paper); color: var(--ink); }
|
|
2411
2554
|
.primary .icon-stop { display: none; }
|
|
2412
2555
|
.primary.stopping .icon-send { display: none; }
|
|
2413
2556
|
.primary.stopping .icon-stop { display: block; }
|
|
@@ -2422,7 +2565,7 @@ body.grok .composer.drop-on .composer-card::after {
|
|
|
2422
2565
|
padding: 0.38rem 0.7rem 0.38rem 0.9rem;
|
|
2423
2566
|
border: 0;
|
|
2424
2567
|
border-radius: 999px;
|
|
2425
|
-
background:
|
|
2568
|
+
background: var(--lift);
|
|
2426
2569
|
color: var(--text);
|
|
2427
2570
|
font-size: 0.82rem;
|
|
2428
2571
|
cursor: pointer;
|
|
@@ -2518,7 +2661,7 @@ body.grok .composer.drop-on .composer-card::after {
|
|
|
2518
2661
|
cursor: pointer;
|
|
2519
2662
|
text-align: left;
|
|
2520
2663
|
}
|
|
2521
|
-
.model-row:hover, .model-row.on { background:
|
|
2664
|
+
.model-row:hover, .model-row.on { background: var(--lift); }
|
|
2522
2665
|
.model-row > span:first-child { flex: none; }
|
|
2523
2666
|
.model-row-val {
|
|
2524
2667
|
margin-left: auto;
|
|
@@ -2553,7 +2696,7 @@ body.grok .composer.drop-on .composer-card::after {
|
|
|
2553
2696
|
text-align: left;
|
|
2554
2697
|
text-decoration: none;
|
|
2555
2698
|
}
|
|
2556
|
-
.model-choice:hover, .model-choice.on { background:
|
|
2699
|
+
.model-choice:hover, .model-choice.on { background: var(--lift); }
|
|
2557
2700
|
.model-choice.locked { opacity: 0.5; }
|
|
2558
2701
|
.model-choice .glyph {
|
|
2559
2702
|
flex: none;
|
|
@@ -2606,7 +2749,7 @@ dialog p { margin: 0 0 0.8rem; color: var(--muted); font-size: 0.9rem; }
|
|
|
2606
2749
|
border-radius: 10px;
|
|
2607
2750
|
color: var(--text);
|
|
2608
2751
|
}
|
|
2609
|
-
.pick label:hover { background:
|
|
2752
|
+
.pick label:hover { background: var(--lift); }
|
|
2610
2753
|
.pick input { width: auto; }
|
|
2611
2754
|
#channel-md { width: min(40rem, calc(100vw - 2rem)); }
|
|
2612
2755
|
#channel-md label {
|
|
@@ -2663,15 +2806,15 @@ dialog p { margin: 0 0 0.8rem; color: var(--muted); font-size: 0.9rem; }
|
|
|
2663
2806
|
width: 100%;
|
|
2664
2807
|
margin: 0;
|
|
2665
2808
|
padding: 0.55rem 0.7rem;
|
|
2666
|
-
border: 1px solid
|
|
2809
|
+
border: 1px solid var(--line);
|
|
2667
2810
|
border-radius: 12px;
|
|
2668
|
-
background:
|
|
2811
|
+
background: var(--fill);
|
|
2669
2812
|
color: var(--text);
|
|
2670
2813
|
font: inherit;
|
|
2671
2814
|
text-align: left;
|
|
2672
2815
|
cursor: pointer;
|
|
2673
2816
|
}
|
|
2674
|
-
.assign-list button:hover { background:
|
|
2817
|
+
.assign-list button:hover { background: var(--lift); border-color: color-mix(in srgb, var(--steel) 45%, var(--line)); }
|
|
2675
2818
|
.assign-list .assign-copy {
|
|
2676
2819
|
display: flex;
|
|
2677
2820
|
flex-direction: column;
|
|
@@ -2694,7 +2837,7 @@ dialog p { margin: 0 0 0.8rem; color: var(--muted); font-size: 0.9rem; }
|
|
|
2694
2837
|
cursor: pointer;
|
|
2695
2838
|
font: inherit;
|
|
2696
2839
|
border: 0;
|
|
2697
|
-
background:
|
|
2840
|
+
background: var(--lift);
|
|
2698
2841
|
color: var(--text);
|
|
2699
2842
|
}
|
|
2700
2843
|
.dialog-actions .ghost { background: transparent; color: var(--muted); }
|
package/src/public/chat.html
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
<link rel="icon" href="/favicon-32.png" type="image/png" sizes="32x32" />
|
|
9
9
|
<link rel="icon" href="/favicon-16.png" type="image/png" sizes="16x16" />
|
|
10
10
|
<title>Guild — 大廳</title>
|
|
11
|
-
<link rel="stylesheet" href="/chat.css?v=
|
|
11
|
+
<link rel="stylesheet" href="/chat.css?v=press-enamel" />
|
|
12
12
|
<script src="/i18n.js"></script>
|
|
13
13
|
<script src="/md.js"></script>
|
|
14
14
|
</head>
|
package/src/public/style.css
CHANGED
|
@@ -16,7 +16,12 @@
|
|
|
16
16
|
--accent: #A8B0BC;
|
|
17
17
|
--ok: #9fdfb2;
|
|
18
18
|
--err: #fca5a5;
|
|
19
|
+
--danger: #f0a8a8;
|
|
19
20
|
--radius: 14px;
|
|
21
|
+
--press: 0.97;
|
|
22
|
+
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
|
|
23
|
+
--press-ms: 140ms;
|
|
24
|
+
--hover-ms: 160ms;
|
|
20
25
|
--focus: 0 0 0 2px var(--bg), 0 0 0 3px var(--steel);
|
|
21
26
|
color: var(--text);
|
|
22
27
|
background: var(--bg);
|
|
@@ -88,6 +93,7 @@ select:focus-visible {
|
|
|
88
93
|
}
|
|
89
94
|
.locale-switch button.on,
|
|
90
95
|
.locale-switch button:hover { background: var(--lift); color: var(--text); }
|
|
96
|
+
.locale-switch button:active:not(:disabled) { transform: scale(var(--press)); }
|
|
91
97
|
|
|
92
98
|
body.app {
|
|
93
99
|
display: grid;
|
|
@@ -329,6 +335,19 @@ button {
|
|
|
329
335
|
border: 0;
|
|
330
336
|
border-radius: 999px;
|
|
331
337
|
cursor: pointer;
|
|
338
|
+
transition:
|
|
339
|
+
background-color var(--hover-ms) ease,
|
|
340
|
+
border-color var(--hover-ms) ease,
|
|
341
|
+
color var(--hover-ms) ease,
|
|
342
|
+
transform var(--press-ms) var(--ease-out),
|
|
343
|
+
opacity var(--hover-ms) ease;
|
|
344
|
+
}
|
|
345
|
+
/* :where keeps this weaker than tavern / steel / ghost rules. */
|
|
346
|
+
button:where(:hover):where(:not(:disabled)) {
|
|
347
|
+
background: color-mix(in srgb, var(--paper) 88%, white);
|
|
348
|
+
}
|
|
349
|
+
button:where(:active):where(:not(:disabled)) {
|
|
350
|
+
transform: scale(var(--press));
|
|
332
351
|
}
|
|
333
352
|
button.secondary {
|
|
334
353
|
background: transparent;
|
|
@@ -336,8 +355,12 @@ button.secondary {
|
|
|
336
355
|
border: 1px solid var(--line);
|
|
337
356
|
margin-top: 0.55rem;
|
|
338
357
|
}
|
|
358
|
+
button.secondary:hover:not(:disabled) {
|
|
359
|
+
background: var(--lift);
|
|
360
|
+
color: var(--text);
|
|
361
|
+
}
|
|
339
362
|
button.danger {
|
|
340
|
-
color:
|
|
363
|
+
color: var(--danger);
|
|
341
364
|
border-color: #4a2a2a;
|
|
342
365
|
}
|
|
343
366
|
button:disabled { opacity: 0.45; }
|
|
@@ -503,7 +526,10 @@ button:disabled { opacity: 0.45; }
|
|
|
503
526
|
background: var(--fill);
|
|
504
527
|
color: var(--muted);
|
|
505
528
|
font-size: 0.85rem;
|
|
529
|
+
transition: background-color var(--hover-ms) ease, color var(--hover-ms) ease, transform var(--press-ms) var(--ease-out);
|
|
506
530
|
}
|
|
531
|
+
.chip:hover:not(.on) { color: var(--text); background: var(--lift); }
|
|
532
|
+
.chip:active { transform: scale(var(--press)); }
|
|
507
533
|
.chip.on { background: var(--paper); color: var(--ink); }
|
|
508
534
|
.chip-n {
|
|
509
535
|
opacity: 0.55;
|
|
@@ -527,8 +553,10 @@ button:disabled { opacity: 0.45; }
|
|
|
527
553
|
font: inherit;
|
|
528
554
|
font-size: 0.72rem;
|
|
529
555
|
cursor: pointer;
|
|
556
|
+
transition: background-color var(--hover-ms) ease, color var(--hover-ms) ease, transform var(--press-ms) var(--ease-out);
|
|
530
557
|
}
|
|
531
558
|
.mini-tag:hover { color: var(--text); background: var(--lift); }
|
|
559
|
+
.mini-tag:active { transform: scale(var(--press)); }
|
|
532
560
|
.mini-tag.on { background: var(--paper); color: var(--ink); }
|
|
533
561
|
|
|
534
562
|
.more {
|
|
@@ -632,13 +660,15 @@ a.btn {
|
|
|
632
660
|
margin: 0;
|
|
633
661
|
padding: 0.55rem 0.95rem;
|
|
634
662
|
font-weight: 560;
|
|
635
|
-
color:
|
|
636
|
-
background: var(--
|
|
663
|
+
color: var(--ink);
|
|
664
|
+
background: var(--paper);
|
|
637
665
|
border-radius: 999px;
|
|
638
666
|
text-decoration: none;
|
|
639
667
|
white-space: nowrap;
|
|
668
|
+
transition: background-color var(--hover-ms) ease, transform var(--press-ms) var(--ease-out);
|
|
640
669
|
}
|
|
641
|
-
a.btn:hover { text-decoration: none;
|
|
670
|
+
a.btn:hover { text-decoration: none; background: color-mix(in srgb, var(--paper) 88%, white); }
|
|
671
|
+
a.btn:active { transform: scale(var(--press)); }
|
|
642
672
|
|
|
643
673
|
.lib-card {
|
|
644
674
|
display: grid;
|
|
@@ -913,12 +943,13 @@ a.btn:hover { text-decoration: none; opacity: 0.92; }
|
|
|
913
943
|
font: inherit;
|
|
914
944
|
font-size: 0.86rem;
|
|
915
945
|
cursor: pointer;
|
|
946
|
+
transition: background-color var(--hover-ms) ease, border-color var(--hover-ms) ease, color var(--hover-ms) ease, transform var(--press-ms) var(--ease-out);
|
|
916
947
|
}
|
|
917
|
-
.key-tab:hover { color: var(--text); border-color:
|
|
948
|
+
.key-tab:hover { color: var(--text); border-color: color-mix(in srgb, var(--steel) 45%, var(--line)); background: var(--lift); }
|
|
918
949
|
.key-tab.on {
|
|
919
|
-
background:
|
|
950
|
+
background: var(--lift);
|
|
920
951
|
color: var(--text);
|
|
921
|
-
border-color:
|
|
952
|
+
border-color: color-mix(in srgb, var(--steel) 45%, var(--line));
|
|
922
953
|
}
|
|
923
954
|
.key-tab.add {
|
|
924
955
|
border-style: dashed;
|
|
@@ -927,12 +958,13 @@ a.btn:hover { text-decoration: none; opacity: 0.92; }
|
|
|
927
958
|
}
|
|
928
959
|
.key-tab.add:hover {
|
|
929
960
|
color: var(--text);
|
|
930
|
-
border-color:
|
|
961
|
+
border-color: color-mix(in srgb, var(--steel) 45%, var(--line));
|
|
931
962
|
background: var(--fill);
|
|
932
963
|
}
|
|
964
|
+
.key-tab:active:not(:disabled) { transform: scale(var(--press)); }
|
|
933
965
|
.key-tab:focus { outline: none; }
|
|
934
966
|
.key-tab:focus-visible {
|
|
935
|
-
box-shadow:
|
|
967
|
+
box-shadow: var(--focus);
|
|
936
968
|
}
|
|
937
969
|
.key-tab .badge { margin-left: 0.15rem; }
|
|
938
970
|
dialog.pick.add-provider { width: min(32rem, 92vw); }
|
|
@@ -956,13 +988,13 @@ dialog.pick.add-provider { width: min(32rem, 92vw); }
|
|
|
956
988
|
cursor: pointer;
|
|
957
989
|
}
|
|
958
990
|
.preset-grid button:hover {
|
|
959
|
-
border-color:
|
|
960
|
-
background:
|
|
991
|
+
border-color: color-mix(in srgb, var(--steel) 45%, var(--line));
|
|
992
|
+
background: var(--lift);
|
|
961
993
|
}
|
|
994
|
+
.preset-grid button:active:not(:disabled) { transform: scale(var(--press)); }
|
|
962
995
|
.preset-grid button:focus { outline: none; }
|
|
963
996
|
.preset-grid button:focus-visible {
|
|
964
|
-
|
|
965
|
-
box-shadow: 0 0 0 2px #000, 0 0 0 4px #5a5a5a;
|
|
997
|
+
box-shadow: var(--focus);
|
|
966
998
|
}
|
|
967
999
|
.preset-grid button[data-preset="custom"] { grid-column: 1 / -1; }
|
|
968
1000
|
.preset-grid button .hint {
|
|
@@ -1232,6 +1264,11 @@ body.app.bar-page .shell {
|
|
|
1232
1264
|
cursor: pointer;
|
|
1233
1265
|
}
|
|
1234
1266
|
.rpg-exit:hover { background: #2a3460; }
|
|
1267
|
+
.rpg-npc:hover { background: transparent; }
|
|
1268
|
+
.rpg-exit:active,
|
|
1269
|
+
.rpg-npc:active {
|
|
1270
|
+
transform: none;
|
|
1271
|
+
}
|
|
1235
1272
|
.rpg-dialog {
|
|
1236
1273
|
position: absolute;
|
|
1237
1274
|
left: 3.5%;
|
|
@@ -1282,6 +1319,10 @@ body.app.bar-page .shell {
|
|
|
1282
1319
|
}
|
|
1283
1320
|
.rpg-acts a:hover,
|
|
1284
1321
|
.rpg-acts button:hover { background: #2a3460; text-decoration: none; }
|
|
1322
|
+
.rpg-acts a:active,
|
|
1323
|
+
.rpg-acts button:active {
|
|
1324
|
+
transform: none;
|
|
1325
|
+
}
|
|
1285
1326
|
|
|
1286
1327
|
body.office-page {
|
|
1287
1328
|
background: #1a1714;
|
|
@@ -1504,3 +1545,24 @@ body.office-page {
|
|
|
1504
1545
|
}
|
|
1505
1546
|
.nook { flex-direction: row; justify-content: center; gap: 2rem; min-height: 64px; }
|
|
1506
1547
|
}
|
|
1548
|
+
|
|
1549
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1550
|
+
button,
|
|
1551
|
+
.chip,
|
|
1552
|
+
.mini-tag,
|
|
1553
|
+
a.btn,
|
|
1554
|
+
.key-tab,
|
|
1555
|
+
.preset-grid button,
|
|
1556
|
+
.locale-switch button {
|
|
1557
|
+
transition: none;
|
|
1558
|
+
}
|
|
1559
|
+
button:active:not(:disabled),
|
|
1560
|
+
.chip:active,
|
|
1561
|
+
.mini-tag:active,
|
|
1562
|
+
a.btn:active,
|
|
1563
|
+
.key-tab:active,
|
|
1564
|
+
.preset-grid button:active,
|
|
1565
|
+
.locale-switch button:active {
|
|
1566
|
+
transform: none;
|
|
1567
|
+
}
|
|
1568
|
+
}
|