viewer.css 44 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990
  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. }
  23. .textLayer > div {
  24. color: transparent;
  25. position: absolute;
  26. white-space: pre;
  27. cursor: text;
  28. -webkit-transform-origin: 0% 0%;
  29. -moz-transform-origin: 0% 0%;
  30. -o-transform-origin: 0% 0%;
  31. -ms-transform-origin: 0% 0%;
  32. transform-origin: 0% 0%;
  33. }
  34. .textLayer .highlight {
  35. margin: -1px;
  36. padding: 1px;
  37. background-color: rgb(180, 0, 170);
  38. border-radius: 4px;
  39. }
  40. .textLayer .highlight.begin {
  41. border-radius: 4px 0px 0px 4px;
  42. }
  43. .textLayer .highlight.end {
  44. border-radius: 0px 4px 4px 0px;
  45. }
  46. .textLayer .highlight.middle {
  47. border-radius: 0px;
  48. }
  49. .textLayer .highlight.selected {
  50. background-color: rgb(0, 100, 0);
  51. }
  52. .pdfViewer .canvasWrapper {
  53. overflow: hidden;
  54. }
  55. .pdfViewer .page {
  56. direction: ltr;
  57. width: 816px;
  58. height: 1056px;
  59. margin: 1px auto -8px auto;
  60. position: relative;
  61. overflow: visible;
  62. border: 9px solid transparent;
  63. background-clip: content-box;
  64. border-image: url(images/shadow.png) 9 9 repeat;
  65. background-color: white;
  66. }
  67. .pdfViewer .page canvas {
  68. margin: 0;
  69. display: block;
  70. }
  71. .pdfViewer .page .loadingIcon {
  72. position: absolute;
  73. display: block;
  74. left: 0;
  75. top: 0;
  76. right: 0;
  77. bottom: 0;
  78. background: url('images/loading-icon.gif') center no-repeat;
  79. }
  80. .pdfViewer .page .annotLink > a:hover {
  81. opacity: 0.2;
  82. background: #ff0;
  83. box-shadow: 0px 2px 10px #ff0;
  84. }
  85. :-webkit-full-screen .pdfViewer .page {
  86. margin-bottom: 100%;
  87. border: 0;
  88. }
  89. :-moz-full-screen .pdfViewer .page {
  90. margin-bottom: 100%;
  91. border: 0;
  92. }
  93. :-ms-fullscreen .pdfViewer .page {
  94. margin-bottom: 100% !important;
  95. border: 0;
  96. }
  97. :fullscreen .pdfViewer .page {
  98. margin-bottom: 100%;
  99. border: 0;
  100. }
  101. .pdfViewer .page .annotationHighlight {
  102. position: absolute;
  103. border: 2px #FFFF99 solid;
  104. }
  105. .pdfViewer .page .annotText > img {
  106. position: absolute;
  107. cursor: pointer;
  108. }
  109. .pdfViewer .page .annotTextContentWrapper {
  110. position: absolute;
  111. width: 20em;
  112. }
  113. .pdfViewer .page .annotTextContent {
  114. z-index: 200;
  115. float: left;
  116. max-width: 20em;
  117. background-color: #FFFF99;
  118. box-shadow: 0px 2px 5px #333;
  119. border-radius: 2px;
  120. padding: 0.6em;
  121. cursor: pointer;
  122. }
  123. .pdfViewer .page .annotTextContent > h1 {
  124. font-size: 1em;
  125. border-bottom: 1px solid #000000;
  126. padding-bottom: 0.2em;
  127. }
  128. .pdfViewer .page .annotTextContent > p {
  129. padding-top: 0.2em;
  130. }
  131. .pdfViewer .page .annotLink > a {
  132. position: absolute;
  133. font-size: 1em;
  134. top: 0;
  135. left: 0;
  136. width: 100%;
  137. height: 100%;
  138. }
  139. .pdfViewer .page .annotLink > a /* -ms-a */ {
  140. background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAA\
  141. LAAAAAABAAEAAAIBRAA7") 0 0 repeat;
  142. }
  143. * {
  144. padding: 0;
  145. margin: 0;
  146. }
  147. html {
  148. height: 100%;
  149. /* Font size is needed to make the activity bar the correct size. */
  150. font-size: 10px;
  151. }
  152. body {
  153. height: 100%;
  154. background-color: #404040;
  155. background-image: url(images/texture.png);
  156. }
  157. body,
  158. input,
  159. button,
  160. select {
  161. font: message-box;
  162. outline: none;
  163. }
  164. .hidden {
  165. display: none !important;
  166. }
  167. [hidden] {
  168. display: none !important;
  169. }
  170. #viewerContainer:-webkit-full-screen {
  171. top: 0px;
  172. border-top: 2px solid transparent;
  173. background-color: #000;
  174. width: 100%;
  175. height: 100%;
  176. overflow: hidden;
  177. cursor: none;
  178. }
  179. #viewerContainer:-moz-full-screen {
  180. top: 0px;
  181. border-top: 2px solid transparent;
  182. background-color: #000;
  183. width: 100%;
  184. height: 100%;
  185. overflow: hidden;
  186. cursor: none;
  187. }
  188. #viewerContainer:-ms-fullscreen {
  189. top: 0px !important;
  190. border-top: 2px solid transparent;
  191. width: 100%;
  192. height: 100%;
  193. overflow: hidden !important;
  194. cursor: none;
  195. }
  196. #viewerContainer:-ms-fullscreen::-ms-backdrop {
  197. background-color: #000;
  198. }
  199. #viewerContainer:fullscreen {
  200. top: 0px;
  201. border-top: 2px solid transparent;
  202. background-color: #000;
  203. width: 100%;
  204. height: 100%;
  205. overflow: hidden;
  206. cursor: none;
  207. }
  208. :-webkit-full-screen a:not(.internalLink) {
  209. display: none;
  210. }
  211. :-moz-full-screen a:not(.internalLink) {
  212. display: none;
  213. }
  214. :-ms-fullscreen a:not(.internalLink) {
  215. display: none !important;
  216. }
  217. :fullscreen a:not(.internalLink) {
  218. display: none;
  219. }
  220. :-webkit-full-screen .textLayer > div {
  221. cursor: none;
  222. }
  223. :-moz-full-screen .textLayer > div {
  224. cursor: none;
  225. }
  226. :fullscreen .textLayer > div {
  227. cursor: none;
  228. }
  229. #viewerContainer.presentationControls,
  230. #viewerContainer.presentationControls .textLayer > div {
  231. cursor: default;
  232. }
  233. /* outer/inner center provides horizontal center */
  234. .outerCenter {
  235. pointer-events: none;
  236. position: relative;
  237. }
  238. html[dir='ltr'] .outerCenter {
  239. float: right;
  240. right: 50%;
  241. }
  242. html[dir='rtl'] .outerCenter {
  243. float: left;
  244. left: 50%;
  245. }
  246. .innerCenter {
  247. pointer-events: auto;
  248. position: relative;
  249. }
  250. html[dir='ltr'] .innerCenter {
  251. float: right;
  252. right: -50%;
  253. }
  254. html[dir='rtl'] .innerCenter {
  255. float: left;
  256. left: -50%;
  257. }
  258. #outerContainer {
  259. width: 100%;
  260. height: 100%;
  261. position: relative;
  262. }
  263. #sidebarContainer {
  264. position: absolute;
  265. top: 0;
  266. bottom: 0;
  267. width: 200px;
  268. visibility: hidden;
  269. -webkit-transition-duration: 200ms;
  270. -webkit-transition-timing-function: ease;
  271. transition-duration: 200ms;
  272. transition-timing-function: ease;
  273. }
  274. html[dir='ltr'] #sidebarContainer {
  275. -webkit-transition-property: left;
  276. transition-property: left;
  277. left: -200px;
  278. }
  279. html[dir='rtl'] #sidebarContainer {
  280. -webkit-transition-property: right;
  281. transition-property: right;
  282. right: -200px;
  283. }
  284. #outerContainer.sidebarMoving > #sidebarContainer,
  285. #outerContainer.sidebarOpen > #sidebarContainer {
  286. visibility: visible;
  287. }
  288. html[dir='ltr'] #outerContainer.sidebarOpen > #sidebarContainer {
  289. left: 0px;
  290. }
  291. html[dir='rtl'] #outerContainer.sidebarOpen > #sidebarContainer {
  292. right: 0px;
  293. }
  294. #mainContainer {
  295. position: absolute;
  296. top: 0;
  297. right: 0;
  298. bottom: 0;
  299. left: 0;
  300. min-width: 320px;
  301. -webkit-transition-duration: 200ms;
  302. -webkit-transition-timing-function: ease;
  303. transition-duration: 200ms;
  304. transition-timing-function: ease;
  305. }
  306. html[dir='ltr'] #outerContainer.sidebarOpen > #mainContainer {
  307. -webkit-transition-property: left;
  308. transition-property: left;
  309. left: 200px;
  310. }
  311. html[dir='rtl'] #outerContainer.sidebarOpen > #mainContainer {
  312. -webkit-transition-property: right;
  313. transition-property: right;
  314. right: 200px;
  315. }
  316. #sidebarContent {
  317. top: 32px;
  318. bottom: 0;
  319. overflow: auto;
  320. -webkit-overflow-scrolling: touch;
  321. position: absolute;
  322. width: 200px;
  323. background-color: hsla(0,0%,0%,.1);
  324. }
  325. html[dir='ltr'] #sidebarContent {
  326. left: 0;
  327. box-shadow: inset -1px 0 0 hsla(0,0%,0%,.25);
  328. }
  329. html[dir='rtl'] #sidebarContent {
  330. right: 0;
  331. box-shadow: inset 1px 0 0 hsla(0,0%,0%,.25);
  332. }
  333. #viewerContainer {
  334. overflow: auto;
  335. -webkit-overflow-scrolling: touch;
  336. position: absolute;
  337. top: 32px;
  338. right: 0;
  339. bottom: 0;
  340. left: 0;
  341. outline: none;
  342. }
  343. html[dir='ltr'] #viewerContainer {
  344. box-shadow: inset 1px 0 0 hsla(0,0%,100%,.05);
  345. }
  346. html[dir='rtl'] #viewerContainer {
  347. box-shadow: inset -1px 0 0 hsla(0,0%,100%,.05);
  348. }
  349. .toolbar {
  350. position: relative;
  351. left: 0;
  352. right: 0;
  353. z-index: 9999;
  354. cursor: default;
  355. }
  356. #toolbarContainer {
  357. width: 100%;
  358. }
  359. #toolbarSidebar {
  360. width: 200px;
  361. height: 32px;
  362. background-color: #424242; /* fallback */
  363. background-image: url(images/texture.png),
  364. linear-gradient(hsla(0,0%,30%,.99), hsla(0,0%,25%,.95));
  365. }
  366. html[dir='ltr'] #toolbarSidebar {
  367. box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25),
  368. inset 0 -1px 0 hsla(0,0%,100%,.05),
  369. 0 1px 0 hsla(0,0%,0%,.15),
  370. 0 0 1px hsla(0,0%,0%,.1);
  371. }
  372. html[dir='rtl'] #toolbarSidebar {
  373. box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25),
  374. inset 0 1px 0 hsla(0,0%,100%,.05),
  375. 0 1px 0 hsla(0,0%,0%,.15),
  376. 0 0 1px hsla(0,0%,0%,.1);
  377. }
  378. #toolbarContainer, .findbar, .secondaryToolbar {
  379. position: relative;
  380. height: 32px;
  381. background-color: #474747; /* fallback */
  382. background-image: url(images/texture.png),
  383. linear-gradient(hsla(0,0%,32%,.99), hsla(0,0%,27%,.95));
  384. }
  385. html[dir='ltr'] #toolbarContainer, .findbar, .secondaryToolbar {
  386. box-shadow: inset 1px 0 0 hsla(0,0%,100%,.08),
  387. inset 0 1px 1px hsla(0,0%,0%,.15),
  388. inset 0 -1px 0 hsla(0,0%,100%,.05),
  389. 0 1px 0 hsla(0,0%,0%,.15),
  390. 0 1px 1px hsla(0,0%,0%,.1);
  391. }
  392. html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
  393. box-shadow: inset -1px 0 0 hsla(0,0%,100%,.08),
  394. inset 0 1px 1px hsla(0,0%,0%,.15),
  395. inset 0 -1px 0 hsla(0,0%,100%,.05),
  396. 0 1px 0 hsla(0,0%,0%,.15),
  397. 0 1px 1px hsla(0,0%,0%,.1);
  398. }
  399. #toolbarViewer {
  400. height: 32px;
  401. }
  402. #loadingBar {
  403. position: relative;
  404. width: 100%;
  405. height: 4px;
  406. background-color: #333;
  407. border-bottom: 1px solid #333;
  408. }
  409. #loadingBar .progress {
  410. position: absolute;
  411. top: 0;
  412. left: 0;
  413. width: 0%;
  414. height: 100%;
  415. background-color: #ddd;
  416. overflow: hidden;
  417. -webkit-transition: width 200ms;
  418. transition: width 200ms;
  419. }
  420. @-webkit-keyframes progressIndeterminate {
  421. 0% { left: 0%; }
  422. 50% { left: 100%; }
  423. 100% { left: 100%; }
  424. }
  425. @keyframes progressIndeterminate {
  426. 0% { left: 0%; }
  427. 50% { left: 100%; }
  428. 100% { left: 100%; }
  429. }
  430. #loadingBar .progress.indeterminate {
  431. background-color: #999;
  432. -webkit-transition: none;
  433. transition: none;
  434. }
  435. #loadingBar .indeterminate .glimmer {
  436. position: absolute;
  437. top: 0;
  438. left: 0;
  439. height: 100%;
  440. width: 50px;
  441. background-image: linear-gradient(to right, #999 0%, #fff 50%, #999 100%);
  442. background-size: 100% 100%;
  443. background-repeat: no-repeat;
  444. -webkit-animation: progressIndeterminate 2s linear infinite;
  445. animation: progressIndeterminate 2s linear infinite;
  446. }
  447. .findbar, .secondaryToolbar {
  448. top: 32px;
  449. position: absolute;
  450. z-index: 10000;
  451. height: 32px;
  452. min-width: 16px;
  453. padding: 0px 6px 0px 6px;
  454. margin: 4px 2px 4px 2px;
  455. color: hsl(0,0%,85%);
  456. font-size: 12px;
  457. line-height: 14px;
  458. text-align: left;
  459. cursor: default;
  460. }
  461. html[dir='ltr'] .findbar {
  462. left: 68px;
  463. }
  464. html[dir='rtl'] .findbar {
  465. right: 68px;
  466. }
  467. .findbar label {
  468. -webkit-user-select: none;
  469. -moz-user-select: none;
  470. }
  471. #findInput[data-status="pending"] {
  472. background-image: url(images/loading-small.png);
  473. background-repeat: no-repeat;
  474. background-position: right;
  475. }
  476. html[dir='rtl'] #findInput[data-status="pending"] {
  477. background-position: left;
  478. }
  479. .secondaryToolbar {
  480. padding: 6px;
  481. height: auto;
  482. z-index: 30000;
  483. }
  484. html[dir='ltr'] .secondaryToolbar {
  485. right: 4px;
  486. }
  487. html[dir='rtl'] .secondaryToolbar {
  488. left: 4px;
  489. }
  490. #secondaryToolbarButtonContainer {
  491. max-width: 200px;
  492. max-height: 400px;
  493. overflow-y: auto;
  494. -webkit-overflow-scrolling: touch;
  495. margin-bottom: -4px;
  496. }
  497. .doorHanger,
  498. .doorHangerRight {
  499. border: 1px solid hsla(0,0%,0%,.5);
  500. border-radius: 2px;
  501. box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  502. }
  503. .doorHanger:after, .doorHanger:before,
  504. .doorHangerRight:after, .doorHangerRight:before {
  505. bottom: 100%;
  506. border: solid transparent;
  507. content: " ";
  508. height: 0;
  509. width: 0;
  510. position: absolute;
  511. pointer-events: none;
  512. }
  513. .doorHanger:after,
  514. .doorHangerRight:after {
  515. border-bottom-color: hsla(0,0%,32%,.99);
  516. border-width: 8px;
  517. }
  518. .doorHanger:before,
  519. .doorHangerRight:before {
  520. border-bottom-color: hsla(0,0%,0%,.5);
  521. border-width: 9px;
  522. }
  523. html[dir='ltr'] .doorHanger:after,
  524. html[dir='rtl'] .doorHangerRight:after {
  525. left: 13px;
  526. margin-left: -8px;
  527. }
  528. html[dir='ltr'] .doorHanger:before,
  529. html[dir='rtl'] .doorHangerRight:before {
  530. left: 13px;
  531. margin-left: -9px;
  532. }
  533. html[dir='rtl'] .doorHanger:after,
  534. html[dir='ltr'] .doorHangerRight:after {
  535. right: 13px;
  536. margin-right: -8px;
  537. }
  538. html[dir='rtl'] .doorHanger:before,
  539. html[dir='ltr'] .doorHangerRight:before {
  540. right: 13px;
  541. margin-right: -9px;
  542. }
  543. #findMsg {
  544. font-style: italic;
  545. color: #A6B7D0;
  546. }
  547. .notFound {
  548. background-color: rgb(255, 137, 153);
  549. }
  550. html[dir='ltr'] #toolbarViewerLeft {
  551. margin-left: -1px;
  552. }
  553. html[dir='rtl'] #toolbarViewerRight {
  554. margin-right: -1px;
  555. }
  556. html[dir='ltr'] #toolbarViewerLeft,
  557. html[dir='rtl'] #toolbarViewerRight {
  558. position: absolute;
  559. top: 0;
  560. left: 0;
  561. }
  562. html[dir='ltr'] #toolbarViewerRight,
  563. html[dir='rtl'] #toolbarViewerLeft {
  564. position: absolute;
  565. top: 0;
  566. right: 0;
  567. }
  568. html[dir='ltr'] #toolbarViewerLeft > *,
  569. html[dir='ltr'] #toolbarViewerMiddle > *,
  570. html[dir='ltr'] #toolbarViewerRight > *,
  571. html[dir='ltr'] .findbar > * {
  572. position: relative;
  573. float: left;
  574. }
  575. html[dir='rtl'] #toolbarViewerLeft > *,
  576. html[dir='rtl'] #toolbarViewerMiddle > *,
  577. html[dir='rtl'] #toolbarViewerRight > *,
  578. html[dir='rtl'] .findbar > * {
  579. position: relative;
  580. float: right;
  581. }
  582. html[dir='ltr'] .splitToolbarButton {
  583. margin: 3px 2px 4px 0;
  584. display: inline-block;
  585. }
  586. html[dir='rtl'] .splitToolbarButton {
  587. margin: 3px 0 4px 2px;
  588. display: inline-block;
  589. }
  590. html[dir='ltr'] .splitToolbarButton > .toolbarButton {
  591. border-radius: 0;
  592. float: left;
  593. }
  594. html[dir='rtl'] .splitToolbarButton > .toolbarButton {
  595. border-radius: 0;
  596. float: right;
  597. }
  598. .toolbarButton,
  599. .secondaryToolbarButton,
  600. .overlayButton {
  601. border: 0 none;
  602. background: none;
  603. width: 32px;
  604. height: 25px;
  605. }
  606. .toolbarButton > span {
  607. display: inline-block;
  608. width: 0;
  609. height: 0;
  610. overflow: hidden;
  611. }
  612. .toolbarButton[disabled],
  613. .secondaryToolbarButton[disabled],
  614. .overlayButton[disabled] {
  615. opacity: .5;
  616. }
  617. .toolbarButton.group {
  618. margin-right: 0;
  619. }
  620. .splitToolbarButton.toggled .toolbarButton {
  621. margin: 0;
  622. }
  623. .splitToolbarButton:hover > .toolbarButton,
  624. .splitToolbarButton:focus > .toolbarButton,
  625. .splitToolbarButton.toggled > .toolbarButton,
  626. .toolbarButton.textButton {
  627. background-color: hsla(0,0%,0%,.12);
  628. background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
  629. background-clip: padding-box;
  630. border: 1px solid hsla(0,0%,0%,.35);
  631. border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42);
  632. box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
  633. 0 0 1px hsla(0,0%,100%,.15) inset,
  634. 0 1px 0 hsla(0,0%,100%,.05);
  635. -webkit-transition-property: background-color, border-color, box-shadow;
  636. -webkit-transition-duration: 150ms;
  637. -webkit-transition-timing-function: ease;
  638. transition-property: background-color, border-color, box-shadow;
  639. transition-duration: 150ms;
  640. transition-timing-function: ease;
  641. }
  642. .splitToolbarButton > .toolbarButton:hover,
  643. .splitToolbarButton > .toolbarButton:focus,
  644. .dropdownToolbarButton:hover,
  645. .overlayButton:hover,
  646. .toolbarButton.textButton:hover,
  647. .toolbarButton.textButton:focus {
  648. background-color: hsla(0,0%,0%,.2);
  649. box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
  650. 0 0 1px hsla(0,0%,100%,.15) inset,
  651. 0 0 1px hsla(0,0%,0%,.05);
  652. z-index: 199;
  653. }
  654. .splitToolbarButton > .toolbarButton {
  655. position: relative;
  656. }
  657. html[dir='ltr'] .splitToolbarButton > .toolbarButton:first-child,
  658. html[dir='rtl'] .splitToolbarButton > .toolbarButton:last-child {
  659. position: relative;
  660. margin: 0;
  661. margin-right: -1px;
  662. border-top-left-radius: 2px;
  663. border-bottom-left-radius: 2px;
  664. border-right-color: transparent;
  665. }
  666. html[dir='ltr'] .splitToolbarButton > .toolbarButton:last-child,
  667. html[dir='rtl'] .splitToolbarButton > .toolbarButton:first-child {
  668. position: relative;
  669. margin: 0;
  670. margin-left: -1px;
  671. border-top-right-radius: 2px;
  672. border-bottom-right-radius: 2px;
  673. border-left-color: transparent;
  674. }
  675. .splitToolbarButtonSeparator {
  676. padding: 8px 0;
  677. width: 1px;
  678. background-color: hsla(0,0%,0%,.5);
  679. z-index: 99;
  680. box-shadow: 0 0 0 1px hsla(0,0%,100%,.08);
  681. display: inline-block;
  682. margin: 5px 0;
  683. }
  684. html[dir='ltr'] .splitToolbarButtonSeparator {
  685. float: left;
  686. }
  687. html[dir='rtl'] .splitToolbarButtonSeparator {
  688. float: right;
  689. }
  690. .splitToolbarButton:hover > .splitToolbarButtonSeparator,
  691. .splitToolbarButton.toggled > .splitToolbarButtonSeparator {
  692. padding: 12px 0;
  693. margin: 1px 0;
  694. box-shadow: 0 0 0 1px hsla(0,0%,100%,.03);
  695. -webkit-transition-property: padding;
  696. -webkit-transition-duration: 10ms;
  697. -webkit-transition-timing-function: ease;
  698. transition-property: padding;
  699. transition-duration: 10ms;
  700. transition-timing-function: ease;
  701. }
  702. .toolbarButton,
  703. .dropdownToolbarButton,
  704. .secondaryToolbarButton,
  705. .overlayButton {
  706. min-width: 16px;
  707. padding: 2px 6px 0;
  708. border: 1px solid transparent;
  709. border-radius: 2px;
  710. color: hsla(0,0%,100%,.8);
  711. font-size: 12px;
  712. line-height: 14px;
  713. -webkit-user-select: none;
  714. -moz-user-select: none;
  715. -ms-user-select: none;
  716. /* Opera does not support user-select, use <... unselectable="on"> instead */
  717. cursor: default;
  718. -webkit-transition-property: background-color, border-color, box-shadow;
  719. -webkit-transition-duration: 150ms;
  720. -webkit-transition-timing-function: ease;
  721. transition-property: background-color, border-color, box-shadow;
  722. transition-duration: 150ms;
  723. transition-timing-function: ease;
  724. }
  725. html[dir='ltr'] .toolbarButton,
  726. html[dir='ltr'] .overlayButton,
  727. html[dir='ltr'] .dropdownToolbarButton {
  728. margin: 3px 2px 4px 0;
  729. }
  730. html[dir='rtl'] .toolbarButton,
  731. html[dir='rtl'] .overlayButton,
  732. html[dir='rtl'] .dropdownToolbarButton {
  733. margin: 3px 0 4px 2px;
  734. }
  735. .toolbarButton:hover,
  736. .toolbarButton:focus,
  737. .dropdownToolbarButton,
  738. .overlayButton,
  739. .secondaryToolbarButton:hover,
  740. .secondaryToolbarButton:focus {
  741. background-color: hsla(0,0%,0%,.12);
  742. background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
  743. background-clip: padding-box;
  744. border: 1px solid hsla(0,0%,0%,.35);
  745. border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42);
  746. box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
  747. 0 0 1px hsla(0,0%,100%,.15) inset,
  748. 0 1px 0 hsla(0,0%,100%,.05);
  749. }
  750. .toolbarButton:hover:active,
  751. .overlayButton:hover:active,
  752. .dropdownToolbarButton:hover:active,
  753. .secondaryToolbarButton:hover:active {
  754. background-color: hsla(0,0%,0%,.2);
  755. background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
  756. border-color: hsla(0,0%,0%,.35) hsla(0,0%,0%,.4) hsla(0,0%,0%,.45);
  757. box-shadow: 0 1px 1px hsla(0,0%,0%,.1) inset,
  758. 0 0 1px hsla(0,0%,0%,.2) inset,
  759. 0 1px 0 hsla(0,0%,100%,.05);
  760. -webkit-transition-property: background-color, border-color, box-shadow;
  761. -webkit-transition-duration: 10ms;
  762. -webkit-transition-timing-function: linear;
  763. transition-property: background-color, border-color, box-shadow;
  764. transition-duration: 10ms;
  765. transition-timing-function: linear;
  766. }
  767. .toolbarButton.toggled,
  768. .splitToolbarButton.toggled > .toolbarButton.toggled,
  769. .secondaryToolbarButton.toggled {
  770. background-color: hsla(0,0%,0%,.3);
  771. background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
  772. border-color: hsla(0,0%,0%,.4) hsla(0,0%,0%,.45) hsla(0,0%,0%,.5);
  773. box-shadow: 0 1px 1px hsla(0,0%,0%,.1) inset,
  774. 0 0 1px hsla(0,0%,0%,.2) inset,
  775. 0 1px 0 hsla(0,0%,100%,.05);
  776. -webkit-transition-property: background-color, border-color, box-shadow;
  777. -webkit-transition-duration: 10ms;
  778. -webkit-transition-timing-function: linear;
  779. transition-property: background-color, border-color, box-shadow;
  780. transition-duration: 10ms;
  781. transition-timing-function: linear;
  782. }
  783. .toolbarButton.toggled:hover:active,
  784. .splitToolbarButton.toggled > .toolbarButton.toggled:hover:active,
  785. .secondaryToolbarButton.toggled:hover:active {
  786. background-color: hsla(0,0%,0%,.4);
  787. border-color: hsla(0,0%,0%,.4) hsla(0,0%,0%,.5) hsla(0,0%,0%,.55);
  788. box-shadow: 0 1px 1px hsla(0,0%,0%,.2) inset,
  789. 0 0 1px hsla(0,0%,0%,.3) inset,
  790. 0 1px 0 hsla(0,0%,100%,.05);
  791. }
  792. .dropdownToolbarButton {
  793. width: 120px;
  794. max-width: 120px;
  795. padding: 3px 2px 2px;
  796. overflow: hidden;
  797. background: url(images/toolbarButton-menuArrows.png) no-repeat;
  798. }
  799. html[dir='ltr'] .dropdownToolbarButton {
  800. background-position: 95%;
  801. }
  802. html[dir='rtl'] .dropdownToolbarButton {
  803. background-position: 5%;
  804. }
  805. .dropdownToolbarButton > select {
  806. -webkit-appearance: none;
  807. -moz-appearance: none; /* in the future this might matter, see bugzilla bug #649849 */
  808. min-width: 140px;
  809. font-size: 12px;
  810. color: hsl(0,0%,95%);
  811. margin: 0;
  812. padding: 0;
  813. border: none;
  814. background: rgba(0,0,0,0); /* Opera does not support 'transparent' <select> background */
  815. }
  816. .dropdownToolbarButton > select > option {
  817. background: hsl(0,0%,24%);
  818. }
  819. #customScaleOption {
  820. display: none;
  821. }
  822. #pageWidthOption {
  823. border-bottom: 1px rgba(255, 255, 255, .5) solid;
  824. }
  825. html[dir='ltr'] .splitToolbarButton:first-child,
  826. html[dir='ltr'] .toolbarButton:first-child,
  827. html[dir='rtl'] .splitToolbarButton:last-child,
  828. html[dir='rtl'] .toolbarButton:last-child {
  829. margin-left: 4px;
  830. }
  831. html[dir='ltr'] .splitToolbarButton:last-child,
  832. html[dir='ltr'] .toolbarButton:last-child,
  833. html[dir='rtl'] .splitToolbarButton:first-child,
  834. html[dir='rtl'] .toolbarButton:first-child {
  835. margin-right: 4px;
  836. }
  837. .toolbarButtonSpacer {
  838. width: 30px;
  839. display: inline-block;
  840. height: 1px;
  841. }
  842. .toolbarButtonFlexibleSpacer {
  843. -webkit-box-flex: 1;
  844. -moz-box-flex: 1;
  845. min-width: 30px;
  846. }
  847. html[dir='ltr'] #findPrevious {
  848. margin-left: 3px;
  849. }
  850. html[dir='ltr'] #findNext {
  851. margin-right: 3px;
  852. }
  853. html[dir='rtl'] #findPrevious {
  854. margin-right: 3px;
  855. }
  856. html[dir='rtl'] #findNext {
  857. margin-left: 3px;
  858. }
  859. .toolbarButton::before,
  860. .secondaryToolbarButton::before {
  861. /* All matching images have a size of 16x16
  862. * All relevant containers have a size of 32x25 */
  863. position: absolute;
  864. display: inline-block;
  865. top: 4px;
  866. left: 7px;
  867. }
  868. html[dir="ltr"] .secondaryToolbarButton::before {
  869. left: 4px;
  870. }
  871. html[dir="rtl"] .secondaryToolbarButton::before {
  872. right: 4px;
  873. }
  874. html[dir='ltr'] .toolbarButton#sidebarToggle::before {
  875. content: url(images/toolbarButton-sidebarToggle.png);
  876. }
  877. html[dir='rtl'] .toolbarButton#sidebarToggle::before {
  878. content: url(images/toolbarButton-sidebarToggle-rtl.png);
  879. }
  880. html[dir='ltr'] .toolbarButton#secondaryToolbarToggle::before {
  881. content: url(images/toolbarButton-secondaryToolbarToggle.png);
  882. }
  883. html[dir='rtl'] .toolbarButton#secondaryToolbarToggle::before {
  884. content: url(images/toolbarButton-secondaryToolbarToggle-rtl.png);
  885. }
  886. html[dir='ltr'] .toolbarButton.findPrevious::before {
  887. content: url(images/findbarButton-previous.png);
  888. }
  889. html[dir='rtl'] .toolbarButton.findPrevious::before {
  890. content: url(images/findbarButton-previous-rtl.png);
  891. }
  892. html[dir='ltr'] .toolbarButton.findNext::before {
  893. content: url(images/findbarButton-next.png);
  894. }
  895. html[dir='rtl'] .toolbarButton.findNext::before {
  896. content: url(images/findbarButton-next-rtl.png);
  897. }
  898. html[dir='ltr'] .toolbarButton.pageUp::before {
  899. content: url(images/toolbarButton-pageUp.png);
  900. }
  901. html[dir='rtl'] .toolbarButton.pageUp::before {
  902. content: url(images/toolbarButton-pageUp-rtl.png);
  903. }
  904. html[dir='ltr'] .toolbarButton.pageDown::before {
  905. content: url(images/toolbarButton-pageDown.png);
  906. }
  907. html[dir='rtl'] .toolbarButton.pageDown::before {
  908. content: url(images/toolbarButton-pageDown-rtl.png);
  909. }
  910. .toolbarButton.zoomOut::before {
  911. content: url(images/toolbarButton-zoomOut.png);
  912. }
  913. .toolbarButton.zoomIn::before {
  914. content: url(images/toolbarButton-zoomIn.png);
  915. }
  916. .toolbarButton.presentationMode::before,
  917. .secondaryToolbarButton.presentationMode::before {
  918. content: url(images/toolbarButton-presentationMode.png);
  919. }
  920. .toolbarButton.print::before,
  921. .secondaryToolbarButton.print::before {
  922. content: url(images/toolbarButton-print.png);
  923. }
  924. .toolbarButton.openFile::before,
  925. .secondaryToolbarButton.openFile::before {
  926. content: url(images/toolbarButton-openFile.png);
  927. }
  928. .toolbarButton.download::before,
  929. .secondaryToolbarButton.download::before {
  930. content: url(images/toolbarButton-download.png);
  931. }
  932. .toolbarButton.bookmark,
  933. .secondaryToolbarButton.bookmark {
  934. -webkit-box-sizing: border-box;
  935. -moz-box-sizing: border-box;
  936. box-sizing: border-box;
  937. outline: none;
  938. padding-top: 4px;
  939. text-decoration: none;
  940. }
  941. .secondaryToolbarButton.bookmark {
  942. padding-top: 5px;
  943. }
  944. .bookmark[href='#'] {
  945. opacity: .5;
  946. pointer-events: none;
  947. }
  948. .toolbarButton.bookmark::before,
  949. .secondaryToolbarButton.bookmark::before {
  950. content: url(images/toolbarButton-bookmark.png);
  951. }
  952. #viewThumbnail.toolbarButton::before {
  953. content: url(images/toolbarButton-viewThumbnail.png);
  954. }
  955. html[dir="ltr"] #viewOutline.toolbarButton::before {
  956. content: url(images/toolbarButton-viewOutline.png);
  957. }
  958. html[dir="rtl"] #viewOutline.toolbarButton::before {
  959. content: url(images/toolbarButton-viewOutline-rtl.png);
  960. }
  961. #viewAttachments.toolbarButton::before {
  962. content: url(images/toolbarButton-viewAttachments.png);
  963. }
  964. #viewFind.toolbarButton::before {
  965. content: url(images/toolbarButton-search.png);
  966. }
  967. .secondaryToolbarButton {
  968. position: relative;
  969. margin: 0 0 4px 0;
  970. padding: 3px 0 1px 0;
  971. height: auto;
  972. min-height: 25px;
  973. width: auto;
  974. min-width: 100%;
  975. white-space: normal;
  976. }
  977. html[dir="ltr"] .secondaryToolbarButton {
  978. padding-left: 24px;
  979. text-align: left;
  980. }
  981. html[dir="rtl"] .secondaryToolbarButton {
  982. padding-right: 24px;
  983. text-align: right;
  984. }
  985. html[dir="ltr"] .secondaryToolbarButton.bookmark {
  986. padding-left: 27px;
  987. }
  988. html[dir="rtl"] .secondaryToolbarButton.bookmark {
  989. padding-right: 27px;
  990. }
  991. html[dir="ltr"] .secondaryToolbarButton > span {
  992. padding-right: 4px;
  993. }
  994. html[dir="rtl"] .secondaryToolbarButton > span {
  995. padding-left: 4px;
  996. }
  997. .secondaryToolbarButton.firstPage::before {
  998. content: url(images/secondaryToolbarButton-firstPage.png);
  999. }
  1000. .secondaryToolbarButton.lastPage::before {
  1001. content: url(images/secondaryToolbarButton-lastPage.png);
  1002. }
  1003. .secondaryToolbarButton.rotateCcw::before {
  1004. content: url(images/secondaryToolbarButton-rotateCcw.png);
  1005. }
  1006. .secondaryToolbarButton.rotateCw::before {
  1007. content: url(images/secondaryToolbarButton-rotateCw.png);
  1008. }
  1009. .secondaryToolbarButton.handTool::before {
  1010. content: url(images/secondaryToolbarButton-handTool.png);
  1011. }
  1012. .secondaryToolbarButton.documentProperties::before {
  1013. content: url(images/secondaryToolbarButton-documentProperties.png);
  1014. }
  1015. .verticalToolbarSeparator {
  1016. display: block;
  1017. padding: 8px 0;
  1018. margin: 8px 4px;
  1019. width: 1px;
  1020. background-color: hsla(0,0%,0%,.5);
  1021. box-shadow: 0 0 0 1px hsla(0,0%,100%,.08);
  1022. }
  1023. html[dir='ltr'] .verticalToolbarSeparator {
  1024. margin-left: 2px;
  1025. }
  1026. html[dir='rtl'] .verticalToolbarSeparator {
  1027. margin-right: 2px;
  1028. }
  1029. .horizontalToolbarSeparator {
  1030. display: block;
  1031. margin: 0 0 4px 0;
  1032. height: 1px;
  1033. width: 100%;
  1034. background-color: hsla(0,0%,0%,.5);
  1035. box-shadow: 0 0 0 1px hsla(0,0%,100%,.08);
  1036. }
  1037. .toolbarField {
  1038. padding: 3px 6px;
  1039. margin: 4px 0 4px 0;
  1040. border: 1px solid transparent;
  1041. border-radius: 2px;
  1042. background-color: hsla(0,0%,100%,.09);
  1043. background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
  1044. background-clip: padding-box;
  1045. border: 1px solid hsla(0,0%,0%,.35);
  1046. border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42);
  1047. box-shadow: 0 1px 0 hsla(0,0%,0%,.05) inset,
  1048. 0 1px 0 hsla(0,0%,100%,.05);
  1049. color: hsl(0,0%,95%);
  1050. font-size: 12px;
  1051. line-height: 14px;
  1052. outline-style: none;
  1053. transition-property: background-color, border-color, box-shadow;
  1054. transition-duration: 150ms;
  1055. transition-timing-function: ease;
  1056. }
  1057. .toolbarField[type=checkbox] {
  1058. display: inline-block;
  1059. margin: 8px 0px;
  1060. }
  1061. .toolbarField.pageNumber {
  1062. -moz-appearance: textfield; /* hides the spinner in moz */
  1063. min-width: 16px;
  1064. text-align: right;
  1065. width: 40px;
  1066. }
  1067. .toolbarField.pageNumber.visiblePageIsLoading {
  1068. background-image: url(images/loading-small.png);
  1069. background-repeat: no-repeat;
  1070. background-position: 1px;
  1071. }
  1072. .toolbarField.pageNumber::-webkit-inner-spin-button,
  1073. .toolbarField.pageNumber::-webkit-outer-spin-button {
  1074. -webkit-appearance: none;
  1075. margin: 0;
  1076. }
  1077. .toolbarField:hover {
  1078. background-color: hsla(0,0%,100%,.11);
  1079. border-color: hsla(0,0%,0%,.4) hsla(0,0%,0%,.43) hsla(0,0%,0%,.45);
  1080. }
  1081. .toolbarField:focus {
  1082. background-color: hsla(0,0%,100%,.15);
  1083. border-color: hsla(204,100%,65%,.8) hsla(204,100%,65%,.85) hsla(204,100%,65%,.9);
  1084. }
  1085. .toolbarLabel {
  1086. min-width: 16px;
  1087. padding: 3px 6px 3px 2px;
  1088. margin: 4px 2px 4px 0;
  1089. border: 1px solid transparent;
  1090. border-radius: 2px;
  1091. color: hsl(0,0%,85%);
  1092. font-size: 12px;
  1093. line-height: 14px;
  1094. text-align: left;
  1095. -webkit-user-select: none;
  1096. -moz-user-select: none;
  1097. cursor: default;
  1098. }
  1099. #thumbnailView {
  1100. position: absolute;
  1101. width: 120px;
  1102. top: 0;
  1103. bottom: 0;
  1104. padding: 10px 40px 0;
  1105. overflow: auto;
  1106. -webkit-overflow-scrolling: touch;
  1107. }
  1108. .thumbnail {
  1109. float: left;
  1110. margin-bottom: 5px;
  1111. }
  1112. #thumbnailView > a:last-of-type > .thumbnail {
  1113. margin-bottom: 10px;
  1114. }
  1115. .thumbnail:not([data-loaded]) {
  1116. border: 1px dashed rgba(255, 255, 255, 0.5);
  1117. margin-bottom: 10px;
  1118. }
  1119. .thumbnailImage {
  1120. transition-duration: 150ms;
  1121. border: 1px solid transparent;
  1122. box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  1123. opacity: 0.8;
  1124. z-index: 99;
  1125. }
  1126. .thumbnailSelectionRing {
  1127. border-radius: 2px;
  1128. padding: 7px;
  1129. transition-duration: 150ms;
  1130. }
  1131. a:focus > .thumbnail > .thumbnailSelectionRing > .thumbnailImage,
  1132. .thumbnail:hover > .thumbnailSelectionRing > .thumbnailImage {
  1133. opacity: .9;
  1134. }
  1135. a:focus > .thumbnail > .thumbnailSelectionRing,
  1136. .thumbnail:hover > .thumbnailSelectionRing {
  1137. background-color: hsla(0,0%,100%,.15);
  1138. background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
  1139. background-clip: padding-box;
  1140. box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
  1141. 0 0 1px hsla(0,0%,100%,.2) inset,
  1142. 0 0 1px hsla(0,0%,0%,.2);
  1143. color: hsla(0,0%,100%,.9);
  1144. }
  1145. .thumbnail.selected > .thumbnailSelectionRing > .thumbnailImage {
  1146. box-shadow: 0 0 0 1px hsla(0,0%,0%,.5);
  1147. opacity: 1;
  1148. }
  1149. .thumbnail.selected > .thumbnailSelectionRing {
  1150. background-color: hsla(0,0%,100%,.3);
  1151. background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
  1152. background-clip: padding-box;
  1153. box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
  1154. 0 0 1px hsla(0,0%,100%,.1) inset,
  1155. 0 0 1px hsla(0,0%,0%,.2);
  1156. color: hsla(0,0%,100%,1);
  1157. }
  1158. #outlineView,
  1159. #attachmentsView {
  1160. position: absolute;
  1161. width: 192px;
  1162. top: 0;
  1163. bottom: 0;
  1164. overflow: auto;
  1165. -webkit-overflow-scrolling: touch;
  1166. -webkit-user-select: none;
  1167. -moz-user-select: none;
  1168. }
  1169. #outlineView {
  1170. padding: 4px 4px 0;
  1171. }
  1172. #attachmentsView {
  1173. padding: 3px 4px 0;
  1174. }
  1175. html[dir='ltr'] .outlineItem > .outlineItems {
  1176. margin-left: 20px;
  1177. }
  1178. html[dir='rtl'] .outlineItem > .outlineItems {
  1179. margin-right: 20px;
  1180. }
  1181. .outlineItem > a,
  1182. .attachmentsItem > button {
  1183. text-decoration: none;
  1184. display: inline-block;
  1185. min-width: 95%;
  1186. height: auto;
  1187. margin-bottom: 1px;
  1188. border-radius: 2px;
  1189. color: hsla(0,0%,100%,.8);
  1190. font-size: 13px;
  1191. line-height: 15px;
  1192. -moz-user-select: none;
  1193. white-space: normal;
  1194. }
  1195. .attachmentsItem > button {
  1196. border: 0 none;
  1197. background: none;
  1198. cursor: pointer;
  1199. width: 100%;
  1200. }
  1201. html[dir='ltr'] .outlineItem > a {
  1202. padding: 2px 0 5px 10px;
  1203. }
  1204. html[dir='ltr'] .attachmentsItem > button {
  1205. padding: 2px 0 3px 7px;
  1206. text-align: left;
  1207. }
  1208. html[dir='rtl'] .outlineItem > a {
  1209. padding: 2px 10px 5px 0;
  1210. }
  1211. html[dir='rtl'] .attachmentsItem > button {
  1212. padding: 2px 7px 3px 0;
  1213. text-align: right;
  1214. }
  1215. .outlineItem > a:hover,
  1216. .attachmentsItem > button:hover {
  1217. background-color: hsla(0,0%,100%,.02);
  1218. background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
  1219. background-clip: padding-box;
  1220. box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
  1221. 0 0 1px hsla(0,0%,100%,.2) inset,
  1222. 0 0 1px hsla(0,0%,0%,.2);
  1223. color: hsla(0,0%,100%,.9);
  1224. }
  1225. .outlineItem.selected {
  1226. background-color: hsla(0,0%,100%,.08);
  1227. background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
  1228. background-clip: padding-box;
  1229. box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
  1230. 0 0 1px hsla(0,0%,100%,.1) inset,
  1231. 0 0 1px hsla(0,0%,0%,.2);
  1232. color: hsla(0,0%,100%,1);
  1233. }
  1234. .noResults {
  1235. font-size: 12px;
  1236. color: hsla(0,0%,100%,.8);
  1237. font-style: italic;
  1238. cursor: default;
  1239. }
  1240. /* TODO: file FF bug to support ::-moz-selection:window-inactive
  1241. so we can override the opaque grey background when the window is inactive;
  1242. see https://bugzilla.mozilla.org/show_bug.cgi?id=706209 */
  1243. ::selection { background: rgba(0,0,255,0.3); }
  1244. ::-moz-selection { background: rgba(0,0,255,0.3); }
  1245. .textLayer ::selection { background: rgb(0,0,255); }
  1246. .textLayer ::-moz-selection { background: rgb(0,0,255); }
  1247. .textLayer {
  1248. opacity: 0.2;
  1249. }
  1250. #errorWrapper {
  1251. background: none repeat scroll 0 0 #FF5555;
  1252. color: white;
  1253. left: 0;
  1254. position: absolute;
  1255. right: 0;
  1256. z-index: 1000;
  1257. padding: 3px;
  1258. font-size: 0.8em;
  1259. }
  1260. .loadingInProgress #errorWrapper {
  1261. top: 37px;
  1262. }
  1263. #errorMessageLeft {
  1264. float: left;
  1265. }
  1266. #errorMessageRight {
  1267. float: right;
  1268. }
  1269. #errorMoreInfo {
  1270. background-color: #FFFFFF;
  1271. color: black;
  1272. padding: 3px;
  1273. margin: 3px;
  1274. width: 98%;
  1275. }
  1276. .overlayButton {
  1277. width: auto;
  1278. margin: 3px 4px 2px 4px !important;
  1279. padding: 2px 6px 3px 6px;
  1280. }
  1281. #overlayContainer {
  1282. display: table;
  1283. position: absolute;
  1284. width: 100%;
  1285. height: 100%;
  1286. background-color: hsla(0,0%,0%,.2);
  1287. z-index: 40000;
  1288. }
  1289. #overlayContainer > * {
  1290. overflow: auto;
  1291. -webkit-overflow-scrolling: touch;
  1292. }
  1293. #overlayContainer > .container {
  1294. display: table-cell;
  1295. vertical-align: middle;
  1296. text-align: center;
  1297. }
  1298. #overlayContainer > .container > .dialog {
  1299. display: inline-block;
  1300. padding: 15px;
  1301. border-spacing: 4px;
  1302. color: hsl(0,0%,85%);
  1303. font-size: 12px;
  1304. line-height: 14px;
  1305. background-color: #474747; /* fallback */
  1306. background-image: url(images/texture.png),
  1307. linear-gradient(hsla(0,0%,32%,.99), hsla(0,0%,27%,.95));
  1308. box-shadow: inset 1px 0 0 hsla(0,0%,100%,.08),
  1309. inset 0 1px 1px hsla(0,0%,0%,.15),
  1310. inset 0 -1px 0 hsla(0,0%,100%,.05),
  1311. 0 1px 0 hsla(0,0%,0%,.15),
  1312. 0 1px 1px hsla(0,0%,0%,.1);
  1313. border: 1px solid hsla(0,0%,0%,.5);
  1314. border-radius: 4px;
  1315. box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  1316. }
  1317. .dialog > .row {
  1318. display: table-row;
  1319. }
  1320. .dialog > .row > * {
  1321. display: table-cell;
  1322. }
  1323. .dialog .toolbarField {
  1324. margin: 5px 0;
  1325. }
  1326. .dialog .toolbarField:hover,
  1327. .dialog .toolbarField:focus {
  1328. border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42);
  1329. }
  1330. .dialog .separator {
  1331. display: block;
  1332. margin: 4px 0 4px 0;
  1333. height: 1px;
  1334. width: 100%;
  1335. background-color: hsla(0,0%,0%,.5);
  1336. box-shadow: 0 0 0 1px hsla(0,0%,100%,.08);
  1337. }
  1338. .dialog .buttonRow {
  1339. text-align: center;
  1340. vertical-align: middle;
  1341. }
  1342. #passwordOverlay > .dialog {
  1343. text-align: center;
  1344. }
  1345. #passwordOverlay .toolbarField {
  1346. width: 200px;
  1347. }
  1348. #documentPropertiesOverlay > .dialog {
  1349. text-align: left;
  1350. }
  1351. #documentPropertiesOverlay .row > * {
  1352. min-width: 100px;
  1353. }
  1354. html[dir='ltr'] #documentPropertiesOverlay .row > * {
  1355. text-align: left;
  1356. }
  1357. html[dir='rtl'] #documentPropertiesOverlay .row > * {
  1358. text-align: right;
  1359. }
  1360. #documentPropertiesOverlay .row > span {
  1361. width: 125px;
  1362. word-wrap: break-word;
  1363. }
  1364. #documentPropertiesOverlay .row > p {
  1365. max-width: 225px;
  1366. word-wrap: break-word;
  1367. }
  1368. #documentPropertiesOverlay .buttonRow {
  1369. margin-top: 10px;
  1370. }
  1371. .clearBoth {
  1372. clear: both;
  1373. }
  1374. .fileInput {
  1375. background: white;
  1376. color: black;
  1377. margin-top: 5px;
  1378. visibility: hidden;
  1379. position: fixed;
  1380. right: 0;
  1381. top: 0;
  1382. }
  1383. #PDFBug {
  1384. background: none repeat scroll 0 0 white;
  1385. border: 1px solid #666666;
  1386. position: fixed;
  1387. top: 32px;
  1388. right: 0;
  1389. bottom: 0;
  1390. font-size: 10px;
  1391. padding: 0;
  1392. width: 300px;
  1393. }
  1394. #PDFBug .controls {
  1395. background:#EEEEEE;
  1396. border-bottom: 1px solid #666666;
  1397. padding: 3px;
  1398. }
  1399. #PDFBug .panels {
  1400. bottom: 0;
  1401. left: 0;
  1402. overflow: auto;
  1403. -webkit-overflow-scrolling: touch;
  1404. position: absolute;
  1405. right: 0;
  1406. top: 27px;
  1407. }
  1408. #PDFBug button.active {
  1409. font-weight: bold;
  1410. }
  1411. .debuggerShowText {
  1412. background: none repeat scroll 0 0 yellow;
  1413. color: blue;
  1414. }
  1415. .debuggerHideText:hover {
  1416. background: none repeat scroll 0 0 yellow;
  1417. }
  1418. #PDFBug .stats {
  1419. font-family: courier;
  1420. font-size: 10px;
  1421. white-space: pre;
  1422. }
  1423. #PDFBug .stats .title {
  1424. font-weight: bold;
  1425. }
  1426. #PDFBug table {
  1427. font-size: 10px;
  1428. }
  1429. #viewer.textLayer-visible .textLayer > div,
  1430. #viewer.textLayer-hover .textLayer > div:hover {
  1431. background-color: white;
  1432. color: black;
  1433. }
  1434. #viewer.textLayer-shadow .textLayer > div {
  1435. background-color: rgba(255,255,255, .6);
  1436. color: black;
  1437. }
  1438. .grab-to-pan-grab {
  1439. cursor: url("images/grab.cur"), move !important;
  1440. cursor: -webkit-grab !important;
  1441. cursor: -moz-grab !important;
  1442. cursor: grab !important;
  1443. }
  1444. .grab-to-pan-grab *:not(input):not(textarea):not(button):not(select):not(:link) {
  1445. cursor: inherit !important;
  1446. }
  1447. .grab-to-pan-grab:active,
  1448. .grab-to-pan-grabbing {
  1449. cursor: url("images/grabbing.cur"), move !important;
  1450. cursor: -webkit-grabbing !important;
  1451. cursor: -moz-grabbing !important;
  1452. cursor: grabbing !important;
  1453. position: fixed;
  1454. background: transparent;
  1455. display: block;
  1456. top: 0;
  1457. left: 0;
  1458. right: 0;
  1459. bottom: 0;
  1460. overflow: hidden;
  1461. z-index: 50000; /* should be higher than anything else in PDF.js! */
  1462. }
  1463. @page {
  1464. margin: 0;
  1465. }
  1466. #printContainer {
  1467. display: none;
  1468. }
  1469. @media screen and (min-resolution: 2dppx) {
  1470. /* Rules for Retina screens */
  1471. .toolbarButton::before {
  1472. -webkit-transform: scale(0.5);
  1473. transform: scale(0.5);
  1474. top: -5px;
  1475. }
  1476. .secondaryToolbarButton::before {
  1477. -webkit-transform: scale(0.5);
  1478. transform: scale(0.5);
  1479. top: -4px;
  1480. }
  1481. html[dir='ltr'] .toolbarButton::before,
  1482. html[dir='rtl'] .toolbarButton::before {
  1483. left: -1px;
  1484. }
  1485. html[dir='ltr'] .secondaryToolbarButton::before {
  1486. left: -2px;
  1487. }
  1488. html[dir='rtl'] .secondaryToolbarButton::before {
  1489. left: 186px;
  1490. }
  1491. .toolbarField.pageNumber.visiblePageIsLoading,
  1492. #findInput[data-status="pending"] {
  1493. background-image: url(images/loading-small@2x.png);
  1494. background-size: 16px 17px;
  1495. }
  1496. .dropdownToolbarButton {
  1497. background: url(images/toolbarButton-menuArrows@2x.png) no-repeat;
  1498. background-size: 7px 16px;
  1499. }
  1500. html[dir='ltr'] .toolbarButton#sidebarToggle::before {
  1501. content: url(images/toolbarButton-sidebarToggle@2x.png);
  1502. }
  1503. html[dir='rtl'] .toolbarButton#sidebarToggle::before {
  1504. content: url(images/toolbarButton-sidebarToggle-rtl@2x.png);
  1505. }
  1506. html[dir='ltr'] .toolbarButton#secondaryToolbarToggle::before {
  1507. content: url(images/toolbarButton-secondaryToolbarToggle@2x.png);
  1508. }
  1509. html[dir='rtl'] .toolbarButton#secondaryToolbarToggle::before {
  1510. content: url(images/toolbarButton-secondaryToolbarToggle-rtl@2x.png);
  1511. }
  1512. html[dir='ltr'] .toolbarButton.findPrevious::before {
  1513. content: url(images/findbarButton-previous@2x.png);
  1514. }
  1515. html[dir='rtl'] .toolbarButton.findPrevious::before {
  1516. content: url(images/findbarButton-previous-rtl@2x.png);
  1517. }
  1518. html[dir='ltr'] .toolbarButton.findNext::before {
  1519. content: url(images/findbarButton-next@2x.png);
  1520. }
  1521. html[dir='rtl'] .toolbarButton.findNext::before {
  1522. content: url(images/findbarButton-next-rtl@2x.png);
  1523. }
  1524. html[dir='ltr'] .toolbarButton.pageUp::before {
  1525. content: url(images/toolbarButton-pageUp@2x.png);
  1526. }
  1527. html[dir='rtl'] .toolbarButton.pageUp::before {
  1528. content: url(images/toolbarButton-pageUp-rtl@2x.png);
  1529. }
  1530. html[dir='ltr'] .toolbarButton.pageDown::before {
  1531. content: url(images/toolbarButton-pageDown@2x.png);
  1532. }
  1533. html[dir='rtl'] .toolbarButton.pageDown::before {
  1534. content: url(images/toolbarButton-pageDown-rtl@2x.png);
  1535. }
  1536. .toolbarButton.zoomIn::before {
  1537. content: url(images/toolbarButton-zoomIn@2x.png);
  1538. }
  1539. .toolbarButton.zoomOut::before {
  1540. content: url(images/toolbarButton-zoomOut@2x.png);
  1541. }
  1542. .toolbarButton.presentationMode::before,
  1543. .secondaryToolbarButton.presentationMode::before {
  1544. content: url(images/toolbarButton-presentationMode@2x.png);
  1545. }
  1546. .toolbarButton.print::before,
  1547. .secondaryToolbarButton.print::before {
  1548. content: url(images/toolbarButton-print@2x.png);
  1549. }
  1550. .toolbarButton.openFile::before,
  1551. .secondaryToolbarButton.openFile::before {
  1552. content: url(images/toolbarButton-openFile@2x.png);
  1553. }
  1554. .toolbarButton.download::before,
  1555. .secondaryToolbarButton.download::before {
  1556. content: url(images/toolbarButton-download@2x.png);
  1557. }
  1558. .toolbarButton.bookmark::before,
  1559. .secondaryToolbarButton.bookmark::before {
  1560. content: url(images/toolbarButton-bookmark@2x.png);
  1561. }
  1562. #viewThumbnail.toolbarButton::before {
  1563. content: url(images/toolbarButton-viewThumbnail@2x.png);
  1564. }
  1565. html[dir="ltr"] #viewOutline.toolbarButton::before {
  1566. content: url(images/toolbarButton-viewOutline@2x.png);
  1567. }
  1568. html[dir="rtl"] #viewOutline.toolbarButton::before {
  1569. content: url(images/toolbarButton-viewOutline-rtl@2x.png);
  1570. }
  1571. #viewAttachments.toolbarButton::before {
  1572. content: url(images/toolbarButton-viewAttachments@2x.png);
  1573. }
  1574. #viewFind.toolbarButton::before {
  1575. content: url(images/toolbarButton-search@2x.png);
  1576. }
  1577. .secondaryToolbarButton.firstPage::before {
  1578. content: url(images/secondaryToolbarButton-firstPage@2x.png);
  1579. }
  1580. .secondaryToolbarButton.lastPage::before {
  1581. content: url(images/secondaryToolbarButton-lastPage@2x.png);
  1582. }
  1583. .secondaryToolbarButton.rotateCcw::before {
  1584. content: url(images/secondaryToolbarButton-rotateCcw@2x.png);
  1585. }
  1586. .secondaryToolbarButton.rotateCw::before {
  1587. content: url(images/secondaryToolbarButton-rotateCw@2x.png);
  1588. }
  1589. .secondaryToolbarButton.handTool::before {
  1590. content: url(images/secondaryToolbarButton-handTool@2x.png);
  1591. }
  1592. .secondaryToolbarButton.documentProperties::before {
  1593. content: url(images/secondaryToolbarButton-documentProperties@2x.png);
  1594. }
  1595. }
  1596. @media print {
  1597. /* General rules for printing. */
  1598. body {
  1599. background: transparent none;
  1600. }
  1601. /* Rules for browsers that don't support mozPrintCallback. */
  1602. #sidebarContainer, #secondaryToolbar, .toolbar, #loadingBox, #errorWrapper, .textLayer {
  1603. display: none;
  1604. }
  1605. #viewerContainer {
  1606. overflow: visible;
  1607. }
  1608. #mainContainer, #viewerContainer, .page, .page canvas {
  1609. position: static;
  1610. padding: 0;
  1611. margin: 0;
  1612. }
  1613. .page {
  1614. float: left;
  1615. display: none;
  1616. border: none;
  1617. box-shadow: none;
  1618. background-clip: content-box;
  1619. background-color: white;
  1620. }
  1621. .page[data-loaded] {
  1622. display: block;
  1623. }
  1624. .fileInput {
  1625. display: none;
  1626. }
  1627. /* Rules for browsers that support mozPrintCallback */
  1628. body[data-mozPrintCallback] #outerContainer {
  1629. display: none;
  1630. }
  1631. body[data-mozPrintCallback] #printContainer {
  1632. display: block;
  1633. }
  1634. #printContainer canvas {
  1635. position: relative;
  1636. top: 0;
  1637. left: 0;
  1638. display: block;
  1639. }
  1640. }
  1641. .visibleLargeView,
  1642. .visibleMediumView,
  1643. .visibleSmallView {
  1644. display: none;
  1645. }
  1646. @media all and (max-width: 960px) {
  1647. html[dir='ltr'] #outerContainer.sidebarMoving .outerCenter,
  1648. html[dir='ltr'] #outerContainer.sidebarOpen .outerCenter {
  1649. float: left;
  1650. left: 205px;
  1651. }
  1652. html[dir='rtl'] #outerContainer.sidebarMoving .outerCenter,
  1653. html[dir='rtl'] #outerContainer.sidebarOpen .outerCenter {
  1654. float: right;
  1655. right: 205px;
  1656. }
  1657. }
  1658. @media all and (max-width: 900px) {
  1659. .sidebarOpen .hiddenLargeView {
  1660. display: none;
  1661. }
  1662. .sidebarOpen .visibleLargeView {
  1663. display: inherit;
  1664. }
  1665. }
  1666. @media all and (max-width: 860px) {
  1667. .sidebarOpen .hiddenMediumView {
  1668. display: none;
  1669. }
  1670. .sidebarOpen .visibleMediumView {
  1671. display: inherit;
  1672. }
  1673. }
  1674. @media all and (max-width: 770px) {
  1675. #sidebarContainer {
  1676. top: 32px;
  1677. z-index: 100;
  1678. }
  1679. .loadingInProgress #sidebarContainer {
  1680. top: 37px;
  1681. }
  1682. #sidebarContent {
  1683. top: 32px;
  1684. background-color: hsla(0,0%,0%,.7);
  1685. }
  1686. html[dir='ltr'] #outerContainer.sidebarOpen > #mainContainer {
  1687. left: 0px;
  1688. }
  1689. html[dir='rtl'] #outerContainer.sidebarOpen > #mainContainer {
  1690. right: 0px;
  1691. }
  1692. html[dir='ltr'] .outerCenter {
  1693. float: left;
  1694. left: 205px;
  1695. }
  1696. html[dir='rtl'] .outerCenter {
  1697. float: right;
  1698. right: 205px;
  1699. }
  1700. #outerContainer .hiddenLargeView,
  1701. #outerContainer .hiddenMediumView {
  1702. display: inherit;
  1703. }
  1704. #outerContainer .visibleLargeView,
  1705. #outerContainer .visibleMediumView {
  1706. display: none;
  1707. }
  1708. }
  1709. @media all and (max-width: 700px) {
  1710. #outerContainer .hiddenLargeView {
  1711. display: none;
  1712. }
  1713. #outerContainer .visibleLargeView {
  1714. display: inherit;
  1715. }
  1716. }
  1717. @media all and (max-width: 660px) {
  1718. #outerContainer .hiddenMediumView {
  1719. display: none;
  1720. }
  1721. #outerContainer .visibleMediumView {
  1722. display: inherit;
  1723. }
  1724. }
  1725. @media all and (max-width: 600px) {
  1726. .hiddenSmallView {
  1727. display: none;
  1728. }
  1729. .visibleSmallView {
  1730. display: inherit;
  1731. }
  1732. html[dir='ltr'] #outerContainer.sidebarMoving .outerCenter,
  1733. html[dir='ltr'] #outerContainer.sidebarOpen .outerCenter,
  1734. html[dir='ltr'] .outerCenter {
  1735. left: 156px;
  1736. }
  1737. html[dir='rtl'] #outerContainer.sidebarMoving .outerCenter,
  1738. html[dir='rtl'] #outerContainer.sidebarOpen .outerCenter,
  1739. html[dir='rtl'] .outerCenter {
  1740. right: 156px;
  1741. }
  1742. .toolbarButtonSpacer {
  1743. width: 0;
  1744. }
  1745. }
  1746. @media all and (max-width: 510px) {
  1747. #scaleSelectContainer, #pageNumberLabel {
  1748. display: none;
  1749. }
  1750. }