ui-style-kit-css 2.3.0 → 2.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +40 -2
- package/CONTRIBUTING.md +8 -1
- package/README.md +91 -42
- package/STYLE-MAP.md +9 -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 +47483 -15117
- package/dist/ui-style-kit.min.css +2 -2
- package/dist/ui-style-kit.visual.css +47344 -15106
- package/dist/ui-style-kit.visual.min.css +2 -2
- package/dist/ui-style-kit.with-bridge.css +47510 -15134
- package/dist/ui-style-kit.with-bridge.min.css +2 -2
- package/dist/visual/art-deco.css +2821 -279
- package/dist/visual/bauhaus.css +2 -4692
- package/dist/visual/bento.css +2 -4708
- package/dist/visual/brutalism.css +812 -224
- package/dist/visual/clay.css +2 -4786
- package/dist/visual/cyberpunk.css +2238 -267
- package/dist/visual/data-terminal.css +1671 -293
- package/dist/visual/editorial-luxe.css +1889 -243
- package/dist/visual/industrial-utility.css +2717 -255
- package/dist/visual/maximalist.css +1768 -447
- package/dist/visual/minimal-saas.css +1076 -382
- package/dist/visual/neo-noir.css +2 -4787
- package/dist/visual/neumorphism.css +1266 -388
- package/dist/visual/organic-modern.css +2 -4764
- package/dist/visual/paper-editorial.css +2551 -276
- package/dist/visual/retro-glass.css +2235 -319
- package/dist/visual/retrofuturism.css +1460 -382
- package/dist/visual/tactile.css +2251 -443
- package/dist/visual/technical-blueprint.css +2207 -285
- package/dist/visual/y2k.css +1481 -294
- 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/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/RETRO-GLASS.md +105 -0
- package/docs/STYLE-GUIDE.md +40 -25
- 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 +618 -27
- package/package.json +18 -10
- package/styles/art-deco.css +1397 -12
- 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 +878 -107
- package/styles/bento.css +1176 -108
- package/styles/brutalism.css +262 -11
- package/styles/clay.css +1303 -68
- package/styles/compat-layout.css +1 -2
- package/styles/components.css +105 -34
- package/styles/content-overflow.css +11 -5
- package/styles/cyberpunk.css +1852 -47
- package/styles/data-terminal.css +1116 -12
- package/styles/editorial-luxe.css +576 -12
- package/styles/industrial-utility.css +1771 -12
- package/styles/interactive-surface-bridge.css +30 -20
- package/styles/interactive-surface-theme.css +21 -11
- package/styles/maximalist.css +1214 -132
- package/styles/minimal-saas.css +459 -88
- package/styles/native-elements.css +347 -171
- package/styles/neo-noir.css +656 -14
- package/styles/neumorphism.css +1018 -146
- package/styles/organic-modern.css +688 -18
- package/styles/paper-editorial.css +1048 -12
- package/styles/retro-glass.css +635 -46
- package/styles/retrofuturism.css +944 -56
- package/styles/tactile.css +1810 -108
- package/styles/technical-blueprint.css +668 -17
- package/styles/theme-colors.css +2 -2
- package/styles/y2k.css +950 -42
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* UI Style Kit CSS v2.
|
|
2
|
+
* UI Style Kit CSS v2.4.0
|
|
3
3
|
* CSS theme and UI style preset library.
|
|
4
4
|
* License: MIT
|
|
5
5
|
*/
|
|
@@ -14,12 +14,12 @@
|
|
|
14
14
|
|
|
15
15
|
@layer ui-style-kit.theme_colors {
|
|
16
16
|
/* Shared RGB roles keep visual presets focused on layout, texture, and component treatment. */
|
|
17
|
-
:where([data-ui][data-
|
|
17
|
+
:where([data-ui][data-mode="light"]) {
|
|
18
18
|
--usk-border-text-mix: 45%;
|
|
19
19
|
--usk-border-min-alpha: 1;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
:where([data-ui][data-
|
|
22
|
+
:where([data-ui][data-mode="dark"], [data-ui][data-mode="contrast"]) {
|
|
23
23
|
--usk-border-text-mix: 0%;
|
|
24
24
|
--usk-border-min-alpha: 0;
|
|
25
25
|
}
|
|
@@ -1597,7 +1597,8 @@
|
|
|
1597
1597
|
========================================================= */
|
|
1598
1598
|
|
|
1599
1599
|
@layer ui-style-kit.native_elements {
|
|
1600
|
-
[data-ui][data-
|
|
1600
|
+
[data-ui][data-mode] {
|
|
1601
|
+
--usk-native-bg: rgb(var(--usk-bg-rgb));
|
|
1601
1602
|
--usk-native-surface: rgb(var(--usk-surface-rgb));
|
|
1602
1603
|
--usk-native-surface-strong: rgb(var(--usk-surface-strong-rgb));
|
|
1603
1604
|
--usk-native-surface-soft: rgb(var(--usk-surface-soft-rgb));
|
|
@@ -1634,6 +1635,52 @@
|
|
|
1634
1635
|
--usk-native-thumb: var(--usk-native-surface-strong);
|
|
1635
1636
|
--usk-native-thumb-border: var(--usk-native-primary);
|
|
1636
1637
|
--usk-native-indicator: var(--usk-native-primary);
|
|
1638
|
+
--usk-native-choice-size: 1.5rem;
|
|
1639
|
+
--usk-native-choice-background: var(--usk-native-control-bg);
|
|
1640
|
+
--usk-native-choice-border: var(--usk-native-border-width) solid var(--usk-native-border);
|
|
1641
|
+
--usk-native-checkbox-radius: .3rem;
|
|
1642
|
+
--usk-native-radio-radius: 50%;
|
|
1643
|
+
--usk-native-choice-shadow: none;
|
|
1644
|
+
--usk-native-choice-checked-background: var(--usk-native-primary);
|
|
1645
|
+
--usk-native-choice-mark-color: var(--usk-native-on-primary);
|
|
1646
|
+
--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%);
|
|
1647
|
+
--usk-native-select-indicator-size: .42rem .42rem, .42rem .42rem;
|
|
1648
|
+
--usk-native-select-indicator-position: calc(100% - 1.15rem) 50%, calc(100% - .85rem) 50%;
|
|
1649
|
+
--usk-native-select-padding-inline-end: 2.5rem;
|
|
1650
|
+
--usk-native-range-track-size: .45rem;
|
|
1651
|
+
--usk-native-range-track-background: var(--usk-native-track);
|
|
1652
|
+
--usk-native-range-track-border: 0 solid transparent;
|
|
1653
|
+
--usk-native-range-track-radius: 999px;
|
|
1654
|
+
--usk-native-range-track-shadow: none;
|
|
1655
|
+
--usk-native-range-progress-background: var(--usk-native-track-fill);
|
|
1656
|
+
--usk-native-range-thumb-size: 1.2rem;
|
|
1657
|
+
--usk-native-range-thumb-background: var(--usk-native-thumb);
|
|
1658
|
+
--usk-native-range-thumb-border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
|
|
1659
|
+
--usk-native-range-thumb-radius: 50%;
|
|
1660
|
+
--usk-native-range-thumb-shadow: var(--usk-native-shadow);
|
|
1661
|
+
--usk-native-progress-size: .9rem;
|
|
1662
|
+
--usk-native-progress-track-background: var(--usk-native-track);
|
|
1663
|
+
--usk-native-progress-track-border: 0 solid transparent;
|
|
1664
|
+
--usk-native-progress-track-radius: 999px;
|
|
1665
|
+
--usk-native-progress-track-shadow: none;
|
|
1666
|
+
--usk-native-progress-value-background: var(--usk-native-track-fill);
|
|
1667
|
+
--usk-native-progress-value-radius: inherit;
|
|
1668
|
+
--usk-native-progress-value-shadow: none;
|
|
1669
|
+
--usk-native-meter-optimum-background: var(--usk-native-success);
|
|
1670
|
+
--usk-native-meter-suboptimum-background: var(--usk-native-warning);
|
|
1671
|
+
--usk-native-meter-critical-background: var(--usk-native-danger);
|
|
1672
|
+
--usk-native-file-button-background: var(--usk-native-primary);
|
|
1673
|
+
--usk-native-file-button-border: var(--usk-native-border-width) solid var(--usk-native-primary);
|
|
1674
|
+
--usk-native-file-button-radius: var(--usk-native-radius-sm);
|
|
1675
|
+
--usk-native-file-button-shadow: var(--usk-native-shadow);
|
|
1676
|
+
--usk-native-color-swatch-border: 0 solid transparent;
|
|
1677
|
+
--usk-native-color-swatch-radius: calc(var(--usk-native-radius-sm) / 1.5);
|
|
1678
|
+
--usk-native-indicator-opacity: .78;
|
|
1679
|
+
--usk-native-indicator-filter: none;
|
|
1680
|
+
--usk-native-scrollbar-size: .75rem;
|
|
1681
|
+
--usk-native-scrollbar-track: var(--usk-native-track);
|
|
1682
|
+
--usk-native-scrollbar-thumb: var(--usk-native-thumb-border);
|
|
1683
|
+
--usk-native-scrollbar-radius: 999px;
|
|
1637
1684
|
--usk-native-shadow: none;
|
|
1638
1685
|
--usk-native-shadow-md: var(--usk-native-shadow);
|
|
1639
1686
|
--usk-native-focus-ring: 0 0 0 3px rgb(var(--usk-focus-rgb) / .28);
|
|
@@ -1641,7 +1688,7 @@
|
|
|
1641
1688
|
--usk-motion-easing: cubic-bezier(0.2, 0, 0.2, 1);
|
|
1642
1689
|
|
|
1643
1690
|
/* Shared semantic values are fully typed so optional companion and third-party consumers can use them directly. */
|
|
1644
|
-
--ui-color-bg:
|
|
1691
|
+
--ui-color-bg: var(--usk-native-bg);
|
|
1645
1692
|
--ui-color-surface: var(--usk-native-surface-strong);
|
|
1646
1693
|
--ui-color-text: var(--usk-native-text);
|
|
1647
1694
|
--ui-color-muted: var(--usk-native-text-muted);
|
|
@@ -1655,7 +1702,7 @@
|
|
|
1655
1702
|
--ui-motion-easing: var(--usk-motion-easing);
|
|
1656
1703
|
}
|
|
1657
1704
|
|
|
1658
|
-
[data-ui][data-
|
|
1705
|
+
[data-ui][data-mode] :where(h1, h2, h3, h4, h5, h6) {
|
|
1659
1706
|
color: var(--usk-native-text);
|
|
1660
1707
|
font-family: var(--usk-native-font-heading);
|
|
1661
1708
|
line-height: 1.15;
|
|
@@ -1663,42 +1710,42 @@
|
|
|
1663
1710
|
}
|
|
1664
1711
|
|
|
1665
1712
|
@supports (text-wrap: balance) {
|
|
1666
|
-
[data-ui][data-
|
|
1713
|
+
[data-ui][data-mode] :where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
|
|
1667
1714
|
}
|
|
1668
1715
|
|
|
1669
|
-
[data-ui][data-
|
|
1716
|
+
[data-ui][data-mode] :where(hgroup) {
|
|
1670
1717
|
display: grid;
|
|
1671
1718
|
gap: .35rem;
|
|
1672
1719
|
margin-block: 0 1rem;
|
|
1673
1720
|
}
|
|
1674
1721
|
|
|
1675
|
-
[data-ui][data-
|
|
1676
|
-
[data-ui][data-
|
|
1677
|
-
[data-ui][data-
|
|
1722
|
+
[data-ui][data-mode] :where(h1) { font-size: clamp(2rem, 5vw, 3.5rem); }
|
|
1723
|
+
[data-ui][data-mode] :where(h2) { font-size: clamp(1.55rem, 3vw, 2.35rem); }
|
|
1724
|
+
[data-ui][data-mode] :where(h3) { font-size: clamp(1.25rem, 2vw, 1.65rem); }
|
|
1678
1725
|
|
|
1679
|
-
[data-ui][data-
|
|
1726
|
+
[data-ui][data-mode] :where(p) {
|
|
1680
1727
|
margin: 0 0 1rem;
|
|
1681
1728
|
color: var(--usk-native-text-muted);
|
|
1682
1729
|
line-height: 1.7;
|
|
1683
1730
|
}
|
|
1684
1731
|
|
|
1685
|
-
[data-ui][data-
|
|
1732
|
+
[data-ui][data-mode] :where(a) {
|
|
1686
1733
|
color: var(--usk-native-link);
|
|
1687
1734
|
text-decoration-thickness: .08em;
|
|
1688
1735
|
text-underline-offset: .18em;
|
|
1689
1736
|
}
|
|
1690
1737
|
|
|
1691
|
-
[data-ui][data-
|
|
1738
|
+
[data-ui][data-mode] :where(a:hover) { color: var(--usk-native-primary-hover); }
|
|
1692
1739
|
|
|
1693
|
-
[data-ui][data-
|
|
1740
|
+
[data-ui][data-mode] :where(ul, ol, menu) {
|
|
1694
1741
|
margin: 0 0 1rem;
|
|
1695
1742
|
padding-left: 1.35rem;
|
|
1696
1743
|
color: var(--usk-native-text-muted);
|
|
1697
1744
|
}
|
|
1698
1745
|
|
|
1699
|
-
[data-ui][data-
|
|
1746
|
+
[data-ui][data-mode] :where(li) { margin-block: .25rem; }
|
|
1700
1747
|
|
|
1701
|
-
[data-ui][data-
|
|
1748
|
+
[data-ui][data-mode] :where(blockquote) {
|
|
1702
1749
|
margin: 1.25rem 0;
|
|
1703
1750
|
padding: 1rem 1.25rem;
|
|
1704
1751
|
color: var(--usk-native-text);
|
|
@@ -1707,7 +1754,7 @@
|
|
|
1707
1754
|
border-radius: var(--usk-native-radius);
|
|
1708
1755
|
}
|
|
1709
1756
|
|
|
1710
|
-
[data-ui][data-
|
|
1757
|
+
[data-ui][data-mode] :where(code, kbd, samp) {
|
|
1711
1758
|
padding: .15em .35em;
|
|
1712
1759
|
color: var(--usk-native-text);
|
|
1713
1760
|
background: var(--usk-native-surface-soft);
|
|
@@ -1717,7 +1764,7 @@
|
|
|
1717
1764
|
font-size: .92em;
|
|
1718
1765
|
}
|
|
1719
1766
|
|
|
1720
|
-
[data-ui][data-
|
|
1767
|
+
[data-ui][data-mode] :where(pre) {
|
|
1721
1768
|
overflow: auto;
|
|
1722
1769
|
margin: 1rem 0;
|
|
1723
1770
|
padding: 1rem;
|
|
@@ -1727,57 +1774,88 @@
|
|
|
1727
1774
|
border-radius: var(--usk-native-radius);
|
|
1728
1775
|
}
|
|
1729
1776
|
|
|
1730
|
-
[data-ui][data-
|
|
1777
|
+
[data-ui][data-mode] :where(pre code) {
|
|
1731
1778
|
display: block;
|
|
1732
1779
|
padding: 0;
|
|
1733
1780
|
background: transparent;
|
|
1734
1781
|
border: 0;
|
|
1735
1782
|
}
|
|
1736
1783
|
|
|
1737
|
-
[data-ui][data-
|
|
1784
|
+
[data-ui][data-mode] :where(hr) {
|
|
1738
1785
|
height: 1px;
|
|
1739
1786
|
margin: 2rem 0;
|
|
1740
1787
|
background: var(--usk-native-border);
|
|
1741
1788
|
border: 0;
|
|
1742
1789
|
}
|
|
1743
1790
|
|
|
1744
|
-
[data-ui][data-
|
|
1791
|
+
[data-ui][data-mode] :where(mark) {
|
|
1745
1792
|
padding-inline: .15em;
|
|
1746
1793
|
color: var(--usk-native-text);
|
|
1747
1794
|
background: rgb(var(--usk-warning-rgb) / .32);
|
|
1748
1795
|
border-radius: .2em;
|
|
1749
1796
|
}
|
|
1750
1797
|
|
|
1751
|
-
[data-ui][data-
|
|
1752
|
-
[data-ui][data-
|
|
1798
|
+
[data-ui][data-mode] :where(small, sub, sup, rt, rp) { color: var(--usk-native-text-muted); }
|
|
1799
|
+
[data-ui][data-mode] :where(rt, rp) { font-size: .72em; }
|
|
1753
1800
|
|
|
1754
|
-
[data-ui][data-
|
|
1801
|
+
[data-ui][data-mode] :where(abbr[title]) {
|
|
1755
1802
|
text-decoration: underline dotted var(--usk-native-primary);
|
|
1756
1803
|
text-underline-offset: .18em;
|
|
1757
1804
|
cursor: help;
|
|
1758
1805
|
}
|
|
1759
1806
|
|
|
1760
|
-
[data-ui][data-
|
|
1807
|
+
[data-ui][data-mode] :where(img, picture, video, canvas, svg, iframe, audio, object, embed, math) {
|
|
1761
1808
|
max-width: 100%;
|
|
1762
1809
|
}
|
|
1763
1810
|
|
|
1764
|
-
[data-ui][data-
|
|
1811
|
+
[data-ui][data-mode] :where(img, video, canvas, svg, iframe) { height: auto; }
|
|
1765
1812
|
|
|
1766
|
-
|
|
1813
|
+
/** Native playback retains browser accessibility while inheriting preset material and geometry. */
|
|
1814
|
+
[data-ui][data-mode] audio[controls] {
|
|
1815
|
+
display: block;
|
|
1816
|
+
box-sizing: border-box;
|
|
1817
|
+
inline-size: 100%;
|
|
1818
|
+
min-inline-size: 0;
|
|
1819
|
+
block-size: 60px;
|
|
1820
|
+
padding: 3px;
|
|
1821
|
+
background: var(--usk-native-control-bg);
|
|
1822
|
+
color: var(--usk-native-text);
|
|
1823
|
+
border: var(--usk-native-border-width) solid var(--usk-native-border);
|
|
1824
|
+
border-radius: var(--usk-native-radius);
|
|
1825
|
+
box-shadow: var(--usk-native-shadow);
|
|
1826
|
+
accent-color: var(--usk-native-primary);
|
|
1827
|
+
color-scheme: light;
|
|
1828
|
+
}
|
|
1829
|
+
[data-ui][data-mode="dark"] audio[controls],
|
|
1830
|
+
[data-ui][data-mode="contrast"] audio[controls] { color-scheme: dark; }
|
|
1831
|
+
[data-ui][data-mode] audio[controls]::-webkit-media-controls-enclosure {
|
|
1832
|
+
border-radius: var(--usk-native-radius);
|
|
1833
|
+
background: transparent;
|
|
1834
|
+
}
|
|
1835
|
+
[data-ui][data-mode] audio[controls]::-webkit-media-controls-panel {
|
|
1836
|
+
background: var(--usk-native-control-bg);
|
|
1837
|
+
color: var(--usk-native-text);
|
|
1838
|
+
}
|
|
1839
|
+
[data-ui][data-mode] audio[controls]:focus-visible {
|
|
1840
|
+
outline: 2px solid var(--usk-native-focus);
|
|
1841
|
+
outline-offset: 2px;
|
|
1842
|
+
}
|
|
1843
|
+
|
|
1844
|
+
[data-ui][data-mode] :where(figure) { margin: 1.25rem 0; }
|
|
1767
1845
|
|
|
1768
|
-
[data-ui][data-
|
|
1846
|
+
[data-ui][data-mode] :where(figcaption) {
|
|
1769
1847
|
margin-top: .5rem;
|
|
1770
1848
|
color: var(--usk-native-text-muted);
|
|
1771
1849
|
font-size: .9rem;
|
|
1772
1850
|
}
|
|
1773
1851
|
|
|
1774
|
-
[data-ui][data-
|
|
1852
|
+
[data-ui][data-mode] :where(form) {
|
|
1775
1853
|
display: grid;
|
|
1776
1854
|
gap: var(--usk-native-field-gap);
|
|
1777
1855
|
min-inline-size: 0;
|
|
1778
1856
|
}
|
|
1779
1857
|
|
|
1780
|
-
[data-ui][data-
|
|
1858
|
+
[data-ui][data-mode] :where(fieldset) {
|
|
1781
1859
|
display: grid;
|
|
1782
1860
|
gap: .9rem;
|
|
1783
1861
|
min-inline-size: 0;
|
|
@@ -1788,30 +1866,30 @@
|
|
|
1788
1866
|
border-radius: var(--usk-native-radius);
|
|
1789
1867
|
}
|
|
1790
1868
|
|
|
1791
|
-
[data-ui][data-
|
|
1869
|
+
[data-ui][data-mode] :where(legend) {
|
|
1792
1870
|
padding-inline: .35rem;
|
|
1793
1871
|
color: var(--usk-native-text);
|
|
1794
1872
|
font-weight: 900;
|
|
1795
1873
|
}
|
|
1796
1874
|
|
|
1797
|
-
[data-ui][data-
|
|
1875
|
+
[data-ui][data-mode] :where(label) {
|
|
1798
1876
|
color: var(--usk-native-text);
|
|
1799
1877
|
font-weight: 750;
|
|
1800
1878
|
}
|
|
1801
1879
|
|
|
1802
|
-
[data-ui][data-
|
|
1880
|
+
[data-ui][data-mode] :where(label:has(input), label:has(select), label:has(textarea)) {
|
|
1803
1881
|
display: grid;
|
|
1804
1882
|
gap: var(--usk-native-field-gap);
|
|
1805
1883
|
align-content: start;
|
|
1806
1884
|
}
|
|
1807
1885
|
|
|
1808
|
-
[data-ui][data-
|
|
1886
|
+
[data-ui][data-mode] :where(label:has(input[type="checkbox"]), label:has(input[type="radio"])) {
|
|
1809
1887
|
display: inline-flex;
|
|
1810
1888
|
gap: var(--usk-native-field-gap);
|
|
1811
1889
|
align-items: center;
|
|
1812
1890
|
}
|
|
1813
1891
|
|
|
1814
|
-
[data-ui][data-
|
|
1892
|
+
[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
1893
|
width: 100%;
|
|
1816
1894
|
min-block-size: var(--usk-native-control-min-block-size);
|
|
1817
1895
|
padding: var(--usk-native-control-padding-block) var(--usk-native-control-padding-inline);
|
|
@@ -1822,24 +1900,44 @@
|
|
|
1822
1900
|
font: inherit;
|
|
1823
1901
|
}
|
|
1824
1902
|
|
|
1825
|
-
[data-ui][data-
|
|
1903
|
+
[data-ui][data-mode] :where(input, textarea, select, button) {
|
|
1826
1904
|
color-scheme: inherit;
|
|
1827
1905
|
accent-color: var(--usk-native-primary);
|
|
1828
1906
|
}
|
|
1829
1907
|
|
|
1830
|
-
[data-ui][data-
|
|
1908
|
+
[data-ui][data-mode] :where(input, textarea)::placeholder {
|
|
1831
1909
|
color: var(--usk-native-text-muted);
|
|
1832
1910
|
opacity: .78;
|
|
1833
1911
|
}
|
|
1834
1912
|
|
|
1835
|
-
[data-ui][data-
|
|
1913
|
+
[data-ui][data-mode] :where(textarea) {
|
|
1836
1914
|
min-height: 7rem;
|
|
1837
1915
|
resize: vertical;
|
|
1838
1916
|
}
|
|
1839
1917
|
|
|
1840
|
-
[data-ui][data-
|
|
1918
|
+
[data-ui][data-mode] :where(input, textarea, select, button) { font: inherit; }
|
|
1919
|
+
|
|
1920
|
+
[data-ui][data-mode] :where(select:not([multiple])) {
|
|
1921
|
+
-webkit-appearance: none;
|
|
1922
|
+
appearance: none;
|
|
1923
|
+
padding-inline-end: var(--usk-native-select-padding-inline-end);
|
|
1924
|
+
background-image: var(--usk-native-select-indicator-image);
|
|
1925
|
+
background-repeat: no-repeat;
|
|
1926
|
+
background-position: var(--usk-native-select-indicator-position);
|
|
1927
|
+
background-size: var(--usk-native-select-indicator-size);
|
|
1928
|
+
}
|
|
1929
|
+
|
|
1930
|
+
[data-ui][data-mode] :where(select[multiple]) {
|
|
1931
|
+
padding-inline-end: var(--usk-native-control-padding-inline);
|
|
1932
|
+
background-image: none;
|
|
1933
|
+
}
|
|
1934
|
+
|
|
1935
|
+
[dir="rtl"] [data-ui][data-mode] :where(select:not([multiple])),
|
|
1936
|
+
[data-ui][data-mode][dir="rtl"] :where(select:not([multiple])) {
|
|
1937
|
+
--usk-native-select-indicator-position: 1.15rem 50%, .85rem 50%;
|
|
1938
|
+
}
|
|
1841
1939
|
|
|
1842
|
-
[data-ui][data-
|
|
1940
|
+
[data-ui][data-mode] :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
|
|
1843
1941
|
-webkit-appearance: none;
|
|
1844
1942
|
appearance: none;
|
|
1845
1943
|
box-sizing: border-box;
|
|
@@ -1848,7 +1946,7 @@
|
|
|
1848
1946
|
font: inherit;
|
|
1849
1947
|
}
|
|
1850
1948
|
|
|
1851
|
-
[data-ui][data-
|
|
1949
|
+
[data-ui][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
|
|
1852
1950
|
color: var(--usk-native-on-primary);
|
|
1853
1951
|
background: var(--usk-native-primary);
|
|
1854
1952
|
border: var(--usk-native-border-width) solid var(--usk-native-primary);
|
|
@@ -1859,29 +1957,56 @@
|
|
|
1859
1957
|
}
|
|
1860
1958
|
|
|
1861
1959
|
/* Busy controls reserve a stable lane for the preset-owned spinner glyph. */
|
|
1862
|
-
[data-ui][data-
|
|
1960
|
+
[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
1961
|
display: inline-flex;
|
|
1864
1962
|
align-items: center;
|
|
1865
1963
|
justify-content: center;
|
|
1866
1964
|
gap: .55rem;
|
|
1867
1965
|
}
|
|
1868
1966
|
|
|
1869
|
-
[data-ui][data-
|
|
1967
|
+
[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
1968
|
flex: 0 0 1em;
|
|
1871
1969
|
}
|
|
1872
1970
|
|
|
1873
|
-
[data-ui][data-
|
|
1971
|
+
[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
1972
|
background: var(--usk-native-primary-hover);
|
|
1875
1973
|
border-color: var(--usk-native-primary-hover);
|
|
1876
1974
|
}
|
|
1877
1975
|
|
|
1878
|
-
[data-ui][data-
|
|
1879
|
-
|
|
1880
|
-
|
|
1976
|
+
[data-ui][data-mode] :where(input[type="checkbox"], input[type="radio"]) {
|
|
1977
|
+
-webkit-appearance: none;
|
|
1978
|
+
appearance: none;
|
|
1979
|
+
inline-size: var(--usk-native-choice-size);
|
|
1980
|
+
block-size: var(--usk-native-choice-size);
|
|
1981
|
+
background: var(--usk-native-choice-background);
|
|
1982
|
+
border: var(--usk-native-choice-border);
|
|
1983
|
+
box-shadow: var(--usk-native-choice-shadow);
|
|
1881
1984
|
accent-color: var(--usk-native-primary);
|
|
1882
1985
|
}
|
|
1883
1986
|
|
|
1884
|
-
[data-ui][data-
|
|
1987
|
+
[data-ui][data-mode] :where(input[type="checkbox"]) { border-radius: var(--usk-native-checkbox-radius); }
|
|
1988
|
+
[data-ui][data-mode] :where(input[type="radio"]) { border-radius: var(--usk-native-radio-radius); }
|
|
1989
|
+
|
|
1990
|
+
[data-ui][data-mode] :where(input[type="checkbox"]:checked) {
|
|
1991
|
+
background-color: var(--usk-native-choice-checked-background);
|
|
1992
|
+
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%);
|
|
1993
|
+
}
|
|
1994
|
+
|
|
1995
|
+
[data-ui][data-mode] :where(input[type="checkbox"]:hover:not(:disabled), input[type="radio"]:hover:not(:disabled)) {
|
|
1996
|
+
border-color: var(--usk-native-primary);
|
|
1997
|
+
filter: brightness(1.04);
|
|
1998
|
+
}
|
|
1999
|
+
|
|
2000
|
+
[data-ui][data-mode] :where(input[type="checkbox"]:active:not(:disabled), input[type="radio"]:active:not(:disabled)) {
|
|
2001
|
+
filter: brightness(.94);
|
|
2002
|
+
transform: scale(.94);
|
|
2003
|
+
}
|
|
2004
|
+
|
|
2005
|
+
[data-ui][data-mode] :where(input[type="radio"]:checked) {
|
|
2006
|
+
background: radial-gradient(circle, var(--usk-native-choice-mark-color) 0 31%, transparent 34%), var(--usk-native-choice-checked-background);
|
|
2007
|
+
}
|
|
2008
|
+
|
|
2009
|
+
[data-ui][data-mode] :where(input[type="range"]) {
|
|
1885
2010
|
-webkit-appearance: none;
|
|
1886
2011
|
appearance: none;
|
|
1887
2012
|
width: 100%;
|
|
@@ -1890,40 +2015,50 @@
|
|
|
1890
2015
|
accent-color: var(--usk-native-primary);
|
|
1891
2016
|
}
|
|
1892
2017
|
|
|
1893
|
-
[data-ui][data-
|
|
1894
|
-
block-size:
|
|
1895
|
-
background: var(--usk-native-track);
|
|
1896
|
-
border
|
|
2018
|
+
[data-ui][data-mode] :where(input[type="range"])::-webkit-slider-runnable-track {
|
|
2019
|
+
block-size: var(--usk-native-range-track-size);
|
|
2020
|
+
background: var(--usk-native-range-track-background);
|
|
2021
|
+
border: var(--usk-native-range-track-border);
|
|
2022
|
+
border-radius: var(--usk-native-range-track-radius);
|
|
2023
|
+
box-shadow: var(--usk-native-range-track-shadow);
|
|
1897
2024
|
}
|
|
1898
2025
|
|
|
1899
|
-
[data-ui][data-
|
|
1900
|
-
block-size:
|
|
1901
|
-
background: var(--usk-native-track);
|
|
1902
|
-
border
|
|
2026
|
+
[data-ui][data-mode] :where(input[type="range"])::-moz-range-track {
|
|
2027
|
+
block-size: var(--usk-native-range-track-size);
|
|
2028
|
+
background: var(--usk-native-range-track-background);
|
|
2029
|
+
border: var(--usk-native-range-track-border);
|
|
2030
|
+
border-radius: var(--usk-native-range-track-radius);
|
|
2031
|
+
box-shadow: var(--usk-native-range-track-shadow);
|
|
2032
|
+
}
|
|
2033
|
+
|
|
2034
|
+
[data-ui][data-mode] :where(input[type="range"])::-moz-range-progress {
|
|
2035
|
+
block-size: var(--usk-native-range-track-size);
|
|
2036
|
+
background: var(--usk-native-range-progress-background);
|
|
2037
|
+
border-radius: var(--usk-native-range-track-radius);
|
|
1903
2038
|
}
|
|
1904
2039
|
|
|
1905
|
-
[data-ui][data-
|
|
2040
|
+
[data-ui][data-mode] :where(input[type="range"])::-webkit-slider-thumb {
|
|
1906
2041
|
-webkit-appearance: none;
|
|
1907
2042
|
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);
|
|
2043
|
+
inline-size: var(--usk-native-range-thumb-size);
|
|
2044
|
+
block-size: var(--usk-native-range-thumb-size);
|
|
2045
|
+
margin-block-start: calc((var(--usk-native-range-track-size) - var(--usk-native-range-thumb-size)) / 2);
|
|
2046
|
+
background: var(--usk-native-range-thumb-background);
|
|
2047
|
+
border: var(--usk-native-range-thumb-border);
|
|
2048
|
+
border-radius: var(--usk-native-range-thumb-radius);
|
|
2049
|
+
box-shadow: var(--usk-native-range-thumb-shadow);
|
|
1915
2050
|
}
|
|
1916
2051
|
|
|
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);
|
|
2052
|
+
[data-ui][data-mode] :where(input[type="range"])::-moz-range-thumb {
|
|
2053
|
+
inline-size: var(--usk-native-range-thumb-size);
|
|
2054
|
+
block-size: var(--usk-native-range-thumb-size);
|
|
2055
|
+
background: var(--usk-native-range-thumb-background);
|
|
2056
|
+
border: var(--usk-native-range-thumb-border);
|
|
2057
|
+
border-radius: var(--usk-native-range-thumb-radius);
|
|
2058
|
+
box-shadow: var(--usk-native-range-thumb-shadow);
|
|
1924
2059
|
}
|
|
1925
2060
|
|
|
1926
|
-
[data-ui][data-
|
|
2061
|
+
[data-ui][data-mode] :where(input[type="color"]) {
|
|
1927
2062
|
inline-size: 3rem;
|
|
1928
2063
|
block-size: 2.4rem;
|
|
1929
2064
|
padding: .2rem;
|
|
@@ -1932,84 +2067,86 @@
|
|
|
1932
2067
|
border-radius: var(--usk-native-radius-sm);
|
|
1933
2068
|
}
|
|
1934
2069
|
|
|
1935
|
-
[data-ui][data-
|
|
2070
|
+
[data-ui][data-mode] :where(input[type="color"])::-webkit-color-swatch-wrapper {
|
|
1936
2071
|
padding: 0;
|
|
1937
2072
|
}
|
|
1938
2073
|
|
|
1939
|
-
[data-ui][data-
|
|
1940
|
-
border:
|
|
1941
|
-
border-radius:
|
|
2074
|
+
[data-ui][data-mode] :where(input[type="color"])::-webkit-color-swatch {
|
|
2075
|
+
border: var(--usk-native-color-swatch-border);
|
|
2076
|
+
border-radius: var(--usk-native-color-swatch-radius);
|
|
1942
2077
|
}
|
|
1943
2078
|
|
|
1944
|
-
[data-ui][data-
|
|
1945
|
-
border:
|
|
1946
|
-
border-radius:
|
|
2079
|
+
[data-ui][data-mode] :where(input[type="color"])::-moz-color-swatch {
|
|
2080
|
+
border: var(--usk-native-color-swatch-border);
|
|
2081
|
+
border-radius: var(--usk-native-color-swatch-radius);
|
|
1947
2082
|
}
|
|
1948
2083
|
|
|
1949
|
-
[data-ui][data-
|
|
2084
|
+
[data-ui][data-mode] :where(input[type="file"]) { color: var(--usk-native-text-muted); }
|
|
1950
2085
|
|
|
1951
2086
|
/* Keep pseudo-elements outside :where() because engines reject them inside selector-list arguments. */
|
|
1952
|
-
[data-ui][data-
|
|
1953
|
-
[data-ui][data-
|
|
2087
|
+
[data-ui][data-mode] :where(input[type="file"])::file-selector-button,
|
|
2088
|
+
[data-ui][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
|
|
1954
2089
|
margin-inline-end: .75rem;
|
|
1955
2090
|
padding: var(--usk-native-subcontrol-padding-block) var(--usk-native-subcontrol-padding-inline);
|
|
1956
2091
|
color: var(--usk-native-on-primary);
|
|
1957
|
-
background: var(--usk-native-
|
|
1958
|
-
border: var(--usk-native-
|
|
1959
|
-
border-radius: var(--usk-native-radius
|
|
2092
|
+
background: var(--usk-native-file-button-background);
|
|
2093
|
+
border: var(--usk-native-file-button-border);
|
|
2094
|
+
border-radius: var(--usk-native-file-button-radius);
|
|
2095
|
+
box-shadow: var(--usk-native-file-button-shadow);
|
|
1960
2096
|
font-weight: 800;
|
|
1961
2097
|
cursor: pointer;
|
|
1962
2098
|
}
|
|
1963
2099
|
|
|
1964
|
-
[data-ui][data-
|
|
1965
|
-
[data-ui][data-
|
|
2100
|
+
[data-ui][data-mode] :where(input[type="file"]:hover)::file-selector-button,
|
|
2101
|
+
[data-ui][data-mode] :where(input[type="file"]:hover)::-webkit-file-upload-button {
|
|
1966
2102
|
background: var(--usk-native-primary-hover);
|
|
1967
2103
|
border-color: var(--usk-native-primary-hover);
|
|
1968
2104
|
}
|
|
1969
2105
|
|
|
1970
|
-
[data-ui][data-
|
|
1971
|
-
[data-ui][data-
|
|
2106
|
+
[data-ui][data-mode] :where(input[type="file"]:focus-visible)::file-selector-button,
|
|
2107
|
+
[data-ui][data-mode] :where(input[type="file"]:focus-visible)::-webkit-file-upload-button {
|
|
1972
2108
|
box-shadow: var(--usk-native-focus-ring);
|
|
1973
2109
|
}
|
|
1974
2110
|
|
|
1975
|
-
[data-ui][data-
|
|
1976
|
-
[data-ui][data-
|
|
2111
|
+
[data-ui][data-mode] :where(input[type="file"]:active)::file-selector-button,
|
|
2112
|
+
[data-ui][data-mode] :where(input[type="file"]:active)::-webkit-file-upload-button {
|
|
1977
2113
|
filter: brightness(.96);
|
|
1978
2114
|
}
|
|
1979
2115
|
|
|
1980
|
-
[data-ui][data-
|
|
1981
|
-
[data-ui][data-
|
|
2116
|
+
[data-ui][data-mode] :where(input[type="file"]:disabled)::file-selector-button,
|
|
2117
|
+
[data-ui][data-mode] :where(input[type="file"]:disabled)::-webkit-file-upload-button {
|
|
1982
2118
|
color: var(--usk-native-text-muted);
|
|
1983
2119
|
background: var(--usk-native-surface-soft);
|
|
1984
2120
|
border-color: var(--usk-native-border);
|
|
1985
2121
|
cursor: not-allowed;
|
|
1986
2122
|
}
|
|
1987
2123
|
|
|
1988
|
-
[data-ui][data-
|
|
2124
|
+
[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
2125
|
background: var(--usk-native-surface-soft);
|
|
1990
2126
|
}
|
|
1991
2127
|
|
|
1992
|
-
[data-ui][data-
|
|
2128
|
+
[data-ui][data-mode] :where(input:required, textarea:required, select:required) {
|
|
1993
2129
|
box-shadow: inset .22rem 0 0 var(--usk-native-indicator);
|
|
1994
2130
|
}
|
|
1995
2131
|
|
|
1996
|
-
[data-ui][data-
|
|
2132
|
+
[data-ui][data-mode] :where(input:user-valid, textarea:user-valid, select:user-valid, .is-valid) {
|
|
1997
2133
|
border-color: var(--usk-native-success);
|
|
1998
2134
|
}
|
|
1999
2135
|
|
|
2000
|
-
[data-ui][data-
|
|
2136
|
+
[data-ui][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
|
|
2001
2137
|
border-color: var(--usk-native-danger);
|
|
2002
2138
|
}
|
|
2003
2139
|
|
|
2004
|
-
[data-ui][data-
|
|
2140
|
+
[data-ui][data-mode] :where(input[type="checkbox"]:indeterminate, input[type="radio"]:indeterminate) {
|
|
2141
|
+
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
2142
|
accent-color: var(--usk-native-warning);
|
|
2006
2143
|
}
|
|
2007
2144
|
|
|
2008
|
-
[data-ui][data-
|
|
2145
|
+
[data-ui][data-mode] :where(button:active, input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active) {
|
|
2009
2146
|
filter: brightness(.96);
|
|
2010
2147
|
}
|
|
2011
2148
|
|
|
2012
|
-
[data-ui][data-
|
|
2149
|
+
[data-ui][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
|
|
2013
2150
|
color: var(--usk-native-text-muted);
|
|
2014
2151
|
background: var(--usk-native-surface-soft);
|
|
2015
2152
|
border-color: var(--usk-native-border);
|
|
@@ -2018,37 +2155,36 @@
|
|
|
2018
2155
|
cursor: not-allowed;
|
|
2019
2156
|
}
|
|
2020
2157
|
|
|
2021
|
-
[data-ui][data-
|
|
2158
|
+
[data-ui][data-mode] :where(table) {
|
|
2022
2159
|
width: 100%;
|
|
2023
2160
|
margin: 1rem 0;
|
|
2024
|
-
overflow: hidden;
|
|
2025
2161
|
background: var(--usk-native-surface);
|
|
2026
2162
|
border: var(--usk-native-border-width) solid var(--usk-native-border);
|
|
2027
2163
|
border-radius: var(--usk-native-radius);
|
|
2028
2164
|
border-collapse: collapse;
|
|
2029
2165
|
}
|
|
2030
2166
|
|
|
2031
|
-
[data-ui][data-
|
|
2167
|
+
[data-ui][data-mode] :where(caption) {
|
|
2032
2168
|
caption-side: bottom;
|
|
2033
2169
|
padding: .75rem;
|
|
2034
2170
|
color: var(--usk-native-text-muted);
|
|
2035
2171
|
font-size: .9rem;
|
|
2036
2172
|
}
|
|
2037
2173
|
|
|
2038
|
-
[data-ui][data-
|
|
2174
|
+
[data-ui][data-mode] :where(th, td) {
|
|
2039
2175
|
padding: .8rem .9rem;
|
|
2040
2176
|
text-align: left;
|
|
2041
2177
|
border-bottom: var(--usk-native-border-width) solid var(--usk-native-border);
|
|
2042
2178
|
}
|
|
2043
2179
|
|
|
2044
|
-
[data-ui][data-
|
|
2180
|
+
[data-ui][data-mode] :where(th) {
|
|
2045
2181
|
color: var(--usk-native-text);
|
|
2046
2182
|
background: var(--usk-native-surface-soft);
|
|
2047
2183
|
}
|
|
2048
2184
|
|
|
2049
|
-
[data-ui][data-
|
|
2185
|
+
[data-ui][data-mode] :where(td) { color: var(--usk-native-text-muted); }
|
|
2050
2186
|
|
|
2051
|
-
[data-ui][data-
|
|
2187
|
+
[data-ui][data-mode] :where(details) {
|
|
2052
2188
|
margin: 1rem 0;
|
|
2053
2189
|
padding: .9rem 1rem;
|
|
2054
2190
|
color: var(--usk-native-text);
|
|
@@ -2057,13 +2193,13 @@
|
|
|
2057
2193
|
border-radius: var(--usk-native-radius);
|
|
2058
2194
|
}
|
|
2059
2195
|
|
|
2060
|
-
[data-ui][data-
|
|
2196
|
+
[data-ui][data-mode] :where(summary) {
|
|
2061
2197
|
color: var(--usk-native-text);
|
|
2062
2198
|
font-weight: 900;
|
|
2063
2199
|
cursor: pointer;
|
|
2064
2200
|
}
|
|
2065
2201
|
|
|
2066
|
-
[data-ui][data-
|
|
2202
|
+
[data-ui][data-mode] :where(dialog) {
|
|
2067
2203
|
max-width: min(92vw, 42rem);
|
|
2068
2204
|
padding: 0;
|
|
2069
2205
|
color: var(--usk-native-text);
|
|
@@ -2073,47 +2209,68 @@
|
|
|
2073
2209
|
box-shadow: var(--usk-native-shadow-md), 0 30px 80px rgb(0 0 0 / .42);
|
|
2074
2210
|
}
|
|
2075
2211
|
|
|
2076
|
-
[data-ui][data-
|
|
2212
|
+
[data-ui][data-mode] :where(dialog p) { color: inherit; }
|
|
2077
2213
|
|
|
2078
|
-
[data-ui][data-
|
|
2214
|
+
[data-ui][data-mode] :where(dialog)::backdrop { background: rgb(0 0 0 / .62); }
|
|
2079
2215
|
|
|
2080
|
-
[data-ui][data-
|
|
2216
|
+
[data-ui][data-mode] :where(progress, meter) {
|
|
2217
|
+
-webkit-appearance: none;
|
|
2218
|
+
appearance: none;
|
|
2081
2219
|
width: 100%;
|
|
2082
|
-
min-height:
|
|
2220
|
+
min-height: var(--usk-native-progress-size);
|
|
2083
2221
|
accent-color: var(--usk-native-primary);
|
|
2084
2222
|
}
|
|
2085
2223
|
|
|
2086
|
-
[data-ui][data-
|
|
2087
|
-
|
|
2088
|
-
background:
|
|
2089
|
-
border
|
|
2224
|
+
[data-ui][data-mode] :where(progress:not([value])) {
|
|
2225
|
+
background: repeating-linear-gradient(115deg, var(--usk-native-progress-track-background) 0 .5rem, var(--usk-native-progress-value-background) .5rem 1rem);
|
|
2226
|
+
background-size: 200% 100%;
|
|
2227
|
+
border: var(--usk-native-progress-track-border);
|
|
2228
|
+
border-radius: var(--usk-native-progress-track-radius);
|
|
2229
|
+
box-shadow: var(--usk-native-progress-track-shadow);
|
|
2230
|
+
animation: usk-native-progress-indeterminate 1.2s linear infinite;
|
|
2090
2231
|
}
|
|
2091
2232
|
|
|
2092
|
-
|
|
2093
|
-
|
|
2094
|
-
background: var(--usk-native-track-fill);
|
|
2095
|
-
border-radius: inherit;
|
|
2233
|
+
@keyframes usk-native-progress-indeterminate {
|
|
2234
|
+
to { background-position: -2rem 0; }
|
|
2096
2235
|
}
|
|
2097
2236
|
|
|
2098
|
-
[data-ui][data-
|
|
2099
|
-
[data-ui][data-
|
|
2100
|
-
background: var(--usk-native-track-
|
|
2101
|
-
border
|
|
2237
|
+
[data-ui][data-mode] :where(progress, meter)::-webkit-progress-bar,
|
|
2238
|
+
[data-ui][data-mode] :where(meter)::-webkit-meter-bar {
|
|
2239
|
+
background: var(--usk-native-progress-track-background);
|
|
2240
|
+
border: var(--usk-native-progress-track-border);
|
|
2241
|
+
border-radius: var(--usk-native-progress-track-radius);
|
|
2242
|
+
box-shadow: var(--usk-native-progress-track-shadow);
|
|
2243
|
+
}
|
|
2244
|
+
|
|
2245
|
+
[data-ui][data-mode] :where(progress)::-webkit-progress-value,
|
|
2246
|
+
[data-ui][data-mode] :where(meter)::-webkit-meter-optimum-value {
|
|
2247
|
+
background: var(--usk-native-progress-value-background);
|
|
2248
|
+
border-radius: var(--usk-native-progress-value-radius);
|
|
2249
|
+
box-shadow: var(--usk-native-progress-value-shadow);
|
|
2250
|
+
}
|
|
2251
|
+
|
|
2252
|
+
[data-ui][data-mode] :where(progress)::-moz-progress-bar,
|
|
2253
|
+
[data-ui][data-mode] :where(meter)::-moz-meter-bar {
|
|
2254
|
+
background: var(--usk-native-progress-value-background);
|
|
2255
|
+
border-radius: var(--usk-native-progress-value-radius);
|
|
2256
|
+
box-shadow: var(--usk-native-progress-value-shadow);
|
|
2102
2257
|
}
|
|
2103
2258
|
|
|
2104
|
-
[data-ui][data-
|
|
2105
|
-
|
|
2259
|
+
[data-ui][data-mode] :where(meter)::-webkit-meter-optimum-value { background: var(--usk-native-meter-optimum-background); }
|
|
2260
|
+
|
|
2261
|
+
[data-ui][data-mode] :where(meter)::-webkit-meter-suboptimum-value {
|
|
2262
|
+
background: var(--usk-native-meter-suboptimum-background);
|
|
2106
2263
|
}
|
|
2107
2264
|
|
|
2108
|
-
[data-ui][data-
|
|
2109
|
-
background: var(--usk-native-
|
|
2265
|
+
[data-ui][data-mode] :where(meter)::-webkit-meter-even-less-good-value {
|
|
2266
|
+
background: var(--usk-native-meter-critical-background);
|
|
2110
2267
|
}
|
|
2111
2268
|
|
|
2112
|
-
[data-ui][data-
|
|
2269
|
+
[data-ui][data-mode] :where(main, section, header, footer, nav, article, aside, address) {
|
|
2113
2270
|
color: var(--usk-native-text);
|
|
2114
2271
|
}
|
|
2115
2272
|
|
|
2116
|
-
[data-ui][data-
|
|
2273
|
+
[data-ui][data-mode] :where(article, aside) {
|
|
2117
2274
|
padding: var(--usk-native-panel-padding);
|
|
2118
2275
|
color: var(--usk-native-text);
|
|
2119
2276
|
background: var(--usk-native-card-bg);
|
|
@@ -2122,113 +2279,132 @@
|
|
|
2122
2279
|
box-shadow: var(--usk-native-shadow);
|
|
2123
2280
|
}
|
|
2124
2281
|
|
|
2125
|
-
[data-ui][data-
|
|
2282
|
+
[data-ui][data-mode] :where(dl) {
|
|
2126
2283
|
margin: 0 0 1rem;
|
|
2127
2284
|
color: var(--usk-native-text-muted);
|
|
2128
2285
|
}
|
|
2129
2286
|
|
|
2130
|
-
[data-ui][data-
|
|
2287
|
+
[data-ui][data-mode] :where(dt) {
|
|
2131
2288
|
color: var(--usk-native-text);
|
|
2132
2289
|
font-weight: 900;
|
|
2133
2290
|
}
|
|
2134
2291
|
|
|
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-
|
|
2292
|
+
[data-ui][data-mode] :where(dd) { margin: .25rem 0 .75rem 1.25rem; }
|
|
2293
|
+
[data-ui][data-mode] :where(strong, b) { color: var(--usk-native-text); font-weight: 900; }
|
|
2294
|
+
[data-ui][data-mode] :where(u) { text-decoration-color: var(--usk-native-primary); text-decoration-thickness: .08em; text-underline-offset: .16em; }
|
|
2295
|
+
[data-ui][data-mode] :where(bdi, bdo) { color: var(--usk-native-text); unicode-bidi: isolate; }
|
|
2296
|
+
[data-ui][data-mode] :where(em, i, cite, var, q) { color: var(--usk-native-text); }
|
|
2297
|
+
[data-ui][data-mode] :where(ins) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-success); }
|
|
2298
|
+
[data-ui][data-mode] :where(del, s) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-danger); }
|
|
2299
|
+
[data-ui][data-mode] :where(output) { color: var(--usk-native-text); font-weight: 800; }
|
|
2300
|
+
[data-ui][data-mode] :where(optgroup, option) { color: var(--usk-native-text); background: var(--usk-native-surface); }
|
|
2301
|
+
[data-ui][data-mode] :where(time, data, dfn, ruby) { color: var(--usk-native-text); }
|
|
2302
|
+
[data-ui][data-mode] :where(search) { display: block; color: var(--usk-native-text); }
|
|
2303
|
+
[data-ui][data-mode] :where(selectedcontent) { color: var(--usk-native-text); }
|
|
2304
|
+
[data-ui][data-mode] :where(datalist) { display: none; }
|
|
2305
|
+
|
|
2306
|
+
[data-ui][data-mode] :where(summary, li)::marker {
|
|
2150
2307
|
color: var(--usk-native-indicator);
|
|
2151
2308
|
}
|
|
2152
2309
|
|
|
2153
|
-
[data-ui][data-
|
|
2154
|
-
opacity:
|
|
2310
|
+
[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 {
|
|
2311
|
+
opacity: var(--usk-native-indicator-opacity);
|
|
2312
|
+
filter: var(--usk-native-indicator-filter);
|
|
2155
2313
|
accent-color: var(--usk-native-indicator);
|
|
2156
2314
|
}
|
|
2157
2315
|
|
|
2158
|
-
[data-ui][data-
|
|
2316
|
+
[data-ui][data-mode] :where(input[type="search"])::-webkit-search-cancel-button {
|
|
2159
2317
|
accent-color: var(--usk-native-indicator);
|
|
2160
2318
|
}
|
|
2161
2319
|
|
|
2162
|
-
[data-ui][data-
|
|
2163
|
-
[data-ui][data-
|
|
2320
|
+
[data-ui][data-mode] :where(input[type="number"])::-webkit-inner-spin-button,
|
|
2321
|
+
[data-ui][data-mode] :where(input[type="number"])::-webkit-outer-spin-button {
|
|
2164
2322
|
opacity: .72;
|
|
2165
2323
|
}
|
|
2166
2324
|
|
|
2167
|
-
[data-ui][data-
|
|
2325
|
+
[data-ui][data-mode] :where(select)::picker-icon {
|
|
2168
2326
|
color: var(--usk-native-indicator);
|
|
2327
|
+
opacity: var(--usk-native-indicator-opacity);
|
|
2328
|
+
filter: var(--usk-native-indicator-filter);
|
|
2169
2329
|
}
|
|
2170
2330
|
|
|
2171
|
-
[data-ui][data-
|
|
2331
|
+
[data-ui][data-mode] :where(:focus-visible) {
|
|
2172
2332
|
outline: 3px solid var(--usk-native-focus);
|
|
2173
2333
|
outline-offset: 3px;
|
|
2174
2334
|
box-shadow: var(--usk-native-focus-ring);
|
|
2175
2335
|
}
|
|
2176
2336
|
|
|
2177
|
-
[data-ui][data-
|
|
2337
|
+
[data-ui][data-mode] :where(:target) {
|
|
2178
2338
|
scroll-margin-top: 6rem;
|
|
2179
2339
|
outline: 3px solid var(--usk-native-focus);
|
|
2180
2340
|
outline-offset: .35rem;
|
|
2181
2341
|
}
|
|
2182
2342
|
|
|
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-
|
|
2343
|
+
[data-ui][data-mode] :where([aria-current="page"]) { font-weight: 900; }
|
|
2344
|
+
[data-ui][data-mode] :where([aria-busy="true"]) { cursor: progress; }
|
|
2345
|
+
[data-ui][data-mode] :where([hidden]) { display: none !important; }
|
|
2346
|
+
[data-ui][data-mode] ::selection { color: var(--usk-native-on-primary); background: var(--usk-native-primary); }
|
|
2347
|
+
[data-ui][data-mode] ::-webkit-scrollbar { inline-size: var(--usk-native-scrollbar-size); block-size: var(--usk-native-scrollbar-size); }
|
|
2348
|
+
[data-ui][data-mode] ::-webkit-scrollbar-track { background: var(--usk-native-scrollbar-track); }
|
|
2349
|
+
[data-ui][data-mode] ::-webkit-scrollbar-thumb { background: var(--usk-native-scrollbar-thumb); border-radius: var(--usk-native-scrollbar-radius); }
|
|
2190
2350
|
|
|
2191
2351
|
@supports (color: color-mix(in srgb, black, white)) {
|
|
2192
|
-
[data-ui][data-
|
|
2352
|
+
[data-ui][data-mode] {
|
|
2193
2353
|
--usk-native-track: color-mix(in srgb, var(--usk-native-border) 50%, transparent);
|
|
2194
2354
|
}
|
|
2195
2355
|
|
|
2196
|
-
[data-ui][data-
|
|
2356
|
+
[data-ui][data-mode] :where(code, kbd, samp) {
|
|
2197
2357
|
border-color: color-mix(in srgb, var(--usk-native-border) 62%, transparent);
|
|
2198
2358
|
}
|
|
2199
2359
|
|
|
2200
|
-
[data-ui][data-
|
|
2360
|
+
[data-ui][data-mode] :where(mark) {
|
|
2201
2361
|
background: color-mix(in srgb, var(--usk-native-warning) 32%, transparent);
|
|
2202
2362
|
}
|
|
2203
2363
|
|
|
2204
|
-
[data-ui][data-
|
|
2364
|
+
[data-ui][data-mode] :where(fieldset) {
|
|
2205
2365
|
background: color-mix(in srgb, var(--usk-native-card-bg) 88%, transparent);
|
|
2206
2366
|
}
|
|
2207
2367
|
|
|
2208
|
-
[data-ui][data-
|
|
2368
|
+
[data-ui][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
|
|
2209
2369
|
background: color-mix(in srgb, var(--usk-native-surface-soft) 72%, transparent);
|
|
2210
2370
|
}
|
|
2211
2371
|
|
|
2212
|
-
[data-ui][data-
|
|
2372
|
+
[data-ui][data-mode] :where(th) {
|
|
2213
2373
|
background: color-mix(in srgb, var(--usk-native-primary) 10%, transparent);
|
|
2214
2374
|
}
|
|
2215
2375
|
}
|
|
2216
2376
|
|
|
2217
2377
|
@media (prefers-reduced-motion: reduce) {
|
|
2218
|
-
[data-ui][data-
|
|
2219
|
-
[data-ui][data-
|
|
2378
|
+
[data-ui][data-mode] :where(input[type="file"])::file-selector-button,
|
|
2379
|
+
[data-ui][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
|
|
2220
2380
|
transition-duration: 1ms !important;
|
|
2221
2381
|
}
|
|
2382
|
+
|
|
2383
|
+
[data-ui][data-mode] :where(progress:not([value])) {
|
|
2384
|
+
animation: none;
|
|
2385
|
+
}
|
|
2386
|
+
}
|
|
2387
|
+
|
|
2388
|
+
[data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-webkit-slider-runnable-track,
|
|
2389
|
+
[data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-webkit-slider-thumb,
|
|
2390
|
+
[data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-moz-range-track,
|
|
2391
|
+
[data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-moz-range-thumb,
|
|
2392
|
+
[data-ui][data-theme][data-mode="contrast"] :where(progress, meter),
|
|
2393
|
+
[data-ui][data-theme][data-mode="contrast"] :where(progress, meter)::-webkit-progress-bar,
|
|
2394
|
+
[data-ui][data-theme][data-mode="contrast"] :where(progress)::-webkit-progress-value,
|
|
2395
|
+
[data-ui][data-theme][data-mode="contrast"] :where(progress)::-moz-progress-bar {
|
|
2396
|
+
box-shadow: none;
|
|
2397
|
+
filter: none;
|
|
2222
2398
|
}
|
|
2223
2399
|
|
|
2224
2400
|
@media (forced-colors: active) {
|
|
2225
2401
|
@supports (forced-color-adjust: auto) {
|
|
2226
|
-
[data-ui][data-
|
|
2402
|
+
[data-ui][data-mode] :where(input, textarea, select, button, progress, meter) {
|
|
2227
2403
|
forced-color-adjust: auto;
|
|
2228
2404
|
}
|
|
2229
2405
|
}
|
|
2230
2406
|
|
|
2231
|
-
[data-ui][data-
|
|
2407
|
+
[data-ui][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
|
|
2232
2408
|
border-color: Mark;
|
|
2233
2409
|
}
|
|
2234
2410
|
}
|
|
@@ -2244,7 +2420,7 @@
|
|
|
2244
2420
|
========================================================= */
|
|
2245
2421
|
|
|
2246
2422
|
@layer ui-style-kit.components {
|
|
2247
|
-
[data-ui][data-
|
|
2423
|
+
[data-ui][data-mode] :where(
|
|
2248
2424
|
h1,
|
|
2249
2425
|
h2,
|
|
2250
2426
|
h3,
|
|
@@ -2261,6 +2437,9 @@
|
|
|
2261
2437
|
label,
|
|
2262
2438
|
legend,
|
|
2263
2439
|
summary,
|
|
2440
|
+
strong,
|
|
2441
|
+
small,
|
|
2442
|
+
em,
|
|
2264
2443
|
code,
|
|
2265
2444
|
kbd,
|
|
2266
2445
|
samp,
|
|
@@ -2270,10 +2449,11 @@
|
|
|
2270
2449
|
) {
|
|
2271
2450
|
max-inline-size: 100%;
|
|
2272
2451
|
min-inline-size: 0;
|
|
2273
|
-
overflow-wrap:
|
|
2452
|
+
overflow-wrap: break-word;
|
|
2453
|
+
word-break: normal;
|
|
2274
2454
|
}
|
|
2275
2455
|
|
|
2276
|
-
[data-ui][data-
|
|
2456
|
+
[data-ui][data-mode] :where(
|
|
2277
2457
|
[class~="saas-surface"],
|
|
2278
2458
|
[class~="saas-surface-sm"],
|
|
2279
2459
|
[class~="saas-surface-lg"],
|
|
@@ -2395,13 +2575,12 @@
|
|
|
2395
2575
|
[class~="rg-alert"],
|
|
2396
2576
|
[class~="rg-table-wrap"],
|
|
2397
2577
|
[class~="rg-nav"]
|
|
2398
|
-
), [data-ui]:where([data-ui="maximalist"])[data-
|
|
2578
|
+
), [data-ui]:where([data-ui="maximalist"])[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
2579
|
max-inline-size: 100%;
|
|
2400
2580
|
min-inline-size: 0;
|
|
2401
|
-
overflow-wrap: anywhere;
|
|
2402
2581
|
}
|
|
2403
2582
|
|
|
2404
|
-
[data-ui][data-
|
|
2583
|
+
[data-ui][data-mode] :where(
|
|
2405
2584
|
[class~="saas-button"],
|
|
2406
2585
|
[class~="saas-icon-button"],
|
|
2407
2586
|
[class~="saas-badge"],
|
|
@@ -2446,13 +2625,15 @@
|
|
|
2446
2625
|
[class~="rg-icon-button"],
|
|
2447
2626
|
[class~="rg-badge"],
|
|
2448
2627
|
[class~="rg-nav-link"]
|
|
2449
|
-
), [data-ui]:where([data-ui="maximalist"])[data-
|
|
2628
|
+
), [data-ui]:where([data-ui="maximalist"])[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
2629
|
max-inline-size: 100%;
|
|
2451
2630
|
min-inline-size: 0;
|
|
2631
|
+
overflow-wrap: break-word;
|
|
2632
|
+
word-break: normal;
|
|
2452
2633
|
white-space: normal;
|
|
2453
2634
|
}
|
|
2454
2635
|
|
|
2455
|
-
[data-ui][data-
|
|
2636
|
+
[data-ui][data-mode] :where(
|
|
2456
2637
|
.saas-button,
|
|
2457
2638
|
.saas-icon-button,
|
|
2458
2639
|
.saas-button-pill,
|
|
@@ -2486,7 +2667,7 @@
|
|
|
2486
2667
|
.rg-button,
|
|
2487
2668
|
.rg-icon-button,
|
|
2488
2669
|
.rg-button-pill
|
|
2489
|
-
), [data-ui]:where([data-ui="maximalist"])[data-
|
|
2670
|
+
), [data-ui]:where([data-ui="maximalist"])[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
2671
|
box-sizing: border-box;
|
|
2491
2672
|
display: inline-flex;
|
|
2492
2673
|
align-items: center;
|
|
@@ -2498,7 +2679,7 @@
|
|
|
2498
2679
|
vertical-align: middle;
|
|
2499
2680
|
}
|
|
2500
2681
|
|
|
2501
|
-
[data-ui][data-
|
|
2682
|
+
[data-ui][data-mode] :where(
|
|
2502
2683
|
.saas-button-pill,
|
|
2503
2684
|
.bento-button-pill,
|
|
2504
2685
|
.max-button-pill,
|
|
@@ -2521,7 +2702,8 @@
|
|
|
2521
2702
|
font-weight: 850;
|
|
2522
2703
|
text-align: center;
|
|
2523
2704
|
text-decoration: none;
|
|
2524
|
-
overflow-wrap:
|
|
2705
|
+
overflow-wrap: break-word;
|
|
2706
|
+
word-break: normal;
|
|
2525
2707
|
white-space: normal;
|
|
2526
2708
|
cursor: pointer;
|
|
2527
2709
|
transition:
|
|
@@ -2555,7 +2737,7 @@
|
|
|
2555
2737
|
.y2k-button-pill:hover { border-color: var(--y2k-primary-hover); filter: brightness(1.04); }
|
|
2556
2738
|
.rg-button-pill:hover { border-color: var(--rg-primary-hover); filter: brightness(1.04); }
|
|
2557
2739
|
|
|
2558
|
-
[data-ui][data-
|
|
2740
|
+
[data-ui][data-mode] :where(
|
|
2559
2741
|
.saas-button-pill:active,
|
|
2560
2742
|
.saas-button-pill[aria-pressed="true"],
|
|
2561
2743
|
.bento-button-pill:active,
|
|
@@ -2594,7 +2776,7 @@
|
|
|
2594
2776
|
.y2k-button-pill:focus-visible { outline: 3px solid var(--y2k-focus); outline-offset: 3px; box-shadow: var(--y2k-focus-ring); }
|
|
2595
2777
|
.rg-button-pill:focus-visible { outline: 3px solid var(--rg-focus); outline-offset: 3px; box-shadow: var(--rg-focus-ring); }
|
|
2596
2778
|
|
|
2597
|
-
[data-ui][data-
|
|
2779
|
+
[data-ui][data-mode] :where(
|
|
2598
2780
|
.saas-button-pill:disabled,
|
|
2599
2781
|
.saas-button-pill[aria-disabled="true"],
|
|
2600
2782
|
.bento-button-pill:disabled,
|
|
@@ -2624,7 +2806,7 @@
|
|
|
2624
2806
|
transform: none;
|
|
2625
2807
|
}
|
|
2626
2808
|
|
|
2627
|
-
[data-ui][data-
|
|
2809
|
+
[data-ui][data-mode] :where(
|
|
2628
2810
|
.saas-tooltip,
|
|
2629
2811
|
.saas-tooltip-top,
|
|
2630
2812
|
.saas-tooltip-right,
|
|
@@ -2683,16 +2865,17 @@
|
|
|
2683
2865
|
) {
|
|
2684
2866
|
max-inline-size: min(18rem, calc(100vw - 2rem));
|
|
2685
2867
|
text-align: start;
|
|
2686
|
-
overflow-wrap:
|
|
2868
|
+
overflow-wrap: break-word;
|
|
2869
|
+
word-break: normal;
|
|
2687
2870
|
}
|
|
2688
2871
|
|
|
2689
2872
|
/* Directional tooltips detach only from an explicit anchor so static tooltip chips keep normal-flow sizing. */
|
|
2690
|
-
[data-ui][data-
|
|
2691
|
-
[data-ui][data-
|
|
2873
|
+
[data-ui][data-mode]:where([data-ui-tooltip-anchor]),
|
|
2874
|
+
[data-ui][data-mode] :where([data-ui-tooltip-anchor]) {
|
|
2692
2875
|
position: relative;
|
|
2693
2876
|
}
|
|
2694
2877
|
|
|
2695
|
-
[data-ui][data-
|
|
2878
|
+
[data-ui][data-mode] :where(
|
|
2696
2879
|
[data-ui-tooltip-anchor] > .saas-tooltip-top,
|
|
2697
2880
|
[data-ui-tooltip-anchor] > .saas-tooltip-right,
|
|
2698
2881
|
[data-ui-tooltip-anchor] > .saas-tooltip-bottom,
|
|
@@ -2742,10 +2925,10 @@
|
|
|
2742
2925
|
z-index: 20;
|
|
2743
2926
|
}
|
|
2744
2927
|
|
|
2745
|
-
[data-ui][data-
|
|
2746
|
-
[data-ui][data-
|
|
2747
|
-
[data-ui][data-
|
|
2748
|
-
[data-ui][data-
|
|
2928
|
+
[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%); }
|
|
2929
|
+
[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%); }
|
|
2930
|
+
[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%); }
|
|
2931
|
+
[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
2932
|
|
|
2750
2933
|
.saas-pill { border-radius: var(--saas-radius-pill); }
|
|
2751
2934
|
.bento-pill { border-radius: var(--bento-radius-pill); }
|
|
@@ -2895,10 +3078,72 @@
|
|
|
2895
3078
|
}
|
|
2896
3079
|
}
|
|
2897
3080
|
|
|
3081
|
+
/**
|
|
3082
|
+
* Normalizes the split-line trust seal hierarchy across every visual preset.
|
|
3083
|
+
* Both lines inherit their seal's paired foreground instead of native page-text paint.
|
|
3084
|
+
* The root attributes intentionally raise specificity within the preset layer
|
|
3085
|
+
* so later style-specific defaults cannot collapse the number and caption.
|
|
3086
|
+
*/
|
|
3087
|
+
@layer ui-style-kit.presets {
|
|
3088
|
+
[data-ui][data-mode] :where(
|
|
3089
|
+
.saas-badge-seal,
|
|
3090
|
+
.bento-badge-seal,
|
|
3091
|
+
.max-badge-seal,
|
|
3092
|
+
.bau-badge-seal,
|
|
3093
|
+
.tactile-badge-seal,
|
|
3094
|
+
.neo-badge-seal,
|
|
3095
|
+
.retro-badge-seal,
|
|
3096
|
+
.brutal-badge-seal,
|
|
3097
|
+
.cyber-badge-seal,
|
|
3098
|
+
.y2k-badge-seal,
|
|
3099
|
+
.rg-badge-seal,
|
|
3100
|
+
.luxe-badge-seal,
|
|
3101
|
+
.organic-badge-seal,
|
|
3102
|
+
.utility-badge-seal,
|
|
3103
|
+
.blueprint-badge-seal,
|
|
3104
|
+
.deco-badge-seal,
|
|
3105
|
+
.clay-badge-seal,
|
|
3106
|
+
.terminal-badge-seal,
|
|
3107
|
+
.paper-badge-seal,
|
|
3108
|
+
.noir-badge-seal
|
|
3109
|
+
) > strong {
|
|
3110
|
+
color: inherit;
|
|
3111
|
+
font-size: 1.5rem;
|
|
3112
|
+
line-height: .9;
|
|
3113
|
+
}
|
|
3114
|
+
|
|
3115
|
+
[data-ui][data-mode] :where(
|
|
3116
|
+
.saas-badge-seal,
|
|
3117
|
+
.bento-badge-seal,
|
|
3118
|
+
.max-badge-seal,
|
|
3119
|
+
.bau-badge-seal,
|
|
3120
|
+
.tactile-badge-seal,
|
|
3121
|
+
.neo-badge-seal,
|
|
3122
|
+
.retro-badge-seal,
|
|
3123
|
+
.brutal-badge-seal,
|
|
3124
|
+
.cyber-badge-seal,
|
|
3125
|
+
.y2k-badge-seal,
|
|
3126
|
+
.rg-badge-seal,
|
|
3127
|
+
.luxe-badge-seal,
|
|
3128
|
+
.organic-badge-seal,
|
|
3129
|
+
.utility-badge-seal,
|
|
3130
|
+
.blueprint-badge-seal,
|
|
3131
|
+
.deco-badge-seal,
|
|
3132
|
+
.clay-badge-seal,
|
|
3133
|
+
.terminal-badge-seal,
|
|
3134
|
+
.paper-badge-seal,
|
|
3135
|
+
.noir-badge-seal
|
|
3136
|
+
) > small {
|
|
3137
|
+
color: inherit;
|
|
3138
|
+
font-size: .8125rem;
|
|
3139
|
+
line-height: 1;
|
|
3140
|
+
}
|
|
3141
|
+
}
|
|
3142
|
+
|
|
2898
3143
|
/* BEGIN GENERATED 2.2 PRESET COMPONENT FOUNDATIONS */
|
|
2899
3144
|
/* Generated by scripts/generate-expanded-components.mjs from manifest.json. */
|
|
2900
3145
|
@layer ui-style-kit.components {
|
|
2901
|
-
[data-ui][data-
|
|
3146
|
+
[data-ui][data-mode] :where(
|
|
2902
3147
|
.luxe-surface,
|
|
2903
3148
|
.luxe-surface-sm,
|
|
2904
3149
|
.luxe-surface-lg,
|
|
@@ -3061,13 +3306,12 @@
|
|
|
3061
3306
|
.noir-feature-item,
|
|
3062
3307
|
.noir-callout-bar,
|
|
3063
3308
|
.noir-media-scrim
|
|
3064
|
-
), [data-ui]:where([data-ui="maximalist"])[data-
|
|
3309
|
+
), [data-ui]:where([data-ui="maximalist"])[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
3310
|
max-inline-size: 100%;
|
|
3066
3311
|
min-inline-size: 0;
|
|
3067
|
-
overflow-wrap: anywhere;
|
|
3068
3312
|
}
|
|
3069
3313
|
|
|
3070
|
-
[data-ui][data-
|
|
3314
|
+
[data-ui][data-mode] :where(
|
|
3071
3315
|
.luxe-button,
|
|
3072
3316
|
.luxe-icon-button,
|
|
3073
3317
|
.luxe-button-cut,
|
|
@@ -3140,13 +3384,15 @@
|
|
|
3140
3384
|
.noir-badge-seal,
|
|
3141
3385
|
.noir-nav-link,
|
|
3142
3386
|
.noir-icon-medallion
|
|
3143
|
-
), [data-ui]:where([data-ui="maximalist"])[data-
|
|
3387
|
+
), [data-ui]:where([data-ui="maximalist"])[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
3388
|
max-inline-size: 100%;
|
|
3145
3389
|
min-inline-size: 0;
|
|
3390
|
+
overflow-wrap: break-word;
|
|
3391
|
+
word-break: normal;
|
|
3146
3392
|
white-space: normal;
|
|
3147
3393
|
}
|
|
3148
3394
|
|
|
3149
|
-
[data-ui][data-
|
|
3395
|
+
[data-ui][data-mode] :where(
|
|
3150
3396
|
.luxe-button,
|
|
3151
3397
|
.luxe-icon-button,
|
|
3152
3398
|
.luxe-button-pill,
|
|
@@ -3174,7 +3420,7 @@
|
|
|
3174
3420
|
.noir-button,
|
|
3175
3421
|
.noir-icon-button,
|
|
3176
3422
|
.noir-button-pill
|
|
3177
|
-
), [data-ui]:where([data-ui="maximalist"])[data-
|
|
3423
|
+
), [data-ui]:where([data-ui="maximalist"])[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
3424
|
box-sizing: border-box;
|
|
3179
3425
|
display: inline-flex;
|
|
3180
3426
|
align-items: center;
|
|
@@ -3186,7 +3432,7 @@
|
|
|
3186
3432
|
vertical-align: middle;
|
|
3187
3433
|
}
|
|
3188
3434
|
|
|
3189
|
-
[data-ui][data-
|
|
3435
|
+
[data-ui][data-mode] :where(
|
|
3190
3436
|
.luxe-button-pill,
|
|
3191
3437
|
.organic-button-pill,
|
|
3192
3438
|
.utility-button-pill,
|
|
@@ -3207,7 +3453,8 @@
|
|
|
3207
3453
|
font-weight: 850;
|
|
3208
3454
|
text-align: center;
|
|
3209
3455
|
text-decoration: none;
|
|
3210
|
-
overflow-wrap:
|
|
3456
|
+
overflow-wrap: break-word;
|
|
3457
|
+
word-break: normal;
|
|
3211
3458
|
white-space: normal;
|
|
3212
3459
|
cursor: pointer;
|
|
3213
3460
|
transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease;
|
|
@@ -3294,7 +3541,7 @@
|
|
|
3294
3541
|
.noir-rounded-xl { border-radius: var(--noir-radius-xl); }
|
|
3295
3542
|
.noir-surface, .noir-surface-sm, .noir-surface-lg { color: var(--noir-text); background: var(--noir-card-bg); border: 1px solid var(--noir-border); }
|
|
3296
3543
|
|
|
3297
|
-
[data-ui][data-
|
|
3544
|
+
[data-ui][data-mode] :where(
|
|
3298
3545
|
.luxe-button-pill:active,
|
|
3299
3546
|
.luxe-button-pill[aria-pressed="true"],
|
|
3300
3547
|
.organic-button-pill:active,
|
|
@@ -3315,7 +3562,7 @@
|
|
|
3315
3562
|
.noir-button-pill[aria-pressed="true"]
|
|
3316
3563
|
) { transform: translateY(1px); }
|
|
3317
3564
|
|
|
3318
|
-
[data-ui][data-
|
|
3565
|
+
[data-ui][data-mode] :where(
|
|
3319
3566
|
.luxe-button-pill:disabled,
|
|
3320
3567
|
.luxe-button-pill[aria-disabled="true"],
|
|
3321
3568
|
.organic-button-pill:disabled,
|
|
@@ -3336,7 +3583,7 @@
|
|
|
3336
3583
|
.noir-button-pill[aria-disabled="true"]
|
|
3337
3584
|
) { opacity: .55; cursor: not-allowed; filter: none; transform: none; }
|
|
3338
3585
|
|
|
3339
|
-
[data-ui][data-
|
|
3586
|
+
[data-ui][data-mode] :where(
|
|
3340
3587
|
.luxe-tooltip,
|
|
3341
3588
|
.luxe-tooltip-top,
|
|
3342
3589
|
.luxe-tooltip-right,
|
|
@@ -3382,9 +3629,9 @@
|
|
|
3382
3629
|
.noir-tooltip-right,
|
|
3383
3630
|
.noir-tooltip-bottom,
|
|
3384
3631
|
.noir-tooltip-left
|
|
3385
|
-
) { max-inline-size: min(18rem, calc(100vw - 2rem)); text-align: start; overflow-wrap:
|
|
3632
|
+
) { max-inline-size: min(18rem, calc(100vw - 2rem)); text-align: start; overflow-wrap: break-word; word-break: normal; }
|
|
3386
3633
|
|
|
3387
|
-
[data-ui][data-
|
|
3634
|
+
[data-ui][data-mode] :where(
|
|
3388
3635
|
[data-ui-tooltip-anchor] > .luxe-tooltip-top,
|
|
3389
3636
|
[data-ui-tooltip-anchor] > .luxe-tooltip-right,
|
|
3390
3637
|
[data-ui-tooltip-anchor] > .luxe-tooltip-bottom,
|
|
@@ -3423,10 +3670,10 @@
|
|
|
3423
3670
|
[data-ui-tooltip-anchor] > .noir-tooltip-left
|
|
3424
3671
|
) { position: absolute; z-index: 20; }
|
|
3425
3672
|
|
|
3426
|
-
[data-ui][data-
|
|
3427
|
-
[data-ui][data-
|
|
3428
|
-
[data-ui][data-
|
|
3429
|
-
[data-ui][data-
|
|
3673
|
+
[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%); }
|
|
3674
|
+
[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%); }
|
|
3675
|
+
[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%); }
|
|
3676
|
+
[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
3677
|
|
|
3431
3678
|
: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
3679
|
: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); }
|
|
@@ -3506,17 +3753,17 @@
|
|
|
3506
3753
|
/* styles/maximalist.css (visual paint) */
|
|
3507
3754
|
@layer ui-style-kit.presets {
|
|
3508
3755
|
:root {
|
|
3509
|
-
--max-font-sans:
|
|
3510
|
-
--max-font-display:
|
|
3756
|
+
--max-font-sans: "Arial Narrow", "Roboto Condensed", "Bahnschrift Condensed", "Aptos Narrow", Arial, ui-sans-serif, system-ui, sans-serif;
|
|
3757
|
+
--max-font-display: "Arial Narrow", "Roboto Condensed", "Bahnschrift Condensed", "Aptos Narrow", Arial, ui-sans-serif, system-ui, sans-serif;
|
|
3511
3758
|
--max-font-body: var(--max-font-sans);
|
|
3512
3759
|
--max-font-heading: var(--max-font-display);
|
|
3513
3760
|
--max-font-control: var(--max-font-display);
|
|
3514
3761
|
--max-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
|
3515
|
-
--max-radius-xs:
|
|
3516
|
-
--max-radius-sm:
|
|
3517
|
-
--max-radius-md:
|
|
3518
|
-
--max-radius-lg:
|
|
3519
|
-
--max-radius-xl:
|
|
3762
|
+
--max-radius-xs: 0;
|
|
3763
|
+
--max-radius-sm: 0;
|
|
3764
|
+
--max-radius-md: 0;
|
|
3765
|
+
--max-radius-lg: 0;
|
|
3766
|
+
--max-radius-xl: 0;
|
|
3520
3767
|
--max-radius-pill: 999px;
|
|
3521
3768
|
--max-space-1: .25rem;
|
|
3522
3769
|
--max-space-2: .5rem;
|
|
@@ -3533,28 +3780,97 @@
|
|
|
3533
3780
|
--lightningcss-light: initial;
|
|
3534
3781
|
--lightningcss-dark: ;
|
|
3535
3782
|
color-scheme: light;
|
|
3536
|
-
--max-
|
|
3537
|
-
--max-
|
|
3538
|
-
--max-
|
|
3539
|
-
--max-
|
|
3540
|
-
--max-
|
|
3783
|
+
--max-fallback-bg-rgb: 244 237 218;
|
|
3784
|
+
--max-fallback-surface-rgb: 255 250 238;
|
|
3785
|
+
--max-fallback-surface-strong-rgb: 255 250 240;
|
|
3786
|
+
--max-fallback-surface-soft-rgb: 239 228 202;
|
|
3787
|
+
--max-fallback-text-rgb: 9 9 11;
|
|
3788
|
+
--max-fallback-text-muted-rgb: 86 80 74;
|
|
3789
|
+
--max-fallback-border-rgb: 9 9 11;
|
|
3790
|
+
--max-fallback-primary-rgb: 240 45 22;
|
|
3791
|
+
--max-fallback-primary-hover-rgb: 240 45 22;
|
|
3792
|
+
--max-fallback-primary-text-rgb: 9 9 11;
|
|
3793
|
+
--max-fallback-secondary-rgb: 16 190 213;
|
|
3794
|
+
--max-fallback-secondary-hover-rgb: 0 151 173;
|
|
3795
|
+
--max-fallback-secondary-text-rgb: 9 9 11;
|
|
3796
|
+
--max-fallback-accent-rgb: 94 22 216;
|
|
3797
|
+
--max-fallback-accent-text-rgb: 255 250 240;
|
|
3798
|
+
--max-fallback-success-rgb: 18 155 120;
|
|
3799
|
+
--max-fallback-success-text-rgb: 9 9 11;
|
|
3800
|
+
--max-fallback-warning-rgb: 255 210 10;
|
|
3801
|
+
--max-fallback-warning-text-rgb: 9 9 11;
|
|
3802
|
+
--max-fallback-danger-rgb: 238 23 99;
|
|
3803
|
+
--max-fallback-danger-text-rgb: 9 9 11;
|
|
3804
|
+
--max-fallback-link-rgb: 94 22 216;
|
|
3805
|
+
--max-fallback-focus-rgb: 94 22 216;
|
|
3806
|
+
--max-panel-alpha: 1;
|
|
3807
|
+
--max-panel-soft-alpha: 1;
|
|
3808
|
+
--max-border-alpha: 1;
|
|
3809
|
+
--max-shadow-alpha: 1;
|
|
3810
|
+
--max-focus-alpha: .68;
|
|
3541
3811
|
}
|
|
3542
3812
|
|
|
3543
3813
|
[data-ui="maximalist"][data-mode="dark"] {
|
|
3544
3814
|
--lightningcss-light: ;
|
|
3545
3815
|
--lightningcss-dark: initial;
|
|
3546
3816
|
color-scheme: dark;
|
|
3547
|
-
--max-
|
|
3548
|
-
--max-
|
|
3549
|
-
--max-
|
|
3550
|
-
--max-
|
|
3551
|
-
--max-
|
|
3817
|
+
--max-fallback-bg-rgb: 10 11 13;
|
|
3818
|
+
--max-fallback-surface-rgb: 14 15 18;
|
|
3819
|
+
--max-fallback-surface-strong-rgb: 16 17 20;
|
|
3820
|
+
--max-fallback-surface-soft-rgb: 29 27 34;
|
|
3821
|
+
--max-fallback-text-rgb: 245 234 214;
|
|
3822
|
+
--max-fallback-text-muted-rgb: 200 186 169;
|
|
3823
|
+
--max-fallback-border-rgb: 241 227 204;
|
|
3824
|
+
--max-fallback-primary-rgb: 255 53 31;
|
|
3825
|
+
--max-fallback-primary-hover-rgb: 255 103 84;
|
|
3826
|
+
--max-fallback-primary-text-rgb: 9 9 11;
|
|
3827
|
+
--max-fallback-secondary-rgb: 24 212 232;
|
|
3828
|
+
--max-fallback-secondary-hover-rgb: 81 228 241;
|
|
3829
|
+
--max-fallback-secondary-text-rgb: 9 9 11;
|
|
3830
|
+
--max-fallback-accent-rgb: 129 44 244;
|
|
3831
|
+
--max-fallback-accent-text-rgb: 245 234 214;
|
|
3832
|
+
--max-fallback-success-rgb: 25 184 139;
|
|
3833
|
+
--max-fallback-success-text-rgb: 9 9 11;
|
|
3834
|
+
--max-fallback-warning-rgb: 255 218 25;
|
|
3835
|
+
--max-fallback-warning-text-rgb: 9 9 11;
|
|
3836
|
+
--max-fallback-danger-rgb: 255 40 110;
|
|
3837
|
+
--max-fallback-danger-text-rgb: 9 9 11;
|
|
3838
|
+
--max-fallback-link-rgb: 24 212 232;
|
|
3839
|
+
--max-fallback-focus-rgb: 255 218 25;
|
|
3840
|
+
--max-panel-alpha: 1;
|
|
3841
|
+
--max-panel-soft-alpha: 1;
|
|
3842
|
+
--max-border-alpha: 1;
|
|
3843
|
+
--max-shadow-alpha: 1;
|
|
3844
|
+
--max-focus-alpha: .74;
|
|
3552
3845
|
}
|
|
3553
3846
|
|
|
3554
3847
|
[data-ui="maximalist"][data-mode="contrast"] {
|
|
3555
3848
|
--lightningcss-light: ;
|
|
3556
3849
|
--lightningcss-dark: initial;
|
|
3557
3850
|
color-scheme: dark;
|
|
3851
|
+
--max-fallback-bg-rgb: 0 0 0;
|
|
3852
|
+
--max-fallback-surface-rgb: 5 11 0;
|
|
3853
|
+
--max-fallback-surface-strong-rgb: 11 22 0;
|
|
3854
|
+
--max-fallback-surface-soft-rgb: 0 0 0;
|
|
3855
|
+
--max-fallback-text-rgb: 255 255 255;
|
|
3856
|
+
--max-fallback-text-muted-rgb: 244 255 232;
|
|
3857
|
+
--max-fallback-border-rgb: 255 255 255;
|
|
3858
|
+
--max-fallback-primary-rgb: 170 255 0;
|
|
3859
|
+
--max-fallback-primary-hover-rgb: 255 255 255;
|
|
3860
|
+
--max-fallback-primary-text-rgb: 0 0 0;
|
|
3861
|
+
--max-fallback-secondary-rgb: 0 240 255;
|
|
3862
|
+
--max-fallback-secondary-hover-rgb: 255 255 255;
|
|
3863
|
+
--max-fallback-secondary-text-rgb: 0 0 0;
|
|
3864
|
+
--max-fallback-accent-rgb: 204 255 0;
|
|
3865
|
+
--max-fallback-accent-text-rgb: 0 0 0;
|
|
3866
|
+
--max-fallback-success-rgb: 0 255 117;
|
|
3867
|
+
--max-fallback-success-text-rgb: 0 0 0;
|
|
3868
|
+
--max-fallback-warning-rgb: 255 225 0;
|
|
3869
|
+
--max-fallback-warning-text-rgb: 0 0 0;
|
|
3870
|
+
--max-fallback-danger-rgb: 255 48 48;
|
|
3871
|
+
--max-fallback-danger-text-rgb: 0 0 0;
|
|
3872
|
+
--max-fallback-link-rgb: 170 255 0;
|
|
3873
|
+
--max-fallback-focus-rgb: 255 255 255;
|
|
3558
3874
|
--max-panel-alpha: 1;
|
|
3559
3875
|
--max-panel-soft-alpha: .92;
|
|
3560
3876
|
--max-border-alpha: 1;
|
|
@@ -3577,15 +3893,42 @@
|
|
|
3577
3893
|
--max-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
|
|
3578
3894
|
--max-secondary-text-rgb: var(--usk-secondary-text-rgb);
|
|
3579
3895
|
--max-accent-rgb: var(--usk-accent-rgb);
|
|
3580
|
-
--max-success-rgb: var(--usk-success-rgb);
|
|
3581
|
-
--max-warning-rgb: var(--usk-warning-rgb);
|
|
3582
|
-
--max-danger-rgb: var(--usk-danger-rgb);
|
|
3583
|
-
--max-link-rgb: var(--usk-link-rgb);
|
|
3584
3896
|
--max-accent-text-rgb: var(--usk-accent-text-rgb);
|
|
3897
|
+
--max-success-rgb: var(--usk-success-rgb);
|
|
3585
3898
|
--max-success-text-rgb: var(--usk-success-text-rgb);
|
|
3899
|
+
--max-warning-rgb: var(--usk-warning-rgb);
|
|
3586
3900
|
--max-warning-text-rgb: var(--usk-warning-text-rgb);
|
|
3901
|
+
--max-danger-rgb: var(--usk-danger-rgb);
|
|
3587
3902
|
--max-danger-text-rgb: var(--usk-danger-text-rgb);
|
|
3903
|
+
--max-link-rgb: var(--usk-link-rgb);
|
|
3588
3904
|
--max-focus-rgb: var(--usk-focus-rgb);
|
|
3905
|
+
}
|
|
3906
|
+
|
|
3907
|
+
[data-ui="maximalist"][data-mode] {
|
|
3908
|
+
--usk-native-bg: var(--max-bg);
|
|
3909
|
+
--max-bg-rgb: var(--usk-bg-rgb, var(--max-fallback-bg-rgb));
|
|
3910
|
+
--max-surface-rgb: var(--usk-surface-rgb, var(--max-fallback-surface-rgb));
|
|
3911
|
+
--max-surface-strong-rgb: var(--usk-surface-strong-rgb, var(--max-fallback-surface-strong-rgb));
|
|
3912
|
+
--max-surface-soft-rgb: var(--usk-surface-soft-rgb, var(--max-fallback-surface-soft-rgb));
|
|
3913
|
+
--max-text-rgb: var(--usk-text-rgb, var(--max-fallback-text-rgb));
|
|
3914
|
+
--max-text-muted-rgb: var(--usk-text-muted-rgb, var(--max-fallback-text-muted-rgb));
|
|
3915
|
+
--max-border-rgb: var(--usk-border-rgb, var(--max-fallback-border-rgb));
|
|
3916
|
+
--max-primary-rgb: var(--usk-primary-rgb, var(--max-fallback-primary-rgb));
|
|
3917
|
+
--max-primary-hover-rgb: var(--usk-primary-hover-rgb, var(--max-fallback-primary-hover-rgb));
|
|
3918
|
+
--max-primary-text-rgb: var(--usk-primary-text-rgb, var(--max-fallback-primary-text-rgb));
|
|
3919
|
+
--max-secondary-rgb: var(--usk-secondary-rgb, var(--max-fallback-secondary-rgb));
|
|
3920
|
+
--max-secondary-hover-rgb: var(--usk-secondary-hover-rgb, var(--max-fallback-secondary-hover-rgb));
|
|
3921
|
+
--max-secondary-text-rgb: var(--usk-secondary-text-rgb, var(--max-fallback-secondary-text-rgb));
|
|
3922
|
+
--max-accent-rgb: var(--usk-accent-rgb, var(--max-fallback-accent-rgb));
|
|
3923
|
+
--max-accent-text-rgb: var(--usk-accent-text-rgb, var(--max-fallback-accent-text-rgb));
|
|
3924
|
+
--max-success-rgb: var(--usk-success-rgb, var(--max-fallback-success-rgb));
|
|
3925
|
+
--max-success-text-rgb: var(--usk-success-text-rgb, var(--max-fallback-success-text-rgb));
|
|
3926
|
+
--max-warning-rgb: var(--usk-warning-rgb, var(--max-fallback-warning-rgb));
|
|
3927
|
+
--max-warning-text-rgb: var(--usk-warning-text-rgb, var(--max-fallback-warning-text-rgb));
|
|
3928
|
+
--max-danger-rgb: var(--usk-danger-rgb, var(--max-fallback-danger-rgb));
|
|
3929
|
+
--max-danger-text-rgb: var(--usk-danger-text-rgb, var(--max-fallback-danger-text-rgb));
|
|
3930
|
+
--max-link-rgb: var(--usk-link-rgb, var(--max-fallback-link-rgb));
|
|
3931
|
+
--max-focus-rgb: var(--usk-focus-rgb, var(--max-fallback-focus-rgb));
|
|
3589
3932
|
--usk-native-surface: var(--max-surface);
|
|
3590
3933
|
--usk-native-surface-strong: var(--max-surface-strong);
|
|
3591
3934
|
--usk-native-surface-soft: var(--max-surface-soft);
|
|
@@ -3612,9 +3955,60 @@
|
|
|
3612
3955
|
--usk-native-shadow: var(--max-shadow-sm, none);
|
|
3613
3956
|
--usk-native-shadow-md: var(--max-shadow-md, var(--usk-native-shadow));
|
|
3614
3957
|
--usk-native-focus-ring: var(--max-focus-ring, 0 0 0 3px rgb(var(--max-focus-rgb) / .28));
|
|
3615
|
-
--usk-native-border-width:
|
|
3616
|
-
--usk-native-field-gap: .
|
|
3958
|
+
--usk-native-border-width: 2px;
|
|
3959
|
+
--usk-native-field-gap: .46rem;
|
|
3617
3960
|
--usk-native-panel-padding: var(--max-space-5);
|
|
3961
|
+
--usk-native-control-min-block-size: 3rem;
|
|
3962
|
+
--usk-native-control-padding-block: .62rem;
|
|
3963
|
+
--usk-native-control-padding-inline: .9rem;
|
|
3964
|
+
--usk-native-subcontrol-padding-block: .52rem;
|
|
3965
|
+
--usk-native-subcontrol-padding-inline: .72rem;
|
|
3966
|
+
--usk-native-choice-size: 1.25rem;
|
|
3967
|
+
--usk-native-choice-background: var(--max-paper-bg);
|
|
3968
|
+
--usk-native-choice-border: 2px solid var(--max-ink);
|
|
3969
|
+
--usk-native-checkbox-radius: .08rem;
|
|
3970
|
+
--usk-native-radio-radius: 50%;
|
|
3971
|
+
--usk-native-choice-shadow: .18rem .18rem 0 rgb(var(--max-secondary-rgb) / .72);
|
|
3972
|
+
--usk-native-choice-checked-background: var(--max-primary);
|
|
3973
|
+
--usk-native-choice-mark-color: var(--max-on-primary);
|
|
3974
|
+
--usk-native-select-indicator-image: linear-gradient(33deg, transparent 50%, var(--max-primary) 50%), linear-gradient(147deg, var(--max-primary) 50%, transparent 50%);
|
|
3975
|
+
--usk-native-select-indicator-size: .42rem .42rem, .42rem .42rem;
|
|
3976
|
+
--usk-native-select-indicator-position: calc(100% - 1.16rem) 50%, calc(100% - .84rem) 50%;
|
|
3977
|
+
--usk-native-select-padding-inline-end: 2.55rem;
|
|
3978
|
+
--usk-native-range-track-size: .72rem;
|
|
3979
|
+
--usk-native-range-track-background: var(--max-paper-bg);
|
|
3980
|
+
--usk-native-range-track-border: 2px solid var(--max-ink);
|
|
3981
|
+
--usk-native-range-track-radius: 0;
|
|
3982
|
+
--usk-native-range-track-shadow: .22rem .22rem 0 var(--max-ink);
|
|
3983
|
+
--usk-native-range-progress-background: var(--max-warning);
|
|
3984
|
+
--usk-native-range-thumb-size: 1.62rem;
|
|
3985
|
+
--usk-native-range-thumb-background: var(--max-warning);
|
|
3986
|
+
--usk-native-range-thumb-border: 3px solid var(--max-ink);
|
|
3987
|
+
--usk-native-range-thumb-radius: 50%;
|
|
3988
|
+
--usk-native-range-thumb-shadow: .18rem .18rem 0 rgb(var(--max-secondary-rgb) / .8);
|
|
3989
|
+
--usk-native-progress-size: .95rem;
|
|
3990
|
+
--usk-native-progress-track-background: var(--max-paper-bg);
|
|
3991
|
+
--usk-native-progress-track-border: 2px solid var(--max-ink);
|
|
3992
|
+
--usk-native-progress-track-radius: 0;
|
|
3993
|
+
--usk-native-progress-track-shadow: .22rem .22rem 0 var(--max-ink);
|
|
3994
|
+
--usk-native-progress-value-background: repeating-linear-gradient(90deg, rgb(var(--max-text-rgb) / .28) 0 .08rem, transparent .08rem 2rem), linear-gradient(90deg, var(--max-warning), var(--max-accent), var(--max-primary));
|
|
3995
|
+
--usk-native-progress-value-radius: 0;
|
|
3996
|
+
--usk-native-progress-value-shadow: .12rem 0 0 rgb(var(--max-text-rgb) / .36);
|
|
3997
|
+
--usk-native-meter-optimum-background: var(--max-success);
|
|
3998
|
+
--usk-native-meter-suboptimum-background: var(--max-warning);
|
|
3999
|
+
--usk-native-meter-critical-background: var(--max-danger);
|
|
4000
|
+
--usk-native-file-button-background: var(--max-primary);
|
|
4001
|
+
--usk-native-file-button-border: 2px solid var(--max-ink);
|
|
4002
|
+
--usk-native-file-button-radius: .12rem;
|
|
4003
|
+
--usk-native-file-button-shadow: .22rem .22rem 0 var(--max-ink);
|
|
4004
|
+
--usk-native-color-swatch-border: 2px solid var(--max-ink);
|
|
4005
|
+
--usk-native-color-swatch-radius: .12rem;
|
|
4006
|
+
--usk-native-indicator-opacity: .82;
|
|
4007
|
+
--usk-native-indicator-filter: none;
|
|
4008
|
+
--usk-native-scrollbar-size: 1rem;
|
|
4009
|
+
--usk-native-scrollbar-track: var(--max-surface-soft);
|
|
4010
|
+
--usk-native-scrollbar-thumb: var(--max-primary);
|
|
4011
|
+
--usk-native-scrollbar-radius: .12rem;
|
|
3618
4012
|
--max-bg: rgb(var(--max-bg-rgb));
|
|
3619
4013
|
--max-surface: rgb(var(--max-surface-rgb) / var(--max-panel-alpha));
|
|
3620
4014
|
--max-surface-strong: rgb(var(--max-surface-strong-rgb) / var(--max-panel-alpha));
|
|
@@ -3645,23 +4039,35 @@
|
|
|
3645
4039
|
--max-link: rgb(var(--max-link-rgb));
|
|
3646
4040
|
--max-focus: rgb(var(--max-focus-rgb));
|
|
3647
4041
|
--max-focus-ring: 0 0 0 3px rgb(var(--max-focus-rgb) / var(--max-focus-alpha));
|
|
3648
|
-
--max-
|
|
3649
|
-
--max-
|
|
3650
|
-
--max-
|
|
3651
|
-
--max-
|
|
4042
|
+
--max-ink: rgb(var(--max-text-rgb));
|
|
4043
|
+
--max-on-ink: rgb(var(--max-bg-rgb));
|
|
4044
|
+
--max-paper-wash: rgb(var(--max-warning-rgb) / .08);
|
|
4045
|
+
--max-paper-grain: radial-gradient(circle at 14% 18%, rgb(var(--max-text-rgb) / .055) 0 1px, transparent 1.4px), radial-gradient(circle at 72% 64%, rgb(var(--max-danger-rgb) / .07) 0 1px, transparent 1.5px);
|
|
4046
|
+
--max-paper-bg: var(--max-surface-strong);
|
|
4047
|
+
--max-poster-fill: var(--max-primary);
|
|
4048
|
+
--max-label-bg: var(--max-primary);
|
|
4049
|
+
--max-label-fg: var(--max-on-primary);
|
|
4050
|
+
--max-pop-shadow: 5px 5px 0 var(--max-ink);
|
|
4051
|
+
--max-sticker-shadow: 3px 3px 0 var(--max-ink);
|
|
4052
|
+
--max-shadow-sm: 3px 3px 0 var(--max-ink);
|
|
4053
|
+
--max-shadow-md: 5px 5px 0 var(--max-ink);
|
|
4054
|
+
--max-theme-bg-size: 9rem 9rem, 13rem 13rem, auto;
|
|
4055
|
+
--max-theme-bg: radial-gradient(circle at 16% 24%, rgb(var(--max-secondary-rgb) / .09) 0 1px, transparent 1.5px), radial-gradient(circle at 82% 68%, rgb(var(--max-danger-rgb) / .08) 0 1px, transparent 1.6px), var(--max-bg);
|
|
4056
|
+
--max-card-bg: var(--max-paper-grain), var(--max-surface);
|
|
4057
|
+
--max-control-bg: var(--max-surface-strong);
|
|
3652
4058
|
--max-spinner-track: rgb(var(--max-border-rgb) / max(.28, calc(var(--max-border-alpha) * .7)));
|
|
3653
4059
|
--max-spinner-stroke: var(--max-primary);
|
|
3654
4060
|
--max-spinner-accent: var(--max-accent);
|
|
3655
4061
|
}
|
|
3656
4062
|
|
|
3657
4063
|
@supports (color: color-mix(in srgb,black,white)) {
|
|
3658
|
-
[data-ui="maximalist"][data-
|
|
4064
|
+
[data-ui="maximalist"][data-mode] {
|
|
3659
4065
|
--max-border: color-mix(in srgb, rgb(var(--max-border-rgb) / max(var(--max-border-alpha), var(--usk-border-min-alpha))), var(--max-text) var(--usk-border-text-mix));
|
|
3660
4066
|
}
|
|
3661
4067
|
}
|
|
3662
4068
|
|
|
3663
4069
|
[data-ui="maximalist"] {
|
|
3664
|
-
background:
|
|
4070
|
+
background: repeating-linear-gradient(135deg,rgb(var(--max-primary-rgb)/.12)0 1rem,transparent 1rem 2rem),radial-gradient(circle at 90% 0%,rgb(var(--max-secondary-rgb)/.2),transparent 22rem),var(--max-bg);
|
|
3665
4071
|
color: var(--max-text);
|
|
3666
4072
|
font-family: var(--max-font-body);
|
|
3667
4073
|
text-rendering: optimizelegibility;
|
|
@@ -3674,21 +4080,24 @@
|
|
|
3674
4080
|
box-sizing: border-box;
|
|
3675
4081
|
}
|
|
3676
4082
|
|
|
3677
|
-
[data-ui="maximalist"][data-
|
|
4083
|
+
[data-ui="maximalist"][data-mode] {
|
|
3678
4084
|
background: var(--max-theme-bg);
|
|
3679
4085
|
background-size: var(--max-theme-bg-size);
|
|
3680
4086
|
}
|
|
3681
4087
|
|
|
3682
4088
|
.max-title, .max-heading, .max-kicker, .max-button, .max-badge, .max-nav-link, :where([data-ui="maximalist"]) .ui-button, :where([data-ui="maximalist"]) .ui-badge, :where([data-ui="maximalist"]) .ui-nav-link {
|
|
3683
4089
|
font-family: var(--max-font-heading);
|
|
4090
|
+
text-transform: uppercase;
|
|
3684
4091
|
}
|
|
3685
4092
|
|
|
3686
4093
|
.max-title {
|
|
3687
4094
|
color: var(--max-text);
|
|
3688
|
-
letter-spacing:
|
|
4095
|
+
letter-spacing: .015em;
|
|
4096
|
+
text-transform: uppercase;
|
|
3689
4097
|
margin: 0;
|
|
3690
|
-
font-size: clamp(
|
|
3691
|
-
|
|
4098
|
+
font-size: clamp(2.4rem, 7vw, 5.8rem);
|
|
4099
|
+
font-weight: 950;
|
|
4100
|
+
line-height: .86;
|
|
3692
4101
|
}
|
|
3693
4102
|
|
|
3694
4103
|
@supports (text-wrap: balance) {
|
|
@@ -3699,25 +4108,33 @@
|
|
|
3699
4108
|
|
|
3700
4109
|
.max-heading {
|
|
3701
4110
|
color: var(--max-text);
|
|
3702
|
-
letter-spacing:
|
|
4111
|
+
letter-spacing: .02em;
|
|
4112
|
+
text-transform: uppercase;
|
|
3703
4113
|
margin: 0;
|
|
3704
|
-
font-size: clamp(1.
|
|
3705
|
-
|
|
4114
|
+
font-size: clamp(1.35rem, 3vw, 2.45rem);
|
|
4115
|
+
font-weight: 950;
|
|
4116
|
+
line-height: .95;
|
|
3706
4117
|
}
|
|
3707
4118
|
|
|
3708
4119
|
.max-kicker {
|
|
3709
|
-
|
|
3710
|
-
|
|
4120
|
+
background: var(--max-label-bg);
|
|
4121
|
+
width: fit-content;
|
|
4122
|
+
color: var(--max-label-fg);
|
|
4123
|
+
border: 2px solid var(--max-ink);
|
|
4124
|
+
letter-spacing: .08em;
|
|
3711
4125
|
text-transform: uppercase;
|
|
3712
4126
|
margin: 0;
|
|
3713
|
-
|
|
3714
|
-
font-
|
|
4127
|
+
padding: .18rem .6rem;
|
|
4128
|
+
font-size: .8rem;
|
|
4129
|
+
font-weight: 950;
|
|
4130
|
+
display: inline-flex;
|
|
4131
|
+
transform: rotate(-1deg);
|
|
3715
4132
|
}
|
|
3716
4133
|
|
|
3717
4134
|
.max-subtitle, .max-copy {
|
|
3718
4135
|
color: var(--max-text-muted);
|
|
3719
4136
|
margin: 0;
|
|
3720
|
-
line-height: 1.
|
|
4137
|
+
line-height: 1.5;
|
|
3721
4138
|
}
|
|
3722
4139
|
|
|
3723
4140
|
.max-text-muted {
|
|
@@ -3725,18 +4142,19 @@
|
|
|
3725
4142
|
}
|
|
3726
4143
|
|
|
3727
4144
|
.max-divider {
|
|
3728
|
-
background: var(--max-
|
|
3729
|
-
border: 0;
|
|
4145
|
+
background: var(--max-ink);
|
|
3730
4146
|
width: 100%;
|
|
3731
4147
|
height: 3px;
|
|
4148
|
+
box-shadow: .18rem .18rem 0 rgb(var(--max-secondary-rgb)/.72);
|
|
4149
|
+
border: 0;
|
|
3732
4150
|
}
|
|
3733
4151
|
|
|
3734
4152
|
.max-surface, .max-card, .max-panel, .max-toolbar, .max-table-wrap, :where([data-ui="maximalist"]) .ui-card, :where([data-ui="maximalist"]) .ui-toolbar, :where([data-ui="maximalist"]) .ui-table-wrap {
|
|
3735
|
-
background:
|
|
4153
|
+
background: var(--max-card-bg);
|
|
3736
4154
|
color: var(--max-text);
|
|
3737
|
-
border: 3px solid var(--max-
|
|
4155
|
+
border: 3px solid var(--max-ink);
|
|
3738
4156
|
border-radius: var(--max-radius-lg);
|
|
3739
|
-
box-shadow:
|
|
4157
|
+
box-shadow: var(--max-pop-shadow);
|
|
3740
4158
|
transition: transform var(--max-transition-base),box-shadow var(--max-transition-base),border-color var(--max-transition-base),background var(--max-transition-base);
|
|
3741
4159
|
position: relative;
|
|
3742
4160
|
}
|
|
@@ -3756,26 +4174,26 @@
|
|
|
3756
4174
|
|
|
3757
4175
|
.max-surface-sm {
|
|
3758
4176
|
border-radius: var(--max-radius-md);
|
|
3759
|
-
box-shadow:
|
|
4177
|
+
box-shadow: var(--max-shadow-sm);
|
|
3760
4178
|
}
|
|
3761
4179
|
|
|
3762
4180
|
.max-surface-lg {
|
|
3763
4181
|
border-radius: var(--max-radius-xl);
|
|
3764
|
-
box-shadow:
|
|
4182
|
+
box-shadow: var(--max-shadow-md);
|
|
3765
4183
|
}
|
|
3766
4184
|
|
|
3767
4185
|
.max-well, .max-inset {
|
|
3768
|
-
background: var(--max-
|
|
4186
|
+
background: var(--max-paper-bg);
|
|
3769
4187
|
color: var(--max-text);
|
|
3770
|
-
border:
|
|
4188
|
+
border: 2px solid var(--max-ink);
|
|
3771
4189
|
border-radius: var(--max-radius-md);
|
|
3772
4190
|
padding: var(--max-space-5);
|
|
3773
|
-
box-shadow:
|
|
4191
|
+
box-shadow: .22rem .22rem 0 rgb(var(--max-primary-rgb)/.5);
|
|
3774
4192
|
}
|
|
3775
4193
|
|
|
3776
4194
|
.max-hover-lift:hover {
|
|
3777
|
-
box-shadow:
|
|
3778
|
-
transform: translate(-
|
|
4195
|
+
box-shadow: .55rem .55rem 0 var(--max-ink);
|
|
4196
|
+
transform: translate(-3px, -3px) rotate(-.4deg);
|
|
3779
4197
|
}
|
|
3780
4198
|
|
|
3781
4199
|
.max-button, .max-icon-button, :where([data-ui="maximalist"]) .ui-button, :where([data-ui="maximalist"]) .ui-icon-button {
|
|
@@ -3783,49 +4201,40 @@
|
|
|
3783
4201
|
justify-content: center;
|
|
3784
4202
|
align-items: center;
|
|
3785
4203
|
gap: var(--max-space-2);
|
|
3786
|
-
background: var(--max-
|
|
4204
|
+
background: var(--max-paper-bg);
|
|
3787
4205
|
min-height: 2.75rem;
|
|
3788
4206
|
color: var(--max-text);
|
|
3789
|
-
border: 3px solid var(--max-
|
|
3790
|
-
border-radius: var(--max-radius-
|
|
3791
|
-
box-shadow:
|
|
4207
|
+
border: 3px solid var(--max-ink);
|
|
4208
|
+
border-radius: var(--max-radius-sm);
|
|
4209
|
+
box-shadow: .26rem .26rem 0 var(--max-ink);
|
|
3792
4210
|
font: inherit;
|
|
4211
|
+
letter-spacing: .035em;
|
|
3793
4212
|
cursor: pointer;
|
|
3794
4213
|
-webkit-user-select: none;
|
|
3795
4214
|
user-select: none;
|
|
4215
|
+
text-transform: uppercase;
|
|
3796
4216
|
transition: color var(--max-transition-fast),background var(--max-transition-fast),border-color var(--max-transition-fast),box-shadow var(--max-transition-fast),transform var(--max-transition-fast);
|
|
3797
|
-
padding: .
|
|
3798
|
-
font-weight:
|
|
3799
|
-
line-height:
|
|
4217
|
+
padding: .72rem 1.08rem;
|
|
4218
|
+
font-weight: 950;
|
|
4219
|
+
line-height: .95;
|
|
3800
4220
|
text-decoration: none;
|
|
3801
4221
|
display: inline-flex;
|
|
3802
4222
|
}
|
|
3803
4223
|
|
|
3804
4224
|
.max-button:hover, .max-icon-button:hover, :where([data-ui="maximalist"]) .ui-button:hover, :where([data-ui="maximalist"]) .ui-icon-button:hover {
|
|
3805
|
-
border-color: var(--max-
|
|
3806
|
-
|
|
4225
|
+
border-color: var(--max-ink);
|
|
4226
|
+
box-shadow: .4rem .4rem 0 rgb(var(--max-secondary-rgb)/.76);
|
|
4227
|
+
transform: translate(-2px, -2px);
|
|
3807
4228
|
}
|
|
3808
4229
|
|
|
3809
4230
|
.max-button:active, .max-icon-button:active, .max-button[aria-pressed="true"], .max-icon-button[aria-pressed="true"], .max-button.is-active, .max-icon-button.is-active, :where([data-ui="maximalist"]) .ui-button:active, :where([data-ui="maximalist"]) .ui-icon-button:active, :where([data-ui="maximalist"]) .ui-button[aria-pressed="true"], :where([data-ui="maximalist"]) .ui-icon-button[aria-pressed="true"], :where([data-ui="maximalist"]) .ui-button.is-active, :where([data-ui="maximalist"]) .ui-icon-button.is-active {
|
|
3810
|
-
|
|
3811
|
-
|
|
3812
|
-
}
|
|
3813
|
-
|
|
3814
|
-
.max-button-primary, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="primary"]) {
|
|
3815
|
-
background: var(--max-primary);
|
|
3816
|
-
color: var(--max-on-primary);
|
|
3817
|
-
border-color: var(--max-primary);
|
|
4231
|
+
box-shadow: .12rem .12rem 0 var(--max-ink);
|
|
4232
|
+
transform: translate(.12rem, .12rem);
|
|
3818
4233
|
}
|
|
3819
4234
|
|
|
3820
4235
|
.max-button-primary:hover, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="primary"]):hover {
|
|
3821
|
-
background: var(--max-primary-hover);
|
|
3822
|
-
border-color: var(--max-
|
|
3823
|
-
}
|
|
3824
|
-
|
|
3825
|
-
.max-button-secondary, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="secondary"]) {
|
|
3826
|
-
background: var(--max-secondary);
|
|
3827
|
-
color: var(--max-on-secondary);
|
|
3828
|
-
border-color: var(--max-secondary);
|
|
4236
|
+
background: linear-gradient(110deg,var(--max-primary-hover),var(--max-danger),var(--max-accent));
|
|
4237
|
+
border-color: var(--max-ink);
|
|
3829
4238
|
}
|
|
3830
4239
|
|
|
3831
4240
|
.max-button-secondary:hover, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="secondary"]):hover {
|
|
@@ -3833,20 +4242,15 @@
|
|
|
3833
4242
|
border-color: var(--max-secondary-hover);
|
|
3834
4243
|
}
|
|
3835
4244
|
|
|
3836
|
-
.max-button-danger, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="danger"]) {
|
|
3837
|
-
background: var(--max-danger);
|
|
3838
|
-
color: var(--max-on-danger);
|
|
3839
|
-
border-color: var(--max-danger);
|
|
3840
|
-
}
|
|
3841
|
-
|
|
3842
4245
|
.max-button-ghost, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="ghost"]) {
|
|
3843
4246
|
color: var(--max-text);
|
|
3844
4247
|
box-shadow: none;
|
|
3845
4248
|
background: none;
|
|
4249
|
+
border-style: dashed;
|
|
3846
4250
|
}
|
|
3847
4251
|
|
|
3848
4252
|
.max-icon-button, :where([data-ui="maximalist"]) .ui-icon-button {
|
|
3849
|
-
border-radius: var(--max-radius-
|
|
4253
|
+
border-radius: var(--max-radius-sm);
|
|
3850
4254
|
width: 2.75rem;
|
|
3851
4255
|
padding: 0;
|
|
3852
4256
|
}
|
|
@@ -3861,7 +4265,7 @@
|
|
|
3861
4265
|
background: var(--max-card-bg);
|
|
3862
4266
|
}
|
|
3863
4267
|
|
|
3864
|
-
.max-toolbar, .max-table-wrap, .max-button:not(.max-button-primary):not(.max-button-secondary):not(.max-button-danger):not(.max-button-ghost), .max-icon-button, :where([data-ui="maximalist"]) .ui-toolbar, :where([data-ui="maximalist"]) .ui-table-wrap, :where([data-ui="maximalist"]) .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="maximalist"]) .ui-icon-button {
|
|
4268
|
+
.max-toolbar, .max-table-wrap, .max-button:not(.max-button-primary):not(.max-button-secondary):not(.max-button-danger):not(.max-button-warning):not(.max-button-ghost):not(.max-button-outline-heavy), .max-icon-button, :where([data-ui="maximalist"]) .ui-toolbar, :where([data-ui="maximalist"]) .ui-table-wrap, :where([data-ui="maximalist"]) .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"])):not(.max-button-outline-heavy), :where([data-ui="maximalist"]) .ui-icon-button {
|
|
3865
4269
|
background: var(--max-control-bg);
|
|
3866
4270
|
}
|
|
3867
4271
|
|
|
@@ -3877,26 +4281,29 @@
|
|
|
3877
4281
|
|
|
3878
4282
|
.max-label, :where([data-ui="maximalist"]) .ui-label {
|
|
3879
4283
|
color: var(--max-text);
|
|
3880
|
-
|
|
3881
|
-
|
|
4284
|
+
letter-spacing: .06em;
|
|
4285
|
+
text-transform: uppercase;
|
|
4286
|
+
font-size: .82rem;
|
|
4287
|
+
font-weight: 950;
|
|
3882
4288
|
}
|
|
3883
4289
|
|
|
3884
4290
|
.max-input, .max-textarea, .max-select, :where([data-ui="maximalist"]) .ui-input, :where([data-ui="maximalist"]) .ui-textarea, :where([data-ui="maximalist"]) .ui-select {
|
|
3885
|
-
background: var(--max-
|
|
4291
|
+
background: var(--max-paper-bg);
|
|
3886
4292
|
width: 100%;
|
|
3887
|
-
min-height: 2.
|
|
4293
|
+
min-height: 2.75rem;
|
|
3888
4294
|
color: var(--max-text);
|
|
3889
|
-
border:
|
|
3890
|
-
border-radius: var(--max-radius-
|
|
4295
|
+
border: 2px solid var(--max-ink);
|
|
4296
|
+
border-radius: var(--max-radius-sm);
|
|
4297
|
+
box-shadow: .16rem .16rem 0 rgb(var(--max-secondary-rgb)/.45);
|
|
3891
4298
|
font: inherit;
|
|
3892
4299
|
transition: background var(--max-transition-fast),border-color var(--max-transition-fast),box-shadow var(--max-transition-fast);
|
|
3893
4300
|
outline: none;
|
|
3894
|
-
padding: .
|
|
4301
|
+
padding: .68rem .9rem;
|
|
3895
4302
|
}
|
|
3896
4303
|
|
|
3897
4304
|
.max-textarea, :where([data-ui="maximalist"]) .ui-textarea {
|
|
3898
4305
|
resize: vertical;
|
|
3899
|
-
min-height:
|
|
4306
|
+
min-height: 7rem;
|
|
3900
4307
|
}
|
|
3901
4308
|
|
|
3902
4309
|
.max-input::placeholder, .max-textarea::placeholder, :where([data-ui="maximalist"]) .ui-input::placeholder, :where([data-ui="maximalist"]) .ui-textarea::placeholder {
|
|
@@ -3904,15 +4311,6 @@
|
|
|
3904
4311
|
opacity: .82;
|
|
3905
4312
|
}
|
|
3906
4313
|
|
|
3907
|
-
.max-input:hover, .max-textarea:hover, .max-select:hover, :where([data-ui="maximalist"]) .ui-input:hover, :where([data-ui="maximalist"]) .ui-textarea:hover, :where([data-ui="maximalist"]) .ui-select:hover {
|
|
3908
|
-
border-color: rgb(var(--max-primary-rgb)/.58);
|
|
3909
|
-
}
|
|
3910
|
-
|
|
3911
|
-
.max-input:focus, .max-textarea:focus, .max-select:focus, :where([data-ui="maximalist"]) .ui-input:focus, :where([data-ui="maximalist"]) .ui-textarea:focus, :where([data-ui="maximalist"]) .ui-select:focus {
|
|
3912
|
-
border-color: var(--max-focus);
|
|
3913
|
-
box-shadow: var(--max-focus-ring);
|
|
3914
|
-
}
|
|
3915
|
-
|
|
3916
4314
|
.max-help-text, :where([data-ui="maximalist"]) .ui-help-text {
|
|
3917
4315
|
color: var(--max-text-muted);
|
|
3918
4316
|
font-size: .875rem;
|
|
@@ -3934,10 +4332,11 @@
|
|
|
3934
4332
|
}
|
|
3935
4333
|
|
|
3936
4334
|
.max-check-control, .max-radio-control, :where([data-ui="maximalist"]) .ui-check-control, :where([data-ui="maximalist"]) .ui-radio-control {
|
|
3937
|
-
background: var(--max-
|
|
3938
|
-
border:
|
|
3939
|
-
width: 1.
|
|
3940
|
-
height: 1.
|
|
4335
|
+
background: var(--max-paper-bg);
|
|
4336
|
+
border: 2px solid var(--max-ink);
|
|
4337
|
+
width: 1.25rem;
|
|
4338
|
+
height: 1.25rem;
|
|
4339
|
+
box-shadow: .12rem .12rem 0 rgb(var(--max-secondary-rgb)/.52);
|
|
3941
4340
|
transition: background var(--max-transition-fast),box-shadow var(--max-transition-fast);
|
|
3942
4341
|
place-items: center;
|
|
3943
4342
|
display: inline-grid;
|
|
@@ -3953,8 +4352,8 @@
|
|
|
3953
4352
|
|
|
3954
4353
|
.max-check input:checked + .max-check-control, .max-radio input:checked + .max-radio-control, :where([data-ui="maximalist"]) .ui-check input:checked+.ui-check-control, :where([data-ui="maximalist"]) .ui-radio input:checked+.ui-radio-control {
|
|
3955
4354
|
background: var(--max-primary);
|
|
3956
|
-
border-color: var(--max-
|
|
3957
|
-
box-shadow: var(--max-focus-ring);
|
|
4355
|
+
border-color: var(--max-ink);
|
|
4356
|
+
box-shadow: .12rem .12rem 0 var(--max-ink),var(--max-focus-ring);
|
|
3958
4357
|
}
|
|
3959
4358
|
|
|
3960
4359
|
.max-check input:checked + .max-check-control:after, :where([data-ui="maximalist"]) .ui-check input:checked+.ui-check-control:after {
|
|
@@ -3987,49 +4386,54 @@
|
|
|
3987
4386
|
}
|
|
3988
4387
|
|
|
3989
4388
|
.max-switch-track, :where([data-ui="maximalist"]) .ui-switch-track {
|
|
3990
|
-
background: var(--max-
|
|
3991
|
-
border:
|
|
4389
|
+
background: linear-gradient(90deg,var(--max-success),var(--max-warning),var(--max-danger));
|
|
4390
|
+
border: 2px solid var(--max-ink);
|
|
3992
4391
|
border-radius: var(--max-radius-pill);
|
|
3993
|
-
width: 3.
|
|
3994
|
-
height: 1.
|
|
4392
|
+
width: 3.4rem;
|
|
4393
|
+
height: 1.7rem;
|
|
4394
|
+
box-shadow: .18rem .18rem 0 var(--max-ink);
|
|
3995
4395
|
transition: background var(--max-transition-fast),box-shadow var(--max-transition-fast);
|
|
3996
4396
|
position: relative;
|
|
3997
4397
|
}
|
|
3998
4398
|
|
|
3999
4399
|
.max-switch-thumb, :where([data-ui="maximalist"]) .ui-switch-thumb {
|
|
4000
|
-
background: var(--max-
|
|
4001
|
-
border:
|
|
4002
|
-
width: 1.
|
|
4003
|
-
height: 1.
|
|
4004
|
-
box-shadow:
|
|
4400
|
+
background: var(--max-paper-bg);
|
|
4401
|
+
border: 2px solid var(--max-ink);
|
|
4402
|
+
width: 1.1rem;
|
|
4403
|
+
height: 1.1rem;
|
|
4404
|
+
box-shadow: .08rem .08rem 0 rgb(var(--max-secondary-rgb)/.72);
|
|
4005
4405
|
transition: left var(--max-transition-fast),background var(--max-transition-fast);
|
|
4006
4406
|
border-radius: 50%;
|
|
4007
4407
|
position: absolute;
|
|
4008
|
-
top: .
|
|
4009
|
-
left: .
|
|
4408
|
+
top: .18rem;
|
|
4409
|
+
left: .18rem;
|
|
4010
4410
|
}
|
|
4011
4411
|
|
|
4012
4412
|
.max-switch input:checked + .max-switch-track, :where([data-ui="maximalist"]) .ui-switch input:checked+.ui-switch-track {
|
|
4013
4413
|
background: var(--max-primary);
|
|
4014
|
-
border-color: var(--max-
|
|
4414
|
+
border-color: var(--max-ink);
|
|
4015
4415
|
}
|
|
4016
4416
|
|
|
4017
4417
|
.max-switch input:checked + .max-switch-track .max-switch-thumb, :where([data-ui="maximalist"]) .ui-switch input:checked+.ui-switch-track .ui-switch-thumb {
|
|
4018
4418
|
background: var(--max-on-primary);
|
|
4019
|
-
left: calc(100% - 1.
|
|
4419
|
+
left: calc(100% - 1.28rem);
|
|
4020
4420
|
}
|
|
4021
4421
|
|
|
4022
4422
|
.max-badge, :where([data-ui="maximalist"]) .ui-badge {
|
|
4023
4423
|
align-items: center;
|
|
4024
4424
|
gap: var(--max-space-1);
|
|
4025
|
-
background: var(--max-
|
|
4026
|
-
min-height: 1.
|
|
4425
|
+
background: var(--max-paper-bg);
|
|
4426
|
+
min-height: 1.7rem;
|
|
4027
4427
|
color: var(--max-text);
|
|
4028
|
-
border:
|
|
4029
|
-
border-radius: var(--max-radius-
|
|
4030
|
-
|
|
4031
|
-
|
|
4032
|
-
|
|
4428
|
+
border: 2px solid var(--max-ink);
|
|
4429
|
+
border-radius: var(--max-radius-xs);
|
|
4430
|
+
box-shadow: .14rem .14rem 0 rgb(var(--max-secondary-rgb)/.62);
|
|
4431
|
+
clip-path: polygon(.32rem 0, 100% 0, calc(100% - .32rem) 100%, 0 100%);
|
|
4432
|
+
letter-spacing: .055em;
|
|
4433
|
+
text-transform: uppercase;
|
|
4434
|
+
padding: .35rem .78rem;
|
|
4435
|
+
font-size: .78rem;
|
|
4436
|
+
font-weight: 950;
|
|
4033
4437
|
line-height: 1;
|
|
4034
4438
|
display: inline-flex;
|
|
4035
4439
|
}
|
|
@@ -4037,54 +4441,56 @@
|
|
|
4037
4441
|
.max-badge-primary, :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="primary"]) {
|
|
4038
4442
|
background: var(--max-primary);
|
|
4039
4443
|
color: var(--max-on-primary);
|
|
4040
|
-
border-color: var(--max-
|
|
4444
|
+
border-color: var(--max-ink);
|
|
4041
4445
|
}
|
|
4042
4446
|
|
|
4043
4447
|
.max-badge-secondary, :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="secondary"]) {
|
|
4044
4448
|
background: var(--max-secondary);
|
|
4045
4449
|
color: var(--max-on-secondary);
|
|
4046
|
-
border-color: var(--max-
|
|
4450
|
+
border-color: var(--max-ink);
|
|
4047
4451
|
}
|
|
4048
4452
|
|
|
4049
4453
|
.max-badge-success, :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="success"]) {
|
|
4050
4454
|
background: var(--max-success);
|
|
4051
4455
|
color: var(--max-on-success);
|
|
4052
|
-
border-color: var(--max-
|
|
4456
|
+
border-color: var(--max-ink);
|
|
4053
4457
|
}
|
|
4054
4458
|
|
|
4055
4459
|
.max-badge-warning, :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="warning"]) {
|
|
4056
4460
|
background: var(--max-warning);
|
|
4057
4461
|
color: var(--max-on-warning);
|
|
4058
|
-
border-color: var(--max-
|
|
4462
|
+
border-color: var(--max-ink);
|
|
4059
4463
|
}
|
|
4060
4464
|
|
|
4061
4465
|
.max-badge-danger, :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="danger"]) {
|
|
4062
4466
|
background: var(--max-danger);
|
|
4063
4467
|
color: var(--max-on-danger);
|
|
4064
|
-
border-color: var(--max-
|
|
4468
|
+
border-color: var(--max-ink);
|
|
4065
4469
|
}
|
|
4066
4470
|
|
|
4067
4471
|
.max-nav, :where([data-ui="maximalist"]) .ui-nav {
|
|
4068
4472
|
align-items: center;
|
|
4069
4473
|
gap: var(--max-space-2);
|
|
4070
4474
|
padding: var(--max-space-2);
|
|
4071
|
-
background: var(--max-
|
|
4072
|
-
border: 3px solid var(--max-
|
|
4073
|
-
border-radius: var(--max-radius-
|
|
4074
|
-
box-shadow:
|
|
4475
|
+
background: var(--max-label-bg);
|
|
4476
|
+
border: 3px solid var(--max-ink);
|
|
4477
|
+
border-radius: var(--max-radius-lg);
|
|
4478
|
+
box-shadow: var(--max-pop-shadow);
|
|
4075
4479
|
flex-wrap: wrap;
|
|
4076
4480
|
display: flex;
|
|
4077
4481
|
}
|
|
4078
4482
|
|
|
4079
4483
|
.max-nav-link, :where([data-ui="maximalist"]) .ui-nav-link {
|
|
4080
|
-
min-height: 2.
|
|
4081
|
-
color: var(--max-
|
|
4082
|
-
border-radius: var(--max-radius-
|
|
4083
|
-
|
|
4484
|
+
min-height: 2.45rem;
|
|
4485
|
+
color: var(--max-label-fg);
|
|
4486
|
+
border-radius: var(--max-radius-sm);
|
|
4487
|
+
letter-spacing: .045em;
|
|
4488
|
+
text-transform: uppercase;
|
|
4489
|
+
transition: color var(--max-transition-fast),background var(--max-transition-fast),box-shadow var(--max-transition-fast),transform var(--max-transition-fast);
|
|
4084
4490
|
justify-content: center;
|
|
4085
4491
|
align-items: center;
|
|
4086
|
-
padding: .
|
|
4087
|
-
font-weight:
|
|
4492
|
+
padding: .62rem 1rem;
|
|
4493
|
+
font-weight: 950;
|
|
4088
4494
|
text-decoration: none;
|
|
4089
4495
|
display: inline-flex;
|
|
4090
4496
|
}
|
|
@@ -4097,14 +4503,16 @@
|
|
|
4097
4503
|
.max-nav-link[aria-current="page"], .max-nav-link.is-active, :where([data-ui="maximalist"]) .ui-nav-link[aria-current="page"], :where([data-ui="maximalist"]) .ui-nav-link.is-active {
|
|
4098
4504
|
color: var(--max-on-primary);
|
|
4099
4505
|
background: var(--max-primary);
|
|
4506
|
+
box-shadow: .18rem .18rem 0 rgb(var(--max-secondary-rgb)/.75);
|
|
4507
|
+
transform: rotate(-1deg);
|
|
4100
4508
|
}
|
|
4101
4509
|
|
|
4102
4510
|
.max-tooltip, [data-ui="maximalist"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
|
|
4103
|
-
background:
|
|
4511
|
+
background: var(--max-label-bg);
|
|
4104
4512
|
max-inline-size: 16rem;
|
|
4105
|
-
color: var(--max-
|
|
4106
|
-
border: 3px solid var(--max-
|
|
4107
|
-
border-radius: var(--max-radius-
|
|
4513
|
+
color: var(--max-label-fg);
|
|
4514
|
+
border: 3px solid var(--max-ink);
|
|
4515
|
+
border-radius: var(--max-radius-sm);
|
|
4108
4516
|
box-shadow: .32rem .32rem 0 rgb(var(--max-secondary-rgb)/.68);
|
|
4109
4517
|
text-transform: uppercase;
|
|
4110
4518
|
letter-spacing: .04em;
|
|
@@ -4119,7 +4527,7 @@
|
|
|
4119
4527
|
|
|
4120
4528
|
.max-tooltip-arrow {
|
|
4121
4529
|
background: var(--max-warning);
|
|
4122
|
-
border: 2px solid var(--max-
|
|
4530
|
+
border: 2px solid var(--max-ink);
|
|
4123
4531
|
flex: none;
|
|
4124
4532
|
block-size: .62rem;
|
|
4125
4533
|
inline-size: .62rem;
|
|
@@ -4127,47 +4535,55 @@
|
|
|
4127
4535
|
}
|
|
4128
4536
|
|
|
4129
4537
|
.max-progress, :where([data-ui="maximalist"]) .ui-progress {
|
|
4130
|
-
background: var(--max-
|
|
4131
|
-
border:
|
|
4132
|
-
border-radius: var(--max-radius-
|
|
4538
|
+
background: var(--max-paper-bg);
|
|
4539
|
+
border: 2px solid var(--max-ink);
|
|
4540
|
+
border-radius: var(--max-radius-sm);
|
|
4133
4541
|
width: 100%;
|
|
4134
|
-
height: .
|
|
4542
|
+
height: 1.05rem;
|
|
4543
|
+
box-shadow: .2rem .2rem 0 var(--max-ink);
|
|
4544
|
+
padding: .12rem;
|
|
4135
4545
|
overflow: hidden;
|
|
4136
4546
|
}
|
|
4137
4547
|
|
|
4138
4548
|
.max-progress-bar, :where([data-ui="maximalist"]) .ui-progress-bar {
|
|
4139
4549
|
height: 100%;
|
|
4140
4550
|
width: var(--max-progress-value, 50%);
|
|
4141
|
-
background: linear-gradient(90deg,var(--max-
|
|
4142
|
-
border-radius:
|
|
4551
|
+
background: repeating-linear-gradient(90deg,rgb(var(--max-text-rgb)/.24)0 .08rem,transparent .08rem 2rem),linear-gradient(90deg,var(--max-warning),var(--max-accent),var(--max-primary));
|
|
4552
|
+
border-radius: var(--max-radius-xs);
|
|
4143
4553
|
}
|
|
4144
4554
|
|
|
4145
4555
|
.max-alert, :where([data-ui="maximalist"]) .ui-alert {
|
|
4146
4556
|
gap: var(--max-space-2);
|
|
4147
4557
|
padding: var(--max-space-4);
|
|
4148
|
-
background: var(--max-
|
|
4558
|
+
background: var(--max-paper-bg);
|
|
4149
4559
|
color: var(--max-text);
|
|
4150
|
-
border: 3px solid var(--max-
|
|
4560
|
+
border: 3px solid var(--max-ink);
|
|
4151
4561
|
border-radius: var(--max-radius-lg);
|
|
4152
|
-
box-shadow:
|
|
4562
|
+
box-shadow: var(--max-pop-shadow);
|
|
4153
4563
|
display: grid;
|
|
4154
4564
|
}
|
|
4155
4565
|
|
|
4156
4566
|
.max-alert-success, :where([data-ui="maximalist"]) .ui-alert:where([data-ui-variant="success"]) {
|
|
4157
|
-
|
|
4567
|
+
background: linear-gradient(90deg,rgb(var(--max-success-rgb)/.18),transparent 42%),var(--max-paper-bg);
|
|
4568
|
+
border-left: .7rem solid var(--max-success);
|
|
4158
4569
|
}
|
|
4159
4570
|
|
|
4160
4571
|
.max-alert-warning, :where([data-ui="maximalist"]) .ui-alert:where([data-ui-variant="warning"]) {
|
|
4161
|
-
|
|
4572
|
+
background: linear-gradient(90deg,rgb(var(--max-warning-rgb)/.2),transparent 42%),var(--max-paper-bg);
|
|
4573
|
+
border-left: .7rem solid var(--max-warning);
|
|
4162
4574
|
}
|
|
4163
4575
|
|
|
4164
4576
|
.max-alert-danger, :where([data-ui="maximalist"]) .ui-alert:where([data-ui-variant="danger"]) {
|
|
4165
|
-
|
|
4577
|
+
background: linear-gradient(90deg,rgb(var(--max-danger-rgb)/.2),transparent 42%),var(--max-paper-bg);
|
|
4578
|
+
border-left: .7rem solid var(--max-danger);
|
|
4166
4579
|
}
|
|
4167
4580
|
|
|
4168
4581
|
.max-alert-title, :where([data-ui="maximalist"]) .ui-alert-title {
|
|
4582
|
+
font-family: var(--max-font-heading);
|
|
4583
|
+
letter-spacing: .04em;
|
|
4584
|
+
text-transform: uppercase;
|
|
4169
4585
|
margin: 0;
|
|
4170
|
-
font-weight:
|
|
4586
|
+
font-weight: 950;
|
|
4171
4587
|
}
|
|
4172
4588
|
|
|
4173
4589
|
.max-alert-body, :where([data-ui="maximalist"]) .ui-alert-body {
|
|
@@ -4176,10 +4592,6 @@
|
|
|
4176
4592
|
line-height: 1.55;
|
|
4177
4593
|
}
|
|
4178
4594
|
|
|
4179
|
-
.max-table-wrap, :where([data-ui="maximalist"]) .ui-table-wrap {
|
|
4180
|
-
overflow: auto;
|
|
4181
|
-
}
|
|
4182
|
-
|
|
4183
4595
|
.max-table, :where([data-ui="maximalist"]) .ui-table {
|
|
4184
4596
|
border-collapse: collapse;
|
|
4185
4597
|
width: 100%;
|
|
@@ -4187,17 +4599,18 @@
|
|
|
4187
4599
|
|
|
4188
4600
|
.max-table th, .max-table td, :where([data-ui="maximalist"]) .ui-table th, :where([data-ui="maximalist"]) .ui-table td {
|
|
4189
4601
|
text-align: left;
|
|
4190
|
-
border-bottom:
|
|
4191
|
-
padding: .
|
|
4602
|
+
border-bottom: 2px solid var(--max-ink);
|
|
4603
|
+
padding: .85rem 1rem;
|
|
4192
4604
|
}
|
|
4193
4605
|
|
|
4194
4606
|
.max-table th, :where([data-ui="maximalist"]) .ui-table th {
|
|
4195
|
-
color: var(--max-
|
|
4607
|
+
color: var(--max-label-fg);
|
|
4608
|
+
font-family: var(--max-font-heading);
|
|
4196
4609
|
text-transform: uppercase;
|
|
4197
4610
|
letter-spacing: .08em;
|
|
4198
|
-
background:
|
|
4199
|
-
font-size: .
|
|
4200
|
-
font-weight:
|
|
4611
|
+
background: var(--max-label-bg);
|
|
4612
|
+
font-size: .8rem;
|
|
4613
|
+
font-weight: 950;
|
|
4201
4614
|
}
|
|
4202
4615
|
|
|
4203
4616
|
.max-table td, :where([data-ui="maximalist"]) .ui-table td {
|
|
@@ -4243,7 +4656,7 @@
|
|
|
4243
4656
|
}
|
|
4244
4657
|
|
|
4245
4658
|
.max-border {
|
|
4246
|
-
border: 3px solid var(--max-
|
|
4659
|
+
border: 3px solid var(--max-ink);
|
|
4247
4660
|
}
|
|
4248
4661
|
|
|
4249
4662
|
.max-rounded {
|
|
@@ -4294,11 +4707,15 @@
|
|
|
4294
4707
|
.max-sticker {
|
|
4295
4708
|
background: var(--max-accent);
|
|
4296
4709
|
color: var(--max-on-accent);
|
|
4297
|
-
border: 3px solid var(--max-
|
|
4298
|
-
border-radius: var(--max-radius-
|
|
4299
|
-
box-shadow:
|
|
4710
|
+
border: 3px solid var(--max-ink);
|
|
4711
|
+
border-radius: var(--max-radius-xs);
|
|
4712
|
+
box-shadow: var(--max-sticker-shadow);
|
|
4713
|
+
clip-path: polygon(.42rem 0, 100% 0, calc(100% - .32rem) 100%, 0 100%);
|
|
4714
|
+
font-family: var(--max-font-heading);
|
|
4715
|
+
letter-spacing: .05em;
|
|
4716
|
+
text-transform: uppercase;
|
|
4300
4717
|
align-items: center;
|
|
4301
|
-
padding: .
|
|
4718
|
+
padding: .42rem .85rem;
|
|
4302
4719
|
font-weight: 950;
|
|
4303
4720
|
display: inline-flex;
|
|
4304
4721
|
transform: rotate(-2deg);
|
|
@@ -4306,11 +4723,12 @@
|
|
|
4306
4723
|
|
|
4307
4724
|
.max-callout {
|
|
4308
4725
|
padding: var(--max-space-6);
|
|
4309
|
-
background:
|
|
4726
|
+
background: var(--max-poster-fill);
|
|
4310
4727
|
color: var(--max-on-primary);
|
|
4311
|
-
border: 3px solid var(--max-
|
|
4312
|
-
border-radius: var(--max-radius-
|
|
4313
|
-
box-shadow:
|
|
4728
|
+
border: 3px solid var(--max-ink);
|
|
4729
|
+
border-radius: var(--max-radius-lg);
|
|
4730
|
+
box-shadow: .5rem .5rem 0 var(--max-ink),.78rem .78rem 0 rgb(var(--max-secondary-rgb)/.72);
|
|
4731
|
+
clip-path: polygon(1rem 0, 100% 0, calc(100% - 1rem) 100%, 0 100%);
|
|
4314
4732
|
}
|
|
4315
4733
|
|
|
4316
4734
|
.max-wiggle:hover {
|
|
@@ -4382,9 +4800,10 @@
|
|
|
4382
4800
|
.max-card-media {
|
|
4383
4801
|
aspect-ratio: 16 / 9;
|
|
4384
4802
|
object-fit: cover;
|
|
4385
|
-
border:
|
|
4386
|
-
border-radius: var(--max-radius-
|
|
4803
|
+
border: 2px solid var(--max-ink);
|
|
4804
|
+
border-radius: var(--max-radius-sm);
|
|
4387
4805
|
inline-size: 100%;
|
|
4806
|
+
box-shadow: .22rem .22rem 0 rgb(var(--max-primary-rgb)/.52);
|
|
4388
4807
|
display: block;
|
|
4389
4808
|
}
|
|
4390
4809
|
|
|
@@ -4416,7 +4835,7 @@
|
|
|
4416
4835
|
}
|
|
4417
4836
|
|
|
4418
4837
|
.max-card-accent-edge {
|
|
4419
|
-
border-inline-start: .
|
|
4838
|
+
border-inline-start: .6rem solid var(--max-primary);
|
|
4420
4839
|
}
|
|
4421
4840
|
|
|
4422
4841
|
.max-icon-medallion {
|
|
@@ -4424,13 +4843,15 @@
|
|
|
4424
4843
|
block-size: 3.75rem;
|
|
4425
4844
|
inline-size: 3.75rem;
|
|
4426
4845
|
color: var(--max-on-primary);
|
|
4427
|
-
border:
|
|
4428
|
-
border-radius:
|
|
4846
|
+
border: 3px solid var(--max-ink);
|
|
4847
|
+
border-radius: var(--max-radius-sm);
|
|
4848
|
+
box-shadow: .18rem .18rem 0 var(--max-ink),.34rem .34rem 0 rgb(var(--max-secondary-rgb)/.65);
|
|
4429
4849
|
flex: none;
|
|
4430
4850
|
place-items: center;
|
|
4431
4851
|
padding: .7rem;
|
|
4432
4852
|
line-height: 1;
|
|
4433
4853
|
display: inline-grid;
|
|
4854
|
+
transform: rotate(-4deg);
|
|
4434
4855
|
}
|
|
4435
4856
|
|
|
4436
4857
|
.max-icon-medallion > :where(svg, img) {
|
|
@@ -4440,7 +4861,7 @@
|
|
|
4440
4861
|
}
|
|
4441
4862
|
|
|
4442
4863
|
.max-button.max-button-cut, .max-button-cut, :where([data-ui="maximalist"]) .ui-button.max-button-cut {
|
|
4443
|
-
clip-path: polygon(.
|
|
4864
|
+
clip-path: polygon(.75rem 0, 100% 0, calc(100% - .75rem) 100%, 0 100%);
|
|
4444
4865
|
border-radius: 0;
|
|
4445
4866
|
}
|
|
4446
4867
|
|
|
@@ -4449,12 +4870,12 @@
|
|
|
4449
4870
|
}
|
|
4450
4871
|
|
|
4451
4872
|
.max-button.max-button-outline-heavy, .max-button-outline-heavy, :where([data-ui="maximalist"]) .ui-button.max-button-outline-heavy {
|
|
4452
|
-
|
|
4873
|
+
background: var(--max-label-bg);
|
|
4874
|
+
color: var(--max-label-fg);
|
|
4453
4875
|
border-style: solid;
|
|
4454
|
-
border-width:
|
|
4455
|
-
border-color: var(--max-
|
|
4456
|
-
box-shadow:
|
|
4457
|
-
background: none;
|
|
4876
|
+
border-width: 3px;
|
|
4877
|
+
border-color: var(--max-ink);
|
|
4878
|
+
box-shadow: -.24rem .24rem 0 rgb(var(--max-primary-rgb)/.68);
|
|
4458
4879
|
}
|
|
4459
4880
|
|
|
4460
4881
|
.max-button.max-button-outline-heavy:hover, .max-button-outline-heavy:hover, :where([data-ui="maximalist"]) .ui-button.max-button-outline-heavy:hover {
|
|
@@ -4465,11 +4886,12 @@
|
|
|
4465
4886
|
|
|
4466
4887
|
.max-badge-seal {
|
|
4467
4888
|
aspect-ratio: 1;
|
|
4468
|
-
background: var(--max-
|
|
4889
|
+
background: var(--max-warning);
|
|
4469
4890
|
inline-size: 5rem;
|
|
4470
4891
|
min-inline-size: 5rem;
|
|
4471
4892
|
color: var(--max-text);
|
|
4472
|
-
border:
|
|
4893
|
+
border: 3px solid var(--max-ink);
|
|
4894
|
+
box-shadow: .18rem .18rem 0 var(--max-ink),.38rem .38rem 0 rgb(var(--max-accent-rgb)/.65);
|
|
4473
4895
|
text-align: center;
|
|
4474
4896
|
font-family: var(--max-font-heading);
|
|
4475
4897
|
letter-spacing: .04em;
|
|
@@ -4481,16 +4903,17 @@
|
|
|
4481
4903
|
font-weight: 900;
|
|
4482
4904
|
line-height: 1.05;
|
|
4483
4905
|
display: inline-grid;
|
|
4906
|
+
transform: rotate(4deg);
|
|
4484
4907
|
}
|
|
4485
4908
|
|
|
4486
4909
|
.max-feature-strip {
|
|
4487
4910
|
background: var(--max-card-bg);
|
|
4488
4911
|
color: var(--max-text);
|
|
4489
|
-
border:
|
|
4912
|
+
border: 2px solid var(--max-ink);
|
|
4490
4913
|
border-radius: var(--max-radius-lg);
|
|
4914
|
+
box-shadow: var(--max-pop-shadow);
|
|
4491
4915
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
|
|
4492
4916
|
display: grid;
|
|
4493
|
-
overflow: hidden;
|
|
4494
4917
|
}
|
|
4495
4918
|
|
|
4496
4919
|
.max-feature-item {
|
|
@@ -4498,7 +4921,7 @@
|
|
|
4498
4921
|
gap: var(--max-space-3);
|
|
4499
4922
|
min-inline-size: 0;
|
|
4500
4923
|
padding: var(--max-space-4);
|
|
4501
|
-
border-inline-end:
|
|
4924
|
+
border-inline-end: 2px solid var(--max-ink);
|
|
4502
4925
|
grid-template-columns: auto minmax(0, 1fr);
|
|
4503
4926
|
display: grid;
|
|
4504
4927
|
}
|
|
@@ -4518,8 +4941,9 @@
|
|
|
4518
4941
|
padding: var(--max-space-4) var(--max-space-5);
|
|
4519
4942
|
background: var(--max-card-bg);
|
|
4520
4943
|
color: var(--max-text);
|
|
4521
|
-
border:
|
|
4944
|
+
border: 3px solid var(--max-ink);
|
|
4522
4945
|
border-radius: var(--max-radius-lg);
|
|
4946
|
+
box-shadow: var(--max-pop-shadow);
|
|
4523
4947
|
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
4524
4948
|
display: grid;
|
|
4525
4949
|
}
|
|
@@ -4533,22 +4957,28 @@
|
|
|
4533
4957
|
}
|
|
4534
4958
|
|
|
4535
4959
|
.max-eyebrow {
|
|
4536
|
-
|
|
4960
|
+
background: var(--max-label-bg);
|
|
4961
|
+
width: fit-content;
|
|
4962
|
+
color: var(--max-label-fg);
|
|
4963
|
+
border: 2px solid var(--max-ink);
|
|
4537
4964
|
font-family: var(--max-font-heading);
|
|
4538
|
-
letter-spacing: .
|
|
4965
|
+
letter-spacing: .08em;
|
|
4539
4966
|
text-transform: uppercase;
|
|
4540
4967
|
margin: 0;
|
|
4968
|
+
padding: .16rem .58rem;
|
|
4541
4969
|
font-size: .76rem;
|
|
4542
|
-
font-weight:
|
|
4970
|
+
font-weight: 950;
|
|
4543
4971
|
line-height: 1.2;
|
|
4972
|
+
transform: rotate(-1deg);
|
|
4544
4973
|
}
|
|
4545
4974
|
|
|
4546
4975
|
.max-media-scrim {
|
|
4547
4976
|
isolation: isolate;
|
|
4548
4977
|
background: var(--max-surface-soft);
|
|
4549
|
-
border:
|
|
4978
|
+
border: 3px solid var(--max-ink);
|
|
4550
4979
|
border-radius: var(--max-radius-lg);
|
|
4551
4980
|
min-block-size: 12rem;
|
|
4981
|
+
box-shadow: var(--max-pop-shadow);
|
|
4552
4982
|
position: relative;
|
|
4553
4983
|
overflow: hidden;
|
|
4554
4984
|
}
|
|
@@ -4564,6 +4994,8 @@
|
|
|
4564
4994
|
.max-media-scrim > :where(figcaption, [data-media-caption]) {
|
|
4565
4995
|
z-index: 1;
|
|
4566
4996
|
color: #fff;
|
|
4997
|
+
font-family: var(--max-font-heading);
|
|
4998
|
+
text-transform: uppercase;
|
|
4567
4999
|
background: linear-gradient(to top, #000000e6, #00000094 56%, #0000);
|
|
4568
5000
|
padding: clamp(1rem, 4vw, 2rem);
|
|
4569
5001
|
position: absolute;
|
|
@@ -4587,7 +5019,7 @@
|
|
|
4587
5019
|
|
|
4588
5020
|
.max-feature-item {
|
|
4589
5021
|
border-inline-end: 0;
|
|
4590
|
-
border-block-end:
|
|
5022
|
+
border-block-end: 2px solid var(--max-ink);
|
|
4591
5023
|
}
|
|
4592
5024
|
|
|
4593
5025
|
.max-feature-item:last-child {
|
|
@@ -4596,57 +5028,55 @@
|
|
|
4596
5028
|
}
|
|
4597
5029
|
|
|
4598
5030
|
.max-card-service, .max-card-feature {
|
|
4599
|
-
box-shadow:
|
|
4600
|
-
border-width:
|
|
4601
|
-
}
|
|
4602
|
-
|
|
4603
|
-
.max-icon-medallion {
|
|
4604
|
-
box-shadow: .25rem .25rem 0 rgb(var(--max-secondary-rgb)/.5);
|
|
4605
|
-
transform: rotate(-3deg);
|
|
5031
|
+
box-shadow: var(--max-pop-shadow);
|
|
5032
|
+
border-width: 3px;
|
|
4606
5033
|
}
|
|
4607
5034
|
|
|
4608
5035
|
.max-button-cut {
|
|
4609
|
-
clip-path: polygon(
|
|
4610
|
-
}
|
|
4611
|
-
|
|
4612
|
-
.max-callout-bar {
|
|
4613
|
-
background: linear-gradient(120deg,rgb(var(--max-primary-rgb)/.18),rgb(var(--max-secondary-rgb)/.15)),var(--max-card-bg);
|
|
5036
|
+
clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
|
|
4614
5037
|
}
|
|
4615
5038
|
|
|
4616
5039
|
.max-button.max-button-cut, .max-button-cut, :where([data-ui="maximalist"]) .ui-button.max-button-cut {
|
|
4617
5040
|
clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%);
|
|
5041
|
+
min-block-size: 2.75rem;
|
|
4618
5042
|
min-inline-size: 6rem;
|
|
4619
5043
|
max-inline-size: 100%;
|
|
4620
|
-
box-shadow: .
|
|
5044
|
+
box-shadow: .22rem .22rem 0 var(--max-ink),.44rem .44rem 0 rgb(var(--max-secondary-rgb)/.72);
|
|
4621
5045
|
justify-content: center;
|
|
4622
5046
|
justify-self: end;
|
|
4623
5047
|
}
|
|
4624
5048
|
|
|
4625
5049
|
.max-button.max-button-outline-heavy, .max-button-outline-heavy, :where([data-ui="maximalist"]) .ui-button.max-button-outline-heavy {
|
|
4626
5050
|
clip-path: polygon(0 0, 91% 0, 100% 100%, 9% 100%);
|
|
4627
|
-
box-shadow: -.28rem .28rem 0 rgb(var(--max-primary-rgb)/.
|
|
4628
|
-
border-width:
|
|
5051
|
+
box-shadow: -.28rem .28rem 0 rgb(var(--max-primary-rgb)/.68);
|
|
5052
|
+
border-width: 3px;
|
|
4629
5053
|
border-radius: 0;
|
|
4630
5054
|
}
|
|
4631
5055
|
|
|
4632
5056
|
.max-card-service, .max-media-scrim, .max-feature-strip, .max-callout-bar, .max-well {
|
|
4633
|
-
background: linear-gradient(125deg,rgb(var(--max-primary-rgb)/.
|
|
4634
|
-
border:
|
|
5057
|
+
background: linear-gradient(125deg,rgb(var(--max-primary-rgb)/.14),rgb(var(--max-secondary-rgb)/.12)),var(--max-card-bg);
|
|
5058
|
+
border: 3px solid var(--max-ink);
|
|
4635
5059
|
border-radius: var(--max-radius-sm);
|
|
4636
|
-
box-shadow: .
|
|
5060
|
+
box-shadow: .3rem .3rem 0 var(--max-ink),.56rem .56rem 0 rgb(var(--max-secondary-rgb)/.62);
|
|
4637
5061
|
}
|
|
4638
5062
|
|
|
4639
|
-
[data-ui="maximalist"][data-
|
|
4640
|
-
|
|
5063
|
+
[data-ui="maximalist"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
|
|
5064
|
+
background: var(--max-poster-fill);
|
|
5065
|
+
color: var(--max-on-primary);
|
|
5066
|
+
border: 3px solid var(--max-ink);
|
|
4641
5067
|
border-radius: var(--max-radius-sm);
|
|
4642
|
-
box-shadow: .
|
|
5068
|
+
box-shadow: .26rem .26rem 0 var(--max-ink);
|
|
5069
|
+
font-family: var(--max-font-control);
|
|
5070
|
+
letter-spacing: .035em;
|
|
5071
|
+
text-transform: uppercase;
|
|
5072
|
+
font-weight: 950;
|
|
4643
5073
|
}
|
|
4644
5074
|
|
|
4645
|
-
[data-ui="maximalist"][data-
|
|
4646
|
-
background: linear-gradient(135deg,rgb(var(--max-primary-rgb)/.1),rgb(var(--max-secondary-rgb)/.08)),var(--max-
|
|
4647
|
-
border:
|
|
5075
|
+
[data-ui="maximalist"][data-mode] :where(dialog) {
|
|
5076
|
+
background: linear-gradient(135deg,rgb(var(--max-primary-rgb)/.1),rgb(var(--max-secondary-rgb)/.08)),var(--max-paper-bg);
|
|
5077
|
+
border: 3px solid var(--max-ink);
|
|
4648
5078
|
border-radius: var(--max-radius-sm);
|
|
4649
|
-
box-shadow: .
|
|
5079
|
+
box-shadow: .36rem .36rem 0 var(--max-ink),.68rem .68rem 0 rgb(var(--max-secondary-rgb)/.58);
|
|
4650
5080
|
}
|
|
4651
5081
|
|
|
4652
5082
|
.max-button[aria-busy="true"]:after, .max-icon-button[aria-busy="true"]:after, [data-ui="maximalist"] :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="maximalist"]) .ui-button[aria-busy="true"]:after, :where([data-ui="maximalist"]) .ui-icon-button[aria-busy="true"]:after {
|
|
@@ -4658,11 +5088,166 @@
|
|
|
4658
5088
|
animation: .82s ease-in-out infinite max-spin;
|
|
4659
5089
|
}
|
|
4660
5090
|
|
|
4661
|
-
|
|
4662
|
-
|
|
4663
|
-
|
|
4664
|
-
|
|
4665
|
-
|
|
5091
|
+
[data-ui="maximalist"][data-mode] {
|
|
5092
|
+
--usk-native-font-control: var(--max-font-heading);
|
|
5093
|
+
--usk-native-control-min-block-size: 3rem;
|
|
5094
|
+
--usk-native-control-padding-block: .74rem;
|
|
5095
|
+
--usk-native-control-padding-inline: 1.05rem;
|
|
5096
|
+
--usk-native-border-width: 3px;
|
|
5097
|
+
--usk-native-radius-sm: .08rem;
|
|
5098
|
+
--usk-native-radius: .14rem;
|
|
5099
|
+
--usk-native-radius-lg: .22rem;
|
|
5100
|
+
--usk-native-shadow: .24rem .24rem 0 var(--max-ink);
|
|
5101
|
+
--usk-native-shadow-md: .34rem .34rem 0 var(--max-ink), .58rem .58rem 0 rgb(var(--max-secondary-rgb) / .58);
|
|
5102
|
+
--usk-native-focus-ring: 0 0 0 3px var(--max-warning), .2rem .2rem 0 var(--max-ink);
|
|
5103
|
+
--usk-native-subcontrol-padding-block: .57rem;
|
|
5104
|
+
--usk-native-subcontrol-padding-inline: .79rem;
|
|
5105
|
+
--usk-native-choice-size: 1.45rem;
|
|
5106
|
+
--usk-native-choice-background: linear-gradient(135deg, var(--max-paper-bg), var(--max-surface-soft));
|
|
5107
|
+
--usk-native-choice-border: 3px solid var(--max-ink);
|
|
5108
|
+
--usk-native-checkbox-radius: .08rem;
|
|
5109
|
+
--usk-native-radio-radius: 44% 56% 48% 52%;
|
|
5110
|
+
--usk-native-choice-shadow: .16rem .16rem 0 rgb(var(--max-secondary-rgb) / .72);
|
|
5111
|
+
--usk-native-choice-checked-background: linear-gradient(135deg, var(--max-primary), var(--max-accent));
|
|
5112
|
+
--usk-native-choice-mark-color: var(--max-on-primary);
|
|
5113
|
+
--usk-native-select-indicator-image: linear-gradient(35deg, transparent 43%, var(--max-ink) 44% 56%, transparent 57%), linear-gradient(145deg, transparent 43%, var(--max-ink) 44% 56%, transparent 57%);
|
|
5114
|
+
--usk-native-select-indicator-size: .52rem .52rem, .52rem .52rem;
|
|
5115
|
+
--usk-native-select-indicator-position: calc(100% - 1.32rem) 48%, calc(100% - .92rem) 52%;
|
|
5116
|
+
--usk-native-select-padding-inline-end: 3.15rem;
|
|
5117
|
+
--usk-native-range-track-size: .82rem;
|
|
5118
|
+
--usk-native-range-track-background: repeating-linear-gradient(90deg, var(--max-warning) 0 .9rem, var(--max-accent) .9rem 1.8rem, var(--max-primary) 1.8rem 2.7rem);
|
|
5119
|
+
--usk-native-range-track-border: 3px solid var(--max-ink);
|
|
5120
|
+
--usk-native-range-track-radius: 999px;
|
|
5121
|
+
--usk-native-range-track-shadow: .2rem .2rem 0 var(--max-ink);
|
|
5122
|
+
--usk-native-range-progress-background: linear-gradient(90deg, var(--max-success), var(--max-warning), var(--max-danger), var(--max-accent));
|
|
5123
|
+
--usk-native-range-thumb-size: 1.78rem;
|
|
5124
|
+
--usk-native-range-thumb-background: conic-gradient(var(--max-warning), var(--max-primary), var(--max-accent), var(--max-warning));
|
|
5125
|
+
--usk-native-range-thumb-border: 3px solid var(--max-ink);
|
|
5126
|
+
--usk-native-range-thumb-radius: 42% 58% 46% 54%;
|
|
5127
|
+
--usk-native-range-thumb-shadow: .16rem .16rem 0 var(--max-ink), .28rem .28rem 0 rgb(var(--max-secondary-rgb) / .62);
|
|
5128
|
+
--usk-native-progress-size: 1.1rem;
|
|
5129
|
+
--usk-native-progress-track-background: repeating-linear-gradient(90deg, var(--max-paper-bg) 0 1.25rem, var(--max-surface-soft) 1.25rem 1.4rem);
|
|
5130
|
+
--usk-native-progress-track-border: 3px solid var(--max-ink);
|
|
5131
|
+
--usk-native-progress-track-radius: .14rem;
|
|
5132
|
+
--usk-native-progress-track-shadow: .2rem .2rem 0 var(--max-ink);
|
|
5133
|
+
--usk-native-progress-value-background: repeating-linear-gradient(90deg, rgb(var(--max-text-rgb) / .22) 0 .1rem, transparent .1rem 1.55rem), linear-gradient(90deg, var(--max-warning), var(--max-accent), var(--max-primary));
|
|
5134
|
+
--usk-native-progress-value-radius: .08rem;
|
|
5135
|
+
--usk-native-progress-value-shadow: .14rem 0 0 rgb(var(--max-text-rgb) / .42);
|
|
5136
|
+
--usk-native-scrollbar-size: 1.1rem;
|
|
5137
|
+
--usk-native-scrollbar-track: linear-gradient(var(--max-surface-soft), var(--max-paper-bg));
|
|
5138
|
+
--usk-native-scrollbar-thumb: linear-gradient(135deg, var(--max-primary), var(--max-accent));
|
|
5139
|
+
--usk-native-scrollbar-radius: .12rem;
|
|
5140
|
+
}
|
|
5141
|
+
|
|
5142
|
+
.max-title {
|
|
5143
|
+
letter-spacing: max(.028em, .5px);
|
|
5144
|
+
margin-block: .75rem;
|
|
5145
|
+
font-weight: 950;
|
|
5146
|
+
}
|
|
5147
|
+
|
|
5148
|
+
.max-label, :where([data-ui="maximalist"]) .ui-label {
|
|
5149
|
+
font-size: .73rem;
|
|
5150
|
+
font-weight: 900;
|
|
5151
|
+
}
|
|
5152
|
+
|
|
5153
|
+
.max-button, :where([data-ui="maximalist"]) .ui-button {
|
|
5154
|
+
background: linear-gradient(115deg,var(--max-primary),var(--max-accent));
|
|
5155
|
+
min-height: 3rem;
|
|
5156
|
+
box-shadow: .24rem .24rem 0 var(--max-ink);
|
|
5157
|
+
border-radius: .12rem;
|
|
5158
|
+
padding: .74rem 1.05rem;
|
|
5159
|
+
font-weight: 950;
|
|
5160
|
+
}
|
|
5161
|
+
|
|
5162
|
+
.max-input, :where([data-ui="maximalist"]) .ui-input {
|
|
5163
|
+
border-radius: .08rem;
|
|
5164
|
+
min-height: 3.2rem;
|
|
5165
|
+
padding: .78rem .95rem;
|
|
5166
|
+
}
|
|
5167
|
+
|
|
5168
|
+
.max-card, :where([data-ui="maximalist"]) .ui-card {
|
|
5169
|
+
background: linear-gradient(128deg,rgb(var(--max-primary-rgb)/.13),rgb(var(--max-secondary-rgb)/.11)),var(--max-card-bg);
|
|
5170
|
+
border: 3px solid var(--max-ink);
|
|
5171
|
+
box-shadow: .3rem .3rem 0 var(--max-ink),.54rem .54rem 0 rgb(var(--max-secondary-rgb)/.58);
|
|
5172
|
+
border-radius: .18rem;
|
|
5173
|
+
padding: 1.35rem;
|
|
5174
|
+
}
|
|
5175
|
+
|
|
5176
|
+
.max-well {
|
|
5177
|
+
background: repeating-linear-gradient(-8deg,rgb(var(--max-accent-rgb)/.09)0 .3rem,transparent .3rem .75rem),var(--max-surface-soft);
|
|
5178
|
+
border: 3px solid var(--max-ink);
|
|
5179
|
+
box-shadow: -.22rem .22rem 0 rgb(var(--max-primary-rgb)/.62);
|
|
5180
|
+
}
|
|
5181
|
+
|
|
5182
|
+
.max-badge, :where([data-ui="maximalist"]) .ui-badge {
|
|
5183
|
+
border-radius: 999px;
|
|
5184
|
+
min-height: 1.7rem;
|
|
5185
|
+
padding: .22rem .62rem;
|
|
5186
|
+
}
|
|
5187
|
+
|
|
5188
|
+
.max-alert, :where([data-ui="maximalist"]) .ui-alert {
|
|
5189
|
+
background: linear-gradient(105deg,rgb(var(--max-warning-rgb)/.2),rgb(var(--max-primary-rgb)/.1)),var(--max-card-bg);
|
|
5190
|
+
border: 3px solid var(--max-ink);
|
|
5191
|
+
box-shadow: .24rem .24rem 0 var(--max-ink);
|
|
5192
|
+
border-radius: .08rem;
|
|
5193
|
+
}
|
|
5194
|
+
|
|
5195
|
+
.max-progress, :where([data-ui="maximalist"]) .ui-progress {
|
|
5196
|
+
background: repeating-linear-gradient(90deg,var(--max-paper-bg)0 1.25rem,var(--max-surface-soft) 1.25rem 1.4rem);
|
|
5197
|
+
height: 1.1rem;
|
|
5198
|
+
}
|
|
5199
|
+
|
|
5200
|
+
.max-table-wrap, :where([data-ui="maximalist"]) .ui-table-wrap {
|
|
5201
|
+
background: linear-gradient(132deg,rgb(var(--max-secondary-rgb)/.1),transparent),var(--max-card-bg);
|
|
5202
|
+
box-shadow: .28rem .28rem 0 var(--max-ink);
|
|
5203
|
+
border-radius: .08rem;
|
|
5204
|
+
}
|
|
5205
|
+
|
|
5206
|
+
.max-table th, :where([data-ui="maximalist"]) .ui-table th {
|
|
5207
|
+
background: linear-gradient(100deg,var(--max-primary),var(--max-accent));
|
|
5208
|
+
padding: .72rem .88rem;
|
|
5209
|
+
font-weight: 950;
|
|
5210
|
+
}
|
|
5211
|
+
|
|
5212
|
+
.max-table td, :where([data-ui="maximalist"]) .ui-table td {
|
|
5213
|
+
padding: .74rem .86rem;
|
|
5214
|
+
}
|
|
5215
|
+
|
|
5216
|
+
.max-nav, .max-panel, .max-toolbar, .max-tooltip, [data-ui="maximalist"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]), .max-card-service, .max-feature-strip, .max-callout-bar, :where([data-ui="maximalist"]) .ui-nav, :where([data-ui="maximalist"]) .ui-toolbar {
|
|
5217
|
+
box-shadow: .28rem .28rem 0 var(--max-ink);
|
|
5218
|
+
border-width: 3px;
|
|
5219
|
+
border-radius: .12rem;
|
|
5220
|
+
}
|
|
5221
|
+
|
|
5222
|
+
.max-card-service:nth-of-type(odd), .max-feature-item:nth-of-type(odd) {
|
|
5223
|
+
transform: rotate(-.22deg);
|
|
5224
|
+
}
|
|
5225
|
+
|
|
5226
|
+
.max-card-service:nth-of-type(2n), .max-feature-item:nth-of-type(2n) {
|
|
5227
|
+
transform: rotate(.22deg);
|
|
5228
|
+
}
|
|
5229
|
+
|
|
5230
|
+
.max-callout-bar {
|
|
5231
|
+
background: linear-gradient(104deg,var(--max-warning)0 18%,transparent 18% 21%,var(--max-primary) 21% 72%,var(--max-accent) 72%),var(--max-card-bg);
|
|
5232
|
+
}
|
|
5233
|
+
|
|
5234
|
+
.max-check-control, .max-radio-control, .max-switch-track, :where([data-ui="maximalist"]) .ui-check-control, :where([data-ui="maximalist"]) .ui-radio-control, :where([data-ui="maximalist"]) .ui-switch-track {
|
|
5235
|
+
border-width: 3px;
|
|
5236
|
+
}
|
|
5237
|
+
|
|
5238
|
+
.max-tooltip-arrow {
|
|
5239
|
+
transform: rotate(7deg);
|
|
5240
|
+
}
|
|
5241
|
+
|
|
5242
|
+
.max-progress-bar, :where([data-ui="maximalist"]) .ui-progress-bar {
|
|
5243
|
+
background: linear-gradient(90deg,var(--max-warning),var(--max-accent),var(--max-primary));
|
|
5244
|
+
}
|
|
5245
|
+
|
|
5246
|
+
@media (prefers-reduced-motion: reduce) {
|
|
5247
|
+
[data-ui="maximalist"] *, [data-ui="maximalist"] :before, [data-ui="maximalist"] :after {
|
|
5248
|
+
scroll-behavior: auto !important;
|
|
5249
|
+
transition-duration: 1ms !important;
|
|
5250
|
+
animation-duration: 1ms !important;
|
|
4666
5251
|
animation-iteration-count: 1 !important;
|
|
4667
5252
|
}
|
|
4668
5253
|
}
|
|
@@ -4702,4 +5287,740 @@
|
|
|
4702
5287
|
color: #000 !important;
|
|
4703
5288
|
}
|
|
4704
5289
|
}
|
|
5290
|
+
|
|
5291
|
+
.max-input[aria-invalid="true"], .max-textarea[aria-invalid="true"], .max-select[aria-invalid="true"], :where([data-ui="maximalist"]) .ui-input[aria-invalid="true"], :where([data-ui="maximalist"]) .ui-textarea[aria-invalid="true"], :where([data-ui="maximalist"]) .ui-select[aria-invalid="true"] {
|
|
5292
|
+
border-color: var(--max-danger);
|
|
5293
|
+
box-shadow: 3px 3px 0 rgb(var(--max-danger-rgb)/.38);
|
|
5294
|
+
}
|
|
5295
|
+
|
|
5296
|
+
.max-input[readonly], .max-textarea[readonly], :where([data-ui="maximalist"]) .ui-input[readonly], :where([data-ui="maximalist"]) .ui-textarea[readonly] {
|
|
5297
|
+
filter: saturate(.72);
|
|
5298
|
+
opacity: .78;
|
|
5299
|
+
border-style: dashed;
|
|
5300
|
+
}
|
|
5301
|
+
|
|
5302
|
+
.max-button-primary, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="primary"]) {
|
|
5303
|
+
background: linear-gradient(112deg,var(--max-primary),var(--max-accent));
|
|
5304
|
+
color: var(--max-on-primary);
|
|
5305
|
+
border-color: var(--max-ink);
|
|
5306
|
+
}
|
|
5307
|
+
|
|
5308
|
+
.max-button-secondary, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="secondary"]) {
|
|
5309
|
+
background: linear-gradient(112deg,var(--max-secondary),var(--max-warning));
|
|
5310
|
+
color: var(--max-on-secondary);
|
|
5311
|
+
border-color: var(--max-ink);
|
|
5312
|
+
}
|
|
5313
|
+
|
|
5314
|
+
.max-button-danger, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="danger"]) {
|
|
5315
|
+
background: linear-gradient(112deg,var(--max-danger),var(--max-primary));
|
|
5316
|
+
color: var(--max-on-danger);
|
|
5317
|
+
border-color: var(--max-ink);
|
|
5318
|
+
}
|
|
5319
|
+
|
|
5320
|
+
.max-button-ghost, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="ghost"]) {
|
|
5321
|
+
color: var(--max-primary);
|
|
5322
|
+
background: none;
|
|
5323
|
+
border-color: #0000;
|
|
5324
|
+
}
|
|
5325
|
+
|
|
5326
|
+
.max-feature-item > .max-icon-medallion {
|
|
5327
|
+
font-size: 1.5rem;
|
|
5328
|
+
line-height: 1;
|
|
5329
|
+
}
|
|
5330
|
+
|
|
5331
|
+
.max-callout-bar > .max-icon-medallion {
|
|
5332
|
+
min-block-size: 4.5rem;
|
|
5333
|
+
min-inline-size: 4.5rem;
|
|
5334
|
+
font-size: 2rem;
|
|
5335
|
+
font-weight: 800;
|
|
5336
|
+
line-height: 1;
|
|
5337
|
+
}
|
|
5338
|
+
|
|
5339
|
+
.max-heading {
|
|
5340
|
+
letter-spacing: max(.04em, .65px);
|
|
5341
|
+
line-height: 1.08;
|
|
5342
|
+
}
|
|
5343
|
+
|
|
5344
|
+
.max-button, .max-icon-button, :where([data-ui="maximalist"]) .ui-button, :where([data-ui="maximalist"]) .ui-icon-button {
|
|
5345
|
+
letter-spacing: max(.055em, .8px);
|
|
5346
|
+
line-height: 1.15;
|
|
5347
|
+
}
|
|
5348
|
+
|
|
5349
|
+
.max-badge, :where([data-ui="maximalist"]) .ui-badge {
|
|
5350
|
+
letter-spacing: max(.06em, .75px);
|
|
5351
|
+
min-height: 1.9rem;
|
|
5352
|
+
font-size: .875rem;
|
|
5353
|
+
font-weight: 850;
|
|
5354
|
+
line-height: 1.15;
|
|
5355
|
+
}
|
|
5356
|
+
|
|
5357
|
+
.max-table th, :where([data-ui="maximalist"]) .ui-table th {
|
|
5358
|
+
letter-spacing: max(.065em, .8px);
|
|
5359
|
+
font-size: 1rem;
|
|
5360
|
+
line-height: 1.15;
|
|
5361
|
+
}
|
|
5362
|
+
|
|
5363
|
+
[data-ui="maximalist"] :where(h1, h2, h3, h4, h5, h6):not([class]) {
|
|
5364
|
+
color: var(--max-text);
|
|
5365
|
+
letter-spacing: max(.03em, .5px);
|
|
5366
|
+
line-height: 1.12;
|
|
5367
|
+
}
|
|
5368
|
+
|
|
5369
|
+
.max-spinner, .max-loading-spinner, [data-ui="maximalist"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
|
|
5370
|
+
border: .22rem solid var(--max-ink);
|
|
5371
|
+
background: conic-gradient(var(--max-primary)0 18%,transparent 18% 30%,var(--max-accent) 30% 52%,transparent 52% 64%,var(--max-warning) 64% 86%,transparent 86% 100%);
|
|
5372
|
+
box-shadow: .16rem .16rem 0 var(--max-ink),.34rem .34rem 0 rgb(var(--max-secondary-rgb)/.68);
|
|
5373
|
+
border-radius: 50%;
|
|
5374
|
+
animation-timing-function: linear;
|
|
5375
|
+
position: relative;
|
|
5376
|
+
}
|
|
5377
|
+
|
|
5378
|
+
.max-check input:checked + .max-check-control:after, :where([data-ui="maximalist"]) .ui-check input:checked+.ui-check-control:after {
|
|
5379
|
+
-webkit-text-stroke: .035rem currentColor;
|
|
5380
|
+
place-items: center;
|
|
5381
|
+
block-size: 100%;
|
|
5382
|
+
inline-size: 100%;
|
|
5383
|
+
font-family: Arial, sans-serif;
|
|
5384
|
+
font-size: 1rem;
|
|
5385
|
+
font-weight: 900;
|
|
5386
|
+
line-height: 1rem;
|
|
5387
|
+
display: grid;
|
|
5388
|
+
transform: translateY(-.025rem);
|
|
5389
|
+
}
|
|
5390
|
+
|
|
5391
|
+
[data-ui="maximalist"][data-mode] {
|
|
5392
|
+
--usk-native-select-indicator-position: calc(100% - 1.7rem) 48%, calc(100% - 1.25rem) 52%;
|
|
5393
|
+
--usk-native-select-padding-inline-end: 3.5rem;
|
|
5394
|
+
}
|
|
5395
|
+
|
|
5396
|
+
.max-select, :where([data-ui="maximalist"]) .ui-select {
|
|
5397
|
+
appearance: none;
|
|
5398
|
+
background-image: var(--usk-native-select-indicator-image);
|
|
5399
|
+
background-repeat: no-repeat;
|
|
5400
|
+
background-position: var(--usk-native-select-indicator-position);
|
|
5401
|
+
background-size: var(--usk-native-select-indicator-size);
|
|
5402
|
+
padding-inline-end: var(--usk-native-select-padding-inline-end);
|
|
5403
|
+
}
|
|
5404
|
+
|
|
5405
|
+
.max-badge-seal {
|
|
5406
|
+
color: var(--max-on-warning);
|
|
5407
|
+
}
|
|
5408
|
+
|
|
5409
|
+
.max-badge-seal * {
|
|
5410
|
+
color: inherit;
|
|
5411
|
+
}
|
|
5412
|
+
|
|
5413
|
+
[data-ui="maximalist"][data-mode] .max-button.max-button-outline-heavy, [data-ui="maximalist"][data-mode] .max-button-outline-heavy, :where([data-ui="maximalist"])[data-mode] .ui-button.max-button-outline-heavy {
|
|
5414
|
+
background-color: var(--max-primary);
|
|
5415
|
+
color: var(--max-on-primary);
|
|
5416
|
+
border-color: var(--max-ink);
|
|
5417
|
+
background-image: none;
|
|
5418
|
+
}
|
|
5419
|
+
|
|
5420
|
+
.max-tooltip, [data-ui="maximalist"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
|
|
5421
|
+
border-color: var(--max-warning);
|
|
5422
|
+
}
|
|
5423
|
+
|
|
5424
|
+
.max-tooltip-arrow {
|
|
5425
|
+
border-color: var(--max-on-warning);
|
|
5426
|
+
box-shadow: 0 0 0 1px var(--max-warning);
|
|
5427
|
+
}
|
|
5428
|
+
|
|
5429
|
+
.max-callout-bar > div {
|
|
5430
|
+
border-inline-start: .25rem solid var(--max-ink);
|
|
5431
|
+
padding-inline-start: 1rem;
|
|
5432
|
+
}
|
|
5433
|
+
|
|
5434
|
+
.max-media-scrim > :where(figcaption, [data-media-caption]) {
|
|
5435
|
+
background: linear-gradient(to top, #000000f5, #000000c2 64%, #0000002e);
|
|
5436
|
+
}
|
|
5437
|
+
|
|
5438
|
+
.max-media-scrim > :where(figcaption, [data-media-caption]) strong {
|
|
5439
|
+
letter-spacing: max(.055em, .8px);
|
|
5440
|
+
text-shadow: 0 2px 3px #000000e6;
|
|
5441
|
+
font-size: 1.05rem;
|
|
5442
|
+
line-height: 1.2;
|
|
5443
|
+
display: block;
|
|
5444
|
+
}
|
|
5445
|
+
|
|
5446
|
+
[data-ui="maximalist"][data-mode] {
|
|
5447
|
+
--max-paper-wash: rgb(var(--max-warning-rgb) / .08);
|
|
5448
|
+
--max-paper-grain: radial-gradient(circle at 14% 18%, rgb(var(--max-text-rgb) / .045) 0 1px, transparent 1.4px),
|
|
5449
|
+
radial-gradient(circle at 72% 64%, rgb(var(--max-danger-rgb) / .055) 0 1px, transparent 1.5px);
|
|
5450
|
+
--max-paper-bg: var(--max-surface-strong);
|
|
5451
|
+
--max-poster-fill: var(--max-primary);
|
|
5452
|
+
--max-label-bg: var(--max-primary);
|
|
5453
|
+
--max-label-fg: var(--max-on-primary);
|
|
5454
|
+
--max-pop-shadow: 5px 5px 0 var(--max-ink);
|
|
5455
|
+
--max-sticker-shadow: 3px 3px 0 var(--max-ink);
|
|
5456
|
+
--max-shadow-sm: 3px 3px 0 var(--max-ink);
|
|
5457
|
+
--max-shadow-md: 5px 5px 0 var(--max-ink);
|
|
5458
|
+
--max-theme-bg-size: 9rem 9rem, 13rem 13rem, auto;
|
|
5459
|
+
--max-theme-bg: radial-gradient(circle at 16% 24%, rgb(var(--max-secondary-rgb) / .09) 0 1px, transparent 1.5px),
|
|
5460
|
+
radial-gradient(circle at 82% 68%, rgb(var(--max-danger-rgb) / .08) 0 1px, transparent 1.6px),
|
|
5461
|
+
var(--max-bg);
|
|
5462
|
+
--max-card-bg: var(--max-paper-grain), var(--max-surface);
|
|
5463
|
+
--max-control-bg: var(--max-surface-strong);
|
|
5464
|
+
--usk-native-radius-sm: 0;
|
|
5465
|
+
--usk-native-radius: 0;
|
|
5466
|
+
--usk-native-radius-lg: 0;
|
|
5467
|
+
--usk-native-shadow: 3px 3px 0 var(--max-ink);
|
|
5468
|
+
--usk-native-shadow-md: 5px 5px 0 var(--max-ink);
|
|
5469
|
+
--usk-native-focus-ring: 0 0 0 3px var(--max-focus), 3px 3px 0 var(--max-ink);
|
|
5470
|
+
--usk-native-border-width: 3px;
|
|
5471
|
+
--usk-native-choice-background: var(--max-surface-strong);
|
|
5472
|
+
--usk-native-choice-border: 3px solid var(--max-ink);
|
|
5473
|
+
--usk-native-checkbox-radius: 0;
|
|
5474
|
+
--usk-native-choice-shadow: 2px 2px 0 var(--max-ink);
|
|
5475
|
+
--usk-native-choice-checked-background: var(--max-danger);
|
|
5476
|
+
--usk-native-choice-mark-color: var(--max-on-danger);
|
|
5477
|
+
--usk-native-range-track-background: var(--max-warning);
|
|
5478
|
+
--usk-native-range-track-border: var(--usk-native-border-width) solid var(--max-ink);
|
|
5479
|
+
--usk-native-range-track-radius: 0;
|
|
5480
|
+
--usk-native-range-track-shadow: 3px 3px 0 var(--max-ink);
|
|
5481
|
+
--usk-native-range-progress-background: var(--max-warning);
|
|
5482
|
+
--usk-native-range-thumb-background: var(--max-accent);
|
|
5483
|
+
--usk-native-range-thumb-border: 3px solid var(--max-ink);
|
|
5484
|
+
--usk-native-range-thumb-radius: 50%;
|
|
5485
|
+
--usk-native-range-thumb-shadow: 2px 2px 0 var(--max-ink);
|
|
5486
|
+
--usk-native-progress-track-background: var(--max-surface-strong);
|
|
5487
|
+
--usk-native-progress-track-border: 3px solid var(--max-ink);
|
|
5488
|
+
--usk-native-progress-track-radius: 0;
|
|
5489
|
+
--usk-native-progress-track-shadow: 3px 3px 0 var(--max-ink);
|
|
5490
|
+
--usk-native-progress-value-background: var(--max-accent);
|
|
5491
|
+
--usk-native-progress-value-radius: 0;
|
|
5492
|
+
--usk-native-progress-value-shadow: none;
|
|
5493
|
+
--usk-native-file-button-background: var(--max-secondary);
|
|
5494
|
+
--usk-native-file-button-border: 3px solid var(--max-ink);
|
|
5495
|
+
--usk-native-file-button-radius: 0;
|
|
5496
|
+
--usk-native-file-button-shadow: 3px 3px 0 var(--max-ink);
|
|
5497
|
+
--usk-native-color-swatch-border: 3px solid var(--max-ink);
|
|
5498
|
+
--usk-native-color-swatch-radius: 0;
|
|
5499
|
+
--usk-native-scrollbar-thumb: var(--max-primary);
|
|
5500
|
+
--usk-native-scrollbar-radius: 0;
|
|
5501
|
+
}
|
|
5502
|
+
|
|
5503
|
+
[data-ui="maximalist"][data-mode] :where(input[type="range"])::-webkit-slider-runnable-track {
|
|
5504
|
+
box-sizing: border-box;
|
|
5505
|
+
}
|
|
5506
|
+
|
|
5507
|
+
[data-ui="maximalist"][data-mode] :where(input[type="range"])::-webkit-slider-thumb {
|
|
5508
|
+
box-sizing: border-box;
|
|
5509
|
+
margin-block-start: calc((var(--usk-native-range-track-size) - var(--usk-native-range-thumb-size))/2 - var(--usk-native-border-width));
|
|
5510
|
+
}
|
|
5511
|
+
|
|
5512
|
+
[data-ui="maximalist"][data-mode] :where(input[type="range"])::-moz-range-track {
|
|
5513
|
+
box-sizing: border-box;
|
|
5514
|
+
}
|
|
5515
|
+
|
|
5516
|
+
[data-ui="maximalist"][data-mode] :where(input[type="range"])::-moz-range-thumb {
|
|
5517
|
+
box-sizing: border-box;
|
|
5518
|
+
}
|
|
5519
|
+
|
|
5520
|
+
.max-surface, .max-card, .max-panel, .max-toolbar, .max-table-wrap, .max-well, .max-inset, .max-alert, .max-tooltip, .max-progress, .max-nav, .max-card-service, .max-card-feature, .max-feature-strip, .max-callout-bar, .max-media-scrim, [data-ui="maximalist"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]), [data-ui="maximalist"] :where(dialog, details), :where([data-ui="maximalist"]) .ui-card, :where([data-ui="maximalist"]) .ui-toolbar, :where([data-ui="maximalist"]) .ui-table-wrap, :where([data-ui="maximalist"]) .ui-alert, :where([data-ui="maximalist"]) .ui-progress, :where([data-ui="maximalist"]) .ui-nav {
|
|
5521
|
+
border-radius: 0;
|
|
5522
|
+
}
|
|
5523
|
+
|
|
5524
|
+
.max-surface, .max-card, .max-panel, .max-toolbar, .max-table-wrap, .max-alert, .max-nav, .max-card-service, .max-card-feature, .max-feature-strip, .max-callout-bar, .max-media-scrim, [data-ui="maximalist"] dialog, :where([data-ui="maximalist"]) .ui-card, :where([data-ui="maximalist"]) .ui-toolbar, :where([data-ui="maximalist"]) .ui-table-wrap, :where([data-ui="maximalist"]) .ui-alert, :where([data-ui="maximalist"]) .ui-nav {
|
|
5525
|
+
border: 3px solid var(--max-ink);
|
|
5526
|
+
box-shadow: var(--max-pop-shadow);
|
|
5527
|
+
}
|
|
5528
|
+
|
|
5529
|
+
.max-card, .max-panel, .max-surface, .max-table-wrap, .max-card-service, .max-card-feature, .max-feature-strip, :where([data-ui="maximalist"]) .ui-card, :where([data-ui="maximalist"]) .ui-table-wrap {
|
|
5530
|
+
background: var(--max-card-bg);
|
|
5531
|
+
}
|
|
5532
|
+
|
|
5533
|
+
.max-toolbar, .max-well, .max-inset, :where([data-ui="maximalist"]) .ui-toolbar {
|
|
5534
|
+
background: var(--max-surface-strong);
|
|
5535
|
+
}
|
|
5536
|
+
|
|
5537
|
+
.max-button, .max-icon-button, [data-ui="maximalist"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])), :where([data-ui="maximalist"]) .ui-button, :where([data-ui="maximalist"]) .ui-icon-button {
|
|
5538
|
+
background-color: var(--max-surface-strong);
|
|
5539
|
+
min-block-size: 3rem;
|
|
5540
|
+
color: var(--max-text);
|
|
5541
|
+
border: 3px solid var(--max-ink);
|
|
5542
|
+
box-shadow: 4px 4px 0 var(--max-ink);
|
|
5543
|
+
font-family: var(--max-font-control);
|
|
5544
|
+
letter-spacing: .055em;
|
|
5545
|
+
text-transform: uppercase;
|
|
5546
|
+
background-image: none;
|
|
5547
|
+
border-radius: 0;
|
|
5548
|
+
font-weight: 900;
|
|
5549
|
+
line-height: 1.15;
|
|
5550
|
+
}
|
|
5551
|
+
|
|
5552
|
+
.max-button-primary, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="primary"]) {
|
|
5553
|
+
background-color: var(--max-primary);
|
|
5554
|
+
color: var(--max-on-primary);
|
|
5555
|
+
background-image: none;
|
|
5556
|
+
}
|
|
5557
|
+
|
|
5558
|
+
.max-button-secondary, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="secondary"]) {
|
|
5559
|
+
background-color: var(--max-secondary);
|
|
5560
|
+
color: var(--max-on-secondary);
|
|
5561
|
+
background-image: none;
|
|
5562
|
+
}
|
|
5563
|
+
|
|
5564
|
+
.max-button-danger, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="danger"]) {
|
|
5565
|
+
background-color: var(--max-danger);
|
|
5566
|
+
color: var(--max-on-danger);
|
|
5567
|
+
background-image: none;
|
|
5568
|
+
}
|
|
5569
|
+
|
|
5570
|
+
.max-button-ghost, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="ghost"]) {
|
|
5571
|
+
color: var(--max-link);
|
|
5572
|
+
box-shadow: none;
|
|
5573
|
+
background-color: #0000;
|
|
5574
|
+
border-color: #0000;
|
|
5575
|
+
}
|
|
5576
|
+
|
|
5577
|
+
.max-button:hover, .max-icon-button:hover, [data-ui="maximalist"] .max-button.is-hover, :where([data-ui="maximalist"]) .ui-button:hover, :where([data-ui="maximalist"]) .ui-icon-button:hover, :where([data-ui="maximalist"]) .ui-button.is-hover {
|
|
5578
|
+
box-shadow: 6px 6px 0 var(--max-ink);
|
|
5579
|
+
transform: translate(-2px, -2px);
|
|
5580
|
+
}
|
|
5581
|
+
|
|
5582
|
+
[data-ui="maximalist"] .max-button.is-focus, :where([data-ui="maximalist"]) .ui-button.is-focus {
|
|
5583
|
+
outline: 3px solid var(--max-focus);
|
|
5584
|
+
outline-offset: 3px;
|
|
5585
|
+
box-shadow: 4px 4px 0 var(--max-ink);
|
|
5586
|
+
}
|
|
5587
|
+
|
|
5588
|
+
.max-button:active, .max-icon-button:active, .max-button[aria-pressed="true"], .max-icon-button[aria-pressed="true"], :where([data-ui="maximalist"]) .ui-button:active, :where([data-ui="maximalist"]) .ui-icon-button:active, :where([data-ui="maximalist"]) .ui-button[aria-pressed="true"], :where([data-ui="maximalist"]) .ui-icon-button[aria-pressed="true"] {
|
|
5589
|
+
box-shadow: 1px 1px 0 var(--max-ink);
|
|
5590
|
+
transform: translate(3px, 3px);
|
|
5591
|
+
}
|
|
5592
|
+
|
|
5593
|
+
.max-input, .max-textarea, .max-select, :where([data-ui="maximalist"]) .ui-input, :where([data-ui="maximalist"]) .ui-textarea, :where([data-ui="maximalist"]) .ui-select {
|
|
5594
|
+
background-color: var(--max-surface-strong);
|
|
5595
|
+
min-block-size: 3rem;
|
|
5596
|
+
color: var(--max-text);
|
|
5597
|
+
border: 3px solid var(--max-ink);
|
|
5598
|
+
box-shadow: 3px 3px 0 var(--max-ink);
|
|
5599
|
+
background-image: none;
|
|
5600
|
+
border-radius: 0;
|
|
5601
|
+
}
|
|
5602
|
+
|
|
5603
|
+
.max-input:hover, .max-textarea:hover, .max-select:hover, :where([data-ui="maximalist"]) .ui-input:hover, :where([data-ui="maximalist"]) .ui-textarea:hover, :where([data-ui="maximalist"]) .ui-select:hover {
|
|
5604
|
+
border-color: var(--max-secondary);
|
|
5605
|
+
}
|
|
5606
|
+
|
|
5607
|
+
.max-input:focus, .max-textarea:focus, .max-select:focus, :where([data-ui="maximalist"]) .ui-input:focus, :where([data-ui="maximalist"]) .ui-textarea:focus, :where([data-ui="maximalist"]) .ui-select:focus {
|
|
5608
|
+
border-color: var(--max-focus);
|
|
5609
|
+
box-shadow: var(--max-focus-ring);
|
|
5610
|
+
}
|
|
5611
|
+
|
|
5612
|
+
.max-check-control, .max-radio-control, .max-switch-track, :where([data-ui="maximalist"]) .ui-check-control, :where([data-ui="maximalist"]) .ui-radio-control, :where([data-ui="maximalist"]) .ui-switch-track {
|
|
5613
|
+
background: var(--max-surface-strong);
|
|
5614
|
+
border: 3px solid var(--max-ink);
|
|
5615
|
+
box-shadow: 2px 2px 0 var(--max-ink);
|
|
5616
|
+
}
|
|
5617
|
+
|
|
5618
|
+
.max-check-control, .max-switch-track, :where([data-ui="maximalist"]) .ui-check-control, :where([data-ui="maximalist"]) .ui-switch-track {
|
|
5619
|
+
border-radius: 0;
|
|
5620
|
+
}
|
|
5621
|
+
|
|
5622
|
+
.max-check input:checked + .max-check-control, :where([data-ui="maximalist"]) .ui-check input:checked+.ui-check-control {
|
|
5623
|
+
background: var(--max-danger);
|
|
5624
|
+
color: var(--max-on-danger);
|
|
5625
|
+
}
|
|
5626
|
+
|
|
5627
|
+
.max-radio input:checked + .max-radio-control, .max-switch input:checked + .max-switch-track, :where([data-ui="maximalist"]) .ui-radio input:checked+.ui-radio-control, :where([data-ui="maximalist"]) .ui-switch input:checked+.ui-switch-track {
|
|
5628
|
+
background: var(--max-secondary);
|
|
5629
|
+
}
|
|
5630
|
+
|
|
5631
|
+
.max-badge, :where([data-ui="maximalist"]) .ui-badge {
|
|
5632
|
+
background: var(--max-surface-strong);
|
|
5633
|
+
min-block-size: 1.75rem;
|
|
5634
|
+
color: var(--max-text);
|
|
5635
|
+
border: 2px solid var(--max-ink);
|
|
5636
|
+
box-shadow: 3px 3px 0 var(--max-ink);
|
|
5637
|
+
clip-path: polygon(.3rem 0, 100% 0, calc(100% - .3rem) 100%, 0 100%);
|
|
5638
|
+
border-radius: 0;
|
|
5639
|
+
}
|
|
5640
|
+
|
|
5641
|
+
.max-badge-primary, :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="primary"]) {
|
|
5642
|
+
background: var(--max-primary);
|
|
5643
|
+
color: var(--max-on-primary);
|
|
5644
|
+
}
|
|
5645
|
+
|
|
5646
|
+
.max-badge-warning, :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="warning"]) {
|
|
5647
|
+
background: var(--max-warning);
|
|
5648
|
+
color: var(--max-on-warning);
|
|
5649
|
+
}
|
|
5650
|
+
|
|
5651
|
+
.max-kicker {
|
|
5652
|
+
background: var(--max-primary);
|
|
5653
|
+
color: var(--max-on-primary);
|
|
5654
|
+
box-shadow: 3px 3px 0 var(--max-ink);
|
|
5655
|
+
border-radius: 0;
|
|
5656
|
+
}
|
|
5657
|
+
|
|
5658
|
+
.max-panel:nth-of-type(3n+2) > .max-heading .max-kicker {
|
|
5659
|
+
background: var(--max-accent);
|
|
5660
|
+
color: var(--max-on-accent);
|
|
5661
|
+
transform: rotate(1deg);
|
|
5662
|
+
}
|
|
5663
|
+
|
|
5664
|
+
.max-panel:nth-of-type(3n) > .max-heading .max-kicker {
|
|
5665
|
+
background: var(--max-warning);
|
|
5666
|
+
color: var(--max-on-warning);
|
|
5667
|
+
transform: rotate(-1.5deg);
|
|
5668
|
+
}
|
|
5669
|
+
|
|
5670
|
+
.max-progress, :where([data-ui="maximalist"]) .ui-progress {
|
|
5671
|
+
background: var(--max-surface-strong);
|
|
5672
|
+
border: 3px solid var(--max-ink);
|
|
5673
|
+
block-size: 1rem;
|
|
5674
|
+
box-shadow: 3px 3px 0 var(--max-ink);
|
|
5675
|
+
border-radius: 0;
|
|
5676
|
+
padding: 0;
|
|
5677
|
+
}
|
|
5678
|
+
|
|
5679
|
+
.max-progress-bar, :where([data-ui="maximalist"]) .ui-progress-bar {
|
|
5680
|
+
background: var(--max-accent);
|
|
5681
|
+
border-radius: 0;
|
|
5682
|
+
}
|
|
5683
|
+
|
|
5684
|
+
.max-alert, :where([data-ui="maximalist"]) .ui-alert {
|
|
5685
|
+
background: var(--max-secondary);
|
|
5686
|
+
color: var(--max-on-secondary);
|
|
5687
|
+
border-inline-start-width: 3px;
|
|
5688
|
+
}
|
|
5689
|
+
|
|
5690
|
+
.max-alert .max-alert-body, :where([data-ui="maximalist"]) .ui-alert .ui-alert-body {
|
|
5691
|
+
color: inherit;
|
|
5692
|
+
}
|
|
5693
|
+
|
|
5694
|
+
.max-tooltip, [data-ui="maximalist"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
|
|
5695
|
+
background: var(--max-ink);
|
|
5696
|
+
color: var(--max-on-ink);
|
|
5697
|
+
border: 3px solid var(--max-warning);
|
|
5698
|
+
box-shadow: 4px 4px 0 var(--max-ink);
|
|
5699
|
+
}
|
|
5700
|
+
|
|
5701
|
+
.max-tooltip-arrow {
|
|
5702
|
+
background: var(--max-warning);
|
|
5703
|
+
border-color: var(--max-on-warning);
|
|
5704
|
+
}
|
|
5705
|
+
|
|
5706
|
+
.max-spinner, .max-loading-spinner, [data-ui="maximalist"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]), .max-button[aria-busy="true"]:after, .max-icon-button[aria-busy="true"]:after, [data-ui="maximalist"] :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="maximalist"]) .ui-button[aria-busy="true"]:after, :where([data-ui="maximalist"]) .ui-icon-button[aria-busy="true"]:after {
|
|
5707
|
+
background: conic-gradient(var(--max-accent)0 28%,transparent 28% 100%);
|
|
5708
|
+
border: 5px solid var(--max-surface-soft);
|
|
5709
|
+
box-shadow: none;
|
|
5710
|
+
border-radius: 50%;
|
|
5711
|
+
animation: .8s linear infinite max-spin;
|
|
5712
|
+
}
|
|
5713
|
+
|
|
5714
|
+
.max-button[aria-busy="true"]:after, .max-icon-button[aria-busy="true"]:after, [data-ui="maximalist"] :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="maximalist"]) .ui-button[aria-busy="true"]:after, :where([data-ui="maximalist"]) .ui-icon-button[aria-busy="true"]:after {
|
|
5715
|
+
clip-path: none;
|
|
5716
|
+
border-width: .12em;
|
|
5717
|
+
flex-shrink: 0;
|
|
5718
|
+
}
|
|
5719
|
+
|
|
5720
|
+
.max-nav, :where([data-ui="maximalist"]) .ui-nav {
|
|
5721
|
+
background: var(--max-ink);
|
|
5722
|
+
border-color: var(--max-ink);
|
|
5723
|
+
padding: .5rem;
|
|
5724
|
+
}
|
|
5725
|
+
|
|
5726
|
+
.max-nav-link, :where([data-ui="maximalist"]) .ui-nav-link {
|
|
5727
|
+
color: var(--max-on-ink);
|
|
5728
|
+
border-radius: 0;
|
|
5729
|
+
}
|
|
5730
|
+
|
|
5731
|
+
.max-nav-link[aria-current="page"], .max-nav-link.is-active, :where([data-ui="maximalist"]) .ui-nav-link[aria-current="page"], :where([data-ui="maximalist"]) .ui-nav-link.is-active {
|
|
5732
|
+
background: var(--max-warning);
|
|
5733
|
+
color: var(--max-on-warning);
|
|
5734
|
+
box-shadow: 3px 3px 0 var(--max-secondary);
|
|
5735
|
+
}
|
|
5736
|
+
|
|
5737
|
+
.max-table-wrap, :where([data-ui="maximalist"]) .ui-table-wrap {
|
|
5738
|
+
overflow: auto;
|
|
5739
|
+
}
|
|
5740
|
+
|
|
5741
|
+
.max-table th, :where([data-ui="maximalist"]) .ui-table th {
|
|
5742
|
+
background-color: var(--max-warning);
|
|
5743
|
+
color: var(--max-on-warning);
|
|
5744
|
+
border-color: var(--max-ink);
|
|
5745
|
+
background-image: none;
|
|
5746
|
+
}
|
|
5747
|
+
|
|
5748
|
+
.max-table td, :where([data-ui="maximalist"]) .ui-table td {
|
|
5749
|
+
color: var(--max-text);
|
|
5750
|
+
border-color: var(--max-ink);
|
|
5751
|
+
}
|
|
5752
|
+
|
|
5753
|
+
.max-card-service, .max-card-feature {
|
|
5754
|
+
transform: rotate(-.35deg);
|
|
5755
|
+
}
|
|
5756
|
+
|
|
5757
|
+
.max-card-service:nth-of-type(2n), .max-card-feature:nth-of-type(2n) {
|
|
5758
|
+
transform: rotate(.35deg);
|
|
5759
|
+
}
|
|
5760
|
+
|
|
5761
|
+
.max-icon-medallion {
|
|
5762
|
+
background: var(--max-secondary);
|
|
5763
|
+
color: var(--max-on-secondary);
|
|
5764
|
+
border-radius: 0;
|
|
5765
|
+
}
|
|
5766
|
+
|
|
5767
|
+
.max-feature-strip {
|
|
5768
|
+
background: var(--max-surface-strong);
|
|
5769
|
+
}
|
|
5770
|
+
|
|
5771
|
+
.max-callout-bar .max-copy {
|
|
5772
|
+
color: inherit;
|
|
5773
|
+
}
|
|
5774
|
+
|
|
5775
|
+
[data-ui="maximalist"][data-mode] :where(dialog) {
|
|
5776
|
+
background: var(--max-surface-strong);
|
|
5777
|
+
color: var(--max-text);
|
|
5778
|
+
border: 3px solid var(--max-ink);
|
|
5779
|
+
box-shadow: 5px 5px 0 var(--max-danger);
|
|
5780
|
+
border-radius: 0;
|
|
5781
|
+
}
|
|
5782
|
+
|
|
5783
|
+
[data-ui="maximalist"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
|
|
5784
|
+
background-color: var(--max-primary);
|
|
5785
|
+
color: var(--max-on-primary);
|
|
5786
|
+
background-image: none;
|
|
5787
|
+
}
|
|
5788
|
+
|
|
5789
|
+
[data-ui="maximalist"][data-mode] :where(table:not([class]) th) {
|
|
5790
|
+
background: var(--max-warning);
|
|
5791
|
+
color: var(--max-on-warning);
|
|
5792
|
+
border: 2px solid var(--max-ink);
|
|
5793
|
+
}
|
|
5794
|
+
|
|
5795
|
+
[data-ui="maximalist"] :where(details) {
|
|
5796
|
+
border: 3px solid var(--max-ink);
|
|
5797
|
+
box-shadow: 3px 3px 0 var(--max-ink);
|
|
5798
|
+
}
|
|
5799
|
+
|
|
5800
|
+
[data-ui="maximalist"] :where(summary) {
|
|
5801
|
+
font-family: var(--max-font-heading);
|
|
5802
|
+
letter-spacing: .05em;
|
|
5803
|
+
text-transform: uppercase;
|
|
5804
|
+
font-weight: 900;
|
|
5805
|
+
}
|
|
5806
|
+
|
|
5807
|
+
[data-ui="maximalist"] :where(:focus-visible) {
|
|
5808
|
+
outline: 3px solid var(--max-focus);
|
|
5809
|
+
outline-offset: 3px;
|
|
5810
|
+
}
|
|
5811
|
+
|
|
5812
|
+
[data-ui="maximalist"][data-mode] .max-button.max-button-warning, :where([data-ui="maximalist"])[data-mode] .ui-button.ui-button:where([data-ui-variant="warning"]) {
|
|
5813
|
+
background: var(--max-warning);
|
|
5814
|
+
color: var(--max-on-warning);
|
|
5815
|
+
border-color: var(--max-warning);
|
|
5816
|
+
text-shadow: none;
|
|
5817
|
+
}
|
|
5818
|
+
|
|
5819
|
+
:root {
|
|
5820
|
+
--max-poster-dark-ink: #09090b;
|
|
5821
|
+
--max-poster-light-ink: #fffaf0;
|
|
5822
|
+
}
|
|
5823
|
+
|
|
5824
|
+
[data-ui="maximalist"][data-mode] {
|
|
5825
|
+
--max-poster-warning-deep: var(--max-warning);
|
|
5826
|
+
--max-poster-secondary-deep: var(--max-secondary);
|
|
5827
|
+
--max-poster-success-deep: var(--max-success);
|
|
5828
|
+
--usk-native-select-indicator-image: linear-gradient(38deg, transparent 38%, var(--max-ink) 39% 66%, transparent 67%),
|
|
5829
|
+
linear-gradient(142deg, transparent 38%, var(--max-ink) 39% 66%, transparent 67%);
|
|
5830
|
+
--usk-native-select-indicator-size: .68rem .68rem, .68rem .68rem;
|
|
5831
|
+
--usk-native-select-indicator-position: calc(100% - 1.7rem) 48%, calc(100% - 1.16rem) 52%;
|
|
5832
|
+
}
|
|
5833
|
+
|
|
5834
|
+
@supports (color: color-mix(in srgb,black,white)) {
|
|
5835
|
+
[data-ui="maximalist"][data-mode] {
|
|
5836
|
+
--max-poster-warning-deep: color-mix(in srgb, var(--max-warning) 48%, var(--max-poster-dark-ink));
|
|
5837
|
+
--max-poster-secondary-deep: color-mix(in srgb, var(--max-secondary) 64%, var(--max-poster-dark-ink));
|
|
5838
|
+
--max-poster-success-deep: color-mix(in srgb, var(--max-success) 70%, var(--max-poster-dark-ink));
|
|
5839
|
+
}
|
|
5840
|
+
}
|
|
5841
|
+
|
|
5842
|
+
[data-ui="maximalist"][data-mode] h1:not([class]) {
|
|
5843
|
+
letter-spacing: max(.045em, .8px);
|
|
5844
|
+
}
|
|
5845
|
+
|
|
5846
|
+
.max-button-primary, .max-button-secondary, .max-button-danger, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="primary"]), :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="secondary"]), :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="danger"]) {
|
|
5847
|
+
color: var(--max-poster-dark-ink);
|
|
5848
|
+
}
|
|
5849
|
+
|
|
5850
|
+
.max-nav-link[aria-current="page"], .max-nav-link.is-active, .max-table th, [data-ui="maximalist"][data-mode] :where(table:not([class]) th), :where([data-ui="maximalist"]) .ui-nav-link[aria-current="page"], :where([data-ui="maximalist"]) .ui-nav-link.is-active, :where([data-ui="maximalist"]) .ui-table th {
|
|
5851
|
+
background: var(--max-poster-warning-deep);
|
|
5852
|
+
color: var(--max-poster-light-ink);
|
|
5853
|
+
}
|
|
5854
|
+
|
|
5855
|
+
.max-badge-seal {
|
|
5856
|
+
background: var(--max-poster-warning-deep);
|
|
5857
|
+
color: var(--max-poster-light-ink);
|
|
5858
|
+
}
|
|
5859
|
+
|
|
5860
|
+
.max-badge-secondary, .max-badge-success, .max-badge-danger, .max-kicker, .max-card-service > .max-kicker, :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="secondary"]), :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="success"]), :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="danger"]) {
|
|
5861
|
+
color: var(--max-poster-dark-ink);
|
|
5862
|
+
}
|
|
5863
|
+
|
|
5864
|
+
.max-badge-warning, .max-heading > .max-kicker, .max-panel:nth-of-type(3n) > .max-heading .max-kicker, :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="warning"]) {
|
|
5865
|
+
background: var(--max-poster-warning-deep);
|
|
5866
|
+
color: var(--max-poster-light-ink);
|
|
5867
|
+
}
|
|
5868
|
+
|
|
5869
|
+
.max-sticker {
|
|
5870
|
+
font-weight: 700;
|
|
5871
|
+
}
|
|
5872
|
+
|
|
5873
|
+
.max-kicker + .max-heading {
|
|
5874
|
+
margin-block-start: .75rem;
|
|
5875
|
+
}
|
|
5876
|
+
|
|
5877
|
+
.max-icon-button :where(svg), :where([data-ui="maximalist"]) .ui-icon-button :where(svg) {
|
|
5878
|
+
stroke-width: 2.75px;
|
|
5879
|
+
block-size: 1.5rem;
|
|
5880
|
+
inline-size: 1.5rem;
|
|
5881
|
+
font-size: 1.5rem;
|
|
5882
|
+
font-weight: 800;
|
|
5883
|
+
}
|
|
5884
|
+
|
|
5885
|
+
.max-card-service > .max-icon-medallion :where(svg) {
|
|
5886
|
+
stroke-width: 3.25px;
|
|
5887
|
+
block-size: 1.75rem;
|
|
5888
|
+
inline-size: 1.75rem;
|
|
5889
|
+
font-size: 1.75rem;
|
|
5890
|
+
font-weight: 800;
|
|
5891
|
+
}
|
|
5892
|
+
|
|
5893
|
+
.max-feature-item > .max-icon-medallion > :where(svg), .max-callout-bar > .max-icon-medallion > :where(svg) {
|
|
5894
|
+
stroke-width: 3.25px;
|
|
5895
|
+
}
|
|
5896
|
+
|
|
5897
|
+
.max-icon-button > :where(span), :where([data-ui="maximalist"]) .ui-icon-button>:where(span) {
|
|
5898
|
+
block-size: 1.5rem;
|
|
5899
|
+
inline-size: 1.5rem;
|
|
5900
|
+
}
|
|
5901
|
+
|
|
5902
|
+
.max-card-service > .max-icon-medallion > :where(span) {
|
|
5903
|
+
block-size: 1.75rem;
|
|
5904
|
+
inline-size: 1.75rem;
|
|
5905
|
+
}
|
|
5906
|
+
|
|
5907
|
+
.max-callout-bar {
|
|
5908
|
+
background: var(--max-poster-dark-ink);
|
|
5909
|
+
color: var(--max-poster-light-ink);
|
|
5910
|
+
}
|
|
5911
|
+
|
|
5912
|
+
.max-callout-bar > div {
|
|
5913
|
+
border-inline-start-color: var(--max-poster-light-ink);
|
|
5914
|
+
}
|
|
5915
|
+
|
|
5916
|
+
.max-callout-bar > div > strong {
|
|
5917
|
+
color: inherit;
|
|
5918
|
+
letter-spacing: .02em;
|
|
5919
|
+
font-weight: 800;
|
|
5920
|
+
line-height: 1.25;
|
|
5921
|
+
}
|
|
5922
|
+
|
|
5923
|
+
.max-callout-bar .max-copy {
|
|
5924
|
+
color: inherit;
|
|
5925
|
+
font-family: var(--max-font-sans);
|
|
5926
|
+
font-weight: 600;
|
|
5927
|
+
line-height: 1.55;
|
|
5928
|
+
}
|
|
5929
|
+
|
|
5930
|
+
[data-ui="maximalist"][data-mode] {
|
|
5931
|
+
--usk-native-font-heading: var(--max-font-heading);
|
|
5932
|
+
--usk-native-font-control: var(--max-font-control);
|
|
5933
|
+
}
|
|
5934
|
+
|
|
5935
|
+
.max-title {
|
|
5936
|
+
letter-spacing: max(.045em, .8px);
|
|
5937
|
+
font-weight: 800;
|
|
5938
|
+
line-height: 1.02;
|
|
5939
|
+
}
|
|
5940
|
+
|
|
5941
|
+
.max-heading, [data-ui="maximalist"][data-mode] :where(h1, h2, h3, h4, h5, h6):not([class]) {
|
|
5942
|
+
font-family: var(--max-font-heading);
|
|
5943
|
+
letter-spacing: max(.04em, .65px);
|
|
5944
|
+
font-weight: 800;
|
|
5945
|
+
line-height: 1.12;
|
|
5946
|
+
}
|
|
5947
|
+
|
|
5948
|
+
.max-kicker, .max-button, .max-icon-button, .max-badge, .max-badge-seal, .max-nav-link, .max-label, .max-alert-title, .max-table th, .max-tooltip, .max-sticker, .max-eyebrow, .max-skip-link, [data-ui="maximalist"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]), [data-ui="maximalist"] :where(summary), [data-ui="maximalist"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])), :where([data-ui="maximalist"]) .ui-button, :where([data-ui="maximalist"]) .ui-icon-button, :where([data-ui="maximalist"]) .ui-badge, :where([data-ui="maximalist"]) .ui-nav-link, :where([data-ui="maximalist"]) .ui-label, :where([data-ui="maximalist"]) .ui-alert-title, :where([data-ui="maximalist"]) .ui-table th {
|
|
5949
|
+
font-family: var(--max-font-control);
|
|
5950
|
+
letter-spacing: max(.045em, .8px);
|
|
5951
|
+
font-weight: 700;
|
|
5952
|
+
line-height: 1.2;
|
|
5953
|
+
}
|
|
5954
|
+
|
|
5955
|
+
[data-ui="maximalist"][data-mode] :where(strong, b, dt, legend, output, [aria-current="page"]), .max-callout-bar > div > strong, .max-media-scrim > :where(figcaption, [data-media-caption]) strong {
|
|
5956
|
+
font-weight: 700;
|
|
5957
|
+
}
|
|
5958
|
+
|
|
5959
|
+
.max-button-primary, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="primary"]) {
|
|
5960
|
+
background: var(--max-primary);
|
|
5961
|
+
color: var(--max-on-primary);
|
|
5962
|
+
}
|
|
5963
|
+
|
|
5964
|
+
.max-button-secondary, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="secondary"]) {
|
|
5965
|
+
background: var(--max-secondary);
|
|
5966
|
+
color: var(--max-on-secondary);
|
|
5967
|
+
}
|
|
5968
|
+
|
|
5969
|
+
.max-button-danger, :where([data-ui="maximalist"]) .ui-button:where([data-ui-variant="danger"]) {
|
|
5970
|
+
background: var(--max-danger);
|
|
5971
|
+
color: var(--max-on-danger);
|
|
5972
|
+
}
|
|
5973
|
+
|
|
5974
|
+
:where(.max-button-primary, .max-button-secondary, .max-button-danger) :where(svg), :where(.max-button-primary, .max-button-secondary, .max-button-danger)[aria-busy="true"]:after, :where([data-ui="maximalist"]) :where(.ui-button:where([data-ui-variant="primary"]),.ui-button:where([data-ui-variant="secondary"]),.ui-button:where([data-ui-variant="danger"])) :where(svg), :where([data-ui="maximalist"]) :where(.ui-button:where([data-ui-variant="primary"]),.ui-button:where([data-ui-variant="secondary"]),.ui-button:where([data-ui-variant="danger"]))[aria-busy="true"]:after {
|
|
5975
|
+
color: inherit;
|
|
5976
|
+
}
|
|
5977
|
+
|
|
5978
|
+
.max-nav-link[aria-current="page"], .max-nav-link.is-active, .max-table th, [data-ui="maximalist"][data-mode] :where(table:not([class]) th), .max-badge-seal, .max-badge-warning, .max-heading > .max-kicker, .max-panel:nth-of-type(3n) > .max-heading .max-kicker, :where([data-ui="maximalist"]) .ui-nav-link[aria-current="page"], :where([data-ui="maximalist"]) .ui-nav-link.is-active, :where([data-ui="maximalist"]) .ui-table th, :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="warning"]) {
|
|
5979
|
+
background: var(--max-warning);
|
|
5980
|
+
color: var(--max-on-warning);
|
|
5981
|
+
}
|
|
5982
|
+
|
|
5983
|
+
.max-alert, :where([data-ui="maximalist"]) .ui-alert {
|
|
5984
|
+
background: var(--max-secondary);
|
|
5985
|
+
color: var(--max-on-secondary);
|
|
5986
|
+
}
|
|
5987
|
+
|
|
5988
|
+
.max-alert-success, :where([data-ui="maximalist"]) .ui-alert:where([data-ui-variant="success"]) {
|
|
5989
|
+
background: var(--max-success);
|
|
5990
|
+
color: var(--max-on-success);
|
|
5991
|
+
}
|
|
5992
|
+
|
|
5993
|
+
.max-alert-warning, :where([data-ui="maximalist"]) .ui-alert:where([data-ui-variant="warning"]) {
|
|
5994
|
+
background: var(--max-warning);
|
|
5995
|
+
color: var(--max-on-warning);
|
|
5996
|
+
}
|
|
5997
|
+
|
|
5998
|
+
.max-alert-danger, :where([data-ui="maximalist"]) .ui-alert:where([data-ui-variant="danger"]) {
|
|
5999
|
+
background: var(--max-danger);
|
|
6000
|
+
color: var(--max-on-danger);
|
|
6001
|
+
}
|
|
6002
|
+
|
|
6003
|
+
.max-alert .max-alert-title, .max-alert .max-alert-body, :where([data-ui="maximalist"]) .ui-alert .ui-alert-title, :where([data-ui="maximalist"]) .ui-alert .ui-alert-body {
|
|
6004
|
+
color: inherit;
|
|
6005
|
+
}
|
|
6006
|
+
|
|
6007
|
+
.max-badge-primary, .max-kicker, .max-card-service > .max-kicker, :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="primary"]) {
|
|
6008
|
+
background: var(--max-primary);
|
|
6009
|
+
color: var(--max-on-primary);
|
|
6010
|
+
}
|
|
6011
|
+
|
|
6012
|
+
.max-badge-secondary, :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="secondary"]) {
|
|
6013
|
+
background: var(--max-secondary);
|
|
6014
|
+
color: var(--max-on-secondary);
|
|
6015
|
+
}
|
|
6016
|
+
|
|
6017
|
+
.max-badge-success, :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="success"]) {
|
|
6018
|
+
background: var(--max-success);
|
|
6019
|
+
color: var(--max-on-success);
|
|
6020
|
+
}
|
|
6021
|
+
|
|
6022
|
+
.max-badge-danger, :where([data-ui="maximalist"]) .ui-badge:where([data-ui-variant="danger"]) {
|
|
6023
|
+
background: var(--max-danger);
|
|
6024
|
+
color: var(--max-on-danger);
|
|
6025
|
+
}
|
|
4705
6026
|
}
|