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
/*view-transition-name: root;*/
11
}
12
nav {
14
/*view-transition-name: nav;*/
15
}
16
p {
18
color: var(--text-soft);
19
}
20
iconify-icon {
22
display: inline-block;
23
width: 1em;
24
height: 1em;
25
}
26
:is(#shape-selector, #shape-options) > button > iconify-icon {
28
font-size: 2rem;
29
}
30
#annotation-zone {
32
position: relative;
33
user-select: none;
34
}
35
#annotation-image {
37
user-drag: none;
38
-webkit-user-drag: none;
39
image-rendering: pixelated;
40
}
41
#annotation-zone > svg {
43
z-index: 1;
44
position: absolute;
45
top: 0;
46
left: 0;
47
width: 100%;
48
height: 100%;
49
}
50
.annotation-ruler {
52
z-index: 2;
53
position: absolute;
54
top: 0;
55
left: 0;
56
background: var(--color-accent);
57
display: none;
58
}
59
#annotation-ruler-horizontal, #annotation-ruler-horizontal-secondary {
61
height: 1px;
62
width: 100%;
63
}
64
#annotation-ruler-vertical, #annotation-ruler-vertical-secondary {
66
width: 1px;
67
height: 100%;
68
}
69
.shape {
71
stroke: var(--color-accent);
72
fill: var(--color-accent);
73
fill-opacity: 0.1;
74
stroke-width: 2px;
75
vector-effect: non-scaling-stroke;
76
pointer-events: auto;
77
transition: filter 0.25s cubic-bezier(0.61, 1, 0.88, 1),
78
fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
79
stroke-width 0.25s cubic-bezier(0.61, 1, 0.88, 1);
80
stroke-linecap: square;
81
stroke-linejoin: miter;
82
}
83
.shape-polyline {
85
fill: none;
86
}
87
.shape-point {
89
stroke: var(--color-accent);
90
stroke-width: 2px;
91
fill-opacity: 1;
92
r: 2;
93
transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
94
stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
95
filter 0.25s cubic-bezier(0.61, 1, 0.88, 1);
96
}
97
.shape.selected {
99
fill-opacity: 0.2;
100
stroke-width: 4px;
101
filter: drop-shadow(0 0 2px var(--text-soft));
102
}
103
.shape-point.selected {
105
fill-opacity: 1;
106
r: 6;
107
stroke-width: 6px;
108
}
109
.shape-container, .shape-container-viewonly {
111
pointer-events: none;
112
}
113
#annotation-helper-message {
115
min-height: 2lh;
116
}
117
.shape-container-viewonly > .shape {
119
fill: var(--color-info);
120
stroke: var(--color-info);
121
fill-opacity: 0;
122
stroke-opacity: 0;
123
transition: fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
124
stroke-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1);
125
}
126
.shape-container-viewonly > .shape-polyline {
128
fill: none;
129
}
130
.shape-container-viewonly > .shape-point {
132
stroke: var(--color-info);
133
}
134
.shape-label {
136
font-size: 1.5rem;
137
font-weight: 500;
138
color: var(--color-shape-label-text);
139
pointer-events: none;
140
height: 32px;
141
padding-left: 8px;
142
padding-right: 8px;
143
display: flex;
144
align-items: center;
145
justify-content: center;
146
background: var(--color-shape-label);
147
width: max-content;
148
box-shadow: var(--shadow-button);
149
/* top-left corner is square to point to the shape */
150
border-radius: 0 16px 16px 16px;
151
opacity: 0;
152
transition: opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
153
transform 0.375s cubic-bezier(0.16, 1, 0.3, 1);
154
transform: scale(0);
155
transform-origin: top left;
156
z-index: 3;
157
}
158
/* Only show region parts when checkbox is checked */
160
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-container-viewonly > foreignObject > .shape-label {
161
opacity: 1;
162
transform: scale(1);
163
}
164
#annotation-zone:has(+ x-buttonbox #show-shapes:checked) > .shape-container-viewonly > .shape {
166
fill-opacity: 0.1;
167
stroke-opacity: 1;
168
}
169
/* Disabled for now, until there is more navigation that would benefit from transitions */
171
/*
172
@view-transition {
173
navigation: auto;
174
}
175
@keyframes move-out {
177
from {
178
transform: translateX(0%);
179
}
180
to {
181
transform: translateX(-100%);
182
}
183
}
184
@keyframes move-in {
186
from {
187
transform: translateX(100%);
188
}
189
to {
190
transform: translateX(0%);
191
}
192
}
193
@media (prefers-reduced-motion: no-preference) {
195
::view-transition-old(root),
196
::view-transition-new(root) {
197
animation-duration: 0.25s;
198
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
199
}
200
::view-transition-old(root) {
202
animation-name: move-out;
203
}
204
::view-transition-new(root) {
206
animation-name: move-in;
207
}
208
}
209
*/
210