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
21:root {
22 --font-size-no-units: 14;
23 --font-size: calc(1px * var(--font-size-no-units));
24 --line-height-no-units: 20;
25 --line-height: calc(var(--line-height-no-units) / var(--font-size-no-units));
26 --background-color: #f8f9fa;
27 --text-color: #333333;
28}
29
30:root[data-theme=dark] {
31 --background-color: #1e1e1e;
32 --text-color: #cccccc;
33}
34
35/* Initilization */
36
37body[data-loaded=true] #loading {
38 display: none;
39}
40
41body:not([data-loaded=true]) #action-popup {
42 display: none;
43}
44
45:root[data-mode=full] #action-popup {
46 display: initial;
47}
48
49#action-popup {
50 display: flex;
51 flex-flow: column nowrap;
52 align-items: center;
53}
54
55body {
56 padding: 5px;
57 margin: 0;
58 font-family: 'Segoe UI', Tahoma, sans-serif;
59 font-size: var(--font-size);
60 width: max-content;
61 height: max-content;
62 background-color: var(--background-color);
63}
64
65/* Toggle */
66
67body[data-loaded=true] .toggle-group {
68 transition: transform 0.35s;
69}
70
71.toggle>input[type=checkbox] {
72 width: 0;
73 height: 0;
74 opacity: 0;
75 display: block;
76 -webkit-appearance: none;
77 -moz-appearance: none;
78 appearance: none;
79}
80
81.toggle>input[type=checkbox]:not(:checked)~.toggle-group {
82 transform: translateX(-50%);
83}
84
85.toggle {
86 box-sizing: border-box;
87 width: 85px;
88 height: 43px;
89 position: relative;
90 overflow: hidden;
91 border: 1px solid #245580;
92 border-radius: 4px;
93 display: inline-block;
94}
95
96.toggle-group {
97 position: absolute;
98 width: 200%;
99 left: 0;
100 top: 0;
101 bottom: 0;
102 user-select: none;
103}
104
105.toggle-on,
106.toggle-off,
107.toggle-handle {
108 display: flex;
109 justify-content: center;
110 align-items: center;
111 padding: 6px 12px;
112 font-size: var(--font-size);
113 font-weight: bold;
114 line-height: var(--line-height);
115 text-align: center;
116 white-space: nowrap;
117 cursor: pointer;
118}
119
120.toggle-on,
121.toggle-off {
122 position: absolute;
123 top: 0;
124 bottom: 0;
125 margin: 0;
126 border: 0;
127}
128
129.toggle-on {
130 padding-right: 24px;
131 left: 0;
132 right: 50%;
133 color: #ffffff;
134 border-color: #2e6da4;
135 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
136 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 3px 5px rgba(0, 0, 0, 0);
137 background-image: linear-gradient(225deg, #bc00ff, #00eeff);
138 background-repeat: repeat-x;
139}
140input[type=checkbox]:focus~.toggle-group>.toggle-on,
141input[type=checkbox]~.toggle-group>.toggle-on:hover {
142 filter: grayscale(30%);
143}
144input[type=checkbox]:focus:not(:focus-visible)~.toggle-group>.toggle-on:not(:hover) {
145 background-image: linear-gradient(225deg, #bc00ff, #00eeff);
146}
147input[type=checkbox]:focus-visible~.toggle-group>.toggle-on {
148 filter: grayscale(30%);
149}
150input[type=checkbox]~.toggle-group>.toggle-on:active,
151input[type=checkbox]~.toggle-group>.toggle-on:active:focus {
152 box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
153}
154
155.toggle-off {
156 padding-left: 24px;
157 left: 50%;
158 right: 0;
159}
160
161.toggle-handle {
162 position: relative;
163 margin: 0 auto;
164 padding-top: 0;
165 padding-bottom: 0;
166 height: 100%;
167 width: 0;
168 border-style: solid;
169 border-width: 0 1px;
170 border-radius: 4px;
171 border-color: #cccccc;
172}
173
174.toggle-off,
175.toggle-handle {
176 color: #333333;
177 text-shadow: 0 1px 0 #ffffff;
178 background-color: #ffffff;
179 background-repeat: repeat-x;
180}
181input[type=checkbox]:focus~.toggle-group>.toggle-off,
182input[type=checkbox]~.toggle-group>.toggle-off:hover,
183input[type=checkbox]~.toggle-group>.toggle-handle:hover {
184 background-color: #e6e6e6;
185}
186input[type=checkbox]:focus:not(:focus-visible)~.toggle-group>.toggle-off:not(:hover) {
187 background-color: #ffffff;
188}
189input[type=checkbox]:focus-visible~.toggle-group>.toggle-off,
190input[type=checkbox]~.toggle-group>.toggle-off:hover {
191 background-color: #e6e6e6;
192}
193input[type=checkbox]~.toggle-group>.toggle-off:active,
194input[type=checkbox]~.toggle-group>.toggle-handle:active,
195input[type=checkbox]~.toggle-group>.toggle-off:active:focus,
196input[type=checkbox]~.toggle-group>.toggle-handle:active:focus {
197 box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
198}
199
200/* Action Containers */
201
202h2.action-title {
203 padding: 0;
204 margin: 0;
205 font-size: 1.125em;
206 line-height: 1.5;
207}
208
209.action-icon:hover {
210 cursor: pointer;
211}
212
213.action-icon {
214 flex: 0 0 auto;
215 align-self: center;
216}
217.action-icon>.icon {
218 display: block;
219 background-color: var(--button-default-icon-color);
220 width: 1.5em;
221 height: 1.5em;
222}
223
224.low-emphasis {
225 position: relative;
226}
227
228.action-item-left {
229 flex: 1 1 auto;
230 align-self: center;
231 position: relative;
232 display: flex;
233 justify-content: flex-start;
234}
235.action-item-center {
236 flex: 1 1 auto;
237 align-self: center;
238 display: flex;
239 flex-flow: column nowrap;
240 align-items: center;
241 justify-content: center;
242}
243.action-item-right {
244 flex: 0 1 auto;
245 align-self: stretch;
246 display: flex;
247 flex-flow: row nowrap;
248 align-items: center;
249 align-content: center;
250 justify-content: flex-end;
251}
252
253.action-container:not([hidden]) {
254 display: flex;
255 justify-content: space-between;
256 align-items: center;
257 padding: 5px;
258}
259
260.action-container button {
261 flex: 0 0 auto;
262}
263
264.action-container.action-buttons {
265 gap: 0.25em;
266}
267
268/* Actions */
269
270.action-container.action-select-profile {
271 position: relative;
272 gap: 0.5em;
273}
274
275select.profile-select {
276 width: 7em;
277 height: 100%;
278 box-sizing: border-box;
279 border: 0;
280 margin: 0;
281 cursor: pointer;
282 font-size: var(--font-size);
283 overflow: hidden;
284 text-overflow: ellipsis;
285}
286
287/* Tooltip */
288
289.tooltip {
290 color: #808080;
291 padding: 0;
292 margin: 0;
293 margin-top: 0.25em;
294}
295
296.enable-dictionary-tooltip {
297 color: #f0ad4e;
298}
299
300.tooltip>a:link, a:visited {
301 color: #f0ad4e;
302}
303
304/* Mobile overrides */
305
306:root[data-mode=full] #action-popup {
307 display: initial;
308}
309:root[data-mode=full] body {
310 min-width: 95%;
311 width: max-content;
312 font-size: calc(var(--font-size) * 2);
313 text-align: center;
314}
315:root[data-mode=full] .toggle-on, :root[data-mode=full] .toggle-off {
316 font-size: calc(var(--font-size) * 4);
317}
318:root[data-mode=full] .toggle-handle {
319 padding-left: 65px;
320 padding-right: 65px;
321 border-radius: 10px;
322}
323:root[data-mode=full] .toggle {
324 width: 100%;
325 padding-top: 37.7%;
326}
327:root[data-mode=full] #extension-info {
328 max-width: 95vw;
329 overflow-wrap: break-word;
330}
331:root[data-mode=full] select.profile-select {
332 font-size: calc(var(--font-size) * 2);
333}
334
335/* Fallback Mobile overrides */
336
337/* Treat devices that can't hover as mobile devices */
338@media (hover: none) {
339 #action-popup {
340 display: initial;
341 }
342 body {
343 min-width: 95%;
344 width: max-content;
345 font-size: calc(var(--font-size) * 2);
346 text-align: center;
347 }
348 .toggle-on, .toggle-off {
349 font-size: calc(var(--font-size) * 4);
350 }
351 .toggle-handle {
352 padding-left: 65px;
353 padding-right: 65px;
354 border-radius: 10px;
355 }
356 .toggle {
357 width: 100%;
358 padding-top: 37.7%;
359 }
360 #extension-info {
361 max-width: 95vw;
362 overflow-wrap: break-word;
363 }
364 select.profile-select {
365 font-size: calc(var(--font-size) * 2);
366 }
367}
368
369/* Dark mode before themes are applied
370 DO NOT use this for normal theming */
371@media (prefers-color-scheme: dark) {
372 body:not([data-loaded=true]) {
373 color: #cccccc;
374 background-color: #1e1e1e;
375 }
376}