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 • 3.62 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
}
11
12
p {
13
color: var(--text-soft);
14
}
15
16
iconify-icon {
17
display: inline-block;
18
width: 1em;
19
height: 1em;
20
}
21
22
:is(#shape-selector, #shape-options) > button > iconify-icon {
23
font-size: 2rem;
24
}
25
26
#annotation-zone {
27
position: relative;
28
user-select: none;
29
}
30
31
#annotation-image {
32
user-drag: none;
33
-webkit-user-drag: none;
34
image-rendering: pixelated;
35
}
36
37
#annotation-zone > svg {
38
z-index: 1;
39
position: absolute;
40
top: 0;
41
left: 0;
42
width: 100%;
43
height: 100%;
44
}
45
46
.annotation-ruler {
47
z-index: 2;
48
position: absolute;
49
top: 0;
50
left: 0;
51
background: var(--color-accent);
52
display: none;
53
}
54
55
#annotation-ruler-horizontal, #annotation-ruler-horizontal-secondary {
56
height: 1px;
57
width: 100%;
58
}
59
60
#annotation-ruler-vertical, #annotation-ruler-vertical-secondary {
61
width: 1px;
62
height: 100%;
63
}
64
65
.shape {
66
stroke: var(--color-accent);
67
fill: var(--color-accent);
68
fill-opacity: 0.1;
69
stroke-width: 2px;
70
vector-effect: non-scaling-stroke;
71
pointer-events: auto;
72
transition: filter 0.25s cubic-bezier(0.61, 1, 0.88, 1),
73
fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
74
stroke-width 0.25s cubic-bezier(0.61, 1, 0.88, 1);
75
stroke-linecap: square;
76
stroke-linejoin: miter;
77
}
78
79
.shape-polyline {
80
fill: none;
81
}
82
83
.shape-point {
84
stroke: var(--color-accent);
85
stroke-width: 2px;
86
fill-opacity: 1;
87
r: 2;
88
transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
89
stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
90
filter 0.25s cubic-bezier(0.61, 1, 0.88, 1);
91
}
92
93
.shape.selected {
94
fill-opacity: 0.2;
95
stroke-width: 4px;
96
filter: drop-shadow(0 0 2px var(--text-soft));
97
}
98
99
.shape-point.selected {
100
fill-opacity: 1;
101
r: 6;
102
stroke-width: 6px;
103
}
104
105
.shape-container, .shape-container-viewonly {
106
pointer-events: none;
107
}
108
109
#annotation-helper-message {
110
min-height: 2lh;
111
}
112
113
.shape-container-viewonly > .shape {
114
fill: var(--color-info);
115
stroke: var(--color-info);
116
fill-opacity: 0;
117
stroke-opacity: 0;
118
transition: fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
119
stroke-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1);
120
}
121
122
.shape-container-viewonly > .shape-polyline {
123
fill: none;
124
}
125
126
.shape-container-viewonly > .shape-point {
127
stroke: var(--color-info);
128
}
129
130
.shape-label {
131
font-size: 1.5rem;
132
font-weight: 500;
133
color: var(--color-shape-label-text);
134
pointer-events: none;
135
height: 32px;
136
padding-left: 8px;
137
padding-right: 8px;
138
display: flex;
139
align-items: center;
140
justify-content: center;
141
background: var(--color-shape-label);
142
width: max-content;
143
box-shadow: var(--shadow-button);
144
/* top-left corner is square to point to the shape */
145
border-radius: 0 16px 16px 16px;
146
opacity: 0;
147
transition: opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
148
transform 0.375s cubic-bezier(0.16, 1, 0.3, 1);
149
transform: scale(0);
150
transform-origin: top left;
151
z-index: 3;
152
}
153
154
/* Only show region parts when checkbox is checked */
155
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-container-viewonly > foreignObject > .shape-label {
156
opacity: 1;
157
transform: scale(1);
158
}
159
160
#annotation-zone:has(+ x-buttonbox #show-shapes:checked) > .shape-container-viewonly > .shape {
161
fill-opacity: 0.1;
162
stroke-opacity: 1;
163
}
164