viewer.css 68 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022
  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. .textLayer {
  16. position: absolute;
  17. text-align: initial;
  18. left: 0;
  19. top: 0;
  20. right: 0;
  21. bottom: 0;
  22. overflow: hidden;
  23. opacity: 0.25;
  24. line-height: 1;
  25. -webkit-text-size-adjust: none;
  26. -moz-text-size-adjust: none;
  27. text-size-adjust: none;
  28. forced-color-adjust: none;
  29. }
  30. .textLayer span,
  31. .textLayer br {
  32. color: transparent;
  33. position: absolute;
  34. white-space: pre;
  35. cursor: text;
  36. transform-origin: 0% 0%;
  37. }
  38. /* Only necessary in Google Chrome, see issue 14205, and most unfortunately
  39. * the problem doesn't show up in "text" reference tests. */
  40. .textLayer span.markedContent {
  41. top: 0;
  42. height: 0;
  43. }
  44. .textLayer .highlight {
  45. margin: -1px;
  46. padding: 1px;
  47. background-color: rgba(180, 0, 170, 1);
  48. border-radius: 4px;
  49. }
  50. .textLayer .highlight.appended {
  51. position: initial;
  52. }
  53. .textLayer .highlight.begin {
  54. border-radius: 4px 0 0 4px;
  55. }
  56. .textLayer .highlight.end {
  57. border-radius: 0 4px 4px 0;
  58. }
  59. .textLayer .highlight.middle {
  60. border-radius: 0;
  61. }
  62. .textLayer .highlight.selected {
  63. background-color: rgba(0, 100, 0, 1);
  64. }
  65. .textLayer ::-moz-selection {
  66. background: blue;
  67. background: AccentColor;
  68. }
  69. .textLayer ::selection {
  70. background: blue;
  71. background: AccentColor;
  72. }
  73. /* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */
  74. .textLayer br::-moz-selection {
  75. background: transparent;
  76. }
  77. .textLayer br::selection {
  78. background: transparent;
  79. }
  80. .textLayer .endOfContent {
  81. display: block;
  82. position: absolute;
  83. left: 0;
  84. top: 100%;
  85. right: 0;
  86. bottom: 0;
  87. z-index: -1;
  88. cursor: default;
  89. -webkit-user-select: none;
  90. -moz-user-select: none;
  91. user-select: none;
  92. }
  93. .textLayer .endOfContent.active {
  94. top: 0;
  95. }
  96. :root {
  97. --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>");
  98. --input-focus-border-color: Highlight;
  99. --input-focus-outline: 1px solid Canvas;
  100. --input-unfocused-border-color: transparent;
  101. --input-disabled-border-color: transparent;
  102. --input-hover-border-color: black;
  103. }
  104. @media (forced-colors: active) {
  105. :root {
  106. --input-focus-border-color: CanvasText;
  107. --input-unfocused-border-color: ActiveText;
  108. --input-disabled-border-color: GrayText;
  109. --input-hover-border-color: Highlight;
  110. }
  111. .annotationLayer .textWidgetAnnotation input:required,
  112. .annotationLayer .textWidgetAnnotation textarea:required,
  113. .annotationLayer .choiceWidgetAnnotation select:required,
  114. .annotationLayer .buttonWidgetAnnotation.checkBox input:required,
  115. .annotationLayer .buttonWidgetAnnotation.radioButton input:required {
  116. outline: 1.5px solid selectedItem;
  117. }
  118. }
  119. .annotationLayer {
  120. position: absolute;
  121. top: 0;
  122. left: 0;
  123. pointer-events: none;
  124. transform-origin: 0 0;
  125. }
  126. .annotationLayer section {
  127. position: absolute;
  128. text-align: initial;
  129. pointer-events: auto;
  130. box-sizing: border-box;
  131. transform-origin: 0 0;
  132. }
  133. .annotationLayer .linkAnnotation > a,
  134. .annotationLayer .buttonWidgetAnnotation.pushButton > a {
  135. position: absolute;
  136. font-size: 1em;
  137. top: 0;
  138. left: 0;
  139. width: 100%;
  140. height: 100%;
  141. }
  142. .annotationLayer .buttonWidgetAnnotation.pushButton > canvas {
  143. width: 100%;
  144. height: 100%;
  145. }
  146. .annotationLayer .linkAnnotation > a:hover,
  147. .annotationLayer .buttonWidgetAnnotation.pushButton > a:hover {
  148. opacity: 0.2;
  149. background: rgba(255, 255, 0, 1);
  150. box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
  151. }
  152. .annotationLayer .textAnnotation img {
  153. position: absolute;
  154. cursor: pointer;
  155. width: 100%;
  156. height: 100%;
  157. }
  158. .annotationLayer .textWidgetAnnotation input,
  159. .annotationLayer .textWidgetAnnotation textarea,
  160. .annotationLayer .choiceWidgetAnnotation select,
  161. .annotationLayer .buttonWidgetAnnotation.checkBox input,
  162. .annotationLayer .buttonWidgetAnnotation.radioButton input {
  163. background-image: var(--annotation-unfocused-field-background);
  164. border: 2px solid var(--input-unfocused-border-color);
  165. box-sizing: border-box;
  166. font: calc(9px * var(--scale-factor)) sans-serif;
  167. height: 100%;
  168. margin: 0;
  169. vertical-align: top;
  170. width: 100%;
  171. }
  172. .annotationLayer .textWidgetAnnotation input:required,
  173. .annotationLayer .textWidgetAnnotation textarea:required,
  174. .annotationLayer .choiceWidgetAnnotation select:required,
  175. .annotationLayer .buttonWidgetAnnotation.checkBox input:required,
  176. .annotationLayer .buttonWidgetAnnotation.radioButton input:required {
  177. outline: 1.5px solid red;
  178. }
  179. .annotationLayer .choiceWidgetAnnotation select option {
  180. padding: 0;
  181. }
  182. .annotationLayer .buttonWidgetAnnotation.radioButton input {
  183. border-radius: 50%;
  184. }
  185. .annotationLayer .textWidgetAnnotation textarea {
  186. resize: none;
  187. }
  188. .annotationLayer .textWidgetAnnotation input[disabled],
  189. .annotationLayer .textWidgetAnnotation textarea[disabled],
  190. .annotationLayer .choiceWidgetAnnotation select[disabled],
  191. .annotationLayer .buttonWidgetAnnotation.checkBox input[disabled],
  192. .annotationLayer .buttonWidgetAnnotation.radioButton input[disabled] {
  193. background: none;
  194. border: 2px solid var(--input-disabled-border-color);
  195. cursor: not-allowed;
  196. }
  197. .annotationLayer .textWidgetAnnotation input:hover,
  198. .annotationLayer .textWidgetAnnotation textarea:hover,
  199. .annotationLayer .choiceWidgetAnnotation select:hover,
  200. .annotationLayer .buttonWidgetAnnotation.checkBox input:hover,
  201. .annotationLayer .buttonWidgetAnnotation.radioButton input:hover {
  202. border: 2px solid var(--input-hover-border-color);
  203. }
  204. .annotationLayer .textWidgetAnnotation input:hover,
  205. .annotationLayer .textWidgetAnnotation textarea:hover,
  206. .annotationLayer .choiceWidgetAnnotation select:hover,
  207. .annotationLayer .buttonWidgetAnnotation.checkBox input:hover {
  208. border-radius: 2px;
  209. }
  210. .annotationLayer .textWidgetAnnotation input:focus,
  211. .annotationLayer .textWidgetAnnotation textarea:focus,
  212. .annotationLayer .choiceWidgetAnnotation select:focus {
  213. background: none;
  214. border: 2px solid var(--input-focus-border-color);
  215. border-radius: 2px;
  216. outline: var(--input-focus-outline);
  217. }
  218. .annotationLayer .buttonWidgetAnnotation.checkBox :focus,
  219. .annotationLayer .buttonWidgetAnnotation.radioButton :focus {
  220. background-image: none;
  221. background-color: transparent;
  222. }
  223. .annotationLayer .buttonWidgetAnnotation.checkBox :focus {
  224. border: 2px solid var(--input-focus-border-color);
  225. border-radius: 2px;
  226. outline: var(--input-focus-outline);
  227. }
  228. .annotationLayer .buttonWidgetAnnotation.radioButton :focus {
  229. border: 2px solid var(--input-focus-border-color);
  230. outline: var(--input-focus-outline);
  231. }
  232. .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,
  233. .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after,
  234. .annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before {
  235. background-color: CanvasText;
  236. content: "";
  237. display: block;
  238. position: absolute;
  239. }
  240. .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,
  241. .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after {
  242. height: 80%;
  243. left: 45%;
  244. width: 1px;
  245. }
  246. .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before {
  247. transform: rotate(45deg);
  248. }
  249. .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after {
  250. transform: rotate(-45deg);
  251. }
  252. .annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before {
  253. border-radius: 50%;
  254. height: 50%;
  255. left: 30%;
  256. top: 20%;
  257. width: 50%;
  258. }
  259. .annotationLayer .textWidgetAnnotation input.comb {
  260. font-family: monospace;
  261. padding-left: 2px;
  262. padding-right: 0;
  263. }
  264. .annotationLayer .textWidgetAnnotation input.comb:focus {
  265. /*
  266. * Letter spacing is placed on the right side of each character. Hence, the
  267. * letter spacing of the last character may be placed outside the visible
  268. * area, causing horizontal scrolling. We avoid this by extending the width
  269. * when the element has focus and revert this when it loses focus.
  270. */
  271. width: 103%;
  272. }
  273. .annotationLayer .buttonWidgetAnnotation.checkBox input,
  274. .annotationLayer .buttonWidgetAnnotation.radioButton input {
  275. -webkit-appearance: none;
  276. -moz-appearance: none;
  277. appearance: none;
  278. }
  279. .annotationLayer .popupTriggerArea {
  280. height: 100%;
  281. width: 100%;
  282. }
  283. .annotationLayer .popupWrapper {
  284. position: absolute;
  285. font-size: calc(9px * var(--scale-factor));
  286. width: 100%;
  287. min-width: calc(180px * var(--scale-factor));
  288. pointer-events: none;
  289. }
  290. .annotationLayer .popup {
  291. position: absolute;
  292. max-width: calc(180px * var(--scale-factor));
  293. background-color: rgba(255, 255, 153, 1);
  294. box-shadow: 0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor))
  295. rgba(136, 136, 136, 1);
  296. border-radius: calc(2px * var(--scale-factor));
  297. padding: calc(6px * var(--scale-factor));
  298. margin-left: calc(5px * var(--scale-factor));
  299. cursor: pointer;
  300. font: message-box;
  301. white-space: normal;
  302. word-wrap: break-word;
  303. pointer-events: auto;
  304. }
  305. .annotationLayer .popup > * {
  306. font-size: calc(9px * var(--scale-factor));
  307. }
  308. .annotationLayer .popup h1 {
  309. display: inline-block;
  310. }
  311. .annotationLayer .popupDate {
  312. display: inline-block;
  313. margin-left: calc(5px * var(--scale-factor));
  314. }
  315. .annotationLayer .popupContent {
  316. border-top: 1px solid rgba(51, 51, 51, 1);
  317. margin-top: calc(2px * var(--scale-factor));
  318. padding-top: calc(2px * var(--scale-factor));
  319. }
  320. .annotationLayer .richText > * {
  321. white-space: pre-wrap;
  322. font-size: calc(9px * var(--scale-factor));
  323. }
  324. .annotationLayer .highlightAnnotation,
  325. .annotationLayer .underlineAnnotation,
  326. .annotationLayer .squigglyAnnotation,
  327. .annotationLayer .strikeoutAnnotation,
  328. .annotationLayer .freeTextAnnotation,
  329. .annotationLayer .lineAnnotation svg line,
  330. .annotationLayer .squareAnnotation svg rect,
  331. .annotationLayer .circleAnnotation svg ellipse,
  332. .annotationLayer .polylineAnnotation svg polyline,
  333. .annotationLayer .polygonAnnotation svg polygon,
  334. .annotationLayer .caretAnnotation,
  335. .annotationLayer .inkAnnotation svg polyline,
  336. .annotationLayer .stampAnnotation,
  337. .annotationLayer .fileAttachmentAnnotation {
  338. cursor: pointer;
  339. }
  340. .annotationLayer section svg {
  341. position: absolute;
  342. width: 100%;
  343. height: 100%;
  344. }
  345. .annotationLayer .annotationTextContent {
  346. position: absolute;
  347. width: 100%;
  348. height: 100%;
  349. opacity: 0;
  350. color: transparent;
  351. -webkit-user-select: none;
  352. -moz-user-select: none;
  353. user-select: none;
  354. pointer-events: none;
  355. }
  356. .annotationLayer .annotationTextContent span {
  357. width: 100%;
  358. display: inline-block;
  359. }
  360. :root {
  361. --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>");
  362. --xfa-focus-outline: auto;
  363. }
  364. @media (forced-colors: active) {
  365. :root {
  366. --xfa-focus-outline: 2px solid CanvasText;
  367. }
  368. .xfaLayer *:required {
  369. outline: 1.5px solid selectedItem;
  370. }
  371. }
  372. .xfaLayer {
  373. background-color: transparent;
  374. }
  375. .xfaLayer .highlight {
  376. margin: -1px;
  377. padding: 1px;
  378. background-color: rgba(239, 203, 237, 1);
  379. border-radius: 4px;
  380. }
  381. .xfaLayer .highlight.appended {
  382. position: initial;
  383. }
  384. .xfaLayer .highlight.begin {
  385. border-radius: 4px 0 0 4px;
  386. }
  387. .xfaLayer .highlight.end {
  388. border-radius: 0 4px 4px 0;
  389. }
  390. .xfaLayer .highlight.middle {
  391. border-radius: 0;
  392. }
  393. .xfaLayer .highlight.selected {
  394. background-color: rgba(203, 223, 203, 1);
  395. }
  396. .xfaPage {
  397. overflow: hidden;
  398. position: relative;
  399. }
  400. .xfaContentarea {
  401. position: absolute;
  402. }
  403. .xfaPrintOnly {
  404. display: none;
  405. }
  406. .xfaLayer {
  407. position: absolute;
  408. text-align: initial;
  409. top: 0;
  410. left: 0;
  411. transform-origin: 0 0;
  412. line-height: 1.2;
  413. }
  414. .xfaLayer * {
  415. color: inherit;
  416. font: inherit;
  417. font-style: inherit;
  418. font-weight: inherit;
  419. font-kerning: inherit;
  420. letter-spacing: -0.01px;
  421. text-align: inherit;
  422. text-decoration: inherit;
  423. box-sizing: border-box;
  424. background-color: transparent;
  425. padding: 0;
  426. margin: 0;
  427. pointer-events: auto;
  428. line-height: inherit;
  429. }
  430. .xfaLayer *:required {
  431. outline: 1.5px solid red;
  432. }
  433. .xfaLayer div {
  434. pointer-events: none;
  435. }
  436. .xfaLayer svg {
  437. pointer-events: none;
  438. }
  439. .xfaLayer svg * {
  440. pointer-events: none;
  441. }
  442. .xfaLayer a {
  443. color: blue;
  444. }
  445. .xfaRich li {
  446. margin-left: 3em;
  447. }
  448. .xfaFont {
  449. color: black;
  450. font-weight: normal;
  451. font-kerning: none;
  452. font-size: 10px;
  453. font-style: normal;
  454. letter-spacing: 0;
  455. text-decoration: none;
  456. vertical-align: 0;
  457. }
  458. .xfaCaption {
  459. overflow: hidden;
  460. flex: 0 0 auto;
  461. }
  462. .xfaCaptionForCheckButton {
  463. overflow: hidden;
  464. flex: 1 1 auto;
  465. }
  466. .xfaLabel {
  467. height: 100%;
  468. width: 100%;
  469. }
  470. .xfaLeft {
  471. display: flex;
  472. flex-direction: row;
  473. align-items: center;
  474. }
  475. .xfaRight {
  476. display: flex;
  477. flex-direction: row-reverse;
  478. align-items: center;
  479. }
  480. .xfaLeft > .xfaCaption,
  481. .xfaLeft > .xfaCaptionForCheckButton,
  482. .xfaRight > .xfaCaption,
  483. .xfaRight > .xfaCaptionForCheckButton {
  484. max-height: 100%;
  485. }
  486. .xfaTop {
  487. display: flex;
  488. flex-direction: column;
  489. align-items: flex-start;
  490. }
  491. .xfaBottom {
  492. display: flex;
  493. flex-direction: column-reverse;
  494. align-items: flex-start;
  495. }
  496. .xfaTop > .xfaCaption,
  497. .xfaTop > .xfaCaptionForCheckButton,
  498. .xfaBottom > .xfaCaption,
  499. .xfaBottom > .xfaCaptionForCheckButton {
  500. width: 100%;
  501. }
  502. .xfaBorder {
  503. background-color: transparent;
  504. position: absolute;
  505. pointer-events: none;
  506. }
  507. .xfaWrapped {
  508. width: 100%;
  509. height: 100%;
  510. }
  511. .xfaTextfield:focus,
  512. .xfaSelect:focus {
  513. background-image: none;
  514. background-color: transparent;
  515. outline: var(--xfa-focus-outline);
  516. outline-offset: -1px;
  517. }
  518. .xfaCheckbox:focus,
  519. .xfaRadio:focus {
  520. outline: var(--xfa-focus-outline);
  521. }
  522. .xfaTextfield,
  523. .xfaSelect {
  524. height: 100%;
  525. width: 100%;
  526. flex: 1 1 auto;
  527. border: none;
  528. resize: none;
  529. background-image: var(--xfa-unfocused-field-background);
  530. }
  531. .xfaSelect {
  532. padding-left: 2px;
  533. padding-right: 2px;
  534. padding-inline: 2px;
  535. }
  536. .xfaTop > .xfaTextfield,
  537. .xfaTop > .xfaSelect,
  538. .xfaBottom > .xfaTextfield,
  539. .xfaBottom > .xfaSelect {
  540. flex: 0 1 auto;
  541. }
  542. .xfaButton {
  543. cursor: pointer;
  544. width: 100%;
  545. height: 100%;
  546. border: none;
  547. text-align: center;
  548. }
  549. .xfaLink {
  550. width: 100%;
  551. height: 100%;
  552. position: absolute;
  553. top: 0;
  554. left: 0;
  555. }
  556. .xfaCheckbox,
  557. .xfaRadio {
  558. width: 100%;
  559. height: 100%;
  560. flex: 0 0 auto;
  561. border: none;
  562. }
  563. .xfaRich {
  564. white-space: pre-wrap;
  565. width: 100%;
  566. height: 100%;
  567. }
  568. .xfaImage {
  569. -o-object-position: left top;
  570. object-position: left top;
  571. -o-object-fit: contain;
  572. object-fit: contain;
  573. width: 100%;
  574. height: 100%;
  575. }
  576. .xfaLrTb,
  577. .xfaRlTb,
  578. .xfaTb {
  579. display: flex;
  580. flex-direction: column;
  581. align-items: stretch;
  582. }
  583. .xfaLr {
  584. display: flex;
  585. flex-direction: row;
  586. align-items: stretch;
  587. }
  588. .xfaRl {
  589. display: flex;
  590. flex-direction: row-reverse;
  591. align-items: stretch;
  592. }
  593. .xfaTb > div {
  594. justify-content: left;
  595. }
  596. .xfaPosition {
  597. position: relative;
  598. }
  599. .xfaArea {
  600. position: relative;
  601. }
  602. .xfaValignMiddle {
  603. display: flex;
  604. align-items: center;
  605. }
  606. .xfaTable {
  607. display: flex;
  608. flex-direction: column;
  609. align-items: stretch;
  610. }
  611. .xfaTable .xfaRow {
  612. display: flex;
  613. flex-direction: row;
  614. align-items: stretch;
  615. }
  616. .xfaTable .xfaRlRow {
  617. display: flex;
  618. flex-direction: row-reverse;
  619. align-items: stretch;
  620. flex: 1;
  621. }
  622. .xfaTable .xfaRlRow > div {
  623. flex: 1;
  624. }
  625. .xfaNonInteractive input,
  626. .xfaNonInteractive textarea,
  627. .xfaDisabled input,
  628. .xfaDisabled textarea,
  629. .xfaReadOnly input,
  630. .xfaReadOnly textarea {
  631. background: initial;
  632. }
  633. @media print {
  634. .xfaTextfield,
  635. .xfaSelect {
  636. background: transparent;
  637. }
  638. .xfaSelect {
  639. -webkit-appearance: none;
  640. -moz-appearance: none;
  641. appearance: none;
  642. text-indent: 1px;
  643. text-overflow: "";
  644. }
  645. }
  646. :root {
  647. --focus-outline: solid 2px blue;
  648. --hover-outline: dashed 2px blue;
  649. --freetext-line-height: 1.35;
  650. --freetext-padding: 2px;
  651. --editorFreeText-editing-cursor: text;
  652. --editorInk-editing-cursor: url(images/cursor-editorInk.svg) 0 16, pointer;
  653. }
  654. @media (forced-colors: active) {
  655. :root {
  656. --focus-outline: solid 3px ButtonText;
  657. --hover-outline: dashed 3px ButtonText;
  658. }
  659. }
  660. [data-editor-rotation="90"] {
  661. transform: rotate(90deg);
  662. }
  663. [data-editor-rotation="180"] {
  664. transform: rotate(180deg);
  665. }
  666. [data-editor-rotation="270"] {
  667. transform: rotate(270deg);
  668. }
  669. .annotationEditorLayer {
  670. background: transparent;
  671. position: absolute;
  672. top: 0;
  673. left: 0;
  674. font-size: calc(100px * var(--scale-factor));
  675. transform-origin: 0 0;
  676. cursor: auto;
  677. z-index: 20000;
  678. }
  679. .annotationEditorLayer.freeTextEditing {
  680. cursor: var(--editorFreeText-editing-cursor);
  681. }
  682. .annotationEditorLayer.inkEditing {
  683. cursor: var(--editorInk-editing-cursor);
  684. }
  685. .annotationEditorLayer .selectedEditor {
  686. outline: var(--focus-outline);
  687. resize: none;
  688. }
  689. .annotationEditorLayer .freeTextEditor {
  690. position: absolute;
  691. background: transparent;
  692. border-radius: 3px;
  693. padding: calc(var(--freetext-padding) * var(--scale-factor));
  694. resize: none;
  695. width: auto;
  696. height: auto;
  697. z-index: 1;
  698. transform-origin: 0 0;
  699. touch-action: none;
  700. cursor: auto;
  701. }
  702. .annotationEditorLayer .freeTextEditor .internal {
  703. background: transparent;
  704. border: none;
  705. top: 0;
  706. left: 0;
  707. overflow: visible;
  708. white-space: nowrap;
  709. resize: none;
  710. font: 10px sans-serif;
  711. line-height: var(--freetext-line-height);
  712. }
  713. .annotationEditorLayer .freeTextEditor .overlay {
  714. position: absolute;
  715. display: none;
  716. background: transparent;
  717. top: 0;
  718. left: 0;
  719. width: 100%;
  720. height: 100%;
  721. }
  722. .annotationEditorLayer .freeTextEditor .overlay.enabled {
  723. display: block;
  724. }
  725. .annotationEditorLayer .freeTextEditor .internal:empty::before {
  726. content: attr(default-content);
  727. color: gray;
  728. }
  729. .annotationEditorLayer .freeTextEditor .internal:focus {
  730. outline: none;
  731. }
  732. .annotationEditorLayer .inkEditor.disabled {
  733. resize: none;
  734. }
  735. .annotationEditorLayer .inkEditor.disabled.selectedEditor {
  736. resize: horizontal;
  737. }
  738. .annotationEditorLayer .freeTextEditor:hover:not(.selectedEditor),
  739. .annotationEditorLayer .inkEditor:hover:not(.selectedEditor) {
  740. outline: var(--hover-outline);
  741. }
  742. .annotationEditorLayer .inkEditor {
  743. position: absolute;
  744. background: transparent;
  745. border-radius: 3px;
  746. overflow: auto;
  747. width: 100%;
  748. height: 100%;
  749. z-index: 1;
  750. transform-origin: 0 0;
  751. cursor: auto;
  752. }
  753. .annotationEditorLayer .inkEditor.editing {
  754. resize: none;
  755. cursor: inherit;
  756. }
  757. .annotationEditorLayer .inkEditor .inkEditorCanvas {
  758. position: absolute;
  759. top: 0;
  760. left: 0;
  761. width: 100%;
  762. height: 100%;
  763. touch-action: none;
  764. }
  765. :root {
  766. --viewer-container-height: 0;
  767. --pdfViewer-padding-bottom: 0;
  768. --page-margin: 1px auto -8px;
  769. --page-border: 9px solid transparent;
  770. --page-border-image: url(images/shadow.png) 9 9 repeat;
  771. --spreadHorizontalWrapped-margin-LR: -3.5px;
  772. --scale-factor: 1;
  773. }
  774. @media screen and (forced-colors: active) {
  775. :root {
  776. --pdfViewer-padding-bottom: 9px;
  777. --page-margin: 8px auto -1px;
  778. --page-border: 1px solid CanvasText;
  779. --page-border-image: none;
  780. --spreadHorizontalWrapped-margin-LR: 3.5px;
  781. }
  782. }
  783. [data-main-rotation="90"] {
  784. transform: rotate(90deg) translateY(-100%);
  785. }
  786. [data-main-rotation="180"] {
  787. transform: rotate(180deg) translate(-100%, -100%);
  788. }
  789. [data-main-rotation="270"] {
  790. transform: rotate(270deg) translateX(-100%);
  791. }
  792. .pdfViewer {
  793. padding-bottom: var(--pdfViewer-padding-bottom);
  794. }
  795. .pdfViewer .canvasWrapper {
  796. overflow: hidden;
  797. }
  798. .pdfViewer .page {
  799. direction: ltr;
  800. width: 816px;
  801. height: 1056px;
  802. margin: var(--page-margin);
  803. position: relative;
  804. overflow: visible;
  805. border: var(--page-border);
  806. -o-border-image: var(--page-border-image);
  807. border-image: var(--page-border-image);
  808. background-clip: content-box;
  809. background-color: rgba(255, 255, 255, 1);
  810. }
  811. .pdfViewer .dummyPage {
  812. position: relative;
  813. width: 0;
  814. height: var(--viewer-container-height);
  815. }
  816. .pdfViewer.removePageBorders .page {
  817. margin: 0 auto 10px;
  818. border: none;
  819. }
  820. .pdfViewer.singlePageView {
  821. display: inline-block;
  822. }
  823. .pdfViewer.singlePageView .page {
  824. margin: 0;
  825. border: none;
  826. }
  827. .pdfViewer.scrollHorizontal,
  828. .pdfViewer.scrollWrapped,
  829. .spread {
  830. margin-left: 3.5px;
  831. margin-right: 3.5px;
  832. text-align: center;
  833. }
  834. .pdfViewer.scrollHorizontal,
  835. .spread {
  836. white-space: nowrap;
  837. }
  838. .pdfViewer.removePageBorders,
  839. .pdfViewer.scrollHorizontal .spread,
  840. .pdfViewer.scrollWrapped .spread {
  841. margin-left: 0;
  842. margin-right: 0;
  843. }
  844. .spread .page,
  845. .spread .dummyPage,
  846. .pdfViewer.scrollHorizontal .page,
  847. .pdfViewer.scrollWrapped .page,
  848. .pdfViewer.scrollHorizontal .spread,
  849. .pdfViewer.scrollWrapped .spread {
  850. display: inline-block;
  851. vertical-align: middle;
  852. }
  853. .spread .page,
  854. .pdfViewer.scrollHorizontal .page,
  855. .pdfViewer.scrollWrapped .page {
  856. margin-left: var(--spreadHorizontalWrapped-margin-LR);
  857. margin-right: var(--spreadHorizontalWrapped-margin-LR);
  858. }
  859. .pdfViewer.removePageBorders .spread .page,
  860. .pdfViewer.removePageBorders.scrollHorizontal .page,
  861. .pdfViewer.removePageBorders.scrollWrapped .page {
  862. margin-left: 5px;
  863. margin-right: 5px;
  864. }
  865. .pdfViewer .page canvas {
  866. margin: 0;
  867. display: block;
  868. }
  869. .pdfViewer .page canvas[hidden] {
  870. display: none;
  871. }
  872. .pdfViewer .page .loadingIcon {
  873. position: absolute;
  874. display: block;
  875. left: 0;
  876. top: 0;
  877. right: 0;
  878. bottom: 0;
  879. background: url("images/loading-icon.gif") center no-repeat;
  880. }
  881. .pdfViewer .page .loadingIcon.notVisible {
  882. background: none;
  883. }
  884. .pdfViewer.enablePermissions .textLayer span {
  885. -webkit-user-select: none !important;
  886. -moz-user-select: none !important;
  887. user-select: none !important;
  888. cursor: not-allowed;
  889. }
  890. .pdfPresentationMode .pdfViewer {
  891. padding-bottom: 0;
  892. }
  893. .pdfPresentationMode .spread {
  894. margin: 0;
  895. }
  896. .pdfPresentationMode .pdfViewer .page {
  897. margin: 0 auto;
  898. border: 2px solid transparent;
  899. }
  900. :root {
  901. --dir-factor: 1;
  902. --sidebar-width: 200px;
  903. --sidebar-transition-duration: 200ms;
  904. --sidebar-transition-timing-function: ease;
  905. --scale-select-width: 140px;
  906. --toolbar-icon-opacity: 0.7;
  907. --doorhanger-icon-opacity: 0.9;
  908. --main-color: rgba(12, 12, 13, 1);
  909. --body-bg-color: rgba(237, 237, 240, 1);
  910. --progressBar-percent: 0%;
  911. --progressBar-end-offset: 0;
  912. --progressBar-color: rgba(10, 132, 255, 1);
  913. --progressBar-indeterminate-bg-color: rgba(221, 221, 222, 1);
  914. --progressBar-indeterminate-blend-color: rgba(116, 177, 239, 1);
  915. --scrollbar-color: auto;
  916. --scrollbar-bg-color: auto;
  917. --toolbar-icon-bg-color: rgba(0, 0, 0, 1);
  918. --toolbar-icon-hover-bg-color: rgba(0, 0, 0, 1);
  919. --sidebar-narrow-bg-color: rgba(237, 237, 240, 0.9);
  920. --sidebar-toolbar-bg-color: rgba(245, 246, 247, 1);
  921. --toolbar-bg-color: rgba(249, 249, 250, 1);
  922. --toolbar-border-color: rgba(204, 204, 204, 1);
  923. --toolbar-box-shadow: 0 1px 0 var(--toolbar-border-color);
  924. --toolbar-border-bottom: none;
  925. --toolbarSidebar-box-shadow: inset calc(-1px * var(--dir-factor)) 0 0
  926. rgba(0, 0, 0, 0.25),
  927. 0 1px 0 rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
  928. --toolbarSidebar-border-bottom: none;
  929. --button-hover-color: rgba(221, 222, 223, 1);
  930. --toggled-btn-color: rgba(0, 0, 0, 1);
  931. --toggled-btn-bg-color: rgba(0, 0, 0, 0.3);
  932. --toggled-hover-active-btn-color: rgba(0, 0, 0, 0.4);
  933. --dropdown-btn-bg-color: rgba(215, 215, 219, 1);
  934. --dropdown-btn-border: none;
  935. --separator-color: rgba(0, 0, 0, 0.3);
  936. --field-color: rgba(6, 6, 6, 1);
  937. --field-bg-color: rgba(255, 255, 255, 1);
  938. --field-border-color: rgba(187, 187, 188, 1);
  939. --treeitem-color: rgba(0, 0, 0, 0.8);
  940. --treeitem-hover-color: rgba(0, 0, 0, 0.9);
  941. --treeitem-selected-color: rgba(0, 0, 0, 0.9);
  942. --treeitem-selected-bg-color: rgba(0, 0, 0, 0.25);
  943. --sidebaritem-bg-color: rgba(0, 0, 0, 0.15);
  944. --doorhanger-bg-color: rgba(255, 255, 255, 1);
  945. --doorhanger-border-color: rgba(12, 12, 13, 0.2);
  946. --doorhanger-hover-color: rgba(12, 12, 13, 1);
  947. --doorhanger-hover-bg-color: rgba(237, 237, 237, 1);
  948. --doorhanger-separator-color: rgba(222, 222, 222, 1);
  949. --dialog-button-border: none;
  950. --dialog-button-bg-color: rgba(12, 12, 13, 0.1);
  951. --dialog-button-hover-bg-color: rgba(12, 12, 13, 0.3);
  952. --loading-icon: url(images/loading.svg);
  953. --treeitem-expanded-icon: url(images/treeitem-expanded.svg);
  954. --treeitem-collapsed-icon: url(images/treeitem-collapsed.svg);
  955. --toolbarButton-editorFreeText-icon: url(images/toolbarButton-editorFreeText.svg);
  956. --toolbarButton-editorInk-icon: url(images/toolbarButton-editorInk.svg);
  957. --toolbarButton-menuArrow-icon: url(images/toolbarButton-menuArrow.svg);
  958. --toolbarButton-sidebarToggle-icon: url(images/toolbarButton-sidebarToggle.svg);
  959. --toolbarButton-secondaryToolbarToggle-icon: url(images/toolbarButton-secondaryToolbarToggle.svg);
  960. --toolbarButton-pageUp-icon: url(images/toolbarButton-pageUp.svg);
  961. --toolbarButton-pageDown-icon: url(images/toolbarButton-pageDown.svg);
  962. --toolbarButton-zoomOut-icon: url(images/toolbarButton-zoomOut.svg);
  963. --toolbarButton-zoomIn-icon: url(images/toolbarButton-zoomIn.svg);
  964. --toolbarButton-presentationMode-icon: url(images/toolbarButton-presentationMode.svg);
  965. --toolbarButton-print-icon: url(images/toolbarButton-print.svg);
  966. --toolbarButton-openFile-icon: url(images/toolbarButton-openFile.svg);
  967. --toolbarButton-download-icon: url(images/toolbarButton-download.svg);
  968. --toolbarButton-bookmark-icon: url(images/toolbarButton-bookmark.svg);
  969. --toolbarButton-viewThumbnail-icon: url(images/toolbarButton-viewThumbnail.svg);
  970. --toolbarButton-viewOutline-icon: url(images/toolbarButton-viewOutline.svg);
  971. --toolbarButton-viewAttachments-icon: url(images/toolbarButton-viewAttachments.svg);
  972. --toolbarButton-viewLayers-icon: url(images/toolbarButton-viewLayers.svg);
  973. --toolbarButton-currentOutlineItem-icon: url(images/toolbarButton-currentOutlineItem.svg);
  974. --toolbarButton-search-icon: url(images/toolbarButton-search.svg);
  975. --findbarButton-previous-icon: url(images/findbarButton-previous.svg);
  976. --findbarButton-next-icon: url(images/findbarButton-next.svg);
  977. --secondaryToolbarButton-firstPage-icon: url(images/secondaryToolbarButton-firstPage.svg);
  978. --secondaryToolbarButton-lastPage-icon: url(images/secondaryToolbarButton-lastPage.svg);
  979. --secondaryToolbarButton-rotateCcw-icon: url(images/secondaryToolbarButton-rotateCcw.svg);
  980. --secondaryToolbarButton-rotateCw-icon: url(images/secondaryToolbarButton-rotateCw.svg);
  981. --secondaryToolbarButton-selectTool-icon: url(images/secondaryToolbarButton-selectTool.svg);
  982. --secondaryToolbarButton-handTool-icon: url(images/secondaryToolbarButton-handTool.svg);
  983. --secondaryToolbarButton-scrollPage-icon: url(images/secondaryToolbarButton-scrollPage.svg);
  984. --secondaryToolbarButton-scrollVertical-icon: url(images/secondaryToolbarButton-scrollVertical.svg);
  985. --secondaryToolbarButton-scrollHorizontal-icon: url(images/secondaryToolbarButton-scrollHorizontal.svg);
  986. --secondaryToolbarButton-scrollWrapped-icon: url(images/secondaryToolbarButton-scrollWrapped.svg);
  987. --secondaryToolbarButton-spreadNone-icon: url(images/secondaryToolbarButton-spreadNone.svg);
  988. --secondaryToolbarButton-spreadOdd-icon: url(images/secondaryToolbarButton-spreadOdd.svg);
  989. --secondaryToolbarButton-spreadEven-icon: url(images/secondaryToolbarButton-spreadEven.svg);
  990. --secondaryToolbarButton-documentProperties-icon: url(images/secondaryToolbarButton-documentProperties.svg);
  991. }
  992. [dir="rtl"]:root {
  993. --dir-factor: -1;
  994. }
  995. @media (prefers-color-scheme: dark) {
  996. :root {
  997. --main-color: rgba(249, 249, 250, 1);
  998. --body-bg-color: rgba(42, 42, 46, 1);
  999. --progressBar-color: rgba(0, 96, 223, 1);
  1000. --progressBar-indeterminate-bg-color: rgba(40, 40, 43, 1);
  1001. --progressBar-indeterminate-blend-color: rgba(20, 68, 133, 1);
  1002. --scrollbar-color: rgba(121, 121, 123, 1);
  1003. --scrollbar-bg-color: rgba(35, 35, 39, 1);
  1004. --toolbar-icon-bg-color: rgba(255, 255, 255, 1);
  1005. --toolbar-icon-hover-bg-color: rgba(255, 255, 255, 1);
  1006. --sidebar-narrow-bg-color: rgba(42, 42, 46, 0.9);
  1007. --sidebar-toolbar-bg-color: rgba(50, 50, 52, 1);
  1008. --toolbar-bg-color: rgba(56, 56, 61, 1);
  1009. --toolbar-border-color: rgba(12, 12, 13, 1);
  1010. --button-hover-color: rgba(102, 102, 103, 1);
  1011. --toggled-btn-color: rgba(255, 255, 255, 1);
  1012. --toggled-btn-bg-color: rgba(0, 0, 0, 0.3);
  1013. --toggled-hover-active-btn-color: rgba(0, 0, 0, 0.4);
  1014. --dropdown-btn-bg-color: rgba(74, 74, 79, 1);
  1015. --separator-color: rgba(0, 0, 0, 0.3);
  1016. --field-color: rgba(250, 250, 250, 1);
  1017. --field-bg-color: rgba(64, 64, 68, 1);
  1018. --field-border-color: rgba(115, 115, 115, 1);
  1019. --treeitem-color: rgba(255, 255, 255, 0.8);
  1020. --treeitem-hover-color: rgba(255, 255, 255, 0.9);
  1021. --treeitem-selected-color: rgba(255, 255, 255, 0.9);
  1022. --treeitem-selected-bg-color: rgba(255, 255, 255, 0.25);
  1023. --sidebaritem-bg-color: rgba(255, 255, 255, 0.15);
  1024. --doorhanger-bg-color: rgba(74, 74, 79, 1);
  1025. --doorhanger-border-color: rgba(39, 39, 43, 1);
  1026. --doorhanger-hover-color: rgba(249, 249, 250, 1);
  1027. --doorhanger-hover-bg-color: rgba(93, 94, 98, 1);
  1028. --doorhanger-separator-color: rgba(92, 92, 97, 1);
  1029. --dialog-button-bg-color: rgba(92, 92, 97, 1);
  1030. --dialog-button-hover-bg-color: rgba(115, 115, 115, 1);
  1031. /* This image is used in <input> elements, which unfortunately means that
  1032. * the `mask-image` approach used with all of the other images doesn't work
  1033. * here; hence why we still have two versions of this particular image. */
  1034. --loading-icon: url(images/loading-dark.svg);
  1035. }
  1036. }
  1037. @media screen and (forced-colors: active) {
  1038. :root {
  1039. --button-hover-color: Highlight;
  1040. --doorhanger-hover-bg-color: Highlight;
  1041. --toolbar-icon-opacity: 1;
  1042. --toolbar-icon-bg-color: ButtonText;
  1043. --toolbar-icon-hover-bg-color: ButtonFace;
  1044. --toolbar-border-color: CanvasText;
  1045. --toolbar-border-bottom: 1px solid var(--toolbar-border-color);
  1046. --toolbar-box-shadow: none;
  1047. --toggled-btn-color: HighlightText;
  1048. --toggled-btn-bg-color: LinkText;
  1049. --doorhanger-hover-color: ButtonFace;
  1050. --doorhanger-border-color-whcm: 1px solid ButtonText;
  1051. --doorhanger-triangle-opacity-whcm: 0;
  1052. --dialog-button-border: 1px solid Highlight;
  1053. --dialog-button-hover-bg-color: Highlight;
  1054. --dialog-button-hover-color: ButtonFace;
  1055. --dropdown-btn-border: 1px solid ButtonText;
  1056. --field-border-color: ButtonText;
  1057. --main-color: CanvasText;
  1058. --separator-color: GrayText;
  1059. --doorhanger-separator-color: GrayText;
  1060. --toolbarSidebar-box-shadow: none;
  1061. --toolbarSidebar-border-bottom: 1px solid var(--toolbar-border-color);
  1062. }
  1063. }
  1064. * {
  1065. padding: 0;
  1066. margin: 0;
  1067. }
  1068. html,
  1069. body {
  1070. height: 100%;
  1071. width: 100%;
  1072. }
  1073. body {
  1074. background-color: var(--body-bg-color);
  1075. scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color);
  1076. }
  1077. .hidden,
  1078. [hidden] {
  1079. display: none !important;
  1080. }
  1081. #viewerContainer.pdfPresentationMode:-webkit-full-screen {
  1082. top: 0;
  1083. background-color: rgba(0, 0, 0, 1);
  1084. width: 100%;
  1085. height: 100%;
  1086. overflow: hidden;
  1087. cursor: none;
  1088. -webkit-user-select: none;
  1089. user-select: none;
  1090. }
  1091. #viewerContainer.pdfPresentationMode:fullscreen {
  1092. top: 0;
  1093. background-color: rgba(0, 0, 0, 1);
  1094. width: 100%;
  1095. height: 100%;
  1096. overflow: hidden;
  1097. cursor: none;
  1098. -webkit-user-select: none;
  1099. -moz-user-select: none;
  1100. user-select: none;
  1101. }
  1102. .pdfPresentationMode:-webkit-full-screen section:not([data-internal-link]) {
  1103. pointer-events: none;
  1104. }
  1105. .pdfPresentationMode:fullscreen section:not([data-internal-link]) {
  1106. pointer-events: none;
  1107. }
  1108. .pdfPresentationMode:-webkit-full-screen .textLayer span {
  1109. cursor: none;
  1110. }
  1111. .pdfPresentationMode:fullscreen .textLayer span {
  1112. cursor: none;
  1113. }
  1114. .pdfPresentationMode.pdfPresentationModeControls > *,
  1115. .pdfPresentationMode.pdfPresentationModeControls .textLayer span {
  1116. cursor: default;
  1117. }
  1118. #outerContainer {
  1119. width: 100%;
  1120. height: 100%;
  1121. position: relative;
  1122. }
  1123. [dir="ltr"] #sidebarContainer {
  1124. left: calc(-1 * var(--sidebar-width));
  1125. }
  1126. [dir="rtl"] #sidebarContainer {
  1127. right: calc(-1 * var(--sidebar-width));
  1128. }
  1129. [dir="ltr"] #sidebarContainer {
  1130. border-right: var(--doorhanger-border-color-whcm);
  1131. }
  1132. [dir="rtl"] #sidebarContainer {
  1133. border-left: var(--doorhanger-border-color-whcm);
  1134. }
  1135. [dir="ltr"] #sidebarContainer {
  1136. transition-property: left;
  1137. }
  1138. [dir="rtl"] #sidebarContainer {
  1139. transition-property: right;
  1140. }
  1141. #sidebarContainer {
  1142. position: absolute;
  1143. top: 32px;
  1144. bottom: 0;
  1145. inset-inline-start: calc(-1 * var(--sidebar-width));
  1146. width: var(--sidebar-width);
  1147. visibility: hidden;
  1148. z-index: 100;
  1149. font: message-box;
  1150. border-top: 1px solid rgba(51, 51, 51, 1);
  1151. -webkit-border-end: var(--doorhanger-border-color-whcm);
  1152. border-inline-end: var(--doorhanger-border-color-whcm);
  1153. transition-property: inset-inline-start;
  1154. transition-duration: var(--sidebar-transition-duration);
  1155. transition-timing-function: var(--sidebar-transition-timing-function);
  1156. }
  1157. #outerContainer.sidebarMoving #sidebarContainer,
  1158. #outerContainer.sidebarOpen #sidebarContainer {
  1159. visibility: visible;
  1160. }
  1161. [dir="ltr"] #outerContainer.sidebarOpen #sidebarContainer {
  1162. left: 0;
  1163. }
  1164. [dir="rtl"] #outerContainer.sidebarOpen #sidebarContainer {
  1165. right: 0;
  1166. }
  1167. #outerContainer.sidebarOpen #sidebarContainer {
  1168. inset-inline-start: 0;
  1169. }
  1170. #mainContainer {
  1171. position: absolute;
  1172. top: 0;
  1173. right: 0;
  1174. bottom: 0;
  1175. left: 0;
  1176. min-width: 350px;
  1177. }
  1178. [dir="ltr"] #sidebarContent {
  1179. left: 0;
  1180. }
  1181. [dir="rtl"] #sidebarContent {
  1182. right: 0;
  1183. }
  1184. #sidebarContent {
  1185. top: 32px;
  1186. bottom: 0;
  1187. inset-inline-start: 0;
  1188. overflow: auto;
  1189. position: absolute;
  1190. width: 100%;
  1191. background-color: rgba(0, 0, 0, 0.1);
  1192. box-shadow: inset calc(-1px * var(--dir-factor)) 0 0 rgba(0, 0, 0, 0.25);
  1193. }
  1194. #viewerContainer {
  1195. overflow: auto;
  1196. position: absolute;
  1197. top: 32px;
  1198. right: 0;
  1199. bottom: 0;
  1200. left: 0;
  1201. outline: none;
  1202. }
  1203. #viewerContainer:not(.pdfPresentationMode) {
  1204. transition-duration: var(--sidebar-transition-duration);
  1205. transition-timing-function: var(--sidebar-transition-timing-function);
  1206. }
  1207. [dir="ltr"] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
  1208. left: var(--sidebar-width);
  1209. }
  1210. [dir="rtl"] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
  1211. right: var(--sidebar-width);
  1212. }
  1213. [dir="ltr"] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
  1214. transition-property: left;
  1215. }
  1216. [dir="rtl"] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
  1217. transition-property: right;
  1218. }
  1219. #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
  1220. inset-inline-start: var(--sidebar-width);
  1221. transition-property: inset-inline-start;
  1222. }
  1223. .toolbar {
  1224. position: relative;
  1225. left: 0;
  1226. right: 0;
  1227. z-index: 9999;
  1228. cursor: default;
  1229. font: message-box;
  1230. }
  1231. .toolbar input,
  1232. .toolbar button,
  1233. .toolbar select,
  1234. .secondaryToolbar input,
  1235. .secondaryToolbar button,
  1236. .secondaryToolbar a,
  1237. .secondaryToolbar select,
  1238. .editorParamsToolbar input,
  1239. .editorParamsToolbar button,
  1240. .editorParamsToolbar select,
  1241. .findbar input,
  1242. .findbar button,
  1243. .findbar select,
  1244. #sidebarContainer input,
  1245. #sidebarContainer button,
  1246. #sidebarContainer select {
  1247. outline: none;
  1248. font: message-box;
  1249. }
  1250. #toolbarContainer {
  1251. width: 100%;
  1252. }
  1253. #toolbarSidebar {
  1254. width: 100%;
  1255. height: 32px;
  1256. background-color: var(--sidebar-toolbar-bg-color);
  1257. box-shadow: var(--toolbarSidebar-box-shadow);
  1258. border-bottom: var(--toolbarSidebar-border-bottom);
  1259. }
  1260. [dir="ltr"] #sidebarResizer {
  1261. right: -6px;
  1262. }
  1263. [dir="rtl"] #sidebarResizer {
  1264. left: -6px;
  1265. }
  1266. #sidebarResizer {
  1267. position: absolute;
  1268. top: 0;
  1269. bottom: 0;
  1270. inset-inline-end: -6px;
  1271. width: 6px;
  1272. z-index: 200;
  1273. cursor: ew-resize;
  1274. }
  1275. #toolbarContainer,
  1276. .findbar,
  1277. .secondaryToolbar,
  1278. .editorParamsToolbar {
  1279. position: relative;
  1280. height: 32px;
  1281. background-color: var(--toolbar-bg-color);
  1282. box-shadow: var(--toolbar-box-shadow);
  1283. border-bottom: var(--toolbar-border-bottom);
  1284. }
  1285. #toolbarViewer {
  1286. height: 32px;
  1287. }
  1288. [dir="ltr"] #loadingBar {
  1289. left: 0;
  1290. right: var(--progressBar-end-offset);
  1291. }
  1292. [dir="rtl"] #loadingBar {
  1293. right: 0;
  1294. left: var(--progressBar-end-offset);
  1295. }
  1296. [dir="ltr"] #loadingBar {
  1297. transition-property: left;
  1298. }
  1299. [dir="rtl"] #loadingBar {
  1300. transition-property: right;
  1301. }
  1302. #loadingBar {
  1303. position: absolute;
  1304. inset-inline: 0 var(--progressBar-end-offset);
  1305. height: 4px;
  1306. background-color: var(--body-bg-color);
  1307. border-bottom: 1px solid var(--toolbar-border-color);
  1308. transition-property: inset-inline-start;
  1309. transition-duration: var(--sidebar-transition-duration);
  1310. transition-timing-function: var(--sidebar-transition-timing-function);
  1311. }
  1312. [dir="ltr"] #outerContainer.sidebarOpen #loadingBar {
  1313. left: var(--sidebar-width);
  1314. }
  1315. [dir="rtl"] #outerContainer.sidebarOpen #loadingBar {
  1316. right: var(--sidebar-width);
  1317. }
  1318. #outerContainer.sidebarOpen #loadingBar {
  1319. inset-inline-start: var(--sidebar-width);
  1320. }
  1321. #loadingBar .progress {
  1322. position: absolute;
  1323. top: 0;
  1324. left: 0;
  1325. width: 100%;
  1326. transform: scaleX(var(--progressBar-percent));
  1327. transform-origin: 0 0;
  1328. height: 100%;
  1329. background-color: var(--progressBar-color);
  1330. overflow: hidden;
  1331. transition: transform 200ms;
  1332. }
  1333. @keyframes progressIndeterminate {
  1334. 0% {
  1335. transform: translateX(-142px);
  1336. }
  1337. 100% {
  1338. transform: translateX(0);
  1339. }
  1340. }
  1341. #loadingBar.indeterminate .progress {
  1342. transform: none;
  1343. background-color: var(--progressBar-indeterminate-bg-color);
  1344. transition: none;
  1345. }
  1346. #loadingBar.indeterminate .progress .glimmer {
  1347. position: absolute;
  1348. top: 0;
  1349. left: 0;
  1350. height: 100%;
  1351. width: calc(100% + 150px);
  1352. background: repeating-linear-gradient(
  1353. 135deg,
  1354. var(--progressBar-indeterminate-blend-color) 0,
  1355. var(--progressBar-indeterminate-bg-color) 5px,
  1356. var(--progressBar-indeterminate-bg-color) 45px,
  1357. var(--progressBar-color) 55px,
  1358. var(--progressBar-color) 95px,
  1359. var(--progressBar-indeterminate-blend-color) 100px
  1360. );
  1361. animation: progressIndeterminate 1s linear infinite;
  1362. }
  1363. #outerContainer.sidebarResizing #sidebarContainer,
  1364. #outerContainer.sidebarResizing #viewerContainer,
  1365. #outerContainer.sidebarResizing #loadingBar {
  1366. /* Improve responsiveness and avoid visual glitches when the sidebar is resized. */
  1367. transition-duration: 0s;
  1368. }
  1369. .findbar,
  1370. .secondaryToolbar,
  1371. .editorParamsToolbar {
  1372. top: 32px;
  1373. position: absolute;
  1374. z-index: 30000;
  1375. height: auto;
  1376. padding: 0 4px;
  1377. margin: 4px 2px;
  1378. font: message-box;
  1379. font-size: 12px;
  1380. line-height: 14px;
  1381. text-align: left;
  1382. cursor: default;
  1383. }
  1384. [dir="ltr"] .findbar {
  1385. left: 64px;
  1386. }
  1387. [dir="rtl"] .findbar {
  1388. right: 64px;
  1389. }
  1390. .findbar {
  1391. inset-inline-start: 64px;
  1392. min-width: 300px;
  1393. background-color: var(--toolbar-bg-color);
  1394. }
  1395. .findbar > div {
  1396. height: 32px;
  1397. }
  1398. [dir="ltr"] .findbar > div#findbarInputContainer {
  1399. margin-right: 4px;
  1400. }
  1401. [dir="rtl"] .findbar > div#findbarInputContainer {
  1402. margin-left: 4px;
  1403. }
  1404. .findbar > div#findbarInputContainer {
  1405. -webkit-margin-end: 4px;
  1406. margin-inline-end: 4px;
  1407. }
  1408. .findbar.wrapContainers > div,
  1409. .findbar.wrapContainers > div#findbarMessageContainer > * {
  1410. clear: both;
  1411. }
  1412. .findbar.wrapContainers > div#findbarMessageContainer {
  1413. height: auto;
  1414. }
  1415. .findbar input[type="checkbox"] {
  1416. pointer-events: none;
  1417. }
  1418. .findbar label {
  1419. -webkit-user-select: none;
  1420. -moz-user-select: none;
  1421. user-select: none;
  1422. }
  1423. .findbar label:hover,
  1424. .findbar input:focus-visible + label {
  1425. color: var(--toggled-btn-color);
  1426. background-color: var(--button-hover-color);
  1427. }
  1428. .findbar .toolbarField[type="checkbox"]:checked + .toolbarLabel {
  1429. background-color: var(--toggled-btn-bg-color) !important;
  1430. color: var(--toggled-btn-color);
  1431. }
  1432. #findInput {
  1433. width: 200px;
  1434. }
  1435. #findInput::-moz-placeholder {
  1436. font-style: normal;
  1437. }
  1438. #findInput::placeholder {
  1439. font-style: normal;
  1440. }
  1441. #findInput[data-status="pending"] {
  1442. background-image: var(--loading-icon);
  1443. background-repeat: no-repeat;
  1444. background-position: calc(50% + 48% * var(--dir-factor));
  1445. }
  1446. #findInput[data-status="notFound"] {
  1447. background-color: rgba(255, 102, 102, 1);
  1448. }
  1449. [dir="ltr"] .secondaryToolbar,[dir="ltr"]
  1450. .editorParamsToolbar {
  1451. right: 4px;
  1452. }
  1453. [dir="rtl"] .secondaryToolbar,[dir="rtl"]
  1454. .editorParamsToolbar {
  1455. left: 4px;
  1456. }
  1457. .secondaryToolbar,
  1458. .editorParamsToolbar {
  1459. padding: 6px 0 10px;
  1460. inset-inline-end: 4px;
  1461. height: auto;
  1462. background-color: var(--doorhanger-bg-color);
  1463. }
  1464. .editorParamsToolbarContainer {
  1465. width: 220px;
  1466. margin-bottom: -4px;
  1467. }
  1468. .editorParamsToolbarContainer > .editorParamsSetter {
  1469. min-height: 26px;
  1470. display: flex;
  1471. align-items: center;
  1472. justify-content: space-between;
  1473. padding-left: 10px;
  1474. padding-right: 10px;
  1475. padding-inline: 10px;
  1476. }
  1477. [dir="ltr"] .editorParamsToolbarContainer .editorParamsLabel {
  1478. padding-right: 10px;
  1479. }
  1480. [dir="rtl"] .editorParamsToolbarContainer .editorParamsLabel {
  1481. padding-left: 10px;
  1482. }
  1483. .editorParamsToolbarContainer .editorParamsLabel {
  1484. -webkit-padding-end: 10px;
  1485. padding-inline-end: 10px;
  1486. flex: none;
  1487. color: var(--main-color);
  1488. }
  1489. .editorParamsToolbarContainer .editorParamsColor {
  1490. width: 32px;
  1491. height: 32px;
  1492. flex: none;
  1493. }
  1494. .editorParamsToolbarContainer .editorParamsSlider {
  1495. background-color: transparent;
  1496. width: 90px;
  1497. flex: 0 1 0;
  1498. }
  1499. .editorParamsToolbarContainer .editorParamsSlider::-moz-range-progress {
  1500. background-color: black;
  1501. }
  1502. .editorParamsToolbarContainer .editorParamsSlider::-webkit-slider-runnable-track,
  1503. .editorParamsToolbarContainer .editorParamsSlider::-moz-range-track {
  1504. background-color: black;
  1505. }
  1506. .editorParamsToolbarContainer .editorParamsSlider::-webkit-slider-thumb,
  1507. .editorParamsToolbarContainer .editorParamsSlider::-moz-range-thumb {
  1508. background-color: white;
  1509. }
  1510. #secondaryToolbarButtonContainer {
  1511. max-width: 220px;
  1512. min-height: 26px;
  1513. max-height: calc(var(--viewer-container-height) - 40px);
  1514. overflow-y: auto;
  1515. margin-bottom: -4px;
  1516. }
  1517. [dir="ltr"] #editorInkParamsToolbar {
  1518. right: 40px;
  1519. }
  1520. [dir="rtl"] #editorInkParamsToolbar {
  1521. left: 40px;
  1522. }
  1523. #editorInkParamsToolbar {
  1524. inset-inline-end: 40px;
  1525. background-color: var(--toolbar-bg-color);
  1526. }
  1527. [dir="ltr"] #editorFreeTextParamsToolbar {
  1528. right: 68px;
  1529. }
  1530. [dir="rtl"] #editorFreeTextParamsToolbar {
  1531. left: 68px;
  1532. }
  1533. #editorFreeTextParamsToolbar {
  1534. inset-inline-end: 68px;
  1535. background-color: var(--toolbar-bg-color);
  1536. }
  1537. .doorHanger,
  1538. .doorHangerRight {
  1539. border-radius: 2px;
  1540. box-shadow: 0 1px 5px var(--doorhanger-border-color),
  1541. 0 0 0 1px var(--doorhanger-border-color);
  1542. border: var(--doorhanger-border-color-whcm);
  1543. }
  1544. .doorHanger:after,
  1545. .doorHanger:before,
  1546. .doorHangerRight:after,
  1547. .doorHangerRight:before {
  1548. bottom: 100%;
  1549. border: 8px solid rgba(0, 0, 0, 0);
  1550. content: " ";
  1551. height: 0;
  1552. width: 0;
  1553. position: absolute;
  1554. pointer-events: none;
  1555. opacity: var(--doorhanger-triangle-opacity-whcm);
  1556. }
  1557. [dir="ltr"] .doorHanger:after {
  1558. left: 10px;
  1559. }
  1560. [dir="rtl"] .doorHanger:after {
  1561. right: 10px;
  1562. }
  1563. [dir="ltr"] .doorHanger:after {
  1564. margin-left: -8px;
  1565. }
  1566. [dir="rtl"] .doorHanger:after {
  1567. margin-right: -8px;
  1568. }
  1569. .doorHanger:after {
  1570. inset-inline-start: 10px;
  1571. -webkit-margin-start: -8px;
  1572. margin-inline-start: -8px;
  1573. border-bottom-color: var(--toolbar-bg-color);
  1574. }
  1575. [dir="ltr"] .doorHangerRight:after {
  1576. right: 10px;
  1577. }
  1578. [dir="rtl"] .doorHangerRight:after {
  1579. left: 10px;
  1580. }
  1581. [dir="ltr"] .doorHangerRight:after {
  1582. margin-right: -8px;
  1583. }
  1584. [dir="rtl"] .doorHangerRight:after {
  1585. margin-left: -8px;
  1586. }
  1587. .doorHangerRight:after {
  1588. inset-inline-end: 10px;
  1589. -webkit-margin-end: -8px;
  1590. margin-inline-end: -8px;
  1591. border-bottom-color: var(--doorhanger-bg-color);
  1592. }
  1593. .doorHanger:before,
  1594. .doorHangerRight:before {
  1595. border-bottom-color: var(--doorhanger-border-color);
  1596. border-width: 9px;
  1597. }
  1598. [dir="ltr"] .doorHanger:before {
  1599. left: 10px;
  1600. }
  1601. [dir="rtl"] .doorHanger:before {
  1602. right: 10px;
  1603. }
  1604. [dir="ltr"] .doorHanger:before {
  1605. margin-left: -9px;
  1606. }
  1607. [dir="rtl"] .doorHanger:before {
  1608. margin-right: -9px;
  1609. }
  1610. .doorHanger:before {
  1611. inset-inline-start: 10px;
  1612. -webkit-margin-start: -9px;
  1613. margin-inline-start: -9px;
  1614. }
  1615. [dir="ltr"] .doorHangerRight:before {
  1616. right: 10px;
  1617. }
  1618. [dir="rtl"] .doorHangerRight:before {
  1619. left: 10px;
  1620. }
  1621. [dir="ltr"] .doorHangerRight:before {
  1622. margin-right: -9px;
  1623. }
  1624. [dir="rtl"] .doorHangerRight:before {
  1625. margin-left: -9px;
  1626. }
  1627. .doorHangerRight:before {
  1628. inset-inline-end: 10px;
  1629. -webkit-margin-end: -9px;
  1630. margin-inline-end: -9px;
  1631. }
  1632. #findResultsCount {
  1633. background-color: rgba(217, 217, 217, 1);
  1634. color: rgba(82, 82, 82, 1);
  1635. text-align: center;
  1636. padding: 4px 5px;
  1637. margin: 5px;
  1638. }
  1639. #findMsg {
  1640. color: rgba(251, 0, 0, 1);
  1641. }
  1642. #findResultsCount:empty,
  1643. #findMsg:empty {
  1644. display: none;
  1645. }
  1646. #toolbarViewerMiddle {
  1647. position: absolute;
  1648. left: 50%;
  1649. transform: translateX(-50%);
  1650. }
  1651. [dir="ltr"] #toolbarViewerLeft,[dir="ltr"]
  1652. #toolbarSidebarLeft {
  1653. float: left;
  1654. }
  1655. [dir="rtl"] #toolbarViewerLeft,[dir="rtl"]
  1656. #toolbarSidebarLeft {
  1657. float: right;
  1658. }
  1659. #toolbarViewerLeft,
  1660. #toolbarSidebarLeft {
  1661. float: inline-start;
  1662. }
  1663. [dir="ltr"] #toolbarViewerRight,[dir="ltr"]
  1664. #toolbarSidebarRight {
  1665. float: right;
  1666. }
  1667. [dir="rtl"] #toolbarViewerRight,[dir="rtl"]
  1668. #toolbarSidebarRight {
  1669. float: left;
  1670. }
  1671. #toolbarViewerRight,
  1672. #toolbarSidebarRight {
  1673. float: inline-end;
  1674. }
  1675. [dir="ltr"] #toolbarViewerLeft > *,[dir="ltr"]
  1676. #toolbarViewerMiddle > *,[dir="ltr"]
  1677. #toolbarViewerRight > *,[dir="ltr"]
  1678. #toolbarSidebarLeft *,[dir="ltr"]
  1679. #toolbarSidebarRight *,[dir="ltr"]
  1680. .findbar * {
  1681. float: left;
  1682. }
  1683. [dir="rtl"] #toolbarViewerLeft > *,[dir="rtl"]
  1684. #toolbarViewerMiddle > *,[dir="rtl"]
  1685. #toolbarViewerRight > *,[dir="rtl"]
  1686. #toolbarSidebarLeft *,[dir="rtl"]
  1687. #toolbarSidebarRight *,[dir="rtl"]
  1688. .findbar * {
  1689. float: right;
  1690. }
  1691. #toolbarViewerLeft > *,
  1692. #toolbarViewerMiddle > *,
  1693. #toolbarViewerRight > *,
  1694. #toolbarSidebarLeft *,
  1695. #toolbarSidebarRight *,
  1696. .findbar * {
  1697. position: relative;
  1698. float: inline-start;
  1699. }
  1700. [dir="ltr"] #toolbarViewerLeft {
  1701. padding-left: 1px;
  1702. }
  1703. [dir="rtl"] #toolbarViewerLeft {
  1704. padding-right: 1px;
  1705. }
  1706. #toolbarViewerLeft {
  1707. -webkit-padding-start: 1px;
  1708. padding-inline-start: 1px;
  1709. }
  1710. [dir="ltr"] #toolbarViewerRight {
  1711. padding-right: 1px;
  1712. }
  1713. [dir="rtl"] #toolbarViewerRight {
  1714. padding-left: 1px;
  1715. }
  1716. #toolbarViewerRight {
  1717. -webkit-padding-end: 1px;
  1718. padding-inline-end: 1px;
  1719. }
  1720. [dir="ltr"] #toolbarSidebarRight {
  1721. padding-right: 2px;
  1722. }
  1723. [dir="rtl"] #toolbarSidebarRight {
  1724. padding-left: 2px;
  1725. }
  1726. #toolbarSidebarRight {
  1727. -webkit-padding-end: 2px;
  1728. padding-inline-end: 2px;
  1729. }
  1730. .splitToolbarButton {
  1731. margin: 2px;
  1732. display: inline-block;
  1733. }
  1734. [dir="ltr"] .splitToolbarButton > .toolbarButton {
  1735. float: left;
  1736. }
  1737. [dir="rtl"] .splitToolbarButton > .toolbarButton {
  1738. float: right;
  1739. }
  1740. .splitToolbarButton > .toolbarButton {
  1741. float: inline-start;
  1742. }
  1743. .toolbarButton,
  1744. .secondaryToolbarButton,
  1745. .dialogButton {
  1746. border: none;
  1747. background: none;
  1748. width: 28px;
  1749. height: 28px;
  1750. outline: none;
  1751. }
  1752. .dialogButton:hover,
  1753. .dialogButton:focus-visible {
  1754. background-color: var(--dialog-button-hover-bg-color);
  1755. }
  1756. .dialogButton:hover > span,
  1757. .dialogButton:focus-visible > span {
  1758. color: var(--dialog-button-hover-color);
  1759. }
  1760. .toolbarButton > span {
  1761. display: inline-block;
  1762. width: 0;
  1763. height: 0;
  1764. overflow: hidden;
  1765. }
  1766. .toolbarButton[disabled],
  1767. .secondaryToolbarButton[disabled],
  1768. .dialogButton[disabled] {
  1769. opacity: 0.5;
  1770. }
  1771. .splitToolbarButton > .toolbarButton:hover,
  1772. .splitToolbarButton > .toolbarButton:focus-visible,
  1773. .dropdownToolbarButton:hover {
  1774. background-color: var(--button-hover-color);
  1775. }
  1776. .splitToolbarButton > .toolbarButton {
  1777. position: relative;
  1778. margin: 0;
  1779. }
  1780. [dir="ltr"] #toolbarSidebar .splitToolbarButton > .toolbarButton {
  1781. margin-right: 2px;
  1782. }
  1783. [dir="rtl"] #toolbarSidebar .splitToolbarButton > .toolbarButton {
  1784. margin-left: 2px;
  1785. }
  1786. #toolbarSidebar .splitToolbarButton > .toolbarButton {
  1787. -webkit-margin-end: 2px;
  1788. margin-inline-end: 2px;
  1789. }
  1790. [dir="ltr"] .splitToolbarButtonSeparator {
  1791. float: left;
  1792. }
  1793. [dir="rtl"] .splitToolbarButtonSeparator {
  1794. float: right;
  1795. }
  1796. .splitToolbarButtonSeparator {
  1797. float: inline-start;
  1798. margin: 4px 0;
  1799. width: 1px;
  1800. height: 20px;
  1801. background-color: var(--separator-color);
  1802. }
  1803. .toolbarButton,
  1804. .dropdownToolbarButton,
  1805. .secondaryToolbarButton,
  1806. .dialogButton {
  1807. min-width: 16px;
  1808. margin: 2px 1px;
  1809. padding: 2px 6px 0;
  1810. border: none;
  1811. border-radius: 2px;
  1812. color: var(--main-color);
  1813. font-size: 12px;
  1814. line-height: 14px;
  1815. -webkit-user-select: none;
  1816. -moz-user-select: none;
  1817. user-select: none;
  1818. cursor: default;
  1819. box-sizing: border-box;
  1820. }
  1821. .toolbarButton:hover,
  1822. .toolbarButton:focus-visible {
  1823. background-color: var(--button-hover-color);
  1824. }
  1825. .secondaryToolbarButton:hover,
  1826. .secondaryToolbarButton:focus-visible {
  1827. background-color: var(--doorhanger-hover-bg-color);
  1828. color: var(--doorhanger-hover-color);
  1829. }
  1830. .toolbarButton.toggled,
  1831. .splitToolbarButton.toggled > .toolbarButton.toggled,
  1832. .secondaryToolbarButton.toggled {
  1833. background-color: var(--toggled-btn-bg-color);
  1834. color: var(--toggled-btn-color);
  1835. }
  1836. .toolbarButton.toggled::before,
  1837. .secondaryToolbarButton.toggled::before {
  1838. background-color: var(--toggled-btn-color);
  1839. }
  1840. .toolbarButton.toggled:hover:active,
  1841. .splitToolbarButton.toggled > .toolbarButton.toggled:hover:active,
  1842. .secondaryToolbarButton.toggled:hover:active {
  1843. background-color: var(--toggled-hover-active-btn-color);
  1844. }
  1845. .dropdownToolbarButton {
  1846. width: var(--scale-select-width);
  1847. padding: 0;
  1848. background-color: var(--dropdown-btn-bg-color);
  1849. border: var(--dropdown-btn-border);
  1850. }
  1851. [dir="ltr"] .dropdownToolbarButton::after {
  1852. right: 6px;
  1853. }
  1854. [dir="rtl"] .dropdownToolbarButton::after {
  1855. left: 6px;
  1856. }
  1857. .dropdownToolbarButton::after {
  1858. top: 6px;
  1859. inset-inline-end: 6px;
  1860. pointer-events: none;
  1861. -webkit-mask-image: var(--toolbarButton-menuArrow-icon);
  1862. mask-image: var(--toolbarButton-menuArrow-icon);
  1863. }
  1864. [dir="ltr"] .dropdownToolbarButton > select {
  1865. padding-left: 6px;
  1866. }
  1867. [dir="rtl"] .dropdownToolbarButton > select {
  1868. padding-right: 6px;
  1869. }
  1870. .dropdownToolbarButton > select {
  1871. -webkit-appearance: none;
  1872. -moz-appearance: none;
  1873. appearance: none;
  1874. width: inherit;
  1875. height: 28px;
  1876. font-size: 12px;
  1877. color: var(--main-color);
  1878. margin: 0;
  1879. padding: 1px 0 2px;
  1880. -webkit-padding-start: 6px;
  1881. padding-inline-start: 6px;
  1882. border: none;
  1883. background-color: var(--dropdown-btn-bg-color);
  1884. }
  1885. .dropdownToolbarButton > select:hover,
  1886. .dropdownToolbarButton > select:focus-visible {
  1887. background-color: var(--button-hover-color);
  1888. color: var(--toggled-btn-color);
  1889. }
  1890. .dropdownToolbarButton > select > option {
  1891. background: var(--doorhanger-bg-color);
  1892. color: var(--main-color);
  1893. }
  1894. .toolbarButtonSpacer {
  1895. width: 30px;
  1896. display: inline-block;
  1897. height: 1px;
  1898. }
  1899. .toolbarButton::before,
  1900. .secondaryToolbarButton::before,
  1901. .dropdownToolbarButton::after,
  1902. .treeItemToggler::before {
  1903. /* All matching images have a size of 16x16
  1904. * All relevant containers have a size of 28x28 */
  1905. position: absolute;
  1906. display: inline-block;
  1907. width: 16px;
  1908. height: 16px;
  1909. content: "";
  1910. background-color: var(--toolbar-icon-bg-color);
  1911. -webkit-mask-size: cover;
  1912. mask-size: cover;
  1913. }
  1914. .dropdownToolbarButton:hover::after,
  1915. .dropdownToolbarButton:focus-visible::after,
  1916. .dropdownToolbarButton:active::after {
  1917. background-color: var(--toolbar-icon-hover-bg-color);
  1918. }
  1919. .toolbarButton::before {
  1920. opacity: var(--toolbar-icon-opacity);
  1921. top: 6px;
  1922. left: 6px;
  1923. }
  1924. .toolbarButton:hover::before,
  1925. .toolbarButton:focus-visible::before,
  1926. .secondaryToolbarButton:hover::before,
  1927. .secondaryToolbarButton:focus-visible::before {
  1928. background-color: var(--toolbar-icon-hover-bg-color);
  1929. }
  1930. [dir="ltr"] .secondaryToolbarButton::before {
  1931. left: 12px;
  1932. }
  1933. [dir="rtl"] .secondaryToolbarButton::before {
  1934. right: 12px;
  1935. }
  1936. .secondaryToolbarButton::before {
  1937. opacity: var(--doorhanger-icon-opacity);
  1938. top: 5px;
  1939. inset-inline-start: 12px;
  1940. }
  1941. #sidebarToggle::before {
  1942. -webkit-mask-image: var(--toolbarButton-sidebarToggle-icon);
  1943. mask-image: var(--toolbarButton-sidebarToggle-icon);
  1944. transform: scaleX(var(--dir-factor));
  1945. }
  1946. #secondaryToolbarToggle::before {
  1947. -webkit-mask-image: var(--toolbarButton-secondaryToolbarToggle-icon);
  1948. mask-image: var(--toolbarButton-secondaryToolbarToggle-icon);
  1949. transform: scaleX(var(--dir-factor));
  1950. }
  1951. #findPrevious::before {
  1952. -webkit-mask-image: var(--findbarButton-previous-icon);
  1953. mask-image: var(--findbarButton-previous-icon);
  1954. }
  1955. #findNext::before {
  1956. -webkit-mask-image: var(--findbarButton-next-icon);
  1957. mask-image: var(--findbarButton-next-icon);
  1958. }
  1959. #previous::before {
  1960. -webkit-mask-image: var(--toolbarButton-pageUp-icon);
  1961. mask-image: var(--toolbarButton-pageUp-icon);
  1962. }
  1963. #next::before {
  1964. -webkit-mask-image: var(--toolbarButton-pageDown-icon);
  1965. mask-image: var(--toolbarButton-pageDown-icon);
  1966. }
  1967. #zoomOut::before {
  1968. -webkit-mask-image: var(--toolbarButton-zoomOut-icon);
  1969. mask-image: var(--toolbarButton-zoomOut-icon);
  1970. }
  1971. #zoomIn::before {
  1972. -webkit-mask-image: var(--toolbarButton-zoomIn-icon);
  1973. mask-image: var(--toolbarButton-zoomIn-icon);
  1974. }
  1975. #presentationMode::before {
  1976. -webkit-mask-image: var(--toolbarButton-presentationMode-icon);
  1977. mask-image: var(--toolbarButton-presentationMode-icon);
  1978. }
  1979. #editorFreeText::before {
  1980. -webkit-mask-image: var(--toolbarButton-editorFreeText-icon);
  1981. mask-image: var(--toolbarButton-editorFreeText-icon);
  1982. }
  1983. #editorInk::before {
  1984. -webkit-mask-image: var(--toolbarButton-editorInk-icon);
  1985. mask-image: var(--toolbarButton-editorInk-icon);
  1986. }
  1987. #print::before,
  1988. #secondaryPrint::before {
  1989. -webkit-mask-image: var(--toolbarButton-print-icon);
  1990. mask-image: var(--toolbarButton-print-icon);
  1991. }
  1992. #openFile::before,
  1993. #secondaryOpenFile::before {
  1994. -webkit-mask-image: var(--toolbarButton-openFile-icon);
  1995. mask-image: var(--toolbarButton-openFile-icon);
  1996. }
  1997. #download::before,
  1998. #secondaryDownload::before {
  1999. -webkit-mask-image: var(--toolbarButton-download-icon);
  2000. mask-image: var(--toolbarButton-download-icon);
  2001. }
  2002. a.secondaryToolbarButton {
  2003. padding-top: 5px;
  2004. text-decoration: none;
  2005. }
  2006. a.toolbarButton[href="#"],
  2007. a.secondaryToolbarButton[href="#"] {
  2008. opacity: 0.5;
  2009. pointer-events: none;
  2010. }
  2011. #viewBookmark::before {
  2012. -webkit-mask-image: var(--toolbarButton-bookmark-icon);
  2013. mask-image: var(--toolbarButton-bookmark-icon);
  2014. }
  2015. #viewThumbnail::before {
  2016. -webkit-mask-image: var(--toolbarButton-viewThumbnail-icon);
  2017. mask-image: var(--toolbarButton-viewThumbnail-icon);
  2018. }
  2019. #viewOutline::before {
  2020. -webkit-mask-image: var(--toolbarButton-viewOutline-icon);
  2021. mask-image: var(--toolbarButton-viewOutline-icon);
  2022. transform: scaleX(var(--dir-factor));
  2023. }
  2024. #viewAttachments::before {
  2025. -webkit-mask-image: var(--toolbarButton-viewAttachments-icon);
  2026. mask-image: var(--toolbarButton-viewAttachments-icon);
  2027. }
  2028. #viewLayers::before {
  2029. -webkit-mask-image: var(--toolbarButton-viewLayers-icon);
  2030. mask-image: var(--toolbarButton-viewLayers-icon);
  2031. }
  2032. #currentOutlineItem::before {
  2033. -webkit-mask-image: var(--toolbarButton-currentOutlineItem-icon);
  2034. mask-image: var(--toolbarButton-currentOutlineItem-icon);
  2035. transform: scaleX(var(--dir-factor));
  2036. }
  2037. #viewFind::before {
  2038. -webkit-mask-image: var(--toolbarButton-search-icon);
  2039. mask-image: var(--toolbarButton-search-icon);
  2040. }
  2041. [dir="ltr"] .pdfSidebarNotification::after {
  2042. right: 2px;
  2043. }
  2044. [dir="rtl"] .pdfSidebarNotification::after {
  2045. left: 2px;
  2046. }
  2047. .pdfSidebarNotification::after {
  2048. position: absolute;
  2049. display: inline-block;
  2050. top: 2px;
  2051. inset-inline-end: 2px;
  2052. /* Create a filled circle, with a diameter of 9 pixels, using only CSS: */
  2053. content: "";
  2054. background-color: rgba(112, 219, 85, 1);
  2055. height: 9px;
  2056. width: 9px;
  2057. border-radius: 50%;
  2058. }
  2059. [dir="ltr"] .secondaryToolbarButton {
  2060. padding-left: 36px;
  2061. }
  2062. [dir="rtl"] .secondaryToolbarButton {
  2063. padding-right: 36px;
  2064. }
  2065. [dir="ltr"] .secondaryToolbarButton {
  2066. text-align: left;
  2067. }
  2068. [dir="rtl"] .secondaryToolbarButton {
  2069. text-align: right;
  2070. }
  2071. .secondaryToolbarButton {
  2072. position: relative;
  2073. margin: 0;
  2074. padding: 0 0 1px;
  2075. -webkit-padding-start: 36px;
  2076. padding-inline-start: 36px;
  2077. height: auto;
  2078. min-height: 26px;
  2079. width: auto;
  2080. min-width: 100%;
  2081. text-align: start;
  2082. white-space: normal;
  2083. border-radius: 0;
  2084. box-sizing: border-box;
  2085. display: inline-block;
  2086. }
  2087. [dir="ltr"] .secondaryToolbarButton > span {
  2088. padding-right: 4px;
  2089. }
  2090. [dir="rtl"] .secondaryToolbarButton > span {
  2091. padding-left: 4px;
  2092. }
  2093. .secondaryToolbarButton > span {
  2094. -webkit-padding-end: 4px;
  2095. padding-inline-end: 4px;
  2096. }
  2097. #firstPage::before {
  2098. -webkit-mask-image: var(--secondaryToolbarButton-firstPage-icon);
  2099. mask-image: var(--secondaryToolbarButton-firstPage-icon);
  2100. }
  2101. #lastPage::before {
  2102. -webkit-mask-image: var(--secondaryToolbarButton-lastPage-icon);
  2103. mask-image: var(--secondaryToolbarButton-lastPage-icon);
  2104. }
  2105. #pageRotateCcw::before {
  2106. -webkit-mask-image: var(--secondaryToolbarButton-rotateCcw-icon);
  2107. mask-image: var(--secondaryToolbarButton-rotateCcw-icon);
  2108. }
  2109. #pageRotateCw::before {
  2110. -webkit-mask-image: var(--secondaryToolbarButton-rotateCw-icon);
  2111. mask-image: var(--secondaryToolbarButton-rotateCw-icon);
  2112. }
  2113. #cursorSelectTool::before {
  2114. -webkit-mask-image: var(--secondaryToolbarButton-selectTool-icon);
  2115. mask-image: var(--secondaryToolbarButton-selectTool-icon);
  2116. }
  2117. #cursorHandTool::before {
  2118. -webkit-mask-image: var(--secondaryToolbarButton-handTool-icon);
  2119. mask-image: var(--secondaryToolbarButton-handTool-icon);
  2120. }
  2121. #scrollPage::before {
  2122. -webkit-mask-image: var(--secondaryToolbarButton-scrollPage-icon);
  2123. mask-image: var(--secondaryToolbarButton-scrollPage-icon);
  2124. }
  2125. #scrollVertical::before {
  2126. -webkit-mask-image: var(--secondaryToolbarButton-scrollVertical-icon);
  2127. mask-image: var(--secondaryToolbarButton-scrollVertical-icon);
  2128. }
  2129. #scrollHorizontal::before {
  2130. -webkit-mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon);
  2131. mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon);
  2132. }
  2133. #scrollWrapped::before {
  2134. -webkit-mask-image: var(--secondaryToolbarButton-scrollWrapped-icon);
  2135. mask-image: var(--secondaryToolbarButton-scrollWrapped-icon);
  2136. }
  2137. #spreadNone::before {
  2138. -webkit-mask-image: var(--secondaryToolbarButton-spreadNone-icon);
  2139. mask-image: var(--secondaryToolbarButton-spreadNone-icon);
  2140. }
  2141. #spreadOdd::before {
  2142. -webkit-mask-image: var(--secondaryToolbarButton-spreadOdd-icon);
  2143. mask-image: var(--secondaryToolbarButton-spreadOdd-icon);
  2144. }
  2145. #spreadEven::before {
  2146. -webkit-mask-image: var(--secondaryToolbarButton-spreadEven-icon);
  2147. mask-image: var(--secondaryToolbarButton-spreadEven-icon);
  2148. }
  2149. #documentProperties::before {
  2150. -webkit-mask-image: var(--secondaryToolbarButton-documentProperties-icon);
  2151. mask-image: var(--secondaryToolbarButton-documentProperties-icon);
  2152. }
  2153. .verticalToolbarSeparator {
  2154. display: block;
  2155. margin: 5px 2px;
  2156. width: 1px;
  2157. height: 22px;
  2158. background-color: var(--separator-color);
  2159. }
  2160. .horizontalToolbarSeparator {
  2161. display: block;
  2162. margin: 6px 0;
  2163. height: 1px;
  2164. width: 100%;
  2165. background-color: var(--doorhanger-separator-color);
  2166. }
  2167. .toolbarField {
  2168. padding: 4px 7px;
  2169. margin: 3px 0;
  2170. border-radius: 2px;
  2171. background-color: var(--field-bg-color);
  2172. background-clip: padding-box;
  2173. border: 1px solid var(--field-border-color);
  2174. box-shadow: none;
  2175. color: var(--field-color);
  2176. font-size: 12px;
  2177. line-height: 16px;
  2178. outline: none;
  2179. }
  2180. [dir="ltr"] .toolbarField[type="checkbox"] {
  2181. margin-left: 7px;
  2182. }
  2183. [dir="rtl"] .toolbarField[type="checkbox"] {
  2184. margin-right: 7px;
  2185. }
  2186. .toolbarField[type="checkbox"] {
  2187. opacity: 0;
  2188. position: absolute !important;
  2189. left: 0;
  2190. margin: 10px 0 3px;
  2191. -webkit-margin-start: 7px;
  2192. margin-inline-start: 7px;
  2193. }
  2194. #pageNumber {
  2195. -moz-appearance: textfield; /* hides the spinner in moz */
  2196. text-align: right;
  2197. width: 40px;
  2198. }
  2199. #pageNumber.visiblePageIsLoading {
  2200. background-image: var(--loading-icon);
  2201. background-repeat: no-repeat;
  2202. background-position: 3px;
  2203. }
  2204. #pageNumber::-webkit-inner-spin-button {
  2205. -webkit-appearance: none;
  2206. }
  2207. .toolbarField:focus {
  2208. border-color: #0a84ff;
  2209. }
  2210. .toolbarLabel {
  2211. min-width: 16px;
  2212. padding: 7px;
  2213. margin: 2px;
  2214. border-radius: 2px;
  2215. color: var(--main-color);
  2216. font-size: 12px;
  2217. line-height: 14px;
  2218. text-align: left;
  2219. -webkit-user-select: none;
  2220. -moz-user-select: none;
  2221. user-select: none;
  2222. cursor: default;
  2223. }
  2224. [dir="ltr"] #numPages.toolbarLabel {
  2225. padding-left: 3px;
  2226. }
  2227. [dir="rtl"] #numPages.toolbarLabel {
  2228. padding-right: 3px;
  2229. }
  2230. #numPages.toolbarLabel {
  2231. -webkit-padding-start: 3px;
  2232. padding-inline-start: 3px;
  2233. }
  2234. #thumbnailView,
  2235. #outlineView,
  2236. #attachmentsView,
  2237. #layersView {
  2238. position: absolute;
  2239. width: calc(100% - 8px);
  2240. top: 0;
  2241. bottom: 0;
  2242. padding: 4px 4px 0;
  2243. overflow: auto;
  2244. -webkit-user-select: none;
  2245. -moz-user-select: none;
  2246. user-select: none;
  2247. }
  2248. #thumbnailView {
  2249. width: calc(100% - 60px);
  2250. padding: 10px 30px 0;
  2251. }
  2252. #thumbnailView > a:active,
  2253. #thumbnailView > a:focus {
  2254. outline: 0;
  2255. }
  2256. [dir="ltr"] .thumbnail {
  2257. float: left;
  2258. }
  2259. [dir="rtl"] .thumbnail {
  2260. float: right;
  2261. }
  2262. .thumbnail {
  2263. float: inline-start;
  2264. margin: 0 10px 5px;
  2265. }
  2266. #thumbnailView > a:last-of-type > .thumbnail {
  2267. margin-bottom: 10px;
  2268. }
  2269. #thumbnailView > a:last-of-type > .thumbnail:not([data-loaded]) {
  2270. margin-bottom: 9px;
  2271. }
  2272. .thumbnail:not([data-loaded]) {
  2273. border: 1px dashed rgba(132, 132, 132, 1);
  2274. margin: -1px 9px 4px;
  2275. }
  2276. .thumbnailImage {
  2277. border: 1px solid rgba(0, 0, 0, 0);
  2278. box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  2279. opacity: 0.8;
  2280. z-index: 99;
  2281. background-color: rgba(255, 255, 255, 1);
  2282. background-clip: content-box;
  2283. }
  2284. .thumbnailSelectionRing {
  2285. border-radius: 2px;
  2286. padding: 7px;
  2287. }
  2288. a:focus > .thumbnail > .thumbnailSelectionRing > .thumbnailImage,
  2289. .thumbnail:hover > .thumbnailSelectionRing > .thumbnailImage {
  2290. opacity: 0.9;
  2291. }
  2292. a:focus > .thumbnail > .thumbnailSelectionRing,
  2293. .thumbnail:hover > .thumbnailSelectionRing {
  2294. background-color: var(--sidebaritem-bg-color);
  2295. background-clip: padding-box;
  2296. color: rgba(255, 255, 255, 0.9);
  2297. }
  2298. .thumbnail.selected > .thumbnailSelectionRing > .thumbnailImage {
  2299. opacity: 1;
  2300. }
  2301. .thumbnail.selected > .thumbnailSelectionRing {
  2302. background-color: var(--sidebaritem-bg-color);
  2303. background-clip: padding-box;
  2304. color: rgba(255, 255, 255, 1);
  2305. }
  2306. [dir="ltr"] .treeWithDeepNesting > .treeItem,[dir="ltr"]
  2307. .treeItem > .treeItems {
  2308. margin-left: 20px;
  2309. }
  2310. [dir="rtl"] .treeWithDeepNesting > .treeItem,[dir="rtl"]
  2311. .treeItem > .treeItems {
  2312. margin-right: 20px;
  2313. }
  2314. .treeWithDeepNesting > .treeItem,
  2315. .treeItem > .treeItems {
  2316. -webkit-margin-start: 20px;
  2317. margin-inline-start: 20px;
  2318. }
  2319. [dir="ltr"] .treeItem > a {
  2320. padding-left: 4px;
  2321. }
  2322. [dir="rtl"] .treeItem > a {
  2323. padding-right: 4px;
  2324. }
  2325. .treeItem > a {
  2326. text-decoration: none;
  2327. display: inline-block;
  2328. /* Subtract the right padding (left, in RTL mode) of the container: */
  2329. min-width: calc(100% - 4px);
  2330. height: auto;
  2331. margin-bottom: 1px;
  2332. padding: 2px 0 5px;
  2333. -webkit-padding-start: 4px;
  2334. padding-inline-start: 4px;
  2335. border-radius: 2px;
  2336. color: var(--treeitem-color);
  2337. font-size: 13px;
  2338. line-height: 15px;
  2339. -webkit-user-select: none;
  2340. -moz-user-select: none;
  2341. user-select: none;
  2342. white-space: normal;
  2343. cursor: pointer;
  2344. }
  2345. #layersView .treeItem > a * {
  2346. cursor: pointer;
  2347. }
  2348. [dir="ltr"] #layersView .treeItem > a > label {
  2349. padding-left: 4px;
  2350. }
  2351. [dir="rtl"] #layersView .treeItem > a > label {
  2352. padding-right: 4px;
  2353. }
  2354. #layersView .treeItem > a > label {
  2355. -webkit-padding-start: 4px;
  2356. padding-inline-start: 4px;
  2357. }
  2358. [dir="ltr"] #layersView .treeItem > a > label > input {
  2359. float: left;
  2360. }
  2361. [dir="rtl"] #layersView .treeItem > a > label > input {
  2362. float: right;
  2363. }
  2364. #layersView .treeItem > a > label > input {
  2365. float: inline-start;
  2366. margin-top: 1px;
  2367. }
  2368. [dir="ltr"] .treeItemToggler {
  2369. float: left;
  2370. }
  2371. [dir="rtl"] .treeItemToggler {
  2372. float: right;
  2373. }
  2374. .treeItemToggler {
  2375. position: relative;
  2376. float: inline-start;
  2377. height: 0;
  2378. width: 0;
  2379. color: rgba(255, 255, 255, 0.5);
  2380. }
  2381. [dir="ltr"] .treeItemToggler::before {
  2382. right: 4px;
  2383. }
  2384. [dir="rtl"] .treeItemToggler::before {
  2385. left: 4px;
  2386. }
  2387. .treeItemToggler::before {
  2388. inset-inline-end: 4px;
  2389. -webkit-mask-image: var(--treeitem-expanded-icon);
  2390. mask-image: var(--treeitem-expanded-icon);
  2391. }
  2392. .treeItemToggler.treeItemsHidden::before {
  2393. -webkit-mask-image: var(--treeitem-collapsed-icon);
  2394. mask-image: var(--treeitem-collapsed-icon);
  2395. transform: scaleX(var(--dir-factor));
  2396. }
  2397. .treeItemToggler.treeItemsHidden ~ .treeItems {
  2398. display: none;
  2399. }
  2400. .treeItem.selected > a {
  2401. background-color: var(--treeitem-selected-bg-color);
  2402. color: var(--treeitem-selected-color);
  2403. }
  2404. .treeItemToggler:hover,
  2405. .treeItemToggler:hover + a,
  2406. .treeItemToggler:hover ~ .treeItems,
  2407. .treeItem > a:hover {
  2408. background-color: var(--sidebaritem-bg-color);
  2409. background-clip: padding-box;
  2410. border-radius: 2px;
  2411. color: var(--treeitem-hover-color);
  2412. }
  2413. .dialogButton {
  2414. width: auto;
  2415. margin: 3px 4px 2px !important;
  2416. padding: 2px 11px;
  2417. color: var(--main-color);
  2418. background-color: var(--dialog-button-bg-color);
  2419. border: var(--dialog-button-border) !important;
  2420. }
  2421. dialog {
  2422. margin: auto;
  2423. padding: 15px;
  2424. border-spacing: 4px;
  2425. color: var(--main-color);
  2426. font: message-box;
  2427. font-size: 12px;
  2428. line-height: 14px;
  2429. background-color: var(--doorhanger-bg-color);
  2430. border: 1px solid rgba(0, 0, 0, 0.5);
  2431. border-radius: 4px;
  2432. box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  2433. }
  2434. dialog::-webkit-backdrop {
  2435. background-color: rgba(0, 0, 0, 0.2);
  2436. }
  2437. dialog::backdrop {
  2438. background-color: rgba(0, 0, 0, 0.2);
  2439. }
  2440. dialog > .row {
  2441. display: table-row;
  2442. }
  2443. dialog > .row > * {
  2444. display: table-cell;
  2445. }
  2446. dialog .toolbarField {
  2447. margin: 5px 0;
  2448. }
  2449. dialog .separator {
  2450. display: block;
  2451. margin: 4px 0;
  2452. height: 1px;
  2453. width: 100%;
  2454. background-color: var(--separator-color);
  2455. }
  2456. dialog .buttonRow {
  2457. text-align: center;
  2458. vertical-align: middle;
  2459. }
  2460. dialog :link {
  2461. color: rgba(255, 255, 255, 1);
  2462. }
  2463. #passwordDialog {
  2464. text-align: center;
  2465. }
  2466. #passwordDialog .toolbarField {
  2467. width: 200px;
  2468. }
  2469. #documentPropertiesDialog {
  2470. text-align: left;
  2471. }
  2472. [dir="ltr"] #documentPropertiesDialog .row > * {
  2473. text-align: left;
  2474. }
  2475. [dir="rtl"] #documentPropertiesDialog .row > * {
  2476. text-align: right;
  2477. }
  2478. #documentPropertiesDialog .row > * {
  2479. min-width: 100px;
  2480. text-align: start;
  2481. }
  2482. #documentPropertiesDialog .row > span {
  2483. width: 125px;
  2484. word-wrap: break-word;
  2485. }
  2486. #documentPropertiesDialog .row > p {
  2487. max-width: 225px;
  2488. word-wrap: break-word;
  2489. }
  2490. #documentPropertiesDialog .buttonRow {
  2491. margin-top: 10px;
  2492. }
  2493. .grab-to-pan-grab {
  2494. cursor: grab !important;
  2495. }
  2496. .grab-to-pan-grab
  2497. *:not(input):not(textarea):not(button):not(select):not(:link) {
  2498. cursor: inherit !important;
  2499. }
  2500. .grab-to-pan-grab:active,
  2501. .grab-to-pan-grabbing {
  2502. cursor: grabbing !important;
  2503. position: fixed;
  2504. background: rgba(0, 0, 0, 0);
  2505. display: block;
  2506. top: 0;
  2507. left: 0;
  2508. right: 0;
  2509. bottom: 0;
  2510. overflow: hidden;
  2511. z-index: 50000; /* should be higher than anything else in PDF.js! */
  2512. }
  2513. @page {
  2514. margin: 0;
  2515. }
  2516. #printContainer {
  2517. display: none;
  2518. }
  2519. @media print {
  2520. body {
  2521. background: rgba(0, 0, 0, 0) none;
  2522. }
  2523. body[data-pdfjsprinting] #outerContainer {
  2524. display: none;
  2525. }
  2526. body[data-pdfjsprinting] #printContainer {
  2527. display: block;
  2528. }
  2529. #printContainer {
  2530. height: 100%;
  2531. }
  2532. /* wrapper around (scaled) print canvas elements */
  2533. #printContainer > .printedPage {
  2534. page-break-after: always;
  2535. page-break-inside: avoid;
  2536. /* The wrapper always cover the whole page. */
  2537. height: 100%;
  2538. width: 100%;
  2539. display: flex;
  2540. flex-direction: column;
  2541. justify-content: center;
  2542. align-items: center;
  2543. }
  2544. #printContainer > .xfaPrintedPage .xfaPage {
  2545. position: absolute;
  2546. }
  2547. #printContainer > .xfaPrintedPage {
  2548. page-break-after: always;
  2549. page-break-inside: avoid;
  2550. width: 100%;
  2551. height: 100%;
  2552. position: relative;
  2553. }
  2554. #printContainer > .printedPage canvas,
  2555. #printContainer > .printedPage img {
  2556. /* The intrinsic canvas / image size will make sure that we fit the page. */
  2557. max-width: 100%;
  2558. max-height: 100%;
  2559. direction: ltr;
  2560. display: block;
  2561. }
  2562. }
  2563. .visibleLargeView,
  2564. .visibleMediumView {
  2565. display: none;
  2566. }
  2567. @media all and (max-width: 900px) {
  2568. #toolbarViewerMiddle {
  2569. display: table;
  2570. margin: auto;
  2571. left: auto;
  2572. position: inherit;
  2573. transform: none;
  2574. }
  2575. }
  2576. @media all and (max-width: 840px) {
  2577. #sidebarContainer {
  2578. background-color: var(--sidebar-narrow-bg-color);
  2579. }
  2580. [dir="ltr"] #outerContainer.sidebarOpen #viewerContainer {
  2581. left: 0 !important;
  2582. }
  2583. [dir="rtl"] #outerContainer.sidebarOpen #viewerContainer {
  2584. right: 0 !important;
  2585. }
  2586. #outerContainer.sidebarOpen #viewerContainer {
  2587. inset-inline-start: 0 !important;
  2588. }
  2589. }
  2590. @media all and (max-width: 820px) {
  2591. #outerContainer .hiddenLargeView {
  2592. display: none;
  2593. }
  2594. #outerContainer .visibleLargeView {
  2595. display: inherit;
  2596. }
  2597. }
  2598. @media all and (max-width: 750px) {
  2599. #outerContainer .hiddenMediumView {
  2600. display: none;
  2601. }
  2602. #outerContainer .visibleMediumView {
  2603. display: inherit;
  2604. }
  2605. }
  2606. @media all and (max-width: 690px) {
  2607. .hiddenSmallView,
  2608. .hiddenSmallView * {
  2609. display: none;
  2610. }
  2611. .toolbarButtonSpacer {
  2612. width: 0;
  2613. }
  2614. [dir="ltr"] .findbar {
  2615. left: 34px;
  2616. }
  2617. [dir="rtl"] .findbar {
  2618. right: 34px;
  2619. }
  2620. .findbar {
  2621. inset-inline-start: 34px;
  2622. }
  2623. }
  2624. @media all and (max-width: 560px) {
  2625. #scaleSelectContainer {
  2626. display: none;
  2627. }
  2628. }