Web platform for sharing free data for ML and research

By using this site, you agree to have cookies stored on your device, strictly for functional purposes, such as storing your session and preferences.

Dismiss

 style.css

View raw Download
text/plain • 5.76 kiB
ASCII text
        
            
1
@import "/static/efficient-ui/MASTER.css";
2
3
: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
14
nav {
15
/*view-transition-name: nav;*/
16
}
17
18
p {
19
color: var(--text-soft);
20
}
21
22
iconify-icon {
23
display: inline-block;
24
width: 1em;
25
height: 1em;
26
}
27
28
:is(#shape-selector, #shape-options) > button > iconify-icon {
29
font-size: 2rem;
30
}
31
32
#annotation-zone {
33
position: relative;
34
user-select: none;
35
}
36
37
#annotation-image {
38
user-drag: none;
39
-webkit-user-drag: none;
40
image-rendering: pixelated;
41
}
42
43
#annotation-zone > svg {
44
z-index: 1;
45
position: absolute;
46
top: 0;
47
left: 0;
48
width: 100%;
49
height: 100%;
50
}
51
52
.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
61
#annotation-ruler-horizontal, #annotation-ruler-horizontal-secondary {
62
height: 1px;
63
width: 100%;
64
}
65
66
#annotation-ruler-vertical, #annotation-ruler-vertical-secondary {
67
width: 1px;
68
height: 100%;
69
}
70
71
.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
85
.shape-polyline {
86
fill: none;
87
}
88
89
.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
99
.shape.selected {
100
fill-opacity: 0.2;
101
stroke-width: 4px;
102
filter: drop-shadow(0 0 2px var(--text-soft));
103
}
104
105
.shape-point.selected {
106
fill-opacity: 1;
107
r: 6;
108
stroke-width: 6px;
109
}
110
111
.shape-container, .shape-container-viewonly {
112
pointer-events: none;
113
}
114
115
#annotation-helper-message {
116
min-height: 2lh;
117
}
118
119
.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
128
.shape-container-viewonly > .shape-polyline {
129
fill: none;
130
}
131
132
.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
139
.shape-label {
140
font-size: 1.5rem;
141
font-weight: 500;
142
color: var(--color-shape-label-text);
143
pointer-events: none;
144
height: 32px;
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
163
/* Only show region parts when checkbox is checked */
164
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-container-viewonly > foreignObject > .shape-label {
165
opacity: 1;
166
transform: scale(1);
167
}
168
169
/* 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
175
#annotation-zone:has(+ x-buttonbox #show-shapes:checked) > .shape-container-viewonly > .shape {
176
fill-opacity: 0.1;
177
stroke-opacity: 1;
178
}
179
180
/* Disabled for now, until there is more navigation that would benefit from transitions */
181
/*
182
@view-transition {
183
navigation: auto;
184
}
185
186
@keyframes move-out {
187
from {
188
transform: translateX(0%);
189
}
190
to {
191
transform: translateX(-100%);
192
}
193
}
194
195
@keyframes move-in {
196
from {
197
transform: translateX(100%);
198
}
199
to {
200
transform: translateX(0%);
201
}
202
}
203
204
@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
211
::view-transition-old(root) {
212
animation-name: move-out;
213
}
214
215
::view-transition-new(root) {
216
animation-name: move-in;
217
}
218
}
219
*/
220
221
.multi-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
230
.licence-selection {
231
display: flex;
232
flex-flow: column nowrap;
233
}
234
235
.licence-selection-info {
236
margin-left: calc(var(--size-checkbox) + var(--gap-label-checkbox));
237
/* Align with the checkbox above */
238
}
239
240
.licence-selection-info > p {
241
font-weight: 300;
242
}
243
244
.licence-logo {
245
width: 128px;
246
float: right;
247
margin-left: 1ch;
248
}
249
250
.licence-title {
251
display: flex;
252
justify-content: space-between;
253
width: 100%;
254
}
255
256
.licence-title > .licence-name {
257
font: var(--h5-font);
258
font-weight: 400;
259
}
260
261
.icon-explainer {
262
display: grid;
263
gap: 4px 8px;
264
grid-template-columns: auto 1fr;
265
align-items: center;
266
}
267