dolibarr 20.0.0
pico.css.php
1<?php
2/* Copyright (C) 2024 Laurent Destailleur <eldy@users.sourceforge.net>
3 *
4 * This program is free software; you can redistribute it and/or modify
5 * it under the terms of the GNU General Public License as published by
6 * the Free Software Foundation; either version 3 of the License, or
7 * (at your option) any later version.
8 *
9 * This program is distributed in the hope that it will be useful,
10 * but WITHOUT ANY WARRANTY; without even the implied warranty of
11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12 * GNU General Public License for more details.
13 *
14 * You should have received a copy of the GNU General Public License
15 * along with this program. If not, see <https://www.gnu.org/licenses/>.
16 */
17
23//if (! defined('NOREQUIREUSER')) define('NOREQUIREUSER','1'); // Not disabled because need to load personalized language
24//if (! defined('NOREQUIREDB')) define('NOREQUIREDB','1'); // Not disabled to increase speed. Language code is found on url.
25if (!defined('NOREQUIRESOC')) {
26 define('NOREQUIRESOC', '1');
27}
28//if (! defined('NOREQUIRETRAN')) define('NOREQUIRETRAN','1'); // Not disabled because need to do translations
29if (!defined('NOCSRFCHECK')) {
30 define('NOCSRFCHECK', 1);
31}
32if (!defined('NOTOKENRENEWAL')) {
33 define('NOTOKENRENEWAL', 1);
34}
35if (!defined('NOLOGIN')) {
36 define('NOLOGIN', 1); // File must be accessed by logon page so without login.
37}
38//if (!defined('NOREQUIREMENU')) define('NOREQUIREMENU',1); // We load menu manager class (note that object loaded may have wrong content because NOLOGIN is set and some values depends on login)
39if (!defined('NOREQUIREHTML')) {
40 define('NOREQUIREHTML', 1);
41}
42if (!defined('NOREQUIREAJAX')) {
43 define('NOREQUIREAJAX', '1');
44}
45
46session_cache_limiter('public');
47
48require_once __DIR__.'/../../../main.inc.php'; // __DIR__ allow this script to be included in custom themes
49require_once __DIR__.'/../../../webportal/class/webPortalTheme.class.php';
50
51$webPortalTheme = new WebPortalTheme();
52
53// Define css type
54top_httphead('text/css');
55// Important: Following code is to avoid page request by browser and PHP CPU at each Dolibarr page access.
56if (empty($dolibarr_nocache)) {
57 header('Cache-Control: max-age=10800, public, must-revalidate');
58} else {
59 header('Cache-Control: no-cache');
60}
61?>
62@charset "UTF-8";
71:root {
72 --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
73 "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
74 "Segoe UI Symbol", "Noto Color Emoji";
75 --line-height: 1.5;
76 --font-weight: 400;
77 --font-size: 16px;
78 --border-radius: 0.25rem;
79 --border-width: 1px;
80 --outline-width: 3px;
81 --spacing: 1rem;
82 --typography-spacing-vertical: 1.5rem;
83 --block-spacing-vertical: calc(var(--spacing) * 1.5);
84 --block-spacing-horizontal: var(--spacing);
85 --grid-spacing-vertical: 0;
86 --grid-spacing-horizontal: var(--spacing);
87 --form-element-spacing-vertical: 0.3em;
88 --form-element-spacing-horizontal: 0.5em;
89 --nav-element-spacing-vertical: 1rem;
90 --nav-element-spacing-horizontal: 1rem;
91 --nav-link-spacing-vertical: 0.5rem;
92 --nav-link-spacing-horizontal: 0.5rem;
93 --form-label-font-weight: var(--font-weight);
94 --transition: 0.2s ease-in-out;
95 --modal-overlay-backdrop-filter: blur(0.25rem);
96}
97@media (min-width: 576px) {
98 :root {
99 --font-size: 15px;
100 }
101}
102@media (min-width: 768px) {
103 :root {
104 --font-size: 15px;
105 }
106}
107@media (min-width: 992px) {
108 :root {
109 --font-size: 16px;
110 }
111}
112@media (min-width: 1200px) {
113 :root {
114 --font-size: 17px;
115 }
116}
117
118@media (min-width: 576px) {
119 body > header,
120 body > main,
121 body > footer,
122 section {
123 --block-spacing-vertical: calc(var(--spacing) * 2);
124 }
125}
126@media (min-width: 768px) {
127 body > header,
128 body > main,
129 body > footer,
130 section {
131 --block-spacing-vertical: calc(var(--spacing) * 2.2);
132 }
133}
134@media (min-width: 992px) {
135 body > header,
136 body > main,
137 body > footer,
138 section {
139 --block-spacing-vertical: calc(var(--spacing) * 2.3);
140 }
141}
142@media (min-width: 1200px) {
143 body > header,
144 body > main,
145 body > footer,
146 section {
147 --block-spacing-vertical: calc(var(--spacing) * 2.5);
148 }
149}
150
151@media (min-width: 576px) {
152 article {
153 --block-spacing-horizontal: calc(var(--spacing) * 1.25);
154 }
155}
156@media (min-width: 768px) {
157 article {
158 --block-spacing-horizontal: calc(var(--spacing) * 1.5);
159 }
160}
161@media (min-width: 992px) {
162 article {
163 --block-spacing-horizontal: calc(var(--spacing) * 1.75);
164 }
165}
166@media (min-width: 1200px) {
167 article {
168 --block-spacing-horizontal: calc(var(--spacing) * 2);
169 }
170}
171
172dialog > article {
173 --block-spacing-vertical: calc(var(--spacing) * 2);
174 --block-spacing-horizontal: var(--spacing);
175}
176@media (min-width: 576px) {
177 dialog > article {
178 --block-spacing-vertical: calc(var(--spacing) * 2.5);
179 --block-spacing-horizontal: calc(var(--spacing) * 1.25);
180 }
181}
182@media (min-width: 768px) {
183 dialog > article {
184 --block-spacing-vertical: calc(var(--spacing) * 3);
185 --block-spacing-horizontal: calc(var(--spacing) * 1.5);
186 }
187}
188
189html{
190 scroll-behavior: smooth;
191}
192
193a {
194 --text-decoration: none;
195}
196a.secondary, a.contrast {
197 --text-decoration: underline;
198}
199
200small {
201 --font-size: 0.875em;
202}
203
204h1,
205h2,
206h3,
207h4,
208h5,
209h6 {
210 --font-weight: 700;
211}
212
213h1 {
214 --font-weight: 200;
215 --font-size: 2.5rem;
216 --typography-spacing-vertical: 3rem;
217}
218
219h2 {
220 --font-weight: 200;
221 --font-size: 1.75rem;
222 --typography-spacing-vertical: 2.625rem;
223}
224
225h3 {
226 --font-size: 1.5rem;
227 --typography-spacing-vertical: 2.25rem;
228}
229
230h4 {
231 --font-size: 1.25rem;
232 --typography-spacing-vertical: 1.874rem;
233}
234
235h5 {
236 --font-size: 1.125rem;
237 --typography-spacing-vertical: 1.6875rem;
238}
239
240[type=checkbox],
241[type=radio] {
242 --border-width: 2px;
243}
244
245[type=checkbox][role=switch] {
246 --border-width: 3px;
247}
248
249thead th,
250thead td,
251tfoot th,
252tfoot td {
253 --border-width: 2px;
254}
255
256:not(thead, tfoot) > * > td {
257 --font-size: 0.875em;
258}
259
260pre,
261code,
262kbd,
263samp {
264 --font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace",
265 "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace,
266 "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
267}
268
269kbd {
270 --font-weight: bolder;
271}
272
273:where(:root) {
274 --background-color: #fff;
275 --color: hsl(<?php echo $webPortalTheme->primaryColorHsl['h']; ?>, <?php echo $webPortalTheme->primaryColorHsl['s']; ?>%, <?php echo $webPortalTheme->primaryColorHsl['l']; ?>%);
276 --h1-color: hsl(205, 30%, 15%);
277 --h2-color: #24333e;
278 --h3-color: hsl(205, 25%, 23%);
279 --h4-color: #374956;
280 --h5-color: hsl(205, 20%, 32%);
281 --h6-color: #4d606d;
282 --muted-color: hsl(205, 10%, 50%);
283 --muted-border-color: hsl(205, 20%, 94%);
284
285 --banner-background : #ededed;
286 --primary-color-hue : <?php echo $webPortalTheme->primaryColorHsl['h']; ?>;
287 --primary-color-saturation : <?php echo $webPortalTheme->primaryColorHsl['s']; ?>%;
288 --primary-color-lightness : <?php echo $webPortalTheme->primaryColorHsl['l']; ?>%;
289 --primary : hsl(var(--primary-color-hue), var(--primary-color-saturation), var(--primary-color-lightness));
290 --primary-hover: hsl(var(--primary-color-hue), 90%, 32%);
291 --primary-focus: hsl(var(--primary-color-hue), var(--primary-color-saturation), var(--primary-color-lightness), 0.125);
292 --primary-inverse: #fff;
293 --secondary: hsl(205, 15%, 41%);
294 --secondary-hover: hsl(205, 20%, 32%);
295 --secondary-focus: rgba(89, 107, 120, 0.125);
296 --secondary-inverse: #fff;
297 --contrast: hsl(205, 30%, 15%);
298 --contrast-hover: #000;
299 --contrast-focus: rgba(89, 107, 120, 0.125);
300 --contrast-inverse: #fff;
301 --mark-background-color: #fff2ca;
302 --mark-color: #543a26;
303 --ins-color: #388e3c;
304 --del-color: #c62828;
305 --blockquote-border-color: var(--muted-border-color);
306 --blockquote-footer-color: var(--muted-color);
307 --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
308 --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
309 --form-element-background-color: transparent;
310 --form-element-border-color: hsl(205, 14%, 68%);
311 --form-element-color: var(--color);
312 --form-element-placeholder-color: var(--muted-color);
313 --form-element-active-background-color: transparent;
314 --form-element-active-border-color: var(--primary);
315 --form-element-focus-color: var(--primary-focus);
316 --form-element-disabled-background-color: hsl(205, 18%, 86%);
317 --form-element-disabled-border-color: hsl(205, 14%, 68%);
318 --form-element-disabled-opacity: 0.5;
319 --form-element-invalid-border-color: #c62828;
320 --form-element-invalid-active-border-color: #d32f2f;
321 --form-element-invalid-focus-color: rgba(211, 47, 47, 0.125);
322 --form-element-valid-border-color: #388e3c;
323 --form-element-valid-active-border-color: #43a047;
324 --form-element-valid-focus-color: rgba(67, 160, 71, 0.125);
325 --switch-background-color: hsl(205, 16%, 77%);
326 --switch-color: var(--primary-inverse);
327 --switch-checked-background-color: var(--primary);
328 --range-border-color: hsl(205, 18%, 86%);
329 --range-active-border-color: hsl(205, 16%, 77%);
330 --range-thumb-border-color: var(--background-color);
331 --range-thumb-color: var(--secondary);
332 --range-thumb-hover-color: var(--secondary-hover);
333 --range-thumb-active-color: var(--primary);
334 --table-border-color: var(--muted-border-color);
335 --table-row-stripped-background-color: #f6f8f9;
336 --code-background-color: hsl(205, 20%, 94%);
337 --code-color: var(--muted-color);
338 --code-kbd-background-color: var(--contrast);
339 --code-kbd-color: var(--contrast-inverse);
340 --code-tag-color: hsl(330, 40%, 50%);
341 --code-property-color: hsl(185, 40%, 40%);
342 --code-value-color: hsl(40, 20%, 50%);
343 --code-comment-color: hsl(205, 14%, 68%);
344 --accordion-border-color: var(--muted-border-color);
345 --accordion-close-summary-color: var(--color);
346 --accordion-open-summary-color: var(--muted-color);
347 --card-background-color: var(--background-color);
348 --card-border-color: var(--muted-border-color);
349 --card-box-shadow:
350 0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698),
351 0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024),
352 0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03),
353 0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036),
354 0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302),
355 0.5rem 1rem 6rem rgba(27, 40, 50, 0.06),
356 0 0 0 0.0625rem rgba(27, 40, 50, 0.015);
357 --card-sectionning-background-color: #fbfbfc;
358 --dropdown-background-color: #fbfbfc;
359 --dropdown-border-color: #e1e6eb;
360 --dropdown-box-shadow: var(--card-box-shadow);
361 --dropdown-color: var(--color);
362 --dropdown-hover-background-color: hsl(205, 20%, 94%);
363 --modal-overlay-background-color: rgba(213, 220, 226, 0.7);
364 --progress-background-color: hsl(205, 18%, 86%);
365 --progress-color: var(--primary);
366 --loading-spinner-opacity: 0.5;
367 --tooltip-background-color: var(--contrast);
368 --tooltip-color: var(--contrast-inverse);
369
371 --icon-checkbox: 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='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
372 --icon-chevron: 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(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
373 --icon-chevron-button: 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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
374 --icon-chevron-button-inverse: 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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
375 --icon-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='-96 0 10.24 10.24' style='fill:rgba(65, 84, 98)'%3E%3Cpath d='M-96 1.92h10.24l-5.12 6.4z' /%3E%3C/svg%3E");
376 --icon-close: 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)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
377 --icon-date: 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(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
378 --icon-invalid: 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(198, 40, 40)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
379 --icon-minus: 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='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
380 --icon-search: 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(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
381 --icon-time: 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(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
382 --icon-valid: 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(56, 142, 60)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
383
384 --nav-background-color: rgba(255,255,255,0.8);
385 --nav-border-color: rgba(127,127,127,0.3);
386
387 color-scheme: light;
388
389
391 --login-form-border-color: #D1D1D4;
392 --login-form-border-color-hover: hsl(var(--primary-color-hue), var(--primary-color-saturation), 50%);
393 --login-form-icon-color: hsl(var(--primary-color-hue), var(--primary-color-saturation), 50%);
394 /* Use image or Linear background */
395 --login-background : linear-gradient(
396 90deg,
397 hsl(var(--primary-color-hue), var(--primary-color-saturation), 70%),
398 hsl(var(--primary-color-hue), var(--primary-color-saturation), 90%)
399 );
400
401}
402
403/*@media only screen and (prefers-color-scheme: dark) {*/
404/* :root:not([data-theme]) {*/
405/* --background-color: #11191f;*/
406/* --color: hsl(205, 16%, 77%);*/
407/* --h1-color: hsl(205, 20%, 94%);*/
408/* --h2-color: #e1e6eb;*/
409/* --h3-color: hsl(205, 18%, 86%);*/
410/* --h4-color: #c8d1d8;*/
411/* --h5-color: hsl(205, 16%, 77%);*/
412/* --h6-color: #afbbc4;*/
413/* --muted-color: hsl(205, 10%, 50%);*/
414/* --muted-border-color: #1f2d38;*/
415/* --primary: hsl(195, 85%, 41%);*/
416/* --primary-hover: hsl(195, 80%, 50%);*/
417/* --primary-focus: rgba(16, 149, 193, 0.25);*/
418/* --primary-inverse: #fff;*/
419/* --secondary: hsl(205, 15%, 41%);*/
420/* --secondary-hover: hsl(205, 10%, 50%);*/
421/* --secondary-focus: rgba(115, 130, 140, 0.25);*/
422/* --secondary-inverse: #fff;*/
423/* --contrast: hsl(205, 20%, 94%);*/
424/* --contrast-hover: #fff;*/
425/* --contrast-focus: rgba(115, 130, 140, 0.25);*/
426/* --contrast-inverse: #000;*/
427/* --mark-background-color: #d1c284;*/
428/* --mark-color: #11191f;*/
429/* --ins-color: #388e3c;*/
430/* --del-color: #c62828;*/
431/* --blockquote-border-color: var(--muted-border-color);*/
432/* --blockquote-footer-color: var(--muted-color);*/
433/* --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);*/
434/* --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);*/
435/* --form-element-background-color: #11191f;*/
436/* --form-element-border-color: #374956;*/
437/* --form-element-color: var(--color);*/
438/* --form-element-placeholder-color: var(--muted-color);*/
439/* --form-element-active-background-color: var(--form-element-background-color);*/
440/* --form-element-active-border-color: var(--primary);*/
441/* --form-element-focus-color: var(--primary-focus);*/
442/* --form-element-disabled-background-color: hsl(205, 25%, 23%);*/
443/* --form-element-disabled-border-color: hsl(205, 20%, 32%);*/
444/* --form-element-disabled-opacity: 0.5;*/
445/* --form-element-invalid-border-color: #b71c1c;*/
446/* --form-element-invalid-active-border-color: #c62828;*/
447/* --form-element-invalid-focus-color: rgba(198, 40, 40, 0.25);*/
448/* --form-element-valid-border-color: #2e7d32;*/
449/* --form-element-valid-active-border-color: #388e3c;*/
450/* --form-element-valid-focus-color: rgba(56, 142, 60, 0.25);*/
451/* --switch-background-color: #374956;*/
452/* --switch-color: var(--primary-inverse);*/
453/* --switch-checked-background-color: var(--primary);*/
454/* --range-border-color: #24333e;*/
455/* --range-active-border-color: hsl(205, 25%, 23%);*/
456/* --range-thumb-border-color: var(--background-color);*/
457/* --range-thumb-color: var(--secondary);*/
458/* --range-thumb-hover-color: var(--secondary-hover);*/
459/* --range-thumb-active-color: var(--primary);*/
460/* --table-border-color: var(--muted-border-color);*/
461/* --table-row-stripped-background-color: rgba(115, 130, 140, 0.05);*/
462/* --code-background-color: #18232c;*/
463/* --code-color: var(--muted-color);*/
464/* --code-kbd-background-color: var(--contrast);*/
465/* --code-kbd-color: var(--contrast-inverse);*/
466/* --code-tag-color: hsl(330, 30%, 50%);*/
467/* --code-property-color: hsl(185, 30%, 50%);*/
468/* --code-value-color: hsl(40, 10%, 50%);*/
469/* --code-comment-color: #4d606d;*/
470/* --accordion-border-color: var(--muted-border-color);*/
471/* --accordion-active-summary-color: var(--primary);*/
472/* --accordion-close-summary-color: var(--color);*/
473/* --accordion-open-summary-color: var(--muted-color);*/
474/* --card-background-color: #141e26;*/
475/* --card-border-color: var(--card-background-color);*/
476/* --card-box-shadow:*/
477/* 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),*/
478/* 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),*/
479/* 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),*/
480/* 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),*/
481/* 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302),*/
482/* 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06),*/
483/* 0 0 0 0.0625rem rgba(0, 0, 0, 0.015);*/
484/* --card-sectionning-background-color: #18232c;*/
485/* --dropdown-background-color: hsl(205, 30%, 15%);*/
486/* --dropdown-border-color: #24333e;*/
487/* --dropdown-box-shadow: var(--card-box-shadow);*/
488/* --dropdown-color: var(--color);*/
489/* --dropdown-hover-background-color: rgba(36, 51, 62, 0.75);*/
490/* --modal-overlay-background-color: rgba(36, 51, 62, 0.8);*/
491/* --progress-background-color: #24333e;*/
492/* --progress-color: var(--primary);*/
493/* --loading-spinner-opacity: 0.5;*/
494/* --tooltip-background-color: var(--contrast);*/
495/* --tooltip-color: var(--contrast-inverse);*/
496/* --icon-checkbox: 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='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");*/
497/* --icon-chevron: 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(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");*/
498/* --icon-chevron-button: 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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");*/
499/* --icon-chevron-button-inverse: 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(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");*/
500/* --icon-close: 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)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");*/
501/* --icon-date: 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(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");*/
502/* --icon-invalid: 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(183, 28, 28)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");*/
503/* --icon-minus: 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='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");*/
504/* --icon-search: 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(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");*/
505/* --icon-time: 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(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");*/
506/* --icon-valid: 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(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");*/
507/* color-scheme: dark;*/
508/* }*/
509/*}*/
510
511[data-theme=dark] {
512 --background-color: #11191f;
513 --color: hsl(205, 16%, 77%);
514 --h1-color: hsl(205, 20%, 94%);
515 --h2-color: #e1e6eb;
516 --h3-color: hsl(205, 18%, 86%);
517 --h4-color: #c8d1d8;
518 --h5-color: hsl(205, 16%, 77%);
519 --h6-color: #afbbc4;
520 --muted-color: hsl(205, 10%, 50%);
521 --muted-border-color: #1f2d38;
522 /*--primary: hsl(195, 85%, 41%);*/
523 /*--primary-hover: hsl(195, 80%, 50%);*/
524 /*--primary-focus: rgba(16, 149, 193, 0.25);*/
525 /*--primary-inverse: #fff;*/
526 --secondary: hsl(205, 15%, 41%);
527 --secondary-hover: hsl(205, 10%, 50%);
528 --secondary-focus: rgba(115, 130, 140, 0.25);
529 --secondary-inverse: #fff;
530 --contrast: hsl(205, 20%, 94%);
531 --contrast-hover: #fff;
532 --contrast-focus: rgba(115, 130, 140, 0.25);
533 --contrast-inverse: #000;
534 --mark-background-color: #d1c284;
535 --mark-color: #11191f;
536 --ins-color: #388e3c;
537 --del-color: #c62828;
538 --blockquote-border-color: var(--muted-border-color);
539 --blockquote-footer-color: var(--muted-color);
540 --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
541 --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
542 --form-element-background-color: #11191f;
543 --form-element-border-color: #374956;
544 --form-element-color: var(--color);
545 --form-element-placeholder-color: var(--muted-color);
546 --form-element-active-background-color: var(--form-element-background-color);
547 --form-element-active-border-color: var(--primary);
548 --form-element-focus-color: var(--primary-focus);
549 --form-element-disabled-background-color: hsl(205, 25%, 23%);
550 --form-element-disabled-border-color: hsl(205, 20%, 32%);
551 --form-element-disabled-opacity: 0.5;
552 --form-element-invalid-border-color: #b71c1c;
553 --form-element-invalid-active-border-color: #c62828;
554 --form-element-invalid-focus-color: rgba(198, 40, 40, 0.25);
555 --form-element-valid-border-color: #2e7d32;
556 --form-element-valid-active-border-color: #388e3c;
557 --form-element-valid-focus-color: rgba(56, 142, 60, 0.25);
558 --switch-background-color: #374956;
559 --switch-color: var(--primary-inverse);
560 --switch-checked-background-color: var(--primary);
561 --range-border-color: #24333e;
562 --range-active-border-color: hsl(205, 25%, 23%);
563 --range-thumb-border-color: var(--background-color);
564 --range-thumb-color: var(--secondary);
565 --range-thumb-hover-color: var(--secondary-hover);
566 --range-thumb-active-color: var(--primary);
567 --table-border-color: var(--muted-border-color);
568 --table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
569 --code-background-color: #18232c;
570 --code-color: var(--muted-color);
571 --code-kbd-background-color: var(--contrast);
572 --code-kbd-color: var(--contrast-inverse);
573 --code-tag-color: hsl(330, 30%, 50%);
574 --code-property-color: hsl(185, 30%, 50%);
575 --code-value-color: hsl(40, 10%, 50%);
576 --code-comment-color: #4d606d;
577 --accordion-border-color: var(--muted-border-color);
578 --accordion-active-summary-color: var(--primary);
579 --accordion-close-summary-color: var(--color);
580 --accordion-open-summary-color: var(--muted-color);
581 --card-background-color: #141e26;
582 --card-border-color: var(--card-background-color);
583 --card-box-shadow:
584 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
585 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
586 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
587 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
588 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302),
589 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06),
590 0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
591 --card-sectionning-background-color: #18232c;
592 --dropdown-background-color: hsl(205, 30%, 15%);
593 --dropdown-border-color: #24333e;
594 --dropdown-box-shadow: var(--card-box-shadow);
595 --dropdown-color: var(--color);
596 --dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
597 --modal-overlay-background-color: rgba(36, 51, 62, 0.8);
598 --progress-background-color: #24333e;
599 --progress-color: var(--primary);
600 --loading-spinner-opacity: 0.5;
601 --tooltip-background-color: var(--contrast);
602 --tooltip-color: var(--contrast-inverse);
603
604
606 --icon-checkbox: 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='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
607 --icon-chevron: 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(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
608 --icon-chevron-button: 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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
609 --icon-chevron-button-inverse: 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(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
610 --icon-close: 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)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
611 --icon-date: 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(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
612 --icon-invalid: 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(183, 28, 28)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
613 --icon-minus: 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='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
614 --icon-search: 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(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
615 --icon-time: 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(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
616 --icon-valid: 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(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
617 color-scheme: dark;
618}
619
620progress,
621[type=checkbox],
622[type=radio],
623[type=range] {
624 accent-color: var(--primary);
625}
626
631*,
632*::before,
633*::after {
634 box-sizing: border-box;
635 background-repeat: no-repeat;
636}
637
638::before,
639::after {
640 text-decoration: inherit;
641 vertical-align: inherit;
642}
643
644:where(:root) {
645 -webkit-tap-highlight-color: transparent;
646 -webkit-text-size-adjust: 100%;
647 -moz-text-size-adjust: 100%;
648 text-size-adjust: 100%;
649 background-color: var(--background-color);
650 color: var(--color);
651 font-weight: var(--font-weight);
652 font-size: var(--font-size);
653 line-height: var(--line-height);
654 font-family: var(--font-family);
655 text-rendering: optimizeLegibility;
656 overflow-wrap: break-word;
657 cursor: default;
658 -moz-tab-size: 4;
659 -o-tab-size: 4;
660 tab-size: 4;
661}
662
667main {
668 display: block;
669}
670
671body {
672 width: 100%;
673 margin: 0;
674}
675body > header,
676body > main,
677body > footer {
678 width: 100%;
679 margin-right: auto;
680 margin-left: auto;
681 padding: var(--block-spacing-vertical) 0;
682}
683
687.container,
688.container-fluid {
689 width: 100%;
690 margin-right: auto;
691 margin-left: auto;
692 padding-right: var(--spacing);
693 padding-left: var(--spacing);
694}
695
696@media (min-width: 576px) {
697 .container {
698 max-width: 510px;
699 padding-right: 0;
700 padding-left: 0;
701 }
702}
703@media (min-width: 768px) {
704 .container {
705 max-width: 700px;
706 }
707}
708@media (min-width: 992px) {
709 .container {
710 max-width: 920px;
711 }
712}
713@media (min-width: 1200px) {
714 .container {
715 max-width: 1130px;
716 }
717}
718
723section {
724 margin-bottom: var(--block-spacing-vertical);
725}
726
731.grid {
732 grid-column-gap: var(--grid-spacing-horizontal);
733 grid-row-gap: var(--grid-spacing-vertical);
734 display: grid;
735 grid-template-columns: 1fr;
736 margin: 0;
737}
738@media (min-width: 992px) {
739 .grid {
740 grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
741 }
742}
743.grid > * {
744 min-width: 0;
745}
746
750figure {
751 display: block;
752 margin: 0;
753 padding: 0;
754 overflow-x: auto;
755}
756figure figcaption {
757 padding: calc(var(--spacing) * 0.5) 0;
758 color: var(--muted-color);
759}
760
764b,
765strong {
766 font-weight: bolder;
767}
768
769sub,
770sup {
771 position: relative;
772 font-size: 0.75em;
773 line-height: 0;
774 vertical-align: baseline;
775}
776
777sub {
778 bottom: -0.25em;
779}
780
781sup {
782 top: -0.5em;
783}
784
785address,
786blockquote,
787dl,
788figure,
789form,
790ol,
791p,
792pre,
793table,
794ul {
795 margin-top: 0;
796 margin-bottom: var(--typography-spacing-vertical);
797 color: var(--color);
798 font-style: normal;
799 font-weight: var(--font-weight);
800 font-size: var(--font-size);
801}
802
803a,
804[role=link] {
805 --color: var(--primary);
806 --background-color: transparent;
807 outline: none;
808 background-color: var(--background-color);
809 color: var(--color);
810 -webkit-text-decoration: var(--text-decoration);
811 text-decoration: var(--text-decoration);
812 transition: background-color var(--transition), color var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
813 transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
814 transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
815}
816a:is([aria-current], :hover, :active, :focus),
817[role=link]:is([aria-current], :hover, :active, :focus) {
818 --color: var(--primary-hover);
819 --text-decoration: underline;
820}
821a:focus,
822[role=link]:focus {
823 --background-color: var(--primary-focus);
824}
825a.secondary,
826[role=link].secondary {
827 --color: var(--secondary);
828}
829a.secondary:is([aria-current], :hover, :active, :focus),
830[role=link].secondary:is([aria-current], :hover, :active, :focus) {
831 --color: var(--secondary-hover);
832}
833a.secondary:focus,
834[role=link].secondary:focus {
835 --background-color: var(--secondary-focus);
836}
837a.contrast,
838[role=link].contrast {
839 --color: var(--contrast);
840}
841a.contrast:is([aria-current], :hover, :active, :focus),
842[role=link].contrast:is([aria-current], :hover, :active, :focus) {
843 --color: var(--contrast-hover);
844}
845a.contrast:focus,
846[role=link].contrast:focus {
847 --background-color: var(--contrast-focus);
848}
849
850h1,
851h2,
852h3,
853h4,
854h5,
855h6 {
856 margin-top: 0;
857 color: var(--color);
858 font-weight: var(--font-weight);
859 font-size: var(--font-size);
860 font-family: var(--font-family);
861}
862
863h1 {
864 --color: var(--h1-color);
865}
866
867h2 {
868 --color: var(--h2-color);
869}
870
871h3 {
872 --color: var(--h3-color);
873}
874
875h4 {
876 --color: var(--h4-color);
877}
878
879h5 {
880 --color: var(--h5-color);
881}
882
883h6 {
884 --color: var(--h6-color);
885}
886
887:where(address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
888 margin-top: var(--typography-spacing-vertical);
889}
890
891hgroup,
892.headings {
893 margin-bottom: var(--typography-spacing-vertical);
894}
895hgroup > *,
896.headings > * {
897 margin-bottom: 0;
898}
899hgroup > *:last-child,
900.headings > *:last-child {
901 --color: var(--muted-color);
902 --font-weight: unset;
903 font-size: 1rem;
904 font-family: unset;
905}
906
907p {
908 margin-bottom: var(--typography-spacing-vertical);
909}
910
911small {
912 font-size: var(--font-size);
913}
914
915:where(dl, ol, ul) {
916 padding-right: 0;
917 padding-left: var(--spacing);
918 -webkit-padding-start: var(--spacing);
919 padding-inline-start: var(--spacing);
920 -webkit-padding-end: 0;
921 padding-inline-end: 0;
922}
923:where(dl, ol, ul) li {
924 margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
925}
926
927:where(dl, ol, ul) :is(dl, ol, ul) {
928 margin: 0;
929 margin-top: calc(var(--typography-spacing-vertical) * 0.25);
930}
931
932ul li {
933 list-style: square;
934}
935
936mark {
937 padding: 0.125rem 0.25rem;
938 background-color: var(--mark-background-color);
939 color: var(--mark-color);
940 vertical-align: baseline;
941}
942
943blockquote {
944 display: block;
945 margin: var(--typography-spacing-vertical) 0;
946 padding: var(--spacing);
947 border-right: none;
948 border-left: 0.25rem solid var(--blockquote-border-color);
949 -webkit-border-start: 0.25rem solid var(--blockquote-border-color);
950 border-inline-start: 0.25rem solid var(--blockquote-border-color);
951 -webkit-border-end: none;
952 border-inline-end: none;
953}
954blockquote footer {
955 margin-top: calc(var(--typography-spacing-vertical) * 0.5);
956 color: var(--blockquote-footer-color);
957}
958
959abbr[title] {
960 border-bottom: 1px dotted;
961 text-decoration: none;
962 cursor: help;
963}
964
965ins {
966 color: var(--ins-color);
967 text-decoration: none;
968}
969
970del {
971 color: var(--del-color);
972}
973
974::-moz-selection {
975 background-color: var(--primary-focus);
976}
977
978::selection {
979 background-color: var(--primary-focus);
980}
981
985:where(audio, canvas, iframe, img, svg, video) {
986 vertical-align: middle;
987}
988
989audio,
990video {
991 display: inline-block;
992}
993
994audio:not([controls]) {
995 display: none;
996 height: 0;
997}
998
999:where(iframe) {
1000 border-style: none;
1001}
1002
1003img {
1004 max-width: 100%;
1005 height: auto;
1006 border-style: none;
1007}
1008
1009:where(svg:not([fill])) {
1010 fill: currentColor;
1011}
1012
1013svg:not(:root) {
1014 overflow: hidden;
1015}
1016
1020button {
1021 margin: 0;
1022 overflow: visible;
1023 font-family: inherit;
1024 text-transform: none;
1025}
1026
1027button,
1028[type=button],
1029[type=reset],
1030[type=submit] {
1031 -webkit-appearance: button;
1032}
1033
1034button {
1035 display: block;
1036 width: 100%;
1037 margin-bottom: var(--spacing);
1038}
1039
1040[role=button] {
1041 display: inline-block;
1042 text-decoration: none;
1043}
1044
1045button,
1046input[type=submit],
1047input[type=button],
1048input[type=reset],
1049[role=button] {
1050 --background-color: var(--primary);
1051 --border-color: var(--primary);
1052 --color: var(--primary-inverse);
1053 --box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
1054 padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
1055 border: var(--border-width) solid var(--border-color);
1056 border-radius: var(--border-radius);
1057 outline: none;
1058 background-color: var(--background-color);
1059 box-shadow: var(--box-shadow);
1060 color: var(--color);
1061 font-weight: var(--font-weight);
1062 font-size: 1rem;
1063 line-height: var(--line-height);
1064 text-align: center;
1065 cursor: pointer;
1066 transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
1067}
1068button:is([aria-current], :hover, :active, :focus),
1069input[type=submit]:is([aria-current], :hover, :active, :focus),
1070input[type=button]:is([aria-current], :hover, :active, :focus),
1071input[type=reset]:is([aria-current], :hover, :active, :focus),
1072[role=button]:is([aria-current], :hover, :active, :focus) {
1073 --background-color: var(--primary-hover);
1074 --border-color: var(--primary-hover);
1075 --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
1076 --color: var(--primary-inverse);
1077}
1078button:focus,
1079input[type=submit]:focus,
1080input[type=button]:focus,
1081input[type=reset]:focus,
1082[role=button]:focus {
1083 --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
1084 0 0 0 var(--outline-width) var(--primary-focus);
1085}
1086
1087:is(button, input[type=submit], input[type=button], [role=button]).secondary,
1088input[type=reset] {
1089 --background-color: var(--secondary);
1090 --border-color: var(--secondary);
1091 --color: var(--secondary-inverse);
1092 cursor: pointer;
1093}
1094:is(button, input[type=submit], input[type=button], [role=button]).secondary:is([aria-current], :hover, :active, :focus),
1095input[type=reset]:is([aria-current], :hover, :active, :focus) {
1096 --background-color: var(--secondary-hover);
1097 --border-color: var(--secondary-hover);
1098 --color: var(--secondary-inverse);
1099}
1100:is(button, input[type=submit], input[type=button], [role=button]).secondary:focus,
1101input[type=reset]:focus {
1102 --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
1103 0 0 0 var(--outline-width) var(--secondary-focus);
1104}
1105
1106:is(button, input[type=submit], input[type=button], [role=button]).contrast {
1107 --background-color: var(--contrast);
1108 --border-color: var(--contrast);
1109 --color: var(--contrast-inverse);
1110}
1111:is(button, input[type=submit], input[type=button], [role=button]).contrast:is([aria-current], :hover, :active, :focus) {
1112 --background-color: var(--contrast-hover);
1113 --border-color: var(--contrast-hover);
1114 --color: var(--contrast-inverse);
1115}
1116:is(button, input[type=submit], input[type=button], [role=button]).contrast:focus {
1117 --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
1118 0 0 0 var(--outline-width) var(--contrast-focus);
1119}
1120
1121:is(button, input[type=submit], input[type=button], [role=button]).outline,
1122input[type=reset].outline {
1123 --background-color: transparent;
1124 --color: var(--primary);
1125}
1126:is(button, input[type=submit], input[type=button], [role=button]).outline:is([aria-current], :hover, :active, :focus),
1127input[type=reset].outline:is([aria-current], :hover, :active, :focus) {
1128 --background-color: transparent;
1129 --color: var(--primary-hover);
1130}
1131
1132:is(button, input[type=submit], input[type=button], [role=button]).outline.secondary,
1133input[type=reset].outline {
1134 --color: var(--secondary);
1135}
1136:is(button, input[type=submit], input[type=button], [role=button]).outline.secondary:is([aria-current], :hover, :active, :focus),
1137input[type=reset].outline:is([aria-current], :hover, :active, :focus) {
1138 --color: var(--secondary-hover);
1139}
1140
1141:is(button, input[type=submit], input[type=button], [role=button]).outline.contrast {
1142 --color: var(--contrast);
1143}
1144:is(button, input[type=submit], input[type=button], [role=button]).outline.contrast:is([aria-current], :hover, :active, :focus) {
1145 --color: var(--contrast-hover);
1146}
1147
1148:where(button, [type=submit], [type=button], [type=reset], [role=button])[disabled],
1149:where(fieldset[disabled]) :is(button, [type=submit], [type=button], [type=reset], [role=button]),
1150a[role=button]:not([href]) {
1151 opacity: 0.5;
1152 pointer-events: none;
1153}
1154
1158input,
1159optgroup,
1160select,
1161textarea {
1162 margin: 0;
1163 font-size: 1rem;
1164 line-height: var(--line-height);
1165 font-family: inherit;
1166 letter-spacing: inherit;
1167}
1168
1169input {
1170 overflow: visible;
1171}
1172
1173select {
1174 text-transform: none;
1175}
1176
1177legend {
1178 max-width: 100%;
1179 padding: 0;
1180 color: inherit;
1181 white-space: normal;
1182}
1183
1184textarea {
1185 overflow: auto;
1186}
1187
1188[type=checkbox],
1189[type=radio] {
1190 padding: 0;
1191}
1192
1193::-webkit-inner-spin-button,
1194::-webkit-outer-spin-button {
1195 height: auto;
1196}
1197
1198[type=search] {
1199 -webkit-appearance: textfield;
1200 outline-offset: -2px;
1201}
1202
1203[type=search]::-webkit-search-decoration {
1204 -webkit-appearance: none;
1205}
1206
1207::-webkit-file-upload-button {
1208 -webkit-appearance: button;
1209 font: inherit;
1210}
1211
1212::-moz-focus-inner {
1213 padding: 0;
1214 border-style: none;
1215}
1216
1217:-moz-focusring {
1218 outline: none;
1219}
1220
1221:-moz-ui-invalid {
1222 box-shadow: none;
1223}
1224
1225::-ms-expand {
1226 display: none;
1227}
1228
1229[type=file],
1230[type=range] {
1231 padding: 0;
1232 border-width: 0;
1233}
1234
1235input:not([type=checkbox], [type=radio], [type=range]) {
1236 height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
1237}
1238
1239fieldset {
1240 margin: 0;
1241 margin-bottom: var(--spacing);
1242 padding: 0;
1243 border: 0;
1244}
1245
1246label,
1247fieldset legend {
1248 display: block;
1249 margin-bottom: calc(var(--spacing) * 0.25);
1250 font-weight: var(--form-label-font-weight, var(--font-weight));
1251}
1252
1253input:not([type=checkbox], [type=radio]),
1254select,
1255textarea {
1256 width: 100%;
1257}
1258
1259input:not([type=checkbox], [type=radio], [type=range], [type=file]),
1260select,
1261textarea {
1262 -webkit-appearance: none;
1263 -moz-appearance: none;
1264 appearance: none;
1265 padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
1266}
1267
1268input,
1269select,
1270textarea {
1271 --background-color: var(--form-element-background-color);
1272 --border-color: var(--form-element-border-color);
1273 --color: var(--form-element-color);
1274 --box-shadow: none;
1275 border: var(--border-width) solid var(--border-color);
1276 border-radius: var(--border-radius);
1277 outline: none;
1278 background-color: var(--background-color);
1279 box-shadow: var(--box-shadow);
1280 color: var(--color);
1281 font-weight: var(--font-weight);
1282 transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
1283}
1284
1285input:not([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [readonly]):is(:active, :focus),
1286:where(select, textarea):is(:active, :focus) {
1287 --background-color: var(--form-element-active-background-color);
1288}
1289
1290input:not([type=submit], [type=button], [type=reset], [role=switch], [readonly]):is(:active, :focus),
1291:where(select, textarea):is(:active, :focus) {
1292 --border-color: var(--form-element-active-border-color);
1293}
1294
1295input:not([type=submit], [type=button], [type=reset], [type=range], [type=file], [readonly]):focus,
1296select:focus,
1297textarea:focus {
1298 --box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
1299}
1300
1301input:not([type=submit], [type=button], [type=reset])[disabled],
1302select[disabled],
1303textarea[disabled],
1304:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
1305 --background-color: var(--form-element-disabled-background-color);
1306 --border-color: var(--form-element-disabled-border-color);
1307 opacity: var(--form-element-disabled-opacity);
1308 pointer-events: none;
1309}
1310
1311:where(input, select, textarea):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week])[aria-invalid] {
1312 padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
1313 padding-left: var(--form-element-spacing-horizontal);
1314 -webkit-padding-start: var(--form-element-spacing-horizontal) !important;
1315 padding-inline-start: var(--form-element-spacing-horizontal) !important;
1316 -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
1317 padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
1318 background-position: center right 0.75rem;
1319 background-size: 1rem auto;
1320 background-repeat: no-repeat;
1321}
1322:where(input, select, textarea):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week])[aria-invalid=false] {
1323 background-image: var(--icon-valid);
1324}
1325:where(input, select, textarea):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week])[aria-invalid=true] {
1326 background-image: var(--icon-invalid);
1327}
1328:where(input, select, textarea)[aria-invalid=false] {
1329 --border-color: var(--form-element-valid-border-color);
1330}
1331:where(input, select, textarea)[aria-invalid=false]:is(:active, :focus) {
1332 --border-color: var(--form-element-valid-active-border-color) !important;
1333 --box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;
1334}
1335:where(input, select, textarea)[aria-invalid=true] {
1336 --border-color: var(--form-element-invalid-border-color);
1337}
1338:where(input, select, textarea)[aria-invalid=true]:is(:active, :focus) {
1339 --border-color: var(--form-element-invalid-active-border-color) !important;
1340 --box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
1341}
1342
1343[dir=rtl] :where(input, select, textarea):not([type=checkbox], [type=radio]):is([aria-invalid], [aria-invalid=true], [aria-invalid=false]) {
1344 background-position: center left 0.75rem;
1345}
1346
1347input::placeholder,
1348input::-webkit-input-placeholder,
1349textarea::placeholder,
1350textarea::-webkit-input-placeholder,
1351select:invalid {
1352 color: var(--form-element-placeholder-color);
1353 opacity: 1;
1354}
1355
1356input:not([type=checkbox], [type=radio]),
1357select,
1358textarea {
1359 margin-bottom: var(--spacing);
1360}
1361
1362select::-ms-expand {
1363 border: 0;
1364 background-color: transparent;
1365}
1366select:not([multiple], [size]) {
1367 padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
1368 padding-left: var(--form-element-spacing-horizontal);
1369 -webkit-padding-start: var(--form-element-spacing-horizontal);
1370 padding-inline-start: var(--form-element-spacing-horizontal);
1371 -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
1372 padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
1373 background-image: var(--icon-chevron);
1374 background-position: center right 0.75rem;
1375 background-size: 1rem auto;
1376 background-repeat: no-repeat;
1377}
1378
1379[dir=rtl] select:not([multiple], [size]) {
1380 background-position: center left 0.75rem;
1381}
1382
1383:where(input, select, textarea, .grid) + small {
1384 display: block;
1385 width: 100%;
1386 margin-top: calc(var(--spacing) * -0.75);
1387 margin-bottom: var(--spacing);
1388 color: var(--muted-color);
1389}
1390
1391label > :where(input, select, textarea) {
1392 margin-top: calc(var(--spacing) * 0.25);
1393}
1394
1399[type=checkbox],
1400[type=radio] {
1401 -webkit-appearance: none;
1402 -moz-appearance: none;
1403 appearance: none;
1404 width: 1.25em;
1405 height: 1.25em;
1406 margin-top: -0.125em;
1407 margin-right: 0.375em;
1408 margin-left: 0;
1409 -webkit-margin-start: 0;
1410 margin-inline-start: 0;
1411 -webkit-margin-end: 0.375em;
1412 margin-inline-end: 0.375em;
1413 border-width: var(--border-width);
1414 font-size: inherit;
1415 vertical-align: middle;
1416 cursor: pointer;
1417}
1418[type=checkbox]::-ms-check,
1419[type=radio]::-ms-check {
1420 display: none;
1421}
1422[type=checkbox]:checked, [type=checkbox]:checked:active, [type=checkbox]:checked:focus,
1423[type=radio]:checked,
1424[type=radio]:checked:active,
1425[type=radio]:checked:focus {
1426 --background-color: var(--primary);
1427 --border-color: var(--primary);
1428 background-image: var(--icon-checkbox);
1429 background-position: center;
1430 background-size: 0.75em auto;
1431 background-repeat: no-repeat;
1432}
1433[type=checkbox] ~ label,
1434[type=radio] ~ label {
1435 display: inline-block;
1436 margin-right: 0.375em;
1437 margin-bottom: 0;
1438 cursor: pointer;
1439}
1440
1441[type=checkbox]:indeterminate {
1442 --background-color: var(--primary);
1443 --border-color: var(--primary);
1444 background-image: var(--icon-minus);
1445 background-position: center;
1446 background-size: 0.75em auto;
1447 background-repeat: no-repeat;
1448}
1449
1450[type=radio] {
1451 border-radius: 50%;
1452}
1453[type=radio]:checked, [type=radio]:checked:active, [type=radio]:checked:focus {
1454 --background-color: var(--primary-inverse);
1455 border-width: 0.35em;
1456 background-image: none;
1457}
1458
1459[type=checkbox][role=switch] {
1460 --background-color: var(--switch-background-color);
1461 --border-color: var(--switch-background-color);
1462 --color: var(--switch-color);
1463 width: 2.25em;
1464 height: 1.25em;
1465 border: var(--border-width) solid var(--border-color);
1466 border-radius: 1.25em;
1467 background-color: var(--background-color);
1468 line-height: 1.25em;
1469}
1470[type=checkbox][role=switch]:focus {
1471 --background-color: var(--switch-background-color);
1472 --border-color: var(--switch-background-color);
1473}
1474[type=checkbox][role=switch]:checked {
1475 --background-color: var(--switch-checked-background-color);
1476 --border-color: var(--switch-checked-background-color);
1477}
1478[type=checkbox][role=switch]:before {
1479 display: block;
1480 width: calc(1.25em - (var(--border-width) * 2));
1481 height: 100%;
1482 border-radius: 50%;
1483 background-color: var(--color);
1484 content: "";
1485 transition: margin 0.1s ease-in-out;
1486}
1487[type=checkbox][role=switch]:checked {
1488 background-image: none;
1489}
1490[type=checkbox][role=switch]:checked::before {
1491 margin-left: calc(1.125em - var(--border-width));
1492 -webkit-margin-start: calc(1.125em - var(--border-width));
1493 margin-inline-start: calc(1.125em - var(--border-width));
1494}
1495
1496[type=checkbox][aria-invalid=false],
1497[type=checkbox]:checked[aria-invalid=false],
1498[type=radio][aria-invalid=false],
1499[type=radio]:checked[aria-invalid=false],
1500[type=checkbox][role=switch][aria-invalid=false],
1501[type=checkbox][role=switch]:checked[aria-invalid=false] {
1502 --border-color: var(--form-element-valid-border-color);
1503}
1504[type=checkbox][aria-invalid=true],
1505[type=checkbox]:checked[aria-invalid=true],
1506[type=radio][aria-invalid=true],
1507[type=radio]:checked[aria-invalid=true],
1508[type=checkbox][role=switch][aria-invalid=true],
1509[type=checkbox][role=switch]:checked[aria-invalid=true] {
1510 --border-color: var(--form-element-invalid-border-color);
1511}
1512
1517[type=color]::-webkit-color-swatch-wrapper {
1518 padding: 0;
1519}
1520[type=color]::-moz-focus-inner {
1521 padding: 0;
1522}
1523[type=color]::-webkit-color-swatch {
1524 border: 0;
1525 border-radius: calc(var(--border-radius) * 0.5);
1526}
1527[type=color]::-moz-color-swatch {
1528 border: 0;
1529 border-radius: calc(var(--border-radius) * 0.5);
1530}
1531
1532input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
1533 --icon-position: 0.75rem;
1534 --icon-width: 1rem;
1535 padding-right: calc(var(--icon-width) + var(--icon-position));
1536 background-image: var(--icon-date);
1537 background-position: center right var(--icon-position);
1538 background-size: var(--icon-width) auto;
1539 background-repeat: no-repeat;
1540}
1541input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
1542 background-image: var(--icon-time);
1543}
1544
1545[type=date]::-webkit-calendar-picker-indicator,
1546[type=datetime-local]::-webkit-calendar-picker-indicator,
1547[type=month]::-webkit-calendar-picker-indicator,
1548[type=time]::-webkit-calendar-picker-indicator,
1549[type=week]::-webkit-calendar-picker-indicator {
1550 width: var(--icon-width);
1551 margin-right: calc(var(--icon-width) * -1);
1552 margin-left: var(--icon-position);
1553 opacity: 0;
1554}
1555
1556[dir=rtl] :is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
1557 text-align: right;
1558}
1559
1560@-moz-document url-prefix() {
1561 [type=date],
1562 [type=datetime-local],
1563 [type=month],
1564 [type=time],
1565 [type=week] {
1566 padding-right: var(--form-element-spacing-horizontal) !important;
1567 background-image: none !important;
1568 }
1569}
1570[type=file] {
1571 --color: var(--muted-color);
1572 padding: calc(var(--form-element-spacing-vertical) * 0.5) 0;
1573 border: 0;
1574 border-radius: 0;
1575 background: none;
1576}
1577[type=file]::file-selector-button {
1578 --background-color: var(--secondary);
1579 --border-color: var(--secondary);
1580 --color: var(--secondary-inverse);
1581 margin-right: calc(var(--spacing) / 2);
1582 margin-left: 0;
1583 -webkit-margin-start: 0;
1584 margin-inline-start: 0;
1585 -webkit-margin-end: calc(var(--spacing) / 2);
1586 margin-inline-end: calc(var(--spacing) / 2);
1587 padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
1588 border: var(--border-width) solid var(--border-color);
1589 border-radius: var(--border-radius);
1590 outline: none;
1591 background-color: var(--background-color);
1592 box-shadow: var(--box-shadow);
1593 color: var(--color);
1594 font-weight: var(--font-weight);
1595 font-size: 1rem;
1596 line-height: var(--line-height);
1597 text-align: center;
1598 cursor: pointer;
1599 transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
1600}
1601[type=file]::file-selector-button:is(:hover, :active, :focus) {
1602 --background-color: var(--secondary-hover);
1603 --border-color: var(--secondary-hover);
1604}
1605[type=file]::-webkit-file-upload-button {
1606 --background-color: var(--secondary);
1607 --border-color: var(--secondary);
1608 --color: var(--secondary-inverse);
1609 margin-right: calc(var(--spacing) / 2);
1610 margin-left: 0;
1611 -webkit-margin-start: 0;
1612 margin-inline-start: 0;
1613 -webkit-margin-end: calc(var(--spacing) / 2);
1614 margin-inline-end: calc(var(--spacing) / 2);
1615 padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
1616 border: var(--border-width) solid var(--border-color);
1617 border-radius: var(--border-radius);
1618 outline: none;
1619 background-color: var(--background-color);
1620 box-shadow: var(--box-shadow);
1621 color: var(--color);
1622 font-weight: var(--font-weight);
1623 font-size: 1rem;
1624 line-height: var(--line-height);
1625 text-align: center;
1626 cursor: pointer;
1627 -webkit-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
1628 transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
1629}
1630[type=file]::-webkit-file-upload-button:is(:hover, :active, :focus) {
1631 --background-color: var(--secondary-hover);
1632 --border-color: var(--secondary-hover);
1633}
1634[type=file]::-ms-browse {
1635 --background-color: var(--secondary);
1636 --border-color: var(--secondary);
1637 --color: var(--secondary-inverse);
1638 margin-right: calc(var(--spacing) / 2);
1639 margin-left: 0;
1640 margin-inline-start: 0;
1641 margin-inline-end: calc(var(--spacing) / 2);
1642 padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
1643 border: var(--border-width) solid var(--border-color);
1644 border-radius: var(--border-radius);
1645 outline: none;
1646 background-color: var(--background-color);
1647 box-shadow: var(--box-shadow);
1648 color: var(--color);
1649 font-weight: var(--font-weight);
1650 font-size: 1rem;
1651 line-height: var(--line-height);
1652 text-align: center;
1653 cursor: pointer;
1654 -ms-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
1655 transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
1656}
1657[type=file]::-ms-browse:is(:hover, :active, :focus) {
1658 --background-color: var(--secondary-hover);
1659 --border-color: var(--secondary-hover);
1660}
1661
1662[type=range] {
1663 -webkit-appearance: none;
1664 -moz-appearance: none;
1665 appearance: none;
1666 width: 100%;
1667 height: 1.25rem;
1668 background: none;
1669}
1670[type=range]::-webkit-slider-runnable-track {
1671 width: 100%;
1672 height: 0.25rem;
1673 border-radius: var(--border-radius);
1674 background-color: var(--range-border-color);
1675 -webkit-transition: background-color var(--transition), box-shadow var(--transition);
1676 transition: background-color var(--transition), box-shadow var(--transition);
1677}
1678[type=range]::-moz-range-track {
1679 width: 100%;
1680 height: 0.25rem;
1681 border-radius: var(--border-radius);
1682 background-color: var(--range-border-color);
1683 -moz-transition: background-color var(--transition), box-shadow var(--transition);
1684 transition: background-color var(--transition), box-shadow var(--transition);
1685}
1686[type=range]::-ms-track {
1687 width: 100%;
1688 height: 0.25rem;
1689 border-radius: var(--border-radius);
1690 background-color: var(--range-border-color);
1691 -ms-transition: background-color var(--transition), box-shadow var(--transition);
1692 transition: background-color var(--transition), box-shadow var(--transition);
1693}
1694[type=range]::-webkit-slider-thumb {
1695 -webkit-appearance: none;
1696 width: 1.25rem;
1697 height: 1.25rem;
1698 margin-top: -0.5rem;
1699 border: 2px solid var(--range-thumb-border-color);
1700 border-radius: 50%;
1701 background-color: var(--range-thumb-color);
1702 cursor: pointer;
1703 -webkit-transition: background-color var(--transition), transform var(--transition);
1704 transition: background-color var(--transition), transform var(--transition);
1705}
1706[type=range]::-moz-range-thumb {
1707 -webkit-appearance: none;
1708 width: 1.25rem;
1709 height: 1.25rem;
1710 margin-top: -0.5rem;
1711 border: 2px solid var(--range-thumb-border-color);
1712 border-radius: 50%;
1713 background-color: var(--range-thumb-color);
1714 cursor: pointer;
1715 -moz-transition: background-color var(--transition), transform var(--transition);
1716 transition: background-color var(--transition), transform var(--transition);
1717}
1718[type=range]::-ms-thumb {
1719 -webkit-appearance: none;
1720 width: 1.25rem;
1721 height: 1.25rem;
1722 margin-top: -0.5rem;
1723 border: 2px solid var(--range-thumb-border-color);
1724 border-radius: 50%;
1725 background-color: var(--range-thumb-color);
1726 cursor: pointer;
1727 -ms-transition: background-color var(--transition), transform var(--transition);
1728 transition: background-color var(--transition), transform var(--transition);
1729}
1730[type=range]:hover, [type=range]:focus {
1731 --range-border-color: var(--range-active-border-color);
1732 --range-thumb-color: var(--range-thumb-hover-color);
1733}
1734[type=range]:active {
1735 --range-thumb-color: var(--range-thumb-active-color);
1736}
1737[type=range]:active::-webkit-slider-thumb {
1738 transform: scale(1.25);
1739}
1740[type=range]:active::-moz-range-thumb {
1741 transform: scale(1.25);
1742}
1743[type=range]:active::-ms-thumb {
1744 transform: scale(1.25);
1745}
1746
1747input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
1748 -webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
1749 padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
1750 border-radius: 5rem;
1751 background-image: var(--icon-search);
1752 background-position: center left 1.125rem;
1753 background-size: 1rem auto;
1754 background-repeat: no-repeat;
1755}
1756input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] {
1757 -webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
1758 padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
1759 background-position: center left 1.125rem, center right 0.75rem;
1760}
1761input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid=false] {
1762 background-image: var(--icon-search), var(--icon-valid);
1763}
1764input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid=true] {
1765 background-image: var(--icon-search), var(--icon-invalid);
1766}
1767
1768[type=search]::-webkit-search-cancel-button {
1769 -webkit-appearance: none;
1770 display: none;
1771}
1772
1773[dir=rtl] :where(input):not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
1774 background-position: center right 1.125rem;
1775}
1776[dir=rtl] :where(input):not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] {
1777 background-position: center right 1.125rem, center left 0.75rem;
1778}
1779
1783:where(table) {
1784 width: 100%;
1785 border-collapse: collapse;
1786 border-spacing: 0;
1787 text-indent: 0;
1788}
1789
1790:where(table caption){
1791 text-align: left;
1792 text-align: start;
1793}
1794
1795
1796th,
1797td {
1798 padding: calc(var(--spacing) / 2) var(--spacing);
1799 border-bottom: var(--border-width) solid var(--table-border-color);
1800 color: var(--color);
1801 font-weight: var(--font-weight);
1802 font-size: var(--font-size);
1803 text-align: left;
1804 text-align: start;
1805}
1806
1807tfoot th,
1808tfoot td {
1809 border-top: var(--border-width) solid var(--table-border-color);
1810 border-bottom: 0;
1811}
1812
1813
1814
1815table[role=grid] tbody tr:nth-child(odd) {
1816 background-color: var(--table-row-stripped-background-color);
1817}
1818
1819
1820
1821/* Search row of table **/
1822table tr[role="search-row"]{
1823 --spacing:3px;
1824}
1825
1826thead tr[role="search-row"] th,
1827thead tr[role="search-row"] td,
1828tfoot tr[role="search-row"] th,
1829tfoot tr[role="search-row"] td {
1830 --border-width:1px;
1831}
1832
1833:where(tr[role="search-row"]) input,
1834:where(tr[role="search-row"]) select,
1835:where(tr[role="search-row"]) textarea {
1836 --border-color:var(--table-border-color);
1837}
1838
1839
1840/* col ordering */
1841[table-order]{
1842 position: relative;
1843}
1844[table-order]:after, [table-order=asc]:after{
1845 --icon-size: calc(var(--spacing) / 2);
1846 content: "";
1847 width: var(--icon-size);
1848 height: var(--icon-size);
1849 display: block;
1850 position: absolute;
1851 bottom: calc(50% - var(--icon-size));
1852 left: 0 ;
1853 background-image: var(--icon-caret);
1854 background-position: center center;
1855 background-size: calc(var(--icon-size)) auto;
1856 background-repeat: no-repeat;
1857 transform: rotateX(0);
1858 opacity: 0.5;
1859}
1860
1861[table-order=desc]:after{
1862 transform: rotateX(180deg);
1863}
1864
1865@media screen and (max-width: 600px) {
1866 table[responsive="collapse"] {
1867 border: 0;
1868 }
1869
1870 table[responsive="collapse"] caption {
1871 font-size: 1.3em;
1872 }
1873
1874 table[responsive="collapse"] thead tr{
1875 border: none;
1876 clip: rect(0 0 0 0);
1877 height: 1px;
1878 margin: -1px;
1879 overflow: hidden;
1880 padding: 0;
1881 position: absolute;
1882 width: 1px;
1883 }
1884
1885 table[responsive="collapse"] tr {
1886 border: 1px solid var(--table-border-color);
1887 border-bottom: 3px solid var(--table-border-color);
1888 display: block;
1889 margin-bottom: .625em;
1890 }
1891
1892 table[responsive="collapse"] td {
1893 border-bottom: 1px solid var(--table-border-color);
1894 display: block;
1895 font-size: .8em;
1896 text-align: right;
1897 }
1898
1899 table[responsive="collapse"] td::before {
1900 /*
1901 * aria-label has no advantage, it won't be read inside a table
1902 content: attr(aria-label);
1903 */
1904 content: attr(data-label);
1905 float: left;
1906 font-weight: bold;
1907 text-transform: uppercase;
1908 }
1909
1910 table[responsive="collapse"] td:last-child {
1911 border-bottom: 0;
1912 }
1913}
1914
1915
1916
1917
1921pre,
1922code,
1923kbd,
1924samp {
1925 font-size: 0.875em;
1926 font-family: var(--font-family);
1927}
1928
1929pre {
1930 -ms-overflow-style: scrollbar;
1931 overflow: auto;
1932}
1933
1934pre,
1935code,
1936kbd {
1937 border-radius: var(--border-radius);
1938 background: var(--code-background-color);
1939 color: var(--code-color);
1940 font-weight: var(--font-weight);
1941 line-height: initial;
1942}
1943
1944code,
1945kbd {
1946 display: inline-block;
1947 padding: 0.375rem 0.5rem;
1948}
1949
1950pre {
1951 display: block;
1952 margin-bottom: var(--spacing);
1953 overflow-x: auto;
1954}
1955pre > code {
1956 display: block;
1957 padding: var(--spacing);
1958 background: none;
1959 font-size: 14px;
1960 line-height: var(--line-height);
1961}
1962
1963code b {
1964 color: var(--code-tag-color);
1965 font-weight: var(--font-weight);
1966}
1967code i {
1968 color: var(--code-property-color);
1969 font-style: normal;
1970}
1971code u {
1972 color: var(--code-value-color);
1973 text-decoration: none;
1974}
1975code em {
1976 color: var(--code-comment-color);
1977 font-style: normal;
1978}
1979
1980kbd {
1981 background-color: var(--code-kbd-background-color);
1982 color: var(--code-kbd-color);
1983 vertical-align: baseline;
1984}
1985
1989hr {
1990 height: 0;
1991 border: 0;
1992 border-top: 1px solid var(--muted-border-color);
1993 color: inherit;
1994}
1995
1996[hidden],
1997template {
1998 display: none !important;
1999}
2000
2001canvas {
2002 display: inline-block;
2003}
2004
2008details {
2009 display: block;
2010 margin-bottom: var(--spacing);
2011 padding-bottom: var(--spacing);
2012 border-bottom: var(--border-width) solid var(--accordion-border-color);
2013}
2014details summary {
2015 line-height: 1rem;
2016 list-style-type: none;
2017 cursor: pointer;
2018 transition: color var(--transition);
2019}
2020details summary:not([role]) {
2021 color: var(--accordion-close-summary-color);
2022}
2023details summary::-webkit-details-marker {
2024 display: none;
2025}
2026details summary::marker {
2027 display: none;
2028}
2029details summary::-moz-list-bullet {
2030 list-style-type: none;
2031}
2032details summary::after {
2033 display: block;
2034 width: 1rem;
2035 height: 1rem;
2036 -webkit-margin-start: calc(var(--spacing, 1rem) * 0.5);
2037 margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
2038 float: right;
2039 transform: rotate(-90deg);
2040 background-image: var(--icon-chevron);
2041 background-position: right center;
2042 background-size: 1rem auto;
2043 background-repeat: no-repeat;
2044 content: "";
2045 transition: transform var(--transition);
2046}
2047details summary:focus {
2048 outline: none;
2049}
2050details summary:focus:not([role=button]) {
2051 color: var(--accordion-active-summary-color);
2052}
2053details summary[role=button] {
2054 width: 100%;
2055 text-align: left;
2056}
2057details summary[role=button]::after {
2058 height: calc(1rem * var(--line-height, 1.5));
2059 background-image: var(--icon-chevron-button);
2060}
2061details summary[role=button]:not(.outline).contrast::after {
2062 background-image: var(--icon-chevron-button-inverse);
2063}
2064details[open] > summary {
2065 margin-bottom: calc(var(--spacing));
2066}
2067details[open] > summary:not([role]):not(:focus) {
2068 color: var(--accordion-open-summary-color);
2069}
2070details[open] > summary::after {
2071 transform: rotate(0);
2072}
2073
2074[dir=rtl] details summary {
2075 text-align: right;
2076}
2077[dir=rtl] details summary::after {
2078 float: left;
2079 background-position: left center;
2080}
2081
2085article {
2086 margin: var(--block-spacing-vertical) 0;
2087 padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
2088 border-radius: var(--border-radius);
2089 background: var(--card-background-color);
2090 box-shadow: var(--card-box-shadow);
2091}
2092article > header,
2093article > footer {
2094 margin-right: calc(var(--block-spacing-horizontal) * -1);
2095 margin-left: calc(var(--block-spacing-horizontal) * -1);
2096 padding: calc(var(--block-spacing-vertical) * 0.66) var(--block-spacing-horizontal);
2097 background-color: var(--card-sectionning-background-color);
2098}
2099article > header {
2100 margin-top: calc(var(--block-spacing-vertical) * -1);
2101 margin-bottom: var(--block-spacing-vertical);
2102 border-bottom: var(--border-width) solid var(--card-border-color);
2103 border-top-right-radius: var(--border-radius);
2104 border-top-left-radius: var(--border-radius);
2105}
2106article > footer {
2107 margin-top: var(--block-spacing-vertical);
2108 margin-bottom: calc(var(--block-spacing-vertical) * -1);
2109 border-top: var(--border-width) solid var(--card-border-color);
2110 border-bottom-right-radius: var(--border-radius);
2111 border-bottom-left-radius: var(--border-radius);
2112}
2113
2117:root {
2118 --scrollbar-width: 0px;
2119}
2120
2121dialog {
2122 display: flex;
2123 z-index: 999;
2124 position: fixed;
2125 top: 0;
2126 right: 0;
2127 bottom: 0;
2128 left: 0;
2129 align-items: center;
2130 justify-content: center;
2131 width: inherit;
2132 min-width: 100%;
2133 height: inherit;
2134 min-height: 100%;
2135 padding: var(--spacing);
2136 border: 0;
2137 -webkit-backdrop-filter: var(--modal-overlay-backdrop-filter);
2138 backdrop-filter: var(--modal-overlay-backdrop-filter);
2139 background-color: var(--modal-overlay-background-color);
2140 color: var(--color);
2141}
2142dialog article {
2143 max-height: calc(100vh - var(--spacing) * 2);
2144 overflow: auto;
2145}
2146@media (min-width: 576px) {
2147 dialog article {
2148 max-width: 510px;
2149 }
2150}
2151@media (min-width: 768px) {
2152 dialog article {
2153 max-width: 700px;
2154 }
2155}
2156dialog article > header,
2157dialog article > footer {
2158 padding: calc(var(--block-spacing-vertical) * 0.5) var(--block-spacing-horizontal);
2159}
2160dialog article > header .close {
2161 margin: 0;
2162 margin-left: var(--spacing);
2163 float: right;
2164}
2165dialog article > footer {
2166 text-align: right;
2167}
2168dialog article > footer [role=button] {
2169 margin-bottom: 0;
2170}
2171dialog article > footer [role=button]:not(:first-of-type) {
2172 margin-left: calc(var(--spacing) * 0.5);
2173}
2174dialog article p:last-of-type {
2175 margin: 0;
2176}
2177dialog article .close {
2178 display: block;
2179 width: 1rem;
2180 height: 1rem;
2181 margin-top: calc(var(--block-spacing-vertical) * -0.5);
2182 margin-bottom: var(--typography-spacing-vertical);
2183 margin-left: auto;
2184 background-image: var(--icon-close);
2185 background-position: center;
2186 background-size: auto 1rem;
2187 background-repeat: no-repeat;
2188 opacity: 0.5;
2189 transition: opacity var(--transition);
2190}
2191dialog article .close:is([aria-current], :hover, :active, :focus) {
2192 opacity: 1;
2193}
2194dialog:not([open]), dialog[open=false] {
2195 display: none;
2196}
2197
2198.modal-is-open {
2199 padding-right: var(--scrollbar-width, 0px);
2200 overflow: hidden;
2201 pointer-events: none;
2202 touch-action: none;
2203}
2204.modal-is-open dialog {
2205 pointer-events: auto;
2206}
2207
2208:where(.modal-is-opening, .modal-is-closing) dialog,
2209:where(.modal-is-opening, .modal-is-closing) dialog > article {
2210 animation-duration: 0.2s;
2211 animation-timing-function: ease-in-out;
2212 animation-fill-mode: both;
2213}
2214:where(.modal-is-opening, .modal-is-closing) dialog {
2215 animation-duration: 0.8s;
2216 animation-name: modal-overlay;
2217}
2218:where(.modal-is-opening, .modal-is-closing) dialog > article {
2219 animation-delay: 0.2s;
2220 animation-name: modal;
2221}
2222
2223.modal-is-closing dialog,
2224.modal-is-closing dialog > article {
2225 animation-delay: 0s;
2226 animation-direction: reverse;
2227}
2228
2229@keyframes modal-overlay {
2230 from {
2231 -webkit-backdrop-filter: none;
2232 backdrop-filter: none;
2233 background-color: transparent;
2234 }
2235}
2236@keyframes modal {
2237 from {
2238 transform: translateY(-100%);
2239 opacity: 0;
2240 }
2241}
2245:where(nav li)::before {
2246 float: left;
2247 content: "​";
2248}
2249
2250nav,
2251nav > ul {
2252 display: flex;
2253 flex-wrap: wrap;
2254}
2255
2256nav {
2257 justify-content: space-between;
2258}
2259nav ol,
2260nav ul {
2261 align-items: center;
2262 margin-bottom: 0;
2263 padding: 0;
2264 list-style: none;
2265}
2266nav ol:first-of-type,
2267nav ul:first-of-type {
2268 margin-left: calc(var(--nav-element-spacing-horizontal) * -1);
2269}
2270nav ol:last-of-type,
2271nav ul:last-of-type {
2272 margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
2273}
2274nav li {
2275 display: inline-block;
2276 margin: 0;
2277 padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal);
2278}
2279nav li > * {
2280 --spacing: 0;
2281}
2282nav :where(a, [role=link]) {
2283 display: inline-block;
2284 margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
2285 padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
2286 border-radius: var(--border-radius);
2287 text-decoration: none;
2288}
2289nav :where(a, [role=link]):is([aria-current], :hover, :active, :focus) {
2290 text-decoration: none;
2291}
2292nav[aria-label=breadcrumb] {
2293 align-items: center;
2294 justify-content: start;
2295}
2296nav[aria-label=breadcrumb] ul li:not(:first-child) {
2297 -webkit-margin-start: var(--nav-link-spacing-horizontal);
2298 margin-inline-start: var(--nav-link-spacing-horizontal);
2299}
2300nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
2301 position: absolute;
2302 width: calc(var(--nav-link-spacing-horizontal) * 2);
2303 -webkit-margin-start: calc(var(--nav-link-spacing-horizontal) / 2);
2304 margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2);
2305 content: "/";
2306 color: var(--muted-color);
2307 text-align: center;
2308}
2309nav[aria-label=breadcrumb] a[aria-current] {
2310 background-color: transparent;
2311 color: inherit;
2312 text-decoration: none;
2313 pointer-events: none;
2314}
2315nav [role=button] {
2316 margin-right: inherit;
2317 margin-left: inherit;
2318 padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
2319}
2320
2321nav li.brand img {
2322 max-height: calc(var(--nav-element-spacing-vertical) + var(--nav-element-spacing-vertical) + var(--font-size));
2323}
2324
2325nav li.brand {
2326 padding-top: 0;
2327 padding-bottom: 0;
2328}
2329
2330aside nav,
2331aside ol,
2332aside ul,
2333aside li {
2334 display: block;
2335}
2336aside li {
2337 padding: calc(var(--nav-element-spacing-vertical) * 0.5) var(--nav-element-spacing-horizontal);
2338}
2339aside li a {
2340 display: block;
2341}
2342aside li [role=button] {
2343 margin: inherit;
2344}
2345
2346[dir=rtl] nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
2347 content: "\\";
2348}
2349
2353progress {
2354 display: inline-block;
2355 vertical-align: baseline;
2356}
2357
2358progress {
2359 -webkit-appearance: none;
2360 -moz-appearance: none;
2361 display: inline-block;
2362 appearance: none;
2363 width: 100%;
2364 height: 0.5rem;
2365 margin-bottom: calc(var(--spacing) * 0.5);
2366 overflow: hidden;
2367 border: 0;
2368 border-radius: var(--border-radius);
2369 background-color: var(--progress-background-color);
2370 color: var(--progress-color);
2371}
2372progress::-webkit-progress-bar {
2373 border-radius: var(--border-radius);
2374 background: none;
2375}
2376progress[value]::-webkit-progress-value {
2377 background-color: var(--progress-color);
2378}
2379progress::-moz-progress-bar {
2380 background-color: var(--progress-color);
2381}
2382@media (prefers-reduced-motion: no-preference) {
2383 progress:indeterminate {
2384 background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat;
2385 animation: progress-indeterminate 1s linear infinite;
2386 }
2387 progress:indeterminate[value]::-webkit-progress-value {
2388 background-color: transparent;
2389 }
2390 progress:indeterminate::-moz-progress-bar {
2391 background-color: transparent;
2392 }
2393}
2394
2395@media (prefers-reduced-motion: no-preference) {
2396 [dir=rtl] progress:indeterminate {
2397 animation-direction: reverse;
2398 }
2399}
2400
2401@keyframes progress-indeterminate {
2402 0% {
2403 background-position: 200% 0;
2404 }
2405 100% {
2406 background-position: -200% 0;
2407 }
2408}
2412details[role=list],
2413li[role=list] {
2414 position: relative;
2415}
2416
2417details[role=list] summary + ul,
2418li[role=list] > ul {
2419 display: flex;
2420 z-index: 99;
2421 position: absolute;
2422 top: auto;
2423 right: 0;
2424 left: 0;
2425 flex-direction: column;
2426 margin: 0;
2427 padding: 0;
2428 border: var(--border-width) solid var(--dropdown-border-color);
2429 border-radius: var(--border-radius);
2430 border-top-right-radius: 0;
2431 border-top-left-radius: 0;
2432 background-color: var(--dropdown-background-color);
2433 box-shadow: var(--card-box-shadow);
2434 color: var(--dropdown-color);
2435 white-space: nowrap;
2436}
2437details[role=list] summary + ul li,
2438li[role=list] > ul li {
2439 width: 100%;
2440 margin-bottom: 0;
2441 padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
2442 list-style: none;
2443}
2444details[role=list] summary + ul li:first-of-type,
2445li[role=list] > ul li:first-of-type {
2446 margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
2447}
2448details[role=list] summary + ul li:last-of-type,
2449li[role=list] > ul li:last-of-type {
2450 margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
2451}
2452details[role=list] summary + ul li a,
2453li[role=list] > ul li a {
2454 display: block;
2455 margin: calc(var(--form-element-spacing-vertical) * -0.5) calc(var(--form-element-spacing-horizontal) * -1);
2456 padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
2457 overflow: hidden;
2458 color: var(--dropdown-color);
2459 text-decoration: none;
2460 text-overflow: ellipsis;
2461}
2462details[role=list] summary + ul li a:hover,
2463li[role=list] > ul li a:hover {
2464 background-color: var(--dropdown-hover-background-color);
2465}
2466
2467details[role=list] summary::after,
2468li[role=list] > a::after {
2469 display: block;
2470 width: 1rem;
2471 height: calc(1rem * var(--line-height, 1.5));
2472 -webkit-margin-start: 0.5rem;
2473 margin-inline-start: 0.5rem;
2474 float: right;
2475 transform: rotate(0deg);
2476 background-position: right center;
2477 background-size: 1rem auto;
2478 background-repeat: no-repeat;
2479 content: "";
2480}
2481
2482details[role=list] {
2483 padding: 0;
2484 border-bottom: none;
2485}
2486details[role=list] summary {
2487 margin-bottom: 0;
2488}
2489details[role=list] summary:not([role]) {
2490 height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
2491 padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
2492 border: var(--border-width) solid var(--form-element-border-color);
2493 border-radius: var(--border-radius);
2494 background-color: var(--form-element-background-color);
2495 color: var(--form-element-placeholder-color);
2496 line-height: inherit;
2497 cursor: pointer;
2498 transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
2499}
2500details[role=list] summary:not([role]):active, details[role=list] summary:not([role]):focus {
2501 border-color: var(--form-element-active-border-color);
2502 background-color: var(--form-element-active-background-color);
2503}
2504details[role=list] summary:not([role]):focus {
2505 box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
2506}
2507details[role=list][open] summary {
2508 border-bottom-right-radius: 0;
2509 border-bottom-left-radius: 0;
2510}
2511details[role=list][open] summary::before {
2512 display: block;
2513 z-index: 1;
2514 position: fixed;
2515 top: 0;
2516 right: 0;
2517 bottom: 0;
2518 left: 0;
2519 background: none;
2520 content: "";
2521 cursor: default;
2522}
2523
2524nav details[role=list] summary,
2525nav li[role=list] a {
2526 display: flex;
2527 direction: ltr;
2528}
2529
2530nav details[role=list] summary + ul,
2531nav li[role=list] > ul {
2532 min-width: -moz-fit-content;
2533 min-width: fit-content;
2534 border-radius: var(--border-radius);
2535}
2536nav details[role=list] summary + ul li a,
2537nav li[role=list] > ul li a {
2538 border-radius: 0;
2539}
2540
2541nav details[role=list] summary,
2542nav details[role=list] summary:not([role]) {
2543 height: auto;
2544 padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
2545}
2546nav details[role=list][open] summary {
2547 border-radius: var(--border-radius);
2548}
2549nav details[role=list] summary + ul {
2550 margin-top: var(--outline-width);
2551 -webkit-margin-start: 0;
2552 margin-inline-start: 0;
2553}
2554nav details[role=list] summary[role=link] {
2555 margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
2556 line-height: var(--line-height);
2557}
2558nav details[role=list] summary[role=link] + ul {
2559 margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
2560 -webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
2561 margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
2562}
2563
2564li[role=list]:hover > ul,
2565li[role=list] a:active ~ ul,
2566li[role=list] a:focus ~ ul {
2567 display: flex;
2568}
2569li[role=list] > ul {
2570 display: none;
2571 margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
2572 -webkit-margin-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
2573 margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
2574}
2575li[role=list] > a::after {
2576 background-image: var(--icon-chevron);
2577}
2578
2579label > details[role=list] {
2580 margin-top: calc(var(--spacing) * 0.25);
2581 margin-bottom: var(--spacing);
2582}
2583
2587[aria-busy=true] {
2588 cursor: progress;
2589}
2590
2591[aria-busy=true]:not(input, select, textarea, html)::before {
2592 display: inline-block;
2593 width: 1em;
2594 height: 1em;
2595 border: 0.1875em solid currentColor;
2596 border-radius: 1em;
2597 border-right-color: transparent;
2598 content: "";
2599 vertical-align: text-bottom;
2600 vertical-align: -0.125em;
2601 animation: spinner 0.75s linear infinite;
2602 opacity: var(--loading-spinner-opacity);
2603}
2604[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before {
2605 margin-right: calc(var(--spacing) * 0.5);
2606 margin-left: 0;
2607 -webkit-margin-start: 0;
2608 margin-inline-start: 0;
2609 -webkit-margin-end: calc(var(--spacing) * 0.5);
2610 margin-inline-end: calc(var(--spacing) * 0.5);
2611}
2612[aria-busy=true]:not(input, select, textarea, html):empty {
2613 text-align: center;
2614}
2615
2616button[aria-busy=true],
2617input[type=submit][aria-busy=true],
2618input[type=button][aria-busy=true],
2619input[type=reset][aria-busy=true],
2620a[aria-busy=true] {
2621 pointer-events: none;
2622}
2623
2624@keyframes spinner {
2625 to {
2626 transform: rotate(360deg);
2627 }
2628}
2632[data-tooltip] {
2633 position: relative;
2634}
2635[data-tooltip]:not(a, button, input) {
2636 border-bottom: 1px dotted;
2637 text-decoration: none;
2638 cursor: help;
2639}
2640[data-tooltip][data-placement=top]::before, [data-tooltip][data-placement=top]::after, [data-tooltip]::before, [data-tooltip]::after {
2641 display: block;
2642 z-index: 99;
2643 position: absolute;
2644 bottom: 100%;
2645 left: 50%;
2646 padding: 0.25rem 0.5rem;
2647 overflow: hidden;
2648 transform: translate(-50%, -0.25rem);
2649 border-radius: var(--border-radius);
2650 background: var(--tooltip-background-color);
2651 content: attr(data-tooltip);
2652 color: var(--tooltip-color);
2653 font-style: normal;
2654 font-weight: var(--font-weight);
2655 font-size: 0.875rem;
2656 text-decoration: none;
2657 text-overflow: ellipsis;
2658 white-space: nowrap;
2659 opacity: 0;
2660 pointer-events: none;
2661}
2662[data-tooltip][data-placement=top]::after, [data-tooltip]::after {
2663 padding: 0;
2664 transform: translate(-50%, 0rem);
2665 border-top: 0.3rem solid;
2666 border-right: 0.3rem solid transparent;
2667 border-left: 0.3rem solid transparent;
2668 border-radius: 0;
2669 background-color: transparent;
2670 content: "";
2671 color: var(--tooltip-background-color);
2672}
2673[data-tooltip][data-placement=bottom]::before, [data-tooltip][data-placement=bottom]::after {
2674 top: 100%;
2675 bottom: auto;
2676 transform: translate(-50%, 0.25rem);
2677}
2678[data-tooltip][data-placement=bottom]:after {
2679 transform: translate(-50%, -0.3rem);
2680 border: 0.3rem solid transparent;
2681 border-bottom: 0.3rem solid;
2682}
2683[data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after {
2684 top: 50%;
2685 right: 100%;
2686 bottom: auto;
2687 left: auto;
2688 transform: translate(-0.25rem, -50%);
2689}
2690[data-tooltip][data-placement=left]:after {
2691 transform: translate(0.3rem, -50%);
2692 border: 0.3rem solid transparent;
2693 border-left: 0.3rem solid;
2694}
2695[data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after {
2696 top: 50%;
2697 right: auto;
2698 bottom: auto;
2699 left: 100%;
2700 transform: translate(0.25rem, -50%);
2701}
2702[data-tooltip][data-placement=right]:after {
2703 transform: translate(-0.3rem, -50%);
2704 border: 0.3rem solid transparent;
2705 border-right: 0.3rem solid;
2706}
2707[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
2708 opacity: 1;
2709}
2710@media (hover: hover) and (pointer: fine) {
2711 [data-tooltip][data-placement=bottom]:focus::before, [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::before, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
2712 animation-duration: 0.2s;
2713 animation-name: tooltip-slide-top;
2714 }
2715 [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::after, [data-tooltip]:hover::after {
2716 animation-name: tooltip-caret-slide-top;
2717 }
2718 [data-tooltip][data-placement=bottom]:focus::before, [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::before, [data-tooltip][data-placement=bottom]:hover::after {
2719 animation-duration: 0.2s;
2720 animation-name: tooltip-slide-bottom;
2721 }
2722 [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::after {
2723 animation-name: tooltip-caret-slide-bottom;
2724 }
2725 [data-tooltip][data-placement=left]:focus::before, [data-tooltip][data-placement=left]:focus::after, [data-tooltip][data-placement=left]:hover::before, [data-tooltip][data-placement=left]:hover::after {
2726 animation-duration: 0.2s;
2727 animation-name: tooltip-slide-left;
2728 }
2729 [data-tooltip][data-placement=left]:focus::after, [data-tooltip][data-placement=left]:hover::after {
2730 animation-name: tooltip-caret-slide-left;
2731 }
2732 [data-tooltip][data-placement=right]:focus::before, [data-tooltip][data-placement=right]:focus::after, [data-tooltip][data-placement=right]:hover::before, [data-tooltip][data-placement=right]:hover::after {
2733 animation-duration: 0.2s;
2734 animation-name: tooltip-slide-right;
2735 }
2736 [data-tooltip][data-placement=right]:focus::after, [data-tooltip][data-placement=right]:hover::after {
2737 animation-name: tooltip-caret-slide-right;
2738 }
2739}
2740@keyframes tooltip-slide-top {
2741 from {
2742 transform: translate(-50%, 0.75rem);
2743 opacity: 0;
2744 }
2745 to {
2746 transform: translate(-50%, -0.25rem);
2747 opacity: 1;
2748 }
2749}
2750@keyframes tooltip-caret-slide-top {
2751 from {
2752 opacity: 0;
2753 }
2754 50% {
2755 transform: translate(-50%, -0.25rem);
2756 opacity: 0;
2757 }
2758 to {
2759 transform: translate(-50%, 0rem);
2760 opacity: 1;
2761 }
2762}
2763@keyframes tooltip-slide-bottom {
2764 from {
2765 transform: translate(-50%, -0.75rem);
2766 opacity: 0;
2767 }
2768 to {
2769 transform: translate(-50%, 0.25rem);
2770 opacity: 1;
2771 }
2772}
2773@keyframes tooltip-caret-slide-bottom {
2774 from {
2775 opacity: 0;
2776 }
2777 50% {
2778 transform: translate(-50%, -0.5rem);
2779 opacity: 0;
2780 }
2781 to {
2782 transform: translate(-50%, -0.3rem);
2783 opacity: 1;
2784 }
2785}
2786@keyframes tooltip-slide-left {
2787 from {
2788 transform: translate(0.75rem, -50%);
2789 opacity: 0;
2790 }
2791 to {
2792 transform: translate(-0.25rem, -50%);
2793 opacity: 1;
2794 }
2795}
2796@keyframes tooltip-caret-slide-left {
2797 from {
2798 opacity: 0;
2799 }
2800 50% {
2801 transform: translate(0.05rem, -50%);
2802 opacity: 0;
2803 }
2804 to {
2805 transform: translate(0.3rem, -50%);
2806 opacity: 1;
2807 }
2808}
2809@keyframes tooltip-slide-right {
2810 from {
2811 transform: translate(-0.75rem, -50%);
2812 opacity: 0;
2813 }
2814 to {
2815 transform: translate(0.25rem, -50%);
2816 opacity: 1;
2817 }
2818}
2819@keyframes tooltip-caret-slide-right {
2820 from {
2821 opacity: 0;
2822 }
2823 50% {
2824 transform: translate(-0.05rem, -50%);
2825 opacity: 0;
2826 }
2827 to {
2828 transform: translate(-0.3rem, -50%);
2829 opacity: 1;
2830 }
2831}
2832
2836[aria-controls] {
2837 cursor: pointer;
2838}
2839
2840[aria-disabled=true],
2841[disabled] {
2842 cursor: not-allowed;
2843}
2844
2845[aria-hidden=false][hidden] {
2846 display: initial;
2847}
2848
2849[aria-hidden=false][hidden]:not(:focus) {
2850 clip: rect(0, 0, 0, 0);
2851 position: absolute;
2852}
2853
2854a,
2855area,
2856button,
2857input,
2858label,
2859select,
2860summary,
2861textarea,
2862[tabindex] {
2863 -ms-touch-action: manipulation;
2864}
2865
2866[dir=rtl] {
2867 direction: rtl;
2868}
2869
2873@media (prefers-reduced-motion: reduce) {
2874 *:not([aria-busy=true]),
2875 :not([aria-busy=true])::before,
2876 :not([aria-busy=true])::after {
2877 background-attachment: initial !important;
2878 animation-duration: 1ms !important;
2879 animation-delay: -1ms !important;
2880 animation-iteration-count: 1 !important;
2881 scroll-behavior: auto !important;
2882 transition-delay: 0s !important;
2883 transition-duration: 0s !important;
2884 }
2885}
2886
2887/*# sourceMappingURL=pico.css.map */
print $object position
Definition edit.php:195
Class WebPortalTheme.
a disabled
treeview li table
No Email.
ui state ui widget content ui state ui widget header ui state a ui button
0 = Do not include form tag and submit button -1 = Do not include form tag but include submit button
table table fiche title col title div col center btnTitle icon
Automatically calls the icon named with the corresponding "object_" prefix.
if(!defined( 'NOREQUIREMENU')) if(!empty(GETPOST('seteventmessages', 'alpha'))) if(!function_exists("llxHeader")) top_httphead($contenttype='text/html', $forcenocache=0)
Show HTTP header.
if(preg_match('/crypted:/i', $dolibarr_main_db_pass)||!empty($dolibarr_main_db_encrypted_pass)) $conf db type
Definition repair.php:137
$conf db name
Only used if Module[ID]Name translation string is not found.
Definition repair.php:140