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) 2021-2022 Yomichan Authors
4 *
5 * This program is free software: you can redistribute it and/or modify
6 * it under the entrys 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/* Glossary images */
20.gloss-image-container {
21 display: inline-block;
22 white-space: nowrap;
23 max-width: 100%;
24 max-height: 100vh;
25 position: relative;
26 vertical-align: top;
27 line-height: 0;
28 font-size: calc(1em / var(--font-size-no-units));
29 overflow: hidden;
30}
31.gloss-image-link[data-background=true]>.gloss-image-container {
32 background-color: var(--gloss-image-background-color);
33}
34.gloss-image-link {
35 cursor: inherit;
36 color: var(--accent-color);
37 display: inline-block;
38 position: relative;
39 line-height: 1;
40 max-width: 100%;
41}
42.gloss-image-link:hover {
43 color: var(--accent-color-dark);
44 cursor: pointer;
45}
46.gloss-image-container-overlay {
47 position: absolute;
48 left: 0;
49 top: 0;
50 width: 100%;
51 height: 100%;
52 font-size: calc(1em * var(--font-size-no-units));
53 line-height: var(--line-height);
54 display: table;
55 table-layout: fixed;
56 white-space: normal;
57 color: var(--text-color-light3);
58}
59.gloss-image-link[data-has-image=true][data-image-load-state=load-error] .gloss-image-container-overlay::after {
60 content: 'Image failed to load';
61 display: table-cell;
62 width: 100%;
63 height: 100%;
64 vertical-align: middle;
65 text-align: center;
66 padding: 0.25em;
67}
68.gloss-image-background {
69 --image: none;
70
71 position: absolute;
72 left: 0;
73 top: 0;
74 width: 100%;
75 height: 100%;
76 background-color: var(--text-color);
77 -webkit-mask-repeat: no-repeat;
78 -webkit-mask-position: center center;
79 -webkit-mask-mode: alpha;
80 -webkit-mask-size: contain;
81 -webkit-mask-image: var(--image);
82 mask-repeat: no-repeat;
83 mask-position: center center;
84 mask-mode: alpha;
85 mask-size: contain;
86 mask-image: var(--image);
87 display: none;
88}
89.gloss-image {
90 display: inline-block;
91 vertical-align: top;
92 object-fit: contain;
93 border: none;
94 outline: none;
95}
96.gloss-image-link[data-has-aspect-ratio=true] .gloss-image {
97 position: absolute;
98 left: 0;
99 top: 0;
100 width: 100%;
101 height: 100%;
102}
103.gloss-image-link[data-image-rendering=pixelated] .gloss-image,
104.gloss-image-link[data-image-rendering=pixelated] .gloss-image-background {
105 image-rendering: auto;
106 image-rendering: -moz-crisp-edges;
107 image-rendering: -webkit-optimize-contrast;
108 image-rendering: pixelated;
109 image-rendering: crisp-edges;
110}
111.gloss-image-link[data-image-rendering=crisp-edges] .gloss-image,
112.gloss-image-link[data-image-rendering=crisp-edges] .gloss-image-background {
113 image-rendering: auto;
114 image-rendering: -moz-crisp-edges;
115 image-rendering: -webkit-optimize-contrast;
116 image-rendering: crisp-edges;
117}
118:root[data-browser=firefox] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image,
119:root[data-browser=firefox] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image-background,
120:root[data-browser=firefox-mobile] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image,
121:root[data-browser=firefox-mobile] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image-background {
122 image-rendering: auto;
123}
124.gloss-image-link[data-has-aspect-ratio=true] .gloss-image-sizer {
125 display: inline-block;
126 width: 0;
127 vertical-align: top;
128 font-size: 0;
129}
130.gloss-image-link-text {
131 display: none;
132 line-height: var(--line-height);
133}
134.gloss-image-link-text::before {
135 content: '[';
136}
137.gloss-image-link-text::after {
138 content: ']';
139}
140.gloss-image-description {
141 display: block;
142 white-space: pre-line;
143}
144
145.gloss-image-link[data-appearance=monochrome] .gloss-image {
146 /* Workaround for coloring monochrome gloss images due to issues with masking using a canvas without loading extra media */
147 /* drop-shadow with 0.01px blur is at minimum required for Firefox to render the shadow when used on a canvas */
148 --shadow-settings: 0 0 0.01px var(--text-color);
149 filter: grayscale(1) opacity(0.5) drop-shadow(var(--shadow-settings)) drop-shadow(var(--shadow-settings)) saturate(1000%) brightness(1000%);
150}
151
152.gloss-image-link[data-size-units=em] .gloss-image-container {
153 font-size: 1em;
154}
155
156.gloss-image-link[data-vertical-align=baseline] { vertical-align: baseline; }
157.gloss-image-link[data-vertical-align=sub] { vertical-align: sub; }
158.gloss-image-link[data-vertical-align=super] { vertical-align: super; }
159.gloss-image-link[data-vertical-align=text-top] { vertical-align: top; }
160.gloss-image-link[data-vertical-align=text-bottom] { vertical-align: bottom; }
161.gloss-image-link[data-vertical-align=middle] { vertical-align: middle; }
162.gloss-image-link[data-vertical-align=top] { vertical-align: top; }
163.gloss-image-link[data-vertical-align=bottom] { vertical-align: bottom; }
164.gloss-image-link[data-collapsed=true],
165:root[data-glossary-layout-mode^=compact] .gloss-image-link[data-collapsible=true] {
166 vertical-align: baseline;
167}
168
169.gloss-image-link[data-collapsed=true] .gloss-image-container,
170:root[data-glossary-layout-mode^=compact] .gloss-image-link[data-collapsible=true] .gloss-image-container {
171 display: none;
172 position: absolute;
173 left: 0;
174 top: 100%;
175 z-index: 1;
176}
177.entry:nth-last-of-type(1):not(:nth-of-type(1)) .gloss-image-link[data-collapsed=true] .gloss-image-container,
178:root[data-glossary-layout-mode^=compact] .entry:nth-last-of-type(1):not(:nth-of-type(1)) .gloss-image-link[data-collapsible=true] .gloss-image-container,
179:root[data-glossary-layout-mode^=compact] .definition-item:nth-last-of-type(1) .gloss-image-link[data-collapsible=true] .gloss-image-container {
180 bottom: 100%;
181 top: auto;
182}
183.gloss-image-link[data-collapsed=true]:hover .gloss-image-container,
184.gloss-image-link[data-collapsed=true]:focus .gloss-image-container,
185:root[data-glossary-layout-mode^=compact] .gloss-image-link[data-collapsible=true]:hover .gloss-image-container,
186:root[data-glossary-layout-mode^=compact] .gloss-image-link[data-collapsible=true]:focus .gloss-image-container {
187 display: block;
188}
189.gloss-image-link[data-collapsed=true] .gloss-image-link-text,
190:root[data-glossary-layout-mode^=compact] .gloss-image-link[data-collapsible=true] .gloss-image-link-text {
191 display: inline;
192}
193.gloss-image-link[data-collapsed=true]~.gloss-image-description,
194:root[data-glossary-layout-mode^=compact] .gloss-image-description {
195 display: inline;
196}
197
198
199/* Links */
200.gloss-link-text {
201 vertical-align: baseline;
202}
203.gloss-link-external-icon {
204 display: inline-block;
205 vertical-align: middle;
206 width: calc(16em / var(--font-size-no-units));
207 height: calc(16em / var(--font-size-no-units));
208 margin-left: 0.25em;
209 background-color: var(--link-color);
210 position: relative;
211}
212
213
214/* Structured content glossary styles */
215.gloss-sc-table-container {
216 display: block;
217}
218.gloss-sc-table {
219 table-layout: auto;
220 border-collapse: collapse;
221}
222.gloss-sc-thead,
223.gloss-sc-tfoot,
224.gloss-sc-th {
225 font-weight: bold;
226 background-color: var(--background-color-dark1);
227}
228.gloss-sc-th,
229.gloss-sc-td {
230 border-width: calc(1em / var(--font-size-no-units));
231 border-style: solid;
232 border-color: var(--text-color-light2);
233 padding: 0.25em;
234 vertical-align: top;
235}
236.gloss-sc-ol,
237.gloss-sc-ul {
238 padding-left: var(--list-padding2);
239}
240:root[data-glossary-layout-mode^=compact] .gloss-sc-ul[data-sc-content=glossary] {
241 display: inline;
242 list-style: none;
243 padding-left: 0;
244}
245:root[data-glossary-layout-mode^=compact] .gloss-sc-ul[data-sc-content=glossary] .gloss-sc-li {
246 display: inline;
247}
248:root[data-glossary-layout-mode^=compact] .gloss-sc-ul[data-sc-content=glossary] .gloss-sc-li:not(:first-child)::before {
249 white-space: pre-wrap;
250 content: var(--compact-list-separator);
251 display: inline;
252 color: var(--text-color-light3);
253}
254.gloss-sc-details {
255 padding-left: var(--list-padding1);
256}
257.gloss-sc-summary {
258 list-style-position: outside;
259}