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