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