@twentyfirstmedia/ui-core 0.5.0 → 0.6.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/dist/components/admin.d.ts.map +1 -1
- package/dist/components/admin.js +31 -21
- package/dist/components/admin.js.map +1 -1
- package/dist/components/agents.d.ts.map +1 -1
- package/dist/components/agents.js +21 -18
- package/dist/components/agents.js.map +1 -1
- package/dist/components/app-chrome.d.ts.map +1 -1
- package/dist/components/app-chrome.js +5 -5
- package/dist/components/app-chrome.js.map +1 -1
- package/dist/components/approvals.d.ts.map +1 -1
- package/dist/components/approvals.js +2 -2
- package/dist/components/approvals.js.map +1 -1
- package/dist/components/building-blocks.d.ts.map +1 -1
- package/dist/components/building-blocks.js +13 -10
- package/dist/components/building-blocks.js.map +1 -1
- package/dist/components/charts.d.ts +2 -2
- package/dist/components/charts.d.ts.map +1 -1
- package/dist/components/charts.js +14 -11
- package/dist/components/charts.js.map +1 -1
- package/dist/components/chat.d.ts +2 -2
- package/dist/components/chat.d.ts.map +1 -1
- package/dist/components/chat.js +22 -18
- package/dist/components/chat.js.map +1 -1
- package/dist/components/commerce.d.ts.map +1 -1
- package/dist/components/commerce.js +20 -16
- package/dist/components/commerce.js.map +1 -1
- package/dist/components/data-display.d.ts +0 -5
- package/dist/components/data-display.d.ts.map +1 -1
- package/dist/components/data-display.js +41 -22
- package/dist/components/data-display.js.map +1 -1
- package/dist/components/data-table.d.ts +2 -2
- package/dist/components/data-table.d.ts.map +1 -1
- package/dist/components/data-table.js +3 -3
- package/dist/components/data-table.js.map +1 -1
- package/dist/components/developer.d.ts.map +1 -1
- package/dist/components/developer.js +7 -6
- package/dist/components/developer.js.map +1 -1
- package/dist/components/feedback.d.ts.map +1 -1
- package/dist/components/feedback.js +5 -4
- package/dist/components/feedback.js.map +1 -1
- package/dist/components/forms.d.ts.map +1 -1
- package/dist/components/forms.js +63 -21
- package/dist/components/forms.js.map +1 -1
- package/dist/components/foundation.d.ts.map +1 -1
- package/dist/components/foundation.js +13 -9
- package/dist/components/foundation.js.map +1 -1
- package/dist/components/index.d.ts +2 -1
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +2 -1
- package/dist/components/index.js.map +1 -1
- package/dist/components/inputs.d.ts.map +1 -1
- package/dist/components/inputs.js +33 -8
- package/dist/components/inputs.js.map +1 -1
- package/dist/components/mail.d.ts.map +1 -1
- package/dist/components/mail.js +5 -5
- package/dist/components/mail.js.map +1 -1
- package/dist/components/media.d.ts.map +1 -1
- package/dist/components/media.js +62 -11
- package/dist/components/media.js.map +1 -1
- package/dist/components/navigation.d.ts +3 -1
- package/dist/components/navigation.d.ts.map +1 -1
- package/dist/components/navigation.js +287 -20
- package/dist/components/navigation.js.map +1 -1
- package/dist/components/operations.d.ts.map +1 -1
- package/dist/components/operations.js +10 -10
- package/dist/components/operations.js.map +1 -1
- package/dist/components/overlays.d.ts.map +1 -1
- package/dist/components/overlays.js +2 -2
- package/dist/components/overlays.js.map +1 -1
- package/dist/components/previews.js +2 -2
- package/dist/components/previews.js.map +1 -1
- package/dist/components/primitives.js +2 -2
- package/dist/components/primitives.js.map +1 -1
- package/dist/components/qr-code.d.ts +8 -0
- package/dist/components/qr-code.d.ts.map +1 -0
- package/dist/components/qr-code.js +18 -0
- package/dist/components/qr-code.js.map +1 -0
- package/dist/components/real-estate.d.ts.map +1 -1
- package/dist/components/real-estate.js +5 -5
- package/dist/components/real-estate.js.map +1 -1
- package/dist/components/rich-text-editor.d.ts.map +1 -1
- package/dist/components/rich-text-editor.js +1 -1
- package/dist/components/rich-text-editor.js.map +1 -1
- package/dist/components/select-menu.js +1 -1
- package/dist/components/select-menu.js.map +1 -1
- package/dist/components/shell.d.ts +0 -4
- package/dist/components/shell.d.ts.map +1 -1
- package/dist/components/shell.js +100 -7
- package/dist/components/shell.js.map +1 -1
- package/dist/components/site.d.ts.map +1 -1
- package/dist/components/site.js +8 -6
- package/dist/components/site.js.map +1 -1
- package/dist/components/status.d.ts.map +1 -1
- package/dist/components/status.js +2 -2
- package/dist/components/status.js.map +1 -1
- package/dist/components/system.d.ts.map +1 -1
- package/dist/components/system.js +3 -2
- package/dist/components/system.js.map +1 -1
- package/dist/components/types.d.ts +257 -18
- package/dist/components/types.d.ts.map +1 -1
- package/dist/components/workspace.d.ts.map +1 -1
- package/dist/components/workspace.js +15 -12
- package/dist/components/workspace.js.map +1 -1
- package/dist/qr.d.ts +14 -0
- package/dist/qr.d.ts.map +1 -0
- package/dist/qr.js +298 -0
- package/dist/qr.js.map +1 -0
- package/dist/strings.d.ts +30 -4
- package/dist/strings.d.ts.map +1 -1
- package/dist/strings.js +15 -0
- package/dist/strings.js.map +1 -1
- package/dist/themes.css +2345 -176
- package/package.json +2 -1
- package/src/components/admin.tsx +66 -23
- package/src/components/agents.tsx +22 -20
- package/src/components/app-chrome.tsx +9 -5
- package/src/components/approvals.tsx +3 -1
- package/src/components/building-blocks.tsx +24 -13
- package/src/components/charts.tsx +17 -12
- package/src/components/chat.tsx +54 -31
- package/src/components/commerce.tsx +58 -24
- package/src/components/data-display.tsx +106 -38
- package/src/components/data-table.tsx +11 -7
- package/src/components/developer.tsx +15 -6
- package/src/components/feedback.tsx +5 -3
- package/src/components/forms.tsx +101 -23
- package/src/components/foundation.tsx +9 -5
- package/src/components/index.ts +10 -1
- package/src/components/inputs.tsx +44 -7
- package/src/components/mail.tsx +7 -3
- package/src/components/media.tsx +88 -16
- package/src/components/navigation.tsx +651 -71
- package/src/components/operations.tsx +17 -8
- package/src/components/overlays.tsx +7 -2
- package/src/components/previews.tsx +2 -2
- package/src/components/primitives.tsx +2 -2
- package/src/components/qr-code.tsx +30 -0
- package/src/components/real-estate.tsx +7 -4
- package/src/components/rich-text-editor.tsx +7 -1
- package/src/components/select-menu.tsx +1 -1
- package/src/components/shell.tsx +237 -11
- package/src/components/site.tsx +18 -4
- package/src/components/status.tsx +2 -0
- package/src/components/system.tsx +3 -2
- package/src/components/types.ts +261 -18
- package/src/components/workspace.tsx +37 -15
- package/src/qr.ts +300 -0
- package/src/strings.ts +56 -1
package/dist/themes.css
CHANGED
|
@@ -366,6 +366,11 @@
|
|
|
366
366
|
--chart-lilac: var(--lilac);
|
|
367
367
|
--chart-butter: var(--butter);
|
|
368
368
|
--chart-blush: var(--blush);
|
|
369
|
+
--ramp-1: color-mix(in oklab, var(--chart-1) 12%, var(--background));
|
|
370
|
+
--ramp-2: color-mix(in oklab, var(--chart-1) 28%, var(--background));
|
|
371
|
+
--ramp-3: color-mix(in oklab, var(--chart-1) 46%, var(--background));
|
|
372
|
+
--ramp-4: color-mix(in oklab, var(--chart-1) 66%, var(--background));
|
|
373
|
+
--ramp-5: color-mix(in oklab, var(--chart-1) 88%, var(--background));
|
|
369
374
|
--ok: #2f5d16;
|
|
370
375
|
--ok-bg: #d6efc3;
|
|
371
376
|
--info: #1f4f8a;
|
|
@@ -514,6 +519,11 @@
|
|
|
514
519
|
--chart-lilac: var(--lilac-ink);
|
|
515
520
|
--chart-butter: var(--butter-ink);
|
|
516
521
|
--chart-blush: var(--blush-ink);
|
|
522
|
+
--ramp-1: color-mix(in oklab, var(--chart-1) 12%, var(--background));
|
|
523
|
+
--ramp-2: color-mix(in oklab, var(--chart-1) 28%, var(--background));
|
|
524
|
+
--ramp-3: color-mix(in oklab, var(--chart-1) 46%, var(--background));
|
|
525
|
+
--ramp-4: color-mix(in oklab, var(--chart-1) 66%, var(--background));
|
|
526
|
+
--ramp-5: color-mix(in oklab, var(--chart-1) 88%, var(--background));
|
|
517
527
|
--ok: #a8db86;
|
|
518
528
|
--ok-bg: #24401a;
|
|
519
529
|
--info: #9cc6f7;
|
|
@@ -663,6 +673,11 @@
|
|
|
663
673
|
--chart-lilac: var(--lilac-ink);
|
|
664
674
|
--chart-butter: var(--butter-ink);
|
|
665
675
|
--chart-blush: var(--blush-ink);
|
|
676
|
+
--ramp-1: color-mix(in oklab, var(--chart-1) 12%, var(--background));
|
|
677
|
+
--ramp-2: color-mix(in oklab, var(--chart-1) 28%, var(--background));
|
|
678
|
+
--ramp-3: color-mix(in oklab, var(--chart-1) 46%, var(--background));
|
|
679
|
+
--ramp-4: color-mix(in oklab, var(--chart-1) 66%, var(--background));
|
|
680
|
+
--ramp-5: color-mix(in oklab, var(--chart-1) 88%, var(--background));
|
|
666
681
|
--ok: #a8db86;
|
|
667
682
|
--ok-bg: #24401a;
|
|
668
683
|
--info: #9cc6f7;
|
|
@@ -812,6 +827,11 @@
|
|
|
812
827
|
--chart-lilac: var(--lilac);
|
|
813
828
|
--chart-butter: var(--butter);
|
|
814
829
|
--chart-blush: var(--blush);
|
|
830
|
+
--ramp-1: color-mix(in oklab, var(--chart-1) 12%, var(--background));
|
|
831
|
+
--ramp-2: color-mix(in oklab, var(--chart-1) 28%, var(--background));
|
|
832
|
+
--ramp-3: color-mix(in oklab, var(--chart-1) 46%, var(--background));
|
|
833
|
+
--ramp-4: color-mix(in oklab, var(--chart-1) 66%, var(--background));
|
|
834
|
+
--ramp-5: color-mix(in oklab, var(--chart-1) 88%, var(--background));
|
|
815
835
|
--ok: #2f5d16;
|
|
816
836
|
--ok-bg: #d6efc3;
|
|
817
837
|
--info: #1f4f8a;
|
|
@@ -960,6 +980,11 @@
|
|
|
960
980
|
--chart-lilac: var(--lilac-ink);
|
|
961
981
|
--chart-butter: var(--butter-ink);
|
|
962
982
|
--chart-blush: var(--blush-ink);
|
|
983
|
+
--ramp-1: color-mix(in oklab, var(--chart-1) 12%, var(--background));
|
|
984
|
+
--ramp-2: color-mix(in oklab, var(--chart-1) 28%, var(--background));
|
|
985
|
+
--ramp-3: color-mix(in oklab, var(--chart-1) 46%, var(--background));
|
|
986
|
+
--ramp-4: color-mix(in oklab, var(--chart-1) 66%, var(--background));
|
|
987
|
+
--ramp-5: color-mix(in oklab, var(--chart-1) 88%, var(--background));
|
|
963
988
|
--ok: #a8db86;
|
|
964
989
|
--ok-bg: #24401a;
|
|
965
990
|
--info: #9cc6f7;
|
|
@@ -1107,6 +1132,11 @@
|
|
|
1107
1132
|
--chart-lilac: var(--lilac);
|
|
1108
1133
|
--chart-butter: var(--butter);
|
|
1109
1134
|
--chart-blush: var(--blush);
|
|
1135
|
+
--ramp-1: color-mix(in oklab, var(--chart-1) 12%, var(--background));
|
|
1136
|
+
--ramp-2: color-mix(in oklab, var(--chart-1) 28%, var(--background));
|
|
1137
|
+
--ramp-3: color-mix(in oklab, var(--chart-1) 46%, var(--background));
|
|
1138
|
+
--ramp-4: color-mix(in oklab, var(--chart-1) 66%, var(--background));
|
|
1139
|
+
--ramp-5: color-mix(in oklab, var(--chart-1) 88%, var(--background));
|
|
1110
1140
|
--ok: #2f5d16;
|
|
1111
1141
|
--ok-bg: #d6efc3;
|
|
1112
1142
|
--info: #1f4f8a;
|
|
@@ -1509,6 +1539,11 @@
|
|
|
1509
1539
|
--chart-lilac: var(--fg-300);
|
|
1510
1540
|
--chart-butter: var(--fg-200);
|
|
1511
1541
|
--chart-blush: var(--line-300);
|
|
1542
|
+
--ramp-1: color-mix(in oklab, var(--chart-1) 12%, var(--background));
|
|
1543
|
+
--ramp-2: color-mix(in oklab, var(--chart-1) 28%, var(--background));
|
|
1544
|
+
--ramp-3: color-mix(in oklab, var(--chart-1) 46%, var(--background));
|
|
1545
|
+
--ramp-4: color-mix(in oklab, var(--chart-1) 66%, var(--background));
|
|
1546
|
+
--ramp-5: color-mix(in oklab, var(--chart-1) 88%, var(--background));
|
|
1512
1547
|
--ok: #5cc28f;
|
|
1513
1548
|
--ok-bg: rgba(92,194,143,0.12);
|
|
1514
1549
|
--info: #7aa7f5;
|
|
@@ -1657,6 +1692,11 @@
|
|
|
1657
1692
|
--chart-lilac: var(--fg-300);
|
|
1658
1693
|
--chart-butter: var(--fg-200);
|
|
1659
1694
|
--chart-blush: var(--line-300);
|
|
1695
|
+
--ramp-1: color-mix(in oklab, var(--chart-1) 12%, var(--background));
|
|
1696
|
+
--ramp-2: color-mix(in oklab, var(--chart-1) 28%, var(--background));
|
|
1697
|
+
--ramp-3: color-mix(in oklab, var(--chart-1) 46%, var(--background));
|
|
1698
|
+
--ramp-4: color-mix(in oklab, var(--chart-1) 66%, var(--background));
|
|
1699
|
+
--ramp-5: color-mix(in oklab, var(--chart-1) 88%, var(--background));
|
|
1660
1700
|
--ok: #5cc28f;
|
|
1661
1701
|
--ok-bg: rgba(92,194,143,0.12);
|
|
1662
1702
|
--info: #7aa7f5;
|
|
@@ -1806,6 +1846,11 @@
|
|
|
1806
1846
|
--chart-lilac: var(--fg-300);
|
|
1807
1847
|
--chart-butter: var(--fg-200);
|
|
1808
1848
|
--chart-blush: var(--line-300);
|
|
1849
|
+
--ramp-1: color-mix(in oklab, var(--chart-1) 12%, var(--background));
|
|
1850
|
+
--ramp-2: color-mix(in oklab, var(--chart-1) 28%, var(--background));
|
|
1851
|
+
--ramp-3: color-mix(in oklab, var(--chart-1) 46%, var(--background));
|
|
1852
|
+
--ramp-4: color-mix(in oklab, var(--chart-1) 66%, var(--background));
|
|
1853
|
+
--ramp-5: color-mix(in oklab, var(--chart-1) 88%, var(--background));
|
|
1809
1854
|
--ok: #177447;
|
|
1810
1855
|
--ok-bg: rgba(23,116,71,0.09);
|
|
1811
1856
|
--info: #2856b0;
|
|
@@ -1954,6 +1999,11 @@
|
|
|
1954
1999
|
--chart-lilac: var(--fg-300);
|
|
1955
2000
|
--chart-butter: var(--fg-200);
|
|
1956
2001
|
--chart-blush: var(--line-300);
|
|
2002
|
+
--ramp-1: color-mix(in oklab, var(--chart-1) 12%, var(--background));
|
|
2003
|
+
--ramp-2: color-mix(in oklab, var(--chart-1) 28%, var(--background));
|
|
2004
|
+
--ramp-3: color-mix(in oklab, var(--chart-1) 46%, var(--background));
|
|
2005
|
+
--ramp-4: color-mix(in oklab, var(--chart-1) 66%, var(--background));
|
|
2006
|
+
--ramp-5: color-mix(in oklab, var(--chart-1) 88%, var(--background));
|
|
1957
2007
|
--ok: #5cc28f;
|
|
1958
2008
|
--ok-bg: rgba(92,194,143,0.12);
|
|
1959
2009
|
--info: #7aa7f5;
|
|
@@ -2101,6 +2151,11 @@
|
|
|
2101
2151
|
--chart-lilac: var(--fg-300);
|
|
2102
2152
|
--chart-butter: var(--fg-200);
|
|
2103
2153
|
--chart-blush: var(--line-300);
|
|
2154
|
+
--ramp-1: color-mix(in oklab, var(--chart-1) 12%, var(--background));
|
|
2155
|
+
--ramp-2: color-mix(in oklab, var(--chart-1) 28%, var(--background));
|
|
2156
|
+
--ramp-3: color-mix(in oklab, var(--chart-1) 46%, var(--background));
|
|
2157
|
+
--ramp-4: color-mix(in oklab, var(--chart-1) 66%, var(--background));
|
|
2158
|
+
--ramp-5: color-mix(in oklab, var(--chart-1) 88%, var(--background));
|
|
2104
2159
|
--ok: #177447;
|
|
2105
2160
|
--ok-bg: rgba(23,116,71,0.09);
|
|
2106
2161
|
--info: #2856b0;
|
|
@@ -2655,7 +2710,8 @@
|
|
|
2655
2710
|
border-radius: var(--radius-pill);
|
|
2656
2711
|
background: var(--surface-sunken);
|
|
2657
2712
|
color: var(--ink-muted);
|
|
2658
|
-
min-width: 220px;
|
|
2713
|
+
min-width: min(220px, 100%);
|
|
2714
|
+
box-sizing: border-box;
|
|
2659
2715
|
}
|
|
2660
2716
|
:where([data-kit="halo"]) .tf-search input {
|
|
2661
2717
|
border: 0;
|
|
@@ -2664,6 +2720,7 @@
|
|
|
2664
2720
|
font: 500 14px/20px var(--font-sans);
|
|
2665
2721
|
color: var(--ink);
|
|
2666
2722
|
width: 100%;
|
|
2723
|
+
min-width: 0;
|
|
2667
2724
|
}
|
|
2668
2725
|
:where([data-kit="halo"]) .tf-search input::placeholder {
|
|
2669
2726
|
color: var(--ink-subtle);
|
|
@@ -2745,7 +2802,7 @@
|
|
|
2745
2802
|
display: flex;
|
|
2746
2803
|
}
|
|
2747
2804
|
:where([data-kit="halo"]) .tf-tabs-block .tf-tab {
|
|
2748
|
-
flex: 1;
|
|
2805
|
+
flex: 1 1 0;
|
|
2749
2806
|
}
|
|
2750
2807
|
|
|
2751
2808
|
/* StatTile */
|
|
@@ -3062,6 +3119,36 @@
|
|
|
3062
3119
|
background: var(--accent);
|
|
3063
3120
|
color: var(--accent-foreground);
|
|
3064
3121
|
}
|
|
3122
|
+
/* expanded: names next to the icons (the sheet's first column follows the rail's width) */
|
|
3123
|
+
:where([data-kit="halo"]) .tf-rail {
|
|
3124
|
+
transition: width var(--dur-base) var(--ease-out);
|
|
3125
|
+
}
|
|
3126
|
+
:where([data-kit="halo"]) .tf-rail.expanded {
|
|
3127
|
+
width: 200px;
|
|
3128
|
+
}
|
|
3129
|
+
:where([data-kit="halo"]) .tf-rail.expanded .tf-rail-group {
|
|
3130
|
+
align-items: stretch;
|
|
3131
|
+
}
|
|
3132
|
+
:where([data-kit="halo"]) .tf-rail.expanded .tf-rail-btn {
|
|
3133
|
+
display: flex;
|
|
3134
|
+
align-items: center;
|
|
3135
|
+
gap: 12px;
|
|
3136
|
+
width: 100%;
|
|
3137
|
+
padding: 0 10px;
|
|
3138
|
+
box-sizing: border-box;
|
|
3139
|
+
border-radius: var(--radius-pill);
|
|
3140
|
+
}
|
|
3141
|
+
:where([data-kit="halo"]) .tf-rail-label {
|
|
3142
|
+
min-width: 0;
|
|
3143
|
+
overflow: hidden;
|
|
3144
|
+
text-overflow: ellipsis;
|
|
3145
|
+
white-space: nowrap;
|
|
3146
|
+
font: 600 13px/18px var(--font-sans);
|
|
3147
|
+
}
|
|
3148
|
+
:where([data-kit="halo"]) .tf-rail.expanded .tf-dotcount {
|
|
3149
|
+
position: static;
|
|
3150
|
+
margin-left: auto;
|
|
3151
|
+
}
|
|
3065
3152
|
:where([data-kit="halo"]) .tf-rail-btn[aria-current="page"] {
|
|
3066
3153
|
background: var(--primary);
|
|
3067
3154
|
color: var(--primary-foreground);
|
|
@@ -3211,9 +3298,28 @@
|
|
|
3211
3298
|
:where([data-kit="halo"]) .tf-shell .tf-topbar {
|
|
3212
3299
|
padding: 0 var(--space-6);
|
|
3213
3300
|
}
|
|
3301
|
+
/* AppShell with navigation="sidebar": the labelled sidebar on the frame, the sheet beside it */
|
|
3302
|
+
:where([data-kit="halo"]) .tf-shell.tf-shell-sidebar {
|
|
3303
|
+
display: grid;
|
|
3304
|
+
grid-template-columns: auto minmax(0, 1fr);
|
|
3305
|
+
align-items: stretch;
|
|
3306
|
+
padding: 8px;
|
|
3307
|
+
}
|
|
3308
|
+
:where([data-kit="halo"]) .tf-shell-tools {
|
|
3309
|
+
display: flex;
|
|
3310
|
+
justify-content: flex-end;
|
|
3311
|
+
flex-wrap: wrap;
|
|
3312
|
+
gap: 8px;
|
|
3313
|
+
}
|
|
3314
|
+
:where([data-kit="halo"]) .tf-sheet.tf-sheet-norail {
|
|
3315
|
+
grid-template-columns: minmax(0, 1fr) 300px;
|
|
3316
|
+
}
|
|
3317
|
+
:where([data-kit="halo"]) .tf-sheet.tf-sheet-norail.tf-sheet-2 {
|
|
3318
|
+
grid-template-columns: minmax(0, 1fr);
|
|
3319
|
+
}
|
|
3214
3320
|
:where([data-kit="halo"]) .tf-sheet {
|
|
3215
3321
|
display: grid;
|
|
3216
|
-
grid-template-columns:
|
|
3322
|
+
grid-template-columns: auto 1fr 300px;
|
|
3217
3323
|
gap: var(--space-6);
|
|
3218
3324
|
padding: var(--space-6);
|
|
3219
3325
|
background: var(--canvas);
|
|
@@ -3730,6 +3836,64 @@
|
|
|
3730
3836
|
background: var(--accent);
|
|
3731
3837
|
color: var(--accent-foreground);
|
|
3732
3838
|
}
|
|
3839
|
+
:where([data-kit="halo"]) a.tf-row-item {
|
|
3840
|
+
text-decoration: none;
|
|
3841
|
+
}
|
|
3842
|
+
:where([data-kit="halo"]) .tf-row-text {
|
|
3843
|
+
min-width: 0;
|
|
3844
|
+
}
|
|
3845
|
+
/* not interactive: no hover, no pointer */
|
|
3846
|
+
:where([data-kit="halo"]) .tf-row-item.static {
|
|
3847
|
+
cursor: default;
|
|
3848
|
+
}
|
|
3849
|
+
:where([data-kit="halo"]) .tf-row-item.static:hover {
|
|
3850
|
+
background: transparent;
|
|
3851
|
+
color: var(--ink);
|
|
3852
|
+
}
|
|
3853
|
+
/* own buttons: the title is the link or button and its hit area stretches over the row */
|
|
3854
|
+
:where([data-kit="halo"]) .tf-row-item.has-hit {
|
|
3855
|
+
position: relative;
|
|
3856
|
+
}
|
|
3857
|
+
:where([data-kit="halo"]) .tf-row-item.has-hit:hover {
|
|
3858
|
+
background: transparent;
|
|
3859
|
+
color: var(--ink);
|
|
3860
|
+
}
|
|
3861
|
+
:where([data-kit="halo"]) .tf-row-item.has-hit:has(.tf-row-hit:hover) {
|
|
3862
|
+
background: var(--accent);
|
|
3863
|
+
color: var(--accent-foreground);
|
|
3864
|
+
}
|
|
3865
|
+
:where([data-kit="halo"]) .tf-row-item.has-hit:has(.tf-row-hit:focus-visible) {
|
|
3866
|
+
outline: 2px solid var(--focus);
|
|
3867
|
+
outline-offset: 2px;
|
|
3868
|
+
}
|
|
3869
|
+
:where([data-kit="halo"]) .tf-row-hit {
|
|
3870
|
+
display: block;
|
|
3871
|
+
padding: 0;
|
|
3872
|
+
border: 0;
|
|
3873
|
+
background: none;
|
|
3874
|
+
color: inherit;
|
|
3875
|
+
font: inherit;
|
|
3876
|
+
text-align: left;
|
|
3877
|
+
text-decoration: none;
|
|
3878
|
+
cursor: pointer;
|
|
3879
|
+
outline: none;
|
|
3880
|
+
}
|
|
3881
|
+
:where([data-kit="halo"]) .tf-row-hit::after {
|
|
3882
|
+
content: "";
|
|
3883
|
+
position: absolute;
|
|
3884
|
+
inset: 0;
|
|
3885
|
+
border-radius: inherit;
|
|
3886
|
+
}
|
|
3887
|
+
:where([data-kit="halo"]) .tf-row-item.has-actions {
|
|
3888
|
+
grid-template-columns: auto 1fr auto auto;
|
|
3889
|
+
}
|
|
3890
|
+
:where([data-kit="halo"]) .tf-row-actions {
|
|
3891
|
+
position: relative;
|
|
3892
|
+
z-index: 1;
|
|
3893
|
+
display: flex;
|
|
3894
|
+
align-items: center;
|
|
3895
|
+
gap: 4px;
|
|
3896
|
+
}
|
|
3733
3897
|
:where([data-kit="halo"]) .tf-row-item[aria-current="true"] {
|
|
3734
3898
|
background: var(--surface);
|
|
3735
3899
|
box-shadow: var(--shadow-card);
|
|
@@ -3741,12 +3905,27 @@
|
|
|
3741
3905
|
gap: 8px;
|
|
3742
3906
|
}
|
|
3743
3907
|
:where([data-kit="halo"]) .tf-row-sub {
|
|
3908
|
+
display: block;
|
|
3744
3909
|
font: 500 13px/18px var(--font-sans);
|
|
3745
3910
|
color: var(--ink-muted);
|
|
3746
3911
|
white-space: nowrap;
|
|
3747
3912
|
overflow: hidden;
|
|
3748
3913
|
text-overflow: ellipsis;
|
|
3749
3914
|
}
|
|
3915
|
+
/* titleLines / subtitleLines: wrap, then end in an ellipsis after that many lines */
|
|
3916
|
+
:where([data-kit="halo"]) .tf-row-sub.clamp,
|
|
3917
|
+
:where([data-kit="halo"]) .tf-row-clamp {
|
|
3918
|
+
display: -webkit-box;
|
|
3919
|
+
-webkit-box-orient: vertical;
|
|
3920
|
+
-webkit-line-clamp: var(--lines, 2);
|
|
3921
|
+
line-clamp: var(--lines, 2);
|
|
3922
|
+
white-space: normal;
|
|
3923
|
+
overflow: hidden;
|
|
3924
|
+
min-width: 0;
|
|
3925
|
+
}
|
|
3926
|
+
:where([data-kit="halo"]) .tf-row-title.clamp {
|
|
3927
|
+
align-items: flex-start;
|
|
3928
|
+
}
|
|
3750
3929
|
:where([data-kit="halo"]) .tf-row-meta {
|
|
3751
3930
|
font: 600 12px/16px var(--font-sans);
|
|
3752
3931
|
color: var(--ink-muted);
|
|
@@ -3933,6 +4112,13 @@
|
|
|
3933
4112
|
font: 600 13px/1 var(--font-sans);
|
|
3934
4113
|
cursor: pointer;
|
|
3935
4114
|
}
|
|
4115
|
+
:where([data-kit="halo"]) a.tf-page {
|
|
4116
|
+
display: inline-flex;
|
|
4117
|
+
align-items: center;
|
|
4118
|
+
justify-content: center;
|
|
4119
|
+
box-sizing: border-box;
|
|
4120
|
+
text-decoration: none;
|
|
4121
|
+
}
|
|
3936
4122
|
:where([data-kit="halo"]) .tf-page:hover {
|
|
3937
4123
|
background: var(--accent);
|
|
3938
4124
|
color: var(--ink);
|
|
@@ -3943,18 +4129,42 @@
|
|
|
3943
4129
|
}
|
|
3944
4130
|
:where([data-kit="halo"]) .tf-crumbs {
|
|
3945
4131
|
display: flex;
|
|
4132
|
+
flex-wrap: wrap;
|
|
3946
4133
|
align-items: center;
|
|
3947
4134
|
gap: 6px;
|
|
4135
|
+
min-width: 0;
|
|
3948
4136
|
font: 600 13px/18px var(--font-sans);
|
|
3949
4137
|
color: var(--ink-muted);
|
|
3950
4138
|
}
|
|
3951
|
-
|
|
4139
|
+
/* links and buttons get a 24px target without moving the text */
|
|
4140
|
+
:where([data-kit="halo"]) .tf-crumb {
|
|
4141
|
+
display: inline-flex;
|
|
4142
|
+
align-items: center;
|
|
4143
|
+
min-height: 24px;
|
|
4144
|
+
max-width: 100%;
|
|
4145
|
+
padding: 0 4px;
|
|
4146
|
+
/* the target grows to 24px around the 18px line without moving the text */
|
|
4147
|
+
margin: -3px -4px;
|
|
4148
|
+
border: 0;
|
|
4149
|
+
border-radius: var(--radius-sm);
|
|
4150
|
+
background: none;
|
|
3952
4151
|
color: inherit;
|
|
4152
|
+
font: inherit;
|
|
3953
4153
|
text-decoration: none;
|
|
4154
|
+
overflow-wrap: anywhere;
|
|
4155
|
+
}
|
|
4156
|
+
:where([data-kit="halo"]) a.tf-crumb,
|
|
4157
|
+
:where([data-kit="halo"]) button.tf-crumb {
|
|
4158
|
+
cursor: pointer;
|
|
3954
4159
|
}
|
|
3955
|
-
:where([data-kit="halo"]) .tf-
|
|
4160
|
+
:where([data-kit="halo"]) a.tf-crumb:hover,
|
|
4161
|
+
:where([data-kit="halo"]) button.tf-crumb:hover {
|
|
3956
4162
|
color: var(--ink);
|
|
3957
4163
|
}
|
|
4164
|
+
:where([data-kit="halo"]) .tf-crumb:focus-visible {
|
|
4165
|
+
outline: 2px solid var(--focus);
|
|
4166
|
+
outline-offset: 0;
|
|
4167
|
+
}
|
|
3958
4168
|
:where([data-kit="halo"]) .tf-crumbs [aria-current] {
|
|
3959
4169
|
color: var(--ink);
|
|
3960
4170
|
}
|
|
@@ -3996,7 +4206,7 @@
|
|
|
3996
4206
|
cursor: pointer;
|
|
3997
4207
|
}
|
|
3998
4208
|
:where([data-kit="halo"]) .tf-sheet-2 {
|
|
3999
|
-
grid-template-columns:
|
|
4209
|
+
grid-template-columns: auto 1fr;
|
|
4000
4210
|
}
|
|
4001
4211
|
:where([data-kit="halo"]) .tf-main {
|
|
4002
4212
|
display: flex;
|
|
@@ -4069,6 +4279,26 @@
|
|
|
4069
4279
|
justify-content: center;
|
|
4070
4280
|
}
|
|
4071
4281
|
}
|
|
4282
|
+
/* the TopBar measured that the labels do not fit: icons only, at any width */
|
|
4283
|
+
:where([data-kit="halo"]) .tf-nav.tight .tf-nav-label {
|
|
4284
|
+
display: none;
|
|
4285
|
+
}
|
|
4286
|
+
:where([data-kit="halo"]) .tf-nav.tight .tf-nav-item {
|
|
4287
|
+
position: relative;
|
|
4288
|
+
width: 36px;
|
|
4289
|
+
padding: 0;
|
|
4290
|
+
justify-content: center;
|
|
4291
|
+
}
|
|
4292
|
+
:where([data-kit="halo"]) .tf-nav.tight .tf-nav-item .tf-nav-count {
|
|
4293
|
+
position: absolute;
|
|
4294
|
+
top: -2px;
|
|
4295
|
+
right: -4px;
|
|
4296
|
+
min-width: 16px;
|
|
4297
|
+
height: 16px;
|
|
4298
|
+
padding: 0 4px;
|
|
4299
|
+
font-size: 10px;
|
|
4300
|
+
line-height: 16px;
|
|
4301
|
+
}
|
|
4072
4302
|
:where([data-kit="halo"]) .tf-main {
|
|
4073
4303
|
animation: none;
|
|
4074
4304
|
}
|
|
@@ -4194,6 +4424,19 @@
|
|
|
4194
4424
|
:where([data-kit="halo"]) .tf-user-text {
|
|
4195
4425
|
display: flex;
|
|
4196
4426
|
flex-direction: column;
|
|
4427
|
+
min-width: 0;
|
|
4428
|
+
max-width: 200px;
|
|
4429
|
+
}
|
|
4430
|
+
/* a long name or address ends in an ellipsis instead of pushing the nav out (title has it whole) */
|
|
4431
|
+
:where([data-kit="halo"]) .tf-user-name,
|
|
4432
|
+
:where([data-kit="halo"]) .tf-user-mail {
|
|
4433
|
+
overflow: hidden;
|
|
4434
|
+
text-overflow: ellipsis;
|
|
4435
|
+
white-space: nowrap;
|
|
4436
|
+
}
|
|
4437
|
+
:where([data-kit="halo"]) .tf-user {
|
|
4438
|
+
min-width: 0;
|
|
4439
|
+
flex-shrink: 1;
|
|
4197
4440
|
}
|
|
4198
4441
|
|
|
4199
4442
|
/* Checkbox: real box + SVG check (no pseudo-elements on the input) */
|
|
@@ -4206,9 +4449,12 @@
|
|
|
4206
4449
|
}
|
|
4207
4450
|
:where([data-kit="halo"]) .tf-checkbox input {
|
|
4208
4451
|
position: absolute;
|
|
4209
|
-
|
|
4210
|
-
|
|
4211
|
-
|
|
4452
|
+
/* the box keeps its size; the hit area is at least 24px (WCAG 2.2 target size) */
|
|
4453
|
+
top: 50%;
|
|
4454
|
+
left: 50%;
|
|
4455
|
+
translate: -50% -50%;
|
|
4456
|
+
width: max(24px, 100%);
|
|
4457
|
+
height: max(24px, 100%);
|
|
4212
4458
|
margin: 0;
|
|
4213
4459
|
opacity: 0;
|
|
4214
4460
|
cursor: pointer;
|
|
@@ -5282,6 +5528,23 @@
|
|
|
5282
5528
|
font: 600 13px/18px var(--font-sans);
|
|
5283
5529
|
pointer-events: none;
|
|
5284
5530
|
}
|
|
5531
|
+
/* an interactive control at the end (reveal password, clear, copy) */
|
|
5532
|
+
:where([data-kit="halo"]) .tf-input-action {
|
|
5533
|
+
position: absolute;
|
|
5534
|
+
right: 4px;
|
|
5535
|
+
top: 50%;
|
|
5536
|
+
transform: translateY(-50%);
|
|
5537
|
+
display: inline-flex;
|
|
5538
|
+
}
|
|
5539
|
+
:where([data-kit="halo"]) .tf-inputwrap.has-action .tf-input {
|
|
5540
|
+
padding-right: 44px;
|
|
5541
|
+
}
|
|
5542
|
+
:where([data-kit="halo"]) .tf-inputwrap.has-action.has-suffix .tf-input {
|
|
5543
|
+
padding-right: 72px;
|
|
5544
|
+
}
|
|
5545
|
+
:where([data-kit="halo"]) .tf-inputwrap.has-action .tf-input-suffix {
|
|
5546
|
+
right: 44px;
|
|
5547
|
+
}
|
|
5285
5548
|
:where([data-kit="halo"]) .tf-input-suffix.err {
|
|
5286
5549
|
color: var(--blush-ink);
|
|
5287
5550
|
}
|
|
@@ -5441,7 +5704,7 @@
|
|
|
5441
5704
|
display: flex;
|
|
5442
5705
|
}
|
|
5443
5706
|
:where([data-kit="halo"]) .tf-seg.block .tf-seg-item {
|
|
5444
|
-
flex: 1;
|
|
5707
|
+
flex: 1 1 0;
|
|
5445
5708
|
}
|
|
5446
5709
|
:where([data-kit="halo"]) .tf-seg-item {
|
|
5447
5710
|
position: relative;
|
|
@@ -6053,6 +6316,10 @@
|
|
|
6053
6316
|
border-color var(--dur-fast) ease,
|
|
6054
6317
|
background-color var(--dur-fast) ease;
|
|
6055
6318
|
}
|
|
6319
|
+
:where([data-kit="halo"]) .tf-drop.disabled {
|
|
6320
|
+
opacity: 0.5;
|
|
6321
|
+
cursor: not-allowed;
|
|
6322
|
+
}
|
|
6056
6323
|
:where([data-kit="halo"]) .tf-drop b {
|
|
6057
6324
|
font: 600 14px/20px var(--font-sans);
|
|
6058
6325
|
margin-top: 4px;
|
|
@@ -6115,6 +6382,7 @@
|
|
|
6115
6382
|
/* Alert, confirm, toaster */
|
|
6116
6383
|
:where([data-kit="halo"]) .tf-alert {
|
|
6117
6384
|
display: flex;
|
|
6385
|
+
flex-wrap: wrap;
|
|
6118
6386
|
align-items: flex-start;
|
|
6119
6387
|
gap: 12px;
|
|
6120
6388
|
padding: 12px 12px 12px 16px;
|
|
@@ -6158,7 +6426,8 @@
|
|
|
6158
6426
|
color: var(--lilac-ink);
|
|
6159
6427
|
}
|
|
6160
6428
|
:where([data-kit="halo"]) .tf-alert-body {
|
|
6161
|
-
|
|
6429
|
+
/* when the alert is too narrow for text and actions, the actions move to their own line */
|
|
6430
|
+
flex: 1 1 200px;
|
|
6162
6431
|
min-width: 0;
|
|
6163
6432
|
display: flex;
|
|
6164
6433
|
flex-direction: column;
|
|
@@ -6174,8 +6443,11 @@
|
|
|
6174
6443
|
:where([data-kit="halo"]) .tf-alert-actions {
|
|
6175
6444
|
flex: none;
|
|
6176
6445
|
display: flex;
|
|
6446
|
+
flex-wrap: wrap;
|
|
6177
6447
|
align-items: center;
|
|
6178
6448
|
gap: 4px;
|
|
6449
|
+
max-width: 100%;
|
|
6450
|
+
margin-left: auto;
|
|
6179
6451
|
}
|
|
6180
6452
|
:where([data-kit="halo"]) .tf-alert .tf-iconbtn-ghost {
|
|
6181
6453
|
background: transparent;
|
|
@@ -7184,14 +7456,29 @@
|
|
|
7184
7456
|
display: inline-flex;
|
|
7185
7457
|
align-items: center;
|
|
7186
7458
|
gap: 8px;
|
|
7187
|
-
|
|
7188
|
-
|
|
7459
|
+
/* grows with a long title (two lines at most) instead of spilling over */
|
|
7460
|
+
min-height: 32px;
|
|
7461
|
+
box-sizing: border-box;
|
|
7462
|
+
padding: 4px 12px 4px 4px;
|
|
7189
7463
|
border-radius: var(--radius-pill);
|
|
7190
7464
|
background: var(--surface-sunken);
|
|
7191
7465
|
color: var(--ink);
|
|
7192
7466
|
text-decoration: none;
|
|
7193
7467
|
font: 600 12px/16px var(--font-sans);
|
|
7194
|
-
max-width: 260px;
|
|
7468
|
+
max-width: min(260px, 100%);
|
|
7469
|
+
}
|
|
7470
|
+
:where([data-kit="halo"]) .tf-source-title {
|
|
7471
|
+
min-width: 0;
|
|
7472
|
+
display: -webkit-box;
|
|
7473
|
+
-webkit-box-orient: vertical;
|
|
7474
|
+
-webkit-line-clamp: 2;
|
|
7475
|
+
line-clamp: 2;
|
|
7476
|
+
overflow: hidden;
|
|
7477
|
+
overflow-wrap: anywhere;
|
|
7478
|
+
}
|
|
7479
|
+
:where([data-kit="halo"]) .tf-source > .tf-ico,
|
|
7480
|
+
:where([data-kit="halo"]) .tf-source-n {
|
|
7481
|
+
flex: none;
|
|
7195
7482
|
}
|
|
7196
7483
|
:where([data-kit="halo"]) .tf-source:hover {
|
|
7197
7484
|
background: var(--line);
|
|
@@ -8314,17 +8601,25 @@
|
|
|
8314
8601
|
color: var(--ink-muted);
|
|
8315
8602
|
}
|
|
8316
8603
|
:where([data-kit="halo"]) .tf-csteps {
|
|
8604
|
+
/* one row at every width: steps shrink to their numbers instead of wrapping */
|
|
8605
|
+
container: tf-csteps / inline-size;
|
|
8317
8606
|
display: flex;
|
|
8318
8607
|
gap: 8px;
|
|
8319
8608
|
margin: 0;
|
|
8320
8609
|
padding: 0;
|
|
8321
8610
|
list-style: none;
|
|
8322
|
-
flex-wrap: wrap;
|
|
8323
8611
|
}
|
|
8324
8612
|
:where([data-kit="halo"]) .tf-csteps li {
|
|
8325
8613
|
display: flex;
|
|
8326
8614
|
align-items: center;
|
|
8327
8615
|
gap: 8px;
|
|
8616
|
+
min-width: 0;
|
|
8617
|
+
}
|
|
8618
|
+
:where([data-kit="halo"]) .tf-cstep-label {
|
|
8619
|
+
min-width: 0;
|
|
8620
|
+
overflow: hidden;
|
|
8621
|
+
text-overflow: ellipsis;
|
|
8622
|
+
white-space: nowrap;
|
|
8328
8623
|
}
|
|
8329
8624
|
:where([data-kit="halo"]) .tf-csteps li + li::before {
|
|
8330
8625
|
content: "";
|
|
@@ -8353,6 +8648,40 @@
|
|
|
8353
8648
|
:where([data-kit="halo"]) .tf-csteps button:disabled {
|
|
8354
8649
|
cursor: default;
|
|
8355
8650
|
}
|
|
8651
|
+
:where([data-kit="halo"]) .tf-csteps button {
|
|
8652
|
+
min-width: 0;
|
|
8653
|
+
max-width: 100%;
|
|
8654
|
+
}
|
|
8655
|
+
:where([data-kit="halo"]) .tf-csteps.compact li:not(.cur) .tf-cstep-label {
|
|
8656
|
+
position: absolute;
|
|
8657
|
+
width: 1px;
|
|
8658
|
+
height: 1px;
|
|
8659
|
+
overflow: hidden;
|
|
8660
|
+
clip-path: inset(50%);
|
|
8661
|
+
white-space: nowrap;
|
|
8662
|
+
}
|
|
8663
|
+
:where([data-kit="halo"]) .tf-csteps.compact li:not(.cur) button {
|
|
8664
|
+
padding: 0 4px;
|
|
8665
|
+
}
|
|
8666
|
+
:where([data-kit="halo"]) .tf-csteps.compact li + li::before {
|
|
8667
|
+
width: 12px;
|
|
8668
|
+
}
|
|
8669
|
+
@container tf-csteps (max-width: 560px) {
|
|
8670
|
+
:where([data-kit="halo"]) .tf-csteps li:not(.cur) .tf-cstep-label {
|
|
8671
|
+
position: absolute;
|
|
8672
|
+
width: 1px;
|
|
8673
|
+
height: 1px;
|
|
8674
|
+
overflow: hidden;
|
|
8675
|
+
clip-path: inset(50%);
|
|
8676
|
+
white-space: nowrap;
|
|
8677
|
+
}
|
|
8678
|
+
:where([data-kit="halo"]) .tf-csteps li:not(.cur) button {
|
|
8679
|
+
padding: 0 4px;
|
|
8680
|
+
}
|
|
8681
|
+
:where([data-kit="halo"]) .tf-csteps li + li::before {
|
|
8682
|
+
width: 12px;
|
|
8683
|
+
}
|
|
8684
|
+
}
|
|
8356
8685
|
:where([data-kit="halo"]) .tf-csteps li.cur button {
|
|
8357
8686
|
background: var(--surface);
|
|
8358
8687
|
color: var(--ink);
|
|
@@ -8519,7 +8848,7 @@
|
|
|
8519
8848
|
color: var(--on-frame);
|
|
8520
8849
|
box-shadow: var(--shadow-float);
|
|
8521
8850
|
}
|
|
8522
|
-
:where([data-kit="halo"]) .tf-plan.featured .tf-plan-head span,
|
|
8851
|
+
:where([data-kit="halo"]) .tf-plan.featured .tf-plan-head span:not(.tf-badge),
|
|
8523
8852
|
:where([data-kit="halo"]) .tf-plan.featured .tf-plan-price span,
|
|
8524
8853
|
:where([data-kit="halo"]) .tf-plan.featured .tf-plan-price s,
|
|
8525
8854
|
:where([data-kit="halo"]) .tf-plan.featured .tf-plan-feats li.no {
|
|
@@ -8550,10 +8879,22 @@
|
|
|
8550
8879
|
:where([data-kit="halo"]) .tf-plan-head b {
|
|
8551
8880
|
font: 700 20px/26px var(--font-sans);
|
|
8552
8881
|
}
|
|
8553
|
-
:where([data-kit="halo"]) .tf-plan-head span {
|
|
8882
|
+
:where([data-kit="halo"]) .tf-plan-head span:not(.tf-badge) {
|
|
8554
8883
|
font: 500 13px/18px var(--font-sans);
|
|
8555
8884
|
color: var(--ink-muted);
|
|
8556
8885
|
}
|
|
8886
|
+
/* "Current plan" next to the name, and the note under the price */
|
|
8887
|
+
:where([data-kit="halo"]) .tf-plan-head .tf-plan-current {
|
|
8888
|
+
align-self: flex-start;
|
|
8889
|
+
}
|
|
8890
|
+
:where([data-kit="halo"]) .tf-plan-note {
|
|
8891
|
+
margin: -4px 0 0;
|
|
8892
|
+
font: 500 12px/16px var(--font-sans);
|
|
8893
|
+
color: var(--ink-muted);
|
|
8894
|
+
}
|
|
8895
|
+
:where([data-kit="halo"]) a.tf-plan-cta {
|
|
8896
|
+
text-decoration: none;
|
|
8897
|
+
}
|
|
8557
8898
|
:where([data-kit="halo"]) .tf-plan-price {
|
|
8558
8899
|
display: flex;
|
|
8559
8900
|
align-items: baseline;
|
|
@@ -10658,7 +10999,7 @@
|
|
|
10658
10999
|
:where([data-kit="halo"]) .tf-tabbar {
|
|
10659
11000
|
display: grid;
|
|
10660
11001
|
grid-auto-flow: column;
|
|
10661
|
-
grid-auto-columns: 1fr;
|
|
11002
|
+
grid-auto-columns: minmax(0, 1fr);
|
|
10662
11003
|
padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px));
|
|
10663
11004
|
background: var(--frame);
|
|
10664
11005
|
border-radius: 24px 24px 0 0;
|
|
@@ -10677,6 +11018,17 @@
|
|
|
10677
11018
|
cursor: pointer;
|
|
10678
11019
|
border-radius: 16px;
|
|
10679
11020
|
}
|
|
11021
|
+
:where([data-kit="halo"]) .tf-tabbar-item {
|
|
11022
|
+
min-width: 0;
|
|
11023
|
+
}
|
|
11024
|
+
:where([data-kit="halo"]) .tf-tabbar-label {
|
|
11025
|
+
max-width: 100%;
|
|
11026
|
+
padding: 0 4px;
|
|
11027
|
+
box-sizing: border-box;
|
|
11028
|
+
overflow: hidden;
|
|
11029
|
+
text-overflow: ellipsis;
|
|
11030
|
+
white-space: nowrap;
|
|
11031
|
+
}
|
|
10680
11032
|
:where([data-kit="halo"]) .tf-tabbar-item.on {
|
|
10681
11033
|
color: var(--on-frame);
|
|
10682
11034
|
background: var(--frame-hover);
|
|
@@ -10988,6 +11340,22 @@
|
|
|
10988
11340
|
padding-bottom: 10px;
|
|
10989
11341
|
color: var(--ink-muted);
|
|
10990
11342
|
}
|
|
11343
|
+
/* in a narrow column (a filter sidebar) the number fields give their padding to the digits */
|
|
11344
|
+
:where([data-kit="halo"]) .tf-range {
|
|
11345
|
+
container: tf-range / inline-size;
|
|
11346
|
+
}
|
|
11347
|
+
@container tf-range (max-width: 280px) {
|
|
11348
|
+
:where([data-kit="halo"]) .tf-range-inputs {
|
|
11349
|
+
gap: 4px;
|
|
11350
|
+
}
|
|
11351
|
+
:where([data-kit="halo"]) .tf-range-num .tf-input {
|
|
11352
|
+
padding-left: 10px;
|
|
11353
|
+
padding-right: 24px;
|
|
11354
|
+
}
|
|
11355
|
+
:where([data-kit="halo"]) .tf-range-num > span {
|
|
11356
|
+
right: 10px;
|
|
11357
|
+
}
|
|
11358
|
+
}
|
|
10991
11359
|
:where([data-kit="halo"]) .tf-range-vals {
|
|
10992
11360
|
display: flex;
|
|
10993
11361
|
justify-content: space-between;
|
|
@@ -11141,6 +11509,31 @@
|
|
|
11141
11509
|
font: 500 12px/16px var(--font-sans);
|
|
11142
11510
|
color: var(--ink-muted);
|
|
11143
11511
|
}
|
|
11512
|
+
/* layout="list": compact rows */
|
|
11513
|
+
:where([data-kit="halo"]) .tf-tiles.list {
|
|
11514
|
+
grid-template-columns: minmax(0, 1fr);
|
|
11515
|
+
gap: 8px;
|
|
11516
|
+
}
|
|
11517
|
+
:where([data-kit="halo"]) .tf-tiles.list .tf-tile {
|
|
11518
|
+
flex-direction: row;
|
|
11519
|
+
align-items: center;
|
|
11520
|
+
gap: 12px;
|
|
11521
|
+
padding: 8px 44px 8px 8px;
|
|
11522
|
+
}
|
|
11523
|
+
:where([data-kit="halo"]) .tf-tiles.list .tf-tile-art {
|
|
11524
|
+
flex: none;
|
|
11525
|
+
width: 40px;
|
|
11526
|
+
height: 40px;
|
|
11527
|
+
aspect-ratio: auto;
|
|
11528
|
+
}
|
|
11529
|
+
:where([data-kit="halo"]) .tf-tiles.list .tf-tile-label {
|
|
11530
|
+
min-width: 0;
|
|
11531
|
+
padding: 0;
|
|
11532
|
+
}
|
|
11533
|
+
:where([data-kit="halo"]) .tf-tiles.list .tf-tile-check {
|
|
11534
|
+
top: 50%;
|
|
11535
|
+
translate: 0 -50%;
|
|
11536
|
+
}
|
|
11144
11537
|
:where([data-kit="halo"]) .tf-tile-check {
|
|
11145
11538
|
position: absolute;
|
|
11146
11539
|
top: 14px;
|
|
@@ -12250,6 +12643,16 @@
|
|
|
12250
12643
|
color: var(--paper-ink);
|
|
12251
12644
|
box-shadow: inset 0 0 0 1px var(--line);
|
|
12252
12645
|
}
|
|
12646
|
+
/* QrCode: dark modules on paper, in every theme (scanners expect dark on light) */
|
|
12647
|
+
:where([data-kit="halo"]) .tf-qr {
|
|
12648
|
+
display: block;
|
|
12649
|
+
width: 100%;
|
|
12650
|
+
height: auto;
|
|
12651
|
+
color: var(--paper-ink);
|
|
12652
|
+
}
|
|
12653
|
+
:where([data-kit="halo"]) .tf-qr-bg {
|
|
12654
|
+
fill: var(--paper);
|
|
12655
|
+
}
|
|
12253
12656
|
:where([data-kit="halo"]) .tf-2fa-qr > * {
|
|
12254
12657
|
max-width: 100%;
|
|
12255
12658
|
max-height: 100%;
|
|
@@ -12501,7 +12904,8 @@
|
|
|
12501
12904
|
border-radius: var(--radius-md);
|
|
12502
12905
|
overflow: hidden;
|
|
12503
12906
|
background: var(--surface-sunken);
|
|
12504
|
-
|
|
12907
|
+
/* sideways drags move the divider; the page still scrolls up and down over it */
|
|
12908
|
+
touch-action: pan-y;
|
|
12505
12909
|
user-select: none;
|
|
12506
12910
|
cursor: ew-resize;
|
|
12507
12911
|
}
|
|
@@ -13404,6 +13808,14 @@
|
|
|
13404
13808
|
:where([data-kit="halo"]) .tf-togglegroup .tf-toggle {
|
|
13405
13809
|
height: 32px;
|
|
13406
13810
|
}
|
|
13811
|
+
:where([data-kit="halo"]) .tf-togglegroup.block {
|
|
13812
|
+
display: flex;
|
|
13813
|
+
flex-wrap: nowrap;
|
|
13814
|
+
width: auto;
|
|
13815
|
+
}
|
|
13816
|
+
:where([data-kit="halo"]) .tf-togglegroup.block .tf-toggle {
|
|
13817
|
+
flex: 1 1 0;
|
|
13818
|
+
}
|
|
13407
13819
|
:where([data-kit="halo"]) .tf-togglegroup .tf-toggle.icon {
|
|
13408
13820
|
width: 32px;
|
|
13409
13821
|
}
|
|
@@ -13614,6 +14026,11 @@
|
|
|
13614
14026
|
text-align: left;
|
|
13615
14027
|
cursor: pointer;
|
|
13616
14028
|
}
|
|
14029
|
+
:where([data-kit="halo"]) .tf-selectmenu.sm {
|
|
14030
|
+
height: 32px;
|
|
14031
|
+
padding: 0 12px;
|
|
14032
|
+
font-size: 13px;
|
|
14033
|
+
}
|
|
13617
14034
|
:where([data-kit="halo"]) .tf-selectmenu.empty .tf-selectmenu-value {
|
|
13618
14035
|
color: var(--ink-subtle);
|
|
13619
14036
|
}
|
|
@@ -13890,26 +14307,44 @@
|
|
|
13890
14307
|
outline-offset: -2px;
|
|
13891
14308
|
}
|
|
13892
14309
|
|
|
13893
|
-
/* Sidebar */
|
|
14310
|
+
/* Sidebar: floating (a card), attached (flush with the screen's edge) or on the AppShell frame */
|
|
13894
14311
|
:where([data-kit="halo"]) .tf-sidebar {
|
|
13895
14312
|
display: flex;
|
|
13896
14313
|
flex-direction: column;
|
|
13897
|
-
|
|
14314
|
+
flex: none;
|
|
14315
|
+
gap: 12px;
|
|
13898
14316
|
width: 248px;
|
|
13899
14317
|
padding: 12px;
|
|
13900
14318
|
box-sizing: border-box;
|
|
13901
14319
|
border-radius: var(--radius-lg);
|
|
13902
14320
|
background: var(--surface);
|
|
13903
14321
|
box-shadow: var(--shadow-card);
|
|
14322
|
+
color: var(--ink);
|
|
13904
14323
|
transition: width var(--dur-base) var(--ease-out);
|
|
13905
14324
|
}
|
|
13906
14325
|
:where([data-kit="halo"]) .tf-sidebar.collapsed {
|
|
13907
14326
|
width: 64px;
|
|
13908
14327
|
}
|
|
14328
|
+
:where([data-kit="halo"]) .tf-sidebar.attached {
|
|
14329
|
+
align-self: stretch;
|
|
14330
|
+
min-height: 100%;
|
|
14331
|
+
border-radius: 0;
|
|
14332
|
+
box-shadow: none;
|
|
14333
|
+
background: var(--sidebar);
|
|
14334
|
+
border-right: 1px solid var(--sidebar-border);
|
|
14335
|
+
}
|
|
14336
|
+
:where([data-kit="halo"]) .tf-sidebar-head {
|
|
14337
|
+
display: flex;
|
|
14338
|
+
align-items: center;
|
|
14339
|
+
gap: 8px;
|
|
14340
|
+
min-height: 40px;
|
|
14341
|
+
padding: 0 4px;
|
|
14342
|
+
}
|
|
13909
14343
|
:where([data-kit="halo"]) .tf-sidebar-body {
|
|
13910
14344
|
display: flex;
|
|
13911
14345
|
flex-direction: column;
|
|
13912
|
-
|
|
14346
|
+
/* groups sit clearly apart; a label sits close to its own items */
|
|
14347
|
+
gap: 20px;
|
|
13913
14348
|
flex: 1;
|
|
13914
14349
|
min-height: 0;
|
|
13915
14350
|
overflow-y: auto;
|
|
@@ -13922,13 +14357,49 @@
|
|
|
13922
14357
|
padding: 0;
|
|
13923
14358
|
list-style: none;
|
|
13924
14359
|
}
|
|
14360
|
+
:where([data-kit="halo"]) .tf-sidebar-grouphead {
|
|
14361
|
+
display: flex;
|
|
14362
|
+
align-items: center;
|
|
14363
|
+
gap: 4px;
|
|
14364
|
+
min-height: 24px;
|
|
14365
|
+
margin-bottom: 8px;
|
|
14366
|
+
padding: 0 4px 0 12px;
|
|
14367
|
+
}
|
|
13925
14368
|
:where([data-kit="halo"]) .tf-sidebar-grouplabel {
|
|
13926
|
-
|
|
14369
|
+
display: flex;
|
|
14370
|
+
align-items: center;
|
|
14371
|
+
gap: 4px;
|
|
14372
|
+
flex: 1;
|
|
14373
|
+
min-width: 0;
|
|
14374
|
+
padding: 0;
|
|
14375
|
+
border: 0;
|
|
14376
|
+
background: none;
|
|
13927
14377
|
font: 600 11px/14px var(--font-sans);
|
|
13928
14378
|
letter-spacing: 0.06em;
|
|
13929
14379
|
text-transform: uppercase;
|
|
14380
|
+
text-align: left;
|
|
13930
14381
|
color: var(--ink-muted);
|
|
13931
14382
|
}
|
|
14383
|
+
:where([data-kit="halo"]) button.tf-sidebar-grouplabel {
|
|
14384
|
+
cursor: pointer;
|
|
14385
|
+
}
|
|
14386
|
+
:where([data-kit="halo"]) button.tf-sidebar-grouplabel:hover {
|
|
14387
|
+
color: var(--ink);
|
|
14388
|
+
}
|
|
14389
|
+
:where([data-kit="halo"]) button.tf-sidebar-grouplabel:focus-visible {
|
|
14390
|
+
outline: 2px solid var(--focus);
|
|
14391
|
+
outline-offset: 2px;
|
|
14392
|
+
}
|
|
14393
|
+
:where([data-kit="halo"]) .tf-sidebar-grouplabel[aria-expanded="false"] .tf-sidebar-chev {
|
|
14394
|
+
transform: rotate(-90deg);
|
|
14395
|
+
}
|
|
14396
|
+
:where([data-kit="halo"]) .tf-sidebar-groupaction {
|
|
14397
|
+
flex: none;
|
|
14398
|
+
margin-left: auto;
|
|
14399
|
+
}
|
|
14400
|
+
:where([data-kit="halo"]) .tf-sidebar-li {
|
|
14401
|
+
position: relative;
|
|
14402
|
+
}
|
|
13932
14403
|
:where([data-kit="halo"]) .tf-sidebar-item {
|
|
13933
14404
|
display: flex;
|
|
13934
14405
|
align-items: center;
|
|
@@ -13936,15 +14407,86 @@
|
|
|
13936
14407
|
width: 100%;
|
|
13937
14408
|
height: 40px;
|
|
13938
14409
|
padding: 0 12px;
|
|
14410
|
+
box-sizing: border-box;
|
|
13939
14411
|
border: 0;
|
|
13940
14412
|
border-radius: var(--radius-pill);
|
|
13941
14413
|
background: transparent;
|
|
13942
14414
|
color: var(--ink-muted);
|
|
13943
14415
|
font: 600 13px/18px var(--font-sans);
|
|
13944
14416
|
text-align: left;
|
|
14417
|
+
text-decoration: none;
|
|
13945
14418
|
cursor: pointer;
|
|
13946
14419
|
}
|
|
13947
|
-
|
|
14420
|
+
/* Filter options (Sidebar as="aside"): a checkbox or radio mark, the label and a count */
|
|
14421
|
+
:where([data-kit="halo"]) .tf-sidebar-option {
|
|
14422
|
+
position: relative;
|
|
14423
|
+
}
|
|
14424
|
+
:where([data-kit="halo"]) .tf-sidebar-option.disabled {
|
|
14425
|
+
opacity: 0.45;
|
|
14426
|
+
cursor: default;
|
|
14427
|
+
}
|
|
14428
|
+
:where([data-kit="halo"]) .tf-sidebar-input {
|
|
14429
|
+
position: absolute;
|
|
14430
|
+
width: 1px;
|
|
14431
|
+
height: 1px;
|
|
14432
|
+
margin: 0;
|
|
14433
|
+
opacity: 0;
|
|
14434
|
+
pointer-events: none;
|
|
14435
|
+
}
|
|
14436
|
+
:where([data-kit="halo"]) .tf-sidebar-mark {
|
|
14437
|
+
display: grid;
|
|
14438
|
+
place-items: center;
|
|
14439
|
+
flex: none;
|
|
14440
|
+
width: 18px;
|
|
14441
|
+
height: 18px;
|
|
14442
|
+
box-sizing: border-box;
|
|
14443
|
+
border-radius: 6px;
|
|
14444
|
+
border: 1.5px solid var(--line-strong);
|
|
14445
|
+
background: var(--surface);
|
|
14446
|
+
color: var(--primary-foreground);
|
|
14447
|
+
transition:
|
|
14448
|
+
background-color var(--dur-fast) var(--ease-out),
|
|
14449
|
+
border-color var(--dur-fast) var(--ease-out);
|
|
14450
|
+
}
|
|
14451
|
+
:where([data-kit="halo"]) .tf-sidebar-mark.radio {
|
|
14452
|
+
border-radius: 50%;
|
|
14453
|
+
}
|
|
14454
|
+
:where([data-kit="halo"]) .tf-sidebar-mark svg {
|
|
14455
|
+
opacity: 0;
|
|
14456
|
+
}
|
|
14457
|
+
:where([data-kit="halo"]) .tf-sidebar-input:checked + .tf-sidebar-mark {
|
|
14458
|
+
background: var(--primary);
|
|
14459
|
+
border-color: var(--primary);
|
|
14460
|
+
}
|
|
14461
|
+
:where([data-kit="halo"]) .tf-sidebar-input:checked + .tf-sidebar-mark.radio {
|
|
14462
|
+
box-shadow: inset 0 0 0 3px var(--surface);
|
|
14463
|
+
}
|
|
14464
|
+
:where([data-kit="halo"]) .tf-sidebar-input:checked + .tf-sidebar-mark svg {
|
|
14465
|
+
opacity: 1;
|
|
14466
|
+
}
|
|
14467
|
+
:where([data-kit="halo"]) .tf-sidebar-input:focus-visible + .tf-sidebar-mark {
|
|
14468
|
+
outline: 2px solid var(--focus);
|
|
14469
|
+
outline-offset: 2px;
|
|
14470
|
+
}
|
|
14471
|
+
:where([data-kit="halo"]) .tf-sidebar-option:has(.tf-sidebar-input:checked) {
|
|
14472
|
+
color: var(--ink);
|
|
14473
|
+
}
|
|
14474
|
+
/* free content in a group (sliders, date fields, chips) */
|
|
14475
|
+
:where([data-kit="halo"]) .tf-sidebar-content {
|
|
14476
|
+
display: flex;
|
|
14477
|
+
flex-direction: column;
|
|
14478
|
+
gap: 12px;
|
|
14479
|
+
padding: 4px 12px 0;
|
|
14480
|
+
min-width: 0;
|
|
14481
|
+
}
|
|
14482
|
+
:where([data-kit="halo"]) .tf-sidebar-groupbody {
|
|
14483
|
+
display: flex;
|
|
14484
|
+
flex-direction: column;
|
|
14485
|
+
gap: 2px;
|
|
14486
|
+
min-width: 0;
|
|
14487
|
+
}
|
|
14488
|
+
:where([data-kit="halo"]) .tf-sidebar-item:hover,
|
|
14489
|
+
:where([data-kit="halo"]) .tf-sidebar-item.flying {
|
|
13948
14490
|
background: var(--sidebar-accent);
|
|
13949
14491
|
color: var(--ink);
|
|
13950
14492
|
}
|
|
@@ -13959,10 +14501,21 @@
|
|
|
13959
14501
|
outline: 2px solid var(--focus);
|
|
13960
14502
|
outline-offset: 2px;
|
|
13961
14503
|
}
|
|
14504
|
+
:where([data-kit="halo"]) .tf-sidebar-item:disabled {
|
|
14505
|
+
opacity: 0.45;
|
|
14506
|
+
cursor: not-allowed;
|
|
14507
|
+
}
|
|
14508
|
+
:where([data-kit="halo"]) .tf-sidebar-item:disabled:hover {
|
|
14509
|
+
background: transparent;
|
|
14510
|
+
color: var(--ink-muted);
|
|
14511
|
+
}
|
|
13962
14512
|
:where([data-kit="halo"]) .tf-sidebar-item.nested {
|
|
13963
14513
|
height: 32px;
|
|
13964
14514
|
padding-left: 40px;
|
|
13965
14515
|
}
|
|
14516
|
+
:where([data-kit="halo"]) .tf-sidebar-sub {
|
|
14517
|
+
margin-top: 2px !important;
|
|
14518
|
+
}
|
|
13966
14519
|
:where([data-kit="halo"]) .tf-sidebar-label {
|
|
13967
14520
|
flex: 1;
|
|
13968
14521
|
min-width: 0;
|
|
@@ -13971,22 +14524,107 @@
|
|
|
13971
14524
|
white-space: nowrap;
|
|
13972
14525
|
}
|
|
13973
14526
|
:where([data-kit="halo"]) .tf-sidebar-chev {
|
|
14527
|
+
flex: none;
|
|
13974
14528
|
transition: transform var(--dur-base) var(--ease-out);
|
|
13975
14529
|
}
|
|
13976
14530
|
:where([data-kit="halo"]) .tf-sidebar-item[aria-expanded="true"] .tf-sidebar-chev {
|
|
13977
14531
|
transform: rotate(180deg);
|
|
13978
14532
|
}
|
|
14533
|
+
:where([data-kit="halo"]) .tf-sidebar-ext {
|
|
14534
|
+
flex: none;
|
|
14535
|
+
opacity: 0.7;
|
|
14536
|
+
}
|
|
14537
|
+
:where([data-kit="halo"]) .tf-sidebar-count {
|
|
14538
|
+
flex: none;
|
|
14539
|
+
min-width: 20px;
|
|
14540
|
+
height: 20px;
|
|
14541
|
+
padding: 0 6px;
|
|
14542
|
+
box-sizing: border-box;
|
|
14543
|
+
border-radius: var(--radius-pill);
|
|
14544
|
+
background: var(--count);
|
|
14545
|
+
color: var(--on-count);
|
|
14546
|
+
font: 700 11px/20px var(--font-sans);
|
|
14547
|
+
text-align: center;
|
|
14548
|
+
}
|
|
14549
|
+
:where([data-kit="halo"]) .tf-sidebar-badge {
|
|
14550
|
+
flex: none;
|
|
14551
|
+
height: 20px;
|
|
14552
|
+
padding: 0 8px;
|
|
14553
|
+
box-sizing: border-box;
|
|
14554
|
+
border-radius: var(--radius-pill);
|
|
14555
|
+
background: var(--count);
|
|
14556
|
+
color: var(--on-count);
|
|
14557
|
+
font: 700 10px/20px var(--font-sans);
|
|
14558
|
+
letter-spacing: 0.04em;
|
|
14559
|
+
text-transform: uppercase;
|
|
14560
|
+
}
|
|
14561
|
+
:where([data-kit="halo"]) .tf-sidebar-dot {
|
|
14562
|
+
flex: none;
|
|
14563
|
+
width: 8px;
|
|
14564
|
+
height: 8px;
|
|
14565
|
+
border-radius: 50%;
|
|
14566
|
+
background: var(--count);
|
|
14567
|
+
}
|
|
14568
|
+
:where([data-kit="halo"]) .tf-sidebar-sr {
|
|
14569
|
+
position: absolute;
|
|
14570
|
+
width: 1px;
|
|
14571
|
+
height: 1px;
|
|
14572
|
+
overflow: hidden;
|
|
14573
|
+
clip-path: inset(50%);
|
|
14574
|
+
white-space: nowrap;
|
|
14575
|
+
}
|
|
14576
|
+
/* the "…" menu of an item shows on hover and focus */
|
|
14577
|
+
:where([data-kit="halo"]) .tf-sidebar-li.with-actions > .tf-sidebar-item {
|
|
14578
|
+
padding-right: 40px;
|
|
14579
|
+
}
|
|
14580
|
+
:where([data-kit="halo"]) .tf-sidebar-more {
|
|
14581
|
+
position: absolute;
|
|
14582
|
+
top: 4px;
|
|
14583
|
+
right: 4px;
|
|
14584
|
+
opacity: 0;
|
|
14585
|
+
transition: opacity var(--dur-fast) var(--ease-out);
|
|
14586
|
+
}
|
|
14587
|
+
:where([data-kit="halo"]) .tf-sidebar-li:hover > .tf-sidebar-more,
|
|
14588
|
+
:where([data-kit="halo"]) .tf-sidebar-more:focus-visible,
|
|
14589
|
+
:where([data-kit="halo"]) .tf-sidebar-more[aria-expanded="true"] {
|
|
14590
|
+
opacity: 1;
|
|
14591
|
+
}
|
|
13979
14592
|
:where([data-kit="halo"]) .tf-sidebar-foot {
|
|
13980
14593
|
display: flex;
|
|
13981
14594
|
align-items: center;
|
|
13982
|
-
justify-content: space-between;
|
|
13983
14595
|
gap: 8px;
|
|
13984
14596
|
padding-top: 12px;
|
|
13985
14597
|
border-top: 1px solid var(--sidebar-border);
|
|
13986
14598
|
}
|
|
14599
|
+
:where([data-kit="halo"]) .tf-sidebar-foot > :not(.tf-sidebar-toggle) {
|
|
14600
|
+
flex: 1;
|
|
14601
|
+
min-width: 0;
|
|
14602
|
+
}
|
|
14603
|
+
:where([data-kit="halo"]) .tf-sidebar-toggle {
|
|
14604
|
+
flex: none;
|
|
14605
|
+
margin-left: auto;
|
|
14606
|
+
}
|
|
14607
|
+
:where([data-kit="halo"]) .tf-sidebar-head .tf-pop-anchor,
|
|
14608
|
+
:where([data-kit="halo"]) .tf-sidebar-foot .tf-pop-anchor {
|
|
14609
|
+
display: block;
|
|
14610
|
+
min-width: 0;
|
|
14611
|
+
}
|
|
14612
|
+
:where([data-kit="halo"]) .tf-sidebar-head .tf-wssw {
|
|
14613
|
+
width: 100%;
|
|
14614
|
+
}
|
|
14615
|
+
:where([data-kit="halo"]) .tf-sidebar-head .tf-wssw .tf-option-text {
|
|
14616
|
+
flex: 1;
|
|
14617
|
+
min-width: 0;
|
|
14618
|
+
}
|
|
14619
|
+
|
|
14620
|
+
/* collapsed: icons only; labels stay the accessible names, tooltips and flyouts show them */
|
|
14621
|
+
:where([data-kit="halo"]) .tf-sidebar.collapsed .tf-sidebar-body {
|
|
14622
|
+
gap: 12px;
|
|
14623
|
+
}
|
|
13987
14624
|
:where([data-kit="halo"]) .tf-sidebar.collapsed .tf-sidebar-label,
|
|
13988
14625
|
:where([data-kit="halo"]) .tf-sidebar.collapsed .tf-sidebar-chev,
|
|
13989
|
-
:where([data-kit="halo"]) .tf-sidebar.collapsed .tf-sidebar-
|
|
14626
|
+
:where([data-kit="halo"]) .tf-sidebar.collapsed .tf-sidebar-ext,
|
|
14627
|
+
:where([data-kit="halo"]) .tf-sidebar.collapsed .tf-sidebar-grouphead {
|
|
13990
14628
|
position: absolute;
|
|
13991
14629
|
width: 1px;
|
|
13992
14630
|
height: 1px;
|
|
@@ -13994,12 +14632,19 @@
|
|
|
13994
14632
|
clip-path: inset(50%);
|
|
13995
14633
|
white-space: nowrap;
|
|
13996
14634
|
}
|
|
14635
|
+
:where([data-kit="halo"]) .tf-sidebar.collapsed .tf-sidebar-group + .tf-sidebar-group {
|
|
14636
|
+
padding-top: 12px;
|
|
14637
|
+
border-top: 1px solid var(--sidebar-border);
|
|
14638
|
+
}
|
|
13997
14639
|
:where([data-kit="halo"]) .tf-sidebar.collapsed .tf-sidebar-item {
|
|
13998
14640
|
position: relative;
|
|
13999
14641
|
justify-content: center;
|
|
14000
14642
|
padding: 0;
|
|
14001
14643
|
}
|
|
14002
|
-
:where([data-kit="halo"]) .tf-sidebar.collapsed .tf-
|
|
14644
|
+
:where([data-kit="halo"]) .tf-sidebar.collapsed .tf-sidebar-item.has-current {
|
|
14645
|
+
background: var(--sidebar-accent);
|
|
14646
|
+
}
|
|
14647
|
+
:where([data-kit="halo"]) .tf-sidebar.collapsed .tf-sidebar-count {
|
|
14003
14648
|
position: absolute;
|
|
14004
14649
|
top: -2px;
|
|
14005
14650
|
right: -2px;
|
|
@@ -14009,57 +14654,317 @@
|
|
|
14009
14654
|
font-size: 10px;
|
|
14010
14655
|
line-height: 16px;
|
|
14011
14656
|
}
|
|
14657
|
+
:where([data-kit="halo"]) .tf-sidebar.collapsed .tf-sidebar-dot,
|
|
14658
|
+
:where([data-kit="halo"]) .tf-sidebar.collapsed .tf-sidebar-badge {
|
|
14659
|
+
position: absolute;
|
|
14660
|
+
top: 6px;
|
|
14661
|
+
right: 8px;
|
|
14662
|
+
width: 8px;
|
|
14663
|
+
height: 8px;
|
|
14664
|
+
padding: 0;
|
|
14665
|
+
font-size: 0;
|
|
14666
|
+
}
|
|
14667
|
+
:where([data-kit="halo"]) .tf-sidebar.collapsed .tf-sidebar-head {
|
|
14668
|
+
justify-content: center;
|
|
14669
|
+
padding: 0;
|
|
14670
|
+
}
|
|
14012
14671
|
:where([data-kit="halo"]) .tf-sidebar.collapsed .tf-sidebar-foot {
|
|
14013
14672
|
flex-direction: column;
|
|
14014
14673
|
}
|
|
14015
|
-
|
|
14016
|
-
:
|
|
14017
|
-
|
|
14018
|
-
|
|
14019
|
-
:
|
|
14020
|
-
grid-template-columns: minmax(0, 1fr);
|
|
14021
|
-
}
|
|
14022
|
-
:where([data-kit="halo"]) .tf-navmenu-feature {
|
|
14023
|
-
min-height: 0;
|
|
14024
|
-
}
|
|
14025
|
-
:where([data-kit="halo"]) .tf-navmenu-list {
|
|
14026
|
-
flex-wrap: wrap;
|
|
14027
|
-
}
|
|
14028
|
-
:where([data-kit="halo"]) .tf-menubar {
|
|
14029
|
-
flex-wrap: wrap;
|
|
14030
|
-
border-radius: var(--radius-lg);
|
|
14031
|
-
}
|
|
14674
|
+
:where([data-kit="halo"]) .tf-sidebar.collapsed .tf-sidebar-foot > :not(.tf-sidebar-toggle) {
|
|
14675
|
+
flex: none;
|
|
14676
|
+
}
|
|
14677
|
+
:where([data-kit="halo"]) .tf-sidebar.collapsed .tf-sidebar-toggle {
|
|
14678
|
+
margin-left: 0;
|
|
14032
14679
|
}
|
|
14033
14680
|
|
|
14034
|
-
/*
|
|
14035
|
-
:where([data-kit="halo"]) .tf-
|
|
14036
|
-
|
|
14037
|
-
|
|
14038
|
-
animation-name: tf-halo-sheet-left;
|
|
14681
|
+
/* tooltips, flyouts and item menus float in the portal, so the scrolling body does not clip them */
|
|
14682
|
+
:where([data-kit="halo"]) .tf-sidebar-layer {
|
|
14683
|
+
position: fixed;
|
|
14684
|
+
z-index: var(--z-palette);
|
|
14039
14685
|
}
|
|
14040
|
-
:where([data-kit="halo"]) .tf-
|
|
14041
|
-
:
|
|
14042
|
-
|
|
14043
|
-
|
|
14044
|
-
|
|
14045
|
-
|
|
14686
|
+
:where([data-kit="halo"]) .tf-sidebar-tip {
|
|
14687
|
+
display: inline-flex;
|
|
14688
|
+
align-items: center;
|
|
14689
|
+
gap: 8px;
|
|
14690
|
+
padding: 4px 8px;
|
|
14691
|
+
border-radius: var(--radius-sm);
|
|
14692
|
+
background: var(--frame);
|
|
14693
|
+
color: var(--on-frame);
|
|
14694
|
+
font: 600 12px/16px var(--font-sans);
|
|
14695
|
+
white-space: nowrap;
|
|
14696
|
+
pointer-events: none;
|
|
14697
|
+
animation: tf-halo-fade var(--dur-fast) var(--ease-out) both;
|
|
14046
14698
|
}
|
|
14047
|
-
:where([data-kit="halo"]) .tf-
|
|
14048
|
-
|
|
14049
|
-
animation-name: tf-halo-sheet-top;
|
|
14699
|
+
:where([data-kit="halo"]) .tf-sidebar-tipcount {
|
|
14700
|
+
color: var(--on-frame-muted);
|
|
14050
14701
|
}
|
|
14051
|
-
:where([data-kit="halo"]) .tf-
|
|
14052
|
-
|
|
14053
|
-
|
|
14054
|
-
|
|
14702
|
+
:where([data-kit="halo"]) .tf-sidebar-flyout {
|
|
14703
|
+
min-width: 200px;
|
|
14704
|
+
padding: 6px;
|
|
14705
|
+
border-radius: var(--radius-md);
|
|
14706
|
+
background: var(--surface);
|
|
14707
|
+
color: var(--ink);
|
|
14708
|
+
box-shadow: var(--shadow-float);
|
|
14709
|
+
animation: tf-halo-fade var(--dur-fast) var(--ease-out) both;
|
|
14055
14710
|
}
|
|
14056
|
-
|
|
14057
|
-
|
|
14058
|
-
|
|
14059
|
-
|
|
14060
|
-
|
|
14711
|
+
:where([data-kit="halo"]) .tf-sidebar-flyout ul {
|
|
14712
|
+
display: flex;
|
|
14713
|
+
flex-direction: column;
|
|
14714
|
+
gap: 2px;
|
|
14715
|
+
margin: 0;
|
|
14716
|
+
padding: 0;
|
|
14717
|
+
list-style: none;
|
|
14061
14718
|
}
|
|
14062
|
-
|
|
14719
|
+
:where([data-kit="halo"]) .tf-sidebar-flytitle {
|
|
14720
|
+
padding: 6px 12px 8px;
|
|
14721
|
+
font: 600 11px/14px var(--font-sans);
|
|
14722
|
+
letter-spacing: 0.06em;
|
|
14723
|
+
text-transform: uppercase;
|
|
14724
|
+
color: var(--ink-muted);
|
|
14725
|
+
}
|
|
14726
|
+
:where([data-kit="halo"]) .tf-sidebar-flyout .tf-sidebar-item.nested {
|
|
14727
|
+
padding-left: 12px;
|
|
14728
|
+
}
|
|
14729
|
+
|
|
14730
|
+
/* on the AppShell frame */
|
|
14731
|
+
:where([data-kit="halo"]) .tf-sidebar.shell {
|
|
14732
|
+
align-self: stretch;
|
|
14733
|
+
padding: 16px 8px 8px;
|
|
14734
|
+
border-radius: 0;
|
|
14735
|
+
background: transparent;
|
|
14736
|
+
box-shadow: none;
|
|
14737
|
+
color: var(--on-frame);
|
|
14738
|
+
}
|
|
14739
|
+
:where([data-kit="halo"]) .tf-sidebar.shell .tf-sidebar-item,
|
|
14740
|
+
:where([data-kit="halo"]) .tf-sidebar.shell .tf-sidebar-grouplabel {
|
|
14741
|
+
color: var(--on-frame-muted);
|
|
14742
|
+
}
|
|
14743
|
+
:where([data-kit="halo"]) .tf-sidebar.shell .tf-sidebar-item:hover,
|
|
14744
|
+
:where([data-kit="halo"]) .tf-sidebar.shell .tf-sidebar-item.flying,
|
|
14745
|
+
:where([data-kit="halo"]) .tf-sidebar.shell.collapsed .tf-sidebar-item.has-current {
|
|
14746
|
+
background: var(--frame-hover);
|
|
14747
|
+
color: var(--on-frame);
|
|
14748
|
+
}
|
|
14749
|
+
:where([data-kit="halo"]) .tf-sidebar.shell .tf-sidebar-item.has-current,
|
|
14750
|
+
:where([data-kit="halo"]) .tf-sidebar.shell button.tf-sidebar-grouplabel:hover {
|
|
14751
|
+
color: var(--on-frame);
|
|
14752
|
+
}
|
|
14753
|
+
:where([data-kit="halo"]) .tf-sidebar.shell .tf-sidebar-item[aria-current="page"] {
|
|
14754
|
+
background: var(--frame-active);
|
|
14755
|
+
color: var(--on-frame);
|
|
14756
|
+
}
|
|
14757
|
+
:where([data-kit="halo"]) .tf-sidebar.shell .tf-sidebar-item:disabled:hover {
|
|
14758
|
+
background: transparent;
|
|
14759
|
+
color: var(--on-frame-muted);
|
|
14760
|
+
}
|
|
14761
|
+
:where([data-kit="halo"]) .tf-sidebar.shell .tf-sidebar-foot,
|
|
14762
|
+
:where([data-kit="halo"]) .tf-sidebar.shell.collapsed .tf-sidebar-group + .tf-sidebar-group {
|
|
14763
|
+
border-color: var(--frame-hover);
|
|
14764
|
+
}
|
|
14765
|
+
:where([data-kit="halo"]) .tf-sidebar.shell .tf-iconbtn-ghost {
|
|
14766
|
+
color: var(--on-frame-muted);
|
|
14767
|
+
}
|
|
14768
|
+
:where([data-kit="halo"]) .tf-sidebar.shell .tf-iconbtn-ghost:hover {
|
|
14769
|
+
background: var(--frame-hover);
|
|
14770
|
+
color: var(--on-frame);
|
|
14771
|
+
}
|
|
14772
|
+
:where([data-kit="halo"]) .tf-sidebar.shell .tf-sidebar-head {
|
|
14773
|
+
min-height: 44px;
|
|
14774
|
+
}
|
|
14775
|
+
|
|
14776
|
+
/* UserMenu: the signed-in person, opening their account menu */
|
|
14777
|
+
:where([data-kit="halo"]) .tf-usermenu {
|
|
14778
|
+
display: flex;
|
|
14779
|
+
align-items: center;
|
|
14780
|
+
gap: 10px;
|
|
14781
|
+
width: 100%;
|
|
14782
|
+
min-height: 44px;
|
|
14783
|
+
padding: 4px 8px 4px 4px;
|
|
14784
|
+
box-sizing: border-box;
|
|
14785
|
+
border: 0;
|
|
14786
|
+
border-radius: var(--radius-pill);
|
|
14787
|
+
background: transparent;
|
|
14788
|
+
color: var(--ink);
|
|
14789
|
+
font: inherit;
|
|
14790
|
+
text-align: left;
|
|
14791
|
+
cursor: pointer;
|
|
14792
|
+
}
|
|
14793
|
+
:where([data-kit="halo"]) .tf-usermenu.compact {
|
|
14794
|
+
width: auto;
|
|
14795
|
+
padding: 4px;
|
|
14796
|
+
}
|
|
14797
|
+
:where([data-kit="halo"]) .tf-usermenu:hover,
|
|
14798
|
+
:where([data-kit="halo"]) .tf-usermenu[aria-expanded="true"] {
|
|
14799
|
+
background: var(--sidebar-accent);
|
|
14800
|
+
}
|
|
14801
|
+
:where([data-kit="halo"]) .tf-usermenu:focus-visible {
|
|
14802
|
+
outline: 2px solid var(--focus);
|
|
14803
|
+
outline-offset: 2px;
|
|
14804
|
+
}
|
|
14805
|
+
:where([data-kit="halo"]) .tf-usermenu-avatar {
|
|
14806
|
+
display: inline-flex;
|
|
14807
|
+
flex: none;
|
|
14808
|
+
}
|
|
14809
|
+
:where([data-kit="halo"]) .tf-usermenu-text {
|
|
14810
|
+
display: flex;
|
|
14811
|
+
flex-direction: column;
|
|
14812
|
+
flex: 1;
|
|
14813
|
+
min-width: 0;
|
|
14814
|
+
}
|
|
14815
|
+
:where([data-kit="halo"]) .tf-usermenu-name {
|
|
14816
|
+
font: 600 13px/18px var(--font-sans);
|
|
14817
|
+
overflow: hidden;
|
|
14818
|
+
text-overflow: ellipsis;
|
|
14819
|
+
white-space: nowrap;
|
|
14820
|
+
}
|
|
14821
|
+
:where([data-kit="halo"]) .tf-usermenu-mail {
|
|
14822
|
+
font: 500 11px/14px var(--font-sans);
|
|
14823
|
+
color: var(--ink-muted);
|
|
14824
|
+
overflow: hidden;
|
|
14825
|
+
text-overflow: ellipsis;
|
|
14826
|
+
white-space: nowrap;
|
|
14827
|
+
}
|
|
14828
|
+
:where([data-kit="halo"]) .tf-sidebar.shell .tf-usermenu {
|
|
14829
|
+
color: var(--on-frame);
|
|
14830
|
+
}
|
|
14831
|
+
:where([data-kit="halo"]) .tf-sidebar.shell .tf-usermenu:hover,
|
|
14832
|
+
:where([data-kit="halo"]) .tf-sidebar.shell .tf-usermenu[aria-expanded="true"] {
|
|
14833
|
+
background: var(--frame-hover);
|
|
14834
|
+
}
|
|
14835
|
+
:where([data-kit="halo"]) .tf-sidebar.shell .tf-usermenu-mail {
|
|
14836
|
+
color: var(--on-frame-muted);
|
|
14837
|
+
}
|
|
14838
|
+
:where([data-kit="halo"]) .tf-wssw.compact {
|
|
14839
|
+
padding: 4px;
|
|
14840
|
+
}
|
|
14841
|
+
|
|
14842
|
+
/* the bar that opens the sidebar as a drawer on phones */
|
|
14843
|
+
:where([data-kit="halo"]) .tf-sidebar-bar,
|
|
14844
|
+
:where([data-kit="halo"]) .tf-sidebar-scrim {
|
|
14845
|
+
display: none;
|
|
14846
|
+
}
|
|
14847
|
+
@media (max-width: 760px) {
|
|
14848
|
+
:where([data-kit="halo"]) .tf-sidebar-bar {
|
|
14849
|
+
display: flex;
|
|
14850
|
+
align-items: center;
|
|
14851
|
+
gap: 8px;
|
|
14852
|
+
min-height: 52px;
|
|
14853
|
+
padding: 6px 12px 6px 6px;
|
|
14854
|
+
box-sizing: border-box;
|
|
14855
|
+
border-radius: var(--radius-lg);
|
|
14856
|
+
background: var(--surface);
|
|
14857
|
+
box-shadow: var(--shadow-card);
|
|
14858
|
+
color: var(--ink);
|
|
14859
|
+
}
|
|
14860
|
+
:where([data-kit="halo"]) .tf-sidebar-bar.attached {
|
|
14861
|
+
border-radius: 0;
|
|
14862
|
+
box-shadow: none;
|
|
14863
|
+
background: var(--sidebar);
|
|
14864
|
+
border-bottom: 1px solid var(--sidebar-border);
|
|
14865
|
+
}
|
|
14866
|
+
:where([data-kit="halo"]) .tf-sidebar-bar.shell {
|
|
14867
|
+
min-height: 56px;
|
|
14868
|
+
padding: 8px 8px 8px 0;
|
|
14869
|
+
border-radius: 0;
|
|
14870
|
+
box-shadow: none;
|
|
14871
|
+
background: transparent;
|
|
14872
|
+
color: var(--on-frame);
|
|
14873
|
+
}
|
|
14874
|
+
:where([data-kit="halo"]) .tf-sidebar-bar.shell .tf-iconbtn-ghost {
|
|
14875
|
+
color: var(--on-frame);
|
|
14876
|
+
}
|
|
14877
|
+
:where([data-kit="halo"]) .tf-sidebar-bar > :not(.tf-iconbtn) {
|
|
14878
|
+
min-width: 0;
|
|
14879
|
+
}
|
|
14880
|
+
:where([data-kit="halo"]) .tf-sidebar,
|
|
14881
|
+
:where([data-kit="halo"]) .tf-sidebar.attached,
|
|
14882
|
+
:where([data-kit="halo"]) .tf-sidebar.shell {
|
|
14883
|
+
position: fixed;
|
|
14884
|
+
top: 0;
|
|
14885
|
+
bottom: 0;
|
|
14886
|
+
left: 0;
|
|
14887
|
+
z-index: var(--z-overlay);
|
|
14888
|
+
width: min(300px, 86vw);
|
|
14889
|
+
min-height: 0;
|
|
14890
|
+
padding: 12px;
|
|
14891
|
+
border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
|
|
14892
|
+
box-shadow: var(--shadow-float);
|
|
14893
|
+
transform: translateX(-105%);
|
|
14894
|
+
visibility: hidden;
|
|
14895
|
+
transition:
|
|
14896
|
+
transform var(--dur-base) var(--ease-out),
|
|
14897
|
+
visibility 0s linear var(--dur-base);
|
|
14898
|
+
}
|
|
14899
|
+
:where([data-kit="halo"]) .tf-sidebar.shell {
|
|
14900
|
+
background: var(--frame);
|
|
14901
|
+
}
|
|
14902
|
+
:where([data-kit="halo"]) .tf-sidebar.attached {
|
|
14903
|
+
background: var(--sidebar);
|
|
14904
|
+
}
|
|
14905
|
+
:where([data-kit="halo"]) .tf-sidebar.open {
|
|
14906
|
+
transform: none;
|
|
14907
|
+
visibility: visible;
|
|
14908
|
+
transition: transform var(--dur-base) var(--ease-out);
|
|
14909
|
+
}
|
|
14910
|
+
:where([data-kit="halo"]) .tf-sidebar-toggle {
|
|
14911
|
+
display: none;
|
|
14912
|
+
}
|
|
14913
|
+
:where([data-kit="halo"]) .tf-sidebar-scrim {
|
|
14914
|
+
display: block;
|
|
14915
|
+
position: fixed;
|
|
14916
|
+
inset: 0;
|
|
14917
|
+
z-index: var(--z-overlay);
|
|
14918
|
+
background: var(--scrim-strong);
|
|
14919
|
+
animation: tf-halo-fade var(--dur-base) var(--ease-out) both;
|
|
14920
|
+
}
|
|
14921
|
+
}
|
|
14922
|
+
|
|
14923
|
+
@media (max-width: 760px) {
|
|
14924
|
+
:where([data-kit="halo"]) .tf-navmenu-panel.with-feature {
|
|
14925
|
+
grid-template-columns: minmax(0, 1fr);
|
|
14926
|
+
}
|
|
14927
|
+
:where([data-kit="halo"]) .tf-navmenu-feature {
|
|
14928
|
+
min-height: 0;
|
|
14929
|
+
}
|
|
14930
|
+
:where([data-kit="halo"]) .tf-navmenu-list {
|
|
14931
|
+
flex-wrap: wrap;
|
|
14932
|
+
}
|
|
14933
|
+
:where([data-kit="halo"]) .tf-menubar {
|
|
14934
|
+
flex-wrap: wrap;
|
|
14935
|
+
border-radius: var(--radius-lg);
|
|
14936
|
+
}
|
|
14937
|
+
}
|
|
14938
|
+
|
|
14939
|
+
/* Drawer (sheet) sides */
|
|
14940
|
+
:where([data-kit="halo"]) .tf-drawer.side-left {
|
|
14941
|
+
right: auto;
|
|
14942
|
+
left: 0;
|
|
14943
|
+
animation-name: tf-halo-sheet-left;
|
|
14944
|
+
}
|
|
14945
|
+
:where([data-kit="halo"]) .tf-drawer.side-top,
|
|
14946
|
+
:where([data-kit="halo"]) .tf-drawer.side-bottom {
|
|
14947
|
+
left: 0;
|
|
14948
|
+
right: 0;
|
|
14949
|
+
width: 100%;
|
|
14950
|
+
max-height: min(80%, 640px);
|
|
14951
|
+
}
|
|
14952
|
+
:where([data-kit="halo"]) .tf-drawer.side-top {
|
|
14953
|
+
bottom: auto;
|
|
14954
|
+
animation-name: tf-halo-sheet-top;
|
|
14955
|
+
}
|
|
14956
|
+
:where([data-kit="halo"]) .tf-drawer.side-bottom {
|
|
14957
|
+
top: auto;
|
|
14958
|
+
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
|
|
14959
|
+
animation-name: tf-halo-sheet-bottom;
|
|
14960
|
+
}
|
|
14961
|
+
@keyframes tf-halo-sheet-left {
|
|
14962
|
+
from {
|
|
14963
|
+
opacity: 0;
|
|
14964
|
+
transform: translateX(calc(-24px * var(--motion-travel)));
|
|
14965
|
+
}
|
|
14966
|
+
}
|
|
14967
|
+
@keyframes tf-halo-sheet-top {
|
|
14063
14968
|
from {
|
|
14064
14969
|
opacity: 0;
|
|
14065
14970
|
transform: translateY(calc(-24px * var(--motion-travel)));
|
|
@@ -14197,7 +15102,7 @@
|
|
|
14197
15102
|
/* Tablet: asides move below the main column, nav labels and the page nav shrink to icons */
|
|
14198
15103
|
@container tf-shell (max-width: 1180px) {
|
|
14199
15104
|
:where([data-kit="halo"]) .tf-sheet:not(.tf-sheet-2):not(.tf-sheet-nav) {
|
|
14200
|
-
grid-template-columns:
|
|
15105
|
+
grid-template-columns: auto minmax(0, 1fr);
|
|
14201
15106
|
}
|
|
14202
15107
|
:where([data-kit="halo"]) .tf-sheet-nav.tf-sheet-aside {
|
|
14203
15108
|
grid-template-columns: 208px minmax(0, 1fr);
|
|
@@ -14205,6 +15110,13 @@
|
|
|
14205
15110
|
:where([data-kit="halo"]) .tf-sheet > .tf-main ~ :not(.tf-dock-float) {
|
|
14206
15111
|
grid-column: 2;
|
|
14207
15112
|
}
|
|
15113
|
+
/* with the sidebar there is no rail column: asides go below the main column */
|
|
15114
|
+
:where([data-kit="halo"]) .tf-sheet.tf-sheet-norail:not(.tf-sheet-2) {
|
|
15115
|
+
grid-template-columns: minmax(0, 1fr);
|
|
15116
|
+
}
|
|
15117
|
+
:where([data-kit="halo"]) .tf-sheet-norail > .tf-main ~ :not(.tf-dock-float) {
|
|
15118
|
+
grid-column: 1;
|
|
15119
|
+
}
|
|
14208
15120
|
/* the dock floats over the end of the sheet, not of the main column (asides follow it) */
|
|
14209
15121
|
:where([data-kit="halo"]) .tf-main-dock {
|
|
14210
15122
|
padding-bottom: 0;
|
|
@@ -14235,7 +15147,7 @@
|
|
|
14235
15147
|
@container tf-shell (max-width: 1040px) {
|
|
14236
15148
|
:where([data-kit="halo"]) .tf-sheet-nav,
|
|
14237
15149
|
:where([data-kit="halo"]) .tf-sheet-nav.tf-sheet-aside {
|
|
14238
|
-
grid-template-columns:
|
|
15150
|
+
grid-template-columns: auto minmax(0, 1fr);
|
|
14239
15151
|
}
|
|
14240
15152
|
:where([data-kit="halo"]) .tf-subnav-eyebrow {
|
|
14241
15153
|
display: none;
|
|
@@ -14332,6 +15244,21 @@
|
|
|
14332
15244
|
:where([data-kit="halo"]) .tf-rail-group {
|
|
14333
15245
|
flex-direction: row;
|
|
14334
15246
|
}
|
|
15247
|
+
/* on phones the rail is a row of icons, expanded or not */
|
|
15248
|
+
:where([data-kit="halo"]) .tf-rail.expanded {
|
|
15249
|
+
width: auto;
|
|
15250
|
+
}
|
|
15251
|
+
:where([data-kit="halo"]) .tf-rail.expanded .tf-rail-btn {
|
|
15252
|
+
display: grid;
|
|
15253
|
+
width: 40px;
|
|
15254
|
+
padding: 0;
|
|
15255
|
+
}
|
|
15256
|
+
:where([data-kit="halo"]) .tf-rail.expanded .tf-rail-label {
|
|
15257
|
+
display: none;
|
|
15258
|
+
}
|
|
15259
|
+
:where([data-kit="halo"]) .tf-rail.expanded .tf-dotcount {
|
|
15260
|
+
position: absolute;
|
|
15261
|
+
}
|
|
14335
15262
|
:where([data-kit="halo"]) .tf-main {
|
|
14336
15263
|
gap: var(--space-4);
|
|
14337
15264
|
}
|
|
@@ -14423,6 +15350,56 @@
|
|
|
14423
15350
|
max-width: 100%;
|
|
14424
15351
|
overflow-x: auto;
|
|
14425
15352
|
}
|
|
15353
|
+
/* Table stack: narrow boxes show every row as a card, each cell with its column label */
|
|
15354
|
+
:where([data-kit="halo"]) .tf-table-stackbox {
|
|
15355
|
+
container: tf-table / inline-size;
|
|
15356
|
+
}
|
|
15357
|
+
@container tf-table (max-width: 600px) {
|
|
15358
|
+
:where([data-kit="halo"]) .tf-table.stack thead {
|
|
15359
|
+
position: absolute;
|
|
15360
|
+
width: 1px;
|
|
15361
|
+
height: 1px;
|
|
15362
|
+
overflow: hidden;
|
|
15363
|
+
clip-path: inset(50%);
|
|
15364
|
+
}
|
|
15365
|
+
:where([data-kit="halo"]) .tf-table.stack,
|
|
15366
|
+
:where([data-kit="halo"]) .tf-table.stack tbody,
|
|
15367
|
+
:where([data-kit="halo"]) .tf-table.stack tr {
|
|
15368
|
+
display: block;
|
|
15369
|
+
}
|
|
15370
|
+
:where([data-kit="halo"]) .tf-table.stack tr {
|
|
15371
|
+
padding: 8px 0;
|
|
15372
|
+
border-bottom: 1px solid var(--line);
|
|
15373
|
+
}
|
|
15374
|
+
:where([data-kit="halo"]) .tf-table.stack tr:last-child {
|
|
15375
|
+
border-bottom: 0;
|
|
15376
|
+
}
|
|
15377
|
+
:where([data-kit="halo"]) .tf-table.stack td {
|
|
15378
|
+
display: flex;
|
|
15379
|
+
align-items: center;
|
|
15380
|
+
justify-content: space-between;
|
|
15381
|
+
gap: 16px;
|
|
15382
|
+
height: auto;
|
|
15383
|
+
min-height: 32px;
|
|
15384
|
+
padding: 4px 0;
|
|
15385
|
+
border-bottom: 0;
|
|
15386
|
+
text-align: right;
|
|
15387
|
+
white-space: normal;
|
|
15388
|
+
}
|
|
15389
|
+
:where([data-kit="halo"]) .tf-table.stack td::before {
|
|
15390
|
+
content: attr(data-label);
|
|
15391
|
+
flex: none;
|
|
15392
|
+
max-width: 50%;
|
|
15393
|
+
text-align: left;
|
|
15394
|
+
font: 600 11px/14px var(--font-sans);
|
|
15395
|
+
letter-spacing: 0.06em;
|
|
15396
|
+
text-transform: uppercase;
|
|
15397
|
+
color: var(--ink-muted);
|
|
15398
|
+
}
|
|
15399
|
+
:where([data-kit="halo"]) .tf-table.stack tbody tr:hover td {
|
|
15400
|
+
background: transparent;
|
|
15401
|
+
}
|
|
15402
|
+
}
|
|
14426
15403
|
|
|
14427
15404
|
/* ── Phone: components ── */
|
|
14428
15405
|
@media (max-width: 760px) {
|
|
@@ -14457,15 +15434,15 @@
|
|
|
14457
15434
|
height: 52px;
|
|
14458
15435
|
}
|
|
14459
15436
|
|
|
14460
|
-
/* segmented controls and tabs scroll sideways when the labels do not fit */
|
|
14461
|
-
:where([data-kit="halo"]) .tf-seg,
|
|
14462
|
-
:where([data-kit="halo"]) .tf-tabs {
|
|
15437
|
+
/* segmented controls and tabs scroll sideways when the labels do not fit (block ones shrink) */
|
|
15438
|
+
:where([data-kit="halo"]) .tf-seg:not(.block),
|
|
15439
|
+
:where([data-kit="halo"]) .tf-tabs:not(.tf-tabs-block) {
|
|
14463
15440
|
max-width: 100%;
|
|
14464
15441
|
overflow-x: auto;
|
|
14465
15442
|
scrollbar-width: none;
|
|
14466
15443
|
}
|
|
14467
|
-
:where([data-kit="halo"]) .tf-seg-item,
|
|
14468
|
-
:where([data-kit="halo"]) .tf-tab {
|
|
15444
|
+
:where([data-kit="halo"]) .tf-seg:not(.block) .tf-seg-item,
|
|
15445
|
+
:where([data-kit="halo"]) .tf-tabs:not(.tf-tabs-block) .tf-tab {
|
|
14469
15446
|
flex: none;
|
|
14470
15447
|
}
|
|
14471
15448
|
:where([data-kit="halo"]) .tf-seg,
|
|
@@ -14614,6 +15591,40 @@
|
|
|
14614
15591
|
}
|
|
14615
15592
|
}
|
|
14616
15593
|
|
|
15594
|
+
/* AppShell with a sidebar on phones: the sidebar's bar on top of the frame, the sheet below */
|
|
15595
|
+
@media (max-width: 760px) {
|
|
15596
|
+
:where([data-kit="halo"]) .tf-shell.tf-shell-sidebar {
|
|
15597
|
+
grid-template-columns: minmax(0, 1fr);
|
|
15598
|
+
padding: 0 8px 8px;
|
|
15599
|
+
}
|
|
15600
|
+
}
|
|
15601
|
+
|
|
15602
|
+
/* Fluid at every width: segmented controls, tabs and toggle groups never push past their
|
|
15603
|
+
container. When space runs short the items shrink and their labels end in an ellipsis. */
|
|
15604
|
+
:where([data-kit="halo"]) .tf-tabs {
|
|
15605
|
+
max-width: 100%;
|
|
15606
|
+
box-sizing: border-box;
|
|
15607
|
+
}
|
|
15608
|
+
:where([data-kit="halo"]) .tf-seg-item,
|
|
15609
|
+
:where([data-kit="halo"]) .tf-tab,
|
|
15610
|
+
:where([data-kit="halo"]) .tf-togglegroup .tf-toggle {
|
|
15611
|
+
min-width: 0;
|
|
15612
|
+
}
|
|
15613
|
+
:where([data-kit="halo"]) .tf-seg-label,
|
|
15614
|
+
:where([data-kit="halo"]) .tf-tab,
|
|
15615
|
+
:where([data-kit="halo"]) .tf-toggle-label {
|
|
15616
|
+
overflow: hidden;
|
|
15617
|
+
text-overflow: ellipsis;
|
|
15618
|
+
white-space: nowrap;
|
|
15619
|
+
}
|
|
15620
|
+
|
|
15621
|
+
/* key hints mean nothing on touch screens */
|
|
15622
|
+
@media (pointer: coarse) {
|
|
15623
|
+
:where([data-kit="halo"]) .tf-search .tf-kbd {
|
|
15624
|
+
display: none;
|
|
15625
|
+
}
|
|
15626
|
+
}
|
|
15627
|
+
|
|
14617
15628
|
/* 07-polish.css */
|
|
14618
15629
|
/* ───────────── Polish ─────────────
|
|
14619
15630
|
Small consistency fixes found by auditing every preview in both kits and themes. Zero
|
|
@@ -15137,11 +16148,13 @@
|
|
|
15137
16148
|
inset: 0;
|
|
15138
16149
|
z-index: 1;
|
|
15139
16150
|
display: grid;
|
|
15140
|
-
grid-template-columns:
|
|
16151
|
+
grid-template-columns:
|
|
16152
|
+
minmax(0, var(--floating-start, 320px)) minmax(0, 1fr)
|
|
16153
|
+
minmax(0, var(--floating-end, 340px));
|
|
15141
16154
|
grid-template-rows: auto minmax(0, 1fr) auto;
|
|
15142
16155
|
grid-template-areas:
|
|
15143
16156
|
"top top top"
|
|
15144
|
-
"start
|
|
16157
|
+
"start controls end"
|
|
15145
16158
|
"bottom bottom bottom";
|
|
15146
16159
|
gap: var(--space-4);
|
|
15147
16160
|
padding: var(--space-4);
|
|
@@ -15172,6 +16185,32 @@
|
|
|
15172
16185
|
grid-area: bottom;
|
|
15173
16186
|
justify-self: center;
|
|
15174
16187
|
}
|
|
16188
|
+
/* background controls and source notes: the free corner, clear of the panels and the dock */
|
|
16189
|
+
:where([data-kit="halo"]) .tf-floating-ui > .tf-floating-controls {
|
|
16190
|
+
grid-area: controls;
|
|
16191
|
+
align-self: end;
|
|
16192
|
+
justify-self: end;
|
|
16193
|
+
display: flex;
|
|
16194
|
+
flex-direction: column;
|
|
16195
|
+
align-items: flex-end;
|
|
16196
|
+
gap: var(--space-2);
|
|
16197
|
+
pointer-events: none;
|
|
16198
|
+
}
|
|
16199
|
+
:where([data-kit="halo"]) .tf-floating-controls > * {
|
|
16200
|
+
pointer-events: auto;
|
|
16201
|
+
}
|
|
16202
|
+
:where([data-kit="halo"]) .tf-floating-attribution {
|
|
16203
|
+
max-width: 100%;
|
|
16204
|
+
padding: 2px 8px;
|
|
16205
|
+
border-radius: var(--radius-sm);
|
|
16206
|
+
background: var(--surface);
|
|
16207
|
+
color: var(--ink-muted);
|
|
16208
|
+
font: 500 11px/16px var(--font-sans);
|
|
16209
|
+
overflow-wrap: anywhere;
|
|
16210
|
+
}
|
|
16211
|
+
:where([data-kit="halo"]) .tf-floating-handle {
|
|
16212
|
+
display: none;
|
|
16213
|
+
}
|
|
15175
16214
|
:where([data-kit="halo"]) .tf-floating-ui > :is(.tf-floating-top, .tf-floating-bottom) {
|
|
15176
16215
|
pointer-events: none;
|
|
15177
16216
|
}
|
|
@@ -15197,9 +16236,78 @@
|
|
|
15197
16236
|
gap: var(--space-3);
|
|
15198
16237
|
padding: var(--space-3);
|
|
15199
16238
|
}
|
|
16239
|
+
:where([data-kit="halo"]) .tf-floating-ui > .tf-floating-controls {
|
|
16240
|
+
grid-area: auto;
|
|
16241
|
+
grid-row: 3;
|
|
16242
|
+
}
|
|
16243
|
+
/* the end slot as a bottom sheet over the background: a peek, or most of the height */
|
|
16244
|
+
:where([data-kit="halo"]) .tf-floating.has-sheet .tf-floating-ui {
|
|
16245
|
+
grid-template-rows: auto auto minmax(120px, 1fr) auto;
|
|
16246
|
+
grid-template-areas:
|
|
16247
|
+
"top"
|
|
16248
|
+
"start"
|
|
16249
|
+
"."
|
|
16250
|
+
"bottom";
|
|
16251
|
+
padding-bottom: calc(var(--space-3) + 96px);
|
|
16252
|
+
}
|
|
16253
|
+
:where([data-kit="halo"]) .tf-floating.has-sheet .tf-floating-end {
|
|
16254
|
+
position: absolute;
|
|
16255
|
+
left: var(--space-3);
|
|
16256
|
+
right: var(--space-3);
|
|
16257
|
+
bottom: 0;
|
|
16258
|
+
z-index: 2;
|
|
16259
|
+
max-height: 96px;
|
|
16260
|
+
overflow: hidden;
|
|
16261
|
+
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
|
|
16262
|
+
background: var(--surface);
|
|
16263
|
+
box-shadow: var(--shadow-card);
|
|
16264
|
+
transition: max-height var(--dur-base) var(--ease-out);
|
|
16265
|
+
}
|
|
16266
|
+
:where([data-kit="halo"])[data-surface="glass"].tf-floating.has-sheet .tf-floating-end, :where([data-kit="halo"]) [data-surface="glass"].tf-floating.has-sheet .tf-floating-end {
|
|
16267
|
+
background: var(--glass);
|
|
16268
|
+
-webkit-backdrop-filter: var(--glass-filter);
|
|
16269
|
+
backdrop-filter: var(--glass-filter);
|
|
16270
|
+
}
|
|
16271
|
+
:where([data-kit="halo"]) .tf-floating.has-sheet.sheet-full .tf-floating-end {
|
|
16272
|
+
max-height: 75%;
|
|
16273
|
+
overflow-y: auto;
|
|
16274
|
+
}
|
|
16275
|
+
:where([data-kit="halo"]) .tf-floating.has-sheet .tf-floating-handle {
|
|
16276
|
+
display: block;
|
|
16277
|
+
position: sticky;
|
|
16278
|
+
top: 0;
|
|
16279
|
+
z-index: 1;
|
|
16280
|
+
width: 100%;
|
|
16281
|
+
height: 24px;
|
|
16282
|
+
margin: 0;
|
|
16283
|
+
padding: 0;
|
|
16284
|
+
border: 0;
|
|
16285
|
+
background: transparent;
|
|
16286
|
+
cursor: pointer;
|
|
16287
|
+
}
|
|
16288
|
+
:where([data-kit="halo"]) .tf-floating.has-sheet .tf-floating-handle::before {
|
|
16289
|
+
content: "";
|
|
16290
|
+
display: block;
|
|
16291
|
+
width: 40px;
|
|
16292
|
+
height: 4px;
|
|
16293
|
+
margin: 10px auto;
|
|
16294
|
+
border-radius: var(--radius-pill);
|
|
16295
|
+
background: var(--line-strong);
|
|
16296
|
+
}
|
|
16297
|
+
:where([data-kit="halo"]) .tf-floating.has-sheet .tf-floating-handle:focus-visible {
|
|
16298
|
+
outline: 2px solid var(--focus);
|
|
16299
|
+
outline-offset: -2px;
|
|
16300
|
+
}
|
|
15200
16301
|
}
|
|
15201
16302
|
|
|
15202
|
-
/*
|
|
16303
|
+
/* in a glass layout the attribution is glass too */
|
|
16304
|
+
:where([data-kit="halo"])[data-surface="glass"] .tf-floating-attribution, :where([data-kit="halo"]) [data-surface="glass"] .tf-floating-attribution {
|
|
16305
|
+
background: var(--glass);
|
|
16306
|
+
-webkit-backdrop-filter: var(--glass-filter);
|
|
16307
|
+
backdrop-filter: var(--glass-filter);
|
|
16308
|
+
}
|
|
16309
|
+
|
|
16310
|
+
/* 09-motion.css */
|
|
15203
16311
|
/* Motion: leaving layers, reveal on scroll, page transitions, the expressive level.
|
|
15204
16312
|
*
|
|
15205
16313
|
* Levels come from `data-motion` (tokens.css): "standard", "expressive" (longer, staggered page
|
|
@@ -15817,7 +16925,8 @@
|
|
|
15817
16925
|
border-radius: var(--radius-pill);
|
|
15818
16926
|
background: var(--surface-sunken);
|
|
15819
16927
|
color: var(--ink-muted);
|
|
15820
|
-
min-width: 220px;
|
|
16928
|
+
min-width: min(220px, 100%);
|
|
16929
|
+
box-sizing: border-box;
|
|
15821
16930
|
}
|
|
15822
16931
|
:where([data-kit="pro"]) .tf-search input {
|
|
15823
16932
|
border: 0;
|
|
@@ -15826,6 +16935,7 @@
|
|
|
15826
16935
|
font: 500 14px/20px var(--font-sans);
|
|
15827
16936
|
color: var(--ink);
|
|
15828
16937
|
width: 100%;
|
|
16938
|
+
min-width: 0;
|
|
15829
16939
|
}
|
|
15830
16940
|
:where([data-kit="pro"]) .tf-search input::placeholder {
|
|
15831
16941
|
color: var(--ink-subtle);
|
|
@@ -15907,7 +17017,7 @@
|
|
|
15907
17017
|
display: flex;
|
|
15908
17018
|
}
|
|
15909
17019
|
:where([data-kit="pro"]) .tf-tabs-block .tf-tab {
|
|
15910
|
-
flex: 1;
|
|
17020
|
+
flex: 1 1 0;
|
|
15911
17021
|
}
|
|
15912
17022
|
|
|
15913
17023
|
/* StatTile */
|
|
@@ -16224,6 +17334,36 @@
|
|
|
16224
17334
|
background: var(--accent);
|
|
16225
17335
|
color: var(--accent-foreground);
|
|
16226
17336
|
}
|
|
17337
|
+
/* expanded: names next to the icons (the sheet's first column follows the rail's width) */
|
|
17338
|
+
:where([data-kit="pro"]) .tf-rail {
|
|
17339
|
+
transition: width var(--dur-base) var(--ease-out);
|
|
17340
|
+
}
|
|
17341
|
+
:where([data-kit="pro"]) .tf-rail.expanded {
|
|
17342
|
+
width: 200px;
|
|
17343
|
+
}
|
|
17344
|
+
:where([data-kit="pro"]) .tf-rail.expanded .tf-rail-group {
|
|
17345
|
+
align-items: stretch;
|
|
17346
|
+
}
|
|
17347
|
+
:where([data-kit="pro"]) .tf-rail.expanded .tf-rail-btn {
|
|
17348
|
+
display: flex;
|
|
17349
|
+
align-items: center;
|
|
17350
|
+
gap: 12px;
|
|
17351
|
+
width: 100%;
|
|
17352
|
+
padding: 0 10px;
|
|
17353
|
+
box-sizing: border-box;
|
|
17354
|
+
border-radius: var(--radius-pill);
|
|
17355
|
+
}
|
|
17356
|
+
:where([data-kit="pro"]) .tf-rail-label {
|
|
17357
|
+
min-width: 0;
|
|
17358
|
+
overflow: hidden;
|
|
17359
|
+
text-overflow: ellipsis;
|
|
17360
|
+
white-space: nowrap;
|
|
17361
|
+
font: 500 13px/18px var(--font-sans);
|
|
17362
|
+
}
|
|
17363
|
+
:where([data-kit="pro"]) .tf-rail.expanded .tf-dotcount {
|
|
17364
|
+
position: static;
|
|
17365
|
+
margin-left: auto;
|
|
17366
|
+
}
|
|
16227
17367
|
:where([data-kit="pro"]) .tf-rail-btn[aria-current="page"] {
|
|
16228
17368
|
background: var(--primary);
|
|
16229
17369
|
color: var(--primary-foreground);
|
|
@@ -16373,9 +17513,28 @@
|
|
|
16373
17513
|
:where([data-kit="pro"]) .tf-shell .tf-topbar {
|
|
16374
17514
|
padding: 0 var(--space-6);
|
|
16375
17515
|
}
|
|
17516
|
+
/* AppShell with navigation="sidebar": the labelled sidebar on the frame, the sheet beside it */
|
|
17517
|
+
:where([data-kit="pro"]) .tf-shell.tf-shell-sidebar {
|
|
17518
|
+
display: grid;
|
|
17519
|
+
grid-template-columns: auto minmax(0, 1fr);
|
|
17520
|
+
align-items: stretch;
|
|
17521
|
+
padding: 8px;
|
|
17522
|
+
}
|
|
17523
|
+
:where([data-kit="pro"]) .tf-shell-tools {
|
|
17524
|
+
display: flex;
|
|
17525
|
+
justify-content: flex-end;
|
|
17526
|
+
flex-wrap: wrap;
|
|
17527
|
+
gap: 8px;
|
|
17528
|
+
}
|
|
17529
|
+
:where([data-kit="pro"]) .tf-sheet.tf-sheet-norail {
|
|
17530
|
+
grid-template-columns: minmax(0, 1fr) 300px;
|
|
17531
|
+
}
|
|
17532
|
+
:where([data-kit="pro"]) .tf-sheet.tf-sheet-norail.tf-sheet-2 {
|
|
17533
|
+
grid-template-columns: minmax(0, 1fr);
|
|
17534
|
+
}
|
|
16376
17535
|
:where([data-kit="pro"]) .tf-sheet {
|
|
16377
17536
|
display: grid;
|
|
16378
|
-
grid-template-columns:
|
|
17537
|
+
grid-template-columns: auto 1fr 300px;
|
|
16379
17538
|
gap: var(--space-6);
|
|
16380
17539
|
padding: var(--space-6);
|
|
16381
17540
|
background: var(--canvas);
|
|
@@ -16892,6 +18051,64 @@
|
|
|
16892
18051
|
background: var(--accent);
|
|
16893
18052
|
color: var(--accent-foreground);
|
|
16894
18053
|
}
|
|
18054
|
+
:where([data-kit="pro"]) a.tf-row-item {
|
|
18055
|
+
text-decoration: none;
|
|
18056
|
+
}
|
|
18057
|
+
:where([data-kit="pro"]) .tf-row-text {
|
|
18058
|
+
min-width: 0;
|
|
18059
|
+
}
|
|
18060
|
+
/* not interactive: no hover, no pointer */
|
|
18061
|
+
:where([data-kit="pro"]) .tf-row-item.static {
|
|
18062
|
+
cursor: default;
|
|
18063
|
+
}
|
|
18064
|
+
:where([data-kit="pro"]) .tf-row-item.static:hover {
|
|
18065
|
+
background: transparent;
|
|
18066
|
+
color: var(--ink);
|
|
18067
|
+
}
|
|
18068
|
+
/* own buttons: the title is the link or button and its hit area stretches over the row */
|
|
18069
|
+
:where([data-kit="pro"]) .tf-row-item.has-hit {
|
|
18070
|
+
position: relative;
|
|
18071
|
+
}
|
|
18072
|
+
:where([data-kit="pro"]) .tf-row-item.has-hit:hover {
|
|
18073
|
+
background: transparent;
|
|
18074
|
+
color: var(--ink);
|
|
18075
|
+
}
|
|
18076
|
+
:where([data-kit="pro"]) .tf-row-item.has-hit:has(.tf-row-hit:hover) {
|
|
18077
|
+
background: var(--accent);
|
|
18078
|
+
color: var(--accent-foreground);
|
|
18079
|
+
}
|
|
18080
|
+
:where([data-kit="pro"]) .tf-row-item.has-hit:has(.tf-row-hit:focus-visible) {
|
|
18081
|
+
outline: 2px solid var(--focus);
|
|
18082
|
+
outline-offset: 2px;
|
|
18083
|
+
}
|
|
18084
|
+
:where([data-kit="pro"]) .tf-row-hit {
|
|
18085
|
+
display: block;
|
|
18086
|
+
padding: 0;
|
|
18087
|
+
border: 0;
|
|
18088
|
+
background: none;
|
|
18089
|
+
color: inherit;
|
|
18090
|
+
font: inherit;
|
|
18091
|
+
text-align: left;
|
|
18092
|
+
text-decoration: none;
|
|
18093
|
+
cursor: pointer;
|
|
18094
|
+
outline: none;
|
|
18095
|
+
}
|
|
18096
|
+
:where([data-kit="pro"]) .tf-row-hit::after {
|
|
18097
|
+
content: "";
|
|
18098
|
+
position: absolute;
|
|
18099
|
+
inset: 0;
|
|
18100
|
+
border-radius: inherit;
|
|
18101
|
+
}
|
|
18102
|
+
:where([data-kit="pro"]) .tf-row-item.has-actions {
|
|
18103
|
+
grid-template-columns: auto 1fr auto auto;
|
|
18104
|
+
}
|
|
18105
|
+
:where([data-kit="pro"]) .tf-row-actions {
|
|
18106
|
+
position: relative;
|
|
18107
|
+
z-index: 1;
|
|
18108
|
+
display: flex;
|
|
18109
|
+
align-items: center;
|
|
18110
|
+
gap: 4px;
|
|
18111
|
+
}
|
|
16895
18112
|
:where([data-kit="pro"]) .tf-row-item[aria-current="true"] {
|
|
16896
18113
|
background: var(--surface);
|
|
16897
18114
|
box-shadow: 0 0 0 var(--line-width) var(--line);
|
|
@@ -16903,12 +18120,27 @@
|
|
|
16903
18120
|
gap: 8px;
|
|
16904
18121
|
}
|
|
16905
18122
|
:where([data-kit="pro"]) .tf-row-sub {
|
|
18123
|
+
display: block;
|
|
16906
18124
|
font: 500 13px/18px var(--font-sans);
|
|
16907
18125
|
color: var(--ink-muted);
|
|
16908
18126
|
white-space: nowrap;
|
|
16909
18127
|
overflow: hidden;
|
|
16910
18128
|
text-overflow: ellipsis;
|
|
16911
18129
|
}
|
|
18130
|
+
/* titleLines / subtitleLines: wrap, then end in an ellipsis after that many lines */
|
|
18131
|
+
:where([data-kit="pro"]) .tf-row-sub.clamp,
|
|
18132
|
+
:where([data-kit="pro"]) .tf-row-clamp {
|
|
18133
|
+
display: -webkit-box;
|
|
18134
|
+
-webkit-box-orient: vertical;
|
|
18135
|
+
-webkit-line-clamp: var(--lines, 2);
|
|
18136
|
+
line-clamp: var(--lines, 2);
|
|
18137
|
+
white-space: normal;
|
|
18138
|
+
overflow: hidden;
|
|
18139
|
+
min-width: 0;
|
|
18140
|
+
}
|
|
18141
|
+
:where([data-kit="pro"]) .tf-row-title.clamp {
|
|
18142
|
+
align-items: flex-start;
|
|
18143
|
+
}
|
|
16912
18144
|
:where([data-kit="pro"]) .tf-row-meta {
|
|
16913
18145
|
font: 500 12px/16px var(--font-sans);
|
|
16914
18146
|
color: var(--ink-muted);
|
|
@@ -17095,6 +18327,13 @@
|
|
|
17095
18327
|
font: 500 13px/1 var(--font-sans);
|
|
17096
18328
|
cursor: pointer;
|
|
17097
18329
|
}
|
|
18330
|
+
:where([data-kit="pro"]) a.tf-page {
|
|
18331
|
+
display: inline-flex;
|
|
18332
|
+
align-items: center;
|
|
18333
|
+
justify-content: center;
|
|
18334
|
+
box-sizing: border-box;
|
|
18335
|
+
text-decoration: none;
|
|
18336
|
+
}
|
|
17098
18337
|
:where([data-kit="pro"]) .tf-page:hover {
|
|
17099
18338
|
background: var(--accent);
|
|
17100
18339
|
color: var(--ink);
|
|
@@ -17105,18 +18344,42 @@
|
|
|
17105
18344
|
}
|
|
17106
18345
|
:where([data-kit="pro"]) .tf-crumbs {
|
|
17107
18346
|
display: flex;
|
|
18347
|
+
flex-wrap: wrap;
|
|
17108
18348
|
align-items: center;
|
|
17109
18349
|
gap: 6px;
|
|
18350
|
+
min-width: 0;
|
|
17110
18351
|
font: 500 13px/18px var(--font-sans);
|
|
17111
18352
|
color: var(--ink-muted);
|
|
17112
18353
|
}
|
|
17113
|
-
|
|
18354
|
+
/* links and buttons get a 24px target without moving the text */
|
|
18355
|
+
:where([data-kit="pro"]) .tf-crumb {
|
|
18356
|
+
display: inline-flex;
|
|
18357
|
+
align-items: center;
|
|
18358
|
+
min-height: 24px;
|
|
18359
|
+
max-width: 100%;
|
|
18360
|
+
padding: 0 4px;
|
|
18361
|
+
/* the target grows to 24px around the 18px line without moving the text */
|
|
18362
|
+
margin: -3px -4px;
|
|
18363
|
+
border: 0;
|
|
18364
|
+
border-radius: var(--radius-sm);
|
|
18365
|
+
background: none;
|
|
17114
18366
|
color: inherit;
|
|
18367
|
+
font: inherit;
|
|
17115
18368
|
text-decoration: none;
|
|
18369
|
+
overflow-wrap: anywhere;
|
|
18370
|
+
}
|
|
18371
|
+
:where([data-kit="pro"]) a.tf-crumb,
|
|
18372
|
+
:where([data-kit="pro"]) button.tf-crumb {
|
|
18373
|
+
cursor: pointer;
|
|
17116
18374
|
}
|
|
17117
|
-
:where([data-kit="pro"]) .tf-
|
|
18375
|
+
:where([data-kit="pro"]) a.tf-crumb:hover,
|
|
18376
|
+
:where([data-kit="pro"]) button.tf-crumb:hover {
|
|
17118
18377
|
color: var(--ink);
|
|
17119
18378
|
}
|
|
18379
|
+
:where([data-kit="pro"]) .tf-crumb:focus-visible {
|
|
18380
|
+
outline: 2px solid var(--focus);
|
|
18381
|
+
outline-offset: 0;
|
|
18382
|
+
}
|
|
17120
18383
|
:where([data-kit="pro"]) .tf-crumbs [aria-current] {
|
|
17121
18384
|
color: var(--ink);
|
|
17122
18385
|
}
|
|
@@ -17158,7 +18421,7 @@
|
|
|
17158
18421
|
cursor: pointer;
|
|
17159
18422
|
}
|
|
17160
18423
|
:where([data-kit="pro"]) .tf-sheet-2 {
|
|
17161
|
-
grid-template-columns:
|
|
18424
|
+
grid-template-columns: auto 1fr;
|
|
17162
18425
|
}
|
|
17163
18426
|
:where([data-kit="pro"]) .tf-main {
|
|
17164
18427
|
display: flex;
|
|
@@ -17231,6 +18494,26 @@
|
|
|
17231
18494
|
justify-content: center;
|
|
17232
18495
|
}
|
|
17233
18496
|
}
|
|
18497
|
+
/* the TopBar measured that the labels do not fit: icons only, at any width */
|
|
18498
|
+
:where([data-kit="pro"]) .tf-nav.tight .tf-nav-label {
|
|
18499
|
+
display: none;
|
|
18500
|
+
}
|
|
18501
|
+
:where([data-kit="pro"]) .tf-nav.tight .tf-nav-item {
|
|
18502
|
+
position: relative;
|
|
18503
|
+
width: 36px;
|
|
18504
|
+
padding: 0;
|
|
18505
|
+
justify-content: center;
|
|
18506
|
+
}
|
|
18507
|
+
:where([data-kit="pro"]) .tf-nav.tight .tf-nav-item .tf-nav-count {
|
|
18508
|
+
position: absolute;
|
|
18509
|
+
top: -2px;
|
|
18510
|
+
right: -4px;
|
|
18511
|
+
min-width: 16px;
|
|
18512
|
+
height: 16px;
|
|
18513
|
+
padding: 0 4px;
|
|
18514
|
+
font-size: 10px;
|
|
18515
|
+
line-height: 16px;
|
|
18516
|
+
}
|
|
17234
18517
|
:where([data-kit="pro"]) .tf-main {
|
|
17235
18518
|
animation: none;
|
|
17236
18519
|
}
|
|
@@ -17356,6 +18639,19 @@
|
|
|
17356
18639
|
:where([data-kit="pro"]) .tf-user-text {
|
|
17357
18640
|
display: flex;
|
|
17358
18641
|
flex-direction: column;
|
|
18642
|
+
min-width: 0;
|
|
18643
|
+
max-width: 200px;
|
|
18644
|
+
}
|
|
18645
|
+
/* a long name or address ends in an ellipsis instead of pushing the nav out (title has it whole) */
|
|
18646
|
+
:where([data-kit="pro"]) .tf-user-name,
|
|
18647
|
+
:where([data-kit="pro"]) .tf-user-mail {
|
|
18648
|
+
overflow: hidden;
|
|
18649
|
+
text-overflow: ellipsis;
|
|
18650
|
+
white-space: nowrap;
|
|
18651
|
+
}
|
|
18652
|
+
:where([data-kit="pro"]) .tf-user {
|
|
18653
|
+
min-width: 0;
|
|
18654
|
+
flex-shrink: 1;
|
|
17359
18655
|
}
|
|
17360
18656
|
|
|
17361
18657
|
/* Checkbox: real box + SVG check (no pseudo-elements on the input) */
|
|
@@ -17368,9 +18664,12 @@
|
|
|
17368
18664
|
}
|
|
17369
18665
|
:where([data-kit="pro"]) .tf-checkbox input {
|
|
17370
18666
|
position: absolute;
|
|
17371
|
-
|
|
17372
|
-
|
|
17373
|
-
|
|
18667
|
+
/* the box keeps its size; the hit area is at least 24px (WCAG 2.2 target size) */
|
|
18668
|
+
top: 50%;
|
|
18669
|
+
left: 50%;
|
|
18670
|
+
translate: -50% -50%;
|
|
18671
|
+
width: max(24px, 100%);
|
|
18672
|
+
height: max(24px, 100%);
|
|
17374
18673
|
margin: 0;
|
|
17375
18674
|
opacity: 0;
|
|
17376
18675
|
cursor: pointer;
|
|
@@ -18445,6 +19744,23 @@
|
|
|
18445
19744
|
font: 500 13px/18px var(--font-sans);
|
|
18446
19745
|
pointer-events: none;
|
|
18447
19746
|
}
|
|
19747
|
+
/* an interactive control at the end (reveal password, clear, copy) */
|
|
19748
|
+
:where([data-kit="pro"]) .tf-input-action {
|
|
19749
|
+
position: absolute;
|
|
19750
|
+
right: 4px;
|
|
19751
|
+
top: 50%;
|
|
19752
|
+
transform: translateY(-50%);
|
|
19753
|
+
display: inline-flex;
|
|
19754
|
+
}
|
|
19755
|
+
:where([data-kit="pro"]) .tf-inputwrap.has-action .tf-input {
|
|
19756
|
+
padding-right: 44px;
|
|
19757
|
+
}
|
|
19758
|
+
:where([data-kit="pro"]) .tf-inputwrap.has-action.has-suffix .tf-input {
|
|
19759
|
+
padding-right: 72px;
|
|
19760
|
+
}
|
|
19761
|
+
:where([data-kit="pro"]) .tf-inputwrap.has-action .tf-input-suffix {
|
|
19762
|
+
right: 44px;
|
|
19763
|
+
}
|
|
18448
19764
|
:where([data-kit="pro"]) .tf-input-suffix.err {
|
|
18449
19765
|
color: var(--blush-ink);
|
|
18450
19766
|
}
|
|
@@ -18604,7 +19920,7 @@
|
|
|
18604
19920
|
display: flex;
|
|
18605
19921
|
}
|
|
18606
19922
|
:where([data-kit="pro"]) .tf-seg.block .tf-seg-item {
|
|
18607
|
-
flex: 1;
|
|
19923
|
+
flex: 1 1 0;
|
|
18608
19924
|
}
|
|
18609
19925
|
:where([data-kit="pro"]) .tf-seg-item {
|
|
18610
19926
|
position: relative;
|
|
@@ -19216,6 +20532,10 @@
|
|
|
19216
20532
|
border-color var(--dur-fast) ease,
|
|
19217
20533
|
background-color var(--dur-fast) ease;
|
|
19218
20534
|
}
|
|
20535
|
+
:where([data-kit="pro"]) .tf-drop.disabled {
|
|
20536
|
+
opacity: 0.5;
|
|
20537
|
+
cursor: not-allowed;
|
|
20538
|
+
}
|
|
19219
20539
|
:where([data-kit="pro"]) .tf-drop b {
|
|
19220
20540
|
font: 500 14px/20px var(--font-sans);
|
|
19221
20541
|
margin-top: 4px;
|
|
@@ -19278,6 +20598,7 @@
|
|
|
19278
20598
|
/* Alert, confirm, toaster */
|
|
19279
20599
|
:where([data-kit="pro"]) .tf-alert {
|
|
19280
20600
|
display: flex;
|
|
20601
|
+
flex-wrap: wrap;
|
|
19281
20602
|
align-items: flex-start;
|
|
19282
20603
|
gap: 12px;
|
|
19283
20604
|
padding: 12px 12px 12px 16px;
|
|
@@ -19321,7 +20642,8 @@
|
|
|
19321
20642
|
color: var(--lilac-ink);
|
|
19322
20643
|
}
|
|
19323
20644
|
:where([data-kit="pro"]) .tf-alert-body {
|
|
19324
|
-
|
|
20645
|
+
/* when the alert is too narrow for text and actions, the actions move to their own line */
|
|
20646
|
+
flex: 1 1 200px;
|
|
19325
20647
|
min-width: 0;
|
|
19326
20648
|
display: flex;
|
|
19327
20649
|
flex-direction: column;
|
|
@@ -19337,8 +20659,11 @@
|
|
|
19337
20659
|
:where([data-kit="pro"]) .tf-alert-actions {
|
|
19338
20660
|
flex: none;
|
|
19339
20661
|
display: flex;
|
|
20662
|
+
flex-wrap: wrap;
|
|
19340
20663
|
align-items: center;
|
|
19341
20664
|
gap: 4px;
|
|
20665
|
+
max-width: 100%;
|
|
20666
|
+
margin-left: auto;
|
|
19342
20667
|
}
|
|
19343
20668
|
:where([data-kit="pro"]) .tf-alert .tf-iconbtn-ghost {
|
|
19344
20669
|
background: transparent;
|
|
@@ -20348,14 +21673,29 @@
|
|
|
20348
21673
|
display: inline-flex;
|
|
20349
21674
|
align-items: center;
|
|
20350
21675
|
gap: 8px;
|
|
20351
|
-
|
|
20352
|
-
|
|
21676
|
+
/* grows with a long title (two lines at most) instead of spilling over */
|
|
21677
|
+
min-height: var(--control-sm);
|
|
21678
|
+
box-sizing: border-box;
|
|
21679
|
+
padding: 4px 12px 4px 4px;
|
|
20353
21680
|
border-radius: var(--radius-pill);
|
|
20354
21681
|
background: var(--surface-sunken);
|
|
20355
21682
|
color: var(--ink);
|
|
20356
21683
|
text-decoration: none;
|
|
20357
21684
|
font: 500 12px/16px var(--font-sans);
|
|
20358
|
-
max-width: 260px;
|
|
21685
|
+
max-width: min(260px, 100%);
|
|
21686
|
+
}
|
|
21687
|
+
:where([data-kit="pro"]) .tf-source-title {
|
|
21688
|
+
min-width: 0;
|
|
21689
|
+
display: -webkit-box;
|
|
21690
|
+
-webkit-box-orient: vertical;
|
|
21691
|
+
-webkit-line-clamp: 2;
|
|
21692
|
+
line-clamp: 2;
|
|
21693
|
+
overflow: hidden;
|
|
21694
|
+
overflow-wrap: anywhere;
|
|
21695
|
+
}
|
|
21696
|
+
:where([data-kit="pro"]) .tf-source > .tf-ico,
|
|
21697
|
+
:where([data-kit="pro"]) .tf-source-n {
|
|
21698
|
+
flex: none;
|
|
20359
21699
|
}
|
|
20360
21700
|
:where([data-kit="pro"]) .tf-source:hover {
|
|
20361
21701
|
background: var(--line);
|
|
@@ -21478,17 +22818,25 @@
|
|
|
21478
22818
|
color: var(--ink-muted);
|
|
21479
22819
|
}
|
|
21480
22820
|
:where([data-kit="pro"]) .tf-csteps {
|
|
22821
|
+
/* one row at every width: steps shrink to their numbers instead of wrapping */
|
|
22822
|
+
container: tf-csteps / inline-size;
|
|
21481
22823
|
display: flex;
|
|
21482
22824
|
gap: 8px;
|
|
21483
22825
|
margin: 0;
|
|
21484
22826
|
padding: 0;
|
|
21485
22827
|
list-style: none;
|
|
21486
|
-
flex-wrap: wrap;
|
|
21487
22828
|
}
|
|
21488
22829
|
:where([data-kit="pro"]) .tf-csteps li {
|
|
21489
22830
|
display: flex;
|
|
21490
22831
|
align-items: center;
|
|
21491
22832
|
gap: 8px;
|
|
22833
|
+
min-width: 0;
|
|
22834
|
+
}
|
|
22835
|
+
:where([data-kit="pro"]) .tf-cstep-label {
|
|
22836
|
+
min-width: 0;
|
|
22837
|
+
overflow: hidden;
|
|
22838
|
+
text-overflow: ellipsis;
|
|
22839
|
+
white-space: nowrap;
|
|
21492
22840
|
}
|
|
21493
22841
|
:where([data-kit="pro"]) .tf-csteps li + li::before {
|
|
21494
22842
|
content: "";
|
|
@@ -21517,6 +22865,40 @@
|
|
|
21517
22865
|
:where([data-kit="pro"]) .tf-csteps button:disabled {
|
|
21518
22866
|
cursor: default;
|
|
21519
22867
|
}
|
|
22868
|
+
:where([data-kit="pro"]) .tf-csteps button {
|
|
22869
|
+
min-width: 0;
|
|
22870
|
+
max-width: 100%;
|
|
22871
|
+
}
|
|
22872
|
+
:where([data-kit="pro"]) .tf-csteps.compact li:not(.cur) .tf-cstep-label {
|
|
22873
|
+
position: absolute;
|
|
22874
|
+
width: 1px;
|
|
22875
|
+
height: 1px;
|
|
22876
|
+
overflow: hidden;
|
|
22877
|
+
clip-path: inset(50%);
|
|
22878
|
+
white-space: nowrap;
|
|
22879
|
+
}
|
|
22880
|
+
:where([data-kit="pro"]) .tf-csteps.compact li:not(.cur) button {
|
|
22881
|
+
padding: 0 4px;
|
|
22882
|
+
}
|
|
22883
|
+
:where([data-kit="pro"]) .tf-csteps.compact li + li::before {
|
|
22884
|
+
width: 12px;
|
|
22885
|
+
}
|
|
22886
|
+
@container tf-csteps (max-width: 560px) {
|
|
22887
|
+
:where([data-kit="pro"]) .tf-csteps li:not(.cur) .tf-cstep-label {
|
|
22888
|
+
position: absolute;
|
|
22889
|
+
width: 1px;
|
|
22890
|
+
height: 1px;
|
|
22891
|
+
overflow: hidden;
|
|
22892
|
+
clip-path: inset(50%);
|
|
22893
|
+
white-space: nowrap;
|
|
22894
|
+
}
|
|
22895
|
+
:where([data-kit="pro"]) .tf-csteps li:not(.cur) button {
|
|
22896
|
+
padding: 0 4px;
|
|
22897
|
+
}
|
|
22898
|
+
:where([data-kit="pro"]) .tf-csteps li + li::before {
|
|
22899
|
+
width: 12px;
|
|
22900
|
+
}
|
|
22901
|
+
}
|
|
21520
22902
|
:where([data-kit="pro"]) .tf-csteps li.cur button {
|
|
21521
22903
|
background: var(--surface);
|
|
21522
22904
|
color: var(--ink);
|
|
@@ -21683,7 +23065,7 @@
|
|
|
21683
23065
|
color: var(--on-frame);
|
|
21684
23066
|
box-shadow: var(--shadow-float), 0 0 0 var(--line-width) var(--line);
|
|
21685
23067
|
}
|
|
21686
|
-
:where([data-kit="pro"]) .tf-plan.featured .tf-plan-head span,
|
|
23068
|
+
:where([data-kit="pro"]) .tf-plan.featured .tf-plan-head span:not(.tf-badge),
|
|
21687
23069
|
:where([data-kit="pro"]) .tf-plan.featured .tf-plan-price span,
|
|
21688
23070
|
:where([data-kit="pro"]) .tf-plan.featured .tf-plan-price s,
|
|
21689
23071
|
:where([data-kit="pro"]) .tf-plan.featured .tf-plan-feats li.no {
|
|
@@ -21714,10 +23096,22 @@
|
|
|
21714
23096
|
:where([data-kit="pro"]) .tf-plan-head b {
|
|
21715
23097
|
font: 600 18px/24px var(--font-sans);
|
|
21716
23098
|
}
|
|
21717
|
-
:where([data-kit="pro"]) .tf-plan-head span {
|
|
23099
|
+
:where([data-kit="pro"]) .tf-plan-head span:not(.tf-badge) {
|
|
21718
23100
|
font: 500 13px/18px var(--font-sans);
|
|
21719
23101
|
color: var(--ink-muted);
|
|
21720
23102
|
}
|
|
23103
|
+
/* "Current plan" next to the name, and the note under the price */
|
|
23104
|
+
:where([data-kit="pro"]) .tf-plan-head .tf-plan-current {
|
|
23105
|
+
align-self: flex-start;
|
|
23106
|
+
}
|
|
23107
|
+
:where([data-kit="pro"]) .tf-plan-note {
|
|
23108
|
+
margin: -4px 0 0;
|
|
23109
|
+
font: 500 12px/16px var(--font-sans);
|
|
23110
|
+
color: var(--ink-muted);
|
|
23111
|
+
}
|
|
23112
|
+
:where([data-kit="pro"]) a.tf-plan-cta {
|
|
23113
|
+
text-decoration: none;
|
|
23114
|
+
}
|
|
21721
23115
|
:where([data-kit="pro"]) .tf-plan-price {
|
|
21722
23116
|
display: flex;
|
|
21723
23117
|
align-items: baseline;
|
|
@@ -23823,7 +25217,7 @@
|
|
|
23823
25217
|
:where([data-kit="pro"]) .tf-tabbar {
|
|
23824
25218
|
display: grid;
|
|
23825
25219
|
grid-auto-flow: column;
|
|
23826
|
-
grid-auto-columns: 1fr;
|
|
25220
|
+
grid-auto-columns: minmax(0, 1fr);
|
|
23827
25221
|
padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px));
|
|
23828
25222
|
background: var(--frame);
|
|
23829
25223
|
border-radius: var(--radius-1) var(--radius-1) 0 0;
|
|
@@ -23842,6 +25236,17 @@
|
|
|
23842
25236
|
cursor: pointer;
|
|
23843
25237
|
border-radius: var(--radius-1);
|
|
23844
25238
|
}
|
|
25239
|
+
:where([data-kit="pro"]) .tf-tabbar-item {
|
|
25240
|
+
min-width: 0;
|
|
25241
|
+
}
|
|
25242
|
+
:where([data-kit="pro"]) .tf-tabbar-label {
|
|
25243
|
+
max-width: 100%;
|
|
25244
|
+
padding: 0 4px;
|
|
25245
|
+
box-sizing: border-box;
|
|
25246
|
+
overflow: hidden;
|
|
25247
|
+
text-overflow: ellipsis;
|
|
25248
|
+
white-space: nowrap;
|
|
25249
|
+
}
|
|
23845
25250
|
:where([data-kit="pro"]) .tf-tabbar-item.on {
|
|
23846
25251
|
color: var(--on-frame);
|
|
23847
25252
|
background: var(--frame-hover);
|
|
@@ -24154,6 +25559,22 @@
|
|
|
24154
25559
|
padding-bottom: 10px;
|
|
24155
25560
|
color: var(--ink-muted);
|
|
24156
25561
|
}
|
|
25562
|
+
/* in a narrow column (a filter sidebar) the number fields give their padding to the digits */
|
|
25563
|
+
:where([data-kit="pro"]) .tf-range {
|
|
25564
|
+
container: tf-range / inline-size;
|
|
25565
|
+
}
|
|
25566
|
+
@container tf-range (max-width: 280px) {
|
|
25567
|
+
:where([data-kit="pro"]) .tf-range-inputs {
|
|
25568
|
+
gap: 4px;
|
|
25569
|
+
}
|
|
25570
|
+
:where([data-kit="pro"]) .tf-range-num .tf-input {
|
|
25571
|
+
padding-left: 10px;
|
|
25572
|
+
padding-right: 24px;
|
|
25573
|
+
}
|
|
25574
|
+
:where([data-kit="pro"]) .tf-range-num > span {
|
|
25575
|
+
right: 10px;
|
|
25576
|
+
}
|
|
25577
|
+
}
|
|
24157
25578
|
:where([data-kit="pro"]) .tf-range-vals {
|
|
24158
25579
|
display: flex;
|
|
24159
25580
|
justify-content: space-between;
|
|
@@ -24307,6 +25728,31 @@
|
|
|
24307
25728
|
font: 500 12px/16px var(--font-sans);
|
|
24308
25729
|
color: var(--ink-muted);
|
|
24309
25730
|
}
|
|
25731
|
+
/* layout="list": compact rows */
|
|
25732
|
+
:where([data-kit="pro"]) .tf-tiles.list {
|
|
25733
|
+
grid-template-columns: minmax(0, 1fr);
|
|
25734
|
+
gap: 8px;
|
|
25735
|
+
}
|
|
25736
|
+
:where([data-kit="pro"]) .tf-tiles.list .tf-tile {
|
|
25737
|
+
flex-direction: row;
|
|
25738
|
+
align-items: center;
|
|
25739
|
+
gap: 12px;
|
|
25740
|
+
padding: 8px 44px 8px 8px;
|
|
25741
|
+
}
|
|
25742
|
+
:where([data-kit="pro"]) .tf-tiles.list .tf-tile-art {
|
|
25743
|
+
flex: none;
|
|
25744
|
+
width: 40px;
|
|
25745
|
+
height: var(--density-control);
|
|
25746
|
+
aspect-ratio: auto;
|
|
25747
|
+
}
|
|
25748
|
+
:where([data-kit="pro"]) .tf-tiles.list .tf-tile-label {
|
|
25749
|
+
min-width: 0;
|
|
25750
|
+
padding: 0;
|
|
25751
|
+
}
|
|
25752
|
+
:where([data-kit="pro"]) .tf-tiles.list .tf-tile-check {
|
|
25753
|
+
top: 50%;
|
|
25754
|
+
translate: 0 -50%;
|
|
25755
|
+
}
|
|
24310
25756
|
:where([data-kit="pro"]) .tf-tile-check {
|
|
24311
25757
|
position: absolute;
|
|
24312
25758
|
top: 14px;
|
|
@@ -25416,6 +26862,16 @@
|
|
|
25416
26862
|
color: var(--paper-ink);
|
|
25417
26863
|
box-shadow: inset 0 0 0 1px var(--line);
|
|
25418
26864
|
}
|
|
26865
|
+
/* QrCode: dark modules on paper, in every theme (scanners expect dark on light) */
|
|
26866
|
+
:where([data-kit="pro"]) .tf-qr {
|
|
26867
|
+
display: block;
|
|
26868
|
+
width: 100%;
|
|
26869
|
+
height: auto;
|
|
26870
|
+
color: var(--paper-ink);
|
|
26871
|
+
}
|
|
26872
|
+
:where([data-kit="pro"]) .tf-qr-bg {
|
|
26873
|
+
fill: var(--paper);
|
|
26874
|
+
}
|
|
25419
26875
|
:where([data-kit="pro"]) .tf-2fa-qr > * {
|
|
25420
26876
|
max-width: 100%;
|
|
25421
26877
|
max-height: 100%;
|
|
@@ -25667,7 +27123,8 @@
|
|
|
25667
27123
|
border-radius: var(--radius-md);
|
|
25668
27124
|
overflow: hidden;
|
|
25669
27125
|
background: var(--surface-sunken);
|
|
25670
|
-
|
|
27126
|
+
/* sideways drags move the divider; the page still scrolls up and down over it */
|
|
27127
|
+
touch-action: pan-y;
|
|
25671
27128
|
user-select: none;
|
|
25672
27129
|
cursor: ew-resize;
|
|
25673
27130
|
}
|
|
@@ -26571,6 +28028,14 @@
|
|
|
26571
28028
|
:where([data-kit="pro"]) .tf-togglegroup .tf-toggle {
|
|
26572
28029
|
height: var(--control-sm);
|
|
26573
28030
|
}
|
|
28031
|
+
:where([data-kit="pro"]) .tf-togglegroup.block {
|
|
28032
|
+
display: flex;
|
|
28033
|
+
flex-wrap: nowrap;
|
|
28034
|
+
width: auto;
|
|
28035
|
+
}
|
|
28036
|
+
:where([data-kit="pro"]) .tf-togglegroup.block .tf-toggle {
|
|
28037
|
+
flex: 1 1 0;
|
|
28038
|
+
}
|
|
26574
28039
|
:where([data-kit="pro"]) .tf-togglegroup .tf-toggle.icon {
|
|
26575
28040
|
width: 32px;
|
|
26576
28041
|
}
|
|
@@ -26781,6 +28246,11 @@
|
|
|
26781
28246
|
text-align: left;
|
|
26782
28247
|
cursor: pointer;
|
|
26783
28248
|
}
|
|
28249
|
+
:where([data-kit="pro"]) .tf-selectmenu.sm {
|
|
28250
|
+
height: var(--control-sm);
|
|
28251
|
+
padding: 0 12px;
|
|
28252
|
+
font-size: 13px;
|
|
28253
|
+
}
|
|
26784
28254
|
:where([data-kit="pro"]) .tf-selectmenu.empty .tf-selectmenu-value {
|
|
26785
28255
|
color: var(--ink-subtle);
|
|
26786
28256
|
}
|
|
@@ -27057,31 +28527,408 @@
|
|
|
27057
28527
|
outline-offset: -2px;
|
|
27058
28528
|
}
|
|
27059
28529
|
|
|
27060
|
-
/* Sidebar */
|
|
28530
|
+
/* Sidebar: floating (a card), attached (flush with the screen's edge) or on the AppShell frame */
|
|
27061
28531
|
:where([data-kit="pro"]) .tf-sidebar {
|
|
27062
28532
|
display: flex;
|
|
27063
28533
|
flex-direction: column;
|
|
27064
|
-
|
|
28534
|
+
flex: none;
|
|
28535
|
+
gap: 12px;
|
|
27065
28536
|
width: 248px;
|
|
27066
28537
|
padding: 12px;
|
|
27067
28538
|
box-sizing: border-box;
|
|
27068
28539
|
border-radius: var(--radius-lg);
|
|
27069
28540
|
background: var(--surface);
|
|
27070
28541
|
box-shadow: 0 0 0 var(--line-width) var(--line);
|
|
28542
|
+
color: var(--ink);
|
|
27071
28543
|
transition: width var(--dur-base) var(--ease-out);
|
|
27072
28544
|
}
|
|
27073
28545
|
:where([data-kit="pro"]) .tf-sidebar.collapsed {
|
|
27074
28546
|
width: 64px;
|
|
27075
28547
|
}
|
|
27076
|
-
:where([data-kit="pro"]) .tf-sidebar
|
|
27077
|
-
|
|
27078
|
-
|
|
27079
|
-
|
|
27080
|
-
|
|
27081
|
-
|
|
27082
|
-
|
|
28548
|
+
:where([data-kit="pro"]) .tf-sidebar.attached {
|
|
28549
|
+
align-self: stretch;
|
|
28550
|
+
min-height: 100%;
|
|
28551
|
+
border-radius: 0;
|
|
28552
|
+
box-shadow: none;
|
|
28553
|
+
background: var(--sidebar);
|
|
28554
|
+
border-right: 1px solid var(--sidebar-border);
|
|
28555
|
+
}
|
|
28556
|
+
:where([data-kit="pro"]) .tf-sidebar-head {
|
|
28557
|
+
display: flex;
|
|
28558
|
+
align-items: center;
|
|
28559
|
+
gap: 8px;
|
|
28560
|
+
min-height: var(--density-control);
|
|
28561
|
+
padding: 0 4px;
|
|
28562
|
+
}
|
|
28563
|
+
:where([data-kit="pro"]) .tf-sidebar-body {
|
|
28564
|
+
display: flex;
|
|
28565
|
+
flex-direction: column;
|
|
28566
|
+
/* groups sit clearly apart; a label sits close to its own items */
|
|
28567
|
+
gap: 20px;
|
|
28568
|
+
flex: 1;
|
|
28569
|
+
min-height: 0;
|
|
28570
|
+
overflow-y: auto;
|
|
28571
|
+
}
|
|
28572
|
+
:where([data-kit="pro"]) .tf-sidebar ul {
|
|
28573
|
+
display: flex;
|
|
28574
|
+
flex-direction: column;
|
|
28575
|
+
gap: 2px;
|
|
28576
|
+
margin: 0;
|
|
28577
|
+
padding: 0;
|
|
28578
|
+
list-style: none;
|
|
28579
|
+
}
|
|
28580
|
+
:where([data-kit="pro"]) .tf-sidebar-grouphead {
|
|
28581
|
+
display: flex;
|
|
28582
|
+
align-items: center;
|
|
28583
|
+
gap: 4px;
|
|
28584
|
+
min-height: 24px;
|
|
28585
|
+
margin-bottom: 8px;
|
|
28586
|
+
padding: 0 4px 0 12px;
|
|
28587
|
+
}
|
|
28588
|
+
:where([data-kit="pro"]) .tf-sidebar-grouplabel {
|
|
28589
|
+
display: flex;
|
|
28590
|
+
align-items: center;
|
|
28591
|
+
gap: 4px;
|
|
28592
|
+
flex: 1;
|
|
28593
|
+
min-width: 0;
|
|
28594
|
+
padding: 0;
|
|
28595
|
+
border: 0;
|
|
28596
|
+
background: none;
|
|
28597
|
+
font: 500 11px/14px var(--font-sans);
|
|
28598
|
+
letter-spacing: 0.06em;
|
|
28599
|
+
text-transform: uppercase;
|
|
28600
|
+
text-align: left;
|
|
28601
|
+
color: var(--ink-muted);
|
|
28602
|
+
}
|
|
28603
|
+
:where([data-kit="pro"]) button.tf-sidebar-grouplabel {
|
|
28604
|
+
cursor: pointer;
|
|
28605
|
+
}
|
|
28606
|
+
:where([data-kit="pro"]) button.tf-sidebar-grouplabel:hover {
|
|
28607
|
+
color: var(--ink);
|
|
28608
|
+
}
|
|
28609
|
+
:where([data-kit="pro"]) button.tf-sidebar-grouplabel:focus-visible {
|
|
28610
|
+
outline: 2px solid var(--focus);
|
|
28611
|
+
outline-offset: 2px;
|
|
28612
|
+
}
|
|
28613
|
+
:where([data-kit="pro"]) .tf-sidebar-grouplabel[aria-expanded="false"] .tf-sidebar-chev {
|
|
28614
|
+
transform: rotate(-90deg);
|
|
28615
|
+
}
|
|
28616
|
+
:where([data-kit="pro"]) .tf-sidebar-groupaction {
|
|
28617
|
+
flex: none;
|
|
28618
|
+
margin-left: auto;
|
|
28619
|
+
}
|
|
28620
|
+
:where([data-kit="pro"]) .tf-sidebar-li {
|
|
28621
|
+
position: relative;
|
|
28622
|
+
}
|
|
28623
|
+
:where([data-kit="pro"]) .tf-sidebar-item {
|
|
28624
|
+
display: flex;
|
|
28625
|
+
align-items: center;
|
|
28626
|
+
gap: 12px;
|
|
28627
|
+
width: 100%;
|
|
28628
|
+
height: var(--density-control);
|
|
28629
|
+
padding: 0 12px;
|
|
28630
|
+
box-sizing: border-box;
|
|
28631
|
+
border: 0;
|
|
28632
|
+
border-radius: var(--radius-pill);
|
|
28633
|
+
background: transparent;
|
|
28634
|
+
color: var(--ink-muted);
|
|
28635
|
+
font: 500 13px/18px var(--font-sans);
|
|
28636
|
+
text-align: left;
|
|
28637
|
+
text-decoration: none;
|
|
28638
|
+
cursor: pointer;
|
|
28639
|
+
}
|
|
28640
|
+
/* Filter options (Sidebar as="aside"): a checkbox or radio mark, the label and a count */
|
|
28641
|
+
:where([data-kit="pro"]) .tf-sidebar-option {
|
|
28642
|
+
position: relative;
|
|
28643
|
+
}
|
|
28644
|
+
:where([data-kit="pro"]) .tf-sidebar-option.disabled {
|
|
28645
|
+
opacity: 0.45;
|
|
28646
|
+
cursor: default;
|
|
28647
|
+
}
|
|
28648
|
+
:where([data-kit="pro"]) .tf-sidebar-input {
|
|
28649
|
+
position: absolute;
|
|
28650
|
+
width: 1px;
|
|
28651
|
+
height: 1px;
|
|
28652
|
+
margin: 0;
|
|
28653
|
+
opacity: 0;
|
|
28654
|
+
pointer-events: none;
|
|
28655
|
+
}
|
|
28656
|
+
:where([data-kit="pro"]) .tf-sidebar-mark {
|
|
28657
|
+
display: grid;
|
|
28658
|
+
place-items: center;
|
|
28659
|
+
flex: none;
|
|
28660
|
+
width: 18px;
|
|
28661
|
+
height: 18px;
|
|
28662
|
+
box-sizing: border-box;
|
|
28663
|
+
border-radius: var(--radius-1);
|
|
28664
|
+
border: 1.5px solid var(--line-strong);
|
|
28665
|
+
background: var(--surface);
|
|
28666
|
+
color: var(--primary-foreground);
|
|
28667
|
+
transition:
|
|
28668
|
+
background-color var(--dur-fast) var(--ease-out),
|
|
28669
|
+
border-color var(--dur-fast) var(--ease-out);
|
|
28670
|
+
}
|
|
28671
|
+
:where([data-kit="pro"]) .tf-sidebar-mark.radio {
|
|
28672
|
+
border-radius: var(--radius-full);
|
|
28673
|
+
}
|
|
28674
|
+
:where([data-kit="pro"]) .tf-sidebar-mark svg {
|
|
28675
|
+
opacity: 0;
|
|
28676
|
+
}
|
|
28677
|
+
:where([data-kit="pro"]) .tf-sidebar-input:checked + .tf-sidebar-mark {
|
|
28678
|
+
background: var(--primary);
|
|
28679
|
+
border-color: var(--primary);
|
|
28680
|
+
}
|
|
28681
|
+
:where([data-kit="pro"]) .tf-sidebar-input:checked + .tf-sidebar-mark.radio {
|
|
28682
|
+
box-shadow: inset 0 0 0 3px var(--surface);
|
|
28683
|
+
}
|
|
28684
|
+
:where([data-kit="pro"]) .tf-sidebar-input:checked + .tf-sidebar-mark svg {
|
|
28685
|
+
opacity: 1;
|
|
28686
|
+
}
|
|
28687
|
+
:where([data-kit="pro"]) .tf-sidebar-input:focus-visible + .tf-sidebar-mark {
|
|
28688
|
+
outline: 2px solid var(--focus);
|
|
28689
|
+
outline-offset: 2px;
|
|
28690
|
+
}
|
|
28691
|
+
:where([data-kit="pro"]) .tf-sidebar-option:has(.tf-sidebar-input:checked) {
|
|
28692
|
+
color: var(--ink);
|
|
28693
|
+
}
|
|
28694
|
+
/* free content in a group (sliders, date fields, chips) */
|
|
28695
|
+
:where([data-kit="pro"]) .tf-sidebar-content {
|
|
28696
|
+
display: flex;
|
|
28697
|
+
flex-direction: column;
|
|
28698
|
+
gap: 12px;
|
|
28699
|
+
padding: 4px 12px 0;
|
|
28700
|
+
min-width: 0;
|
|
28701
|
+
}
|
|
28702
|
+
:where([data-kit="pro"]) .tf-sidebar-groupbody {
|
|
28703
|
+
display: flex;
|
|
28704
|
+
flex-direction: column;
|
|
28705
|
+
gap: 2px;
|
|
28706
|
+
min-width: 0;
|
|
28707
|
+
}
|
|
28708
|
+
:where([data-kit="pro"]) .tf-sidebar-item:hover,
|
|
28709
|
+
:where([data-kit="pro"]) .tf-sidebar-item.flying {
|
|
28710
|
+
background: var(--sidebar-accent);
|
|
28711
|
+
color: var(--ink);
|
|
28712
|
+
}
|
|
28713
|
+
:where([data-kit="pro"]) .tf-sidebar-item[aria-current="page"] {
|
|
28714
|
+
background: var(--sidebar-primary);
|
|
28715
|
+
color: var(--sidebar-primary-foreground);
|
|
28716
|
+
}
|
|
28717
|
+
:where([data-kit="pro"]) .tf-sidebar-item.has-current {
|
|
28718
|
+
color: var(--ink);
|
|
28719
|
+
}
|
|
28720
|
+
:where([data-kit="pro"]) .tf-sidebar-item:focus-visible {
|
|
28721
|
+
outline: 2px solid var(--focus);
|
|
28722
|
+
outline-offset: 2px;
|
|
28723
|
+
}
|
|
28724
|
+
:where([data-kit="pro"]) .tf-sidebar-item:disabled {
|
|
28725
|
+
opacity: 0.45;
|
|
28726
|
+
cursor: not-allowed;
|
|
28727
|
+
}
|
|
28728
|
+
:where([data-kit="pro"]) .tf-sidebar-item:disabled:hover {
|
|
28729
|
+
background: transparent;
|
|
28730
|
+
color: var(--ink-muted);
|
|
28731
|
+
}
|
|
28732
|
+
:where([data-kit="pro"]) .tf-sidebar-item.nested {
|
|
28733
|
+
height: var(--control-sm);
|
|
28734
|
+
padding-left: 40px;
|
|
28735
|
+
}
|
|
28736
|
+
:where([data-kit="pro"]) .tf-sidebar-sub {
|
|
28737
|
+
margin-top: 2px !important;
|
|
28738
|
+
}
|
|
28739
|
+
:where([data-kit="pro"]) .tf-sidebar-label {
|
|
28740
|
+
flex: 1;
|
|
28741
|
+
min-width: 0;
|
|
28742
|
+
overflow: hidden;
|
|
28743
|
+
text-overflow: ellipsis;
|
|
28744
|
+
white-space: nowrap;
|
|
28745
|
+
}
|
|
28746
|
+
:where([data-kit="pro"]) .tf-sidebar-chev {
|
|
28747
|
+
flex: none;
|
|
28748
|
+
transition: transform var(--dur-base) var(--ease-out);
|
|
28749
|
+
}
|
|
28750
|
+
:where([data-kit="pro"]) .tf-sidebar-item[aria-expanded="true"] .tf-sidebar-chev {
|
|
28751
|
+
transform: rotate(180deg);
|
|
28752
|
+
}
|
|
28753
|
+
:where([data-kit="pro"]) .tf-sidebar-ext {
|
|
28754
|
+
flex: none;
|
|
28755
|
+
opacity: 0.7;
|
|
28756
|
+
}
|
|
28757
|
+
:where([data-kit="pro"]) .tf-sidebar-count {
|
|
28758
|
+
flex: none;
|
|
28759
|
+
min-width: 20px;
|
|
28760
|
+
height: 20px;
|
|
28761
|
+
padding: 0 6px;
|
|
28762
|
+
box-sizing: border-box;
|
|
28763
|
+
border-radius: var(--radius-pill);
|
|
28764
|
+
background: var(--count);
|
|
28765
|
+
color: var(--on-count);
|
|
28766
|
+
font: 600 11px/20px var(--font-sans);
|
|
28767
|
+
text-align: center;
|
|
28768
|
+
}
|
|
28769
|
+
:where([data-kit="pro"]) .tf-sidebar-badge {
|
|
28770
|
+
flex: none;
|
|
28771
|
+
height: 20px;
|
|
28772
|
+
padding: 0 8px;
|
|
28773
|
+
box-sizing: border-box;
|
|
28774
|
+
border-radius: var(--radius-pill);
|
|
28775
|
+
background: var(--count);
|
|
28776
|
+
color: var(--on-count);
|
|
28777
|
+
font: 600 10px/20px var(--font-sans);
|
|
28778
|
+
letter-spacing: 0.04em;
|
|
28779
|
+
text-transform: uppercase;
|
|
28780
|
+
}
|
|
28781
|
+
:where([data-kit="pro"]) .tf-sidebar-dot {
|
|
28782
|
+
flex: none;
|
|
28783
|
+
width: 8px;
|
|
28784
|
+
height: 8px;
|
|
28785
|
+
border-radius: var(--radius-full);
|
|
28786
|
+
background: var(--count);
|
|
28787
|
+
}
|
|
28788
|
+
:where([data-kit="pro"]) .tf-sidebar-sr {
|
|
28789
|
+
position: absolute;
|
|
28790
|
+
width: 1px;
|
|
28791
|
+
height: 1px;
|
|
28792
|
+
overflow: hidden;
|
|
28793
|
+
clip-path: inset(50%);
|
|
28794
|
+
white-space: nowrap;
|
|
28795
|
+
}
|
|
28796
|
+
/* the "…" menu of an item shows on hover and focus */
|
|
28797
|
+
:where([data-kit="pro"]) .tf-sidebar-li.with-actions > .tf-sidebar-item {
|
|
28798
|
+
padding-right: 40px;
|
|
28799
|
+
}
|
|
28800
|
+
:where([data-kit="pro"]) .tf-sidebar-more {
|
|
28801
|
+
position: absolute;
|
|
28802
|
+
top: 4px;
|
|
28803
|
+
right: 4px;
|
|
28804
|
+
opacity: 0;
|
|
28805
|
+
transition: opacity var(--dur-fast) var(--ease-out);
|
|
28806
|
+
}
|
|
28807
|
+
:where([data-kit="pro"]) .tf-sidebar-li:hover > .tf-sidebar-more,
|
|
28808
|
+
:where([data-kit="pro"]) .tf-sidebar-more:focus-visible,
|
|
28809
|
+
:where([data-kit="pro"]) .tf-sidebar-more[aria-expanded="true"] {
|
|
28810
|
+
opacity: 1;
|
|
28811
|
+
}
|
|
28812
|
+
:where([data-kit="pro"]) .tf-sidebar-foot {
|
|
28813
|
+
display: flex;
|
|
28814
|
+
align-items: center;
|
|
28815
|
+
gap: 8px;
|
|
28816
|
+
padding-top: 12px;
|
|
28817
|
+
border-top: 1px solid var(--sidebar-border);
|
|
28818
|
+
}
|
|
28819
|
+
:where([data-kit="pro"]) .tf-sidebar-foot > :not(.tf-sidebar-toggle) {
|
|
28820
|
+
flex: 1;
|
|
28821
|
+
min-width: 0;
|
|
28822
|
+
}
|
|
28823
|
+
:where([data-kit="pro"]) .tf-sidebar-toggle {
|
|
28824
|
+
flex: none;
|
|
28825
|
+
margin-left: auto;
|
|
28826
|
+
}
|
|
28827
|
+
:where([data-kit="pro"]) .tf-sidebar-head .tf-pop-anchor,
|
|
28828
|
+
:where([data-kit="pro"]) .tf-sidebar-foot .tf-pop-anchor {
|
|
28829
|
+
display: block;
|
|
28830
|
+
min-width: 0;
|
|
28831
|
+
}
|
|
28832
|
+
:where([data-kit="pro"]) .tf-sidebar-head .tf-wssw {
|
|
28833
|
+
width: 100%;
|
|
28834
|
+
}
|
|
28835
|
+
:where([data-kit="pro"]) .tf-sidebar-head .tf-wssw .tf-option-text {
|
|
28836
|
+
flex: 1;
|
|
28837
|
+
min-width: 0;
|
|
28838
|
+
}
|
|
28839
|
+
|
|
28840
|
+
/* collapsed: icons only; labels stay the accessible names, tooltips and flyouts show them */
|
|
28841
|
+
:where([data-kit="pro"]) .tf-sidebar.collapsed .tf-sidebar-body {
|
|
28842
|
+
gap: 12px;
|
|
28843
|
+
}
|
|
28844
|
+
:where([data-kit="pro"]) .tf-sidebar.collapsed .tf-sidebar-label,
|
|
28845
|
+
:where([data-kit="pro"]) .tf-sidebar.collapsed .tf-sidebar-chev,
|
|
28846
|
+
:where([data-kit="pro"]) .tf-sidebar.collapsed .tf-sidebar-ext,
|
|
28847
|
+
:where([data-kit="pro"]) .tf-sidebar.collapsed .tf-sidebar-grouphead {
|
|
28848
|
+
position: absolute;
|
|
28849
|
+
width: 1px;
|
|
28850
|
+
height: 1px;
|
|
28851
|
+
overflow: hidden;
|
|
28852
|
+
clip-path: inset(50%);
|
|
28853
|
+
white-space: nowrap;
|
|
28854
|
+
}
|
|
28855
|
+
:where([data-kit="pro"]) .tf-sidebar.collapsed .tf-sidebar-group + .tf-sidebar-group {
|
|
28856
|
+
padding-top: 12px;
|
|
28857
|
+
border-top: 1px solid var(--sidebar-border);
|
|
28858
|
+
}
|
|
28859
|
+
:where([data-kit="pro"]) .tf-sidebar.collapsed .tf-sidebar-item {
|
|
28860
|
+
position: relative;
|
|
28861
|
+
justify-content: center;
|
|
28862
|
+
padding: 0;
|
|
28863
|
+
}
|
|
28864
|
+
:where([data-kit="pro"]) .tf-sidebar.collapsed .tf-sidebar-item.has-current {
|
|
28865
|
+
background: var(--sidebar-accent);
|
|
28866
|
+
}
|
|
28867
|
+
:where([data-kit="pro"]) .tf-sidebar.collapsed .tf-sidebar-count {
|
|
28868
|
+
position: absolute;
|
|
28869
|
+
top: -2px;
|
|
28870
|
+
right: -2px;
|
|
28871
|
+
min-width: 16px;
|
|
28872
|
+
height: 16px;
|
|
28873
|
+
padding: 0 4px;
|
|
28874
|
+
font-size: 10px;
|
|
28875
|
+
line-height: 16px;
|
|
28876
|
+
}
|
|
28877
|
+
:where([data-kit="pro"]) .tf-sidebar.collapsed .tf-sidebar-dot,
|
|
28878
|
+
:where([data-kit="pro"]) .tf-sidebar.collapsed .tf-sidebar-badge {
|
|
28879
|
+
position: absolute;
|
|
28880
|
+
top: 6px;
|
|
28881
|
+
right: 8px;
|
|
28882
|
+
width: 8px;
|
|
28883
|
+
height: 8px;
|
|
28884
|
+
padding: 0;
|
|
28885
|
+
font-size: 0;
|
|
28886
|
+
}
|
|
28887
|
+
:where([data-kit="pro"]) .tf-sidebar.collapsed .tf-sidebar-head {
|
|
28888
|
+
justify-content: center;
|
|
28889
|
+
padding: 0;
|
|
28890
|
+
}
|
|
28891
|
+
:where([data-kit="pro"]) .tf-sidebar.collapsed .tf-sidebar-foot {
|
|
28892
|
+
flex-direction: column;
|
|
28893
|
+
}
|
|
28894
|
+
:where([data-kit="pro"]) .tf-sidebar.collapsed .tf-sidebar-foot > :not(.tf-sidebar-toggle) {
|
|
28895
|
+
flex: none;
|
|
28896
|
+
}
|
|
28897
|
+
:where([data-kit="pro"]) .tf-sidebar.collapsed .tf-sidebar-toggle {
|
|
28898
|
+
margin-left: 0;
|
|
28899
|
+
}
|
|
28900
|
+
|
|
28901
|
+
/* tooltips, flyouts and item menus float in the portal, so the scrolling body does not clip them */
|
|
28902
|
+
:where([data-kit="pro"]) .tf-sidebar-layer {
|
|
28903
|
+
position: fixed;
|
|
28904
|
+
z-index: var(--z-palette);
|
|
28905
|
+
}
|
|
28906
|
+
:where([data-kit="pro"]) .tf-sidebar-tip {
|
|
28907
|
+
display: inline-flex;
|
|
28908
|
+
align-items: center;
|
|
28909
|
+
gap: 8px;
|
|
28910
|
+
padding: 4px 8px;
|
|
28911
|
+
border-radius: var(--radius-sm);
|
|
28912
|
+
background: var(--frame);
|
|
28913
|
+
color: var(--on-frame);
|
|
28914
|
+
font: 500 12px/16px var(--font-sans);
|
|
28915
|
+
white-space: nowrap;
|
|
28916
|
+
pointer-events: none;
|
|
28917
|
+
animation: tf-pro-fade var(--dur-fast) var(--ease-out) both;
|
|
28918
|
+
}
|
|
28919
|
+
:where([data-kit="pro"]) .tf-sidebar-tipcount {
|
|
28920
|
+
color: var(--on-frame-muted);
|
|
28921
|
+
}
|
|
28922
|
+
:where([data-kit="pro"]) .tf-sidebar-flyout {
|
|
28923
|
+
min-width: 200px;
|
|
28924
|
+
padding: 6px;
|
|
28925
|
+
border-radius: var(--radius-md);
|
|
28926
|
+
background: var(--surface);
|
|
28927
|
+
color: var(--ink);
|
|
28928
|
+
box-shadow: var(--shadow-float), 0 0 0 var(--line-width) var(--line);
|
|
28929
|
+
animation: tf-pro-fade var(--dur-fast) var(--ease-out) both;
|
|
27083
28930
|
}
|
|
27084
|
-
:where([data-kit="pro"]) .tf-sidebar ul {
|
|
28931
|
+
:where([data-kit="pro"]) .tf-sidebar-flyout ul {
|
|
27085
28932
|
display: flex;
|
|
27086
28933
|
flex-direction: column;
|
|
27087
28934
|
gap: 2px;
|
|
@@ -27089,100 +28936,211 @@
|
|
|
27089
28936
|
padding: 0;
|
|
27090
28937
|
list-style: none;
|
|
27091
28938
|
}
|
|
27092
|
-
:where([data-kit="pro"]) .tf-sidebar-
|
|
27093
|
-
padding:
|
|
28939
|
+
:where([data-kit="pro"]) .tf-sidebar-flytitle {
|
|
28940
|
+
padding: 6px 12px 8px;
|
|
27094
28941
|
font: 500 11px/14px var(--font-sans);
|
|
27095
28942
|
letter-spacing: 0.06em;
|
|
27096
28943
|
text-transform: uppercase;
|
|
27097
28944
|
color: var(--ink-muted);
|
|
27098
28945
|
}
|
|
27099
|
-
:where([data-kit="pro"]) .tf-sidebar-item {
|
|
28946
|
+
:where([data-kit="pro"]) .tf-sidebar-flyout .tf-sidebar-item.nested {
|
|
28947
|
+
padding-left: 12px;
|
|
28948
|
+
}
|
|
28949
|
+
|
|
28950
|
+
/* on the AppShell frame */
|
|
28951
|
+
:where([data-kit="pro"]) .tf-sidebar.shell {
|
|
28952
|
+
align-self: stretch;
|
|
28953
|
+
padding: 16px 8px 8px;
|
|
28954
|
+
border-radius: 0;
|
|
28955
|
+
background: transparent;
|
|
28956
|
+
box-shadow: none;
|
|
28957
|
+
color: var(--on-frame);
|
|
28958
|
+
}
|
|
28959
|
+
:where([data-kit="pro"]) .tf-sidebar.shell .tf-sidebar-item,
|
|
28960
|
+
:where([data-kit="pro"]) .tf-sidebar.shell .tf-sidebar-grouplabel {
|
|
28961
|
+
color: var(--on-frame-muted);
|
|
28962
|
+
}
|
|
28963
|
+
:where([data-kit="pro"]) .tf-sidebar.shell .tf-sidebar-item:hover,
|
|
28964
|
+
:where([data-kit="pro"]) .tf-sidebar.shell .tf-sidebar-item.flying,
|
|
28965
|
+
:where([data-kit="pro"]) .tf-sidebar.shell.collapsed .tf-sidebar-item.has-current {
|
|
28966
|
+
background: var(--frame-hover);
|
|
28967
|
+
color: var(--on-frame);
|
|
28968
|
+
}
|
|
28969
|
+
:where([data-kit="pro"]) .tf-sidebar.shell .tf-sidebar-item.has-current,
|
|
28970
|
+
:where([data-kit="pro"]) .tf-sidebar.shell button.tf-sidebar-grouplabel:hover {
|
|
28971
|
+
color: var(--on-frame);
|
|
28972
|
+
}
|
|
28973
|
+
:where([data-kit="pro"]) .tf-sidebar.shell .tf-sidebar-item[aria-current="page"] {
|
|
28974
|
+
background: var(--frame-active);
|
|
28975
|
+
color: var(--on-frame);
|
|
28976
|
+
}
|
|
28977
|
+
:where([data-kit="pro"]) .tf-sidebar.shell .tf-sidebar-item:disabled:hover {
|
|
28978
|
+
background: transparent;
|
|
28979
|
+
color: var(--on-frame-muted);
|
|
28980
|
+
}
|
|
28981
|
+
:where([data-kit="pro"]) .tf-sidebar.shell .tf-sidebar-foot,
|
|
28982
|
+
:where([data-kit="pro"]) .tf-sidebar.shell.collapsed .tf-sidebar-group + .tf-sidebar-group {
|
|
28983
|
+
border-color: var(--frame-hover);
|
|
28984
|
+
}
|
|
28985
|
+
:where([data-kit="pro"]) .tf-sidebar.shell .tf-iconbtn-ghost {
|
|
28986
|
+
color: var(--on-frame-muted);
|
|
28987
|
+
}
|
|
28988
|
+
:where([data-kit="pro"]) .tf-sidebar.shell .tf-iconbtn-ghost:hover {
|
|
28989
|
+
background: var(--frame-hover);
|
|
28990
|
+
color: var(--on-frame);
|
|
28991
|
+
}
|
|
28992
|
+
:where([data-kit="pro"]) .tf-sidebar.shell .tf-sidebar-head {
|
|
28993
|
+
min-height: 44px;
|
|
28994
|
+
}
|
|
28995
|
+
|
|
28996
|
+
/* UserMenu: the signed-in person, opening their account menu */
|
|
28997
|
+
:where([data-kit="pro"]) .tf-usermenu {
|
|
27100
28998
|
display: flex;
|
|
27101
28999
|
align-items: center;
|
|
27102
|
-
gap:
|
|
29000
|
+
gap: 10px;
|
|
27103
29001
|
width: 100%;
|
|
27104
|
-
height:
|
|
27105
|
-
padding:
|
|
29002
|
+
min-height: 44px;
|
|
29003
|
+
padding: 4px 8px 4px 4px;
|
|
29004
|
+
box-sizing: border-box;
|
|
27106
29005
|
border: 0;
|
|
27107
29006
|
border-radius: var(--radius-pill);
|
|
27108
29007
|
background: transparent;
|
|
27109
|
-
color: var(--ink
|
|
27110
|
-
font:
|
|
29008
|
+
color: var(--ink);
|
|
29009
|
+
font: inherit;
|
|
27111
29010
|
text-align: left;
|
|
27112
29011
|
cursor: pointer;
|
|
27113
29012
|
}
|
|
27114
|
-
:where([data-kit="pro"]) .tf-
|
|
27115
|
-
|
|
27116
|
-
|
|
27117
|
-
}
|
|
27118
|
-
:where([data-kit="pro"]) .tf-sidebar-item[aria-current="page"] {
|
|
27119
|
-
background: var(--sidebar-primary);
|
|
27120
|
-
color: var(--sidebar-primary-foreground);
|
|
29013
|
+
:where([data-kit="pro"]) .tf-usermenu.compact {
|
|
29014
|
+
width: auto;
|
|
29015
|
+
padding: 4px;
|
|
27121
29016
|
}
|
|
27122
|
-
:where([data-kit="pro"]) .tf-
|
|
27123
|
-
|
|
29017
|
+
:where([data-kit="pro"]) .tf-usermenu:hover,
|
|
29018
|
+
:where([data-kit="pro"]) .tf-usermenu[aria-expanded="true"] {
|
|
29019
|
+
background: var(--sidebar-accent);
|
|
27124
29020
|
}
|
|
27125
|
-
:where([data-kit="pro"]) .tf-
|
|
29021
|
+
:where([data-kit="pro"]) .tf-usermenu:focus-visible {
|
|
27126
29022
|
outline: 2px solid var(--focus);
|
|
27127
29023
|
outline-offset: 2px;
|
|
27128
29024
|
}
|
|
27129
|
-
:where([data-kit="pro"]) .tf-
|
|
27130
|
-
|
|
27131
|
-
|
|
29025
|
+
:where([data-kit="pro"]) .tf-usermenu-avatar {
|
|
29026
|
+
display: inline-flex;
|
|
29027
|
+
flex: none;
|
|
27132
29028
|
}
|
|
27133
|
-
:where([data-kit="pro"]) .tf-
|
|
29029
|
+
:where([data-kit="pro"]) .tf-usermenu-text {
|
|
29030
|
+
display: flex;
|
|
29031
|
+
flex-direction: column;
|
|
27134
29032
|
flex: 1;
|
|
27135
29033
|
min-width: 0;
|
|
29034
|
+
}
|
|
29035
|
+
:where([data-kit="pro"]) .tf-usermenu-name {
|
|
29036
|
+
font: 500 13px/18px var(--font-sans);
|
|
27136
29037
|
overflow: hidden;
|
|
27137
29038
|
text-overflow: ellipsis;
|
|
27138
29039
|
white-space: nowrap;
|
|
27139
29040
|
}
|
|
27140
|
-
:where([data-kit="pro"]) .tf-
|
|
27141
|
-
|
|
27142
|
-
|
|
27143
|
-
:where([data-kit="pro"]) .tf-sidebar-item[aria-expanded="true"] .tf-sidebar-chev {
|
|
27144
|
-
transform: rotate(180deg);
|
|
27145
|
-
}
|
|
27146
|
-
:where([data-kit="pro"]) .tf-sidebar-foot {
|
|
27147
|
-
display: flex;
|
|
27148
|
-
align-items: center;
|
|
27149
|
-
justify-content: space-between;
|
|
27150
|
-
gap: 8px;
|
|
27151
|
-
padding-top: 12px;
|
|
27152
|
-
border-top: 1px solid var(--sidebar-border);
|
|
27153
|
-
}
|
|
27154
|
-
:where([data-kit="pro"]) .tf-sidebar.collapsed .tf-sidebar-label,
|
|
27155
|
-
:where([data-kit="pro"]) .tf-sidebar.collapsed .tf-sidebar-chev,
|
|
27156
|
-
:where([data-kit="pro"]) .tf-sidebar.collapsed .tf-sidebar-grouplabel {
|
|
27157
|
-
position: absolute;
|
|
27158
|
-
width: 1px;
|
|
27159
|
-
height: 1px;
|
|
29041
|
+
:where([data-kit="pro"]) .tf-usermenu-mail {
|
|
29042
|
+
font: 500 11px/14px var(--font-sans);
|
|
29043
|
+
color: var(--ink-muted);
|
|
27160
29044
|
overflow: hidden;
|
|
27161
|
-
|
|
29045
|
+
text-overflow: ellipsis;
|
|
27162
29046
|
white-space: nowrap;
|
|
27163
29047
|
}
|
|
27164
|
-
:where([data-kit="pro"]) .tf-sidebar.
|
|
27165
|
-
|
|
27166
|
-
justify-content: center;
|
|
27167
|
-
padding: 0;
|
|
29048
|
+
:where([data-kit="pro"]) .tf-sidebar.shell .tf-usermenu {
|
|
29049
|
+
color: var(--on-frame);
|
|
27168
29050
|
}
|
|
27169
|
-
:where([data-kit="pro"]) .tf-sidebar.
|
|
27170
|
-
|
|
27171
|
-
|
|
27172
|
-
right: -2px;
|
|
27173
|
-
min-width: 16px;
|
|
27174
|
-
height: 16px;
|
|
27175
|
-
padding: 0 4px;
|
|
27176
|
-
font-size: 10px;
|
|
27177
|
-
line-height: 16px;
|
|
29051
|
+
:where([data-kit="pro"]) .tf-sidebar.shell .tf-usermenu:hover,
|
|
29052
|
+
:where([data-kit="pro"]) .tf-sidebar.shell .tf-usermenu[aria-expanded="true"] {
|
|
29053
|
+
background: var(--frame-hover);
|
|
27178
29054
|
}
|
|
27179
|
-
:where([data-kit="pro"]) .tf-sidebar.
|
|
27180
|
-
|
|
29055
|
+
:where([data-kit="pro"]) .tf-sidebar.shell .tf-usermenu-mail {
|
|
29056
|
+
color: var(--on-frame-muted);
|
|
29057
|
+
}
|
|
29058
|
+
:where([data-kit="pro"]) .tf-wssw.compact {
|
|
29059
|
+
padding: 4px;
|
|
29060
|
+
}
|
|
29061
|
+
|
|
29062
|
+
/* the bar that opens the sidebar as a drawer on phones */
|
|
29063
|
+
:where([data-kit="pro"]) .tf-sidebar-bar,
|
|
29064
|
+
:where([data-kit="pro"]) .tf-sidebar-scrim {
|
|
29065
|
+
display: none;
|
|
27181
29066
|
}
|
|
27182
29067
|
@media (max-width: 760px) {
|
|
27183
|
-
:where([data-kit="pro"]) .tf-sidebar {
|
|
27184
|
-
|
|
29068
|
+
:where([data-kit="pro"]) .tf-sidebar-bar {
|
|
29069
|
+
display: flex;
|
|
29070
|
+
align-items: center;
|
|
29071
|
+
gap: 8px;
|
|
29072
|
+
min-height: 52px;
|
|
29073
|
+
padding: 6px 12px 6px 6px;
|
|
29074
|
+
box-sizing: border-box;
|
|
29075
|
+
border-radius: var(--radius-lg);
|
|
29076
|
+
background: var(--surface);
|
|
29077
|
+
box-shadow: 0 0 0 var(--line-width) var(--line);
|
|
29078
|
+
color: var(--ink);
|
|
29079
|
+
}
|
|
29080
|
+
:where([data-kit="pro"]) .tf-sidebar-bar.attached {
|
|
29081
|
+
border-radius: 0;
|
|
29082
|
+
box-shadow: none;
|
|
29083
|
+
background: var(--sidebar);
|
|
29084
|
+
border-bottom: 1px solid var(--sidebar-border);
|
|
29085
|
+
}
|
|
29086
|
+
:where([data-kit="pro"]) .tf-sidebar-bar.shell {
|
|
29087
|
+
min-height: 56px;
|
|
29088
|
+
padding: 8px 8px 8px 0;
|
|
29089
|
+
border-radius: 0;
|
|
29090
|
+
box-shadow: none;
|
|
29091
|
+
background: transparent;
|
|
29092
|
+
color: var(--on-frame);
|
|
29093
|
+
}
|
|
29094
|
+
:where([data-kit="pro"]) .tf-sidebar-bar.shell .tf-iconbtn-ghost {
|
|
29095
|
+
color: var(--on-frame);
|
|
29096
|
+
}
|
|
29097
|
+
:where([data-kit="pro"]) .tf-sidebar-bar > :not(.tf-iconbtn) {
|
|
29098
|
+
min-width: 0;
|
|
29099
|
+
}
|
|
29100
|
+
:where([data-kit="pro"]) .tf-sidebar,
|
|
29101
|
+
:where([data-kit="pro"]) .tf-sidebar.attached,
|
|
29102
|
+
:where([data-kit="pro"]) .tf-sidebar.shell {
|
|
29103
|
+
position: fixed;
|
|
29104
|
+
top: 0;
|
|
29105
|
+
bottom: 0;
|
|
29106
|
+
left: 0;
|
|
29107
|
+
z-index: var(--z-overlay);
|
|
29108
|
+
width: min(300px, 86vw);
|
|
29109
|
+
min-height: 0;
|
|
29110
|
+
padding: 12px;
|
|
29111
|
+
border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
|
|
29112
|
+
box-shadow: var(--shadow-float), 0 0 0 var(--line-width) var(--line);
|
|
29113
|
+
transform: translateX(-105%);
|
|
29114
|
+
visibility: hidden;
|
|
29115
|
+
transition:
|
|
29116
|
+
transform var(--dur-base) var(--ease-out),
|
|
29117
|
+
visibility 0s linear var(--dur-base);
|
|
29118
|
+
}
|
|
29119
|
+
:where([data-kit="pro"]) .tf-sidebar.shell {
|
|
29120
|
+
background: var(--frame);
|
|
29121
|
+
}
|
|
29122
|
+
:where([data-kit="pro"]) .tf-sidebar.attached {
|
|
29123
|
+
background: var(--sidebar);
|
|
29124
|
+
}
|
|
29125
|
+
:where([data-kit="pro"]) .tf-sidebar.open {
|
|
29126
|
+
transform: none;
|
|
29127
|
+
visibility: visible;
|
|
29128
|
+
transition: transform var(--dur-base) var(--ease-out);
|
|
29129
|
+
}
|
|
29130
|
+
:where([data-kit="pro"]) .tf-sidebar-toggle {
|
|
29131
|
+
display: none;
|
|
27185
29132
|
}
|
|
29133
|
+
:where([data-kit="pro"]) .tf-sidebar-scrim {
|
|
29134
|
+
display: block;
|
|
29135
|
+
position: fixed;
|
|
29136
|
+
inset: 0;
|
|
29137
|
+
z-index: var(--z-overlay);
|
|
29138
|
+
background: var(--scrim-strong);
|
|
29139
|
+
animation: tf-pro-fade var(--dur-base) var(--ease-out) both;
|
|
29140
|
+
}
|
|
29141
|
+
}
|
|
29142
|
+
|
|
29143
|
+
@media (max-width: 760px) {
|
|
27186
29144
|
:where([data-kit="pro"]) .tf-navmenu-panel.with-feature {
|
|
27187
29145
|
grid-template-columns: minmax(0, 1fr);
|
|
27188
29146
|
}
|
|
@@ -27365,7 +29323,7 @@
|
|
|
27365
29323
|
/* Tablet: asides move below the main column, nav labels and the page nav shrink to icons */
|
|
27366
29324
|
@container tf-shell (max-width: 1180px) {
|
|
27367
29325
|
:where([data-kit="pro"]) .tf-sheet:not(.tf-sheet-2):not(.tf-sheet-nav) {
|
|
27368
|
-
grid-template-columns:
|
|
29326
|
+
grid-template-columns: auto minmax(0, 1fr);
|
|
27369
29327
|
}
|
|
27370
29328
|
:where([data-kit="pro"]) .tf-sheet-nav.tf-sheet-aside {
|
|
27371
29329
|
grid-template-columns: 208px minmax(0, 1fr);
|
|
@@ -27373,6 +29331,13 @@
|
|
|
27373
29331
|
:where([data-kit="pro"]) .tf-sheet > .tf-main ~ :not(.tf-dock-float) {
|
|
27374
29332
|
grid-column: 2;
|
|
27375
29333
|
}
|
|
29334
|
+
/* with the sidebar there is no rail column: asides go below the main column */
|
|
29335
|
+
:where([data-kit="pro"]) .tf-sheet.tf-sheet-norail:not(.tf-sheet-2) {
|
|
29336
|
+
grid-template-columns: minmax(0, 1fr);
|
|
29337
|
+
}
|
|
29338
|
+
:where([data-kit="pro"]) .tf-sheet-norail > .tf-main ~ :not(.tf-dock-float) {
|
|
29339
|
+
grid-column: 1;
|
|
29340
|
+
}
|
|
27376
29341
|
/* the dock floats over the end of the sheet, not of the main column (asides follow it) */
|
|
27377
29342
|
:where([data-kit="pro"]) .tf-main-dock {
|
|
27378
29343
|
padding-bottom: 0;
|
|
@@ -27403,7 +29368,7 @@
|
|
|
27403
29368
|
@container tf-shell (max-width: 1040px) {
|
|
27404
29369
|
:where([data-kit="pro"]) .tf-sheet-nav,
|
|
27405
29370
|
:where([data-kit="pro"]) .tf-sheet-nav.tf-sheet-aside {
|
|
27406
|
-
grid-template-columns:
|
|
29371
|
+
grid-template-columns: auto minmax(0, 1fr);
|
|
27407
29372
|
}
|
|
27408
29373
|
:where([data-kit="pro"]) .tf-subnav-eyebrow {
|
|
27409
29374
|
display: none;
|
|
@@ -27500,6 +29465,21 @@
|
|
|
27500
29465
|
:where([data-kit="pro"]) .tf-rail-group {
|
|
27501
29466
|
flex-direction: row;
|
|
27502
29467
|
}
|
|
29468
|
+
/* on phones the rail is a row of icons, expanded or not */
|
|
29469
|
+
:where([data-kit="pro"]) .tf-rail.expanded {
|
|
29470
|
+
width: auto;
|
|
29471
|
+
}
|
|
29472
|
+
:where([data-kit="pro"]) .tf-rail.expanded .tf-rail-btn {
|
|
29473
|
+
display: grid;
|
|
29474
|
+
width: 40px;
|
|
29475
|
+
padding: 0;
|
|
29476
|
+
}
|
|
29477
|
+
:where([data-kit="pro"]) .tf-rail.expanded .tf-rail-label {
|
|
29478
|
+
display: none;
|
|
29479
|
+
}
|
|
29480
|
+
:where([data-kit="pro"]) .tf-rail.expanded .tf-dotcount {
|
|
29481
|
+
position: absolute;
|
|
29482
|
+
}
|
|
27503
29483
|
:where([data-kit="pro"]) .tf-main {
|
|
27504
29484
|
gap: var(--space-4);
|
|
27505
29485
|
}
|
|
@@ -27591,6 +29571,56 @@
|
|
|
27591
29571
|
max-width: 100%;
|
|
27592
29572
|
overflow-x: auto;
|
|
27593
29573
|
}
|
|
29574
|
+
/* Table stack: narrow boxes show every row as a card, each cell with its column label */
|
|
29575
|
+
:where([data-kit="pro"]) .tf-table-stackbox {
|
|
29576
|
+
container: tf-table / inline-size;
|
|
29577
|
+
}
|
|
29578
|
+
@container tf-table (max-width: 600px) {
|
|
29579
|
+
:where([data-kit="pro"]) .tf-table.stack thead {
|
|
29580
|
+
position: absolute;
|
|
29581
|
+
width: 1px;
|
|
29582
|
+
height: 1px;
|
|
29583
|
+
overflow: hidden;
|
|
29584
|
+
clip-path: inset(50%);
|
|
29585
|
+
}
|
|
29586
|
+
:where([data-kit="pro"]) .tf-table.stack,
|
|
29587
|
+
:where([data-kit="pro"]) .tf-table.stack tbody,
|
|
29588
|
+
:where([data-kit="pro"]) .tf-table.stack tr {
|
|
29589
|
+
display: block;
|
|
29590
|
+
}
|
|
29591
|
+
:where([data-kit="pro"]) .tf-table.stack tr {
|
|
29592
|
+
padding: 8px 0;
|
|
29593
|
+
border-bottom: 1px solid var(--line);
|
|
29594
|
+
}
|
|
29595
|
+
:where([data-kit="pro"]) .tf-table.stack tr:last-child {
|
|
29596
|
+
border-bottom: 0;
|
|
29597
|
+
}
|
|
29598
|
+
:where([data-kit="pro"]) .tf-table.stack td {
|
|
29599
|
+
display: flex;
|
|
29600
|
+
align-items: center;
|
|
29601
|
+
justify-content: space-between;
|
|
29602
|
+
gap: 16px;
|
|
29603
|
+
height: auto;
|
|
29604
|
+
min-height: var(--control-sm);
|
|
29605
|
+
padding: 4px 0;
|
|
29606
|
+
border-bottom: 0;
|
|
29607
|
+
text-align: right;
|
|
29608
|
+
white-space: normal;
|
|
29609
|
+
}
|
|
29610
|
+
:where([data-kit="pro"]) .tf-table.stack td::before {
|
|
29611
|
+
content: attr(data-label);
|
|
29612
|
+
flex: none;
|
|
29613
|
+
max-width: 50%;
|
|
29614
|
+
text-align: left;
|
|
29615
|
+
font: 500 11px/14px var(--font-sans);
|
|
29616
|
+
letter-spacing: 0.06em;
|
|
29617
|
+
text-transform: uppercase;
|
|
29618
|
+
color: var(--ink-muted);
|
|
29619
|
+
}
|
|
29620
|
+
:where([data-kit="pro"]) .tf-table.stack tbody tr:hover td {
|
|
29621
|
+
background: transparent;
|
|
29622
|
+
}
|
|
29623
|
+
}
|
|
27594
29624
|
|
|
27595
29625
|
/* ── Phone: components ── */
|
|
27596
29626
|
@media (max-width: 760px) {
|
|
@@ -27625,15 +29655,15 @@
|
|
|
27625
29655
|
height: 52px;
|
|
27626
29656
|
}
|
|
27627
29657
|
|
|
27628
|
-
/* segmented controls and tabs scroll sideways when the labels do not fit */
|
|
27629
|
-
:where([data-kit="pro"]) .tf-seg,
|
|
27630
|
-
:where([data-kit="pro"]) .tf-tabs {
|
|
29658
|
+
/* segmented controls and tabs scroll sideways when the labels do not fit (block ones shrink) */
|
|
29659
|
+
:where([data-kit="pro"]) .tf-seg:not(.block),
|
|
29660
|
+
:where([data-kit="pro"]) .tf-tabs:not(.tf-tabs-block) {
|
|
27631
29661
|
max-width: 100%;
|
|
27632
29662
|
overflow-x: auto;
|
|
27633
29663
|
scrollbar-width: none;
|
|
27634
29664
|
}
|
|
27635
|
-
:where([data-kit="pro"]) .tf-seg-item,
|
|
27636
|
-
:where([data-kit="pro"]) .tf-tab {
|
|
29665
|
+
:where([data-kit="pro"]) .tf-seg:not(.block) .tf-seg-item,
|
|
29666
|
+
:where([data-kit="pro"]) .tf-tabs:not(.tf-tabs-block) .tf-tab {
|
|
27637
29667
|
flex: none;
|
|
27638
29668
|
}
|
|
27639
29669
|
:where([data-kit="pro"]) .tf-seg,
|
|
@@ -27782,6 +29812,40 @@
|
|
|
27782
29812
|
}
|
|
27783
29813
|
}
|
|
27784
29814
|
|
|
29815
|
+
/* AppShell with a sidebar on phones: the sidebar's bar on top of the frame, the sheet below */
|
|
29816
|
+
@media (max-width: 760px) {
|
|
29817
|
+
:where([data-kit="pro"]) .tf-shell.tf-shell-sidebar {
|
|
29818
|
+
grid-template-columns: minmax(0, 1fr);
|
|
29819
|
+
padding: 0 8px 8px;
|
|
29820
|
+
}
|
|
29821
|
+
}
|
|
29822
|
+
|
|
29823
|
+
/* Fluid at every width: segmented controls, tabs and toggle groups never push past their
|
|
29824
|
+
container. When space runs short the items shrink and their labels end in an ellipsis. */
|
|
29825
|
+
:where([data-kit="pro"]) .tf-tabs {
|
|
29826
|
+
max-width: 100%;
|
|
29827
|
+
box-sizing: border-box;
|
|
29828
|
+
}
|
|
29829
|
+
:where([data-kit="pro"]) .tf-seg-item,
|
|
29830
|
+
:where([data-kit="pro"]) .tf-tab,
|
|
29831
|
+
:where([data-kit="pro"]) .tf-togglegroup .tf-toggle {
|
|
29832
|
+
min-width: 0;
|
|
29833
|
+
}
|
|
29834
|
+
:where([data-kit="pro"]) .tf-seg-label,
|
|
29835
|
+
:where([data-kit="pro"]) .tf-tab,
|
|
29836
|
+
:where([data-kit="pro"]) .tf-toggle-label {
|
|
29837
|
+
overflow: hidden;
|
|
29838
|
+
text-overflow: ellipsis;
|
|
29839
|
+
white-space: nowrap;
|
|
29840
|
+
}
|
|
29841
|
+
|
|
29842
|
+
/* key hints mean nothing on touch screens */
|
|
29843
|
+
@media (pointer: coarse) {
|
|
29844
|
+
:where([data-kit="pro"]) .tf-search .tf-kbd {
|
|
29845
|
+
display: none;
|
|
29846
|
+
}
|
|
29847
|
+
}
|
|
29848
|
+
|
|
27785
29849
|
/* 07-polish.css */
|
|
27786
29850
|
/* Generated by scripts/pro-css.ts from packages/halo/css. Do not edit; the Pro look lives in 90-pro-look.css. */
|
|
27787
29851
|
/* ───────────── Polish ─────────────
|
|
@@ -28307,11 +30371,13 @@
|
|
|
28307
30371
|
inset: 0;
|
|
28308
30372
|
z-index: 1;
|
|
28309
30373
|
display: grid;
|
|
28310
|
-
grid-template-columns:
|
|
30374
|
+
grid-template-columns:
|
|
30375
|
+
minmax(0, var(--floating-start, 320px)) minmax(0, 1fr)
|
|
30376
|
+
minmax(0, var(--floating-end, 340px));
|
|
28311
30377
|
grid-template-rows: auto minmax(0, 1fr) auto;
|
|
28312
30378
|
grid-template-areas:
|
|
28313
30379
|
"top top top"
|
|
28314
|
-
"start
|
|
30380
|
+
"start controls end"
|
|
28315
30381
|
"bottom bottom bottom";
|
|
28316
30382
|
gap: var(--space-4);
|
|
28317
30383
|
padding: var(--space-4);
|
|
@@ -28342,6 +30408,32 @@
|
|
|
28342
30408
|
grid-area: bottom;
|
|
28343
30409
|
justify-self: center;
|
|
28344
30410
|
}
|
|
30411
|
+
/* background controls and source notes: the free corner, clear of the panels and the dock */
|
|
30412
|
+
:where([data-kit="pro"]) .tf-floating-ui > .tf-floating-controls {
|
|
30413
|
+
grid-area: controls;
|
|
30414
|
+
align-self: end;
|
|
30415
|
+
justify-self: end;
|
|
30416
|
+
display: flex;
|
|
30417
|
+
flex-direction: column;
|
|
30418
|
+
align-items: flex-end;
|
|
30419
|
+
gap: var(--space-2);
|
|
30420
|
+
pointer-events: none;
|
|
30421
|
+
}
|
|
30422
|
+
:where([data-kit="pro"]) .tf-floating-controls > * {
|
|
30423
|
+
pointer-events: auto;
|
|
30424
|
+
}
|
|
30425
|
+
:where([data-kit="pro"]) .tf-floating-attribution {
|
|
30426
|
+
max-width: 100%;
|
|
30427
|
+
padding: 2px 8px;
|
|
30428
|
+
border-radius: var(--radius-sm);
|
|
30429
|
+
background: var(--surface);
|
|
30430
|
+
color: var(--ink-muted);
|
|
30431
|
+
font: 500 11px/16px var(--font-sans);
|
|
30432
|
+
overflow-wrap: anywhere;
|
|
30433
|
+
}
|
|
30434
|
+
:where([data-kit="pro"]) .tf-floating-handle {
|
|
30435
|
+
display: none;
|
|
30436
|
+
}
|
|
28345
30437
|
:where([data-kit="pro"]) .tf-floating-ui > :is(.tf-floating-top, .tf-floating-bottom) {
|
|
28346
30438
|
pointer-events: none;
|
|
28347
30439
|
}
|
|
@@ -28367,6 +30459,75 @@
|
|
|
28367
30459
|
gap: var(--space-3);
|
|
28368
30460
|
padding: var(--space-3);
|
|
28369
30461
|
}
|
|
30462
|
+
:where([data-kit="pro"]) .tf-floating-ui > .tf-floating-controls {
|
|
30463
|
+
grid-area: auto;
|
|
30464
|
+
grid-row: 3;
|
|
30465
|
+
}
|
|
30466
|
+
/* the end slot as a bottom sheet over the background: a peek, or most of the height */
|
|
30467
|
+
:where([data-kit="pro"]) .tf-floating.has-sheet .tf-floating-ui {
|
|
30468
|
+
grid-template-rows: auto auto minmax(120px, 1fr) auto;
|
|
30469
|
+
grid-template-areas:
|
|
30470
|
+
"top"
|
|
30471
|
+
"start"
|
|
30472
|
+
"."
|
|
30473
|
+
"bottom";
|
|
30474
|
+
padding-bottom: calc(var(--space-3) + 96px);
|
|
30475
|
+
}
|
|
30476
|
+
:where([data-kit="pro"]) .tf-floating.has-sheet .tf-floating-end {
|
|
30477
|
+
position: absolute;
|
|
30478
|
+
left: var(--space-3);
|
|
30479
|
+
right: var(--space-3);
|
|
30480
|
+
bottom: 0;
|
|
30481
|
+
z-index: 2;
|
|
30482
|
+
max-height: 96px;
|
|
30483
|
+
overflow: hidden;
|
|
30484
|
+
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
|
|
30485
|
+
background: var(--surface);
|
|
30486
|
+
box-shadow: 0 0 0 var(--line-width) var(--line);
|
|
30487
|
+
transition: max-height var(--dur-base) var(--ease-out);
|
|
30488
|
+
}
|
|
30489
|
+
:where([data-kit="pro"])[data-surface="glass"].tf-floating.has-sheet .tf-floating-end, :where([data-kit="pro"]) [data-surface="glass"].tf-floating.has-sheet .tf-floating-end {
|
|
30490
|
+
background: var(--glass);
|
|
30491
|
+
-webkit-backdrop-filter: var(--glass-filter);
|
|
30492
|
+
backdrop-filter: var(--glass-filter);
|
|
30493
|
+
}
|
|
30494
|
+
:where([data-kit="pro"]) .tf-floating.has-sheet.sheet-full .tf-floating-end {
|
|
30495
|
+
max-height: 75%;
|
|
30496
|
+
overflow-y: auto;
|
|
30497
|
+
}
|
|
30498
|
+
:where([data-kit="pro"]) .tf-floating.has-sheet .tf-floating-handle {
|
|
30499
|
+
display: block;
|
|
30500
|
+
position: sticky;
|
|
30501
|
+
top: 0;
|
|
30502
|
+
z-index: 1;
|
|
30503
|
+
width: 100%;
|
|
30504
|
+
height: 24px;
|
|
30505
|
+
margin: 0;
|
|
30506
|
+
padding: 0;
|
|
30507
|
+
border: 0;
|
|
30508
|
+
background: transparent;
|
|
30509
|
+
cursor: pointer;
|
|
30510
|
+
}
|
|
30511
|
+
:where([data-kit="pro"]) .tf-floating.has-sheet .tf-floating-handle::before {
|
|
30512
|
+
content: "";
|
|
30513
|
+
display: block;
|
|
30514
|
+
width: 40px;
|
|
30515
|
+
height: 4px;
|
|
30516
|
+
margin: 10px auto;
|
|
30517
|
+
border-radius: var(--radius-pill);
|
|
30518
|
+
background: var(--line-strong);
|
|
30519
|
+
}
|
|
30520
|
+
:where([data-kit="pro"]) .tf-floating.has-sheet .tf-floating-handle:focus-visible {
|
|
30521
|
+
outline: 2px solid var(--focus);
|
|
30522
|
+
outline-offset: -2px;
|
|
30523
|
+
}
|
|
30524
|
+
}
|
|
30525
|
+
|
|
30526
|
+
/* in a glass layout the attribution is glass too */
|
|
30527
|
+
:where([data-kit="pro"])[data-surface="glass"] .tf-floating-attribution, :where([data-kit="pro"]) [data-surface="glass"] .tf-floating-attribution {
|
|
30528
|
+
background: var(--glass);
|
|
30529
|
+
-webkit-backdrop-filter: var(--glass-filter);
|
|
30530
|
+
backdrop-filter: var(--glass-filter);
|
|
28370
30531
|
}
|
|
28371
30532
|
|
|
28372
30533
|
/* 09-motion.css */
|
|
@@ -28992,6 +31153,14 @@
|
|
|
28992
31153
|
gap: var(--line-width);
|
|
28993
31154
|
box-shadow: 0 0 0 var(--line-width) var(--line);
|
|
28994
31155
|
}
|
|
31156
|
+
/* with the sidebar, the sidebar and the sheet sit side by side on the same hairline */
|
|
31157
|
+
:where([data-kit="pro"]) .tf-shell.tf-shell-sidebar {
|
|
31158
|
+
padding: 0;
|
|
31159
|
+
gap: var(--line-width);
|
|
31160
|
+
}
|
|
31161
|
+
:where([data-kit="pro"]) .tf-shell-sidebar > .tf-sidebar.shell {
|
|
31162
|
+
border-radius: 0;
|
|
31163
|
+
}
|
|
28995
31164
|
:where([data-kit="pro"]) .tf-topbar,
|
|
28996
31165
|
:where([data-kit="pro"]) .tf-shell .tf-topbar {
|
|
28997
31166
|
border-radius: 0;
|