onedeuxtriseigo.nullpo.dev
Pop-up dictionary browser extension for language learning. Successor to Yomichan. (PERSONAL FORK)
1:root {
2 --padding: 10px;
3 --padding-negative: calc(var(--padding) * -1);
4 --content-width: 700px;
5 --shadow-vertical: 0 1px 4px 0 var(--shadow-color), 0 2px 2px 0 var(--shadow-color);
6 --shadow-left: -1px 0 4px 0 var(--shadow-color), -2px 0 2px 0 var(--shadow-color);
7 --settings-group-horizontal-margin: 0;
8 --settings-group-inner-vertical-padding: 0.85em;
9 --settings-group-inner-horizontal-padding: 1.5em;
10 --settings-group-inner-horizontal-padding-half: calc(var(--settings-group-inner-horizontal-padding) * 0.5);
11 --settings-group-inner-horizontal-padding-half-wrappable: var(--settings-group-inner-horizontal-padding-half);
12 --settings-group-inner-horizontal-padding-fourth: calc(var(--settings-group-inner-horizontal-padding) * 0.25);
13 --settings-group-border-radius: 0.3em;
14 --settings-group-right-max-height: 40px;
15 --settings-group-wrap: nowrap;
16 --show-preview-label-height: 40px;
17
18 --font-size-no-units: 14;
19 --font-size: calc(1px * var(--font-size-no-units));
20 --font-size-small: 12px;
21 --outline-item-height: 40px;
22 --outline-item-icon-size: 32px;
23 --input-short-width: calc(var(--input-width-large) / 2 - var(--padding) / 2);
24 --input-short-height: 24px;
25 --input-medium-width: calc(var(--input-width-large) * 0.75);
26 --fab-button-size: 56px;
27 --fab-button-padding: 16px;
28 --modal-width: 600px;
29 --modal-height: 400px;
30 --modal-width-small: 400px;
31 --modal-height-small: 200px;
32 --modal-width-medium: 600px;
33 --modal-height-medium: 400px;
34 --modal-transition-offset: -64px;
35 --badge-size: 16px;
36
37 --link-color: var(--accent-color);
38 --link-color-hover: var(--accent-color-dark);
39 --separator-color1: #cccccc;
40 --separator-color2: #eeeeee;
41 --outline-item-background-color: rgba(13, 13, 13, 0);
42 --outline-item-background-color-hover: rgba(13, 13, 13, 0.15);
43 --warning-color: #96751c;
44 --warning-color-light: #edc75e;
45 --dim-background-color: rgba(0, 0, 0, 0.5);
46 --content-dimmer-color: rgba(0, 0, 0, 0.1);
47 --advanced-color: #6640be;
48 --advanced-color-lighter: hsl(258, 50%, 75%);
49 --advanced-color-transparent25: rgba(102, 64, 190, 0.5);
50
51 --modal-padding-horizontal: 1em;
52 --modal-padding-vertical: 0.625em;
53 --modal-padding-vertical-half: calc(var(--modal-padding-vertical) * 0.5);
54 --modal-button-spacing: 0.625em;
55}
56:root:not([data-loaded=true]) {
57 --animation-duration: 0s;
58}
59:root[data-theme=dark] {
60 --separator-color1: #333333;
61 --separator-color2: #222222;
62}
63
64/* Modal */
65.modal {
66 position: fixed;
67 left: 0;
68 top: 0;
69 bottom: 0;
70 right: 0;
71 display: flex;
72 flex-flow: row nowrap;
73 justify-content: center;
74 align-items: center;
75 overscroll-behavior: contain;
76 background-color: var(--dim-background-color);
77 outline: none;
78 z-index: 10000;
79 opacity: 1;
80 visibility: visible;
81 transition:
82 opacity var(--animation-duration2) ease-out,
83 visibility 0s linear;
84}
85.modal[hidden] {
86 opacity: 0;
87 visibility: hidden;
88 transition:
89 opacity var(--animation-duration2) ease-in,
90 visibility 0s linear var(--animation-duration2);
91}
92.modal[hidden]:not(.hidden-animating) {
93 display: none;
94}
95.modal-content {
96 max-width: 100%;
97 max-height: 100%;
98 width: var(--modal-width);
99 height: var(--modal-height);
100 background-color: var(--background-color-light);
101 flex: 0 1 auto;
102 border-radius: 0.5em;
103 transform: translate(0, 0);
104 transition:
105 transform var(--animation-duration2) ease-out,
106 width var(--animation-duration2) ease-in-out,
107 height var(--animation-duration2) ease-in-out,
108 border-radius var(--animation-duration2) ease-in-out;
109 box-shadow: var(--shadow-vertical);
110 display: flex;
111 flex-flow: column nowrap;
112 overflow: hidden;
113}
114.modal[hidden] .modal-content {
115 pointer-events: none;
116}
117.modal-content.modal-content-small {
118 width: var(--modal-width-small);
119 min-height: var(--modal-height-small);
120 height: auto;
121 max-height: 100%;
122}
123.modal-content.modal-content-medium {
124 width: var(--modal-width-medium);
125 min-height: var(--modal-height-medium);
126 height: auto;
127 max-height: 100%;
128}
129.modal-content.modal-content-full {
130 width: var(--content-width);
131 height: 100%;
132 transform: translate(0, 0);
133 border-radius: 0;
134}
135.modal[hidden] .modal-content {
136 transform: translate(0, var(--modal-transition-offset));
137 transition:
138 transform 0s linear var(--animation-duration2),
139 width var(--animation-duration2) ease-in-out,
140 height var(--animation-duration2) ease-in-out,
141 border-radius var(--animation-duration2) ease-in-out;
142}
143.modal-header {
144 flex: 0 0 auto;
145 padding: var(--modal-padding-vertical) var(--modal-padding-horizontal) var(--modal-padding-vertical-half);
146 display: flex;
147 width: 100%;
148 align-items: center;
149 box-sizing: border-box;
150}
151.modal-title {
152 font-size: 1.125em;
153 flex: 1 1 auto;
154}
155.modal-footer {
156 flex: 0 0 auto;
157 padding: var(--modal-padding-vertical-half) var(--modal-padding-horizontal) var(--modal-padding-vertical);
158 margin-right: calc(var(--modal-button-spacing) * -1);
159 margin-top: calc(var(--modal-button-spacing) * -1);
160 display: flex;
161 flex-flow: row wrap;
162 align-items: flex-end;
163 justify-items: flex-end;
164 justify-content: flex-end;
165}
166.modal-footer>* {
167 margin-right: var(--modal-button-spacing);
168 margin-top: var(--modal-button-spacing);
169}
170.modal-body {
171 flex: 1 1 auto;
172 overflow: auto;
173 padding: var(--modal-padding-vertical-half) var(--modal-padding-horizontal);
174}
175.modal-body-addon {
176 flex: 0 0 auto;
177 padding: var(--modal-padding-vertical-half) var(--modal-padding-horizontal);
178}
179.modal-body>.settings-item,
180.modal-settings-group>.settings-item {
181 margin-left: calc(var(--modal-padding-horizontal) * -1);
182}
183.modal-body .settings-item {
184 margin-right: calc(var(--modal-padding-horizontal) * -1);
185}
186.modal-body .settings-item+.settings-item {
187 border-top: none;
188}
189.modal-body .settings-item-left {
190 padding-left: var(--modal-padding-horizontal);
191 padding-top: var(--settings-group-inner-horizontal-padding-fourth);
192 padding-bottom: var(--settings-group-inner-horizontal-padding-fourth);
193}
194.modal-body .settings-item-right {
195 padding-right: var(--modal-padding-horizontal);
196 padding-top: var(--settings-group-inner-horizontal-padding-fourth);
197 padding-bottom: var(--settings-group-inner-horizontal-padding-fourth);
198}
199.modal-body .settings-item-children {
200 padding-left: var(--modal-padding-horizontal);
201 padding-right: var(--modal-padding-horizontal);
202 padding-bottom: var(--settings-group-inner-horizontal-padding-fourth);
203}
204
205.modal.modal-left {
206 display: flex;
207 flex-flow: row nowrap;
208 width: 100%;
209 height: 100%;
210 background-color: transparent;
211 pointer-events: none;
212}
213.modal-content-container {
214 pointer-events: none;
215 width: 100%;
216 height: 100%;
217 display: flex;
218 flex-flow: row nowrap;
219 justify-content: center;
220 align-items: center;
221}
222
223.modal-content-container>.modal-content,
224.modal-content-container>.modal-content-dimmer {
225 pointer-events: auto;
226}
227
228.modal-content-container>.modal-content-dimmer {
229 background: var(--custom-css-modal-background);
230 width: var(--custom-css-dim-size);
231 height: 100%;
232 margin-right: calc(100% - var(--custom-css-dim-size));
233 position: absolute;
234}
235
236.modal-header-button-container {
237 margin-top: calc(-1 * var(--modal-padding-vertical-half));
238 margin-bottom: calc(-1 * var(--modal-padding-vertical-half));
239}
240.modal-header-button-group {
241 display: block;
242 position: relative;
243 width: var(--icon-button-size);
244 height: var(--icon-button-size);
245}
246.modal-header-button {
247 position: absolute;
248 left: 0;
249 top: 0;
250 right: 0;
251 bottom: 0;
252}
253button.icon-button.modal-header-button {
254 --button-content-color: var(--button-default-icon-color-light);
255 --button-hover-content-color: var(--button-default-icon-color);
256 --button-active-content-color: var(--button-default-icon-color);
257}
258button.icon-button.modal-header-button>.icon-button-inner>.icon {
259 transition: background-color var(--animation-duration) ease-in-out;
260}
261.modal-header-button[data-modal-action=expand],
262.modal-header-button[data-modal-action=collapse] {
263 visibility: visible;
264 opacity: 1;
265 z-index: 1;
266 transition:
267 opacity var(--animation-duration2) ease-in-out 0s,
268 visibility 0s ease-in-out 0s;
269}
270.modal-content.modal-content-full .modal-header-button[data-modal-action=expand],
271.modal-content:not(.modal-content-full) .modal-header-button[data-modal-action=collapse] {
272 visibility: hidden;
273 opacity: 0;
274 pointer-events: none;
275 z-index: 0;
276 transition:
277 opacity var(--animation-duration2) ease-in-out 0s,
278 visibility 0s ease-in-out var(--animation-duration2);
279}
280
281.modal-separator-line {
282 border-top: var(--thin-border-size) solid var(--separator-color1);
283 margin: 0 calc(var(--modal-padding-horizontal) * -1);
284}
285.modal-separator-line-light {
286 border-top: var(--thin-border-size) solid var(--separator-color2);
287 margin: 0 calc(var(--modal-padding-horizontal) * -1);
288}
289
290/* Settings styles */
291.settings-group {
292 margin: 0 var(--settings-group-horizontal-margin);
293 padding: 0;
294 box-sizing: border-box;
295 background-color: var(--background-color-light);
296 box-shadow: var(--shadow-vertical);
297 border-radius: var(--settings-group-border-radius);
298 overflow-x: hidden;
299}
300.settings-group.settings-group-top-margin {
301 margin-top: 1.0125em;
302}
303.settings-item {
304 position: relative;
305}
306.settings-item:not([hidden]) {
307 display: block;
308}
309.settings-item-outer {
310 display: block;
311 width: 100%;
312}
313.settings-item-inner {
314 display: flex;
315 flex-flow: row nowrap;
316 justify-content: flex-end;
317 align-content: stretch;
318 width: 100%;
319}
320.settings-item-inner.settings-item-inner-wrappable {
321 flex-wrap: var(--settings-group-wrap);
322}
323.settings-item-left {
324 padding: var(--settings-group-inner-vertical-padding) var(--settings-group-inner-horizontal-padding-half) var(--settings-group-inner-vertical-padding) var(--settings-group-inner-horizontal-padding);
325 flex: 1 1 auto;
326 align-self: center;
327 position: relative;
328}
329.settings-item-left:last-child {
330 padding-right: var(--settings-group-inner-horizontal-padding);
331}
332.settings-item-right {
333 padding: var(--settings-group-inner-vertical-padding) var(--settings-group-inner-horizontal-padding) var(--settings-group-inner-vertical-padding) var(--settings-group-inner-horizontal-padding-half);
334 flex: 0 1 auto;
335 align-self: stretch;
336 max-height: var(--settings-group-right-max-height);
337 display: flex;
338 flex-flow: row nowrap;
339 align-items: center;
340 align-content: center;
341 justify-content: flex-end;
342}
343.settings-item-inner.settings-item-inner-wrappable>.settings-item-left {
344 padding-right: var(--settings-group-inner-horizontal-padding-half-wrappable);
345}
346.settings-item-inner.settings-item-inner-wrappable>.settings-item-right {
347 padding-left: var(--settings-group-inner-horizontal-padding-half-wrappable);
348}
349.settings-item-center {
350 padding: var(--settings-group-inner-vertical-padding) var(--settings-group-inner-horizontal-padding) var(--settings-group-inner-vertical-padding) var(--settings-group-inner-horizontal-padding);
351 flex: 0 1 100%;
352 align-self: flex-start;
353 text-align: center;
354}
355.settings-item+.settings-item {
356 border-top: var(--thin-border-size) solid var(--separator-color2);
357}
358.settings-item-description {
359 color: var(--text-color-light2);
360}
361.settings-item-right.open-panel-button-container {
362 padding: 0.25em 1em 0.25em 0.75em;
363 max-height: calc(var(--settings-group-right-max-height) + var(--settings-group-inner-vertical-padding) * 2);
364}
365.settings-item-children {
366 padding: 0em var(--settings-group-inner-horizontal-padding-half) var(--settings-group-inner-vertical-padding) var(--settings-group-inner-horizontal-padding);
367 margin-top: 0;
368}
369.settings-item-children.settings-item-children-group {
370 padding: 0 0 0 calc(var(--settings-group-inner-horizontal-padding) + var(--settings-group-inner-horizontal-padding));
371}
372.settings-item-children.settings-item-children-group .settings-item {
373 border-top: var(--thin-border-size) solid var(--separator-color2);
374}
375.settings-item-children.settings-item-children-group .settings-item-left {
376 padding-left: 0;
377}
378.settings-item-children.settings-item-children-group .settings-item-inner.settings-item-inner-wrappable>.settings-item-left:not(:last-child) {
379 padding-right: calc(var(--settings-group-inner-horizontal-padding-half-wrappable) * 2);
380}
381.settings-item-children.settings-item-children-group .settings-item-inner.settings-item-inner-wrappable>.settings-item-right {
382 padding-left: 0;
383}
384.settings-item-children.settings-item-children-group .settings-item-children {
385 padding-left: 0;
386}
387.settings-item.settings-item-button,
388a.settings-item.settings-item-button {
389 cursor: pointer;
390 color: var(--text-color);
391 text-decoration: none;
392 background-color: transparent;
393 transition: background-color var(--animation-duration) ease-in-out;
394}
395.settings-item.settings-item-button>.settings-item-inner,
396.settings-item.settings-item-button>.settings-item-inner>.settings-item-left,
397.settings-item.settings-item-button>.settings-item-inner>.settings-item-right {
398 margin-top: 0;
399}
400.settings-item.settings-item-button:hover,
401.settings-item.settings-item-button:active {
402 background-color: var(--background-color);
403}
404.settings-item.settings-item-button .icon-button>.icon-button-inner>.icon {
405 transition: background-color var(--animation-duration) ease-in-out;
406}
407.settings-item.settings-item-button:hover .icon-button>.icon-button-inner>.icon,
408.settings-item.settings-item-button:active .icon-button>.icon-button-inner>.icon {
409 background-color: var(--accent-color);
410}
411.settings-item-invalid-indicator {
412 display: none;
413 position: absolute;
414 left: 0;
415 top: 0;
416 bottom: 0;
417 width: 0.5em;
418 background-color: var(--danger-color);
419}
420.settings-item[data-invalid=true] .settings-item-invalid-indicator {
421 display: block;
422}
423
424
425/* Settings item groups */
426.settings-item-group {
427 margin-right: var(--padding-negative);
428 display: flex;
429 flex-flow: row nowrap;
430 align-items: center;
431 align-content: center;
432 justify-content: flex-end;
433}
434.settings-item-group.settings-item-group-wrap {
435 flex-wrap: wrap;
436}
437.settings-item-group-item {
438 flex: 0 1 auto;
439 padding-right: var(--padding);
440}
441.settings-item-group-item-label {
442 font-size: var(--font-size-small);
443 line-height: 1;
444}
445input[type=text].short-width,
446input[type=number].short-width,
447select.short-width {
448 width: var(--input-short-width);
449}
450input[type=text].medium-width,
451input[type=number].medium-width,
452select.medium-width {
453 width: var(--input-medium-width);
454}
455input[type=text].short-height,
456input[type=number].short-height,
457select.short-height {
458 height: var(--input-short-height);
459 margin-top: calc(var(--settings-group-right-max-height) - var(--input-short-height) - var(--font-size-small));
460 line-height: var(--line-height);
461}
462.settings-item-button-group-container {
463 max-height: none;
464 width: 100%;
465}
466.settings-item-button-group {
467 display: flex;
468 width: 100%;
469 flex-flow: row wrap;
470 max-height: none;
471 justify-content: flex-start;
472 margin-top: var(--padding-negative);
473 margin-right: var(--padding-negative);
474}
475.settings-item-button-group-item {
476 flex: 0 1 auto;
477 padding-top: var(--padding);
478 padding-right: var(--padding);
479}
480.settings-item-progress-report {
481 display: none;
482 font-weight: bold;
483 color: #4169e1;
484}
485.settings-item-error-report {
486 display: none;
487 font-weight: bold;
488 color: #8b0000;
489}