ui-style-kit-css 1.2.1 → 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 +18 -126
- package/CONTRIBUTING.md +24 -0
- package/README.md +94 -154
- 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 +397 -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 +78 -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/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
|
+
}
|
|
3944
|
+
|
|
3924
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
|
+
}
|
|
5910
5940
|
|
|
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;
|
|
@@ -10376,6 +10664,87 @@
|
|
|
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; } }
|
|
10378
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 */
|
|
10379
10748
|
/* =========================================================
|
|
10380
10749
|
UI Style Kit CSS x Interactive Surface CSS Bridge
|
|
10381
10750
|
|