@absolutejs/absolute 0.19.0-beta.1083 → 0.19.0-beta.1085

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.
Files changed (153) hide show
  1. package/dist/angular/browser.js +18 -18
  2. package/dist/angular/components/core/streamingSlotRegistrar.js +1 -1
  3. package/dist/angular/components/core/streamingSlotRegistry.js +2 -2
  4. package/dist/angular/components/defer-slot-templates.directive.js +2 -2
  5. package/dist/angular/components/defer-slot.component.js +3 -3
  6. package/dist/angular/components/image.component.js +3 -3
  7. package/dist/angular/components/stream-slot.component.js +3 -3
  8. package/dist/angular/index.js +43 -43
  9. package/dist/angular/server.js +31 -31
  10. package/dist/build.js +105 -54
  11. package/dist/build.js.map +4 -4
  12. package/dist/cli/config/server.js +11 -11
  13. package/dist/client/index.js +13 -13
  14. package/dist/index.js +130 -79
  15. package/dist/index.js.map +4 -4
  16. package/dist/islands/index.js +14 -14
  17. package/dist/react/browser.js +3 -3
  18. package/dist/react/components/browser/index.js +5 -5
  19. package/dist/react/components/index.js +7 -7
  20. package/dist/react/hooks/index.js +2 -2
  21. package/dist/react/index.js +30 -30
  22. package/dist/react/jsxDevRuntimeCompat.js +1 -1
  23. package/dist/react/router/browser.js +2 -2
  24. package/dist/react/router/index.js +2 -2
  25. package/dist/react/server.js +13 -13
  26. package/dist/src/build/chainInlineSourcemaps.d.ts +1 -0
  27. package/dist/src/core/build.d.ts +5 -0
  28. package/dist/src/utils/loadConfig.d.ts +1 -0
  29. package/dist/svelte/index.js +26 -26
  30. package/dist/svelte/router/page.js +1 -1
  31. package/dist/svelte/server.js +13 -13
  32. package/dist/types/build.d.ts +1 -0
  33. package/dist/vue/browser.js +3 -3
  34. package/dist/vue/components/Image.js +1 -1
  35. package/dist/vue/components/index.js +5 -5
  36. package/dist/vue/index.js +36 -36
  37. package/dist/vue/server.js +13 -13
  38. package/package.json +1 -1
  39. package/dist/.absolutejs/generated/angular/indexes/angular-example.1g23yr9r.js +0 -167
  40. package/dist/.absolutejs/generated/react/indexes/ReactExample.e6kzvjqy.js +0 -3
  41. package/dist/.absolutejs/generated/svelte/client/pages/SvelteExample.5pq2wmw6.js +0 -1
  42. package/dist/.absolutejs/generated/svelte/indexes/pages/SvelteExample.9zcw5vtg.js +0 -1
  43. package/dist/.absolutejs/generated/vue/client/pages/VueExample.q47m56s4.js +0 -1
  44. package/dist/.absolutejs/generated/vue/indexes/VueExample.6bqszcxv.js +0 -1
  45. package/dist/_prerendered/angular.html +0 -45
  46. package/dist/_prerendered/angular.meta +0 -1
  47. package/dist/_prerendered/html.html +0 -70
  48. package/dist/_prerendered/html.meta +0 -1
  49. package/dist/_prerendered/htmx.html +0 -239
  50. package/dist/_prerendered/htmx.meta +0 -1
  51. package/dist/_prerendered/index.html +0 -70
  52. package/dist/_prerendered/index.meta +0 -1
  53. package/dist/_prerendered/react.html +0 -1
  54. package/dist/_prerendered/react.meta +0 -1
  55. package/dist/_prerendered/vue.html +0 -41
  56. package/dist/_prerendered/vue.meta +0 -1
  57. package/dist/angular/example/angular/pages/angular-example.djr1v9hj.js +0 -373
  58. package/dist/angular/vendor/angular_common.js +0 -310
  59. package/dist/angular/vendor/angular_common_http.js +0 -129
  60. package/dist/angular/vendor/angular_core.js +0 -1177
  61. package/dist/angular/vendor/angular_core_primitives_di.js +0 -36
  62. package/dist/angular/vendor/angular_core_primitives_signals.js +0 -132
  63. package/dist/angular/vendor/angular_platform-browser.js +0 -117
  64. package/dist/angular/vendor/angular_router.js +0 -6410
  65. package/dist/angular/vendor/chunk-2c9evnn0.js +0 -4764
  66. package/dist/angular/vendor/chunk-3evcs0sk.js +0 -2567
  67. package/dist/angular/vendor/chunk-5h3qyvpj.js +0 -729
  68. package/dist/angular/vendor/chunk-hgg0w52m.js +0 -62
  69. package/dist/angular/vendor/chunk-n6rt7w2y.js +0 -23
  70. package/dist/angular/vendor/chunk-t4tc7c8b.js +0 -28013
  71. package/dist/angular/vendor/chunk-vqd7j0kb.js +0 -1786
  72. package/dist/angular/vendor/chunk-yqjkhk8j.js +0 -145
  73. package/dist/angular/vendor/server/angular_common.js +0 -311
  74. package/dist/angular/vendor/server/angular_common_http.js +0 -130
  75. package/dist/angular/vendor/server/angular_core.js +0 -1178
  76. package/dist/angular/vendor/server/angular_core_primitives_di.js +0 -37
  77. package/dist/angular/vendor/server/angular_core_primitives_signals.js +0 -133
  78. package/dist/angular/vendor/server/angular_platform-browser.js +0 -118
  79. package/dist/angular/vendor/server/angular_platform-server.js +0 -59
  80. package/dist/angular/vendor/server/angular_router.js +0 -261
  81. package/dist/angular/vendor/server/angular_ssr.js +0 -11669
  82. package/dist/angular/vendor/server/chunk-2akxms5e.js +0 -2566
  83. package/dist/angular/vendor/server/chunk-659a9c3p.js +0 -6218
  84. package/dist/angular/vendor/server/chunk-8eecnjd1.js +0 -16686
  85. package/dist/angular/vendor/server/chunk-9jz2apvp.js +0 -743
  86. package/dist/angular/vendor/server/chunk-dhs2bg35.js +0 -48
  87. package/dist/angular/vendor/server/chunk-hs2gc8sr.js +0 -1787
  88. package/dist/angular/vendor/server/chunk-k46n34mb.js +0 -63
  89. package/dist/angular/vendor/server/chunk-p2fdvyh1.js +0 -4767
  90. package/dist/angular/vendor/server/chunk-r0w9r4bg.js +0 -730
  91. package/dist/angular/vendor/server/chunk-vthxj7kd.js +0 -146
  92. package/dist/angular/vendor/server/chunk-xahr7f2f.js +0 -35534
  93. package/dist/assets/css/tailwind.generated.css +0 -218
  94. package/dist/assets/css/vue-example-compiled.abzaxheq.css +0 -32
  95. package/dist/assets/ico/favicon.ico +0 -0
  96. package/dist/assets/png/absolutejs-temp.png +0 -0
  97. package/dist/assets/svg/HTML5_Badge.svg +0 -7
  98. package/dist/assets/svg/angular.svg +0 -18
  99. package/dist/assets/svg/htmx-logo-black.svg +0 -9
  100. package/dist/assets/svg/htmx-logo-white.svg +0 -9
  101. package/dist/assets/svg/react.svg +0 -1
  102. package/dist/assets/svg/svelte-logo.svg +0 -1
  103. package/dist/assets/svg/vue-logo.svg +0 -4
  104. package/dist/chunk-7pp6gkg8.js +0 -2
  105. package/dist/chunk-ek2qyx2c.js +0 -11
  106. package/dist/chunk-ysr5ycdt.js +0 -2
  107. package/dist/client.tsx +0 -15
  108. package/dist/example/html/scripts/typescript-example.fqn9zkdh.js +0 -1
  109. package/dist/html/pages/HTMLExample.html +0 -70
  110. package/dist/htmx/htmx.min.js +0 -1
  111. package/dist/htmx/pages/HTMXExample.html +0 -239
  112. package/dist/htmx.min.js +0 -1
  113. package/dist/indexes/angular-example.xsx88ph0.css +0 -227
  114. package/dist/indexes/html-example.s3banzdc.css +0 -221
  115. package/dist/indexes/htmx-example.5vgssc3f.css +0 -221
  116. package/dist/indexes/react-example.bz1k8xa2.css +0 -245
  117. package/dist/indexes/svelte-example.vy3015es.css +0 -221
  118. package/dist/indexes/vue-example.q4vf2wtq.css +0 -228
  119. package/dist/manifest.json +0 -26
  120. package/dist/nested/dynamic-module.txt +0 -1
  121. package/dist/package-asset.txt +0 -1
  122. package/dist/react/vendor/chunk-2kh60w9b.js +0 -33
  123. package/dist/react/vendor/chunk-9g12fvrw.js +0 -236
  124. package/dist/react/vendor/chunk-rejbymp5.js +0 -837
  125. package/dist/react/vendor/chunk-wwy122hz.js +0 -200
  126. package/dist/react/vendor/react-dom.js +0 -44
  127. package/dist/react/vendor/react-dom_client.js +0 -15864
  128. package/dist/react/vendor/react-refresh_runtime.js +0 -304
  129. package/dist/react/vendor/react.js +0 -103
  130. package/dist/react/vendor/react_jsx-dev-runtime.js +0 -17
  131. package/dist/react/vendor/react_jsx-runtime.js +0 -22
  132. package/dist/robots.txt +0 -2
  133. package/dist/runtime/blob.txt +0 -1
  134. package/dist/runtime/dir-join.txt +0 -1
  135. package/dist/runtime/nested/binary.bin +0 -1
  136. package/dist/runtime/nested/readfile.txt +0 -1
  137. package/dist/runtime/template.html +0 -1
  138. package/dist/server.js +0 -92156
  139. package/dist/sitemap.xml +0 -48
  140. package/dist/svelte/server/pages/SvelteExample.fxs20w1b.js +0 -290
  141. package/dist/svelte/vendor/chunk-5qdxn1p3.js +0 -4586
  142. package/dist/svelte/vendor/chunk-8qdfbbez.js +0 -12
  143. package/dist/svelte/vendor/chunk-r2jyyfjt.js +0 -4495
  144. package/dist/svelte/vendor/svelte.js +0 -49
  145. package/dist/svelte/vendor/svelte_internal.js +0 -2
  146. package/dist/svelte/vendor/svelte_internal_client.js +0 -395
  147. package/dist/svelte/vendor/svelte_internal_disclose-version.js +0 -7
  148. package/dist/svelte/vendor/svelte_internal_flags_async.js +0 -6
  149. package/dist/svelte/vendor/svelte_internal_flags_legacy.js +0 -6
  150. package/dist/svelte/vendor/svelte_store.js +0 -99
  151. package/dist/vue/server/pages/VueExample.fyhmna2p.css +0 -32
  152. package/dist/vue/server/pages/VueExample.fyhmna2p.js +0 -75
  153. package/dist/vue/vendor/vue.js +0 -11011
@@ -1,221 +0,0 @@
1
- /* example/styles/reset.css */
2
- * {
3
- box-sizing: border-box;
4
- margin: 0;
5
- padding: 0;
6
- line-height: 1.5;
7
- }
8
-
9
- html {
10
- height: 100%;
11
- font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Avenir, Helvetica, Arial, sans-serif;
12
- }
13
-
14
- body {
15
- color: #f5f5f5;
16
- --buncss-light: initial;
17
- --buncss-dark: ;
18
- color-scheme: light dark;
19
- display: flex;
20
- font-synthesis: none;
21
- -moz-osx-font-smoothing: grayscale;
22
- text-rendering: optimizeLegibility;
23
- -webkit-font-smoothing: antialiased;
24
- background-color: #2c2c2c;
25
- flex-direction: column;
26
- height: 100%;
27
- font-weight: 400;
28
- }
29
-
30
- @media (prefers-color-scheme: dark) {
31
- body {
32
- --buncss-light: ;
33
- --buncss-dark: initial;
34
- }
35
- }
36
-
37
- main {
38
- display: flex;
39
- text-align: center;
40
- flex-direction: column;
41
- flex: 1;
42
- justify-content: center;
43
- align-items: center;
44
- }
45
-
46
- h1, h2, h3, h4, h5, h6 {
47
- line-height: 1.1;
48
- }
49
-
50
- p {
51
- max-width: 1280px;
52
- font-size: 1.2rem;
53
- }
54
-
55
- a {
56
- color: #5fbeeb;
57
- position: relative;
58
- text-decoration: none;
59
- font-size: 1.5rem;
60
- font-weight: 500;
61
- }
62
-
63
- button {
64
- cursor: pointer;
65
- background-color: #1a1a1a;
66
- border: 1px solid #0000;
67
- border-radius: .5rem;
68
- margin: 2rem 0;
69
- padding: .6rem 1.2rem;
70
- transition: border-color .25s;
71
- font-family: inherit;
72
- font-size: 1.1rem;
73
- font-weight: 500;
74
- box-shadow: 0 2px 4px #0000001a;
75
- }
76
-
77
- button:hover {
78
- border-color: #5fbeeb;
79
- }
80
-
81
- button:focus {
82
- outline: 4px auto -webkit-focus-ring-color;
83
- }
84
-
85
- button:focus-visible {
86
- outline: 4px auto -webkit-focus-ring-color;
87
- }
88
-
89
- @media (prefers-color-scheme: light) {
90
- body {
91
- color: #1a1a1a;
92
- background-color: #f5f5f5;
93
- }
94
- }
95
-
96
- /* example/styles/main.css */
97
- header {
98
- display: flex;
99
- text-align: center;
100
- background-color: #1a1a1a;
101
- justify-content: space-between;
102
- align-items: center;
103
- padding: 2rem;
104
- box-shadow: 0 2px 4px #0000001a;
105
- }
106
-
107
- header a {
108
- position: relative;
109
- color: #5fbeeb;
110
- text-decoration: none;
111
- }
112
-
113
- header a:after {
114
- content: "";
115
- position: absolute;
116
- transform-origin: left;
117
- background: linear-gradient(90deg, #5fbeeb 0%, #35d5a2 50%, #ff4b91 100%);
118
- width: 100%;
119
- height: 2px;
120
- transition: transform .25s ease-in-out;
121
- bottom: 0;
122
- left: 0;
123
- transform: scaleX(0);
124
- }
125
-
126
- header a:hover:after {
127
- transform: scaleX(1);
128
- }
129
-
130
- h1 {
131
- margin-top: 2rem;
132
- font-size: 2.5rem;
133
- }
134
-
135
- .logo {
136
- will-change: filter;
137
- width: 8rem;
138
- height: 8rem;
139
- transition: filter .3s;
140
- }
141
-
142
- .logo:hover {
143
- filter: drop-shadow(0 0 2rem #5fbeeb);
144
- }
145
-
146
- nav {
147
- display: flex;
148
- justify-content: center;
149
- gap: 4rem;
150
- }
151
-
152
- header details {
153
- position: relative;
154
- }
155
-
156
- header details summary {
157
- list-style: none;
158
- appearance: none;
159
- -webkit-appearance: none;
160
- cursor: pointer;
161
- user-select: none;
162
- color: #5fbeeb;
163
- padding: .5rem 1rem;
164
- font-size: 1.5rem;
165
- font-weight: 500;
166
- }
167
-
168
- header summary:after {
169
- content: "▼";
170
- display: inline-block;
171
- margin-left: .5rem;
172
- transition: transform .3s;
173
- font-size: .75rem;
174
- }
175
-
176
- header details[open] summary:after {
177
- transform: rotate(180deg);
178
- }
179
-
180
- header details nav {
181
- position: absolute;
182
- display: flex;
183
- backdrop-filter: blur(4px);
184
- opacity: 0;
185
- pointer-events: none;
186
- z-index: 1000;
187
- background: #b9b9b91a;
188
- border: 1px solid #5fbeeb;
189
- border-radius: 1rem;
190
- flex-direction: column;
191
- gap: .75rem;
192
- padding: 1rem 1.5rem;
193
- transition: opacity .3s, transform .3s;
194
- top: 100%;
195
- right: -.5rem;
196
- transform: translateY(-8px);
197
- box-shadow: 0 4px 12px #00000040;
198
- }
199
-
200
- header details[open] nav {
201
- opacity: 1;
202
- pointer-events: auto;
203
- transform: translateY(0);
204
- }
205
-
206
- header details nav a {
207
- white-space: nowrap;
208
- padding: .25rem 0;
209
- font-size: 1.1rem;
210
- }
211
-
212
- @media (prefers-color-scheme: light) {
213
- header, button {
214
- background-color: #fff;
215
- }
216
- }
217
-
218
- /* example/styles/indexes/html-example.css */
219
- .logo.html:hover {
220
- filter: drop-shadow(0 0 2rem #e34f26);
221
- }
@@ -1,221 +0,0 @@
1
- /* example/styles/reset.css */
2
- * {
3
- box-sizing: border-box;
4
- margin: 0;
5
- padding: 0;
6
- line-height: 1.5;
7
- }
8
-
9
- html {
10
- height: 100%;
11
- font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Avenir, Helvetica, Arial, sans-serif;
12
- }
13
-
14
- body {
15
- color: #f5f5f5;
16
- --buncss-light: initial;
17
- --buncss-dark: ;
18
- color-scheme: light dark;
19
- display: flex;
20
- font-synthesis: none;
21
- -moz-osx-font-smoothing: grayscale;
22
- text-rendering: optimizeLegibility;
23
- -webkit-font-smoothing: antialiased;
24
- background-color: #2c2c2c;
25
- flex-direction: column;
26
- height: 100%;
27
- font-weight: 400;
28
- }
29
-
30
- @media (prefers-color-scheme: dark) {
31
- body {
32
- --buncss-light: ;
33
- --buncss-dark: initial;
34
- }
35
- }
36
-
37
- main {
38
- display: flex;
39
- text-align: center;
40
- flex-direction: column;
41
- flex: 1;
42
- justify-content: center;
43
- align-items: center;
44
- }
45
-
46
- h1, h2, h3, h4, h5, h6 {
47
- line-height: 1.1;
48
- }
49
-
50
- p {
51
- max-width: 1280px;
52
- font-size: 1.2rem;
53
- }
54
-
55
- a {
56
- color: #5fbeeb;
57
- position: relative;
58
- text-decoration: none;
59
- font-size: 1.5rem;
60
- font-weight: 500;
61
- }
62
-
63
- button {
64
- cursor: pointer;
65
- background-color: #1a1a1a;
66
- border: 1px solid #0000;
67
- border-radius: .5rem;
68
- margin: 2rem 0;
69
- padding: .6rem 1.2rem;
70
- transition: border-color .25s;
71
- font-family: inherit;
72
- font-size: 1.1rem;
73
- font-weight: 500;
74
- box-shadow: 0 2px 4px #0000001a;
75
- }
76
-
77
- button:hover {
78
- border-color: #5fbeeb;
79
- }
80
-
81
- button:focus {
82
- outline: 4px auto -webkit-focus-ring-color;
83
- }
84
-
85
- button:focus-visible {
86
- outline: 4px auto -webkit-focus-ring-color;
87
- }
88
-
89
- @media (prefers-color-scheme: light) {
90
- body {
91
- color: #1a1a1a;
92
- background-color: #f5f5f5;
93
- }
94
- }
95
-
96
- /* example/styles/main.css */
97
- header {
98
- display: flex;
99
- text-align: center;
100
- background-color: #1a1a1a;
101
- justify-content: space-between;
102
- align-items: center;
103
- padding: 2rem;
104
- box-shadow: 0 2px 4px #0000001a;
105
- }
106
-
107
- header a {
108
- position: relative;
109
- color: #5fbeeb;
110
- text-decoration: none;
111
- }
112
-
113
- header a:after {
114
- content: "";
115
- position: absolute;
116
- transform-origin: left;
117
- background: linear-gradient(90deg, #5fbeeb 0%, #35d5a2 50%, #ff4b91 100%);
118
- width: 100%;
119
- height: 2px;
120
- transition: transform .25s ease-in-out;
121
- bottom: 0;
122
- left: 0;
123
- transform: scaleX(0);
124
- }
125
-
126
- header a:hover:after {
127
- transform: scaleX(1);
128
- }
129
-
130
- h1 {
131
- margin-top: 2rem;
132
- font-size: 2.5rem;
133
- }
134
-
135
- .logo {
136
- will-change: filter;
137
- width: 8rem;
138
- height: 8rem;
139
- transition: filter .3s;
140
- }
141
-
142
- .logo:hover {
143
- filter: drop-shadow(0 0 2rem #5fbeeb);
144
- }
145
-
146
- nav {
147
- display: flex;
148
- justify-content: center;
149
- gap: 4rem;
150
- }
151
-
152
- header details {
153
- position: relative;
154
- }
155
-
156
- header details summary {
157
- list-style: none;
158
- appearance: none;
159
- -webkit-appearance: none;
160
- cursor: pointer;
161
- user-select: none;
162
- color: #5fbeeb;
163
- padding: .5rem 1rem;
164
- font-size: 1.5rem;
165
- font-weight: 500;
166
- }
167
-
168
- header summary:after {
169
- content: "▼";
170
- display: inline-block;
171
- margin-left: .5rem;
172
- transition: transform .3s;
173
- font-size: .75rem;
174
- }
175
-
176
- header details[open] summary:after {
177
- transform: rotate(180deg);
178
- }
179
-
180
- header details nav {
181
- position: absolute;
182
- display: flex;
183
- backdrop-filter: blur(4px);
184
- opacity: 0;
185
- pointer-events: none;
186
- z-index: 1000;
187
- background: #b9b9b91a;
188
- border: 1px solid #5fbeeb;
189
- border-radius: 1rem;
190
- flex-direction: column;
191
- gap: .75rem;
192
- padding: 1rem 1.5rem;
193
- transition: opacity .3s, transform .3s;
194
- top: 100%;
195
- right: -.5rem;
196
- transform: translateY(-8px);
197
- box-shadow: 0 4px 12px #00000040;
198
- }
199
-
200
- header details[open] nav {
201
- opacity: 1;
202
- pointer-events: auto;
203
- transform: translateY(0);
204
- }
205
-
206
- header details nav a {
207
- white-space: nowrap;
208
- padding: .25rem 0;
209
- font-size: 1.1rem;
210
- }
211
-
212
- @media (prefers-color-scheme: light) {
213
- header, button {
214
- background-color: #fff;
215
- }
216
- }
217
-
218
- /* example/styles/indexes/htmx-example.css */
219
- .logo.htmx:hover {
220
- filter: drop-shadow(0 0 2rem #3465a4);
221
- }
@@ -1,245 +0,0 @@
1
- /* example/styles/reset.css */
2
- * {
3
- box-sizing: border-box;
4
- margin: 0;
5
- padding: 0;
6
- line-height: 1.5;
7
- }
8
-
9
- html {
10
- height: 100%;
11
- font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Avenir, Helvetica, Arial, sans-serif;
12
- }
13
-
14
- body {
15
- color: #f5f5f5;
16
- --buncss-light: initial;
17
- --buncss-dark: ;
18
- color-scheme: light dark;
19
- display: flex;
20
- font-synthesis: none;
21
- -moz-osx-font-smoothing: grayscale;
22
- text-rendering: optimizeLegibility;
23
- -webkit-font-smoothing: antialiased;
24
- background-color: #2c2c2c;
25
- flex-direction: column;
26
- height: 100%;
27
- font-weight: 400;
28
- }
29
-
30
- @media (prefers-color-scheme: dark) {
31
- body {
32
- --buncss-light: ;
33
- --buncss-dark: initial;
34
- }
35
- }
36
-
37
- main {
38
- display: flex;
39
- text-align: center;
40
- flex-direction: column;
41
- flex: 1;
42
- justify-content: center;
43
- align-items: center;
44
- }
45
-
46
- h1, h2, h3, h4, h5, h6 {
47
- line-height: 1.1;
48
- }
49
-
50
- p {
51
- max-width: 1280px;
52
- font-size: 1.2rem;
53
- }
54
-
55
- a {
56
- color: #5fbeeb;
57
- position: relative;
58
- text-decoration: none;
59
- font-size: 1.5rem;
60
- font-weight: 500;
61
- }
62
-
63
- button {
64
- cursor: pointer;
65
- background-color: #1a1a1a;
66
- border: 1px solid #0000;
67
- border-radius: .5rem;
68
- margin: 2rem 0;
69
- padding: .6rem 1.2rem;
70
- transition: border-color .25s;
71
- font-family: inherit;
72
- font-size: 1.1rem;
73
- font-weight: 500;
74
- box-shadow: 0 2px 4px #0000001a;
75
- }
76
-
77
- button:hover {
78
- border-color: #5fbeeb;
79
- }
80
-
81
- button:focus {
82
- outline: 4px auto -webkit-focus-ring-color;
83
- }
84
-
85
- button:focus-visible {
86
- outline: 4px auto -webkit-focus-ring-color;
87
- }
88
-
89
- @media (prefers-color-scheme: light) {
90
- body {
91
- color: #1a1a1a;
92
- background-color: #f5f5f5;
93
- }
94
- }
95
-
96
- /* example/styles/main.css */
97
- header {
98
- display: flex;
99
- text-align: center;
100
- background-color: #1a1a1a;
101
- justify-content: space-between;
102
- align-items: center;
103
- padding: 2rem;
104
- box-shadow: 0 2px 4px #0000001a;
105
- }
106
-
107
- header a {
108
- position: relative;
109
- color: #5fbeeb;
110
- text-decoration: none;
111
- }
112
-
113
- header a:after {
114
- content: "";
115
- position: absolute;
116
- transform-origin: left;
117
- background: linear-gradient(90deg, #5fbeeb 0%, #35d5a2 50%, #ff4b91 100%);
118
- width: 100%;
119
- height: 2px;
120
- transition: transform .25s ease-in-out;
121
- bottom: 0;
122
- left: 0;
123
- transform: scaleX(0);
124
- }
125
-
126
- header a:hover:after {
127
- transform: scaleX(1);
128
- }
129
-
130
- h1 {
131
- margin-top: 2rem;
132
- font-size: 2.5rem;
133
- }
134
-
135
- .logo {
136
- will-change: filter;
137
- width: 8rem;
138
- height: 8rem;
139
- transition: filter .3s;
140
- }
141
-
142
- .logo:hover {
143
- filter: drop-shadow(0 0 2rem #5fbeeb);
144
- }
145
-
146
- nav {
147
- display: flex;
148
- justify-content: center;
149
- gap: 4rem;
150
- }
151
-
152
- header details {
153
- position: relative;
154
- }
155
-
156
- header details summary {
157
- list-style: none;
158
- appearance: none;
159
- -webkit-appearance: none;
160
- cursor: pointer;
161
- user-select: none;
162
- color: #5fbeeb;
163
- padding: .5rem 1rem;
164
- font-size: 1.5rem;
165
- font-weight: 500;
166
- }
167
-
168
- header summary:after {
169
- content: "▼";
170
- display: inline-block;
171
- margin-left: .5rem;
172
- transition: transform .3s;
173
- font-size: .75rem;
174
- }
175
-
176
- header details[open] summary:after {
177
- transform: rotate(180deg);
178
- }
179
-
180
- header details nav {
181
- position: absolute;
182
- display: flex;
183
- backdrop-filter: blur(4px);
184
- opacity: 0;
185
- pointer-events: none;
186
- z-index: 1000;
187
- background: #b9b9b91a;
188
- border: 1px solid #5fbeeb;
189
- border-radius: 1rem;
190
- flex-direction: column;
191
- gap: .75rem;
192
- padding: 1rem 1.5rem;
193
- transition: opacity .3s, transform .3s;
194
- top: 100%;
195
- right: -.5rem;
196
- transform: translateY(-8px);
197
- box-shadow: 0 4px 12px #00000040;
198
- }
199
-
200
- header details[open] nav {
201
- opacity: 1;
202
- pointer-events: auto;
203
- transform: translateY(0);
204
- }
205
-
206
- header details nav a {
207
- white-space: nowrap;
208
- padding: .25rem 0;
209
- font-size: 1.1rem;
210
- }
211
-
212
- @media (prefers-color-scheme: light) {
213
- header, button {
214
- background-color: #fff;
215
- }
216
- }
217
-
218
- /* example/styles/indexes/react-example.css */
219
- body > main {
220
- margin-top: 2rem;
221
- }
222
-
223
- body {
224
- flex: 1;
225
- }
226
-
227
- .logo.react:hover {
228
- filter: drop-shadow(0 0 2rem #61dafbaa);
229
- }
230
-
231
- @keyframes logo-spin {
232
- from {
233
- transform: rotate(0);
234
- }
235
-
236
- to {
237
- transform: rotate(360deg);
238
- }
239
- }
240
-
241
- @media (prefers-reduced-motion: no-preference) {
242
- a:nth-of-type(2) .logo {
243
- animation: logo-spin infinite 20s linear;
244
- }
245
- }