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:root {
20 --font-size-no-units: 14;
21 --font-size: calc(1px * var(--font-size-no-units));
22
23 --line-height-no-units: 20;
24 --line-height: calc(var(--line-height-no-units) / var(--font-size-no-units));
25
26 --animation-duration: 0s;
27
28 --example-text-color: #333333;
29 --background-color: rgba(0, 0, 0, 0);
30}
31:root[data-loaded=true] {
32 --animation-duration: 0.25s;
33}
34
35:root[data-theme=dark] {
36 --example-text-color: #d4d4d4;
37 --background-color: rgba(0, 0, 0, 0);
38}
39
40
41html {
42 background-color: var(--background-color);
43}
44html.dark {
45 background-color: var(--background-color);
46}
47html,
48body {
49 margin: 0;
50 padding: 0;
51 border: 0;
52 overflow: hidden;
53 width: 100%;
54 height: 100%;
55 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
56 font-size: var(--font-size);
57 line-height: var(--line-height);
58}
59
60.content {
61 display: flex;
62 min-width: 100%;
63 min-height: 100%;
64 box-sizing: border-box;
65 padding: 1em;
66 flex-flow: column nowrap;
67 align-items: center;
68 justify-content: center;
69}
70.content-body {
71 max-width: 100%;
72 width: 400px;
73}
74.top-options {
75 max-width: 100%;
76 display: flex;
77 flex-flow: row nowrap;
78 align-items: center;
79}
80.top-options-left {
81 flex: 1 1 auto;
82}
83.top-options-right {
84 flex: 0 0 auto;
85}
86
87.example-text-container {
88 position: relative;
89}
90.example-text {
91 display: block;
92 width: 100%;
93 font-size: 24px;
94 line-height: 1.25em;
95 height: 1.25em;
96 box-sizing: border-box;
97 border: 1px solid rgba(221, 221, 221, 0);
98 margin: 0;
99 padding: 0;
100 outline: none;
101 color: var(--example-text-color);
102 background-color: transparent;
103 white-space: pre;
104 transition: background-color var(--animation-duration) linear 0s, border-color var(--animation-duration) linear 0s;
105}
106.example-text:hover,
107.example-text-input {
108 border-color: #dddddd;
109}
110.example-text[hidden] {
111 display: none;
112}
113.example-text-input {
114 position: absolute;
115 left: 0;
116 top: 0;
117 right: 0;
118 bottom: 0;
119}
120.example-text-input:not([hidden])+.example-text {
121 visibility: hidden;
122}
123
124.popup-placeholder {
125 display: flex;
126 width: 100%;
127 height: 250px;
128 padding-top: 10px;
129 border: 1px solid rgba(0, 0, 0, 0);
130 flex-flow: column nowrap;
131 justify-content: center;
132}
133.placeholder-info {
134 flex: 0 1 auto;
135 visibility: hidden;
136 opacity: 0;
137 transition: opacity var(--animation-duration) linear 0s, visibility 0s linear var(--animation-duration);
138}
139.placeholder-info.placeholder-info-visible {
140 color: var(--example-text-color);
141 visibility: visible;
142 opacity: 1;
143 transition: opacity var(--animation-duration) linear 0s, visibility 0s linear 0s;
144}
145
146.theme-button {
147 display: inline-block;
148 margin-left: 0.5em;
149 text-decoration: none;
150 cursor: pointer;
151 white-space: nowrap;
152 line-height: 0;
153}
154.theme-button>input {
155 vertical-align: middle;
156 margin: 0 0.25em 0 0;
157 padding: 0;
158}
159.theme-button>span {
160 vertical-align: middle;
161}
162.theme-button:hover>span {
163 text-decoration: underline;
164}