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="cyberpunk"])[data-
|
|
2988
|
+
), [data-ui]:where([data-ui="cyberpunk"])[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="cyberpunk"])[data-
|
|
3038
|
+
), [data-ui]:where([data-ui="cyberpunk"])[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="cyberpunk"])[data-
|
|
3080
|
+
), [data-ui]:where([data-ui="cyberpunk"])[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="cyberpunk"]) .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="cyberpunk"])[data-
|
|
3719
|
+
), [data-ui]:where([data-ui="cyberpunk"])[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="cyberpunk"])[data-
|
|
3797
|
+
), [data-ui]:where([data-ui="cyberpunk"])[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="cyberpunk"])[data-
|
|
3833
|
+
), [data-ui]:where([data-ui="cyberpunk"])[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="cyberpunk"]) :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="cyberpunk"]) :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="cyberpunk"]) :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;
|
|
@@ -3506,12 +4163,14 @@
|
|
|
3506
4163
|
/* styles/cyberpunk.css (visual paint) */
|
|
3507
4164
|
@layer ui-style-kit.presets {
|
|
3508
4165
|
:root {
|
|
3509
|
-
--cyber-radius-xs: .
|
|
3510
|
-
--cyber-radius-sm: .
|
|
4166
|
+
--cyber-radius-xs: .125rem;
|
|
4167
|
+
--cyber-radius-sm: .4375rem;
|
|
3511
4168
|
--cyber-radius-md: .75rem;
|
|
3512
|
-
--cyber-radius-lg:
|
|
3513
|
-
--cyber-radius-xl:
|
|
4169
|
+
--cyber-radius-lg: .75rem;
|
|
4170
|
+
--cyber-radius-xl: .75rem;
|
|
3514
4171
|
--cyber-radius-pill: 999px;
|
|
4172
|
+
--cyber-cut-sm: .4375rem;
|
|
4173
|
+
--cyber-cut-md: .75rem;
|
|
3515
4174
|
--cyber-space-1: .25rem;
|
|
3516
4175
|
--cyber-space-2: .5rem;
|
|
3517
4176
|
--cyber-space-3: .75rem;
|
|
@@ -3519,47 +4178,116 @@
|
|
|
3519
4178
|
--cyber-space-5: 1.25rem;
|
|
3520
4179
|
--cyber-space-6: 1.5rem;
|
|
3521
4180
|
--cyber-space-8: 2rem;
|
|
3522
|
-
--cyber-transition-fast: .
|
|
3523
|
-
--cyber-transition-base: .
|
|
3524
|
-
--cyber-transition-slow: .
|
|
3525
|
-
--cyber-font-sans:
|
|
3526
|
-
--cyber-font-display:
|
|
4181
|
+
--cyber-transition-fast: .15s cubic-bezier(.2, .8, .2, 1);
|
|
4182
|
+
--cyber-transition-base: .15s cubic-bezier(.2, .8, .2, 1);
|
|
4183
|
+
--cyber-transition-slow: .24s cubic-bezier(.2, .8, .2, 1);
|
|
4184
|
+
--cyber-font-sans: "DejaVu Sans", Arial, sans-serif;
|
|
4185
|
+
--cyber-font-display: "Arial Narrow", "DejaVu Sans", Arial, sans-serif;
|
|
3527
4186
|
--cyber-font-body: var(--cyber-font-sans);
|
|
3528
4187
|
--cyber-font-heading: var(--cyber-font-display);
|
|
3529
|
-
--cyber-font-
|
|
3530
|
-
--cyber-font-
|
|
4188
|
+
--cyber-font-mono: "DejaVu Sans Mono", Consolas, monospace;
|
|
4189
|
+
--cyber-font-control: var(--cyber-font-mono);
|
|
3531
4190
|
}
|
|
3532
4191
|
|
|
3533
4192
|
[data-ui="cyberpunk"][data-mode="light"] {
|
|
3534
4193
|
--lightningcss-light: initial;
|
|
3535
4194
|
--lightningcss-dark: ;
|
|
3536
4195
|
color-scheme: light;
|
|
3537
|
-
--cyber-
|
|
3538
|
-
--cyber-
|
|
3539
|
-
--cyber-
|
|
3540
|
-
--cyber-
|
|
3541
|
-
--cyber-
|
|
3542
|
-
--cyber-
|
|
3543
|
-
--cyber-
|
|
4196
|
+
--cyber-fallback-bg-rgb: 230 241 243;
|
|
4197
|
+
--cyber-fallback-surface-rgb: 248 252 252;
|
|
4198
|
+
--cyber-fallback-surface-strong-rgb: 255 255 255;
|
|
4199
|
+
--cyber-fallback-surface-soft-rgb: 220 235 238;
|
|
4200
|
+
--cyber-fallback-text-rgb: 16 40 50;
|
|
4201
|
+
--cyber-fallback-text-muted-rgb: 54 87 98;
|
|
4202
|
+
--cyber-fallback-border-rgb: 138 177 186;
|
|
4203
|
+
--cyber-fallback-primary-rgb: 0 127 157;
|
|
4204
|
+
--cyber-fallback-primary-hover-rgb: 0 111 139;
|
|
4205
|
+
--cyber-fallback-primary-text-rgb: 255 255 255;
|
|
4206
|
+
--cyber-fallback-secondary-rgb: 54 87 98;
|
|
4207
|
+
--cyber-fallback-secondary-hover-rgb: 39 70 84;
|
|
4208
|
+
--cyber-fallback-secondary-text-rgb: 255 255 255;
|
|
4209
|
+
--cyber-fallback-accent-rgb: 195 19 90;
|
|
4210
|
+
--cyber-fallback-accent-text-rgb: 255 255 255;
|
|
4211
|
+
--cyber-fallback-success-rgb: 8 124 73;
|
|
4212
|
+
--cyber-fallback-success-text-rgb: 255 255 255;
|
|
4213
|
+
--cyber-fallback-warning-rgb: 170 112 0;
|
|
4214
|
+
--cyber-fallback-warning-text-rgb: 0 0 0;
|
|
4215
|
+
--cyber-fallback-danger-rgb: 195 19 90;
|
|
4216
|
+
--cyber-fallback-danger-text-rgb: 255 255 255;
|
|
4217
|
+
--cyber-fallback-link-rgb: 0 111 139;
|
|
4218
|
+
--cyber-fallback-focus-rgb: 0 111 139;
|
|
4219
|
+
--cyber-panel-alpha: .98;
|
|
4220
|
+
--cyber-panel-strong-alpha: 1;
|
|
4221
|
+
--cyber-panel-soft-alpha: .94;
|
|
4222
|
+
--cyber-border-alpha: .82;
|
|
4223
|
+
--cyber-glow-alpha: .16;
|
|
4224
|
+
--cyber-shadow-alpha: .14;
|
|
4225
|
+
--cyber-grid-alpha: .13;
|
|
3544
4226
|
}
|
|
3545
4227
|
|
|
3546
4228
|
[data-ui="cyberpunk"][data-mode="dark"] {
|
|
3547
4229
|
--lightningcss-light: ;
|
|
3548
4230
|
--lightningcss-dark: initial;
|
|
3549
4231
|
color-scheme: dark;
|
|
3550
|
-
--cyber-
|
|
3551
|
-
--cyber-
|
|
3552
|
-
--cyber-
|
|
3553
|
-
--cyber-
|
|
3554
|
-
--cyber-
|
|
3555
|
-
--cyber-
|
|
3556
|
-
--cyber-
|
|
4232
|
+
--cyber-fallback-bg-rgb: 5 10 16;
|
|
4233
|
+
--cyber-fallback-surface-rgb: 7 19 28;
|
|
4234
|
+
--cyber-fallback-surface-strong-rgb: 10 28 39;
|
|
4235
|
+
--cyber-fallback-surface-soft-rgb: 13 36 48;
|
|
4236
|
+
--cyber-fallback-text-rgb: 232 250 255;
|
|
4237
|
+
--cyber-fallback-text-muted-rgb: 168 193 202;
|
|
4238
|
+
--cyber-fallback-border-rgb: 36 70 84;
|
|
4239
|
+
--cyber-fallback-primary-rgb: 0 221 255;
|
|
4240
|
+
--cyber-fallback-primary-hover-rgb: 88 234 255;
|
|
4241
|
+
--cyber-fallback-primary-text-rgb: 0 27 35;
|
|
4242
|
+
--cyber-fallback-secondary-rgb: 70 116 130;
|
|
4243
|
+
--cyber-fallback-secondary-hover-rgb: 36 70 84;
|
|
4244
|
+
--cyber-fallback-secondary-text-rgb: 232 250 255;
|
|
4245
|
+
--cyber-fallback-accent-rgb: 255 31 120;
|
|
4246
|
+
--cyber-fallback-accent-text-rgb: 0 27 35;
|
|
4247
|
+
--cyber-fallback-success-rgb: 53 228 125;
|
|
4248
|
+
--cyber-fallback-success-text-rgb: 0 27 35;
|
|
4249
|
+
--cyber-fallback-warning-rgb: 255 189 22;
|
|
4250
|
+
--cyber-fallback-warning-text-rgb: 0 27 35;
|
|
4251
|
+
--cyber-fallback-danger-rgb: 255 31 120;
|
|
4252
|
+
--cyber-fallback-danger-text-rgb: 0 27 35;
|
|
4253
|
+
--cyber-fallback-link-rgb: 0 221 255;
|
|
4254
|
+
--cyber-fallback-focus-rgb: 88 234 255;
|
|
4255
|
+
--cyber-panel-alpha: .94;
|
|
4256
|
+
--cyber-panel-strong-alpha: .98;
|
|
4257
|
+
--cyber-panel-soft-alpha: .86;
|
|
4258
|
+
--cyber-border-alpha: .72;
|
|
4259
|
+
--cyber-glow-alpha: .24;
|
|
4260
|
+
--cyber-shadow-alpha: .38;
|
|
4261
|
+
--cyber-grid-alpha: .14;
|
|
3557
4262
|
}
|
|
3558
4263
|
|
|
3559
4264
|
[data-ui="cyberpunk"][data-mode="contrast"] {
|
|
3560
4265
|
--lightningcss-light: ;
|
|
3561
4266
|
--lightningcss-dark: initial;
|
|
3562
4267
|
color-scheme: dark;
|
|
4268
|
+
--cyber-fallback-bg-rgb: 0 0 0;
|
|
4269
|
+
--cyber-fallback-surface-rgb: 5 10 16;
|
|
4270
|
+
--cyber-fallback-surface-strong-rgb: 0 0 0;
|
|
4271
|
+
--cyber-fallback-surface-soft-rgb: 0 0 0;
|
|
4272
|
+
--cyber-fallback-text-rgb: 255 255 255;
|
|
4273
|
+
--cyber-fallback-text-muted-rgb: 248 248 248;
|
|
4274
|
+
--cyber-fallback-border-rgb: 255 255 255;
|
|
4275
|
+
--cyber-fallback-primary-rgb: 0 229 255;
|
|
4276
|
+
--cyber-fallback-primary-hover-rgb: 255 255 255;
|
|
4277
|
+
--cyber-fallback-primary-text-rgb: 0 0 0;
|
|
4278
|
+
--cyber-fallback-secondary-rgb: 255 255 255;
|
|
4279
|
+
--cyber-fallback-secondary-hover-rgb: 0 229 255;
|
|
4280
|
+
--cyber-fallback-secondary-text-rgb: 0 0 0;
|
|
4281
|
+
--cyber-fallback-accent-rgb: 255 31 120;
|
|
4282
|
+
--cyber-fallback-accent-text-rgb: 0 0 0;
|
|
4283
|
+
--cyber-fallback-success-rgb: 0 255 144;
|
|
4284
|
+
--cyber-fallback-success-text-rgb: 0 0 0;
|
|
4285
|
+
--cyber-fallback-warning-rgb: 255 212 0;
|
|
4286
|
+
--cyber-fallback-warning-text-rgb: 0 0 0;
|
|
4287
|
+
--cyber-fallback-danger-rgb: 255 77 135;
|
|
4288
|
+
--cyber-fallback-danger-text-rgb: 0 0 0;
|
|
4289
|
+
--cyber-fallback-link-rgb: 0 229 255;
|
|
4290
|
+
--cyber-fallback-focus-rgb: 255 255 255;
|
|
3563
4291
|
--cyber-panel-alpha: 1;
|
|
3564
4292
|
--cyber-panel-strong-alpha: 1;
|
|
3565
4293
|
--cyber-panel-soft-alpha: .92;
|
|
@@ -3584,15 +4312,42 @@
|
|
|
3584
4312
|
--cyber-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
|
|
3585
4313
|
--cyber-secondary-text-rgb: var(--usk-secondary-text-rgb);
|
|
3586
4314
|
--cyber-accent-rgb: var(--usk-accent-rgb);
|
|
3587
|
-
--cyber-success-rgb: var(--usk-success-rgb);
|
|
3588
|
-
--cyber-warning-rgb: var(--usk-warning-rgb);
|
|
3589
|
-
--cyber-danger-rgb: var(--usk-danger-rgb);
|
|
3590
|
-
--cyber-link-rgb: var(--usk-link-rgb);
|
|
3591
4315
|
--cyber-accent-text-rgb: var(--usk-accent-text-rgb);
|
|
4316
|
+
--cyber-success-rgb: var(--usk-success-rgb);
|
|
3592
4317
|
--cyber-success-text-rgb: var(--usk-success-text-rgb);
|
|
4318
|
+
--cyber-warning-rgb: var(--usk-warning-rgb);
|
|
3593
4319
|
--cyber-warning-text-rgb: var(--usk-warning-text-rgb);
|
|
4320
|
+
--cyber-danger-rgb: var(--usk-danger-rgb);
|
|
3594
4321
|
--cyber-danger-text-rgb: var(--usk-danger-text-rgb);
|
|
4322
|
+
--cyber-link-rgb: var(--usk-link-rgb);
|
|
3595
4323
|
--cyber-focus-rgb: var(--usk-focus-rgb);
|
|
4324
|
+
}
|
|
4325
|
+
|
|
4326
|
+
[data-ui="cyberpunk"][data-mode] {
|
|
4327
|
+
--usk-native-bg: var(--cyber-bg);
|
|
4328
|
+
--cyber-bg-rgb: var(--usk-bg-rgb, var(--cyber-fallback-bg-rgb));
|
|
4329
|
+
--cyber-surface-rgb: var(--usk-surface-rgb, var(--cyber-fallback-surface-rgb));
|
|
4330
|
+
--cyber-surface-strong-rgb: var(--usk-surface-strong-rgb, var(--cyber-fallback-surface-strong-rgb));
|
|
4331
|
+
--cyber-surface-soft-rgb: var(--usk-surface-soft-rgb, var(--cyber-fallback-surface-soft-rgb));
|
|
4332
|
+
--cyber-text-rgb: var(--usk-text-rgb, var(--cyber-fallback-text-rgb));
|
|
4333
|
+
--cyber-text-muted-rgb: var(--usk-text-muted-rgb, var(--cyber-fallback-text-muted-rgb));
|
|
4334
|
+
--cyber-border-rgb: var(--usk-border-rgb, var(--cyber-fallback-border-rgb));
|
|
4335
|
+
--cyber-primary-rgb: var(--usk-primary-rgb, var(--cyber-fallback-primary-rgb));
|
|
4336
|
+
--cyber-primary-hover-rgb: var(--usk-primary-hover-rgb, var(--cyber-fallback-primary-hover-rgb));
|
|
4337
|
+
--cyber-primary-text-rgb: var(--usk-primary-text-rgb, var(--cyber-fallback-primary-text-rgb));
|
|
4338
|
+
--cyber-secondary-rgb: var(--usk-secondary-rgb, var(--cyber-fallback-secondary-rgb));
|
|
4339
|
+
--cyber-secondary-hover-rgb: var(--usk-secondary-hover-rgb, var(--cyber-fallback-secondary-hover-rgb));
|
|
4340
|
+
--cyber-secondary-text-rgb: var(--usk-secondary-text-rgb, var(--cyber-fallback-secondary-text-rgb));
|
|
4341
|
+
--cyber-accent-rgb: var(--usk-accent-rgb, var(--cyber-fallback-accent-rgb));
|
|
4342
|
+
--cyber-accent-text-rgb: var(--usk-accent-text-rgb, var(--cyber-fallback-accent-text-rgb));
|
|
4343
|
+
--cyber-success-rgb: var(--usk-success-rgb, var(--cyber-fallback-success-rgb));
|
|
4344
|
+
--cyber-success-text-rgb: var(--usk-success-text-rgb, var(--cyber-fallback-success-text-rgb));
|
|
4345
|
+
--cyber-warning-rgb: var(--usk-warning-rgb, var(--cyber-fallback-warning-rgb));
|
|
4346
|
+
--cyber-warning-text-rgb: var(--usk-warning-text-rgb, var(--cyber-fallback-warning-text-rgb));
|
|
4347
|
+
--cyber-danger-rgb: var(--usk-danger-rgb, var(--cyber-fallback-danger-rgb));
|
|
4348
|
+
--cyber-danger-text-rgb: var(--usk-danger-text-rgb, var(--cyber-fallback-danger-text-rgb));
|
|
4349
|
+
--cyber-link-rgb: var(--usk-link-rgb, var(--cyber-fallback-link-rgb));
|
|
4350
|
+
--cyber-focus-rgb: var(--usk-focus-rgb, var(--cyber-fallback-focus-rgb));
|
|
3596
4351
|
--usk-native-surface: var(--cyber-surface);
|
|
3597
4352
|
--usk-native-surface-strong: var(--cyber-surface-strong);
|
|
3598
4353
|
--usk-native-surface-soft: var(--cyber-surface-soft);
|
|
@@ -3616,12 +4371,63 @@
|
|
|
3616
4371
|
--usk-native-radius-sm: var(--cyber-radius-sm);
|
|
3617
4372
|
--usk-native-radius: var(--cyber-radius-md);
|
|
3618
4373
|
--usk-native-radius-lg: var(--cyber-radius-lg);
|
|
3619
|
-
--usk-native-shadow: 0 0
|
|
4374
|
+
--usk-native-shadow: 0 0 .7rem rgb(var(--cyber-primary-rgb) / .16);
|
|
3620
4375
|
--usk-native-shadow-md: var(--cyber-shadow-md, var(--usk-native-shadow));
|
|
3621
|
-
--usk-native-focus-ring: 0 0 0 2px
|
|
4376
|
+
--usk-native-focus-ring: 0 0 0 2px var(--cyber-surface), 0 0 0 4px var(--cyber-focus), 0 0 .8rem rgb(var(--cyber-focus-rgb) / .2);
|
|
3622
4377
|
--usk-native-border-width: 1px;
|
|
3623
4378
|
--usk-native-field-gap: .5rem;
|
|
3624
4379
|
--usk-native-panel-padding: var(--cyber-space-5);
|
|
4380
|
+
--usk-native-control-min-block-size: 2.75rem;
|
|
4381
|
+
--usk-native-control-padding-block: .55rem;
|
|
4382
|
+
--usk-native-control-padding-inline: .875rem;
|
|
4383
|
+
--usk-native-subcontrol-padding-block: .48rem;
|
|
4384
|
+
--usk-native-subcontrol-padding-inline: .68rem;
|
|
4385
|
+
--usk-native-choice-size: 1.25rem;
|
|
4386
|
+
--usk-native-choice-background: var(--cyber-control-bg);
|
|
4387
|
+
--usk-native-choice-border: 1px solid var(--cyber-border);
|
|
4388
|
+
--usk-native-checkbox-radius: .1rem;
|
|
4389
|
+
--usk-native-radio-radius: 50%;
|
|
4390
|
+
--usk-native-choice-shadow: 0 0 .55rem rgb(var(--cyber-primary-rgb) / .18);
|
|
4391
|
+
--usk-native-choice-checked-background: var(--cyber-primary);
|
|
4392
|
+
--usk-native-choice-mark-color: var(--cyber-on-primary);
|
|
4393
|
+
--usk-native-select-indicator-image: linear-gradient(51deg, transparent 50%, var(--cyber-primary) 50%), linear-gradient(129deg, var(--cyber-primary) 50%, transparent 50%);
|
|
4394
|
+
--usk-native-select-indicator-size: .46rem .46rem, .46rem .46rem;
|
|
4395
|
+
--usk-native-select-indicator-position: calc(100% - 1rem) 50%, calc(100% - .72rem) 50%;
|
|
4396
|
+
--usk-native-select-padding-inline-end: 2.25rem;
|
|
4397
|
+
--usk-native-range-track-size: .5rem;
|
|
4398
|
+
--usk-native-range-track-background: linear-gradient(90deg, var(--cyber-success), var(--cyber-warning) 62%, var(--cyber-danger));
|
|
4399
|
+
--usk-native-range-track-border: 1px solid var(--cyber-border);
|
|
4400
|
+
--usk-native-range-track-radius: .08rem;
|
|
4401
|
+
--usk-native-range-track-shadow: 0 0 .55rem rgb(var(--cyber-primary-rgb) / .16);
|
|
4402
|
+
--usk-native-range-progress-background: var(--cyber-primary);
|
|
4403
|
+
--usk-native-range-thumb-size: 1.25rem;
|
|
4404
|
+
--usk-native-range-thumb-background: var(--cyber-surface-strong);
|
|
4405
|
+
--usk-native-range-thumb-border: 1px solid var(--cyber-border);
|
|
4406
|
+
--usk-native-range-thumb-radius: .1rem;
|
|
4407
|
+
--usk-native-range-thumb-shadow: 0 0 .55rem rgb(var(--cyber-primary-rgb) / .22);
|
|
4408
|
+
--usk-native-progress-size: .72rem;
|
|
4409
|
+
--usk-native-progress-track-background: var(--cyber-surface-soft);
|
|
4410
|
+
--usk-native-progress-track-border: 1px solid var(--cyber-border);
|
|
4411
|
+
--usk-native-progress-track-radius: .08rem;
|
|
4412
|
+
--usk-native-progress-track-shadow: 0 0 .45rem rgb(var(--cyber-primary-rgb) / .14);
|
|
4413
|
+
--usk-native-progress-value-background: var(--cyber-primary);
|
|
4414
|
+
--usk-native-progress-value-radius: .08rem;
|
|
4415
|
+
--usk-native-progress-value-shadow: 0 0 .55rem rgb(var(--cyber-primary-rgb) / .2);
|
|
4416
|
+
--usk-native-meter-optimum-background: var(--cyber-success);
|
|
4417
|
+
--usk-native-meter-suboptimum-background: var(--cyber-warning);
|
|
4418
|
+
--usk-native-meter-critical-background: var(--cyber-danger);
|
|
4419
|
+
--usk-native-file-button-background: var(--cyber-primary);
|
|
4420
|
+
--usk-native-file-button-border: 1px solid var(--cyber-border);
|
|
4421
|
+
--usk-native-file-button-radius: .1rem;
|
|
4422
|
+
--usk-native-file-button-shadow: 0 0 .55rem rgb(var(--cyber-primary-rgb) / .18);
|
|
4423
|
+
--usk-native-color-swatch-border: 1px solid var(--cyber-border);
|
|
4424
|
+
--usk-native-color-swatch-radius: .1rem;
|
|
4425
|
+
--usk-native-indicator-opacity: .87;
|
|
4426
|
+
--usk-native-indicator-filter: none;
|
|
4427
|
+
--usk-native-scrollbar-size: .75rem;
|
|
4428
|
+
--usk-native-scrollbar-track: var(--cyber-surface-soft);
|
|
4429
|
+
--usk-native-scrollbar-thumb: var(--cyber-primary);
|
|
4430
|
+
--usk-native-scrollbar-radius: .08rem;
|
|
3625
4431
|
--cyber-bg: rgb(var(--cyber-bg-rgb));
|
|
3626
4432
|
--cyber-surface: rgb(var(--cyber-surface-rgb) / var(--cyber-panel-alpha));
|
|
3627
4433
|
--cyber-surface-strong: rgb(var(--cyber-surface-strong-rgb) / var(--cyber-panel-strong-alpha));
|
|
@@ -3657,9 +4463,9 @@
|
|
|
3657
4463
|
--cyber-shadow-sm: 0 2px 8px rgb(0 0 0 / var(--cyber-shadow-alpha));
|
|
3658
4464
|
--cyber-shadow-md: 0 10px 28px rgb(0 0 0 / calc(var(--cyber-shadow-alpha) + .05));
|
|
3659
4465
|
--cyber-shadow-lg: 0 22px 60px rgb(0 0 0 / calc(var(--cyber-shadow-alpha) + .12));
|
|
3660
|
-
--cyber-theme-bg-size:
|
|
3661
|
-
--cyber-theme-bg:
|
|
3662
|
-
--cyber-card-bg: linear-gradient(135deg, rgb(var(--cyber-primary-rgb) / .
|
|
4466
|
+
--cyber-theme-bg-size: 32px 32px, 32px 32px, auto;
|
|
4467
|
+
--cyber-theme-bg: linear-gradient(90deg, rgb(var(--cyber-primary-rgb) / var(--cyber-grid-alpha)) 1px, transparent 1px), linear-gradient(rgb(var(--cyber-border-rgb) / var(--cyber-grid-alpha)) 1px, transparent 1px), var(--cyber-bg);
|
|
4468
|
+
--cyber-card-bg: linear-gradient(135deg, rgb(var(--cyber-primary-rgb) / .12), transparent 18%) top left / 3rem 3rem no-repeat, var(--cyber-surface);
|
|
3663
4469
|
--cyber-control-bg: linear-gradient(180deg, rgb(var(--cyber-surface-strong-rgb) / var(--cyber-panel-alpha)), rgb(var(--cyber-surface-soft-rgb) / var(--cyber-panel-soft-alpha)));
|
|
3664
4470
|
--cyber-spinner-track: rgb(var(--cyber-border-rgb) / max(.28, calc(var(--cyber-border-alpha) * .7)));
|
|
3665
4471
|
--cyber-spinner-stroke: var(--cyber-primary);
|
|
@@ -3667,23 +4473,23 @@
|
|
|
3667
4473
|
}
|
|
3668
4474
|
|
|
3669
4475
|
@supports (color: color-mix(in srgb,black,white)) {
|
|
3670
|
-
[data-ui="cyberpunk"][data-
|
|
4476
|
+
[data-ui="cyberpunk"][data-mode] {
|
|
3671
4477
|
--cyber-border: color-mix(in srgb, rgb(var(--cyber-border-rgb) / max(var(--cyber-border-alpha), var(--usk-border-min-alpha))), var(--cyber-text) var(--usk-border-text-mix));
|
|
3672
4478
|
}
|
|
3673
4479
|
}
|
|
3674
4480
|
|
|
3675
4481
|
[data-ui="cyberpunk"] {
|
|
3676
|
-
background:
|
|
4482
|
+
background: linear-gradient(90deg,rgb(var(--cyber-primary-rgb)/var(--cyber-grid-alpha)) 1px,transparent 1px),linear-gradient(rgb(var(--cyber-border-rgb)/var(--cyber-grid-alpha)) 1px,transparent 1px),var(--cyber-bg);
|
|
3677
4483
|
color: var(--cyber-text);
|
|
3678
4484
|
font-family: var(--cyber-font-body);
|
|
3679
|
-
background-size:
|
|
4485
|
+
background-size: 32px 32px, 32px 32px, auto;
|
|
3680
4486
|
}
|
|
3681
4487
|
|
|
3682
4488
|
[data-ui="cyberpunk"] *, [data-ui="cyberpunk"] :before, [data-ui="cyberpunk"] :after {
|
|
3683
4489
|
box-sizing: border-box;
|
|
3684
4490
|
}
|
|
3685
4491
|
|
|
3686
|
-
[data-ui="cyberpunk"][data-
|
|
4492
|
+
[data-ui="cyberpunk"][data-mode] {
|
|
3687
4493
|
background: var(--cyber-theme-bg);
|
|
3688
4494
|
background-size: var(--cyber-theme-bg-size);
|
|
3689
4495
|
}
|
|
@@ -3721,7 +4527,7 @@
|
|
|
3721
4527
|
}
|
|
3722
4528
|
|
|
3723
4529
|
.cyber-kicker {
|
|
3724
|
-
color: var(--cyber-primary);
|
|
4530
|
+
color: var(--usk-primary-ink, var(--cyber-primary));
|
|
3725
4531
|
letter-spacing: .18em;
|
|
3726
4532
|
margin: 0;
|
|
3727
4533
|
font-size: .8rem;
|
|
@@ -3747,7 +4553,6 @@
|
|
|
3747
4553
|
clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% 100%, 1rem 100%, 0 calc(100% - 1rem));
|
|
3748
4554
|
transition: transform var(--cyber-transition-base),box-shadow var(--cyber-transition-base),border-color var(--cyber-transition-base);
|
|
3749
4555
|
position: relative;
|
|
3750
|
-
overflow: hidden;
|
|
3751
4556
|
}
|
|
3752
4557
|
|
|
3753
4558
|
.cyber-card:before, .cyber-panel:before, .cyber-console:before, .cyber-toolbar:before, :where([data-ui="cyberpunk"]) .ui-card:before, :where([data-ui="cyberpunk"]) .ui-toolbar:before {
|
|
@@ -3835,12 +4640,6 @@
|
|
|
3835
4640
|
background: var(--cyber-primary-hover);
|
|
3836
4641
|
}
|
|
3837
4642
|
|
|
3838
|
-
.cyber-button-secondary, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="secondary"]) {
|
|
3839
|
-
background: linear-gradient(135deg,#ffffff24,transparent),var(--cyber-secondary);
|
|
3840
|
-
color: var(--cyber-on-secondary);
|
|
3841
|
-
border-color: rgb(var(--cyber-secondary-rgb)/.7);
|
|
3842
|
-
}
|
|
3843
|
-
|
|
3844
4643
|
.cyber-button-secondary:hover, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="secondary"]):hover {
|
|
3845
4644
|
background: var(--cyber-secondary-hover);
|
|
3846
4645
|
}
|
|
@@ -4069,16 +4868,12 @@
|
|
|
4069
4868
|
letter-spacing: .1em;
|
|
4070
4869
|
}
|
|
4071
4870
|
|
|
4072
|
-
.cyber-table td, :where([data-ui="cyberpunk"]) .ui-table td {
|
|
4073
|
-
color: var(--cyber-text-muted);
|
|
4074
|
-
}
|
|
4075
|
-
|
|
4076
4871
|
.cyber-table tr:hover td, :where([data-ui="cyberpunk"]) .ui-table tr:hover td {
|
|
4077
4872
|
background: rgb(var(--cyber-primary-rgb)/.06);
|
|
4078
4873
|
}
|
|
4079
4874
|
|
|
4080
4875
|
.cyber-text-primary {
|
|
4081
|
-
color: var(--cyber-primary);
|
|
4876
|
+
color: var(--usk-primary-ink, var(--cyber-primary));
|
|
4082
4877
|
}
|
|
4083
4878
|
|
|
4084
4879
|
.cyber-text-secondary {
|
|
@@ -4086,7 +4881,7 @@
|
|
|
4086
4881
|
}
|
|
4087
4882
|
|
|
4088
4883
|
.cyber-text-accent {
|
|
4089
|
-
color: var(--cyber-accent);
|
|
4884
|
+
color: var(--usk-accent-ink, var(--cyber-accent));
|
|
4090
4885
|
}
|
|
4091
4886
|
|
|
4092
4887
|
.cyber-text-success {
|
|
@@ -4121,7 +4916,7 @@
|
|
|
4121
4916
|
background: var(--cyber-card-bg);
|
|
4122
4917
|
}
|
|
4123
4918
|
|
|
4124
|
-
.cyber-toolbar, .cyber-table-wrap, .cyber-button:not(.cyber-button-primary):not(.cyber-button-secondary):not(.cyber-button-danger):not(.cyber-button-ghost), .cyber-icon-button, :where([data-ui="cyberpunk"]) .ui-toolbar, :where([data-ui="cyberpunk"]) .ui-table-wrap, :where([data-ui="cyberpunk"]) .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="cyberpunk"]) .ui-icon-button {
|
|
4919
|
+
.cyber-toolbar, .cyber-table-wrap, .cyber-button:not(.cyber-button-primary):not(.cyber-button-secondary):not(.cyber-button-danger):not(.cyber-button-warning):not(.cyber-button-ghost), .cyber-icon-button, :where([data-ui="cyberpunk"]) .ui-toolbar, :where([data-ui="cyberpunk"]) .ui-table-wrap, :where([data-ui="cyberpunk"]) .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="cyberpunk"]) .ui-icon-button {
|
|
4125
4920
|
background: var(--cyber-control-bg);
|
|
4126
4921
|
}
|
|
4127
4922
|
|
|
@@ -4248,7 +5043,7 @@
|
|
|
4248
5043
|
}
|
|
4249
5044
|
|
|
4250
5045
|
.cyber-button.cyber-button-outline-heavy, .cyber-button-outline-heavy, :where([data-ui="cyberpunk"]) .ui-button.cyber-button-outline-heavy {
|
|
4251
|
-
color: var(--cyber-primary);
|
|
5046
|
+
color: var(--usk-primary-ink, var(--cyber-primary));
|
|
4252
5047
|
border-style: solid;
|
|
4253
5048
|
border-width: 2px;
|
|
4254
5049
|
border-color: var(--cyber-primary);
|
|
@@ -4289,7 +5084,6 @@
|
|
|
4289
5084
|
border-radius: var(--cyber-radius-lg);
|
|
4290
5085
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
|
|
4291
5086
|
display: grid;
|
|
4292
|
-
overflow: hidden;
|
|
4293
5087
|
}
|
|
4294
5088
|
|
|
4295
5089
|
.cyber-feature-item {
|
|
@@ -4332,7 +5126,7 @@
|
|
|
4332
5126
|
}
|
|
4333
5127
|
|
|
4334
5128
|
.cyber-eyebrow {
|
|
4335
|
-
color: var(--cyber-primary);
|
|
5129
|
+
color: var(--usk-primary-ink, var(--cyber-primary));
|
|
4336
5130
|
font-family: var(--cyber-font-heading);
|
|
4337
5131
|
letter-spacing: .14em;
|
|
4338
5132
|
text-transform: uppercase;
|
|
@@ -4417,6 +5211,7 @@
|
|
|
4417
5211
|
clip-path: polygon(.75rem 0, 78% 0, calc(78% + .35rem) .35rem, 100% .35rem, 100% calc(100% - .75rem), calc(100% - .75rem) 100%, 0 100%, 0 .75rem);
|
|
4418
5212
|
justify-content: center;
|
|
4419
5213
|
justify-self: end;
|
|
5214
|
+
min-block-size: 2.75rem;
|
|
4420
5215
|
inline-size: min(100%, 18rem);
|
|
4421
5216
|
min-inline-size: 6rem;
|
|
4422
5217
|
max-inline-size: 100%;
|
|
@@ -4435,13 +5230,13 @@
|
|
|
4435
5230
|
border-radius: 0;
|
|
4436
5231
|
}
|
|
4437
5232
|
|
|
4438
|
-
[data-ui="cyberpunk"][data-
|
|
5233
|
+
[data-ui="cyberpunk"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
|
|
4439
5234
|
border: 2px solid var(--cyber-primary);
|
|
4440
5235
|
box-shadow: 0 0 .75rem rgb(var(--cyber-primary-rgb)/.36),inset 0 0 .4rem rgb(var(--cyber-accent-rgb)/.14);
|
|
4441
5236
|
border-radius: 0;
|
|
4442
5237
|
}
|
|
4443
5238
|
|
|
4444
|
-
[data-ui="cyberpunk"][data-
|
|
5239
|
+
[data-ui="cyberpunk"][data-mode] :where(dialog) {
|
|
4445
5240
|
border: 2px solid var(--cyber-primary);
|
|
4446
5241
|
box-shadow: 0 0 1.2rem rgb(var(--cyber-primary-rgb)/.34),0 1rem 2.4rem rgb(var(--cyber-text-rgb)/.28);
|
|
4447
5242
|
border-radius: 0;
|
|
@@ -4456,6 +5251,202 @@
|
|
|
4456
5251
|
box-shadow: 0 0 .45em;
|
|
4457
5252
|
}
|
|
4458
5253
|
|
|
5254
|
+
[data-ui="cyberpunk"][data-mode] {
|
|
5255
|
+
--usk-native-font-control: Bahnschrift, "Arial Narrow", "Segoe UI", sans-serif;
|
|
5256
|
+
--usk-native-control-min-block-size: 2.85rem;
|
|
5257
|
+
--usk-native-control-padding-block: .66rem;
|
|
5258
|
+
--usk-native-control-padding-inline: 1.08rem;
|
|
5259
|
+
--usk-native-border-width: 2px;
|
|
5260
|
+
--usk-native-radius-sm: .06rem;
|
|
5261
|
+
--usk-native-radius: .1rem;
|
|
5262
|
+
--usk-native-radius-lg: .14rem;
|
|
5263
|
+
--usk-native-shadow: 0 0 .7rem rgb(var(--cyber-primary-rgb) / .28);
|
|
5264
|
+
--usk-native-shadow-md: 0 0 1.4rem rgb(var(--cyber-primary-rgb) / .32), inset .22rem 0 0 rgb(var(--cyber-accent-rgb) / .24);
|
|
5265
|
+
--usk-native-focus-ring: 0 0 0 2px var(--cyber-surface), 0 0 0 4px var(--cyber-focus), 0 0 1rem var(--cyber-focus);
|
|
5266
|
+
--usk-native-subcontrol-padding-block: .5rem;
|
|
5267
|
+
--usk-native-subcontrol-padding-inline: .76rem;
|
|
5268
|
+
--usk-native-choice-size: 1.32rem;
|
|
5269
|
+
--usk-native-choice-background: linear-gradient(135deg, var(--cyber-control-bg), rgb(var(--cyber-primary-rgb) / .1));
|
|
5270
|
+
--usk-native-choice-border: 2px solid var(--cyber-primary);
|
|
5271
|
+
--usk-native-checkbox-radius: .04rem;
|
|
5272
|
+
--usk-native-radio-radius: 28%;
|
|
5273
|
+
--usk-native-choice-shadow: inset .16rem 0 0 rgb(var(--cyber-accent-rgb) / .34), 0 0 .55rem rgb(var(--cyber-primary-rgb) / .3);
|
|
5274
|
+
--usk-native-choice-checked-background: linear-gradient(135deg, var(--cyber-primary), var(--cyber-accent));
|
|
5275
|
+
--usk-native-choice-mark-color: var(--cyber-on-primary);
|
|
5276
|
+
--usk-native-select-indicator-image: linear-gradient(45deg, transparent 45%, var(--cyber-primary) 45% 56%, transparent 56%), linear-gradient(135deg, transparent 45%, var(--cyber-accent) 45% 56%, transparent 56%);
|
|
5277
|
+
--usk-native-select-indicator-size: .7rem .7rem, .7rem .7rem;
|
|
5278
|
+
--usk-native-select-indicator-position: calc(100% - 1.15rem) 50%, calc(100% - .78rem) 50%;
|
|
5279
|
+
--usk-native-select-padding-inline-end: 2.5rem;
|
|
5280
|
+
--usk-native-range-track-size: .46rem;
|
|
5281
|
+
--usk-native-range-track-background: linear-gradient(90deg, var(--cyber-success), var(--cyber-warning) 62%, var(--cyber-danger));
|
|
5282
|
+
--usk-native-range-track-border: 2px solid var(--cyber-primary);
|
|
5283
|
+
--usk-native-range-track-radius: .04rem;
|
|
5284
|
+
--usk-native-range-track-shadow: 0 0 .7rem rgb(var(--cyber-primary-rgb) / .4);
|
|
5285
|
+
--usk-native-range-progress-background: linear-gradient(90deg, var(--cyber-primary), var(--cyber-accent));
|
|
5286
|
+
--usk-native-range-thumb-size: 1.3rem;
|
|
5287
|
+
--usk-native-range-thumb-background: linear-gradient(135deg, var(--cyber-surface-strong), var(--cyber-primary));
|
|
5288
|
+
--usk-native-range-thumb-border: 2px solid var(--cyber-accent);
|
|
5289
|
+
--usk-native-range-thumb-radius: 28%;
|
|
5290
|
+
--usk-native-range-thumb-shadow: 0 0 .85rem rgb(var(--cyber-accent-rgb) / .5);
|
|
5291
|
+
--usk-native-progress-size: .7rem;
|
|
5292
|
+
--usk-native-progress-track-background: repeating-linear-gradient(110deg, var(--cyber-surface-soft) 0 .65rem, transparent .65rem .78rem);
|
|
5293
|
+
--usk-native-progress-track-border: 2px solid var(--cyber-primary);
|
|
5294
|
+
--usk-native-progress-track-radius: .04rem;
|
|
5295
|
+
--usk-native-progress-track-shadow: inset .2rem 0 0 rgb(var(--cyber-accent-rgb) / .3);
|
|
5296
|
+
--usk-native-progress-value-background: repeating-linear-gradient(110deg, var(--cyber-primary) 0 .65rem, var(--cyber-accent) .65rem .78rem);
|
|
5297
|
+
--usk-native-progress-value-radius: .04rem;
|
|
5298
|
+
--usk-native-progress-value-shadow: 0 0 .8rem rgb(var(--cyber-primary-rgb) / .5);
|
|
5299
|
+
--usk-native-scrollbar-size: .68rem;
|
|
5300
|
+
--usk-native-scrollbar-track: linear-gradient(90deg, var(--cyber-surface), var(--cyber-surface-soft));
|
|
5301
|
+
--usk-native-scrollbar-thumb: linear-gradient(180deg, var(--cyber-primary), var(--cyber-accent));
|
|
5302
|
+
--usk-native-scrollbar-radius: .04rem;
|
|
5303
|
+
}
|
|
5304
|
+
|
|
5305
|
+
.cyber-title {
|
|
5306
|
+
letter-spacing: max(.08em, .5px);
|
|
5307
|
+
margin-block: .75rem;
|
|
5308
|
+
font-weight: 900;
|
|
5309
|
+
}
|
|
5310
|
+
|
|
5311
|
+
.cyber-label, :where([data-ui="cyberpunk"]) .ui-label {
|
|
5312
|
+
font-size: .76rem;
|
|
5313
|
+
font-weight: 850;
|
|
5314
|
+
}
|
|
5315
|
+
|
|
5316
|
+
.cyber-card, .cyber-panel, :where([data-ui="cyberpunk"]) .ui-card {
|
|
5317
|
+
background: var(--cyber-card-bg);
|
|
5318
|
+
border: 2px solid var(--cyber-primary);
|
|
5319
|
+
box-shadow: inset .24rem 0 0 rgb(var(--cyber-accent-rgb)/.26),0 0 1.2rem rgb(var(--cyber-primary-rgb)/.24);
|
|
5320
|
+
clip-path: polygon(.6rem 0, 100% 0, 100% calc(100% - .6rem), calc(100% - .6rem) 100%, 0 100%, 0 .6rem);
|
|
5321
|
+
border-radius: 0;
|
|
5322
|
+
padding: 1.08rem;
|
|
5323
|
+
}
|
|
5324
|
+
|
|
5325
|
+
.cyber-well, .cyber-inset {
|
|
5326
|
+
background: var(--cyber-control-bg);
|
|
5327
|
+
border: 1px solid var(--cyber-accent);
|
|
5328
|
+
box-shadow: inset 0 0 .8rem rgb(var(--cyber-primary-rgb)/.18);
|
|
5329
|
+
clip-path: polygon(.42rem 0, 100% 0, 100% calc(100% - .42rem), calc(100% - .42rem) 100%, 0 100%, 0 .42rem);
|
|
5330
|
+
border-radius: 0;
|
|
5331
|
+
padding: .82rem;
|
|
5332
|
+
}
|
|
5333
|
+
|
|
5334
|
+
.cyber-button, .cyber-icon-button, :where([data-ui="cyberpunk"]) .ui-button, :where([data-ui="cyberpunk"]) .ui-icon-button {
|
|
5335
|
+
background: linear-gradient(135deg,rgb(var(--cyber-primary-rgb)/.2),transparent),var(--cyber-control-bg);
|
|
5336
|
+
border: 2px solid var(--cyber-primary);
|
|
5337
|
+
min-height: 2.85rem;
|
|
5338
|
+
box-shadow: inset .2rem 0 0 rgb(var(--cyber-accent-rgb)/.38),0 0 .75rem rgb(var(--cyber-primary-rgb)/.32);
|
|
5339
|
+
clip-path: polygon(.5rem 0, 100% 0, 100% calc(100% - .5rem), calc(100% - .5rem) 100%, 0 100%, 0 .5rem);
|
|
5340
|
+
border-radius: 0;
|
|
5341
|
+
padding: .66rem 1.08rem;
|
|
5342
|
+
font-weight: 850;
|
|
5343
|
+
}
|
|
5344
|
+
|
|
5345
|
+
.cyber-button:active, .cyber-button[aria-pressed="true"], .cyber-button.is-active, :where([data-ui="cyberpunk"]) .ui-button:active, :where([data-ui="cyberpunk"]) .ui-button[aria-pressed="true"], :where([data-ui="cyberpunk"]) .ui-button.is-active {
|
|
5346
|
+
background: linear-gradient(135deg,var(--cyber-primary),var(--cyber-accent));
|
|
5347
|
+
box-shadow: inset 0 0 .6rem rgb(var(--cyber-text-rgb)/.24);
|
|
5348
|
+
transform: translateY(1px);
|
|
5349
|
+
}
|
|
5350
|
+
|
|
5351
|
+
.cyber-input, .cyber-textarea, .cyber-select, :where([data-ui="cyberpunk"]) .ui-input, :where([data-ui="cyberpunk"]) .ui-textarea, :where([data-ui="cyberpunk"]) .ui-select {
|
|
5352
|
+
background: var(--cyber-control-bg);
|
|
5353
|
+
border: 1px solid var(--cyber-primary);
|
|
5354
|
+
min-height: 2.55rem;
|
|
5355
|
+
box-shadow: inset .18rem 0 0 rgb(var(--cyber-accent-rgb)/.3);
|
|
5356
|
+
clip-path: polygon(.34rem 0, 100% 0, 100% calc(100% - .34rem), calc(100% - .34rem) 100%, 0 100%, 0 .34rem);
|
|
5357
|
+
border-radius: 0;
|
|
5358
|
+
padding: .54rem .82rem;
|
|
5359
|
+
}
|
|
5360
|
+
|
|
5361
|
+
.cyber-nav, .cyber-toolbar, :where([data-ui="cyberpunk"]) .ui-nav, :where([data-ui="cyberpunk"]) .ui-toolbar {
|
|
5362
|
+
border: 2px solid var(--cyber-primary);
|
|
5363
|
+
box-shadow: inset 0-.18rem 0 rgb(var(--cyber-accent-rgb)/.28);
|
|
5364
|
+
border-radius: 0;
|
|
5365
|
+
}
|
|
5366
|
+
|
|
5367
|
+
.cyber-nav-link, :where([data-ui="cyberpunk"]) .ui-nav-link {
|
|
5368
|
+
clip-path: polygon(.35rem 0, 100% 0, calc(100% - .35rem) 100%, 0 100%);
|
|
5369
|
+
border-radius: 0;
|
|
5370
|
+
}
|
|
5371
|
+
|
|
5372
|
+
.cyber-badge, :where([data-ui="cyberpunk"]) .ui-badge {
|
|
5373
|
+
clip-path: polygon(.28rem 0, 100% 0, calc(100% - .28rem) 100%, 0 100%);
|
|
5374
|
+
border: 1px solid;
|
|
5375
|
+
border-radius: 0;
|
|
5376
|
+
min-height: 1.52rem;
|
|
5377
|
+
padding: .26rem .58rem;
|
|
5378
|
+
}
|
|
5379
|
+
|
|
5380
|
+
.cyber-alert, :where([data-ui="cyberpunk"]) .ui-alert {
|
|
5381
|
+
background: var(--cyber-card-bg);
|
|
5382
|
+
border: 2px solid var(--cyber-primary);
|
|
5383
|
+
box-shadow: inset .28rem 0 0 currentColor,0 0 .9rem rgb(var(--cyber-primary-rgb)/.22);
|
|
5384
|
+
clip-path: polygon(.45rem 0, 100% 0, 100% calc(100% - .45rem), calc(100% - .45rem) 100%, 0 100%, 0 .45rem);
|
|
5385
|
+
border-radius: 0;
|
|
5386
|
+
padding: .78rem .92rem;
|
|
5387
|
+
}
|
|
5388
|
+
|
|
5389
|
+
.cyber-progress, :where([data-ui="cyberpunk"]) .ui-progress {
|
|
5390
|
+
background: repeating-linear-gradient(110deg,var(--cyber-surface-soft)0 .65rem,transparent .65rem .78rem);
|
|
5391
|
+
border-radius: 0;
|
|
5392
|
+
height: .7rem;
|
|
5393
|
+
}
|
|
5394
|
+
|
|
5395
|
+
.cyber-progress-bar, :where([data-ui="cyberpunk"]) .ui-progress-bar {
|
|
5396
|
+
background: repeating-linear-gradient(110deg,var(--cyber-primary)0 .65rem,var(--cyber-accent) .65rem .78rem);
|
|
5397
|
+
border-radius: 0;
|
|
5398
|
+
}
|
|
5399
|
+
|
|
5400
|
+
.cyber-table-wrap, :where([data-ui="cyberpunk"]) .ui-table-wrap {
|
|
5401
|
+
background: var(--cyber-card-bg);
|
|
5402
|
+
border: 2px solid var(--cyber-primary);
|
|
5403
|
+
box-shadow: inset .2rem 0 0 rgb(var(--cyber-accent-rgb)/.25);
|
|
5404
|
+
border-radius: 0;
|
|
5405
|
+
}
|
|
5406
|
+
|
|
5407
|
+
.cyber-table th, :where([data-ui="cyberpunk"]) .ui-table th {
|
|
5408
|
+
background: linear-gradient(90deg,rgb(var(--cyber-primary-rgb)/.2),transparent);
|
|
5409
|
+
padding: .58rem .72rem;
|
|
5410
|
+
font-weight: 850;
|
|
5411
|
+
}
|
|
5412
|
+
|
|
5413
|
+
.cyber-table td, :where([data-ui="cyberpunk"]) .ui-table td {
|
|
5414
|
+
padding: .62rem .72rem;
|
|
5415
|
+
}
|
|
5416
|
+
|
|
5417
|
+
.cyber-tooltip, [data-ui="cyberpunk"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
|
|
5418
|
+
border: 1px solid var(--cyber-accent);
|
|
5419
|
+
clip-path: polygon(.35rem 0, 100% 0, 100% calc(100% - .35rem), calc(100% - .35rem) 100%, 0 100%, 0 .35rem);
|
|
5420
|
+
border-radius: 0;
|
|
5421
|
+
}
|
|
5422
|
+
|
|
5423
|
+
.cyber-card-service, .cyber-card-feature, .cyber-media-scrim, .cyber-feature-strip, .cyber-callout-bar {
|
|
5424
|
+
clip-path: polygon(.55rem 0, 100% 0, 100% calc(100% - .55rem), calc(100% - .55rem) 100%, 0 100%, 0 .55rem);
|
|
5425
|
+
border-radius: 0;
|
|
5426
|
+
}
|
|
5427
|
+
|
|
5428
|
+
.cyber-button, :where([data-ui="cyberpunk"]) .ui-button {
|
|
5429
|
+
border-radius: .04rem;
|
|
5430
|
+
}
|
|
5431
|
+
|
|
5432
|
+
.cyber-input, :where([data-ui="cyberpunk"]) .ui-input {
|
|
5433
|
+
border-radius: .03rem;
|
|
5434
|
+
}
|
|
5435
|
+
|
|
5436
|
+
.cyber-card, :where([data-ui="cyberpunk"]) .ui-card {
|
|
5437
|
+
border-radius: .05rem;
|
|
5438
|
+
}
|
|
5439
|
+
|
|
5440
|
+
.cyber-alert, :where([data-ui="cyberpunk"]) .ui-alert {
|
|
5441
|
+
border-radius: .07rem;
|
|
5442
|
+
}
|
|
5443
|
+
|
|
5444
|
+
@supports (color: color-mix(in srgb,black,white)) {
|
|
5445
|
+
.cyber-panel, .cyber-card-service, .cyber-feature-strip, .cyber-callout-bar {
|
|
5446
|
+
background: linear-gradient(126deg,color-mix(in srgb,var(--cyber-surface) 62%,var(--cyber-primary)),transparent 64%),linear-gradient(24deg,transparent 44%,color-mix(in srgb,var(--cyber-surface) 68%,var(--cyber-accent))),var(--cyber-card-bg);
|
|
5447
|
+
}
|
|
5448
|
+
}
|
|
5449
|
+
|
|
4459
5450
|
@media (prefers-reduced-motion: reduce) {
|
|
4460
5451
|
[data-ui="cyberpunk"] *, [data-ui="cyberpunk"] :before, [data-ui="cyberpunk"] :after {
|
|
4461
5452
|
scroll-behavior: auto !important;
|
|
@@ -4500,4 +5491,1394 @@
|
|
|
4500
5491
|
color: #000 !important;
|
|
4501
5492
|
}
|
|
4502
5493
|
}
|
|
5494
|
+
|
|
5495
|
+
.cyber-input[readonly], .cyber-textarea[readonly], :where([data-ui="cyberpunk"]) .ui-input[readonly], :where([data-ui="cyberpunk"]) .ui-textarea[readonly] {
|
|
5496
|
+
filter: saturate(.72);
|
|
5497
|
+
opacity: .78;
|
|
5498
|
+
border-style: dashed;
|
|
5499
|
+
}
|
|
5500
|
+
|
|
5501
|
+
.cyber-button-primary, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="primary"]) {
|
|
5502
|
+
background: linear-gradient(112deg,var(--cyber-primary),var(--cyber-accent));
|
|
5503
|
+
color: var(--cyber-on-primary);
|
|
5504
|
+
border-color: var(--cyber-primary);
|
|
5505
|
+
}
|
|
5506
|
+
|
|
5507
|
+
.cyber-button-secondary, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="secondary"]) {
|
|
5508
|
+
background: linear-gradient(112deg,var(--cyber-secondary),rgb(var(--cyber-secondary-rgb)/.72));
|
|
5509
|
+
color: var(--cyber-on-secondary);
|
|
5510
|
+
border-color: var(--cyber-secondary);
|
|
5511
|
+
}
|
|
5512
|
+
|
|
5513
|
+
.cyber-button-danger, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="danger"]) {
|
|
5514
|
+
background: linear-gradient(112deg,var(--cyber-danger),rgb(var(--cyber-danger-rgb)/.66));
|
|
5515
|
+
color: var(--cyber-on-danger);
|
|
5516
|
+
border-color: var(--cyber-danger);
|
|
5517
|
+
}
|
|
5518
|
+
|
|
5519
|
+
.cyber-button-ghost, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="ghost"]) {
|
|
5520
|
+
color: var(--usk-primary-ink, var(--cyber-primary));
|
|
5521
|
+
background: none;
|
|
5522
|
+
border-color: #0000;
|
|
5523
|
+
}
|
|
5524
|
+
|
|
5525
|
+
.cyber-feature-item > .cyber-icon-medallion {
|
|
5526
|
+
font-size: 1.5rem;
|
|
5527
|
+
line-height: 1;
|
|
5528
|
+
}
|
|
5529
|
+
|
|
5530
|
+
.cyber-callout-bar > .cyber-icon-medallion {
|
|
5531
|
+
min-block-size: 4.5rem;
|
|
5532
|
+
min-inline-size: 4.5rem;
|
|
5533
|
+
font-size: 2rem;
|
|
5534
|
+
font-weight: 800;
|
|
5535
|
+
line-height: 1;
|
|
5536
|
+
}
|
|
5537
|
+
|
|
5538
|
+
[data-ui="cyberpunk"][data-mode] {
|
|
5539
|
+
--usk-native-font-control: var(--cyber-font-mono);
|
|
5540
|
+
--usk-native-control-min-block-size: 2.75rem;
|
|
5541
|
+
--usk-native-control-padding-block: .55rem;
|
|
5542
|
+
--usk-native-control-padding-inline: .875rem;
|
|
5543
|
+
--usk-native-border-width: 1px;
|
|
5544
|
+
--usk-native-radius-sm: .08rem;
|
|
5545
|
+
--usk-native-radius: .08rem;
|
|
5546
|
+
--usk-native-radius-lg: .08rem;
|
|
5547
|
+
--usk-native-shadow: 0 0 .7rem rgb(var(--cyber-primary-rgb) / .14);
|
|
5548
|
+
--usk-native-shadow-md: 0 0 .9rem rgb(var(--cyber-primary-rgb) / .16);
|
|
5549
|
+
--usk-native-focus-ring: 0 0 0 2px var(--cyber-surface), 0 0 0 4px var(--cyber-focus), 0 0 .8rem rgb(var(--cyber-focus-rgb) / .22);
|
|
5550
|
+
--usk-native-subcontrol-padding-block: .48rem;
|
|
5551
|
+
--usk-native-subcontrol-padding-inline: .68rem;
|
|
5552
|
+
--usk-native-choice-size: 1.25rem;
|
|
5553
|
+
--usk-native-choice-background: var(--cyber-control-bg);
|
|
5554
|
+
--usk-native-choice-border: 1px solid var(--cyber-border);
|
|
5555
|
+
--usk-native-checkbox-radius: .08rem;
|
|
5556
|
+
--usk-native-radio-radius: 50%;
|
|
5557
|
+
--usk-native-choice-shadow: 0 0 .5rem rgb(var(--cyber-primary-rgb) / .18);
|
|
5558
|
+
--usk-native-choice-checked-background: var(--cyber-primary);
|
|
5559
|
+
--usk-native-choice-mark-color: var(--cyber-on-primary);
|
|
5560
|
+
--usk-native-select-indicator-image: linear-gradient(45deg, transparent 46%, var(--cyber-primary) 46% 56%, transparent 56%), linear-gradient(135deg, transparent 46%, var(--cyber-primary) 46% 56%, transparent 56%);
|
|
5561
|
+
--usk-native-select-indicator-size: .62rem .62rem, .62rem .62rem;
|
|
5562
|
+
--usk-native-select-indicator-position: calc(100% - 1.08rem) 50%, calc(100% - .74rem) 50%;
|
|
5563
|
+
--usk-native-select-padding-inline-end: 2.45rem;
|
|
5564
|
+
--usk-native-range-track-size: .5rem;
|
|
5565
|
+
--usk-native-range-track-background: linear-gradient(90deg, var(--cyber-success), var(--cyber-warning) 62%, var(--cyber-danger));
|
|
5566
|
+
--usk-native-range-track-border: 1px solid var(--cyber-border);
|
|
5567
|
+
--usk-native-range-track-radius: .08rem;
|
|
5568
|
+
--usk-native-range-track-shadow: 0 0 .45rem rgb(var(--cyber-primary-rgb) / .16);
|
|
5569
|
+
--usk-native-range-progress-background: var(--cyber-primary);
|
|
5570
|
+
--usk-native-range-thumb-size: 1.25rem;
|
|
5571
|
+
--usk-native-range-thumb-background: var(--cyber-surface-strong);
|
|
5572
|
+
--usk-native-range-thumb-border: 1px solid var(--cyber-primary);
|
|
5573
|
+
--usk-native-range-thumb-radius: .08rem;
|
|
5574
|
+
--usk-native-range-thumb-shadow: 0 0 .55rem rgb(var(--cyber-primary-rgb) / .24);
|
|
5575
|
+
--usk-native-progress-size: .7rem;
|
|
5576
|
+
--usk-native-progress-track-background: repeating-linear-gradient(110deg, var(--cyber-surface-soft) 0 .58rem, transparent .58rem .72rem);
|
|
5577
|
+
--usk-native-progress-track-border: 1px solid var(--cyber-border);
|
|
5578
|
+
--usk-native-progress-track-radius: .08rem;
|
|
5579
|
+
--usk-native-progress-track-shadow: inset .16rem 0 0 rgb(var(--cyber-primary-rgb) / .16);
|
|
5580
|
+
--usk-native-progress-value-background: repeating-linear-gradient(110deg, var(--cyber-primary) 0 .58rem, var(--cyber-primary-hover) .58rem .72rem);
|
|
5581
|
+
--usk-native-progress-value-radius: .08rem;
|
|
5582
|
+
--usk-native-progress-value-shadow: 0 0 .55rem rgb(var(--cyber-primary-rgb) / .22);
|
|
5583
|
+
--usk-native-file-button-background: var(--cyber-primary);
|
|
5584
|
+
--usk-native-file-button-border: 1px solid var(--cyber-primary);
|
|
5585
|
+
--usk-native-file-button-radius: .08rem;
|
|
5586
|
+
--usk-native-file-button-shadow: 0 0 .55rem rgb(var(--cyber-primary-rgb) / .18);
|
|
5587
|
+
--usk-native-scrollbar-size: .68rem;
|
|
5588
|
+
--usk-native-scrollbar-track: var(--cyber-surface-soft);
|
|
5589
|
+
--usk-native-scrollbar-thumb: var(--cyber-primary);
|
|
5590
|
+
--usk-native-scrollbar-radius: .08rem;
|
|
5591
|
+
--cyber-theme-bg-size: 32px 32px, 32px 32px, auto;
|
|
5592
|
+
--cyber-theme-bg: linear-gradient(90deg, rgb(var(--cyber-primary-rgb) / var(--cyber-grid-alpha)) 1px, transparent 1px), linear-gradient(rgb(var(--cyber-border-rgb) / var(--cyber-grid-alpha)) 1px, transparent 1px), var(--cyber-bg);
|
|
5593
|
+
--cyber-card-bg: linear-gradient(135deg, rgb(var(--cyber-primary-rgb) / .12), transparent 18%) top left / 3rem 3rem no-repeat, var(--cyber-surface);
|
|
5594
|
+
--cyber-control-bg: linear-gradient(180deg, rgb(var(--cyber-surface-strong-rgb) / var(--cyber-panel-alpha)), rgb(var(--cyber-surface-soft-rgb) / var(--cyber-panel-soft-alpha)));
|
|
5595
|
+
}
|
|
5596
|
+
|
|
5597
|
+
[data-ui="cyberpunk"] {
|
|
5598
|
+
background: var(--cyber-theme-bg);
|
|
5599
|
+
background-size: var(--cyber-theme-bg-size);
|
|
5600
|
+
}
|
|
5601
|
+
|
|
5602
|
+
.cyber-title, .cyber-heading {
|
|
5603
|
+
font-family: var(--cyber-font-heading);
|
|
5604
|
+
letter-spacing: .08em;
|
|
5605
|
+
}
|
|
5606
|
+
|
|
5607
|
+
.cyber-kicker, .cyber-label, .cyber-button, .cyber-badge, .cyber-nav-link, .cyber-table th, .cyber-tooltip, [data-ui="cyberpunk"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]), :where([data-ui="cyberpunk"]) .ui-label, :where([data-ui="cyberpunk"]) .ui-button, :where([data-ui="cyberpunk"]) .ui-badge, :where([data-ui="cyberpunk"]) .ui-nav-link, :where([data-ui="cyberpunk"]) .ui-table th {
|
|
5608
|
+
font-family: var(--cyber-font-mono);
|
|
5609
|
+
letter-spacing: .045em;
|
|
5610
|
+
}
|
|
5611
|
+
|
|
5612
|
+
.cyber-title {
|
|
5613
|
+
text-shadow: 0 0 .65rem rgb(var(--cyber-primary-rgb)/.22);
|
|
5614
|
+
margin-block: .75rem;
|
|
5615
|
+
font-weight: 900;
|
|
5616
|
+
}
|
|
5617
|
+
|
|
5618
|
+
.cyber-card, .cyber-panel, .cyber-console, .cyber-toolbar, .cyber-table-wrap, .cyber-card-service, .cyber-media-scrim, .cyber-feature-strip, .cyber-callout-bar, :where([data-ui="cyberpunk"]) .ui-card, :where([data-ui="cyberpunk"]) .ui-toolbar, :where([data-ui="cyberpunk"]) .ui-table-wrap {
|
|
5619
|
+
background: var(--cyber-card-bg);
|
|
5620
|
+
color: var(--cyber-text);
|
|
5621
|
+
border: 1px solid var(--cyber-border);
|
|
5622
|
+
box-shadow: 0 .75rem 1.75rem rgb(0 0 0 / calc(var(--cyber-shadow-alpha)*.62)),0 0 .85rem rgb(var(--cyber-primary-rgb)/.12);
|
|
5623
|
+
clip-path: polygon(0 var(--cyber-cut-md),var(--cyber-cut-md)0,calc(100% - 1.125rem)0,100% 1.125rem,100% calc(100% - var(--cyber-cut-md)),calc(100% - var(--cyber-cut-md)) 100%,1rem 100%,0 calc(100% - 1rem));
|
|
5624
|
+
border-radius: .08rem;
|
|
5625
|
+
position: relative;
|
|
5626
|
+
}
|
|
5627
|
+
|
|
5628
|
+
.cyber-card:after, .cyber-panel:after, .cyber-console:after, .cyber-toolbar:after, .cyber-table-wrap:after, .cyber-card-service:after, .cyber-media-scrim:after, .cyber-feature-strip:after, .cyber-callout-bar:after, :where([data-ui="cyberpunk"]) .ui-card:after, :where([data-ui="cyberpunk"]) .ui-toolbar:after, :where([data-ui="cyberpunk"]) .ui-table-wrap:after {
|
|
5629
|
+
content: "";
|
|
5630
|
+
pointer-events: none;
|
|
5631
|
+
background: linear-gradient(90deg,var(--cyber-primary),var(--cyber-danger));
|
|
5632
|
+
opacity: .86;
|
|
5633
|
+
block-size: 2px;
|
|
5634
|
+
inline-size: 100%;
|
|
5635
|
+
position: absolute;
|
|
5636
|
+
inset: 0 auto auto 0;
|
|
5637
|
+
}
|
|
5638
|
+
|
|
5639
|
+
.cyber-panel, .cyber-console {
|
|
5640
|
+
padding: var(--cyber-space-5);
|
|
5641
|
+
}
|
|
5642
|
+
|
|
5643
|
+
.cyber-card, :where([data-ui="cyberpunk"]) .ui-card {
|
|
5644
|
+
padding: 1.08rem;
|
|
5645
|
+
}
|
|
5646
|
+
|
|
5647
|
+
.cyber-well, .cyber-inset {
|
|
5648
|
+
background: var(--cyber-control-bg);
|
|
5649
|
+
border: 1px solid var(--cyber-border);
|
|
5650
|
+
box-shadow: inset .18rem 0 0 rgb(var(--cyber-primary-rgb)/.12);
|
|
5651
|
+
clip-path: polygon(0 .42rem, .42rem 0, 100% 0, 100% calc(100% - .42rem), calc(100% - .42rem) 100%, 0 100%);
|
|
5652
|
+
border-radius: .08rem;
|
|
5653
|
+
}
|
|
5654
|
+
|
|
5655
|
+
.cyber-button, .cyber-icon-button, :where([data-ui="cyberpunk"]) .ui-button, :where([data-ui="cyberpunk"]) .ui-icon-button {
|
|
5656
|
+
min-block-size: 2.75rem;
|
|
5657
|
+
background-color: rgb(var(--cyber-surface-soft-rgb)/var(--cyber-panel-soft-alpha));
|
|
5658
|
+
background-image: linear-gradient(135deg,rgb(var(--cyber-primary-rgb)/.12),transparent 56%);
|
|
5659
|
+
min-height: 2.75rem;
|
|
5660
|
+
color: var(--cyber-text);
|
|
5661
|
+
border: 1px solid var(--cyber-border);
|
|
5662
|
+
box-shadow: none;
|
|
5663
|
+
font-family: var(--cyber-font-mono);
|
|
5664
|
+
letter-spacing: .045em;
|
|
5665
|
+
clip-path: polygon(0 .5rem, .5rem 0, calc(100% - .75rem) 0, 100% .75rem, 100% calc(100% - .4375rem), calc(100% - .4375rem) 100%, 0 100%);
|
|
5666
|
+
transition: transform var(--cyber-transition-fast),box-shadow var(--cyber-transition-fast),border-color var(--cyber-transition-fast),background-color var(--cyber-transition-fast);
|
|
5667
|
+
border-radius: .04rem;
|
|
5668
|
+
padding: .58rem .875rem;
|
|
5669
|
+
font-size: .75rem;
|
|
5670
|
+
font-weight: 800;
|
|
5671
|
+
}
|
|
5672
|
+
|
|
5673
|
+
.cyber-icon-button, :where([data-ui="cyberpunk"]) .ui-icon-button {
|
|
5674
|
+
inline-size: 2.75rem;
|
|
5675
|
+
min-inline-size: 2.75rem;
|
|
5676
|
+
padding: 0;
|
|
5677
|
+
}
|
|
5678
|
+
|
|
5679
|
+
.cyber-button:hover, .cyber-icon-button:hover, :where([data-ui="cyberpunk"]) .ui-button:hover, :where([data-ui="cyberpunk"]) .ui-icon-button:hover {
|
|
5680
|
+
border-color: var(--cyber-primary);
|
|
5681
|
+
color: var(--usk-primary-ink, var(--cyber-primary));
|
|
5682
|
+
box-shadow: 0 0 .75rem rgb(var(--cyber-primary-rgb)/.2);
|
|
5683
|
+
}
|
|
5684
|
+
|
|
5685
|
+
.cyber-button:active, .cyber-icon-button:active, .cyber-button.is-active, .cyber-button[aria-pressed="true"], :where([data-ui="cyberpunk"]) .ui-button:active, :where([data-ui="cyberpunk"]) .ui-icon-button:active, :where([data-ui="cyberpunk"]) .ui-button.is-active, :where([data-ui="cyberpunk"]) .ui-button[aria-pressed="true"] {
|
|
5686
|
+
transform: translateY(1px);
|
|
5687
|
+
box-shadow: inset 0 0 .5rem #0000003d;
|
|
5688
|
+
}
|
|
5689
|
+
|
|
5690
|
+
.cyber-button-primary, .cyber-nav-link.is-active, .cyber-nav-link[aria-current="page"], :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="primary"]), :where([data-ui="cyberpunk"]) .ui-nav-link.is-active, :where([data-ui="cyberpunk"]) .ui-nav-link[aria-current="page"] {
|
|
5691
|
+
background-color: var(--cyber-primary);
|
|
5692
|
+
color: var(--cyber-on-primary);
|
|
5693
|
+
border-color: var(--cyber-primary);
|
|
5694
|
+
box-shadow: 0 0 .75rem rgb(var(--cyber-primary-rgb)/.24);
|
|
5695
|
+
background-image: none;
|
|
5696
|
+
}
|
|
5697
|
+
|
|
5698
|
+
.cyber-button-primary:hover, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="primary"]):hover {
|
|
5699
|
+
background-color: var(--cyber-primary-hover);
|
|
5700
|
+
color: var(--cyber-on-primary);
|
|
5701
|
+
border-color: var(--cyber-primary-hover);
|
|
5702
|
+
}
|
|
5703
|
+
|
|
5704
|
+
.cyber-button-secondary, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="secondary"]) {
|
|
5705
|
+
background-color: var(--cyber-secondary);
|
|
5706
|
+
color: var(--cyber-on-secondary);
|
|
5707
|
+
border-color: var(--cyber-secondary);
|
|
5708
|
+
background-image: none;
|
|
5709
|
+
}
|
|
5710
|
+
|
|
5711
|
+
.cyber-button-secondary:hover, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="secondary"]):hover {
|
|
5712
|
+
background-color: var(--cyber-secondary-hover);
|
|
5713
|
+
color: var(--cyber-on-secondary);
|
|
5714
|
+
border-color: var(--cyber-secondary-hover);
|
|
5715
|
+
}
|
|
5716
|
+
|
|
5717
|
+
.cyber-button-danger, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="danger"]) {
|
|
5718
|
+
background-color: var(--cyber-danger);
|
|
5719
|
+
color: var(--cyber-on-danger);
|
|
5720
|
+
border-color: var(--cyber-danger);
|
|
5721
|
+
box-shadow: 0 0 .75rem rgb(var(--cyber-danger-rgb)/.2);
|
|
5722
|
+
background-image: none;
|
|
5723
|
+
}
|
|
5724
|
+
|
|
5725
|
+
.cyber-button-danger:hover, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="danger"]):hover {
|
|
5726
|
+
background-color: var(--cyber-danger);
|
|
5727
|
+
color: var(--cyber-on-danger);
|
|
5728
|
+
border-color: var(--cyber-danger);
|
|
5729
|
+
}
|
|
5730
|
+
|
|
5731
|
+
.cyber-input, .cyber-textarea, .cyber-select, :where([data-ui="cyberpunk"]) .ui-input, :where([data-ui="cyberpunk"]) .ui-textarea, :where([data-ui="cyberpunk"]) .ui-select {
|
|
5732
|
+
min-block-size: 2.75rem;
|
|
5733
|
+
background-color: rgb(var(--cyber-surface-soft-rgb)/var(--cyber-panel-soft-alpha));
|
|
5734
|
+
background-image: linear-gradient(135deg,rgb(var(--cyber-primary-rgb)/.1),transparent 58%);
|
|
5735
|
+
min-height: 2.75rem;
|
|
5736
|
+
color: var(--cyber-text);
|
|
5737
|
+
border: 1px solid var(--cyber-primary);
|
|
5738
|
+
box-shadow: inset .16rem 0 0 rgb(var(--cyber-primary-rgb)/.16);
|
|
5739
|
+
clip-path: polygon(0 .4375rem, .4375rem 0, 100% 0, 100% calc(100% - .4375rem), calc(100% - .4375rem) 100%, 0 100%);
|
|
5740
|
+
border-radius: .03rem;
|
|
5741
|
+
padding: .55rem .875rem;
|
|
5742
|
+
}
|
|
5743
|
+
|
|
5744
|
+
.cyber-select, :where([data-ui="cyberpunk"]) .ui-select {
|
|
5745
|
+
appearance: none;
|
|
5746
|
+
background-image: linear-gradient(135deg,rgb(var(--cyber-primary-rgb)/.1),transparent 58%),var(--usk-native-select-indicator-image);
|
|
5747
|
+
background-position: 0 0,var(--usk-native-select-indicator-position);
|
|
5748
|
+
background-repeat: no-repeat;
|
|
5749
|
+
background-size: auto,var(--usk-native-select-indicator-size);
|
|
5750
|
+
padding-inline-end: var(--usk-native-select-padding-inline-end);
|
|
5751
|
+
}
|
|
5752
|
+
|
|
5753
|
+
.cyber-input:focus, .cyber-textarea:focus, .cyber-select:focus, .cyber-button:focus-visible, .cyber-icon-button:focus-visible, .cyber-nav-link:focus-visible, :where([data-ui="cyberpunk"]) .ui-input:focus, :where([data-ui="cyberpunk"]) .ui-textarea:focus, :where([data-ui="cyberpunk"]) .ui-select:focus, :where([data-ui="cyberpunk"]) .ui-button:focus-visible, :where([data-ui="cyberpunk"]) .ui-icon-button:focus-visible, :where([data-ui="cyberpunk"]) .ui-nav-link:focus-visible {
|
|
5754
|
+
border-color: var(--cyber-focus);
|
|
5755
|
+
box-shadow: var(--usk-native-focus-ring);
|
|
5756
|
+
outline-offset: 2px;
|
|
5757
|
+
outline: 2px solid #0000;
|
|
5758
|
+
}
|
|
5759
|
+
|
|
5760
|
+
.cyber-input[aria-invalid="true"], .cyber-textarea[aria-invalid="true"], .cyber-select[aria-invalid="true"], :where([data-ui="cyberpunk"]) .ui-input[aria-invalid="true"], :where([data-ui="cyberpunk"]) .ui-textarea[aria-invalid="true"], :where([data-ui="cyberpunk"]) .ui-select[aria-invalid="true"] {
|
|
5761
|
+
border-color: var(--cyber-danger);
|
|
5762
|
+
box-shadow: 0 0 0 2px rgb(var(--cyber-danger-rgb)/.2);
|
|
5763
|
+
}
|
|
5764
|
+
|
|
5765
|
+
.cyber-badge, :where([data-ui="cyberpunk"]) .ui-badge {
|
|
5766
|
+
min-block-size: 1.5rem;
|
|
5767
|
+
min-height: 1.5rem;
|
|
5768
|
+
box-shadow: none;
|
|
5769
|
+
font-family: var(--cyber-font-mono);
|
|
5770
|
+
letter-spacing: .045em;
|
|
5771
|
+
clip-path: polygon(0 .28rem, .28rem 0, calc(100% - .28rem) 0, 100% .28rem, calc(100% - .28rem) 100%, 0 100%);
|
|
5772
|
+
border: 1px solid;
|
|
5773
|
+
border-radius: .04rem;
|
|
5774
|
+
padding: .22rem .55rem;
|
|
5775
|
+
font-size: .68rem;
|
|
5776
|
+
font-weight: 800;
|
|
5777
|
+
}
|
|
5778
|
+
|
|
5779
|
+
.cyber-alert, :where([data-ui="cyberpunk"]) .ui-alert {
|
|
5780
|
+
background: var(--cyber-card-bg);
|
|
5781
|
+
color: var(--cyber-text);
|
|
5782
|
+
border: 1px solid var(--cyber-primary);
|
|
5783
|
+
box-shadow: inset .22rem 0 0 currentColor,0 0 .75rem rgb(var(--cyber-primary-rgb)/.14);
|
|
5784
|
+
clip-path: polygon(0 .45rem, .45rem 0, 100% 0, 100% calc(100% - .45rem), calc(100% - .45rem) 100%, 0 100%);
|
|
5785
|
+
border-radius: .07rem;
|
|
5786
|
+
padding: .78rem .92rem;
|
|
5787
|
+
}
|
|
5788
|
+
|
|
5789
|
+
.cyber-alert-success, :where([data-ui="cyberpunk"]) .ui-alert:where([data-ui-variant="success"]) {
|
|
5790
|
+
border-color: var(--cyber-success);
|
|
5791
|
+
color: var(--cyber-success);
|
|
5792
|
+
}
|
|
5793
|
+
|
|
5794
|
+
.cyber-alert-warning, :where([data-ui="cyberpunk"]) .ui-alert:where([data-ui-variant="warning"]) {
|
|
5795
|
+
border-color: var(--cyber-warning);
|
|
5796
|
+
color: var(--cyber-warning);
|
|
5797
|
+
}
|
|
5798
|
+
|
|
5799
|
+
.cyber-alert-danger, :where([data-ui="cyberpunk"]) .ui-alert:where([data-ui-variant="danger"]) {
|
|
5800
|
+
border-color: var(--cyber-danger);
|
|
5801
|
+
color: var(--cyber-danger);
|
|
5802
|
+
}
|
|
5803
|
+
|
|
5804
|
+
.cyber-alert-body, :where([data-ui="cyberpunk"]) .ui-alert-body {
|
|
5805
|
+
color: var(--cyber-text-muted);
|
|
5806
|
+
}
|
|
5807
|
+
|
|
5808
|
+
.cyber-progress, :where([data-ui="cyberpunk"]) .ui-progress {
|
|
5809
|
+
block-size: .7rem;
|
|
5810
|
+
min-block-size: .7rem;
|
|
5811
|
+
background: repeating-linear-gradient(110deg,var(--cyber-surface-soft)0 .58rem,transparent .58rem .72rem);
|
|
5812
|
+
border: 1px solid var(--cyber-border);
|
|
5813
|
+
height: .7rem;
|
|
5814
|
+
box-shadow: inset .16rem 0 0 rgb(var(--cyber-primary-rgb)/.16);
|
|
5815
|
+
clip-path: polygon(0 .28rem, .28rem 0, 100% 0, 100% 100%, .28rem 100%, 0 calc(100% - .28rem));
|
|
5816
|
+
border-radius: .08rem;
|
|
5817
|
+
padding: .1rem;
|
|
5818
|
+
}
|
|
5819
|
+
|
|
5820
|
+
.cyber-progress-bar, :where([data-ui="cyberpunk"]) .ui-progress-bar {
|
|
5821
|
+
background: repeating-linear-gradient(110deg,var(--cyber-primary)0 .58rem,var(--cyber-primary-hover) .58rem .72rem);
|
|
5822
|
+
box-shadow: 0 0 .55rem rgb(var(--cyber-primary-rgb)/.22);
|
|
5823
|
+
border-radius: .04rem;
|
|
5824
|
+
}
|
|
5825
|
+
|
|
5826
|
+
.cyber-table th, .cyber-table td, :where([data-ui="cyberpunk"]) .ui-table th, :where([data-ui="cyberpunk"]) .ui-table td {
|
|
5827
|
+
border-bottom: 1px solid rgb(var(--cyber-border-rgb)/.46);
|
|
5828
|
+
padding: .5rem .65rem;
|
|
5829
|
+
}
|
|
5830
|
+
|
|
5831
|
+
.cyber-table th, :where([data-ui="cyberpunk"]) .ui-table th {
|
|
5832
|
+
background: linear-gradient(90deg,rgb(var(--cyber-primary-rgb)/.16),transparent);
|
|
5833
|
+
color: var(--cyber-text);
|
|
5834
|
+
font-family: var(--cyber-font-mono);
|
|
5835
|
+
letter-spacing: .045em;
|
|
5836
|
+
font-size: .68rem;
|
|
5837
|
+
font-weight: 800;
|
|
5838
|
+
}
|
|
5839
|
+
|
|
5840
|
+
.cyber-table td, :where([data-ui="cyberpunk"]) .ui-table td {
|
|
5841
|
+
color: var(--cyber-text-muted);
|
|
5842
|
+
}
|
|
5843
|
+
|
|
5844
|
+
.cyber-tooltip, [data-ui="cyberpunk"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
|
|
5845
|
+
background: var(--cyber-surface-strong);
|
|
5846
|
+
color: var(--cyber-text);
|
|
5847
|
+
border: 1px solid var(--cyber-primary);
|
|
5848
|
+
box-shadow: 0 0 .75rem rgb(var(--cyber-primary-rgb)/.16);
|
|
5849
|
+
clip-path: polygon(0 .35rem, .35rem 0, 100% 0, 100% calc(100% - .35rem), calc(100% - .35rem) 100%, 0 100%);
|
|
5850
|
+
border-radius: .04rem;
|
|
5851
|
+
}
|
|
5852
|
+
|
|
5853
|
+
.cyber-spinner, .cyber-loading-spinner, [data-ui="cyberpunk"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
|
|
5854
|
+
clip-path: none;
|
|
5855
|
+
box-shadow: 0 0 .75rem rgb(var(--cyber-primary-rgb)/.18);
|
|
5856
|
+
background: none;
|
|
5857
|
+
border-radius: 50%;
|
|
5858
|
+
}
|
|
5859
|
+
|
|
5860
|
+
.cyber-button[aria-busy="true"]:after, .cyber-icon-button[aria-busy="true"]:after, [data-ui="cyberpunk"] :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="cyberpunk"]) .ui-button[aria-busy="true"]:after, :where([data-ui="cyberpunk"]) .ui-icon-button[aria-busy="true"]:after {
|
|
5861
|
+
border: .14em solid rgb(var(--cyber-primary-rgb)/.32);
|
|
5862
|
+
box-shadow: none;
|
|
5863
|
+
clip-path: none;
|
|
5864
|
+
background: none;
|
|
5865
|
+
border-block-start-color: currentColor;
|
|
5866
|
+
border-radius: 50%;
|
|
5867
|
+
animation: .75s linear infinite cyber-spin;
|
|
5868
|
+
}
|
|
5869
|
+
|
|
5870
|
+
.cyber-icon-medallion, .cyber-badge-seal {
|
|
5871
|
+
border: 1px solid var(--cyber-primary);
|
|
5872
|
+
box-shadow: 0 0 .75rem rgb(var(--cyber-primary-rgb)/.18);
|
|
5873
|
+
clip-path: polygon(24% 0, 76% 0, 100% 24%, 100% 76%, 76% 100%, 24% 100%, 0 76%, 0 24%);
|
|
5874
|
+
border-radius: .04rem;
|
|
5875
|
+
}
|
|
5876
|
+
|
|
5877
|
+
.cyber-feature-item > .cyber-icon-medallion {
|
|
5878
|
+
block-size: 2.75rem;
|
|
5879
|
+
inline-size: 2.75rem;
|
|
5880
|
+
font-size: 1.1rem;
|
|
5881
|
+
}
|
|
5882
|
+
|
|
5883
|
+
.cyber-callout-bar > .cyber-icon-medallion {
|
|
5884
|
+
min-block-size: 3.25rem;
|
|
5885
|
+
min-inline-size: 3.25rem;
|
|
5886
|
+
font-size: 1.35rem;
|
|
5887
|
+
}
|
|
5888
|
+
|
|
5889
|
+
.cyber-button.cyber-button-cut, .cyber-button-cut, .cyber-button.cyber-button-outline-heavy, .cyber-button-outline-heavy, :where([data-ui="cyberpunk"]) .ui-button.cyber-button-cut, :where([data-ui="cyberpunk"]) .ui-button.cyber-button-outline-heavy {
|
|
5890
|
+
clip-path: polygon(0 .5rem, .5rem 0, calc(100% - .75rem) 0, 100% .75rem, 100% calc(100% - .4375rem), calc(100% - .4375rem) 100%, 0 100%);
|
|
5891
|
+
border-width: 1px;
|
|
5892
|
+
}
|
|
5893
|
+
|
|
5894
|
+
[data-ui="cyberpunk"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
|
|
5895
|
+
min-block-size: 2.75rem;
|
|
5896
|
+
background-color: var(--cyber-primary);
|
|
5897
|
+
min-height: 2.75rem;
|
|
5898
|
+
color: var(--cyber-on-primary);
|
|
5899
|
+
border: 1px solid var(--cyber-primary);
|
|
5900
|
+
box-shadow: 0 0 .75rem rgb(var(--cyber-primary-rgb)/.18);
|
|
5901
|
+
clip-path: polygon(0 .5rem, .5rem 0, calc(100% - .75rem) 0, 100% .75rem, 100% calc(100% - .4375rem), calc(100% - .4375rem) 100%, 0 100%);
|
|
5902
|
+
background-image: none;
|
|
5903
|
+
border-radius: .04rem;
|
|
5904
|
+
}
|
|
5905
|
+
|
|
5906
|
+
[data-ui="cyberpunk"][data-mode] :where(input:not([type]):not([class]), input[type="text"]:not([class]), input[type="email"]:not([class]), input[type="search"]:not([class]), input[type="number"]:not([class]), input[type="date"]:not([class]), input[type="time"]:not([class]), textarea:not([class]), select:not([class])) {
|
|
5907
|
+
min-block-size: 2.75rem;
|
|
5908
|
+
background-color: rgb(var(--cyber-surface-soft-rgb)/var(--cyber-panel-soft-alpha));
|
|
5909
|
+
background-image: linear-gradient(135deg,rgb(var(--cyber-primary-rgb)/.1),transparent 58%);
|
|
5910
|
+
min-height: 2.75rem;
|
|
5911
|
+
color: var(--cyber-text);
|
|
5912
|
+
border: 1px solid var(--cyber-primary);
|
|
5913
|
+
box-shadow: inset .16rem 0 0 rgb(var(--cyber-primary-rgb)/.16);
|
|
5914
|
+
clip-path: polygon(0 .4375rem, .4375rem 0, 100% 0, 100% calc(100% - .4375rem), calc(100% - .4375rem) 100%, 0 100%);
|
|
5915
|
+
border-radius: .03rem;
|
|
5916
|
+
}
|
|
5917
|
+
|
|
5918
|
+
[data-ui="cyberpunk"][data-mode] :where(select:not([class])) {
|
|
5919
|
+
appearance: none;
|
|
5920
|
+
background-image: linear-gradient(135deg,rgb(var(--cyber-primary-rgb)/.1),transparent 58%),var(--usk-native-select-indicator-image);
|
|
5921
|
+
background-position: 0 0,var(--usk-native-select-indicator-position);
|
|
5922
|
+
background-repeat: no-repeat;
|
|
5923
|
+
background-size: auto,var(--usk-native-select-indicator-size);
|
|
5924
|
+
padding-inline-end: var(--usk-native-select-padding-inline-end);
|
|
5925
|
+
}
|
|
5926
|
+
|
|
5927
|
+
[data-ui="cyberpunk"][data-mode] :where(input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"]) {
|
|
5928
|
+
border-color: var(--cyber-danger);
|
|
5929
|
+
box-shadow: 0 0 0 2px rgb(var(--cyber-danger-rgb)/.2),inset .16rem 0 0 rgb(var(--cyber-danger-rgb)/.22);
|
|
5930
|
+
}
|
|
5931
|
+
|
|
5932
|
+
[data-ui="cyberpunk"][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]) {
|
|
5933
|
+
filter: saturate(.72);
|
|
5934
|
+
opacity: .78;
|
|
5935
|
+
border-style: dashed;
|
|
5936
|
+
}
|
|
5937
|
+
|
|
5938
|
+
[data-ui="cyberpunk"][data-mode] :where(input[type="checkbox"], input[type="radio"]) {
|
|
5939
|
+
inline-size: var(--usk-native-choice-size);
|
|
5940
|
+
block-size: var(--usk-native-choice-size);
|
|
5941
|
+
border: var(--usk-native-choice-border);
|
|
5942
|
+
box-shadow: var(--usk-native-choice-shadow);
|
|
5943
|
+
}
|
|
5944
|
+
|
|
5945
|
+
[data-ui="cyberpunk"][data-mode] :where(input[type="checkbox"]) {
|
|
5946
|
+
border-radius: var(--usk-native-checkbox-radius);
|
|
5947
|
+
}
|
|
5948
|
+
|
|
5949
|
+
[data-ui="cyberpunk"][data-mode] :where(input[type="radio"]) {
|
|
5950
|
+
border-radius: var(--usk-native-radio-radius);
|
|
5951
|
+
}
|
|
5952
|
+
|
|
5953
|
+
[data-ui="cyberpunk"][data-mode] :where(progress, meter) {
|
|
5954
|
+
min-block-size: var(--usk-native-progress-size);
|
|
5955
|
+
min-height: var(--usk-native-progress-size);
|
|
5956
|
+
block-size: var(--usk-native-progress-size);
|
|
5957
|
+
clip-path: polygon(0 .28rem, .28rem 0, 100% 0, 100% 100%, .28rem 100%, 0 calc(100% - .28rem));
|
|
5958
|
+
border-radius: .08rem;
|
|
5959
|
+
}
|
|
5960
|
+
|
|
5961
|
+
[data-ui="cyberpunk"][data-mode] :where(fieldset, dialog, details, article:not([class]), aside:not([class])) {
|
|
5962
|
+
background: var(--cyber-card-bg);
|
|
5963
|
+
color: var(--cyber-text);
|
|
5964
|
+
border: 1px solid var(--cyber-border);
|
|
5965
|
+
box-shadow: 0 .75rem 1.75rem rgb(0 0 0 / calc(var(--cyber-shadow-alpha)*.48)),0 0 .75rem rgb(var(--cyber-primary-rgb)/.1);
|
|
5966
|
+
clip-path: polygon(0 var(--cyber-cut-sm),var(--cyber-cut-sm)0,calc(100% - .875rem)0,100% .875rem,100% calc(100% - var(--cyber-cut-sm)),calc(100% - var(--cyber-cut-sm)) 100%,.75rem 100%,0 calc(100% - .75rem));
|
|
5967
|
+
border-radius: .08rem;
|
|
5968
|
+
}
|
|
5969
|
+
|
|
5970
|
+
.cyber-button, .cyber-icon-button, :where([data-ui="cyberpunk"]) .ui-button, :where([data-ui="cyberpunk"]) .ui-icon-button {
|
|
5971
|
+
border-radius: .04rem;
|
|
5972
|
+
}
|
|
5973
|
+
|
|
5974
|
+
[data-ui="cyberpunk"][data-mode] {
|
|
5975
|
+
--cyber-template-line: rgb(var(--cyber-border-rgb) / max(.44, var(--cyber-border-alpha)));
|
|
5976
|
+
--cyber-template-line-strong: rgb(var(--cyber-primary-rgb) / max(.72, var(--cyber-border-alpha)));
|
|
5977
|
+
--cyber-template-surface: rgb(var(--cyber-surface-rgb) / var(--cyber-panel-alpha));
|
|
5978
|
+
--cyber-template-surface-strong: rgb(var(--cyber-surface-strong-rgb) / var(--cyber-panel-strong-alpha));
|
|
5979
|
+
--cyber-template-surface-soft: rgb(var(--cyber-surface-soft-rgb) / var(--cyber-panel-soft-alpha));
|
|
5980
|
+
--cyber-template-hatch: linear-gradient(135deg, rgb(var(--cyber-primary-rgb) / .12) 0 1px, transparent 1px 8px);
|
|
5981
|
+
--cyber-template-signal-rail: linear-gradient(90deg, var(--cyber-primary) 0 58%, transparent 58% 82%, var(--cyber-danger) 82% 100%);
|
|
5982
|
+
--cyber-template-cut-sm: .4375rem;
|
|
5983
|
+
--cyber-template-cut-md: .75rem;
|
|
5984
|
+
--cyber-template-glow: 0 0 .85rem rgb(var(--cyber-primary-rgb) / .18);
|
|
5985
|
+
--cyber-template-danger-glow: 0 0 .85rem rgb(var(--cyber-danger-rgb) / .2);
|
|
5986
|
+
--cyber-template-warning-glow: 0 0 .85rem rgb(var(--cyber-warning-rgb) / .16);
|
|
5987
|
+
--cyber-template-focus-ring: 0 0 0 2px var(--cyber-bg), 0 0 0 4px var(--cyber-focus), 0 0 .85rem rgb(var(--cyber-focus-rgb) / .24);
|
|
5988
|
+
}
|
|
5989
|
+
|
|
5990
|
+
.cyber-overline, .cyber-section-title {
|
|
5991
|
+
color: var(--cyber-text);
|
|
5992
|
+
font-family: var(--cyber-font-mono);
|
|
5993
|
+
letter-spacing: .04em;
|
|
5994
|
+
text-transform: uppercase;
|
|
5995
|
+
font-weight: 900;
|
|
5996
|
+
}
|
|
5997
|
+
|
|
5998
|
+
.cyber-overline {
|
|
5999
|
+
min-block-size: 1.5rem;
|
|
6000
|
+
color: var(--usk-primary-ink, var(--cyber-primary));
|
|
6001
|
+
align-items: center;
|
|
6002
|
+
gap: .5rem;
|
|
6003
|
+
font-size: .6875rem;
|
|
6004
|
+
display: inline-flex;
|
|
6005
|
+
}
|
|
6006
|
+
|
|
6007
|
+
.cyber-overline:before {
|
|
6008
|
+
content: "";
|
|
6009
|
+
block-size: 1px;
|
|
6010
|
+
inline-size: 1.25rem;
|
|
6011
|
+
box-shadow: .5rem 0 0 rgb(var(--cyber-danger-rgb)/.78);
|
|
6012
|
+
background: currentColor;
|
|
6013
|
+
display: inline-block;
|
|
6014
|
+
}
|
|
6015
|
+
|
|
6016
|
+
.cyber-section-title {
|
|
6017
|
+
color: var(--cyber-text);
|
|
6018
|
+
align-items: center;
|
|
6019
|
+
gap: .75rem;
|
|
6020
|
+
margin: 0;
|
|
6021
|
+
padding-block: .25rem .35rem;
|
|
6022
|
+
font-size: clamp(1rem, 1rem + .35vw, 1.35rem);
|
|
6023
|
+
line-height: 1.12;
|
|
6024
|
+
display: flex;
|
|
6025
|
+
position: relative;
|
|
6026
|
+
}
|
|
6027
|
+
|
|
6028
|
+
.cyber-section-title:before {
|
|
6029
|
+
content: "";
|
|
6030
|
+
background: var(--cyber-primary);
|
|
6031
|
+
clip-path: polygon(0 32%, 32% 0, 100% 0, 100% 68%, 68% 100%, 0 100%);
|
|
6032
|
+
block-size: .85rem;
|
|
6033
|
+
inline-size: .85rem;
|
|
6034
|
+
box-shadow: 0 0 .65rem rgb(var(--cyber-primary-rgb)/.22);
|
|
6035
|
+
flex: 0 0 .85rem;
|
|
6036
|
+
}
|
|
6037
|
+
|
|
6038
|
+
.cyber-section-title:after {
|
|
6039
|
+
content: "";
|
|
6040
|
+
background: repeating-linear-gradient(90deg,rgb(var(--cyber-primary-rgb)/.56)0 .5rem,transparent .5rem .75rem);
|
|
6041
|
+
opacity: .72;
|
|
6042
|
+
flex: 4rem;
|
|
6043
|
+
block-size: .4rem;
|
|
6044
|
+
min-inline-size: 2rem;
|
|
6045
|
+
}
|
|
6046
|
+
|
|
6047
|
+
.cyber-panel, .cyber-card, .cyber-dropdown, .cyber-popover, .cyber-toast, .cyber-modal, :where([data-ui="cyberpunk"]) .ui-card {
|
|
6048
|
+
border: 1px solid var(--cyber-template-line);
|
|
6049
|
+
background: linear-gradient(135deg,rgb(var(--cyber-primary-rgb)/.1),transparent 22%) top left/4rem 4rem no-repeat,var(--cyber-template-surface);
|
|
6050
|
+
color: var(--cyber-text);
|
|
6051
|
+
box-shadow: 0 .9rem 2rem rgb(0 0 0 / calc(var(--cyber-shadow-alpha)*.62)),var(--cyber-template-glow);
|
|
6052
|
+
clip-path: polygon(0 var(--cyber-template-cut-md),var(--cyber-template-cut-md)0,calc(100% - 1rem)0,100% 1rem,100% calc(100% - var(--cyber-template-cut-md)),calc(100% - var(--cyber-template-cut-md)) 100%,.65rem 100%,0 calc(100% - .65rem));
|
|
6053
|
+
border-radius: .06rem;
|
|
6054
|
+
position: relative;
|
|
6055
|
+
}
|
|
6056
|
+
|
|
6057
|
+
.cyber-panel:before, .cyber-card:before, .cyber-dropdown:before, .cyber-popover:before, .cyber-toast:before, .cyber-modal:before, :where([data-ui="cyberpunk"]) .ui-card:before {
|
|
6058
|
+
content: "";
|
|
6059
|
+
background: var(--cyber-template-signal-rail);
|
|
6060
|
+
opacity: .78;
|
|
6061
|
+
pointer-events: none;
|
|
6062
|
+
block-size: 2px;
|
|
6063
|
+
position: absolute;
|
|
6064
|
+
inset-block-start: 0;
|
|
6065
|
+
inset-inline: .75rem 1rem;
|
|
6066
|
+
}
|
|
6067
|
+
|
|
6068
|
+
.cyber-button, .cyber-icon-button, :where([data-ui="cyberpunk"]) .ui-button, :where([data-ui="cyberpunk"]) .ui-icon-button {
|
|
6069
|
+
min-block-size: 36px;
|
|
6070
|
+
border: 1px solid var(--cyber-template-line-strong);
|
|
6071
|
+
background: linear-gradient(135deg,rgb(var(--cyber-primary-rgb)/.12),transparent 58%),var(--cyber-template-surface-strong);
|
|
6072
|
+
min-height: 36px;
|
|
6073
|
+
color: var(--cyber-text);
|
|
6074
|
+
box-shadow: inset .16rem 0 0 rgb(var(--cyber-primary-rgb)/.18);
|
|
6075
|
+
clip-path: polygon(0 .5rem, .5rem 0, calc(100% - .75rem) 0, 100% .75rem, 100% calc(100% - .4375rem), calc(100% - .4375rem) 100%, 0 100%);
|
|
6076
|
+
font-family: var(--cyber-font-control);
|
|
6077
|
+
letter-spacing: .035em;
|
|
6078
|
+
text-transform: uppercase;
|
|
6079
|
+
transition: background-color var(--cyber-transition-fast),border-color var(--cyber-transition-fast),box-shadow var(--cyber-transition-fast),color var(--cyber-transition-fast),transform var(--cyber-transition-fast);
|
|
6080
|
+
border-radius: .04rem;
|
|
6081
|
+
justify-content: center;
|
|
6082
|
+
align-items: center;
|
|
6083
|
+
gap: .5rem;
|
|
6084
|
+
padding: .46rem .875rem;
|
|
6085
|
+
font-size: .6875rem;
|
|
6086
|
+
font-weight: 800;
|
|
6087
|
+
line-height: 1;
|
|
6088
|
+
display: inline-flex;
|
|
6089
|
+
}
|
|
6090
|
+
|
|
6091
|
+
.cyber-icon-button, :where([data-ui="cyberpunk"]) .ui-icon-button {
|
|
6092
|
+
inline-size: 36px;
|
|
6093
|
+
min-inline-size: 36px;
|
|
6094
|
+
padding-inline: .45rem;
|
|
6095
|
+
}
|
|
6096
|
+
|
|
6097
|
+
.cyber-button:hover, .cyber-icon-button:hover, .cyber-button.is-hover, .cyber-icon-button.is-hover, :where([data-ui="cyberpunk"]) .ui-button:hover, :where([data-ui="cyberpunk"]) .ui-icon-button:hover, :where([data-ui="cyberpunk"]) .ui-button.is-hover, :where([data-ui="cyberpunk"]) .ui-icon-button.is-hover {
|
|
6098
|
+
border-color: var(--cyber-primary);
|
|
6099
|
+
box-shadow: inset .16rem 0 0 rgb(var(--cyber-primary-rgb)/.32),var(--cyber-template-glow);
|
|
6100
|
+
}
|
|
6101
|
+
|
|
6102
|
+
.cyber-button:active, .cyber-icon-button:active, .cyber-button.is-pressed, .cyber-icon-button.is-pressed, .cyber-button[aria-pressed="true"], .cyber-icon-button[aria-pressed="true"], :where([data-ui="cyberpunk"]) .ui-button:active, :where([data-ui="cyberpunk"]) .ui-icon-button:active, :where([data-ui="cyberpunk"]) .ui-button.is-pressed, :where([data-ui="cyberpunk"]) .ui-icon-button.is-pressed, :where([data-ui="cyberpunk"]) .ui-button[aria-pressed="true"], :where([data-ui="cyberpunk"]) .ui-icon-button[aria-pressed="true"] {
|
|
6103
|
+
box-shadow: inset 0 0 0 1px rgb(var(--cyber-primary-rgb)/.48);
|
|
6104
|
+
transform: translateY(1px);
|
|
6105
|
+
}
|
|
6106
|
+
|
|
6107
|
+
.cyber-button:focus-visible, .cyber-icon-button:focus-visible, .cyber-tab:focus-visible, .cyber-segment:focus-visible, .cyber-pagination-page:focus-visible, .cyber-choice:focus-within, .cyber-file:focus-within, :where([data-ui="cyberpunk"]) .ui-button:focus-visible, :where([data-ui="cyberpunk"]) .ui-icon-button:focus-visible {
|
|
6108
|
+
outline-offset: 2px;
|
|
6109
|
+
box-shadow: var(--cyber-template-focus-ring);
|
|
6110
|
+
outline: 2px solid #0000;
|
|
6111
|
+
}
|
|
6112
|
+
|
|
6113
|
+
.cyber-button:disabled, .cyber-icon-button:disabled, .cyber-button.is-disabled, .cyber-icon-button.is-disabled, :where([data-ui="cyberpunk"]) .ui-button:disabled, :where([data-ui="cyberpunk"]) .ui-icon-button:disabled, :where([data-ui="cyberpunk"]) .ui-button.is-disabled, :where([data-ui="cyberpunk"]) .ui-icon-button.is-disabled {
|
|
6114
|
+
opacity: .55;
|
|
6115
|
+
filter: grayscale(.25);
|
|
6116
|
+
cursor: not-allowed;
|
|
6117
|
+
box-shadow: inset .16rem 0 0 rgb(var(--cyber-border-rgb)/.24);
|
|
6118
|
+
transform: none;
|
|
6119
|
+
}
|
|
6120
|
+
|
|
6121
|
+
.cyber-button[aria-busy="true"], .cyber-button.is-loading, .cyber-icon-button[aria-busy="true"], .cyber-icon-button.is-loading, :where([data-ui="cyberpunk"]) .ui-button[aria-busy="true"], :where([data-ui="cyberpunk"]) .ui-button.is-loading, :where([data-ui="cyberpunk"]) .ui-icon-button[aria-busy="true"], :where([data-ui="cyberpunk"]) .ui-icon-button.is-loading {
|
|
6122
|
+
color: var(--cyber-loading-text, var(--cyber-text));
|
|
6123
|
+
pointer-events: none;
|
|
6124
|
+
position: relative;
|
|
6125
|
+
}
|
|
6126
|
+
|
|
6127
|
+
.cyber-button.is-loading:before, .cyber-icon-button.is-loading:before, :where([data-ui="cyberpunk"]) .ui-button.is-loading:before, :where([data-ui="cyberpunk"]) .ui-icon-button.is-loading:before {
|
|
6128
|
+
content: "";
|
|
6129
|
+
border: 2px solid rgb(var(--cyber-primary-rgb)/.32);
|
|
6130
|
+
border-block-start-color: var(--cyber-on-primary);
|
|
6131
|
+
border-radius: 50%;
|
|
6132
|
+
flex: none;
|
|
6133
|
+
block-size: .95rem;
|
|
6134
|
+
inline-size: .95rem;
|
|
6135
|
+
animation: .75s linear infinite cyber-spin;
|
|
6136
|
+
position: relative;
|
|
6137
|
+
}
|
|
6138
|
+
|
|
6139
|
+
.cyber-button-primary, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="primary"]) {
|
|
6140
|
+
--cyber-loading-text: var(--cyber-on-primary);
|
|
6141
|
+
border-color: var(--cyber-primary-action-color, var(--cyber-primary));
|
|
6142
|
+
background-color: var(--cyber-primary-action-color, var(--cyber-primary));
|
|
6143
|
+
color: var(--cyber-on-primary);
|
|
6144
|
+
box-shadow: 0 0 .85rem rgb(var(--cyber-primary-rgb)/.22);
|
|
6145
|
+
background-image: none;
|
|
6146
|
+
}
|
|
6147
|
+
|
|
6148
|
+
.cyber-button-primary:hover, .cyber-button-primary.is-hover, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="primary"]):hover, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="primary"]).is-hover {
|
|
6149
|
+
--cyber-primary-action-color: var(--cyber-primary-hover);
|
|
6150
|
+
}
|
|
6151
|
+
|
|
6152
|
+
.cyber-button-secondary, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="secondary"]) {
|
|
6153
|
+
border-color: var(--cyber-template-line);
|
|
6154
|
+
background-color: var(--cyber-template-surface-strong);
|
|
6155
|
+
background-image: linear-gradient(135deg,rgb(var(--cyber-secondary-rgb)/.28),transparent 60%);
|
|
6156
|
+
color: var(--cyber-text);
|
|
6157
|
+
}
|
|
6158
|
+
|
|
6159
|
+
.cyber-button-ghost, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="ghost"]) {
|
|
6160
|
+
color: var(--usk-primary-ink, var(--cyber-primary));
|
|
6161
|
+
box-shadow: none;
|
|
6162
|
+
background-color: #0000;
|
|
6163
|
+
background-image: none;
|
|
6164
|
+
border-color: #0000;
|
|
6165
|
+
}
|
|
6166
|
+
|
|
6167
|
+
.cyber-button-danger, :where([data-ui="cyberpunk"]) .ui-button:where([data-ui-variant="danger"]) {
|
|
6168
|
+
--cyber-loading-text: var(--cyber-danger);
|
|
6169
|
+
border-color: var(--cyber-danger);
|
|
6170
|
+
background-color: rgb(var(--cyber-danger-rgb)/.12);
|
|
6171
|
+
background-image: linear-gradient(135deg,rgb(var(--cyber-danger-rgb)/.16),transparent 62%);
|
|
6172
|
+
color: var(--cyber-danger);
|
|
6173
|
+
box-shadow: var(--cyber-template-danger-glow);
|
|
6174
|
+
}
|
|
6175
|
+
|
|
6176
|
+
[data-ui="cyberpunk"][data-mode][style*="--cyber-on-danger"] .cyber-button-danger, :where([data-ui="cyberpunk"])[data-mode][style*="--cyber-on-danger"] .ui-button:where([data-ui-variant="danger"]) {
|
|
6177
|
+
color: var(--cyber-on-danger);
|
|
6178
|
+
}
|
|
6179
|
+
|
|
6180
|
+
.cyber-input, .cyber-select, .cyber-textarea, .cyber-file, :where([data-ui="cyberpunk"]) .ui-input, :where([data-ui="cyberpunk"]) .ui-select, :where([data-ui="cyberpunk"]) .ui-textarea {
|
|
6181
|
+
width: 100%;
|
|
6182
|
+
min-block-size: 36px;
|
|
6183
|
+
border: 1px solid var(--cyber-field-border-color, var(--cyber-template-line));
|
|
6184
|
+
border-block-end-color: var(--cyber-field-border-end-color, var(--cyber-template-line-strong));
|
|
6185
|
+
background: linear-gradient(135deg,rgb(var(--cyber-primary-rgb)/.1),transparent 58%),var(--cyber-template-surface-soft);
|
|
6186
|
+
min-height: 36px;
|
|
6187
|
+
color: var(--cyber-text);
|
|
6188
|
+
box-shadow: inset .16rem 0 0 rgb(var(--cyber-primary-rgb)/.16);
|
|
6189
|
+
clip-path: polygon(0 .4375rem, .4375rem 0, 100% 0, 100% calc(100% - .4375rem), calc(100% - .4375rem) 100%, 0 100%);
|
|
6190
|
+
font: 700 .875rem/1.35 var(--cyber-font-body);
|
|
6191
|
+
border-radius: .03rem;
|
|
6192
|
+
padding: .5rem .75rem;
|
|
6193
|
+
}
|
|
6194
|
+
|
|
6195
|
+
.cyber-input:hover, .cyber-select:hover, .cyber-textarea:hover, .cyber-file:hover, .cyber-input.is-hover, .cyber-select.is-hover, .cyber-textarea.is-hover, .cyber-file.is-hover, :where([data-ui="cyberpunk"]) .ui-input:hover, :where([data-ui="cyberpunk"]) .ui-select:hover, :where([data-ui="cyberpunk"]) .ui-textarea:hover, :where([data-ui="cyberpunk"]) .ui-input.is-hover, :where([data-ui="cyberpunk"]) .ui-select.is-hover, :where([data-ui="cyberpunk"]) .ui-textarea.is-hover {
|
|
6196
|
+
--cyber-field-border-color: var(--cyber-template-line-strong);
|
|
6197
|
+
--cyber-field-border-end-color: var(--cyber-template-line-strong);
|
|
6198
|
+
}
|
|
6199
|
+
|
|
6200
|
+
[data-ui="cyberpunk"] .cyber-input:focus, [data-ui="cyberpunk"] .cyber-select:focus, [data-ui="cyberpunk"] .cyber-textarea:focus, [data-ui="cyberpunk"] .cyber-file:focus-within, [data-ui="cyberpunk"] .cyber-input.is-focus, [data-ui="cyberpunk"] .cyber-select.is-focus, [data-ui="cyberpunk"] .cyber-textarea.is-focus, [data-ui="cyberpunk"] .cyber-file.is-focus, :where([data-ui="cyberpunk"]) .ui-input:focus, :where([data-ui="cyberpunk"]) .ui-select:focus, :where([data-ui="cyberpunk"]) .ui-textarea:focus, :where([data-ui="cyberpunk"]) .ui-input.is-focus, :where([data-ui="cyberpunk"]) .ui-select.is-focus, :where([data-ui="cyberpunk"]) .ui-textarea.is-focus {
|
|
6201
|
+
--cyber-field-border-color: var(--cyber-primary);
|
|
6202
|
+
--cyber-field-border-end-color: var(--cyber-primary);
|
|
6203
|
+
outline-offset: 2px;
|
|
6204
|
+
box-shadow: var(--cyber-template-focus-ring);
|
|
6205
|
+
outline: 2px solid #0000;
|
|
6206
|
+
}
|
|
6207
|
+
|
|
6208
|
+
.cyber-input[aria-invalid="true"], .cyber-select[aria-invalid="true"], .cyber-textarea[aria-invalid="true"], .cyber-input.is-error, .cyber-select.is-error, .cyber-textarea.is-error, :where([data-ui="cyberpunk"]) .ui-input[aria-invalid="true"], :where([data-ui="cyberpunk"]) .ui-select[aria-invalid="true"], :where([data-ui="cyberpunk"]) .ui-textarea[aria-invalid="true"], :where([data-ui="cyberpunk"]) .ui-input.is-error, :where([data-ui="cyberpunk"]) .ui-select.is-error, :where([data-ui="cyberpunk"]) .ui-textarea.is-error {
|
|
6209
|
+
--cyber-field-border-color: var(--cyber-danger);
|
|
6210
|
+
--cyber-field-border-end-color: var(--cyber-danger);
|
|
6211
|
+
box-shadow: var(--cyber-template-danger-glow);
|
|
6212
|
+
}
|
|
6213
|
+
|
|
6214
|
+
.cyber-file {
|
|
6215
|
+
cursor: pointer;
|
|
6216
|
+
align-content: center;
|
|
6217
|
+
gap: .15rem;
|
|
6218
|
+
display: grid;
|
|
6219
|
+
}
|
|
6220
|
+
|
|
6221
|
+
.cyber-file strong, .cyber-file span {
|
|
6222
|
+
min-width: 0;
|
|
6223
|
+
display: block;
|
|
6224
|
+
}
|
|
6225
|
+
|
|
6226
|
+
.cyber-file span span {
|
|
6227
|
+
color: var(--cyber-text-muted);
|
|
6228
|
+
font-size: .74rem;
|
|
6229
|
+
}
|
|
6230
|
+
|
|
6231
|
+
.cyber-textarea, :where([data-ui="cyberpunk"]) .ui-textarea {
|
|
6232
|
+
resize: vertical;
|
|
6233
|
+
min-block-size: 5.5rem;
|
|
6234
|
+
}
|
|
6235
|
+
|
|
6236
|
+
.cyber-input-wrap {
|
|
6237
|
+
align-items: center;
|
|
6238
|
+
inline-size: 100%;
|
|
6239
|
+
display: flex;
|
|
6240
|
+
position: relative;
|
|
6241
|
+
}
|
|
6242
|
+
|
|
6243
|
+
.cyber-input-wrap .cyber-input, .cyber-input-wrap .cyber-select, :where([data-ui="cyberpunk"]) .cyber-input-wrap .ui-input, :where([data-ui="cyberpunk"]) .cyber-input-wrap .ui-select {
|
|
6244
|
+
padding-inline-end: 2.45rem;
|
|
6245
|
+
}
|
|
6246
|
+
|
|
6247
|
+
.cyber-input-icon {
|
|
6248
|
+
z-index: 1;
|
|
6249
|
+
block-size: 1.1rem;
|
|
6250
|
+
inline-size: 1.1rem;
|
|
6251
|
+
color: var(--usk-primary-ink, var(--cyber-primary));
|
|
6252
|
+
font-family: var(--cyber-font-mono);
|
|
6253
|
+
pointer-events: none;
|
|
6254
|
+
place-items: center;
|
|
6255
|
+
font-size: .8rem;
|
|
6256
|
+
display: inline-grid;
|
|
6257
|
+
position: absolute;
|
|
6258
|
+
inset-inline-end: .75rem;
|
|
6259
|
+
}
|
|
6260
|
+
|
|
6261
|
+
.cyber-helper, .cyber-error-text {
|
|
6262
|
+
font-family: var(--cyber-font-mono);
|
|
6263
|
+
align-items: flex-start;
|
|
6264
|
+
gap: .4rem;
|
|
6265
|
+
margin-block-start: .35rem;
|
|
6266
|
+
font-size: .72rem;
|
|
6267
|
+
font-weight: 800;
|
|
6268
|
+
line-height: 1.35;
|
|
6269
|
+
display: flex;
|
|
6270
|
+
}
|
|
6271
|
+
|
|
6272
|
+
.cyber-helper {
|
|
6273
|
+
color: var(--cyber-text-muted);
|
|
6274
|
+
}
|
|
6275
|
+
|
|
6276
|
+
.cyber-error-text {
|
|
6277
|
+
color: var(--cyber-danger);
|
|
6278
|
+
}
|
|
6279
|
+
|
|
6280
|
+
.cyber-error-text:before {
|
|
6281
|
+
content: "!";
|
|
6282
|
+
color: var(--cyber-danger);
|
|
6283
|
+
flex: none;
|
|
6284
|
+
}
|
|
6285
|
+
|
|
6286
|
+
.cyber-dropdown {
|
|
6287
|
+
gap: .25rem;
|
|
6288
|
+
padding: .5rem;
|
|
6289
|
+
display: grid;
|
|
6290
|
+
}
|
|
6291
|
+
|
|
6292
|
+
.cyber-option {
|
|
6293
|
+
appearance: none;
|
|
6294
|
+
min-block-size: 36px;
|
|
6295
|
+
color: var(--cyber-text);
|
|
6296
|
+
box-shadow: none;
|
|
6297
|
+
clip-path: polygon(0 .32rem, .32rem 0, 100% 0, 100% calc(100% - .32rem), calc(100% - .32rem) 100%, 0 100%);
|
|
6298
|
+
font-family: var(--cyber-font-mono);
|
|
6299
|
+
background: none;
|
|
6300
|
+
border: 1px solid #0000;
|
|
6301
|
+
justify-content: space-between;
|
|
6302
|
+
align-items: center;
|
|
6303
|
+
gap: .75rem;
|
|
6304
|
+
padding: .45rem .65rem;
|
|
6305
|
+
font-size: .75rem;
|
|
6306
|
+
font-weight: 800;
|
|
6307
|
+
display: flex;
|
|
6308
|
+
}
|
|
6309
|
+
|
|
6310
|
+
.cyber-option:is(:hover, :focus-visible), .cyber-option[aria-selected="true"], .cyber-option.is-active {
|
|
6311
|
+
border-color: var(--cyber-primary);
|
|
6312
|
+
background: rgb(var(--cyber-primary-rgb)/.14);
|
|
6313
|
+
color: var(--usk-primary-ink, var(--cyber-primary));
|
|
6314
|
+
outline: 0;
|
|
6315
|
+
}
|
|
6316
|
+
|
|
6317
|
+
.cyber-tags {
|
|
6318
|
+
flex-wrap: wrap;
|
|
6319
|
+
align-items: center;
|
|
6320
|
+
gap: .5rem;
|
|
6321
|
+
display: flex;
|
|
6322
|
+
}
|
|
6323
|
+
|
|
6324
|
+
.cyber-chip {
|
|
6325
|
+
background: rgb(var(--cyber-surface-soft-rgb)/var(--cyber-panel-soft-alpha));
|
|
6326
|
+
min-block-size: 1.75rem;
|
|
6327
|
+
color: var(--cyber-chip-color, var(--usk-primary-ink, var(--cyber-primary)));
|
|
6328
|
+
clip-path: polygon(0 .28rem, .28rem 0, calc(100% - .28rem) 0, 100% .28rem, 100% 100%, .28rem 100%, 0 calc(100% - .28rem));
|
|
6329
|
+
font-family: var(--cyber-font-mono);
|
|
6330
|
+
text-transform: uppercase;
|
|
6331
|
+
border: 1px solid;
|
|
6332
|
+
border-radius: .04rem;
|
|
6333
|
+
align-items: center;
|
|
6334
|
+
gap: .35rem;
|
|
6335
|
+
padding: .28rem .55rem;
|
|
6336
|
+
font-size: .68rem;
|
|
6337
|
+
font-weight: 900;
|
|
6338
|
+
line-height: 1;
|
|
6339
|
+
display: inline-flex;
|
|
6340
|
+
}
|
|
6341
|
+
|
|
6342
|
+
.cyber-choice {
|
|
6343
|
+
border: 1px solid var(--cyber-template-line);
|
|
6344
|
+
background: var(--cyber-template-surface);
|
|
6345
|
+
min-block-size: 44px;
|
|
6346
|
+
color: var(--cyber-text);
|
|
6347
|
+
clip-path: polygon(0 .42rem, .42rem 0, 100% 0, 100% calc(100% - .42rem), calc(100% - .42rem) 100%, 0 100%);
|
|
6348
|
+
border-radius: .04rem;
|
|
6349
|
+
align-items: flex-start;
|
|
6350
|
+
gap: .65rem;
|
|
6351
|
+
padding: .62rem .7rem;
|
|
6352
|
+
display: flex;
|
|
6353
|
+
}
|
|
6354
|
+
|
|
6355
|
+
.cyber-choice input {
|
|
6356
|
+
accent-color: var(--cyber-primary);
|
|
6357
|
+
margin-block-start: .15rem;
|
|
6358
|
+
}
|
|
6359
|
+
|
|
6360
|
+
.cyber-choice input[type="checkbox"], .cyber-choice input[type="radio"] {
|
|
6361
|
+
appearance: auto;
|
|
6362
|
+
block-size: 1rem;
|
|
6363
|
+
min-block-size: 1rem;
|
|
6364
|
+
inline-size: 1rem;
|
|
6365
|
+
box-shadow: none;
|
|
6366
|
+
clip-path: none;
|
|
6367
|
+
background: none;
|
|
6368
|
+
border: 0;
|
|
6369
|
+
flex: none;
|
|
6370
|
+
padding: 0;
|
|
6371
|
+
}
|
|
6372
|
+
|
|
6373
|
+
.cyber-choice strong, .cyber-choice span {
|
|
6374
|
+
display: block;
|
|
6375
|
+
}
|
|
6376
|
+
|
|
6377
|
+
.cyber-choice span {
|
|
6378
|
+
color: var(--cyber-text-muted);
|
|
6379
|
+
font-size: .78rem;
|
|
6380
|
+
line-height: 1.35;
|
|
6381
|
+
}
|
|
6382
|
+
|
|
6383
|
+
.cyber-switch, :where([data-ui="cyberpunk"]) .ui-switch {
|
|
6384
|
+
min-block-size: 44px;
|
|
6385
|
+
font-family: var(--cyber-font-mono);
|
|
6386
|
+
font-size: .75rem;
|
|
6387
|
+
font-weight: 800;
|
|
6388
|
+
}
|
|
6389
|
+
|
|
6390
|
+
.cyber-switch-track, :where([data-ui="cyberpunk"]) .ui-switch-track {
|
|
6391
|
+
border: 1px solid var(--cyber-template-line);
|
|
6392
|
+
background: var(--cyber-template-surface-soft);
|
|
6393
|
+
box-shadow: inset 0 0 0 1px rgb(var(--cyber-primary-rgb)/.12);
|
|
6394
|
+
clip-path: polygon(0 .35rem, .35rem 0, 100% 0, 100% calc(100% - .35rem), calc(100% - .35rem) 100%, 0 100%);
|
|
6395
|
+
border-radius: .12rem;
|
|
6396
|
+
}
|
|
6397
|
+
|
|
6398
|
+
.cyber-switch-thumb, :where([data-ui="cyberpunk"]) .ui-switch-thumb {
|
|
6399
|
+
background: var(--cyber-text-muted);
|
|
6400
|
+
border-color: var(--cyber-template-line);
|
|
6401
|
+
border-radius: .08rem;
|
|
6402
|
+
}
|
|
6403
|
+
|
|
6404
|
+
.cyber-switch:has(input:checked) .cyber-switch-track, :where([data-ui="cyberpunk"]) .ui-switch:has(input:checked) .ui-switch-track {
|
|
6405
|
+
background: var(--cyber-primary);
|
|
6406
|
+
border-color: var(--cyber-primary);
|
|
6407
|
+
box-shadow: 0 0 .75rem rgb(var(--cyber-primary-rgb)/.22);
|
|
6408
|
+
}
|
|
6409
|
+
|
|
6410
|
+
.cyber-switch:has(input:checked) .cyber-switch-thumb, :where([data-ui="cyberpunk"]) .ui-switch:has(input:checked) .ui-switch-thumb {
|
|
6411
|
+
background: var(--cyber-on-primary);
|
|
6412
|
+
border-color: var(--cyber-on-primary);
|
|
6413
|
+
}
|
|
6414
|
+
|
|
6415
|
+
.cyber-segmented {
|
|
6416
|
+
border: 1px solid var(--cyber-template-line);
|
|
6417
|
+
background: var(--cyber-template-surface-soft);
|
|
6418
|
+
clip-path: polygon(0 .45rem, .45rem 0, 100% 0, 100% calc(100% - .45rem), calc(100% - .45rem) 100%, 0 100%);
|
|
6419
|
+
flex-wrap: wrap;
|
|
6420
|
+
gap: .25rem;
|
|
6421
|
+
padding: .25rem;
|
|
6422
|
+
display: inline-flex;
|
|
6423
|
+
}
|
|
6424
|
+
|
|
6425
|
+
.cyber-segment {
|
|
6426
|
+
min-block-size: 36px;
|
|
6427
|
+
color: var(--cyber-text-muted);
|
|
6428
|
+
clip-path: polygon(0 .32rem, .32rem 0, 100% 0, 100% calc(100% - .32rem), calc(100% - .32rem) 100%, 0 100%);
|
|
6429
|
+
font-family: var(--cyber-font-mono);
|
|
6430
|
+
text-transform: uppercase;
|
|
6431
|
+
background: none;
|
|
6432
|
+
border: 1px solid #0000;
|
|
6433
|
+
padding: .45rem .75rem;
|
|
6434
|
+
font-size: .72rem;
|
|
6435
|
+
font-weight: 900;
|
|
6436
|
+
}
|
|
6437
|
+
|
|
6438
|
+
.cyber-segment[aria-pressed="true"], .cyber-segment.is-active {
|
|
6439
|
+
border-color: var(--cyber-primary);
|
|
6440
|
+
background: var(--cyber-primary);
|
|
6441
|
+
color: var(--cyber-on-primary);
|
|
6442
|
+
box-shadow: 0 0 .65rem rgb(var(--cyber-primary-rgb)/.22);
|
|
6443
|
+
}
|
|
6444
|
+
|
|
6445
|
+
.cyber-range {
|
|
6446
|
+
width: 100%;
|
|
6447
|
+
min-block-size: 36px;
|
|
6448
|
+
accent-color: var(--cyber-primary);
|
|
6449
|
+
background-image: linear-gradient(90deg,var(--cyber-success),var(--cyber-warning) 58%,var(--cyber-danger));
|
|
6450
|
+
background-position: center;
|
|
6451
|
+
background-repeat: no-repeat;
|
|
6452
|
+
background-size: 100% .5rem;
|
|
6453
|
+
}
|
|
6454
|
+
|
|
6455
|
+
.cyber-range-critical {
|
|
6456
|
+
accent-color: var(--cyber-danger);
|
|
6457
|
+
background-image: linear-gradient(90deg,var(--cyber-warning),var(--cyber-danger));
|
|
6458
|
+
}
|
|
6459
|
+
|
|
6460
|
+
.cyber-range::-webkit-slider-runnable-track {
|
|
6461
|
+
border: 1px solid var(--cyber-template-line);
|
|
6462
|
+
background: linear-gradient(90deg,var(--cyber-success),var(--cyber-warning) 58%,var(--cyber-danger));
|
|
6463
|
+
block-size: .5rem;
|
|
6464
|
+
box-shadow: var(--cyber-template-glow);
|
|
6465
|
+
border-radius: .08rem;
|
|
6466
|
+
}
|
|
6467
|
+
|
|
6468
|
+
.cyber-range-critical::-webkit-slider-runnable-track {
|
|
6469
|
+
background: linear-gradient(90deg,var(--cyber-warning),var(--cyber-danger));
|
|
6470
|
+
}
|
|
6471
|
+
|
|
6472
|
+
.cyber-range::-webkit-slider-thumb {
|
|
6473
|
+
border: 1px solid var(--cyber-template-line);
|
|
6474
|
+
background: var(--cyber-template-surface-strong);
|
|
6475
|
+
block-size: 1.25rem;
|
|
6476
|
+
inline-size: 1.25rem;
|
|
6477
|
+
box-shadow: 0 0 .6rem rgb(var(--cyber-primary-rgb)/.22);
|
|
6478
|
+
clip-path: polygon(0 .28rem, .28rem 0, 100% 0, 100% calc(100% - .28rem), calc(100% - .28rem) 100%, 0 100%);
|
|
6479
|
+
border-radius: .08rem;
|
|
6480
|
+
margin-block-start: -.45rem;
|
|
6481
|
+
}
|
|
6482
|
+
|
|
6483
|
+
.cyber-range::-moz-range-track {
|
|
6484
|
+
border: 1px solid var(--cyber-template-line);
|
|
6485
|
+
background: linear-gradient(90deg,var(--cyber-success),var(--cyber-warning) 58%,var(--cyber-danger));
|
|
6486
|
+
block-size: .5rem;
|
|
6487
|
+
box-shadow: var(--cyber-template-glow);
|
|
6488
|
+
border-radius: .08rem;
|
|
6489
|
+
}
|
|
6490
|
+
|
|
6491
|
+
.cyber-range-critical::-moz-range-track {
|
|
6492
|
+
background: linear-gradient(90deg,var(--cyber-warning),var(--cyber-danger));
|
|
6493
|
+
}
|
|
6494
|
+
|
|
6495
|
+
.cyber-range::-moz-range-thumb {
|
|
6496
|
+
border: 1px solid var(--cyber-template-line);
|
|
6497
|
+
background: var(--cyber-template-surface-strong);
|
|
6498
|
+
block-size: 1.25rem;
|
|
6499
|
+
inline-size: 1.25rem;
|
|
6500
|
+
box-shadow: 0 0 .6rem rgb(var(--cyber-primary-rgb)/.22);
|
|
6501
|
+
clip-path: polygon(0 .28rem, .28rem 0, 100% 0, 100% calc(100% - .28rem), calc(100% - .28rem) 100%, 0 100%);
|
|
6502
|
+
border-radius: .08rem;
|
|
6503
|
+
}
|
|
6504
|
+
|
|
6505
|
+
.cyber-progress-magenta .cyber-progress-bar, .cyber-progress-bar.cyber-progress-magenta, :where([data-ui="cyberpunk"]) .cyber-progress-magenta .ui-progress-bar, :where([data-ui="cyberpunk"]) .ui-progress-bar.cyber-progress-magenta {
|
|
6506
|
+
background: repeating-linear-gradient(110deg,var(--cyber-danger)0 .58rem,var(--cyber-accent) .58rem .72rem);
|
|
6507
|
+
box-shadow: 0 0 .6rem rgb(var(--cyber-danger-rgb)/.22);
|
|
6508
|
+
}
|
|
6509
|
+
|
|
6510
|
+
.cyber-meter {
|
|
6511
|
+
border: 1px solid var(--cyber-template-line);
|
|
6512
|
+
background: linear-gradient(90deg,var(--cyber-success)0 46%,var(--cyber-warning) 46% 72%,var(--cyber-danger) 72% 100%),var(--cyber-template-surface-soft);
|
|
6513
|
+
block-size: .85rem;
|
|
6514
|
+
min-block-size: .85rem;
|
|
6515
|
+
box-shadow: inset .16rem 0 0 rgb(var(--cyber-primary-rgb)/.16);
|
|
6516
|
+
clip-path: polygon(0 .28rem, .28rem 0, 100% 0, 100% 100%, .28rem 100%, 0 calc(100% - .28rem));
|
|
6517
|
+
border-radius: .08rem;
|
|
6518
|
+
position: relative;
|
|
6519
|
+
}
|
|
6520
|
+
|
|
6521
|
+
.cyber-meter:after {
|
|
6522
|
+
content: "";
|
|
6523
|
+
background: var(--cyber-text);
|
|
6524
|
+
inline-size: 2px;
|
|
6525
|
+
box-shadow: 0 0 .5rem rgb(var(--cyber-text-rgb)/.35);
|
|
6526
|
+
position: absolute;
|
|
6527
|
+
inset-block: 0;
|
|
6528
|
+
inset-inline-start: var(--cyber-meter-value, 68%);
|
|
6529
|
+
}
|
|
6530
|
+
|
|
6531
|
+
.cyber-stepper {
|
|
6532
|
+
border: 1px solid var(--cyber-template-line);
|
|
6533
|
+
background: var(--cyber-template-surface);
|
|
6534
|
+
clip-path: polygon(0 .5rem, .5rem 0, 100% 0, 100% calc(100% - .5rem), calc(100% - .5rem) 100%, 0 100%);
|
|
6535
|
+
justify-content: space-between;
|
|
6536
|
+
align-items: flex-start;
|
|
6537
|
+
gap: .5rem;
|
|
6538
|
+
padding: .75rem;
|
|
6539
|
+
list-style: none;
|
|
6540
|
+
display: flex;
|
|
6541
|
+
position: relative;
|
|
6542
|
+
}
|
|
6543
|
+
|
|
6544
|
+
.cyber-stepper:before {
|
|
6545
|
+
content: "";
|
|
6546
|
+
background: linear-gradient(90deg,var(--cyber-primary),var(--cyber-template-line-strong));
|
|
6547
|
+
block-size: 1px;
|
|
6548
|
+
position: absolute;
|
|
6549
|
+
inset-block-start: 1.625rem;
|
|
6550
|
+
inset-inline: 1.625rem;
|
|
6551
|
+
}
|
|
6552
|
+
|
|
6553
|
+
.cyber-step {
|
|
6554
|
+
z-index: 1;
|
|
6555
|
+
color: var(--cyber-text-muted);
|
|
6556
|
+
text-align: center;
|
|
6557
|
+
flex: 1 1 0;
|
|
6558
|
+
place-items: start center;
|
|
6559
|
+
gap: .6rem;
|
|
6560
|
+
display: grid;
|
|
6561
|
+
position: relative;
|
|
6562
|
+
}
|
|
6563
|
+
|
|
6564
|
+
.cyber-step:before {
|
|
6565
|
+
content: attr(data-step);
|
|
6566
|
+
border: 1px solid var(--cyber-template-line);
|
|
6567
|
+
background: var(--cyber-template-surface-soft);
|
|
6568
|
+
block-size: 1.75rem;
|
|
6569
|
+
inline-size: 1.75rem;
|
|
6570
|
+
color: var(--cyber-text);
|
|
6571
|
+
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
|
|
6572
|
+
font-family: var(--cyber-font-mono);
|
|
6573
|
+
place-items: center;
|
|
6574
|
+
font-size: .68rem;
|
|
6575
|
+
font-weight: 900;
|
|
6576
|
+
display: inline-grid;
|
|
6577
|
+
}
|
|
6578
|
+
|
|
6579
|
+
.cyber-step.is-active {
|
|
6580
|
+
color: var(--cyber-text);
|
|
6581
|
+
}
|
|
6582
|
+
|
|
6583
|
+
.cyber-step > span {
|
|
6584
|
+
justify-items: center;
|
|
6585
|
+
gap: .15rem;
|
|
6586
|
+
min-width: 0;
|
|
6587
|
+
display: grid;
|
|
6588
|
+
}
|
|
6589
|
+
|
|
6590
|
+
.cyber-step strong, .cyber-step .cyber-text-muted {
|
|
6591
|
+
display: block;
|
|
6592
|
+
}
|
|
6593
|
+
|
|
6594
|
+
.cyber-step.is-active:before {
|
|
6595
|
+
border-color: var(--cyber-primary);
|
|
6596
|
+
background: var(--cyber-primary);
|
|
6597
|
+
color: var(--cyber-on-primary);
|
|
6598
|
+
}
|
|
6599
|
+
|
|
6600
|
+
.cyber-toast {
|
|
6601
|
+
border-color: var(--cyber-primary);
|
|
6602
|
+
max-inline-size: 26rem;
|
|
6603
|
+
box-shadow: var(--cyber-template-glow);
|
|
6604
|
+
gap: .35rem;
|
|
6605
|
+
padding: .8rem .9rem;
|
|
6606
|
+
display: grid;
|
|
6607
|
+
}
|
|
6608
|
+
|
|
6609
|
+
.cyber-skeleton {
|
|
6610
|
+
border: 1px solid rgb(var(--cyber-border-rgb)/.42);
|
|
6611
|
+
background: linear-gradient(90deg,transparent,rgb(var(--cyber-primary-rgb)/.16),transparent),var(--cyber-template-surface-soft);
|
|
6612
|
+
clip-path: polygon(0 .3rem, .3rem 0, 100% 0, 100% calc(100% - .3rem), calc(100% - .3rem) 100%, 0 100%);
|
|
6613
|
+
background-size: 12rem 100%, auto;
|
|
6614
|
+
border-radius: .04rem;
|
|
6615
|
+
min-block-size: 1rem;
|
|
6616
|
+
inline-size: 100%;
|
|
6617
|
+
animation: 1.35s linear infinite cyber-skeleton-scan;
|
|
6618
|
+
display: block;
|
|
6619
|
+
}
|
|
6620
|
+
|
|
6621
|
+
.cyber-breadcrumb, .cyber-tabs, .cyber-pagination {
|
|
6622
|
+
flex-wrap: wrap;
|
|
6623
|
+
align-items: center;
|
|
6624
|
+
gap: .4rem;
|
|
6625
|
+
display: flex;
|
|
6626
|
+
}
|
|
6627
|
+
|
|
6628
|
+
.cyber-breadcrumb {
|
|
6629
|
+
color: var(--cyber-text-muted);
|
|
6630
|
+
font-family: var(--cyber-font-mono);
|
|
6631
|
+
font-size: .72rem;
|
|
6632
|
+
font-weight: 800;
|
|
6633
|
+
}
|
|
6634
|
+
|
|
6635
|
+
.cyber-breadcrumb a {
|
|
6636
|
+
color: var(--usk-primary-ink, var(--cyber-primary));
|
|
6637
|
+
}
|
|
6638
|
+
|
|
6639
|
+
.cyber-breadcrumb span + span:before, .cyber-breadcrumb a + span:before, .cyber-breadcrumb a + a:before, .cyber-breadcrumb span + a:before {
|
|
6640
|
+
content: "/";
|
|
6641
|
+
color: var(--cyber-danger);
|
|
6642
|
+
margin-inline: .15rem .45rem;
|
|
6643
|
+
}
|
|
6644
|
+
|
|
6645
|
+
.cyber-tabs, .cyber-pagination {
|
|
6646
|
+
border: 1px solid var(--cyber-template-line);
|
|
6647
|
+
background: var(--cyber-template-surface-soft);
|
|
6648
|
+
clip-path: polygon(0 .45rem, .45rem 0, 100% 0, 100% calc(100% - .45rem), calc(100% - .45rem) 100%, 0 100%);
|
|
6649
|
+
padding: .3rem;
|
|
6650
|
+
}
|
|
6651
|
+
|
|
6652
|
+
.cyber-tab, .cyber-pagination-page {
|
|
6653
|
+
min-block-size: 36px;
|
|
6654
|
+
min-inline-size: 36px;
|
|
6655
|
+
color: var(--cyber-text-muted);
|
|
6656
|
+
clip-path: polygon(0 .32rem, .32rem 0, 100% 0, 100% calc(100% - .32rem), calc(100% - .32rem) 100%, 0 100%);
|
|
6657
|
+
font-family: var(--cyber-font-mono);
|
|
6658
|
+
text-transform: uppercase;
|
|
6659
|
+
background: none;
|
|
6660
|
+
border: 1px solid #0000;
|
|
6661
|
+
justify-content: center;
|
|
6662
|
+
align-items: center;
|
|
6663
|
+
padding: .45rem .7rem;
|
|
6664
|
+
font-size: .72rem;
|
|
6665
|
+
font-weight: 900;
|
|
6666
|
+
text-decoration: none;
|
|
6667
|
+
display: inline-flex;
|
|
6668
|
+
}
|
|
6669
|
+
|
|
6670
|
+
.cyber-tab[aria-selected="true"], .cyber-tab.is-active, .cyber-pagination-page[aria-current="page"], .cyber-pagination-page.is-active {
|
|
6671
|
+
border-color: var(--cyber-primary);
|
|
6672
|
+
background: var(--cyber-primary);
|
|
6673
|
+
color: var(--cyber-on-primary);
|
|
6674
|
+
box-shadow: 0 0 .65rem rgb(var(--cyber-primary-rgb)/.2);
|
|
6675
|
+
}
|
|
6676
|
+
|
|
6677
|
+
.cyber-avatar-group {
|
|
6678
|
+
align-items: center;
|
|
6679
|
+
padding-inline-start: .35rem;
|
|
6680
|
+
display: flex;
|
|
6681
|
+
}
|
|
6682
|
+
|
|
6683
|
+
.cyber-avatar {
|
|
6684
|
+
border: 1px solid var(--cyber-template-line-strong);
|
|
6685
|
+
background: linear-gradient(135deg,rgb(var(--cyber-primary-rgb)/.24),rgb(var(--cyber-danger-rgb)/.18)),var(--cyber-template-surface-strong);
|
|
6686
|
+
block-size: 2.25rem;
|
|
6687
|
+
inline-size: 2.25rem;
|
|
6688
|
+
color: var(--cyber-text);
|
|
6689
|
+
clip-path: polygon(0 .45rem, .45rem 0, 100% 0, 100% calc(100% - .45rem), calc(100% - .45rem) 100%, 0 100%);
|
|
6690
|
+
font-family: var(--cyber-font-mono);
|
|
6691
|
+
place-items: center;
|
|
6692
|
+
font-size: .72rem;
|
|
6693
|
+
font-weight: 900;
|
|
6694
|
+
display: inline-grid;
|
|
6695
|
+
}
|
|
6696
|
+
|
|
6697
|
+
.cyber-avatar-group .cyber-avatar + .cyber-avatar {
|
|
6698
|
+
margin-inline-start: -.45rem;
|
|
6699
|
+
}
|
|
6700
|
+
|
|
6701
|
+
.cyber-list {
|
|
6702
|
+
gap: .5rem;
|
|
6703
|
+
margin: 0;
|
|
6704
|
+
padding: 0;
|
|
6705
|
+
list-style: none;
|
|
6706
|
+
display: grid;
|
|
6707
|
+
}
|
|
6708
|
+
|
|
6709
|
+
.cyber-list li {
|
|
6710
|
+
border: 1px solid var(--cyber-template-line);
|
|
6711
|
+
background: var(--cyber-template-surface-soft);
|
|
6712
|
+
clip-path: polygon(0 .35rem, .35rem 0, 100% 0, 100% calc(100% - .35rem), calc(100% - .35rem) 100%, 0 100%);
|
|
6713
|
+
align-items: start;
|
|
6714
|
+
gap: .6rem;
|
|
6715
|
+
min-block-size: 36px;
|
|
6716
|
+
padding: .5rem .65rem;
|
|
6717
|
+
display: flex;
|
|
6718
|
+
}
|
|
6719
|
+
|
|
6720
|
+
.cyber-list li:before {
|
|
6721
|
+
content: "";
|
|
6722
|
+
background: var(--cyber-primary);
|
|
6723
|
+
clip-path: polygon(0 35%, 35% 0, 100% 0, 100% 65%, 65% 100%, 0 100%);
|
|
6724
|
+
block-size: .55rem;
|
|
6725
|
+
inline-size: .55rem;
|
|
6726
|
+
margin-block-start: .3rem;
|
|
6727
|
+
}
|
|
6728
|
+
|
|
6729
|
+
.cyber-popover {
|
|
6730
|
+
max-inline-size: 18rem;
|
|
6731
|
+
padding: .85rem;
|
|
6732
|
+
}
|
|
6733
|
+
|
|
6734
|
+
.cyber-modal {
|
|
6735
|
+
max-inline-size: 34rem;
|
|
6736
|
+
padding: 1rem;
|
|
6737
|
+
}
|
|
6738
|
+
|
|
6739
|
+
.cyber-modal-actions {
|
|
6740
|
+
flex-wrap: wrap;
|
|
6741
|
+
justify-content: flex-end;
|
|
6742
|
+
gap: .5rem;
|
|
6743
|
+
margin-block-start: 1rem;
|
|
6744
|
+
display: flex;
|
|
6745
|
+
}
|
|
6746
|
+
|
|
6747
|
+
.cyber-accordion {
|
|
6748
|
+
border: 1px solid var(--cyber-template-line);
|
|
6749
|
+
background: var(--cyber-template-surface);
|
|
6750
|
+
clip-path: polygon(0 .5rem, .5rem 0, 100% 0, 100% calc(100% - .5rem), calc(100% - .5rem) 100%, 0 100%);
|
|
6751
|
+
display: grid;
|
|
6752
|
+
}
|
|
6753
|
+
|
|
6754
|
+
.cyber-accordion summary {
|
|
6755
|
+
min-block-size: 44px;
|
|
6756
|
+
color: var(--cyber-text);
|
|
6757
|
+
cursor: pointer;
|
|
6758
|
+
font-family: var(--cyber-font-mono);
|
|
6759
|
+
text-transform: uppercase;
|
|
6760
|
+
padding: .75rem .85rem;
|
|
6761
|
+
font-size: .78rem;
|
|
6762
|
+
font-weight: 900;
|
|
6763
|
+
}
|
|
6764
|
+
|
|
6765
|
+
.cyber-accordion summary:focus-visible {
|
|
6766
|
+
outline-offset: 2px;
|
|
6767
|
+
box-shadow: var(--cyber-template-focus-ring);
|
|
6768
|
+
outline: 2px solid #0000;
|
|
6769
|
+
}
|
|
6770
|
+
|
|
6771
|
+
.cyber-accordion > div {
|
|
6772
|
+
color: var(--cyber-text-muted);
|
|
6773
|
+
padding: 0 .85rem .85rem;
|
|
6774
|
+
}
|
|
6775
|
+
|
|
6776
|
+
.cyber-code {
|
|
6777
|
+
border: 1px solid var(--cyber-template-line);
|
|
6778
|
+
background: linear-gradient(90deg,rgb(var(--cyber-primary-rgb)/.12) 1px,transparent 1px),var(--cyber-template-surface-strong);
|
|
6779
|
+
color: var(--cyber-text);
|
|
6780
|
+
clip-path: polygon(0 .45rem, .45rem 0, 100% 0, 100% calc(100% - .45rem), calc(100% - .45rem) 100%, 0 100%);
|
|
6781
|
+
font-family: var(--cyber-font-mono);
|
|
6782
|
+
white-space: pre-wrap;
|
|
6783
|
+
background-size: .75rem .75rem, auto;
|
|
6784
|
+
margin: 0;
|
|
6785
|
+
padding: .85rem;
|
|
6786
|
+
font-size: .78rem;
|
|
6787
|
+
line-height: 1.55;
|
|
6788
|
+
display: block;
|
|
6789
|
+
overflow: auto;
|
|
6790
|
+
}
|
|
6791
|
+
|
|
6792
|
+
.cyber-code .token-key {
|
|
6793
|
+
color: var(--usk-primary-ink, var(--cyber-primary));
|
|
6794
|
+
}
|
|
6795
|
+
|
|
6796
|
+
.cyber-code .token-value {
|
|
6797
|
+
color: var(--cyber-warning);
|
|
6798
|
+
}
|
|
6799
|
+
|
|
6800
|
+
.cyber-quote {
|
|
6801
|
+
border-inline-start: .25rem solid var(--cyber-danger);
|
|
6802
|
+
background: linear-gradient(135deg,rgb(var(--cyber-danger-rgb)/.1),transparent 56%),var(--cyber-template-surface);
|
|
6803
|
+
color: var(--cyber-text);
|
|
6804
|
+
clip-path: polygon(0 .45rem, .45rem 0, 100% 0, 100% calc(100% - .45rem), calc(100% - .45rem) 100%, 0 100%);
|
|
6805
|
+
font-family: var(--cyber-font-body);
|
|
6806
|
+
margin: 0;
|
|
6807
|
+
padding: .85rem 1rem;
|
|
6808
|
+
}
|
|
6809
|
+
|
|
6810
|
+
.cyber-token-swatch {
|
|
6811
|
+
border: 1px solid var(--cyber-template-line);
|
|
6812
|
+
background: var(--cyber-template-surface);
|
|
6813
|
+
min-block-size: 3rem;
|
|
6814
|
+
color: var(--cyber-text);
|
|
6815
|
+
clip-path: polygon(0 .45rem, .45rem 0, 100% 0, 100% calc(100% - .45rem), calc(100% - .45rem) 100%, 0 100%);
|
|
6816
|
+
grid-template-columns: 2.5rem minmax(0, 1fr);
|
|
6817
|
+
align-items: center;
|
|
6818
|
+
gap: .65rem;
|
|
6819
|
+
padding: .45rem;
|
|
6820
|
+
display: grid;
|
|
6821
|
+
}
|
|
6822
|
+
|
|
6823
|
+
.cyber-token-swatch i {
|
|
6824
|
+
border: 1px solid var(--cyber-template-line);
|
|
6825
|
+
background: linear-gradient(135deg,var(--cyber-token-swatch-color, var(--cyber-primary)),rgb(var(--cyber-surface-strong-rgb)/.2)),var(--cyber-template-hatch);
|
|
6826
|
+
clip-path: polygon(0 .45rem, .45rem 0, 100% 0, 100% calc(100% - .45rem), calc(100% - .45rem) 100%, 0 100%);
|
|
6827
|
+
block-size: 2.15rem;
|
|
6828
|
+
inline-size: 2.15rem;
|
|
6829
|
+
display: block;
|
|
6830
|
+
}
|
|
6831
|
+
|
|
6832
|
+
.cyber-token-swatch strong, .cyber-token-swatch span {
|
|
6833
|
+
min-width: 0;
|
|
6834
|
+
display: block;
|
|
6835
|
+
}
|
|
6836
|
+
|
|
6837
|
+
.cyber-token-swatch span {
|
|
6838
|
+
color: var(--cyber-text-muted);
|
|
6839
|
+
font-family: var(--cyber-font-mono);
|
|
6840
|
+
overflow-wrap: break-word;
|
|
6841
|
+
font-size: .7rem;
|
|
6842
|
+
}
|
|
6843
|
+
|
|
6844
|
+
@keyframes cyber-skeleton-scan {
|
|
6845
|
+
from {
|
|
6846
|
+
background-position: -12rem 0, 0 0;
|
|
6847
|
+
}
|
|
6848
|
+
|
|
6849
|
+
to {
|
|
6850
|
+
background-position: 12rem 0, 0 0;
|
|
6851
|
+
}
|
|
6852
|
+
}
|
|
6853
|
+
|
|
6854
|
+
@media (prefers-reduced-motion: reduce) {
|
|
6855
|
+
.cyber-skeleton {
|
|
6856
|
+
animation: none;
|
|
6857
|
+
}
|
|
6858
|
+
}
|
|
6859
|
+
|
|
6860
|
+
[data-ui="cyberpunk"][data-mode] .cyber-button.cyber-button-warning, :where([data-ui="cyberpunk"])[data-mode] .ui-button.ui-button:where([data-ui-variant="warning"]) {
|
|
6861
|
+
background: var(--cyber-warning);
|
|
6862
|
+
color: var(--cyber-on-warning);
|
|
6863
|
+
border-color: var(--cyber-warning);
|
|
6864
|
+
text-shadow: none;
|
|
6865
|
+
}
|
|
6866
|
+
}
|
|
6867
|
+
|
|
6868
|
+
[data-ui="cyberpunk"][data-mode] .cyber-title {
|
|
6869
|
+
letter-spacing: max(.08em, .5px);
|
|
6870
|
+
margin-block: max(.75rem, 12px);
|
|
6871
|
+
}
|
|
6872
|
+
|
|
6873
|
+
[data-ui="cyberpunk"][data-mode] .cyber-feature-item > .cyber-icon-medallion {
|
|
6874
|
+
font-size: 1.5rem;
|
|
6875
|
+
line-height: 1;
|
|
6876
|
+
}
|
|
6877
|
+
|
|
6878
|
+
[data-ui="cyberpunk"][data-mode] .cyber-callout-bar > .cyber-icon-medallion {
|
|
6879
|
+
min-block-size: 4.5rem;
|
|
6880
|
+
min-inline-size: 4.5rem;
|
|
6881
|
+
font-size: 2rem;
|
|
6882
|
+
font-weight: 800;
|
|
6883
|
+
line-height: 1;
|
|
4503
6884
|
}
|