viewer.css 93 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691369236933694369536963697369836993700370137023703370437053706370737083709371037113712371337143715371637173718371937203721372237233724372537263727372837293730373137323733373437353736373737383739374037413742374337443745374637473748374937503751375237533754375537563757375837593760376137623763376437653766376737683769377037713772377337743775377637773778377937803781378237833784378537863787378837893790379137923793379437953796379737983799380038013802380338043805380638073808380938103811381238133814381538163817381838193820382138223823382438253826382738283829383038313832383338343835383638373838383938403841
  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. left: 0;
  18. top: 0;
  19. right: 0;
  20. bottom: 0;
  21. overflow: hidden;
  22. opacity: 0.2;
  23. line-height: 1;
  24. }
  25. .textLayer > span {
  26. color: transparent;
  27. position: absolute;
  28. white-space: pre;
  29. cursor: text;
  30. transform-origin: 0% 0%;
  31. }
  32. .textLayer .highlight {
  33. margin: -1px;
  34. padding: 1px;
  35. background-color: rgba(180, 0, 170, 1);
  36. border-radius: 4px;
  37. }
  38. .textLayer .highlight.begin {
  39. border-radius: 4px 0 0 4px;
  40. }
  41. .textLayer .highlight.end {
  42. border-radius: 0 4px 4px 0;
  43. }
  44. .textLayer .highlight.middle {
  45. border-radius: 0;
  46. }
  47. .textLayer .highlight.selected {
  48. background-color: rgba(0, 100, 0, 1);
  49. }
  50. .textLayer ::-moz-selection {
  51. background: rgba(0, 0, 255, 1);
  52. }
  53. .textLayer ::selection {
  54. background: rgba(0, 0, 255, 1);
  55. }
  56. .textLayer .endOfContent {
  57. display: block;
  58. position: absolute;
  59. left: 0;
  60. top: 100%;
  61. right: 0;
  62. bottom: 0;
  63. z-index: -1;
  64. cursor: default;
  65. -webkit-user-select: none;
  66. -moz-user-select: none;
  67. -ms-user-select: none;
  68. user-select: none;
  69. }
  70. .textLayer .endOfContent.active {
  71. top: 0;
  72. }
  73. .annotationLayer section {
  74. position: absolute;
  75. text-align: initial;
  76. }
  77. .annotationLayer .linkAnnotation > a,
  78. .annotationLayer .buttonWidgetAnnotation.pushButton > a {
  79. position: absolute;
  80. font-size: 1em;
  81. top: 0;
  82. left: 0;
  83. width: 100%;
  84. height: 100%;
  85. }
  86. .annotationLayer .linkAnnotation > a:hover,
  87. .annotationLayer .buttonWidgetAnnotation.pushButton > a:hover {
  88. opacity: 0.2;
  89. background: rgba(255, 255, 0, 1);
  90. box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
  91. }
  92. .annotationLayer .textAnnotation img {
  93. position: absolute;
  94. cursor: pointer;
  95. }
  96. .annotationLayer .textWidgetAnnotation input,
  97. .annotationLayer .textWidgetAnnotation textarea,
  98. .annotationLayer .choiceWidgetAnnotation select,
  99. .annotationLayer .buttonWidgetAnnotation.checkBox input,
  100. .annotationLayer .buttonWidgetAnnotation.radioButton input {
  101. background-color: rgba(0, 54, 255, 0.13);
  102. border: 1px solid transparent;
  103. box-sizing: border-box;
  104. font-size: 9px;
  105. height: 100%;
  106. margin: 0;
  107. padding: 0 3px;
  108. vertical-align: top;
  109. width: 100%;
  110. }
  111. .annotationLayer .choiceWidgetAnnotation select option {
  112. padding: 0;
  113. }
  114. .annotationLayer .buttonWidgetAnnotation.radioButton input {
  115. border-radius: 50%;
  116. }
  117. .annotationLayer .textWidgetAnnotation textarea {
  118. font: message-box;
  119. font-size: 9px;
  120. resize: none;
  121. }
  122. .annotationLayer .textWidgetAnnotation input[disabled],
  123. .annotationLayer .textWidgetAnnotation textarea[disabled],
  124. .annotationLayer .choiceWidgetAnnotation select[disabled],
  125. .annotationLayer .buttonWidgetAnnotation.checkBox input[disabled],
  126. .annotationLayer .buttonWidgetAnnotation.radioButton input[disabled] {
  127. background: none;
  128. border: 1px solid transparent;
  129. cursor: not-allowed;
  130. }
  131. .annotationLayer .textWidgetAnnotation input:hover,
  132. .annotationLayer .textWidgetAnnotation textarea:hover,
  133. .annotationLayer .choiceWidgetAnnotation select:hover,
  134. .annotationLayer .buttonWidgetAnnotation.checkBox input:hover,
  135. .annotationLayer .buttonWidgetAnnotation.radioButton input:hover {
  136. border: 1px solid rgba(0, 0, 0, 1);
  137. }
  138. .annotationLayer .textWidgetAnnotation input:focus,
  139. .annotationLayer .textWidgetAnnotation textarea:focus,
  140. .annotationLayer .choiceWidgetAnnotation select:focus {
  141. background: none;
  142. border: 1px solid transparent;
  143. }
  144. .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,
  145. .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after,
  146. .annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before {
  147. background-color: rgba(0, 0, 0, 1);
  148. content: "";
  149. display: block;
  150. position: absolute;
  151. }
  152. .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,
  153. .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after {
  154. height: 80%;
  155. left: 45%;
  156. width: 1px;
  157. }
  158. .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before {
  159. transform: rotate(45deg);
  160. }
  161. .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after {
  162. transform: rotate(-45deg);
  163. }
  164. .annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before {
  165. border-radius: 50%;
  166. height: 50%;
  167. left: 30%;
  168. top: 20%;
  169. width: 50%;
  170. }
  171. .annotationLayer .textWidgetAnnotation input.comb {
  172. font-family: monospace;
  173. padding-left: 2px;
  174. padding-right: 0;
  175. }
  176. .annotationLayer .textWidgetAnnotation input.comb:focus {
  177. /*
  178. * Letter spacing is placed on the right side of each character. Hence, the
  179. * letter spacing of the last character may be placed outside the visible
  180. * area, causing horizontal scrolling. We avoid this by extending the width
  181. * when the element has focus and revert this when it loses focus.
  182. */
  183. width: 115%;
  184. }
  185. .annotationLayer .buttonWidgetAnnotation.checkBox input,
  186. .annotationLayer .buttonWidgetAnnotation.radioButton input {
  187. -webkit-appearance: none;
  188. -moz-appearance: none;
  189. appearance: none;
  190. padding: 0;
  191. }
  192. .annotationLayer .popupWrapper {
  193. position: absolute;
  194. width: 20em;
  195. }
  196. .annotationLayer .popup {
  197. position: absolute;
  198. z-index: 200;
  199. max-width: 20em;
  200. background-color: rgba(255, 255, 153, 1);
  201. box-shadow: 0 2px 5px rgba(136, 136, 136, 1);
  202. border-radius: 2px;
  203. padding: 6px;
  204. margin-left: 5px;
  205. cursor: pointer;
  206. font: message-box;
  207. font-size: 9px;
  208. white-space: normal;
  209. word-wrap: break-word;
  210. }
  211. .annotationLayer .popup > * {
  212. font-size: 9px;
  213. }
  214. .annotationLayer .popup h1 {
  215. display: inline-block;
  216. }
  217. .annotationLayer .popup span {
  218. display: inline-block;
  219. margin-left: 5px;
  220. }
  221. .annotationLayer .popup p {
  222. border-top: 1px solid rgba(51, 51, 51, 1);
  223. margin-top: 2px;
  224. padding-top: 2px;
  225. }
  226. .annotationLayer .highlightAnnotation,
  227. .annotationLayer .underlineAnnotation,
  228. .annotationLayer .squigglyAnnotation,
  229. .annotationLayer .strikeoutAnnotation,
  230. .annotationLayer .freeTextAnnotation,
  231. .annotationLayer .lineAnnotation svg line,
  232. .annotationLayer .squareAnnotation svg rect,
  233. .annotationLayer .circleAnnotation svg ellipse,
  234. .annotationLayer .polylineAnnotation svg polyline,
  235. .annotationLayer .polygonAnnotation svg polygon,
  236. .annotationLayer .caretAnnotation,
  237. .annotationLayer .inkAnnotation svg polyline,
  238. .annotationLayer .stampAnnotation,
  239. .annotationLayer .fileAttachmentAnnotation {
  240. cursor: pointer;
  241. }
  242. .pdfViewer .canvasWrapper {
  243. overflow: hidden;
  244. }
  245. .pdfViewer .page {
  246. direction: ltr;
  247. width: 816px;
  248. height: 1056px;
  249. margin: 0 auto -8px;
  250. position: relative;
  251. overflow: visible;
  252. /* border: 9px solid transparent; */
  253. /* background-clip: content-box;
  254. -o-border-image: url(images/shadow.png) 9 9 repeat;
  255. border-image: url(images/shadow.png) 9 9 repeat;
  256. background-color: rgba(255, 255, 255, 1); */
  257. }
  258. .pdfViewer.removePageBorders .page {
  259. margin: 0 auto 10px;
  260. border: none;
  261. }
  262. .pdfViewer.singlePageView {
  263. display: inline-block;
  264. }
  265. .pdfViewer.singlePageView .page {
  266. margin: 0;
  267. border: none;
  268. }
  269. .pdfViewer.scrollHorizontal,
  270. .pdfViewer.scrollWrapped,
  271. .spread {
  272. margin-left: 3.5px;
  273. margin-right: 3.5px;
  274. text-align: center;
  275. }
  276. .pdfViewer.scrollHorizontal,
  277. .spread {
  278. white-space: nowrap;
  279. }
  280. .pdfViewer.removePageBorders,
  281. .pdfViewer.scrollHorizontal .spread,
  282. .pdfViewer.scrollWrapped .spread {
  283. margin-left: 0;
  284. margin-right: 0;
  285. }
  286. .spread .page,
  287. .pdfViewer.scrollHorizontal .page,
  288. .pdfViewer.scrollWrapped .page,
  289. .pdfViewer.scrollHorizontal .spread,
  290. .pdfViewer.scrollWrapped .spread {
  291. display: inline-block;
  292. vertical-align: middle;
  293. }
  294. .spread .page,
  295. .pdfViewer.scrollHorizontal .page,
  296. .pdfViewer.scrollWrapped .page {
  297. margin-left: -3.5px;
  298. margin-right: -3.5px;
  299. }
  300. .pdfViewer.removePageBorders .spread .page,
  301. .pdfViewer.removePageBorders.scrollHorizontal .page,
  302. .pdfViewer.removePageBorders.scrollWrapped .page {
  303. margin-left: 5px;
  304. margin-right: 5px;
  305. }
  306. .pdfViewer .page canvas {
  307. margin: 0;
  308. display: block;
  309. }
  310. .pdfViewer .page canvas[hidden] {
  311. display: none;
  312. }
  313. .pdfViewer .page .loadingIcon {
  314. position: absolute;
  315. display: block;
  316. left: 0;
  317. top: 0;
  318. right: 0;
  319. bottom: 0;
  320. background: url("images/loading-icon.gif") center no-repeat;
  321. }
  322. .pdfPresentationMode .pdfViewer {
  323. margin-left: 0;
  324. margin-right: 0;
  325. }
  326. .pdfPresentationMode .pdfViewer .page,
  327. .pdfPresentationMode .pdfViewer .spread {
  328. display: block;
  329. }
  330. .pdfPresentationMode .pdfViewer .page,
  331. .pdfPresentationMode .pdfViewer.removePageBorders .page {
  332. margin-left: auto;
  333. margin-right: auto;
  334. }
  335. .pdfPresentationMode:-webkit-full-screen .pdfViewer .page {
  336. margin-bottom: 100%;
  337. border: 0;
  338. }
  339. .pdfPresentationMode:-moz-full-screen .pdfViewer .page {
  340. margin-bottom: 100%;
  341. border: 0;
  342. }
  343. .pdfPresentationMode:-ms-fullscreen .pdfViewer .page {
  344. margin-bottom: 100%;
  345. border: 0;
  346. }
  347. .pdfPresentationMode:fullscreen .pdfViewer .page {
  348. margin-bottom: 100%;
  349. border: 0;
  350. }
  351. :root {
  352. --sidebar-width: 200px;
  353. --sidebar-transition-duration: 200ms;
  354. --sidebar-transition-timing-function: ease;
  355. --loadingBar-end-offset: 0;
  356. --toolbar-icon-opacity: 0.7;
  357. --doorhanger-icon-opacity: 0.9;
  358. --main-color: rgba(12, 12, 13, 1);
  359. --body-bg-color: rgba(237, 237, 240, 1);
  360. --errorWrapper-bg-color: rgba(255, 74, 74, 1);
  361. --progressBar-color: rgba(10, 132, 255, 1);
  362. --progressBar-indeterminate-bg-color: rgba(221, 221, 222, 1);
  363. --progressBar-indeterminate-blend-color: rgba(116, 177, 239, 1);
  364. --scrollbar-color: auto;
  365. --scrollbar-bg-color: auto;
  366. --toolbar-icon-bg-color: rgba(0, 0, 0, 1);
  367. --sidebar-bg-color: rgba(245, 246, 247, 1);
  368. --toolbar-bg-color: rgba(249, 249, 250, 1);
  369. --toolbar-border-color: rgba(204, 204, 204, 1);
  370. --button-hover-color: rgba(221, 222, 223, 1);
  371. --toggled-btn-bg-color: rgba(0, 0, 0, 0.3);
  372. --toggled-hover-active-btn-color: rgba(0, 0, 0, 0.4);
  373. --dropdown-btn-bg-color: rgba(215, 215, 219, 1);
  374. --separator-color: rgba(0, 0, 0, 0.3);
  375. --field-color: rgba(6, 6, 6, 1);
  376. --field-bg-color: rgba(255, 255, 255, 1);
  377. --field-border-color: rgba(187, 187, 188, 1);
  378. --findbar-nextprevious-btn-bg-color: rgba(227, 228, 230, 1);
  379. --treeitem-color: rgba(0, 0, 0, 0.8);
  380. --treeitem-hover-color: rgba(0, 0, 0, 0.9);
  381. --treeitem-selected-color: rgba(0, 0, 0, 0.9);
  382. --treeitem-selected-bg-color: rgba(0, 0, 0, 0.25);
  383. --sidebaritem-bg-color: rgba(0, 0, 0, 0.15);
  384. --doorhanger-bg-color: rgba(255, 255, 255, 1);
  385. --doorhanger-border-color: rgba(12, 12, 13, 0.2);
  386. --doorhanger-hover-color: rgba(237, 237, 237, 1);
  387. --doorhanger-separator-color: rgba(222, 222, 222, 1);
  388. --overlay-button-bg-color: rgba(12, 12, 13, 0.1);
  389. --overlay-button-hover-color: rgba(12, 12, 13, 0.3);
  390. --loading-icon: url(images/loading.svg);
  391. /* --treeitem-expanded-icon: url(images/treeitem-expanded.svg);
  392. --treeitem-collapsed-icon: url(images/treeitem-collapsed.svg);
  393. --toolbarButton-menuArrow-icon: url(images/toolbarButton-menuArrow.svg);
  394. --toolbarButton-sidebarToggle-icon: url(images/toolbarButton-sidebarToggle.svg);
  395. --toolbarButton-secondaryToolbarToggle-icon: url(images/toolbarButton-secondaryToolbarToggle.svg);
  396. --toolbarButton-pageUp-icon: url(images/toolbarButton-pageUp.svg);
  397. --toolbarButton-pageDown-icon: url(images/toolbarButton-pageDown.svg);
  398. --toolbarButton-zoomOut-icon: url(images/toolbarButton-zoomOut.svg);
  399. --toolbarButton-zoomIn-icon: url(images/toolbarButton-zoomIn.svg);
  400. --toolbarButton-presentationMode-icon: url(images/toolbarButton-presentationMode.svg);
  401. --toolbarButton-print-icon: url(images/toolbarButton-print.svg);
  402. --toolbarButton-openFile-icon: url(images/toolbarButton-openFile.svg);
  403. --toolbarButton-download-icon: url(images/toolbarButton-download.svg);
  404. --toolbarButton-bookmark-icon: url(images/toolbarButton-bookmark.svg);
  405. --toolbarButton-viewThumbnail-icon: url(images/toolbarButton-viewThumbnail.svg);
  406. --toolbarButton-viewOutline-icon: url(images/toolbarButton-viewOutline.svg);
  407. --toolbarButton-viewAttachments-icon: url(images/toolbarButton-viewAttachments.svg);
  408. --toolbarButton-viewLayers-icon: url(images/toolbarButton-viewLayers.svg);
  409. --toolbarButton-currentOutlineItem-icon: url(images/toolbarButton-currentOutlineItem.svg);
  410. --toolbarButton-search-icon: url(images/toolbarButton-search.svg);
  411. --findbarButton-previous-icon: url(images/findbarButton-previous.svg);
  412. --findbarButton-next-icon: url(images/findbarButton-next.svg);
  413. --secondaryToolbarButton-firstPage-icon: url(images/secondaryToolbarButton-firstPage.svg);
  414. --secondaryToolbarButton-lastPage-icon: url(images/secondaryToolbarButton-lastPage.svg);
  415. --secondaryToolbarButton-rotateCcw-icon: url(images/secondaryToolbarButton-rotateCcw.svg);
  416. --secondaryToolbarButton-rotateCw-icon: url(images/secondaryToolbarButton-rotateCw.svg);
  417. --secondaryToolbarButton-selectTool-icon: url(images/secondaryToolbarButton-selectTool.svg);
  418. --secondaryToolbarButton-handTool-icon: url(images/secondaryToolbarButton-handTool.svg);
  419. --secondaryToolbarButton-scrollVertical-icon: url(images/secondaryToolbarButton-scrollVertical.svg);
  420. --secondaryToolbarButton-scrollHorizontal-icon: url(images/secondaryToolbarButton-scrollHorizontal.svg);
  421. --secondaryToolbarButton-scrollWrapped-icon: url(images/secondaryToolbarButton-scrollWrapped.svg);
  422. --secondaryToolbarButton-spreadNone-icon: url(images/secondaryToolbarButton-spreadNone.svg);
  423. --secondaryToolbarButton-spreadOdd-icon: url(images/secondaryToolbarButton-spreadOdd.svg);
  424. --secondaryToolbarButton-spreadEven-icon: url(images/secondaryToolbarButton-spreadEven.svg);
  425. --secondaryToolbarButton-documentProperties-icon: url(images/secondaryToolbarButton-documentProperties.svg); */
  426. }
  427. @media (prefers-color-scheme: dark) {
  428. :root {
  429. --main-color: rgba(249, 249, 250, 1);
  430. --body-bg-color: rgba(42, 42, 46, 1);
  431. --errorWrapper-bg-color: rgba(199, 17, 17, 1);
  432. --progressBar-color: rgba(0, 96, 223, 1);
  433. --progressBar-indeterminate-bg-color: rgba(40, 40, 43, 1);
  434. --progressBar-indeterminate-blend-color: rgba(20, 68, 133, 1);
  435. --scrollbar-color: rgba(121, 121, 123, 1);
  436. --scrollbar-bg-color: rgba(35, 35, 39, 1);
  437. --toolbar-icon-bg-color: rgba(255, 255, 255, 1);
  438. --sidebar-bg-color: rgba(50, 50, 52, 1);
  439. --toolbar-bg-color: rgba(56, 56, 61, 1);
  440. --toolbar-border-color: rgba(12, 12, 13, 1);
  441. --button-hover-color: rgba(102, 102, 103, 1);
  442. --toggled-btn-bg-color: rgba(0, 0, 0, 0.3);
  443. --toggled-hover-active-btn-color: rgba(0, 0, 0, 0.4);
  444. --dropdown-btn-bg-color: rgba(74, 74, 79, 1);
  445. --separator-color: rgba(0, 0, 0, 0.3);
  446. --field-color: rgba(250, 250, 250, 1);
  447. --field-bg-color: rgba(64, 64, 68, 1);
  448. --field-border-color: rgba(115, 115, 115, 1);
  449. --findbar-nextprevious-btn-bg-color: rgba(89, 89, 89, 1);
  450. --treeitem-color: rgba(255, 255, 255, 0.8);
  451. --treeitem-hover-color: rgba(255, 255, 255, 0.9);
  452. --treeitem-selected-color: rgba(255, 255, 255, 0.9);
  453. --treeitem-selected-bg-color: rgba(255, 255, 255, 0.25);
  454. --sidebaritem-bg-color: rgba(255, 255, 255, 0.15);
  455. --doorhanger-bg-color: rgba(74, 74, 79, 1);
  456. --doorhanger-border-color: rgba(39, 39, 43, 1);
  457. --doorhanger-hover-color: rgba(93, 94, 98, 1);
  458. --doorhanger-separator-color: rgba(92, 92, 97, 1);
  459. --overlay-button-bg-color: rgba(92, 92, 97, 1);
  460. --overlay-button-hover-color: rgba(115, 115, 115, 1);
  461. /* This image is used in <input> elements, which unfortunately means that
  462. * the `mask-image` approach used with all of the other images doesn't work
  463. * here; hence why we still have two versions of this particular image. */
  464. --loading-icon: url(images/loading-dark.svg);
  465. }
  466. }
  467. * {
  468. padding: 0;
  469. margin: 0;
  470. }
  471. html {
  472. height: 100%;
  473. width: 100%;
  474. /* Font size is needed to make the activity bar the correct size. */
  475. font-size: 10px;
  476. }
  477. body {
  478. height: 100%;
  479. width: 100%;
  480. background-color: #fff;
  481. }
  482. @media (prefers-color-scheme: dark) {
  483. body {
  484. background-color: rgba(42, 42, 46, 1);
  485. background-color: var(--body-bg-color);
  486. }
  487. }
  488. body {
  489. font: message-box;
  490. outline: none;
  491. scrollbar-color: auto auto;
  492. scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color);
  493. }
  494. @media (prefers-color-scheme: dark) {
  495. body {
  496. scrollbar-color: rgba(121, 121, 123, 1) rgba(35, 35, 39, 1);
  497. scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color);
  498. }
  499. }
  500. @media (prefers-color-scheme: dark) {
  501. body {
  502. scrollbar-color: rgba(121, 121, 123, 1) rgba(35, 35, 39, 1);
  503. scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color);
  504. }
  505. }
  506. @media (prefers-color-scheme: dark) {
  507. body {
  508. scrollbar-color: rgba(121, 121, 123, 1) rgba(35, 35, 39, 1);
  509. scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color);
  510. }
  511. }
  512. @media (prefers-color-scheme: dark) {
  513. body {
  514. scrollbar-color: rgba(121, 121, 123, 1) rgba(35, 35, 39, 1);
  515. scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color);
  516. }
  517. }
  518. input {
  519. font: message-box;
  520. outline: none;
  521. scrollbar-color: auto auto;
  522. scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color);
  523. }
  524. @media (prefers-color-scheme: dark) {
  525. input {
  526. scrollbar-color: rgba(121, 121, 123, 1) rgba(35, 35, 39, 1);
  527. scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color);
  528. }
  529. }
  530. @media (prefers-color-scheme: dark) {
  531. input {
  532. scrollbar-color: rgba(121, 121, 123, 1) rgba(35, 35, 39, 1);
  533. scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color);
  534. }
  535. }
  536. @media (prefers-color-scheme: dark) {
  537. input {
  538. scrollbar-color: rgba(121, 121, 123, 1) rgba(35, 35, 39, 1);
  539. scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color);
  540. }
  541. }
  542. @media (prefers-color-scheme: dark) {
  543. input {
  544. scrollbar-color: rgba(121, 121, 123, 1) rgba(35, 35, 39, 1);
  545. scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color);
  546. }
  547. }
  548. button {
  549. font: message-box;
  550. outline: none;
  551. scrollbar-color: auto auto;
  552. scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color);
  553. }
  554. @media (prefers-color-scheme: dark) {
  555. button {
  556. scrollbar-color: rgba(121, 121, 123, 1) rgba(35, 35, 39, 1);
  557. scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color);
  558. }
  559. }
  560. @media (prefers-color-scheme: dark) {
  561. button {
  562. scrollbar-color: rgba(121, 121, 123, 1) rgba(35, 35, 39, 1);
  563. scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color);
  564. }
  565. }
  566. @media (prefers-color-scheme: dark) {
  567. button {
  568. scrollbar-color: rgba(121, 121, 123, 1) rgba(35, 35, 39, 1);
  569. scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color);
  570. }
  571. }
  572. @media (prefers-color-scheme: dark) {
  573. button {
  574. scrollbar-color: rgba(121, 121, 123, 1) rgba(35, 35, 39, 1);
  575. scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color);
  576. }
  577. }
  578. select {
  579. font: message-box;
  580. outline: none;
  581. scrollbar-color: auto auto;
  582. scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color);
  583. }
  584. @media (prefers-color-scheme: dark) {
  585. select {
  586. scrollbar-color: rgba(121, 121, 123, 1) rgba(35, 35, 39, 1);
  587. scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color);
  588. }
  589. }
  590. @media (prefers-color-scheme: dark) {
  591. select {
  592. scrollbar-color: rgba(121, 121, 123, 1) rgba(35, 35, 39, 1);
  593. scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color);
  594. }
  595. }
  596. @media (prefers-color-scheme: dark) {
  597. select {
  598. scrollbar-color: rgba(121, 121, 123, 1) rgba(35, 35, 39, 1);
  599. scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color);
  600. }
  601. }
  602. @media (prefers-color-scheme: dark) {
  603. select {
  604. scrollbar-color: rgba(121, 121, 123, 1) rgba(35, 35, 39, 1);
  605. scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color);
  606. }
  607. }
  608. .hidden {
  609. display: none !important;
  610. }
  611. [hidden] {
  612. display: none !important;
  613. }
  614. .pdfViewer.enablePermissions .textLayer > span {
  615. -webkit-user-select: none !important;
  616. -moz-user-select: none !important;
  617. -ms-user-select: none !important;
  618. user-select: none !important;
  619. cursor: not-allowed;
  620. }
  621. #viewerContainer.pdfPresentationMode:-webkit-full-screen {
  622. top: 0;
  623. border-top: 2px solid rgba(0, 0, 0, 0);
  624. background-color: rgba(0, 0, 0, 1);
  625. width: 100%;
  626. height: 100%;
  627. overflow: hidden;
  628. cursor: none;
  629. -webkit-user-select: none;
  630. user-select: none;
  631. }
  632. #viewerContainer.pdfPresentationMode:-moz-full-screen {
  633. top: 0;
  634. border-top: 2px solid rgba(0, 0, 0, 0);
  635. background-color: rgba(0, 0, 0, 1);
  636. width: 100%;
  637. height: 100%;
  638. overflow: hidden;
  639. cursor: none;
  640. -moz-user-select: none;
  641. user-select: none;
  642. }
  643. #viewerContainer.pdfPresentationMode:-ms-fullscreen {
  644. top: 0;
  645. border-top: 2px solid rgba(0, 0, 0, 0);
  646. background-color: rgba(0, 0, 0, 1);
  647. width: 100%;
  648. height: 100%;
  649. overflow: hidden;
  650. cursor: none;
  651. -ms-user-select: none;
  652. user-select: none;
  653. }
  654. #viewerContainer.pdfPresentationMode:fullscreen {
  655. top: 0;
  656. border-top: 2px solid rgba(0, 0, 0, 0);
  657. background-color: rgba(0, 0, 0, 1);
  658. width: 100%;
  659. height: 100%;
  660. overflow: hidden;
  661. cursor: none;
  662. -webkit-user-select: none;
  663. -moz-user-select: none;
  664. -ms-user-select: none;
  665. user-select: none;
  666. }
  667. .pdfPresentationMode:-webkit-full-screen a:not(.internalLink) {
  668. display: none;
  669. }
  670. .pdfPresentationMode:-moz-full-screen a:not(.internalLink) {
  671. display: none;
  672. }
  673. .pdfPresentationMode:-ms-fullscreen a:not(.internalLink) {
  674. display: none;
  675. }
  676. .pdfPresentationMode:fullscreen a:not(.internalLink) {
  677. display: none;
  678. }
  679. .pdfPresentationMode:-webkit-full-screen .textLayer > span {
  680. cursor: none;
  681. }
  682. .pdfPresentationMode:-moz-full-screen .textLayer > span {
  683. cursor: none;
  684. }
  685. .pdfPresentationMode:-ms-fullscreen .textLayer > span {
  686. cursor: none;
  687. }
  688. .pdfPresentationMode:fullscreen .textLayer > span {
  689. cursor: none;
  690. }
  691. .pdfPresentationMode.pdfPresentationModeControls > *,
  692. .pdfPresentationMode.pdfPresentationModeControls .textLayer > span {
  693. cursor: default;
  694. }
  695. #outerContainer {
  696. width: 100%;
  697. height: 100%;
  698. position: relative;
  699. }
  700. #sidebarContainer {
  701. position: absolute;
  702. top: 32px;
  703. bottom: 0;
  704. width: 200px;
  705. width: var(--sidebar-width);
  706. visibility: hidden;
  707. z-index: 100;
  708. border-top: 1px solid rgba(51, 51, 51, 1);
  709. transition-duration: 200ms;
  710. transition-duration: var(--sidebar-transition-duration);
  711. transition-timing-function: ease;
  712. transition-timing-function: var(--sidebar-transition-timing-function);
  713. }
  714. html[dir="ltr"] #sidebarContainer {
  715. transition-property: left;
  716. left: -200px;
  717. left: calc(0px - var(--sidebar-width));
  718. }
  719. html[dir="rtl"] #sidebarContainer {
  720. transition-property: right;
  721. right: -200px;
  722. right: calc(0px - var(--sidebar-width));
  723. }
  724. #outerContainer.sidebarResizing #sidebarContainer {
  725. /* Improve responsiveness and avoid visual glitches when the sidebar is resized. */
  726. transition-duration: 0s;
  727. /* Prevent e.g. the thumbnails being selected when the sidebar is resized. */
  728. -webkit-user-select: none;
  729. -moz-user-select: none;
  730. -ms-user-select: none;
  731. user-select: none;
  732. }
  733. #outerContainer.sidebarMoving #sidebarContainer,
  734. #outerContainer.sidebarOpen #sidebarContainer {
  735. visibility: visible;
  736. }
  737. html[dir="ltr"] #outerContainer.sidebarOpen #sidebarContainer {
  738. left: 0;
  739. }
  740. html[dir="rtl"] #outerContainer.sidebarOpen #sidebarContainer {
  741. right: 0;
  742. }
  743. #mainContainer {
  744. position: absolute;
  745. top: 0;
  746. right: 0;
  747. bottom: 0;
  748. left: 0;
  749. min-width: 320px;
  750. }
  751. #sidebarContent {
  752. top: 32px;
  753. bottom: 0;
  754. overflow: auto;
  755. -webkit-overflow-scrolling: touch;
  756. position: absolute;
  757. width: 100%;
  758. background-color: rgba(0, 0, 0, 0.1);
  759. }
  760. html[dir="ltr"] #sidebarContent {
  761. left: 0;
  762. box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25);
  763. }
  764. html[dir="rtl"] #sidebarContent {
  765. right: 0;
  766. box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25);
  767. }
  768. #viewerContainer {
  769. overflow: auto;
  770. -webkit-overflow-scrolling: touch;
  771. position: absolute;
  772. top: 32px;
  773. right: 0;
  774. bottom: 0;
  775. left: 0;
  776. outline: none;
  777. /* 隐藏滚动条的整个部分 */
  778. &::-webkit-scrollbar {
  779. display: none;
  780. }
  781. &::scrollbar {
  782. display: none;
  783. }
  784. }
  785. #viewerContainer:not(.pdfPresentationMode) {
  786. transition-duration: 200ms;
  787. transition-duration: var(--sidebar-transition-duration);
  788. transition-timing-function: ease;
  789. transition-timing-function: var(--sidebar-transition-timing-function);
  790. }
  791. #outerContainer.sidebarResizing #viewerContainer {
  792. /* Improve responsiveness and avoid visual glitches when the sidebar is resized. */
  793. transition-duration: 0s;
  794. }
  795. html[dir="ltr"]
  796. #outerContainer.sidebarOpen
  797. #viewerContainer:not(.pdfPresentationMode) {
  798. transition-property: left;
  799. left: 200px;
  800. left: var(--sidebar-width);
  801. }
  802. html[dir="rtl"]
  803. #outerContainer.sidebarOpen
  804. #viewerContainer:not(.pdfPresentationMode) {
  805. transition-property: right;
  806. right: 200px;
  807. right: var(--sidebar-width);
  808. }
  809. .toolbar {
  810. /* position: relative;
  811. left: 0;
  812. right: 0; */
  813. box-shadow: 1px 2px 1px rgb(0 0 0 / 15%);
  814. position: fixed;
  815. bottom: 130px;
  816. right: 20px;
  817. z-index: 9999;
  818. cursor: default;
  819. }
  820. #toolbarContainer {
  821. width: 100%;
  822. }
  823. #toolbarSidebar {
  824. width: 100%;
  825. height: 32px;
  826. background-color: rgba(245, 246, 247, 1);
  827. background-color: var(--sidebar-bg-color);
  828. }
  829. @media (prefers-color-scheme: dark) {
  830. #toolbarSidebar {
  831. background-color: rgba(50, 50, 52, 1);
  832. background-color: var(--sidebar-bg-color);
  833. }
  834. }
  835. html[dir="ltr"] #toolbarSidebar {
  836. box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25), 0 1px 0 rgba(0, 0, 0, 0.15),
  837. 0 0 1px rgba(0, 0, 0, 0.1);
  838. }
  839. html[dir="rtl"] #toolbarSidebar {
  840. box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25), 0 1px 0 rgba(0, 0, 0, 0.15),
  841. 0 0 1px rgba(0, 0, 0, 0.1);
  842. }
  843. html[dir="ltr"] #toolbarSidebar .toolbarButton {
  844. margin-right: 2px !important;
  845. }
  846. html[dir="rtl"] #toolbarSidebar .toolbarButton {
  847. margin-left: 2px !important;
  848. }
  849. html[dir="ltr"] #toolbarSidebarRight .toolbarButton {
  850. margin-right: 3px !important;
  851. }
  852. html[dir="rtl"] #toolbarSidebarRight .toolbarButton {
  853. margin-left: 3px !important;
  854. }
  855. #sidebarResizer {
  856. position: absolute;
  857. top: 0;
  858. bottom: 0;
  859. width: 6px;
  860. z-index: 200;
  861. cursor: ew-resize;
  862. }
  863. html[dir="ltr"] #sidebarResizer {
  864. right: -6px;
  865. }
  866. html[dir="rtl"] #sidebarResizer {
  867. left: -6px;
  868. }
  869. #toolbarContainer {
  870. position: relative;
  871. height: 32px;
  872. background-color: rgba(249, 249, 250, 1);
  873. background-color: var(--toolbar-bg-color);
  874. box-shadow: 0 1px 0 rgba(204, 204, 204, 1);
  875. box-shadow: 0 1px 0 var(--toolbar-border-color);
  876. }
  877. @media (prefers-color-scheme: dark) {
  878. #toolbarContainer {
  879. box-shadow: 0 1px 0 rgba(12, 12, 13, 1);
  880. box-shadow: 0 1px 0 var(--toolbar-border-color);
  881. }
  882. }
  883. @media (prefers-color-scheme: dark) {
  884. #toolbarContainer {
  885. background-color: rgba(56, 56, 61, 1);
  886. background-color: var(--toolbar-bg-color);
  887. }
  888. }
  889. .findbar {
  890. position: relative;
  891. height: 32px;
  892. background-color: rgba(249, 249, 250, 1);
  893. background-color: var(--toolbar-bg-color);
  894. box-shadow: 0 1px 0 rgba(204, 204, 204, 1);
  895. box-shadow: 0 1px 0 var(--toolbar-border-color);
  896. }
  897. @media (prefers-color-scheme: dark) {
  898. .findbar {
  899. box-shadow: 0 1px 0 rgba(12, 12, 13, 1);
  900. box-shadow: 0 1px 0 var(--toolbar-border-color);
  901. }
  902. }
  903. @media (prefers-color-scheme: dark) {
  904. .findbar {
  905. background-color: rgba(56, 56, 61, 1);
  906. background-color: var(--toolbar-bg-color);
  907. }
  908. }
  909. .secondaryToolbar {
  910. position: relative;
  911. height: 32px;
  912. background-color: rgba(249, 249, 250, 1);
  913. background-color: var(--toolbar-bg-color);
  914. box-shadow: 0 1px 0 rgba(204, 204, 204, 1);
  915. box-shadow: 0 1px 0 var(--toolbar-border-color);
  916. }
  917. @media (prefers-color-scheme: dark) {
  918. .secondaryToolbar {
  919. box-shadow: 0 1px 0 rgba(12, 12, 13, 1);
  920. box-shadow: 0 1px 0 var(--toolbar-border-color);
  921. }
  922. }
  923. @media (prefers-color-scheme: dark) {
  924. .secondaryToolbar {
  925. background-color: rgba(56, 56, 61, 1);
  926. background-color: var(--toolbar-bg-color);
  927. }
  928. }
  929. #toolbarViewer {
  930. height: 32px;
  931. }
  932. #loadingBar {
  933. position: absolute;
  934. height: 4px;
  935. background-color: rgba(237, 237, 240, 1);
  936. background-color: var(--body-bg-color);
  937. border-bottom: 1px solid rgba(204, 204, 204, 1);
  938. border-bottom: 1px solid var(--toolbar-border-color);
  939. transition-duration: 200ms;
  940. transition-duration: var(--sidebar-transition-duration);
  941. transition-timing-function: ease;
  942. transition-timing-function: var(--sidebar-transition-timing-function);
  943. }
  944. @media (prefers-color-scheme: dark) {
  945. #loadingBar {
  946. border-bottom: 1px solid rgba(12, 12, 13, 1);
  947. border-bottom: 1px solid var(--toolbar-border-color);
  948. }
  949. }
  950. @media (prefers-color-scheme: dark) {
  951. #loadingBar {
  952. background-color: rgba(42, 42, 46, 1);
  953. background-color: var(--body-bg-color);
  954. }
  955. }
  956. html[dir="ltr"] #loadingBar {
  957. transition-property: left;
  958. left: 0;
  959. right: 0;
  960. right: var(--loadingBar-end-offset);
  961. }
  962. html[dir="rtl"] #loadingBar {
  963. transition-property: right;
  964. left: 0;
  965. left: var(--loadingBar-end-offset);
  966. right: 0;
  967. }
  968. html[dir="ltr"] #outerContainer.sidebarOpen #loadingBar {
  969. left: 200px;
  970. left: var(--sidebar-width);
  971. }
  972. html[dir="rtl"] #outerContainer.sidebarOpen #loadingBar {
  973. right: 200px;
  974. right: var(--sidebar-width);
  975. }
  976. #outerContainer.sidebarResizing #loadingBar {
  977. /* Improve responsiveness and avoid visual glitches when the sidebar is resized. */
  978. transition-duration: 0s;
  979. }
  980. #loadingBar .progress {
  981. position: absolute;
  982. top: 0;
  983. left: 0;
  984. width: 0%;
  985. height: 100%;
  986. background-color: rgba(10, 132, 255, 1);
  987. background-color: var(--progressBar-color);
  988. overflow: hidden;
  989. transition: width 200ms;
  990. }
  991. @media (prefers-color-scheme: dark) {
  992. #loadingBar .progress {
  993. background-color: rgba(0, 96, 223, 1);
  994. background-color: var(--progressBar-color);
  995. }
  996. }
  997. @-webkit-keyframes progressIndeterminate {
  998. 0% {
  999. left: -142px;
  1000. }
  1001. 100% {
  1002. left: 0;
  1003. }
  1004. }
  1005. @keyframes progressIndeterminate {
  1006. 0% {
  1007. left: -142px;
  1008. }
  1009. 100% {
  1010. left: 0;
  1011. }
  1012. }
  1013. #loadingBar .progress.indeterminate {
  1014. background-color: rgba(221, 221, 222, 1);
  1015. background-color: var(--progressBar-indeterminate-bg-color);
  1016. transition: none;
  1017. }
  1018. @media (prefers-color-scheme: dark) {
  1019. #loadingBar .progress.indeterminate {
  1020. background-color: rgba(40, 40, 43, 1);
  1021. background-color: var(--progressBar-indeterminate-bg-color);
  1022. }
  1023. }
  1024. #loadingBar .progress.indeterminate .glimmer {
  1025. position: absolute;
  1026. top: 0;
  1027. left: 0;
  1028. height: 100%;
  1029. width: calc(100% + 150px);
  1030. background: repeating-linear-gradient(
  1031. 135deg,
  1032. rgba(116, 177, 239, 1) 0,
  1033. rgba(221, 221, 222, 1) 5px,
  1034. rgba(221, 221, 222, 1) 45px,
  1035. rgba(10, 132, 255, 1) 55px,
  1036. rgba(10, 132, 255, 1) 95px,
  1037. rgba(116, 177, 239, 1) 100px
  1038. );
  1039. background: repeating-linear-gradient(
  1040. 135deg,
  1041. var(--progressBar-indeterminate-blend-color) 0,
  1042. var(--progressBar-indeterminate-bg-color) 5px,
  1043. var(--progressBar-indeterminate-bg-color) 45px,
  1044. var(--progressBar-color) 55px,
  1045. var(--progressBar-color) 95px,
  1046. var(--progressBar-indeterminate-blend-color) 100px
  1047. );
  1048. -webkit-animation: progressIndeterminate 1s linear infinite;
  1049. animation: progressIndeterminate 1s linear infinite;
  1050. }
  1051. @media (prefers-color-scheme: dark) {
  1052. #loadingBar .progress.indeterminate .glimmer {
  1053. background: repeating-linear-gradient(
  1054. 135deg,
  1055. rgba(20, 68, 133, 1) 0,
  1056. rgba(40, 40, 43, 1) 5px,
  1057. rgba(40, 40, 43, 1) 45px,
  1058. rgba(0, 96, 223, 1) 55px,
  1059. rgba(0, 96, 223, 1) 95px,
  1060. rgba(20, 68, 133, 1) 100px
  1061. );
  1062. background: repeating-linear-gradient(
  1063. 135deg,
  1064. var(--progressBar-indeterminate-blend-color) 0,
  1065. var(--progressBar-indeterminate-bg-color) 5px,
  1066. var(--progressBar-indeterminate-bg-color) 45px,
  1067. var(--progressBar-color) 55px,
  1068. var(--progressBar-color) 95px,
  1069. var(--progressBar-indeterminate-blend-color) 100px
  1070. );
  1071. }
  1072. }
  1073. @media (prefers-color-scheme: dark) {
  1074. #loadingBar .progress.indeterminate .glimmer {
  1075. background: repeating-linear-gradient(
  1076. 135deg,
  1077. rgba(20, 68, 133, 1) 0,
  1078. rgba(40, 40, 43, 1) 5px,
  1079. rgba(40, 40, 43, 1) 45px,
  1080. rgba(0, 96, 223, 1) 55px,
  1081. rgba(0, 96, 223, 1) 95px,
  1082. rgba(20, 68, 133, 1) 100px
  1083. );
  1084. background: repeating-linear-gradient(
  1085. 135deg,
  1086. var(--progressBar-indeterminate-blend-color) 0,
  1087. var(--progressBar-indeterminate-bg-color) 5px,
  1088. var(--progressBar-indeterminate-bg-color) 45px,
  1089. var(--progressBar-color) 55px,
  1090. var(--progressBar-color) 95px,
  1091. var(--progressBar-indeterminate-blend-color) 100px
  1092. );
  1093. }
  1094. }
  1095. @media (prefers-color-scheme: dark) {
  1096. #loadingBar .progress.indeterminate .glimmer {
  1097. background: repeating-linear-gradient(
  1098. 135deg,
  1099. rgba(20, 68, 133, 1) 0,
  1100. rgba(40, 40, 43, 1) 5px,
  1101. rgba(40, 40, 43, 1) 45px,
  1102. rgba(0, 96, 223, 1) 55px,
  1103. rgba(0, 96, 223, 1) 95px,
  1104. rgba(20, 68, 133, 1) 100px
  1105. );
  1106. background: repeating-linear-gradient(
  1107. 135deg,
  1108. var(--progressBar-indeterminate-blend-color) 0,
  1109. var(--progressBar-indeterminate-bg-color) 5px,
  1110. var(--progressBar-indeterminate-bg-color) 45px,
  1111. var(--progressBar-color) 55px,
  1112. var(--progressBar-color) 95px,
  1113. var(--progressBar-indeterminate-blend-color) 100px
  1114. );
  1115. }
  1116. }
  1117. @media (prefers-color-scheme: dark) {
  1118. #loadingBar .progress.indeterminate .glimmer {
  1119. background: repeating-linear-gradient(
  1120. 135deg,
  1121. rgba(20, 68, 133, 1) 0,
  1122. rgba(40, 40, 43, 1) 5px,
  1123. rgba(40, 40, 43, 1) 45px,
  1124. rgba(0, 96, 223, 1) 55px,
  1125. rgba(0, 96, 223, 1) 95px,
  1126. rgba(20, 68, 133, 1) 100px
  1127. );
  1128. background: repeating-linear-gradient(
  1129. 135deg,
  1130. var(--progressBar-indeterminate-blend-color) 0,
  1131. var(--progressBar-indeterminate-bg-color) 5px,
  1132. var(--progressBar-indeterminate-bg-color) 45px,
  1133. var(--progressBar-color) 55px,
  1134. var(--progressBar-color) 95px,
  1135. var(--progressBar-indeterminate-blend-color) 100px
  1136. );
  1137. }
  1138. }
  1139. @media (prefers-color-scheme: dark) {
  1140. #loadingBar .progress.indeterminate .glimmer {
  1141. background: repeating-linear-gradient(
  1142. 135deg,
  1143. rgba(20, 68, 133, 1) 0,
  1144. rgba(40, 40, 43, 1) 5px,
  1145. rgba(40, 40, 43, 1) 45px,
  1146. rgba(0, 96, 223, 1) 55px,
  1147. rgba(0, 96, 223, 1) 95px,
  1148. rgba(20, 68, 133, 1) 100px
  1149. );
  1150. background: repeating-linear-gradient(
  1151. 135deg,
  1152. var(--progressBar-indeterminate-blend-color) 0,
  1153. var(--progressBar-indeterminate-bg-color) 5px,
  1154. var(--progressBar-indeterminate-bg-color) 45px,
  1155. var(--progressBar-color) 55px,
  1156. var(--progressBar-color) 95px,
  1157. var(--progressBar-indeterminate-blend-color) 100px
  1158. );
  1159. }
  1160. }
  1161. @media (prefers-color-scheme: dark) {
  1162. #loadingBar .progress.indeterminate .glimmer {
  1163. background: repeating-linear-gradient(
  1164. 135deg,
  1165. rgba(20, 68, 133, 1) 0,
  1166. rgba(40, 40, 43, 1) 5px,
  1167. rgba(40, 40, 43, 1) 45px,
  1168. rgba(0, 96, 223, 1) 55px,
  1169. rgba(0, 96, 223, 1) 95px,
  1170. rgba(20, 68, 133, 1) 100px
  1171. );
  1172. background: repeating-linear-gradient(
  1173. 135deg,
  1174. var(--progressBar-indeterminate-blend-color) 0,
  1175. var(--progressBar-indeterminate-bg-color) 5px,
  1176. var(--progressBar-indeterminate-bg-color) 45px,
  1177. var(--progressBar-color) 55px,
  1178. var(--progressBar-color) 95px,
  1179. var(--progressBar-indeterminate-blend-color) 100px
  1180. );
  1181. }
  1182. }
  1183. @media (prefers-color-scheme: dark) {
  1184. #loadingBar .progress.indeterminate .glimmer {
  1185. background: repeating-linear-gradient(
  1186. 135deg,
  1187. rgba(20, 68, 133, 1) 0,
  1188. rgba(40, 40, 43, 1) 5px,
  1189. rgba(40, 40, 43, 1) 45px,
  1190. rgba(0, 96, 223, 1) 55px,
  1191. rgba(0, 96, 223, 1) 95px,
  1192. rgba(20, 68, 133, 1) 100px
  1193. );
  1194. background: repeating-linear-gradient(
  1195. 135deg,
  1196. var(--progressBar-indeterminate-blend-color) 0,
  1197. var(--progressBar-indeterminate-bg-color) 5px,
  1198. var(--progressBar-indeterminate-bg-color) 45px,
  1199. var(--progressBar-color) 55px,
  1200. var(--progressBar-color) 95px,
  1201. var(--progressBar-indeterminate-blend-color) 100px
  1202. );
  1203. }
  1204. }
  1205. @media (prefers-color-scheme: dark) {
  1206. #loadingBar .progress.indeterminate .glimmer {
  1207. background: repeating-linear-gradient(
  1208. 135deg,
  1209. rgba(20, 68, 133, 1) 0,
  1210. rgba(40, 40, 43, 1) 5px,
  1211. rgba(40, 40, 43, 1) 45px,
  1212. rgba(0, 96, 223, 1) 55px,
  1213. rgba(0, 96, 223, 1) 95px,
  1214. rgba(20, 68, 133, 1) 100px
  1215. );
  1216. background: repeating-linear-gradient(
  1217. 135deg,
  1218. var(--progressBar-indeterminate-blend-color) 0,
  1219. var(--progressBar-indeterminate-bg-color) 5px,
  1220. var(--progressBar-indeterminate-bg-color) 45px,
  1221. var(--progressBar-color) 55px,
  1222. var(--progressBar-color) 95px,
  1223. var(--progressBar-indeterminate-blend-color) 100px
  1224. );
  1225. }
  1226. }
  1227. @media (prefers-color-scheme: dark) {
  1228. #loadingBar .progress.indeterminate .glimmer {
  1229. background: repeating-linear-gradient(
  1230. 135deg,
  1231. rgba(20, 68, 133, 1) 0,
  1232. rgba(40, 40, 43, 1) 5px,
  1233. rgba(40, 40, 43, 1) 45px,
  1234. rgba(0, 96, 223, 1) 55px,
  1235. rgba(0, 96, 223, 1) 95px,
  1236. rgba(20, 68, 133, 1) 100px
  1237. );
  1238. background: repeating-linear-gradient(
  1239. 135deg,
  1240. var(--progressBar-indeterminate-blend-color) 0,
  1241. var(--progressBar-indeterminate-bg-color) 5px,
  1242. var(--progressBar-indeterminate-bg-color) 45px,
  1243. var(--progressBar-color) 55px,
  1244. var(--progressBar-color) 95px,
  1245. var(--progressBar-indeterminate-blend-color) 100px
  1246. );
  1247. }
  1248. }
  1249. .findbar,
  1250. .secondaryToolbar {
  1251. top: 32px;
  1252. position: absolute;
  1253. z-index: 10000;
  1254. height: auto;
  1255. min-width: 16px;
  1256. padding: 0 4px;
  1257. margin: 4px 2px;
  1258. color: rgba(217, 217, 217, 1);
  1259. font-size: 12px;
  1260. line-height: 14px;
  1261. text-align: left;
  1262. cursor: default;
  1263. }
  1264. .findbar {
  1265. min-width: 300px;
  1266. background-color: rgba(249, 249, 250, 1);
  1267. background-color: var(--toolbar-bg-color);
  1268. }
  1269. @media (prefers-color-scheme: dark) {
  1270. .findbar {
  1271. background-color: rgba(56, 56, 61, 1);
  1272. background-color: var(--toolbar-bg-color);
  1273. }
  1274. }
  1275. .findbar > div {
  1276. height: 32px;
  1277. }
  1278. .findbar.wrapContainers > div {
  1279. clear: both;
  1280. }
  1281. .findbar.wrapContainers > div#findbarMessageContainer {
  1282. height: auto;
  1283. }
  1284. html[dir="ltr"] .findbar {
  1285. left: 64px;
  1286. }
  1287. html[dir="rtl"] .findbar {
  1288. right: 64px;
  1289. }
  1290. .findbar .splitToolbarButton {
  1291. margin-top: 3px;
  1292. }
  1293. html[dir="ltr"] .findbar .splitToolbarButton {
  1294. margin-left: 0;
  1295. margin-right: 5px;
  1296. }
  1297. html[dir="rtl"] .findbar .splitToolbarButton {
  1298. margin-left: 5px;
  1299. margin-right: 0;
  1300. }
  1301. .findbar .splitToolbarButton > .toolbarButton {
  1302. background-color: rgba(227, 228, 230, 1);
  1303. background-color: var(--findbar-nextprevious-btn-bg-color);
  1304. border-radius: 0;
  1305. height: 26px;
  1306. border-top: 1px solid rgba(187, 187, 188, 1);
  1307. border-top: 1px solid var(--field-border-color);
  1308. border-bottom: 1px solid rgba(187, 187, 188, 1);
  1309. border-bottom: 1px solid var(--field-border-color);
  1310. }
  1311. @media (prefers-color-scheme: dark) {
  1312. .findbar .splitToolbarButton > .toolbarButton {
  1313. border-bottom: 1px solid rgba(115, 115, 115, 1);
  1314. border-bottom: 1px solid var(--field-border-color);
  1315. }
  1316. }
  1317. @media (prefers-color-scheme: dark) {
  1318. .findbar .splitToolbarButton > .toolbarButton {
  1319. border-top: 1px solid rgba(115, 115, 115, 1);
  1320. border-top: 1px solid var(--field-border-color);
  1321. }
  1322. }
  1323. @media (prefers-color-scheme: dark) {
  1324. .findbar .splitToolbarButton > .toolbarButton {
  1325. background-color: rgba(89, 89, 89, 1);
  1326. background-color: var(--findbar-nextprevious-btn-bg-color);
  1327. }
  1328. }
  1329. .findbar .splitToolbarButton > .toolbarButton::before {
  1330. top: 5px;
  1331. }
  1332. .findbar .splitToolbarButton > .findNext {
  1333. width: 29px;
  1334. }
  1335. html[dir="ltr"] .findbar .splitToolbarButton > .findNext {
  1336. border-bottom-right-radius: 2px;
  1337. border-top-right-radius: 2px;
  1338. border-right: 1px solid rgba(187, 187, 188, 1);
  1339. border-right: 1px solid var(--field-border-color);
  1340. }
  1341. @media (prefers-color-scheme: dark) {
  1342. html[dir="ltr"] .findbar .splitToolbarButton > .findNext {
  1343. border-right: 1px solid rgba(115, 115, 115, 1);
  1344. border-right: 1px solid var(--field-border-color);
  1345. }
  1346. }
  1347. html[dir="rtl"] .findbar .splitToolbarButton > .findNext {
  1348. border-bottom-left-radius: 2px;
  1349. border-top-left-radius: 2px;
  1350. border-left: 1px solid rgba(187, 187, 188, 1);
  1351. border-left: 1px solid var(--field-border-color);
  1352. }
  1353. @media (prefers-color-scheme: dark) {
  1354. html[dir="rtl"] .findbar .splitToolbarButton > .findNext {
  1355. border-left: 1px solid rgba(115, 115, 115, 1);
  1356. border-left: 1px solid var(--field-border-color);
  1357. }
  1358. }
  1359. .findbar input[type="checkbox"] {
  1360. pointer-events: none;
  1361. }
  1362. .findbar label {
  1363. -webkit-user-select: none;
  1364. -moz-user-select: none;
  1365. -ms-user-select: none;
  1366. user-select: none;
  1367. }
  1368. .findbar label:hover {
  1369. background-color: rgba(221, 222, 223, 1);
  1370. background-color: var(--button-hover-color);
  1371. }
  1372. @media (prefers-color-scheme: dark) {
  1373. .findbar label:hover {
  1374. background-color: rgba(102, 102, 103, 1);
  1375. background-color: var(--button-hover-color);
  1376. }
  1377. }
  1378. .findbar input:focus + label {
  1379. background-color: rgba(221, 222, 223, 1);
  1380. background-color: var(--button-hover-color);
  1381. }
  1382. @media (prefers-color-scheme: dark) {
  1383. .findbar input:focus + label {
  1384. background-color: rgba(102, 102, 103, 1);
  1385. background-color: var(--button-hover-color);
  1386. }
  1387. }
  1388. html[dir="ltr"] #findInput {
  1389. border-top-right-radius: 0;
  1390. border-bottom-right-radius: 0;
  1391. }
  1392. html[dir="rtl"] #findInput {
  1393. border-top-left-radius: 0;
  1394. border-bottom-left-radius: 0;
  1395. }
  1396. .findbar .toolbarField[type="checkbox"]:checked + .toolbarLabel {
  1397. background-color: rgba(0, 0, 0, 0.3) !important;
  1398. background-color: var(--toggled-btn-bg-color) !important;
  1399. }
  1400. @media (prefers-color-scheme: dark) {
  1401. .findbar .toolbarField[type="checkbox"]:checked + .toolbarLabel {
  1402. background-color: rgba(0, 0, 0, 0.3) !important;
  1403. background-color: var(--toggled-btn-bg-color) !important;
  1404. }
  1405. }
  1406. #findInput {
  1407. width: 200px;
  1408. }
  1409. #findInput::-webkit-input-placeholder {
  1410. color: rgba(191, 191, 191, 1);
  1411. }
  1412. #findInput::-moz-placeholder {
  1413. font-style: normal;
  1414. }
  1415. #findInput:-ms-input-placeholder {
  1416. font-style: normal;
  1417. }
  1418. #findInput::placeholder {
  1419. font-style: normal;
  1420. }
  1421. #findInput[data-status="pending"] {
  1422. background-image: url(images/loading.svg);
  1423. background-image: var(--loading-icon);
  1424. background-repeat: no-repeat;
  1425. background-position: 98%;
  1426. }
  1427. @media (prefers-color-scheme: dark) {
  1428. #findInput[data-status="pending"] {
  1429. background-image: url(images/loading-dark.svg);
  1430. background-image: var(--loading-icon);
  1431. }
  1432. }
  1433. html[dir="rtl"] #findInput[data-status="pending"] {
  1434. background-position: 3px;
  1435. }
  1436. #findInput[data-status="notFound"] {
  1437. background-color: rgba(255, 102, 102, 1);
  1438. }
  1439. .secondaryToolbar {
  1440. padding: 6px 0 10px;
  1441. height: auto;
  1442. z-index: 30000;
  1443. background-color: rgba(255, 255, 255, 1);
  1444. background-color: var(--doorhanger-bg-color);
  1445. }
  1446. @media (prefers-color-scheme: dark) {
  1447. .secondaryToolbar {
  1448. background-color: rgba(74, 74, 79, 1);
  1449. background-color: var(--doorhanger-bg-color);
  1450. }
  1451. }
  1452. html[dir="ltr"] .secondaryToolbar {
  1453. right: 4px;
  1454. }
  1455. html[dir="rtl"] .secondaryToolbar {
  1456. left: 4px;
  1457. }
  1458. #secondaryToolbarButtonContainer {
  1459. max-width: 220px;
  1460. max-height: 400px;
  1461. overflow-y: auto;
  1462. -webkit-overflow-scrolling: touch;
  1463. margin-bottom: -4px;
  1464. }
  1465. #secondaryToolbarButtonContainer.hiddenScrollModeButtons > .scrollModeButtons,
  1466. #secondaryToolbarButtonContainer.hiddenSpreadModeButtons > .spreadModeButtons {
  1467. display: none !important;
  1468. }
  1469. .doorHanger {
  1470. border-radius: 2px;
  1471. box-shadow: 0 1px 5px rgba(12, 12, 13, 0.2),
  1472. 0 0 0 1px rgba(12, 12, 13, 0.2);
  1473. box-shadow: 0 1px 5px var(--doorhanger-border-color),
  1474. 0 0 0 1px var(--doorhanger-border-color);
  1475. }
  1476. @media (prefers-color-scheme: dark) {
  1477. .doorHanger {
  1478. box-shadow: 0 1px 5px rgba(39, 39, 43, 1),
  1479. 0 0 0 1px rgba(39, 39, 43, 1);
  1480. box-shadow: 0 1px 5px var(--doorhanger-border-color),
  1481. 0 0 0 1px var(--doorhanger-border-color);
  1482. }
  1483. }
  1484. .doorHangerRight {
  1485. border-radius: 2px;
  1486. box-shadow: 0 1px 5px rgba(12, 12, 13, 0.2),
  1487. 0 0 0 1px rgba(12, 12, 13, 0.2);
  1488. box-shadow: 0 1px 5px var(--doorhanger-border-color),
  1489. 0 0 0 1px var(--doorhanger-border-color);
  1490. }
  1491. @media (prefers-color-scheme: dark) {
  1492. .doorHangerRight {
  1493. box-shadow: 0 1px 5px rgba(39, 39, 43, 1),
  1494. 0 0 0 1px rgba(39, 39, 43, 1);
  1495. box-shadow: 0 1px 5px var(--doorhanger-border-color),
  1496. 0 0 0 1px var(--doorhanger-border-color);
  1497. }
  1498. }
  1499. .doorHanger:after,
  1500. .doorHanger:before,
  1501. .doorHangerRight:after,
  1502. .doorHangerRight:before {
  1503. bottom: 100%;
  1504. border: solid rgba(0, 0, 0, 0);
  1505. content: " ";
  1506. height: 0;
  1507. width: 0;
  1508. position: absolute;
  1509. pointer-events: none;
  1510. }
  1511. .doorHanger:after,
  1512. .doorHangerRight:after {
  1513. border-width: 8px;
  1514. }
  1515. .doorHanger:after {
  1516. border-bottom-color: rgba(249, 249, 250, 1);
  1517. border-bottom-color: var(--toolbar-bg-color);
  1518. }
  1519. @media (prefers-color-scheme: dark) {
  1520. .doorHanger:after {
  1521. border-bottom-color: rgba(56, 56, 61, 1);
  1522. border-bottom-color: var(--toolbar-bg-color);
  1523. }
  1524. }
  1525. .doorHangerRight:after {
  1526. border-bottom-color: rgba(255, 255, 255, 1);
  1527. border-bottom-color: var(--doorhanger-bg-color);
  1528. }
  1529. @media (prefers-color-scheme: dark) {
  1530. .doorHangerRight:after {
  1531. border-bottom-color: rgba(74, 74, 79, 1);
  1532. border-bottom-color: var(--doorhanger-bg-color);
  1533. }
  1534. }
  1535. .doorHanger:before {
  1536. border-bottom-color: rgba(12, 12, 13, 0.2);
  1537. border-bottom-color: var(--doorhanger-border-color);
  1538. border-width: 9px;
  1539. }
  1540. @media (prefers-color-scheme: dark) {
  1541. .doorHanger:before {
  1542. border-bottom-color: rgba(39, 39, 43, 1);
  1543. border-bottom-color: var(--doorhanger-border-color);
  1544. }
  1545. }
  1546. .doorHangerRight:before {
  1547. border-bottom-color: rgba(12, 12, 13, 0.2);
  1548. border-bottom-color: var(--doorhanger-border-color);
  1549. border-width: 9px;
  1550. }
  1551. @media (prefers-color-scheme: dark) {
  1552. .doorHangerRight:before {
  1553. border-bottom-color: rgba(39, 39, 43, 1);
  1554. border-bottom-color: var(--doorhanger-border-color);
  1555. }
  1556. }
  1557. html[dir="ltr"] .doorHanger:after,
  1558. html[dir="rtl"] .doorHangerRight:after {
  1559. left: 10px;
  1560. margin-left: -8px;
  1561. }
  1562. html[dir="ltr"] .doorHanger:before,
  1563. html[dir="rtl"] .doorHangerRight:before {
  1564. left: 10px;
  1565. margin-left: -9px;
  1566. }
  1567. html[dir="rtl"] .doorHanger:after,
  1568. html[dir="ltr"] .doorHangerRight:after {
  1569. right: 10px;
  1570. margin-right: -8px;
  1571. }
  1572. html[dir="rtl"] .doorHanger:before,
  1573. html[dir="ltr"] .doorHangerRight:before {
  1574. right: 10px;
  1575. margin-right: -9px;
  1576. }
  1577. #findResultsCount {
  1578. background-color: rgba(217, 217, 217, 1);
  1579. color: rgba(82, 82, 82, 1);
  1580. text-align: center;
  1581. padding: 3px 4px;
  1582. margin: 5px;
  1583. }
  1584. #findMsg {
  1585. color: rgba(251, 0, 0, 1);
  1586. }
  1587. #findMsg:empty {
  1588. display: none;
  1589. }
  1590. #toolbarViewerMiddle {
  1591. position: absolute;
  1592. left: 50%;
  1593. transform: translateX(-50%);
  1594. }
  1595. html[dir="ltr"] #toolbarViewerLeft,
  1596. html[dir="rtl"] #toolbarViewerRight,
  1597. html[dir="ltr"] #toolbarSidebarLeft,
  1598. html[dir="rtl"] #toolbarSidebarRight {
  1599. float: left;
  1600. }
  1601. html[dir="ltr"] #toolbarViewerRight,
  1602. html[dir="rtl"] #toolbarViewerLeft,
  1603. html[dir="ltr"] #toolbarSidebarRight,
  1604. html[dir="rtl"] #toolbarSidebarLeft {
  1605. float: right;
  1606. }
  1607. html[dir="ltr"] #toolbarViewerLeft > *,
  1608. html[dir="ltr"] #toolbarViewerMiddle > *,
  1609. html[dir="ltr"] #toolbarViewerRight > *,
  1610. html[dir="ltr"] #toolbarSidebarLeft *,
  1611. html[dir="ltr"] #toolbarSidebarRight *,
  1612. html[dir="ltr"] .findbar * {
  1613. position: relative;
  1614. float: left;
  1615. }
  1616. html[dir="rtl"] #toolbarViewerLeft > *,
  1617. html[dir="rtl"] #toolbarViewerMiddle > *,
  1618. html[dir="rtl"] #toolbarViewerRight > *,
  1619. html[dir="rtl"] #toolbarSidebarLeft *,
  1620. html[dir="rtl"] #toolbarSidebarRight *,
  1621. html[dir="rtl"] .findbar * {
  1622. position: relative;
  1623. float: right;
  1624. }
  1625. .splitToolbarButton {
  1626. margin: 2px 2px 0;
  1627. display: inline-block;
  1628. }
  1629. html[dir="ltr"] .splitToolbarButton > .toolbarButton {
  1630. float: left;
  1631. }
  1632. html[dir="rtl"] .splitToolbarButton > .toolbarButton {
  1633. float: right;
  1634. }
  1635. .toolbarButton,
  1636. .secondaryToolbarButton,
  1637. .overlayButton {
  1638. border: 0 none;
  1639. background: none;
  1640. width: 28px;
  1641. height: 28px;
  1642. }
  1643. .overlayButton {
  1644. background-color: rgba(12, 12, 13, 0.1);
  1645. background-color: var(--overlay-button-bg-color);
  1646. }
  1647. @media (prefers-color-scheme: dark) {
  1648. .overlayButton {
  1649. background-color: rgba(92, 92, 97, 1);
  1650. background-color: var(--overlay-button-bg-color);
  1651. }
  1652. }
  1653. .overlayButton:hover {
  1654. background-color: rgba(12, 12, 13, 0.3);
  1655. background-color: var(--overlay-button-hover-color);
  1656. }
  1657. @media (prefers-color-scheme: dark) {
  1658. .overlayButton:hover {
  1659. background-color: rgba(115, 115, 115, 1);
  1660. background-color: var(--overlay-button-hover-color);
  1661. }
  1662. }
  1663. .overlayButton:focus {
  1664. background-color: rgba(12, 12, 13, 0.3);
  1665. background-color: var(--overlay-button-hover-color);
  1666. }
  1667. @media (prefers-color-scheme: dark) {
  1668. .overlayButton:focus {
  1669. background-color: rgba(115, 115, 115, 1);
  1670. background-color: var(--overlay-button-hover-color);
  1671. }
  1672. }
  1673. .toolbarButton > span {
  1674. display: inline-block;
  1675. width: 0;
  1676. height: 0;
  1677. overflow: hidden;
  1678. }
  1679. .toolbarButton[disabled],
  1680. .secondaryToolbarButton[disabled],
  1681. .overlayButton[disabled] {
  1682. opacity: 0.5;
  1683. }
  1684. .splitToolbarButton.toggled .toolbarButton {
  1685. margin: 0;
  1686. }
  1687. .splitToolbarButton > .toolbarButton:hover {
  1688. background-color: rgba(221, 222, 223, 1);
  1689. background-color: var(--button-hover-color);
  1690. z-index: 199;
  1691. }
  1692. @media (prefers-color-scheme: dark) {
  1693. .splitToolbarButton > .toolbarButton:hover {
  1694. background-color: rgba(102, 102, 103, 1);
  1695. background-color: var(--button-hover-color);
  1696. }
  1697. }
  1698. .splitToolbarButton > .toolbarButton:focus {
  1699. background-color: rgba(221, 222, 223, 1);
  1700. background-color: var(--button-hover-color);
  1701. z-index: 199;
  1702. }
  1703. @media (prefers-color-scheme: dark) {
  1704. .splitToolbarButton > .toolbarButton:focus {
  1705. background-color: rgba(102, 102, 103, 1);
  1706. background-color: var(--button-hover-color);
  1707. }
  1708. }
  1709. .dropdownToolbarButton:hover {
  1710. background-color: rgba(221, 222, 223, 1);
  1711. background-color: var(--button-hover-color);
  1712. z-index: 199;
  1713. }
  1714. @media (prefers-color-scheme: dark) {
  1715. .dropdownToolbarButton:hover {
  1716. background-color: rgba(102, 102, 103, 1);
  1717. background-color: var(--button-hover-color);
  1718. }
  1719. }
  1720. .toolbarButton.textButton:hover {
  1721. background-color: rgba(221, 222, 223, 1);
  1722. background-color: var(--button-hover-color);
  1723. z-index: 199;
  1724. }
  1725. @media (prefers-color-scheme: dark) {
  1726. .toolbarButton.textButton:hover {
  1727. background-color: rgba(102, 102, 103, 1);
  1728. background-color: var(--button-hover-color);
  1729. }
  1730. }
  1731. .toolbarButton.textButton:focus {
  1732. background-color: rgba(221, 222, 223, 1);
  1733. background-color: var(--button-hover-color);
  1734. z-index: 199;
  1735. }
  1736. @media (prefers-color-scheme: dark) {
  1737. .toolbarButton.textButton:focus {
  1738. background-color: rgba(102, 102, 103, 1);
  1739. background-color: var(--button-hover-color);
  1740. }
  1741. }
  1742. .splitToolbarButton > .toolbarButton {
  1743. position: relative;
  1744. }
  1745. html[dir="ltr"] .splitToolbarButton > .toolbarButton:first-child,
  1746. html[dir="rtl"] .splitToolbarButton > .toolbarButton:last-child {
  1747. margin: 0;
  1748. }
  1749. html[dir="ltr"] .splitToolbarButton > .toolbarButton:last-child,
  1750. html[dir="rtl"] .splitToolbarButton > .toolbarButton:first-child {
  1751. margin: 0;
  1752. }
  1753. .splitToolbarButtonSeparator {
  1754. padding: 10px 0;
  1755. width: 1px;
  1756. background-color: rgba(0, 0, 0, 0.3);
  1757. background-color: var(--separator-color);
  1758. z-index: 99;
  1759. display: inline-block;
  1760. margin: 4px 0;
  1761. }
  1762. @media (prefers-color-scheme: dark) {
  1763. .splitToolbarButtonSeparator {
  1764. background-color: rgba(0, 0, 0, 0.3);
  1765. background-color: var(--separator-color);
  1766. }
  1767. }
  1768. .findbar .splitToolbarButtonSeparator {
  1769. background-color: rgba(187, 187, 188, 1);
  1770. background-color: var(--field-border-color);
  1771. margin: 0;
  1772. padding: 13px 0;
  1773. }
  1774. @media (prefers-color-scheme: dark) {
  1775. .findbar .splitToolbarButtonSeparator {
  1776. background-color: rgba(115, 115, 115, 1);
  1777. background-color: var(--field-border-color);
  1778. }
  1779. }
  1780. html[dir="ltr"] .splitToolbarButtonSeparator {
  1781. float: left;
  1782. }
  1783. html[dir="rtl"] .splitToolbarButtonSeparator {
  1784. float: right;
  1785. }
  1786. .toolbarButton {
  1787. min-width: 16px;
  1788. margin: 2px 1px;
  1789. padding: 2px 6px 0;
  1790. border: none;
  1791. border-radius: 2px;
  1792. color: rgba(12, 12, 13, 1);
  1793. color: var(--main-color);
  1794. font-size: 12px;
  1795. line-height: 14px;
  1796. -webkit-user-select: none;
  1797. -moz-user-select: none;
  1798. -ms-user-select: none;
  1799. user-select: none;
  1800. cursor: default;
  1801. box-sizing: border-box;
  1802. }
  1803. @media (prefers-color-scheme: dark) {
  1804. .toolbarButton {
  1805. color: rgba(249, 249, 250, 1);
  1806. color: var(--main-color);
  1807. }
  1808. }
  1809. .dropdownToolbarButton {
  1810. min-width: 16px;
  1811. margin: 2px 1px;
  1812. padding: 2px 6px 0;
  1813. border: none;
  1814. border-radius: 2px;
  1815. color: rgba(12, 12, 13, 1);
  1816. color: var(--main-color);
  1817. font-size: 12px;
  1818. line-height: 14px;
  1819. -webkit-user-select: none;
  1820. -moz-user-select: none;
  1821. -ms-user-select: none;
  1822. user-select: none;
  1823. cursor: default;
  1824. box-sizing: border-box;
  1825. }
  1826. @media (prefers-color-scheme: dark) {
  1827. .dropdownToolbarButton {
  1828. color: rgba(249, 249, 250, 1);
  1829. color: var(--main-color);
  1830. }
  1831. }
  1832. .secondaryToolbarButton {
  1833. min-width: 16px;
  1834. margin: 2px 1px;
  1835. padding: 2px 6px 0;
  1836. border: none;
  1837. border-radius: 2px;
  1838. color: rgba(12, 12, 13, 1);
  1839. color: var(--main-color);
  1840. font-size: 12px;
  1841. line-height: 14px;
  1842. -webkit-user-select: none;
  1843. -moz-user-select: none;
  1844. -ms-user-select: none;
  1845. user-select: none;
  1846. cursor: default;
  1847. box-sizing: border-box;
  1848. }
  1849. @media (prefers-color-scheme: dark) {
  1850. .secondaryToolbarButton {
  1851. color: rgba(249, 249, 250, 1);
  1852. color: var(--main-color);
  1853. }
  1854. }
  1855. .overlayButton {
  1856. min-width: 16px;
  1857. margin: 2px 1px;
  1858. padding: 2px 6px 0;
  1859. border: none;
  1860. border-radius: 2px;
  1861. color: rgba(12, 12, 13, 1);
  1862. color: var(--main-color);
  1863. font-size: 12px;
  1864. line-height: 14px;
  1865. -webkit-user-select: none;
  1866. -moz-user-select: none;
  1867. -ms-user-select: none;
  1868. user-select: none;
  1869. cursor: default;
  1870. box-sizing: border-box;
  1871. }
  1872. @media (prefers-color-scheme: dark) {
  1873. .overlayButton {
  1874. color: rgba(249, 249, 250, 1);
  1875. color: var(--main-color);
  1876. }
  1877. }
  1878. html[dir="ltr"] #toolbarViewerLeft > .toolbarButton:first-child,
  1879. html[dir="rtl"] #toolbarViewerRight > .toolbarButton:last-child {
  1880. margin-left: 2px;
  1881. }
  1882. html[dir="ltr"] #toolbarViewerRight > .toolbarButton:last-child,
  1883. html[dir="rtl"] #toolbarViewerLeft > .toolbarButton:first-child {
  1884. margin-right: 2px;
  1885. }
  1886. .toolbarButton:hover {
  1887. background-color: rgba(221, 222, 223, 1);
  1888. background-color: var(--button-hover-color);
  1889. }
  1890. @media (prefers-color-scheme: dark) {
  1891. .toolbarButton:hover {
  1892. background-color: rgba(102, 102, 103, 1);
  1893. background-color: var(--button-hover-color);
  1894. }
  1895. }
  1896. .toolbarButton:focus {
  1897. background-color: rgba(221, 222, 223, 1);
  1898. background-color: var(--button-hover-color);
  1899. }
  1900. @media (prefers-color-scheme: dark) {
  1901. .toolbarButton:focus {
  1902. background-color: rgba(102, 102, 103, 1);
  1903. background-color: var(--button-hover-color);
  1904. }
  1905. }
  1906. .secondaryToolbarButton:hover {
  1907. background-color: rgba(237, 237, 237, 1);
  1908. background-color: var(--doorhanger-hover-color);
  1909. }
  1910. @media (prefers-color-scheme: dark) {
  1911. .secondaryToolbarButton:hover {
  1912. background-color: rgba(93, 94, 98, 1);
  1913. background-color: var(--doorhanger-hover-color);
  1914. }
  1915. }
  1916. .secondaryToolbarButton:focus {
  1917. background-color: rgba(237, 237, 237, 1);
  1918. background-color: var(--doorhanger-hover-color);
  1919. }
  1920. @media (prefers-color-scheme: dark) {
  1921. .secondaryToolbarButton:focus {
  1922. background-color: rgba(93, 94, 98, 1);
  1923. background-color: var(--doorhanger-hover-color);
  1924. }
  1925. }
  1926. .toolbarButton.toggled {
  1927. background-color: rgba(0, 0, 0, 0.3);
  1928. background-color: var(--toggled-btn-bg-color);
  1929. }
  1930. @media (prefers-color-scheme: dark) {
  1931. .toolbarButton.toggled {
  1932. background-color: rgba(0, 0, 0, 0.3);
  1933. background-color: var(--toggled-btn-bg-color);
  1934. }
  1935. }
  1936. .splitToolbarButton.toggled > .toolbarButton.toggled {
  1937. background-color: rgba(0, 0, 0, 0.3);
  1938. background-color: var(--toggled-btn-bg-color);
  1939. }
  1940. @media (prefers-color-scheme: dark) {
  1941. .splitToolbarButton.toggled > .toolbarButton.toggled {
  1942. background-color: rgba(0, 0, 0, 0.3);
  1943. background-color: var(--toggled-btn-bg-color);
  1944. }
  1945. }
  1946. .secondaryToolbarButton.toggled {
  1947. background-color: rgba(0, 0, 0, 0.3);
  1948. background-color: var(--toggled-btn-bg-color);
  1949. }
  1950. @media (prefers-color-scheme: dark) {
  1951. .secondaryToolbarButton.toggled {
  1952. background-color: rgba(0, 0, 0, 0.3);
  1953. background-color: var(--toggled-btn-bg-color);
  1954. }
  1955. }
  1956. .toolbarButton.toggled:hover:active {
  1957. background-color: rgba(0, 0, 0, 0.4);
  1958. background-color: var(--toggled-hover-active-btn-color);
  1959. }
  1960. @media (prefers-color-scheme: dark) {
  1961. .toolbarButton.toggled:hover:active {
  1962. background-color: rgba(0, 0, 0, 0.4);
  1963. background-color: var(--toggled-hover-active-btn-color);
  1964. }
  1965. }
  1966. .splitToolbarButton.toggled > .toolbarButton.toggled:hover:active {
  1967. background-color: rgba(0, 0, 0, 0.4);
  1968. background-color: var(--toggled-hover-active-btn-color);
  1969. }
  1970. @media (prefers-color-scheme: dark) {
  1971. .splitToolbarButton.toggled > .toolbarButton.toggled:hover:active {
  1972. background-color: rgba(0, 0, 0, 0.4);
  1973. background-color: var(--toggled-hover-active-btn-color);
  1974. }
  1975. }
  1976. .secondaryToolbarButton.toggled:hover:active {
  1977. background-color: rgba(0, 0, 0, 0.4);
  1978. background-color: var(--toggled-hover-active-btn-color);
  1979. }
  1980. @media (prefers-color-scheme: dark) {
  1981. .secondaryToolbarButton.toggled:hover:active {
  1982. background-color: rgba(0, 0, 0, 0.4);
  1983. background-color: var(--toggled-hover-active-btn-color);
  1984. }
  1985. }
  1986. .dropdownToolbarButton {
  1987. width: 140px;
  1988. padding: 0;
  1989. overflow: hidden;
  1990. background-color: rgba(215, 215, 219, 1);
  1991. background-color: var(--dropdown-btn-bg-color);
  1992. margin-top: 2px !important;
  1993. }
  1994. @media (prefers-color-scheme: dark) {
  1995. .dropdownToolbarButton {
  1996. background-color: rgba(74, 74, 79, 1);
  1997. background-color: var(--dropdown-btn-bg-color);
  1998. }
  1999. }
  2000. /* .dropdownToolbarButton::after {
  2001. top: 6px;
  2002. pointer-events: none;
  2003. -webkit-mask-image: url(images/toolbarButton-menuArrow.svg);
  2004. -webkit-mask-image: var(--toolbarButton-menuArrow-icon);
  2005. mask-image: url(images/toolbarButton-menuArrow.svg);
  2006. mask-image: var(--toolbarButton-menuArrow-icon);
  2007. } */
  2008. html[dir="ltr"] .dropdownToolbarButton::after {
  2009. right: 7px;
  2010. }
  2011. html[dir="rtl"] .dropdownToolbarButton::after {
  2012. left: 7px;
  2013. }
  2014. .dropdownToolbarButton > select {
  2015. width: 162px;
  2016. height: 28px;
  2017. font-size: 12px;
  2018. color: rgba(12, 12, 13, 1);
  2019. color: var(--main-color);
  2020. margin: 0;
  2021. padding: 1px 0 2px;
  2022. border: none;
  2023. background-color: rgba(215, 215, 219, 1);
  2024. background-color: var(--dropdown-btn-bg-color);
  2025. }
  2026. @media (prefers-color-scheme: dark) {
  2027. .dropdownToolbarButton > select {
  2028. background-color: rgba(74, 74, 79, 1);
  2029. background-color: var(--dropdown-btn-bg-color);
  2030. }
  2031. }
  2032. @media (prefers-color-scheme: dark) {
  2033. .dropdownToolbarButton > select {
  2034. color: rgba(249, 249, 250, 1);
  2035. color: var(--main-color);
  2036. }
  2037. }
  2038. html[dir="ltr"] .dropdownToolbarButton > select {
  2039. padding-left: 4px;
  2040. }
  2041. html[dir="rtl"] .dropdownToolbarButton > select {
  2042. padding-right: 4px;
  2043. }
  2044. .dropdownToolbarButton > select:hover {
  2045. background-color: rgba(221, 222, 223, 1);
  2046. background-color: var(--button-hover-color);
  2047. }
  2048. @media (prefers-color-scheme: dark) {
  2049. .dropdownToolbarButton > select:hover {
  2050. background-color: rgba(102, 102, 103, 1);
  2051. background-color: var(--button-hover-color);
  2052. }
  2053. }
  2054. .dropdownToolbarButton > select:focus {
  2055. background-color: rgba(221, 222, 223, 1);
  2056. background-color: var(--button-hover-color);
  2057. }
  2058. @media (prefers-color-scheme: dark) {
  2059. .dropdownToolbarButton > select:focus {
  2060. background-color: rgba(102, 102, 103, 1);
  2061. background-color: var(--button-hover-color);
  2062. }
  2063. }
  2064. .dropdownToolbarButton > select > option {
  2065. background: rgba(255, 255, 255, 1);
  2066. background: var(--doorhanger-bg-color);
  2067. }
  2068. @media (prefers-color-scheme: dark) {
  2069. .dropdownToolbarButton > select > option {
  2070. background: rgba(74, 74, 79, 1);
  2071. background: var(--doorhanger-bg-color);
  2072. }
  2073. }
  2074. #customScaleOption {
  2075. display: none;
  2076. }
  2077. #pageWidthOption {
  2078. border-bottom: 1px rgba(255, 255, 255, 0.5) solid;
  2079. }
  2080. .toolbarButtonSpacer {
  2081. width: 30px;
  2082. display: inline-block;
  2083. height: 1px;
  2084. }
  2085. .toolbarButton::before {
  2086. /* All matching images have a size of 16x16
  2087. * All relevant containers have a size of 28x28 */
  2088. position: absolute;
  2089. display: inline-block;
  2090. width: 16px;
  2091. height: 16px;
  2092. content: "";
  2093. background-color: rgba(0, 0, 0, 1);
  2094. background-color: var(--toolbar-icon-bg-color);
  2095. -webkit-mask-size: cover;
  2096. mask-size: cover;
  2097. }
  2098. @media (prefers-color-scheme: dark) {
  2099. .toolbarButton::before {
  2100. background-color: rgba(255, 255, 255, 1);
  2101. background-color: var(--toolbar-icon-bg-color);
  2102. }
  2103. }
  2104. .secondaryToolbarButton::before {
  2105. /* All matching images have a size of 16x16
  2106. * All relevant containers have a size of 28x28 */
  2107. position: absolute;
  2108. display: inline-block;
  2109. width: 16px;
  2110. height: 16px;
  2111. content: "";
  2112. background-color: rgba(0, 0, 0, 1);
  2113. background-color: var(--toolbar-icon-bg-color);
  2114. -webkit-mask-size: cover;
  2115. mask-size: cover;
  2116. }
  2117. @media (prefers-color-scheme: dark) {
  2118. .secondaryToolbarButton::before {
  2119. background-color: rgba(255, 255, 255, 1);
  2120. background-color: var(--toolbar-icon-bg-color);
  2121. }
  2122. }
  2123. .dropdownToolbarButton::after {
  2124. /* All matching images have a size of 16x16
  2125. * All relevant containers have a size of 28x28 */
  2126. position: absolute;
  2127. display: inline-block;
  2128. width: 16px;
  2129. height: 16px;
  2130. content: "";
  2131. background-color: rgba(0, 0, 0, 1);
  2132. background-color: var(--toolbar-icon-bg-color);
  2133. -webkit-mask-size: cover;
  2134. mask-size: cover;
  2135. }
  2136. @media (prefers-color-scheme: dark) {
  2137. .dropdownToolbarButton::after {
  2138. background-color: rgba(255, 255, 255, 1);
  2139. background-color: var(--toolbar-icon-bg-color);
  2140. }
  2141. }
  2142. .treeItemToggler::before {
  2143. /* All matching images have a size of 16x16
  2144. * All relevant containers have a size of 28x28 */
  2145. position: absolute;
  2146. display: inline-block;
  2147. width: 16px;
  2148. height: 16px;
  2149. content: "";
  2150. background-color: rgba(0, 0, 0, 1);
  2151. background-color: var(--toolbar-icon-bg-color);
  2152. -webkit-mask-size: cover;
  2153. mask-size: cover;
  2154. }
  2155. @media (prefers-color-scheme: dark) {
  2156. .treeItemToggler::before {
  2157. background-color: rgba(255, 255, 255, 1);
  2158. background-color: var(--toolbar-icon-bg-color);
  2159. }
  2160. }
  2161. .toolbarButton::before {
  2162. opacity: 0.7;
  2163. opacity: var(--toolbar-icon-opacity);
  2164. top: 6px;
  2165. left: 6px;
  2166. }
  2167. .secondaryToolbarButton::before {
  2168. opacity: 0.9;
  2169. opacity: var(--doorhanger-icon-opacity);
  2170. top: 5px;
  2171. }
  2172. html[dir="ltr"] .secondaryToolbarButton::before {
  2173. left: 12px;
  2174. }
  2175. html[dir="rtl"] .secondaryToolbarButton::before {
  2176. right: 12px;
  2177. }
  2178. /*
  2179. .toolbarButton#sidebarToggle::before {
  2180. -webkit-mask-image: url(images/toolbarButton-sidebarToggle.svg);
  2181. -webkit-mask-image: var(--toolbarButton-sidebarToggle-icon);
  2182. mask-image: url(images/toolbarButton-sidebarToggle.svg);
  2183. mask-image: var(--toolbarButton-sidebarToggle-icon);
  2184. }
  2185. html[dir="rtl"] .toolbarButton#sidebarToggle::before {
  2186. transform: scaleX(-1);
  2187. }
  2188. .toolbarButton#secondaryToolbarToggle::before {
  2189. -webkit-mask-image: url(images/toolbarButton-secondaryToolbarToggle.svg);
  2190. -webkit-mask-image: var(--toolbarButton-secondaryToolbarToggle-icon);
  2191. mask-image: url(images/toolbarButton-secondaryToolbarToggle.svg);
  2192. mask-image: var(--toolbarButton-secondaryToolbarToggle-icon);
  2193. }
  2194. html[dir="rtl"] .toolbarButton#secondaryToolbarToggle::before {
  2195. transform: scaleX(-1);
  2196. }
  2197. .toolbarButton.findPrevious::before {
  2198. -webkit-mask-image: url(images/findbarButton-previous.svg);
  2199. -webkit-mask-image: var(--findbarButton-previous-icon);
  2200. mask-image: url(images/findbarButton-previous.svg);
  2201. mask-image: var(--findbarButton-previous-icon);
  2202. }
  2203. .toolbarButton.findNext::before {
  2204. -webkit-mask-image: url(images/findbarButton-next.svg);
  2205. -webkit-mask-image: var(--findbarButton-next-icon);
  2206. mask-image: url(images/findbarButton-next.svg);
  2207. mask-image: var(--findbarButton-next-icon);
  2208. }
  2209. .toolbarButton.pageUp::before {
  2210. -webkit-mask-image: url(images/toolbarButton-pageUp.svg);
  2211. -webkit-mask-image: var(--toolbarButton-pageUp-icon);
  2212. mask-image: url(images/toolbarButton-pageUp.svg);
  2213. mask-image: var(--toolbarButton-pageUp-icon);
  2214. }
  2215. .toolbarButton.pageDown::before {
  2216. -webkit-mask-image: url(images/toolbarButton-pageDown.svg);
  2217. -webkit-mask-image: var(--toolbarButton-pageDown-icon);
  2218. mask-image: url(images/toolbarButton-pageDown.svg);
  2219. mask-image: var(--toolbarButton-pageDown-icon);
  2220. }
  2221. .toolbarButton.zoomOut::before {
  2222. -webkit-mask-image: url(images/toolbarButton-zoomOut.svg);
  2223. -webkit-mask-image: var(--toolbarButton-zoomOut-icon);
  2224. mask-image: url(images/toolbarButton-zoomOut.svg);
  2225. mask-image: var(--toolbarButton-zoomOut-icon);
  2226. }
  2227. .toolbarButton.zoomIn::before {
  2228. -webkit-mask-image: url(images/toolbarButton-zoomIn.svg);
  2229. -webkit-mask-image: var(--toolbarButton-zoomIn-icon);
  2230. mask-image: url(images/toolbarButton-zoomIn.svg);
  2231. mask-image: var(--toolbarButton-zoomIn-icon);
  2232. }
  2233. .toolbarButton.presentationMode::before {
  2234. -webkit-mask-image: url(images/toolbarButton-presentationMode.svg);
  2235. -webkit-mask-image: var(--toolbarButton-presentationMode-icon);
  2236. mask-image: url(images/toolbarButton-presentationMode.svg);
  2237. mask-image: var(--toolbarButton-presentationMode-icon);
  2238. }
  2239. .secondaryToolbarButton.presentationMode::before {
  2240. -webkit-mask-image: url(images/toolbarButton-presentationMode.svg);
  2241. -webkit-mask-image: var(--toolbarButton-presentationMode-icon);
  2242. mask-image: url(images/toolbarButton-presentationMode.svg);
  2243. mask-image: var(--toolbarButton-presentationMode-icon);
  2244. }
  2245. .toolbarButton.print::before {
  2246. -webkit-mask-image: url(images/toolbarButton-print.svg);
  2247. -webkit-mask-image: var(--toolbarButton-print-icon);
  2248. mask-image: url(images/toolbarButton-print.svg);
  2249. mask-image: var(--toolbarButton-print-icon);
  2250. }
  2251. .secondaryToolbarButton.print::before {
  2252. -webkit-mask-image: url(images/toolbarButton-print.svg);
  2253. -webkit-mask-image: var(--toolbarButton-print-icon);
  2254. mask-image: url(images/toolbarButton-print.svg);
  2255. mask-image: var(--toolbarButton-print-icon);
  2256. }
  2257. .toolbarButton.openFile::before {
  2258. -webkit-mask-image: url(images/toolbarButton-openFile.svg);
  2259. -webkit-mask-image: var(--toolbarButton-openFile-icon);
  2260. mask-image: url(images/toolbarButton-openFile.svg);
  2261. mask-image: var(--toolbarButton-openFile-icon);
  2262. }
  2263. .secondaryToolbarButton.openFile::before {
  2264. -webkit-mask-image: url(images/toolbarButton-openFile.svg);
  2265. -webkit-mask-image: var(--toolbarButton-openFile-icon);
  2266. mask-image: url(images/toolbarButton-openFile.svg);
  2267. mask-image: var(--toolbarButton-openFile-icon);
  2268. }
  2269. .toolbarButton.download::before {
  2270. -webkit-mask-image: url(images/toolbarButton-download.svg);
  2271. -webkit-mask-image: var(--toolbarButton-download-icon);
  2272. mask-image: url(images/toolbarButton-download.svg);
  2273. mask-image: var(--toolbarButton-download-icon);
  2274. }
  2275. .secondaryToolbarButton.download::before {
  2276. -webkit-mask-image: url(images/toolbarButton-download.svg);
  2277. -webkit-mask-image: var(--toolbarButton-download-icon);
  2278. mask-image: url(images/toolbarButton-download.svg);
  2279. mask-image: var(--toolbarButton-download-icon);
  2280. } */
  2281. .secondaryToolbarButton.bookmark {
  2282. padding-top: 6px;
  2283. text-decoration: none;
  2284. }
  2285. .bookmark[href="#"] {
  2286. opacity: 0.5;
  2287. pointer-events: none;
  2288. }
  2289. /*
  2290. .toolbarButton.bookmark::before {
  2291. -webkit-mask-image: url(images/toolbarButton-bookmark.svg);
  2292. -webkit-mask-image: var(--toolbarButton-bookmark-icon);
  2293. mask-image: url(images/toolbarButton-bookmark.svg);
  2294. mask-image: var(--toolbarButton-bookmark-icon);
  2295. }
  2296. .secondaryToolbarButton.bookmark::before {
  2297. -webkit-mask-image: url(images/toolbarButton-bookmark.svg);
  2298. -webkit-mask-image: var(--toolbarButton-bookmark-icon);
  2299. mask-image: url(images/toolbarButton-bookmark.svg);
  2300. mask-image: var(--toolbarButton-bookmark-icon);
  2301. }
  2302. #viewThumbnail.toolbarButton::before {
  2303. -webkit-mask-image: url(images/toolbarButton-viewThumbnail.svg);
  2304. -webkit-mask-image: var(--toolbarButton-viewThumbnail-icon);
  2305. mask-image: url(images/toolbarButton-viewThumbnail.svg);
  2306. mask-image: var(--toolbarButton-viewThumbnail-icon);
  2307. }
  2308. #viewOutline.toolbarButton::before {
  2309. -webkit-mask-image: url(images/toolbarButton-viewOutline.svg);
  2310. -webkit-mask-image: var(--toolbarButton-viewOutline-icon);
  2311. mask-image: url(images/toolbarButton-viewOutline.svg);
  2312. mask-image: var(--toolbarButton-viewOutline-icon);
  2313. }
  2314. html[dir="rtl"] #viewOutline.toolbarButton::before {
  2315. transform: scaleX(-1);
  2316. }
  2317. #viewAttachments.toolbarButton::before {
  2318. -webkit-mask-image: url(images/toolbarButton-viewAttachments.svg);
  2319. -webkit-mask-image: var(--toolbarButton-viewAttachments-icon);
  2320. mask-image: url(images/toolbarButton-viewAttachments.svg);
  2321. mask-image: var(--toolbarButton-viewAttachments-icon);
  2322. }
  2323. #viewLayers.toolbarButton::before {
  2324. -webkit-mask-image: url(images/toolbarButton-viewLayers.svg);
  2325. -webkit-mask-image: var(--toolbarButton-viewLayers-icon);
  2326. mask-image: url(images/toolbarButton-viewLayers.svg);
  2327. mask-image: var(--toolbarButton-viewLayers-icon);
  2328. }
  2329. #currentOutlineItem.toolbarButton::before {
  2330. -webkit-mask-image: url(images/toolbarButton-currentOutlineItem.svg);
  2331. -webkit-mask-image: var(--toolbarButton-currentOutlineItem-icon);
  2332. mask-image: url(images/toolbarButton-currentOutlineItem.svg);
  2333. mask-image: var(--toolbarButton-currentOutlineItem-icon);
  2334. }
  2335. html[dir="rtl"] #currentOutlineItem.toolbarButton::before {
  2336. transform: scaleX(-1);
  2337. }
  2338. #viewFind.toolbarButton::before {
  2339. -webkit-mask-image: url(images/toolbarButton-search.svg);
  2340. -webkit-mask-image: var(--toolbarButton-search-icon);
  2341. mask-image: url(images/toolbarButton-search.svg);
  2342. mask-image: var(--toolbarButton-search-icon);
  2343. } */
  2344. .toolbarButton.pdfSidebarNotification::after {
  2345. position: absolute;
  2346. display: inline-block;
  2347. top: 1px;
  2348. /* Create a filled circle, with a diameter of 9 pixels, using only CSS: */
  2349. content: "";
  2350. background-color: rgba(112, 219, 85, 1);
  2351. height: 9px;
  2352. width: 9px;
  2353. border-radius: 50%;
  2354. }
  2355. html[dir="ltr"] .toolbarButton.pdfSidebarNotification::after {
  2356. left: 17px;
  2357. }
  2358. html[dir="rtl"] .toolbarButton.pdfSidebarNotification::after {
  2359. right: 17px;
  2360. }
  2361. .secondaryToolbarButton {
  2362. position: relative;
  2363. margin: 0;
  2364. padding: 0 0 1px;
  2365. height: auto;
  2366. min-height: 26px;
  2367. width: auto;
  2368. min-width: 100%;
  2369. white-space: normal;
  2370. border-radius: 0;
  2371. box-sizing: border-box;
  2372. }
  2373. html[dir="ltr"] .secondaryToolbarButton {
  2374. padding-left: 36px;
  2375. text-align: left;
  2376. }
  2377. html[dir="rtl"] .secondaryToolbarButton {
  2378. padding-right: 36px;
  2379. text-align: right;
  2380. }
  2381. html[dir="ltr"] .secondaryToolbarButton > span {
  2382. padding-right: 4px;
  2383. }
  2384. html[dir="rtl"] .secondaryToolbarButton > span {
  2385. padding-left: 4px;
  2386. }
  2387. /*
  2388. .secondaryToolbarButton.firstPage::before {
  2389. -webkit-mask-image: url(images/secondaryToolbarButton-firstPage.svg);
  2390. -webkit-mask-image: var(--secondaryToolbarButton-firstPage-icon);
  2391. mask-image: url(images/secondaryToolbarButton-firstPage.svg);
  2392. mask-image: var(--secondaryToolbarButton-firstPage-icon);
  2393. }
  2394. .secondaryToolbarButton.lastPage::before {
  2395. -webkit-mask-image: url(images/secondaryToolbarButton-lastPage.svg);
  2396. -webkit-mask-image: var(--secondaryToolbarButton-lastPage-icon);
  2397. mask-image: url(images/secondaryToolbarButton-lastPage.svg);
  2398. mask-image: var(--secondaryToolbarButton-lastPage-icon);
  2399. }
  2400. .secondaryToolbarButton.rotateCcw::before {
  2401. -webkit-mask-image: url(images/secondaryToolbarButton-rotateCcw.svg);
  2402. -webkit-mask-image: var(--secondaryToolbarButton-rotateCcw-icon);
  2403. mask-image: url(images/secondaryToolbarButton-rotateCcw.svg);
  2404. mask-image: var(--secondaryToolbarButton-rotateCcw-icon);
  2405. }
  2406. .secondaryToolbarButton.rotateCw::before {
  2407. -webkit-mask-image: url(images/secondaryToolbarButton-rotateCw.svg);
  2408. -webkit-mask-image: var(--secondaryToolbarButton-rotateCw-icon);
  2409. mask-image: url(images/secondaryToolbarButton-rotateCw.svg);
  2410. mask-image: var(--secondaryToolbarButton-rotateCw-icon);
  2411. }
  2412. .secondaryToolbarButton.selectTool::before {
  2413. -webkit-mask-image: url(images/secondaryToolbarButton-selectTool.svg);
  2414. -webkit-mask-image: var(--secondaryToolbarButton-selectTool-icon);
  2415. mask-image: url(images/secondaryToolbarButton-selectTool.svg);
  2416. mask-image: var(--secondaryToolbarButton-selectTool-icon);
  2417. }
  2418. .secondaryToolbarButton.handTool::before {
  2419. -webkit-mask-image: url(images/secondaryToolbarButton-handTool.svg);
  2420. -webkit-mask-image: var(--secondaryToolbarButton-handTool-icon);
  2421. mask-image: url(images/secondaryToolbarButton-handTool.svg);
  2422. mask-image: var(--secondaryToolbarButton-handTool-icon);
  2423. }
  2424. .secondaryToolbarButton.scrollVertical::before {
  2425. -webkit-mask-image: url(images/secondaryToolbarButton-scrollVertical.svg);
  2426. -webkit-mask-image: var(--secondaryToolbarButton-scrollVertical-icon);
  2427. mask-image: url(images/secondaryToolbarButton-scrollVertical.svg);
  2428. mask-image: var(--secondaryToolbarButton-scrollVertical-icon);
  2429. }
  2430. .secondaryToolbarButton.scrollHorizontal::before {
  2431. -webkit-mask-image: url(images/secondaryToolbarButton-scrollHorizontal.svg);
  2432. -webkit-mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon);
  2433. mask-image: url(images/secondaryToolbarButton-scrollHorizontal.svg);
  2434. mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon);
  2435. }
  2436. .secondaryToolbarButton.scrollWrapped::before {
  2437. -webkit-mask-image: url(images/secondaryToolbarButton-scrollWrapped.svg);
  2438. -webkit-mask-image: var(--secondaryToolbarButton-scrollWrapped-icon);
  2439. mask-image: url(images/secondaryToolbarButton-scrollWrapped.svg);
  2440. mask-image: var(--secondaryToolbarButton-scrollWrapped-icon);
  2441. }
  2442. .secondaryToolbarButton.spreadNone::before {
  2443. -webkit-mask-image: url(images/secondaryToolbarButton-spreadNone.svg);
  2444. -webkit-mask-image: var(--secondaryToolbarButton-spreadNone-icon);
  2445. mask-image: url(images/secondaryToolbarButton-spreadNone.svg);
  2446. mask-image: var(--secondaryToolbarButton-spreadNone-icon);
  2447. }
  2448. .secondaryToolbarButton.spreadOdd::before {
  2449. -webkit-mask-image: url(images/secondaryToolbarButton-spreadOdd.svg);
  2450. -webkit-mask-image: var(--secondaryToolbarButton-spreadOdd-icon);
  2451. mask-image: url(images/secondaryToolbarButton-spreadOdd.svg);
  2452. mask-image: var(--secondaryToolbarButton-spreadOdd-icon);
  2453. }
  2454. .secondaryToolbarButton.spreadEven::before {
  2455. -webkit-mask-image: url(images/secondaryToolbarButton-spreadEven.svg);
  2456. -webkit-mask-image: var(--secondaryToolbarButton-spreadEven-icon);
  2457. mask-image: url(images/secondaryToolbarButton-spreadEven.svg);
  2458. mask-image: var(--secondaryToolbarButton-spreadEven-icon);
  2459. }
  2460. .secondaryToolbarButton.documentProperties::before {
  2461. -webkit-mask-image: url(images/secondaryToolbarButton-documentProperties.svg);
  2462. -webkit-mask-image: var(--secondaryToolbarButton-documentProperties-icon);
  2463. mask-image: url(images/secondaryToolbarButton-documentProperties.svg);
  2464. mask-image: var(--secondaryToolbarButton-documentProperties-icon);
  2465. } */
  2466. .verticalToolbarSeparator {
  2467. display: block;
  2468. padding: 11px 0;
  2469. margin: 5px 2px;
  2470. width: 1px;
  2471. background-color: rgba(0, 0, 0, 0.3);
  2472. background-color: var(--separator-color);
  2473. }
  2474. @media (prefers-color-scheme: dark) {
  2475. .verticalToolbarSeparator {
  2476. background-color: rgba(0, 0, 0, 0.3);
  2477. background-color: var(--separator-color);
  2478. }
  2479. }
  2480. html[dir="ltr"] .verticalToolbarSeparator {
  2481. margin-left: 2px;
  2482. }
  2483. html[dir="rtl"] .verticalToolbarSeparator {
  2484. margin-right: 2px;
  2485. }
  2486. .horizontalToolbarSeparator {
  2487. display: block;
  2488. margin: 6px 0 5px;
  2489. height: 1px;
  2490. width: 100%;
  2491. border-top: 1px solid rgba(222, 222, 222, 1);
  2492. border-top: 1px solid var(--doorhanger-separator-color);
  2493. }
  2494. @media (prefers-color-scheme: dark) {
  2495. .horizontalToolbarSeparator {
  2496. border-top: 1px solid rgba(92, 92, 97, 1);
  2497. border-top: 1px solid var(--doorhanger-separator-color);
  2498. }
  2499. }
  2500. .toolbarField {
  2501. padding: 4px 7px;
  2502. margin: 3px 0;
  2503. border-radius: 2px;
  2504. background-color: rgba(255, 255, 255, 1);
  2505. background-color: var(--field-bg-color);
  2506. background-clip: padding-box;
  2507. border-width: 1px;
  2508. border-style: solid;
  2509. border-color: rgba(187, 187, 188, 1);
  2510. border-color: var(--field-border-color);
  2511. box-shadow: none;
  2512. color: rgba(6, 6, 6, 1);
  2513. color: var(--field-color);
  2514. font-size: 12px;
  2515. line-height: 16px;
  2516. outline-style: none;
  2517. }
  2518. @media (prefers-color-scheme: dark) {
  2519. .toolbarField {
  2520. color: rgba(250, 250, 250, 1);
  2521. color: var(--field-color);
  2522. }
  2523. }
  2524. @media (prefers-color-scheme: dark) {
  2525. .toolbarField {
  2526. border-color: rgba(115, 115, 115, 1);
  2527. border-color: var(--field-border-color);
  2528. }
  2529. }
  2530. @media (prefers-color-scheme: dark) {
  2531. .toolbarField {
  2532. background-color: rgba(64, 64, 68, 1);
  2533. background-color: var(--field-bg-color);
  2534. }
  2535. }
  2536. .toolbarField[type="checkbox"] {
  2537. opacity: 0;
  2538. position: absolute !important;
  2539. left: 0;
  2540. }
  2541. html[dir="ltr"] .toolbarField[type="checkbox"] {
  2542. margin: 10px 0 3px 7px;
  2543. }
  2544. html[dir="rtl"] .toolbarField[type="checkbox"] {
  2545. margin: 10px 7px 3px 0;
  2546. }
  2547. .toolbarField.pageNumber {
  2548. -moz-appearance: textfield; /* hides the spinner in moz */
  2549. min-width: 16px;
  2550. text-align: right;
  2551. width: 40px;
  2552. }
  2553. .toolbarField.pageNumber.visiblePageIsLoading {
  2554. background-image: url(images/loading.svg);
  2555. background-image: var(--loading-icon);
  2556. background-repeat: no-repeat;
  2557. background-position: 3px;
  2558. }
  2559. @media (prefers-color-scheme: dark) {
  2560. .toolbarField.pageNumber.visiblePageIsLoading {
  2561. background-image: url(images/loading-dark.svg);
  2562. background-image: var(--loading-icon);
  2563. }
  2564. }
  2565. .toolbarField.pageNumber::-webkit-inner-spin-button,
  2566. .toolbarField.pageNumber::-webkit-outer-spin-button {
  2567. -webkit-appearance: none;
  2568. margin: 0;
  2569. }
  2570. .toolbarField:focus {
  2571. border-color: #0a84ff;
  2572. }
  2573. .toolbarLabel {
  2574. min-width: 16px;
  2575. padding: 6px;
  2576. margin: 2px;
  2577. border: 1px solid rgba(0, 0, 0, 0);
  2578. border-radius: 2px;
  2579. color: rgba(12, 12, 13, 1);
  2580. color: var(--main-color);
  2581. font-size: 12px;
  2582. line-height: 14px;
  2583. text-align: left;
  2584. -webkit-user-select: none;
  2585. -moz-user-select: none;
  2586. -ms-user-select: none;
  2587. user-select: none;
  2588. cursor: default;
  2589. }
  2590. @media (prefers-color-scheme: dark) {
  2591. .toolbarLabel {
  2592. color: rgba(249, 249, 250, 1);
  2593. color: var(--main-color);
  2594. }
  2595. }
  2596. html[dir="ltr"] #numPages.toolbarLabel {
  2597. padding-left: 2px;
  2598. }
  2599. html[dir="rtl"] #numPages.toolbarLabel {
  2600. padding-right: 2px;
  2601. }
  2602. #thumbnailView {
  2603. position: absolute;
  2604. width: calc(100% - 60px);
  2605. top: 0;
  2606. bottom: 0;
  2607. padding: 10px 30px 0;
  2608. overflow: auto;
  2609. -webkit-overflow-scrolling: touch;
  2610. }
  2611. #thumbnailView > a:active,
  2612. #thumbnailView > a:focus {
  2613. outline: 0;
  2614. }
  2615. .thumbnail {
  2616. margin: 0 10px 5px;
  2617. }
  2618. html[dir="ltr"] .thumbnail {
  2619. float: left;
  2620. }
  2621. html[dir="rtl"] .thumbnail {
  2622. float: right;
  2623. }
  2624. #thumbnailView > a:last-of-type > .thumbnail {
  2625. margin-bottom: 10px;
  2626. }
  2627. #thumbnailView > a:last-of-type > .thumbnail:not([data-loaded]) {
  2628. margin-bottom: 9px;
  2629. }
  2630. .thumbnail:not([data-loaded]) {
  2631. border: 1px dashed rgba(132, 132, 132, 1);
  2632. margin: -1px 9px 4px;
  2633. }
  2634. .thumbnailImage {
  2635. border: 1px solid rgba(0, 0, 0, 0);
  2636. box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  2637. opacity: 0.8;
  2638. z-index: 99;
  2639. background-color: rgba(255, 255, 255, 1);
  2640. background-clip: content-box;
  2641. }
  2642. .thumbnailSelectionRing {
  2643. border-radius: 2px;
  2644. padding: 7px;
  2645. }
  2646. a:focus > .thumbnail > .thumbnailSelectionRing > .thumbnailImage,
  2647. .thumbnail:hover > .thumbnailSelectionRing > .thumbnailImage {
  2648. opacity: 0.9;
  2649. }
  2650. a:focus > .thumbnail > .thumbnailSelectionRing {
  2651. background-color: rgba(0, 0, 0, 0.15);
  2652. background-color: var(--sidebaritem-bg-color);
  2653. background-clip: padding-box;
  2654. color: rgba(255, 255, 255, 0.9);
  2655. }
  2656. @media (prefers-color-scheme: dark) {
  2657. a:focus > .thumbnail > .thumbnailSelectionRing {
  2658. background-color: rgba(255, 255, 255, 0.15);
  2659. background-color: var(--sidebaritem-bg-color);
  2660. }
  2661. }
  2662. .thumbnail:hover > .thumbnailSelectionRing {
  2663. background-color: rgba(0, 0, 0, 0.15);
  2664. background-color: var(--sidebaritem-bg-color);
  2665. background-clip: padding-box;
  2666. color: rgba(255, 255, 255, 0.9);
  2667. }
  2668. @media (prefers-color-scheme: dark) {
  2669. .thumbnail:hover > .thumbnailSelectionRing {
  2670. background-color: rgba(255, 255, 255, 0.15);
  2671. background-color: var(--sidebaritem-bg-color);
  2672. }
  2673. }
  2674. .thumbnail.selected > .thumbnailSelectionRing > .thumbnailImage {
  2675. opacity: 1;
  2676. }
  2677. .thumbnail.selected > .thumbnailSelectionRing {
  2678. background-color: rgba(0, 0, 0, 0.15);
  2679. background-color: var(--sidebaritem-bg-color);
  2680. background-clip: padding-box;
  2681. color: rgba(255, 255, 255, 1);
  2682. }
  2683. @media (prefers-color-scheme: dark) {
  2684. .thumbnail.selected > .thumbnailSelectionRing {
  2685. background-color: rgba(255, 255, 255, 0.15);
  2686. background-color: var(--sidebaritem-bg-color);
  2687. }
  2688. }
  2689. #outlineView,
  2690. #attachmentsView,
  2691. #layersView {
  2692. position: absolute;
  2693. width: calc(100% - 8px);
  2694. top: 0;
  2695. bottom: 0;
  2696. padding: 4px 4px 0;
  2697. overflow: auto;
  2698. -webkit-overflow-scrolling: touch;
  2699. -webkit-user-select: none;
  2700. -moz-user-select: none;
  2701. -ms-user-select: none;
  2702. user-select: none;
  2703. }
  2704. html[dir="ltr"] .treeWithDeepNesting > .treeItem,
  2705. html[dir="ltr"] .treeItem > .treeItems {
  2706. margin-left: 20px;
  2707. }
  2708. html[dir="rtl"] .treeWithDeepNesting > .treeItem,
  2709. html[dir="rtl"] .treeItem > .treeItems {
  2710. margin-right: 20px;
  2711. }
  2712. .treeItem > a {
  2713. text-decoration: none;
  2714. display: inline-block;
  2715. min-width: 95%;
  2716. /* Subtract the right padding (left, in RTL mode) of the container: */
  2717. min-width: calc(100% - 4px);
  2718. height: auto;
  2719. margin-bottom: 1px;
  2720. border-radius: 2px;
  2721. color: rgba(0, 0, 0, 0.8);
  2722. color: var(--treeitem-color);
  2723. font-size: 13px;
  2724. line-height: 15px;
  2725. -webkit-user-select: none;
  2726. -moz-user-select: none;
  2727. -ms-user-select: none;
  2728. user-select: none;
  2729. white-space: normal;
  2730. cursor: pointer;
  2731. }
  2732. @media (prefers-color-scheme: dark) {
  2733. .treeItem > a {
  2734. color: rgba(255, 255, 255, 0.8);
  2735. color: var(--treeitem-color);
  2736. }
  2737. }
  2738. html[dir="ltr"] .treeItem > a {
  2739. padding: 2px 0 5px 4px;
  2740. }
  2741. html[dir="rtl"] .treeItem > a {
  2742. padding: 2px 4px 5px 0;
  2743. }
  2744. #layersView .treeItem > a > * {
  2745. cursor: pointer;
  2746. }
  2747. html[dir="ltr"] #layersView .treeItem > a > label {
  2748. padding-left: 4px;
  2749. }
  2750. html[dir="rtl"] #layersView .treesItem > a > label {
  2751. padding-right: 4px;
  2752. }
  2753. .treeItemToggler {
  2754. position: relative;
  2755. height: 0;
  2756. width: 0;
  2757. color: rgba(255, 255, 255, 0.5);
  2758. }
  2759. .treeItemToggler::before {
  2760. -webkit-mask-image: url(images/treeitem-expanded.svg);
  2761. -webkit-mask-image: var(--treeitem-expanded-icon);
  2762. mask-image: url(images/treeitem-expanded.svg);
  2763. mask-image: var(--treeitem-expanded-icon);
  2764. }
  2765. .treeItemToggler.treeItemsHidden::before {
  2766. -webkit-mask-image: url(images/treeitem-collapsed.svg);
  2767. -webkit-mask-image: var(--treeitem-collapsed-icon);
  2768. mask-image: url(images/treeitem-collapsed.svg);
  2769. mask-image: var(--treeitem-collapsed-icon);
  2770. }
  2771. html[dir="rtl"] .treeItemToggler.treeItemsHidden::before {
  2772. transform: scaleX(-1);
  2773. }
  2774. .treeItemToggler.treeItemsHidden ~ .treeItems {
  2775. display: none;
  2776. }
  2777. html[dir="ltr"] .treeItemToggler {
  2778. float: left;
  2779. }
  2780. html[dir="rtl"] .treeItemToggler {
  2781. float: right;
  2782. }
  2783. html[dir="ltr"] .treeItemToggler::before {
  2784. right: 4px;
  2785. }
  2786. html[dir="rtl"] .treeItemToggler::before {
  2787. left: 4px;
  2788. }
  2789. .treeItem.selected > a {
  2790. background-color: rgba(0, 0, 0, 0.25);
  2791. background-color: var(--treeitem-selected-bg-color);
  2792. color: rgba(0, 0, 0, 0.9);
  2793. color: var(--treeitem-selected-color);
  2794. }
  2795. @media (prefers-color-scheme: dark) {
  2796. .treeItem.selected > a {
  2797. color: rgba(255, 255, 255, 0.9);
  2798. color: var(--treeitem-selected-color);
  2799. }
  2800. }
  2801. @media (prefers-color-scheme: dark) {
  2802. .treeItem.selected > a {
  2803. background-color: rgba(255, 255, 255, 0.25);
  2804. background-color: var(--treeitem-selected-bg-color);
  2805. }
  2806. }
  2807. .treeItemToggler:hover {
  2808. background-color: rgba(0, 0, 0, 0.15);
  2809. background-color: var(--sidebaritem-bg-color);
  2810. background-clip: padding-box;
  2811. border-radius: 2px;
  2812. color: rgba(0, 0, 0, 0.9);
  2813. color: var(--treeitem-hover-color);
  2814. }
  2815. @media (prefers-color-scheme: dark) {
  2816. .treeItemToggler:hover {
  2817. color: rgba(255, 255, 255, 0.9);
  2818. color: var(--treeitem-hover-color);
  2819. }
  2820. }
  2821. @media (prefers-color-scheme: dark) {
  2822. .treeItemToggler:hover {
  2823. background-color: rgba(255, 255, 255, 0.15);
  2824. background-color: var(--sidebaritem-bg-color);
  2825. }
  2826. }
  2827. .treeItemToggler:hover + a {
  2828. background-color: rgba(0, 0, 0, 0.15);
  2829. background-color: var(--sidebaritem-bg-color);
  2830. background-clip: padding-box;
  2831. border-radius: 2px;
  2832. color: rgba(0, 0, 0, 0.9);
  2833. color: var(--treeitem-hover-color);
  2834. }
  2835. @media (prefers-color-scheme: dark) {
  2836. .treeItemToggler:hover + a {
  2837. color: rgba(255, 255, 255, 0.9);
  2838. color: var(--treeitem-hover-color);
  2839. }
  2840. }
  2841. @media (prefers-color-scheme: dark) {
  2842. .treeItemToggler:hover + a {
  2843. background-color: rgba(255, 255, 255, 0.15);
  2844. background-color: var(--sidebaritem-bg-color);
  2845. }
  2846. }
  2847. .treeItemToggler:hover ~ .treeItems {
  2848. background-color: rgba(0, 0, 0, 0.15);
  2849. background-color: var(--sidebaritem-bg-color);
  2850. background-clip: padding-box;
  2851. border-radius: 2px;
  2852. color: rgba(0, 0, 0, 0.9);
  2853. color: var(--treeitem-hover-color);
  2854. }
  2855. @media (prefers-color-scheme: dark) {
  2856. .treeItemToggler:hover ~ .treeItems {
  2857. color: rgba(255, 255, 255, 0.9);
  2858. color: var(--treeitem-hover-color);
  2859. }
  2860. }
  2861. @media (prefers-color-scheme: dark) {
  2862. .treeItemToggler:hover ~ .treeItems {
  2863. background-color: rgba(255, 255, 255, 0.15);
  2864. background-color: var(--sidebaritem-bg-color);
  2865. }
  2866. }
  2867. .treeItem > a:hover {
  2868. background-color: rgba(0, 0, 0, 0.15);
  2869. background-color: var(--sidebaritem-bg-color);
  2870. background-clip: padding-box;
  2871. border-radius: 2px;
  2872. color: rgba(0, 0, 0, 0.9);
  2873. color: var(--treeitem-hover-color);
  2874. }
  2875. @media (prefers-color-scheme: dark) {
  2876. .treeItem > a:hover {
  2877. color: rgba(255, 255, 255, 0.9);
  2878. color: var(--treeitem-hover-color);
  2879. }
  2880. }
  2881. @media (prefers-color-scheme: dark) {
  2882. .treeItem > a:hover {
  2883. background-color: rgba(255, 255, 255, 0.15);
  2884. background-color: var(--sidebaritem-bg-color);
  2885. }
  2886. }
  2887. /* TODO: file FF bug to support ::-moz-selection:window-inactive
  2888. so we can override the opaque grey background when the window is inactive;
  2889. see https://bugzilla.mozilla.org/show_bug.cgi?id=706209 */
  2890. ::-moz-selection {
  2891. background: rgba(0, 0, 255, 0.3);
  2892. }
  2893. ::selection {
  2894. background: rgba(0, 0, 255, 0.3);
  2895. }
  2896. #errorWrapper {
  2897. background: none repeat scroll 0 0 rgba(255, 74, 74, 1);
  2898. background: none repeat scroll 0 0 var(--errorWrapper-bg-color);
  2899. color: rgba(12, 12, 13, 1);
  2900. color: var(--main-color);
  2901. left: 0;
  2902. position: absolute;
  2903. right: 0;
  2904. z-index: 1000;
  2905. padding: 3px 6px;
  2906. }
  2907. @media (prefers-color-scheme: dark) {
  2908. #errorWrapper {
  2909. color: rgba(249, 249, 250, 1);
  2910. color: var(--main-color);
  2911. }
  2912. }
  2913. @media (prefers-color-scheme: dark) {
  2914. #errorWrapper {
  2915. background: none repeat scroll 0 0 rgba(199, 17, 17, 1);
  2916. background: none repeat scroll 0 0 var(--errorWrapper-bg-color);
  2917. }
  2918. }
  2919. #errorMessageLeft {
  2920. float: left;
  2921. }
  2922. #errorMessageRight {
  2923. float: right;
  2924. }
  2925. #errorMoreInfo {
  2926. background-color: rgba(255, 255, 255, 1);
  2927. background-color: var(--field-bg-color);
  2928. color: rgba(6, 6, 6, 1);
  2929. color: var(--field-color);
  2930. border: 1px solid rgba(187, 187, 188, 1);
  2931. border: 1px solid var(--field-border-color);
  2932. padding: 3px;
  2933. margin: 3px;
  2934. width: 98%;
  2935. }
  2936. @media (prefers-color-scheme: dark) {
  2937. #errorMoreInfo {
  2938. border: 1px solid rgba(115, 115, 115, 1);
  2939. border: 1px solid var(--field-border-color);
  2940. }
  2941. }
  2942. @media (prefers-color-scheme: dark) {
  2943. #errorMoreInfo {
  2944. color: rgba(250, 250, 250, 1);
  2945. color: var(--field-color);
  2946. }
  2947. }
  2948. @media (prefers-color-scheme: dark) {
  2949. #errorMoreInfo {
  2950. background-color: rgba(64, 64, 68, 1);
  2951. background-color: var(--field-bg-color);
  2952. }
  2953. }
  2954. .overlayButton {
  2955. width: auto;
  2956. margin: 3px 4px 2px !important;
  2957. padding: 2px 11px;
  2958. }
  2959. #overlayContainer {
  2960. display: table;
  2961. position: absolute;
  2962. width: 100%;
  2963. height: 100%;
  2964. background-color: rgba(0, 0, 0, 0.2);
  2965. z-index: 40000;
  2966. }
  2967. #overlayContainer > * {
  2968. overflow: auto;
  2969. -webkit-overflow-scrolling: touch;
  2970. }
  2971. #overlayContainer > .container {
  2972. display: table-cell;
  2973. vertical-align: middle;
  2974. text-align: center;
  2975. }
  2976. #overlayContainer > .container > .dialog {
  2977. display: inline-block;
  2978. padding: 15px;
  2979. border-spacing: 4px;
  2980. color: rgba(12, 12, 13, 1);
  2981. color: var(--main-color);
  2982. font-size: 12px;
  2983. line-height: 14px;
  2984. background-color: rgba(255, 255, 255, 1);
  2985. background-color: var(--doorhanger-bg-color);
  2986. border: 1px solid rgba(0, 0, 0, 0.5);
  2987. border-radius: 4px;
  2988. box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  2989. }
  2990. @media (prefers-color-scheme: dark) {
  2991. #overlayContainer > .container > .dialog {
  2992. background-color: rgba(74, 74, 79, 1);
  2993. background-color: var(--doorhanger-bg-color);
  2994. }
  2995. }
  2996. @media (prefers-color-scheme: dark) {
  2997. #overlayContainer > .container > .dialog {
  2998. color: rgba(249, 249, 250, 1);
  2999. color: var(--main-color);
  3000. }
  3001. }
  3002. .dialog > .row {
  3003. display: table-row;
  3004. }
  3005. .dialog > .row > * {
  3006. display: table-cell;
  3007. }
  3008. .dialog .toolbarField {
  3009. margin: 5px 0;
  3010. }
  3011. .dialog .separator {
  3012. display: block;
  3013. margin: 4px 0;
  3014. height: 1px;
  3015. width: 100%;
  3016. background-color: rgba(0, 0, 0, 0.3);
  3017. background-color: var(--separator-color);
  3018. }
  3019. @media (prefers-color-scheme: dark) {
  3020. .dialog .separator {
  3021. background-color: rgba(0, 0, 0, 0.3);
  3022. background-color: var(--separator-color);
  3023. }
  3024. }
  3025. .dialog .buttonRow {
  3026. text-align: center;
  3027. vertical-align: middle;
  3028. }
  3029. .dialog :link {
  3030. color: rgba(255, 255, 255, 1);
  3031. }
  3032. #passwordOverlay > .dialog {
  3033. text-align: center;
  3034. }
  3035. #passwordOverlay .toolbarField {
  3036. width: 200px;
  3037. }
  3038. #documentPropertiesOverlay > .dialog {
  3039. text-align: left;
  3040. }
  3041. #documentPropertiesOverlay .row > * {
  3042. min-width: 100px;
  3043. }
  3044. html[dir="ltr"] #documentPropertiesOverlay .row > * {
  3045. text-align: left;
  3046. }
  3047. html[dir="rtl"] #documentPropertiesOverlay .row > * {
  3048. text-align: right;
  3049. }
  3050. #documentPropertiesOverlay .row > span {
  3051. width: 125px;
  3052. word-wrap: break-word;
  3053. }
  3054. #documentPropertiesOverlay .row > p {
  3055. max-width: 225px;
  3056. word-wrap: break-word;
  3057. }
  3058. #documentPropertiesOverlay .buttonRow {
  3059. margin-top: 10px;
  3060. }
  3061. .clearBoth {
  3062. clear: both;
  3063. }
  3064. .fileInput {
  3065. background: rgba(255, 255, 255, 1);
  3066. color: rgba(0, 0, 0, 1);
  3067. margin-top: 5px;
  3068. visibility: hidden;
  3069. position: fixed;
  3070. right: 0;
  3071. top: 0;
  3072. }
  3073. #PDFBug {
  3074. background: none repeat scroll 0 0 rgba(255, 255, 255, 1);
  3075. border: 1px solid rgba(102, 102, 102, 1);
  3076. position: fixed;
  3077. top: 32px;
  3078. right: 0;
  3079. bottom: 0;
  3080. font-size: 10px;
  3081. padding: 0;
  3082. width: 300px;
  3083. }
  3084. #PDFBug .controls {
  3085. background: rgba(238, 238, 238, 1);
  3086. border-bottom: 1px solid rgba(102, 102, 102, 1);
  3087. padding: 3px;
  3088. }
  3089. #PDFBug .panels {
  3090. bottom: 0;
  3091. left: 0;
  3092. overflow: auto;
  3093. -webkit-overflow-scrolling: touch;
  3094. position: absolute;
  3095. right: 0;
  3096. top: 27px;
  3097. }
  3098. #PDFBug .panels > div {
  3099. padding: 5px;
  3100. }
  3101. #PDFBug button.active {
  3102. font-weight: bold;
  3103. }
  3104. .debuggerShowText {
  3105. background: none repeat scroll 0 0 rgba(255, 255, 0, 1);
  3106. color: rgba(0, 0, 255, 1);
  3107. }
  3108. .debuggerHideText:hover {
  3109. background: none repeat scroll 0 0 rgba(255, 255, 0, 1);
  3110. }
  3111. #PDFBug .stats {
  3112. font-family: courier;
  3113. font-size: 10px;
  3114. white-space: pre;
  3115. }
  3116. #PDFBug .stats .title {
  3117. font-weight: bold;
  3118. }
  3119. #PDFBug table {
  3120. font-size: 10px;
  3121. }
  3122. #viewer.textLayer-visible .textLayer {
  3123. opacity: 1;
  3124. }
  3125. #viewer.textLayer-visible .canvasWrapper {
  3126. background-color: rgba(128, 255, 128, 1);
  3127. }
  3128. #viewer.textLayer-visible .canvasWrapper canvas {
  3129. mix-blend-mode: screen;
  3130. }
  3131. #viewer.textLayer-visible .textLayer > span {
  3132. background-color: rgba(255, 255, 0, 0.1);
  3133. color: rgba(0, 0, 0, 1);
  3134. border: solid 1px rgba(255, 0, 0, 0.5);
  3135. box-sizing: border-box;
  3136. }
  3137. #viewer.textLayer-hover .textLayer > span:hover {
  3138. background-color: rgba(255, 255, 255, 1);
  3139. color: rgba(0, 0, 0, 1);
  3140. }
  3141. #viewer.textLayer-shadow .textLayer > span {
  3142. background-color: rgba(255, 255, 255, 0.6);
  3143. color: rgba(0, 0, 0, 1);
  3144. }
  3145. .grab-to-pan-grab {
  3146. cursor: url("images/grab.cur"), move !important;
  3147. cursor: -webkit-grab !important;
  3148. cursor: grab !important;
  3149. }
  3150. .grab-to-pan-grab
  3151. *:not(input):not(textarea):not(button):not(select):not(:link) {
  3152. cursor: inherit !important;
  3153. }
  3154. .grab-to-pan-grab:active,
  3155. .grab-to-pan-grabbing {
  3156. cursor: url("images/grabbing.cur"), move !important;
  3157. cursor: -webkit-grabbing !important;
  3158. cursor: grabbing !important;
  3159. position: fixed;
  3160. background: rgba(0, 0, 0, 0);
  3161. display: block;
  3162. top: 0;
  3163. left: 0;
  3164. right: 0;
  3165. bottom: 0;
  3166. overflow: hidden;
  3167. z-index: 50000; /* should be higher than anything else in PDF.js! */
  3168. }
  3169. @page {
  3170. margin: 0;
  3171. }
  3172. #printContainer {
  3173. display: none;
  3174. }
  3175. @media print {
  3176. /* General rules for printing. */
  3177. body {
  3178. background: rgba(0, 0, 0, 0) none;
  3179. }
  3180. /* Rules for browsers that don't support mozPrintCallback. */
  3181. #sidebarContainer,
  3182. #secondaryToolbar,
  3183. .toolbar,
  3184. #loadingBox,
  3185. #errorWrapper,
  3186. .textLayer {
  3187. display: none;
  3188. }
  3189. #viewerContainer {
  3190. overflow: visible;
  3191. }
  3192. #mainContainer,
  3193. #viewerContainer,
  3194. .page,
  3195. .page canvas {
  3196. position: static;
  3197. padding: 0;
  3198. margin: 0;
  3199. }
  3200. .page {
  3201. float: left;
  3202. display: none;
  3203. border: none;
  3204. box-shadow: none;
  3205. background-clip: content-box;
  3206. background-color: rgba(255, 255, 255, 1);
  3207. }
  3208. .page[data-loaded] {
  3209. display: block;
  3210. }
  3211. .fileInput {
  3212. display: none;
  3213. }
  3214. /* Rules for browsers that support PDF.js printing */
  3215. body[data-pdfjsprinting] #outerContainer {
  3216. display: none;
  3217. }
  3218. body[data-pdfjsprinting] #printContainer {
  3219. display: block;
  3220. }
  3221. #printContainer {
  3222. height: 100%;
  3223. }
  3224. /* wrapper around (scaled) print canvas elements */
  3225. #printContainer > div {
  3226. position: relative;
  3227. top: 0;
  3228. left: 0;
  3229. width: 1px;
  3230. height: 1px;
  3231. overflow: visible;
  3232. page-break-after: always;
  3233. page-break-inside: avoid;
  3234. }
  3235. #printContainer canvas,
  3236. #printContainer img {
  3237. direction: ltr;
  3238. display: block;
  3239. }
  3240. }
  3241. .visibleLargeView,
  3242. .visibleMediumView,
  3243. .visibleSmallView {
  3244. display: none;
  3245. }
  3246. @media all and (max-width: 900px) {
  3247. #toolbarViewerMiddle {
  3248. display: table;
  3249. margin: auto;
  3250. left: auto;
  3251. position: inherit;
  3252. transform: none;
  3253. }
  3254. }
  3255. @media all and (max-width: 840px) {
  3256. #sidebarContent {
  3257. background-color: rgba(0, 0, 0, 0.7);
  3258. }
  3259. html[dir="ltr"] #outerContainer.sidebarOpen #viewerContainer {
  3260. left: 0 !important;
  3261. }
  3262. html[dir="rtl"] #outerContainer.sidebarOpen #viewerContainer {
  3263. right: 0 !important;
  3264. }
  3265. #outerContainer .hiddenLargeView,
  3266. #outerContainer .hiddenMediumView {
  3267. display: inherit;
  3268. }
  3269. #outerContainer .visibleLargeView,
  3270. #outerContainer .visibleMediumView {
  3271. display: none;
  3272. }
  3273. }
  3274. @media all and (max-width: 770px) {
  3275. #outerContainer .hiddenLargeView {
  3276. display: none;
  3277. }
  3278. #outerContainer .visibleLargeView {
  3279. display: inherit;
  3280. }
  3281. }
  3282. @media all and (max-width: 700px) {
  3283. #outerContainer .hiddenMediumView {
  3284. display: none;
  3285. }
  3286. #outerContainer .visibleMediumView {
  3287. display: inherit;
  3288. }
  3289. }
  3290. @media all and (max-width: 640px) {
  3291. .hiddenSmallView,
  3292. .hiddenSmallView * {
  3293. display: none;
  3294. }
  3295. .visibleSmallView {
  3296. display: inherit;
  3297. }
  3298. .toolbarButtonSpacer {
  3299. width: 0;
  3300. }
  3301. html[dir="ltr"] .findbar {
  3302. left: 34px;
  3303. }
  3304. html[dir="rtl"] .findbar {
  3305. right: 34px;
  3306. }
  3307. }
  3308. @media all and (max-width: 535px) {
  3309. #scaleSelectContainer {
  3310. display: none;
  3311. }
  3312. }