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 {
33
position: relative;
34
user-select: none;
35
}
36
#annotation-image {
38
user-drag: none;
39
-webkit-user-drag: none;
40
image-rendering: pixelated;
41
}
42
#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 {
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 {
129
fill: none;
130
}
131
.shape-container-viewonly > .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);
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
}
162
/* Only show region parts when checkbox is checked */
164
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-label {
165
opacity: 1;
166
transform: scale(1);
167
}
168
/* Hide points with a bubble */
170
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-container-viewonly > .shape-point:has(+ foreignObject) {
171
r: 0;
172
border-width: 0;
173
}
174
#annotation-zone:has(+ x-buttonbox #show-shapes:checked) > .shape-container-viewonly > .shape {
176
fill-opacity: 0.1;
177
stroke-opacity: 1;
178
}
179
/* Disabled for now, until there is more navigation that would benefit from transitions */
181
/*
182
@view-transition {
183
navigation: auto;
184
}
185
@keyframes move-out {
187
from {
188
transform: translateX(0%);
189
}
190
to {
191
transform: translateX(-100%);
192
}
193
}
194
@keyframes move-in {
196
from {
197
transform: translateX(100%);
198
}
199
to {
200
transform: translateX(0%);
201
}
202
}
203
@media (prefers-reduced-motion: no-preference) {
205
::view-transition-old(root),
206
::view-transition-new(root) {
207
animation-duration: 0.25s;
208
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
209
}
210
::view-transition-old(root) {
212
animation-name: move-out;
213
}
214
::view-transition-new(root) {
216
animation-name: move-in;
217
}
218
}
219
*/
220
.multi-select, .single-select {
222
display: flex;
223
flex-flow: column nowrap;
224
overflow-y: scroll;
225
box-shadow: var(--shadow-card-inset);
226
padding: 16px;
227
gap: 8px;
228
}
229
.licence-selection, .image-type-selection {
231
display: flex;
232
flex-flow: column nowrap;
233
}
234
.licence-selection-info, .image-type-selection-info {
236
margin-left: calc(var(--size-checkbox) + var(--gap-label-checkbox));
237
/* Align with the checkbox above */
238
}
239
.licence-selection-info > p, .image-type-selection-info > p {
241
font-weight: 300;
242
}
243
.licence-logo {
245
width: 128px;
246
float: right;
247
margin-left: 1ch;
248
}
249
.licence-title, .image-type-title {
251
display: flex;
252
justify-content: space-between;
253
width: 100%;
254
}
255
.licence-title > .licence-name, .image-type-title > .image-type-name {
257
font: var(--h5-font);
258
font-weight: 400;
259
}
260
.icon-explainer {
262
display: grid;
263
gap: 4px 8px;
264
grid-template-columns: auto 1fr;
265
align-items: center;
266
}
267
.icon-explainer *:nth-child(even) {
269
font-weight: 300;
270
}
271
.required-asterisk::after {
273
content: "*";
274
color: var(--color-error);
275
}
276
small {
278
/* BIG :D */
279
font-size: 1em;
280
}
281
#pagination {
283
display: flex;
284
gap: 1em;
285
justify-content: center;
286
align-items: center;
287
font-size: 1.5em;
288
font-weight: 600;
289
flex: 1 0 auto;
290
}
291
#pagination > a {
293
text-decoration: none;
294
color: var(--color-accent-1);
295
}
296
#pagination-options > form {
298
align-items: center;
299
display: flex;
300
gap: 1em;
301
}
302
#pagination-options {
304
justify-content: center;
305
align-items: center;
306
gap: 1em;
307
width: 100%;
308
}
309
.thumbnail-list {
311
list-style: none;
312
margin: 0 !important;
313
display: grid;
314
grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
315
gap: 16px;
316
}
317
.thumbnail-list > li {
319
transition: transform 0.25s cubic-bezier(0.61, 1, 0.88, 1),
320
box-shadow 0.25s cubic-bezier(0.61, 1, 0.88, 1);
321
box-shadow: var(--shadow-card);
322
background: var(--color-card);
323
}
324
.thumbnail-list > li:hover {
326
position: relative;
327
transform: scale(1.5);
328
z-index: 1;
329
box-shadow: var(--shadow-card), 0 4px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
330
}
331