onedeuxtriseigo.nullpo.dev
Pop-up dictionary browser extension for language learning. Successor to Yomichan. (PERSONAL FORK)
1/*
2 * Copyright (C) 2023-2025 Yomitan Authors
3 * Copyright (C) 2020-2022 Yomichan Authors
4 *
5 * This program is free software: you can redistribute it and/or modify
6 * it under the terms of the GNU General Public License as published by
7 * the Free Software Foundation, either version 3 of the License, or
8 * (at your option) any later version.
9 *
10 * This program is distributed in the hope that it will be useful,
11 * but WITHOUT ANY WARRANTY; without even the implied warranty of
12 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13 * GNU General Public License for more details.
14 *
15 * You should have received a copy of the GNU General Public License
16 * along with this program. If not, see <https://www.gnu.org/licenses/>.
17 */
18
19/* Variables */
20:root {
21 --font-size-no-units: 14;
22 --font-size: calc(1px * var(--font-size-no-units));
23
24 --font-size-small-no-units: 12;
25 --font-size-small: calc(1em * var(--font-size-small-no-units) / var(--font-size-no-units));
26
27 --line-height-no-units: 20;
28 --line-height: calc(var(--line-height-no-units) / var(--font-size-no-units));
29
30 --animation-duration: 0.125s;
31 --animation-duration2: calc(var(--animation-duration) * 2);
32
33 --checkbox-size: calc(16em / var(--font-size-no-units));
34 --icon-button-size: calc(36em / var(--font-size-no-units));
35 --radio-size: calc(20em / var(--font-size-no-units));
36 --toggle-size: calc(16em / var(--font-size-no-units));
37
38 --input-font-size-no-units: 1;
39 --input-font-size: calc(1em * var(--input-font-size-no-units));
40 --input-spacing: calc(10em / var(--font-size-no-units));
41 --input-width: calc(100em / (var(--font-size-no-units) * var(--input-font-size-no-units)) - var(--input-spacing) / 2);
42 --input-width-large: calc(200em / (var(--font-size-no-units) * var(--input-font-size-no-units)));
43 --input-height: calc(32em / (var(--font-size-no-units) * var(--input-font-size-no-units)));
44 --input-border-radius: 0.25em;
45 --textarea-line-height: 1.25em;
46 --textarea-padding: 0.5em;
47
48 --material-arrow-dimension1: calc(5em / var(--font-size-no-units));
49 --material-arrow-dimension2: calc(10em / var(--font-size-no-units));
50
51 --button-border-radius: 0.3em;
52 --button-default-shadow-params: 0 0.0625em 0.125em 0;
53
54 --thin-border-size: calc(1em / var(--font-size-no-units));
55
56 --menu-border-radius: 0.3em;
57 --menu-shadow: 0 1px 3px 1px var(--shadow-color), 0 2px 4px 3px var(--shadow-color);
58
59 --selectable-indicator-transition1:
60 transform 0s ease-in-out var(--animation-duration2),
61 background-color var(--animation-duration2) ease-in-out,
62 opacity var(--animation-duration2) ease-in-out,
63 visibility 0s ease-in-out var(--animation-duration2);
64 --selectable-indicator-transition2:
65 transform var(--animation-duration2) ease-in-out,
66 background-color var(--animation-duration2) ease-in-out,
67 opacity var(--animation-duration2) ease-in-out,
68 visibility var(--animation-duration2) ease-in-out;
69
70 --text-color: #222222;
71 --text-color-light1: #555555;
72 --text-color-light2: #666666;
73 --text-color-light3: #777777;
74 --text-color-light4: #888888;
75 --background-color: #f8f9fa;
76 --background-color-light: #ffffff;
77 --background-color-dark1: #eeeeee;
78
79 --shadow-color: rgba(0, 0, 0, 0.185);
80 --shadow-color-off: rgba(0, 0, 0, 0);
81 --shadow-color-light: rgba(0, 0, 0, 0.085);
82
83 --accent-color: #1a73e8;
84 --accent-color-light: #4a91ed;
85 --accent-color-lighter: #8db9f4;
86 --accent-color-lightest: #a7c9f6;
87 --accent-color-dark: #1060c0;
88 --accent-color-transparent0: rgba(28, 116, 233, 0);
89 --accent-color-transparent5: rgba(28, 116, 233, 0.05);
90 --accent-color-transparent25: rgba(28, 116, 233, 0.25);
91
92 --danger-color: #c83c28;
93 --danger-color-light: #dd6755;
94 --danger-color-lighter: #e68d7f;
95 --danger-color-lightest: #eeb3aa;
96 --danger-color-transparent0: rgba(200, 60, 40, 0);
97 --danger-color-transparent5: rgba(200, 60, 40, 0.05);
98 --danger-color-transparent25: rgba(200, 60, 40, 0.25);
99
100 --success-color: #51ab30;
101
102 --disabled-color: #aaaaaa;
103 --disabled-color-light: #dddddd;
104 --disabled-color-lighter: #eeeeee;
105
106 --input-background-color: #f2f2f2;
107 --input-background-color-dark: #dddddd;
108 --input-background-color-darker: #cccccc;
109 --input-outline-color: var(--text-color);
110
111 --button-default-text-color: #ffffff;
112 --button-default-border-color: #cccccc;
113 --button-default-icon-color: #333333;
114 --button-default-icon-color-light: #666666;
115
116 --checkbox-checked-color: var(--accent-color);
117 --checkbox-unchecked-color: #666666;
118 --checkbox-check-color: var(--background-color-light);
119 --checkbox-disabled-color: var(--disabled-color);
120
121 --toggle-track-color: #cccccc;
122 --toggle-knob-color: var(--background-color-light);
123
124 --selectable-indicator-color: rgba(160, 160, 160, 0.25);
125
126 --menu-item-hover-color: #bbbbbb;
127 --menu-item-active-color: #aaaaaa;
128}
129:root[data-theme=dark] {
130 --text-color: #d4d4d4;
131 --text-color-light1: #aaaaaa;
132 --text-color-light2: #999999;
133 --text-color-light3: #888888;
134 --text-color-light4: #777777;
135 --background-color: #1e1e1e;
136 --background-color-light: #0a0a0a;
137 --background-color-dark1: #333333;
138
139 --shadow-color: rgba(105, 105, 105, 0.185);
140 --shadow-color-off: rgba(255, 255, 255, 0);
141 --shadow-color-light: rgba(255, 255, 255, 0.085);
142
143 --accent-color: #4a91ed;
144 --accent-color-light: #1a73e8;
145 --accent-color-lighter: #135dbe;
146 --accent-color-lightest: #0e4690;
147 --accent-color-transparent0: rgb(78, 172, 253, 0);
148 --accent-color-transparent5: rgb(78, 172, 253, 0.05);
149 --accent-color-transparent25: rgb(78, 172, 253, 0.25);
150
151 --danger-color: #dd6755;
152 --danger-color-light: #c83c28;
153 --danger-color-lighter: #9e301f;
154 --danger-color-lightest: #732317;
155 --danger-color-transparent0: rgba(221, 103, 85, 0);
156 --danger-color-transparent5: rgba(221, 103, 85, 0.05);
157 --danger-color-transparent25: rgba(221, 103, 85, 0.25);
158
159 --success-color: #75cf54;
160
161 --disabled-color: #444444;
162 --disabled-color-light: #585858;
163 --disabled-color-lighter: #777777;
164
165 --input-background-color: #2f2f2f;
166 --input-background-color-dark: #383838;
167 --input-background-color-darker: #484848;
168 --input-outline-color: var(--text-color);
169
170 --button-default-text-color: #000000;
171 --button-default-border-color: #333333;
172 --button-default-icon-color: #cccccc;
173 --button-default-icon-color-light: #999999;
174
175 --checkbox-unchecked-color: #999999;
176
177 --toggle-track-color: #cccccc;
178 --toggle-knob-color: #ffffff;
179
180 --selectable-indicator-color: rgba(100, 100, 100, 0.25);
181
182 --menu-item-hover-color: #333333;
183 --menu-item-active-color: #444444;
184}
185
186
187/* Root styles */
188:root {
189 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
190 font-size: var(--font-size);
191 line-height: var(--line-height);
192 height: 100%;
193}
194body {
195 margin: 0;
196 border: 0;
197 padding: 0;
198 height: 100%;
199 font-family: inherit;
200 font-size: inherit;
201 line-height: inherit;
202 background-color: var(--background-color);
203 color: var(--text-color);
204}
205
206
207/* Text styles */
208.light {
209 color: var(--text-color-light2);
210}
211.danger-text {
212 color: var(--danger-color);
213}
214.success-text {
215 color: var(--success-color);
216}
217
218/* Icons */
219.icon {
220 --icon-image: none;
221 --icon-size: contain;
222
223 -webkit-mask-repeat: no-repeat;
224 -webkit-mask-position: center center;
225 -webkit-mask-mode: alpha;
226 -webkit-mask-size: var(--icon-size);
227 -webkit-mask-image: var(--icon-image);
228 mask-repeat: no-repeat;
229 mask-position: center center;
230 mask-mode: alpha;
231 mask-size: var(--icon-size);
232 mask-image: var(--icon-image);
233}
234.icon.color-icon {
235 -webkit-mask-image: none;
236 mask-image: none;
237 background-repeat: no-repeat;
238 background-position: center center;
239 background-size: var(--icon-size);
240 background-image: var(--icon-image);
241}
242.icon[data-icon=none] { --icon-image: linear-gradient(transparent, transparent); }
243.icon[data-icon=profile] { --icon-image: url(/images/profile.svg); }
244.icon[data-icon=cog] { --icon-image: url(/images/cog.svg); }
245.icon[data-icon=palette] { --icon-image: url(/images/palette.svg); }
246.icon[data-icon=popup] { --icon-image: url(/images/popup.svg); }
247.icon[data-icon=speaker] { --icon-image: url(/images/speaker.svg); }
248.icon[data-icon=scanning] { --icon-image: url(/images/scanning.svg); }
249.icon[data-icon=text-parsing] { --icon-image: url(/images/text-parsing.svg); }
250.icon[data-icon=translation] { --icon-image: url(/images/translation.svg); }
251.icon[data-icon=book] { --icon-image: url(/images/book.svg); }
252.icon[data-icon=note-card] { --icon-image: url(/images/note-card.svg); }
253.icon[data-icon=keyboard] { --icon-image: url(/images/keyboard.svg); }
254.icon[data-icon=backup] { --icon-image: url(/images/backup.svg); }
255.icon[data-icon=lock] { --icon-image: url(/images/lock.svg); }
256.icon[data-icon=question-mark] { --icon-image: url(/images/question-mark.svg); }
257.icon[data-icon=popup-size] { --icon-image: url(/images/popup-size.svg); }
258.icon[data-icon=hamburger-menu] { --icon-image: url(/images/hamburger-menu.svg); }
259.icon[data-icon=kebab-menu] { --icon-image: url(/images/kebab-menu.svg); }
260.icon[data-icon=mouse] { --icon-image: url(/images/mouse.svg); }
261.icon[data-icon=exclamation-point-short] { --icon-image: url(/images/exclamation-point-short.svg); }
262.icon[data-icon=magnifying-glass] { --icon-image: url(/images/magnifying-glass.svg); }
263.icon[data-icon=collapse] { --icon-image: url(/images/collapse.svg); }
264.icon[data-icon=expand] { --icon-image: url(/images/expand.svg); }
265.icon[data-icon=window] { --icon-image: url(/images/window.svg); }
266.icon[data-icon=cross] { --icon-image: url(/images/cross.svg); }
267.icon[data-icon=checkmark] { --icon-image: url(/images/checkmark.svg); }
268.icon[data-icon=sentence-parsing] { --icon-image: url(/images/sentence-parsing.svg); }
269.icon[data-icon=question-mark] { --icon-image: url(/images/question-mark.svg); }
270.icon[data-icon=question-mark-circle] { --icon-image: url(/images/question-mark-circle.svg); }
271.icon[data-icon=question-mark-thick] { --icon-image: url(/images/question-mark-thick.svg); }
272.icon[data-icon=left-chevron] { --icon-image: url(/images/left-chevron.svg); }
273.icon[data-icon=right-chevron] { --icon-image: url(/images/right-chevron.svg); }
274.icon[data-icon=up-chevron] { --icon-image: url(/images/up-chevron.svg); }
275.icon[data-icon=down-chevron] { --icon-image: url(/images/down-chevron.svg); }
276.icon[data-icon=double-down-chevron] { --icon-image: url(/images/double-down-chevron.svg); }
277.icon[data-icon=plus-thick] { --icon-image: url(/images/plus-thick.svg); }
278.icon[data-icon=clipboard] { --icon-image: url(/images/clipboard.svg); }
279.icon[data-icon=key] { --icon-image: url(/images/key.svg); }
280.icon[data-icon=tag] { --icon-image: url(/images/tag.svg); }
281.icon[data-icon=flag] { --icon-image: url(/images/flag.svg); }
282.icon[data-icon=accessibility] { --icon-image: url(/images/accessibility.svg); }
283.icon[data-icon=connection] { --icon-image: url(/images/connection.svg); }
284.icon[data-icon=external-link] { --icon-image: url(/images/external-link.svg); }
285.icon[data-icon=monitor] { --icon-image: url(/images/monitor.svg); }
286.icon[data-icon=material-down-arrow] {
287 --icon-image: url(/images/material-down-arrow.svg);
288 --icon-size: var(--material-arrow-dimension2) var(--material-arrow-dimension1);
289}
290.icon[data-icon=material-right-arrow] {
291 --icon-image: url(/images/material-right-arrow.svg);
292 --icon-size: var(--material-arrow-dimension1) var(--material-arrow-dimension2);
293}
294
295
296/* Checkbox */
297label.checkbox {
298 cursor: default;
299}
300.checkbox {
301 font-size: var(--checkbox-size);
302 display: inline-block;
303}
304.checkbox>input[type=checkbox] {
305 opacity: 0;
306 width: 0;
307 height: 0;
308 display: block;
309 margin: 0;
310 padding: 0;
311 border: none;
312 appearance: none;
313 -moz-appearance: none;
314 -webkit-appearance: none;
315}
316.checkbox-body {
317 display: block;
318 cursor: pointer;
319 width: 1em;
320 height: 1em;
321 position: relative;
322}
323.checkbox>input[type=checkbox]:disabled+.checkbox-body {
324 cursor: default;
325}
326.checkbox-fill,
327.checkbox-border,
328.checkbox-check {
329 display: block;
330 position: absolute;
331 left: 0;
332 top: 0;
333 right: 0;
334 bottom: 0;
335 mask-repeat: no-repeat;
336 mask-position: center center;
337 mask-mode: alpha;
338 mask-size: contain;
339 -webkit-mask-repeat: no-repeat;
340 -webkit-mask-position: center center;
341 -webkit-mask-mode: alpha;
342 -webkit-mask-size: contain;
343 transition: opacity var(--animation-duration) linear, background-color var(--animation-duration) linear;
344}
345.checkbox-fill {
346 mask-image: url(/images/checkbox-fill.svg);
347 -webkit-mask-image: url(/images/checkbox-fill.svg);
348 background-color: var(--checkbox-unchecked-color);
349 opacity: 0;
350}
351.checkbox-border {
352 mask-image: url(/images/checkbox-border.svg);
353 -webkit-mask-image: url(/images/checkbox-border.svg);
354 background-color: var(--checkbox-unchecked-color);
355 opacity: 1;
356}
357.checkbox-check {
358 mask-image: url(/images/checkbox-check.svg);
359 -webkit-mask-image: url(/images/checkbox-check.svg);
360 background-color: var(--checkbox-check-color);
361 opacity: 0;
362}
363.checkbox>input[type=checkbox]:checked+.checkbox-body>.checkbox-fill {
364 background-color: var(--checkbox-checked-color);
365 opacity: 1;
366}
367.checkbox>input[type=checkbox]:checked+.checkbox-body>.checkbox-border {
368 background-color: var(--checkbox-checked-color);
369 opacity: 1;
370}
371.checkbox>input[type=checkbox]:checked+.checkbox-body>.checkbox-check {
372 background-color: var(--checkbox-check-color);
373 opacity: 1;
374}
375.checkbox>input[type=checkbox]:disabled+.checkbox-body>.checkbox-fill {
376 opacity: 0;
377}
378.checkbox>input[type=checkbox]:disabled+.checkbox-body>.checkbox-border {
379 background-color: var(--checkbox-disabled-color);
380 opacity: 1;
381}
382.checkbox>input[type=checkbox]:disabled+.checkbox-body>.checkbox-check {
383 background-color: var(--checkbox-disabled-color);
384}
385.checkbox-body::after {
386 position: absolute;
387 display: block;
388 content: '';
389 left: -0.75em;
390 top: -0.75em;
391 right: -0.75em;
392 bottom: -0.75em;
393 border-radius: 2.5em;
394 background-color: var(--selectable-indicator-color);
395 pointer-events: none;
396 transform: scale(0);
397 opacity: 0;
398 visibility: hidden;
399 transition: var(--selectable-indicator-transition1);
400}
401.checkbox>input[type=checkbox]:focus+.checkbox-body::after,
402.checkbox>input[type=checkbox]:active+.checkbox-body::after,
403.checkbox:active>input[type=checkbox]+.checkbox-body::after {
404 transform: scale(1);
405 opacity: 1;
406 visibility: visible;
407 transition: var(--selectable-indicator-transition2);
408}
409.checkbox>input[type=checkbox]:focus:not(:focus-visible)+.checkbox-body::after {
410 transform: scale(0);
411 opacity: 0;
412 visibility: hidden;
413 transition: var(--selectable-indicator-transition1);
414}
415.checkbox>input[type=checkbox]:focus-visible+.checkbox-body::after,
416.checkbox>input[type=checkbox]:focus-visible:focus+.checkbox-body::after,
417.checkbox>input[type=checkbox]:focus-visible:active+.checkbox-body::after,
418.checkbox:active>input[type=checkbox]:focus-visible+.checkbox-body::after {
419 transform: scale(1);
420 opacity: 1;
421 visibility: visible;
422 transition: var(--selectable-indicator-transition2);
423}
424.checkbox>input[type=checkbox]:focus+.checkbox-body::after {
425 opacity: 0.5;
426}
427.checkbox>input[type=checkbox]:active:focus+.checkbox-body::after,
428.checkbox:active>input[type=checkbox]:focus+.checkbox-body::after {
429 opacity: 1;
430}
431.checkbox>input[type=checkbox]:disabled+.checkbox-body::after {
432 transform: scale(0);
433 opacity: 0;
434 visibility: hidden;
435 transition: var(--selectable-indicator-transition1);
436}
437
438
439/* Toggle switch */
440label.toggle {
441 cursor: default;
442}
443.toggle {
444 font-size: var(--toggle-size);
445 display: inline-block;
446}
447.toggle>input[type=checkbox] {
448 opacity: 0;
449 width: 0;
450 height: 0;
451 display: block;
452 margin: 0;
453 padding: 0;
454 border: none;
455 appearance: none;
456 -moz-appearance: none;
457 -webkit-appearance: none;
458}
459.toggle-body {
460 display: block;
461 cursor: pointer;
462 width: 2em;
463 height: 1em;
464 position: relative;
465}
466.toggle-track {
467 display: block;
468 position: absolute;
469 left: 0.125em;
470 right: 0.125em;
471 top: 0.125em;
472 bottom: 0.125em;
473 background-color: var(--toggle-track-color);
474 border-radius: 0.4375em;
475 transition: background-color var(--animation-duration) ease-in-out;
476}
477.toggle-knob {
478 display: block;
479 position: absolute;
480 left: 0;
481 top: 0;
482 width: 1em;
483 height: 1em;
484 background-color: var(--toggle-knob-color);
485 border-radius: 0.5em;
486 box-shadow:
487 0 0.0625em 0.25em 0 var(--shadow-color),
488 0 0.125em 0.125em 0 var(--shadow-color);
489 transition:
490 transform var(--animation-duration) ease-in-out,
491 background-color var(--animation-duration) ease-in-out;
492}
493.toggle-body>.toggle-knob::after {
494 position: absolute;
495 display: block;
496 content: '';
497 left: -0.75em;
498 top: -0.75em;
499 right: -0.75em;
500 bottom: -0.75em;
501 border-radius: 2.5em;
502 background-color: var(--selectable-indicator-color);
503 pointer-events: none;
504 transform: scale(0);
505 opacity: 0;
506 visibility: hidden;
507 transition: var(--selectable-indicator-transition1);
508}
509.toggle>input[type=checkbox]:focus+.toggle-body>.toggle-knob::after,
510.toggle>input[type=checkbox]:active+.toggle-body>.toggle-knob::after,
511.toggle:active>input[type=checkbox]+.toggle-body>.toggle-knob::after {
512 transform: scale(1);
513 opacity: 1;
514 visibility: visible;
515 transition: var(--selectable-indicator-transition2);
516}
517.toggle>input[type=checkbox]+.toggle-body>.toggle-knob::after {
518 opacity: 0.5;
519}
520.toggle>input[type=checkbox]:active+.toggle-body>.toggle-knob::after,
521.toggle:active>input[type=checkbox]+.toggle-body>.toggle-knob::after {
522 opacity: 1;
523}
524.toggle>input[type=checkbox]:focus:not(:focus-visible)+.toggle-body>.toggle-knob::after {
525 transform: scale(0);
526 opacity: 0;
527 visibility: hidden;
528 transition: var(--selectable-indicator-transition1);
529}
530.toggle>input[type=checkbox]:focus-visible+.toggle-body>.toggle-knob::after {
531 transform: scale(1);
532 opacity: 1;
533 visibility: visible;
534 transition: var(--selectable-indicator-transition2);
535}
536.toggle>input[type=checkbox]:checked+.toggle-body>.toggle-knob {
537 transform: translateX(1em);
538}
539.toggle>input[type=checkbox]:checked+.toggle-body>.toggle-track {
540 background-color: var(--accent-color-lighter);
541}
542.toggle>input[type=checkbox]:checked+.toggle-body>.toggle-knob {
543 background-color: var(--accent-color);
544}
545.toggle>input[type=checkbox]:focus:checked+.toggle-body>.toggle-knob::after,
546.toggle>input[type=checkbox]:active:checked+.toggle-body>.toggle-knob::after,
547.toggle:active>input[type=checkbox]:checked+.toggle-body>.toggle-knob::after {
548 background-color: var(--accent-color-transparent25);
549}
550.toggle>input[type=checkbox]:disabled+.toggle-body {
551 cursor: default;
552}
553.toggle>input[type=checkbox]:disabled+.toggle-body>.toggle-track {
554 background-color: var(--disabled-color-light);
555}
556.toggle>input[type=checkbox]:disabled+.toggle-body>.toggle-knob {
557 background-color: var(--disabled-color-lighter);
558}
559.toggle>input[type=checkbox]:disabled+.toggle-body>.toggle-knob::after {
560 transform: scale(0);
561 opacity: 0;
562 visibility: hidden;
563 transition: var(--selectable-indicator-transition1);
564}
565
566
567/* Radio button */
568label.radio {
569 cursor: default;
570}
571.radio {
572 display: inline-block;
573 vertical-align: middle;
574}
575.radio>input[type=radio] {
576 opacity: 0;
577 width: 0;
578 height: 0;
579 display: block;
580 margin: 0;
581 padding: 0;
582 border: none;
583 appearance: none;
584 -moz-appearance: none;
585 -webkit-appearance: none;
586}
587.radio-body {
588 cursor: pointer;
589 display: block;
590 position: relative;
591 width: var(--radio-size);
592 height: var(--radio-size);
593}
594.radio>input[type=radio]:disabled+.radio-body {
595 cursor: default;
596}
597.radio-border,
598.radio-dot {
599 display: block;
600 position: absolute;
601 left: 0;
602 top: 0;
603 right: 0;
604 bottom: 0;
605 background-color: var(--accent-color);
606 mask-repeat: no-repeat;
607 mask-position: center center;
608 mask-mode: alpha;
609 mask-size: var(--radio-size) var(--radio-size);
610 -webkit-mask-repeat: no-repeat;
611 -webkit-mask-position: center center;
612 -webkit-mask-mode: alpha;
613 -webkit-mask-size: var(--radio-size) var(--radio-size);
614}
615.radio-border {
616 mask-image: url(/images/radio-button.svg);
617 -webkit-mask-image: url(/images/radio-button.svg);
618}
619.radio-dot {
620 mask-image: url(/images/radio-button-dot.svg);
621 -webkit-mask-image: url(/images/radio-button-dot.svg);
622 opacity: 1;
623 transform: none;
624 transition:
625 transform var(--animation-duration2) ease-in-out,
626 opacity var(--animation-duration2) ease-in-out,
627 visibility var(--animation-duration2) ease-in-out;
628}
629.radio>input[type=radio]:disabled+.radio-body>.radio-border,
630.radio>input[type=radio]:disabled+.radio-body>.radio-dot {
631 background-color: var(--disabled-color);
632}
633.radio>input[type=radio]:not(:checked)+.radio-body>.radio-dot {
634 opacity: 0;
635 transform: scale(0);
636 transition:
637 transform 0s ease-in-out var(--animation-duration2),
638 opacity var(--animation-duration2) ease-in-out,
639 visibility 0s ease-in-out var(--animation-duration2);
640}
641.radio-body::after {
642 position: absolute;
643 display: block;
644 content: '';
645 left: -0.75em;
646 top: -0.75em;
647 right: -0.75em;
648 bottom: -0.75em;
649 border-radius: 2.5em;
650 background-color: var(--selectable-indicator-color);
651 pointer-events: none;
652 transform: scale(0);
653 opacity: 0;
654 visibility: hidden;
655 transition: var(--selectable-indicator-transition1);
656}
657.radio>input[type=radio]:focus+.radio-body::after,
658.radio>input[type=radio]:active+.radio-body::after,
659.radio:active>input[type=radio]+.radio-body::after {
660 transform: scale(1);
661 opacity: 1;
662 visibility: visible;
663 transition: var(--selectable-indicator-transition2);
664}
665.radio>input[type=radio]:focus:not(:focus-visible)+.radio-body::after {
666 transform: scale(0);
667 opacity: 0;
668 visibility: hidden;
669 transition: var(--selectable-indicator-transition1);
670}
671.radio>input[type=radio]:focus-visible+.radio-body::after {
672 transform: scale(1);
673 opacity: 1;
674 visibility: visible;
675 transition: var(--selectable-indicator-transition2);
676}
677.radio>input[type=radio]:focus+.radio-body::after {
678 opacity: 0.5;
679}
680.radio>input[type=radio]:active:focus+.radio-body::after,
681.radio:active>input[type=radio]:focus+.radio-body::after {
682 opacity: 1;
683}
684.radio>input[type=radio]:disabled+.radio-body::after {
685 transform: scale(0);
686 opacity: 0;
687 visibility: hidden;
688 transition: var(--selectable-indicator-transition1);
689}
690.radio-label {
691 cursor: pointer;
692 white-space: nowrap;
693}
694.radio-label>.radio {
695 vertical-align: middle;
696}
697.radio-label>.radio-label-text {
698 display: inline-block;
699 margin-left: 0.5em;
700 vertical-align: middle;
701 white-space: normal;
702}
703
704
705/* Material design select */
706select {
707 width: var(--input-width-large);
708 height: var(--input-height);
709 line-height: var(--line-height);
710 border: 0;
711 border-radius: var(--input-border-radius);
712 box-sizing: border-box;
713 padding: 0 0.5em;
714 appearance: none;
715 -moz-appearance: none;
716 -webkit-appearance: none;
717 background-image: url(/images/material-down-arrow.svg);
718 background-repeat: no-repeat;
719 background-position: right calc(10em / var(--font-size-no-units)) center;
720 background-color: var(--input-background-color);
721 background-size: var(--material-arrow-dimension2) var(--material-arrow-dimension1);
722 cursor: pointer;
723 color: var(--text-color);
724 font-size: var(--input-font-size);
725}
726select::-ms-expand {
727 display: none;
728}
729
730
731/* Material design inputs */
732input[type=text],
733input[type=number],
734input[type=password] {
735 width: var(--input-width);
736 height: var(--input-height);
737 line-height: var(--line-height);
738 color: var(--text-color);
739 font-size: var(--input-font-size);
740 background-color: var(--input-background-color);
741 border: none;
742 border-radius: var(--input-border-radius);
743 box-sizing: border-box;
744 padding: 0 0.5em;
745 appearance: textfield;
746 -moz-appearance: textfield;
747 -webkit-appearance: textfield;
748}
749input[type=number]::-webkit-inner-spin-button,
750input[type=number]::-webkit-outer-spin-button {
751 appearance: none;
752 -moz-appearance: none;
753 -webkit-appearance: none;
754 margin: 0;
755}
756input[type=text],
757input[type=password] {
758 width: var(--input-width-large);
759}
760textarea {
761 box-sizing: border-box;
762 padding: var(--textarea-padding);
763 font-family: 'Courier New', Courier, monospace;
764 color: var(--text-color);
765 font-size: var(--input-font-size);
766 background-color: var(--input-background-color);
767 border-radius: var(--input-border-radius);
768 line-height: var(--textarea-line-height);
769 border: var(--thin-border-size) solid var(--input-background-color);
770}
771select:invalid,
772textarea:invalid,
773input[type=text]:invalid,
774input[type=number]:invalid,
775input[type=password]:invalid,
776select[data-invalid=true],
777textarea[data-invalid=true],
778input[type=text][data-invalid=true],
779input[type=number][data-invalid=true],
780input[type=password][data-invalid=true] {
781 border: var(--thin-border-size) solid var(--danger-color);
782}
783select,
784textarea,
785input[type=text],
786input[type=number],
787input[type=password] {
788 box-shadow: none;
789 transition: box-shadow calc(var(--animation-duration) / 2) linear;
790}
791select:focus,
792textarea:focus,
793input[type=text]:focus,
794input[type=number]:focus,
795input[type=password]:focus {
796 box-shadow: 0 0 0 calc(2em / var(--font-size-no-units)) var(--input-outline-color);
797 outline: none;
798}
799select:invalid:focus,
800textarea:invalid:focus,
801input[type=text]:invalid:focus,
802input[type=number]:invalid:focus,
803input[type=password]:invalid:focus,
804select[data-invalid=true]:focus,
805textarea[data-invalid=true]:focus,
806input[type=text][data-invalid=true]:focus,
807input[type=number][data-invalid=true]:focus,
808input[type=password][data-invalid=true]:focus {
809 box-shadow: 0 0 0 calc(2em / var(--font-size-no-units)) var(--danger-color);
810 outline: none;
811}
812input[type=text].code,
813input[type=number].code,
814input[type=password].code {
815 font-family: 'Courier New', Courier, monospace;
816}
817textarea.no-wrap {
818 white-space: pre;
819 overflow-wrap: normal;
820}
821
822/* Input groups */
823.input-group {
824 display: flex;
825 flex-flow: row nowrap;
826 align-items: stretch;
827}
828.input-group>input[type=text],
829.input-group>input[type=number],
830.input-group>input[type=password],
831.input-group>button.input-button {
832 flex: 1 1 auto;
833 border-top-right-radius: 0;
834 border-bottom-right-radius: 0;
835 border-right-style: none;
836 z-index: 1;
837}
838.input-suffix,
839.button.input-suffix,
840button.input-suffix {
841 display: flex;
842 flex-flow: row nowrap;
843 align-items: center;
844 border-radius: var(--input-border-radius);
845 border-style: none;
846 border-width: 0;
847 height: var(--input-height);
848 box-sizing: border-box;
849 padding: 0 0.5em;
850 position: relative;
851}
852.input-suffix:not(:first-child),
853.button.input-suffix:not(:first-child),
854button.input-suffix:not(:first-child) {
855 border-top-left-radius: 0;
856 border-bottom-left-radius: 0;
857}
858.input-suffix:not(:last-child),
859.button.input-suffix:not(:last-child),
860button.input-suffix:not(:last-child) {
861 border-top-right-radius: 0;
862 border-bottom-right-radius: 0;
863}
864.input-suffix:not(button) {
865 background-color: var(--input-background-color);
866}
867input[type=text]:invalid~.input-suffix:not(button),
868input[type=number]:invalid~.input-suffix:not(button),
869input[type=password]:invalid~.input-suffix:not(button),
870input[type=text][data-invalid=true]~.input-suffix:not(button),
871input[type=number][data-invalid=true]~.input-suffix:not(button),
872input[type=password][data-invalid=true]~.input-suffix:not(button) {
873 border-color: var(--danger-color);
874 border-width: var(--thin-border-size);
875 border-style: solid;
876 border-left-style: none;
877 border-right-style: none;
878}
879
880
881/* Material design button */
882button,
883.button {
884 --button-content-color: var(--button-default-text-color);
885 --button-border-color: var(--accent-color);
886 --button-background-color: var(--accent-color);
887 --button-shadow: none;
888
889 --button-hover-content-color: var(--button-content-color);
890 --button-hover-border-color: var(--button-hover-background-color);
891 --button-hover-background-color: var(--accent-color-light);
892 --button-hover-shadow: var(--button-default-shadow-params) var(--shadow-color-light);
893
894 --button-focus-content-color: var(--button-hover-content-color);
895 --button-focus-border-color: var(--button-hover-border-color);
896 --button-focus-background-color: var(--button-hover-background-color);
897 --button-focus-shadow: var(--button-hover-shadow);
898
899 --button-focus-visible-content-color: var(--button-focus-content-color);
900 --button-focus-visible-border-color: var(--button-focus-border-color);
901 --button-focus-visible-background-color: var(--button-focus-background-color);
902 --button-focus-visible-shadow: var(--button-focus-shadow);
903
904 --button-active-content-color: var(--button-content-color);
905 --button-active-border-color: var(--button-active-background-color);
906 --button-active-background-color: var(--accent-color-lighter);
907 --button-active-shadow: var(--button-default-shadow-params) var(--shadow-color);
908
909 --button-disabled-content-color: var(--button-default-text-color);
910 --button-disabled-border-color: var(--disabled-color);
911 --button-disabled-background-color: var(--disabled-color);
912 --button-disabled-shadow: none;
913
914 --button-current-content-color: var(--button-content-color);
915 --button-current-border-color: var(--button-border-color);
916 --button-current-background-color: var(--button-background-color);
917 --button-current-shadow: var(--button-shadow);
918
919 --button-padding-vertical: 0.5em;
920 --button-padding-horizontal: 1em;
921
922 border-width: var(--thin-border-size);
923 border-style: solid;
924 border-radius: var(--button-border-radius);
925 padding: var(--button-padding-vertical) var(--button-padding-horizontal);
926 font-weight: bold;
927 font-size: inherit;
928 font-family: inherit;
929 cursor: pointer;
930 transition:
931 background-color var(--animation-duration) ease-in-out,
932 box-shadow var(--animation-duration) ease-in-out,
933 border-color var(--animation-duration) ease-in-out;
934 -webkit-tap-highlight-color: transparent;
935
936 color: var(--button-current-content-color);
937 border-color: var(--button-current-border-color);
938 background-color: var(--button-current-background-color);
939 box-shadow: var(--button-current-shadow);
940}
941button:hover,
942.button:hover {
943 --button-current-content-color: var(--button-hover-content-color);
944 --button-current-border-color: var(--button-hover-border-color);
945 --button-current-background-color: var(--button-hover-background-color);
946 --button-current-shadow: var(--button-hover-shadow);
947}
948button:focus,
949.button:focus {
950 --button-current-content-color: var(--button-focus-content-color);
951 --button-current-border-color: var(--button-focus-border-color);
952 --button-current-background-color: var(--button-focus-background-color);
953 --button-current-shadow: var(--button-focus-shadow);
954
955 outline: none;
956}
957button:active,
958.button:active {
959 --button-current-content-color: var(--button-active-content-color);
960 --button-current-border-color: var(--button-active-border-color);
961 --button-current-background-color: var(--button-active-background-color);
962 --button-current-shadow: var(--button-active-shadow);
963}
964button:focus:not(:focus-visible),
965.button:focus:not(:focus-visible) {
966 --button-current-content-color: var(--button-content-color);
967 --button-current-border-color: var(--button-border-color);
968 --button-current-background-color: var(--button-background-color);
969 --button-current-shadow: var(--button-shadow);
970}
971button:focus-visible,
972.button:focus-visible {
973 --button-current-content-color: var(--button-focus-visible-content-color);
974 --button-current-border-color: var(--button-focus-visible-border-color);
975 --button-current-background-color: var(--button-focus-visible-background-color);
976 --button-current-shadow: var(--button-focus-visible-shadow);
977}
978button:hover:focus-visible,
979button:hover:not(:focus-visible),
980.button:hover:focus-visible,
981.button:hover:not(:focus-visible) {
982 --button-current-content-color: var(--button-hover-content-color);
983 --button-current-border-color: var(--button-hover-border-color);
984 --button-current-background-color: var(--button-hover-background-color);
985 --button-current-shadow: var(--button-hover-shadow);
986}
987button:focus:focus-visible,
988.button:focus:focus-visible {
989 --button-current-content-color: var(--button-focus-visible-content-color);
990 --button-current-border-color: var(--button-focus-visible-border-color);
991 --button-current-background-color: var(--button-focus-visible-background-color);
992 --button-current-shadow: var(--button-focus-visible-shadow);
993}
994button:active:focus-visible,
995button:active:not(:focus-visible),
996.button:active:focus-visible,
997.button:active:not(:focus-visible) {
998 --button-current-content-color: var(--button-active-content-color);
999 --button-current-border-color: var(--button-active-border-color);
1000 --button-current-background-color: var(--button-active-background-color);
1001 --button-current-shadow: var(--button-active-shadow);
1002}
1003button:disabled,
1004.button:disabled {
1005 cursor: default;
1006}
1007button:disabled,
1008button:disabled:focus,
1009button:disabled:hover,
1010button:disabled:active,
1011.button:disabled,
1012.button:disabled:focus,
1013.button:disabled:hover,
1014.button:disabled:active {
1015 --button-current-content-color: var(--button-disabled-content-color);
1016 --button-current-border-color: var(--button-disabled-border-color);
1017 --button-current-background-color: var(--button-disabled-background-color);
1018 --button-current-shadow: var(--button-disabled-shadow);
1019}
1020button:disabled:focus-visible,
1021.button:disabled:focus-visible {
1022 --button-current-content-color: var(--button-disabled-content-color);
1023 --button-current-border-color: var(--button-disabled-border-color);
1024 --button-current-background-color: var(--button-disabled-background-color);
1025 --button-current-shadow: var(--button-disabled-shadow);
1026}
1027
1028/* Standard danger button */
1029button.danger {
1030 --button-border-color: var(--danger-color);
1031 --button-background-color: var(--danger-color);
1032 --button-hover-background-color: var(--danger-color-light);
1033 --button-active-background-color: var(--danger-color-lighter);
1034}
1035
1036/* Low emphasis button */
1037button.low-emphasis {
1038 --button-content-color: var(--accent-color);
1039 --button-border-color: var(--button-default-border-color);
1040 --button-background-color: var(--accent-color-transparent0);
1041 --button-hover-border-color: var(--accent-color);
1042 --button-hover-background-color: var(--accent-color-transparent5);
1043 --button-active-border-color: var(--accent-color);
1044 --button-active-background-color: var(--accent-color-transparent25);
1045 --button-disabled-content-color: var(--disabled-color);
1046 --button-disabled-border-color: var(--disabled-color);
1047 --button-disabled-background-color: var(--accent-color-transparent0);
1048}
1049
1050/* Low emphasis danger button */
1051button.low-emphasis.danger {
1052 --button-content-color: var(--danger-color);
1053 --button-border-color: var(--button-default-border-color);
1054 --button-background-color: var(--danger-color-transparent0);
1055 --button-hover-border-color: var(--danger-color);
1056 --button-hover-background-color: var(--danger-color-transparent5);
1057 --button-active-border-color: var(--danger-color);
1058 --button-active-background-color: var(--danger-color-transparent25);
1059 --button-disabled-content-color: var(--disabled-color);
1060 --button-disabled-border-color: var(--disabled-color);
1061 --button-disabled-background-color: var(--danger-color-transparent0);
1062}
1063
1064/* Input button */
1065button.input-button {
1066 --button-content-color: var(--button-default-icon-color);
1067 --button-border-color: var(--input-background-color);
1068 --button-background-color: var(--input-background-color);
1069 --button-hover-background-color: var(--input-background-color-dark);
1070 --button-active-background-color: var(--input-background-color-darker);
1071
1072 --button-padding-vertical: 0;
1073 --button-padding-horizontal: 0.5em;
1074
1075 text-align: left;
1076 font-weight: normal;
1077 border-style: none;
1078 border-width: 0;
1079 width: var(--input-width-large);
1080 height: var(--input-height);
1081 line-height: var(--input-height);
1082 box-sizing: border-box;
1083 position: relative;
1084}
1085
1086/* Input suffix button */
1087button.input-suffix {
1088 --button-content-color: var(--button-default-icon-color);
1089 --button-border-color: var(--input-background-color);
1090 --button-background-color: var(--input-background-color);
1091 --button-hover-background-color: var(--input-background-color-dark);
1092 --button-active-background-color: var(--input-background-color-darker);
1093}
1094button.input-suffix.light-icon {
1095 --button-content-color: var(--button-default-icon-color-light);
1096}
1097button.input-suffix.input-suffix-icon-button {
1098 width: 2.125em;
1099}
1100button.input-suffix.input-suffix-icon-button>.icon {
1101 display: block;
1102 width: 100%;
1103 height: 100%;
1104 background-color: var(--button-current-content-color);
1105}
1106input[type=text]:invalid~button.input-suffix,
1107input[type=number]:invalid~button.input-suffix,
1108input[type=password]:invalid~button.input-suffix,
1109input[type=text][data-invalid=true]~button.input-suffix,
1110input[type=number][data-invalid=true]~button.input-suffix,
1111input[type=password][data-invalid=true]~button.input-suffix {
1112 --button-border-color: var(--danger-color);
1113 --button-hover-border-color: var(--danger-color);
1114 --button-active-border-color: var(--danger-color);
1115 --button-disabled-border-color: var(--danger-color);
1116
1117 border-width: var(--thin-border-size);
1118 border-style: solid;
1119 border-left-style: none;
1120}
1121
1122
1123/* Button inner label */
1124.button-inner-label {
1125 margin-top: calc(-1 * var(--button-padding-vertical));
1126 margin-bottom: calc(-1 * var(--button-padding-vertical));
1127 margin-left: calc(-1 * var(--button-padding-horizontal));
1128 margin-right: calc(-1 * var(--button-padding-horizontal));
1129 padding: var(--button-padding-vertical) var(--button-padding-horizontal);
1130}
1131
1132
1133/* Material design icon button */
1134button.icon-button {
1135 --button-content-color: var(--button-default-icon-color);
1136 --button-border-color: transparent;
1137 --button-background-color: transparent;
1138 --button-shadow: none;
1139
1140 --button-hover-border-color: transparent;
1141 --button-hover-background-color: transparent;
1142 --button-hover-shadow: none;
1143
1144 --button-active-border-color: transparent;
1145 --button-active-background-color: transparent;
1146 --button-active-shadow: none;
1147
1148 --button-disabled-content-color: var(--button-default-icon-color);
1149 --button-disabled-border-color: transparent;
1150 --button-disabled-background-color: transparent;
1151 --button-disabled-shadow: none;
1152
1153 vertical-align: middle;
1154 border: none;
1155 margin: 0;
1156 padding: 0;
1157 box-sizing: content-box;
1158 font-size: inherit;
1159 cursor: pointer;
1160}
1161button.icon-button.light-icon {
1162 --button-content-color: var(--button-default-icon-color-light);
1163 --button-disabled-content-color: var(--button-default-icon-color-light);
1164}
1165button.icon-button:not([hidden]) {
1166 display: inline-block;
1167}
1168button.icon-button>.icon-button-inner {
1169 display: block;
1170 width: var(--icon-button-size);
1171 height: var(--icon-button-size);
1172 position: relative;
1173}
1174.icon-button>.icon-button-inner::after {
1175 position: absolute;
1176 display: block;
1177 content: '';
1178 left: 0;
1179 top: 0;
1180 right: 0;
1181 bottom: 0;
1182 border-radius: 50%;
1183 background-color: var(--selectable-indicator-color);
1184 pointer-events: none;
1185 transform: scale(0);
1186 opacity: 0;
1187 visibility: hidden;
1188 transition: var(--selectable-indicator-transition1);
1189}
1190.icon-button:focus>.icon-button-inner::after,
1191.icon-button:active>.icon-button-inner::after {
1192 transform: scale(1);
1193 opacity: 1;
1194 visibility: visible;
1195 transition: var(--selectable-indicator-transition2);
1196}
1197.icon-button:focus:not(:focus-visible)>.icon-button-inner::after {
1198 transform: scale(0);
1199 opacity: 0;
1200 visibility: hidden;
1201 transition: var(--selectable-indicator-transition1);
1202}
1203.icon-button:focus-visible>.icon-button-inner::after,
1204.icon-button:focus-visible:active>.icon-button-inner::after,
1205.icon-button:focus>.icon-button-inner::after,
1206.icon-button:focus:active>.icon-button-inner::after {
1207 transform: scale(1);
1208 opacity: 1;
1209 visibility: visible;
1210 transition: var(--selectable-indicator-transition2);
1211}
1212.icon-button>.icon-button-inner>.icon {
1213 display: block;
1214 position: absolute;
1215 left: 0;
1216 top: 0;
1217 right: 0;
1218 bottom: 0;
1219 background-color: var(--button-current-content-color);
1220 --icon-size: calc(16em / var(--font-size-no-units)) calc(16em / var(--font-size-no-units));
1221}
1222.icon-button>.icon-button-inner>.icon[data-icon=material-right-arrow] { --icon-size: var(--material-arrow-dimension1) var(--material-arrow-dimension2); }
1223.icon-button>.icon-button-inner>.icon[data-icon=material-down-arrow] { --icon-size: var(--material-arrow-dimension2) var(--material-arrow-dimension1); }
1224
1225.input-height-icon-button-container {
1226 height: var(--input-height);
1227 box-sizing: border-box;
1228}
1229.input-height-icon-button-container>.icon-button {
1230 position: relative;
1231 top: calc((var(--input-height) - var(--icon-button-size)) * 0.5);
1232}
1233
1234
1235/* Popup menu */
1236#popup-menus {
1237 position: absolute;
1238}
1239.popup-menu-container {
1240 position: fixed;
1241 left: 0;
1242 top: 0;
1243 right: 0;
1244 bottom: 0;
1245 z-index: 1001;
1246 outline: none;
1247 overflow: hidden;
1248}
1249.popup-menu {
1250 position: absolute;
1251 left: 0;
1252 top: 0;
1253 max-width: 100%;
1254 max-height: 100%;
1255 box-sizing: border-box;
1256 box-shadow: var(--menu-shadow);
1257 border-radius: var(--menu-border-radius);
1258 background-color: var(--background-color-light);
1259 padding: 0.5em 0;
1260 min-width: 8em;
1261 overflow: auto;
1262}
1263.popup-menu-body {
1264 display: flex;
1265 flex-flow: column nowrap;
1266 align-items: stretch;
1267 white-space: nowrap;
1268}
1269button.popup-menu-item {
1270 --button-content-color: var(--text-color);
1271 --button-border-color: transparent;
1272 --button-background-color: transparent;
1273 --button-shadow: none;
1274
1275 --button-hover-border-color: transparent;
1276 --button-hover-background-color: var(--menu-item-hover-color);
1277 --button-hover-shadow: none;
1278
1279 --button-active-border-color: transparent;
1280 --button-active-background-color: var(--menu-item-active-color);
1281 --button-active-shadow: none;
1282
1283 --button-disabled-content-color: var(--text-color-light2);
1284 --button-disabled-border-color: transparent;
1285 --button-disabled-background-color: transparent;
1286 --button-disabled-shadow: none;
1287
1288 --button-padding-vertical: 0.625em;
1289 --button-padding-horizontal: 1.5em;
1290
1291 flex: 1 1 auto;
1292 border-radius: 0;
1293 border-style: none;
1294 border-width: 0;
1295 text-align: left;
1296 font-size: 1em;
1297 font-weight: normal;
1298 font-family: inherit;
1299 align-items: center;
1300}
1301button.popup-menu-item.popup-menu-item-bold {
1302 font-weight: bold;
1303}
1304button.popup-menu-item:not([hidden]) {
1305 display: flex;
1306}
1307button.popup-menu-item.popup-menu-item-thin {
1308 --button-padding-vertical: 0.375em;
1309}
1310.popup-menu-item-icon {
1311 width: calc(16em / var(--font-size-no-units));
1312 height: calc(16em / var(--font-size-no-units));
1313 background-color: var(--button-current-content-color);
1314 flex: 0 0 auto;
1315}
1316.popup-menu-item-icon:not([hidden]) {
1317 display: block;
1318}
1319.popup-menu-item-icon+.popup-menu-item-label {
1320 margin-left: 0.5em;
1321}
1322:root[data-page-type=popup] .popup-menu.popup-menu-auto-size,
1323.popup-menu.popup-menu-small {
1324 border-radius: calc(var(--menu-border-radius) * 0.75);
1325 padding: 0.25em 0;
1326 min-width: 6em;
1327}
1328:root[data-page-type=popup] .popup-menu.popup-menu-auto-size button.popup-menu-item,
1329.popup-menu.popup-menu-small button.popup-menu-item {
1330 --button-padding-vertical: 0.5em;
1331 --button-padding-horizontal: 0.75em;
1332
1333 font-size: var(--font-size-small);
1334}
1335:root[data-page-type=popup] .popup-menu.popup-menu-auto-size button.popup-menu-item.popup-menu-item-thin,
1336.popup-menu.popup-menu-small button.popup-menu-item.popup-menu-item-thin {
1337 --button-padding-vertical: 0.25em;
1338}
1339.popup-menu-item-group {
1340 position: relative;
1341 display: flex;
1342 flex-flow: row nowrap;
1343 align-items: stretch;
1344}