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