@hmcts/media-viewer 4.0.8 → 4.0.9

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 (147) hide show
  1. package/assets/build/pdf.min.mjs +2 -2
  2. package/assets/build/pdf.mjs +6430 -5325
  3. package/assets/build/pdf.mjs.map +1 -1
  4. package/assets/build/pdf.sandbox.min.mjs +2 -2
  5. package/assets/build/pdf.sandbox.mjs +10 -7
  6. package/assets/build/pdf.sandbox.mjs.map +1 -1
  7. package/assets/build/pdf.worker.min.mjs +2 -2
  8. package/assets/build/pdf.worker.mjs +1432 -690
  9. package/assets/build/pdf.worker.mjs.map +1 -1
  10. package/assets/pdfjs/images/altText_add.svg +3 -0
  11. package/assets/pdfjs/images/altText_add.svg:Zone.Identifier +0 -0
  12. package/assets/pdfjs/images/altText_disclaimer.svg +3 -0
  13. package/assets/pdfjs/images/altText_disclaimer.svg:Zone.Identifier +0 -0
  14. package/assets/pdfjs/images/altText_done.svg +3 -0
  15. package/assets/pdfjs/images/altText_done.svg:Zone.Identifier +0 -0
  16. package/assets/pdfjs/images/altText_spinner.svg +30 -0
  17. package/assets/pdfjs/images/altText_spinner.svg:Zone.Identifier +0 -0
  18. package/assets/pdfjs/images/altText_warning.svg +3 -0
  19. package/assets/pdfjs/images/altText_warning.svg:Zone.Identifier +0 -0
  20. package/assets/pdfjs/images/annotation-check.svg +11 -11
  21. package/assets/pdfjs/images/annotation-check.svg:Zone.Identifier +0 -0
  22. package/assets/pdfjs/images/annotation-comment.svg +16 -16
  23. package/assets/pdfjs/images/annotation-comment.svg:Zone.Identifier +0 -0
  24. package/assets/pdfjs/images/annotation-help.svg +26 -26
  25. package/assets/pdfjs/images/annotation-help.svg:Zone.Identifier +0 -0
  26. package/assets/pdfjs/images/annotation-insert.svg +10 -10
  27. package/assets/pdfjs/images/annotation-insert.svg:Zone.Identifier +0 -0
  28. package/assets/pdfjs/images/annotation-key.svg +11 -11
  29. package/assets/pdfjs/images/annotation-key.svg:Zone.Identifier +0 -0
  30. package/assets/pdfjs/images/annotation-newparagraph.svg +11 -11
  31. package/assets/pdfjs/images/annotation-newparagraph.svg:Zone.Identifier +0 -0
  32. package/assets/pdfjs/images/annotation-noicon.svg +7 -7
  33. package/assets/pdfjs/images/annotation-noicon.svg:Zone.Identifier +0 -0
  34. package/assets/pdfjs/images/annotation-note.svg +42 -42
  35. package/assets/pdfjs/images/annotation-note.svg:Zone.Identifier +0 -0
  36. package/assets/pdfjs/images/annotation-paperclip.svg +6 -0
  37. package/assets/pdfjs/images/annotation-paperclip.svg:Zone.Identifier +0 -0
  38. package/assets/pdfjs/images/annotation-paragraph.svg +16 -16
  39. package/assets/pdfjs/images/annotation-paragraph.svg:Zone.Identifier +0 -0
  40. package/assets/pdfjs/images/annotation-pushpin.svg +7 -0
  41. package/assets/pdfjs/images/annotation-pushpin.svg:Zone.Identifier +0 -0
  42. package/assets/pdfjs/images/cursor-editorFreeHighlight.svg +6 -0
  43. package/assets/pdfjs/images/cursor-editorFreeHighlight.svg:Zone.Identifier +0 -0
  44. package/assets/pdfjs/images/cursor-editorFreeText.svg +3 -0
  45. package/assets/pdfjs/images/cursor-editorFreeText.svg:Zone.Identifier +0 -0
  46. package/assets/pdfjs/images/cursor-editorInk.svg +4 -0
  47. package/assets/pdfjs/images/cursor-editorInk.svg:Zone.Identifier +0 -0
  48. package/assets/pdfjs/images/cursor-editorTextHighlight.svg +8 -0
  49. package/assets/pdfjs/images/cursor-editorTextHighlight.svg:Zone.Identifier +0 -0
  50. package/assets/pdfjs/images/editor-toolbar-delete.svg +5 -0
  51. package/assets/pdfjs/images/editor-toolbar-delete.svg:Zone.Identifier +0 -0
  52. package/assets/pdfjs/images/loading-icon.gif:Zone.Identifier +0 -0
  53. package/assets/pdfjs/images/messageBar_closingButton.svg +3 -0
  54. package/assets/pdfjs/images/messageBar_closingButton.svg:Zone.Identifier +0 -0
  55. package/assets/pdfjs/images/messageBar_warning.svg +3 -0
  56. package/assets/pdfjs/images/messageBar_warning.svg:Zone.Identifier +0 -0
  57. package/assets/pdfjs/images/toolbarButton-editorHighlight.svg +6 -0
  58. package/assets/pdfjs/images/toolbarButton-editorHighlight.svg:Zone.Identifier +0 -0
  59. package/assets/pdfjs/images/toolbarButton-menuArrow.svg +3 -0
  60. package/assets/pdfjs/images/toolbarButton-menuArrow.svg:Zone.Identifier +0 -0
  61. package/assets/pdfjs/pdf_viewer.css +2982 -272
  62. package/assets/pdfjs/pdf_viewer.css:Zone.Identifier +0 -0
  63. package/assets/sass/pdf-viewer.scss +5 -38
  64. package/assets/sass/toolbar/main.scss +4 -2
  65. package/assets/sass/toolbar/side-bar.scss +1 -0
  66. package/esm2022/lib/annotations/annotation-set/annotation-create/box-highlight-create/box-highlight-create.component.mjs +3 -3
  67. package/esm2022/lib/annotations/annotation-set/annotation-create/highlight-create/highlight-create.directive.mjs +3 -3
  68. package/esm2022/lib/annotations/annotation-set/annotation-create/highlight-create/highlight-create.service.mjs +3 -3
  69. package/esm2022/lib/annotations/annotation-set/annotation-set.component.mjs +3 -3
  70. package/esm2022/lib/annotations/annotation-set/annotation-view/annotation-view.component.mjs +3 -3
  71. package/esm2022/lib/annotations/annotation-set/annotation-view/rectangle/rectangle.component.mjs +3 -3
  72. package/esm2022/lib/annotations/annotation-set/ctx-toolbar/ctx-toolbar.component.mjs +3 -3
  73. package/esm2022/lib/annotations/annotation-set/metadata-layer/metadata-layer.component.mjs +3 -3
  74. package/esm2022/lib/annotations/annotations.module.mjs +4 -4
  75. package/esm2022/lib/annotations/comment-set/comment/comment.component.mjs +3 -3
  76. package/esm2022/lib/annotations/comment-set/comment/comment.service.mjs +3 -3
  77. package/esm2022/lib/annotations/comment-set/comment/text-highlight/text-highlight.directive.mjs +3 -3
  78. package/esm2022/lib/annotations/comment-set/comment/textarea-auto-expand/textarea-auto-expand.directive.mjs +3 -3
  79. package/esm2022/lib/annotations/comment-set/comment-navigate/comments-navigate.component.mjs +3 -3
  80. package/esm2022/lib/annotations/comment-set/comment-set-header/comment-filter/comment-filter.component.mjs +3 -3
  81. package/esm2022/lib/annotations/comment-set/comment-set-header/comment-search/comment-search.component.mjs +3 -3
  82. package/esm2022/lib/annotations/comment-set/comment-set-header/comment-set-header.component.mjs +3 -3
  83. package/esm2022/lib/annotations/comment-set/comment-set-render.service.mjs +3 -3
  84. package/esm2022/lib/annotations/comment-set/comment-set.component.mjs +3 -3
  85. package/esm2022/lib/annotations/comments-summary/comments-summary.component.mjs +3 -3
  86. package/esm2022/lib/annotations/pipes/date/date.pipe.mjs +3 -3
  87. package/esm2022/lib/annotations/pipes/filter/filter.pipe.mjs +3 -3
  88. package/esm2022/lib/annotations/pipes/unsnake/unsnake.pipe.mjs +3 -3
  89. package/esm2022/lib/annotations/services/annotation-api/annotation-api.service.mjs +3 -3
  90. package/esm2022/lib/annotations/services/bookmarks-api/bookmarks-api.service.mjs +3 -3
  91. package/esm2022/lib/annotations/services/tags/tags.services.mjs +3 -3
  92. package/esm2022/lib/annotations/tags/tags.component.mjs +3 -3
  93. package/esm2022/lib/bookmark/components/bookmark-icons.component.mjs +3 -3
  94. package/esm2022/lib/icp/confirm-exit/confirm-action-dialog.component.mjs +3 -3
  95. package/esm2022/lib/icp/icp-follower.service.mjs +3 -3
  96. package/esm2022/lib/icp/icp-presenter.service.mjs +3 -3
  97. package/esm2022/lib/icp/icp-session-api.service.mjs +3 -3
  98. package/esm2022/lib/icp/icp-update.service.mjs +3 -3
  99. package/esm2022/lib/icp/icp.service.mjs +3 -3
  100. package/esm2022/lib/icp/participants-list/participants-list.component.mjs +3 -3
  101. package/esm2022/lib/icp/socket.service.mjs +3 -3
  102. package/esm2022/lib/media-viewer.component.mjs +3 -3
  103. package/esm2022/lib/media-viewer.module.mjs +4 -4
  104. package/esm2022/lib/print.service.mjs +3 -3
  105. package/esm2022/lib/redaction/components/redaction.component.mjs +3 -3
  106. package/esm2022/lib/redaction/services/redaction-api.service.mjs +3 -3
  107. package/esm2022/lib/shared/gov-uk-date/gov-uk-date.component.mjs +3 -3
  108. package/esm2022/lib/shared/gov-uk-error-message/gov-uk-error-message.component.mjs +3 -3
  109. package/esm2022/lib/shared/gov-uk-fieldset/gov-uk-fieldset.component.mjs +3 -3
  110. package/esm2022/lib/shared/gov-uk-label/gov-uk-label.component.mjs +3 -3
  111. package/esm2022/lib/shared/shared.module.mjs +4 -4
  112. package/esm2022/lib/shared/util/services/number.helper.service.mjs +3 -3
  113. package/esm2022/lib/store/effects/annotation.effects.mjs +3 -3
  114. package/esm2022/lib/store/effects/bookmarks.effects.mjs +3 -3
  115. package/esm2022/lib/store/effects/document.effects.mjs +3 -3
  116. package/esm2022/lib/store/effects/icp.effects.mjs +3 -3
  117. package/esm2022/lib/store/effects/redaction.effects.mjs +3 -3
  118. package/esm2022/lib/store/reducers/annotations.reducer.mjs +2 -2
  119. package/esm2022/lib/toolbar/highlight-toolbar/highlight-toolbar.component.mjs +3 -3
  120. package/esm2022/lib/toolbar/icp-toolbar/icp-toolbar.component.mjs +3 -3
  121. package/esm2022/lib/toolbar/main-toolbar/main-toolbar.component.mjs +3 -3
  122. package/esm2022/lib/toolbar/redaction-search-bar/redaction-search-bar.component.mjs +5 -5
  123. package/esm2022/lib/toolbar/redaction-toolbar/redaction-toolbar.component.mjs +3 -3
  124. package/esm2022/lib/toolbar/search-bar/search-bar.component.mjs +3 -3
  125. package/esm2022/lib/toolbar/toolbar-button-visibility.service.mjs +3 -3
  126. package/esm2022/lib/toolbar/toolbar-event.service.mjs +3 -3
  127. package/esm2022/lib/toolbar/toolbar.module.mjs +4 -4
  128. package/esm2022/lib/viewers/convertible-content-viewer/convertible-content-viewer.component.mjs +3 -3
  129. package/esm2022/lib/viewers/convertible-content-viewer/document-conversion-api.service.mjs +3 -3
  130. package/esm2022/lib/viewers/grab-n-drag.directive.mjs +3 -3
  131. package/esm2022/lib/viewers/image-viewer/image-viewer.component.mjs +3 -3
  132. package/esm2022/lib/viewers/multimedia-player/multimedia-player.component.mjs +3 -3
  133. package/esm2022/lib/viewers/pdf-viewer/pdf-js/pdf-js-wrapper.mjs +2 -2
  134. package/esm2022/lib/viewers/pdf-viewer/pdf-js/pdf-js-wrapper.provider.mjs +3 -3
  135. package/esm2022/lib/viewers/pdf-viewer/pdf-viewer.component.mjs +3 -3
  136. package/esm2022/lib/viewers/pdf-viewer/side-bar/bookmarks/bookmarks.component.mjs +6 -6
  137. package/esm2022/lib/viewers/pdf-viewer/side-bar/outline-item/outline-item.component.mjs +3 -3
  138. package/esm2022/lib/viewers/pdf-viewer/side-bar/side-bar.component.mjs +9 -8
  139. package/esm2022/lib/viewers/rotation-persist/rotation-api.service.mjs +3 -3
  140. package/esm2022/lib/viewers/rotation-persist/rotation-persist.directive.mjs +3 -3
  141. package/esm2022/lib/viewers/unsupported-viewer/unsupported-viewer.component.mjs +3 -3
  142. package/esm2022/lib/viewers/viewer-event.service.mjs +3 -3
  143. package/esm2022/lib/viewers/viewer-util.service.mjs +3 -3
  144. package/fesm2022/hmcts-media-viewer.mjs +242 -242
  145. package/fesm2022/hmcts-media-viewer.mjs.map +1 -1
  146. package/lib/store/reducers/annotations.reducer.d.ts.map +1 -1
  147. package/package.json +5 -5
@@ -13,391 +13,3101 @@
13
13
  * limitations under the License.
14
14
  */
15
15
 
16
- .textLayer {
17
- position: absolute;
18
- left: 0;
19
- top: 0;
20
- right: 0;
21
- bottom: 0;
22
- overflow: hidden;
23
- opacity: 0.2;
24
- line-height: 1.0;
16
+ .dialog{
17
+ --dialog-bg-color:white;
18
+ --dialog-border-color:white;
19
+ --dialog-shadow:0 2px 14px 0 rgb(58 57 68 / 0.2);
20
+ --text-primary-color:#15141a;
21
+ --text-secondary-color:#5b5b66;
22
+ --hover-filter:brightness(0.9);
23
+ --focus-ring-color:#0060df;
24
+ --focus-ring-outline:2px solid var(--focus-ring-color);
25
+ --link-fg-color:#0060df;
26
+ --link-hover-fg-color:#0250bb;
27
+ --separator-color:#f0f0f4;
28
+
29
+ --textarea-border-color:#8f8f9d;
30
+ --textarea-bg-color:white;
31
+ --textarea-fg-color:var(--text-secondary-color);
32
+
33
+ --radio-bg-color:#f0f0f4;
34
+ --radio-checked-bg-color:#fbfbfe;
35
+ --radio-border-color:#8f8f9d;
36
+ --radio-checked-border-color:#0060df;
37
+
38
+ --button-secondary-bg-color:#f0f0f4;
39
+ --button-secondary-fg-color:var(--text-primary-color);
40
+ --button-secondary-border-color:var(--button-secondary-bg-color);
41
+ --button-secondary-hover-bg-color:var(--button-secondary-bg-color);
42
+ --button-secondary-hover-fg-color:var(--button-secondary-fg-color);
43
+ --button-secondary-hover-border-color:var(--button-secondary-hover-bg-color);
44
+
45
+ --button-primary-bg-color:#0060df;
46
+ --button-primary-fg-color:#fbfbfe;
47
+ --button-primary-border-color:var(--button-primary-bg-color);
48
+ --button-primary-hover-bg-color:var(--button-primary-bg-color);
49
+ --button-primary-hover-fg-color:var(--button-primary-fg-color);
50
+ --button-primary-hover-border-color:var(--button-primary-hover-bg-color);
51
+ }
52
+
53
+ @media (prefers-color-scheme: dark){
54
+
55
+ .dialog{
56
+ --dialog-bg-color:#1c1b22;
57
+ --dialog-border-color:#1c1b22;
58
+ --dialog-shadow:0 2px 14px 0 #15141a;
59
+ --text-primary-color:#fbfbfe;
60
+ --text-secondary-color:#cfcfd8;
61
+ --focus-ring-color:#0df;
62
+ --hover-filter:brightness(1.4);
63
+ --link-fg-color:#0df;
64
+ --link-hover-fg-color:#80ebff;
65
+ --separator-color:#52525e;
66
+
67
+ --textarea-bg-color:#42414d;
68
+
69
+ --radio-bg-color:#2b2a33;
70
+ --radio-checked-bg-color:#15141a;
71
+ --radio-checked-border-color:#0df;
72
+
73
+ --button-secondary-bg-color:#2b2a33;
74
+ --button-primary-bg-color:#0df;
75
+ --button-primary-fg-color:#15141a;
76
+ }
77
+ }
78
+
79
+ @media screen and (forced-colors: active){
80
+
81
+ .dialog{
82
+ --dialog-bg-color:Canvas;
83
+ --dialog-border-color:CanvasText;
84
+ --dialog-shadow:none;
85
+ --text-primary-color:CanvasText;
86
+ --text-secondary-color:CanvasText;
87
+ --hover-filter:none;
88
+ --focus-ring-color:ButtonBorder;
89
+ --link-fg-color:LinkText;
90
+ --link-hover-fg-color:LinkText;
91
+ --separator-color:CanvasText;
92
+
93
+ --textarea-border-color:ButtonBorder;
94
+ --textarea-bg-color:Field;
95
+ --textarea-fg-color:ButtonText;
96
+
97
+ --radio-bg-color:ButtonFace;
98
+ --radio-checked-bg-color:ButtonFace;
99
+ --radio-border-color:ButtonText;
100
+ --radio-checked-border-color:ButtonText;
101
+
102
+ --button-secondary-bg-color:ButtonFace;
103
+ --button-secondary-fg-color:ButtonText;
104
+ --button-secondary-border-color:ButtonText;
105
+ --button-secondary-hover-bg-color:AccentColor;
106
+ --button-secondary-hover-fg-color:AccentColorText;
107
+
108
+ --button-primary-bg-color:ButtonText;
109
+ --button-primary-fg-color:ButtonFace;
110
+ --button-primary-hover-bg-color:AccentColor;
111
+ --button-primary-hover-fg-color:AccentColorText;
112
+ }
113
+ }
114
+
115
+ .dialog{
116
+
117
+ font:message-box;
118
+ font-size:13px;
119
+ font-weight:400;
120
+ line-height:150%;
121
+ border-radius:4px;
122
+ padding:12px 16px;
123
+ border:1px solid var(--dialog-border-color);
124
+ background:var(--dialog-bg-color);
125
+ color:var(--text-primary-color);
126
+ box-shadow:var(--dialog-shadow);
127
+ }
128
+
129
+ :is(.dialog .mainContainer) *:focus-visible{
130
+ outline:var(--focus-ring-outline);
131
+ outline-offset:2px;
132
+ }
133
+
134
+ :is(.dialog .mainContainer) .title{
135
+ display:flex;
136
+ width:auto;
137
+ flex-direction:column;
138
+ justify-content:flex-end;
139
+ align-items:flex-start;
140
+ gap:12px;
141
+ }
142
+
143
+ :is(:is(.dialog .mainContainer) .title) > span{
144
+ font-size:13px;
145
+ font-style:normal;
146
+ font-weight:590;
147
+ line-height:150%;
148
+ }
149
+
150
+ :is(.dialog .mainContainer) .dialogSeparator{
151
+ width:100%;
152
+ height:0;
153
+ margin-block:4px;
154
+ border-top:1px solid var(--separator-color);
155
+ border-bottom:none;
156
+ }
157
+
158
+ :is(.dialog .mainContainer) .dialogButtonsGroup{
159
+ display:flex;
160
+ gap:12px;
161
+ align-self:flex-end;
162
+ }
163
+
164
+ :is(.dialog .mainContainer) .radio{
165
+ display:flex;
166
+ flex-direction:column;
167
+ align-items:flex-start;
168
+ gap:4px;
169
+ }
170
+
171
+ :is(:is(.dialog .mainContainer) .radio) > .radioButton{
172
+ display:flex;
173
+ gap:8px;
174
+ align-self:stretch;
175
+ align-items:center;
176
+ }
177
+
178
+ :is(:is(:is(.dialog .mainContainer) .radio) > .radioButton) input{
179
+ -webkit-appearance:none;
180
+ -moz-appearance:none;
181
+ appearance:none;
182
+ box-sizing:border-box;
183
+ width:16px;
184
+ height:16px;
185
+ border-radius:50%;
186
+ background-color:var(--radio-bg-color);
187
+ border:1px solid var(--radio-border-color);
188
+ }
189
+
190
+ :is(:is(:is(:is(.dialog .mainContainer) .radio) > .radioButton) input):hover{
191
+ filter:var(--hover-filter);
192
+ }
193
+
194
+ :is(:is(:is(:is(.dialog .mainContainer) .radio) > .radioButton) input):checked{
195
+ background-color:var(--radio-checked-bg-color);
196
+ border:4px solid var(--radio-checked-border-color);
197
+ }
198
+
199
+ :is(:is(.dialog .mainContainer) .radio) > .radioLabel{
200
+ display:flex;
201
+ padding-inline-start:24px;
202
+ align-items:flex-start;
203
+ gap:10px;
204
+ align-self:stretch;
205
+ }
206
+
207
+ :is(:is(:is(.dialog .mainContainer) .radio) > .radioLabel) > span{
208
+ flex:1 0 0;
209
+ font-size:11px;
210
+ color:var(--text-secondary-color);
211
+ }
212
+
213
+ :is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton)){
214
+ border-radius:4px;
215
+ border:1px solid;
216
+ font:menu;
217
+ font-weight:600;
218
+ padding:4px 16px;
219
+ width:auto;
220
+ height:32px;
221
+ }
222
+
223
+ :is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton))):hover{
224
+ cursor:pointer;
225
+ filter:var(--hover-filter);
226
+ }
227
+
228
+ .secondaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton))){
229
+ color:var(--button-secondary-fg-color);
230
+ background-color:var(--button-secondary-bg-color);
231
+ border-color:var(--button-secondary-border-color);
232
+ }
233
+
234
+ .secondaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton))):hover{
235
+ color:var(--button-secondary-hover-fg-color);
236
+ background-color:var(--button-secondary-hover-bg-color);
237
+ border-color:var(--button-secondary-hover-border-color);
238
+ }
239
+
240
+ .primaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton))){
241
+ color:var(--button-primary-fg-color);
242
+ background-color:var(--button-primary-bg-color);
243
+ border-color:var(--button-primary-border-color);
244
+ opacity:1;
245
+ }
246
+
247
+ .primaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton))):hover{
248
+ color:var(--button-primary-hover-fg-color);
249
+ background-color:var(--button-primary-hover-bg-color);
250
+ border-color:var(--button-primary-hover-border-color);
251
+ }
252
+
253
+ :is(.dialog .mainContainer) a{
254
+ color:var(--link-fg-color);
255
+ }
256
+
257
+ :is(:is(.dialog .mainContainer) a):hover{
258
+ color:var(--link-hover-fg-color);
259
+ }
260
+
261
+ :is(.dialog .mainContainer) textarea{
262
+ font:inherit;
263
+ padding:8px;
264
+ resize:none;
265
+ margin:0;
266
+ box-sizing:border-box;
267
+ border-radius:4px;
268
+ border:1px solid var(--textarea-border-color);
269
+ background:var(--textarea-bg-color);
270
+ color:var(--textarea-fg-color);
271
+ }
272
+
273
+ :is(:is(.dialog .mainContainer) textarea):focus{
274
+ outline-offset:0;
275
+ border-color:transparent;
276
+ }
277
+
278
+ :is(:is(.dialog .mainContainer) textarea):disabled{
279
+ pointer-events:none;
280
+ opacity:0.4;
281
+ }
282
+
283
+ :is(.dialog .mainContainer) .messageBar{
284
+ --message-bar-warning-icon:url(images/messageBar_warning.svg);
285
+ --closing-button-icon:url(images/messageBar_closingButton.svg);
286
+
287
+ --message-bar-bg-color:#ffebcd;
288
+ --message-bar-fg-color:#15141a;
289
+ --message-bar-border-color:rgb(0 0 0 / 0.08);
290
+ --message-bar-icon-color:#cd411e;
291
+ --message-bar-close-button-border-radius:4px;
292
+ --message-bar-close-button-border:none;
293
+ --message-bar-close-button-color:var(--text-primary-color);
294
+ --message-bar-close-button-hover-bg-color:rgb(21 20 26 / 0.14);
295
+ --message-bar-close-button-active-bg-color:rgb(21 20 26 / 0.21);
296
+ --message-bar-close-button-focus-bg-color:rgb(21 20 26 / 0.07);
297
+ --message-bar-close-button-color-hover:var(--text-primary-color);
298
+ }
299
+
300
+ @media (prefers-color-scheme: dark){
301
+
302
+ :is(.dialog .mainContainer) .messageBar{
303
+ --message-bar-bg-color:#5a3100;
304
+ --message-bar-fg-color:#fbfbfe;
305
+ --message-bar-border-color:rgb(255 255 255 / 0.08);
306
+ --message-bar-icon-color:#e49c49;
307
+ --message-bar-close-button-hover-bg-color:rgb(251 251 254 / 0.14);
308
+ --message-bar-close-button-active-bg-color:rgb(251 251 254 / 0.21);
309
+ --message-bar-close-button-focus-bg-color:rgb(251 251 254 / 0.07);
310
+ }
311
+ }
312
+
313
+ @media screen and (forced-colors: active){
314
+
315
+ :is(.dialog .mainContainer) .messageBar{
316
+ --message-bar-bg-color:HighlightText;
317
+ --message-bar-fg-color:CanvasText;
318
+ --message-bar-border-color:CanvasText;
319
+ --message-bar-icon-color:CanvasText;
320
+ --message-bar-close-button-color:ButtonText;
321
+ --message-bar-close-button-border:1px solid ButtonText;
322
+ --message-bar-close-button-hover-bg-color:ButtonText;
323
+ --message-bar-close-button-active-bg-color:ButtonText;
324
+ --message-bar-close-button-focus-bg-color:ButtonText;
325
+ --message-bar-close-button-color-hover:HighlightText;
326
+ }
327
+ }
328
+
329
+ :is(.dialog .mainContainer) .messageBar{
330
+
331
+ display:flex;
332
+ position:relative;
333
+ padding:12px 8px 12px 0;
334
+ flex-direction:column;
335
+ justify-content:center;
336
+ align-items:flex-start;
337
+ gap:8px;
338
+ align-self:stretch;
339
+
340
+ border-radius:4px;
341
+ border:1px solid var(--message-bar-border-color);
342
+ background:var(--message-bar-bg-color);
343
+ color:var(--message-bar-fg-color);
344
+ }
345
+
346
+ :is(:is(.dialog .mainContainer) .messageBar) > div{
347
+ display:flex;
348
+ padding-inline-start:16px;
349
+ align-items:flex-start;
350
+ gap:8px;
351
+ align-self:stretch;
352
+ }
353
+
354
+ :is(:is(:is(.dialog .mainContainer) .messageBar) > div)::before{
355
+ content:"";
356
+ display:inline-block;
357
+ width:16px;
358
+ height:16px;
359
+ -webkit-mask-image:var(--message-bar-warning-icon);
360
+ mask-image:var(--message-bar-warning-icon);
361
+ -webkit-mask-size:cover;
362
+ mask-size:cover;
363
+ background-color:var(--message-bar-icon-color);
364
+ }
365
+
366
+ :is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div{
367
+ display:flex;
368
+ flex-direction:column;
369
+ align-items:flex-start;
370
+ gap:8px;
371
+ flex:1 0 0;
372
+ }
373
+
374
+ :is(:is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div) .title{
375
+ font-size:13px;
376
+ font-weight:590;
377
+ }
378
+
379
+ :is(:is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div) .description{
380
+ font-size:13px;
381
+ }
382
+
383
+ :is(:is(.dialog .mainContainer) .messageBar) .closeButton{
384
+ position:absolute;
385
+ width:32px;
386
+ height:32px;
387
+ inset-inline-end:8px;
388
+ inset-block-start:8px;
389
+ background:none;
390
+ border-radius:var(--message-bar-close-button-border-radius);
391
+ border:var(--message-bar-close-button-border);
392
+ }
393
+
394
+ :is(:is(:is(.dialog .mainContainer) .messageBar) .closeButton)::before{
395
+ content:"";
396
+ display:inline-block;
397
+ width:16px;
398
+ height:16px;
399
+ -webkit-mask-image:var(--closing-button-icon);
400
+ mask-image:var(--closing-button-icon);
401
+ -webkit-mask-size:cover;
402
+ mask-size:cover;
403
+ background-color:var(--message-bar-close-button-color);
404
+ }
405
+
406
+ :is(:is(:is(.dialog .mainContainer) .messageBar) .closeButton):is(:hover,:active,:focus)::before{
407
+ background-color:var(--message-bar-close-button-color-hover);
408
+ }
409
+
410
+ :is(:is(:is(.dialog .mainContainer) .messageBar) .closeButton):hover{
411
+ background-color:var(--message-bar-close-button-hover-bg-color);
412
+ }
413
+
414
+ :is(:is(:is(.dialog .mainContainer) .messageBar) .closeButton):active{
415
+ background-color:var(--message-bar-close-button-active-bg-color);
416
+ }
417
+
418
+ :is(:is(:is(.dialog .mainContainer) .messageBar) .closeButton):focus{
419
+ background-color:var(--message-bar-close-button-focus-bg-color);
420
+ }
421
+
422
+ :is(:is(:is(.dialog .mainContainer) .messageBar) .closeButton) > span{
423
+ display:inline-block;
424
+ width:0;
425
+ height:0;
426
+ overflow:hidden;
427
+ }
428
+
429
+ :is(.dialog .mainContainer) .toggler{
430
+ display:flex;
431
+ align-items:center;
432
+ gap:8px;
433
+ align-self:stretch;
434
+ }
435
+
436
+ :is(:is(.dialog .mainContainer) .toggler) > .togglerLabel{
437
+ -webkit-user-select:none;
438
+ -moz-user-select:none;
439
+ user-select:none;
440
+ }
441
+
442
+ .textLayer{
443
+ position:absolute;
444
+ text-align:initial;
445
+ inset:0;
446
+ overflow:clip;
447
+ opacity:1;
448
+ line-height:1;
449
+ -webkit-text-size-adjust:none;
450
+ -moz-text-size-adjust:none;
451
+ text-size-adjust:none;
452
+ forced-color-adjust:none;
453
+ transform-origin:0 0;
454
+ caret-color:CanvasText;
455
+ z-index:0;
456
+ }
457
+
458
+ .textLayer.highlighting{
459
+ touch-action:none;
460
+ }
461
+
462
+ .textLayer :is(span,br){
463
+ color:transparent;
464
+ position:absolute;
465
+ white-space:pre;
466
+ cursor:text;
467
+ transform-origin:0% 0%;
468
+ }
469
+
470
+ .textLayer > :not(.markedContent),.textLayer .markedContent span:not(.markedContent){
471
+ z-index:1;
472
+ }
473
+
474
+ .textLayer span.markedContent{
475
+ top:0;
476
+ height:0;
477
+ }
478
+
479
+ .textLayer span[role="img"]{
480
+ -webkit-user-select:none;
481
+ -moz-user-select:none;
482
+ user-select:none;
483
+ cursor:default;
484
+ }
485
+
486
+ .textLayer .highlight{
487
+ --highlight-bg-color:rgb(180 0 170 / 0.25);
488
+ --highlight-selected-bg-color:rgb(0 100 0 / 0.25);
489
+ --highlight-backdrop-filter:none;
490
+ --highlight-selected-backdrop-filter:none;
491
+ }
492
+
493
+ @media screen and (forced-colors: active){
494
+
495
+ .textLayer .highlight{
496
+ --highlight-bg-color:transparent;
497
+ --highlight-selected-bg-color:transparent;
498
+ --highlight-backdrop-filter:var(--hcm-highlight-filter);
499
+ --highlight-selected-backdrop-filter:var(
500
+ --hcm-highlight-selected-filter
501
+ );
502
+ }
503
+ }
504
+
505
+ .textLayer .highlight{
506
+
507
+ margin:-1px;
508
+ padding:1px;
509
+ background-color:var(--highlight-bg-color);
510
+ -webkit-backdrop-filter:var(--highlight-backdrop-filter);
511
+ backdrop-filter:var(--highlight-backdrop-filter);
512
+ border-radius:4px;
513
+ }
514
+
515
+ .appended:is(.textLayer .highlight){
516
+ position:initial;
517
+ }
518
+
519
+ .begin:is(.textLayer .highlight){
520
+ border-radius:4px 0 0 4px;
521
+ }
522
+
523
+ .end:is(.textLayer .highlight){
524
+ border-radius:0 4px 4px 0;
525
+ }
526
+
527
+ .middle:is(.textLayer .highlight){
528
+ border-radius:0;
529
+ }
530
+
531
+ .selected:is(.textLayer .highlight){
532
+ background-color:var(--highlight-selected-bg-color);
533
+ -webkit-backdrop-filter:var(--highlight-selected-backdrop-filter);
534
+ backdrop-filter:var(--highlight-selected-backdrop-filter);
535
+ }
536
+
537
+ .textLayer ::-moz-selection{
538
+ background:rgba(0 0 255 / 0.25);
539
+ background:color-mix(in srgb, AccentColor, transparent 75%);
540
+ }
541
+
542
+ .textLayer ::selection{
543
+ background:rgba(0 0 255 / 0.25);
544
+ background:color-mix(in srgb, AccentColor, transparent 75%);
545
+ }
546
+
547
+ .textLayer br::-moz-selection{
548
+ background:transparent;
549
+ }
550
+
551
+ .textLayer br::selection{
552
+ background:transparent;
553
+ }
554
+
555
+ .textLayer .endOfContent{
556
+ display:block;
557
+ position:absolute;
558
+ inset:100% 0 0;
559
+ z-index:0;
560
+ cursor:default;
561
+ -webkit-user-select:none;
562
+ -moz-user-select:none;
563
+ user-select:none;
564
+ }
565
+
566
+ .textLayer.selecting .endOfContent{
567
+ top:0;
568
+ }
569
+
570
+ .annotationLayer{
571
+ --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>");
572
+ --input-focus-border-color:Highlight;
573
+ --input-focus-outline:1px solid Canvas;
574
+ --input-unfocused-border-color:transparent;
575
+ --input-disabled-border-color:transparent;
576
+ --input-hover-border-color:black;
577
+ --link-outline:none;
578
+ }
579
+
580
+ @media screen and (forced-colors: active){
581
+
582
+ .annotationLayer{
583
+ --input-focus-border-color:CanvasText;
584
+ --input-unfocused-border-color:ActiveText;
585
+ --input-disabled-border-color:GrayText;
586
+ --input-hover-border-color:Highlight;
587
+ --link-outline:1.5px solid LinkText;
588
+ }
589
+
590
+ .annotationLayer .textWidgetAnnotation :is(input,textarea):required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required{
591
+ outline:1.5px solid selectedItem;
592
+ }
593
+
594
+ .annotationLayer .linkAnnotation{
595
+ outline:var(--link-outline);
596
+ }
597
+
598
+ :is(.annotationLayer .linkAnnotation):hover{
599
+ -webkit-backdrop-filter:var(--hcm-highlight-filter);
600
+ backdrop-filter:var(--hcm-highlight-filter);
601
+ }
602
+
603
+ :is(.annotationLayer .linkAnnotation) > a:hover{
604
+ opacity:0 !important;
605
+ background:none !important;
606
+ box-shadow:none;
607
+ }
608
+
609
+ .annotationLayer .popupAnnotation .popup{
610
+ outline:calc(1.5px * var(--scale-factor)) solid CanvasText !important;
611
+ background-color:ButtonFace !important;
612
+ color:ButtonText !important;
613
+ }
614
+
615
+ .annotationLayer .highlightArea:hover::after{
616
+ position:absolute;
617
+ top:0;
618
+ left:0;
619
+ width:100%;
620
+ height:100%;
621
+ -webkit-backdrop-filter:var(--hcm-highlight-filter);
622
+ backdrop-filter:var(--hcm-highlight-filter);
623
+ content:"";
624
+ pointer-events:none;
625
+ }
626
+
627
+ .annotationLayer .popupAnnotation.focused .popup{
628
+ outline:calc(3px * var(--scale-factor)) solid Highlight !important;
629
+ }
630
+ }
631
+
632
+ .annotationLayer{
633
+
634
+ position:absolute;
635
+ top:0;
636
+ left:0;
637
+ pointer-events:none;
638
+ transform-origin:0 0;
639
+ }
640
+
641
+ .annotationLayer[data-main-rotation="90"] .norotate{
642
+ transform:rotate(270deg) translateX(-100%);
643
+ }
644
+
645
+ .annotationLayer[data-main-rotation="180"] .norotate{
646
+ transform:rotate(180deg) translate(-100%, -100%);
647
+ }
648
+
649
+ .annotationLayer[data-main-rotation="270"] .norotate{
650
+ transform:rotate(90deg) translateY(-100%);
651
+ }
652
+
653
+ .annotationLayer.disabled section,.annotationLayer.disabled .popup{
654
+ pointer-events:none;
655
+ }
656
+
657
+ .annotationLayer .annotationContent{
658
+ position:absolute;
659
+ width:100%;
660
+ height:100%;
661
+ pointer-events:none;
662
+ }
663
+
664
+ .freetext:is(.annotationLayer .annotationContent){
665
+ background:transparent;
666
+ border:none;
667
+ inset:0;
668
+ overflow:visible;
669
+ white-space:nowrap;
670
+ font:10px sans-serif;
671
+ line-height:1.35;
672
+ -webkit-user-select:none;
673
+ -moz-user-select:none;
674
+ user-select:none;
675
+ }
676
+
677
+ .annotationLayer section{
678
+ position:absolute;
679
+ text-align:initial;
680
+ pointer-events:auto;
681
+ box-sizing:border-box;
682
+ transform-origin:0 0;
683
+ }
684
+
685
+ :is(.annotationLayer section):has(div.annotationContent) canvas.annotationContent{
686
+ display:none;
687
+ }
688
+
689
+ .textLayer.selecting ~ .annotationLayer section{
690
+ pointer-events:none;
691
+ }
692
+
693
+ .annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton) > a{
694
+ position:absolute;
695
+ font-size:1em;
696
+ top:0;
697
+ left:0;
698
+ width:100%;
699
+ height:100%;
700
+ }
701
+
702
+ .annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton):not(.hasBorder) > a:hover{
703
+ opacity:0.2;
704
+ background-color:rgb(255 255 0);
705
+ box-shadow:0 2px 10px rgb(255 255 0);
706
+ }
707
+
708
+ .annotationLayer .linkAnnotation.hasBorder:hover{
709
+ background-color:rgb(255 255 0 / 0.2);
710
+ }
711
+
712
+ .annotationLayer .hasBorder{
713
+ background-size:100% 100%;
714
+ }
715
+
716
+ .annotationLayer .textAnnotation img{
717
+ position:absolute;
718
+ cursor:pointer;
719
+ width:100%;
720
+ height:100%;
721
+ top:0;
722
+ left:0;
723
+ }
724
+
725
+ .annotationLayer .textWidgetAnnotation :is(input,textarea),.annotationLayer .choiceWidgetAnnotation select,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input{
726
+ background-image:var(--annotation-unfocused-field-background);
727
+ border:2px solid var(--input-unfocused-border-color);
728
+ box-sizing:border-box;
729
+ font:calc(9px * var(--scale-factor)) sans-serif;
730
+ height:100%;
731
+ margin:0;
732
+ vertical-align:top;
733
+ width:100%;
734
+ }
735
+
736
+ .annotationLayer .textWidgetAnnotation :is(input,textarea):required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required{
737
+ outline:1.5px solid red;
738
+ }
739
+
740
+ .annotationLayer .choiceWidgetAnnotation select option{
741
+ padding:0;
742
+ }
743
+
744
+ .annotationLayer .buttonWidgetAnnotation.radioButton input{
745
+ border-radius:50%;
746
+ }
747
+
748
+ .annotationLayer .textWidgetAnnotation textarea{
749
+ resize:none;
750
+ }
751
+
752
+ .annotationLayer .textWidgetAnnotation [disabled]:is(input,textarea),.annotationLayer .choiceWidgetAnnotation select[disabled],.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input[disabled]{
753
+ background:none;
754
+ border:2px solid var(--input-disabled-border-color);
755
+ cursor:not-allowed;
756
+ }
757
+
758
+ .annotationLayer .textWidgetAnnotation :is(input,textarea):hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:hover{
759
+ border:2px solid var(--input-hover-border-color);
760
+ }
761
+
762
+ .annotationLayer .textWidgetAnnotation :is(input,textarea):hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .buttonWidgetAnnotation.checkBox input:hover{
763
+ border-radius:2px;
764
+ }
765
+
766
+ .annotationLayer .textWidgetAnnotation :is(input,textarea):focus,.annotationLayer .choiceWidgetAnnotation select:focus{
767
+ background:none;
768
+ border:2px solid var(--input-focus-border-color);
769
+ border-radius:2px;
770
+ outline:var(--input-focus-outline);
771
+ }
772
+
773
+ .annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) :focus{
774
+ background-image:none;
775
+ background-color:transparent;
776
+ }
777
+
778
+ .annotationLayer .buttonWidgetAnnotation.checkBox :focus{
779
+ border:2px solid var(--input-focus-border-color);
780
+ border-radius:2px;
781
+ outline:var(--input-focus-outline);
782
+ }
783
+
784
+ .annotationLayer .buttonWidgetAnnotation.radioButton :focus{
785
+ border:2px solid var(--input-focus-border-color);
786
+ outline:var(--input-focus-outline);
787
+ }
788
+
789
+ .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after,.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before{
790
+ background-color:CanvasText;
791
+ content:"";
792
+ display:block;
793
+ position:absolute;
794
+ }
795
+
796
+ .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after{
797
+ height:80%;
798
+ left:45%;
799
+ width:1px;
800
+ }
801
+
802
+ .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before{
803
+ transform:rotate(45deg);
804
+ }
805
+
806
+ .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after{
807
+ transform:rotate(-45deg);
808
+ }
809
+
810
+ .annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before{
811
+ border-radius:50%;
812
+ height:50%;
813
+ left:25%;
814
+ top:25%;
815
+ width:50%;
816
+ }
817
+
818
+ .annotationLayer .textWidgetAnnotation input.comb{
819
+ font-family:monospace;
820
+ padding-left:2px;
821
+ padding-right:0;
822
+ }
823
+
824
+ .annotationLayer .textWidgetAnnotation input.comb:focus{
825
+ width:103%;
826
+ }
827
+
828
+ .annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input{
829
+ -webkit-appearance:none;
830
+ -moz-appearance:none;
831
+ appearance:none;
832
+ }
833
+
834
+ .annotationLayer .fileAttachmentAnnotation .popupTriggerArea{
835
+ height:100%;
836
+ width:100%;
837
+ }
838
+
839
+ .annotationLayer .popupAnnotation{
840
+ position:absolute;
841
+ font-size:calc(9px * var(--scale-factor));
842
+ pointer-events:none;
843
+ width:-moz-max-content;
844
+ width:max-content;
845
+ max-width:45%;
846
+ height:auto;
847
+ }
848
+
849
+ .annotationLayer .popup{
850
+ background-color:rgb(255 255 153);
851
+ box-shadow:0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor)) rgb(136 136 136);
852
+ border-radius:calc(2px * var(--scale-factor));
853
+ outline:1.5px solid rgb(255 255 74);
854
+ padding:calc(6px * var(--scale-factor));
855
+ cursor:pointer;
856
+ font:message-box;
857
+ white-space:normal;
858
+ word-wrap:break-word;
859
+ pointer-events:auto;
860
+ }
861
+
862
+ .annotationLayer .popupAnnotation.focused .popup{
863
+ outline-width:3px;
864
+ }
865
+
866
+ .annotationLayer .popup *{
867
+ font-size:calc(9px * var(--scale-factor));
868
+ }
869
+
870
+ .annotationLayer .popup > .header{
871
+ display:inline-block;
872
+ }
873
+
874
+ .annotationLayer .popup > .header h1{
875
+ display:inline;
876
+ }
877
+
878
+ .annotationLayer .popup > .header .popupDate{
879
+ display:inline-block;
880
+ margin-left:calc(5px * var(--scale-factor));
881
+ width:-moz-fit-content;
882
+ width:fit-content;
883
+ }
884
+
885
+ .annotationLayer .popupContent{
886
+ border-top:1px solid rgb(51 51 51);
887
+ margin-top:calc(2px * var(--scale-factor));
888
+ padding-top:calc(2px * var(--scale-factor));
889
+ }
890
+
891
+ .annotationLayer .richText > *{
892
+ white-space:pre-wrap;
893
+ font-size:calc(9px * var(--scale-factor));
894
+ }
895
+
896
+ .annotationLayer .popupTriggerArea{
897
+ cursor:pointer;
898
+ }
899
+
900
+ .annotationLayer section svg{
901
+ position:absolute;
902
+ width:100%;
903
+ height:100%;
904
+ top:0;
905
+ left:0;
906
+ }
907
+
908
+ .annotationLayer .annotationTextContent{
909
+ position:absolute;
910
+ width:100%;
911
+ height:100%;
912
+ opacity:0;
913
+ color:transparent;
914
+ -webkit-user-select:none;
915
+ -moz-user-select:none;
916
+ user-select:none;
917
+ pointer-events:none;
918
+ }
919
+
920
+ :is(.annotationLayer .annotationTextContent) span{
921
+ width:100%;
922
+ display:inline-block;
923
+ }
924
+
925
+ .annotationLayer svg.quadrilateralsContainer{
926
+ contain:strict;
927
+ width:0;
928
+ height:0;
929
+ position:absolute;
930
+ top:0;
931
+ left:0;
932
+ z-index:-1;
933
+ }
934
+
935
+ :root{
936
+ --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>");
937
+ --xfa-focus-outline:auto;
938
+ }
939
+
940
+ @media screen and (forced-colors: active){
941
+ :root{
942
+ --xfa-focus-outline:2px solid CanvasText;
943
+ }
944
+ .xfaLayer *:required{
945
+ outline:1.5px solid selectedItem;
946
+ }
947
+ }
948
+
949
+ .xfaLayer{
950
+ background-color:transparent;
951
+ }
952
+
953
+ .xfaLayer .highlight{
954
+ margin:-1px;
955
+ padding:1px;
956
+ background-color:rgb(239 203 237);
957
+ border-radius:4px;
958
+ }
959
+
960
+ .xfaLayer .highlight.appended{
961
+ position:initial;
962
+ }
963
+
964
+ .xfaLayer .highlight.begin{
965
+ border-radius:4px 0 0 4px;
966
+ }
967
+
968
+ .xfaLayer .highlight.end{
969
+ border-radius:0 4px 4px 0;
970
+ }
971
+
972
+ .xfaLayer .highlight.middle{
973
+ border-radius:0;
974
+ }
975
+
976
+ .xfaLayer .highlight.selected{
977
+ background-color:rgb(203 223 203);
978
+ }
979
+
980
+ .xfaPage{
981
+ overflow:hidden;
982
+ position:relative;
983
+ }
984
+
985
+ .xfaContentarea{
986
+ position:absolute;
987
+ }
988
+
989
+ .xfaPrintOnly{
990
+ display:none;
991
+ }
992
+
993
+ .xfaLayer{
994
+ position:absolute;
995
+ text-align:initial;
996
+ top:0;
997
+ left:0;
998
+ transform-origin:0 0;
999
+ line-height:1.2;
1000
+ }
1001
+
1002
+ .xfaLayer *{
1003
+ color:inherit;
1004
+ font:inherit;
1005
+ font-style:inherit;
1006
+ font-weight:inherit;
1007
+ font-kerning:inherit;
1008
+ letter-spacing:-0.01px;
1009
+ text-align:inherit;
1010
+ text-decoration:inherit;
1011
+ box-sizing:border-box;
1012
+ background-color:transparent;
1013
+ padding:0;
1014
+ margin:0;
1015
+ pointer-events:auto;
1016
+ line-height:inherit;
1017
+ }
1018
+
1019
+ .xfaLayer *:required{
1020
+ outline:1.5px solid red;
1021
+ }
1022
+
1023
+ .xfaLayer div,
1024
+ .xfaLayer svg,
1025
+ .xfaLayer svg *{
1026
+ pointer-events:none;
1027
+ }
1028
+
1029
+ .xfaLayer a{
1030
+ color:blue;
1031
+ }
1032
+
1033
+ .xfaRich li{
1034
+ margin-left:3em;
1035
+ }
1036
+
1037
+ .xfaFont{
1038
+ color:black;
1039
+ font-weight:normal;
1040
+ font-kerning:none;
1041
+ font-size:10px;
1042
+ font-style:normal;
1043
+ letter-spacing:0;
1044
+ text-decoration:none;
1045
+ vertical-align:0;
1046
+ }
1047
+
1048
+ .xfaCaption{
1049
+ overflow:hidden;
1050
+ flex:0 0 auto;
1051
+ }
1052
+
1053
+ .xfaCaptionForCheckButton{
1054
+ overflow:hidden;
1055
+ flex:1 1 auto;
1056
+ }
1057
+
1058
+ .xfaLabel{
1059
+ height:100%;
1060
+ width:100%;
1061
+ }
1062
+
1063
+ .xfaLeft{
1064
+ display:flex;
1065
+ flex-direction:row;
1066
+ align-items:center;
1067
+ }
1068
+
1069
+ .xfaRight{
1070
+ display:flex;
1071
+ flex-direction:row-reverse;
1072
+ align-items:center;
1073
+ }
1074
+
1075
+ :is(.xfaLeft, .xfaRight) > :is(.xfaCaption, .xfaCaptionForCheckButton){
1076
+ max-height:100%;
1077
+ }
1078
+
1079
+ .xfaTop{
1080
+ display:flex;
1081
+ flex-direction:column;
1082
+ align-items:flex-start;
1083
+ }
1084
+
1085
+ .xfaBottom{
1086
+ display:flex;
1087
+ flex-direction:column-reverse;
1088
+ align-items:flex-start;
1089
+ }
1090
+
1091
+ :is(.xfaTop, .xfaBottom) > :is(.xfaCaption, .xfaCaptionForCheckButton){
1092
+ width:100%;
1093
+ }
1094
+
1095
+ .xfaBorder{
1096
+ background-color:transparent;
1097
+ position:absolute;
1098
+ pointer-events:none;
1099
+ }
1100
+
1101
+ .xfaWrapped{
1102
+ width:100%;
1103
+ height:100%;
1104
+ }
1105
+
1106
+ :is(.xfaTextfield, .xfaSelect):focus{
1107
+ background-image:none;
1108
+ background-color:transparent;
1109
+ outline:var(--xfa-focus-outline);
1110
+ outline-offset:-1px;
1111
+ }
1112
+
1113
+ :is(.xfaCheckbox, .xfaRadio):focus{
1114
+ outline:var(--xfa-focus-outline);
1115
+ }
1116
+
1117
+ .xfaTextfield,
1118
+ .xfaSelect{
1119
+ height:100%;
1120
+ width:100%;
1121
+ flex:1 1 auto;
1122
+ border:none;
1123
+ resize:none;
1124
+ background-image:var(--xfa-unfocused-field-background);
1125
+ }
1126
+
1127
+ .xfaSelect{
1128
+ padding-inline:2px;
1129
+ }
1130
+
1131
+ :is(.xfaTop, .xfaBottom) > :is(.xfaTextfield, .xfaSelect){
1132
+ flex:0 1 auto;
1133
+ }
1134
+
1135
+ .xfaButton{
1136
+ cursor:pointer;
1137
+ width:100%;
1138
+ height:100%;
1139
+ border:none;
1140
+ text-align:center;
1141
+ }
1142
+
1143
+ .xfaLink{
1144
+ width:100%;
1145
+ height:100%;
1146
+ position:absolute;
1147
+ top:0;
1148
+ left:0;
1149
+ }
1150
+
1151
+ .xfaCheckbox,
1152
+ .xfaRadio{
1153
+ width:100%;
1154
+ height:100%;
1155
+ flex:0 0 auto;
1156
+ border:none;
1157
+ }
1158
+
1159
+ .xfaRich{
1160
+ white-space:pre-wrap;
1161
+ width:100%;
1162
+ height:100%;
1163
+ }
1164
+
1165
+ .xfaImage{
1166
+ -o-object-position:left top;
1167
+ object-position:left top;
1168
+ -o-object-fit:contain;
1169
+ object-fit:contain;
1170
+ width:100%;
1171
+ height:100%;
1172
+ }
1173
+
1174
+ .xfaLrTb,
1175
+ .xfaRlTb,
1176
+ .xfaTb{
1177
+ display:flex;
1178
+ flex-direction:column;
1179
+ align-items:stretch;
1180
+ }
1181
+
1182
+ .xfaLr{
1183
+ display:flex;
1184
+ flex-direction:row;
1185
+ align-items:stretch;
1186
+ }
1187
+
1188
+ .xfaRl{
1189
+ display:flex;
1190
+ flex-direction:row-reverse;
1191
+ align-items:stretch;
1192
+ }
1193
+
1194
+ .xfaTb > div{
1195
+ justify-content:left;
1196
+ }
1197
+
1198
+ .xfaPosition{
1199
+ position:relative;
1200
+ }
1201
+
1202
+ .xfaArea{
1203
+ position:relative;
1204
+ }
1205
+
1206
+ .xfaValignMiddle{
1207
+ display:flex;
1208
+ align-items:center;
1209
+ }
1210
+
1211
+ .xfaTable{
1212
+ display:flex;
1213
+ flex-direction:column;
1214
+ align-items:stretch;
1215
+ }
1216
+
1217
+ .xfaTable .xfaRow{
1218
+ display:flex;
1219
+ flex-direction:row;
1220
+ align-items:stretch;
1221
+ }
1222
+
1223
+ .xfaTable .xfaRlRow{
1224
+ display:flex;
1225
+ flex-direction:row-reverse;
1226
+ align-items:stretch;
1227
+ flex:1;
1228
+ }
1229
+
1230
+ .xfaTable .xfaRlRow > div{
1231
+ flex:1;
1232
+ }
1233
+
1234
+ :is(.xfaNonInteractive, .xfaDisabled, .xfaReadOnly) :is(input, textarea){
1235
+ background:initial;
1236
+ }
1237
+
1238
+ @media print{
1239
+ .xfaTextfield,
1240
+ .xfaSelect{
1241
+ background:transparent;
1242
+ }
1243
+
1244
+ .xfaSelect{
1245
+ -webkit-appearance:none;
1246
+ -moz-appearance:none;
1247
+ appearance:none;
1248
+ text-indent:1px;
1249
+ text-overflow:"";
1250
+ }
1251
+ }
1252
+
1253
+ .canvasWrapper svg{
1254
+ transform:none;
1255
+ }
1256
+
1257
+ [data-main-rotation="90"]:is(.canvasWrapper svg) mask,[data-main-rotation="90"]:is(.canvasWrapper svg) use:not(.clip,.mask){
1258
+ transform:matrix(0, 1, -1, 0, 1, 0);
1259
+ }
1260
+
1261
+ [data-main-rotation="180"]:is(.canvasWrapper svg) mask,[data-main-rotation="180"]:is(.canvasWrapper svg) use:not(.clip,.mask){
1262
+ transform:matrix(-1, 0, 0, -1, 1, 1);
1263
+ }
1264
+
1265
+ [data-main-rotation="270"]:is(.canvasWrapper svg) mask,[data-main-rotation="270"]:is(.canvasWrapper svg) use:not(.clip,.mask){
1266
+ transform:matrix(0, -1, 1, 0, 0, 1);
1267
+ }
1268
+
1269
+ .highlight:is(.canvasWrapper svg){
1270
+ --blend-mode:multiply;
1271
+ }
1272
+
1273
+ @media screen and (forced-colors: active){
1274
+
1275
+ .highlight:is(.canvasWrapper svg){
1276
+ --blend-mode:difference;
1277
+ }
1278
+ }
1279
+
1280
+ .highlight:is(.canvasWrapper svg){
1281
+
1282
+ position:absolute;
1283
+ mix-blend-mode:var(--blend-mode);
1284
+ }
1285
+
1286
+ .highlight:is(.canvasWrapper svg):not(.free){
1287
+ fill-rule:evenodd;
1288
+ }
1289
+
1290
+ .highlightOutline:is(.canvasWrapper svg){
1291
+ position:absolute;
1292
+ mix-blend-mode:normal;
1293
+ fill-rule:evenodd;
1294
+ fill:none;
1295
+ }
1296
+
1297
+ .highlightOutline.hovered:is(.canvasWrapper svg):not(.free):not(.selected){
1298
+ stroke:var(--hover-outline-color);
1299
+ stroke-width:var(--outline-width);
1300
+ }
1301
+
1302
+ .highlightOutline.selected:is(.canvasWrapper svg):not(.free) .mainOutline{
1303
+ stroke:var(--outline-around-color);
1304
+ stroke-width:calc(
1305
+ var(--outline-width) + 2 * var(--outline-around-width)
1306
+ );
1307
+ }
1308
+
1309
+ .highlightOutline.selected:is(.canvasWrapper svg):not(.free) .secondaryOutline{
1310
+ stroke:var(--outline-color);
1311
+ stroke-width:var(--outline-width);
1312
+ }
1313
+
1314
+ .highlightOutline.free.hovered:is(.canvasWrapper svg):not(.selected){
1315
+ stroke:var(--hover-outline-color);
1316
+ stroke-width:calc(2 * var(--outline-width));
1317
+ }
1318
+
1319
+ .highlightOutline.free.selected:is(.canvasWrapper svg) .mainOutline{
1320
+ stroke:var(--outline-around-color);
1321
+ stroke-width:calc(
1322
+ 2 * (var(--outline-width) + var(--outline-around-width))
1323
+ );
1324
+ }
1325
+
1326
+ .highlightOutline.free.selected:is(.canvasWrapper svg) .secondaryOutline{
1327
+ stroke:var(--outline-color);
1328
+ stroke-width:calc(2 * var(--outline-width));
1329
+ }
1330
+
1331
+ .toggle-button{
1332
+ --button-background-color:#f0f0f4;
1333
+ --button-background-color-hover:#e0e0e6;
1334
+ --button-background-color-active:#cfcfd8;
1335
+ --color-accent-primary:#0060df;
1336
+ --color-accent-primary-hover:#0250bb;
1337
+ --color-accent-primary-active:#054096;
1338
+ --border-interactive-color:#8f8f9d;
1339
+ --border-radius-circle:9999px;
1340
+ --border-width:1px;
1341
+ --size-item-small:16px;
1342
+ --size-item-large:32px;
1343
+ --color-canvas:white;
1344
+ }
1345
+
1346
+ @media (prefers-color-scheme: dark){
1347
+
1348
+ .toggle-button{
1349
+ --button-background-color:color-mix(in srgb, currentColor 7%, transparent);
1350
+ --button-background-color-hover:color-mix(
1351
+ in srgb,
1352
+ currentColor 14%,
1353
+ transparent
1354
+ );
1355
+ --button-background-color-active:color-mix(
1356
+ in srgb,
1357
+ currentColor 21%,
1358
+ transparent
1359
+ );
1360
+ --color-accent-primary:#0df;
1361
+ --color-accent-primary-hover:#80ebff;
1362
+ --color-accent-primary-active:#aaf2ff;
1363
+ --border-interactive-color:#bfbfc9;
1364
+ --color-canvas:#1c1b22;
1365
+ }
1366
+ }
1367
+
1368
+ @media (forced-colors: active){
1369
+
1370
+ .toggle-button{
1371
+ --color-accent-primary:ButtonText;
1372
+ --color-accent-primary-hover:SelectedItem;
1373
+ --color-accent-primary-active:SelectedItem;
1374
+ --border-interactive-color:ButtonText;
1375
+ --button-background-color:ButtonFace;
1376
+ --border-interactive-color-hover:SelectedItem;
1377
+ --border-interactive-color-active:SelectedItem;
1378
+ --border-interactive-color-disabled:GrayText;
1379
+ --color-canvas:ButtonText;
1380
+ }
1381
+ }
1382
+
1383
+ .toggle-button{
1384
+
1385
+ --toggle-background-color:var(--button-background-color);
1386
+ --toggle-background-color-hover:var(--button-background-color-hover);
1387
+ --toggle-background-color-active:var(--button-background-color-active);
1388
+ --toggle-background-color-pressed:var(--color-accent-primary);
1389
+ --toggle-background-color-pressed-hover:var(--color-accent-primary-hover);
1390
+ --toggle-background-color-pressed-active:var(--color-accent-primary-active);
1391
+ --toggle-border-color:var(--border-interactive-color);
1392
+ --toggle-border-color-hover:var(--toggle-border-color);
1393
+ --toggle-border-color-active:var(--toggle-border-color);
1394
+ --toggle-border-radius:var(--border-radius-circle);
1395
+ --toggle-border-width:var(--border-width);
1396
+ --toggle-height:var(--size-item-small);
1397
+ --toggle-width:var(--size-item-large);
1398
+ --toggle-dot-background-color:var(--toggle-border-color);
1399
+ --toggle-dot-background-color-hover:var(--toggle-dot-background-color);
1400
+ --toggle-dot-background-color-active:var(--toggle-dot-background-color);
1401
+ --toggle-dot-background-color-on-pressed:var(--color-canvas);
1402
+ --toggle-dot-margin:1px;
1403
+ --toggle-dot-height:calc(
1404
+ var(--toggle-height) - 2 * var(--toggle-dot-margin) - 2 *
1405
+ var(--toggle-border-width)
1406
+ );
1407
+ --toggle-dot-width:var(--toggle-dot-height);
1408
+ --toggle-dot-transform-x:calc(
1409
+ var(--toggle-width) - 4 * var(--toggle-dot-margin) - var(--toggle-dot-width)
1410
+ );
1411
+
1412
+ -webkit-appearance:none;
1413
+
1414
+ -moz-appearance:none;
1415
+
1416
+ appearance:none;
1417
+ padding:0;
1418
+ margin:0;
1419
+ border:var(--toggle-border-width) solid var(--toggle-border-color);
1420
+ height:var(--toggle-height);
1421
+ width:var(--toggle-width);
1422
+ border-radius:var(--toggle-border-radius);
1423
+ background:var(--toggle-background-color);
1424
+ box-sizing:border-box;
1425
+ flex-shrink:0;
25
1426
  }
26
1427
 
27
- .textLayer > span {
28
- color: transparent;
29
- position: absolute;
30
- white-space: pre;
31
- cursor: text;
32
- transform-origin: 0% 0%;
1428
+ .toggle-button:focus-visible{
1429
+ outline:var(--focus-outline);
1430
+ outline-offset:var(--focus-outline-offset);
1431
+ }
1432
+
1433
+ .toggle-button:enabled:hover{
1434
+ background:var(--toggle-background-color-hover);
1435
+ border-color:var(--toggle-border-color);
1436
+ }
1437
+
1438
+ .toggle-button:enabled:active{
1439
+ background:var(--toggle-background-color-active);
1440
+ border-color:var(--toggle-border-color);
1441
+ }
1442
+
1443
+ .toggle-button[aria-pressed="true"]{
1444
+ background:var(--toggle-background-color-pressed);
1445
+ border-color:transparent;
1446
+ }
1447
+
1448
+ .toggle-button[aria-pressed="true"]:enabled:hover{
1449
+ background:var(--toggle-background-color-pressed-hover);
1450
+ border-color:transparent;
1451
+ }
1452
+
1453
+ .toggle-button[aria-pressed="true"]:enabled:active{
1454
+ background:var(--toggle-background-color-pressed-active);
1455
+ border-color:transparent;
1456
+ }
1457
+
1458
+ .toggle-button::before{
1459
+ display:block;
1460
+ content:"";
1461
+ background-color:var(--toggle-dot-background-color);
1462
+ height:var(--toggle-dot-height);
1463
+ width:var(--toggle-dot-width);
1464
+ margin:var(--toggle-dot-margin);
1465
+ border-radius:var(--toggle-border-radius);
1466
+ translate:0;
1467
+ }
1468
+
1469
+ .toggle-button[aria-pressed="true"]::before{
1470
+ translate:var(--toggle-dot-transform-x);
1471
+ background-color:var(--toggle-dot-background-color-on-pressed);
1472
+ }
1473
+
1474
+ .toggle-button[aria-pressed="true"]:enabled:hover::before,.toggle-button[aria-pressed="true"]:enabled:active::before{
1475
+ background-color:var(--toggle-dot-background-color-on-pressed);
1476
+ }
1477
+
1478
+ [dir="rtl"] .toggle-button[aria-pressed="true"]::before{
1479
+ translate:calc(-1 * var(--toggle-dot-transform-x));
1480
+ }
1481
+
1482
+ @media (prefers-reduced-motion: no-preference){
1483
+ .toggle-button::before{
1484
+ transition:translate 100ms;
1485
+ }
1486
+ }
1487
+
1488
+ @media (prefers-contrast){
1489
+ .toggle-button:enabled:hover{
1490
+ border-color:var(--toggle-border-color-hover);
1491
+ }
1492
+
1493
+ .toggle-button:enabled:active{
1494
+ border-color:var(--toggle-border-color-active);
1495
+ }
1496
+
1497
+ .toggle-button[aria-pressed="true"]:enabled{
1498
+ border-color:var(--toggle-border-color);
1499
+ position:relative;
1500
+ }
1501
+
1502
+ .toggle-button[aria-pressed="true"]:enabled:hover,.toggle-button[aria-pressed="true"]:enabled:hover:active{
1503
+ border-color:var(--toggle-border-color-hover);
1504
+ }
1505
+
1506
+ .toggle-button[aria-pressed="true"]:enabled:active{
1507
+ background-color:var(--toggle-dot-background-color-active);
1508
+ border-color:var(--toggle-dot-background-color-hover);
1509
+ }
1510
+
1511
+ .toggle-button:hover::before,.toggle-button:active::before{
1512
+ background-color:var(--toggle-dot-background-color-hover);
1513
+ }
1514
+ }
1515
+
1516
+ @media (forced-colors){
1517
+
1518
+ .toggle-button{
1519
+ --toggle-dot-background-color:var(--color-accent-primary);
1520
+ --toggle-dot-background-color-hover:var(--color-accent-primary-hover);
1521
+ --toggle-dot-background-color-active:var(--color-accent-primary-active);
1522
+ --toggle-dot-background-color-on-pressed:var(--button-background-color);
1523
+ --toggle-background-color-disabled:var(--button-background-color-disabled);
1524
+ --toggle-border-color-hover:var(--border-interactive-color-hover);
1525
+ --toggle-border-color-active:var(--border-interactive-color-active);
1526
+ --toggle-border-color-disabled:var(--border-interactive-color-disabled);
33
1527
  }
34
1528
 
35
- .textLayer .highlight {
36
- margin: -1px;
37
- padding: 1px;
38
- background-color: rgba(180, 0, 170, 1);
39
- border-radius: 4px;
1529
+ .toggle-button[aria-pressed="true"]:enabled::after{
1530
+ border:1px solid var(--button-background-color);
1531
+ content:"";
1532
+ position:absolute;
1533
+ height:var(--toggle-height);
1534
+ width:var(--toggle-width);
1535
+ display:block;
1536
+ border-radius:var(--toggle-border-radius);
1537
+ inset:-2px;
1538
+ }
1539
+
1540
+ .toggle-button[aria-pressed="true"]:enabled:active::after{
1541
+ border-color:var(--toggle-border-color-active);
1542
+ }
1543
+ }
1544
+
1545
+ :root{
1546
+ --outline-width:2px;
1547
+ --outline-color:#0060df;
1548
+ --outline-around-width:1px;
1549
+ --outline-around-color:#f0f0f4;
1550
+ --hover-outline-around-color:var(--outline-around-color);
1551
+ --focus-outline:solid var(--outline-width) var(--outline-color);
1552
+ --unfocus-outline:solid var(--outline-width) transparent;
1553
+ --focus-outline-around:solid var(--outline-around-width) var(--outline-around-color);
1554
+ --hover-outline-color:#8f8f9d;
1555
+ --hover-outline:solid var(--outline-width) var(--hover-outline-color);
1556
+ --hover-outline-around:solid var(--outline-around-width) var(--hover-outline-around-color);
1557
+ --freetext-line-height:1.35;
1558
+ --freetext-padding:2px;
1559
+ --resizer-bg-color:var(--outline-color);
1560
+ --resizer-size:6px;
1561
+ --resizer-shift:calc(
1562
+ 0px - (var(--outline-width) + var(--resizer-size)) / 2 -
1563
+ var(--outline-around-width)
1564
+ );
1565
+ --editorFreeText-editing-cursor:text;
1566
+ --editorInk-editing-cursor:url(images/cursor-editorInk.svg) 0 16, pointer;
1567
+ --editorHighlight-editing-cursor:url(images/cursor-editorTextHighlight.svg) 24 24, text;
1568
+ --editorFreeHighlight-editing-cursor:url(images/cursor-editorFreeHighlight.svg) 1 18, pointer;
1569
+
1570
+ --new-alt-text-warning-image:url(images/altText_warning.svg);
1571
+ }
1572
+ .visuallyHidden{
1573
+ position:absolute;
1574
+ top:0;
1575
+ left:0;
1576
+ border:0;
1577
+ margin:0;
1578
+ padding:0;
1579
+ width:0;
1580
+ height:0;
1581
+ overflow:hidden;
1582
+ white-space:nowrap;
1583
+ font-size:0;
40
1584
  }
41
1585
 
42
- .textLayer .highlight.begin {
43
- border-radius: 4px 0px 0px 4px;
1586
+ .textLayer.highlighting{
1587
+ cursor:var(--editorFreeHighlight-editing-cursor);
44
1588
  }
45
1589
 
46
- .textLayer .highlight.end {
47
- border-radius: 0px 4px 4px 0px;
1590
+ .textLayer.highlighting:not(.free) span{
1591
+ cursor:var(--editorHighlight-editing-cursor);
1592
+ }
1593
+
1594
+ [role="img"]:is(.textLayer.highlighting:not(.free) span){
1595
+ cursor:var(--editorFreeHighlight-editing-cursor);
1596
+ }
1597
+
1598
+ .textLayer.highlighting.free span{
1599
+ cursor:var(--editorFreeHighlight-editing-cursor);
1600
+ }
1601
+
1602
+ :is(#viewerContainer.pdfPresentationMode:fullscreen,.annotationEditorLayer.disabled) .noAltTextBadge{
1603
+ display:none !important;
1604
+ }
1605
+
1606
+ @media (min-resolution: 1.1dppx){
1607
+ :root{
1608
+ --editorFreeText-editing-cursor:url(images/cursor-editorFreeText.svg) 0 16, text;
1609
+ }
48
1610
  }
49
1611
 
50
- .textLayer .highlight.middle {
51
- border-radius: 0px;
1612
+ @media screen and (forced-colors: active){
1613
+ :root{
1614
+ --outline-color:CanvasText;
1615
+ --outline-around-color:ButtonFace;
1616
+ --resizer-bg-color:ButtonText;
1617
+ --hover-outline-color:Highlight;
1618
+ --hover-outline-around-color:SelectedItemText;
1619
+ }
52
1620
  }
53
1621
 
54
- .textLayer .highlight.selected {
55
- background-color: rgba(0, 100, 0, 1);
1622
+ [data-editor-rotation="90"]{
1623
+ transform:rotate(90deg);
56
1624
  }
57
1625
 
58
- .textLayer ::-moz-selection {
59
- background: rgba(0, 0, 255, 1);
1626
+ [data-editor-rotation="180"]{
1627
+ transform:rotate(180deg);
60
1628
  }
61
1629
 
62
- .textLayer ::selection {
63
- background: rgba(0, 0, 255, 1);
1630
+ [data-editor-rotation="270"]{
1631
+ transform:rotate(270deg);
64
1632
  }
65
1633
 
66
- .textLayer .endOfContent {
67
- display: block;
68
- position: absolute;
69
- left: 0px;
70
- top: 100%;
71
- right: 0px;
72
- bottom: 0px;
73
- z-index: -1;
74
- cursor: default;
75
- -webkit-user-select: none;
76
- -moz-user-select: none;
77
- -ms-user-select: none;
78
- user-select: none;
1634
+ .annotationEditorLayer{
1635
+ background:transparent;
1636
+ position:absolute;
1637
+ inset:0;
1638
+ font-size:calc(100px * var(--scale-factor));
1639
+ transform-origin:0 0;
1640
+ cursor:auto;
79
1641
  }
80
1642
 
81
- .textLayer .endOfContent.active {
82
- top: 0px;
1643
+ .annotationEditorLayer .selectedEditor{
1644
+ z-index:100000 !important;
1645
+ }
1646
+
1647
+ .annotationEditorLayer.drawing *{
1648
+ pointer-events:none !important;
1649
+ }
1650
+
1651
+ .annotationEditorLayer.waiting{
1652
+ content:"";
1653
+ cursor:wait;
1654
+ position:absolute;
1655
+ inset:0;
1656
+ width:100%;
1657
+ height:100%;
83
1658
  }
84
1659
 
1660
+ .annotationEditorLayer.disabled{
1661
+ pointer-events:none;
1662
+ }
85
1663
 
86
- .annotationLayer section {
87
- position: absolute;
1664
+ .annotationEditorLayer.freetextEditing{
1665
+ cursor:var(--editorFreeText-editing-cursor);
88
1666
  }
89
1667
 
90
- .annotationLayer .linkAnnotation > a,
91
- .annotationLayer .buttonWidgetAnnotation.pushButton > a {
92
- position: absolute;
93
- font-size: 1em;
94
- top: 0;
95
- left: 0;
96
- width: 100%;
97
- height: 100%;
1668
+ .annotationEditorLayer.inkEditing{
1669
+ cursor:var(--editorInk-editing-cursor);
98
1670
  }
99
1671
 
100
- .annotationLayer .linkAnnotation > a:hover,
101
- .annotationLayer .buttonWidgetAnnotation.pushButton > a:hover {
102
- opacity: 0.2;
103
- background: rgba(255, 255, 0, 1);
104
- box-shadow: 0px 2px 10px rgba(255, 255, 0, 1);
1672
+ .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor){
1673
+ position:absolute;
1674
+ background:transparent;
1675
+ z-index:1;
1676
+ transform-origin:0 0;
1677
+ cursor:auto;
1678
+ max-width:100%;
1679
+ max-height:100%;
1680
+ border:var(--unfocus-outline);
105
1681
  }
106
1682
 
107
- .annotationLayer .textAnnotation img {
108
- position: absolute;
109
- cursor: pointer;
1683
+ .draggable.selectedEditor:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor)){
1684
+ cursor:move;
1685
+ }
1686
+
1687
+ .moving:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor)){
1688
+ touch-action:none;
1689
+ }
1690
+
1691
+ .selectedEditor:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor)){
1692
+ border:var(--focus-outline);
1693
+ outline:var(--focus-outline-around);
1694
+ }
1695
+
1696
+ .selectedEditor:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor))::before{
1697
+ content:"";
1698
+ position:absolute;
1699
+ inset:0;
1700
+ border:var(--focus-outline-around);
1701
+ pointer-events:none;
1702
+ }
1703
+
1704
+ :is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor)):hover:not(.selectedEditor){
1705
+ border:var(--hover-outline);
1706
+ outline:var(--hover-outline-around);
1707
+ }
1708
+
1709
+ :is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor)):hover:not(.selectedEditor)::before{
1710
+ content:"";
1711
+ position:absolute;
1712
+ inset:0;
1713
+ border:var(--focus-outline-around);
1714
+ }
1715
+
1716
+ :is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar{
1717
+ --editor-toolbar-delete-image:url(images/editor-toolbar-delete.svg);
1718
+ --editor-toolbar-bg-color:#f0f0f4;
1719
+ --editor-toolbar-highlight-image:url(images/toolbarButton-editorHighlight.svg);
1720
+ --editor-toolbar-fg-color:#2e2e56;
1721
+ --editor-toolbar-border-color:#8f8f9d;
1722
+ --editor-toolbar-hover-border-color:var(--editor-toolbar-border-color);
1723
+ --editor-toolbar-hover-bg-color:#e0e0e6;
1724
+ --editor-toolbar-hover-fg-color:var(--editor-toolbar-fg-color);
1725
+ --editor-toolbar-hover-outline:none;
1726
+ --editor-toolbar-focus-outline-color:#0060df;
1727
+ --editor-toolbar-shadow:0 2px 6px 0 rgb(58 57 68 / 0.2);
1728
+ --editor-toolbar-vert-offset:6px;
1729
+ --editor-toolbar-height:28px;
1730
+ --editor-toolbar-padding:2px;
1731
+ --alt-text-done-color:#2ac3a2;
1732
+ --alt-text-warning-color:#0090ed;
1733
+ --alt-text-hover-done-color:var(--alt-text-done-color);
1734
+ --alt-text-hover-warning-color:var(--alt-text-warning-color);
1735
+ }
1736
+
1737
+ @media (prefers-color-scheme: dark){
1738
+
1739
+ :is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar{
1740
+ --editor-toolbar-bg-color:#2b2a33;
1741
+ --editor-toolbar-fg-color:#fbfbfe;
1742
+ --editor-toolbar-hover-bg-color:#52525e;
1743
+ --editor-toolbar-focus-outline-color:#0df;
1744
+ --alt-text-done-color:#54ffbd;
1745
+ --alt-text-warning-color:#80ebff;
1746
+ }
1747
+ }
1748
+
1749
+ @media screen and (forced-colors: active){
1750
+
1751
+ :is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar{
1752
+ --editor-toolbar-bg-color:ButtonFace;
1753
+ --editor-toolbar-fg-color:ButtonText;
1754
+ --editor-toolbar-border-color:ButtonText;
1755
+ --editor-toolbar-hover-border-color:AccentColor;
1756
+ --editor-toolbar-hover-bg-color:ButtonFace;
1757
+ --editor-toolbar-hover-fg-color:AccentColor;
1758
+ --editor-toolbar-hover-outline:2px solid var(--editor-toolbar-hover-border-color);
1759
+ --editor-toolbar-focus-outline-color:ButtonBorder;
1760
+ --editor-toolbar-shadow:none;
1761
+ --alt-text-done-color:var(--editor-toolbar-fg-color);
1762
+ --alt-text-warning-color:var(--editor-toolbar-fg-color);
1763
+ --alt-text-hover-done-color:var(--editor-toolbar-hover-fg-color);
1764
+ --alt-text-hover-warning-color:var(--editor-toolbar-hover-fg-color);
1765
+ }
1766
+ }
1767
+
1768
+ :is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar{
1769
+
1770
+ display:flex;
1771
+ width:-moz-fit-content;
1772
+ width:fit-content;
1773
+ height:var(--editor-toolbar-height);
1774
+ flex-direction:column;
1775
+ justify-content:center;
1776
+ align-items:center;
1777
+ cursor:default;
1778
+ pointer-events:auto;
1779
+ box-sizing:content-box;
1780
+ padding:var(--editor-toolbar-padding);
1781
+
1782
+ position:absolute;
1783
+ inset-inline-end:0;
1784
+ inset-block-start:calc(100% + var(--editor-toolbar-vert-offset));
1785
+
1786
+ border-radius:6px;
1787
+ background-color:var(--editor-toolbar-bg-color);
1788
+ border:1px solid var(--editor-toolbar-border-color);
1789
+ box-shadow:var(--editor-toolbar-shadow);
1790
+ }
1791
+
1792
+ .hidden:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar){
1793
+ display:none;
1794
+ }
1795
+
1796
+ :is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar):has(:focus-visible){
1797
+ border-color:transparent;
1798
+ }
1799
+
1800
+ [dir="ltr"] :is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar){
1801
+ transform-origin:100% 0;
1802
+ }
1803
+
1804
+ [dir="rtl"] :is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar){
1805
+ transform-origin:0 0;
1806
+ }
1807
+
1808
+ :is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar) .buttons{
1809
+ display:flex;
1810
+ justify-content:center;
1811
+ align-items:center;
1812
+ gap:0;
1813
+ height:100%;
1814
+ }
1815
+
1816
+ :is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar) .buttons) .divider{
1817
+ width:0;
1818
+ height:calc(
1819
+ 2 * var(--editor-toolbar-padding) + var(--editor-toolbar-height)
1820
+ );
1821
+ border-left:1px solid var(--editor-toolbar-border-color);
1822
+ border-right:none;
1823
+ display:inline-block;
1824
+ margin-inline:2px;
1825
+ }
1826
+
1827
+ :is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar) .buttons) .highlightButton{
1828
+ width:var(--editor-toolbar-height);
1829
+ }
1830
+
1831
+ :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar) .buttons) .highlightButton)::before{
1832
+ content:"";
1833
+ -webkit-mask-image:var(--editor-toolbar-highlight-image);
1834
+ mask-image:var(--editor-toolbar-highlight-image);
1835
+ -webkit-mask-repeat:no-repeat;
1836
+ mask-repeat:no-repeat;
1837
+ -webkit-mask-position:center;
1838
+ mask-position:center;
1839
+ display:inline-block;
1840
+ background-color:var(--editor-toolbar-fg-color);
1841
+ width:100%;
1842
+ height:100%;
1843
+ }
1844
+
1845
+ :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar) .buttons) .highlightButton):hover::before{
1846
+ background-color:var(--editor-toolbar-hover-fg-color);
1847
+ }
1848
+
1849
+ :is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar) .buttons) .delete{
1850
+ width:var(--editor-toolbar-height);
1851
+ }
1852
+
1853
+ :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar) .buttons) .delete)::before{
1854
+ content:"";
1855
+ -webkit-mask-image:var(--editor-toolbar-delete-image);
1856
+ mask-image:var(--editor-toolbar-delete-image);
1857
+ -webkit-mask-repeat:no-repeat;
1858
+ mask-repeat:no-repeat;
1859
+ -webkit-mask-position:center;
1860
+ mask-position:center;
1861
+ display:inline-block;
1862
+ background-color:var(--editor-toolbar-fg-color);
1863
+ width:100%;
1864
+ height:100%;
1865
+ }
1866
+
1867
+ :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar) .buttons) .delete):hover::before{
1868
+ background-color:var(--editor-toolbar-hover-fg-color);
1869
+ }
1870
+
1871
+ :is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar) .buttons) > *{
1872
+ height:var(--editor-toolbar-height);
1873
+ }
1874
+
1875
+ :is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar) .buttons) > :not(.divider){
1876
+ border:none;
1877
+ background-color:transparent;
1878
+ cursor:pointer;
1879
+ }
1880
+
1881
+ :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar) .buttons) > :not(.divider)):hover{
1882
+ border-radius:2px;
1883
+ background-color:var(--editor-toolbar-hover-bg-color);
1884
+ color:var(--editor-toolbar-hover-fg-color);
1885
+ outline:var(--editor-toolbar-hover-outline);
1886
+ outline-offset:1px;
1887
+ }
1888
+
1889
+ :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar) .buttons) > :not(.divider)):hover:active{
1890
+ outline:none;
1891
+ }
1892
+
1893
+ :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar) .buttons) > :not(.divider)):focus-visible{
1894
+ border-radius:2px;
1895
+ outline:2px solid var(--editor-toolbar-focus-outline-color);
1896
+ }
1897
+
1898
+ :is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar) .buttons) .altText{
1899
+ --alt-text-add-image:url(images/altText_add.svg);
1900
+ --alt-text-done-image:url(images/altText_done.svg);
1901
+
1902
+ display:flex;
1903
+ align-items:center;
1904
+ justify-content:center;
1905
+ width:-moz-max-content;
1906
+ width:max-content;
1907
+ padding-inline:8px;
1908
+ pointer-events:all;
1909
+ font:menu;
1910
+ font-weight:590;
1911
+ font-size:12px;
1912
+ color:var(--editor-toolbar-fg-color);
1913
+ }
1914
+
1915
+ :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar) .buttons) .altText):disabled{
1916
+ pointer-events:none;
1917
+ }
1918
+
1919
+ :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar) .buttons) .altText)::before{
1920
+ content:"";
1921
+ -webkit-mask-image:var(--alt-text-add-image);
1922
+ mask-image:var(--alt-text-add-image);
1923
+ -webkit-mask-repeat:no-repeat;
1924
+ mask-repeat:no-repeat;
1925
+ -webkit-mask-position:center;
1926
+ mask-position:center;
1927
+ display:inline-block;
1928
+ width:12px;
1929
+ height:13px;
1930
+ background-color:var(--editor-toolbar-fg-color);
1931
+ margin-inline-end:4px;
1932
+ }
1933
+
1934
+ :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar) .buttons) .altText):hover::before{
1935
+ background-color:var(--editor-toolbar-hover-fg-color);
1936
+ }
1937
+
1938
+ .done:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar) .buttons) .altText)::before{
1939
+ -webkit-mask-image:var(--alt-text-done-image);
1940
+ mask-image:var(--alt-text-done-image);
1941
+ }
1942
+
1943
+ .new:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar) .buttons) .altText)::before{
1944
+ width:16px;
1945
+ height:16px;
1946
+ -webkit-mask-image:var(--new-alt-text-warning-image);
1947
+ mask-image:var(--new-alt-text-warning-image);
1948
+ background-color:var(--alt-text-warning-color);
1949
+ -webkit-mask-size:cover;
1950
+ mask-size:cover;
1951
+ }
1952
+
1953
+ .new:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar) .buttons) .altText):hover::before{
1954
+ background-color:var(--alt-text-hover-warning-color);
1955
+ }
1956
+
1957
+ .new.done:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar) .buttons) .altText)::before{
1958
+ -webkit-mask-image:var(--alt-text-done-image);
1959
+ mask-image:var(--alt-text-done-image);
1960
+ background-color:var(--alt-text-done-color);
1961
+ }
1962
+
1963
+ .new.done:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar) .buttons) .altText):hover::before{
1964
+ background-color:var(--alt-text-hover-done-color);
1965
+ }
1966
+
1967
+ :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip{
1968
+ display:none;
1969
+ word-wrap:anywhere;
1970
+ }
1971
+
1972
+ .show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip){
1973
+ --alt-text-tooltip-bg:#f0f0f4;
1974
+ --alt-text-tooltip-fg:#15141a;
1975
+ --alt-text-tooltip-border:#8f8f9d;
1976
+ --alt-text-tooltip-shadow:0px 2px 6px 0px rgb(58 57 68 / 0.2);
1977
+ }
1978
+
1979
+ @media (prefers-color-scheme: dark){
1980
+
1981
+ .show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip){
1982
+ --alt-text-tooltip-bg:#1c1b22;
1983
+ --alt-text-tooltip-fg:#fbfbfe;
1984
+ --alt-text-tooltip-shadow:0px 2px 6px 0px #15141a;
1985
+ }
1986
+ }
1987
+
1988
+ @media screen and (forced-colors: active){
1989
+
1990
+ .show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip){
1991
+ --alt-text-tooltip-bg:Canvas;
1992
+ --alt-text-tooltip-fg:CanvasText;
1993
+ --alt-text-tooltip-border:CanvasText;
1994
+ --alt-text-tooltip-shadow:none;
1995
+ }
1996
+ }
1997
+
1998
+ .show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip){
1999
+
2000
+ display:inline-flex;
2001
+ flex-direction:column;
2002
+ align-items:center;
2003
+ justify-content:center;
2004
+ position:absolute;
2005
+ top:calc(100% + 2px);
2006
+ inset-inline-start:0;
2007
+ padding-block:2px 3px;
2008
+ padding-inline:3px;
2009
+ max-width:300px;
2010
+ width:-moz-max-content;
2011
+ width:max-content;
2012
+ height:auto;
2013
+ font-size:12px;
2014
+
2015
+ border:0.5px solid var(--alt-text-tooltip-border);
2016
+ background:var(--alt-text-tooltip-bg);
2017
+ box-shadow:var(--alt-text-tooltip-shadow);
2018
+ color:var(--alt-text-tooltip-fg);
2019
+
2020
+ pointer-events:none;
2021
+ }
2022
+
2023
+ .annotationEditorLayer .freeTextEditor{
2024
+ padding:calc(var(--freetext-padding) * var(--scale-factor));
2025
+ width:auto;
2026
+ height:auto;
2027
+ touch-action:none;
110
2028
  }
111
2029
 
112
- .annotationLayer .textWidgetAnnotation input,
113
- .annotationLayer .textWidgetAnnotation textarea,
114
- .annotationLayer .choiceWidgetAnnotation select,
115
- .annotationLayer .buttonWidgetAnnotation.checkBox input,
116
- .annotationLayer .buttonWidgetAnnotation.radioButton input {
117
- background-color: rgba(0, 54, 255, 0.13);
118
- border: 1px solid transparent;
119
- box-sizing: border-box;
120
- font-size: 9px;
121
- height: 100%;
122
- margin: 0;
123
- padding: 0 3px;
124
- vertical-align: top;
125
- width: 100%;
2030
+ .annotationEditorLayer .freeTextEditor .internal{
2031
+ background:transparent;
2032
+ border:none;
2033
+ inset:0;
2034
+ overflow:visible;
2035
+ white-space:nowrap;
2036
+ font:10px sans-serif;
2037
+ line-height:var(--freetext-line-height);
2038
+ -webkit-user-select:none;
2039
+ -moz-user-select:none;
2040
+ user-select:none;
126
2041
  }
127
2042
 
128
- .annotationLayer .choiceWidgetAnnotation select option {
129
- padding: 0;
2043
+ .annotationEditorLayer .freeTextEditor .overlay{
2044
+ position:absolute;
2045
+ display:none;
2046
+ background:transparent;
2047
+ inset:0;
2048
+ width:100%;
2049
+ height:100%;
130
2050
  }
131
2051
 
132
- .annotationLayer .buttonWidgetAnnotation.radioButton input {
133
- border-radius: 50%;
2052
+ .annotationEditorLayer freeTextEditor .overlay.enabled{
2053
+ display:block;
134
2054
  }
135
2055
 
136
- .annotationLayer .textWidgetAnnotation textarea {
137
- font: message-box;
138
- font-size: 9px;
139
- resize: none;
2056
+ .annotationEditorLayer .freeTextEditor .internal:empty::before{
2057
+ content:attr(default-content);
2058
+ color:gray;
140
2059
  }
141
2060
 
142
- .annotationLayer .textWidgetAnnotation input[disabled],
143
- .annotationLayer .textWidgetAnnotation textarea[disabled],
144
- .annotationLayer .choiceWidgetAnnotation select[disabled],
145
- .annotationLayer .buttonWidgetAnnotation.checkBox input[disabled],
146
- .annotationLayer .buttonWidgetAnnotation.radioButton input[disabled] {
147
- background: none;
148
- border: 1px solid transparent;
149
- cursor: not-allowed;
2061
+ .annotationEditorLayer .freeTextEditor .internal:focus{
2062
+ outline:none;
2063
+ -webkit-user-select:auto;
2064
+ -moz-user-select:auto;
2065
+ user-select:auto;
150
2066
  }
151
2067
 
152
- .annotationLayer .textWidgetAnnotation input:hover,
153
- .annotationLayer .textWidgetAnnotation textarea:hover,
154
- .annotationLayer .choiceWidgetAnnotation select:hover,
155
- .annotationLayer .buttonWidgetAnnotation.checkBox input:hover,
156
- .annotationLayer .buttonWidgetAnnotation.radioButton input:hover {
157
- border: 1px solid rgba(0, 0, 0, 1);
2068
+ .annotationEditorLayer .inkEditor{
2069
+ width:100%;
2070
+ height:100%;
158
2071
  }
159
2072
 
160
- .annotationLayer .textWidgetAnnotation input:focus,
161
- .annotationLayer .textWidgetAnnotation textarea:focus,
162
- .annotationLayer .choiceWidgetAnnotation select:focus {
163
- background: none;
164
- border: 1px solid transparent;
2073
+ .annotationEditorLayer .inkEditor.editing{
2074
+ cursor:inherit;
165
2075
  }
166
2076
 
167
- .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,
168
- .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after,
169
- .annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before {
170
- background-color: rgba(0, 0, 0, 1);
171
- content: '';
172
- display: block;
173
- position: absolute;
2077
+ .annotationEditorLayer .inkEditor .inkEditorCanvas{
2078
+ position:absolute;
2079
+ inset:0;
2080
+ width:100%;
2081
+ height:100%;
2082
+ touch-action:none;
174
2083
  }
175
2084
 
176
- .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,
177
- .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after {
178
- height: 80%;
179
- left: 45%;
180
- width: 1px;
2085
+ .annotationEditorLayer .stampEditor{
2086
+ width:auto;
2087
+ height:auto;
181
2088
  }
182
2089
 
183
- .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before {
184
- transform: rotate(45deg);
2090
+ :is(.annotationEditorLayer .stampEditor) canvas{
2091
+ position:absolute;
2092
+ width:100%;
2093
+ height:100%;
2094
+ margin:0;
2095
+ top:0;
2096
+ left:0;
2097
+ }
2098
+
2099
+ :is(.annotationEditorLayer .stampEditor) .noAltTextBadge{
2100
+ --no-alt-text-badge-border-color:#f0f0f4;
2101
+ --no-alt-text-badge-bg-color:#cfcfd8;
2102
+ --no-alt-text-badge-fg-color:#5b5b66;
2103
+ }
2104
+
2105
+ @media (prefers-color-scheme: dark){
2106
+
2107
+ :is(.annotationEditorLayer .stampEditor) .noAltTextBadge{
2108
+ --no-alt-text-badge-border-color:#52525e;
2109
+ --no-alt-text-badge-bg-color:#fbfbfe;
2110
+ --no-alt-text-badge-fg-color:#15141a;
2111
+ }
2112
+ }
2113
+
2114
+ @media screen and (forced-colors: active){
2115
+
2116
+ :is(.annotationEditorLayer .stampEditor) .noAltTextBadge{
2117
+ --no-alt-text-badge-border-color:ButtonText;
2118
+ --no-alt-text-badge-bg-color:ButtonFace;
2119
+ --no-alt-text-badge-fg-color:ButtonText;
2120
+ }
2121
+ }
2122
+
2123
+ :is(.annotationEditorLayer .stampEditor) .noAltTextBadge{
2124
+
2125
+ position:absolute;
2126
+ inset-inline-end:5px;
2127
+ inset-block-end:5px;
2128
+ display:inline-flex;
2129
+ width:32px;
2130
+ height:32px;
2131
+ padding:3px;
2132
+ justify-content:center;
2133
+ align-items:center;
2134
+ pointer-events:none;
2135
+ z-index:1;
2136
+
2137
+ border-radius:2px;
2138
+ border:1px solid var(--no-alt-text-badge-border-color);
2139
+ background:var(--no-alt-text-badge-bg-color);
2140
+ }
2141
+
2142
+ :is(:is(.annotationEditorLayer .stampEditor) .noAltTextBadge)::before{
2143
+ content:"";
2144
+ display:inline-block;
2145
+ width:16px;
2146
+ height:16px;
2147
+ -webkit-mask-image:var(--new-alt-text-warning-image);
2148
+ mask-image:var(--new-alt-text-warning-image);
2149
+ -webkit-mask-size:cover;
2150
+ mask-size:cover;
2151
+ background-color:var(--no-alt-text-badge-fg-color);
2152
+ }
2153
+
2154
+ :is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor)) > .resizers{
2155
+ position:absolute;
2156
+ inset:0;
2157
+ }
2158
+
2159
+ .hidden:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor)) > .resizers){
2160
+ display:none;
2161
+ }
2162
+
2163
+ :is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor)) > .resizers) > .resizer{
2164
+ width:var(--resizer-size);
2165
+ height:var(--resizer-size);
2166
+ background:content-box var(--resizer-bg-color);
2167
+ border:var(--focus-outline-around);
2168
+ border-radius:2px;
2169
+ position:absolute;
2170
+ }
2171
+
2172
+ .topLeft:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor)) > .resizers) > .resizer){
2173
+ top:var(--resizer-shift);
2174
+ left:var(--resizer-shift);
2175
+ }
2176
+
2177
+ .topMiddle:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor)) > .resizers) > .resizer){
2178
+ top:var(--resizer-shift);
2179
+ left:calc(50% + var(--resizer-shift));
2180
+ }
2181
+
2182
+ .topRight:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor)) > .resizers) > .resizer){
2183
+ top:var(--resizer-shift);
2184
+ right:var(--resizer-shift);
2185
+ }
2186
+
2187
+ .middleRight:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor)) > .resizers) > .resizer){
2188
+ top:calc(50% + var(--resizer-shift));
2189
+ right:var(--resizer-shift);
2190
+ }
2191
+
2192
+ .bottomRight:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor)) > .resizers) > .resizer){
2193
+ bottom:var(--resizer-shift);
2194
+ right:var(--resizer-shift);
2195
+ }
2196
+
2197
+ .bottomMiddle:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor)) > .resizers) > .resizer){
2198
+ bottom:var(--resizer-shift);
2199
+ left:calc(50% + var(--resizer-shift));
2200
+ }
2201
+
2202
+ .bottomLeft:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor)) > .resizers) > .resizer){
2203
+ bottom:var(--resizer-shift);
2204
+ left:var(--resizer-shift);
2205
+ }
2206
+
2207
+ .middleLeft:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor)) > .resizers) > .resizer){
2208
+ top:calc(50% + var(--resizer-shift));
2209
+ left:var(--resizer-shift);
2210
+ }
2211
+
2212
+ .topLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer),.bottomRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer){
2213
+ cursor:nwse-resize;
2214
+ }
2215
+
2216
+ .topMiddle:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer),.bottomMiddle:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer){
2217
+ cursor:ns-resize;
2218
+ }
2219
+
2220
+ .topRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer),.bottomLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer){
2221
+ cursor:nesw-resize;
2222
+ }
2223
+
2224
+ .middleRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer),.middleLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer){
2225
+ cursor:ew-resize;
2226
+ }
2227
+
2228
+ .topLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer),.bottomRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer){
2229
+ cursor:nesw-resize;
2230
+ }
2231
+
2232
+ .topMiddle:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer),.bottomMiddle:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer){
2233
+ cursor:ew-resize;
2234
+ }
2235
+
2236
+ .topRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer),.bottomLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer){
2237
+ cursor:nwse-resize;
2238
+ }
2239
+
2240
+ .middleRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer),.middleLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer){
2241
+ cursor:ns-resize;
2242
+ }
2243
+
2244
+ :is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="90"],[data-main-rotation="90"] [data-editor-rotation="0"],[data-main-rotation="180"] [data-editor-rotation="270"],[data-main-rotation="270"] [data-editor-rotation="180"])) .editToolbar{
2245
+ rotate:270deg;
2246
+ }
2247
+
2248
+ [dir="ltr"] :is(:is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="90"],[data-main-rotation="90"] [data-editor-rotation="0"],[data-main-rotation="180"] [data-editor-rotation="270"],[data-main-rotation="270"] [data-editor-rotation="180"])) .editToolbar){
2249
+ inset-inline-end:calc(0px - var(--editor-toolbar-vert-offset));
2250
+ inset-block-start:0;
2251
+ }
2252
+
2253
+ [dir="rtl"] :is(:is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="90"],[data-main-rotation="90"] [data-editor-rotation="0"],[data-main-rotation="180"] [data-editor-rotation="270"],[data-main-rotation="270"] [data-editor-rotation="180"])) .editToolbar){
2254
+ inset-inline-end:calc(100% + var(--editor-toolbar-vert-offset));
2255
+ inset-block-start:0;
2256
+ }
2257
+
2258
+ :is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="180"],[data-main-rotation="90"] [data-editor-rotation="90"],[data-main-rotation="180"] [data-editor-rotation="0"],[data-main-rotation="270"] [data-editor-rotation="270"])) .editToolbar{
2259
+ rotate:180deg;
2260
+ inset-inline-end:100%;
2261
+ inset-block-start:calc(0pc - var(--editor-toolbar-vert-offset));
2262
+ }
2263
+
2264
+ :is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="270"],[data-main-rotation="90"] [data-editor-rotation="180"],[data-main-rotation="180"] [data-editor-rotation="90"],[data-main-rotation="270"] [data-editor-rotation="0"])) .editToolbar{
2265
+ rotate:90deg;
2266
+ }
2267
+
2268
+ [dir="ltr"] :is(:is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="270"],[data-main-rotation="90"] [data-editor-rotation="180"],[data-main-rotation="180"] [data-editor-rotation="90"],[data-main-rotation="270"] [data-editor-rotation="0"])) .editToolbar){
2269
+ inset-inline-end:calc(100% + var(--editor-toolbar-vert-offset));
2270
+ inset-block-start:100%;
2271
+ }
2272
+
2273
+ [dir="rtl"] :is(:is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="270"],[data-main-rotation="90"] [data-editor-rotation="180"],[data-main-rotation="180"] [data-editor-rotation="90"],[data-main-rotation="270"] [data-editor-rotation="0"])) .editToolbar){
2274
+ inset-inline-start:calc(0px - var(--editor-toolbar-vert-offset));
2275
+ inset-block-start:0;
2276
+ }
2277
+
2278
+ .dialog.altText::backdrop{
2279
+ -webkit-mask:url(#alttext-manager-mask);
2280
+ mask:url(#alttext-manager-mask);
2281
+ }
2282
+
2283
+ .dialog.altText.positioned{
2284
+ margin:0;
2285
+ }
2286
+
2287
+ .dialog.altText #altTextContainer{
2288
+ width:300px;
2289
+ height:-moz-fit-content;
2290
+ height:fit-content;
2291
+ display:inline-flex;
2292
+ flex-direction:column;
2293
+ align-items:flex-start;
2294
+ gap:16px;
2295
+ }
2296
+
2297
+ :is(.dialog.altText #altTextContainer) #overallDescription{
2298
+ display:flex;
2299
+ flex-direction:column;
2300
+ align-items:flex-start;
2301
+ gap:4px;
2302
+ align-self:stretch;
2303
+ }
2304
+
2305
+ :is(:is(.dialog.altText #altTextContainer) #overallDescription) span{
2306
+ align-self:stretch;
2307
+ }
2308
+
2309
+ :is(:is(.dialog.altText #altTextContainer) #overallDescription) .title{
2310
+ font-size:13px;
2311
+ font-style:normal;
2312
+ font-weight:590;
2313
+ }
2314
+
2315
+ :is(.dialog.altText #altTextContainer) #addDescription{
2316
+ display:flex;
2317
+ flex-direction:column;
2318
+ align-items:stretch;
2319
+ gap:8px;
2320
+ }
2321
+
2322
+ :is(:is(.dialog.altText #altTextContainer) #addDescription) .descriptionArea{
2323
+ flex:1;
2324
+ padding-inline:24px 10px;
2325
+ }
2326
+
2327
+ :is(:is(:is(.dialog.altText #altTextContainer) #addDescription) .descriptionArea) textarea{
2328
+ width:100%;
2329
+ min-height:75px;
2330
+ }
2331
+
2332
+ :is(.dialog.altText #altTextContainer) #buttons{
2333
+ display:flex;
2334
+ justify-content:flex-end;
2335
+ align-items:flex-start;
2336
+ gap:8px;
2337
+ align-self:stretch;
2338
+ }
2339
+
2340
+ .dialog.newAltText{
2341
+ --new-alt-text-ai-disclaimer-icon:url(images/altText_disclaimer.svg);
2342
+ --new-alt-text-spinner-icon:url(images/altText_spinner.svg);
2343
+ --preview-image-bg-color:#f0f0f4;
2344
+ --preview-image-border:none;
185
2345
  }
186
2346
 
187
- .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after {
188
- transform: rotate(-45deg);
2347
+ @media (prefers-color-scheme: dark){
2348
+
2349
+ .dialog.newAltText{
2350
+ --preview-image-bg-color:#2b2a33;
189
2351
  }
2352
+ }
190
2353
 
191
- .annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before {
192
- border-radius: 50%;
193
- height: 50%;
194
- left: 30%;
195
- top: 20%;
196
- width: 50%;
2354
+ @media screen and (forced-colors: active){
2355
+
2356
+ .dialog.newAltText{
2357
+ --preview-image-bg-color:ButtonFace;
2358
+ --preview-image-border:1px solid ButtonText;
197
2359
  }
2360
+ }
2361
+
2362
+ .dialog.newAltText{
198
2363
 
199
- .annotationLayer .textWidgetAnnotation input.comb {
200
- font-family: monospace;
201
- padding-left: 2px;
202
- padding-right: 0;
2364
+ width:80%;
2365
+ max-width:570px;
2366
+ min-width:300px;
2367
+ padding:0;
203
2368
  }
204
2369
 
205
- .annotationLayer .textWidgetAnnotation input.comb:focus {
206
- /*
207
- * Letter spacing is placed on the right side of each character. Hence, the
208
- * letter spacing of the last character may be placed outside the visible
209
- * area, causing horizontal scrolling. We avoid this by extending the width
210
- * when the element has focus and revert this when it loses focus.
211
- */
212
- width: 115%;
2370
+ .dialog.newAltText.noAi #newAltTextDisclaimer,.dialog.newAltText.noAi #newAltTextCreateAutomatically{
2371
+ display:none !important;
2372
+ }
2373
+
2374
+ .dialog.newAltText.aiInstalling #newAltTextCreateAutomatically{
2375
+ display:none !important;
2376
+ }
2377
+
2378
+ .dialog.newAltText.aiInstalling #newAltTextDownloadModel{
2379
+ display:flex !important;
2380
+ }
2381
+
2382
+ .dialog.newAltText.error #newAltTextNotNow{
2383
+ display:none !important;
2384
+ }
2385
+
2386
+ .dialog.newAltText.error #newAltTextCancel{
2387
+ display:inline-block !important;
2388
+ }
2389
+
2390
+ .dialog.newAltText:not(.error) #newAltTextError{
2391
+ display:none !important;
2392
+ }
2393
+
2394
+ .dialog.newAltText #newAltTextContainer{
2395
+ display:flex;
2396
+ width:auto;
2397
+ padding:16px;
2398
+ flex-direction:column;
2399
+ justify-content:flex-end;
2400
+ align-items:flex-start;
2401
+ gap:12px;
2402
+ flex:0 1 auto;
2403
+ line-height:normal;
2404
+ }
2405
+
2406
+ :is(.dialog.newAltText #newAltTextContainer) #mainContent{
2407
+ display:flex;
2408
+ justify-content:flex-end;
2409
+ align-items:flex-start;
2410
+ gap:12px;
2411
+ align-self:stretch;
2412
+ flex:1 1 auto;
2413
+ }
2414
+
2415
+ :is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionAndSettings{
2416
+ display:flex;
2417
+ flex-direction:column;
2418
+ align-items:flex-start;
2419
+ gap:16px;
2420
+ flex:1 0 0;
2421
+ align-self:stretch;
2422
+ }
2423
+
2424
+ :is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction{
2425
+ display:flex;
2426
+ flex-direction:column;
2427
+ align-items:flex-start;
2428
+ gap:8px;
2429
+ align-self:stretch;
2430
+ flex:1 1 auto;
2431
+ }
2432
+
2433
+ :is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer{
2434
+ width:100%;
2435
+ height:70px;
2436
+ position:relative;
2437
+ }
2438
+
2439
+ :is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea{
2440
+ width:100%;
2441
+ height:100%;
2442
+ padding:8px;
2443
+ }
2444
+
2445
+ :is(:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea)::-moz-placeholder{
2446
+ color:var(--text-secondary-color);
2447
+ }
2448
+
2449
+ :is(:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea)::placeholder{
2450
+ color:var(--text-secondary-color);
2451
+ }
2452
+
2453
+ :is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) .altTextSpinner{
2454
+ display:none;
2455
+ position:absolute;
2456
+ width:16px;
2457
+ height:16px;
2458
+ inset-inline-start:8px;
2459
+ inset-block-start:8px;
2460
+ -webkit-mask-size:cover;
2461
+ mask-size:cover;
2462
+ background-color:var(--text-secondary-color);
2463
+ pointer-events:none;
2464
+ }
2465
+
2466
+ .loading:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea::-moz-placeholder{
2467
+ color:transparent;
2468
+ }
2469
+
2470
+ .loading:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea::placeholder{
2471
+ color:transparent;
2472
+ }
2473
+
2474
+ .loading:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) .altTextSpinner{
2475
+ display:inline-block;
2476
+ -webkit-mask-image:var(--new-alt-text-spinner-icon);
2477
+ mask-image:var(--new-alt-text-spinner-icon);
2478
+ }
2479
+
2480
+ :is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescription{
2481
+ font-size:11px;
2482
+ }
2483
+
2484
+ :is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDisclaimer{
2485
+ display:flex;
2486
+ flex-direction:row;
2487
+ align-items:flex-start;
2488
+ gap:4px;
2489
+ font-size:11px;
2490
+ }
2491
+
2492
+ :is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDisclaimer)::before{
2493
+ content:"";
2494
+ display:inline-block;
2495
+ width:17px;
2496
+ height:16px;
2497
+ -webkit-mask-image:var(--new-alt-text-ai-disclaimer-icon);
2498
+ mask-image:var(--new-alt-text-ai-disclaimer-icon);
2499
+ -webkit-mask-size:cover;
2500
+ mask-size:cover;
2501
+ background-color:var(--text-secondary-color);
2502
+ flex:1 0 auto;
2503
+ }
2504
+
2505
+ :is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #newAltTextDownloadModel{
2506
+ display:flex;
2507
+ align-items:center;
2508
+ gap:4px;
2509
+ align-self:stretch;
2510
+ }
2511
+
2512
+ :is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #newAltTextDownloadModel)::before{
2513
+ content:"";
2514
+ display:inline-block;
2515
+ width:16px;
2516
+ height:16px;
2517
+ -webkit-mask-image:var(--new-alt-text-spinner-icon);
2518
+ mask-image:var(--new-alt-text-spinner-icon);
2519
+ -webkit-mask-size:cover;
2520
+ mask-size:cover;
2521
+ background-color:var(--text-secondary-color);
2522
+ }
2523
+
2524
+ :is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #newAltTextImagePreview{
2525
+ width:180px;
2526
+ aspect-ratio:1;
2527
+ display:flex;
2528
+ justify-content:center;
2529
+ align-items:center;
2530
+ flex:0 0 auto;
2531
+ background-color:var(--preview-image-bg-color);
2532
+ border:var(--preview-image-border);
2533
+ }
2534
+
2535
+ :is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #newAltTextImagePreview) > canvas{
2536
+ max-width:100%;
2537
+ max-height:100%;
2538
+ }
2539
+
2540
+ .colorPicker{
2541
+ --hover-outline-color:#0250bb;
2542
+ --selected-outline-color:#0060df;
2543
+ --swatch-border-color:#cfcfd8;
213
2544
  }
214
2545
 
215
- .annotationLayer .buttonWidgetAnnotation.checkBox input,
216
- .annotationLayer .buttonWidgetAnnotation.radioButton input {
217
- -webkit-appearance: none;
218
- -moz-appearance: none;
219
- appearance: none;
220
- padding: 0;
2546
+ @media (prefers-color-scheme: dark){
2547
+
2548
+ .colorPicker{
2549
+ --hover-outline-color:#80ebff;
2550
+ --selected-outline-color:#aaf2ff;
2551
+ --swatch-border-color:#52525e;
221
2552
  }
2553
+ }
222
2554
 
223
- .annotationLayer .popupWrapper {
224
- position: absolute;
225
- width: 20em;
2555
+ @media screen and (forced-colors: active){
2556
+
2557
+ .colorPicker{
2558
+ --hover-outline-color:Highlight;
2559
+ --selected-outline-color:var(--hover-outline-color);
2560
+ --swatch-border-color:ButtonText;
226
2561
  }
2562
+ }
2563
+
2564
+ .colorPicker .swatch{
2565
+ width:16px;
2566
+ height:16px;
2567
+ border:1px solid var(--swatch-border-color);
2568
+ border-radius:100%;
2569
+ outline-offset:2px;
2570
+ box-sizing:border-box;
2571
+ forced-color-adjust:none;
2572
+ }
2573
+
2574
+ .colorPicker button:is(:hover,.selected) > .swatch{
2575
+ border:none;
2576
+ }
2577
+
2578
+ .annotationEditorLayer[data-main-rotation="0"] .highlightEditor:not(.free) > .editToolbar{
2579
+ rotate:0deg;
2580
+ }
2581
+
2582
+ .annotationEditorLayer[data-main-rotation="90"] .highlightEditor:not(.free) > .editToolbar{
2583
+ rotate:270deg;
2584
+ }
2585
+
2586
+ .annotationEditorLayer[data-main-rotation="180"] .highlightEditor:not(.free) > .editToolbar{
2587
+ rotate:180deg;
2588
+ }
2589
+
2590
+ .annotationEditorLayer[data-main-rotation="270"] .highlightEditor:not(.free) > .editToolbar{
2591
+ rotate:90deg;
2592
+ }
2593
+
2594
+ .annotationEditorLayer .highlightEditor{
2595
+ position:absolute;
2596
+ background:transparent;
2597
+ z-index:1;
2598
+ cursor:auto;
2599
+ max-width:100%;
2600
+ max-height:100%;
2601
+ border:none;
2602
+ outline:none;
2603
+ pointer-events:none;
2604
+ transform-origin:0 0;
2605
+ }
2606
+
2607
+ :is(.annotationEditorLayer .highlightEditor):not(.free){
2608
+ transform:none;
2609
+ }
2610
+
2611
+ :is(.annotationEditorLayer .highlightEditor) .internal{
2612
+ position:absolute;
2613
+ top:0;
2614
+ left:0;
2615
+ width:100%;
2616
+ height:100%;
2617
+ pointer-events:auto;
2618
+ }
2619
+
2620
+ .disabled:is(.annotationEditorLayer .highlightEditor) .internal{
2621
+ pointer-events:none;
2622
+ }
2623
+
2624
+ .selectedEditor:is(.annotationEditorLayer .highlightEditor) .internal{
2625
+ cursor:pointer;
2626
+ }
2627
+
2628
+ :is(.annotationEditorLayer .highlightEditor) .editToolbar{
2629
+ --editor-toolbar-colorpicker-arrow-image:url(images/toolbarButton-menuArrow.svg);
2630
+
2631
+ transform-origin:center !important;
2632
+ }
2633
+
2634
+ :is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker{
2635
+ position:relative;
2636
+ width:auto;
2637
+ display:flex;
2638
+ justify-content:center;
2639
+ align-items:center;
2640
+ gap:4px;
2641
+ padding:4px;
2642
+ }
2643
+
2644
+ :is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker)::after{
2645
+ content:"";
2646
+ -webkit-mask-image:var(--editor-toolbar-colorpicker-arrow-image);
2647
+ mask-image:var(--editor-toolbar-colorpicker-arrow-image);
2648
+ -webkit-mask-repeat:no-repeat;
2649
+ mask-repeat:no-repeat;
2650
+ -webkit-mask-position:center;
2651
+ mask-position:center;
2652
+ display:inline-block;
2653
+ background-color:var(--editor-toolbar-fg-color);
2654
+ width:12px;
2655
+ height:12px;
2656
+ }
2657
+
2658
+ :is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker):hover::after{
2659
+ background-color:var(--editor-toolbar-hover-fg-color);
2660
+ }
2661
+
2662
+ :is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker):has(.dropdown:not(.hidden)){
2663
+ background-color:var(--editor-toolbar-hover-bg-color);
2664
+ }
227
2665
 
228
- .annotationLayer .popup {
229
- position: absolute;
230
- z-index: 200;
231
- max-width: 20em;
232
- background-color: rgba(255, 255, 153, 1);
233
- box-shadow: 0px 2px 5px rgba(136, 136, 136, 1);
234
- border-radius: 2px;
235
- padding: 6px;
236
- margin-left: 5px;
237
- cursor: pointer;
238
- font: message-box;
239
- font-size: 9px;
240
- word-wrap: break-word;
2666
+ :is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker):has(.dropdown:not(.hidden))::after{
2667
+ scale:-1;
2668
+ }
2669
+
2670
+ :is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown{
2671
+ position:absolute;
2672
+ display:flex;
2673
+ justify-content:center;
2674
+ align-items:center;
2675
+ flex-direction:column;
2676
+ gap:11px;
2677
+ padding-block:8px;
2678
+ border-radius:6px;
2679
+ background-color:var(--editor-toolbar-bg-color);
2680
+ border:1px solid var(--editor-toolbar-border-color);
2681
+ box-shadow:var(--editor-toolbar-shadow);
2682
+ inset-block-start:calc(100% + 4px);
2683
+ width:calc(100% + 2 * var(--editor-toolbar-padding));
2684
+ }
2685
+
2686
+ :is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button{
2687
+ width:100%;
2688
+ height:auto;
2689
+ border:none;
2690
+ cursor:pointer;
2691
+ display:flex;
2692
+ justify-content:center;
2693
+ align-items:center;
2694
+ background:none;
2695
+ }
2696
+
2697
+ :is(:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button):is(:active,:focus-visible){
2698
+ outline:none;
2699
+ }
2700
+
2701
+ :is(:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button) > .swatch{
2702
+ outline-offset:2px;
2703
+ }
2704
+
2705
+ [aria-selected="true"]:is(:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button) > .swatch{
2706
+ outline:2px solid var(--selected-outline-color);
2707
+ }
2708
+
2709
+ :is(:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button):is(:hover,:active,:focus-visible) > .swatch{
2710
+ outline:2px solid var(--hover-outline-color);
2711
+ }
2712
+
2713
+ .editorParamsToolbar:has(#highlightParamsToolbarContainer){
2714
+ padding:unset;
241
2715
  }
242
2716
 
243
- .annotationLayer .popup > * {
244
- font-size: 9px;
2717
+ #highlightParamsToolbarContainer{
2718
+ gap:16px;
2719
+ padding-inline:10px;
2720
+ padding-block-end:12px;
245
2721
  }
246
2722
 
247
- .annotationLayer .popup h1 {
248
- display: inline-block;
2723
+ #highlightParamsToolbarContainer .colorPicker{
2724
+ display:flex;
2725
+ flex-direction:column;
2726
+ gap:8px;
2727
+ }
2728
+
2729
+ :is(#highlightParamsToolbarContainer .colorPicker) .dropdown{
2730
+ display:flex;
2731
+ justify-content:space-between;
2732
+ align-items:center;
2733
+ flex-direction:row;
2734
+ height:auto;
2735
+ }
2736
+
2737
+ :is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button{
2738
+ width:auto;
2739
+ height:auto;
2740
+ border:none;
2741
+ cursor:pointer;
2742
+ display:flex;
2743
+ justify-content:center;
2744
+ align-items:center;
2745
+ background:none;
2746
+ flex:0 0 auto;
2747
+ padding:0;
2748
+ }
2749
+
2750
+ :is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button) .swatch{
2751
+ width:24px;
2752
+ height:24px;
2753
+ }
2754
+
2755
+ :is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button):is(:active,:focus-visible){
2756
+ outline:none;
2757
+ }
2758
+
2759
+ [aria-selected="true"]:is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button) > .swatch{
2760
+ outline:2px solid var(--selected-outline-color);
2761
+ }
2762
+
2763
+ :is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button):is(:hover,:active,:focus-visible) > .swatch{
2764
+ outline:2px solid var(--hover-outline-color);
2765
+ }
2766
+
2767
+ #highlightParamsToolbarContainer #editorHighlightThickness{
2768
+ display:flex;
2769
+ flex-direction:column;
2770
+ align-items:center;
2771
+ gap:4px;
2772
+ align-self:stretch;
2773
+ }
2774
+
2775
+ :is(#highlightParamsToolbarContainer #editorHighlightThickness) .editorParamsLabel{
2776
+ height:auto;
2777
+ align-self:stretch;
2778
+ }
2779
+
2780
+ :is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker{
2781
+ display:flex;
2782
+ justify-content:space-between;
2783
+ align-items:center;
2784
+ align-self:stretch;
2785
+
2786
+ --example-color:#bfbfc9;
2787
+ }
2788
+
2789
+ @media (prefers-color-scheme: dark){
2790
+
2791
+ :is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker{
2792
+ --example-color:#80808e;
2793
+ }
2794
+ }
2795
+
2796
+ @media screen and (forced-colors: active){
2797
+
2798
+ :is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker{
2799
+ --example-color:CanvasText;
2800
+ }
2801
+ }
2802
+
2803
+ :is(:is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker) > .editorParamsSlider[disabled]){
2804
+ opacity:0.4;
2805
+ }
2806
+
2807
+ :is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker)::before,:is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker)::after{
2808
+ content:"";
2809
+ width:8px;
2810
+ aspect-ratio:1;
2811
+ display:block;
2812
+ border-radius:100%;
2813
+ background-color:var(--example-color);
2814
+ }
2815
+
2816
+ :is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker)::after{
2817
+ width:24px;
2818
+ }
2819
+
2820
+ :is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker) .editorParamsSlider{
2821
+ width:unset;
2822
+ height:14px;
2823
+ }
2824
+
2825
+ #highlightParamsToolbarContainer #editorHighlightVisibility{
2826
+ display:flex;
2827
+ flex-direction:column;
2828
+ align-items:flex-start;
2829
+ gap:8px;
2830
+ align-self:stretch;
2831
+ }
2832
+
2833
+ :is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider{
2834
+ --divider-color:#d7d7db;
2835
+ }
2836
+
2837
+ @media (prefers-color-scheme: dark){
2838
+
2839
+ :is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider{
2840
+ --divider-color:#8f8f9d;
2841
+ }
2842
+ }
2843
+
2844
+ @media screen and (forced-colors: active){
2845
+
2846
+ :is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider{
2847
+ --divider-color:CanvasText;
2848
+ }
2849
+ }
2850
+
2851
+ :is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider{
2852
+
2853
+ margin-block:4px;
2854
+ width:100%;
2855
+ height:1px;
2856
+ background-color:var(--divider-color);
2857
+ }
2858
+
2859
+ :is(#highlightParamsToolbarContainer #editorHighlightVisibility) .toggler{
2860
+ display:flex;
2861
+ justify-content:space-between;
2862
+ align-items:center;
2863
+ align-self:stretch;
2864
+ }
2865
+
2866
+ #altTextSettingsDialog{
2867
+ padding:16px;
249
2868
  }
250
2869
 
251
- .annotationLayer .popup span {
252
- display: inline-block;
253
- margin-left: 5px;
2870
+ #altTextSettingsDialog #altTextSettingsContainer{
2871
+ display:flex;
2872
+ width:573px;
2873
+ flex-direction:column;
2874
+ gap:16px;
2875
+ }
2876
+
2877
+ :is(#altTextSettingsDialog #altTextSettingsContainer) .mainContainer{
2878
+ gap:16px;
2879
+ }
2880
+
2881
+ :is(#altTextSettingsDialog #altTextSettingsContainer) .description{
2882
+ color:var(--text-secondary-color);
2883
+ }
2884
+
2885
+ :is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings{
2886
+ display:flex;
2887
+ flex-direction:column;
2888
+ gap:12px;
2889
+ }
2890
+
2891
+ :is(:is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings) button{
2892
+ width:-moz-fit-content;
2893
+ width:fit-content;
2894
+ }
2895
+
2896
+ .download:is(:is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings) #deleteModelButton{
2897
+ display:none;
2898
+ }
2899
+
2900
+ :is(:is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings):not(.download) #downloadModelButton{
2901
+ display:none;
2902
+ }
2903
+
2904
+ :is(#altTextSettingsDialog #altTextSettingsContainer) #automaticAltText,:is(#altTextSettingsDialog #altTextSettingsContainer) #altTextEditor{
2905
+ display:flex;
2906
+ flex-direction:column;
2907
+ gap:8px;
2908
+ }
2909
+
2910
+ :is(#altTextSettingsDialog #altTextSettingsContainer) #createModelDescription,:is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings,:is(#altTextSettingsDialog #altTextSettingsContainer) #showAltTextDialogDescription{
2911
+ padding-inline-start:40px;
2912
+ }
2913
+
2914
+ :is(#altTextSettingsDialog #altTextSettingsContainer) #automaticSettings{
2915
+ display:flex;
2916
+ flex-direction:column;
2917
+ gap:16px;
2918
+ }
2919
+
2920
+ :root{
2921
+ --viewer-container-height:0;
2922
+ --pdfViewer-padding-bottom:0;
2923
+ --page-margin:1px auto -8px;
2924
+ --page-border:9px solid transparent;
2925
+ --spreadHorizontalWrapped-margin-LR:-3.5px;
2926
+ --loading-icon-delay:400ms;
254
2927
  }
255
2928
 
256
- .annotationLayer .popup p {
257
- border-top: 1px solid rgba(51, 51, 51, 1);
258
- margin-top: 2px;
259
- padding-top: 2px;
2929
+ @media screen and (forced-colors: active){
2930
+ :root{
2931
+ --pdfViewer-padding-bottom:9px;
2932
+ --page-margin:8px auto -1px;
2933
+ --page-border:1px solid CanvasText;
2934
+ --spreadHorizontalWrapped-margin-LR:3.5px;
2935
+ }
260
2936
  }
261
2937
 
262
- .annotationLayer .highlightAnnotation,
263
- .annotationLayer .underlineAnnotation,
264
- .annotationLayer .squigglyAnnotation,
265
- .annotationLayer .strikeoutAnnotation,
266
- .annotationLayer .freeTextAnnotation,
267
- .annotationLayer .lineAnnotation svg line,
268
- .annotationLayer .squareAnnotation svg rect,
269
- .annotationLayer .circleAnnotation svg ellipse,
270
- .annotationLayer .polylineAnnotation svg polyline,
271
- .annotationLayer .polygonAnnotation svg polygon,
272
- .annotationLayer .caretAnnotation,
273
- .annotationLayer .inkAnnotation svg polyline,
274
- .annotationLayer .stampAnnotation,
275
- .annotationLayer .fileAttachmentAnnotation {
276
- cursor: pointer;
2938
+ [data-main-rotation="90"]{
2939
+ transform:rotate(90deg) translateY(-100%);
2940
+ }
2941
+ [data-main-rotation="180"]{
2942
+ transform:rotate(180deg) translate(-100%, -100%);
2943
+ }
2944
+ [data-main-rotation="270"]{
2945
+ transform:rotate(270deg) translateX(-100%);
277
2946
  }
278
2947
 
279
- .pdfViewer .canvasWrapper {
280
- overflow: hidden;
2948
+ #hiddenCopyElement,
2949
+ .hiddenCanvasElement{
2950
+ position:absolute;
2951
+ top:0;
2952
+ left:0;
2953
+ width:0;
2954
+ height:0;
2955
+ display:none;
281
2956
  }
282
2957
 
283
- .pdfViewer .page {
284
- direction: ltr;
285
- width: 816px;
286
- height: 1056px;
287
- margin: 1px auto -8px auto;
288
- position: relative;
289
- overflow: visible;
290
- border: 9px solid transparent;
291
- background-clip: content-box;
292
- -o-border-image: url(/assets/pdfjs/images/shadow.png) 9 9 repeat;
293
- border-image: url(/assets/pdfjs/images/shadow.png) 9 9 repeat;
294
- background-color: rgba(255, 255, 255, 1);
2958
+ .pdfViewer{
2959
+ --scale-factor:1;
2960
+ --page-bg-color:unset;
2961
+
2962
+ padding-bottom:var(--pdfViewer-padding-bottom);
2963
+
2964
+ --hcm-highlight-filter:none;
2965
+ --hcm-highlight-selected-filter:none;
295
2966
  }
296
2967
 
297
- .pdfViewer.removePageBorders .page {
298
- margin: 0px auto 10px auto;
299
- border: none;
2968
+ @media screen and (forced-colors: active){
2969
+
2970
+ .pdfViewer{
2971
+ --hcm-highlight-filter:invert(100%);
300
2972
  }
2973
+ }
2974
+
2975
+ .pdfViewer.copyAll{
2976
+ cursor:wait;
2977
+ }
2978
+
2979
+ .pdfViewer .canvasWrapper{
2980
+ overflow:hidden;
2981
+ width:100%;
2982
+ height:100%;
2983
+ }
2984
+
2985
+ :is(.pdfViewer .canvasWrapper) canvas{
2986
+ margin:0;
2987
+ display:block;
2988
+ width:100%;
2989
+ height:100%;
2990
+ }
2991
+
2992
+ [hidden]:is(:is(.pdfViewer .canvasWrapper) canvas){
2993
+ display:none;
2994
+ }
2995
+
2996
+ [zooming]:is(:is(.pdfViewer .canvasWrapper) canvas){
2997
+ width:100%;
2998
+ height:100%;
2999
+ }
3000
+
3001
+ :is(:is(.pdfViewer .canvasWrapper) canvas) .structTree{
3002
+ contain:strict;
3003
+ }
301
3004
 
302
- .pdfViewer.singlePageView {
303
- display: inline-block;
3005
+ .pdfViewer .page{
3006
+ --scale-round-x:1px;
3007
+ --scale-round-y:1px;
3008
+
3009
+ direction:ltr;
3010
+ width:816px;
3011
+ height:1056px;
3012
+ margin:var(--page-margin);
3013
+ position:relative;
3014
+ overflow:visible;
3015
+ border:var(--page-border);
3016
+ background-clip:content-box;
3017
+ background-color:var(--page-bg-color, rgb(255 255 255));
304
3018
  }
305
3019
 
306
- .pdfViewer.singlePageView .page {
307
- margin: 0;
308
- border: none;
3020
+ .pdfViewer .dummyPage{
3021
+ position:relative;
3022
+ width:0;
3023
+ height:var(--viewer-container-height);
309
3024
  }
310
3025
 
311
- .pdfViewer.scrollHorizontal, .pdfViewer.scrollWrapped, .spread {
312
- margin-left: 3.5px;
313
- margin-right: 3.5px;
314
- text-align: center;
3026
+ .pdfViewer.noUserSelect{
3027
+ -webkit-user-select:none;
3028
+ -moz-user-select:none;
3029
+ user-select:none;
315
3030
  }
316
3031
 
317
- .pdfViewer.scrollHorizontal, .spread {
318
- white-space: nowrap;
3032
+ .pdfViewer.removePageBorders .page{
3033
+ margin:0 auto 10px;
3034
+ border:none;
319
3035
  }
320
3036
 
321
- .pdfViewer.removePageBorders,
322
- .pdfViewer.scrollHorizontal .spread,
323
- .pdfViewer.scrollWrapped .spread {
324
- margin-left: 0;
325
- margin-right: 0;
3037
+ .pdfViewer.singlePageView{
3038
+ display:inline-block;
326
3039
  }
327
3040
 
328
- .spread .page,
329
- .pdfViewer.scrollHorizontal .page,
330
- .pdfViewer.scrollWrapped .page,
331
- .pdfViewer.scrollHorizontal .spread,
332
- .pdfViewer.scrollWrapped .spread {
333
- display: inline-block;
334
- vertical-align: middle;
3041
+ .pdfViewer.singlePageView .page{
3042
+ margin:0;
3043
+ border:none;
335
3044
  }
336
3045
 
337
- .spread .page,
338
- .pdfViewer.scrollHorizontal .page,
339
- .pdfViewer.scrollWrapped .page {
340
- margin-left: -3.5px;
341
- margin-right: -3.5px;
3046
+ .pdfViewer:is(.scrollHorizontal, .scrollWrapped),
3047
+ .spread{
3048
+ margin-inline:3.5px;
3049
+ text-align:center;
342
3050
  }
343
3051
 
344
- .pdfViewer.removePageBorders .spread .page,
345
- .pdfViewer.removePageBorders.scrollHorizontal .page,
346
- .pdfViewer.removePageBorders.scrollWrapped .page {
347
- margin-left: 5px;
348
- margin-right: 5px;
3052
+ .pdfViewer.scrollHorizontal,
3053
+ .spread{
3054
+ white-space:nowrap;
349
3055
  }
350
3056
 
351
- .pdfViewer .page canvas {
352
- margin: 0;
353
- display: block;
3057
+ .pdfViewer.removePageBorders,
3058
+ .pdfViewer:is(.scrollHorizontal, .scrollWrapped) .spread{
3059
+ margin-inline:0;
354
3060
  }
355
3061
 
356
- .pdfViewer .page canvas[hidden] {
357
- display: none;
3062
+ .spread :is(.page, .dummyPage),
3063
+ .pdfViewer:is(.scrollHorizontal, .scrollWrapped) :is(.page, .spread){
3064
+ display:inline-block;
3065
+ vertical-align:middle;
358
3066
  }
359
3067
 
360
- .pdfViewer .page .loadingIcon {
361
- position: absolute;
362
- display: block;
363
- left: 0;
364
- top: 0;
365
- right: 0;
366
- bottom: 0;
367
- background: url('/assets/pdfjs/images/loading-icon.gif') center no-repeat;
3068
+ .spread .page,
3069
+ .pdfViewer:is(.scrollHorizontal, .scrollWrapped) .page{
3070
+ margin-inline:var(--spreadHorizontalWrapped-margin-LR);
368
3071
  }
369
3072
 
370
- .pdfPresentationMode .pdfViewer {
371
- margin-left: 0;
372
- margin-right: 0;
3073
+ .pdfViewer.removePageBorders .spread .page,
3074
+ .pdfViewer.removePageBorders:is(.scrollHorizontal, .scrollWrapped) .page{
3075
+ margin-inline:5px;
373
3076
  }
374
3077
 
375
- .pdfPresentationMode .pdfViewer .page,
376
- .pdfPresentationMode .pdfViewer .spread {
377
- display: block;
3078
+ .pdfViewer .page.loadingIcon::after{
3079
+ position:absolute;
3080
+ top:0;
3081
+ left:0;
3082
+ content:"";
3083
+ width:100%;
3084
+ height:100%;
3085
+ background:url("images/loading-icon.gif") center no-repeat;
3086
+ display:none;
3087
+ transition-property:display;
3088
+ transition-delay:var(--loading-icon-delay);
3089
+ z-index:5;
3090
+ contain:strict;
378
3091
  }
379
3092
 
380
- .pdfPresentationMode .pdfViewer .page,
381
- .pdfPresentationMode .pdfViewer.removePageBorders .page {
382
- margin-left: auto;
383
- margin-right: auto;
3093
+ .pdfViewer .page.loading::after{
3094
+ display:block;
384
3095
  }
385
3096
 
386
- .pdfPresentationMode:-ms-fullscreen .pdfViewer .page {
387
- margin-bottom: 100% !important;
3097
+ .pdfViewer .page:not(.loading)::after{
3098
+ transition-property:none;
3099
+ display:none;
388
3100
  }
389
3101
 
390
- .pdfPresentationMode:-webkit-full-screen .pdfViewer .page {
391
- margin-bottom: 100%;
392
- border: 0;
3102
+ .pdfPresentationMode .pdfViewer{
3103
+ padding-bottom:0;
393
3104
  }
394
3105
 
395
- .pdfPresentationMode:-moz-full-screen .pdfViewer .page {
396
- margin-bottom: 100%;
397
- border: 0;
3106
+ .pdfPresentationMode .spread{
3107
+ margin:0;
398
3108
  }
399
3109
 
400
- .pdfPresentationMode:fullscreen .pdfViewer .page {
401
- margin-bottom: 100%;
402
- border: 0;
3110
+ .pdfPresentationMode .pdfViewer .page{
3111
+ margin:0 auto;
3112
+ border:2px solid transparent;
403
3113
  }