@inkra/react 0.3.0 → 0.5.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 +113 -3
- package/dist/Button.js +3 -2
- package/dist/PencilIcon.d.ts +10 -0
- package/dist/PencilIcon.js +83 -39
- package/dist/PencilLine.js +9 -1
- package/dist/PencilText.js +15 -9
- package/dist/accordion/Accordion.js +65 -5
- package/dist/alert-dialog/index.js +14 -4
- package/dist/audio-player/index.d.ts +2 -0
- package/dist/audio-player/index.js +131 -34
- package/dist/breadcrumb/index.js +4 -1
- package/dist/calendar/index.d.ts +4 -1
- package/dist/calendar/index.js +37 -12
- package/dist/calendar/locales.d.ts +7 -0
- package/dist/calendar/locales.js +2 -0
- package/dist/carousel/index.js +20 -10
- package/dist/choice-grid/index.d.ts +6 -1
- package/dist/choice-grid/index.js +63 -33
- package/dist/color-picker/GradientEditor.d.ts +40 -0
- package/dist/color-picker/GradientEditor.js +64 -0
- package/dist/color-picker/gradient.d.ts +25 -0
- package/dist/color-picker/gradient.js +60 -0
- package/dist/color-picker/index.d.ts +27 -7
- package/dist/color-picker/index.js +144 -40
- package/dist/color-swatch/index.d.ts +10 -0
- package/dist/color-swatch/index.js +9 -0
- package/dist/command/index.js +27 -4
- package/dist/content/index.d.ts +5 -0
- package/dist/content/index.js +15 -3
- package/dist/context-menu/index.js +1 -1
- package/dist/data-table/index.d.ts +7 -1
- package/dist/data-table/index.js +67 -16
- package/dist/data-table/model.d.ts +2 -0
- package/dist/data-table/model.js +7 -0
- package/dist/date-picker/index.d.ts +2 -0
- package/dist/date-picker/index.js +20 -21
- package/dist/day-agenda/index.d.ts +6 -1
- package/dist/day-agenda/index.js +49 -21
- package/dist/day-agenda/layout.js +65 -9
- package/dist/display/ProgressRing.js +7 -3
- package/dist/display/index.d.ts +4 -1
- package/dist/display/index.js +3 -2
- package/dist/dockable-panel/index.js +15 -13
- package/dist/drawer/index.js +11 -5
- package/dist/editable/index.d.ts +24 -2
- package/dist/editable/index.js +148 -40
- package/dist/empty/illustrations.d.ts +8 -0
- package/dist/empty/illustrations.js +78 -0
- package/dist/empty/index.d.ts +6 -1
- package/dist/empty/index.js +11 -3
- package/dist/flip/index.js +28 -8
- package/dist/form/Field.js +11 -10
- package/dist/form/Input.js +4 -1
- package/dist/form/Textarea.d.ts +3 -1
- package/dist/form/Textarea.js +9 -5
- package/dist/heatmap/index.js +4 -1
- package/dist/hotkey/index.d.ts +1 -0
- package/dist/hotkey/index.js +9 -4
- package/dist/hover-card/index.js +1 -1
- package/dist/i18n/catalog.d.ts +5 -0
- package/dist/i18n/catalog.js +289 -0
- package/dist/i18n/index.d.ts +23 -0
- package/dist/i18n/index.js +50 -0
- package/dist/image-cropper/index.js +21 -17
- package/dist/image-viewer/VideoResource.d.ts +21 -0
- package/dist/image-viewer/VideoResource.js +196 -0
- package/dist/image-viewer/index.d.ts +14 -0
- package/dist/image-viewer/index.js +141 -86
- package/dist/image-viewer/lucideGeometry.d.ts +3 -0
- package/dist/image-viewer/lucideGeometry.js +19 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.js +4 -0
- package/dist/input-number/index.js +13 -5
- package/dist/internal/cache.d.ts +4 -0
- package/dist/internal/cache.js +18 -1
- package/dist/internal/iconGeometry.d.ts +2 -0
- package/dist/internal/iconGeometry.js +32 -0
- package/dist/internal/renderTokens.d.ts +4 -0
- package/dist/internal/renderTokens.js +4 -0
- package/dist/internal/stroke.d.ts +7 -0
- package/dist/internal/stroke.js +63 -7
- package/dist/internal/surfaceBudget.d.ts +20 -0
- package/dist/internal/surfaceBudget.js +69 -0
- package/dist/internal/surfaceRenderer.js +87 -28
- package/dist/internal/surfaceVisibility.d.ts +3 -0
- package/dist/internal/surfaceVisibility.js +60 -0
- package/dist/internal/textRenderer.d.ts +3 -0
- package/dist/internal/textRenderer.js +13 -5
- package/dist/internal/usePencilSurface.js +17 -1
- package/dist/internal/wash.js +4 -3
- package/dist/journey-map/index.d.ts +1 -1
- package/dist/journey-map/index.js +6 -3
- package/dist/journey-map/terrain.js +10 -5
- package/dist/keypad/index.js +4 -1
- package/dist/layout/index.js +1 -1
- package/dist/log/index.js +42 -33
- package/dist/markdown/CodeBlock.d.ts +19 -0
- package/dist/markdown/CodeBlock.js +86 -0
- package/dist/markdown/Deletion.d.ts +2 -0
- package/dist/markdown/Deletion.js +69 -0
- package/dist/markdown/icons.d.ts +14 -0
- package/dist/markdown/icons.js +16 -0
- package/dist/markdown/index.d.ts +17 -0
- package/dist/markdown/index.js +177 -0
- package/dist/node-graph/index.d.ts +3 -1
- package/dist/node-graph/index.js +63 -28
- package/dist/number-ticker/index.js +4 -1
- package/dist/number-ticker/precision.js +9 -2
- package/dist/overflow-list/index.js +9 -6
- package/dist/overlay/Overlay.js +8 -3
- package/dist/overlay/Popover.js +3 -3
- package/dist/overlay/themeBridge.js +14 -2
- package/dist/pagination/index.d.ts +10 -1
- package/dist/pagination/index.js +13 -9
- package/dist/pan-zoom/index.d.ts +2 -0
- package/dist/pan-zoom/index.js +12 -8
- package/dist/pencil.d.ts +1 -0
- package/dist/pencil.js +4 -4
- package/dist/radar/index.d.ts +2 -0
- package/dist/radar/index.js +44 -21
- package/dist/range-slider/index.js +4 -3
- package/dist/rating/index.d.ts +4 -0
- package/dist/rating/index.js +131 -24
- package/dist/resizable/index.d.ts +1 -1
- package/dist/resizable/index.js +5 -2
- package/dist/scroll-area/index.d.ts +1 -1
- package/dist/scroll-area/index.js +5 -2
- package/dist/select/MultipleSelect.js +5 -4
- package/dist/select/SearchableSelect.js +64 -7
- package/dist/select/Select.d.ts +1 -0
- package/dist/select/Select.js +6 -2
- package/dist/select/StepperSelect.d.ts +29 -0
- package/dist/select/StepperSelect.js +122 -0
- package/dist/select/index.d.ts +2 -0
- package/dist/select/index.js +1 -0
- package/dist/select/stepperModel.d.ts +7 -0
- package/dist/select/stepperModel.js +29 -0
- package/dist/selection/Checkbox.js +4 -3
- package/dist/selection/RadioGroup.js +29 -13
- package/dist/selection/Switch.js +4 -3
- package/dist/selection/useNativeChecked.d.ts +2 -1
- package/dist/selection/useNativeChecked.js +26 -8
- package/dist/slider/index.js +50 -6
- package/dist/sortable/index.js +17 -11
- package/dist/sparkline/index.js +21 -6
- package/dist/sparkline/model.js +11 -4
- package/dist/steps/index.js +4 -1
- package/dist/styles/accordion.css +228 -0
- package/dist/styles/alert-dialog.css +139 -0
- package/dist/styles/audio-player.css +22 -0
- package/dist/styles/base.css +638 -0
- package/dist/styles/breadcrumb.css +7 -0
- package/dist/styles/calendar.css +62 -0
- package/dist/styles/carousel.css +173 -0
- package/dist/styles/choice-grid.css +226 -0
- package/dist/styles/color-picker.css +281 -0
- package/dist/styles/color-swatch.css +47 -0
- package/dist/styles/command.css +52 -0
- package/dist/styles/content.css +79 -0
- package/dist/styles/context-menu.css +35 -0
- package/dist/styles/data-table.css +31 -0
- package/dist/styles/date-picker.css +107 -0
- package/dist/styles/day-agenda.css +30 -0
- package/dist/styles/display.css +304 -0
- package/dist/styles/dockable-panel.css +110 -0
- package/dist/styles/drawer.css +133 -0
- package/dist/styles/dropdown-menu.css +68 -0
- package/dist/styles/editable.css +145 -0
- package/dist/styles/empty.css +108 -0
- package/dist/styles/flip.css +101 -0
- package/dist/styles/form.css +634 -0
- package/dist/styles/heatmap.css +256 -0
- package/dist/styles/hotkey.css +189 -0
- package/dist/styles/hover-card.css +27 -0
- package/dist/styles/image-cropper.css +205 -0
- package/dist/styles/image-viewer.css +422 -0
- package/dist/styles/input-number.css +21 -0
- package/dist/styles/journey-map.css +19 -0
- package/dist/styles/keypad.css +92 -0
- package/dist/styles/layout.css +72 -0
- package/dist/styles/leaflet.css +661 -0
- package/dist/styles/log.css +203 -0
- package/dist/styles/markdown.css +379 -0
- package/dist/styles/node-graph.css +142 -0
- package/dist/styles/number-ticker.css +83 -0
- package/dist/styles/overflow-list.css +51 -0
- package/dist/styles/overlay.css +284 -0
- package/dist/styles/pagination.css +21 -0
- package/dist/styles/pan-zoom.css +136 -0
- package/dist/styles/radar.css +1 -0
- package/dist/styles/rating.css +121 -0
- package/dist/styles/resizable.css +108 -0
- package/dist/styles/scroll-area.css +122 -0
- package/dist/styles/select.css +554 -0
- package/dist/styles/selection.css +264 -0
- package/dist/styles/slider.css +145 -0
- package/dist/styles/slot.css +109 -0
- package/dist/styles/sortable.css +159 -0
- package/dist/styles/sparkline.css +24 -0
- package/dist/styles/steps.css +27 -0
- package/dist/styles/tabs.css +79 -0
- package/dist/styles/tag-input.css +213 -0
- package/dist/styles/time-picker.css +66 -0
- package/dist/styles/timeline.css +24 -0
- package/dist/styles/toast.css +160 -0
- package/dist/styles/toggle-group.css +107 -0
- package/dist/styles/tooltip.css +78 -0
- package/dist/styles/transfer.css +148 -0
- package/dist/styles/tree-select.css +131 -0
- package/dist/styles/tree.css +59 -0
- package/dist/styles/typewriter.css +62 -0
- package/dist/styles/upload.css +60 -0
- package/dist/styles/virtual-list.css +112 -0
- package/dist/styles.css +2091 -421
- package/dist/tabs/index.d.ts +9 -0
- package/dist/tabs/index.js +69 -16
- package/dist/tabs/useOverflow.d.ts +20 -0
- package/dist/tabs/useOverflow.js +145 -0
- package/dist/tag-input/index.d.ts +7 -2
- package/dist/tag-input/index.js +81 -42
- package/dist/theme/index.d.ts +11 -0
- package/dist/theme/index.js +23 -0
- package/dist/time-picker/index.js +45 -27
- package/dist/timeline/index.js +4 -1
- package/dist/toast/index.d.ts +19 -11
- package/dist/toast/index.js +51 -8
- package/dist/toast/manager.d.ts +42 -0
- package/dist/toast/manager.js +85 -0
- package/dist/toast/useToastNavigation.d.ts +3 -0
- package/dist/toast/useToastNavigation.js +75 -0
- package/dist/tokens.css +4 -0
- package/dist/tooltip/Tooltip.js +3 -3
- package/dist/transfer/index.d.ts +5 -0
- package/dist/transfer/index.js +120 -53
- package/dist/transfer/model.d.ts +4 -0
- package/dist/transfer/model.js +37 -11
- package/dist/tree/index.d.ts +5 -1
- package/dist/tree/index.js +11 -6
- package/dist/tree-select/index.js +70 -31
- package/dist/tree-select/model.d.ts +11 -5
- package/dist/tree-select/model.js +111 -83
- package/dist/typewriter/index.js +10 -10
- package/dist/upload/index.js +50 -33
- package/dist/virtual-list/index.js +11 -6
- package/package.json +423 -3
package/dist/styles.css
CHANGED
|
@@ -800,7 +800,8 @@
|
|
|
800
800
|
z-index: 3;
|
|
801
801
|
left: 0;
|
|
802
802
|
top: 0;
|
|
803
|
-
|
|
803
|
+
/* Inactive canvases may retain geometry from a previous size or direction. */
|
|
804
|
+
display: none;
|
|
804
805
|
width: 100%;
|
|
805
806
|
height: 100%;
|
|
806
807
|
opacity: 0;
|
|
@@ -808,6 +809,7 @@
|
|
|
808
809
|
}
|
|
809
810
|
|
|
810
811
|
.inkra-field-control-hit[data-pencil-editable-ready="true"] .inkra-editable-text {
|
|
812
|
+
display: block;
|
|
811
813
|
opacity: 1;
|
|
812
814
|
}
|
|
813
815
|
|
|
@@ -876,6 +878,46 @@
|
|
|
876
878
|
z-index: 3;
|
|
877
879
|
}
|
|
878
880
|
|
|
881
|
+
.inkra-field-control-hit--textarea[data-end-action="true"] .inkra-field-control--textarea {
|
|
882
|
+
display: grid !important;
|
|
883
|
+
grid-template-columns: minmax(0, 1fr) auto;
|
|
884
|
+
}
|
|
885
|
+
|
|
886
|
+
.inkra-textarea__end-action {
|
|
887
|
+
position: relative;
|
|
888
|
+
z-index: 3;
|
|
889
|
+
display: flex;
|
|
890
|
+
align-self: start;
|
|
891
|
+
align-items: center;
|
|
892
|
+
min-block-size: var(--inkra-touch-target);
|
|
893
|
+
}
|
|
894
|
+
|
|
895
|
+
.inkra-field-control-hit--textarea[data-end-action="true"] .inkra-textarea__footer {
|
|
896
|
+
grid-column: 1 / -1;
|
|
897
|
+
}
|
|
898
|
+
|
|
899
|
+
.inkra-textarea__underline {
|
|
900
|
+
position: absolute !important;
|
|
901
|
+
inset-inline: 0;
|
|
902
|
+
inset-block-end: -4px;
|
|
903
|
+
inline-size: 100%;
|
|
904
|
+
pointer-events: none;
|
|
905
|
+
}
|
|
906
|
+
|
|
907
|
+
.inkra-field-control-hit--textarea[data-invalid="true"] .inkra-textarea__underline {
|
|
908
|
+
color: var(--inkra-danger);
|
|
909
|
+
}
|
|
910
|
+
|
|
911
|
+
.inkra-field-control-hit--textarea[data-variant="underline"] .inkra-input__action-wash {
|
|
912
|
+
inset: 4px;
|
|
913
|
+
border-radius: 3px;
|
|
914
|
+
}
|
|
915
|
+
|
|
916
|
+
.inkra-field-control-hit--textarea[data-variant="underline"] .inkra-input__action-divider {
|
|
917
|
+
inset-block-start: 8px;
|
|
918
|
+
block-size: calc(100% - 16px);
|
|
919
|
+
}
|
|
920
|
+
|
|
879
921
|
.inkra-textarea__count {
|
|
880
922
|
display: flex;
|
|
881
923
|
align-items: center;
|
|
@@ -1195,7 +1237,8 @@
|
|
|
1195
1237
|
color: ButtonText;
|
|
1196
1238
|
}
|
|
1197
1239
|
|
|
1198
|
-
.inkra-input-root[data-variant="underline"] .inkra-field-control
|
|
1240
|
+
.inkra-input-root[data-variant="underline"] .inkra-field-control,
|
|
1241
|
+
.inkra-field-control-hit--textarea[data-variant="underline"] .inkra-field-control {
|
|
1199
1242
|
border: 0;
|
|
1200
1243
|
}
|
|
1201
1244
|
|
|
@@ -1453,11 +1496,23 @@
|
|
|
1453
1496
|
line-height: var(--inkra-line-ui);
|
|
1454
1497
|
}
|
|
1455
1498
|
|
|
1456
|
-
.inkra-selection-
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
|
|
1460
|
-
|
|
1499
|
+
.inkra-selection-control__focus-ring {
|
|
1500
|
+
--inkra-accent-strong: var(--inkra-focus);
|
|
1501
|
+
|
|
1502
|
+
inset: calc(-1 * var(--inkra-focus-offset));
|
|
1503
|
+
opacity: 0;
|
|
1504
|
+
pointer-events: none;
|
|
1505
|
+
position: absolute !important;
|
|
1506
|
+
z-index: 3;
|
|
1507
|
+
}
|
|
1508
|
+
|
|
1509
|
+
.inkra-selection-control__focus-ring--inset {
|
|
1510
|
+
inset: var(--inkra-focus-width);
|
|
1511
|
+
}
|
|
1512
|
+
|
|
1513
|
+
.inkra-selection-control:has(.inkra-selection-control__input:focus-visible)
|
|
1514
|
+
.inkra-selection-control__focus-ring {
|
|
1515
|
+
opacity: 1;
|
|
1461
1516
|
}
|
|
1462
1517
|
|
|
1463
1518
|
.inkra-selection-control[data-disabled="true"] {
|
|
@@ -1505,6 +1560,7 @@
|
|
|
1505
1560
|
|
|
1506
1561
|
.inkra-radio-group__mark {
|
|
1507
1562
|
color: var(--inkra-ink);
|
|
1563
|
+
position: relative;
|
|
1508
1564
|
}
|
|
1509
1565
|
|
|
1510
1566
|
.inkra-radio-group__icon {
|
|
@@ -1538,10 +1594,6 @@
|
|
|
1538
1594
|
margin: 0;
|
|
1539
1595
|
}
|
|
1540
1596
|
|
|
1541
|
-
.inkra-radio-group__frame .inkra-selection-control:has(.inkra-selection-control__input:focus-visible) .inkra-radio-group__segment {
|
|
1542
|
-
outline-offset: calc(-1 * var(--inkra-focus-width));
|
|
1543
|
-
}
|
|
1544
|
-
|
|
1545
1597
|
.inkra-radio-group__segment {
|
|
1546
1598
|
align-items: center;
|
|
1547
1599
|
color: var(--inkra-ink);
|
|
@@ -1592,7 +1644,7 @@
|
|
|
1592
1644
|
display: inline-flex;
|
|
1593
1645
|
height: 32px;
|
|
1594
1646
|
justify-content: flex-start;
|
|
1595
|
-
overflow:
|
|
1647
|
+
overflow: visible;
|
|
1596
1648
|
padding-inline: 4px;
|
|
1597
1649
|
width: 52px;
|
|
1598
1650
|
}
|
|
@@ -1606,6 +1658,11 @@
|
|
|
1606
1658
|
transition: transform var(--inkra-motion-fast) var(--inkra-ease);
|
|
1607
1659
|
}
|
|
1608
1660
|
|
|
1661
|
+
.inkra-switch__track > .inkra-pencil-surface__ink {
|
|
1662
|
+
border-radius: inherit;
|
|
1663
|
+
overflow: hidden;
|
|
1664
|
+
}
|
|
1665
|
+
|
|
1609
1666
|
.inkra-switch[data-checked="true"] .inkra-switch__thumb {
|
|
1610
1667
|
--inkra-switch-thumb-shift: 20px;
|
|
1611
1668
|
|
|
@@ -1617,6 +1674,7 @@
|
|
|
1617
1674
|
}
|
|
1618
1675
|
|
|
1619
1676
|
@media (prefers-reduced-motion: reduce) {
|
|
1677
|
+
.inkra-selection-control__focus-ring,
|
|
1620
1678
|
.inkra-radio-segment__surface,
|
|
1621
1679
|
.inkra-switch__thumb {
|
|
1622
1680
|
transition: none;
|
|
@@ -1634,11 +1692,17 @@
|
|
|
1634
1692
|
z-index: auto;
|
|
1635
1693
|
}
|
|
1636
1694
|
|
|
1637
|
-
.inkra-selection-control__mark,
|
|
1638
|
-
.inkra-switch__track,
|
|
1639
|
-
.inkra-radio-segment__surface
|
|
1695
|
+
.inkra-selection-control .inkra-selection-control__mark,
|
|
1696
|
+
.inkra-selection-control .inkra-switch__track,
|
|
1697
|
+
.inkra-selection-control .inkra-radio-segment__surface,
|
|
1698
|
+
.inkra-selection-control .inkra-selection-control__focus-ring {
|
|
1640
1699
|
display: none;
|
|
1641
1700
|
}
|
|
1701
|
+
|
|
1702
|
+
.inkra-selection-control__input:focus-visible {
|
|
1703
|
+
outline: var(--inkra-focus-width) solid Highlight;
|
|
1704
|
+
outline-offset: var(--inkra-focus-offset);
|
|
1705
|
+
}
|
|
1642
1706
|
}
|
|
1643
1707
|
|
|
1644
1708
|
.inkra-portal-theme-bridge {
|
|
@@ -1661,7 +1725,7 @@
|
|
|
1661
1725
|
.inkra-overlay__content {
|
|
1662
1726
|
animation: inkra-overlay-content-in var(--inkra-motion-normal) var(--inkra-ease) both;
|
|
1663
1727
|
inset-block-start: 50%;
|
|
1664
|
-
|
|
1728
|
+
left: 50%;
|
|
1665
1729
|
max-height: min(80vh, calc(100dvh - var(--inkra-space-8)));
|
|
1666
1730
|
outline: 0;
|
|
1667
1731
|
position: fixed;
|
|
@@ -1771,8 +1835,8 @@
|
|
|
1771
1835
|
|
|
1772
1836
|
.inkra-popover__content {
|
|
1773
1837
|
animation: inkra-popover-content-in var(--inkra-motion-normal) var(--inkra-ease) both;
|
|
1774
|
-
max-height: min(
|
|
1775
|
-
max-width: min(24rem, calc(
|
|
1838
|
+
max-height: min(70dvh, var(--radix-popover-content-available-height, 70dvh));
|
|
1839
|
+
max-width: min(24rem, var(--radix-popover-content-available-width, calc(100dvw - var(--inkra-space-6))));
|
|
1776
1840
|
outline: 0;
|
|
1777
1841
|
transform-origin: var(--radix-popover-content-transform-origin);
|
|
1778
1842
|
width: max-content;
|
|
@@ -1789,6 +1853,7 @@
|
|
|
1789
1853
|
display: block;
|
|
1790
1854
|
max-height: inherit;
|
|
1791
1855
|
max-width: inherit;
|
|
1856
|
+
min-width: 0;
|
|
1792
1857
|
}
|
|
1793
1858
|
|
|
1794
1859
|
.inkra-popover__content-body {
|
|
@@ -1796,11 +1861,18 @@
|
|
|
1796
1861
|
max-height: inherit;
|
|
1797
1862
|
max-width: inherit;
|
|
1798
1863
|
overflow: auto;
|
|
1864
|
+
overflow-wrap: anywhere;
|
|
1799
1865
|
overscroll-behavior: contain;
|
|
1800
1866
|
padding: var(--inkra-space-4);
|
|
1801
1867
|
scrollbar-gutter: stable;
|
|
1802
1868
|
}
|
|
1803
1869
|
|
|
1870
|
+
.inkra-popover__title,
|
|
1871
|
+
.inkra-popover__description {
|
|
1872
|
+
max-width: 100%;
|
|
1873
|
+
overflow-wrap: anywhere;
|
|
1874
|
+
}
|
|
1875
|
+
|
|
1804
1876
|
.inkra-popover__arrow {
|
|
1805
1877
|
color: var(--inkra-paper);
|
|
1806
1878
|
fill: currentcolor;
|
|
@@ -1918,11 +1990,45 @@
|
|
|
1918
1990
|
}
|
|
1919
1991
|
}
|
|
1920
1992
|
|
|
1921
|
-
.inkra-search-select {
|
|
1922
|
-
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
|
|
1993
|
+
.inkra-search-select {
|
|
1994
|
+
--inkra-search-select-control-height: var(--inkra-control-md);
|
|
1995
|
+
--inkra-field-control-height: var(--inkra-search-select-control-height);
|
|
1996
|
+
|
|
1997
|
+
min-height: var(--inkra-touch-target);
|
|
1998
|
+
min-width: 0;
|
|
1999
|
+
width: 100%;
|
|
2000
|
+
}
|
|
2001
|
+
.inkra-search-select[data-size="sm"] { --inkra-search-select-control-height: var(--inkra-control-sm); }
|
|
2002
|
+
.inkra-search-select[data-size="lg"] { --inkra-search-select-control-height: var(--inkra-control-lg); }
|
|
2003
|
+
.inkra-search-select__anchor {
|
|
2004
|
+
align-items: center;
|
|
2005
|
+
block-size: var(--inkra-search-select-control-height);
|
|
2006
|
+
display: flex;
|
|
2007
|
+
gap: 0;
|
|
2008
|
+
min-width: 0;
|
|
2009
|
+
overflow: visible;
|
|
2010
|
+
width: 100%;
|
|
2011
|
+
}
|
|
2012
|
+
.inkra-search-select__input,
|
|
2013
|
+
.inkra-search-select__trigger { flex: 1 1 auto; min-width: 0; width: auto; }
|
|
2014
|
+
.inkra-search-select__input .inkra-search-select__input-control > .inkra-pencil-surface__ink,
|
|
2015
|
+
.inkra-search-select__input .inkra-search-select__input-control > .inkra-pencil-surface__border { display: none; }
|
|
2016
|
+
.inkra-search-select__anchor > .inkra-input__end-action { flex: 0 0 auto; }
|
|
2017
|
+
.inkra-search-select__anchor > .inkra-input__end-action:has(.inkra-search-select__clear:not([data-visible])) {
|
|
2018
|
+
display: none;
|
|
2019
|
+
}
|
|
2020
|
+
.inkra-search-select__trigger .inkra-button__content,
|
|
2021
|
+
.inkra-search-select__trigger .inkra-button__label,
|
|
2022
|
+
.inkra-search-select__trigger .inkra-button__label > span { min-width: 0; width: 100%; }
|
|
2023
|
+
.inkra-search-select__trigger .inkra-button__label > span { gap: var(--inkra-space-2); }
|
|
2024
|
+
.inkra-search-select__trigger .inkra-pencil-text { flex: 1 1 auto; min-width: 0; text-align: start; }
|
|
2025
|
+
.inkra-search-select__trigger .inkra-pencil-icon { flex: none; }
|
|
2026
|
+
.inkra-search-select__control:focus-within > .inkra-pencil-surface__ink,
|
|
2027
|
+
.inkra-search-select__control:focus-within > .inkra-pencil-surface__border {
|
|
2028
|
+
filter: contrast(1.28) saturate(1.08);
|
|
2029
|
+
}
|
|
2030
|
+
.inkra-search-select[data-disabled] .inkra-search-select__control { opacity: 0.55; }
|
|
2031
|
+
.inkra-search-select[data-disabled] :is(.inkra-input-root, .inkra-button) { opacity: 1; }
|
|
1926
2032
|
.inkra-search-select__summary { display: block; margin-top: 8px; font-size: var(--inkra-text-sm); }
|
|
1927
2033
|
.inkra-search-select__positioner { width: var(--anchor-width); max-width: calc(100vw - 16px); }
|
|
1928
2034
|
.inkra-search-select__popup { outline: 0; width: 100%; }
|
|
@@ -1933,6 +2039,95 @@
|
|
|
1933
2039
|
.inkra-search-select__popup [data-highlighted] .inkra-select__item-surface { color: var(--inkra-selection-foreground); }
|
|
1934
2040
|
.inkra-search-select__popup [data-disabled] { opacity: 0.5; }
|
|
1935
2041
|
|
|
2042
|
+
.inkra-select-stepper {
|
|
2043
|
+
inline-size: 20rem;
|
|
2044
|
+
max-inline-size: 100%;
|
|
2045
|
+
vertical-align: middle;
|
|
2046
|
+
}
|
|
2047
|
+
|
|
2048
|
+
.inkra-select-stepper[data-full-width="true"] {
|
|
2049
|
+
display: flex;
|
|
2050
|
+
inline-size: 100%;
|
|
2051
|
+
}
|
|
2052
|
+
|
|
2053
|
+
.inkra-select-stepper .inkra-select-stepper__control,
|
|
2054
|
+
.inkra-select-stepper .inkra-select-stepper__control > .inkra-pencil-surface__content {
|
|
2055
|
+
flex-wrap: nowrap;
|
|
2056
|
+
gap: 0;
|
|
2057
|
+
padding-inline: 0;
|
|
2058
|
+
}
|
|
2059
|
+
|
|
2060
|
+
.inkra-select-stepper__control {
|
|
2061
|
+
outline: 0;
|
|
2062
|
+
}
|
|
2063
|
+
|
|
2064
|
+
.inkra-select-stepper__value {
|
|
2065
|
+
align-items: center;
|
|
2066
|
+
appearance: none;
|
|
2067
|
+
align-self: stretch;
|
|
2068
|
+
background: transparent;
|
|
2069
|
+
border: 0;
|
|
2070
|
+
box-sizing: border-box;
|
|
2071
|
+
color: var(--inkra-ink);
|
|
2072
|
+
cursor: default;
|
|
2073
|
+
display: flex;
|
|
2074
|
+
flex: 1 1 auto;
|
|
2075
|
+
font-family: var(--inkra-font-body);
|
|
2076
|
+
font-size: var(--inkra-field-control-font-size);
|
|
2077
|
+
justify-content: center;
|
|
2078
|
+
line-height: var(--inkra-line-ui);
|
|
2079
|
+
min-inline-size: 0;
|
|
2080
|
+
overflow: hidden;
|
|
2081
|
+
padding-inline: var(--inkra-field-control-padding);
|
|
2082
|
+
text-align: center;
|
|
2083
|
+
}
|
|
2084
|
+
|
|
2085
|
+
.inkra-select-stepper__value:focus-visible {
|
|
2086
|
+
outline: 0;
|
|
2087
|
+
}
|
|
2088
|
+
|
|
2089
|
+
.inkra-select-stepper__value[data-placeholder="true"] {
|
|
2090
|
+
color: var(--inkra-ink-subtle);
|
|
2091
|
+
}
|
|
2092
|
+
|
|
2093
|
+
.inkra-select-stepper__value .inkra-pencil-text {
|
|
2094
|
+
max-inline-size: 100%;
|
|
2095
|
+
}
|
|
2096
|
+
|
|
2097
|
+
.inkra-select-stepper__button .inkra-pencil-icon {
|
|
2098
|
+
transition: transform var(--inkra-motion-fast) var(--inkra-ease);
|
|
2099
|
+
}
|
|
2100
|
+
|
|
2101
|
+
.inkra-select-stepper:dir(rtl) .inkra-select-stepper__button .inkra-pencil-icon {
|
|
2102
|
+
transform: scaleX(-1);
|
|
2103
|
+
}
|
|
2104
|
+
|
|
2105
|
+
.inkra-select-stepper__native {
|
|
2106
|
+
block-size: 1px;
|
|
2107
|
+
clip-path: inset(50%);
|
|
2108
|
+
inline-size: 1px;
|
|
2109
|
+
inset: 50%;
|
|
2110
|
+
overflow: hidden;
|
|
2111
|
+
position: absolute;
|
|
2112
|
+
white-space: nowrap;
|
|
2113
|
+
}
|
|
2114
|
+
|
|
2115
|
+
@media (forced-colors: active) {
|
|
2116
|
+
.inkra-search-select__control {
|
|
2117
|
+
background: Canvas;
|
|
2118
|
+
border: 1px solid CanvasText;
|
|
2119
|
+
}
|
|
2120
|
+
|
|
2121
|
+
.inkra-search-select[data-invalid] .inkra-search-select__control {
|
|
2122
|
+
border-color: Mark;
|
|
2123
|
+
}
|
|
2124
|
+
|
|
2125
|
+
.inkra-select-stepper__value:focus-visible {
|
|
2126
|
+
outline: var(--inkra-focus-width) solid Highlight;
|
|
2127
|
+
outline-offset: calc(-1 * var(--inkra-focus-width));
|
|
2128
|
+
}
|
|
2129
|
+
}
|
|
2130
|
+
|
|
1936
2131
|
.inkra-select__trigger {
|
|
1937
2132
|
--inkra-select-height: var(--inkra-control-md);
|
|
1938
2133
|
--inkra-select-font-size: var(--inkra-text-md);
|
|
@@ -2304,6 +2499,7 @@
|
|
|
2304
2499
|
|
|
2305
2500
|
.inkra-select__trigger-icon,
|
|
2306
2501
|
.inkra-select__focus-ring,
|
|
2502
|
+
.inkra-select-stepper__button .inkra-pencil-icon,
|
|
2307
2503
|
.inkra-select__item-surface > .inkra-pencil-surface__ink {
|
|
2308
2504
|
transition-duration: 0ms;
|
|
2309
2505
|
}
|
|
@@ -2352,7 +2548,14 @@
|
|
|
2352
2548
|
.inkra-tabs { min-width: 0; --inkra-tabs-font-size: var(--inkra-text-md); --inkra-tabs-padding: var(--inkra-space-3); --inkra-tabs-icon-size: 20px; }
|
|
2353
2549
|
.inkra-tabs[data-size="sm"] { --inkra-tabs-font-size: var(--inkra-text-sm); --inkra-tabs-padding: var(--inkra-space-2); --inkra-tabs-icon-size: 16px; }
|
|
2354
2550
|
.inkra-tabs[data-size="lg"] { --inkra-tabs-font-size: 17px; --inkra-tabs-padding: var(--inkra-space-4); --inkra-tabs-icon-size: 24px; }
|
|
2355
|
-
.inkra-tabs__list {
|
|
2551
|
+
.inkra-tabs__list {
|
|
2552
|
+
display: flex;
|
|
2553
|
+
gap: var(--inkra-space-2);
|
|
2554
|
+
max-width: 100%;
|
|
2555
|
+
overflow-x: auto;
|
|
2556
|
+
overflow-y: hidden;
|
|
2557
|
+
scroll-padding-inline: var(--inkra-focus-offset);
|
|
2558
|
+
}
|
|
2356
2559
|
.inkra-tabs__list[data-orientation="vertical"] { flex-direction: column; }
|
|
2357
2560
|
.inkra-tabs__list[data-divided] { gap: 24px; }
|
|
2358
2561
|
.inkra-tabs__divider { position: absolute; color: var(--inkra-ink-muted); opacity: 0.56; }
|
|
@@ -2378,36 +2581,54 @@
|
|
|
2378
2581
|
.inkra-tabs__trigger[data-state="active"] { color: var(--inkra-selection-foreground); }
|
|
2379
2582
|
.inkra-tabs__trigger:disabled { cursor: not-allowed; opacity: 0.55; }
|
|
2380
2583
|
.inkra-tabs__trigger:focus-visible { outline: 0; }
|
|
2381
|
-
.inkra-tabs__focus-ring {
|
|
2584
|
+
.inkra-pencil-surface.inkra-tabs__focus-ring {
|
|
2382
2585
|
--inkra-accent-strong: var(--inkra-focus);
|
|
2383
2586
|
position: absolute !important;
|
|
2384
2587
|
display: block !important;
|
|
2385
|
-
inset:
|
|
2588
|
+
inset: var(--inkra-focus-width);
|
|
2386
2589
|
pointer-events: none;
|
|
2387
2590
|
opacity: 0;
|
|
2388
2591
|
z-index: 2;
|
|
2389
2592
|
}
|
|
2390
|
-
.inkra-tabs__trigger:focus-visible > .inkra-tabs__focus-ring { opacity: 1; }
|
|
2593
|
+
.inkra-tabs__trigger:focus-visible > .inkra-pencil-surface.inkra-tabs__focus-ring { opacity: 1; }
|
|
2391
2594
|
.inkra-tabs__content:focus-visible {
|
|
2392
2595
|
outline: var(--inkra-focus-width) solid var(--inkra-focus);
|
|
2393
2596
|
outline-offset: calc(-1 * var(--inkra-focus-width));
|
|
2394
2597
|
}
|
|
2395
|
-
.inkra-tabs__selection { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
|
|
2396
|
-
.inkra-tabs__trigger[data-state="active"] > .inkra-tabs__selection { opacity: 1; }
|
|
2598
|
+
.inkra-pencil-surface.inkra-tabs__selection { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
|
|
2599
|
+
.inkra-tabs__trigger[data-state="active"] > .inkra-pencil-surface.inkra-tabs__selection { opacity: 1; }
|
|
2397
2600
|
.inkra-tabs__label { position: relative; }
|
|
2398
2601
|
.inkra-tabs__content { min-width: 0; }
|
|
2399
2602
|
.inkra-tabs__content[hidden] { display: none !important; }
|
|
2603
|
+
.inkra-tabs__overflow { display: flex; align-items: center; min-width: 0; max-width: 100%; position: relative; }
|
|
2604
|
+
.inkra-tabs__overflow > .inkra-tabs__list { flex: 1 1 auto; min-width: 0; }
|
|
2605
|
+
.inkra-tabs__scroll-button, .inkra-tabs__more { flex: 0 0 44px; }
|
|
2606
|
+
.inkra-tabs__overflow-icon { display: inline-flex; width: 32px; height: 32px; position: relative; pointer-events: none; }
|
|
2607
|
+
.inkra-tabs__overflow-icon[data-down] { transform: rotate(90deg); }
|
|
2608
|
+
.inkra-tabs__overflow-icon > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
|
|
2609
|
+
.inkra-tabs__overflow-icon > [data-pencil-icon-ready] + svg { display: none; }
|
|
2610
|
+
.inkra-tabs__overflow-icon > canvas:not([data-pencil-icon-ready]) { visibility: hidden; }
|
|
2611
|
+
.inkra-tabs__list[data-overflow="menu"] { position: relative; overflow: hidden; }
|
|
2612
|
+
.inkra-tabs__list[data-overflow="menu"][data-full-width] > .inkra-tabs__trigger { flex: 1 0 auto; }
|
|
2613
|
+
.inkra-tabs__trigger[data-overflow-hidden] { position: absolute; visibility: hidden; pointer-events: none; inset-inline-start: 0; top: 0; }
|
|
2614
|
+
.inkra-tabs__list[data-overflow="buttons"] { scrollbar-width: none; }
|
|
2615
|
+
.inkra-tabs__list[data-overflow="buttons"]::-webkit-scrollbar { display: none; }
|
|
2400
2616
|
@media (forced-colors: active) {
|
|
2401
|
-
.inkra-
|
|
2617
|
+
.inkra-tabs__overflow-icon > [data-pencil-icon-ready] + svg { display: block; }
|
|
2618
|
+
.inkra-pencil-surface.inkra-tabs__focus-ring { display: none !important; }
|
|
2402
2619
|
.inkra-tabs__trigger:focus-visible { outline: var(--inkra-focus-width) solid Highlight; outline-offset: calc(-1 * var(--inkra-focus-width)); }
|
|
2403
|
-
.inkra-tabs__selection { display: none; }
|
|
2620
|
+
.inkra-pencil-surface.inkra-tabs__selection { display: none !important; }
|
|
2404
2621
|
.inkra-tabs__trigger[data-state="active"] { color: Highlight; outline: 2px solid Highlight; outline-offset: -2px; }
|
|
2405
2622
|
}
|
|
2406
|
-
@media print {
|
|
2623
|
+
@media print {
|
|
2624
|
+
.inkra-pencil-surface.inkra-tabs__selection, .inkra-pencil-surface.inkra-tabs__focus-ring { display: none !important; }
|
|
2625
|
+
.inkra-tabs__overflow-icon > [data-pencil-icon-ready] + svg { display: block; }
|
|
2626
|
+
}
|
|
2407
2627
|
|
|
2408
2628
|
.inkra-tooltip__content {
|
|
2409
2629
|
animation: inkra-tooltip-content-in var(--inkra-motion-fast) var(--inkra-ease) both;
|
|
2410
|
-
max-
|
|
2630
|
+
max-height: min(50dvh, var(--radix-tooltip-content-available-height, 50dvh));
|
|
2631
|
+
max-width: min(20rem, var(--radix-tooltip-content-available-width, calc(100dvw - var(--inkra-space-4))));
|
|
2411
2632
|
outline: 0;
|
|
2412
2633
|
transform-origin: var(--radix-tooltip-content-transform-origin);
|
|
2413
2634
|
z-index: calc(var(--inkra-z-tooltip, 40) + var(--inkra-floating-layer-offset, 0));
|
|
@@ -2421,7 +2642,9 @@
|
|
|
2421
2642
|
.inkra-tooltip__surface {
|
|
2422
2643
|
color: var(--inkra-ink);
|
|
2423
2644
|
display: block;
|
|
2645
|
+
max-height: inherit;
|
|
2424
2646
|
max-width: inherit;
|
|
2647
|
+
min-width: 0;
|
|
2425
2648
|
}
|
|
2426
2649
|
|
|
2427
2650
|
.inkra-tooltip__content-body {
|
|
@@ -2429,9 +2652,13 @@
|
|
|
2429
2652
|
font-family: var(--inkra-font-body);
|
|
2430
2653
|
font-size: var(--inkra-text-sm);
|
|
2431
2654
|
line-height: var(--inkra-line-ui);
|
|
2655
|
+
max-height: inherit;
|
|
2432
2656
|
max-width: inherit;
|
|
2657
|
+
overflow: auto;
|
|
2433
2658
|
overflow-wrap: anywhere;
|
|
2659
|
+
overscroll-behavior: contain;
|
|
2434
2660
|
padding: var(--inkra-space-2) var(--inkra-space-3);
|
|
2661
|
+
scrollbar-gutter: stable;
|
|
2435
2662
|
user-select: text;
|
|
2436
2663
|
}
|
|
2437
2664
|
|
|
@@ -2541,7 +2768,7 @@
|
|
|
2541
2768
|
--inkra-accent-strong: var(--inkra-focus);
|
|
2542
2769
|
|
|
2543
2770
|
display: block !important;
|
|
2544
|
-
inset:
|
|
2771
|
+
inset: var(--inkra-focus-width);
|
|
2545
2772
|
opacity: 0;
|
|
2546
2773
|
pointer-events: none;
|
|
2547
2774
|
position: absolute !important;
|
|
@@ -2588,7 +2815,8 @@
|
|
|
2588
2815
|
}
|
|
2589
2816
|
|
|
2590
2817
|
.inkra-accordion__content[data-state="closed"] {
|
|
2591
|
-
animation: inkra-accordion-content-up var(--inkra-motion-normal) var(--inkra-ease);
|
|
2818
|
+
animation: inkra-accordion-content-up var(--inkra-motion-normal) var(--inkra-ease) both;
|
|
2819
|
+
height: 0;
|
|
2592
2820
|
}
|
|
2593
2821
|
|
|
2594
2822
|
.inkra-accordion__content-body {
|
|
@@ -2609,6 +2837,10 @@
|
|
|
2609
2837
|
pointer-events: none;
|
|
2610
2838
|
}
|
|
2611
2839
|
|
|
2840
|
+
.inkra-accordion__content-body.inkra-accordion__content[data-state="closed"] {
|
|
2841
|
+
padding: 0;
|
|
2842
|
+
}
|
|
2843
|
+
|
|
2612
2844
|
@keyframes inkra-accordion-body-in {
|
|
2613
2845
|
from { opacity: 0; transform: translateY(calc(-1 * var(--inkra-space-1))); }
|
|
2614
2846
|
to { opacity: 1; transform: translateY(0); }
|
|
@@ -2659,6 +2891,8 @@
|
|
|
2659
2891
|
|
|
2660
2892
|
.inkra-accordion[data-orientation="horizontal"] .inkra-accordion__content[data-state="closed"] {
|
|
2661
2893
|
animation-name: inkra-accordion-content-close-horizontal;
|
|
2894
|
+
height: auto;
|
|
2895
|
+
width: 0;
|
|
2662
2896
|
}
|
|
2663
2897
|
|
|
2664
2898
|
@media (prefers-reduced-motion: reduce) {
|
|
@@ -2674,13 +2908,13 @@
|
|
|
2674
2908
|
}
|
|
2675
2909
|
|
|
2676
2910
|
@media (forced-colors: active) {
|
|
2677
|
-
.inkra-accordion__focus-ring {
|
|
2911
|
+
.inkra-pencil-surface.inkra-accordion__focus-ring {
|
|
2678
2912
|
display: none !important;
|
|
2679
2913
|
}
|
|
2680
2914
|
|
|
2681
2915
|
.inkra-accordion__trigger:focus-visible {
|
|
2682
2916
|
outline: var(--inkra-focus-width) solid Highlight;
|
|
2683
|
-
outline-offset: var(--inkra-focus-
|
|
2917
|
+
outline-offset: calc(-1 * var(--inkra-focus-width));
|
|
2684
2918
|
}
|
|
2685
2919
|
|
|
2686
2920
|
.inkra-accordion__trigger-icon::before {
|
|
@@ -2739,11 +2973,24 @@
|
|
|
2739
2973
|
}
|
|
2740
2974
|
|
|
2741
2975
|
.inkra-skeleton {
|
|
2976
|
+
--inkra-selection-pigment: var(--inkra-ink-muted);
|
|
2742
2977
|
block-size: 16px;
|
|
2743
2978
|
inline-size: 100%;
|
|
2744
2979
|
max-inline-size: 100%;
|
|
2745
2980
|
min-inline-size: 8px;
|
|
2746
2981
|
}
|
|
2982
|
+
.inkra-skeleton[data-pencil-fallback="true"] {
|
|
2983
|
+
background: color-mix(in srgb, var(--inkra-ink-muted) 18%, transparent);
|
|
2984
|
+
border: 0;
|
|
2985
|
+
}
|
|
2986
|
+
.inkra-skeleton[data-animation="pulse"] { animation: inkra-skeleton-pulse calc(var(--inkra-motion-slow) * 4) var(--inkra-ease) infinite; }
|
|
2987
|
+
@keyframes inkra-skeleton-pulse {
|
|
2988
|
+
0%, 100% { opacity: 1; }
|
|
2989
|
+
50% { opacity: .45; }
|
|
2990
|
+
}
|
|
2991
|
+
@media (prefers-reduced-motion: reduce), (forced-colors: active), print {
|
|
2992
|
+
.inkra-skeleton[data-animation="pulse"] { animation: none; }
|
|
2993
|
+
}
|
|
2747
2994
|
|
|
2748
2995
|
.inkra-progress {
|
|
2749
2996
|
display: grid;
|
|
@@ -2971,11 +3218,18 @@
|
|
|
2971
3218
|
.inkra-progress__segment-outline { border: 1px solid CanvasText; }
|
|
2972
3219
|
.inkra-progress__segment-fill { background: Highlight; border: 0; }
|
|
2973
3220
|
|
|
2974
|
-
.inkra-skeleton {
|
|
2975
|
-
|
|
3221
|
+
.inkra-skeleton.inkra-pencil-surface {
|
|
3222
|
+
background: CanvasText;
|
|
3223
|
+
border: 0;
|
|
3224
|
+
forced-color-adjust: none;
|
|
3225
|
+
opacity: .18;
|
|
2976
3226
|
}
|
|
2977
3227
|
}
|
|
2978
3228
|
|
|
3229
|
+
@media print {
|
|
3230
|
+
.inkra-skeleton.inkra-pencil-surface { background: color-mix(in srgb, currentColor 18%, transparent); border: 0; }
|
|
3231
|
+
}
|
|
3232
|
+
|
|
2979
3233
|
@media print {
|
|
2980
3234
|
.inkra-progress__ring-ink[data-ready="true"] { visibility: hidden; }
|
|
2981
3235
|
.inkra-progress__ring-ink[data-ready="true"] + .inkra-progress__ring-fallback { visibility: visible; }
|
|
@@ -3017,6 +3271,8 @@
|
|
|
3017
3271
|
.inkra-alert__icon { display: inline-flex; width: 20px; height: 20px; flex: none; }
|
|
3018
3272
|
.inkra-alert__icon > * { width: 100%; height: 100%; }
|
|
3019
3273
|
.inkra-alert__body { display: grid; gap: var(--inkra-space-2); min-width: 0; overflow-wrap: anywhere; }
|
|
3274
|
+
.inkra-alert:has(> .inkra-alert__close) .inkra-alert__body { flex: 1; }
|
|
3275
|
+
.inkra-alert__close { flex: none; align-self: flex-start; }
|
|
3020
3276
|
.inkra-alert__title { margin: 0; font-size: 17px; line-height: var(--inkra-line-ui); }
|
|
3021
3277
|
.inkra-alert__description { font-size: var(--inkra-text-md); line-height: var(--inkra-line-body); }
|
|
3022
3278
|
.inkra-avatar { position: relative; display: inline-flex; width: 44px; height: 44px; flex: none; isolation: isolate; }
|
|
@@ -3065,8 +3321,8 @@
|
|
|
3065
3321
|
.inkra-menu {
|
|
3066
3322
|
--inkra-menu-enter-x: 0px;
|
|
3067
3323
|
--inkra-menu-enter-y: var(--inkra-space-1);
|
|
3068
|
-
min-width: 180px;
|
|
3069
|
-
max-width: min(320px, calc(100vw - 16px));
|
|
3324
|
+
min-width: min(180px, var(--radix-dropdown-menu-content-available-width, calc(100vw - 16px)));
|
|
3325
|
+
max-width: min(320px, var(--radix-dropdown-menu-content-available-width, calc(100vw - 16px)), calc(100vw - 16px));
|
|
3070
3326
|
outline: 0;
|
|
3071
3327
|
transform-origin: var(--radix-dropdown-menu-content-transform-origin);
|
|
3072
3328
|
z-index: calc(40 + var(--inkra-floating-layer-offset, 0));
|
|
@@ -3076,14 +3332,24 @@
|
|
|
3076
3332
|
.inkra-menu[data-side="right"] { --inkra-menu-enter-x: var(--inkra-space-1); --inkra-menu-enter-y: 0px; }
|
|
3077
3333
|
.inkra-menu[data-state="open"] { animation: inkra-menu-enter var(--inkra-motion-normal) var(--inkra-ease) both; }
|
|
3078
3334
|
.inkra-menu[data-state="closed"] { animation: inkra-menu-exit var(--inkra-motion-fast) var(--inkra-ease) both; pointer-events: none; }
|
|
3079
|
-
.inkra-menu__paper {
|
|
3335
|
+
.inkra-menu__paper {
|
|
3336
|
+
box-sizing: border-box;
|
|
3337
|
+
max-height: min(var(--radix-dropdown-menu-content-available-height, calc(100dvh - 16px)), calc(100dvh - 16px));
|
|
3338
|
+
max-width: 100%;
|
|
3339
|
+
overflow-x: hidden;
|
|
3340
|
+
overflow-y: auto;
|
|
3341
|
+
overscroll-behavior: contain;
|
|
3342
|
+
padding: 4px;
|
|
3343
|
+
scrollbar-gutter: stable;
|
|
3344
|
+
}
|
|
3080
3345
|
.inkra-menu__item { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 12px; min-height: 44px; box-sizing: border-box; color: var(--inkra-ink); outline: 0; cursor: default; font-family: var(--inkra-font-body); font-size: var(--inkra-text-md); line-height: var(--inkra-line-ui); }
|
|
3081
3346
|
.inkra-menu__item[data-destructive] { color: var(--inkra-danger-foreground); }
|
|
3082
3347
|
.inkra-menu__item[data-disabled] { opacity: 0.5; pointer-events: none; }
|
|
3083
3348
|
.inkra-menu__highlight { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity var(--inkra-motion-fast) var(--inkra-ease); }
|
|
3084
3349
|
.inkra-menu__item[data-highlighted] > .inkra-menu__highlight { opacity: 1; }
|
|
3085
3350
|
.inkra-menu__icon { display: inline-flex; width: 16px; height: 16px; flex: none; position: relative; }
|
|
3086
|
-
.inkra-menu__label { position: relative; min-width: 0; overflow-wrap: anywhere; }
|
|
3351
|
+
.inkra-menu__label { flex: 1 1 auto; position: relative; min-width: 0; overflow-wrap: anywhere; }
|
|
3352
|
+
.inkra-menu__label > .inkra-pencil-text { min-width: 0; overflow-wrap: anywhere; width: 100%; }
|
|
3087
3353
|
.inkra-menu__group-label { padding: 8px 12px; color: var(--inkra-ink-muted); font-size: var(--inkra-text-sm); }
|
|
3088
3354
|
.inkra-menu__separator { height: 8px; }
|
|
3089
3355
|
|
|
@@ -3107,7 +3373,18 @@
|
|
|
3107
3373
|
}
|
|
3108
3374
|
@media (forced-colors: active) {
|
|
3109
3375
|
.inkra-menu { border: 1px solid CanvasText; background: Canvas; }
|
|
3110
|
-
.inkra-
|
|
3376
|
+
.inkra-menu__highlight { display: none !important; }
|
|
3377
|
+
.inkra-menu__item[data-highlighted] {
|
|
3378
|
+
background: Highlight;
|
|
3379
|
+
color: HighlightText;
|
|
3380
|
+
forced-color-adjust: none;
|
|
3381
|
+
outline: 2px solid Highlight;
|
|
3382
|
+
outline-offset: -2px;
|
|
3383
|
+
}
|
|
3384
|
+
.inkra-menu__item[data-disabled] { color: GrayText; opacity: 1; }
|
|
3385
|
+
.inkra-menu__icon .inkra-pencil-icon { display: none !important; }
|
|
3386
|
+
.inkra-menu__item[data-state="checked"] .inkra-menu__icon::after { content: "✓"; }
|
|
3387
|
+
.inkra-menu__item[data-state="indeterminate"] .inkra-menu__icon::after { content: "—"; }
|
|
3111
3388
|
}
|
|
3112
3389
|
|
|
3113
3390
|
.inkra-slot {
|
|
@@ -3221,15 +3498,22 @@
|
|
|
3221
3498
|
}
|
|
3222
3499
|
|
|
3223
3500
|
.inkra-log {
|
|
3501
|
+
box-sizing: border-box;
|
|
3224
3502
|
color: var(--inkra-ink);
|
|
3503
|
+
container-type: inline-size;
|
|
3225
3504
|
display: grid;
|
|
3226
|
-
grid-template-
|
|
3505
|
+
grid-template-columns: minmax(0, 1fr);
|
|
3506
|
+
grid-template-rows: minmax(var(--inkra-touch-target), 1fr);
|
|
3507
|
+
inline-size: 100%;
|
|
3227
3508
|
min-block-size: 12rem;
|
|
3228
3509
|
min-inline-size: 0;
|
|
3229
|
-
overflow: hidden;
|
|
3510
|
+
overflow-x: hidden;
|
|
3511
|
+
overflow-y: auto;
|
|
3230
3512
|
}
|
|
3231
3513
|
|
|
3232
|
-
.inkra-log[data-toolbar="true"] { grid-template-rows: auto minmax(
|
|
3514
|
+
.inkra-log[data-toolbar="true"] { grid-template-rows: auto minmax(var(--inkra-touch-target), 1fr); }
|
|
3515
|
+
.inkra-log:has(> .inkra-log__latest) { grid-template-rows: minmax(var(--inkra-touch-target), 1fr) auto; }
|
|
3516
|
+
.inkra-log[data-toolbar="true"]:has(> .inkra-log__latest) { grid-template-rows: auto minmax(var(--inkra-touch-target), 1fr) auto; }
|
|
3233
3517
|
|
|
3234
3518
|
.inkra-log__toolbar {
|
|
3235
3519
|
align-items: center;
|
|
@@ -3237,6 +3521,8 @@
|
|
|
3237
3521
|
flex-wrap: wrap;
|
|
3238
3522
|
gap: var(--inkra-space-2);
|
|
3239
3523
|
justify-content: space-between;
|
|
3524
|
+
max-inline-size: 100%;
|
|
3525
|
+
min-inline-size: 0;
|
|
3240
3526
|
padding: var(--inkra-space-2) var(--inkra-space-3);
|
|
3241
3527
|
position: relative;
|
|
3242
3528
|
}
|
|
@@ -3260,14 +3546,36 @@
|
|
|
3260
3546
|
min-inline-size: 0;
|
|
3261
3547
|
}
|
|
3262
3548
|
|
|
3549
|
+
.inkra-log__filters > .inkra-button { flex: none; max-inline-size: 100%; }
|
|
3550
|
+
|
|
3263
3551
|
.inkra-log__filters .inkra-button[data-tone="info"] { color: var(--inkra-info-foreground); }
|
|
3264
3552
|
.inkra-log__filters .inkra-button[data-tone="success"] { color: var(--inkra-success-foreground); }
|
|
3265
3553
|
.inkra-log__filters .inkra-button[data-tone="warning"] { color: var(--inkra-warning-foreground); }
|
|
3266
3554
|
.inkra-log__filters .inkra-button[data-tone="danger"] { color: var(--inkra-danger-foreground); }
|
|
3267
3555
|
.inkra-log__follow-control { flex: none; }
|
|
3268
3556
|
|
|
3557
|
+
.inkra-log__viewport-frame {
|
|
3558
|
+
max-inline-size: 100%;
|
|
3559
|
+
min-block-size: var(--inkra-touch-target);
|
|
3560
|
+
min-inline-size: 0;
|
|
3561
|
+
position: relative;
|
|
3562
|
+
}
|
|
3563
|
+
|
|
3564
|
+
.inkra-log__focus-ring {
|
|
3565
|
+
--inkra-accent-strong: var(--inkra-focus);
|
|
3566
|
+
inset: var(--inkra-focus-width);
|
|
3567
|
+
opacity: 0;
|
|
3568
|
+
pointer-events: none;
|
|
3569
|
+
position: absolute !important;
|
|
3570
|
+
z-index: 3;
|
|
3571
|
+
}
|
|
3572
|
+
|
|
3269
3573
|
.inkra-log__viewport {
|
|
3574
|
+
block-size: 100%;
|
|
3575
|
+
box-sizing: border-box;
|
|
3270
3576
|
min-block-size: 0;
|
|
3577
|
+
max-inline-size: 100%;
|
|
3578
|
+
min-inline-size: 0;
|
|
3271
3579
|
outline: 0;
|
|
3272
3580
|
overflow: auto;
|
|
3273
3581
|
overscroll-behavior: contain;
|
|
@@ -3276,10 +3584,11 @@
|
|
|
3276
3584
|
}
|
|
3277
3585
|
|
|
3278
3586
|
.inkra-log__viewport:focus-visible {
|
|
3279
|
-
outline:
|
|
3280
|
-
outline-offset: calc(-1 * var(--inkra-focus-width));
|
|
3587
|
+
outline: 0;
|
|
3281
3588
|
}
|
|
3282
3589
|
|
|
3590
|
+
.inkra-log__viewport-frame:has(.inkra-log__viewport:focus-visible) > .inkra-log__focus-ring { opacity: 1; }
|
|
3591
|
+
|
|
3283
3592
|
.inkra-log__list {
|
|
3284
3593
|
display: grid;
|
|
3285
3594
|
list-style: none;
|
|
@@ -3350,20 +3659,44 @@
|
|
|
3350
3659
|
.inkra-log__latest {
|
|
3351
3660
|
align-items: center;
|
|
3352
3661
|
display: flex;
|
|
3353
|
-
|
|
3354
|
-
|
|
3355
|
-
|
|
3662
|
+
justify-content: flex-end;
|
|
3663
|
+
max-inline-size: 100%;
|
|
3664
|
+
min-inline-size: 0;
|
|
3665
|
+
padding: var(--inkra-space-2) var(--inkra-space-3);
|
|
3666
|
+
position: relative;
|
|
3356
3667
|
z-index: 2;
|
|
3357
3668
|
}
|
|
3358
3669
|
|
|
3359
|
-
|
|
3670
|
+
.inkra-log__latest-divider {
|
|
3671
|
+
color: var(--inkra-border);
|
|
3672
|
+
inset-block-start: -4px;
|
|
3673
|
+
inset-inline: 0;
|
|
3674
|
+
position: absolute;
|
|
3675
|
+
}
|
|
3676
|
+
|
|
3677
|
+
@container (max-width: 36rem) {
|
|
3360
3678
|
.inkra-log__toolbar { align-items: stretch; }
|
|
3361
3679
|
.inkra-log__filters { flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; padding-block-end: var(--inkra-space-1); }
|
|
3362
|
-
.inkra-
|
|
3680
|
+
.inkra-log__filters > .inkra-button .inkra-button__surface { height: auto; max-inline-size: 100%; min-height: var(--inkra-button-visual-height); padding-block: var(--inkra-space-2); }
|
|
3681
|
+
.inkra-log__filters > .inkra-button .inkra-button__content,
|
|
3682
|
+
.inkra-log__filters > .inkra-button .inkra-button__label,
|
|
3683
|
+
.inkra-log__filters > .inkra-button .inkra-pencil-text,
|
|
3684
|
+
.inkra-log__filters > .inkra-button .inkra-pencil-text__source { max-inline-size: 100%; min-inline-size: 0; white-space: normal; overflow-wrap: anywhere; }
|
|
3685
|
+
.inkra-log__follow-control { inline-size: 100%; margin-inline-start: 0; }
|
|
3686
|
+
.inkra-log__follow-control .inkra-button__surface { height: auto; inline-size: 100%; max-inline-size: 100%; min-height: var(--inkra-button-visual-height); padding-block: var(--inkra-space-2); }
|
|
3687
|
+
.inkra-log__follow-control .inkra-button__content,
|
|
3688
|
+
.inkra-log__follow-control .inkra-button__label,
|
|
3689
|
+
.inkra-log__follow-control .inkra-pencil-text__source { min-inline-size: 0; white-space: normal; overflow-wrap: anywhere; }
|
|
3690
|
+
.inkra-log__latest .inkra-button { inline-size: 100%; }
|
|
3691
|
+
.inkra-log__latest .inkra-button__surface { height: auto; inline-size: 100%; max-inline-size: 100%; min-height: var(--inkra-button-visual-height); padding-block: var(--inkra-space-2); }
|
|
3692
|
+
.inkra-log__latest .inkra-button__content,
|
|
3693
|
+
.inkra-log__latest .inkra-button__label,
|
|
3694
|
+
.inkra-log__latest .inkra-pencil-text__source { min-inline-size: 0; white-space: normal; overflow-wrap: anywhere; }
|
|
3363
3695
|
}
|
|
3364
3696
|
|
|
3365
3697
|
@media (forced-colors: active) {
|
|
3366
|
-
.inkra-
|
|
3698
|
+
.inkra-pencil-surface.inkra-log__focus-ring { display: none !important; }
|
|
3699
|
+
.inkra-log__viewport:focus-visible { outline: var(--inkra-focus-width) solid Highlight; outline-offset: calc(-1 * var(--inkra-focus-width)); }
|
|
3367
3700
|
.inkra-log__icon,
|
|
3368
3701
|
.inkra-log__level { color: CanvasText; }
|
|
3369
3702
|
}
|
|
@@ -3421,6 +3754,7 @@
|
|
|
3421
3754
|
.inkra-hotkey-input {
|
|
3422
3755
|
--inkra-hotkey-input-height: var(--inkra-control-md);
|
|
3423
3756
|
|
|
3757
|
+
position: relative;
|
|
3424
3758
|
display: grid;
|
|
3425
3759
|
inline-size: 20rem;
|
|
3426
3760
|
max-inline-size: 100%;
|
|
@@ -3440,17 +3774,25 @@
|
|
|
3440
3774
|
box-sizing: border-box;
|
|
3441
3775
|
inline-size: 100%;
|
|
3442
3776
|
min-inline-size: 0;
|
|
3443
|
-
|
|
3777
|
+
block-size: var(--inkra-hotkey-input-height);
|
|
3778
|
+
min-block-size: var(--inkra-hotkey-input-height);
|
|
3444
3779
|
align-items: center;
|
|
3780
|
+
margin-block: max(0px, calc((var(--inkra-touch-target) - var(--inkra-hotkey-input-height)) / 2));
|
|
3781
|
+
}
|
|
3782
|
+
|
|
3783
|
+
.inkra-hotkey-input__control > .inkra-pencil-surface__content {
|
|
3784
|
+
overflow: visible;
|
|
3785
|
+
clip-path: none;
|
|
3445
3786
|
}
|
|
3446
3787
|
|
|
3447
3788
|
.inkra-hotkey-input__native {
|
|
3448
3789
|
position: absolute;
|
|
3449
3790
|
z-index: 2;
|
|
3450
|
-
inset: 0;
|
|
3791
|
+
inset-inline: 0;
|
|
3792
|
+
inset-block: min(0px, calc((var(--inkra-hotkey-input-height) - var(--inkra-touch-target)) / 2));
|
|
3451
3793
|
box-sizing: border-box;
|
|
3452
3794
|
inline-size: 100%;
|
|
3453
|
-
block-size:
|
|
3795
|
+
block-size: auto;
|
|
3454
3796
|
border: 0;
|
|
3455
3797
|
outline: 0;
|
|
3456
3798
|
background: transparent;
|
|
@@ -3474,19 +3816,45 @@
|
|
|
3474
3816
|
}
|
|
3475
3817
|
|
|
3476
3818
|
.inkra-hotkey-input:has(.inkra-hotkey-input__clear) .inkra-hotkey-input__value {
|
|
3477
|
-
padding-inline-end: calc(var(--inkra-touch-target) + var(--inkra-space-2));
|
|
3819
|
+
padding-inline-end: calc(max(var(--inkra-touch-target), var(--inkra-hotkey-input-height)) + var(--inkra-space-2));
|
|
3478
3820
|
}
|
|
3479
3821
|
|
|
3480
3822
|
.inkra-hotkey-input__placeholder { color: var(--inkra-ink-subtle); }
|
|
3481
3823
|
|
|
3824
|
+
.inkra-hotkey-input__recording {
|
|
3825
|
+
color: var(--inkra-accent-strong);
|
|
3826
|
+
}
|
|
3827
|
+
|
|
3828
|
+
.inkra-hotkey-input__focus-ring {
|
|
3829
|
+
position: absolute !important;
|
|
3830
|
+
z-index: 4;
|
|
3831
|
+
inset: 2px;
|
|
3832
|
+
opacity: 0;
|
|
3833
|
+
pointer-events: none;
|
|
3834
|
+
transition: opacity var(--inkra-motion-fast) var(--inkra-ease);
|
|
3835
|
+
}
|
|
3836
|
+
|
|
3837
|
+
.inkra-hotkey-input[data-recording="true"] .inkra-hotkey-input__focus-ring { opacity: 1; }
|
|
3838
|
+
|
|
3839
|
+
.inkra-hotkey-input__status {
|
|
3840
|
+
position: absolute;
|
|
3841
|
+
inline-size: 1px;
|
|
3842
|
+
block-size: 1px;
|
|
3843
|
+
padding: 0;
|
|
3844
|
+
margin: -1px;
|
|
3845
|
+
overflow: hidden;
|
|
3846
|
+
clip: rect(0, 0, 0, 0);
|
|
3847
|
+
white-space: nowrap;
|
|
3848
|
+
}
|
|
3849
|
+
|
|
3482
3850
|
.inkra-hotkey-input__clear {
|
|
3483
3851
|
position: absolute;
|
|
3484
3852
|
z-index: 3;
|
|
3485
|
-
inset-block:
|
|
3853
|
+
inset-block: min(0px, calc((var(--inkra-hotkey-input-height) - var(--inkra-touch-target)) / 2));
|
|
3486
3854
|
inset-inline-end: 0;
|
|
3487
3855
|
display: inline-flex;
|
|
3488
|
-
inline-size: var(--inkra-touch-target);
|
|
3489
|
-
block-size:
|
|
3856
|
+
inline-size: max(var(--inkra-touch-target), var(--inkra-hotkey-input-height));
|
|
3857
|
+
block-size: auto;
|
|
3490
3858
|
align-items: center;
|
|
3491
3859
|
justify-content: center;
|
|
3492
3860
|
border: 0;
|
|
@@ -3514,6 +3882,10 @@
|
|
|
3514
3882
|
.inkra-hotkey-input__message { color: Mark; }
|
|
3515
3883
|
}
|
|
3516
3884
|
|
|
3885
|
+
@media (prefers-reduced-motion: reduce) {
|
|
3886
|
+
.inkra-hotkey-input__focus-ring { transition: none; }
|
|
3887
|
+
}
|
|
3888
|
+
|
|
3517
3889
|
@media print {
|
|
3518
3890
|
.inkra-hotkey__key,
|
|
3519
3891
|
.inkra-hotkey-input__control { border: 1px solid currentColor; }
|
|
@@ -3603,7 +3975,7 @@
|
|
|
3603
3975
|
}
|
|
3604
3976
|
}
|
|
3605
3977
|
|
|
3606
|
-
.inkra-audio-player { box-sizing: border-box; color: var(--inkra-ink); display: grid; gap: var(--inkra-space-3); min-inline-size: 0; padding: var(--inkra-space-4); width: min(100%, 42rem); }
|
|
3978
|
+
.inkra-audio-player { box-sizing: border-box; color: var(--inkra-ink); container-type: inline-size; display: grid; gap: var(--inkra-space-3); min-inline-size: 0; padding: var(--inkra-space-4); width: min(100%, 42rem); }
|
|
3607
3979
|
.inkra-audio-player > audio { height: 1px; opacity: 0; position: absolute; width: 1px; }
|
|
3608
3980
|
.inkra-audio-player__controls { align-items: center; display: flex; flex-wrap: wrap; gap: var(--inkra-space-2); min-inline-size: 0; }
|
|
3609
3981
|
.inkra-audio-player__seek { flex: 1 1 12rem; min-inline-size: 8rem; }
|
|
@@ -3611,12 +3983,13 @@
|
|
|
3611
3983
|
.inkra-audio-player__seek .inkra-slider, .inkra-audio-player__volume .inkra-slider { min-inline-size: 0; width: 100%; }
|
|
3612
3984
|
.inkra-audio-player__seek .inkra-slider { --inkra-slider-track-size: 28px; }
|
|
3613
3985
|
.inkra-audio-player__volume .inkra-slider { --inkra-slider-track-size: 24px; }
|
|
3614
|
-
.inkra-audio-player__settings { align-items: center; display: flex; flex: 0 1 auto; gap: var(--inkra-space-2); min-inline-size: 0; }
|
|
3615
|
-
.inkra-audio-player__time { color: var(--inkra-ink-muted); font-variant-numeric: tabular-nums; min-inline-size: 7rem; text-align: center; }
|
|
3986
|
+
.inkra-audio-player__settings { align-items: center; display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: var(--inkra-space-2); min-inline-size: 0; }
|
|
3987
|
+
.inkra-audio-player__time { color: var(--inkra-ink-muted); font-variant-numeric: tabular-nums; min-inline-size: 7rem; max-inline-size: 100%; overflow-wrap: anywhere; text-align: center; }
|
|
3616
3988
|
.inkra-audio-player__settings > .inkra-select__trigger { flex: none; min-width: 5.5rem; }
|
|
3617
3989
|
.inkra-audio-player__message { color: var(--inkra-ink-muted); margin: 0; }
|
|
3618
3990
|
.inkra-audio-player__sr-only { block-size: 1px; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; position: absolute; white-space: nowrap; inline-size: 1px; }
|
|
3619
|
-
@
|
|
3991
|
+
@container (max-width: 40rem) { .inkra-audio-player__controls { align-items: stretch; } .inkra-audio-player__time { flex: 1 0 100%; min-inline-size: 0; order: 4; text-align: start; } .inkra-audio-player__seek { flex-basis: 10rem; } .inkra-audio-player__settings { flex: 1 1 100%; order: 5; } .inkra-audio-player__volume { flex: 1 1 8rem; } }
|
|
3992
|
+
@container (max-width: 20rem) { .inkra-audio-player__controls { display: grid; grid-template-columns: var(--inkra-touch-target) minmax(0, 1fr); } .inkra-audio-player__seek { min-inline-size: 0; } .inkra-audio-player__time, .inkra-audio-player__settings { grid-column: 1 / -1; } .inkra-audio-player__settings { display: grid; grid-template-columns: var(--inkra-touch-target) minmax(0, 1fr); width: 100%; } .inkra-audio-player__volume { min-inline-size: 0; } .inkra-audio-player__settings > .inkra-select__trigger { grid-column: 1 / -1; min-width: 0; width: 100%; } }
|
|
3620
3993
|
@media (forced-colors: active) {
|
|
3621
3994
|
.inkra-audio-player__controls { color: ButtonText; }
|
|
3622
3995
|
.inkra-audio-player__time, .inkra-audio-player__message { color: CanvasText; }
|
|
@@ -3627,8 +4000,6 @@
|
|
|
3627
4000
|
|
|
3628
4001
|
.inkra-carousel {
|
|
3629
4002
|
--inkra-carousel-gap: 16px;
|
|
3630
|
-
--inkra-carousel-visible: var(--inkra-carousel-visible-base, 1);
|
|
3631
|
-
|
|
3632
4003
|
container-type: inline-size;
|
|
3633
4004
|
display: grid;
|
|
3634
4005
|
gap: var(--inkra-space-3);
|
|
@@ -3637,7 +4008,19 @@
|
|
|
3637
4008
|
position: relative;
|
|
3638
4009
|
}
|
|
3639
4010
|
|
|
4011
|
+
.inkra-carousel__focus-ring {
|
|
4012
|
+
--inkra-accent-strong: var(--inkra-focus);
|
|
4013
|
+
inset: var(--inkra-focus-width);
|
|
4014
|
+
opacity: 0;
|
|
4015
|
+
pointer-events: none;
|
|
4016
|
+
position: absolute !important;
|
|
4017
|
+
z-index: 3;
|
|
4018
|
+
}
|
|
4019
|
+
.inkra-carousel:focus-visible { outline: 0; }
|
|
4020
|
+
.inkra-carousel:focus-visible > .inkra-carousel__focus-ring { opacity: 1; }
|
|
4021
|
+
|
|
3640
4022
|
.inkra-carousel__viewport {
|
|
4023
|
+
--inkra-carousel-visible: var(--inkra-carousel-visible-base, 1);
|
|
3641
4024
|
cursor: grab;
|
|
3642
4025
|
min-inline-size: 0;
|
|
3643
4026
|
overflow: hidden;
|
|
@@ -3648,8 +4031,8 @@
|
|
|
3648
4031
|
.inkra-carousel[data-disabled] .inkra-carousel__viewport { cursor: default; }
|
|
3649
4032
|
|
|
3650
4033
|
.inkra-carousel__container {
|
|
4034
|
+
column-gap: var(--inkra-carousel-gap);
|
|
3651
4035
|
display: flex;
|
|
3652
|
-
margin-inline-end: calc(-1 * var(--inkra-carousel-gap));
|
|
3653
4036
|
min-inline-size: 0;
|
|
3654
4037
|
}
|
|
3655
4038
|
|
|
@@ -3657,7 +4040,6 @@
|
|
|
3657
4040
|
box-sizing: border-box;
|
|
3658
4041
|
flex: 0 0 calc((100% - (var(--inkra-carousel-visible) - 1) * var(--inkra-carousel-gap)) / var(--inkra-carousel-visible));
|
|
3659
4042
|
min-inline-size: 0;
|
|
3660
|
-
padding-inline-end: var(--inkra-carousel-gap);
|
|
3661
4043
|
position: relative;
|
|
3662
4044
|
}
|
|
3663
4045
|
|
|
@@ -3715,15 +4097,21 @@
|
|
|
3715
4097
|
pointer-events: none;
|
|
3716
4098
|
}
|
|
3717
4099
|
|
|
4100
|
+
.inkra-carousel__page-focus {
|
|
4101
|
+
--inkra-accent-strong: var(--inkra-focus);
|
|
4102
|
+
block-size: calc(var(--inkra-touch-target) - 4px);
|
|
4103
|
+
inline-size: calc(var(--inkra-touch-target) - 4px);
|
|
4104
|
+
opacity: 0;
|
|
4105
|
+
pointer-events: none;
|
|
4106
|
+
position: absolute !important;
|
|
4107
|
+
}
|
|
4108
|
+
|
|
3718
4109
|
.inkra-carousel__page[aria-current="true"] .inkra-carousel__page-mark {
|
|
3719
4110
|
block-size: 14px;
|
|
3720
4111
|
inline-size: 14px;
|
|
3721
4112
|
}
|
|
3722
4113
|
|
|
3723
|
-
.inkra-carousel__page:focus-visible .inkra-carousel__page-
|
|
3724
|
-
--inkra-border: var(--inkra-focus);
|
|
3725
|
-
--inkra-border-strong: var(--inkra-focus);
|
|
3726
|
-
}
|
|
4114
|
+
.inkra-carousel__page:focus-visible .inkra-carousel__page-focus { opacity: 1; }
|
|
3727
4115
|
|
|
3728
4116
|
.inkra-carousel__empty {
|
|
3729
4117
|
align-items: center;
|
|
@@ -3748,18 +4136,18 @@
|
|
|
3748
4136
|
}
|
|
3749
4137
|
|
|
3750
4138
|
@container (min-width: 30rem) {
|
|
3751
|
-
.inkra-
|
|
4139
|
+
.inkra-carousel__viewport { --inkra-carousel-visible: var(--inkra-carousel-visible-sm, var(--inkra-carousel-visible-base, 1)); }
|
|
3752
4140
|
}
|
|
3753
4141
|
|
|
3754
4142
|
@container (min-width: 48rem) {
|
|
3755
|
-
.inkra-
|
|
4143
|
+
.inkra-carousel__viewport { --inkra-carousel-visible: var(--inkra-carousel-visible-md, var(--inkra-carousel-visible-sm, var(--inkra-carousel-visible-base, 1))); }
|
|
3756
4144
|
}
|
|
3757
4145
|
|
|
3758
4146
|
@container (min-width: 64rem) {
|
|
3759
|
-
.inkra-
|
|
4147
|
+
.inkra-carousel__viewport { --inkra-carousel-visible: var(--inkra-carousel-visible-lg, var(--inkra-carousel-visible-md, var(--inkra-carousel-visible-sm, var(--inkra-carousel-visible-base, 1)))); }
|
|
3760
4148
|
}
|
|
3761
4149
|
|
|
3762
|
-
@
|
|
4150
|
+
@container (max-width: 390px) {
|
|
3763
4151
|
.inkra-carousel__toolbar { align-items: flex-start; flex-wrap: wrap; }
|
|
3764
4152
|
.inkra-carousel__pagination { order: 3; flex-basis: 100%; }
|
|
3765
4153
|
}
|
|
@@ -3769,21 +4157,25 @@
|
|
|
3769
4157
|
}
|
|
3770
4158
|
|
|
3771
4159
|
@media (forced-colors: active) {
|
|
4160
|
+
.inkra-pencil-surface.inkra-carousel__focus-ring,
|
|
4161
|
+
.inkra-pencil-surface.inkra-carousel__page-focus { display: none !important; }
|
|
4162
|
+
.inkra-carousel:focus-visible { outline: var(--inkra-focus-width) solid Highlight; outline-offset: calc(-1 * var(--inkra-focus-width)); }
|
|
3772
4163
|
.inkra-carousel__page-mark { background: Canvas; border: 1px solid ButtonText; }
|
|
3773
4164
|
.inkra-carousel__page[aria-current="true"] .inkra-carousel__page-mark { background: Highlight; border-color: Highlight; forced-color-adjust: none; }
|
|
3774
|
-
.inkra-carousel__page:focus-visible { outline: var(--inkra-focus-width) solid Highlight; outline-offset: var(--inkra-focus-
|
|
4165
|
+
.inkra-carousel__page:focus-visible { outline: var(--inkra-focus-width) solid Highlight; outline-offset: calc(-1 * var(--inkra-focus-width)); }
|
|
3775
4166
|
}
|
|
3776
4167
|
|
|
3777
4168
|
@media print {
|
|
3778
4169
|
.inkra-carousel__toolbar { display: none; }
|
|
3779
4170
|
.inkra-carousel__viewport { overflow: visible; }
|
|
3780
|
-
.inkra-carousel__container { flex-wrap: wrap; gap: var(--inkra-carousel-gap);
|
|
3781
|
-
.inkra-carousel__slide { flex-basis: auto;
|
|
4171
|
+
.inkra-carousel__container { flex-wrap: wrap; gap: var(--inkra-carousel-gap); }
|
|
4172
|
+
.inkra-carousel__slide { flex-basis: auto; }
|
|
3782
4173
|
}
|
|
3783
4174
|
|
|
3784
4175
|
.inkra-choice-grid {
|
|
3785
4176
|
border: 0;
|
|
3786
4177
|
color: var(--inkra-ink);
|
|
4178
|
+
container-type: inline-size;
|
|
3787
4179
|
margin: 0;
|
|
3788
4180
|
max-inline-size: 100%;
|
|
3789
4181
|
min-inline-size: 0;
|
|
@@ -3824,6 +4216,7 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
3824
4216
|
}
|
|
3825
4217
|
|
|
3826
4218
|
.inkra-choice-grid__selection,
|
|
4219
|
+
.inkra-choice-grid__focus,
|
|
3827
4220
|
.inkra-choice-grid__outline {
|
|
3828
4221
|
inset: 0;
|
|
3829
4222
|
pointer-events: none;
|
|
@@ -3835,6 +4228,13 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
3835
4228
|
z-index: 0;
|
|
3836
4229
|
}
|
|
3837
4230
|
|
|
4231
|
+
.inkra-choice-grid__focus {
|
|
4232
|
+
--inkra-accent-strong: var(--inkra-focus);
|
|
4233
|
+
inset: calc(-1 * var(--inkra-focus-offset));
|
|
4234
|
+
opacity: 0;
|
|
4235
|
+
z-index: 3;
|
|
4236
|
+
}
|
|
4237
|
+
|
|
3838
4238
|
.inkra-choice-grid__outline { z-index: 2; }
|
|
3839
4239
|
|
|
3840
4240
|
.inkra-choice-grid__option:has(.inkra-selection-control__input:checked) .inkra-choice-grid__selection {
|
|
@@ -3921,6 +4321,10 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
3921
4321
|
overflow-wrap: anywhere;
|
|
3922
4322
|
}
|
|
3923
4323
|
|
|
4324
|
+
.inkra-choice-grid__control .inkra-selection-control__focus-ring {
|
|
4325
|
+
display: none !important;
|
|
4326
|
+
}
|
|
4327
|
+
|
|
3924
4328
|
.inkra-choice-grid__messages {
|
|
3925
4329
|
display: grid;
|
|
3926
4330
|
gap: var(--inkra-space-1);
|
|
@@ -3942,8 +4346,11 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
3942
4346
|
}
|
|
3943
4347
|
|
|
3944
4348
|
.inkra-choice-grid__option:has(.inkra-selection-control__input:focus-visible) {
|
|
3945
|
-
outline:
|
|
3946
|
-
|
|
4349
|
+
outline: none;
|
|
4350
|
+
}
|
|
4351
|
+
|
|
4352
|
+
.inkra-choice-grid__option:has(.inkra-selection-control__input:focus-visible) .inkra-choice-grid__focus {
|
|
4353
|
+
opacity: 1;
|
|
3947
4354
|
}
|
|
3948
4355
|
|
|
3949
4356
|
.inkra-choice-grid__option:has(.inkra-selection-control__input:focus-visible) .inkra-selection-control__mark {
|
|
@@ -3957,6 +4364,13 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
3957
4364
|
}
|
|
3958
4365
|
}
|
|
3959
4366
|
|
|
4367
|
+
@container (max-width: 640px) {
|
|
4368
|
+
.inkra-choice-grid[data-columns] .inkra-radio-group__items,
|
|
4369
|
+
.inkra-choice-grid[data-columns] .inkra-choice-grid__items {
|
|
4370
|
+
grid-template-columns: minmax(0, 1fr);
|
|
4371
|
+
}
|
|
4372
|
+
}
|
|
4373
|
+
|
|
3960
4374
|
@media (forced-colors: active) {
|
|
3961
4375
|
.inkra-choice-grid__option {
|
|
3962
4376
|
border: 1px solid CanvasText;
|
|
@@ -3968,12 +4382,70 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
3968
4382
|
outline-offset: -3px;
|
|
3969
4383
|
}
|
|
3970
4384
|
|
|
3971
|
-
.inkra-choice-
|
|
3972
|
-
|
|
4385
|
+
.inkra-choice-grid__option:has(.inkra-selection-control__input:focus-visible) {
|
|
4386
|
+
outline: var(--inkra-focus-width) solid Highlight;
|
|
4387
|
+
outline-offset: var(--inkra-focus-offset);
|
|
4388
|
+
}
|
|
4389
|
+
|
|
4390
|
+
.inkra-choice-grid__option > .inkra-choice-grid__selection,
|
|
4391
|
+
.inkra-choice-grid__option > .inkra-choice-grid__focus,
|
|
4392
|
+
.inkra-choice-grid__option > .inkra-choice-grid__outline {
|
|
3973
4393
|
display: none;
|
|
3974
4394
|
}
|
|
4395
|
+
|
|
4396
|
+
.inkra-choice-grid__control > .inkra-selection-control__input:focus-visible {
|
|
4397
|
+
outline: none;
|
|
4398
|
+
}
|
|
4399
|
+
}
|
|
4400
|
+
|
|
4401
|
+
|
|
4402
|
+
.inkra-color-swatch {
|
|
4403
|
+
flex: none;
|
|
4404
|
+
}
|
|
4405
|
+
|
|
4406
|
+
.inkra-color-swatch__background {
|
|
4407
|
+
display: block;
|
|
4408
|
+
inline-size: 100%;
|
|
4409
|
+
block-size: 100%;
|
|
4410
|
+
border-radius: 3px;
|
|
4411
|
+
forced-color-adjust: none;
|
|
4412
|
+
}
|
|
4413
|
+
|
|
4414
|
+
.inkra-color-swatch__pigment,
|
|
4415
|
+
.inkra-color-swatch__wash {
|
|
4416
|
+
display: block;
|
|
4417
|
+
inline-size: 28px;
|
|
4418
|
+
block-size: 28px;
|
|
4419
|
+
pointer-events: none;
|
|
4420
|
+
}
|
|
4421
|
+
|
|
4422
|
+
.inkra-color-swatch[data-swatch-size="sm"] .inkra-color-swatch__pigment,
|
|
4423
|
+
.inkra-color-swatch[data-swatch-size="sm"] .inkra-color-swatch__wash {
|
|
4424
|
+
inline-size: 20px;
|
|
4425
|
+
block-size: 20px;
|
|
4426
|
+
}
|
|
4427
|
+
|
|
4428
|
+
.inkra-color-swatch[data-swatch-size="lg"] .inkra-color-swatch__pigment,
|
|
4429
|
+
.inkra-color-swatch[data-swatch-size="lg"] .inkra-color-swatch__wash {
|
|
4430
|
+
inline-size: 32px;
|
|
4431
|
+
block-size: 32px;
|
|
4432
|
+
}
|
|
4433
|
+
|
|
4434
|
+
.inkra-color-swatch__wash[data-pencil-fallback="true"] {
|
|
4435
|
+
background: currentColor;
|
|
4436
|
+
border: 0;
|
|
3975
4437
|
}
|
|
3976
4438
|
|
|
4439
|
+
@media (forced-colors: active) {
|
|
4440
|
+
.inkra-color-swatch__pigment {
|
|
4441
|
+
background: currentColor;
|
|
4442
|
+
forced-color-adjust: none;
|
|
4443
|
+
}
|
|
4444
|
+
.inkra-color-swatch[aria-pressed="true"] {
|
|
4445
|
+
outline: 2px solid Highlight;
|
|
4446
|
+
outline-offset: -3px;
|
|
4447
|
+
}
|
|
4448
|
+
}
|
|
3977
4449
|
|
|
3978
4450
|
.inkra-color-picker {
|
|
3979
4451
|
box-sizing: border-box;
|
|
@@ -3982,7 +4454,7 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
3982
4454
|
min-inline-size: 0;
|
|
3983
4455
|
inline-size: min(100%, 28rem);
|
|
3984
4456
|
margin: 0;
|
|
3985
|
-
padding:
|
|
4457
|
+
padding: 0;
|
|
3986
4458
|
border: 0;
|
|
3987
4459
|
color: var(--inkra-ink);
|
|
3988
4460
|
font-family: var(--inkra-font-body);
|
|
@@ -3994,25 +4466,71 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
3994
4466
|
}
|
|
3995
4467
|
|
|
3996
4468
|
.inkra-color-picker__legend {
|
|
3997
|
-
padding: 0;
|
|
4469
|
+
padding: 0 0 var(--inkra-space-2);
|
|
3998
4470
|
color: var(--inkra-ink);
|
|
3999
|
-
font-size: var(--inkra-text-
|
|
4471
|
+
font-size: var(--inkra-text-md);
|
|
4472
|
+
}
|
|
4473
|
+
|
|
4474
|
+
.inkra-color-picker__editor {
|
|
4475
|
+
display: grid;
|
|
4476
|
+
gap: var(--inkra-space-3);
|
|
4477
|
+
min-inline-size: 0;
|
|
4478
|
+
}
|
|
4479
|
+
|
|
4480
|
+
.inkra-color-picker__gradient {
|
|
4481
|
+
display: grid;
|
|
4482
|
+
gap: var(--inkra-space-3);
|
|
4483
|
+
min-inline-size: 0;
|
|
4484
|
+
inline-size: 100%;
|
|
4485
|
+
}
|
|
4486
|
+
.inkra-color-picker__types { max-inline-size: 100%; }
|
|
4487
|
+
.inkra-color-picker__gradient-preview {
|
|
4488
|
+
position: relative;
|
|
4489
|
+
isolation: isolate;
|
|
4490
|
+
block-size: 88px;
|
|
4491
|
+
inline-size: 100%;
|
|
4492
|
+
forced-color-adjust: none;
|
|
4000
4493
|
}
|
|
4494
|
+
.inkra-color-picker__stop-toolbar,
|
|
4495
|
+
.inkra-color-picker__stops,
|
|
4496
|
+
.inkra-color-picker__stop-actions,
|
|
4497
|
+
.inkra-color-picker__radial-options {
|
|
4498
|
+
display: flex;
|
|
4499
|
+
flex-wrap: wrap;
|
|
4500
|
+
align-items: center;
|
|
4501
|
+
gap: var(--inkra-space-2);
|
|
4502
|
+
min-inline-size: 0;
|
|
4503
|
+
}
|
|
4504
|
+
.inkra-color-picker__stop-toolbar { justify-content: space-between; }
|
|
4505
|
+
.inkra-color-picker__stop-actions { gap: 0; }
|
|
4506
|
+
.inkra-color-picker__stop { display: grid; justify-items: center; font-size: var(--inkra-text-sm); }
|
|
4507
|
+
.inkra-color-picker__stop-position {
|
|
4508
|
+
display: grid;
|
|
4509
|
+
grid-template-columns: minmax(0, 6rem) minmax(0, 1fr);
|
|
4510
|
+
align-items: end;
|
|
4511
|
+
gap: var(--inkra-space-3);
|
|
4512
|
+
}
|
|
4513
|
+
.inkra-color-picker__geometry {
|
|
4514
|
+
display: grid;
|
|
4515
|
+
grid-template-columns: repeat(auto-fit, minmax(min(100%, 6rem), 1fr));
|
|
4516
|
+
gap: var(--inkra-space-3);
|
|
4517
|
+
}
|
|
4518
|
+
.inkra-color-picker__gradient .inkra-input-root { inline-size: 100%; }
|
|
4519
|
+
.inkra-color-picker__radial-options > * { max-inline-size: 100%; }
|
|
4001
4520
|
|
|
4002
4521
|
.inkra-color-picker__main {
|
|
4003
4522
|
display: grid;
|
|
4004
4523
|
grid-template-columns: var(--inkra-control-lg) minmax(0, 1fr);
|
|
4005
4524
|
gap: var(--inkra-space-3);
|
|
4006
|
-
align-items:
|
|
4525
|
+
align-items: center;
|
|
4007
4526
|
min-width: 0;
|
|
4008
4527
|
}
|
|
4009
4528
|
|
|
4010
|
-
.inkra-color-picker__palette
|
|
4011
|
-
.inkra-color-picker__preset {
|
|
4529
|
+
.inkra-color-picker__palette {
|
|
4012
4530
|
position: relative;
|
|
4013
4531
|
isolation: isolate;
|
|
4014
4532
|
display: block;
|
|
4015
|
-
overflow:
|
|
4533
|
+
overflow: visible;
|
|
4016
4534
|
box-sizing: border-box;
|
|
4017
4535
|
flex: none;
|
|
4018
4536
|
padding: 0;
|
|
@@ -4042,20 +4560,26 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
4042
4560
|
background-size: 12px 12px;
|
|
4043
4561
|
}
|
|
4044
4562
|
|
|
4045
|
-
.inkra-color-picker__current
|
|
4046
|
-
.inkra-color-picker__preset-color {
|
|
4563
|
+
.inkra-color-picker__current {
|
|
4047
4564
|
position: absolute;
|
|
4048
4565
|
z-index: -1;
|
|
4049
4566
|
inset: 3px;
|
|
4050
4567
|
}
|
|
4051
4568
|
|
|
4052
4569
|
.inkra-color-picker__palette-outline,
|
|
4053
|
-
.inkra-color-
|
|
4570
|
+
.inkra-color-picker__focus {
|
|
4054
4571
|
position: absolute !important;
|
|
4055
4572
|
inset: 0;
|
|
4056
4573
|
pointer-events: none;
|
|
4057
4574
|
}
|
|
4058
4575
|
|
|
4576
|
+
.inkra-color-picker__focus {
|
|
4577
|
+
--inkra-accent-strong: var(--inkra-focus);
|
|
4578
|
+
inset: calc(-1 * var(--inkra-focus-offset));
|
|
4579
|
+
opacity: 0;
|
|
4580
|
+
z-index: 2;
|
|
4581
|
+
}
|
|
4582
|
+
|
|
4059
4583
|
.inkra-color-picker__native {
|
|
4060
4584
|
position: absolute;
|
|
4061
4585
|
z-index: 1;
|
|
@@ -4068,10 +4592,8 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
4068
4592
|
opacity: 0;
|
|
4069
4593
|
}
|
|
4070
4594
|
|
|
4071
|
-
.inkra-color-picker__palette:focus-within
|
|
4072
|
-
|
|
4073
|
-
outline: var(--inkra-focus-width) solid var(--inkra-focus);
|
|
4074
|
-
outline-offset: var(--inkra-focus-offset);
|
|
4595
|
+
.inkra-color-picker__palette:focus-within .inkra-color-picker__focus {
|
|
4596
|
+
opacity: 1;
|
|
4075
4597
|
}
|
|
4076
4598
|
|
|
4077
4599
|
.inkra-color-picker__value-field {
|
|
@@ -4124,17 +4646,14 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
4124
4646
|
}
|
|
4125
4647
|
|
|
4126
4648
|
.inkra-color-picker__presets {
|
|
4127
|
-
display:
|
|
4128
|
-
|
|
4649
|
+
display: flex;
|
|
4650
|
+
flex-wrap: wrap;
|
|
4129
4651
|
gap: var(--inkra-space-2);
|
|
4130
4652
|
min-width: 0;
|
|
4131
4653
|
}
|
|
4132
4654
|
|
|
4133
4655
|
.inkra-color-picker__preset {
|
|
4134
|
-
width: 100%;
|
|
4135
4656
|
min-width: var(--inkra-touch-target);
|
|
4136
|
-
height: var(--inkra-touch-target);
|
|
4137
|
-
cursor: pointer;
|
|
4138
4657
|
}
|
|
4139
4658
|
|
|
4140
4659
|
.inkra-color-picker__preset:disabled,
|
|
@@ -4142,27 +4661,72 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
4142
4661
|
cursor: not-allowed;
|
|
4143
4662
|
}
|
|
4144
4663
|
|
|
4145
|
-
|
|
4146
|
-
|
|
4147
|
-
|
|
4148
|
-
|
|
4664
|
+
.inkra-color-picker__trigger-content {
|
|
4665
|
+
display: flex;
|
|
4666
|
+
align-items: center;
|
|
4667
|
+
gap: var(--inkra-space-2);
|
|
4668
|
+
}
|
|
4149
4669
|
|
|
4150
|
-
|
|
4151
|
-
|
|
4152
|
-
|
|
4670
|
+
.inkra-color-picker__preview {
|
|
4671
|
+
position: relative;
|
|
4672
|
+
isolation: isolate;
|
|
4673
|
+
flex: none;
|
|
4674
|
+
inline-size: 28px;
|
|
4675
|
+
block-size: 28px;
|
|
4676
|
+
}
|
|
4677
|
+
|
|
4678
|
+
.inkra-color-picker__trigger {
|
|
4679
|
+
justify-self: start;
|
|
4680
|
+
max-inline-size: 100%;
|
|
4681
|
+
}
|
|
4682
|
+
|
|
4683
|
+
.inkra-color-picker__popover {
|
|
4684
|
+
inline-size: min(22rem, calc(100vw - 24px));
|
|
4685
|
+
max-inline-size: var(--radix-popover-content-available-width);
|
|
4686
|
+
}
|
|
4687
|
+
|
|
4688
|
+
.inkra-color-picker__editor[data-presentation="compact"] {
|
|
4689
|
+
display: flex;
|
|
4690
|
+
flex-wrap: wrap;
|
|
4691
|
+
align-items: center;
|
|
4692
|
+
column-gap: var(--inkra-space-4);
|
|
4693
|
+
}
|
|
4694
|
+
|
|
4695
|
+
.inkra-color-picker__editor[data-presentation="compact"] .inkra-color-picker__main {
|
|
4696
|
+
flex: 1 1 12rem;
|
|
4697
|
+
}
|
|
4698
|
+
|
|
4699
|
+
.inkra-color-picker__editor[data-presentation="compact"] .inkra-color-picker__alpha {
|
|
4700
|
+
flex: 1 1 8rem;
|
|
4701
|
+
}
|
|
4702
|
+
|
|
4703
|
+
.inkra-color-picker__editor[data-presentation="compact"] .inkra-color-picker__presets {
|
|
4704
|
+
flex-basis: 100%;
|
|
4705
|
+
}
|
|
4706
|
+
|
|
4707
|
+
.inkra-color-picker__editor[data-presentation="compact"] .inkra-color-picker__divider {
|
|
4708
|
+
display: none;
|
|
4153
4709
|
}
|
|
4154
4710
|
|
|
4155
4711
|
@media (forced-colors: active) {
|
|
4156
|
-
.inkra-color-picker__palette
|
|
4157
|
-
.inkra-color-picker__preset {
|
|
4712
|
+
.inkra-color-picker__palette {
|
|
4158
4713
|
border: 1px solid ButtonText;
|
|
4159
4714
|
forced-color-adjust: none;
|
|
4160
4715
|
}
|
|
4161
4716
|
|
|
4162
|
-
.inkra-color-picker__palette:focus-within
|
|
4163
|
-
|
|
4717
|
+
.inkra-color-picker__palette:focus-within {
|
|
4718
|
+
outline: var(--inkra-focus-width) solid Highlight;
|
|
4719
|
+
outline-offset: var(--inkra-focus-offset);
|
|
4164
4720
|
outline-color: Highlight;
|
|
4165
4721
|
}
|
|
4722
|
+
|
|
4723
|
+
.inkra-color-picker__focus {
|
|
4724
|
+
display: none !important;
|
|
4725
|
+
}
|
|
4726
|
+
|
|
4727
|
+
.inkra-color-picker__preview {
|
|
4728
|
+
forced-color-adjust: none;
|
|
4729
|
+
}
|
|
4166
4730
|
}
|
|
4167
4731
|
|
|
4168
4732
|
.inkra-context-menu__anchor {
|
|
@@ -4185,7 +4749,8 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
4185
4749
|
}
|
|
4186
4750
|
|
|
4187
4751
|
.inkra-context-menu__sub-content {
|
|
4188
|
-
max-block-size: var(--radix-dropdown-menu-content-available-height);
|
|
4752
|
+
max-block-size: var(--radix-dropdown-menu-content-available-height, calc(100dvh - 16px));
|
|
4753
|
+
max-inline-size: min(320px, var(--radix-dropdown-menu-content-available-width, calc(100vw - 16px)), calc(100vw - 16px));
|
|
4189
4754
|
transform-origin: var(--radix-dropdown-menu-content-transform-origin);
|
|
4190
4755
|
}
|
|
4191
4756
|
|
|
@@ -4312,51 +4877,150 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
4312
4877
|
}
|
|
4313
4878
|
|
|
4314
4879
|
.inkra-editable {
|
|
4880
|
+
--inkra-editable-control-height: var(--inkra-control-md);
|
|
4881
|
+
|
|
4882
|
+
display: inline-grid;
|
|
4883
|
+
inline-size: min(100%, 30rem);
|
|
4884
|
+
min-inline-size: 0;
|
|
4315
4885
|
color: var(--inkra-ink);
|
|
4316
|
-
|
|
4317
|
-
|
|
4886
|
+
vertical-align: middle;
|
|
4887
|
+
}
|
|
4888
|
+
|
|
4889
|
+
.inkra-editable[data-size="sm"] { --inkra-editable-control-height: var(--inkra-control-sm); }
|
|
4890
|
+
.inkra-editable[data-size="lg"] { --inkra-editable-control-height: var(--inkra-control-lg); }
|
|
4891
|
+
|
|
4892
|
+
.inkra-editable__frame {
|
|
4893
|
+
display: grid;
|
|
4894
|
+
min-inline-size: 0;
|
|
4895
|
+
align-items: start;
|
|
4318
4896
|
gap: var(--inkra-space-2);
|
|
4319
|
-
|
|
4897
|
+
min-block-size: max(var(--inkra-editable-control-height), var(--inkra-touch-target));
|
|
4898
|
+
}
|
|
4899
|
+
|
|
4900
|
+
.inkra-editable__display-shell {
|
|
4901
|
+
position: relative;
|
|
4902
|
+
display: grid;
|
|
4320
4903
|
min-inline-size: 0;
|
|
4321
|
-
|
|
4904
|
+
min-block-size: max(var(--inkra-editable-control-height), var(--inkra-touch-target));
|
|
4905
|
+
align-items: center;
|
|
4906
|
+
}
|
|
4907
|
+
|
|
4908
|
+
.inkra-editable__focus-ring {
|
|
4909
|
+
position: absolute !important;
|
|
4910
|
+
inset-inline: 0;
|
|
4911
|
+
inset-block: 50% auto;
|
|
4912
|
+
block-size: var(--inkra-editable-control-height);
|
|
4913
|
+
transform: translateY(-50%);
|
|
4914
|
+
opacity: 0;
|
|
4915
|
+
pointer-events: none;
|
|
4916
|
+
transition: opacity var(--inkra-motion-fast) var(--inkra-ease);
|
|
4917
|
+
}
|
|
4918
|
+
|
|
4919
|
+
.inkra-editable__display-shell:has(:focus-visible) .inkra-editable__focus-ring {
|
|
4920
|
+
opacity: 1;
|
|
4322
4921
|
}
|
|
4323
4922
|
|
|
4324
4923
|
.inkra-editable__display {
|
|
4924
|
+
position: relative;
|
|
4925
|
+
z-index: 1;
|
|
4926
|
+
display: flex;
|
|
4927
|
+
min-inline-size: 0;
|
|
4928
|
+
box-sizing: border-box;
|
|
4929
|
+
inline-size: 100%;
|
|
4930
|
+
min-block-size: max(var(--inkra-editable-control-height), var(--inkra-touch-target));
|
|
4325
4931
|
align-items: center;
|
|
4326
|
-
|
|
4327
|
-
|
|
4328
|
-
display: inline-flex;
|
|
4329
|
-
min-block-size: var(--inkra-touch-target);
|
|
4330
|
-
min-inline-size: 2.75rem;
|
|
4932
|
+
padding: 0 var(--inkra-space-3);
|
|
4933
|
+
border: 0;
|
|
4331
4934
|
outline: 0;
|
|
4935
|
+
background: transparent;
|
|
4936
|
+
color: inherit;
|
|
4937
|
+
font: inherit;
|
|
4938
|
+
cursor: text;
|
|
4332
4939
|
overflow-wrap: anywhere;
|
|
4333
|
-
padding-inline: var(--inkra-space-2);
|
|
4334
|
-
position: relative;
|
|
4335
4940
|
text-align: start;
|
|
4336
|
-
transition: background-color var(--inkra-motion-fast) var(--inkra-ease), outline-color var(--inkra-motion-fast) var(--inkra-ease);
|
|
4337
4941
|
}
|
|
4338
4942
|
|
|
4339
|
-
.inkra-
|
|
4340
|
-
|
|
4341
|
-
|
|
4342
|
-
|
|
4343
|
-
|
|
4344
|
-
|
|
4345
|
-
|
|
4346
|
-
.inkra-editable__error { color: var(--inkra-danger); font-size: var(--inkra-text-sm); inline-size: 100%; }
|
|
4943
|
+
.inkra-editable[data-multiline="true"] .inkra-editable__display {
|
|
4944
|
+
block-size: auto;
|
|
4945
|
+
min-block-size: var(--inkra-editable-control-height);
|
|
4946
|
+
align-items: flex-start;
|
|
4947
|
+
padding-block: var(--inkra-space-2);
|
|
4948
|
+
white-space: pre-wrap;
|
|
4949
|
+
}
|
|
4347
4950
|
|
|
4348
|
-
|
|
4349
|
-
|
|
4350
|
-
|
|
4951
|
+
.inkra-editable[data-disabled="true"] .inkra-editable__display,
|
|
4952
|
+
.inkra-editable[data-readonly="true"] .inkra-editable__display {
|
|
4953
|
+
cursor: default;
|
|
4351
4954
|
}
|
|
4352
4955
|
|
|
4353
|
-
|
|
4354
|
-
|
|
4355
|
-
|
|
4356
|
-
|
|
4357
|
-
|
|
4956
|
+
.inkra-editable[data-disabled="true"] .inkra-editable__display-shell {
|
|
4957
|
+
opacity: .62;
|
|
4958
|
+
}
|
|
4959
|
+
|
|
4960
|
+
.inkra-editable__editor {
|
|
4961
|
+
display: grid;
|
|
4962
|
+
min-inline-size: 0;
|
|
4963
|
+
min-block-size: max(var(--inkra-editable-control-height), var(--inkra-touch-target));
|
|
4964
|
+
align-content: center;
|
|
4965
|
+
gap: var(--inkra-space-2);
|
|
4966
|
+
}
|
|
4967
|
+
|
|
4968
|
+
.inkra-editable__editor > :first-child {
|
|
4969
|
+
inline-size: 100%;
|
|
4970
|
+
min-inline-size: 0;
|
|
4971
|
+
}
|
|
4972
|
+
|
|
4973
|
+
.inkra-editable__actions {
|
|
4974
|
+
display: inline-grid;
|
|
4975
|
+
flex: none;
|
|
4976
|
+
min-block-size: max(var(--inkra-editable-control-height), var(--inkra-touch-target));
|
|
4977
|
+
grid-template-columns: repeat(2, var(--inkra-touch-target));
|
|
4978
|
+
align-items: center;
|
|
4979
|
+
}
|
|
4980
|
+
|
|
4981
|
+
.inkra-editable__action {
|
|
4982
|
+
inline-size: var(--inkra-touch-target);
|
|
4983
|
+
block-size: var(--inkra-touch-target);
|
|
4984
|
+
}
|
|
4985
|
+
|
|
4986
|
+
.inkra-editable__custom-trigger {
|
|
4987
|
+
position: absolute;
|
|
4988
|
+
inline-size: 1px;
|
|
4989
|
+
block-size: 1px;
|
|
4990
|
+
overflow: hidden;
|
|
4991
|
+
clip-path: inset(50%);
|
|
4992
|
+
white-space: nowrap;
|
|
4993
|
+
}
|
|
4994
|
+
|
|
4995
|
+
.inkra-editable__select-row,
|
|
4996
|
+
.inkra-editable__custom-row {
|
|
4997
|
+
display: grid;
|
|
4998
|
+
grid-template-columns: minmax(0, 1fr) auto;
|
|
4999
|
+
align-items: start;
|
|
5000
|
+
gap: var(--inkra-space-1);
|
|
5001
|
+
min-inline-size: 0;
|
|
5002
|
+
}
|
|
5003
|
+
|
|
5004
|
+
.inkra-editable__error {
|
|
5005
|
+
inline-size: 100%;
|
|
5006
|
+
color: var(--inkra-danger-foreground, var(--inkra-danger));
|
|
5007
|
+
font-size: var(--inkra-text-sm);
|
|
5008
|
+
}
|
|
5009
|
+
|
|
5010
|
+
@media (prefers-reduced-motion: reduce) {
|
|
5011
|
+
.inkra-editable__focus-ring { transition: none; }
|
|
5012
|
+
}
|
|
5013
|
+
|
|
5014
|
+
@media (forced-colors: active) {
|
|
5015
|
+
.inkra-editable__display-shell:has(:focus-visible) { outline: 2px solid Highlight; outline-offset: -2px; }
|
|
5016
|
+
.inkra-editable__focus-ring { display: none; }
|
|
5017
|
+
.inkra-editable__error { color: Mark; }
|
|
5018
|
+
}
|
|
5019
|
+
|
|
5020
|
+
@media print {
|
|
5021
|
+
.inkra-editable__actions,
|
|
5022
|
+
.inkra-editable__focus-ring { display: none; }
|
|
4358
5023
|
}
|
|
4359
|
-
@media print { .inkra-editable__display { background: transparent; } }
|
|
4360
5024
|
|
|
4361
5025
|
.inkra-tilt {
|
|
4362
5026
|
--inkra-tilt-response: 120ms;
|
|
@@ -4952,40 +5616,91 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
4952
5616
|
}
|
|
4953
5617
|
|
|
4954
5618
|
.inkra-image-viewer.inkra-overlay__content {
|
|
4955
|
-
|
|
4956
|
-
|
|
4957
|
-
|
|
5619
|
+
animation: inkra-image-viewer-in var(--inkra-motion-normal) var(--inkra-ease) both;
|
|
5620
|
+
height: 100dvh;
|
|
5621
|
+
inset: 0;
|
|
5622
|
+
left: 0;
|
|
5623
|
+
max-height: none;
|
|
5624
|
+
max-width: none;
|
|
5625
|
+
transform: none;
|
|
5626
|
+
width: 100dvw;
|
|
4958
5627
|
}
|
|
4959
5628
|
|
|
4960
|
-
.inkra-image-viewer
|
|
4961
|
-
|
|
4962
|
-
height: 100%;
|
|
5629
|
+
.inkra-image-viewer.inkra-overlay__content[data-state="closed"] {
|
|
5630
|
+
animation: inkra-image-viewer-out var(--inkra-motion-normal) var(--inkra-ease) both;
|
|
4963
5631
|
}
|
|
4964
5632
|
|
|
4965
|
-
.inkra-image-
|
|
5633
|
+
.inkra-image-viewer > .inkra-overlay__surface {
|
|
5634
|
+
border-radius: 0;
|
|
5635
|
+
block-size: 0;
|
|
5636
|
+
inline-size: 0;
|
|
5637
|
+
inset: 0;
|
|
5638
|
+
max-height: none;
|
|
5639
|
+
overflow: visible;
|
|
4966
5640
|
position: absolute;
|
|
4967
|
-
|
|
4968
|
-
|
|
5641
|
+
}
|
|
5642
|
+
|
|
5643
|
+
.inkra-image-viewer > .inkra-overlay__surface { background: var(--inkra-paper); }
|
|
5644
|
+
|
|
5645
|
+
.inkra-image-viewer > .inkra-overlay__surface > .inkra-pencil-surface__ink { display: none !important; }
|
|
5646
|
+
|
|
5647
|
+
.inkra-image-viewer > .inkra-overlay__surface > .inkra-overlay__content-body {
|
|
5648
|
+
background: var(--inkra-paper);
|
|
5649
|
+
display: flex;
|
|
5650
|
+
flex-direction: column;
|
|
5651
|
+
height: 100dvh;
|
|
5652
|
+
inset: 0;
|
|
5653
|
+
max-height: none;
|
|
5654
|
+
overflow: hidden;
|
|
4969
5655
|
padding: 0;
|
|
5656
|
+
position: fixed;
|
|
5657
|
+
width: 100dvw;
|
|
5658
|
+
}
|
|
5659
|
+
|
|
5660
|
+
.inkra-image-viewer__accessible-label {
|
|
5661
|
+
block-size: 1px;
|
|
5662
|
+
clip: rect(0 0 0 0);
|
|
5663
|
+
clip-path: inset(50%);
|
|
5664
|
+
inline-size: 1px;
|
|
4970
5665
|
margin: -1px;
|
|
4971
5666
|
overflow: hidden;
|
|
4972
|
-
|
|
5667
|
+
padding: 0;
|
|
5668
|
+
position: absolute;
|
|
4973
5669
|
white-space: nowrap;
|
|
4974
5670
|
}
|
|
4975
5671
|
|
|
5672
|
+
.inkra-image-viewer__close-control {
|
|
5673
|
+
inset-block-start: max(var(--inkra-space-3), env(safe-area-inset-top));
|
|
5674
|
+
inset-inline-end: max(var(--inkra-space-3), env(safe-area-inset-right));
|
|
5675
|
+
isolation: isolate;
|
|
5676
|
+
position: absolute;
|
|
5677
|
+
z-index: 8;
|
|
5678
|
+
}
|
|
5679
|
+
|
|
5680
|
+
.inkra-image-viewer__close-paper {
|
|
5681
|
+
inset: 0;
|
|
5682
|
+
pointer-events: none;
|
|
5683
|
+
position: absolute !important;
|
|
5684
|
+
z-index: 0;
|
|
5685
|
+
}
|
|
5686
|
+
|
|
5687
|
+
.inkra-image-viewer__close-control > .inkra-button { position: relative; z-index: 1; }
|
|
5688
|
+
|
|
4976
5689
|
.inkra-image-viewer__counter {
|
|
4977
5690
|
color: var(--inkra-ink-muted);
|
|
5691
|
+
flex: 0 0 auto;
|
|
4978
5692
|
font-size: var(--inkra-text-sm);
|
|
4979
5693
|
line-height: var(--inkra-line-ui);
|
|
5694
|
+
unicode-bidi: isolate;
|
|
5695
|
+
white-space: nowrap;
|
|
4980
5696
|
}
|
|
4981
5697
|
|
|
4982
5698
|
.inkra-image-viewer__body {
|
|
4983
5699
|
display: grid;
|
|
4984
5700
|
flex: 1 1 auto;
|
|
4985
|
-
min-block-size:
|
|
5701
|
+
min-block-size: var(--inkra-touch-target);
|
|
4986
5702
|
min-inline-size: 0;
|
|
4987
5703
|
overflow: hidden;
|
|
4988
|
-
padding: var(--inkra-space-4);
|
|
4989
5704
|
}
|
|
4990
5705
|
|
|
4991
5706
|
.inkra-image-viewer__stage,
|
|
@@ -4993,192 +5708,348 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
4993
5708
|
min-block-size: 0;
|
|
4994
5709
|
min-inline-size: 0;
|
|
4995
5710
|
outline: 0;
|
|
5711
|
+
position: relative;
|
|
4996
5712
|
}
|
|
4997
5713
|
|
|
4998
5714
|
.inkra-image-viewer__stage {
|
|
4999
|
-
position: relative;
|
|
5000
|
-
display: grid;
|
|
5001
|
-
place-items: center;
|
|
5002
|
-
overflow: hidden;
|
|
5003
|
-
background: var(--inkra-surface-muted);
|
|
5004
5715
|
background: color-mix(in srgb, var(--inkra-ink) 7%, var(--inkra-paper));
|
|
5005
|
-
border-radius: var(--inkra-radius-md);
|
|
5006
5716
|
contain: layout paint;
|
|
5717
|
+
display: grid;
|
|
5718
|
+
overflow: hidden;
|
|
5719
|
+
place-items: center;
|
|
5007
5720
|
}
|
|
5008
5721
|
|
|
5009
|
-
.inkra-image-viewer__stage
|
|
5010
|
-
|
|
5722
|
+
.inkra-image-viewer__stage-focus {
|
|
5723
|
+
--inkra-accent-strong: var(--inkra-focus);
|
|
5724
|
+
|
|
5725
|
+
display: block !important;
|
|
5726
|
+
inset: var(--inkra-focus-width);
|
|
5727
|
+
opacity: 0;
|
|
5728
|
+
pointer-events: none;
|
|
5729
|
+
position: absolute !important;
|
|
5730
|
+
z-index: 7;
|
|
5011
5731
|
}
|
|
5012
5732
|
|
|
5733
|
+
.inkra-image-viewer__stage:focus-visible > .inkra-image-viewer__stage-focus,
|
|
5734
|
+
.inkra-image-viewer__state:focus-visible > .inkra-image-viewer__stage-focus { opacity: 1; }
|
|
5735
|
+
|
|
5013
5736
|
.inkra-image-viewer__image {
|
|
5737
|
+
block-size: 100%;
|
|
5014
5738
|
display: block;
|
|
5015
5739
|
inline-size: 100%;
|
|
5016
|
-
block-size: 100%;
|
|
5017
|
-
max-inline-size: 100%;
|
|
5018
5740
|
max-block-size: 100%;
|
|
5741
|
+
max-inline-size: 100%;
|
|
5019
5742
|
object-fit: contain;
|
|
5020
5743
|
user-select: none;
|
|
5021
5744
|
}
|
|
5022
5745
|
|
|
5023
|
-
.inkra-image-viewer__pan-zoom
|
|
5024
|
-
|
|
5025
|
-
|
|
5746
|
+
.inkra-image-viewer .inkra-image-viewer__pan-zoom.inkra-pan-zoom {
|
|
5747
|
+
--inkra-pan-zoom-min-block-size: 0px;
|
|
5748
|
+
}
|
|
5749
|
+
|
|
5750
|
+
.inkra-image-viewer .inkra-image-viewer__pan-zoom,
|
|
5751
|
+
.inkra-image-viewer .inkra-image-viewer__pan-zoom > .inkra-pan-zoom__clip,
|
|
5752
|
+
.inkra-image-viewer .inkra-image-viewer__pan-zoom > .inkra-pan-zoom__clip > .react-transform-wrapper,
|
|
5753
|
+
.inkra-image-viewer .inkra-image-viewer__pan-zoom .inkra-pan-zoom__viewport {
|
|
5026
5754
|
block-size: 100%;
|
|
5755
|
+
inline-size: 100%;
|
|
5756
|
+
max-block-size: 100%;
|
|
5027
5757
|
min-block-size: 0;
|
|
5028
5758
|
}
|
|
5029
5759
|
|
|
5030
5760
|
.inkra-image-viewer__pan-zoom .inkra-pan-zoom__viewport {
|
|
5031
|
-
|
|
5032
|
-
block-size: 100%;
|
|
5033
|
-
min-block-size: 0;
|
|
5761
|
+
background: transparent;
|
|
5034
5762
|
border: 0;
|
|
5035
5763
|
border-radius: 0;
|
|
5036
|
-
background: transparent;
|
|
5037
5764
|
}
|
|
5038
5765
|
|
|
5039
5766
|
.inkra-image-viewer__pan-zoom .inkra-pan-zoom__content {
|
|
5040
|
-
inline-size: 100%;
|
|
5041
|
-
block-size: 100%;
|
|
5042
5767
|
align-items: center;
|
|
5768
|
+
block-size: 100%;
|
|
5769
|
+
inline-size: 100%;
|
|
5043
5770
|
justify-content: center;
|
|
5044
5771
|
}
|
|
5045
5772
|
|
|
5046
5773
|
.inkra-image-viewer__image-transform {
|
|
5774
|
+
block-size: 100%;
|
|
5047
5775
|
display: grid;
|
|
5048
5776
|
inline-size: 100%;
|
|
5049
|
-
block-size: 100%;
|
|
5050
5777
|
place-items: center;
|
|
5051
5778
|
transform-origin: center;
|
|
5052
5779
|
}
|
|
5053
5780
|
|
|
5054
|
-
.inkra-image-viewer__tools {
|
|
5055
|
-
position: absolute;
|
|
5056
|
-
inset-block-end: var(--inkra-space-3);
|
|
5057
|
-
inset-inline-start: 50%;
|
|
5058
|
-
display: flex;
|
|
5059
|
-
align-items: center;
|
|
5060
|
-
gap: var(--inkra-space-1);
|
|
5061
|
-
transform: translateX(-50%);
|
|
5062
|
-
z-index: 1;
|
|
5063
|
-
}
|
|
5064
|
-
|
|
5065
5781
|
.inkra-image-viewer__navigation {
|
|
5066
|
-
position: absolute;
|
|
5067
5782
|
inset: 0;
|
|
5068
5783
|
pointer-events: none;
|
|
5784
|
+
position: absolute;
|
|
5069
5785
|
}
|
|
5070
5786
|
|
|
5071
5787
|
.inkra-image-viewer__navigation > .inkra-button {
|
|
5072
|
-
position: absolute;
|
|
5073
5788
|
inset-block-start: 50%;
|
|
5074
|
-
transform: translateY(-50%);
|
|
5075
5789
|
pointer-events: auto;
|
|
5790
|
+
position: absolute;
|
|
5791
|
+
transform: translateY(-50%);
|
|
5076
5792
|
}
|
|
5077
5793
|
|
|
5078
|
-
.inkra-image-viewer__previous { inset-inline-start: var(--inkra-space-3); }
|
|
5079
|
-
.inkra-image-viewer__next { inset-inline-end: var(--inkra-space-3); }
|
|
5794
|
+
.inkra-image-viewer__previous { inset-inline-start: max(var(--inkra-space-3), env(safe-area-inset-left)); }
|
|
5795
|
+
.inkra-image-viewer__next { inset-inline-end: max(var(--inkra-space-3), env(safe-area-inset-right)); }
|
|
5080
5796
|
|
|
5081
5797
|
.inkra-image-viewer__state {
|
|
5082
|
-
display: grid;
|
|
5083
5798
|
align-content: center;
|
|
5084
|
-
|
|
5799
|
+
display: grid;
|
|
5085
5800
|
gap: var(--inkra-space-3);
|
|
5801
|
+
justify-items: center;
|
|
5802
|
+
overflow-wrap: anywhere;
|
|
5086
5803
|
padding: var(--inkra-space-5);
|
|
5087
5804
|
text-align: center;
|
|
5088
|
-
overflow-wrap: anywhere;
|
|
5089
5805
|
}
|
|
5090
5806
|
|
|
5091
5807
|
.inkra-image-viewer__state h3,
|
|
5092
5808
|
.inkra-image-viewer__state p { margin: 0; }
|
|
5093
5809
|
.inkra-image-viewer__state p { color: var(--inkra-ink-muted); }
|
|
5094
5810
|
|
|
5095
|
-
.inkra-image-
|
|
5811
|
+
.inkra-image-viewer__bottom {
|
|
5812
|
+
flex: none;
|
|
5813
|
+
max-block-size: min(34dvh, 15rem);
|
|
5814
|
+
min-inline-size: 0;
|
|
5815
|
+
overflow: auto;
|
|
5816
|
+
overscroll-behavior: contain;
|
|
5817
|
+
padding-block-end: env(safe-area-inset-bottom);
|
|
5818
|
+
scrollbar-gutter: auto;
|
|
5819
|
+
}
|
|
5820
|
+
|
|
5821
|
+
.inkra-image-viewer__bottom-row {
|
|
5822
|
+
align-items: center;
|
|
5823
|
+
display: flex;
|
|
5824
|
+
gap: var(--inkra-space-3);
|
|
5825
|
+
justify-content: center;
|
|
5826
|
+
min-block-size: var(--inkra-touch-target);
|
|
5827
|
+
min-inline-size: 0;
|
|
5828
|
+
overflow-x: auto;
|
|
5829
|
+
overscroll-behavior-inline: contain;
|
|
5830
|
+
padding: var(--inkra-space-2) var(--inkra-space-4);
|
|
5831
|
+
scrollbar-gutter: auto;
|
|
5832
|
+
}
|
|
5833
|
+
|
|
5834
|
+
.inkra-image-viewer__tools {
|
|
5835
|
+
align-items: center;
|
|
5836
|
+
display: flex;
|
|
5837
|
+
flex: none;
|
|
5838
|
+
gap: var(--inkra-space-1);
|
|
5839
|
+
isolation: isolate;
|
|
5840
|
+
max-inline-size: 100%;
|
|
5841
|
+
overflow-x: auto;
|
|
5842
|
+
overscroll-behavior-inline: contain;
|
|
5843
|
+
padding: var(--inkra-focus-offset);
|
|
5844
|
+
position: relative;
|
|
5845
|
+
scrollbar-gutter: auto;
|
|
5846
|
+
}
|
|
5847
|
+
|
|
5848
|
+
.inkra-image-viewer__video-navigation {
|
|
5849
|
+
align-items: center;
|
|
5850
|
+
align-self: center;
|
|
5096
5851
|
display: flex;
|
|
5097
5852
|
flex: none;
|
|
5098
5853
|
gap: var(--inkra-space-2);
|
|
5854
|
+
min-inline-size: max-content;
|
|
5855
|
+
}
|
|
5856
|
+
|
|
5857
|
+
.inkra-image-viewer__tools-paper {
|
|
5858
|
+
inset: 0;
|
|
5859
|
+
pointer-events: none;
|
|
5860
|
+
position: absolute !important;
|
|
5861
|
+
z-index: 0;
|
|
5862
|
+
}
|
|
5863
|
+
.inkra-image-viewer__tools > .inkra-button { position: relative; z-index: 1; }
|
|
5864
|
+
|
|
5865
|
+
.inkra-image-viewer__thumbnails {
|
|
5866
|
+
display: flex;
|
|
5867
|
+
gap: var(--inkra-space-2);
|
|
5868
|
+
justify-content: safe center;
|
|
5099
5869
|
min-inline-size: 0;
|
|
5100
5870
|
overflow-x: auto;
|
|
5101
5871
|
overscroll-behavior-inline: contain;
|
|
5102
|
-
padding: var(--inkra-space-
|
|
5103
|
-
scrollbar-gutter:
|
|
5872
|
+
padding: var(--inkra-space-2) var(--inkra-space-4) var(--inkra-space-3);
|
|
5873
|
+
scrollbar-gutter: auto;
|
|
5104
5874
|
}
|
|
5105
5875
|
|
|
5106
5876
|
.inkra-image-viewer__thumbnail {
|
|
5107
|
-
|
|
5108
|
-
flex: 0 0 5rem;
|
|
5109
|
-
inline-size: 5rem;
|
|
5877
|
+
background: transparent;
|
|
5110
5878
|
block-size: 3.75rem;
|
|
5111
|
-
padding: 0;
|
|
5112
5879
|
border: 0;
|
|
5113
5880
|
color: inherit;
|
|
5114
|
-
background: transparent;
|
|
5115
5881
|
cursor: pointer;
|
|
5882
|
+
flex: 0 0 5rem;
|
|
5883
|
+
inline-size: 5rem;
|
|
5884
|
+
padding: 0;
|
|
5885
|
+
position: relative;
|
|
5116
5886
|
}
|
|
5117
5887
|
|
|
5118
5888
|
.inkra-image-viewer__thumbnail-surface,
|
|
5119
5889
|
.inkra-image-viewer__thumbnail-focus {
|
|
5120
|
-
position: absolute;
|
|
5121
|
-
inset: 0;
|
|
5122
5890
|
display: block;
|
|
5891
|
+
inset: 0;
|
|
5892
|
+
position: absolute;
|
|
5123
5893
|
}
|
|
5124
5894
|
|
|
5125
|
-
.inkra-image-viewer__thumbnail-
|
|
5126
|
-
|
|
5895
|
+
.inkra-image-viewer__thumbnail-surface { align-items: center; justify-content: center; }
|
|
5896
|
+
.inkra-image-viewer__thumbnail-video {
|
|
5897
|
+
align-items: center;
|
|
5898
|
+
block-size: 1.75rem;
|
|
5899
|
+
display: inline-flex !important;
|
|
5900
|
+
inline-size: 1.75rem;
|
|
5901
|
+
inset-block-end: var(--inkra-space-1);
|
|
5902
|
+
inset-inline-end: var(--inkra-space-1);
|
|
5903
|
+
justify-content: center;
|
|
5127
5904
|
pointer-events: none;
|
|
5905
|
+
position: absolute !important;
|
|
5906
|
+
z-index: 2;
|
|
5128
5907
|
}
|
|
5129
|
-
|
|
5908
|
+
.inkra-image-viewer__thumbnail-focus { opacity: 0; pointer-events: none; }
|
|
5130
5909
|
.inkra-image-viewer__thumbnail:focus-visible { outline: 0; }
|
|
5131
5910
|
.inkra-image-viewer__thumbnail:focus-visible .inkra-image-viewer__thumbnail-focus { opacity: 1; }
|
|
5132
5911
|
|
|
5133
5912
|
.inkra-image-viewer__thumbnail-image {
|
|
5134
|
-
position: absolute;
|
|
5135
|
-
inset: var(--inkra-space-1);
|
|
5136
|
-
inline-size: calc(100% - var(--inkra-space-2));
|
|
5137
5913
|
block-size: calc(100% - var(--inkra-space-2));
|
|
5138
5914
|
border-radius: var(--inkra-radius-sm);
|
|
5915
|
+
inline-size: calc(100% - var(--inkra-space-2));
|
|
5916
|
+
inset: var(--inkra-space-1);
|
|
5139
5917
|
object-fit: cover;
|
|
5140
5918
|
pointer-events: none;
|
|
5919
|
+
position: absolute;
|
|
5141
5920
|
user-select: none;
|
|
5142
5921
|
}
|
|
5143
5922
|
|
|
5144
|
-
@
|
|
5145
|
-
|
|
5146
|
-
|
|
5147
|
-
|
|
5148
|
-
|
|
5149
|
-
}
|
|
5923
|
+
@keyframes inkra-image-viewer-in { from { opacity: 0; } to { opacity: 1; } }
|
|
5924
|
+
@keyframes inkra-image-viewer-out { from { opacity: 1; } to { opacity: 0; } }
|
|
5925
|
+
|
|
5926
|
+
@media (max-width: 30rem) and (min-height: 30.001rem) {
|
|
5927
|
+
.inkra-image-viewer__bottom-row { align-items: stretch; flex-direction: column; gap: var(--inkra-space-1); }
|
|
5928
|
+
.inkra-image-viewer__counter { align-self: center; }
|
|
5929
|
+
.inkra-image-viewer__tools { align-self: center; }
|
|
5930
|
+
}
|
|
5150
5931
|
|
|
5151
|
-
|
|
5932
|
+
@media (max-width: 30rem) {
|
|
5152
5933
|
.inkra-image-viewer__previous { inset-inline-start: var(--inkra-space-2); }
|
|
5153
5934
|
.inkra-image-viewer__next { inset-inline-end: var(--inkra-space-2); }
|
|
5154
5935
|
.inkra-image-viewer__thumbnails { padding-inline: var(--inkra-space-3); }
|
|
5155
|
-
|
|
5936
|
+
}
|
|
5937
|
+
|
|
5938
|
+
@media (max-height: 30rem) {
|
|
5939
|
+
.inkra-image-viewer__bottom { max-block-size: min(40dvh, 12rem); }
|
|
5940
|
+
.inkra-image-viewer__bottom-row { justify-content: safe center; padding-block: var(--inkra-space-1); }
|
|
5941
|
+
.inkra-image-viewer__thumbnails { padding-block: var(--inkra-space-1); }
|
|
5942
|
+
.inkra-image-viewer__thumbnail { block-size: var(--inkra-touch-target); }
|
|
5943
|
+
}
|
|
5944
|
+
|
|
5945
|
+
@media (prefers-reduced-motion: reduce) {
|
|
5946
|
+
.inkra-image-viewer.inkra-overlay__content { animation: none !important; }
|
|
5156
5947
|
}
|
|
5157
5948
|
|
|
5158
5949
|
@media (forced-colors: active) {
|
|
5159
5950
|
.inkra-image-viewer__stage { border: 1px solid CanvasText; }
|
|
5951
|
+
.inkra-pencil-surface.inkra-image-viewer__stage-focus,
|
|
5952
|
+
.inkra-pencil-surface.inkra-image-viewer__tools-paper,
|
|
5953
|
+
.inkra-pencil-surface.inkra-image-viewer__close-paper { display: none !important; }
|
|
5954
|
+
.inkra-image-viewer__stage:focus-visible,
|
|
5955
|
+
.inkra-image-viewer__state:focus-visible { outline: var(--inkra-focus-width) solid Highlight; outline-offset: calc(-1 * var(--inkra-focus-width)); }
|
|
5160
5956
|
.inkra-image-viewer__thumbnail { border: 1px solid CanvasText; }
|
|
5161
5957
|
.inkra-image-viewer__thumbnail[aria-selected="true"] { border-width: 3px; }
|
|
5958
|
+
.inkra-pencil-surface.inkra-image-viewer__thumbnail-video { display: none !important; }
|
|
5162
5959
|
.inkra-image-viewer__pan-zoom .inkra-pan-zoom__viewport { border: 0; }
|
|
5163
5960
|
}
|
|
5164
5961
|
|
|
5165
5962
|
@media print {
|
|
5963
|
+
.inkra-image-viewer__close-control,
|
|
5166
5964
|
.inkra-image-viewer__navigation,
|
|
5167
|
-
.inkra-image-
|
|
5168
|
-
}
|
|
5169
|
-
|
|
5170
|
-
.inkra-keypad {
|
|
5171
|
-
--inkra-keypad-columns: 3;
|
|
5172
|
-
display: grid;
|
|
5173
|
-
gap: var(--inkra-space-2);
|
|
5174
|
-
inline-size: min(100%, 24rem);
|
|
5175
|
-
min-inline-size: 0;
|
|
5965
|
+
.inkra-image-viewer__bottom { display: none; }
|
|
5176
5966
|
}
|
|
5177
5967
|
|
|
5178
|
-
.inkra-
|
|
5968
|
+
.inkra-image-viewer__video-resource {
|
|
5969
|
+
block-size: 100%;
|
|
5970
|
+
box-sizing: border-box;
|
|
5971
|
+
container-type: inline-size;
|
|
5179
5972
|
display: grid;
|
|
5180
|
-
grid-template-
|
|
5181
|
-
|
|
5973
|
+
grid-template-rows: minmax(var(--inkra-touch-target), 1fr) auto;
|
|
5974
|
+
inline-size: 100%;
|
|
5975
|
+
min-block-size: 0;
|
|
5976
|
+
min-inline-size: 0;
|
|
5977
|
+
overflow: hidden;
|
|
5978
|
+
}
|
|
5979
|
+
|
|
5980
|
+
.inkra-image-viewer__video-media {
|
|
5981
|
+
align-self: stretch;
|
|
5982
|
+
background: #000;
|
|
5983
|
+
block-size: 100%;
|
|
5984
|
+
display: block;
|
|
5985
|
+
inline-size: 100%;
|
|
5986
|
+
min-block-size: 0;
|
|
5987
|
+
object-fit: contain;
|
|
5988
|
+
}
|
|
5989
|
+
|
|
5990
|
+
.inkra-image-viewer__video-controls {
|
|
5991
|
+
align-items: center;
|
|
5992
|
+
background: var(--inkra-paper);
|
|
5993
|
+
box-sizing: border-box;
|
|
5994
|
+
color: var(--inkra-ink);
|
|
5995
|
+
display: grid;
|
|
5996
|
+
gap: var(--inkra-space-2);
|
|
5997
|
+
grid-template-areas:
|
|
5998
|
+
"play seek time"
|
|
5999
|
+
"settings settings settings";
|
|
6000
|
+
grid-template-columns: var(--inkra-touch-target) minmax(var(--inkra-touch-target), 1fr) minmax(0, 6.5rem);
|
|
6001
|
+
grid-template-rows: minmax(var(--inkra-touch-target), auto) minmax(var(--inkra-touch-target), auto);
|
|
6002
|
+
inline-size: 100%;
|
|
6003
|
+
min-inline-size: 0;
|
|
6004
|
+
padding: var(--inkra-space-2) var(--inkra-space-3);
|
|
6005
|
+
}
|
|
6006
|
+
|
|
6007
|
+
.inkra-image-viewer__video-play { grid-area: play; }
|
|
6008
|
+
.inkra-image-viewer__video-seek { grid-area: seek; min-inline-size: 0; }
|
|
6009
|
+
.inkra-image-viewer__video-volume { grid-area: volume; min-inline-size: 0; }
|
|
6010
|
+
.inkra-image-viewer__video-seek .inkra-slider,
|
|
6011
|
+
.inkra-image-viewer__video-volume .inkra-slider { inline-size: 100%; min-inline-size: 0; }
|
|
6012
|
+
.inkra-image-viewer__video-time { color: var(--inkra-ink-muted); font-variant-numeric: tabular-nums; grid-area: time; min-inline-size: 0; overflow-wrap: anywhere; text-align: center; unicode-bidi: isolate; }
|
|
6013
|
+
.inkra-image-viewer__video-settings {
|
|
6014
|
+
align-items: center;
|
|
6015
|
+
display: grid;
|
|
6016
|
+
gap: var(--inkra-space-2);
|
|
6017
|
+
grid-area: settings;
|
|
6018
|
+
grid-template-areas: "mute volume rate";
|
|
6019
|
+
grid-template-columns: var(--inkra-touch-target) minmax(var(--inkra-touch-target), 1fr) minmax(5.5rem, max-content);
|
|
6020
|
+
min-inline-size: 0;
|
|
6021
|
+
}
|
|
6022
|
+
.inkra-image-viewer__video-mute { grid-area: mute; }
|
|
6023
|
+
.inkra-image-viewer__video-settings > .inkra-select__trigger { grid-area: rate; inline-size: 100%; min-inline-size: 5.5rem; }
|
|
6024
|
+
.inkra-image-viewer__video-error { color: var(--inkra-danger); grid-column: 1 / -1; margin: 0; overflow-wrap: anywhere; }
|
|
6025
|
+
|
|
6026
|
+
@container (max-width: 22rem) {
|
|
6027
|
+
.inkra-image-viewer__video-controls { column-gap: var(--inkra-space-1); padding-inline: var(--inkra-space-2); }
|
|
6028
|
+
.inkra-image-viewer__video-settings { column-gap: var(--inkra-space-1); }
|
|
6029
|
+
}
|
|
6030
|
+
|
|
6031
|
+
@media (forced-colors: active) {
|
|
6032
|
+
.inkra-image-viewer__video-media { border: 1px solid CanvasText; }
|
|
6033
|
+
.inkra-image-viewer__video-controls { border-block-start: 1px solid CanvasText; }
|
|
6034
|
+
.inkra-image-viewer__video-error { color: Mark; }
|
|
6035
|
+
}
|
|
6036
|
+
|
|
6037
|
+
@media (prefers-reduced-motion: reduce) {
|
|
6038
|
+
.inkra-image-viewer__video-resource * { animation: none !important; transition: none !important; }
|
|
6039
|
+
}
|
|
6040
|
+
|
|
6041
|
+
.inkra-keypad {
|
|
6042
|
+
--inkra-keypad-columns: 3;
|
|
6043
|
+
display: grid;
|
|
6044
|
+
gap: var(--inkra-space-2);
|
|
6045
|
+
inline-size: min(100%, 24rem);
|
|
6046
|
+
min-inline-size: 0;
|
|
6047
|
+
}
|
|
6048
|
+
|
|
6049
|
+
.inkra-keypad__row {
|
|
6050
|
+
display: grid;
|
|
6051
|
+
grid-template-columns: repeat(var(--inkra-keypad-columns), minmax(0, 1fr));
|
|
6052
|
+
gap: var(--inkra-space-2);
|
|
5182
6053
|
min-inline-size: 0;
|
|
5183
6054
|
}
|
|
5184
6055
|
|
|
@@ -5600,16 +6471,30 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
5600
6471
|
display: inline-flex;
|
|
5601
6472
|
max-inline-size: 100%;
|
|
5602
6473
|
outline: none;
|
|
5603
|
-
|
|
5604
|
-
overscroll-behavior-inline: contain;
|
|
6474
|
+
position: relative;
|
|
5605
6475
|
touch-action: manipulation;
|
|
5606
6476
|
}
|
|
5607
6477
|
|
|
6478
|
+
.inkra-rating__focus-ring {
|
|
6479
|
+
--inkra-accent-strong: var(--inkra-focus);
|
|
6480
|
+
inset: 1px;
|
|
6481
|
+
opacity: 0;
|
|
6482
|
+
pointer-events: none;
|
|
6483
|
+
position: absolute !important;
|
|
6484
|
+
z-index: 2;
|
|
6485
|
+
}
|
|
6486
|
+
|
|
5608
6487
|
.inkra-rating__symbols {
|
|
5609
6488
|
display: inline-flex;
|
|
5610
6489
|
flex: 0 0 auto;
|
|
6490
|
+
max-inline-size: 100%;
|
|
6491
|
+
overflow-x: auto;
|
|
6492
|
+
overscroll-behavior-inline: contain;
|
|
6493
|
+
scrollbar-width: none;
|
|
5611
6494
|
}
|
|
5612
6495
|
|
|
6496
|
+
.inkra-rating__symbols::-webkit-scrollbar { display: none; }
|
|
6497
|
+
|
|
5613
6498
|
.inkra-rating__symbol-target {
|
|
5614
6499
|
block-size: var(--inkra-touch-target);
|
|
5615
6500
|
cursor: pointer;
|
|
@@ -5649,8 +6534,11 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
5649
6534
|
}
|
|
5650
6535
|
|
|
5651
6536
|
.inkra-rating:focus-visible {
|
|
5652
|
-
outline:
|
|
5653
|
-
|
|
6537
|
+
outline: none;
|
|
6538
|
+
}
|
|
6539
|
+
|
|
6540
|
+
.inkra-rating:focus-visible > .inkra-rating__focus-ring {
|
|
6541
|
+
opacity: 1;
|
|
5654
6542
|
}
|
|
5655
6543
|
|
|
5656
6544
|
.inkra-rating[data-readonly] .inkra-rating__symbol-target,
|
|
@@ -5673,7 +6561,18 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
5673
6561
|
}
|
|
5674
6562
|
|
|
5675
6563
|
.inkra-rating:focus-visible {
|
|
5676
|
-
outline:
|
|
6564
|
+
outline: var(--inkra-focus-width) solid Highlight;
|
|
6565
|
+
outline-offset: calc(-1 * var(--inkra-focus-width));
|
|
6566
|
+
}
|
|
6567
|
+
|
|
6568
|
+
.inkra-rating__focus-ring {
|
|
6569
|
+
display: none !important;
|
|
6570
|
+
}
|
|
6571
|
+
}
|
|
6572
|
+
|
|
6573
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
6574
|
+
.inkra-rating__focus-ring {
|
|
6575
|
+
transition: opacity var(--inkra-motion-fast) var(--inkra-ease);
|
|
5677
6576
|
}
|
|
5678
6577
|
}
|
|
5679
6578
|
|
|
@@ -5682,6 +6581,10 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
5682
6581
|
color: CanvasText;
|
|
5683
6582
|
overflow: visible;
|
|
5684
6583
|
}
|
|
6584
|
+
|
|
6585
|
+
.inkra-rating__focus-ring {
|
|
6586
|
+
display: none !important;
|
|
6587
|
+
}
|
|
5685
6588
|
}
|
|
5686
6589
|
|
|
5687
6590
|
.inkra-resizable {
|
|
@@ -5794,8 +6697,8 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
5794
6697
|
}
|
|
5795
6698
|
|
|
5796
6699
|
.inkra-scroll-area {
|
|
5797
|
-
--inkra-scroll-area-size:
|
|
5798
|
-
--inkra-scroll-area-gap:
|
|
6700
|
+
--inkra-scroll-area-size: 14px;
|
|
6701
|
+
--inkra-scroll-area-gap: 2px;
|
|
5799
6702
|
color: var(--inkra-ink);
|
|
5800
6703
|
min-block-size: 0;
|
|
5801
6704
|
min-inline-size: 0;
|
|
@@ -5816,6 +6719,7 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
5816
6719
|
.inkra-scroll-area__content { min-block-size: 100%; min-inline-size: 100%; }
|
|
5817
6720
|
|
|
5818
6721
|
.inkra-scroll-area__scrollbar {
|
|
6722
|
+
align-items: stretch;
|
|
5819
6723
|
box-sizing: border-box;
|
|
5820
6724
|
display: flex;
|
|
5821
6725
|
opacity: 0;
|
|
@@ -5825,10 +6729,12 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
5825
6729
|
z-index: 2;
|
|
5826
6730
|
}
|
|
5827
6731
|
|
|
5828
|
-
.inkra-scroll-area[data-type="always"] .inkra-scroll-area__scrollbar
|
|
6732
|
+
.inkra-scroll-area[data-type="always"] .inkra-scroll-area__scrollbar { opacity: .76; pointer-events: auto; }
|
|
5829
6733
|
.inkra-scroll-area:hover .inkra-scroll-area__scrollbar,
|
|
5830
6734
|
.inkra-scroll-area:focus-within .inkra-scroll-area__scrollbar,
|
|
6735
|
+
.inkra-scroll-area__scrollbar[data-hovering],
|
|
5831
6736
|
.inkra-scroll-area__scrollbar[data-scrolling] { opacity: 1; pointer-events: auto; }
|
|
6737
|
+
.inkra-scroll-area__scrollbar[data-scrolling] { transition-duration: 0ms; }
|
|
5832
6738
|
|
|
5833
6739
|
.inkra-scroll-area__scrollbar[data-orientation="vertical"] {
|
|
5834
6740
|
inset-block: 0;
|
|
@@ -5846,25 +6752,66 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
5846
6752
|
.inkra-scroll-area__thumb,
|
|
5847
6753
|
.inkra-scroll-area__thumb-surface {
|
|
5848
6754
|
display: block !important;
|
|
5849
|
-
pointer-events: none;
|
|
5850
6755
|
position: absolute !important;
|
|
5851
6756
|
}
|
|
5852
6757
|
|
|
5853
|
-
.inkra-scroll-area__track
|
|
5854
|
-
.inkra-scroll-area__thumb {
|
|
6758
|
+
.inkra-scroll-area__track,
|
|
6759
|
+
.inkra-scroll-area__thumb-surface {
|
|
6760
|
+
pointer-events: none;
|
|
6761
|
+
transition: opacity var(--inkra-motion-fast) var(--inkra-ease);
|
|
6762
|
+
}
|
|
6763
|
+
.inkra-scroll-area__track { opacity: .34; }
|
|
6764
|
+
.inkra-scroll-area__thumb { cursor: grab; pointer-events: auto; }
|
|
5855
6765
|
.inkra-scroll-area__thumb:active { cursor: grabbing; }
|
|
5856
|
-
.inkra-scroll-area__thumb-surface {
|
|
5857
|
-
|
|
6766
|
+
.inkra-scroll-area__thumb-surface { opacity: .82; }
|
|
6767
|
+
|
|
6768
|
+
.inkra-scroll-area__scrollbar[data-orientation="vertical"] .inkra-scroll-area__track {
|
|
6769
|
+
inset-block: var(--inkra-scroll-area-gap);
|
|
6770
|
+
inset-inline: 4px;
|
|
6771
|
+
}
|
|
6772
|
+
.inkra-scroll-area__scrollbar[data-orientation="vertical"] .inkra-scroll-area__thumb {
|
|
6773
|
+
inset-inline: var(--inkra-scroll-area-gap);
|
|
6774
|
+
min-block-size: 28px;
|
|
6775
|
+
}
|
|
6776
|
+
.inkra-scroll-area__scrollbar[data-orientation="vertical"] .inkra-scroll-area__thumb-surface {
|
|
6777
|
+
inset-block: 2px;
|
|
6778
|
+
inset-inline: 1px;
|
|
6779
|
+
}
|
|
6780
|
+
.inkra-scroll-area__scrollbar[data-orientation="horizontal"] .inkra-scroll-area__track {
|
|
6781
|
+
inset-block: 4px;
|
|
6782
|
+
inset-inline: var(--inkra-scroll-area-gap);
|
|
6783
|
+
}
|
|
6784
|
+
.inkra-scroll-area__scrollbar[data-orientation="horizontal"] .inkra-scroll-area__thumb {
|
|
6785
|
+
inset-block: var(--inkra-scroll-area-gap);
|
|
6786
|
+
min-inline-size: 32px;
|
|
6787
|
+
}
|
|
6788
|
+
.inkra-scroll-area__scrollbar[data-orientation="horizontal"] .inkra-scroll-area__thumb-surface {
|
|
6789
|
+
inset-block: 1px;
|
|
6790
|
+
inset-inline: 2px;
|
|
6791
|
+
}
|
|
6792
|
+
|
|
6793
|
+
.inkra-scroll-area:hover .inkra-scroll-area__track,
|
|
6794
|
+
.inkra-scroll-area:focus-within .inkra-scroll-area__track,
|
|
6795
|
+
.inkra-scroll-area__scrollbar[data-hovering] .inkra-scroll-area__track,
|
|
6796
|
+
.inkra-scroll-area__scrollbar[data-scrolling] .inkra-scroll-area__track { opacity: .5; }
|
|
6797
|
+
.inkra-scroll-area:hover .inkra-scroll-area__thumb-surface,
|
|
6798
|
+
.inkra-scroll-area:focus-within .inkra-scroll-area__thumb-surface,
|
|
6799
|
+
.inkra-scroll-area__scrollbar[data-hovering] .inkra-scroll-area__thumb-surface,
|
|
6800
|
+
.inkra-scroll-area__scrollbar[data-scrolling] .inkra-scroll-area__thumb-surface { opacity: 1; }
|
|
6801
|
+
.inkra-scroll-area__scrollbar[data-scrolling] .inkra-scroll-area__track { opacity: .62; }
|
|
5858
6802
|
.inkra-scroll-area__corner { background: transparent; }
|
|
5859
6803
|
|
|
5860
6804
|
@media (prefers-reduced-motion: reduce) {
|
|
5861
|
-
.inkra-scroll-area__scrollbar
|
|
6805
|
+
.inkra-scroll-area__scrollbar,
|
|
6806
|
+
.inkra-scroll-area__track,
|
|
6807
|
+
.inkra-scroll-area__thumb-surface { transition: none; }
|
|
5862
6808
|
}
|
|
5863
6809
|
|
|
5864
6810
|
@media (forced-colors: active) {
|
|
5865
6811
|
.inkra-scroll-area__scrollbar { opacity: 1; }
|
|
5866
|
-
.inkra-scroll-area__track { background: Canvas; border: 1px solid CanvasText; }
|
|
5867
|
-
.inkra-scroll-area__thumb-surface { background: ButtonText; border:
|
|
6812
|
+
.inkra-scroll-area__track { background: Canvas; border: 1px solid CanvasText; opacity: 1; }
|
|
6813
|
+
.inkra-scroll-area__thumb-surface { background: ButtonText; border: 1px solid ButtonText; opacity: 1; }
|
|
6814
|
+
.inkra-scroll-area__viewport:focus-visible { outline: 2px solid Highlight; outline-offset: -2px; }
|
|
5868
6815
|
}
|
|
5869
6816
|
|
|
5870
6817
|
@media print {
|
|
@@ -6061,6 +7008,13 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
6061
7008
|
--inkra-field-control-height: var(--inkra-control-md);
|
|
6062
7009
|
--inkra-field-control-font-size: var(--inkra-text-md);
|
|
6063
7010
|
--inkra-field-control-padding: var(--inkra-space-3);
|
|
7011
|
+
--inkra-tag-input-control-inset: var(--inkra-space-1);
|
|
7012
|
+
--inkra-tag-input-item-height: calc(var(--inkra-field-control-height) - 2 * var(--inkra-tag-input-control-inset));
|
|
7013
|
+
--inkra-tag-input-row-gap: max(
|
|
7014
|
+
var(--inkra-space-1),
|
|
7015
|
+
calc(var(--inkra-touch-target) - var(--inkra-tag-input-item-height))
|
|
7016
|
+
);
|
|
7017
|
+
--inkra-tag-input-tag-inset: var(--inkra-space-1);
|
|
6064
7018
|
|
|
6065
7019
|
display: inline-grid;
|
|
6066
7020
|
inline-size: 24rem;
|
|
@@ -6093,12 +7047,17 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
6093
7047
|
block-size: auto;
|
|
6094
7048
|
align-items: center;
|
|
6095
7049
|
flex-wrap: wrap;
|
|
6096
|
-
gap: var(--inkra-space-1);
|
|
6097
|
-
|
|
7050
|
+
column-gap: var(--inkra-space-1);
|
|
7051
|
+
row-gap: var(--inkra-tag-input-row-gap);
|
|
7052
|
+
padding: var(--inkra-tag-input-control-inset) var(--inkra-field-control-padding);
|
|
6098
7053
|
color: var(--inkra-ink);
|
|
6099
7054
|
cursor: text;
|
|
6100
7055
|
}
|
|
6101
7056
|
|
|
7057
|
+
.inkra-tag-input[data-has-tags="true"] .inkra-tag-input__control {
|
|
7058
|
+
padding-inline: var(--inkra-tag-input-control-inset);
|
|
7059
|
+
}
|
|
7060
|
+
|
|
6102
7061
|
.inkra-tag-input[data-focus-within="true"] .inkra-tag-input__control > :is(.inkra-pencil-surface__ink, .inkra-pencil-surface__border) {
|
|
6103
7062
|
filter: contrast(1.28) saturate(1.08);
|
|
6104
7063
|
}
|
|
@@ -6109,7 +7068,8 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
6109
7068
|
align-items: center;
|
|
6110
7069
|
flex: 0 1 auto;
|
|
6111
7070
|
flex-wrap: wrap;
|
|
6112
|
-
gap: var(--inkra-space-1);
|
|
7071
|
+
column-gap: var(--inkra-space-1);
|
|
7072
|
+
row-gap: var(--inkra-tag-input-row-gap);
|
|
6113
7073
|
margin: 0;
|
|
6114
7074
|
padding: 0;
|
|
6115
7075
|
list-style: none;
|
|
@@ -6119,27 +7079,22 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
6119
7079
|
|
|
6120
7080
|
.inkra-tag-input__tag {
|
|
6121
7081
|
display: inline-flex !important;
|
|
7082
|
+
box-sizing: border-box;
|
|
6122
7083
|
min-inline-size: 0;
|
|
6123
|
-
|
|
7084
|
+
block-size: var(--inkra-tag-input-item-height);
|
|
6124
7085
|
align-items: center;
|
|
6125
|
-
|
|
7086
|
+
gap: var(--inkra-space-1);
|
|
7087
|
+
padding: var(--inkra-tag-input-tag-inset);
|
|
6126
7088
|
color: var(--inkra-ink);
|
|
6127
7089
|
font-family: var(--inkra-font-body);
|
|
6128
7090
|
font-size: var(--inkra-field-control-font-size);
|
|
6129
7091
|
line-height: var(--inkra-line-ui);
|
|
6130
7092
|
}
|
|
6131
7093
|
|
|
6132
|
-
.inkra-tag-input__tag > .inkra-pencil-surface__content {
|
|
6133
|
-
display: inline-flex;
|
|
6134
|
-
align-items: center;
|
|
6135
|
-
min-inline-size: 0;
|
|
6136
|
-
}
|
|
6137
|
-
|
|
6138
7094
|
.inkra-tag-input__tag-label {
|
|
6139
7095
|
min-inline-size: 0;
|
|
6140
7096
|
max-inline-size: min(16rem, 50vw);
|
|
6141
7097
|
overflow: hidden;
|
|
6142
|
-
padding-inline: var(--inkra-space-3);
|
|
6143
7098
|
text-overflow: ellipsis;
|
|
6144
7099
|
white-space: nowrap;
|
|
6145
7100
|
}
|
|
@@ -6147,9 +7102,9 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
6147
7102
|
.inkra-tag-input__remove,
|
|
6148
7103
|
.inkra-tag-input__clear {
|
|
6149
7104
|
display: inline-flex;
|
|
7105
|
+
position: relative;
|
|
6150
7106
|
box-sizing: border-box;
|
|
6151
7107
|
inline-size: var(--inkra-touch-target);
|
|
6152
|
-
block-size: var(--inkra-touch-target);
|
|
6153
7108
|
flex: 0 0 var(--inkra-touch-target);
|
|
6154
7109
|
align-items: center;
|
|
6155
7110
|
justify-content: center;
|
|
@@ -6161,7 +7116,19 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
6161
7116
|
cursor: pointer;
|
|
6162
7117
|
}
|
|
6163
7118
|
|
|
6164
|
-
.inkra-tag-input__remove {
|
|
7119
|
+
.inkra-tag-input__remove { block-size: 18px; }
|
|
7120
|
+
.inkra-tag-input__clear { block-size: var(--inkra-tag-input-item-height); }
|
|
7121
|
+
|
|
7122
|
+
.inkra-tag-input__remove::before,
|
|
7123
|
+
.inkra-tag-input__clear::before {
|
|
7124
|
+
position: absolute;
|
|
7125
|
+
inset-block-start: 50%;
|
|
7126
|
+
inset-inline: 0;
|
|
7127
|
+
min-block-size: var(--inkra-touch-target);
|
|
7128
|
+
content: "";
|
|
7129
|
+
transform: translateY(-50%);
|
|
7130
|
+
}
|
|
7131
|
+
|
|
6165
7132
|
.inkra-tag-input__remove:hover,
|
|
6166
7133
|
.inkra-tag-input__clear:hover { color: var(--inkra-ink); }
|
|
6167
7134
|
|
|
@@ -6173,20 +7140,26 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
6173
7140
|
|
|
6174
7141
|
.inkra-tag-input__input {
|
|
6175
7142
|
min-inline-size: min(8rem, 100%);
|
|
6176
|
-
min-block-size: var(--inkra-
|
|
6177
|
-
block-size: var(--inkra-
|
|
7143
|
+
min-block-size: var(--inkra-tag-input-item-height);
|
|
7144
|
+
block-size: var(--inkra-tag-input-item-height);
|
|
6178
7145
|
flex: 1 1 8rem;
|
|
6179
7146
|
padding: 0;
|
|
6180
7147
|
color: var(--inkra-ink);
|
|
6181
7148
|
font-size: var(--inkra-field-control-font-size);
|
|
6182
7149
|
}
|
|
6183
7150
|
|
|
7151
|
+
.inkra-tag-input[data-draft-empty="true"][data-has-tags="true"]:not([data-has-placeholder="true"])
|
|
7152
|
+
.inkra-tag-input__input {
|
|
7153
|
+
min-inline-size: 1px;
|
|
7154
|
+
flex-basis: 1px;
|
|
7155
|
+
}
|
|
7156
|
+
|
|
6184
7157
|
.inkra-tag-input__input::placeholder {
|
|
6185
7158
|
color: var(--inkra-ink-subtle);
|
|
6186
7159
|
opacity: 1;
|
|
6187
7160
|
}
|
|
6188
7161
|
|
|
6189
|
-
.inkra-tag-input__clear { margin-inline-end:
|
|
7162
|
+
.inkra-tag-input__clear { margin-inline-end: 0; }
|
|
6190
7163
|
|
|
6191
7164
|
.inkra-tag-input__underline {
|
|
6192
7165
|
position: absolute;
|
|
@@ -6246,12 +7219,20 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
6246
7219
|
}
|
|
6247
7220
|
|
|
6248
7221
|
.inkra-transfer {
|
|
7222
|
+
color: var(--inkra-ink);
|
|
7223
|
+
container-name: inkra-transfer;
|
|
7224
|
+
container-type: inline-size;
|
|
7225
|
+
font-family: var(--inkra-font-body);
|
|
7226
|
+
line-height: var(--inkra-line-ui);
|
|
7227
|
+
min-width: 0;
|
|
7228
|
+
}
|
|
7229
|
+
|
|
7230
|
+
.inkra-transfer__layout {
|
|
6249
7231
|
display: grid;
|
|
6250
7232
|
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
|
|
6251
7233
|
align-items: stretch;
|
|
6252
7234
|
gap: var(--inkra-space-4);
|
|
6253
7235
|
min-width: 0;
|
|
6254
|
-
color: var(--inkra-ink);
|
|
6255
7236
|
}
|
|
6256
7237
|
|
|
6257
7238
|
.inkra-transfer__panel {
|
|
@@ -6268,9 +7249,20 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
6268
7249
|
grid-template-rows: auto auto auto auto minmax(180px, 1fr);
|
|
6269
7250
|
}
|
|
6270
7251
|
|
|
6271
|
-
.inkra-transfer__panel
|
|
6272
|
-
|
|
6273
|
-
|
|
7252
|
+
.inkra-transfer__panel-focus {
|
|
7253
|
+
--inkra-accent-strong: var(--inkra-focus);
|
|
7254
|
+
|
|
7255
|
+
display: block !important;
|
|
7256
|
+
inset: calc(-1 * var(--inkra-focus-offset));
|
|
7257
|
+
opacity: 0;
|
|
7258
|
+
pointer-events: none;
|
|
7259
|
+
position: absolute !important;
|
|
7260
|
+
z-index: 3;
|
|
7261
|
+
}
|
|
7262
|
+
|
|
7263
|
+
.inkra-transfer__panel:focus-visible { outline: 0; }
|
|
7264
|
+
.inkra-transfer__panel:focus-visible > .inkra-transfer__panel-focus {
|
|
7265
|
+
opacity: 1;
|
|
6274
7266
|
}
|
|
6275
7267
|
|
|
6276
7268
|
.inkra-transfer__header,
|
|
@@ -6343,40 +7335,63 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
6343
7335
|
|
|
6344
7336
|
.inkra-transfer[data-disabled] { opacity: .72; }
|
|
6345
7337
|
|
|
6346
|
-
|
|
6347
|
-
|
|
7338
|
+
.inkra-transfer .inkra-transfer__direction-icon[data-direction="to-source"] { transform: scaleX(-1); }
|
|
7339
|
+
.inkra-transfer:dir(rtl) .inkra-transfer__direction-icon[data-direction="to-target"] { transform: scaleX(-1); }
|
|
7340
|
+
.inkra-transfer:dir(rtl) .inkra-transfer__direction-icon[data-direction="to-source"] { transform: none; }
|
|
7341
|
+
|
|
7342
|
+
@container inkra-transfer (max-width: 720px) {
|
|
7343
|
+
.inkra-transfer__layout { grid-template-columns: minmax(0, 1fr); }
|
|
6348
7344
|
.inkra-transfer__panel { min-height: 320px; }
|
|
6349
7345
|
.inkra-transfer__list { max-height: 280px; }
|
|
6350
7346
|
.inkra-transfer__actions { grid-auto-flow: column; justify-self: center; }
|
|
6351
|
-
.inkra-
|
|
7347
|
+
.inkra-transfer:dir(ltr) .inkra-transfer__direction-icon[data-direction="to-target"],
|
|
7348
|
+
.inkra-transfer:dir(rtl) .inkra-transfer__direction-icon[data-direction="to-target"] {
|
|
7349
|
+
transform: rotate(90deg);
|
|
7350
|
+
}
|
|
7351
|
+
.inkra-transfer:dir(ltr) .inkra-transfer__direction-icon[data-direction="to-source"],
|
|
7352
|
+
.inkra-transfer:dir(rtl) .inkra-transfer__direction-icon[data-direction="to-source"] {
|
|
7353
|
+
transform: rotate(-90deg);
|
|
7354
|
+
}
|
|
6352
7355
|
}
|
|
6353
7356
|
|
|
6354
7357
|
@media (forced-colors: active) {
|
|
6355
7358
|
.inkra-transfer__panel { border: 1px solid CanvasText; }
|
|
6356
|
-
.inkra-transfer__panel:focus-visible { outline
|
|
7359
|
+
.inkra-transfer__panel:focus-visible { outline: 2px solid Highlight; outline-offset: 3px; }
|
|
7360
|
+
.inkra-transfer__panel-focus { display: none !important; }
|
|
6357
7361
|
}
|
|
6358
7362
|
|
|
6359
7363
|
@media print {
|
|
6360
|
-
.inkra-
|
|
7364
|
+
.inkra-transfer__layout { grid-template-columns: 1fr 1fr; }
|
|
6361
7365
|
.inkra-transfer__actions { display: none; }
|
|
6362
7366
|
.inkra-transfer__panel { border: 1px solid currentColor; }
|
|
6363
7367
|
}
|
|
6364
7368
|
|
|
6365
7369
|
|
|
6366
7370
|
.inkra-tree-select {
|
|
6367
|
-
|
|
7371
|
+
--inkra-tree-select-control-height: var(--inkra-control-md);
|
|
7372
|
+
|
|
7373
|
+
display: flex;
|
|
7374
|
+
align-items: center;
|
|
7375
|
+
min-height: var(--inkra-touch-target);
|
|
6368
7376
|
min-width: 0;
|
|
6369
7377
|
width: 100%;
|
|
6370
7378
|
color: var(--inkra-ink);
|
|
6371
7379
|
}
|
|
6372
7380
|
|
|
6373
|
-
.inkra-tree-
|
|
6374
|
-
|
|
6375
|
-
|
|
6376
|
-
|
|
7381
|
+
.inkra-tree-select[data-size="sm"] { --inkra-tree-select-control-height: var(--inkra-control-sm); }
|
|
7382
|
+
.inkra-tree-select[data-size="lg"] { --inkra-tree-select-control-height: var(--inkra-control-lg); }
|
|
7383
|
+
|
|
7384
|
+
.inkra-button-group.inkra-tree-select__control {
|
|
7385
|
+
align-items: center;
|
|
7386
|
+
block-size: var(--inkra-tree-select-control-height);
|
|
6377
7387
|
min-width: 0;
|
|
7388
|
+
overflow: visible;
|
|
7389
|
+
width: 100%;
|
|
6378
7390
|
}
|
|
6379
7391
|
|
|
7392
|
+
.inkra-tree-select__control > .inkra-tree-select__trigger { flex: 1 1 auto; }
|
|
7393
|
+
.inkra-tree-select__control > .inkra-tree-select__clear { flex: 0 0 auto; }
|
|
7394
|
+
|
|
6380
7395
|
.inkra-tree-select__trigger,
|
|
6381
7396
|
.inkra-tree-select__trigger > .inkra-button__surface {
|
|
6382
7397
|
min-width: 0;
|
|
@@ -6402,10 +7417,24 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
6402
7417
|
color: var(--inkra-ink-subtle);
|
|
6403
7418
|
}
|
|
6404
7419
|
|
|
6405
|
-
.inkra-tree-select__clear[
|
|
7420
|
+
.inkra-tree-select__clear[aria-hidden="true"] {
|
|
6406
7421
|
visibility: hidden;
|
|
6407
7422
|
}
|
|
6408
7423
|
|
|
7424
|
+
.inkra-tree-select__control .inkra-button-group__divider[data-orientation="vertical"] {
|
|
7425
|
+
block-size: var(--inkra-tree-select-control-height);
|
|
7426
|
+
inset-block-start: 50%;
|
|
7427
|
+
transform: translateY(-50%);
|
|
7428
|
+
}
|
|
7429
|
+
|
|
7430
|
+
.inkra-tree-select[data-invalid] {
|
|
7431
|
+
color: var(--inkra-danger);
|
|
7432
|
+
}
|
|
7433
|
+
|
|
7434
|
+
.inkra-tree-select[data-invalid] .inkra-tree-select__control {
|
|
7435
|
+
--inkra-accent-strong: var(--inkra-danger);
|
|
7436
|
+
}
|
|
7437
|
+
|
|
6409
7438
|
.inkra-tree-select__popover {
|
|
6410
7439
|
width: max(var(--radix-popover-trigger-width, 18rem), 18rem);
|
|
6411
7440
|
max-width: min(32rem, calc(100vw - var(--inkra-space-4)));
|
|
@@ -6450,6 +7479,11 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
6450
7479
|
}
|
|
6451
7480
|
|
|
6452
7481
|
@media (forced-colors: active) {
|
|
7482
|
+
.inkra-tree-select[data-invalid] .inkra-tree-select__control {
|
|
7483
|
+
outline: 2px solid Mark;
|
|
7484
|
+
outline-offset: 2px;
|
|
7485
|
+
}
|
|
7486
|
+
|
|
6453
7487
|
.inkra-tree-select__popover {
|
|
6454
7488
|
border: 1px solid CanvasText;
|
|
6455
7489
|
}
|
|
@@ -6528,117 +7562,497 @@ div.inkra-choice-grid > .inkra-radio-group {
|
|
|
6528
7562
|
}
|
|
6529
7563
|
}
|
|
6530
7564
|
|
|
6531
|
-
.inkra-virtual-list__frame {
|
|
6532
|
-
min-inline-size: 0;
|
|
7565
|
+
.inkra-virtual-list__frame {
|
|
7566
|
+
min-inline-size: 0;
|
|
7567
|
+
position: relative;
|
|
7568
|
+
}
|
|
7569
|
+
|
|
7570
|
+
.inkra-virtual-list__focus {
|
|
7571
|
+
position: absolute;
|
|
7572
|
+
inset: 0;
|
|
7573
|
+
opacity: 0;
|
|
7574
|
+
pointer-events: none;
|
|
7575
|
+
}
|
|
7576
|
+
|
|
7577
|
+
.inkra-virtual-list__frame:has(> .inkra-virtual-list:focus-visible) > .inkra-virtual-list__focus {
|
|
7578
|
+
opacity: 1;
|
|
7579
|
+
}
|
|
7580
|
+
|
|
7581
|
+
.inkra-virtual-list {
|
|
7582
|
+
block-size: 20rem;
|
|
7583
|
+
color: var(--inkra-ink);
|
|
7584
|
+
min-block-size: 8rem;
|
|
7585
|
+
min-inline-size: 0;
|
|
7586
|
+
outline: 0;
|
|
7587
|
+
overflow: auto;
|
|
7588
|
+
overscroll-behavior: contain;
|
|
7589
|
+
position: relative;
|
|
7590
|
+
scrollbar-gutter: stable;
|
|
7591
|
+
}
|
|
7592
|
+
|
|
7593
|
+
.inkra-virtual-list[data-external-scroll="true"] {
|
|
7594
|
+
block-size: auto;
|
|
7595
|
+
min-block-size: 0;
|
|
7596
|
+
overflow: visible;
|
|
7597
|
+
scrollbar-gutter: auto;
|
|
7598
|
+
}
|
|
7599
|
+
|
|
7600
|
+
.inkra-virtual-list:focus-visible {
|
|
7601
|
+
outline: none;
|
|
7602
|
+
}
|
|
7603
|
+
|
|
7604
|
+
.inkra-virtual-list__items {
|
|
7605
|
+
inline-size: 100%;
|
|
7606
|
+
list-style: none;
|
|
7607
|
+
margin: 0;
|
|
7608
|
+
min-inline-size: 0;
|
|
7609
|
+
padding: 0;
|
|
7610
|
+
position: relative;
|
|
7611
|
+
}
|
|
7612
|
+
|
|
7613
|
+
.inkra-virtual-list[data-virtualized="true"] .inkra-virtual-list__item {
|
|
7614
|
+
inset-block-start: 0;
|
|
7615
|
+
inset-inline-start: 0;
|
|
7616
|
+
position: absolute;
|
|
7617
|
+
}
|
|
7618
|
+
|
|
7619
|
+
.inkra-virtual-list__item {
|
|
7620
|
+
box-sizing: border-box;
|
|
7621
|
+
inline-size: 100%;
|
|
7622
|
+
min-block-size: var(--inkra-touch-target);
|
|
7623
|
+
min-inline-size: 0;
|
|
7624
|
+
overflow-wrap: anywhere;
|
|
7625
|
+
padding: var(--inkra-space-2) var(--inkra-space-3);
|
|
7626
|
+
position: relative;
|
|
7627
|
+
will-change: transform;
|
|
7628
|
+
}
|
|
7629
|
+
|
|
7630
|
+
.inkra-virtual-list:not([data-virtualized="true"]) .inkra-virtual-list__item {
|
|
7631
|
+
will-change: auto;
|
|
7632
|
+
}
|
|
7633
|
+
|
|
7634
|
+
.inkra-virtual-list__item > .inkra-virtual-list__separator {
|
|
7635
|
+
color: var(--inkra-border);
|
|
7636
|
+
inset-block-start: -4px;
|
|
7637
|
+
inset-inline: var(--inkra-space-3);
|
|
7638
|
+
inline-size: auto;
|
|
7639
|
+
opacity: .58;
|
|
7640
|
+
position: absolute;
|
|
7641
|
+
width: auto;
|
|
7642
|
+
}
|
|
7643
|
+
|
|
7644
|
+
.inkra-virtual-list__empty {
|
|
7645
|
+
color: var(--inkra-ink-muted);
|
|
7646
|
+
display: grid;
|
|
7647
|
+
min-block-size: 8rem;
|
|
7648
|
+
padding: var(--inkra-space-6);
|
|
7649
|
+
place-items: center;
|
|
7650
|
+
text-align: center;
|
|
7651
|
+
}
|
|
7652
|
+
|
|
7653
|
+
@media (forced-colors: active) {
|
|
7654
|
+
.inkra-virtual-list__frame { border: 1px solid CanvasText; }
|
|
7655
|
+
.inkra-virtual-list:focus-visible {
|
|
7656
|
+
outline: var(--inkra-focus-width) solid Highlight;
|
|
7657
|
+
outline-color: Highlight;
|
|
7658
|
+
outline-offset: calc(-1 * var(--inkra-focus-width));
|
|
7659
|
+
}
|
|
7660
|
+
.inkra-virtual-list__item > .inkra-virtual-list__separator {
|
|
7661
|
+
inset-block-start: 0;
|
|
7662
|
+
opacity: 1;
|
|
7663
|
+
}
|
|
7664
|
+
}
|
|
7665
|
+
|
|
7666
|
+
@media print {
|
|
7667
|
+
.inkra-virtual-list {
|
|
7668
|
+
block-size: auto !important;
|
|
7669
|
+
overflow: visible;
|
|
7670
|
+
}
|
|
7671
|
+
|
|
7672
|
+
.inkra-virtual-list__item > .inkra-virtual-list__separator {
|
|
7673
|
+
inset-block-start: 0;
|
|
7674
|
+
opacity: 1;
|
|
7675
|
+
}
|
|
7676
|
+
}
|
|
7677
|
+
|
|
7678
|
+
.inkra-markdown {
|
|
7679
|
+
color: var(--inkra-ink);
|
|
7680
|
+
font-family: var(--inkra-font-body);
|
|
7681
|
+
font-size: var(--inkra-text-md);
|
|
7682
|
+
line-height: var(--inkra-line-body);
|
|
7683
|
+
max-width: 100%;
|
|
7684
|
+
min-width: 0;
|
|
7685
|
+
overflow-wrap: anywhere;
|
|
7686
|
+
}
|
|
7687
|
+
|
|
7688
|
+
.inkra-markdown > :first-child { margin-block-start: 0; }
|
|
7689
|
+
.inkra-markdown > :last-child { margin-block-end: 0; }
|
|
7690
|
+
|
|
7691
|
+
.inkra-markdown__heading {
|
|
7692
|
+
color: var(--inkra-ink);
|
|
7693
|
+
font-weight: var(--inkra-weight-regular);
|
|
7694
|
+
letter-spacing: 0;
|
|
7695
|
+
line-height: 1.25;
|
|
7696
|
+
margin-block: var(--inkra-space-6) var(--inkra-space-3);
|
|
7697
|
+
}
|
|
7698
|
+
|
|
7699
|
+
.inkra-markdown h1 { font-size: var(--inkra-text-3xl); }
|
|
7700
|
+
.inkra-markdown h2 { font-size: var(--inkra-text-2xl); }
|
|
7701
|
+
.inkra-markdown h3 { font-size: var(--inkra-text-xl); }
|
|
7702
|
+
.inkra-markdown h4 { font-size: var(--inkra-text-lg); }
|
|
7703
|
+
.inkra-markdown h5 { font-size: var(--inkra-text-md); }
|
|
7704
|
+
.inkra-markdown h6 { color: var(--inkra-ink-muted); font-size: var(--inkra-text-sm); }
|
|
7705
|
+
|
|
7706
|
+
.inkra-markdown__paragraph {
|
|
7707
|
+
margin-block: 0 var(--inkra-space-4);
|
|
7708
|
+
}
|
|
7709
|
+
|
|
7710
|
+
.inkra-markdown strong { color: var(--inkra-ink); font-weight: var(--inkra-weight-semibold); }
|
|
7711
|
+
.inkra-markdown em { color: var(--inkra-ink-muted); font-style: italic; }
|
|
7712
|
+
.inkra-markdown del { color: var(--inkra-ink-muted); text-decoration-thickness: 1px; }
|
|
7713
|
+
|
|
7714
|
+
.inkra-markdown__deleted {
|
|
7715
|
+
display: inline-block;
|
|
7716
|
+
max-width: 100%;
|
|
7717
|
+
position: relative;
|
|
7718
|
+
vertical-align: baseline;
|
|
7719
|
+
}
|
|
7720
|
+
.inkra-markdown__deleted[data-pencil-strike-ready="true"] { text-decoration: none; }
|
|
7721
|
+
.inkra-markdown__deleted:not([data-pencil-strike-ready="true"]) .inkra-pencil-text { text-decoration: line-through; }
|
|
7722
|
+
.inkra-markdown__deleted > .inkra-markdown__strike {
|
|
7723
|
+
height: 6px;
|
|
7724
|
+
pointer-events: none;
|
|
7725
|
+
position: absolute;
|
|
7726
|
+
}
|
|
7727
|
+
|
|
7728
|
+
.inkra-markdown__link {
|
|
7729
|
+
color: var(--inkra-accent-strong);
|
|
7730
|
+
display: inline-block;
|
|
7731
|
+
max-width: 100%;
|
|
7732
|
+
position: relative;
|
|
7733
|
+
text-decoration: none;
|
|
7734
|
+
vertical-align: baseline;
|
|
7735
|
+
}
|
|
7736
|
+
|
|
7737
|
+
.inkra-markdown__link > span { max-width: 100%; }
|
|
7738
|
+
.inkra-markdown__link > .inkra-markdown__link-line {
|
|
7739
|
+
bottom: 0;
|
|
7740
|
+
height: 5px;
|
|
7741
|
+
inset-inline: 0;
|
|
7742
|
+
pointer-events: none;
|
|
7743
|
+
position: absolute;
|
|
7744
|
+
width: 100%;
|
|
7745
|
+
}
|
|
7746
|
+
.inkra-markdown__link:focus-visible { outline: 0; }
|
|
7747
|
+
.inkra-pencil-surface.inkra-markdown__link-focus,
|
|
7748
|
+
.inkra-pencil-surface.inkra-markdown__code-focus,
|
|
7749
|
+
.inkra-pencil-surface.inkra-markdown__table-focus {
|
|
7750
|
+
--inkra-accent-strong: var(--inkra-focus);
|
|
7751
|
+
display: block;
|
|
7752
|
+
opacity: 0;
|
|
7753
|
+
pointer-events: none;
|
|
7754
|
+
position: absolute;
|
|
7755
|
+
z-index: 2;
|
|
7756
|
+
}
|
|
7757
|
+
.inkra-pencil-surface.inkra-markdown__link-focus { inset: -2px; }
|
|
7758
|
+
.inkra-markdown__link:focus-visible > .inkra-markdown__link-focus { opacity: 1; }
|
|
7759
|
+
.inkra-markdown__link-text,
|
|
7760
|
+
.inkra-markdown__image-alt { color: var(--inkra-ink-muted); }
|
|
7761
|
+
|
|
7762
|
+
.inkra-markdown__list {
|
|
7763
|
+
margin-block: 0 var(--inkra-space-4);
|
|
7764
|
+
padding-inline-start: 1.65rem;
|
|
7765
|
+
}
|
|
7766
|
+
|
|
7767
|
+
.inkra-markdown__list--unordered,
|
|
7768
|
+
.inkra-markdown__list--ordered { list-style: none; padding-inline-start: 0; }
|
|
7769
|
+
.inkra-markdown__list--ordered { font-variant-numeric: tabular-nums; }
|
|
7770
|
+
|
|
7771
|
+
.inkra-markdown__list-item {
|
|
7772
|
+
margin-block: var(--inkra-space-1);
|
|
7773
|
+
min-width: 0;
|
|
7774
|
+
}
|
|
7775
|
+
|
|
7776
|
+
.inkra-markdown__list--unordered > .inkra-markdown__list-item,
|
|
7777
|
+
.inkra-markdown__list--ordered > .inkra-markdown__list-item {
|
|
7778
|
+
align-items: flex-start;
|
|
7779
|
+
display: grid;
|
|
7780
|
+
gap: var(--inkra-space-2);
|
|
7781
|
+
grid-template-columns: 14px minmax(0, 1fr);
|
|
7782
|
+
}
|
|
7783
|
+
|
|
7784
|
+
.inkra-markdown__list--ordered > .inkra-markdown__list-item { grid-template-columns: var(--inkra-markdown-ordered-marker-width, 1.75rem) minmax(0, 1fr); }
|
|
7785
|
+
.inkra-markdown__list--unordered > .task-list-item { grid-template-columns: minmax(0, 1fr); }
|
|
7786
|
+
.inkra-markdown__bullet { color: var(--inkra-accent-strong); margin-block-start: 0.42em; }
|
|
7787
|
+
.inkra-markdown__ordered-marker {
|
|
7788
|
+
align-self: start;
|
|
7789
|
+
color: var(--inkra-accent-strong);
|
|
7790
|
+
justify-self: end;
|
|
7791
|
+
line-height: var(--inkra-line-body);
|
|
7792
|
+
max-width: none;
|
|
7793
|
+
text-align: end;
|
|
7794
|
+
white-space: nowrap;
|
|
7795
|
+
width: 100%;
|
|
7796
|
+
}
|
|
7797
|
+
.inkra-markdown__list-content { grid-column: 2; min-width: 0; }
|
|
7798
|
+
.inkra-markdown__list--unordered > .task-list-item > .inkra-markdown__list-content { grid-column: 1; }
|
|
7799
|
+
.inkra-markdown__list-content > :last-child { margin-block-end: 0; }
|
|
7800
|
+
.inkra-markdown .contains-task-list { list-style: none; padding-inline-start: 0; }
|
|
7801
|
+
.inkra-markdown__list--unordered > .task-list-item { list-style: none; }
|
|
7802
|
+
.inkra-markdown__task-row {
|
|
7803
|
+
align-items: start;
|
|
7804
|
+
display: grid;
|
|
7805
|
+
gap: var(--inkra-space-2);
|
|
7806
|
+
grid-template-columns: 18px minmax(0, 1fr);
|
|
7807
|
+
}
|
|
7808
|
+
.inkra-markdown__task-content { min-width: 0; }
|
|
7809
|
+
.inkra-markdown__task-content > :last-child { margin-block-end: 0; }
|
|
7810
|
+
|
|
7811
|
+
.inkra-selection-control.inkra-markdown__task-checkbox {
|
|
7812
|
+
align-items: center;
|
|
7813
|
+
cursor: default;
|
|
7814
|
+
display: inline-grid;
|
|
7815
|
+
gap: 0;
|
|
7816
|
+
grid-template-columns: 18px;
|
|
7817
|
+
inline-size: 18px;
|
|
7818
|
+
margin-block-start: 0.18em;
|
|
7819
|
+
margin-inline-end: 0;
|
|
7820
|
+
min-height: 0;
|
|
7821
|
+
opacity: 1;
|
|
7822
|
+
vertical-align: -0.18em;
|
|
7823
|
+
}
|
|
7824
|
+
.inkra-markdown__task-checkbox > .inkra-selection-control__copy { display: none; }
|
|
7825
|
+
.inkra-markdown__task-checkbox > .inkra-selection-control__mark {
|
|
7826
|
+
align-items: center;
|
|
7827
|
+
block-size: 18px;
|
|
7828
|
+
display: inline-flex;
|
|
7829
|
+
inline-size: 18px;
|
|
7830
|
+
justify-content: center;
|
|
7831
|
+
}
|
|
7832
|
+
|
|
7833
|
+
.inkra-markdown__quote {
|
|
7834
|
+
color: var(--inkra-ink-muted);
|
|
7835
|
+
display: grid;
|
|
7836
|
+
gap: var(--inkra-space-3);
|
|
7837
|
+
grid-template-columns: 8px minmax(0, 1fr);
|
|
7838
|
+
margin: 0 0 var(--inkra-space-4);
|
|
7839
|
+
padding: var(--inkra-space-2) 0;
|
|
7840
|
+
}
|
|
7841
|
+
|
|
7842
|
+
.inkra-markdown__quote-line { min-height: 100%; }
|
|
7843
|
+
.inkra-markdown__quote :last-child { margin-block-end: 0; }
|
|
7844
|
+
|
|
7845
|
+
.inkra-markdown__divider { margin-block: var(--inkra-space-6); }
|
|
7846
|
+
|
|
7847
|
+
.inkra-markdown :not(pre) > .inkra-markdown__code {
|
|
7848
|
+
background: transparent;
|
|
7849
|
+
border-radius: var(--inkra-radius-sm);
|
|
7850
|
+
color: var(--inkra-selection-foreground);
|
|
7851
|
+
display: inline-block;
|
|
7852
|
+
font-family: var(--inkra-font-mono);
|
|
7853
|
+
font-size: 0.9em;
|
|
7854
|
+
isolation: isolate;
|
|
7855
|
+
max-width: 100%;
|
|
7856
|
+
padding: 0.12em 0.4em;
|
|
6533
7857
|
position: relative;
|
|
7858
|
+
vertical-align: baseline;
|
|
6534
7859
|
}
|
|
6535
7860
|
|
|
6536
|
-
.inkra-
|
|
6537
|
-
|
|
7861
|
+
.inkra-markdown__code > .inkra-pencil-surface.inkra-markdown__code-wash {
|
|
7862
|
+
--inkra-accent: var(--inkra-selection-pigment);
|
|
7863
|
+
border-radius: 3px;
|
|
7864
|
+
display: block;
|
|
6538
7865
|
inset: 0;
|
|
6539
|
-
|
|
7866
|
+
overflow: hidden;
|
|
6540
7867
|
pointer-events: none;
|
|
7868
|
+
position: absolute;
|
|
7869
|
+
z-index: -1;
|
|
6541
7870
|
}
|
|
7871
|
+
.inkra-markdown__code-wash[data-pencil-fallback="true"] { background: var(--inkra-selection); }
|
|
6542
7872
|
|
|
6543
|
-
.inkra-
|
|
6544
|
-
|
|
7873
|
+
.inkra-markdown__code-text {
|
|
7874
|
+
--inkra-letter-fill: 0.24;
|
|
7875
|
+
--inkra-letter-grain: 0.34;
|
|
7876
|
+
--inkra-letter-outline: 0.84;
|
|
7877
|
+
font-family: inherit;
|
|
6545
7878
|
}
|
|
6546
7879
|
|
|
6547
|
-
.inkra-
|
|
6548
|
-
|
|
6549
|
-
|
|
6550
|
-
|
|
6551
|
-
|
|
6552
|
-
|
|
6553
|
-
overflow: auto;
|
|
6554
|
-
overscroll-behavior: contain;
|
|
7880
|
+
.inkra-markdown__code-text > .inkra-pencil-text__source { font-family: inherit; }
|
|
7881
|
+
|
|
7882
|
+
.inkra-markdown__code-frame {
|
|
7883
|
+
margin-block: 0 var(--inkra-space-4);
|
|
7884
|
+
max-width: 100%;
|
|
7885
|
+
min-width: 0;
|
|
6555
7886
|
position: relative;
|
|
6556
|
-
scrollbar-gutter: stable;
|
|
6557
7887
|
}
|
|
6558
7888
|
|
|
6559
|
-
.inkra-
|
|
6560
|
-
|
|
6561
|
-
min-block-size: 0;
|
|
6562
|
-
overflow: visible;
|
|
6563
|
-
scrollbar-gutter: auto;
|
|
7889
|
+
.inkra-markdown__code-frame > .inkra-markdown__code-header {
|
|
7890
|
+
padding: var(--inkra-space-2) var(--inkra-space-4);
|
|
6564
7891
|
}
|
|
6565
|
-
|
|
6566
|
-
|
|
6567
|
-
|
|
7892
|
+
.inkra-markdown__code-language {
|
|
7893
|
+
align-items: center;
|
|
7894
|
+
display: flex;
|
|
7895
|
+
gap: var(--inkra-space-2);
|
|
7896
|
+
font-size: var(--inkra-text-sm);
|
|
7897
|
+
min-width: 0;
|
|
7898
|
+
}
|
|
7899
|
+
.inkra-markdown__code-language > .inkra-pencil-icon { flex: none; }
|
|
7900
|
+
.inkra-markdown__code-status {
|
|
7901
|
+
clip-path: inset(50%);
|
|
7902
|
+
height: 1px;
|
|
7903
|
+
overflow: hidden;
|
|
7904
|
+
position: absolute;
|
|
7905
|
+
white-space: nowrap;
|
|
7906
|
+
width: 1px;
|
|
6568
7907
|
}
|
|
6569
7908
|
|
|
6570
|
-
.inkra-
|
|
6571
|
-
|
|
6572
|
-
|
|
7909
|
+
.inkra-markdown__code-surface {
|
|
7910
|
+
background: transparent;
|
|
7911
|
+
color: var(--inkra-ink);
|
|
7912
|
+
font-family: "Trip Map Hand", var(--inkra-font-hand);
|
|
7913
|
+
font-size: var(--inkra-text-md);
|
|
7914
|
+
font-weight: var(--inkra-weight-regular);
|
|
7915
|
+
line-height: 1.8;
|
|
6573
7916
|
margin: 0;
|
|
6574
|
-
|
|
6575
|
-
|
|
6576
|
-
|
|
7917
|
+
max-width: 100%;
|
|
7918
|
+
min-width: 0;
|
|
7919
|
+
overflow-x: auto;
|
|
7920
|
+
overflow-wrap: normal;
|
|
7921
|
+
overscroll-behavior-inline: contain;
|
|
7922
|
+
padding: var(--inkra-space-4);
|
|
7923
|
+
tab-size: 2;
|
|
7924
|
+
white-space: pre;
|
|
6577
7925
|
}
|
|
6578
7926
|
|
|
6579
|
-
.inkra-
|
|
6580
|
-
|
|
6581
|
-
inset-inline-start: 0;
|
|
6582
|
-
position: absolute;
|
|
7927
|
+
.inkra-markdown__code-surface:focus-visible {
|
|
7928
|
+
outline: 0;
|
|
6583
7929
|
}
|
|
7930
|
+
.inkra-markdown__code-focus { inset: 0; }
|
|
7931
|
+
.inkra-markdown__code-surface:focus-visible + .inkra-markdown__code-focus { opacity: 1; }
|
|
6584
7932
|
|
|
6585
|
-
.inkra-
|
|
6586
|
-
|
|
6587
|
-
|
|
6588
|
-
|
|
6589
|
-
|
|
6590
|
-
|
|
6591
|
-
|
|
7933
|
+
.inkra-markdown__code-surface > .inkra-markdown__code {
|
|
7934
|
+
color: var(--inkra-ink);
|
|
7935
|
+
font: inherit;
|
|
7936
|
+
overflow-wrap: normal;
|
|
7937
|
+
white-space: pre;
|
|
7938
|
+
}
|
|
7939
|
+
|
|
7940
|
+
.inkra-markdown__code-surface .inkra-pencil-text,
|
|
7941
|
+
.inkra-markdown__code-surface .inkra-pencil-text__source {
|
|
7942
|
+
max-width: none;
|
|
7943
|
+
overflow-wrap: normal;
|
|
7944
|
+
white-space: pre;
|
|
7945
|
+
}
|
|
7946
|
+
|
|
7947
|
+
.inkra-markdown__code-surface .token-comment,
|
|
7948
|
+
.inkra-markdown__code-surface .token-prolog { color: var(--inkra-ink-muted); }
|
|
7949
|
+
.inkra-markdown__code-surface .token-keyword,
|
|
7950
|
+
.inkra-markdown__code-surface .token-tag { color: var(--inkra-danger); }
|
|
7951
|
+
.inkra-markdown__code-surface .token-function,
|
|
7952
|
+
.inkra-markdown__code-surface .token-class-name,
|
|
7953
|
+
.inkra-markdown__code-surface .token-attr-name,
|
|
7954
|
+
.inkra-markdown__code-surface .token-property { color: var(--inkra-info-foreground); }
|
|
7955
|
+
.inkra-markdown__code-surface .token-string,
|
|
7956
|
+
.inkra-markdown__code-surface .token-attr-value { color: var(--inkra-success-foreground); }
|
|
7957
|
+
.inkra-markdown__code-surface .token-number,
|
|
7958
|
+
.inkra-markdown__code-surface .token-boolean { color: var(--inkra-warning-foreground); }
|
|
7959
|
+
.inkra-markdown__code-surface .token-punctuation,
|
|
7960
|
+
.inkra-markdown__code-surface .token-operator { color: var(--inkra-ink); }
|
|
7961
|
+
|
|
7962
|
+
.inkra-markdown__table-frame {
|
|
7963
|
+
margin-block: 0 var(--inkra-space-4);
|
|
7964
|
+
max-width: 100%;
|
|
7965
|
+
min-width: 0;
|
|
6592
7966
|
position: relative;
|
|
6593
|
-
will-change: transform;
|
|
6594
7967
|
}
|
|
6595
7968
|
|
|
6596
|
-
.inkra-
|
|
6597
|
-
|
|
7969
|
+
.inkra-markdown__table {
|
|
7970
|
+
margin: 0;
|
|
7971
|
+
max-width: 100%;
|
|
7972
|
+
overscroll-behavior-inline: contain;
|
|
6598
7973
|
}
|
|
6599
7974
|
|
|
6600
|
-
.inkra-
|
|
6601
|
-
|
|
6602
|
-
|
|
6603
|
-
|
|
6604
|
-
|
|
6605
|
-
|
|
6606
|
-
|
|
6607
|
-
width:
|
|
7975
|
+
.inkra-markdown .inkra-markdown__table:focus-visible { outline: 0; }
|
|
7976
|
+
.inkra-markdown__table-focus { inset: 0; }
|
|
7977
|
+
.inkra-markdown__table:focus-visible + .inkra-markdown__table-focus { opacity: 1; }
|
|
7978
|
+
|
|
7979
|
+
.inkra-markdown__image-frame {
|
|
7980
|
+
display: inline-block;
|
|
7981
|
+
margin-block: var(--inkra-space-2);
|
|
7982
|
+
max-width: 100%;
|
|
7983
|
+
padding: var(--inkra-space-1);
|
|
6608
7984
|
}
|
|
6609
7985
|
|
|
6610
|
-
.inkra-
|
|
6611
|
-
|
|
6612
|
-
|
|
6613
|
-
|
|
6614
|
-
|
|
6615
|
-
|
|
6616
|
-
|
|
7986
|
+
.inkra-markdown__image {
|
|
7987
|
+
display: block;
|
|
7988
|
+
height: auto;
|
|
7989
|
+
max-width: 100%;
|
|
7990
|
+
}
|
|
7991
|
+
|
|
7992
|
+
@media (max-width: 520px) {
|
|
7993
|
+
.inkra-markdown__heading { overflow-wrap: anywhere; }
|
|
7994
|
+
.inkra-markdown__code-surface { padding: var(--inkra-space-3); }
|
|
6617
7995
|
}
|
|
6618
7996
|
|
|
6619
7997
|
@media (forced-colors: active) {
|
|
6620
|
-
.inkra-
|
|
6621
|
-
.inkra-
|
|
7998
|
+
.inkra-markdown__link { text-decoration: underline; }
|
|
7999
|
+
.inkra-markdown__link:focus-visible,
|
|
8000
|
+
.inkra-markdown__code-surface:focus-visible,
|
|
8001
|
+
.inkra-markdown .inkra-markdown__table:focus-visible {
|
|
6622
8002
|
outline: var(--inkra-focus-width) solid Highlight;
|
|
6623
|
-
outline-color: Highlight;
|
|
6624
8003
|
outline-offset: calc(-1 * var(--inkra-focus-width));
|
|
6625
8004
|
}
|
|
6626
|
-
.inkra-
|
|
6627
|
-
|
|
6628
|
-
|
|
6629
|
-
|
|
8005
|
+
.inkra-pencil-surface.inkra-markdown__link-focus,
|
|
8006
|
+
.inkra-pencil-surface.inkra-markdown__code-focus,
|
|
8007
|
+
.inkra-pencil-surface.inkra-markdown__table-focus { display: none !important; }
|
|
8008
|
+
.inkra-markdown__link-line,
|
|
8009
|
+
.inkra-markdown__bullet,
|
|
8010
|
+
.inkra-markdown__ordered-marker { display: none; }
|
|
8011
|
+
.inkra-markdown .inkra-markdown__list--unordered { list-style: disc; padding-inline-start: 1.4rem; }
|
|
8012
|
+
.inkra-markdown .inkra-markdown__list--ordered { list-style: decimal; padding-inline-start: 1.8rem; }
|
|
8013
|
+
.inkra-markdown__list--unordered > .inkra-markdown__list-item,
|
|
8014
|
+
.inkra-markdown__list--ordered > .inkra-markdown__list-item { display: list-item; }
|
|
8015
|
+
.inkra-markdown__list--unordered > .task-list-item { list-style: none; }
|
|
8016
|
+
.inkra-markdown__list-content { grid-column: auto; }
|
|
8017
|
+
.inkra-markdown :not(pre) > .inkra-markdown__code { background: Canvas; border: 1px solid CanvasText; color: CanvasText; }
|
|
8018
|
+
.inkra-markdown__code-surface,
|
|
8019
|
+
.inkra-markdown__code-surface .inkra-pencil-text { color: CanvasText; }
|
|
8020
|
+
.inkra-markdown__task-checkbox > .inkra-selection-control__input { height: 18px; width: 18px; }
|
|
6630
8021
|
}
|
|
6631
8022
|
|
|
6632
8023
|
@media print {
|
|
6633
|
-
.inkra-
|
|
6634
|
-
|
|
6635
|
-
|
|
6636
|
-
}
|
|
6637
|
-
|
|
6638
|
-
.inkra-
|
|
6639
|
-
|
|
8024
|
+
.inkra-markdown__link { color: currentcolor; text-decoration: underline; }
|
|
8025
|
+
.inkra-pencil-surface.inkra-markdown__link-focus,
|
|
8026
|
+
.inkra-pencil-surface.inkra-markdown__code-focus,
|
|
8027
|
+
.inkra-pencil-surface.inkra-markdown__table-focus { display: none !important; }
|
|
8028
|
+
.inkra-markdown__link-line,
|
|
8029
|
+
.inkra-markdown__bullet,
|
|
8030
|
+
.inkra-markdown__ordered-marker { display: none; }
|
|
8031
|
+
.inkra-markdown .inkra-markdown__list--unordered { list-style: disc; padding-inline-start: 1.4rem; }
|
|
8032
|
+
.inkra-markdown .inkra-markdown__list--ordered { list-style: decimal; padding-inline-start: 1.8rem; }
|
|
8033
|
+
.inkra-markdown__list--unordered > .inkra-markdown__list-item,
|
|
8034
|
+
.inkra-markdown__list--ordered > .inkra-markdown__list-item { display: list-item; }
|
|
8035
|
+
.inkra-markdown__list--unordered > .task-list-item { list-style: none; }
|
|
8036
|
+
.inkra-markdown__list-content { grid-column: auto; }
|
|
8037
|
+
.inkra-markdown__code-frame { border: 1px solid currentcolor; }
|
|
8038
|
+
.inkra-markdown__code-header { border-bottom: 1px solid currentcolor; }
|
|
8039
|
+
.inkra-markdown__code-header .inkra-card__action { display: none; }
|
|
8040
|
+
.inkra-markdown__code-surface .inkra-pencil-text { color: currentcolor; }
|
|
8041
|
+
.inkra-markdown__task-checkbox > .inkra-selection-control__input {
|
|
8042
|
+
appearance: auto;
|
|
8043
|
+
height: 18px;
|
|
6640
8044
|
opacity: 1;
|
|
8045
|
+
position: static;
|
|
8046
|
+
width: 18px;
|
|
8047
|
+
z-index: auto;
|
|
6641
8048
|
}
|
|
8049
|
+
.inkra-markdown__task-checkbox > .inkra-selection-control__mark { display: none !important; }
|
|
8050
|
+
}
|
|
8051
|
+
|
|
8052
|
+
@media print, (forced-colors: active) {
|
|
8053
|
+
.inkra-markdown__deleted[data-pencil-strike-ready="true"],
|
|
8054
|
+
.inkra-markdown__deleted .inkra-pencil-text { text-decoration: line-through; }
|
|
8055
|
+
.inkra-markdown__deleted > .inkra-markdown__strike { display: none; }
|
|
6642
8056
|
}
|
|
6643
8057
|
|
|
6644
8058
|
/* required styles */
|
|
@@ -7366,6 +8780,14 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
|
|
7366
8780
|
.inkra-calendar__accessory { top: 46px; inset-inline: 0; margin: auto; max-width: 100%; }
|
|
7367
8781
|
}
|
|
7368
8782
|
|
|
8783
|
+
/* Opt-in summaries remain operable at every width. The legacy responsive
|
|
8784
|
+
clipping must not hide a disclosure or events the user explicitly revealed. */
|
|
8785
|
+
.inkra-calendar__events-toggle { pointer-events: auto; min-width: 0; max-width: 100%; white-space: normal; }
|
|
8786
|
+
.inkra-calendar__events-toggle .inkra-button__label { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
|
|
8787
|
+
.inkra-calendar-scroll[data-event-summary] .inkra-calendar__events { display: grid; }
|
|
8788
|
+
.inkra-calendar-scroll[data-event-summary] .inkra-calendar__event-card:nth-child(n + 3) { display: block; }
|
|
8789
|
+
.inkra-calendar-scroll[data-event-summary] .inkra-calendar__day-card { padding: 44px 5px 8px; }
|
|
8790
|
+
|
|
7369
8791
|
.inkra-agenda { display: flex; flex-direction: column; gap: 12px; min-width: 0; height: 100%; color: var(--inkra-ink); }
|
|
7370
8792
|
.inkra-agenda__heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; flex: none; }
|
|
7371
8793
|
.inkra-agenda__heading h3 { margin: 0; font-size: 20px; font-weight: 400; }
|
|
@@ -7420,23 +8842,47 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
|
|
7420
8842
|
.inkra-toast__theme-anchor { display: none; }
|
|
7421
8843
|
|
|
7422
8844
|
.inkra-toast__viewport {
|
|
8845
|
+
--inkra-toast-enter-x: 0px;
|
|
8846
|
+
--inkra-toast-enter-y: 12px;
|
|
8847
|
+
--inkra-toast-edge: var(--inkra-space-5);
|
|
8848
|
+
--inkra-toast-start: max(var(--inkra-toast-edge), env(safe-area-inset-left));
|
|
8849
|
+
--inkra-toast-end: max(var(--inkra-toast-edge), env(safe-area-inset-right));
|
|
7423
8850
|
display: flex;
|
|
7424
8851
|
flex-direction: column;
|
|
7425
8852
|
gap: var(--inkra-space-3);
|
|
7426
|
-
inset-block: auto var(--inkra-
|
|
7427
|
-
inset-inline: auto var(--inkra-
|
|
8853
|
+
inset-block: auto max(var(--inkra-toast-edge), env(safe-area-inset-bottom));
|
|
8854
|
+
inset-inline: auto var(--inkra-toast-end);
|
|
7428
8855
|
margin: 0;
|
|
7429
8856
|
max-height: calc(100dvh - var(--inkra-space-10));
|
|
7430
8857
|
max-width: calc(100vw - var(--inkra-space-10));
|
|
7431
8858
|
outline: 0;
|
|
7432
|
-
padding:
|
|
8859
|
+
padding: 4px;
|
|
8860
|
+
box-sizing: border-box;
|
|
8861
|
+
pointer-events: none;
|
|
8862
|
+
overflow: auto;
|
|
7433
8863
|
position: fixed;
|
|
7434
|
-
width: min(24rem, calc(100vw - var(--inkra-
|
|
8864
|
+
width: min(24rem, calc(100vw - 2 * var(--inkra-toast-edge)));
|
|
7435
8865
|
z-index: calc(var(--inkra-z-toast, 50) + var(--inkra-floating-layer-offset, 0));
|
|
7436
8866
|
}
|
|
7437
8867
|
|
|
7438
|
-
.inkra-toast__viewport[data-placement^="top"] { inset-block: var(--inkra-
|
|
7439
|
-
.inkra-toast__viewport[data-placement
|
|
8868
|
+
.inkra-toast__viewport[data-placement^="top"] { inset-block: max(var(--inkra-toast-edge), env(safe-area-inset-top)) auto; --inkra-toast-enter-y: -12px; }
|
|
8869
|
+
.inkra-toast__viewport[data-placement^="bottom"] { flex-direction: column-reverse; }
|
|
8870
|
+
.inkra-toast__viewport:dir(rtl) { --inkra-toast-start: max(var(--inkra-toast-edge), env(safe-area-inset-right)); --inkra-toast-end: max(var(--inkra-toast-edge), env(safe-area-inset-left)); }
|
|
8871
|
+
.inkra-toast__viewport[data-placement$="start"] { inset-inline: var(--inkra-toast-start) auto; align-items: flex-start; }
|
|
8872
|
+
.inkra-toast__viewport[data-placement$="end"] { align-items: flex-end; }
|
|
8873
|
+
.inkra-toast__viewport:is([data-placement="top-center"], [data-placement="bottom-center"], [data-placement="center"]) {
|
|
8874
|
+
inset-inline: auto;
|
|
8875
|
+
left: 50%;
|
|
8876
|
+
right: auto;
|
|
8877
|
+
transform: translateX(-50%);
|
|
8878
|
+
align-items: center;
|
|
8879
|
+
}
|
|
8880
|
+
.inkra-toast__viewport[data-placement^="center"] { top: 50%; bottom: auto; transform: translateY(-50%); --inkra-toast-enter-y: 0px; }
|
|
8881
|
+
.inkra-toast__viewport[data-placement="center"] { transform: translate(-50%, -50%); --inkra-toast-enter-y: 8px; }
|
|
8882
|
+
.inkra-toast__viewport[data-placement="center-start"] { --inkra-toast-enter-x: -12px; }
|
|
8883
|
+
.inkra-toast__viewport[data-placement="center-end"] { --inkra-toast-enter-x: 12px; }
|
|
8884
|
+
.inkra-toast__viewport:dir(rtl)[data-placement="center-start"] { --inkra-toast-enter-x: 12px; }
|
|
8885
|
+
.inkra-toast__viewport:dir(rtl)[data-placement="center-end"] { --inkra-toast-enter-x: -12px; }
|
|
7440
8886
|
|
|
7441
8887
|
.inkra-toast__root {
|
|
7442
8888
|
--inkra-toast-translate-x: var(--toast-swipe-movement-x, 0px);
|
|
@@ -7445,6 +8891,9 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
|
|
7445
8891
|
color: var(--inkra-toast-foreground, var(--inkra-ink));
|
|
7446
8892
|
max-width: 100%;
|
|
7447
8893
|
min-width: 0;
|
|
8894
|
+
flex: 0 0 auto;
|
|
8895
|
+
width: 100%;
|
|
8896
|
+
pointer-events: auto;
|
|
7448
8897
|
position: relative;
|
|
7449
8898
|
transform: translate(var(--inkra-toast-translate-x), var(--inkra-toast-translate-y));
|
|
7450
8899
|
transition: opacity var(--inkra-motion-normal) var(--inkra-ease), transform var(--inkra-motion-normal) var(--inkra-ease);
|
|
@@ -7454,7 +8903,12 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
|
|
7454
8903
|
.inkra-toast__root[data-ending-style],
|
|
7455
8904
|
.inkra-toast__root[data-limited] { opacity: 0; }
|
|
7456
8905
|
|
|
7457
|
-
.inkra-toast__root[data-
|
|
8906
|
+
.inkra-toast__root[data-limited] { position: absolute; visibility: hidden; pointer-events: none; }
|
|
8907
|
+
.inkra-toast__root:focus-visible { outline: 0; }
|
|
8908
|
+
.inkra-toast__focus.inkra-pencil-surface { --inkra-accent-strong: var(--inkra-focus); display: none; position: absolute; inset: -3px; pointer-events: none; z-index: 2; }
|
|
8909
|
+
.inkra-toast__root:focus-visible > .inkra-toast__focus { display: block; }
|
|
8910
|
+
.inkra-toast__root[data-starting-style],
|
|
8911
|
+
.inkra-toast__root[data-ending-style] { transform: translate(var(--inkra-toast-enter-x), var(--inkra-toast-enter-y)); }
|
|
7458
8912
|
.inkra-toast__root[data-ending-style][data-swipe-direction="left"] { transform: translateX(-110%); }
|
|
7459
8913
|
.inkra-toast__root[data-ending-style][data-swipe-direction="right"] { transform: translateX(110%); }
|
|
7460
8914
|
.inkra-toast__root[data-ending-style][data-swipe-direction="up"] { transform: translateY(-110%); }
|
|
@@ -7486,10 +8940,21 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
|
|
7486
8940
|
position: absolute;
|
|
7487
8941
|
z-index: 0;
|
|
7488
8942
|
}
|
|
8943
|
+
.inkra-toast__wash { inset: 0; position: absolute; z-index: 0; --inkra-selection-pigment: var(--inkra-accent-soft); }
|
|
8944
|
+
.inkra-toast__root[data-tone="neutral"] .inkra-toast__wash { --inkra-selection-pigment: var(--inkra-ink-muted); opacity: .5; }
|
|
8945
|
+
|
|
8946
|
+
.inkra-toast__root[data-variant="compact"] { width: fit-content; border-radius: var(--inkra-radius-md); }
|
|
8947
|
+
.inkra-toast__root[data-variant="compact"] .inkra-toast__surface { border-radius: inherit; overflow: hidden; }
|
|
8948
|
+
.inkra-toast__root[data-variant="compact"] .inkra-toast__surface[data-pencil-fallback="true"] { border: 0; }
|
|
8949
|
+
.inkra-toast__root[data-variant="compact"] .inkra-toast__content { align-items: center; padding: var(--inkra-space-1) var(--inkra-space-3); gap: var(--inkra-space-2); }
|
|
8950
|
+
.inkra-toast__root[data-variant="compact"] .inkra-toast__title { font-size: var(--inkra-text-md); }
|
|
8951
|
+
.inkra-toast__root[data-variant="compact"] .inkra-toast__copy { gap: 2px; flex-basis: 0; }
|
|
8952
|
+
.inkra-toast__root[data-variant="card"] .inkra-toast__copy { flex-basis: 120px; }
|
|
7489
8953
|
|
|
7490
8954
|
.inkra-toast__content {
|
|
7491
8955
|
align-items: flex-start;
|
|
7492
8956
|
display: flex;
|
|
8957
|
+
flex-wrap: wrap;
|
|
7493
8958
|
gap: var(--inkra-space-3);
|
|
7494
8959
|
justify-content: space-between;
|
|
7495
8960
|
min-height: var(--inkra-control-md);
|
|
@@ -7503,26 +8968,35 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
|
|
7503
8968
|
.inkra-toast__title { font-size: var(--inkra-text-lg); line-height: var(--inkra-line-ui); margin: 0; overflow-wrap: anywhere; }
|
|
7504
8969
|
.inkra-toast__description { color: var(--inkra-toast-foreground, var(--inkra-ink-muted)); font-size: var(--inkra-text-sm); line-height: var(--inkra-line-body); margin: 0; overflow-wrap: anywhere; }
|
|
7505
8970
|
.inkra-toast__actions { align-items: center; display: flex; flex: none; gap: var(--inkra-space-1); }
|
|
8971
|
+
.inkra-toast__actions { max-width: 100%; flex-wrap: wrap; margin-inline-start: auto; }
|
|
8972
|
+
.inkra-toast__action { max-width: 100%; }
|
|
8973
|
+
.inkra-toast__action .inkra-button__surface { height: auto; min-height: var(--inkra-button-visual-height); max-width: 100%; padding-block: var(--inkra-space-2); }
|
|
8974
|
+
.inkra-toast__action > .inkra-button__focus-ring { height: calc(100% + 2 * var(--inkra-focus-offset)); }
|
|
8975
|
+
.inkra-toast__action .inkra-button__label,
|
|
8976
|
+
.inkra-toast__action .inkra-pencil-text,
|
|
8977
|
+
.inkra-toast__action .inkra-pencil-text__source { min-inline-size: 0; white-space: normal; overflow-wrap: anywhere; }
|
|
7506
8978
|
.inkra-toast__action,
|
|
7507
8979
|
.inkra-toast__close { position: relative; z-index: 1; }
|
|
7508
8980
|
|
|
7509
8981
|
@media (max-width: 30rem) {
|
|
7510
8982
|
.inkra-toast__viewport {
|
|
7511
|
-
|
|
7512
|
-
max-width:
|
|
7513
|
-
width: auto;
|
|
8983
|
+
--inkra-toast-edge: var(--inkra-space-3);
|
|
8984
|
+
max-width: calc(100vw - 2 * var(--inkra-toast-edge));
|
|
7514
8985
|
}
|
|
7515
|
-
.inkra-toast__content {
|
|
8986
|
+
.inkra-toast__content { flex-wrap: wrap; }
|
|
8987
|
+
.inkra-toast__copy { flex-basis: 120px; }
|
|
7516
8988
|
.inkra-toast__actions { justify-content: flex-end; }
|
|
7517
8989
|
}
|
|
7518
8990
|
|
|
7519
8991
|
@media (prefers-reduced-motion: reduce) {
|
|
7520
8992
|
.inkra-toast__root { transition: none; }
|
|
8993
|
+
.inkra-toast__root[data-starting-style], .inkra-toast__root[data-ending-style] { transform: none; }
|
|
7521
8994
|
}
|
|
7522
8995
|
|
|
7523
8996
|
@media (forced-colors: active) {
|
|
7524
|
-
.inkra-toast__surface { display: none; }
|
|
8997
|
+
.inkra-toast__surface, .inkra-toast__wash, .inkra-toast__focus.inkra-pencil-surface { display: none !important; }
|
|
7525
8998
|
.inkra-toast__root { border: 1px solid CanvasText; background: Canvas; color: CanvasText; forced-color-adjust: none; }
|
|
8999
|
+
.inkra-toast__root:focus-visible { outline: var(--inkra-focus-width) solid Highlight; outline-offset: 0; }
|
|
7526
9000
|
.inkra-toast__description { color: CanvasText; }
|
|
7527
9001
|
}
|
|
7528
9002
|
|
|
@@ -7533,6 +9007,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
|
|
7533
9007
|
color: var(--inkra-ink);
|
|
7534
9008
|
display: grid;
|
|
7535
9009
|
gap: var(--inkra-space-2);
|
|
9010
|
+
grid-template-columns: minmax(0, 1fr);
|
|
7536
9011
|
justify-items: var(--inkra-empty-align, center);
|
|
7537
9012
|
min-width: 0;
|
|
7538
9013
|
padding: var(--inkra-empty-padding, var(--inkra-space-6));
|
|
@@ -7555,8 +9030,47 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
|
|
7555
9030
|
min-height: 2rem;
|
|
7556
9031
|
min-width: 2rem;
|
|
7557
9032
|
}
|
|
7558
|
-
.inkra-empty[data-size="sm"] .inkra-empty__icon { min-height: 1.5rem; min-width: 1.5rem; }
|
|
7559
|
-
.inkra-empty[data-size="lg"] .inkra-empty__icon { min-height: 2.5rem; min-width: 2.5rem; }
|
|
9033
|
+
.inkra-empty[data-size="sm"] .inkra-empty__icon:not([data-illustration]) { min-height: 1.5rem; min-width: 1.5rem; }
|
|
9034
|
+
.inkra-empty[data-size="lg"] .inkra-empty__icon:not([data-illustration]) { min-height: 2.5rem; min-width: 2.5rem; }
|
|
9035
|
+
|
|
9036
|
+
.inkra-empty { --inkra-empty-illustration-size: 160px; }
|
|
9037
|
+
.inkra-empty[data-size="sm"] { --inkra-empty-illustration-size: 112px; }
|
|
9038
|
+
.inkra-empty[data-size="lg"] { --inkra-empty-illustration-size: 192px; }
|
|
9039
|
+
.inkra-empty__icon[data-illustration] {
|
|
9040
|
+
width: var(--inkra-empty-icon-size, var(--inkra-empty-illustration-size, 160px));
|
|
9041
|
+
max-width: 100%;
|
|
9042
|
+
min-width: 0;
|
|
9043
|
+
min-height: 0;
|
|
9044
|
+
}
|
|
9045
|
+
.inkra-empty__illustration {
|
|
9046
|
+
aspect-ratio: 1;
|
|
9047
|
+
display: block;
|
|
9048
|
+
flex: 1;
|
|
9049
|
+
min-width: 0;
|
|
9050
|
+
pointer-events: none;
|
|
9051
|
+
position: relative;
|
|
9052
|
+
}
|
|
9053
|
+
.inkra-empty__illustration-layer,
|
|
9054
|
+
.inkra-empty__illustration-fallback {
|
|
9055
|
+
position: absolute;
|
|
9056
|
+
inset: 0;
|
|
9057
|
+
width: 100%;
|
|
9058
|
+
height: 100%;
|
|
9059
|
+
}
|
|
9060
|
+
.inkra-empty__illustration-layer--accent { color: var(--inkra-accent); }
|
|
9061
|
+
.inkra-empty__illustration-layer > .inkra-pencil-icon {
|
|
9062
|
+
width: 100% !important;
|
|
9063
|
+
height: 100% !important;
|
|
9064
|
+
}
|
|
9065
|
+
.inkra-empty__illustration-layer > [data-pencil-icon-ready] + svg { display: none; }
|
|
9066
|
+
.inkra-empty__illustration-layer > canvas:not([data-pencil-icon-ready]) { visibility: hidden; }
|
|
9067
|
+
@media (forced-colors: active), print {
|
|
9068
|
+
.inkra-empty__illustration-layer > .inkra-pencil-icon { display: none; }
|
|
9069
|
+
.inkra-empty__illustration-layer > [data-pencil-icon-ready] + svg { display: block; }
|
|
9070
|
+
}
|
|
9071
|
+
@media (forced-colors: active) {
|
|
9072
|
+
.inkra-empty__illustration-layer--accent { color: CanvasText; }
|
|
9073
|
+
}
|
|
7560
9074
|
|
|
7561
9075
|
.inkra-empty__title {
|
|
7562
9076
|
font-size: var(--inkra-text-xl);
|
|
@@ -7718,7 +9232,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
|
|
7718
9232
|
.inkra-alert-dialog__content {
|
|
7719
9233
|
animation: inkra-alert-dialog-content-in var(--inkra-motion-normal) var(--inkra-ease);
|
|
7720
9234
|
inset-block-start: 50%;
|
|
7721
|
-
|
|
9235
|
+
left: 50%;
|
|
7722
9236
|
max-height: min(80vh, calc(100dvh - var(--inkra-space-8)));
|
|
7723
9237
|
outline: 0;
|
|
7724
9238
|
position: fixed;
|
|
@@ -7735,9 +9249,17 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
|
|
7735
9249
|
.inkra-alert-dialog__backdrop[data-state],
|
|
7736
9250
|
.inkra-alert-dialog__content[data-state] { animation-fill-mode: both; }
|
|
7737
9251
|
|
|
7738
|
-
.inkra-alert-
|
|
7739
|
-
|
|
7740
|
-
|
|
9252
|
+
.inkra-alert-dialog__focus-ring {
|
|
9253
|
+
--inkra-accent-strong: var(--inkra-focus);
|
|
9254
|
+
inset: var(--inkra-focus-width);
|
|
9255
|
+
opacity: 0;
|
|
9256
|
+
pointer-events: none;
|
|
9257
|
+
position: absolute !important;
|
|
9258
|
+
z-index: 2;
|
|
9259
|
+
}
|
|
9260
|
+
|
|
9261
|
+
.inkra-alert-dialog__content:focus > .inkra-alert-dialog__focus-ring {
|
|
9262
|
+
opacity: 1;
|
|
7741
9263
|
}
|
|
7742
9264
|
|
|
7743
9265
|
.inkra-alert-dialog__surface,
|
|
@@ -7749,8 +9271,9 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
|
|
7749
9271
|
width: 100%;
|
|
7750
9272
|
}
|
|
7751
9273
|
|
|
7752
|
-
.inkra-alert-dialog__surface { color: var(--inkra-ink); }
|
|
7753
|
-
.inkra-alert-dialog__layout { overflow:
|
|
9274
|
+
.inkra-alert-dialog__surface { color: var(--inkra-ink); overflow: hidden; }
|
|
9275
|
+
.inkra-alert-dialog__layout { overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
|
|
9276
|
+
.inkra-alert-dialog__layout:has(> .inkra-alert-dialog__body) { overflow: hidden; }
|
|
7754
9277
|
|
|
7755
9278
|
.inkra-alert-dialog__header,
|
|
7756
9279
|
.inkra-alert-dialog__body,
|
|
@@ -7804,7 +9327,6 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
|
|
7804
9327
|
|
|
7805
9328
|
@media (max-width: 30rem) {
|
|
7806
9329
|
.inkra-alert-dialog__content {
|
|
7807
|
-
max-height: calc(100dvh - var(--inkra-space-4));
|
|
7808
9330
|
width: calc(100vw - var(--inkra-space-4));
|
|
7809
9331
|
}
|
|
7810
9332
|
.inkra-alert-dialog__header,
|
|
@@ -7812,6 +9334,10 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
|
|
7812
9334
|
.inkra-alert-dialog__footer { padding: var(--inkra-space-4); }
|
|
7813
9335
|
}
|
|
7814
9336
|
|
|
9337
|
+
@media (max-height: 30rem) {
|
|
9338
|
+
.inkra-alert-dialog__content { max-height: calc(100dvh - var(--inkra-space-4)); }
|
|
9339
|
+
}
|
|
9340
|
+
|
|
7815
9341
|
@media (prefers-reduced-motion: reduce) {
|
|
7816
9342
|
.inkra-alert-dialog__backdrop,
|
|
7817
9343
|
.inkra-alert-dialog__content { animation: none !important; }
|
|
@@ -7825,6 +9351,8 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
|
|
7825
9351
|
@media (forced-colors: active) {
|
|
7826
9352
|
.inkra-alert-dialog__backdrop { background: CanvasText; opacity: .25; }
|
|
7827
9353
|
.inkra-alert-dialog__surface { background: Canvas; border: 1px solid CanvasText; }
|
|
9354
|
+
.inkra-pencil-surface.inkra-alert-dialog__focus-ring { display: none !important; }
|
|
9355
|
+
.inkra-alert-dialog__content:focus { outline: var(--inkra-focus-width) solid Highlight; outline-offset: calc(-1 * var(--inkra-focus-width)); }
|
|
7828
9356
|
.inkra-alert-dialog__header[data-divided] { border-bottom: 1px solid CanvasText; }
|
|
7829
9357
|
.inkra-alert-dialog__footer[data-divided] { border-top: 1px solid CanvasText; }
|
|
7830
9358
|
}
|
|
@@ -7840,13 +9368,26 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
|
|
7840
9368
|
|
|
7841
9369
|
.inkra-drawer__content {
|
|
7842
9370
|
box-sizing: border-box;
|
|
9371
|
+
container-name: inkra-drawer;
|
|
9372
|
+
container-type: inline-size;
|
|
7843
9373
|
max-height: 100dvh;
|
|
7844
9374
|
max-width: 100vw;
|
|
7845
9375
|
outline: 0;
|
|
7846
9376
|
position: fixed;
|
|
7847
9377
|
z-index: calc(var(--inkra-z-modal, 30) + var(--inkra-floating-layer-offset, 0) + 1);
|
|
7848
9378
|
}
|
|
7849
|
-
.inkra-drawer__content:focus-visible { outline:
|
|
9379
|
+
.inkra-drawer__content:focus-visible { outline: 0; }
|
|
9380
|
+
.inkra-drawer__focus-ring {
|
|
9381
|
+
--inkra-accent-strong: var(--inkra-focus);
|
|
9382
|
+
|
|
9383
|
+
display: block !important;
|
|
9384
|
+
inset: var(--inkra-focus-width);
|
|
9385
|
+
opacity: 0;
|
|
9386
|
+
pointer-events: none;
|
|
9387
|
+
position: absolute !important;
|
|
9388
|
+
z-index: 3;
|
|
9389
|
+
}
|
|
9390
|
+
.inkra-drawer__content:focus-visible > .inkra-drawer__focus-ring { opacity: 1; }
|
|
7850
9391
|
.inkra-drawer__content[data-direction="left"],
|
|
7851
9392
|
.inkra-drawer__content[data-direction="right"] { block-size: 100dvh; inset-block: 0; inline-size: min(var(--inkra-drawer-size), 100vw); }
|
|
7852
9393
|
.inkra-drawer__content[data-direction="left"] { animation: inkra-drawer-left-in var(--inkra-motion-slow) var(--inkra-ease); left: 0; }
|
|
@@ -7875,13 +9416,23 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
|
|
7875
9416
|
.inkra-drawer__content[data-direction="bottom"] .inkra-drawer__edge { block-size: 8px; inline-size: 100%; inset-block-start: -4px; inset-inline: 0; }
|
|
7876
9417
|
|
|
7877
9418
|
.inkra-drawer__header,
|
|
7878
|
-
.inkra-
|
|
7879
|
-
.inkra-
|
|
7880
|
-
.inkra-
|
|
7881
|
-
.inkra-
|
|
9419
|
+
.inkra-drawer__body,
|
|
9420
|
+
.inkra-drawer__footer { box-sizing: border-box; gap: var(--inkra-space-3); min-width: 0; padding: var(--inkra-space-5); position: relative; }
|
|
9421
|
+
.inkra-drawer__header,
|
|
9422
|
+
.inkra-drawer__footer { flex: 0 1 auto; min-height: 0; }
|
|
9423
|
+
.inkra-drawer__header {
|
|
9424
|
+
align-items: center;
|
|
9425
|
+
display: flex;
|
|
9426
|
+
max-block-size: 50%;
|
|
9427
|
+
overflow: auto;
|
|
9428
|
+
overscroll-behavior: contain;
|
|
9429
|
+
scrollbar-gutter: stable;
|
|
9430
|
+
}
|
|
9431
|
+
.inkra-drawer__heading { display: grid; flex: 1 1 auto; gap: var(--inkra-space-2); min-width: 0; overflow-wrap: anywhere; }
|
|
9432
|
+
.inkra-drawer__header-actions { align-items: center; display: flex; flex: none; flex-wrap: wrap; gap: var(--inkra-space-2); justify-content: flex-end; max-inline-size: 100%; min-width: 0; overflow: auto; overscroll-behavior: contain; }
|
|
7882
9433
|
.inkra-drawer__close-button { flex: none; }
|
|
7883
|
-
.inkra-drawer__body { flex: 1 1
|
|
7884
|
-
.inkra-drawer__footer { align-items: center; flex-wrap: wrap; justify-content: flex-end; }
|
|
9434
|
+
.inkra-drawer__body { flex: 1 1 0; min-height: 0; min-width: 0; overflow: auto; overscroll-behavior: contain; padding: var(--inkra-space-5); scrollbar-gutter: stable; }
|
|
9435
|
+
.inkra-drawer__footer { align-items: center; display: flex; flex-wrap: wrap; justify-content: flex-end; max-block-size: 40%; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: auto; }
|
|
7885
9436
|
.inkra-drawer__footer[data-align="start"] { justify-content: flex-start; }
|
|
7886
9437
|
.inkra-drawer__footer[data-align="center"] { justify-content: center; }
|
|
7887
9438
|
.inkra-drawer__footer > .inkra-button { max-width: 100%; }
|
|
@@ -7892,6 +9443,11 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
|
|
7892
9443
|
.inkra-drawer__header > .inkra-drawer__divider { bottom: -4px; }
|
|
7893
9444
|
.inkra-drawer__footer > .inkra-drawer__divider { top: -4px; }
|
|
7894
9445
|
|
|
9446
|
+
@container inkra-drawer (max-width: 24rem) {
|
|
9447
|
+
.inkra-drawer__header[data-custom-action] { align-items: stretch; flex-direction: column; }
|
|
9448
|
+
.inkra-drawer__header[data-custom-action] .inkra-drawer__header-actions { align-self: stretch; order: -1; }
|
|
9449
|
+
}
|
|
9450
|
+
|
|
7895
9451
|
@keyframes inkra-drawer-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
|
|
7896
9452
|
@keyframes inkra-drawer-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
|
|
7897
9453
|
@keyframes inkra-drawer-left-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
|
|
@@ -7930,26 +9486,51 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
|
|
7930
9486
|
.inkra-drawer__content[data-direction="bottom"] { border-top: 1px solid CanvasText; }
|
|
7931
9487
|
.inkra-drawer__header[data-divided] { border-bottom: 1px solid CanvasText; }
|
|
7932
9488
|
.inkra-drawer__footer[data-divided] { border-top: 1px solid CanvasText; }
|
|
7933
|
-
.inkra-drawer__edge
|
|
9489
|
+
.inkra-drawer__edge,
|
|
9490
|
+
.inkra-drawer__focus-ring { display: none !important; }
|
|
9491
|
+
.inkra-drawer__content:focus-visible { outline: var(--inkra-focus-width) solid Highlight; outline-offset: calc(-1 * var(--inkra-focus-width)); }
|
|
7934
9492
|
}
|
|
7935
9493
|
|
|
7936
9494
|
.inkra-date-picker {
|
|
9495
|
+
--inkra-date-picker-control-height: var(--inkra-control-md);
|
|
9496
|
+
|
|
7937
9497
|
align-items: center;
|
|
7938
9498
|
display: inline-flex;
|
|
7939
|
-
gap: var(--inkra-space-1);
|
|
7940
9499
|
max-width: 100%;
|
|
9500
|
+
min-height: var(--inkra-touch-target);
|
|
7941
9501
|
min-width: 0;
|
|
7942
9502
|
}
|
|
7943
9503
|
|
|
9504
|
+
.inkra-date-picker[data-size="sm"] {
|
|
9505
|
+
--inkra-date-picker-control-height: var(--inkra-control-sm);
|
|
9506
|
+
}
|
|
9507
|
+
|
|
9508
|
+
.inkra-date-picker[data-size="lg"] {
|
|
9509
|
+
--inkra-date-picker-control-height: var(--inkra-control-lg);
|
|
9510
|
+
}
|
|
9511
|
+
|
|
7944
9512
|
.inkra-date-picker[data-full-width] {
|
|
7945
9513
|
display: flex;
|
|
7946
9514
|
width: 100%;
|
|
7947
9515
|
}
|
|
7948
9516
|
|
|
7949
|
-
.inkra-date-
|
|
9517
|
+
.inkra-button-group.inkra-date-picker__control {
|
|
9518
|
+
align-items: center;
|
|
9519
|
+
block-size: var(--inkra-date-picker-control-height);
|
|
9520
|
+
flex: 1 1 auto;
|
|
9521
|
+
min-width: 0;
|
|
9522
|
+
overflow: visible;
|
|
9523
|
+
}
|
|
9524
|
+
|
|
9525
|
+
.inkra-date-picker__control > .inkra-date-picker__trigger {
|
|
9526
|
+
flex: 1 1 auto;
|
|
7950
9527
|
min-width: 0;
|
|
7951
9528
|
}
|
|
7952
9529
|
|
|
9530
|
+
.inkra-date-picker__control > .inkra-date-picker__clear {
|
|
9531
|
+
flex: 0 0 auto;
|
|
9532
|
+
}
|
|
9533
|
+
|
|
7953
9534
|
.inkra-date-picker__trigger .inkra-button__content {
|
|
7954
9535
|
justify-content: flex-start;
|
|
7955
9536
|
min-width: 0;
|
|
@@ -7972,6 +9553,12 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
|
|
7972
9553
|
visibility: hidden;
|
|
7973
9554
|
}
|
|
7974
9555
|
|
|
9556
|
+
.inkra-date-picker__control .inkra-button-group__divider[data-orientation="vertical"] {
|
|
9557
|
+
block-size: var(--inkra-date-picker-control-height);
|
|
9558
|
+
inset-block-start: 50%;
|
|
9559
|
+
transform: translateY(-50%);
|
|
9560
|
+
}
|
|
9561
|
+
|
|
7975
9562
|
.inkra-date-picker__form-field,
|
|
7976
9563
|
.inkra-date-picker__accessible-value {
|
|
7977
9564
|
block-size: 1px;
|
|
@@ -8013,18 +9600,35 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
|
|
8013
9600
|
}
|
|
8014
9601
|
|
|
8015
9602
|
.inkra-time-picker {
|
|
9603
|
+
--inkra-time-picker-control-height: var(--inkra-control-md);
|
|
9604
|
+
|
|
8016
9605
|
display: flex;
|
|
8017
9606
|
align-items: center;
|
|
8018
9607
|
gap: var(--inkra-space-2);
|
|
8019
9608
|
position: relative;
|
|
9609
|
+
min-height: var(--inkra-touch-target);
|
|
8020
9610
|
min-width: 0;
|
|
8021
9611
|
width: fit-content;
|
|
8022
9612
|
max-width: 100%;
|
|
8023
9613
|
}
|
|
9614
|
+
.inkra-time-picker[data-size="sm"] { --inkra-time-picker-control-height: var(--inkra-control-sm); }
|
|
9615
|
+
.inkra-time-picker[data-size="lg"] { --inkra-time-picker-control-height: var(--inkra-control-lg); }
|
|
8024
9616
|
.inkra-time-picker[data-full-width="true"] { width: 100%; }
|
|
8025
|
-
.inkra-time-
|
|
8026
|
-
|
|
9617
|
+
.inkra-button-group.inkra-time-picker__control {
|
|
9618
|
+
align-items: center;
|
|
9619
|
+
block-size: var(--inkra-time-picker-control-height);
|
|
9620
|
+
flex: 1 1 auto;
|
|
9621
|
+
min-width: 0;
|
|
9622
|
+
overflow: visible;
|
|
9623
|
+
}
|
|
9624
|
+
.inkra-time-picker__control > .inkra-time-picker__trigger { flex: 1 1 auto; min-width: 0; }
|
|
9625
|
+
.inkra-time-picker__control > .inkra-time-picker__clear { flex: 0 0 auto; }
|
|
8027
9626
|
.inkra-time-picker__clear[aria-hidden="true"] { visibility: hidden; }
|
|
9627
|
+
.inkra-time-picker__control .inkra-button-group__divider[data-orientation="vertical"] {
|
|
9628
|
+
block-size: var(--inkra-time-picker-control-height);
|
|
9629
|
+
inset-block-start: 50%;
|
|
9630
|
+
transform: translateY(-50%);
|
|
9631
|
+
}
|
|
8028
9632
|
.inkra-time-picker[data-invalid="true"] { color: var(--inkra-danger); }
|
|
8029
9633
|
.inkra-time-picker__native,
|
|
8030
9634
|
.inkra-time-picker__accessible-value {
|
|
@@ -8065,11 +9669,14 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
|
|
8065
9669
|
.inkra-pagination { min-inline-size: 0; max-inline-size: 100%; color: var(--inkra-ink); }
|
|
8066
9670
|
.inkra-pagination__list { box-sizing: border-box; display: flex; flex-wrap: nowrap; align-items: center; gap: var(--inkra-space-1); max-inline-size: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scroll-padding-inline: 8px; list-style: none; padding: 8px; margin: 0; }
|
|
8067
9671
|
.inkra-pagination__list > li { display: flex; flex: 0 0 auto; }
|
|
8068
|
-
.inkra-
|
|
8069
|
-
.inkra-pagination__page
|
|
9672
|
+
.inkra-pagination__summary { align-items: center; box-sizing: border-box; font-variant-numeric: tabular-nums; justify-content: center; max-inline-size: 100%; min-block-size: var(--inkra-touch-target); min-inline-size: 0; overflow-wrap: anywhere; padding-inline: var(--inkra-space-2); text-align: center; white-space: normal; }
|
|
9673
|
+
.inkra-pagination__page-item { max-inline-size: max(var(--inkra-touch-target), 50%); }
|
|
9674
|
+
.inkra-pagination__page.inkra-button { max-inline-size: 100%; min-inline-size: var(--inkra-touch-target); scroll-margin-inline: 8px; }
|
|
9675
|
+
.inkra-pagination__page .inkra-button__surface { height: auto; min-height: var(--inkra-button-visual-height); padding-block: var(--inkra-space-1); padding-inline: var(--inkra-space-2); }
|
|
8070
9676
|
.inkra-pagination__page .inkra-button__surface { isolation: isolate; }
|
|
9677
|
+
.inkra-pagination__page > .inkra-button__focus-ring { height: auto; inset-block: 0; top: 0; transform: none; }
|
|
8071
9678
|
.inkra-pagination__page .inkra-button__content,
|
|
8072
|
-
.inkra-pagination__page .inkra-button__label { position: static; }
|
|
9679
|
+
.inkra-pagination__page .inkra-button__label { max-inline-size: 100%; min-inline-size: 0; overflow-wrap: anywhere; position: static; white-space: normal; }
|
|
8073
9680
|
.inkra-pagination__selection { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
|
|
8074
9681
|
.inkra-pagination__page[aria-current="page"] { color: var(--inkra-selection-foreground); }
|
|
8075
9682
|
.inkra-pagination__ellipsis { min-inline-size: 24px; min-block-size: var(--inkra-touch-target); align-items: center; justify-content: center; }
|
|
@@ -8077,71 +9684,102 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
|
|
8077
9684
|
.inkra-pagination__sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
|
|
8078
9685
|
@media (forced-colors: active) {
|
|
8079
9686
|
.inkra-pagination__page[aria-current="page"] { color: HighlightText; background: Highlight; outline: 1px solid Highlight; }
|
|
8080
|
-
.inkra-pagination__selection { display: none; }
|
|
9687
|
+
.inkra-pencil-surface.inkra-pagination__selection { display: none !important; }
|
|
8081
9688
|
}
|
|
8082
9689
|
@media (prefers-reduced-motion: reduce) { .inkra-pagination * { transition: none !important; animation: none !important; } }
|
|
8083
9690
|
|
|
8084
9691
|
.inkra-command { inline-size: 100%; min-inline-size: 0; color: var(--inkra-ink); font-family: var(--inkra-font-body); font-size: var(--inkra-text-md); line-height: var(--inkra-line-ui); }
|
|
8085
9692
|
.inkra-command__paper { min-inline-size: 0; }
|
|
8086
9693
|
.inkra-command__input-wrap { position: relative; padding: var(--inkra-space-2) var(--inkra-space-3); }
|
|
8087
|
-
.inkra-command__input {
|
|
9694
|
+
.inkra-command__input-frame { align-items: center; box-sizing: border-box; display: flex; flex: 1 1 auto; inline-size: 100%; min-block-size: var(--inkra-touch-target); min-inline-size: 0; padding-inline: var(--inkra-space-3); position: relative; }
|
|
9695
|
+
.inkra-command__input-icon { align-items: center; color: var(--inkra-ink-muted); display: inline-flex; flex: 0 0 22px; block-size: 22px; inline-size: 22px; }
|
|
9696
|
+
.inkra-command__input { --inkra-editable-placeholder-color: var(--inkra-ink-subtle); --inkra-editable-text-color: var(--inkra-ink); display: block; box-sizing: border-box; flex: 1 1 auto; inline-size: 0; min-inline-size: 0; min-block-size: var(--inkra-touch-target); border: 0; border-radius: 0; background: transparent; caret-color: var(--inkra-ink); color: inherit; font: inherit; padding: 0 var(--inkra-space-2); outline: 0; position: relative; z-index: 2; }
|
|
8088
9697
|
.inkra-command__input::placeholder { color: var(--inkra-ink-subtle); opacity: 1; }
|
|
8089
|
-
.inkra-command__input
|
|
9698
|
+
.inkra-command__input-frame > .inkra-editable-text { display: none; opacity: 0; pointer-events: none; position: absolute; z-index: 3; }
|
|
9699
|
+
.inkra-command__input-wrap[data-pencil-editable-ready="true"] .inkra-editable-text { display: block; opacity: 1; }
|
|
9700
|
+
.inkra-command__input-wrap[data-pencil-editable-ready="true"] .inkra-command__input { color: transparent !important; }
|
|
9701
|
+
.inkra-command__input-wrap[data-pencil-editable-ready="true"] .inkra-command__input::placeholder { color: transparent !important; }
|
|
9702
|
+
.inkra-command__input-wrap[data-pencil-editable-ready="true"] .inkra-command__input::selection { background: var(--inkra-selection); color: transparent; }
|
|
8090
9703
|
.inkra-command__input-line { position: absolute; inset-inline: 12px; inset-block-end: 0; }
|
|
8091
|
-
.inkra-
|
|
9704
|
+
.inkra-command__input-focus-line { color: var(--inkra-focus); opacity: 0; pointer-events: none; position: absolute; inset-inline: 12px; inset-block-end: 0; z-index: 4; }
|
|
9705
|
+
.inkra-command__input-wrap > .inkra-pencil-line[data-orientation="horizontal"] { width: calc(100% - 24px); }
|
|
9706
|
+
.inkra-command__input-wrap:focus-within .inkra-command__input-focus-line { opacity: 1; }
|
|
9707
|
+
.inkra-command__list { box-sizing: border-box; max-block-size: min(360px, 50dvh); overflow: auto; overscroll-behavior: contain; padding: var(--inkra-space-2); scroll-padding-block: var(--inkra-space-2); }
|
|
8092
9708
|
.inkra-command__group[hidden] { display: none; }
|
|
8093
9709
|
.inkra-command__group [cmdk-group-heading] { padding: var(--inkra-space-2) var(--inkra-space-3); color: var(--inkra-ink-muted); font-size: var(--inkra-text-sm); overflow-wrap: anywhere; }
|
|
8094
|
-
.inkra-command__item { position: relative; isolation: isolate; box-sizing: border-box; display: flex; align-items: center; gap: var(--inkra-space-2); min-block-size: var(--inkra-touch-target); padding: var(--inkra-space-2) var(--inkra-space-3); cursor: pointer; border-radius: var(--inkra-radius-md); overflow-wrap: anywhere; }
|
|
9710
|
+
.inkra-command__item { position: relative; isolation: isolate; box-sizing: border-box; display: flex; align-items: center; gap: var(--inkra-space-2); min-block-size: var(--inkra-touch-target); min-inline-size: 0; padding: var(--inkra-space-2) var(--inkra-space-3); cursor: pointer; border-radius: var(--inkra-radius-md); overflow-wrap: anywhere; }
|
|
8095
9711
|
.inkra-command__highlight { position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; }
|
|
9712
|
+
.inkra-command__item-focus { --inkra-accent-strong: var(--inkra-focus); inset: var(--inkra-focus-width); opacity: 0; pointer-events: none; position: absolute !important; z-index: 2; }
|
|
8096
9713
|
.inkra-command__item[data-selected="true"] { color: var(--inkra-selection-foreground); }
|
|
8097
9714
|
.inkra-command__item[data-selected="true"] > .inkra-command__highlight { opacity: 1; }
|
|
8098
9715
|
.inkra-command__item[data-disabled="true"] { color: var(--inkra-ink-subtle); cursor: not-allowed; }
|
|
8099
|
-
.inkra-command__item:focus-visible { outline:
|
|
9716
|
+
.inkra-command__item:focus-visible { outline: 0; }
|
|
9717
|
+
.inkra-command__item:focus-visible > .inkra-command__item-focus { opacity: 1; }
|
|
8100
9718
|
.inkra-command__icon { flex: 0 0 24px; inline-size: 24px; display: inline-flex; align-items: center; justify-content: center; }
|
|
8101
|
-
.inkra-command__label { min-inline-size: 0;
|
|
8102
|
-
.inkra-command__shortcut { flex: 0 1
|
|
9719
|
+
.inkra-command__label { flex: 1 1 auto; min-inline-size: 0; overflow-wrap: anywhere; }
|
|
9720
|
+
.inkra-command__shortcut { flex: 0 1 12rem; min-inline-size: 0; max-inline-size: 45%; margin-inline-start: auto; font: inherit; font-size: var(--inkra-text-sm); color: inherit; text-align: end; overflow-wrap: anywhere; }
|
|
8103
9721
|
.inkra-command__empty { padding: var(--inkra-space-6) var(--inkra-space-3); text-align: center; color: var(--inkra-ink-muted); overflow-wrap: anywhere; }
|
|
8104
9722
|
.inkra-command__separator { padding-block: var(--inkra-space-1); }
|
|
8105
9723
|
@media (forced-colors: active) {
|
|
8106
9724
|
.inkra-command__paper { border: 1px solid CanvasText; }
|
|
8107
|
-
.inkra-command__input {
|
|
8108
|
-
.inkra-
|
|
9725
|
+
.inkra-command__input-focus-line, .inkra-command__item-focus { display: none !important; }
|
|
9726
|
+
.inkra-command__input-frame > .inkra-editable-text { display: none !important; }
|
|
9727
|
+
.inkra-command__input-wrap[data-pencil-editable-ready="true"] .inkra-command__input { color: FieldText !important; caret-color: FieldText; }
|
|
9728
|
+
.inkra-command__input-wrap[data-pencil-editable-ready="true"] .inkra-command__input::placeholder { color: GrayText !important; opacity: 1; }
|
|
9729
|
+
.inkra-command__input-wrap[data-pencil-editable-ready="true"] .inkra-command__input::selection { background: Highlight; color: HighlightText; }
|
|
9730
|
+
.inkra-command__input:focus-visible { outline: var(--inkra-focus-width) solid Highlight; outline-offset: calc(-1 * var(--inkra-focus-width)); }
|
|
9731
|
+
.inkra-command__item[data-selected="true"] { background: Highlight; color: HighlightText; outline: 1px solid Highlight; forced-color-adjust: none; }
|
|
9732
|
+
.inkra-command__item:focus-visible { outline: var(--inkra-focus-width) solid Highlight; outline-offset: calc(-1 * var(--inkra-focus-width)); }
|
|
8109
9733
|
.inkra-command__item[data-disabled="true"] { color: GrayText; }
|
|
8110
9734
|
.inkra-command__highlight { display: none; }
|
|
8111
9735
|
.inkra-command__separator { border-block-end: 1px solid CanvasText; }
|
|
8112
9736
|
}
|
|
8113
9737
|
@media (prefers-reduced-motion: reduce) { .inkra-command * { animation: none !important; transition: none !important; } }
|
|
9738
|
+
@media print {
|
|
9739
|
+
.inkra-command__input-frame > .inkra-editable-text { display: none !important; }
|
|
9740
|
+
.inkra-command__input-wrap[data-pencil-editable-ready="true"] .inkra-command__input { color: var(--inkra-ink) !important; }
|
|
9741
|
+
.inkra-command__input-wrap[data-pencil-editable-ready="true"] .inkra-command__input::placeholder { color: var(--inkra-ink-subtle) !important; opacity: 1; }
|
|
9742
|
+
}
|
|
8114
9743
|
|
|
8115
|
-
.inkra-data-table { display: grid; gap: var(--inkra-space-3); min-width: 0; width: 100%; color: var(--inkra-ink); }
|
|
9744
|
+
.inkra-data-table { container-type: inline-size; display: grid; gap: var(--inkra-space-3); min-width: 0; width: 100%; color: var(--inkra-ink); }
|
|
8116
9745
|
.inkra-data-table__toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--inkra-space-3); }
|
|
8117
9746
|
.inkra-data-table__filter { display: grid; gap: var(--inkra-space-1); width: min(100%, 320px); font-size: var(--inkra-text-sm); color: var(--inkra-ink-muted); }
|
|
8118
9747
|
.inkra-data-table__container { width: 100%; }
|
|
8119
|
-
.inkra-data-table__sort { appearance: none; border: 0; background: transparent; color: inherit; font: inherit; display: inline-flex; align-items: center; gap: var(--inkra-space-2); min-height: var(--inkra-touch-target); max-width: 100%; padding: 0; text-align: start; cursor: pointer; }
|
|
8120
|
-
.inkra-data-table__sort
|
|
8121
|
-
.inkra-data-table__sort
|
|
8122
|
-
.inkra-data-table__sort[data-sorted]
|
|
8123
|
-
.inkra-data-table__sort:focus-visible { outline:
|
|
9748
|
+
.inkra-data-table__sort { appearance: none; border: 0; background: transparent; color: inherit; font: inherit; display: inline-flex; align-items: center; gap: var(--inkra-space-2); min-height: var(--inkra-touch-target); min-width: 0; max-width: 100%; padding: 0 var(--inkra-space-1); position: relative; text-align: start; cursor: pointer; }
|
|
9749
|
+
.inkra-data-table__sort-label { min-width: 0; overflow-wrap: anywhere; position: relative; z-index: 1; }
|
|
9750
|
+
.inkra-data-table__sort-icon { flex: none; opacity: .55; position: relative; z-index: 1; }
|
|
9751
|
+
.inkra-data-table__sort[data-sorted] .inkra-data-table__sort-icon { opacity: 1; color: var(--inkra-accent-strong); }
|
|
9752
|
+
.inkra-data-table__sort:focus-visible { outline: 0; }
|
|
9753
|
+
.inkra-data-table__sort-focus { --inkra-accent-strong: var(--inkra-focus); display: block !important; inset: 1px; opacity: 0; pointer-events: none; position: absolute !important; z-index: 2; }
|
|
9754
|
+
.inkra-data-table__sort:focus-visible > .inkra-data-table__sort-focus { opacity: 1; }
|
|
8124
9755
|
.inkra-data-table__select-cell { width: 52px; padding-inline: var(--inkra-space-2) !important; text-align: center !important; }
|
|
8125
9756
|
.inkra-data-table__selection.inkra-selection-control { display: inline-grid; grid-template-columns: var(--inkra-touch-target); gap: 0; width: var(--inkra-touch-target); min-height: var(--inkra-touch-target); vertical-align: middle; }
|
|
8126
9757
|
.inkra-data-table__selection .inkra-selection-control__copy { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
|
|
8127
9758
|
.inkra-data-table__state { min-height: 72px; display: grid; place-items: center; color: var(--inkra-ink-muted); text-align: center; }
|
|
8128
|
-
.inkra-data-table__pagination { display: flex; align-items: center; justify-content: flex-end; gap: var(--inkra-space-2); min-width: 0; }
|
|
8129
|
-
.inkra-data-table__pagination >
|
|
9759
|
+
.inkra-data-table__pagination { display: flex; align-items: center; justify-content: flex-end; gap: var(--inkra-space-2); min-width: 0; width: 100%; }
|
|
9760
|
+
.inkra-data-table__pagination > .inkra-button { flex: none; }
|
|
9761
|
+
.inkra-data-table__pagination > span { min-width: 8rem; max-width: 100%; text-align: center; color: var(--inkra-ink-muted); overflow-wrap: anywhere; }
|
|
9762
|
+
.inkra-data-table__page-arrow:dir(rtl) { transform: scaleX(-1); }
|
|
8130
9763
|
.inkra-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
|
|
8131
|
-
@
|
|
8132
|
-
.inkra-data-table__pagination { justify-content:
|
|
9764
|
+
@container (max-width: 30rem) {
|
|
9765
|
+
.inkra-data-table__pagination { display: grid; grid-template-columns: var(--inkra-touch-target) minmax(0, 1fr) var(--inkra-touch-target); justify-content: stretch; }
|
|
8133
9766
|
.inkra-data-table__pagination > span { min-width: 0; }
|
|
8134
9767
|
}
|
|
8135
9768
|
@media (forced-colors: active) {
|
|
8136
|
-
.inkra-data-table__sort
|
|
9769
|
+
.inkra-data-table__sort-focus { display: none !important; }
|
|
9770
|
+
.inkra-data-table__sort:focus-visible { outline: var(--inkra-focus-width) solid Highlight; outline-offset: calc(-1 * var(--inkra-focus-width)); }
|
|
9771
|
+
.inkra-data-table__sort[data-sorted] .inkra-data-table__sort-icon { color: Highlight; }
|
|
8137
9772
|
}
|
|
9773
|
+
@media (prefers-reduced-motion: reduce) { .inkra-data-table * { animation: none !important; transition: none !important; } }
|
|
9774
|
+
@media print { .inkra-data-table__sort-focus { display: none !important; } }
|
|
8138
9775
|
|
|
8139
9776
|
.inkra-tree { display: grid; gap: 2px; min-width: 0; color: var(--inkra-ink); outline: none; }
|
|
8140
9777
|
.inkra-tree__item { position: relative; min-width: 0; outline: none; }
|
|
8141
|
-
.inkra-tree__item-content { position: relative; isolation: isolate; display: grid; grid-template-columns: var(--inkra-touch-target) minmax(0, auto) minmax(0, 1fr); align-items:
|
|
9778
|
+
.inkra-tree__item-content { --inkra-tree-reserved-inline: calc(var(--inkra-touch-target) + var(--inkra-space-2) + 5rem); position: relative; isolation: isolate; display: grid; grid-template-columns: var(--inkra-touch-target) minmax(0, auto) minmax(0, 1fr); align-items: start; box-sizing: border-box; inline-size: 100%; min-height: var(--inkra-touch-target); padding-inline-start: min(calc((var(--inkra-tree-level, 1) - 1) * var(--inkra-tree-indent, 24px)), max(0px, calc(100% - var(--inkra-tree-reserved-inline)))); padding-inline-end: var(--inkra-space-2); border-radius: var(--inkra-radius-md); overflow: visible; }
|
|
9779
|
+
.inkra-tree__item-content[data-has-icon] { --inkra-tree-reserved-inline: calc(var(--inkra-touch-target) + 28px + var(--inkra-space-2) + 5rem); }
|
|
8142
9780
|
.inkra-tree__item-content:not([data-has-icon]) { grid-template-columns: var(--inkra-touch-target) minmax(0, 1fr); }
|
|
8143
9781
|
.inkra-tree__selection, .inkra-tree__focus { position: absolute; inset: 2px; z-index: -1; pointer-events: none; }
|
|
8144
|
-
.inkra-tree__focus { inset:
|
|
9782
|
+
.inkra-tree__focus { inset: 1px; z-index: 2; }
|
|
8145
9783
|
.inkra-tree__disclosure, .inkra-tree__disclosure-spacer { width: var(--inkra-touch-target); height: var(--inkra-touch-target); }
|
|
8146
9784
|
.inkra-tree__disclosure { position: relative; appearance: none; display: inline-grid; place-items: center; border: 0; padding: 0; background: transparent; color: var(--inkra-ink); cursor: pointer; }
|
|
8147
9785
|
.inkra-tree__disclosure:focus { outline: none; }
|
|
@@ -8152,9 +9790,12 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
|
|
8152
9790
|
.inkra-tree__item-content[data-expanded] .inkra-tree__chevron { transform: rotate(0deg); }
|
|
8153
9791
|
.inkra-tree:dir(rtl) .inkra-tree__chevron { transform: rotate(90deg); }
|
|
8154
9792
|
.inkra-tree:dir(rtl) .inkra-tree__item-content[data-expanded] .inkra-tree__chevron { transform: rotate(0deg); }
|
|
8155
|
-
.inkra-tree__icon { display: inline-grid; place-items: center; width: 28px; height: 28px; color: var(--inkra-accent-strong); }
|
|
9793
|
+
.inkra-tree__icon { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-block-start: var(--inkra-space-1); color: var(--inkra-accent-strong); }
|
|
8156
9794
|
.inkra-tree__icon > * { max-width: 100%; max-height: 100%; }
|
|
8157
9795
|
.inkra-tree__copy { display: grid; gap: 2px; min-width: 0; padding-block: var(--inkra-space-2); overflow-wrap: anywhere; }
|
|
9796
|
+
.inkra-tree[data-size="sm"] .inkra-tree__copy { padding-block: var(--inkra-space-1); }
|
|
9797
|
+
.inkra-tree[data-size="lg"] .inkra-tree__copy { padding-block: var(--inkra-space-3); }
|
|
9798
|
+
.inkra-tree[data-size="lg"] .inkra-tree__item-content { min-height: 52px; }
|
|
8158
9799
|
.inkra-tree__title { min-width: 0; font-size: var(--inkra-text-md); line-height: var(--inkra-line-ui); }
|
|
8159
9800
|
.inkra-tree__description { min-width: 0; color: var(--inkra-ink-muted); font-size: var(--inkra-text-sm); line-height: var(--inkra-line-body); }
|
|
8160
9801
|
.inkra-tree__item[data-disabled] .inkra-tree__item-content { opacity: .55; }
|
|
@@ -8184,31 +9825,48 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
|
|
8184
9825
|
.inkra-tree__selection { animation: none !important; }
|
|
8185
9826
|
}
|
|
8186
9827
|
@media (forced-colors: active) {
|
|
9828
|
+
.inkra-pencil-surface.inkra-tree__selection,
|
|
9829
|
+
.inkra-pencil-surface.inkra-tree__focus,
|
|
9830
|
+
.inkra-pencil-surface.inkra-tree__disclosure-focus { display: none !important; }
|
|
8187
9831
|
.inkra-tree__item[data-selected] .inkra-tree__item-content { outline: 1px solid Highlight; color: HighlightText; background: Highlight; forced-color-adjust: none; }
|
|
8188
9832
|
.inkra-tree__item[data-focus-visible] .inkra-tree__item-content { outline: 2px solid Highlight; outline-offset: -2px; }
|
|
8189
9833
|
.inkra-tree__disclosure[data-focus-visible] { outline: 2px solid Highlight; outline-offset: -2px; }
|
|
8190
9834
|
}
|
|
8191
9835
|
|
|
8192
|
-
.inkra-upload { display: grid; gap: var(--inkra-space-4); min-width: 0; color: var(--inkra-ink); }
|
|
9836
|
+
.inkra-upload { container-type: inline-size; display: grid; gap: var(--inkra-space-4); min-width: 0; color: var(--inkra-ink); }
|
|
8193
9837
|
.inkra-upload__dropzone {
|
|
8194
|
-
min-height: 148px; padding: var(--inkra-space-6); display: grid; place-items: center; align-content: center;
|
|
9838
|
+
position: relative; min-height: 148px; padding: var(--inkra-space-6); display: grid; place-items: center; align-content: center;
|
|
8195
9839
|
gap: var(--inkra-space-2); text-align: center; cursor: pointer; border-radius: var(--inkra-radius-lg);
|
|
8196
9840
|
}
|
|
8197
|
-
.inkra-
|
|
9841
|
+
.inkra-upload__focus-ring {
|
|
9842
|
+
--inkra-accent-strong: var(--inkra-focus);
|
|
9843
|
+
position: absolute !important; inset: var(--inkra-focus-width); display: block !important;
|
|
9844
|
+
opacity: 0; pointer-events: none; z-index: 3;
|
|
9845
|
+
}
|
|
9846
|
+
.inkra-upload__dropzone:focus-visible { outline: 0; }
|
|
9847
|
+
.inkra-upload__dropzone:focus-visible .inkra-upload__focus-ring { opacity: 1; }
|
|
8198
9848
|
.inkra-upload__dropzone[data-drag-active] { color: var(--inkra-selection-foreground); }
|
|
8199
9849
|
.inkra-upload[data-disabled] .inkra-upload__dropzone { cursor: not-allowed; opacity: 0.55; }
|
|
8200
|
-
.inkra-upload__input { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
|
|
9850
|
+
.inkra-upload__input { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; pointer-events: none; }
|
|
8201
9851
|
.inkra-upload__icon { color: currentColor; }
|
|
8202
9852
|
.inkra-upload__prompt { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--inkra-space-2); font-size: var(--inkra-text-md); }
|
|
8203
9853
|
.inkra-upload__hint, .inkra-upload__meta { color: var(--inkra-ink-muted); font-size: var(--inkra-text-sm); }
|
|
8204
9854
|
.inkra-upload__rejections { color: var(--inkra-danger-foreground); }
|
|
8205
9855
|
.inkra-upload__rejections ul { margin: var(--inkra-space-2) 0 0; padding-inline-start: var(--inkra-space-6); }
|
|
8206
9856
|
.inkra-upload__list { display: grid; gap: var(--inkra-space-3); margin: 0; padding: 0; list-style: none; }
|
|
8207
|
-
.inkra-upload__item-surface { display: flex; align-items: center; justify-content: space-between; gap: var(--inkra-space-4); padding: var(--inkra-space-4); }
|
|
9857
|
+
.inkra-upload__item-surface { display: flex; align-items: center; justify-content: space-between; gap: var(--inkra-space-4); min-width: 0; padding: var(--inkra-space-4); }
|
|
8208
9858
|
.inkra-upload__file { display: grid; min-width: 0; flex: 1; gap: var(--inkra-space-1); }
|
|
8209
|
-
.inkra-upload__name {
|
|
9859
|
+
.inkra-upload__name { max-width: 100%; }
|
|
8210
9860
|
.inkra-upload__error { color: var(--inkra-danger-foreground); font-size: var(--inkra-text-sm); }
|
|
8211
|
-
.inkra-upload__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--inkra-space-1); }
|
|
9861
|
+
.inkra-upload__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--inkra-space-1); max-width: 100%; min-width: 0; }
|
|
9862
|
+
.inkra-upload__actions > .inkra-button { max-width: 100%; }
|
|
9863
|
+
.inkra-upload__actions .inkra-button__surface,
|
|
9864
|
+
.inkra-upload__actions .inkra-button__content { max-width: 100%; min-width: 0; }
|
|
9865
|
+
.inkra-upload__actions .inkra-button__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
|
|
9866
|
+
.inkra-upload__actions .inkra-button__label > .inkra-pencil-text,
|
|
9867
|
+
.inkra-upload__actions .inkra-button__label > .inkra-pencil-text > .inkra-pencil-text__source {
|
|
9868
|
+
display: block; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
9869
|
+
}
|
|
8212
9870
|
.inkra-upload .inkra-progress { inline-size: min(280px, 100%); }
|
|
8213
9871
|
.inkra-upload__item[data-status="success"] .inkra-upload__meta { color: var(--inkra-success-foreground); }
|
|
8214
9872
|
.inkra-upload__item[data-status="error"] .inkra-upload__meta,
|
|
@@ -8216,10 +9874,22 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
|
|
8216
9874
|
@media (max-width: 36rem) {
|
|
8217
9875
|
.inkra-upload__dropzone { padding: var(--inkra-space-4); }
|
|
8218
9876
|
.inkra-upload__item-surface { align-items: stretch; flex-direction: column; }
|
|
8219
|
-
.inkra-upload__actions { justify-content: flex-start; }
|
|
9877
|
+
.inkra-upload__actions { inline-size: 100%; justify-content: flex-start; }
|
|
9878
|
+
}
|
|
9879
|
+
@container (max-width: 36rem) {
|
|
9880
|
+
.inkra-upload__dropzone { padding: var(--inkra-space-4); }
|
|
9881
|
+
.inkra-upload__item-surface { align-items: stretch; flex-direction: column; }
|
|
9882
|
+
.inkra-upload__actions { inline-size: 100%; justify-content: flex-start; }
|
|
9883
|
+
}
|
|
9884
|
+
@container (max-width: 24rem) {
|
|
9885
|
+
.inkra-upload__actions { display: grid; grid-template-columns: minmax(0, 1fr); }
|
|
9886
|
+
.inkra-upload__actions > .inkra-button { inline-size: 100%; }
|
|
9887
|
+
.inkra-upload__actions .inkra-button__surface { inline-size: 100%; }
|
|
8220
9888
|
}
|
|
8221
9889
|
@media (forced-colors: active) {
|
|
8222
9890
|
.inkra-upload__dropzone { border: 1px solid CanvasText; }
|
|
9891
|
+
.inkra-upload__dropzone:focus-visible { outline: 2px solid Highlight; outline-offset: var(--inkra-focus-offset); }
|
|
9892
|
+
.inkra-upload__focus-ring { display: none !important; }
|
|
8223
9893
|
.inkra-upload__dropzone[data-drag-active] { outline: 2px solid Highlight; }
|
|
8224
9894
|
.inkra-upload__error, .inkra-upload__rejections { color: CanvasText; }
|
|
8225
9895
|
}
|