1@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;500;700;900&display=swap');
2
3html {
4 --text-color: white;
5 --bg-color-1: #000000;
6 --bg-color-2: #ffffff0f;
7 --border-color-1: #ffffff38;
8 --scrollbar-color-1: #ffffff;
9 --scrollbar-color-2: #393939;
10 --invert-state: 0;
11 scrollbar-color: var(--scrollbar-color-1) var(--scrollbar-color-2);
12 scrollbar-width: thin;
13}
14
15
16::-webkit-scrollbar {
17 width: 10px;
18}
19
20::-webkit-scrollbar-track-piece {
21 background-color: var(--scrollbar-color-2);
22}
23
24::-webkit-scrollbar-thumb {
25 background-color: var(--scrollbar-color-1);
26}
27
28
29body {
30 position: relative;
31 margin: 0;
32 font-family: "Source Sans Pro";
33 color: var(--text-color);
34 background: var(--bg-color-1);
35 font-weight: 200;
36 text-shadow: 0px 0px 5px var(--bg-color-1);
37 width: 100vw;
38 height: 100vh;
39}
40
41#container {
42 position: relative;
43 width: 100%;
44 height: 100vh;
45 overflow-y: scroll;
46}
47
48#bottom-statusbar {
49 position: absolute;
50 bottom: 0;
51 width: calc(100% - 32px);
52 display: flex;
53 padding: 16px;
54}
55
56#words {
57 margin-bottom: 32px;
58 border: 1px var(--border-color-1) solid;
59 border-radius: 32px;
60 display: flex;
61 flex-wrap: wrap;
62}
63
64#word-container {
65 position: absolute;
66 left: 100px;
67 top: 100px;
68 padding-bottom: 100px;
69 width: calc(100% - 200px);
70 animation: loadIn 150ms ease;
71}
72
73.word-container {
74 background: var(--bg-color-2);
75 padding: 32px;
76 border-radius: 32px;
77 margin: 32px;
78 animation: loadIn 150ms ease;
79}
80
81.word {
82 font-size: 128px;
83}
84
85#senses {
86 margin-top: 32px;
87 border: 1px var(--border-color-1) solid;
88 border-radius: 32px;
89 display: flex;
90 flex-wrap: wrap;
91 animation: loadIn 150ms ease;
92}
93
94.sense-container {
95 background: var(--bg-color-2);
96 padding: 32px;
97 border-radius: 32px;
98 margin: 32px;
99 animation: loadIn 150ms ease;
100}
101
102.sense-types {
103 font-size: 32px;
104}
105
106#current-date {
107 margin: auto;
108}
109
110#settings-container {
111 position: absolute;
112 top: 50%;
113 transform: translateY(-50%) translateX(-50%);
114 left: 50%;
115 width: 400px;
116 height: 400px;
117 text-align: center;
118 background: var(--bg-color-2);
119 backdrop-filter: blur(16px);
120 padding: 32px;
121 border-radius: 32px;
122 animation: loadInSettings 150ms ease;
123}
124
125#settings-disclaimer-label {
126 margin-top: 32px;
127}
128
129#home-link {
130 position: absolute;
131 top: 40px;
132 right: 40px;
133 animation: loadIn 150ms ease;
134}
135
136#home-link-a {
137 color: var(--text-color);
138 text-decoration: none;
139 font-size: 32px;
140 font-weight: 400;
141}
142
143#settings-link {
144 position: absolute;
145 top: 40px;
146 right: 92px;
147 /* 40+32+20 */
148 animation: loadIn 150ms ease;
149}
150
151#settings-link-a {
152 color: var(--text-color);
153 text-decoration: none;
154 font-size: 32px;
155 font-weight: 400;
156}
157
158#theme-toggle-link {
159 position: absolute;
160 top: 40px;
161 right: 144px;
162 /* 20+32+40+32+20 */
163 animation: loadIn 150ms ease;
164}
165
166#theme-toggle-link-a {
167 color: var(--text-color);
168 text-decoration: none;
169 font-size: 32px;
170 font-weight: 400;
171}
172
173#previous-link {
174 position: absolute;
175 top: 40px;
176 left: 40px;
177 animation: loadIn 150ms ease;
178}
179
180#previous-link-a {
181 color: var(--text-color);
182 text-decoration: none;
183 font-size: 32px;
184 font-weight: 400;
185}
186
187#next-link {
188 position: absolute;
189 top: 40px;
190 left: 92px;
191 animation: loadIn 150ms ease;
192}
193
194#next-link-a {
195 color: var(--text-color);
196 text-decoration: none;
197 font-size: 32px;
198 font-weight: 400;
199}
200
201.icon {
202 filter: invert(var(--invert-state));
203 width: 32px;
204 height: 32px;
205}
206
207@media (pointer:coarse) {
208 #word-container {
209 position: absolute;
210 left: 25px;
211 top: 100px;
212 width: calc(100% - 50px);
213 padding-bottom: 64px;
214 }
215 .word-container {
216 margin:16px;
217 }
218 .sense-container {
219 margin:16px;
220 }
221 .word {
222 font-size: 64px;
223 }
224}
225
226@keyframes loadIn {
227 0% {
228 opacity: 0;
229 transform: translateY(10px);
230 }
231
232 100% {
233 opacity: 1;
234 transform: translateY(0px);
235 }
236
237}
238
239@keyframes loadInSettings {
240 0% {
241 opacity: 0;
242 transform: translateY(calc(-50% + 10px)) translateX(-50%);
243 }
244
245 100% {
246 opacity: 1;
247 transform: translateY(-50%) translateX(-50%);
248 }
249
250}