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
--color-shape-label: #0097A7; --color-shape-label-text: #ffffff;
10
--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);
11
/*view-transition-name: root;*/
12
}
13
nav {
15
/*view-transition-name: nav;*/
16
}
17
p {
19
color: var(--text-soft);
20
}
21
iconify-icon {
23
display: inline-block;
24
width: 1em;
25
height: 1em;
26
}
27
:is(#shape-selector, #shape-options) > button > iconify-icon {
29
font-size: 2rem;
30
}
31
#annotation-zone, .annotation-zone {
33
position: relative;
34
user-select: none;
35
}
36
#annotation-image, .annotation-image {
38
user-drag: none;
39
-webkit-user-drag: none;
40
image-rendering: pixelated;
41
}
42
#annotation-zone > svg, .annotation-zone > svg {
44
z-index: 1;
45
position: absolute;
46
top: 0;
47
left: 0;
48
width: 100%;
49
height: 100%;
50
}
51
.annotation-ruler {
53
z-index: 2;
54
position: absolute;
55
top: 0;
56
left: 0;
57
background: var(--color-accent);
58
display: none;
59
}
60
#annotation-ruler-horizontal, #annotation-ruler-horizontal-secondary {
62
height: 1px;
63
width: 100%;
64
}
65
#annotation-ruler-vertical, #annotation-ruler-vertical-secondary {
67
width: 1px;
68
height: 100%;
69
}
70
.shape {
72
stroke: var(--color-accent);
73
fill: var(--color-accent);
74
fill-opacity: 0.1;
75
stroke-width: 2px;
76
vector-effect: non-scaling-stroke;
77
pointer-events: auto;
78
transition: filter 0.25s cubic-bezier(0.61, 1, 0.88, 1),
79
fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
80
stroke-width 0.25s cubic-bezier(0.61, 1, 0.88, 1);
81
stroke-linecap: square;
82
stroke-linejoin: miter;
83
}
84
.shape-polyline {
86
fill: none;
87
}
88
.shape-point {
90
stroke: var(--color-accent);
91
stroke-width: 2px;
92
fill-opacity: 1;
93
r: 2;
94
transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
95
stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
96
filter 0.25s cubic-bezier(0.61, 1, 0.88, 1);
97
}
98
.shape.selected {
100
fill-opacity: 0.2;
101
stroke-width: 4px;
102
filter: drop-shadow(0 0 2px var(--text-soft));
103
}
104
.shape-point.selected {
106
fill-opacity: 1;
107
r: 6;
108
stroke-width: 6px;
109
}
110
.shape-container, .shape-container-viewonly {
112
pointer-events: none;
113
}
114
#annotation-helper-message {
116
min-height: 2lh;
117
}
118
.shape-container-viewonly > .shape, .thumbnail-list > li .shape {
120
fill: var(--color-info);
121
stroke: var(--color-info);
122
fill-opacity: 0;
123
stroke-opacity: 0;
124
transition: fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
125
stroke-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1);
126
}
127
.shape-container-viewonly > .shape-polyline, .thumbnail-list > li .shape-polyline {
129
fill: none;
130
}
131
.shape-container-viewonly > .shape-point, .thumbnail-list > li .shape-point {
133
stroke: var(--color-info);
134
transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
135
stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
136
filter 0.25s cubic-bezier(0.61, 1, 0.88, 1);
137
}
138
.shape-label {
140
position: absolute;
141
font-weight: 500;
142
color: var(--color-shape-label-text) !important;
143
pointer-events: auto;
144
height: 28px;
145
padding-left: 8px;
146
padding-right: 8px;
147
display: flex;
148
align-items: center;
149
justify-content: center;
150
background: var(--color-shape-label);
151
width: max-content;
152
box-shadow: var(--shadow-button);
153
/* top-left corner is square to point to the shape */
154
border-radius: 0 16px 16px 16px;
155
opacity: 0;
156
transition: opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
157
transform 0.375s cubic-bezier(0.16, 1, 0.3, 1);
158
transform: scale(0);
159
transform-origin: top left;
160
z-index: 3;
161
text-decoration: none;
162
}
163
.shape-label:hover {
165
text-decoration: underline;
166
}
167
/* Only show region parts when checkbox is checked */
169
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-label {
170
opacity: 1;
171
transform: scale(1);
172
}
173
/* Hide points with a bubble */
175
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-container-viewonly > .shape-point:has(+ foreignObject) {
176
r: 0;
177
border-width: 0;
178
}
179
#annotation-zone:has(+ x-buttonbox #show-shapes:checked) > .shape-container-viewonly > .shape {
181
fill-opacity: 0.1;
182
stroke-opacity: 1;
183
}
184
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) .shape {
186
fill-opacity: 0.2;
187
stroke-opacity: 1;
188
}
189
/* Disabled for now, until there is more navigation that would benefit from transitions */
191
/*
192
@view-transition {
193
navigation: auto;
194
}
195
@keyframes move-out {
197
from {
198
transform: translateX(0%);
199
}
200
to {
201
transform: translateX(-100%);
202
}
203
}
204
@keyframes move-in {
206
from {
207
transform: translateX(100%);
208
}
209
to {
210
transform: translateX(0%);
211
}
212
}
213
@media (prefers-reduced-motion: no-preference) {
215
::view-transition-old(root),
216
::view-transition-new(root) {
217
animation-duration: 0.25s;
218
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
219
}
220
::view-transition-old(root) {
222
animation-name: move-out;
223
}
224
::view-transition-new(root) {
226
animation-name: move-in;
227
}
228
}
229
*/
230
.multi-select, .single-select {
232
display: flex;
233
flex-flow: column nowrap;
234
overflow-y: scroll;
235
box-shadow: var(--shadow-card-inset);
236
padding: 16px;
237
gap: 8px;
238
}
239
.licence-selection, .image-type-selection {
241
display: flex;
242
flex-flow: column nowrap;
243
}
244
.licence-selection-info, .image-type-selection-info {
246
margin-left: calc(var(--size-checkbox) + var(--gap-label-checkbox));
247
/* Align with the checkbox above */
248
}
249
.licence-selection-info > p, .image-type-selection-info > p {
251
font-weight: 300;
252
}
253
.licence-logo {
255
width: 128px;
256
float: right;
257
margin-left: 1ch;
258
}
259
.licence-title, .image-type-title {
261
display: flex;
262
justify-content: space-between;
263
width: 100%;
264
}
265
.licence-title > .licence-name, .image-type-title > .image-type-name {
267
font: var(--h5-font);
268
font-weight: 400;
269
}
270
.icon-explainer {
272
display: grid;
273
gap: 4px 8px;
274
grid-template-columns: auto 1fr;
275
align-items: center;
276
}
277
.icon-explainer *:nth-child(even) {
279
font-weight: 300;
280
}
281
.required-asterisk::after {
283
content: "*";
284
color: var(--color-error);
285
}
286
small {
288
/* BIG :D */
289
font-size: 1em;
290
}
291
#pagination {
293
display: flex;
294
gap: 1em;
295
justify-content: center;
296
align-items: center;
297
font-size: 1.5em;
298
font-weight: 600;
299
flex: 1 0 auto;
300
}
301
#pagination > a {
303
text-decoration: none;
304
color: var(--color-accent-1);
305
}
306
#pagination-options > form {
308
align-items: center;
309
display: flex;
310
gap: 1em;
311
}
312
#pagination-options {
314
justify-content: center;
315
align-items: center;
316
gap: 1em;
317
width: 100%;
318
}
319
.thumbnail-list {
321
list-style: none;
322
margin: 0 !important;
323
display: grid;
324
grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
325
gap: 16px;
326
}
327
.thumbnail-list > li {
329
transition: transform 0.25s cubic-bezier(0.61, 1, 0.88, 1),
330
box-shadow 0.25s cubic-bezier(0.61, 1, 0.88, 1);
331
box-shadow: var(--shadow-card);
332
background: var(--color-card);
333
}
334
.thumbnail-list > li > a {
336
display: flex;
337
flex-direction: column;
338
justify-content: space-between;
339
height: 100%;
340
}
341
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) {
343
position: relative;
344
transform: scale(1.5);
345
z-index: 1;
346
box-shadow: var(--shadow-card), 0 4px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
347
}
348
.thumbnail-list > li .list-detail {
350
padding: 8px;
351
display: block;
352
}
353