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
--1-star: #FF8079;
14
--2-star: #FF8A65;
15
--3-star: #FFAC1B;
16
--4-star: #FBC02D;
17
--5-star: #CDDC39;
18
/*view-transition-name: root;*/
19
}
20
nav {
22
/*view-transition-name: nav;*/
23
}
24
p {
26
color: var(--text-soft);
27
}
28
iconify-icon {
30
/* Material design icons are done in 24px, so we scale them to 1.5 as the default font size is 16px */
31
display: inline-block;
32
width: 1em;
33
height: 1em;
34
font-size: 1.5em;
35
}
36
:is(#shape-selector, #shape-options) > button > iconify-icon {
38
font-size: 2rem;
39
}
40
#annotation-zone, .annotation-zone {
42
position: relative;
43
user-select: none;
44
overflow: hidden;
45
}
46
#annotation-image, .annotation-image {
48
user-drag: none;
49
-webkit-user-drag: none;
50
image-rendering: pixelated;
51
}
52
#annotation-zone > svg, .annotation-zone > svg {
54
z-index: 1;
55
position: absolute;
56
top: 0;
57
left: 0;
58
width: 100%;
59
height: 100%;
60
}
61
.annotation-ruler {
63
z-index: 2;
64
position: absolute;
65
top: 0;
66
left: 0;
67
background: var(--color-accent);
68
display: none;
69
}
70
#annotation-ruler-horizontal, #annotation-ruler-horizontal-secondary {
72
height: 1px;
73
width: 100%;
74
}
75
#annotation-ruler-vertical, #annotation-ruler-vertical-secondary {
77
width: 1px;
78
height: 100%;
79
}
80
.shape {
82
stroke: var(--color-accent);
83
fill: var(--color-accent);
84
fill-opacity: 0.1;
85
stroke-width: 2px;
86
vector-effect: non-scaling-stroke;
87
pointer-events: auto;
88
transition: filter 0.25s cubic-bezier(0.61, 1, 0.88, 1),
89
fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
90
stroke-width 0.25s cubic-bezier(0.61, 1, 0.88, 1);
91
stroke-linecap: square;
92
stroke-linejoin: miter;
93
}
94
.shape-polyline {
96
fill: none;
97
}
98
.shape-point {
100
stroke: var(--color-accent);
101
stroke-width: 2px;
102
fill-opacity: 1;
103
r: 2;
104
transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
105
stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
106
filter 0.25s cubic-bezier(0.61, 1, 0.88, 1);
107
}
108
.shape.selected {
110
fill-opacity: 0.2;
111
stroke-width: 4px;
112
filter: drop-shadow(0 0 2px var(--text-soft));
113
}
114
.shape-point.selected {
116
fill-opacity: 1;
117
r: 6;
118
stroke-width: 6px;
119
}
120
.shape-container, .shape-container-viewonly {
122
pointer-events: none;
123
}
124
#annotation-helper-message {
126
min-height: 2lh;
127
}
128
.shape-container-viewonly > .shape, .thumbnail-list > li .shape {
130
fill: var(--color-info);
131
stroke: var(--color-info);
132
fill-opacity: 0;
133
stroke-opacity: 0;
134
transition: fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
135
stroke-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1);
136
}
137
.shape-container-viewonly > .shape-polyline, .thumbnail-list > li .shape-polyline {
139
fill: none;
140
}
141
.shape-container-viewonly > .shape-point, .thumbnail-list > li .shape-point {
143
stroke: var(--color-info);
144
transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
145
stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
146
filter 0.25s cubic-bezier(0.61, 1, 0.88, 1);
147
}
148
.shape-label {
150
position: absolute;
151
font-weight: 500;
152
color: var(--color-shape-label-text) !important;
153
pointer-events: auto;
154
height: 28px;
155
padding-left: 8px;
156
padding-right: 8px;
157
display: flex;
158
align-items: center;
159
justify-content: center;
160
background: var(--color-shape-label);
161
width: max-content;
162
box-shadow: var(--shadow-button);
163
/* top-left corner is square to point to the shape */
164
border-radius: 0 16px 16px 16px;
165
opacity: 0;
166
transition: opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
167
transform 0.375s cubic-bezier(0.16, 1, 0.3, 1);
168
transform: scale(0);
169
transform-origin: top left;
170
z-index: 3;
171
text-decoration: none;
172
}
173
.shape-label:hover {
175
text-decoration: underline;
176
}
177
/* Only show region parts when checkbox is checked */
179
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-label {
180
opacity: 1;
181
transform: scale(1);
182
}
183
/* Hide points with a bubble */
185
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-container-viewonly > .shape-point:has(+ foreignObject) {
186
r: 0;
187
border-width: 0;
188
}
189
#annotation-zone:has(+ x-buttonbox #show-shapes:checked) > .shape-container-viewonly > .shape {
191
fill-opacity: 0.1;
192
stroke-opacity: 1;
193
}
194
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) .shape {
196
fill-opacity: 0.2;
197
stroke-opacity: 1;
198
}
199
/* Disabled for now, until there is more navigation that would benefit from transitions */
201
/*
202
@view-transition {
203
navigation: auto;
204
}
205
@keyframes move-out {
207
from {
208
transform: translateX(0%);
209
}
210
to {
211
transform: translateX(-100%);
212
}
213
}
214
@keyframes move-in {
216
from {
217
transform: translateX(100%);
218
}
219
to {
220
transform: translateX(0%);
221
}
222
}
223
@media (prefers-reduced-motion: no-preference) {
225
::view-transition-old(root),
226
::view-transition-new(root) {
227
animation-duration: 0.25s;
228
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
229
}
230
::view-transition-old(root) {
232
animation-name: move-out;
233
}
234
::view-transition-new(root) {
236
animation-name: move-in;
237
}
238
}
239
*/
240
.multi-select, .single-select {
242
display: flex;
243
flex-flow: column nowrap;
244
overflow-y: scroll;
245
box-shadow: var(--shadow-card-inset);
246
padding: 16px;
247
gap: 8px;
248
}
249
.licence-selection, .image-type-selection {
251
display: flex;
252
flex-flow: column nowrap;
253
}
254
.licence-selection-info, .image-type-selection-info {
256
margin-left: calc(var(--size-checkbox) + var(--gap-label-checkbox));
257
/* Align with the checkbox above */
258
}
259
.licence-selection-info > p, .image-type-selection-info > p {
261
font-weight: 300;
262
}
263
.licence-logo {
265
width: 128px;
266
float: right;
267
margin-left: 1ch;
268
}
269
.licence-title, .image-type-title {
271
display: flex;
272
justify-content: space-between;
273
width: 100%;
274
}
275
.licence-title > .licence-name, .image-type-title > .image-type-name {
277
font: var(--h5-font);
278
font-weight: 400;
279
}
280
.icon-explainer {
282
display: grid;
283
gap: 4px 8px;
284
grid-template-columns: auto 1fr;
285
align-items: center;
286
}
287
.icon-explainer *:nth-child(even) {
289
font-weight: 300;
290
}
291
.required-asterisk::after {
293
content: "*";
294
color: var(--color-error);
295
}
296
small {
298
/* BIG :D */
299
font-size: 1em;
300
}
301
#pagination {
303
display: flex;
304
gap: 1em;
305
justify-content: center;
306
align-items: center;
307
font-size: 1.5em;
308
font-weight: 600;
309
flex: 1 0 auto;
310
}
311
#pagination > a {
313
text-decoration: none;
314
color: var(--color-accent-1);
315
}
316
#pagination-options > form {
318
align-items: center;
319
display: flex;
320
gap: 1em;
321
}
322
#pagination-options {
324
justify-content: center;
325
align-items: center;
326
gap: 1em;
327
width: 100%;
328
}
329
.thumbnail-list {
331
list-style: none;
332
margin: 0 !important;
333
display: grid;
334
grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
335
gap: 16px;
336
}
337
.thumbnail-list > li {
339
transition: transform 0.25s cubic-bezier(0.61, 1, 0.88, 1),
340
box-shadow 0.25s cubic-bezier(0.61, 1, 0.88, 1);
341
box-shadow: var(--shadow-card);
342
background: var(--color-card);
343
}
344
.thumbnail-list > li > a, .thumbnail-list > li {
346
display: flex;
347
flex-direction: column;
348
justify-content: space-between;
349
height: 100%;
350
}
351
.thumbnail-list > li > .list-more {
353
display: flex;
354
justify-content: space-between;
355
align-items: center;
356
padding: 8px;
357
}
358
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) {
360
position: relative;
361
transform: scale(1.5);
362
z-index: 1;
363
box-shadow: var(--shadow-card), 0 4px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
364
}
365
.thumbnail-list > li .list-detail {
367
padding: 8px;
368
display: block;
369
}
370
a.button {
372
text-decoration: none;
373
}
374
dt {
376
font-weight: 600;
377
}
378
dd {
380
margin-left: 40px;
381
}
382
#mobile-navbar {
384
display: none;
385
}
386
@media screen and (max-width: 576px) {
388
#mobile-navbar {
389
display: flex;
390
}
391
#desktop-navbar {
392
display: none;
393
}
394
}
395
#hamburger > nav {
397
display: flex;
398
flex-direction: column;
399
gap: 1em;
400
padding: var(--padding-card);
401
padding-top: var(--padding-card-top);
402
box-shadow: var(--shadow-card);
403
background: var(--color-card);
404
justify-content: space-between;
405
width: clamp(240px, calc(100vw - 56px), 448px);
406
}
407
#hamburger > nav > ul {
409
display: flex;
410
flex-direction: column;
411
gap: 1em;
412
margin: 0;
413
}
414
#hamburger > nav > ul > li {
416
display: flex;
417
gap: var(--gap-label-checkbox);
418
align-items: center;
419
margin: 0;
420
}
421
#hamburger > nav > ul > li > a {
423
text-decoration: none;
424
color: var(--color-card-text);
425
}
426
.star-rating-container {
428
display: flex;
429
flex-direction: row-reverse;
430
font-size: 1.25em;
431
align-items: center;
432
justify-content: flex-end; /* In this case, it means LEFT, not right, because of the row-reverse */
433
}
434
.star-rating-container > input {
436
width: 0 !important;
437
height: 0 !important;
438
visibility: hidden;
439
}
440
.star-rating-container > label {
442
cursor: pointer;
443
color: var(--text-softest);
444
transition: color 0.25s cubic-bezier(0.37, 0, 0.63, 1),
445
filter 0.25s cubic-bezier(0.37, 0, 0.63, 1);
446
}
447
.star-rating-container > label:hover,
449
.star-rating-container > label:hover ~ label {
450
color: var(--color-star);
451
filter: drop-shadow(0 0 3px #00000040);
452
}
453
.star-rating-container > input:checked ~ label {
455
color: var(--color-star);
456
}
457
.visually-hidden {
459
position: absolute;
460
width: 1px;
461
height: 1px;
462
box-sizing: content-box;
463
margin: -1px;
464
overflow: hidden;
465
clip-path: inset(50%);
466
border: 0;
467
}
468
.rating-list {
470
display: grid;
471
grid-auto-columns: 1fr;
472
gap: 0.5rem;
473
grid-template-columns: auto;
474
list-style: none;
475
margin: 0 !important;
476
padding: 0;
477
min-width: 50%;
478
}
479
.rating-list > li {
481
grid-column-start: 1;
482
height: 28px;
483
padding: 4px 8px;
484
display: flex;
485
align-items: center;
486
justify-content: space-between;
487
gap: 0.5rch;
488
border-radius: 0 4px 4px 0;
489
margin: 0;
490
}
491
.rating-bar {
493
display: flex;
494
align-items: center;
495
justify-content: flex-start;
496
gap: 0.5rch;
497
font-size: 1.25em;
498
width: 100%;
499
}
500
.rating-bar > .rating-bar-segment {
502
position: relative;
503
width: 1em;
504
height: 1em;
505
clip-path: url(#star-clip);
506
background: var(--text-softest);
507
}
508
.rating-bar > .rating-bar-segment > .rating-bar-filling {
510
background: var(--color-star);
511
height: 100%;
512
position: absolute;
513
top: 0;
514
left: 0;
515
}
516