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

2165 lines
49 KiB

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