ui-style-kit-css 1.0.4 → 1.2.2
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 +16 -57
- package/CONTRIBUTING.md +24 -0
- package/README.md +102 -140
- package/SECURITY.md +18 -0
- package/STYLE-MAP.md +36 -0
- package/{index.html → demo/index.html} +6 -119
- package/dist/ui-style-kit.css +739 -28
- package/dist/ui-style-kit.min.css +1 -7
- package/docs/PUBLISHING.md +28 -0
- package/docs/STYLE-GUIDE.md +28 -0
- package/docs/TOKENS.md +71 -0
- package/package.json +80 -128
- package/styles/bauhaus.css +5 -2
- package/styles/bento.css +5 -2
- package/styles/brutalism.css +83 -2
- package/styles/cyberpunk.css +83 -2
- package/styles/interactive-surface-bridge.css +341 -0
- package/styles/maximalist.css +5 -2
- package/styles/minimal-saas.css +5 -2
- package/styles/neumorphism.css +5 -2
- package/styles/retro-glass.css +83 -2
- package/styles/retrofuturism.css +5 -2
- package/styles/tactile.css +5 -2
- package/styles/y2k.css +83 -2
- package/CODE_OF_CONDUCT.md +0 -64
package/dist/ui-style-kit.css
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
/*!
|
|
2
|
+
* UI Style Kit CSS v1.2.2
|
|
3
|
+
* CSS theme and UI style preset library.
|
|
4
|
+
* License: MIT
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
@layer ui-style-kit.minimal_saas, ui-style-kit.bento, ui-style-kit.maximalist, ui-style-kit.bauhaus, ui-style-kit.tactile, ui-style-kit.neumorphism, ui-style-kit.retrofuturism, ui-style-kit.brutalism, ui-style-kit.cyberpunk, ui-style-kit.y2k, ui-style-kit.retro_glass;
|
|
7
8
|
|
|
9
|
+
/* styles/minimal-saas.css */
|
|
8
10
|
/* =========================================================
|
|
9
11
|
UI Style Kit CSS — Minimal SaaS Theme System
|
|
10
12
|
Includes 10 color schemes, light/dark/contrast modes,
|
|
@@ -17,6 +19,8 @@
|
|
|
17
19
|
<body data-ui="minimal-saas" data-theme="cyber-lime" data-mode="contrast">
|
|
18
20
|
========================================================= */
|
|
19
21
|
|
|
22
|
+
|
|
23
|
+
@layer ui-style-kit.minimal_saas {
|
|
20
24
|
:root {
|
|
21
25
|
--saas-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
22
26
|
--saas-font-display: Inter, ui-sans-serif, system-ui, sans-serif;
|
|
@@ -97,7 +101,7 @@
|
|
|
97
101
|
--saas-border-rgb: 214 200 165;
|
|
98
102
|
--saas-primary-rgb: 184 135 47;
|
|
99
103
|
--saas-primary-hover-rgb: 148 104 31;
|
|
100
|
-
--saas-primary-text-rgb:
|
|
104
|
+
--saas-primary-text-rgb: 16 16 16;
|
|
101
105
|
--saas-secondary-rgb: 34 49 79;
|
|
102
106
|
--saas-secondary-hover-rgb: 23 36 60;
|
|
103
107
|
--saas-secondary-text-rgb: 255 255 255;
|
|
@@ -625,7 +629,7 @@
|
|
|
625
629
|
--saas-border-rgb: 198 216 179;
|
|
626
630
|
--saas-primary-rgb: 95 159 31;
|
|
627
631
|
--saas-primary-hover-rgb: 73 125 23;
|
|
628
|
-
--saas-primary-text-rgb:
|
|
632
|
+
--saas-primary-text-rgb: 16 16 16;
|
|
629
633
|
--saas-secondary-rgb: 20 127 134;
|
|
630
634
|
--saas-secondary-hover-rgb: 14 98 104;
|
|
631
635
|
--saas-secondary-text-rgb: 255 255 255;
|
|
@@ -983,7 +987,10 @@
|
|
|
983
987
|
[data-ui="minimal-saas"] * { box-shadow: none !important; text-shadow: none !important; }
|
|
984
988
|
[data-ui="minimal-saas"] a { color: #000 !important; text-decoration: underline; }
|
|
985
989
|
}
|
|
990
|
+
}
|
|
986
991
|
|
|
992
|
+
|
|
993
|
+
/* styles/bento.css */
|
|
987
994
|
/* =========================================================
|
|
988
995
|
UI Style Kit CSS — Bento UI Theme System
|
|
989
996
|
Includes 10 color schemes, light/dark/contrast modes,
|
|
@@ -996,6 +1003,8 @@
|
|
|
996
1003
|
<body data-ui="bento" data-theme="cyber-lime" data-mode="contrast">
|
|
997
1004
|
========================================================= */
|
|
998
1005
|
|
|
1006
|
+
|
|
1007
|
+
@layer ui-style-kit.bento {
|
|
999
1008
|
:root {
|
|
1000
1009
|
--bento-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
1001
1010
|
--bento-font-display: Inter, ui-sans-serif, system-ui, sans-serif;
|
|
@@ -1076,7 +1085,7 @@
|
|
|
1076
1085
|
--bento-border-rgb: 214 200 165;
|
|
1077
1086
|
--bento-primary-rgb: 184 135 47;
|
|
1078
1087
|
--bento-primary-hover-rgb: 148 104 31;
|
|
1079
|
-
--bento-primary-text-rgb:
|
|
1088
|
+
--bento-primary-text-rgb: 16 16 16;
|
|
1080
1089
|
--bento-secondary-rgb: 34 49 79;
|
|
1081
1090
|
--bento-secondary-hover-rgb: 23 36 60;
|
|
1082
1091
|
--bento-secondary-text-rgb: 255 255 255;
|
|
@@ -1604,7 +1613,7 @@
|
|
|
1604
1613
|
--bento-border-rgb: 198 216 179;
|
|
1605
1614
|
--bento-primary-rgb: 95 159 31;
|
|
1606
1615
|
--bento-primary-hover-rgb: 73 125 23;
|
|
1607
|
-
--bento-primary-text-rgb:
|
|
1616
|
+
--bento-primary-text-rgb: 16 16 16;
|
|
1608
1617
|
--bento-secondary-rgb: 20 127 134;
|
|
1609
1618
|
--bento-secondary-hover-rgb: 14 98 104;
|
|
1610
1619
|
--bento-secondary-text-rgb: 255 255 255;
|
|
@@ -1963,7 +1972,10 @@
|
|
|
1963
1972
|
[data-ui="bento"] * { box-shadow: none !important; text-shadow: none !important; }
|
|
1964
1973
|
[data-ui="bento"] a { color: #000 !important; text-decoration: underline; }
|
|
1965
1974
|
}
|
|
1975
|
+
}
|
|
1966
1976
|
|
|
1977
|
+
|
|
1978
|
+
/* styles/maximalist.css */
|
|
1967
1979
|
/* =========================================================
|
|
1968
1980
|
UI Style Kit CSS — Maximalist / Playful Theme System
|
|
1969
1981
|
Includes 10 color schemes, light/dark/contrast modes,
|
|
@@ -1976,6 +1988,8 @@
|
|
|
1976
1988
|
<body data-ui="maximalist" data-theme="cyber-lime" data-mode="contrast">
|
|
1977
1989
|
========================================================= */
|
|
1978
1990
|
|
|
1991
|
+
|
|
1992
|
+
@layer ui-style-kit.maximalist {
|
|
1979
1993
|
:root {
|
|
1980
1994
|
--max-font-sans: Nunito, Inter, ui-sans-serif, system-ui, sans-serif;
|
|
1981
1995
|
--max-font-display: Cooper Black, Baloo 2, Nunito, Inter, ui-sans-serif, system-ui, sans-serif;
|
|
@@ -2056,7 +2070,7 @@
|
|
|
2056
2070
|
--max-border-rgb: 214 200 165;
|
|
2057
2071
|
--max-primary-rgb: 184 135 47;
|
|
2058
2072
|
--max-primary-hover-rgb: 148 104 31;
|
|
2059
|
-
--max-primary-text-rgb:
|
|
2073
|
+
--max-primary-text-rgb: 16 16 16;
|
|
2060
2074
|
--max-secondary-rgb: 34 49 79;
|
|
2061
2075
|
--max-secondary-hover-rgb: 23 36 60;
|
|
2062
2076
|
--max-secondary-text-rgb: 255 255 255;
|
|
@@ -2584,7 +2598,7 @@
|
|
|
2584
2598
|
--max-border-rgb: 198 216 179;
|
|
2585
2599
|
--max-primary-rgb: 95 159 31;
|
|
2586
2600
|
--max-primary-hover-rgb: 73 125 23;
|
|
2587
|
-
--max-primary-text-rgb:
|
|
2601
|
+
--max-primary-text-rgb: 16 16 16;
|
|
2588
2602
|
--max-secondary-rgb: 20 127 134;
|
|
2589
2603
|
--max-secondary-hover-rgb: 14 98 104;
|
|
2590
2604
|
--max-secondary-text-rgb: 255 255 255;
|
|
@@ -2942,7 +2956,10 @@
|
|
|
2942
2956
|
[data-ui="maximalist"] * { box-shadow: none !important; text-shadow: none !important; }
|
|
2943
2957
|
[data-ui="maximalist"] a { color: #000 !important; text-decoration: underline; }
|
|
2944
2958
|
}
|
|
2959
|
+
}
|
|
2945
2960
|
|
|
2961
|
+
|
|
2962
|
+
/* styles/bauhaus.css */
|
|
2946
2963
|
/* =========================================================
|
|
2947
2964
|
UI Style Kit CSS — Bauhaus / Swiss Modern Theme System
|
|
2948
2965
|
Includes 10 color schemes, light/dark/contrast modes,
|
|
@@ -2955,6 +2972,8 @@
|
|
|
2955
2972
|
<body data-ui="bauhaus" data-theme="cyber-lime" data-mode="contrast">
|
|
2956
2973
|
========================================================= */
|
|
2957
2974
|
|
|
2975
|
+
|
|
2976
|
+
@layer ui-style-kit.bauhaus {
|
|
2958
2977
|
:root {
|
|
2959
2978
|
--bau-font-sans: Helvetica Neue, Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
|
|
2960
2979
|
--bau-font-display: Helvetica Neue, Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
|
|
@@ -3035,7 +3054,7 @@
|
|
|
3035
3054
|
--bau-border-rgb: 214 200 165;
|
|
3036
3055
|
--bau-primary-rgb: 184 135 47;
|
|
3037
3056
|
--bau-primary-hover-rgb: 148 104 31;
|
|
3038
|
-
--bau-primary-text-rgb:
|
|
3057
|
+
--bau-primary-text-rgb: 16 16 16;
|
|
3039
3058
|
--bau-secondary-rgb: 34 49 79;
|
|
3040
3059
|
--bau-secondary-hover-rgb: 23 36 60;
|
|
3041
3060
|
--bau-secondary-text-rgb: 255 255 255;
|
|
@@ -3563,7 +3582,7 @@
|
|
|
3563
3582
|
--bau-border-rgb: 198 216 179;
|
|
3564
3583
|
--bau-primary-rgb: 95 159 31;
|
|
3565
3584
|
--bau-primary-hover-rgb: 73 125 23;
|
|
3566
|
-
--bau-primary-text-rgb:
|
|
3585
|
+
--bau-primary-text-rgb: 16 16 16;
|
|
3567
3586
|
--bau-secondary-rgb: 20 127 134;
|
|
3568
3587
|
--bau-secondary-hover-rgb: 14 98 104;
|
|
3569
3588
|
--bau-secondary-text-rgb: 255 255 255;
|
|
@@ -3921,7 +3940,10 @@
|
|
|
3921
3940
|
[data-ui="bauhaus"] * { box-shadow: none !important; text-shadow: none !important; }
|
|
3922
3941
|
[data-ui="bauhaus"] a { color: #000 !important; text-decoration: underline; }
|
|
3923
3942
|
}
|
|
3943
|
+
}
|
|
3924
3944
|
|
|
3945
|
+
|
|
3946
|
+
/* styles/tactile.css */
|
|
3925
3947
|
/* =========================================================
|
|
3926
3948
|
UI Style Kit CSS — Skeuomorphic / Tactile Theme System
|
|
3927
3949
|
Includes 10 color schemes, light/dark/contrast modes,
|
|
@@ -3934,6 +3956,8 @@
|
|
|
3934
3956
|
<body data-ui="tactile" data-theme="cyber-lime" data-mode="contrast">
|
|
3935
3957
|
========================================================= */
|
|
3936
3958
|
|
|
3959
|
+
|
|
3960
|
+
@layer ui-style-kit.tactile {
|
|
3937
3961
|
:root {
|
|
3938
3962
|
--tactile-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
3939
3963
|
--tactile-font-display: Inter, ui-sans-serif, system-ui, sans-serif;
|
|
@@ -4014,7 +4038,7 @@
|
|
|
4014
4038
|
--tactile-border-rgb: 214 200 165;
|
|
4015
4039
|
--tactile-primary-rgb: 184 135 47;
|
|
4016
4040
|
--tactile-primary-hover-rgb: 148 104 31;
|
|
4017
|
-
--tactile-primary-text-rgb:
|
|
4041
|
+
--tactile-primary-text-rgb: 16 16 16;
|
|
4018
4042
|
--tactile-secondary-rgb: 34 49 79;
|
|
4019
4043
|
--tactile-secondary-hover-rgb: 23 36 60;
|
|
4020
4044
|
--tactile-secondary-text-rgb: 255 255 255;
|
|
@@ -4542,7 +4566,7 @@
|
|
|
4542
4566
|
--tactile-border-rgb: 198 216 179;
|
|
4543
4567
|
--tactile-primary-rgb: 95 159 31;
|
|
4544
4568
|
--tactile-primary-hover-rgb: 73 125 23;
|
|
4545
|
-
--tactile-primary-text-rgb:
|
|
4569
|
+
--tactile-primary-text-rgb: 16 16 16;
|
|
4546
4570
|
--tactile-secondary-rgb: 20 127 134;
|
|
4547
4571
|
--tactile-secondary-hover-rgb: 14 98 104;
|
|
4548
4572
|
--tactile-secondary-text-rgb: 255 255 255;
|
|
@@ -4899,7 +4923,10 @@
|
|
|
4899
4923
|
[data-ui="tactile"] * { box-shadow: none !important; text-shadow: none !important; }
|
|
4900
4924
|
[data-ui="tactile"] a { color: #000 !important; text-decoration: underline; }
|
|
4901
4925
|
}
|
|
4926
|
+
}
|
|
4927
|
+
|
|
4902
4928
|
|
|
4929
|
+
/* styles/neumorphism.css */
|
|
4903
4930
|
/* =========================================================
|
|
4904
4931
|
UI Style Kit CSS — Neumorphism Theme System
|
|
4905
4932
|
Includes 10 color schemes, light/dark/contrast modes,
|
|
@@ -4912,6 +4939,8 @@
|
|
|
4912
4939
|
<body data-ui="neumorphism" data-theme="cyber-lime" data-mode="contrast">
|
|
4913
4940
|
========================================================= */
|
|
4914
4941
|
|
|
4942
|
+
|
|
4943
|
+
@layer ui-style-kit.neumorphism {
|
|
4915
4944
|
:root {
|
|
4916
4945
|
--neo-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
4917
4946
|
--neo-font-display: Inter, ui-sans-serif, system-ui, sans-serif;
|
|
@@ -4992,7 +5021,7 @@
|
|
|
4992
5021
|
--neo-border-rgb: 214 200 165;
|
|
4993
5022
|
--neo-primary-rgb: 184 135 47;
|
|
4994
5023
|
--neo-primary-hover-rgb: 148 104 31;
|
|
4995
|
-
--neo-primary-text-rgb:
|
|
5024
|
+
--neo-primary-text-rgb: 16 16 16;
|
|
4996
5025
|
--neo-secondary-rgb: 34 49 79;
|
|
4997
5026
|
--neo-secondary-hover-rgb: 23 36 60;
|
|
4998
5027
|
--neo-secondary-text-rgb: 255 255 255;
|
|
@@ -5520,7 +5549,7 @@
|
|
|
5520
5549
|
--neo-border-rgb: 198 216 179;
|
|
5521
5550
|
--neo-primary-rgb: 95 159 31;
|
|
5522
5551
|
--neo-primary-hover-rgb: 73 125 23;
|
|
5523
|
-
--neo-primary-text-rgb:
|
|
5552
|
+
--neo-primary-text-rgb: 16 16 16;
|
|
5524
5553
|
--neo-secondary-rgb: 20 127 134;
|
|
5525
5554
|
--neo-secondary-hover-rgb: 14 98 104;
|
|
5526
5555
|
--neo-secondary-text-rgb: 255 255 255;
|
|
@@ -5907,7 +5936,10 @@
|
|
|
5907
5936
|
[data-ui="neumorphism"] * { box-shadow: none !important; text-shadow: none !important; }
|
|
5908
5937
|
[data-ui="neumorphism"] a { color: #000 !important; text-decoration: underline; }
|
|
5909
5938
|
}
|
|
5939
|
+
}
|
|
5940
|
+
|
|
5910
5941
|
|
|
5942
|
+
/* styles/retrofuturism.css */
|
|
5911
5943
|
/* =========================================================
|
|
5912
5944
|
UI Style Kit CSS — Retrofuturism Theme System
|
|
5913
5945
|
Includes 10 color schemes, light/dark/contrast modes,
|
|
@@ -5920,6 +5952,8 @@
|
|
|
5920
5952
|
<body data-ui="retrofuturism" data-theme="cyber-lime" data-mode="contrast">
|
|
5921
5953
|
========================================================= */
|
|
5922
5954
|
|
|
5955
|
+
|
|
5956
|
+
@layer ui-style-kit.retrofuturism {
|
|
5923
5957
|
:root {
|
|
5924
5958
|
--retro-font-sans: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
5925
5959
|
--retro-font-display: Orbitron, Eurostile, "Bank Gothic", Rajdhani, Inter, ui-sans-serif, system-ui, sans-serif;
|
|
@@ -6000,7 +6034,7 @@
|
|
|
6000
6034
|
--retro-border-rgb: 214 200 165;
|
|
6001
6035
|
--retro-primary-rgb: 184 135 47;
|
|
6002
6036
|
--retro-primary-hover-rgb: 148 104 31;
|
|
6003
|
-
--retro-primary-text-rgb:
|
|
6037
|
+
--retro-primary-text-rgb: 16 16 16;
|
|
6004
6038
|
--retro-secondary-rgb: 34 49 79;
|
|
6005
6039
|
--retro-secondary-hover-rgb: 23 36 60;
|
|
6006
6040
|
--retro-secondary-text-rgb: 255 255 255;
|
|
@@ -6528,7 +6562,7 @@
|
|
|
6528
6562
|
--retro-border-rgb: 198 216 179;
|
|
6529
6563
|
--retro-primary-rgb: 95 159 31;
|
|
6530
6564
|
--retro-primary-hover-rgb: 73 125 23;
|
|
6531
|
-
--retro-primary-text-rgb:
|
|
6565
|
+
--retro-primary-text-rgb: 16 16 16;
|
|
6532
6566
|
--retro-secondary-rgb: 20 127 134;
|
|
6533
6567
|
--retro-secondary-hover-rgb: 14 98 104;
|
|
6534
6568
|
--retro-secondary-text-rgb: 255 255 255;
|
|
@@ -6923,7 +6957,10 @@
|
|
|
6923
6957
|
[data-ui="retrofuturism"] * { box-shadow: none !important; text-shadow: none !important; }
|
|
6924
6958
|
[data-ui="retrofuturism"] a { color: #000 !important; text-decoration: underline; }
|
|
6925
6959
|
}
|
|
6960
|
+
}
|
|
6961
|
+
|
|
6926
6962
|
|
|
6963
|
+
/* styles/brutalism.css */
|
|
6927
6964
|
/* =========================================================
|
|
6928
6965
|
Brutalism Theme System
|
|
6929
6966
|
Includes:
|
|
@@ -6937,6 +6974,8 @@
|
|
|
6937
6974
|
<body data-ui="brutalism" data-theme="midnight-gold" data-mode="contrast">
|
|
6938
6975
|
========================================================= */
|
|
6939
6976
|
|
|
6977
|
+
|
|
6978
|
+
@layer ui-style-kit.brutalism {
|
|
6940
6979
|
:root {
|
|
6941
6980
|
--brutal-radius-xs: 0.25rem;
|
|
6942
6981
|
--brutal-radius-sm: 0.5rem;
|
|
@@ -7037,7 +7076,7 @@
|
|
|
7037
7076
|
--brutal-border-rgb: 214 200 165;
|
|
7038
7077
|
--brutal-primary-rgb: 184 135 47;
|
|
7039
7078
|
--brutal-primary-hover-rgb: 148 104 31;
|
|
7040
|
-
--brutal-primary-text-rgb:
|
|
7079
|
+
--brutal-primary-text-rgb: 16 16 16;
|
|
7041
7080
|
--brutal-secondary-rgb: 34 49 79;
|
|
7042
7081
|
--brutal-secondary-hover-rgb: 23 36 60;
|
|
7043
7082
|
--brutal-secondary-text-rgb: 255 255 255;
|
|
@@ -7597,7 +7636,7 @@
|
|
|
7597
7636
|
--brutal-border-rgb: 198 216 179;
|
|
7598
7637
|
--brutal-primary-rgb: 95 159 31;
|
|
7599
7638
|
--brutal-primary-hover-rgb: 73 125 23;
|
|
7600
|
-
--brutal-primary-text-rgb:
|
|
7639
|
+
--brutal-primary-text-rgb: 16 16 16;
|
|
7601
7640
|
--brutal-secondary-rgb: 20 127 134;
|
|
7602
7641
|
--brutal-secondary-hover-rgb: 14 98 104;
|
|
7603
7642
|
--brutal-secondary-text-rgb: 255 255 255;
|
|
@@ -7836,6 +7875,87 @@
|
|
|
7836
7875
|
[data-ui="brutalism"] :focus-visible { outline: 4px solid var(--brutal-focus); outline-offset: 3px; }
|
|
7837
7876
|
@media (prefers-reduced-motion: reduce) { [data-ui="brutalism"] *, [data-ui="brutalism"] *::before, [data-ui="brutalism"] *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }
|
|
7838
7877
|
|
|
7878
|
+
/* =========================================================
|
|
7879
|
+
Native HTML Coverage + CSS Accessibility Layer
|
|
7880
|
+
========================================================= */
|
|
7881
|
+
|
|
7882
|
+
.brutal-sr-only,
|
|
7883
|
+
.brutal-visually-hidden { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
|
|
7884
|
+
.brutal-skip-link { position: fixed; inset-block-start: 1rem; inset-inline-start: 1rem; z-index: 10000; transform: translateY(-150%); padding: .75rem 1rem; background: var(--brutal-primary); color: var(--brutal-primary-text); border: 3px solid var(--brutal-border); border-radius: var(--brutal-radius-sm); box-shadow: var(--brutal-shadow-md); font-weight: 900; text-decoration: none; }
|
|
7885
|
+
.brutal-skip-link:focus { transform: translateY(0); }
|
|
7886
|
+
.brutal-divider { width: 100%; height: 1px; border: 0; margin: 1.5rem 0; background: var(--brutal-border); }
|
|
7887
|
+
|
|
7888
|
+
[data-ui="brutalism"] :where(h1, h2, h3, h4, h5, h6) { color: var(--brutal-text); font-family: var(--brutal-font-display); line-height: 1.15; margin: 0 0 .65em; text-wrap: balance; }
|
|
7889
|
+
[data-ui="brutalism"] :where(h1) { font-size: clamp(2rem, 5vw, 3.5rem); }
|
|
7890
|
+
[data-ui="brutalism"] :where(h2) { font-size: clamp(1.55rem, 3vw, 2.35rem); }
|
|
7891
|
+
[data-ui="brutalism"] :where(h3) { font-size: clamp(1.25rem, 2vw, 1.65rem); }
|
|
7892
|
+
[data-ui="brutalism"] :where(p) { margin: 0 0 1rem; color: var(--brutal-text-muted); line-height: 1.7; }
|
|
7893
|
+
[data-ui="brutalism"] :where(a) { color: var(--brutal-link); text-decoration-thickness: .08em; text-underline-offset: .18em; }
|
|
7894
|
+
[data-ui="brutalism"] :where(a:hover) { color: var(--brutal-primary-hover); }
|
|
7895
|
+
[data-ui="brutalism"] :where(ul, ol) { margin: 0 0 1rem; padding-left: 1.35rem; color: var(--brutal-text-muted); }
|
|
7896
|
+
[data-ui="brutalism"] :where(li) { margin-block: .25rem; }
|
|
7897
|
+
[data-ui="brutalism"] :where(blockquote) { margin: 1.25rem 0; padding: 1rem 1.25rem; color: var(--brutal-text); background: var(--brutal-surface-soft); border-left: .35rem solid var(--brutal-primary); border-radius: var(--brutal-radius-md); }
|
|
7898
|
+
[data-ui="brutalism"] :where(code, kbd, samp) { font-family: var(--brutal-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace); font-size: .92em; background: var(--brutal-surface-soft); color: var(--brutal-text); border: 1px solid rgb(var(--brutal-border-rgb) / .45); border-radius: var(--brutal-radius-xs); padding: .15em .35em; }
|
|
7899
|
+
[data-ui="brutalism"] :where(pre) { overflow: auto; margin: 1rem 0; padding: 1rem; background: var(--brutal-surface-soft); color: var(--brutal-text); border: 1px solid var(--brutal-border); border-radius: var(--brutal-radius-md); }
|
|
7900
|
+
[data-ui="brutalism"] :where(pre code) { display: block; padding: 0; border: 0; background: transparent; }
|
|
7901
|
+
[data-ui="brutalism"] :where(hr) { height: 1px; border: 0; margin: 2rem 0; background: var(--brutal-border); }
|
|
7902
|
+
[data-ui="brutalism"] :where(mark) { background: rgb(var(--brutal-warning-rgb) / .32); color: var(--brutal-text); border-radius: .2em; padding-inline: .15em; }
|
|
7903
|
+
[data-ui="brutalism"] :where(small) { color: var(--brutal-text-muted); }
|
|
7904
|
+
[data-ui="brutalism"] :where(abbr[title]) { text-decoration: underline dotted var(--brutal-primary); text-underline-offset: .18em; cursor: help; }
|
|
7905
|
+
[data-ui="brutalism"] :where(img, picture, video, canvas, svg, iframe) { max-width: 100%; height: auto; }
|
|
7906
|
+
[data-ui="brutalism"] :where(figure) { margin: 1.25rem 0; }
|
|
7907
|
+
[data-ui="brutalism"] :where(figcaption) { margin-top: .5rem; color: var(--brutal-text-muted); font-size: .9rem; }
|
|
7908
|
+
[data-ui="brutalism"] :where(fieldset) { min-inline-size: 0; margin: 0 0 1rem; padding: 1rem; border: 3px solid var(--brutal-border); border-radius: var(--brutal-radius-md); }
|
|
7909
|
+
[data-ui="brutalism"] :where(legend) { padding-inline: .35rem; color: var(--brutal-text); font-weight: 900; }
|
|
7910
|
+
[data-ui="brutalism"] :where(label) { color: var(--brutal-text); font-weight: 750; }
|
|
7911
|
+
[data-ui="brutalism"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select) { width: 100%; min-height: 2.75rem; padding: .72rem .95rem; background: var(--brutal-surface-soft); color: var(--brutal-text); border: 3px solid var(--brutal-border); border-radius: var(--brutal-radius-md); font: inherit; }
|
|
7912
|
+
[data-ui="brutalism"] :where(textarea) { resize: vertical; min-height: 7rem; }
|
|
7913
|
+
[data-ui="brutalism"] :where(input, textarea, select, button) { font: inherit; }
|
|
7914
|
+
[data-ui="brutalism"] :where(button, input[type="button"], input[type="submit"], input[type="reset"]) { min-height: 2.75rem; padding: .7rem 1rem; background: var(--brutal-primary); color: var(--brutal-primary-text); border: 3px solid var(--brutal-primary); border-radius: var(--brutal-radius-md); font-weight: 850; cursor: pointer; }
|
|
7915
|
+
[data-ui="brutalism"] :where(button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover) { background: var(--brutal-primary-hover); border-color: var(--brutal-primary-hover); }
|
|
7916
|
+
[data-ui="brutalism"] :where(input[type="checkbox"], input[type="radio"]) { inline-size: 1.1rem; block-size: 1.1rem; accent-color: var(--brutal-primary); }
|
|
7917
|
+
[data-ui="brutalism"] :where(input[type="range"]) { width: 100%; accent-color: var(--brutal-primary); }
|
|
7918
|
+
[data-ui="brutalism"] :where(input[type="color"]) { inline-size: 3rem; block-size: 2.4rem; padding: .2rem; background: var(--brutal-surface-soft); border: 3px solid var(--brutal-border); border-radius: var(--brutal-radius-sm); }
|
|
7919
|
+
[data-ui="brutalism"] :where(input[type="file"]) { color: var(--brutal-text-muted); }
|
|
7920
|
+
[data-ui="brutalism"] :where(input[type="file"]::file-selector-button) { margin-inline-end: .75rem; padding: .55rem .8rem; border: 3px solid var(--brutal-primary); border-radius: var(--brutal-radius-sm); background: var(--brutal-primary); color: var(--brutal-primary-text); font-weight: 800; cursor: pointer; }
|
|
7921
|
+
[data-ui="brutalism"] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) { opacity: .55; cursor: not-allowed; }
|
|
7922
|
+
[data-ui="brutalism"] :where(input:invalid, textarea:invalid, select:invalid, [aria-invalid="true"]) { border-color: var(--brutal-danger); }
|
|
7923
|
+
[data-ui="brutalism"] :where(table) { width: 100%; border-collapse: collapse; margin: 1rem 0; background: var(--brutal-surface); border: 3px solid var(--brutal-border); border-radius: var(--brutal-radius-md); overflow: hidden; }
|
|
7924
|
+
[data-ui="brutalism"] :where(caption) { caption-side: bottom; padding: .75rem; color: var(--brutal-text-muted); font-size: .9rem; }
|
|
7925
|
+
[data-ui="brutalism"] :where(th, td) { padding: .8rem .9rem; text-align: left; border-bottom: 1px solid var(--brutal-border); }
|
|
7926
|
+
[data-ui="brutalism"] :where(th) { color: var(--brutal-text); background: rgb(var(--brutal-primary-rgb) / .08); }
|
|
7927
|
+
[data-ui="brutalism"] :where(td) { color: var(--brutal-text-muted); }
|
|
7928
|
+
[data-ui="brutalism"] :where(details) { margin: 1rem 0; padding: .9rem 1rem; background: var(--brutal-surface); border: 3px solid var(--brutal-border); border-radius: var(--brutal-radius-md); }
|
|
7929
|
+
[data-ui="brutalism"] :where(summary) { color: var(--brutal-text); font-weight: 900; cursor: pointer; }
|
|
7930
|
+
[data-ui="brutalism"] :where(dialog) { max-width: min(92vw, 42rem); padding: 0; background: var(--brutal-surface-strong); color: var(--brutal-text); border: 3px solid var(--brutal-border); border-radius: var(--brutal-radius-lg); box-shadow: 0 30px 80px rgb(0 0 0 / .42); }
|
|
7931
|
+
[data-ui="brutalism"] :where(dialog::backdrop) { background: rgb(0 0 0 / .62); }
|
|
7932
|
+
[data-ui="brutalism"] :where(progress, meter) { width: 100%; min-height: .9rem; accent-color: var(--brutal-primary); }
|
|
7933
|
+
[data-ui="brutalism"] :where(:focus-visible) { outline: 3px solid var(--brutal-focus); outline-offset: 3px; box-shadow: 0 0 0 4px rgb(var(--brutal-focus-rgb) / .28); }
|
|
7934
|
+
[data-ui="brutalism"] :where(:target) { scroll-margin-top: 6rem; outline: 3px solid var(--brutal-focus); outline-offset: .35rem; }
|
|
7935
|
+
[data-ui="brutalism"] :where([aria-current="page"]) { font-weight: 900; }
|
|
7936
|
+
[data-ui="brutalism"] :where([aria-busy="true"]) { cursor: progress; }
|
|
7937
|
+
[data-ui="brutalism"] :where([hidden]) { display: none !important; }
|
|
7938
|
+
[data-ui="brutalism"] ::selection { background: var(--brutal-primary); color: var(--brutal-primary-text); }
|
|
7939
|
+
|
|
7940
|
+
@media (prefers-reduced-motion: reduce) {
|
|
7941
|
+
[data-ui="brutalism"] *, [data-ui="brutalism"] *::before, [data-ui="brutalism"] *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
|
|
7942
|
+
}
|
|
7943
|
+
@media (prefers-contrast: more) {
|
|
7944
|
+
[data-ui="brutalism"] { --brutal-border-alpha: 1; }
|
|
7945
|
+
}
|
|
7946
|
+
@media (forced-colors: active) {
|
|
7947
|
+
[data-ui="brutalism"] * { forced-color-adjust: auto; }
|
|
7948
|
+
[data-ui="brutalism"] :where(:focus-visible) { outline: 3px solid CanvasText; box-shadow: none; }
|
|
7949
|
+
}
|
|
7950
|
+
@media print {
|
|
7951
|
+
[data-ui="brutalism"] { background: #fff !important; color: #000 !important; }
|
|
7952
|
+
[data-ui="brutalism"] * { box-shadow: none !important; text-shadow: none !important; }
|
|
7953
|
+
[data-ui="brutalism"] a { color: #000 !important; text-decoration: underline; }
|
|
7954
|
+
}
|
|
7955
|
+
}
|
|
7956
|
+
|
|
7957
|
+
|
|
7958
|
+
/* styles/cyberpunk.css */
|
|
7839
7959
|
/* =========================================================
|
|
7840
7960
|
Cyberpunk Theme System
|
|
7841
7961
|
Includes:
|
|
@@ -7849,6 +7969,8 @@
|
|
|
7849
7969
|
<body data-ui="cyberpunk" data-theme="midnight-gold" data-mode="contrast">
|
|
7850
7970
|
========================================================= */
|
|
7851
7971
|
|
|
7972
|
+
|
|
7973
|
+
@layer ui-style-kit.cyberpunk {
|
|
7852
7974
|
:root {
|
|
7853
7975
|
--cyber-radius-xs: 0.25rem;
|
|
7854
7976
|
--cyber-radius-sm: 0.5rem;
|
|
@@ -7949,7 +8071,7 @@
|
|
|
7949
8071
|
--cyber-border-rgb: 214 200 165;
|
|
7950
8072
|
--cyber-primary-rgb: 184 135 47;
|
|
7951
8073
|
--cyber-primary-hover-rgb: 148 104 31;
|
|
7952
|
-
--cyber-primary-text-rgb:
|
|
8074
|
+
--cyber-primary-text-rgb: 16 16 16;
|
|
7953
8075
|
--cyber-secondary-rgb: 34 49 79;
|
|
7954
8076
|
--cyber-secondary-hover-rgb: 23 36 60;
|
|
7955
8077
|
--cyber-secondary-text-rgb: 255 255 255;
|
|
@@ -8509,7 +8631,7 @@
|
|
|
8509
8631
|
--cyber-border-rgb: 198 216 179;
|
|
8510
8632
|
--cyber-primary-rgb: 95 159 31;
|
|
8511
8633
|
--cyber-primary-hover-rgb: 73 125 23;
|
|
8512
|
-
--cyber-primary-text-rgb:
|
|
8634
|
+
--cyber-primary-text-rgb: 16 16 16;
|
|
8513
8635
|
--cyber-secondary-rgb: 20 127 134;
|
|
8514
8636
|
--cyber-secondary-hover-rgb: 14 98 104;
|
|
8515
8637
|
--cyber-secondary-text-rgb: 255 255 255;
|
|
@@ -8695,6 +8817,87 @@
|
|
|
8695
8817
|
[data-ui="cyberpunk"] :focus-visible { outline: 3px solid var(--cyber-focus); outline-offset: 3px; } .cyber-button:focus-visible, .cyber-icon-button:focus-visible, .cyber-input:focus-visible, .cyber-nav-link:focus-visible { box-shadow: 0 0 0 3px rgb(var(--cyber-focus-rgb) / .28), 0 0 28px rgb(var(--cyber-focus-rgb) / .28); }
|
|
8696
8818
|
@media (prefers-reduced-motion: reduce) { [data-ui="cyberpunk"] *, [data-ui="cyberpunk"] *::before, [data-ui="cyberpunk"] *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }
|
|
8697
8819
|
|
|
8820
|
+
/* =========================================================
|
|
8821
|
+
Native HTML Coverage + CSS Accessibility Layer
|
|
8822
|
+
========================================================= */
|
|
8823
|
+
|
|
8824
|
+
.cyber-sr-only,
|
|
8825
|
+
.cyber-visually-hidden { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
|
|
8826
|
+
.cyber-skip-link { position: fixed; inset-block-start: 1rem; inset-inline-start: 1rem; z-index: 10000; transform: translateY(-150%); padding: .75rem 1rem; background: var(--cyber-primary); color: var(--cyber-primary-text); border: 1px solid var(--cyber-border); border-radius: var(--cyber-radius-sm); box-shadow: var(--cyber-shadow-md); font-weight: 900; text-decoration: none; }
|
|
8827
|
+
.cyber-skip-link:focus { transform: translateY(0); }
|
|
8828
|
+
.cyber-divider { width: 100%; height: 1px; border: 0; margin: 1.5rem 0; background: var(--cyber-border); }
|
|
8829
|
+
|
|
8830
|
+
[data-ui="cyberpunk"] :where(h1, h2, h3, h4, h5, h6) { color: var(--cyber-text); font-family: var(--cyber-font-display); line-height: 1.15; margin: 0 0 .65em; text-wrap: balance; }
|
|
8831
|
+
[data-ui="cyberpunk"] :where(h1) { font-size: clamp(2rem, 5vw, 3.5rem); }
|
|
8832
|
+
[data-ui="cyberpunk"] :where(h2) { font-size: clamp(1.55rem, 3vw, 2.35rem); }
|
|
8833
|
+
[data-ui="cyberpunk"] :where(h3) { font-size: clamp(1.25rem, 2vw, 1.65rem); }
|
|
8834
|
+
[data-ui="cyberpunk"] :where(p) { margin: 0 0 1rem; color: var(--cyber-text-muted); line-height: 1.7; }
|
|
8835
|
+
[data-ui="cyberpunk"] :where(a) { color: var(--cyber-link); text-decoration-thickness: .08em; text-underline-offset: .18em; }
|
|
8836
|
+
[data-ui="cyberpunk"] :where(a:hover) { color: var(--cyber-primary-hover); }
|
|
8837
|
+
[data-ui="cyberpunk"] :where(ul, ol) { margin: 0 0 1rem; padding-left: 1.35rem; color: var(--cyber-text-muted); }
|
|
8838
|
+
[data-ui="cyberpunk"] :where(li) { margin-block: .25rem; }
|
|
8839
|
+
[data-ui="cyberpunk"] :where(blockquote) { margin: 1.25rem 0; padding: 1rem 1.25rem; color: var(--cyber-text); background: var(--cyber-surface-soft); border-left: .35rem solid var(--cyber-primary); border-radius: var(--cyber-radius-md); }
|
|
8840
|
+
[data-ui="cyberpunk"] :where(code, kbd, samp) { font-family: var(--cyber-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace); font-size: .92em; background: var(--cyber-surface-soft); color: var(--cyber-text); border: 1px solid rgb(var(--cyber-border-rgb) / .45); border-radius: var(--cyber-radius-xs); padding: .15em .35em; }
|
|
8841
|
+
[data-ui="cyberpunk"] :where(pre) { overflow: auto; margin: 1rem 0; padding: 1rem; background: var(--cyber-surface-soft); color: var(--cyber-text); border: 1px solid var(--cyber-border); border-radius: var(--cyber-radius-md); }
|
|
8842
|
+
[data-ui="cyberpunk"] :where(pre code) { display: block; padding: 0; border: 0; background: transparent; }
|
|
8843
|
+
[data-ui="cyberpunk"] :where(hr) { height: 1px; border: 0; margin: 2rem 0; background: var(--cyber-border); }
|
|
8844
|
+
[data-ui="cyberpunk"] :where(mark) { background: rgb(var(--cyber-warning-rgb) / .32); color: var(--cyber-text); border-radius: .2em; padding-inline: .15em; }
|
|
8845
|
+
[data-ui="cyberpunk"] :where(small) { color: var(--cyber-text-muted); }
|
|
8846
|
+
[data-ui="cyberpunk"] :where(abbr[title]) { text-decoration: underline dotted var(--cyber-primary); text-underline-offset: .18em; cursor: help; }
|
|
8847
|
+
[data-ui="cyberpunk"] :where(img, picture, video, canvas, svg, iframe) { max-width: 100%; height: auto; }
|
|
8848
|
+
[data-ui="cyberpunk"] :where(figure) { margin: 1.25rem 0; }
|
|
8849
|
+
[data-ui="cyberpunk"] :where(figcaption) { margin-top: .5rem; color: var(--cyber-text-muted); font-size: .9rem; }
|
|
8850
|
+
[data-ui="cyberpunk"] :where(fieldset) { min-inline-size: 0; margin: 0 0 1rem; padding: 1rem; border: 1px solid var(--cyber-border); border-radius: var(--cyber-radius-md); }
|
|
8851
|
+
[data-ui="cyberpunk"] :where(legend) { padding-inline: .35rem; color: var(--cyber-text); font-weight: 900; }
|
|
8852
|
+
[data-ui="cyberpunk"] :where(label) { color: var(--cyber-text); font-weight: 750; }
|
|
8853
|
+
[data-ui="cyberpunk"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select) { width: 100%; min-height: 2.75rem; padding: .72rem .95rem; background: var(--cyber-surface-soft); color: var(--cyber-text); border: 1px solid var(--cyber-border); border-radius: var(--cyber-radius-md); font: inherit; }
|
|
8854
|
+
[data-ui="cyberpunk"] :where(textarea) { resize: vertical; min-height: 7rem; }
|
|
8855
|
+
[data-ui="cyberpunk"] :where(input, textarea, select, button) { font: inherit; }
|
|
8856
|
+
[data-ui="cyberpunk"] :where(button, input[type="button"], input[type="submit"], input[type="reset"]) { min-height: 2.75rem; padding: .7rem 1rem; background: var(--cyber-primary); color: var(--cyber-primary-text); border: 1px solid var(--cyber-primary); border-radius: var(--cyber-radius-md); font-weight: 850; cursor: pointer; }
|
|
8857
|
+
[data-ui="cyberpunk"] :where(button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover) { background: var(--cyber-primary-hover); border-color: var(--cyber-primary-hover); }
|
|
8858
|
+
[data-ui="cyberpunk"] :where(input[type="checkbox"], input[type="radio"]) { inline-size: 1.1rem; block-size: 1.1rem; accent-color: var(--cyber-primary); }
|
|
8859
|
+
[data-ui="cyberpunk"] :where(input[type="range"]) { width: 100%; accent-color: var(--cyber-primary); }
|
|
8860
|
+
[data-ui="cyberpunk"] :where(input[type="color"]) { inline-size: 3rem; block-size: 2.4rem; padding: .2rem; background: var(--cyber-surface-soft); border: 1px solid var(--cyber-border); border-radius: var(--cyber-radius-sm); }
|
|
8861
|
+
[data-ui="cyberpunk"] :where(input[type="file"]) { color: var(--cyber-text-muted); }
|
|
8862
|
+
[data-ui="cyberpunk"] :where(input[type="file"]::file-selector-button) { margin-inline-end: .75rem; padding: .55rem .8rem; border: 1px solid var(--cyber-primary); border-radius: var(--cyber-radius-sm); background: var(--cyber-primary); color: var(--cyber-primary-text); font-weight: 800; cursor: pointer; }
|
|
8863
|
+
[data-ui="cyberpunk"] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) { opacity: .55; cursor: not-allowed; }
|
|
8864
|
+
[data-ui="cyberpunk"] :where(input:invalid, textarea:invalid, select:invalid, [aria-invalid="true"]) { border-color: var(--cyber-danger); }
|
|
8865
|
+
[data-ui="cyberpunk"] :where(table) { width: 100%; border-collapse: collapse; margin: 1rem 0; background: var(--cyber-surface); border: 1px solid var(--cyber-border); border-radius: var(--cyber-radius-md); overflow: hidden; }
|
|
8866
|
+
[data-ui="cyberpunk"] :where(caption) { caption-side: bottom; padding: .75rem; color: var(--cyber-text-muted); font-size: .9rem; }
|
|
8867
|
+
[data-ui="cyberpunk"] :where(th, td) { padding: .8rem .9rem; text-align: left; border-bottom: 1px solid var(--cyber-border); }
|
|
8868
|
+
[data-ui="cyberpunk"] :where(th) { color: var(--cyber-text); background: rgb(var(--cyber-primary-rgb) / .08); }
|
|
8869
|
+
[data-ui="cyberpunk"] :where(td) { color: var(--cyber-text-muted); }
|
|
8870
|
+
[data-ui="cyberpunk"] :where(details) { margin: 1rem 0; padding: .9rem 1rem; background: var(--cyber-surface); border: 1px solid var(--cyber-border); border-radius: var(--cyber-radius-md); }
|
|
8871
|
+
[data-ui="cyberpunk"] :where(summary) { color: var(--cyber-text); font-weight: 900; cursor: pointer; }
|
|
8872
|
+
[data-ui="cyberpunk"] :where(dialog) { max-width: min(92vw, 42rem); padding: 0; background: var(--cyber-surface-strong); color: var(--cyber-text); border: 1px solid var(--cyber-border); border-radius: var(--cyber-radius-lg); box-shadow: 0 30px 80px rgb(0 0 0 / .42); }
|
|
8873
|
+
[data-ui="cyberpunk"] :where(dialog::backdrop) { background: rgb(0 0 0 / .62); }
|
|
8874
|
+
[data-ui="cyberpunk"] :where(progress, meter) { width: 100%; min-height: .9rem; accent-color: var(--cyber-primary); }
|
|
8875
|
+
[data-ui="cyberpunk"] :where(:focus-visible) { outline: 3px solid var(--cyber-focus); outline-offset: 3px; box-shadow: 0 0 0 4px rgb(var(--cyber-focus-rgb) / .28); }
|
|
8876
|
+
[data-ui="cyberpunk"] :where(:target) { scroll-margin-top: 6rem; outline: 3px solid var(--cyber-focus); outline-offset: .35rem; }
|
|
8877
|
+
[data-ui="cyberpunk"] :where([aria-current="page"]) { font-weight: 900; }
|
|
8878
|
+
[data-ui="cyberpunk"] :where([aria-busy="true"]) { cursor: progress; }
|
|
8879
|
+
[data-ui="cyberpunk"] :where([hidden]) { display: none !important; }
|
|
8880
|
+
[data-ui="cyberpunk"] ::selection { background: var(--cyber-primary); color: var(--cyber-primary-text); }
|
|
8881
|
+
|
|
8882
|
+
@media (prefers-reduced-motion: reduce) {
|
|
8883
|
+
[data-ui="cyberpunk"] *, [data-ui="cyberpunk"] *::before, [data-ui="cyberpunk"] *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
|
|
8884
|
+
}
|
|
8885
|
+
@media (prefers-contrast: more) {
|
|
8886
|
+
[data-ui="cyberpunk"] { --cyber-border-alpha: 1; }
|
|
8887
|
+
}
|
|
8888
|
+
@media (forced-colors: active) {
|
|
8889
|
+
[data-ui="cyberpunk"] * { forced-color-adjust: auto; }
|
|
8890
|
+
[data-ui="cyberpunk"] :where(:focus-visible) { outline: 3px solid CanvasText; box-shadow: none; }
|
|
8891
|
+
}
|
|
8892
|
+
@media print {
|
|
8893
|
+
[data-ui="cyberpunk"] { background: #fff !important; color: #000 !important; }
|
|
8894
|
+
[data-ui="cyberpunk"] * { box-shadow: none !important; text-shadow: none !important; }
|
|
8895
|
+
[data-ui="cyberpunk"] a { color: #000 !important; text-decoration: underline; }
|
|
8896
|
+
}
|
|
8897
|
+
}
|
|
8898
|
+
|
|
8899
|
+
|
|
8900
|
+
/* styles/y2k.css */
|
|
8698
8901
|
/* =========================================================
|
|
8699
8902
|
Y2K Theme System
|
|
8700
8903
|
Includes:
|
|
@@ -8708,6 +8911,8 @@
|
|
|
8708
8911
|
<body data-ui="y2k" data-theme="midnight-gold" data-mode="contrast">
|
|
8709
8912
|
========================================================= */
|
|
8710
8913
|
|
|
8914
|
+
|
|
8915
|
+
@layer ui-style-kit.y2k {
|
|
8711
8916
|
:root {
|
|
8712
8917
|
--y2k-radius-xs: 0.25rem;
|
|
8713
8918
|
--y2k-radius-sm: 0.5rem;
|
|
@@ -8808,7 +9013,7 @@
|
|
|
8808
9013
|
--y2k-border-rgb: 214 200 165;
|
|
8809
9014
|
--y2k-primary-rgb: 184 135 47;
|
|
8810
9015
|
--y2k-primary-hover-rgb: 148 104 31;
|
|
8811
|
-
--y2k-primary-text-rgb:
|
|
9016
|
+
--y2k-primary-text-rgb: 16 16 16;
|
|
8812
9017
|
--y2k-secondary-rgb: 34 49 79;
|
|
8813
9018
|
--y2k-secondary-hover-rgb: 23 36 60;
|
|
8814
9019
|
--y2k-secondary-text-rgb: 255 255 255;
|
|
@@ -9368,7 +9573,7 @@
|
|
|
9368
9573
|
--y2k-border-rgb: 198 216 179;
|
|
9369
9574
|
--y2k-primary-rgb: 95 159 31;
|
|
9370
9575
|
--y2k-primary-hover-rgb: 73 125 23;
|
|
9371
|
-
--y2k-primary-text-rgb:
|
|
9576
|
+
--y2k-primary-text-rgb: 16 16 16;
|
|
9372
9577
|
--y2k-secondary-rgb: 20 127 134;
|
|
9373
9578
|
--y2k-secondary-hover-rgb: 14 98 104;
|
|
9374
9579
|
--y2k-secondary-text-rgb: 255 255 255;
|
|
@@ -9535,6 +9740,87 @@
|
|
|
9535
9740
|
[data-ui="y2k"] :focus-visible { outline: 3px solid var(--y2k-focus); outline-offset: 3px; }
|
|
9536
9741
|
@media (prefers-reduced-motion: reduce) { [data-ui="y2k"] *, [data-ui="y2k"] *::before, [data-ui="y2k"] *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }
|
|
9537
9742
|
|
|
9743
|
+
/* =========================================================
|
|
9744
|
+
Native HTML Coverage + CSS Accessibility Layer
|
|
9745
|
+
========================================================= */
|
|
9746
|
+
|
|
9747
|
+
.y2k-sr-only,
|
|
9748
|
+
.y2k-visually-hidden { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
|
|
9749
|
+
.y2k-skip-link { position: fixed; inset-block-start: 1rem; inset-inline-start: 1rem; z-index: 10000; transform: translateY(-150%); padding: .75rem 1rem; background: var(--y2k-primary); color: var(--y2k-primary-text); border: 1px solid var(--y2k-border); border-radius: var(--y2k-radius-sm); box-shadow: var(--y2k-shadow-md); font-weight: 900; text-decoration: none; }
|
|
9750
|
+
.y2k-skip-link:focus { transform: translateY(0); }
|
|
9751
|
+
.y2k-divider { width: 100%; height: 1px; border: 0; margin: 1.5rem 0; background: var(--y2k-border); }
|
|
9752
|
+
|
|
9753
|
+
[data-ui="y2k"] :where(h1, h2, h3, h4, h5, h6) { color: var(--y2k-text); font-family: var(--y2k-font-display); line-height: 1.15; margin: 0 0 .65em; text-wrap: balance; }
|
|
9754
|
+
[data-ui="y2k"] :where(h1) { font-size: clamp(2rem, 5vw, 3.5rem); }
|
|
9755
|
+
[data-ui="y2k"] :where(h2) { font-size: clamp(1.55rem, 3vw, 2.35rem); }
|
|
9756
|
+
[data-ui="y2k"] :where(h3) { font-size: clamp(1.25rem, 2vw, 1.65rem); }
|
|
9757
|
+
[data-ui="y2k"] :where(p) { margin: 0 0 1rem; color: var(--y2k-text-muted); line-height: 1.7; }
|
|
9758
|
+
[data-ui="y2k"] :where(a) { color: var(--y2k-link); text-decoration-thickness: .08em; text-underline-offset: .18em; }
|
|
9759
|
+
[data-ui="y2k"] :where(a:hover) { color: var(--y2k-primary-hover); }
|
|
9760
|
+
[data-ui="y2k"] :where(ul, ol) { margin: 0 0 1rem; padding-left: 1.35rem; color: var(--y2k-text-muted); }
|
|
9761
|
+
[data-ui="y2k"] :where(li) { margin-block: .25rem; }
|
|
9762
|
+
[data-ui="y2k"] :where(blockquote) { margin: 1.25rem 0; padding: 1rem 1.25rem; color: var(--y2k-text); background: var(--y2k-surface-soft); border-left: .35rem solid var(--y2k-primary); border-radius: var(--y2k-radius-md); }
|
|
9763
|
+
[data-ui="y2k"] :where(code, kbd, samp) { font-family: var(--y2k-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace); font-size: .92em; background: var(--y2k-surface-soft); color: var(--y2k-text); border: 1px solid rgb(var(--y2k-border-rgb) / .45); border-radius: var(--y2k-radius-xs); padding: .15em .35em; }
|
|
9764
|
+
[data-ui="y2k"] :where(pre) { overflow: auto; margin: 1rem 0; padding: 1rem; background: var(--y2k-surface-soft); color: var(--y2k-text); border: 1px solid var(--y2k-border); border-radius: var(--y2k-radius-md); }
|
|
9765
|
+
[data-ui="y2k"] :where(pre code) { display: block; padding: 0; border: 0; background: transparent; }
|
|
9766
|
+
[data-ui="y2k"] :where(hr) { height: 1px; border: 0; margin: 2rem 0; background: var(--y2k-border); }
|
|
9767
|
+
[data-ui="y2k"] :where(mark) { background: rgb(var(--y2k-warning-rgb) / .32); color: var(--y2k-text); border-radius: .2em; padding-inline: .15em; }
|
|
9768
|
+
[data-ui="y2k"] :where(small) { color: var(--y2k-text-muted); }
|
|
9769
|
+
[data-ui="y2k"] :where(abbr[title]) { text-decoration: underline dotted var(--y2k-primary); text-underline-offset: .18em; cursor: help; }
|
|
9770
|
+
[data-ui="y2k"] :where(img, picture, video, canvas, svg, iframe) { max-width: 100%; height: auto; }
|
|
9771
|
+
[data-ui="y2k"] :where(figure) { margin: 1.25rem 0; }
|
|
9772
|
+
[data-ui="y2k"] :where(figcaption) { margin-top: .5rem; color: var(--y2k-text-muted); font-size: .9rem; }
|
|
9773
|
+
[data-ui="y2k"] :where(fieldset) { min-inline-size: 0; margin: 0 0 1rem; padding: 1rem; border: 1px solid var(--y2k-border); border-radius: var(--y2k-radius-md); }
|
|
9774
|
+
[data-ui="y2k"] :where(legend) { padding-inline: .35rem; color: var(--y2k-text); font-weight: 900; }
|
|
9775
|
+
[data-ui="y2k"] :where(label) { color: var(--y2k-text); font-weight: 750; }
|
|
9776
|
+
[data-ui="y2k"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select) { width: 100%; min-height: 2.75rem; padding: .72rem .95rem; background: var(--y2k-surface-soft); color: var(--y2k-text); border: 1px solid var(--y2k-border); border-radius: var(--y2k-radius-md); font: inherit; }
|
|
9777
|
+
[data-ui="y2k"] :where(textarea) { resize: vertical; min-height: 7rem; }
|
|
9778
|
+
[data-ui="y2k"] :where(input, textarea, select, button) { font: inherit; }
|
|
9779
|
+
[data-ui="y2k"] :where(button, input[type="button"], input[type="submit"], input[type="reset"]) { min-height: 2.75rem; padding: .7rem 1rem; background: var(--y2k-primary); color: var(--y2k-primary-text); border: 1px solid var(--y2k-primary); border-radius: var(--y2k-radius-md); font-weight: 850; cursor: pointer; }
|
|
9780
|
+
[data-ui="y2k"] :where(button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover) { background: var(--y2k-primary-hover); border-color: var(--y2k-primary-hover); }
|
|
9781
|
+
[data-ui="y2k"] :where(input[type="checkbox"], input[type="radio"]) { inline-size: 1.1rem; block-size: 1.1rem; accent-color: var(--y2k-primary); }
|
|
9782
|
+
[data-ui="y2k"] :where(input[type="range"]) { width: 100%; accent-color: var(--y2k-primary); }
|
|
9783
|
+
[data-ui="y2k"] :where(input[type="color"]) { inline-size: 3rem; block-size: 2.4rem; padding: .2rem; background: var(--y2k-surface-soft); border: 1px solid var(--y2k-border); border-radius: var(--y2k-radius-sm); }
|
|
9784
|
+
[data-ui="y2k"] :where(input[type="file"]) { color: var(--y2k-text-muted); }
|
|
9785
|
+
[data-ui="y2k"] :where(input[type="file"]::file-selector-button) { margin-inline-end: .75rem; padding: .55rem .8rem; border: 1px solid var(--y2k-primary); border-radius: var(--y2k-radius-sm); background: var(--y2k-primary); color: var(--y2k-primary-text); font-weight: 800; cursor: pointer; }
|
|
9786
|
+
[data-ui="y2k"] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) { opacity: .55; cursor: not-allowed; }
|
|
9787
|
+
[data-ui="y2k"] :where(input:invalid, textarea:invalid, select:invalid, [aria-invalid="true"]) { border-color: var(--y2k-danger); }
|
|
9788
|
+
[data-ui="y2k"] :where(table) { width: 100%; border-collapse: collapse; margin: 1rem 0; background: var(--y2k-surface); border: 1px solid var(--y2k-border); border-radius: var(--y2k-radius-md); overflow: hidden; }
|
|
9789
|
+
[data-ui="y2k"] :where(caption) { caption-side: bottom; padding: .75rem; color: var(--y2k-text-muted); font-size: .9rem; }
|
|
9790
|
+
[data-ui="y2k"] :where(th, td) { padding: .8rem .9rem; text-align: left; border-bottom: 1px solid var(--y2k-border); }
|
|
9791
|
+
[data-ui="y2k"] :where(th) { color: var(--y2k-text); background: rgb(var(--y2k-primary-rgb) / .08); }
|
|
9792
|
+
[data-ui="y2k"] :where(td) { color: var(--y2k-text-muted); }
|
|
9793
|
+
[data-ui="y2k"] :where(details) { margin: 1rem 0; padding: .9rem 1rem; background: var(--y2k-surface); border: 1px solid var(--y2k-border); border-radius: var(--y2k-radius-md); }
|
|
9794
|
+
[data-ui="y2k"] :where(summary) { color: var(--y2k-text); font-weight: 900; cursor: pointer; }
|
|
9795
|
+
[data-ui="y2k"] :where(dialog) { max-width: min(92vw, 42rem); padding: 0; background: var(--y2k-surface-strong); color: var(--y2k-text); border: 1px solid var(--y2k-border); border-radius: var(--y2k-radius-lg); box-shadow: 0 30px 80px rgb(0 0 0 / .42); }
|
|
9796
|
+
[data-ui="y2k"] :where(dialog::backdrop) { background: rgb(0 0 0 / .62); }
|
|
9797
|
+
[data-ui="y2k"] :where(progress, meter) { width: 100%; min-height: .9rem; accent-color: var(--y2k-primary); }
|
|
9798
|
+
[data-ui="y2k"] :where(:focus-visible) { outline: 3px solid var(--y2k-focus); outline-offset: 3px; box-shadow: 0 0 0 4px rgb(var(--y2k-focus-rgb) / .28); }
|
|
9799
|
+
[data-ui="y2k"] :where(:target) { scroll-margin-top: 6rem; outline: 3px solid var(--y2k-focus); outline-offset: .35rem; }
|
|
9800
|
+
[data-ui="y2k"] :where([aria-current="page"]) { font-weight: 900; }
|
|
9801
|
+
[data-ui="y2k"] :where([aria-busy="true"]) { cursor: progress; }
|
|
9802
|
+
[data-ui="y2k"] :where([hidden]) { display: none !important; }
|
|
9803
|
+
[data-ui="y2k"] ::selection { background: var(--y2k-primary); color: var(--y2k-primary-text); }
|
|
9804
|
+
|
|
9805
|
+
@media (prefers-reduced-motion: reduce) {
|
|
9806
|
+
[data-ui="y2k"] *, [data-ui="y2k"] *::before, [data-ui="y2k"] *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
|
|
9807
|
+
}
|
|
9808
|
+
@media (prefers-contrast: more) {
|
|
9809
|
+
[data-ui="y2k"] { --y2k-border-alpha: 1; }
|
|
9810
|
+
}
|
|
9811
|
+
@media (forced-colors: active) {
|
|
9812
|
+
[data-ui="y2k"] * { forced-color-adjust: auto; }
|
|
9813
|
+
[data-ui="y2k"] :where(:focus-visible) { outline: 3px solid CanvasText; box-shadow: none; }
|
|
9814
|
+
}
|
|
9815
|
+
@media print {
|
|
9816
|
+
[data-ui="y2k"] { background: #fff !important; color: #000 !important; }
|
|
9817
|
+
[data-ui="y2k"] * { box-shadow: none !important; text-shadow: none !important; }
|
|
9818
|
+
[data-ui="y2k"] a { color: #000 !important; text-decoration: underline; }
|
|
9819
|
+
}
|
|
9820
|
+
}
|
|
9821
|
+
|
|
9822
|
+
|
|
9823
|
+
/* styles/retro-glass.css */
|
|
9538
9824
|
/* =========================================================
|
|
9539
9825
|
Glassmorphism + Retrofuturism Hybrid Theme System
|
|
9540
9826
|
Includes:
|
|
@@ -9548,6 +9834,8 @@
|
|
|
9548
9834
|
<body data-ui="retro-glass" data-theme="midnight-gold" data-mode="contrast">
|
|
9549
9835
|
========================================================= */
|
|
9550
9836
|
|
|
9837
|
+
|
|
9838
|
+
@layer ui-style-kit.retro_glass {
|
|
9551
9839
|
:root {
|
|
9552
9840
|
--rg-radius-xs: 0.25rem;
|
|
9553
9841
|
--rg-radius-sm: 0.5rem;
|
|
@@ -9648,7 +9936,7 @@
|
|
|
9648
9936
|
--rg-border-rgb: 214 200 165;
|
|
9649
9937
|
--rg-primary-rgb: 184 135 47;
|
|
9650
9938
|
--rg-primary-hover-rgb: 148 104 31;
|
|
9651
|
-
--rg-primary-text-rgb:
|
|
9939
|
+
--rg-primary-text-rgb: 16 16 16;
|
|
9652
9940
|
--rg-secondary-rgb: 34 49 79;
|
|
9653
9941
|
--rg-secondary-hover-rgb: 23 36 60;
|
|
9654
9942
|
--rg-secondary-text-rgb: 255 255 255;
|
|
@@ -10208,7 +10496,7 @@
|
|
|
10208
10496
|
--rg-border-rgb: 198 216 179;
|
|
10209
10497
|
--rg-primary-rgb: 95 159 31;
|
|
10210
10498
|
--rg-primary-hover-rgb: 73 125 23;
|
|
10211
|
-
--rg-primary-text-rgb:
|
|
10499
|
+
--rg-primary-text-rgb: 16 16 16;
|
|
10212
10500
|
--rg-secondary-rgb: 20 127 134;
|
|
10213
10501
|
--rg-secondary-hover-rgb: 14 98 104;
|
|
10214
10502
|
--rg-secondary-text-rgb: 255 255 255;
|
|
@@ -10375,3 +10663,426 @@
|
|
|
10375
10663
|
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { [data-ui="retro-glass"] { --rg-panel-alpha: .96; --rg-panel-strong-alpha: 1; --rg-panel-soft-alpha: .9; } }
|
|
10376
10664
|
[data-ui="retro-glass"] :focus-visible { outline: 3px solid var(--rg-focus); outline-offset: 3px; }
|
|
10377
10665
|
@media (prefers-reduced-motion: reduce) { [data-ui="retro-glass"] *, [data-ui="retro-glass"] *::before, [data-ui="retro-glass"] *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }
|
|
10666
|
+
|
|
10667
|
+
/* =========================================================
|
|
10668
|
+
Native HTML Coverage + CSS Accessibility Layer
|
|
10669
|
+
========================================================= */
|
|
10670
|
+
|
|
10671
|
+
.rg-sr-only,
|
|
10672
|
+
.rg-visually-hidden { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
|
|
10673
|
+
.rg-skip-link { position: fixed; inset-block-start: 1rem; inset-inline-start: 1rem; z-index: 10000; transform: translateY(-150%); padding: .75rem 1rem; background: var(--rg-primary); color: var(--rg-primary-text); border: 1px solid var(--rg-border); border-radius: var(--rg-radius-sm); box-shadow: var(--rg-shadow-md); font-weight: 900; text-decoration: none; }
|
|
10674
|
+
.rg-skip-link:focus { transform: translateY(0); }
|
|
10675
|
+
.rg-divider { width: 100%; height: 1px; border: 0; margin: 1.5rem 0; background: var(--rg-border); }
|
|
10676
|
+
|
|
10677
|
+
[data-ui="retro-glass"] :where(h1, h2, h3, h4, h5, h6) { color: var(--rg-text); font-family: var(--rg-font-display); line-height: 1.15; margin: 0 0 .65em; text-wrap: balance; }
|
|
10678
|
+
[data-ui="retro-glass"] :where(h1) { font-size: clamp(2rem, 5vw, 3.5rem); }
|
|
10679
|
+
[data-ui="retro-glass"] :where(h2) { font-size: clamp(1.55rem, 3vw, 2.35rem); }
|
|
10680
|
+
[data-ui="retro-glass"] :where(h3) { font-size: clamp(1.25rem, 2vw, 1.65rem); }
|
|
10681
|
+
[data-ui="retro-glass"] :where(p) { margin: 0 0 1rem; color: var(--rg-text-muted); line-height: 1.7; }
|
|
10682
|
+
[data-ui="retro-glass"] :where(a) { color: var(--rg-link); text-decoration-thickness: .08em; text-underline-offset: .18em; }
|
|
10683
|
+
[data-ui="retro-glass"] :where(a:hover) { color: var(--rg-primary-hover); }
|
|
10684
|
+
[data-ui="retro-glass"] :where(ul, ol) { margin: 0 0 1rem; padding-left: 1.35rem; color: var(--rg-text-muted); }
|
|
10685
|
+
[data-ui="retro-glass"] :where(li) { margin-block: .25rem; }
|
|
10686
|
+
[data-ui="retro-glass"] :where(blockquote) { margin: 1.25rem 0; padding: 1rem 1.25rem; color: var(--rg-text); background: var(--rg-surface-soft); border-left: .35rem solid var(--rg-primary); border-radius: var(--rg-radius-md); }
|
|
10687
|
+
[data-ui="retro-glass"] :where(code, kbd, samp) { font-family: var(--rg-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace); font-size: .92em; background: var(--rg-surface-soft); color: var(--rg-text); border: 1px solid rgb(var(--rg-border-rgb) / .45); border-radius: var(--rg-radius-xs); padding: .15em .35em; }
|
|
10688
|
+
[data-ui="retro-glass"] :where(pre) { overflow: auto; margin: 1rem 0; padding: 1rem; background: var(--rg-surface-soft); color: var(--rg-text); border: 1px solid var(--rg-border); border-radius: var(--rg-radius-md); }
|
|
10689
|
+
[data-ui="retro-glass"] :where(pre code) { display: block; padding: 0; border: 0; background: transparent; }
|
|
10690
|
+
[data-ui="retro-glass"] :where(hr) { height: 1px; border: 0; margin: 2rem 0; background: var(--rg-border); }
|
|
10691
|
+
[data-ui="retro-glass"] :where(mark) { background: rgb(var(--rg-warning-rgb) / .32); color: var(--rg-text); border-radius: .2em; padding-inline: .15em; }
|
|
10692
|
+
[data-ui="retro-glass"] :where(small) { color: var(--rg-text-muted); }
|
|
10693
|
+
[data-ui="retro-glass"] :where(abbr[title]) { text-decoration: underline dotted var(--rg-primary); text-underline-offset: .18em; cursor: help; }
|
|
10694
|
+
[data-ui="retro-glass"] :where(img, picture, video, canvas, svg, iframe) { max-width: 100%; height: auto; }
|
|
10695
|
+
[data-ui="retro-glass"] :where(figure) { margin: 1.25rem 0; }
|
|
10696
|
+
[data-ui="retro-glass"] :where(figcaption) { margin-top: .5rem; color: var(--rg-text-muted); font-size: .9rem; }
|
|
10697
|
+
[data-ui="retro-glass"] :where(fieldset) { min-inline-size: 0; margin: 0 0 1rem; padding: 1rem; border: 1px solid var(--rg-border); border-radius: var(--rg-radius-md); }
|
|
10698
|
+
[data-ui="retro-glass"] :where(legend) { padding-inline: .35rem; color: var(--rg-text); font-weight: 900; }
|
|
10699
|
+
[data-ui="retro-glass"] :where(label) { color: var(--rg-text); font-weight: 750; }
|
|
10700
|
+
[data-ui="retro-glass"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select) { width: 100%; min-height: 2.75rem; padding: .72rem .95rem; background: var(--rg-surface-soft); color: var(--rg-text); border: 1px solid var(--rg-border); border-radius: var(--rg-radius-md); font: inherit; }
|
|
10701
|
+
[data-ui="retro-glass"] :where(textarea) { resize: vertical; min-height: 7rem; }
|
|
10702
|
+
[data-ui="retro-glass"] :where(input, textarea, select, button) { font: inherit; }
|
|
10703
|
+
[data-ui="retro-glass"] :where(button, input[type="button"], input[type="submit"], input[type="reset"]) { min-height: 2.75rem; padding: .7rem 1rem; background: var(--rg-primary); color: var(--rg-primary-text); border: 1px solid var(--rg-primary); border-radius: var(--rg-radius-md); font-weight: 850; cursor: pointer; }
|
|
10704
|
+
[data-ui="retro-glass"] :where(button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover) { background: var(--rg-primary-hover); border-color: var(--rg-primary-hover); }
|
|
10705
|
+
[data-ui="retro-glass"] :where(input[type="checkbox"], input[type="radio"]) { inline-size: 1.1rem; block-size: 1.1rem; accent-color: var(--rg-primary); }
|
|
10706
|
+
[data-ui="retro-glass"] :where(input[type="range"]) { width: 100%; accent-color: var(--rg-primary); }
|
|
10707
|
+
[data-ui="retro-glass"] :where(input[type="color"]) { inline-size: 3rem; block-size: 2.4rem; padding: .2rem; background: var(--rg-surface-soft); border: 1px solid var(--rg-border); border-radius: var(--rg-radius-sm); }
|
|
10708
|
+
[data-ui="retro-glass"] :where(input[type="file"]) { color: var(--rg-text-muted); }
|
|
10709
|
+
[data-ui="retro-glass"] :where(input[type="file"]::file-selector-button) { margin-inline-end: .75rem; padding: .55rem .8rem; border: 1px solid var(--rg-primary); border-radius: var(--rg-radius-sm); background: var(--rg-primary); color: var(--rg-primary-text); font-weight: 800; cursor: pointer; }
|
|
10710
|
+
[data-ui="retro-glass"] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) { opacity: .55; cursor: not-allowed; }
|
|
10711
|
+
[data-ui="retro-glass"] :where(input:invalid, textarea:invalid, select:invalid, [aria-invalid="true"]) { border-color: var(--rg-danger); }
|
|
10712
|
+
[data-ui="retro-glass"] :where(table) { width: 100%; border-collapse: collapse; margin: 1rem 0; background: var(--rg-surface); border: 1px solid var(--rg-border); border-radius: var(--rg-radius-md); overflow: hidden; }
|
|
10713
|
+
[data-ui="retro-glass"] :where(caption) { caption-side: bottom; padding: .75rem; color: var(--rg-text-muted); font-size: .9rem; }
|
|
10714
|
+
[data-ui="retro-glass"] :where(th, td) { padding: .8rem .9rem; text-align: left; border-bottom: 1px solid var(--rg-border); }
|
|
10715
|
+
[data-ui="retro-glass"] :where(th) { color: var(--rg-text); background: rgb(var(--rg-primary-rgb) / .08); }
|
|
10716
|
+
[data-ui="retro-glass"] :where(td) { color: var(--rg-text-muted); }
|
|
10717
|
+
[data-ui="retro-glass"] :where(details) { margin: 1rem 0; padding: .9rem 1rem; background: var(--rg-surface); border: 1px solid var(--rg-border); border-radius: var(--rg-radius-md); }
|
|
10718
|
+
[data-ui="retro-glass"] :where(summary) { color: var(--rg-text); font-weight: 900; cursor: pointer; }
|
|
10719
|
+
[data-ui="retro-glass"] :where(dialog) { max-width: min(92vw, 42rem); padding: 0; background: var(--rg-surface-strong); color: var(--rg-text); border: 1px solid var(--rg-border); border-radius: var(--rg-radius-lg); box-shadow: 0 30px 80px rgb(0 0 0 / .42); }
|
|
10720
|
+
[data-ui="retro-glass"] :where(dialog::backdrop) { background: rgb(0 0 0 / .62); }
|
|
10721
|
+
[data-ui="retro-glass"] :where(progress, meter) { width: 100%; min-height: .9rem; accent-color: var(--rg-primary); }
|
|
10722
|
+
[data-ui="retro-glass"] :where(:focus-visible) { outline: 3px solid var(--rg-focus); outline-offset: 3px; box-shadow: 0 0 0 4px rgb(var(--rg-focus-rgb) / .28); }
|
|
10723
|
+
[data-ui="retro-glass"] :where(:target) { scroll-margin-top: 6rem; outline: 3px solid var(--rg-focus); outline-offset: .35rem; }
|
|
10724
|
+
[data-ui="retro-glass"] :where([aria-current="page"]) { font-weight: 900; }
|
|
10725
|
+
[data-ui="retro-glass"] :where([aria-busy="true"]) { cursor: progress; }
|
|
10726
|
+
[data-ui="retro-glass"] :where([hidden]) { display: none !important; }
|
|
10727
|
+
[data-ui="retro-glass"] ::selection { background: var(--rg-primary); color: var(--rg-primary-text); }
|
|
10728
|
+
|
|
10729
|
+
@media (prefers-reduced-motion: reduce) {
|
|
10730
|
+
[data-ui="retro-glass"] *, [data-ui="retro-glass"] *::before, [data-ui="retro-glass"] *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
|
|
10731
|
+
}
|
|
10732
|
+
@media (prefers-contrast: more) {
|
|
10733
|
+
[data-ui="retro-glass"] { --rg-border-alpha: 1; }
|
|
10734
|
+
}
|
|
10735
|
+
@media (forced-colors: active) {
|
|
10736
|
+
[data-ui="retro-glass"] * { forced-color-adjust: auto; }
|
|
10737
|
+
[data-ui="retro-glass"] :where(:focus-visible) { outline: 3px solid CanvasText; box-shadow: none; }
|
|
10738
|
+
}
|
|
10739
|
+
@media print {
|
|
10740
|
+
[data-ui="retro-glass"] { background: #fff !important; color: #000 !important; }
|
|
10741
|
+
[data-ui="retro-glass"] * { box-shadow: none !important; text-shadow: none !important; }
|
|
10742
|
+
[data-ui="retro-glass"] a { color: #000 !important; text-decoration: underline; }
|
|
10743
|
+
}
|
|
10744
|
+
}
|
|
10745
|
+
|
|
10746
|
+
|
|
10747
|
+
/* styles/interactive-surface-bridge.css */
|
|
10748
|
+
/* =========================================================
|
|
10749
|
+
UI Style Kit CSS x Interactive Surface CSS Bridge
|
|
10750
|
+
|
|
10751
|
+
This optional bridge maps UI Style Kit semantic tokens to
|
|
10752
|
+
interactive-surface-css tokens so both libraries can be
|
|
10753
|
+
used together without per-theme overrides.
|
|
10754
|
+
========================================================= */
|
|
10755
|
+
|
|
10756
|
+
:where([data-ui][data-theme][data-mode]) .interactive-surface {
|
|
10757
|
+
--interactive-surface-border-width: 1px;
|
|
10758
|
+
}
|
|
10759
|
+
|
|
10760
|
+
:where([data-ui="minimal-saas"][data-theme][data-mode]) .interactive-surface {
|
|
10761
|
+
--interactive-surface-bg: var(--saas-surface-strong, var(--saas-surface, var(--saas-bg)));
|
|
10762
|
+
--interactive-surface-fg: var(--saas-text);
|
|
10763
|
+
--interactive-surface-border-color: var(--saas-border);
|
|
10764
|
+
--interactive-surface-focus-ring-color: var(--saas-focus, var(--saas-accent, var(--saas-primary)));
|
|
10765
|
+
--interactive-surface-radius: var(--saas-radius-md, 0.75rem);
|
|
10766
|
+
--interactive-surface-state-layer-color: var(--saas-text);
|
|
10767
|
+
--interactive-surface-light-icon-color: var(--saas-warning, var(--saas-accent));
|
|
10768
|
+
--interactive-surface-dark-icon-color: var(--saas-text);
|
|
10769
|
+
--interactive-surface-accessibility-icon-color: var(--saas-focus, var(--saas-accent));
|
|
10770
|
+
--interactive-surface-light-icon-color-dark: var(--saas-warning, var(--saas-accent));
|
|
10771
|
+
--interactive-surface-dark-icon-color-dark: var(--saas-text);
|
|
10772
|
+
--interactive-surface-accessibility-icon-color-dark: var(--saas-focus, var(--saas-accent));
|
|
10773
|
+
--interactive-surface-variant-primary-bg: var(--saas-primary);
|
|
10774
|
+
--interactive-surface-variant-primary-fg: var(--saas-primary-text, var(--saas-bg));
|
|
10775
|
+
--interactive-surface-variant-primary-border-color: var(--saas-primary);
|
|
10776
|
+
--interactive-surface-variant-secondary-bg: var(--saas-secondary);
|
|
10777
|
+
--interactive-surface-variant-secondary-fg: var(--saas-secondary-text, var(--saas-bg));
|
|
10778
|
+
--interactive-surface-variant-secondary-border-color: var(--saas-secondary);
|
|
10779
|
+
--interactive-surface-variant-accent-bg: var(--saas-accent);
|
|
10780
|
+
--interactive-surface-variant-accent-border-color: var(--saas-accent);
|
|
10781
|
+
--interactive-surface-variant-subtle-bg: var(--saas-surface-soft, var(--saas-surface));
|
|
10782
|
+
--interactive-surface-variant-subtle-fg: var(--saas-text);
|
|
10783
|
+
--interactive-surface-variant-subtle-border-color: var(--saas-border);
|
|
10784
|
+
--interactive-surface-variant-warning-bg: var(--saas-warning);
|
|
10785
|
+
--interactive-surface-variant-warning-border-color: var(--saas-warning);
|
|
10786
|
+
--interactive-surface-variant-danger-bg: var(--saas-danger);
|
|
10787
|
+
--interactive-surface-variant-danger-border-color: var(--saas-danger);
|
|
10788
|
+
}
|
|
10789
|
+
|
|
10790
|
+
:where([data-ui="bento"][data-theme][data-mode]) .interactive-surface {
|
|
10791
|
+
--interactive-surface-bg: var(--bento-surface-strong, var(--bento-surface, var(--bento-bg)));
|
|
10792
|
+
--interactive-surface-fg: var(--bento-text);
|
|
10793
|
+
--interactive-surface-border-color: var(--bento-border);
|
|
10794
|
+
--interactive-surface-focus-ring-color: var(--bento-focus, var(--bento-accent, var(--bento-primary)));
|
|
10795
|
+
--interactive-surface-radius: var(--bento-radius-md, 0.75rem);
|
|
10796
|
+
--interactive-surface-state-layer-color: var(--bento-text);
|
|
10797
|
+
--interactive-surface-light-icon-color: var(--bento-warning, var(--bento-accent));
|
|
10798
|
+
--interactive-surface-dark-icon-color: var(--bento-text);
|
|
10799
|
+
--interactive-surface-accessibility-icon-color: var(--bento-focus, var(--bento-accent));
|
|
10800
|
+
--interactive-surface-light-icon-color-dark: var(--bento-warning, var(--bento-accent));
|
|
10801
|
+
--interactive-surface-dark-icon-color-dark: var(--bento-text);
|
|
10802
|
+
--interactive-surface-accessibility-icon-color-dark: var(--bento-focus, var(--bento-accent));
|
|
10803
|
+
--interactive-surface-variant-primary-bg: var(--bento-primary);
|
|
10804
|
+
--interactive-surface-variant-primary-fg: var(--bento-primary-text, var(--bento-bg));
|
|
10805
|
+
--interactive-surface-variant-primary-border-color: var(--bento-primary);
|
|
10806
|
+
--interactive-surface-variant-secondary-bg: var(--bento-secondary);
|
|
10807
|
+
--interactive-surface-variant-secondary-fg: var(--bento-secondary-text, var(--bento-bg));
|
|
10808
|
+
--interactive-surface-variant-secondary-border-color: var(--bento-secondary);
|
|
10809
|
+
--interactive-surface-variant-accent-bg: var(--bento-accent);
|
|
10810
|
+
--interactive-surface-variant-accent-border-color: var(--bento-accent);
|
|
10811
|
+
--interactive-surface-variant-subtle-bg: var(--bento-surface-soft, var(--bento-surface));
|
|
10812
|
+
--interactive-surface-variant-subtle-fg: var(--bento-text);
|
|
10813
|
+
--interactive-surface-variant-subtle-border-color: var(--bento-border);
|
|
10814
|
+
--interactive-surface-variant-warning-bg: var(--bento-warning);
|
|
10815
|
+
--interactive-surface-variant-warning-border-color: var(--bento-warning);
|
|
10816
|
+
--interactive-surface-variant-danger-bg: var(--bento-danger);
|
|
10817
|
+
--interactive-surface-variant-danger-border-color: var(--bento-danger);
|
|
10818
|
+
}
|
|
10819
|
+
|
|
10820
|
+
:where([data-ui="maximalist"][data-theme][data-mode]) .interactive-surface {
|
|
10821
|
+
--interactive-surface-bg: var(--max-surface-strong, var(--max-surface, var(--max-bg)));
|
|
10822
|
+
--interactive-surface-fg: var(--max-text);
|
|
10823
|
+
--interactive-surface-border-color: var(--max-border);
|
|
10824
|
+
--interactive-surface-focus-ring-color: var(--max-focus, var(--max-accent, var(--max-primary)));
|
|
10825
|
+
--interactive-surface-radius: var(--max-radius-md, 0.75rem);
|
|
10826
|
+
--interactive-surface-state-layer-color: var(--max-text);
|
|
10827
|
+
--interactive-surface-light-icon-color: var(--max-warning, var(--max-accent));
|
|
10828
|
+
--interactive-surface-dark-icon-color: var(--max-text);
|
|
10829
|
+
--interactive-surface-accessibility-icon-color: var(--max-focus, var(--max-accent));
|
|
10830
|
+
--interactive-surface-light-icon-color-dark: var(--max-warning, var(--max-accent));
|
|
10831
|
+
--interactive-surface-dark-icon-color-dark: var(--max-text);
|
|
10832
|
+
--interactive-surface-accessibility-icon-color-dark: var(--max-focus, var(--max-accent));
|
|
10833
|
+
--interactive-surface-variant-primary-bg: var(--max-primary);
|
|
10834
|
+
--interactive-surface-variant-primary-fg: var(--max-primary-text, var(--max-bg));
|
|
10835
|
+
--interactive-surface-variant-primary-border-color: var(--max-primary);
|
|
10836
|
+
--interactive-surface-variant-secondary-bg: var(--max-secondary);
|
|
10837
|
+
--interactive-surface-variant-secondary-fg: var(--max-secondary-text, var(--max-bg));
|
|
10838
|
+
--interactive-surface-variant-secondary-border-color: var(--max-secondary);
|
|
10839
|
+
--interactive-surface-variant-accent-bg: var(--max-accent);
|
|
10840
|
+
--interactive-surface-variant-accent-border-color: var(--max-accent);
|
|
10841
|
+
--interactive-surface-variant-subtle-bg: var(--max-surface-soft, var(--max-surface));
|
|
10842
|
+
--interactive-surface-variant-subtle-fg: var(--max-text);
|
|
10843
|
+
--interactive-surface-variant-subtle-border-color: var(--max-border);
|
|
10844
|
+
--interactive-surface-variant-warning-bg: var(--max-warning);
|
|
10845
|
+
--interactive-surface-variant-warning-border-color: var(--max-warning);
|
|
10846
|
+
--interactive-surface-variant-danger-bg: var(--max-danger);
|
|
10847
|
+
--interactive-surface-variant-danger-border-color: var(--max-danger);
|
|
10848
|
+
}
|
|
10849
|
+
|
|
10850
|
+
:where([data-ui="bauhaus"][data-theme][data-mode]) .interactive-surface {
|
|
10851
|
+
--interactive-surface-bg: var(--bau-surface-strong, var(--bau-surface, var(--bau-bg)));
|
|
10852
|
+
--interactive-surface-fg: var(--bau-text);
|
|
10853
|
+
--interactive-surface-border-color: var(--bau-border);
|
|
10854
|
+
--interactive-surface-focus-ring-color: var(--bau-focus, var(--bau-accent, var(--bau-primary)));
|
|
10855
|
+
--interactive-surface-radius: var(--bau-radius-md, 0.75rem);
|
|
10856
|
+
--interactive-surface-state-layer-color: var(--bau-text);
|
|
10857
|
+
--interactive-surface-light-icon-color: var(--bau-warning, var(--bau-accent));
|
|
10858
|
+
--interactive-surface-dark-icon-color: var(--bau-text);
|
|
10859
|
+
--interactive-surface-accessibility-icon-color: var(--bau-focus, var(--bau-accent));
|
|
10860
|
+
--interactive-surface-light-icon-color-dark: var(--bau-warning, var(--bau-accent));
|
|
10861
|
+
--interactive-surface-dark-icon-color-dark: var(--bau-text);
|
|
10862
|
+
--interactive-surface-accessibility-icon-color-dark: var(--bau-focus, var(--bau-accent));
|
|
10863
|
+
--interactive-surface-variant-primary-bg: var(--bau-primary);
|
|
10864
|
+
--interactive-surface-variant-primary-fg: var(--bau-primary-text, var(--bau-bg));
|
|
10865
|
+
--interactive-surface-variant-primary-border-color: var(--bau-primary);
|
|
10866
|
+
--interactive-surface-variant-secondary-bg: var(--bau-secondary);
|
|
10867
|
+
--interactive-surface-variant-secondary-fg: var(--bau-secondary-text, var(--bau-bg));
|
|
10868
|
+
--interactive-surface-variant-secondary-border-color: var(--bau-secondary);
|
|
10869
|
+
--interactive-surface-variant-accent-bg: var(--bau-accent);
|
|
10870
|
+
--interactive-surface-variant-accent-border-color: var(--bau-accent);
|
|
10871
|
+
--interactive-surface-variant-subtle-bg: var(--bau-surface-soft, var(--bau-surface));
|
|
10872
|
+
--interactive-surface-variant-subtle-fg: var(--bau-text);
|
|
10873
|
+
--interactive-surface-variant-subtle-border-color: var(--bau-border);
|
|
10874
|
+
--interactive-surface-variant-warning-bg: var(--bau-warning);
|
|
10875
|
+
--interactive-surface-variant-warning-border-color: var(--bau-warning);
|
|
10876
|
+
--interactive-surface-variant-danger-bg: var(--bau-danger);
|
|
10877
|
+
--interactive-surface-variant-danger-border-color: var(--bau-danger);
|
|
10878
|
+
}
|
|
10879
|
+
|
|
10880
|
+
:where([data-ui="tactile"][data-theme][data-mode]) .interactive-surface {
|
|
10881
|
+
--interactive-surface-bg: var(--tactile-surface-strong, var(--tactile-surface, var(--tactile-bg)));
|
|
10882
|
+
--interactive-surface-fg: var(--tactile-text);
|
|
10883
|
+
--interactive-surface-border-color: var(--tactile-border);
|
|
10884
|
+
--interactive-surface-focus-ring-color: var(--tactile-focus, var(--tactile-accent, var(--tactile-primary)));
|
|
10885
|
+
--interactive-surface-radius: var(--tactile-radius-md, 0.75rem);
|
|
10886
|
+
--interactive-surface-state-layer-color: var(--tactile-text);
|
|
10887
|
+
--interactive-surface-light-icon-color: var(--tactile-warning, var(--tactile-accent));
|
|
10888
|
+
--interactive-surface-dark-icon-color: var(--tactile-text);
|
|
10889
|
+
--interactive-surface-accessibility-icon-color: var(--tactile-focus, var(--tactile-accent));
|
|
10890
|
+
--interactive-surface-light-icon-color-dark: var(--tactile-warning, var(--tactile-accent));
|
|
10891
|
+
--interactive-surface-dark-icon-color-dark: var(--tactile-text);
|
|
10892
|
+
--interactive-surface-accessibility-icon-color-dark: var(--tactile-focus, var(--tactile-accent));
|
|
10893
|
+
--interactive-surface-variant-primary-bg: var(--tactile-primary);
|
|
10894
|
+
--interactive-surface-variant-primary-fg: var(--tactile-primary-text, var(--tactile-bg));
|
|
10895
|
+
--interactive-surface-variant-primary-border-color: var(--tactile-primary);
|
|
10896
|
+
--interactive-surface-variant-secondary-bg: var(--tactile-secondary);
|
|
10897
|
+
--interactive-surface-variant-secondary-fg: var(--tactile-secondary-text, var(--tactile-bg));
|
|
10898
|
+
--interactive-surface-variant-secondary-border-color: var(--tactile-secondary);
|
|
10899
|
+
--interactive-surface-variant-accent-bg: var(--tactile-accent);
|
|
10900
|
+
--interactive-surface-variant-accent-border-color: var(--tactile-accent);
|
|
10901
|
+
--interactive-surface-variant-subtle-bg: var(--tactile-surface-soft, var(--tactile-surface));
|
|
10902
|
+
--interactive-surface-variant-subtle-fg: var(--tactile-text);
|
|
10903
|
+
--interactive-surface-variant-subtle-border-color: var(--tactile-border);
|
|
10904
|
+
--interactive-surface-variant-warning-bg: var(--tactile-warning);
|
|
10905
|
+
--interactive-surface-variant-warning-border-color: var(--tactile-warning);
|
|
10906
|
+
--interactive-surface-variant-danger-bg: var(--tactile-danger);
|
|
10907
|
+
--interactive-surface-variant-danger-border-color: var(--tactile-danger);
|
|
10908
|
+
}
|
|
10909
|
+
|
|
10910
|
+
:where([data-ui="neumorphism"][data-theme][data-mode]) .interactive-surface {
|
|
10911
|
+
--interactive-surface-bg: var(--neo-surface-strong, var(--neo-surface, var(--neo-bg)));
|
|
10912
|
+
--interactive-surface-fg: var(--neo-text);
|
|
10913
|
+
--interactive-surface-border-color: var(--neo-border);
|
|
10914
|
+
--interactive-surface-focus-ring-color: var(--neo-focus, var(--neo-accent, var(--neo-primary)));
|
|
10915
|
+
--interactive-surface-radius: var(--neo-radius-md, 0.75rem);
|
|
10916
|
+
--interactive-surface-state-layer-color: var(--neo-text);
|
|
10917
|
+
--interactive-surface-light-icon-color: var(--neo-warning, var(--neo-accent));
|
|
10918
|
+
--interactive-surface-dark-icon-color: var(--neo-text);
|
|
10919
|
+
--interactive-surface-accessibility-icon-color: var(--neo-focus, var(--neo-accent));
|
|
10920
|
+
--interactive-surface-light-icon-color-dark: var(--neo-warning, var(--neo-accent));
|
|
10921
|
+
--interactive-surface-dark-icon-color-dark: var(--neo-text);
|
|
10922
|
+
--interactive-surface-accessibility-icon-color-dark: var(--neo-focus, var(--neo-accent));
|
|
10923
|
+
--interactive-surface-variant-primary-bg: var(--neo-primary);
|
|
10924
|
+
--interactive-surface-variant-primary-fg: var(--neo-primary-text, var(--neo-bg));
|
|
10925
|
+
--interactive-surface-variant-primary-border-color: var(--neo-primary);
|
|
10926
|
+
--interactive-surface-variant-secondary-bg: var(--neo-secondary);
|
|
10927
|
+
--interactive-surface-variant-secondary-fg: var(--neo-secondary-text, var(--neo-bg));
|
|
10928
|
+
--interactive-surface-variant-secondary-border-color: var(--neo-secondary);
|
|
10929
|
+
--interactive-surface-variant-accent-bg: var(--neo-accent);
|
|
10930
|
+
--interactive-surface-variant-accent-border-color: var(--neo-accent);
|
|
10931
|
+
--interactive-surface-variant-subtle-bg: var(--neo-surface-soft, var(--neo-surface));
|
|
10932
|
+
--interactive-surface-variant-subtle-fg: var(--neo-text);
|
|
10933
|
+
--interactive-surface-variant-subtle-border-color: var(--neo-border);
|
|
10934
|
+
--interactive-surface-variant-warning-bg: var(--neo-warning);
|
|
10935
|
+
--interactive-surface-variant-warning-border-color: var(--neo-warning);
|
|
10936
|
+
--interactive-surface-variant-danger-bg: var(--neo-danger);
|
|
10937
|
+
--interactive-surface-variant-danger-border-color: var(--neo-danger);
|
|
10938
|
+
}
|
|
10939
|
+
|
|
10940
|
+
:where([data-ui="retrofuturism"][data-theme][data-mode]) .interactive-surface {
|
|
10941
|
+
--interactive-surface-bg: var(--retro-surface-strong, var(--retro-surface, var(--retro-bg)));
|
|
10942
|
+
--interactive-surface-fg: var(--retro-text);
|
|
10943
|
+
--interactive-surface-border-color: var(--retro-border);
|
|
10944
|
+
--interactive-surface-focus-ring-color: var(--retro-focus, var(--retro-accent, var(--retro-primary)));
|
|
10945
|
+
--interactive-surface-radius: var(--retro-radius-md, 0.75rem);
|
|
10946
|
+
--interactive-surface-state-layer-color: var(--retro-text);
|
|
10947
|
+
--interactive-surface-light-icon-color: var(--retro-warning, var(--retro-accent));
|
|
10948
|
+
--interactive-surface-dark-icon-color: var(--retro-text);
|
|
10949
|
+
--interactive-surface-accessibility-icon-color: var(--retro-focus, var(--retro-accent));
|
|
10950
|
+
--interactive-surface-light-icon-color-dark: var(--retro-warning, var(--retro-accent));
|
|
10951
|
+
--interactive-surface-dark-icon-color-dark: var(--retro-text);
|
|
10952
|
+
--interactive-surface-accessibility-icon-color-dark: var(--retro-focus, var(--retro-accent));
|
|
10953
|
+
--interactive-surface-variant-primary-bg: var(--retro-primary);
|
|
10954
|
+
--interactive-surface-variant-primary-fg: var(--retro-primary-text, var(--retro-bg));
|
|
10955
|
+
--interactive-surface-variant-primary-border-color: var(--retro-primary);
|
|
10956
|
+
--interactive-surface-variant-secondary-bg: var(--retro-secondary);
|
|
10957
|
+
--interactive-surface-variant-secondary-fg: var(--retro-secondary-text, var(--retro-bg));
|
|
10958
|
+
--interactive-surface-variant-secondary-border-color: var(--retro-secondary);
|
|
10959
|
+
--interactive-surface-variant-accent-bg: var(--retro-accent);
|
|
10960
|
+
--interactive-surface-variant-accent-border-color: var(--retro-accent);
|
|
10961
|
+
--interactive-surface-variant-subtle-bg: var(--retro-surface-soft, var(--retro-surface));
|
|
10962
|
+
--interactive-surface-variant-subtle-fg: var(--retro-text);
|
|
10963
|
+
--interactive-surface-variant-subtle-border-color: var(--retro-border);
|
|
10964
|
+
--interactive-surface-variant-warning-bg: var(--retro-warning);
|
|
10965
|
+
--interactive-surface-variant-warning-border-color: var(--retro-warning);
|
|
10966
|
+
--interactive-surface-variant-danger-bg: var(--retro-danger);
|
|
10967
|
+
--interactive-surface-variant-danger-border-color: var(--retro-danger);
|
|
10968
|
+
}
|
|
10969
|
+
|
|
10970
|
+
:where([data-ui="brutalism"][data-theme][data-mode]) .interactive-surface {
|
|
10971
|
+
--interactive-surface-bg: var(--brutal-surface-strong, var(--brutal-surface, var(--brutal-bg)));
|
|
10972
|
+
--interactive-surface-fg: var(--brutal-text);
|
|
10973
|
+
--interactive-surface-border-color: var(--brutal-border);
|
|
10974
|
+
--interactive-surface-focus-ring-color: var(--brutal-focus, var(--brutal-accent, var(--brutal-primary)));
|
|
10975
|
+
--interactive-surface-radius: var(--brutal-radius-md, 0.75rem);
|
|
10976
|
+
--interactive-surface-state-layer-color: var(--brutal-text);
|
|
10977
|
+
--interactive-surface-light-icon-color: var(--brutal-warning, var(--brutal-accent));
|
|
10978
|
+
--interactive-surface-dark-icon-color: var(--brutal-text);
|
|
10979
|
+
--interactive-surface-accessibility-icon-color: var(--brutal-focus, var(--brutal-accent));
|
|
10980
|
+
--interactive-surface-light-icon-color-dark: var(--brutal-warning, var(--brutal-accent));
|
|
10981
|
+
--interactive-surface-dark-icon-color-dark: var(--brutal-text);
|
|
10982
|
+
--interactive-surface-accessibility-icon-color-dark: var(--brutal-focus, var(--brutal-accent));
|
|
10983
|
+
--interactive-surface-variant-primary-bg: var(--brutal-primary);
|
|
10984
|
+
--interactive-surface-variant-primary-fg: var(--brutal-primary-text, var(--brutal-bg));
|
|
10985
|
+
--interactive-surface-variant-primary-border-color: var(--brutal-primary);
|
|
10986
|
+
--interactive-surface-variant-secondary-bg: var(--brutal-secondary);
|
|
10987
|
+
--interactive-surface-variant-secondary-fg: var(--brutal-secondary-text, var(--brutal-bg));
|
|
10988
|
+
--interactive-surface-variant-secondary-border-color: var(--brutal-secondary);
|
|
10989
|
+
--interactive-surface-variant-accent-bg: var(--brutal-accent);
|
|
10990
|
+
--interactive-surface-variant-accent-border-color: var(--brutal-accent);
|
|
10991
|
+
--interactive-surface-variant-subtle-bg: var(--brutal-surface-soft, var(--brutal-surface));
|
|
10992
|
+
--interactive-surface-variant-subtle-fg: var(--brutal-text);
|
|
10993
|
+
--interactive-surface-variant-subtle-border-color: var(--brutal-border);
|
|
10994
|
+
--interactive-surface-variant-warning-bg: var(--brutal-warning);
|
|
10995
|
+
--interactive-surface-variant-warning-border-color: var(--brutal-warning);
|
|
10996
|
+
--interactive-surface-variant-danger-bg: var(--brutal-danger);
|
|
10997
|
+
--interactive-surface-variant-danger-border-color: var(--brutal-danger);
|
|
10998
|
+
}
|
|
10999
|
+
|
|
11000
|
+
:where([data-ui="cyberpunk"][data-theme][data-mode]) .interactive-surface {
|
|
11001
|
+
--interactive-surface-bg: var(--cyber-surface-strong, var(--cyber-surface, var(--cyber-bg)));
|
|
11002
|
+
--interactive-surface-fg: var(--cyber-text);
|
|
11003
|
+
--interactive-surface-border-color: var(--cyber-border);
|
|
11004
|
+
--interactive-surface-focus-ring-color: var(--cyber-focus, var(--cyber-accent, var(--cyber-primary)));
|
|
11005
|
+
--interactive-surface-radius: var(--cyber-radius-md, 0.75rem);
|
|
11006
|
+
--interactive-surface-state-layer-color: var(--cyber-text);
|
|
11007
|
+
--interactive-surface-light-icon-color: var(--cyber-warning, var(--cyber-accent));
|
|
11008
|
+
--interactive-surface-dark-icon-color: var(--cyber-text);
|
|
11009
|
+
--interactive-surface-accessibility-icon-color: var(--cyber-focus, var(--cyber-accent));
|
|
11010
|
+
--interactive-surface-light-icon-color-dark: var(--cyber-warning, var(--cyber-accent));
|
|
11011
|
+
--interactive-surface-dark-icon-color-dark: var(--cyber-text);
|
|
11012
|
+
--interactive-surface-accessibility-icon-color-dark: var(--cyber-focus, var(--cyber-accent));
|
|
11013
|
+
--interactive-surface-variant-primary-bg: var(--cyber-primary);
|
|
11014
|
+
--interactive-surface-variant-primary-fg: var(--cyber-primary-text, var(--cyber-bg));
|
|
11015
|
+
--interactive-surface-variant-primary-border-color: var(--cyber-primary);
|
|
11016
|
+
--interactive-surface-variant-secondary-bg: var(--cyber-secondary);
|
|
11017
|
+
--interactive-surface-variant-secondary-fg: var(--cyber-secondary-text, var(--cyber-bg));
|
|
11018
|
+
--interactive-surface-variant-secondary-border-color: var(--cyber-secondary);
|
|
11019
|
+
--interactive-surface-variant-accent-bg: var(--cyber-accent);
|
|
11020
|
+
--interactive-surface-variant-accent-border-color: var(--cyber-accent);
|
|
11021
|
+
--interactive-surface-variant-subtle-bg: var(--cyber-surface-soft, var(--cyber-surface));
|
|
11022
|
+
--interactive-surface-variant-subtle-fg: var(--cyber-text);
|
|
11023
|
+
--interactive-surface-variant-subtle-border-color: var(--cyber-border);
|
|
11024
|
+
--interactive-surface-variant-warning-bg: var(--cyber-warning);
|
|
11025
|
+
--interactive-surface-variant-warning-border-color: var(--cyber-warning);
|
|
11026
|
+
--interactive-surface-variant-danger-bg: var(--cyber-danger);
|
|
11027
|
+
--interactive-surface-variant-danger-border-color: var(--cyber-danger);
|
|
11028
|
+
}
|
|
11029
|
+
|
|
11030
|
+
:where([data-ui="y2k"][data-theme][data-mode]) .interactive-surface {
|
|
11031
|
+
--interactive-surface-bg: var(--y2k-surface-strong, var(--y2k-surface, var(--y2k-bg)));
|
|
11032
|
+
--interactive-surface-fg: var(--y2k-text);
|
|
11033
|
+
--interactive-surface-border-color: var(--y2k-border);
|
|
11034
|
+
--interactive-surface-focus-ring-color: var(--y2k-focus, var(--y2k-accent, var(--y2k-primary)));
|
|
11035
|
+
--interactive-surface-radius: var(--y2k-radius-md, 0.75rem);
|
|
11036
|
+
--interactive-surface-state-layer-color: var(--y2k-text);
|
|
11037
|
+
--interactive-surface-light-icon-color: var(--y2k-warning, var(--y2k-accent));
|
|
11038
|
+
--interactive-surface-dark-icon-color: var(--y2k-text);
|
|
11039
|
+
--interactive-surface-accessibility-icon-color: var(--y2k-focus, var(--y2k-accent));
|
|
11040
|
+
--interactive-surface-light-icon-color-dark: var(--y2k-warning, var(--y2k-accent));
|
|
11041
|
+
--interactive-surface-dark-icon-color-dark: var(--y2k-text);
|
|
11042
|
+
--interactive-surface-accessibility-icon-color-dark: var(--y2k-focus, var(--y2k-accent));
|
|
11043
|
+
--interactive-surface-variant-primary-bg: var(--y2k-primary);
|
|
11044
|
+
--interactive-surface-variant-primary-fg: var(--y2k-primary-text, var(--y2k-bg));
|
|
11045
|
+
--interactive-surface-variant-primary-border-color: var(--y2k-primary);
|
|
11046
|
+
--interactive-surface-variant-secondary-bg: var(--y2k-secondary);
|
|
11047
|
+
--interactive-surface-variant-secondary-fg: var(--y2k-secondary-text, var(--y2k-bg));
|
|
11048
|
+
--interactive-surface-variant-secondary-border-color: var(--y2k-secondary);
|
|
11049
|
+
--interactive-surface-variant-accent-bg: var(--y2k-accent);
|
|
11050
|
+
--interactive-surface-variant-accent-border-color: var(--y2k-accent);
|
|
11051
|
+
--interactive-surface-variant-subtle-bg: var(--y2k-surface-soft, var(--y2k-surface));
|
|
11052
|
+
--interactive-surface-variant-subtle-fg: var(--y2k-text);
|
|
11053
|
+
--interactive-surface-variant-subtle-border-color: var(--y2k-border);
|
|
11054
|
+
--interactive-surface-variant-warning-bg: var(--y2k-warning);
|
|
11055
|
+
--interactive-surface-variant-warning-border-color: var(--y2k-warning);
|
|
11056
|
+
--interactive-surface-variant-danger-bg: var(--y2k-danger);
|
|
11057
|
+
--interactive-surface-variant-danger-border-color: var(--y2k-danger);
|
|
11058
|
+
}
|
|
11059
|
+
|
|
11060
|
+
:where([data-ui="retro-glass"][data-theme][data-mode]) .interactive-surface {
|
|
11061
|
+
--interactive-surface-bg: var(--rg-surface-strong, var(--rg-surface, var(--rg-bg)));
|
|
11062
|
+
--interactive-surface-fg: var(--rg-text);
|
|
11063
|
+
--interactive-surface-border-color: var(--rg-border);
|
|
11064
|
+
--interactive-surface-focus-ring-color: var(--rg-focus, var(--rg-accent, var(--rg-primary)));
|
|
11065
|
+
--interactive-surface-radius: var(--rg-radius-md, 0.75rem);
|
|
11066
|
+
--interactive-surface-state-layer-color: var(--rg-text);
|
|
11067
|
+
--interactive-surface-light-icon-color: var(--rg-warning, var(--rg-accent));
|
|
11068
|
+
--interactive-surface-dark-icon-color: var(--rg-text);
|
|
11069
|
+
--interactive-surface-accessibility-icon-color: var(--rg-focus, var(--rg-accent));
|
|
11070
|
+
--interactive-surface-light-icon-color-dark: var(--rg-warning, var(--rg-accent));
|
|
11071
|
+
--interactive-surface-dark-icon-color-dark: var(--rg-text);
|
|
11072
|
+
--interactive-surface-accessibility-icon-color-dark: var(--rg-focus, var(--rg-accent));
|
|
11073
|
+
--interactive-surface-variant-primary-bg: var(--rg-primary);
|
|
11074
|
+
--interactive-surface-variant-primary-fg: var(--rg-primary-text, var(--rg-bg));
|
|
11075
|
+
--interactive-surface-variant-primary-border-color: var(--rg-primary);
|
|
11076
|
+
--interactive-surface-variant-secondary-bg: var(--rg-secondary);
|
|
11077
|
+
--interactive-surface-variant-secondary-fg: var(--rg-secondary-text, var(--rg-bg));
|
|
11078
|
+
--interactive-surface-variant-secondary-border-color: var(--rg-secondary);
|
|
11079
|
+
--interactive-surface-variant-accent-bg: var(--rg-accent);
|
|
11080
|
+
--interactive-surface-variant-accent-border-color: var(--rg-accent);
|
|
11081
|
+
--interactive-surface-variant-subtle-bg: var(--rg-surface-soft, var(--rg-surface));
|
|
11082
|
+
--interactive-surface-variant-subtle-fg: var(--rg-text);
|
|
11083
|
+
--interactive-surface-variant-subtle-border-color: var(--rg-border);
|
|
11084
|
+
--interactive-surface-variant-warning-bg: var(--rg-warning);
|
|
11085
|
+
--interactive-surface-variant-warning-border-color: var(--rg-warning);
|
|
11086
|
+
--interactive-surface-variant-danger-bg: var(--rg-danger);
|
|
11087
|
+
--interactive-surface-variant-danger-border-color: var(--rg-danger);
|
|
11088
|
+
}
|