ui-style-kit-css 2.3.0 → 2.4.1
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/CHANGELOG.md +57 -2
- package/CONTRIBUTING.md +8 -1
- package/README.md +102 -44
- package/STYLE-MAP.md +14 -5
- package/dist/assets/bauhaus-barlow-OFL.txt +93 -0
- package/dist/assets/bauhaus-barlow-semibold.ttf +0 -0
- package/dist/assets/bauhaus-barlow.ttf +0 -0
- package/dist/assets/bauhaus-condensed-OFL.txt +93 -0
- package/dist/assets/bauhaus-condensed-bold.ttf +0 -0
- package/dist/assets/bauhaus-condensed-extrabold.ttf +0 -0
- package/dist/assets/bento-manrope-OFL.txt +93 -0
- package/dist/assets/bento-manrope.ttf +0 -0
- package/dist/assets/clay-grain.png +0 -0
- package/dist/assets/clay-rounded-OFL.txt +93 -0
- package/dist/assets/clay-rounded.ttf +0 -0
- package/dist/assets/neo-noir-corner-dark.png +0 -0
- package/dist/assets/neo-noir-corner-light.png +0 -0
- package/dist/assets/neo-noir-texture-dark.png +0 -0
- package/dist/assets/neo-noir-texture-light.png +0 -0
- package/dist/assets/organic-display-OFL.txt +93 -0
- package/dist/assets/organic-display.ttf +0 -0
- package/dist/assets/organic-icons-LICENSE.txt +21 -0
- package/dist/assets/organic-sans-OFL.txt +93 -0
- package/dist/assets/organic-sans.ttf +0 -0
- package/dist/ui-style-kit.css +47898 -15121
- package/dist/ui-style-kit.min.css +2 -2
- package/dist/ui-style-kit.visual.css +47771 -15122
- package/dist/ui-style-kit.visual.min.css +2 -2
- package/dist/ui-style-kit.with-bridge.css +47932 -15145
- package/dist/ui-style-kit.with-bridge.min.css +2 -2
- package/dist/visual/art-deco.css +3247 -295
- package/dist/visual/bauhaus.css +2 -4692
- package/dist/visual/bento.css +2 -4708
- package/dist/visual/brutalism.css +1229 -231
- package/dist/visual/clay.css +2 -4786
- package/dist/visual/cyberpunk.css +2663 -282
- package/dist/visual/data-terminal.css +2064 -276
- package/dist/visual/editorial-luxe.css +2315 -259
- package/dist/visual/industrial-utility.css +3142 -270
- package/dist/visual/maximalist.css +2185 -454
- package/dist/visual/minimal-saas.css +1503 -398
- package/dist/visual/neo-noir.css +2 -4787
- package/dist/visual/neumorphism.css +1690 -402
- package/dist/visual/organic-modern.css +2 -4764
- package/dist/visual/paper-editorial.css +2977 -292
- package/dist/visual/retro-glass.css +2625 -299
- package/dist/visual/retrofuturism.css +1885 -397
- package/dist/visual/tactile.css +2716 -498
- package/dist/visual/technical-blueprint.css +2599 -267
- package/dist/visual/y2k.css +1906 -309
- package/docs/ART-DECO.md +80 -0
- package/docs/BAUHAUS.md +152 -0
- package/docs/BENTO.md +121 -0
- package/docs/CLAY.md +127 -0
- package/docs/COLOR-THEMES.md +63 -0
- package/docs/DEMO-SHOWCASE.md +65 -0
- package/docs/ECOSYSTEM.md +4 -4
- package/docs/EDITORIAL-LUX.md +75 -0
- package/docs/INDUSTRIAL-UTILITY.md +131 -0
- package/docs/NATIVE-ELEMENTS.md +23 -17
- package/docs/NEO-NOIR.md +94 -0
- package/docs/ORGANIC-MODERN.md +91 -0
- package/docs/PAPER-EDITORIAL.md +63 -0
- package/docs/PUBLISHING.md +31 -10
- package/docs/RELEASE-2.4.0.md +88 -0
- package/docs/RELEASE-2.4.1.md +35 -0
- package/docs/RETRO-GLASS.md +105 -0
- package/docs/STYLE-GUIDE.md +41 -26
- package/docs/TACTILE.md +38 -0
- package/docs/TECHNICAL-BLUEPRINT.md +60 -0
- package/docs/TOKENS.md +80 -3
- package/docs/superpowers/plans/2026-09-04-library-wide-theme-fallback-and-fidelity.md +331 -0
- package/docs/superpowers/specs/2026-09-04-library-wide-theme-fallback-and-fidelity-design.md +113 -0
- package/manifest.json +624 -28
- package/package.json +20 -11
- package/styles/art-deco.css +1402 -17
- package/styles/assets/bauhaus-barlow-OFL.txt +93 -0
- package/styles/assets/bauhaus-barlow-semibold.ttf +0 -0
- package/styles/assets/bauhaus-barlow.ttf +0 -0
- package/styles/assets/bauhaus-condensed-OFL.txt +93 -0
- package/styles/assets/bauhaus-condensed-bold.ttf +0 -0
- package/styles/assets/bauhaus-condensed-extrabold.ttf +0 -0
- package/styles/assets/bento-manrope-OFL.txt +93 -0
- package/styles/assets/bento-manrope.ttf +0 -0
- package/styles/assets/clay-grain.png +0 -0
- package/styles/assets/clay-rounded-OFL.txt +93 -0
- package/styles/assets/clay-rounded.ttf +0 -0
- package/styles/assets/neo-noir-corner-dark.png +0 -0
- package/styles/assets/neo-noir-corner-light.png +0 -0
- package/styles/assets/neo-noir-texture-dark.png +0 -0
- package/styles/assets/neo-noir-texture-light.png +0 -0
- package/styles/assets/organic-display-OFL.txt +93 -0
- package/styles/assets/organic-display.ttf +0 -0
- package/styles/assets/organic-icons-LICENSE.txt +21 -0
- package/styles/assets/organic-sans-OFL.txt +93 -0
- package/styles/assets/organic-sans.ttf +0 -0
- package/styles/bauhaus.css +881 -110
- package/styles/bento.css +1182 -113
- package/styles/brutalism.css +266 -15
- package/styles/clay.css +1307 -72
- package/styles/compat-layout.css +1 -2
- package/styles/components.css +107 -36
- package/styles/content-overflow.css +11 -5
- package/styles/cyberpunk.css +1856 -51
- package/styles/data-terminal.css +1122 -18
- package/styles/editorial-luxe.css +581 -17
- package/styles/industrial-utility.css +1775 -16
- package/styles/interactive-surface-bridge.css +30 -20
- package/styles/interactive-surface-theme.css +21 -11
- package/styles/maximalist.css +1215 -133
- package/styles/minimal-saas.css +465 -93
- package/styles/native-elements.css +347 -171
- package/styles/neo-noir.css +661 -19
- package/styles/neumorphism.css +1021 -149
- package/styles/organic-modern.css +693 -23
- package/styles/paper-editorial.css +1053 -17
- package/styles/retro-glass.css +639 -50
- package/styles/retrofuturism.css +948 -60
- package/styles/tactile.css +1813 -111
- package/styles/technical-blueprint.css +673 -22
- package/styles/theme-colors.css +412 -2
- package/styles/y2k.css +954 -46
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* UI Style Kit CSS v2.
|
|
2
|
+
* UI Style Kit CSS v2.4.1
|
|
3
3
|
* CSS theme and UI style preset library.
|
|
4
4
|
* License: MIT
|
|
5
5
|
*/
|
|
@@ -13,13 +13,26 @@
|
|
|
13
13
|
========================================================= */
|
|
14
14
|
|
|
15
15
|
@layer ui-style-kit.theme_colors {
|
|
16
|
+
/**
|
|
17
|
+
* Optional text inks let bright palette fills retain their color without making
|
|
18
|
+
* text on neutral surfaces unreadable. Initial values preserve preset colors and
|
|
19
|
+
* prevent an outer palette's text override from leaking into a nested UI root.
|
|
20
|
+
*/
|
|
21
|
+
:where([data-ui]) {
|
|
22
|
+
--usk-primary-ink: initial;
|
|
23
|
+
--usk-accent-ink: initial;
|
|
24
|
+
}
|
|
25
|
+
|
|
16
26
|
/* Shared RGB roles keep visual presets focused on layout, texture, and component treatment. */
|
|
17
|
-
:where([data-ui][data-
|
|
27
|
+
:where([data-ui][data-mode="light"]) {
|
|
28
|
+
/* Keep vivid fills intact while using the darker link role for text treatments. */
|
|
29
|
+
--usk-primary-ink: rgb(var(--usk-link-rgb));
|
|
30
|
+
--usk-accent-ink: rgb(var(--usk-link-rgb));
|
|
18
31
|
--usk-border-text-mix: 45%;
|
|
19
32
|
--usk-border-min-alpha: 1;
|
|
20
33
|
}
|
|
21
34
|
|
|
22
|
-
:where([data-ui][data-
|
|
35
|
+
:where([data-ui][data-mode="dark"], [data-ui][data-mode="contrast"]) {
|
|
23
36
|
--usk-border-text-mix: 0%;
|
|
24
37
|
--usk-border-min-alpha: 0;
|
|
25
38
|
}
|
|
@@ -1584,6 +1597,403 @@
|
|
|
1584
1597
|
--usk-danger-text-rgb: 0 0 0;
|
|
1585
1598
|
--usk-focus-rgb: 255 255 255;
|
|
1586
1599
|
}
|
|
1600
|
+
|
|
1601
|
+
/** Signal Yellow pairs vivid yellow actions with ink-navy supporting roles. */
|
|
1602
|
+
:where([data-ui][data-theme="signal-yellow"][data-mode="light"]) {
|
|
1603
|
+
--usk-primary-ink: rgb(var(--usk-link-rgb));
|
|
1604
|
+
--usk-accent-ink: rgb(var(--usk-link-rgb));
|
|
1605
|
+
--usk-bg-rgb: 255 251 232;
|
|
1606
|
+
--usk-surface-rgb: 255 255 255;
|
|
1607
|
+
--usk-surface-strong-rgb: 255 254 245;
|
|
1608
|
+
--usk-surface-soft-rgb: 247 237 187;
|
|
1609
|
+
--usk-text-rgb: 33 29 12;
|
|
1610
|
+
--usk-text-muted-rgb: 100 91 55;
|
|
1611
|
+
--usk-border-rgb: 217 199 111;
|
|
1612
|
+
--usk-primary-rgb: 255 204 0;
|
|
1613
|
+
--usk-primary-hover-rgb: 222 175 0;
|
|
1614
|
+
--usk-primary-text-rgb: 0 0 0;
|
|
1615
|
+
--usk-secondary-rgb: 37 50 78;
|
|
1616
|
+
--usk-secondary-hover-rgb: 25 37 61;
|
|
1617
|
+
--usk-secondary-text-rgb: 255 255 255;
|
|
1618
|
+
--usk-accent-rgb: 255 228 92;
|
|
1619
|
+
--usk-success-rgb: 34 122 75;
|
|
1620
|
+
--usk-warning-rgb: 144 92 0;
|
|
1621
|
+
--usk-danger-rgb: 177 54 54;
|
|
1622
|
+
--usk-link-rgb: 112 79 0;
|
|
1623
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1624
|
+
--usk-success-text-rgb: 255 255 255;
|
|
1625
|
+
--usk-warning-text-rgb: 255 255 255;
|
|
1626
|
+
--usk-danger-text-rgb: 255 255 255;
|
|
1627
|
+
--usk-focus-rgb: 255 204 0;
|
|
1628
|
+
}
|
|
1629
|
+
|
|
1630
|
+
:where([data-ui][data-theme="signal-yellow"][data-mode="dark"]) {
|
|
1631
|
+
--usk-bg-rgb: 18 15 3;
|
|
1632
|
+
--usk-surface-rgb: 32 27 7;
|
|
1633
|
+
--usk-surface-strong-rgb: 48 40 10;
|
|
1634
|
+
--usk-surface-soft-rgb: 25 21 5;
|
|
1635
|
+
--usk-text-rgb: 255 249 222;
|
|
1636
|
+
--usk-text-muted-rgb: 207 195 145;
|
|
1637
|
+
--usk-border-rgb: 104 88 31;
|
|
1638
|
+
--usk-primary-rgb: 255 216 59;
|
|
1639
|
+
--usk-primary-hover-rgb: 255 234 130;
|
|
1640
|
+
--usk-primary-text-rgb: 0 0 0;
|
|
1641
|
+
--usk-secondary-rgb: 142 198 255;
|
|
1642
|
+
--usk-secondary-hover-rgb: 182 220 255;
|
|
1643
|
+
--usk-secondary-text-rgb: 0 0 0;
|
|
1644
|
+
--usk-accent-rgb: 255 232 102;
|
|
1645
|
+
--usk-success-rgb: 103 217 151;
|
|
1646
|
+
--usk-warning-rgb: 255 194 62;
|
|
1647
|
+
--usk-danger-rgb: 255 119 119;
|
|
1648
|
+
--usk-link-rgb: 255 232 102;
|
|
1649
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1650
|
+
--usk-success-text-rgb: 0 0 0;
|
|
1651
|
+
--usk-warning-text-rgb: 0 0 0;
|
|
1652
|
+
--usk-danger-text-rgb: 0 0 0;
|
|
1653
|
+
--usk-focus-rgb: 255 232 102;
|
|
1654
|
+
}
|
|
1655
|
+
|
|
1656
|
+
:where([data-ui][data-theme="signal-yellow"][data-mode="contrast"]) {
|
|
1657
|
+
--usk-bg-rgb: 0 0 0;
|
|
1658
|
+
--usk-surface-rgb: 13 11 0;
|
|
1659
|
+
--usk-surface-strong-rgb: 26 22 0;
|
|
1660
|
+
--usk-surface-soft-rgb: 0 0 0;
|
|
1661
|
+
--usk-text-rgb: 255 255 255;
|
|
1662
|
+
--usk-text-muted-rgb: 255 250 222;
|
|
1663
|
+
--usk-border-rgb: 255 255 255;
|
|
1664
|
+
--usk-primary-rgb: 255 214 0;
|
|
1665
|
+
--usk-primary-hover-rgb: 255 255 255;
|
|
1666
|
+
--usk-primary-text-rgb: 0 0 0;
|
|
1667
|
+
--usk-secondary-rgb: 0 217 255;
|
|
1668
|
+
--usk-secondary-hover-rgb: 255 255 255;
|
|
1669
|
+
--usk-secondary-text-rgb: 0 0 0;
|
|
1670
|
+
--usk-accent-rgb: 255 234 0;
|
|
1671
|
+
--usk-success-rgb: 0 255 144;
|
|
1672
|
+
--usk-warning-rgb: 255 191 0;
|
|
1673
|
+
--usk-danger-rgb: 255 77 77;
|
|
1674
|
+
--usk-link-rgb: 255 234 0;
|
|
1675
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1676
|
+
--usk-success-text-rgb: 0 0 0;
|
|
1677
|
+
--usk-warning-text-rgb: 0 0 0;
|
|
1678
|
+
--usk-danger-text-rgb: 0 0 0;
|
|
1679
|
+
--usk-focus-rgb: 255 255 255;
|
|
1680
|
+
}
|
|
1681
|
+
|
|
1682
|
+
/** Botanical Green pairs leaf-green actions with restrained berry support. */
|
|
1683
|
+
:where([data-ui][data-theme="botanical-green"][data-mode="light"]) {
|
|
1684
|
+
--usk-bg-rgb: 239 249 242;
|
|
1685
|
+
--usk-surface-rgb: 255 255 255;
|
|
1686
|
+
--usk-surface-strong-rgb: 248 253 249;
|
|
1687
|
+
--usk-surface-soft-rgb: 214 237 220;
|
|
1688
|
+
--usk-text-rgb: 14 38 23;
|
|
1689
|
+
--usk-text-muted-rgb: 75 98 81;
|
|
1690
|
+
--usk-border-rgb: 176 207 185;
|
|
1691
|
+
--usk-primary-rgb: 13 126 66;
|
|
1692
|
+
--usk-primary-hover-rgb: 8 97 50;
|
|
1693
|
+
--usk-primary-text-rgb: 255 255 255;
|
|
1694
|
+
--usk-secondary-rgb: 121 48 88;
|
|
1695
|
+
--usk-secondary-hover-rgb: 91 35 65;
|
|
1696
|
+
--usk-secondary-text-rgb: 255 255 255;
|
|
1697
|
+
--usk-accent-rgb: 64 201 117;
|
|
1698
|
+
--usk-success-rgb: 24 116 65;
|
|
1699
|
+
--usk-warning-rgb: 150 96 0;
|
|
1700
|
+
--usk-danger-rgb: 178 60 70;
|
|
1701
|
+
--usk-link-rgb: 8 97 50;
|
|
1702
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1703
|
+
--usk-success-text-rgb: 255 255 255;
|
|
1704
|
+
--usk-warning-text-rgb: 255 255 255;
|
|
1705
|
+
--usk-danger-text-rgb: 255 255 255;
|
|
1706
|
+
--usk-focus-rgb: 64 201 117;
|
|
1707
|
+
}
|
|
1708
|
+
|
|
1709
|
+
:where([data-ui][data-theme="botanical-green"][data-mode="dark"]) {
|
|
1710
|
+
--usk-bg-rgb: 4 17 9;
|
|
1711
|
+
--usk-surface-rgb: 10 32 18;
|
|
1712
|
+
--usk-surface-strong-rgb: 17 48 28;
|
|
1713
|
+
--usk-surface-soft-rgb: 7 24 14;
|
|
1714
|
+
--usk-text-rgb: 235 252 241;
|
|
1715
|
+
--usk-text-muted-rgb: 173 205 182;
|
|
1716
|
+
--usk-border-rgb: 49 91 63;
|
|
1717
|
+
--usk-primary-rgb: 82 222 139;
|
|
1718
|
+
--usk-primary-hover-rgb: 128 240 169;
|
|
1719
|
+
--usk-primary-text-rgb: 0 0 0;
|
|
1720
|
+
--usk-secondary-rgb: 238 148 199;
|
|
1721
|
+
--usk-secondary-hover-rgb: 255 187 222;
|
|
1722
|
+
--usk-secondary-text-rgb: 0 0 0;
|
|
1723
|
+
--usk-accent-rgb: 107 240 164;
|
|
1724
|
+
--usk-success-rgb: 100 218 149;
|
|
1725
|
+
--usk-warning-rgb: 255 205 91;
|
|
1726
|
+
--usk-danger-rgb: 255 126 137;
|
|
1727
|
+
--usk-link-rgb: 128 240 169;
|
|
1728
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1729
|
+
--usk-success-text-rgb: 0 0 0;
|
|
1730
|
+
--usk-warning-text-rgb: 0 0 0;
|
|
1731
|
+
--usk-danger-text-rgb: 0 0 0;
|
|
1732
|
+
--usk-focus-rgb: 107 240 164;
|
|
1733
|
+
}
|
|
1734
|
+
|
|
1735
|
+
:where([data-ui][data-theme="botanical-green"][data-mode="contrast"]) {
|
|
1736
|
+
--usk-bg-rgb: 0 0 0;
|
|
1737
|
+
--usk-surface-rgb: 0 14 5;
|
|
1738
|
+
--usk-surface-strong-rgb: 0 29 11;
|
|
1739
|
+
--usk-surface-soft-rgb: 0 0 0;
|
|
1740
|
+
--usk-text-rgb: 255 255 255;
|
|
1741
|
+
--usk-text-muted-rgb: 238 255 244;
|
|
1742
|
+
--usk-border-rgb: 255 255 255;
|
|
1743
|
+
--usk-primary-rgb: 0 255 112;
|
|
1744
|
+
--usk-primary-hover-rgb: 255 255 255;
|
|
1745
|
+
--usk-primary-text-rgb: 0 0 0;
|
|
1746
|
+
--usk-secondary-rgb: 255 92 178;
|
|
1747
|
+
--usk-secondary-hover-rgb: 255 255 255;
|
|
1748
|
+
--usk-secondary-text-rgb: 0 0 0;
|
|
1749
|
+
--usk-accent-rgb: 103 255 166;
|
|
1750
|
+
--usk-success-rgb: 0 255 117;
|
|
1751
|
+
--usk-warning-rgb: 255 212 0;
|
|
1752
|
+
--usk-danger-rgb: 255 77 91;
|
|
1753
|
+
--usk-link-rgb: 103 255 166;
|
|
1754
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1755
|
+
--usk-success-text-rgb: 0 0 0;
|
|
1756
|
+
--usk-warning-text-rgb: 0 0 0;
|
|
1757
|
+
--usk-danger-text-rgb: 0 0 0;
|
|
1758
|
+
--usk-focus-rgb: 255 255 255;
|
|
1759
|
+
}
|
|
1760
|
+
|
|
1761
|
+
/** Cobalt Electric pairs saturated blue actions with coral supporting roles. */
|
|
1762
|
+
:where([data-ui][data-theme="cobalt-electric"][data-mode="light"]) {
|
|
1763
|
+
--usk-bg-rgb: 240 244 255;
|
|
1764
|
+
--usk-surface-rgb: 255 255 255;
|
|
1765
|
+
--usk-surface-strong-rgb: 248 250 255;
|
|
1766
|
+
--usk-surface-soft-rgb: 220 229 250;
|
|
1767
|
+
--usk-text-rgb: 14 27 57;
|
|
1768
|
+
--usk-text-muted-rgb: 73 89 123;
|
|
1769
|
+
--usk-border-rgb: 177 195 232;
|
|
1770
|
+
--usk-primary-rgb: 0 82 204;
|
|
1771
|
+
--usk-primary-hover-rgb: 0 61 158;
|
|
1772
|
+
--usk-primary-text-rgb: 255 255 255;
|
|
1773
|
+
--usk-secondary-rgb: 181 57 72;
|
|
1774
|
+
--usk-secondary-hover-rgb: 143 41 54;
|
|
1775
|
+
--usk-secondary-text-rgb: 255 255 255;
|
|
1776
|
+
--usk-accent-rgb: 82 121 255;
|
|
1777
|
+
--usk-success-rgb: 35 121 78;
|
|
1778
|
+
--usk-warning-rgb: 151 96 0;
|
|
1779
|
+
--usk-danger-rgb: 180 55 74;
|
|
1780
|
+
--usk-link-rgb: 0 64 163;
|
|
1781
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1782
|
+
--usk-success-text-rgb: 255 255 255;
|
|
1783
|
+
--usk-warning-text-rgb: 255 255 255;
|
|
1784
|
+
--usk-danger-text-rgb: 255 255 255;
|
|
1785
|
+
--usk-focus-rgb: 82 121 255;
|
|
1786
|
+
}
|
|
1787
|
+
|
|
1788
|
+
:where([data-ui][data-theme="cobalt-electric"][data-mode="dark"]) {
|
|
1789
|
+
--usk-bg-rgb: 4 9 25;
|
|
1790
|
+
--usk-surface-rgb: 10 20 48;
|
|
1791
|
+
--usk-surface-strong-rgb: 16 32 72;
|
|
1792
|
+
--usk-surface-soft-rgb: 7 14 36;
|
|
1793
|
+
--usk-text-rgb: 239 244 255;
|
|
1794
|
+
--usk-text-muted-rgb: 174 188 218;
|
|
1795
|
+
--usk-border-rgb: 49 70 122;
|
|
1796
|
+
--usk-primary-rgb: 111 149 255;
|
|
1797
|
+
--usk-primary-hover-rgb: 164 188 255;
|
|
1798
|
+
--usk-primary-text-rgb: 0 0 0;
|
|
1799
|
+
--usk-secondary-rgb: 255 133 147;
|
|
1800
|
+
--usk-secondary-hover-rgb: 255 173 183;
|
|
1801
|
+
--usk-secondary-text-rgb: 0 0 0;
|
|
1802
|
+
--usk-accent-rgb: 143 170 255;
|
|
1803
|
+
--usk-success-rgb: 105 219 159;
|
|
1804
|
+
--usk-warning-rgb: 255 205 91;
|
|
1805
|
+
--usk-danger-rgb: 255 121 139;
|
|
1806
|
+
--usk-link-rgb: 164 188 255;
|
|
1807
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1808
|
+
--usk-success-text-rgb: 0 0 0;
|
|
1809
|
+
--usk-warning-text-rgb: 0 0 0;
|
|
1810
|
+
--usk-danger-text-rgb: 0 0 0;
|
|
1811
|
+
--usk-focus-rgb: 143 170 255;
|
|
1812
|
+
}
|
|
1813
|
+
|
|
1814
|
+
:where([data-ui][data-theme="cobalt-electric"][data-mode="contrast"]) {
|
|
1815
|
+
--usk-bg-rgb: 0 0 0;
|
|
1816
|
+
--usk-surface-rgb: 0 7 22;
|
|
1817
|
+
--usk-surface-strong-rgb: 0 15 44;
|
|
1818
|
+
--usk-surface-soft-rgb: 0 0 0;
|
|
1819
|
+
--usk-text-rgb: 255 255 255;
|
|
1820
|
+
--usk-text-muted-rgb: 239 245 255;
|
|
1821
|
+
--usk-border-rgb: 255 255 255;
|
|
1822
|
+
--usk-primary-rgb: 76 133 255;
|
|
1823
|
+
--usk-primary-hover-rgb: 255 255 255;
|
|
1824
|
+
--usk-primary-text-rgb: 0 0 0;
|
|
1825
|
+
--usk-secondary-rgb: 255 105 125;
|
|
1826
|
+
--usk-secondary-hover-rgb: 255 255 255;
|
|
1827
|
+
--usk-secondary-text-rgb: 0 0 0;
|
|
1828
|
+
--usk-accent-rgb: 132 168 255;
|
|
1829
|
+
--usk-success-rgb: 0 255 144;
|
|
1830
|
+
--usk-warning-rgb: 255 212 0;
|
|
1831
|
+
--usk-danger-rgb: 255 92 112;
|
|
1832
|
+
--usk-link-rgb: 132 168 255;
|
|
1833
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1834
|
+
--usk-success-text-rgb: 0 0 0;
|
|
1835
|
+
--usk-warning-text-rgb: 0 0 0;
|
|
1836
|
+
--usk-danger-text-rgb: 0 0 0;
|
|
1837
|
+
--usk-focus-rgb: 255 255 255;
|
|
1838
|
+
}
|
|
1839
|
+
|
|
1840
|
+
/** Stone Graphite uses neutral surfaces while preserving semantic status colors. */
|
|
1841
|
+
:where([data-ui][data-theme="stone-graphite"][data-mode="light"]) {
|
|
1842
|
+
--usk-bg-rgb: 244 244 242;
|
|
1843
|
+
--usk-surface-rgb: 255 255 255;
|
|
1844
|
+
--usk-surface-strong-rgb: 250 250 248;
|
|
1845
|
+
--usk-surface-soft-rgb: 227 229 225;
|
|
1846
|
+
--usk-text-rgb: 27 29 28;
|
|
1847
|
+
--usk-text-muted-rgb: 86 91 88;
|
|
1848
|
+
--usk-border-rgb: 184 189 185;
|
|
1849
|
+
--usk-primary-rgb: 56 60 58;
|
|
1850
|
+
--usk-primary-hover-rgb: 37 40 38;
|
|
1851
|
+
--usk-primary-text-rgb: 255 255 255;
|
|
1852
|
+
--usk-secondary-rgb: 91 97 93;
|
|
1853
|
+
--usk-secondary-hover-rgb: 69 74 71;
|
|
1854
|
+
--usk-secondary-text-rgb: 255 255 255;
|
|
1855
|
+
--usk-accent-rgb: 184 190 186;
|
|
1856
|
+
--usk-success-rgb: 48 115 79;
|
|
1857
|
+
--usk-warning-rgb: 145 94 0;
|
|
1858
|
+
--usk-danger-rgb: 168 60 60;
|
|
1859
|
+
--usk-link-rgb: 52 60 56;
|
|
1860
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1861
|
+
--usk-success-text-rgb: 255 255 255;
|
|
1862
|
+
--usk-warning-text-rgb: 255 255 255;
|
|
1863
|
+
--usk-danger-text-rgb: 255 255 255;
|
|
1864
|
+
--usk-focus-rgb: 112 121 116;
|
|
1865
|
+
}
|
|
1866
|
+
|
|
1867
|
+
:where([data-ui][data-theme="stone-graphite"][data-mode="dark"]) {
|
|
1868
|
+
--usk-bg-rgb: 12 13 13;
|
|
1869
|
+
--usk-surface-rgb: 25 27 26;
|
|
1870
|
+
--usk-surface-strong-rgb: 40 43 41;
|
|
1871
|
+
--usk-surface-soft-rgb: 18 20 19;
|
|
1872
|
+
--usk-text-rgb: 245 246 245;
|
|
1873
|
+
--usk-text-muted-rgb: 189 193 190;
|
|
1874
|
+
--usk-border-rgb: 78 84 80;
|
|
1875
|
+
--usk-primary-rgb: 208 212 209;
|
|
1876
|
+
--usk-primary-hover-rgb: 235 237 235;
|
|
1877
|
+
--usk-primary-text-rgb: 0 0 0;
|
|
1878
|
+
--usk-secondary-rgb: 164 170 166;
|
|
1879
|
+
--usk-secondary-hover-rgb: 194 199 196;
|
|
1880
|
+
--usk-secondary-text-rgb: 0 0 0;
|
|
1881
|
+
--usk-accent-rgb: 230 232 231;
|
|
1882
|
+
--usk-success-rgb: 130 210 165;
|
|
1883
|
+
--usk-warning-rgb: 242 197 112;
|
|
1884
|
+
--usk-danger-rgb: 240 137 137;
|
|
1885
|
+
--usk-link-rgb: 220 224 221;
|
|
1886
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1887
|
+
--usk-success-text-rgb: 0 0 0;
|
|
1888
|
+
--usk-warning-text-rgb: 0 0 0;
|
|
1889
|
+
--usk-danger-text-rgb: 0 0 0;
|
|
1890
|
+
--usk-focus-rgb: 255 255 255;
|
|
1891
|
+
}
|
|
1892
|
+
|
|
1893
|
+
:where([data-ui][data-theme="stone-graphite"][data-mode="contrast"]) {
|
|
1894
|
+
--usk-bg-rgb: 0 0 0;
|
|
1895
|
+
--usk-surface-rgb: 8 8 8;
|
|
1896
|
+
--usk-surface-strong-rgb: 20 20 20;
|
|
1897
|
+
--usk-surface-soft-rgb: 0 0 0;
|
|
1898
|
+
--usk-text-rgb: 255 255 255;
|
|
1899
|
+
--usk-text-muted-rgb: 245 245 245;
|
|
1900
|
+
--usk-border-rgb: 255 255 255;
|
|
1901
|
+
--usk-primary-rgb: 255 255 255;
|
|
1902
|
+
--usk-primary-hover-rgb: 221 221 221;
|
|
1903
|
+
--usk-primary-text-rgb: 0 0 0;
|
|
1904
|
+
--usk-secondary-rgb: 205 205 205;
|
|
1905
|
+
--usk-secondary-hover-rgb: 255 255 255;
|
|
1906
|
+
--usk-secondary-text-rgb: 0 0 0;
|
|
1907
|
+
--usk-accent-rgb: 245 245 245;
|
|
1908
|
+
--usk-success-rgb: 0 255 144;
|
|
1909
|
+
--usk-warning-rgb: 255 212 0;
|
|
1910
|
+
--usk-danger-rgb: 255 92 92;
|
|
1911
|
+
--usk-link-rgb: 255 255 255;
|
|
1912
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1913
|
+
--usk-success-text-rgb: 0 0 0;
|
|
1914
|
+
--usk-warning-text-rgb: 0 0 0;
|
|
1915
|
+
--usk-danger-text-rgb: 0 0 0;
|
|
1916
|
+
--usk-focus-rgb: 255 255 255;
|
|
1917
|
+
}
|
|
1918
|
+
|
|
1919
|
+
/** Walnut Clay pairs deep brown actions with clay accents and muted foliage. */
|
|
1920
|
+
:where([data-ui][data-theme="walnut-clay"][data-mode="light"]) {
|
|
1921
|
+
--usk-bg-rgb: 248 241 233;
|
|
1922
|
+
--usk-surface-rgb: 255 255 255;
|
|
1923
|
+
--usk-surface-strong-rgb: 253 249 245;
|
|
1924
|
+
--usk-surface-soft-rgb: 232 216 202;
|
|
1925
|
+
--usk-text-rgb: 49 36 29;
|
|
1926
|
+
--usk-text-muted-rgb: 102 84 74;
|
|
1927
|
+
--usk-border-rgb: 199 172 154;
|
|
1928
|
+
--usk-primary-rgb: 112 67 48;
|
|
1929
|
+
--usk-primary-hover-rgb: 83 47 34;
|
|
1930
|
+
--usk-primary-text-rgb: 255 255 255;
|
|
1931
|
+
--usk-secondary-rgb: 88 98 78;
|
|
1932
|
+
--usk-secondary-hover-rgb: 66 75 57;
|
|
1933
|
+
--usk-secondary-text-rgb: 255 255 255;
|
|
1934
|
+
--usk-accent-rgb: 190 111 82;
|
|
1935
|
+
--usk-success-rgb: 53 117 76;
|
|
1936
|
+
--usk-warning-rgb: 147 91 0;
|
|
1937
|
+
--usk-danger-rgb: 173 61 55;
|
|
1938
|
+
--usk-link-rgb: 105 60 43;
|
|
1939
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1940
|
+
--usk-success-text-rgb: 255 255 255;
|
|
1941
|
+
--usk-warning-text-rgb: 255 255 255;
|
|
1942
|
+
--usk-danger-text-rgb: 255 255 255;
|
|
1943
|
+
--usk-focus-rgb: 190 111 82;
|
|
1944
|
+
}
|
|
1945
|
+
|
|
1946
|
+
:where([data-ui][data-theme="walnut-clay"][data-mode="dark"]) {
|
|
1947
|
+
--usk-bg-rgb: 18 12 9;
|
|
1948
|
+
--usk-surface-rgb: 35 24 19;
|
|
1949
|
+
--usk-surface-strong-rgb: 51 34 26;
|
|
1950
|
+
--usk-surface-soft-rgb: 27 18 14;
|
|
1951
|
+
--usk-text-rgb: 250 241 233;
|
|
1952
|
+
--usk-text-muted-rgb: 205 184 169;
|
|
1953
|
+
--usk-border-rgb: 107 78 61;
|
|
1954
|
+
--usk-primary-rgb: 218 158 124;
|
|
1955
|
+
--usk-primary-hover-rgb: 240 188 156;
|
|
1956
|
+
--usk-primary-text-rgb: 0 0 0;
|
|
1957
|
+
--usk-secondary-rgb: 178 192 157;
|
|
1958
|
+
--usk-secondary-hover-rgb: 207 217 190;
|
|
1959
|
+
--usk-secondary-text-rgb: 0 0 0;
|
|
1960
|
+
--usk-accent-rgb: 235 169 136;
|
|
1961
|
+
--usk-success-rgb: 133 214 164;
|
|
1962
|
+
--usk-warning-rgb: 255 203 100;
|
|
1963
|
+
--usk-danger-rgb: 255 135 128;
|
|
1964
|
+
--usk-link-rgb: 240 188 156;
|
|
1965
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1966
|
+
--usk-success-text-rgb: 0 0 0;
|
|
1967
|
+
--usk-warning-text-rgb: 0 0 0;
|
|
1968
|
+
--usk-danger-text-rgb: 0 0 0;
|
|
1969
|
+
--usk-focus-rgb: 235 169 136;
|
|
1970
|
+
}
|
|
1971
|
+
|
|
1972
|
+
:where([data-ui][data-theme="walnut-clay"][data-mode="contrast"]) {
|
|
1973
|
+
--usk-bg-rgb: 0 0 0;
|
|
1974
|
+
--usk-surface-rgb: 15 7 3;
|
|
1975
|
+
--usk-surface-strong-rgb: 31 15 7;
|
|
1976
|
+
--usk-surface-soft-rgb: 0 0 0;
|
|
1977
|
+
--usk-text-rgb: 255 255 255;
|
|
1978
|
+
--usk-text-muted-rgb: 255 244 237;
|
|
1979
|
+
--usk-border-rgb: 255 255 255;
|
|
1980
|
+
--usk-primary-rgb: 255 174 128;
|
|
1981
|
+
--usk-primary-hover-rgb: 255 255 255;
|
|
1982
|
+
--usk-primary-text-rgb: 0 0 0;
|
|
1983
|
+
--usk-secondary-rgb: 208 234 166;
|
|
1984
|
+
--usk-secondary-hover-rgb: 255 255 255;
|
|
1985
|
+
--usk-secondary-text-rgb: 0 0 0;
|
|
1986
|
+
--usk-accent-rgb: 255 194 160;
|
|
1987
|
+
--usk-success-rgb: 0 255 144;
|
|
1988
|
+
--usk-warning-rgb: 255 212 0;
|
|
1989
|
+
--usk-danger-rgb: 255 102 96;
|
|
1990
|
+
--usk-link-rgb: 255 194 160;
|
|
1991
|
+
--usk-accent-text-rgb: 0 0 0;
|
|
1992
|
+
--usk-success-text-rgb: 0 0 0;
|
|
1993
|
+
--usk-warning-text-rgb: 0 0 0;
|
|
1994
|
+
--usk-danger-text-rgb: 0 0 0;
|
|
1995
|
+
--usk-focus-rgb: 255 255 255;
|
|
1996
|
+
}
|
|
1587
1997
|
}
|
|
1588
1998
|
|
|
1589
1999
|
|
|
@@ -1597,7 +2007,8 @@
|
|
|
1597
2007
|
========================================================= */
|
|
1598
2008
|
|
|
1599
2009
|
@layer ui-style-kit.native_elements {
|
|
1600
|
-
[data-ui][data-
|
|
2010
|
+
[data-ui][data-mode] {
|
|
2011
|
+
--usk-native-bg: rgb(var(--usk-bg-rgb));
|
|
1601
2012
|
--usk-native-surface: rgb(var(--usk-surface-rgb));
|
|
1602
2013
|
--usk-native-surface-strong: rgb(var(--usk-surface-strong-rgb));
|
|
1603
2014
|
--usk-native-surface-soft: rgb(var(--usk-surface-soft-rgb));
|
|
@@ -1634,6 +2045,52 @@
|
|
|
1634
2045
|
--usk-native-thumb: var(--usk-native-surface-strong);
|
|
1635
2046
|
--usk-native-thumb-border: var(--usk-native-primary);
|
|
1636
2047
|
--usk-native-indicator: var(--usk-native-primary);
|
|
2048
|
+
--usk-native-choice-size: 1.5rem;
|
|
2049
|
+
--usk-native-choice-background: var(--usk-native-control-bg);
|
|
2050
|
+
--usk-native-choice-border: var(--usk-native-border-width) solid var(--usk-native-border);
|
|
2051
|
+
--usk-native-checkbox-radius: .3rem;
|
|
2052
|
+
--usk-native-radio-radius: 50%;
|
|
2053
|
+
--usk-native-choice-shadow: none;
|
|
2054
|
+
--usk-native-choice-checked-background: var(--usk-native-primary);
|
|
2055
|
+
--usk-native-choice-mark-color: var(--usk-native-on-primary);
|
|
2056
|
+
--usk-native-select-indicator-image: linear-gradient(45deg, transparent 50%, var(--usk-native-indicator) 50%), linear-gradient(135deg, var(--usk-native-indicator) 50%, transparent 50%);
|
|
2057
|
+
--usk-native-select-indicator-size: .42rem .42rem, .42rem .42rem;
|
|
2058
|
+
--usk-native-select-indicator-position: calc(100% - 1.15rem) 50%, calc(100% - .85rem) 50%;
|
|
2059
|
+
--usk-native-select-padding-inline-end: 2.5rem;
|
|
2060
|
+
--usk-native-range-track-size: .45rem;
|
|
2061
|
+
--usk-native-range-track-background: var(--usk-native-track);
|
|
2062
|
+
--usk-native-range-track-border: 0 solid transparent;
|
|
2063
|
+
--usk-native-range-track-radius: 999px;
|
|
2064
|
+
--usk-native-range-track-shadow: none;
|
|
2065
|
+
--usk-native-range-progress-background: var(--usk-native-track-fill);
|
|
2066
|
+
--usk-native-range-thumb-size: 1.2rem;
|
|
2067
|
+
--usk-native-range-thumb-background: var(--usk-native-thumb);
|
|
2068
|
+
--usk-native-range-thumb-border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
|
|
2069
|
+
--usk-native-range-thumb-radius: 50%;
|
|
2070
|
+
--usk-native-range-thumb-shadow: var(--usk-native-shadow);
|
|
2071
|
+
--usk-native-progress-size: .9rem;
|
|
2072
|
+
--usk-native-progress-track-background: var(--usk-native-track);
|
|
2073
|
+
--usk-native-progress-track-border: 0 solid transparent;
|
|
2074
|
+
--usk-native-progress-track-radius: 999px;
|
|
2075
|
+
--usk-native-progress-track-shadow: none;
|
|
2076
|
+
--usk-native-progress-value-background: var(--usk-native-track-fill);
|
|
2077
|
+
--usk-native-progress-value-radius: inherit;
|
|
2078
|
+
--usk-native-progress-value-shadow: none;
|
|
2079
|
+
--usk-native-meter-optimum-background: var(--usk-native-success);
|
|
2080
|
+
--usk-native-meter-suboptimum-background: var(--usk-native-warning);
|
|
2081
|
+
--usk-native-meter-critical-background: var(--usk-native-danger);
|
|
2082
|
+
--usk-native-file-button-background: var(--usk-native-primary);
|
|
2083
|
+
--usk-native-file-button-border: var(--usk-native-border-width) solid var(--usk-native-primary);
|
|
2084
|
+
--usk-native-file-button-radius: var(--usk-native-radius-sm);
|
|
2085
|
+
--usk-native-file-button-shadow: var(--usk-native-shadow);
|
|
2086
|
+
--usk-native-color-swatch-border: 0 solid transparent;
|
|
2087
|
+
--usk-native-color-swatch-radius: calc(var(--usk-native-radius-sm) / 1.5);
|
|
2088
|
+
--usk-native-indicator-opacity: .78;
|
|
2089
|
+
--usk-native-indicator-filter: none;
|
|
2090
|
+
--usk-native-scrollbar-size: .75rem;
|
|
2091
|
+
--usk-native-scrollbar-track: var(--usk-native-track);
|
|
2092
|
+
--usk-native-scrollbar-thumb: var(--usk-native-thumb-border);
|
|
2093
|
+
--usk-native-scrollbar-radius: 999px;
|
|
1637
2094
|
--usk-native-shadow: none;
|
|
1638
2095
|
--usk-native-shadow-md: var(--usk-native-shadow);
|
|
1639
2096
|
--usk-native-focus-ring: 0 0 0 3px rgb(var(--usk-focus-rgb) / .28);
|
|
@@ -1641,7 +2098,7 @@
|
|
|
1641
2098
|
--usk-motion-easing: cubic-bezier(0.2, 0, 0.2, 1);
|
|
1642
2099
|
|
|
1643
2100
|
/* Shared semantic values are fully typed so optional companion and third-party consumers can use them directly. */
|
|
1644
|
-
--ui-color-bg:
|
|
2101
|
+
--ui-color-bg: var(--usk-native-bg);
|
|
1645
2102
|
--ui-color-surface: var(--usk-native-surface-strong);
|
|
1646
2103
|
--ui-color-text: var(--usk-native-text);
|
|
1647
2104
|
--ui-color-muted: var(--usk-native-text-muted);
|
|
@@ -1655,7 +2112,7 @@
|
|
|
1655
2112
|
--ui-motion-easing: var(--usk-motion-easing);
|
|
1656
2113
|
}
|
|
1657
2114
|
|
|
1658
|
-
[data-ui][data-
|
|
2115
|
+
[data-ui][data-mode] :where(h1, h2, h3, h4, h5, h6) {
|
|
1659
2116
|
color: var(--usk-native-text);
|
|
1660
2117
|
font-family: var(--usk-native-font-heading);
|
|
1661
2118
|
line-height: 1.15;
|
|
@@ -1663,42 +2120,42 @@
|
|
|
1663
2120
|
}
|
|
1664
2121
|
|
|
1665
2122
|
@supports (text-wrap: balance) {
|
|
1666
|
-
[data-ui][data-
|
|
2123
|
+
[data-ui][data-mode] :where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
|
|
1667
2124
|
}
|
|
1668
2125
|
|
|
1669
|
-
[data-ui][data-
|
|
2126
|
+
[data-ui][data-mode] :where(hgroup) {
|
|
1670
2127
|
display: grid;
|
|
1671
2128
|
gap: .35rem;
|
|
1672
2129
|
margin-block: 0 1rem;
|
|
1673
2130
|
}
|
|
1674
2131
|
|
|
1675
|
-
[data-ui][data-
|
|
1676
|
-
[data-ui][data-
|
|
1677
|
-
[data-ui][data-
|
|
2132
|
+
[data-ui][data-mode] :where(h1) { font-size: clamp(2rem, 5vw, 3.5rem); }
|
|
2133
|
+
[data-ui][data-mode] :where(h2) { font-size: clamp(1.55rem, 3vw, 2.35rem); }
|
|
2134
|
+
[data-ui][data-mode] :where(h3) { font-size: clamp(1.25rem, 2vw, 1.65rem); }
|
|
1678
2135
|
|
|
1679
|
-
[data-ui][data-
|
|
2136
|
+
[data-ui][data-mode] :where(p) {
|
|
1680
2137
|
margin: 0 0 1rem;
|
|
1681
2138
|
color: var(--usk-native-text-muted);
|
|
1682
2139
|
line-height: 1.7;
|
|
1683
2140
|
}
|
|
1684
2141
|
|
|
1685
|
-
[data-ui][data-
|
|
2142
|
+
[data-ui][data-mode] :where(a) {
|
|
1686
2143
|
color: var(--usk-native-link);
|
|
1687
2144
|
text-decoration-thickness: .08em;
|
|
1688
2145
|
text-underline-offset: .18em;
|
|
1689
2146
|
}
|
|
1690
2147
|
|
|
1691
|
-
[data-ui][data-
|
|
2148
|
+
[data-ui][data-mode] :where(a:hover) { color: var(--usk-primary-ink, var(--usk-native-primary-hover)); }
|
|
1692
2149
|
|
|
1693
|
-
[data-ui][data-
|
|
2150
|
+
[data-ui][data-mode] :where(ul, ol, menu) {
|
|
1694
2151
|
margin: 0 0 1rem;
|
|
1695
2152
|
padding-left: 1.35rem;
|
|
1696
2153
|
color: var(--usk-native-text-muted);
|
|
1697
2154
|
}
|
|
1698
2155
|
|
|
1699
|
-
[data-ui][data-
|
|
2156
|
+
[data-ui][data-mode] :where(li) { margin-block: .25rem; }
|
|
1700
2157
|
|
|
1701
|
-
[data-ui][data-
|
|
2158
|
+
[data-ui][data-mode] :where(blockquote) {
|
|
1702
2159
|
margin: 1.25rem 0;
|
|
1703
2160
|
padding: 1rem 1.25rem;
|
|
1704
2161
|
color: var(--usk-native-text);
|
|
@@ -1707,7 +2164,7 @@
|
|
|
1707
2164
|
border-radius: var(--usk-native-radius);
|
|
1708
2165
|
}
|
|
1709
2166
|
|
|
1710
|
-
[data-ui][data-
|
|
2167
|
+
[data-ui][data-mode] :where(code, kbd, samp) {
|
|
1711
2168
|
padding: .15em .35em;
|
|
1712
2169
|
color: var(--usk-native-text);
|
|
1713
2170
|
background: var(--usk-native-surface-soft);
|
|
@@ -1717,7 +2174,7 @@
|
|
|
1717
2174
|
font-size: .92em;
|
|
1718
2175
|
}
|
|
1719
2176
|
|
|
1720
|
-
[data-ui][data-
|
|
2177
|
+
[data-ui][data-mode] :where(pre) {
|
|
1721
2178
|
overflow: auto;
|
|
1722
2179
|
margin: 1rem 0;
|
|
1723
2180
|
padding: 1rem;
|
|
@@ -1727,57 +2184,88 @@
|
|
|
1727
2184
|
border-radius: var(--usk-native-radius);
|
|
1728
2185
|
}
|
|
1729
2186
|
|
|
1730
|
-
[data-ui][data-
|
|
2187
|
+
[data-ui][data-mode] :where(pre code) {
|
|
1731
2188
|
display: block;
|
|
1732
2189
|
padding: 0;
|
|
1733
2190
|
background: transparent;
|
|
1734
2191
|
border: 0;
|
|
1735
2192
|
}
|
|
1736
2193
|
|
|
1737
|
-
[data-ui][data-
|
|
2194
|
+
[data-ui][data-mode] :where(hr) {
|
|
1738
2195
|
height: 1px;
|
|
1739
2196
|
margin: 2rem 0;
|
|
1740
2197
|
background: var(--usk-native-border);
|
|
1741
2198
|
border: 0;
|
|
1742
2199
|
}
|
|
1743
2200
|
|
|
1744
|
-
[data-ui][data-
|
|
2201
|
+
[data-ui][data-mode] :where(mark) {
|
|
1745
2202
|
padding-inline: .15em;
|
|
1746
2203
|
color: var(--usk-native-text);
|
|
1747
2204
|
background: rgb(var(--usk-warning-rgb) / .32);
|
|
1748
2205
|
border-radius: .2em;
|
|
1749
2206
|
}
|
|
1750
2207
|
|
|
1751
|
-
[data-ui][data-
|
|
1752
|
-
[data-ui][data-
|
|
2208
|
+
[data-ui][data-mode] :where(small, sub, sup, rt, rp) { color: var(--usk-native-text-muted); }
|
|
2209
|
+
[data-ui][data-mode] :where(rt, rp) { font-size: .72em; }
|
|
1753
2210
|
|
|
1754
|
-
[data-ui][data-
|
|
2211
|
+
[data-ui][data-mode] :where(abbr[title]) {
|
|
1755
2212
|
text-decoration: underline dotted var(--usk-native-primary);
|
|
1756
2213
|
text-underline-offset: .18em;
|
|
1757
2214
|
cursor: help;
|
|
1758
2215
|
}
|
|
1759
2216
|
|
|
1760
|
-
[data-ui][data-
|
|
2217
|
+
[data-ui][data-mode] :where(img, picture, video, canvas, svg, iframe, audio, object, embed, math) {
|
|
1761
2218
|
max-width: 100%;
|
|
1762
2219
|
}
|
|
1763
2220
|
|
|
1764
|
-
[data-ui][data-
|
|
2221
|
+
[data-ui][data-mode] :where(img, video, canvas, svg, iframe) { height: auto; }
|
|
2222
|
+
|
|
2223
|
+
/** Native playback retains browser accessibility while inheriting preset material and geometry. */
|
|
2224
|
+
[data-ui][data-mode] audio[controls] {
|
|
2225
|
+
display: block;
|
|
2226
|
+
box-sizing: border-box;
|
|
2227
|
+
inline-size: 100%;
|
|
2228
|
+
min-inline-size: 0;
|
|
2229
|
+
block-size: 60px;
|
|
2230
|
+
padding: 3px;
|
|
2231
|
+
background: var(--usk-native-control-bg);
|
|
2232
|
+
color: var(--usk-native-text);
|
|
2233
|
+
border: var(--usk-native-border-width) solid var(--usk-native-border);
|
|
2234
|
+
border-radius: var(--usk-native-radius);
|
|
2235
|
+
box-shadow: var(--usk-native-shadow);
|
|
2236
|
+
accent-color: var(--usk-native-primary);
|
|
2237
|
+
color-scheme: light;
|
|
2238
|
+
}
|
|
2239
|
+
[data-ui][data-mode="dark"] audio[controls],
|
|
2240
|
+
[data-ui][data-mode="contrast"] audio[controls] { color-scheme: dark; }
|
|
2241
|
+
[data-ui][data-mode] audio[controls]::-webkit-media-controls-enclosure {
|
|
2242
|
+
border-radius: var(--usk-native-radius);
|
|
2243
|
+
background: transparent;
|
|
2244
|
+
}
|
|
2245
|
+
[data-ui][data-mode] audio[controls]::-webkit-media-controls-panel {
|
|
2246
|
+
background: var(--usk-native-control-bg);
|
|
2247
|
+
color: var(--usk-native-text);
|
|
2248
|
+
}
|
|
2249
|
+
[data-ui][data-mode] audio[controls]:focus-visible {
|
|
2250
|
+
outline: 2px solid var(--usk-native-focus);
|
|
2251
|
+
outline-offset: 2px;
|
|
2252
|
+
}
|
|
1765
2253
|
|
|
1766
|
-
[data-ui][data-
|
|
2254
|
+
[data-ui][data-mode] :where(figure) { margin: 1.25rem 0; }
|
|
1767
2255
|
|
|
1768
|
-
[data-ui][data-
|
|
2256
|
+
[data-ui][data-mode] :where(figcaption) {
|
|
1769
2257
|
margin-top: .5rem;
|
|
1770
2258
|
color: var(--usk-native-text-muted);
|
|
1771
2259
|
font-size: .9rem;
|
|
1772
2260
|
}
|
|
1773
2261
|
|
|
1774
|
-
[data-ui][data-
|
|
2262
|
+
[data-ui][data-mode] :where(form) {
|
|
1775
2263
|
display: grid;
|
|
1776
2264
|
gap: var(--usk-native-field-gap);
|
|
1777
2265
|
min-inline-size: 0;
|
|
1778
2266
|
}
|
|
1779
2267
|
|
|
1780
|
-
[data-ui][data-
|
|
2268
|
+
[data-ui][data-mode] :where(fieldset) {
|
|
1781
2269
|
display: grid;
|
|
1782
2270
|
gap: .9rem;
|
|
1783
2271
|
min-inline-size: 0;
|
|
@@ -1788,30 +2276,30 @@
|
|
|
1788
2276
|
border-radius: var(--usk-native-radius);
|
|
1789
2277
|
}
|
|
1790
2278
|
|
|
1791
|
-
[data-ui][data-
|
|
2279
|
+
[data-ui][data-mode] :where(legend) {
|
|
1792
2280
|
padding-inline: .35rem;
|
|
1793
2281
|
color: var(--usk-native-text);
|
|
1794
2282
|
font-weight: 900;
|
|
1795
2283
|
}
|
|
1796
2284
|
|
|
1797
|
-
[data-ui][data-
|
|
2285
|
+
[data-ui][data-mode] :where(label) {
|
|
1798
2286
|
color: var(--usk-native-text);
|
|
1799
2287
|
font-weight: 750;
|
|
1800
2288
|
}
|
|
1801
2289
|
|
|
1802
|
-
[data-ui][data-
|
|
2290
|
+
[data-ui][data-mode] :where(label:has(input), label:has(select), label:has(textarea)) {
|
|
1803
2291
|
display: grid;
|
|
1804
2292
|
gap: var(--usk-native-field-gap);
|
|
1805
2293
|
align-content: start;
|
|
1806
2294
|
}
|
|
1807
2295
|
|
|
1808
|
-
[data-ui][data-
|
|
2296
|
+
[data-ui][data-mode] :where(label:has(input[type="checkbox"]), label:has(input[type="radio"])) {
|
|
1809
2297
|
display: inline-flex;
|
|
1810
2298
|
gap: var(--usk-native-field-gap);
|
|
1811
2299
|
align-items: center;
|
|
1812
2300
|
}
|
|
1813
2301
|
|
|
1814
|
-
[data-ui][data-
|
|
2302
|
+
[data-ui][data-mode] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select) {
|
|
1815
2303
|
width: 100%;
|
|
1816
2304
|
min-block-size: var(--usk-native-control-min-block-size);
|
|
1817
2305
|
padding: var(--usk-native-control-padding-block) var(--usk-native-control-padding-inline);
|
|
@@ -1822,24 +2310,44 @@
|
|
|
1822
2310
|
font: inherit;
|
|
1823
2311
|
}
|
|
1824
2312
|
|
|
1825
|
-
[data-ui][data-
|
|
2313
|
+
[data-ui][data-mode] :where(input, textarea, select, button) {
|
|
1826
2314
|
color-scheme: inherit;
|
|
1827
2315
|
accent-color: var(--usk-native-primary);
|
|
1828
2316
|
}
|
|
1829
2317
|
|
|
1830
|
-
[data-ui][data-
|
|
2318
|
+
[data-ui][data-mode] :where(input, textarea)::placeholder {
|
|
1831
2319
|
color: var(--usk-native-text-muted);
|
|
1832
2320
|
opacity: .78;
|
|
1833
2321
|
}
|
|
1834
2322
|
|
|
1835
|
-
[data-ui][data-
|
|
2323
|
+
[data-ui][data-mode] :where(textarea) {
|
|
1836
2324
|
min-height: 7rem;
|
|
1837
2325
|
resize: vertical;
|
|
1838
2326
|
}
|
|
1839
2327
|
|
|
1840
|
-
[data-ui][data-
|
|
2328
|
+
[data-ui][data-mode] :where(input, textarea, select, button) { font: inherit; }
|
|
2329
|
+
|
|
2330
|
+
[data-ui][data-mode] :where(select:not([multiple])) {
|
|
2331
|
+
-webkit-appearance: none;
|
|
2332
|
+
appearance: none;
|
|
2333
|
+
padding-inline-end: var(--usk-native-select-padding-inline-end);
|
|
2334
|
+
background-image: var(--usk-native-select-indicator-image);
|
|
2335
|
+
background-repeat: no-repeat;
|
|
2336
|
+
background-position: var(--usk-native-select-indicator-position);
|
|
2337
|
+
background-size: var(--usk-native-select-indicator-size);
|
|
2338
|
+
}
|
|
2339
|
+
|
|
2340
|
+
[data-ui][data-mode] :where(select[multiple]) {
|
|
2341
|
+
padding-inline-end: var(--usk-native-control-padding-inline);
|
|
2342
|
+
background-image: none;
|
|
2343
|
+
}
|
|
2344
|
+
|
|
2345
|
+
[dir="rtl"] [data-ui][data-mode] :where(select:not([multiple])),
|
|
2346
|
+
[data-ui][data-mode][dir="rtl"] :where(select:not([multiple])) {
|
|
2347
|
+
--usk-native-select-indicator-position: 1.15rem 50%, .85rem 50%;
|
|
2348
|
+
}
|
|
1841
2349
|
|
|
1842
|
-
[data-ui][data-
|
|
2350
|
+
[data-ui][data-mode] :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
|
|
1843
2351
|
-webkit-appearance: none;
|
|
1844
2352
|
appearance: none;
|
|
1845
2353
|
box-sizing: border-box;
|
|
@@ -1848,7 +2356,7 @@
|
|
|
1848
2356
|
font: inherit;
|
|
1849
2357
|
}
|
|
1850
2358
|
|
|
1851
|
-
[data-ui][data-
|
|
2359
|
+
[data-ui][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
|
|
1852
2360
|
color: var(--usk-native-on-primary);
|
|
1853
2361
|
background: var(--usk-native-primary);
|
|
1854
2362
|
border: var(--usk-native-border-width) solid var(--usk-native-primary);
|
|
@@ -1859,29 +2367,56 @@
|
|
|
1859
2367
|
}
|
|
1860
2368
|
|
|
1861
2369
|
/* Busy controls reserve a stable lane for the preset-owned spinner glyph. */
|
|
1862
|
-
[data-ui][data-
|
|
2370
|
+
[data-ui][data-mode] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
|
|
1863
2371
|
display: inline-flex;
|
|
1864
2372
|
align-items: center;
|
|
1865
2373
|
justify-content: center;
|
|
1866
2374
|
gap: .55rem;
|
|
1867
2375
|
}
|
|
1868
2376
|
|
|
1869
|
-
[data-ui][data-
|
|
2377
|
+
[data-ui][data-mode] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
|
|
1870
2378
|
flex: 0 0 1em;
|
|
1871
2379
|
}
|
|
1872
2380
|
|
|
1873
|
-
[data-ui][data-
|
|
2381
|
+
[data-ui][data-mode] :where(button:not([class]):hover, input[type="button"]:not([class]):hover, input[type="submit"]:not([class]):hover, input[type="reset"]:not([class]):hover) {
|
|
1874
2382
|
background: var(--usk-native-primary-hover);
|
|
1875
2383
|
border-color: var(--usk-native-primary-hover);
|
|
1876
2384
|
}
|
|
1877
2385
|
|
|
1878
|
-
[data-ui][data-
|
|
1879
|
-
|
|
1880
|
-
|
|
2386
|
+
[data-ui][data-mode] :where(input[type="checkbox"], input[type="radio"]) {
|
|
2387
|
+
-webkit-appearance: none;
|
|
2388
|
+
appearance: none;
|
|
2389
|
+
inline-size: var(--usk-native-choice-size);
|
|
2390
|
+
block-size: var(--usk-native-choice-size);
|
|
2391
|
+
background: var(--usk-native-choice-background);
|
|
2392
|
+
border: var(--usk-native-choice-border);
|
|
2393
|
+
box-shadow: var(--usk-native-choice-shadow);
|
|
1881
2394
|
accent-color: var(--usk-native-primary);
|
|
1882
2395
|
}
|
|
1883
2396
|
|
|
1884
|
-
[data-ui][data-
|
|
2397
|
+
[data-ui][data-mode] :where(input[type="checkbox"]) { border-radius: var(--usk-native-checkbox-radius); }
|
|
2398
|
+
[data-ui][data-mode] :where(input[type="radio"]) { border-radius: var(--usk-native-radio-radius); }
|
|
2399
|
+
|
|
2400
|
+
[data-ui][data-mode] :where(input[type="checkbox"]:checked) {
|
|
2401
|
+
background-color: var(--usk-native-choice-checked-background);
|
|
2402
|
+
background-image: linear-gradient(135deg, transparent 42%, var(--usk-native-choice-mark-color) 42% 56%, transparent 56%), linear-gradient(45deg, transparent 54%, var(--usk-native-choice-mark-color) 54% 68%, transparent 68%);
|
|
2403
|
+
}
|
|
2404
|
+
|
|
2405
|
+
[data-ui][data-mode] :where(input[type="checkbox"]:hover:not(:disabled), input[type="radio"]:hover:not(:disabled)) {
|
|
2406
|
+
border-color: var(--usk-native-primary);
|
|
2407
|
+
filter: brightness(1.04);
|
|
2408
|
+
}
|
|
2409
|
+
|
|
2410
|
+
[data-ui][data-mode] :where(input[type="checkbox"]:active:not(:disabled), input[type="radio"]:active:not(:disabled)) {
|
|
2411
|
+
filter: brightness(.94);
|
|
2412
|
+
transform: scale(.94);
|
|
2413
|
+
}
|
|
2414
|
+
|
|
2415
|
+
[data-ui][data-mode] :where(input[type="radio"]:checked) {
|
|
2416
|
+
background: radial-gradient(circle, var(--usk-native-choice-mark-color) 0 31%, transparent 34%), var(--usk-native-choice-checked-background);
|
|
2417
|
+
}
|
|
2418
|
+
|
|
2419
|
+
[data-ui][data-mode] :where(input[type="range"]) {
|
|
1885
2420
|
-webkit-appearance: none;
|
|
1886
2421
|
appearance: none;
|
|
1887
2422
|
width: 100%;
|
|
@@ -1890,40 +2425,50 @@
|
|
|
1890
2425
|
accent-color: var(--usk-native-primary);
|
|
1891
2426
|
}
|
|
1892
2427
|
|
|
1893
|
-
[data-ui][data-
|
|
1894
|
-
block-size:
|
|
1895
|
-
background: var(--usk-native-track);
|
|
1896
|
-
border
|
|
2428
|
+
[data-ui][data-mode] :where(input[type="range"])::-webkit-slider-runnable-track {
|
|
2429
|
+
block-size: var(--usk-native-range-track-size);
|
|
2430
|
+
background: var(--usk-native-range-track-background);
|
|
2431
|
+
border: var(--usk-native-range-track-border);
|
|
2432
|
+
border-radius: var(--usk-native-range-track-radius);
|
|
2433
|
+
box-shadow: var(--usk-native-range-track-shadow);
|
|
1897
2434
|
}
|
|
1898
2435
|
|
|
1899
|
-
[data-ui][data-
|
|
1900
|
-
block-size:
|
|
1901
|
-
background: var(--usk-native-track);
|
|
1902
|
-
border
|
|
2436
|
+
[data-ui][data-mode] :where(input[type="range"])::-moz-range-track {
|
|
2437
|
+
block-size: var(--usk-native-range-track-size);
|
|
2438
|
+
background: var(--usk-native-range-track-background);
|
|
2439
|
+
border: var(--usk-native-range-track-border);
|
|
2440
|
+
border-radius: var(--usk-native-range-track-radius);
|
|
2441
|
+
box-shadow: var(--usk-native-range-track-shadow);
|
|
2442
|
+
}
|
|
2443
|
+
|
|
2444
|
+
[data-ui][data-mode] :where(input[type="range"])::-moz-range-progress {
|
|
2445
|
+
block-size: var(--usk-native-range-track-size);
|
|
2446
|
+
background: var(--usk-native-range-progress-background);
|
|
2447
|
+
border-radius: var(--usk-native-range-track-radius);
|
|
1903
2448
|
}
|
|
1904
2449
|
|
|
1905
|
-
[data-ui][data-
|
|
2450
|
+
[data-ui][data-mode] :where(input[type="range"])::-webkit-slider-thumb {
|
|
1906
2451
|
-webkit-appearance: none;
|
|
1907
2452
|
appearance: none;
|
|
1908
|
-
inline-size:
|
|
1909
|
-
block-size:
|
|
1910
|
-
margin-block-start:
|
|
1911
|
-
background: var(--usk-native-thumb);
|
|
1912
|
-
border: var(--usk-native-
|
|
1913
|
-
border-radius:
|
|
1914
|
-
box-shadow: var(--usk-native-shadow);
|
|
2453
|
+
inline-size: var(--usk-native-range-thumb-size);
|
|
2454
|
+
block-size: var(--usk-native-range-thumb-size);
|
|
2455
|
+
margin-block-start: calc((var(--usk-native-range-track-size) - var(--usk-native-range-thumb-size)) / 2);
|
|
2456
|
+
background: var(--usk-native-range-thumb-background);
|
|
2457
|
+
border: var(--usk-native-range-thumb-border);
|
|
2458
|
+
border-radius: var(--usk-native-range-thumb-radius);
|
|
2459
|
+
box-shadow: var(--usk-native-range-thumb-shadow);
|
|
1915
2460
|
}
|
|
1916
2461
|
|
|
1917
|
-
[data-ui][data-
|
|
1918
|
-
inline-size:
|
|
1919
|
-
block-size:
|
|
1920
|
-
background: var(--usk-native-thumb);
|
|
1921
|
-
border: var(--usk-native-
|
|
1922
|
-
border-radius:
|
|
1923
|
-
box-shadow: var(--usk-native-shadow);
|
|
2462
|
+
[data-ui][data-mode] :where(input[type="range"])::-moz-range-thumb {
|
|
2463
|
+
inline-size: var(--usk-native-range-thumb-size);
|
|
2464
|
+
block-size: var(--usk-native-range-thumb-size);
|
|
2465
|
+
background: var(--usk-native-range-thumb-background);
|
|
2466
|
+
border: var(--usk-native-range-thumb-border);
|
|
2467
|
+
border-radius: var(--usk-native-range-thumb-radius);
|
|
2468
|
+
box-shadow: var(--usk-native-range-thumb-shadow);
|
|
1924
2469
|
}
|
|
1925
2470
|
|
|
1926
|
-
[data-ui][data-
|
|
2471
|
+
[data-ui][data-mode] :where(input[type="color"]) {
|
|
1927
2472
|
inline-size: 3rem;
|
|
1928
2473
|
block-size: 2.4rem;
|
|
1929
2474
|
padding: .2rem;
|
|
@@ -1932,84 +2477,86 @@
|
|
|
1932
2477
|
border-radius: var(--usk-native-radius-sm);
|
|
1933
2478
|
}
|
|
1934
2479
|
|
|
1935
|
-
[data-ui][data-
|
|
2480
|
+
[data-ui][data-mode] :where(input[type="color"])::-webkit-color-swatch-wrapper {
|
|
1936
2481
|
padding: 0;
|
|
1937
2482
|
}
|
|
1938
2483
|
|
|
1939
|
-
[data-ui][data-
|
|
1940
|
-
border:
|
|
1941
|
-
border-radius:
|
|
2484
|
+
[data-ui][data-mode] :where(input[type="color"])::-webkit-color-swatch {
|
|
2485
|
+
border: var(--usk-native-color-swatch-border);
|
|
2486
|
+
border-radius: var(--usk-native-color-swatch-radius);
|
|
1942
2487
|
}
|
|
1943
2488
|
|
|
1944
|
-
[data-ui][data-
|
|
1945
|
-
border:
|
|
1946
|
-
border-radius:
|
|
2489
|
+
[data-ui][data-mode] :where(input[type="color"])::-moz-color-swatch {
|
|
2490
|
+
border: var(--usk-native-color-swatch-border);
|
|
2491
|
+
border-radius: var(--usk-native-color-swatch-radius);
|
|
1947
2492
|
}
|
|
1948
2493
|
|
|
1949
|
-
[data-ui][data-
|
|
2494
|
+
[data-ui][data-mode] :where(input[type="file"]) { color: var(--usk-native-text-muted); }
|
|
1950
2495
|
|
|
1951
2496
|
/* Keep pseudo-elements outside :where() because engines reject them inside selector-list arguments. */
|
|
1952
|
-
[data-ui][data-
|
|
1953
|
-
[data-ui][data-
|
|
2497
|
+
[data-ui][data-mode] :where(input[type="file"])::file-selector-button,
|
|
2498
|
+
[data-ui][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
|
|
1954
2499
|
margin-inline-end: .75rem;
|
|
1955
2500
|
padding: var(--usk-native-subcontrol-padding-block) var(--usk-native-subcontrol-padding-inline);
|
|
1956
2501
|
color: var(--usk-native-on-primary);
|
|
1957
|
-
background: var(--usk-native-
|
|
1958
|
-
border: var(--usk-native-
|
|
1959
|
-
border-radius: var(--usk-native-radius
|
|
2502
|
+
background: var(--usk-native-file-button-background);
|
|
2503
|
+
border: var(--usk-native-file-button-border);
|
|
2504
|
+
border-radius: var(--usk-native-file-button-radius);
|
|
2505
|
+
box-shadow: var(--usk-native-file-button-shadow);
|
|
1960
2506
|
font-weight: 800;
|
|
1961
2507
|
cursor: pointer;
|
|
1962
2508
|
}
|
|
1963
2509
|
|
|
1964
|
-
[data-ui][data-
|
|
1965
|
-
[data-ui][data-
|
|
2510
|
+
[data-ui][data-mode] :where(input[type="file"]:hover)::file-selector-button,
|
|
2511
|
+
[data-ui][data-mode] :where(input[type="file"]:hover)::-webkit-file-upload-button {
|
|
1966
2512
|
background: var(--usk-native-primary-hover);
|
|
1967
2513
|
border-color: var(--usk-native-primary-hover);
|
|
1968
2514
|
}
|
|
1969
2515
|
|
|
1970
|
-
[data-ui][data-
|
|
1971
|
-
[data-ui][data-
|
|
2516
|
+
[data-ui][data-mode] :where(input[type="file"]:focus-visible)::file-selector-button,
|
|
2517
|
+
[data-ui][data-mode] :where(input[type="file"]:focus-visible)::-webkit-file-upload-button {
|
|
1972
2518
|
box-shadow: var(--usk-native-focus-ring);
|
|
1973
2519
|
}
|
|
1974
2520
|
|
|
1975
|
-
[data-ui][data-
|
|
1976
|
-
[data-ui][data-
|
|
2521
|
+
[data-ui][data-mode] :where(input[type="file"]:active)::file-selector-button,
|
|
2522
|
+
[data-ui][data-mode] :where(input[type="file"]:active)::-webkit-file-upload-button {
|
|
1977
2523
|
filter: brightness(.96);
|
|
1978
2524
|
}
|
|
1979
2525
|
|
|
1980
|
-
[data-ui][data-
|
|
1981
|
-
[data-ui][data-
|
|
2526
|
+
[data-ui][data-mode] :where(input[type="file"]:disabled)::file-selector-button,
|
|
2527
|
+
[data-ui][data-mode] :where(input[type="file"]:disabled)::-webkit-file-upload-button {
|
|
1982
2528
|
color: var(--usk-native-text-muted);
|
|
1983
2529
|
background: var(--usk-native-surface-soft);
|
|
1984
2530
|
border-color: var(--usk-native-border);
|
|
1985
2531
|
cursor: not-allowed;
|
|
1986
2532
|
}
|
|
1987
2533
|
|
|
1988
|
-
[data-ui][data-
|
|
2534
|
+
[data-ui][data-mode] :where(input:read-only:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea:read-only) {
|
|
1989
2535
|
background: var(--usk-native-surface-soft);
|
|
1990
2536
|
}
|
|
1991
2537
|
|
|
1992
|
-
[data-ui][data-
|
|
2538
|
+
[data-ui][data-mode] :where(input:required, textarea:required, select:required) {
|
|
1993
2539
|
box-shadow: inset .22rem 0 0 var(--usk-native-indicator);
|
|
1994
2540
|
}
|
|
1995
2541
|
|
|
1996
|
-
[data-ui][data-
|
|
2542
|
+
[data-ui][data-mode] :where(input:user-valid, textarea:user-valid, select:user-valid, .is-valid) {
|
|
1997
2543
|
border-color: var(--usk-native-success);
|
|
1998
2544
|
}
|
|
1999
2545
|
|
|
2000
|
-
[data-ui][data-
|
|
2546
|
+
[data-ui][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
|
|
2001
2547
|
border-color: var(--usk-native-danger);
|
|
2002
2548
|
}
|
|
2003
2549
|
|
|
2004
|
-
[data-ui][data-
|
|
2550
|
+
[data-ui][data-mode] :where(input[type="checkbox"]:indeterminate, input[type="radio"]:indeterminate) {
|
|
2551
|
+
background: linear-gradient(var(--usk-native-choice-mark-color), var(--usk-native-choice-mark-color)) center / 58% .15rem no-repeat var(--usk-native-choice-checked-background);
|
|
2005
2552
|
accent-color: var(--usk-native-warning);
|
|
2006
2553
|
}
|
|
2007
2554
|
|
|
2008
|
-
[data-ui][data-
|
|
2555
|
+
[data-ui][data-mode] :where(button:active, input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active) {
|
|
2009
2556
|
filter: brightness(.96);
|
|
2010
2557
|
}
|
|
2011
2558
|
|
|
2012
|
-
[data-ui][data-
|
|
2559
|
+
[data-ui][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
|
|
2013
2560
|
color: var(--usk-native-text-muted);
|
|
2014
2561
|
background: var(--usk-native-surface-soft);
|
|
2015
2562
|
border-color: var(--usk-native-border);
|
|
@@ -2018,37 +2565,36 @@
|
|
|
2018
2565
|
cursor: not-allowed;
|
|
2019
2566
|
}
|
|
2020
2567
|
|
|
2021
|
-
[data-ui][data-
|
|
2568
|
+
[data-ui][data-mode] :where(table) {
|
|
2022
2569
|
width: 100%;
|
|
2023
2570
|
margin: 1rem 0;
|
|
2024
|
-
overflow: hidden;
|
|
2025
2571
|
background: var(--usk-native-surface);
|
|
2026
2572
|
border: var(--usk-native-border-width) solid var(--usk-native-border);
|
|
2027
2573
|
border-radius: var(--usk-native-radius);
|
|
2028
2574
|
border-collapse: collapse;
|
|
2029
2575
|
}
|
|
2030
2576
|
|
|
2031
|
-
[data-ui][data-
|
|
2577
|
+
[data-ui][data-mode] :where(caption) {
|
|
2032
2578
|
caption-side: bottom;
|
|
2033
2579
|
padding: .75rem;
|
|
2034
2580
|
color: var(--usk-native-text-muted);
|
|
2035
2581
|
font-size: .9rem;
|
|
2036
2582
|
}
|
|
2037
2583
|
|
|
2038
|
-
[data-ui][data-
|
|
2584
|
+
[data-ui][data-mode] :where(th, td) {
|
|
2039
2585
|
padding: .8rem .9rem;
|
|
2040
2586
|
text-align: left;
|
|
2041
2587
|
border-bottom: var(--usk-native-border-width) solid var(--usk-native-border);
|
|
2042
2588
|
}
|
|
2043
2589
|
|
|
2044
|
-
[data-ui][data-
|
|
2590
|
+
[data-ui][data-mode] :where(th) {
|
|
2045
2591
|
color: var(--usk-native-text);
|
|
2046
2592
|
background: var(--usk-native-surface-soft);
|
|
2047
2593
|
}
|
|
2048
2594
|
|
|
2049
|
-
[data-ui][data-
|
|
2595
|
+
[data-ui][data-mode] :where(td) { color: var(--usk-native-text-muted); }
|
|
2050
2596
|
|
|
2051
|
-
[data-ui][data-
|
|
2597
|
+
[data-ui][data-mode] :where(details) {
|
|
2052
2598
|
margin: 1rem 0;
|
|
2053
2599
|
padding: .9rem 1rem;
|
|
2054
2600
|
color: var(--usk-native-text);
|
|
@@ -2057,13 +2603,13 @@
|
|
|
2057
2603
|
border-radius: var(--usk-native-radius);
|
|
2058
2604
|
}
|
|
2059
2605
|
|
|
2060
|
-
[data-ui][data-
|
|
2606
|
+
[data-ui][data-mode] :where(summary) {
|
|
2061
2607
|
color: var(--usk-native-text);
|
|
2062
2608
|
font-weight: 900;
|
|
2063
2609
|
cursor: pointer;
|
|
2064
2610
|
}
|
|
2065
2611
|
|
|
2066
|
-
[data-ui][data-
|
|
2612
|
+
[data-ui][data-mode] :where(dialog) {
|
|
2067
2613
|
max-width: min(92vw, 42rem);
|
|
2068
2614
|
padding: 0;
|
|
2069
2615
|
color: var(--usk-native-text);
|
|
@@ -2073,47 +2619,68 @@
|
|
|
2073
2619
|
box-shadow: var(--usk-native-shadow-md), 0 30px 80px rgb(0 0 0 / .42);
|
|
2074
2620
|
}
|
|
2075
2621
|
|
|
2076
|
-
[data-ui][data-
|
|
2622
|
+
[data-ui][data-mode] :where(dialog p) { color: inherit; }
|
|
2077
2623
|
|
|
2078
|
-
[data-ui][data-
|
|
2624
|
+
[data-ui][data-mode] :where(dialog)::backdrop { background: rgb(0 0 0 / .62); }
|
|
2079
2625
|
|
|
2080
|
-
[data-ui][data-
|
|
2626
|
+
[data-ui][data-mode] :where(progress, meter) {
|
|
2627
|
+
-webkit-appearance: none;
|
|
2628
|
+
appearance: none;
|
|
2081
2629
|
width: 100%;
|
|
2082
|
-
min-height:
|
|
2630
|
+
min-height: var(--usk-native-progress-size);
|
|
2083
2631
|
accent-color: var(--usk-native-primary);
|
|
2084
2632
|
}
|
|
2085
2633
|
|
|
2086
|
-
[data-ui][data-
|
|
2087
|
-
|
|
2088
|
-
background:
|
|
2089
|
-
border
|
|
2634
|
+
[data-ui][data-mode] :where(progress:not([value])) {
|
|
2635
|
+
background: repeating-linear-gradient(115deg, var(--usk-native-progress-track-background) 0 .5rem, var(--usk-native-progress-value-background) .5rem 1rem);
|
|
2636
|
+
background-size: 200% 100%;
|
|
2637
|
+
border: var(--usk-native-progress-track-border);
|
|
2638
|
+
border-radius: var(--usk-native-progress-track-radius);
|
|
2639
|
+
box-shadow: var(--usk-native-progress-track-shadow);
|
|
2640
|
+
animation: usk-native-progress-indeterminate 1.2s linear infinite;
|
|
2090
2641
|
}
|
|
2091
2642
|
|
|
2092
|
-
|
|
2093
|
-
|
|
2094
|
-
background: var(--usk-native-track-fill);
|
|
2095
|
-
border-radius: inherit;
|
|
2643
|
+
@keyframes usk-native-progress-indeterminate {
|
|
2644
|
+
to { background-position: -2rem 0; }
|
|
2096
2645
|
}
|
|
2097
2646
|
|
|
2098
|
-
[data-ui][data-
|
|
2099
|
-
[data-ui][data-
|
|
2100
|
-
background: var(--usk-native-track-
|
|
2101
|
-
border
|
|
2647
|
+
[data-ui][data-mode] :where(progress, meter)::-webkit-progress-bar,
|
|
2648
|
+
[data-ui][data-mode] :where(meter)::-webkit-meter-bar {
|
|
2649
|
+
background: var(--usk-native-progress-track-background);
|
|
2650
|
+
border: var(--usk-native-progress-track-border);
|
|
2651
|
+
border-radius: var(--usk-native-progress-track-radius);
|
|
2652
|
+
box-shadow: var(--usk-native-progress-track-shadow);
|
|
2653
|
+
}
|
|
2654
|
+
|
|
2655
|
+
[data-ui][data-mode] :where(progress)::-webkit-progress-value,
|
|
2656
|
+
[data-ui][data-mode] :where(meter)::-webkit-meter-optimum-value {
|
|
2657
|
+
background: var(--usk-native-progress-value-background);
|
|
2658
|
+
border-radius: var(--usk-native-progress-value-radius);
|
|
2659
|
+
box-shadow: var(--usk-native-progress-value-shadow);
|
|
2660
|
+
}
|
|
2661
|
+
|
|
2662
|
+
[data-ui][data-mode] :where(progress)::-moz-progress-bar,
|
|
2663
|
+
[data-ui][data-mode] :where(meter)::-moz-meter-bar {
|
|
2664
|
+
background: var(--usk-native-progress-value-background);
|
|
2665
|
+
border-radius: var(--usk-native-progress-value-radius);
|
|
2666
|
+
box-shadow: var(--usk-native-progress-value-shadow);
|
|
2102
2667
|
}
|
|
2103
2668
|
|
|
2104
|
-
[data-ui][data-
|
|
2105
|
-
|
|
2669
|
+
[data-ui][data-mode] :where(meter)::-webkit-meter-optimum-value { background: var(--usk-native-meter-optimum-background); }
|
|
2670
|
+
|
|
2671
|
+
[data-ui][data-mode] :where(meter)::-webkit-meter-suboptimum-value {
|
|
2672
|
+
background: var(--usk-native-meter-suboptimum-background);
|
|
2106
2673
|
}
|
|
2107
2674
|
|
|
2108
|
-
[data-ui][data-
|
|
2109
|
-
background: var(--usk-native-
|
|
2675
|
+
[data-ui][data-mode] :where(meter)::-webkit-meter-even-less-good-value {
|
|
2676
|
+
background: var(--usk-native-meter-critical-background);
|
|
2110
2677
|
}
|
|
2111
2678
|
|
|
2112
|
-
[data-ui][data-
|
|
2679
|
+
[data-ui][data-mode] :where(main, section, header, footer, nav, article, aside, address) {
|
|
2113
2680
|
color: var(--usk-native-text);
|
|
2114
2681
|
}
|
|
2115
2682
|
|
|
2116
|
-
[data-ui][data-
|
|
2683
|
+
[data-ui][data-mode] :where(article, aside) {
|
|
2117
2684
|
padding: var(--usk-native-panel-padding);
|
|
2118
2685
|
color: var(--usk-native-text);
|
|
2119
2686
|
background: var(--usk-native-card-bg);
|
|
@@ -2122,113 +2689,132 @@
|
|
|
2122
2689
|
box-shadow: var(--usk-native-shadow);
|
|
2123
2690
|
}
|
|
2124
2691
|
|
|
2125
|
-
[data-ui][data-
|
|
2692
|
+
[data-ui][data-mode] :where(dl) {
|
|
2126
2693
|
margin: 0 0 1rem;
|
|
2127
2694
|
color: var(--usk-native-text-muted);
|
|
2128
2695
|
}
|
|
2129
2696
|
|
|
2130
|
-
[data-ui][data-
|
|
2697
|
+
[data-ui][data-mode] :where(dt) {
|
|
2131
2698
|
color: var(--usk-native-text);
|
|
2132
2699
|
font-weight: 900;
|
|
2133
2700
|
}
|
|
2134
2701
|
|
|
2135
|
-
[data-ui][data-
|
|
2136
|
-
[data-ui][data-
|
|
2137
|
-
[data-ui][data-
|
|
2138
|
-
[data-ui][data-
|
|
2139
|
-
[data-ui][data-
|
|
2140
|
-
[data-ui][data-
|
|
2141
|
-
[data-ui][data-
|
|
2142
|
-
[data-ui][data-
|
|
2143
|
-
[data-ui][data-
|
|
2144
|
-
[data-ui][data-
|
|
2145
|
-
[data-ui][data-
|
|
2146
|
-
[data-ui][data-
|
|
2147
|
-
[data-ui][data-
|
|
2148
|
-
|
|
2149
|
-
[data-ui][data-
|
|
2702
|
+
[data-ui][data-mode] :where(dd) { margin: .25rem 0 .75rem 1.25rem; }
|
|
2703
|
+
[data-ui][data-mode] :where(strong, b) { color: var(--usk-native-text); font-weight: 900; }
|
|
2704
|
+
[data-ui][data-mode] :where(u) { text-decoration-color: var(--usk-native-primary); text-decoration-thickness: .08em; text-underline-offset: .16em; }
|
|
2705
|
+
[data-ui][data-mode] :where(bdi, bdo) { color: var(--usk-native-text); unicode-bidi: isolate; }
|
|
2706
|
+
[data-ui][data-mode] :where(em, i, cite, var, q) { color: var(--usk-native-text); }
|
|
2707
|
+
[data-ui][data-mode] :where(ins) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-success); }
|
|
2708
|
+
[data-ui][data-mode] :where(del, s) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-danger); }
|
|
2709
|
+
[data-ui][data-mode] :where(output) { color: var(--usk-native-text); font-weight: 800; }
|
|
2710
|
+
[data-ui][data-mode] :where(optgroup, option) { color: var(--usk-native-text); background: var(--usk-native-surface); }
|
|
2711
|
+
[data-ui][data-mode] :where(time, data, dfn, ruby) { color: var(--usk-native-text); }
|
|
2712
|
+
[data-ui][data-mode] :where(search) { display: block; color: var(--usk-native-text); }
|
|
2713
|
+
[data-ui][data-mode] :where(selectedcontent) { color: var(--usk-native-text); }
|
|
2714
|
+
[data-ui][data-mode] :where(datalist) { display: none; }
|
|
2715
|
+
|
|
2716
|
+
[data-ui][data-mode] :where(summary, li)::marker {
|
|
2150
2717
|
color: var(--usk-native-indicator);
|
|
2151
2718
|
}
|
|
2152
2719
|
|
|
2153
|
-
[data-ui][data-
|
|
2154
|
-
opacity:
|
|
2720
|
+
[data-ui][data-mode] :where(input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"])::-webkit-calendar-picker-indicator {
|
|
2721
|
+
opacity: var(--usk-native-indicator-opacity);
|
|
2722
|
+
filter: var(--usk-native-indicator-filter);
|
|
2155
2723
|
accent-color: var(--usk-native-indicator);
|
|
2156
2724
|
}
|
|
2157
2725
|
|
|
2158
|
-
[data-ui][data-
|
|
2726
|
+
[data-ui][data-mode] :where(input[type="search"])::-webkit-search-cancel-button {
|
|
2159
2727
|
accent-color: var(--usk-native-indicator);
|
|
2160
2728
|
}
|
|
2161
2729
|
|
|
2162
|
-
[data-ui][data-
|
|
2163
|
-
[data-ui][data-
|
|
2730
|
+
[data-ui][data-mode] :where(input[type="number"])::-webkit-inner-spin-button,
|
|
2731
|
+
[data-ui][data-mode] :where(input[type="number"])::-webkit-outer-spin-button {
|
|
2164
2732
|
opacity: .72;
|
|
2165
2733
|
}
|
|
2166
2734
|
|
|
2167
|
-
[data-ui][data-
|
|
2735
|
+
[data-ui][data-mode] :where(select)::picker-icon {
|
|
2168
2736
|
color: var(--usk-native-indicator);
|
|
2737
|
+
opacity: var(--usk-native-indicator-opacity);
|
|
2738
|
+
filter: var(--usk-native-indicator-filter);
|
|
2169
2739
|
}
|
|
2170
2740
|
|
|
2171
|
-
[data-ui][data-
|
|
2741
|
+
[data-ui][data-mode] :where(:focus-visible) {
|
|
2172
2742
|
outline: 3px solid var(--usk-native-focus);
|
|
2173
2743
|
outline-offset: 3px;
|
|
2174
2744
|
box-shadow: var(--usk-native-focus-ring);
|
|
2175
2745
|
}
|
|
2176
2746
|
|
|
2177
|
-
[data-ui][data-
|
|
2747
|
+
[data-ui][data-mode] :where(:target) {
|
|
2178
2748
|
scroll-margin-top: 6rem;
|
|
2179
2749
|
outline: 3px solid var(--usk-native-focus);
|
|
2180
2750
|
outline-offset: .35rem;
|
|
2181
2751
|
}
|
|
2182
2752
|
|
|
2183
|
-
[data-ui][data-
|
|
2184
|
-
[data-ui][data-
|
|
2185
|
-
[data-ui][data-
|
|
2186
|
-
[data-ui][data-
|
|
2187
|
-
[data-ui][data-
|
|
2188
|
-
[data-ui][data-
|
|
2189
|
-
[data-ui][data-
|
|
2753
|
+
[data-ui][data-mode] :where([aria-current="page"]) { font-weight: 900; }
|
|
2754
|
+
[data-ui][data-mode] :where([aria-busy="true"]) { cursor: progress; }
|
|
2755
|
+
[data-ui][data-mode] :where([hidden]) { display: none !important; }
|
|
2756
|
+
[data-ui][data-mode] ::selection { color: var(--usk-native-on-primary); background: var(--usk-native-primary); }
|
|
2757
|
+
[data-ui][data-mode] ::-webkit-scrollbar { inline-size: var(--usk-native-scrollbar-size); block-size: var(--usk-native-scrollbar-size); }
|
|
2758
|
+
[data-ui][data-mode] ::-webkit-scrollbar-track { background: var(--usk-native-scrollbar-track); }
|
|
2759
|
+
[data-ui][data-mode] ::-webkit-scrollbar-thumb { background: var(--usk-native-scrollbar-thumb); border-radius: var(--usk-native-scrollbar-radius); }
|
|
2190
2760
|
|
|
2191
2761
|
@supports (color: color-mix(in srgb, black, white)) {
|
|
2192
|
-
[data-ui][data-
|
|
2762
|
+
[data-ui][data-mode] {
|
|
2193
2763
|
--usk-native-track: color-mix(in srgb, var(--usk-native-border) 50%, transparent);
|
|
2194
2764
|
}
|
|
2195
2765
|
|
|
2196
|
-
[data-ui][data-
|
|
2766
|
+
[data-ui][data-mode] :where(code, kbd, samp) {
|
|
2197
2767
|
border-color: color-mix(in srgb, var(--usk-native-border) 62%, transparent);
|
|
2198
2768
|
}
|
|
2199
2769
|
|
|
2200
|
-
[data-ui][data-
|
|
2770
|
+
[data-ui][data-mode] :where(mark) {
|
|
2201
2771
|
background: color-mix(in srgb, var(--usk-native-warning) 32%, transparent);
|
|
2202
2772
|
}
|
|
2203
2773
|
|
|
2204
|
-
[data-ui][data-
|
|
2774
|
+
[data-ui][data-mode] :where(fieldset) {
|
|
2205
2775
|
background: color-mix(in srgb, var(--usk-native-card-bg) 88%, transparent);
|
|
2206
2776
|
}
|
|
2207
2777
|
|
|
2208
|
-
[data-ui][data-
|
|
2778
|
+
[data-ui][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
|
|
2209
2779
|
background: color-mix(in srgb, var(--usk-native-surface-soft) 72%, transparent);
|
|
2210
2780
|
}
|
|
2211
2781
|
|
|
2212
|
-
[data-ui][data-
|
|
2782
|
+
[data-ui][data-mode] :where(th) {
|
|
2213
2783
|
background: color-mix(in srgb, var(--usk-native-primary) 10%, transparent);
|
|
2214
2784
|
}
|
|
2215
2785
|
}
|
|
2216
2786
|
|
|
2217
2787
|
@media (prefers-reduced-motion: reduce) {
|
|
2218
|
-
[data-ui][data-
|
|
2219
|
-
[data-ui][data-
|
|
2788
|
+
[data-ui][data-mode] :where(input[type="file"])::file-selector-button,
|
|
2789
|
+
[data-ui][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
|
|
2220
2790
|
transition-duration: 1ms !important;
|
|
2221
2791
|
}
|
|
2792
|
+
|
|
2793
|
+
[data-ui][data-mode] :where(progress:not([value])) {
|
|
2794
|
+
animation: none;
|
|
2795
|
+
}
|
|
2796
|
+
}
|
|
2797
|
+
|
|
2798
|
+
[data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-webkit-slider-runnable-track,
|
|
2799
|
+
[data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-webkit-slider-thumb,
|
|
2800
|
+
[data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-moz-range-track,
|
|
2801
|
+
[data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-moz-range-thumb,
|
|
2802
|
+
[data-ui][data-theme][data-mode="contrast"] :where(progress, meter),
|
|
2803
|
+
[data-ui][data-theme][data-mode="contrast"] :where(progress, meter)::-webkit-progress-bar,
|
|
2804
|
+
[data-ui][data-theme][data-mode="contrast"] :where(progress)::-webkit-progress-value,
|
|
2805
|
+
[data-ui][data-theme][data-mode="contrast"] :where(progress)::-moz-progress-bar {
|
|
2806
|
+
box-shadow: none;
|
|
2807
|
+
filter: none;
|
|
2222
2808
|
}
|
|
2223
2809
|
|
|
2224
2810
|
@media (forced-colors: active) {
|
|
2225
2811
|
@supports (forced-color-adjust: auto) {
|
|
2226
|
-
[data-ui][data-
|
|
2812
|
+
[data-ui][data-mode] :where(input, textarea, select, button, progress, meter) {
|
|
2227
2813
|
forced-color-adjust: auto;
|
|
2228
2814
|
}
|
|
2229
2815
|
}
|
|
2230
2816
|
|
|
2231
|
-
[data-ui][data-
|
|
2817
|
+
[data-ui][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
|
|
2232
2818
|
border-color: Mark;
|
|
2233
2819
|
}
|
|
2234
2820
|
}
|
|
@@ -2244,7 +2830,7 @@
|
|
|
2244
2830
|
========================================================= */
|
|
2245
2831
|
|
|
2246
2832
|
@layer ui-style-kit.components {
|
|
2247
|
-
[data-ui][data-
|
|
2833
|
+
[data-ui][data-mode] :where(
|
|
2248
2834
|
h1,
|
|
2249
2835
|
h2,
|
|
2250
2836
|
h3,
|
|
@@ -2261,6 +2847,9 @@
|
|
|
2261
2847
|
label,
|
|
2262
2848
|
legend,
|
|
2263
2849
|
summary,
|
|
2850
|
+
strong,
|
|
2851
|
+
small,
|
|
2852
|
+
em,
|
|
2264
2853
|
code,
|
|
2265
2854
|
kbd,
|
|
2266
2855
|
samp,
|
|
@@ -2270,10 +2859,11 @@
|
|
|
2270
2859
|
) {
|
|
2271
2860
|
max-inline-size: 100%;
|
|
2272
2861
|
min-inline-size: 0;
|
|
2273
|
-
overflow-wrap:
|
|
2862
|
+
overflow-wrap: break-word;
|
|
2863
|
+
word-break: normal;
|
|
2274
2864
|
}
|
|
2275
2865
|
|
|
2276
|
-
[data-ui][data-
|
|
2866
|
+
[data-ui][data-mode] :where(
|
|
2277
2867
|
[class~="saas-surface"],
|
|
2278
2868
|
[class~="saas-surface-sm"],
|
|
2279
2869
|
[class~="saas-surface-lg"],
|
|
@@ -2395,13 +2985,12 @@
|
|
|
2395
2985
|
[class~="rg-alert"],
|
|
2396
2986
|
[class~="rg-table-wrap"],
|
|
2397
2987
|
[class~="rg-nav"]
|
|
2398
|
-
), [data-ui]:where([data-ui="retro-glass"])[data-
|
|
2988
|
+
), [data-ui]:where([data-ui="retro-glass"])[data-mode] :where([class~="saas-surface"],[class~="saas-surface-sm"],[class~="saas-surface-lg"],.ui-card,[class~="saas-panel"],.ui-toolbar,[class~="saas-well"],[class~="saas-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="bento-surface"],[class~="bento-surface-sm"],[class~="bento-surface-lg"],.ui-card,[class~="bento-panel"],.ui-toolbar,[class~="bento-well"],[class~="bento-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="max-surface"],[class~="max-surface-sm"],[class~="max-surface-lg"],.ui-card,[class~="max-panel"],.ui-toolbar,[class~="max-well"],[class~="max-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="bau-surface"],[class~="bau-surface-sm"],[class~="bau-surface-lg"],.ui-card,[class~="bau-panel"],.ui-toolbar,[class~="bau-well"],[class~="bau-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="tactile-surface"],[class~="tactile-surface-sm"],[class~="tactile-surface-lg"],.ui-card,[class~="tactile-panel"],.ui-toolbar,[class~="tactile-well"],[class~="tactile-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="neo-surface"],[class~="neo-surface-sm"],[class~="neo-surface-lg"],.ui-card,[class~="neo-panel"],.ui-toolbar,[class~="neo-well"],[class~="neo-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="retro-surface"],[class~="retro-surface-sm"],[class~="retro-surface-lg"],.ui-card,[class~="retro-panel"],.ui-toolbar,[class~="retro-well"],[class~="retro-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="brutal-surface"],.ui-card,[class~="brutal-panel"],.ui-toolbar,[class~="brutal-well"],[class~="brutal-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="cyber-panel"],.ui-toolbar,[class~="cyber-well"],[class~="cyber-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="y2k-panel"],.ui-toolbar,[class~="y2k-well"],[class~="y2k-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="rg-panel"],.ui-toolbar,[class~="rg-well"],[class~="rg-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav) {
|
|
2399
2989
|
max-inline-size: 100%;
|
|
2400
2990
|
min-inline-size: 0;
|
|
2401
|
-
overflow-wrap: anywhere;
|
|
2402
2991
|
}
|
|
2403
2992
|
|
|
2404
|
-
[data-ui][data-
|
|
2993
|
+
[data-ui][data-mode] :where(
|
|
2405
2994
|
[class~="saas-button"],
|
|
2406
2995
|
[class~="saas-icon-button"],
|
|
2407
2996
|
[class~="saas-badge"],
|
|
@@ -2446,13 +3035,15 @@
|
|
|
2446
3035
|
[class~="rg-icon-button"],
|
|
2447
3036
|
[class~="rg-badge"],
|
|
2448
3037
|
[class~="rg-nav-link"]
|
|
2449
|
-
), [data-ui]:where([data-ui="retro-glass"])[data-
|
|
3038
|
+
), [data-ui]:where([data-ui="retro-glass"])[data-mode] :where(.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link) {
|
|
2450
3039
|
max-inline-size: 100%;
|
|
2451
3040
|
min-inline-size: 0;
|
|
3041
|
+
overflow-wrap: break-word;
|
|
3042
|
+
word-break: normal;
|
|
2452
3043
|
white-space: normal;
|
|
2453
3044
|
}
|
|
2454
3045
|
|
|
2455
|
-
[data-ui][data-
|
|
3046
|
+
[data-ui][data-mode] :where(
|
|
2456
3047
|
.saas-button,
|
|
2457
3048
|
.saas-icon-button,
|
|
2458
3049
|
.saas-button-pill,
|
|
@@ -2486,7 +3077,7 @@
|
|
|
2486
3077
|
.rg-button,
|
|
2487
3078
|
.rg-icon-button,
|
|
2488
3079
|
.rg-button-pill
|
|
2489
|
-
), [data-ui]:where([data-ui="retro-glass"])[data-
|
|
3080
|
+
), [data-ui]:where([data-ui="retro-glass"])[data-mode] :where(.ui-button,.ui-icon-button,.saas-button-pill,.ui-button,.ui-icon-button,.bento-button-pill,.ui-button,.ui-icon-button,.max-button-pill,.ui-button,.ui-icon-button,.bau-button-pill,.ui-button,.ui-icon-button,.tactile-button-pill,.ui-button,.ui-icon-button,.neo-button-pill,.ui-button,.ui-icon-button,.retro-button-pill,.ui-button,.ui-icon-button,.brutal-button-pill,.ui-button,.ui-icon-button,.cyber-button-pill,.ui-button,.ui-icon-button,.y2k-button-pill,.ui-button,.ui-icon-button,.rg-button-pill) {
|
|
2490
3081
|
box-sizing: border-box;
|
|
2491
3082
|
display: inline-flex;
|
|
2492
3083
|
align-items: center;
|
|
@@ -2498,7 +3089,7 @@
|
|
|
2498
3089
|
vertical-align: middle;
|
|
2499
3090
|
}
|
|
2500
3091
|
|
|
2501
|
-
[data-ui][data-
|
|
3092
|
+
[data-ui][data-mode] :where(
|
|
2502
3093
|
.saas-button-pill,
|
|
2503
3094
|
.bento-button-pill,
|
|
2504
3095
|
.max-button-pill,
|
|
@@ -2521,7 +3112,8 @@
|
|
|
2521
3112
|
font-weight: 850;
|
|
2522
3113
|
text-align: center;
|
|
2523
3114
|
text-decoration: none;
|
|
2524
|
-
overflow-wrap:
|
|
3115
|
+
overflow-wrap: break-word;
|
|
3116
|
+
word-break: normal;
|
|
2525
3117
|
white-space: normal;
|
|
2526
3118
|
cursor: pointer;
|
|
2527
3119
|
transition:
|
|
@@ -2555,7 +3147,7 @@
|
|
|
2555
3147
|
.y2k-button-pill:hover { border-color: var(--y2k-primary-hover); filter: brightness(1.04); }
|
|
2556
3148
|
.rg-button-pill:hover { border-color: var(--rg-primary-hover); filter: brightness(1.04); }
|
|
2557
3149
|
|
|
2558
|
-
[data-ui][data-
|
|
3150
|
+
[data-ui][data-mode] :where(
|
|
2559
3151
|
.saas-button-pill:active,
|
|
2560
3152
|
.saas-button-pill[aria-pressed="true"],
|
|
2561
3153
|
.bento-button-pill:active,
|
|
@@ -2594,7 +3186,7 @@
|
|
|
2594
3186
|
.y2k-button-pill:focus-visible { outline: 3px solid var(--y2k-focus); outline-offset: 3px; box-shadow: var(--y2k-focus-ring); }
|
|
2595
3187
|
.rg-button-pill:focus-visible { outline: 3px solid var(--rg-focus); outline-offset: 3px; box-shadow: var(--rg-focus-ring); }
|
|
2596
3188
|
|
|
2597
|
-
[data-ui][data-
|
|
3189
|
+
[data-ui][data-mode] :where(
|
|
2598
3190
|
.saas-button-pill:disabled,
|
|
2599
3191
|
.saas-button-pill[aria-disabled="true"],
|
|
2600
3192
|
.bento-button-pill:disabled,
|
|
@@ -2624,7 +3216,7 @@
|
|
|
2624
3216
|
transform: none;
|
|
2625
3217
|
}
|
|
2626
3218
|
|
|
2627
|
-
[data-ui][data-
|
|
3219
|
+
[data-ui][data-mode] :where(
|
|
2628
3220
|
.saas-tooltip,
|
|
2629
3221
|
.saas-tooltip-top,
|
|
2630
3222
|
.saas-tooltip-right,
|
|
@@ -2683,16 +3275,17 @@
|
|
|
2683
3275
|
) {
|
|
2684
3276
|
max-inline-size: min(18rem, calc(100vw - 2rem));
|
|
2685
3277
|
text-align: start;
|
|
2686
|
-
overflow-wrap:
|
|
3278
|
+
overflow-wrap: break-word;
|
|
3279
|
+
word-break: normal;
|
|
2687
3280
|
}
|
|
2688
3281
|
|
|
2689
3282
|
/* Directional tooltips detach only from an explicit anchor so static tooltip chips keep normal-flow sizing. */
|
|
2690
|
-
[data-ui][data-
|
|
2691
|
-
[data-ui][data-
|
|
3283
|
+
[data-ui][data-mode]:where([data-ui-tooltip-anchor]),
|
|
3284
|
+
[data-ui][data-mode] :where([data-ui-tooltip-anchor]) {
|
|
2692
3285
|
position: relative;
|
|
2693
3286
|
}
|
|
2694
3287
|
|
|
2695
|
-
[data-ui][data-
|
|
3288
|
+
[data-ui][data-mode] :where(
|
|
2696
3289
|
[data-ui-tooltip-anchor] > .saas-tooltip-top,
|
|
2697
3290
|
[data-ui-tooltip-anchor] > .saas-tooltip-right,
|
|
2698
3291
|
[data-ui-tooltip-anchor] > .saas-tooltip-bottom,
|
|
@@ -2742,10 +3335,10 @@
|
|
|
2742
3335
|
z-index: 20;
|
|
2743
3336
|
}
|
|
2744
3337
|
|
|
2745
|
-
[data-ui][data-
|
|
2746
|
-
[data-ui][data-
|
|
2747
|
-
[data-ui][data-
|
|
2748
|
-
[data-ui][data-
|
|
3338
|
+
[data-ui][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-top, [data-ui-tooltip-anchor] > .bento-tooltip-top, [data-ui-tooltip-anchor] > .max-tooltip-top, [data-ui-tooltip-anchor] > .bau-tooltip-top, [data-ui-tooltip-anchor] > .tactile-tooltip-top, [data-ui-tooltip-anchor] > .neo-tooltip-top, [data-ui-tooltip-anchor] > .retro-tooltip-top, [data-ui-tooltip-anchor] > .brutal-tooltip-top, [data-ui-tooltip-anchor] > .cyber-tooltip-top, [data-ui-tooltip-anchor] > .y2k-tooltip-top, [data-ui-tooltip-anchor] > .rg-tooltip-top) { inset-block-end: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
|
|
3339
|
+
[data-ui][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-right, [data-ui-tooltip-anchor] > .bento-tooltip-right, [data-ui-tooltip-anchor] > .max-tooltip-right, [data-ui-tooltip-anchor] > .bau-tooltip-right, [data-ui-tooltip-anchor] > .tactile-tooltip-right, [data-ui-tooltip-anchor] > .neo-tooltip-right, [data-ui-tooltip-anchor] > .retro-tooltip-right, [data-ui-tooltip-anchor] > .brutal-tooltip-right, [data-ui-tooltip-anchor] > .cyber-tooltip-right, [data-ui-tooltip-anchor] > .y2k-tooltip-right, [data-ui-tooltip-anchor] > .rg-tooltip-right) { inset-inline-start: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
|
|
3340
|
+
[data-ui][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-bottom, [data-ui-tooltip-anchor] > .bento-tooltip-bottom, [data-ui-tooltip-anchor] > .max-tooltip-bottom, [data-ui-tooltip-anchor] > .bau-tooltip-bottom, [data-ui-tooltip-anchor] > .tactile-tooltip-bottom, [data-ui-tooltip-anchor] > .neo-tooltip-bottom, [data-ui-tooltip-anchor] > .retro-tooltip-bottom, [data-ui-tooltip-anchor] > .brutal-tooltip-bottom, [data-ui-tooltip-anchor] > .cyber-tooltip-bottom, [data-ui-tooltip-anchor] > .y2k-tooltip-bottom, [data-ui-tooltip-anchor] > .rg-tooltip-bottom) { inset-block-start: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
|
|
3341
|
+
[data-ui][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-left, [data-ui-tooltip-anchor] > .bento-tooltip-left, [data-ui-tooltip-anchor] > .max-tooltip-left, [data-ui-tooltip-anchor] > .bau-tooltip-left, [data-ui-tooltip-anchor] > .tactile-tooltip-left, [data-ui-tooltip-anchor] > .neo-tooltip-left, [data-ui-tooltip-anchor] > .retro-tooltip-left, [data-ui-tooltip-anchor] > .brutal-tooltip-left, [data-ui-tooltip-anchor] > .cyber-tooltip-left, [data-ui-tooltip-anchor] > .y2k-tooltip-left, [data-ui-tooltip-anchor] > .rg-tooltip-left) { inset-inline-end: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
|
|
2749
3342
|
|
|
2750
3343
|
.saas-pill { border-radius: var(--saas-radius-pill); }
|
|
2751
3344
|
.bento-pill { border-radius: var(--bento-radius-pill); }
|
|
@@ -2811,7 +3404,7 @@
|
|
|
2811
3404
|
.saas-disabled, .bento-disabled, .max-disabled, .bau-disabled, .tactile-disabled, .neo-disabled, .retro-disabled, .brutal-disabled, .cyber-disabled, .y2k-disabled, .rg-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
|
|
2812
3405
|
|
|
2813
3406
|
.saas-button-ghost, .bento-button-ghost, .max-button-ghost, .bau-button-ghost, .tactile-button-ghost, .neo-button-ghost, .retro-button-ghost, .brutal-button-ghost, .cyber-button-ghost, .y2k-button-ghost, .rg-button-ghost, :where([data-ui="retro-glass"]) .ui-button:where([data-ui-variant="ghost"]) {
|
|
2814
|
-
color: var(--usk-native-primary);
|
|
3407
|
+
color: var(--usk-primary-ink, var(--usk-native-primary));
|
|
2815
3408
|
background: transparent;
|
|
2816
3409
|
border-color: var(--usk-native-border);
|
|
2817
3410
|
}
|
|
@@ -2895,15 +3488,77 @@
|
|
|
2895
3488
|
}
|
|
2896
3489
|
}
|
|
2897
3490
|
|
|
2898
|
-
|
|
2899
|
-
|
|
2900
|
-
|
|
2901
|
-
|
|
2902
|
-
|
|
2903
|
-
|
|
2904
|
-
|
|
2905
|
-
|
|
2906
|
-
.
|
|
3491
|
+
/**
|
|
3492
|
+
* Normalizes the split-line trust seal hierarchy across every visual preset.
|
|
3493
|
+
* Both lines inherit their seal's paired foreground instead of native page-text paint.
|
|
3494
|
+
* The root attributes intentionally raise specificity within the preset layer
|
|
3495
|
+
* so later style-specific defaults cannot collapse the number and caption.
|
|
3496
|
+
*/
|
|
3497
|
+
@layer ui-style-kit.presets {
|
|
3498
|
+
[data-ui][data-mode] :where(
|
|
3499
|
+
.saas-badge-seal,
|
|
3500
|
+
.bento-badge-seal,
|
|
3501
|
+
.max-badge-seal,
|
|
3502
|
+
.bau-badge-seal,
|
|
3503
|
+
.tactile-badge-seal,
|
|
3504
|
+
.neo-badge-seal,
|
|
3505
|
+
.retro-badge-seal,
|
|
3506
|
+
.brutal-badge-seal,
|
|
3507
|
+
.cyber-badge-seal,
|
|
3508
|
+
.y2k-badge-seal,
|
|
3509
|
+
.rg-badge-seal,
|
|
3510
|
+
.luxe-badge-seal,
|
|
3511
|
+
.organic-badge-seal,
|
|
3512
|
+
.utility-badge-seal,
|
|
3513
|
+
.blueprint-badge-seal,
|
|
3514
|
+
.deco-badge-seal,
|
|
3515
|
+
.clay-badge-seal,
|
|
3516
|
+
.terminal-badge-seal,
|
|
3517
|
+
.paper-badge-seal,
|
|
3518
|
+
.noir-badge-seal
|
|
3519
|
+
) > strong {
|
|
3520
|
+
color: inherit;
|
|
3521
|
+
font-size: 1.5rem;
|
|
3522
|
+
line-height: .9;
|
|
3523
|
+
}
|
|
3524
|
+
|
|
3525
|
+
[data-ui][data-mode] :where(
|
|
3526
|
+
.saas-badge-seal,
|
|
3527
|
+
.bento-badge-seal,
|
|
3528
|
+
.max-badge-seal,
|
|
3529
|
+
.bau-badge-seal,
|
|
3530
|
+
.tactile-badge-seal,
|
|
3531
|
+
.neo-badge-seal,
|
|
3532
|
+
.retro-badge-seal,
|
|
3533
|
+
.brutal-badge-seal,
|
|
3534
|
+
.cyber-badge-seal,
|
|
3535
|
+
.y2k-badge-seal,
|
|
3536
|
+
.rg-badge-seal,
|
|
3537
|
+
.luxe-badge-seal,
|
|
3538
|
+
.organic-badge-seal,
|
|
3539
|
+
.utility-badge-seal,
|
|
3540
|
+
.blueprint-badge-seal,
|
|
3541
|
+
.deco-badge-seal,
|
|
3542
|
+
.clay-badge-seal,
|
|
3543
|
+
.terminal-badge-seal,
|
|
3544
|
+
.paper-badge-seal,
|
|
3545
|
+
.noir-badge-seal
|
|
3546
|
+
) > small {
|
|
3547
|
+
color: inherit;
|
|
3548
|
+
font-size: .8125rem;
|
|
3549
|
+
line-height: 1;
|
|
3550
|
+
}
|
|
3551
|
+
}
|
|
3552
|
+
|
|
3553
|
+
/* BEGIN GENERATED 2.2 PRESET COMPONENT FOUNDATIONS */
|
|
3554
|
+
/* Generated by scripts/generate-expanded-components.mjs from manifest.json. */
|
|
3555
|
+
@layer ui-style-kit.components {
|
|
3556
|
+
[data-ui][data-mode] :where(
|
|
3557
|
+
.luxe-surface,
|
|
3558
|
+
.luxe-surface-sm,
|
|
3559
|
+
.luxe-surface-lg,
|
|
3560
|
+
.luxe-card,
|
|
3561
|
+
.luxe-card-service,
|
|
2907
3562
|
.luxe-card-feature,
|
|
2908
3563
|
.luxe-panel,
|
|
2909
3564
|
.luxe-toolbar,
|
|
@@ -3061,13 +3716,12 @@
|
|
|
3061
3716
|
.noir-feature-item,
|
|
3062
3717
|
.noir-callout-bar,
|
|
3063
3718
|
.noir-media-scrim
|
|
3064
|
-
), [data-ui]:where([data-ui="retro-glass"])[data-
|
|
3719
|
+
), [data-ui]:where([data-ui="retro-glass"])[data-mode] :where(.luxe-surface,.luxe-surface-sm,.luxe-surface-lg,.ui-card,.luxe-card-service,.luxe-card-feature,.luxe-panel,.ui-toolbar,.luxe-well,.luxe-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.luxe-feature-strip,.luxe-feature-item,.luxe-callout-bar,.luxe-media-scrim,.organic-surface,.organic-surface-sm,.organic-surface-lg,.ui-card,.organic-card-service,.organic-card-feature,.organic-panel,.ui-toolbar,.organic-well,.organic-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.organic-feature-strip,.organic-feature-item,.organic-callout-bar,.organic-media-scrim,.utility-surface,.utility-surface-sm,.utility-surface-lg,.ui-card,.utility-card-service,.utility-card-feature,.utility-panel,.ui-toolbar,.utility-well,.utility-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.utility-feature-strip,.utility-feature-item,.utility-callout-bar,.utility-media-scrim,.blueprint-surface,.blueprint-surface-sm,.blueprint-surface-lg,.ui-card,.blueprint-card-service,.blueprint-card-feature,.blueprint-panel,.ui-toolbar,.blueprint-well,.blueprint-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.blueprint-feature-strip,.blueprint-feature-item,.blueprint-callout-bar,.blueprint-media-scrim,.deco-surface,.deco-surface-sm,.deco-surface-lg,.ui-card,.deco-card-service,.deco-card-feature,.deco-panel,.ui-toolbar,.deco-well,.deco-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.deco-feature-strip,.deco-feature-item,.deco-callout-bar,.deco-media-scrim,.clay-surface,.clay-surface-sm,.clay-surface-lg,.ui-card,.clay-card-service,.clay-card-feature,.clay-panel,.ui-toolbar,.clay-well,.clay-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.clay-feature-strip,.clay-feature-item,.clay-callout-bar,.clay-media-scrim,.terminal-surface,.terminal-surface-sm,.terminal-surface-lg,.ui-card,.terminal-card-service,.terminal-card-feature,.terminal-panel,.ui-toolbar,.terminal-well,.terminal-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.terminal-feature-strip,.terminal-feature-item,.terminal-callout-bar,.terminal-media-scrim,.paper-surface,.paper-surface-sm,.paper-surface-lg,.ui-card,.paper-card-service,.paper-card-feature,.paper-panel,.ui-toolbar,.paper-well,.paper-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.paper-feature-strip,.paper-feature-item,.paper-callout-bar,.paper-media-scrim,.noir-surface,.noir-surface-sm,.noir-surface-lg,.ui-card,.noir-card-service,.noir-card-feature,.noir-panel,.ui-toolbar,.noir-well,.noir-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.noir-feature-strip,.noir-feature-item,.noir-callout-bar,.noir-media-scrim) {
|
|
3065
3720
|
max-inline-size: 100%;
|
|
3066
3721
|
min-inline-size: 0;
|
|
3067
|
-
overflow-wrap: anywhere;
|
|
3068
3722
|
}
|
|
3069
3723
|
|
|
3070
|
-
[data-ui][data-
|
|
3724
|
+
[data-ui][data-mode] :where(
|
|
3071
3725
|
.luxe-button,
|
|
3072
3726
|
.luxe-icon-button,
|
|
3073
3727
|
.luxe-button-cut,
|
|
@@ -3140,13 +3794,15 @@
|
|
|
3140
3794
|
.noir-badge-seal,
|
|
3141
3795
|
.noir-nav-link,
|
|
3142
3796
|
.noir-icon-medallion
|
|
3143
|
-
), [data-ui]:where([data-ui="retro-glass"])[data-
|
|
3797
|
+
), [data-ui]:where([data-ui="retro-glass"])[data-mode] :where(.ui-button,.ui-icon-button,.luxe-button-cut,.luxe-button-outline-heavy,.ui-badge,.luxe-badge-seal,.ui-nav-link,.luxe-icon-medallion,.ui-button,.ui-icon-button,.organic-button-cut,.organic-button-outline-heavy,.ui-badge,.organic-badge-seal,.ui-nav-link,.organic-icon-medallion,.ui-button,.ui-icon-button,.utility-button-cut,.utility-button-outline-heavy,.ui-badge,.utility-badge-seal,.ui-nav-link,.utility-icon-medallion,.ui-button,.ui-icon-button,.blueprint-button-cut,.blueprint-button-outline-heavy,.ui-badge,.blueprint-badge-seal,.ui-nav-link,.blueprint-icon-medallion,.ui-button,.ui-icon-button,.deco-button-cut,.deco-button-outline-heavy,.ui-badge,.deco-badge-seal,.ui-nav-link,.deco-icon-medallion,.ui-button,.ui-icon-button,.clay-button-cut,.clay-button-outline-heavy,.ui-badge,.clay-badge-seal,.ui-nav-link,.clay-icon-medallion,.ui-button,.ui-icon-button,.terminal-button-cut,.terminal-button-outline-heavy,.ui-badge,.terminal-badge-seal,.ui-nav-link,.terminal-icon-medallion,.ui-button,.ui-icon-button,.paper-button-cut,.paper-button-outline-heavy,.ui-badge,.paper-badge-seal,.ui-nav-link,.paper-icon-medallion,.ui-button,.ui-icon-button,.noir-button-cut,.noir-button-outline-heavy,.ui-badge,.noir-badge-seal,.ui-nav-link,.noir-icon-medallion) {
|
|
3144
3798
|
max-inline-size: 100%;
|
|
3145
3799
|
min-inline-size: 0;
|
|
3800
|
+
overflow-wrap: break-word;
|
|
3801
|
+
word-break: normal;
|
|
3146
3802
|
white-space: normal;
|
|
3147
3803
|
}
|
|
3148
3804
|
|
|
3149
|
-
[data-ui][data-
|
|
3805
|
+
[data-ui][data-mode] :where(
|
|
3150
3806
|
.luxe-button,
|
|
3151
3807
|
.luxe-icon-button,
|
|
3152
3808
|
.luxe-button-pill,
|
|
@@ -3174,7 +3830,7 @@
|
|
|
3174
3830
|
.noir-button,
|
|
3175
3831
|
.noir-icon-button,
|
|
3176
3832
|
.noir-button-pill
|
|
3177
|
-
), [data-ui]:where([data-ui="retro-glass"])[data-
|
|
3833
|
+
), [data-ui]:where([data-ui="retro-glass"])[data-mode] :where(.ui-button,.ui-icon-button,.luxe-button-pill,.ui-button,.ui-icon-button,.organic-button-pill,.ui-button,.ui-icon-button,.utility-button-pill,.ui-button,.ui-icon-button,.blueprint-button-pill,.ui-button,.ui-icon-button,.deco-button-pill,.ui-button,.ui-icon-button,.clay-button-pill,.ui-button,.ui-icon-button,.terminal-button-pill,.ui-button,.ui-icon-button,.paper-button-pill,.ui-button,.ui-icon-button,.noir-button-pill) {
|
|
3178
3834
|
box-sizing: border-box;
|
|
3179
3835
|
display: inline-flex;
|
|
3180
3836
|
align-items: center;
|
|
@@ -3186,7 +3842,7 @@
|
|
|
3186
3842
|
vertical-align: middle;
|
|
3187
3843
|
}
|
|
3188
3844
|
|
|
3189
|
-
[data-ui][data-
|
|
3845
|
+
[data-ui][data-mode] :where(
|
|
3190
3846
|
.luxe-button-pill,
|
|
3191
3847
|
.organic-button-pill,
|
|
3192
3848
|
.utility-button-pill,
|
|
@@ -3207,7 +3863,8 @@
|
|
|
3207
3863
|
font-weight: 850;
|
|
3208
3864
|
text-align: center;
|
|
3209
3865
|
text-decoration: none;
|
|
3210
|
-
overflow-wrap:
|
|
3866
|
+
overflow-wrap: break-word;
|
|
3867
|
+
word-break: normal;
|
|
3211
3868
|
white-space: normal;
|
|
3212
3869
|
cursor: pointer;
|
|
3213
3870
|
transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease;
|
|
@@ -3294,7 +3951,7 @@
|
|
|
3294
3951
|
.noir-rounded-xl { border-radius: var(--noir-radius-xl); }
|
|
3295
3952
|
.noir-surface, .noir-surface-sm, .noir-surface-lg { color: var(--noir-text); background: var(--noir-card-bg); border: 1px solid var(--noir-border); }
|
|
3296
3953
|
|
|
3297
|
-
[data-ui][data-
|
|
3954
|
+
[data-ui][data-mode] :where(
|
|
3298
3955
|
.luxe-button-pill:active,
|
|
3299
3956
|
.luxe-button-pill[aria-pressed="true"],
|
|
3300
3957
|
.organic-button-pill:active,
|
|
@@ -3315,7 +3972,7 @@
|
|
|
3315
3972
|
.noir-button-pill[aria-pressed="true"]
|
|
3316
3973
|
) { transform: translateY(1px); }
|
|
3317
3974
|
|
|
3318
|
-
[data-ui][data-
|
|
3975
|
+
[data-ui][data-mode] :where(
|
|
3319
3976
|
.luxe-button-pill:disabled,
|
|
3320
3977
|
.luxe-button-pill[aria-disabled="true"],
|
|
3321
3978
|
.organic-button-pill:disabled,
|
|
@@ -3336,7 +3993,7 @@
|
|
|
3336
3993
|
.noir-button-pill[aria-disabled="true"]
|
|
3337
3994
|
) { opacity: .55; cursor: not-allowed; filter: none; transform: none; }
|
|
3338
3995
|
|
|
3339
|
-
[data-ui][data-
|
|
3996
|
+
[data-ui][data-mode] :where(
|
|
3340
3997
|
.luxe-tooltip,
|
|
3341
3998
|
.luxe-tooltip-top,
|
|
3342
3999
|
.luxe-tooltip-right,
|
|
@@ -3382,9 +4039,9 @@
|
|
|
3382
4039
|
.noir-tooltip-right,
|
|
3383
4040
|
.noir-tooltip-bottom,
|
|
3384
4041
|
.noir-tooltip-left
|
|
3385
|
-
) { max-inline-size: min(18rem, calc(100vw - 2rem)); text-align: start; overflow-wrap:
|
|
4042
|
+
) { max-inline-size: min(18rem, calc(100vw - 2rem)); text-align: start; overflow-wrap: break-word; word-break: normal; }
|
|
3386
4043
|
|
|
3387
|
-
[data-ui][data-
|
|
4044
|
+
[data-ui][data-mode] :where(
|
|
3388
4045
|
[data-ui-tooltip-anchor] > .luxe-tooltip-top,
|
|
3389
4046
|
[data-ui-tooltip-anchor] > .luxe-tooltip-right,
|
|
3390
4047
|
[data-ui-tooltip-anchor] > .luxe-tooltip-bottom,
|
|
@@ -3423,10 +4080,10 @@
|
|
|
3423
4080
|
[data-ui-tooltip-anchor] > .noir-tooltip-left
|
|
3424
4081
|
) { position: absolute; z-index: 20; }
|
|
3425
4082
|
|
|
3426
|
-
[data-ui][data-
|
|
3427
|
-
[data-ui][data-
|
|
3428
|
-
[data-ui][data-
|
|
3429
|
-
[data-ui][data-
|
|
4083
|
+
[data-ui][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-top, [data-ui-tooltip-anchor] > .organic-tooltip-top, [data-ui-tooltip-anchor] > .utility-tooltip-top, [data-ui-tooltip-anchor] > .blueprint-tooltip-top, [data-ui-tooltip-anchor] > .deco-tooltip-top, [data-ui-tooltip-anchor] > .clay-tooltip-top, [data-ui-tooltip-anchor] > .terminal-tooltip-top, [data-ui-tooltip-anchor] > .paper-tooltip-top, [data-ui-tooltip-anchor] > .noir-tooltip-top) { inset-block-end: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
|
|
4084
|
+
[data-ui][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-right, [data-ui-tooltip-anchor] > .organic-tooltip-right, [data-ui-tooltip-anchor] > .utility-tooltip-right, [data-ui-tooltip-anchor] > .blueprint-tooltip-right, [data-ui-tooltip-anchor] > .deco-tooltip-right, [data-ui-tooltip-anchor] > .clay-tooltip-right, [data-ui-tooltip-anchor] > .terminal-tooltip-right, [data-ui-tooltip-anchor] > .paper-tooltip-right, [data-ui-tooltip-anchor] > .noir-tooltip-right) { inset-inline-start: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
|
|
4085
|
+
[data-ui][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-bottom, [data-ui-tooltip-anchor] > .organic-tooltip-bottom, [data-ui-tooltip-anchor] > .utility-tooltip-bottom, [data-ui-tooltip-anchor] > .blueprint-tooltip-bottom, [data-ui-tooltip-anchor] > .deco-tooltip-bottom, [data-ui-tooltip-anchor] > .clay-tooltip-bottom, [data-ui-tooltip-anchor] > .terminal-tooltip-bottom, [data-ui-tooltip-anchor] > .paper-tooltip-bottom, [data-ui-tooltip-anchor] > .noir-tooltip-bottom) { inset-block-start: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
|
|
4086
|
+
[data-ui][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-left, [data-ui-tooltip-anchor] > .organic-tooltip-left, [data-ui-tooltip-anchor] > .utility-tooltip-left, [data-ui-tooltip-anchor] > .blueprint-tooltip-left, [data-ui-tooltip-anchor] > .deco-tooltip-left, [data-ui-tooltip-anchor] > .clay-tooltip-left, [data-ui-tooltip-anchor] > .terminal-tooltip-left, [data-ui-tooltip-anchor] > .paper-tooltip-left, [data-ui-tooltip-anchor] > .noir-tooltip-left) { inset-inline-end: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
|
|
3430
4087
|
|
|
3431
4088
|
:where(.luxe-bg-primary, .organic-bg-primary, .utility-bg-primary, .blueprint-bg-primary, .deco-bg-primary, .clay-bg-primary, .terminal-bg-primary, .paper-bg-primary, .noir-bg-primary) { background: var(--usk-native-primary); color: var(--usk-native-on-primary); }
|
|
3432
4089
|
:where(.luxe-bg-secondary, .organic-bg-secondary, .utility-bg-secondary, .blueprint-bg-secondary, .deco-bg-secondary, .clay-bg-secondary, .terminal-bg-secondary, .paper-bg-secondary, .noir-bg-secondary) { background: var(--usk-native-surface-soft); color: var(--usk-native-text); }
|
|
@@ -3434,7 +4091,7 @@
|
|
|
3434
4091
|
:where(.luxe-divider, .organic-divider, .utility-divider, .blueprint-divider, .deco-divider, .clay-divider, .terminal-divider, .paper-divider, .noir-divider) { inline-size: 100%; block-size: 1px; border: 0; background: var(--usk-native-border); }
|
|
3435
4092
|
:where(.luxe-disabled, .organic-disabled, .utility-disabled, .blueprint-disabled, .deco-disabled, .clay-disabled, .terminal-disabled, .paper-disabled, .noir-disabled) { opacity: .55; cursor: not-allowed; pointer-events: none; }
|
|
3436
4093
|
|
|
3437
|
-
:where(.luxe-button-ghost, .organic-button-ghost, .utility-button-ghost, .blueprint-button-ghost, .deco-button-ghost, .clay-button-ghost, .terminal-button-ghost, .paper-button-ghost, .noir-button-ghost), :where([data-ui="retro-glass"]) :where(.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"])) { color: var(--usk-native-primary); background: transparent; border-color: var(--usk-native-border); }
|
|
4094
|
+
:where(.luxe-button-ghost, .organic-button-ghost, .utility-button-ghost, .blueprint-button-ghost, .deco-button-ghost, .clay-button-ghost, .terminal-button-ghost, .paper-button-ghost, .noir-button-ghost), :where([data-ui="retro-glass"]) :where(.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"])) { color: var(--usk-primary-ink, var(--usk-native-primary)); background: transparent; border-color: var(--usk-native-border); }
|
|
3438
4095
|
|
|
3439
4096
|
:where(.luxe-check, .luxe-radio, .luxe-switch, .organic-check, .organic-radio, .organic-switch, .utility-check, .utility-radio, .utility-switch, .blueprint-check, .blueprint-radio, .blueprint-switch, .deco-check, .deco-radio, .deco-switch, .clay-check, .clay-radio, .clay-switch, .terminal-check, .terminal-radio, .terminal-switch, .paper-check, .paper-radio, .paper-switch, .noir-check, .noir-radio, .noir-switch), :where([data-ui="retro-glass"]) :where(.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch) {
|
|
3440
4097
|
display: inline-flex;
|
|
@@ -3522,18 +4179,41 @@
|
|
|
3522
4179
|
--rg-transition-fast: .14s ease;
|
|
3523
4180
|
--rg-transition-base: .22s ease;
|
|
3524
4181
|
--rg-transition-slow: .36s ease;
|
|
3525
|
-
--rg-font-sans:
|
|
3526
|
-
--rg-font-display:
|
|
4182
|
+
--rg-font-sans: "DejaVu Sans", Arial, sans-serif;
|
|
4183
|
+
--rg-font-display: var(--rg-font-sans);
|
|
3527
4184
|
--rg-font-body: var(--rg-font-sans);
|
|
3528
4185
|
--rg-font-heading: var(--rg-font-display);
|
|
3529
4186
|
--rg-font-control: var(--rg-font-display);
|
|
3530
|
-
--rg-font-mono: "
|
|
4187
|
+
--rg-font-mono: "DejaVu Sans Mono", Consolas, monospace;
|
|
3531
4188
|
}
|
|
3532
4189
|
|
|
3533
4190
|
[data-ui="retro-glass"][data-mode="light"] {
|
|
3534
4191
|
--lightningcss-light: initial;
|
|
3535
4192
|
--lightningcss-dark: ;
|
|
3536
4193
|
color-scheme: light;
|
|
4194
|
+
--rg-fallback-bg-rgb: 216 222 229;
|
|
4195
|
+
--rg-fallback-surface-rgb: 246 249 252;
|
|
4196
|
+
--rg-fallback-surface-strong-rgb: 255 255 255;
|
|
4197
|
+
--rg-fallback-surface-soft-rgb: 223 229 235;
|
|
4198
|
+
--rg-fallback-text-rgb: 28 39 49;
|
|
4199
|
+
--rg-fallback-text-muted-rgb: 68 81 94;
|
|
4200
|
+
--rg-fallback-border-rgb: 110 120 130;
|
|
4201
|
+
--rg-fallback-primary-rgb: 11 99 216;
|
|
4202
|
+
--rg-fallback-primary-hover-rgb: 8 85 190;
|
|
4203
|
+
--rg-fallback-primary-text-rgb: 255 255 255;
|
|
4204
|
+
--rg-fallback-secondary-rgb: 223 229 235;
|
|
4205
|
+
--rg-fallback-secondary-hover-rgb: 207 216 224;
|
|
4206
|
+
--rg-fallback-secondary-text-rgb: 28 39 49;
|
|
4207
|
+
--rg-fallback-accent-rgb: 216 137 0;
|
|
4208
|
+
--rg-fallback-accent-text-rgb: 0 0 0;
|
|
4209
|
+
--rg-fallback-success-rgb: 76 147 0;
|
|
4210
|
+
--rg-fallback-success-text-rgb: 0 0 0;
|
|
4211
|
+
--rg-fallback-warning-rgb: 216 137 0;
|
|
4212
|
+
--rg-fallback-warning-text-rgb: 0 0 0;
|
|
4213
|
+
--rg-fallback-danger-rgb: 216 61 50;
|
|
4214
|
+
--rg-fallback-danger-text-rgb: 0 0 0;
|
|
4215
|
+
--rg-fallback-link-rgb: 8 75 158;
|
|
4216
|
+
--rg-fallback-focus-rgb: 20 120 233;
|
|
3537
4217
|
--rg-panel-alpha: .92;
|
|
3538
4218
|
--rg-panel-strong-alpha: .98;
|
|
3539
4219
|
--rg-panel-soft-alpha: .74;
|
|
@@ -3541,12 +4221,43 @@
|
|
|
3541
4221
|
--rg-glow-alpha: .24;
|
|
3542
4222
|
--rg-shadow-alpha: .18;
|
|
3543
4223
|
--rg-grid-alpha: .075;
|
|
4224
|
+
--rg-brush-line: rgb(var(--rg-text-rgb) / .035);
|
|
4225
|
+
--rg-glass-highlight: #ffffffe0;
|
|
4226
|
+
--rg-glass-midlight: #ffffff5c;
|
|
4227
|
+
--rg-material-shadow: rgb(var(--rg-text-rgb) / .2);
|
|
4228
|
+
--rg-control-text-shadow: 0 1px 0 #ffffffeb;
|
|
4229
|
+
--rg-dock-top: rgb(var(--rg-text-rgb) / .88);
|
|
4230
|
+
--rg-dock-bottom: rgb(var(--rg-text-rgb) / .98);
|
|
4231
|
+
--rg-dock-text: #f8fafc;
|
|
3544
4232
|
}
|
|
3545
4233
|
|
|
3546
4234
|
[data-ui="retro-glass"][data-mode="dark"] {
|
|
3547
4235
|
--lightningcss-light: ;
|
|
3548
4236
|
--lightningcss-dark: initial;
|
|
3549
4237
|
color-scheme: dark;
|
|
4238
|
+
--rg-fallback-bg-rgb: 6 16 23;
|
|
4239
|
+
--rg-fallback-surface-rgb: 8 23 31;
|
|
4240
|
+
--rg-fallback-surface-strong-rgb: 18 38 48;
|
|
4241
|
+
--rg-fallback-surface-soft-rgb: 39 52 60;
|
|
4242
|
+
--rg-fallback-text-rgb: 240 244 246;
|
|
4243
|
+
--rg-fallback-text-muted-rgb: 192 203 209;
|
|
4244
|
+
--rg-fallback-border-rgb: 110 126 135;
|
|
4245
|
+
--rg-fallback-primary-rgb: 22 119 232;
|
|
4246
|
+
--rg-fallback-primary-hover-rgb: 39 136 243;
|
|
4247
|
+
--rg-fallback-primary-text-rgb: 0 0 0;
|
|
4248
|
+
--rg-fallback-secondary-rgb: 39 52 60;
|
|
4249
|
+
--rg-fallback-secondary-hover-rgb: 53 67 77;
|
|
4250
|
+
--rg-fallback-secondary-text-rgb: 240 244 246;
|
|
4251
|
+
--rg-fallback-accent-rgb: 255 173 0;
|
|
4252
|
+
--rg-fallback-accent-text-rgb: 0 0 0;
|
|
4253
|
+
--rg-fallback-success-rgb: 114 201 15;
|
|
4254
|
+
--rg-fallback-success-text-rgb: 0 0 0;
|
|
4255
|
+
--rg-fallback-warning-rgb: 255 173 0;
|
|
4256
|
+
--rg-fallback-warning-text-rgb: 0 0 0;
|
|
4257
|
+
--rg-fallback-danger-rgb: 239 69 57;
|
|
4258
|
+
--rg-fallback-danger-text-rgb: 0 0 0;
|
|
4259
|
+
--rg-fallback-link-rgb: 133 194 255;
|
|
4260
|
+
--rg-fallback-focus-rgb: 59 156 255;
|
|
3550
4261
|
--rg-panel-alpha: .82;
|
|
3551
4262
|
--rg-panel-strong-alpha: .94;
|
|
3552
4263
|
--rg-panel-soft-alpha: .58;
|
|
@@ -3554,12 +4265,43 @@
|
|
|
3554
4265
|
--rg-glow-alpha: .42;
|
|
3555
4266
|
--rg-shadow-alpha: .42;
|
|
3556
4267
|
--rg-grid-alpha: .12;
|
|
4268
|
+
--rg-brush-line: #ffffff07;
|
|
4269
|
+
--rg-glass-highlight: #ffffff38;
|
|
4270
|
+
--rg-glass-midlight: #ffffff14;
|
|
4271
|
+
--rg-material-shadow: #0000009e;
|
|
4272
|
+
--rg-control-text-shadow: 0 -1px 0 #000000db;
|
|
4273
|
+
--rg-dock-top: rgb(var(--rg-bg-rgb) / .88);
|
|
4274
|
+
--rg-dock-bottom: #000000f5;
|
|
4275
|
+
--rg-dock-text: #e5ebf1;
|
|
3557
4276
|
}
|
|
3558
4277
|
|
|
3559
4278
|
[data-ui="retro-glass"][data-mode="contrast"] {
|
|
3560
4279
|
--lightningcss-light: ;
|
|
3561
4280
|
--lightningcss-dark: initial;
|
|
3562
4281
|
color-scheme: dark;
|
|
4282
|
+
--rg-fallback-bg-rgb: 0 0 0;
|
|
4283
|
+
--rg-fallback-surface-rgb: 5 8 12;
|
|
4284
|
+
--rg-fallback-surface-strong-rgb: 10 19 32;
|
|
4285
|
+
--rg-fallback-surface-soft-rgb: 0 0 0;
|
|
4286
|
+
--rg-fallback-text-rgb: 255 255 255;
|
|
4287
|
+
--rg-fallback-text-muted-rgb: 242 247 255;
|
|
4288
|
+
--rg-fallback-border-rgb: 255 255 255;
|
|
4289
|
+
--rg-fallback-primary-rgb: 156 197 240;
|
|
4290
|
+
--rg-fallback-primary-hover-rgb: 255 255 255;
|
|
4291
|
+
--rg-fallback-primary-text-rgb: 0 0 0;
|
|
4292
|
+
--rg-fallback-secondary-rgb: 0 230 255;
|
|
4293
|
+
--rg-fallback-secondary-hover-rgb: 255 255 255;
|
|
4294
|
+
--rg-fallback-secondary-text-rgb: 0 0 0;
|
|
4295
|
+
--rg-fallback-accent-rgb: 230 240 255;
|
|
4296
|
+
--rg-fallback-accent-text-rgb: 0 0 0;
|
|
4297
|
+
--rg-fallback-success-rgb: 0 255 144;
|
|
4298
|
+
--rg-fallback-success-text-rgb: 0 0 0;
|
|
4299
|
+
--rg-fallback-warning-rgb: 255 212 0;
|
|
4300
|
+
--rg-fallback-warning-text-rgb: 0 0 0;
|
|
4301
|
+
--rg-fallback-danger-rgb: 255 92 92;
|
|
4302
|
+
--rg-fallback-danger-text-rgb: 0 0 0;
|
|
4303
|
+
--rg-fallback-link-rgb: 156 197 240;
|
|
4304
|
+
--rg-fallback-focus-rgb: 255 255 255;
|
|
3563
4305
|
--rg-panel-alpha: 1;
|
|
3564
4306
|
--rg-panel-strong-alpha: 1;
|
|
3565
4307
|
--rg-panel-soft-alpha: .92;
|
|
@@ -3567,6 +4309,14 @@
|
|
|
3567
4309
|
--rg-glow-alpha: .68;
|
|
3568
4310
|
--rg-shadow-alpha: .56;
|
|
3569
4311
|
--rg-grid-alpha: .18;
|
|
4312
|
+
--rg-brush-line: #ffffff14;
|
|
4313
|
+
--rg-glass-highlight: #ffffff4d;
|
|
4314
|
+
--rg-glass-midlight: #ffffff1f;
|
|
4315
|
+
--rg-material-shadow: #000000d1;
|
|
4316
|
+
--rg-control-text-shadow: 0 -1px 0 #000;
|
|
4317
|
+
--rg-dock-top: #111;
|
|
4318
|
+
--rg-dock-bottom: #000;
|
|
4319
|
+
--rg-dock-text: #fff;
|
|
3570
4320
|
}
|
|
3571
4321
|
|
|
3572
4322
|
[data-ui="retro-glass"][data-theme][data-mode] {
|
|
@@ -3584,15 +4334,42 @@
|
|
|
3584
4334
|
--rg-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
|
|
3585
4335
|
--rg-secondary-text-rgb: var(--usk-secondary-text-rgb);
|
|
3586
4336
|
--rg-accent-rgb: var(--usk-accent-rgb);
|
|
3587
|
-
--rg-success-rgb: var(--usk-success-rgb);
|
|
3588
|
-
--rg-warning-rgb: var(--usk-warning-rgb);
|
|
3589
|
-
--rg-danger-rgb: var(--usk-danger-rgb);
|
|
3590
|
-
--rg-link-rgb: var(--usk-link-rgb);
|
|
3591
4337
|
--rg-accent-text-rgb: var(--usk-accent-text-rgb);
|
|
4338
|
+
--rg-success-rgb: var(--usk-success-rgb);
|
|
3592
4339
|
--rg-success-text-rgb: var(--usk-success-text-rgb);
|
|
4340
|
+
--rg-warning-rgb: var(--usk-warning-rgb);
|
|
3593
4341
|
--rg-warning-text-rgb: var(--usk-warning-text-rgb);
|
|
4342
|
+
--rg-danger-rgb: var(--usk-danger-rgb);
|
|
3594
4343
|
--rg-danger-text-rgb: var(--usk-danger-text-rgb);
|
|
4344
|
+
--rg-link-rgb: var(--usk-link-rgb);
|
|
3595
4345
|
--rg-focus-rgb: var(--usk-focus-rgb);
|
|
4346
|
+
}
|
|
4347
|
+
|
|
4348
|
+
[data-ui="retro-glass"][data-mode] {
|
|
4349
|
+
--usk-native-bg: var(--rg-bg);
|
|
4350
|
+
--rg-bg-rgb: var(--usk-bg-rgb, var(--rg-fallback-bg-rgb));
|
|
4351
|
+
--rg-surface-rgb: var(--usk-surface-rgb, var(--rg-fallback-surface-rgb));
|
|
4352
|
+
--rg-surface-strong-rgb: var(--usk-surface-strong-rgb, var(--rg-fallback-surface-strong-rgb));
|
|
4353
|
+
--rg-surface-soft-rgb: var(--usk-surface-soft-rgb, var(--rg-fallback-surface-soft-rgb));
|
|
4354
|
+
--rg-text-rgb: var(--usk-text-rgb, var(--rg-fallback-text-rgb));
|
|
4355
|
+
--rg-text-muted-rgb: var(--usk-text-muted-rgb, var(--rg-fallback-text-muted-rgb));
|
|
4356
|
+
--rg-border-rgb: var(--usk-border-rgb, var(--rg-fallback-border-rgb));
|
|
4357
|
+
--rg-primary-rgb: var(--usk-primary-rgb, var(--rg-fallback-primary-rgb));
|
|
4358
|
+
--rg-primary-hover-rgb: var(--usk-primary-hover-rgb, var(--rg-fallback-primary-hover-rgb));
|
|
4359
|
+
--rg-primary-text-rgb: var(--usk-primary-text-rgb, var(--rg-fallback-primary-text-rgb));
|
|
4360
|
+
--rg-secondary-rgb: var(--usk-secondary-rgb, var(--rg-fallback-secondary-rgb));
|
|
4361
|
+
--rg-secondary-hover-rgb: var(--usk-secondary-hover-rgb, var(--rg-fallback-secondary-hover-rgb));
|
|
4362
|
+
--rg-secondary-text-rgb: var(--usk-secondary-text-rgb, var(--rg-fallback-secondary-text-rgb));
|
|
4363
|
+
--rg-accent-rgb: var(--usk-accent-rgb, var(--rg-fallback-accent-rgb));
|
|
4364
|
+
--rg-accent-text-rgb: var(--usk-accent-text-rgb, var(--rg-fallback-accent-text-rgb));
|
|
4365
|
+
--rg-success-rgb: var(--usk-success-rgb, var(--rg-fallback-success-rgb));
|
|
4366
|
+
--rg-success-text-rgb: var(--usk-success-text-rgb, var(--rg-fallback-success-text-rgb));
|
|
4367
|
+
--rg-warning-rgb: var(--usk-warning-rgb, var(--rg-fallback-warning-rgb));
|
|
4368
|
+
--rg-warning-text-rgb: var(--usk-warning-text-rgb, var(--rg-fallback-warning-text-rgb));
|
|
4369
|
+
--rg-danger-rgb: var(--usk-danger-rgb, var(--rg-fallback-danger-rgb));
|
|
4370
|
+
--rg-danger-text-rgb: var(--usk-danger-text-rgb, var(--rg-fallback-danger-text-rgb));
|
|
4371
|
+
--rg-link-rgb: var(--usk-link-rgb, var(--rg-fallback-link-rgb));
|
|
4372
|
+
--rg-focus-rgb: var(--usk-focus-rgb, var(--rg-fallback-focus-rgb));
|
|
3596
4373
|
--usk-native-surface: var(--rg-surface);
|
|
3597
4374
|
--usk-native-surface-strong: var(--rg-surface-strong);
|
|
3598
4375
|
--usk-native-surface-soft: var(--rg-surface-soft);
|
|
@@ -3622,6 +4399,61 @@
|
|
|
3622
4399
|
--usk-native-border-width: 1px;
|
|
3623
4400
|
--usk-native-field-gap: .5rem;
|
|
3624
4401
|
--usk-native-panel-padding: var(--rg-space-5);
|
|
4402
|
+
--usk-native-control-min-block-size: 3rem;
|
|
4403
|
+
--usk-native-control-padding-block: .74rem;
|
|
4404
|
+
--usk-native-control-padding-inline: .95rem;
|
|
4405
|
+
--usk-native-subcontrol-padding-block: .58rem;
|
|
4406
|
+
--usk-native-subcontrol-padding-inline: .72rem;
|
|
4407
|
+
--usk-native-choice-size: 1.5rem;
|
|
4408
|
+
--usk-native-choice-background: var(--rg-control-bg);
|
|
4409
|
+
--usk-native-choice-border: 1px solid var(--rg-border);
|
|
4410
|
+
--usk-native-checkbox-radius: .28rem;
|
|
4411
|
+
--usk-native-radio-radius: 50%;
|
|
4412
|
+
--usk-native-choice-shadow: inset 0 1px #ffffff8c;
|
|
4413
|
+
--usk-native-choice-checked-background: var(--rg-primary);
|
|
4414
|
+
--usk-native-choice-mark-color: var(--rg-on-primary);
|
|
4415
|
+
--usk-native-track: var(--rg-glass-inset);
|
|
4416
|
+
--usk-native-track-fill: linear-gradient(180deg, var(--rg-primary-hover), var(--rg-primary));
|
|
4417
|
+
--usk-native-thumb: radial-gradient(circle at 42% 30%, var(--rg-glass-highlight), transparent 32%), var(--rg-control-material);
|
|
4418
|
+
--usk-native-thumb-border: var(--rg-border);
|
|
4419
|
+
--usk-native-select-indicator-image: linear-gradient(57deg, transparent 50%, var(--rg-primary) 50%), linear-gradient(123deg, var(--rg-primary) 50%, transparent 50%);
|
|
4420
|
+
--usk-native-select-indicator-size: .34rem .34rem, .34rem .34rem;
|
|
4421
|
+
--usk-native-select-indicator-position: calc(100% - 1.16rem) 50%, calc(100% - .84rem) 50%;
|
|
4422
|
+
--usk-native-select-padding-inline-end: 2.55rem;
|
|
4423
|
+
--usk-native-range-track-size: .54rem;
|
|
4424
|
+
--usk-native-range-track-background: var(--rg-surface-soft);
|
|
4425
|
+
--usk-native-range-track-border: 1px solid var(--rg-border);
|
|
4426
|
+
--usk-native-range-track-radius: .2rem;
|
|
4427
|
+
--usk-native-range-track-shadow: inset 0 1px #ffffff8c;
|
|
4428
|
+
--usk-native-range-progress-background: var(--rg-primary);
|
|
4429
|
+
--usk-native-range-thumb-size: 1.35rem;
|
|
4430
|
+
--usk-native-range-thumb-background: var(--rg-surface-strong);
|
|
4431
|
+
--usk-native-range-thumb-border: 1px solid var(--rg-border);
|
|
4432
|
+
--usk-native-range-thumb-radius: 50%;
|
|
4433
|
+
--usk-native-range-thumb-shadow: inset 0 1px #ffffff8c;
|
|
4434
|
+
--usk-native-progress-size: .72rem;
|
|
4435
|
+
--usk-native-progress-track-background: var(--rg-surface-soft);
|
|
4436
|
+
--usk-native-progress-track-border: 1px solid var(--rg-border);
|
|
4437
|
+
--usk-native-progress-track-radius: .2rem;
|
|
4438
|
+
--usk-native-progress-track-shadow: inset 0 1px #ffffff8c;
|
|
4439
|
+
--usk-native-progress-value-background: var(--rg-primary);
|
|
4440
|
+
--usk-native-progress-value-radius: .2rem;
|
|
4441
|
+
--usk-native-progress-value-shadow: inset 0 1px #ffffff8c;
|
|
4442
|
+
--usk-native-meter-optimum-background: var(--rg-success);
|
|
4443
|
+
--usk-native-meter-suboptimum-background: var(--rg-warning);
|
|
4444
|
+
--usk-native-meter-critical-background: var(--rg-danger);
|
|
4445
|
+
--usk-native-file-button-background: var(--rg-primary);
|
|
4446
|
+
--usk-native-file-button-border: 1px solid var(--rg-border);
|
|
4447
|
+
--usk-native-file-button-radius: .28rem;
|
|
4448
|
+
--usk-native-file-button-shadow: inset 0 1px #ffffff8c;
|
|
4449
|
+
--usk-native-color-swatch-border: 1px solid var(--rg-border);
|
|
4450
|
+
--usk-native-color-swatch-radius: .28rem;
|
|
4451
|
+
--usk-native-indicator-opacity: .72;
|
|
4452
|
+
--usk-native-indicator-filter: none;
|
|
4453
|
+
--usk-native-scrollbar-size: .72rem;
|
|
4454
|
+
--usk-native-scrollbar-track: var(--rg-surface-soft);
|
|
4455
|
+
--usk-native-scrollbar-thumb: var(--rg-primary);
|
|
4456
|
+
--usk-native-scrollbar-radius: .2rem;
|
|
3625
4457
|
--rg-bg: rgb(var(--rg-bg-rgb));
|
|
3626
4458
|
--rg-surface: rgb(var(--rg-surface-rgb) / var(--rg-panel-alpha));
|
|
3627
4459
|
--rg-surface-strong: rgb(var(--rg-surface-strong-rgb) / var(--rg-panel-strong-alpha));
|
|
@@ -3657,38 +4489,42 @@
|
|
|
3657
4489
|
--rg-shadow-sm: 0 2px 8px rgb(0 0 0 / var(--rg-shadow-alpha));
|
|
3658
4490
|
--rg-shadow-md: 0 10px 28px rgb(0 0 0 / calc(var(--rg-shadow-alpha) + .05));
|
|
3659
4491
|
--rg-shadow-lg: 0 22px 60px rgb(0 0 0 / calc(var(--rg-shadow-alpha) + .12));
|
|
3660
|
-
--rg-theme-bg-size: auto
|
|
3661
|
-
--rg-theme-bg:
|
|
3662
|
-
--rg-
|
|
3663
|
-
--rg-
|
|
4492
|
+
--rg-theme-bg-size: auto;
|
|
4493
|
+
--rg-theme-bg: repeating-linear-gradient(0deg, transparent 0 1px, var(--rg-brush-line) 1px 2px), linear-gradient(90deg, rgb(var(--rg-primary-rgb) / .025), transparent 18%, transparent 82%, rgb(var(--rg-secondary-rgb) / .025)), var(--rg-bg);
|
|
4494
|
+
--rg-brushed-chrome: repeating-linear-gradient(0deg, transparent 0 1px, var(--rg-brush-line) 1px 2px), linear-gradient(180deg, var(--rg-glass-highlight), var(--rg-glass-midlight) 46%, rgb(var(--rg-surface-soft-rgb) / .54) 52%, rgb(var(--rg-surface-rgb) / .88));
|
|
4495
|
+
--rg-glass-pane: linear-gradient(180deg, var(--rg-glass-highlight), rgb(var(--rg-surface-strong-rgb) / .28) 10%, rgb(var(--rg-surface-rgb) / .82) 100%);
|
|
4496
|
+
--rg-glass-inset: linear-gradient(180deg, rgb(var(--rg-text-rgb) / .075), rgb(var(--rg-surface-rgb) / .7) 22%, rgb(var(--rg-surface-strong-rgb) / .68));
|
|
4497
|
+
--rg-control-material: linear-gradient(180deg, var(--rg-glass-highlight), rgb(var(--rg-surface-strong-rgb) / .9) 12%, rgb(var(--rg-surface-rgb) / .72) 52%, rgb(var(--rg-surface-soft-rgb) / .9));
|
|
4498
|
+
--rg-card-bg: var(--rg-glass-pane);
|
|
4499
|
+
--rg-control-bg: var(--rg-control-material);
|
|
3664
4500
|
--rg-spinner-track: rgb(var(--rg-border-rgb) / max(.28, calc(var(--rg-border-alpha) * .7)));
|
|
3665
4501
|
--rg-spinner-stroke: var(--rg-primary);
|
|
3666
4502
|
--rg-spinner-accent: var(--rg-accent);
|
|
3667
4503
|
}
|
|
3668
4504
|
|
|
3669
4505
|
@supports (color: color-mix(in srgb,black,white)) {
|
|
3670
|
-
[data-ui="retro-glass"][data-
|
|
4506
|
+
[data-ui="retro-glass"][data-mode] {
|
|
3671
4507
|
--rg-border: color-mix(in srgb, rgb(var(--rg-border-rgb) / max(var(--rg-border-alpha), var(--usk-border-min-alpha))), var(--rg-text) var(--usk-border-text-mix));
|
|
3672
4508
|
}
|
|
3673
4509
|
}
|
|
3674
4510
|
|
|
3675
4511
|
[data-ui="retro-glass"] {
|
|
3676
|
-
background:
|
|
4512
|
+
background: var(--rg-theme-bg, var(--rg-bg));
|
|
4513
|
+
background-size: var(--rg-theme-bg-size, auto);
|
|
3677
4514
|
color: var(--rg-text);
|
|
3678
4515
|
font-family: var(--rg-font-body);
|
|
3679
|
-
background-size: auto, auto, auto, 52px 52px, 52px 52px, auto;
|
|
3680
4516
|
}
|
|
3681
4517
|
|
|
3682
4518
|
[data-ui="retro-glass"] *, [data-ui="retro-glass"] :before, [data-ui="retro-glass"] :after {
|
|
3683
4519
|
box-sizing: border-box;
|
|
3684
4520
|
}
|
|
3685
4521
|
|
|
3686
|
-
[data-ui="retro-glass"][data-
|
|
4522
|
+
[data-ui="retro-glass"][data-mode] {
|
|
3687
4523
|
background: var(--rg-theme-bg);
|
|
3688
4524
|
background-size: var(--rg-theme-bg-size);
|
|
3689
4525
|
}
|
|
3690
4526
|
|
|
3691
|
-
[data-ui="retro-glass"] a {
|
|
4527
|
+
[data-ui="retro-glass"] :where(a) {
|
|
3692
4528
|
color: var(--rg-link);
|
|
3693
4529
|
text-underline-offset: .18em;
|
|
3694
4530
|
}
|
|
@@ -3718,7 +4554,7 @@
|
|
|
3718
4554
|
}
|
|
3719
4555
|
|
|
3720
4556
|
.rg-kicker {
|
|
3721
|
-
color: var(--rg-primary);
|
|
4557
|
+
color: var(--usk-primary-ink, var(--rg-primary));
|
|
3722
4558
|
letter-spacing: .18em;
|
|
3723
4559
|
margin: 0;
|
|
3724
4560
|
font-size: .8rem;
|
|
@@ -3747,13 +4583,13 @@
|
|
|
3747
4583
|
border-top-color: #ffffff47;
|
|
3748
4584
|
border-left-color: #fff3;
|
|
3749
4585
|
position: relative;
|
|
3750
|
-
overflow: hidden;
|
|
3751
4586
|
}
|
|
3752
4587
|
|
|
3753
4588
|
.rg-card:before, .rg-panel:before, .rg-console:before, :where([data-ui="retro-glass"]) .ui-card:before {
|
|
3754
4589
|
content: "";
|
|
3755
4590
|
pointer-events: none;
|
|
3756
4591
|
background: linear-gradient(180deg,#ffffff1a,transparent 30%),linear-gradient(90deg,transparent,rgb(var(--rg-accent-rgb)/.08),transparent);
|
|
4592
|
+
border-radius: inherit;
|
|
3757
4593
|
position: absolute;
|
|
3758
4594
|
inset: 0;
|
|
3759
4595
|
}
|
|
@@ -3820,33 +4656,15 @@
|
|
|
3820
4656
|
display: inline-flex;
|
|
3821
4657
|
}
|
|
3822
4658
|
|
|
3823
|
-
.rg-button:hover, .rg-icon-button:hover, :where([data-ui="retro-glass"]) .ui-button:hover, :where([data-ui="retro-glass"]) .ui-icon-button:hover {
|
|
3824
|
-
border-color: rgb(var(--rg-primary-rgb)/.68);
|
|
3825
|
-
box-shadow: var(--rg-shadow-md),0 0 24px var(--rg-glow-primary);
|
|
3826
|
-
transform: translateY(-2px);
|
|
3827
|
-
}
|
|
3828
|
-
|
|
3829
4659
|
.rg-button:active, .rg-icon-button:active, .rg-button.is-active, .rg-button[aria-pressed="true"], :where([data-ui="retro-glass"]) .ui-button:active, :where([data-ui="retro-glass"]) .ui-icon-button:active, :where([data-ui="retro-glass"]) .ui-button.is-active, :where([data-ui="retro-glass"]) .ui-button[aria-pressed="true"] {
|
|
3830
4660
|
box-shadow: inset 0 8px 18px #0000002e,0 0 18px var(--rg-glow-primary);
|
|
3831
4661
|
transform: translateY(1px);
|
|
3832
4662
|
}
|
|
3833
4663
|
|
|
3834
|
-
.rg-button-primary, :where([data-ui="retro-glass"]) .ui-button:where([data-ui-variant="primary"]) {
|
|
3835
|
-
background: linear-gradient(135deg,#ffffff38,#ffffff0a),var(--rg-primary);
|
|
3836
|
-
color: var(--rg-on-primary);
|
|
3837
|
-
border-color: rgb(var(--rg-primary-rgb)/.72);
|
|
3838
|
-
}
|
|
3839
|
-
|
|
3840
4664
|
.rg-button-primary:hover, :where([data-ui="retro-glass"]) .ui-button:where([data-ui-variant="primary"]):hover {
|
|
3841
4665
|
background: var(--rg-primary-hover);
|
|
3842
4666
|
}
|
|
3843
4667
|
|
|
3844
|
-
.rg-button-secondary, :where([data-ui="retro-glass"]) .ui-button:where([data-ui-variant="secondary"]) {
|
|
3845
|
-
background: linear-gradient(135deg,#ffffff38,#ffffff0a),var(--rg-secondary);
|
|
3846
|
-
color: var(--rg-on-secondary);
|
|
3847
|
-
border-color: rgb(var(--rg-secondary-rgb)/.72);
|
|
3848
|
-
}
|
|
3849
|
-
|
|
3850
4668
|
.rg-button-secondary:hover, :where([data-ui="retro-glass"]) .ui-button:where([data-ui-variant="secondary"]):hover {
|
|
3851
4669
|
background: var(--rg-secondary-hover);
|
|
3852
4670
|
}
|
|
@@ -3979,12 +4797,6 @@
|
|
|
3979
4797
|
background: #ffffff1a;
|
|
3980
4798
|
}
|
|
3981
4799
|
|
|
3982
|
-
.rg-nav-link.is-active, .rg-nav-link[aria-current="page"], :where([data-ui="retro-glass"]) .ui-nav-link.is-active, :where([data-ui="retro-glass"]) .ui-nav-link[aria-current="page"] {
|
|
3983
|
-
background: var(--rg-primary);
|
|
3984
|
-
color: var(--rg-on-primary);
|
|
3985
|
-
box-shadow: 0 0 22px var(--rg-glow-primary);
|
|
3986
|
-
}
|
|
3987
|
-
|
|
3988
4800
|
.rg-tooltip, [data-ui="retro-glass"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
|
|
3989
4801
|
background: linear-gradient(135deg,#ffffff47,#ffffff0f),var(--rg-surface);
|
|
3990
4802
|
max-inline-size: 16rem;
|
|
@@ -4092,7 +4904,7 @@
|
|
|
4092
4904
|
}
|
|
4093
4905
|
|
|
4094
4906
|
.rg-text-primary {
|
|
4095
|
-
color: var(--rg-primary);
|
|
4907
|
+
color: var(--usk-primary-ink, var(--rg-primary));
|
|
4096
4908
|
}
|
|
4097
4909
|
|
|
4098
4910
|
.rg-text-secondary {
|
|
@@ -4100,7 +4912,7 @@
|
|
|
4100
4912
|
}
|
|
4101
4913
|
|
|
4102
4914
|
.rg-text-accent {
|
|
4103
|
-
color: var(--rg-accent);
|
|
4915
|
+
color: var(--usk-accent-ink, var(--rg-accent));
|
|
4104
4916
|
}
|
|
4105
4917
|
|
|
4106
4918
|
.rg-text-success {
|
|
@@ -4123,11 +4935,6 @@
|
|
|
4123
4935
|
}
|
|
4124
4936
|
}
|
|
4125
4937
|
|
|
4126
|
-
[data-ui="retro-glass"] :focus-visible {
|
|
4127
|
-
outline: 3px solid var(--rg-focus);
|
|
4128
|
-
outline-offset: 3px;
|
|
4129
|
-
}
|
|
4130
|
-
|
|
4131
4938
|
@media (prefers-reduced-motion: reduce) {
|
|
4132
4939
|
[data-ui="retro-glass"] *, [data-ui="retro-glass"] :before, [data-ui="retro-glass"] :after {
|
|
4133
4940
|
transition-duration: 1ms !important;
|
|
@@ -4139,7 +4946,7 @@
|
|
|
4139
4946
|
background: var(--rg-card-bg);
|
|
4140
4947
|
}
|
|
4141
4948
|
|
|
4142
|
-
.rg-toolbar, .rg-table-wrap, .rg-button:not(.rg-button-primary):not(.rg-button-secondary):not(.rg-button-danger):not(.rg-button-ghost), .rg-icon-button, :where([data-ui="retro-glass"]) .ui-toolbar, :where([data-ui="retro-glass"]) .ui-table-wrap, :where([data-ui="retro-glass"]) .ui-button:not(.ui-button:where([data-ui-variant="primary"])):not(.ui-button:where([data-ui-variant="secondary"])):not(.ui-button:where([data-ui-variant="danger"])):not(.ui-button:where([data-ui-variant="ghost"])), :where([data-ui="retro-glass"]) .ui-icon-button {
|
|
4949
|
+
.rg-toolbar, .rg-table-wrap, .rg-button:not(.rg-button-primary):not(.rg-button-secondary):not(.rg-button-danger):not(.rg-button-warning):not(.rg-button-ghost), .rg-icon-button, :where([data-ui="retro-glass"]) .ui-toolbar, :where([data-ui="retro-glass"]) .ui-table-wrap, :where([data-ui="retro-glass"]) .ui-button:not(.ui-button:where([data-ui-variant="primary"])):not(.ui-button:where([data-ui-variant="secondary"])):not(.ui-button:where([data-ui-variant="danger"])):not(.ui-button:where([data-ui-variant="warning"])):not(.ui-button:where([data-ui-variant="ghost"])), :where([data-ui="retro-glass"]) .ui-icon-button {
|
|
4143
4950
|
background: var(--rg-control-bg);
|
|
4144
4951
|
}
|
|
4145
4952
|
|
|
@@ -4148,18 +4955,21 @@
|
|
|
4148
4955
|
}
|
|
4149
4956
|
|
|
4150
4957
|
.rg-spinner, .rg-loading-spinner, [data-ui="retro-glass"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
|
|
4151
|
-
|
|
4152
|
-
border-block-start-color: var(--rg-spinner-stroke);
|
|
4153
|
-
border-inline-end-color: var(--rg-spinner-accent);
|
|
4154
|
-
background: linear-gradient(135deg,#ffffff52,transparent 46%),conic-gradient(from 35deg,var(--rg-spinner-stroke),transparent 40%,var(--rg-spinner-accent),var(--rg-spinner-track));
|
|
4958
|
+
box-sizing: border-box;
|
|
4155
4959
|
block-size: 2rem;
|
|
4156
4960
|
inline-size: 2rem;
|
|
4157
|
-
|
|
4158
|
-
|
|
4159
|
-
|
|
4961
|
+
color: var(--rg-spinner-stroke);
|
|
4962
|
+
border: 2px solid var(--rg-spinner-track);
|
|
4963
|
+
box-shadow: none;
|
|
4964
|
+
-webkit-backdrop-filter: none;
|
|
4965
|
+
backdrop-filter: none;
|
|
4160
4966
|
vertical-align: -.2em;
|
|
4161
|
-
|
|
4162
|
-
|
|
4967
|
+
background: none;
|
|
4968
|
+
border-block-start-color: currentColor;
|
|
4969
|
+
border-radius: 50%;
|
|
4970
|
+
flex-shrink: 0;
|
|
4971
|
+
padding: 0;
|
|
4972
|
+
animation: .85s linear infinite rg-spin;
|
|
4163
4973
|
display: inline-block;
|
|
4164
4974
|
}
|
|
4165
4975
|
|
|
@@ -4182,15 +4992,28 @@
|
|
|
4182
4992
|
|
|
4183
4993
|
.rg-button[aria-busy="true"]:after, .rg-icon-button[aria-busy="true"]:after, [data-ui="retro-glass"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after, :where([data-ui="retro-glass"]) .ui-button[aria-busy="true"]:after, :where([data-ui="retro-glass"]) .ui-icon-button[aria-busy="true"]:after {
|
|
4184
4994
|
content: "";
|
|
4185
|
-
|
|
4995
|
+
box-sizing: border-box;
|
|
4996
|
+
border: 2px solid var(--rg-spinner-track);
|
|
4997
|
+
block-size: 16px;
|
|
4998
|
+
inline-size: 16px;
|
|
4999
|
+
box-shadow: none;
|
|
5000
|
+
clip-path: none;
|
|
5001
|
+
background: none;
|
|
4186
5002
|
border-block-start-color: currentColor;
|
|
4187
5003
|
border-radius: 50%;
|
|
4188
|
-
|
|
4189
|
-
|
|
4190
|
-
animation: .
|
|
5004
|
+
flex: 0 0 16px;
|
|
5005
|
+
padding: 0;
|
|
5006
|
+
animation: .85s linear infinite rg-spin;
|
|
4191
5007
|
display: inline-block;
|
|
4192
5008
|
}
|
|
4193
5009
|
|
|
5010
|
+
@supports (color: color-mix(in srgb,black,white)) {
|
|
5011
|
+
.rg-spinner, .rg-loading-spinner, [data-ui="retro-glass"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]), .rg-button[aria-busy="true"]:after, .rg-icon-button[aria-busy="true"]:after, [data-ui="retro-glass"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after, :where([data-ui="retro-glass"]) .ui-button[aria-busy="true"]:after, :where([data-ui="retro-glass"]) .ui-icon-button[aria-busy="true"]:after {
|
|
5012
|
+
border-color: color-mix(in srgb,currentColor 28%,transparent);
|
|
5013
|
+
border-block-start-color: currentColor;
|
|
5014
|
+
}
|
|
5015
|
+
}
|
|
5016
|
+
|
|
4194
5017
|
@keyframes rg-spin {
|
|
4195
5018
|
to {
|
|
4196
5019
|
transform: rotate(360deg);
|
|
@@ -4267,7 +5090,7 @@
|
|
|
4267
5090
|
}
|
|
4268
5091
|
|
|
4269
5092
|
.rg-button.rg-button-outline-heavy, .rg-button-outline-heavy, :where([data-ui="retro-glass"]) .ui-button.rg-button-outline-heavy {
|
|
4270
|
-
color: var(--rg-primary);
|
|
5093
|
+
color: var(--usk-primary-ink, var(--rg-primary));
|
|
4271
5094
|
border-style: solid;
|
|
4272
5095
|
border-width: 2px;
|
|
4273
5096
|
border-color: var(--rg-primary);
|
|
@@ -4308,7 +5131,6 @@
|
|
|
4308
5131
|
border-radius: var(--rg-radius-lg);
|
|
4309
5132
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
|
|
4310
5133
|
display: grid;
|
|
4311
|
-
overflow: hidden;
|
|
4312
5134
|
}
|
|
4313
5135
|
|
|
4314
5136
|
.rg-feature-item {
|
|
@@ -4351,7 +5173,7 @@
|
|
|
4351
5173
|
}
|
|
4352
5174
|
|
|
4353
5175
|
.rg-eyebrow {
|
|
4354
|
-
color: var(--rg-primary);
|
|
5176
|
+
color: var(--usk-primary-ink, var(--rg-primary));
|
|
4355
5177
|
font-family: var(--rg-font-heading);
|
|
4356
5178
|
letter-spacing: .14em;
|
|
4357
5179
|
text-transform: uppercase;
|
|
@@ -4438,6 +5260,7 @@
|
|
|
4438
5260
|
clip-path: polygon(.8rem 0, 100% 0, 100% calc(100% - .35rem), calc(100% - .8rem) 100%, 0 100%, 0 .35rem);
|
|
4439
5261
|
justify-content: center;
|
|
4440
5262
|
justify-self: center;
|
|
5263
|
+
min-block-size: 2.75rem;
|
|
4441
5264
|
inline-size: min(100%, 16rem);
|
|
4442
5265
|
min-inline-size: 6rem;
|
|
4443
5266
|
max-inline-size: 100%;
|
|
@@ -4460,7 +5283,7 @@
|
|
|
4460
5283
|
border-radius: .75rem 1.35rem .75rem 1.15rem;
|
|
4461
5284
|
}
|
|
4462
5285
|
|
|
4463
|
-
[data-ui="retro-glass"][data-
|
|
5286
|
+
[data-ui="retro-glass"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
|
|
4464
5287
|
color: var(--rg-text);
|
|
4465
5288
|
background: rgb(var(--rg-surface-strong-rgb)/.24);
|
|
4466
5289
|
border: 1px solid var(--rg-primary);
|
|
@@ -4468,7 +5291,7 @@
|
|
|
4468
5291
|
border-radius: .55rem .9rem .55rem .78rem;
|
|
4469
5292
|
}
|
|
4470
5293
|
|
|
4471
|
-
[data-ui="retro-glass"][data-
|
|
5294
|
+
[data-ui="retro-glass"][data-mode] :where(dialog) {
|
|
4472
5295
|
background: rgb(var(--rg-surface-strong-rgb)/.72);
|
|
4473
5296
|
border: 1px solid rgb(var(--rg-border-rgb)/.78);
|
|
4474
5297
|
box-shadow: inset 0 1px 0 rgb(var(--rg-surface-strong-rgb)/.8),0 1rem 2.2rem rgb(var(--rg-primary-rgb)/.18);
|
|
@@ -4477,14 +5300,316 @@
|
|
|
4477
5300
|
border-radius: .85rem 1.45rem .85rem 1.2rem;
|
|
4478
5301
|
}
|
|
4479
5302
|
|
|
4480
|
-
|
|
4481
|
-
|
|
5303
|
+
[data-ui="retro-glass"][data-mode] {
|
|
5304
|
+
--usk-native-font-control: "Segoe UI", Tahoma, Geneva, sans-serif;
|
|
5305
|
+
--usk-native-control-min-block-size: 2.5rem;
|
|
5306
|
+
--usk-native-control-padding-block: .52rem;
|
|
5307
|
+
--usk-native-control-padding-inline: .86rem;
|
|
5308
|
+
--usk-native-border-width: 1px;
|
|
5309
|
+
--usk-native-radius-sm: .34rem;
|
|
5310
|
+
--usk-native-radius: .52rem;
|
|
5311
|
+
--usk-native-radius-lg: .72rem;
|
|
5312
|
+
--usk-native-shadow: inset 0 1px 0 rgb(var(--rg-surface-strong-rgb) / .9), 0 .22rem .5rem rgb(var(--rg-text-rgb) / .18);
|
|
5313
|
+
--usk-native-shadow-md: inset 0 1px 0 rgb(var(--rg-surface-strong-rgb) / .92), 0 .7rem 1.35rem rgb(var(--rg-text-rgb) / .22);
|
|
5314
|
+
--usk-native-focus-ring: 0 0 0 1px var(--rg-surface-strong), 0 0 0 3px var(--rg-focus), 0 0 .65rem rgb(var(--rg-focus-rgb) / .34);
|
|
5315
|
+
--usk-native-subcontrol-padding-block: .4rem;
|
|
5316
|
+
--usk-native-subcontrol-padding-inline: .62rem;
|
|
5317
|
+
--usk-native-choice-size: 1.16rem;
|
|
5318
|
+
--usk-native-choice-background: var(--rg-control-material);
|
|
5319
|
+
--usk-native-choice-border: 1px solid var(--rg-border);
|
|
5320
|
+
--usk-native-checkbox-radius: .28rem;
|
|
5321
|
+
--usk-native-radio-radius: 50%;
|
|
5322
|
+
--usk-native-choice-shadow: inset 0 1px 0 rgb(var(--rg-surface-strong-rgb) / .9), 0 1px 3px rgb(var(--rg-text-rgb) / .22);
|
|
5323
|
+
--usk-native-choice-checked-background: linear-gradient(180deg, var(--rg-primary-hover), var(--rg-primary));
|
|
5324
|
+
--usk-native-choice-mark-color: var(--rg-on-primary);
|
|
5325
|
+
--usk-native-select-indicator-image: linear-gradient(55deg, transparent 46%, var(--rg-text) 46% 56%, transparent 56%), linear-gradient(125deg, transparent 46%, var(--rg-text) 46% 56%, transparent 56%);
|
|
5326
|
+
--usk-native-select-indicator-size: .44rem .44rem, .44rem .44rem;
|
|
5327
|
+
--usk-native-select-indicator-position: calc(100% - 1.02rem) 50%, calc(100% - .72rem) 50%;
|
|
5328
|
+
--usk-native-select-padding-inline-end: 2.2rem;
|
|
5329
|
+
--usk-native-range-track-size: .42rem;
|
|
5330
|
+
--usk-native-range-track-background: var(--rg-glass-inset);
|
|
5331
|
+
--usk-native-range-track-border: 1px inset var(--rg-border);
|
|
5332
|
+
--usk-native-range-track-radius: .35rem;
|
|
5333
|
+
--usk-native-range-track-shadow: inset 0 2px 4px rgb(var(--rg-text-rgb) / .22);
|
|
5334
|
+
--usk-native-range-progress-background: linear-gradient(180deg, var(--rg-primary-hover), var(--rg-primary));
|
|
5335
|
+
--usk-native-range-thumb-size: 1.2rem;
|
|
5336
|
+
--usk-native-range-thumb-background: radial-gradient(circle at 42% 32%, var(--rg-glass-highlight), transparent 28%), var(--rg-control-material);
|
|
5337
|
+
--usk-native-range-thumb-border: 1px solid var(--rg-border);
|
|
5338
|
+
--usk-native-range-thumb-radius: 50%;
|
|
5339
|
+
--usk-native-range-thumb-shadow: inset 0 1px 0 var(--rg-surface-strong), 0 2px 4px rgb(var(--rg-text-rgb) / .28);
|
|
5340
|
+
--usk-native-progress-size: .74rem;
|
|
5341
|
+
--usk-native-progress-track-background: var(--rg-glass-inset);
|
|
5342
|
+
--usk-native-progress-track-border: 1px inset var(--rg-border);
|
|
5343
|
+
--usk-native-progress-track-radius: .42rem;
|
|
5344
|
+
--usk-native-progress-track-shadow: inset 0 2px 4px rgb(var(--rg-text-rgb) / .25);
|
|
5345
|
+
--usk-native-progress-value-background: repeating-linear-gradient(120deg, var(--rg-primary) 0 .5rem, var(--rg-primary-hover) .5rem .7rem);
|
|
5346
|
+
--usk-native-progress-value-radius: .36rem;
|
|
5347
|
+
--usk-native-progress-value-shadow: inset 0 1px 0 rgb(var(--rg-surface-strong-rgb) / .7), 0 0 .45rem rgb(var(--rg-primary-rgb) / .35);
|
|
5348
|
+
--usk-native-scrollbar-size: .8rem;
|
|
5349
|
+
--usk-native-scrollbar-track: linear-gradient(90deg, var(--rg-surface-soft), var(--rg-surface));
|
|
5350
|
+
--usk-native-scrollbar-thumb: linear-gradient(90deg, var(--rg-surface-strong), var(--rg-primary), var(--rg-surface-strong));
|
|
5351
|
+
--usk-native-scrollbar-radius: .48rem;
|
|
5352
|
+
}
|
|
5353
|
+
|
|
5354
|
+
.rg-title {
|
|
5355
|
+
font-family: var(--rg-font-display);
|
|
5356
|
+
letter-spacing: max(.06em, .5px);
|
|
5357
|
+
text-transform: none;
|
|
5358
|
+
text-shadow: 0 1px 0 var(--rg-glass-highlight),0 2px 2px rgb(var(--rg-text-rgb)/.28);
|
|
5359
|
+
margin-block: .75rem;
|
|
5360
|
+
font-weight: 800;
|
|
5361
|
+
}
|
|
5362
|
+
|
|
5363
|
+
.rg-heading {
|
|
5364
|
+
letter-spacing: .015em;
|
|
5365
|
+
text-shadow: var(--rg-control-text-shadow);
|
|
5366
|
+
font-size: clamp(1.16rem, 2.4vw, 1.72rem);
|
|
5367
|
+
font-weight: 700;
|
|
5368
|
+
}
|
|
5369
|
+
|
|
5370
|
+
.rg-kicker, .rg-label, :where([data-ui="retro-glass"]) .ui-label {
|
|
5371
|
+
letter-spacing: .055em;
|
|
5372
|
+
font-size: .76rem;
|
|
5373
|
+
font-weight: 700;
|
|
5374
|
+
}
|
|
5375
|
+
|
|
5376
|
+
.rg-copy, .rg-subtitle {
|
|
5377
|
+
line-height: 1.48;
|
|
5378
|
+
}
|
|
5379
|
+
|
|
5380
|
+
.rg-card, .rg-panel, :where([data-ui="retro-glass"]) .ui-card {
|
|
5381
|
+
background: var(--rg-glass-pane);
|
|
5382
|
+
border: 1px solid var(--rg-border);
|
|
5383
|
+
box-shadow: inset 0 1px 0 var(--rg-glass-highlight),0 .35rem .8rem var(--rg-material-shadow);
|
|
5384
|
+
-webkit-backdrop-filter: blur(14px) saturate(135%);
|
|
5385
|
+
backdrop-filter: blur(14px) saturate(135%);
|
|
5386
|
+
border-radius: .46rem;
|
|
5387
|
+
padding: 1rem;
|
|
5388
|
+
}
|
|
5389
|
+
|
|
5390
|
+
.rg-card:before, .rg-panel:before, .rg-console:before, :where([data-ui="retro-glass"]) .ui-card:before {
|
|
5391
|
+
background: linear-gradient(180deg,var(--rg-glass-midlight),transparent 24%);
|
|
5392
|
+
}
|
|
5393
|
+
|
|
5394
|
+
.rg-well, .rg-inset {
|
|
5395
|
+
background: var(--rg-glass-inset);
|
|
5396
|
+
border: 1px inset var(--rg-border);
|
|
5397
|
+
box-shadow: inset 0 2px 5px var(--rg-material-shadow),inset 0 1px 0 var(--rg-glass-midlight);
|
|
5398
|
+
-webkit-backdrop-filter: blur(8px);
|
|
5399
|
+
backdrop-filter: blur(8px);
|
|
5400
|
+
border-radius: .34rem;
|
|
5401
|
+
padding: .82rem;
|
|
5402
|
+
}
|
|
5403
|
+
|
|
5404
|
+
.rg-button, .rg-icon-button, :where([data-ui="retro-glass"]) .ui-button, :where([data-ui="retro-glass"]) .ui-icon-button {
|
|
5405
|
+
background: var(--rg-control-material);
|
|
5406
|
+
border: 1px solid var(--rg-border);
|
|
5407
|
+
min-height: 2.5rem;
|
|
5408
|
+
box-shadow: inset 0 1px 0 var(--rg-glass-highlight),inset 0-1px 0 rgb(var(--rg-text-rgb)/.08),0 .16rem .38rem var(--rg-material-shadow);
|
|
5409
|
+
letter-spacing: .01em;
|
|
5410
|
+
text-shadow: var(--rg-control-text-shadow);
|
|
5411
|
+
text-transform: none;
|
|
5412
|
+
border-radius: .34rem;
|
|
5413
|
+
padding: .5rem .82rem;
|
|
5414
|
+
font-weight: 650;
|
|
5415
|
+
}
|
|
5416
|
+
|
|
5417
|
+
.rg-button:hover, .rg-icon-button:hover, :where([data-ui="retro-glass"]) .ui-button:hover, :where([data-ui="retro-glass"]) .ui-icon-button:hover {
|
|
5418
|
+
border-color: var(--rg-primary);
|
|
5419
|
+
box-shadow: inset 0 1px 0 var(--rg-glass-highlight),0 .2rem .48rem var(--rg-material-shadow),0 0 .5rem rgb(var(--rg-primary-rgb)/.24);
|
|
5420
|
+
transform: none;
|
|
5421
|
+
}
|
|
5422
|
+
|
|
5423
|
+
.rg-button:active, .rg-icon-button:active, .rg-button[aria-pressed="true"], .rg-button.is-active, :where([data-ui="retro-glass"]) .ui-button:active, :where([data-ui="retro-glass"]) .ui-icon-button:active, :where([data-ui="retro-glass"]) .ui-button[aria-pressed="true"], :where([data-ui="retro-glass"]) .ui-button.is-active {
|
|
5424
|
+
background: var(--rg-glass-inset);
|
|
5425
|
+
box-shadow: inset 0 2px 5px var(--rg-material-shadow),0 1px 0 var(--rg-glass-midlight);
|
|
5426
|
+
transform: translateY(1px);
|
|
5427
|
+
}
|
|
5428
|
+
|
|
5429
|
+
.rg-input, .rg-textarea, .rg-select, :where([data-ui="retro-glass"]) .ui-input, :where([data-ui="retro-glass"]) .ui-textarea, :where([data-ui="retro-glass"]) .ui-select {
|
|
5430
|
+
background: var(--rg-glass-inset);
|
|
5431
|
+
border: 1px inset var(--rg-border);
|
|
5432
|
+
min-height: 2.32rem;
|
|
5433
|
+
box-shadow: inset 0 2px 5px var(--rg-material-shadow),0 1px 0 var(--rg-glass-highlight);
|
|
5434
|
+
border-radius: .28rem;
|
|
5435
|
+
padding: .44rem .64rem;
|
|
5436
|
+
}
|
|
5437
|
+
|
|
5438
|
+
.rg-nav, :where([data-ui="retro-glass"]) .ui-nav {
|
|
5439
|
+
background: linear-gradient(180deg,var(--rg-primary-hover),var(--rg-primary) 44%,rgb(var(--rg-primary-rgb)/.82) 50%,rgb(var(--rg-primary-rgb)/.68));
|
|
5440
|
+
border: 1px solid rgb(var(--rg-primary-rgb)/.92);
|
|
5441
|
+
box-shadow: inset 0 1px 0 #ffffff7a,inset 0-1px 0 #00000057,0 .24rem .54rem var(--rg-material-shadow);
|
|
5442
|
+
border-radius: .34rem;
|
|
5443
|
+
gap: 0;
|
|
5444
|
+
padding: .2rem;
|
|
5445
|
+
}
|
|
5446
|
+
|
|
5447
|
+
.rg-nav-link, :where([data-ui="retro-glass"]) .ui-nav-link {
|
|
5448
|
+
min-height: 2.7rem;
|
|
5449
|
+
color: var(--rg-on-primary);
|
|
5450
|
+
letter-spacing: .015em;
|
|
5451
|
+
text-shadow: 0 -1px #0000009e;
|
|
5452
|
+
border-inline-end: 1px solid #00000038;
|
|
5453
|
+
border-radius: .2rem;
|
|
5454
|
+
padding: .58rem .92rem;
|
|
5455
|
+
font-size: .82rem;
|
|
5456
|
+
}
|
|
5457
|
+
|
|
5458
|
+
.rg-nav-link:hover, :where([data-ui="retro-glass"]) .ui-nav-link:hover {
|
|
5459
|
+
color: var(--rg-on-primary);
|
|
5460
|
+
background: linear-gradient(#ffffff3d, #ffffff0a);
|
|
5461
|
+
border-color: #ffffff4d;
|
|
5462
|
+
}
|
|
5463
|
+
|
|
5464
|
+
.rg-toolbar, :where([data-ui="retro-glass"]) .ui-toolbar {
|
|
5465
|
+
background: var(--rg-brushed-chrome);
|
|
5466
|
+
box-shadow: inset 0 1px 0 var(--rg-glass-highlight),inset 0-1px 0 rgb(var(--rg-text-rgb)/.18),0 .22rem .5rem var(--rg-material-shadow);
|
|
5467
|
+
border-radius: .34rem;
|
|
5468
|
+
}
|
|
5469
|
+
|
|
5470
|
+
.rg-badge, :where([data-ui="retro-glass"]) .ui-badge {
|
|
5471
|
+
border: 1px solid var(--rg-border);
|
|
5472
|
+
min-height: 1.46rem;
|
|
5473
|
+
box-shadow: inset 0 1px 0 rgb(var(--rg-surface-strong-rgb)/.85),0 1px 3px rgb(var(--rg-text-rgb)/.2);
|
|
5474
|
+
border-radius: .72rem;
|
|
5475
|
+
padding: .24rem .52rem;
|
|
5476
|
+
}
|
|
5477
|
+
|
|
5478
|
+
.rg-alert, :where([data-ui="retro-glass"]) .ui-alert {
|
|
5479
|
+
background: var(--rg-glass-pane);
|
|
5480
|
+
border: 1px solid var(--rg-border);
|
|
5481
|
+
box-shadow: inset 0 1px 0 var(--rg-glass-highlight),0 .28rem .6rem var(--rg-material-shadow);
|
|
5482
|
+
-webkit-backdrop-filter: blur(10px);
|
|
5483
|
+
backdrop-filter: blur(10px);
|
|
5484
|
+
border-radius: .38rem;
|
|
5485
|
+
padding: .7rem .86rem;
|
|
5486
|
+
}
|
|
5487
|
+
|
|
5488
|
+
.rg-alert-success, :where([data-ui="retro-glass"]) .ui-alert:where([data-ui-variant="success"]) {
|
|
5489
|
+
background: linear-gradient(180deg,rgb(var(--rg-success-rgb)/.2),rgb(var(--rg-success-rgb)/.08)),var(--rg-glass-pane);
|
|
5490
|
+
}
|
|
5491
|
+
|
|
5492
|
+
.rg-alert-warning, :where([data-ui="retro-glass"]) .ui-alert:where([data-ui-variant="warning"]) {
|
|
5493
|
+
background: linear-gradient(180deg,rgb(var(--rg-warning-rgb)/.2),rgb(var(--rg-warning-rgb)/.08)),var(--rg-glass-pane);
|
|
5494
|
+
}
|
|
5495
|
+
|
|
5496
|
+
.rg-alert-danger, :where([data-ui="retro-glass"]) .ui-alert:where([data-ui-variant="danger"]) {
|
|
5497
|
+
background: linear-gradient(180deg,rgb(var(--rg-danger-rgb)/.2),rgb(var(--rg-danger-rgb)/.08)),var(--rg-glass-pane);
|
|
5498
|
+
}
|
|
5499
|
+
|
|
5500
|
+
.rg-progress, :where([data-ui="retro-glass"]) .ui-progress {
|
|
5501
|
+
background: var(--rg-glass-inset);
|
|
5502
|
+
height: .74rem;
|
|
5503
|
+
box-shadow: inset 0 2px 4px var(--rg-material-shadow),0 1px 0 var(--rg-glass-highlight);
|
|
5504
|
+
border-radius: .42rem;
|
|
5505
|
+
}
|
|
5506
|
+
|
|
5507
|
+
.rg-progress-bar, :where([data-ui="retro-glass"]) .ui-progress-bar {
|
|
5508
|
+
background: repeating-linear-gradient(120deg,var(--rg-primary)0 .5rem,var(--rg-primary-hover) .5rem .7rem);
|
|
5509
|
+
box-shadow: inset 0 1px 0 rgb(var(--rg-surface-strong-rgb)/.7),0 0 .45rem rgb(var(--rg-primary-rgb)/.35);
|
|
5510
|
+
border-radius: .36rem;
|
|
5511
|
+
}
|
|
5512
|
+
|
|
5513
|
+
.rg-table-wrap, :where([data-ui="retro-glass"]) .ui-table-wrap {
|
|
5514
|
+
background: var(--rg-glass-inset);
|
|
5515
|
+
border: 1px solid var(--rg-border);
|
|
5516
|
+
box-shadow: inset 0 1px 0 var(--rg-glass-highlight),0 .35rem .72rem var(--rg-material-shadow);
|
|
5517
|
+
-webkit-backdrop-filter: blur(10px);
|
|
5518
|
+
backdrop-filter: blur(10px);
|
|
5519
|
+
border-radius: .42rem;
|
|
5520
|
+
}
|
|
5521
|
+
|
|
5522
|
+
.rg-table, :where([data-ui="retro-glass"]) .ui-table {
|
|
5523
|
+
border-collapse: separate;
|
|
5524
|
+
border-spacing: 0;
|
|
5525
|
+
}
|
|
5526
|
+
|
|
5527
|
+
.rg-table th, :where([data-ui="retro-glass"]) .ui-table th {
|
|
5528
|
+
background: linear-gradient(180deg,rgb(var(--rg-primary-rgb)/.92),var(--rg-primary-hover) 48%,var(--rg-primary));
|
|
5529
|
+
color: var(--rg-on-primary);
|
|
5530
|
+
text-shadow: 0 -1px #00000085;
|
|
5531
|
+
padding: .58rem .72rem;
|
|
5532
|
+
font-weight: 700;
|
|
5533
|
+
}
|
|
5534
|
+
|
|
5535
|
+
.rg-table td, :where([data-ui="retro-glass"]) .ui-table td {
|
|
5536
|
+
padding: .64rem .76rem;
|
|
5537
|
+
}
|
|
5538
|
+
|
|
5539
|
+
.rg-tooltip, [data-ui="retro-glass"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
|
|
5540
|
+
color: #f5f8fa;
|
|
5541
|
+
background: linear-gradient(#363d44f5, #080c0ffa);
|
|
5542
|
+
border: 1px solid #ffffff47;
|
|
5543
|
+
border-radius: .36rem;
|
|
5544
|
+
box-shadow: inset 0 1px #ffffff38, 0 .55rem 1rem #0000007a;
|
|
5545
|
+
}
|
|
5546
|
+
|
|
5547
|
+
.rg-card-service, .rg-card-feature, .rg-media-scrim, .rg-feature-strip, .rg-callout-bar {
|
|
5548
|
+
background: var(--rg-glass-pane);
|
|
5549
|
+
box-shadow: inset 0 1px 0 var(--rg-glass-highlight),0 .35rem .72rem var(--rg-material-shadow);
|
|
5550
|
+
-webkit-backdrop-filter: blur(12px) saturate(118%);
|
|
5551
|
+
backdrop-filter: blur(12px) saturate(118%);
|
|
4482
5552
|
clip-path: none;
|
|
4483
|
-
|
|
4484
|
-
|
|
4485
|
-
|
|
4486
|
-
|
|
4487
|
-
|
|
5553
|
+
border-radius: .46rem;
|
|
5554
|
+
}
|
|
5555
|
+
|
|
5556
|
+
.rg-callout-bar {
|
|
5557
|
+
background: linear-gradient(180deg,#ffffff29,transparent 12%),linear-gradient(180deg,rgb(var(--rg-text-rgb)/.88),rgb(var(--rg-bg-rgb)/.96));
|
|
5558
|
+
color: var(--rg-dock-text);
|
|
5559
|
+
box-shadow: inset 0 1px 0 #ffffff42,inset 0-1px 0 #000000b3,0 .45rem .92rem var(--rg-material-shadow);
|
|
5560
|
+
border-color: #ffffff2e;
|
|
5561
|
+
}
|
|
5562
|
+
|
|
5563
|
+
.rg-check-control, .rg-radio-control, .rg-switch-track, .rg-switch-thumb, :where([data-ui="retro-glass"]) .ui-check-control, :where([data-ui="retro-glass"]) .ui-radio-control, :where([data-ui="retro-glass"]) .ui-switch-track, :where([data-ui="retro-glass"]) .ui-switch-thumb {
|
|
5564
|
+
background: var(--rg-control-material);
|
|
5565
|
+
border: 1px solid var(--rg-border);
|
|
5566
|
+
box-shadow: inset 0 1px 0 var(--rg-glass-highlight),inset 0-1px 0 rgb(var(--rg-text-rgb)/.12),0 1px 3px var(--rg-material-shadow);
|
|
5567
|
+
}
|
|
5568
|
+
|
|
5569
|
+
.rg-check-control, :where([data-ui="retro-glass"]) .ui-check-control {
|
|
5570
|
+
border-radius: .22rem;
|
|
5571
|
+
}
|
|
5572
|
+
|
|
5573
|
+
.rg-radio-control, :where([data-ui="retro-glass"]) .ui-radio-control {
|
|
5574
|
+
border-radius: 50%;
|
|
5575
|
+
}
|
|
5576
|
+
|
|
5577
|
+
.rg-switch-track, :where([data-ui="retro-glass"]) .ui-switch-track {
|
|
5578
|
+
background: var(--rg-glass-inset);
|
|
5579
|
+
border-radius: var(--rg-radius-pill);
|
|
5580
|
+
box-shadow: inset 0 2px 4px var(--rg-material-shadow),0 1px 0 var(--rg-glass-highlight);
|
|
5581
|
+
}
|
|
5582
|
+
|
|
5583
|
+
.rg-switch-thumb, :where([data-ui="retro-glass"]) .ui-switch-thumb {
|
|
5584
|
+
background: radial-gradient(circle at 42% 30%,var(--rg-glass-highlight),transparent 32%),var(--rg-control-material);
|
|
5585
|
+
border-radius: 50%;
|
|
5586
|
+
}
|
|
5587
|
+
|
|
5588
|
+
.rg-check:has(input:checked) .rg-check-control, .rg-radio:has(input:checked) .rg-radio-control, .rg-switch:has(input:checked) .rg-switch-track, :where([data-ui="retro-glass"]) .ui-check:has(input:checked) .ui-check-control, :where([data-ui="retro-glass"]) .ui-radio:has(input:checked) .ui-radio-control, :where([data-ui="retro-glass"]) .ui-switch:has(input:checked) .ui-switch-track {
|
|
5589
|
+
background: linear-gradient(180deg,var(--rg-primary-hover),var(--rg-primary));
|
|
5590
|
+
border-color: var(--rg-primary);
|
|
5591
|
+
}
|
|
5592
|
+
|
|
5593
|
+
[data-ui="retro-glass"][data-mode] :where(fieldset) {
|
|
5594
|
+
background: var(--rg-glass-pane);
|
|
5595
|
+
border: 1px solid var(--rg-border);
|
|
5596
|
+
box-shadow: inset 0 1px 0 var(--rg-glass-highlight),0 .32rem .7rem var(--rg-material-shadow);
|
|
5597
|
+
border-radius: .42rem;
|
|
5598
|
+
}
|
|
5599
|
+
|
|
5600
|
+
[data-ui="retro-glass"][data-mode] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select) {
|
|
5601
|
+
background: var(--rg-glass-inset);
|
|
5602
|
+
border: 1px inset var(--rg-border);
|
|
5603
|
+
box-shadow: inset 0 2px 5px var(--rg-material-shadow),0 1px 0 var(--rg-glass-highlight);
|
|
5604
|
+
border-radius: .28rem;
|
|
5605
|
+
}
|
|
5606
|
+
|
|
5607
|
+
[data-ui="retro-glass"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
|
|
5608
|
+
background: var(--rg-control-material);
|
|
5609
|
+
border: 1px solid var(--rg-border);
|
|
5610
|
+
box-shadow: inset 0 1px 0 var(--rg-glass-highlight),inset 0-1px 0 rgb(var(--rg-text-rgb)/.08),0 .16rem .38rem var(--rg-material-shadow);
|
|
5611
|
+
text-shadow: var(--rg-control-text-shadow);
|
|
5612
|
+
border-radius: .34rem;
|
|
4488
5613
|
}
|
|
4489
5614
|
|
|
4490
5615
|
@media (prefers-reduced-motion: reduce) {
|
|
@@ -4531,4 +5656,1205 @@
|
|
|
4531
5656
|
color: #000 !important;
|
|
4532
5657
|
}
|
|
4533
5658
|
}
|
|
5659
|
+
|
|
5660
|
+
.rg-input[aria-invalid="true"], .rg-textarea[aria-invalid="true"], .rg-select[aria-invalid="true"], :where([data-ui="retro-glass"]) .ui-input[aria-invalid="true"], :where([data-ui="retro-glass"]) .ui-textarea[aria-invalid="true"], :where([data-ui="retro-glass"]) .ui-select[aria-invalid="true"] {
|
|
5661
|
+
border-color: var(--rg-danger);
|
|
5662
|
+
box-shadow: 0 0 0 2px rgb(var(--rg-danger-rgb)/.2);
|
|
5663
|
+
}
|
|
5664
|
+
|
|
5665
|
+
.rg-input[readonly], .rg-textarea[readonly], :where([data-ui="retro-glass"]) .ui-input[readonly], :where([data-ui="retro-glass"]) .ui-textarea[readonly] {
|
|
5666
|
+
filter: saturate(.72);
|
|
5667
|
+
opacity: .78;
|
|
5668
|
+
border-style: dashed;
|
|
5669
|
+
}
|
|
5670
|
+
|
|
5671
|
+
.rg-button-ghost, :where([data-ui="retro-glass"]) .ui-button:where([data-ui-variant="ghost"]) {
|
|
5672
|
+
color: var(--usk-primary-ink, var(--rg-primary));
|
|
5673
|
+
background: none;
|
|
5674
|
+
border-color: #0000;
|
|
5675
|
+
}
|
|
5676
|
+
|
|
5677
|
+
.rg-feature-item > .rg-icon-medallion {
|
|
5678
|
+
font-size: 1.5rem;
|
|
5679
|
+
line-height: 1;
|
|
5680
|
+
}
|
|
5681
|
+
|
|
5682
|
+
.rg-callout-bar > .rg-icon-medallion {
|
|
5683
|
+
min-block-size: 4.5rem;
|
|
5684
|
+
min-inline-size: 4.5rem;
|
|
5685
|
+
font-size: 2rem;
|
|
5686
|
+
font-weight: 800;
|
|
5687
|
+
line-height: 1;
|
|
5688
|
+
}
|
|
5689
|
+
|
|
5690
|
+
[data-ui="retro-glass"][data-mode] {
|
|
5691
|
+
--rg-radius-sm: 6px;
|
|
5692
|
+
--rg-radius-md: 10px;
|
|
5693
|
+
--rg-radius-lg: 14px;
|
|
5694
|
+
--rg-space-5: 24px;
|
|
5695
|
+
--rg-space-6: 32px;
|
|
5696
|
+
--rg-control-height: 36px;
|
|
5697
|
+
--rg-line-color: rgb(var(--rg-border-rgb) / .65);
|
|
5698
|
+
--rg-line-strong: var(--rg-border);
|
|
5699
|
+
--rg-surface-input: rgb(var(--usk-surface-strong-rgb, var(--rg-input-fallback-rgb)));
|
|
5700
|
+
--rg-surface-raised: rgb(var(--rg-surface-strong-rgb));
|
|
5701
|
+
--rg-canvas: var(--rg-bg);
|
|
5702
|
+
--rg-text-soft: var(--rg-text-muted);
|
|
5703
|
+
--rg-muted: var(--rg-text-muted);
|
|
5704
|
+
--rg-highlight: var(--rg-glass-highlight);
|
|
5705
|
+
--rg-recess: var(--rg-material-shadow);
|
|
5706
|
+
--rg-glass-pane: linear-gradient(180deg, var(--rg-glass-midlight), transparent 18%), rgb(var(--rg-surface-rgb));
|
|
5707
|
+
--rg-brushed-chrome: repeating-linear-gradient(0deg, transparent 0 1px, var(--rg-brush-line) 1px 2px), linear-gradient(180deg, var(--rg-glass-highlight), var(--rg-glass-midlight) 48%, rgb(var(--rg-border-rgb) / .48) 52%, rgb(var(--rg-surface-soft-rgb) / .5));
|
|
5708
|
+
--rg-glass-inset: linear-gradient(180deg, #0000001f, transparent 18%), var(--rg-surface-input);
|
|
5709
|
+
--rg-control-material: linear-gradient(180deg, var(--rg-glass-highlight), var(--rg-glass-midlight) 46%, #00000029 52%, transparent), var(--rg-surface-soft);
|
|
5710
|
+
--rg-gloss-rgb: var(--rg-primary-rgb);
|
|
5711
|
+
--rg-progress-stripe: #ffffff3d;
|
|
5712
|
+
--rg-gloss-ink: rgb(var(--usk-primary-text-rgb, 255 255 255));
|
|
5713
|
+
--rg-gloss: linear-gradient(180deg, #fff6, transparent 18%, #00000026 46%, #0000006b 52%, #00000038), rgb(var(--rg-gloss-rgb));
|
|
5714
|
+
--rg-danger-gloss: linear-gradient(180deg, #fff6, transparent 18%, #00000026 46%, #0000006b 52%, #00000038), var(--rg-danger);
|
|
5715
|
+
--rg-floating-shadow: inset 0 1px 0 var(--rg-highlight), 0 7px 18px #0000003d;
|
|
5716
|
+
--usk-native-font-control: var(--rg-font-body);
|
|
5717
|
+
--usk-native-control-min-block-size: var(--rg-control-height);
|
|
5718
|
+
--usk-native-radius-sm: var(--rg-radius-sm);
|
|
5719
|
+
--usk-native-radius: var(--rg-radius-md);
|
|
5720
|
+
--usk-native-card-bg: var(--rg-glass-pane);
|
|
5721
|
+
--usk-native-control-bg: var(--rg-glass-inset);
|
|
5722
|
+
}
|
|
5723
|
+
|
|
5724
|
+
[data-ui="retro-glass"][data-mode="light"] {
|
|
5725
|
+
--rg-input-fallback-rgb: 248 250 252;
|
|
5726
|
+
}
|
|
5727
|
+
|
|
5728
|
+
[data-ui="retro-glass"][data-mode="dark"] {
|
|
5729
|
+
--rg-input-fallback-rgb: 7 21 29;
|
|
5730
|
+
}
|
|
5731
|
+
|
|
5732
|
+
[data-ui="retro-glass"][data-mode="contrast"] {
|
|
5733
|
+
--rg-input-fallback-rgb: 0 0 0;
|
|
5734
|
+
--rg-gloss-ink: var(--rg-on-primary);
|
|
5735
|
+
--rg-gloss: rgb(var(--rg-gloss-rgb));
|
|
5736
|
+
--rg-line-color: var(--rg-border);
|
|
5737
|
+
}
|
|
5738
|
+
|
|
5739
|
+
[data-ui="retro-glass"][data-theme][data-mode] {
|
|
5740
|
+
--rg-gloss: linear-gradient(180deg, #ffffff4d, transparent 12%, transparent 48%, #0000000a 52%, transparent), rgb(var(--rg-gloss-rgb));
|
|
5741
|
+
--rg-danger-gloss: linear-gradient(180deg, #ffffff4d, transparent 12%, transparent 48%, #0000000a 52%, transparent), var(--rg-danger);
|
|
5742
|
+
}
|
|
5743
|
+
|
|
5744
|
+
.rg-title, .rg-heading {
|
|
5745
|
+
letter-spacing: 0;
|
|
5746
|
+
text-shadow: none;
|
|
5747
|
+
}
|
|
5748
|
+
|
|
5749
|
+
.rg-heading {
|
|
5750
|
+
font-size: 1.25rem;
|
|
5751
|
+
}
|
|
5752
|
+
|
|
5753
|
+
.rg-title {
|
|
5754
|
+
font-size: 2rem;
|
|
5755
|
+
}
|
|
5756
|
+
|
|
5757
|
+
.rg-kicker, .rg-label, .rg-overline, :where([data-ui="retro-glass"]) .ui-label {
|
|
5758
|
+
font: 700 12px/1.4 var(--rg-font-mono);
|
|
5759
|
+
letter-spacing: 0;
|
|
5760
|
+
text-transform: uppercase;
|
|
5761
|
+
color: var(--rg-text-soft);
|
|
5762
|
+
}
|
|
5763
|
+
|
|
5764
|
+
.rg-label, :where([data-ui="retro-glass"]) .ui-label {
|
|
5765
|
+
margin-block-end: 4px;
|
|
5766
|
+
display: block;
|
|
5767
|
+
}
|
|
5768
|
+
|
|
5769
|
+
.rg-overline {
|
|
5770
|
+
margin: 0 0 8px;
|
|
5771
|
+
display: block;
|
|
5772
|
+
}
|
|
5773
|
+
|
|
5774
|
+
.rg-section-title {
|
|
5775
|
+
color: var(--rg-text);
|
|
5776
|
+
font: 800 14px/1.3 var(--rg-font-body);
|
|
5777
|
+
letter-spacing: 0;
|
|
5778
|
+
text-transform: uppercase;
|
|
5779
|
+
align-items: center;
|
|
5780
|
+
gap: 8px;
|
|
5781
|
+
margin: 0 0 16px;
|
|
5782
|
+
display: flex;
|
|
5783
|
+
}
|
|
5784
|
+
|
|
5785
|
+
.rg-section-title:before {
|
|
5786
|
+
content: "";
|
|
5787
|
+
border: 1px solid var(--rg-primary);
|
|
5788
|
+
background: var(--rg-gloss);
|
|
5789
|
+
block-size: 10px;
|
|
5790
|
+
inline-size: 10px;
|
|
5791
|
+
box-shadow: inset 0 1px 0 var(--rg-highlight);
|
|
5792
|
+
border-radius: 50%;
|
|
5793
|
+
flex: 0 0 10px;
|
|
5794
|
+
}
|
|
5795
|
+
|
|
5796
|
+
.rg-section-title:after {
|
|
5797
|
+
content: "";
|
|
5798
|
+
background: repeating-linear-gradient(90deg,var(--rg-line-color)0 9px,transparent 9px 13px);
|
|
5799
|
+
flex: 0 0 34px;
|
|
5800
|
+
block-size: 8px;
|
|
5801
|
+
inline-size: 34px;
|
|
5802
|
+
margin-inline-start: auto;
|
|
5803
|
+
}
|
|
5804
|
+
|
|
5805
|
+
.rg-card, .rg-panel, :where([data-ui="retro-glass"]) .ui-card {
|
|
5806
|
+
background: var(--rg-glass-pane);
|
|
5807
|
+
border: 1px solid var(--rg-line-color);
|
|
5808
|
+
border-radius: var(--rg-radius-md);
|
|
5809
|
+
box-shadow: inset 0 1px 0 var(--rg-highlight),0 4px 0 #0000001f;
|
|
5810
|
+
clip-path: none;
|
|
5811
|
+
}
|
|
5812
|
+
|
|
5813
|
+
.rg-card:before, .rg-panel:before, :where([data-ui="retro-glass"]) .ui-card:before {
|
|
5814
|
+
content: none;
|
|
5815
|
+
}
|
|
5816
|
+
|
|
5817
|
+
.rg-toolbar, :where([data-ui="retro-glass"]) .ui-toolbar {
|
|
5818
|
+
background: var(--rg-brushed-chrome),var(--rg-surface-soft);
|
|
5819
|
+
border-radius: var(--rg-radius-lg);
|
|
5820
|
+
}
|
|
5821
|
+
|
|
5822
|
+
.rg-button, .rg-icon-button, .rg-segment, .rg-pagination-page, :where([data-ui="retro-glass"]) .ui-button, :where([data-ui="retro-glass"]) .ui-icon-button {
|
|
5823
|
+
min-height: var(--rg-control-height);
|
|
5824
|
+
min-block-size: var(--rg-control-height);
|
|
5825
|
+
background: var(--rg-control-material);
|
|
5826
|
+
color: var(--rg-text);
|
|
5827
|
+
border: 1px solid var(--rg-line-strong);
|
|
5828
|
+
border-radius: var(--rg-radius-sm);
|
|
5829
|
+
box-shadow: inset 0 1px 0 var(--rg-highlight),inset 0-1px 0 #0000002e,0 1px 2px #00000038;
|
|
5830
|
+
font: 700 14px/1.2 var(--rg-font-body);
|
|
5831
|
+
letter-spacing: 0;
|
|
5832
|
+
text-shadow: none;
|
|
5833
|
+
cursor: pointer;
|
|
5834
|
+
clip-path: none;
|
|
5835
|
+
justify-content: center;
|
|
5836
|
+
align-items: center;
|
|
5837
|
+
gap: 8px;
|
|
5838
|
+
padding: 8px 12px;
|
|
5839
|
+
text-decoration: none;
|
|
5840
|
+
transition: background .15s, box-shadow .15s, transform 80ms;
|
|
5841
|
+
display: inline-flex;
|
|
5842
|
+
}
|
|
5843
|
+
|
|
5844
|
+
.rg-icon-button, :where([data-ui="retro-glass"]) .ui-icon-button {
|
|
5845
|
+
inline-size: var(--rg-control-height);
|
|
5846
|
+
aspect-ratio: 1;
|
|
5847
|
+
padding: 8px;
|
|
5848
|
+
}
|
|
5849
|
+
|
|
5850
|
+
.rg-button-primary, :where([data-ui="retro-glass"]) .ui-button:where([data-ui-variant="primary"]) {
|
|
5851
|
+
background: var(--rg-gloss);
|
|
5852
|
+
color: var(--rg-gloss-ink);
|
|
5853
|
+
border-color: var(--rg-primary);
|
|
5854
|
+
}
|
|
5855
|
+
|
|
5856
|
+
.rg-button-secondary, :where([data-ui="retro-glass"]) .ui-button:where([data-ui-variant="secondary"]) {
|
|
5857
|
+
background: var(--rg-control-material);
|
|
5858
|
+
color: var(--rg-text);
|
|
5859
|
+
border-color: var(--rg-line-strong);
|
|
5860
|
+
}
|
|
5861
|
+
|
|
5862
|
+
.rg-button-danger, :where([data-ui="retro-glass"]) .ui-button:where([data-ui-variant="danger"]) {
|
|
5863
|
+
background: var(--rg-danger-gloss);
|
|
5864
|
+
color: rgb(var(--usk-danger-text-rgb, 255 255 255));
|
|
5865
|
+
border-color: var(--rg-danger);
|
|
5866
|
+
}
|
|
5867
|
+
|
|
5868
|
+
[data-ui="retro-glass"][data-mode][style*="--rg-on-danger"] .rg-button-danger, :where([data-ui="retro-glass"])[data-mode][style*="--rg-on-danger"] .ui-button:where([data-ui-variant="danger"]) {
|
|
5869
|
+
color: var(--rg-on-danger);
|
|
5870
|
+
}
|
|
5871
|
+
|
|
5872
|
+
.rg-button-ghost, :where([data-ui="retro-glass"]) .ui-button:where([data-ui-variant="ghost"]) {
|
|
5873
|
+
color: var(--rg-text-soft);
|
|
5874
|
+
border-color: var(--rg-line-color);
|
|
5875
|
+
box-shadow: none;
|
|
5876
|
+
background: none;
|
|
5877
|
+
}
|
|
5878
|
+
|
|
5879
|
+
.rg-button:hover, .rg-icon-button:hover, .rg-button.is-hover, .rg-segment:hover, .rg-pagination-page:hover, :where([data-ui="retro-glass"]) .ui-button:hover, :where([data-ui="retro-glass"]) .ui-icon-button:hover, :where([data-ui="retro-glass"]) .ui-button.is-hover {
|
|
5880
|
+
border-color: var(--rg-focus);
|
|
5881
|
+
box-shadow: inset 0 1px 0 var(--rg-highlight),0 0 0 1px var(--rg-focus);
|
|
5882
|
+
transform: none;
|
|
5883
|
+
}
|
|
5884
|
+
|
|
5885
|
+
.rg-button:active, .rg-icon-button:active, .rg-button.is-pressed, .rg-button[aria-pressed="true"], :where([data-ui="retro-glass"]) .ui-button:active, :where([data-ui="retro-glass"]) .ui-icon-button:active, :where([data-ui="retro-glass"]) .ui-button.is-pressed, :where([data-ui="retro-glass"]) .ui-button[aria-pressed="true"] {
|
|
5886
|
+
background: linear-gradient(180deg,#00000038,#ffffff1a),var(--rg-surface-soft);
|
|
5887
|
+
color: var(--rg-text);
|
|
5888
|
+
box-shadow: inset 0 2px 5px var(--rg-recess);
|
|
5889
|
+
transform: translateY(1px);
|
|
5890
|
+
}
|
|
5891
|
+
|
|
5892
|
+
.rg-button:disabled, .rg-icon-button:disabled, .rg-button.is-disabled, :where([data-ui="retro-glass"]) .ui-button:disabled, :where([data-ui="retro-glass"]) .ui-icon-button:disabled, :where([data-ui="retro-glass"]) .ui-button.is-disabled {
|
|
5893
|
+
opacity: .4;
|
|
5894
|
+
filter: saturate(.45);
|
|
5895
|
+
cursor: not-allowed;
|
|
5896
|
+
box-shadow: none;
|
|
5897
|
+
}
|
|
5898
|
+
|
|
5899
|
+
.rg-field, :where([data-ui="retro-glass"]) .ui-field {
|
|
5900
|
+
min-inline-size: 0;
|
|
5901
|
+
display: block;
|
|
5902
|
+
}
|
|
5903
|
+
|
|
5904
|
+
.rg-input, .rg-select, .rg-textarea, :where([data-ui="retro-glass"]) .ui-input, :where([data-ui="retro-glass"]) .ui-select, :where([data-ui="retro-glass"]) .ui-textarea {
|
|
5905
|
+
inline-size: 100%;
|
|
5906
|
+
min-block-size: var(--rg-control-height);
|
|
5907
|
+
background: var(--rg-glass-inset);
|
|
5908
|
+
color: var(--rg-text);
|
|
5909
|
+
border: 1px solid var(--rg-line-strong);
|
|
5910
|
+
border-radius: var(--rg-radius-sm);
|
|
5911
|
+
box-shadow: inset 0 1px 3px var(--rg-recess),0 1px 0 var(--rg-highlight);
|
|
5912
|
+
font: 14px/1.3 var(--rg-font-body);
|
|
5913
|
+
padding: 8px 11px;
|
|
5914
|
+
}
|
|
5915
|
+
|
|
5916
|
+
.rg-select, :where([data-ui="retro-glass"]) .ui-select {
|
|
5917
|
+
background-image: var(--usk-native-select-indicator-image),linear-gradient(180deg,#0000001f,transparent 18%);
|
|
5918
|
+
background-size: var(--usk-native-select-indicator-size),auto;
|
|
5919
|
+
background-position: var(--usk-native-select-indicator-position),center;
|
|
5920
|
+
background-repeat: no-repeat;
|
|
5921
|
+
padding-inline-end: 32px;
|
|
5922
|
+
}
|
|
5923
|
+
|
|
5924
|
+
.rg-textarea, :where([data-ui="retro-glass"]) .ui-textarea {
|
|
5925
|
+
resize: vertical;
|
|
5926
|
+
min-block-size: 64px;
|
|
5927
|
+
}
|
|
5928
|
+
|
|
5929
|
+
.rg-input::placeholder, .rg-textarea::placeholder, :where([data-ui="retro-glass"]) .ui-input::placeholder, :where([data-ui="retro-glass"]) .ui-textarea::placeholder {
|
|
5930
|
+
color: var(--rg-muted);
|
|
5931
|
+
opacity: 1;
|
|
5932
|
+
}
|
|
5933
|
+
|
|
5934
|
+
.rg-input-wrap {
|
|
5935
|
+
align-items: center;
|
|
5936
|
+
display: flex;
|
|
5937
|
+
position: relative;
|
|
5938
|
+
}
|
|
5939
|
+
|
|
5940
|
+
.rg-input-wrap .rg-input, :where([data-ui="retro-glass"]) .rg-input-wrap .ui-input {
|
|
5941
|
+
padding-inline-end: 36px;
|
|
5942
|
+
}
|
|
5943
|
+
|
|
5944
|
+
.rg-input-icon {
|
|
5945
|
+
color: var(--rg-link);
|
|
5946
|
+
pointer-events: none;
|
|
5947
|
+
position: absolute;
|
|
5948
|
+
inset-inline-end: 11px;
|
|
5949
|
+
}
|
|
5950
|
+
|
|
5951
|
+
.rg-helper, .rg-error-text {
|
|
5952
|
+
color: var(--rg-text-soft);
|
|
5953
|
+
font: 12px/1.4 var(--rg-font-mono);
|
|
5954
|
+
margin-block-start: 4px;
|
|
5955
|
+
display: block;
|
|
5956
|
+
}
|
|
5957
|
+
|
|
5958
|
+
.rg-error-text {
|
|
5959
|
+
border-inline-start: 3px solid var(--rg-danger);
|
|
5960
|
+
padding-inline-start: 6px;
|
|
5961
|
+
}
|
|
5962
|
+
|
|
5963
|
+
.rg-input.is-error, .rg-input[aria-invalid="true"], .rg-select[aria-invalid="true"], .rg-textarea[aria-invalid="true"], :where([data-ui="retro-glass"]) .ui-input.is-error, :where([data-ui="retro-glass"]) .ui-input[aria-invalid="true"], :where([data-ui="retro-glass"]) .ui-select[aria-invalid="true"], :where([data-ui="retro-glass"]) .ui-textarea[aria-invalid="true"] {
|
|
5964
|
+
border-color: var(--rg-danger);
|
|
5965
|
+
box-shadow: inset 0 1px 3px var(--rg-recess),0 0 0 1px var(--rg-danger);
|
|
5966
|
+
}
|
|
5967
|
+
|
|
5968
|
+
.rg-input.is-hover, :where([data-ui="retro-glass"]) .ui-input.is-hover {
|
|
5969
|
+
border-color: var(--rg-focus);
|
|
5970
|
+
}
|
|
5971
|
+
|
|
5972
|
+
.rg-input.is-focus, :where([data-ui="retro-glass"]) .ui-input.is-focus {
|
|
5973
|
+
outline: 2px solid var(--rg-focus);
|
|
5974
|
+
outline-offset: 2px;
|
|
5975
|
+
}
|
|
5976
|
+
|
|
5977
|
+
.rg-dropdown, .rg-popover, .rg-modal {
|
|
5978
|
+
color: var(--rg-text);
|
|
5979
|
+
background: var(--rg-glass-pane);
|
|
5980
|
+
border: 1px solid var(--rg-line-strong);
|
|
5981
|
+
border-radius: var(--rg-radius-md);
|
|
5982
|
+
box-shadow: var(--rg-floating-shadow);
|
|
5983
|
+
font: 14px/1.4 var(--rg-font-body);
|
|
5984
|
+
padding: 12px;
|
|
5985
|
+
}
|
|
5986
|
+
|
|
5987
|
+
.rg-dropdown {
|
|
5988
|
+
border-color: var(--rg-focus);
|
|
5989
|
+
border-radius: var(--rg-radius-sm);
|
|
5990
|
+
padding: 6px;
|
|
5991
|
+
}
|
|
5992
|
+
|
|
5993
|
+
.rg-option {
|
|
5994
|
+
min-block-size: 32px;
|
|
5995
|
+
inline-size: 100%;
|
|
5996
|
+
color: var(--rg-text-soft);
|
|
5997
|
+
font: 14px/1.3 var(--rg-font-body);
|
|
5998
|
+
text-align: start;
|
|
5999
|
+
cursor: pointer;
|
|
6000
|
+
background: none;
|
|
6001
|
+
border: 1px solid #0000;
|
|
6002
|
+
border-radius: 4px;
|
|
6003
|
+
justify-content: space-between;
|
|
6004
|
+
align-items: center;
|
|
6005
|
+
padding: 6px 8px;
|
|
6006
|
+
display: flex;
|
|
6007
|
+
}
|
|
6008
|
+
|
|
6009
|
+
.rg-option:hover, .rg-option.is-selected, .rg-option[aria-selected="true"] {
|
|
6010
|
+
background: var(--rg-gloss);
|
|
6011
|
+
color: var(--rg-gloss-ink);
|
|
6012
|
+
border-color: var(--rg-primary);
|
|
6013
|
+
}
|
|
6014
|
+
|
|
6015
|
+
.rg-option:disabled {
|
|
6016
|
+
opacity: .4;
|
|
6017
|
+
cursor: not-allowed;
|
|
6018
|
+
}
|
|
6019
|
+
|
|
6020
|
+
.rg-tags {
|
|
6021
|
+
background: var(--rg-glass-inset);
|
|
6022
|
+
border: 1px solid var(--rg-line-strong);
|
|
6023
|
+
border-radius: var(--rg-radius-sm);
|
|
6024
|
+
min-block-size: 48px;
|
|
6025
|
+
box-shadow: inset 0 1px 3px var(--rg-recess);
|
|
6026
|
+
flex-wrap: wrap;
|
|
6027
|
+
align-items: center;
|
|
6028
|
+
gap: 6px;
|
|
6029
|
+
padding: 8px;
|
|
6030
|
+
display: flex;
|
|
6031
|
+
}
|
|
6032
|
+
|
|
6033
|
+
.rg-chip, .rg-badge, :where([data-ui="retro-glass"]) .ui-badge {
|
|
6034
|
+
border: 1px solid var(--rg-line-strong);
|
|
6035
|
+
border-radius: var(--rg-radius-pill);
|
|
6036
|
+
background: var(--rg-surface-soft);
|
|
6037
|
+
min-block-size: 24px;
|
|
6038
|
+
color: var(--rg-text);
|
|
6039
|
+
box-shadow: inset 0 1px 0 var(--rg-highlight);
|
|
6040
|
+
font: 700 12px/1.2 var(--rg-font-body);
|
|
6041
|
+
letter-spacing: 0;
|
|
6042
|
+
text-transform: none;
|
|
6043
|
+
align-items: center;
|
|
6044
|
+
gap: 6px;
|
|
6045
|
+
padding: 4px 10px;
|
|
6046
|
+
display: inline-flex;
|
|
6047
|
+
}
|
|
6048
|
+
|
|
6049
|
+
.rg-badge, :where([data-ui="retro-glass"]) .ui-badge {
|
|
6050
|
+
background: var(--rg-control-material);
|
|
6051
|
+
box-shadow: inset 0 1px 0 var(--rg-highlight),inset 0-1px 0 #0000002e,0 1px 2px #00000038;
|
|
6052
|
+
}
|
|
6053
|
+
|
|
6054
|
+
.rg-chip, .rg-badge-primary, :where([data-ui="retro-glass"]) .ui-badge:where([data-ui-variant="primary"]) {
|
|
6055
|
+
background: var(--rg-gloss);
|
|
6056
|
+
border-color: var(--rg-primary);
|
|
6057
|
+
color: var(--rg-gloss-ink);
|
|
6058
|
+
}
|
|
6059
|
+
|
|
6060
|
+
.rg-chip-danger {
|
|
6061
|
+
background: linear-gradient(rgb(var(--rg-danger-rgb)/.18),rgb(var(--rg-danger-rgb)/.18)),var(--rg-surface-raised);
|
|
6062
|
+
border-color: var(--rg-danger);
|
|
6063
|
+
color: var(--rg-text);
|
|
6064
|
+
}
|
|
6065
|
+
|
|
6066
|
+
.rg-chip-warning {
|
|
6067
|
+
background: linear-gradient(rgb(var(--rg-warning-rgb)/.18),rgb(var(--rg-warning-rgb)/.18)),var(--rg-surface-raised);
|
|
6068
|
+
border-color: var(--rg-warning);
|
|
6069
|
+
color: var(--rg-text);
|
|
6070
|
+
}
|
|
6071
|
+
|
|
6072
|
+
.rg-badge-success, :where([data-ui="retro-glass"]) .ui-badge:where([data-ui-variant="success"]) {
|
|
6073
|
+
background: linear-gradient(180deg,#fff6,transparent 18%,#00000026 46%,#0000006b 52%,#00000038),var(--rg-success);
|
|
6074
|
+
border-color: var(--rg-success);
|
|
6075
|
+
color: var(--rg-on-success);
|
|
6076
|
+
}
|
|
6077
|
+
|
|
6078
|
+
.rg-badge-warning, :where([data-ui="retro-glass"]) .ui-badge:where([data-ui-variant="warning"]) {
|
|
6079
|
+
background: linear-gradient(180deg,#fff6,transparent 18%,#00000026 46%,#0000006b 52%,#00000038),var(--rg-warning);
|
|
6080
|
+
border-color: var(--rg-warning);
|
|
6081
|
+
color: var(--rg-on-warning);
|
|
6082
|
+
}
|
|
6083
|
+
|
|
6084
|
+
.rg-badge-danger, :where([data-ui="retro-glass"]) .ui-badge:where([data-ui-variant="danger"]) {
|
|
6085
|
+
background: linear-gradient(180deg,#fff6,transparent 18%,#00000026 46%,#0000006b 52%,#00000038),var(--rg-danger);
|
|
6086
|
+
border-color: var(--rg-danger);
|
|
6087
|
+
color: var(--rg-on-danger);
|
|
6088
|
+
}
|
|
6089
|
+
|
|
6090
|
+
.rg-chip {
|
|
6091
|
+
cursor: pointer;
|
|
6092
|
+
}
|
|
6093
|
+
|
|
6094
|
+
.rg-file {
|
|
6095
|
+
border: 1px dashed var(--rg-line-strong);
|
|
6096
|
+
border-radius: var(--rg-radius-md);
|
|
6097
|
+
background: var(--rg-glass-inset);
|
|
6098
|
+
min-block-size: 112px;
|
|
6099
|
+
color: var(--rg-text-soft);
|
|
6100
|
+
box-shadow: inset 0 1px 3px var(--rg-recess);
|
|
6101
|
+
text-align: center;
|
|
6102
|
+
font: 14px/1.4 var(--rg-font-body);
|
|
6103
|
+
cursor: pointer;
|
|
6104
|
+
flex-direction: column;
|
|
6105
|
+
justify-content: center;
|
|
6106
|
+
align-items: center;
|
|
6107
|
+
gap: 8px;
|
|
6108
|
+
padding: 16px;
|
|
6109
|
+
display: flex;
|
|
6110
|
+
position: relative;
|
|
6111
|
+
}
|
|
6112
|
+
|
|
6113
|
+
.rg-file strong {
|
|
6114
|
+
color: var(--rg-link);
|
|
6115
|
+
}
|
|
6116
|
+
|
|
6117
|
+
.rg-file input[type="file"] {
|
|
6118
|
+
opacity: 0;
|
|
6119
|
+
cursor: pointer;
|
|
6120
|
+
block-size: 100%;
|
|
6121
|
+
inline-size: 100%;
|
|
6122
|
+
position: absolute;
|
|
6123
|
+
inset: 0;
|
|
6124
|
+
}
|
|
6125
|
+
|
|
6126
|
+
.rg-file:focus-within {
|
|
6127
|
+
outline: 2px solid var(--rg-focus);
|
|
6128
|
+
outline-offset: 2px;
|
|
6129
|
+
}
|
|
6130
|
+
|
|
6131
|
+
.rg-choice, .rg-switch, :where([data-ui="retro-glass"]) .ui-switch {
|
|
6132
|
+
min-block-size: 32px;
|
|
6133
|
+
color: var(--rg-text-soft);
|
|
6134
|
+
font: 14px/1.3 var(--rg-font-body);
|
|
6135
|
+
cursor: pointer;
|
|
6136
|
+
align-items: center;
|
|
6137
|
+
gap: 8px;
|
|
6138
|
+
display: inline-flex;
|
|
6139
|
+
position: relative;
|
|
6140
|
+
}
|
|
6141
|
+
|
|
6142
|
+
.rg-choice input {
|
|
6143
|
+
accent-color: var(--rg-primary);
|
|
6144
|
+
flex: 0 0 18px;
|
|
6145
|
+
block-size: 18px;
|
|
6146
|
+
inline-size: 18px;
|
|
6147
|
+
margin: 0;
|
|
6148
|
+
}
|
|
6149
|
+
|
|
6150
|
+
.rg-choice:has(:disabled), .rg-switch:has(:disabled), :where([data-ui="retro-glass"]) .ui-switch:has(:disabled) {
|
|
6151
|
+
opacity: 1;
|
|
6152
|
+
color: var(--rg-text-soft);
|
|
6153
|
+
cursor: not-allowed;
|
|
6154
|
+
}
|
|
6155
|
+
|
|
6156
|
+
.rg-choice input:disabled {
|
|
6157
|
+
opacity: 1;
|
|
6158
|
+
border: 1px dashed var(--rg-line-strong);
|
|
6159
|
+
background: var(--rg-surface-soft);
|
|
6160
|
+
box-shadow: none;
|
|
6161
|
+
}
|
|
6162
|
+
|
|
6163
|
+
.rg-choice input:disabled:not(:checked) {
|
|
6164
|
+
appearance: none;
|
|
6165
|
+
}
|
|
6166
|
+
|
|
6167
|
+
.rg-choice input.is-focus {
|
|
6168
|
+
outline: 2px solid var(--rg-focus);
|
|
6169
|
+
outline-offset: 2px;
|
|
6170
|
+
}
|
|
6171
|
+
|
|
6172
|
+
.rg-switch input, :where([data-ui="retro-glass"]) .ui-switch input {
|
|
6173
|
+
opacity: 0;
|
|
6174
|
+
z-index: 1;
|
|
6175
|
+
block-size: 100%;
|
|
6176
|
+
inline-size: 100%;
|
|
6177
|
+
cursor: inherit;
|
|
6178
|
+
position: absolute;
|
|
6179
|
+
inset: 0;
|
|
6180
|
+
}
|
|
6181
|
+
|
|
6182
|
+
.rg-switch-track, :where([data-ui="retro-glass"]) .ui-switch-track {
|
|
6183
|
+
border: 1px solid var(--rg-line-strong);
|
|
6184
|
+
border-radius: var(--rg-radius-pill);
|
|
6185
|
+
background: var(--rg-glass-inset);
|
|
6186
|
+
block-size: 22px;
|
|
6187
|
+
inline-size: 42px;
|
|
6188
|
+
box-shadow: inset 0 1px 3px var(--rg-recess);
|
|
6189
|
+
align-items: center;
|
|
6190
|
+
padding: 2px;
|
|
6191
|
+
display: inline-flex;
|
|
6192
|
+
}
|
|
6193
|
+
|
|
6194
|
+
.rg-switch-thumb, :where([data-ui="retro-glass"]) .ui-switch-thumb {
|
|
6195
|
+
border: 1px solid var(--rg-line-strong);
|
|
6196
|
+
background: var(--rg-control-material);
|
|
6197
|
+
block-size: 16px;
|
|
6198
|
+
inline-size: 16px;
|
|
6199
|
+
box-shadow: inset 0 1px 0 var(--rg-highlight),0 1px 2px #00000059;
|
|
6200
|
+
border-radius: 50%;
|
|
6201
|
+
transition: transform .15s;
|
|
6202
|
+
}
|
|
6203
|
+
|
|
6204
|
+
.rg-switch input:checked + .rg-switch-track, :where([data-ui="retro-glass"]) .ui-switch input:checked+.ui-switch-track {
|
|
6205
|
+
background: var(--rg-gloss);
|
|
6206
|
+
border-color: var(--rg-primary);
|
|
6207
|
+
}
|
|
6208
|
+
|
|
6209
|
+
.rg-switch input:checked + .rg-switch-track .rg-switch-thumb, :where([data-ui="retro-glass"]) .ui-switch input:checked+.ui-switch-track .ui-switch-thumb {
|
|
6210
|
+
transform: translateX(18px);
|
|
6211
|
+
}
|
|
6212
|
+
|
|
6213
|
+
.rg-switch:has(input:disabled) .rg-switch-track, :where([data-ui="retro-glass"]) .ui-switch:has(input:disabled) .ui-switch-track {
|
|
6214
|
+
background: var(--rg-surface-soft);
|
|
6215
|
+
border: 1px dashed var(--rg-line-strong);
|
|
6216
|
+
box-shadow: none;
|
|
6217
|
+
filter: saturate(.35);
|
|
6218
|
+
}
|
|
6219
|
+
|
|
6220
|
+
.rg-switch:has(input:disabled) .rg-switch-thumb, :where([data-ui="retro-glass"]) .ui-switch:has(input:disabled) .ui-switch-thumb {
|
|
6221
|
+
opacity: .58;
|
|
6222
|
+
box-shadow: none;
|
|
6223
|
+
}
|
|
6224
|
+
|
|
6225
|
+
.rg-switch input:focus-visible + .rg-switch-track, :where([data-ui="retro-glass"]) .ui-switch input:focus-visible+.ui-switch-track {
|
|
6226
|
+
outline: 2px solid var(--rg-focus);
|
|
6227
|
+
outline-offset: 2px;
|
|
6228
|
+
}
|
|
6229
|
+
|
|
6230
|
+
.rg-segmented {
|
|
6231
|
+
flex-wrap: wrap;
|
|
6232
|
+
gap: 4px;
|
|
6233
|
+
display: inline-flex;
|
|
6234
|
+
}
|
|
6235
|
+
|
|
6236
|
+
.rg-segment {
|
|
6237
|
+
font-size: 12px;
|
|
6238
|
+
}
|
|
6239
|
+
|
|
6240
|
+
.rg-segment.is-active, .rg-segment[aria-pressed="true"], .rg-pagination-page[aria-current="page"] {
|
|
6241
|
+
background: var(--rg-gloss);
|
|
6242
|
+
color: var(--rg-gloss-ink);
|
|
6243
|
+
border-color: var(--rg-primary);
|
|
6244
|
+
}
|
|
6245
|
+
|
|
6246
|
+
.rg-range {
|
|
6247
|
+
--usk-native-range-track-background: linear-gradient(90deg, var(--rg-primary) 0 var(--rg-value, 58%), var(--rg-surface-input) var(--rg-value, 58%) 100%);
|
|
6248
|
+
appearance: none;
|
|
6249
|
+
background: none;
|
|
6250
|
+
border: 0;
|
|
6251
|
+
min-block-size: 32px;
|
|
6252
|
+
inline-size: 100%;
|
|
6253
|
+
margin: 0;
|
|
6254
|
+
padding: 0;
|
|
6255
|
+
}
|
|
6256
|
+
|
|
6257
|
+
.rg-range-critical {
|
|
6258
|
+
--usk-native-range-track-background: linear-gradient(90deg, var(--rg-success) 0 45%, var(--rg-warning) 45% 72%, var(--rg-danger) 72% 100%);
|
|
6259
|
+
}
|
|
6260
|
+
|
|
6261
|
+
.rg-range::-webkit-slider-runnable-track {
|
|
6262
|
+
border: 1px solid var(--rg-line-strong);
|
|
6263
|
+
border-radius: var(--rg-radius-pill);
|
|
6264
|
+
background: var(--usk-native-range-track-background);
|
|
6265
|
+
height: 7px;
|
|
6266
|
+
box-shadow: inset 0 1px 2px var(--rg-recess);
|
|
6267
|
+
}
|
|
6268
|
+
|
|
6269
|
+
.rg-range::-moz-range-track {
|
|
6270
|
+
border: 1px solid var(--rg-line-strong);
|
|
6271
|
+
border-radius: var(--rg-radius-pill);
|
|
6272
|
+
background: var(--usk-native-range-track-background);
|
|
6273
|
+
height: 7px;
|
|
6274
|
+
box-shadow: inset 0 1px 2px var(--rg-recess);
|
|
6275
|
+
}
|
|
6276
|
+
|
|
6277
|
+
.rg-range::-moz-range-progress {
|
|
6278
|
+
background: none;
|
|
6279
|
+
}
|
|
6280
|
+
|
|
6281
|
+
.rg-range::-webkit-slider-thumb {
|
|
6282
|
+
appearance: none;
|
|
6283
|
+
border: 1px solid var(--rg-line-strong);
|
|
6284
|
+
background: var(--rg-control-material);
|
|
6285
|
+
block-size: 19px;
|
|
6286
|
+
inline-size: 19px;
|
|
6287
|
+
box-shadow: inset 0 1px 0 var(--rg-highlight),0 1px 3px #0006;
|
|
6288
|
+
border-radius: 50%;
|
|
6289
|
+
margin-top: -7px;
|
|
6290
|
+
}
|
|
6291
|
+
|
|
6292
|
+
.rg-range::-moz-range-thumb {
|
|
6293
|
+
border: 1px solid var(--rg-line-strong);
|
|
6294
|
+
background: var(--rg-control-material);
|
|
6295
|
+
block-size: 19px;
|
|
6296
|
+
inline-size: 19px;
|
|
6297
|
+
box-shadow: inset 0 1px 0 var(--rg-highlight),0 1px 3px #0006;
|
|
6298
|
+
border-radius: 50%;
|
|
6299
|
+
}
|
|
6300
|
+
|
|
6301
|
+
.rg-progress, :where([data-ui="retro-glass"]) .ui-progress {
|
|
6302
|
+
border: 1px solid var(--rg-line-strong);
|
|
6303
|
+
border-radius: var(--rg-radius-pill);
|
|
6304
|
+
background: var(--rg-glass-inset);
|
|
6305
|
+
block-size: 12px;
|
|
6306
|
+
box-shadow: inset 0 1px 3px var(--rg-recess);
|
|
6307
|
+
padding: 2px;
|
|
6308
|
+
overflow: hidden;
|
|
6309
|
+
}
|
|
6310
|
+
|
|
6311
|
+
.rg-progress-bar, :where([data-ui="retro-glass"]) .ui-progress-bar {
|
|
6312
|
+
block-size: 100%;
|
|
6313
|
+
inline-size: var(--rg-progress-value, 64%);
|
|
6314
|
+
border-radius: inherit;
|
|
6315
|
+
background: repeating-linear-gradient(125deg,var(--rg-progress-stripe)0 1px,transparent 1px 16px),var(--rg-progress-fill, var(--rg-gloss));
|
|
6316
|
+
box-shadow: inset 0 1px 0 var(--rg-highlight);
|
|
6317
|
+
display: block;
|
|
6318
|
+
}
|
|
6319
|
+
|
|
6320
|
+
.rg-progress-danger {
|
|
6321
|
+
--rg-progress-fill: var(--rg-danger-gloss);
|
|
6322
|
+
}
|
|
6323
|
+
|
|
6324
|
+
.rg-meter {
|
|
6325
|
+
border: 1px solid var(--rg-line-strong);
|
|
6326
|
+
border-radius: var(--rg-radius-pill);
|
|
6327
|
+
background: linear-gradient(90deg,var(--rg-success)0 46%,var(--rg-warning) 46% 72%,var(--rg-danger) 72% 100%);
|
|
6328
|
+
block-size: 8px;
|
|
6329
|
+
margin-block: 12px;
|
|
6330
|
+
position: relative;
|
|
6331
|
+
}
|
|
6332
|
+
|
|
6333
|
+
.rg-meter:after {
|
|
6334
|
+
content: "";
|
|
6335
|
+
border: 1px solid var(--rg-line-strong);
|
|
6336
|
+
background: var(--rg-control-material);
|
|
6337
|
+
block-size: 18px;
|
|
6338
|
+
inline-size: 18px;
|
|
6339
|
+
box-shadow: inset 0 1px 0 var(--rg-highlight),0 1px 3px #0006;
|
|
6340
|
+
border-radius: 50%;
|
|
6341
|
+
position: absolute;
|
|
6342
|
+
inset-block-start: 50%;
|
|
6343
|
+
inset-inline-start: clamp(0%,var(--rg-value, 72%),100%);
|
|
6344
|
+
transform: translate(-50%, -50%);
|
|
6345
|
+
}
|
|
6346
|
+
|
|
6347
|
+
.rg-stepper {
|
|
6348
|
+
justify-content: space-between;
|
|
6349
|
+
align-items: start;
|
|
6350
|
+
margin: 16px 0 0;
|
|
6351
|
+
padding: 0;
|
|
6352
|
+
list-style: none;
|
|
6353
|
+
display: flex;
|
|
6354
|
+
position: relative;
|
|
6355
|
+
}
|
|
6356
|
+
|
|
6357
|
+
.rg-stepper:before {
|
|
6358
|
+
content: "";
|
|
6359
|
+
background: var(--rg-line-strong);
|
|
6360
|
+
block-size: 2px;
|
|
6361
|
+
position: absolute;
|
|
6362
|
+
inset-block-start: 15px;
|
|
6363
|
+
inset-inline: 12%;
|
|
6364
|
+
}
|
|
6365
|
+
|
|
6366
|
+
.rg-step {
|
|
6367
|
+
color: var(--rg-text-soft);
|
|
6368
|
+
text-align: center;
|
|
6369
|
+
font: 12px/1.4 var(--rg-font-mono);
|
|
6370
|
+
flex: 1;
|
|
6371
|
+
position: relative;
|
|
6372
|
+
}
|
|
6373
|
+
|
|
6374
|
+
.rg-step b {
|
|
6375
|
+
background: var(--rg-surface-soft);
|
|
6376
|
+
border: 1px solid var(--rg-line-strong);
|
|
6377
|
+
border-radius: 50%;
|
|
6378
|
+
justify-content: center;
|
|
6379
|
+
align-items: center;
|
|
6380
|
+
block-size: 24px;
|
|
6381
|
+
inline-size: 24px;
|
|
6382
|
+
margin: 0 auto 8px;
|
|
6383
|
+
display: flex;
|
|
6384
|
+
}
|
|
6385
|
+
|
|
6386
|
+
.rg-step.is-complete b {
|
|
6387
|
+
background: var(--rg-gloss);
|
|
6388
|
+
color: var(--rg-gloss-ink);
|
|
6389
|
+
border-color: var(--rg-primary);
|
|
6390
|
+
}
|
|
6391
|
+
|
|
6392
|
+
.rg-step.is-active b {
|
|
6393
|
+
background: var(--rg-surface-input);
|
|
6394
|
+
color: var(--rg-link);
|
|
6395
|
+
border: 2px solid var(--rg-primary);
|
|
6396
|
+
}
|
|
6397
|
+
|
|
6398
|
+
.rg-alert, :where([data-ui="retro-glass"]) .ui-alert {
|
|
6399
|
+
border: 1px solid var(--rg-primary);
|
|
6400
|
+
border-radius: var(--rg-radius-sm);
|
|
6401
|
+
background: var(--rg-glass-pane);
|
|
6402
|
+
min-block-size: 40px;
|
|
6403
|
+
color: var(--rg-text-soft);
|
|
6404
|
+
box-shadow: inset 0 1px 0 var(--rg-highlight);
|
|
6405
|
+
font: 14px/1.4 var(--rg-font-body);
|
|
6406
|
+
align-items: center;
|
|
6407
|
+
gap: 8px;
|
|
6408
|
+
padding: 8px;
|
|
6409
|
+
display: flex;
|
|
6410
|
+
}
|
|
6411
|
+
|
|
6412
|
+
.rg-alert-body, :where([data-ui="retro-glass"]) .ui-alert-body {
|
|
6413
|
+
margin: 0;
|
|
6414
|
+
}
|
|
6415
|
+
|
|
6416
|
+
.rg-alert-success, :where([data-ui="retro-glass"]) .ui-alert:where([data-ui-variant="success"]) {
|
|
6417
|
+
border-color: var(--rg-success);
|
|
6418
|
+
}
|
|
6419
|
+
|
|
6420
|
+
.rg-alert-warning, :where([data-ui="retro-glass"]) .ui-alert:where([data-ui-variant="warning"]) {
|
|
6421
|
+
border-color: var(--rg-warning);
|
|
6422
|
+
}
|
|
6423
|
+
|
|
6424
|
+
.rg-alert-danger, :where([data-ui="retro-glass"]) .ui-alert:where([data-ui-variant="danger"]) {
|
|
6425
|
+
border-color: var(--rg-danger);
|
|
6426
|
+
}
|
|
6427
|
+
|
|
6428
|
+
.rg-alert > [aria-hidden="true"], :where([data-ui="retro-glass"]) .ui-alert>[aria-hidden="true"] {
|
|
6429
|
+
color: var(--usk-primary-ink, var(--rg-primary));
|
|
6430
|
+
}
|
|
6431
|
+
|
|
6432
|
+
.rg-alert-success > [aria-hidden="true"], :where([data-ui="retro-glass"]) .ui-alert:where([data-ui-variant="success"])>[aria-hidden="true"] {
|
|
6433
|
+
color: var(--rg-success);
|
|
6434
|
+
}
|
|
6435
|
+
|
|
6436
|
+
.rg-alert-warning > [aria-hidden="true"], :where([data-ui="retro-glass"]) .ui-alert:where([data-ui-variant="warning"])>[aria-hidden="true"] {
|
|
6437
|
+
color: var(--rg-warning);
|
|
6438
|
+
}
|
|
6439
|
+
|
|
6440
|
+
.rg-alert-danger > [aria-hidden="true"], :where([data-ui="retro-glass"]) .ui-alert:where([data-ui-variant="danger"])>[aria-hidden="true"] {
|
|
6441
|
+
color: var(--rg-danger);
|
|
6442
|
+
}
|
|
6443
|
+
|
|
6444
|
+
.rg-toast {
|
|
6445
|
+
border: 1px solid var(--rg-line-strong);
|
|
6446
|
+
border-radius: var(--rg-radius-md);
|
|
6447
|
+
background: var(--rg-glass-pane);
|
|
6448
|
+
color: var(--rg-text);
|
|
6449
|
+
box-shadow: inset 0 1px 0 var(--rg-highlight);
|
|
6450
|
+
align-items: center;
|
|
6451
|
+
gap: 12px;
|
|
6452
|
+
padding: 12px;
|
|
6453
|
+
display: flex;
|
|
6454
|
+
}
|
|
6455
|
+
|
|
6456
|
+
.rg-toast strong {
|
|
6457
|
+
font: 700 14px/1.4 var(--rg-font-mono);
|
|
6458
|
+
display: block;
|
|
6459
|
+
}
|
|
6460
|
+
|
|
6461
|
+
.rg-toast p {
|
|
6462
|
+
color: var(--rg-text-soft);
|
|
6463
|
+
font: 14px/1.4 var(--rg-font-body);
|
|
6464
|
+
margin: 4px 0 0;
|
|
6465
|
+
}
|
|
6466
|
+
|
|
6467
|
+
.rg-skeleton {
|
|
6468
|
+
border-radius: var(--rg-radius-pill);
|
|
6469
|
+
background: linear-gradient(90deg,var(--rg-surface-soft),rgb(var(--rg-text-rgb)/.12),var(--rg-surface-soft));
|
|
6470
|
+
background-size: 200% 100%;
|
|
6471
|
+
block-size: 10px;
|
|
6472
|
+
inline-size: 100%;
|
|
6473
|
+
animation: 1.5s ease-in-out infinite rg-template-pulse;
|
|
6474
|
+
display: block;
|
|
6475
|
+
}
|
|
6476
|
+
|
|
6477
|
+
.rg-breadcrumb, .rg-tabs, .rg-pagination {
|
|
6478
|
+
flex-wrap: wrap;
|
|
6479
|
+
align-items: center;
|
|
6480
|
+
gap: 6px;
|
|
6481
|
+
display: flex;
|
|
6482
|
+
}
|
|
6483
|
+
|
|
6484
|
+
.rg-breadcrumb {
|
|
6485
|
+
color: var(--rg-text-soft);
|
|
6486
|
+
font: 12px/1.4 var(--rg-font-mono);
|
|
6487
|
+
}
|
|
6488
|
+
|
|
6489
|
+
.rg-breadcrumb a {
|
|
6490
|
+
color: var(--rg-text-soft);
|
|
6491
|
+
}
|
|
6492
|
+
|
|
6493
|
+
.rg-breadcrumb [aria-current] {
|
|
6494
|
+
color: var(--rg-link);
|
|
6495
|
+
font-weight: 700;
|
|
6496
|
+
}
|
|
6497
|
+
|
|
6498
|
+
.rg-tab {
|
|
6499
|
+
min-block-size: var(--rg-control-height);
|
|
6500
|
+
border: 0;
|
|
6501
|
+
border-bottom: 2px solid var(--rg-line-strong);
|
|
6502
|
+
color: var(--rg-text-soft);
|
|
6503
|
+
font: 700 12px/1.4 var(--rg-font-mono);
|
|
6504
|
+
cursor: pointer;
|
|
6505
|
+
background: none;
|
|
6506
|
+
border-radius: 6px 6px 0 0;
|
|
6507
|
+
padding: 8px 12px;
|
|
6508
|
+
}
|
|
6509
|
+
|
|
6510
|
+
.rg-tab:hover, .rg-tab.is-active, .rg-tab[aria-selected="true"] {
|
|
6511
|
+
background: linear-gradient(rgb(var(--rg-primary-rgb)/.2),rgb(var(--rg-primary-rgb)/.2)),var(--rg-surface-input);
|
|
6512
|
+
border-bottom-color: var(--rg-primary);
|
|
6513
|
+
color: var(--rg-text);
|
|
6514
|
+
}
|
|
6515
|
+
|
|
6516
|
+
.rg-pagination-page {
|
|
6517
|
+
min-inline-size: 36px;
|
|
6518
|
+
padding: 8px;
|
|
6519
|
+
font-size: 12px;
|
|
6520
|
+
}
|
|
6521
|
+
|
|
6522
|
+
.rg-nav, :where([data-ui="retro-glass"]) .ui-nav {
|
|
6523
|
+
box-shadow: none;
|
|
6524
|
+
background: none;
|
|
6525
|
+
border: 0;
|
|
6526
|
+
gap: 6px;
|
|
6527
|
+
padding: 0;
|
|
6528
|
+
}
|
|
6529
|
+
|
|
6530
|
+
.rg-nav-link, :where([data-ui="retro-glass"]) .ui-nav-link {
|
|
6531
|
+
min-block-size: var(--rg-control-height);
|
|
6532
|
+
background: var(--rg-control-material);
|
|
6533
|
+
border: 1px solid var(--rg-line-strong);
|
|
6534
|
+
border-radius: var(--rg-radius-sm);
|
|
6535
|
+
color: var(--rg-text-soft);
|
|
6536
|
+
text-shadow: none;
|
|
6537
|
+
letter-spacing: 0;
|
|
6538
|
+
padding: 8px 12px;
|
|
6539
|
+
}
|
|
6540
|
+
|
|
6541
|
+
.rg-nav-link:hover, :where([data-ui="retro-glass"]) .ui-nav-link:hover {
|
|
6542
|
+
color: var(--rg-text);
|
|
6543
|
+
background: var(--rg-control-material);
|
|
6544
|
+
}
|
|
6545
|
+
|
|
6546
|
+
.rg-nav-link.is-active, .rg-nav-link[aria-current="page"], :where([data-ui="retro-glass"]) .ui-nav-link.is-active, :where([data-ui="retro-glass"]) .ui-nav-link[aria-current="page"] {
|
|
6547
|
+
background: var(--rg-gloss);
|
|
6548
|
+
color: var(--rg-gloss-ink);
|
|
6549
|
+
box-shadow: inset 0 1px 0 var(--rg-highlight);
|
|
6550
|
+
}
|
|
6551
|
+
|
|
6552
|
+
.rg-table-wrap, :where([data-ui="retro-glass"]) .ui-table-wrap {
|
|
6553
|
+
box-shadow: none;
|
|
6554
|
+
background: none;
|
|
6555
|
+
border: 0;
|
|
6556
|
+
}
|
|
6557
|
+
|
|
6558
|
+
.rg-table, :where([data-ui="retro-glass"]) .ui-table {
|
|
6559
|
+
border-collapse: collapse;
|
|
6560
|
+
color: var(--rg-text-soft);
|
|
6561
|
+
font: 14px/1.4 var(--rg-font-body);
|
|
6562
|
+
}
|
|
6563
|
+
|
|
6564
|
+
.rg-table th, :where([data-ui="retro-glass"]) .ui-table th {
|
|
6565
|
+
background: linear-gradient(180deg,rgb(var(--rg-surface-strong-rgb)/.15),transparent);
|
|
6566
|
+
color: var(--rg-text-soft);
|
|
6567
|
+
font: 700 12px/1.4 var(--rg-font-mono);
|
|
6568
|
+
text-shadow: none;
|
|
6569
|
+
padding: 8px;
|
|
6570
|
+
}
|
|
6571
|
+
|
|
6572
|
+
.rg-table td, :where([data-ui="retro-glass"]) .ui-table td {
|
|
6573
|
+
border-block-start: 1px solid var(--rg-line-color);
|
|
6574
|
+
padding: 8px;
|
|
6575
|
+
}
|
|
6576
|
+
|
|
6577
|
+
.rg-avatar {
|
|
6578
|
+
border: 2px solid var(--rg-surface-raised);
|
|
6579
|
+
background: var(--rg-gloss);
|
|
6580
|
+
block-size: 34px;
|
|
6581
|
+
inline-size: 34px;
|
|
6582
|
+
color: var(--rg-gloss-ink);
|
|
6583
|
+
font: 700 12px/1 var(--rg-font-body);
|
|
6584
|
+
border-radius: 50%;
|
|
6585
|
+
flex: 0 0 34px;
|
|
6586
|
+
justify-content: center;
|
|
6587
|
+
align-items: center;
|
|
6588
|
+
display: inline-flex;
|
|
6589
|
+
box-shadow: 0 1px 3px #0000004d;
|
|
6590
|
+
}
|
|
6591
|
+
|
|
6592
|
+
.rg-avatar-danger {
|
|
6593
|
+
background: var(--rg-danger-gloss);
|
|
6594
|
+
color: rgb(var(--usk-danger-text-rgb, 255 255 255));
|
|
6595
|
+
}
|
|
6596
|
+
|
|
6597
|
+
.rg-avatar-neutral {
|
|
6598
|
+
background: var(--rg-surface-soft);
|
|
6599
|
+
color: var(--rg-text);
|
|
6600
|
+
}
|
|
6601
|
+
|
|
6602
|
+
.rg-avatar-group {
|
|
6603
|
+
padding-inline-start: 7px;
|
|
6604
|
+
display: flex;
|
|
6605
|
+
}
|
|
6606
|
+
|
|
6607
|
+
.rg-avatar-group .rg-avatar {
|
|
6608
|
+
margin-inline-start: -7px;
|
|
6609
|
+
}
|
|
6610
|
+
|
|
6611
|
+
.rg-list {
|
|
6612
|
+
color: var(--rg-text-soft);
|
|
6613
|
+
font: 14px/1.5 var(--rg-font-body);
|
|
6614
|
+
margin: 0;
|
|
6615
|
+
padding-inline-start: 20px;
|
|
6616
|
+
}
|
|
6617
|
+
|
|
6618
|
+
.rg-list li {
|
|
6619
|
+
padding: 4px 0;
|
|
6620
|
+
}
|
|
6621
|
+
|
|
6622
|
+
.rg-list li::marker {
|
|
6623
|
+
color: var(--rg-link);
|
|
6624
|
+
}
|
|
6625
|
+
|
|
6626
|
+
.rg-tooltip, [data-ui="retro-glass"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
|
|
6627
|
+
background: var(--rg-text);
|
|
6628
|
+
max-inline-size: 100%;
|
|
6629
|
+
color: var(--rg-bg);
|
|
6630
|
+
border: 1px solid var(--rg-focus);
|
|
6631
|
+
border-radius: var(--rg-radius-sm);
|
|
6632
|
+
box-shadow: none;
|
|
6633
|
+
font: 700 12px/1.4 var(--rg-font-mono);
|
|
6634
|
+
letter-spacing: 0;
|
|
6635
|
+
padding: 12px;
|
|
6636
|
+
}
|
|
6637
|
+
|
|
6638
|
+
.rg-modal {
|
|
6639
|
+
max-inline-size: min(440px, 100vw - 32px);
|
|
6640
|
+
}
|
|
6641
|
+
|
|
6642
|
+
.rg-modal::backdrop {
|
|
6643
|
+
background: rgb(var(--rg-bg-rgb)/.7);
|
|
6644
|
+
}
|
|
6645
|
+
|
|
6646
|
+
.rg-modal h3, .rg-popover strong {
|
|
6647
|
+
color: var(--rg-text);
|
|
6648
|
+
font: 700 14px/1.4 var(--rg-font-mono);
|
|
6649
|
+
margin: 0 0 8px;
|
|
6650
|
+
}
|
|
6651
|
+
|
|
6652
|
+
.rg-modal p, .rg-popover p {
|
|
6653
|
+
color: var(--rg-text-soft);
|
|
6654
|
+
margin: 0 0 12px;
|
|
6655
|
+
}
|
|
6656
|
+
|
|
6657
|
+
.rg-modal-actions {
|
|
6658
|
+
flex-wrap: wrap;
|
|
6659
|
+
justify-content: end;
|
|
6660
|
+
gap: 8px;
|
|
6661
|
+
display: flex;
|
|
6662
|
+
}
|
|
6663
|
+
|
|
6664
|
+
.rg-accordion {
|
|
6665
|
+
background: var(--rg-glass-inset);
|
|
6666
|
+
border: 1px solid var(--rg-line-strong);
|
|
6667
|
+
border-radius: var(--rg-radius-sm);
|
|
6668
|
+
color: var(--rg-text);
|
|
6669
|
+
margin: 0;
|
|
6670
|
+
padding: 0;
|
|
6671
|
+
}
|
|
6672
|
+
|
|
6673
|
+
.rg-accordion summary {
|
|
6674
|
+
min-block-size: 36px;
|
|
6675
|
+
font: 700 12px/1.4 var(--rg-font-mono);
|
|
6676
|
+
cursor: pointer;
|
|
6677
|
+
padding: 10px 12px;
|
|
6678
|
+
}
|
|
6679
|
+
|
|
6680
|
+
.rg-accordion p {
|
|
6681
|
+
color: var(--rg-text-soft);
|
|
6682
|
+
font: 14px/1.4 var(--rg-font-body);
|
|
6683
|
+
margin: 0;
|
|
6684
|
+
padding: 4px 12px 12px;
|
|
6685
|
+
}
|
|
6686
|
+
|
|
6687
|
+
.rg-code {
|
|
6688
|
+
border-inline-start: 3px solid var(--rg-primary);
|
|
6689
|
+
border-radius: var(--rg-radius-sm);
|
|
6690
|
+
background: var(--rg-glass-inset);
|
|
6691
|
+
color: var(--rg-text-soft);
|
|
6692
|
+
white-space: pre-wrap;
|
|
6693
|
+
overflow-wrap: break-word;
|
|
6694
|
+
font: 12px/1.5 var(--rg-font-mono);
|
|
6695
|
+
margin: 0;
|
|
6696
|
+
padding: 12px;
|
|
6697
|
+
display: block;
|
|
6698
|
+
}
|
|
6699
|
+
|
|
6700
|
+
.rg-quote {
|
|
6701
|
+
border-inline-start: 3px solid var(--rg-primary);
|
|
6702
|
+
color: var(--rg-text-soft);
|
|
6703
|
+
font: italic 14px/1.5 var(--rg-font-body);
|
|
6704
|
+
margin: 0;
|
|
6705
|
+
padding: 8px 12px;
|
|
6706
|
+
}
|
|
6707
|
+
|
|
6708
|
+
.rg-token-swatch {
|
|
6709
|
+
min-inline-size: 46px;
|
|
6710
|
+
color: var(--rg-text-soft);
|
|
6711
|
+
font: 12px/1.3 var(--rg-font-mono);
|
|
6712
|
+
flex-direction: column;
|
|
6713
|
+
gap: 6px;
|
|
6714
|
+
display: inline-flex;
|
|
6715
|
+
}
|
|
6716
|
+
|
|
6717
|
+
.rg-token-swatch i {
|
|
6718
|
+
border: 1px solid var(--rg-line-strong);
|
|
6719
|
+
border-radius: var(--rg-radius-sm);
|
|
6720
|
+
background: var(--rg-token-swatch-color, var(--rg-primary));
|
|
6721
|
+
block-size: 28px;
|
|
6722
|
+
inline-size: 46px;
|
|
6723
|
+
display: block;
|
|
6724
|
+
box-shadow: inset 0 1px #ffffff80, 0 1px 3px #00000038;
|
|
6725
|
+
}
|
|
6726
|
+
|
|
6727
|
+
.rg-spinner:before, .rg-spinner:after, .rg-loading-spinner:before, .rg-loading-spinner:after {
|
|
6728
|
+
content: none;
|
|
6729
|
+
}
|
|
6730
|
+
|
|
6731
|
+
.rg-icon-medallion {
|
|
6732
|
+
background: var(--rg-gloss);
|
|
6733
|
+
color: var(--rg-gloss-ink);
|
|
6734
|
+
border-color: var(--rg-line-strong);
|
|
6735
|
+
box-shadow: inset 0 1px 0 var(--rg-highlight),0 2px 4px var(--rg-recess);
|
|
6736
|
+
}
|
|
6737
|
+
|
|
6738
|
+
.rg-card-service > .rg-icon-medallion {
|
|
6739
|
+
font-size: 32px;
|
|
6740
|
+
font-weight: 800;
|
|
6741
|
+
}
|
|
6742
|
+
|
|
6743
|
+
.rg-badge-seal {
|
|
6744
|
+
background: var(--rg-control-material);
|
|
6745
|
+
color: var(--rg-text);
|
|
6746
|
+
border-color: var(--rg-line-strong);
|
|
6747
|
+
box-shadow: inset 0 1px 0 var(--rg-highlight),0 2px 4px var(--rg-recess);
|
|
6748
|
+
font-size: .78rem;
|
|
6749
|
+
}
|
|
6750
|
+
|
|
6751
|
+
.rg-badge-seal > :where(strong, small) {
|
|
6752
|
+
color: inherit;
|
|
6753
|
+
opacity: 1;
|
|
6754
|
+
}
|
|
6755
|
+
|
|
6756
|
+
[data-ui="retro-glass"][data-mode] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select) {
|
|
6757
|
+
border-radius: var(--rg-radius-sm);
|
|
6758
|
+
}
|
|
6759
|
+
|
|
6760
|
+
[data-ui="retro-glass"][data-mode] :where(input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"]) {
|
|
6761
|
+
border-color: var(--rg-danger);
|
|
6762
|
+
box-shadow: inset 0 2px 5px var(--rg-material-shadow),0 0 0 1px var(--rg-danger);
|
|
6763
|
+
}
|
|
6764
|
+
|
|
6765
|
+
[data-ui="retro-glass"][data-mode] :where(input[readonly]:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea[readonly]) {
|
|
6766
|
+
filter: saturate(.72);
|
|
6767
|
+
opacity: .78;
|
|
6768
|
+
border-style: dashed;
|
|
6769
|
+
}
|
|
6770
|
+
|
|
6771
|
+
.rg-choice input[type="checkbox"] {
|
|
6772
|
+
appearance: auto;
|
|
6773
|
+
}
|
|
6774
|
+
|
|
6775
|
+
.rg-choice input[type="checkbox"]:before, .rg-choice input[type="checkbox"]:after {
|
|
6776
|
+
content: none;
|
|
6777
|
+
}
|
|
6778
|
+
|
|
6779
|
+
[data-ui="retro-glass"] :focus-visible {
|
|
6780
|
+
outline: 2px solid var(--rg-focus);
|
|
6781
|
+
outline-offset: 2px;
|
|
6782
|
+
}
|
|
6783
|
+
|
|
6784
|
+
@keyframes rg-template-pulse {
|
|
6785
|
+
50% {
|
|
6786
|
+
background-position: -100% 0;
|
|
6787
|
+
}
|
|
6788
|
+
}
|
|
6789
|
+
|
|
6790
|
+
@media (any-pointer: coarse) {
|
|
6791
|
+
.rg-button, .rg-icon-button, .rg-segment, .rg-pagination-page, .rg-option, .rg-tab, .rg-choice, .rg-switch, .rg-range, .rg-chip, :where([data-ui="retro-glass"]) .ui-button, :where([data-ui="retro-glass"]) .ui-icon-button, :where([data-ui="retro-glass"]) .ui-switch {
|
|
6792
|
+
min-block-size: 44px;
|
|
6793
|
+
}
|
|
6794
|
+
|
|
6795
|
+
.rg-icon-button, .rg-pagination-page, :where([data-ui="retro-glass"]) .ui-icon-button {
|
|
6796
|
+
min-inline-size: 44px;
|
|
6797
|
+
}
|
|
6798
|
+
|
|
6799
|
+
.rg-accordion summary {
|
|
6800
|
+
min-block-size: 44px;
|
|
6801
|
+
}
|
|
6802
|
+
}
|
|
6803
|
+
|
|
6804
|
+
@media (prefers-reduced-motion: reduce) {
|
|
6805
|
+
.rg-skeleton, .rg-spinner, .rg-loading-spinner, [data-ui="retro-glass"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]), .rg-button[aria-busy="true"]:after, .rg-icon-button[aria-busy="true"]:after, [data-ui="retro-glass"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after, :where([data-ui="retro-glass"]) .ui-button[aria-busy="true"]:after, :where([data-ui="retro-glass"]) .ui-icon-button[aria-busy="true"]:after {
|
|
6806
|
+
animation: none;
|
|
6807
|
+
}
|
|
6808
|
+
}
|
|
6809
|
+
|
|
6810
|
+
@media (forced-colors: active) {
|
|
6811
|
+
.rg-switch input, :where([data-ui="retro-glass"]) .ui-switch input {
|
|
6812
|
+
opacity: 1;
|
|
6813
|
+
block-size: 20px;
|
|
6814
|
+
inline-size: 20px;
|
|
6815
|
+
position: static;
|
|
6816
|
+
}
|
|
6817
|
+
|
|
6818
|
+
.rg-switch-track, :where([data-ui="retro-glass"]) .ui-switch-track {
|
|
6819
|
+
display: none;
|
|
6820
|
+
}
|
|
6821
|
+
|
|
6822
|
+
.rg-range {
|
|
6823
|
+
appearance: auto;
|
|
6824
|
+
}
|
|
6825
|
+
|
|
6826
|
+
.rg-step b, .rg-progress, :where([data-ui="retro-glass"]) .ui-progress {
|
|
6827
|
+
border-color: canvastext;
|
|
6828
|
+
}
|
|
6829
|
+
|
|
6830
|
+
.rg-step.is-complete b, .rg-progress-bar, :where([data-ui="retro-glass"]) .ui-progress-bar {
|
|
6831
|
+
color: highlighttext;
|
|
6832
|
+
background: highlight;
|
|
6833
|
+
}
|
|
6834
|
+
}
|
|
6835
|
+
|
|
6836
|
+
[data-ui="retro-glass"][data-mode] .rg-button.rg-button-warning, :where([data-ui="retro-glass"])[data-mode] .ui-button.ui-button:where([data-ui-variant="warning"]) {
|
|
6837
|
+
background: var(--rg-warning);
|
|
6838
|
+
color: var(--rg-on-warning);
|
|
6839
|
+
border-color: var(--rg-warning);
|
|
6840
|
+
text-shadow: none;
|
|
6841
|
+
}
|
|
6842
|
+
}
|
|
6843
|
+
|
|
6844
|
+
[data-ui="retro-glass"][data-mode] .rg-title {
|
|
6845
|
+
letter-spacing: max(.06em, .5px);
|
|
6846
|
+
margin-block: max(.75rem, 12px);
|
|
6847
|
+
}
|
|
6848
|
+
|
|
6849
|
+
[data-ui="retro-glass"][data-mode] .rg-feature-item > .rg-icon-medallion {
|
|
6850
|
+
font-size: 1.5rem;
|
|
6851
|
+
line-height: 1;
|
|
6852
|
+
}
|
|
6853
|
+
|
|
6854
|
+
[data-ui="retro-glass"][data-mode] .rg-callout-bar > .rg-icon-medallion {
|
|
6855
|
+
min-block-size: 4.5rem;
|
|
6856
|
+
min-inline-size: 4.5rem;
|
|
6857
|
+
font-size: 2rem;
|
|
6858
|
+
font-weight: 800;
|
|
6859
|
+
line-height: 1;
|
|
4534
6860
|
}
|