@scrawl-board/board 0.1.0-beta.1 → 0.1.0-beta.11
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 +8 -0
- package/README.md +11 -5
- package/dist/Inter-OFL.txt +92 -0
- package/dist/browser.d.ts +1313 -36
- package/dist/browser.js +10735 -35993
- package/dist/core.d.ts +1361 -38
- package/dist/core.js +2969 -91
- package/dist/index.d.ts +2176 -63
- package/dist/index.js +15305 -37465
- package/dist/local.d.ts +518 -0
- package/dist/local.js +342 -0
- package/dist/react.d.ts +1534 -42
- package/dist/react.js +18236 -40738
- package/dist/styles.css +914 -64
- package/package.json +17 -3
package/dist/styles.css
CHANGED
|
@@ -6,7 +6,11 @@
|
|
|
6
6
|
--scrawl-color-text: #1c1c1a;
|
|
7
7
|
--scrawl-color-text-muted: #62625c;
|
|
8
8
|
--scrawl-color-edge: #d4d4cc;
|
|
9
|
-
|
|
9
|
+
/* Light outline for floating chrome — the edge colour, softened toward the
|
|
10
|
+
surface so panels read as separate without heavy lines. */
|
|
11
|
+
--scrawl-color-chrome-border: color-mix(in srgb, var(--scrawl-color-edge) 60%, var(--scrawl-color-surface));
|
|
12
|
+
--scrawl-color-focus: #2563eb;
|
|
13
|
+
--scrawl-color-primary: #1856a3;
|
|
10
14
|
--scrawl-color-selection: #d9e8f7;
|
|
11
15
|
--scrawl-color-danger: #a3302b;
|
|
12
16
|
--scrawl-color-warning: #805400;
|
|
@@ -18,9 +22,9 @@
|
|
|
18
22
|
--scrawl-font-weight-strong: 650;
|
|
19
23
|
--scrawl-radius-control: 6px;
|
|
20
24
|
--scrawl-radius-panel: 10px;
|
|
21
|
-
--scrawl-elevation-low:
|
|
22
|
-
--scrawl-elevation-high:
|
|
23
|
-
--scrawl-motion-duration:
|
|
25
|
+
--scrawl-elevation-low: none;
|
|
26
|
+
--scrawl-elevation-high: none;
|
|
27
|
+
--scrawl-motion-duration: 0ms;
|
|
24
28
|
--scrawl-motion-easing: cubic-bezier(0.2, 0, 0, 1);
|
|
25
29
|
--scrawl-density: comfortable;
|
|
26
30
|
box-sizing: border-box;
|
|
@@ -56,8 +60,9 @@
|
|
|
56
60
|
[data-scrawl-portal] button, [data-scrawl-portal] [role="button"] { min-block-size: 44px; min-inline-size: 44px; }
|
|
57
61
|
|
|
58
62
|
[data-scrawl-root] :focus-visible, [data-scrawl-portal] :focus-visible {
|
|
59
|
-
outline:
|
|
60
|
-
|
|
63
|
+
outline: none;
|
|
64
|
+
background-color: var(--scrawl-color-selection);
|
|
65
|
+
outline-offset: 0;
|
|
61
66
|
}
|
|
62
67
|
|
|
63
68
|
[data-scrawl-root] [data-scrawl-canvas], [data-scrawl-root] .scrawl-board__content {
|
|
@@ -102,10 +107,12 @@
|
|
|
102
107
|
[data-scrawl-root] .scrawl-board__actions,
|
|
103
108
|
[data-scrawl-root] .scrawl-board__tools,
|
|
104
109
|
[data-scrawl-root] .scrawl-board__view,
|
|
110
|
+
[data-scrawl-root] .scrawl-board__ink-bar,
|
|
111
|
+
[data-scrawl-root] .scrawl-board__more-tools,
|
|
105
112
|
[data-scrawl-root] .scrawl-board__style-shelf {
|
|
106
113
|
align-items: center;
|
|
107
|
-
background: var(--scrawl-color-surface
|
|
108
|
-
border:
|
|
114
|
+
background: var(--scrawl-color-surface);
|
|
115
|
+
border: 0;
|
|
109
116
|
border-radius: var(--scrawl-radius-panel);
|
|
110
117
|
display: flex;
|
|
111
118
|
gap: 2px;
|
|
@@ -114,21 +121,115 @@
|
|
|
114
121
|
position: absolute;
|
|
115
122
|
}
|
|
116
123
|
|
|
117
|
-
[data-scrawl-root] .scrawl-board__actions { inset-block-start: 12px; inset-inline-end: 12px; }
|
|
118
|
-
[data-scrawl-root] .scrawl-board__tools {
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
124
|
+
[data-scrawl-root] .scrawl-board__actions { inset-block-start: var(--scrawl-chrome-inset, 12px); inset-inline-end: var(--scrawl-chrome-inset, 12px); box-shadow: var(--scrawl-float-shadow, none); }
|
|
125
|
+
[data-scrawl-root] .scrawl-board__tools {
|
|
126
|
+
inset-block-start: 50%;
|
|
127
|
+
/* Clears the sidebar when it's open (0 otherwise). */
|
|
128
|
+
inset-inline-start: calc(var(--scrawl-sidebar-width, 0px) + var(--scrawl-chrome-inset, 12px));
|
|
129
|
+
inline-size: 54px;
|
|
130
|
+
/* Room for the top and bottom chrome, but never so short it disappears in a short embed (it scrolls). */
|
|
131
|
+
max-block-size: max(96px, calc(100% - 200px));
|
|
132
|
+
overflow-y: auto;
|
|
133
|
+
flex-direction: column;
|
|
134
|
+
transform: translateY(-50%);
|
|
135
|
+
box-shadow: var(--scrawl-float-shadow, var(--scrawl-elevation-low));
|
|
136
|
+
}
|
|
137
|
+
[data-scrawl-root] .scrawl-board__tools > button { flex: 0 0 44px; inline-size: 44px; }
|
|
138
|
+
[data-scrawl-root] .scrawl-board__tools button,
|
|
139
|
+
[data-scrawl-root] .scrawl-board__more-tools button { display: flex; align-items: center; justify-content: center; }
|
|
140
|
+
[data-scrawl-root] .scrawl-board__tools svg,
|
|
141
|
+
[data-scrawl-root] .scrawl-board__more-tools svg { display: block; inline-size: 22px; block-size: 22px; }
|
|
142
|
+
[data-scrawl-root] .scrawl-board__tools .scrawl-board__ink-sample { margin: 0; }
|
|
143
|
+
[data-scrawl-root] .scrawl-board__tools :focus-visible,
|
|
144
|
+
[data-scrawl-root] .scrawl-board__more-tools :focus-visible,
|
|
145
|
+
[data-scrawl-root] .scrawl-board__style-shelf :focus-visible { outline-offset: -3px; }
|
|
146
|
+
[data-scrawl-root] .scrawl-board__view { inset-block-end: var(--scrawl-chrome-inset, 12px); inset-inline-end: var(--scrawl-chrome-inset, 12px); box-shadow: var(--scrawl-float-shadow, none); }
|
|
147
|
+
[data-scrawl-root] .scrawl-board__ink-bar {
|
|
148
|
+
inset-block-end: var(--scrawl-chrome-inset, 12px);
|
|
123
149
|
inset-inline-start: 50%;
|
|
124
|
-
max-inline-size: calc(100% - 24px);
|
|
125
|
-
overflow-x: auto;
|
|
126
150
|
transform: translateX(-50%);
|
|
151
|
+
box-shadow: var(--scrawl-elevation-low);
|
|
152
|
+
}
|
|
153
|
+
[data-scrawl-root] .scrawl-board__more-tools,
|
|
154
|
+
[data-scrawl-root] .scrawl-board__style-shelf {
|
|
155
|
+
inset-inline-start: 78px;
|
|
156
|
+
inset-block-start: 72px;
|
|
157
|
+
inline-size: 106px;
|
|
158
|
+
max-block-size: calc(100% - 84px);
|
|
159
|
+
overflow-y: auto;
|
|
160
|
+
box-shadow: var(--scrawl-elevation-low);
|
|
127
161
|
}
|
|
162
|
+
[data-scrawl-root] .scrawl-board__more-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
|
|
163
|
+
[data-scrawl-root] .scrawl-board__style-shelf .scrawl-board__style-group {
|
|
164
|
+
display: grid;
|
|
165
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
166
|
+
gap: 4px;
|
|
167
|
+
inline-size: 100%;
|
|
168
|
+
white-space: normal;
|
|
169
|
+
}
|
|
170
|
+
[data-scrawl-root] .scrawl-board__style-shelf .scrawl-board__style-group > span { grid-column: 1 / -1; text-align: center; }
|
|
171
|
+
[data-scrawl-root] .scrawl-board__style-shelf .scrawl-board__style-group button { padding: 4px; font-size: 12px; }
|
|
128
172
|
[data-scrawl-root] .scrawl-board__style-group { align-items: center; display: flex; gap: 6px; white-space: nowrap; }
|
|
129
173
|
[data-scrawl-root] .scrawl-board__style-group > span:first-child { color: var(--scrawl-color-text-muted); font-size: 0.75rem; font-weight: var(--scrawl-font-weight-strong); text-transform: uppercase; }
|
|
130
174
|
[data-scrawl-root] .scrawl-board__style-group button { align-items: center; display: flex; justify-content: center; padding: 6px 10px; }
|
|
131
|
-
[data-scrawl-root] .scrawl-board__style-group button span[aria-hidden] { block-size:
|
|
175
|
+
[data-scrawl-root] .scrawl-board__style-group button span[aria-hidden] { block-size: 22px; border-radius: 2px; inline-size: 26px; }
|
|
176
|
+
/* Eraser sizes preview the (round) brush itself, not a colour. */
|
|
177
|
+
[data-scrawl-root] .scrawl-board__style-group[aria-label="Eraser size"] button span[aria-hidden] { border-radius: 50%; }
|
|
178
|
+
|
|
179
|
+
/*
|
|
180
|
+
* Fixed, not absolute: `screenPosition` (BoardSnapshot.focusedItem) is
|
|
181
|
+
* computed from the canvas's own getBoundingClientRect, i.e. viewport
|
|
182
|
+
* coordinates — matching `position: fixed` is what keeps this toolbar
|
|
183
|
+
* glued to the focused object regardless of where [data-scrawl-root] sits
|
|
184
|
+
* on the page, the same contract every other consumer of `boardToScreen`
|
|
185
|
+
* already relies on.
|
|
186
|
+
*/
|
|
187
|
+
[data-scrawl-root] .scrawl-board__focus-toolbar {
|
|
188
|
+
align-items: center;
|
|
189
|
+
background: var(--scrawl-color-surface-raised);
|
|
190
|
+
border: 0;
|
|
191
|
+
border-radius: var(--scrawl-radius-panel);
|
|
192
|
+
box-shadow: var(--scrawl-elevation-low);
|
|
193
|
+
display: flex;
|
|
194
|
+
gap: 4px;
|
|
195
|
+
max-inline-size: calc(100vw - 24px);
|
|
196
|
+
overflow: visible;
|
|
197
|
+
padding: 4px;
|
|
198
|
+
pointer-events: auto;
|
|
199
|
+
position: fixed;
|
|
200
|
+
transform: none;
|
|
201
|
+
z-index: 15;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
/* Notes have no gizmo of their own (it's ink-stroke/shape-only) — this is
|
|
205
|
+
that capability's default-ui-owned equivalent, visually matching the
|
|
206
|
+
gizmo's own restyle (spaced sharp-cornered outline, circular handles,
|
|
207
|
+
GAP_PX outset) — see renderer/selection/gizmo.ts's LineLoop outline. */
|
|
208
|
+
[data-scrawl-root] .scrawl-board__focus-outline {
|
|
209
|
+
display: none;
|
|
210
|
+
border: 0;
|
|
211
|
+
border-radius: 0;
|
|
212
|
+
pointer-events: none;
|
|
213
|
+
position: fixed;
|
|
214
|
+
z-index: 12;
|
|
215
|
+
}
|
|
216
|
+
[data-scrawl-root] .scrawl-board__focus-outline[data-locked="true"] { border-color: var(--scrawl-color-warning); }
|
|
217
|
+
|
|
218
|
+
[data-scrawl-root] .scrawl-board__focus-handle {
|
|
219
|
+
background: var(--scrawl-color-focus);
|
|
220
|
+
block-size: 8px;
|
|
221
|
+
border: 0;
|
|
222
|
+
border-radius: 50%;
|
|
223
|
+
box-shadow: var(--scrawl-elevation-low);
|
|
224
|
+
inline-size: 8px;
|
|
225
|
+
pointer-events: auto;
|
|
226
|
+
position: fixed;
|
|
227
|
+
touch-action: none;
|
|
228
|
+
transform: translate(-50%, -50%);
|
|
229
|
+
z-index: 16;
|
|
230
|
+
}
|
|
231
|
+
[data-scrawl-root] .scrawl-board__focus-handle[data-orientation="nwse"] { cursor: nwse-resize; }
|
|
232
|
+
[data-scrawl-root] .scrawl-board__focus-handle[data-orientation="nesw"] { cursor: nesw-resize; }
|
|
132
233
|
|
|
133
234
|
[data-scrawl-root] [data-scrawl-default-ui] button,
|
|
134
235
|
[data-scrawl-root] [data-scrawl-default-ui] select,
|
|
@@ -151,48 +252,251 @@
|
|
|
151
252
|
|
|
152
253
|
[data-scrawl-root] [data-scrawl-default-ui] button[aria-pressed="true"],
|
|
153
254
|
[data-scrawl-portal] .scrawl-board__panel button[aria-pressed="true"] {
|
|
154
|
-
background: var(--scrawl-color-
|
|
255
|
+
background: color-mix(in srgb, var(--scrawl-color-primary), var(--scrawl-color-surface) 82%);
|
|
256
|
+
color: var(--scrawl-color-primary);
|
|
155
257
|
font-weight: var(--scrawl-font-weight-strong);
|
|
156
258
|
}
|
|
157
259
|
|
|
158
260
|
[data-scrawl-root] [data-scrawl-default-ui] button:disabled,
|
|
159
261
|
[data-scrawl-root] [data-scrawl-default-ui] select:disabled { color: var(--scrawl-color-text-muted); cursor: not-allowed; }
|
|
160
262
|
|
|
161
|
-
|
|
162
|
-
|
|
263
|
+
/* Colour swatches are small rectangles, matching the sticky-note swatches. */
|
|
264
|
+
[data-scrawl-root] .scrawl-board__ink-sample,
|
|
265
|
+
[data-scrawl-portal] .scrawl-board__ink-options span {
|
|
266
|
+
border: 0;
|
|
267
|
+
border-radius: 2px;
|
|
268
|
+
block-size: 22px;
|
|
269
|
+
display: inline-block;
|
|
270
|
+
inline-size: 26px;
|
|
271
|
+
margin-inline-end: 6px;
|
|
272
|
+
vertical-align: middle;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
/* Board actions: search that grows inline, a divider, then export and Share. */
|
|
276
|
+
[data-scrawl-root] .scrawl-board__actions { gap: 0; padding: 6px; }
|
|
277
|
+
[data-scrawl-root] .scrawl-board__actions > button,
|
|
278
|
+
[data-scrawl-root] .scrawl-board__search > button { min-block-size: 44px; min-inline-size: 44px; display: flex; align-items: center; justify-content: center; }
|
|
279
|
+
[data-scrawl-root] .scrawl-board__actions > button svg,
|
|
280
|
+
[data-scrawl-root] .scrawl-board__search > button svg { inline-size: 19px; block-size: 19px; }
|
|
281
|
+
[data-scrawl-root] .scrawl-board__actions-divider { align-self: stretch; inline-size: 1px; flex: none; margin: 6px 4px; background: var(--scrawl-color-chrome-border); }
|
|
282
|
+
[data-scrawl-root] .scrawl-board__search { position: relative; display: flex; align-items: center; }
|
|
283
|
+
[data-scrawl-root] .scrawl-board__search-input {
|
|
284
|
+
inline-size: 0;
|
|
285
|
+
min-inline-size: 0;
|
|
286
|
+
visibility: hidden;
|
|
287
|
+
padding: 0;
|
|
288
|
+
border: 0;
|
|
289
|
+
background: transparent;
|
|
290
|
+
color: var(--scrawl-color-text);
|
|
291
|
+
font: inherit;
|
|
292
|
+
font-size: 14px;
|
|
293
|
+
outline: none;
|
|
294
|
+
transition: inline-size var(--scrawl-sidebar-motion, 200ms) var(--scrawl-sidebar-easing, ease), visibility 0s linear var(--scrawl-sidebar-motion, 200ms);
|
|
295
|
+
}
|
|
296
|
+
[data-scrawl-root] .scrawl-board__search[data-open] .scrawl-board__search-input { inline-size: min(190px, 40cqw); visibility: visible; padding-inline: 4px 8px; transition: inline-size var(--scrawl-sidebar-motion, 200ms) var(--scrawl-sidebar-easing, ease), visibility 0s; }
|
|
297
|
+
[data-scrawl-root] .scrawl-board__search[data-open] > button { background: var(--scrawl-color-surface-raised); color: var(--scrawl-color-text); }
|
|
298
|
+
[data-scrawl-root] .scrawl-board__search-results {
|
|
299
|
+
position: absolute;
|
|
300
|
+
inset-block-start: calc(100% + 12px);
|
|
301
|
+
inset-inline-start: -6px;
|
|
302
|
+
inline-size: 300px;
|
|
303
|
+
max-inline-size: calc(100cqw - 40px);
|
|
304
|
+
max-block-size: 320px;
|
|
305
|
+
overflow-y: auto;
|
|
306
|
+
padding: 6px;
|
|
307
|
+
background: var(--scrawl-color-surface);
|
|
308
|
+
border: 1px solid var(--scrawl-color-chrome-border);
|
|
309
|
+
border-radius: var(--scrawl-radius-panel);
|
|
310
|
+
box-shadow: var(--scrawl-pop-shadow, none);
|
|
311
|
+
}
|
|
312
|
+
[data-scrawl-root] .scrawl-board__search-results p { margin: 8px 10px; color: var(--scrawl-color-text-muted); font-size: 13px; }
|
|
313
|
+
[data-scrawl-root] .scrawl-board__search-results button { display: grid; gap: 2px; inline-size: 100%; padding: 8px 10px; border-radius: var(--scrawl-radius-control); text-align: start; }
|
|
314
|
+
[data-scrawl-root] .scrawl-board__search-results strong { font-size: 14px; }
|
|
315
|
+
[data-scrawl-root] .scrawl-board__search-results span { color: var(--scrawl-color-text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
316
|
+
[data-scrawl-root] [data-scrawl-default-ui] .scrawl-board__share {
|
|
163
317
|
display: flex;
|
|
318
|
+
align-items: center;
|
|
319
|
+
gap: 7px;
|
|
164
320
|
min-block-size: 44px;
|
|
321
|
+
margin-inline-start: 4px;
|
|
322
|
+
padding: 0 14px;
|
|
323
|
+
border-radius: var(--scrawl-radius-panel);
|
|
324
|
+
background: var(--scrawl-color-primary);
|
|
325
|
+
color: var(--scrawl-color-surface);
|
|
326
|
+
font-size: 14px;
|
|
327
|
+
font-weight: 600;
|
|
165
328
|
}
|
|
329
|
+
[data-scrawl-root] [data-scrawl-default-ui] .scrawl-board__share:hover { background: color-mix(in srgb, var(--scrawl-color-primary) 85%, #000); }
|
|
330
|
+
[data-scrawl-root] .scrawl-board__share svg { inline-size: 16px; block-size: 16px; }
|
|
166
331
|
|
|
167
|
-
|
|
168
|
-
[data-scrawl-root] .scrawl-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
332
|
+
/* Header actions: the tool cluster and a separate primary Share button. */
|
|
333
|
+
[data-scrawl-root] .scrawl-board__topbar {
|
|
334
|
+
position: absolute;
|
|
335
|
+
inset-block-start: var(--scrawl-chrome-inset, 12px);
|
|
336
|
+
inset-inline: var(--scrawl-chrome-inset, 12px);
|
|
337
|
+
z-index: 41;
|
|
338
|
+
display: flex;
|
|
339
|
+
align-items: center;
|
|
340
|
+
gap: 12px;
|
|
341
|
+
pointer-events: none;
|
|
342
|
+
}
|
|
343
|
+
[data-scrawl-root] .scrawl-board__navigator { display: flex; flex: 0 1 auto; align-items: center; gap: 4px; min-inline-size: 0; }
|
|
344
|
+
[data-scrawl-root] .scrawl-board__header-actions {
|
|
345
|
+
position: relative;
|
|
346
|
+
display: flex;
|
|
347
|
+
flex: none;
|
|
348
|
+
/* Share stretches to the toolbar's height so the two line up. */
|
|
349
|
+
align-items: stretch;
|
|
350
|
+
gap: 10px;
|
|
351
|
+
margin-inline-start: auto;
|
|
352
|
+
pointer-events: none;
|
|
353
|
+
}
|
|
354
|
+
[data-scrawl-root] .scrawl-board__header-actions > * { pointer-events: auto; }
|
|
355
|
+
[data-scrawl-root] .scrawl-board__header-actions > .scrawl-board__actions { position: relative; inset: auto; }
|
|
356
|
+
[data-scrawl-root] [data-scrawl-default-ui] .scrawl-board__header-actions > .scrawl-board__share { box-shadow: var(--scrawl-float-shadow, none); margin: 0; min-block-size: 0; }
|
|
357
|
+
[data-scrawl-root] .scrawl-board__header-actions > .scrawl-board__actions { padding-block: 0; }
|
|
358
|
+
[data-scrawl-root] .scrawl-board__actions > button { position: relative; }
|
|
359
|
+
[data-scrawl-root] [data-scrawl-default-ui] .scrawl-board__actions > button[aria-expanded="true"] { background: var(--scrawl-accent-soft, var(--scrawl-color-selection)); color: var(--scrawl-color-primary); }
|
|
360
|
+
/* Unread count on a header button. */
|
|
361
|
+
[data-scrawl-root] .scrawl-board__badge {
|
|
362
|
+
position: absolute;
|
|
363
|
+
inset-block-start: 4px;
|
|
364
|
+
inset-inline-end: 4px;
|
|
365
|
+
min-inline-size: 16px;
|
|
366
|
+
block-size: 16px;
|
|
367
|
+
padding: 0 4px;
|
|
368
|
+
border-radius: 999px;
|
|
369
|
+
background: var(--scrawl-color-primary);
|
|
370
|
+
color: var(--scrawl-color-surface);
|
|
371
|
+
font-size: 10px;
|
|
372
|
+
font-weight: 700;
|
|
373
|
+
line-height: 16px;
|
|
374
|
+
text-align: center;
|
|
183
375
|
}
|
|
184
376
|
|
|
185
|
-
|
|
186
|
-
[data-scrawl-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
377
|
+
/* ⋮ menu. */
|
|
378
|
+
[data-scrawl-root] .scrawl-board__more-menu {
|
|
379
|
+
position: absolute;
|
|
380
|
+
inset-block-start: calc(100% + 8px);
|
|
381
|
+
inset-inline-end: 0;
|
|
382
|
+
z-index: 43;
|
|
383
|
+
display: flex;
|
|
384
|
+
flex-direction: column;
|
|
385
|
+
min-inline-size: 230px;
|
|
386
|
+
padding: 6px;
|
|
387
|
+
background: var(--scrawl-color-surface);
|
|
388
|
+
border: 1px solid var(--scrawl-color-chrome-border);
|
|
389
|
+
border-radius: var(--scrawl-radius-panel);
|
|
390
|
+
box-shadow: var(--scrawl-pop-shadow, none);
|
|
391
|
+
}
|
|
392
|
+
[data-scrawl-root] [data-scrawl-default-ui] .scrawl-board__more-menu button { display: flex; align-items: center; gap: 10px; min-block-size: 44px; padding: 0 10px; border-radius: var(--scrawl-radius-control); font-size: 14px; text-align: start; }
|
|
393
|
+
[data-scrawl-root] .scrawl-board__more-menu svg { inline-size: 16px; block-size: 16px; color: var(--scrawl-color-text-muted); }
|
|
394
|
+
[data-scrawl-root] .scrawl-board__menu-icon-space { display: inline-block; inline-size: 16px; }
|
|
395
|
+
|
|
396
|
+
/* Drawers: a floating panel under the header, right-aligned. */
|
|
397
|
+
[data-scrawl-root] .scrawl-board__drawer {
|
|
398
|
+
position: absolute;
|
|
399
|
+
inset-block-start: calc(var(--scrawl-chrome-inset, 12px) + 66px);
|
|
400
|
+
inset-inline-end: var(--scrawl-chrome-inset, 12px);
|
|
401
|
+
z-index: 42;
|
|
402
|
+
display: flex;
|
|
403
|
+
flex-direction: column;
|
|
404
|
+
inline-size: min(380px, calc(100% - 40px));
|
|
405
|
+
max-block-size: min(580px, calc(100% - 110px));
|
|
406
|
+
background: var(--scrawl-color-surface);
|
|
407
|
+
border: 1px solid var(--scrawl-color-chrome-border);
|
|
408
|
+
border-radius: var(--scrawl-radius-panel);
|
|
409
|
+
box-shadow: var(--scrawl-pop-shadow, none);
|
|
410
|
+
color: var(--scrawl-color-text);
|
|
411
|
+
pointer-events: auto;
|
|
412
|
+
}
|
|
413
|
+
/* Focus parks on the drawer itself after Save; its controls keep their own rings. */
|
|
414
|
+
[data-scrawl-root] .scrawl-board__drawer:focus { outline: none; }
|
|
415
|
+
[data-scrawl-root] .scrawl-board__drawer-header { display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 16px; border-block-end: 1px solid var(--scrawl-color-chrome-border); }
|
|
416
|
+
[data-scrawl-root] .scrawl-board__drawer-icon { display: grid; place-items: center; inline-size: 32px; block-size: 32px; flex: none; border-radius: 10px; background: var(--scrawl-accent-soft, var(--scrawl-color-selection)); color: var(--scrawl-color-primary); }
|
|
417
|
+
[data-scrawl-root] .scrawl-board__drawer-icon svg { inline-size: 17px; block-size: 17px; }
|
|
418
|
+
[data-scrawl-root] .scrawl-board__drawer-titles { flex: 1; min-inline-size: 0; }
|
|
419
|
+
[data-scrawl-root] .scrawl-board__drawer-titles h2 { margin: 0; font-size: 15px; font-weight: 600; }
|
|
420
|
+
[data-scrawl-root] .scrawl-board__drawer-titles p { margin: 2px 0 0; color: var(--scrawl-color-text-muted); font-size: 12px; }
|
|
421
|
+
[data-scrawl-root] [data-scrawl-default-ui] .scrawl-board__drawer-link { min-block-size: 44px; padding: 0 8px; color: var(--scrawl-color-primary); font-size: 13px; font-weight: 600; white-space: nowrap; }
|
|
422
|
+
[data-scrawl-root] [data-scrawl-default-ui] .scrawl-board__drawer-link:disabled { color: var(--scrawl-color-text-muted); cursor: default; }
|
|
423
|
+
[data-scrawl-root] .scrawl-board__drawer-close { min-inline-size: 44px; min-block-size: 44px; display: grid; place-items: center; }
|
|
424
|
+
[data-scrawl-root] .scrawl-board__drawer-close svg { inline-size: 18px; block-size: 18px; }
|
|
425
|
+
[data-scrawl-root] .scrawl-board__drawer-body { flex: 1; min-block-size: 0; overflow-y: auto; padding: 8px; }
|
|
426
|
+
[data-scrawl-root] .scrawl-board__drawer-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-block-start: 1px solid var(--scrawl-color-chrome-border); color: var(--scrawl-color-text-muted); font-size: 12px; }
|
|
427
|
+
[data-scrawl-root] .scrawl-board__drawer-empty { display: grid; justify-items: center; gap: 6px; padding: 40px 24px; color: var(--scrawl-color-text-muted); text-align: center; }
|
|
428
|
+
[data-scrawl-root] .scrawl-board__drawer-empty > span { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 50%; background: var(--scrawl-color-surface-raised); }
|
|
429
|
+
[data-scrawl-root] .scrawl-board__drawer-empty p { margin: 0; font-size: 13px; }
|
|
430
|
+
[data-scrawl-root] .scrawl-board__drawer-empty .scrawl-board__drawer-empty-title { color: var(--scrawl-color-text); font-size: 14px; font-weight: 600; }
|
|
431
|
+
[data-scrawl-root] .scrawl-board__drawer-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
|
|
432
|
+
[data-scrawl-root] [data-scrawl-default-ui] .scrawl-board__drawer-row { display: flex; align-items: flex-start; gap: 12px; inline-size: 100%; min-block-size: 44px; padding: 10px; border-radius: var(--scrawl-radius-control); text-align: start; }
|
|
433
|
+
[data-scrawl-root] [data-scrawl-default-ui] button.scrawl-board__drawer-row:hover { background: var(--scrawl-color-surface-raised); }
|
|
434
|
+
[data-scrawl-root] .scrawl-board__drawer-row-text { display: grid; gap: 2px; min-inline-size: 0; }
|
|
435
|
+
[data-scrawl-root] .scrawl-board__drawer-row-text strong { font-size: 14px; font-weight: 600; }
|
|
436
|
+
[data-scrawl-root] .scrawl-board__drawer-row-text > span { color: var(--scrawl-color-text-muted); font-size: 13px; overflow-wrap: anywhere; }
|
|
437
|
+
[data-scrawl-root] .scrawl-board__drawer-row-text small { color: var(--scrawl-color-text-muted); font-size: 12px; }
|
|
438
|
+
[data-scrawl-root] .scrawl-board__drawer-row .scrawl-board__comment-avatar { display: grid; place-items: center; inline-size: 28px; block-size: 28px; flex: none; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 700; }
|
|
439
|
+
[data-scrawl-root] .scrawl-board__timeline-icon { display: grid; place-items: center; inline-size: 30px; block-size: 30px; flex: none; border-radius: 50%; background: var(--scrawl-color-surface-raised); color: var(--scrawl-color-text-muted); }
|
|
440
|
+
[data-scrawl-root] .scrawl-board__timeline-icon svg { inline-size: 15px; block-size: 15px; }
|
|
441
|
+
[data-scrawl-root] .scrawl-board__timeline-icon[data-kind="added"] { background: color-mix(in srgb, var(--scrawl-color-success) 14%, var(--scrawl-color-surface)); color: var(--scrawl-color-success); }
|
|
442
|
+
[data-scrawl-root] .scrawl-board__timeline-icon[data-kind="removed"] { background: color-mix(in srgb, var(--scrawl-color-danger) 14%, var(--scrawl-color-surface)); color: var(--scrawl-color-danger); }
|
|
443
|
+
[data-scrawl-root] .scrawl-board__drawer-status { font-size: 13px; }
|
|
444
|
+
[data-scrawl-root] .scrawl-board__drawer-status[data-kind="saved"] { color: var(--scrawl-color-success); font-weight: 600; }
|
|
445
|
+
[data-scrawl-root] .scrawl-board__drawer-status[data-kind="error"] { color: var(--scrawl-color-danger); }
|
|
446
|
+
[data-scrawl-root] [data-scrawl-default-ui] .scrawl-board__drawer-primary { min-block-size: 44px; padding: 0 16px; border-radius: var(--scrawl-radius-panel); background: var(--scrawl-color-primary); color: var(--scrawl-color-surface); font-size: 14px; font-weight: 600; }
|
|
447
|
+
[data-scrawl-root] [data-scrawl-default-ui] .scrawl-board__drawer-primary:disabled { background: var(--scrawl-color-surface-muted); color: var(--scrawl-color-text-muted); cursor: default; }
|
|
448
|
+
|
|
449
|
+
/* Permissions. */
|
|
450
|
+
[data-scrawl-root] .scrawl-board__role-legend { display: grid; gap: 6px; margin: 4px 4px 12px; padding: 10px 12px; border-radius: var(--scrawl-radius-control); background: var(--scrawl-color-surface-raised); font-size: 12px; }
|
|
451
|
+
[data-scrawl-root] .scrawl-board__role-legend div { display: flex; gap: 6px; }
|
|
452
|
+
[data-scrawl-root] .scrawl-board__role-legend dt { font-weight: 600; white-space: nowrap; }
|
|
453
|
+
[data-scrawl-root] .scrawl-board__role-legend dd { margin: 0; color: var(--scrawl-color-text-muted); }
|
|
454
|
+
[data-scrawl-root] .scrawl-board__member-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0 4px; list-style: none; }
|
|
455
|
+
[data-scrawl-root] .scrawl-board__member { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 12px; padding: 12px; border: 1px solid var(--scrawl-color-chrome-border); border-radius: var(--scrawl-radius-panel); }
|
|
456
|
+
[data-scrawl-root] .scrawl-board__member-avatar { display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 50%; background: var(--scrawl-accent-soft, var(--scrawl-color-selection)); color: var(--scrawl-color-primary); font-size: 13px; font-weight: 700; object-fit: cover; }
|
|
457
|
+
[data-scrawl-root] .scrawl-board__member-info p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; }
|
|
458
|
+
[data-scrawl-root] .scrawl-board__member-you { color: var(--scrawl-color-text-muted); font-weight: 400; }
|
|
459
|
+
[data-scrawl-root] .scrawl-board__member-status { padding: 1px 8px; border-radius: 999px; background: var(--scrawl-color-surface-raised); color: var(--scrawl-color-text-muted); font-size: 11px; font-weight: 600; }
|
|
460
|
+
[data-scrawl-root] .scrawl-board__member-status[data-online="true"] { background: color-mix(in srgb, var(--scrawl-color-success) 14%, var(--scrawl-color-surface)); color: var(--scrawl-color-success); }
|
|
461
|
+
[data-scrawl-root] .scrawl-board__member-info .scrawl-board__member-email { color: var(--scrawl-color-text-muted); font-size: 12px; overflow-wrap: anywhere; }
|
|
462
|
+
[data-scrawl-root] .scrawl-board__segmented { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3px; border-radius: var(--scrawl-radius-control); background: var(--scrawl-color-surface-raised); }
|
|
463
|
+
[data-scrawl-root] [data-scrawl-default-ui] .scrawl-board__segmented button { min-block-size: 44px; border-radius: 6px; color: var(--scrawl-color-text-muted); font-size: 13px; font-weight: 600; }
|
|
464
|
+
[data-scrawl-root] [data-scrawl-default-ui] .scrawl-board__segmented button[aria-checked="true"] { background: var(--scrawl-color-surface); color: var(--scrawl-color-primary); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
|
|
465
|
+
[data-scrawl-root] [data-scrawl-default-ui] .scrawl-board__segmented button:disabled { cursor: default; }
|
|
466
|
+
|
|
467
|
+
/* Where an activity jump landed: a pin that stays, with a pulse on arrival. */
|
|
468
|
+
[data-scrawl-root] .scrawl-board__jump-pin { position: absolute; z-index: 15; inline-size: 14px; block-size: 14px; border: 3px solid var(--scrawl-color-surface); border-radius: 50%; background: var(--scrawl-color-primary); box-shadow: 0 1px 4px rgb(0 0 0 / .25); transform: translate(-50%, -50%); pointer-events: none; }
|
|
469
|
+
[data-scrawl-root] .scrawl-board__jump-pulse { position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--scrawl-color-primary); animation: scrawl-jump-pulse 900ms ease-out 2 forwards; }
|
|
470
|
+
@keyframes scrawl-jump-pulse {
|
|
471
|
+
from { transform: scale(1); }
|
|
472
|
+
to { transform: scale(3.4); border-color: transparent; }
|
|
473
|
+
}
|
|
474
|
+
@media (prefers-reduced-motion: reduce) {
|
|
475
|
+
[data-scrawl-root] .scrawl-board__jump-pulse { animation: none; visibility: hidden; }
|
|
476
|
+
}
|
|
477
|
+
|
|
478
|
+
/* Narrow boards: drawers become bottom sheets. */
|
|
479
|
+
@container (max-width: 640px) {
|
|
480
|
+
[data-scrawl-root] .scrawl-board__drawer {
|
|
481
|
+
inset-block: auto 0;
|
|
482
|
+
inset-inline: 0;
|
|
483
|
+
inline-size: auto;
|
|
484
|
+
max-block-size: 75%;
|
|
485
|
+
border-radius: var(--scrawl-radius-panel) var(--scrawl-radius-panel) 0 0;
|
|
486
|
+
border-block-end: 0;
|
|
487
|
+
}
|
|
488
|
+
[data-scrawl-root] .scrawl-board__header-actions { gap: 6px; }
|
|
489
|
+
[data-scrawl-root] [data-scrawl-default-ui] .scrawl-board__share > span { display: none; }
|
|
194
490
|
}
|
|
195
491
|
|
|
492
|
+
/* The search field's own clear button is the browser's, not ours. */
|
|
493
|
+
[data-scrawl-root] .scrawl-board__search-input::-webkit-search-cancel-button { appearance: none; }
|
|
494
|
+
/* Export opens as a menu under its button. */
|
|
495
|
+
[data-scrawl-portal] .scrawl-board__panel[data-anchor="actions"] { background: var(--scrawl-color-surface); padding: 6px; }
|
|
496
|
+
[data-scrawl-portal] .scrawl-board__export-options { display: flex; flex-direction: column; gap: 2px; }
|
|
497
|
+
[data-scrawl-portal] .scrawl-board__export-options button { display: flex; align-items: center; gap: 9px; inline-size: 100%; min-block-size: 44px; padding: 0 10px; border-radius: var(--scrawl-radius-control); font-size: 14px; text-align: start; }
|
|
498
|
+
[data-scrawl-portal] .scrawl-board__export-options svg { inline-size: 15px; block-size: 15px; flex: none; color: var(--scrawl-color-text-muted); }
|
|
499
|
+
|
|
196
500
|
[data-scrawl-root] .scrawl-board__file-input { block-size: 1px; clip: rect(0, 0, 0, 0); inline-size: 1px; overflow: hidden; position: absolute; }
|
|
197
501
|
|
|
198
502
|
[data-scrawl-portal] .scrawl-board__modal-layer {
|
|
@@ -204,7 +508,7 @@
|
|
|
204
508
|
|
|
205
509
|
[data-scrawl-portal] .scrawl-board__panel {
|
|
206
510
|
background: var(--scrawl-color-surface-raised);
|
|
207
|
-
border:
|
|
511
|
+
border: 0;
|
|
208
512
|
border-radius: var(--scrawl-radius-panel);
|
|
209
513
|
box-shadow: var(--scrawl-elevation-high);
|
|
210
514
|
color: var(--scrawl-color-text);
|
|
@@ -220,25 +524,40 @@
|
|
|
220
524
|
z-index: 1;
|
|
221
525
|
}
|
|
222
526
|
|
|
527
|
+
/* Search and Export open under their buttons in the top-right. */
|
|
528
|
+
[data-scrawl-portal] .scrawl-board__panel[data-anchor="actions"] {
|
|
529
|
+
inset-block: 72px auto;
|
|
530
|
+
inset-inline: auto 12px;
|
|
531
|
+
inline-size: min(24rem, calc(100% - 24px));
|
|
532
|
+
transform: none;
|
|
533
|
+
border: 1px solid var(--scrawl-color-chrome-border);
|
|
534
|
+
}
|
|
535
|
+
|
|
223
536
|
[data-scrawl-portal] .scrawl-board__panel-heading { align-items: center; display: flex; justify-content: space-between; margin-block-end: 10px; }
|
|
224
537
|
[data-scrawl-portal] .scrawl-board__panel-heading h2 { font-size: 1rem; line-height: 1.4; margin: 0; }
|
|
225
|
-
[data-scrawl-portal] .scrawl-board__ink-options,
|
|
226
|
-
[data-scrawl-portal] .scrawl-
|
|
227
|
-
[data-scrawl-portal] .scrawl-board__ink-options button,
|
|
228
|
-
[data-scrawl-portal] .scrawl-board__export-options button { text-align: start; }
|
|
538
|
+
[data-scrawl-portal] .scrawl-board__ink-options { display: grid; gap: 4px; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
|
|
539
|
+
[data-scrawl-portal] .scrawl-board__ink-options button { text-align: start; }
|
|
229
540
|
|
|
230
|
-
[data-scrawl-portal] [data-scrawl-search] label { display: grid; font-weight: var(--scrawl-font-weight-strong); gap: 6px; }
|
|
231
|
-
[data-scrawl-portal] [data-scrawl-search] input { background: var(--scrawl-color-surface); border: 1px solid var(--scrawl-color-edge); min-block-size: 44px; padding: 8px 10px; }
|
|
232
541
|
[data-scrawl-portal] [data-scrawl-search-results] { display: grid; gap: 4px; margin-block-start: 8px; }
|
|
233
542
|
[data-scrawl-portal] [data-scrawl-search-results] button { display: grid; gap: 2px; text-align: start; }
|
|
234
543
|
[data-scrawl-portal] [data-scrawl-search-results] span { color: var(--scrawl-color-text-muted); }
|
|
235
544
|
|
|
545
|
+
/* Its own 1px border already signals "editable and focused" — the generic
|
|
546
|
+
:focus-visible ring above is meant for buttons/inputs in the surrounding
|
|
547
|
+
chrome, not this, and would otherwise double up into a border-within-a-
|
|
548
|
+
ring right on top of it. `outline: none` here (not just on :focus) is a
|
|
549
|
+
deliberate, always-on reset — including against a Host page's own global
|
|
550
|
+
`textarea`/`input` focus-ring CSS (e.g. Tailwind/shadcn's), which a plain
|
|
551
|
+
element selector can bleed onto this real DOM textarea; this class
|
|
552
|
+
selector already outranks that on specificity alone, but stating it
|
|
553
|
+
outright means the DOM inspector shows one clear winner, not a fight. */
|
|
236
554
|
[data-scrawl-portal] .scrawl-board__inline-editor {
|
|
237
555
|
background: var(--scrawl-color-surface);
|
|
238
|
-
border:
|
|
556
|
+
border: 0;
|
|
239
557
|
border-radius: var(--scrawl-radius-control);
|
|
240
558
|
box-shadow: var(--scrawl-elevation-high);
|
|
241
559
|
min-block-size: 32px;
|
|
560
|
+
outline: none;
|
|
242
561
|
padding: 6px 8px;
|
|
243
562
|
pointer-events: auto;
|
|
244
563
|
position: absolute;
|
|
@@ -248,12 +567,42 @@
|
|
|
248
567
|
z-index: 25;
|
|
249
568
|
}
|
|
250
569
|
|
|
570
|
+
/* Text blocks live directly on the canvas with no chrome of their own — the
|
|
571
|
+
editor should read as "the same text, now with a caret," not as a form
|
|
572
|
+
field dropped on top of it: no opaque surface or shadow, just a 1px frame
|
|
573
|
+
(the canvas selection gizmo is hidden while this is open, so this is the
|
|
574
|
+
only frame). Its width/height follow the text (inline-editing.tsx measures it),
|
|
575
|
+
and the canvas hides the block's own copy underneath while it's open. */
|
|
576
|
+
[data-scrawl-portal] .scrawl-board__inline-editor--text {
|
|
577
|
+
background: transparent;
|
|
578
|
+
border: 1px solid var(--scrawl-color-focus);
|
|
579
|
+
border-radius: 0;
|
|
580
|
+
box-shadow: none;
|
|
581
|
+
max-inline-size: min(60vw, 640px);
|
|
582
|
+
overflow: hidden;
|
|
583
|
+
min-block-size: 0;
|
|
584
|
+
padding: 2px 4px;
|
|
585
|
+
}
|
|
586
|
+
|
|
251
587
|
[data-scrawl-portal] .scrawl-board__inline-editor--table-cell {
|
|
252
588
|
pointer-events: auto;
|
|
253
589
|
position: absolute;
|
|
254
590
|
z-index: 25;
|
|
255
591
|
}
|
|
256
|
-
|
|
592
|
+
/* Transparent, chromeless — the table's own canvas-drawn cell highlight
|
|
593
|
+
(tables.ts's cellHighlight, the same FOCUS_COLOR as everything else) is
|
|
594
|
+
already the one border marking the active cell; an opaque bg + its own
|
|
595
|
+
border here would just double it up right on top. */
|
|
596
|
+
[data-scrawl-portal] .scrawl-board__inline-editor--table-cell .scrawl-board__inline-editor {
|
|
597
|
+
background: transparent;
|
|
598
|
+
block-size: 100%;
|
|
599
|
+
border: none;
|
|
600
|
+
border-radius: 0;
|
|
601
|
+
box-shadow: none;
|
|
602
|
+
inline-size: 100%;
|
|
603
|
+
inset: 0;
|
|
604
|
+
position: absolute;
|
|
605
|
+
}
|
|
257
606
|
|
|
258
607
|
[data-scrawl-portal] .scrawl-board__inline-editor-actions {
|
|
259
608
|
align-items: center;
|
|
@@ -262,23 +611,40 @@
|
|
|
262
611
|
box-shadow: var(--scrawl-elevation-low);
|
|
263
612
|
display: flex;
|
|
264
613
|
font-size: 0.75rem;
|
|
265
|
-
gap:
|
|
614
|
+
gap: 2px;
|
|
266
615
|
inset-block-end: calc(100% + 4px);
|
|
267
616
|
inset-inline-start: 0;
|
|
268
|
-
padding:
|
|
617
|
+
padding: 3px;
|
|
269
618
|
position: absolute;
|
|
270
619
|
white-space: nowrap;
|
|
271
620
|
}
|
|
272
|
-
[data-scrawl-portal] .scrawl-board__inline-editor-actions
|
|
621
|
+
[data-scrawl-portal] .scrawl-board__inline-editor-actions span { padding: 0 6px; color: var(--scrawl-color-text-muted); }
|
|
622
|
+
[data-scrawl-portal] .scrawl-board__inline-editor-actions span.scrawl-board__toolbar-divider { align-self: stretch; flex: none; inline-size: 1px; margin-block: 4px; margin-inline: 5px; padding: 0; background: var(--scrawl-color-edge); }
|
|
623
|
+
[data-scrawl-portal] .scrawl-board__inline-editor-actions button {
|
|
624
|
+
align-items: center;
|
|
625
|
+
display: flex;
|
|
626
|
+
justify-content: center;
|
|
627
|
+
min-block-size: 26px;
|
|
628
|
+
min-inline-size: 26px;
|
|
629
|
+
padding: 4px;
|
|
630
|
+
}
|
|
631
|
+
[data-scrawl-portal] .scrawl-board__inline-editor-actions svg { width: 16px; height: 16px; }
|
|
273
632
|
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
633
|
+
/* Opens straight up out of the ink bar it belongs to (bottom centre, only
|
|
634
|
+
while the Marker is selected) — the bar sits 12px up and is 52px tall. */
|
|
635
|
+
[data-scrawl-portal] .scrawl-board__panel[aria-label="Ink style"] {
|
|
636
|
+
inset-block-start: auto;
|
|
637
|
+
inset-block-end: 72px;
|
|
638
|
+
inset-inline-start: 50%;
|
|
639
|
+
inline-size: 156px;
|
|
640
|
+
max-block-size: calc(100% - 84px);
|
|
641
|
+
transform: translateX(-50%);
|
|
281
642
|
}
|
|
643
|
+
[data-scrawl-portal] .scrawl-board__panel[aria-label="Ink style"] .scrawl-board__panel-heading { flex-direction: column; align-items: stretch; }
|
|
644
|
+
[data-scrawl-portal] .scrawl-board__panel[data-headless] { inline-size: auto; padding: 6px; }
|
|
645
|
+
[data-scrawl-portal] .scrawl-board__ink-options { grid-template-columns: repeat(2, 1fr); }
|
|
646
|
+
[data-scrawl-portal] .scrawl-board__ink-options button { display: flex; justify-content: center; align-items: center; }
|
|
647
|
+
[data-scrawl-portal] .scrawl-board__ink-options span { margin: 0; }
|
|
282
648
|
|
|
283
649
|
[data-scrawl-root] .scrawl-board__status, [data-scrawl-portal] .scrawl-board__status {
|
|
284
650
|
block-size: 1px;
|
|
@@ -294,4 +660,488 @@
|
|
|
294
660
|
|
|
295
661
|
@media (prefers-reduced-motion: reduce) {
|
|
296
662
|
[data-scrawl-root], [data-scrawl-portal] { --scrawl-motion-duration: 0ms !important; }
|
|
663
|
+
[data-scrawl-root] [data-scrawl-default-ui] { --scrawl-sidebar-motion: 0ms !important; }
|
|
664
|
+
}
|
|
665
|
+
|
|
666
|
+
[data-scrawl-root] .scrawl-board__picker { position: relative; }
|
|
667
|
+
[data-scrawl-root] .scrawl-board__picker-options {
|
|
668
|
+
position: fixed;
|
|
669
|
+
display: grid;
|
|
670
|
+
grid-template-columns: repeat(2, 44px);
|
|
671
|
+
gap: 4px;
|
|
672
|
+
padding: 4px;
|
|
673
|
+
max-block-size: min(420px, 60vh);
|
|
674
|
+
overflow-y: auto;
|
|
675
|
+
background: var(--scrawl-color-surface);
|
|
676
|
+
border: 0;
|
|
677
|
+
border-radius: var(--scrawl-radius-panel);
|
|
678
|
+
box-shadow: var(--scrawl-elevation-low);
|
|
679
|
+
z-index: 1;
|
|
680
|
+
}
|
|
681
|
+
[data-scrawl-root] .scrawl-board__focus-toolbar button { display: flex; align-items: center; justify-content: center; padding: 8px; }
|
|
682
|
+
[data-scrawl-root] .scrawl-board__color-chip { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: 50%; }
|
|
683
|
+
[data-scrawl-root] .scrawl-board__color-chip svg { width: 16px; height: 16px; color: var(--scrawl-color-text); background: var(--scrawl-color-surface); border-radius: 50%; }
|
|
684
|
+
[data-scrawl-root] .scrawl-board__color-chip[data-rectangular="true"],
|
|
685
|
+
[data-scrawl-root] .scrawl-board__style-group .scrawl-board__note-swatch span[aria-hidden] { border-radius: 2px; width: 26px; height: 22px; }
|
|
686
|
+
[data-scrawl-root] .scrawl-board__picker-options :focus-visible { outline-offset: -3px; }
|
|
687
|
+
|
|
688
|
+
[data-scrawl-root] .scrawl-board__welcome {
|
|
689
|
+
position: absolute;
|
|
690
|
+
inset: 80px 24px 80px 90px;
|
|
691
|
+
display: flex;
|
|
692
|
+
flex-direction: column;
|
|
693
|
+
align-items: center;
|
|
694
|
+
justify-content: center;
|
|
695
|
+
text-align: center;
|
|
696
|
+
color: var(--scrawl-color-text-muted);
|
|
697
|
+
pointer-events: none;
|
|
698
|
+
}
|
|
699
|
+
[data-scrawl-root] .scrawl-board__welcome-mark { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 20px; border-radius: 16px; background: var(--scrawl-color-text); color: var(--scrawl-color-surface); }
|
|
700
|
+
[data-scrawl-root] .scrawl-board__welcome-mark svg { width: 28px; height: 28px; }
|
|
701
|
+
[data-scrawl-root] .scrawl-board__welcome h2 { font-size: clamp(18px, 2vw, 24px); font-weight: 500; line-height: 1.3; margin: 0 0 8px; }
|
|
702
|
+
[data-scrawl-root] .scrawl-board__welcome p { margin: 0; }
|
|
703
|
+
[data-scrawl-root] .scrawl-board__welcome-shortcuts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; pointer-events: auto; }
|
|
704
|
+
[data-scrawl-root] .scrawl-board__welcome-shortcuts button { display: flex; align-items: center; gap: 8px; background: var(--scrawl-color-surface); border: 0; }
|
|
705
|
+
[data-scrawl-root] .scrawl-board__welcome kbd { font-size: 11px; padding: 2px 5px; border-radius: 4px; background: var(--scrawl-color-surface-muted); }
|
|
706
|
+
@media (max-height: 420px), (max-width: 440px) {
|
|
707
|
+
[data-scrawl-root] .scrawl-board__welcome-mark, [data-scrawl-root] .scrawl-board__welcome-shortcuts { display: none; }
|
|
708
|
+
[data-scrawl-root] .scrawl-board__welcome p { font-size: 12px; }
|
|
709
|
+
}
|
|
710
|
+
|
|
711
|
+
/* Empty-Board callouts pointing at chrome the welcome panel itself doesn't
|
|
712
|
+
sit near enough to explain — the tool rail and the zoom/fit controls.
|
|
713
|
+
Purely decorative (aria-hidden), so a Host hiding "tools"/"view" or
|
|
714
|
+
supplying its own toolbar slot just loses the matching callout, never a
|
|
715
|
+
dangling arrow pointing at nothing. */
|
|
716
|
+
[data-scrawl-root] .scrawl-board__welcome-hint {
|
|
717
|
+
position: absolute;
|
|
718
|
+
display: flex;
|
|
719
|
+
align-items: center;
|
|
720
|
+
gap: 6px;
|
|
721
|
+
color: var(--scrawl-color-text-muted);
|
|
722
|
+
font-size: 13px;
|
|
723
|
+
white-space: nowrap;
|
|
724
|
+
pointer-events: none;
|
|
725
|
+
z-index: 11;
|
|
726
|
+
}
|
|
727
|
+
[data-scrawl-root] .scrawl-board__welcome-hint svg { flex: none; }
|
|
728
|
+
[data-scrawl-root] .scrawl-board__welcome-hint--tools { inset-block-start: 76px; inset-inline-start: 84px; }
|
|
729
|
+
[data-scrawl-root] .scrawl-board__welcome-hint--view { inset-block-end: 84px; inset-inline-end: 96px; }
|
|
730
|
+
@media (max-height: 480px), (max-width: 640px) {
|
|
731
|
+
[data-scrawl-root] .scrawl-board__welcome-hint { display: none; }
|
|
732
|
+
}
|
|
733
|
+
|
|
734
|
+
[data-scrawl-root] .scrawl-board__focus-handle { border-radius: 1px; }
|
|
735
|
+
/* Top-left origin, matching the committed note texture (stickyNotes.ts's
|
|
736
|
+
renderNoteFace). Padding comes from the inline style, which scales the
|
|
737
|
+
texture's own 40/512 pad to the note's current on-screen size. */
|
|
738
|
+
[data-scrawl-portal] .scrawl-board__inline-editor--note { text-align: start; align-content: start; }
|
|
739
|
+
[data-scrawl-portal] .scrawl-board__inline-editor:focus-visible { outline: none; background-color: inherit; }
|
|
740
|
+
|
|
741
|
+
[data-scrawl-root] [data-scrawl-default-ui] button:focus-visible,
|
|
742
|
+
[data-scrawl-portal] button:focus-visible {
|
|
743
|
+
outline: none;
|
|
744
|
+
background: var(--scrawl-color-focus);
|
|
745
|
+
color: var(--scrawl-color-surface);
|
|
746
|
+
}
|
|
747
|
+
|
|
748
|
+
[data-scrawl-portal] .scrawl-board__inline-editor-actions button {
|
|
749
|
+
background: transparent;
|
|
750
|
+
border: 0;
|
|
751
|
+
border-radius: var(--scrawl-radius-control);
|
|
752
|
+
color: var(--scrawl-color-text);
|
|
753
|
+
cursor: pointer;
|
|
754
|
+
min-block-size: 44px;
|
|
755
|
+
min-inline-size: 44px;
|
|
756
|
+
}
|
|
757
|
+
[data-scrawl-portal] .scrawl-board__inline-editor-actions button:hover { background: var(--scrawl-color-surface-muted); }
|
|
758
|
+
[data-scrawl-root] .scrawl-board__style-shelf[data-tool="table"] { inline-size: min(180px, calc(100% - 90px)); }
|
|
759
|
+
[data-scrawl-root] .scrawl-board__table-picker { display: grid; gap: 12px; padding: 8px; inline-size: 100%; }
|
|
760
|
+
[data-scrawl-root] .scrawl-board__table-preview { display: grid; gap: 3px; block-size: 72px; }
|
|
761
|
+
[data-scrawl-root] .scrawl-board__table-preview span { background: var(--scrawl-color-selection); border-radius: 2px; }
|
|
762
|
+
[data-scrawl-root] .scrawl-board__table-picker output { text-align: center; font-weight: 600; }
|
|
763
|
+
[data-scrawl-root] .scrawl-board__table-dimensions, [data-scrawl-root] .scrawl-board__table-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
|
|
764
|
+
[data-scrawl-root] .scrawl-board__table-dimensions label { display: grid; gap: 4px; font-size: 12px; color: var(--scrawl-color-text-muted); }
|
|
765
|
+
[data-scrawl-root] .scrawl-board__table-dimensions input { width: 100%; min-height: 44px; padding: 4px 6px; background: var(--scrawl-color-surface-raised); border: 0; border-radius: 4px; color: var(--scrawl-color-text); }
|
|
766
|
+
[data-scrawl-root] .scrawl-board__style-shelf[data-tool="note"],
|
|
767
|
+
[data-scrawl-root] .scrawl-board__style-shelf[data-tool="highlighter"] { inline-size: 138px; }
|
|
768
|
+
[data-scrawl-root] .scrawl-board__style-shelf[data-tool="note"] button,
|
|
769
|
+
[data-scrawl-root] .scrawl-board__style-shelf[data-tool="highlighter"] button { min-height: 60px; padding: 4px; }
|
|
770
|
+
[data-scrawl-root] .scrawl-board__style-shelf[data-tool="note"] button span[aria-hidden],
|
|
771
|
+
[data-scrawl-root] .scrawl-board__style-shelf[data-tool="highlighter"] button span[aria-hidden] { width: 48px; height: 48px; border-radius: 2px; }
|
|
772
|
+
[data-scrawl-root] .scrawl-board__picker-options:has(.scrawl-board__color-chip) { grid-template-columns: repeat(2, 56px); }
|
|
773
|
+
[data-scrawl-root] .scrawl-board__picker-options .scrawl-board__color-chip { width: 44px; height: 44px; border-radius: 2px; }
|
|
774
|
+
[data-scrawl-root] .scrawl-board__color-chip { border-radius: 2px; }
|
|
775
|
+
[data-scrawl-portal] .scrawl-board__tooltip {
|
|
776
|
+
position: fixed;
|
|
777
|
+
z-index: 100;
|
|
778
|
+
max-width: 220px;
|
|
779
|
+
padding: 7px 10px;
|
|
780
|
+
border-radius: 5px;
|
|
781
|
+
background: var(--scrawl-color-text);
|
|
782
|
+
color: var(--scrawl-color-surface);
|
|
783
|
+
font-size: 12px;
|
|
784
|
+
line-height: 1.4;
|
|
785
|
+
pointer-events: auto;
|
|
786
|
+
}
|
|
787
|
+
|
|
788
|
+
/* Emoji & icons tool: one tab per set, each sized to fit without scrolling
|
|
789
|
+
(the largest, 56 icons, is 7 rows of 8). */
|
|
790
|
+
[data-scrawl-root] .scrawl-board__style-shelf[data-tool="stamp"] { inline-size: min(320px, calc(100% - 90px)); align-items: stretch; }
|
|
791
|
+
[data-scrawl-root] .scrawl-board__sticker-picker { display: flex; flex-direction: column; gap: 6px; inline-size: 100%; min-block-size: 0; }
|
|
792
|
+
[data-scrawl-root] .scrawl-board__sticker-search {
|
|
793
|
+
background: var(--scrawl-color-surface-raised);
|
|
794
|
+
border: 1px solid var(--scrawl-color-edge);
|
|
795
|
+
border-radius: var(--scrawl-radius-control);
|
|
796
|
+
font-size: 13px;
|
|
797
|
+
inline-size: 100%;
|
|
798
|
+
padding: 6px 8px;
|
|
799
|
+
}
|
|
800
|
+
[data-scrawl-root] .scrawl-board__sticker-tabs { display: flex; gap: 2px; border-block-end: 1px solid var(--scrawl-color-edge); }
|
|
801
|
+
[data-scrawl-root] .scrawl-board__sticker-tabs [role="tab"] {
|
|
802
|
+
background: transparent;
|
|
803
|
+
border: 0;
|
|
804
|
+
border-block-end: 2px solid transparent;
|
|
805
|
+
border-radius: 0;
|
|
806
|
+
color: var(--scrawl-color-text-muted);
|
|
807
|
+
flex: 1;
|
|
808
|
+
font-size: 13px;
|
|
809
|
+
margin-block-end: -1px;
|
|
810
|
+
min-block-size: 32px;
|
|
811
|
+
min-inline-size: 0;
|
|
812
|
+
padding: 4px 6px;
|
|
813
|
+
}
|
|
814
|
+
[data-scrawl-root] .scrawl-board__sticker-tabs [role="tab"][aria-selected="true"] { border-block-end-color: var(--scrawl-color-focus); color: var(--scrawl-color-text); font-weight: var(--scrawl-font-weight-strong); }
|
|
815
|
+
[data-scrawl-root] .scrawl-board__sticker-count { color: var(--scrawl-color-text-muted); font-weight: var(--scrawl-font-weight); }
|
|
816
|
+
/* All three tab panels share one grid cell, so the shelf is always as tall as
|
|
817
|
+
the tallest set and switching tabs never resizes (or moves) it. */
|
|
818
|
+
[data-scrawl-root] .scrawl-board__sticker-panels { display: grid; }
|
|
819
|
+
[data-scrawl-root] .scrawl-board__sticker-panel { grid-area: 1 / 1; }
|
|
820
|
+
[data-scrawl-root] .scrawl-board__sticker-panel[data-active="false"] { visibility: hidden; }
|
|
821
|
+
[data-scrawl-root] .scrawl-board__sticker-grid { display: grid; gap: 2px; grid-template-columns: repeat(8, minmax(0, 1fr)); }
|
|
822
|
+
[data-scrawl-root] .scrawl-board__sticker-grid button {
|
|
823
|
+
align-items: center;
|
|
824
|
+
aspect-ratio: 1;
|
|
825
|
+
background: transparent;
|
|
826
|
+
border: 0;
|
|
827
|
+
border-radius: var(--scrawl-radius-control);
|
|
828
|
+
display: flex;
|
|
829
|
+
justify-content: center;
|
|
830
|
+
min-block-size: 0;
|
|
831
|
+
min-inline-size: 0;
|
|
832
|
+
padding: 5px;
|
|
833
|
+
}
|
|
834
|
+
[data-scrawl-root] .scrawl-board__sticker-grid button:hover { background: var(--scrawl-color-surface-muted); }
|
|
835
|
+
[data-scrawl-root] .scrawl-board__sticker-grid button[aria-pressed="true"] { background: var(--scrawl-color-selection); }
|
|
836
|
+
[data-scrawl-root] .scrawl-board__sticker-grid img { block-size: 100%; display: block; inline-size: 100%; }
|
|
837
|
+
[data-scrawl-root] .scrawl-board__sticker-empty { color: var(--scrawl-color-text-muted); font-size: 12px; margin: 8px 2px; }
|
|
838
|
+
|
|
839
|
+
/* Every floating toolbar and the panels that open from them get the same
|
|
840
|
+
light 1px outline, so each reads as its own surface against the board.
|
|
841
|
+
Kept last so it wins over the per-component `border: 0` resets above. */
|
|
842
|
+
[data-scrawl-root] .scrawl-board__actions,
|
|
843
|
+
[data-scrawl-root] .scrawl-board__tools,
|
|
844
|
+
[data-scrawl-root] .scrawl-board__view,
|
|
845
|
+
[data-scrawl-root] .scrawl-board__ink-bar,
|
|
846
|
+
[data-scrawl-root] .scrawl-board__more-tools,
|
|
847
|
+
[data-scrawl-root] .scrawl-board__style-shelf,
|
|
848
|
+
[data-scrawl-root] .scrawl-board__focus-toolbar,
|
|
849
|
+
[data-scrawl-root] .scrawl-board__picker-options,
|
|
850
|
+
[data-scrawl-portal] .scrawl-board__panel,
|
|
851
|
+
[data-scrawl-portal] .scrawl-board__inline-editor-actions {
|
|
852
|
+
border: 1px solid var(--scrawl-color-chrome-border);
|
|
853
|
+
}
|
|
854
|
+
|
|
855
|
+
/* Notebook / section / page navigation: a floating switcher in the top-left,
|
|
856
|
+
a breadcrumb across the top whose crumbs open menus, and a sliding sidebar.
|
|
857
|
+
Container queries respect embedded boards. */
|
|
858
|
+
[data-scrawl-root] [data-scrawl-default-ui] {
|
|
859
|
+
container-type: inline-size;
|
|
860
|
+
--scrawl-chrome-inset: 20px;
|
|
861
|
+
--scrawl-sidebar-size: min(420px, calc(100% - 40px));
|
|
862
|
+
/* Space the open sidebar takes from the board. */
|
|
863
|
+
--scrawl-sidebar-width: 0px;
|
|
864
|
+
--scrawl-sidebar-motion: 240ms;
|
|
865
|
+
--scrawl-sidebar-easing: cubic-bezier(0.2, 0, 0, 1);
|
|
866
|
+
--scrawl-float-shadow: 0 12px 28px -12px rgb(21 23 28 / .16), 0 3px 8px -3px rgb(21 23 28 / .08);
|
|
867
|
+
--scrawl-pop-shadow: 0 16px 36px -12px rgb(21 23 28 / .22), 0 4px 10px -3px rgb(21 23 28 / .1);
|
|
868
|
+
--scrawl-accent-soft: color-mix(in srgb, var(--scrawl-color-primary) 10%, var(--scrawl-color-surface));
|
|
869
|
+
}
|
|
870
|
+
[data-scrawl-root] [data-scrawl-default-ui][data-pages-open] { --scrawl-sidebar-width: var(--scrawl-sidebar-size); }
|
|
871
|
+
/* The rail and breadcrumb slide with the sidebar. */
|
|
872
|
+
[data-scrawl-root] [data-notebook-header] .scrawl-board__tools,
|
|
873
|
+
[data-scrawl-root] [data-notebook-header] .scrawl-board__breadcrumb,
|
|
874
|
+
[data-scrawl-root] [data-notebook-header] .scrawl-board__welcome { transition: inset-inline-start var(--scrawl-sidebar-motion) var(--scrawl-sidebar-easing); }
|
|
875
|
+
|
|
876
|
+
/* Every floating cluster shares one surface treatment. */
|
|
877
|
+
[data-scrawl-root] .scrawl-board__navigator-menu,
|
|
878
|
+
[data-scrawl-root] .scrawl-board__pages {
|
|
879
|
+
background: var(--scrawl-color-surface);
|
|
880
|
+
border: 1px solid var(--scrawl-color-chrome-border);
|
|
881
|
+
border-radius: var(--scrawl-radius-panel);
|
|
882
|
+
}
|
|
883
|
+
[data-scrawl-root] .scrawl-board__notebook-switcher {
|
|
884
|
+
position: relative;
|
|
885
|
+
flex: 0 1 auto;
|
|
886
|
+
min-inline-size: 0;
|
|
887
|
+
pointer-events: auto;
|
|
888
|
+
}
|
|
889
|
+
/* The switcher is plain text on the board, like the breadcrumb beside it. */
|
|
890
|
+
[data-scrawl-root] .scrawl-board__notebook-trigger { border-radius: var(--scrawl-radius-panel); }
|
|
891
|
+
[data-scrawl-root] .scrawl-board__notebook-trigger:hover { background: var(--scrawl-color-surface-raised); }
|
|
892
|
+
[data-scrawl-root] .scrawl-board__notebook-trigger > svg { inline-size: 16px; block-size: 16px; color: var(--scrawl-color-text-muted); transition: transform 150ms ease; }
|
|
893
|
+
[data-scrawl-root] .scrawl-board__notebook-switcher[data-open] .scrawl-board__notebook-trigger > svg { transform: rotate(180deg); }
|
|
894
|
+
[data-scrawl-root] .scrawl-board__notebook-trigger {
|
|
895
|
+
display: flex;
|
|
896
|
+
align-items: center;
|
|
897
|
+
gap: 9px;
|
|
898
|
+
max-inline-size: 100%;
|
|
899
|
+
min-block-size: 44px;
|
|
900
|
+
padding: 0 12px;
|
|
901
|
+
font-weight: 600;
|
|
902
|
+
font-size: 14px;
|
|
903
|
+
}
|
|
904
|
+
[data-scrawl-root] .scrawl-board__notebook-color { display: inline-block; inline-size: 10px; block-size: 10px; flex-shrink: 0; border-radius: 50%; }
|
|
905
|
+
[data-scrawl-root] .scrawl-board__navigator-label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
906
|
+
|
|
907
|
+
/* Breadcrumb: notebook / section / page, each crumb its own menu. */
|
|
908
|
+
/* Sits right after the notebook switcher, split from it by a thin rule. */
|
|
909
|
+
[data-scrawl-root] .scrawl-board__breadcrumb {
|
|
910
|
+
display: flex;
|
|
911
|
+
flex: 0 1 auto;
|
|
912
|
+
min-inline-size: 0;
|
|
913
|
+
padding-inline-start: 8px;
|
|
914
|
+
border-inline-start: 1px solid var(--scrawl-color-chrome-border);
|
|
915
|
+
pointer-events: none;
|
|
916
|
+
}
|
|
917
|
+
/* The switcher already names the notebook; drop that crumb and its separator. */
|
|
918
|
+
[data-scrawl-root] .scrawl-board__breadcrumb li:first-child { display: none; }
|
|
919
|
+
[data-scrawl-root] .scrawl-board__breadcrumb li:nth-child(2) > svg { display: none; }
|
|
920
|
+
[data-scrawl-root] .scrawl-board__breadcrumb ol { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; min-inline-size: 0; }
|
|
921
|
+
[data-scrawl-root] .scrawl-board__breadcrumb li { display: flex; align-items: center; gap: 2px; min-inline-size: 0; }
|
|
922
|
+
[data-scrawl-root] .scrawl-board__breadcrumb li > svg { inline-size: 14px; block-size: 14px; flex: none; color: var(--scrawl-color-text-muted); }
|
|
923
|
+
[data-scrawl-root] .scrawl-board__crumb-group { position: relative; min-inline-size: 0; pointer-events: auto; }
|
|
924
|
+
[data-scrawl-root] .scrawl-board__crumb {
|
|
925
|
+
display: flex;
|
|
926
|
+
align-items: center;
|
|
927
|
+
gap: 7px;
|
|
928
|
+
max-inline-size: 190px;
|
|
929
|
+
min-block-size: 44px;
|
|
930
|
+
padding: 0 10px;
|
|
931
|
+
border-radius: var(--scrawl-radius-panel);
|
|
932
|
+
color: var(--scrawl-color-text-muted);
|
|
933
|
+
font-size: 14px;
|
|
934
|
+
}
|
|
935
|
+
[data-scrawl-root] .scrawl-board__crumb svg { inline-size: 15px; block-size: 15px; }
|
|
936
|
+
[data-scrawl-root] .scrawl-board__crumb--current { color: var(--scrawl-color-text); font-weight: 600; }
|
|
937
|
+
[data-scrawl-root] .scrawl-board__crumb--current > svg:first-child { color: var(--scrawl-color-primary); }
|
|
938
|
+
|
|
939
|
+
/* One menu style for the switcher and every crumb. */
|
|
940
|
+
[data-scrawl-root] .scrawl-board__navigator-menu {
|
|
941
|
+
position: absolute;
|
|
942
|
+
inset-block-start: calc(100% + 8px);
|
|
943
|
+
inset-inline-start: 0;
|
|
944
|
+
inline-size: 260px;
|
|
945
|
+
max-inline-size: calc(100cqw - 40px);
|
|
946
|
+
padding: 6px;
|
|
947
|
+
z-index: 42;
|
|
948
|
+
box-shadow: var(--scrawl-pop-shadow);
|
|
949
|
+
}
|
|
950
|
+
[data-scrawl-root] .scrawl-board__navigator-options { display: flex; flex-direction: column; max-block-size: 320px; overflow-y: auto; }
|
|
951
|
+
[data-scrawl-root] .scrawl-board__navigator-menu .scrawl-board__page-row { display: flex; align-items: center; border-radius: var(--scrawl-radius-control); }
|
|
952
|
+
[data-scrawl-root] .scrawl-board__navigator-menu .scrawl-board__page-row:hover { background: var(--scrawl-color-surface-raised); }
|
|
953
|
+
[data-scrawl-root] .scrawl-board__navigator-menu .scrawl-board__page-row[data-active="true"] { background: var(--scrawl-accent-soft); }
|
|
954
|
+
[data-scrawl-root] .scrawl-board__navigator-menu .scrawl-board__page-select {
|
|
955
|
+
flex: 1;
|
|
956
|
+
min-inline-size: 0;
|
|
957
|
+
display: flex;
|
|
958
|
+
align-items: center;
|
|
959
|
+
gap: 9px;
|
|
960
|
+
min-block-size: 44px;
|
|
961
|
+
padding: 0 10px;
|
|
962
|
+
font-size: 14px;
|
|
963
|
+
text-align: start;
|
|
964
|
+
}
|
|
965
|
+
[data-scrawl-root] .scrawl-board__navigator-menu .scrawl-board__page-row[data-active="true"] .scrawl-board__page-select { color: var(--scrawl-color-primary); font-weight: 600; }
|
|
966
|
+
[data-scrawl-root] .scrawl-board__navigator-menu .scrawl-board__page-select > .scrawl-board__navigator-label { flex: 1; }
|
|
967
|
+
[data-scrawl-root] .scrawl-board__navigator-menu .scrawl-board__page-select svg { inline-size: 15px; block-size: 15px; flex: none; color: var(--scrawl-color-text-muted); }
|
|
968
|
+
[data-scrawl-root] .scrawl-board__navigator-menu .scrawl-board__page-row[data-active="true"] .scrawl-board__page-select svg { color: var(--scrawl-color-primary); }
|
|
969
|
+
[data-scrawl-root] .scrawl-board__navigator-menu button { min-block-size: 44px; min-inline-size: 44px; border-radius: var(--scrawl-radius-control); }
|
|
970
|
+
[data-scrawl-root] .scrawl-board__navigator-menu input { inline-size: 100%; min-inline-size: 0; block-size: 44px; background: var(--scrawl-color-surface-raised); border: 0; border-radius: var(--scrawl-radius-control); color: inherit; padding: 8px; font: inherit; }
|
|
971
|
+
/* One tint for the whole selected row (not the generic pressed-button fill). */
|
|
972
|
+
[data-scrawl-root] [data-scrawl-default-ui] .scrawl-board__navigator-menu .scrawl-board__page-select[aria-pressed="true"],
|
|
973
|
+
[data-scrawl-root] [data-scrawl-default-ui] .scrawl-board__navigator-menu .scrawl-board__page-row button:hover { background: transparent; }
|
|
974
|
+
@media (hover: hover) {
|
|
975
|
+
[data-scrawl-root] .scrawl-board__navigator-menu .scrawl-board__page-row > button:last-child:not(.scrawl-board__page-select) { opacity: .35; }
|
|
976
|
+
[data-scrawl-root] .scrawl-board__navigator-menu .scrawl-board__page-row:hover > button:last-child,
|
|
977
|
+
[data-scrawl-root] .scrawl-board__navigator-menu .scrawl-board__page-row:focus-within > button:last-child { opacity: 1; }
|
|
978
|
+
}
|
|
979
|
+
[data-scrawl-root] .scrawl-board__navigator-add {
|
|
980
|
+
display: flex;
|
|
981
|
+
align-items: center;
|
|
982
|
+
gap: 9px;
|
|
983
|
+
inline-size: 100%;
|
|
984
|
+
margin-block-start: 4px;
|
|
985
|
+
padding: 0 10px;
|
|
986
|
+
border-block-start: 1px solid var(--scrawl-color-chrome-border);
|
|
987
|
+
border-radius: 0;
|
|
988
|
+
color: var(--scrawl-color-text-muted);
|
|
989
|
+
font-size: 14px;
|
|
990
|
+
text-align: start;
|
|
991
|
+
}
|
|
992
|
+
[data-scrawl-root] .scrawl-board__navigator-add svg { inline-size: 15px; block-size: 15px; }
|
|
993
|
+
|
|
994
|
+
/* Sidebar: floating under the switcher, sliding in from the start edge. */
|
|
995
|
+
[data-scrawl-root] .scrawl-board__pages {
|
|
996
|
+
position: absolute;
|
|
997
|
+
inset-block: calc(var(--scrawl-chrome-inset) + 56px) var(--scrawl-chrome-inset);
|
|
998
|
+
inset-inline-start: var(--scrawl-chrome-inset);
|
|
999
|
+
inline-size: var(--scrawl-sidebar-size);
|
|
1000
|
+
z-index: 37;
|
|
1001
|
+
display: grid;
|
|
1002
|
+
grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
|
|
1003
|
+
overflow: hidden;
|
|
1004
|
+
box-shadow: var(--scrawl-float-shadow);
|
|
1005
|
+
color: var(--scrawl-color-text);
|
|
1006
|
+
pointer-events: auto;
|
|
1007
|
+
/* Closed: slid off to the start edge, then hidden once the slide ends. */
|
|
1008
|
+
transform: translateX(calc(-100% - var(--scrawl-chrome-inset)));
|
|
1009
|
+
visibility: hidden;
|
|
1010
|
+
transition: transform var(--scrawl-sidebar-motion) var(--scrawl-sidebar-easing), visibility 0s linear var(--scrawl-sidebar-motion);
|
|
1011
|
+
}
|
|
1012
|
+
[data-scrawl-root] .scrawl-board__pages[data-open] {
|
|
1013
|
+
transform: none;
|
|
1014
|
+
visibility: visible;
|
|
1015
|
+
transition: transform var(--scrawl-sidebar-motion) var(--scrawl-sidebar-easing), visibility 0s;
|
|
1016
|
+
}
|
|
1017
|
+
[data-scrawl-root] .scrawl-board__pages:dir(rtl):not([data-open]) { transform: translateX(calc(100% + var(--scrawl-chrome-inset))); }
|
|
1018
|
+
[data-scrawl-root] .scrawl-board__sections-column,
|
|
1019
|
+
[data-scrawl-root] .scrawl-board__pages-column { display: flex; flex-direction: column; min-block-size: 0; min-inline-size: 0; }
|
|
1020
|
+
[data-scrawl-root] .scrawl-board__sections-column { background: var(--scrawl-color-surface-raised); }
|
|
1021
|
+
[data-scrawl-root] .scrawl-board__pages-column { border-inline-start: 1px solid var(--scrawl-color-chrome-border); }
|
|
1022
|
+
[data-scrawl-root] .scrawl-board__pages header { display: flex; align-items: center; gap: 2px; min-block-size: 52px; padding-inline: 16px 6px; border-block-end: 1px solid var(--scrawl-color-chrome-border); }
|
|
1023
|
+
[data-scrawl-root] .scrawl-board__pages h2 { flex: 1; margin: 0; color: var(--scrawl-color-text-muted); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
|
|
1024
|
+
[data-scrawl-root] .scrawl-board__page-list { flex: 1; min-block-size: 0; overflow-y: auto; padding: 8px; }
|
|
1025
|
+
[data-scrawl-root] .scrawl-board__page-row { display: flex; align-items: center; border: 1px solid transparent; border-radius: 10px; margin-block-end: 4px; }
|
|
1026
|
+
[data-scrawl-root] .scrawl-board__page-row:hover { background: var(--scrawl-color-surface-muted); }
|
|
1027
|
+
[data-scrawl-root] .scrawl-board__sections-column .scrawl-board__page-row[data-active="true"],
|
|
1028
|
+
[data-scrawl-root] .scrawl-board__pages-column .scrawl-board__page-row[data-active="true"] { background: var(--scrawl-accent-soft); }
|
|
1029
|
+
[data-scrawl-root] .scrawl-board__page-row[data-active="true"] .scrawl-board__page-select { font-weight: 600; }
|
|
1030
|
+
[data-scrawl-root] .scrawl-board__page-select { flex: 1; min-inline-size: 0; display: flex; align-items: center; gap: 12px; justify-content: flex-start; text-align: start; font-size: 15px; }
|
|
1031
|
+
[data-scrawl-root] .scrawl-board__page-select > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1032
|
+
[data-scrawl-root] .scrawl-board__section-spine { inline-size: 4px; block-size: 22px; flex-shrink: 0; border-radius: 2px; }
|
|
1033
|
+
[data-scrawl-root] .scrawl-board__page-dot { inline-size: 7px; block-size: 7px; flex-shrink: 0; border-radius: 50%; background: var(--scrawl-color-text-muted); opacity: .6; }
|
|
1034
|
+
[data-scrawl-root] .scrawl-board__page-row[data-active="true"] .scrawl-board__page-dot { background: var(--scrawl-color-primary); opacity: 1; }
|
|
1035
|
+
[data-scrawl-root] .scrawl-board__pages button { min-block-size: 44px; min-inline-size: 44px; border: 0; background: transparent; color: inherit; border-radius: 8px; padding: 10px; cursor: pointer; }
|
|
1036
|
+
[data-scrawl-root] .scrawl-board__pages button:hover, [data-scrawl-root] .scrawl-board__pages button:focus-visible { background: var(--scrawl-color-surface-muted); }
|
|
1037
|
+
[data-scrawl-root] .scrawl-board__pages .scrawl-board__page-row button:hover,
|
|
1038
|
+
[data-scrawl-root] [data-scrawl-default-ui] .scrawl-board__pages .scrawl-board__page-select[aria-pressed="true"] { background: transparent; color: var(--scrawl-color-text); }
|
|
1039
|
+
/* Rename appears on hover or keyboard focus; touch screens always show it. */
|
|
1040
|
+
@media (hover: hover) {
|
|
1041
|
+
[data-scrawl-root] .scrawl-board__pages .scrawl-board__page-row > button:last-child:not(.scrawl-board__page-select) { opacity: .35; }
|
|
1042
|
+
[data-scrawl-root] .scrawl-board__pages .scrawl-board__page-row:hover > button:last-child,
|
|
1043
|
+
[data-scrawl-root] .scrawl-board__pages .scrawl-board__page-row:focus-within > button:last-child { opacity: 1; }
|
|
1044
|
+
}
|
|
1045
|
+
[data-scrawl-root] .scrawl-board__pages header button svg { inline-size: 18px; block-size: 18px; }
|
|
1046
|
+
[data-scrawl-root] .scrawl-board__pages input { inline-size: 100%; min-inline-size: 0; block-size: 44px; border: 0; border-radius: 8px; background: var(--scrawl-color-surface-raised); color: inherit; padding: 10px; font: inherit; }
|
|
1047
|
+
[data-scrawl-root] .scrawl-board__pages .scrawl-board__add-page { display: flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; margin: 8px; border: 1px dashed var(--scrawl-color-chrome-border); border-radius: 10px; color: var(--scrawl-color-primary); font-weight: 600; }
|
|
1048
|
+
[data-scrawl-root] [data-scrawl-default-ui] .scrawl-board__pages .scrawl-board__add-page { border: 1px dashed var(--scrawl-color-chrome-border); }
|
|
1049
|
+
[data-scrawl-root] .scrawl-board__pages .scrawl-board__add-page svg { inline-size: 18px; block-size: 18px; }
|
|
1050
|
+
|
|
1051
|
+
/* A section selector leaves room for pages in narrow, short embeds. */
|
|
1052
|
+
[data-scrawl-root] .scrawl-board__pages .scrawl-board__compact-section { display: none; }
|
|
1053
|
+
@container (max-width: 600px) {
|
|
1054
|
+
/* Too tight for one row: the breadcrumb drops under the switcher. */
|
|
1055
|
+
[data-scrawl-root] .scrawl-board__breadcrumb { position: absolute; inset-block-start: 56px; inset-inline: 0; padding-inline-start: 0; border-inline-start: 0; }
|
|
1056
|
+
/* …so the centred rail gives up a little more height to clear that second row. */
|
|
1057
|
+
[data-scrawl-root] .scrawl-board__tools { max-block-size: max(96px, calc(100% - 260px)); }
|
|
1058
|
+
[data-scrawl-root] [data-scrawl-default-ui][data-pages-open] .scrawl-board__tools,
|
|
1059
|
+
[data-scrawl-root] [data-scrawl-default-ui][data-pages-open] .scrawl-board__breadcrumb { visibility: hidden; }
|
|
1060
|
+
[data-scrawl-root] .scrawl-board__pages { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
|
|
1061
|
+
[data-scrawl-root] .scrawl-board__sections-column { display: none; }
|
|
1062
|
+
[data-scrawl-root] .scrawl-board__pages-column { border-inline-start: 0; }
|
|
1063
|
+
[data-scrawl-root] .scrawl-board__pages header { min-block-size: 44px; padding: 0 4px; flex-shrink: 0; }
|
|
1064
|
+
[data-scrawl-root] .scrawl-board__pages header h2 { display: none; }
|
|
1065
|
+
[data-scrawl-root] .scrawl-board__pages .scrawl-board__compact-section { display: block; }
|
|
1066
|
+
/* WebKit draws a default menulist at a fixed ~20px height and ignores
|
|
1067
|
+
min-block-size; menulist-button keeps the native arrow but honours an
|
|
1068
|
+
explicit height, keeping the 44px touch target in Safari. */
|
|
1069
|
+
[data-scrawl-root] .scrawl-board__pages select.scrawl-board__compact-section { flex: 1; min-inline-size: 44px; inline-size: 0; min-block-size: 44px; block-size: 44px; appearance: menulist-button; padding: 0 8px; font: inherit; color: inherit; }
|
|
1070
|
+
[data-scrawl-root] .scrawl-board__pages .scrawl-board__page-list { padding: 0 4px; }
|
|
1071
|
+
[data-scrawl-root] .scrawl-board__pages .scrawl-board__add-page { margin: 0 4px 4px; min-block-size: 44px; padding: 8px; }
|
|
1072
|
+
}
|
|
1073
|
+
|
|
1074
|
+
[data-scrawl-root] .scrawl-board__page-row:has(input) .scrawl-board__page-select { display: none; }
|
|
1075
|
+
|
|
1076
|
+
/* Default comment composer and thread: a comic speech bubble — thick ink
|
|
1077
|
+
outline, solid offset shadow, tail aimed at the pin. */
|
|
1078
|
+
[data-scrawl-portal] .scrawl-board__comment-card {
|
|
1079
|
+
--scrawl-bubble-ink: var(--scrawl-color-text);
|
|
1080
|
+
--scrawl-bubble-line: 3px;
|
|
1081
|
+
--scrawl-bubble-shadow: 5px;
|
|
1082
|
+
position: absolute;
|
|
1083
|
+
z-index: 45;
|
|
1084
|
+
display: flex;
|
|
1085
|
+
flex-direction: column;
|
|
1086
|
+
gap: 10px;
|
|
1087
|
+
max-inline-size: calc(100% - 24px);
|
|
1088
|
+
padding: 14px 16px;
|
|
1089
|
+
background: var(--scrawl-color-surface);
|
|
1090
|
+
border: var(--scrawl-bubble-line) solid var(--scrawl-bubble-ink);
|
|
1091
|
+
border-radius: 26px;
|
|
1092
|
+
box-shadow: var(--scrawl-bubble-shadow) var(--scrawl-bubble-shadow) 0 var(--scrawl-bubble-ink);
|
|
1093
|
+
pointer-events: auto;
|
|
1094
|
+
}
|
|
1095
|
+
[data-scrawl-portal] .scrawl-board__comment-card[data-placement="above"] { transform: translateY(-100%); }
|
|
1096
|
+
[data-scrawl-portal] .scrawl-board__comment-tail { position: absolute; overflow: visible; pointer-events: none; }
|
|
1097
|
+
[data-scrawl-portal] [data-placement="above"] > .scrawl-board__comment-tail { inset-block-start: calc(100% + 0px); }
|
|
1098
|
+
/* Below the pin the tail points up: mirror it onto the top edge. */
|
|
1099
|
+
[data-scrawl-portal] [data-placement="below"] > .scrawl-board__comment-tail { inset-block-end: 100%; transform: scaleY(-1); }
|
|
1100
|
+
[data-scrawl-portal] .scrawl-board__comment-tail-shadow { fill: var(--scrawl-bubble-ink); }
|
|
1101
|
+
[data-scrawl-portal] [data-placement="below"] > .scrawl-board__comment-tail .scrawl-board__comment-tail-shadow { display: none; }
|
|
1102
|
+
[data-scrawl-portal] .scrawl-board__comment-tail-fill { fill: var(--scrawl-color-surface); }
|
|
1103
|
+
[data-scrawl-portal] .scrawl-board__comment-tail-line { fill: none; stroke: var(--scrawl-bubble-ink); stroke-width: 3px; stroke-linecap: round; stroke-linejoin: round; }
|
|
1104
|
+
|
|
1105
|
+
[data-scrawl-portal] .scrawl-board__comment-card button { border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; padding: 0 14px; font-weight: 600; }
|
|
1106
|
+
[data-scrawl-portal] .scrawl-board__comment-card button:hover:not(:disabled) { background: var(--scrawl-color-surface-muted); }
|
|
1107
|
+
[data-scrawl-portal] .scrawl-board__comment-card button svg { inline-size: 18px; block-size: 18px; }
|
|
1108
|
+
[data-scrawl-portal] .scrawl-board__comment-header { display: flex; align-items: center; gap: 8px; margin-block: -6px -2px; }
|
|
1109
|
+
[data-scrawl-portal] .scrawl-board__comment-header strong { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1110
|
+
[data-scrawl-portal] .scrawl-board__comment-header button { padding: 0; }
|
|
1111
|
+
[data-scrawl-portal] .scrawl-board__comment-avatar { display: grid; place-items: center; inline-size: 26px; block-size: 26px; flex-shrink: 0; border: 2px solid var(--scrawl-bubble-ink); border-radius: 50%; color: #fff; font-size: 12px; font-weight: 700; }
|
|
1112
|
+
[data-scrawl-portal] .scrawl-board__comment-badge { padding: 2px 8px; border: 1.5px solid currentColor; border-radius: 999px; color: var(--scrawl-color-success); font-size: 11px; font-weight: 700; }
|
|
1113
|
+
[data-scrawl-portal] .scrawl-board__comment-text { margin: 0; font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
1114
|
+
[data-scrawl-portal] .scrawl-board__comment-replies { display: flex; flex-direction: column; gap: 8px; max-block-size: 200px; margin: 0; padding: 10px 0 0; overflow-y: auto; list-style: none; border-block-start: 2px dashed color-mix(in srgb, var(--scrawl-bubble-ink) 25%, transparent); }
|
|
1115
|
+
[data-scrawl-portal] .scrawl-board__comment-replies strong { font-size: 12px; }
|
|
1116
|
+
[data-scrawl-portal] .scrawl-board__comment-replies p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
1117
|
+
[data-scrawl-portal] .scrawl-board__comment-composer { display: flex; flex-direction: column; gap: 8px; margin: 0; }
|
|
1118
|
+
[data-scrawl-portal] .scrawl-board__comment-composer textarea { inline-size: 100%; min-block-size: 56px; padding: 2px 0; resize: none; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; font-size: 15px; line-height: 1.45; }
|
|
1119
|
+
[data-scrawl-portal] .scrawl-board__comment-composer textarea::placeholder { color: var(--scrawl-color-text-muted); }
|
|
1120
|
+
[data-scrawl-portal] .scrawl-board__comment-actions { display: flex; justify-content: flex-end; gap: 6px; }
|
|
1121
|
+
[data-scrawl-portal] .scrawl-board__comment-card .scrawl-board__comment-submit { border: 2px solid var(--scrawl-bubble-ink); background: var(--scrawl-bubble-ink); color: var(--scrawl-color-surface); box-shadow: 2px 2px 0 color-mix(in srgb, var(--scrawl-bubble-ink) 35%, transparent); }
|
|
1122
|
+
[data-scrawl-portal] .scrawl-board__comment-card .scrawl-board__comment-submit:hover:not(:disabled) { background: color-mix(in srgb, var(--scrawl-bubble-ink) 85%, var(--scrawl-color-surface)); }
|
|
1123
|
+
[data-scrawl-portal] .scrawl-board__comment-card .scrawl-board__comment-submit:disabled { opacity: .35; cursor: default; box-shadow: none; }
|
|
1124
|
+
|
|
1125
|
+
/* A section selector leaves room for pages in narrow, short embeds. */
|
|
1126
|
+
[data-scrawl-root] .scrawl-board__pages .scrawl-board__compact-section { display: none; }
|
|
1127
|
+
@container (max-width: 600px) {
|
|
1128
|
+
[data-scrawl-root] .scrawl-board__pages { grid-template-rows: minmax(0, 1fr); }
|
|
1129
|
+
[data-scrawl-root] .scrawl-board__sections-column { display: none; }
|
|
1130
|
+
[data-scrawl-root] .scrawl-board__pages-column { border-block-start: 0; }
|
|
1131
|
+
[data-scrawl-root] .scrawl-board__pages header { min-block-size: 44px; padding: 0 4px; flex-shrink: 0; }
|
|
1132
|
+
[data-scrawl-root] .scrawl-board__pages header h2,
|
|
1133
|
+
[data-scrawl-root] .scrawl-board__pages header [aria-label="New page"] { display: none; }
|
|
1134
|
+
[data-scrawl-root] .scrawl-board__pages .scrawl-board__compact-section { display: block; }
|
|
1135
|
+
/* WebKit draws a default menulist at a fixed ~20px height and ignores
|
|
1136
|
+
min-block-size; menulist-button keeps the native arrow but honours an
|
|
1137
|
+
explicit height, keeping the 44px touch target in Safari. */
|
|
1138
|
+
[data-scrawl-root] .scrawl-board__pages select.scrawl-board__compact-section { flex: 1; min-inline-size: 44px; inline-size: 0; min-block-size: 44px; block-size: 44px; appearance: menulist-button; padding: 0 8px; font: inherit; color: inherit; }
|
|
1139
|
+
[data-scrawl-root] .scrawl-board__pages .scrawl-board__page-list { padding: 0 4px; }
|
|
1140
|
+
[data-scrawl-root] .scrawl-board__pages .scrawl-board__add-page { margin: 0 4px; min-block-size: 44px; padding: 8px; }
|
|
1141
|
+
}
|
|
1142
|
+
|
|
1143
|
+
[data-scrawl-root] .scrawl-board__connector-hint {
|
|
1144
|
+
position: absolute; inset-block-end: 68px; inset-inline: 84px 12px;
|
|
1145
|
+
text-align: center; color: var(--scrawl-color-text-muted); font-size: 12px;
|
|
1146
|
+
pointer-events: none;
|
|
297
1147
|
}
|