ASCII text
1
@import "/static/efficient-ui/MASTER.css";
2
:root {
4
--gap-navbar: 1rem;
5
--width-navbar-button: 0;
6
--text-soft: #000000C0;
7
--text-softer: #0000009A;
8
--text-faint: #00000066;
9
--text-softest: #00000033;
10
--color-star: #FFC107;
11
--color-shape-label: #0097A7; --color-shape-label-text: #ffffff;
12
--shadow-card-inset: inset 0 3px 6px -4px rgba(0, 0, 0, 0.12), inset 0 3px 6px 0 rgba(0, 0, 0, 0.24), inset 0 1px 4px 0 rgba(0, 0, 0, 0.12);
13
/*view-transition-name: root;*/
14
}
15
nav {
17
/*view-transition-name: nav;*/
18
}
19
p {
21
color: var(--text-soft);
22
}
23
iconify-icon {
25
/* Material design icons are done in 24px, so we scale them to 1.5 as the default font size is 16px */
26
display: inline-block;
27
width: 1em;
28
height: 1em;
29
font-size: 1.5em;
30
}
31
:is(#shape-selector, #shape-options) > button > iconify-icon {
33
font-size: 2rem;
34
}
35
#annotation-zone, .annotation-zone {
37
position: relative;
38
user-select: none;
39
}
40
#annotation-image, .annotation-image {
42
user-drag: none;
43
-webkit-user-drag: none;
44
image-rendering: pixelated;
45
}
46
#annotation-zone > svg, .annotation-zone > svg {
48
z-index: 1;
49
position: absolute;
50
top: 0;
51
left: 0;
52
width: 100%;
53
height: 100%;
54
}
55
.annotation-ruler {
57
z-index: 2;
58
position: absolute;
59
top: 0;
60
left: 0;
61
background: var(--color-accent);
62
display: none;
63
}
64
#annotation-ruler-horizontal, #annotation-ruler-horizontal-secondary {
66
height: 1px;
67
width: 100%;
68
}
69
#annotation-ruler-vertical, #annotation-ruler-vertical-secondary {
71
width: 1px;
72
height: 100%;
73
}
74
.shape {
76
stroke: var(--color-accent);
77
fill: var(--color-accent);
78
fill-opacity: 0.1;
79
stroke-width: 2px;
80
vector-effect: non-scaling-stroke;
81
pointer-events: auto;
82
transition: filter 0.25s cubic-bezier(0.61, 1, 0.88, 1),
83
fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
84
stroke-width 0.25s cubic-bezier(0.61, 1, 0.88, 1);
85
stroke-linecap: square;
86
stroke-linejoin: miter;
87
}
88
.shape-polyline {
90
fill: none;
91
}
92
.shape-point {
94
stroke: var(--color-accent);
95
stroke-width: 2px;
96
fill-opacity: 1;
97
r: 2;
98
transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
99
stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
100
filter 0.25s cubic-bezier(0.61, 1, 0.88, 1);
101
}
102
.shape.selected {
104
fill-opacity: 0.2;
105
stroke-width: 4px;
106
filter: drop-shadow(0 0 2px var(--text-soft));
107
}
108
.shape-point.selected {
110
fill-opacity: 1;
111
r: 6;
112
stroke-width: 6px;
113
}
114
.shape-container, .shape-container-viewonly {
116
pointer-events: none;
117
}
118
#annotation-helper-message {
120
min-height: 2lh;
121
}
122
.shape-container-viewonly > .shape, .thumbnail-list > li .shape {
124
fill: var(--color-info);
125
stroke: var(--color-info);
126
fill-opacity: 0;
127
stroke-opacity: 0;
128
transition: fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
129
stroke-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1);
130
}
131
.shape-container-viewonly > .shape-polyline, .thumbnail-list > li .shape-polyline {
133
fill: none;
134
}
135
.shape-container-viewonly > .shape-point, .thumbnail-list > li .shape-point {
137
stroke: var(--color-info);
138
transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
139
stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
140
filter 0.25s cubic-bezier(0.61, 1, 0.88, 1);
141
}
142
.shape-label {
144
position: absolute;
145
font-weight: 500;
146
color: var(--color-shape-label-text) !important;
147
pointer-events: auto;
148
height: 28px;
149
padding-left: 8px;
150
padding-right: 8px;
151
display: flex;
152
align-items: center;
153
justify-content: center;
154
background: var(--color-shape-label);
155
width: max-content;
156
box-shadow: var(--shadow-button);
157
/* top-left corner is square to point to the shape */
158
border-radius: 0 16px 16px 16px;
159
opacity: 0;
160
transition: opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
161
transform 0.375s cubic-bezier(0.16, 1, 0.3, 1);
162
transform: scale(0);
163
transform-origin: top left;
164
z-index: 3;
165
text-decoration: none;
166
}
167
.shape-label:hover {
169
text-decoration: underline;
170
}
171
/* Only show region parts when checkbox is checked */
173
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-label {
174
opacity: 1;
175
transform: scale(1);
176
}
177
/* Hide points with a bubble */
179
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-container-viewonly > .shape-point:has(+ foreignObject) {
180
r: 0;
181
border-width: 0;
182
}
183
#annotation-zone:has(+ x-buttonbox #show-shapes:checked) > .shape-container-viewonly > .shape {
185
fill-opacity: 0.1;
186
stroke-opacity: 1;
187
}
188
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) .shape {
190
fill-opacity: 0.2;
191
stroke-opacity: 1;
192
}
193
/* Disabled for now, until there is more navigation that would benefit from transitions */
195
/*
196
@view-transition {
197
navigation: auto;
198
}
199
@keyframes move-out {
201
from {
202
transform: translateX(0%);
203
}
204
to {
205
transform: translateX(-100%);
206
}
207
}
208
@keyframes move-in {
210
from {
211
transform: translateX(100%);
212
}
213
to {
214
transform: translateX(0%);
215
}
216
}
217
@media (prefers-reduced-motion: no-preference) {
219
::view-transition-old(root),
220
::view-transition-new(root) {
221
animation-duration: 0.25s;
222
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
223
}
224
::view-transition-old(root) {
226
animation-name: move-out;
227
}
228
::view-transition-new(root) {
230
animation-name: move-in;
231
}
232
}
233
*/
234
.multi-select, .single-select {
236
display: flex;
237
flex-flow: column nowrap;
238
overflow-y: scroll;
239
box-shadow: var(--shadow-card-inset);
240
padding: 16px;
241
gap: 8px;
242
}
243
.licence-selection, .image-type-selection {
245
display: flex;
246
flex-flow: column nowrap;
247
}
248
.licence-selection-info, .image-type-selection-info {
250
margin-left: calc(var(--size-checkbox) + var(--gap-label-checkbox));
251
/* Align with the checkbox above */
252
}
253
.licence-selection-info > p, .image-type-selection-info > p {
255
font-weight: 300;
256
}
257
.licence-logo {
259
width: 128px;
260
float: right;
261
margin-left: 1ch;
262
}
263
.licence-title, .image-type-title {
265
display: flex;
266
justify-content: space-between;
267
width: 100%;
268
}
269
.licence-title > .licence-name, .image-type-title > .image-type-name {
271
font: var(--h5-font);
272
font-weight: 400;
273
}
274
.icon-explainer {
276
display: grid;
277
gap: 4px 8px;
278
grid-template-columns: auto 1fr;
279
align-items: center;
280
}
281
.icon-explainer *:nth-child(even) {
283
font-weight: 300;
284
}
285
.required-asterisk::after {
287
content: "*";
288
color: var(--color-error);
289
}
290
small {
292
/* BIG :D */
293
font-size: 1em;
294
}
295
#pagination {
297
display: flex;
298
gap: 1em;
299
justify-content: center;
300
align-items: center;
301
font-size: 1.5em;
302
font-weight: 600;
303
flex: 1 0 auto;
304
}
305
#pagination > a {
307
text-decoration: none;
308
color: var(--color-accent-1);
309
}
310
#pagination-options > form {
312
align-items: center;
313
display: flex;
314
gap: 1em;
315
}
316
#pagination-options {
318
justify-content: center;
319
align-items: center;
320
gap: 1em;
321
width: 100%;
322
}
323
.thumbnail-list {
325
list-style: none;
326
margin: 0 !important;
327
display: grid;
328
grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
329
gap: 16px;
330
}
331
.thumbnail-list > li {
333
transition: transform 0.25s cubic-bezier(0.61, 1, 0.88, 1),
334
box-shadow 0.25s cubic-bezier(0.61, 1, 0.88, 1);
335
box-shadow: var(--shadow-card);
336
background: var(--color-card);
337
}
338
.thumbnail-list > li > a, .thumbnail-list > li {
340
display: flex;
341
flex-direction: column;
342
justify-content: space-between;
343
height: 100%;
344
}
345
.thumbnail-list > li > .list-more {
347
display: flex;
348
justify-content: space-between;
349
align-items: center;
350
padding: 8px;
351
}
352
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) {
354
position: relative;
355
transform: scale(1.5);
356
z-index: 1;
357
box-shadow: var(--shadow-card), 0 4px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
358
}
359
.thumbnail-list > li .list-detail {
361
padding: 8px;
362
display: block;
363
}
364
a.button {
366
text-decoration: none;
367
}
368
dt {
370
font-weight: 600;
371
}
372
dd {
374
margin-left: 40px;
375
}
376
#mobile-navbar {
378
display: none;
379
}
380
@media screen and (max-width: 576px) {
382
#mobile-navbar {
383
display: flex;
384
}
385
#desktop-navbar {
386
display: none;
387
}
388
}
389
#hamburger > nav {
391
display: flex;
392
flex-direction: column;
393
gap: 1em;
394
padding: var(--padding-card);
395
padding-top: var(--padding-card-top);
396
box-shadow: var(--shadow-card);
397
background: var(--color-card);
398
justify-content: space-between;
399
width: clamp(240px, calc(100vw - 56px), 448px);
400
}
401
#hamburger > nav > ul {
403
display: flex;
404
flex-direction: column;
405
gap: 1em;
406
margin: 0;
407
}
408
#hamburger > nav > ul > li {
410
display: flex;
411
gap: var(--gap-label-checkbox);
412
align-items: center;
413
margin: 0;
414
}
415
#hamburger > nav > ul > li > a {
417
text-decoration: none;
418
color: var(--color-card-text);
419
}
420
.star-rating-container {
422
display: flex;
423
flex-direction: row-reverse;
424
gap: 0.5ch;
425
font-size: 1.25em;
426
align-items: center;
427
justify-content: flex-end; /* In this case, it means LEFT, not right, because of the row-reverse */
428
}
429
.star-rating-container > input {
431
width: 0 !important;
432
height: 0 !important;
433
visibility: hidden;
434
}
435
.star-rating-container > label {
437
cursor: pointer;
438
color: var(--text-softest);
439
transition: color 0.25s cubic-bezier(0.37, 0, 0.63, 1),
440
filter 0.25s cubic-bezier(0.37, 0, 0.63, 1);
441
}
442
.star-rating-container > label:hover,
444
.star-rating-container > label:hover ~ label {
445
color: var(--color-star);
446
filter: drop-shadow(0 0 3px #00000040);
447
}
448
.star-rating-container > input:checked ~ label {
450
color: var(--color-star);
451
}
452