@scrawl-board/board 0.1.0-beta.10 → 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/dist/browser.d.ts +24 -1
- package/dist/browser.js +58 -7
- package/dist/index.d.ts +130 -9
- package/dist/index.js +1397 -630
- package/dist/react.d.ts +130 -9
- package/dist/react.js +1397 -630
- package/dist/styles.css +383 -94
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -121,16 +121,18 @@
|
|
|
121
121
|
position: absolute;
|
|
122
122
|
}
|
|
123
123
|
|
|
124
|
-
[data-scrawl-root] .scrawl-board__actions { inset-block-start: 12px; inset-inline-end: 12px; }
|
|
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
125
|
[data-scrawl-root] .scrawl-board__tools {
|
|
126
126
|
inset-block-start: 50%;
|
|
127
|
-
|
|
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));
|
|
128
129
|
inline-size: 54px;
|
|
129
|
-
|
|
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));
|
|
130
132
|
overflow-y: auto;
|
|
131
133
|
flex-direction: column;
|
|
132
134
|
transform: translateY(-50%);
|
|
133
|
-
box-shadow: var(--scrawl-elevation-low);
|
|
135
|
+
box-shadow: var(--scrawl-float-shadow, var(--scrawl-elevation-low));
|
|
134
136
|
}
|
|
135
137
|
[data-scrawl-root] .scrawl-board__tools > button { flex: 0 0 44px; inline-size: 44px; }
|
|
136
138
|
[data-scrawl-root] .scrawl-board__tools button,
|
|
@@ -141,9 +143,9 @@
|
|
|
141
143
|
[data-scrawl-root] .scrawl-board__tools :focus-visible,
|
|
142
144
|
[data-scrawl-root] .scrawl-board__more-tools :focus-visible,
|
|
143
145
|
[data-scrawl-root] .scrawl-board__style-shelf :focus-visible { outline-offset: -3px; }
|
|
144
|
-
[data-scrawl-root] .scrawl-board__view { inset-block-end: 12px; inset-inline-end: 12px; }
|
|
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); }
|
|
145
147
|
[data-scrawl-root] .scrawl-board__ink-bar {
|
|
146
|
-
inset-block-end: 12px;
|
|
148
|
+
inset-block-end: var(--scrawl-chrome-inset, 12px);
|
|
147
149
|
inset-inline-start: 50%;
|
|
148
150
|
transform: translateX(-50%);
|
|
149
151
|
box-shadow: var(--scrawl-elevation-low);
|
|
@@ -270,6 +272,231 @@
|
|
|
270
272
|
vertical-align: middle;
|
|
271
273
|
}
|
|
272
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 {
|
|
317
|
+
display: flex;
|
|
318
|
+
align-items: center;
|
|
319
|
+
gap: 7px;
|
|
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;
|
|
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; }
|
|
331
|
+
|
|
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;
|
|
375
|
+
}
|
|
376
|
+
|
|
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; }
|
|
490
|
+
}
|
|
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
|
+
|
|
273
500
|
[data-scrawl-root] .scrawl-board__file-input { block-size: 1px; clip: rect(0, 0, 0, 0); inline-size: 1px; overflow: hidden; position: absolute; }
|
|
274
501
|
|
|
275
502
|
[data-scrawl-portal] .scrawl-board__modal-layer {
|
|
@@ -308,13 +535,9 @@
|
|
|
308
535
|
|
|
309
536
|
[data-scrawl-portal] .scrawl-board__panel-heading { align-items: center; display: flex; justify-content: space-between; margin-block-end: 10px; }
|
|
310
537
|
[data-scrawl-portal] .scrawl-board__panel-heading h2 { font-size: 1rem; line-height: 1.4; margin: 0; }
|
|
311
|
-
[data-scrawl-portal] .scrawl-board__ink-options,
|
|
312
|
-
[data-scrawl-portal] .scrawl-
|
|
313
|
-
[data-scrawl-portal] .scrawl-board__ink-options button,
|
|
314
|
-
[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; }
|
|
315
540
|
|
|
316
|
-
[data-scrawl-portal] [data-scrawl-search] label { display: grid; font-weight: var(--scrawl-font-weight-strong); gap: 6px; }
|
|
317
|
-
[data-scrawl-portal] [data-scrawl-search] input { background: var(--scrawl-color-surface); border: 0; min-block-size: 44px; padding: 8px 10px; }
|
|
318
541
|
[data-scrawl-portal] [data-scrawl-search-results] { display: grid; gap: 4px; margin-block-start: 8px; }
|
|
319
542
|
[data-scrawl-portal] [data-scrawl-search-results] button { display: grid; gap: 2px; text-align: start; }
|
|
320
543
|
[data-scrawl-portal] [data-scrawl-search-results] span { color: var(--scrawl-color-text-muted); }
|
|
@@ -396,6 +619,7 @@
|
|
|
396
619
|
white-space: nowrap;
|
|
397
620
|
}
|
|
398
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); }
|
|
399
623
|
[data-scrawl-portal] .scrawl-board__inline-editor-actions button {
|
|
400
624
|
align-items: center;
|
|
401
625
|
display: flex;
|
|
@@ -628,128 +852,180 @@
|
|
|
628
852
|
border: 1px solid var(--scrawl-color-chrome-border);
|
|
629
853
|
}
|
|
630
854
|
|
|
631
|
-
/* Notebook
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
boards. */
|
|
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. */
|
|
635
858
|
[data-scrawl-root] [data-scrawl-default-ui] {
|
|
636
859
|
container-type: inline-size;
|
|
637
|
-
--scrawl-
|
|
638
|
-
--scrawl-sidebar-size: min(
|
|
860
|
+
--scrawl-chrome-inset: 20px;
|
|
861
|
+
--scrawl-sidebar-size: min(420px, calc(100% - 40px));
|
|
639
862
|
/* Space the open sidebar takes from the board. */
|
|
640
863
|
--scrawl-sidebar-width: 0px;
|
|
641
864
|
--scrawl-sidebar-motion: 240ms;
|
|
642
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));
|
|
643
869
|
}
|
|
644
870
|
[data-scrawl-root] [data-scrawl-default-ui][data-pages-open] { --scrawl-sidebar-width: var(--scrawl-sidebar-size); }
|
|
645
|
-
/* The rail
|
|
871
|
+
/* The rail and breadcrumb slide with the sidebar. */
|
|
646
872
|
[data-scrawl-root] [data-notebook-header] .scrawl-board__tools,
|
|
647
873
|
[data-scrawl-root] [data-notebook-header] .scrawl-board__breadcrumb,
|
|
648
874
|
[data-scrawl-root] [data-notebook-header] .scrawl-board__welcome { transition: inset-inline-start var(--scrawl-sidebar-motion) var(--scrawl-sidebar-easing); }
|
|
649
875
|
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
inset-inline: 0;
|
|
654
|
-
block-size: var(--scrawl-header-height);
|
|
655
|
-
z-index: 38;
|
|
656
|
-
display: flex;
|
|
657
|
-
align-items: center;
|
|
658
|
-
padding-inline: 12px;
|
|
876
|
+
/* Every floating cluster shares one surface treatment. */
|
|
877
|
+
[data-scrawl-root] .scrawl-board__navigator-menu,
|
|
878
|
+
[data-scrawl-root] .scrawl-board__pages {
|
|
659
879
|
background: var(--scrawl-color-surface);
|
|
660
|
-
border
|
|
661
|
-
|
|
880
|
+
border: 1px solid var(--scrawl-color-chrome-border);
|
|
881
|
+
border-radius: var(--scrawl-radius-panel);
|
|
662
882
|
}
|
|
663
|
-
[data-scrawl-root]
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
inset-inline-start: calc(var(--scrawl-sidebar-width) + 12px);
|
|
669
|
-
max-block-size: calc(100% - var(--scrawl-header-height) - 96px);
|
|
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;
|
|
670
888
|
}
|
|
671
|
-
|
|
672
|
-
[data-scrawl-root]
|
|
673
|
-
|
|
674
|
-
[data-scrawl-root] .scrawl-board__notebook-
|
|
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); }
|
|
675
894
|
[data-scrawl-root] .scrawl-board__notebook-trigger {
|
|
676
895
|
display: flex;
|
|
677
896
|
align-items: center;
|
|
678
|
-
gap:
|
|
897
|
+
gap: 9px;
|
|
679
898
|
max-inline-size: 100%;
|
|
680
899
|
min-block-size: 44px;
|
|
681
900
|
padding: 0 12px;
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
background: var(--scrawl-color-surface);
|
|
685
|
-
color: inherit;
|
|
686
|
-
font: inherit;
|
|
687
|
-
cursor: pointer;
|
|
901
|
+
font-weight: 600;
|
|
902
|
+
font-size: 14px;
|
|
688
903
|
}
|
|
689
|
-
[data-scrawl-root]
|
|
690
|
-
[data-scrawl-root] .scrawl-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
[data-scrawl-root] .scrawl-board__notebook-options { overflow-y: auto; max-block-size: 320px; }
|
|
695
|
-
[data-scrawl-root] .scrawl-board__notebook-dropdown button { min-block-size: 44px; min-inline-size: 44px; }
|
|
696
|
-
[data-scrawl-root] .scrawl-board__notebook-dropdown input { inline-size: 100%; min-inline-size: 0; block-size: 44px; background: var(--scrawl-color-surface-raised); border: 0; border-radius: 8px; color: inherit; padding: 8px; font: inherit; }
|
|
697
|
-
[data-scrawl-root] .scrawl-board__notebook-dropdown .scrawl-board__page-select { display: flex; align-items: center; gap: 10px; }
|
|
698
|
-
[data-scrawl-root] .scrawl-board__add-notebook { display: flex; gap: 8px; align-items: center; margin-block-start: 8px; color: var(--scrawl-color-primary); font-weight: 600; }
|
|
699
|
-
|
|
700
|
-
/* Plain-text breadcrumb on the canvas, after the rail. */
|
|
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. */
|
|
701
909
|
[data-scrawl-root] .scrawl-board__breadcrumb {
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
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);
|
|
707
915
|
pointer-events: none;
|
|
708
916
|
}
|
|
709
|
-
|
|
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; }
|
|
710
921
|
[data-scrawl-root] .scrawl-board__breadcrumb li { display: flex; align-items: center; gap: 2px; min-inline-size: 0; }
|
|
711
|
-
[data-scrawl-root] .scrawl-board__breadcrumb li >
|
|
712
|
-
[data-scrawl-root] .scrawl-
|
|
713
|
-
[data-scrawl-root] .scrawl-
|
|
714
|
-
|
|
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); }
|
|
715
938
|
|
|
716
|
-
/*
|
|
717
|
-
[data-scrawl-root] .scrawl-
|
|
939
|
+
/* One menu style for the switcher and every crumb. */
|
|
940
|
+
[data-scrawl-root] .scrawl-board__navigator-menu {
|
|
718
941
|
position: absolute;
|
|
719
|
-
inset-block:
|
|
942
|
+
inset-block-start: calc(100% + 8px);
|
|
720
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);
|
|
721
999
|
inline-size: var(--scrawl-sidebar-size);
|
|
722
1000
|
z-index: 37;
|
|
723
|
-
/* Closed: slid off to the start edge, then hidden once the slide ends. */
|
|
724
|
-
transform: translateX(-100%);
|
|
725
|
-
visibility: hidden;
|
|
726
|
-
transition: transform var(--scrawl-sidebar-motion) var(--scrawl-sidebar-easing), visibility 0s linear var(--scrawl-sidebar-motion);
|
|
727
1001
|
display: grid;
|
|
728
1002
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
|
|
729
|
-
|
|
730
|
-
|
|
1003
|
+
overflow: hidden;
|
|
1004
|
+
box-shadow: var(--scrawl-float-shadow);
|
|
731
1005
|
color: var(--scrawl-color-text);
|
|
732
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);
|
|
733
1011
|
}
|
|
734
1012
|
[data-scrawl-root] .scrawl-board__pages[data-open] {
|
|
735
1013
|
transform: none;
|
|
736
1014
|
visibility: visible;
|
|
737
1015
|
transition: transform var(--scrawl-sidebar-motion) var(--scrawl-sidebar-easing), visibility 0s;
|
|
738
1016
|
}
|
|
739
|
-
[data-scrawl-root] .scrawl-board__pages:dir(rtl):not([data-open]) { transform: translateX(100%); }
|
|
1017
|
+
[data-scrawl-root] .scrawl-board__pages:dir(rtl):not([data-open]) { transform: translateX(calc(100% + var(--scrawl-chrome-inset))); }
|
|
740
1018
|
[data-scrawl-root] .scrawl-board__sections-column,
|
|
741
1019
|
[data-scrawl-root] .scrawl-board__pages-column { display: flex; flex-direction: column; min-block-size: 0; min-inline-size: 0; }
|
|
742
|
-
[data-scrawl-root] .scrawl-board__sections-column { background: var(--scrawl-color-surface); }
|
|
1020
|
+
[data-scrawl-root] .scrawl-board__sections-column { background: var(--scrawl-color-surface-raised); }
|
|
743
1021
|
[data-scrawl-root] .scrawl-board__pages-column { border-inline-start: 1px solid var(--scrawl-color-chrome-border); }
|
|
744
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); }
|
|
745
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; }
|
|
746
|
-
[data-scrawl-root] .scrawl-board__pages h2 span { margin-inline-start: 6px; letter-spacing: 0; font-weight: 400; }
|
|
747
1024
|
[data-scrawl-root] .scrawl-board__page-list { flex: 1; min-block-size: 0; overflow-y: auto; padding: 8px; }
|
|
748
1025
|
[data-scrawl-root] .scrawl-board__page-row { display: flex; align-items: center; border: 1px solid transparent; border-radius: 10px; margin-block-end: 4px; }
|
|
749
1026
|
[data-scrawl-root] .scrawl-board__page-row:hover { background: var(--scrawl-color-surface-muted); }
|
|
750
|
-
[data-scrawl-root] .scrawl-board__sections-column .scrawl-board__page-row[data-active="true"]
|
|
751
|
-
[data-scrawl-root] .scrawl-board__pages-column .scrawl-board__page-row[data-active="true"] { background: var(--scrawl-
|
|
752
|
-
[data-scrawl-root] .scrawl-board__notebook-dropdown .scrawl-board__page-row[data-active="true"] { background: var(--scrawl-color-selection); }
|
|
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); }
|
|
753
1029
|
[data-scrawl-root] .scrawl-board__page-row[data-active="true"] .scrawl-board__page-select { font-weight: 600; }
|
|
754
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; }
|
|
755
1031
|
[data-scrawl-root] .scrawl-board__page-select > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
@@ -772,17 +1048,27 @@
|
|
|
772
1048
|
[data-scrawl-root] [data-scrawl-default-ui] .scrawl-board__pages .scrawl-board__add-page { border: 1px dashed var(--scrawl-color-chrome-border); }
|
|
773
1049
|
[data-scrawl-root] .scrawl-board__pages .scrawl-board__add-page svg { inline-size: 18px; block-size: 18px; }
|
|
774
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; }
|
|
775
1053
|
@container (max-width: 600px) {
|
|
776
|
-
/*
|
|
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)); }
|
|
777
1058
|
[data-scrawl-root] [data-scrawl-default-ui][data-pages-open] .scrawl-board__tools,
|
|
778
1059
|
[data-scrawl-root] [data-scrawl-default-ui][data-pages-open] .scrawl-board__breadcrumb { visibility: hidden; }
|
|
779
|
-
[data-scrawl-root]
|
|
780
|
-
[data-scrawl-root] .scrawl-
|
|
781
|
-
[data-scrawl-root] .scrawl-board__pages-column { border-inline-start: 0;
|
|
782
|
-
|
|
783
|
-
[data-scrawl-root] .scrawl-
|
|
784
|
-
[data-scrawl-root] .scrawl-
|
|
785
|
-
|
|
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; }
|
|
786
1072
|
}
|
|
787
1073
|
|
|
788
1074
|
[data-scrawl-root] .scrawl-board__page-row:has(input) .scrawl-board__page-select { display: none; }
|
|
@@ -846,7 +1132,10 @@
|
|
|
846
1132
|
[data-scrawl-root] .scrawl-board__pages header h2,
|
|
847
1133
|
[data-scrawl-root] .scrawl-board__pages header [aria-label="New page"] { display: none; }
|
|
848
1134
|
[data-scrawl-root] .scrawl-board__pages .scrawl-board__compact-section { display: block; }
|
|
849
|
-
|
|
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; }
|
|
850
1139
|
[data-scrawl-root] .scrawl-board__pages .scrawl-board__page-list { padding: 0 4px; }
|
|
851
1140
|
[data-scrawl-root] .scrawl-board__pages .scrawl-board__add-page { margin: 0 4px; min-block-size: 44px; padding: 8px; }
|
|
852
1141
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@scrawl-board/board",
|
|
3
|
-
"version": "0.1.0-beta.
|
|
3
|
+
"version": "0.1.0-beta.11",
|
|
4
4
|
"description": "The Scrawl Board SDK: an embeddable, collaborative infinite-canvas whiteboard for React and vanilla JS/TS apps.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|