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="data-terminal"])[data-
|
|
2578
|
+
), [data-ui]:where([data-ui="data-terminal"])[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="data-terminal"])[data-
|
|
2628
|
+
), [data-ui]:where([data-ui="data-terminal"])[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="data-terminal"])[data-
|
|
2670
|
+
), [data-ui]:where([data-ui="data-terminal"])[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="data-terminal"])[data-
|
|
3309
|
+
), [data-ui]:where([data-ui="data-terminal"])[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="data-terminal"])[data-
|
|
3387
|
+
), [data-ui]:where([data-ui="data-terminal"])[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="data-terminal"])[data-
|
|
3423
|
+
), [data-ui]:where([data-ui="data-terminal"])[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); }
|
|
@@ -3533,6 +3780,29 @@
|
|
|
3533
3780
|
--lightningcss-light: initial;
|
|
3534
3781
|
--lightningcss-dark: ;
|
|
3535
3782
|
color-scheme: light;
|
|
3783
|
+
--terminal-fallback-bg-rgb: 250 250 246;
|
|
3784
|
+
--terminal-fallback-surface-rgb: 255 255 252;
|
|
3785
|
+
--terminal-fallback-surface-strong-rgb: 255 255 252;
|
|
3786
|
+
--terminal-fallback-surface-soft-rgb: 246 246 241;
|
|
3787
|
+
--terminal-fallback-text-rgb: 20 22 21;
|
|
3788
|
+
--terminal-fallback-text-muted-rgb: 84 87 84;
|
|
3789
|
+
--terminal-fallback-border-rgb: 137 140 136;
|
|
3790
|
+
--terminal-fallback-primary-rgb: 22 82 190;
|
|
3791
|
+
--terminal-fallback-primary-hover-rgb: 15 66 158;
|
|
3792
|
+
--terminal-fallback-primary-text-rgb: 255 255 255;
|
|
3793
|
+
--terminal-fallback-secondary-rgb: 24 111 138;
|
|
3794
|
+
--terminal-fallback-secondary-hover-rgb: 16 86 108;
|
|
3795
|
+
--terminal-fallback-secondary-text-rgb: 255 255 255;
|
|
3796
|
+
--terminal-fallback-accent-rgb: 190 111 0;
|
|
3797
|
+
--terminal-fallback-accent-text-rgb: 20 22 21;
|
|
3798
|
+
--terminal-fallback-success-rgb: 36 132 55;
|
|
3799
|
+
--terminal-fallback-success-text-rgb: 255 255 255;
|
|
3800
|
+
--terminal-fallback-warning-rgb: 190 111 0;
|
|
3801
|
+
--terminal-fallback-warning-text-rgb: 20 22 21;
|
|
3802
|
+
--terminal-fallback-danger-rgb: 211 43 50;
|
|
3803
|
+
--terminal-fallback-danger-text-rgb: 255 255 255;
|
|
3804
|
+
--terminal-fallback-link-rgb: 22 82 190;
|
|
3805
|
+
--terminal-fallback-focus-rgb: 22 82 190;
|
|
3536
3806
|
--terminal-panel-alpha: .98;
|
|
3537
3807
|
--terminal-panel-soft-alpha: .78;
|
|
3538
3808
|
--terminal-border-alpha: .58;
|
|
@@ -3544,6 +3814,29 @@
|
|
|
3544
3814
|
--lightningcss-light: ;
|
|
3545
3815
|
--lightningcss-dark: initial;
|
|
3546
3816
|
color-scheme: dark;
|
|
3817
|
+
--terminal-fallback-bg-rgb: 2 4 3;
|
|
3818
|
+
--terminal-fallback-surface-rgb: 0 0 0;
|
|
3819
|
+
--terminal-fallback-surface-strong-rgb: 0 0 0;
|
|
3820
|
+
--terminal-fallback-surface-soft-rgb: 8 10 9;
|
|
3821
|
+
--terminal-fallback-text-rgb: 236 237 232;
|
|
3822
|
+
--terminal-fallback-text-muted-rgb: 164 166 160;
|
|
3823
|
+
--terminal-fallback-border-rgb: 163 116 0;
|
|
3824
|
+
--terminal-fallback-primary-rgb: 52 125 255;
|
|
3825
|
+
--terminal-fallback-primary-hover-rgb: 100 156 255;
|
|
3826
|
+
--terminal-fallback-primary-text-rgb: 0 0 0;
|
|
3827
|
+
--terminal-fallback-secondary-rgb: 52 171 213;
|
|
3828
|
+
--terminal-fallback-secondary-hover-rgb: 93 199 235;
|
|
3829
|
+
--terminal-fallback-secondary-text-rgb: 0 0 0;
|
|
3830
|
+
--terminal-fallback-accent-rgb: 255 176 0;
|
|
3831
|
+
--terminal-fallback-accent-text-rgb: 0 0 0;
|
|
3832
|
+
--terminal-fallback-success-rgb: 74 205 84;
|
|
3833
|
+
--terminal-fallback-success-text-rgb: 0 0 0;
|
|
3834
|
+
--terminal-fallback-warning-rgb: 255 176 0;
|
|
3835
|
+
--terminal-fallback-warning-text-rgb: 0 0 0;
|
|
3836
|
+
--terminal-fallback-danger-rgb: 255 71 78;
|
|
3837
|
+
--terminal-fallback-danger-text-rgb: 0 0 0;
|
|
3838
|
+
--terminal-fallback-link-rgb: 82 151 255;
|
|
3839
|
+
--terminal-fallback-focus-rgb: 82 151 255;
|
|
3547
3840
|
--terminal-panel-alpha: .92;
|
|
3548
3841
|
--terminal-panel-soft-alpha: .64;
|
|
3549
3842
|
--terminal-border-alpha: .52;
|
|
@@ -3555,6 +3848,29 @@
|
|
|
3555
3848
|
--lightningcss-light: ;
|
|
3556
3849
|
--lightningcss-dark: initial;
|
|
3557
3850
|
color-scheme: dark;
|
|
3851
|
+
--terminal-fallback-bg-rgb: 0 0 0;
|
|
3852
|
+
--terminal-fallback-surface-rgb: 0 0 0;
|
|
3853
|
+
--terminal-fallback-surface-strong-rgb: 0 0 0;
|
|
3854
|
+
--terminal-fallback-surface-soft-rgb: 0 0 0;
|
|
3855
|
+
--terminal-fallback-text-rgb: 255 255 255;
|
|
3856
|
+
--terminal-fallback-text-muted-rgb: 224 224 224;
|
|
3857
|
+
--terminal-fallback-border-rgb: 255 212 0;
|
|
3858
|
+
--terminal-fallback-primary-rgb: 92 153 255;
|
|
3859
|
+
--terminal-fallback-primary-hover-rgb: 132 179 255;
|
|
3860
|
+
--terminal-fallback-primary-text-rgb: 0 0 0;
|
|
3861
|
+
--terminal-fallback-secondary-rgb: 78 224 255;
|
|
3862
|
+
--terminal-fallback-secondary-hover-rgb: 130 235 255;
|
|
3863
|
+
--terminal-fallback-secondary-text-rgb: 0 0 0;
|
|
3864
|
+
--terminal-fallback-accent-rgb: 255 212 0;
|
|
3865
|
+
--terminal-fallback-accent-text-rgb: 0 0 0;
|
|
3866
|
+
--terminal-fallback-success-rgb: 92 255 105;
|
|
3867
|
+
--terminal-fallback-success-text-rgb: 0 0 0;
|
|
3868
|
+
--terminal-fallback-warning-rgb: 255 212 0;
|
|
3869
|
+
--terminal-fallback-warning-text-rgb: 0 0 0;
|
|
3870
|
+
--terminal-fallback-danger-rgb: 255 96 102;
|
|
3871
|
+
--terminal-fallback-danger-text-rgb: 0 0 0;
|
|
3872
|
+
--terminal-fallback-link-rgb: 126 176 255;
|
|
3873
|
+
--terminal-fallback-focus-rgb: 255 255 255;
|
|
3558
3874
|
--terminal-panel-alpha: 1;
|
|
3559
3875
|
--terminal-panel-soft-alpha: .92;
|
|
3560
3876
|
--terminal-border-alpha: 1;
|
|
@@ -3577,15 +3893,42 @@
|
|
|
3577
3893
|
--terminal-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
|
|
3578
3894
|
--terminal-secondary-text-rgb: var(--usk-secondary-text-rgb);
|
|
3579
3895
|
--terminal-accent-rgb: var(--usk-accent-rgb);
|
|
3580
|
-
--terminal-success-rgb: var(--usk-success-rgb);
|
|
3581
|
-
--terminal-warning-rgb: var(--usk-warning-rgb);
|
|
3582
|
-
--terminal-danger-rgb: var(--usk-danger-rgb);
|
|
3583
|
-
--terminal-link-rgb: var(--usk-link-rgb);
|
|
3584
3896
|
--terminal-accent-text-rgb: var(--usk-accent-text-rgb);
|
|
3897
|
+
--terminal-success-rgb: var(--usk-success-rgb);
|
|
3585
3898
|
--terminal-success-text-rgb: var(--usk-success-text-rgb);
|
|
3899
|
+
--terminal-warning-rgb: var(--usk-warning-rgb);
|
|
3586
3900
|
--terminal-warning-text-rgb: var(--usk-warning-text-rgb);
|
|
3901
|
+
--terminal-danger-rgb: var(--usk-danger-rgb);
|
|
3587
3902
|
--terminal-danger-text-rgb: var(--usk-danger-text-rgb);
|
|
3903
|
+
--terminal-link-rgb: var(--usk-link-rgb);
|
|
3588
3904
|
--terminal-focus-rgb: var(--usk-focus-rgb);
|
|
3905
|
+
}
|
|
3906
|
+
|
|
3907
|
+
[data-ui="data-terminal"][data-mode] {
|
|
3908
|
+
--usk-native-bg: var(--terminal-bg);
|
|
3909
|
+
--terminal-bg-rgb: var(--usk-bg-rgb, var(--terminal-fallback-bg-rgb));
|
|
3910
|
+
--terminal-surface-rgb: var(--usk-surface-rgb, var(--terminal-fallback-surface-rgb));
|
|
3911
|
+
--terminal-surface-strong-rgb: var(--usk-surface-strong-rgb, var(--terminal-fallback-surface-strong-rgb));
|
|
3912
|
+
--terminal-surface-soft-rgb: var(--usk-surface-soft-rgb, var(--terminal-fallback-surface-soft-rgb));
|
|
3913
|
+
--terminal-text-rgb: var(--usk-text-rgb, var(--terminal-fallback-text-rgb));
|
|
3914
|
+
--terminal-text-muted-rgb: var(--usk-text-muted-rgb, var(--terminal-fallback-text-muted-rgb));
|
|
3915
|
+
--terminal-border-rgb: var(--usk-border-rgb, var(--terminal-fallback-border-rgb));
|
|
3916
|
+
--terminal-primary-rgb: var(--usk-primary-rgb, var(--terminal-fallback-primary-rgb));
|
|
3917
|
+
--terminal-primary-hover-rgb: var(--usk-primary-hover-rgb, var(--terminal-fallback-primary-hover-rgb));
|
|
3918
|
+
--terminal-primary-text-rgb: var(--usk-primary-text-rgb, var(--terminal-fallback-primary-text-rgb));
|
|
3919
|
+
--terminal-secondary-rgb: var(--usk-secondary-rgb, var(--terminal-fallback-secondary-rgb));
|
|
3920
|
+
--terminal-secondary-hover-rgb: var(--usk-secondary-hover-rgb, var(--terminal-fallback-secondary-hover-rgb));
|
|
3921
|
+
--terminal-secondary-text-rgb: var(--usk-secondary-text-rgb, var(--terminal-fallback-secondary-text-rgb));
|
|
3922
|
+
--terminal-accent-rgb: var(--usk-accent-rgb, var(--terminal-fallback-accent-rgb));
|
|
3923
|
+
--terminal-accent-text-rgb: var(--usk-accent-text-rgb, var(--terminal-fallback-accent-text-rgb));
|
|
3924
|
+
--terminal-success-rgb: var(--usk-success-rgb, var(--terminal-fallback-success-rgb));
|
|
3925
|
+
--terminal-success-text-rgb: var(--usk-success-text-rgb, var(--terminal-fallback-success-text-rgb));
|
|
3926
|
+
--terminal-warning-rgb: var(--usk-warning-rgb, var(--terminal-fallback-warning-rgb));
|
|
3927
|
+
--terminal-warning-text-rgb: var(--usk-warning-text-rgb, var(--terminal-fallback-warning-text-rgb));
|
|
3928
|
+
--terminal-danger-rgb: var(--usk-danger-rgb, var(--terminal-fallback-danger-rgb));
|
|
3929
|
+
--terminal-danger-text-rgb: var(--usk-danger-text-rgb, var(--terminal-fallback-danger-text-rgb));
|
|
3930
|
+
--terminal-link-rgb: var(--usk-link-rgb, var(--terminal-fallback-link-rgb));
|
|
3931
|
+
--terminal-focus-rgb: var(--usk-focus-rgb, var(--terminal-fallback-focus-rgb));
|
|
3589
3932
|
--usk-native-surface: var(--terminal-surface);
|
|
3590
3933
|
--usk-native-surface-strong: var(--terminal-surface-strong);
|
|
3591
3934
|
--usk-native-surface-soft: var(--terminal-surface-soft);
|
|
@@ -3615,6 +3958,57 @@
|
|
|
3615
3958
|
--usk-native-border-width: 1px;
|
|
3616
3959
|
--usk-native-field-gap: .5rem;
|
|
3617
3960
|
--usk-native-panel-padding: var(--terminal-space-5);
|
|
3961
|
+
--usk-native-control-min-block-size: 2.65rem;
|
|
3962
|
+
--usk-native-control-padding-block: .74rem;
|
|
3963
|
+
--usk-native-control-padding-inline: 1rem;
|
|
3964
|
+
--usk-native-subcontrol-padding-block: .58rem;
|
|
3965
|
+
--usk-native-subcontrol-padding-inline: .8rem;
|
|
3966
|
+
--usk-native-choice-size: 1.3rem;
|
|
3967
|
+
--usk-native-choice-background: var(--terminal-control-bg);
|
|
3968
|
+
--usk-native-choice-border: 1px solid var(--terminal-border);
|
|
3969
|
+
--usk-native-checkbox-radius: 0;
|
|
3970
|
+
--usk-native-radio-radius: 0;
|
|
3971
|
+
--usk-native-choice-shadow: 0 0 9px var(--terminal-primary);
|
|
3972
|
+
--usk-native-choice-checked-background: var(--terminal-primary);
|
|
3973
|
+
--usk-native-choice-mark-color: var(--terminal-on-primary);
|
|
3974
|
+
--usk-native-select-indicator-image: linear-gradient(78deg, transparent 50%, var(--terminal-primary) 50%), linear-gradient(102deg, var(--terminal-primary) 50%, transparent 50%);
|
|
3975
|
+
--usk-native-select-indicator-size: .42rem .42rem, .42rem .42rem;
|
|
3976
|
+
--usk-native-select-indicator-position: calc(100% - 1.08rem) 50%, calc(100% - .78rem) 50%;
|
|
3977
|
+
--usk-native-select-padding-inline-end: 2.4rem;
|
|
3978
|
+
--usk-native-range-track-size: .5rem;
|
|
3979
|
+
--usk-native-range-track-background: var(--terminal-surface-soft);
|
|
3980
|
+
--usk-native-range-track-border: 1px solid var(--terminal-border);
|
|
3981
|
+
--usk-native-range-track-radius: 0;
|
|
3982
|
+
--usk-native-range-track-shadow: 0 0 9px var(--terminal-primary);
|
|
3983
|
+
--usk-native-range-progress-background: var(--terminal-primary);
|
|
3984
|
+
--usk-native-range-thumb-size: 1.1rem;
|
|
3985
|
+
--usk-native-range-thumb-background: var(--terminal-surface-strong);
|
|
3986
|
+
--usk-native-range-thumb-border: 1px solid var(--terminal-border);
|
|
3987
|
+
--usk-native-range-thumb-radius: 0;
|
|
3988
|
+
--usk-native-range-thumb-shadow: 0 0 9px var(--terminal-primary);
|
|
3989
|
+
--usk-native-progress-size: .62rem;
|
|
3990
|
+
--usk-native-progress-track-background: var(--terminal-surface-soft);
|
|
3991
|
+
--usk-native-progress-track-border: 1px solid var(--terminal-border);
|
|
3992
|
+
--usk-native-progress-track-radius: 0;
|
|
3993
|
+
--usk-native-progress-track-shadow: 0 0 9px var(--terminal-primary);
|
|
3994
|
+
--usk-native-progress-value-background: var(--terminal-primary);
|
|
3995
|
+
--usk-native-progress-value-radius: 0;
|
|
3996
|
+
--usk-native-progress-value-shadow: 0 0 9px var(--terminal-primary);
|
|
3997
|
+
--usk-native-meter-optimum-background: var(--terminal-success);
|
|
3998
|
+
--usk-native-meter-suboptimum-background: var(--terminal-warning);
|
|
3999
|
+
--usk-native-meter-critical-background: var(--terminal-danger);
|
|
4000
|
+
--usk-native-file-button-background: var(--terminal-primary);
|
|
4001
|
+
--usk-native-file-button-border: 1px solid var(--terminal-border);
|
|
4002
|
+
--usk-native-file-button-radius: 0;
|
|
4003
|
+
--usk-native-file-button-shadow: 0 0 9px var(--terminal-primary);
|
|
4004
|
+
--usk-native-color-swatch-border: 1px solid var(--terminal-border);
|
|
4005
|
+
--usk-native-color-swatch-radius: 0;
|
|
4006
|
+
--usk-native-indicator-opacity: .82;
|
|
4007
|
+
--usk-native-indicator-filter: none;
|
|
4008
|
+
--usk-native-scrollbar-size: .65rem;
|
|
4009
|
+
--usk-native-scrollbar-track: var(--terminal-surface-soft);
|
|
4010
|
+
--usk-native-scrollbar-thumb: var(--terminal-primary);
|
|
4011
|
+
--usk-native-scrollbar-radius: 0;
|
|
3618
4012
|
--terminal-bg: rgb(var(--terminal-bg-rgb));
|
|
3619
4013
|
--terminal-surface: rgb(var(--terminal-surface-rgb) / var(--terminal-panel-alpha));
|
|
3620
4014
|
--terminal-surface-strong: rgb(var(--terminal-surface-strong-rgb) / var(--terminal-panel-alpha));
|
|
@@ -3655,7 +4049,7 @@
|
|
|
3655
4049
|
}
|
|
3656
4050
|
|
|
3657
4051
|
@supports (color: color-mix(in srgb,black,white)) {
|
|
3658
|
-
[data-ui="data-terminal"][data-
|
|
4052
|
+
[data-ui="data-terminal"][data-mode] {
|
|
3659
4053
|
--terminal-border: color-mix(in srgb, rgb(var(--terminal-border-rgb) / max(var(--terminal-border-alpha), var(--usk-border-min-alpha))), var(--terminal-text) var(--usk-border-text-mix));
|
|
3660
4054
|
}
|
|
3661
4055
|
}
|
|
@@ -3674,7 +4068,7 @@
|
|
|
3674
4068
|
box-sizing: border-box;
|
|
3675
4069
|
}
|
|
3676
4070
|
|
|
3677
|
-
[data-ui="data-terminal"][data-
|
|
4071
|
+
[data-ui="data-terminal"][data-mode] {
|
|
3678
4072
|
background: var(--terminal-theme-bg);
|
|
3679
4073
|
background-size: var(--terminal-theme-bg-size);
|
|
3680
4074
|
}
|
|
@@ -3801,34 +4195,16 @@
|
|
|
3801
4195
|
box-shadow: inset 0 3px 10px #0000002e;
|
|
3802
4196
|
}
|
|
3803
4197
|
|
|
3804
|
-
.terminal-button-primary, :where([data-ui="data-terminal"]) .ui-button:where([data-ui-variant="primary"]) {
|
|
3805
|
-
background: var(--terminal-primary);
|
|
3806
|
-
color: var(--terminal-on-primary);
|
|
3807
|
-
border-color: var(--terminal-primary);
|
|
3808
|
-
}
|
|
3809
|
-
|
|
3810
4198
|
.terminal-button-primary:hover, :where([data-ui="data-terminal"]) .ui-button:where([data-ui-variant="primary"]):hover {
|
|
3811
4199
|
background: var(--terminal-primary-hover);
|
|
3812
4200
|
border-color: var(--terminal-primary-hover);
|
|
3813
4201
|
}
|
|
3814
4202
|
|
|
3815
|
-
.terminal-button-secondary, :where([data-ui="data-terminal"]) .ui-button:where([data-ui-variant="secondary"]) {
|
|
3816
|
-
background: var(--terminal-secondary);
|
|
3817
|
-
color: var(--terminal-on-secondary);
|
|
3818
|
-
border-color: var(--terminal-secondary);
|
|
3819
|
-
}
|
|
3820
|
-
|
|
3821
4203
|
.terminal-button-secondary:hover, :where([data-ui="data-terminal"]) .ui-button:where([data-ui-variant="secondary"]):hover {
|
|
3822
4204
|
background: var(--terminal-secondary-hover);
|
|
3823
4205
|
border-color: var(--terminal-secondary-hover);
|
|
3824
4206
|
}
|
|
3825
4207
|
|
|
3826
|
-
.terminal-button-danger, :where([data-ui="data-terminal"]) .ui-button:where([data-ui-variant="danger"]) {
|
|
3827
|
-
background: var(--terminal-danger);
|
|
3828
|
-
color: var(--terminal-on-danger);
|
|
3829
|
-
border-color: var(--terminal-danger);
|
|
3830
|
-
}
|
|
3831
|
-
|
|
3832
4208
|
.terminal-button-ghost, :where([data-ui="data-terminal"]) .ui-button:where([data-ui-variant="ghost"]) {
|
|
3833
4209
|
color: var(--terminal-text);
|
|
3834
4210
|
box-shadow: none;
|
|
@@ -3851,7 +4227,7 @@
|
|
|
3851
4227
|
background: var(--terminal-card-bg);
|
|
3852
4228
|
}
|
|
3853
4229
|
|
|
3854
|
-
.terminal-toolbar, .terminal-table-wrap, .terminal-button:not(.terminal-button-primary):not(.terminal-button-secondary):not(.terminal-button-danger):not(.terminal-button-ghost), .terminal-icon-button, :where([data-ui="data-terminal"]) .ui-toolbar, :where([data-ui="data-terminal"]) .ui-table-wrap, :where([data-ui="data-terminal"]) .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="data-terminal"]) .ui-icon-button {
|
|
4230
|
+
.terminal-toolbar, .terminal-table-wrap, .terminal-button:not(.terminal-button-primary):not(.terminal-button-secondary):not(.terminal-button-danger):not(.terminal-button-warning):not(.terminal-button-ghost):not(.is-active):not([aria-pressed="true"]), .terminal-icon-button:not(.is-active):not([aria-pressed="true"]), :where([data-ui="data-terminal"]) .ui-toolbar, :where([data-ui="data-terminal"]) .ui-table-wrap, :where([data-ui="data-terminal"]) .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(.is-active):not([aria-pressed="true"]), :where([data-ui="data-terminal"]) .ui-icon-button:not(.is-active):not([aria-pressed="true"]) {
|
|
3855
4231
|
background: var(--terminal-control-bg);
|
|
3856
4232
|
}
|
|
3857
4233
|
|
|
@@ -3941,12 +4317,6 @@
|
|
|
3941
4317
|
border-radius: 50%;
|
|
3942
4318
|
}
|
|
3943
4319
|
|
|
3944
|
-
.terminal-check input:checked + .terminal-check-control, .terminal-radio input:checked + .terminal-radio-control, :where([data-ui="data-terminal"]) .ui-check input:checked+.ui-check-control, :where([data-ui="data-terminal"]) .ui-radio input:checked+.ui-radio-control {
|
|
3945
|
-
background: var(--terminal-primary);
|
|
3946
|
-
border-color: var(--terminal-primary);
|
|
3947
|
-
box-shadow: var(--terminal-focus-ring);
|
|
3948
|
-
}
|
|
3949
|
-
|
|
3950
4320
|
.terminal-check input:checked + .terminal-check-control:after, :where([data-ui="data-terminal"]) .ui-check input:checked+.ui-check-control:after {
|
|
3951
4321
|
content: "✓";
|
|
3952
4322
|
color: var(--terminal-on-primary);
|
|
@@ -4079,16 +4449,6 @@
|
|
|
4079
4449
|
display: inline-flex;
|
|
4080
4450
|
}
|
|
4081
4451
|
|
|
4082
|
-
.terminal-nav-link:hover, :where([data-ui="data-terminal"]) .ui-nav-link:hover {
|
|
4083
|
-
color: var(--terminal-text);
|
|
4084
|
-
background: var(--terminal-surface-soft);
|
|
4085
|
-
}
|
|
4086
|
-
|
|
4087
|
-
.terminal-nav-link[aria-current="page"], .terminal-nav-link.is-active, :where([data-ui="data-terminal"]) .ui-nav-link[aria-current="page"], :where([data-ui="data-terminal"]) .ui-nav-link.is-active {
|
|
4088
|
-
color: var(--terminal-on-primary);
|
|
4089
|
-
background: var(--terminal-primary);
|
|
4090
|
-
}
|
|
4091
|
-
|
|
4092
4452
|
.terminal-tooltip, [data-ui="data-terminal"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
|
|
4093
4453
|
background: var(--terminal-text);
|
|
4094
4454
|
max-inline-size: 16rem;
|
|
@@ -4472,7 +4832,6 @@
|
|
|
4472
4832
|
border-radius: var(--terminal-radius-lg);
|
|
4473
4833
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
|
|
4474
4834
|
display: grid;
|
|
4475
|
-
overflow: hidden;
|
|
4476
4835
|
}
|
|
4477
4836
|
|
|
4478
4837
|
.terminal-feature-item {
|
|
@@ -4603,7 +4962,7 @@
|
|
|
4603
4962
|
font-size: .94rem;
|
|
4604
4963
|
}
|
|
4605
4964
|
|
|
4606
|
-
[data-ui="data-terminal"][data-
|
|
4965
|
+
[data-ui="data-terminal"][data-mode] {
|
|
4607
4966
|
--terminal-theme-bg: linear-gradient(rgb(var(--terminal-primary-rgb) / .035) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--terminal-border-rgb) / .07) 1px, transparent 1px), var(--terminal-bg);
|
|
4608
4967
|
--terminal-theme-bg-size: 4px 4px, 3rem 3rem, auto;
|
|
4609
4968
|
--terminal-card-bg: rgb(var(--terminal-surface-rgb) / calc(var(--terminal-panel-alpha) * .84));
|
|
@@ -4630,6 +4989,12 @@
|
|
|
4630
4989
|
line-height: 1.45;
|
|
4631
4990
|
}
|
|
4632
4991
|
|
|
4992
|
+
.terminal-copy a {
|
|
4993
|
+
align-items: center;
|
|
4994
|
+
min-block-size: 1.5rem;
|
|
4995
|
+
display: inline-flex;
|
|
4996
|
+
}
|
|
4997
|
+
|
|
4633
4998
|
.terminal-surface, .terminal-card, .terminal-panel, .terminal-toolbar, .terminal-table-wrap, :where([data-ui="data-terminal"]) .ui-card, :where([data-ui="data-terminal"]) .ui-toolbar, :where([data-ui="data-terminal"]) .ui-table-wrap {
|
|
4634
4999
|
box-shadow: none;
|
|
4635
5000
|
background: var(--terminal-card-bg);
|
|
@@ -4711,6 +5076,7 @@
|
|
|
4711
5076
|
clip-path: polygon(.5rem 0, 100% 0, 100% calc(100% - .5rem), calc(100% - .5rem) 100%, .5rem 100%, 0 calc(100% - .5rem), 0 .5rem);
|
|
4712
5077
|
justify-content: center;
|
|
4713
5078
|
justify-self: start;
|
|
5079
|
+
min-block-size: 2.75rem;
|
|
4714
5080
|
min-inline-size: 6rem;
|
|
4715
5081
|
max-inline-size: 100%;
|
|
4716
5082
|
}
|
|
@@ -4728,13 +5094,13 @@
|
|
|
4728
5094
|
border-radius: 0;
|
|
4729
5095
|
}
|
|
4730
5096
|
|
|
4731
|
-
[data-ui="data-terminal"][data-
|
|
5097
|
+
[data-ui="data-terminal"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
|
|
4732
5098
|
border: 1px solid var(--terminal-primary);
|
|
4733
5099
|
box-shadow: inset .2rem 0 0 rgb(var(--terminal-primary-rgb)/.22),0 0 .6rem rgb(var(--terminal-primary-rgb)/.24);
|
|
4734
5100
|
border-radius: 0;
|
|
4735
5101
|
}
|
|
4736
5102
|
|
|
4737
|
-
[data-ui="data-terminal"][data-
|
|
5103
|
+
[data-ui="data-terminal"][data-mode] :where(dialog) {
|
|
4738
5104
|
border: 1px solid var(--terminal-primary);
|
|
4739
5105
|
box-shadow: inset .28rem 0 0 rgb(var(--terminal-primary-rgb)/.24),0 0 .9rem rgb(var(--terminal-primary-rgb)/.24),0 1rem 2rem rgb(var(--terminal-text-rgb)/.22);
|
|
4740
5106
|
border-radius: 0;
|
|
@@ -4757,48 +5123,1060 @@
|
|
|
4757
5123
|
box-shadow: 0 0 .38em;
|
|
4758
5124
|
}
|
|
4759
5125
|
|
|
4760
|
-
|
|
4761
|
-
|
|
4762
|
-
|
|
4763
|
-
|
|
4764
|
-
|
|
4765
|
-
|
|
4766
|
-
|
|
5126
|
+
[data-ui="data-terminal"][data-mode] {
|
|
5127
|
+
--terminal-command-plane: repeating-linear-gradient(0deg, rgb(var(--terminal-primary-rgb) / .1) 0 1px, transparent 1px 4px),
|
|
5128
|
+
linear-gradient(145deg, rgb(var(--terminal-primary-rgb) / .22), rgb(var(--terminal-surface-rgb) / .94) 52%, rgb(var(--terminal-secondary-rgb) / .16));
|
|
5129
|
+
--terminal-card-bg: var(--terminal-command-plane);
|
|
5130
|
+
--usk-native-card-bg: var(--terminal-command-plane);
|
|
5131
|
+
--usk-native-font-control: ui-monospace, Consolas, "Liberation Mono", monospace;
|
|
5132
|
+
--usk-native-control-min-block-size: 2.2rem;
|
|
5133
|
+
--usk-native-control-padding-block: .31rem;
|
|
5134
|
+
--usk-native-control-padding-inline: .62rem;
|
|
5135
|
+
--usk-native-border-width: 1px;
|
|
5136
|
+
--usk-native-radius-sm: 0;
|
|
5137
|
+
--usk-native-radius: 0;
|
|
5138
|
+
--usk-native-radius-lg: 0;
|
|
5139
|
+
--usk-native-shadow: none;
|
|
5140
|
+
--usk-native-shadow-md: none;
|
|
5141
|
+
--usk-native-focus-ring: 0 0 0 1px var(--terminal-focus);
|
|
5142
|
+
--usk-native-subcontrol-padding-block: .28rem;
|
|
5143
|
+
--usk-native-subcontrol-padding-inline: .48rem;
|
|
5144
|
+
--usk-native-choice-size: 1rem;
|
|
5145
|
+
--usk-native-choice-background: var(--terminal-control-bg);
|
|
5146
|
+
--usk-native-choice-border: 1px solid var(--terminal-text-muted);
|
|
5147
|
+
--usk-native-checkbox-radius: 0;
|
|
5148
|
+
--usk-native-radio-radius: 0;
|
|
5149
|
+
--usk-native-choice-shadow: inset 0 0 0 1px var(--terminal-surface);
|
|
5150
|
+
--usk-native-choice-checked-background: linear-gradient(var(--terminal-primary), var(--terminal-primary));
|
|
5151
|
+
--usk-native-choice-mark-color: var(--terminal-on-primary);
|
|
5152
|
+
--usk-native-select-indicator-image: linear-gradient(90deg, transparent 38%, var(--terminal-primary) 38% 62%, transparent 62%);
|
|
5153
|
+
--usk-native-select-indicator-size: .72rem .5rem;
|
|
5154
|
+
--usk-native-select-indicator-position: calc(100% - .66rem) 50%;
|
|
5155
|
+
--usk-native-select-padding-inline-end: 1.65rem;
|
|
5156
|
+
--usk-native-range-track-size: .32rem;
|
|
5157
|
+
--usk-native-range-track-background: repeating-linear-gradient(90deg, var(--terminal-primary) 0 1px, transparent 1px .5rem), var(--terminal-surface-soft);
|
|
5158
|
+
--usk-native-range-track-border: 1px solid var(--terminal-text-muted);
|
|
5159
|
+
--usk-native-range-track-radius: 0;
|
|
5160
|
+
--usk-native-range-track-shadow: none;
|
|
5161
|
+
--usk-native-range-progress-background: linear-gradient(90deg, var(--terminal-success), var(--terminal-warning), var(--terminal-danger));
|
|
5162
|
+
--usk-native-range-thumb-size: .9rem;
|
|
5163
|
+
--usk-native-range-thumb-background: var(--terminal-text);
|
|
5164
|
+
--usk-native-range-thumb-border: 1px solid var(--terminal-surface);
|
|
5165
|
+
--usk-native-range-thumb-radius: 0;
|
|
5166
|
+
--usk-native-range-thumb-shadow: 0 0 0 1px var(--terminal-primary);
|
|
5167
|
+
--usk-native-progress-size: .58rem;
|
|
5168
|
+
--usk-native-progress-track-background: repeating-linear-gradient(90deg, var(--terminal-surface-soft) 0 .48rem, var(--terminal-border) .48rem .54rem);
|
|
5169
|
+
--usk-native-progress-track-border: 1px solid var(--terminal-text-muted);
|
|
5170
|
+
--usk-native-progress-track-radius: 0;
|
|
5171
|
+
--usk-native-progress-track-shadow: none;
|
|
5172
|
+
--usk-native-progress-value-background: repeating-linear-gradient(90deg, var(--terminal-primary) 0 .48rem, transparent .48rem .54rem);
|
|
5173
|
+
--usk-native-progress-value-radius: 0;
|
|
5174
|
+
--usk-native-progress-value-shadow: none;
|
|
5175
|
+
--usk-native-scrollbar-size: .6rem;
|
|
5176
|
+
--usk-native-scrollbar-track: var(--terminal-surface);
|
|
5177
|
+
--usk-native-scrollbar-thumb: linear-gradient(var(--terminal-primary), var(--terminal-primary));
|
|
5178
|
+
--usk-native-scrollbar-radius: 0;
|
|
4767
5179
|
}
|
|
4768
5180
|
|
|
4769
|
-
|
|
4770
|
-
|
|
4771
|
-
|
|
4772
|
-
|
|
4773
|
-
}
|
|
5181
|
+
.terminal-title {
|
|
5182
|
+
letter-spacing: max(.05em, .5px);
|
|
5183
|
+
margin-block: .75rem;
|
|
5184
|
+
font-weight: 700;
|
|
4774
5185
|
}
|
|
4775
5186
|
|
|
4776
|
-
|
|
4777
|
-
|
|
4778
|
-
|
|
4779
|
-
|
|
4780
|
-
}
|
|
4781
|
-
}
|
|
5187
|
+
.terminal-label, :where([data-ui="data-terminal"]) .ui-label {
|
|
5188
|
+
font-size: .7rem;
|
|
5189
|
+
font-weight: 700;
|
|
5190
|
+
}
|
|
4782
5191
|
|
|
4783
|
-
|
|
4784
|
-
|
|
4785
|
-
|
|
5192
|
+
.terminal-card, .terminal-panel, :where([data-ui="data-terminal"]) .ui-card {
|
|
5193
|
+
background: var(--terminal-card-bg);
|
|
5194
|
+
border: 1px solid var(--terminal-border);
|
|
5195
|
+
box-shadow: none;
|
|
5196
|
+
border-radius: 0;
|
|
5197
|
+
padding: .78rem;
|
|
4786
5198
|
}
|
|
4787
5199
|
|
|
4788
|
-
|
|
4789
|
-
|
|
4790
|
-
|
|
4791
|
-
|
|
4792
|
-
|
|
5200
|
+
.terminal-well, .terminal-inset {
|
|
5201
|
+
background: var(--terminal-control-bg);
|
|
5202
|
+
border: 1px dashed var(--terminal-border);
|
|
5203
|
+
box-shadow: inset .2rem 0 0 rgb(var(--terminal-primary-rgb)/.22);
|
|
5204
|
+
border-radius: 0;
|
|
5205
|
+
padding: .58rem;
|
|
5206
|
+
}
|
|
4793
5207
|
|
|
4794
|
-
|
|
4795
|
-
|
|
4796
|
-
|
|
4797
|
-
|
|
5208
|
+
.terminal-button, .terminal-icon-button, :where([data-ui="data-terminal"]) .ui-button, :where([data-ui="data-terminal"]) .ui-icon-button {
|
|
5209
|
+
background: var(--terminal-control-bg);
|
|
5210
|
+
border: 1px solid var(--terminal-primary);
|
|
5211
|
+
min-height: 2.2rem;
|
|
5212
|
+
box-shadow: none;
|
|
5213
|
+
border-radius: 0;
|
|
5214
|
+
padding: .38rem .62rem;
|
|
5215
|
+
font-weight: 700;
|
|
5216
|
+
}
|
|
4798
5217
|
|
|
4799
|
-
|
|
4800
|
-
|
|
4801
|
-
|
|
4802
|
-
|
|
5218
|
+
.terminal-button:before, :where([data-ui="data-terminal"]) .ui-button:before {
|
|
5219
|
+
content: "[";
|
|
5220
|
+
margin-inline-end: .38em;
|
|
5221
|
+
}
|
|
5222
|
+
|
|
5223
|
+
.terminal-button:after, :where([data-ui="data-terminal"]) .ui-button:after {
|
|
5224
|
+
content: "]";
|
|
5225
|
+
margin-inline-start: .38em;
|
|
5226
|
+
}
|
|
5227
|
+
|
|
5228
|
+
.terminal-button:active, .terminal-button[aria-pressed="true"], .terminal-button.is-active, :where([data-ui="data-terminal"]) .ui-button:active, :where([data-ui="data-terminal"]) .ui-button[aria-pressed="true"], :where([data-ui="data-terminal"]) .ui-button.is-active {
|
|
5229
|
+
color: var(--terminal-on-primary);
|
|
5230
|
+
background: var(--terminal-primary);
|
|
5231
|
+
}
|
|
5232
|
+
|
|
5233
|
+
.terminal-button:disabled, .terminal-disabled, :where([data-ui="data-terminal"]) .ui-button:disabled {
|
|
5234
|
+
color: var(--terminal-text-muted);
|
|
5235
|
+
border-color: var(--terminal-text-muted);
|
|
5236
|
+
box-shadow: none;
|
|
5237
|
+
}
|
|
5238
|
+
|
|
5239
|
+
.terminal-input, .terminal-textarea, .terminal-select, :where([data-ui="data-terminal"]) .ui-input, :where([data-ui="data-terminal"]) .ui-textarea, :where([data-ui="data-terminal"]) .ui-select {
|
|
5240
|
+
background: var(--terminal-control-bg);
|
|
5241
|
+
border: 1px solid var(--terminal-text-muted);
|
|
5242
|
+
min-height: 2.1rem;
|
|
5243
|
+
box-shadow: inset .16rem 0 0 rgb(var(--terminal-primary-rgb)/.28);
|
|
5244
|
+
border-radius: 0;
|
|
5245
|
+
padding: .34rem .52rem;
|
|
5246
|
+
}
|
|
5247
|
+
|
|
5248
|
+
.terminal-nav, .terminal-toolbar, .terminal-feature-strip, :where([data-ui="data-terminal"]) .ui-nav, :where([data-ui="data-terminal"]) .ui-toolbar {
|
|
5249
|
+
border: 1px solid var(--terminal-border);
|
|
5250
|
+
box-shadow: none;
|
|
5251
|
+
border-radius: 0;
|
|
5252
|
+
gap: 1px;
|
|
5253
|
+
padding: 1px;
|
|
5254
|
+
}
|
|
5255
|
+
|
|
5256
|
+
.terminal-nav-link, :where([data-ui="data-terminal"]) .ui-nav-link {
|
|
5257
|
+
border-radius: 0;
|
|
5258
|
+
min-height: 1.9rem;
|
|
5259
|
+
padding: .3rem .52rem;
|
|
5260
|
+
}
|
|
5261
|
+
|
|
5262
|
+
.terminal-badge, :where([data-ui="data-terminal"]) .ui-badge {
|
|
5263
|
+
min-height: 1.3rem;
|
|
5264
|
+
font-family: var(--terminal-font-mono);
|
|
5265
|
+
border: 1px solid;
|
|
5266
|
+
border-radius: 0;
|
|
5267
|
+
padding: .18rem .38rem;
|
|
5268
|
+
}
|
|
5269
|
+
|
|
5270
|
+
.terminal-alert, :where([data-ui="data-terminal"]) .ui-alert {
|
|
5271
|
+
background: var(--terminal-control-bg);
|
|
5272
|
+
box-shadow: none;
|
|
5273
|
+
border: 1px solid;
|
|
5274
|
+
border-radius: 0;
|
|
5275
|
+
padding: .52rem .62rem;
|
|
5276
|
+
}
|
|
5277
|
+
|
|
5278
|
+
.terminal-progress, :where([data-ui="data-terminal"]) .ui-progress {
|
|
5279
|
+
background: repeating-linear-gradient(90deg,var(--terminal-surface-soft)0 .48rem,var(--terminal-border) .48rem .54rem);
|
|
5280
|
+
border-radius: 0;
|
|
5281
|
+
height: .58rem;
|
|
5282
|
+
}
|
|
5283
|
+
|
|
5284
|
+
.terminal-table-wrap, :where([data-ui="data-terminal"]) .ui-table-wrap {
|
|
5285
|
+
background: var(--terminal-surface);
|
|
5286
|
+
border: 1px solid var(--terminal-border);
|
|
5287
|
+
box-shadow: none;
|
|
5288
|
+
border-radius: 0;
|
|
5289
|
+
}
|
|
5290
|
+
|
|
5291
|
+
.terminal-table, :where([data-ui="data-terminal"]) .ui-table {
|
|
5292
|
+
border-collapse: collapse;
|
|
5293
|
+
font-variant-numeric: tabular-nums;
|
|
4803
5294
|
}
|
|
5295
|
+
|
|
5296
|
+
.terminal-table th, :where([data-ui="data-terminal"]) .ui-table th {
|
|
5297
|
+
background: var(--terminal-control-bg);
|
|
5298
|
+
border: 1px solid var(--terminal-border);
|
|
5299
|
+
padding: .38rem .46rem;
|
|
5300
|
+
font-weight: 700;
|
|
5301
|
+
}
|
|
5302
|
+
|
|
5303
|
+
.terminal-table td, :where([data-ui="data-terminal"]) .ui-table td {
|
|
5304
|
+
border: 1px solid var(--terminal-border);
|
|
5305
|
+
padding: .34rem .46rem;
|
|
5306
|
+
}
|
|
5307
|
+
|
|
5308
|
+
.terminal-tooltip, [data-ui="data-terminal"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
|
|
5309
|
+
border: 1px dashed var(--terminal-warning);
|
|
5310
|
+
box-shadow: none;
|
|
5311
|
+
border-radius: 0;
|
|
5312
|
+
}
|
|
5313
|
+
|
|
5314
|
+
.terminal-card-service, .terminal-card-feature, .terminal-media-scrim, .terminal-callout-bar {
|
|
5315
|
+
box-shadow: none;
|
|
5316
|
+
border-radius: 0;
|
|
5317
|
+
}
|
|
5318
|
+
|
|
5319
|
+
@supports (color: color-mix(in srgb,black,white)) {
|
|
5320
|
+
[data-ui="data-terminal"][data-mode] {
|
|
5321
|
+
--usk-native-card-bg: var(--terminal-card-bg);
|
|
5322
|
+
--usk-native-control-bg: color-mix(in srgb, var(--terminal-surface-soft) 88%, var(--terminal-primary));
|
|
5323
|
+
}
|
|
5324
|
+
|
|
5325
|
+
.terminal-panel, .terminal-card-service, .terminal-feature-strip, .terminal-callout-bar {
|
|
5326
|
+
background: linear-gradient(90deg,var(--terminal-primary)0 28%,var(--terminal-warning) 28% 38%,transparent 38%) top/100% 2px no-repeat,var(--terminal-card-bg);
|
|
5327
|
+
}
|
|
5328
|
+
}
|
|
5329
|
+
|
|
5330
|
+
.terminal-input, :where([data-ui="data-terminal"]) .ui-input {
|
|
5331
|
+
border-radius: .01rem;
|
|
5332
|
+
}
|
|
5333
|
+
|
|
5334
|
+
.terminal-alert, :where([data-ui="data-terminal"]) .ui-alert {
|
|
5335
|
+
border-radius: .015rem;
|
|
5336
|
+
}
|
|
5337
|
+
|
|
5338
|
+
@media (prefers-reduced-motion: reduce) {
|
|
5339
|
+
[data-ui="data-terminal"] *, [data-ui="data-terminal"] :before, [data-ui="data-terminal"] :after {
|
|
5340
|
+
scroll-behavior: auto !important;
|
|
5341
|
+
transition-duration: 1ms !important;
|
|
5342
|
+
animation-duration: 1ms !important;
|
|
5343
|
+
animation-iteration-count: 1 !important;
|
|
5344
|
+
}
|
|
5345
|
+
}
|
|
5346
|
+
|
|
5347
|
+
@media (prefers-contrast: more) {
|
|
5348
|
+
[data-ui="data-terminal"] {
|
|
5349
|
+
--terminal-border-alpha: 1;
|
|
5350
|
+
--terminal-focus-alpha: .75;
|
|
5351
|
+
}
|
|
5352
|
+
}
|
|
5353
|
+
|
|
5354
|
+
@media (forced-colors: active) {
|
|
5355
|
+
@supports (forced-color-adjust: auto) {
|
|
5356
|
+
[data-ui="data-terminal"] * {
|
|
5357
|
+
forced-color-adjust: auto;
|
|
5358
|
+
}
|
|
5359
|
+
}
|
|
5360
|
+
|
|
5361
|
+
[data-ui="data-terminal"] :where(:focus-visible) {
|
|
5362
|
+
outline: 3px solid canvastext;
|
|
5363
|
+
}
|
|
5364
|
+
}
|
|
5365
|
+
|
|
5366
|
+
@media print {
|
|
5367
|
+
[data-ui="data-terminal"] {
|
|
5368
|
+
color: #000 !important;
|
|
5369
|
+
background: #fff !important;
|
|
5370
|
+
}
|
|
5371
|
+
|
|
5372
|
+
[data-ui="data-terminal"] * {
|
|
5373
|
+
box-shadow: none !important;
|
|
5374
|
+
text-shadow: none !important;
|
|
5375
|
+
}
|
|
5376
|
+
|
|
5377
|
+
[data-ui="data-terminal"] a {
|
|
5378
|
+
text-decoration: underline;
|
|
5379
|
+
color: #000 !important;
|
|
5380
|
+
}
|
|
5381
|
+
}
|
|
5382
|
+
|
|
5383
|
+
.terminal-input[aria-invalid="true"], .terminal-textarea[aria-invalid="true"], .terminal-select[aria-invalid="true"], :where([data-ui="data-terminal"]) .ui-input[aria-invalid="true"], :where([data-ui="data-terminal"]) .ui-textarea[aria-invalid="true"], :where([data-ui="data-terminal"]) .ui-select[aria-invalid="true"] {
|
|
5384
|
+
border-color: var(--terminal-danger);
|
|
5385
|
+
box-shadow: 0 0 0 2px rgb(var(--terminal-danger-rgb)/.2);
|
|
5386
|
+
}
|
|
5387
|
+
|
|
5388
|
+
.terminal-input[readonly], .terminal-textarea[readonly], :where([data-ui="data-terminal"]) .ui-input[readonly], :where([data-ui="data-terminal"]) .ui-textarea[readonly] {
|
|
5389
|
+
filter: saturate(.72);
|
|
5390
|
+
opacity: .78;
|
|
5391
|
+
border-style: dashed;
|
|
5392
|
+
}
|
|
5393
|
+
|
|
5394
|
+
.terminal-button-primary, :where([data-ui="data-terminal"]) .ui-button:where([data-ui-variant="primary"]) {
|
|
5395
|
+
background: var(--terminal-primary);
|
|
5396
|
+
color: var(--terminal-on-primary);
|
|
5397
|
+
border-color: var(--terminal-primary);
|
|
5398
|
+
}
|
|
5399
|
+
|
|
5400
|
+
.terminal-button-secondary, :where([data-ui="data-terminal"]) .ui-button:where([data-ui-variant="secondary"]) {
|
|
5401
|
+
background: var(--terminal-secondary);
|
|
5402
|
+
color: var(--terminal-on-secondary);
|
|
5403
|
+
border-color: var(--terminal-secondary);
|
|
5404
|
+
}
|
|
5405
|
+
|
|
5406
|
+
.terminal-button-danger, :where([data-ui="data-terminal"]) .ui-button:where([data-ui-variant="danger"]) {
|
|
5407
|
+
background: var(--terminal-danger);
|
|
5408
|
+
color: var(--terminal-on-danger);
|
|
5409
|
+
border-color: var(--terminal-danger);
|
|
5410
|
+
}
|
|
5411
|
+
|
|
5412
|
+
.terminal-button-ghost, :where([data-ui="data-terminal"]) .ui-button:where([data-ui-variant="ghost"]) {
|
|
5413
|
+
color: var(--terminal-primary);
|
|
5414
|
+
background: none;
|
|
5415
|
+
border-color: #0000;
|
|
5416
|
+
}
|
|
5417
|
+
|
|
5418
|
+
.terminal-feature-item > .terminal-icon-medallion {
|
|
5419
|
+
font-size: 1.5rem;
|
|
5420
|
+
line-height: 1;
|
|
5421
|
+
}
|
|
5422
|
+
|
|
5423
|
+
.terminal-callout-bar > .terminal-icon-medallion {
|
|
5424
|
+
min-block-size: 4.5rem;
|
|
5425
|
+
min-inline-size: 4.5rem;
|
|
5426
|
+
font-size: 2rem;
|
|
5427
|
+
font-weight: 800;
|
|
5428
|
+
line-height: 1;
|
|
5429
|
+
}
|
|
5430
|
+
|
|
5431
|
+
[data-ui="data-terminal"]:not([data-theme])[data-mode="light"] {
|
|
5432
|
+
--terminal-text-rgb: 20 22 21;
|
|
5433
|
+
--terminal-text-muted-rgb: 84 87 84;
|
|
5434
|
+
--terminal-border-rgb: 137 140 136;
|
|
5435
|
+
--terminal-primary-rgb: 22 82 190;
|
|
5436
|
+
--terminal-primary-hover-rgb: 15 66 158;
|
|
5437
|
+
--terminal-primary-text-rgb: 255 255 255;
|
|
5438
|
+
--terminal-secondary-rgb: 24 111 138;
|
|
5439
|
+
--terminal-secondary-hover-rgb: 16 86 108;
|
|
5440
|
+
--terminal-secondary-text-rgb: 255 255 255;
|
|
5441
|
+
--terminal-accent-rgb: 190 111 0;
|
|
5442
|
+
--terminal-accent-text-rgb: 20 22 21;
|
|
5443
|
+
--terminal-success-rgb: 36 132 55;
|
|
5444
|
+
--terminal-success-text-rgb: 255 255 255;
|
|
5445
|
+
--terminal-warning-rgb: 190 111 0;
|
|
5446
|
+
--terminal-warning-text-rgb: 20 22 21;
|
|
5447
|
+
--terminal-danger-rgb: 211 43 50;
|
|
5448
|
+
--terminal-danger-text-rgb: 255 255 255;
|
|
5449
|
+
--terminal-link-rgb: 22 82 190;
|
|
5450
|
+
--terminal-focus-rgb: 22 82 190;
|
|
5451
|
+
}
|
|
5452
|
+
|
|
5453
|
+
[data-ui="data-terminal"]:not([data-theme])[data-mode="dark"] {
|
|
5454
|
+
--terminal-text-rgb: 236 237 232;
|
|
5455
|
+
--terminal-text-muted-rgb: 164 166 160;
|
|
5456
|
+
--terminal-border-rgb: 163 116 0;
|
|
5457
|
+
--terminal-primary-rgb: 52 125 255;
|
|
5458
|
+
--terminal-primary-hover-rgb: 100 156 255;
|
|
5459
|
+
--terminal-primary-text-rgb: 0 0 0;
|
|
5460
|
+
--terminal-secondary-rgb: 52 171 213;
|
|
5461
|
+
--terminal-secondary-hover-rgb: 93 199 235;
|
|
5462
|
+
--terminal-secondary-text-rgb: 0 0 0;
|
|
5463
|
+
--terminal-accent-rgb: 255 176 0;
|
|
5464
|
+
--terminal-accent-text-rgb: 0 0 0;
|
|
5465
|
+
--terminal-success-rgb: 74 205 84;
|
|
5466
|
+
--terminal-success-text-rgb: 0 0 0;
|
|
5467
|
+
--terminal-warning-rgb: 255 176 0;
|
|
5468
|
+
--terminal-warning-text-rgb: 0 0 0;
|
|
5469
|
+
--terminal-danger-rgb: 255 71 78;
|
|
5470
|
+
--terminal-danger-text-rgb: 0 0 0;
|
|
5471
|
+
--terminal-link-rgb: 82 151 255;
|
|
5472
|
+
--terminal-focus-rgb: 82 151 255;
|
|
5473
|
+
}
|
|
5474
|
+
|
|
5475
|
+
[data-ui="data-terminal"]:not([data-theme])[data-mode="contrast"] {
|
|
5476
|
+
--terminal-text-rgb: 255 255 255;
|
|
5477
|
+
--terminal-text-muted-rgb: 224 224 224;
|
|
5478
|
+
--terminal-border-rgb: 255 212 0;
|
|
5479
|
+
--terminal-primary-rgb: 92 153 255;
|
|
5480
|
+
--terminal-primary-hover-rgb: 132 179 255;
|
|
5481
|
+
--terminal-primary-text-rgb: 0 0 0;
|
|
5482
|
+
--terminal-secondary-rgb: 78 224 255;
|
|
5483
|
+
--terminal-secondary-hover-rgb: 130 235 255;
|
|
5484
|
+
--terminal-secondary-text-rgb: 0 0 0;
|
|
5485
|
+
--terminal-accent-rgb: 255 212 0;
|
|
5486
|
+
--terminal-accent-text-rgb: 0 0 0;
|
|
5487
|
+
--terminal-success-rgb: 92 255 105;
|
|
5488
|
+
--terminal-success-text-rgb: 0 0 0;
|
|
5489
|
+
--terminal-warning-rgb: 255 212 0;
|
|
5490
|
+
--terminal-warning-text-rgb: 0 0 0;
|
|
5491
|
+
--terminal-danger-rgb: 255 96 102;
|
|
5492
|
+
--terminal-danger-text-rgb: 0 0 0;
|
|
5493
|
+
--terminal-link-rgb: 126 176 255;
|
|
5494
|
+
--terminal-focus-rgb: 255 255 255;
|
|
5495
|
+
}
|
|
5496
|
+
|
|
5497
|
+
[data-ui="data-terminal"][data-mode="light"] {
|
|
5498
|
+
--terminal-document-bg-rgb: 250 250 246;
|
|
5499
|
+
--terminal-document-cell-rgb: 255 255 252;
|
|
5500
|
+
--terminal-document-cell-muted-rgb: 246 246 241;
|
|
5501
|
+
}
|
|
5502
|
+
|
|
5503
|
+
[data-ui="data-terminal"][data-mode="dark"] {
|
|
5504
|
+
--terminal-document-bg-rgb: 2 4 3;
|
|
5505
|
+
--terminal-document-cell-rgb: 0 0 0;
|
|
5506
|
+
--terminal-document-cell-muted-rgb: 8 10 9;
|
|
5507
|
+
}
|
|
5508
|
+
|
|
5509
|
+
[data-ui="data-terminal"][data-mode="contrast"] {
|
|
5510
|
+
--terminal-document-bg-rgb: 0 0 0;
|
|
5511
|
+
--terminal-document-cell-rgb: 0 0 0;
|
|
5512
|
+
--terminal-document-cell-muted-rgb: 0 0 0;
|
|
5513
|
+
}
|
|
5514
|
+
|
|
5515
|
+
[data-ui="data-terminal"]:not([data-theme])[data-mode] {
|
|
5516
|
+
--terminal-bg: rgb(var(--terminal-document-bg-rgb));
|
|
5517
|
+
--terminal-surface: rgb(var(--terminal-document-cell-rgb));
|
|
5518
|
+
--terminal-surface-strong: var(--terminal-surface);
|
|
5519
|
+
--terminal-surface-soft: rgb(var(--terminal-document-cell-muted-rgb));
|
|
5520
|
+
--terminal-border: rgb(var(--terminal-border-rgb));
|
|
5521
|
+
--terminal-theme-bg: var(--terminal-bg);
|
|
5522
|
+
--terminal-theme-bg-size: auto;
|
|
5523
|
+
--terminal-card-bg: var(--terminal-surface);
|
|
5524
|
+
--terminal-control-bg: var(--terminal-surface);
|
|
5525
|
+
--usk-native-surface: var(--terminal-surface);
|
|
5526
|
+
--usk-native-surface-strong: var(--terminal-surface);
|
|
5527
|
+
--usk-native-surface-soft: var(--terminal-surface-soft);
|
|
5528
|
+
--usk-native-card-bg: var(--terminal-surface);
|
|
5529
|
+
--usk-native-control-bg: var(--terminal-surface);
|
|
5530
|
+
--usk-native-control-min-block-size: 1.75rem;
|
|
5531
|
+
--usk-native-control-padding-block: .16rem;
|
|
5532
|
+
--usk-native-control-padding-inline: .45rem;
|
|
5533
|
+
--usk-native-subcontrol-padding-block: .2rem;
|
|
5534
|
+
--usk-native-subcontrol-padding-inline: .4rem;
|
|
5535
|
+
--usk-native-field-gap: .35rem;
|
|
5536
|
+
--usk-native-panel-padding: .5rem;
|
|
5537
|
+
--usk-native-choice-size: .875rem;
|
|
5538
|
+
--usk-native-shadow: none;
|
|
5539
|
+
--usk-native-shadow-md: none;
|
|
5540
|
+
--terminal-text: rgb(var(--terminal-text-rgb));
|
|
5541
|
+
--terminal-text-muted: rgb(var(--terminal-text-muted-rgb));
|
|
5542
|
+
--terminal-fg: var(--terminal-text);
|
|
5543
|
+
--terminal-surface-fg: var(--terminal-text);
|
|
5544
|
+
--terminal-muted: var(--terminal-text-muted);
|
|
5545
|
+
--terminal-control-fg: var(--terminal-text);
|
|
5546
|
+
--terminal-primary: rgb(var(--terminal-primary-rgb));
|
|
5547
|
+
--terminal-primary-hover: rgb(var(--terminal-primary-hover-rgb));
|
|
5548
|
+
--terminal-primary-text: rgb(var(--terminal-primary-text-rgb));
|
|
5549
|
+
--terminal-secondary: rgb(var(--terminal-secondary-rgb));
|
|
5550
|
+
--terminal-secondary-hover: rgb(var(--terminal-secondary-hover-rgb));
|
|
5551
|
+
--terminal-secondary-text: rgb(var(--terminal-secondary-text-rgb));
|
|
5552
|
+
--terminal-on-primary: var(--terminal-primary-text);
|
|
5553
|
+
--terminal-on-secondary: var(--terminal-secondary-text);
|
|
5554
|
+
--terminal-on-accent: rgb(var(--terminal-accent-text-rgb));
|
|
5555
|
+
--terminal-on-success: rgb(var(--terminal-success-text-rgb));
|
|
5556
|
+
--terminal-on-warning: rgb(var(--terminal-warning-text-rgb));
|
|
5557
|
+
--terminal-on-danger: rgb(var(--terminal-danger-text-rgb));
|
|
5558
|
+
--terminal-accent: rgb(var(--terminal-accent-rgb));
|
|
5559
|
+
--terminal-success: rgb(var(--terminal-success-rgb));
|
|
5560
|
+
--terminal-warning: rgb(var(--terminal-warning-rgb));
|
|
5561
|
+
--terminal-danger: rgb(var(--terminal-danger-rgb));
|
|
5562
|
+
--terminal-link: rgb(var(--terminal-link-rgb));
|
|
5563
|
+
--terminal-focus: rgb(var(--terminal-focus-rgb));
|
|
5564
|
+
--terminal-focus-ring: 0 0 0 2px var(--terminal-focus);
|
|
5565
|
+
--terminal-spinner-track: var(--terminal-border);
|
|
5566
|
+
--terminal-spinner-stroke: var(--terminal-primary);
|
|
5567
|
+
--terminal-spinner-accent: var(--terminal-accent);
|
|
5568
|
+
--usk-native-text: var(--terminal-text);
|
|
5569
|
+
--usk-native-text-muted: var(--terminal-text-muted);
|
|
5570
|
+
--usk-native-border: var(--terminal-border);
|
|
5571
|
+
--usk-native-primary: var(--terminal-primary);
|
|
5572
|
+
--usk-native-primary-hover: var(--terminal-primary-hover);
|
|
5573
|
+
--usk-native-on-primary: var(--terminal-on-primary);
|
|
5574
|
+
--usk-native-focus: var(--terminal-focus);
|
|
5575
|
+
--usk-native-success: var(--terminal-success);
|
|
5576
|
+
--usk-native-warning: var(--terminal-warning);
|
|
5577
|
+
--usk-native-danger: var(--terminal-danger);
|
|
5578
|
+
--usk-native-link: var(--terminal-link);
|
|
5579
|
+
--usk-native-font-body: var(--terminal-font-body);
|
|
5580
|
+
--usk-native-font-heading: var(--terminal-font-heading);
|
|
5581
|
+
--usk-native-font-control: var(--terminal-font-control);
|
|
5582
|
+
--usk-native-font-mono: var(--terminal-font-mono);
|
|
5583
|
+
}
|
|
5584
|
+
|
|
5585
|
+
[data-ui="data-terminal"] {
|
|
5586
|
+
--demo-component-heading-size: .75rem;
|
|
5587
|
+
background: var(--terminal-bg);
|
|
5588
|
+
font-family: Cascadia Mono, Consolas, Liberation Mono, ui-monospace, monospace;
|
|
5589
|
+
font-size: .8125rem;
|
|
5590
|
+
line-height: 1.35;
|
|
5591
|
+
}
|
|
5592
|
+
|
|
5593
|
+
.terminal-title {
|
|
5594
|
+
letter-spacing: .025em;
|
|
5595
|
+
margin-block: .5rem;
|
|
5596
|
+
font-size: clamp(1.25rem, 2vw, 1.5rem);
|
|
5597
|
+
line-height: 1.05;
|
|
5598
|
+
}
|
|
5599
|
+
|
|
5600
|
+
.terminal-heading {
|
|
5601
|
+
letter-spacing: .025em;
|
|
5602
|
+
font-size: .75rem;
|
|
5603
|
+
line-height: 1.2;
|
|
5604
|
+
}
|
|
5605
|
+
|
|
5606
|
+
.terminal-kicker, .terminal-eyebrow {
|
|
5607
|
+
letter-spacing: .035em;
|
|
5608
|
+
text-shadow: none;
|
|
5609
|
+
font-size: .6875rem;
|
|
5610
|
+
line-height: 1.2;
|
|
5611
|
+
}
|
|
5612
|
+
|
|
5613
|
+
.terminal-surface, .terminal-card, .terminal-panel, .terminal-toolbar, .terminal-table-wrap, .terminal-well, .terminal-inset, .terminal-input, .terminal-textarea, .terminal-select, :where([data-ui="data-terminal"]) .ui-card, :where([data-ui="data-terminal"]) .ui-toolbar, :where([data-ui="data-terminal"]) .ui-table-wrap, :where([data-ui="data-terminal"]) .ui-input, :where([data-ui="data-terminal"]) .ui-textarea, :where([data-ui="data-terminal"]) .ui-select {
|
|
5614
|
+
background: var(--terminal-surface);
|
|
5615
|
+
box-shadow: none;
|
|
5616
|
+
border-radius: 0;
|
|
5617
|
+
}
|
|
5618
|
+
|
|
5619
|
+
.terminal-card, .terminal-panel, :where([data-ui="data-terminal"]) .ui-card {
|
|
5620
|
+
border: 1px solid var(--terminal-primary);
|
|
5621
|
+
padding: .5rem;
|
|
5622
|
+
}
|
|
5623
|
+
|
|
5624
|
+
.terminal-button, .terminal-icon-button, :where([data-ui="data-terminal"]) .ui-button, :where([data-ui="data-terminal"]) .ui-icon-button {
|
|
5625
|
+
background: var(--terminal-surface);
|
|
5626
|
+
border: 1px solid var(--terminal-border);
|
|
5627
|
+
min-height: 1.875rem;
|
|
5628
|
+
box-shadow: none;
|
|
5629
|
+
letter-spacing: .025em;
|
|
5630
|
+
border-radius: 0;
|
|
5631
|
+
padding: .3rem .65rem;
|
|
5632
|
+
font-size: .75rem;
|
|
5633
|
+
font-weight: 500;
|
|
5634
|
+
line-height: 1;
|
|
5635
|
+
transform: none;
|
|
5636
|
+
}
|
|
5637
|
+
|
|
5638
|
+
.terminal-button:hover, .terminal-icon-button:hover, :where([data-ui="data-terminal"]) .ui-button:hover, :where([data-ui="data-terminal"]) .ui-icon-button:hover {
|
|
5639
|
+
color: var(--terminal-primary);
|
|
5640
|
+
background: var(--terminal-surface);
|
|
5641
|
+
border-color: var(--terminal-primary);
|
|
5642
|
+
box-shadow: none;
|
|
5643
|
+
transform: none;
|
|
5644
|
+
}
|
|
5645
|
+
|
|
5646
|
+
.terminal-button-primary, :where([data-ui="data-terminal"]) .ui-button:where([data-ui-variant="primary"]) {
|
|
5647
|
+
color: var(--terminal-on-primary);
|
|
5648
|
+
background: var(--terminal-primary);
|
|
5649
|
+
border-color: var(--terminal-primary);
|
|
5650
|
+
}
|
|
5651
|
+
|
|
5652
|
+
.terminal-button-primary:hover, :where([data-ui="data-terminal"]) .ui-button:where([data-ui-variant="primary"]):hover {
|
|
5653
|
+
color: var(--terminal-on-primary);
|
|
5654
|
+
background: var(--terminal-primary-hover);
|
|
5655
|
+
border-color: var(--terminal-primary-hover);
|
|
5656
|
+
}
|
|
5657
|
+
|
|
5658
|
+
.terminal-button-secondary, .terminal-button-secondary:hover, :where([data-ui="data-terminal"]) .ui-button:where([data-ui-variant="secondary"]), :where([data-ui="data-terminal"]) .ui-button:where([data-ui-variant="secondary"]):hover {
|
|
5659
|
+
color: var(--terminal-text);
|
|
5660
|
+
background: var(--terminal-surface);
|
|
5661
|
+
border-color: var(--terminal-border);
|
|
5662
|
+
}
|
|
5663
|
+
|
|
5664
|
+
.terminal-button-danger, .terminal-button-danger:hover, :where([data-ui="data-terminal"]) .ui-button:where([data-ui-variant="danger"]), :where([data-ui="data-terminal"]) .ui-button:where([data-ui-variant="danger"]):hover {
|
|
5665
|
+
color: var(--terminal-danger);
|
|
5666
|
+
background: var(--terminal-surface);
|
|
5667
|
+
border-color: var(--terminal-danger);
|
|
5668
|
+
}
|
|
5669
|
+
|
|
5670
|
+
.terminal-button-ghost, .terminal-button-ghost:hover, :where([data-ui="data-terminal"]) .ui-button:where([data-ui-variant="ghost"]), :where([data-ui="data-terminal"]) .ui-button:where([data-ui-variant="ghost"]):hover {
|
|
5671
|
+
color: var(--terminal-primary);
|
|
5672
|
+
background: none;
|
|
5673
|
+
border-color: #0000;
|
|
5674
|
+
}
|
|
5675
|
+
|
|
5676
|
+
.terminal-button:active, .terminal-button[aria-pressed="true"], .terminal-button.is-active, :where([data-ui="data-terminal"]) .ui-button:active, :where([data-ui="data-terminal"]) .ui-button[aria-pressed="true"], :where([data-ui="data-terminal"]) .ui-button.is-active {
|
|
5677
|
+
color: var(--terminal-on-primary);
|
|
5678
|
+
background: var(--terminal-primary);
|
|
5679
|
+
border-color: var(--terminal-primary);
|
|
5680
|
+
box-shadow: none;
|
|
5681
|
+
transform: none;
|
|
5682
|
+
}
|
|
5683
|
+
|
|
5684
|
+
.terminal-icon-button, :where([data-ui="data-terminal"]) .ui-icon-button {
|
|
5685
|
+
text-align: center;
|
|
5686
|
+
place-items: center;
|
|
5687
|
+
block-size: 1.875rem;
|
|
5688
|
+
inline-size: 1.875rem;
|
|
5689
|
+
padding: 0;
|
|
5690
|
+
font-size: .875rem;
|
|
5691
|
+
font-weight: 500;
|
|
5692
|
+
line-height: 1;
|
|
5693
|
+
display: inline-grid;
|
|
5694
|
+
}
|
|
5695
|
+
|
|
5696
|
+
.terminal-label, .terminal-help-text, :where([data-ui="data-terminal"]) .ui-label, :where([data-ui="data-terminal"]) .ui-help-text {
|
|
5697
|
+
font-size: .6875rem;
|
|
5698
|
+
font-weight: 500;
|
|
5699
|
+
line-height: 1.25;
|
|
5700
|
+
}
|
|
5701
|
+
|
|
5702
|
+
.terminal-field, :where([data-ui="data-terminal"]) .ui-field {
|
|
5703
|
+
gap: .3rem;
|
|
5704
|
+
}
|
|
5705
|
+
|
|
5706
|
+
.terminal-input, .terminal-select, :where([data-ui="data-terminal"]) .ui-input, :where([data-ui="data-terminal"]) .ui-select {
|
|
5707
|
+
border: 1px solid var(--terminal-border);
|
|
5708
|
+
min-height: 1.875rem;
|
|
5709
|
+
box-shadow: none;
|
|
5710
|
+
padding: .25rem .45rem;
|
|
5711
|
+
font-size: .75rem;
|
|
5712
|
+
}
|
|
5713
|
+
|
|
5714
|
+
.terminal-select, :where([data-ui="data-terminal"]) .ui-select {
|
|
5715
|
+
appearance: none;
|
|
5716
|
+
background-image: var(--usk-native-select-indicator-image);
|
|
5717
|
+
background-position: var(--usk-native-select-indicator-position);
|
|
5718
|
+
background-repeat: no-repeat;
|
|
5719
|
+
background-size: var(--usk-native-select-indicator-size);
|
|
5720
|
+
padding-inline-end: var(--usk-native-select-padding-inline-end);
|
|
5721
|
+
}
|
|
5722
|
+
|
|
5723
|
+
[data-ui="data-terminal"][data-mode] select:not([multiple]) {
|
|
5724
|
+
appearance: none;
|
|
5725
|
+
}
|
|
5726
|
+
|
|
5727
|
+
.terminal-textarea, :where([data-ui="data-terminal"]) .ui-textarea {
|
|
5728
|
+
border: 1px solid var(--terminal-border);
|
|
5729
|
+
min-height: 4.5rem;
|
|
5730
|
+
box-shadow: none;
|
|
5731
|
+
padding: .35rem .45rem;
|
|
5732
|
+
font-size: .75rem;
|
|
5733
|
+
line-height: 1.3;
|
|
5734
|
+
}
|
|
5735
|
+
|
|
5736
|
+
[data-ui="data-terminal"][data-mode] {
|
|
5737
|
+
--usk-native-select-indicator-image: linear-gradient(45deg, transparent 50%, var(--terminal-text) 50%),
|
|
5738
|
+
linear-gradient(135deg, var(--terminal-text) 50%, transparent 50%);
|
|
5739
|
+
--usk-native-select-indicator-size: .35rem .35rem, .35rem .35rem;
|
|
5740
|
+
--usk-native-select-indicator-position: calc(100% - .8rem) 50%, calc(100% - .55rem) 50%;
|
|
5741
|
+
--usk-native-select-padding-inline-end: 1.6rem;
|
|
5742
|
+
}
|
|
5743
|
+
|
|
5744
|
+
.terminal-check, .terminal-radio, .terminal-switch, :where([data-ui="data-terminal"]) .ui-check, :where([data-ui="data-terminal"]) .ui-radio, :where([data-ui="data-terminal"]) .ui-switch {
|
|
5745
|
+
gap: .4rem;
|
|
5746
|
+
font-size: .75rem;
|
|
5747
|
+
}
|
|
5748
|
+
|
|
5749
|
+
.terminal-check-control, .terminal-radio-control, :where([data-ui="data-terminal"]) .ui-check-control, :where([data-ui="data-terminal"]) .ui-radio-control {
|
|
5750
|
+
background: var(--terminal-surface);
|
|
5751
|
+
border: 1px solid var(--terminal-border);
|
|
5752
|
+
block-size: 1rem;
|
|
5753
|
+
inline-size: 1rem;
|
|
5754
|
+
box-shadow: none;
|
|
5755
|
+
border-radius: 0;
|
|
5756
|
+
flex: 0 0 1rem;
|
|
5757
|
+
place-items: center;
|
|
5758
|
+
display: inline-grid;
|
|
5759
|
+
position: relative;
|
|
5760
|
+
}
|
|
5761
|
+
|
|
5762
|
+
.terminal-check input:checked + .terminal-check-control, .terminal-radio input:checked + .terminal-radio-control, :where([data-ui="data-terminal"]) .ui-check input:checked+.ui-check-control, :where([data-ui="data-terminal"]) .ui-radio input:checked+.ui-radio-control {
|
|
5763
|
+
background: var(--terminal-surface);
|
|
5764
|
+
border-color: var(--terminal-primary);
|
|
5765
|
+
box-shadow: none;
|
|
5766
|
+
}
|
|
5767
|
+
|
|
5768
|
+
.terminal-check input:checked + .terminal-check-control:after, :where([data-ui="data-terminal"]) .ui-check input:checked+.ui-check-control:after {
|
|
5769
|
+
color: var(--terminal-primary);
|
|
5770
|
+
place-items: center;
|
|
5771
|
+
font-family: Segoe UI Symbol, sans-serif;
|
|
5772
|
+
font-size: .7rem;
|
|
5773
|
+
font-weight: 700;
|
|
5774
|
+
line-height: 1;
|
|
5775
|
+
display: grid;
|
|
5776
|
+
position: absolute;
|
|
5777
|
+
inset: 0;
|
|
5778
|
+
}
|
|
5779
|
+
|
|
5780
|
+
.terminal-radio input:checked + .terminal-radio-control:after, :where([data-ui="data-terminal"]) .ui-radio input:checked+.ui-radio-control:after {
|
|
5781
|
+
background: var(--terminal-primary);
|
|
5782
|
+
border-radius: 0;
|
|
5783
|
+
block-size: .38rem;
|
|
5784
|
+
inline-size: .38rem;
|
|
5785
|
+
}
|
|
5786
|
+
|
|
5787
|
+
.terminal-switch-track, :where([data-ui="data-terminal"]) .ui-switch-track {
|
|
5788
|
+
block-size: 1.25rem;
|
|
5789
|
+
inline-size: 3.75rem;
|
|
5790
|
+
color: var(--terminal-text);
|
|
5791
|
+
background: var(--terminal-surface);
|
|
5792
|
+
border: 1px solid var(--terminal-border);
|
|
5793
|
+
box-shadow: none;
|
|
5794
|
+
border-radius: 0;
|
|
5795
|
+
place-items: center;
|
|
5796
|
+
display: inline-grid;
|
|
5797
|
+
}
|
|
5798
|
+
|
|
5799
|
+
.terminal-switch-track:before, :where([data-ui="data-terminal"]) .ui-switch-track:before {
|
|
5800
|
+
content: "[ OFF ]";
|
|
5801
|
+
font-family: var(--terminal-font-mono);
|
|
5802
|
+
font-size: .625rem;
|
|
5803
|
+
line-height: 1;
|
|
5804
|
+
}
|
|
5805
|
+
|
|
5806
|
+
.terminal-switch-thumb, :where([data-ui="data-terminal"]) .ui-switch-thumb {
|
|
5807
|
+
border-radius: 0;
|
|
5808
|
+
display: none;
|
|
5809
|
+
}
|
|
5810
|
+
|
|
5811
|
+
.terminal-switch input:checked + .terminal-switch-track, :where([data-ui="data-terminal"]) .ui-switch input:checked+.ui-switch-track {
|
|
5812
|
+
color: var(--terminal-success);
|
|
5813
|
+
background: var(--terminal-surface);
|
|
5814
|
+
border-color: var(--terminal-success);
|
|
5815
|
+
}
|
|
5816
|
+
|
|
5817
|
+
.terminal-switch input:checked + .terminal-switch-track:before, :where([data-ui="data-terminal"]) .ui-switch input:checked+.ui-switch-track:before {
|
|
5818
|
+
content: "[ ON ]";
|
|
5819
|
+
}
|
|
5820
|
+
|
|
5821
|
+
.terminal-tooltip, [data-ui="data-terminal"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
|
|
5822
|
+
color: var(--terminal-warning);
|
|
5823
|
+
background: var(--terminal-surface);
|
|
5824
|
+
border: 1px dashed var(--terminal-warning);
|
|
5825
|
+
box-shadow: none;
|
|
5826
|
+
border-radius: 0;
|
|
5827
|
+
padding: .45rem .6rem;
|
|
5828
|
+
font-size: .75rem;
|
|
5829
|
+
font-weight: 400;
|
|
5830
|
+
line-height: 1.35;
|
|
5831
|
+
}
|
|
5832
|
+
|
|
5833
|
+
.terminal-tooltip-arrow {
|
|
5834
|
+
background: var(--terminal-surface);
|
|
5835
|
+
border: 1px solid var(--terminal-warning);
|
|
5836
|
+
border-block-end: 0;
|
|
5837
|
+
border-inline-end: 0;
|
|
5838
|
+
border-radius: 0;
|
|
5839
|
+
align-self: center;
|
|
5840
|
+
transform: translateY(.17rem) rotate(45deg);
|
|
5841
|
+
}
|
|
5842
|
+
|
|
5843
|
+
.terminal-spinner, .terminal-loading-spinner, [data-ui="data-terminal"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
|
|
5844
|
+
--terminal-loader-cell: .48rem;
|
|
5845
|
+
--terminal-loader-gap: .14rem;
|
|
5846
|
+
inline-size: calc((var(--terminal-loader-cell)*5) + (var(--terminal-loader-gap)*4));
|
|
5847
|
+
block-size: var(--terminal-loader-cell);
|
|
5848
|
+
vertical-align: -.05em;
|
|
5849
|
+
background: repeating-linear-gradient(90deg,rgb(var(--terminal-primary-rgb)/.25)0 var(--terminal-loader-cell),transparent var(--terminal-loader-cell) calc(var(--terminal-loader-cell) + var(--terminal-loader-gap)));
|
|
5850
|
+
clip-path: none;
|
|
5851
|
+
box-shadow: none;
|
|
5852
|
+
border: 0;
|
|
5853
|
+
border-radius: 0;
|
|
5854
|
+
animation: none;
|
|
5855
|
+
display: inline-block;
|
|
5856
|
+
position: relative;
|
|
5857
|
+
overflow: hidden;
|
|
5858
|
+
}
|
|
5859
|
+
|
|
5860
|
+
.terminal-spinner:after, .terminal-loading-spinner:after, [data-ui="data-terminal"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]):after {
|
|
5861
|
+
content: "";
|
|
5862
|
+
inline-size: var(--terminal-loader-cell);
|
|
5863
|
+
background: var(--terminal-primary);
|
|
5864
|
+
animation: .8s steps(4, end) infinite terminal-signal-scan;
|
|
5865
|
+
position: absolute;
|
|
5866
|
+
inset-block: 0;
|
|
5867
|
+
inset-inline-start: 0;
|
|
5868
|
+
}
|
|
5869
|
+
|
|
5870
|
+
.terminal-spinner-sm {
|
|
5871
|
+
--terminal-loader-cell: .34rem;
|
|
5872
|
+
--terminal-loader-gap: .1rem;
|
|
5873
|
+
}
|
|
5874
|
+
|
|
5875
|
+
.terminal-spinner-lg {
|
|
5876
|
+
--terminal-loader-cell: .62rem;
|
|
5877
|
+
--terminal-loader-gap: .18rem;
|
|
5878
|
+
}
|
|
5879
|
+
|
|
5880
|
+
.terminal-button[aria-busy="true"]:after, .terminal-icon-button[aria-busy="true"]:after, [data-ui="data-terminal"] :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="data-terminal"]) .ui-button[aria-busy="true"]:after, :where([data-ui="data-terminal"]) .ui-icon-button[aria-busy="true"]:after {
|
|
5881
|
+
--terminal-loader-cell: .24rem;
|
|
5882
|
+
content: "]";
|
|
5883
|
+
box-sizing: border-box;
|
|
5884
|
+
text-align: end;
|
|
5885
|
+
block-size: 1em;
|
|
5886
|
+
inline-size: 2.25rem;
|
|
5887
|
+
box-shadow: none;
|
|
5888
|
+
clip-path: none;
|
|
5889
|
+
background-image: repeating-linear-gradient(90deg, currentColor 0 .22rem, #0000 .22rem .31rem), linear-gradient(90deg, #0000 0 36%, currentColor 36% 52%, #0000 52% 100%);
|
|
5890
|
+
background-position: 0, -100%;
|
|
5891
|
+
background-repeat: no-repeat;
|
|
5892
|
+
background-size: 1.5rem .38rem, 3rem .38rem;
|
|
5893
|
+
border: 0;
|
|
5894
|
+
border-radius: 0;
|
|
5895
|
+
flex: 0 0 2.25rem;
|
|
5896
|
+
padding-inline-start: 1.7rem;
|
|
5897
|
+
line-height: 1;
|
|
5898
|
+
animation: .8s steps(4, end) infinite terminal-signal-scan;
|
|
5899
|
+
display: inline-block;
|
|
5900
|
+
}
|
|
5901
|
+
|
|
5902
|
+
.terminal-card-service > .terminal-icon-medallion {
|
|
5903
|
+
font-size: 1.5rem;
|
|
5904
|
+
font-weight: 500;
|
|
5905
|
+
line-height: 1;
|
|
5906
|
+
}
|
|
5907
|
+
|
|
5908
|
+
.terminal-feature-item > .terminal-icon-medallion {
|
|
5909
|
+
text-align: center;
|
|
5910
|
+
place-items: center;
|
|
5911
|
+
block-size: 2rem;
|
|
5912
|
+
min-block-size: 2rem;
|
|
5913
|
+
inline-size: 2rem;
|
|
5914
|
+
min-inline-size: 2rem;
|
|
5915
|
+
padding: 0;
|
|
5916
|
+
font-size: 1rem;
|
|
5917
|
+
font-weight: 500;
|
|
5918
|
+
line-height: 1;
|
|
5919
|
+
display: inline-grid;
|
|
5920
|
+
}
|
|
5921
|
+
|
|
5922
|
+
.terminal-callout-bar > .terminal-icon-medallion {
|
|
5923
|
+
text-align: center;
|
|
5924
|
+
place-items: center;
|
|
5925
|
+
block-size: 2.25rem;
|
|
5926
|
+
min-block-size: 2.25rem;
|
|
5927
|
+
inline-size: 2.25rem;
|
|
5928
|
+
min-inline-size: 2.25rem;
|
|
5929
|
+
padding: 0;
|
|
5930
|
+
font-size: 1.5rem;
|
|
5931
|
+
font-weight: 500;
|
|
5932
|
+
line-height: 1;
|
|
5933
|
+
display: inline-grid;
|
|
5934
|
+
}
|
|
5935
|
+
|
|
5936
|
+
.terminal-feature-strip, .terminal-callout-bar {
|
|
5937
|
+
background: var(--terminal-surface);
|
|
5938
|
+
border: 1px solid var(--terminal-border);
|
|
5939
|
+
box-shadow: none;
|
|
5940
|
+
}
|
|
5941
|
+
|
|
5942
|
+
.terminal-button.terminal-button-outline-heavy, .terminal-button-outline-heavy, :where([data-ui="data-terminal"]) .ui-button.terminal-button-outline-heavy {
|
|
5943
|
+
background: var(--terminal-surface);
|
|
5944
|
+
clip-path: none;
|
|
5945
|
+
box-shadow: none;
|
|
5946
|
+
border-width: 1px;
|
|
5947
|
+
}
|
|
5948
|
+
|
|
5949
|
+
@keyframes terminal-signal-scan {
|
|
5950
|
+
from {
|
|
5951
|
+
background-position: 0, -100%;
|
|
5952
|
+
inset-inline-start: 0;
|
|
5953
|
+
}
|
|
5954
|
+
|
|
5955
|
+
to {
|
|
5956
|
+
background-position: 0, 100%;
|
|
5957
|
+
inset-inline-start: calc(100% - var(--terminal-loader-cell));
|
|
5958
|
+
}
|
|
5959
|
+
}
|
|
5960
|
+
|
|
5961
|
+
.terminal-badge, :where([data-ui="data-terminal"]) .ui-badge {
|
|
5962
|
+
min-height: 1.35rem;
|
|
5963
|
+
color: var(--terminal-text);
|
|
5964
|
+
background: var(--terminal-surface);
|
|
5965
|
+
border: 1px solid;
|
|
5966
|
+
border-radius: 0;
|
|
5967
|
+
padding: .18rem .45rem;
|
|
5968
|
+
font-size: .6875rem;
|
|
5969
|
+
font-weight: 500;
|
|
5970
|
+
}
|
|
5971
|
+
|
|
5972
|
+
.terminal-badge-primary, :where([data-ui="data-terminal"]) .ui-badge:where([data-ui-variant="primary"]) {
|
|
5973
|
+
color: var(--terminal-primary);
|
|
5974
|
+
background: var(--terminal-surface);
|
|
5975
|
+
border-color: currentColor;
|
|
5976
|
+
}
|
|
5977
|
+
|
|
5978
|
+
.terminal-badge-secondary, :where([data-ui="data-terminal"]) .ui-badge:where([data-ui-variant="secondary"]) {
|
|
5979
|
+
color: var(--terminal-secondary);
|
|
5980
|
+
background: var(--terminal-surface);
|
|
5981
|
+
border-color: currentColor;
|
|
5982
|
+
}
|
|
5983
|
+
|
|
5984
|
+
.terminal-badge-success, :where([data-ui="data-terminal"]) .ui-badge:where([data-ui-variant="success"]) {
|
|
5985
|
+
color: var(--terminal-success);
|
|
5986
|
+
background: var(--terminal-surface);
|
|
5987
|
+
border-color: currentColor;
|
|
5988
|
+
}
|
|
5989
|
+
|
|
5990
|
+
.terminal-badge-warning, :where([data-ui="data-terminal"]) .ui-badge:where([data-ui-variant="warning"]) {
|
|
5991
|
+
color: var(--terminal-warning);
|
|
5992
|
+
background: var(--terminal-surface);
|
|
5993
|
+
border-color: currentColor;
|
|
5994
|
+
}
|
|
5995
|
+
|
|
5996
|
+
.terminal-badge-danger, :where([data-ui="data-terminal"]) .ui-badge:where([data-ui-variant="danger"]) {
|
|
5997
|
+
color: var(--terminal-danger);
|
|
5998
|
+
background: var(--terminal-surface);
|
|
5999
|
+
border-color: currentColor;
|
|
6000
|
+
}
|
|
6001
|
+
|
|
6002
|
+
.terminal-alert, :where([data-ui="data-terminal"]) .ui-alert {
|
|
6003
|
+
color: var(--terminal-text);
|
|
6004
|
+
background: var(--terminal-surface);
|
|
6005
|
+
box-shadow: none;
|
|
6006
|
+
border: 1px solid;
|
|
6007
|
+
border-radius: 0;
|
|
6008
|
+
gap: .15rem;
|
|
6009
|
+
padding: .42rem .55rem;
|
|
6010
|
+
font-size: .75rem;
|
|
6011
|
+
}
|
|
6012
|
+
|
|
6013
|
+
.terminal-alert-success, :where([data-ui="data-terminal"]) .ui-alert:where([data-ui-variant="success"]) {
|
|
6014
|
+
color: var(--terminal-success);
|
|
6015
|
+
border-color: currentColor;
|
|
6016
|
+
}
|
|
6017
|
+
|
|
6018
|
+
.terminal-alert-warning, :where([data-ui="data-terminal"]) .ui-alert:where([data-ui-variant="warning"]) {
|
|
6019
|
+
color: var(--terminal-warning);
|
|
6020
|
+
border-color: currentColor;
|
|
6021
|
+
}
|
|
6022
|
+
|
|
6023
|
+
.terminal-alert-danger, :where([data-ui="data-terminal"]) .ui-alert:where([data-ui-variant="danger"]) {
|
|
6024
|
+
color: var(--terminal-danger);
|
|
6025
|
+
border-color: currentColor;
|
|
6026
|
+
}
|
|
6027
|
+
|
|
6028
|
+
.terminal-alert-title, :where([data-ui="data-terminal"]) .ui-alert-title {
|
|
6029
|
+
color: inherit;
|
|
6030
|
+
font-weight: 500;
|
|
6031
|
+
}
|
|
6032
|
+
|
|
6033
|
+
.terminal-alert-body, :where([data-ui="data-terminal"]) .ui-alert-body {
|
|
6034
|
+
color: inherit;
|
|
6035
|
+
line-height: 1.3;
|
|
6036
|
+
}
|
|
6037
|
+
|
|
6038
|
+
.terminal-progress, :where([data-ui="data-terminal"]) .ui-progress {
|
|
6039
|
+
background: repeating-linear-gradient(90deg,var(--terminal-surface-soft)0 .7rem,var(--terminal-bg) .7rem .78rem);
|
|
6040
|
+
border: 0;
|
|
6041
|
+
border-radius: 0;
|
|
6042
|
+
block-size: .5rem;
|
|
6043
|
+
}
|
|
6044
|
+
|
|
6045
|
+
.terminal-progress-bar, :where([data-ui="data-terminal"]) .ui-progress-bar {
|
|
6046
|
+
background: repeating-linear-gradient(90deg,var(--terminal-primary)0 .7rem,transparent .7rem .78rem);
|
|
6047
|
+
box-shadow: none;
|
|
6048
|
+
border-radius: 0;
|
|
6049
|
+
}
|
|
6050
|
+
|
|
6051
|
+
[data-ui="data-terminal"][data-mode] :where(dialog > form) {
|
|
6052
|
+
padding: .625rem;
|
|
6053
|
+
}
|
|
6054
|
+
|
|
6055
|
+
[data-ui="data-terminal"][data-mode] {
|
|
6056
|
+
--usk-native-range-track-size: .7rem;
|
|
6057
|
+
--usk-native-range-track-background: repeating-linear-gradient(90deg, rgb(var(--terminal-text-rgb) / .62) 0 1px, transparent 1px .75rem) top / 100% 55% no-repeat,
|
|
6058
|
+
linear-gradient(90deg, var(--terminal-success) 0 58%, var(--terminal-warning) 58% 78%, var(--terminal-danger) 78% 100%) bottom / 100% 3px no-repeat,
|
|
6059
|
+
transparent;
|
|
6060
|
+
--usk-native-range-track-border: 0 solid transparent;
|
|
6061
|
+
--usk-native-range-track-radius: 0;
|
|
6062
|
+
--usk-native-range-track-shadow: none;
|
|
6063
|
+
--usk-native-range-progress-background: linear-gradient(var(--terminal-primary), var(--terminal-primary));
|
|
6064
|
+
--usk-native-range-thumb-size: .75rem;
|
|
6065
|
+
--usk-native-range-thumb-background: var(--terminal-surface);
|
|
6066
|
+
--usk-native-range-thumb-border: 2px solid var(--terminal-text);
|
|
6067
|
+
--usk-native-range-thumb-radius: 0;
|
|
6068
|
+
--usk-native-range-thumb-shadow: none;
|
|
6069
|
+
}
|
|
6070
|
+
|
|
6071
|
+
.terminal-nav, :where([data-ui="data-terminal"]) .ui-nav {
|
|
6072
|
+
background: var(--terminal-surface);
|
|
6073
|
+
border: 1px solid var(--terminal-border);
|
|
6074
|
+
box-shadow: none;
|
|
6075
|
+
border-radius: 0;
|
|
6076
|
+
gap: 0;
|
|
6077
|
+
padding: 0;
|
|
6078
|
+
}
|
|
6079
|
+
|
|
6080
|
+
.terminal-nav-link, :where([data-ui="data-terminal"]) .ui-nav-link {
|
|
6081
|
+
min-height: 1.75rem;
|
|
6082
|
+
color: var(--terminal-text);
|
|
6083
|
+
border-inline-end: 1px solid var(--terminal-border);
|
|
6084
|
+
border-radius: 0;
|
|
6085
|
+
padding: .28rem .6rem;
|
|
6086
|
+
font-size: .6875rem;
|
|
6087
|
+
font-weight: 500;
|
|
6088
|
+
}
|
|
6089
|
+
|
|
6090
|
+
.terminal-nav-link:hover, :where([data-ui="data-terminal"]) .ui-nav-link:hover {
|
|
6091
|
+
color: var(--terminal-primary);
|
|
6092
|
+
background: var(--terminal-surface);
|
|
6093
|
+
}
|
|
6094
|
+
|
|
6095
|
+
.terminal-nav-link[aria-current="page"], .terminal-nav-link.is-active, :where([data-ui="data-terminal"]) .ui-nav-link[aria-current="page"], :where([data-ui="data-terminal"]) .ui-nav-link.is-active {
|
|
6096
|
+
color: var(--terminal-on-primary);
|
|
6097
|
+
background: var(--terminal-primary);
|
|
6098
|
+
}
|
|
6099
|
+
|
|
6100
|
+
.terminal-table, :where([data-ui="data-terminal"]) .ui-table {
|
|
6101
|
+
font-size: .6875rem;
|
|
6102
|
+
}
|
|
6103
|
+
|
|
6104
|
+
.terminal-table th, .terminal-table td, :where([data-ui="data-terminal"]) .ui-table th, :where([data-ui="data-terminal"]) .ui-table td {
|
|
6105
|
+
color: var(--terminal-text);
|
|
6106
|
+
background: var(--terminal-surface);
|
|
6107
|
+
border: 0;
|
|
6108
|
+
border-block-end: 1px solid var(--terminal-border);
|
|
6109
|
+
padding: .2rem .4rem;
|
|
6110
|
+
}
|
|
6111
|
+
|
|
6112
|
+
.terminal-table th, :where([data-ui="data-terminal"]) .ui-table th {
|
|
6113
|
+
letter-spacing: .025em;
|
|
6114
|
+
font-size: .625rem;
|
|
6115
|
+
font-weight: 500;
|
|
6116
|
+
line-height: 1.15;
|
|
6117
|
+
}
|
|
6118
|
+
|
|
6119
|
+
.terminal-table tr:hover td, :where([data-ui="data-terminal"]) .ui-table tr:hover td {
|
|
6120
|
+
color: var(--terminal-on-primary);
|
|
6121
|
+
background: var(--terminal-primary);
|
|
6122
|
+
}
|
|
6123
|
+
|
|
6124
|
+
[data-ui="data-terminal"][data-mode] .terminal-table tbody tr:hover > td, :where([data-ui="data-terminal"])[data-mode] .ui-table tbody tr:hover>td {
|
|
6125
|
+
color: var(--terminal-on-primary);
|
|
6126
|
+
background: var(--terminal-primary);
|
|
6127
|
+
transition: none;
|
|
6128
|
+
}
|
|
6129
|
+
|
|
6130
|
+
.terminal-pill, .terminal-rounded, .terminal-rounded-lg, .terminal-rounded-xl {
|
|
6131
|
+
border-radius: 0;
|
|
6132
|
+
}
|
|
6133
|
+
|
|
6134
|
+
.terminal-metric {
|
|
6135
|
+
background: var(--terminal-surface);
|
|
6136
|
+
border: 1px solid var(--terminal-border);
|
|
6137
|
+
border-radius: 0;
|
|
6138
|
+
gap: .2rem;
|
|
6139
|
+
padding: .5rem;
|
|
6140
|
+
}
|
|
6141
|
+
|
|
6142
|
+
.terminal-metric-value {
|
|
6143
|
+
letter-spacing: .025em;
|
|
6144
|
+
font-size: 1rem;
|
|
6145
|
+
}
|
|
6146
|
+
|
|
6147
|
+
.terminal-metric-label {
|
|
6148
|
+
font-size: .6875rem;
|
|
6149
|
+
font-weight: 500;
|
|
6150
|
+
}
|
|
6151
|
+
|
|
6152
|
+
[data-ui="data-terminal"][data-mode] .terminal-button.terminal-button-warning, :where([data-ui="data-terminal"])[data-mode] .ui-button.ui-button:where([data-ui-variant="warning"]) {
|
|
6153
|
+
background: var(--terminal-warning);
|
|
6154
|
+
color: var(--terminal-on-warning);
|
|
6155
|
+
border-color: var(--terminal-warning);
|
|
6156
|
+
text-shadow: none;
|
|
6157
|
+
}
|
|
6158
|
+
}
|
|
6159
|
+
|
|
6160
|
+
[data-ui="data-terminal"][data-mode] .terminal-title {
|
|
6161
|
+
letter-spacing: max(.03em, .5px);
|
|
6162
|
+
margin-block: max(.75rem, 12px);
|
|
6163
|
+
}
|
|
6164
|
+
|
|
6165
|
+
[data-ui="data-terminal"][data-mode] .terminal-feature-item > .terminal-icon-medallion {
|
|
6166
|
+
font-size: 1.5rem;
|
|
6167
|
+
line-height: 1;
|
|
6168
|
+
}
|
|
6169
|
+
|
|
6170
|
+
@supports ((-moz-appearance: none)) {
|
|
6171
|
+
[data-ui="data-terminal"][data-mode] .terminal-feature-item > .terminal-icon-medallion {
|
|
6172
|
+
line-height: 2rem;
|
|
6173
|
+
}
|
|
6174
|
+
}
|
|
6175
|
+
|
|
6176
|
+
[data-ui="data-terminal"][data-mode] .terminal-callout-bar > .terminal-icon-medallion {
|
|
6177
|
+
min-block-size: 4.5rem;
|
|
6178
|
+
min-inline-size: 4.5rem;
|
|
6179
|
+
font-size: 2rem;
|
|
6180
|
+
font-weight: 800;
|
|
6181
|
+
line-height: 1;
|
|
4804
6182
|
}
|