1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 | :root {
|
8 | --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
|
9 | --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
10 | --icon-check-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
11 | }
|
12 |
|
13 | [data-theme=light],
|
14 | :root:not([data-theme=dark]) {
|
15 | --invalid-color: #c62828;
|
16 | --valid-color: #388e3c;
|
17 | --nav-background-color: rgba(255, 255, 255, 0.7);
|
18 | --nav-border-color: rgba(115, 130, 140, 0.2);
|
19 | --nav-logo-color: #fff;
|
20 | --article-code-background-color: #f9fafb;
|
21 | }
|
22 |
|
23 | @media only screen and (prefers-color-scheme: dark) {
|
24 | :root:not([data-theme=light]) {
|
25 | --invalid-color: rgba(183, 28, 28, 0.5);
|
26 | --valid-color: rgba(46, 125, 50, 0.5);
|
27 | --nav-background-color: rgba(16, 24, 30, 0.8);
|
28 | --nav-border-color: rgba(115, 130, 140, 0.2);
|
29 | --nav-logo-color: #0e1419;
|
30 | --article-code-background-color: var(--code-background-color);
|
31 | }
|
32 | }
|
33 | [data-theme=dark] {
|
34 | --invalid-color: rgba(183, 28, 28, 0.5);
|
35 | --valid-color: rgba(46, 125, 50, 0.5);
|
36 | --nav-background-color: rgba(16, 24, 30, 0.8);
|
37 | --nav-border-color: rgba(115, 130, 140, 0.2);
|
38 | --nav-logo-color: #0e1419;
|
39 | --article-code-background-color: var(--code-background-color);
|
40 | }
|
41 |
|
42 |
|
43 |
|
44 |
|
45 | html {
|
46 | scroll-behavior: smooth;
|
47 | }
|
48 |
|
49 |
|
50 |
|
51 |
|
52 | body > main {
|
53 | padding-top: calc(var(--block-spacing-vertical) + 3.5rem);
|
54 | }
|
55 | @media (min-width: 992px) {
|
56 | body > main {
|
57 | --block-spacing-horizontal: calc(var(--spacing) * 1.75);
|
58 | grid-column-gap: calc(var(--block-spacing-horizontal) * 3);
|
59 | display: grid;
|
60 | grid-template-columns: 200px auto;
|
61 | }
|
62 | }
|
63 | @media (min-width: 1200px) {
|
64 | body > main {
|
65 | --block-spacing-horizontal: calc(var(--spacing) * 2);
|
66 | }
|
67 | }
|
68 | body > main > aside,
|
69 | body > main div[role=document] {
|
70 | min-width: 0;
|
71 | }
|
72 |
|
73 | div[role=document] section a[href*="//"]:not([href*="https://picocss.com"], [role])::after {
|
74 | display: inline-block;
|
75 | width: 1rem;
|
76 | height: 1rem;
|
77 | background-image: var(--icon-external);
|
78 | background-position: top center;
|
79 | background-size: 0.66rem auto;
|
80 | background-repeat: no-repeat;
|
81 | content: "";
|
82 | }
|
83 |
|
84 | svg {
|
85 | height: 1rem;
|
86 | }
|
87 |
|
88 |
|
89 |
|
90 |
|
91 | main > aside nav {
|
92 | width: 100%;
|
93 | padding-bottom: var(--block-spacing-vertical);
|
94 | }
|
95 | @media (min-width: 992px) {
|
96 | main > aside nav {
|
97 | position: fixed;
|
98 | width: 200px;
|
99 | max-height: calc(100vh - 5.5rem);
|
100 | overflow-x: hidden;
|
101 | overflow-y: auto;
|
102 | }
|
103 | }
|
104 | main > aside nav a#toggle-docs-navigation {
|
105 | display: block;
|
106 | margin: 0;
|
107 | margin-bottom: var(--spacing);
|
108 | padding: 0;
|
109 | padding-bottom: var(--spacing);
|
110 | border-bottom: var(--border-width) solid var(--accordion-border-color);
|
111 | }
|
112 | main > aside nav a#toggle-docs-navigation svg {
|
113 | margin-right: calc(var(--spacing) * 0.5);
|
114 | vertical-align: -3px;
|
115 | }
|
116 | @media (min-width: 992px) {
|
117 | main > aside nav a#toggle-docs-navigation {
|
118 | display: none;
|
119 | }
|
120 | }
|
121 | main > aside nav.closed-on-mobile a#toggle-docs-navigation svg.collapse {
|
122 | display: none;
|
123 | }
|
124 | main > aside nav.closed-on-mobile details {
|
125 | display: none;
|
126 | }
|
127 | @media (min-width: 992px) {
|
128 | main > aside nav.closed-on-mobile details {
|
129 | display: block;
|
130 | }
|
131 | main > aside nav.closed-on-mobile > a#toggle-docs-navigation {
|
132 | display: none;
|
133 | }
|
134 | }
|
135 | main > aside nav.open a#toggle-docs-navigation svg.expand {
|
136 | display: none;
|
137 | }
|
138 | main > aside details {
|
139 | padding-bottom: 0;
|
140 | }
|
141 | main > aside details summary {
|
142 | padding-bottom: 0.5rem;
|
143 | }
|
144 | main > aside li,
|
145 | main > aside summary {
|
146 | padding-top: 0;
|
147 | padding-bottom: 0;
|
148 | font-size: 16px;
|
149 | }
|
150 | main > aside ul {
|
151 | padding-left: 0.25rem;
|
152 | }
|
153 | main > aside li a {
|
154 | --nav-link-spacing-vertical: 0.25rem;
|
155 | --nav-link-spacing-horizontal: 0.75rem;
|
156 | }
|
157 | main > aside li a svg {
|
158 | vertical-align: middle;
|
159 | }
|
160 | main > aside a.secondary:focus {
|
161 | background-color: transparent;
|
162 | color: var(--primary-hover);
|
163 | }
|
164 | main > aside a[aria-current],
|
165 | main > aside a[aria-current]:hover {
|
166 | color: var(--primary);
|
167 | }
|
168 | main > aside details {
|
169 | border-bottom: none;
|
170 | }
|
171 | main > aside details summary {
|
172 | color: var(--h1-color);
|
173 | font-weight: 300;
|
174 | font-size: 14px;
|
175 | text-transform: uppercase;
|
176 | }
|
177 | main > aside details summary::after {
|
178 | display: none;
|
179 | }
|
180 | main > aside details[open] > summary {
|
181 | margin-bottom: 0;
|
182 | }
|
183 | main > aside details[open] > summary:not([role=button], :focus) {
|
184 | color: var(--h1-color);
|
185 | }
|
186 |
|
187 |
|
188 |
|
189 |
|
190 | #themes button.theme-switcher:first-of-type {
|
191 | --font-weight: bold;
|
192 | }
|
193 | #themes button.theme-switcher i {
|
194 | font-style: normal;
|
195 | }
|
196 |
|
197 | #customization figure {
|
198 | display: grid;
|
199 | grid-template-rows: repeat(2, 1fr);
|
200 | grid-template-columns: repeat(9, 1fr);
|
201 | margin-bottom: 0;
|
202 | overflow: hidden;
|
203 | }
|
204 | @media (min-width: 576px) {
|
205 | #customization figure {
|
206 | grid-template-rows: 1fr;
|
207 | grid-template-columns: repeat(18, 1fr);
|
208 | border-top-right-radius: var(--border-radius);
|
209 | border-top-left-radius: var(--border-radius);
|
210 | }
|
211 | }
|
212 | #customization figure ~ article {
|
213 | margin-top: 0;
|
214 | border-top-right-radius: 0;
|
215 | border-top-left-radius: 0;
|
216 | }
|
217 | #customization figure button {
|
218 | margin-bottom: 0;
|
219 | padding: 0;
|
220 | padding-top: 100%;
|
221 | border: none;
|
222 | border-radius: 0;
|
223 | }
|
224 | #customization figure button:focus {
|
225 | box-shadow: none;
|
226 | }
|
227 | #customization figure button.picked {
|
228 | background-image: var(--icon-check);
|
229 | background-position: center;
|
230 | background-size: 0.66rem auto;
|
231 | background-repeat: no-repeat;
|
232 | box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);
|
233 | }
|
234 | #customization figure button[data-color=lime].picked, #customization figure button[data-color=yellow].picked, #customization figure button[data-color=amber].picked {
|
235 | background-image: var(--icon-check-dark);
|
236 | }
|
237 | #customization h4 {
|
238 | transition: color var(--transition);
|
239 | }
|
240 | #customization pre[data-theme=generated] {
|
241 | border-color: var(--primary);
|
242 | }
|
243 |
|
244 | #grid {
|
245 | --grid-spacing-vertical: 1rem;
|
246 | }
|
247 | #grid button {
|
248 | display: block;
|
249 | width: 100%;
|
250 | margin-bottom: var(--spacing);
|
251 | }
|
252 | @media (min-width: 576px) {
|
253 | #grid button {
|
254 | display: inline-block;
|
255 | width: auto;
|
256 | margin-right: 0.5rem;
|
257 | }
|
258 | }
|
259 | #grid button svg {
|
260 | stroke: var(--secondary);
|
261 | margin-right: 0.5rem;
|
262 | border: 2px solid currentColor;
|
263 | border-radius: 1rem;
|
264 | background: currentColor;
|
265 | }
|
266 | #grid .grid > * {
|
267 | padding: calc(var(--spacing) / 2) 0;
|
268 | border-radius: var(--border-radius);
|
269 | background: var(--code-background-color);
|
270 | font-size: 87.5%;
|
271 | text-align: center;
|
272 | }
|
273 | #grid details {
|
274 | margin-top: calc(var(--typography-spacing-vertical) * 2);
|
275 | }
|
276 | #grid details svg {
|
277 | vertical-align: bottom;
|
278 | }
|
279 |
|
280 | #buttons a[role=button] {
|
281 | margin-right: calc(var(--spacing) * 0.5);
|
282 | }
|
283 |
|
284 | #forms div.grid {
|
285 | grid-row-gap: 0;
|
286 | }
|
287 |
|
288 | #modal button {
|
289 | --font-weight: bold;
|
290 | }
|
291 |
|
292 |
|
293 |
|
294 |
|
295 | h1 {
|
296 | margin-top: -0.25em;
|
297 | }
|
298 |
|
299 | section > hgroup {
|
300 | margin-bottom: calc(var(--typography-spacing-vertical) * 2);
|
301 | }
|
302 |
|
303 | [role=document] section > h1,
|
304 | [role=document] section > h2,
|
305 | [role=document] section > h3 {
|
306 | line-height: 1;
|
307 | }
|
308 |
|
309 |
|
310 |
|
311 |
|
312 | article > footer.code {
|
313 | background: var(--article-code-background-color);
|
314 | }
|
315 |
|
316 | article pre,
|
317 | article pre code {
|
318 | margin-bottom: 0;
|
319 | background: transparent;
|
320 | }
|
321 |
|
322 | section > pre {
|
323 | margin: var(--block-spacing-vertical) 0;
|
324 | padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
|
325 | background: var(--article-code-background-color);
|
326 | box-shadow: var(--card-box-shadow);
|
327 | }
|
328 |
|
329 | [data-theme=invalid],
|
330 | [data-theme=valid] {
|
331 | position: relative;
|
332 | margin-bottom: 0 !important;
|
333 | }
|
334 | [data-theme=invalid]:before,
|
335 | [data-theme=valid]:before {
|
336 | display: block;
|
337 | position: absolute;
|
338 | top: 0;
|
339 | right: 0;
|
340 | padding: 0.375rem 0.75rem;
|
341 | border-radius: 0;
|
342 | color: var(--primary-inverse);
|
343 | font-size: 14px;
|
344 | line-height: 1;
|
345 | }
|
346 | @media (min-width: 992px) {
|
347 | [data-theme=invalid]:before,
|
348 | [data-theme=valid]:before {
|
349 | top: var(--spacing);
|
350 | right: var(--spacing);
|
351 | }
|
352 | }
|
353 | [data-theme=invalid] code,
|
354 | [data-theme=valid] code {
|
355 | padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem) var(--block-spacing-horizontal);
|
356 | }
|
357 |
|
358 | [data-theme=invalid]:before {
|
359 | background: var(--invalid-color);
|
360 | content: "Not so great";
|
361 | }
|
362 |
|
363 | [data-theme=valid]:before {
|
364 | background: var(--valid-color);
|
365 | content: "Great";
|
366 | }
|
367 |
|
368 |
|
369 |
|
370 |
|
371 | dialog.example {
|
372 | display: block;
|
373 | z-index: inherit;
|
374 | position: relative;
|
375 | top: inherit;
|
376 | right: inherit;
|
377 | bottom: inherit;
|
378 | left: inherit;
|
379 | align-items: inherit;
|
380 | justify-content: inherit;
|
381 | width: inherit;
|
382 | min-width: inherit;
|
383 | height: inherit;
|
384 | min-height: inherit;
|
385 | padding: 0;
|
386 | background-color: inherit;
|
387 | }
|
388 | dialog.example article {
|
389 | max-width: inherit;
|
390 | }
|
391 | dialog.example:not([open]), dialog.example[open=false] {
|
392 | display: none;
|
393 | }
|
394 |
|
395 | .dialog-is-open body > button {
|
396 | filter: blur(0.125rem);
|
397 | }
|
398 |
|
399 |
|
400 |
|
401 |
|
402 | body > nav {
|
403 | --nav-link-spacing-vertical: 1rem;
|
404 | -webkit-backdrop-filter: saturate(180%) blur(20px);
|
405 | z-index: 99;
|
406 | position: fixed;
|
407 | top: 0;
|
408 | right: 0;
|
409 | left: 0;
|
410 | backdrop-filter: saturate(180%) blur(20px);
|
411 | background-color: var(--nav-background-color);
|
412 | box-shadow: 0px 1px 0 var(--nav-border-color);
|
413 | }
|
414 | body > nav.container-fluid {
|
415 | padding-right: calc(var(--spacing) + var(--scrollbar-width, 0px));
|
416 | }
|
417 | body > nav a {
|
418 | border-radius: 0;
|
419 | }
|
420 | body > nav svg {
|
421 | vertical-align: text-bottom;
|
422 | }
|
423 | body > nav ul:first-of-type {
|
424 | margin-left: calc(var(--spacing) * -1);
|
425 | }
|
426 | body > nav ul:first-of-type li {
|
427 | padding: 0;
|
428 | }
|
429 | body > nav ul:first-of-type li:first-of-type a {
|
430 | display: block;
|
431 | margin: 0;
|
432 | padding: 0;
|
433 | background: var(--h1-color);
|
434 | color: var(--nav-logo-color);
|
435 | }
|
436 | body > nav ul:first-of-type li:first-of-type a svg {
|
437 | display: block;
|
438 | width: 3.5rem;
|
439 | height: 3.5rem;
|
440 | }
|
441 | body > nav ul:first-of-type li:nth-of-type(2) {
|
442 | display: none;
|
443 | margin-left: calc(var(--spacing) * 1.5);
|
444 | color: var(--h1-color);
|
445 | }
|
446 | @media (min-width: 992px) {
|
447 | body > nav ul:first-of-type li:nth-of-type(2) {
|
448 | display: inline;
|
449 | }
|
450 | }
|
451 |
|
452 |
|
453 |
|
454 |
|
455 | .switcher {
|
456 | position: fixed;
|
457 | right: calc(var(--spacing) / 2 + var(--scrollbar-width, 0px));
|
458 | bottom: var(--spacing);
|
459 | width: auto;
|
460 | margin-bottom: 0;
|
461 | padding: 0.75rem;
|
462 | border-radius: 2rem;
|
463 | box-shadow: var(--card-box-shadow);
|
464 | line-height: 1;
|
465 | text-align: right;
|
466 | }
|
467 | .switcher::after {
|
468 | display: inline-block;
|
469 | width: 1rem;
|
470 | height: 1rem;
|
471 | border: 0.15rem solid currentColor;
|
472 | border-radius: 50%;
|
473 | background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);
|
474 | content: "";
|
475 | vertical-align: bottom;
|
476 | transition: transform var(--transition);
|
477 | }
|
478 | .switcher i {
|
479 | display: inline-block;
|
480 | max-width: 0;
|
481 | padding: 0;
|
482 | overflow: hidden;
|
483 | font-style: normal;
|
484 | font-size: 0.875rem;
|
485 | white-space: nowrap;
|
486 | }
|
487 | .switcher:hover, .switcher:focus {
|
488 | max-width: 100%;
|
489 | transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
490 | }
|
491 | .switcher:hover::after {
|
492 | transform: rotate(180deg);
|
493 | }
|
494 | .switcher:hover i {
|
495 | max-width: 100%;
|
496 | padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);
|
497 | transition: max-width var(--transition), padding var(--transition);
|
498 | }
|
499 | .switcher:focus {
|
500 | box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);
|
501 | }
|
502 | @media (min-width: 576px) {
|
503 | .switcher {
|
504 | right: calc(var(--spacing) + var(--scrollbar-width, 0px));
|
505 | }
|
506 | }
|
507 |
|
508 |
|
\ | No newline at end of file |