js-draw 1.25.0 → 1.27.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (92) hide show
  1. package/LICENSE +1 -1
  2. package/dist/Editor.css +1 -1935
  3. package/dist/bundle.js +478 -4
  4. package/dist/bundledStyles.js +1 -1
  5. package/dist/cjs/Editor.d.ts +0 -2
  6. package/dist/cjs/Editor.js +1 -1
  7. package/dist/cjs/bundle/bundled.js +2 -1
  8. package/dist/cjs/components/AbstractComponent.d.ts +15 -0
  9. package/dist/cjs/components/AbstractComponent.js +16 -0
  10. package/dist/cjs/components/Stroke.d.ts +1 -0
  11. package/dist/cjs/components/Stroke.js +7 -0
  12. package/dist/cjs/image/EditorImage.d.ts +2 -1
  13. package/dist/cjs/image/EditorImage.js +21 -6
  14. package/dist/cjs/toolbar/AbstractToolbar.js +9 -2
  15. package/dist/cjs/toolbar/IconProvider.d.ts +2 -1
  16. package/dist/cjs/toolbar/IconProvider.js +18 -8
  17. package/dist/cjs/toolbar/localization.d.ts +2 -0
  18. package/dist/cjs/toolbar/localization.js +2 -0
  19. package/dist/cjs/toolbar/widgets/BaseWidget.js +6 -1
  20. package/dist/cjs/toolbar/widgets/HandToolWidget.js +3 -3
  21. package/dist/cjs/toolbar/widgets/SelectionToolWidget.d.ts +7 -0
  22. package/dist/cjs/toolbar/widgets/SelectionToolWidget.js +109 -28
  23. package/dist/cjs/toolbar/widgets/components/makeButtonGrid.d.ts +17 -0
  24. package/dist/cjs/toolbar/widgets/components/makeButtonGrid.js +40 -0
  25. package/dist/cjs/tools/SelectionTool/Selection.d.ts +2 -3
  26. package/dist/cjs/tools/SelectionTool/Selection.js +30 -46
  27. package/dist/cjs/tools/SelectionTool/SelectionBuilders/LassoSelectionBuilder.d.ts +17 -0
  28. package/dist/cjs/tools/SelectionTool/SelectionBuilders/LassoSelectionBuilder.js +67 -0
  29. package/dist/cjs/tools/SelectionTool/SelectionBuilders/RectSelectionBuilder.d.ts +13 -0
  30. package/dist/cjs/tools/SelectionTool/SelectionBuilders/RectSelectionBuilder.js +33 -0
  31. package/dist/cjs/tools/SelectionTool/SelectionBuilders/SelectionBuilder.d.ts +15 -0
  32. package/dist/cjs/tools/SelectionTool/SelectionBuilders/SelectionBuilder.js +39 -0
  33. package/dist/cjs/tools/SelectionTool/SelectionMenuShortcut.d.ts +3 -1
  34. package/dist/cjs/tools/SelectionTool/SelectionMenuShortcut.js +13 -4
  35. package/dist/cjs/tools/SelectionTool/SelectionTool.d.ts +10 -2
  36. package/dist/cjs/tools/SelectionTool/SelectionTool.js +68 -55
  37. package/dist/cjs/tools/SelectionTool/types.d.ts +4 -0
  38. package/dist/cjs/tools/SelectionTool/types.js +6 -1
  39. package/dist/cjs/tools/TextTool.js +5 -2
  40. package/dist/cjs/tools/lib.d.ts +1 -1
  41. package/dist/cjs/tools/lib.js +2 -1
  42. package/dist/cjs/util/ReactiveValue.js +2 -6
  43. package/dist/cjs/util/assertions.d.ts +7 -6
  44. package/dist/cjs/util/assertions.js +35 -29
  45. package/dist/cjs/version.js +1 -1
  46. package/dist/mjs/Editor.d.ts +0 -2
  47. package/dist/mjs/Editor.mjs +1 -1
  48. package/dist/mjs/bundle/bundled.mjs +2 -1
  49. package/dist/mjs/components/AbstractComponent.d.ts +15 -0
  50. package/dist/mjs/components/AbstractComponent.mjs +16 -0
  51. package/dist/mjs/components/Stroke.d.ts +1 -0
  52. package/dist/mjs/components/Stroke.mjs +7 -0
  53. package/dist/mjs/image/EditorImage.d.ts +2 -1
  54. package/dist/mjs/image/EditorImage.mjs +21 -6
  55. package/dist/mjs/toolbar/AbstractToolbar.mjs +9 -2
  56. package/dist/mjs/toolbar/IconProvider.d.ts +2 -1
  57. package/dist/mjs/toolbar/IconProvider.mjs +18 -8
  58. package/dist/mjs/toolbar/localization.d.ts +2 -0
  59. package/dist/mjs/toolbar/localization.mjs +2 -0
  60. package/dist/mjs/toolbar/widgets/BaseWidget.mjs +6 -1
  61. package/dist/mjs/toolbar/widgets/HandToolWidget.mjs +3 -3
  62. package/dist/mjs/toolbar/widgets/SelectionToolWidget.d.ts +7 -0
  63. package/dist/mjs/toolbar/widgets/SelectionToolWidget.mjs +109 -28
  64. package/dist/mjs/toolbar/widgets/components/makeButtonGrid.d.ts +17 -0
  65. package/dist/mjs/toolbar/widgets/components/makeButtonGrid.mjs +35 -0
  66. package/dist/mjs/tools/SelectionTool/Selection.d.ts +2 -3
  67. package/dist/mjs/tools/SelectionTool/Selection.mjs +30 -46
  68. package/dist/mjs/tools/SelectionTool/SelectionBuilders/LassoSelectionBuilder.d.ts +17 -0
  69. package/dist/mjs/tools/SelectionTool/SelectionBuilders/LassoSelectionBuilder.mjs +61 -0
  70. package/dist/mjs/tools/SelectionTool/SelectionBuilders/RectSelectionBuilder.d.ts +13 -0
  71. package/dist/mjs/tools/SelectionTool/SelectionBuilders/RectSelectionBuilder.mjs +27 -0
  72. package/dist/mjs/tools/SelectionTool/SelectionBuilders/SelectionBuilder.d.ts +15 -0
  73. package/dist/mjs/tools/SelectionTool/SelectionBuilders/SelectionBuilder.mjs +36 -0
  74. package/dist/mjs/tools/SelectionTool/SelectionMenuShortcut.d.ts +3 -1
  75. package/dist/mjs/tools/SelectionTool/SelectionMenuShortcut.mjs +13 -4
  76. package/dist/mjs/tools/SelectionTool/SelectionTool.d.ts +10 -2
  77. package/dist/mjs/tools/SelectionTool/SelectionTool.mjs +68 -55
  78. package/dist/mjs/tools/SelectionTool/types.d.ts +4 -0
  79. package/dist/mjs/tools/SelectionTool/types.mjs +5 -0
  80. package/dist/mjs/tools/TextTool.mjs +5 -2
  81. package/dist/mjs/tools/lib.d.ts +1 -1
  82. package/dist/mjs/tools/lib.mjs +1 -1
  83. package/dist/mjs/util/ReactiveValue.mjs +2 -6
  84. package/dist/mjs/util/assertions.d.ts +7 -6
  85. package/dist/mjs/util/assertions.mjs +28 -24
  86. package/dist/mjs/version.mjs +1 -1
  87. package/package.json +4 -4
  88. package/src/toolbar/EdgeToolbar.scss +6 -1
  89. package/src/toolbar/widgets/components/components.scss +1 -0
  90. package/src/toolbar/widgets/components/makeButtonGrid.scss +25 -0
  91. package/src/tools/SelectionTool/SelectionTool.scss +12 -1
  92. package/src/tools/util/createMenuOverlay.scss +5 -3
package/dist/Editor.css CHANGED
@@ -1,1935 +1 @@
1
- @charset "UTF-8";
2
- :root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content > div > div {
3
- padding: 5px;
4
- }
5
- :root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content > div {
6
- min-height: 0;
7
- }
8
- :root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content img {
9
- max-width: 100%;
10
- max-height: 100%;
11
- /* Center */
12
- display: block;
13
- margin-left: auto;
14
- margin-right: auto;
15
- }
16
- :root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content .insert-image-image-status-view {
17
- display: flex;
18
- justify-content: space-between;
19
- padding-bottom: 0;
20
- }
21
- :root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content .action-button-row {
22
- margin-top: 4px;
23
- display: flex;
24
- flex-direction: row;
25
- justify-content: flex-end;
26
- padding-bottom: 0;
27
- margin-bottom: 0;
28
- }
29
- :root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content .action-button-row > button {
30
- flex-grow: 1;
31
- text-align: end;
32
- max-width: 50%;
33
- min-width: min(100%, 40px);
34
- }
35
-
36
- .toolbar-overflow-widget-overflow-list {
37
- display: flex;
38
- flex-direction: column;
39
- flex-wrap: wrap;
40
- justify-content: center;
41
- }
42
-
43
- .toolbar-overflow-widget-overflow-list > .toolbar-toolContainer > .toolbar-button {
44
- height: var(--toolbar-button-height);
45
- }
46
-
47
- .toolbar-overflow-widget.horizontal .toolbar-overflow-widget-overflow-list {
48
- flex-direction: row;
49
- }
50
-
51
- .toolbar-overflow-widget.horizontal > .toolbar-dropdown {
52
- max-width: 100%;
53
- left: 15px;
54
- right: 15px;
55
- /*
56
- Override the default transform and margin-left.
57
-
58
- Setting translate to none prevents the dropdown from being shifted off the
59
- screen on window resize by dropdown-repositioning logic.
60
- */
61
- margin-left: 0 !important;
62
- translate: none !important;
63
- padding: 4px;
64
- }
65
-
66
- :root .toolbar--pen-tool-toggle-buttons.toolbar--pen-tool-toggle-buttons {
67
- display: flex;
68
- justify-content: stretch;
69
- padding-top: 0;
70
- padding-bottom: 5px;
71
- direction: ltr;
72
- }
73
- :root .toolbar--pen-tool-toggle-buttons.toolbar--pen-tool-toggle-buttons > * {
74
- flex-grow: 1;
75
- text-align: start;
76
- margin-inline-end: 5px;
77
- }
78
- :root .toolbar--pen-tool-toggle-buttons.toolbar--pen-tool-toggle-buttons > * .icon {
79
- margin: 0;
80
- margin-inline-start: 4px;
81
- margin-inline-end: 10px;
82
- }
83
- :root .toolbar--pen-tool-toggle-buttons.toolbar--pen-tool-toggle-buttons > :nth-child(1) {
84
- direction: ltr;
85
- }
86
- :root .toolbar--pen-tool-toggle-buttons.toolbar--pen-tool-toggle-buttons > :last-child {
87
- direction: rtl;
88
- }
89
-
90
- .toolbar-zoomLevelEditor {
91
- display: flex;
92
- flex-direction: row;
93
- align-items: center;
94
- }
95
-
96
- .toolbar-zoomLevelEditor .zoomDisplay {
97
- flex-grow: 1;
98
- }
99
-
100
- .toolbar-zoomLevelEditor button {
101
- min-width: 48px;
102
- }
103
-
104
- .selection-format-menu.disabled {
105
- opacity: 0.5;
106
- }
107
-
108
- .toolbar-document-properties-widget button.about-button {
109
- width: 100%;
110
- text-align: end;
111
- }
112
- .toolbar-document-properties-widget > * {
113
- --align-items-to-x: 120px;
114
- }
115
- .toolbar-document-properties-widget .js-draw-size-input-row.js-draw-size-input-row {
116
- display: flex;
117
- }
118
- .toolbar-document-properties-widget .js-draw-size-input-row.js-draw-size-input-row.size-input-row--automatic-size {
119
- display: none;
120
- }
121
-
122
- .toolbar-thicknessSliderContainer {
123
- display: flex;
124
- flex-direction: row;
125
- }
126
- .toolbar-thicknessSliderContainer input {
127
- flex-grow: 1;
128
- }
129
-
130
- /* Make color selection buttons fill their containing label */
131
- .toolbar-element .clr-field * {
132
- cursor: pointer;
133
- }
134
- .toolbar-element .clr-field button {
135
- width: 1.2em;
136
- height: 1.2em;
137
- top: 50%;
138
- left: 0;
139
- border-radius: 50%;
140
- margin-left: 0;
141
- margin-right: 0;
142
- }
143
- .toolbar-element .clr-field input {
144
- opacity: 0;
145
- }
146
-
147
- .color-input-container {
148
- display: inline-flex;
149
- flex-direction: row;
150
- }
151
- .color-input-container .coloris_input {
152
- height: calc(100% - 6px);
153
- }
154
- .color-input-container.picker-open .clr-field {
155
- pointer-events: none;
156
- }
157
-
158
- :root .color-input-container > button.pipetteButton {
159
- width: 30px;
160
- height: 30px;
161
- padding: 0;
162
- display: inline-flex;
163
- }
164
-
165
- .color-input-container > .color-input-wrapper {
166
- display: flex;
167
- justify-content: stretch;
168
- }
169
-
170
- .color-input-container .pipetteButton > svg {
171
- width: 100%;
172
- }
173
-
174
- .color-input-container .pipetteButton .pickColorInstructions {
175
- display: none;
176
- font-size: 1em;
177
- position: absolute;
178
- margin-left: 30px;
179
- background-color: var(--background-color-1);
180
- border-radius: 30px;
181
- padding: 4px;
182
- opacity: 0;
183
- transition: 0.2s ease opacity;
184
- }
185
- @media (prefers-reduced-motion: reduce) {
186
- .color-input-container .pipetteButton .pickColorInstructions {
187
- transition: none;
188
- }
189
- }
190
-
191
- .color-input-container .pipetteButton.active {
192
- background-color: var(--selection-background-color);
193
- --icon-color: var(--selection-foreground-color);
194
- }
195
- .color-input-container .pipetteButton.active .pickColorInstructions {
196
- display: block;
197
- opacity: 0.8;
198
- }
199
-
200
- .tool-dropdown-separator {
201
- --border-color: rgba(100, 100, 100, 0.2);
202
- --border-color: color-mix(in srgb, var(--foreground-color-1), rgba(0, 0, 0, 0) 80%);
203
- border-top: 1px solid var(--border-color);
204
- padding-left: 2px;
205
- margin-top: 10px;
206
- margin-bottom: 10px;
207
- }
208
-
209
- .toolbar-element .toolbar--file-input-container {
210
- display: flex;
211
- }
212
- .toolbar-element .toolbar--file-input-container.-loading {
213
- opacity: 0.8;
214
- }
215
- .toolbar-element .toolbar--file-input-container > input.file-input {
216
- opacity: 0;
217
- width: 0;
218
- min-width: 0 !important;
219
- max-width: 0;
220
- height: 0;
221
- overflow: hidden;
222
- padding: 0;
223
- margin: 0;
224
- }
225
- .toolbar-element .toolbar--file-input-container > label {
226
- display: block;
227
- flex-grow: 1;
228
- padding: 0 !important;
229
- padding-bottom: 5px;
230
- --active-border-color: rgba(100, 100, 100, 0.5);
231
- --active-border-color: color-mix(in srgb, var(--foreground-color-1), transparent);
232
- }
233
- .toolbar-element .toolbar--file-input-container > label .cancel-button {
234
- padding-left: 3px;
235
- padding-right: 3px;
236
- }
237
- .toolbar-element .toolbar--file-input-container > label > .toolbar--file-input-description {
238
- background-color: var(--background-color-3);
239
- color: var(--foreground-color-3);
240
- border: 1px dashed var(--active-border-color);
241
- padding: 10px;
242
- margin-top: 10px;
243
- display: flex;
244
- flex-direction: column;
245
- align-items: center;
246
- text-align: center;
247
- --action-color: var(--primary-action-foreground-color);
248
- --icon-color: var(--action-color);
249
- }
250
- .toolbar-element .toolbar--file-input-container > label > .toolbar--file-input-description > span {
251
- white-space: pre-wrap;
252
- }
253
- .toolbar-element .toolbar--file-input-container > label > .toolbar--file-input-description > span > b {
254
- color: var(--action-color);
255
- cursor: pointer;
256
- }
257
- .toolbar-element .toolbar--file-input-container > label > .toolbar--file-input-description > .icon {
258
- width: min(50vw, 42px);
259
- height: min(50vw, 42px);
260
- margin-bottom: 8px;
261
- display: block;
262
- }
263
- .toolbar-element .toolbar--file-input-container > label:active, .toolbar-element .toolbar--file-input-container > label:hover, .toolbar-element .toolbar--file-input-container > label.drag-target {
264
- --active-border-color: var(--foreground-color-1);
265
- }
266
- .toolbar-element .toolbar--file-input-container > label.drag-target > .toolbar--file-input-description {
267
- border-width: 2px;
268
- }
269
-
270
- .toolbar-grid-selector {
271
- position: relative;
272
- }
273
- .toolbar-grid-selector > div {
274
- display: flex;
275
- flex-direction: row;
276
- max-width: 350px;
277
- flex-wrap: wrap;
278
- --button-size: 48px;
279
- }
280
- .toolbar-grid-selector .choice-button {
281
- display: flex;
282
- flex-direction: column-reverse;
283
- box-sizing: border-box;
284
- cursor: pointer;
285
- flex-shrink: 1;
286
- margin: 2px;
287
- }
288
- .toolbar-grid-selector .choice-button.focus-visible {
289
- outline: 2px solid var(--foreground-color-1);
290
- }
291
- .toolbar-grid-selector .choice-button input {
292
- opacity: 0;
293
- height: 0;
294
- }
295
- .toolbar-grid-selector .choice-button label {
296
- display: flex;
297
- flex-direction: column;
298
- box-sizing: border-box;
299
- width: var(--button-size);
300
- height: var(--button-size);
301
- font-size: 0.7rem;
302
- align-items: center;
303
- justify-content: center;
304
- padding: 4px;
305
- user-select: none;
306
- -webkit-user-select: none;
307
- }
308
- .toolbar-grid-selector .choice-button .icon {
309
- flex-grow: 1;
310
- flex-shrink: 1;
311
- width: 100%;
312
- }
313
- .toolbar-grid-selector .choice-button.checked {
314
- background-color: var(--selection-background-color);
315
- color: var(--selection-foreground-color);
316
- --icon-color: var(--selection-foreground-color);
317
- }
318
-
319
- :root .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list {
320
- height: min(200px, 50vh);
321
- position: relative;
322
- display: flex;
323
- align-items: center;
324
- }
325
- :root .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list > .scroller {
326
- display: flex;
327
- flex-direction: column;
328
- overflow-y: auto;
329
- scroll-snap-type: y mandatory;
330
- height: 100%;
331
- width: 100%;
332
- flex-grow: 1;
333
- }
334
- :root .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list > .scroller > .item {
335
- height: 100%;
336
- width: 100%;
337
- flex-shrink: 0;
338
- display: flex;
339
- justify-content: center;
340
- align-items: center;
341
- scroll-snap-align: start;
342
- scroll-snap-stop: always;
343
- box-sizing: border-box;
344
- }
345
- :root .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.-empty {
346
- display: none;
347
- }
348
- :root .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list > .page-markers {
349
- overflow: hidden;
350
- display: flex;
351
- flex-direction: column;
352
- align-items: center;
353
- max-height: 100%;
354
- min-height: 0;
355
- }
356
- :root .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list > .page-markers.-one-element {
357
- visibility: hidden;
358
- }
359
- :root .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list > .page-markers > .marker {
360
- padding: 2px;
361
- opacity: 0.1;
362
- cursor: pointer;
363
- left: 0;
364
- transition: left 0.2s ease;
365
- }
366
- :root .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list > .page-markers > .marker > .content {
367
- background-color: var(--foreground-color-1);
368
- border-radius: 2px;
369
- padding: 2px;
370
- }
371
- :root .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list > .page-markers > .marker.-active {
372
- position: relative;
373
- left: 2px;
374
- opacity: 0.2;
375
- }
376
-
377
- /* The *main* root toolbar element */
378
- .toolbar-root {
379
- background-color: var(--background-color-1);
380
- --icon-color: var(--foreground-color-1);
381
- --toolbar-button-height: min(20vh, 60px);
382
- flex-wrap: wrap;
383
- box-sizing: border-box;
384
- width: 100%;
385
- display: flex;
386
- flex-direction: row;
387
- justify-content: center;
388
- }
389
-
390
- /* Any root toolbar element */
391
- .toolbar-element {
392
- z-index: 1;
393
- font-family: system-ui, -apple-system, sans-serif;
394
- }
395
- .toolbar-element details > summary {
396
- cursor: pointer;
397
- }
398
-
399
- .toolbar-element > .toolbar-toolContainer > .toolbar-button,
400
- .toolbar-element > .toolbar-toolContainer > * > button,
401
- .toolbar-element > .toolbar-buttonGroup > button,
402
- .toolbar-element > .toolbar-button {
403
- white-space: pre;
404
- height: var(--toolbar-button-height);
405
- }
406
-
407
- .toolbar-dropdown .toolbar-button > .toolbar-icon {
408
- max-width: 50px;
409
- width: 100%;
410
- }
411
-
412
- .toolbar-button.disabled {
413
- filter: sepia(0.2);
414
- opacity: 0.45;
415
- cursor: unset;
416
- }
417
-
418
- .toolbar-button,
419
- .toolbar-element button {
420
- cursor: pointer;
421
- text-align: center;
422
- border-radius: 6px;
423
- border: none;
424
- box-shadow: 0px 0px 2px var(--shadow-color);
425
- user-select: none;
426
- -webkit-user-select: none;
427
- transition: background-color 0.15s ease, box-shadow 0.25s ease, opacity 0.2s ease;
428
- }
429
-
430
- .toolbar-button,
431
- .toolbar-buttonGroup > button,
432
- .toolbar-toolContainer > * > button,
433
- .toolbar-root > button {
434
- display: flex;
435
- flex-direction: column;
436
- align-items: center;
437
- justify-content: center;
438
- padding-left: 3px;
439
- padding-right: 3px;
440
- min-width: 40px;
441
- max-width: 105px;
442
- width: min-content;
443
- font-size: 1em;
444
- }
445
-
446
- .toolbar-button > label {
447
- cursor: inherit;
448
- user-select: none;
449
- -webkit-user-select: none;
450
- }
451
-
452
- /* Decrease the font size of labels in the main toolbar if they're long. */
453
- .toolbar-root > .toolbar-toolContainer > .toolbar-button > label.long-label {
454
- font-size: 0.75em;
455
- }
456
-
457
- .toolbar-dropdown > .toolbar-toolContainer > button,
458
- .toolbar-dropdown > .toolbar-toolContainer > .toolbar-button {
459
- width: 6em;
460
- }
461
-
462
- .toolbar-button:not(.disabled):hover,
463
- .toolbar-root button:not(:disabled):hover {
464
- box-shadow: 0px 2px 4px var(--shadow-color);
465
- }
466
-
467
- .toolbar-root button:disabled {
468
- cursor: inherit;
469
- opacity: 0.5;
470
- }
471
-
472
- .toolbar-root .toolbar-icon {
473
- flex-shrink: 1;
474
- user-select: none;
475
- width: 100%;
476
- min-width: 20px;
477
- min-height: 20px;
478
- }
479
-
480
- .toolbar-toolContainer.selected > .toolbar-button {
481
- background-color: var(--selection-background-color);
482
- color: var(--selection-foreground-color);
483
- --icon-color: var(--selection-foreground-color);
484
- }
485
-
486
- .toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-button > .toolbar-showHideDropdownIcon {
487
- display: none;
488
- }
489
-
490
- .toolbar-toolContainer > .toolbar-button > .toolbar-showHideDropdownIcon {
491
- height: 15px;
492
- transition: transform 0.25s ease;
493
- }
494
-
495
- .toolbar-toolContainer.dropdownVisible > .toolbar-button > .toolbar-showHideDropdownIcon {
496
- transform: rotate(180deg);
497
- }
498
-
499
- .toolbar-dropdown.hidden,
500
- .toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-dropdown:not(.hiding) {
501
- display: none;
502
- }
503
-
504
- .toolbar-dropdown {
505
- position: absolute;
506
- padding: 15px;
507
- padding-top: 5px;
508
- display: flex;
509
- flex-wrap: wrap;
510
- flex-direction: column;
511
- max-height: 80vh;
512
- max-width: fit-content;
513
- /* Prevent overlap/being displayed under the undo/redo buttons */
514
- z-index: 2;
515
- background-color: var(--background-color-1);
516
- box-shadow: 0px 3px 3px var(--shadow-color);
517
- }
518
-
519
- /* Animate showing/hiding the dropdown. Animations triggered in JavaScript. */
520
- @keyframes dropdown-transition-in {
521
- 0% {
522
- opacity: 0;
523
- transform: scale(1, 0);
524
- }
525
- 100% {
526
- opacity: 1;
527
- transform: scale(1, 1);
528
- }
529
- }
530
- @keyframes dropdown-transition-out {
531
- 0% {
532
- opacity: 1;
533
- transform: scale(1, 1);
534
- }
535
- 100% {
536
- opacity: 0;
537
- transform: scale(1, 0);
538
- }
539
- }
540
- .toolbar-dropdown {
541
- /* Ensure the animation begins from the correct location. */
542
- transform-origin: top left;
543
- --dropdown-show-animation: dropdown-transition-in;
544
- --dropdown-hide-animation: dropdown-transition-out;
545
- }
546
-
547
- @media (prefers-reduced-motion: reduce) {
548
- /* Disable toolbar animations if reducing motion */
549
- .toolbar-dropdown {
550
- --dropdown-show-animation: none;
551
- --dropdown-hide-animation: none;
552
- }
553
- .toolbar-dropdown.hiding {
554
- display: none;
555
- }
556
- /* Also disable arrow rotation */
557
- .toolbar-toolContainer > .toolbar-button > .toolbar-showHideDropdownIcon {
558
- transition: none;
559
- }
560
- /* ...and background color animation. */
561
- :root .toolbar-button,
562
- .toolbar-root button {
563
- transition: none;
564
- }
565
- }
566
- .toolbar-buttonGroup {
567
- display: flex;
568
- flex-direction: row;
569
- justify-content: center;
570
- }
571
-
572
- .toolbar-element .toolbar--toggle-button {
573
- color: var(--foreground-color-1);
574
- font-weight: normal;
575
- }
576
- .toolbar-element .toolbar--toggle-button[aria-checked=true] {
577
- background: var(--selection-background-color);
578
- color: var(--selection-foreground-color);
579
- }
580
- .toolbar-element .toolbar--toggle-button > .icon {
581
- width: 25px;
582
- height: 25px;
583
- margin: 0 5px;
584
- }
585
- .toolbar-element .toolbar--toggle-button > * {
586
- vertical-align: middle;
587
- }
588
-
589
- .toolbar-closeColorPickerOverlay {
590
- display: none;
591
- position: fixed;
592
- top: 0;
593
- left: 0;
594
- bottom: 0;
595
- right: 0;
596
- touch-action: none;
597
- background-color: var(--background-color-1);
598
- opacity: 0.3;
599
- z-index: 2;
600
- }
601
-
602
- .toolbar-spacedList > * {
603
- padding-bottom: 5px;
604
- padding-top: 5px;
605
- }
606
-
607
- .toolbar-indentedList {
608
- padding-left: 10px;
609
- }
610
-
611
- @media print {
612
- /* Hide all toolbar elements on print. */
613
- .toolbar-element {
614
- display: none;
615
- }
616
- }
617
- @keyframes rehide-label {
618
- 0% {
619
- opacity: 0.8;
620
- }
621
- 80% {
622
- opacity: 0.8;
623
- }
624
- 100% {
625
- opacity: 0.1;
626
- }
627
- }
628
- @keyframes show-label-delayed {
629
- 0% {
630
- opacity: 0;
631
- }
632
- 80% {
633
- opacity: 0;
634
- }
635
- 100% {
636
- opacity: 0.8;
637
- }
638
- }
639
- @keyframes show-label-now {
640
- 0% {
641
- opacity: 0;
642
- }
643
- 5% {
644
- opacity: 0;
645
- }
646
- 100% {
647
- opacity: 0.8;
648
- }
649
- }
650
- @keyframes keep-label-hidden {
651
- 0% {
652
- opacity: 0;
653
- }
654
- 100% {
655
- opacity: 0;
656
- }
657
- }
658
- @keyframes toolbar--edgemenu-transition-in {
659
- from {
660
- transform: translate(0, 100%);
661
- }
662
- to {
663
- transform: translate(0, 0);
664
- }
665
- }
666
- @keyframes toolbar--edgemenu-transition-in-reduce-motion {
667
- from {
668
- opacity: 0;
669
- }
670
- to {
671
- opacity: 1;
672
- }
673
- }
674
- @keyframes toolbar--edgemenu-transition-out {
675
- to {
676
- transform: translate(0, 100%);
677
- }
678
- }
679
- @keyframes toolbar--edgemenu-transition-out-reduce-motion {
680
- from {
681
- opacity: 1;
682
- }
683
- to {
684
- opacity: 0;
685
- }
686
- }
687
- @keyframes toolbar--edgemenu-container-transition-in {
688
- from {
689
- overflow-y: hidden;
690
- }
691
- to {
692
- overflow-y: hidden;
693
- }
694
- }
695
- @keyframes toolbar--edgemenu-container-transition-out {
696
- from {
697
- overflow-y: hidden;
698
- }
699
- to {
700
- overflow-y: hidden;
701
- }
702
- }
703
- .toolbar-edge-toolbar {
704
- --toolbar-button-height: min(20vh, 48px);
705
- --toolbar-button-size: var(--toolbar-button-height);
706
- --label-hover-offset-size: calc(14px + var(--toolbar-button-height));
707
- box-sizing: border-box;
708
- flex-direction: row;
709
- justify-content: space-around;
710
- --button-label-hover-offset-y: var(--label-hover-offset-size);
711
- --button-label-hover-offset-x: 0;
712
- }
713
- @media screen and (min-width: 540px) {
714
- .toolbar-edge-toolbar {
715
- flex-wrap: nowrap;
716
- }
717
- .toolbar-edge-toolbar > .toolbar-action-row {
718
- max-width: 50vw;
719
- flex-grow: 0;
720
- flex-shrink: 0;
721
- }
722
- }
723
- @media screen and (max-width: 700px) {
724
- .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline {
725
- font-size: 0.9em;
726
- }
727
- .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button {
728
- width: var(--toolbar-button-size);
729
- }
730
- .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button label {
731
- opacity: 0;
732
- animation: 0.2s linear hide-initially;
733
- }
734
- @keyframes hide-initially {
735
- from {
736
- opacity: 0;
737
- }
738
- to {
739
- opacity: 0;
740
- }
741
- }
742
- .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button:not(.no-long-press-or-hover):not(.has-long-press-or-hover):hover:not(:focus-visible) > label, .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button:not(.no-long-press-or-hover):not(.has-long-press-or-hover):active > label {
743
- opacity: 0.8;
744
- animation: 1s ease show-label-delayed;
745
- }
746
- .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button.has-long-press-or-hover > label {
747
- opacity: 0.8;
748
- }
749
- .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button:focus-visible > label, .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button.focus-visible > label {
750
- animation: 1.5s ease rehide-label;
751
- opacity: 0;
752
- }
753
- .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button:has(:focus-visible) > label {
754
- animation: 1.5s ease rehide-label;
755
- opacity: 0;
756
- }
757
- .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button > label {
758
- opacity: 0;
759
- position: absolute;
760
- margin-top: var(--button-label-hover-offset-y);
761
- margin-left: var(--button-label-hover-offset-x);
762
- z-index: 1;
763
- pointer-events: none;
764
- background-color: var(--background-color-1);
765
- color: var(--foreground-color-1);
766
- border-radius: 25px;
767
- padding: 10px;
768
- transition: 0.3s ease opacity, 0.2s ease margin-top;
769
- }
770
- }
771
- @media screen and (max-width: 700px) and (prefers-reduced-motion: reduce) {
772
- .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button > label {
773
- transition: none;
774
- }
775
- }
776
- @media screen and (max-width: 700px) {
777
- .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button > .toolbar-icon.toolbar-icon {
778
- margin-left: 0;
779
- margin-right: 0;
780
- }
781
- }
782
- .toolbar-edge-toolbar > div.toolbar-element {
783
- flex-direction: row;
784
- display: flex;
785
- flex-grow: 1;
786
- justify-content: center;
787
- background-color: var(--background-color-2);
788
- color: var(--foreground-color-2);
789
- --icon-color: var(--foreground-color-2);
790
- --extra-left-right-padding: 0px;
791
- }
792
- .toolbar-edge-toolbar > div.toolbar-element::-webkit-scrollbar {
793
- width: 3px;
794
- height: 3px;
795
- }
796
- .toolbar-edge-toolbar > div.toolbar-element::-webkit-scrollbar-thumb {
797
- background-color: var(--shadow-color);
798
- }
799
- .toolbar-edge-toolbar > div.toolbar-element.toolbar-tool-row {
800
- overflow-x: auto;
801
- overflow-y: hidden;
802
- flex-grow: 100;
803
- }
804
- .toolbar-edge-toolbar > div.toolbar-element.toolbar-action-row {
805
- z-index: 2;
806
- background-color: var(--background-color-3);
807
- color: var(--foreground-color-3);
808
- --icon-color: var(--foreground-color-3);
809
- }
810
- .toolbar-edge-toolbar > div.toolbar-element.has-scroll {
811
- justify-content: start;
812
- position: relative;
813
- --button-label-hover-offset-y: 0;
814
- --button-label-hover-offset-x: calc(0px - var(--label-hover-offset-size));
815
- }
816
- .toolbar-edge-toolbar > div.toolbar-element.has-scroll > :nth-child(1) {
817
- --button-label-hover-offset-x: var(--label-hover-offset-size);
818
- }
819
- .toolbar-edge-toolbar .toolbar-toolContainer.selected > .toolbar-button {
820
- background-color: var(--selection-background-color);
821
- color: var(--selection-foreground-color);
822
- --icon-color: var(--selection-foreground-color);
823
- }
824
- .toolbar-edge-toolbar .toolbar-button {
825
- box-sizing: border-box;
826
- background-color: transparent;
827
- }
828
- .toolbar-edge-toolbar .toolbar-button .toolbar-showHideDropdownIcon {
829
- flex-shrink: 0.01;
830
- height: 12px;
831
- }
832
- .toolbar-edge-toolbar .toolbar-toolContainer {
833
- order: 1;
834
- }
835
- .toolbar-edge-toolbar .toolbar-toolContainer.label-inline {
836
- flex-grow: 1;
837
- display: flex;
838
- --button-flex-direction: row;
839
- }
840
- .toolbar-edge-toolbar .toolbar-toolContainer.label-inline.label-left {
841
- justify-content: end;
842
- --button-flex-direction: row-reverse;
843
- order: 100;
844
- }
845
- .toolbar-edge-toolbar .toolbar-toolContainer.label-inline.label-left > .toolbar-button > .toolbar-icon {
846
- margin-left: 7px;
847
- margin-right: 0;
848
- }
849
- .toolbar-edge-toolbar .toolbar-toolContainer.label-inline.label-right {
850
- order: -1;
851
- }
852
- .toolbar-edge-toolbar .toolbar-toolContainer.label-inline > .toolbar-button {
853
- width: auto;
854
- flex-direction: var(--button-flex-direction);
855
- }
856
- .toolbar-edge-toolbar .toolbar-toolContainer.label-inline > .toolbar-button > .toolbar-icon {
857
- height: 100%;
858
- margin-right: 7px;
859
- margin-left: 0;
860
- width: 22px;
861
- }
862
- .toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button {
863
- width: calc(var(--toolbar-button-size) + var(--extra-left-right-padding));
864
- height: var(--toolbar-button-size);
865
- }
866
- .toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:not(.no-long-press-or-hover):not(.has-long-press-or-hover):hover:not(:focus-visible) > label, .toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:not(.no-long-press-or-hover):not(.has-long-press-or-hover):active > label {
867
- opacity: 0.8;
868
- animation: 1s ease show-label-delayed;
869
- }
870
- .toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button.has-long-press-or-hover > label {
871
- opacity: 0.8;
872
- }
873
- .toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:focus-visible > label, .toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button.focus-visible > label {
874
- animation: 1.5s ease rehide-label;
875
- opacity: 0;
876
- }
877
- .toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:has(:focus-visible) > label {
878
- animation: 1.5s ease rehide-label;
879
- opacity: 0;
880
- }
881
- .toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button > label {
882
- opacity: 0;
883
- position: absolute;
884
- margin-top: var(--button-label-hover-offset-y);
885
- margin-left: var(--button-label-hover-offset-x);
886
- z-index: 1;
887
- pointer-events: none;
888
- background-color: var(--background-color-1);
889
- color: var(--foreground-color-1);
890
- border-radius: 25px;
891
- padding: 10px;
892
- transition: 0.3s ease opacity, 0.2s ease margin-top;
893
- }
894
- @media (prefers-reduced-motion: reduce) {
895
- .toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button > label {
896
- transition: none;
897
- }
898
- }
899
- .toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline).dropdownVisible > .toolbar-button > label {
900
- opacity: 0.8;
901
- animation: 1.5s ease rehide-label 0.3s, 1s ease keep-label-hidden 1.8s infinite;
902
- }
903
- .toolbar-edge-toolbar > div > .toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-button > .toolbar-showHideDropdownIcon {
904
- display: block;
905
- visibility: hidden;
906
- }
907
- .toolbar-edge-toolbar .toolbar-toolContainer > .toolbar-button {
908
- margin: 0;
909
- border-radius: 0;
910
- padding: 8px;
911
- box-shadow: none;
912
- }
913
- .toolbar-edge-toolbar .toolbar-toolContainer > .toolbar-button.has-dropdown {
914
- padding-left: 8px;
915
- padding-right: 8px;
916
- padding-top: 8px;
917
- padding-bottom: 0px;
918
- }
919
-
920
- .imageEditorContainer.pipette--color-selection-in-progress .toolbar-edgemenu-container {
921
- height: 0;
922
- background-color: transparent;
923
- opacity: 0.9;
924
- }
925
- .imageEditorContainer.pipette--color-selection-in-progress .toolbar-edgemenu-container .toolbar-edgemenu {
926
- position: absolute;
927
- }
928
-
929
- .toolbar-edgemenu-container {
930
- background-color: var(--background-color-transparent);
931
- transition: 0.15s ease-in-out height, 0.15s ease-in-out background-color, 0.2s ease-in-out opacity;
932
- position: absolute;
933
- width: var(--editor-current-width-px);
934
- height: var(--editor-current-height-px);
935
- box-sizing: border-box;
936
- display: flex;
937
- flex-direction: column-reverse;
938
- align-items: center;
939
- z-index: 2;
940
- }
941
- @media (prefers-reduced-motion: reduce) {
942
- .toolbar-edgemenu-container {
943
- transition: 0.15s ease-in-out background-color, 0.2s ease-in-out opacity;
944
- }
945
- }
946
- .toolbar-edgemenu-container.dropdown-below-edge {
947
- overflow-y: hidden;
948
- }
949
- .toolbar-edgemenu-container button {
950
- font-size: 1.2em;
951
- box-shadow: none;
952
- border: none;
953
- padding: 10px;
954
- transition: 0.2s ease box-shadow;
955
- font-weight: bold;
956
- color: var(--primary-action-foreground-color);
957
- }
958
- .toolbar-edgemenu-container button:not(:disabled):hover {
959
- box-shadow: 0 1px 2px var(--shadow-color);
960
- }
961
- .toolbar-edgemenu-container button:disabled {
962
- opacity: 0.5;
963
- font-weight: unset;
964
- cursor: unset;
965
- color: var(--foreground-color-1);
966
- }
967
- .toolbar-edgemenu-container .toolbar-grid-selector .choice-button {
968
- --button-label-hover-offset-y: var(--button-size);
969
- }
970
- .toolbar-edgemenu-container .toolbar-grid-selector .choice-button:not(.no-long-press-or-hover):not(.has-long-press-or-hover):hover:not(:focus-visible) > label > .button-label-text, .toolbar-edgemenu-container .toolbar-grid-selector .choice-button:not(.no-long-press-or-hover):not(.has-long-press-or-hover):active > label > .button-label-text {
971
- opacity: 0.8;
972
- animation: 1s ease show-label-delayed;
973
- }
974
- .toolbar-edgemenu-container .toolbar-grid-selector .choice-button.has-long-press-or-hover > label > .button-label-text {
975
- opacity: 0.8;
976
- }
977
- .toolbar-edgemenu-container .toolbar-grid-selector .choice-button:focus-visible > label > .button-label-text, .toolbar-edgemenu-container .toolbar-grid-selector .choice-button.focus-visible > label > .button-label-text {
978
- animation: 1.5s ease rehide-label;
979
- opacity: 0;
980
- }
981
- .toolbar-edgemenu-container .toolbar-grid-selector .choice-button:has(:focus-visible) > label > .button-label-text {
982
- animation: 1.5s ease rehide-label;
983
- opacity: 0;
984
- }
985
- .toolbar-edgemenu-container .toolbar-grid-selector .choice-button > label > .button-label-text {
986
- opacity: 0;
987
- position: absolute;
988
- margin-top: var(--button-label-hover-offset-y);
989
- margin-left: var(--button-label-hover-offset-x);
990
- z-index: 1;
991
- pointer-events: none;
992
- background-color: var(--background-color-1);
993
- color: var(--foreground-color-1);
994
- border-radius: 25px;
995
- padding: 10px;
996
- transition: 0.3s ease opacity, 0.2s ease margin-top;
997
- }
998
- @media (prefers-reduced-motion: reduce) {
999
- .toolbar-edgemenu-container .toolbar-grid-selector .choice-button > label > .button-label-text {
1000
- transition: none;
1001
- }
1002
- }
1003
- .toolbar-edgemenu-container .toolbar-help-overlay-button {
1004
- align-items: last baseline;
1005
- }
1006
-
1007
- .toolbar-edgemenu-container .toolbar-edgemenu {
1008
- --toolbar-button-height: 48px;
1009
- touch-action: none;
1010
- user-select: none;
1011
- -webkit-user-select: none;
1012
- background-color: var(--background-color-2);
1013
- color: var(--foreground-color-2);
1014
- --icon-color: var(--foreground-color-2);
1015
- box-shadow: 0px 0px 1px var(--shadow-color);
1016
- padding-left: 10px;
1017
- padding-right: 10px;
1018
- width: min(400px, 100vw);
1019
- box-sizing: border-box;
1020
- border-top-left-radius: 30px;
1021
- border-top-right-radius: 30px;
1022
- transition: transform 0.1s ease, padding-bottom 0.1s ease;
1023
- }
1024
- .toolbar-edgemenu-container .toolbar-edgemenu input,
1025
- .toolbar-edgemenu-container .toolbar-edgemenu textarea {
1026
- user-select: auto;
1027
- -webkit-user-select: auto;
1028
- }
1029
- .toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer {
1030
- display: inline-block;
1031
- }
1032
- .toolbar-edgemenu-container .toolbar-edgemenu button {
1033
- background-color: transparent;
1034
- }
1035
- .toolbar-edgemenu-container .toolbar-edgemenu > button.drag-elem {
1036
- height: 40px;
1037
- display: block;
1038
- cursor: ns-resize;
1039
- position: relative;
1040
- margin-top: -15px;
1041
- margin-bottom: 10px;
1042
- width: 100%;
1043
- border: none;
1044
- box-shadow: none;
1045
- background: transparent;
1046
- }
1047
- .toolbar-edgemenu-container .toolbar-edgemenu > button.drag-elem::before {
1048
- content: "";
1049
- background-color: var(--icon-color);
1050
- opacity: 0.2;
1051
- display: block;
1052
- position: relative;
1053
- top: 10px;
1054
- height: 5px;
1055
- border-radius: 5px;
1056
- width: min(80%, 40px);
1057
- margin-left: auto;
1058
- margin-right: auto;
1059
- }
1060
- .toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer {
1061
- display: block;
1062
- }
1063
- .toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer .toolbar-button {
1064
- flex-direction: row;
1065
- max-width: unset;
1066
- width: 100%;
1067
- box-sizing: border-box;
1068
- justify-content: flex-start;
1069
- box-shadow: none;
1070
- padding: 2px;
1071
- }
1072
- .toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer .toolbar-button > .toolbar-icon {
1073
- width: 25px;
1074
- height: 25px;
1075
- padding: 13px;
1076
- margin-right: 15px;
1077
- }
1078
- .toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer .toolbar-button label, .toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer .toolbar-button > label.long-label {
1079
- font-size: 1em;
1080
- }
1081
- .toolbar-edgemenu-container .toolbar-edgemenu .toolbar-nonbutton-controls-main-list {
1082
- padding-left: 10px;
1083
- padding-right: 10px;
1084
- }
1085
- .toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList {
1086
- box-sizing: border-box;
1087
- --align-items-to-x: 105px;
1088
- }
1089
- .toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList > div {
1090
- display: flex;
1091
- align-items: center;
1092
- margin-top: 5px;
1093
- min-height: 35px;
1094
- }
1095
- .toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList > div:first-child {
1096
- margin-top: 0;
1097
- }
1098
- .toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList > div > label {
1099
- padding-right: 35px;
1100
- min-width: var(--align-items-to-x);
1101
- flex-shrink: 1;
1102
- box-sizing: border-box;
1103
- }
1104
- .toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList > div > input[type=checkbox] {
1105
- width: 20px;
1106
- height: 20px;
1107
- margin-left: 0;
1108
- }
1109
- .toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList > div > input:not([type=checkbox]) {
1110
- flex-grow: 1;
1111
- min-width: 48px;
1112
- flex-shrink: 1;
1113
- }
1114
-
1115
- .toolbar-dropdown-toolbar button,
1116
- .toolbar-dropdown-toolbar .toolbar-button {
1117
- background-color: var(--background-color-2);
1118
- color: var(--foreground-color-2);
1119
- --icon-color: var(--foreground-color-2);
1120
- }
1121
- .toolbar-dropdown-toolbar,
1122
- .toolbar-dropdown-toolbar .toolbar-dropdown {
1123
- background-color: var(--background-color-3);
1124
- color: var(--foreground-color-3);
1125
- }
1126
- .toolbar-dropdown-toolbar .toolbar-spacedList > div > label {
1127
- padding-right: 10px;
1128
- min-width: 50px;
1129
- }
1130
- .toolbar-dropdown-toolbar .clr-field button {
1131
- width: 100%;
1132
- height: 100%;
1133
- top: 50%;
1134
- left: 0;
1135
- border-radius: 5px;
1136
- }
1137
- .toolbar-dropdown-toolbar .toolbar-grid-selector > div {
1138
- --button-size: 57px;
1139
- }
1140
- .toolbar-dropdown-toolbar .toolbar-dropdown > div > .toolbar-toolContainer {
1141
- display: inline-block;
1142
- }
1143
-
1144
- .toolbar-help-overlay {
1145
- width: 100%;
1146
- height: 100%;
1147
- max-width: none;
1148
- max-height: none;
1149
- border: none;
1150
- margin: 0;
1151
- padding: 0;
1152
- z-index: 5;
1153
- touch-action: none;
1154
- overflow: hidden;
1155
- color: white;
1156
- --icon-color: white;
1157
- background-color: transparent;
1158
- display: flex;
1159
- flex-direction: column;
1160
- transition: 0.3s ease transform;
1161
- }
1162
- .toolbar-help-overlay::backdrop {
1163
- background-color: rgba(0, 0, 0, 0.8);
1164
- backdrop-filter: blur(1px);
1165
- -webkit-backdrop-filter: blur(1px);
1166
- }
1167
- .toolbar-help-overlay, .toolbar-help-overlay::backdrop {
1168
- animation: 0.25s ease transition-in;
1169
- }
1170
- @keyframes transition-in {
1171
- 0% {
1172
- opacity: 0;
1173
- }
1174
- 100% {
1175
- opacity: 1;
1176
- }
1177
- }
1178
- @keyframes transition-out {
1179
- 0% {
1180
- opacity: 1;
1181
- }
1182
- 100% {
1183
- opacity: 0;
1184
- }
1185
- }
1186
- .toolbar-help-overlay.-hiding, .toolbar-help-overlay.-hiding::backdrop {
1187
- animation: 0.25s ease transition-out;
1188
- opacity: 0;
1189
- }
1190
- .toolbar-help-overlay.-dragging {
1191
- transition: none;
1192
- }
1193
- @media (prefers-reduced-motion: reduce) {
1194
- .toolbar-help-overlay {
1195
- transition: none;
1196
- }
1197
- }
1198
- @media screen and (min-width: 800px) {
1199
- .toolbar-help-overlay > .navigation-buttons {
1200
- order: 1;
1201
- margin-top: auto;
1202
- }
1203
- }
1204
- .toolbar-help-overlay .with-text-shadow, .toolbar-help-overlay .help-page-container > .label, .toolbar-help-overlay button {
1205
- text-shadow: 0 0 3px rgba(20, 20, 20, 0.9);
1206
- filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5));
1207
- }
1208
- .toolbar-help-overlay button:not(:disabled) {
1209
- cursor: pointer;
1210
- }
1211
- .toolbar-help-overlay button {
1212
- background: transparent;
1213
- border: none;
1214
- color: var(--help-overlay-foreground);
1215
- border-radius: 15px;
1216
- }
1217
- .toolbar-help-overlay .close-button {
1218
- align-self: flex-start;
1219
- width: 48px;
1220
- height: 48px;
1221
- z-index: 1;
1222
- }
1223
- .toolbar-help-overlay .close-button > svg {
1224
- width: 100%;
1225
- }
1226
- .toolbar-help-overlay .navigation-content {
1227
- flex-grow: 1;
1228
- display: flex;
1229
- }
1230
- .toolbar-help-overlay .help-page-container {
1231
- display: flex;
1232
- align-items: center;
1233
- flex-grow: 1;
1234
- touch-action: none;
1235
- }
1236
- .toolbar-help-overlay .help-page-container > .label {
1237
- flex-grow: 1;
1238
- text-align: center;
1239
- font-size: 18.5pt;
1240
- margin-left: 15px;
1241
- margin-right: 15px;
1242
- margin-top: 0px;
1243
- z-index: 1;
1244
- transition: 0.5s ease margin-top;
1245
- }
1246
- .toolbar-help-overlay .help-page-container > .label.-large-space-below {
1247
- margin-top: 0;
1248
- margin-bottom: auto;
1249
- }
1250
- .toolbar-help-overlay .help-page-container > .label.-small-space-above {
1251
- margin-top: 40px;
1252
- margin-bottom: auto;
1253
- }
1254
- .toolbar-help-overlay .help-page-container > .label.-large-space-above {
1255
- margin-top: auto;
1256
- margin-bottom: 10px;
1257
- }
1258
- @media (prefers-reduced-motion: reduce) {
1259
- .toolbar-help-overlay .help-page-container > .label {
1260
- transition: none;
1261
- }
1262
- }
1263
- .toolbar-help-overlay .help-page-container > .cloned-element-container {
1264
- position: absolute;
1265
- z-index: 0;
1266
- user-select: none;
1267
- -webkit-user-select: none;
1268
- border-radius: 10px;
1269
- opacity: 0.01;
1270
- background-color: rgba(100, 100, 100, 0.01);
1271
- box-shadow: none;
1272
- transition: 0.5s ease opacity, 0.5s ease background-color;
1273
- }
1274
- .toolbar-help-overlay .help-page-container > .cloned-element-container * {
1275
- pointer-events: none !important;
1276
- }
1277
- .toolbar-help-overlay .help-page-container > .cloned-element-container > * {
1278
- margin: 0;
1279
- opacity: 0.01 !important;
1280
- transition: 0.3s ease opacity !important;
1281
- }
1282
- .toolbar-help-overlay .help-page-container > .cloned-element-container:not(.-clickable) * {
1283
- cursor: unset !important;
1284
- }
1285
- .toolbar-help-overlay .help-page-container > .cloned-element-container.-clickable, .toolbar-help-overlay .help-page-container > .cloned-element-container.-background {
1286
- z-index: 1;
1287
- touch-action: none;
1288
- }
1289
- .toolbar-help-overlay .help-page-container > .cloned-element-container.-clickable {
1290
- cursor: pointer;
1291
- z-index: 2;
1292
- }
1293
- .toolbar-help-overlay .help-page-container > .cloned-element-container.-clickable.has-long-press-or-hover {
1294
- opacity: 0.5 !important;
1295
- }
1296
- .toolbar-help-overlay .help-page-container > .cloned-element-container.-clickable.has-long-press-or-hover, .toolbar-help-overlay .help-page-container > .cloned-element-container.-active {
1297
- background-color: var(--background-color-1);
1298
- }
1299
- .toolbar-help-overlay .help-page-container > .cloned-element-container.-active {
1300
- opacity: 1;
1301
- background-color: var(--background-color-1);
1302
- box-shadow: 0 0 3px rgba(100, 100, 100, 0.5);
1303
- }
1304
- .toolbar-help-overlay .help-page-container > .cloned-element-container.-active > * {
1305
- opacity: 1 !important;
1306
- }
1307
- .toolbar-help-overlay .navigation-buttons {
1308
- display: flex;
1309
- flex-direction: row;
1310
- justify-content: space-between;
1311
- direction: ltr;
1312
- }
1313
- .toolbar-help-overlay .navigation-buttons > button:disabled {
1314
- opacity: 0.5;
1315
- }
1316
- .toolbar-help-overlay .navigation-buttons > .next,
1317
- .toolbar-help-overlay .navigation-buttons > .previous {
1318
- font-size: 1em;
1319
- padding: 10px;
1320
- transition: 0.2s ease font-size;
1321
- z-index: 3;
1322
- }
1323
- @media (prefers-reduced-motion: reduce) {
1324
- .toolbar-help-overlay .navigation-buttons > .next,
1325
- .toolbar-help-overlay .navigation-buttons > .previous {
1326
- transition: none;
1327
- }
1328
- }
1329
- .toolbar-help-overlay .navigation-buttons:not(.-has-previous) > .next:not(:disabled) {
1330
- animation: 0.5s ease highlight-button 0.5s;
1331
- }
1332
- @keyframes highlight-button {
1333
- 0% {
1334
- transform: scale(1);
1335
- }
1336
- 50% {
1337
- transform: scale(1.2);
1338
- }
1339
- 55% {
1340
- transform: scale(1.2) rotate(2deg);
1341
- }
1342
- 65% {
1343
- transform: scale(1.2) rotate(-2deg);
1344
- }
1345
- 100% {
1346
- transform: scale(1);
1347
- }
1348
- }
1349
- @media (prefers-reduced-motion: reduce) {
1350
- .toolbar-help-overlay .navigation-buttons:not(.-has-previous) > .next:not(:disabled) {
1351
- animation: none;
1352
- }
1353
- }
1354
- .toolbar-help-overlay .navigation-buttons > .next::after {
1355
- content: "❯";
1356
- margin-left: 3px;
1357
- }
1358
- .toolbar-help-overlay .navigation-buttons > .previous::before {
1359
- content: "❮";
1360
- margin-right: 3px;
1361
- }
1362
- .toolbar-help-overlay .navigation-buttons.-has-next > .next {
1363
- font-size: 1.4em;
1364
- }
1365
- .toolbar-help-overlay .navigation-buttons.-has-previous > .previous {
1366
- font-size: 1.4em;
1367
- }
1368
- .toolbar-help-overlay .navigation-buttons.-highlight-next > .next, .toolbar-help-overlay .navigation-buttons.-highlight-previous > .previous {
1369
- font-weight: bold;
1370
- background-color: rgba(200, 200, 200, 0.1);
1371
- font-size: 1.4em;
1372
- }
1373
- .toolbar-help-overlay .navigation-help {
1374
- margin-top: 1em;
1375
- font-size: 0.7em;
1376
- }
1377
-
1378
- .toolbar-element .toolbar-help-overlay-button {
1379
- height: 0;
1380
- position: relative;
1381
- display: flex;
1382
- justify-content: end;
1383
- }
1384
- .toolbar-element .toolbar-help-overlay-button > .button {
1385
- margin: 0;
1386
- padding: 5px;
1387
- padding-top: 0;
1388
- padding-bottom: 0;
1389
- box-shadow: none;
1390
- text-align: center;
1391
- opacity: 0.5;
1392
- }
1393
- .toolbar-element .toolbar-help-overlay-button > .button > .icon {
1394
- width: 1.18em;
1395
- height: 1.18em;
1396
- transition: 0.2s ease filter;
1397
- }
1398
- .toolbar-element .toolbar-help-overlay-button > .button:focus-visible > .icon, .toolbar-element .toolbar-help-overlay-button > .button:hover > .icon {
1399
- filter: drop-shadow(0px 0px 1px var(--shadow-color));
1400
- }
1401
-
1402
- .ScrollbarTool-overlay {
1403
- width: 0;
1404
- height: 0;
1405
- overflow: visible;
1406
- opacity: 0.2;
1407
- pointer-events: none;
1408
- --fade-out-animation: 1s ease 0s fade-out;
1409
- --scrollbar-size: 3px;
1410
- }
1411
- @media (prefers-reduced-motion: reduce) {
1412
- .ScrollbarTool-overlay {
1413
- --fade-out-animation: none !important;
1414
- }
1415
- }
1416
- @keyframes fade-out {
1417
- from {
1418
- opacity: 0.2;
1419
- }
1420
- to {
1421
- opacity: 0;
1422
- }
1423
- }
1424
- .ScrollbarTool-overlay:not(.just-updated) {
1425
- animation: var(--fade-out-animation);
1426
- opacity: 0;
1427
- }
1428
- .ScrollbarTool-overlay .vertical-scrollbar,
1429
- .ScrollbarTool-overlay .horizontal-scrollbar {
1430
- width: var(--scrollbar-size);
1431
- height: var(--scrollbar-size);
1432
- min-width: var(--scrollbar-size);
1433
- min-height: var(--scrollbar-size);
1434
- background-color: var(--foreground-color-1);
1435
- border-radius: var(--scrollbar-size);
1436
- position: absolute;
1437
- }
1438
- .ScrollbarTool-overlay .vertical-scrollbar.represents-no-scroll,
1439
- .ScrollbarTool-overlay .horizontal-scrollbar.represents-no-scroll {
1440
- animation: var(--fade-out-animation);
1441
- opacity: 0;
1442
- }
1443
- .ScrollbarTool-overlay:not(.scrollbar-left) .vertical-scrollbar {
1444
- margin-left: calc(var(--editor-current-display-width-px) - var(--scrollbar-size));
1445
- }
1446
- .ScrollbarTool-overlay:not(.scrollbar-top) .horizontal-scrollbar {
1447
- margin-top: calc(var(--editor-current-display-height-px) - var(--scrollbar-size));
1448
- }
1449
-
1450
- .clipboard-error-dialog details > summary {
1451
- cursor: pointer;
1452
- }
1453
- .clipboard-error-dialog details[open] {
1454
- margin-bottom: 12px;
1455
- }
1456
- .clipboard-error-dialog textarea {
1457
- width: 100%;
1458
- box-sizing: border-box;
1459
- }
1460
-
1461
- .selection-tool-selection-background {
1462
- background-color: var(--selection-background-color);
1463
- opacity: 0.5;
1464
- overflow: visible;
1465
- }
1466
-
1467
- .selection-tool-handle {
1468
- position: absolute;
1469
- box-sizing: border-box;
1470
- display: flex;
1471
- align-items: center;
1472
- justify-content: center;
1473
- --max-size: 17px;
1474
- }
1475
- .selection-tool-handle .selection-tool-content {
1476
- border: 1px solid var(--foreground-color-1);
1477
- background: var(--background-color-1);
1478
- box-sizing: border-box;
1479
- max-width: var(--max-size);
1480
- max-height: var(--max-size);
1481
- width: 100%;
1482
- height: 100%;
1483
- display: flex;
1484
- justify-content: center;
1485
- align-items: center;
1486
- padding: 3px;
1487
- }
1488
- .selection-tool-handle .selection-tool-content .icon {
1489
- width: 100%;
1490
- height: 100%;
1491
- }
1492
- .selection-tool-handle.selection-tool-circle .selection-tool-content {
1493
- border-radius: 100%;
1494
- }
1495
- .selection-tool-handle.selection-tool-rotate {
1496
- --max-size: 28px;
1497
- cursor: grab;
1498
- }
1499
-
1500
- .selection-tool-handle.selection-tool-resize-x {
1501
- cursor: ew-resize;
1502
- }
1503
- .selection-tool-handle.selection-tool-resize-y {
1504
- cursor: ns-resize;
1505
- }
1506
- .selection-tool-handle.selection-tool-resize-xy {
1507
- cursor: nwse-resize;
1508
- }
1509
-
1510
- .selection-tool-rotated-near-perpendicular .selection-tool-handle.selection-tool-resize-x {
1511
- cursor: ns-resize;
1512
- }
1513
- .selection-tool-rotated-near-perpendicular .selection-tool-handle.selection-tool-resize-y {
1514
- cursor: ew-resize;
1515
- }
1516
- .selection-tool-rotated-near-perpendicular .selection-tool-handle.selection-tool-resize-xy {
1517
- cursor: nesw-resize;
1518
- }
1519
-
1520
- .selection-tool-selection-menu > button {
1521
- max-height: var(--vertical-offset);
1522
- background-color: var(--background-color-1);
1523
- font-size: 14px;
1524
- color: var(--foreground-color-1);
1525
- border: 0.5px solid var(--foreground-color-1);
1526
- border-radius: 3px;
1527
- padding: 3px;
1528
- opacity: 0.8;
1529
- transition: 0.2s ease opacity;
1530
- }
1531
- .selection-tool-selection-menu > button:hover, .selection-tool-selection-menu > button:focus-visible {
1532
- background-color: var(--background-color-2);
1533
- color: var(--foreground-color-2);
1534
- cursor: pointer;
1535
- opacity: 1;
1536
- }
1537
-
1538
- .overlay.handleOverlay {
1539
- touch-action: none;
1540
- direction: ltr;
1541
- }
1542
- .overlay.handleOverlay,
1543
- .overlay.handleOverlay .selection-tool-selection-outer-container {
1544
- height: 0;
1545
- overflow: visible;
1546
- }
1547
- .overlay.handleOverlay .selection-tool-selection-inner-container {
1548
- width: var(--editor-current-display-width-px);
1549
- height: var(--editor-current-display-height-px);
1550
- overflow: hidden;
1551
- pointer-events: none;
1552
- }
1553
- .overlay.handleOverlay .selection-tool-selection-inner-container > * {
1554
- pointer-events: all;
1555
- }
1556
- .overlay.handleOverlay .selection-tool-selection-inner-container.-empty {
1557
- opacity: 0;
1558
- }
1559
- .overlay.handleOverlay .selection-tool-selection-inner-container.-hide-handles .selection-tool-handle {
1560
- display: none;
1561
- }
1562
-
1563
- @keyframes selection-duplicated-animation {
1564
- 0% {
1565
- scale: 1 1;
1566
- }
1567
- 50% {
1568
- scale: 1.02 1.02;
1569
- }
1570
- 100% {
1571
- scale: 1 1;
1572
- }
1573
- }
1574
- /* Do not run the animation when the user has disabled motion animations. */
1575
- @media (prefers-reduced-motion: reduce) {
1576
- @keyframes selection-duplicated-animation {}
1577
- }
1578
- .find-tool-overlay {
1579
- /* Show at the bottom of the screen. */
1580
- order: -1;
1581
- position: absolute;
1582
- }
1583
-
1584
- .js-draw-sound-ui-toggle {
1585
- width: 0px;
1586
- height: 0px;
1587
- overflow: hidden;
1588
- user-select: none;
1589
- -webkit-user-select: none;
1590
- }
1591
-
1592
- .js-draw-sound-ui-toggle button {
1593
- margin-top: 1px;
1594
- }
1595
-
1596
- .js-draw-sound-ui-toggle:focus-within,
1597
- .js-draw-sound-ui-toggle.sound-ui-tool-enabled {
1598
- overflow: visible;
1599
- z-index: 5;
1600
- }
1601
-
1602
- .js-draw-sound-ui-toggle:not(:focus-within):not(:hover).sound-ui-tool-enabled {
1603
- opacity: 0.5;
1604
- }
1605
-
1606
- @keyframes show-popup-menu-animation {
1607
- from {
1608
- opacity: 0;
1609
- }
1610
- to {
1611
- opacity: 1;
1612
- }
1613
- }
1614
- .editor-popup-menu {
1615
- width: 100%;
1616
- height: 100%;
1617
- background-color: transparent;
1618
- border: none;
1619
- animation: var(--hide-menu-animation-timeout) ease show-popup-menu-animation;
1620
- opacity: 1;
1621
- transition: var(--hide-menu-animation-timeout) ease opacity;
1622
- overflow: hidden;
1623
- }
1624
- .editor-popup-menu.-hide {
1625
- opacity: 0;
1626
- }
1627
- .editor-popup-menu > .content {
1628
- position: absolute;
1629
- left: var(--anchor-x);
1630
- top: var(--anchor-y);
1631
- display: flex;
1632
- flex-direction: column;
1633
- overflow: clip;
1634
- border-radius: 6px;
1635
- box-shadow: 0px 1px 2px var(--shadow-color);
1636
- }
1637
- .editor-popup-menu::backdrop {
1638
- background: transparent;
1639
- }
1640
-
1641
- .editor-popup-menu-option {
1642
- display: flex;
1643
- justify-content: start;
1644
- cursor: pointer;
1645
- padding: 5px;
1646
- padding-top: 6px;
1647
- padding-bottom: 6px;
1648
- background-color: var(--background-color-1);
1649
- color: var(--foreground-color-1);
1650
- --icon-color: currentColor;
1651
- border: none;
1652
- font-size: 1em;
1653
- }
1654
- .editor-popup-menu-option:hover, .editor-popup-menu-option:focus-visible {
1655
- background-color: var(--background-color-2);
1656
- color: var(--foreground-color-2);
1657
- }
1658
- .editor-popup-menu-option > :first-child {
1659
- width: 1em;
1660
- height: 1em;
1661
- flex-shrink: 0;
1662
- margin-inline-start: 0em;
1663
- margin-inline-end: 0.25em;
1664
- }
1665
-
1666
- .about-dialog-content > .scroll {
1667
- white-space: pre-wrap;
1668
- font-family: monospace;
1669
- }
1670
- .about-dialog-content > .scroll > details > summary {
1671
- cursor: pointer;
1672
- }
1673
- .about-dialog-content > .scroll > h2, .about-dialog-content > .scroll > details > summary {
1674
- margin-top: 15px;
1675
- font-size: 1.2em;
1676
- font-weight: bold;
1677
- }
1678
- .about-dialog-content > .scroll > h2 a, .about-dialog-content > .scroll > details > summary a {
1679
- color: var(--foreground-color-1);
1680
- text-decoration: underline;
1681
- }
1682
-
1683
- @keyframes fade-in {
1684
- from {
1685
- opacity: 0;
1686
- }
1687
- to {
1688
- opacity: 1;
1689
- }
1690
- }
1691
- .message-dialog-container dialog {
1692
- display: flex;
1693
- }
1694
- .message-dialog-container dialog.-closing {
1695
- opacity: 0;
1696
- }
1697
- .message-dialog-container dialog.-closing::backdrop {
1698
- opacity: 0;
1699
- }
1700
- .message-dialog-container dialog, .message-dialog-container dialog::backdrop {
1701
- transition: opacity 0.2s ease;
1702
- animation: fade-in 0.2s ease;
1703
- }
1704
-
1705
- .message-dialog-content {
1706
- display: flex;
1707
- flex-direction: column;
1708
- flex-grow: 1;
1709
- }
1710
- .message-dialog-content > .close {
1711
- display: block;
1712
- margin-left: auto;
1713
- margin-right: auto;
1714
- }
1715
- .message-dialog-content > .scroll {
1716
- flex-grow: 1;
1717
- flex-shrink: 1;
1718
- overflow-y: auto;
1719
- margin-left: 20px;
1720
- margin-right: 20px;
1721
- padding-bottom: 20px;
1722
- }
1723
-
1724
- .dialog-container > dialog {
1725
- background-color: var(--background-color-1);
1726
- color: var(--foreground-color-1);
1727
- border: none;
1728
- outline: none;
1729
- box-shadow: 0 0 2px var(--shadow-color);
1730
- border-radius: 8px;
1731
- max-height: 90vh;
1732
- width: min(100%, 500px);
1733
- box-sizing: border-box;
1734
- }
1735
- .dialog-container > dialog::backdrop {
1736
- backdrop-filter: blur(5px);
1737
- -webkit-backdrop-filter: blur(5px);
1738
- background-color: var(--background-color-transparent);
1739
- }
1740
-
1741
- /* Imports Coloris' CSS and makes additional changes to the color picker */
1742
- #clr-picker {
1743
- --clr-slider-size: 30px;
1744
- }
1745
-
1746
- /* Coloris: Try to avoid scrolling instead of updating the color input. */
1747
- #clr-picker #clr-color-area,
1748
- #clr-picker .clr_hue {
1749
- touch-action: none;
1750
- }
1751
-
1752
- /* Increase space between inputs */
1753
- #clr-picker .clr-alpha {
1754
- margin-top: 15px;
1755
- margin-bottom: 15px;
1756
- }
1757
-
1758
- /* Increase size of input thumb to make it easier to select colors. */
1759
- #clr-picker.clr-picker input[type=range]::-moz-range-thumb {
1760
- width: var(--clr-slider-size);
1761
- height: var(--clr-slider-size);
1762
- }
1763
-
1764
- /* Also apply to Chrome/iOS */
1765
- #clr-picker.clr-picker input[type=range]::-webkit-slider-thumb {
1766
- /*
1767
- Note: This doesn't seem to take effect in iOS if it's combined with the
1768
- ::-moz-range-thumb rule above
1769
- */
1770
- width: var(--clr-slider-size);
1771
- height: var(--clr-slider-size);
1772
- }
1773
-
1774
- #clr-picker.clr-picker input[type=range]::-webkit-slider-runnable-track {
1775
- height: var(--clr-slider-size);
1776
- }
1777
-
1778
- #clr-picker.clr-picker input[type=range]::-moz-range-track {
1779
- height: var(--clr-slider-size);
1780
- }
1781
-
1782
- /*
1783
- Debugging: Uncommenting this rule makes Coloris' sliders more
1784
- visible.
1785
-
1786
- #clr-picker.clr-picker input[type="range"] {
1787
- opacity: 0.5;
1788
- -webkit-appearance: auto;
1789
- appearance: auto;
1790
- }
1791
- */
1792
- /* Deafult colors for the editor */
1793
- .imageEditorContainer {
1794
- --background-color-1: white;
1795
- --foreground-color-1: black;
1796
- --background-color-2: #f5f5f5;
1797
- --foreground-color-2: #2c303a;
1798
- --background-color-3: #e5e5e5;
1799
- --foreground-color-3: #1c202a;
1800
- --selection-background-color: #cbdaf1;
1801
- --selection-foreground-color: #2c303a;
1802
- --background-color-transparent: rgba(105, 100, 100, 0.5);
1803
- --shadow-color: rgba(0, 0, 0, 0.5);
1804
- --primary-action-foreground-color: #15b;
1805
- }
1806
-
1807
- @media (prefers-color-scheme: dark) {
1808
- .imageEditorContainer {
1809
- --background-color-1: #151515;
1810
- --foreground-color-1: white;
1811
- --background-color-2: #222;
1812
- --foreground-color-2: #efefef;
1813
- --background-color-3: #272627;
1814
- --foreground-color-3: #eee;
1815
- --selection-background-color: #607;
1816
- --selection-foreground-color: white;
1817
- --shadow-color: rgba(250, 250, 250, 0.5);
1818
- --background-color-transparent: rgba(50, 50, 50, 0.5);
1819
- --primary-action-foreground-color: #7ae;
1820
- }
1821
- }
1822
- .imageEditorContainer {
1823
- --icon-color: var(--foreground-color-1);
1824
- }
1825
-
1826
- .imageEditorContainer {
1827
- color: var(--foreground-color-1);
1828
- font-family: system-ui, -apple-system, sans-serif;
1829
- background-color: var(--background-color-1);
1830
- width: 100%;
1831
- height: 400px;
1832
- min-height: 220px;
1833
- min-width: 100px;
1834
- writing-mode: horizontal-tb;
1835
- box-sizing: border-box;
1836
- display: flex;
1837
- flex-direction: column-reverse;
1838
- }
1839
- .imageEditorContainer input {
1840
- accent-color: var(--primary-action-foreground-color);
1841
- }
1842
-
1843
- .imageEditorContainer .imageEditorRenderArea {
1844
- display: grid;
1845
- grid-template-columns: 1fr;
1846
- flex-grow: 2;
1847
- flex-shrink: 1;
1848
- min-height: 100px;
1849
- min-width: 0;
1850
- width: 100%;
1851
- height: 100%;
1852
- }
1853
-
1854
- .imageEditorContainer .imageEditorRenderArea canvas {
1855
- /* Stack all canvases on top of each other */
1856
- grid-row: 1/1;
1857
- grid-column: 1/1;
1858
- touch-action: none;
1859
- /* Fill the container */
1860
- box-sizing: border-box;
1861
- width: 100%;
1862
- height: 100%;
1863
- /* Allow the canvas to shrink (needed in Chrome) */
1864
- min-width: 0;
1865
- max-width: inherit;
1866
- min-height: 0px;
1867
- max-height: inherit;
1868
- user-select: none;
1869
- -webkit-user-select: none;
1870
- -webkit-user-drag: none;
1871
- }
1872
-
1873
- .imageEditorContainer .loadingMessage {
1874
- position: fixed;
1875
- text-align: center;
1876
- font-size: 2em;
1877
- text-shadow: 0px 0px 1px var(--background-color-1);
1878
- bottom: 0;
1879
- left: 0;
1880
- right: 0;
1881
- }
1882
-
1883
- .imageEditorContainer .accessibilityAnnouncement {
1884
- opacity: 0;
1885
- width: 0;
1886
- height: 0;
1887
- overflow: hidden;
1888
- pointer-events: none;
1889
- user-select: none;
1890
- -webkit-user-select: none;
1891
- }
1892
-
1893
- .imageEditorContainer .textRendererOutputContainer {
1894
- width: 0.001px;
1895
- height: 0.001px;
1896
- overflow: hidden;
1897
- -webkit-user-select: none;
1898
- user-select: none;
1899
- }
1900
-
1901
- .imageEditorContainer .textRendererOutputContainer:focus-within {
1902
- overflow: visible;
1903
- z-index: 5;
1904
- }
1905
-
1906
- .imageEditorContainer .anchored-element-overlay {
1907
- overflow: visible;
1908
- height: 0;
1909
- }
1910
- .imageEditorContainer .anchored-element-overlay > .content-wrapper {
1911
- width: var(--editor-current-display-width-px);
1912
- height: var(--editor-current-display-height-px);
1913
- overflow: hidden;
1914
- position: relative;
1915
- pointer-events: none;
1916
- }
1917
- .imageEditorContainer .anchored-element-overlay > .content-wrapper > .content {
1918
- position: absolute;
1919
- left: var(--position-x);
1920
- top: var(--position-y);
1921
- transform: scale(var(--scale)) rotate(var(--rotation));
1922
- transform-origin: left top;
1923
- margin: 0;
1924
- pointer-events: all;
1925
- }
1926
-
1927
- @media print {
1928
- .imageEditorContainer .loadingMessage {
1929
- display: none;
1930
- }
1931
- .imageEditorContainer .imageEditorRenderArea canvas {
1932
- width: 100%;
1933
- height: initial;
1934
- }
1935
- }
1
+ :root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content>div>div{padding:5px}:root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content>div{min-height:0}:root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content img{max-width:100%;max-height:100%;display:block;margin-left:auto;margin-right:auto}:root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content .insert-image-image-status-view{display:flex;justify-content:space-between;padding-bottom:0}:root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content .action-button-row{margin-top:4px;display:flex;flex-direction:row;justify-content:flex-end;padding-bottom:0;margin-bottom:0}:root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content .action-button-row>button{flex-grow:1;text-align:end;max-width:50%;min-width:min(100%,40px)}.toolbar-overflow-widget-overflow-list{display:flex;flex-direction:column;flex-wrap:wrap;justify-content:center}.toolbar-overflow-widget-overflow-list>.toolbar-toolContainer>.toolbar-button{height:var(--toolbar-button-height)}.toolbar-overflow-widget.horizontal .toolbar-overflow-widget-overflow-list{flex-direction:row}.toolbar-overflow-widget.horizontal>.toolbar-dropdown{max-width:100%;left:15px;right:15px;margin-left:0 !important;translate:none !important;padding:4px}:root .toolbar--pen-tool-toggle-buttons.toolbar--pen-tool-toggle-buttons{display:flex;justify-content:stretch;padding-top:0;padding-bottom:5px;direction:ltr}:root .toolbar--pen-tool-toggle-buttons.toolbar--pen-tool-toggle-buttons>*{flex-grow:1;text-align:start;margin-inline-end:5px}:root .toolbar--pen-tool-toggle-buttons.toolbar--pen-tool-toggle-buttons>* .icon{margin:0;margin-inline-start:4px;margin-inline-end:10px}:root .toolbar--pen-tool-toggle-buttons.toolbar--pen-tool-toggle-buttons>:nth-child(1){direction:ltr}:root .toolbar--pen-tool-toggle-buttons.toolbar--pen-tool-toggle-buttons>:last-child{direction:rtl}.toolbar-zoomLevelEditor{display:flex;flex-direction:row;align-items:center}.toolbar-zoomLevelEditor .zoomDisplay{flex-grow:1}.toolbar-zoomLevelEditor button{min-width:48px}.selection-format-menu.disabled{opacity:.5}.toolbar-document-properties-widget button.about-button{width:100%;text-align:end}.toolbar-document-properties-widget>*{--align-items-to-x: 120px}.toolbar-document-properties-widget .js-draw-size-input-row.js-draw-size-input-row{display:flex}.toolbar-document-properties-widget .js-draw-size-input-row.js-draw-size-input-row.size-input-row--automatic-size{display:none}.toolbar-thicknessSliderContainer{display:flex;flex-direction:row}.toolbar-thicknessSliderContainer input{flex-grow:1}.toolbar-element .clr-field *{cursor:pointer}.toolbar-element .clr-field button{width:1.2em;height:1.2em;top:50%;left:0;border-radius:50%;margin-left:0;margin-right:0}.toolbar-element .clr-field input{opacity:0}.color-input-container{display:inline-flex;flex-direction:row}.color-input-container .coloris_input{height:calc(100% - 6px)}.color-input-container.picker-open .clr-field{pointer-events:none}:root .color-input-container>button.pipetteButton{width:30px;height:30px;padding:0;display:inline-flex}.color-input-container>.color-input-wrapper{display:flex;justify-content:stretch}.color-input-container .pipetteButton>svg{width:100%}.color-input-container .pipetteButton .pickColorInstructions{display:none;font-size:1em;position:absolute;margin-left:30px;background-color:var(--background-color-1);border-radius:30px;padding:4px;opacity:0;transition:.2s ease opacity}@media(prefers-reduced-motion: reduce){.color-input-container .pipetteButton .pickColorInstructions{transition:none}}.color-input-container .pipetteButton.active{background-color:var(--selection-background-color);--icon-color: var(--selection-foreground-color)}.color-input-container .pipetteButton.active .pickColorInstructions{display:block;opacity:.8}.tool-dropdown-separator{--border-color: rgba(100, 100, 100, 0.2);--border-color: color-mix(in srgb, var(--foreground-color-1), rgba(0, 0, 0, 0) 80%);border-top:1px solid var(--border-color);padding-left:2px;margin-top:10px;margin-bottom:10px}.toolbar-element .toolbar--file-input-container{display:flex}.toolbar-element .toolbar--file-input-container.-loading{opacity:.8}.toolbar-element .toolbar--file-input-container>input.file-input{opacity:0;width:0;min-width:0 !important;max-width:0;height:0;overflow:hidden;padding:0;margin:0}.toolbar-element .toolbar--file-input-container>label{display:block;flex-grow:1;padding:0 !important;padding-bottom:5px;--active-border-color: rgba(100, 100, 100, 0.5);--active-border-color: color-mix(in srgb, var(--foreground-color-1), transparent)}.toolbar-element .toolbar--file-input-container>label .cancel-button{padding-left:3px;padding-right:3px}.toolbar-element .toolbar--file-input-container>label>.toolbar--file-input-description{background-color:var(--background-color-3);color:var(--foreground-color-3);border:1px dashed var(--active-border-color);padding:10px;margin-top:10px;display:flex;flex-direction:column;align-items:center;text-align:center;--action-color: var(--primary-action-foreground-color);--icon-color: var(--action-color)}.toolbar-element .toolbar--file-input-container>label>.toolbar--file-input-description>span{white-space:pre-wrap}.toolbar-element .toolbar--file-input-container>label>.toolbar--file-input-description>span>b{color:var(--action-color);cursor:pointer}.toolbar-element .toolbar--file-input-container>label>.toolbar--file-input-description>.icon{width:min(50vw,42px);height:min(50vw,42px);margin-bottom:8px;display:block}.toolbar-element .toolbar--file-input-container>label:active,.toolbar-element .toolbar--file-input-container>label:hover,.toolbar-element .toolbar--file-input-container>label.drag-target{--active-border-color: var(--foreground-color-1)}.toolbar-element .toolbar--file-input-container>label.drag-target>.toolbar--file-input-description{border-width:2px}.toolbar-grid-selector{position:relative}.toolbar-grid-selector>div{display:flex;flex-direction:row;max-width:350px;flex-wrap:wrap;--button-size: 48px}.toolbar-grid-selector .choice-button{display:flex;flex-direction:column-reverse;box-sizing:border-box;cursor:pointer;flex-shrink:1;margin:2px}.toolbar-grid-selector .choice-button.focus-visible{outline:2px solid var(--foreground-color-1)}.toolbar-grid-selector .choice-button input{opacity:0;height:0}.toolbar-grid-selector .choice-button label{display:flex;flex-direction:column;box-sizing:border-box;width:var(--button-size);height:var(--button-size);font-size:.7rem;align-items:center;justify-content:center;padding:4px;user-select:none;-webkit-user-select:none}.toolbar-grid-selector .choice-button .icon{flex-grow:1;flex-shrink:1;width:100%}.toolbar-grid-selector .choice-button.checked{background-color:var(--selection-background-color);color:var(--selection-foreground-color);--icon-color: var(--selection-foreground-color)}:root .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list{height:min(200px,50vh);position:relative;display:flex;align-items:center}:root .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list>.scroller{display:flex;flex-direction:column;overflow-y:auto;scroll-snap-type:y mandatory;height:100%;width:100%;flex-grow:1}:root .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list>.scroller>.item{height:100%;width:100%;flex-shrink:0;display:flex;justify-content:center;align-items:center;scroll-snap-align:start;scroll-snap-stop:always;box-sizing:border-box}:root .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.-empty{display:none}:root .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list>.page-markers{overflow:hidden;display:flex;flex-direction:column;align-items:center;max-height:100%;min-height:0}:root .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list>.page-markers.-one-element{visibility:hidden}:root .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list>.page-markers>.marker{padding:2px;opacity:.1;cursor:pointer;left:0;transition:left .2s ease}:root .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list>.page-markers>.marker>.content{background-color:var(--foreground-color-1);border-radius:2px;padding:2px}:root .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list>.page-markers>.marker.-active{position:relative;left:2px;opacity:.2}.toolbar-button-grid{display:grid;grid-template-columns:repeat(var(--column-count), 1fr);justify-items:center;--button-size: 30px}.toolbar-button-grid>.button{font-size:1em;width:min-content}.toolbar-button-grid>.button>.icon{max-width:var(--button-size);max-height:var(--button-size);width:48px;height:48px}.toolbar-button-grid>.button>label{display:block;font-weight:normal}.toolbar-root{background-color:var(--background-color-1);--icon-color: var(--foreground-color-1);--toolbar-button-height: min(20vh, 60px);flex-wrap:wrap;box-sizing:border-box;width:100%;display:flex;flex-direction:row;justify-content:center}.toolbar-element{z-index:1;font-family:system-ui,-apple-system,sans-serif}.toolbar-element details>summary{cursor:pointer}.toolbar-element>.toolbar-toolContainer>.toolbar-button,.toolbar-element>.toolbar-toolContainer>*>button,.toolbar-element>.toolbar-buttonGroup>button,.toolbar-element>.toolbar-button{white-space:pre;height:var(--toolbar-button-height)}.toolbar-dropdown .toolbar-button>.toolbar-icon{max-width:50px;width:100%}.toolbar-button.disabled{filter:sepia(0.2);opacity:.45;cursor:unset}.toolbar-button,.toolbar-element button{cursor:pointer;text-align:center;border-radius:6px;border:none;box-shadow:0px 0px 2px var(--shadow-color);user-select:none;-webkit-user-select:none;transition:background-color .15s ease,box-shadow .25s ease,opacity .2s ease}.toolbar-button,.toolbar-buttonGroup>button,.toolbar-toolContainer>*>button,.toolbar-root>button{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-left:3px;padding-right:3px;min-width:40px;max-width:105px;width:min-content;font-size:1em}.toolbar-button>label{cursor:inherit;user-select:none;-webkit-user-select:none}.toolbar-root>.toolbar-toolContainer>.toolbar-button>label.long-label{font-size:.75em}.toolbar-dropdown>.toolbar-toolContainer>button,.toolbar-dropdown>.toolbar-toolContainer>.toolbar-button{width:6em}.toolbar-button:not(.disabled):hover,.toolbar-root button:not(:disabled):hover{box-shadow:0px 2px 4px var(--shadow-color)}.toolbar-root button:disabled{cursor:inherit;opacity:.5}.toolbar-root .toolbar-icon{flex-shrink:1;user-select:none;width:100%;min-width:20px;min-height:20px}.toolbar-toolContainer.selected>.toolbar-button{background-color:var(--selection-background-color);color:var(--selection-foreground-color);--icon-color: var(--selection-foreground-color)}.toolbar-toolContainer:not(.selected):not(.dropdownShowable)>.toolbar-button>.toolbar-showHideDropdownIcon{display:none}.toolbar-toolContainer>.toolbar-button>.toolbar-showHideDropdownIcon{height:15px;transition:transform .25s ease}.toolbar-toolContainer.dropdownVisible>.toolbar-button>.toolbar-showHideDropdownIcon{transform:rotate(180deg)}.toolbar-dropdown.hidden,.toolbar-toolContainer:not(.selected):not(.dropdownShowable)>.toolbar-dropdown:not(.hiding){display:none}.toolbar-dropdown{position:absolute;padding:15px;padding-top:5px;display:flex;flex-wrap:wrap;flex-direction:column;max-height:80vh;max-width:fit-content;z-index:2;background-color:var(--background-color-1);box-shadow:0px 3px 3px var(--shadow-color)}@keyframes dropdown-transition-in{0%{opacity:0;transform:scale(1, 0)}100%{opacity:1;transform:scale(1, 1)}}@keyframes dropdown-transition-out{0%{opacity:1;transform:scale(1, 1)}100%{opacity:0;transform:scale(1, 0)}}.toolbar-dropdown{transform-origin:top left;--dropdown-show-animation: dropdown-transition-in;--dropdown-hide-animation: dropdown-transition-out}@media(prefers-reduced-motion: reduce){.toolbar-dropdown{--dropdown-show-animation: none;--dropdown-hide-animation: none}.toolbar-dropdown.hiding{display:none}.toolbar-toolContainer>.toolbar-button>.toolbar-showHideDropdownIcon{transition:none}:root .toolbar-button,.toolbar-root button{transition:none}}.toolbar-buttonGroup{display:flex;flex-direction:row;justify-content:center}.toolbar-element .toolbar--toggle-button{color:var(--foreground-color-1);font-weight:normal}.toolbar-element .toolbar--toggle-button[aria-checked=true]{background:var(--selection-background-color);color:var(--selection-foreground-color)}.toolbar-element .toolbar--toggle-button>.icon{width:25px;height:25px;margin:0 5px}.toolbar-element .toolbar--toggle-button>*{vertical-align:middle}.toolbar-closeColorPickerOverlay{display:none;position:fixed;top:0;left:0;bottom:0;right:0;touch-action:none;background-color:var(--background-color-1);opacity:.3;z-index:2}.toolbar-spacedList>*{padding-bottom:5px;padding-top:5px}.toolbar-indentedList{padding-left:10px}@media print{.toolbar-element{display:none}}@keyframes rehide-label{0%{opacity:.8}80%{opacity:.8}100%{opacity:.1}}@keyframes show-label-delayed{0%{opacity:0}80%{opacity:0}100%{opacity:.8}}@keyframes show-label-now{0%{opacity:0}5%{opacity:0}100%{opacity:.8}}@keyframes keep-label-hidden{0%{opacity:0}100%{opacity:0}}@keyframes toolbar--edgemenu-transition-in{from{transform:translate(0, 100%)}to{transform:translate(0, 0)}}@keyframes toolbar--edgemenu-transition-in-reduce-motion{from{opacity:0}to{opacity:1}}@keyframes toolbar--edgemenu-transition-out{to{transform:translate(0, 100%)}}@keyframes toolbar--edgemenu-transition-out-reduce-motion{from{opacity:1}to{opacity:0}}@keyframes toolbar--edgemenu-container-transition-in{from{overflow-y:hidden}to{overflow-y:hidden}}@keyframes toolbar--edgemenu-container-transition-out{from{overflow-y:hidden}to{overflow-y:hidden}}.toolbar-edge-toolbar{--toolbar-button-height: min(20vh, 48px);--toolbar-button-size: var(--toolbar-button-height);--label-hover-offset-size: calc(14px + var(--toolbar-button-height));box-sizing:border-box;flex-direction:row;justify-content:space-around;--button-label-hover-offset-y: var(--label-hover-offset-size);--button-label-hover-offset-x: 0}@media screen and (min-width: 540px){.toolbar-edge-toolbar{flex-wrap:nowrap}.toolbar-edge-toolbar>.toolbar-action-row{max-width:50vw;flex-grow:0;flex-shrink:0}}@media screen and (max-width: 700px){.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline{font-size:.9em}.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button{width:var(--toolbar-button-size)}.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button label{opacity:0;animation:.2s linear hide-initially}@keyframes hide-initially{from{opacity:0}to{opacity:0}}.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button:not(.no-long-press-or-hover):not(.has-long-press-or-hover):hover:not(:focus-visible)>label,.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button:not(.no-long-press-or-hover):not(.has-long-press-or-hover):active>label{opacity:.8;animation:1s ease show-label-delayed}.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button.has-long-press-or-hover>label{opacity:.8}.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button:focus-visible>label,.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button.focus-visible>label{animation:1.5s ease rehide-label;opacity:0}.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button:has(:focus-visible)>label{animation:1.5s ease rehide-label;opacity:0}.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button>label{opacity:0;position:absolute;margin-top:var(--button-label-hover-offset-y);margin-left:var(--button-label-hover-offset-x);z-index:1;pointer-events:none;background-color:var(--background-color-1);color:var(--foreground-color-1);border-radius:25px;padding:10px;transition:.3s ease opacity,.2s ease margin-top}}@media screen and (max-width: 700px)and (prefers-reduced-motion: reduce){.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button>label{transition:none}}@media screen and (max-width: 700px){.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button>.toolbar-icon.toolbar-icon{margin-left:0;margin-right:0}}.toolbar-edge-toolbar>div.toolbar-element{flex-direction:row;display:flex;flex-grow:1;justify-content:center;background-color:var(--background-color-2);color:var(--foreground-color-2);--icon-color: var(--foreground-color-2);--extra-left-right-padding: 0px}.toolbar-edge-toolbar>div.toolbar-element::-webkit-scrollbar{width:3px;height:3px}.toolbar-edge-toolbar>div.toolbar-element::-webkit-scrollbar-thumb{background-color:var(--shadow-color)}.toolbar-edge-toolbar>div.toolbar-element.toolbar-tool-row{overflow-x:auto;overflow-y:hidden;flex-grow:100}.toolbar-edge-toolbar>div.toolbar-element.toolbar-action-row{z-index:2;background-color:var(--background-color-3);color:var(--foreground-color-3);--icon-color: var(--foreground-color-3)}.toolbar-edge-toolbar>div.toolbar-element.has-scroll{justify-content:start;position:relative;--button-label-hover-offset-y: 0;--button-label-hover-offset-x: calc(0px - var(--label-hover-offset-size))}.toolbar-edge-toolbar>div.toolbar-element.has-scroll>:nth-child(1){--button-label-hover-offset-x: var(--label-hover-offset-size)}.toolbar-edge-toolbar .toolbar-toolContainer.selected>.toolbar-button{background-color:var(--selection-background-color);color:var(--selection-foreground-color);--icon-color: var(--selection-foreground-color)}.toolbar-edge-toolbar .toolbar-button{box-sizing:border-box;background-color:rgba(0,0,0,0)}.toolbar-edge-toolbar .toolbar-button .toolbar-showHideDropdownIcon{flex-shrink:.01;height:12px}.toolbar-edge-toolbar .toolbar-toolContainer{order:1}.toolbar-edge-toolbar .toolbar-toolContainer.label-inline{flex-grow:1;display:flex;--button-flex-direction: row}.toolbar-edge-toolbar .toolbar-toolContainer.label-inline.label-left{justify-content:end;--button-flex-direction: row-reverse;order:100}.toolbar-edge-toolbar .toolbar-toolContainer.label-inline.label-left>.toolbar-button>.toolbar-icon{margin-left:7px;margin-right:0}.toolbar-edge-toolbar .toolbar-toolContainer.label-inline.label-right{order:-1}.toolbar-edge-toolbar .toolbar-toolContainer.label-inline>.toolbar-button{width:auto;flex-direction:var(--button-flex-direction)}.toolbar-edge-toolbar .toolbar-toolContainer.label-inline>.toolbar-button>.toolbar-icon{height:100%;margin-right:7px;margin-left:0;width:22px}.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button{width:calc(var(--toolbar-button-size) + var(--extra-left-right-padding));height:var(--toolbar-button-size)}.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:not(.no-long-press-or-hover):not(.has-long-press-or-hover):hover:not(:focus-visible)>label,.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:not(.no-long-press-or-hover):not(.has-long-press-or-hover):active>label{opacity:.8;animation:1s ease show-label-delayed}.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button.has-long-press-or-hover>label{opacity:.8}.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:focus-visible>label,.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button.focus-visible>label{animation:1.5s ease rehide-label;opacity:0}.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:has(:focus-visible)>label{animation:1.5s ease rehide-label;opacity:0}.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button>label{opacity:0;position:absolute;margin-top:var(--button-label-hover-offset-y);margin-left:var(--button-label-hover-offset-x);z-index:1;pointer-events:none;background-color:var(--background-color-1);color:var(--foreground-color-1);border-radius:25px;padding:10px;transition:.3s ease opacity,.2s ease margin-top}@media(prefers-reduced-motion: reduce){.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button>label{transition:none}}.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline).dropdownVisible>.toolbar-button>label{opacity:.8;animation:1.5s ease rehide-label .3s,1s ease keep-label-hidden 1.8s infinite}.toolbar-edge-toolbar>div>.toolbar-toolContainer:not(.selected):not(.dropdownShowable)>.toolbar-button>.toolbar-showHideDropdownIcon{display:block;visibility:hidden}.toolbar-edge-toolbar .toolbar-toolContainer>.toolbar-button{margin:0;border-radius:0;padding:8px;box-shadow:none}.toolbar-edge-toolbar .toolbar-toolContainer>.toolbar-button.has-dropdown{padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:0px}.imageEditorContainer.pipette--color-selection-in-progress .toolbar-edgemenu-container{height:0;background-color:rgba(0,0,0,0);opacity:.9}.imageEditorContainer.pipette--color-selection-in-progress .toolbar-edgemenu-container .toolbar-edgemenu{position:absolute}.toolbar-edgemenu-container{background-color:var(--background-color-transparent);transition:.15s ease-in-out height,.15s ease-in-out background-color,.2s ease-in-out opacity;position:absolute;width:var(--editor-current-width-px);height:var(--editor-current-height-px);box-sizing:border-box;display:flex;flex-direction:column-reverse;align-items:center;z-index:2}@media(prefers-reduced-motion: reduce){.toolbar-edgemenu-container{transition:.15s ease-in-out background-color,.2s ease-in-out opacity}}.toolbar-edgemenu-container.dropdown-below-edge{overflow-y:hidden}.toolbar-edgemenu-container button{font-size:1.2em;box-shadow:none;border:none;padding:10px;transition:.2s ease box-shadow;font-weight:bold;color:var(--primary-action-foreground-color)}.toolbar-edgemenu-container button:not(:disabled):hover{box-shadow:0 0px 2px var(--shadow-color)}.toolbar-edgemenu-container button:disabled{opacity:.5;font-weight:unset;cursor:unset;color:var(--foreground-color-1)}.toolbar-edgemenu-container .toolbar-grid-selector .choice-button{--button-label-hover-offset-y: var(--button-size)}.toolbar-edgemenu-container .toolbar-grid-selector .choice-button:not(.no-long-press-or-hover):not(.has-long-press-or-hover):hover:not(:focus-visible)>label>.button-label-text,.toolbar-edgemenu-container .toolbar-grid-selector .choice-button:not(.no-long-press-or-hover):not(.has-long-press-or-hover):active>label>.button-label-text{opacity:.8;animation:1s ease show-label-delayed}.toolbar-edgemenu-container .toolbar-grid-selector .choice-button.has-long-press-or-hover>label>.button-label-text{opacity:.8}.toolbar-edgemenu-container .toolbar-grid-selector .choice-button:focus-visible>label>.button-label-text,.toolbar-edgemenu-container .toolbar-grid-selector .choice-button.focus-visible>label>.button-label-text{animation:1.5s ease rehide-label;opacity:0}.toolbar-edgemenu-container .toolbar-grid-selector .choice-button:has(:focus-visible)>label>.button-label-text{animation:1.5s ease rehide-label;opacity:0}.toolbar-edgemenu-container .toolbar-grid-selector .choice-button>label>.button-label-text{opacity:0;position:absolute;margin-top:var(--button-label-hover-offset-y);margin-left:var(--button-label-hover-offset-x);z-index:1;pointer-events:none;background-color:var(--background-color-1);color:var(--foreground-color-1);border-radius:25px;padding:10px;transition:.3s ease opacity,.2s ease margin-top}@media(prefers-reduced-motion: reduce){.toolbar-edgemenu-container .toolbar-grid-selector .choice-button>label>.button-label-text{transition:none}}.toolbar-edgemenu-container .toolbar-button-grid button{--button-label-hover-offset-y: 0}.toolbar-edgemenu-container .toolbar-button-grid button:not(.no-long-press-or-hover):not(.has-long-press-or-hover):hover:not(:focus-visible)>label,.toolbar-edgemenu-container .toolbar-button-grid button:not(.no-long-press-or-hover):not(.has-long-press-or-hover):active>label{opacity:.8;animation:1s ease show-label-delayed}.toolbar-edgemenu-container .toolbar-button-grid button.has-long-press-or-hover>label{opacity:.8}.toolbar-edgemenu-container .toolbar-button-grid button:focus-visible>label,.toolbar-edgemenu-container .toolbar-button-grid button.focus-visible>label{animation:1.5s ease rehide-label;opacity:0}.toolbar-edgemenu-container .toolbar-button-grid button:has(:focus-visible)>label{animation:1.5s ease rehide-label;opacity:0}.toolbar-edgemenu-container .toolbar-button-grid button>label{opacity:0;position:absolute;margin-top:var(--button-label-hover-offset-y);margin-left:var(--button-label-hover-offset-x);z-index:1;pointer-events:none;background-color:var(--background-color-1);color:var(--foreground-color-1);border-radius:25px;padding:10px;transition:.3s ease opacity,.2s ease margin-top}@media(prefers-reduced-motion: reduce){.toolbar-edgemenu-container .toolbar-button-grid button>label{transition:none}}.toolbar-edgemenu-container .toolbar-help-overlay-button{align-items:last baseline}.toolbar-edgemenu-container .toolbar-edgemenu{--toolbar-button-height: 48px;touch-action:none;user-select:none;-webkit-user-select:none;background-color:var(--background-color-2);color:var(--foreground-color-2);--icon-color: var(--foreground-color-2);box-shadow:0px 0px 1px var(--shadow-color);padding-left:10px;padding-right:10px;width:min(400px,100vw);box-sizing:border-box;border-top-left-radius:30px;border-top-right-radius:30px;transition:transform .1s ease,padding-bottom .1s ease}.toolbar-edgemenu-container .toolbar-edgemenu input,.toolbar-edgemenu-container .toolbar-edgemenu textarea{user-select:auto;-webkit-user-select:auto}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer{display:inline-block}.toolbar-edgemenu-container .toolbar-edgemenu button{background-color:rgba(0,0,0,0)}.toolbar-edgemenu-container .toolbar-edgemenu>button.drag-elem{height:40px;display:block;cursor:ns-resize;position:relative;margin-top:-15px;margin-bottom:10px;width:100%;border:none;box-shadow:none;background:rgba(0,0,0,0)}.toolbar-edgemenu-container .toolbar-edgemenu>button.drag-elem::before{content:"";background-color:var(--icon-color);opacity:.2;display:block;position:relative;top:10px;height:5px;border-radius:5px;width:min(80%,40px);margin-left:auto;margin-right:auto}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer{display:block}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer .toolbar-button{flex-direction:row;max-width:unset;width:100%;box-sizing:border-box;justify-content:flex-start;box-shadow:none;padding:2px}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer .toolbar-button>.toolbar-icon{width:25px;height:25px;padding:13px;margin-right:15px}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer .toolbar-button label,.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer .toolbar-button>label.long-label{font-size:1em}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-nonbutton-controls-main-list{padding-left:10px;padding-right:10px}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList{box-sizing:border-box;--align-items-to-x: 105px}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList>div{display:flex;align-items:center;margin-top:5px;min-height:35px}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList>div:first-child{margin-top:0}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList>div>label{padding-right:35px;min-width:var(--align-items-to-x);flex-shrink:1;box-sizing:border-box}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList>div>input[type=checkbox]{width:20px;height:20px;margin-left:0}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList>div>input:not([type=checkbox]){flex-grow:1;min-width:48px;flex-shrink:1}.toolbar-dropdown-toolbar button,.toolbar-dropdown-toolbar .toolbar-button{background-color:var(--background-color-2);color:var(--foreground-color-2);--icon-color: var(--foreground-color-2)}.toolbar-dropdown-toolbar,.toolbar-dropdown-toolbar .toolbar-dropdown{background-color:var(--background-color-3);color:var(--foreground-color-3)}.toolbar-dropdown-toolbar .toolbar-spacedList>div>label{padding-right:10px;min-width:50px}.toolbar-dropdown-toolbar .clr-field button{width:100%;height:100%;top:50%;left:0;border-radius:5px}.toolbar-dropdown-toolbar .toolbar-grid-selector>div{--button-size: 57px}.toolbar-dropdown-toolbar .toolbar-dropdown>div>.toolbar-toolContainer{display:inline-block}.toolbar-help-overlay{width:100%;height:100%;max-width:none;max-height:none;border:none;margin:0;padding:0;z-index:5;touch-action:none;overflow:hidden;color:#fff;--icon-color: white;background-color:rgba(0,0,0,0);display:flex;flex-direction:column;transition:.3s ease transform}.toolbar-help-overlay::backdrop{background-color:rgba(0,0,0,.8);backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px)}.toolbar-help-overlay,.toolbar-help-overlay::backdrop{animation:.25s ease transition-in}@keyframes transition-in{0%{opacity:0}100%{opacity:1}}@keyframes transition-out{0%{opacity:1}100%{opacity:0}}.toolbar-help-overlay.-hiding,.toolbar-help-overlay.-hiding::backdrop{animation:.25s ease transition-out;opacity:0}.toolbar-help-overlay.-dragging{transition:none}@media(prefers-reduced-motion: reduce){.toolbar-help-overlay{transition:none}}@media screen and (min-width: 800px){.toolbar-help-overlay>.navigation-buttons{order:1;margin-top:auto}}.toolbar-help-overlay .with-text-shadow,.toolbar-help-overlay .help-page-container>.label,.toolbar-help-overlay button{text-shadow:0 0 3px rgba(20,20,20,.9);filter:drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5))}.toolbar-help-overlay button:not(:disabled){cursor:pointer}.toolbar-help-overlay button{background:rgba(0,0,0,0);border:none;color:var(--help-overlay-foreground);border-radius:15px}.toolbar-help-overlay .close-button{align-self:flex-start;width:48px;height:48px;z-index:1}.toolbar-help-overlay .close-button>svg{width:100%}.toolbar-help-overlay .navigation-content{flex-grow:1;display:flex}.toolbar-help-overlay .help-page-container{display:flex;align-items:center;flex-grow:1;touch-action:none}.toolbar-help-overlay .help-page-container>.label{flex-grow:1;text-align:center;font-size:18.5pt;margin-left:15px;margin-right:15px;margin-top:0px;z-index:1;transition:.5s ease margin-top}.toolbar-help-overlay .help-page-container>.label.-large-space-below{margin-top:0;margin-bottom:auto}.toolbar-help-overlay .help-page-container>.label.-small-space-above{margin-top:40px;margin-bottom:auto}.toolbar-help-overlay .help-page-container>.label.-large-space-above{margin-top:auto;margin-bottom:10px}@media(prefers-reduced-motion: reduce){.toolbar-help-overlay .help-page-container>.label{transition:none}}.toolbar-help-overlay .help-page-container>.cloned-element-container{position:absolute;z-index:0;user-select:none;-webkit-user-select:none;border-radius:10px;opacity:.01;background-color:rgba(100,100,100,.01);box-shadow:none;transition:.5s ease opacity,.5s ease background-color}.toolbar-help-overlay .help-page-container>.cloned-element-container *{pointer-events:none !important}.toolbar-help-overlay .help-page-container>.cloned-element-container>*{margin:0;opacity:.01 !important;transition:.3s ease opacity !important}.toolbar-help-overlay .help-page-container>.cloned-element-container:not(.-clickable) *{cursor:unset !important}.toolbar-help-overlay .help-page-container>.cloned-element-container.-clickable,.toolbar-help-overlay .help-page-container>.cloned-element-container.-background{z-index:1;touch-action:none}.toolbar-help-overlay .help-page-container>.cloned-element-container.-clickable{cursor:pointer;z-index:2}.toolbar-help-overlay .help-page-container>.cloned-element-container.-clickable.has-long-press-or-hover{opacity:.5 !important}.toolbar-help-overlay .help-page-container>.cloned-element-container.-clickable.has-long-press-or-hover,.toolbar-help-overlay .help-page-container>.cloned-element-container.-active{background-color:var(--background-color-1)}.toolbar-help-overlay .help-page-container>.cloned-element-container.-active{opacity:1;background-color:var(--background-color-1);box-shadow:0 0 3px rgba(100,100,100,.5)}.toolbar-help-overlay .help-page-container>.cloned-element-container.-active>*{opacity:1 !important}.toolbar-help-overlay .navigation-buttons{display:flex;flex-direction:row;justify-content:space-between;direction:ltr}.toolbar-help-overlay .navigation-buttons>button:disabled{opacity:.5}.toolbar-help-overlay .navigation-buttons>.next,.toolbar-help-overlay .navigation-buttons>.previous{font-size:1em;padding:10px;transition:.2s ease font-size;z-index:3}@media(prefers-reduced-motion: reduce){.toolbar-help-overlay .navigation-buttons>.next,.toolbar-help-overlay .navigation-buttons>.previous{transition:none}}.toolbar-help-overlay .navigation-buttons:not(.-has-previous)>.next:not(:disabled){animation:.5s ease highlight-button .5s}@keyframes highlight-button{0%{transform:scale(1)}50%{transform:scale(1.2)}55%{transform:scale(1.2) rotate(2deg)}65%{transform:scale(1.2) rotate(-2deg)}100%{transform:scale(1)}}@media(prefers-reduced-motion: reduce){.toolbar-help-overlay .navigation-buttons:not(.-has-previous)>.next:not(:disabled){animation:none}}.toolbar-help-overlay .navigation-buttons>.next::after{content:"❯";margin-left:3px}.toolbar-help-overlay .navigation-buttons>.previous::before{content:"❮";margin-right:3px}.toolbar-help-overlay .navigation-buttons.-has-next>.next{font-size:1.4em}.toolbar-help-overlay .navigation-buttons.-has-previous>.previous{font-size:1.4em}.toolbar-help-overlay .navigation-buttons.-highlight-next>.next,.toolbar-help-overlay .navigation-buttons.-highlight-previous>.previous{font-weight:bold;background-color:rgba(200,200,200,.1);font-size:1.4em}.toolbar-help-overlay .navigation-help{margin-top:1em;font-size:.7em}.toolbar-element .toolbar-help-overlay-button{height:0;position:relative;display:flex;justify-content:end}.toolbar-element .toolbar-help-overlay-button>.button{margin:0;padding:5px;padding-top:0;padding-bottom:0;box-shadow:none;text-align:center;opacity:.5}.toolbar-element .toolbar-help-overlay-button>.button>.icon{width:1.18em;height:1.18em;transition:.2s ease filter}.toolbar-element .toolbar-help-overlay-button>.button:focus-visible>.icon,.toolbar-element .toolbar-help-overlay-button>.button:hover>.icon{filter:drop-shadow(0px 0px 1px var(--shadow-color))}.ScrollbarTool-overlay{width:0;height:0;overflow:visible;opacity:.2;pointer-events:none;--fade-out-animation: 1s ease 0s fade-out;--scrollbar-size: 3px}@media(prefers-reduced-motion: reduce){.ScrollbarTool-overlay{--fade-out-animation: none !important}}@keyframes fade-out{from{opacity:.2}to{opacity:0}}.ScrollbarTool-overlay:not(.just-updated){animation:var(--fade-out-animation);opacity:0}.ScrollbarTool-overlay .vertical-scrollbar,.ScrollbarTool-overlay .horizontal-scrollbar{width:var(--scrollbar-size);height:var(--scrollbar-size);min-width:var(--scrollbar-size);min-height:var(--scrollbar-size);background-color:var(--foreground-color-1);border-radius:var(--scrollbar-size);position:absolute}.ScrollbarTool-overlay .vertical-scrollbar.represents-no-scroll,.ScrollbarTool-overlay .horizontal-scrollbar.represents-no-scroll{animation:var(--fade-out-animation);opacity:0}.ScrollbarTool-overlay:not(.scrollbar-left) .vertical-scrollbar{margin-left:calc(var(--editor-current-display-width-px) - var(--scrollbar-size))}.ScrollbarTool-overlay:not(.scrollbar-top) .horizontal-scrollbar{margin-top:calc(var(--editor-current-display-height-px) - var(--scrollbar-size))}.clipboard-error-dialog details>summary{cursor:pointer}.clipboard-error-dialog details[open]{margin-bottom:12px}.clipboard-error-dialog textarea{width:100%;box-sizing:border-box}.selection-tool-selection-background{background-color:var(--selection-background-color);opacity:.5;overflow:visible}.selection-tool-handle{position:absolute;box-sizing:border-box;display:flex;align-items:center;justify-content:center;--max-size: 17px}.selection-tool-handle .selection-tool-content{border:1px solid var(--foreground-color-1);background:var(--background-color-1);box-sizing:border-box;max-width:var(--max-size);max-height:var(--max-size);width:100%;height:100%;display:flex;justify-content:center;align-items:center;padding:3px}.selection-tool-handle .selection-tool-content .icon{width:100%;height:100%}.selection-tool-handle.selection-tool-circle .selection-tool-content{border-radius:100%}.selection-tool-handle.selection-tool-rotate{--max-size: 28px;cursor:grab}.selection-tool-handle.selection-tool-resize-x{cursor:ew-resize}.selection-tool-handle.selection-tool-resize-y{cursor:ns-resize}.selection-tool-handle.selection-tool-resize-xy{cursor:nwse-resize}.selection-tool-rotated-near-perpendicular .selection-tool-handle.selection-tool-resize-x{cursor:ns-resize}.selection-tool-rotated-near-perpendicular .selection-tool-handle.selection-tool-resize-y{cursor:ew-resize}.selection-tool-rotated-near-perpendicular .selection-tool-handle.selection-tool-resize-xy{cursor:nesw-resize}.selection-tool-selection-menu>button{max-height:var(--vertical-offset);background-color:var(--background-color-1);width:24px;height:24px;padding:6px;font-size:14px;user-select:none;-webkit-user-select:none;color:var(--foreground-color-1);border:.5px solid var(--foreground-color-1);border-radius:3px;opacity:.8;transition:.2s ease opacity}.selection-tool-selection-menu>button:hover,.selection-tool-selection-menu>button:focus-visible{background-color:var(--background-color-2);color:var(--foreground-color-2);cursor:pointer;opacity:1}.selection-tool-selection-menu>button>.icon{width:100%;height:100%}.overlay.handleOverlay{touch-action:none;direction:ltr}.overlay.handleOverlay,.overlay.handleOverlay .selection-tool-selection-outer-container{height:0;overflow:visible}.overlay.handleOverlay .selection-tool-selection-inner-container{width:var(--editor-current-display-width-px);height:var(--editor-current-display-height-px);overflow:hidden;pointer-events:none}.overlay.handleOverlay .selection-tool-selection-inner-container>*{pointer-events:all}.overlay.handleOverlay .selection-tool-selection-inner-container.-empty{opacity:0;display:none}.overlay.handleOverlay .selection-tool-selection-inner-container.-hide-handles .selection-tool-handle{display:none}@keyframes selection-duplicated-animation{0%{scale:1 1}50%{scale:1.02 1.02}100%{scale:1 1}}@media(prefers-reduced-motion: reduce){@keyframes selection-duplicated-animation{}}.find-tool-overlay{order:-1;position:absolute}.js-draw-sound-ui-toggle{width:0px;height:0px;overflow:hidden;user-select:none;-webkit-user-select:none}.js-draw-sound-ui-toggle button{margin-top:1px}.js-draw-sound-ui-toggle:focus-within,.js-draw-sound-ui-toggle.sound-ui-tool-enabled{overflow:visible;z-index:5}.js-draw-sound-ui-toggle:not(:focus-within):not(:hover).sound-ui-tool-enabled{opacity:.5}@keyframes show-popup-menu-animation{from{opacity:0}to{opacity:1}}.editor-popup-menu{width:100%;height:100%;background-color:rgba(0,0,0,0);border:none;animation:var(--hide-menu-animation-timeout) ease show-popup-menu-animation;opacity:1;transition:var(--hide-menu-animation-timeout) ease opacity;overflow:hidden}.editor-popup-menu.-hide{opacity:0}.editor-popup-menu>.content{position:absolute;left:var(--anchor-x);top:var(--anchor-y);display:flex;flex-direction:column;overflow:clip;border-radius:6px;box-shadow:0px 0px 2px var(--shadow-color);background-color:var(--background-color-1)}.editor-popup-menu::backdrop{background:rgba(0,0,0,0)}.editor-popup-menu-option{display:flex;justify-content:start;cursor:pointer;padding:5px;padding-top:6px;padding-bottom:6px;background-color:rgba(0,0,0,0);color:var(--foreground-color-1);--icon-color: currentColor;border:none;font-size:1em}.editor-popup-menu-option:hover,.editor-popup-menu-option:focus-visible{background-color:var(--background-color-2);color:var(--foreground-color-2)}.editor-popup-menu-option>:first-child{width:1em;height:1em;flex-shrink:0;align-self:center;margin-inline-start:0em;margin-inline-end:.32em}.about-dialog-content>.scroll{white-space:pre-wrap;font-family:monospace}.about-dialog-content>.scroll>details>summary{cursor:pointer}.about-dialog-content>.scroll>h2,.about-dialog-content>.scroll>details>summary{margin-top:15px;font-size:1.2em;font-weight:bold}.about-dialog-content>.scroll>h2 a,.about-dialog-content>.scroll>details>summary a{color:var(--foreground-color-1);text-decoration:underline}@keyframes fade-in{from{opacity:0}to{opacity:1}}.message-dialog-container dialog{display:flex}.message-dialog-container dialog.-closing{opacity:0}.message-dialog-container dialog.-closing::backdrop{opacity:0}.message-dialog-container dialog,.message-dialog-container dialog::backdrop{transition:opacity .2s ease;animation:fade-in .2s ease}.message-dialog-content{display:flex;flex-direction:column;flex-grow:1}.message-dialog-content>.close{display:block;margin-left:auto;margin-right:auto}.message-dialog-content>.scroll{flex-grow:1;flex-shrink:1;overflow-y:auto;margin-left:20px;margin-right:20px;padding-bottom:20px}.dialog-container>dialog{background-color:var(--background-color-1);color:var(--foreground-color-1);border:none;outline:none;box-shadow:0 0 2px var(--shadow-color);border-radius:8px;max-height:90vh;width:min(100%,500px);box-sizing:border-box}.dialog-container>dialog::backdrop{backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);background-color:var(--background-color-transparent)}#clr-picker{--clr-slider-size: 30px}#clr-picker #clr-color-area,#clr-picker .clr_hue{touch-action:none}#clr-picker .clr-alpha{margin-top:15px;margin-bottom:15px}#clr-picker.clr-picker input[type=range]::-moz-range-thumb{width:var(--clr-slider-size);height:var(--clr-slider-size)}#clr-picker.clr-picker input[type=range]::-webkit-slider-thumb{width:var(--clr-slider-size);height:var(--clr-slider-size)}#clr-picker.clr-picker input[type=range]::-webkit-slider-runnable-track{height:var(--clr-slider-size)}#clr-picker.clr-picker input[type=range]::-moz-range-track{height:var(--clr-slider-size)}.imageEditorContainer{--background-color-1: white;--foreground-color-1: black;--background-color-2: #f5f5f5;--foreground-color-2: #2c303a;--background-color-3: #e5e5e5;--foreground-color-3: #1c202a;--selection-background-color: #cbdaf1;--selection-foreground-color: #2c303a;--background-color-transparent: rgba(105, 100, 100, 0.5);--shadow-color: rgba(0, 0, 0, 0.5);--primary-action-foreground-color: #15b}@media(prefers-color-scheme: dark){.imageEditorContainer{--background-color-1: #151515;--foreground-color-1: white;--background-color-2: #222;--foreground-color-2: #efefef;--background-color-3: #272627;--foreground-color-3: #eee;--selection-background-color: #607;--selection-foreground-color: white;--shadow-color: rgba(250, 250, 250, 0.5);--background-color-transparent: rgba(50, 50, 50, 0.5);--primary-action-foreground-color: #7ae}}.imageEditorContainer{--icon-color: var(--foreground-color-1)}.imageEditorContainer{color:var(--foreground-color-1);font-family:system-ui,-apple-system,sans-serif;background-color:var(--background-color-1);width:100%;height:400px;min-height:220px;min-width:100px;writing-mode:horizontal-tb;box-sizing:border-box;display:flex;flex-direction:column-reverse}.imageEditorContainer input{accent-color:var(--primary-action-foreground-color)}.imageEditorContainer .imageEditorRenderArea{display:grid;grid-template-columns:1fr;flex-grow:2;flex-shrink:1;min-height:100px;min-width:0;width:100%;height:100%}.imageEditorContainer .imageEditorRenderArea canvas{grid-row:1/1;grid-column:1/1;touch-action:none;box-sizing:border-box;width:100%;height:100%;min-width:0;max-width:inherit;min-height:0px;max-height:inherit;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}.imageEditorContainer .loadingMessage{position:fixed;text-align:center;font-size:2em;text-shadow:0px 0px 1px var(--background-color-1);bottom:0;left:0;right:0}.imageEditorContainer .accessibilityAnnouncement{opacity:0;width:0;height:0;overflow:hidden;pointer-events:none;user-select:none;-webkit-user-select:none}.imageEditorContainer .textRendererOutputContainer{width:.001px;height:.001px;overflow:hidden;-webkit-user-select:none;user-select:none}.imageEditorContainer .textRendererOutputContainer:focus-within{overflow:visible;z-index:5}.imageEditorContainer .anchored-element-overlay{overflow:visible;height:0}.imageEditorContainer .anchored-element-overlay>.content-wrapper{width:var(--editor-current-display-width-px);height:var(--editor-current-display-height-px);overflow:hidden;position:relative;pointer-events:none}.imageEditorContainer .anchored-element-overlay>.content-wrapper>.content{position:absolute;left:var(--position-x);top:var(--position-y);transform:scale(var(--scale)) rotate(var(--rotation));transform-origin:left top;margin:0;pointer-events:all}@media print{.imageEditorContainer .loadingMessage{display:none}.imageEditorContainer .imageEditorRenderArea canvas{width:100%;height:initial}}