@fto-consult/expo-ui 7.4.42 → 7.4.44

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/electron/index.js +0 -7
  2. package/electron/pdf-viewer/viewer.css +14 -3718
  3. package/electron/pdf-viewer/wiewer.html +30 -0
  4. package/electron/preload.js +3 -4
  5. package/package.json +2 -1
  6. package/src/pdf/print.electron.js +11 -3
  7. package/src/pdf/print.web.js +3 -2
  8. package/electron/pdf-viewer/locale/en-CA/viewer.ftl +0 -311
  9. package/electron/pdf-viewer/locale/en-GB/viewer.ftl +0 -351
  10. package/electron/pdf-viewer/locale/en-US/viewer.ftl +0 -377
  11. package/electron/pdf-viewer/locale/fr/viewer.ftl +0 -347
  12. package/electron/pdf-viewer/locale/locale.json +0 -6
  13. package/electron/pdf-viewer/pdf.min.mjs +0 -21
  14. package/electron/pdf-viewer/viewer.html +0 -491
  15. package/electron/pdf-viewer/web/images/altText_add.svg +0 -3
  16. package/electron/pdf-viewer/web/images/altText_done.svg +0 -3
  17. package/electron/pdf-viewer/web/images/annotation-check.svg +0 -11
  18. package/electron/pdf-viewer/web/images/annotation-comment.svg +0 -16
  19. package/electron/pdf-viewer/web/images/annotation-help.svg +0 -26
  20. package/electron/pdf-viewer/web/images/annotation-insert.svg +0 -10
  21. package/electron/pdf-viewer/web/images/annotation-key.svg +0 -11
  22. package/electron/pdf-viewer/web/images/annotation-newparagraph.svg +0 -11
  23. package/electron/pdf-viewer/web/images/annotation-noicon.svg +0 -7
  24. package/electron/pdf-viewer/web/images/annotation-note.svg +0 -42
  25. package/electron/pdf-viewer/web/images/annotation-paperclip.svg +0 -6
  26. package/electron/pdf-viewer/web/images/annotation-paragraph.svg +0 -16
  27. package/electron/pdf-viewer/web/images/annotation-pushpin.svg +0 -7
  28. package/electron/pdf-viewer/web/images/editor-toolbar-delete.svg +0 -5
  29. package/electron/pdf-viewer/web/images/loading-icon.gif +0 -0
  30. package/electron/pdf-viewer/web/pdf_viewer.css +0 -2120
  31. package/electron/pdf-viewer/web/pdf_viewer.mjs +0 -8598
@@ -1,2120 +0,0 @@
1
- /* Copyright 2014 Mozilla Foundation
2
- *
3
- * Licensed under the Apache License, Version 2.0 (the "License");
4
- * you may not use this file except in compliance with the License.
5
- * You may obtain a copy of the License at
6
- *
7
- * http://www.apache.org/licenses/LICENSE-2.0
8
- *
9
- * Unless required by applicable law or agreed to in writing, software
10
- * distributed under the License is distributed on an "AS IS" BASIS,
11
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12
- * See the License for the specific language governing permissions and
13
- * limitations under the License.
14
- */
15
-
16
- .textLayer{
17
- position:absolute;
18
- text-align:initial;
19
- inset:0;
20
- overflow:hidden;
21
- opacity:0.25;
22
- line-height:1;
23
- -webkit-text-size-adjust:none;
24
- -moz-text-size-adjust:none;
25
- text-size-adjust:none;
26
- forced-color-adjust:none;
27
- transform-origin:0 0;
28
- z-index:2;
29
- }
30
-
31
- .textLayer :is(span, br){
32
- color:transparent;
33
- position:absolute;
34
- white-space:pre;
35
- cursor:text;
36
- transform-origin:0% 0%;
37
- }
38
-
39
- .textLayer span.markedContent{
40
- top:0;
41
- height:0;
42
- }
43
-
44
- .textLayer .highlight{
45
- --highlight-bg-color:rgb(180 0 170);
46
- --highlight-selected-bg-color:rgb(0 100 0);
47
-
48
- margin:-1px;
49
- padding:1px;
50
- background-color:var(--highlight-bg-color);
51
- border-radius:4px;
52
- }
53
-
54
- @media screen and (forced-colors: active){
55
-
56
- .textLayer .highlight{
57
- --highlight-bg-color:Highlight;
58
- --highlight-selected-bg-color:ButtonText;
59
- }
60
- }
61
-
62
- .textLayer .highlight.appended{
63
- position:initial;
64
- }
65
-
66
- .textLayer .highlight.begin{
67
- border-radius:4px 0 0 4px;
68
- }
69
-
70
- .textLayer .highlight.end{
71
- border-radius:0 4px 4px 0;
72
- }
73
-
74
- .textLayer .highlight.middle{
75
- border-radius:0;
76
- }
77
-
78
- .textLayer .highlight.selected{
79
- background-color:var(--highlight-selected-bg-color);
80
- }
81
-
82
- .textLayer ::-moz-selection{
83
- background:blue;
84
- background:AccentColor;
85
- }
86
-
87
- .textLayer ::selection{
88
- background:blue;
89
- background:AccentColor;
90
- }
91
-
92
- .textLayer br::-moz-selection{
93
- background:transparent;
94
- }
95
-
96
- .textLayer br::selection{
97
- background:transparent;
98
- }
99
-
100
- .textLayer .endOfContent{
101
- display:block;
102
- position:absolute;
103
- inset:100% 0 0;
104
- z-index:-1;
105
- cursor:default;
106
- -webkit-user-select:none;
107
- -moz-user-select:none;
108
- user-select:none;
109
- }
110
-
111
- .textLayer .endOfContent.active{
112
- top:0;
113
- }
114
-
115
- .annotationLayer{
116
- --annotation-unfocused-field-background:url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
117
- --input-focus-border-color:Highlight;
118
- --input-focus-outline:1px solid Canvas;
119
- --input-unfocused-border-color:transparent;
120
- --input-disabled-border-color:transparent;
121
- --input-hover-border-color:black;
122
- --link-outline:none;
123
-
124
- position:absolute;
125
- top:0;
126
- left:0;
127
- pointer-events:none;
128
- transform-origin:0 0;
129
- z-index:3;
130
- }
131
-
132
- @media screen and (forced-colors: active){
133
-
134
- .annotationLayer{
135
- --input-focus-border-color:CanvasText;
136
- --input-unfocused-border-color:ActiveText;
137
- --input-disabled-border-color:GrayText;
138
- --input-hover-border-color:Highlight;
139
- --link-outline:1.5px solid LinkText;
140
- --hcm-highlight-filter:invert(100%);
141
- }
142
-
143
- .annotationLayer .textWidgetAnnotation :is(input, textarea):required, .annotationLayer .choiceWidgetAnnotation select:required, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required{
144
- outline:1.5px solid selectedItem;
145
- }
146
-
147
- .annotationLayer .linkAnnotation{
148
- outline:var(--link-outline);
149
- }
150
-
151
- .annotationLayer .linkAnnotation:hover{
152
- -webkit-backdrop-filter:var(--hcm-highlight-filter);
153
- backdrop-filter:var(--hcm-highlight-filter);
154
- }
155
-
156
- .annotationLayer .linkAnnotation > a:hover{
157
- opacity:0 !important;
158
- background:none !important;
159
- box-shadow:none;
160
- }
161
-
162
- .annotationLayer .popupAnnotation .popup{
163
- outline:calc(1.5px * var(--scale-factor)) solid CanvasText !important;
164
- background-color:ButtonFace !important;
165
- color:ButtonText !important;
166
- }
167
-
168
- .annotationLayer .highlightArea:hover::after{
169
- position:absolute;
170
- top:0;
171
- left:0;
172
- width:100%;
173
- height:100%;
174
- -webkit-backdrop-filter:var(--hcm-highlight-filter);
175
- backdrop-filter:var(--hcm-highlight-filter);
176
- content:"";
177
- pointer-events:none;
178
- }
179
-
180
- .annotationLayer .popupAnnotation.focused .popup{
181
- outline:calc(3px * var(--scale-factor)) solid Highlight !important;
182
- }
183
- }
184
-
185
- .annotationLayer[data-main-rotation="90"] .norotate{
186
- transform:rotate(270deg) translateX(-100%);
187
- }
188
-
189
- .annotationLayer[data-main-rotation="180"] .norotate{
190
- transform:rotate(180deg) translate(-100%, -100%);
191
- }
192
-
193
- .annotationLayer[data-main-rotation="270"] .norotate{
194
- transform:rotate(90deg) translateY(-100%);
195
- }
196
-
197
- .annotationLayer canvas{
198
- position:absolute;
199
- width:100%;
200
- height:100%;
201
- pointer-events:none;
202
- }
203
-
204
- .annotationLayer section{
205
- position:absolute;
206
- text-align:initial;
207
- pointer-events:auto;
208
- box-sizing:border-box;
209
- transform-origin:0 0;
210
- }
211
-
212
- .annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a{
213
- position:absolute;
214
- font-size:1em;
215
- top:0;
216
- left:0;
217
- width:100%;
218
- height:100%;
219
- }
220
-
221
- .annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder)
222
- > a:hover{
223
- opacity:0.2;
224
- background-color:rgb(255 255 0);
225
- box-shadow:0 2px 10px rgb(255 255 0);
226
- }
227
-
228
- .annotationLayer .linkAnnotation.hasBorder:hover{
229
- background-color:rgb(255 255 0 / 0.2);
230
- }
231
-
232
- .annotationLayer .hasBorder{
233
- background-size:100% 100%;
234
- }
235
-
236
- .annotationLayer .textAnnotation img{
237
- position:absolute;
238
- cursor:pointer;
239
- width:100%;
240
- height:100%;
241
- top:0;
242
- left:0;
243
- }
244
-
245
- .annotationLayer .textWidgetAnnotation :is(input, textarea), .annotationLayer .choiceWidgetAnnotation select, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input{
246
- background-image:var(--annotation-unfocused-field-background);
247
- border:2px solid var(--input-unfocused-border-color);
248
- box-sizing:border-box;
249
- font:calc(9px * var(--scale-factor)) sans-serif;
250
- height:100%;
251
- margin:0;
252
- vertical-align:top;
253
- width:100%;
254
- }
255
-
256
- .annotationLayer .textWidgetAnnotation :is(input, textarea):required, .annotationLayer .choiceWidgetAnnotation select:required, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required{
257
- outline:1.5px solid red;
258
- }
259
-
260
- .annotationLayer .choiceWidgetAnnotation select option{
261
- padding:0;
262
- }
263
-
264
- .annotationLayer .buttonWidgetAnnotation.radioButton input{
265
- border-radius:50%;
266
- }
267
-
268
- .annotationLayer .textWidgetAnnotation textarea{
269
- resize:none;
270
- }
271
-
272
- .annotationLayer .textWidgetAnnotation [disabled]:is(input, textarea), .annotationLayer .choiceWidgetAnnotation select[disabled], .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input[disabled]{
273
- background:none;
274
- border:2px solid var(--input-disabled-border-color);
275
- cursor:not-allowed;
276
- }
277
-
278
- .annotationLayer .textWidgetAnnotation :is(input, textarea):hover, .annotationLayer .choiceWidgetAnnotation select:hover, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:hover{
279
- border:2px solid var(--input-hover-border-color);
280
- }
281
-
282
- .annotationLayer .textWidgetAnnotation :is(input, textarea):hover, .annotationLayer .choiceWidgetAnnotation select:hover, .annotationLayer .buttonWidgetAnnotation.checkBox input:hover{
283
- border-radius:2px;
284
- }
285
-
286
- .annotationLayer .textWidgetAnnotation :is(input, textarea):focus, .annotationLayer .choiceWidgetAnnotation select:focus{
287
- background:none;
288
- border:2px solid var(--input-focus-border-color);
289
- border-radius:2px;
290
- outline:var(--input-focus-outline);
291
- }
292
-
293
- .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) :focus{
294
- background-image:none;
295
- background-color:transparent;
296
- }
297
-
298
- .annotationLayer .buttonWidgetAnnotation.checkBox :focus{
299
- border:2px solid var(--input-focus-border-color);
300
- border-radius:2px;
301
- outline:var(--input-focus-outline);
302
- }
303
-
304
- .annotationLayer .buttonWidgetAnnotation.radioButton :focus{
305
- border:2px solid var(--input-focus-border-color);
306
- outline:var(--input-focus-outline);
307
- }
308
-
309
- .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,
310
- .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after,
311
- .annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before{
312
- background-color:CanvasText;
313
- content:"";
314
- display:block;
315
- position:absolute;
316
- }
317
-
318
- .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,
319
- .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after{
320
- height:80%;
321
- left:45%;
322
- width:1px;
323
- }
324
-
325
- .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before{
326
- transform:rotate(45deg);
327
- }
328
-
329
- .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after{
330
- transform:rotate(-45deg);
331
- }
332
-
333
- .annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before{
334
- border-radius:50%;
335
- height:50%;
336
- left:30%;
337
- top:20%;
338
- width:50%;
339
- }
340
-
341
- .annotationLayer .textWidgetAnnotation input.comb{
342
- font-family:monospace;
343
- padding-left:2px;
344
- padding-right:0;
345
- }
346
-
347
- .annotationLayer .textWidgetAnnotation input.comb:focus{
348
- width:103%;
349
- }
350
-
351
- .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input{
352
- -webkit-appearance:none;
353
- -moz-appearance:none;
354
- appearance:none;
355
- }
356
-
357
- .annotationLayer .fileAttachmentAnnotation .popupTriggerArea{
358
- height:100%;
359
- width:100%;
360
- }
361
-
362
- .annotationLayer .popupAnnotation{
363
- position:absolute;
364
- font-size:calc(9px * var(--scale-factor));
365
- pointer-events:none;
366
- width:-moz-max-content;
367
- width:max-content;
368
- max-width:45%;
369
- height:auto;
370
- }
371
-
372
- .annotationLayer .popup{
373
- background-color:rgb(255 255 153);
374
- box-shadow:0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor)) rgb(136 136 136);
375
- border-radius:calc(2px * var(--scale-factor));
376
- outline:1.5px solid rgb(255 255 74);
377
- padding:calc(6px * var(--scale-factor));
378
- cursor:pointer;
379
- font:message-box;
380
- white-space:normal;
381
- word-wrap:break-word;
382
- pointer-events:auto;
383
- }
384
-
385
- .annotationLayer .popupAnnotation.focused .popup{
386
- outline-width:3px;
387
- }
388
-
389
- .annotationLayer .popup *{
390
- font-size:calc(9px * var(--scale-factor));
391
- }
392
-
393
- .annotationLayer .popup > .header{
394
- display:inline-block;
395
- }
396
-
397
- .annotationLayer .popup > .header h1{
398
- display:inline;
399
- }
400
-
401
- .annotationLayer .popup > .header .popupDate{
402
- display:inline-block;
403
- margin-left:calc(5px * var(--scale-factor));
404
- width:-moz-fit-content;
405
- width:fit-content;
406
- }
407
-
408
- .annotationLayer .popupContent{
409
- border-top:1px solid rgb(51 51 51);
410
- margin-top:calc(2px * var(--scale-factor));
411
- padding-top:calc(2px * var(--scale-factor));
412
- }
413
-
414
- .annotationLayer .richText > *{
415
- white-space:pre-wrap;
416
- font-size:calc(9px * var(--scale-factor));
417
- }
418
-
419
- .annotationLayer .popupTriggerArea{
420
- cursor:pointer;
421
- }
422
-
423
- .annotationLayer section svg{
424
- position:absolute;
425
- width:100%;
426
- height:100%;
427
- top:0;
428
- left:0;
429
- }
430
-
431
- .annotationLayer .annotationTextContent{
432
- position:absolute;
433
- width:100%;
434
- height:100%;
435
- opacity:0;
436
- color:transparent;
437
- -webkit-user-select:none;
438
- -moz-user-select:none;
439
- user-select:none;
440
- pointer-events:none;
441
- }
442
-
443
- .annotationLayer .annotationTextContent span{
444
- width:100%;
445
- display:inline-block;
446
- }
447
-
448
- .annotationLayer svg.quadrilateralsContainer{
449
- contain:strict;
450
- width:0;
451
- height:0;
452
- position:absolute;
453
- top:0;
454
- left:0;
455
- z-index:-1;
456
- }
457
-
458
- :root{
459
- --xfa-unfocused-field-background:url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
460
- --xfa-focus-outline:auto;
461
- }
462
-
463
- @media screen and (forced-colors: active){
464
- :root{
465
- --xfa-focus-outline:2px solid CanvasText;
466
- }
467
- .xfaLayer *:required{
468
- outline:1.5px solid selectedItem;
469
- }
470
- }
471
-
472
- .xfaLayer{
473
- background-color:transparent;
474
- }
475
-
476
- .xfaLayer .highlight{
477
- margin:-1px;
478
- padding:1px;
479
- background-color:rgb(239 203 237);
480
- border-radius:4px;
481
- }
482
-
483
- .xfaLayer .highlight.appended{
484
- position:initial;
485
- }
486
-
487
- .xfaLayer .highlight.begin{
488
- border-radius:4px 0 0 4px;
489
- }
490
-
491
- .xfaLayer .highlight.end{
492
- border-radius:0 4px 4px 0;
493
- }
494
-
495
- .xfaLayer .highlight.middle{
496
- border-radius:0;
497
- }
498
-
499
- .xfaLayer .highlight.selected{
500
- background-color:rgb(203 223 203);
501
- }
502
-
503
- .xfaPage{
504
- overflow:hidden;
505
- position:relative;
506
- }
507
-
508
- .xfaContentarea{
509
- position:absolute;
510
- }
511
-
512
- .xfaPrintOnly{
513
- display:none;
514
- }
515
-
516
- .xfaLayer{
517
- position:absolute;
518
- text-align:initial;
519
- top:0;
520
- left:0;
521
- transform-origin:0 0;
522
- line-height:1.2;
523
- }
524
-
525
- .xfaLayer *{
526
- color:inherit;
527
- font:inherit;
528
- font-style:inherit;
529
- font-weight:inherit;
530
- font-kerning:inherit;
531
- letter-spacing:-0.01px;
532
- text-align:inherit;
533
- text-decoration:inherit;
534
- box-sizing:border-box;
535
- background-color:transparent;
536
- padding:0;
537
- margin:0;
538
- pointer-events:auto;
539
- line-height:inherit;
540
- }
541
-
542
- .xfaLayer *:required{
543
- outline:1.5px solid red;
544
- }
545
-
546
- .xfaLayer div,
547
- .xfaLayer svg,
548
- .xfaLayer svg *{
549
- pointer-events:none;
550
- }
551
-
552
- .xfaLayer a{
553
- color:blue;
554
- }
555
-
556
- .xfaRich li{
557
- margin-left:3em;
558
- }
559
-
560
- .xfaFont{
561
- color:black;
562
- font-weight:normal;
563
- font-kerning:none;
564
- font-size:10px;
565
- font-style:normal;
566
- letter-spacing:0;
567
- text-decoration:none;
568
- vertical-align:0;
569
- }
570
-
571
- .xfaCaption{
572
- overflow:hidden;
573
- flex:0 0 auto;
574
- }
575
-
576
- .xfaCaptionForCheckButton{
577
- overflow:hidden;
578
- flex:1 1 auto;
579
- }
580
-
581
- .xfaLabel{
582
- height:100%;
583
- width:100%;
584
- }
585
-
586
- .xfaLeft{
587
- display:flex;
588
- flex-direction:row;
589
- align-items:center;
590
- }
591
-
592
- .xfaRight{
593
- display:flex;
594
- flex-direction:row-reverse;
595
- align-items:center;
596
- }
597
-
598
- :is(.xfaLeft, .xfaRight) > :is(.xfaCaption, .xfaCaptionForCheckButton){
599
- max-height:100%;
600
- }
601
-
602
- .xfaTop{
603
- display:flex;
604
- flex-direction:column;
605
- align-items:flex-start;
606
- }
607
-
608
- .xfaBottom{
609
- display:flex;
610
- flex-direction:column-reverse;
611
- align-items:flex-start;
612
- }
613
-
614
- :is(.xfaTop, .xfaBottom) > :is(.xfaCaption, .xfaCaptionForCheckButton){
615
- width:100%;
616
- }
617
-
618
- .xfaBorder{
619
- background-color:transparent;
620
- position:absolute;
621
- pointer-events:none;
622
- }
623
-
624
- .xfaWrapped{
625
- width:100%;
626
- height:100%;
627
- }
628
-
629
- :is(.xfaTextfield, .xfaSelect):focus{
630
- background-image:none;
631
- background-color:transparent;
632
- outline:var(--xfa-focus-outline);
633
- outline-offset:-1px;
634
- }
635
-
636
- :is(.xfaCheckbox, .xfaRadio):focus{
637
- outline:var(--xfa-focus-outline);
638
- }
639
-
640
- .xfaTextfield,
641
- .xfaSelect{
642
- height:100%;
643
- width:100%;
644
- flex:1 1 auto;
645
- border:none;
646
- resize:none;
647
- background-image:var(--xfa-unfocused-field-background);
648
- }
649
-
650
- .xfaSelect{
651
- padding-inline:2px;
652
- }
653
-
654
- :is(.xfaTop, .xfaBottom) > :is(.xfaTextfield, .xfaSelect){
655
- flex:0 1 auto;
656
- }
657
-
658
- .xfaButton{
659
- cursor:pointer;
660
- width:100%;
661
- height:100%;
662
- border:none;
663
- text-align:center;
664
- }
665
-
666
- .xfaLink{
667
- width:100%;
668
- height:100%;
669
- position:absolute;
670
- top:0;
671
- left:0;
672
- }
673
-
674
- .xfaCheckbox,
675
- .xfaRadio{
676
- width:100%;
677
- height:100%;
678
- flex:0 0 auto;
679
- border:none;
680
- }
681
-
682
- .xfaRich{
683
- white-space:pre-wrap;
684
- width:100%;
685
- height:100%;
686
- }
687
-
688
- .xfaImage{
689
- -o-object-position:left top;
690
- object-position:left top;
691
- -o-object-fit:contain;
692
- object-fit:contain;
693
- width:100%;
694
- height:100%;
695
- }
696
-
697
- .xfaLrTb,
698
- .xfaRlTb,
699
- .xfaTb{
700
- display:flex;
701
- flex-direction:column;
702
- align-items:stretch;
703
- }
704
-
705
- .xfaLr{
706
- display:flex;
707
- flex-direction:row;
708
- align-items:stretch;
709
- }
710
-
711
- .xfaRl{
712
- display:flex;
713
- flex-direction:row-reverse;
714
- align-items:stretch;
715
- }
716
-
717
- .xfaTb > div{
718
- justify-content:left;
719
- }
720
-
721
- .xfaPosition{
722
- position:relative;
723
- }
724
-
725
- .xfaArea{
726
- position:relative;
727
- }
728
-
729
- .xfaValignMiddle{
730
- display:flex;
731
- align-items:center;
732
- }
733
-
734
- .xfaTable{
735
- display:flex;
736
- flex-direction:column;
737
- align-items:stretch;
738
- }
739
-
740
- .xfaTable .xfaRow{
741
- display:flex;
742
- flex-direction:row;
743
- align-items:stretch;
744
- }
745
-
746
- .xfaTable .xfaRlRow{
747
- display:flex;
748
- flex-direction:row-reverse;
749
- align-items:stretch;
750
- flex:1;
751
- }
752
-
753
- .xfaTable .xfaRlRow > div{
754
- flex:1;
755
- }
756
-
757
- :is(.xfaNonInteractive, .xfaDisabled, .xfaReadOnly) :is(input, textarea){
758
- background:initial;
759
- }
760
-
761
- @media print{
762
- .xfaTextfield,
763
- .xfaSelect{
764
- background:transparent;
765
- }
766
-
767
- .xfaSelect{
768
- -webkit-appearance:none;
769
- -moz-appearance:none;
770
- appearance:none;
771
- text-indent:1px;
772
- text-overflow:"";
773
- }
774
- }
775
-
776
- :root{
777
- --outline-width:2px;
778
- --outline-color:#0060df;
779
- --outline-around-width:1px;
780
- --outline-around-color:#f0f0f4;
781
- --hover-outline-around-color:var(--outline-around-color);
782
- --focus-outline:solid var(--outline-width) var(--outline-color);
783
- --unfocus-outline:solid var(--outline-width) transparent;
784
- --focus-outline-around:solid var(--outline-around-width) var(--outline-around-color);
785
- --hover-outline-color:#8f8f9d;
786
- --hover-outline:solid var(--outline-width) var(--hover-outline-color);
787
- --hover-outline-around:solid var(--outline-around-width) var(--hover-outline-around-color);
788
- --freetext-line-height:1.35;
789
- --freetext-padding:2px;
790
- --resizer-bg-color:var(--outline-color);
791
- --resizer-size:6px;
792
- --resizer-shift:calc(
793
- 0px - (var(--outline-width) + var(--resizer-size)) / 2 -
794
- var(--outline-around-width)
795
- );
796
- --editorFreeText-editing-cursor:text;
797
- --editorInk-editing-cursor:pointer;
798
-
799
- --alt-text-opacity:0.8;
800
- --alt-text-add-image:url(images/altText_add.svg);
801
- --alt-text-done-image:url(images/altText_done.svg);
802
- --alt-text-bg-color:rgb(43 42 51 / var(--alt-text-opacity));
803
- --alt-text-fg-color:#fbfbfe;
804
- --alt-text-border-color:var(--alt-text-bg-color);
805
- --alt-text-hover-bg-color:rgb(82 82 94 / var(--alt-text-opacity));
806
- --alt-text-hover-fg-color:var(--alt-text-fg-color);
807
- --alt-text-hover-border-color:var(--alt-text-hover-bg-color);
808
- --alt-text-active-bg-color:rgb(91 91 102 / var(--alt-text-opacity));
809
- --alt-text-active-fg-color:var(--alt-text-fg-color);
810
- --alt-text-active-border-color:var(--alt-text-hover-bg-color);
811
- --alt-text-focus-outline-color:#0060df;
812
- --alt-text-focus-border-color:#f0f0f4;
813
- --alt-text-shadow:0 2px 6px 0 rgb(28 27 34 / 0.5);
814
- }
815
-
816
- @media (-webkit-min-device-pixel-ratio: 1.1), (min-resolution: 1.1dppx){
817
- :root{
818
- }
819
- }
820
-
821
- @media screen and (forced-colors: active){
822
- :root{
823
- --outline-color:CanvasText;
824
- --outline-around-color:ButtonFace;
825
- --resizer-bg-color:ButtonText;
826
- --hover-outline-color:Highlight;
827
- --hover-outline-around-color:SelectedItemText;
828
-
829
- --alt-text-bg-color:Canvas;
830
- --alt-text-fg-color:ButtonText;
831
- --alt-text-border-color:ButtonText;
832
- --alt-text-hover-bg-color:Canvas;
833
- --alt-text-hover-fg-color:SelectedItem;
834
- --alt-text-hover-border-color:SelectedItem;
835
- --alt-text-active-bg-color:ButtonFace;
836
- --alt-text-active-fg-color:SelectedItem;
837
- --alt-text-active-border-color:ButtonText;
838
- --alt-text-focus-outline-color:CanvasText;
839
- --alt-text-focus-border-color:ButtonText;
840
- --alt-text-shadow:none;
841
- --alt-text-opacity:1;
842
- }
843
- }
844
-
845
- [data-editor-rotation="90"]{
846
- transform:rotate(90deg);
847
- }
848
- [data-editor-rotation="180"]{
849
- transform:rotate(180deg);
850
- }
851
- [data-editor-rotation="270"]{
852
- transform:rotate(270deg);
853
- }
854
-
855
- .annotationEditorLayer{
856
- background:transparent;
857
- position:absolute;
858
- inset:0;
859
- font-size:calc(100px * var(--scale-factor));
860
- transform-origin:0 0;
861
- cursor:auto;
862
- z-index:4;
863
- }
864
-
865
- .annotationEditorLayer.waiting{
866
- content:"";
867
- cursor:wait;
868
- position:absolute;
869
- inset:0;
870
- width:100%;
871
- height:100%;
872
- }
873
-
874
- .annotationEditorLayer.disabled{
875
- pointer-events:none;
876
- }
877
-
878
- .annotationEditorLayer.freetextEditing{
879
- cursor:var(--editorFreeText-editing-cursor);
880
- }
881
-
882
- .annotationEditorLayer.inkEditing{
883
- cursor:var(--editorInk-editing-cursor);
884
- }
885
-
886
- .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor){
887
- position:absolute;
888
- background:transparent;
889
- z-index:1;
890
- transform-origin:0 0;
891
- cursor:auto;
892
- max-width:100%;
893
- max-height:100%;
894
- border:var(--unfocus-outline);
895
- }
896
-
897
- .annotationEditorLayer .draggable.selectedEditor:is(.freeTextEditor, .inkEditor, .stampEditor){
898
- cursor:move;
899
- }
900
-
901
- .annotationEditorLayer .selectedEditor:is(.freeTextEditor, .inkEditor, .stampEditor){
902
- border:var(--focus-outline);
903
- outline:var(--focus-outline-around);
904
- }
905
-
906
- .annotationEditorLayer .selectedEditor:is(.freeTextEditor, .inkEditor, .stampEditor)::before{
907
- content:"";
908
- position:absolute;
909
- inset:0;
910
- border:var(--focus-outline-around);
911
- pointer-events:none;
912
- }
913
-
914
- .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor):hover:not(.selectedEditor){
915
- border:var(--hover-outline);
916
- outline:var(--hover-outline-around);
917
- }
918
-
919
- .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor):hover:not(.selectedEditor)::before{
920
- content:"";
921
- position:absolute;
922
- inset:0;
923
- border:var(--focus-outline-around);
924
- }
925
-
926
- .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) .editToolbar{
927
- --editor-toolbar-delete-image:url(images/editor-toolbar-delete.svg);
928
- --editor-toolbar-bg-color:#f0f0f4;
929
- --editor-toolbar-fg-color:#2e2e56;
930
- --editor-toolbar-border-color:#8f8f9d;
931
- --editor-toolbar-hover-bg-color:#e0e0e6;
932
- --editor-toolbar-active-bg-color:#cfcfd8;
933
- --editor-toolbar-focus-outline-color:#0060df;
934
- --editor-toolbar-shadow:0 2px 6px 0 rgb(58 57 68 / 0.2);
935
-
936
- display:flex;
937
- width:-moz-fit-content;
938
- width:fit-content;
939
- height:28px;
940
- flex-direction:column;
941
- justify-content:center;
942
- align-items:center;
943
- cursor:default;
944
-
945
- position:absolute;
946
- inset-inline-end:0;
947
- inset-block-start:calc(100% + 6px);
948
-
949
- border-radius:4px;
950
- background-color:var(--editor-toolbar-bg-color);
951
- border:1px solid var(--editor-toolbar-border-color);
952
- box-shadow:var(--editor-toolbar-shadow);
953
- }
954
-
955
- @media (prefers-color-scheme: dark){
956
-
957
- .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) .editToolbar{
958
- --editor-toolbar-bg-color:#2b2a33;
959
- --editor-toolbar-fg-color:#fbfbfe;
960
- --editor-toolbar-border-color:#2b2a33;
961
- --editor-toolbar-hover-bg-color:#52525e;
962
- --editor-toolbar-active-bg-color:#5b5b66;
963
- --editor-toolbar-focus-outline-color:#0df;
964
- }
965
- }
966
-
967
- @media screen and (forced-colors: active){
968
-
969
- .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) .editToolbar{
970
- --editor-toolbar-bg-color:ButtonFace;
971
- --editor-toolbar-fg-color:ButtonText;
972
- --editor-toolbar-border-color:ButtonText;
973
- --editor-toolbar-hover-bg-color:AccentColor;
974
- --editor-toolbar-active-bg-color:ButtonFace;
975
- --editor-toolbar-focus-outline-color:ButtonBorder;
976
- --editor-toolbar-shadow:none;
977
- }
978
- }
979
-
980
- .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) .editToolbar.hidden{
981
- display:none;
982
- }
983
-
984
- .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) .editToolbar:has(:focus-visible){
985
- border-color:transparent;
986
- }
987
-
988
- .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) .editToolbar .buttons{
989
- display:flex;
990
- padding:0 2px;
991
- justify-content:center;
992
- align-items:center;
993
- gap:4px;
994
- }
995
-
996
- .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) .editToolbar .buttons .delete{
997
- width:24px;
998
- height:24px;
999
- cursor:pointer;
1000
- border:none;
1001
- background-color:transparent;
1002
- }
1003
-
1004
- .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) .editToolbar .buttons .delete::before{
1005
- content:"";
1006
- -webkit-mask-image:var(--editor-toolbar-delete-image);
1007
- mask-image:var(--editor-toolbar-delete-image);
1008
- -webkit-mask-repeat:no-repeat;
1009
- mask-repeat:no-repeat;
1010
- -webkit-mask-position:center;
1011
- mask-position:center;
1012
- display:inline-block;
1013
- background-color:var(--editor-toolbar-fg-color);
1014
- width:100%;
1015
- height:100%;
1016
- }
1017
-
1018
- .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) .editToolbar .buttons > *:hover{
1019
- border-radius:2px;
1020
- background-color:var(--editor-toolbar-hover-bg-color);
1021
- }
1022
-
1023
- .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) .editToolbar .buttons > *:active{
1024
- border-radius:2px;
1025
- background-color:var(--editor-toolbar-active-bg-color);
1026
- }
1027
-
1028
- .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) .editToolbar .buttons > *:focus-visible{
1029
- border-radius:3px;
1030
- outline:2px solid var(--editor-toolbar-focus-outline-color);
1031
- }
1032
-
1033
- .annotationEditorLayer .freeTextEditor{
1034
- padding:calc(var(--freetext-padding) * var(--scale-factor));
1035
- width:auto;
1036
- height:auto;
1037
- touch-action:none;
1038
- }
1039
-
1040
- .annotationEditorLayer .freeTextEditor .internal{
1041
- background:transparent;
1042
- border:none;
1043
- inset:0;
1044
- overflow:visible;
1045
- white-space:nowrap;
1046
- font:10px sans-serif;
1047
- line-height:var(--freetext-line-height);
1048
- -webkit-user-select:none;
1049
- -moz-user-select:none;
1050
- user-select:none;
1051
- }
1052
-
1053
- .annotationEditorLayer .freeTextEditor .overlay{
1054
- position:absolute;
1055
- display:none;
1056
- background:transparent;
1057
- inset:0;
1058
- width:100%;
1059
- height:100%;
1060
- }
1061
-
1062
- .annotationEditorLayer .freeTextEditor .overlay.enabled{
1063
- display:block;
1064
- }
1065
-
1066
- .annotationEditorLayer .freeTextEditor .internal:empty::before{
1067
- content:attr(default-content);
1068
- color:gray;
1069
- }
1070
-
1071
- .annotationEditorLayer .freeTextEditor .internal:focus{
1072
- outline:none;
1073
- -webkit-user-select:auto;
1074
- -moz-user-select:auto;
1075
- user-select:auto;
1076
- }
1077
-
1078
- .annotationEditorLayer .inkEditor{
1079
- width:100%;
1080
- height:100%;
1081
- }
1082
-
1083
- .annotationEditorLayer .inkEditor.editing{
1084
- cursor:inherit;
1085
- }
1086
-
1087
- .annotationEditorLayer .inkEditor .inkEditorCanvas{
1088
- position:absolute;
1089
- inset:0;
1090
- width:100%;
1091
- height:100%;
1092
- touch-action:none;
1093
- }
1094
-
1095
- .annotationEditorLayer .stampEditor{
1096
- width:auto;
1097
- height:auto;
1098
- }
1099
-
1100
- .annotationEditorLayer .stampEditor canvas{
1101
- width:100%;
1102
- height:100%;
1103
- }
1104
-
1105
- .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers{
1106
- position:absolute;
1107
- inset:0;
1108
- }
1109
-
1110
- .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers.hidden{
1111
- display:none;
1112
- }
1113
-
1114
- .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer{
1115
- width:var(--resizer-size);
1116
- height:var(--resizer-size);
1117
- background:content-box var(--resizer-bg-color);
1118
- border:var(--focus-outline-around);
1119
- border-radius:2px;
1120
- position:absolute;
1121
- }
1122
-
1123
- .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.topLeft{
1124
- top:var(--resizer-shift);
1125
- left:var(--resizer-shift);
1126
- }
1127
-
1128
- .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.topMiddle{
1129
- top:var(--resizer-shift);
1130
- left:calc(50% + var(--resizer-shift));
1131
- }
1132
-
1133
- .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.topRight{
1134
- top:var(--resizer-shift);
1135
- right:var(--resizer-shift);
1136
- }
1137
-
1138
- .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.middleRight{
1139
- top:calc(50% + var(--resizer-shift));
1140
- right:var(--resizer-shift);
1141
- }
1142
-
1143
- .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.bottomRight{
1144
- bottom:var(--resizer-shift);
1145
- right:var(--resizer-shift);
1146
- }
1147
-
1148
- .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.bottomMiddle{
1149
- bottom:var(--resizer-shift);
1150
- left:calc(50% + var(--resizer-shift));
1151
- }
1152
-
1153
- .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.bottomLeft{
1154
- bottom:var(--resizer-shift);
1155
- left:var(--resizer-shift);
1156
- }
1157
-
1158
- .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.middleLeft{
1159
- top:calc(50% + var(--resizer-shift));
1160
- left:var(--resizer-shift);
1161
- }
1162
-
1163
- .annotationEditorLayer[data-main-rotation="0"]
1164
- :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.topLeft,
1165
- .annotationEditorLayer[data-main-rotation="90"]
1166
- :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.topLeft,
1167
- .annotationEditorLayer[data-main-rotation="180"]
1168
- :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.topLeft,
1169
- .annotationEditorLayer[data-main-rotation="270"]
1170
- :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.topLeft,
1171
- .annotationEditorLayer[data-main-rotation="0"]
1172
- :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.bottomRight,
1173
- .annotationEditorLayer[data-main-rotation="90"]
1174
- :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.bottomRight,
1175
- .annotationEditorLayer[data-main-rotation="180"]
1176
- :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.bottomRight,
1177
- .annotationEditorLayer[data-main-rotation="270"]
1178
- :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.bottomRight{
1179
- cursor:nwse-resize;
1180
- }
1181
-
1182
- .annotationEditorLayer[data-main-rotation="0"]
1183
- :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.topMiddle,
1184
- .annotationEditorLayer[data-main-rotation="90"]
1185
- :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.topMiddle,
1186
- .annotationEditorLayer[data-main-rotation="180"]
1187
- :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.topMiddle,
1188
- .annotationEditorLayer[data-main-rotation="270"]
1189
- :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.topMiddle,
1190
- .annotationEditorLayer[data-main-rotation="0"]
1191
- :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.bottomMiddle,
1192
- .annotationEditorLayer[data-main-rotation="90"]
1193
- :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.bottomMiddle,
1194
- .annotationEditorLayer[data-main-rotation="180"]
1195
- :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.bottomMiddle,
1196
- .annotationEditorLayer[data-main-rotation="270"]
1197
- :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.bottomMiddle{
1198
- cursor:ns-resize;
1199
- }
1200
-
1201
- .annotationEditorLayer[data-main-rotation="0"]
1202
- :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.topRight,
1203
- .annotationEditorLayer[data-main-rotation="90"]
1204
- :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.topRight,
1205
- .annotationEditorLayer[data-main-rotation="180"]
1206
- :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.topRight,
1207
- .annotationEditorLayer[data-main-rotation="270"]
1208
- :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.topRight,
1209
- .annotationEditorLayer[data-main-rotation="0"]
1210
- :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.bottomLeft,
1211
- .annotationEditorLayer[data-main-rotation="90"]
1212
- :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.bottomLeft,
1213
- .annotationEditorLayer[data-main-rotation="180"]
1214
- :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.bottomLeft,
1215
- .annotationEditorLayer[data-main-rotation="270"]
1216
- :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.bottomLeft{
1217
- cursor:nesw-resize;
1218
- }
1219
-
1220
- .annotationEditorLayer[data-main-rotation="0"]
1221
- :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.middleRight,
1222
- .annotationEditorLayer[data-main-rotation="90"]
1223
- :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.middleRight,
1224
- .annotationEditorLayer[data-main-rotation="180"]
1225
- :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.middleRight,
1226
- .annotationEditorLayer[data-main-rotation="270"]
1227
- :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.middleRight,
1228
- .annotationEditorLayer[data-main-rotation="0"]
1229
- :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.middleLeft,
1230
- .annotationEditorLayer[data-main-rotation="90"]
1231
- :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.middleLeft,
1232
- .annotationEditorLayer[data-main-rotation="180"]
1233
- :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.middleLeft,
1234
- .annotationEditorLayer[data-main-rotation="270"]
1235
- :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.middleLeft{
1236
- cursor:ew-resize;
1237
- }
1238
-
1239
- .annotationEditorLayer[data-main-rotation="0"]
1240
- :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.topLeft,
1241
- .annotationEditorLayer[data-main-rotation="90"]
1242
- :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.topLeft,
1243
- .annotationEditorLayer[data-main-rotation="180"]
1244
- :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.topLeft,
1245
- .annotationEditorLayer[data-main-rotation="270"]
1246
- :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.topLeft,
1247
- .annotationEditorLayer[data-main-rotation="0"]
1248
- :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.bottomRight,
1249
- .annotationEditorLayer[data-main-rotation="90"]
1250
- :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.bottomRight,
1251
- .annotationEditorLayer[data-main-rotation="180"]
1252
- :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.bottomRight,
1253
- .annotationEditorLayer[data-main-rotation="270"]
1254
- :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.bottomRight{
1255
- cursor:nesw-resize;
1256
- }
1257
-
1258
- .annotationEditorLayer[data-main-rotation="0"]
1259
- :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.topMiddle,
1260
- .annotationEditorLayer[data-main-rotation="90"]
1261
- :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.topMiddle,
1262
- .annotationEditorLayer[data-main-rotation="180"]
1263
- :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.topMiddle,
1264
- .annotationEditorLayer[data-main-rotation="270"]
1265
- :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.topMiddle,
1266
- .annotationEditorLayer[data-main-rotation="0"]
1267
- :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.bottomMiddle,
1268
- .annotationEditorLayer[data-main-rotation="90"]
1269
- :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.bottomMiddle,
1270
- .annotationEditorLayer[data-main-rotation="180"]
1271
- :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.bottomMiddle,
1272
- .annotationEditorLayer[data-main-rotation="270"]
1273
- :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.bottomMiddle{
1274
- cursor:ew-resize;
1275
- }
1276
-
1277
- .annotationEditorLayer[data-main-rotation="0"]
1278
- :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.topRight,
1279
- .annotationEditorLayer[data-main-rotation="90"]
1280
- :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.topRight,
1281
- .annotationEditorLayer[data-main-rotation="180"]
1282
- :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.topRight,
1283
- .annotationEditorLayer[data-main-rotation="270"]
1284
- :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.topRight,
1285
- .annotationEditorLayer[data-main-rotation="0"]
1286
- :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.bottomLeft,
1287
- .annotationEditorLayer[data-main-rotation="90"]
1288
- :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.bottomLeft,
1289
- .annotationEditorLayer[data-main-rotation="180"]
1290
- :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.bottomLeft,
1291
- .annotationEditorLayer[data-main-rotation="270"]
1292
- :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.bottomLeft{
1293
- cursor:nwse-resize;
1294
- }
1295
-
1296
- .annotationEditorLayer[data-main-rotation="0"]
1297
- :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.middleRight,
1298
- .annotationEditorLayer[data-main-rotation="90"]
1299
- :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.middleRight,
1300
- .annotationEditorLayer[data-main-rotation="180"]
1301
- :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.middleRight,
1302
- .annotationEditorLayer[data-main-rotation="270"]
1303
- :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.middleRight,
1304
- .annotationEditorLayer[data-main-rotation="0"]
1305
- :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.middleLeft,
1306
- .annotationEditorLayer[data-main-rotation="90"]
1307
- :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.middleLeft,
1308
- .annotationEditorLayer[data-main-rotation="180"]
1309
- :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.middleLeft,
1310
- .annotationEditorLayer[data-main-rotation="270"]
1311
- :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.middleLeft{
1312
- cursor:ns-resize;
1313
- }
1314
-
1315
- .annotationEditorLayer
1316
- :is(
1317
- [data-main-rotation="0"] [data-editor-rotation="90"],
1318
- [data-main-rotation="90"] [data-editor-rotation="0"],
1319
- [data-main-rotation="180"] [data-editor-rotation="270"],
1320
- [data-main-rotation="270"] [data-editor-rotation="180"]
1321
- ) .altText{
1322
- rotate:270deg;
1323
- }
1324
-
1325
- [dir="ltr"] .annotationEditorLayer
1326
- :is(
1327
- [data-main-rotation="0"] [data-editor-rotation="90"],
1328
- [data-main-rotation="90"] [data-editor-rotation="0"],
1329
- [data-main-rotation="180"] [data-editor-rotation="270"],
1330
- [data-main-rotation="270"] [data-editor-rotation="180"]
1331
- ) .altText{
1332
- inset-inline-start:calc(100% - 8px);
1333
- }
1334
-
1335
- [dir="ltr"] .annotationEditorLayer
1336
- :is(
1337
- [data-main-rotation="0"] [data-editor-rotation="90"],
1338
- [data-main-rotation="90"] [data-editor-rotation="0"],
1339
- [data-main-rotation="180"] [data-editor-rotation="270"],
1340
- [data-main-rotation="270"] [data-editor-rotation="180"]
1341
- ) .altText.small{
1342
- inset-inline-start:calc(100% + 8px);
1343
- inset-block-start:100%;
1344
- }
1345
-
1346
- [dir="rtl"] .annotationEditorLayer
1347
- :is(
1348
- [data-main-rotation="0"] [data-editor-rotation="90"],
1349
- [data-main-rotation="90"] [data-editor-rotation="0"],
1350
- [data-main-rotation="180"] [data-editor-rotation="270"],
1351
- [data-main-rotation="270"] [data-editor-rotation="180"]
1352
- ) .altText{
1353
- inset-block-end:calc(100% - 8px);
1354
- }
1355
-
1356
- [dir="rtl"] .annotationEditorLayer
1357
- :is(
1358
- [data-main-rotation="0"] [data-editor-rotation="90"],
1359
- [data-main-rotation="90"] [data-editor-rotation="0"],
1360
- [data-main-rotation="180"] [data-editor-rotation="270"],
1361
- [data-main-rotation="270"] [data-editor-rotation="180"]
1362
- ) .altText.small{
1363
- inset-inline-start:-8px;
1364
- inset-block-start:0;
1365
- }
1366
-
1367
- .annotationEditorLayer
1368
- :is(
1369
- [data-main-rotation="0"] [data-editor-rotation="90"],
1370
- [data-main-rotation="90"] [data-editor-rotation="0"],
1371
- [data-main-rotation="180"] [data-editor-rotation="270"],
1372
- [data-main-rotation="270"] [data-editor-rotation="180"]
1373
- ) .editToolbar{
1374
- rotate:270deg;
1375
- }
1376
-
1377
- [dir="ltr"] .annotationEditorLayer
1378
- :is(
1379
- [data-main-rotation="0"] [data-editor-rotation="90"],
1380
- [data-main-rotation="90"] [data-editor-rotation="0"],
1381
- [data-main-rotation="180"] [data-editor-rotation="270"],
1382
- [data-main-rotation="270"] [data-editor-rotation="180"]
1383
- ) .editToolbar{
1384
- inset-inline-start:calc(100% + 6px);
1385
- inset-block-start:0;
1386
- }
1387
-
1388
- [dir="rtl"] .annotationEditorLayer
1389
- :is(
1390
- [data-main-rotation="0"] [data-editor-rotation="90"],
1391
- [data-main-rotation="90"] [data-editor-rotation="0"],
1392
- [data-main-rotation="180"] [data-editor-rotation="270"],
1393
- [data-main-rotation="270"] [data-editor-rotation="180"]
1394
- ) .editToolbar{
1395
- inset-inline-end:calc(100% + 6px);
1396
- inset-block-end:0;
1397
- inset-block-start:unset;
1398
- }
1399
-
1400
- .annotationEditorLayer
1401
- :is(
1402
- [data-main-rotation="0"] [data-editor-rotation="180"],
1403
- [data-main-rotation="90"] [data-editor-rotation="90"],
1404
- [data-main-rotation="180"] [data-editor-rotation="0"],
1405
- [data-main-rotation="270"] [data-editor-rotation="270"]
1406
- ) .altText{
1407
- rotate:180deg;
1408
-
1409
- inset-block-end:calc(100% - 8px);
1410
- inset-inline-start:calc(100% - 8px);
1411
- }
1412
-
1413
- .annotationEditorLayer
1414
- :is(
1415
- [data-main-rotation="0"] [data-editor-rotation="180"],
1416
- [data-main-rotation="90"] [data-editor-rotation="90"],
1417
- [data-main-rotation="180"] [data-editor-rotation="0"],
1418
- [data-main-rotation="270"] [data-editor-rotation="270"]
1419
- ) .altText.small{
1420
- inset-inline-start:100%;
1421
- inset-block-start:-8px;
1422
- }
1423
-
1424
- .annotationEditorLayer
1425
- :is(
1426
- [data-main-rotation="0"] [data-editor-rotation="180"],
1427
- [data-main-rotation="90"] [data-editor-rotation="90"],
1428
- [data-main-rotation="180"] [data-editor-rotation="0"],
1429
- [data-main-rotation="270"] [data-editor-rotation="270"]
1430
- ) .editToolbar{
1431
- rotate:180deg;
1432
- inset-inline-start:0;
1433
- inset-block-end:calc(100% + 6px);
1434
- inset-block-start:unset;
1435
- }
1436
-
1437
- .annotationEditorLayer
1438
- :is(
1439
- [data-main-rotation="0"] [data-editor-rotation="270"],
1440
- [data-main-rotation="90"] [data-editor-rotation="180"],
1441
- [data-main-rotation="180"] [data-editor-rotation="90"],
1442
- [data-main-rotation="270"] [data-editor-rotation="0"]
1443
- ) .altText{
1444
- rotate:90deg;
1445
- }
1446
-
1447
- [dir="ltr"] .annotationEditorLayer
1448
- :is(
1449
- [data-main-rotation="0"] [data-editor-rotation="270"],
1450
- [data-main-rotation="90"] [data-editor-rotation="180"],
1451
- [data-main-rotation="180"] [data-editor-rotation="90"],
1452
- [data-main-rotation="270"] [data-editor-rotation="0"]
1453
- ) .altText{
1454
- inset-block-end:calc(100% - 8px);
1455
- }
1456
-
1457
- [dir="ltr"] .annotationEditorLayer
1458
- :is(
1459
- [data-main-rotation="0"] [data-editor-rotation="270"],
1460
- [data-main-rotation="90"] [data-editor-rotation="180"],
1461
- [data-main-rotation="180"] [data-editor-rotation="90"],
1462
- [data-main-rotation="270"] [data-editor-rotation="0"]
1463
- ) .altText.small{
1464
- inset-inline-start:-8px;
1465
- inset-block-start:0;
1466
- }
1467
-
1468
- [dir="rtl"] .annotationEditorLayer
1469
- :is(
1470
- [data-main-rotation="0"] [data-editor-rotation="270"],
1471
- [data-main-rotation="90"] [data-editor-rotation="180"],
1472
- [data-main-rotation="180"] [data-editor-rotation="90"],
1473
- [data-main-rotation="270"] [data-editor-rotation="0"]
1474
- ) .altText{
1475
- inset-inline-start:calc(100% - 8px);
1476
- }
1477
-
1478
- [dir="rtl"] .annotationEditorLayer
1479
- :is(
1480
- [data-main-rotation="0"] [data-editor-rotation="270"],
1481
- [data-main-rotation="90"] [data-editor-rotation="180"],
1482
- [data-main-rotation="180"] [data-editor-rotation="90"],
1483
- [data-main-rotation="270"] [data-editor-rotation="0"]
1484
- ) .altText.small{
1485
- inset-inline-start:calc(100% + 8px);
1486
- inset-block-start:100%;
1487
- }
1488
-
1489
- .annotationEditorLayer
1490
- :is(
1491
- [data-main-rotation="0"] [data-editor-rotation="270"],
1492
- [data-main-rotation="90"] [data-editor-rotation="180"],
1493
- [data-main-rotation="180"] [data-editor-rotation="90"],
1494
- [data-main-rotation="270"] [data-editor-rotation="0"]
1495
- ) .editToolbar{
1496
- rotate:90deg;
1497
- }
1498
-
1499
- [dir="ltr"] .annotationEditorLayer
1500
- :is(
1501
- [data-main-rotation="0"] [data-editor-rotation="270"],
1502
- [data-main-rotation="90"] [data-editor-rotation="180"],
1503
- [data-main-rotation="180"] [data-editor-rotation="90"],
1504
- [data-main-rotation="270"] [data-editor-rotation="0"]
1505
- ) .editToolbar{
1506
- inset-inline-end:calc(100% + 6px);
1507
- inset-block-end:0;
1508
- inset-block-start:unset;
1509
- }
1510
-
1511
- [dir="rtl"] .annotationEditorLayer
1512
- :is(
1513
- [data-main-rotation="0"] [data-editor-rotation="270"],
1514
- [data-main-rotation="90"] [data-editor-rotation="180"],
1515
- [data-main-rotation="180"] [data-editor-rotation="90"],
1516
- [data-main-rotation="270"] [data-editor-rotation="0"]
1517
- ) .editToolbar{
1518
- inset-inline-start:calc(100% + 6px);
1519
- inset-block-start:0;
1520
- }
1521
-
1522
- .altText{
1523
- display:flex;
1524
- align-items:center;
1525
- justify-content:center;
1526
- padding-inline:4px;
1527
- width:-moz-max-content;
1528
- width:max-content;
1529
- height:24px;
1530
- min-width:88px;
1531
- z-index:1;
1532
- pointer-events:all;
1533
-
1534
- color:var(--alt-text-fg-color);
1535
- font:menu;
1536
- font-size:12px;
1537
- border-radius:4px;
1538
- border:1px solid var(--alt-text-border-color);
1539
- background-color:var(--alt-text-bg-color);
1540
- box-shadow:var(--alt-text-shadow);
1541
-
1542
- position:absolute;
1543
- inset-block-end:8px;
1544
- inset-inline-start:8px;
1545
- }
1546
-
1547
- .altText:disabled{
1548
- pointer-events:none;
1549
- }
1550
-
1551
- [dir="ltr"] .altText{
1552
- transform-origin:0 100%;
1553
- }
1554
-
1555
- [dir="rtl"] .altText{
1556
- transform-origin:100% 100%;
1557
- }
1558
-
1559
- .altText.small{
1560
-
1561
- inset-block-end:unset;
1562
- inset-inline-start:0;
1563
- inset-block-start:calc(100% + 8px);
1564
- }
1565
-
1566
- [dir="ltr"] .altText.small{
1567
- transform-origin:0 0;
1568
- }
1569
-
1570
- [dir="rtl"] .altText.small{
1571
- transform-origin:100% 0;
1572
- }
1573
-
1574
- .altText:hover{
1575
- background-color:var(--alt-text-hover-bg-color);
1576
- border-color:var(--alt-text-hover-border-color);
1577
- color:var(--alt-text-hover-fg-color);
1578
- cursor:pointer;
1579
- }
1580
-
1581
- .altText:hover::before{
1582
- background-color:var(--alt-text-hover-fg-color);
1583
- }
1584
-
1585
- .altText:active{
1586
- background-color:var(--alt-text-active-bg-color);
1587
- border-color:var(--alt-text-active-border-color);
1588
- color:var(--alt-text-active-fg-color);
1589
- }
1590
-
1591
- .altText:active::before{
1592
- background-color:var(--alt-text-active-fg-color);
1593
- }
1594
-
1595
- .altText:focus-visible{
1596
- outline:2px solid var(--alt-text-focus-outline-color);
1597
- border-color:var(--alt-text-focus-border-color);
1598
- }
1599
-
1600
- .altText::before{
1601
- content:"";
1602
- -webkit-mask-image:var(--alt-text-add-image);
1603
- mask-image:var(--alt-text-add-image);
1604
- -webkit-mask-repeat:no-repeat;
1605
- mask-repeat:no-repeat;
1606
- -webkit-mask-position:center;
1607
- mask-position:center;
1608
- display:inline-block;
1609
- width:12px;
1610
- height:13px;
1611
- background-color:var(--alt-text-fg-color);
1612
- margin-inline-end:4px;
1613
- }
1614
-
1615
- .altText.done::before{
1616
- -webkit-mask-image:var(--alt-text-done-image);
1617
- mask-image:var(--alt-text-done-image);
1618
- }
1619
-
1620
- .altText .tooltip{
1621
- display:none;
1622
- }
1623
-
1624
- .altText .tooltip.show{
1625
- --alt-text-tooltip-bg:#f0f0f4;
1626
- --alt-text-tooltip-fg:#15141a;
1627
- --alt-text-tooltip-border:#8f8f9d;
1628
- --alt-text-tooltip-shadow:0px 2px 6px 0px rgb(58 57 68 / 0.2);
1629
-
1630
- display:inline-flex;
1631
- flex-direction:column;
1632
- align-items:center;
1633
- justify-content:center;
1634
- position:absolute;
1635
- top:calc(100% + 2px);
1636
- inset-inline-start:0;
1637
- padding-block:2px 3px;
1638
- padding-inline:3px;
1639
- max-width:300px;
1640
- width:-moz-max-content;
1641
- width:max-content;
1642
- height:auto;
1643
- font-size:12px;
1644
-
1645
- border:0.5px solid var(--alt-text-tooltip-border);
1646
- background:var(--alt-text-tooltip-bg);
1647
- box-shadow:var(--alt-text-tooltip-shadow);
1648
- color:var(--alt-text-tooltip-fg);
1649
-
1650
- pointer-events:none;
1651
- }
1652
-
1653
- @media (prefers-color-scheme: dark){
1654
-
1655
- .altText .tooltip.show{
1656
- --alt-text-tooltip-bg:#1c1b22;
1657
- --alt-text-tooltip-fg:#fbfbfe;
1658
- --alt-text-tooltip-shadow:0px 2px 6px 0px #15141a;
1659
- }
1660
- }
1661
-
1662
- @media screen and (forced-colors: active){
1663
-
1664
- .altText .tooltip.show{
1665
- --alt-text-tooltip-bg:Canvas;
1666
- --alt-text-tooltip-fg:CanvasText;
1667
- --alt-text-tooltip-border:CanvasText;
1668
- --alt-text-tooltip-shadow:none;
1669
- }
1670
- }
1671
-
1672
- #altTextDialog{
1673
- --dialog-bg-color:white;
1674
- --dialog-border-color:white;
1675
- --dialog-shadow:0 2px 14px 0 rgb(58 57 68 / 0.2);
1676
- --text-primary-color:#15141a;
1677
- --text-secondary-color:#5b5b66;
1678
- --hover-filter:brightness(0.9);
1679
- --focus-ring-color:#0060df;
1680
- --focus-ring-outline:2px solid var(--focus-ring-color);
1681
-
1682
- --textarea-border-color:#8f8f9d;
1683
- --textarea-bg-color:white;
1684
- --textarea-fg-color:var(--text-secondary-color);
1685
-
1686
- --radio-bg-color:#f0f0f4;
1687
- --radio-checked-bg-color:#fbfbfe;
1688
- --radio-border-color:#8f8f9d;
1689
- --radio-checked-border-color:#0060df;
1690
-
1691
- --button-cancel-bg-color:#f0f0f4;
1692
- --button-cancel-fg-color:var(--text-primary-color);
1693
- --button-cancel-border-color:var(--button-cancel-bg-color);
1694
- --button-cancel-hover-bg-color:var(--button-cancel-bg-color);
1695
- --button-cancel-hover-fg-color:var(--button-cancel-fg-color);
1696
- --button-cancel-hover-border-color:var(--button-cancel-hover-bg-color);
1697
-
1698
- --button-save-bg-color:#0060df;
1699
- --button-save-fg-color:#fbfbfe;
1700
- --button-save-hover-bg-color:var(--button-save-bg-color);
1701
- --button-save-hover-fg-color:var(--button-save-fg-color);
1702
- --button-save-hover-border-color:var(--button-save-hover-bg-color);
1703
-
1704
- font:message-box;
1705
- font-size:13px;
1706
- font-weight:400;
1707
- line-height:150%;
1708
- border-radius:4px;
1709
- padding:12px 16px;
1710
- border:1px solid var(--dialog-border-color);
1711
- background:var(--dialog-bg-color);
1712
- color:var(--text-primary-color);
1713
- box-shadow:var(--dialog-shadow);
1714
- }
1715
-
1716
- @media (prefers-color-scheme: dark){
1717
-
1718
- #altTextDialog{
1719
- --dialog-bg-color:#1c1b22;
1720
- --dialog-border-color:#1c1b22;
1721
- --dialog-shadow:0 2px 14px 0 #15141a;
1722
- --text-primary-color:#fbfbfe;
1723
- --text-secondary-color:#cfcfd8;
1724
- --focus-ring-color:#0df;
1725
- --hover-filter:brightness(1.4);
1726
-
1727
- --textarea-bg-color:#42414d;
1728
-
1729
- --radio-bg-color:#2b2a33;
1730
- --radio-checked-bg-color:#15141a;
1731
- --radio-checked-border-color:#0df;
1732
-
1733
- --button-cancel-bg-color:#2b2a33;
1734
- --button-save-bg-color:#0df;
1735
- --button-save-fg-color:#15141a;
1736
- }
1737
- }
1738
-
1739
- @media screen and (forced-colors: active){
1740
-
1741
- #altTextDialog{
1742
- --dialog-bg-color:Canvas;
1743
- --dialog-border-color:CanvasText;
1744
- --dialog-shadow:none;
1745
- --text-primary-color:CanvasText;
1746
- --text-secondary-color:CanvasText;
1747
- --hover-filter:none;
1748
- --focus-ring-color:ButtonBorder;
1749
-
1750
- --textarea-border-color:ButtonBorder;
1751
- --textarea-bg-color:Field;
1752
- --textarea-fg-color:ButtonText;
1753
-
1754
- --radio-bg-color:ButtonFace;
1755
- --radio-checked-bg-color:ButtonFace;
1756
- --radio-border-color:ButtonText;
1757
- --radio-checked-border-color:ButtonText;
1758
-
1759
- --button-cancel-bg-color:ButtonFace;
1760
- --button-cancel-fg-color:ButtonText;
1761
- --button-cancel-border-color:ButtonText;
1762
- --button-cancel-hover-bg-color:AccentColor;
1763
- --button-cancel-hover-fg-color:AccentColorText;
1764
-
1765
- --button-save-bg-color:ButtonText;
1766
- --button-save-fg-color:ButtonFace;
1767
- --button-save-hover-bg-color:AccentColor;
1768
- --button-save-hover-fg-color:AccentColorText;
1769
- }
1770
- }
1771
-
1772
- #altTextDialog::backdrop{
1773
- -webkit-mask:url(#alttext-manager-mask);
1774
- mask:url(#alttext-manager-mask);
1775
- }
1776
-
1777
- #altTextDialog.positioned{
1778
- margin:0;
1779
- }
1780
-
1781
- #altTextDialog #altTextContainer{
1782
- width:300px;
1783
- height:-moz-fit-content;
1784
- height:fit-content;
1785
- display:inline-flex;
1786
- flex-direction:column;
1787
- align-items:flex-start;
1788
- gap:16px;
1789
- }
1790
-
1791
- #altTextDialog #altTextContainer *:focus-visible{
1792
- outline:var(--focus-ring-outline);
1793
- outline-offset:2px;
1794
- }
1795
-
1796
- #altTextDialog #altTextContainer .radio{
1797
- display:flex;
1798
- flex-direction:column;
1799
- align-items:flex-start;
1800
- gap:4px;
1801
- }
1802
-
1803
- #altTextDialog #altTextContainer .radio .radioButton{
1804
- display:flex;
1805
- gap:8px;
1806
- align-self:stretch;
1807
- align-items:center;
1808
- }
1809
-
1810
- #altTextDialog #altTextContainer .radio .radioButton input{
1811
- -webkit-appearance:none;
1812
- -moz-appearance:none;
1813
- appearance:none;
1814
- box-sizing:border-box;
1815
- width:16px;
1816
- height:16px;
1817
- border-radius:50%;
1818
- background-color:var(--radio-bg-color);
1819
- border:1px solid var(--radio-border-color);
1820
- }
1821
-
1822
- #altTextDialog #altTextContainer .radio .radioButton input:hover{
1823
- filter:var(--hover-filter);
1824
- }
1825
-
1826
- #altTextDialog #altTextContainer .radio .radioButton input:checked{
1827
- background-color:var(--radio-checked-bg-color);
1828
- border:4px solid var(--radio-checked-border-color);
1829
- }
1830
-
1831
- #altTextDialog #altTextContainer .radio .radioLabel{
1832
- display:flex;
1833
- padding-inline-start:24px;
1834
- align-items:flex-start;
1835
- gap:10px;
1836
- align-self:stretch;
1837
- }
1838
-
1839
- #altTextDialog #altTextContainer .radio .radioLabel span{
1840
- flex:1 0 0;
1841
- font-size:11px;
1842
- color:var(--text-secondary-color);
1843
- }
1844
-
1845
- #altTextDialog #altTextContainer #overallDescription{
1846
- display:flex;
1847
- flex-direction:column;
1848
- align-items:flex-start;
1849
- gap:4px;
1850
- align-self:stretch;
1851
- }
1852
-
1853
- #altTextDialog #altTextContainer #overallDescription span{
1854
- align-self:stretch;
1855
- }
1856
-
1857
- #altTextDialog #altTextContainer #overallDescription .title{
1858
- font-size:13px;
1859
- font-style:normal;
1860
- font-weight:590;
1861
- }
1862
-
1863
- #altTextDialog #altTextContainer #addDescription{
1864
- display:flex;
1865
- flex-direction:column;
1866
- align-items:stretch;
1867
- gap:8px;
1868
- }
1869
-
1870
- #altTextDialog #altTextContainer #addDescription .descriptionArea{
1871
- flex:1;
1872
- padding-inline:24px 10px;
1873
- }
1874
-
1875
- #altTextDialog #altTextContainer #addDescription .descriptionArea textarea{
1876
- font:inherit;
1877
- width:100%;
1878
- min-height:75px;
1879
- padding:8px;
1880
- resize:none;
1881
- margin:0;
1882
- box-sizing:border-box;
1883
- border-radius:4px;
1884
- border:1px solid var(--textarea-border-color);
1885
- background:var(--textarea-bg-color);
1886
- color:var(--textarea-fg-color);
1887
- }
1888
-
1889
- #altTextDialog #altTextContainer #addDescription .descriptionArea textarea:focus{
1890
- outline-offset:0;
1891
- border-color:transparent;
1892
- }
1893
-
1894
- #altTextDialog #altTextContainer #addDescription .descriptionArea textarea:disabled{
1895
- pointer-events:none;
1896
- opacity:0.4;
1897
- }
1898
-
1899
- #altTextDialog #altTextContainer #buttons{
1900
- display:flex;
1901
- justify-content:flex-end;
1902
- align-items:flex-start;
1903
- gap:8px;
1904
- align-self:stretch;
1905
- }
1906
-
1907
- #altTextDialog #altTextContainer #buttons button{
1908
- border-radius:4px;
1909
- border:1px solid;
1910
- font:menu;
1911
- font-weight:600;
1912
- padding:4px 16px;
1913
- width:auto;
1914
- height:32px;
1915
- }
1916
-
1917
- #altTextDialog #altTextContainer #buttons button:hover{
1918
- cursor:pointer;
1919
- filter:var(--hover-filter);
1920
- }
1921
-
1922
- #altTextDialog #altTextContainer #buttons button#altTextCancel{
1923
- color:var(--button-cancel-fg-color);
1924
- background-color:var(--button-cancel-bg-color);
1925
- border-color:var(--button-cancel-border-color);
1926
- }
1927
-
1928
- #altTextDialog #altTextContainer #buttons button#altTextCancel:hover{
1929
- color:var(--button-cancel-hover-fg-color);
1930
- background-color:var(--button-cancel-hover-bg-color);
1931
- border-color:var(--button-cancel-hover-border-color);
1932
- }
1933
-
1934
- #altTextDialog #altTextContainer #buttons button#altTextSave{
1935
- color:var(--button-save-hover-fg-color);
1936
- background-color:var(--button-save-hover-bg-color);
1937
- border-color:var(--button-save-hover-border-color);
1938
- opacity:1;
1939
- }
1940
-
1941
- #altTextDialog #altTextContainer #buttons button#altTextSave:hover{
1942
- color:var(--button-save-hover-fg-color);
1943
- background-color:var(--button-save-hover-bg-color);
1944
- border-color:var(--button-save-hover-border-color);
1945
- }
1946
-
1947
- :root{
1948
- --viewer-container-height:0;
1949
- --pdfViewer-padding-bottom:0;
1950
- --page-margin:1px auto -8px;
1951
- --page-border:9px solid transparent;
1952
- --spreadHorizontalWrapped-margin-LR:-3.5px;
1953
- --loading-icon-delay:400ms;
1954
- }
1955
-
1956
- @media screen and (forced-colors: active){
1957
- :root{
1958
- --pdfViewer-padding-bottom:9px;
1959
- --page-margin:8px auto -1px;
1960
- --page-border:1px solid CanvasText;
1961
- --spreadHorizontalWrapped-margin-LR:3.5px;
1962
- }
1963
- }
1964
-
1965
- [data-main-rotation="90"]{
1966
- transform:rotate(90deg) translateY(-100%);
1967
- }
1968
- [data-main-rotation="180"]{
1969
- transform:rotate(180deg) translate(-100%, -100%);
1970
- }
1971
- [data-main-rotation="270"]{
1972
- transform:rotate(270deg) translateX(-100%);
1973
- }
1974
-
1975
- #hiddenCopyElement{
1976
- position:absolute;
1977
- top:0;
1978
- left:0;
1979
- width:0;
1980
- height:0;
1981
- display:none;
1982
- }
1983
-
1984
- .pdfViewer{
1985
- --scale-factor:1;
1986
-
1987
- padding-bottom:var(--pdfViewer-padding-bottom);
1988
- }
1989
-
1990
- .pdfViewer .canvasWrapper{
1991
- overflow:hidden;
1992
- width:100%;
1993
- height:100%;
1994
- z-index:1;
1995
- }
1996
-
1997
- .pdfViewer .page{
1998
- direction:ltr;
1999
- width:816px;
2000
- height:1056px;
2001
- margin:var(--page-margin);
2002
- position:relative;
2003
- overflow:visible;
2004
- border:var(--page-border);
2005
- background-clip:content-box;
2006
- background-color:rgb(255 255 255);
2007
- }
2008
-
2009
- .pdfViewer .dummyPage{
2010
- position:relative;
2011
- width:0;
2012
- height:var(--viewer-container-height);
2013
- }
2014
-
2015
- .pdfViewer.noUserSelect{
2016
- -webkit-user-select:none;
2017
- -moz-user-select:none;
2018
- user-select:none;
2019
- }
2020
-
2021
- .pdfViewer.removePageBorders .page{
2022
- margin:0 auto 10px;
2023
- border:none;
2024
- }
2025
-
2026
- .pdfViewer.singlePageView{
2027
- display:inline-block;
2028
- }
2029
-
2030
- .pdfViewer.singlePageView .page{
2031
- margin:0;
2032
- border:none;
2033
- }
2034
-
2035
- .pdfViewer:is(.scrollHorizontal, .scrollWrapped),
2036
- .spread{
2037
- margin-inline:3.5px;
2038
- text-align:center;
2039
- }
2040
-
2041
- .pdfViewer.scrollHorizontal,
2042
- .spread{
2043
- white-space:nowrap;
2044
- }
2045
-
2046
- .pdfViewer.removePageBorders,
2047
- .pdfViewer:is(.scrollHorizontal, .scrollWrapped) .spread{
2048
- margin-inline:0;
2049
- }
2050
-
2051
- .spread :is(.page, .dummyPage),
2052
- .pdfViewer:is(.scrollHorizontal, .scrollWrapped) :is(.page, .spread){
2053
- display:inline-block;
2054
- vertical-align:middle;
2055
- }
2056
-
2057
- .spread .page,
2058
- .pdfViewer:is(.scrollHorizontal, .scrollWrapped) .page{
2059
- margin-inline:var(--spreadHorizontalWrapped-margin-LR);
2060
- }
2061
-
2062
- .pdfViewer.removePageBorders .spread .page,
2063
- .pdfViewer.removePageBorders:is(.scrollHorizontal, .scrollWrapped) .page{
2064
- margin-inline:5px;
2065
- }
2066
-
2067
- .pdfViewer .page canvas{
2068
- margin:0;
2069
- display:block;
2070
- }
2071
-
2072
- .pdfViewer .page canvas .structTree{
2073
- contain:strict;
2074
- }
2075
-
2076
- .pdfViewer .page canvas[hidden]{
2077
- display:none;
2078
- }
2079
-
2080
- .pdfViewer .page canvas[zooming]{
2081
- width:100%;
2082
- height:100%;
2083
- }
2084
-
2085
- .pdfViewer .page.loadingIcon::after{
2086
- position:absolute;
2087
- top:0;
2088
- left:0;
2089
- content:"";
2090
- width:100%;
2091
- height:100%;
2092
- background:url("images/loading-icon.gif") center no-repeat;
2093
- display:none;
2094
- transition-property:display;
2095
- transition-delay:var(--loading-icon-delay);
2096
- z-index:5;
2097
- contain:strict;
2098
- }
2099
-
2100
- .pdfViewer .page.loading::after{
2101
- display:block;
2102
- }
2103
-
2104
- .pdfViewer .page:not(.loading)::after{
2105
- transition-property:none;
2106
- display:none;
2107
- }
2108
-
2109
- .pdfPresentationMode .pdfViewer{
2110
- padding-bottom:0;
2111
- }
2112
-
2113
- .pdfPresentationMode .spread{
2114
- margin:0;
2115
- }
2116
-
2117
- .pdfPresentationMode .pdfViewer .page{
2118
- margin:0 auto;
2119
- border:2px solid transparent;
2120
- }