@juxtui/ui 0.6.0 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +64 -64
- package/dist/JTooltip-CAL9lsPF.js.map +1 -1
- package/dist/editor.js.map +1 -1
- package/dist/nuxt.js.map +1 -1
- package/dist/style.css +368 -368
- package/package.json +1 -1
package/dist/style.css
CHANGED
|
@@ -229,571 +229,571 @@
|
|
|
229
229
|
|
|
230
230
|
@layer theme, base, juxt, components, utilities;
|
|
231
231
|
@layer juxt {
|
|
232
|
-
.j-editor-button {
|
|
233
|
-
display: inline-grid;
|
|
234
|
-
flex: none;
|
|
235
|
-
place-items: center;
|
|
236
|
-
width: var(--juxt-control-sm);
|
|
237
|
-
height: var(--juxt-control-sm);
|
|
238
|
-
padding: 0;
|
|
239
|
-
border: 0;
|
|
240
|
-
border-radius: var(--juxt-radius-sm);
|
|
241
|
-
background: transparent;
|
|
242
|
-
color: var(--juxt-fg-secondary);
|
|
243
|
-
cursor: pointer;
|
|
244
|
-
-webkit-tap-highlight-color: transparent;
|
|
232
|
+
.j-editor-button {
|
|
233
|
+
display: inline-grid;
|
|
234
|
+
flex: none;
|
|
235
|
+
place-items: center;
|
|
236
|
+
width: var(--juxt-control-sm);
|
|
237
|
+
height: var(--juxt-control-sm);
|
|
238
|
+
padding: 0;
|
|
239
|
+
border: 0;
|
|
240
|
+
border-radius: var(--juxt-radius-sm);
|
|
241
|
+
background: transparent;
|
|
242
|
+
color: var(--juxt-fg-secondary);
|
|
243
|
+
cursor: pointer;
|
|
244
|
+
-webkit-tap-highlight-color: transparent;
|
|
245
245
|
transition-property: background-color, color, outline-color, outline-offset, transform;
|
|
246
246
|
}
|
|
247
|
-
.j-editor-button > svg {
|
|
248
|
-
width: 1rem;
|
|
247
|
+
.j-editor-button > svg {
|
|
248
|
+
width: 1rem;
|
|
249
249
|
height: 1rem;
|
|
250
250
|
}
|
|
251
|
-
.j-editor-button:hover:not(:disabled) {
|
|
252
|
-
background: var(--juxt-surface-hover);
|
|
251
|
+
.j-editor-button:hover:not(:disabled) {
|
|
252
|
+
background: var(--juxt-surface-hover);
|
|
253
253
|
color: var(--juxt-fg);
|
|
254
254
|
}
|
|
255
|
-
.j-editor-button:active:not(:disabled) {
|
|
256
|
-
transform: scale(0.94);
|
|
255
|
+
.j-editor-button:active:not(:disabled) {
|
|
256
|
+
transform: scale(0.94);
|
|
257
257
|
transition-duration: var(--juxt-duration-instant);
|
|
258
258
|
}
|
|
259
|
-
.j-editor-button.is-active {
|
|
260
|
-
background: var(--juxt-surface-active);
|
|
259
|
+
.j-editor-button.is-active {
|
|
260
|
+
background: var(--juxt-surface-active);
|
|
261
261
|
color: var(--juxt-fg);
|
|
262
262
|
}
|
|
263
|
-
.j-editor-button:disabled {
|
|
264
|
-
color: var(--juxt-fg-disabled);
|
|
263
|
+
.j-editor-button:disabled {
|
|
264
|
+
color: var(--juxt-fg-disabled);
|
|
265
265
|
cursor: not-allowed;
|
|
266
266
|
}
|
|
267
|
-
.j-editor-button__keys {
|
|
267
|
+
.j-editor-button__keys {
|
|
268
268
|
margin-left: var(--juxt-space-1-5);
|
|
269
269
|
}
|
|
270
270
|
@media (prefers-reduced-motion: reduce) {
|
|
271
|
-
.j-editor-button:active:not(:disabled) {
|
|
271
|
+
.j-editor-button:active:not(:disabled) {
|
|
272
272
|
transform: none;
|
|
273
273
|
}
|
|
274
274
|
}
|
|
275
|
-
}
|
|
275
|
+
}
|
|
276
276
|
|
|
277
277
|
@layer theme, base, juxt, components, utilities;
|
|
278
|
-
@layer juxt {
|
|
278
|
+
@layer juxt {
|
|
279
279
|
/* Frame: the same border, focus halo and invalid states as Input. */
|
|
280
|
-
.j-editor {
|
|
281
|
-
position: relative;
|
|
282
|
-
display: flex;
|
|
283
|
-
flex-direction: column;
|
|
284
|
-
border: 1px solid var(--juxt-border);
|
|
285
|
-
border-radius: var(--juxt-radius-md);
|
|
286
|
-
background: var(--juxt-surface);
|
|
287
|
-
box-shadow: var(--juxt-shadow-xs);
|
|
288
|
-
color: var(--juxt-fg);
|
|
289
|
-
font-family: var(--juxt-font-sans);
|
|
290
|
-
transition:
|
|
291
|
-
border-color var(--juxt-duration-fast) var(--juxt-ease-standard),
|
|
280
|
+
.j-editor {
|
|
281
|
+
position: relative;
|
|
282
|
+
display: flex;
|
|
283
|
+
flex-direction: column;
|
|
284
|
+
border: 1px solid var(--juxt-border);
|
|
285
|
+
border-radius: var(--juxt-radius-md);
|
|
286
|
+
background: var(--juxt-surface);
|
|
287
|
+
box-shadow: var(--juxt-shadow-xs);
|
|
288
|
+
color: var(--juxt-fg);
|
|
289
|
+
font-family: var(--juxt-font-sans);
|
|
290
|
+
transition:
|
|
291
|
+
border-color var(--juxt-duration-fast) var(--juxt-ease-standard),
|
|
292
292
|
box-shadow var(--juxt-duration-normal) var(--juxt-ease-out);
|
|
293
293
|
}
|
|
294
|
-
.dark .j-editor,
|
|
295
|
-
[data-theme='dark'] .j-editor {
|
|
294
|
+
.dark .j-editor,
|
|
295
|
+
[data-theme='dark'] .j-editor {
|
|
296
296
|
background: var(--juxt-surface-sunken);
|
|
297
297
|
}
|
|
298
|
-
.j-editor:hover:not(.is-disabled, :focus-within) {
|
|
298
|
+
.j-editor:hover:not(.is-disabled, :focus-within) {
|
|
299
299
|
border-color: var(--juxt-border-strong);
|
|
300
300
|
}
|
|
301
|
-
.j-editor:has(.ProseMirror-focused) {
|
|
302
|
-
border-color: var(--juxt-accent);
|
|
301
|
+
.j-editor:has(.ProseMirror-focused) {
|
|
302
|
+
border-color: var(--juxt-accent);
|
|
303
303
|
box-shadow: 0 0 0 3px var(--juxt-ring-soft);
|
|
304
304
|
}
|
|
305
|
-
.j-editor.is-invalid {
|
|
305
|
+
.j-editor.is-invalid {
|
|
306
306
|
border-color: var(--juxt-danger-border);
|
|
307
307
|
}
|
|
308
|
-
.j-editor.is-invalid:has(.ProseMirror-focused) {
|
|
309
|
-
border-color: var(--juxt-danger);
|
|
308
|
+
.j-editor.is-invalid:has(.ProseMirror-focused) {
|
|
309
|
+
border-color: var(--juxt-danger);
|
|
310
310
|
box-shadow: 0 0 0 3px var(--juxt-danger-ring);
|
|
311
311
|
}
|
|
312
|
-
.j-editor.is-disabled {
|
|
313
|
-
background: var(--juxt-surface-sunken);
|
|
314
|
-
box-shadow: none;
|
|
312
|
+
.j-editor.is-disabled {
|
|
313
|
+
background: var(--juxt-surface-sunken);
|
|
314
|
+
box-shadow: none;
|
|
315
315
|
opacity: 0.7;
|
|
316
|
-
}
|
|
317
|
-
|
|
316
|
+
}
|
|
317
|
+
|
|
318
318
|
/* Toolbar: stays reachable while you scroll a long document. */
|
|
319
|
-
.j-editor__toolbar {
|
|
320
|
-
position: sticky;
|
|
321
|
-
top: var(--j-editor-sticky-top, 0);
|
|
322
|
-
z-index: 1;
|
|
323
|
-
display: flex;
|
|
324
|
-
align-items: center;
|
|
325
|
-
gap: 2px;
|
|
326
|
-
padding: var(--juxt-space-1);
|
|
327
|
-
overflow-x: auto;
|
|
328
|
-
border-bottom: 1px solid var(--juxt-border-subtle);
|
|
329
|
-
border-radius: var(--juxt-radius-md) var(--juxt-radius-md) 0 0;
|
|
330
|
-
background: inherit;
|
|
319
|
+
.j-editor__toolbar {
|
|
320
|
+
position: sticky;
|
|
321
|
+
top: var(--j-editor-sticky-top, 0);
|
|
322
|
+
z-index: 1;
|
|
323
|
+
display: flex;
|
|
324
|
+
align-items: center;
|
|
325
|
+
gap: 2px;
|
|
326
|
+
padding: var(--juxt-space-1);
|
|
327
|
+
overflow-x: auto;
|
|
328
|
+
border-bottom: 1px solid var(--juxt-border-subtle);
|
|
329
|
+
border-radius: var(--juxt-radius-md) var(--juxt-radius-md) 0 0;
|
|
330
|
+
background: inherit;
|
|
331
331
|
scrollbar-width: none;
|
|
332
332
|
}
|
|
333
|
-
.j-editor__toolbar::-webkit-scrollbar {
|
|
333
|
+
.j-editor__toolbar::-webkit-scrollbar {
|
|
334
334
|
display: none;
|
|
335
335
|
}
|
|
336
|
-
.dark .j-editor__toolbar,
|
|
337
|
-
[data-theme='dark'] .j-editor__toolbar {
|
|
336
|
+
.dark .j-editor__toolbar,
|
|
337
|
+
[data-theme='dark'] .j-editor__toolbar {
|
|
338
338
|
border-bottom-color: var(--juxt-border);
|
|
339
339
|
}
|
|
340
|
-
.j-editor__divider {
|
|
341
|
-
flex: none;
|
|
342
|
-
width: 1px;
|
|
343
|
-
height: 1rem;
|
|
344
|
-
margin: 0 var(--juxt-space-1);
|
|
340
|
+
.j-editor__divider {
|
|
341
|
+
flex: none;
|
|
342
|
+
width: 1px;
|
|
343
|
+
height: 1rem;
|
|
344
|
+
margin: 0 var(--juxt-space-1);
|
|
345
345
|
background: var(--juxt-border);
|
|
346
346
|
}
|
|
347
|
-
.j-editor__spacer {
|
|
348
|
-
flex: 1;
|
|
347
|
+
.j-editor__spacer {
|
|
348
|
+
flex: 1;
|
|
349
349
|
min-width: var(--juxt-space-2);
|
|
350
350
|
}
|
|
351
|
-
.j-editor__block {
|
|
352
|
-
display: inline-flex;
|
|
353
|
-
flex: none;
|
|
354
|
-
align-items: center;
|
|
355
|
-
gap: var(--juxt-space-1-5);
|
|
356
|
-
height: var(--juxt-control-sm);
|
|
357
|
-
padding: 0 var(--juxt-space-2);
|
|
358
|
-
border: 0;
|
|
359
|
-
border-radius: var(--juxt-radius-sm);
|
|
360
|
-
background: transparent;
|
|
361
|
-
color: var(--juxt-fg);
|
|
362
|
-
font: inherit;
|
|
363
|
-
font-size: var(--juxt-text-sm);
|
|
364
|
-
font-weight: var(--juxt-weight-medium);
|
|
365
|
-
cursor: pointer;
|
|
351
|
+
.j-editor__block {
|
|
352
|
+
display: inline-flex;
|
|
353
|
+
flex: none;
|
|
354
|
+
align-items: center;
|
|
355
|
+
gap: var(--juxt-space-1-5);
|
|
356
|
+
height: var(--juxt-control-sm);
|
|
357
|
+
padding: 0 var(--juxt-space-2);
|
|
358
|
+
border: 0;
|
|
359
|
+
border-radius: var(--juxt-radius-sm);
|
|
360
|
+
background: transparent;
|
|
361
|
+
color: var(--juxt-fg);
|
|
362
|
+
font: inherit;
|
|
363
|
+
font-size: var(--juxt-text-sm);
|
|
364
|
+
font-weight: var(--juxt-weight-medium);
|
|
365
|
+
cursor: pointer;
|
|
366
366
|
transition-property: background-color, outline-color, outline-offset;
|
|
367
367
|
}
|
|
368
|
-
.j-editor__block:hover:not(:disabled) {
|
|
368
|
+
.j-editor__block:hover:not(:disabled) {
|
|
369
369
|
background: var(--juxt-surface-hover);
|
|
370
370
|
}
|
|
371
|
-
.j-editor__block:disabled {
|
|
372
|
-
color: var(--juxt-fg-disabled);
|
|
371
|
+
.j-editor__block:disabled {
|
|
372
|
+
color: var(--juxt-fg-disabled);
|
|
373
373
|
cursor: not-allowed;
|
|
374
374
|
}
|
|
375
|
-
.j-editor__block > svg {
|
|
376
|
-
width: 1rem;
|
|
377
|
-
height: 1rem;
|
|
375
|
+
.j-editor__block > svg {
|
|
376
|
+
width: 1rem;
|
|
377
|
+
height: 1rem;
|
|
378
378
|
color: var(--juxt-fg-muted);
|
|
379
379
|
}
|
|
380
|
-
.j-editor__block-label {
|
|
381
|
-
min-width: 5.5rem;
|
|
380
|
+
.j-editor__block-label {
|
|
381
|
+
min-width: 5.5rem;
|
|
382
382
|
text-align: left;
|
|
383
383
|
}
|
|
384
|
-
.j-editor__block .j-editor__block-chevron {
|
|
385
|
-
width: 0.75rem;
|
|
384
|
+
.j-editor__block .j-editor__block-chevron {
|
|
385
|
+
width: 0.75rem;
|
|
386
386
|
height: 0.75rem;
|
|
387
|
-
}
|
|
388
|
-
|
|
387
|
+
}
|
|
388
|
+
|
|
389
389
|
/* Writing area */
|
|
390
|
-
.j-editor__content {
|
|
391
|
-
flex: 1;
|
|
392
|
-
min-height: var(--j-editor-min);
|
|
393
|
-
max-height: var(--j-editor-max);
|
|
394
|
-
padding: var(--juxt-space-3) var(--juxt-space-4);
|
|
395
|
-
overflow-y: auto;
|
|
390
|
+
.j-editor__content {
|
|
391
|
+
flex: 1;
|
|
392
|
+
min-height: var(--j-editor-min);
|
|
393
|
+
max-height: var(--j-editor-max);
|
|
394
|
+
padding: var(--juxt-space-3) var(--juxt-space-4);
|
|
395
|
+
overflow-y: auto;
|
|
396
396
|
cursor: text;
|
|
397
397
|
}
|
|
398
|
-
.j-editor.is-disabled .j-editor__content,
|
|
399
|
-
.j-editor.is-readonly .j-editor__content {
|
|
398
|
+
.j-editor.is-disabled .j-editor__content,
|
|
399
|
+
.j-editor.is-readonly .j-editor__content {
|
|
400
400
|
cursor: default;
|
|
401
401
|
}
|
|
402
|
-
.j-editor__ssr {
|
|
403
|
-
margin: 0;
|
|
402
|
+
.j-editor__ssr {
|
|
403
|
+
margin: 0;
|
|
404
404
|
color: var(--juxt-fg-muted);
|
|
405
405
|
}
|
|
406
|
-
.j-editor__footer {
|
|
407
|
-
display: flex;
|
|
408
|
-
justify-content: space-between;
|
|
409
|
-
gap: var(--juxt-space-3);
|
|
410
|
-
padding: var(--juxt-space-1-5) var(--juxt-space-4);
|
|
411
|
-
border-top: 1px solid var(--juxt-border-subtle);
|
|
412
|
-
color: var(--juxt-fg-muted);
|
|
413
|
-
font-size: var(--juxt-text-xs);
|
|
406
|
+
.j-editor__footer {
|
|
407
|
+
display: flex;
|
|
408
|
+
justify-content: space-between;
|
|
409
|
+
gap: var(--juxt-space-3);
|
|
410
|
+
padding: var(--juxt-space-1-5) var(--juxt-space-4);
|
|
411
|
+
border-top: 1px solid var(--juxt-border-subtle);
|
|
412
|
+
color: var(--juxt-fg-muted);
|
|
413
|
+
font-size: var(--juxt-text-xs);
|
|
414
414
|
font-variant-numeric: tabular-nums;
|
|
415
415
|
}
|
|
416
|
-
.dark .j-editor__footer,
|
|
417
|
-
[data-theme='dark'] .j-editor__footer {
|
|
416
|
+
.dark .j-editor__footer,
|
|
417
|
+
[data-theme='dark'] .j-editor__footer {
|
|
418
418
|
border-top-color: var(--juxt-border);
|
|
419
419
|
}
|
|
420
|
-
.j-editor__footer .is-near {
|
|
420
|
+
.j-editor__footer .is-near {
|
|
421
421
|
color: var(--juxt-warning-text);
|
|
422
422
|
}
|
|
423
|
-
.j-editor__footer .is-at {
|
|
423
|
+
.j-editor__footer .is-at {
|
|
424
424
|
color: var(--juxt-danger-text);
|
|
425
|
-
}
|
|
426
|
-
|
|
427
|
-
/* ---------------------------------------------------------------------------
|
|
428
|
-
* Document typography. Deliberately close to the docs prose: calm, readable,
|
|
429
|
-
* a clear hierarchy without shouting.
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
/* ---------------------------------------------------------------------------
|
|
428
|
+
* Document typography. Deliberately close to the docs prose: calm, readable,
|
|
429
|
+
* a clear hierarchy without shouting.
|
|
430
430
|
* ------------------------------------------------------------------------ */
|
|
431
|
-
.j-editor__prose {
|
|
432
|
-
min-height: calc(var(--j-editor-min) - var(--juxt-space-6));
|
|
433
|
-
color: var(--juxt-fg);
|
|
434
|
-
font-size: 0.9375rem;
|
|
435
|
-
line-height: 1.7;
|
|
436
|
-
letter-spacing: var(--juxt-tracking-tight);
|
|
437
|
-
white-space: pre-wrap;
|
|
438
|
-
word-wrap: break-word;
|
|
439
|
-
outline: none;
|
|
440
|
-
font-variant-ligatures: none;
|
|
431
|
+
.j-editor__prose {
|
|
432
|
+
min-height: calc(var(--j-editor-min) - var(--juxt-space-6));
|
|
433
|
+
color: var(--juxt-fg);
|
|
434
|
+
font-size: 0.9375rem;
|
|
435
|
+
line-height: 1.7;
|
|
436
|
+
letter-spacing: var(--juxt-tracking-tight);
|
|
437
|
+
white-space: pre-wrap;
|
|
438
|
+
word-wrap: break-word;
|
|
439
|
+
outline: none;
|
|
440
|
+
font-variant-ligatures: none;
|
|
441
441
|
font-feature-settings: 'liga' 0;
|
|
442
442
|
}
|
|
443
|
-
.j-editor__prose > * + * {
|
|
443
|
+
.j-editor__prose > * + * {
|
|
444
444
|
margin-top: 0.75em;
|
|
445
445
|
}
|
|
446
|
-
.j-editor__prose p {
|
|
446
|
+
.j-editor__prose p {
|
|
447
447
|
margin: 0;
|
|
448
448
|
}
|
|
449
|
-
.j-editor__prose :is(h1, h2, h3) {
|
|
450
|
-
margin: 1.4em 0 0;
|
|
451
|
-
color: var(--juxt-fg);
|
|
452
|
-
font-weight: var(--juxt-weight-semibold);
|
|
453
|
-
line-height: 1.3;
|
|
449
|
+
.j-editor__prose :is(h1, h2, h3) {
|
|
450
|
+
margin: 1.4em 0 0;
|
|
451
|
+
color: var(--juxt-fg);
|
|
452
|
+
font-weight: var(--juxt-weight-semibold);
|
|
453
|
+
line-height: 1.3;
|
|
454
454
|
letter-spacing: var(--juxt-tracking-tighter);
|
|
455
455
|
}
|
|
456
|
-
.j-editor__prose > :is(h1, h2, h3):first-child {
|
|
456
|
+
.j-editor__prose > :is(h1, h2, h3):first-child {
|
|
457
457
|
margin-top: 0;
|
|
458
458
|
}
|
|
459
|
-
.j-editor__prose h1 {
|
|
459
|
+
.j-editor__prose h1 {
|
|
460
460
|
font-size: 1.625rem;
|
|
461
461
|
}
|
|
462
|
-
.j-editor__prose h2 {
|
|
462
|
+
.j-editor__prose h2 {
|
|
463
463
|
font-size: 1.3125rem;
|
|
464
464
|
}
|
|
465
|
-
.j-editor__prose h3 {
|
|
465
|
+
.j-editor__prose h3 {
|
|
466
466
|
font-size: 1.0625rem;
|
|
467
467
|
}
|
|
468
|
-
.j-editor__prose :is(ul, ol) {
|
|
469
|
-
margin-bottom: 0;
|
|
468
|
+
.j-editor__prose :is(ul, ol) {
|
|
469
|
+
margin-bottom: 0;
|
|
470
470
|
padding-left: 1.375em;
|
|
471
471
|
}
|
|
472
|
-
.j-editor__prose li + li {
|
|
472
|
+
.j-editor__prose li + li {
|
|
473
473
|
margin-top: 0.25em;
|
|
474
474
|
}
|
|
475
|
-
.j-editor__prose li > p {
|
|
475
|
+
.j-editor__prose li > p {
|
|
476
476
|
margin: 0;
|
|
477
477
|
}
|
|
478
|
-
.j-editor__prose li::marker {
|
|
478
|
+
.j-editor__prose li::marker {
|
|
479
479
|
color: var(--juxt-fg-muted);
|
|
480
480
|
}
|
|
481
|
-
.j-editor__prose ul ul {
|
|
481
|
+
.j-editor__prose ul ul {
|
|
482
482
|
list-style-type: circle;
|
|
483
|
-
}
|
|
484
|
-
|
|
483
|
+
}
|
|
484
|
+
|
|
485
485
|
/* To-do items look and feel like JCheckbox. */
|
|
486
|
-
.j-editor__prose ul[data-type='taskList'] {
|
|
487
|
-
padding-left: 0.125em;
|
|
486
|
+
.j-editor__prose ul[data-type='taskList'] {
|
|
487
|
+
padding-left: 0.125em;
|
|
488
488
|
list-style: none;
|
|
489
489
|
}
|
|
490
|
-
.j-editor__prose ul[data-type='taskList'] li {
|
|
491
|
-
display: flex;
|
|
492
|
-
align-items: flex-start;
|
|
490
|
+
.j-editor__prose ul[data-type='taskList'] li {
|
|
491
|
+
display: flex;
|
|
492
|
+
align-items: flex-start;
|
|
493
493
|
gap: 0.625em;
|
|
494
494
|
}
|
|
495
|
-
.j-editor__prose ul[data-type='taskList'] li > label {
|
|
496
|
-
display: inline-flex;
|
|
497
|
-
flex: none;
|
|
498
|
-
margin-top: 0.2em;
|
|
495
|
+
.j-editor__prose ul[data-type='taskList'] li > label {
|
|
496
|
+
display: inline-flex;
|
|
497
|
+
flex: none;
|
|
498
|
+
margin-top: 0.2em;
|
|
499
499
|
user-select: none;
|
|
500
500
|
}
|
|
501
|
-
.j-editor__prose ul[data-type='taskList'] li > div {
|
|
502
|
-
flex: 1;
|
|
501
|
+
.j-editor__prose ul[data-type='taskList'] li > div {
|
|
502
|
+
flex: 1;
|
|
503
503
|
min-width: 0;
|
|
504
504
|
}
|
|
505
|
-
.j-editor__prose ul[data-type='taskList'] input[type='checkbox'] {
|
|
506
|
-
display: grid;
|
|
507
|
-
place-content: center;
|
|
508
|
-
width: 1rem;
|
|
509
|
-
height: 1rem;
|
|
510
|
-
margin: 0;
|
|
511
|
-
border: 1px solid var(--juxt-border-strong);
|
|
512
|
-
border-radius: var(--juxt-radius-xs);
|
|
513
|
-
background: var(--juxt-surface);
|
|
514
|
-
cursor: pointer;
|
|
515
|
-
appearance: none;
|
|
516
|
-
transition:
|
|
517
|
-
background-color var(--juxt-duration-fast) var(--juxt-ease-standard),
|
|
505
|
+
.j-editor__prose ul[data-type='taskList'] input[type='checkbox'] {
|
|
506
|
+
display: grid;
|
|
507
|
+
place-content: center;
|
|
508
|
+
width: 1rem;
|
|
509
|
+
height: 1rem;
|
|
510
|
+
margin: 0;
|
|
511
|
+
border: 1px solid var(--juxt-border-strong);
|
|
512
|
+
border-radius: var(--juxt-radius-xs);
|
|
513
|
+
background: var(--juxt-surface);
|
|
514
|
+
cursor: pointer;
|
|
515
|
+
appearance: none;
|
|
516
|
+
transition:
|
|
517
|
+
background-color var(--juxt-duration-fast) var(--juxt-ease-standard),
|
|
518
518
|
border-color var(--juxt-duration-fast) var(--juxt-ease-standard);
|
|
519
519
|
}
|
|
520
|
-
.j-editor__prose ul[data-type='taskList'] input[type='checkbox']::after {
|
|
521
|
-
content: '';
|
|
522
|
-
width: 0.5rem;
|
|
523
|
-
height: 0.28rem;
|
|
524
|
-
margin-top: -0.1rem;
|
|
525
|
-
border-bottom: 2px solid var(--juxt-accent-fg);
|
|
526
|
-
border-left: 2px solid var(--juxt-accent-fg);
|
|
527
|
-
opacity: 0;
|
|
528
|
-
transform: rotate(-45deg) scale(0.6);
|
|
529
|
-
transition:
|
|
530
|
-
opacity var(--juxt-duration-instant) var(--juxt-ease-standard),
|
|
520
|
+
.j-editor__prose ul[data-type='taskList'] input[type='checkbox']::after {
|
|
521
|
+
content: '';
|
|
522
|
+
width: 0.5rem;
|
|
523
|
+
height: 0.28rem;
|
|
524
|
+
margin-top: -0.1rem;
|
|
525
|
+
border-bottom: 2px solid var(--juxt-accent-fg);
|
|
526
|
+
border-left: 2px solid var(--juxt-accent-fg);
|
|
527
|
+
opacity: 0;
|
|
528
|
+
transform: rotate(-45deg) scale(0.6);
|
|
529
|
+
transition:
|
|
530
|
+
opacity var(--juxt-duration-instant) var(--juxt-ease-standard),
|
|
531
531
|
transform var(--juxt-duration-normal) var(--juxt-ease-out);
|
|
532
532
|
}
|
|
533
|
-
.j-editor__prose ul[data-type='taskList'] input[type='checkbox']:checked {
|
|
534
|
-
border-color: var(--juxt-accent);
|
|
533
|
+
.j-editor__prose ul[data-type='taskList'] input[type='checkbox']:checked {
|
|
534
|
+
border-color: var(--juxt-accent);
|
|
535
535
|
background: var(--juxt-accent);
|
|
536
536
|
}
|
|
537
|
-
.j-editor__prose ul[data-type='taskList'] input[type='checkbox']:checked::after {
|
|
538
|
-
opacity: 1;
|
|
537
|
+
.j-editor__prose ul[data-type='taskList'] input[type='checkbox']:checked::after {
|
|
538
|
+
opacity: 1;
|
|
539
539
|
transform: rotate(-45deg);
|
|
540
540
|
}
|
|
541
|
-
.j-editor__prose ul[data-type='taskList'] input[type='checkbox']:focus-visible {
|
|
542
|
-
outline: 2px solid var(--juxt-ring);
|
|
541
|
+
.j-editor__prose ul[data-type='taskList'] input[type='checkbox']:focus-visible {
|
|
542
|
+
outline: 2px solid var(--juxt-ring);
|
|
543
543
|
outline-offset: 2px;
|
|
544
544
|
}
|
|
545
|
-
.j-editor__prose li[data-checked='true'] > div {
|
|
546
|
-
color: var(--juxt-fg-muted);
|
|
547
|
-
text-decoration: line-through;
|
|
545
|
+
.j-editor__prose li[data-checked='true'] > div {
|
|
546
|
+
color: var(--juxt-fg-muted);
|
|
547
|
+
text-decoration: line-through;
|
|
548
548
|
text-decoration-color: var(--juxt-border-strong);
|
|
549
549
|
}
|
|
550
|
-
.j-editor__prose blockquote {
|
|
551
|
-
margin-left: 0;
|
|
552
|
-
margin-right: 0;
|
|
553
|
-
padding-left: 1em;
|
|
554
|
-
border-left: 2px solid var(--juxt-border-strong);
|
|
550
|
+
.j-editor__prose blockquote {
|
|
551
|
+
margin-left: 0;
|
|
552
|
+
margin-right: 0;
|
|
553
|
+
padding-left: 1em;
|
|
554
|
+
border-left: 2px solid var(--juxt-border-strong);
|
|
555
555
|
color: var(--juxt-fg-secondary);
|
|
556
556
|
}
|
|
557
|
-
.j-editor__prose a {
|
|
558
|
-
color: var(--juxt-fg);
|
|
559
|
-
text-decoration: underline;
|
|
560
|
-
text-decoration-color: var(--juxt-border-strong);
|
|
561
|
-
text-underline-offset: 3px;
|
|
562
|
-
cursor: text;
|
|
557
|
+
.j-editor__prose a {
|
|
558
|
+
color: var(--juxt-fg);
|
|
559
|
+
text-decoration: underline;
|
|
560
|
+
text-decoration-color: var(--juxt-border-strong);
|
|
561
|
+
text-underline-offset: 3px;
|
|
562
|
+
cursor: text;
|
|
563
563
|
transition: text-decoration-color var(--juxt-duration-fast) var(--juxt-ease-standard);
|
|
564
564
|
}
|
|
565
|
-
.j-editor__prose a:hover {
|
|
565
|
+
.j-editor__prose a:hover {
|
|
566
566
|
text-decoration-color: var(--juxt-accent);
|
|
567
567
|
}
|
|
568
|
-
.j-editor__prose code {
|
|
569
|
-
padding: 0.1em 0.3em;
|
|
570
|
-
border: 1px solid var(--juxt-border-subtle);
|
|
571
|
-
border-radius: var(--juxt-radius-xs);
|
|
572
|
-
background: var(--juxt-surface-sunken);
|
|
573
|
-
font-family: var(--juxt-font-mono);
|
|
568
|
+
.j-editor__prose code {
|
|
569
|
+
padding: 0.1em 0.3em;
|
|
570
|
+
border: 1px solid var(--juxt-border-subtle);
|
|
571
|
+
border-radius: var(--juxt-radius-xs);
|
|
572
|
+
background: var(--juxt-surface-sunken);
|
|
573
|
+
font-family: var(--juxt-font-mono);
|
|
574
574
|
font-size: 0.85em;
|
|
575
575
|
}
|
|
576
|
-
.dark .j-editor__prose code,
|
|
577
|
-
[data-theme='dark'] .j-editor__prose code {
|
|
578
|
-
border-color: var(--juxt-border);
|
|
576
|
+
.dark .j-editor__prose code,
|
|
577
|
+
[data-theme='dark'] .j-editor__prose code {
|
|
578
|
+
border-color: var(--juxt-border);
|
|
579
579
|
background: var(--juxt-surface-raised);
|
|
580
580
|
}
|
|
581
|
-
.j-editor__prose pre {
|
|
582
|
-
padding: 0.875em 1em;
|
|
583
|
-
overflow-x: auto;
|
|
584
|
-
border: 1px solid var(--juxt-border-subtle);
|
|
585
|
-
border-radius: var(--juxt-radius-md);
|
|
586
|
-
background: var(--juxt-surface-sunken);
|
|
587
|
-
font-family: var(--juxt-font-mono);
|
|
588
|
-
font-size: 0.8125rem;
|
|
589
|
-
line-height: 1.65;
|
|
581
|
+
.j-editor__prose pre {
|
|
582
|
+
padding: 0.875em 1em;
|
|
583
|
+
overflow-x: auto;
|
|
584
|
+
border: 1px solid var(--juxt-border-subtle);
|
|
585
|
+
border-radius: var(--juxt-radius-md);
|
|
586
|
+
background: var(--juxt-surface-sunken);
|
|
587
|
+
font-family: var(--juxt-font-mono);
|
|
588
|
+
font-size: 0.8125rem;
|
|
589
|
+
line-height: 1.65;
|
|
590
590
|
white-space: pre;
|
|
591
591
|
}
|
|
592
|
-
.dark .j-editor__prose pre,
|
|
593
|
-
[data-theme='dark'] .j-editor__prose pre {
|
|
594
|
-
border-color: var(--juxt-border);
|
|
592
|
+
.dark .j-editor__prose pre,
|
|
593
|
+
[data-theme='dark'] .j-editor__prose pre {
|
|
594
|
+
border-color: var(--juxt-border);
|
|
595
595
|
background: var(--juxt-bg);
|
|
596
596
|
}
|
|
597
|
-
.j-editor__prose pre code {
|
|
598
|
-
padding: 0;
|
|
599
|
-
border: 0;
|
|
600
|
-
background: none;
|
|
597
|
+
.j-editor__prose pre code {
|
|
598
|
+
padding: 0;
|
|
599
|
+
border: 0;
|
|
600
|
+
background: none;
|
|
601
601
|
font-size: inherit;
|
|
602
602
|
}
|
|
603
|
-
.j-editor__prose hr {
|
|
604
|
-
height: 1px;
|
|
605
|
-
margin: 1.5em 0;
|
|
606
|
-
border: 0;
|
|
603
|
+
.j-editor__prose hr {
|
|
604
|
+
height: 1px;
|
|
605
|
+
margin: 1.5em 0;
|
|
606
|
+
border: 0;
|
|
607
607
|
background: var(--juxt-border);
|
|
608
608
|
}
|
|
609
|
-
.j-editor__prose hr.ProseMirror-selectednode {
|
|
610
|
-
outline: 2px solid var(--juxt-ring);
|
|
609
|
+
.j-editor__prose hr.ProseMirror-selectednode {
|
|
610
|
+
outline: 2px solid var(--juxt-ring);
|
|
611
611
|
outline-offset: 4px;
|
|
612
612
|
}
|
|
613
|
-
.j-editor__prose mark {
|
|
614
|
-
padding: 0.05em 0.1em;
|
|
615
|
-
border-radius: 2px;
|
|
616
|
-
background: var(--juxt-warning-soft);
|
|
613
|
+
.j-editor__prose mark {
|
|
614
|
+
padding: 0.05em 0.1em;
|
|
615
|
+
border-radius: 2px;
|
|
616
|
+
background: var(--juxt-warning-soft);
|
|
617
617
|
color: inherit;
|
|
618
618
|
}
|
|
619
|
-
.j-editor__prose ::selection {
|
|
619
|
+
.j-editor__prose ::selection {
|
|
620
620
|
background: var(--juxt-accent-soft);
|
|
621
|
-
}
|
|
622
|
-
|
|
621
|
+
}
|
|
622
|
+
|
|
623
623
|
/* Placeholder: on an empty document, and on each empty heading. */
|
|
624
|
-
.j-editor__prose .is-empty::before {
|
|
625
|
-
content: attr(data-placeholder);
|
|
626
|
-
float: left;
|
|
627
|
-
height: 0;
|
|
628
|
-
color: var(--juxt-fg-muted);
|
|
624
|
+
.j-editor__prose .is-empty::before {
|
|
625
|
+
content: attr(data-placeholder);
|
|
626
|
+
float: left;
|
|
627
|
+
height: 0;
|
|
628
|
+
color: var(--juxt-fg-muted);
|
|
629
629
|
pointer-events: none;
|
|
630
|
-
}
|
|
631
|
-
|
|
630
|
+
}
|
|
631
|
+
|
|
632
632
|
/* The per-line hint is quieter than the document placeholder. */
|
|
633
|
-
.j-editor__prose .is-empty:not(.is-editor-empty):not(h1, h2, h3)::before {
|
|
633
|
+
.j-editor__prose .is-empty:not(.is-editor-empty):not(h1, h2, h3)::before {
|
|
634
634
|
color: var(--juxt-fg-disabled);
|
|
635
635
|
}
|
|
636
|
-
.j-editor__prose .ProseMirror-gapcursor {
|
|
637
|
-
display: none;
|
|
638
|
-
position: relative;
|
|
636
|
+
.j-editor__prose .ProseMirror-gapcursor {
|
|
637
|
+
display: none;
|
|
638
|
+
position: relative;
|
|
639
639
|
pointer-events: none;
|
|
640
640
|
}
|
|
641
|
-
.j-editor__prose.ProseMirror-focused .ProseMirror-gapcursor {
|
|
641
|
+
.j-editor__prose.ProseMirror-focused .ProseMirror-gapcursor {
|
|
642
642
|
display: block;
|
|
643
643
|
}
|
|
644
|
-
.j-editor__prose .ProseMirror-gapcursor::after {
|
|
645
|
-
content: '';
|
|
646
|
-
position: absolute;
|
|
647
|
-
top: -2px;
|
|
648
|
-
display: block;
|
|
649
|
-
width: 20px;
|
|
650
|
-
border-top: 1px solid var(--juxt-fg);
|
|
644
|
+
.j-editor__prose .ProseMirror-gapcursor::after {
|
|
645
|
+
content: '';
|
|
646
|
+
position: absolute;
|
|
647
|
+
top: -2px;
|
|
648
|
+
display: block;
|
|
649
|
+
width: 20px;
|
|
650
|
+
border-top: 1px solid var(--juxt-fg);
|
|
651
651
|
animation: j-editor-cursor 1.1s steps(2, start) infinite;
|
|
652
652
|
}
|
|
653
653
|
@keyframes j-editor-cursor {
|
|
654
|
-
to {
|
|
654
|
+
to {
|
|
655
655
|
visibility: hidden;
|
|
656
656
|
}
|
|
657
|
-
}
|
|
658
|
-
|
|
657
|
+
}
|
|
658
|
+
|
|
659
659
|
/* Selection toolbar */
|
|
660
|
-
.j-editor__bubble {
|
|
661
|
-
z-index: var(--juxt-z-popover);
|
|
662
|
-
display: flex;
|
|
663
|
-
align-items: center;
|
|
664
|
-
gap: 2px;
|
|
665
|
-
padding: 3px;
|
|
666
|
-
border: 1px solid var(--juxt-border);
|
|
667
|
-
border-radius: var(--juxt-radius-md);
|
|
668
|
-
background: var(--juxt-surface-raised);
|
|
669
|
-
box-shadow: var(--juxt-shadow-md);
|
|
660
|
+
.j-editor__bubble {
|
|
661
|
+
z-index: var(--juxt-z-popover);
|
|
662
|
+
display: flex;
|
|
663
|
+
align-items: center;
|
|
664
|
+
gap: 2px;
|
|
665
|
+
padding: 3px;
|
|
666
|
+
border: 1px solid var(--juxt-border);
|
|
667
|
+
border-radius: var(--juxt-radius-md);
|
|
668
|
+
background: var(--juxt-surface-raised);
|
|
669
|
+
box-shadow: var(--juxt-shadow-md);
|
|
670
670
|
animation: j-editor-bubble-in var(--juxt-duration-fast) var(--juxt-ease-out);
|
|
671
671
|
}
|
|
672
672
|
@keyframes j-editor-bubble-in {
|
|
673
|
-
from {
|
|
674
|
-
opacity: 0;
|
|
673
|
+
from {
|
|
674
|
+
opacity: 0;
|
|
675
675
|
transform: translateY(calc(var(--juxt-motion-shift) * 0.5)) scale(var(--juxt-motion-scale));
|
|
676
676
|
}
|
|
677
|
-
}
|
|
678
|
-
|
|
677
|
+
}
|
|
678
|
+
|
|
679
679
|
/* Slash menu */
|
|
680
|
-
.j-editor__slash {
|
|
681
|
-
z-index: var(--juxt-z-popover);
|
|
682
|
-
width: 17rem;
|
|
683
|
-
max-height: min(20rem, var(--j-available-height, 20rem));
|
|
684
|
-
padding: var(--juxt-space-1);
|
|
685
|
-
overflow-y: auto;
|
|
680
|
+
.j-editor__slash {
|
|
681
|
+
z-index: var(--juxt-z-popover);
|
|
682
|
+
width: 17rem;
|
|
683
|
+
max-height: min(20rem, var(--j-available-height, 20rem));
|
|
684
|
+
padding: var(--juxt-space-1);
|
|
685
|
+
overflow-y: auto;
|
|
686
686
|
overscroll-behavior: contain;
|
|
687
687
|
}
|
|
688
|
-
.j-editor__slash-label {
|
|
689
|
-
padding: var(--juxt-space-1-5) var(--juxt-space-2) var(--juxt-space-1);
|
|
690
|
-
color: var(--juxt-fg-muted);
|
|
691
|
-
font-size: var(--juxt-text-xs);
|
|
688
|
+
.j-editor__slash-label {
|
|
689
|
+
padding: var(--juxt-space-1-5) var(--juxt-space-2) var(--juxt-space-1);
|
|
690
|
+
color: var(--juxt-fg-muted);
|
|
691
|
+
font-size: var(--juxt-text-xs);
|
|
692
692
|
font-weight: var(--juxt-weight-medium);
|
|
693
693
|
}
|
|
694
|
-
.j-editor__slash-item {
|
|
695
|
-
position: relative;
|
|
696
|
-
display: flex;
|
|
697
|
-
align-items: center;
|
|
698
|
-
gap: var(--juxt-space-2-5);
|
|
699
|
-
padding: var(--juxt-space-1-5) var(--juxt-space-2);
|
|
700
|
-
border-radius: var(--juxt-radius-sm);
|
|
701
|
-
cursor: pointer;
|
|
694
|
+
.j-editor__slash-item {
|
|
695
|
+
position: relative;
|
|
696
|
+
display: flex;
|
|
697
|
+
align-items: center;
|
|
698
|
+
gap: var(--juxt-space-2-5);
|
|
699
|
+
padding: var(--juxt-space-1-5) var(--juxt-space-2);
|
|
700
|
+
border-radius: var(--juxt-radius-sm);
|
|
701
|
+
cursor: pointer;
|
|
702
702
|
user-select: none;
|
|
703
703
|
}
|
|
704
|
-
.j-editor__slash-item.is-active {
|
|
704
|
+
.j-editor__slash-item.is-active {
|
|
705
705
|
background: var(--juxt-surface-hover);
|
|
706
706
|
}
|
|
707
|
-
.j-editor__slash-item.is-active::before {
|
|
708
|
-
content: '';
|
|
709
|
-
position: absolute;
|
|
710
|
-
top: 0.625rem;
|
|
711
|
-
bottom: 0.625rem;
|
|
712
|
-
left: 0;
|
|
713
|
-
width: 2px;
|
|
714
|
-
border-radius: 0 2px 2px 0;
|
|
707
|
+
.j-editor__slash-item.is-active::before {
|
|
708
|
+
content: '';
|
|
709
|
+
position: absolute;
|
|
710
|
+
top: 0.625rem;
|
|
711
|
+
bottom: 0.625rem;
|
|
712
|
+
left: 0;
|
|
713
|
+
width: 2px;
|
|
714
|
+
border-radius: 0 2px 2px 0;
|
|
715
715
|
background: var(--juxt-accent);
|
|
716
716
|
}
|
|
717
|
-
.j-editor__slash-icon {
|
|
718
|
-
display: grid;
|
|
719
|
-
flex: none;
|
|
720
|
-
place-items: center;
|
|
721
|
-
width: 2rem;
|
|
722
|
-
height: 2rem;
|
|
723
|
-
border: 1px solid var(--juxt-border);
|
|
724
|
-
border-radius: var(--juxt-radius-sm);
|
|
725
|
-
background: var(--juxt-surface);
|
|
717
|
+
.j-editor__slash-icon {
|
|
718
|
+
display: grid;
|
|
719
|
+
flex: none;
|
|
720
|
+
place-items: center;
|
|
721
|
+
width: 2rem;
|
|
722
|
+
height: 2rem;
|
|
723
|
+
border: 1px solid var(--juxt-border);
|
|
724
|
+
border-radius: var(--juxt-radius-sm);
|
|
725
|
+
background: var(--juxt-surface);
|
|
726
726
|
color: var(--juxt-fg-secondary);
|
|
727
727
|
}
|
|
728
|
-
.j-editor__slash-icon > svg {
|
|
729
|
-
width: 1rem;
|
|
728
|
+
.j-editor__slash-icon > svg {
|
|
729
|
+
width: 1rem;
|
|
730
730
|
height: 1rem;
|
|
731
731
|
}
|
|
732
|
-
.j-editor__slash-text {
|
|
733
|
-
display: flex;
|
|
734
|
-
flex: 1;
|
|
735
|
-
flex-direction: column;
|
|
732
|
+
.j-editor__slash-text {
|
|
733
|
+
display: flex;
|
|
734
|
+
flex: 1;
|
|
735
|
+
flex-direction: column;
|
|
736
736
|
min-width: 0;
|
|
737
737
|
}
|
|
738
|
-
.j-editor__slash-title {
|
|
739
|
-
color: var(--juxt-fg);
|
|
740
|
-
font-size: var(--juxt-text-sm);
|
|
738
|
+
.j-editor__slash-title {
|
|
739
|
+
color: var(--juxt-fg);
|
|
740
|
+
font-size: var(--juxt-text-sm);
|
|
741
741
|
font-weight: var(--juxt-weight-medium);
|
|
742
742
|
}
|
|
743
|
-
.j-editor__slash-description {
|
|
744
|
-
overflow: hidden;
|
|
745
|
-
color: var(--juxt-fg-muted);
|
|
746
|
-
font-size: var(--juxt-text-xs);
|
|
747
|
-
text-overflow: ellipsis;
|
|
743
|
+
.j-editor__slash-description {
|
|
744
|
+
overflow: hidden;
|
|
745
|
+
color: var(--juxt-fg-muted);
|
|
746
|
+
font-size: var(--juxt-text-xs);
|
|
747
|
+
text-overflow: ellipsis;
|
|
748
748
|
white-space: nowrap;
|
|
749
749
|
}
|
|
750
|
-
.j-editor__slash-md {
|
|
751
|
-
color: var(--juxt-fg-muted);
|
|
752
|
-
font-family: var(--juxt-font-mono);
|
|
750
|
+
.j-editor__slash-md {
|
|
751
|
+
color: var(--juxt-fg-muted);
|
|
752
|
+
font-family: var(--juxt-font-mono);
|
|
753
753
|
font-size: var(--juxt-text-2xs);
|
|
754
754
|
}
|
|
755
|
-
.j-editor__slash-empty {
|
|
756
|
-
padding: var(--juxt-space-3) var(--juxt-space-2);
|
|
757
|
-
color: var(--juxt-fg-muted);
|
|
755
|
+
.j-editor__slash-empty {
|
|
756
|
+
padding: var(--juxt-space-3) var(--juxt-space-2);
|
|
757
|
+
color: var(--juxt-fg-muted);
|
|
758
758
|
font-size: var(--juxt-text-sm);
|
|
759
|
-
}
|
|
760
|
-
|
|
759
|
+
}
|
|
760
|
+
|
|
761
761
|
/* Link editor */
|
|
762
|
-
.j-editor__link {
|
|
763
|
-
z-index: var(--juxt-z-popover);
|
|
764
|
-
display: flex;
|
|
765
|
-
align-items: center;
|
|
766
|
-
gap: 2px;
|
|
767
|
-
width: min(22rem, calc(100vw - 16px));
|
|
762
|
+
.j-editor__link {
|
|
763
|
+
z-index: var(--juxt-z-popover);
|
|
764
|
+
display: flex;
|
|
765
|
+
align-items: center;
|
|
766
|
+
gap: 2px;
|
|
767
|
+
width: min(22rem, calc(100vw - 16px));
|
|
768
768
|
padding: 3px 3px 3px var(--juxt-space-2-5);
|
|
769
769
|
}
|
|
770
|
-
.j-editor__link-icon {
|
|
771
|
-
flex: none;
|
|
772
|
-
width: 0.875rem;
|
|
773
|
-
height: 0.875rem;
|
|
770
|
+
.j-editor__link-icon {
|
|
771
|
+
flex: none;
|
|
772
|
+
width: 0.875rem;
|
|
773
|
+
height: 0.875rem;
|
|
774
774
|
color: var(--juxt-fg-muted);
|
|
775
775
|
}
|
|
776
|
-
.j-editor__link-input {
|
|
777
|
-
flex: 1;
|
|
778
|
-
min-width: 0;
|
|
779
|
-
height: var(--juxt-control-sm);
|
|
780
|
-
padding: 0 var(--juxt-space-1-5);
|
|
781
|
-
border: 0;
|
|
782
|
-
outline: none;
|
|
783
|
-
background: transparent;
|
|
784
|
-
color: var(--juxt-fg);
|
|
785
|
-
font: inherit;
|
|
776
|
+
.j-editor__link-input {
|
|
777
|
+
flex: 1;
|
|
778
|
+
min-width: 0;
|
|
779
|
+
height: var(--juxt-control-sm);
|
|
780
|
+
padding: 0 var(--juxt-space-1-5);
|
|
781
|
+
border: 0;
|
|
782
|
+
outline: none;
|
|
783
|
+
background: transparent;
|
|
784
|
+
color: var(--juxt-fg);
|
|
785
|
+
font: inherit;
|
|
786
786
|
font-size: var(--juxt-text-sm);
|
|
787
787
|
}
|
|
788
|
-
.j-editor__link-input::placeholder {
|
|
788
|
+
.j-editor__link-input::placeholder {
|
|
789
789
|
color: var(--juxt-fg-muted);
|
|
790
790
|
}
|
|
791
791
|
@media (prefers-reduced-motion: reduce) {
|
|
792
|
-
.j-editor__bubble {
|
|
792
|
+
.j-editor__bubble {
|
|
793
793
|
animation: none;
|
|
794
794
|
}
|
|
795
795
|
}
|
|
796
|
-
}
|
|
796
|
+
}
|
|
797
797
|
|
|
798
798
|
@layer theme, base, juxt, components, utilities;
|
|
799
799
|
|