@santi020k/lumen 3.0.1 → 4.0.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 +207 -3
- package/dist/cli.js +49 -5
- package/dist/consumer-upgrade-audit.d.ts +10 -0
- package/dist/consumer-upgrade-audit.d.ts.map +1 -0
- package/dist/consumer-upgrade-audit.js +52 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -0
- package/dist/installer.d.ts.map +1 -1
- package/dist/installer.js +16 -0
- package/dist/integration-diagnostics.d.ts.map +1 -1
- package/dist/integration-diagnostics.js +199 -3
- package/dist/registry-component-name.d.ts +2 -0
- package/dist/registry-component-name.d.ts.map +1 -0
- package/dist/registry-component-name.js +53 -0
- package/dist/registry-data.d.ts +339 -18
- package/dist/registry-data.d.ts.map +1 -1
- package/dist/registry-data.js +789 -3
- package/dist/registry.d.ts.map +1 -1
- package/dist/registry.js +11 -9
- package/dist/source-script-ranges.d.ts +3 -0
- package/dist/source-script-ranges.d.ts.map +1 -0
- package/dist/source-script-ranges.js +41 -0
- package/dist/v2-migration.d.ts +38 -0
- package/dist/v2-migration.d.ts.map +1 -1
- package/dist/v2-migration.js +26 -14
- package/dist/v4-migration.d.ts +26 -0
- package/dist/v4-migration.d.ts.map +1 -0
- package/dist/v4-migration.js +272 -0
- package/dist/version-migration-dependencies.d.ts +8 -0
- package/dist/version-migration-dependencies.d.ts.map +1 -0
- package/dist/version-migration-dependencies.js +10 -0
- package/dist/version-migration-source.d.ts +4 -0
- package/dist/version-migration-source.d.ts.map +1 -0
- package/dist/version-migration-source.js +281 -0
- package/dist/version-migration.d.ts +34 -0
- package/dist/version-migration.d.ts.map +1 -0
- package/dist/version-migration.js +158 -0
- package/native-components.json +563 -16
- package/package.json +26 -11
- package/release-manifest.json +22 -17
- package/styles/critical.css +634 -61
- package/styles/motion.css +61 -0
- package/styles/world-map.css +30 -0
- package/styles.css +1736 -455
- package/templates/astro/advanced-fields/src/lumen/advanced-fields.astro +35 -0
- package/templates/astro/ai-docs/llms.txt +3 -0
- package/templates/astro/analytics-dashboard/src/lumen/analytics-dashboard.astro +110 -0
- package/templates/astro/auth-onboarding/src/lumen/auth-onboarding.astro +107 -0
- package/templates/astro/command-center/src/lumen/command-center.astro +34 -0
- package/templates/astro/commerce-dashboard/src/lumen/commerce-dashboard.astro +108 -0
- package/templates/astro/content-flow-actions/src/lumen/content-flow-actions.astro +10 -0
- package/templates/astro/content-flow-header/src/lumen/content-flow-header.astro +14 -0
- package/templates/astro/content-flow-list/src/lumen/content-flow-list.astro +13 -0
- package/templates/astro/content-flow-settings/src/lumen/content-flow-settings.astro +17 -0
- package/templates/astro/data-collections/src/lumen/data-collections.astro +52 -0
- package/templates/astro/feature-preview/src/lumen/feature-preview.astro +32 -0
- package/templates/astro/guided-onboarding/src/lumen/guided-onboarding.astro +35 -0
- package/templates/astro/interactive-pricing/src/lumen/interactive-pricing.astro +32 -0
- package/templates/astro/media-workspace/src/lumen/adjustment-controls.astro +89 -0
- package/templates/astro/media-workspace/src/lumen/media-processing.astro +47 -0
- package/templates/astro/media-workspace/src/lumen/media-workspace.astro +77 -0
- package/templates/astro/page-header/src/lumen/page-header.astro +41 -0
- package/templates/astro/project-workspace/src/lumen/project-workspace.astro +103 -0
- package/templates/astro/rich-text-editor/src/lumen/rich-text-editor.astro +21 -0
- package/templates/astro/saas-admin/src/lumen/saas-admin.astro +110 -0
- package/templates/astro/scheduler/src/lumen/scheduler.astro +36 -0
- package/templates/astro/section-header/src/lumen/section-header.astro +35 -0
- package/templates/astro/theme-builder/src/lumen/theme-builder.astro +28 -0
- package/templates/elements/advanced-fields/src/lumen/advanced-fields.html +25 -0
- package/templates/elements/analytics-dashboard/src/lumen/analytics-dashboard.html +28 -0
- package/templates/elements/auth-onboarding/src/lumen/auth-onboarding.html +79 -0
- package/templates/elements/command-center/src/lumen/command-center.html +15 -0
- package/templates/elements/commerce-dashboard/src/lumen/commerce-dashboard.html +24 -0
- package/templates/elements/content-flow-actions/src/lumen/content-flow-actions.html +11 -0
- package/templates/elements/content-flow-header/src/lumen/content-flow-header.html +15 -0
- package/templates/elements/content-flow-list/src/lumen/content-flow-list.html +14 -0
- package/templates/elements/content-flow-settings/src/lumen/content-flow-settings.html +18 -0
- package/templates/elements/data-collections/src/lumen/data-collections.html +31 -0
- package/templates/elements/feature-preview/src/lumen/feature-preview.html +13 -0
- package/templates/elements/guided-onboarding/src/lumen/guided-onboarding.html +16 -0
- package/templates/elements/interactive-pricing/src/lumen/interactive-pricing.html +13 -0
- package/templates/elements/media-workspace/src/lumen/media-workspace.html +57 -0
- package/templates/elements/media-workspace/src/lumen/media-workspace.ts +163 -0
- package/templates/elements/page-header/src/lumen/page-header.html +20 -0
- package/templates/elements/project-workspace/src/lumen/project-workspace.html +17 -0
- package/templates/elements/rich-text-editor/src/lumen/rich-text-editor.html +17 -0
- package/templates/elements/saas-admin/src/lumen/saas-admin.html +18 -0
- package/templates/elements/scheduler/src/lumen/scheduler.html +27 -0
- package/templates/elements/section-header/src/lumen/section-header.html +21 -0
- package/templates/elements/theme-builder/src/lumen/theme-builder.html +59 -0
- package/templates/react/advanced-fields/src/lumen/advanced-fields.tsx +37 -0
- package/templates/react/analytics-dashboard/src/lumen/analytics-dashboard.tsx +143 -0
- package/templates/react/auth-onboarding/src/lumen/auth-onboarding.tsx +129 -0
- package/templates/react/command-center/src/lumen/command-center.tsx +85 -0
- package/templates/react/commerce-dashboard/src/lumen/commerce-dashboard.tsx +148 -0
- package/templates/react/content-flow-actions/src/lumen/content-flow-actions.tsx +11 -0
- package/templates/react/content-flow-header/src/lumen/content-flow-header.tsx +14 -0
- package/templates/react/content-flow-list/src/lumen/content-flow-list.tsx +19 -0
- package/templates/react/content-flow-settings/src/lumen/content-flow-settings.tsx +26 -0
- package/templates/react/data-collections/src/lumen/data-collections.tsx +60 -0
- package/templates/react/feature-preview/src/lumen/feature-preview.tsx +42 -0
- package/templates/react/guided-onboarding/src/lumen/guided-onboarding.tsx +100 -0
- package/templates/react/import-review/src/lumen/import-review.tsx +150 -0
- package/templates/react/interactive-pricing/src/lumen/interactive-pricing.tsx +60 -0
- package/templates/react/media-workspace/src/lumen/adjustment-controls.tsx +61 -0
- package/templates/react/media-workspace/src/lumen/media-processing.tsx +43 -0
- package/templates/react/media-workspace/src/lumen/media-workspace.tsx +100 -0
- package/templates/react/operational-records/src/lumen/operational-records.tsx +92 -0
- package/templates/react/page-header/src/lumen/page-header.tsx +41 -0
- package/templates/react/project-workspace/src/lumen/project-workspace.tsx +112 -0
- package/templates/react/record-workspace/src/lumen/record-workspace.tsx +67 -0
- package/templates/react/review-workflow/src/lumen/review-workflow.tsx +202 -0
- package/templates/react/rich-text-editor/src/lumen/rich-text-editor.tsx +33 -0
- package/templates/react/saas-admin/src/lumen/saas-admin.tsx +119 -0
- package/templates/react/scheduler/src/lumen/scheduler.tsx +45 -0
- package/templates/react/section-header/src/lumen/section-header.tsx +33 -0
- package/templates/react/styles.d.ts +1 -0
- package/templates/react/theme-builder/src/lumen/theme-builder.tsx +57 -0
- package/templates/react/tsconfig.json +14 -0
- package/templates/react/validated-form/src/lumen/validated-form.tsx +166 -0
- package/templates/shared/common/src/lumen/lumen-template.css +247 -0
- package/templates/shared/media-workspace/src/lumen/media-workspace.css +14 -0
- package/templates/shared/visual-blocks/src/lumen/product-blocks.ts +224 -0
- package/v4-migration.json +447 -0
package/styles.css
CHANGED
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
/* Cascade layers: consumer (unlayered) CSS always wins over Lumen styles.
|
|
7
7
|
* Layer order also guarantees glass variants beat component base styles. */
|
|
8
8
|
@layer lumen.tokens, lumen.base, lumen.components, lumen.glass;
|
|
9
|
+
@import "./styles/world-map.css";
|
|
9
10
|
|
|
10
11
|
@layer lumen.tokens {
|
|
11
12
|
:root,
|
|
@@ -50,6 +51,22 @@
|
|
|
50
51
|
--chart-tooltip-background: var(--ink);
|
|
51
52
|
--chart-tooltip-foreground: var(--surface);
|
|
52
53
|
--ui-on-danger: var(--on-danger);
|
|
54
|
+
/* BEGIN:generated-spacing */
|
|
55
|
+
--ui-space-zero: 0rem;
|
|
56
|
+
--ui-space-xs: 0.25rem;
|
|
57
|
+
--ui-space-sm: 0.5rem;
|
|
58
|
+
--ui-space-md: 0.75rem;
|
|
59
|
+
--ui-space-lg: 1rem;
|
|
60
|
+
--ui-space-xl: 1.5rem;
|
|
61
|
+
--ui-space-2xl: 2rem;
|
|
62
|
+
--ui-space-3xl: 3rem;
|
|
63
|
+
--ui-space-related: var(--ui-space-sm);
|
|
64
|
+
--ui-space-group: var(--ui-space-lg);
|
|
65
|
+
--ui-space-section: var(--ui-space-2xl);
|
|
66
|
+
--ui-space-inset: var(--ui-space-xl);
|
|
67
|
+
/* END:generated-spacing */
|
|
68
|
+
--ui-container-gutter: clamp(var(--ui-space-group), 4vw, var(--ui-space-section));
|
|
69
|
+
--ui-border-width: 1px;
|
|
53
70
|
--ui-radius: 0.625rem;
|
|
54
71
|
--ui-radius-sm: 0.375rem;
|
|
55
72
|
--ui-radius-lg: 0.75rem;
|
|
@@ -147,6 +164,11 @@
|
|
|
147
164
|
}
|
|
148
165
|
|
|
149
166
|
@layer lumen.base {
|
|
167
|
+
/* Preserve native hiding even when a primitive establishes its own display mode. */
|
|
168
|
+
[hidden]:not([hidden="until-found"]) {
|
|
169
|
+
display: none !important;
|
|
170
|
+
}
|
|
171
|
+
|
|
150
172
|
@keyframes ui-shimmer {
|
|
151
173
|
from {
|
|
152
174
|
background-position: 200% 0;
|
|
@@ -316,7 +338,8 @@
|
|
|
316
338
|
.ui-tree,
|
|
317
339
|
.ui-tree-grid,
|
|
318
340
|
.ui-typography,
|
|
319
|
-
.ui-virtual-list
|
|
341
|
+
.ui-virtual-list,
|
|
342
|
+
.ui-world-map
|
|
320
343
|
) {
|
|
321
344
|
box-sizing: border-box;
|
|
322
345
|
font-family: var(--ui-font);
|
|
@@ -639,21 +662,25 @@
|
|
|
639
662
|
|
|
640
663
|
.panel-surface {
|
|
641
664
|
background: hsl(var(--surface) / 0.96);
|
|
642
|
-
border: 1px solid hsl(var(--line));
|
|
665
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
643
666
|
box-shadow: var(--ui-shadow-md);
|
|
644
667
|
}
|
|
645
668
|
|
|
646
669
|
.panel-card,
|
|
647
670
|
.ui-card {
|
|
648
671
|
position: relative;
|
|
649
|
-
|
|
650
|
-
border: 1px solid hsl(var(--line));
|
|
672
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
651
673
|
border-radius: var(--ui-radius-lg);
|
|
652
674
|
background: hsl(var(--surface));
|
|
653
675
|
box-shadow: var(--ui-shadow-sm);
|
|
654
676
|
color: hsl(var(--ink));
|
|
655
677
|
}
|
|
656
678
|
|
|
679
|
+
.panel-card { overflow: hidden; }
|
|
680
|
+
|
|
681
|
+
/* Interactive content can extend beyond a card; media owns its own clipping. */
|
|
682
|
+
.ui-card { overflow: visible; overflow-wrap: anywhere; }
|
|
683
|
+
|
|
657
684
|
.card-interactive,
|
|
658
685
|
.ui-card--interactive {
|
|
659
686
|
transition:
|
|
@@ -673,49 +700,20 @@
|
|
|
673
700
|
box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.04);
|
|
674
701
|
}
|
|
675
702
|
|
|
676
|
-
.ui-card
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
}
|
|
683
|
-
|
|
684
|
-
.ui-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
}
|
|
688
|
-
|
|
689
|
-
.ui-
|
|
690
|
-
color: hsl(var(--ink));
|
|
691
|
-
font-size: 1.125rem;
|
|
692
|
-
font-weight: 700;
|
|
693
|
-
letter-spacing: -0.015em;
|
|
694
|
-
line-height: 1.3;
|
|
695
|
-
}
|
|
696
|
-
|
|
697
|
-
.ui-card__description {
|
|
698
|
-
color: hsl(var(--ink-muted));
|
|
699
|
-
font-size: 0.875rem;
|
|
700
|
-
line-height: 1.55;
|
|
701
|
-
}
|
|
702
|
-
|
|
703
|
-
.ui-card__content {
|
|
704
|
-
color: hsl(var(--ink-soft));
|
|
705
|
-
}
|
|
706
|
-
|
|
707
|
-
.ui-card__footer {
|
|
708
|
-
align-items: center;
|
|
709
|
-
display: flex;
|
|
710
|
-
gap: 0.75rem;
|
|
711
|
-
}
|
|
712
|
-
|
|
713
|
-
.ui-card > :where(
|
|
714
|
-
.ui-card__content,
|
|
715
|
-
.ui-card__footer
|
|
716
|
-
) {
|
|
717
|
-
margin-block-start: var(--ui-card-gap);
|
|
718
|
-
}
|
|
703
|
+
.ui-card{--ui-card-gap:var(--ui-space-group);--ui-card-padding:var(--ui-space-inset);--ui-card-section-gap:var(--ui-space-related);display:flex;flex-direction:column;gap:var(--ui-card-gap);min-width:0;padding:var(--ui-card-padding);}
|
|
704
|
+
.ui-card--compact{--ui-card-gap:var(--ui-space-md);--ui-card-padding:var(--ui-space-lg);--ui-card-section-gap:var(--ui-space-xs);}
|
|
705
|
+
.ui-card--spacious{--ui-card-gap:var(--ui-space-xl);--ui-card-padding:var(--ui-space-2xl);}
|
|
706
|
+
.ui-card__header{display:grid;gap:var(--ui-card-section-gap);}
|
|
707
|
+
.ui-card__title{color:hsl(var(--ink));font-size:1.125rem;font-weight:700;letter-spacing:-0.015em;line-height:1.3;}
|
|
708
|
+
.ui-card__description{color:hsl(var(--ink-soft));font-size:0.875rem;line-height:1.55;}
|
|
709
|
+
.ui-card__content{color:hsl(var(--ink-soft));}
|
|
710
|
+
.ui-card__footer{align-items:center;display:flex;flex-wrap:wrap;gap:var(--ui-space-related);}
|
|
711
|
+
.ui-card__footer >:is(.ui-button,.ui-button-link),.ui-stack--wrap >:is(.ui-button,.ui-button-link){max-width:100%;white-space:normal;overflow-wrap:anywhere;}
|
|
712
|
+
.ui-card__footer .ui-button__content,.ui-stack--wrap > .ui-button .ui-button__content{min-width:0;}
|
|
713
|
+
/* Parent owns spacing. */ .ui-card >:where(*),.ui-card__header >:where(*),.ui-field >:where(*){min-width:0;margin:0;}
|
|
714
|
+
.ui-card__content >:where(:first-child){margin-block-start:0;}
|
|
715
|
+
.ui-card__content >:where(:last-child){margin-block-end:0;}
|
|
716
|
+
.ui-card >:where([hidden]:not([hidden="until-found"])),.ui-card >:where(.ui-card__header,.ui-card__content,.ui-card__footer):empty{display:none;}
|
|
719
717
|
|
|
720
718
|
.ui-card--muted {
|
|
721
719
|
background: hsl(var(--surface-muted) / 0.72);
|
|
@@ -744,6 +742,7 @@
|
|
|
744
742
|
--ui-button-padding: 0.5rem 1rem;
|
|
745
743
|
--ui-button-radius: var(--ui-radius-sm);
|
|
746
744
|
|
|
745
|
+
position: relative;
|
|
747
746
|
display: inline-flex;
|
|
748
747
|
min-height: var(--ui-button-min-height);
|
|
749
748
|
align-items: center;
|
|
@@ -768,6 +767,23 @@
|
|
|
768
767
|
user-select: none;
|
|
769
768
|
}
|
|
770
769
|
|
|
770
|
+
.ui-button__content {
|
|
771
|
+
display: inline-flex;
|
|
772
|
+
align-items: center;
|
|
773
|
+
justify-content: center;
|
|
774
|
+
gap: inherit;
|
|
775
|
+
}
|
|
776
|
+
|
|
777
|
+
.ui-button--loading > .ui-button__content {
|
|
778
|
+
opacity: 0;
|
|
779
|
+
}
|
|
780
|
+
|
|
781
|
+
.ui-button--loading > .ui-spinner {
|
|
782
|
+
position: absolute;
|
|
783
|
+
inset: 0;
|
|
784
|
+
margin: auto;
|
|
785
|
+
}
|
|
786
|
+
|
|
771
787
|
.ui-button:hover {
|
|
772
788
|
transform: translateY(-1px);
|
|
773
789
|
}
|
|
@@ -890,7 +906,7 @@
|
|
|
890
906
|
min-height: 2.5rem;
|
|
891
907
|
align-items: center;
|
|
892
908
|
justify-content: center;
|
|
893
|
-
border: 1px solid hsl(var(--line));
|
|
909
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
894
910
|
border-radius: 999px;
|
|
895
911
|
background: hsl(var(--surface));
|
|
896
912
|
color: hsl(var(--ink));
|
|
@@ -922,7 +938,7 @@
|
|
|
922
938
|
display: grid;
|
|
923
939
|
gap: 0.375rem;
|
|
924
940
|
padding: 1rem 1.125rem;
|
|
925
|
-
border: 1px solid hsl(var(--line));
|
|
941
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
926
942
|
border-left: 0.25rem solid hsl(var(--brand));
|
|
927
943
|
border-radius: var(--ui-radius);
|
|
928
944
|
background: hsl(var(--brand-soft) / 0.52);
|
|
@@ -980,7 +996,7 @@
|
|
|
980
996
|
.ui-image--fit-cover { object-fit: cover; }
|
|
981
997
|
.ui-image--radius-none { border-radius: 0; }
|
|
982
998
|
.ui-image--radius-sm { border-radius: var(--ui-radius-sm); }
|
|
983
|
-
.ui-image--radius-md { border-radius: var(--ui-radius
|
|
999
|
+
.ui-image--radius-md { border-radius: var(--ui-radius); }
|
|
984
1000
|
.ui-image--radius-lg { border-radius: var(--ui-radius-lg); }
|
|
985
1001
|
.ui-image--radius-full { border-radius: 9999px; }
|
|
986
1002
|
|
|
@@ -1012,23 +1028,118 @@
|
|
|
1012
1028
|
}
|
|
1013
1029
|
|
|
1014
1030
|
.ui-prose {
|
|
1031
|
+
overflow-wrap: anywhere;
|
|
1015
1032
|
max-width: 65ch;
|
|
1016
1033
|
color: hsl(var(--ink-soft));
|
|
1017
1034
|
line-height: 1.7;
|
|
1018
1035
|
}
|
|
1019
1036
|
|
|
1020
|
-
.ui-prose :where(h1, h2, h3, h4, strong) {
|
|
1037
|
+
.ui-prose :where(h1, h2, h3, h4, h5, h6, strong) {
|
|
1021
1038
|
color: hsl(var(--ink));
|
|
1022
1039
|
}
|
|
1023
1040
|
|
|
1024
|
-
.ui-prose :where(h1, h2, h3, h4, p, ul, ol) {
|
|
1025
|
-
margin-block: 0 0.75em;
|
|
1026
|
-
}
|
|
1027
|
-
|
|
1028
1041
|
.ui-prose :where(ul, ol) {
|
|
1029
1042
|
padding-inline-start: 1.25rem;
|
|
1030
1043
|
}
|
|
1031
1044
|
|
|
1045
|
+
.ui-prose :where(a) {
|
|
1046
|
+
color: hsl(var(--brand));
|
|
1047
|
+
text-decoration: underline;
|
|
1048
|
+
text-underline-offset: .2em;
|
|
1049
|
+
overflow-wrap: anywhere;
|
|
1050
|
+
}
|
|
1051
|
+
|
|
1052
|
+
.ui-prose :where(a:focus-visible) {
|
|
1053
|
+
outline: 2px solid hsl(var(--brand));
|
|
1054
|
+
outline-offset: 3px;
|
|
1055
|
+
border-radius: .125rem;
|
|
1056
|
+
}
|
|
1057
|
+
|
|
1058
|
+
.ui-prose :where(blockquote) {
|
|
1059
|
+
margin-inline: 0;
|
|
1060
|
+
padding-inline-start: 1rem;
|
|
1061
|
+
border-inline-start: 3px solid hsl(var(--line));
|
|
1062
|
+
color: hsl(var(--ink-soft));
|
|
1063
|
+
}
|
|
1064
|
+
|
|
1065
|
+
.ui-prose :where(hr) { margin-block: 1.5rem; border: 0; border-top: var(--ui-border-width, 1px) solid hsl(var(--line)); }
|
|
1066
|
+
.ui-prose :where(img, video) { max-width: 100%; height: auto; border-radius: var(--ui-radius-sm); }
|
|
1067
|
+
.ui-prose :where(code:not(.ui-code, .ui-code code)) {
|
|
1068
|
+
border-radius: .25rem;
|
|
1069
|
+
background: hsl(var(--surface-muted));
|
|
1070
|
+
color: hsl(var(--ink));
|
|
1071
|
+
padding: .125em .3em;
|
|
1072
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
|
1073
|
+
font-size: .875em;
|
|
1074
|
+
overflow-wrap: anywhere;
|
|
1075
|
+
}
|
|
1076
|
+
.ui-prose :where(pre:not(.ui-code pre)) {
|
|
1077
|
+
max-width: 100%;
|
|
1078
|
+
overflow-x: auto;
|
|
1079
|
+
padding: 1rem;
|
|
1080
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
1081
|
+
border-radius: var(--ui-radius-sm);
|
|
1082
|
+
background: hsl(var(--surface-muted));
|
|
1083
|
+
}
|
|
1084
|
+
.ui-prose :where(pre:not(.ui-code pre) code) { padding: 0; overflow-wrap: normal; }
|
|
1085
|
+
.ui-prose :where(table:not(.ui-table)) { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
|
|
1086
|
+
.ui-prose :where(table:not(.ui-table) th, table:not(.ui-table) td) { padding: .625rem .75rem; border-bottom: var(--ui-border-width, 1px) solid hsl(var(--line)); text-align: start; }
|
|
1087
|
+
.ui-prose :where(table:not(.ui-table) th) { color: hsl(var(--ink)); font-weight: 600; }
|
|
1088
|
+
|
|
1089
|
+
.ui-image-comparison { display: grid; min-width: 0; gap: .75rem; margin: 0; }
|
|
1090
|
+
.ui-image-comparison__frame {
|
|
1091
|
+
position: relative;
|
|
1092
|
+
aspect-ratio: var(--ui-image-comparison-ratio, 1.77778);
|
|
1093
|
+
overflow: hidden;
|
|
1094
|
+
isolation: isolate;
|
|
1095
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
1096
|
+
border-radius: var(--ui-radius);
|
|
1097
|
+
background: hsl(var(--surface-muted));
|
|
1098
|
+
}
|
|
1099
|
+
.ui-image-comparison__before, .ui-image-comparison__after { position: absolute; inset: 0; }
|
|
1100
|
+
.ui-image-comparison__after { clip-path: inset(0 calc(100% - var(--ui-image-comparison-position, 50%)) 0 0); }
|
|
1101
|
+
.ui-image-comparison:dir(rtl) .ui-image-comparison__after { clip-path: inset(0 0 0 calc(100% - var(--ui-image-comparison-position, 50%))); }
|
|
1102
|
+
.ui-image-comparison__frame :where(img, video, picture, .ui-image) { display: block; width: 100%; height: 100%; max-width: none; border-radius: 0; object-fit: cover; }
|
|
1103
|
+
.ui-image-comparison[data-fit="contain"] .ui-image-comparison__frame :where(img, video) { object-fit: contain; }
|
|
1104
|
+
.ui-image-comparison__divider {
|
|
1105
|
+
position: absolute;
|
|
1106
|
+
inset-block: 0;
|
|
1107
|
+
inset-inline-start: var(--ui-image-comparison-position, 50%);
|
|
1108
|
+
width: 2px;
|
|
1109
|
+
background: hsl(var(--surface));
|
|
1110
|
+
box-shadow: 0 0 0 1px hsl(var(--ink) / .2);
|
|
1111
|
+
pointer-events: none;
|
|
1112
|
+
}
|
|
1113
|
+
.ui-image-comparison__divider::after {
|
|
1114
|
+
content: "↔";
|
|
1115
|
+
position: absolute;
|
|
1116
|
+
top: 50%;
|
|
1117
|
+
left: 50%;
|
|
1118
|
+
display: grid;
|
|
1119
|
+
place-items: center;
|
|
1120
|
+
width: 2rem;
|
|
1121
|
+
height: 2rem;
|
|
1122
|
+
transform: translate(-50%, -50%);
|
|
1123
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
1124
|
+
border-radius: 50%;
|
|
1125
|
+
background: hsl(var(--surface));
|
|
1126
|
+
color: hsl(var(--ink));
|
|
1127
|
+
box-shadow: 0 2px 8px hsl(var(--ink) / .15);
|
|
1128
|
+
}
|
|
1129
|
+
.ui-image-comparison__labels { display: flex; flex-direction: row-reverse; justify-content: space-between; gap: 1rem; color: hsl(var(--ink-soft)); font-size: .8125rem; }
|
|
1130
|
+
.ui-image-comparison__caption, .ui-image-comparison__control { display: grid; min-width: 0; gap: .5rem; }
|
|
1131
|
+
.ui-image-comparison__control { color: hsl(var(--ink)); font-size: .875rem; font-weight: 600; }
|
|
1132
|
+
.ui-image-comparison__range { width: 100%; min-width: 0; min-height: 2.75rem; margin: 0; }
|
|
1133
|
+
.ui-image-comparison:focus-within .ui-image-comparison__frame { outline: 2px solid hsl(var(--brand)); outline-offset: 3px; }
|
|
1134
|
+
|
|
1135
|
+
/* Alternate views retain image framing and the current reveal value. */
|
|
1136
|
+
.ui-image-comparison[data-mode="side-by-side"] .ui-image-comparison__frame { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); aspect-ratio: calc(var(--ui-image-comparison-ratio, 1.77778) * 2); }
|
|
1137
|
+
.ui-image-comparison[data-mode="side-by-side"] :is(.ui-image-comparison__before, .ui-image-comparison__after) { position: relative; min-width: 0; }
|
|
1138
|
+
.ui-image-comparison:not([data-mode="reveal"])[data-mode] .ui-image-comparison__after { clip-path: none; }
|
|
1139
|
+
.ui-image-comparison:not([data-mode="reveal"])[data-mode] .ui-image-comparison__divider { display: none; }
|
|
1140
|
+
.ui-image-comparison[data-mode="side-by-side"] .ui-image-comparison__labels { flex-direction: row; }
|
|
1141
|
+
.ui-image-comparison [hidden] { display: none !important; }
|
|
1142
|
+
|
|
1032
1143
|
.ui-skip-link {
|
|
1033
1144
|
position: fixed;
|
|
1034
1145
|
z-index: 100000;
|
|
@@ -1355,7 +1466,7 @@
|
|
|
1355
1466
|
|
|
1356
1467
|
.ui-alert,
|
|
1357
1468
|
.ui-toast {
|
|
1358
|
-
border: 1px solid hsl(var(--line));
|
|
1469
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
1359
1470
|
border-radius: var(--ui-radius);
|
|
1360
1471
|
background: hsl(var(--surface));
|
|
1361
1472
|
color: hsl(var(--ink-soft));
|
|
@@ -1435,14 +1546,14 @@
|
|
|
1435
1546
|
.ui-toast--success {
|
|
1436
1547
|
border-color: hsl(var(--success) / 0.36);
|
|
1437
1548
|
background: hsl(var(--success) / 0.08);
|
|
1438
|
-
color: hsl(var(--
|
|
1549
|
+
color: hsl(var(--ink));
|
|
1439
1550
|
}
|
|
1440
1551
|
|
|
1441
1552
|
.ui-alert--warning,
|
|
1442
1553
|
.ui-toast--warning {
|
|
1443
1554
|
border-color: hsl(var(--warning) / 0.42);
|
|
1444
1555
|
background: hsl(var(--warning) / 0.1);
|
|
1445
|
-
color: hsl(var(--
|
|
1556
|
+
color: hsl(var(--ink));
|
|
1446
1557
|
}
|
|
1447
1558
|
|
|
1448
1559
|
.ui-badge {
|
|
@@ -1500,7 +1611,7 @@
|
|
|
1500
1611
|
.ui-input-otp {
|
|
1501
1612
|
min-height: 2.75rem;
|
|
1502
1613
|
width: 100%;
|
|
1503
|
-
border: 1px solid hsl(var(--line));
|
|
1614
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
1504
1615
|
border-radius: var(--ui-radius-sm);
|
|
1505
1616
|
background: hsl(var(--surface));
|
|
1506
1617
|
color: hsl(var(--ink));
|
|
@@ -1572,7 +1683,7 @@
|
|
|
1572
1683
|
.ui-combobox,
|
|
1573
1684
|
.ui-select-field {
|
|
1574
1685
|
display: grid;
|
|
1575
|
-
gap:
|
|
1686
|
+
gap: var(--ui-space-related);
|
|
1576
1687
|
}
|
|
1577
1688
|
|
|
1578
1689
|
.ui-combobox,
|
|
@@ -1665,7 +1776,7 @@
|
|
|
1665
1776
|
width: 100%;
|
|
1666
1777
|
max-height: min(16rem, 50vh);
|
|
1667
1778
|
overflow-y: auto;
|
|
1668
|
-
border: 1px solid hsl(var(--line));
|
|
1779
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
1669
1780
|
border-radius: var(--ui-radius);
|
|
1670
1781
|
background: hsl(var(--surface));
|
|
1671
1782
|
box-shadow: var(--ui-shadow-md);
|
|
@@ -1745,7 +1856,7 @@
|
|
|
1745
1856
|
align-items: center;
|
|
1746
1857
|
gap: 0.5rem;
|
|
1747
1858
|
overflow: hidden;
|
|
1748
|
-
border: 1px solid hsl(var(--line));
|
|
1859
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
1749
1860
|
border-radius: var(--ui-radius-sm);
|
|
1750
1861
|
background: hsl(var(--surface));
|
|
1751
1862
|
color: hsl(var(--ink-soft));
|
|
@@ -1778,36 +1889,118 @@
|
|
|
1778
1889
|
margin-inline-end: 0.25rem;
|
|
1779
1890
|
}
|
|
1780
1891
|
|
|
1892
|
+
.ui-country-flag {
|
|
1893
|
+
display: inline-flex;
|
|
1894
|
+
width: 1.5rem;
|
|
1895
|
+
height: 1.125rem;
|
|
1896
|
+
flex: 0 0 auto;
|
|
1897
|
+
align-items: center;
|
|
1898
|
+
justify-content: center;
|
|
1899
|
+
overflow: hidden;
|
|
1900
|
+
border-radius: 2px;
|
|
1901
|
+
box-shadow: 0 0 0 1px hsl(var(--line) / 0.7);
|
|
1902
|
+
font-size: 0.625rem;
|
|
1903
|
+
font-weight: 600;
|
|
1904
|
+
}
|
|
1905
|
+
.ui-country-flag > img { display: block; width: 100%; height: 100%; object-fit: cover; }
|
|
1906
|
+
.ui-phone-number { display: inline-flex; align-items: center; gap: 0.5rem; }
|
|
1907
|
+
.ui-phone-number:focus-visible { outline: 2px solid hsl(var(--brand)); outline-offset: 3px; }
|
|
1781
1908
|
.ui-phone-input {
|
|
1909
|
+
--ui-phone-height: 2.75rem;
|
|
1910
|
+
--ui-phone-padding: 0.75rem;
|
|
1911
|
+
--ui-phone-country-gap: 0.5rem;
|
|
1912
|
+
width: 100%;
|
|
1913
|
+
min-width: 0;
|
|
1914
|
+
min-height: var(--ui-phone-height);
|
|
1915
|
+
align-items: stretch;
|
|
1916
|
+
gap: 0;
|
|
1782
1917
|
padding: 0;
|
|
1918
|
+
background: hsl(var(--surface));
|
|
1783
1919
|
}
|
|
1784
|
-
.ui-phone-input
|
|
1920
|
+
.ui-phone-input[data-size="sm"] { --ui-phone-height: 2.5rem; --ui-phone-padding: 0.625rem; }
|
|
1921
|
+
.ui-phone-input[data-size="lg"] { --ui-phone-height: 3rem; --ui-phone-padding: 1rem; }
|
|
1922
|
+
.ui-phone-input > .ui-phone-input__picker {
|
|
1923
|
+
position: relative;
|
|
1924
|
+
display: flex;
|
|
1785
1925
|
flex: 0 0 auto;
|
|
1786
|
-
width:
|
|
1787
|
-
|
|
1926
|
+
max-width: 48%;
|
|
1927
|
+
align-items: stretch;
|
|
1928
|
+
padding: 0;
|
|
1929
|
+
border-inline-end: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
1930
|
+
transition: background-color var(--ui-duration-fast) var(--ui-ease);
|
|
1931
|
+
}
|
|
1932
|
+
.ui-phone-input__selection { display: none; }
|
|
1933
|
+
.ui-phone-input__country {
|
|
1934
|
+
width: 100%;
|
|
1935
|
+
height: calc(var(--ui-phone-height) - 2px);
|
|
1936
|
+
min-height: calc(var(--ui-phone-height) - 2px);
|
|
1788
1937
|
border: 0;
|
|
1789
1938
|
border-radius: 0;
|
|
1790
|
-
|
|
1939
|
+
background-color: transparent;
|
|
1791
1940
|
box-shadow: none;
|
|
1792
1941
|
}
|
|
1942
|
+
.ui-phone-input[data-phone-enhanced="true"] .ui-phone-input__selection {
|
|
1943
|
+
display: flex;
|
|
1944
|
+
align-items: center;
|
|
1945
|
+
gap: var(--ui-phone-country-gap);
|
|
1946
|
+
padding-inline: var(--ui-phone-padding);
|
|
1947
|
+
color: hsl(var(--ink));
|
|
1948
|
+
font-size: 0.875rem;
|
|
1949
|
+
font-variant-numeric: tabular-nums;
|
|
1950
|
+
pointer-events: none;
|
|
1951
|
+
}
|
|
1952
|
+
.ui-phone-input__chevron {
|
|
1953
|
+
width: 0.375rem;
|
|
1954
|
+
height: 0.375rem;
|
|
1955
|
+
margin-inline-start: 0.125rem;
|
|
1956
|
+
border-inline-end: 1.5px solid currentColor;
|
|
1957
|
+
border-block-end: 1.5px solid currentColor;
|
|
1958
|
+
color: hsl(var(--ink-muted));
|
|
1959
|
+
transform: translateY(-2px) rotate(45deg);
|
|
1960
|
+
}
|
|
1961
|
+
.ui-phone-input[data-phone-enhanced="true"] .ui-phone-input__country {
|
|
1962
|
+
position: absolute;
|
|
1963
|
+
inset: 0;
|
|
1964
|
+
width: 100%;
|
|
1965
|
+
height: 100%;
|
|
1966
|
+
opacity: 0;
|
|
1967
|
+
cursor: pointer;
|
|
1968
|
+
}
|
|
1969
|
+
.ui-phone-input:not([data-disabled]):not([data-readonly]) > .ui-phone-input__picker:hover { background: hsl(var(--surface-muted)); }
|
|
1970
|
+
.ui-phone-input > .ui-phone-input__picker:has(select:focus-visible) { background: hsl(var(--brand-soft)); }
|
|
1793
1971
|
.ui-phone-input > .ui-phone-input__number {
|
|
1794
|
-
flex: 1 1
|
|
1795
|
-
|
|
1972
|
+
flex: 1 1 0;
|
|
1973
|
+
width: 0;
|
|
1974
|
+
min-width: 0;
|
|
1975
|
+
height: calc(var(--ui-phone-height) - 2px);
|
|
1976
|
+
min-height: calc(var(--ui-phone-height) - 2px);
|
|
1977
|
+
padding-inline: var(--ui-phone-padding);
|
|
1796
1978
|
border: 0;
|
|
1797
1979
|
border-radius: 0;
|
|
1980
|
+
background: transparent;
|
|
1798
1981
|
box-shadow: none;
|
|
1982
|
+
font-size: 1rem;
|
|
1983
|
+
opacity: 1;
|
|
1799
1984
|
}
|
|
1985
|
+
.ui-phone-input > .ui-phone-input__number:focus { border: 0; box-shadow: none; outline: none; }
|
|
1986
|
+
.ui-phone-input:not([data-phone-enhanced]) .ui-phone-input__country:disabled { opacity: 1; }
|
|
1987
|
+
.ui-phone-input[data-disabled] { opacity: 0.55; }
|
|
1988
|
+
.ui-phone-input[data-readonly] { background: hsl(var(--surface-muted)); }
|
|
1989
|
+
.ui-phone-input[data-disabled] select, .ui-phone-input[data-readonly] select { cursor: default; }
|
|
1800
1990
|
.ui-phone-input[data-invalid="true"],
|
|
1801
|
-
.ui-phone-input:has(.ui-phone-input__number[aria-invalid="true"]) {
|
|
1802
|
-
|
|
1803
|
-
}
|
|
1991
|
+
.ui-phone-input:has(.ui-phone-input__number[aria-invalid="true"]) { border-color: hsl(var(--danger)); }
|
|
1992
|
+
.ui-phone-input[data-invalid="true"]:focus-within { box-shadow: 0 0 0 3px hsl(var(--danger) / 0.18); }
|
|
1993
|
+
.ui-phone-input__error { display: block; margin-block-start: 0.375rem; color: hsl(var(--danger)); font-size: 0.8125rem; }
|
|
1994
|
+
.ui-phone-input__error[hidden] { display: none; }
|
|
1995
|
+
@media (prefers-reduced-motion: reduce) { .ui-phone-input__picker { transition: none; } }
|
|
1996
|
+
@media (forced-colors: active) { .ui-phone-input__picker:has(select:focus-visible) { outline: 2px solid Highlight; outline-offset: -2px; } }
|
|
1804
1997
|
|
|
1805
1998
|
.ui-checkbox {
|
|
1806
1999
|
width: 1rem;
|
|
1807
2000
|
height: 1rem;
|
|
1808
2001
|
margin: 0;
|
|
1809
2002
|
appearance: none;
|
|
1810
|
-
border: 1px solid hsl(var(--line));
|
|
2003
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
1811
2004
|
border-radius: 0.25rem;
|
|
1812
2005
|
background: hsl(var(--surface));
|
|
1813
2006
|
cursor: pointer;
|
|
@@ -1827,7 +2020,7 @@
|
|
|
1827
2020
|
.ui-radio-group {
|
|
1828
2021
|
display: grid;
|
|
1829
2022
|
gap: 0.7rem;
|
|
1830
|
-
border: 1px solid hsl(var(--line));
|
|
2023
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
1831
2024
|
border-radius: var(--ui-radius-lg);
|
|
1832
2025
|
background: hsl(var(--surface));
|
|
1833
2026
|
padding: 0.9rem;
|
|
@@ -1857,7 +2050,7 @@
|
|
|
1857
2050
|
height: 1.4rem;
|
|
1858
2051
|
margin: 0;
|
|
1859
2052
|
appearance: none;
|
|
1860
|
-
border: 1px solid hsl(var(--line));
|
|
2053
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
1861
2054
|
border-radius: 999px;
|
|
1862
2055
|
background: hsl(var(--surface-strong));
|
|
1863
2056
|
cursor: pointer;
|
|
@@ -2002,6 +2195,7 @@
|
|
|
2002
2195
|
|
|
2003
2196
|
.ui-separator {
|
|
2004
2197
|
display: block;
|
|
2198
|
+
margin: 0;
|
|
2005
2199
|
flex-shrink: 0;
|
|
2006
2200
|
border: 0;
|
|
2007
2201
|
background: hsl(var(--line));
|
|
@@ -2020,39 +2214,33 @@
|
|
|
2020
2214
|
|
|
2021
2215
|
.ui-accordion {
|
|
2022
2216
|
display: grid;
|
|
2023
|
-
|
|
2217
|
+
min-width: 0;
|
|
2218
|
+
gap: var(--ui-space-md);
|
|
2024
2219
|
}
|
|
2025
2220
|
|
|
2026
2221
|
.ui-accordion details,
|
|
2027
2222
|
.ui-collapsible {
|
|
2223
|
+
--ui-disclosure-inset: var(--ui-space-lg);
|
|
2224
|
+
min-width: 0;
|
|
2028
2225
|
overflow: clip;
|
|
2029
|
-
|
|
2226
|
+
padding-inline: var(--ui-disclosure-inset);
|
|
2227
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2030
2228
|
border-radius: var(--ui-radius-lg);
|
|
2031
2229
|
background: hsl(var(--surface));
|
|
2032
2230
|
color: hsl(var(--ink-soft));
|
|
2033
|
-
|
|
2034
|
-
transition:
|
|
2035
|
-
border-color var(--ui-duration-fast) var(--ui-ease),
|
|
2036
|
-
box-shadow var(--ui-duration-fast) var(--ui-ease);
|
|
2037
|
-
}
|
|
2038
|
-
|
|
2039
|
-
.ui-accordion details[open],
|
|
2040
|
-
.ui-collapsible[open] {
|
|
2041
|
-
border-color: hsl(var(--brand) / 0.38);
|
|
2042
|
-
box-shadow:
|
|
2043
|
-
0 0 0 1px hsl(var(--brand) / 0.08),
|
|
2044
|
-
var(--ui-shadow-sm);
|
|
2231
|
+
transition: border-color var(--ui-duration-fast) var(--ui-ease);
|
|
2045
2232
|
}
|
|
2046
2233
|
|
|
2047
2234
|
.ui-accordion--flush {
|
|
2048
2235
|
gap: 0;
|
|
2049
|
-
border-top: 1px solid hsl(var(--line));
|
|
2236
|
+
border-top: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2050
2237
|
}
|
|
2051
2238
|
|
|
2052
2239
|
.ui-accordion--flush details {
|
|
2240
|
+
--ui-disclosure-inset: var(--ui-space-xs);
|
|
2053
2241
|
overflow: visible;
|
|
2054
2242
|
border: 0;
|
|
2055
|
-
border-bottom: 1px solid hsl(var(--line));
|
|
2243
|
+
border-bottom: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2056
2244
|
border-radius: 0;
|
|
2057
2245
|
background: transparent;
|
|
2058
2246
|
box-shadow: none;
|
|
@@ -2066,17 +2254,18 @@
|
|
|
2066
2254
|
|
|
2067
2255
|
.ui-accordion summary,
|
|
2068
2256
|
.ui-collapsible summary {
|
|
2069
|
-
|
|
2070
|
-
|
|
2071
|
-
|
|
2072
|
-
gap: 1rem;
|
|
2257
|
+
position: relative;
|
|
2258
|
+
display: block;
|
|
2259
|
+
margin-inline: calc(-1 * var(--ui-disclosure-inset));
|
|
2073
2260
|
cursor: pointer;
|
|
2074
2261
|
list-style: none;
|
|
2075
2262
|
color: hsl(var(--ink));
|
|
2076
|
-
font-weight:
|
|
2077
|
-
line-height: 1.
|
|
2263
|
+
font-weight: 600;
|
|
2264
|
+
line-height: 1.5;
|
|
2265
|
+
overflow-wrap: anywhere;
|
|
2078
2266
|
min-height: 3.5rem;
|
|
2079
|
-
padding:
|
|
2267
|
+
padding: var(--ui-space-lg) var(--ui-disclosure-inset);
|
|
2268
|
+
padding-inline-end: calc(var(--ui-disclosure-inset) + 2rem + var(--ui-space-md));
|
|
2080
2269
|
transition:
|
|
2081
2270
|
background-color var(--ui-duration-fast) var(--ui-ease),
|
|
2082
2271
|
color var(--ui-duration-fast) var(--ui-ease);
|
|
@@ -2089,17 +2278,17 @@
|
|
|
2089
2278
|
|
|
2090
2279
|
.ui-accordion details[open] > summary,
|
|
2091
2280
|
.ui-collapsible[open] > summary {
|
|
2092
|
-
|
|
2281
|
+
margin-block-end: var(--ui-space-lg);
|
|
2093
2282
|
}
|
|
2094
2283
|
|
|
2095
2284
|
.ui-accordion details[open],
|
|
2096
2285
|
.ui-collapsible[open] {
|
|
2097
|
-
padding-block-end:
|
|
2286
|
+
padding-block-end: var(--ui-space-lg);
|
|
2098
2287
|
}
|
|
2099
2288
|
|
|
2100
2289
|
.ui-accordion details > :not(summary),
|
|
2101
2290
|
.ui-collapsible > :not(summary) {
|
|
2102
|
-
margin-inline:
|
|
2291
|
+
margin-inline: 0;
|
|
2103
2292
|
}
|
|
2104
2293
|
|
|
2105
2294
|
.ui-accordion summary::-webkit-details-marker,
|
|
@@ -2107,33 +2296,52 @@
|
|
|
2107
2296
|
display: none;
|
|
2108
2297
|
}
|
|
2109
2298
|
|
|
2299
|
+
.ui-accordion summary::before,
|
|
2300
|
+
.ui-collapsible summary::before {
|
|
2301
|
+
position: absolute;
|
|
2302
|
+
inset-inline-end: var(--ui-disclosure-inset);
|
|
2303
|
+
top: var(--ui-space-md);
|
|
2304
|
+
width: 2rem;
|
|
2305
|
+
height: 2rem;
|
|
2306
|
+
border-radius: 50%;
|
|
2307
|
+
background: hsl(var(--surface-muted));
|
|
2308
|
+
content: "";
|
|
2309
|
+
pointer-events: none;
|
|
2310
|
+
transition: background-color var(--ui-duration-fast) var(--ui-ease);
|
|
2311
|
+
}
|
|
2312
|
+
|
|
2110
2313
|
.ui-accordion summary::after,
|
|
2111
2314
|
.ui-collapsible summary::after {
|
|
2315
|
+
position: absolute;
|
|
2316
|
+
inset-inline-end: calc(var(--ui-disclosure-inset) + 0.75rem);
|
|
2317
|
+
top: calc(var(--ui-space-md) + 0.6875rem);
|
|
2112
2318
|
width: 0.5rem;
|
|
2113
2319
|
height: 0.5rem;
|
|
2114
2320
|
border-right: 1.5px solid hsl(var(--ink-muted));
|
|
2115
2321
|
border-bottom: 1.5px solid hsl(var(--ink-muted));
|
|
2116
2322
|
content: "";
|
|
2117
2323
|
border-radius: 1px;
|
|
2118
|
-
|
|
2119
|
-
transform: rotate(45deg)
|
|
2324
|
+
pointer-events: none;
|
|
2325
|
+
transform: rotate(45deg);
|
|
2120
2326
|
transition:
|
|
2121
2327
|
border-color var(--ui-duration-fast) var(--ui-ease),
|
|
2122
|
-
box-shadow var(--ui-duration-fast) var(--ui-ease),
|
|
2123
2328
|
transform var(--ui-duration-fast) var(--ui-ease);
|
|
2124
2329
|
}
|
|
2125
2330
|
|
|
2331
|
+
.ui-accordion details[open] > summary::before,
|
|
2332
|
+
.ui-collapsible[open] > summary::before {
|
|
2333
|
+
background: hsl(var(--brand-soft));
|
|
2334
|
+
}
|
|
2335
|
+
|
|
2126
2336
|
.ui-accordion details[open] > summary::after,
|
|
2127
2337
|
.ui-collapsible[open] > summary::after {
|
|
2128
2338
|
border-color: hsl(var(--brand));
|
|
2129
|
-
|
|
2130
|
-
transform: rotate(225deg) translate(-0.1rem, -0.1rem);
|
|
2339
|
+
transform: translateY(0.1875rem) rotate(225deg);
|
|
2131
2340
|
}
|
|
2132
2341
|
|
|
2133
2342
|
.ui-accordion summary:hover::after,
|
|
2134
2343
|
.ui-collapsible summary:hover::after {
|
|
2135
2344
|
border-color: hsl(var(--brand));
|
|
2136
|
-
box-shadow: 0 0 0 0.45rem hsl(var(--brand-soft));
|
|
2137
2345
|
}
|
|
2138
2346
|
|
|
2139
2347
|
.ui-accordion summary:focus-visible,
|
|
@@ -2144,12 +2352,12 @@
|
|
|
2144
2352
|
}
|
|
2145
2353
|
|
|
2146
2354
|
.ui-accordion--flush details[open] {
|
|
2147
|
-
padding-block-end:
|
|
2355
|
+
padding-block-end: var(--ui-space-lg);
|
|
2148
2356
|
}
|
|
2149
2357
|
|
|
2150
2358
|
.ui-accordion--flush summary {
|
|
2151
2359
|
min-height: 4rem;
|
|
2152
|
-
padding:
|
|
2360
|
+
padding-block: var(--ui-space-lg);
|
|
2153
2361
|
}
|
|
2154
2362
|
|
|
2155
2363
|
.ui-accordion--flush summary:hover {
|
|
@@ -2159,14 +2367,17 @@
|
|
|
2159
2367
|
}
|
|
2160
2368
|
|
|
2161
2369
|
.ui-accordion--flush details[open] > summary {
|
|
2370
|
+
margin-block-end: 0;
|
|
2371
|
+
padding-block-end: var(--ui-space-md);
|
|
2162
2372
|
color: hsl(var(--ink));
|
|
2163
2373
|
}
|
|
2164
2374
|
|
|
2165
|
-
.ui-accordion--flush
|
|
2166
|
-
|
|
2375
|
+
.ui-accordion--flush summary::before {
|
|
2376
|
+
display: none;
|
|
2167
2377
|
}
|
|
2168
2378
|
|
|
2169
2379
|
.ui-accordion--flush details[open] > summary::before {
|
|
2380
|
+
display: block;
|
|
2170
2381
|
width: 0.2rem;
|
|
2171
2382
|
height: 1.25rem;
|
|
2172
2383
|
border-radius: 999px;
|
|
@@ -2174,24 +2385,28 @@
|
|
|
2174
2385
|
content: "";
|
|
2175
2386
|
position: absolute;
|
|
2176
2387
|
inset-inline-start: -0.875rem;
|
|
2177
|
-
|
|
2178
|
-
|
|
2179
|
-
.ui-accordion--flush summary {
|
|
2180
|
-
position: relative;
|
|
2388
|
+
top: var(--ui-space-lg);
|
|
2181
2389
|
}
|
|
2182
2390
|
|
|
2183
2391
|
.ui-accordion p,
|
|
2184
2392
|
.ui-collapsible p {
|
|
2185
2393
|
color: hsl(var(--ink-soft));
|
|
2186
|
-
margin-block
|
|
2394
|
+
margin-block: 0;
|
|
2187
2395
|
line-height: 1.6;
|
|
2188
2396
|
}
|
|
2189
2397
|
|
|
2398
|
+
.ui-accordion details > :not(summary) + :not(summary),
|
|
2399
|
+
.ui-collapsible > :not(summary) + :not(summary) {
|
|
2400
|
+
margin-block-start: var(--ui-space-related);
|
|
2401
|
+
}
|
|
2402
|
+
|
|
2190
2403
|
@media (prefers-reduced-motion: reduce) {
|
|
2191
2404
|
.ui-accordion details,
|
|
2192
2405
|
.ui-collapsible,
|
|
2193
2406
|
.ui-accordion summary,
|
|
2194
2407
|
.ui-collapsible summary,
|
|
2408
|
+
.ui-accordion summary::before,
|
|
2409
|
+
.ui-collapsible summary::before,
|
|
2195
2410
|
.ui-accordion summary::after,
|
|
2196
2411
|
.ui-collapsible summary::after {
|
|
2197
2412
|
transition: none;
|
|
@@ -2204,7 +2419,7 @@
|
|
|
2204
2419
|
.ui-sheet {
|
|
2205
2420
|
width: min(100% - 2rem, 34rem);
|
|
2206
2421
|
max-width: 34rem;
|
|
2207
|
-
border: 1px solid hsl(var(--line));
|
|
2422
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2208
2423
|
border-radius: var(--ui-radius-lg);
|
|
2209
2424
|
background: hsl(var(--surface));
|
|
2210
2425
|
color: hsl(var(--ink));
|
|
@@ -2262,49 +2477,112 @@
|
|
|
2262
2477
|
gap: 0.5rem;
|
|
2263
2478
|
}
|
|
2264
2479
|
|
|
2265
|
-
.
|
|
2266
|
-
|
|
2480
|
+
/* Compound dialogs keep actions visible while the task body scrolls. */
|
|
2481
|
+
.ui-dialog:has(> [data-slot="dialog-body"]) {
|
|
2482
|
+
padding: 0;
|
|
2483
|
+
overflow: hidden;
|
|
2267
2484
|
}
|
|
2268
2485
|
|
|
2269
|
-
.ui-
|
|
2270
|
-
|
|
2271
|
-
|
|
2272
|
-
|
|
2273
|
-
max-width: none;
|
|
2274
|
-
margin: auto auto 0;
|
|
2275
|
-
border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0;
|
|
2486
|
+
.ui-dialog[open]:has(> [data-slot="dialog-body"]),
|
|
2487
|
+
lumen-dialog.ui-dialog:not([hidden]):has(> [data-slot="dialog-body"]) {
|
|
2488
|
+
display: flex;
|
|
2489
|
+
flex-direction: column;
|
|
2276
2490
|
}
|
|
2277
2491
|
|
|
2278
|
-
.ui-
|
|
2279
|
-
|
|
2280
|
-
inset: 0 0 0 auto;
|
|
2281
|
-
width: min(100%, 28rem);
|
|
2282
|
-
height: 100%;
|
|
2283
|
-
max-height: none;
|
|
2284
|
-
margin: 0 0 0 auto;
|
|
2285
|
-
border-radius: 0;
|
|
2286
|
-
border-block: 0;
|
|
2287
|
-
border-inline-end: 0;
|
|
2492
|
+
.ui-dialog:has(> [data-slot="dialog-body"]) > * + * {
|
|
2493
|
+
margin-block-start: 0;
|
|
2288
2494
|
}
|
|
2289
2495
|
|
|
2290
|
-
.ui-
|
|
2291
|
-
.ui-
|
|
2292
|
-
|
|
2293
|
-
|
|
2294
|
-
|
|
2295
|
-
gap: 0.5rem;
|
|
2296
|
-
align-items: start;
|
|
2496
|
+
.ui-dialog-header,
|
|
2497
|
+
.ui-dialog-footer {
|
|
2498
|
+
display: block;
|
|
2499
|
+
flex: none;
|
|
2500
|
+
padding: 1.25rem;
|
|
2297
2501
|
}
|
|
2298
2502
|
|
|
2299
|
-
.ui-
|
|
2300
|
-
|
|
2301
|
-
|
|
2302
|
-
|
|
2303
|
-
|
|
2304
|
-
|
|
2503
|
+
.ui-dialog-header {
|
|
2504
|
+
border-block-end: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2505
|
+
}
|
|
2506
|
+
|
|
2507
|
+
.ui-dialog-title {
|
|
2508
|
+
display: block;
|
|
2509
|
+
margin: 0;
|
|
2510
|
+
font-size: 1.125rem;
|
|
2511
|
+
font-weight: 600;
|
|
2512
|
+
line-height: 1.4;
|
|
2513
|
+
}
|
|
2514
|
+
|
|
2515
|
+
.ui-dialog-title > :is(h2, h3, h4) {
|
|
2516
|
+
margin: 0;
|
|
2517
|
+
font: inherit;
|
|
2518
|
+
}
|
|
2519
|
+
|
|
2520
|
+
.ui-dialog-body {
|
|
2521
|
+
display: block;
|
|
2522
|
+
flex: 1 1 auto;
|
|
2523
|
+
min-height: 0;
|
|
2524
|
+
padding: 1.25rem;
|
|
2525
|
+
overflow-y: auto;
|
|
2526
|
+
overscroll-behavior: contain;
|
|
2527
|
+
scroll-padding-block: 1.25rem;
|
|
2528
|
+
}
|
|
2529
|
+
|
|
2530
|
+
.ui-dialog-footer,
|
|
2531
|
+
.ui-dialog .ui-dialog-footer {
|
|
2532
|
+
display: flex;
|
|
2533
|
+
flex-wrap: wrap;
|
|
2534
|
+
justify-content: flex-end;
|
|
2535
|
+
gap: 0.5rem;
|
|
2536
|
+
border-block-start: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2537
|
+
}
|
|
2538
|
+
|
|
2539
|
+
lumen-dialog-close {
|
|
2540
|
+
display: inline-flex;
|
|
2541
|
+
}
|
|
2542
|
+
|
|
2543
|
+
.ui-alert-dialog {
|
|
2544
|
+
max-width: 28rem;
|
|
2545
|
+
}
|
|
2546
|
+
|
|
2547
|
+
.ui-drawer {
|
|
2548
|
+
position: fixed;
|
|
2549
|
+
inset: auto 0 0;
|
|
2550
|
+
width: min(100%, 42rem);
|
|
2551
|
+
max-width: none;
|
|
2552
|
+
margin: auto auto 0;
|
|
2553
|
+
border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0;
|
|
2554
|
+
}
|
|
2555
|
+
|
|
2556
|
+
.ui-sheet {
|
|
2557
|
+
position: fixed;
|
|
2558
|
+
inset: 0 0 0 auto;
|
|
2559
|
+
width: min(100%, 28rem);
|
|
2560
|
+
height: 100%;
|
|
2561
|
+
max-height: none;
|
|
2562
|
+
margin: 0 0 0 auto;
|
|
2563
|
+
border-radius: 0;
|
|
2564
|
+
border-block: 0;
|
|
2565
|
+
border-inline-end: 0;
|
|
2566
|
+
}
|
|
2567
|
+
|
|
2568
|
+
.ui-popover,
|
|
2569
|
+
.ui-hover-card,
|
|
2570
|
+
.ui-menu[data-ui-dropdown-menu] {
|
|
2571
|
+
position: relative;
|
|
2572
|
+
display: inline-grid;
|
|
2573
|
+
gap: 0.5rem;
|
|
2574
|
+
align-items: start;
|
|
2575
|
+
}
|
|
2576
|
+
|
|
2577
|
+
.ui-popover > :where(div, section, article, form, [role="dialog"]),
|
|
2578
|
+
.ui-hover-card > :where(div, section, article, [role="tooltip"]),
|
|
2579
|
+
.ui-menu[data-ui-dropdown-menu] > [role="menu"] {
|
|
2580
|
+
position: absolute;
|
|
2581
|
+
z-index: 50;
|
|
2582
|
+
top: calc(100% + 0.5rem);
|
|
2305
2583
|
left: 0;
|
|
2306
2584
|
min-width: min(18rem, calc(100vw - 2rem));
|
|
2307
|
-
border: 1px solid hsl(var(--line));
|
|
2585
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2308
2586
|
border-radius: var(--ui-radius);
|
|
2309
2587
|
background: hsl(var(--surface));
|
|
2310
2588
|
color: hsl(var(--ink-soft));
|
|
@@ -2355,7 +2633,7 @@
|
|
|
2355
2633
|
.ui-menu {
|
|
2356
2634
|
margin: 0;
|
|
2357
2635
|
list-style: none;
|
|
2358
|
-
border: 1px solid hsl(var(--line));
|
|
2636
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2359
2637
|
border-radius: var(--ui-radius);
|
|
2360
2638
|
background: hsl(var(--surface));
|
|
2361
2639
|
box-shadow: var(--ui-shadow-md);
|
|
@@ -2366,6 +2644,8 @@
|
|
|
2366
2644
|
|
|
2367
2645
|
.ui-menu[data-ui-dropdown-menu] {
|
|
2368
2646
|
margin: 0;
|
|
2647
|
+
max-width: 100%;
|
|
2648
|
+
min-width: 0;
|
|
2369
2649
|
border: 0;
|
|
2370
2650
|
border-radius: 0;
|
|
2371
2651
|
background: transparent;
|
|
@@ -2373,6 +2653,12 @@
|
|
|
2373
2653
|
padding: 0;
|
|
2374
2654
|
}
|
|
2375
2655
|
|
|
2656
|
+
.ui-menu[data-ui-dropdown-menu] > .ui-menu__trigger {
|
|
2657
|
+
max-width: 100%;
|
|
2658
|
+
white-space: normal;
|
|
2659
|
+
overflow-wrap: anywhere;
|
|
2660
|
+
}
|
|
2661
|
+
|
|
2376
2662
|
.ui-menu :where(a, button, [role="menuitem"]) {
|
|
2377
2663
|
display: flex;
|
|
2378
2664
|
width: 100%;
|
|
@@ -2430,7 +2716,7 @@
|
|
|
2430
2716
|
min-height: var(--ui-context-navigation-min-height);
|
|
2431
2717
|
align-items: center;
|
|
2432
2718
|
gap: var(--ui-context-navigation-gap);
|
|
2433
|
-
border-block: 1px solid hsl(var(--line));
|
|
2719
|
+
border-block: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2434
2720
|
background: hsl(var(--surface));
|
|
2435
2721
|
padding: var(--ui-context-navigation-padding);
|
|
2436
2722
|
}
|
|
@@ -2442,7 +2728,7 @@
|
|
|
2442
2728
|
flex: 0 0 auto;
|
|
2443
2729
|
align-items: center;
|
|
2444
2730
|
padding-inline-end: var(--ui-context-navigation-gap);
|
|
2445
|
-
border-inline-end: 1px solid hsl(var(--line));
|
|
2731
|
+
border-inline-end: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2446
2732
|
}
|
|
2447
2733
|
|
|
2448
2734
|
.ui-context-navigation > :where(.ui-navigation-menu, lumen-navigation-menu) {
|
|
@@ -2471,7 +2757,7 @@
|
|
|
2471
2757
|
display: inline-flex;
|
|
2472
2758
|
align-items: center;
|
|
2473
2759
|
gap: 0.25rem;
|
|
2474
|
-
border: 1px solid hsl(var(--line));
|
|
2760
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2475
2761
|
border-radius: var(--ui-radius);
|
|
2476
2762
|
background: hsl(var(--surface));
|
|
2477
2763
|
padding: 0.25rem;
|
|
@@ -2593,7 +2879,7 @@
|
|
|
2593
2879
|
min-height: 2.25rem;
|
|
2594
2880
|
align-items: center;
|
|
2595
2881
|
justify-content: center;
|
|
2596
|
-
border: 1px solid hsl(var(--line));
|
|
2882
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2597
2883
|
border-radius: var(--ui-radius-sm);
|
|
2598
2884
|
background: hsl(var(--surface));
|
|
2599
2885
|
color: hsl(var(--ink-soft));
|
|
@@ -2639,10 +2925,13 @@
|
|
|
2639
2925
|
|
|
2640
2926
|
.ui-tabs {
|
|
2641
2927
|
display: grid;
|
|
2928
|
+
min-width: 0;
|
|
2642
2929
|
gap: 1rem;
|
|
2643
2930
|
}
|
|
2644
2931
|
|
|
2645
2932
|
.ui-tabs [role="tablist"] {
|
|
2933
|
+
box-sizing: border-box;
|
|
2934
|
+
min-width: 0;
|
|
2646
2935
|
display: inline-flex;
|
|
2647
2936
|
width: fit-content;
|
|
2648
2937
|
max-width: 100%;
|
|
@@ -2650,7 +2939,7 @@
|
|
|
2650
2939
|
gap: 0.25rem;
|
|
2651
2940
|
overflow-x: auto;
|
|
2652
2941
|
overscroll-behavior-inline: contain;
|
|
2653
|
-
border: 1px solid hsl(var(--line));
|
|
2942
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2654
2943
|
border-radius: var(--ui-radius);
|
|
2655
2944
|
background: hsl(var(--surface-muted));
|
|
2656
2945
|
padding: 0.25rem;
|
|
@@ -2690,7 +2979,7 @@
|
|
|
2690
2979
|
|
|
2691
2980
|
display: block;
|
|
2692
2981
|
overflow: hidden;
|
|
2693
|
-
border: 1px solid hsl(var(--line));
|
|
2982
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2694
2983
|
border-radius: var(--ui-radius-lg);
|
|
2695
2984
|
background: hsl(var(--surface-muted));
|
|
2696
2985
|
}
|
|
@@ -2700,7 +2989,7 @@
|
|
|
2700
2989
|
width: auto;
|
|
2701
2990
|
gap: 0.25rem;
|
|
2702
2991
|
border: 0;
|
|
2703
|
-
border-bottom: 1px solid hsl(var(--line));
|
|
2992
|
+
border-bottom: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2704
2993
|
border-radius: 0;
|
|
2705
2994
|
background: hsl(var(--surface));
|
|
2706
2995
|
padding: var(--ui-code-tabs-list-padding);
|
|
@@ -2711,7 +3000,7 @@
|
|
|
2711
3000
|
border: 0;
|
|
2712
3001
|
border-radius: var(--ui-radius-sm);
|
|
2713
3002
|
background: transparent;
|
|
2714
|
-
color: hsl(var(--ink-
|
|
3003
|
+
color: hsl(var(--ink-soft));
|
|
2715
3004
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
|
2716
3005
|
font-size: 0.8125rem;
|
|
2717
3006
|
font-weight: 500;
|
|
@@ -2783,7 +3072,7 @@
|
|
|
2783
3072
|
|
|
2784
3073
|
width: 100%;
|
|
2785
3074
|
overflow-x: auto;
|
|
2786
|
-
border: 1px solid hsl(var(--line));
|
|
3075
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2787
3076
|
border-radius: var(--ui-radius);
|
|
2788
3077
|
background: hsl(var(--surface));
|
|
2789
3078
|
}
|
|
@@ -2817,6 +3106,15 @@
|
|
|
2817
3106
|
white-space: nowrap;
|
|
2818
3107
|
}
|
|
2819
3108
|
|
|
3109
|
+
.ui-table-wrap--records thead:focus-within {
|
|
3110
|
+
position: static;
|
|
3111
|
+
width: auto;
|
|
3112
|
+
height: auto;
|
|
3113
|
+
overflow: visible;
|
|
3114
|
+
clip-path: none;
|
|
3115
|
+
white-space: normal;
|
|
3116
|
+
}
|
|
3117
|
+
|
|
2820
3118
|
.ui-table-wrap--records tbody tr {
|
|
2821
3119
|
display: grid;
|
|
2822
3120
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
|
|
@@ -2825,7 +3123,7 @@
|
|
|
2825
3123
|
}
|
|
2826
3124
|
|
|
2827
3125
|
.ui-table-wrap--records tbody tr + tr {
|
|
2828
|
-
border-top: 1px solid hsl(var(--line));
|
|
3126
|
+
border-top: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2829
3127
|
}
|
|
2830
3128
|
|
|
2831
3129
|
.ui-table-wrap--records tbody td {
|
|
@@ -2851,9 +3149,24 @@
|
|
|
2851
3149
|
}
|
|
2852
3150
|
}
|
|
2853
3151
|
|
|
3152
|
+
.ui-data-table__sort-controls,
|
|
3153
|
+
.ui-filter-bar__controls,
|
|
3154
|
+
.ui-filter-bar__active {
|
|
3155
|
+
display: flex;
|
|
3156
|
+
flex-wrap: wrap;
|
|
3157
|
+
align-items: end;
|
|
3158
|
+
gap: var(--ui-space-related, 0.75rem);
|
|
3159
|
+
}
|
|
3160
|
+
|
|
3161
|
+
.ui-data-table__sort-controls .ui-field,
|
|
3162
|
+
.ui-filter-bar__controls > * {
|
|
3163
|
+
flex: 1 1 12rem;
|
|
3164
|
+
min-width: 0;
|
|
3165
|
+
}
|
|
3166
|
+
|
|
2854
3167
|
.ui-table-wrap th,
|
|
2855
3168
|
.ui-data-table th {
|
|
2856
|
-
border-bottom: 1px solid hsl(var(--line));
|
|
3169
|
+
border-bottom: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2857
3170
|
color: hsl(var(--ink));
|
|
2858
3171
|
font-weight: 650;
|
|
2859
3172
|
padding: var(--ui-table-cell-padding);
|
|
@@ -2955,7 +3268,7 @@
|
|
|
2955
3268
|
.ui-scroll-area {
|
|
2956
3269
|
max-height: min(18rem, 60vh);
|
|
2957
3270
|
overflow: auto;
|
|
2958
|
-
border: 1px solid hsl(var(--line));
|
|
3271
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2959
3272
|
border-radius: var(--ui-radius);
|
|
2960
3273
|
background: hsl(var(--surface));
|
|
2961
3274
|
color: hsl(var(--ink-soft));
|
|
@@ -2967,7 +3280,7 @@
|
|
|
2967
3280
|
min-height: 12rem;
|
|
2968
3281
|
min-width: 14rem;
|
|
2969
3282
|
overflow: hidden;
|
|
2970
|
-
border: 1px solid hsl(var(--line));
|
|
3283
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2971
3284
|
border-radius: var(--ui-radius);
|
|
2972
3285
|
background: hsl(var(--surface));
|
|
2973
3286
|
color: hsl(var(--ink-soft));
|
|
@@ -3033,7 +3346,7 @@
|
|
|
3033
3346
|
width: min(var(--ui-sidebar-width), 100%);
|
|
3034
3347
|
flex-direction: column;
|
|
3035
3348
|
gap: var(--ui-sidebar-gap);
|
|
3036
|
-
border: 1px solid hsl(var(--line));
|
|
3349
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
3037
3350
|
border-radius: var(--ui-radius-lg);
|
|
3038
3351
|
background: hsl(var(--surface));
|
|
3039
3352
|
box-shadow: var(--ui-shadow-sm);
|
|
@@ -3210,7 +3523,7 @@
|
|
|
3210
3523
|
min-width: 0;
|
|
3211
3524
|
min-height: var(--ui-kanban-column-min-height);
|
|
3212
3525
|
padding: 0.875rem;
|
|
3213
|
-
border: 1px solid hsl(var(--line));
|
|
3526
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
3214
3527
|
border-radius: var(--ui-radius-lg);
|
|
3215
3528
|
background: hsl(var(--surface-muted));
|
|
3216
3529
|
scroll-snap-align: start;
|
|
@@ -3269,12 +3582,12 @@
|
|
|
3269
3582
|
--ui-code-header-bg: hsl(var(--surface) / 0.72);
|
|
3270
3583
|
--ui-code-inline-bg: hsl(var(--brand-soft));
|
|
3271
3584
|
--ui-code-inline-fg: hsl(var(--brand-solid));
|
|
3272
|
-
--ui-code-muted: hsl(var(--ink-
|
|
3273
|
-
--ui-code-token-accent: hsl(var(--
|
|
3274
|
-
--ui-code-token-comment: hsl(var(--ink-
|
|
3275
|
-
--ui-code-token-keyword: hsl(var(--brand));
|
|
3276
|
-
--ui-code-token-string: hsl(var(--
|
|
3277
|
-
--ui-code-token-symbol: hsl(var(--
|
|
3585
|
+
--ui-code-muted: hsl(var(--ink-soft));
|
|
3586
|
+
--ui-code-token-accent: hsl(var(--brand-solid));
|
|
3587
|
+
--ui-code-token-comment: hsl(var(--ink-soft));
|
|
3588
|
+
--ui-code-token-keyword: hsl(var(--brand-solid));
|
|
3589
|
+
--ui-code-token-string: hsl(var(--ink-soft));
|
|
3590
|
+
--ui-code-token-symbol: hsl(var(--ink-soft));
|
|
3278
3591
|
--ui-code-token-type: hsl(var(--brand-solid));
|
|
3279
3592
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
|
3280
3593
|
}
|
|
@@ -3579,7 +3892,7 @@
|
|
|
3579
3892
|
display: inline-flex;
|
|
3580
3893
|
min-height: 1.35rem;
|
|
3581
3894
|
align-items: center;
|
|
3582
|
-
border: 1px solid hsl(var(--line));
|
|
3895
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
3583
3896
|
border-radius: 0.35rem;
|
|
3584
3897
|
background: hsl(var(--surface-muted));
|
|
3585
3898
|
color: hsl(var(--ink));
|
|
@@ -3625,7 +3938,7 @@
|
|
|
3625
3938
|
flex-shrink: 0;
|
|
3626
3939
|
place-items: center;
|
|
3627
3940
|
overflow: hidden;
|
|
3628
|
-
border: 1px solid hsl(var(--line));
|
|
3941
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
3629
3942
|
border-radius: 999px;
|
|
3630
3943
|
background: hsl(var(--surface-muted));
|
|
3631
3944
|
color: hsl(var(--ink));
|
|
@@ -3658,7 +3971,7 @@
|
|
|
3658
3971
|
min-width: 0;
|
|
3659
3972
|
align-items: center;
|
|
3660
3973
|
gap: 0.75rem;
|
|
3661
|
-
border: 1px solid hsl(var(--line));
|
|
3974
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
3662
3975
|
border-radius: var(--ui-radius);
|
|
3663
3976
|
background: hsl(var(--surface));
|
|
3664
3977
|
color: hsl(var(--ink-soft));
|
|
@@ -3670,9 +3983,63 @@
|
|
|
3670
3983
|
border-color: hsl(var(--brand) / 0.42);
|
|
3671
3984
|
}
|
|
3672
3985
|
|
|
3986
|
+
.ui-attachment-list {
|
|
3987
|
+
display: grid;
|
|
3988
|
+
min-width: 0;
|
|
3989
|
+
gap: var(--ui-space-related);
|
|
3990
|
+
margin: 0;
|
|
3991
|
+
padding: 0;
|
|
3992
|
+
list-style: none;
|
|
3993
|
+
}
|
|
3994
|
+
|
|
3995
|
+
.ui-attachment-list > li {
|
|
3996
|
+
min-width: 0;
|
|
3997
|
+
list-style: none;
|
|
3998
|
+
}
|
|
3999
|
+
|
|
4000
|
+
.ui-attachment-list .ui-attachment {
|
|
4001
|
+
flex-wrap: wrap;
|
|
4002
|
+
overflow-wrap: anywhere;
|
|
4003
|
+
}
|
|
4004
|
+
|
|
4005
|
+
.ui-attachment-list .ui-attachment > * {
|
|
4006
|
+
min-width: 0;
|
|
4007
|
+
}
|
|
4008
|
+
|
|
4009
|
+
.ui-attachment-preview {
|
|
4010
|
+
display: grid;
|
|
4011
|
+
min-width: 0;
|
|
4012
|
+
gap: var(--ui-space-related);
|
|
4013
|
+
margin: 0;
|
|
4014
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
4015
|
+
border-radius: var(--ui-radius);
|
|
4016
|
+
padding: var(--ui-space-inset);
|
|
4017
|
+
background: hsl(var(--surface));
|
|
4018
|
+
color: hsl(var(--ink));
|
|
4019
|
+
overflow-wrap: anywhere;
|
|
4020
|
+
}
|
|
4021
|
+
|
|
4022
|
+
.ui-attachment-preview [data-slot="attachment-preview-media"] img {
|
|
4023
|
+
display: block;
|
|
4024
|
+
width: 100%;
|
|
4025
|
+
max-height: 28rem;
|
|
4026
|
+
object-fit: contain;
|
|
4027
|
+
}
|
|
4028
|
+
|
|
4029
|
+
.ui-attachment-preview [data-slot="attachment-preview-fallback"] {
|
|
4030
|
+
margin: 0;
|
|
4031
|
+
color: hsl(var(--ink-muted));
|
|
4032
|
+
}
|
|
4033
|
+
|
|
4034
|
+
.ui-attachment-preview [data-slot="attachment-preview-actions"] {
|
|
4035
|
+
display: flex;
|
|
4036
|
+
flex-wrap: wrap;
|
|
4037
|
+
gap: var(--ui-space-related);
|
|
4038
|
+
}
|
|
4039
|
+
|
|
3673
4040
|
.ui-bubble {
|
|
3674
4041
|
max-width: min(42rem, 100%);
|
|
3675
|
-
border: 1px solid hsl(var(--line));
|
|
4042
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
3676
4043
|
border-radius: 1rem;
|
|
3677
4044
|
background: hsl(var(--surface));
|
|
3678
4045
|
color: hsl(var(--ink-soft));
|
|
@@ -3736,7 +4103,7 @@
|
|
|
3736
4103
|
gap: 0.75rem;
|
|
3737
4104
|
overflow-y: auto;
|
|
3738
4105
|
scroll-behavior: smooth;
|
|
3739
|
-
border: 1px solid hsl(var(--line));
|
|
4106
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
3740
4107
|
border-radius: var(--ui-radius-lg);
|
|
3741
4108
|
background: hsl(var(--surface));
|
|
3742
4109
|
padding: 0.75rem;
|
|
@@ -3745,7 +4112,7 @@
|
|
|
3745
4112
|
.ui-command {
|
|
3746
4113
|
display: grid;
|
|
3747
4114
|
gap: 0.5rem;
|
|
3748
|
-
border: 1px solid hsl(var(--line));
|
|
4115
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
3749
4116
|
border-radius: var(--ui-radius-lg);
|
|
3750
4117
|
background: hsl(var(--surface));
|
|
3751
4118
|
box-shadow: var(--ui-shadow-md);
|
|
@@ -3769,7 +4136,7 @@
|
|
|
3769
4136
|
}
|
|
3770
4137
|
|
|
3771
4138
|
.ui-calendar {
|
|
3772
|
-
border: 1px solid hsl(var(--line));
|
|
4139
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
3773
4140
|
border-radius: var(--ui-radius-lg);
|
|
3774
4141
|
background: hsl(var(--surface));
|
|
3775
4142
|
box-shadow: var(--ui-shadow-sm);
|
|
@@ -3797,7 +4164,7 @@
|
|
|
3797
4164
|
width: 2rem;
|
|
3798
4165
|
height: 2rem;
|
|
3799
4166
|
place-items: center;
|
|
3800
|
-
border: 1px solid hsl(var(--line));
|
|
4167
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
3801
4168
|
border-radius: var(--ui-radius-sm);
|
|
3802
4169
|
background: hsl(var(--surface));
|
|
3803
4170
|
color: hsl(var(--ink-soft));
|
|
@@ -3893,7 +4260,9 @@
|
|
|
3893
4260
|
.ui-input-otp-field {
|
|
3894
4261
|
position: relative;
|
|
3895
4262
|
display: inline-grid;
|
|
3896
|
-
width:
|
|
4263
|
+
width: fit-content;
|
|
4264
|
+
max-width: 100%;
|
|
4265
|
+
min-width: 0;
|
|
3897
4266
|
}
|
|
3898
4267
|
|
|
3899
4268
|
.ui-input-otp {
|
|
@@ -3913,9 +4282,11 @@
|
|
|
3913
4282
|
}
|
|
3914
4283
|
|
|
3915
4284
|
.ui-input-otp__segments {
|
|
3916
|
-
display:
|
|
3917
|
-
|
|
3918
|
-
|
|
4285
|
+
display: grid;
|
|
4286
|
+
grid-auto-flow: column;
|
|
4287
|
+
grid-auto-columns: minmax(0, 2.5rem);
|
|
4288
|
+
gap: clamp(0.25rem, 1vw, 0.45rem);
|
|
4289
|
+
min-width: 0;
|
|
3919
4290
|
}
|
|
3920
4291
|
|
|
3921
4292
|
.ui-input-otp__segments[hidden] {
|
|
@@ -3924,10 +4295,11 @@
|
|
|
3924
4295
|
|
|
3925
4296
|
.ui-input-otp__segment {
|
|
3926
4297
|
display: inline-grid;
|
|
3927
|
-
width:
|
|
4298
|
+
width: 100%;
|
|
4299
|
+
min-width: 0;
|
|
3928
4300
|
min-height: 2.75rem;
|
|
3929
4301
|
place-items: center;
|
|
3930
|
-
border: 1px solid hsl(var(--line));
|
|
4302
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
3931
4303
|
border-radius: var(--ui-radius-sm);
|
|
3932
4304
|
background: hsl(var(--surface));
|
|
3933
4305
|
color: hsl(var(--ink));
|
|
@@ -3958,7 +4330,7 @@
|
|
|
3958
4330
|
.ui-carousel {
|
|
3959
4331
|
position: relative;
|
|
3960
4332
|
overflow: hidden;
|
|
3961
|
-
border: 1px solid hsl(var(--line));
|
|
4333
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
3962
4334
|
border-radius: var(--ui-radius-lg);
|
|
3963
4335
|
background: hsl(var(--surface));
|
|
3964
4336
|
color: hsl(var(--ink));
|
|
@@ -3976,7 +4348,7 @@
|
|
|
3976
4348
|
.ui-carousel [data-ui-carousel-viewport] > * {
|
|
3977
4349
|
min-width: min(18rem, 82%);
|
|
3978
4350
|
scroll-snap-align: start;
|
|
3979
|
-
border: 1px solid hsl(var(--line));
|
|
4351
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
3980
4352
|
border-radius: var(--ui-radius);
|
|
3981
4353
|
background: hsl(var(--surface-muted));
|
|
3982
4354
|
padding: 1rem;
|
|
@@ -3990,23 +4362,19 @@
|
|
|
3990
4362
|
}
|
|
3991
4363
|
|
|
3992
4364
|
.ui-chart {
|
|
4365
|
+
container-type: inline-size;
|
|
3993
4366
|
position: relative;
|
|
3994
|
-
display:
|
|
3995
|
-
|
|
4367
|
+
display: flex;
|
|
4368
|
+
flex-direction: column;
|
|
4369
|
+
gap: 1.25rem;
|
|
3996
4370
|
overflow: hidden;
|
|
3997
|
-
border: 1px solid hsl(var(--line));
|
|
4371
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
3998
4372
|
border-radius: var(--ui-radius-lg);
|
|
3999
|
-
background:
|
|
4000
|
-
repeating-linear-gradient(
|
|
4001
|
-
to bottom,
|
|
4002
|
-
transparent 0,
|
|
4003
|
-
transparent 3.2rem,
|
|
4004
|
-
hsl(var(--line) / 0.55) 3.25rem
|
|
4005
|
-
),
|
|
4006
|
-
linear-gradient(180deg, hsl(var(--surface)), hsl(var(--surface-muted) / 0.72));
|
|
4373
|
+
background: hsl(var(--surface));
|
|
4007
4374
|
color: hsl(var(--ink));
|
|
4008
|
-
box-shadow: var(--
|
|
4009
|
-
padding: 1rem;
|
|
4375
|
+
box-shadow: 0 2px 8px hsl(var(--ink) / 0.025);
|
|
4376
|
+
padding: clamp(1rem, 3vw, 1.5rem);
|
|
4377
|
+
font-variant-numeric: tabular-nums;
|
|
4010
4378
|
}
|
|
4011
4379
|
|
|
4012
4380
|
.ui-chart--bare {
|
|
@@ -4028,7 +4396,19 @@
|
|
|
4028
4396
|
|
|
4029
4397
|
.ui-chart__heading {
|
|
4030
4398
|
display: grid;
|
|
4031
|
-
gap: 0.
|
|
4399
|
+
gap: 0.375rem;
|
|
4400
|
+
}
|
|
4401
|
+
|
|
4402
|
+
.ui-chart__heading h3 {
|
|
4403
|
+
font-size: 0.9375rem;
|
|
4404
|
+
font-weight: 650;
|
|
4405
|
+
letter-spacing: -0.025em;
|
|
4406
|
+
}
|
|
4407
|
+
|
|
4408
|
+
.ui-chart__heading p {
|
|
4409
|
+
color: hsl(var(--ink-soft));
|
|
4410
|
+
font-size: 0.75rem;
|
|
4411
|
+
line-height: 1.6;
|
|
4032
4412
|
}
|
|
4033
4413
|
|
|
4034
4414
|
.ui-chart h2,
|
|
@@ -4039,49 +4419,63 @@
|
|
|
4039
4419
|
|
|
4040
4420
|
.ui-chart [data-ui-chart-value] {
|
|
4041
4421
|
color: hsl(var(--ink));
|
|
4042
|
-
font-size: clamp(1.
|
|
4043
|
-
font-weight:
|
|
4422
|
+
font-size: clamp(1.75rem, 4vw, 2.75rem);
|
|
4423
|
+
font-weight: 650;
|
|
4424
|
+
letter-spacing: -0.055em;
|
|
4044
4425
|
line-height: 1;
|
|
4045
4426
|
}
|
|
4046
4427
|
|
|
4047
|
-
.ui-
|
|
4428
|
+
.ui-chart__plot > svg {
|
|
4048
4429
|
display: block;
|
|
4049
4430
|
width: 100%;
|
|
4050
|
-
|
|
4431
|
+
height: auto;
|
|
4432
|
+
min-height: 0;
|
|
4433
|
+
min-width: 32rem;
|
|
4051
4434
|
color: hsl(var(--brand));
|
|
4052
4435
|
}
|
|
4053
4436
|
|
|
4437
|
+
:is(.ui-line-chart, .ui-bar-chart, .ui-waterfall-chart, .ui-histogram, .ui-heatmap, .ui-scatter-chart, .ui-combo-chart, .ui-range-chart) .ui-chart__plot > svg {
|
|
4438
|
+
min-width: 0;
|
|
4439
|
+
}
|
|
4440
|
+
|
|
4054
4441
|
.ui-chart__plot {
|
|
4055
4442
|
min-width: 0;
|
|
4056
4443
|
overflow-x: auto;
|
|
4444
|
+
overscroll-behavior-inline: contain;
|
|
4445
|
+
scrollbar-width: thin;
|
|
4446
|
+
scrollbar-color: hsl(var(--ink-muted)) hsl(var(--surface-muted));
|
|
4447
|
+
border-radius: var(--ui-radius-sm);
|
|
4448
|
+
}
|
|
4449
|
+
|
|
4450
|
+
.ui-chart__plot:focus-visible {
|
|
4451
|
+
outline: 2px solid hsl(var(--brand));
|
|
4452
|
+
outline-offset: -2px;
|
|
4057
4453
|
}
|
|
4058
4454
|
|
|
4059
4455
|
.ui-chart__empty {
|
|
4060
4456
|
min-height: 10rem;
|
|
4061
4457
|
display: grid;
|
|
4062
4458
|
margin: 0;
|
|
4063
|
-
color: hsl(var(--ink-
|
|
4459
|
+
color: hsl(var(--ink-soft));
|
|
4064
4460
|
place-items: center;
|
|
4065
4461
|
text-align: center;
|
|
4066
4462
|
}
|
|
4067
4463
|
|
|
4068
|
-
.ui-
|
|
4069
|
-
|
|
4070
|
-
}
|
|
4071
|
-
|
|
4072
|
-
.ui-chart svg :where(path, polyline, line) {
|
|
4464
|
+
.ui-chart svg :where(path, polyline, line),
|
|
4465
|
+
.ui-sparkline__line {
|
|
4073
4466
|
vector-effect: non-scaling-stroke;
|
|
4074
4467
|
stroke-linecap: round;
|
|
4075
4468
|
stroke-linejoin: round;
|
|
4076
4469
|
}
|
|
4077
4470
|
|
|
4078
4471
|
.ui-chart figcaption {
|
|
4079
|
-
color: hsl(var(--ink-
|
|
4472
|
+
color: hsl(var(--ink-soft));
|
|
4080
4473
|
font-size: 0.8125rem;
|
|
4081
4474
|
line-height: 1.5;
|
|
4082
4475
|
}
|
|
4083
4476
|
|
|
4084
|
-
.ui-chart__legend
|
|
4477
|
+
.ui-chart__legend,
|
|
4478
|
+
.ui-heatmap__legend {
|
|
4085
4479
|
display: flex;
|
|
4086
4480
|
flex-wrap: wrap;
|
|
4087
4481
|
gap: 0.5rem 1rem;
|
|
@@ -4099,105 +4493,162 @@
|
|
|
4099
4493
|
}
|
|
4100
4494
|
|
|
4101
4495
|
.ui-chart__legend li > span {
|
|
4102
|
-
width: 0.
|
|
4103
|
-
height: 0.
|
|
4104
|
-
border:
|
|
4105
|
-
|
|
4106
|
-
background: color-mix(in srgb, var(--ui-chart-color) 30%, transparent);
|
|
4496
|
+
width: 0.5rem;
|
|
4497
|
+
height: 0.5rem;
|
|
4498
|
+
border-radius: 0.15rem;
|
|
4499
|
+
background: var(--ui-chart-color);
|
|
4107
4500
|
}
|
|
4108
4501
|
|
|
4109
4502
|
.ui-chart__grid line {
|
|
4110
|
-
stroke: hsl(var(--chart-grid) / 0.
|
|
4503
|
+
stroke: hsl(var(--chart-grid) / 0.5);
|
|
4111
4504
|
stroke-width: 1;
|
|
4505
|
+
stroke-dasharray: 2 5;
|
|
4112
4506
|
}
|
|
4113
4507
|
|
|
4114
4508
|
.ui-chart__grid text,
|
|
4115
|
-
.ui-chart__axis-labels text
|
|
4509
|
+
.ui-chart__axis-labels text,
|
|
4510
|
+
.ui-chart__annotation text,
|
|
4511
|
+
.ui-heatmap__missing {
|
|
4116
4512
|
fill: hsl(var(--chart-axis));
|
|
4117
4513
|
font-size: 0.6875rem;
|
|
4118
4514
|
}
|
|
4119
4515
|
|
|
4516
|
+
.ui-chart__annotation text {
|
|
4517
|
+
paint-order: stroke;
|
|
4518
|
+
stroke: hsl(var(--surface));
|
|
4519
|
+
stroke-width: 5px;
|
|
4520
|
+
}
|
|
4521
|
+
|
|
4120
4522
|
.ui-chart__grid text {
|
|
4121
4523
|
dominant-baseline: middle;
|
|
4122
4524
|
text-anchor: end;
|
|
4123
4525
|
}
|
|
4124
4526
|
|
|
4125
|
-
.ui-chart__reference
|
|
4527
|
+
.ui-chart__reference,
|
|
4528
|
+
.ui-chart__crosshair,
|
|
4529
|
+
.ui-chart__annotation line,
|
|
4530
|
+
.ui-waterfall-chart__connector {
|
|
4126
4531
|
stroke: hsl(var(--ink-muted));
|
|
4127
4532
|
stroke-dasharray: 5 5;
|
|
4128
4533
|
stroke-width: 1.5;
|
|
4129
4534
|
}
|
|
4130
4535
|
|
|
4131
|
-
.
|
|
4132
|
-
|
|
4133
|
-
|
|
4134
|
-
font-size: 0.8125rem;
|
|
4135
|
-
padding-block-start: 0.75rem;
|
|
4536
|
+
/* Datum marks remain decorative; the actions disclosure supplies native keyboard controls. */
|
|
4537
|
+
.ui-chart [data-ui-chart-datum] {
|
|
4538
|
+
cursor: pointer;
|
|
4136
4539
|
}
|
|
4137
4540
|
|
|
4138
|
-
.ui-
|
|
4139
|
-
|
|
4140
|
-
|
|
4141
|
-
|
|
4142
|
-
align-items: center;
|
|
4143
|
-
gap: 0.5rem;
|
|
4144
|
-
border: 1px solid hsl(var(--line));
|
|
4145
|
-
border-radius: var(--ui-radius-sm);
|
|
4146
|
-
background: hsl(var(--surface-muted));
|
|
4147
|
-
color: hsl(var(--ink-soft));
|
|
4148
|
-
cursor: pointer;
|
|
4149
|
-
font-weight: 700;
|
|
4150
|
-
list-style: none;
|
|
4151
|
-
padding: 0.5rem 0.75rem;
|
|
4152
|
-
user-select: none;
|
|
4541
|
+
.ui-chart svg .ui-chart__datum-hit {
|
|
4542
|
+
fill: transparent;
|
|
4543
|
+
stroke: none;
|
|
4544
|
+
pointer-events: all;
|
|
4153
4545
|
}
|
|
4154
4546
|
|
|
4155
|
-
|
|
4156
|
-
|
|
4547
|
+
|
|
4548
|
+
.ui-chart__actions {
|
|
4549
|
+
min-width: 0;
|
|
4157
4550
|
}
|
|
4158
4551
|
|
|
4159
|
-
.ui-
|
|
4160
|
-
|
|
4161
|
-
|
|
4552
|
+
.ui-chart__actions summary {
|
|
4553
|
+
cursor: pointer;
|
|
4554
|
+
}
|
|
4555
|
+
|
|
4556
|
+
.ui-chart__actions ul {
|
|
4162
4557
|
display: grid;
|
|
4558
|
+
gap: var(--ui-space-related);
|
|
4559
|
+
padding: 0;
|
|
4560
|
+
list-style: none;
|
|
4561
|
+
}
|
|
4562
|
+
|
|
4563
|
+
.ui-chart__actions .ui-button {
|
|
4564
|
+
height: auto;
|
|
4565
|
+
min-height: 44px;
|
|
4566
|
+
max-width: 100%;
|
|
4567
|
+
white-space: normal;
|
|
4568
|
+
text-align: start;
|
|
4569
|
+
}
|
|
4570
|
+
|
|
4571
|
+
.ui-chart__actions .ui-button__content {
|
|
4572
|
+
min-width: 0;
|
|
4573
|
+
overflow-wrap: anywhere;
|
|
4574
|
+
}
|
|
4575
|
+
|
|
4576
|
+
.ui-chart__data {
|
|
4577
|
+
width: 100%;
|
|
4578
|
+
min-width: 0;
|
|
4579
|
+
align-self: stretch;
|
|
4580
|
+
margin-block-start: auto;
|
|
4581
|
+
border-top: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
4582
|
+
color: hsl(var(--ink-soft));
|
|
4583
|
+
font-size: 0.8125rem;
|
|
4584
|
+
padding-block-start: 0.75rem;
|
|
4585
|
+
}
|
|
4586
|
+
|
|
4587
|
+
.ui-chart__data summary {
|
|
4588
|
+
min-height: 2.75rem;
|
|
4589
|
+
display: flex;
|
|
4590
|
+
align-items: center;
|
|
4591
|
+
gap: 0.75rem;
|
|
4592
|
+
border-radius: var(--ui-radius-sm);
|
|
4593
|
+
color: hsl(var(--ink-soft));
|
|
4594
|
+
cursor: pointer;
|
|
4595
|
+
font-weight: 600;
|
|
4596
|
+
list-style: none;
|
|
4597
|
+
padding: 0.625rem 0.75rem;
|
|
4598
|
+
user-select: none;
|
|
4599
|
+
}
|
|
4600
|
+
|
|
4601
|
+
.ui-chart__data summary::-webkit-details-marker {
|
|
4602
|
+
display: none;
|
|
4603
|
+
}
|
|
4604
|
+
|
|
4605
|
+
.ui-chart__data summary::after {
|
|
4606
|
+
width: 0.4375rem;
|
|
4607
|
+
height: 0.4375rem;
|
|
4163
4608
|
flex: 0 0 auto;
|
|
4164
|
-
|
|
4165
|
-
|
|
4166
|
-
|
|
4167
|
-
|
|
4168
|
-
|
|
4169
|
-
|
|
4170
|
-
place-items: center;
|
|
4609
|
+
margin-inline-start: auto;
|
|
4610
|
+
margin-inline-end: 0.25rem;
|
|
4611
|
+
border-right: 1.5px solid currentColor;
|
|
4612
|
+
border-bottom: 1.5px solid currentColor;
|
|
4613
|
+
content: "";
|
|
4614
|
+
transform: rotate(45deg);
|
|
4171
4615
|
}
|
|
4172
4616
|
|
|
4173
|
-
.ui-chart__data[open] summary::
|
|
4174
|
-
|
|
4617
|
+
.ui-chart__data[open] summary::after {
|
|
4618
|
+
transform: rotate(225deg);
|
|
4175
4619
|
}
|
|
4176
4620
|
|
|
4177
|
-
.ui-chart__data summary:hover
|
|
4178
|
-
|
|
4179
|
-
background: hsl(var(--
|
|
4621
|
+
.ui-chart__data summary:hover,
|
|
4622
|
+
.ui-chart__data[open] summary {
|
|
4623
|
+
background: hsl(var(--surface-muted));
|
|
4180
4624
|
color: hsl(var(--ink));
|
|
4181
4625
|
}
|
|
4182
4626
|
|
|
4183
|
-
.ui-chart__data summary:focus-visible {
|
|
4184
|
-
outline: 2px solid hsl(var(--brand)
|
|
4185
|
-
outline-offset:
|
|
4627
|
+
.ui-chart__data :where(summary, [role="group"]):focus-visible {
|
|
4628
|
+
outline: 2px solid hsl(var(--brand));
|
|
4629
|
+
outline-offset: 2px;
|
|
4186
4630
|
}
|
|
4187
4631
|
|
|
4188
4632
|
.ui-chart__data > div {
|
|
4189
|
-
|
|
4190
|
-
|
|
4633
|
+
max-height: 20rem;
|
|
4634
|
+
overflow: auto;
|
|
4635
|
+
overscroll-behavior: contain;
|
|
4636
|
+
scrollbar-gutter: stable;
|
|
4637
|
+
margin-block-start: 0.5rem;
|
|
4638
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
4639
|
+
border-radius: var(--ui-radius-sm);
|
|
4191
4640
|
}
|
|
4192
4641
|
|
|
4193
4642
|
.ui-chart__data table {
|
|
4194
4643
|
width: 100%;
|
|
4195
|
-
border-collapse:
|
|
4644
|
+
border-collapse: separate;
|
|
4645
|
+
border-spacing: 0;
|
|
4646
|
+
font-variant-numeric: tabular-nums;
|
|
4196
4647
|
}
|
|
4197
4648
|
|
|
4198
4649
|
.ui-chart__data :where(th, td) {
|
|
4199
|
-
border-bottom: 1px solid hsl(var(--line));
|
|
4200
|
-
padding: 0.
|
|
4650
|
+
border-bottom: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
4651
|
+
padding: 0.75rem;
|
|
4201
4652
|
text-align: end;
|
|
4202
4653
|
white-space: nowrap;
|
|
4203
4654
|
}
|
|
@@ -4208,9 +4659,74 @@
|
|
|
4208
4659
|
|
|
4209
4660
|
.ui-chart__data th {
|
|
4210
4661
|
color: hsl(var(--ink));
|
|
4211
|
-
font-weight:
|
|
4662
|
+
font-weight: 600;
|
|
4663
|
+
}
|
|
4664
|
+
|
|
4665
|
+
.ui-chart__data thead th {
|
|
4666
|
+
position: sticky;
|
|
4667
|
+
z-index: 1;
|
|
4668
|
+
top: 0;
|
|
4669
|
+
background: hsl(var(--surface-muted));
|
|
4670
|
+
}
|
|
4671
|
+
|
|
4672
|
+
.ui-chart__data tbody tr:nth-child(even) {
|
|
4673
|
+
background: hsl(var(--surface-muted) / 0.4);
|
|
4674
|
+
}
|
|
4675
|
+
|
|
4676
|
+
.ui-chart__data tbody tr:hover {
|
|
4677
|
+
background: hsl(var(--brand-soft));
|
|
4678
|
+
}
|
|
4679
|
+
|
|
4680
|
+
.ui-chart__data tbody tr:last-child > * {
|
|
4681
|
+
border-bottom: 0;
|
|
4212
4682
|
}
|
|
4213
4683
|
|
|
4684
|
+
.ui-bullet-chart__values,
|
|
4685
|
+
.ui-bullet-chart__ticks { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
|
|
4686
|
+
.ui-bullet-chart__values { flex-wrap: wrap; align-items: end; }
|
|
4687
|
+
.ui-bullet-chart__values > div { display: grid; gap: .25rem; }
|
|
4688
|
+
.ui-bullet-chart__values span,
|
|
4689
|
+
.ui-bullet-chart__ticks,
|
|
4690
|
+
.ui-bullet-chart__ranges { color: hsl(var(--ink-soft)); font-size: .75rem; }
|
|
4691
|
+
.ui-bullet-chart__values > div > strong { font-size: clamp(2rem, 5vw, 3rem); line-height: 1; letter-spacing: -.04em; }
|
|
4692
|
+
.ui-bullet-chart__values p { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; font-size: .875rem; }
|
|
4693
|
+
.ui-bullet-chart__values strong,
|
|
4694
|
+
.ui-bullet-chart__ticks,
|
|
4695
|
+
.ui-bullet-chart__ranges { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
|
|
4696
|
+
.ui-bullet-chart__plot { padding-block: 1rem .25rem; }
|
|
4697
|
+
.ui-bullet-chart__track { position: relative; height: 2.5rem; background: hsl(var(--surface-muted)); border-radius: .375rem; }
|
|
4698
|
+
.ui-bullet-chart__range,
|
|
4699
|
+
.ui-bullet-chart__bar { position: absolute; background: var(--ui-chart-color); }
|
|
4700
|
+
.ui-bullet-chart__range { inset-block: 0; box-shadow: inset -1px 0 hsl(var(--surface)); }
|
|
4701
|
+
.ui-bullet-chart__range:first-child { border-radius: .375rem 0 0 .375rem; }
|
|
4702
|
+
.ui-bullet-chart__bar { top: .75rem; height: 1rem; border-radius: .25rem; box-shadow: 0 1px 2px hsl(var(--ink) / .12); }
|
|
4703
|
+
.ui-bullet-chart__target { position: absolute; top: -.375rem; bottom: -.375rem; width: 3px; transform: translateX(-50%); background: hsl(var(--ink)); box-shadow: 0 0 0 2px hsl(var(--surface)); border-radius: 1px; }
|
|
4704
|
+
.ui-bullet-chart__target::before,
|
|
4705
|
+
.ui-bullet-chart__target::after { content: ""; position: absolute; left: -3px; width: 9px; height: 3px; background: inherit; border-radius: 1px; }
|
|
4706
|
+
.ui-bullet-chart__target::before { top: 0; }
|
|
4707
|
+
.ui-bullet-chart__target::after { bottom: 0; }
|
|
4708
|
+
.ui-bullet-chart__target-key { width: 3px; height: 1rem; background: hsl(var(--ink)); flex: none; }
|
|
4709
|
+
.ui-bullet-chart__ticks { margin-top: 1rem; }
|
|
4710
|
+
.ui-bullet-chart__ticks > span { flex: 1; min-width: 0; }
|
|
4711
|
+
.ui-bullet-chart__ticks > span:nth-child(2) { text-align: center; }
|
|
4712
|
+
.ui-bullet-chart__ticks > span:last-child { text-align: end; }
|
|
4713
|
+
.ui-bullet-chart__ranges { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; list-style: none; margin: 0; padding: 0; }
|
|
4714
|
+
.ui-bullet-chart__ranges li { flex: 1 1 5rem; display: grid; gap: .25rem; padding-top: .5rem; border-top: 3px solid color-mix(in srgb, var(--ui-chart-color, hsl(var(--ink-soft))) 25%, hsl(var(--surface))); }
|
|
4715
|
+
.ui-bullet-chart__ranges li > span:first-child { color: hsl(var(--ink)); font-weight: 600; }
|
|
4716
|
+
|
|
4717
|
+
.ui-comparison-chart__legend, .ui-comparison-chart__label { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem 1.5rem; flex-wrap: wrap; }
|
|
4718
|
+
.ui-comparison-chart__legend { color: hsl(var(--ink-soft)); font-size: .75rem; }
|
|
4719
|
+
.ui-comparison-chart__rows { display: grid; gap: 1.25rem; list-style: none; margin: 0; padding: .5rem; }
|
|
4720
|
+
.ui-comparison-chart__label { font-size: .875rem; overflow-wrap: anywhere; }
|
|
4721
|
+
.ui-comparison-chart__label > span:last-child { font-variant-numeric: tabular-nums; color: hsl(var(--ink-soft)); }
|
|
4722
|
+
.ui-comparison-chart__label strong { color: hsl(var(--ink)); }
|
|
4723
|
+
.ui-comparison-chart__track { position: relative; height: 1.5rem; margin-top: .25rem; }
|
|
4724
|
+
.ui-comparison-chart__track::before { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - .5px); height: 1px; background: hsl(var(--line)); }
|
|
4725
|
+
.ui-comparison-chart__connector { position: absolute; height: 4px; top: calc(50% - 2px); background: color-mix(in srgb, var(--ui-chart-color) 50%, hsl(var(--surface))); border-radius: 2px; }
|
|
4726
|
+
.ui-comparison-chart__dot, .ui-comparison-chart__reference { position: absolute; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; box-sizing: border-box; }
|
|
4727
|
+
.ui-comparison-chart__dot { width: 14px; height: 14px; background: var(--ui-chart-color); border: 2px solid hsl(var(--surface)); box-shadow: 0 0 0 1px var(--ui-chart-color); }
|
|
4728
|
+
.ui-comparison-chart__reference { width: 10px; height: 10px; background: hsl(var(--surface)); border: 2px solid var(--ui-chart-color); }
|
|
4729
|
+
|
|
4214
4730
|
.ui-chart-tone--series-1 {
|
|
4215
4731
|
--ui-chart-color: hsl(var(--chart-series-1));
|
|
4216
4732
|
}
|
|
@@ -4264,11 +4780,12 @@
|
|
|
4264
4780
|
}
|
|
4265
4781
|
|
|
4266
4782
|
.ui-chart-tone--neutral {
|
|
4267
|
-
--ui-chart-color: hsl(var(--ink-
|
|
4783
|
+
--ui-chart-color: hsl(var(--ink-soft));
|
|
4268
4784
|
}
|
|
4269
4785
|
|
|
4270
4786
|
.ui-bar-chart__marks rect {
|
|
4271
4787
|
fill: var(--ui-chart-color);
|
|
4788
|
+
rx: 3px;
|
|
4272
4789
|
}
|
|
4273
4790
|
|
|
4274
4791
|
.ui-scatter-chart__marks circle {
|
|
@@ -4280,9 +4797,150 @@
|
|
|
4280
4797
|
.ui-heatmap__cells rect {
|
|
4281
4798
|
fill: hsl(var(--chart-sequential-high));
|
|
4282
4799
|
stroke: hsl(var(--canvas));
|
|
4283
|
-
stroke-width:
|
|
4800
|
+
stroke-width: 2px;
|
|
4801
|
+
rx: 4px;
|
|
4802
|
+
}
|
|
4803
|
+
|
|
4804
|
+
.ui-chart__content {
|
|
4805
|
+
display: grid;
|
|
4806
|
+
min-width: 0;
|
|
4807
|
+
gap: 1rem;
|
|
4808
|
+
}
|
|
4809
|
+
|
|
4810
|
+
.ui-chart [hidden] {
|
|
4811
|
+
display: none;
|
|
4812
|
+
}
|
|
4813
|
+
|
|
4814
|
+
.ui-chart__legend button {
|
|
4815
|
+
min-height: 2rem;
|
|
4816
|
+
gap: 0.5rem;
|
|
4817
|
+
border: 1px solid hsl(var(--line) / 0.65);
|
|
4818
|
+
border-radius: 999px;
|
|
4819
|
+
background: hsl(var(--surface));
|
|
4820
|
+
padding: 0.25rem 0.625rem;
|
|
4821
|
+
font-size: 0.6875rem;
|
|
4822
|
+
}
|
|
4823
|
+
|
|
4824
|
+
.ui-chart__legend button::before {
|
|
4825
|
+
width: 0.4rem;
|
|
4826
|
+
height: 0.4rem;
|
|
4827
|
+
border-radius: 50%;
|
|
4828
|
+
background: var(--ui-chart-color);
|
|
4829
|
+
content: "";
|
|
4830
|
+
}
|
|
4831
|
+
|
|
4832
|
+
.ui-chart__legend button[aria-pressed="false"] {
|
|
4833
|
+
opacity: 0.55;
|
|
4834
|
+
text-decoration: line-through;
|
|
4835
|
+
}
|
|
4836
|
+
|
|
4837
|
+
.ui-chart__inspection {
|
|
4838
|
+
position: absolute;
|
|
4839
|
+
z-index: 2;
|
|
4840
|
+
inset: var(--ui-chart-inspection-y, 7rem) auto auto var(--ui-chart-inspection-x, 1.5rem);
|
|
4841
|
+
max-width: calc(100% - 3rem);
|
|
4842
|
+
min-width: min(12rem, 70%);
|
|
4843
|
+
border: 1px solid hsl(var(--line));
|
|
4844
|
+
border-radius: var(--ui-radius);
|
|
4845
|
+
background: hsl(var(--surface));
|
|
4846
|
+
box-shadow: 0 8px 24px hsl(var(--ink) / 0.12);
|
|
4847
|
+
padding: 0.875rem;
|
|
4848
|
+
font-size: 0.75rem;
|
|
4849
|
+
pointer-events: none;
|
|
4850
|
+
}
|
|
4851
|
+
|
|
4852
|
+
.ui-chart__inspection > div {
|
|
4853
|
+
display: grid;
|
|
4854
|
+
gap: 0.625rem;
|
|
4855
|
+
}
|
|
4856
|
+
|
|
4857
|
+
.ui-chart__inspection strong {
|
|
4858
|
+
color: hsl(var(--ink-soft));
|
|
4859
|
+
font-size: 0.6875rem;
|
|
4860
|
+
font-weight: 500;
|
|
4284
4861
|
}
|
|
4285
4862
|
|
|
4863
|
+
.ui-chart__inspection [data-ui-chart-series-value]:not([hidden]) {
|
|
4864
|
+
display: flex;
|
|
4865
|
+
align-items: center;
|
|
4866
|
+
gap: 0.5rem;
|
|
4867
|
+
}
|
|
4868
|
+
|
|
4869
|
+
.ui-chart__inspection b {
|
|
4870
|
+
margin-inline-start: auto;
|
|
4871
|
+
font-weight: 650;
|
|
4872
|
+
}
|
|
4873
|
+
|
|
4874
|
+
.ui-chart__inspection i {
|
|
4875
|
+
width: 0.4rem;
|
|
4876
|
+
height: 0.4rem;
|
|
4877
|
+
border-radius: 50%;
|
|
4878
|
+
background: var(--ui-chart-color);
|
|
4879
|
+
}
|
|
4880
|
+
|
|
4881
|
+
.ui-chart__crosshair {
|
|
4882
|
+
pointer-events: none;
|
|
4883
|
+
stroke: hsl(var(--chart-selection));
|
|
4884
|
+
}
|
|
4885
|
+
|
|
4886
|
+
.ui-chart__annotation line {
|
|
4887
|
+
stroke: var(--ui-chart-color);
|
|
4888
|
+
}
|
|
4889
|
+
|
|
4890
|
+
.ui-heatmap__scale {
|
|
4891
|
+
position: relative;
|
|
4892
|
+
width: 8rem;
|
|
4893
|
+
height: 0.5rem;
|
|
4894
|
+
border-radius: 999px;
|
|
4895
|
+
}
|
|
4896
|
+
|
|
4897
|
+
.ui-heatmap__scale span {
|
|
4898
|
+
position: absolute;
|
|
4899
|
+
top: 0.75rem;
|
|
4900
|
+
transform: translateX(-50%);
|
|
4901
|
+
}
|
|
4902
|
+
|
|
4903
|
+
.ui-heatmap__legend {
|
|
4904
|
+
align-items: center;
|
|
4905
|
+
gap: 0.5rem;
|
|
4906
|
+
padding-block-end: 1rem;
|
|
4907
|
+
font-size: 0.6875rem;
|
|
4908
|
+
}
|
|
4909
|
+
|
|
4910
|
+
.ui-heatmap__legend > :last-child {
|
|
4911
|
+
margin-inline-start: auto;
|
|
4912
|
+
}
|
|
4913
|
+
|
|
4914
|
+
.ui-chart__axis-title {
|
|
4915
|
+
color: hsl(var(--ink-soft));
|
|
4916
|
+
font-size: 0.6875rem;
|
|
4917
|
+
}
|
|
4918
|
+
|
|
4919
|
+
@container (width < 480px) {
|
|
4920
|
+
.ui-bar-chart :is(.ui-chart__grid, .ui-chart__axis-labels) text {
|
|
4921
|
+
font-size: 1.125rem;
|
|
4922
|
+
}
|
|
4923
|
+
|
|
4924
|
+
.ui-chart__grid text,
|
|
4925
|
+
.ui-chart__axis-labels text,
|
|
4926
|
+
.ui-chart__annotation text,
|
|
4927
|
+
.ui-heatmap__missing {
|
|
4928
|
+
font-size: 0.875rem;
|
|
4929
|
+
}
|
|
4930
|
+
|
|
4931
|
+
:is(.ui-line-chart, .ui-waterfall-chart, .ui-histogram, .ui-heatmap, .ui-scatter-chart, .ui-combo-chart, .ui-range-chart)
|
|
4932
|
+
:is(.ui-chart__grid, .ui-chart__axis-labels, .ui-chart__annotation) text {
|
|
4933
|
+
font-size: 1.375rem;
|
|
4934
|
+
}
|
|
4935
|
+
|
|
4936
|
+
:is(.ui-line-chart, .ui-waterfall-chart, .ui-histogram, .ui-heatmap, .ui-scatter-chart, .ui-combo-chart, .ui-range-chart) .ui-chart__axis-labels
|
|
4937
|
+
:is(text:nth-child(even):not(:last-child), text:nth-last-child(2)):not(.ui-heatmap__row-label) {
|
|
4938
|
+
visibility: hidden;
|
|
4939
|
+
}
|
|
4940
|
+
|
|
4941
|
+
}
|
|
4942
|
+
|
|
4943
|
+
|
|
4286
4944
|
.ui-range-chart__area {
|
|
4287
4945
|
fill: color-mix(in srgb, var(--ui-chart-color) 18%, transparent);
|
|
4288
4946
|
stroke: var(--ui-chart-color);
|
|
@@ -4304,7 +4962,7 @@
|
|
|
4304
4962
|
.ui-pie-chart__plot > svg {
|
|
4305
4963
|
z-index: 0;
|
|
4306
4964
|
grid-area: 1 / 1;
|
|
4307
|
-
width: min(100%,
|
|
4965
|
+
width: min(100%, 15rem);
|
|
4308
4966
|
min-width: 0;
|
|
4309
4967
|
min-height: 0;
|
|
4310
4968
|
aspect-ratio: 1;
|
|
@@ -4313,7 +4971,7 @@
|
|
|
4313
4971
|
.ui-pie-chart__slices path {
|
|
4314
4972
|
fill: var(--ui-chart-color);
|
|
4315
4973
|
stroke: hsl(var(--surface));
|
|
4316
|
-
stroke-width:
|
|
4974
|
+
stroke-width: 4;
|
|
4317
4975
|
}
|
|
4318
4976
|
|
|
4319
4977
|
.ui-pie-chart__center {
|
|
@@ -4334,7 +4992,7 @@
|
|
|
4334
4992
|
}
|
|
4335
4993
|
|
|
4336
4994
|
.ui-pie-chart__center span {
|
|
4337
|
-
color: hsl(var(--ink-
|
|
4995
|
+
color: hsl(var(--ink-soft));
|
|
4338
4996
|
font-size: 0.75rem;
|
|
4339
4997
|
line-height: 1.25;
|
|
4340
4998
|
}
|
|
@@ -4348,12 +5006,13 @@
|
|
|
4348
5006
|
|
|
4349
5007
|
.ui-line-chart__area,
|
|
4350
5008
|
.ui-sparkline__area {
|
|
4351
|
-
fill:
|
|
5009
|
+
fill: var(--ui-chart-color);
|
|
5010
|
+
fill-opacity: 0.2;
|
|
5011
|
+
mask-image: linear-gradient(#000, transparent);
|
|
4352
5012
|
stroke: none;
|
|
4353
5013
|
}
|
|
4354
5014
|
|
|
4355
|
-
.ui-line-chart__point
|
|
4356
|
-
.ui-sparkline__endpoint {
|
|
5015
|
+
.ui-line-chart__point {
|
|
4357
5016
|
fill: hsl(var(--surface));
|
|
4358
5017
|
stroke: var(--ui-chart-color);
|
|
4359
5018
|
stroke-width: 2;
|
|
@@ -4381,12 +5040,26 @@
|
|
|
4381
5040
|
}
|
|
4382
5041
|
|
|
4383
5042
|
.ui-sparkline {
|
|
5043
|
+
position: relative;
|
|
4384
5044
|
display: inline-flex;
|
|
4385
5045
|
width: 8rem;
|
|
4386
5046
|
height: 2.5rem;
|
|
4387
5047
|
color: hsl(var(--ink));
|
|
4388
5048
|
}
|
|
4389
5049
|
|
|
5050
|
+
/* Keep the marker circular when the trend SVG stretches to fit its container. */
|
|
5051
|
+
.ui-sparkline__endpoint {
|
|
5052
|
+
position: absolute;
|
|
5053
|
+
box-sizing: border-box;
|
|
5054
|
+
width: 7px;
|
|
5055
|
+
height: 7px;
|
|
5056
|
+
transform: translate(-50%, -50%);
|
|
5057
|
+
border: 2px solid var(--ui-chart-color);
|
|
5058
|
+
border-radius: 50%;
|
|
5059
|
+
background: hsl(var(--surface));
|
|
5060
|
+
pointer-events: none;
|
|
5061
|
+
}
|
|
5062
|
+
|
|
4390
5063
|
.ui-sparkline svg {
|
|
4391
5064
|
display: block;
|
|
4392
5065
|
width: 100%;
|
|
@@ -4447,19 +5120,16 @@
|
|
|
4447
5120
|
}
|
|
4448
5121
|
|
|
4449
5122
|
.ui-typography {
|
|
5123
|
+
overflow-wrap: anywhere;
|
|
4450
5124
|
color: hsl(var(--ink-soft));
|
|
4451
5125
|
line-height: 1.75;
|
|
4452
5126
|
}
|
|
4453
5127
|
|
|
4454
|
-
.ui-typography :where(h1,
|
|
4455
|
-
|
|
4456
|
-
|
|
4457
|
-
|
|
4458
|
-
}
|
|
4459
|
-
|
|
4460
|
-
.ui-typography :where(p, ul, ol, blockquote) {
|
|
4461
|
-
margin-block: 0.85em;
|
|
4462
|
-
}
|
|
5128
|
+
.ui-prose :where(h1,h2,h3,h4,h5,h6),.ui-typography :where(h1,h2,h3,h4,h5,h6){color:hsl(var(--ink));line-height:1.25;margin-block:1.5em 0.5em;}
|
|
5129
|
+
.ui-prose :where(p,ul,ol,blockquote),.ui-typography :where(p,ul,ol,blockquote){margin-block:0 0.85em;}
|
|
5130
|
+
.ui-prose >:where(:first-child),.ui-typography >:where(:first-child){margin-block-start:0;}
|
|
5131
|
+
.ui-prose >:where(:last-child),.ui-typography >:where(:last-child){margin-block-end:0;}
|
|
5132
|
+
.ui-prose :where(li) >:where(ul,ol),.ui-typography :where(li) >:where(ul,ol){margin-block:0.25em 0;}
|
|
4463
5133
|
|
|
4464
5134
|
.ui-typography :where(a) {
|
|
4465
5135
|
color: hsl(var(--brand-solid));
|
|
@@ -4474,7 +5144,7 @@
|
|
|
4474
5144
|
.ui-tree-grid,
|
|
4475
5145
|
.ui-virtual-list,
|
|
4476
5146
|
.ui-date-range-picker {
|
|
4477
|
-
border: 1px solid hsl(var(--line));
|
|
5147
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
4478
5148
|
border-radius: var(--ui-radius-lg);
|
|
4479
5149
|
background: hsl(var(--surface));
|
|
4480
5150
|
color: hsl(var(--ink));
|
|
@@ -4642,7 +5312,7 @@
|
|
|
4642
5312
|
|
|
4643
5313
|
.ui-rich-text-editor select[data-ui-editor-command] {
|
|
4644
5314
|
min-height: 3rem;
|
|
4645
|
-
border: 1px solid hsl(var(--line));
|
|
5315
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
4646
5316
|
border-radius: var(--ui-radius);
|
|
4647
5317
|
background: hsl(var(--surface));
|
|
4648
5318
|
color: hsl(var(--ink));
|
|
@@ -4682,7 +5352,7 @@
|
|
|
4682
5352
|
.ui-schedule :where([data-ui-schedule-slot]),
|
|
4683
5353
|
.ui-tree-grid :where([role="row"]),
|
|
4684
5354
|
.ui-virtual-list > * {
|
|
4685
|
-
border: 1px solid hsl(var(--line));
|
|
5355
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
4686
5356
|
border-radius: var(--ui-radius-sm);
|
|
4687
5357
|
background: hsl(var(--surface-muted) / 0.52);
|
|
4688
5358
|
padding: 0.75rem;
|
|
@@ -4789,7 +5459,7 @@
|
|
|
4789
5459
|
.ui-color-picker {
|
|
4790
5460
|
width: 2.75rem;
|
|
4791
5461
|
height: 2.5rem;
|
|
4792
|
-
border: 1px solid hsl(var(--line));
|
|
5462
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
4793
5463
|
border-radius: var(--ui-radius-sm);
|
|
4794
5464
|
background: hsl(var(--surface));
|
|
4795
5465
|
padding: 0.2rem;
|
|
@@ -4813,7 +5483,7 @@
|
|
|
4813
5483
|
min-height: 1.75rem;
|
|
4814
5484
|
align-items: center;
|
|
4815
5485
|
gap: 0.35rem;
|
|
4816
|
-
border: 1px solid hsl(var(--line));
|
|
5486
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
4817
5487
|
border-radius: 999px;
|
|
4818
5488
|
background: hsl(var(--brand-soft));
|
|
4819
5489
|
color: hsl(var(--ink));
|
|
@@ -4848,7 +5518,7 @@
|
|
|
4848
5518
|
|
|
4849
5519
|
.ui-rich-text-editor :where([contenteditable="true"], textarea, [data-ui-editor-content]) {
|
|
4850
5520
|
min-height: 12rem;
|
|
4851
|
-
border: 1px solid hsl(var(--line));
|
|
5521
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
4852
5522
|
border-radius: var(--ui-radius-sm);
|
|
4853
5523
|
background: hsl(var(--canvas));
|
|
4854
5524
|
padding: 1rem;
|
|
@@ -4878,7 +5548,7 @@
|
|
|
4878
5548
|
display: inline-flex;
|
|
4879
5549
|
width: 2rem;
|
|
4880
5550
|
height: 2rem;
|
|
4881
|
-
border: 1px solid hsl(var(--line));
|
|
5551
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
4882
5552
|
border-radius: 999px;
|
|
4883
5553
|
background: var(--ui-swatch, hsl(var(--brand)));
|
|
4884
5554
|
}
|
|
@@ -4886,7 +5556,7 @@
|
|
|
4886
5556
|
.ui-theme-builder :where([data-ui-theme-output]) {
|
|
4887
5557
|
width: 100%;
|
|
4888
5558
|
min-height: 8rem;
|
|
4889
|
-
border: 1px solid hsl(var(--line));
|
|
5559
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
4890
5560
|
border-radius: var(--ui-radius-sm);
|
|
4891
5561
|
background: hsl(var(--canvas));
|
|
4892
5562
|
color: hsl(var(--ink));
|
|
@@ -4903,6 +5573,13 @@
|
|
|
4903
5573
|
padding: 0.5rem;
|
|
4904
5574
|
}
|
|
4905
5575
|
|
|
5576
|
+
.ui-virtual-list[data-ui-virtual-list-mode="data"] > [data-ui-virtual-list-content] {
|
|
5577
|
+
border: 0;
|
|
5578
|
+
border-radius: 0;
|
|
5579
|
+
background: transparent;
|
|
5580
|
+
padding: 0;
|
|
5581
|
+
}
|
|
5582
|
+
|
|
4906
5583
|
.ui-tree {
|
|
4907
5584
|
display: grid;
|
|
4908
5585
|
gap: 0.125rem;
|
|
@@ -4999,12 +5676,7 @@
|
|
|
4999
5676
|
}
|
|
5000
5677
|
|
|
5001
5678
|
@layer lumen.glass {
|
|
5002
|
-
/*
|
|
5003
|
-
* Liquid Glass layer
|
|
5004
|
-
* Declared after component base styles so glass variants win the cascade.
|
|
5005
|
-
* Recipe: frosted fill + specular top edge + inner ring + soft bottom shading
|
|
5006
|
-
* + refraction tint + layered depth shadows + saturated backdrop blur.
|
|
5007
|
-
* ------------------------------------------------------------------------- */
|
|
5679
|
+
/* Liquid Glass follows base styles: frosted fill, specular edges, refraction and depth. */
|
|
5008
5680
|
|
|
5009
5681
|
.ui-glass,
|
|
5010
5682
|
.ui-glass-subtle,
|
|
@@ -5258,7 +5930,8 @@
|
|
|
5258
5930
|
@media (prefers-reduced-motion: reduce) {
|
|
5259
5931
|
*,
|
|
5260
5932
|
*::before,
|
|
5261
|
-
*::after
|
|
5933
|
+
*::after,
|
|
5934
|
+
*::backdrop {
|
|
5262
5935
|
animation-duration: 1ms !important;
|
|
5263
5936
|
animation-iteration-count: 1 !important;
|
|
5264
5937
|
scroll-behavior: auto !important;
|
|
@@ -5272,11 +5945,7 @@
|
|
|
5272
5945
|
}
|
|
5273
5946
|
}
|
|
5274
5947
|
|
|
5275
|
-
/*
|
|
5276
|
-
* Motion: overlay entry/exit animations
|
|
5277
|
-
* Uses @starting-style + allow-discrete; prefers-reduced-motion collapses
|
|
5278
|
-
* every transition via the global override at the end of this file.
|
|
5279
|
-
* ------------------------------------------------------------------------- */
|
|
5948
|
+
/* Overlay motion uses @starting-style and allow-discrete; reduced-motion overrides follow. */
|
|
5280
5949
|
|
|
5281
5950
|
@layer lumen.components {
|
|
5282
5951
|
.ui-dialog,
|
|
@@ -5495,9 +6164,7 @@
|
|
|
5495
6164
|
}
|
|
5496
6165
|
}
|
|
5497
6166
|
|
|
5498
|
-
/*
|
|
5499
|
-
* Container queries: components respond to their container, not the viewport
|
|
5500
|
-
* ------------------------------------------------------------------------- */
|
|
6167
|
+
/* Container queries adapt components to their container size. */
|
|
5501
6168
|
|
|
5502
6169
|
@layer lumen.components {
|
|
5503
6170
|
.ui-sidebar {
|
|
@@ -5533,12 +6200,7 @@
|
|
|
5533
6200
|
}
|
|
5534
6201
|
}
|
|
5535
6202
|
|
|
5536
|
-
/*
|
|
5537
|
-
* Top-layer mode for floating surfaces
|
|
5538
|
-
* The runtime promotes panels to [popover] and wires anchor-name /
|
|
5539
|
-
* position-anchor inline when the browser supports CSS anchor positioning.
|
|
5540
|
-
* Unsupported browsers keep the absolute-position fallback above.
|
|
5541
|
-
* ------------------------------------------------------------------------- */
|
|
6203
|
+
/* Top-layer panels use popovers and CSS anchors when supported; otherwise absolute positioning. */
|
|
5542
6204
|
|
|
5543
6205
|
@layer lumen.components {
|
|
5544
6206
|
.ui-popover > [popover],
|
|
@@ -5587,10 +6249,7 @@
|
|
|
5587
6249
|
}
|
|
5588
6250
|
}
|
|
5589
6251
|
|
|
5590
|
-
/*
|
|
5591
|
-
* Glass extensions: intensity on wrapper components + pointer-tracked
|
|
5592
|
-
* specular highlight (opt-in via data-ui-glass-track).
|
|
5593
|
-
* ------------------------------------------------------------------------- */
|
|
6252
|
+
/* Glass intensity and pointer-tracked highlights opt in with data-ui-glass-track. */
|
|
5594
6253
|
|
|
5595
6254
|
@layer lumen.glass {
|
|
5596
6255
|
.ui-popover--glass:is(.ui-glass-subtle, .ui-glass-strong),
|
|
@@ -5720,7 +6379,7 @@
|
|
|
5720
6379
|
gap: var(--ui-stat-gap);
|
|
5721
6380
|
padding: var(--ui-stat-padding);
|
|
5722
6381
|
background: hsl(var(--surface));
|
|
5723
|
-
border: 1px solid hsl(var(--line));
|
|
6382
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
5724
6383
|
border-radius: 0.5rem;
|
|
5725
6384
|
}
|
|
5726
6385
|
|
|
@@ -5948,7 +6607,7 @@
|
|
|
5948
6607
|
min-height: 1.75rem;
|
|
5949
6608
|
max-width: 100%;
|
|
5950
6609
|
align-items: center;
|
|
5951
|
-
border: 1px solid hsl(var(--line));
|
|
6610
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
5952
6611
|
border-radius: 999px;
|
|
5953
6612
|
padding: 0.3rem 0.75rem;
|
|
5954
6613
|
background: hsl(var(--surface-muted));
|
|
@@ -5973,7 +6632,7 @@
|
|
|
5973
6632
|
.ui-pill__count {
|
|
5974
6633
|
margin-left: 0.5rem;
|
|
5975
6634
|
padding-left: 0.5rem;
|
|
5976
|
-
border-left: 1px solid hsl(var(--line));
|
|
6635
|
+
border-left: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
5977
6636
|
font-size: 0.75rem;
|
|
5978
6637
|
line-height: 1;
|
|
5979
6638
|
color: hsl(var(--ink-muted));
|
|
@@ -6065,11 +6724,7 @@ a.ui-pill:focus-visible {
|
|
|
6065
6724
|
aspect-ratio: 1 / 1;
|
|
6066
6725
|
}
|
|
6067
6726
|
|
|
6068
|
-
/*
|
|
6069
|
-
Parity components (Stepper, FileUpload, Tour, Anchor, Segmented, Toolbar,
|
|
6070
|
-
Descriptions, Popconfirm, Transfer, Cascader, TreeSelect, Mentions, QRCode,
|
|
6071
|
-
Watermark, Affix, SpeedDial)
|
|
6072
|
-
========================================================================== */
|
|
6727
|
+
/* Additional interactive primitives. */
|
|
6073
6728
|
|
|
6074
6729
|
/* Stepper */
|
|
6075
6730
|
.ui-stepper {
|
|
@@ -6335,7 +6990,7 @@ a.ui-pill:focus-visible {
|
|
|
6335
6990
|
padding: 1rem;
|
|
6336
6991
|
border-radius: 0.75rem;
|
|
6337
6992
|
background: hsl(var(--surface));
|
|
6338
|
-
border: 1px solid hsl(var(--line));
|
|
6993
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
6339
6994
|
box-shadow: 0 12px 32px color-mix(in srgb, hsl(var(--ink)) 22%, transparent);
|
|
6340
6995
|
color: hsl(var(--ink));
|
|
6341
6996
|
}
|
|
@@ -6412,7 +7067,7 @@ a.ui-pill:focus-visible {
|
|
|
6412
7067
|
gap: 0.1875rem;
|
|
6413
7068
|
border-radius: 0.5rem;
|
|
6414
7069
|
background: hsl(var(--surface-strong));
|
|
6415
|
-
border: 1px solid hsl(var(--line));
|
|
7070
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
6416
7071
|
}
|
|
6417
7072
|
.ui-segmented__option {
|
|
6418
7073
|
position: relative;
|
|
@@ -6464,7 +7119,7 @@ a.ui-pill:focus-visible {
|
|
|
6464
7119
|
gap: 0.25rem;
|
|
6465
7120
|
padding: 0.25rem;
|
|
6466
7121
|
border-radius: 0.5rem;
|
|
6467
|
-
border: 1px solid hsl(var(--line));
|
|
7122
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
6468
7123
|
background: hsl(var(--surface));
|
|
6469
7124
|
}
|
|
6470
7125
|
.ui-toolbar--vertical {
|
|
@@ -6479,12 +7134,14 @@ a.ui-pill:focus-visible {
|
|
|
6479
7134
|
grid-template-columns: repeat(var(--ui-descriptions-columns, 1), minmax(0, 1fr));
|
|
6480
7135
|
gap: 1px;
|
|
6481
7136
|
margin: 0;
|
|
6482
|
-
border: 1px solid hsl(var(--line));
|
|
7137
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
6483
7138
|
border-radius: 0.5rem;
|
|
6484
7139
|
overflow: hidden;
|
|
6485
7140
|
background: hsl(var(--line));
|
|
6486
7141
|
}
|
|
6487
7142
|
.ui-descriptions__item {
|
|
7143
|
+
min-width: 0;
|
|
7144
|
+
overflow-wrap: anywhere;
|
|
6488
7145
|
display: flex;
|
|
6489
7146
|
flex-direction: column;
|
|
6490
7147
|
gap: 0.25rem;
|
|
@@ -6492,10 +7149,12 @@ a.ui-pill:focus-visible {
|
|
|
6492
7149
|
background: hsl(var(--surface));
|
|
6493
7150
|
}
|
|
6494
7151
|
.ui-descriptions__term {
|
|
7152
|
+
display: block;
|
|
6495
7153
|
font-size: 0.8125rem;
|
|
6496
|
-
color: hsl(var(--ink-
|
|
7154
|
+
color: hsl(var(--ink-soft));
|
|
6497
7155
|
}
|
|
6498
7156
|
.ui-descriptions__detail {
|
|
7157
|
+
display: block;
|
|
6499
7158
|
margin: 0;
|
|
6500
7159
|
color: hsl(var(--ink));
|
|
6501
7160
|
}
|
|
@@ -6514,7 +7173,7 @@ a.ui-pill:focus-visible {
|
|
|
6514
7173
|
padding: 1rem;
|
|
6515
7174
|
border-radius: 0.5rem;
|
|
6516
7175
|
background: hsl(var(--surface));
|
|
6517
|
-
border: 1px solid hsl(var(--line));
|
|
7176
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
6518
7177
|
box-shadow: 0 10px 28px color-mix(in srgb, hsl(var(--ink)) 18%, transparent);
|
|
6519
7178
|
}
|
|
6520
7179
|
.ui-popconfirm__panel[hidden] {
|
|
@@ -6544,7 +7203,7 @@ a.ui-pill:focus-visible {
|
|
|
6544
7203
|
display: flex;
|
|
6545
7204
|
min-width: 0;
|
|
6546
7205
|
flex-direction: column;
|
|
6547
|
-
border: 1px solid hsl(var(--line));
|
|
7206
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
6548
7207
|
border-radius: var(--ui-radius);
|
|
6549
7208
|
overflow: hidden;
|
|
6550
7209
|
background: hsl(var(--surface));
|
|
@@ -6564,7 +7223,7 @@ a.ui-pill:focus-visible {
|
|
|
6564
7223
|
font-weight: 700;
|
|
6565
7224
|
color: hsl(var(--ink-soft));
|
|
6566
7225
|
background: hsl(var(--surface-muted));
|
|
6567
|
-
border-bottom: 1px solid hsl(var(--line));
|
|
7226
|
+
border-bottom: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
6568
7227
|
}
|
|
6569
7228
|
.ui-transfer__list {
|
|
6570
7229
|
flex: 1 1 auto;
|
|
@@ -6665,7 +7324,7 @@ a.ui-pill:focus-visible {
|
|
|
6665
7324
|
padding: 0.5rem;
|
|
6666
7325
|
border-radius: 0.5rem;
|
|
6667
7326
|
background: hsl(var(--surface));
|
|
6668
|
-
border: 1px solid hsl(var(--line));
|
|
7327
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
6669
7328
|
box-shadow: 0 10px 28px color-mix(in srgb, hsl(var(--ink)) 18%, transparent);
|
|
6670
7329
|
}
|
|
6671
7330
|
.ui-cascader__panel[hidden],
|
|
@@ -6720,7 +7379,7 @@ a.ui-pill:focus-visible {
|
|
|
6720
7379
|
list-style: none;
|
|
6721
7380
|
border-radius: 0.5rem;
|
|
6722
7381
|
background: hsl(var(--surface));
|
|
6723
|
-
border: 1px solid hsl(var(--line));
|
|
7382
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
6724
7383
|
box-shadow: 0 10px 28px color-mix(in srgb, hsl(var(--ink)) 18%, transparent);
|
|
6725
7384
|
}
|
|
6726
7385
|
.ui-mentions__list[hidden] {
|
|
@@ -6757,7 +7416,7 @@ a.ui-pill:focus-visible {
|
|
|
6757
7416
|
height: var(--ui-qr-code-size, 160px);
|
|
6758
7417
|
box-sizing: content-box;
|
|
6759
7418
|
border-radius: 0.5rem;
|
|
6760
|
-
border: 1px solid hsl(var(--line));
|
|
7419
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
6761
7420
|
background: #fff;
|
|
6762
7421
|
}
|
|
6763
7422
|
.ui-qr-code__image {
|
|
@@ -6964,7 +7623,7 @@ a.ui-pill:focus-visible {
|
|
|
6964
7623
|
gap: 0.5rem;
|
|
6965
7624
|
padding: 0.5rem 0.875rem 0.5rem 0.625rem;
|
|
6966
7625
|
border-radius: 9999px;
|
|
6967
|
-
border: 1px solid hsl(var(--line));
|
|
7626
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
6968
7627
|
background: hsl(var(--surface) / 0.96);
|
|
6969
7628
|
color: hsl(var(--ink));
|
|
6970
7629
|
font-size: 0.8125rem;
|
|
@@ -7171,7 +7830,7 @@ a.ui-pill:focus-visible {
|
|
|
7171
7830
|
max-height: 18rem;
|
|
7172
7831
|
overflow: auto;
|
|
7173
7832
|
padding: 0.25rem;
|
|
7174
|
-
border: 1px solid hsl(var(--line));
|
|
7833
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
7175
7834
|
border-radius: var(--ui-radius);
|
|
7176
7835
|
background: hsl(var(--surface));
|
|
7177
7836
|
box-shadow: var(--ui-shadow-sm);
|
|
@@ -7224,128 +7883,47 @@ a.ui-pill:focus-visible {
|
|
|
7224
7883
|
opacity: 0.5;
|
|
7225
7884
|
}
|
|
7226
7885
|
|
|
7227
|
-
.ui-container
|
|
7228
|
-
|
|
7229
|
-
|
|
7230
|
-
}
|
|
7886
|
+
.ui-container{width:min(100% - 2 * var(--ui-container-gutter),var(--ui-container-max,72rem));margin-inline:auto;}
|
|
7887
|
+
.ui-container--sm{--ui-container-max:40rem;}
|
|
7888
|
+
.ui-container--md{--ui-container-max:56rem;}
|
|
7889
|
+
.ui-container--lg{--ui-container-max:72rem;}
|
|
7890
|
+
.ui-container--full{width:100%;max-width:none;}
|
|
7891
|
+
.ui-stack{display:flex;min-width:0;gap:var(--ui-stack-gap,var(--ui-space-group));}
|
|
7892
|
+
.ui-stack--vertical{flex-direction:column;}
|
|
7893
|
+
.ui-stack--horizontal{flex-direction:row;}
|
|
7894
|
+
.ui-stack--wrap{flex-wrap:wrap;}
|
|
7895
|
+
/* Canonical gaps. */ .ui-stack--gap-none,.ui-grid--gap-none{--ui-stack-gap:var(--ui-space-zero);--ui-grid-gap:var(--ui-space-zero);}
|
|
7896
|
+
.ui-stack--gap-xs,.ui-grid--gap-xs{--ui-stack-gap:var(--ui-space-xs);--ui-grid-gap:var(--ui-space-xs);}
|
|
7897
|
+
.ui-stack--gap-sm,.ui-grid--gap-sm{--ui-stack-gap:var(--ui-space-sm);--ui-grid-gap:var(--ui-space-sm);}
|
|
7898
|
+
.ui-stack--gap-md,.ui-grid--gap-md{--ui-stack-gap:var(--ui-space-md);--ui-grid-gap:var(--ui-space-md);}
|
|
7899
|
+
.ui-stack--gap-lg,.ui-grid--gap-lg{--ui-stack-gap:var(--ui-space-lg);--ui-grid-gap:var(--ui-space-lg);}
|
|
7900
|
+
.ui-stack--gap-xl,.ui-grid--gap-xl{--ui-stack-gap:var(--ui-space-xl);--ui-grid-gap:var(--ui-space-xl);}
|
|
7901
|
+
.ui-stack--gap-2xl,.ui-grid--gap-2xl{--ui-stack-gap:var(--ui-space-2xl);--ui-grid-gap:var(--ui-space-2xl);}
|
|
7902
|
+
.ui-stack--gap-3xl,.ui-grid--gap-3xl{--ui-stack-gap:var(--ui-space-3xl);--ui-grid-gap:var(--ui-space-3xl);}
|
|
7903
|
+
.ui-stack--gap-related,.ui-grid--gap-related{--ui-stack-gap:var(--ui-space-related);--ui-grid-gap:var(--ui-space-related);}
|
|
7904
|
+
.ui-stack--gap-group,.ui-grid--gap-group{--ui-stack-gap:var(--ui-space-group);--ui-grid-gap:var(--ui-space-group);}
|
|
7905
|
+
.ui-stack--gap-section,.ui-grid--gap-section{--ui-stack-gap:var(--ui-space-section);--ui-grid-gap:var(--ui-space-section);}
|
|
7906
|
+
.ui-stack >:where(:not(dialog,.ui-drawer,.ui-sheet)),.ui-grid >:where(:not(dialog,.ui-drawer,.ui-sheet)){min-width:0;margin:0;}
|
|
7907
|
+
.ui-stack--align-start{align-items:flex-start;}
|
|
7908
|
+
.ui-stack--align-center{align-items:center;}
|
|
7909
|
+
.ui-stack--align-end{align-items:flex-end;}
|
|
7910
|
+
.ui-stack--align-stretch{align-items:stretch;}
|
|
7911
|
+
.ui-stack--justify-start{justify-content:flex-start;}
|
|
7912
|
+
.ui-stack--justify-center{justify-content:center;}
|
|
7913
|
+
.ui-stack--justify-end{justify-content:flex-end;}
|
|
7914
|
+
.ui-stack--justify-between{justify-content:space-between;}
|
|
7915
|
+
.ui-grid{display:grid;min-width:0;grid-template-columns:repeat( auto-fit,minmax(min(100%,var(--ui-grid-min,16rem)),1fr) );gap:var(--ui-grid-gap,var(--ui-space-group));}
|
|
7231
7916
|
|
|
7232
|
-
.ui-
|
|
7233
|
-
|
|
7917
|
+
.ui-grid--columns-1 {
|
|
7918
|
+
grid-template-columns: repeat(1, minmax(0, 1fr));
|
|
7234
7919
|
}
|
|
7235
7920
|
|
|
7236
|
-
.ui-
|
|
7237
|
-
|
|
7921
|
+
.ui-grid--columns-2 {
|
|
7922
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
7238
7923
|
}
|
|
7239
7924
|
|
|
7240
|
-
.ui-
|
|
7241
|
-
|
|
7242
|
-
}
|
|
7243
|
-
|
|
7244
|
-
.ui-container--full {
|
|
7245
|
-
width: 100%;
|
|
7246
|
-
max-width: none;
|
|
7247
|
-
}
|
|
7248
|
-
|
|
7249
|
-
.ui-stack {
|
|
7250
|
-
display: flex;
|
|
7251
|
-
min-width: 0;
|
|
7252
|
-
gap: var(--ui-stack-gap, 1rem);
|
|
7253
|
-
}
|
|
7254
|
-
|
|
7255
|
-
.ui-stack--vertical {
|
|
7256
|
-
flex-direction: column;
|
|
7257
|
-
}
|
|
7258
|
-
|
|
7259
|
-
.ui-stack--horizontal {
|
|
7260
|
-
flex-direction: row;
|
|
7261
|
-
}
|
|
7262
|
-
|
|
7263
|
-
.ui-stack--wrap {
|
|
7264
|
-
flex-wrap: wrap;
|
|
7265
|
-
}
|
|
7266
|
-
|
|
7267
|
-
.ui-stack--gap-none,
|
|
7268
|
-
.ui-grid--gap-none {
|
|
7269
|
-
--ui-stack-gap: 0;
|
|
7270
|
-
--ui-grid-gap: 0;
|
|
7271
|
-
}
|
|
7272
|
-
|
|
7273
|
-
.ui-stack--gap-sm,
|
|
7274
|
-
.ui-grid--gap-sm {
|
|
7275
|
-
--ui-stack-gap: 0.5rem;
|
|
7276
|
-
--ui-grid-gap: 0.5rem;
|
|
7277
|
-
}
|
|
7278
|
-
|
|
7279
|
-
.ui-stack--gap-md,
|
|
7280
|
-
.ui-grid--gap-md {
|
|
7281
|
-
--ui-stack-gap: 1rem;
|
|
7282
|
-
--ui-grid-gap: 1rem;
|
|
7283
|
-
}
|
|
7284
|
-
|
|
7285
|
-
.ui-stack--gap-lg,
|
|
7286
|
-
.ui-grid--gap-lg {
|
|
7287
|
-
--ui-stack-gap: 1.5rem;
|
|
7288
|
-
--ui-grid-gap: 1.5rem;
|
|
7289
|
-
}
|
|
7290
|
-
|
|
7291
|
-
.ui-stack--gap-xl,
|
|
7292
|
-
.ui-grid--gap-xl {
|
|
7293
|
-
--ui-stack-gap: 2rem;
|
|
7294
|
-
--ui-grid-gap: 2rem;
|
|
7295
|
-
}
|
|
7296
|
-
|
|
7297
|
-
.ui-stack--align-start {
|
|
7298
|
-
align-items: flex-start;
|
|
7299
|
-
}
|
|
7300
|
-
|
|
7301
|
-
.ui-stack--align-center {
|
|
7302
|
-
align-items: center;
|
|
7303
|
-
}
|
|
7304
|
-
|
|
7305
|
-
.ui-stack--align-end {
|
|
7306
|
-
align-items: flex-end;
|
|
7307
|
-
}
|
|
7308
|
-
|
|
7309
|
-
.ui-stack--align-stretch {
|
|
7310
|
-
align-items: stretch;
|
|
7311
|
-
}
|
|
7312
|
-
|
|
7313
|
-
.ui-stack--justify-start {
|
|
7314
|
-
justify-content: flex-start;
|
|
7315
|
-
}
|
|
7316
|
-
|
|
7317
|
-
.ui-stack--justify-center {
|
|
7318
|
-
justify-content: center;
|
|
7319
|
-
}
|
|
7320
|
-
|
|
7321
|
-
.ui-stack--justify-end {
|
|
7322
|
-
justify-content: flex-end;
|
|
7323
|
-
}
|
|
7324
|
-
|
|
7325
|
-
.ui-stack--justify-between {
|
|
7326
|
-
justify-content: space-between;
|
|
7327
|
-
}
|
|
7328
|
-
|
|
7329
|
-
.ui-grid {
|
|
7330
|
-
display: grid;
|
|
7331
|
-
min-width: 0;
|
|
7332
|
-
grid-template-columns: repeat(
|
|
7333
|
-
auto-fit,
|
|
7334
|
-
minmax(min(100%, var(--ui-grid-min, 16rem)), 1fr)
|
|
7335
|
-
);
|
|
7336
|
-
gap: var(--ui-grid-gap, 1rem);
|
|
7337
|
-
}
|
|
7338
|
-
|
|
7339
|
-
.ui-grid--columns-1 {
|
|
7340
|
-
grid-template-columns: repeat(1, minmax(0, 1fr));
|
|
7341
|
-
}
|
|
7342
|
-
|
|
7343
|
-
.ui-grid--columns-2 {
|
|
7344
|
-
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
7345
|
-
}
|
|
7346
|
-
|
|
7347
|
-
.ui-grid--columns-3 {
|
|
7348
|
-
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
7925
|
+
.ui-grid--columns-3 {
|
|
7926
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
7349
7927
|
}
|
|
7350
7928
|
|
|
7351
7929
|
.ui-grid--columns-4 {
|
|
@@ -7385,3 +7963,706 @@ a.ui-pill:focus-visible {
|
|
|
7385
7963
|
white-space: normal;
|
|
7386
7964
|
}
|
|
7387
7965
|
}
|
|
7966
|
+
|
|
7967
|
+
@layer lumen.components {
|
|
7968
|
+
.ui-range-calendar {
|
|
7969
|
+
display: grid;
|
|
7970
|
+
grid-template-columns: 10rem minmax(0, 1fr);
|
|
7971
|
+
gap: 1rem;
|
|
7972
|
+
color: hsl(var(--ink));
|
|
7973
|
+
font-family: var(--ui-font);
|
|
7974
|
+
font-size: .8125rem;
|
|
7975
|
+
}
|
|
7976
|
+
.ui-range-calendar:not(:has(> .ui-range-calendar__presets)) {
|
|
7977
|
+
grid-template-columns: minmax(0, 1fr);
|
|
7978
|
+
}
|
|
7979
|
+
.ui-range-calendar__presets {
|
|
7980
|
+
display: flex;
|
|
7981
|
+
flex-direction: column;
|
|
7982
|
+
gap: .25rem;
|
|
7983
|
+
padding-inline-end: 1rem;
|
|
7984
|
+
border-inline-end: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
7985
|
+
}
|
|
7986
|
+
.ui-range-calendar__presets .ui-button {
|
|
7987
|
+
justify-content: start;
|
|
7988
|
+
min-height: 2.75rem;
|
|
7989
|
+
padding-inline: .75rem;
|
|
7990
|
+
font-size: inherit;
|
|
7991
|
+
font-weight: 500;
|
|
7992
|
+
white-space: normal;
|
|
7993
|
+
text-align: start;
|
|
7994
|
+
}
|
|
7995
|
+
.ui-range-calendar__presets [aria-pressed="true"] {
|
|
7996
|
+
background: hsl(var(--brand-soft));
|
|
7997
|
+
color: hsl(var(--brand));
|
|
7998
|
+
font-weight: 650;
|
|
7999
|
+
}
|
|
8000
|
+
.ui-range-calendar__months { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
|
|
8001
|
+
.ui-range-calendar__month { min-width: 0; }
|
|
8002
|
+
.ui-range-calendar__endpoint {
|
|
8003
|
+
display: grid;
|
|
8004
|
+
gap: .25rem;
|
|
8005
|
+
padding: .625rem .75rem;
|
|
8006
|
+
margin-bottom: .75rem;
|
|
8007
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
8008
|
+
border-radius: .5rem;
|
|
8009
|
+
background: hsl(var(--surface));
|
|
8010
|
+
}
|
|
8011
|
+
.ui-range-calendar__endpoint span { font-size: .75rem; color: hsl(var(--ink-soft)); }
|
|
8012
|
+
.ui-range-calendar__endpoint strong { font-size: .875rem; font-weight: 650; }
|
|
8013
|
+
.ui-range-calendar .ui-calendar { width: 100%; max-width: none; border: 0; padding: 0; box-shadow: none; background: transparent; }
|
|
8014
|
+
.ui-range-calendar .ui-calendar__header { margin-bottom: .5rem; }
|
|
8015
|
+
.ui-range-calendar .ui-calendar__header strong { font-size: .8125rem; font-weight: 650; }
|
|
8016
|
+
.ui-range-calendar .ui-calendar__header button { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; }
|
|
8017
|
+
.ui-range-calendar .ui-calendar__grid { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0 .25rem; }
|
|
8018
|
+
.ui-range-calendar .ui-calendar__grid th { height: 2rem; font-size: .6875rem; font-weight: 500; }
|
|
8019
|
+
.ui-range-calendar .ui-calendar__grid td { height: 2.5rem; padding: 0; text-align: center; border: 0; border-radius: 0; font-size: .8125rem; font-weight: 400; }
|
|
8020
|
+
.ui-range-calendar .ui-calendar__grid td[data-in-range="true"] { background: hsl(var(--brand-soft)); color: hsl(var(--ink)); box-shadow: none; }
|
|
8021
|
+
.ui-range-calendar .ui-calendar__grid td[data-in-range="true"]:first-child { border-start-start-radius: .375rem; border-end-start-radius: .375rem; }
|
|
8022
|
+
.ui-range-calendar .ui-calendar__grid td[data-in-range="true"]:last-child { border-start-end-radius: .375rem; border-end-end-radius: .375rem; }
|
|
8023
|
+
.ui-range-calendar .ui-calendar__grid td[data-selected="true"] { background: hsl(var(--brand-solid)); color: hsl(var(--on-brand)); border-radius: .375rem; font-weight: 650; }
|
|
8024
|
+
.ui-range-calendar [data-ui-calendar-day]:focus-visible { outline: 2px solid hsl(var(--brand)); outline-offset: -2px; }
|
|
8025
|
+
@media (max-width: 640px) {
|
|
8026
|
+
.ui-range-calendar { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
|
|
8027
|
+
.ui-range-calendar__presets { flex-direction: row; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; border-inline-end: 0; border-bottom: var(--ui-border-width, 1px) solid hsl(var(--line)); padding: 0 0 .75rem; }
|
|
8028
|
+
.ui-range-calendar__presets .ui-button { flex-shrink: 0; white-space: nowrap; }
|
|
8029
|
+
.ui-range-calendar__months { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
|
|
8030
|
+
.ui-range-calendar .ui-calendar__grid td { height: 2.75rem; }
|
|
8031
|
+
.ui-range-calendar .ui-calendar__header button { width: 2.75rem; height: 2.75rem; }
|
|
8032
|
+
}
|
|
8033
|
+
}
|
|
8034
|
+
|
|
8035
|
+
@layer lumen.components {
|
|
8036
|
+
.ui-range-input { min-width: 0; }
|
|
8037
|
+
.ui-range-input > .ui-button {
|
|
8038
|
+
width: 100%;
|
|
8039
|
+
min-height: 44px;
|
|
8040
|
+
justify-content: space-between;
|
|
8041
|
+
gap: .75rem;
|
|
8042
|
+
padding-inline: .875rem;
|
|
8043
|
+
font-size: .8125rem;
|
|
8044
|
+
font-weight: 500;
|
|
8045
|
+
color: hsl(var(--ink));
|
|
8046
|
+
}
|
|
8047
|
+
.ui-range-input > .ui-button[aria-expanded="true"] {
|
|
8048
|
+
border-color: hsl(var(--brand));
|
|
8049
|
+
box-shadow: 0 0 0 2px hsl(var(--brand) / .12);
|
|
8050
|
+
}
|
|
8051
|
+
.ui-range-input__value { display: flex; align-items: center; gap: .5rem; min-width: 0; }
|
|
8052
|
+
.ui-range-input__value > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
8053
|
+
.ui-range-input > .ui-button > .ui-button__content { width: 100%; min-width: 0; justify-content: space-between; }
|
|
8054
|
+
.ui-range-input > .ui-button .ui-icon { flex-shrink: 0; color: hsl(var(--ink-muted)); }
|
|
8055
|
+
.ui-range-input__panel {
|
|
8056
|
+
font-family: var(--ui-font);
|
|
8057
|
+
position: fixed;
|
|
8058
|
+
inset: auto;
|
|
8059
|
+
margin: 0;
|
|
8060
|
+
padding: 0;
|
|
8061
|
+
overflow: hidden;
|
|
8062
|
+
background: hsl(var(--surface));
|
|
8063
|
+
color: hsl(var(--ink));
|
|
8064
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
8065
|
+
border-radius: .75rem;
|
|
8066
|
+
box-shadow: 0 12px 32px hsl(var(--ink) / .14);
|
|
8067
|
+
}
|
|
8068
|
+
.ui-range-input__panel:popover-open { display: flex; flex-direction: column; }
|
|
8069
|
+
.ui-range-input__panel::backdrop { background: transparent; }
|
|
8070
|
+
.ui-range-input__body {
|
|
8071
|
+
min-height: 0;
|
|
8072
|
+
padding: 1rem;
|
|
8073
|
+
overflow: auto;
|
|
8074
|
+
overscroll-behavior: contain;
|
|
8075
|
+
scrollbar-width: thin;
|
|
8076
|
+
scrollbar-gutter: stable;
|
|
8077
|
+
}
|
|
8078
|
+
.ui-range-input__panel .ui-range-input__actions {
|
|
8079
|
+
flex-shrink: 0;
|
|
8080
|
+
display: flex;
|
|
8081
|
+
justify-content: flex-end;
|
|
8082
|
+
gap: .5rem;
|
|
8083
|
+
margin: 0;
|
|
8084
|
+
padding: .75rem 1rem;
|
|
8085
|
+
background: hsl(var(--surface));
|
|
8086
|
+
border-top: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
8087
|
+
}
|
|
8088
|
+
.ui-range-input__panel .ui-range-input__actions .ui-button { min-height: 44px; font-size: .8125rem; }
|
|
8089
|
+
.ui-range-input__panel .ui-range-input__summary {
|
|
8090
|
+
margin: .75rem 0 0;
|
|
8091
|
+
color: hsl(var(--ink-soft));
|
|
8092
|
+
font-size: .75rem;
|
|
8093
|
+
font-weight: 500;
|
|
8094
|
+
line-height: 1.5;
|
|
8095
|
+
}
|
|
8096
|
+
.ui-range-input__panel .ui-range-input__summary[data-invalid="true"] { color: hsl(var(--danger)); }
|
|
8097
|
+
.ui-range-input__panel[data-state="open"] { display: flex; flex-direction: column; }
|
|
8098
|
+
@media (max-width: 640px) {
|
|
8099
|
+
.ui-range-input__body { padding: .75rem; }
|
|
8100
|
+
.ui-range-input__actions { padding: .75rem; }
|
|
8101
|
+
.ui-range-input__actions .ui-button { flex: 1; }
|
|
8102
|
+
}
|
|
8103
|
+
}
|
|
8104
|
+
|
|
8105
|
+
@layer lumen.components {
|
|
8106
|
+
.ui-range-calendar .ui-calendar__grid th,
|
|
8107
|
+
.ui-range-calendar .ui-calendar__grid td[data-outside="true"]:not([data-in-range="true"]) {
|
|
8108
|
+
color: hsl(var(--ink-soft));
|
|
8109
|
+
}
|
|
8110
|
+
}
|
|
8111
|
+
|
|
8112
|
+
@layer lumen.components {
|
|
8113
|
+
/* Fixed-height virtual rows retain the complete scroll extent through inert spacers. */
|
|
8114
|
+
.ui-virtual-list[data-ui-range-start] {
|
|
8115
|
+
display: block;
|
|
8116
|
+
overflow-anchor: none;
|
|
8117
|
+
}
|
|
8118
|
+
|
|
8119
|
+
.ui-virtual-list[data-ui-range-start] > :not([data-ui-virtual-list-spacer]) {
|
|
8120
|
+
margin-block: 0;
|
|
8121
|
+
padding-block: 0.5rem;
|
|
8122
|
+
}
|
|
8123
|
+
|
|
8124
|
+
.ui-virtual-list > [data-ui-virtual-list-spacer] {
|
|
8125
|
+
border: 0;
|
|
8126
|
+
border-radius: 0;
|
|
8127
|
+
background: transparent;
|
|
8128
|
+
padding: 0;
|
|
8129
|
+
margin: 0;
|
|
8130
|
+
}
|
|
8131
|
+
|
|
8132
|
+
.ui-change-summary, .ui-filter-bar { display: grid; gap: var(--ui-space-related); min-width: 0; }
|
|
8133
|
+
.ui-change-summary__heading, .ui-change-summary__summary, .ui-filter-bar__results { margin: 0; }
|
|
8134
|
+
.ui-change-summary__list { margin: 0; border: var(--ui-border-width) solid hsl(var(--line)); border-radius: var(--ui-radius); overflow: hidden; }
|
|
8135
|
+
.ui-change-summary__item { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-space-related); padding: var(--ui-space-md); }
|
|
8136
|
+
.ui-change-summary__item + .ui-change-summary__item { border-top: var(--ui-border-width) solid hsl(var(--line)); }
|
|
8137
|
+
.ui-change-summary__item[data-changed="true"] { background: hsl(var(--brand-soft)); }
|
|
8138
|
+
.ui-change-summary__item dt { font-weight: 600; }
|
|
8139
|
+
.ui-change-summary__item dd { margin: 0; overflow-wrap: anywhere; }
|
|
8140
|
+
.ui-change-summary__state, .ui-change-summary__value-label { display: block; font-size: .8125rem; color: hsl(var(--ink-soft)); }
|
|
8141
|
+
.ui-filter-bar summary { cursor: pointer; font-weight: 600; padding-block: var(--ui-space-md); }
|
|
8142
|
+
.ui-filter-bar summary:focus-visible { outline: 2px solid hsl(var(--brand)); outline-offset: 2px; }
|
|
8143
|
+
.ui-filter-bar__results { color: hsl(var(--ink-soft)); }
|
|
8144
|
+
@media (max-width: 48rem) {
|
|
8145
|
+
.ui-change-summary__item { grid-template-columns: 1fr 1fr; }
|
|
8146
|
+
.ui-change-summary__item dt { grid-column: 1 / -1; }
|
|
8147
|
+
}
|
|
8148
|
+
|
|
8149
|
+
.ui-scatter-chart__references rect { fill: hsl(var(--brand)); fill-opacity: 0.08; }
|
|
8150
|
+
.ui-scatter-chart__references line { stroke: hsl(var(--ink-soft)); stroke-width: 1; stroke-dasharray: 4 4; }
|
|
8151
|
+
.ui-scatter-chart__reference-labels { margin: 0; padding-inline-start: 1.5rem; color: hsl(var(--ink-soft)); }
|
|
8152
|
+
}
|
|
8153
|
+
|
|
8154
|
+
/* BEGIN:generated-theme-presets */
|
|
8155
|
+
@layer lumen.tokens {
|
|
8156
|
+
[data-lumen-preset="default"],
|
|
8157
|
+
[data-lumen-preset="default"][data-lumen-scheme="light"] {
|
|
8158
|
+
color-scheme: light;
|
|
8159
|
+
--canvas: 210 24% 98%;
|
|
8160
|
+
--surface: 0 0% 100%;
|
|
8161
|
+
--surface-muted: 210 22% 95%;
|
|
8162
|
+
--surface-strong: 213 18% 88%;
|
|
8163
|
+
--line: 214 17% 84%;
|
|
8164
|
+
--ink: 216 28% 12%;
|
|
8165
|
+
--ink-soft: 215 14% 35%;
|
|
8166
|
+
--ink-muted: 215 10% 50%;
|
|
8167
|
+
--brand: 201 96% 32%;
|
|
8168
|
+
--brand-solid: 201 96% 28%;
|
|
8169
|
+
--brand-soft: 198 64% 92%;
|
|
8170
|
+
--on-brand: 0 0% 100%;
|
|
8171
|
+
--accent: 169 78% 33%;
|
|
8172
|
+
--success: 142 76% 36%;
|
|
8173
|
+
--warning: 38 92% 50%;
|
|
8174
|
+
--danger: 0 84% 60%;
|
|
8175
|
+
--on-danger: 0 0% 0%;
|
|
8176
|
+
--ui-space-zero: 0rem;
|
|
8177
|
+
--ui-space-xs: 0.25rem;
|
|
8178
|
+
--ui-space-sm: 0.5rem;
|
|
8179
|
+
--ui-space-md: 0.75rem;
|
|
8180
|
+
--ui-space-lg: 1rem;
|
|
8181
|
+
--ui-space-xl: 1.5rem;
|
|
8182
|
+
--ui-space-2xl: 2rem;
|
|
8183
|
+
--ui-space-3xl: 3rem;
|
|
8184
|
+
--ui-radius-sm: 0.375rem;
|
|
8185
|
+
--ui-radius: 0.625rem;
|
|
8186
|
+
--ui-radius-lg: 0.75rem;
|
|
8187
|
+
--ui-border-width: 1px;
|
|
8188
|
+
--ui-font: "Montserrat", "Avenir Next", "Segoe UI", sans-serif;
|
|
8189
|
+
--ui-shadow-sm: 0 1px 2px hsl(222 47% 11% / 0.06);
|
|
8190
|
+
--ui-shadow-md: 0 8px 24px hsl(222 47% 11% / 0.08);
|
|
8191
|
+
--ui-shadow-lg: 0 24px 64px hsl(222 47% 11% / 0.14);
|
|
8192
|
+
--glass-bg: 0 0% 100% / 0.55;
|
|
8193
|
+
--glass-bg-subtle: 0 0% 100% / 0.38;
|
|
8194
|
+
--glass-bg-strong: 0 0% 100% / 0.72;
|
|
8195
|
+
--glass-border: 220 30% 100% / 0.55;
|
|
8196
|
+
--glass-highlight: 0 0% 100% / 0.85;
|
|
8197
|
+
--glass-blur: 22px;
|
|
8198
|
+
--glass-saturate: 1.7;
|
|
8199
|
+
--glass-brightness: 1.05;
|
|
8200
|
+
--glass-edge: 0 0% 100% / 0.9;
|
|
8201
|
+
--glass-edge-soft: 0 0% 100% / 0.34;
|
|
8202
|
+
--glass-shade: 222 47% 11% / 0.07;
|
|
8203
|
+
--glass-refraction: 201 96% 32% / 0.08;
|
|
8204
|
+
--glass-shadow: 0 1px 2px hsl(222 47% 11% / 0.08),
|
|
8205
|
+
0 12px 32px hsl(222 47% 11% / 0.12),
|
|
8206
|
+
0 32px 80px hsl(222 47% 11% / 0.14);
|
|
8207
|
+
}
|
|
8208
|
+
|
|
8209
|
+
:where([data-theme="dark"], [data-theme="lumen-dark"]) [data-lumen-preset="default"]:not([data-lumen-scheme="light"], [data-theme="light"], [data-theme="lumen-light"]),
|
|
8210
|
+
[data-lumen-preset="default"][data-lumen-scheme="dark"],
|
|
8211
|
+
[data-lumen-preset="default"][data-theme="dark"]:not([data-lumen-scheme="light"]),
|
|
8212
|
+
[data-lumen-preset="default"][data-theme="lumen-dark"]:not([data-lumen-scheme="light"]) {
|
|
8213
|
+
color-scheme: dark;
|
|
8214
|
+
--canvas: 224 24% 8%;
|
|
8215
|
+
--surface: 224 18% 11%;
|
|
8216
|
+
--surface-muted: 223 16% 15%;
|
|
8217
|
+
--surface-strong: 222 14% 22%;
|
|
8218
|
+
--line: 222 14% 26%;
|
|
8219
|
+
--ink: 210 20% 96%;
|
|
8220
|
+
--ink-soft: 214 14% 77%;
|
|
8221
|
+
--ink-muted: 216 10% 62%;
|
|
8222
|
+
--brand: 199 91% 56%;
|
|
8223
|
+
--brand-solid: 199 91% 36%;
|
|
8224
|
+
--brand-soft: 199 84% 16%;
|
|
8225
|
+
--on-brand: 0 0% 100%;
|
|
8226
|
+
--accent: 166 76% 43%;
|
|
8227
|
+
--success: 142 69% 45%;
|
|
8228
|
+
--warning: 38 92% 55%;
|
|
8229
|
+
--danger: 0 84% 65%;
|
|
8230
|
+
--on-danger: 224 24% 8%;
|
|
8231
|
+
--ui-space-zero: 0rem;
|
|
8232
|
+
--ui-space-xs: 0.25rem;
|
|
8233
|
+
--ui-space-sm: 0.5rem;
|
|
8234
|
+
--ui-space-md: 0.75rem;
|
|
8235
|
+
--ui-space-lg: 1rem;
|
|
8236
|
+
--ui-space-xl: 1.5rem;
|
|
8237
|
+
--ui-space-2xl: 2rem;
|
|
8238
|
+
--ui-space-3xl: 3rem;
|
|
8239
|
+
--ui-radius-sm: 0.375rem;
|
|
8240
|
+
--ui-radius: 0.625rem;
|
|
8241
|
+
--ui-radius-lg: 0.75rem;
|
|
8242
|
+
--ui-border-width: 1px;
|
|
8243
|
+
--ui-font: "Montserrat", "Avenir Next", "Segoe UI", sans-serif;
|
|
8244
|
+
--ui-shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.18);
|
|
8245
|
+
--ui-shadow-md: 0 12px 32px hsl(0 0% 0% / 0.24);
|
|
8246
|
+
--ui-shadow-lg: 0 28px 80px hsl(0 0% 0% / 0.36);
|
|
8247
|
+
--glass-bg: 224 20% 13% / 0.78;
|
|
8248
|
+
--glass-bg-subtle: 224 20% 13% / 0.64;
|
|
8249
|
+
--glass-bg-strong: 224 20% 13% / 0.9;
|
|
8250
|
+
--glass-border: 210 30% 92% / 0.24;
|
|
8251
|
+
--glass-highlight: 210 30% 96% / 0.1;
|
|
8252
|
+
--glass-brightness: 1;
|
|
8253
|
+
--glass-edge: 210 40% 98% / 0.24;
|
|
8254
|
+
--glass-edge-soft: 210 40% 98% / 0.08;
|
|
8255
|
+
--glass-shade: 240 40% 3% / 0.3;
|
|
8256
|
+
--glass-refraction: 199 91% 56% / 0.1;
|
|
8257
|
+
--glass-shadow: 0 1px 2px hsl(0 0% 0% / 0.3),
|
|
8258
|
+
0 16px 40px hsl(0 0% 0% / 0.34),
|
|
8259
|
+
0 40px 96px hsl(0 0% 0% / 0.38);
|
|
8260
|
+
}
|
|
8261
|
+
|
|
8262
|
+
[data-lumen-preset="studio"],
|
|
8263
|
+
[data-lumen-preset="studio"][data-lumen-scheme="light"] {
|
|
8264
|
+
color-scheme: light;
|
|
8265
|
+
--canvas: 0 0% 100%;
|
|
8266
|
+
--surface: 0 0% 100%;
|
|
8267
|
+
--surface-muted: 0 0% 96%;
|
|
8268
|
+
--surface-strong: 0 0% 91%;
|
|
8269
|
+
--line: 0 0% 90%;
|
|
8270
|
+
--ink: 0 0% 9%;
|
|
8271
|
+
--ink-soft: 0 0% 32%;
|
|
8272
|
+
--ink-muted: 0 0% 45%;
|
|
8273
|
+
--brand: 0 0% 9%;
|
|
8274
|
+
--brand-solid: 0 0% 9%;
|
|
8275
|
+
--brand-soft: 0 0% 92%;
|
|
8276
|
+
--on-brand: 0 0% 100%;
|
|
8277
|
+
--accent: 0 0% 9%;
|
|
8278
|
+
--success: 142 76% 36%;
|
|
8279
|
+
--warning: 38 92% 50%;
|
|
8280
|
+
--danger: 0 84% 60%;
|
|
8281
|
+
--on-danger: 0 0% 0%;
|
|
8282
|
+
--ui-space-zero: 0rem;
|
|
8283
|
+
--ui-space-xs: 0.25rem;
|
|
8284
|
+
--ui-space-sm: 0.5rem;
|
|
8285
|
+
--ui-space-md: 0.75rem;
|
|
8286
|
+
--ui-space-lg: 1rem;
|
|
8287
|
+
--ui-space-xl: 1.5rem;
|
|
8288
|
+
--ui-space-2xl: 2rem;
|
|
8289
|
+
--ui-space-3xl: 3rem;
|
|
8290
|
+
--ui-radius-sm: 0.22499999999999998rem;
|
|
8291
|
+
--ui-radius: 0.375rem;
|
|
8292
|
+
--ui-radius-lg: 0.44999999999999996rem;
|
|
8293
|
+
--ui-border-width: 1px;
|
|
8294
|
+
--ui-font: system-ui, "-apple-system", "BlinkMacSystemFont", "Segoe UI", sans-serif;
|
|
8295
|
+
--ui-shadow-sm: none;
|
|
8296
|
+
--ui-shadow-md: none;
|
|
8297
|
+
--ui-shadow-lg: none;
|
|
8298
|
+
--glass-bg: 0 0% 100% / 0.55;
|
|
8299
|
+
--glass-bg-subtle: 0 0% 100% / 0.38;
|
|
8300
|
+
--glass-bg-strong: 0 0% 100% / 0.72;
|
|
8301
|
+
--glass-border: 220 30% 100% / 0.55;
|
|
8302
|
+
--glass-highlight: 0 0% 100% / 0.85;
|
|
8303
|
+
--glass-blur: 22px;
|
|
8304
|
+
--glass-saturate: 1.7;
|
|
8305
|
+
--glass-brightness: 1.05;
|
|
8306
|
+
--glass-edge: 0 0% 100% / 0.9;
|
|
8307
|
+
--glass-edge-soft: 0 0% 100% / 0.34;
|
|
8308
|
+
--glass-shade: 222 47% 11% / 0.07;
|
|
8309
|
+
--glass-refraction: 0 0% 50% / 0.04;
|
|
8310
|
+
--glass-shadow: 0 1px 2px hsl(222 47% 11% / 0.08),
|
|
8311
|
+
0 12px 32px hsl(222 47% 11% / 0.12),
|
|
8312
|
+
0 32px 80px hsl(222 47% 11% / 0.14);
|
|
8313
|
+
}
|
|
8314
|
+
|
|
8315
|
+
:where([data-theme="dark"], [data-theme="lumen-dark"]) [data-lumen-preset="studio"]:not([data-lumen-scheme="light"], [data-theme="light"], [data-theme="lumen-light"]),
|
|
8316
|
+
[data-lumen-preset="studio"][data-lumen-scheme="dark"],
|
|
8317
|
+
[data-lumen-preset="studio"][data-theme="dark"]:not([data-lumen-scheme="light"]),
|
|
8318
|
+
[data-lumen-preset="studio"][data-theme="lumen-dark"]:not([data-lumen-scheme="light"]) {
|
|
8319
|
+
color-scheme: dark;
|
|
8320
|
+
--canvas: 0 0% 7%;
|
|
8321
|
+
--surface: 0 0% 7%;
|
|
8322
|
+
--surface-muted: 0 0% 11%;
|
|
8323
|
+
--surface-strong: 0 0% 19%;
|
|
8324
|
+
--line: 0 0% 22%;
|
|
8325
|
+
--ink: 0 0% 96%;
|
|
8326
|
+
--ink-soft: 0 0% 80%;
|
|
8327
|
+
--ink-muted: 0 0% 64%;
|
|
8328
|
+
--brand: 0 0% 96%;
|
|
8329
|
+
--brand-solid: 0 0% 96%;
|
|
8330
|
+
--brand-soft: 0 0% 14%;
|
|
8331
|
+
--on-brand: 0 0% 7%;
|
|
8332
|
+
--accent: 0 0% 96%;
|
|
8333
|
+
--success: 142 69% 45%;
|
|
8334
|
+
--warning: 38 92% 55%;
|
|
8335
|
+
--danger: 0 84% 65%;
|
|
8336
|
+
--on-danger: 224 24% 8%;
|
|
8337
|
+
--ui-space-zero: 0rem;
|
|
8338
|
+
--ui-space-xs: 0.25rem;
|
|
8339
|
+
--ui-space-sm: 0.5rem;
|
|
8340
|
+
--ui-space-md: 0.75rem;
|
|
8341
|
+
--ui-space-lg: 1rem;
|
|
8342
|
+
--ui-space-xl: 1.5rem;
|
|
8343
|
+
--ui-space-2xl: 2rem;
|
|
8344
|
+
--ui-space-3xl: 3rem;
|
|
8345
|
+
--ui-radius-sm: 0.22499999999999998rem;
|
|
8346
|
+
--ui-radius: 0.375rem;
|
|
8347
|
+
--ui-radius-lg: 0.44999999999999996rem;
|
|
8348
|
+
--ui-border-width: 1px;
|
|
8349
|
+
--ui-font: system-ui, "-apple-system", "BlinkMacSystemFont", "Segoe UI", sans-serif;
|
|
8350
|
+
--ui-shadow-sm: none;
|
|
8351
|
+
--ui-shadow-md: none;
|
|
8352
|
+
--ui-shadow-lg: none;
|
|
8353
|
+
--glass-bg: 224 20% 13% / 0.78;
|
|
8354
|
+
--glass-bg-subtle: 224 20% 13% / 0.64;
|
|
8355
|
+
--glass-bg-strong: 224 20% 13% / 0.9;
|
|
8356
|
+
--glass-border: 210 30% 92% / 0.24;
|
|
8357
|
+
--glass-highlight: 210 30% 96% / 0.1;
|
|
8358
|
+
--glass-brightness: 1;
|
|
8359
|
+
--glass-edge: 210 40% 98% / 0.24;
|
|
8360
|
+
--glass-edge-soft: 210 40% 98% / 0.08;
|
|
8361
|
+
--glass-shade: 240 40% 3% / 0.3;
|
|
8362
|
+
--glass-refraction: 0 0% 50% / 0.04;
|
|
8363
|
+
--glass-shadow: 0 1px 2px hsl(0 0% 0% / 0.3),
|
|
8364
|
+
0 16px 40px hsl(0 0% 0% / 0.34),
|
|
8365
|
+
0 40px 96px hsl(0 0% 0% / 0.38);
|
|
8366
|
+
}
|
|
8367
|
+
|
|
8368
|
+
[data-lumen-preset="glass"],
|
|
8369
|
+
[data-lumen-preset="glass"][data-lumen-scheme="light"] {
|
|
8370
|
+
color-scheme: light;
|
|
8371
|
+
--canvas: 210 24% 98%;
|
|
8372
|
+
--surface: 0 0% 100%;
|
|
8373
|
+
--surface-muted: 210 22% 95%;
|
|
8374
|
+
--surface-strong: 213 18% 88%;
|
|
8375
|
+
--line: 214 17% 84%;
|
|
8376
|
+
--ink: 216 28% 12%;
|
|
8377
|
+
--ink-soft: 215 14% 35%;
|
|
8378
|
+
--ink-muted: 215 10% 50%;
|
|
8379
|
+
--brand: 201 96% 32%;
|
|
8380
|
+
--brand-solid: 201 96% 28%;
|
|
8381
|
+
--brand-soft: 198 64% 92%;
|
|
8382
|
+
--on-brand: 0 0% 100%;
|
|
8383
|
+
--accent: 169 78% 33%;
|
|
8384
|
+
--success: 142 76% 36%;
|
|
8385
|
+
--warning: 38 92% 50%;
|
|
8386
|
+
--danger: 0 84% 60%;
|
|
8387
|
+
--on-danger: 0 0% 0%;
|
|
8388
|
+
--ui-space-zero: 0rem;
|
|
8389
|
+
--ui-space-xs: 0.25rem;
|
|
8390
|
+
--ui-space-sm: 0.5rem;
|
|
8391
|
+
--ui-space-md: 0.75rem;
|
|
8392
|
+
--ui-space-lg: 1rem;
|
|
8393
|
+
--ui-space-xl: 1.5rem;
|
|
8394
|
+
--ui-space-2xl: 2rem;
|
|
8395
|
+
--ui-space-3xl: 3rem;
|
|
8396
|
+
--ui-radius-sm: 0.5249999999999999rem;
|
|
8397
|
+
--ui-radius: 0.875rem;
|
|
8398
|
+
--ui-radius-lg: 1.0499999999999998rem;
|
|
8399
|
+
--ui-border-width: 1px;
|
|
8400
|
+
--ui-font: "Montserrat", "Avenir Next", "Segoe UI", sans-serif;
|
|
8401
|
+
--ui-shadow-sm: 0 1px 2px hsl(222 47% 11% / 0.06);
|
|
8402
|
+
--ui-shadow-md: 0 8px 24px hsl(222 47% 11% / 0.08);
|
|
8403
|
+
--ui-shadow-lg: 0 24px 64px hsl(222 47% 11% / 0.14);
|
|
8404
|
+
--glass-bg: 0 0% 100% / 0.55;
|
|
8405
|
+
--glass-bg-subtle: 0 0% 100% / 0.38;
|
|
8406
|
+
--glass-bg-strong: 0 0% 100% / 0.72;
|
|
8407
|
+
--glass-border: 220 30% 100% / 0.55;
|
|
8408
|
+
--glass-highlight: 0 0% 100% / 0.85;
|
|
8409
|
+
--glass-blur: 22px;
|
|
8410
|
+
--glass-saturate: 1.7;
|
|
8411
|
+
--glass-brightness: 1.05;
|
|
8412
|
+
--glass-edge: 0 0% 100% / 0.9;
|
|
8413
|
+
--glass-edge-soft: 0 0% 100% / 0.34;
|
|
8414
|
+
--glass-shade: 222 47% 11% / 0.07;
|
|
8415
|
+
--glass-refraction: 201 96% 32% / 0.08;
|
|
8416
|
+
--glass-shadow: 0 1px 2px hsl(222 47% 11% / 0.08),
|
|
8417
|
+
0 12px 32px hsl(222 47% 11% / 0.12),
|
|
8418
|
+
0 32px 80px hsl(222 47% 11% / 0.14);
|
|
8419
|
+
}
|
|
8420
|
+
|
|
8421
|
+
:where([data-theme="dark"], [data-theme="lumen-dark"]) [data-lumen-preset="glass"]:not([data-lumen-scheme="light"], [data-theme="light"], [data-theme="lumen-light"]),
|
|
8422
|
+
[data-lumen-preset="glass"][data-lumen-scheme="dark"],
|
|
8423
|
+
[data-lumen-preset="glass"][data-theme="dark"]:not([data-lumen-scheme="light"]),
|
|
8424
|
+
[data-lumen-preset="glass"][data-theme="lumen-dark"]:not([data-lumen-scheme="light"]) {
|
|
8425
|
+
color-scheme: dark;
|
|
8426
|
+
--canvas: 224 24% 8%;
|
|
8427
|
+
--surface: 224 18% 11%;
|
|
8428
|
+
--surface-muted: 223 16% 15%;
|
|
8429
|
+
--surface-strong: 222 14% 22%;
|
|
8430
|
+
--line: 222 14% 26%;
|
|
8431
|
+
--ink: 210 20% 96%;
|
|
8432
|
+
--ink-soft: 214 14% 77%;
|
|
8433
|
+
--ink-muted: 216 10% 62%;
|
|
8434
|
+
--brand: 199 91% 56%;
|
|
8435
|
+
--brand-solid: 199 91% 36%;
|
|
8436
|
+
--brand-soft: 199 84% 16%;
|
|
8437
|
+
--on-brand: 0 0% 100%;
|
|
8438
|
+
--accent: 166 76% 43%;
|
|
8439
|
+
--success: 142 69% 45%;
|
|
8440
|
+
--warning: 38 92% 55%;
|
|
8441
|
+
--danger: 0 84% 65%;
|
|
8442
|
+
--on-danger: 224 24% 8%;
|
|
8443
|
+
--ui-space-zero: 0rem;
|
|
8444
|
+
--ui-space-xs: 0.25rem;
|
|
8445
|
+
--ui-space-sm: 0.5rem;
|
|
8446
|
+
--ui-space-md: 0.75rem;
|
|
8447
|
+
--ui-space-lg: 1rem;
|
|
8448
|
+
--ui-space-xl: 1.5rem;
|
|
8449
|
+
--ui-space-2xl: 2rem;
|
|
8450
|
+
--ui-space-3xl: 3rem;
|
|
8451
|
+
--ui-radius-sm: 0.5249999999999999rem;
|
|
8452
|
+
--ui-radius: 0.875rem;
|
|
8453
|
+
--ui-radius-lg: 1.0499999999999998rem;
|
|
8454
|
+
--ui-border-width: 1px;
|
|
8455
|
+
--ui-font: "Montserrat", "Avenir Next", "Segoe UI", sans-serif;
|
|
8456
|
+
--ui-shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.18);
|
|
8457
|
+
--ui-shadow-md: 0 12px 32px hsl(0 0% 0% / 0.24);
|
|
8458
|
+
--ui-shadow-lg: 0 28px 80px hsl(0 0% 0% / 0.36);
|
|
8459
|
+
--glass-bg: 224 20% 13% / 0.78;
|
|
8460
|
+
--glass-bg-subtle: 224 20% 13% / 0.64;
|
|
8461
|
+
--glass-bg-strong: 224 20% 13% / 0.9;
|
|
8462
|
+
--glass-border: 210 30% 92% / 0.24;
|
|
8463
|
+
--glass-highlight: 210 30% 96% / 0.1;
|
|
8464
|
+
--glass-brightness: 1;
|
|
8465
|
+
--glass-edge: 210 40% 98% / 0.24;
|
|
8466
|
+
--glass-edge-soft: 210 40% 98% / 0.08;
|
|
8467
|
+
--glass-shade: 240 40% 3% / 0.3;
|
|
8468
|
+
--glass-refraction: 199 91% 56% / 0.1;
|
|
8469
|
+
--glass-shadow: 0 1px 2px hsl(0 0% 0% / 0.3),
|
|
8470
|
+
0 16px 40px hsl(0 0% 0% / 0.34),
|
|
8471
|
+
0 40px 96px hsl(0 0% 0% / 0.38);
|
|
8472
|
+
}
|
|
8473
|
+
}
|
|
8474
|
+
/* END:generated-theme-presets */
|
|
8475
|
+
|
|
8476
|
+
@layer lumen.components {
|
|
8477
|
+
.ui-calendar-heatmap__range { color: hsl(var(--ink-soft)); font-size: .875rem; margin: 0; }
|
|
8478
|
+
.ui-calendar-heatmap__plot { overflow-x: auto; max-width: 100%; padding: .5rem 0; }
|
|
8479
|
+
.ui-calendar-heatmap__plot svg { display: block; width: auto; max-width: none; min-width: 240px; }
|
|
8480
|
+
.ui-calendar-heatmap__weekday { fill: hsl(var(--chart-axis)); font-size: 11px; }
|
|
8481
|
+
.ui-calendar-heatmap__cell { fill: hsl(var(--chart-series-1)); }
|
|
8482
|
+
.ui-calendar-heatmap__cell[data-missing] { fill: hsl(var(--surface-muted)); stroke: hsl(var(--line)); }
|
|
8483
|
+
.ui-calendar-heatmap__missing { fill: hsl(var(--ink-muted)); font-size: 12px; }
|
|
8484
|
+
.ui-calendar-heatmap__legend { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .75rem; color: hsl(var(--ink-soft)); font-variant-numeric: tabular-nums; }
|
|
8485
|
+
.ui-calendar-heatmap__scale { width: 5rem; height: .5rem; border-radius: var(--ui-radius-sm); background: linear-gradient(to right, hsl(var(--chart-series-1) / .15), hsl(var(--chart-series-1))); }
|
|
8486
|
+
.ui-funnel-chart__rows, .ui-box-plot__rows { display: grid; gap: 1rem; margin: 0; padding: .5rem; list-style: none; }
|
|
8487
|
+
.ui-funnel-chart__label, .ui-box-plot__label { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; flex-wrap: wrap; font-size: .875rem; overflow-wrap: anywhere; }
|
|
8488
|
+
.ui-funnel-chart__label strong, .ui-box-plot__label strong { font-variant-numeric: tabular-nums; }
|
|
8489
|
+
.ui-funnel-chart__track { display: flex; justify-content: center; height: 1.75rem; margin-top: .5rem; background: hsl(var(--surface-muted)); border-radius: var(--ui-radius-sm); }
|
|
8490
|
+
.ui-funnel-chart__bar { display: block; height: 100%; background: var(--ui-chart-color, hsl(var(--chart-series-1))); border-radius: var(--ui-radius-sm); }
|
|
8491
|
+
.ui-box-plot__track { position: relative; height: 2.5rem; margin: .5rem .375rem 0; }
|
|
8492
|
+
.ui-box-plot__track::before { content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: hsl(var(--line)); }
|
|
8493
|
+
.ui-box-plot__whisker { position: absolute; top: calc(50% - 1px); height: 2px; background: var(--ui-chart-color, hsl(var(--chart-series-1))); }
|
|
8494
|
+
.ui-box-plot__cap, .ui-box-plot__median { position: absolute; top: 20%; height: 60%; width: 2px; transform: translateX(-50%); background: var(--ui-chart-color, hsl(var(--chart-series-1))); }
|
|
8495
|
+
.ui-box-plot__box { position: absolute; top: 10%; height: 80%; box-sizing: border-box; min-width: 2px; background: color-mix(in srgb, var(--ui-chart-color, hsl(var(--chart-series-1))) 25%, hsl(var(--surface))); border: 2px solid var(--ui-chart-color, hsl(var(--chart-series-1))); border-radius: 3px; }
|
|
8496
|
+
.ui-box-plot__median { top: 10%; height: 80%; width: 3px; background: hsl(var(--ink)); }
|
|
8497
|
+
.ui-box-plot__outlier { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 7px; height: 7px; border-radius: 50%; border: 2px solid var(--ui-chart-color, hsl(var(--chart-series-1))); background: hsl(var(--surface)); }
|
|
8498
|
+
:is(.ui-calendar-heatmap, .ui-funnel-chart, .ui-box-plot) [tabindex="0"]:focus-visible { outline: 2px solid hsl(var(--brand)); outline-offset: 2px; }
|
|
8499
|
+
@media (forced-colors: active) {
|
|
8500
|
+
.ui-calendar-heatmap__cell { fill: Highlight; stroke: CanvasText; }
|
|
8501
|
+
.ui-calendar-heatmap__cell[data-missing] { fill: Canvas; }
|
|
8502
|
+
.ui-calendar-heatmap__missing, .ui-calendar-heatmap__weekday { fill: CanvasText; }
|
|
8503
|
+
.ui-funnel-chart__bar, .ui-box-plot__whisker, .ui-box-plot__cap, .ui-box-plot__median { background: CanvasText; }
|
|
8504
|
+
.ui-box-plot__box, .ui-box-plot__outlier { border-color: CanvasText; background: Canvas; }
|
|
8505
|
+
}
|
|
8506
|
+
|
|
8507
|
+
}
|
|
8508
|
+
|
|
8509
|
+
/* Device hardware is decorative; live screens retain their own viewport and colors. */
|
|
8510
|
+
.ui-device-frame { display: block; position: relative; container-type: inline-size; width: 100%; max-width: 64rem; margin-inline: auto; --ui-device-tone: #242424; --ui-device-body: var(--ui-device-color, var(--ui-device-tone)); --ui-device-shell: color-mix(in srgb, var(--ui-device-body) 96%, white); --ui-device-edge: color-mix(in srgb, var(--ui-device-body) 76%, black); --ui-device-rim: color-mix(in srgb, var(--ui-device-body) 89%, black); --ui-device-highlight: color-mix(in srgb, var(--ui-device-body) 40%, white); --ui-device-recess: color-mix(in srgb, var(--ui-device-body) 88%, black); --ui-device-lens: color-mix(in srgb, var(--ui-device-body) 38%, black); --ui-device-shadow: rgb(0 0 0 / 15%); }
|
|
8511
|
+
.ui-device-frame[data-tone="light"] { --ui-device-tone: #f7f7f7; }
|
|
8512
|
+
.ui-device-frame__shell { position: relative; border: 1px solid var(--ui-device-rim); background: var(--ui-device-shell); }
|
|
8513
|
+
.ui-device-frame__glass { position: relative; background: var(--ui-device-shell); }
|
|
8514
|
+
.ui-device-frame__screen { display: block; position: relative; width: 100%; overflow: auto; background: hsl(var(--canvas)); isolation: isolate; }
|
|
8515
|
+
.ui-device-frame__screen[data-scroll="false"], .ui-device-frame__screen:has(> iframe) { overflow: hidden; }
|
|
8516
|
+
.ui-device-frame__screen > img { display: block; width: 100%; height: 100%; object-fit: contain; }
|
|
8517
|
+
.ui-device-frame__screen > iframe { display: block; width: 100%; height: 100%; border: 0; }
|
|
8518
|
+
.ui-device-frame__screen[style*="--ui-device-frame-scale"] > iframe { position: absolute; inset: 0 auto auto 0; width: var(--ui-device-frame-width); height: var(--ui-device-frame-height); transform: scale(var(--ui-device-frame-scale)); transform-origin: top left; }
|
|
8519
|
+
.ui-device-frame__camera { position: absolute; z-index: 3; left: 50%; width: 0.42cqi; height: 0.42cqi; border-radius: 50%; background: var(--ui-device-lens); box-shadow: inset 0 1px 1px rgb(0 0 0 / 25%), 0 0 0 0.12cqi var(--ui-device-recess), 0 0.1cqi 0 0.18cqi var(--ui-device-highlight); transform: translateX(-50%); pointer-events: none; }
|
|
8520
|
+
.ui-device-frame__hardware { display: none; position: absolute; inset: 0; z-index: 4; pointer-events: none; }
|
|
8521
|
+
.ui-device-frame__base { position: relative; display: block; pointer-events: none; }
|
|
8522
|
+
|
|
8523
|
+
/* A thin display lid, recessed hinge and a separate tapered keyboard deck. */
|
|
8524
|
+
.ui-device-frame:is([data-device="laptop"], [data-device="macbook-air"], [data-device="macbook-pro"]) .ui-device-frame__shell { margin-inline: 6%; padding: 0.38%; border-radius: 2.6cqi 2.6cqi 0.55cqi 0.55cqi; background: linear-gradient(110deg, var(--ui-device-highlight), var(--ui-device-shell) 8%, var(--ui-device-shell) 92%, var(--ui-device-recess)); box-shadow: inset 0 0 0 0.15cqi var(--ui-device-highlight), 0 0 0 0.13cqi var(--ui-device-recess); }
|
|
8525
|
+
.ui-device-frame:is([data-device="laptop"], [data-device="macbook-air"], [data-device="macbook-pro"]) .ui-device-frame__glass { padding: 3.6% 2.6% 3.1%; border-radius: 2.05cqi 2.05cqi 0.2cqi 0.2cqi; border: 1px solid var(--ui-device-rim); }
|
|
8526
|
+
.ui-device-frame:is([data-device="laptop"], [data-device="macbook-air"], [data-device="macbook-pro"]) .ui-device-frame__screen { border: 0; border-radius: 0.15cqi; box-shadow: 0 0 0 1px var(--ui-device-recess); }
|
|
8527
|
+
.ui-device-frame:is([data-device="laptop"], [data-device="macbook-air"], [data-device="macbook-pro"]) .ui-device-frame__camera { top: 1.2cqi; }
|
|
8528
|
+
.ui-device-frame:is([data-device="laptop"], [data-device="macbook-air"], [data-device="macbook-pro"]) .ui-device-frame__shell::after { content: ''; position: absolute; bottom: -0.1cqi; left: 4%; right: 4%; height: 0.55cqi; border-radius: 0.3cqi 0.3cqi 0 0; background: linear-gradient(var(--ui-device-recess), var(--ui-device-edge)); }
|
|
8529
|
+
.ui-device-frame:is([data-device="laptop"], [data-device="macbook-air"], [data-device="macbook-pro"]) .ui-device-frame__base { height: 2.4cqi; border-radius: 0.2cqi 0.2cqi 50% 50% / 0.15cqi 0.15cqi 90% 90%; background: linear-gradient(var(--ui-device-highlight) 0 12%, var(--ui-device-shell) 15% 42%, var(--ui-device-recess) 68%, var(--ui-device-edge) 86%, var(--ui-device-rim) 95%); box-shadow: 0 0.35cqi 0.35cqi -0.2cqi rgb(0 0 0 / 35%), 0 1.05cqi 1.1cqi -0.65cqi var(--ui-device-shadow); }
|
|
8530
|
+
.ui-device-frame:is([data-device="laptop"], [data-device="macbook-air"], [data-device="macbook-pro"]) .ui-device-frame__base::before { content: ''; position: absolute; left: 41%; top: 0; width: 18%; height: 42%; border-radius: 0 0 1.1cqi 1.1cqi; background: linear-gradient(var(--ui-device-recess), var(--ui-device-shell)); box-shadow: inset 0 -0.12cqi 0.1cqi var(--ui-device-highlight); }
|
|
8531
|
+
.ui-device-frame:is([data-device="laptop"], [data-device="macbook-air"], [data-device="macbook-pro"]) .ui-device-frame__base::after { content: ''; position: absolute; left: 5%; right: 5%; bottom: 0.15cqi; height: 0.16cqi; border-radius: 50%; background: var(--ui-device-edge); opacity: 0.5; }
|
|
8532
|
+
|
|
8533
|
+
/* MacBook Pro has a full-height front edge, compact display bezel, and camera notch. */
|
|
8534
|
+
.ui-device-frame[data-device="macbook-pro"] .ui-device-frame__shell { margin-inline: 3.8%; border-radius: 2.1cqi 2.1cqi 0.65cqi 0.65cqi; }
|
|
8535
|
+
.ui-device-frame[data-device="macbook-pro"] .ui-device-frame__glass { padding: 3.15% 1.35% 2.1%; border-radius: 1.7cqi 1.7cqi 0.45cqi 0.45cqi; background: var(--ui-device-shell); }
|
|
8536
|
+
.ui-device-frame[data-device="macbook-pro"] .ui-device-frame__screen { border-radius: 0.7cqi 0.7cqi 0.15cqi 0.15cqi; }
|
|
8537
|
+
.ui-device-frame[data-device="macbook-pro"] .ui-device-frame__camera { top: 0; width: 13%; height: 2.5cqi; border-radius: 0 0 0.65cqi 0.65cqi; background: var(--ui-device-edge); box-shadow: 0 0.1cqi 0 var(--ui-device-highlight); }
|
|
8538
|
+
.ui-device-frame[data-device="macbook-pro"] .ui-device-frame__camera::after { content: ''; position: absolute; left: calc(50% - 0.28cqi); top: 0.75cqi; width: 0.56cqi; height: 0.56cqi; border-radius: 50%; background: var(--ui-device-lens); box-shadow: 0 0 0 0.12cqi var(--ui-device-recess); }
|
|
8539
|
+
.ui-device-frame[data-device="macbook-pro"] .ui-device-frame__shell::after { left: 1%; right: 1%; height: 0.7cqi; }
|
|
8540
|
+
.ui-device-frame[data-device="macbook-pro"] .ui-device-frame__base { height: 3.2cqi; border-radius: 0.25cqi 0.25cqi 1.5cqi 1.5cqi; background: linear-gradient(var(--ui-device-highlight) 0 8%, var(--ui-device-shell) 12% 60%, var(--ui-device-recess) 90%, var(--ui-device-edge)); }
|
|
8541
|
+
.ui-device-frame[data-device="macbook-pro"] .ui-device-frame__base::before { left: 43%; width: 14%; height: 35%; border-radius: 0 0 0.8cqi 0.8cqi; }
|
|
8542
|
+
.ui-device-frame[data-device="macbook-pro"] .ui-device-frame__base::after { left: 7%; right: 7%; bottom: -0.35cqi; height: 0.45cqi; border-radius: 0.25cqi; background: linear-gradient(to right, var(--ui-device-edge) 0 7%, transparent 7% 93%, var(--ui-device-edge) 93%); opacity: 1; }
|
|
8543
|
+
|
|
8544
|
+
/* The display and chin form one enclosure; the curved neck rolls into a broad foot. */
|
|
8545
|
+
.ui-device-frame:is([data-device="desktop"], [data-device="imac"]) .ui-device-frame__shell { padding: 0.45%; border-radius: 2.9cqi; background: linear-gradient(120deg, var(--ui-device-highlight), var(--ui-device-shell) 20%); box-shadow: inset 0 0 0 0.15cqi var(--ui-device-highlight), 0 0.4cqi 0.5cqi -0.2cqi var(--ui-device-shadow); }
|
|
8546
|
+
.ui-device-frame:is([data-device="desktop"], [data-device="imac"]) .ui-device-frame__glass { padding: 3.3% 3.3% 12.3%; border-radius: 2.45cqi; background: linear-gradient(to bottom, var(--ui-device-shell) 0 82%, color-mix(in srgb, var(--ui-device-shell) 94%, white) 82%); }
|
|
8547
|
+
.ui-device-frame:is([data-device="desktop"], [data-device="imac"]) .ui-device-frame__screen { border: 0; border-radius: 0.15cqi; box-shadow: 0 0 0 1px var(--ui-device-rim), 0 0 0 0.2cqi var(--ui-device-highlight); }
|
|
8548
|
+
.ui-device-frame:is([data-device="desktop"], [data-device="imac"]) .ui-device-frame__camera { top: 1.15cqi; }
|
|
8549
|
+
.ui-device-frame:is([data-device="desktop"], [data-device="imac"]) .ui-device-frame__base { width: 36%; height: 13cqi; margin: -0.1cqi auto 0; isolation: isolate; }
|
|
8550
|
+
.ui-device-frame:is([data-device="desktop"], [data-device="imac"]) .ui-device-frame__base::before { content: ''; position: absolute; inset: 0 0 0.65cqi; background: linear-gradient(var(--ui-device-recess) 0, var(--ui-device-shell) 52%, var(--ui-device-highlight) 88%, var(--ui-device-shell)); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 130' preserveAspectRatio='none'%3E%3Cpath d='M78 0H282L291 72C294 95 313 111 351 122Q359 124 360 130H0Q1 124 9 122C47 111 66 95 69 72Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
|
|
8551
|
+
.ui-device-frame:is([data-device="desktop"], [data-device="imac"]) .ui-device-frame__base::after { content: ''; position: absolute; inset: auto -0.1cqi 0; height: 1cqi; border: 1px solid var(--ui-device-rim); border-top-color: var(--ui-device-highlight); border-radius: 18% 18% 12% 12% / 45% 45% 60% 60%; background: linear-gradient(var(--ui-device-highlight), var(--ui-device-shell) 60%, var(--ui-device-edge)); box-shadow: 0 0.35cqi 0.4cqi -0.2cqi rgb(0 0 0 / 25%), 0 1.2cqi 1.8cqi -0.5cqi var(--ui-device-shadow); }
|
|
8552
|
+
|
|
8553
|
+
/* Rounded cover glass sits inside a layered metal rail, with separate side controls. */
|
|
8554
|
+
.ui-device-frame:is([data-device="iphone"], [data-device="android"], [data-device="pixel"], [data-device="tablet"], [data-device="ipad-pro"]) { max-width: 24rem; }
|
|
8555
|
+
.ui-device-frame:is([data-device="iphone"], [data-device="android"], [data-device="pixel"], [data-device="tablet"], [data-device="ipad-pro"]) .ui-device-frame__shell { padding: 2.05%; border-radius: 14cqi; border: 0.25cqi solid var(--ui-device-edge); background: linear-gradient(100deg, var(--ui-device-recess), var(--ui-device-highlight) 1.1%, var(--ui-device-shell) 2.5% 97.5%, var(--ui-device-highlight) 98.9%, var(--ui-device-recess)); box-shadow: inset 0 0 0 0.38cqi var(--ui-device-highlight), inset 0 0 0 0.65cqi var(--ui-device-rim), 0 0.35cqi 0.4cqi var(--ui-device-shadow), 0 1.4cqi 2.2cqi -0.8cqi var(--ui-device-shadow); }
|
|
8556
|
+
.ui-device-frame:is([data-device="iphone"], [data-device="android"], [data-device="pixel"], [data-device="tablet"], [data-device="ipad-pro"]) .ui-device-frame__glass { padding: 9% 0 4%; border: 0.22cqi solid var(--ui-device-rim); border-radius: 11.6cqi; overflow: hidden; background: hsl(var(--canvas)); box-shadow: 0 0 0 0.35cqi var(--ui-device-shell); }
|
|
8557
|
+
.ui-device-frame:is([data-device="iphone"], [data-device="android"], [data-device="pixel"], [data-device="tablet"], [data-device="ipad-pro"]) .ui-device-frame__screen { border: 0; border-radius: 0; }
|
|
8558
|
+
.ui-device-frame:is([data-device="iphone"], [data-device="android"], [data-device="pixel"]) .ui-device-frame__glass:has(> .ui-device-frame__screen > img) { padding: 0; }
|
|
8559
|
+
.ui-device-frame:is([data-device="iphone"], [data-device="android"], [data-device="pixel"]) .ui-device-frame__glass::after { content: ''; position: absolute; z-index: 3; bottom: 1.7cqi; left: 37%; width: 26%; height: 0.85cqi; border-radius: 1cqi; background: var(--ui-device-lens); pointer-events: none; }
|
|
8560
|
+
.ui-device-frame:is([data-device="iphone"], [data-device="android"], [data-device="pixel"]) .ui-device-frame__hardware { display: block; }
|
|
8561
|
+
.ui-device-frame__hardware > span { position: absolute; }
|
|
8562
|
+
.ui-device-frame__action, .ui-device-frame__volume-up, .ui-device-frame__volume-down, .ui-device-frame__power { width: 1cqi; border: 0.18cqi solid var(--ui-device-rim); border-radius: 0.65cqi; background: linear-gradient(90deg, var(--ui-device-recess), var(--ui-device-highlight), var(--ui-device-shell)); box-shadow: 0 0.15cqi 0.2cqi var(--ui-device-shadow); }
|
|
8563
|
+
.ui-device-frame__action { left: -1.1cqi; top: 15%; height: 3.5%; }
|
|
8564
|
+
.ui-device-frame__volume-up { left: -1.1cqi; top: 23%; height: 7%; }
|
|
8565
|
+
.ui-device-frame__volume-down { left: -1.1cqi; top: 33%; height: 7%; }
|
|
8566
|
+
.ui-device-frame__power { right: -1.1cqi; top: 25%; height: 11%; }
|
|
8567
|
+
.ui-device-frame__rail-left, .ui-device-frame__rail-right { inset-block: 0; width: 1.2cqi; background: linear-gradient(transparent 12%, var(--ui-device-recess) 12% 12.3%, transparent 12.3% 86%, var(--ui-device-recess) 86% 86.3%, transparent 86.3%); }
|
|
8568
|
+
.ui-device-frame__rail-left { left: 0; }
|
|
8569
|
+
.ui-device-frame__rail-right { right: 0; }
|
|
8570
|
+
.ui-device-frame:is([data-device="iphone"], [data-device="android"], [data-device="pixel"]) .ui-device-frame__base { display: none; }
|
|
8571
|
+
.ui-device-frame[data-device="iphone"] .ui-device-frame__glass::before { content: ''; position: absolute; z-index: 2; top: -0.1cqi; left: 50%; width: 49.5%; height: 8cqi; transform: translateX(-50%); background: var(--ui-device-rim); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0C11 0 12 4 13 10L15 18C17 32 26 40 42 40H158C174 40 183 32 185 18L187 10C188 4 189 0 200 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; pointer-events: none; }
|
|
8572
|
+
.ui-device-frame[data-device="iphone"] .ui-device-frame__camera { top: -0.1cqi; width: 49%; height: 7.8cqi; border-radius: 0; background: var(--ui-device-shell); box-shadow: none; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0C11 0 12 4 13 10L15 18C17 32 26 40 42 40H158C174 40 183 32 185 18L187 10C188 4 189 0 200 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
|
|
8573
|
+
.ui-device-frame[data-device="iphone"] .ui-device-frame__camera::before { content: ''; position: absolute; top: 2.5cqi; left: 32%; width: 25%; height: 1.25cqi; border: 0.15cqi solid var(--ui-device-recess); border-radius: 1cqi; background: repeating-linear-gradient(90deg, var(--ui-device-lens) 0 0.15cqi, var(--ui-device-rim) 0.15cqi 0.35cqi); box-shadow: 0 0.2cqi 0 var(--ui-device-highlight); }
|
|
8574
|
+
.ui-device-frame[data-device="iphone"] .ui-device-frame__camera::after { content: ''; position: absolute; top: 2.1cqi; right: 25%; width: 2cqi; height: 2cqi; border: 0.3cqi solid var(--ui-device-recess); border-radius: 50%; background: var(--ui-device-lens); box-shadow: inset 0.15cqi 0.15cqi 0.15cqi var(--ui-device-edge), 0 0 0 0.2cqi var(--ui-device-highlight); }
|
|
8575
|
+
.ui-device-frame:is([data-device="android"], [data-device="pixel"]) .ui-device-frame__shell { border-radius: 11cqi; padding: 1.65%; }
|
|
8576
|
+
.ui-device-frame:is([data-device="android"], [data-device="pixel"]) .ui-device-frame__glass { border-radius: 9.25cqi; padding-top: 7%; }
|
|
8577
|
+
.ui-device-frame:is([data-device="android"], [data-device="pixel"]) .ui-device-frame__camera { top: 1.8cqi; width: 2.7cqi; height: 2.7cqi; background: var(--ui-device-lens); box-shadow: inset 0 0 0 0.45cqi var(--ui-device-edge), 0 0 0 0.25cqi var(--ui-device-recess); }
|
|
8578
|
+
.ui-device-frame:is([data-device="android"], [data-device="pixel"]) .ui-device-frame__action, .ui-device-frame:is([data-device="android"], [data-device="pixel"]) .ui-device-frame__volume-down { display: none; }
|
|
8579
|
+
.ui-device-frame:is([data-device="android"], [data-device="pixel"]) .ui-device-frame__power { top: 19%; height: 6%; }
|
|
8580
|
+
.ui-device-frame:is([data-device="android"], [data-device="pixel"]) .ui-device-frame__volume-up { top: 29%; height: 12%; left: auto; right: -1.1cqi; }
|
|
8581
|
+
|
|
8582
|
+
/* A classic tablet enclosure has a separate home recess and a side camera in landscape. */
|
|
8583
|
+
.ui-device-frame[data-device="tablet"] { max-width: 40rem; }
|
|
8584
|
+
.ui-device-frame[data-device="tablet"] .ui-device-frame__shell { padding: 0.6%; border-radius: 4.5cqi; }
|
|
8585
|
+
.ui-device-frame[data-device="tablet"] .ui-device-frame__glass { padding: 7% 3.5% 9%; border-radius: 3.8cqi; background: var(--ui-device-shell); }
|
|
8586
|
+
.ui-device-frame[data-device="tablet"] .ui-device-frame__screen { border: 0; box-shadow: 0 0 0 1px var(--ui-device-rim), 0 0 0 0.25cqi var(--ui-device-highlight); }
|
|
8587
|
+
.ui-device-frame[data-device="tablet"] .ui-device-frame__camera { top: 2.8cqi; width: 0.7cqi; height: 0.7cqi; }
|
|
8588
|
+
.ui-device-frame[data-device="tablet"] .ui-device-frame__base { position: absolute; bottom: 2.5cqi; left: 50%; width: 3.8cqi; height: 3.8cqi; border: 0.15cqi solid var(--ui-device-rim); border-radius: 50%; background: var(--ui-device-shell); transform: translateX(-50%); box-shadow: inset 0 0.25cqi 0.4cqi var(--ui-device-recess), 0 0.1cqi 0 var(--ui-device-highlight); }
|
|
8589
|
+
.ui-device-frame[data-device="tablet"][data-orientation="landscape"] .ui-device-frame__glass { padding: 3.5% 7%; }
|
|
8590
|
+
.ui-device-frame[data-device="tablet"][data-orientation="landscape"] .ui-device-frame__camera { left: 2.8cqi; top: 50%; transform: translateY(-50%); }
|
|
8591
|
+
.ui-device-frame[data-device="tablet"][data-orientation="landscape"] .ui-device-frame__base { left: auto; right: 2.8cqi; top: 50%; bottom: auto; transform: translateY(-50%); }
|
|
8592
|
+
|
|
8593
|
+
/* iPad Pro keeps an even bezel and flat rail; the landscape camera stays outside the screen. */
|
|
8594
|
+
.ui-device-frame[data-device="ipad-pro"] { max-width: 44rem; }
|
|
8595
|
+
.ui-device-frame[data-device="ipad-pro"] .ui-device-frame__shell { padding: 0.55%; border-radius: 4.1cqi; }
|
|
8596
|
+
.ui-device-frame[data-device="ipad-pro"] .ui-device-frame__glass { padding: 3%; border-radius: 3.55cqi; background: var(--ui-device-shell); }
|
|
8597
|
+
.ui-device-frame[data-device="ipad-pro"] .ui-device-frame__screen { border-radius: 1.9cqi; box-shadow: 0 0 0 0.12cqi var(--ui-device-rim); }
|
|
8598
|
+
.ui-device-frame[data-device="ipad-pro"] .ui-device-frame__camera { left: auto; right: 1.15cqi; top: 50%; width: 0.65cqi; height: 0.65cqi; transform: translateY(-50%); }
|
|
8599
|
+
.ui-device-frame[data-device="ipad-pro"][data-orientation="landscape"] .ui-device-frame__camera { left: 50%; right: auto; top: 1.15cqi; transform: translateX(-50%); }
|
|
8600
|
+
.ui-device-frame[data-device="ipad-pro"] .ui-device-frame__base { display: none; }
|
|
8601
|
+
.ui-device-frame[data-device="ipad-pro"] .ui-device-frame__hardware { display: block; }
|
|
8602
|
+
.ui-device-frame[data-device="ipad-pro"] .ui-device-frame__hardware > span { display: none; }
|
|
8603
|
+
.ui-device-frame[data-device="ipad-pro"] .ui-device-frame__hardware .ui-device-frame__power { display: block; width: 6%; height: 0.6cqi; right: 10%; top: -0.85cqi; }
|
|
8604
|
+
.ui-device-frame[data-device="ipad-pro"] .ui-device-frame__hardware .ui-device-frame__volume-up { display: block; width: 0.6cqi; height: 5%; right: -0.85cqi; left: auto; top: 10%; }
|
|
8605
|
+
.ui-device-frame[data-device="ipad-pro"] .ui-device-frame__hardware .ui-device-frame__volume-down { display: block; width: 0.6cqi; height: 5%; right: -0.85cqi; left: auto; top: 17%; }
|
|
8606
|
+
|
|
8607
|
+
@layer lumen.components {
|
|
8608
|
+
.ui-motion-group { position: relative; display: grid; gap: var(--ui-space-lg); }
|
|
8609
|
+
.ui-visual-effect { display: block; position: relative; isolation: isolate; overflow: clip; border-radius: var(--ui-radius-lg); background: hsl(var(--surface)); color: hsl(var(--ink)); padding: var(--ui-space-xl); }
|
|
8610
|
+
.ui-visual-effect::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: calc(var(--ui-effect-intensity, .5) * .4); }
|
|
8611
|
+
[data-ui-visual-effect="mesh"]::before { background: radial-gradient(ellipse at 15% 20%, hsl(var(--brand)) 0, transparent 65%), radial-gradient(ellipse at 85% 80%, hsl(var(--accent)) 0, transparent 65%); }
|
|
8612
|
+
[data-ui-visual-effect="aurora"]::before { inset: -35%; background: radial-gradient(ellipse at 25% 60%, hsl(var(--brand)) 0, transparent 55%), radial-gradient(ellipse at 75% 40%, hsl(var(--accent)) 0, transparent 55%); }
|
|
8613
|
+
[data-ui-visual-effect="aurora"][data-ui-effect-animated="true"]::before { animation: ui-aurora 12s ease-in-out infinite alternate; }
|
|
8614
|
+
[data-ui-visual-effect="spotlight"]::before { background: radial-gradient(circle at var(--ui-spotlight-x, 50%) var(--ui-spotlight-y, 50%), hsl(var(--brand)) 0, transparent 65%); }
|
|
8615
|
+
[data-ui-visual-effect="grain"]::before { background: repeating-radial-gradient(circle at 23% 47%, hsl(var(--ink)) 0 1px, transparent 1px 3px); background-size: 7px 7px; opacity: calc(var(--ui-effect-intensity, .5) * .08); }
|
|
8616
|
+
[data-ui-visual-effect="border"] { border: var(--ui-border-width) solid hsl(var(--line)); }
|
|
8617
|
+
[data-ui-visual-effect="border"]::before { padding: 1px; border-radius: inherit; background: conic-gradient(from 45deg, hsl(var(--brand)), hsl(var(--accent)), hsl(var(--brand))); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; }
|
|
8618
|
+
[data-ui-visual-effect="draw"][data-ui-effect-animated="true"] :where(path, line, polyline)[pathLength="1"] { stroke-dasharray: 1; animation: ui-path-draw var(--ui-duration-slow, 240ms) var(--ui-ease, ease-out) both; }
|
|
8619
|
+
.ui-prompt-composer { display: grid; gap: var(--ui-space-md); min-width: 0; }
|
|
8620
|
+
.ui-prompt-composer__actions, .ui-stream-message__actions, .ui-approval-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-sm); }
|
|
8621
|
+
.ui-stream-message { display: grid; gap: var(--ui-space-md); }
|
|
8622
|
+
.ui-chart-motion, .ui-tool-activity { display: block; }
|
|
8623
|
+
.ui-source-citation { overflow-wrap: anywhere; }
|
|
8624
|
+
.ui-approval-card { display: grid; gap: var(--ui-space-lg); }
|
|
8625
|
+
.ui-tabs__moving-indicator { position: absolute; left: 0; bottom: 0; height: 2px; background: hsl(var(--brand)); pointer-events: none; }
|
|
8626
|
+
[data-ui-chart-motion] .ui-chart__empty { animation: ui-chart-state var(--ui-duration, 160ms) ease-out; }
|
|
8627
|
+
@supports (animation-timeline: view()) {
|
|
8628
|
+
[data-ui-visual-effect="depth"][data-ui-effect-animated="true"]::before { background: radial-gradient(ellipse at 30% 40%, hsl(var(--brand)), transparent 65%); animation: ui-effect-depth linear both; animation-timeline: view(); }
|
|
8629
|
+
}
|
|
8630
|
+
@keyframes ui-aurora { to { transform: translate(4%, -4%) rotate(8deg); } }
|
|
8631
|
+
@keyframes ui-path-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
|
|
8632
|
+
@keyframes ui-effect-depth { from { transform: translateY(-5%); opacity: 0; } to { transform: translateY(5%); } }
|
|
8633
|
+
@keyframes ui-chart-state { from { opacity: 0; } to { opacity: 1; } }
|
|
8634
|
+
@media (prefers-reduced-motion: reduce) {
|
|
8635
|
+
.ui-visual-effect::before, .ui-visual-effect :where(path, line, polyline), [data-ui-chart-motion] .ui-chart__empty { animation: none !important; }
|
|
8636
|
+
.ui-tabs__moving-indicator { transition: none !important; }
|
|
8637
|
+
}
|
|
8638
|
+
:is([data-ui-motion="reduce"].ui-visual-effect, [data-ui-motion="reduce"] .ui-visual-effect)::before, :is([data-ui-motion="reduce"].ui-visual-effect, [data-ui-motion="reduce"] .ui-visual-effect) :where(path, line, polyline), [data-ui-motion="reduce"] .ui-chart__empty { animation: none !important; }
|
|
8639
|
+
[data-ui-motion="reduce"] .ui-tabs__moving-indicator { transition: none !important; }
|
|
8640
|
+
@media (forced-colors: active) { .ui-visual-effect::before { display: none; } }
|
|
8641
|
+
}
|
|
8642
|
+
|
|
8643
|
+
|
|
8644
|
+
.ui-media-viewport { display: grid; min-width: 0; gap: var(--ui-space-sm); margin: 0; }
|
|
8645
|
+
.ui-media-viewport__stage { position: relative; width: 100%; overflow: hidden; border: var(--ui-border-width, 1px) solid hsl(var(--line)); border-radius: var(--ui-radius); background: hsl(var(--surface-muted)); }
|
|
8646
|
+
.ui-media-viewport__stage:focus-visible { outline: 2px solid hsl(var(--brand)); outline-offset: 3px; }
|
|
8647
|
+
.ui-media-viewport__content { position: absolute; inset: 0; transform-origin: center; }
|
|
8648
|
+
.ui-media-viewport__content :where(img, video, picture, .ui-image) { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; border-radius: 0; user-select: none; }
|
|
8649
|
+
.ui-media-viewport :is(figcaption, .ui-media-viewport__caption) { display: grid; gap: var(--ui-space-sm); }
|
|
8650
|
+
.ui-media-viewport__actions { display: flex; flex-wrap: wrap; gap: var(--ui-space-sm); }
|
|
8651
|
+
|
|
8652
|
+
|
|
8653
|
+
.ui-media-thumbnail { position: relative; display: block; min-width: 0; height: auto; padding: var(--ui-space-sm); white-space: normal; text-align: start; }
|
|
8654
|
+
.ui-media-thumbnail .ui-button__content { display: grid; min-width: 0; width: 100%; gap: var(--ui-space-xs); }
|
|
8655
|
+
.ui-media-thumbnail__media { display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--ui-radius-sm); background: hsl(var(--surface-muted)); }
|
|
8656
|
+
.ui-media-thumbnail__media :where(img, picture, .ui-image) { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
|
|
8657
|
+
.ui-media-thumbnail__label, .ui-media-thumbnail__state { overflow-wrap: anywhere; }
|
|
8658
|
+
.ui-media-thumbnail__order { position: absolute; top: var(--ui-space-sm); inset-inline-end: var(--ui-space-sm); display: grid; place-items: center; min-width: 1.75rem; min-height: 1.75rem; padding-inline: var(--ui-space-xs); border-radius: var(--ui-radius-sm); color: hsl(var(--ink)); background: hsl(var(--surface)); }
|
|
8659
|
+
.ui-media-thumbnail[aria-pressed="true"] { border-color: hsl(var(--brand)); box-shadow: inset 0 0 0 1px hsl(var(--brand)); background: hsl(var(--brand-soft)); }
|
|
8660
|
+
.ui-media-thumbnail[aria-pressed="true"] .ui-media-thumbnail__label::before { content: '✓ '; }
|
|
8661
|
+
.ui-media-filmstrip { display: grid; min-width: 0; gap: var(--ui-space-sm); }
|
|
8662
|
+
.ui-media-filmstrip__heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ui-space-sm); }
|
|
8663
|
+
.ui-media-filmstrip__items { display: flex; gap: var(--ui-space-sm); min-width: 0; margin: 0; padding: var(--ui-space-xs); overflow-x: auto; list-style: none; }
|
|
8664
|
+
.ui-media-filmstrip__items > li { flex: 0 0 9rem; min-width: 0; display: grid; align-content: start; gap: var(--ui-space-xs); }
|
|
8665
|
+
.ui-media-filmstrip__items .ui-media-thumbnail { width: 100%; }
|
|
8666
|
+
|
|
8667
|
+
lumen-media-thumbnail.ui-media-thumbnail { padding: 0; }
|
|
8668
|
+
lumen-media-thumbnail > .ui-media-thumbnail { width: 100%; }
|