You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

4371 lines
118KB

  1. /* Copyright 2014 Mozilla Foundation
  2. *
  3. * Licensed under the Apache License, Version 2.0 (the "License");
  4. * you may not use this file except in compliance with the License.
  5. * You may obtain a copy of the License at
  6. *
  7. * http://www.apache.org/licenses/LICENSE-2.0
  8. *
  9. * Unless required by applicable law or agreed to in writing, software
  10. * distributed under the License is distributed on an "AS IS" BASIS,
  11. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12. * See the License for the specific language governing permissions and
  13. * limitations under the License.
  14. */
  15. .dialog{
  16. --dialog-bg-color:white;
  17. --dialog-border-color:white;
  18. --dialog-shadow:0 2px 14px 0 rgb(58 57 68 / 0.2);
  19. --text-primary-color:#15141a;
  20. --text-secondary-color:#5b5b66;
  21. --hover-filter:brightness(0.9);
  22. --focus-ring-color:#0060df;
  23. --focus-ring-outline:2px solid var(--focus-ring-color);
  24. --textarea-border-color:#8f8f9d;
  25. --textarea-bg-color:white;
  26. --textarea-fg-color:var(--text-secondary-color);
  27. --radio-bg-color:#f0f0f4;
  28. --radio-checked-bg-color:#fbfbfe;
  29. --radio-border-color:#8f8f9d;
  30. --radio-checked-border-color:#0060df;
  31. --button-secondary-bg-color:#f0f0f4;
  32. --button-secondary-fg-color:var(--text-primary-color);
  33. --button-secondary-border-color:var(--button-secondary-bg-color);
  34. --button-secondary-hover-bg-color:var(--button-secondary-bg-color);
  35. --button-secondary-hover-fg-color:var(--button-secondary-fg-color);
  36. --button-secondary-hover-border-color:var(--button-secondary-hover-bg-color);
  37. --button-primary-bg-color:#0060df;
  38. --button-primary-fg-color:#fbfbfe;
  39. --button-primary-hover-bg-color:var(--button-primary-bg-color);
  40. --button-primary-hover-fg-color:var(--button-primary-fg-color);
  41. --button-primary-hover-border-color:var(--button-primary-hover-bg-color);
  42. font:message-box;
  43. font-size:13px;
  44. font-weight:400;
  45. line-height:150%;
  46. border-radius:4px;
  47. padding:12px 16px;
  48. border:1px solid var(--dialog-border-color);
  49. background:var(--dialog-bg-color);
  50. color:var(--text-primary-color);
  51. box-shadow:var(--dialog-shadow);
  52. }
  53. @media (prefers-color-scheme: dark){
  54. :where(html:not(.is-light)) .dialog{
  55. --dialog-bg-color:#1c1b22;
  56. --dialog-border-color:#1c1b22;
  57. --dialog-shadow:0 2px 14px 0 #15141a;
  58. --text-primary-color:#fbfbfe;
  59. --text-secondary-color:#cfcfd8;
  60. --focus-ring-color:#0df;
  61. --hover-filter:brightness(1.4);
  62. --textarea-bg-color:#42414d;
  63. --radio-bg-color:#2b2a33;
  64. --radio-checked-bg-color:#15141a;
  65. --radio-checked-border-color:#0df;
  66. --button-secondary-bg-color:#2b2a33;
  67. --button-primary-bg-color:#0df;
  68. --button-primary-fg-color:#15141a;
  69. }
  70. }
  71. :where(html.is-dark) .dialog{
  72. --dialog-bg-color:#1c1b22;
  73. --dialog-border-color:#1c1b22;
  74. --dialog-shadow:0 2px 14px 0 #15141a;
  75. --text-primary-color:#fbfbfe;
  76. --text-secondary-color:#cfcfd8;
  77. --focus-ring-color:#0df;
  78. --hover-filter:brightness(1.4);
  79. --textarea-bg-color:#42414d;
  80. --radio-bg-color:#2b2a33;
  81. --radio-checked-bg-color:#15141a;
  82. --radio-checked-border-color:#0df;
  83. --button-secondary-bg-color:#2b2a33;
  84. --button-primary-bg-color:#0df;
  85. --button-primary-fg-color:#15141a;
  86. }
  87. @media screen and (forced-colors: active){
  88. .dialog{
  89. --dialog-bg-color:Canvas;
  90. --dialog-border-color:CanvasText;
  91. --dialog-shadow:none;
  92. --text-primary-color:CanvasText;
  93. --text-secondary-color:CanvasText;
  94. --hover-filter:none;
  95. --focus-ring-color:ButtonBorder;
  96. --textarea-border-color:ButtonBorder;
  97. --textarea-bg-color:Field;
  98. --textarea-fg-color:ButtonText;
  99. --radio-bg-color:ButtonFace;
  100. --radio-checked-bg-color:ButtonFace;
  101. --radio-border-color:ButtonText;
  102. --radio-checked-border-color:ButtonText;
  103. --button-secondary-bg-color:ButtonFace;
  104. --button-secondary-fg-color:ButtonText;
  105. --button-secondary-border-color:ButtonText;
  106. --button-secondary-hover-bg-color:AccentColor;
  107. --button-secondary-hover-fg-color:AccentColorText;
  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. .dialog .mainContainer *:focus-visible{
  115. outline:var(--focus-ring-outline);
  116. outline-offset:2px;
  117. }
  118. .dialog .mainContainer .radio{
  119. display:flex;
  120. flex-direction:column;
  121. align-items:flex-start;
  122. gap:4px;
  123. }
  124. .dialog .mainContainer .radio > .radioButton{
  125. display:flex;
  126. gap:8px;
  127. align-self:stretch;
  128. align-items:center;
  129. }
  130. .dialog .mainContainer .radio > .radioButton input{
  131. -webkit-appearance:none;
  132. -moz-appearance:none;
  133. appearance:none;
  134. box-sizing:border-box;
  135. width:16px;
  136. height:16px;
  137. border-radius:50%;
  138. background-color:var(--radio-bg-color);
  139. border:1px solid var(--radio-border-color);
  140. }
  141. .dialog .mainContainer .radio > .radioButton input:hover{
  142. filter:var(--hover-filter);
  143. }
  144. .dialog .mainContainer .radio > .radioButton input:checked{
  145. background-color:var(--radio-checked-bg-color);
  146. border:4px solid var(--radio-checked-border-color);
  147. }
  148. .dialog .mainContainer .radio > .radioLabel{
  149. display:flex;
  150. padding-inline-start:24px;
  151. align-items:flex-start;
  152. gap:10px;
  153. align-self:stretch;
  154. }
  155. .dialog .mainContainer .radio > .radioLabel > span{
  156. flex:1 0 0;
  157. font-size:11px;
  158. color:var(--text-secondary-color);
  159. }
  160. .dialog .mainContainer button{
  161. border-radius:4px;
  162. border:1px solid;
  163. font:menu;
  164. font-weight:600;
  165. padding:4px 16px;
  166. width:auto;
  167. height:32px;
  168. }
  169. .dialog .mainContainer button:hover{
  170. cursor:pointer;
  171. filter:var(--hover-filter);
  172. }
  173. .dialog .mainContainer button.secondaryButton{
  174. color:var(--button-secondary-fg-color);
  175. background-color:var(--button-secondary-bg-color);
  176. border-color:var(--button-secondary-border-color);
  177. }
  178. .dialog .mainContainer button.secondaryButton:hover{
  179. color:var(--button-secondary-hover-fg-color);
  180. background-color:var(--button-secondary-hover-bg-color);
  181. border-color:var(--button-secondary-hover-border-color);
  182. }
  183. .dialog .mainContainer button.primaryButton{
  184. color:var(--button-primary-hover-fg-color);
  185. background-color:var(--button-primary-hover-bg-color);
  186. border-color:var(--button-primary-hover-border-color);
  187. opacity:1;
  188. }
  189. .dialog .mainContainer button.primaryButton:hover{
  190. color:var(--button-primary-hover-fg-color);
  191. background-color:var(--button-primary-hover-bg-color);
  192. border-color:var(--button-primary-hover-border-color);
  193. }
  194. .dialog .mainContainer textarea{
  195. font:inherit;
  196. padding:8px;
  197. resize:none;
  198. margin:0;
  199. box-sizing:border-box;
  200. border-radius:4px;
  201. border:1px solid var(--textarea-border-color);
  202. background:var(--textarea-bg-color);
  203. color:var(--textarea-fg-color);
  204. }
  205. .dialog .mainContainer textarea:focus{
  206. outline-offset:0;
  207. border-color:transparent;
  208. }
  209. .dialog .mainContainer textarea:disabled{
  210. pointer-events:none;
  211. opacity:0.4;
  212. }
  213. .textLayer{
  214. position:absolute;
  215. text-align:initial;
  216. inset:0;
  217. overflow:clip;
  218. opacity:1;
  219. line-height:1;
  220. -webkit-text-size-adjust:none;
  221. -moz-text-size-adjust:none;
  222. text-size-adjust:none;
  223. forced-color-adjust:none;
  224. transform-origin:0 0;
  225. caret-color:CanvasText;
  226. z-index:0;
  227. }
  228. .textLayer.highlighting{
  229. touch-action:none;
  230. }
  231. .textLayer :is(span, br){
  232. color:transparent;
  233. position:absolute;
  234. white-space:pre;
  235. cursor:text;
  236. transform-origin:0% 0%;
  237. }
  238. .textLayer > :not(.markedContent),
  239. .textLayer .markedContent span:not(.markedContent){
  240. z-index:1;
  241. }
  242. .textLayer span.markedContent{
  243. top:0;
  244. height:0;
  245. }
  246. .textLayer .highlight{
  247. --highlight-bg-color:rgb(180 0 170 / 0.25);
  248. --highlight-selected-bg-color:rgb(0 100 0 / 0.25);
  249. --highlight-backdrop-filter:none;
  250. --highlight-selected-backdrop-filter:none;
  251. margin:-1px;
  252. padding:1px;
  253. background-color:var(--highlight-bg-color);
  254. -webkit-backdrop-filter:var(--highlight-backdrop-filter);
  255. backdrop-filter:var(--highlight-backdrop-filter);
  256. border-radius:4px;
  257. }
  258. @media screen and (forced-colors: active){
  259. .textLayer .highlight{
  260. --highlight-bg-color:transparent;
  261. --highlight-selected-bg-color:transparent;
  262. --highlight-backdrop-filter:var(--hcm-highlight-filter);
  263. --highlight-selected-backdrop-filter:var(
  264. --hcm-highlight-selected-filter
  265. );
  266. }
  267. }
  268. .textLayer .highlight.appended{
  269. position:initial;
  270. }
  271. .textLayer .highlight.begin{
  272. border-radius:4px 0 0 4px;
  273. }
  274. .textLayer .highlight.end{
  275. border-radius:0 4px 4px 0;
  276. }
  277. .textLayer .highlight.middle{
  278. border-radius:0;
  279. }
  280. .textLayer .highlight.selected{
  281. background-color:var(--highlight-selected-bg-color);
  282. -webkit-backdrop-filter:var(--highlight-selected-backdrop-filter);
  283. backdrop-filter:var(--highlight-selected-backdrop-filter);
  284. }
  285. .textLayer ::-moz-selection{
  286. background:rgba(0 0 255 / 0.25);
  287. background:color-mix(in srgb, AccentColor, transparent 75%);
  288. }
  289. .textLayer ::selection{
  290. background:rgba(0 0 255 / 0.25);
  291. background:color-mix(in srgb, AccentColor, transparent 75%);
  292. }
  293. .textLayer br::-moz-selection{
  294. background:transparent;
  295. }
  296. .textLayer br::selection{
  297. background:transparent;
  298. }
  299. .textLayer .endOfContent{
  300. display:block;
  301. position:absolute;
  302. inset:100% 0 0;
  303. z-index:0;
  304. cursor:default;
  305. -webkit-user-select:none;
  306. -moz-user-select:none;
  307. user-select:none;
  308. }
  309. .textLayer .endOfContent.active{
  310. top:0;
  311. }
  312. .annotationLayer{
  313. --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>");
  314. --input-focus-border-color:Highlight;
  315. --input-focus-outline:1px solid Canvas;
  316. --input-unfocused-border-color:transparent;
  317. --input-disabled-border-color:transparent;
  318. --input-hover-border-color:black;
  319. --link-outline:none;
  320. position:absolute;
  321. top:0;
  322. left:0;
  323. pointer-events:none;
  324. transform-origin:0 0;
  325. }
  326. @media screen and (forced-colors: active){
  327. .annotationLayer{
  328. --input-focus-border-color:CanvasText;
  329. --input-unfocused-border-color:ActiveText;
  330. --input-disabled-border-color:GrayText;
  331. --input-hover-border-color:Highlight;
  332. --link-outline:1.5px solid LinkText;
  333. }
  334. .annotationLayer .textWidgetAnnotation :is(input, textarea):required, .annotationLayer .choiceWidgetAnnotation select:required, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required{
  335. outline:1.5px solid selectedItem;
  336. }
  337. .annotationLayer .linkAnnotation{
  338. outline:var(--link-outline);
  339. }
  340. .annotationLayer .linkAnnotation:hover{
  341. -webkit-backdrop-filter:var(--hcm-highlight-filter);
  342. backdrop-filter:var(--hcm-highlight-filter);
  343. }
  344. .annotationLayer .linkAnnotation > a:hover{
  345. opacity:0 !important;
  346. background:none !important;
  347. box-shadow:none;
  348. }
  349. .annotationLayer .popupAnnotation .popup{
  350. outline:calc(1.5px * var(--scale-factor)) solid CanvasText !important;
  351. background-color:ButtonFace !important;
  352. color:ButtonText !important;
  353. }
  354. .annotationLayer .highlightArea:hover::after{
  355. position:absolute;
  356. top:0;
  357. left:0;
  358. width:100%;
  359. height:100%;
  360. -webkit-backdrop-filter:var(--hcm-highlight-filter);
  361. backdrop-filter:var(--hcm-highlight-filter);
  362. content:"";
  363. pointer-events:none;
  364. }
  365. .annotationLayer .popupAnnotation.focused .popup{
  366. outline:calc(3px * var(--scale-factor)) solid Highlight !important;
  367. }
  368. }
  369. .annotationLayer[data-main-rotation="90"] .norotate{
  370. transform:rotate(270deg) translateX(-100%);
  371. }
  372. .annotationLayer[data-main-rotation="180"] .norotate{
  373. transform:rotate(180deg) translate(-100%, -100%);
  374. }
  375. .annotationLayer[data-main-rotation="270"] .norotate{
  376. transform:rotate(90deg) translateY(-100%);
  377. }
  378. .annotationLayer.disabled section,
  379. .annotationLayer.disabled .popup{
  380. pointer-events:none;
  381. }
  382. .annotationLayer .annotationContent{
  383. position:absolute;
  384. width:100%;
  385. height:100%;
  386. pointer-events:none;
  387. }
  388. .annotationLayer .annotationContent.freetext{
  389. background:transparent;
  390. border:none;
  391. inset:0;
  392. overflow:visible;
  393. white-space:nowrap;
  394. font:10px sans-serif;
  395. line-height:1.35;
  396. -webkit-user-select:none;
  397. -moz-user-select:none;
  398. user-select:none;
  399. }
  400. .annotationLayer section{
  401. position:absolute;
  402. text-align:initial;
  403. pointer-events:auto;
  404. box-sizing:border-box;
  405. transform-origin:0 0;
  406. }
  407. .annotationLayer section:has(div.annotationContent) canvas.annotationContent{
  408. display:none;
  409. }
  410. .annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a{
  411. position:absolute;
  412. font-size:1em;
  413. top:0;
  414. left:0;
  415. width:100%;
  416. height:100%;
  417. }
  418. .annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder)
  419. > a:hover{
  420. opacity:0.2;
  421. background-color:rgb(255 255 0);
  422. box-shadow:0 2px 10px rgb(255 255 0);
  423. }
  424. .annotationLayer .linkAnnotation.hasBorder:hover{
  425. background-color:rgb(255 255 0 / 0.2);
  426. }
  427. .annotationLayer .hasBorder{
  428. background-size:100% 100%;
  429. }
  430. .annotationLayer .textAnnotation img{
  431. position:absolute;
  432. cursor:pointer;
  433. width:100%;
  434. height:100%;
  435. top:0;
  436. left:0;
  437. }
  438. .annotationLayer .textWidgetAnnotation :is(input, textarea), .annotationLayer .choiceWidgetAnnotation select, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input{
  439. background-image:var(--annotation-unfocused-field-background);
  440. border:2px solid var(--input-unfocused-border-color);
  441. box-sizing:border-box;
  442. font:calc(9px * var(--scale-factor)) sans-serif;
  443. height:100%;
  444. margin:0;
  445. vertical-align:top;
  446. width:100%;
  447. }
  448. .annotationLayer .textWidgetAnnotation :is(input, textarea):required, .annotationLayer .choiceWidgetAnnotation select:required, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required{
  449. outline:1.5px solid red;
  450. }
  451. .annotationLayer .choiceWidgetAnnotation select option{
  452. padding:0;
  453. }
  454. .annotationLayer .buttonWidgetAnnotation.radioButton input{
  455. border-radius:50%;
  456. }
  457. .annotationLayer .textWidgetAnnotation textarea{
  458. resize:none;
  459. }
  460. .annotationLayer .textWidgetAnnotation [disabled]:is(input, textarea), .annotationLayer .choiceWidgetAnnotation select[disabled], .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input[disabled]{
  461. background:none;
  462. border:2px solid var(--input-disabled-border-color);
  463. cursor:not-allowed;
  464. }
  465. .annotationLayer .textWidgetAnnotation :is(input, textarea):hover, .annotationLayer .choiceWidgetAnnotation select:hover, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:hover{
  466. border:2px solid var(--input-hover-border-color);
  467. }
  468. .annotationLayer .textWidgetAnnotation :is(input, textarea):hover, .annotationLayer .choiceWidgetAnnotation select:hover, .annotationLayer .buttonWidgetAnnotation.checkBox input:hover{
  469. border-radius:2px;
  470. }
  471. .annotationLayer .textWidgetAnnotation :is(input, textarea):focus, .annotationLayer .choiceWidgetAnnotation select:focus{
  472. background:none;
  473. border:2px solid var(--input-focus-border-color);
  474. border-radius:2px;
  475. outline:var(--input-focus-outline);
  476. }
  477. .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) :focus{
  478. background-image:none;
  479. background-color:transparent;
  480. }
  481. .annotationLayer .buttonWidgetAnnotation.checkBox :focus{
  482. border:2px solid var(--input-focus-border-color);
  483. border-radius:2px;
  484. outline:var(--input-focus-outline);
  485. }
  486. .annotationLayer .buttonWidgetAnnotation.radioButton :focus{
  487. border:2px solid var(--input-focus-border-color);
  488. outline:var(--input-focus-outline);
  489. }
  490. .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,
  491. .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after,
  492. .annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before{
  493. background-color:CanvasText;
  494. content:"";
  495. display:block;
  496. position:absolute;
  497. }
  498. .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,
  499. .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after{
  500. height:80%;
  501. left:45%;
  502. width:1px;
  503. }
  504. .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before{
  505. transform:rotate(45deg);
  506. }
  507. .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after{
  508. transform:rotate(-45deg);
  509. }
  510. .annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before{
  511. border-radius:50%;
  512. height:50%;
  513. left:25%;
  514. top:25%;
  515. width:50%;
  516. }
  517. .annotationLayer .textWidgetAnnotation input.comb{
  518. font-family:monospace;
  519. padding-left:2px;
  520. padding-right:0;
  521. }
  522. .annotationLayer .textWidgetAnnotation input.comb:focus{
  523. width:103%;
  524. }
  525. .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input{
  526. -webkit-appearance:none;
  527. -moz-appearance:none;
  528. appearance:none;
  529. }
  530. .annotationLayer .fileAttachmentAnnotation .popupTriggerArea{
  531. height:100%;
  532. width:100%;
  533. }
  534. .annotationLayer .popupAnnotation{
  535. position:absolute;
  536. font-size:calc(9px * var(--scale-factor));
  537. pointer-events:none;
  538. width:-moz-max-content;
  539. width:max-content;
  540. max-width:45%;
  541. height:auto;
  542. }
  543. .annotationLayer .popup{
  544. background-color:rgb(255 255 153);
  545. box-shadow:0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor)) rgb(136 136 136);
  546. border-radius:calc(2px * var(--scale-factor));
  547. outline:1.5px solid rgb(255 255 74);
  548. padding:calc(6px * var(--scale-factor));
  549. cursor:pointer;
  550. font:message-box;
  551. white-space:normal;
  552. word-wrap:break-word;
  553. pointer-events:auto;
  554. }
  555. .annotationLayer .popupAnnotation.focused .popup{
  556. outline-width:3px;
  557. }
  558. .annotationLayer .popup *{
  559. font-size:calc(9px * var(--scale-factor));
  560. }
  561. .annotationLayer .popup > .header{
  562. display:inline-block;
  563. }
  564. .annotationLayer .popup > .header h1{
  565. display:inline;
  566. }
  567. .annotationLayer .popup > .header .popupDate{
  568. display:inline-block;
  569. margin-left:calc(5px * var(--scale-factor));
  570. width:-moz-fit-content;
  571. width:fit-content;
  572. }
  573. .annotationLayer .popupContent{
  574. border-top:1px solid rgb(51 51 51);
  575. margin-top:calc(2px * var(--scale-factor));
  576. padding-top:calc(2px * var(--scale-factor));
  577. }
  578. .annotationLayer .richText > *{
  579. white-space:pre-wrap;
  580. font-size:calc(9px * var(--scale-factor));
  581. }
  582. .annotationLayer .popupTriggerArea{
  583. cursor:pointer;
  584. }
  585. .annotationLayer section svg{
  586. position:absolute;
  587. width:100%;
  588. height:100%;
  589. top:0;
  590. left:0;
  591. }
  592. .annotationLayer .annotationTextContent{
  593. position:absolute;
  594. width:100%;
  595. height:100%;
  596. opacity:0;
  597. color:transparent;
  598. -webkit-user-select:none;
  599. -moz-user-select:none;
  600. user-select:none;
  601. pointer-events:none;
  602. }
  603. .annotationLayer .annotationTextContent span{
  604. width:100%;
  605. display:inline-block;
  606. }
  607. .annotationLayer svg.quadrilateralsContainer{
  608. contain:strict;
  609. width:0;
  610. height:0;
  611. position:absolute;
  612. top:0;
  613. left:0;
  614. z-index:-1;
  615. }
  616. :root{
  617. --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>");
  618. --xfa-focus-outline:auto;
  619. }
  620. @media screen and (forced-colors: active){
  621. :root{
  622. --xfa-focus-outline:2px solid CanvasText;
  623. }
  624. .xfaLayer *:required{
  625. outline:1.5px solid selectedItem;
  626. }
  627. }
  628. .xfaLayer{
  629. background-color:transparent;
  630. }
  631. .xfaLayer .highlight{
  632. margin:-1px;
  633. padding:1px;
  634. background-color:rgb(239 203 237);
  635. border-radius:4px;
  636. }
  637. .xfaLayer .highlight.appended{
  638. position:initial;
  639. }
  640. .xfaLayer .highlight.begin{
  641. border-radius:4px 0 0 4px;
  642. }
  643. .xfaLayer .highlight.end{
  644. border-radius:0 4px 4px 0;
  645. }
  646. .xfaLayer .highlight.middle{
  647. border-radius:0;
  648. }
  649. .xfaLayer .highlight.selected{
  650. background-color:rgb(203 223 203);
  651. }
  652. .xfaPage{
  653. overflow:hidden;
  654. position:relative;
  655. }
  656. .xfaContentarea{
  657. position:absolute;
  658. }
  659. .xfaPrintOnly{
  660. display:none;
  661. }
  662. .xfaLayer{
  663. position:absolute;
  664. text-align:initial;
  665. top:0;
  666. left:0;
  667. transform-origin:0 0;
  668. line-height:1.2;
  669. }
  670. .xfaLayer *{
  671. color:inherit;
  672. font:inherit;
  673. font-style:inherit;
  674. font-weight:inherit;
  675. font-kerning:inherit;
  676. letter-spacing:-0.01px;
  677. text-align:inherit;
  678. text-decoration:inherit;
  679. box-sizing:border-box;
  680. background-color:transparent;
  681. padding:0;
  682. margin:0;
  683. pointer-events:auto;
  684. line-height:inherit;
  685. }
  686. .xfaLayer *:required{
  687. outline:1.5px solid red;
  688. }
  689. .xfaLayer div,
  690. .xfaLayer svg,
  691. .xfaLayer svg *{
  692. pointer-events:none;
  693. }
  694. .xfaLayer a{
  695. color:blue;
  696. }
  697. .xfaRich li{
  698. margin-left:3em;
  699. }
  700. .xfaFont{
  701. color:black;
  702. font-weight:normal;
  703. font-kerning:none;
  704. font-size:10px;
  705. font-style:normal;
  706. letter-spacing:0;
  707. text-decoration:none;
  708. vertical-align:0;
  709. }
  710. .xfaCaption{
  711. overflow:hidden;
  712. flex:0 0 auto;
  713. }
  714. .xfaCaptionForCheckButton{
  715. overflow:hidden;
  716. flex:1 1 auto;
  717. }
  718. .xfaLabel{
  719. height:100%;
  720. width:100%;
  721. }
  722. .xfaLeft{
  723. display:flex;
  724. flex-direction:row;
  725. align-items:center;
  726. }
  727. .xfaRight{
  728. display:flex;
  729. flex-direction:row-reverse;
  730. align-items:center;
  731. }
  732. :is(.xfaLeft, .xfaRight) > :is(.xfaCaption, .xfaCaptionForCheckButton){
  733. max-height:100%;
  734. }
  735. .xfaTop{
  736. display:flex;
  737. flex-direction:column;
  738. align-items:flex-start;
  739. }
  740. .xfaBottom{
  741. display:flex;
  742. flex-direction:column-reverse;
  743. align-items:flex-start;
  744. }
  745. :is(.xfaTop, .xfaBottom) > :is(.xfaCaption, .xfaCaptionForCheckButton){
  746. width:100%;
  747. }
  748. .xfaBorder{
  749. background-color:transparent;
  750. position:absolute;
  751. pointer-events:none;
  752. }
  753. .xfaWrapped{
  754. width:100%;
  755. height:100%;
  756. }
  757. :is(.xfaTextfield, .xfaSelect):focus{
  758. background-image:none;
  759. background-color:transparent;
  760. outline:var(--xfa-focus-outline);
  761. outline-offset:-1px;
  762. }
  763. :is(.xfaCheckbox, .xfaRadio):focus{
  764. outline:var(--xfa-focus-outline);
  765. }
  766. .xfaTextfield,
  767. .xfaSelect{
  768. height:100%;
  769. width:100%;
  770. flex:1 1 auto;
  771. border:none;
  772. resize:none;
  773. background-image:var(--xfa-unfocused-field-background);
  774. }
  775. .xfaSelect{
  776. padding-inline:2px;
  777. }
  778. :is(.xfaTop, .xfaBottom) > :is(.xfaTextfield, .xfaSelect){
  779. flex:0 1 auto;
  780. }
  781. .xfaButton{
  782. cursor:pointer;
  783. width:100%;
  784. height:100%;
  785. border:none;
  786. text-align:center;
  787. }
  788. .xfaLink{
  789. width:100%;
  790. height:100%;
  791. position:absolute;
  792. top:0;
  793. left:0;
  794. }
  795. .xfaCheckbox,
  796. .xfaRadio{
  797. width:100%;
  798. height:100%;
  799. flex:0 0 auto;
  800. border:none;
  801. }
  802. .xfaRich{
  803. white-space:pre-wrap;
  804. width:100%;
  805. height:100%;
  806. }
  807. .xfaImage{
  808. -o-object-position:left top;
  809. object-position:left top;
  810. -o-object-fit:contain;
  811. object-fit:contain;
  812. width:100%;
  813. height:100%;
  814. }
  815. .xfaLrTb,
  816. .xfaRlTb,
  817. .xfaTb{
  818. display:flex;
  819. flex-direction:column;
  820. align-items:stretch;
  821. }
  822. .xfaLr{
  823. display:flex;
  824. flex-direction:row;
  825. align-items:stretch;
  826. }
  827. .xfaRl{
  828. display:flex;
  829. flex-direction:row-reverse;
  830. align-items:stretch;
  831. }
  832. .xfaTb > div{
  833. justify-content:left;
  834. }
  835. .xfaPosition{
  836. position:relative;
  837. }
  838. .xfaArea{
  839. position:relative;
  840. }
  841. .xfaValignMiddle{
  842. display:flex;
  843. align-items:center;
  844. }
  845. .xfaTable{
  846. display:flex;
  847. flex-direction:column;
  848. align-items:stretch;
  849. }
  850. .xfaTable .xfaRow{
  851. display:flex;
  852. flex-direction:row;
  853. align-items:stretch;
  854. }
  855. .xfaTable .xfaRlRow{
  856. display:flex;
  857. flex-direction:row-reverse;
  858. align-items:stretch;
  859. flex:1;
  860. }
  861. .xfaTable .xfaRlRow > div{
  862. flex:1;
  863. }
  864. :is(.xfaNonInteractive, .xfaDisabled, .xfaReadOnly) :is(input, textarea){
  865. background:initial;
  866. }
  867. @media print{
  868. .xfaTextfield,
  869. .xfaSelect{
  870. background:transparent;
  871. }
  872. .xfaSelect{
  873. -webkit-appearance:none;
  874. -moz-appearance:none;
  875. appearance:none;
  876. text-indent:1px;
  877. text-overflow:"";
  878. }
  879. }
  880. .canvasWrapper svg{
  881. transform:none;
  882. }
  883. .canvasWrapper svg[data-main-rotation="90"] mask,
  884. .canvasWrapper svg[data-main-rotation="90"] use:not(.clip, .mask){
  885. transform:matrix(0, 1, -1, 0, 1, 0);
  886. }
  887. .canvasWrapper svg[data-main-rotation="180"] mask,
  888. .canvasWrapper svg[data-main-rotation="180"] use:not(.clip, .mask){
  889. transform:matrix(-1, 0, 0, -1, 1, 1);
  890. }
  891. .canvasWrapper svg[data-main-rotation="270"] mask,
  892. .canvasWrapper svg[data-main-rotation="270"] use:not(.clip, .mask){
  893. transform:matrix(0, -1, 1, 0, 0, 1);
  894. }
  895. .canvasWrapper svg.highlight{
  896. --blend-mode:multiply;
  897. position:absolute;
  898. mix-blend-mode:var(--blend-mode);
  899. }
  900. @media screen and (forced-colors: active){
  901. .canvasWrapper svg.highlight{
  902. --blend-mode:difference;
  903. }
  904. }
  905. .canvasWrapper svg.highlight:not(.free){
  906. fill-rule:evenodd;
  907. }
  908. .canvasWrapper svg.highlightOutline{
  909. position:absolute;
  910. mix-blend-mode:normal;
  911. fill-rule:evenodd;
  912. fill:none;
  913. }
  914. .canvasWrapper svg.highlightOutline.hovered:not(.free):not(.selected){
  915. stroke:var(--hover-outline-color);
  916. stroke-width:var(--outline-width);
  917. }
  918. .canvasWrapper svg.highlightOutline.selected:not(.free) .mainOutline{
  919. stroke:var(--outline-around-color);
  920. stroke-width:calc(
  921. var(--outline-width) + 2 * var(--outline-around-width)
  922. );
  923. }
  924. .canvasWrapper svg.highlightOutline.selected:not(.free) .secondaryOutline{
  925. stroke:var(--outline-color);
  926. stroke-width:var(--outline-width);
  927. }
  928. .canvasWrapper svg.highlightOutline.free.hovered:not(.selected){
  929. stroke:var(--hover-outline-color);
  930. stroke-width:calc(2 * var(--outline-width));
  931. }
  932. .canvasWrapper svg.highlightOutline.free.selected .mainOutline{
  933. stroke:var(--outline-around-color);
  934. stroke-width:calc(
  935. 2 * (var(--outline-width) + var(--outline-around-width))
  936. );
  937. }
  938. .canvasWrapper svg.highlightOutline.free.selected .secondaryOutline{
  939. stroke:var(--outline-color);
  940. stroke-width:calc(2 * var(--outline-width));
  941. }
  942. .toggle-button{
  943. --button-background-color:#f0f0f4;
  944. --button-background-color-hover:#e0e0e6;
  945. --button-background-color-active:#cfcfd8;
  946. --color-accent-primary:#0060df;
  947. --color-accent-primary-hover:#0250bb;
  948. --color-accent-primary-active:#054096;
  949. --border-interactive-color:#8f8f9d;
  950. --border-radius-circle:9999px;
  951. --border-width:1px;
  952. --size-item-small:16px;
  953. --size-item-large:32px;
  954. --color-canvas:white;
  955. --toggle-background-color:var(--button-background-color);
  956. --toggle-background-color-hover:var(--button-background-color-hover);
  957. --toggle-background-color-active:var(--button-background-color-active);
  958. --toggle-background-color-pressed:var(--color-accent-primary);
  959. --toggle-background-color-pressed-hover:var(--color-accent-primary-hover);
  960. --toggle-background-color-pressed-active:var(--color-accent-primary-active);
  961. --toggle-border-color:var(--border-interactive-color);
  962. --toggle-border-color-hover:var(--toggle-border-color);
  963. --toggle-border-color-active:var(--toggle-border-color);
  964. --toggle-border-radius:var(--border-radius-circle);
  965. --toggle-border-width:var(--border-width);
  966. --toggle-height:var(--size-item-small);
  967. --toggle-width:var(--size-item-large);
  968. --toggle-dot-background-color:var(--toggle-border-color);
  969. --toggle-dot-background-color-hover:var(--toggle-dot-background-color);
  970. --toggle-dot-background-color-active:var(--toggle-dot-background-color);
  971. --toggle-dot-background-color-on-pressed:var(--color-canvas);
  972. --toggle-dot-margin:1px;
  973. --toggle-dot-height:calc(
  974. var(--toggle-height) - 2 * var(--toggle-dot-margin) - 2 *
  975. var(--toggle-border-width)
  976. );
  977. --toggle-dot-width:var(--toggle-dot-height);
  978. --toggle-dot-transform-x:calc(
  979. var(--toggle-width) - 4 * var(--toggle-dot-margin) - var(--toggle-dot-width)
  980. );
  981. -webkit-appearance:none;
  982. -moz-appearance:none;
  983. appearance:none;
  984. padding:0;
  985. margin:0;
  986. border:var(--toggle-border-width) solid var(--toggle-border-color);
  987. height:var(--toggle-height);
  988. width:var(--toggle-width);
  989. border-radius:var(--toggle-border-radius);
  990. background:var(--toggle-background-color);
  991. box-sizing:border-box;
  992. flex-shrink:0;
  993. }
  994. @media (prefers-color-scheme: dark){
  995. :where(html:not(.is-light)) .toggle-button{
  996. --button-background-color:color-mix(in srgb, currentColor 7%, transparent);
  997. --button-background-color-hover:color-mix(
  998. in srgb,
  999. currentColor 14%,
  1000. transparent
  1001. );
  1002. --button-background-color-active:color-mix(
  1003. in srgb,
  1004. currentColor 21%,
  1005. transparent
  1006. );
  1007. --color-accent-primary:#0df;
  1008. --color-accent-primary-hover:#80ebff;
  1009. --color-accent-primary-active:#aaf2ff;
  1010. --border-interactive-color:#bfbfc9;
  1011. --color-canvas:#1c1b22;
  1012. }
  1013. }
  1014. :where(html.is-dark) .toggle-button{
  1015. --button-background-color:color-mix(in srgb, currentColor 7%, transparent);
  1016. --button-background-color-hover:color-mix(
  1017. in srgb,
  1018. currentColor 14%,
  1019. transparent
  1020. );
  1021. --button-background-color-active:color-mix(
  1022. in srgb,
  1023. currentColor 21%,
  1024. transparent
  1025. );
  1026. --color-accent-primary:#0df;
  1027. --color-accent-primary-hover:#80ebff;
  1028. --color-accent-primary-active:#aaf2ff;
  1029. --border-interactive-color:#bfbfc9;
  1030. --color-canvas:#1c1b22;
  1031. }
  1032. @media (forced-colors: active){
  1033. .toggle-button{
  1034. --color-accent-primary:ButtonText;
  1035. --color-accent-primary-hover:SelectedItem;
  1036. --color-accent-primary-active:SelectedItem;
  1037. --border-interactive-color:ButtonText;
  1038. --button-background-color:ButtonFace;
  1039. --border-interactive-color-hover:SelectedItem;
  1040. --border-interactive-color-active:SelectedItem;
  1041. --border-interactive-color-disabled:GrayText;
  1042. --color-canvas:ButtonText;
  1043. }
  1044. }
  1045. .toggle-button:focus-visible{
  1046. outline:var(--focus-outline);
  1047. outline-offset:var(--focus-outline-offset);
  1048. }
  1049. .toggle-button:enabled:hover{
  1050. background:var(--toggle-background-color-hover);
  1051. border-color:var(--toggle-border-color);
  1052. }
  1053. .toggle-button:enabled:active{
  1054. background:var(--toggle-background-color-active);
  1055. border-color:var(--toggle-border-color);
  1056. }
  1057. .toggle-button[aria-pressed="true"]{
  1058. background:var(--toggle-background-color-pressed);
  1059. border-color:transparent;
  1060. }
  1061. .toggle-button[aria-pressed="true"]:enabled:hover{
  1062. background:var(--toggle-background-color-pressed-hover);
  1063. border-color:transparent;
  1064. }
  1065. .toggle-button[aria-pressed="true"]:enabled:active{
  1066. background:var(--toggle-background-color-pressed-active);
  1067. border-color:transparent;
  1068. }
  1069. .toggle-button::before{
  1070. display:block;
  1071. content:"";
  1072. background-color:var(--toggle-dot-background-color);
  1073. height:var(--toggle-dot-height);
  1074. width:var(--toggle-dot-width);
  1075. margin:var(--toggle-dot-margin);
  1076. border-radius:var(--toggle-border-radius);
  1077. translate:0;
  1078. }
  1079. .toggle-button[aria-pressed="true"]::before{
  1080. translate:var(--toggle-dot-transform-x);
  1081. background-color:var(--toggle-dot-background-color-on-pressed);
  1082. }
  1083. .toggle-button[aria-pressed="true"]:enabled:hover::before,
  1084. .toggle-button[aria-pressed="true"]:enabled:active::before{
  1085. background-color:var(--toggle-dot-background-color-on-pressed);
  1086. }
  1087. [dir="rtl"] .toggle-button[aria-pressed="true"]::before{
  1088. translate:calc(-1 * var(--toggle-dot-transform-x));
  1089. }
  1090. @media (prefers-reduced-motion: no-preference){
  1091. .toggle-button::before{
  1092. transition:translate 100ms;
  1093. }
  1094. }
  1095. @media (prefers-contrast){
  1096. .toggle-button:enabled:hover{
  1097. border-color:var(--toggle-border-color-hover);
  1098. }
  1099. .toggle-button:enabled:active{
  1100. border-color:var(--toggle-border-color-active);
  1101. }
  1102. .toggle-button[aria-pressed="true"]:enabled{
  1103. border-color:var(--toggle-border-color);
  1104. position:relative;
  1105. }
  1106. .toggle-button[aria-pressed="true"]:enabled:hover,
  1107. .toggle-button[aria-pressed="true"]:enabled:hover:active{
  1108. border-color:var(--toggle-border-color-hover);
  1109. }
  1110. .toggle-button[aria-pressed="true"]:enabled:active{
  1111. background-color:var(--toggle-dot-background-color-active);
  1112. border-color:var(--toggle-dot-background-color-hover);
  1113. }
  1114. .toggle-button:hover::before,
  1115. .toggle-button:active::before{
  1116. background-color:var(--toggle-dot-background-color-hover);
  1117. }
  1118. }
  1119. @media (forced-colors){
  1120. .toggle-button{
  1121. --toggle-dot-background-color:var(--color-accent-primary);
  1122. --toggle-dot-background-color-hover:var(--color-accent-primary-hover);
  1123. --toggle-dot-background-color-active:var(--color-accent-primary-active);
  1124. --toggle-dot-background-color-on-pressed:var(--button-background-color);
  1125. --toggle-background-color-disabled:var(--button-background-color-disabled);
  1126. --toggle-border-color-hover:var(--border-interactive-color-hover);
  1127. --toggle-border-color-active:var(--border-interactive-color-active);
  1128. --toggle-border-color-disabled:var(--border-interactive-color-disabled);
  1129. }
  1130. .toggle-button[aria-pressed="true"]:enabled::after{
  1131. border:1px solid var(--button-background-color);
  1132. content:"";
  1133. position:absolute;
  1134. height:var(--toggle-height);
  1135. width:var(--toggle-width);
  1136. display:block;
  1137. border-radius:var(--toggle-border-radius);
  1138. inset:-2px;
  1139. }
  1140. .toggle-button[aria-pressed="true"]:enabled:active::after{
  1141. border-color:var(--toggle-border-color-active);
  1142. }
  1143. }
  1144. :root{
  1145. --outline-width:2px;
  1146. --outline-color:#0060df;
  1147. --outline-around-width:1px;
  1148. --outline-around-color:#f0f0f4;
  1149. --hover-outline-around-color:var(--outline-around-color);
  1150. --focus-outline:solid var(--outline-width) var(--outline-color);
  1151. --unfocus-outline:solid var(--outline-width) transparent;
  1152. --focus-outline-around:solid var(--outline-around-width) var(--outline-around-color);
  1153. --hover-outline-color:#8f8f9d;
  1154. --hover-outline:solid var(--outline-width) var(--hover-outline-color);
  1155. --hover-outline-around:solid var(--outline-around-width) var(--hover-outline-around-color);
  1156. --freetext-line-height:1.35;
  1157. --freetext-padding:2px;
  1158. --resizer-bg-color:var(--outline-color);
  1159. --resizer-size:6px;
  1160. --resizer-shift:calc(
  1161. 0px - (var(--outline-width) + var(--resizer-size)) / 2 -
  1162. var(--outline-around-width)
  1163. );
  1164. --editorFreeText-editing-cursor:text;
  1165. --editorInk-editing-cursor:url(images/cursor-editorInk.svg) 0 16, pointer;
  1166. --editorHighlight-editing-cursor:url(images/cursor-editorTextHighlight.svg) 24 24, text;
  1167. --editorFreeHighlight-editing-cursor:url(images/cursor-editorFreeHighlight.svg) 1 18, pointer;
  1168. }
  1169. .visuallyHidden{
  1170. position:absolute;
  1171. top:0;
  1172. left:0;
  1173. border:0;
  1174. margin:0;
  1175. padding:0;
  1176. width:0;
  1177. height:0;
  1178. overflow:hidden;
  1179. white-space:nowrap;
  1180. font-size:0;
  1181. }
  1182. .textLayer.highlighting{
  1183. cursor:var(--editorFreeHighlight-editing-cursor);
  1184. }
  1185. .textLayer.highlighting:not(.free) span{
  1186. cursor:var(--editorHighlight-editing-cursor);
  1187. }
  1188. .textLayer.highlighting.free span{
  1189. cursor:var(--editorFreeHighlight-editing-cursor);
  1190. }
  1191. @media (min-resolution: 1.1dppx){
  1192. :root{
  1193. --editorFreeText-editing-cursor:url(images/cursor-editorFreeText.svg) 0 16, text;
  1194. }
  1195. }
  1196. @media screen and (forced-colors: active){
  1197. :root{
  1198. --outline-color:CanvasText;
  1199. --outline-around-color:ButtonFace;
  1200. --resizer-bg-color:ButtonText;
  1201. --hover-outline-color:Highlight;
  1202. --hover-outline-around-color:SelectedItemText;
  1203. }
  1204. }
  1205. [data-editor-rotation="90"]{
  1206. transform:rotate(90deg);
  1207. }
  1208. [data-editor-rotation="180"]{
  1209. transform:rotate(180deg);
  1210. }
  1211. [data-editor-rotation="270"]{
  1212. transform:rotate(270deg);
  1213. }
  1214. .annotationEditorLayer{
  1215. background:transparent;
  1216. position:absolute;
  1217. inset:0;
  1218. font-size:calc(100px * var(--scale-factor));
  1219. transform-origin:0 0;
  1220. cursor:auto;
  1221. }
  1222. .annotationEditorLayer .selectedEditor{
  1223. z-index:100000 !important;
  1224. }
  1225. .annotationEditorLayer.drawing *{
  1226. pointer-events:none !important;
  1227. }
  1228. .annotationEditorLayer.waiting{
  1229. content:"";
  1230. cursor:wait;
  1231. position:absolute;
  1232. inset:0;
  1233. width:100%;
  1234. height:100%;
  1235. }
  1236. .annotationEditorLayer.disabled{
  1237. pointer-events:none;
  1238. }
  1239. .annotationEditorLayer.freetextEditing{
  1240. cursor:var(--editorFreeText-editing-cursor);
  1241. }
  1242. .annotationEditorLayer.inkEditing{
  1243. cursor:var(--editorInk-editing-cursor);
  1244. }
  1245. .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor){
  1246. position:absolute;
  1247. background:transparent;
  1248. z-index:1;
  1249. transform-origin:0 0;
  1250. cursor:auto;
  1251. max-width:100%;
  1252. max-height:100%;
  1253. border:var(--unfocus-outline);
  1254. }
  1255. .annotationEditorLayer .draggable.selectedEditor:is(.freeTextEditor, .inkEditor, .stampEditor){
  1256. cursor:move;
  1257. }
  1258. .annotationEditorLayer .moving:is(.freeTextEditor, .inkEditor, .stampEditor){
  1259. touch-action:none;
  1260. }
  1261. .annotationEditorLayer .selectedEditor:is(.freeTextEditor, .inkEditor, .stampEditor){
  1262. border:var(--focus-outline);
  1263. outline:var(--focus-outline-around);
  1264. }
  1265. .annotationEditorLayer .selectedEditor:is(.freeTextEditor, .inkEditor, .stampEditor)::before{
  1266. content:"";
  1267. position:absolute;
  1268. inset:0;
  1269. border:var(--focus-outline-around);
  1270. pointer-events:none;
  1271. }
  1272. .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor):hover:not(.selectedEditor){
  1273. border:var(--hover-outline);
  1274. outline:var(--hover-outline-around);
  1275. }
  1276. .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor):hover:not(.selectedEditor)::before{
  1277. content:"";
  1278. position:absolute;
  1279. inset:0;
  1280. border:var(--focus-outline-around);
  1281. }
  1282. :is(.annotationEditorLayer
  1283. :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar{
  1284. --editor-toolbar-delete-image:url(images/editor-toolbar-delete.svg);
  1285. --editor-toolbar-bg-color:#f0f0f4;
  1286. --editor-toolbar-highlight-image:url(images/toolbarButton-editorHighlight.svg);
  1287. --editor-toolbar-fg-color:#2e2e56;
  1288. --editor-toolbar-border-color:#8f8f9d;
  1289. --editor-toolbar-hover-border-color:var(--editor-toolbar-border-color);
  1290. --editor-toolbar-hover-bg-color:#e0e0e6;
  1291. --editor-toolbar-hover-fg-color:var(--editor-toolbar-fg-color);
  1292. --editor-toolbar-hover-outline:none;
  1293. --editor-toolbar-focus-outline-color:#0060df;
  1294. --editor-toolbar-shadow:0 2px 6px 0 rgb(58 57 68 / 0.2);
  1295. --editor-toolbar-vert-offset:6px;
  1296. --editor-toolbar-height:28px;
  1297. --editor-toolbar-padding:2px;
  1298. display:flex;
  1299. width:-moz-fit-content;
  1300. width:fit-content;
  1301. height:var(--editor-toolbar-height);
  1302. flex-direction:column;
  1303. justify-content:center;
  1304. align-items:center;
  1305. cursor:default;
  1306. pointer-events:auto;
  1307. box-sizing:content-box;
  1308. padding:var(--editor-toolbar-padding);
  1309. position:absolute;
  1310. inset-inline-end:0;
  1311. inset-block-start:calc(100% + var(--editor-toolbar-vert-offset));
  1312. border-radius:6px;
  1313. background-color:var(--editor-toolbar-bg-color);
  1314. border:1px solid var(--editor-toolbar-border-color);
  1315. box-shadow:var(--editor-toolbar-shadow);
  1316. }
  1317. @media (prefers-color-scheme: dark){
  1318. :where(html:not(.is-light)) :is(.annotationEditorLayer
  1319. :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar{
  1320. --editor-toolbar-bg-color:#2b2a33;
  1321. --editor-toolbar-fg-color:#fbfbfe;
  1322. --editor-toolbar-hover-bg-color:#52525e;
  1323. --editor-toolbar-focus-outline-color:#0df;
  1324. }
  1325. }
  1326. :where(html.is-dark) :is(.annotationEditorLayer
  1327. :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar{
  1328. --editor-toolbar-bg-color:#2b2a33;
  1329. --editor-toolbar-fg-color:#fbfbfe;
  1330. --editor-toolbar-hover-bg-color:#52525e;
  1331. --editor-toolbar-focus-outline-color:#0df;
  1332. }
  1333. @media screen and (forced-colors: active){
  1334. :is(.annotationEditorLayer
  1335. :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar{
  1336. --editor-toolbar-bg-color:ButtonFace;
  1337. --editor-toolbar-fg-color:ButtonText;
  1338. --editor-toolbar-border-color:ButtonText;
  1339. --editor-toolbar-hover-border-color:AccentColor;
  1340. --editor-toolbar-hover-bg-color:ButtonFace;
  1341. --editor-toolbar-hover-fg-color:AccentColor;
  1342. --editor-toolbar-hover-outline:2px solid var(--editor-toolbar-hover-border-color);
  1343. --editor-toolbar-focus-outline-color:ButtonBorder;
  1344. --editor-toolbar-shadow:none;
  1345. }
  1346. }
  1347. :is(.annotationEditorLayer
  1348. :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar.hidden{
  1349. display:none;
  1350. }
  1351. :is(.annotationEditorLayer
  1352. :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar:has(:focus-visible){
  1353. border-color:transparent;
  1354. }
  1355. [dir="ltr"] :is(.annotationEditorLayer
  1356. :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar{
  1357. transform-origin:100% 0;
  1358. }
  1359. [dir="rtl"] :is(.annotationEditorLayer
  1360. :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar{
  1361. transform-origin:0 0;
  1362. }
  1363. :is(.annotationEditorLayer
  1364. :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons{
  1365. display:flex;
  1366. justify-content:center;
  1367. align-items:center;
  1368. gap:0;
  1369. height:100%;
  1370. }
  1371. :is(.annotationEditorLayer
  1372. :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .divider{
  1373. width:1px;
  1374. height:calc(
  1375. 2 * var(--editor-toolbar-padding) + var(--editor-toolbar-height)
  1376. );
  1377. background-color:var(--editor-toolbar-border-color);
  1378. display:inline-block;
  1379. margin-inline:2px;
  1380. }
  1381. :is(.annotationEditorLayer
  1382. :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .highlightButton{
  1383. width:var(--editor-toolbar-height);
  1384. }
  1385. :is(.annotationEditorLayer
  1386. :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .highlightButton::before{
  1387. content:"";
  1388. -webkit-mask-image:var(--editor-toolbar-highlight-image);
  1389. mask-image:var(--editor-toolbar-highlight-image);
  1390. -webkit-mask-repeat:no-repeat;
  1391. mask-repeat:no-repeat;
  1392. -webkit-mask-position:center;
  1393. mask-position:center;
  1394. display:inline-block;
  1395. background-color:var(--editor-toolbar-fg-color);
  1396. width:100%;
  1397. height:100%;
  1398. }
  1399. :is(.annotationEditorLayer
  1400. :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .highlightButton:hover::before{
  1401. background-color:var(--editor-toolbar-hover-fg-color);
  1402. }
  1403. :is(.annotationEditorLayer
  1404. :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .delete{
  1405. width:var(--editor-toolbar-height);
  1406. }
  1407. :is(.annotationEditorLayer
  1408. :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .delete::before{
  1409. content:"";
  1410. -webkit-mask-image:var(--editor-toolbar-delete-image);
  1411. mask-image:var(--editor-toolbar-delete-image);
  1412. -webkit-mask-repeat:no-repeat;
  1413. mask-repeat:no-repeat;
  1414. -webkit-mask-position:center;
  1415. mask-position:center;
  1416. display:inline-block;
  1417. background-color:var(--editor-toolbar-fg-color);
  1418. width:100%;
  1419. height:100%;
  1420. }
  1421. :is(.annotationEditorLayer
  1422. :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .delete:hover::before{
  1423. background-color:var(--editor-toolbar-hover-fg-color);
  1424. }
  1425. :is(.annotationEditorLayer
  1426. :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons > *{
  1427. height:var(--editor-toolbar-height);
  1428. }
  1429. :is(.annotationEditorLayer
  1430. :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons > :not(.divider){
  1431. border:none;
  1432. background-color:transparent;
  1433. cursor:pointer;
  1434. }
  1435. :is(.annotationEditorLayer
  1436. :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons > :not(.divider):hover{
  1437. border-radius:2px;
  1438. background-color:var(--editor-toolbar-hover-bg-color);
  1439. color:var(--editor-toolbar-hover-fg-color);
  1440. outline:var(--editor-toolbar-hover-outline);
  1441. outline-offset:1px;
  1442. }
  1443. :is(.annotationEditorLayer
  1444. :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons > :not(.divider):hover:active{
  1445. outline:none;
  1446. }
  1447. :is(.annotationEditorLayer
  1448. :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons > :not(.divider):focus-visible{
  1449. border-radius:2px;
  1450. outline:2px solid var(--editor-toolbar-focus-outline-color);
  1451. }
  1452. :is(.annotationEditorLayer
  1453. :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .altText{
  1454. --alt-text-add-image:url(images/altText_add.svg);
  1455. --alt-text-done-image:url(images/altText_done.svg);
  1456. display:flex;
  1457. align-items:center;
  1458. justify-content:center;
  1459. width:-moz-max-content;
  1460. width:max-content;
  1461. padding-inline:8px;
  1462. pointer-events:all;
  1463. font:menu;
  1464. font-weight:590;
  1465. font-size:12px;
  1466. color:var(--editor-toolbar-fg-color);
  1467. }
  1468. :is(.annotationEditorLayer
  1469. :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .altText:disabled{
  1470. pointer-events:none;
  1471. }
  1472. :is(.annotationEditorLayer
  1473. :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .altText::before{
  1474. content:"";
  1475. -webkit-mask-image:var(--alt-text-add-image);
  1476. mask-image:var(--alt-text-add-image);
  1477. -webkit-mask-repeat:no-repeat;
  1478. mask-repeat:no-repeat;
  1479. -webkit-mask-position:center;
  1480. mask-position:center;
  1481. display:inline-block;
  1482. width:12px;
  1483. height:13px;
  1484. background-color:var(--editor-toolbar-fg-color);
  1485. margin-inline-end:4px;
  1486. }
  1487. :is(.annotationEditorLayer
  1488. :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .altText:hover::before{
  1489. background-color:var(--editor-toolbar-hover-fg-color);
  1490. }
  1491. :is(.annotationEditorLayer
  1492. :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .altText.done::before{
  1493. -webkit-mask-image:var(--alt-text-done-image);
  1494. mask-image:var(--alt-text-done-image);
  1495. }
  1496. :is(.annotationEditorLayer
  1497. :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .altText .tooltip{
  1498. display:none;
  1499. }
  1500. :is(.annotationEditorLayer
  1501. :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .altText .tooltip.show{
  1502. --alt-text-tooltip-bg:#f0f0f4;
  1503. --alt-text-tooltip-fg:#15141a;
  1504. --alt-text-tooltip-border:#8f8f9d;
  1505. --alt-text-tooltip-shadow:0px 2px 6px 0px rgb(58 57 68 / 0.2);
  1506. display:inline-flex;
  1507. flex-direction:column;
  1508. align-items:center;
  1509. justify-content:center;
  1510. position:absolute;
  1511. top:calc(100% + 2px);
  1512. inset-inline-start:0;
  1513. padding-block:2px 3px;
  1514. padding-inline:3px;
  1515. max-width:300px;
  1516. width:-moz-max-content;
  1517. width:max-content;
  1518. height:auto;
  1519. font-size:12px;
  1520. border:0.5px solid var(--alt-text-tooltip-border);
  1521. background:var(--alt-text-tooltip-bg);
  1522. box-shadow:var(--alt-text-tooltip-shadow);
  1523. color:var(--alt-text-tooltip-fg);
  1524. pointer-events:none;
  1525. }
  1526. @media (prefers-color-scheme: dark){
  1527. :where(html:not(.is-light)) :is(.annotationEditorLayer
  1528. :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .altText .tooltip.show{
  1529. --alt-text-tooltip-bg:#1c1b22;
  1530. --alt-text-tooltip-fg:#fbfbfe;
  1531. --alt-text-tooltip-shadow:0px 2px 6px 0px #15141a;
  1532. }
  1533. }
  1534. :where(html.is-dark) :is(.annotationEditorLayer
  1535. :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .altText .tooltip.show{
  1536. --alt-text-tooltip-bg:#1c1b22;
  1537. --alt-text-tooltip-fg:#fbfbfe;
  1538. --alt-text-tooltip-shadow:0px 2px 6px 0px #15141a;
  1539. }
  1540. @media screen and (forced-colors: active){
  1541. :is(.annotationEditorLayer
  1542. :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .altText .tooltip.show{
  1543. --alt-text-tooltip-bg:Canvas;
  1544. --alt-text-tooltip-fg:CanvasText;
  1545. --alt-text-tooltip-border:CanvasText;
  1546. --alt-text-tooltip-shadow:none;
  1547. }
  1548. }
  1549. .annotationEditorLayer .freeTextEditor{
  1550. padding:calc(var(--freetext-padding) * var(--scale-factor));
  1551. width:auto;
  1552. height:auto;
  1553. touch-action:none;
  1554. }
  1555. .annotationEditorLayer .freeTextEditor .internal{
  1556. background:transparent;
  1557. border:none;
  1558. inset:0;
  1559. overflow:visible;
  1560. white-space:nowrap;
  1561. font:10px sans-serif;
  1562. line-height:var(--freetext-line-height);
  1563. -webkit-user-select:none;
  1564. -moz-user-select:none;
  1565. user-select:none;
  1566. }
  1567. .annotationEditorLayer .freeTextEditor .overlay{
  1568. position:absolute;
  1569. display:none;
  1570. background:transparent;
  1571. inset:0;
  1572. width:100%;
  1573. height:100%;
  1574. }
  1575. .annotationEditorLayer freeTextEditor .overlay.enabled{
  1576. display:block;
  1577. }
  1578. .annotationEditorLayer .freeTextEditor .internal:empty::before{
  1579. content:attr(default-content);
  1580. color:gray;
  1581. }
  1582. .annotationEditorLayer .freeTextEditor .internal:focus{
  1583. outline:none;
  1584. -webkit-user-select:auto;
  1585. -moz-user-select:auto;
  1586. user-select:auto;
  1587. }
  1588. .annotationEditorLayer .inkEditor{
  1589. width:100%;
  1590. height:100%;
  1591. }
  1592. .annotationEditorLayer .inkEditor.editing{
  1593. cursor:inherit;
  1594. }
  1595. .annotationEditorLayer .inkEditor .inkEditorCanvas{
  1596. position:absolute;
  1597. inset:0;
  1598. width:100%;
  1599. height:100%;
  1600. touch-action:none;
  1601. }
  1602. .annotationEditorLayer .stampEditor{
  1603. width:auto;
  1604. height:auto;
  1605. }
  1606. .annotationEditorLayer .stampEditor canvas{
  1607. position:absolute;
  1608. width:100%;
  1609. height:100%;
  1610. margin:0;
  1611. top:0;
  1612. left:0;
  1613. }
  1614. .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers{
  1615. position:absolute;
  1616. inset:0;
  1617. }
  1618. .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers.hidden{
  1619. display:none;
  1620. }
  1621. .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer{
  1622. width:var(--resizer-size);
  1623. height:var(--resizer-size);
  1624. background:content-box var(--resizer-bg-color);
  1625. border:var(--focus-outline-around);
  1626. border-radius:2px;
  1627. position:absolute;
  1628. }
  1629. .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.topLeft{
  1630. top:var(--resizer-shift);
  1631. left:var(--resizer-shift);
  1632. }
  1633. .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.topMiddle{
  1634. top:var(--resizer-shift);
  1635. left:calc(50% + var(--resizer-shift));
  1636. }
  1637. .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.topRight{
  1638. top:var(--resizer-shift);
  1639. right:var(--resizer-shift);
  1640. }
  1641. .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.middleRight{
  1642. top:calc(50% + var(--resizer-shift));
  1643. right:var(--resizer-shift);
  1644. }
  1645. .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.bottomRight{
  1646. bottom:var(--resizer-shift);
  1647. right:var(--resizer-shift);
  1648. }
  1649. .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.bottomMiddle{
  1650. bottom:var(--resizer-shift);
  1651. left:calc(50% + var(--resizer-shift));
  1652. }
  1653. .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.bottomLeft{
  1654. bottom:var(--resizer-shift);
  1655. left:var(--resizer-shift);
  1656. }
  1657. .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.middleLeft{
  1658. top:calc(50% + var(--resizer-shift));
  1659. left:var(--resizer-shift);
  1660. }
  1661. .annotationEditorLayer[data-main-rotation="0"]
  1662. :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.topLeft,
  1663. .annotationEditorLayer[data-main-rotation="90"]
  1664. :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.topLeft,
  1665. .annotationEditorLayer[data-main-rotation="180"]
  1666. :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.topLeft,
  1667. .annotationEditorLayer[data-main-rotation="270"]
  1668. :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.topLeft,
  1669. .annotationEditorLayer[data-main-rotation="0"]
  1670. :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.bottomRight,
  1671. .annotationEditorLayer[data-main-rotation="90"]
  1672. :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.bottomRight,
  1673. .annotationEditorLayer[data-main-rotation="180"]
  1674. :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.bottomRight,
  1675. .annotationEditorLayer[data-main-rotation="270"]
  1676. :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.bottomRight{
  1677. cursor:nwse-resize;
  1678. }
  1679. .annotationEditorLayer[data-main-rotation="0"]
  1680. :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.topMiddle,
  1681. .annotationEditorLayer[data-main-rotation="90"]
  1682. :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.topMiddle,
  1683. .annotationEditorLayer[data-main-rotation="180"]
  1684. :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.topMiddle,
  1685. .annotationEditorLayer[data-main-rotation="270"]
  1686. :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.topMiddle,
  1687. .annotationEditorLayer[data-main-rotation="0"]
  1688. :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.bottomMiddle,
  1689. .annotationEditorLayer[data-main-rotation="90"]
  1690. :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.bottomMiddle,
  1691. .annotationEditorLayer[data-main-rotation="180"]
  1692. :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.bottomMiddle,
  1693. .annotationEditorLayer[data-main-rotation="270"]
  1694. :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.bottomMiddle{
  1695. cursor:ns-resize;
  1696. }
  1697. .annotationEditorLayer[data-main-rotation="0"]
  1698. :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.topRight,
  1699. .annotationEditorLayer[data-main-rotation="90"]
  1700. :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.topRight,
  1701. .annotationEditorLayer[data-main-rotation="180"]
  1702. :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.topRight,
  1703. .annotationEditorLayer[data-main-rotation="270"]
  1704. :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.topRight,
  1705. .annotationEditorLayer[data-main-rotation="0"]
  1706. :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.bottomLeft,
  1707. .annotationEditorLayer[data-main-rotation="90"]
  1708. :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.bottomLeft,
  1709. .annotationEditorLayer[data-main-rotation="180"]
  1710. :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.bottomLeft,
  1711. .annotationEditorLayer[data-main-rotation="270"]
  1712. :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.bottomLeft{
  1713. cursor:nesw-resize;
  1714. }
  1715. .annotationEditorLayer[data-main-rotation="0"]
  1716. :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.middleRight,
  1717. .annotationEditorLayer[data-main-rotation="90"]
  1718. :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.middleRight,
  1719. .annotationEditorLayer[data-main-rotation="180"]
  1720. :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.middleRight,
  1721. .annotationEditorLayer[data-main-rotation="270"]
  1722. :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.middleRight,
  1723. .annotationEditorLayer[data-main-rotation="0"]
  1724. :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.middleLeft,
  1725. .annotationEditorLayer[data-main-rotation="90"]
  1726. :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.middleLeft,
  1727. .annotationEditorLayer[data-main-rotation="180"]
  1728. :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.middleLeft,
  1729. .annotationEditorLayer[data-main-rotation="270"]
  1730. :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.middleLeft{
  1731. cursor:ew-resize;
  1732. }
  1733. .annotationEditorLayer[data-main-rotation="0"]
  1734. :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.topLeft,
  1735. .annotationEditorLayer[data-main-rotation="90"]
  1736. :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.topLeft,
  1737. .annotationEditorLayer[data-main-rotation="180"]
  1738. :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.topLeft,
  1739. .annotationEditorLayer[data-main-rotation="270"]
  1740. :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.topLeft,
  1741. .annotationEditorLayer[data-main-rotation="0"]
  1742. :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.bottomRight,
  1743. .annotationEditorLayer[data-main-rotation="90"]
  1744. :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.bottomRight,
  1745. .annotationEditorLayer[data-main-rotation="180"]
  1746. :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.bottomRight,
  1747. .annotationEditorLayer[data-main-rotation="270"]
  1748. :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.bottomRight{
  1749. cursor:nesw-resize;
  1750. }
  1751. .annotationEditorLayer[data-main-rotation="0"]
  1752. :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.topMiddle,
  1753. .annotationEditorLayer[data-main-rotation="90"]
  1754. :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.topMiddle,
  1755. .annotationEditorLayer[data-main-rotation="180"]
  1756. :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.topMiddle,
  1757. .annotationEditorLayer[data-main-rotation="270"]
  1758. :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.topMiddle,
  1759. .annotationEditorLayer[data-main-rotation="0"]
  1760. :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.bottomMiddle,
  1761. .annotationEditorLayer[data-main-rotation="90"]
  1762. :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.bottomMiddle,
  1763. .annotationEditorLayer[data-main-rotation="180"]
  1764. :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.bottomMiddle,
  1765. .annotationEditorLayer[data-main-rotation="270"]
  1766. :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.bottomMiddle{
  1767. cursor:ew-resize;
  1768. }
  1769. .annotationEditorLayer[data-main-rotation="0"]
  1770. :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.topRight,
  1771. .annotationEditorLayer[data-main-rotation="90"]
  1772. :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.topRight,
  1773. .annotationEditorLayer[data-main-rotation="180"]
  1774. :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.topRight,
  1775. .annotationEditorLayer[data-main-rotation="270"]
  1776. :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.topRight,
  1777. .annotationEditorLayer[data-main-rotation="0"]
  1778. :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.bottomLeft,
  1779. .annotationEditorLayer[data-main-rotation="90"]
  1780. :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.bottomLeft,
  1781. .annotationEditorLayer[data-main-rotation="180"]
  1782. :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.bottomLeft,
  1783. .annotationEditorLayer[data-main-rotation="270"]
  1784. :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.bottomLeft{
  1785. cursor:nwse-resize;
  1786. }
  1787. .annotationEditorLayer[data-main-rotation="0"]
  1788. :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.middleRight,
  1789. .annotationEditorLayer[data-main-rotation="90"]
  1790. :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.middleRight,
  1791. .annotationEditorLayer[data-main-rotation="180"]
  1792. :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.middleRight,
  1793. .annotationEditorLayer[data-main-rotation="270"]
  1794. :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.middleRight,
  1795. .annotationEditorLayer[data-main-rotation="0"]
  1796. :is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.middleLeft,
  1797. .annotationEditorLayer[data-main-rotation="90"]
  1798. :is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.middleLeft,
  1799. .annotationEditorLayer[data-main-rotation="180"]
  1800. :is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.middleLeft,
  1801. .annotationEditorLayer[data-main-rotation="270"]
  1802. :is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.middleLeft{
  1803. cursor:ns-resize;
  1804. }
  1805. .annotationEditorLayer
  1806. :is(
  1807. [data-main-rotation="0"] [data-editor-rotation="90"],
  1808. [data-main-rotation="90"] [data-editor-rotation="0"],
  1809. [data-main-rotation="180"] [data-editor-rotation="270"],
  1810. [data-main-rotation="270"] [data-editor-rotation="180"]
  1811. ) .editToolbar{
  1812. rotate:270deg;
  1813. }
  1814. [dir="ltr"] .annotationEditorLayer
  1815. :is(
  1816. [data-main-rotation="0"] [data-editor-rotation="90"],
  1817. [data-main-rotation="90"] [data-editor-rotation="0"],
  1818. [data-main-rotation="180"] [data-editor-rotation="270"],
  1819. [data-main-rotation="270"] [data-editor-rotation="180"]
  1820. ) .editToolbar{
  1821. inset-inline-end:calc(0px - var(--editor-toolbar-vert-offset));
  1822. inset-block-start:0;
  1823. }
  1824. [dir="rtl"] .annotationEditorLayer
  1825. :is(
  1826. [data-main-rotation="0"] [data-editor-rotation="90"],
  1827. [data-main-rotation="90"] [data-editor-rotation="0"],
  1828. [data-main-rotation="180"] [data-editor-rotation="270"],
  1829. [data-main-rotation="270"] [data-editor-rotation="180"]
  1830. ) .editToolbar{
  1831. inset-inline-end:calc(100% + var(--editor-toolbar-vert-offset));
  1832. inset-block-start:0;
  1833. }
  1834. .annotationEditorLayer
  1835. :is(
  1836. [data-main-rotation="0"] [data-editor-rotation="180"],
  1837. [data-main-rotation="90"] [data-editor-rotation="90"],
  1838. [data-main-rotation="180"] [data-editor-rotation="0"],
  1839. [data-main-rotation="270"] [data-editor-rotation="270"]
  1840. ) .editToolbar{
  1841. rotate:180deg;
  1842. inset-inline-end:100%;
  1843. inset-block-start:calc(0pc - var(--editor-toolbar-vert-offset));
  1844. }
  1845. .annotationEditorLayer
  1846. :is(
  1847. [data-main-rotation="0"] [data-editor-rotation="270"],
  1848. [data-main-rotation="90"] [data-editor-rotation="180"],
  1849. [data-main-rotation="180"] [data-editor-rotation="90"],
  1850. [data-main-rotation="270"] [data-editor-rotation="0"]
  1851. ) .editToolbar{
  1852. rotate:90deg;
  1853. }
  1854. [dir="ltr"] .annotationEditorLayer
  1855. :is(
  1856. [data-main-rotation="0"] [data-editor-rotation="270"],
  1857. [data-main-rotation="90"] [data-editor-rotation="180"],
  1858. [data-main-rotation="180"] [data-editor-rotation="90"],
  1859. [data-main-rotation="270"] [data-editor-rotation="0"]
  1860. ) .editToolbar{
  1861. inset-inline-end:calc(100% + var(--editor-toolbar-vert-offset));
  1862. inset-block-start:100%;
  1863. }
  1864. [dir="rtl"] .annotationEditorLayer
  1865. :is(
  1866. [data-main-rotation="0"] [data-editor-rotation="270"],
  1867. [data-main-rotation="90"] [data-editor-rotation="180"],
  1868. [data-main-rotation="180"] [data-editor-rotation="90"],
  1869. [data-main-rotation="270"] [data-editor-rotation="0"]
  1870. ) .editToolbar{
  1871. inset-inline-start:calc(0px - var(--editor-toolbar-vert-offset));
  1872. inset-block-start:0;
  1873. }
  1874. .dialog.altText::backdrop{
  1875. -webkit-mask:url(#alttext-manager-mask);
  1876. mask:url(#alttext-manager-mask);
  1877. }
  1878. .dialog.altText.positioned{
  1879. margin:0;
  1880. }
  1881. .dialog.altText #altTextContainer{
  1882. width:300px;
  1883. height:-moz-fit-content;
  1884. height:fit-content;
  1885. display:inline-flex;
  1886. flex-direction:column;
  1887. align-items:flex-start;
  1888. gap:16px;
  1889. }
  1890. .dialog.altText #altTextContainer #overallDescription{
  1891. display:flex;
  1892. flex-direction:column;
  1893. align-items:flex-start;
  1894. gap:4px;
  1895. align-self:stretch;
  1896. }
  1897. .dialog.altText #altTextContainer #overallDescription span{
  1898. align-self:stretch;
  1899. }
  1900. .dialog.altText #altTextContainer #overallDescription .title{
  1901. font-size:13px;
  1902. font-style:normal;
  1903. font-weight:590;
  1904. }
  1905. .dialog.altText #altTextContainer #addDescription{
  1906. display:flex;
  1907. flex-direction:column;
  1908. align-items:stretch;
  1909. gap:8px;
  1910. }
  1911. .dialog.altText #altTextContainer #addDescription .descriptionArea{
  1912. flex:1;
  1913. padding-inline:24px 10px;
  1914. }
  1915. .dialog.altText #altTextContainer #addDescription .descriptionArea textarea{
  1916. width:100%;
  1917. min-height:75px;
  1918. }
  1919. .dialog.altText #altTextContainer #buttons{
  1920. display:flex;
  1921. justify-content:flex-end;
  1922. align-items:flex-start;
  1923. gap:8px;
  1924. align-self:stretch;
  1925. }
  1926. .colorPicker{
  1927. --hover-outline-color:#0250bb;
  1928. --selected-outline-color:#0060df;
  1929. --swatch-border-color:#cfcfd8;
  1930. }
  1931. @media (prefers-color-scheme: dark){
  1932. :where(html:not(.is-light)) .colorPicker{
  1933. --hover-outline-color:#80ebff;
  1934. --selected-outline-color:#aaf2ff;
  1935. --swatch-border-color:#52525e;
  1936. }
  1937. }
  1938. :where(html.is-dark) .colorPicker{
  1939. --hover-outline-color:#80ebff;
  1940. --selected-outline-color:#aaf2ff;
  1941. --swatch-border-color:#52525e;
  1942. }
  1943. @media screen and (forced-colors: active){
  1944. .colorPicker{
  1945. --hover-outline-color:Highlight;
  1946. --selected-outline-color:var(--hover-outline-color);
  1947. --swatch-border-color:ButtonText;
  1948. }
  1949. }
  1950. .colorPicker .swatch{
  1951. width:16px;
  1952. height:16px;
  1953. border:1px solid var(--swatch-border-color);
  1954. border-radius:100%;
  1955. outline-offset:2px;
  1956. box-sizing:border-box;
  1957. forced-color-adjust:none;
  1958. }
  1959. .colorPicker button:is(:hover, .selected) > .swatch{
  1960. border:none;
  1961. }
  1962. .annotationEditorLayer[data-main-rotation="0"] .highlightEditor:not(.free) > .editToolbar{
  1963. rotate:0deg;
  1964. }
  1965. .annotationEditorLayer[data-main-rotation="90"] .highlightEditor:not(.free) > .editToolbar{
  1966. rotate:270deg;
  1967. }
  1968. .annotationEditorLayer[data-main-rotation="180"] .highlightEditor:not(.free) > .editToolbar{
  1969. rotate:180deg;
  1970. }
  1971. .annotationEditorLayer[data-main-rotation="270"] .highlightEditor:not(.free) > .editToolbar{
  1972. rotate:90deg;
  1973. }
  1974. .annotationEditorLayer .highlightEditor{
  1975. position:absolute;
  1976. background:transparent;
  1977. z-index:1;
  1978. cursor:auto;
  1979. max-width:100%;
  1980. max-height:100%;
  1981. border:none;
  1982. outline:none;
  1983. pointer-events:none;
  1984. transform-origin:0 0;
  1985. }
  1986. .annotationEditorLayer .highlightEditor:not(.free){
  1987. transform:none;
  1988. }
  1989. .annotationEditorLayer .highlightEditor .internal{
  1990. position:absolute;
  1991. top:0;
  1992. left:0;
  1993. width:100%;
  1994. height:100%;
  1995. pointer-events:auto;
  1996. }
  1997. .annotationEditorLayer .highlightEditor.disabled .internal{
  1998. pointer-events:none;
  1999. }
  2000. .annotationEditorLayer .highlightEditor.selectedEditor .internal{
  2001. cursor:pointer;
  2002. }
  2003. .annotationEditorLayer .highlightEditor .editToolbar{
  2004. --editor-toolbar-colorpicker-arrow-image:url(images/toolbarButton-menuArrow.svg);
  2005. transform-origin:center !important;
  2006. }
  2007. .annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker{
  2008. position:relative;
  2009. width:auto;
  2010. display:flex;
  2011. justify-content:center;
  2012. align-items:center;
  2013. gap:4px;
  2014. padding:4px;
  2015. }
  2016. .annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker::after{
  2017. content:"";
  2018. -webkit-mask-image:var(--editor-toolbar-colorpicker-arrow-image);
  2019. mask-image:var(--editor-toolbar-colorpicker-arrow-image);
  2020. -webkit-mask-repeat:no-repeat;
  2021. mask-repeat:no-repeat;
  2022. -webkit-mask-position:center;
  2023. mask-position:center;
  2024. display:inline-block;
  2025. background-color:var(--editor-toolbar-fg-color);
  2026. width:12px;
  2027. height:12px;
  2028. }
  2029. .annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker:hover::after{
  2030. background-color:var(--editor-toolbar-hover-fg-color);
  2031. }
  2032. .annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker:has(.dropdown:not(.hidden)){
  2033. background-color:var(--editor-toolbar-hover-bg-color);
  2034. }
  2035. .annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker:has(.dropdown:not(.hidden))::after{
  2036. scale:-1;
  2037. }
  2038. .annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown{
  2039. position:absolute;
  2040. display:flex;
  2041. justify-content:center;
  2042. align-items:center;
  2043. flex-direction:column;
  2044. gap:11px;
  2045. padding-block:8px;
  2046. border-radius:6px;
  2047. background-color:var(--editor-toolbar-bg-color);
  2048. border:1px solid var(--editor-toolbar-border-color);
  2049. box-shadow:var(--editor-toolbar-shadow);
  2050. inset-block-start:calc(100% + 4px);
  2051. width:calc(100% + 2 * var(--editor-toolbar-padding));
  2052. }
  2053. .annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button{
  2054. width:100%;
  2055. height:auto;
  2056. border:none;
  2057. cursor:pointer;
  2058. display:flex;
  2059. justify-content:center;
  2060. align-items:center;
  2061. background:none;
  2062. }
  2063. .annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button:is(:active, :focus-visible){
  2064. outline:none;
  2065. }
  2066. .annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button > .swatch{
  2067. outline-offset:2px;
  2068. }
  2069. .annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button[aria-selected="true"] > .swatch{
  2070. outline:2px solid var(--selected-outline-color);
  2071. }
  2072. .annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button:is(:hover, :active, :focus-visible) > .swatch{
  2073. outline:2px solid var(--hover-outline-color);
  2074. }
  2075. .editorParamsToolbar:has(#highlightParamsToolbarContainer){
  2076. padding:unset;
  2077. }
  2078. #highlightParamsToolbarContainer{
  2079. height:auto;
  2080. padding-inline:10px;
  2081. padding-block:10px 16px;
  2082. gap:16px;
  2083. display:flex;
  2084. flex-direction:column;
  2085. box-sizing:border-box;
  2086. }
  2087. #highlightParamsToolbarContainer .editorParamsLabel{
  2088. width:-moz-fit-content;
  2089. width:fit-content;
  2090. inset-inline-start:0;
  2091. }
  2092. #highlightParamsToolbarContainer .colorPicker{
  2093. display:flex;
  2094. flex-direction:column;
  2095. gap:8px;
  2096. }
  2097. #highlightParamsToolbarContainer .colorPicker .dropdown{
  2098. display:flex;
  2099. justify-content:space-between;
  2100. align-items:center;
  2101. flex-direction:row;
  2102. height:auto;
  2103. }
  2104. #highlightParamsToolbarContainer .colorPicker .dropdown button{
  2105. width:auto;
  2106. height:auto;
  2107. border:none;
  2108. cursor:pointer;
  2109. display:flex;
  2110. justify-content:center;
  2111. align-items:center;
  2112. background:none;
  2113. flex:0 0 auto;
  2114. }
  2115. #highlightParamsToolbarContainer .colorPicker .dropdown button .swatch{
  2116. width:24px;
  2117. height:24px;
  2118. }
  2119. #highlightParamsToolbarContainer .colorPicker .dropdown button:is(:active, :focus-visible){
  2120. outline:none;
  2121. }
  2122. #highlightParamsToolbarContainer .colorPicker .dropdown button[aria-selected="true"] > .swatch{
  2123. outline:2px solid var(--selected-outline-color);
  2124. }
  2125. #highlightParamsToolbarContainer .colorPicker .dropdown button:is(:hover, :active, :focus-visible) > .swatch{
  2126. outline:2px solid var(--hover-outline-color);
  2127. }
  2128. #highlightParamsToolbarContainer #editorHighlightThickness{
  2129. display:flex;
  2130. flex-direction:column;
  2131. align-items:center;
  2132. gap:4px;
  2133. align-self:stretch;
  2134. }
  2135. #highlightParamsToolbarContainer #editorHighlightThickness .editorParamsLabel{
  2136. width:100%;
  2137. height:auto;
  2138. align-self:stretch;
  2139. }
  2140. #highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker{
  2141. display:flex;
  2142. justify-content:space-between;
  2143. align-items:center;
  2144. align-self:stretch;
  2145. --example-color:#bfbfc9;
  2146. }
  2147. @media (prefers-color-scheme: dark){
  2148. :where(html:not(.is-light)) #highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker{
  2149. --example-color:#80808e;
  2150. }
  2151. }
  2152. :where(html.is-dark) #highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker{
  2153. --example-color:#80808e;
  2154. }
  2155. @media screen and (forced-colors: active){
  2156. #highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker{
  2157. --example-color:CanvasText;
  2158. }
  2159. }
  2160. :is(#highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker > .editorParamsSlider[disabled]){
  2161. opacity:0.4;
  2162. }
  2163. #highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker::before,
  2164. #highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker::after{
  2165. content:"";
  2166. width:8px;
  2167. aspect-ratio:1;
  2168. display:block;
  2169. border-radius:100%;
  2170. background-color:var(--example-color);
  2171. }
  2172. #highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker::after{
  2173. width:24px;
  2174. }
  2175. #highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker .editorParamsSlider{
  2176. width:unset;
  2177. height:14px;
  2178. }
  2179. #highlightParamsToolbarContainer #editorHighlightVisibility{
  2180. display:flex;
  2181. flex-direction:column;
  2182. align-items:flex-start;
  2183. gap:8px;
  2184. align-self:stretch;
  2185. }
  2186. #highlightParamsToolbarContainer #editorHighlightVisibility .divider{
  2187. --divider-color:#d7d7db;
  2188. margin-block:4px;
  2189. width:100%;
  2190. height:1px;
  2191. background-color:var(--divider-color);
  2192. }
  2193. @media (prefers-color-scheme: dark){
  2194. :where(html:not(.is-light)) #highlightParamsToolbarContainer #editorHighlightVisibility .divider{
  2195. --divider-color:#8f8f9d;
  2196. }
  2197. }
  2198. :where(html.is-dark) #highlightParamsToolbarContainer #editorHighlightVisibility .divider{
  2199. --divider-color:#8f8f9d;
  2200. }
  2201. @media screen and (forced-colors: active){
  2202. #highlightParamsToolbarContainer #editorHighlightVisibility .divider{
  2203. --divider-color:CanvasText;
  2204. }
  2205. }
  2206. #highlightParamsToolbarContainer #editorHighlightVisibility .toggler{
  2207. display:flex;
  2208. justify-content:space-between;
  2209. align-items:center;
  2210. align-self:stretch;
  2211. }
  2212. :root{
  2213. --viewer-container-height:0;
  2214. --pdfViewer-padding-bottom:0;
  2215. --page-margin:1px auto -8px;
  2216. --page-border:9px solid transparent;
  2217. --spreadHorizontalWrapped-margin-LR:-3.5px;
  2218. --loading-icon-delay:400ms;
  2219. }
  2220. @media screen and (forced-colors: active){
  2221. :root{
  2222. --pdfViewer-padding-bottom:9px;
  2223. --page-margin:8px auto -1px;
  2224. --page-border:1px solid CanvasText;
  2225. --spreadHorizontalWrapped-margin-LR:3.5px;
  2226. }
  2227. }
  2228. [data-main-rotation="90"]{
  2229. transform:rotate(90deg) translateY(-100%);
  2230. }
  2231. [data-main-rotation="180"]{
  2232. transform:rotate(180deg) translate(-100%, -100%);
  2233. }
  2234. [data-main-rotation="270"]{
  2235. transform:rotate(270deg) translateX(-100%);
  2236. }
  2237. #hiddenCopyElement,
  2238. .hiddenCanvasElement{
  2239. position:absolute;
  2240. top:0;
  2241. left:0;
  2242. width:0;
  2243. height:0;
  2244. display:none;
  2245. }
  2246. .pdfViewer{
  2247. --scale-factor:1;
  2248. padding-bottom:var(--pdfViewer-padding-bottom);
  2249. --hcm-highlight-filter:none;
  2250. --hcm-highlight-selected-filter:none;
  2251. }
  2252. @media screen and (forced-colors: active){
  2253. .pdfViewer{
  2254. --hcm-highlight-filter:invert(100%);
  2255. }
  2256. }
  2257. .pdfViewer.copyAll{
  2258. cursor:wait;
  2259. }
  2260. .pdfViewer .canvasWrapper{
  2261. overflow:hidden;
  2262. width:100%;
  2263. height:100%;
  2264. }
  2265. .pdfViewer .canvasWrapper canvas{
  2266. margin:0;
  2267. display:block;
  2268. }
  2269. .pdfViewer .canvasWrapper canvas[hidden]{
  2270. display:none;
  2271. }
  2272. .pdfViewer .canvasWrapper canvas[zooming]{
  2273. width:100%;
  2274. height:100%;
  2275. }
  2276. .pdfViewer .canvasWrapper canvas .structTree{
  2277. contain:strict;
  2278. }
  2279. .pdfViewer .page{
  2280. direction:ltr;
  2281. width:816px;
  2282. height:1056px;
  2283. margin:var(--page-margin);
  2284. position:relative;
  2285. overflow:visible;
  2286. border:var(--page-border);
  2287. background-clip:content-box;
  2288. background-color:rgb(255 255 255);
  2289. }
  2290. .pdfViewer .dummyPage{
  2291. position:relative;
  2292. width:0;
  2293. height:var(--viewer-container-height);
  2294. }
  2295. .pdfViewer.noUserSelect{
  2296. -webkit-user-select:none;
  2297. -moz-user-select:none;
  2298. user-select:none;
  2299. }
  2300. .pdfViewer.removePageBorders .page{
  2301. margin:0 auto 10px;
  2302. border:none;
  2303. }
  2304. .pdfViewer:is(.scrollHorizontal, .scrollWrapped),
  2305. .spread{
  2306. margin-inline:3.5px;
  2307. text-align:center;
  2308. }
  2309. .pdfViewer.scrollHorizontal,
  2310. .spread{
  2311. white-space:nowrap;
  2312. }
  2313. .pdfViewer.removePageBorders,
  2314. .pdfViewer:is(.scrollHorizontal, .scrollWrapped) .spread{
  2315. margin-inline:0;
  2316. }
  2317. .spread :is(.page, .dummyPage),
  2318. .pdfViewer:is(.scrollHorizontal, .scrollWrapped) :is(.page, .spread){
  2319. display:inline-block;
  2320. vertical-align:middle;
  2321. }
  2322. .spread .page,
  2323. .pdfViewer:is(.scrollHorizontal, .scrollWrapped) .page{
  2324. margin-inline:var(--spreadHorizontalWrapped-margin-LR);
  2325. }
  2326. .pdfViewer.removePageBorders .spread .page,
  2327. .pdfViewer.removePageBorders:is(.scrollHorizontal, .scrollWrapped) .page{
  2328. margin-inline:5px;
  2329. }
  2330. .pdfViewer .page.loadingIcon::after{
  2331. position:absolute;
  2332. top:0;
  2333. left:0;
  2334. content:"";
  2335. width:100%;
  2336. height:100%;
  2337. background:url("images/loading-icon.gif") center no-repeat;
  2338. display:none;
  2339. transition-property:display;
  2340. transition-delay:var(--loading-icon-delay);
  2341. z-index:5;
  2342. contain:strict;
  2343. }
  2344. .pdfViewer .page.loading::after{
  2345. display:block;
  2346. }
  2347. .pdfViewer .page:not(.loading)::after{
  2348. transition-property:none;
  2349. display:none;
  2350. }
  2351. .pdfPresentationMode .pdfViewer{
  2352. padding-bottom:0;
  2353. }
  2354. .pdfPresentationMode .spread{
  2355. margin:0;
  2356. }
  2357. .pdfPresentationMode .pdfViewer .page{
  2358. margin:0 auto;
  2359. border:2px solid transparent;
  2360. }
  2361. :root{
  2362. --dir-factor:1;
  2363. --inline-start:left;
  2364. --inline-end:right;
  2365. --sidebar-width:200px;
  2366. --sidebar-transition-duration:200ms;
  2367. --sidebar-transition-timing-function:ease;
  2368. --toolbar-icon-opacity:0.7;
  2369. --doorhanger-icon-opacity:0.9;
  2370. --editor-toolbar-base-offset:105px;
  2371. --main-color:rgb(12 12 13);
  2372. --body-bg-color:rgb(212 212 215);
  2373. --progressBar-color:rgb(10 132 255);
  2374. --progressBar-bg-color:rgb(221 221 222);
  2375. --progressBar-blend-color:rgb(116 177 239);
  2376. --scrollbar-color:auto;
  2377. --scrollbar-bg-color:auto;
  2378. --toolbar-icon-bg-color:rgb(0 0 0);
  2379. --toolbar-icon-hover-bg-color:rgb(0 0 0);
  2380. --sidebar-narrow-bg-color:rgb(212 212 215 / 0.9);
  2381. --sidebar-toolbar-bg-color:rgb(245 246 247);
  2382. --toolbar-bg-color:rgb(249 249 250);
  2383. --toolbar-border-color:rgb(184 184 184);
  2384. --toolbar-box-shadow:0 1px 0 var(--toolbar-border-color);
  2385. --toolbar-border-bottom:none;
  2386. --toolbarSidebar-box-shadow:inset calc(-1px * var(--dir-factor)) 0 0 rgb(0 0 0 / 0.25), 0 1px 0 rgb(0 0 0 / 0.15), 0 0 1px rgb(0 0 0 / 0.1);
  2387. --toolbarSidebar-border-bottom:none;
  2388. --button-hover-color:rgb(221 222 223);
  2389. --toggled-btn-color:rgb(0 0 0);
  2390. --toggled-btn-bg-color:rgb(0 0 0 / 0.3);
  2391. --toggled-hover-active-btn-color:rgb(0 0 0 / 0.4);
  2392. --toggled-hover-btn-outline:none;
  2393. --dropdown-btn-bg-color:rgb(215 215 219);
  2394. --dropdown-btn-border:none;
  2395. --separator-color:rgb(0 0 0 / 0.3);
  2396. --field-color:rgb(6 6 6);
  2397. --field-bg-color:rgb(255 255 255);
  2398. --field-border-color:rgb(187 187 188);
  2399. --treeitem-color:rgb(0 0 0 / 0.8);
  2400. --treeitem-bg-color:rgb(0 0 0 / 0.15);
  2401. --treeitem-hover-color:rgb(0 0 0 / 0.9);
  2402. --treeitem-selected-color:rgb(0 0 0 / 0.9);
  2403. --treeitem-selected-bg-color:rgb(0 0 0 / 0.25);
  2404. --thumbnail-hover-color:rgb(0 0 0 / 0.1);
  2405. --thumbnail-selected-color:rgb(0 0 0 / 0.2);
  2406. --doorhanger-bg-color:rgb(255 255 255);
  2407. --doorhanger-border-color:rgb(12 12 13 / 0.2);
  2408. --doorhanger-hover-color:rgb(12 12 13);
  2409. --doorhanger-hover-bg-color:rgb(237 237 237);
  2410. --doorhanger-separator-color:rgb(222 222 222);
  2411. --dialog-button-border:none;
  2412. --dialog-button-bg-color:rgb(12 12 13 / 0.1);
  2413. --dialog-button-hover-bg-color:rgb(12 12 13 / 0.3);
  2414. --loading-icon:url(images/loading.svg);
  2415. --treeitem-expanded-icon:url(images/treeitem-expanded.svg);
  2416. --treeitem-collapsed-icon:url(images/treeitem-collapsed.svg);
  2417. --toolbarButton-editorFreeText-icon:url(images/toolbarButton-editorFreeText.svg);
  2418. --toolbarButton-editorHighlight-icon:url(images/toolbarButton-editorHighlight.svg);
  2419. --toolbarButton-editorInk-icon:url(images/toolbarButton-editorInk.svg);
  2420. --toolbarButton-editorStamp-icon:url(images/toolbarButton-editorStamp.svg);
  2421. --toolbarButton-menuArrow-icon:url(images/toolbarButton-menuArrow.svg);
  2422. --toolbarButton-sidebarToggle-icon:url(images/toolbarButton-sidebarToggle.svg);
  2423. --toolbarButton-secondaryToolbarToggle-icon:url(images/toolbarButton-secondaryToolbarToggle.svg);
  2424. --toolbarButton-pageUp-icon:url(images/toolbarButton-pageUp.svg);
  2425. --toolbarButton-pageDown-icon:url(images/toolbarButton-pageDown.svg);
  2426. --toolbarButton-zoomOut-icon:url(images/toolbarButton-zoomOut.svg);
  2427. --toolbarButton-zoomIn-icon:url(images/toolbarButton-zoomIn.svg);
  2428. --toolbarButton-presentationMode-icon:url(images/toolbarButton-presentationMode.svg);
  2429. --toolbarButton-print-icon:url(images/toolbarButton-print.svg);
  2430. --toolbarButton-openFile-icon:url(images/toolbarButton-openFile.svg);
  2431. --toolbarButton-download-icon:url(images/toolbarButton-download.svg);
  2432. --toolbarButton-bookmark-icon:url(images/toolbarButton-bookmark.svg);
  2433. --toolbarButton-viewThumbnail-icon:url(images/toolbarButton-viewThumbnail.svg);
  2434. --toolbarButton-viewOutline-icon:url(images/toolbarButton-viewOutline.svg);
  2435. --toolbarButton-viewAttachments-icon:url(images/toolbarButton-viewAttachments.svg);
  2436. --toolbarButton-viewLayers-icon:url(images/toolbarButton-viewLayers.svg);
  2437. --toolbarButton-currentOutlineItem-icon:url(images/toolbarButton-currentOutlineItem.svg);
  2438. --toolbarButton-search-icon:url(images/toolbarButton-search.svg);
  2439. --findbarButton-previous-icon:url(images/findbarButton-previous.svg);
  2440. --findbarButton-next-icon:url(images/findbarButton-next.svg);
  2441. --secondaryToolbarButton-firstPage-icon:url(images/secondaryToolbarButton-firstPage.svg);
  2442. --secondaryToolbarButton-lastPage-icon:url(images/secondaryToolbarButton-lastPage.svg);
  2443. --secondaryToolbarButton-rotateCcw-icon:url(images/secondaryToolbarButton-rotateCcw.svg);
  2444. --secondaryToolbarButton-rotateCw-icon:url(images/secondaryToolbarButton-rotateCw.svg);
  2445. --secondaryToolbarButton-selectTool-icon:url(images/secondaryToolbarButton-selectTool.svg);
  2446. --secondaryToolbarButton-handTool-icon:url(images/secondaryToolbarButton-handTool.svg);
  2447. --secondaryToolbarButton-scrollPage-icon:url(images/secondaryToolbarButton-scrollPage.svg);
  2448. --secondaryToolbarButton-scrollVertical-icon:url(images/secondaryToolbarButton-scrollVertical.svg);
  2449. --secondaryToolbarButton-scrollHorizontal-icon:url(images/secondaryToolbarButton-scrollHorizontal.svg);
  2450. --secondaryToolbarButton-scrollWrapped-icon:url(images/secondaryToolbarButton-scrollWrapped.svg);
  2451. --secondaryToolbarButton-spreadNone-icon:url(images/secondaryToolbarButton-spreadNone.svg);
  2452. --secondaryToolbarButton-spreadOdd-icon:url(images/secondaryToolbarButton-spreadOdd.svg);
  2453. --secondaryToolbarButton-spreadEven-icon:url(images/secondaryToolbarButton-spreadEven.svg);
  2454. --secondaryToolbarButton-documentProperties-icon:url(images/secondaryToolbarButton-documentProperties.svg);
  2455. --editorParams-stampAddImage-icon:url(images/toolbarButton-zoomIn.svg);
  2456. }
  2457. [dir="rtl"]:root{
  2458. --dir-factor:-1;
  2459. --inline-start:right;
  2460. --inline-end:left;
  2461. }
  2462. @media (prefers-color-scheme: dark){
  2463. :root:where(:not(.is-light)){
  2464. --main-color:rgb(249 249 250);
  2465. --body-bg-color:rgb(42 42 46);
  2466. --progressBar-color:rgb(0 96 223);
  2467. --progressBar-bg-color:rgb(40 40 43);
  2468. --progressBar-blend-color:rgb(20 68 133);
  2469. --scrollbar-color:rgb(121 121 123);
  2470. --scrollbar-bg-color:rgb(35 35 39);
  2471. --toolbar-icon-bg-color:rgb(255 255 255);
  2472. --toolbar-icon-hover-bg-color:rgb(255 255 255);
  2473. --sidebar-narrow-bg-color:rgb(42 42 46 / 0.9);
  2474. --sidebar-toolbar-bg-color:rgb(50 50 52);
  2475. --toolbar-bg-color:rgb(56 56 61);
  2476. --toolbar-border-color:rgb(12 12 13);
  2477. --button-hover-color:rgb(102 102 103);
  2478. --toggled-btn-color:rgb(255 255 255);
  2479. --toggled-btn-bg-color:rgb(0 0 0 / 0.3);
  2480. --toggled-hover-active-btn-color:rgb(0 0 0 / 0.4);
  2481. --dropdown-btn-bg-color:rgb(74 74 79);
  2482. --separator-color:rgb(0 0 0 / 0.3);
  2483. --field-color:rgb(250 250 250);
  2484. --field-bg-color:rgb(64 64 68);
  2485. --field-border-color:rgb(115 115 115);
  2486. --treeitem-color:rgb(255 255 255 / 0.8);
  2487. --treeitem-bg-color:rgb(255 255 255 / 0.15);
  2488. --treeitem-hover-color:rgb(255 255 255 / 0.9);
  2489. --treeitem-selected-color:rgb(255 255 255 / 0.9);
  2490. --treeitem-selected-bg-color:rgb(255 255 255 / 0.25);
  2491. --thumbnail-hover-color:rgb(255 255 255 / 0.1);
  2492. --thumbnail-selected-color:rgb(255 255 255 / 0.2);
  2493. --doorhanger-bg-color:rgb(74 74 79);
  2494. --doorhanger-border-color:rgb(39 39 43);
  2495. --doorhanger-hover-color:rgb(249 249 250);
  2496. --doorhanger-hover-bg-color:rgb(93 94 98);
  2497. --doorhanger-separator-color:rgb(92 92 97);
  2498. --dialog-button-bg-color:rgb(92 92 97);
  2499. --dialog-button-hover-bg-color:rgb(115 115 115);
  2500. }
  2501. }
  2502. :root:where(.is-dark){
  2503. --main-color:rgb(249 249 250);
  2504. --body-bg-color:rgb(42 42 46);
  2505. --progressBar-color:rgb(0 96 223);
  2506. --progressBar-bg-color:rgb(40 40 43);
  2507. --progressBar-blend-color:rgb(20 68 133);
  2508. --scrollbar-color:rgb(121 121 123);
  2509. --scrollbar-bg-color:rgb(35 35 39);
  2510. --toolbar-icon-bg-color:rgb(255 255 255);
  2511. --toolbar-icon-hover-bg-color:rgb(255 255 255);
  2512. --sidebar-narrow-bg-color:rgb(42 42 46 / 0.9);
  2513. --sidebar-toolbar-bg-color:rgb(50 50 52);
  2514. --toolbar-bg-color:rgb(56 56 61);
  2515. --toolbar-border-color:rgb(12 12 13);
  2516. --button-hover-color:rgb(102 102 103);
  2517. --toggled-btn-color:rgb(255 255 255);
  2518. --toggled-btn-bg-color:rgb(0 0 0 / 0.3);
  2519. --toggled-hover-active-btn-color:rgb(0 0 0 / 0.4);
  2520. --dropdown-btn-bg-color:rgb(74 74 79);
  2521. --separator-color:rgb(0 0 0 / 0.3);
  2522. --field-color:rgb(250 250 250);
  2523. --field-bg-color:rgb(64 64 68);
  2524. --field-border-color:rgb(115 115 115);
  2525. --treeitem-color:rgb(255 255 255 / 0.8);
  2526. --treeitem-bg-color:rgb(255 255 255 / 0.15);
  2527. --treeitem-hover-color:rgb(255 255 255 / 0.9);
  2528. --treeitem-selected-color:rgb(255 255 255 / 0.9);
  2529. --treeitem-selected-bg-color:rgb(255 255 255 / 0.25);
  2530. --thumbnail-hover-color:rgb(255 255 255 / 0.1);
  2531. --thumbnail-selected-color:rgb(255 255 255 / 0.2);
  2532. --doorhanger-bg-color:rgb(74 74 79);
  2533. --doorhanger-border-color:rgb(39 39 43);
  2534. --doorhanger-hover-color:rgb(249 249 250);
  2535. --doorhanger-hover-bg-color:rgb(93 94 98);
  2536. --doorhanger-separator-color:rgb(92 92 97);
  2537. --dialog-button-bg-color:rgb(92 92 97);
  2538. --dialog-button-hover-bg-color:rgb(115 115 115);
  2539. }
  2540. @media screen and (forced-colors: active){
  2541. :root{
  2542. --button-hover-color:Highlight;
  2543. --doorhanger-hover-bg-color:Highlight;
  2544. --toolbar-icon-opacity:1;
  2545. --toolbar-icon-bg-color:ButtonText;
  2546. --toolbar-icon-hover-bg-color:ButtonFace;
  2547. --toggled-hover-active-btn-color:ButtonText;
  2548. --toggled-hover-btn-outline:2px solid ButtonBorder;
  2549. --toolbar-border-color:CanvasText;
  2550. --toolbar-border-bottom:1px solid var(--toolbar-border-color);
  2551. --toolbar-box-shadow:none;
  2552. --toggled-btn-color:HighlightText;
  2553. --toggled-btn-bg-color:LinkText;
  2554. --doorhanger-hover-color:ButtonFace;
  2555. --doorhanger-border-color-whcm:1px solid ButtonText;
  2556. --doorhanger-triangle-opacity-whcm:0;
  2557. --dialog-button-border:1px solid Highlight;
  2558. --dialog-button-hover-bg-color:Highlight;
  2559. --dialog-button-hover-color:ButtonFace;
  2560. --dropdown-btn-border:1px solid ButtonText;
  2561. --field-border-color:ButtonText;
  2562. --main-color:CanvasText;
  2563. --separator-color:GrayText;
  2564. --doorhanger-separator-color:GrayText;
  2565. --toolbarSidebar-box-shadow:none;
  2566. --toolbarSidebar-border-bottom:1px solid var(--toolbar-border-color);
  2567. }
  2568. }
  2569. @media screen and (prefers-reduced-motion: reduce){
  2570. :root{
  2571. --sidebar-transition-duration:0;
  2572. }
  2573. }
  2574. *{
  2575. padding:0;
  2576. margin:0;
  2577. }
  2578. html,
  2579. body{
  2580. height:100%;
  2581. width:100%;
  2582. }
  2583. body{
  2584. background-color:var(--body-bg-color);
  2585. scrollbar-color:var(--scrollbar-color) var(--scrollbar-bg-color);
  2586. }
  2587. body.wait::before{
  2588. content:"";
  2589. position:fixed;
  2590. width:100%;
  2591. height:100%;
  2592. z-index:100000;
  2593. cursor:wait;
  2594. }
  2595. .hidden,
  2596. [hidden]{
  2597. display:none !important;
  2598. }
  2599. #viewerContainer.pdfPresentationMode:fullscreen{
  2600. top:0;
  2601. background-color:rgb(0 0 0);
  2602. width:100%;
  2603. height:100%;
  2604. overflow:hidden;
  2605. cursor:none;
  2606. -webkit-user-select:none;
  2607. -moz-user-select:none;
  2608. user-select:none;
  2609. }
  2610. .pdfPresentationMode:fullscreen section:not([data-internal-link]){
  2611. pointer-events:none;
  2612. }
  2613. .pdfPresentationMode:fullscreen .textLayer span{
  2614. cursor:none;
  2615. }
  2616. .pdfPresentationMode.pdfPresentationModeControls > *,
  2617. .pdfPresentationMode.pdfPresentationModeControls .textLayer span{
  2618. cursor:default;
  2619. }
  2620. #outerContainer{
  2621. width:100%;
  2622. height:100%;
  2623. position:relative;
  2624. }
  2625. #sidebarContainer{
  2626. position:absolute;
  2627. inset-block:32px 0;
  2628. inset-inline-start:calc(-1 * var(--sidebar-width));
  2629. width:var(--sidebar-width);
  2630. visibility:hidden;
  2631. z-index:100;
  2632. font:message-box;
  2633. border-top:1px solid rgb(51 51 51);
  2634. border-inline-end:var(--doorhanger-border-color-whcm);
  2635. transition-property:inset-inline-start;
  2636. transition-duration:var(--sidebar-transition-duration);
  2637. transition-timing-function:var(--sidebar-transition-timing-function);
  2638. }
  2639. #outerContainer:is(.sidebarMoving, .sidebarOpen) #sidebarContainer{
  2640. visibility:visible;
  2641. }
  2642. #outerContainer.sidebarOpen #sidebarContainer{
  2643. inset-inline-start:0;
  2644. }
  2645. #mainContainer{
  2646. position:absolute;
  2647. inset:0;
  2648. min-width:350px;
  2649. }
  2650. #sidebarContent{
  2651. inset-block:32px 0;
  2652. inset-inline-start:0;
  2653. overflow:auto;
  2654. position:absolute;
  2655. width:100%;
  2656. box-shadow:inset calc(-1px * var(--dir-factor)) 0 0 rgb(0 0 0 / 0.25);
  2657. }
  2658. #viewerContainer{
  2659. overflow:auto;
  2660. position:absolute;
  2661. inset:32px 0 0;
  2662. outline:none;
  2663. }
  2664. #viewerContainer:not(.pdfPresentationMode){
  2665. transition-duration:var(--sidebar-transition-duration);
  2666. transition-timing-function:var(--sidebar-transition-timing-function);
  2667. }
  2668. #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode){
  2669. inset-inline-start:var(--sidebar-width);
  2670. transition-property:inset-inline-start;
  2671. }
  2672. .toolbar{
  2673. position:relative;
  2674. inset-inline:0;
  2675. z-index:9999;
  2676. cursor:default;
  2677. font:message-box;
  2678. }
  2679. :is(.toolbar, .editorParamsToolbar, .findbar, #sidebarContainer)
  2680. :is(input, button, select),
  2681. .secondaryToolbar :is(input, button, a, select){
  2682. outline:none;
  2683. font:message-box;
  2684. }
  2685. #toolbarContainer{
  2686. width:100%;
  2687. }
  2688. #toolbarSidebar{
  2689. width:100%;
  2690. height:32px;
  2691. background-color:var(--sidebar-toolbar-bg-color);
  2692. box-shadow:var(--toolbarSidebar-box-shadow);
  2693. border-bottom:var(--toolbarSidebar-border-bottom);
  2694. }
  2695. #sidebarResizer{
  2696. position:absolute;
  2697. inset-block:0;
  2698. inset-inline-end:-6px;
  2699. width:6px;
  2700. z-index:200;
  2701. cursor:ew-resize;
  2702. }
  2703. #toolbarContainer,
  2704. .findbar,
  2705. .secondaryToolbar,
  2706. .editorParamsToolbar{
  2707. position:relative;
  2708. height:32px;
  2709. background-color:var(--toolbar-bg-color);
  2710. box-shadow:var(--toolbar-box-shadow);
  2711. border-bottom:var(--toolbar-border-bottom);
  2712. }
  2713. #toolbarViewer{
  2714. height:32px;
  2715. }
  2716. #loadingBar{
  2717. --progressBar-percent:0%;
  2718. --progressBar-end-offset:0;
  2719. position:absolute;
  2720. inset-inline:0 var(--progressBar-end-offset);
  2721. height:4px;
  2722. background-color:var(--progressBar-bg-color);
  2723. border-bottom:1px solid var(--toolbar-border-color);
  2724. transition-property:inset-inline-start;
  2725. transition-duration:var(--sidebar-transition-duration);
  2726. transition-timing-function:var(--sidebar-transition-timing-function);
  2727. }
  2728. #outerContainer.sidebarOpen #loadingBar{
  2729. inset-inline-start:var(--sidebar-width);
  2730. }
  2731. #loadingBar .progress{
  2732. position:absolute;
  2733. top:0;
  2734. inset-inline-start:0;
  2735. width:100%;
  2736. transform:scaleX(var(--progressBar-percent));
  2737. transform-origin:calc(50% - 50% * var(--dir-factor)) 0;
  2738. height:100%;
  2739. background-color:var(--progressBar-color);
  2740. overflow:hidden;
  2741. transition:transform 200ms;
  2742. }
  2743. @keyframes progressIndeterminate{
  2744. 0%{
  2745. transform:translateX(calc(-142px * var(--dir-factor)));
  2746. }
  2747. 100%{
  2748. transform:translateX(0);
  2749. }
  2750. }
  2751. #loadingBar.indeterminate .progress{
  2752. transform:none;
  2753. background-color:var(--progressBar-bg-color);
  2754. transition:none;
  2755. }
  2756. #loadingBar.indeterminate .progress .glimmer{
  2757. position:absolute;
  2758. top:0;
  2759. inset-inline-start:0;
  2760. height:100%;
  2761. width:calc(100% + 150px);
  2762. background:repeating-linear-gradient(
  2763. 135deg,
  2764. var(--progressBar-blend-color) 0,
  2765. var(--progressBar-bg-color) 5px,
  2766. var(--progressBar-bg-color) 45px,
  2767. var(--progressBar-color) 55px,
  2768. var(--progressBar-color) 95px,
  2769. var(--progressBar-blend-color) 100px
  2770. );
  2771. animation:progressIndeterminate 1s linear infinite;
  2772. }
  2773. #outerContainer.sidebarResizing
  2774. :is(#sidebarContainer, #viewerContainer, #loadingBar){
  2775. transition-duration:0s;
  2776. }
  2777. .findbar,
  2778. .secondaryToolbar,
  2779. .editorParamsToolbar{
  2780. top:32px;
  2781. position:absolute;
  2782. z-index:30000;
  2783. height:auto;
  2784. padding:0 4px;
  2785. margin:4px 2px;
  2786. font:message-box;
  2787. font-size:12px;
  2788. line-height:14px;
  2789. text-align:left;
  2790. cursor:default;
  2791. }
  2792. .findbar{
  2793. inset-inline-start:64px;
  2794. min-width:300px;
  2795. background-color:var(--toolbar-bg-color);
  2796. }
  2797. .findbar > div{
  2798. height:32px;
  2799. }
  2800. .findbar > div#findbarInputContainer{
  2801. margin-inline-end:4px;
  2802. }
  2803. .findbar.wrapContainers > div,
  2804. .findbar.wrapContainers > div#findbarMessageContainer > *{
  2805. clear:both;
  2806. }
  2807. .findbar.wrapContainers > div#findbarMessageContainer{
  2808. height:auto;
  2809. }
  2810. .findbar input[type="checkbox"]{
  2811. pointer-events:none;
  2812. }
  2813. .findbar label{
  2814. -webkit-user-select:none;
  2815. -moz-user-select:none;
  2816. user-select:none;
  2817. }
  2818. .findbar label:hover,
  2819. .findbar input:focus-visible + label{
  2820. color:var(--toggled-btn-color);
  2821. background-color:var(--button-hover-color);
  2822. }
  2823. .findbar .toolbarField[type="checkbox"]:checked + .toolbarLabel{
  2824. background-color:var(--toggled-btn-bg-color) !important;
  2825. color:var(--toggled-btn-color);
  2826. }
  2827. #findInput{
  2828. width:200px;
  2829. }
  2830. #findInput::-moz-placeholder{
  2831. font-style:normal;
  2832. }
  2833. #findInput::placeholder{
  2834. font-style:normal;
  2835. }
  2836. .loadingInput:has(> #findInput[data-status="pending"])::after{
  2837. display:block;
  2838. visibility:visible;
  2839. }
  2840. #findInput[data-status="notFound"]{
  2841. background-color:rgb(255 102 102);
  2842. }
  2843. .secondaryToolbar,
  2844. .editorParamsToolbar{
  2845. padding:6px 0 10px;
  2846. inset-inline-end:4px;
  2847. height:auto;
  2848. background-color:var(--doorhanger-bg-color);
  2849. }
  2850. .editorParamsToolbarContainer{
  2851. width:220px;
  2852. margin-bottom:-4px;
  2853. }
  2854. .editorParamsToolbarContainer > .editorParamsSetter{
  2855. min-height:26px;
  2856. display:flex;
  2857. align-items:center;
  2858. justify-content:space-between;
  2859. padding-inline:10px;
  2860. }
  2861. .editorParamsToolbarContainer .editorParamsLabel{
  2862. padding-inline-end:10px;
  2863. flex:none;
  2864. font:menu;
  2865. font-size:13px;
  2866. font-style:normal;
  2867. font-weight:400;
  2868. line-height:150%;
  2869. color:var(--main-color);
  2870. }
  2871. .editorParamsToolbarContainer .editorParamsColor{
  2872. width:32px;
  2873. height:32px;
  2874. flex:none;
  2875. }
  2876. .editorParamsToolbarContainer .editorParamsSlider{
  2877. background-color:transparent;
  2878. width:90px;
  2879. flex:0 1 0;
  2880. }
  2881. .editorParamsToolbarContainer .editorParamsSlider::-moz-range-progress{
  2882. background-color:black;
  2883. }
  2884. .editorParamsToolbarContainer .editorParamsSlider::-webkit-slider-runnable-track,
  2885. .editorParamsToolbarContainer .editorParamsSlider::-moz-range-track{
  2886. background-color:black;
  2887. }
  2888. .editorParamsToolbarContainer .editorParamsSlider::-webkit-slider-thumb,
  2889. .editorParamsToolbarContainer .editorParamsSlider::-moz-range-thumb{
  2890. background-color:white;
  2891. }
  2892. #secondaryToolbarButtonContainer{
  2893. max-width:220px;
  2894. min-height:26px;
  2895. max-height:calc(var(--viewer-container-height) - 40px);
  2896. overflow-y:auto;
  2897. margin-bottom:-4px;
  2898. }
  2899. #editorStampParamsToolbar{
  2900. inset-inline-end:calc(var(--editor-toolbar-base-offset) + 0px);
  2901. }
  2902. #editorInkParamsToolbar{
  2903. inset-inline-end:calc(var(--editor-toolbar-base-offset) + 28px);
  2904. }
  2905. #editorFreeTextParamsToolbar{
  2906. inset-inline-end:calc(var(--editor-toolbar-base-offset) + 56px);
  2907. }
  2908. #editorHighlightParamsToolbar{
  2909. inset-inline-end:calc(var(--editor-toolbar-base-offset) + 84px);
  2910. }
  2911. #editorStampAddImage::before{
  2912. -webkit-mask-image:var(--editorParams-stampAddImage-icon);
  2913. mask-image:var(--editorParams-stampAddImage-icon);
  2914. }
  2915. .doorHanger,
  2916. .doorHangerRight{
  2917. border-radius:2px;
  2918. box-shadow:0 1px 5px var(--doorhanger-border-color), 0 0 0 1px var(--doorhanger-border-color);
  2919. border:var(--doorhanger-border-color-whcm);
  2920. }
  2921. :is(.doorHanger, .doorHangerRight)::after,
  2922. :is(.doorHanger, .doorHangerRight)::before{
  2923. bottom:100%;
  2924. border:8px solid rgb(0 0 0 / 0);
  2925. content:" ";
  2926. height:0;
  2927. width:0;
  2928. position:absolute;
  2929. pointer-events:none;
  2930. opacity:var(--doorhanger-triangle-opacity-whcm);
  2931. }
  2932. .doorHanger::after{
  2933. inset-inline-start:10px;
  2934. margin-inline-start:-8px;
  2935. border-bottom-color:var(--toolbar-bg-color);
  2936. }
  2937. .doorHangerRight::after{
  2938. inset-inline-end:10px;
  2939. margin-inline-end:-8px;
  2940. border-bottom-color:var(--doorhanger-bg-color);
  2941. }
  2942. :is(.doorHanger, .doorHangerRight)::before{
  2943. border-bottom-color:var(--doorhanger-border-color);
  2944. border-width:9px;
  2945. }
  2946. .doorHanger::before{
  2947. inset-inline-start:10px;
  2948. margin-inline-start:-9px;
  2949. }
  2950. .doorHangerRight::before{
  2951. inset-inline-end:10px;
  2952. margin-inline-end:-9px;
  2953. }
  2954. #findResultsCount{
  2955. background-color:rgb(217 217 217);
  2956. color:rgb(82 82 82);
  2957. text-align:center;
  2958. padding:4px 5px;
  2959. margin:5px;
  2960. }
  2961. #findMsg[data-status="notFound"]{
  2962. font-weight:bold;
  2963. }
  2964. :is(#findResultsCount, #findMsg):empty{
  2965. display:none;
  2966. }
  2967. #toolbarViewerMiddle{
  2968. position:absolute;
  2969. left:50%;
  2970. transform:translateX(-50%);
  2971. }
  2972. #toolbarViewerLeft,
  2973. #toolbarSidebarLeft{
  2974. float:var(--inline-start);
  2975. }
  2976. #toolbarViewerRight,
  2977. #toolbarSidebarRight{
  2978. float:var(--inline-end);
  2979. }
  2980. #toolbarViewerLeft > *,
  2981. #toolbarViewerMiddle > *,
  2982. #toolbarViewerRight > *,
  2983. #toolbarSidebarLeft *,
  2984. #toolbarSidebarRight *,
  2985. .findbar *{
  2986. position:relative;
  2987. float:var(--inline-start);
  2988. }
  2989. #toolbarViewerLeft{
  2990. padding-inline-start:1px;
  2991. }
  2992. #toolbarViewerRight{
  2993. padding-inline-end:1px;
  2994. }
  2995. #toolbarSidebarRight{
  2996. padding-inline-end:2px;
  2997. }
  2998. .splitToolbarButton{
  2999. margin:2px;
  3000. display:inline-block;
  3001. }
  3002. .splitToolbarButton > .toolbarButton{
  3003. float:var(--inline-start);
  3004. }
  3005. .toolbarButton,
  3006. .secondaryToolbarButton,
  3007. .dialogButton{
  3008. border:none;
  3009. background:none;
  3010. width:28px;
  3011. height:28px;
  3012. outline:none;
  3013. }
  3014. .dialogButton:is(:hover, :focus-visible){
  3015. background-color:var(--dialog-button-hover-bg-color);
  3016. }
  3017. .dialogButton:is(:hover, :focus-visible) > span{
  3018. color:var(--dialog-button-hover-color);
  3019. }
  3020. .toolbarButton > span{
  3021. display:inline-block;
  3022. width:0;
  3023. height:0;
  3024. overflow:hidden;
  3025. }
  3026. :is(.toolbarButton, .secondaryToolbarButton, .dialogButton)[disabled]{
  3027. opacity:0.5;
  3028. }
  3029. .splitToolbarButton > .toolbarButton:is(:hover, :focus-visible),
  3030. .dropdownToolbarButton:hover{
  3031. background-color:var(--button-hover-color);
  3032. }
  3033. .splitToolbarButton > .toolbarButton{
  3034. position:relative;
  3035. margin:0;
  3036. }
  3037. #toolbarSidebar .splitToolbarButton > .toolbarButton{
  3038. margin-inline-end:2px;
  3039. }
  3040. .splitToolbarButtonSeparator{
  3041. float:var(--inline-start);
  3042. margin:4px 0;
  3043. width:1px;
  3044. height:20px;
  3045. background-color:var(--separator-color);
  3046. }
  3047. .toolbarButton,
  3048. .dropdownToolbarButton,
  3049. .secondaryToolbarButton,
  3050. .dialogButton{
  3051. min-width:16px;
  3052. margin:2px 1px;
  3053. padding:2px 6px 0;
  3054. border:none;
  3055. border-radius:2px;
  3056. color:var(--main-color);
  3057. font-size:12px;
  3058. line-height:14px;
  3059. -webkit-user-select:none;
  3060. -moz-user-select:none;
  3061. user-select:none;
  3062. cursor:default;
  3063. box-sizing:border-box;
  3064. }
  3065. .toolbarButton:is(:hover, :focus-visible){
  3066. background-color:var(--button-hover-color);
  3067. }
  3068. .secondaryToolbarButton:is(:hover, :focus-visible){
  3069. background-color:var(--doorhanger-hover-bg-color);
  3070. color:var(--doorhanger-hover-color);
  3071. }
  3072. :is(.toolbarButton, .secondaryToolbarButton).toggled,
  3073. .splitToolbarButton.toggled > .toolbarButton.toggled{
  3074. background-color:var(--toggled-btn-bg-color);
  3075. color:var(--toggled-btn-color);
  3076. }
  3077. :is(.toolbarButton, .secondaryToolbarButton).toggled:hover,
  3078. .splitToolbarButton.toggled > .toolbarButton.toggled:hover{
  3079. outline:var(--toggled-hover-btn-outline) !important;
  3080. }
  3081. :is(.toolbarButton, .secondaryToolbarButton).toggled::before{
  3082. background-color:var(--toggled-btn-color);
  3083. }
  3084. :is(.toolbarButton, .secondaryToolbarButton).toggled:hover:active,
  3085. .splitToolbarButton.toggled > .toolbarButton.toggled:hover:active{
  3086. background-color:var(--toggled-hover-active-btn-color);
  3087. }
  3088. .dropdownToolbarButton{
  3089. display:flex;
  3090. width:-moz-fit-content;
  3091. width:fit-content;
  3092. min-width:140px;
  3093. padding:0;
  3094. background-color:var(--dropdown-btn-bg-color);
  3095. border:var(--dropdown-btn-border);
  3096. }
  3097. .dropdownToolbarButton::after{
  3098. top:6px;
  3099. inset-inline-end:6px;
  3100. pointer-events:none;
  3101. -webkit-mask-image:var(--toolbarButton-menuArrow-icon);
  3102. mask-image:var(--toolbarButton-menuArrow-icon);
  3103. }
  3104. .dropdownToolbarButton > select{
  3105. -webkit-appearance:none;
  3106. -moz-appearance:none;
  3107. appearance:none;
  3108. width:inherit;
  3109. min-width:inherit;
  3110. height:28px;
  3111. font-size:12px;
  3112. color:var(--main-color);
  3113. margin:0;
  3114. padding-block:1px 2px;
  3115. padding-inline:6px 38px;
  3116. border:none;
  3117. background-color:var(--dropdown-btn-bg-color);
  3118. }
  3119. .dropdownToolbarButton > select:is(:hover, :focus-visible){
  3120. background-color:var(--button-hover-color);
  3121. color:var(--toggled-btn-color);
  3122. }
  3123. .dropdownToolbarButton > select > option{
  3124. background:var(--doorhanger-bg-color);
  3125. color:var(--main-color);
  3126. }
  3127. .toolbarButtonSpacer{
  3128. width:30px;
  3129. display:inline-block;
  3130. height:1px;
  3131. }
  3132. :is(.toolbarButton, .secondaryToolbarButton, .treeItemToggler)::before,
  3133. .dropdownToolbarButton::after{
  3134. position:absolute;
  3135. display:inline-block;
  3136. width:16px;
  3137. height:16px;
  3138. content:"";
  3139. background-color:var(--toolbar-icon-bg-color);
  3140. -webkit-mask-size:cover;
  3141. mask-size:cover;
  3142. }
  3143. .dropdownToolbarButton:is(:hover, :focus-visible, :active)::after{
  3144. background-color:var(--toolbar-icon-hover-bg-color);
  3145. }
  3146. .toolbarButton::before{
  3147. opacity:var(--toolbar-icon-opacity);
  3148. top:6px;
  3149. left:6px;
  3150. }
  3151. .toolbarButton:is(:hover, :focus-visible)::before,
  3152. .secondaryToolbarButton:is(:hover, :focus-visible)::before{
  3153. background-color:var(--toolbar-icon-hover-bg-color);
  3154. }
  3155. .secondaryToolbarButton::before{
  3156. opacity:var(--doorhanger-icon-opacity);
  3157. top:5px;
  3158. inset-inline-start:12px;
  3159. }
  3160. #sidebarToggle::before{
  3161. -webkit-mask-image:var(--toolbarButton-sidebarToggle-icon);
  3162. mask-image:var(--toolbarButton-sidebarToggle-icon);
  3163. transform:scaleX(var(--dir-factor));
  3164. }
  3165. #secondaryToolbarToggle::before{
  3166. -webkit-mask-image:var(--toolbarButton-secondaryToolbarToggle-icon);
  3167. mask-image:var(--toolbarButton-secondaryToolbarToggle-icon);
  3168. transform:scaleX(var(--dir-factor));
  3169. }
  3170. #findPrevious::before{
  3171. -webkit-mask-image:var(--findbarButton-previous-icon);
  3172. mask-image:var(--findbarButton-previous-icon);
  3173. }
  3174. #findNext::before{
  3175. -webkit-mask-image:var(--findbarButton-next-icon);
  3176. mask-image:var(--findbarButton-next-icon);
  3177. }
  3178. #previous::before{
  3179. -webkit-mask-image:var(--toolbarButton-pageUp-icon);
  3180. mask-image:var(--toolbarButton-pageUp-icon);
  3181. }
  3182. #next::before{
  3183. -webkit-mask-image:var(--toolbarButton-pageDown-icon);
  3184. mask-image:var(--toolbarButton-pageDown-icon);
  3185. }
  3186. #zoomOut::before{
  3187. -webkit-mask-image:var(--toolbarButton-zoomOut-icon);
  3188. mask-image:var(--toolbarButton-zoomOut-icon);
  3189. }
  3190. #zoomIn::before{
  3191. -webkit-mask-image:var(--toolbarButton-zoomIn-icon);
  3192. mask-image:var(--toolbarButton-zoomIn-icon);
  3193. }
  3194. #presentationMode::before{
  3195. -webkit-mask-image:var(--toolbarButton-presentationMode-icon);
  3196. mask-image:var(--toolbarButton-presentationMode-icon);
  3197. }
  3198. #editorFreeText::before{
  3199. -webkit-mask-image:var(--toolbarButton-editorFreeText-icon);
  3200. mask-image:var(--toolbarButton-editorFreeText-icon);
  3201. }
  3202. #editorHighlight::before{
  3203. -webkit-mask-image:var(--toolbarButton-editorHighlight-icon);
  3204. mask-image:var(--toolbarButton-editorHighlight-icon);
  3205. }
  3206. #editorInk::before{
  3207. -webkit-mask-image:var(--toolbarButton-editorInk-icon);
  3208. mask-image:var(--toolbarButton-editorInk-icon);
  3209. }
  3210. #editorStamp::before{
  3211. -webkit-mask-image:var(--toolbarButton-editorStamp-icon);
  3212. mask-image:var(--toolbarButton-editorStamp-icon);
  3213. }
  3214. :is(#print, #secondaryPrint)::before{
  3215. -webkit-mask-image:var(--toolbarButton-print-icon);
  3216. mask-image:var(--toolbarButton-print-icon);
  3217. }
  3218. #secondaryOpenFile::before{
  3219. -webkit-mask-image:var(--toolbarButton-openFile-icon);
  3220. mask-image:var(--toolbarButton-openFile-icon);
  3221. }
  3222. :is(#download, #secondaryDownload)::before{
  3223. -webkit-mask-image:var(--toolbarButton-download-icon);
  3224. mask-image:var(--toolbarButton-download-icon);
  3225. }
  3226. a.secondaryToolbarButton{
  3227. padding-top:5px;
  3228. text-decoration:none;
  3229. }
  3230. a:is(.toolbarButton, .secondaryToolbarButton)[href="#"]{
  3231. opacity:0.5;
  3232. pointer-events:none;
  3233. }
  3234. #viewBookmark::before{
  3235. -webkit-mask-image:var(--toolbarButton-bookmark-icon);
  3236. mask-image:var(--toolbarButton-bookmark-icon);
  3237. }
  3238. #viewThumbnail::before{
  3239. -webkit-mask-image:var(--toolbarButton-viewThumbnail-icon);
  3240. mask-image:var(--toolbarButton-viewThumbnail-icon);
  3241. }
  3242. #viewOutline::before{
  3243. -webkit-mask-image:var(--toolbarButton-viewOutline-icon);
  3244. mask-image:var(--toolbarButton-viewOutline-icon);
  3245. transform:scaleX(var(--dir-factor));
  3246. }
  3247. #viewAttachments::before{
  3248. -webkit-mask-image:var(--toolbarButton-viewAttachments-icon);
  3249. mask-image:var(--toolbarButton-viewAttachments-icon);
  3250. }
  3251. #viewLayers::before{
  3252. -webkit-mask-image:var(--toolbarButton-viewLayers-icon);
  3253. mask-image:var(--toolbarButton-viewLayers-icon);
  3254. }
  3255. #currentOutlineItem::before{
  3256. -webkit-mask-image:var(--toolbarButton-currentOutlineItem-icon);
  3257. mask-image:var(--toolbarButton-currentOutlineItem-icon);
  3258. transform:scaleX(var(--dir-factor));
  3259. }
  3260. #viewFind::before{
  3261. -webkit-mask-image:var(--toolbarButton-search-icon);
  3262. mask-image:var(--toolbarButton-search-icon);
  3263. }
  3264. .pdfSidebarNotification::after{
  3265. position:absolute;
  3266. display:inline-block;
  3267. top:2px;
  3268. inset-inline-end:2px;
  3269. content:"";
  3270. background-color:rgb(112 219 85);
  3271. height:9px;
  3272. width:9px;
  3273. border-radius:50%;
  3274. }
  3275. .secondaryToolbarButton{
  3276. position:relative;
  3277. margin:0;
  3278. padding:0 0 1px;
  3279. padding-inline-start:36px;
  3280. height:auto;
  3281. min-height:26px;
  3282. width:auto;
  3283. min-width:100%;
  3284. text-align:start;
  3285. white-space:normal;
  3286. border-radius:0;
  3287. box-sizing:border-box;
  3288. display:inline-block;
  3289. }
  3290. .secondaryToolbarButton > span{
  3291. padding-inline-end:4px;
  3292. }
  3293. #firstPage::before{
  3294. -webkit-mask-image:var(--secondaryToolbarButton-firstPage-icon);
  3295. mask-image:var(--secondaryToolbarButton-firstPage-icon);
  3296. }
  3297. #lastPage::before{
  3298. -webkit-mask-image:var(--secondaryToolbarButton-lastPage-icon);
  3299. mask-image:var(--secondaryToolbarButton-lastPage-icon);
  3300. }
  3301. #pageRotateCcw::before{
  3302. -webkit-mask-image:var(--secondaryToolbarButton-rotateCcw-icon);
  3303. mask-image:var(--secondaryToolbarButton-rotateCcw-icon);
  3304. }
  3305. #pageRotateCw::before{
  3306. -webkit-mask-image:var(--secondaryToolbarButton-rotateCw-icon);
  3307. mask-image:var(--secondaryToolbarButton-rotateCw-icon);
  3308. }
  3309. #cursorSelectTool::before{
  3310. -webkit-mask-image:var(--secondaryToolbarButton-selectTool-icon);
  3311. mask-image:var(--secondaryToolbarButton-selectTool-icon);
  3312. }
  3313. #cursorHandTool::before{
  3314. -webkit-mask-image:var(--secondaryToolbarButton-handTool-icon);
  3315. mask-image:var(--secondaryToolbarButton-handTool-icon);
  3316. }
  3317. #scrollPage::before{
  3318. -webkit-mask-image:var(--secondaryToolbarButton-scrollPage-icon);
  3319. mask-image:var(--secondaryToolbarButton-scrollPage-icon);
  3320. }
  3321. #scrollVertical::before{
  3322. -webkit-mask-image:var(--secondaryToolbarButton-scrollVertical-icon);
  3323. mask-image:var(--secondaryToolbarButton-scrollVertical-icon);
  3324. }
  3325. #scrollHorizontal::before{
  3326. -webkit-mask-image:var(--secondaryToolbarButton-scrollHorizontal-icon);
  3327. mask-image:var(--secondaryToolbarButton-scrollHorizontal-icon);
  3328. }
  3329. #scrollWrapped::before{
  3330. -webkit-mask-image:var(--secondaryToolbarButton-scrollWrapped-icon);
  3331. mask-image:var(--secondaryToolbarButton-scrollWrapped-icon);
  3332. }
  3333. #spreadNone::before{
  3334. -webkit-mask-image:var(--secondaryToolbarButton-spreadNone-icon);
  3335. mask-image:var(--secondaryToolbarButton-spreadNone-icon);
  3336. }
  3337. #spreadOdd::before{
  3338. -webkit-mask-image:var(--secondaryToolbarButton-spreadOdd-icon);
  3339. mask-image:var(--secondaryToolbarButton-spreadOdd-icon);
  3340. }
  3341. #spreadEven::before{
  3342. -webkit-mask-image:var(--secondaryToolbarButton-spreadEven-icon);
  3343. mask-image:var(--secondaryToolbarButton-spreadEven-icon);
  3344. }
  3345. #documentProperties::before{
  3346. -webkit-mask-image:var(--secondaryToolbarButton-documentProperties-icon);
  3347. mask-image:var(--secondaryToolbarButton-documentProperties-icon);
  3348. }
  3349. .verticalToolbarSeparator{
  3350. display:block;
  3351. margin:5px 2px;
  3352. width:1px;
  3353. height:22px;
  3354. background-color:var(--separator-color);
  3355. }
  3356. .horizontalToolbarSeparator{
  3357. display:block;
  3358. margin:6px 0;
  3359. height:1px;
  3360. width:100%;
  3361. background-color:var(--doorhanger-separator-color);
  3362. }
  3363. .toolbarField{
  3364. padding:4px 7px;
  3365. margin:3px 0;
  3366. border-radius:2px;
  3367. background-color:var(--field-bg-color);
  3368. background-clip:padding-box;
  3369. border:1px solid var(--field-border-color);
  3370. box-shadow:none;
  3371. color:var(--field-color);
  3372. font-size:12px;
  3373. line-height:16px;
  3374. outline:none;
  3375. }
  3376. .toolbarField[type="checkbox"]{
  3377. opacity:0;
  3378. position:absolute !important;
  3379. left:0;
  3380. margin:10px 0 3px;
  3381. margin-inline-start:7px;
  3382. }
  3383. #pageNumber{
  3384. -moz-appearance:textfield;
  3385. text-align:end;
  3386. width:40px;
  3387. background-size:0 0;
  3388. transition-property:none;
  3389. }
  3390. #pageNumber::-webkit-inner-spin-button{
  3391. -webkit-appearance:none;
  3392. }
  3393. .loadingInput:has(> #pageNumber.loading)::after{
  3394. display:block;
  3395. visibility:visible;
  3396. transition-property:visibility;
  3397. transition-delay:var(--loading-icon-delay);
  3398. }
  3399. .loadingInput::after{
  3400. position:absolute;
  3401. visibility:hidden;
  3402. display:none;
  3403. top:calc(50% - 8px);
  3404. width:16px;
  3405. height:16px;
  3406. content:"";
  3407. background-color:var(--toolbar-icon-bg-color);
  3408. -webkit-mask-size:cover;
  3409. mask-size:cover;
  3410. -webkit-mask-image:var(--loading-icon);
  3411. mask-image:var(--loading-icon);
  3412. }
  3413. .loadingInput.start::after{
  3414. inset-inline-start:4px;
  3415. }
  3416. .loadingInput.end::after{
  3417. inset-inline-end:4px;
  3418. }
  3419. .toolbarField:focus{
  3420. border-color:#0a84ff;
  3421. }
  3422. .toolbarLabel{
  3423. min-width:16px;
  3424. padding:7px;
  3425. margin:2px;
  3426. border-radius:2px;
  3427. color:var(--main-color);
  3428. font-size:12px;
  3429. line-height:14px;
  3430. text-align:left;
  3431. -webkit-user-select:none;
  3432. -moz-user-select:none;
  3433. user-select:none;
  3434. cursor:default;
  3435. }
  3436. #numPages.toolbarLabel{
  3437. padding-inline-start:3px;
  3438. }
  3439. #thumbnailView,
  3440. #outlineView,
  3441. #attachmentsView,
  3442. #layersView{
  3443. position:absolute;
  3444. width:calc(100% - 8px);
  3445. inset-block:0;
  3446. padding:4px 4px 0;
  3447. overflow:auto;
  3448. -webkit-user-select:none;
  3449. -moz-user-select:none;
  3450. user-select:none;
  3451. }
  3452. #thumbnailView{
  3453. width:calc(100% - 60px);
  3454. padding:10px 30px 0;
  3455. }
  3456. #thumbnailView > a:is(:active, :focus){
  3457. outline:0;
  3458. }
  3459. .thumbnail{
  3460. --thumbnail-width:0;
  3461. --thumbnail-height:0;
  3462. float:var(--inline-start);
  3463. width:var(--thumbnail-width);
  3464. height:var(--thumbnail-height);
  3465. margin:0 10px 5px;
  3466. padding:1px;
  3467. border:7px solid transparent;
  3468. border-radius:2px;
  3469. }
  3470. #thumbnailView > a:last-of-type > .thumbnail{
  3471. margin-bottom:10px;
  3472. }
  3473. a:focus > .thumbnail,
  3474. .thumbnail:hover{
  3475. border-color:var(--thumbnail-hover-color);
  3476. }
  3477. .thumbnail.selected{
  3478. border-color:var(--thumbnail-selected-color) !important;
  3479. }
  3480. .thumbnailImage{
  3481. width:var(--thumbnail-width);
  3482. height:var(--thumbnail-height);
  3483. opacity:0.9;
  3484. }
  3485. a:focus > .thumbnail > .thumbnailImage,
  3486. .thumbnail:hover > .thumbnailImage{
  3487. opacity:0.95;
  3488. }
  3489. .thumbnail.selected > .thumbnailImage{
  3490. opacity:1 !important;
  3491. }
  3492. .thumbnail:not([data-loaded]) > .thumbnailImage{
  3493. width:calc(var(--thumbnail-width) - 2px);
  3494. height:calc(var(--thumbnail-height) - 2px);
  3495. border:1px dashed rgb(132 132 132);
  3496. }
  3497. .treeWithDeepNesting > .treeItem,
  3498. .treeItem > .treeItems{
  3499. margin-inline-start:20px;
  3500. }
  3501. .treeItem > a{
  3502. text-decoration:none;
  3503. display:inline-block;
  3504. min-width:calc(100% - 4px);
  3505. height:auto;
  3506. margin-bottom:1px;
  3507. padding:2px 0 5px;
  3508. padding-inline-start:4px;
  3509. border-radius:2px;
  3510. color:var(--treeitem-color);
  3511. font-size:13px;
  3512. line-height:15px;
  3513. -webkit-user-select:none;
  3514. -moz-user-select:none;
  3515. user-select:none;
  3516. white-space:normal;
  3517. cursor:pointer;
  3518. }
  3519. #layersView .treeItem > a *{
  3520. cursor:pointer;
  3521. }
  3522. #layersView .treeItem > a > label{
  3523. padding-inline-start:4px;
  3524. }
  3525. #layersView .treeItem > a > label > input{
  3526. float:var(--inline-start);
  3527. margin-top:1px;
  3528. }
  3529. .treeItemToggler{
  3530. position:relative;
  3531. float:var(--inline-start);
  3532. height:0;
  3533. width:0;
  3534. color:rgb(255 255 255 / 0.5);
  3535. }
  3536. .treeItemToggler::before{
  3537. inset-inline-end:4px;
  3538. -webkit-mask-image:var(--treeitem-expanded-icon);
  3539. mask-image:var(--treeitem-expanded-icon);
  3540. }
  3541. .treeItemToggler.treeItemsHidden::before{
  3542. -webkit-mask-image:var(--treeitem-collapsed-icon);
  3543. mask-image:var(--treeitem-collapsed-icon);
  3544. transform:scaleX(var(--dir-factor));
  3545. }
  3546. .treeItemToggler.treeItemsHidden ~ .treeItems{
  3547. display:none;
  3548. }
  3549. .treeItem.selected > a{
  3550. background-color:var(--treeitem-selected-bg-color);
  3551. color:var(--treeitem-selected-color);
  3552. }
  3553. .treeItemToggler:hover,
  3554. .treeItemToggler:hover + a,
  3555. .treeItemToggler:hover ~ .treeItems,
  3556. .treeItem > a:hover{
  3557. background-color:var(--treeitem-bg-color);
  3558. background-clip:padding-box;
  3559. border-radius:2px;
  3560. color:var(--treeitem-hover-color);
  3561. }
  3562. #outlineOptionsContainer{
  3563. display:none;
  3564. }
  3565. #sidebarContainer:has(#outlineView:not(.hidden)) #outlineOptionsContainer{
  3566. display:inherit;
  3567. }
  3568. .dialogButton{
  3569. width:auto;
  3570. margin:3px 4px 2px !important;
  3571. padding:2px 11px;
  3572. color:var(--main-color);
  3573. background-color:var(--dialog-button-bg-color);
  3574. border:var(--dialog-button-border) !important;
  3575. }
  3576. dialog{
  3577. margin:auto;
  3578. padding:15px;
  3579. border-spacing:4px;
  3580. color:var(--main-color);
  3581. font:message-box;
  3582. font-size:12px;
  3583. line-height:14px;
  3584. background-color:var(--doorhanger-bg-color);
  3585. border:1px solid rgb(0 0 0 / 0.5);
  3586. border-radius:4px;
  3587. box-shadow:0 1px 4px rgb(0 0 0 / 0.3);
  3588. }
  3589. dialog::backdrop{
  3590. background-color:rgb(0 0 0 / 0.2);
  3591. }
  3592. dialog > .row{
  3593. display:table-row;
  3594. }
  3595. dialog > .row > *{
  3596. display:table-cell;
  3597. }
  3598. dialog .toolbarField{
  3599. margin:5px 0;
  3600. }
  3601. dialog .separator{
  3602. display:block;
  3603. margin:4px 0;
  3604. height:1px;
  3605. width:100%;
  3606. background-color:var(--separator-color);
  3607. }
  3608. dialog .buttonRow{
  3609. text-align:center;
  3610. vertical-align:middle;
  3611. }
  3612. dialog :link{
  3613. color:rgb(255 255 255);
  3614. }
  3615. #passwordDialog{
  3616. text-align:center;
  3617. }
  3618. #passwordDialog .toolbarField{
  3619. width:200px;
  3620. }
  3621. #documentPropertiesDialog{
  3622. text-align:left;
  3623. }
  3624. #documentPropertiesDialog .row > *{
  3625. min-width:100px;
  3626. text-align:start;
  3627. }
  3628. #documentPropertiesDialog .row > span{
  3629. width:125px;
  3630. word-wrap:break-word;
  3631. }
  3632. #documentPropertiesDialog .row > p{
  3633. max-width:225px;
  3634. word-wrap:break-word;
  3635. }
  3636. #documentPropertiesDialog .buttonRow{
  3637. margin-top:10px;
  3638. }
  3639. .grab-to-pan-grab{
  3640. cursor:grab !important;
  3641. }
  3642. .grab-to-pan-grab
  3643. *:not(input):not(textarea):not(button):not(select):not(:link){
  3644. cursor:inherit !important;
  3645. }
  3646. .grab-to-pan-grab:active,
  3647. .grab-to-pan-grabbing{
  3648. cursor:grabbing !important;
  3649. }
  3650. .grab-to-pan-grabbing{
  3651. position:fixed;
  3652. background:rgb(0 0 0 / 0);
  3653. display:block;
  3654. inset:0;
  3655. overflow:hidden;
  3656. z-index:50000;
  3657. }
  3658. @page{
  3659. margin:0;
  3660. }
  3661. #printContainer{
  3662. display:none;
  3663. }
  3664. @media print{
  3665. body{
  3666. background:rgb(0 0 0 / 0) none;
  3667. }
  3668. body[data-pdfjsprinting] #outerContainer{
  3669. display:none;
  3670. }
  3671. body[data-pdfjsprinting] #printContainer{
  3672. display:block;
  3673. }
  3674. #printContainer{
  3675. height:100%;
  3676. }
  3677. #printContainer > .printedPage{
  3678. page-break-after:always;
  3679. page-break-inside:avoid;
  3680. height:100%;
  3681. width:100%;
  3682. display:flex;
  3683. flex-direction:column;
  3684. justify-content:center;
  3685. align-items:center;
  3686. }
  3687. #printContainer > .xfaPrintedPage .xfaPage{
  3688. position:absolute;
  3689. }
  3690. #printContainer > .xfaPrintedPage{
  3691. page-break-after:always;
  3692. page-break-inside:avoid;
  3693. width:100%;
  3694. height:100%;
  3695. position:relative;
  3696. }
  3697. #printContainer > .printedPage :is(canvas, img){
  3698. max-width:100%;
  3699. max-height:100%;
  3700. direction:ltr;
  3701. display:block;
  3702. }
  3703. }
  3704. .visibleMediumView{
  3705. display:none;
  3706. }
  3707. @media all and (max-width: 900px){
  3708. #toolbarViewerMiddle{
  3709. display:table;
  3710. margin:auto;
  3711. left:auto;
  3712. position:inherit;
  3713. transform:none;
  3714. }
  3715. }
  3716. @media all and (max-width: 840px){
  3717. #sidebarContainer{
  3718. background-color:var(--sidebar-narrow-bg-color);
  3719. }
  3720. #outerContainer.sidebarOpen #viewerContainer{
  3721. inset-inline-start:0 !important;
  3722. }
  3723. }
  3724. @media all and (max-width: 750px){
  3725. :root{
  3726. --editor-toolbar-base-offset:40px;
  3727. }
  3728. #outerContainer .hiddenMediumView{
  3729. display:none;
  3730. }
  3731. #outerContainer .visibleMediumView{
  3732. display:inherit;
  3733. }
  3734. }
  3735. @media all and (max-width: 690px){
  3736. .hiddenSmallView,
  3737. .hiddenSmallView *{
  3738. display:none;
  3739. }
  3740. .toolbarButtonSpacer{
  3741. width:0;
  3742. }
  3743. .findbar{
  3744. inset-inline-start:34px;
  3745. }
  3746. }
  3747. @media all and (max-width: 560px){
  3748. #scaleSelectContainer{
  3749. display:none;
  3750. }
  3751. }