@santi020k/lumen 3.0.1 → 4.1.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 +211 -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 +564 -17
- package/package.json +26 -11
- package/release-manifest.json +22 -17
- package/styles/critical.css +696 -66
- package/styles/motion.css +61 -0
- package/styles/world-map.css +30 -0
- package/styles.css +1756 -409
- 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 +448 -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;
|
|
@@ -157,6 +179,17 @@
|
|
|
157
179
|
}
|
|
158
180
|
}
|
|
159
181
|
|
|
182
|
+
@keyframes ui-skeleton-pulse {
|
|
183
|
+
0%,
|
|
184
|
+
100% {
|
|
185
|
+
opacity: 1;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
50% {
|
|
189
|
+
opacity: 0.55;
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
|
|
160
193
|
@keyframes ui-spin {
|
|
161
194
|
to {
|
|
162
195
|
transform: rotate(360deg);
|
|
@@ -316,7 +349,8 @@
|
|
|
316
349
|
.ui-tree,
|
|
317
350
|
.ui-tree-grid,
|
|
318
351
|
.ui-typography,
|
|
319
|
-
.ui-virtual-list
|
|
352
|
+
.ui-virtual-list,
|
|
353
|
+
.ui-world-map
|
|
320
354
|
) {
|
|
321
355
|
box-sizing: border-box;
|
|
322
356
|
font-family: var(--ui-font);
|
|
@@ -639,21 +673,25 @@
|
|
|
639
673
|
|
|
640
674
|
.panel-surface {
|
|
641
675
|
background: hsl(var(--surface) / 0.96);
|
|
642
|
-
border: 1px solid hsl(var(--line));
|
|
676
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
643
677
|
box-shadow: var(--ui-shadow-md);
|
|
644
678
|
}
|
|
645
679
|
|
|
646
680
|
.panel-card,
|
|
647
681
|
.ui-card {
|
|
648
682
|
position: relative;
|
|
649
|
-
|
|
650
|
-
border: 1px solid hsl(var(--line));
|
|
683
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
651
684
|
border-radius: var(--ui-radius-lg);
|
|
652
685
|
background: hsl(var(--surface));
|
|
653
686
|
box-shadow: var(--ui-shadow-sm);
|
|
654
687
|
color: hsl(var(--ink));
|
|
655
688
|
}
|
|
656
689
|
|
|
690
|
+
.panel-card { overflow: hidden; }
|
|
691
|
+
|
|
692
|
+
/* Interactive content can extend beyond a card; media owns its own clipping. */
|
|
693
|
+
.ui-card { overflow: visible; overflow-wrap: anywhere; }
|
|
694
|
+
|
|
657
695
|
.card-interactive,
|
|
658
696
|
.ui-card--interactive {
|
|
659
697
|
transition:
|
|
@@ -673,49 +711,20 @@
|
|
|
673
711
|
box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.04);
|
|
674
712
|
}
|
|
675
713
|
|
|
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
|
-
}
|
|
714
|
+
.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);}
|
|
715
|
+
.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);}
|
|
716
|
+
.ui-card--spacious{--ui-card-gap:var(--ui-space-xl);--ui-card-padding:var(--ui-space-2xl);}
|
|
717
|
+
.ui-card__header{display:grid;gap:var(--ui-card-section-gap);}
|
|
718
|
+
.ui-card__title{color:hsl(var(--ink));font-size:1.125rem;font-weight:700;letter-spacing:-0.015em;line-height:1.3;}
|
|
719
|
+
.ui-card__description{color:hsl(var(--ink-soft));font-size:0.875rem;line-height:1.55;}
|
|
720
|
+
.ui-card__content{color:hsl(var(--ink-soft));}
|
|
721
|
+
.ui-card__footer{align-items:center;display:flex;flex-wrap:wrap;gap:var(--ui-space-related);}
|
|
722
|
+
.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;}
|
|
723
|
+
.ui-card__footer .ui-button__content,.ui-stack--wrap > .ui-button .ui-button__content{min-width:0;}
|
|
724
|
+
/* Parent owns spacing. */ .ui-card >:where(*),.ui-card__header >:where(*),.ui-field >:where(*){min-width:0;margin:0;}
|
|
725
|
+
.ui-card__content >:where(:first-child){margin-block-start:0;}
|
|
726
|
+
.ui-card__content >:where(:last-child){margin-block-end:0;}
|
|
727
|
+
.ui-card >:where([hidden]:not([hidden="until-found"])),.ui-card >:where(.ui-card__header,.ui-card__content,.ui-card__footer):empty{display:none;}
|
|
719
728
|
|
|
720
729
|
.ui-card--muted {
|
|
721
730
|
background: hsl(var(--surface-muted) / 0.72);
|
|
@@ -744,6 +753,7 @@
|
|
|
744
753
|
--ui-button-padding: 0.5rem 1rem;
|
|
745
754
|
--ui-button-radius: var(--ui-radius-sm);
|
|
746
755
|
|
|
756
|
+
position: relative;
|
|
747
757
|
display: inline-flex;
|
|
748
758
|
min-height: var(--ui-button-min-height);
|
|
749
759
|
align-items: center;
|
|
@@ -768,6 +778,23 @@
|
|
|
768
778
|
user-select: none;
|
|
769
779
|
}
|
|
770
780
|
|
|
781
|
+
.ui-button__content {
|
|
782
|
+
display: inline-flex;
|
|
783
|
+
align-items: center;
|
|
784
|
+
justify-content: center;
|
|
785
|
+
gap: inherit;
|
|
786
|
+
}
|
|
787
|
+
|
|
788
|
+
.ui-button--loading > .ui-button__content {
|
|
789
|
+
opacity: 0;
|
|
790
|
+
}
|
|
791
|
+
|
|
792
|
+
.ui-button--loading > .ui-spinner {
|
|
793
|
+
position: absolute;
|
|
794
|
+
inset: 0;
|
|
795
|
+
margin: auto;
|
|
796
|
+
}
|
|
797
|
+
|
|
771
798
|
.ui-button:hover {
|
|
772
799
|
transform: translateY(-1px);
|
|
773
800
|
}
|
|
@@ -890,7 +917,7 @@
|
|
|
890
917
|
min-height: 2.5rem;
|
|
891
918
|
align-items: center;
|
|
892
919
|
justify-content: center;
|
|
893
|
-
border: 1px solid hsl(var(--line));
|
|
920
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
894
921
|
border-radius: 999px;
|
|
895
922
|
background: hsl(var(--surface));
|
|
896
923
|
color: hsl(var(--ink));
|
|
@@ -922,7 +949,7 @@
|
|
|
922
949
|
display: grid;
|
|
923
950
|
gap: 0.375rem;
|
|
924
951
|
padding: 1rem 1.125rem;
|
|
925
|
-
border: 1px solid hsl(var(--line));
|
|
952
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
926
953
|
border-left: 0.25rem solid hsl(var(--brand));
|
|
927
954
|
border-radius: var(--ui-radius);
|
|
928
955
|
background: hsl(var(--brand-soft) / 0.52);
|
|
@@ -980,7 +1007,7 @@
|
|
|
980
1007
|
.ui-image--fit-cover { object-fit: cover; }
|
|
981
1008
|
.ui-image--radius-none { border-radius: 0; }
|
|
982
1009
|
.ui-image--radius-sm { border-radius: var(--ui-radius-sm); }
|
|
983
|
-
.ui-image--radius-md { border-radius: var(--ui-radius
|
|
1010
|
+
.ui-image--radius-md { border-radius: var(--ui-radius); }
|
|
984
1011
|
.ui-image--radius-lg { border-radius: var(--ui-radius-lg); }
|
|
985
1012
|
.ui-image--radius-full { border-radius: 9999px; }
|
|
986
1013
|
|
|
@@ -1012,23 +1039,118 @@
|
|
|
1012
1039
|
}
|
|
1013
1040
|
|
|
1014
1041
|
.ui-prose {
|
|
1042
|
+
overflow-wrap: anywhere;
|
|
1015
1043
|
max-width: 65ch;
|
|
1016
1044
|
color: hsl(var(--ink-soft));
|
|
1017
1045
|
line-height: 1.7;
|
|
1018
1046
|
}
|
|
1019
1047
|
|
|
1020
|
-
.ui-prose :where(h1, h2, h3, h4, strong) {
|
|
1048
|
+
.ui-prose :where(h1, h2, h3, h4, h5, h6, strong) {
|
|
1021
1049
|
color: hsl(var(--ink));
|
|
1022
1050
|
}
|
|
1023
1051
|
|
|
1024
|
-
.ui-prose :where(h1, h2, h3, h4, p, ul, ol) {
|
|
1025
|
-
margin-block: 0 0.75em;
|
|
1026
|
-
}
|
|
1027
|
-
|
|
1028
1052
|
.ui-prose :where(ul, ol) {
|
|
1029
1053
|
padding-inline-start: 1.25rem;
|
|
1030
1054
|
}
|
|
1031
1055
|
|
|
1056
|
+
.ui-prose :where(a) {
|
|
1057
|
+
color: hsl(var(--brand));
|
|
1058
|
+
text-decoration: underline;
|
|
1059
|
+
text-underline-offset: .2em;
|
|
1060
|
+
overflow-wrap: anywhere;
|
|
1061
|
+
}
|
|
1062
|
+
|
|
1063
|
+
.ui-prose :where(a:focus-visible) {
|
|
1064
|
+
outline: 2px solid hsl(var(--brand));
|
|
1065
|
+
outline-offset: 3px;
|
|
1066
|
+
border-radius: .125rem;
|
|
1067
|
+
}
|
|
1068
|
+
|
|
1069
|
+
.ui-prose :where(blockquote) {
|
|
1070
|
+
margin-inline: 0;
|
|
1071
|
+
padding-inline-start: 1rem;
|
|
1072
|
+
border-inline-start: 3px solid hsl(var(--line));
|
|
1073
|
+
color: hsl(var(--ink-soft));
|
|
1074
|
+
}
|
|
1075
|
+
|
|
1076
|
+
.ui-prose :where(hr) { margin-block: 1.5rem; border: 0; border-top: var(--ui-border-width, 1px) solid hsl(var(--line)); }
|
|
1077
|
+
.ui-prose :where(img, video) { max-width: 100%; height: auto; border-radius: var(--ui-radius-sm); }
|
|
1078
|
+
.ui-prose :where(code:not(.ui-code, .ui-code code)) {
|
|
1079
|
+
border-radius: .25rem;
|
|
1080
|
+
background: hsl(var(--surface-muted));
|
|
1081
|
+
color: hsl(var(--ink));
|
|
1082
|
+
padding: .125em .3em;
|
|
1083
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
|
1084
|
+
font-size: .875em;
|
|
1085
|
+
overflow-wrap: anywhere;
|
|
1086
|
+
}
|
|
1087
|
+
.ui-prose :where(pre:not(.ui-code pre)) {
|
|
1088
|
+
max-width: 100%;
|
|
1089
|
+
overflow-x: auto;
|
|
1090
|
+
padding: 1rem;
|
|
1091
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
1092
|
+
border-radius: var(--ui-radius-sm);
|
|
1093
|
+
background: hsl(var(--surface-muted));
|
|
1094
|
+
}
|
|
1095
|
+
.ui-prose :where(pre:not(.ui-code pre) code) { padding: 0; overflow-wrap: normal; }
|
|
1096
|
+
.ui-prose :where(table:not(.ui-table)) { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
|
|
1097
|
+
.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; }
|
|
1098
|
+
.ui-prose :where(table:not(.ui-table) th) { color: hsl(var(--ink)); font-weight: 600; }
|
|
1099
|
+
|
|
1100
|
+
.ui-image-comparison { display: grid; min-width: 0; gap: .75rem; margin: 0; }
|
|
1101
|
+
.ui-image-comparison__frame {
|
|
1102
|
+
position: relative;
|
|
1103
|
+
aspect-ratio: var(--ui-image-comparison-ratio, 1.77778);
|
|
1104
|
+
overflow: hidden;
|
|
1105
|
+
isolation: isolate;
|
|
1106
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
1107
|
+
border-radius: var(--ui-radius);
|
|
1108
|
+
background: hsl(var(--surface-muted));
|
|
1109
|
+
}
|
|
1110
|
+
.ui-image-comparison__before, .ui-image-comparison__after { position: absolute; inset: 0; }
|
|
1111
|
+
.ui-image-comparison__after { clip-path: inset(0 calc(100% - var(--ui-image-comparison-position, 50%)) 0 0); }
|
|
1112
|
+
.ui-image-comparison:dir(rtl) .ui-image-comparison__after { clip-path: inset(0 0 0 calc(100% - var(--ui-image-comparison-position, 50%))); }
|
|
1113
|
+
.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; }
|
|
1114
|
+
.ui-image-comparison[data-fit="contain"] .ui-image-comparison__frame :where(img, video) { object-fit: contain; }
|
|
1115
|
+
.ui-image-comparison__divider {
|
|
1116
|
+
position: absolute;
|
|
1117
|
+
inset-block: 0;
|
|
1118
|
+
inset-inline-start: var(--ui-image-comparison-position, 50%);
|
|
1119
|
+
width: 2px;
|
|
1120
|
+
background: hsl(var(--surface));
|
|
1121
|
+
box-shadow: 0 0 0 1px hsl(var(--ink) / .2);
|
|
1122
|
+
pointer-events: none;
|
|
1123
|
+
}
|
|
1124
|
+
.ui-image-comparison__divider::after {
|
|
1125
|
+
content: "↔";
|
|
1126
|
+
position: absolute;
|
|
1127
|
+
top: 50%;
|
|
1128
|
+
left: 50%;
|
|
1129
|
+
display: grid;
|
|
1130
|
+
place-items: center;
|
|
1131
|
+
width: 2rem;
|
|
1132
|
+
height: 2rem;
|
|
1133
|
+
transform: translate(-50%, -50%);
|
|
1134
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
1135
|
+
border-radius: 50%;
|
|
1136
|
+
background: hsl(var(--surface));
|
|
1137
|
+
color: hsl(var(--ink));
|
|
1138
|
+
box-shadow: 0 2px 8px hsl(var(--ink) / .15);
|
|
1139
|
+
}
|
|
1140
|
+
.ui-image-comparison__labels { display: flex; flex-direction: row-reverse; justify-content: space-between; gap: 1rem; color: hsl(var(--ink-soft)); font-size: .8125rem; }
|
|
1141
|
+
.ui-image-comparison__caption, .ui-image-comparison__control { display: grid; min-width: 0; gap: .5rem; }
|
|
1142
|
+
.ui-image-comparison__control { color: hsl(var(--ink)); font-size: .875rem; font-weight: 600; }
|
|
1143
|
+
.ui-image-comparison__range { width: 100%; min-width: 0; min-height: 2.75rem; margin: 0; }
|
|
1144
|
+
.ui-image-comparison:focus-within .ui-image-comparison__frame { outline: 2px solid hsl(var(--brand)); outline-offset: 3px; }
|
|
1145
|
+
|
|
1146
|
+
/* Alternate views retain image framing and the current reveal value. */
|
|
1147
|
+
.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); }
|
|
1148
|
+
.ui-image-comparison[data-mode="side-by-side"] :is(.ui-image-comparison__before, .ui-image-comparison__after) { position: relative; min-width: 0; }
|
|
1149
|
+
.ui-image-comparison:not([data-mode="reveal"])[data-mode] .ui-image-comparison__after { clip-path: none; }
|
|
1150
|
+
.ui-image-comparison:not([data-mode="reveal"])[data-mode] .ui-image-comparison__divider { display: none; }
|
|
1151
|
+
.ui-image-comparison[data-mode="side-by-side"] .ui-image-comparison__labels { flex-direction: row; }
|
|
1152
|
+
.ui-image-comparison [hidden] { display: none !important; }
|
|
1153
|
+
|
|
1032
1154
|
.ui-skip-link {
|
|
1033
1155
|
position: fixed;
|
|
1034
1156
|
z-index: 100000;
|
|
@@ -1355,7 +1477,7 @@
|
|
|
1355
1477
|
|
|
1356
1478
|
.ui-alert,
|
|
1357
1479
|
.ui-toast {
|
|
1358
|
-
border: 1px solid hsl(var(--line));
|
|
1480
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
1359
1481
|
border-radius: var(--ui-radius);
|
|
1360
1482
|
background: hsl(var(--surface));
|
|
1361
1483
|
color: hsl(var(--ink-soft));
|
|
@@ -1435,14 +1557,14 @@
|
|
|
1435
1557
|
.ui-toast--success {
|
|
1436
1558
|
border-color: hsl(var(--success) / 0.36);
|
|
1437
1559
|
background: hsl(var(--success) / 0.08);
|
|
1438
|
-
color: hsl(var(--
|
|
1560
|
+
color: hsl(var(--ink));
|
|
1439
1561
|
}
|
|
1440
1562
|
|
|
1441
1563
|
.ui-alert--warning,
|
|
1442
1564
|
.ui-toast--warning {
|
|
1443
1565
|
border-color: hsl(var(--warning) / 0.42);
|
|
1444
1566
|
background: hsl(var(--warning) / 0.1);
|
|
1445
|
-
color: hsl(var(--
|
|
1567
|
+
color: hsl(var(--ink));
|
|
1446
1568
|
}
|
|
1447
1569
|
|
|
1448
1570
|
.ui-badge {
|
|
@@ -1500,7 +1622,7 @@
|
|
|
1500
1622
|
.ui-input-otp {
|
|
1501
1623
|
min-height: 2.75rem;
|
|
1502
1624
|
width: 100%;
|
|
1503
|
-
border: 1px solid hsl(var(--line));
|
|
1625
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
1504
1626
|
border-radius: var(--ui-radius-sm);
|
|
1505
1627
|
background: hsl(var(--surface));
|
|
1506
1628
|
color: hsl(var(--ink));
|
|
@@ -1552,15 +1674,26 @@
|
|
|
1552
1674
|
background-image:
|
|
1553
1675
|
linear-gradient(45deg, transparent 50%, hsl(var(--ink-muted)) 50%),
|
|
1554
1676
|
linear-gradient(135deg, hsl(var(--ink-muted)) 50%, transparent 50%);
|
|
1555
|
-
background-position:
|
|
1556
|
-
calc(100% - 1rem) 50%,
|
|
1557
|
-
calc(100% - 0.72rem) 50%;
|
|
1677
|
+
background-position: var(--_ui-select-chevron, calc(100% - 1rem) 50%, calc(100% - 0.72rem) 50%);
|
|
1558
1678
|
background-size:
|
|
1559
1679
|
0.32rem 0.32rem,
|
|
1560
1680
|
0.32rem 0.32rem;
|
|
1561
1681
|
background-repeat: no-repeat;
|
|
1562
1682
|
}
|
|
1563
1683
|
|
|
1684
|
+
/*
|
|
1685
|
+
* Keep the chevron inside the inline-end padding. The private property inherits from the nearest
|
|
1686
|
+
* explicit `dir` attribute, so nested LTR regions inside RTL work and consumer CSS pipelines that
|
|
1687
|
+
* rewrite `:dir()` into language selectors cannot misplace it.
|
|
1688
|
+
*/
|
|
1689
|
+
[dir="rtl"] {
|
|
1690
|
+
--_ui-select-chevron: 0.72rem 50%, 1rem 50%;
|
|
1691
|
+
}
|
|
1692
|
+
|
|
1693
|
+
[dir="ltr"] {
|
|
1694
|
+
--_ui-select-chevron: calc(100% - 1rem) 50%, calc(100% - 0.72rem) 50%;
|
|
1695
|
+
}
|
|
1696
|
+
|
|
1564
1697
|
.ui-label {
|
|
1565
1698
|
color: hsl(var(--ink));
|
|
1566
1699
|
font-size: 0.875rem;
|
|
@@ -1572,7 +1705,7 @@
|
|
|
1572
1705
|
.ui-combobox,
|
|
1573
1706
|
.ui-select-field {
|
|
1574
1707
|
display: grid;
|
|
1575
|
-
gap:
|
|
1708
|
+
gap: var(--ui-space-related);
|
|
1576
1709
|
}
|
|
1577
1710
|
|
|
1578
1711
|
.ui-combobox,
|
|
@@ -1665,7 +1798,7 @@
|
|
|
1665
1798
|
width: 100%;
|
|
1666
1799
|
max-height: min(16rem, 50vh);
|
|
1667
1800
|
overflow-y: auto;
|
|
1668
|
-
border: 1px solid hsl(var(--line));
|
|
1801
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
1669
1802
|
border-radius: var(--ui-radius);
|
|
1670
1803
|
background: hsl(var(--surface));
|
|
1671
1804
|
box-shadow: var(--ui-shadow-md);
|
|
@@ -1674,6 +1807,7 @@
|
|
|
1674
1807
|
|
|
1675
1808
|
.ui-date-picker__popover {
|
|
1676
1809
|
width: min(21rem, calc(100vw - 2rem));
|
|
1810
|
+
color: inherit;
|
|
1677
1811
|
max-height: none;
|
|
1678
1812
|
overflow: visible;
|
|
1679
1813
|
border-radius: var(--ui-radius-lg);
|
|
@@ -1745,7 +1879,7 @@
|
|
|
1745
1879
|
align-items: center;
|
|
1746
1880
|
gap: 0.5rem;
|
|
1747
1881
|
overflow: hidden;
|
|
1748
|
-
border: 1px solid hsl(var(--line));
|
|
1882
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
1749
1883
|
border-radius: var(--ui-radius-sm);
|
|
1750
1884
|
background: hsl(var(--surface));
|
|
1751
1885
|
color: hsl(var(--ink-soft));
|
|
@@ -1778,36 +1912,118 @@
|
|
|
1778
1912
|
margin-inline-end: 0.25rem;
|
|
1779
1913
|
}
|
|
1780
1914
|
|
|
1915
|
+
.ui-country-flag {
|
|
1916
|
+
display: inline-flex;
|
|
1917
|
+
width: 1.5rem;
|
|
1918
|
+
height: 1.125rem;
|
|
1919
|
+
flex: 0 0 auto;
|
|
1920
|
+
align-items: center;
|
|
1921
|
+
justify-content: center;
|
|
1922
|
+
overflow: hidden;
|
|
1923
|
+
border-radius: 2px;
|
|
1924
|
+
box-shadow: 0 0 0 1px hsl(var(--line) / 0.7);
|
|
1925
|
+
font-size: 0.625rem;
|
|
1926
|
+
font-weight: 600;
|
|
1927
|
+
}
|
|
1928
|
+
.ui-country-flag > img { display: block; width: 100%; height: 100%; object-fit: cover; }
|
|
1929
|
+
.ui-phone-number { display: inline-flex; align-items: center; gap: 0.5rem; }
|
|
1930
|
+
.ui-phone-number:focus-visible { outline: 2px solid hsl(var(--brand)); outline-offset: 3px; }
|
|
1781
1931
|
.ui-phone-input {
|
|
1932
|
+
--ui-phone-height: 2.75rem;
|
|
1933
|
+
--ui-phone-padding: 0.75rem;
|
|
1934
|
+
--ui-phone-country-gap: 0.5rem;
|
|
1935
|
+
width: 100%;
|
|
1936
|
+
min-width: 0;
|
|
1937
|
+
min-height: var(--ui-phone-height);
|
|
1938
|
+
align-items: stretch;
|
|
1939
|
+
gap: 0;
|
|
1782
1940
|
padding: 0;
|
|
1941
|
+
background: hsl(var(--surface));
|
|
1783
1942
|
}
|
|
1784
|
-
.ui-phone-input
|
|
1943
|
+
.ui-phone-input[data-size="sm"] { --ui-phone-height: 2.5rem; --ui-phone-padding: 0.625rem; }
|
|
1944
|
+
.ui-phone-input[data-size="lg"] { --ui-phone-height: 3rem; --ui-phone-padding: 1rem; }
|
|
1945
|
+
.ui-phone-input > .ui-phone-input__picker {
|
|
1946
|
+
position: relative;
|
|
1947
|
+
display: flex;
|
|
1785
1948
|
flex: 0 0 auto;
|
|
1786
|
-
width:
|
|
1787
|
-
|
|
1949
|
+
max-width: 48%;
|
|
1950
|
+
align-items: stretch;
|
|
1951
|
+
padding: 0;
|
|
1952
|
+
border-inline-end: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
1953
|
+
transition: background-color var(--ui-duration-fast) var(--ui-ease);
|
|
1954
|
+
}
|
|
1955
|
+
.ui-phone-input__selection { display: none; }
|
|
1956
|
+
.ui-phone-input__country {
|
|
1957
|
+
width: 100%;
|
|
1958
|
+
height: calc(var(--ui-phone-height) - 2px);
|
|
1959
|
+
min-height: calc(var(--ui-phone-height) - 2px);
|
|
1788
1960
|
border: 0;
|
|
1789
1961
|
border-radius: 0;
|
|
1790
|
-
|
|
1962
|
+
background-color: transparent;
|
|
1791
1963
|
box-shadow: none;
|
|
1792
1964
|
}
|
|
1965
|
+
.ui-phone-input[data-phone-enhanced="true"] .ui-phone-input__selection {
|
|
1966
|
+
display: flex;
|
|
1967
|
+
align-items: center;
|
|
1968
|
+
gap: var(--ui-phone-country-gap);
|
|
1969
|
+
padding-inline: var(--ui-phone-padding);
|
|
1970
|
+
color: hsl(var(--ink));
|
|
1971
|
+
font-size: 0.875rem;
|
|
1972
|
+
font-variant-numeric: tabular-nums;
|
|
1973
|
+
pointer-events: none;
|
|
1974
|
+
}
|
|
1975
|
+
.ui-phone-input__chevron {
|
|
1976
|
+
width: 0.375rem;
|
|
1977
|
+
height: 0.375rem;
|
|
1978
|
+
margin-inline-start: 0.125rem;
|
|
1979
|
+
border-inline-end: 1.5px solid currentColor;
|
|
1980
|
+
border-block-end: 1.5px solid currentColor;
|
|
1981
|
+
color: hsl(var(--ink-muted));
|
|
1982
|
+
transform: translateY(-2px) rotate(45deg);
|
|
1983
|
+
}
|
|
1984
|
+
.ui-phone-input[data-phone-enhanced="true"] .ui-phone-input__country {
|
|
1985
|
+
position: absolute;
|
|
1986
|
+
inset: 0;
|
|
1987
|
+
width: 100%;
|
|
1988
|
+
height: 100%;
|
|
1989
|
+
opacity: 0;
|
|
1990
|
+
cursor: pointer;
|
|
1991
|
+
}
|
|
1992
|
+
.ui-phone-input:not([data-disabled]):not([data-readonly]) > .ui-phone-input__picker:hover { background: hsl(var(--surface-muted)); }
|
|
1993
|
+
.ui-phone-input > .ui-phone-input__picker:has(select:focus-visible) { background: hsl(var(--brand-soft)); }
|
|
1793
1994
|
.ui-phone-input > .ui-phone-input__number {
|
|
1794
|
-
flex: 1 1
|
|
1795
|
-
|
|
1995
|
+
flex: 1 1 0;
|
|
1996
|
+
width: 0;
|
|
1997
|
+
min-width: 0;
|
|
1998
|
+
height: calc(var(--ui-phone-height) - 2px);
|
|
1999
|
+
min-height: calc(var(--ui-phone-height) - 2px);
|
|
2000
|
+
padding-inline: var(--ui-phone-padding);
|
|
1796
2001
|
border: 0;
|
|
1797
2002
|
border-radius: 0;
|
|
2003
|
+
background: transparent;
|
|
1798
2004
|
box-shadow: none;
|
|
2005
|
+
font-size: 1rem;
|
|
2006
|
+
opacity: 1;
|
|
1799
2007
|
}
|
|
2008
|
+
.ui-phone-input > .ui-phone-input__number:focus { border: 0; box-shadow: none; outline: none; }
|
|
2009
|
+
.ui-phone-input:not([data-phone-enhanced]) .ui-phone-input__country:disabled { opacity: 1; }
|
|
2010
|
+
.ui-phone-input[data-disabled] { opacity: 0.55; }
|
|
2011
|
+
.ui-phone-input[data-readonly] { background: hsl(var(--surface-muted)); }
|
|
2012
|
+
.ui-phone-input[data-disabled] select, .ui-phone-input[data-readonly] select { cursor: default; }
|
|
1800
2013
|
.ui-phone-input[data-invalid="true"],
|
|
1801
|
-
.ui-phone-input:has(.ui-phone-input__number[aria-invalid="true"]) {
|
|
1802
|
-
|
|
1803
|
-
}
|
|
2014
|
+
.ui-phone-input:has(.ui-phone-input__number[aria-invalid="true"]) { border-color: hsl(var(--danger)); }
|
|
2015
|
+
.ui-phone-input[data-invalid="true"]:focus-within { box-shadow: 0 0 0 3px hsl(var(--danger) / 0.18); }
|
|
2016
|
+
.ui-phone-input__error { display: block; margin-block-start: 0.375rem; color: hsl(var(--danger)); font-size: 0.8125rem; }
|
|
2017
|
+
.ui-phone-input__error[hidden] { display: none; }
|
|
2018
|
+
@media (prefers-reduced-motion: reduce) { .ui-phone-input__picker { transition: none; } }
|
|
2019
|
+
@media (forced-colors: active) { .ui-phone-input__picker:has(select:focus-visible) { outline: 2px solid Highlight; outline-offset: -2px; } }
|
|
1804
2020
|
|
|
1805
2021
|
.ui-checkbox {
|
|
1806
2022
|
width: 1rem;
|
|
1807
2023
|
height: 1rem;
|
|
1808
2024
|
margin: 0;
|
|
1809
2025
|
appearance: none;
|
|
1810
|
-
border: 1px solid hsl(var(--line));
|
|
2026
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
1811
2027
|
border-radius: 0.25rem;
|
|
1812
2028
|
background: hsl(var(--surface));
|
|
1813
2029
|
cursor: pointer;
|
|
@@ -1827,7 +2043,7 @@
|
|
|
1827
2043
|
.ui-radio-group {
|
|
1828
2044
|
display: grid;
|
|
1829
2045
|
gap: 0.7rem;
|
|
1830
|
-
border: 1px solid hsl(var(--line));
|
|
2046
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
1831
2047
|
border-radius: var(--ui-radius-lg);
|
|
1832
2048
|
background: hsl(var(--surface));
|
|
1833
2049
|
padding: 0.9rem;
|
|
@@ -1857,7 +2073,7 @@
|
|
|
1857
2073
|
height: 1.4rem;
|
|
1858
2074
|
margin: 0;
|
|
1859
2075
|
appearance: none;
|
|
1860
|
-
border: 1px solid hsl(var(--line));
|
|
2076
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
1861
2077
|
border-radius: 999px;
|
|
1862
2078
|
background: hsl(var(--surface-strong));
|
|
1863
2079
|
cursor: pointer;
|
|
@@ -1933,7 +2149,9 @@
|
|
|
1933
2149
|
}
|
|
1934
2150
|
|
|
1935
2151
|
.ui-skeleton {
|
|
1936
|
-
|
|
2152
|
+
/* A default height, not a minimum, lets explicit styles and classes size placeholders below 1rem. */
|
|
2153
|
+
width: var(--ui-skeleton-width, auto);
|
|
2154
|
+
height: var(--ui-skeleton-height, 1rem);
|
|
1937
2155
|
border-radius: var(--ui-radius-sm);
|
|
1938
2156
|
background: linear-gradient(
|
|
1939
2157
|
90deg,
|
|
@@ -1945,6 +2163,44 @@
|
|
|
1945
2163
|
animation: ui-shimmer 2.2s linear infinite;
|
|
1946
2164
|
}
|
|
1947
2165
|
|
|
2166
|
+
/* Skeletons that wrap text or elements keep growing with their content. */
|
|
2167
|
+
.ui-skeleton:where(:not(:empty)) {
|
|
2168
|
+
height: var(--ui-skeleton-height, auto);
|
|
2169
|
+
min-height: 1rem;
|
|
2170
|
+
}
|
|
2171
|
+
|
|
2172
|
+
lumen-skeleton.ui-skeleton,
|
|
2173
|
+
lumen-progress.ui-progress {
|
|
2174
|
+
display: block;
|
|
2175
|
+
}
|
|
2176
|
+
|
|
2177
|
+
.ui-skeleton--text {
|
|
2178
|
+
height: var(--ui-skeleton-height, 0.75rem);
|
|
2179
|
+
}
|
|
2180
|
+
|
|
2181
|
+
.ui-skeleton--circle {
|
|
2182
|
+
flex: 0 0 auto;
|
|
2183
|
+
width: var(--ui-skeleton-width, var(--ui-skeleton-height, 2.5rem));
|
|
2184
|
+
height: var(--ui-skeleton-height, var(--ui-skeleton-width, 2.5rem));
|
|
2185
|
+
border-radius: 50%;
|
|
2186
|
+
}
|
|
2187
|
+
|
|
2188
|
+
.ui-skeleton--pulse {
|
|
2189
|
+
background: hsl(var(--surface-strong));
|
|
2190
|
+
animation: ui-skeleton-pulse 1.6s ease-in-out infinite;
|
|
2191
|
+
}
|
|
2192
|
+
|
|
2193
|
+
.ui-skeleton--static {
|
|
2194
|
+
animation: none;
|
|
2195
|
+
}
|
|
2196
|
+
|
|
2197
|
+
/* Critical CSS omits the universal reduction below, so Skeleton stops its own loop. */
|
|
2198
|
+
@media (prefers-reduced-motion: reduce) {
|
|
2199
|
+
.ui-skeleton {
|
|
2200
|
+
animation: none;
|
|
2201
|
+
}
|
|
2202
|
+
}
|
|
2203
|
+
|
|
1948
2204
|
.ui-icon {
|
|
1949
2205
|
--ui-icon-size: 1em;
|
|
1950
2206
|
display: inline-flex;
|
|
@@ -2002,6 +2258,7 @@
|
|
|
2002
2258
|
|
|
2003
2259
|
.ui-separator {
|
|
2004
2260
|
display: block;
|
|
2261
|
+
margin: 0;
|
|
2005
2262
|
flex-shrink: 0;
|
|
2006
2263
|
border: 0;
|
|
2007
2264
|
background: hsl(var(--line));
|
|
@@ -2020,39 +2277,33 @@
|
|
|
2020
2277
|
|
|
2021
2278
|
.ui-accordion {
|
|
2022
2279
|
display: grid;
|
|
2023
|
-
|
|
2280
|
+
min-width: 0;
|
|
2281
|
+
gap: var(--ui-space-md);
|
|
2024
2282
|
}
|
|
2025
2283
|
|
|
2026
2284
|
.ui-accordion details,
|
|
2027
2285
|
.ui-collapsible {
|
|
2286
|
+
--ui-disclosure-inset: var(--ui-space-lg);
|
|
2287
|
+
min-width: 0;
|
|
2028
2288
|
overflow: clip;
|
|
2029
|
-
|
|
2289
|
+
padding-inline: var(--ui-disclosure-inset);
|
|
2290
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2030
2291
|
border-radius: var(--ui-radius-lg);
|
|
2031
2292
|
background: hsl(var(--surface));
|
|
2032
2293
|
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);
|
|
2294
|
+
transition: border-color var(--ui-duration-fast) var(--ui-ease);
|
|
2045
2295
|
}
|
|
2046
2296
|
|
|
2047
2297
|
.ui-accordion--flush {
|
|
2048
2298
|
gap: 0;
|
|
2049
|
-
border-top: 1px solid hsl(var(--line));
|
|
2299
|
+
border-top: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2050
2300
|
}
|
|
2051
2301
|
|
|
2052
2302
|
.ui-accordion--flush details {
|
|
2303
|
+
--ui-disclosure-inset: var(--ui-space-xs);
|
|
2053
2304
|
overflow: visible;
|
|
2054
2305
|
border: 0;
|
|
2055
|
-
border-bottom: 1px solid hsl(var(--line));
|
|
2306
|
+
border-bottom: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2056
2307
|
border-radius: 0;
|
|
2057
2308
|
background: transparent;
|
|
2058
2309
|
box-shadow: none;
|
|
@@ -2066,17 +2317,18 @@
|
|
|
2066
2317
|
|
|
2067
2318
|
.ui-accordion summary,
|
|
2068
2319
|
.ui-collapsible summary {
|
|
2069
|
-
|
|
2070
|
-
|
|
2071
|
-
|
|
2072
|
-
gap: 1rem;
|
|
2320
|
+
position: relative;
|
|
2321
|
+
display: block;
|
|
2322
|
+
margin-inline: calc(-1 * var(--ui-disclosure-inset));
|
|
2073
2323
|
cursor: pointer;
|
|
2074
2324
|
list-style: none;
|
|
2075
2325
|
color: hsl(var(--ink));
|
|
2076
|
-
font-weight:
|
|
2077
|
-
line-height: 1.
|
|
2326
|
+
font-weight: 600;
|
|
2327
|
+
line-height: 1.5;
|
|
2328
|
+
overflow-wrap: anywhere;
|
|
2078
2329
|
min-height: 3.5rem;
|
|
2079
|
-
padding:
|
|
2330
|
+
padding: var(--ui-space-lg) var(--ui-disclosure-inset);
|
|
2331
|
+
padding-inline-end: calc(var(--ui-disclosure-inset) + 2rem + var(--ui-space-md));
|
|
2080
2332
|
transition:
|
|
2081
2333
|
background-color var(--ui-duration-fast) var(--ui-ease),
|
|
2082
2334
|
color var(--ui-duration-fast) var(--ui-ease);
|
|
@@ -2089,17 +2341,17 @@
|
|
|
2089
2341
|
|
|
2090
2342
|
.ui-accordion details[open] > summary,
|
|
2091
2343
|
.ui-collapsible[open] > summary {
|
|
2092
|
-
|
|
2344
|
+
margin-block-end: var(--ui-space-lg);
|
|
2093
2345
|
}
|
|
2094
2346
|
|
|
2095
2347
|
.ui-accordion details[open],
|
|
2096
2348
|
.ui-collapsible[open] {
|
|
2097
|
-
padding-block-end:
|
|
2349
|
+
padding-block-end: var(--ui-space-lg);
|
|
2098
2350
|
}
|
|
2099
2351
|
|
|
2100
2352
|
.ui-accordion details > :not(summary),
|
|
2101
2353
|
.ui-collapsible > :not(summary) {
|
|
2102
|
-
margin-inline:
|
|
2354
|
+
margin-inline: 0;
|
|
2103
2355
|
}
|
|
2104
2356
|
|
|
2105
2357
|
.ui-accordion summary::-webkit-details-marker,
|
|
@@ -2107,33 +2359,52 @@
|
|
|
2107
2359
|
display: none;
|
|
2108
2360
|
}
|
|
2109
2361
|
|
|
2362
|
+
.ui-accordion summary::before,
|
|
2363
|
+
.ui-collapsible summary::before {
|
|
2364
|
+
position: absolute;
|
|
2365
|
+
inset-inline-end: var(--ui-disclosure-inset);
|
|
2366
|
+
top: var(--ui-space-md);
|
|
2367
|
+
width: 2rem;
|
|
2368
|
+
height: 2rem;
|
|
2369
|
+
border-radius: 50%;
|
|
2370
|
+
background: hsl(var(--surface-muted));
|
|
2371
|
+
content: "";
|
|
2372
|
+
pointer-events: none;
|
|
2373
|
+
transition: background-color var(--ui-duration-fast) var(--ui-ease);
|
|
2374
|
+
}
|
|
2375
|
+
|
|
2110
2376
|
.ui-accordion summary::after,
|
|
2111
2377
|
.ui-collapsible summary::after {
|
|
2378
|
+
position: absolute;
|
|
2379
|
+
inset-inline-end: calc(var(--ui-disclosure-inset) + 0.75rem);
|
|
2380
|
+
top: calc(var(--ui-space-md) + 0.6875rem);
|
|
2112
2381
|
width: 0.5rem;
|
|
2113
2382
|
height: 0.5rem;
|
|
2114
2383
|
border-right: 1.5px solid hsl(var(--ink-muted));
|
|
2115
2384
|
border-bottom: 1.5px solid hsl(var(--ink-muted));
|
|
2116
2385
|
content: "";
|
|
2117
2386
|
border-radius: 1px;
|
|
2118
|
-
|
|
2119
|
-
transform: rotate(45deg)
|
|
2387
|
+
pointer-events: none;
|
|
2388
|
+
transform: rotate(45deg);
|
|
2120
2389
|
transition:
|
|
2121
2390
|
border-color var(--ui-duration-fast) var(--ui-ease),
|
|
2122
|
-
box-shadow var(--ui-duration-fast) var(--ui-ease),
|
|
2123
2391
|
transform var(--ui-duration-fast) var(--ui-ease);
|
|
2124
2392
|
}
|
|
2125
2393
|
|
|
2394
|
+
.ui-accordion details[open] > summary::before,
|
|
2395
|
+
.ui-collapsible[open] > summary::before {
|
|
2396
|
+
background: hsl(var(--brand-soft));
|
|
2397
|
+
}
|
|
2398
|
+
|
|
2126
2399
|
.ui-accordion details[open] > summary::after,
|
|
2127
2400
|
.ui-collapsible[open] > summary::after {
|
|
2128
2401
|
border-color: hsl(var(--brand));
|
|
2129
|
-
|
|
2130
|
-
transform: rotate(225deg) translate(-0.1rem, -0.1rem);
|
|
2402
|
+
transform: translateY(0.1875rem) rotate(225deg);
|
|
2131
2403
|
}
|
|
2132
2404
|
|
|
2133
2405
|
.ui-accordion summary:hover::after,
|
|
2134
2406
|
.ui-collapsible summary:hover::after {
|
|
2135
2407
|
border-color: hsl(var(--brand));
|
|
2136
|
-
box-shadow: 0 0 0 0.45rem hsl(var(--brand-soft));
|
|
2137
2408
|
}
|
|
2138
2409
|
|
|
2139
2410
|
.ui-accordion summary:focus-visible,
|
|
@@ -2144,12 +2415,12 @@
|
|
|
2144
2415
|
}
|
|
2145
2416
|
|
|
2146
2417
|
.ui-accordion--flush details[open] {
|
|
2147
|
-
padding-block-end:
|
|
2418
|
+
padding-block-end: var(--ui-space-lg);
|
|
2148
2419
|
}
|
|
2149
2420
|
|
|
2150
2421
|
.ui-accordion--flush summary {
|
|
2151
2422
|
min-height: 4rem;
|
|
2152
|
-
padding:
|
|
2423
|
+
padding-block: var(--ui-space-lg);
|
|
2153
2424
|
}
|
|
2154
2425
|
|
|
2155
2426
|
.ui-accordion--flush summary:hover {
|
|
@@ -2159,14 +2430,17 @@
|
|
|
2159
2430
|
}
|
|
2160
2431
|
|
|
2161
2432
|
.ui-accordion--flush details[open] > summary {
|
|
2433
|
+
margin-block-end: 0;
|
|
2434
|
+
padding-block-end: var(--ui-space-md);
|
|
2162
2435
|
color: hsl(var(--ink));
|
|
2163
2436
|
}
|
|
2164
2437
|
|
|
2165
|
-
.ui-accordion--flush
|
|
2166
|
-
|
|
2438
|
+
.ui-accordion--flush summary::before {
|
|
2439
|
+
display: none;
|
|
2167
2440
|
}
|
|
2168
2441
|
|
|
2169
2442
|
.ui-accordion--flush details[open] > summary::before {
|
|
2443
|
+
display: block;
|
|
2170
2444
|
width: 0.2rem;
|
|
2171
2445
|
height: 1.25rem;
|
|
2172
2446
|
border-radius: 999px;
|
|
@@ -2174,24 +2448,28 @@
|
|
|
2174
2448
|
content: "";
|
|
2175
2449
|
position: absolute;
|
|
2176
2450
|
inset-inline-start: -0.875rem;
|
|
2177
|
-
|
|
2178
|
-
|
|
2179
|
-
.ui-accordion--flush summary {
|
|
2180
|
-
position: relative;
|
|
2451
|
+
top: var(--ui-space-lg);
|
|
2181
2452
|
}
|
|
2182
2453
|
|
|
2183
2454
|
.ui-accordion p,
|
|
2184
2455
|
.ui-collapsible p {
|
|
2185
2456
|
color: hsl(var(--ink-soft));
|
|
2186
|
-
margin-block
|
|
2457
|
+
margin-block: 0;
|
|
2187
2458
|
line-height: 1.6;
|
|
2188
2459
|
}
|
|
2189
2460
|
|
|
2461
|
+
.ui-accordion details > :not(summary) + :not(summary),
|
|
2462
|
+
.ui-collapsible > :not(summary) + :not(summary) {
|
|
2463
|
+
margin-block-start: var(--ui-space-related);
|
|
2464
|
+
}
|
|
2465
|
+
|
|
2190
2466
|
@media (prefers-reduced-motion: reduce) {
|
|
2191
2467
|
.ui-accordion details,
|
|
2192
2468
|
.ui-collapsible,
|
|
2193
2469
|
.ui-accordion summary,
|
|
2194
2470
|
.ui-collapsible summary,
|
|
2471
|
+
.ui-accordion summary::before,
|
|
2472
|
+
.ui-collapsible summary::before,
|
|
2195
2473
|
.ui-accordion summary::after,
|
|
2196
2474
|
.ui-collapsible summary::after {
|
|
2197
2475
|
transition: none;
|
|
@@ -2204,7 +2482,7 @@
|
|
|
2204
2482
|
.ui-sheet {
|
|
2205
2483
|
width: min(100% - 2rem, 34rem);
|
|
2206
2484
|
max-width: 34rem;
|
|
2207
|
-
border: 1px solid hsl(var(--line));
|
|
2485
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2208
2486
|
border-radius: var(--ui-radius-lg);
|
|
2209
2487
|
background: hsl(var(--surface));
|
|
2210
2488
|
color: hsl(var(--ink));
|
|
@@ -2262,6 +2540,69 @@
|
|
|
2262
2540
|
gap: 0.5rem;
|
|
2263
2541
|
}
|
|
2264
2542
|
|
|
2543
|
+
/* Compound dialogs keep actions visible while the task body scrolls. */
|
|
2544
|
+
.ui-dialog:has(> [data-slot="dialog-body"]) {
|
|
2545
|
+
padding: 0;
|
|
2546
|
+
overflow: hidden;
|
|
2547
|
+
}
|
|
2548
|
+
|
|
2549
|
+
.ui-dialog[open]:has(> [data-slot="dialog-body"]),
|
|
2550
|
+
lumen-dialog.ui-dialog:not([hidden]):has(> [data-slot="dialog-body"]) {
|
|
2551
|
+
display: flex;
|
|
2552
|
+
flex-direction: column;
|
|
2553
|
+
}
|
|
2554
|
+
|
|
2555
|
+
.ui-dialog:has(> [data-slot="dialog-body"]) > * + * {
|
|
2556
|
+
margin-block-start: 0;
|
|
2557
|
+
}
|
|
2558
|
+
|
|
2559
|
+
.ui-dialog-header,
|
|
2560
|
+
.ui-dialog-footer {
|
|
2561
|
+
display: block;
|
|
2562
|
+
flex: none;
|
|
2563
|
+
padding: 1.25rem;
|
|
2564
|
+
}
|
|
2565
|
+
|
|
2566
|
+
.ui-dialog-header {
|
|
2567
|
+
border-block-end: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2568
|
+
}
|
|
2569
|
+
|
|
2570
|
+
.ui-dialog-title {
|
|
2571
|
+
display: block;
|
|
2572
|
+
margin: 0;
|
|
2573
|
+
font-size: 1.125rem;
|
|
2574
|
+
font-weight: 600;
|
|
2575
|
+
line-height: 1.4;
|
|
2576
|
+
}
|
|
2577
|
+
|
|
2578
|
+
.ui-dialog-title > :is(h2, h3, h4) {
|
|
2579
|
+
margin: 0;
|
|
2580
|
+
font: inherit;
|
|
2581
|
+
}
|
|
2582
|
+
|
|
2583
|
+
.ui-dialog-body {
|
|
2584
|
+
display: block;
|
|
2585
|
+
flex: 1 1 auto;
|
|
2586
|
+
min-height: 0;
|
|
2587
|
+
padding: 1.25rem;
|
|
2588
|
+
overflow-y: auto;
|
|
2589
|
+
overscroll-behavior: contain;
|
|
2590
|
+
scroll-padding-block: 1.25rem;
|
|
2591
|
+
}
|
|
2592
|
+
|
|
2593
|
+
.ui-dialog-footer,
|
|
2594
|
+
.ui-dialog .ui-dialog-footer {
|
|
2595
|
+
display: flex;
|
|
2596
|
+
flex-wrap: wrap;
|
|
2597
|
+
justify-content: flex-end;
|
|
2598
|
+
gap: 0.5rem;
|
|
2599
|
+
border-block-start: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2600
|
+
}
|
|
2601
|
+
|
|
2602
|
+
lumen-dialog-close {
|
|
2603
|
+
display: inline-flex;
|
|
2604
|
+
}
|
|
2605
|
+
|
|
2265
2606
|
.ui-alert-dialog {
|
|
2266
2607
|
max-width: 28rem;
|
|
2267
2608
|
}
|
|
@@ -2304,7 +2645,7 @@
|
|
|
2304
2645
|
top: calc(100% + 0.5rem);
|
|
2305
2646
|
left: 0;
|
|
2306
2647
|
min-width: min(18rem, calc(100vw - 2rem));
|
|
2307
|
-
border: 1px solid hsl(var(--line));
|
|
2648
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2308
2649
|
border-radius: var(--ui-radius);
|
|
2309
2650
|
background: hsl(var(--surface));
|
|
2310
2651
|
color: hsl(var(--ink-soft));
|
|
@@ -2355,7 +2696,7 @@
|
|
|
2355
2696
|
.ui-menu {
|
|
2356
2697
|
margin: 0;
|
|
2357
2698
|
list-style: none;
|
|
2358
|
-
border: 1px solid hsl(var(--line));
|
|
2699
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2359
2700
|
border-radius: var(--ui-radius);
|
|
2360
2701
|
background: hsl(var(--surface));
|
|
2361
2702
|
box-shadow: var(--ui-shadow-md);
|
|
@@ -2366,6 +2707,8 @@
|
|
|
2366
2707
|
|
|
2367
2708
|
.ui-menu[data-ui-dropdown-menu] {
|
|
2368
2709
|
margin: 0;
|
|
2710
|
+
max-width: 100%;
|
|
2711
|
+
min-width: 0;
|
|
2369
2712
|
border: 0;
|
|
2370
2713
|
border-radius: 0;
|
|
2371
2714
|
background: transparent;
|
|
@@ -2373,6 +2716,12 @@
|
|
|
2373
2716
|
padding: 0;
|
|
2374
2717
|
}
|
|
2375
2718
|
|
|
2719
|
+
.ui-menu[data-ui-dropdown-menu] > .ui-menu__trigger {
|
|
2720
|
+
max-width: 100%;
|
|
2721
|
+
white-space: normal;
|
|
2722
|
+
overflow-wrap: anywhere;
|
|
2723
|
+
}
|
|
2724
|
+
|
|
2376
2725
|
.ui-menu :where(a, button, [role="menuitem"]) {
|
|
2377
2726
|
display: flex;
|
|
2378
2727
|
width: 100%;
|
|
@@ -2430,7 +2779,7 @@
|
|
|
2430
2779
|
min-height: var(--ui-context-navigation-min-height);
|
|
2431
2780
|
align-items: center;
|
|
2432
2781
|
gap: var(--ui-context-navigation-gap);
|
|
2433
|
-
border-block: 1px solid hsl(var(--line));
|
|
2782
|
+
border-block: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2434
2783
|
background: hsl(var(--surface));
|
|
2435
2784
|
padding: var(--ui-context-navigation-padding);
|
|
2436
2785
|
}
|
|
@@ -2442,7 +2791,7 @@
|
|
|
2442
2791
|
flex: 0 0 auto;
|
|
2443
2792
|
align-items: center;
|
|
2444
2793
|
padding-inline-end: var(--ui-context-navigation-gap);
|
|
2445
|
-
border-inline-end: 1px solid hsl(var(--line));
|
|
2794
|
+
border-inline-end: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2446
2795
|
}
|
|
2447
2796
|
|
|
2448
2797
|
.ui-context-navigation > :where(.ui-navigation-menu, lumen-navigation-menu) {
|
|
@@ -2471,7 +2820,7 @@
|
|
|
2471
2820
|
display: inline-flex;
|
|
2472
2821
|
align-items: center;
|
|
2473
2822
|
gap: 0.25rem;
|
|
2474
|
-
border: 1px solid hsl(var(--line));
|
|
2823
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2475
2824
|
border-radius: var(--ui-radius);
|
|
2476
2825
|
background: hsl(var(--surface));
|
|
2477
2826
|
padding: 0.25rem;
|
|
@@ -2593,7 +2942,7 @@
|
|
|
2593
2942
|
min-height: 2.25rem;
|
|
2594
2943
|
align-items: center;
|
|
2595
2944
|
justify-content: center;
|
|
2596
|
-
border: 1px solid hsl(var(--line));
|
|
2945
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2597
2946
|
border-radius: var(--ui-radius-sm);
|
|
2598
2947
|
background: hsl(var(--surface));
|
|
2599
2948
|
color: hsl(var(--ink-soft));
|
|
@@ -2639,10 +2988,13 @@
|
|
|
2639
2988
|
|
|
2640
2989
|
.ui-tabs {
|
|
2641
2990
|
display: grid;
|
|
2991
|
+
min-width: 0;
|
|
2642
2992
|
gap: 1rem;
|
|
2643
2993
|
}
|
|
2644
2994
|
|
|
2645
2995
|
.ui-tabs [role="tablist"] {
|
|
2996
|
+
box-sizing: border-box;
|
|
2997
|
+
min-width: 0;
|
|
2646
2998
|
display: inline-flex;
|
|
2647
2999
|
width: fit-content;
|
|
2648
3000
|
max-width: 100%;
|
|
@@ -2650,7 +3002,7 @@
|
|
|
2650
3002
|
gap: 0.25rem;
|
|
2651
3003
|
overflow-x: auto;
|
|
2652
3004
|
overscroll-behavior-inline: contain;
|
|
2653
|
-
border: 1px solid hsl(var(--line));
|
|
3005
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2654
3006
|
border-radius: var(--ui-radius);
|
|
2655
3007
|
background: hsl(var(--surface-muted));
|
|
2656
3008
|
padding: 0.25rem;
|
|
@@ -2690,7 +3042,7 @@
|
|
|
2690
3042
|
|
|
2691
3043
|
display: block;
|
|
2692
3044
|
overflow: hidden;
|
|
2693
|
-
border: 1px solid hsl(var(--line));
|
|
3045
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2694
3046
|
border-radius: var(--ui-radius-lg);
|
|
2695
3047
|
background: hsl(var(--surface-muted));
|
|
2696
3048
|
}
|
|
@@ -2700,7 +3052,7 @@
|
|
|
2700
3052
|
width: auto;
|
|
2701
3053
|
gap: 0.25rem;
|
|
2702
3054
|
border: 0;
|
|
2703
|
-
border-bottom: 1px solid hsl(var(--line));
|
|
3055
|
+
border-bottom: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2704
3056
|
border-radius: 0;
|
|
2705
3057
|
background: hsl(var(--surface));
|
|
2706
3058
|
padding: var(--ui-code-tabs-list-padding);
|
|
@@ -2711,7 +3063,7 @@
|
|
|
2711
3063
|
border: 0;
|
|
2712
3064
|
border-radius: var(--ui-radius-sm);
|
|
2713
3065
|
background: transparent;
|
|
2714
|
-
color: hsl(var(--ink-
|
|
3066
|
+
color: hsl(var(--ink-soft));
|
|
2715
3067
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
|
2716
3068
|
font-size: 0.8125rem;
|
|
2717
3069
|
font-weight: 500;
|
|
@@ -2783,7 +3135,7 @@
|
|
|
2783
3135
|
|
|
2784
3136
|
width: 100%;
|
|
2785
3137
|
overflow-x: auto;
|
|
2786
|
-
border: 1px solid hsl(var(--line));
|
|
3138
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2787
3139
|
border-radius: var(--ui-radius);
|
|
2788
3140
|
background: hsl(var(--surface));
|
|
2789
3141
|
}
|
|
@@ -2817,6 +3169,15 @@
|
|
|
2817
3169
|
white-space: nowrap;
|
|
2818
3170
|
}
|
|
2819
3171
|
|
|
3172
|
+
.ui-table-wrap--records thead:focus-within {
|
|
3173
|
+
position: static;
|
|
3174
|
+
width: auto;
|
|
3175
|
+
height: auto;
|
|
3176
|
+
overflow: visible;
|
|
3177
|
+
clip-path: none;
|
|
3178
|
+
white-space: normal;
|
|
3179
|
+
}
|
|
3180
|
+
|
|
2820
3181
|
.ui-table-wrap--records tbody tr {
|
|
2821
3182
|
display: grid;
|
|
2822
3183
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
|
|
@@ -2825,7 +3186,7 @@
|
|
|
2825
3186
|
}
|
|
2826
3187
|
|
|
2827
3188
|
.ui-table-wrap--records tbody tr + tr {
|
|
2828
|
-
border-top: 1px solid hsl(var(--line));
|
|
3189
|
+
border-top: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2829
3190
|
}
|
|
2830
3191
|
|
|
2831
3192
|
.ui-table-wrap--records tbody td {
|
|
@@ -2851,9 +3212,24 @@
|
|
|
2851
3212
|
}
|
|
2852
3213
|
}
|
|
2853
3214
|
|
|
3215
|
+
.ui-data-table__sort-controls,
|
|
3216
|
+
.ui-filter-bar__controls,
|
|
3217
|
+
.ui-filter-bar__active {
|
|
3218
|
+
display: flex;
|
|
3219
|
+
flex-wrap: wrap;
|
|
3220
|
+
align-items: end;
|
|
3221
|
+
gap: var(--ui-space-related, 0.75rem);
|
|
3222
|
+
}
|
|
3223
|
+
|
|
3224
|
+
.ui-data-table__sort-controls .ui-field,
|
|
3225
|
+
.ui-filter-bar__controls > * {
|
|
3226
|
+
flex: 1 1 12rem;
|
|
3227
|
+
min-width: 0;
|
|
3228
|
+
}
|
|
3229
|
+
|
|
2854
3230
|
.ui-table-wrap th,
|
|
2855
3231
|
.ui-data-table th {
|
|
2856
|
-
border-bottom: 1px solid hsl(var(--line));
|
|
3232
|
+
border-bottom: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2857
3233
|
color: hsl(var(--ink));
|
|
2858
3234
|
font-weight: 650;
|
|
2859
3235
|
padding: var(--ui-table-cell-padding);
|
|
@@ -2955,7 +3331,7 @@
|
|
|
2955
3331
|
.ui-scroll-area {
|
|
2956
3332
|
max-height: min(18rem, 60vh);
|
|
2957
3333
|
overflow: auto;
|
|
2958
|
-
border: 1px solid hsl(var(--line));
|
|
3334
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2959
3335
|
border-radius: var(--ui-radius);
|
|
2960
3336
|
background: hsl(var(--surface));
|
|
2961
3337
|
color: hsl(var(--ink-soft));
|
|
@@ -2967,7 +3343,7 @@
|
|
|
2967
3343
|
min-height: 12rem;
|
|
2968
3344
|
min-width: 14rem;
|
|
2969
3345
|
overflow: hidden;
|
|
2970
|
-
border: 1px solid hsl(var(--line));
|
|
3346
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
2971
3347
|
border-radius: var(--ui-radius);
|
|
2972
3348
|
background: hsl(var(--surface));
|
|
2973
3349
|
color: hsl(var(--ink-soft));
|
|
@@ -3033,7 +3409,7 @@
|
|
|
3033
3409
|
width: min(var(--ui-sidebar-width), 100%);
|
|
3034
3410
|
flex-direction: column;
|
|
3035
3411
|
gap: var(--ui-sidebar-gap);
|
|
3036
|
-
border: 1px solid hsl(var(--line));
|
|
3412
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
3037
3413
|
border-radius: var(--ui-radius-lg);
|
|
3038
3414
|
background: hsl(var(--surface));
|
|
3039
3415
|
box-shadow: var(--ui-shadow-sm);
|
|
@@ -3210,7 +3586,7 @@
|
|
|
3210
3586
|
min-width: 0;
|
|
3211
3587
|
min-height: var(--ui-kanban-column-min-height);
|
|
3212
3588
|
padding: 0.875rem;
|
|
3213
|
-
border: 1px solid hsl(var(--line));
|
|
3589
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
3214
3590
|
border-radius: var(--ui-radius-lg);
|
|
3215
3591
|
background: hsl(var(--surface-muted));
|
|
3216
3592
|
scroll-snap-align: start;
|
|
@@ -3269,12 +3645,12 @@
|
|
|
3269
3645
|
--ui-code-header-bg: hsl(var(--surface) / 0.72);
|
|
3270
3646
|
--ui-code-inline-bg: hsl(var(--brand-soft));
|
|
3271
3647
|
--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(--
|
|
3648
|
+
--ui-code-muted: hsl(var(--ink-soft));
|
|
3649
|
+
--ui-code-token-accent: hsl(var(--brand-solid));
|
|
3650
|
+
--ui-code-token-comment: hsl(var(--ink-soft));
|
|
3651
|
+
--ui-code-token-keyword: hsl(var(--brand-solid));
|
|
3652
|
+
--ui-code-token-string: hsl(var(--ink-soft));
|
|
3653
|
+
--ui-code-token-symbol: hsl(var(--ink-soft));
|
|
3278
3654
|
--ui-code-token-type: hsl(var(--brand-solid));
|
|
3279
3655
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
|
3280
3656
|
}
|
|
@@ -3579,7 +3955,7 @@
|
|
|
3579
3955
|
display: inline-flex;
|
|
3580
3956
|
min-height: 1.35rem;
|
|
3581
3957
|
align-items: center;
|
|
3582
|
-
border: 1px solid hsl(var(--line));
|
|
3958
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
3583
3959
|
border-radius: 0.35rem;
|
|
3584
3960
|
background: hsl(var(--surface-muted));
|
|
3585
3961
|
color: hsl(var(--ink));
|
|
@@ -3625,7 +4001,7 @@
|
|
|
3625
4001
|
flex-shrink: 0;
|
|
3626
4002
|
place-items: center;
|
|
3627
4003
|
overflow: hidden;
|
|
3628
|
-
border: 1px solid hsl(var(--line));
|
|
4004
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
3629
4005
|
border-radius: 999px;
|
|
3630
4006
|
background: hsl(var(--surface-muted));
|
|
3631
4007
|
color: hsl(var(--ink));
|
|
@@ -3658,7 +4034,7 @@
|
|
|
3658
4034
|
min-width: 0;
|
|
3659
4035
|
align-items: center;
|
|
3660
4036
|
gap: 0.75rem;
|
|
3661
|
-
border: 1px solid hsl(var(--line));
|
|
4037
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
3662
4038
|
border-radius: var(--ui-radius);
|
|
3663
4039
|
background: hsl(var(--surface));
|
|
3664
4040
|
color: hsl(var(--ink-soft));
|
|
@@ -3670,9 +4046,63 @@
|
|
|
3670
4046
|
border-color: hsl(var(--brand) / 0.42);
|
|
3671
4047
|
}
|
|
3672
4048
|
|
|
4049
|
+
.ui-attachment-list {
|
|
4050
|
+
display: grid;
|
|
4051
|
+
min-width: 0;
|
|
4052
|
+
gap: var(--ui-space-related);
|
|
4053
|
+
margin: 0;
|
|
4054
|
+
padding: 0;
|
|
4055
|
+
list-style: none;
|
|
4056
|
+
}
|
|
4057
|
+
|
|
4058
|
+
.ui-attachment-list > li {
|
|
4059
|
+
min-width: 0;
|
|
4060
|
+
list-style: none;
|
|
4061
|
+
}
|
|
4062
|
+
|
|
4063
|
+
.ui-attachment-list .ui-attachment {
|
|
4064
|
+
flex-wrap: wrap;
|
|
4065
|
+
overflow-wrap: anywhere;
|
|
4066
|
+
}
|
|
4067
|
+
|
|
4068
|
+
.ui-attachment-list .ui-attachment > * {
|
|
4069
|
+
min-width: 0;
|
|
4070
|
+
}
|
|
4071
|
+
|
|
4072
|
+
.ui-attachment-preview {
|
|
4073
|
+
display: grid;
|
|
4074
|
+
min-width: 0;
|
|
4075
|
+
gap: var(--ui-space-related);
|
|
4076
|
+
margin: 0;
|
|
4077
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
4078
|
+
border-radius: var(--ui-radius);
|
|
4079
|
+
padding: var(--ui-space-inset);
|
|
4080
|
+
background: hsl(var(--surface));
|
|
4081
|
+
color: hsl(var(--ink));
|
|
4082
|
+
overflow-wrap: anywhere;
|
|
4083
|
+
}
|
|
4084
|
+
|
|
4085
|
+
.ui-attachment-preview [data-slot="attachment-preview-media"] img {
|
|
4086
|
+
display: block;
|
|
4087
|
+
width: 100%;
|
|
4088
|
+
max-height: 28rem;
|
|
4089
|
+
object-fit: contain;
|
|
4090
|
+
}
|
|
4091
|
+
|
|
4092
|
+
.ui-attachment-preview [data-slot="attachment-preview-fallback"] {
|
|
4093
|
+
margin: 0;
|
|
4094
|
+
color: hsl(var(--ink-muted));
|
|
4095
|
+
}
|
|
4096
|
+
|
|
4097
|
+
.ui-attachment-preview [data-slot="attachment-preview-actions"] {
|
|
4098
|
+
display: flex;
|
|
4099
|
+
flex-wrap: wrap;
|
|
4100
|
+
gap: var(--ui-space-related);
|
|
4101
|
+
}
|
|
4102
|
+
|
|
3673
4103
|
.ui-bubble {
|
|
3674
4104
|
max-width: min(42rem, 100%);
|
|
3675
|
-
border: 1px solid hsl(var(--line));
|
|
4105
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
3676
4106
|
border-radius: 1rem;
|
|
3677
4107
|
background: hsl(var(--surface));
|
|
3678
4108
|
color: hsl(var(--ink-soft));
|
|
@@ -3736,7 +4166,7 @@
|
|
|
3736
4166
|
gap: 0.75rem;
|
|
3737
4167
|
overflow-y: auto;
|
|
3738
4168
|
scroll-behavior: smooth;
|
|
3739
|
-
border: 1px solid hsl(var(--line));
|
|
4169
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
3740
4170
|
border-radius: var(--ui-radius-lg);
|
|
3741
4171
|
background: hsl(var(--surface));
|
|
3742
4172
|
padding: 0.75rem;
|
|
@@ -3745,7 +4175,7 @@
|
|
|
3745
4175
|
.ui-command {
|
|
3746
4176
|
display: grid;
|
|
3747
4177
|
gap: 0.5rem;
|
|
3748
|
-
border: 1px solid hsl(var(--line));
|
|
4178
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
3749
4179
|
border-radius: var(--ui-radius-lg);
|
|
3750
4180
|
background: hsl(var(--surface));
|
|
3751
4181
|
box-shadow: var(--ui-shadow-md);
|
|
@@ -3769,7 +4199,7 @@
|
|
|
3769
4199
|
}
|
|
3770
4200
|
|
|
3771
4201
|
.ui-calendar {
|
|
3772
|
-
border: 1px solid hsl(var(--line));
|
|
4202
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
3773
4203
|
border-radius: var(--ui-radius-lg);
|
|
3774
4204
|
background: hsl(var(--surface));
|
|
3775
4205
|
box-shadow: var(--ui-shadow-sm);
|
|
@@ -3797,7 +4227,7 @@
|
|
|
3797
4227
|
width: 2rem;
|
|
3798
4228
|
height: 2rem;
|
|
3799
4229
|
place-items: center;
|
|
3800
|
-
border: 1px solid hsl(var(--line));
|
|
4230
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
3801
4231
|
border-radius: var(--ui-radius-sm);
|
|
3802
4232
|
background: hsl(var(--surface));
|
|
3803
4233
|
color: hsl(var(--ink-soft));
|
|
@@ -3893,7 +4323,9 @@
|
|
|
3893
4323
|
.ui-input-otp-field {
|
|
3894
4324
|
position: relative;
|
|
3895
4325
|
display: inline-grid;
|
|
3896
|
-
width:
|
|
4326
|
+
width: fit-content;
|
|
4327
|
+
max-width: 100%;
|
|
4328
|
+
min-width: 0;
|
|
3897
4329
|
}
|
|
3898
4330
|
|
|
3899
4331
|
.ui-input-otp {
|
|
@@ -3902,9 +4334,12 @@
|
|
|
3902
4334
|
text-align: center;
|
|
3903
4335
|
}
|
|
3904
4336
|
|
|
4337
|
+
/* A 1px-wide text field makes Chromium apply maxlength to the old value when input replaces a selection. */
|
|
3905
4338
|
.ui-input-otp__native[data-ui-enhanced="true"] {
|
|
3906
4339
|
position: absolute;
|
|
3907
|
-
|
|
4340
|
+
inset-block-start: 0;
|
|
4341
|
+
inset-inline-start: 0;
|
|
4342
|
+
width: 100%;
|
|
3908
4343
|
height: 1px;
|
|
3909
4344
|
overflow: hidden;
|
|
3910
4345
|
clip-path: inset(50%);
|
|
@@ -3913,9 +4348,11 @@
|
|
|
3913
4348
|
}
|
|
3914
4349
|
|
|
3915
4350
|
.ui-input-otp__segments {
|
|
3916
|
-
display:
|
|
3917
|
-
|
|
3918
|
-
|
|
4351
|
+
display: grid;
|
|
4352
|
+
grid-auto-flow: column;
|
|
4353
|
+
grid-auto-columns: minmax(0, 2.5rem);
|
|
4354
|
+
gap: clamp(0.25rem, 1vw, 0.45rem);
|
|
4355
|
+
min-width: 0;
|
|
3919
4356
|
}
|
|
3920
4357
|
|
|
3921
4358
|
.ui-input-otp__segments[hidden] {
|
|
@@ -3924,10 +4361,11 @@
|
|
|
3924
4361
|
|
|
3925
4362
|
.ui-input-otp__segment {
|
|
3926
4363
|
display: inline-grid;
|
|
3927
|
-
width:
|
|
4364
|
+
width: 100%;
|
|
4365
|
+
min-width: 0;
|
|
3928
4366
|
min-height: 2.75rem;
|
|
3929
4367
|
place-items: center;
|
|
3930
|
-
border: 1px solid hsl(var(--line));
|
|
4368
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
3931
4369
|
border-radius: var(--ui-radius-sm);
|
|
3932
4370
|
background: hsl(var(--surface));
|
|
3933
4371
|
color: hsl(var(--ink));
|
|
@@ -3958,7 +4396,7 @@
|
|
|
3958
4396
|
.ui-carousel {
|
|
3959
4397
|
position: relative;
|
|
3960
4398
|
overflow: hidden;
|
|
3961
|
-
border: 1px solid hsl(var(--line));
|
|
4399
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
3962
4400
|
border-radius: var(--ui-radius-lg);
|
|
3963
4401
|
background: hsl(var(--surface));
|
|
3964
4402
|
color: hsl(var(--ink));
|
|
@@ -3976,7 +4414,7 @@
|
|
|
3976
4414
|
.ui-carousel [data-ui-carousel-viewport] > * {
|
|
3977
4415
|
min-width: min(18rem, 82%);
|
|
3978
4416
|
scroll-snap-align: start;
|
|
3979
|
-
border: 1px solid hsl(var(--line));
|
|
4417
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
3980
4418
|
border-radius: var(--ui-radius);
|
|
3981
4419
|
background: hsl(var(--surface-muted));
|
|
3982
4420
|
padding: 1rem;
|
|
@@ -3990,23 +4428,19 @@
|
|
|
3990
4428
|
}
|
|
3991
4429
|
|
|
3992
4430
|
.ui-chart {
|
|
4431
|
+
container-type: inline-size;
|
|
3993
4432
|
position: relative;
|
|
3994
|
-
display:
|
|
3995
|
-
|
|
4433
|
+
display: flex;
|
|
4434
|
+
flex-direction: column;
|
|
4435
|
+
gap: 1.25rem;
|
|
3996
4436
|
overflow: hidden;
|
|
3997
|
-
border: 1px solid hsl(var(--line));
|
|
4437
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
3998
4438
|
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));
|
|
4439
|
+
background: hsl(var(--surface));
|
|
4007
4440
|
color: hsl(var(--ink));
|
|
4008
|
-
box-shadow: var(--
|
|
4009
|
-
padding: 1rem;
|
|
4441
|
+
box-shadow: 0 2px 8px hsl(var(--ink) / 0.025);
|
|
4442
|
+
padding: clamp(1rem, 3vw, 1.5rem);
|
|
4443
|
+
font-variant-numeric: tabular-nums;
|
|
4010
4444
|
}
|
|
4011
4445
|
|
|
4012
4446
|
.ui-chart--bare {
|
|
@@ -4028,7 +4462,19 @@
|
|
|
4028
4462
|
|
|
4029
4463
|
.ui-chart__heading {
|
|
4030
4464
|
display: grid;
|
|
4031
|
-
gap: 0.
|
|
4465
|
+
gap: 0.375rem;
|
|
4466
|
+
}
|
|
4467
|
+
|
|
4468
|
+
.ui-chart__heading h3 {
|
|
4469
|
+
font-size: 0.9375rem;
|
|
4470
|
+
font-weight: 650;
|
|
4471
|
+
letter-spacing: -0.025em;
|
|
4472
|
+
}
|
|
4473
|
+
|
|
4474
|
+
.ui-chart__heading p {
|
|
4475
|
+
color: hsl(var(--ink-soft));
|
|
4476
|
+
font-size: 0.75rem;
|
|
4477
|
+
line-height: 1.6;
|
|
4032
4478
|
}
|
|
4033
4479
|
|
|
4034
4480
|
.ui-chart h2,
|
|
@@ -4039,49 +4485,63 @@
|
|
|
4039
4485
|
|
|
4040
4486
|
.ui-chart [data-ui-chart-value] {
|
|
4041
4487
|
color: hsl(var(--ink));
|
|
4042
|
-
font-size: clamp(1.
|
|
4043
|
-
font-weight:
|
|
4488
|
+
font-size: clamp(1.75rem, 4vw, 2.75rem);
|
|
4489
|
+
font-weight: 650;
|
|
4490
|
+
letter-spacing: -0.055em;
|
|
4044
4491
|
line-height: 1;
|
|
4045
4492
|
}
|
|
4046
4493
|
|
|
4047
|
-
.ui-
|
|
4494
|
+
.ui-chart__plot > svg {
|
|
4048
4495
|
display: block;
|
|
4049
4496
|
width: 100%;
|
|
4050
|
-
|
|
4497
|
+
height: auto;
|
|
4498
|
+
min-height: 0;
|
|
4499
|
+
min-width: 32rem;
|
|
4051
4500
|
color: hsl(var(--brand));
|
|
4052
4501
|
}
|
|
4053
4502
|
|
|
4503
|
+
: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 {
|
|
4504
|
+
min-width: 0;
|
|
4505
|
+
}
|
|
4506
|
+
|
|
4054
4507
|
.ui-chart__plot {
|
|
4055
4508
|
min-width: 0;
|
|
4056
4509
|
overflow-x: auto;
|
|
4510
|
+
overscroll-behavior-inline: contain;
|
|
4511
|
+
scrollbar-width: thin;
|
|
4512
|
+
scrollbar-color: hsl(var(--ink-muted)) hsl(var(--surface-muted));
|
|
4513
|
+
border-radius: var(--ui-radius-sm);
|
|
4514
|
+
}
|
|
4515
|
+
|
|
4516
|
+
.ui-chart__plot:focus-visible {
|
|
4517
|
+
outline: 2px solid hsl(var(--brand));
|
|
4518
|
+
outline-offset: -2px;
|
|
4057
4519
|
}
|
|
4058
4520
|
|
|
4059
4521
|
.ui-chart__empty {
|
|
4060
4522
|
min-height: 10rem;
|
|
4061
4523
|
display: grid;
|
|
4062
4524
|
margin: 0;
|
|
4063
|
-
color: hsl(var(--ink-
|
|
4525
|
+
color: hsl(var(--ink-soft));
|
|
4064
4526
|
place-items: center;
|
|
4065
4527
|
text-align: center;
|
|
4066
4528
|
}
|
|
4067
4529
|
|
|
4068
|
-
.ui-
|
|
4069
|
-
|
|
4070
|
-
}
|
|
4071
|
-
|
|
4072
|
-
.ui-chart svg :where(path, polyline, line) {
|
|
4530
|
+
.ui-chart svg :where(path, polyline, line),
|
|
4531
|
+
.ui-sparkline__line {
|
|
4073
4532
|
vector-effect: non-scaling-stroke;
|
|
4074
4533
|
stroke-linecap: round;
|
|
4075
4534
|
stroke-linejoin: round;
|
|
4076
4535
|
}
|
|
4077
4536
|
|
|
4078
4537
|
.ui-chart figcaption {
|
|
4079
|
-
color: hsl(var(--ink-
|
|
4538
|
+
color: hsl(var(--ink-soft));
|
|
4080
4539
|
font-size: 0.8125rem;
|
|
4081
4540
|
line-height: 1.5;
|
|
4082
4541
|
}
|
|
4083
4542
|
|
|
4084
|
-
.ui-chart__legend
|
|
4543
|
+
.ui-chart__legend,
|
|
4544
|
+
.ui-heatmap__legend {
|
|
4085
4545
|
display: flex;
|
|
4086
4546
|
flex-wrap: wrap;
|
|
4087
4547
|
gap: 0.5rem 1rem;
|
|
@@ -4099,56 +4559,108 @@
|
|
|
4099
4559
|
}
|
|
4100
4560
|
|
|
4101
4561
|
.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);
|
|
4562
|
+
width: 0.5rem;
|
|
4563
|
+
height: 0.5rem;
|
|
4564
|
+
border-radius: 0.15rem;
|
|
4565
|
+
background: var(--ui-chart-color);
|
|
4107
4566
|
}
|
|
4108
4567
|
|
|
4109
4568
|
.ui-chart__grid line {
|
|
4110
|
-
stroke: hsl(var(--chart-grid) / 0.
|
|
4569
|
+
stroke: hsl(var(--chart-grid) / 0.5);
|
|
4111
4570
|
stroke-width: 1;
|
|
4571
|
+
stroke-dasharray: 2 5;
|
|
4112
4572
|
}
|
|
4113
4573
|
|
|
4114
4574
|
.ui-chart__grid text,
|
|
4115
|
-
.ui-chart__axis-labels text
|
|
4575
|
+
.ui-chart__axis-labels text,
|
|
4576
|
+
.ui-chart__annotation text,
|
|
4577
|
+
.ui-heatmap__missing {
|
|
4116
4578
|
fill: hsl(var(--chart-axis));
|
|
4117
4579
|
font-size: 0.6875rem;
|
|
4118
4580
|
}
|
|
4119
4581
|
|
|
4582
|
+
.ui-chart__annotation text {
|
|
4583
|
+
paint-order: stroke;
|
|
4584
|
+
stroke: hsl(var(--surface));
|
|
4585
|
+
stroke-width: 5px;
|
|
4586
|
+
}
|
|
4587
|
+
|
|
4120
4588
|
.ui-chart__grid text {
|
|
4121
4589
|
dominant-baseline: middle;
|
|
4122
4590
|
text-anchor: end;
|
|
4123
4591
|
}
|
|
4124
4592
|
|
|
4125
|
-
.ui-chart__reference
|
|
4593
|
+
.ui-chart__reference,
|
|
4594
|
+
.ui-chart__crosshair,
|
|
4595
|
+
.ui-chart__annotation line,
|
|
4596
|
+
.ui-waterfall-chart__connector {
|
|
4126
4597
|
stroke: hsl(var(--ink-muted));
|
|
4127
4598
|
stroke-dasharray: 5 5;
|
|
4128
4599
|
stroke-width: 1.5;
|
|
4129
4600
|
}
|
|
4130
4601
|
|
|
4602
|
+
/* Datum marks remain decorative; the actions disclosure supplies native keyboard controls. */
|
|
4603
|
+
.ui-chart [data-ui-chart-datum] {
|
|
4604
|
+
cursor: pointer;
|
|
4605
|
+
}
|
|
4606
|
+
|
|
4607
|
+
.ui-chart svg .ui-chart__datum-hit {
|
|
4608
|
+
fill: transparent;
|
|
4609
|
+
stroke: none;
|
|
4610
|
+
pointer-events: all;
|
|
4611
|
+
}
|
|
4612
|
+
|
|
4613
|
+
|
|
4614
|
+
.ui-chart__actions {
|
|
4615
|
+
min-width: 0;
|
|
4616
|
+
}
|
|
4617
|
+
|
|
4618
|
+
.ui-chart__actions summary {
|
|
4619
|
+
cursor: pointer;
|
|
4620
|
+
}
|
|
4621
|
+
|
|
4622
|
+
.ui-chart__actions ul {
|
|
4623
|
+
display: grid;
|
|
4624
|
+
gap: var(--ui-space-related);
|
|
4625
|
+
padding: 0;
|
|
4626
|
+
list-style: none;
|
|
4627
|
+
}
|
|
4628
|
+
|
|
4629
|
+
.ui-chart__actions .ui-button {
|
|
4630
|
+
height: auto;
|
|
4631
|
+
min-height: 44px;
|
|
4632
|
+
max-width: 100%;
|
|
4633
|
+
white-space: normal;
|
|
4634
|
+
text-align: start;
|
|
4635
|
+
}
|
|
4636
|
+
|
|
4637
|
+
.ui-chart__actions .ui-button__content {
|
|
4638
|
+
min-width: 0;
|
|
4639
|
+
overflow-wrap: anywhere;
|
|
4640
|
+
}
|
|
4641
|
+
|
|
4131
4642
|
.ui-chart__data {
|
|
4132
|
-
|
|
4643
|
+
width: 100%;
|
|
4644
|
+
min-width: 0;
|
|
4645
|
+
align-self: stretch;
|
|
4646
|
+
margin-block-start: auto;
|
|
4647
|
+
border-top: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
4133
4648
|
color: hsl(var(--ink-soft));
|
|
4134
4649
|
font-size: 0.8125rem;
|
|
4135
4650
|
padding-block-start: 0.75rem;
|
|
4136
4651
|
}
|
|
4137
4652
|
|
|
4138
4653
|
.ui-chart__data summary {
|
|
4139
|
-
width: fit-content;
|
|
4140
4654
|
min-height: 2.75rem;
|
|
4141
|
-
display:
|
|
4655
|
+
display: flex;
|
|
4142
4656
|
align-items: center;
|
|
4143
|
-
gap: 0.
|
|
4144
|
-
border: 1px solid hsl(var(--line));
|
|
4657
|
+
gap: 0.75rem;
|
|
4145
4658
|
border-radius: var(--ui-radius-sm);
|
|
4146
|
-
background: hsl(var(--surface-muted));
|
|
4147
4659
|
color: hsl(var(--ink-soft));
|
|
4148
4660
|
cursor: pointer;
|
|
4149
|
-
font-weight:
|
|
4661
|
+
font-weight: 600;
|
|
4150
4662
|
list-style: none;
|
|
4151
|
-
padding: 0.
|
|
4663
|
+
padding: 0.625rem 0.75rem;
|
|
4152
4664
|
user-select: none;
|
|
4153
4665
|
}
|
|
4154
4666
|
|
|
@@ -4156,48 +4668,53 @@
|
|
|
4156
4668
|
display: none;
|
|
4157
4669
|
}
|
|
4158
4670
|
|
|
4159
|
-
.ui-chart__data summary::
|
|
4160
|
-
width:
|
|
4161
|
-
height:
|
|
4162
|
-
display: grid;
|
|
4671
|
+
.ui-chart__data summary::after {
|
|
4672
|
+
width: 0.4375rem;
|
|
4673
|
+
height: 0.4375rem;
|
|
4163
4674
|
flex: 0 0 auto;
|
|
4164
|
-
|
|
4165
|
-
|
|
4166
|
-
|
|
4167
|
-
|
|
4168
|
-
|
|
4169
|
-
|
|
4170
|
-
place-items: center;
|
|
4675
|
+
margin-inline-start: auto;
|
|
4676
|
+
margin-inline-end: 0.25rem;
|
|
4677
|
+
border-right: 1.5px solid currentColor;
|
|
4678
|
+
border-bottom: 1.5px solid currentColor;
|
|
4679
|
+
content: "";
|
|
4680
|
+
transform: rotate(45deg);
|
|
4171
4681
|
}
|
|
4172
4682
|
|
|
4173
|
-
.ui-chart__data[open] summary::
|
|
4174
|
-
|
|
4683
|
+
.ui-chart__data[open] summary::after {
|
|
4684
|
+
transform: rotate(225deg);
|
|
4175
4685
|
}
|
|
4176
4686
|
|
|
4177
|
-
.ui-chart__data summary:hover
|
|
4178
|
-
|
|
4179
|
-
background: hsl(var(--
|
|
4687
|
+
.ui-chart__data summary:hover,
|
|
4688
|
+
.ui-chart__data[open] summary {
|
|
4689
|
+
background: hsl(var(--surface-muted));
|
|
4180
4690
|
color: hsl(var(--ink));
|
|
4181
4691
|
}
|
|
4182
4692
|
|
|
4183
|
-
.ui-chart__data summary:focus-visible {
|
|
4184
|
-
outline: 2px solid hsl(var(--brand)
|
|
4185
|
-
outline-offset:
|
|
4693
|
+
.ui-chart__data :where(summary, [role="group"]):focus-visible {
|
|
4694
|
+
outline: 2px solid hsl(var(--brand));
|
|
4695
|
+
outline-offset: 2px;
|
|
4186
4696
|
}
|
|
4187
4697
|
|
|
4188
4698
|
.ui-chart__data > div {
|
|
4189
|
-
|
|
4190
|
-
|
|
4699
|
+
max-height: 20rem;
|
|
4700
|
+
overflow: auto;
|
|
4701
|
+
overscroll-behavior: contain;
|
|
4702
|
+
scrollbar-gutter: stable;
|
|
4703
|
+
margin-block-start: 0.5rem;
|
|
4704
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
4705
|
+
border-radius: var(--ui-radius-sm);
|
|
4191
4706
|
}
|
|
4192
4707
|
|
|
4193
4708
|
.ui-chart__data table {
|
|
4194
4709
|
width: 100%;
|
|
4195
|
-
border-collapse:
|
|
4710
|
+
border-collapse: separate;
|
|
4711
|
+
border-spacing: 0;
|
|
4712
|
+
font-variant-numeric: tabular-nums;
|
|
4196
4713
|
}
|
|
4197
4714
|
|
|
4198
4715
|
.ui-chart__data :where(th, td) {
|
|
4199
|
-
border-bottom: 1px solid hsl(var(--line));
|
|
4200
|
-
padding: 0.
|
|
4716
|
+
border-bottom: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
4717
|
+
padding: 0.75rem;
|
|
4201
4718
|
text-align: end;
|
|
4202
4719
|
white-space: nowrap;
|
|
4203
4720
|
}
|
|
@@ -4208,9 +4725,74 @@
|
|
|
4208
4725
|
|
|
4209
4726
|
.ui-chart__data th {
|
|
4210
4727
|
color: hsl(var(--ink));
|
|
4211
|
-
font-weight:
|
|
4728
|
+
font-weight: 600;
|
|
4729
|
+
}
|
|
4730
|
+
|
|
4731
|
+
.ui-chart__data thead th {
|
|
4732
|
+
position: sticky;
|
|
4733
|
+
z-index: 1;
|
|
4734
|
+
top: 0;
|
|
4735
|
+
background: hsl(var(--surface-muted));
|
|
4736
|
+
}
|
|
4737
|
+
|
|
4738
|
+
.ui-chart__data tbody tr:nth-child(even) {
|
|
4739
|
+
background: hsl(var(--surface-muted) / 0.4);
|
|
4740
|
+
}
|
|
4741
|
+
|
|
4742
|
+
.ui-chart__data tbody tr:hover {
|
|
4743
|
+
background: hsl(var(--brand-soft));
|
|
4744
|
+
}
|
|
4745
|
+
|
|
4746
|
+
.ui-chart__data tbody tr:last-child > * {
|
|
4747
|
+
border-bottom: 0;
|
|
4212
4748
|
}
|
|
4213
4749
|
|
|
4750
|
+
.ui-bullet-chart__values,
|
|
4751
|
+
.ui-bullet-chart__ticks { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
|
|
4752
|
+
.ui-bullet-chart__values { flex-wrap: wrap; align-items: end; }
|
|
4753
|
+
.ui-bullet-chart__values > div { display: grid; gap: .25rem; }
|
|
4754
|
+
.ui-bullet-chart__values span,
|
|
4755
|
+
.ui-bullet-chart__ticks,
|
|
4756
|
+
.ui-bullet-chart__ranges { color: hsl(var(--ink-soft)); font-size: .75rem; }
|
|
4757
|
+
.ui-bullet-chart__values > div > strong { font-size: clamp(2rem, 5vw, 3rem); line-height: 1; letter-spacing: -.04em; }
|
|
4758
|
+
.ui-bullet-chart__values p { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; font-size: .875rem; }
|
|
4759
|
+
.ui-bullet-chart__values strong,
|
|
4760
|
+
.ui-bullet-chart__ticks,
|
|
4761
|
+
.ui-bullet-chart__ranges { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
|
|
4762
|
+
.ui-bullet-chart__plot { padding-block: 1rem .25rem; }
|
|
4763
|
+
.ui-bullet-chart__track { position: relative; height: 2.5rem; background: hsl(var(--surface-muted)); border-radius: .375rem; }
|
|
4764
|
+
.ui-bullet-chart__range,
|
|
4765
|
+
.ui-bullet-chart__bar { position: absolute; background: var(--ui-chart-color); }
|
|
4766
|
+
.ui-bullet-chart__range { inset-block: 0; box-shadow: inset -1px 0 hsl(var(--surface)); }
|
|
4767
|
+
.ui-bullet-chart__range:first-child { border-radius: .375rem 0 0 .375rem; }
|
|
4768
|
+
.ui-bullet-chart__bar { top: .75rem; height: 1rem; border-radius: .25rem; box-shadow: 0 1px 2px hsl(var(--ink) / .12); }
|
|
4769
|
+
.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; }
|
|
4770
|
+
.ui-bullet-chart__target::before,
|
|
4771
|
+
.ui-bullet-chart__target::after { content: ""; position: absolute; left: -3px; width: 9px; height: 3px; background: inherit; border-radius: 1px; }
|
|
4772
|
+
.ui-bullet-chart__target::before { top: 0; }
|
|
4773
|
+
.ui-bullet-chart__target::after { bottom: 0; }
|
|
4774
|
+
.ui-bullet-chart__target-key { width: 3px; height: 1rem; background: hsl(var(--ink)); flex: none; }
|
|
4775
|
+
.ui-bullet-chart__ticks { margin-top: 1rem; }
|
|
4776
|
+
.ui-bullet-chart__ticks > span { flex: 1; min-width: 0; }
|
|
4777
|
+
.ui-bullet-chart__ticks > span:nth-child(2) { text-align: center; }
|
|
4778
|
+
.ui-bullet-chart__ticks > span:last-child { text-align: end; }
|
|
4779
|
+
.ui-bullet-chart__ranges { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; list-style: none; margin: 0; padding: 0; }
|
|
4780
|
+
.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))); }
|
|
4781
|
+
.ui-bullet-chart__ranges li > span:first-child { color: hsl(var(--ink)); font-weight: 600; }
|
|
4782
|
+
|
|
4783
|
+
.ui-comparison-chart__legend, .ui-comparison-chart__label { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem 1.5rem; flex-wrap: wrap; }
|
|
4784
|
+
.ui-comparison-chart__legend { color: hsl(var(--ink-soft)); font-size: .75rem; }
|
|
4785
|
+
.ui-comparison-chart__rows { display: grid; gap: 1.25rem; list-style: none; margin: 0; padding: .5rem; }
|
|
4786
|
+
.ui-comparison-chart__label { font-size: .875rem; overflow-wrap: anywhere; }
|
|
4787
|
+
.ui-comparison-chart__label > span:last-child { font-variant-numeric: tabular-nums; color: hsl(var(--ink-soft)); }
|
|
4788
|
+
.ui-comparison-chart__label strong { color: hsl(var(--ink)); }
|
|
4789
|
+
.ui-comparison-chart__track { position: relative; height: 1.5rem; margin-top: .25rem; }
|
|
4790
|
+
.ui-comparison-chart__track::before { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - .5px); height: 1px; background: hsl(var(--line)); }
|
|
4791
|
+
.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; }
|
|
4792
|
+
.ui-comparison-chart__dot, .ui-comparison-chart__reference { position: absolute; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; box-sizing: border-box; }
|
|
4793
|
+
.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); }
|
|
4794
|
+
.ui-comparison-chart__reference { width: 10px; height: 10px; background: hsl(var(--surface)); border: 2px solid var(--ui-chart-color); }
|
|
4795
|
+
|
|
4214
4796
|
.ui-chart-tone--series-1 {
|
|
4215
4797
|
--ui-chart-color: hsl(var(--chart-series-1));
|
|
4216
4798
|
}
|
|
@@ -4264,11 +4846,12 @@
|
|
|
4264
4846
|
}
|
|
4265
4847
|
|
|
4266
4848
|
.ui-chart-tone--neutral {
|
|
4267
|
-
--ui-chart-color: hsl(var(--ink-
|
|
4849
|
+
--ui-chart-color: hsl(var(--ink-soft));
|
|
4268
4850
|
}
|
|
4269
4851
|
|
|
4270
4852
|
.ui-bar-chart__marks rect {
|
|
4271
4853
|
fill: var(--ui-chart-color);
|
|
4854
|
+
rx: 3px;
|
|
4272
4855
|
}
|
|
4273
4856
|
|
|
4274
4857
|
.ui-scatter-chart__marks circle {
|
|
@@ -4280,9 +4863,150 @@
|
|
|
4280
4863
|
.ui-heatmap__cells rect {
|
|
4281
4864
|
fill: hsl(var(--chart-sequential-high));
|
|
4282
4865
|
stroke: hsl(var(--canvas));
|
|
4283
|
-
stroke-width:
|
|
4866
|
+
stroke-width: 2px;
|
|
4867
|
+
rx: 4px;
|
|
4868
|
+
}
|
|
4869
|
+
|
|
4870
|
+
.ui-chart__content {
|
|
4871
|
+
display: grid;
|
|
4872
|
+
min-width: 0;
|
|
4873
|
+
gap: 1rem;
|
|
4874
|
+
}
|
|
4875
|
+
|
|
4876
|
+
.ui-chart [hidden] {
|
|
4877
|
+
display: none;
|
|
4878
|
+
}
|
|
4879
|
+
|
|
4880
|
+
.ui-chart__legend button {
|
|
4881
|
+
min-height: 2rem;
|
|
4882
|
+
gap: 0.5rem;
|
|
4883
|
+
border: 1px solid hsl(var(--line) / 0.65);
|
|
4884
|
+
border-radius: 999px;
|
|
4885
|
+
background: hsl(var(--surface));
|
|
4886
|
+
padding: 0.25rem 0.625rem;
|
|
4887
|
+
font-size: 0.6875rem;
|
|
4888
|
+
}
|
|
4889
|
+
|
|
4890
|
+
.ui-chart__legend button::before {
|
|
4891
|
+
width: 0.4rem;
|
|
4892
|
+
height: 0.4rem;
|
|
4893
|
+
border-radius: 50%;
|
|
4894
|
+
background: var(--ui-chart-color);
|
|
4895
|
+
content: "";
|
|
4896
|
+
}
|
|
4897
|
+
|
|
4898
|
+
.ui-chart__legend button[aria-pressed="false"] {
|
|
4899
|
+
opacity: 0.55;
|
|
4900
|
+
text-decoration: line-through;
|
|
4901
|
+
}
|
|
4902
|
+
|
|
4903
|
+
.ui-chart__inspection {
|
|
4904
|
+
position: absolute;
|
|
4905
|
+
z-index: 2;
|
|
4906
|
+
inset: var(--ui-chart-inspection-y, 7rem) auto auto var(--ui-chart-inspection-x, 1.5rem);
|
|
4907
|
+
max-width: calc(100% - 3rem);
|
|
4908
|
+
min-width: min(12rem, 70%);
|
|
4909
|
+
border: 1px solid hsl(var(--line));
|
|
4910
|
+
border-radius: var(--ui-radius);
|
|
4911
|
+
background: hsl(var(--surface));
|
|
4912
|
+
box-shadow: 0 8px 24px hsl(var(--ink) / 0.12);
|
|
4913
|
+
padding: 0.875rem;
|
|
4914
|
+
font-size: 0.75rem;
|
|
4915
|
+
pointer-events: none;
|
|
4916
|
+
}
|
|
4917
|
+
|
|
4918
|
+
.ui-chart__inspection > div {
|
|
4919
|
+
display: grid;
|
|
4920
|
+
gap: 0.625rem;
|
|
4921
|
+
}
|
|
4922
|
+
|
|
4923
|
+
.ui-chart__inspection strong {
|
|
4924
|
+
color: hsl(var(--ink-soft));
|
|
4925
|
+
font-size: 0.6875rem;
|
|
4926
|
+
font-weight: 500;
|
|
4927
|
+
}
|
|
4928
|
+
|
|
4929
|
+
.ui-chart__inspection [data-ui-chart-series-value]:not([hidden]) {
|
|
4930
|
+
display: flex;
|
|
4931
|
+
align-items: center;
|
|
4932
|
+
gap: 0.5rem;
|
|
4933
|
+
}
|
|
4934
|
+
|
|
4935
|
+
.ui-chart__inspection b {
|
|
4936
|
+
margin-inline-start: auto;
|
|
4937
|
+
font-weight: 650;
|
|
4938
|
+
}
|
|
4939
|
+
|
|
4940
|
+
.ui-chart__inspection i {
|
|
4941
|
+
width: 0.4rem;
|
|
4942
|
+
height: 0.4rem;
|
|
4943
|
+
border-radius: 50%;
|
|
4944
|
+
background: var(--ui-chart-color);
|
|
4945
|
+
}
|
|
4946
|
+
|
|
4947
|
+
.ui-chart__crosshair {
|
|
4948
|
+
pointer-events: none;
|
|
4949
|
+
stroke: hsl(var(--chart-selection));
|
|
4950
|
+
}
|
|
4951
|
+
|
|
4952
|
+
.ui-chart__annotation line {
|
|
4953
|
+
stroke: var(--ui-chart-color);
|
|
4954
|
+
}
|
|
4955
|
+
|
|
4956
|
+
.ui-heatmap__scale {
|
|
4957
|
+
position: relative;
|
|
4958
|
+
width: 8rem;
|
|
4959
|
+
height: 0.5rem;
|
|
4960
|
+
border-radius: 999px;
|
|
4961
|
+
}
|
|
4962
|
+
|
|
4963
|
+
.ui-heatmap__scale span {
|
|
4964
|
+
position: absolute;
|
|
4965
|
+
top: 0.75rem;
|
|
4966
|
+
transform: translateX(-50%);
|
|
4967
|
+
}
|
|
4968
|
+
|
|
4969
|
+
.ui-heatmap__legend {
|
|
4970
|
+
align-items: center;
|
|
4971
|
+
gap: 0.5rem;
|
|
4972
|
+
padding-block-end: 1rem;
|
|
4973
|
+
font-size: 0.6875rem;
|
|
4974
|
+
}
|
|
4975
|
+
|
|
4976
|
+
.ui-heatmap__legend > :last-child {
|
|
4977
|
+
margin-inline-start: auto;
|
|
4978
|
+
}
|
|
4979
|
+
|
|
4980
|
+
.ui-chart__axis-title {
|
|
4981
|
+
color: hsl(var(--ink-soft));
|
|
4982
|
+
font-size: 0.6875rem;
|
|
4983
|
+
}
|
|
4984
|
+
|
|
4985
|
+
@container (width < 480px) {
|
|
4986
|
+
.ui-bar-chart :is(.ui-chart__grid, .ui-chart__axis-labels) text {
|
|
4987
|
+
font-size: 1.125rem;
|
|
4988
|
+
}
|
|
4989
|
+
|
|
4990
|
+
.ui-chart__grid text,
|
|
4991
|
+
.ui-chart__axis-labels text,
|
|
4992
|
+
.ui-chart__annotation text,
|
|
4993
|
+
.ui-heatmap__missing {
|
|
4994
|
+
font-size: 0.875rem;
|
|
4995
|
+
}
|
|
4996
|
+
|
|
4997
|
+
:is(.ui-line-chart, .ui-waterfall-chart, .ui-histogram, .ui-heatmap, .ui-scatter-chart, .ui-combo-chart, .ui-range-chart)
|
|
4998
|
+
:is(.ui-chart__grid, .ui-chart__axis-labels, .ui-chart__annotation) text {
|
|
4999
|
+
font-size: 1.375rem;
|
|
5000
|
+
}
|
|
5001
|
+
|
|
5002
|
+
:is(.ui-line-chart, .ui-waterfall-chart, .ui-histogram, .ui-heatmap, .ui-scatter-chart, .ui-combo-chart, .ui-range-chart) .ui-chart__axis-labels
|
|
5003
|
+
:is(text:nth-child(even):not(:last-child), text:nth-last-child(2)):not(.ui-heatmap__row-label) {
|
|
5004
|
+
visibility: hidden;
|
|
5005
|
+
}
|
|
5006
|
+
|
|
4284
5007
|
}
|
|
4285
5008
|
|
|
5009
|
+
|
|
4286
5010
|
.ui-range-chart__area {
|
|
4287
5011
|
fill: color-mix(in srgb, var(--ui-chart-color) 18%, transparent);
|
|
4288
5012
|
stroke: var(--ui-chart-color);
|
|
@@ -4304,7 +5028,7 @@
|
|
|
4304
5028
|
.ui-pie-chart__plot > svg {
|
|
4305
5029
|
z-index: 0;
|
|
4306
5030
|
grid-area: 1 / 1;
|
|
4307
|
-
width: min(100%,
|
|
5031
|
+
width: min(100%, 15rem);
|
|
4308
5032
|
min-width: 0;
|
|
4309
5033
|
min-height: 0;
|
|
4310
5034
|
aspect-ratio: 1;
|
|
@@ -4313,7 +5037,7 @@
|
|
|
4313
5037
|
.ui-pie-chart__slices path {
|
|
4314
5038
|
fill: var(--ui-chart-color);
|
|
4315
5039
|
stroke: hsl(var(--surface));
|
|
4316
|
-
stroke-width:
|
|
5040
|
+
stroke-width: 4;
|
|
4317
5041
|
}
|
|
4318
5042
|
|
|
4319
5043
|
.ui-pie-chart__center {
|
|
@@ -4334,7 +5058,7 @@
|
|
|
4334
5058
|
}
|
|
4335
5059
|
|
|
4336
5060
|
.ui-pie-chart__center span {
|
|
4337
|
-
color: hsl(var(--ink-
|
|
5061
|
+
color: hsl(var(--ink-soft));
|
|
4338
5062
|
font-size: 0.75rem;
|
|
4339
5063
|
line-height: 1.25;
|
|
4340
5064
|
}
|
|
@@ -4348,12 +5072,13 @@
|
|
|
4348
5072
|
|
|
4349
5073
|
.ui-line-chart__area,
|
|
4350
5074
|
.ui-sparkline__area {
|
|
4351
|
-
fill:
|
|
5075
|
+
fill: var(--ui-chart-color);
|
|
5076
|
+
fill-opacity: 0.2;
|
|
5077
|
+
mask-image: linear-gradient(#000, transparent);
|
|
4352
5078
|
stroke: none;
|
|
4353
5079
|
}
|
|
4354
5080
|
|
|
4355
|
-
.ui-line-chart__point
|
|
4356
|
-
.ui-sparkline__endpoint {
|
|
5081
|
+
.ui-line-chart__point {
|
|
4357
5082
|
fill: hsl(var(--surface));
|
|
4358
5083
|
stroke: var(--ui-chart-color);
|
|
4359
5084
|
stroke-width: 2;
|
|
@@ -4381,12 +5106,26 @@
|
|
|
4381
5106
|
}
|
|
4382
5107
|
|
|
4383
5108
|
.ui-sparkline {
|
|
5109
|
+
position: relative;
|
|
4384
5110
|
display: inline-flex;
|
|
4385
5111
|
width: 8rem;
|
|
4386
5112
|
height: 2.5rem;
|
|
4387
5113
|
color: hsl(var(--ink));
|
|
4388
5114
|
}
|
|
4389
5115
|
|
|
5116
|
+
/* Keep the marker circular when the trend SVG stretches to fit its container. */
|
|
5117
|
+
.ui-sparkline__endpoint {
|
|
5118
|
+
position: absolute;
|
|
5119
|
+
box-sizing: border-box;
|
|
5120
|
+
width: 7px;
|
|
5121
|
+
height: 7px;
|
|
5122
|
+
transform: translate(-50%, -50%);
|
|
5123
|
+
border: 2px solid var(--ui-chart-color);
|
|
5124
|
+
border-radius: 50%;
|
|
5125
|
+
background: hsl(var(--surface));
|
|
5126
|
+
pointer-events: none;
|
|
5127
|
+
}
|
|
5128
|
+
|
|
4390
5129
|
.ui-sparkline svg {
|
|
4391
5130
|
display: block;
|
|
4392
5131
|
width: 100%;
|
|
@@ -4447,19 +5186,16 @@
|
|
|
4447
5186
|
}
|
|
4448
5187
|
|
|
4449
5188
|
.ui-typography {
|
|
5189
|
+
overflow-wrap: anywhere;
|
|
4450
5190
|
color: hsl(var(--ink-soft));
|
|
4451
5191
|
line-height: 1.75;
|
|
4452
5192
|
}
|
|
4453
5193
|
|
|
4454
|
-
.ui-typography :where(h1,
|
|
4455
|
-
|
|
4456
|
-
|
|
4457
|
-
|
|
4458
|
-
}
|
|
4459
|
-
|
|
4460
|
-
.ui-typography :where(p, ul, ol, blockquote) {
|
|
4461
|
-
margin-block: 0.85em;
|
|
4462
|
-
}
|
|
5194
|
+
.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;}
|
|
5195
|
+
.ui-prose :where(p,ul,ol,blockquote),.ui-typography :where(p,ul,ol,blockquote){margin-block:0 0.85em;}
|
|
5196
|
+
.ui-prose >:where(:first-child),.ui-typography >:where(:first-child){margin-block-start:0;}
|
|
5197
|
+
.ui-prose >:where(:last-child),.ui-typography >:where(:last-child){margin-block-end:0;}
|
|
5198
|
+
.ui-prose :where(li) >:where(ul,ol),.ui-typography :where(li) >:where(ul,ol){margin-block:0.25em 0;}
|
|
4463
5199
|
|
|
4464
5200
|
.ui-typography :where(a) {
|
|
4465
5201
|
color: hsl(var(--brand-solid));
|
|
@@ -4474,7 +5210,7 @@
|
|
|
4474
5210
|
.ui-tree-grid,
|
|
4475
5211
|
.ui-virtual-list,
|
|
4476
5212
|
.ui-date-range-picker {
|
|
4477
|
-
border: 1px solid hsl(var(--line));
|
|
5213
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
4478
5214
|
border-radius: var(--ui-radius-lg);
|
|
4479
5215
|
background: hsl(var(--surface));
|
|
4480
5216
|
color: hsl(var(--ink));
|
|
@@ -4642,7 +5378,7 @@
|
|
|
4642
5378
|
|
|
4643
5379
|
.ui-rich-text-editor select[data-ui-editor-command] {
|
|
4644
5380
|
min-height: 3rem;
|
|
4645
|
-
border: 1px solid hsl(var(--line));
|
|
5381
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
4646
5382
|
border-radius: var(--ui-radius);
|
|
4647
5383
|
background: hsl(var(--surface));
|
|
4648
5384
|
color: hsl(var(--ink));
|
|
@@ -4682,7 +5418,7 @@
|
|
|
4682
5418
|
.ui-schedule :where([data-ui-schedule-slot]),
|
|
4683
5419
|
.ui-tree-grid :where([role="row"]),
|
|
4684
5420
|
.ui-virtual-list > * {
|
|
4685
|
-
border: 1px solid hsl(var(--line));
|
|
5421
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
4686
5422
|
border-radius: var(--ui-radius-sm);
|
|
4687
5423
|
background: hsl(var(--surface-muted) / 0.52);
|
|
4688
5424
|
padding: 0.75rem;
|
|
@@ -4789,7 +5525,7 @@
|
|
|
4789
5525
|
.ui-color-picker {
|
|
4790
5526
|
width: 2.75rem;
|
|
4791
5527
|
height: 2.5rem;
|
|
4792
|
-
border: 1px solid hsl(var(--line));
|
|
5528
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
4793
5529
|
border-radius: var(--ui-radius-sm);
|
|
4794
5530
|
background: hsl(var(--surface));
|
|
4795
5531
|
padding: 0.2rem;
|
|
@@ -4813,7 +5549,7 @@
|
|
|
4813
5549
|
min-height: 1.75rem;
|
|
4814
5550
|
align-items: center;
|
|
4815
5551
|
gap: 0.35rem;
|
|
4816
|
-
border: 1px solid hsl(var(--line));
|
|
5552
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
4817
5553
|
border-radius: 999px;
|
|
4818
5554
|
background: hsl(var(--brand-soft));
|
|
4819
5555
|
color: hsl(var(--ink));
|
|
@@ -4848,7 +5584,7 @@
|
|
|
4848
5584
|
|
|
4849
5585
|
.ui-rich-text-editor :where([contenteditable="true"], textarea, [data-ui-editor-content]) {
|
|
4850
5586
|
min-height: 12rem;
|
|
4851
|
-
border: 1px solid hsl(var(--line));
|
|
5587
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
4852
5588
|
border-radius: var(--ui-radius-sm);
|
|
4853
5589
|
background: hsl(var(--canvas));
|
|
4854
5590
|
padding: 1rem;
|
|
@@ -4878,7 +5614,7 @@
|
|
|
4878
5614
|
display: inline-flex;
|
|
4879
5615
|
width: 2rem;
|
|
4880
5616
|
height: 2rem;
|
|
4881
|
-
border: 1px solid hsl(var(--line));
|
|
5617
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
4882
5618
|
border-radius: 999px;
|
|
4883
5619
|
background: var(--ui-swatch, hsl(var(--brand)));
|
|
4884
5620
|
}
|
|
@@ -4886,7 +5622,7 @@
|
|
|
4886
5622
|
.ui-theme-builder :where([data-ui-theme-output]) {
|
|
4887
5623
|
width: 100%;
|
|
4888
5624
|
min-height: 8rem;
|
|
4889
|
-
border: 1px solid hsl(var(--line));
|
|
5625
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
4890
5626
|
border-radius: var(--ui-radius-sm);
|
|
4891
5627
|
background: hsl(var(--canvas));
|
|
4892
5628
|
color: hsl(var(--ink));
|
|
@@ -4903,6 +5639,13 @@
|
|
|
4903
5639
|
padding: 0.5rem;
|
|
4904
5640
|
}
|
|
4905
5641
|
|
|
5642
|
+
.ui-virtual-list[data-ui-virtual-list-mode="data"] > [data-ui-virtual-list-content] {
|
|
5643
|
+
border: 0;
|
|
5644
|
+
border-radius: 0;
|
|
5645
|
+
background: transparent;
|
|
5646
|
+
padding: 0;
|
|
5647
|
+
}
|
|
5648
|
+
|
|
4906
5649
|
.ui-tree {
|
|
4907
5650
|
display: grid;
|
|
4908
5651
|
gap: 0.125rem;
|
|
@@ -4999,12 +5742,7 @@
|
|
|
4999
5742
|
}
|
|
5000
5743
|
|
|
5001
5744
|
@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
|
-
* ------------------------------------------------------------------------- */
|
|
5745
|
+
/* Liquid Glass follows base styles: frosted fill, specular edges, refraction and depth. */
|
|
5008
5746
|
|
|
5009
5747
|
.ui-glass,
|
|
5010
5748
|
.ui-glass-subtle,
|
|
@@ -5258,7 +5996,8 @@
|
|
|
5258
5996
|
@media (prefers-reduced-motion: reduce) {
|
|
5259
5997
|
*,
|
|
5260
5998
|
*::before,
|
|
5261
|
-
*::after
|
|
5999
|
+
*::after,
|
|
6000
|
+
*::backdrop {
|
|
5262
6001
|
animation-duration: 1ms !important;
|
|
5263
6002
|
animation-iteration-count: 1 !important;
|
|
5264
6003
|
scroll-behavior: auto !important;
|
|
@@ -5272,11 +6011,7 @@
|
|
|
5272
6011
|
}
|
|
5273
6012
|
}
|
|
5274
6013
|
|
|
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
|
-
* ------------------------------------------------------------------------- */
|
|
6014
|
+
/* Overlay motion uses @starting-style and allow-discrete; reduced-motion overrides follow. */
|
|
5280
6015
|
|
|
5281
6016
|
@layer lumen.components {
|
|
5282
6017
|
.ui-dialog,
|
|
@@ -5495,9 +6230,7 @@
|
|
|
5495
6230
|
}
|
|
5496
6231
|
}
|
|
5497
6232
|
|
|
5498
|
-
/*
|
|
5499
|
-
* Container queries: components respond to their container, not the viewport
|
|
5500
|
-
* ------------------------------------------------------------------------- */
|
|
6233
|
+
/* Container queries adapt components to their container size. */
|
|
5501
6234
|
|
|
5502
6235
|
@layer lumen.components {
|
|
5503
6236
|
.ui-sidebar {
|
|
@@ -5533,12 +6266,7 @@
|
|
|
5533
6266
|
}
|
|
5534
6267
|
}
|
|
5535
6268
|
|
|
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
|
-
* ------------------------------------------------------------------------- */
|
|
6269
|
+
/* Top-layer panels use popovers and CSS anchors when supported; otherwise absolute positioning. */
|
|
5542
6270
|
|
|
5543
6271
|
@layer lumen.components {
|
|
5544
6272
|
.ui-popover > [popover],
|
|
@@ -5587,10 +6315,7 @@
|
|
|
5587
6315
|
}
|
|
5588
6316
|
}
|
|
5589
6317
|
|
|
5590
|
-
/*
|
|
5591
|
-
* Glass extensions: intensity on wrapper components + pointer-tracked
|
|
5592
|
-
* specular highlight (opt-in via data-ui-glass-track).
|
|
5593
|
-
* ------------------------------------------------------------------------- */
|
|
6318
|
+
/* Glass intensity and pointer-tracked highlights opt in with data-ui-glass-track. */
|
|
5594
6319
|
|
|
5595
6320
|
@layer lumen.glass {
|
|
5596
6321
|
.ui-popover--glass:is(.ui-glass-subtle, .ui-glass-strong),
|
|
@@ -5720,7 +6445,7 @@
|
|
|
5720
6445
|
gap: var(--ui-stat-gap);
|
|
5721
6446
|
padding: var(--ui-stat-padding);
|
|
5722
6447
|
background: hsl(var(--surface));
|
|
5723
|
-
border: 1px solid hsl(var(--line));
|
|
6448
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
5724
6449
|
border-radius: 0.5rem;
|
|
5725
6450
|
}
|
|
5726
6451
|
|
|
@@ -5948,7 +6673,7 @@
|
|
|
5948
6673
|
min-height: 1.75rem;
|
|
5949
6674
|
max-width: 100%;
|
|
5950
6675
|
align-items: center;
|
|
5951
|
-
border: 1px solid hsl(var(--line));
|
|
6676
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
5952
6677
|
border-radius: 999px;
|
|
5953
6678
|
padding: 0.3rem 0.75rem;
|
|
5954
6679
|
background: hsl(var(--surface-muted));
|
|
@@ -5973,7 +6698,7 @@
|
|
|
5973
6698
|
.ui-pill__count {
|
|
5974
6699
|
margin-left: 0.5rem;
|
|
5975
6700
|
padding-left: 0.5rem;
|
|
5976
|
-
border-left: 1px solid hsl(var(--line));
|
|
6701
|
+
border-left: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
5977
6702
|
font-size: 0.75rem;
|
|
5978
6703
|
line-height: 1;
|
|
5979
6704
|
color: hsl(var(--ink-muted));
|
|
@@ -6065,11 +6790,7 @@ a.ui-pill:focus-visible {
|
|
|
6065
6790
|
aspect-ratio: 1 / 1;
|
|
6066
6791
|
}
|
|
6067
6792
|
|
|
6068
|
-
/*
|
|
6069
|
-
Parity components (Stepper, FileUpload, Tour, Anchor, Segmented, Toolbar,
|
|
6070
|
-
Descriptions, Popconfirm, Transfer, Cascader, TreeSelect, Mentions, QRCode,
|
|
6071
|
-
Watermark, Affix, SpeedDial)
|
|
6072
|
-
========================================================================== */
|
|
6793
|
+
/* Additional interactive primitives. */
|
|
6073
6794
|
|
|
6074
6795
|
/* Stepper */
|
|
6075
6796
|
.ui-stepper {
|
|
@@ -6335,7 +7056,7 @@ a.ui-pill:focus-visible {
|
|
|
6335
7056
|
padding: 1rem;
|
|
6336
7057
|
border-radius: 0.75rem;
|
|
6337
7058
|
background: hsl(var(--surface));
|
|
6338
|
-
border: 1px solid hsl(var(--line));
|
|
7059
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
6339
7060
|
box-shadow: 0 12px 32px color-mix(in srgb, hsl(var(--ink)) 22%, transparent);
|
|
6340
7061
|
color: hsl(var(--ink));
|
|
6341
7062
|
}
|
|
@@ -6412,7 +7133,7 @@ a.ui-pill:focus-visible {
|
|
|
6412
7133
|
gap: 0.1875rem;
|
|
6413
7134
|
border-radius: 0.5rem;
|
|
6414
7135
|
background: hsl(var(--surface-strong));
|
|
6415
|
-
border: 1px solid hsl(var(--line));
|
|
7136
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
6416
7137
|
}
|
|
6417
7138
|
.ui-segmented__option {
|
|
6418
7139
|
position: relative;
|
|
@@ -6464,7 +7185,7 @@ a.ui-pill:focus-visible {
|
|
|
6464
7185
|
gap: 0.25rem;
|
|
6465
7186
|
padding: 0.25rem;
|
|
6466
7187
|
border-radius: 0.5rem;
|
|
6467
|
-
border: 1px solid hsl(var(--line));
|
|
7188
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
6468
7189
|
background: hsl(var(--surface));
|
|
6469
7190
|
}
|
|
6470
7191
|
.ui-toolbar--vertical {
|
|
@@ -6479,12 +7200,14 @@ a.ui-pill:focus-visible {
|
|
|
6479
7200
|
grid-template-columns: repeat(var(--ui-descriptions-columns, 1), minmax(0, 1fr));
|
|
6480
7201
|
gap: 1px;
|
|
6481
7202
|
margin: 0;
|
|
6482
|
-
border: 1px solid hsl(var(--line));
|
|
7203
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
6483
7204
|
border-radius: 0.5rem;
|
|
6484
7205
|
overflow: hidden;
|
|
6485
7206
|
background: hsl(var(--line));
|
|
6486
7207
|
}
|
|
6487
7208
|
.ui-descriptions__item {
|
|
7209
|
+
min-width: 0;
|
|
7210
|
+
overflow-wrap: anywhere;
|
|
6488
7211
|
display: flex;
|
|
6489
7212
|
flex-direction: column;
|
|
6490
7213
|
gap: 0.25rem;
|
|
@@ -6492,10 +7215,12 @@ a.ui-pill:focus-visible {
|
|
|
6492
7215
|
background: hsl(var(--surface));
|
|
6493
7216
|
}
|
|
6494
7217
|
.ui-descriptions__term {
|
|
7218
|
+
display: block;
|
|
6495
7219
|
font-size: 0.8125rem;
|
|
6496
|
-
color: hsl(var(--ink-
|
|
7220
|
+
color: hsl(var(--ink-soft));
|
|
6497
7221
|
}
|
|
6498
7222
|
.ui-descriptions__detail {
|
|
7223
|
+
display: block;
|
|
6499
7224
|
margin: 0;
|
|
6500
7225
|
color: hsl(var(--ink));
|
|
6501
7226
|
}
|
|
@@ -6514,7 +7239,7 @@ a.ui-pill:focus-visible {
|
|
|
6514
7239
|
padding: 1rem;
|
|
6515
7240
|
border-radius: 0.5rem;
|
|
6516
7241
|
background: hsl(var(--surface));
|
|
6517
|
-
border: 1px solid hsl(var(--line));
|
|
7242
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
6518
7243
|
box-shadow: 0 10px 28px color-mix(in srgb, hsl(var(--ink)) 18%, transparent);
|
|
6519
7244
|
}
|
|
6520
7245
|
.ui-popconfirm__panel[hidden] {
|
|
@@ -6544,7 +7269,7 @@ a.ui-pill:focus-visible {
|
|
|
6544
7269
|
display: flex;
|
|
6545
7270
|
min-width: 0;
|
|
6546
7271
|
flex-direction: column;
|
|
6547
|
-
border: 1px solid hsl(var(--line));
|
|
7272
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
6548
7273
|
border-radius: var(--ui-radius);
|
|
6549
7274
|
overflow: hidden;
|
|
6550
7275
|
background: hsl(var(--surface));
|
|
@@ -6564,7 +7289,7 @@ a.ui-pill:focus-visible {
|
|
|
6564
7289
|
font-weight: 700;
|
|
6565
7290
|
color: hsl(var(--ink-soft));
|
|
6566
7291
|
background: hsl(var(--surface-muted));
|
|
6567
|
-
border-bottom: 1px solid hsl(var(--line));
|
|
7292
|
+
border-bottom: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
6568
7293
|
}
|
|
6569
7294
|
.ui-transfer__list {
|
|
6570
7295
|
flex: 1 1 auto;
|
|
@@ -6665,7 +7390,7 @@ a.ui-pill:focus-visible {
|
|
|
6665
7390
|
padding: 0.5rem;
|
|
6666
7391
|
border-radius: 0.5rem;
|
|
6667
7392
|
background: hsl(var(--surface));
|
|
6668
|
-
border: 1px solid hsl(var(--line));
|
|
7393
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
6669
7394
|
box-shadow: 0 10px 28px color-mix(in srgb, hsl(var(--ink)) 18%, transparent);
|
|
6670
7395
|
}
|
|
6671
7396
|
.ui-cascader__panel[hidden],
|
|
@@ -6720,7 +7445,7 @@ a.ui-pill:focus-visible {
|
|
|
6720
7445
|
list-style: none;
|
|
6721
7446
|
border-radius: 0.5rem;
|
|
6722
7447
|
background: hsl(var(--surface));
|
|
6723
|
-
border: 1px solid hsl(var(--line));
|
|
7448
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
6724
7449
|
box-shadow: 0 10px 28px color-mix(in srgb, hsl(var(--ink)) 18%, transparent);
|
|
6725
7450
|
}
|
|
6726
7451
|
.ui-mentions__list[hidden] {
|
|
@@ -6757,7 +7482,7 @@ a.ui-pill:focus-visible {
|
|
|
6757
7482
|
height: var(--ui-qr-code-size, 160px);
|
|
6758
7483
|
box-sizing: content-box;
|
|
6759
7484
|
border-radius: 0.5rem;
|
|
6760
|
-
border: 1px solid hsl(var(--line));
|
|
7485
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
6761
7486
|
background: #fff;
|
|
6762
7487
|
}
|
|
6763
7488
|
.ui-qr-code__image {
|
|
@@ -6964,7 +7689,7 @@ a.ui-pill:focus-visible {
|
|
|
6964
7689
|
gap: 0.5rem;
|
|
6965
7690
|
padding: 0.5rem 0.875rem 0.5rem 0.625rem;
|
|
6966
7691
|
border-radius: 9999px;
|
|
6967
|
-
border: 1px solid hsl(var(--line));
|
|
7692
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
6968
7693
|
background: hsl(var(--surface) / 0.96);
|
|
6969
7694
|
color: hsl(var(--ink));
|
|
6970
7695
|
font-size: 0.8125rem;
|
|
@@ -7171,7 +7896,7 @@ a.ui-pill:focus-visible {
|
|
|
7171
7896
|
max-height: 18rem;
|
|
7172
7897
|
overflow: auto;
|
|
7173
7898
|
padding: 0.25rem;
|
|
7174
|
-
border: 1px solid hsl(var(--line));
|
|
7899
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
7175
7900
|
border-radius: var(--ui-radius);
|
|
7176
7901
|
background: hsl(var(--surface));
|
|
7177
7902
|
box-shadow: var(--ui-shadow-sm);
|
|
@@ -7224,117 +7949,36 @@ a.ui-pill:focus-visible {
|
|
|
7224
7949
|
opacity: 0.5;
|
|
7225
7950
|
}
|
|
7226
7951
|
|
|
7227
|
-
.ui-container
|
|
7228
|
-
|
|
7229
|
-
|
|
7230
|
-
}
|
|
7231
|
-
|
|
7232
|
-
.ui-
|
|
7233
|
-
|
|
7234
|
-
}
|
|
7235
|
-
|
|
7236
|
-
.ui-
|
|
7237
|
-
|
|
7238
|
-
}
|
|
7239
|
-
|
|
7240
|
-
.ui-
|
|
7241
|
-
|
|
7242
|
-
}
|
|
7243
|
-
|
|
7244
|
-
.ui-
|
|
7245
|
-
|
|
7246
|
-
|
|
7247
|
-
}
|
|
7248
|
-
|
|
7249
|
-
.ui-stack
|
|
7250
|
-
|
|
7251
|
-
|
|
7252
|
-
|
|
7253
|
-
}
|
|
7254
|
-
|
|
7255
|
-
.ui-stack--
|
|
7256
|
-
|
|
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
|
-
}
|
|
7952
|
+
.ui-container{width:min(100% - 2 * var(--ui-container-gutter),var(--ui-container-max,72rem));margin-inline:auto;}
|
|
7953
|
+
.ui-container--sm{--ui-container-max:40rem;}
|
|
7954
|
+
.ui-container--md{--ui-container-max:56rem;}
|
|
7955
|
+
.ui-container--lg{--ui-container-max:72rem;}
|
|
7956
|
+
.ui-container--full{width:100%;max-width:none;}
|
|
7957
|
+
.ui-stack{display:flex;min-width:0;gap:var(--ui-stack-gap,var(--ui-space-group));}
|
|
7958
|
+
.ui-stack--vertical{flex-direction:column;}
|
|
7959
|
+
.ui-stack--horizontal{flex-direction:row;}
|
|
7960
|
+
.ui-stack--wrap{flex-wrap:wrap;}
|
|
7961
|
+
/* Canonical gaps. */ .ui-stack--gap-none,.ui-grid--gap-none{--ui-stack-gap:var(--ui-space-zero);--ui-grid-gap:var(--ui-space-zero);}
|
|
7962
|
+
.ui-stack--gap-xs,.ui-grid--gap-xs{--ui-stack-gap:var(--ui-space-xs);--ui-grid-gap:var(--ui-space-xs);}
|
|
7963
|
+
.ui-stack--gap-sm,.ui-grid--gap-sm{--ui-stack-gap:var(--ui-space-sm);--ui-grid-gap:var(--ui-space-sm);}
|
|
7964
|
+
.ui-stack--gap-md,.ui-grid--gap-md{--ui-stack-gap:var(--ui-space-md);--ui-grid-gap:var(--ui-space-md);}
|
|
7965
|
+
.ui-stack--gap-lg,.ui-grid--gap-lg{--ui-stack-gap:var(--ui-space-lg);--ui-grid-gap:var(--ui-space-lg);}
|
|
7966
|
+
.ui-stack--gap-xl,.ui-grid--gap-xl{--ui-stack-gap:var(--ui-space-xl);--ui-grid-gap:var(--ui-space-xl);}
|
|
7967
|
+
.ui-stack--gap-2xl,.ui-grid--gap-2xl{--ui-stack-gap:var(--ui-space-2xl);--ui-grid-gap:var(--ui-space-2xl);}
|
|
7968
|
+
.ui-stack--gap-3xl,.ui-grid--gap-3xl{--ui-stack-gap:var(--ui-space-3xl);--ui-grid-gap:var(--ui-space-3xl);}
|
|
7969
|
+
.ui-stack--gap-related,.ui-grid--gap-related{--ui-stack-gap:var(--ui-space-related);--ui-grid-gap:var(--ui-space-related);}
|
|
7970
|
+
.ui-stack--gap-group,.ui-grid--gap-group{--ui-stack-gap:var(--ui-space-group);--ui-grid-gap:var(--ui-space-group);}
|
|
7971
|
+
.ui-stack--gap-section,.ui-grid--gap-section{--ui-stack-gap:var(--ui-space-section);--ui-grid-gap:var(--ui-space-section);}
|
|
7972
|
+
.ui-stack >:where(:not(dialog,.ui-drawer,.ui-sheet)),.ui-grid >:where(:not(dialog,.ui-drawer,.ui-sheet)){min-width:0;margin:0;}
|
|
7973
|
+
.ui-stack--align-start{align-items:flex-start;}
|
|
7974
|
+
.ui-stack--align-center{align-items:center;}
|
|
7975
|
+
.ui-stack--align-end{align-items:flex-end;}
|
|
7976
|
+
.ui-stack--align-stretch{align-items:stretch;}
|
|
7977
|
+
.ui-stack--justify-start{justify-content:flex-start;}
|
|
7978
|
+
.ui-stack--justify-center{justify-content:center;}
|
|
7979
|
+
.ui-stack--justify-end{justify-content:flex-end;}
|
|
7980
|
+
.ui-stack--justify-between{justify-content:space-between;}
|
|
7981
|
+
.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));}
|
|
7338
7982
|
|
|
7339
7983
|
.ui-grid--columns-1 {
|
|
7340
7984
|
grid-template-columns: repeat(1, minmax(0, 1fr));
|
|
@@ -7385,3 +8029,706 @@ a.ui-pill:focus-visible {
|
|
|
7385
8029
|
white-space: normal;
|
|
7386
8030
|
}
|
|
7387
8031
|
}
|
|
8032
|
+
|
|
8033
|
+
@layer lumen.components {
|
|
8034
|
+
.ui-range-calendar {
|
|
8035
|
+
display: grid;
|
|
8036
|
+
grid-template-columns: 10rem minmax(0, 1fr);
|
|
8037
|
+
gap: 1rem;
|
|
8038
|
+
color: hsl(var(--ink));
|
|
8039
|
+
font-family: var(--ui-font);
|
|
8040
|
+
font-size: .8125rem;
|
|
8041
|
+
}
|
|
8042
|
+
.ui-range-calendar:not(:has(> .ui-range-calendar__presets)) {
|
|
8043
|
+
grid-template-columns: minmax(0, 1fr);
|
|
8044
|
+
}
|
|
8045
|
+
.ui-range-calendar__presets {
|
|
8046
|
+
display: flex;
|
|
8047
|
+
flex-direction: column;
|
|
8048
|
+
gap: .25rem;
|
|
8049
|
+
padding-inline-end: 1rem;
|
|
8050
|
+
border-inline-end: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
8051
|
+
}
|
|
8052
|
+
.ui-range-calendar__presets .ui-button {
|
|
8053
|
+
justify-content: start;
|
|
8054
|
+
min-height: 2.75rem;
|
|
8055
|
+
padding-inline: .75rem;
|
|
8056
|
+
font-size: inherit;
|
|
8057
|
+
font-weight: 500;
|
|
8058
|
+
white-space: normal;
|
|
8059
|
+
text-align: start;
|
|
8060
|
+
}
|
|
8061
|
+
.ui-range-calendar__presets [aria-pressed="true"] {
|
|
8062
|
+
background: hsl(var(--brand-soft));
|
|
8063
|
+
color: hsl(var(--brand));
|
|
8064
|
+
font-weight: 650;
|
|
8065
|
+
}
|
|
8066
|
+
.ui-range-calendar__months { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
|
|
8067
|
+
.ui-range-calendar__month { min-width: 0; }
|
|
8068
|
+
.ui-range-calendar__endpoint {
|
|
8069
|
+
display: grid;
|
|
8070
|
+
gap: .25rem;
|
|
8071
|
+
padding: .625rem .75rem;
|
|
8072
|
+
margin-bottom: .75rem;
|
|
8073
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
8074
|
+
border-radius: .5rem;
|
|
8075
|
+
background: hsl(var(--surface));
|
|
8076
|
+
}
|
|
8077
|
+
.ui-range-calendar__endpoint span { font-size: .75rem; color: hsl(var(--ink-soft)); }
|
|
8078
|
+
.ui-range-calendar__endpoint strong { font-size: .875rem; font-weight: 650; }
|
|
8079
|
+
.ui-range-calendar .ui-calendar { width: 100%; max-width: none; border: 0; padding: 0; box-shadow: none; background: transparent; }
|
|
8080
|
+
.ui-range-calendar .ui-calendar__header { margin-bottom: .5rem; }
|
|
8081
|
+
.ui-range-calendar .ui-calendar__header strong { font-size: .8125rem; font-weight: 650; }
|
|
8082
|
+
.ui-range-calendar .ui-calendar__header button { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; }
|
|
8083
|
+
.ui-range-calendar .ui-calendar__grid { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0 .25rem; }
|
|
8084
|
+
.ui-range-calendar .ui-calendar__grid th { height: 2rem; font-size: .6875rem; font-weight: 500; }
|
|
8085
|
+
.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; }
|
|
8086
|
+
.ui-range-calendar .ui-calendar__grid td[data-in-range="true"] { background: hsl(var(--brand-soft)); color: hsl(var(--ink)); box-shadow: none; }
|
|
8087
|
+
.ui-range-calendar .ui-calendar__grid td[data-in-range="true"]:first-child { border-start-start-radius: .375rem; border-end-start-radius: .375rem; }
|
|
8088
|
+
.ui-range-calendar .ui-calendar__grid td[data-in-range="true"]:last-child { border-start-end-radius: .375rem; border-end-end-radius: .375rem; }
|
|
8089
|
+
.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; }
|
|
8090
|
+
.ui-range-calendar [data-ui-calendar-day]:focus-visible { outline: 2px solid hsl(var(--brand)); outline-offset: -2px; }
|
|
8091
|
+
@media (max-width: 640px) {
|
|
8092
|
+
.ui-range-calendar { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
|
|
8093
|
+
.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; }
|
|
8094
|
+
.ui-range-calendar__presets .ui-button { flex-shrink: 0; white-space: nowrap; }
|
|
8095
|
+
.ui-range-calendar__months { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
|
|
8096
|
+
.ui-range-calendar .ui-calendar__grid td { height: 2.75rem; }
|
|
8097
|
+
.ui-range-calendar .ui-calendar__header button { width: 2.75rem; height: 2.75rem; }
|
|
8098
|
+
}
|
|
8099
|
+
}
|
|
8100
|
+
|
|
8101
|
+
@layer lumen.components {
|
|
8102
|
+
.ui-range-input { min-width: 0; }
|
|
8103
|
+
.ui-range-input > .ui-button {
|
|
8104
|
+
width: 100%;
|
|
8105
|
+
min-height: 44px;
|
|
8106
|
+
justify-content: space-between;
|
|
8107
|
+
gap: .75rem;
|
|
8108
|
+
padding-inline: .875rem;
|
|
8109
|
+
font-size: .8125rem;
|
|
8110
|
+
font-weight: 500;
|
|
8111
|
+
color: hsl(var(--ink));
|
|
8112
|
+
}
|
|
8113
|
+
.ui-range-input > .ui-button[aria-expanded="true"] {
|
|
8114
|
+
border-color: hsl(var(--brand));
|
|
8115
|
+
box-shadow: 0 0 0 2px hsl(var(--brand) / .12);
|
|
8116
|
+
}
|
|
8117
|
+
.ui-range-input__value { display: flex; align-items: center; gap: .5rem; min-width: 0; }
|
|
8118
|
+
.ui-range-input__value > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
8119
|
+
.ui-range-input > .ui-button > .ui-button__content { width: 100%; min-width: 0; justify-content: space-between; }
|
|
8120
|
+
.ui-range-input > .ui-button .ui-icon { flex-shrink: 0; color: hsl(var(--ink-muted)); }
|
|
8121
|
+
.ui-range-input__panel {
|
|
8122
|
+
font-family: var(--ui-font);
|
|
8123
|
+
position: fixed;
|
|
8124
|
+
inset: auto;
|
|
8125
|
+
margin: 0;
|
|
8126
|
+
padding: 0;
|
|
8127
|
+
overflow: hidden;
|
|
8128
|
+
background: hsl(var(--surface));
|
|
8129
|
+
color: hsl(var(--ink));
|
|
8130
|
+
border: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
8131
|
+
border-radius: .75rem;
|
|
8132
|
+
box-shadow: 0 12px 32px hsl(var(--ink) / .14);
|
|
8133
|
+
}
|
|
8134
|
+
.ui-range-input__panel:popover-open { display: flex; flex-direction: column; }
|
|
8135
|
+
.ui-range-input__panel::backdrop { background: transparent; }
|
|
8136
|
+
.ui-range-input__body {
|
|
8137
|
+
min-height: 0;
|
|
8138
|
+
padding: 1rem;
|
|
8139
|
+
overflow: auto;
|
|
8140
|
+
overscroll-behavior: contain;
|
|
8141
|
+
scrollbar-width: thin;
|
|
8142
|
+
scrollbar-gutter: stable;
|
|
8143
|
+
}
|
|
8144
|
+
.ui-range-input__panel .ui-range-input__actions {
|
|
8145
|
+
flex-shrink: 0;
|
|
8146
|
+
display: flex;
|
|
8147
|
+
justify-content: flex-end;
|
|
8148
|
+
gap: .5rem;
|
|
8149
|
+
margin: 0;
|
|
8150
|
+
padding: .75rem 1rem;
|
|
8151
|
+
background: hsl(var(--surface));
|
|
8152
|
+
border-top: var(--ui-border-width, 1px) solid hsl(var(--line));
|
|
8153
|
+
}
|
|
8154
|
+
.ui-range-input__panel .ui-range-input__actions .ui-button { min-height: 44px; font-size: .8125rem; }
|
|
8155
|
+
.ui-range-input__panel .ui-range-input__summary {
|
|
8156
|
+
margin: .75rem 0 0;
|
|
8157
|
+
color: hsl(var(--ink-soft));
|
|
8158
|
+
font-size: .75rem;
|
|
8159
|
+
font-weight: 500;
|
|
8160
|
+
line-height: 1.5;
|
|
8161
|
+
}
|
|
8162
|
+
.ui-range-input__panel .ui-range-input__summary[data-invalid="true"] { color: hsl(var(--danger)); }
|
|
8163
|
+
.ui-range-input__panel[data-state="open"] { display: flex; flex-direction: column; }
|
|
8164
|
+
@media (max-width: 640px) {
|
|
8165
|
+
.ui-range-input__body { padding: .75rem; }
|
|
8166
|
+
.ui-range-input__actions { padding: .75rem; }
|
|
8167
|
+
.ui-range-input__actions .ui-button { flex: 1; }
|
|
8168
|
+
}
|
|
8169
|
+
}
|
|
8170
|
+
|
|
8171
|
+
@layer lumen.components {
|
|
8172
|
+
.ui-range-calendar .ui-calendar__grid th,
|
|
8173
|
+
.ui-range-calendar .ui-calendar__grid td[data-outside="true"]:not([data-in-range="true"]) {
|
|
8174
|
+
color: hsl(var(--ink-soft));
|
|
8175
|
+
}
|
|
8176
|
+
}
|
|
8177
|
+
|
|
8178
|
+
@layer lumen.components {
|
|
8179
|
+
/* Fixed-height virtual rows retain the complete scroll extent through inert spacers. */
|
|
8180
|
+
.ui-virtual-list[data-ui-range-start] {
|
|
8181
|
+
display: block;
|
|
8182
|
+
overflow-anchor: none;
|
|
8183
|
+
}
|
|
8184
|
+
|
|
8185
|
+
.ui-virtual-list[data-ui-range-start] > :not([data-ui-virtual-list-spacer]) {
|
|
8186
|
+
margin-block: 0;
|
|
8187
|
+
padding-block: 0.5rem;
|
|
8188
|
+
}
|
|
8189
|
+
|
|
8190
|
+
.ui-virtual-list > [data-ui-virtual-list-spacer] {
|
|
8191
|
+
border: 0;
|
|
8192
|
+
border-radius: 0;
|
|
8193
|
+
background: transparent;
|
|
8194
|
+
padding: 0;
|
|
8195
|
+
margin: 0;
|
|
8196
|
+
}
|
|
8197
|
+
|
|
8198
|
+
.ui-change-summary, .ui-filter-bar { display: grid; gap: var(--ui-space-related); min-width: 0; }
|
|
8199
|
+
.ui-change-summary__heading, .ui-change-summary__summary, .ui-filter-bar__results { margin: 0; }
|
|
8200
|
+
.ui-change-summary__list { margin: 0; border: var(--ui-border-width) solid hsl(var(--line)); border-radius: var(--ui-radius); overflow: hidden; }
|
|
8201
|
+
.ui-change-summary__item { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-space-related); padding: var(--ui-space-md); }
|
|
8202
|
+
.ui-change-summary__item + .ui-change-summary__item { border-top: var(--ui-border-width) solid hsl(var(--line)); }
|
|
8203
|
+
.ui-change-summary__item[data-changed="true"] { background: hsl(var(--brand-soft)); }
|
|
8204
|
+
.ui-change-summary__item dt { font-weight: 600; }
|
|
8205
|
+
.ui-change-summary__item dd { margin: 0; overflow-wrap: anywhere; }
|
|
8206
|
+
.ui-change-summary__state, .ui-change-summary__value-label { display: block; font-size: .8125rem; color: hsl(var(--ink-soft)); }
|
|
8207
|
+
.ui-filter-bar summary { cursor: pointer; font-weight: 600; padding-block: var(--ui-space-md); }
|
|
8208
|
+
.ui-filter-bar summary:focus-visible { outline: 2px solid hsl(var(--brand)); outline-offset: 2px; }
|
|
8209
|
+
.ui-filter-bar__results { color: hsl(var(--ink-soft)); }
|
|
8210
|
+
@media (max-width: 48rem) {
|
|
8211
|
+
.ui-change-summary__item { grid-template-columns: 1fr 1fr; }
|
|
8212
|
+
.ui-change-summary__item dt { grid-column: 1 / -1; }
|
|
8213
|
+
}
|
|
8214
|
+
|
|
8215
|
+
.ui-scatter-chart__references rect { fill: hsl(var(--brand)); fill-opacity: 0.08; }
|
|
8216
|
+
.ui-scatter-chart__references line { stroke: hsl(var(--ink-soft)); stroke-width: 1; stroke-dasharray: 4 4; }
|
|
8217
|
+
.ui-scatter-chart__reference-labels { margin: 0; padding-inline-start: 1.5rem; color: hsl(var(--ink-soft)); }
|
|
8218
|
+
}
|
|
8219
|
+
|
|
8220
|
+
/* BEGIN:generated-theme-presets */
|
|
8221
|
+
@layer lumen.tokens {
|
|
8222
|
+
[data-lumen-preset="default"],
|
|
8223
|
+
[data-lumen-preset="default"][data-lumen-scheme="light"] {
|
|
8224
|
+
color-scheme: light;
|
|
8225
|
+
--canvas: 210 24% 98%;
|
|
8226
|
+
--surface: 0 0% 100%;
|
|
8227
|
+
--surface-muted: 210 22% 95%;
|
|
8228
|
+
--surface-strong: 213 18% 88%;
|
|
8229
|
+
--line: 214 17% 84%;
|
|
8230
|
+
--ink: 216 28% 12%;
|
|
8231
|
+
--ink-soft: 215 14% 35%;
|
|
8232
|
+
--ink-muted: 215 10% 50%;
|
|
8233
|
+
--brand: 201 96% 32%;
|
|
8234
|
+
--brand-solid: 201 96% 28%;
|
|
8235
|
+
--brand-soft: 198 64% 92%;
|
|
8236
|
+
--on-brand: 0 0% 100%;
|
|
8237
|
+
--accent: 169 78% 33%;
|
|
8238
|
+
--success: 142 76% 36%;
|
|
8239
|
+
--warning: 38 92% 50%;
|
|
8240
|
+
--danger: 0 84% 60%;
|
|
8241
|
+
--on-danger: 0 0% 0%;
|
|
8242
|
+
--ui-space-zero: 0rem;
|
|
8243
|
+
--ui-space-xs: 0.25rem;
|
|
8244
|
+
--ui-space-sm: 0.5rem;
|
|
8245
|
+
--ui-space-md: 0.75rem;
|
|
8246
|
+
--ui-space-lg: 1rem;
|
|
8247
|
+
--ui-space-xl: 1.5rem;
|
|
8248
|
+
--ui-space-2xl: 2rem;
|
|
8249
|
+
--ui-space-3xl: 3rem;
|
|
8250
|
+
--ui-radius-sm: 0.375rem;
|
|
8251
|
+
--ui-radius: 0.625rem;
|
|
8252
|
+
--ui-radius-lg: 0.75rem;
|
|
8253
|
+
--ui-border-width: 1px;
|
|
8254
|
+
--ui-font: "Montserrat", "Avenir Next", "Segoe UI", sans-serif;
|
|
8255
|
+
--ui-shadow-sm: 0 1px 2px hsl(222 47% 11% / 0.06);
|
|
8256
|
+
--ui-shadow-md: 0 8px 24px hsl(222 47% 11% / 0.08);
|
|
8257
|
+
--ui-shadow-lg: 0 24px 64px hsl(222 47% 11% / 0.14);
|
|
8258
|
+
--glass-bg: 0 0% 100% / 0.55;
|
|
8259
|
+
--glass-bg-subtle: 0 0% 100% / 0.38;
|
|
8260
|
+
--glass-bg-strong: 0 0% 100% / 0.72;
|
|
8261
|
+
--glass-border: 220 30% 100% / 0.55;
|
|
8262
|
+
--glass-highlight: 0 0% 100% / 0.85;
|
|
8263
|
+
--glass-blur: 22px;
|
|
8264
|
+
--glass-saturate: 1.7;
|
|
8265
|
+
--glass-brightness: 1.05;
|
|
8266
|
+
--glass-edge: 0 0% 100% / 0.9;
|
|
8267
|
+
--glass-edge-soft: 0 0% 100% / 0.34;
|
|
8268
|
+
--glass-shade: 222 47% 11% / 0.07;
|
|
8269
|
+
--glass-refraction: 201 96% 32% / 0.08;
|
|
8270
|
+
--glass-shadow: 0 1px 2px hsl(222 47% 11% / 0.08),
|
|
8271
|
+
0 12px 32px hsl(222 47% 11% / 0.12),
|
|
8272
|
+
0 32px 80px hsl(222 47% 11% / 0.14);
|
|
8273
|
+
}
|
|
8274
|
+
|
|
8275
|
+
:where([data-theme="dark"], [data-theme="lumen-dark"]) [data-lumen-preset="default"]:not([data-lumen-scheme="light"], [data-theme="light"], [data-theme="lumen-light"]),
|
|
8276
|
+
[data-lumen-preset="default"][data-lumen-scheme="dark"],
|
|
8277
|
+
[data-lumen-preset="default"][data-theme="dark"]:not([data-lumen-scheme="light"]),
|
|
8278
|
+
[data-lumen-preset="default"][data-theme="lumen-dark"]:not([data-lumen-scheme="light"]) {
|
|
8279
|
+
color-scheme: dark;
|
|
8280
|
+
--canvas: 224 24% 8%;
|
|
8281
|
+
--surface: 224 18% 11%;
|
|
8282
|
+
--surface-muted: 223 16% 15%;
|
|
8283
|
+
--surface-strong: 222 14% 22%;
|
|
8284
|
+
--line: 222 14% 26%;
|
|
8285
|
+
--ink: 210 20% 96%;
|
|
8286
|
+
--ink-soft: 214 14% 77%;
|
|
8287
|
+
--ink-muted: 216 10% 62%;
|
|
8288
|
+
--brand: 199 91% 56%;
|
|
8289
|
+
--brand-solid: 199 91% 36%;
|
|
8290
|
+
--brand-soft: 199 84% 16%;
|
|
8291
|
+
--on-brand: 0 0% 100%;
|
|
8292
|
+
--accent: 166 76% 43%;
|
|
8293
|
+
--success: 142 69% 45%;
|
|
8294
|
+
--warning: 38 92% 55%;
|
|
8295
|
+
--danger: 0 84% 65%;
|
|
8296
|
+
--on-danger: 224 24% 8%;
|
|
8297
|
+
--ui-space-zero: 0rem;
|
|
8298
|
+
--ui-space-xs: 0.25rem;
|
|
8299
|
+
--ui-space-sm: 0.5rem;
|
|
8300
|
+
--ui-space-md: 0.75rem;
|
|
8301
|
+
--ui-space-lg: 1rem;
|
|
8302
|
+
--ui-space-xl: 1.5rem;
|
|
8303
|
+
--ui-space-2xl: 2rem;
|
|
8304
|
+
--ui-space-3xl: 3rem;
|
|
8305
|
+
--ui-radius-sm: 0.375rem;
|
|
8306
|
+
--ui-radius: 0.625rem;
|
|
8307
|
+
--ui-radius-lg: 0.75rem;
|
|
8308
|
+
--ui-border-width: 1px;
|
|
8309
|
+
--ui-font: "Montserrat", "Avenir Next", "Segoe UI", sans-serif;
|
|
8310
|
+
--ui-shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.18);
|
|
8311
|
+
--ui-shadow-md: 0 12px 32px hsl(0 0% 0% / 0.24);
|
|
8312
|
+
--ui-shadow-lg: 0 28px 80px hsl(0 0% 0% / 0.36);
|
|
8313
|
+
--glass-bg: 224 20% 13% / 0.78;
|
|
8314
|
+
--glass-bg-subtle: 224 20% 13% / 0.64;
|
|
8315
|
+
--glass-bg-strong: 224 20% 13% / 0.9;
|
|
8316
|
+
--glass-border: 210 30% 92% / 0.24;
|
|
8317
|
+
--glass-highlight: 210 30% 96% / 0.1;
|
|
8318
|
+
--glass-brightness: 1;
|
|
8319
|
+
--glass-edge: 210 40% 98% / 0.24;
|
|
8320
|
+
--glass-edge-soft: 210 40% 98% / 0.08;
|
|
8321
|
+
--glass-shade: 240 40% 3% / 0.3;
|
|
8322
|
+
--glass-refraction: 199 91% 56% / 0.1;
|
|
8323
|
+
--glass-shadow: 0 1px 2px hsl(0 0% 0% / 0.3),
|
|
8324
|
+
0 16px 40px hsl(0 0% 0% / 0.34),
|
|
8325
|
+
0 40px 96px hsl(0 0% 0% / 0.38);
|
|
8326
|
+
}
|
|
8327
|
+
|
|
8328
|
+
[data-lumen-preset="studio"],
|
|
8329
|
+
[data-lumen-preset="studio"][data-lumen-scheme="light"] {
|
|
8330
|
+
color-scheme: light;
|
|
8331
|
+
--canvas: 0 0% 100%;
|
|
8332
|
+
--surface: 0 0% 100%;
|
|
8333
|
+
--surface-muted: 0 0% 96%;
|
|
8334
|
+
--surface-strong: 0 0% 91%;
|
|
8335
|
+
--line: 0 0% 90%;
|
|
8336
|
+
--ink: 0 0% 9%;
|
|
8337
|
+
--ink-soft: 0 0% 32%;
|
|
8338
|
+
--ink-muted: 0 0% 45%;
|
|
8339
|
+
--brand: 0 0% 9%;
|
|
8340
|
+
--brand-solid: 0 0% 9%;
|
|
8341
|
+
--brand-soft: 0 0% 92%;
|
|
8342
|
+
--on-brand: 0 0% 100%;
|
|
8343
|
+
--accent: 0 0% 9%;
|
|
8344
|
+
--success: 142 76% 36%;
|
|
8345
|
+
--warning: 38 92% 50%;
|
|
8346
|
+
--danger: 0 84% 60%;
|
|
8347
|
+
--on-danger: 0 0% 0%;
|
|
8348
|
+
--ui-space-zero: 0rem;
|
|
8349
|
+
--ui-space-xs: 0.25rem;
|
|
8350
|
+
--ui-space-sm: 0.5rem;
|
|
8351
|
+
--ui-space-md: 0.75rem;
|
|
8352
|
+
--ui-space-lg: 1rem;
|
|
8353
|
+
--ui-space-xl: 1.5rem;
|
|
8354
|
+
--ui-space-2xl: 2rem;
|
|
8355
|
+
--ui-space-3xl: 3rem;
|
|
8356
|
+
--ui-radius-sm: 0.22499999999999998rem;
|
|
8357
|
+
--ui-radius: 0.375rem;
|
|
8358
|
+
--ui-radius-lg: 0.44999999999999996rem;
|
|
8359
|
+
--ui-border-width: 1px;
|
|
8360
|
+
--ui-font: system-ui, "-apple-system", "BlinkMacSystemFont", "Segoe UI", sans-serif;
|
|
8361
|
+
--ui-shadow-sm: none;
|
|
8362
|
+
--ui-shadow-md: none;
|
|
8363
|
+
--ui-shadow-lg: none;
|
|
8364
|
+
--glass-bg: 0 0% 100% / 0.55;
|
|
8365
|
+
--glass-bg-subtle: 0 0% 100% / 0.38;
|
|
8366
|
+
--glass-bg-strong: 0 0% 100% / 0.72;
|
|
8367
|
+
--glass-border: 220 30% 100% / 0.55;
|
|
8368
|
+
--glass-highlight: 0 0% 100% / 0.85;
|
|
8369
|
+
--glass-blur: 22px;
|
|
8370
|
+
--glass-saturate: 1.7;
|
|
8371
|
+
--glass-brightness: 1.05;
|
|
8372
|
+
--glass-edge: 0 0% 100% / 0.9;
|
|
8373
|
+
--glass-edge-soft: 0 0% 100% / 0.34;
|
|
8374
|
+
--glass-shade: 222 47% 11% / 0.07;
|
|
8375
|
+
--glass-refraction: 0 0% 50% / 0.04;
|
|
8376
|
+
--glass-shadow: 0 1px 2px hsl(222 47% 11% / 0.08),
|
|
8377
|
+
0 12px 32px hsl(222 47% 11% / 0.12),
|
|
8378
|
+
0 32px 80px hsl(222 47% 11% / 0.14);
|
|
8379
|
+
}
|
|
8380
|
+
|
|
8381
|
+
:where([data-theme="dark"], [data-theme="lumen-dark"]) [data-lumen-preset="studio"]:not([data-lumen-scheme="light"], [data-theme="light"], [data-theme="lumen-light"]),
|
|
8382
|
+
[data-lumen-preset="studio"][data-lumen-scheme="dark"],
|
|
8383
|
+
[data-lumen-preset="studio"][data-theme="dark"]:not([data-lumen-scheme="light"]),
|
|
8384
|
+
[data-lumen-preset="studio"][data-theme="lumen-dark"]:not([data-lumen-scheme="light"]) {
|
|
8385
|
+
color-scheme: dark;
|
|
8386
|
+
--canvas: 0 0% 7%;
|
|
8387
|
+
--surface: 0 0% 7%;
|
|
8388
|
+
--surface-muted: 0 0% 11%;
|
|
8389
|
+
--surface-strong: 0 0% 19%;
|
|
8390
|
+
--line: 0 0% 22%;
|
|
8391
|
+
--ink: 0 0% 96%;
|
|
8392
|
+
--ink-soft: 0 0% 80%;
|
|
8393
|
+
--ink-muted: 0 0% 64%;
|
|
8394
|
+
--brand: 0 0% 96%;
|
|
8395
|
+
--brand-solid: 0 0% 96%;
|
|
8396
|
+
--brand-soft: 0 0% 14%;
|
|
8397
|
+
--on-brand: 0 0% 7%;
|
|
8398
|
+
--accent: 0 0% 96%;
|
|
8399
|
+
--success: 142 69% 45%;
|
|
8400
|
+
--warning: 38 92% 55%;
|
|
8401
|
+
--danger: 0 84% 65%;
|
|
8402
|
+
--on-danger: 224 24% 8%;
|
|
8403
|
+
--ui-space-zero: 0rem;
|
|
8404
|
+
--ui-space-xs: 0.25rem;
|
|
8405
|
+
--ui-space-sm: 0.5rem;
|
|
8406
|
+
--ui-space-md: 0.75rem;
|
|
8407
|
+
--ui-space-lg: 1rem;
|
|
8408
|
+
--ui-space-xl: 1.5rem;
|
|
8409
|
+
--ui-space-2xl: 2rem;
|
|
8410
|
+
--ui-space-3xl: 3rem;
|
|
8411
|
+
--ui-radius-sm: 0.22499999999999998rem;
|
|
8412
|
+
--ui-radius: 0.375rem;
|
|
8413
|
+
--ui-radius-lg: 0.44999999999999996rem;
|
|
8414
|
+
--ui-border-width: 1px;
|
|
8415
|
+
--ui-font: system-ui, "-apple-system", "BlinkMacSystemFont", "Segoe UI", sans-serif;
|
|
8416
|
+
--ui-shadow-sm: none;
|
|
8417
|
+
--ui-shadow-md: none;
|
|
8418
|
+
--ui-shadow-lg: none;
|
|
8419
|
+
--glass-bg: 224 20% 13% / 0.78;
|
|
8420
|
+
--glass-bg-subtle: 224 20% 13% / 0.64;
|
|
8421
|
+
--glass-bg-strong: 224 20% 13% / 0.9;
|
|
8422
|
+
--glass-border: 210 30% 92% / 0.24;
|
|
8423
|
+
--glass-highlight: 210 30% 96% / 0.1;
|
|
8424
|
+
--glass-brightness: 1;
|
|
8425
|
+
--glass-edge: 210 40% 98% / 0.24;
|
|
8426
|
+
--glass-edge-soft: 210 40% 98% / 0.08;
|
|
8427
|
+
--glass-shade: 240 40% 3% / 0.3;
|
|
8428
|
+
--glass-refraction: 0 0% 50% / 0.04;
|
|
8429
|
+
--glass-shadow: 0 1px 2px hsl(0 0% 0% / 0.3),
|
|
8430
|
+
0 16px 40px hsl(0 0% 0% / 0.34),
|
|
8431
|
+
0 40px 96px hsl(0 0% 0% / 0.38);
|
|
8432
|
+
}
|
|
8433
|
+
|
|
8434
|
+
[data-lumen-preset="glass"],
|
|
8435
|
+
[data-lumen-preset="glass"][data-lumen-scheme="light"] {
|
|
8436
|
+
color-scheme: light;
|
|
8437
|
+
--canvas: 210 24% 98%;
|
|
8438
|
+
--surface: 0 0% 100%;
|
|
8439
|
+
--surface-muted: 210 22% 95%;
|
|
8440
|
+
--surface-strong: 213 18% 88%;
|
|
8441
|
+
--line: 214 17% 84%;
|
|
8442
|
+
--ink: 216 28% 12%;
|
|
8443
|
+
--ink-soft: 215 14% 35%;
|
|
8444
|
+
--ink-muted: 215 10% 50%;
|
|
8445
|
+
--brand: 201 96% 32%;
|
|
8446
|
+
--brand-solid: 201 96% 28%;
|
|
8447
|
+
--brand-soft: 198 64% 92%;
|
|
8448
|
+
--on-brand: 0 0% 100%;
|
|
8449
|
+
--accent: 169 78% 33%;
|
|
8450
|
+
--success: 142 76% 36%;
|
|
8451
|
+
--warning: 38 92% 50%;
|
|
8452
|
+
--danger: 0 84% 60%;
|
|
8453
|
+
--on-danger: 0 0% 0%;
|
|
8454
|
+
--ui-space-zero: 0rem;
|
|
8455
|
+
--ui-space-xs: 0.25rem;
|
|
8456
|
+
--ui-space-sm: 0.5rem;
|
|
8457
|
+
--ui-space-md: 0.75rem;
|
|
8458
|
+
--ui-space-lg: 1rem;
|
|
8459
|
+
--ui-space-xl: 1.5rem;
|
|
8460
|
+
--ui-space-2xl: 2rem;
|
|
8461
|
+
--ui-space-3xl: 3rem;
|
|
8462
|
+
--ui-radius-sm: 0.5249999999999999rem;
|
|
8463
|
+
--ui-radius: 0.875rem;
|
|
8464
|
+
--ui-radius-lg: 1.0499999999999998rem;
|
|
8465
|
+
--ui-border-width: 1px;
|
|
8466
|
+
--ui-font: "Montserrat", "Avenir Next", "Segoe UI", sans-serif;
|
|
8467
|
+
--ui-shadow-sm: 0 1px 2px hsl(222 47% 11% / 0.06);
|
|
8468
|
+
--ui-shadow-md: 0 8px 24px hsl(222 47% 11% / 0.08);
|
|
8469
|
+
--ui-shadow-lg: 0 24px 64px hsl(222 47% 11% / 0.14);
|
|
8470
|
+
--glass-bg: 0 0% 100% / 0.55;
|
|
8471
|
+
--glass-bg-subtle: 0 0% 100% / 0.38;
|
|
8472
|
+
--glass-bg-strong: 0 0% 100% / 0.72;
|
|
8473
|
+
--glass-border: 220 30% 100% / 0.55;
|
|
8474
|
+
--glass-highlight: 0 0% 100% / 0.85;
|
|
8475
|
+
--glass-blur: 22px;
|
|
8476
|
+
--glass-saturate: 1.7;
|
|
8477
|
+
--glass-brightness: 1.05;
|
|
8478
|
+
--glass-edge: 0 0% 100% / 0.9;
|
|
8479
|
+
--glass-edge-soft: 0 0% 100% / 0.34;
|
|
8480
|
+
--glass-shade: 222 47% 11% / 0.07;
|
|
8481
|
+
--glass-refraction: 201 96% 32% / 0.08;
|
|
8482
|
+
--glass-shadow: 0 1px 2px hsl(222 47% 11% / 0.08),
|
|
8483
|
+
0 12px 32px hsl(222 47% 11% / 0.12),
|
|
8484
|
+
0 32px 80px hsl(222 47% 11% / 0.14);
|
|
8485
|
+
}
|
|
8486
|
+
|
|
8487
|
+
:where([data-theme="dark"], [data-theme="lumen-dark"]) [data-lumen-preset="glass"]:not([data-lumen-scheme="light"], [data-theme="light"], [data-theme="lumen-light"]),
|
|
8488
|
+
[data-lumen-preset="glass"][data-lumen-scheme="dark"],
|
|
8489
|
+
[data-lumen-preset="glass"][data-theme="dark"]:not([data-lumen-scheme="light"]),
|
|
8490
|
+
[data-lumen-preset="glass"][data-theme="lumen-dark"]:not([data-lumen-scheme="light"]) {
|
|
8491
|
+
color-scheme: dark;
|
|
8492
|
+
--canvas: 224 24% 8%;
|
|
8493
|
+
--surface: 224 18% 11%;
|
|
8494
|
+
--surface-muted: 223 16% 15%;
|
|
8495
|
+
--surface-strong: 222 14% 22%;
|
|
8496
|
+
--line: 222 14% 26%;
|
|
8497
|
+
--ink: 210 20% 96%;
|
|
8498
|
+
--ink-soft: 214 14% 77%;
|
|
8499
|
+
--ink-muted: 216 10% 62%;
|
|
8500
|
+
--brand: 199 91% 56%;
|
|
8501
|
+
--brand-solid: 199 91% 36%;
|
|
8502
|
+
--brand-soft: 199 84% 16%;
|
|
8503
|
+
--on-brand: 0 0% 100%;
|
|
8504
|
+
--accent: 166 76% 43%;
|
|
8505
|
+
--success: 142 69% 45%;
|
|
8506
|
+
--warning: 38 92% 55%;
|
|
8507
|
+
--danger: 0 84% 65%;
|
|
8508
|
+
--on-danger: 224 24% 8%;
|
|
8509
|
+
--ui-space-zero: 0rem;
|
|
8510
|
+
--ui-space-xs: 0.25rem;
|
|
8511
|
+
--ui-space-sm: 0.5rem;
|
|
8512
|
+
--ui-space-md: 0.75rem;
|
|
8513
|
+
--ui-space-lg: 1rem;
|
|
8514
|
+
--ui-space-xl: 1.5rem;
|
|
8515
|
+
--ui-space-2xl: 2rem;
|
|
8516
|
+
--ui-space-3xl: 3rem;
|
|
8517
|
+
--ui-radius-sm: 0.5249999999999999rem;
|
|
8518
|
+
--ui-radius: 0.875rem;
|
|
8519
|
+
--ui-radius-lg: 1.0499999999999998rem;
|
|
8520
|
+
--ui-border-width: 1px;
|
|
8521
|
+
--ui-font: "Montserrat", "Avenir Next", "Segoe UI", sans-serif;
|
|
8522
|
+
--ui-shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.18);
|
|
8523
|
+
--ui-shadow-md: 0 12px 32px hsl(0 0% 0% / 0.24);
|
|
8524
|
+
--ui-shadow-lg: 0 28px 80px hsl(0 0% 0% / 0.36);
|
|
8525
|
+
--glass-bg: 224 20% 13% / 0.78;
|
|
8526
|
+
--glass-bg-subtle: 224 20% 13% / 0.64;
|
|
8527
|
+
--glass-bg-strong: 224 20% 13% / 0.9;
|
|
8528
|
+
--glass-border: 210 30% 92% / 0.24;
|
|
8529
|
+
--glass-highlight: 210 30% 96% / 0.1;
|
|
8530
|
+
--glass-brightness: 1;
|
|
8531
|
+
--glass-edge: 210 40% 98% / 0.24;
|
|
8532
|
+
--glass-edge-soft: 210 40% 98% / 0.08;
|
|
8533
|
+
--glass-shade: 240 40% 3% / 0.3;
|
|
8534
|
+
--glass-refraction: 199 91% 56% / 0.1;
|
|
8535
|
+
--glass-shadow: 0 1px 2px hsl(0 0% 0% / 0.3),
|
|
8536
|
+
0 16px 40px hsl(0 0% 0% / 0.34),
|
|
8537
|
+
0 40px 96px hsl(0 0% 0% / 0.38);
|
|
8538
|
+
}
|
|
8539
|
+
}
|
|
8540
|
+
/* END:generated-theme-presets */
|
|
8541
|
+
|
|
8542
|
+
@layer lumen.components {
|
|
8543
|
+
.ui-calendar-heatmap__range { color: hsl(var(--ink-soft)); font-size: .875rem; margin: 0; }
|
|
8544
|
+
.ui-calendar-heatmap__plot { overflow-x: auto; max-width: 100%; padding: .5rem 0; }
|
|
8545
|
+
.ui-calendar-heatmap__plot svg { display: block; width: auto; max-width: none; min-width: 240px; }
|
|
8546
|
+
.ui-calendar-heatmap__weekday { fill: hsl(var(--chart-axis)); font-size: 11px; }
|
|
8547
|
+
.ui-calendar-heatmap__cell { fill: hsl(var(--chart-series-1)); }
|
|
8548
|
+
.ui-calendar-heatmap__cell[data-missing] { fill: hsl(var(--surface-muted)); stroke: hsl(var(--line)); }
|
|
8549
|
+
.ui-calendar-heatmap__missing { fill: hsl(var(--ink-muted)); font-size: 12px; }
|
|
8550
|
+
.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; }
|
|
8551
|
+
.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))); }
|
|
8552
|
+
.ui-funnel-chart__rows, .ui-box-plot__rows { display: grid; gap: 1rem; margin: 0; padding: .5rem; list-style: none; }
|
|
8553
|
+
.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; }
|
|
8554
|
+
.ui-funnel-chart__label strong, .ui-box-plot__label strong { font-variant-numeric: tabular-nums; }
|
|
8555
|
+
.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); }
|
|
8556
|
+
.ui-funnel-chart__bar { display: block; height: 100%; background: var(--ui-chart-color, hsl(var(--chart-series-1))); border-radius: var(--ui-radius-sm); }
|
|
8557
|
+
.ui-box-plot__track { position: relative; height: 2.5rem; margin: .5rem .375rem 0; }
|
|
8558
|
+
.ui-box-plot__track::before { content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: hsl(var(--line)); }
|
|
8559
|
+
.ui-box-plot__whisker { position: absolute; top: calc(50% - 1px); height: 2px; background: var(--ui-chart-color, hsl(var(--chart-series-1))); }
|
|
8560
|
+
.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))); }
|
|
8561
|
+
.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; }
|
|
8562
|
+
.ui-box-plot__median { top: 10%; height: 80%; width: 3px; background: hsl(var(--ink)); }
|
|
8563
|
+
.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)); }
|
|
8564
|
+
:is(.ui-calendar-heatmap, .ui-funnel-chart, .ui-box-plot) [tabindex="0"]:focus-visible { outline: 2px solid hsl(var(--brand)); outline-offset: 2px; }
|
|
8565
|
+
@media (forced-colors: active) {
|
|
8566
|
+
.ui-calendar-heatmap__cell { fill: Highlight; stroke: CanvasText; }
|
|
8567
|
+
.ui-calendar-heatmap__cell[data-missing] { fill: Canvas; }
|
|
8568
|
+
.ui-calendar-heatmap__missing, .ui-calendar-heatmap__weekday { fill: CanvasText; }
|
|
8569
|
+
.ui-funnel-chart__bar, .ui-box-plot__whisker, .ui-box-plot__cap, .ui-box-plot__median { background: CanvasText; }
|
|
8570
|
+
.ui-box-plot__box, .ui-box-plot__outlier { border-color: CanvasText; background: Canvas; }
|
|
8571
|
+
}
|
|
8572
|
+
|
|
8573
|
+
}
|
|
8574
|
+
|
|
8575
|
+
/* Device hardware is decorative; live screens retain their own viewport and colors. */
|
|
8576
|
+
.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%); }
|
|
8577
|
+
.ui-device-frame[data-tone="light"] { --ui-device-tone: #f7f7f7; }
|
|
8578
|
+
.ui-device-frame__shell { position: relative; border: 1px solid var(--ui-device-rim); background: var(--ui-device-shell); }
|
|
8579
|
+
.ui-device-frame__glass { position: relative; background: var(--ui-device-shell); }
|
|
8580
|
+
.ui-device-frame__screen { display: block; position: relative; width: 100%; overflow: auto; background: hsl(var(--canvas)); isolation: isolate; }
|
|
8581
|
+
.ui-device-frame__screen[data-scroll="false"], .ui-device-frame__screen:has(> iframe) { overflow: hidden; }
|
|
8582
|
+
.ui-device-frame__screen > img { display: block; width: 100%; height: 100%; object-fit: contain; }
|
|
8583
|
+
.ui-device-frame__screen > iframe { display: block; width: 100%; height: 100%; border: 0; }
|
|
8584
|
+
.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; }
|
|
8585
|
+
.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; }
|
|
8586
|
+
.ui-device-frame__hardware { display: none; position: absolute; inset: 0; z-index: 4; pointer-events: none; }
|
|
8587
|
+
.ui-device-frame__base { position: relative; display: block; pointer-events: none; }
|
|
8588
|
+
|
|
8589
|
+
/* A thin display lid, recessed hinge and a separate tapered keyboard deck. */
|
|
8590
|
+
.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); }
|
|
8591
|
+
.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); }
|
|
8592
|
+
.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); }
|
|
8593
|
+
.ui-device-frame:is([data-device="laptop"], [data-device="macbook-air"], [data-device="macbook-pro"]) .ui-device-frame__camera { top: 1.2cqi; }
|
|
8594
|
+
.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)); }
|
|
8595
|
+
.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); }
|
|
8596
|
+
.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); }
|
|
8597
|
+
.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; }
|
|
8598
|
+
|
|
8599
|
+
/* MacBook Pro has a full-height front edge, compact display bezel, and camera notch. */
|
|
8600
|
+
.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; }
|
|
8601
|
+
.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); }
|
|
8602
|
+
.ui-device-frame[data-device="macbook-pro"] .ui-device-frame__screen { border-radius: 0.7cqi 0.7cqi 0.15cqi 0.15cqi; }
|
|
8603
|
+
.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); }
|
|
8604
|
+
.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); }
|
|
8605
|
+
.ui-device-frame[data-device="macbook-pro"] .ui-device-frame__shell::after { left: 1%; right: 1%; height: 0.7cqi; }
|
|
8606
|
+
.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)); }
|
|
8607
|
+
.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; }
|
|
8608
|
+
.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; }
|
|
8609
|
+
|
|
8610
|
+
/* The display and chin form one enclosure; the curved neck rolls into a broad foot. */
|
|
8611
|
+
.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); }
|
|
8612
|
+
.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%); }
|
|
8613
|
+
.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); }
|
|
8614
|
+
.ui-device-frame:is([data-device="desktop"], [data-device="imac"]) .ui-device-frame__camera { top: 1.15cqi; }
|
|
8615
|
+
.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; }
|
|
8616
|
+
.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; }
|
|
8617
|
+
.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); }
|
|
8618
|
+
|
|
8619
|
+
/* Rounded cover glass sits inside a layered metal rail, with separate side controls. */
|
|
8620
|
+
.ui-device-frame:is([data-device="iphone"], [data-device="android"], [data-device="pixel"], [data-device="tablet"], [data-device="ipad-pro"]) { max-width: 24rem; }
|
|
8621
|
+
.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); }
|
|
8622
|
+
.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); }
|
|
8623
|
+
.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; }
|
|
8624
|
+
.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; }
|
|
8625
|
+
.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; }
|
|
8626
|
+
.ui-device-frame:is([data-device="iphone"], [data-device="android"], [data-device="pixel"]) .ui-device-frame__hardware { display: block; }
|
|
8627
|
+
.ui-device-frame__hardware > span { position: absolute; }
|
|
8628
|
+
.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); }
|
|
8629
|
+
.ui-device-frame__action { left: -1.1cqi; top: 15%; height: 3.5%; }
|
|
8630
|
+
.ui-device-frame__volume-up { left: -1.1cqi; top: 23%; height: 7%; }
|
|
8631
|
+
.ui-device-frame__volume-down { left: -1.1cqi; top: 33%; height: 7%; }
|
|
8632
|
+
.ui-device-frame__power { right: -1.1cqi; top: 25%; height: 11%; }
|
|
8633
|
+
.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%); }
|
|
8634
|
+
.ui-device-frame__rail-left { left: 0; }
|
|
8635
|
+
.ui-device-frame__rail-right { right: 0; }
|
|
8636
|
+
.ui-device-frame:is([data-device="iphone"], [data-device="android"], [data-device="pixel"]) .ui-device-frame__base { display: none; }
|
|
8637
|
+
.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; }
|
|
8638
|
+
.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; }
|
|
8639
|
+
.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); }
|
|
8640
|
+
.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); }
|
|
8641
|
+
.ui-device-frame:is([data-device="android"], [data-device="pixel"]) .ui-device-frame__shell { border-radius: 11cqi; padding: 1.65%; }
|
|
8642
|
+
.ui-device-frame:is([data-device="android"], [data-device="pixel"]) .ui-device-frame__glass { border-radius: 9.25cqi; padding-top: 7%; }
|
|
8643
|
+
.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); }
|
|
8644
|
+
.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; }
|
|
8645
|
+
.ui-device-frame:is([data-device="android"], [data-device="pixel"]) .ui-device-frame__power { top: 19%; height: 6%; }
|
|
8646
|
+
.ui-device-frame:is([data-device="android"], [data-device="pixel"]) .ui-device-frame__volume-up { top: 29%; height: 12%; left: auto; right: -1.1cqi; }
|
|
8647
|
+
|
|
8648
|
+
/* A classic tablet enclosure has a separate home recess and a side camera in landscape. */
|
|
8649
|
+
.ui-device-frame[data-device="tablet"] { max-width: 40rem; }
|
|
8650
|
+
.ui-device-frame[data-device="tablet"] .ui-device-frame__shell { padding: 0.6%; border-radius: 4.5cqi; }
|
|
8651
|
+
.ui-device-frame[data-device="tablet"] .ui-device-frame__glass { padding: 7% 3.5% 9%; border-radius: 3.8cqi; background: var(--ui-device-shell); }
|
|
8652
|
+
.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); }
|
|
8653
|
+
.ui-device-frame[data-device="tablet"] .ui-device-frame__camera { top: 2.8cqi; width: 0.7cqi; height: 0.7cqi; }
|
|
8654
|
+
.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); }
|
|
8655
|
+
.ui-device-frame[data-device="tablet"][data-orientation="landscape"] .ui-device-frame__glass { padding: 3.5% 7%; }
|
|
8656
|
+
.ui-device-frame[data-device="tablet"][data-orientation="landscape"] .ui-device-frame__camera { left: 2.8cqi; top: 50%; transform: translateY(-50%); }
|
|
8657
|
+
.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%); }
|
|
8658
|
+
|
|
8659
|
+
/* iPad Pro keeps an even bezel and flat rail; the landscape camera stays outside the screen. */
|
|
8660
|
+
.ui-device-frame[data-device="ipad-pro"] { max-width: 44rem; }
|
|
8661
|
+
.ui-device-frame[data-device="ipad-pro"] .ui-device-frame__shell { padding: 0.55%; border-radius: 4.1cqi; }
|
|
8662
|
+
.ui-device-frame[data-device="ipad-pro"] .ui-device-frame__glass { padding: 3%; border-radius: 3.55cqi; background: var(--ui-device-shell); }
|
|
8663
|
+
.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); }
|
|
8664
|
+
.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%); }
|
|
8665
|
+
.ui-device-frame[data-device="ipad-pro"][data-orientation="landscape"] .ui-device-frame__camera { left: 50%; right: auto; top: 1.15cqi; transform: translateX(-50%); }
|
|
8666
|
+
.ui-device-frame[data-device="ipad-pro"] .ui-device-frame__base { display: none; }
|
|
8667
|
+
.ui-device-frame[data-device="ipad-pro"] .ui-device-frame__hardware { display: block; }
|
|
8668
|
+
.ui-device-frame[data-device="ipad-pro"] .ui-device-frame__hardware > span { display: none; }
|
|
8669
|
+
.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; }
|
|
8670
|
+
.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%; }
|
|
8671
|
+
.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%; }
|
|
8672
|
+
|
|
8673
|
+
@layer lumen.components {
|
|
8674
|
+
.ui-motion-group { position: relative; display: grid; gap: var(--ui-space-lg); }
|
|
8675
|
+
.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); }
|
|
8676
|
+
.ui-visual-effect::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: calc(var(--ui-effect-intensity, .5) * .4); }
|
|
8677
|
+
[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%); }
|
|
8678
|
+
[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%); }
|
|
8679
|
+
[data-ui-visual-effect="aurora"][data-ui-effect-animated="true"]::before { animation: ui-aurora 12s ease-in-out infinite alternate; }
|
|
8680
|
+
[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%); }
|
|
8681
|
+
[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); }
|
|
8682
|
+
[data-ui-visual-effect="border"] { border: var(--ui-border-width) solid hsl(var(--line)); }
|
|
8683
|
+
[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; }
|
|
8684
|
+
[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; }
|
|
8685
|
+
.ui-prompt-composer { display: grid; gap: var(--ui-space-md); min-width: 0; }
|
|
8686
|
+
.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); }
|
|
8687
|
+
.ui-stream-message { display: grid; gap: var(--ui-space-md); }
|
|
8688
|
+
.ui-chart-motion, .ui-tool-activity { display: block; }
|
|
8689
|
+
.ui-source-citation { overflow-wrap: anywhere; }
|
|
8690
|
+
.ui-approval-card { display: grid; gap: var(--ui-space-lg); }
|
|
8691
|
+
.ui-tabs__moving-indicator { position: absolute; left: 0; bottom: 0; height: 2px; background: hsl(var(--brand)); pointer-events: none; }
|
|
8692
|
+
[data-ui-chart-motion] .ui-chart__empty { animation: ui-chart-state var(--ui-duration, 160ms) ease-out; }
|
|
8693
|
+
@supports (animation-timeline: view()) {
|
|
8694
|
+
[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(); }
|
|
8695
|
+
}
|
|
8696
|
+
@keyframes ui-aurora { to { transform: translate(4%, -4%) rotate(8deg); } }
|
|
8697
|
+
@keyframes ui-path-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
|
|
8698
|
+
@keyframes ui-effect-depth { from { transform: translateY(-5%); opacity: 0; } to { transform: translateY(5%); } }
|
|
8699
|
+
@keyframes ui-chart-state { from { opacity: 0; } to { opacity: 1; } }
|
|
8700
|
+
@media (prefers-reduced-motion: reduce) {
|
|
8701
|
+
.ui-visual-effect::before, .ui-visual-effect :where(path, line, polyline), [data-ui-chart-motion] .ui-chart__empty { animation: none !important; }
|
|
8702
|
+
.ui-tabs__moving-indicator { transition: none !important; }
|
|
8703
|
+
}
|
|
8704
|
+
: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; }
|
|
8705
|
+
[data-ui-motion="reduce"] .ui-tabs__moving-indicator { transition: none !important; }
|
|
8706
|
+
@media (forced-colors: active) { .ui-visual-effect::before { display: none; } }
|
|
8707
|
+
}
|
|
8708
|
+
|
|
8709
|
+
|
|
8710
|
+
.ui-media-viewport { display: grid; min-width: 0; gap: var(--ui-space-sm); margin: 0; }
|
|
8711
|
+
.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)); }
|
|
8712
|
+
.ui-media-viewport__stage:focus-visible { outline: 2px solid hsl(var(--brand)); outline-offset: 3px; }
|
|
8713
|
+
.ui-media-viewport__content { position: absolute; inset: 0; transform-origin: center; }
|
|
8714
|
+
.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; }
|
|
8715
|
+
.ui-media-viewport :is(figcaption, .ui-media-viewport__caption) { display: grid; gap: var(--ui-space-sm); }
|
|
8716
|
+
.ui-media-viewport__actions { display: flex; flex-wrap: wrap; gap: var(--ui-space-sm); }
|
|
8717
|
+
|
|
8718
|
+
|
|
8719
|
+
.ui-media-thumbnail { position: relative; display: block; min-width: 0; height: auto; padding: var(--ui-space-sm); white-space: normal; text-align: start; }
|
|
8720
|
+
.ui-media-thumbnail .ui-button__content { display: grid; min-width: 0; width: 100%; gap: var(--ui-space-xs); }
|
|
8721
|
+
.ui-media-thumbnail__media { display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--ui-radius-sm); background: hsl(var(--surface-muted)); }
|
|
8722
|
+
.ui-media-thumbnail__media :where(img, picture, .ui-image) { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
|
|
8723
|
+
.ui-media-thumbnail__label, .ui-media-thumbnail__state { overflow-wrap: anywhere; }
|
|
8724
|
+
.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)); }
|
|
8725
|
+
.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)); }
|
|
8726
|
+
.ui-media-thumbnail[aria-pressed="true"] .ui-media-thumbnail__label::before { content: '✓ '; }
|
|
8727
|
+
.ui-media-filmstrip { display: grid; min-width: 0; gap: var(--ui-space-sm); }
|
|
8728
|
+
.ui-media-filmstrip__heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ui-space-sm); }
|
|
8729
|
+
.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; }
|
|
8730
|
+
.ui-media-filmstrip__items > li { flex: 0 0 9rem; min-width: 0; display: grid; align-content: start; gap: var(--ui-space-xs); }
|
|
8731
|
+
.ui-media-filmstrip__items .ui-media-thumbnail { width: 100%; }
|
|
8732
|
+
|
|
8733
|
+
lumen-media-thumbnail.ui-media-thumbnail { padding: 0; }
|
|
8734
|
+
lumen-media-thumbnail > .ui-media-thumbnail { width: 100%; }
|