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