PluginProbe ʕ •ᴥ•ʔ
EmbedPress – PDF Embedder, 3D PDF FlipBook, Google Reviews, YouTube Videos, Upload & Embed PDF documents / 3.6.3
EmbedPress – PDF Embedder, 3D PDF FlipBook, Google Reviews, YouTube Videos, Upload & Embed PDF documents v3.6.3
4.6.5 4.6.4 4.6.3 4.6.2 4.6.1 4.6.0 4.5.6 4.5.5 4.5.4 4.5.3 4.5.2 trunk 1.0.0 1.1.0 1.1.1 1.1.2 1.1.3 1.2.0 1.3.0 1.3.1 1.4.0 1.4.1 1.4.2 1.4.3 1.4.4 1.5.0 1.6.0 1.6.1 1.6.2 1.6.3 1.7.0 1.7.1 1.7.2 1.7.3 1.7.4 1.7.5 2.0.0 2.0.1 2.0.2 2.0.3 2.1.0 2.1.1 2.1.2 2.1.3 2.1.4 2.1.5 2.1.6 2.2.0 2.2.1 2.2.2 2.3.0 2.3.1 2.3.2 2.3.3 2.4.0 2.4.1 2.5.0 2.5.1 2.5.2 2.5.3 2.5.4 2.5.5 2.6.0 2.6.1 2.6.2 2.7.0 2.7.1 2.7.2 2.7.3 2.7.4 2.7.5 2.7.6 2.7.7 3.0.0 3.0.1 3.0.2 3.0.3 3.0.4 3.1.0 3.1.1 3.1.2 3.1.3 3.2.0 3.2.1 3.3.0 3.3.1 3.3.2 3.3.3 3.3.4 3.3.5 3.3.6 3.3.7 3.4.0 3.4.1 3.4.2 3.4.3 3.5.0 3.5.1 3.5.2 3.5.3 3.6.0 3.6.1 3.6.2 3.6.3 3.6.4 3.6.5 3.6.6 3.6.7 3.6.8 3.7.0 3.7.1 3.7.2 3.7.3 3.8.0 3.8.1 3.8.2 3.8.3 3.8.4 3.8.5 3.9.0 3.9.1 3.9.10 3.9.11 3.9.12 3.9.13 3.9.14 3.9.15 3.9.16 3.9.17 3.9.2 3.9.3 3.9.4 3.9.5 3.9.6 3.9.7 3.9.8 3.9.9 4.0.0 4.0.1 4.0.10 4.0.11 4.0.12 4.0.13 4.0.14 4.0.2 4.0.3 4.0.4 4.0.5 4.0.6 4.0.7 4.0.8 4.0.9 4.1.0 4.1.1 4.1.10 4.1.2 4.1.3 4.1.4 4.1.5 4.1.6 4.1.7 4.1.8 4.1.9 4.2.0 4.2.1 4.2.2 4.2.3 4.2.4 4.2.5 4.2.6 4.2.7 4.2.8 4.2.9 4.3.0 4.3.1 4.4.0 4.4.1 4.4.10 4.4.11 4.4.2 4.4.3 4.4.4 4.4.5 4.4.6 4.4.7 4.4.8 4.4.9 4.5.0 4.5.1
embedpress / assets / pdf / web / viewer.css
embedpress / assets / pdf / web Last commit date
images 4 years ago locale 4 years ago ep-scripts.js 3 years ago viewer.css 3 years ago viewer.html 3 years ago viewer.js 4 years ago
viewer.css
2886 lines
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 /* Modified version */
17
18 .textLayer {
19 position: absolute;
20 left: 0;
21 top: 0;
22 right: 0;
23 bottom: 0;
24 overflow: hidden;
25 opacity: 0.2;
26 line-height: 1;
27 }
28
29 .textLayer span,
30 .textLayer br {
31 color: transparent;
32 position: absolute;
33 white-space: pre;
34 cursor: text;
35 transform-origin: 0% 0%;
36 }
37
38 .textLayer .highlight {
39 position: relative;
40 margin: -1px;
41 padding: 1px;
42 background-color: rgba(180, 0, 170, 1);
43 border-radius: 4px;
44 }
45
46 .textLayer .highlight.begin {
47 border-radius: 4px 0 0 4px;
48 }
49
50 .textLayer .highlight.end {
51 border-radius: 0 4px 4px 0;
52 }
53
54 .textLayer .highlight.middle {
55 border-radius: 0;
56 }
57
58 .textLayer .highlight.selected {
59 background-color: rgba(0, 100, 0, 1);
60 }
61
62 .textLayer ::-moz-selection {
63 background: rgba(0, 0, 255, 1);
64 }
65
66 .textLayer ::selection {
67 background: rgba(0, 0, 255, 1);
68 }
69
70 .textLayer .endOfContent {
71 display: block;
72 position: absolute;
73 left: 0;
74 top: 100%;
75 right: 0;
76 bottom: 0;
77 z-index: -1;
78 cursor: default;
79 -webkit-user-select: none;
80 -moz-user-select: none;
81 user-select: none;
82 }
83
84 .textLayer .endOfContent.active {
85 top: 0;
86 }
87
88
89 .annotationLayer section {
90 position: absolute;
91 text-align: initial;
92 }
93
94 .annotationLayer .linkAnnotation>a,
95 .annotationLayer .buttonWidgetAnnotation.pushButton>a {
96 position: absolute;
97 font-size: 1em;
98 top: 0;
99 left: 0;
100 width: 100%;
101 height: 100%;
102 }
103
104 .annotationLayer .linkAnnotation>a:hover,
105 .annotationLayer .buttonWidgetAnnotation.pushButton>a:hover {
106 opacity: 0.2;
107 background: rgba(255, 255, 0, 1);
108 box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
109 }
110
111 .annotationLayer .textAnnotation img {
112 position: absolute;
113 cursor: pointer;
114 }
115
116 .annotationLayer .textWidgetAnnotation input,
117 .annotationLayer .textWidgetAnnotation textarea,
118 .annotationLayer .choiceWidgetAnnotation select,
119 .annotationLayer .buttonWidgetAnnotation.checkBox input,
120 .annotationLayer .buttonWidgetAnnotation.radioButton input {
121 background-color: rgba(0, 54, 255, 0.13);
122 border: 1px solid transparent;
123 box-sizing: border-box;
124 font-size: 9px;
125 height: 100%;
126 margin: 0;
127 padding: 0 3px;
128 vertical-align: top;
129 width: 100%;
130 }
131
132 .annotationLayer .choiceWidgetAnnotation select option {
133 padding: 0;
134 }
135
136 .annotationLayer .buttonWidgetAnnotation.radioButton input {
137 border-radius: 50%;
138 }
139
140 .annotationLayer .textWidgetAnnotation textarea {
141 font: message-box;
142 font-size: 9px;
143 resize: none;
144 }
145
146 .annotationLayer .textWidgetAnnotation input[disabled],
147 .annotationLayer .textWidgetAnnotation textarea[disabled],
148 .annotationLayer .choiceWidgetAnnotation select[disabled],
149 .annotationLayer .buttonWidgetAnnotation.checkBox input[disabled],
150 .annotationLayer .buttonWidgetAnnotation.radioButton input[disabled] {
151 background: none;
152 border: 1px solid transparent;
153 cursor: not-allowed;
154 }
155
156 .annotationLayer .textWidgetAnnotation input:hover,
157 .annotationLayer .textWidgetAnnotation textarea:hover,
158 .annotationLayer .choiceWidgetAnnotation select:hover,
159 .annotationLayer .buttonWidgetAnnotation.checkBox input:hover,
160 .annotationLayer .buttonWidgetAnnotation.radioButton input:hover {
161 border: 1px solid rgba(0, 0, 0, 1);
162 }
163
164 .annotationLayer .textWidgetAnnotation input:focus,
165 .annotationLayer .textWidgetAnnotation textarea:focus,
166 .annotationLayer .choiceWidgetAnnotation select:focus {
167 background: none;
168 border: 1px solid transparent;
169 }
170
171 .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,
172 .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after,
173 .annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before {
174 background-color: rgba(0, 0, 0, 1);
175 content: "";
176 display: block;
177 position: absolute;
178 }
179
180 .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,
181 .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after {
182 height: 80%;
183 left: 45%;
184 width: 1px;
185 }
186
187 .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before {
188 transform: rotate(45deg);
189 }
190
191 .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after {
192 transform: rotate(-45deg);
193 }
194
195 .annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before {
196 border-radius: 50%;
197 height: 50%;
198 left: 30%;
199 top: 20%;
200 width: 50%;
201 }
202
203 .annotationLayer .textWidgetAnnotation input.comb {
204 font-family: monospace;
205 padding-left: 2px;
206 padding-right: 0;
207 }
208
209 .annotationLayer .textWidgetAnnotation input.comb:focus {
210 /*
211 * Letter spacing is placed on the right side of each character. Hence, the
212 * letter spacing of the last character may be placed outside the visible
213 * area, causing horizontal scrolling. We avoid this by extending the width
214 * when the element has focus and revert this when it loses focus.
215 */
216 width: 115%;
217 }
218
219 .annotationLayer .buttonWidgetAnnotation.checkBox input,
220 .annotationLayer .buttonWidgetAnnotation.radioButton input {
221 -webkit-appearance: none;
222 -moz-appearance: none;
223 appearance: none;
224 padding: 0;
225 }
226
227 .annotationLayer .popupWrapper {
228 position: absolute;
229 width: 20em;
230 }
231
232 .annotationLayer .popup {
233 position: absolute;
234 z-index: 200;
235 max-width: 20em;
236 background-color: rgba(255, 255, 153, 1);
237 box-shadow: 0 2px 5px rgba(136, 136, 136, 1);
238 border-radius: 2px;
239 padding: 6px;
240 margin-left: 5px;
241 cursor: pointer;
242 font: message-box;
243 font-size: 9px;
244 white-space: normal;
245 word-wrap: break-word;
246 }
247
248 .annotationLayer .popup>* {
249 font-size: 9px;
250 }
251
252 .annotationLayer .popup h1 {
253 display: inline-block;
254 }
255
256 .annotationLayer .popup span {
257 display: inline-block;
258 margin-left: 5px;
259 }
260
261 .annotationLayer .popup p {
262 border-top: 1px solid rgba(51, 51, 51, 1);
263 margin-top: 2px;
264 padding-top: 2px;
265 }
266
267 .annotationLayer .highlightAnnotation,
268 .annotationLayer .underlineAnnotation,
269 .annotationLayer .squigglyAnnotation,
270 .annotationLayer .strikeoutAnnotation,
271 .annotationLayer .freeTextAnnotation,
272 .annotationLayer .lineAnnotation svg line,
273 .annotationLayer .squareAnnotation svg rect,
274 .annotationLayer .circleAnnotation svg ellipse,
275 .annotationLayer .polylineAnnotation svg polyline,
276 .annotationLayer .polygonAnnotation svg polygon,
277 .annotationLayer .caretAnnotation,
278 .annotationLayer .inkAnnotation svg polyline,
279 .annotationLayer .stampAnnotation,
280 .annotationLayer .fileAttachmentAnnotation {
281 cursor: pointer;
282 }
283
284
285 .xfaLayer {
286 position: absolute;
287 top: 0;
288 left: 0;
289 z-index: 200;
290 transform-origin: 0 0;
291 }
292
293 .xfaLayer * {
294 color: inherit;
295 font: inherit;
296 font-style: inherit;
297 font-weight: inherit;
298 font-kerning: inherit;
299 letter-spacing: inherit;
300 text-align: inherit;
301 text-decoration: inherit;
302 vertical-align: inherit;
303 box-sizing: border-box;
304 background: transparent;
305 }
306
307 .xfaLayer a {
308 color: blue;
309 }
310
311 .xfaRich li {
312 margin-left: 3em;
313 }
314
315 .xfaFont {
316 color: black;
317 font-weight: normal;
318 font-kerning: none;
319 font-size: 10px;
320 font-style: normal;
321 letter-spacing: 0;
322 text-decoration: none;
323 vertical-align: 0;
324 }
325
326 .xfaDraw {
327 z-index: 100;
328 }
329
330 .xfaExclgroup {
331 z-index: 200;
332 }
333
334 .xfaField {
335 z-index: 300;
336 }
337
338 .xfaRich {
339 z-index: 300;
340 line-height: 1.2;
341 }
342
343 .xfaSubform {
344 z-index: 200;
345 }
346
347 .xfaLabel {
348 display: flex;
349 flex-direction: row;
350 align-items: center;
351 width: 100%;
352 height: 100%;
353 }
354
355 .xfaCaption {
356 flex: 1 1 auto;
357 }
358
359 .xfaBorderDiv {
360 background: transparent;
361 position: absolute;
362 pointer-events: none;
363 }
364
365 .xfaWrapper {
366 position: relative;
367 display: flex;
368 align-items: center;
369 justify-content: center;
370 width: auto;
371 height: auto;
372 }
373
374 .xfaContentArea {
375 overflow: hidden;
376 }
377
378 .xfaTextfield,
379 .xfaSelect {
380 background-color: rgba(0, 54, 255, 0.13);
381 }
382
383 .xfaTextfield:focus,
384 .xfaSelect:focus {
385 background-color: transparent;
386 }
387
388 .xfaTextfield,
389 .xfaSelect {
390 width: 100%;
391 height: 100%;
392 flex: 100 1 0;
393 border: none;
394 resize: none;
395 }
396
397 .xfaLabel>input[type="radio"] {
398 /* Use this trick to make the checkbox invisible but
399 but still focusable. */
400 position: absolute;
401 left: -99999px;
402 }
403
404 .xfaLabel>input[type="radio"]:focus+.xfaCheckboxMark {
405 box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
406 }
407
408 .xfaCheckboxMark {
409 cursor: pointer;
410 flex: 0 0 auto;
411 border-style: solid;
412 border-width: 2px;
413 border-color: #8f8f9d;
414 font-size: 10px;
415 line-height: 10px;
416 width: 10px;
417 height: 10px;
418 text-align: center;
419 vertical-align: middle;
420 display: flex;
421 flex-direction: row;
422 align-items: center;
423 }
424
425 .xfaCheckbox:checked+.xfaCheckboxMark::after {
426 content: attr(mark);
427 }
428
429 .xfaButton {
430 cursor: pointer;
431 width: 100%;
432 height: 100%;
433 border: none;
434 text-align: center;
435 }
436
437 .xfaButton:hover {
438 background: Highlight;
439 }
440
441 .xfaRich {
442 white-space: pre-wrap;
443 }
444
445 .xfaImage {
446 width: 100%;
447 height: 100%;
448 }
449
450 .xfaRich {
451 width: 100%;
452 height: auto;
453 }
454
455 .xfaPosition {
456 display: block;
457 }
458
459 .xfaLrTb,
460 .xfaRlTb,
461 .xfaTb {
462 display: flex;
463 flex-direction: column;
464 align-items: stretch;
465 }
466
467 .xfaLr,
468 .xfaRl,
469 .xfaTb>div {
470 flex: 1 1 auto;
471 }
472
473 .xfaTb>div {
474 justify-content: left;
475 }
476
477 .xfaLr>div {
478 display: inline;
479 float: left;
480 }
481
482 .xfaRl>div {
483 display: inline;
484 float: right;
485 }
486
487 .xfaPosition {
488 position: relative;
489 }
490
491 .xfaArea {
492 position: relative;
493 }
494
495 .xfaValignMiddle {
496 display: flex;
497 align-items: center;
498 }
499
500 .xfaLrTb>div {
501 display: inline;
502 float: left;
503 }
504
505 .xfaRlTb>div {
506 display: inline;
507 float: right;
508 }
509
510 .xfaTable {
511 display: flex;
512 flex-direction: column;
513 }
514
515 .xfaTable .xfaRow {
516 display: flex;
517 flex-direction: row;
518 flex: 1 1 auto;
519 }
520
521 .xfaTable .xfaRow>div {
522 flex: 1 1 auto;
523 }
524
525 .xfaTable .xfaRlRow {
526 display: flex;
527 flex-direction: row-reverse;
528 flex: 1;
529 }
530
531 .xfaTable .xfaRlRow>div {
532 flex: 1;
533 }
534
535 :root {
536 --pdfViewer-padding-bottom: none;
537 --page-margin: 1px auto -8px;
538 --page-border: 9px solid transparent;
539 --spreadHorizontalWrapped-margin-LR: -3.5px;
540 }
541
542 @media screen and (forced-colors: active) {
543 :root {
544 --pdfViewer-padding-bottom: 9px;
545 --page-margin: 9px auto 0;
546 --page-border: none;
547 --spreadHorizontalWrapped-margin-LR: 4.5px;
548 }
549 }
550
551 .pdfViewer {
552 padding-bottom: var(--pdfViewer-padding-bottom);
553 }
554
555 .pdfViewer .canvasWrapper {
556 overflow: hidden;
557 }
558
559 .pdfViewer .page {
560 direction: ltr;
561 width: 816px;
562 height: 1056px;
563 margin: var(--page-margin);
564 position: relative;
565 overflow: visible;
566 border: var(--page-border);
567 background-clip: content-box;
568 -o-border-image: url(images/shadow.png) 9 9 repeat;
569 border-image: url(images/shadow.png) 9 9 repeat;
570 background-color: rgba(255, 255, 255, 1);
571 }
572
573 .pdfViewer.removePageBorders .page {
574 margin: 0 auto 10px;
575 border: none;
576 }
577
578 .pdfViewer.singlePageView {
579 display: inline-block;
580 }
581
582 .pdfViewer.singlePageView .page {
583 margin: 0;
584 border: none;
585 }
586
587 .pdfViewer.scrollHorizontal,
588 .pdfViewer.scrollWrapped,
589 .spread {
590 margin-left: 3.5px;
591 margin-right: 3.5px;
592 text-align: center;
593 }
594
595 .pdfViewer.scrollHorizontal,
596 .spread {
597 white-space: nowrap;
598 }
599
600 .pdfViewer.removePageBorders,
601 .pdfViewer.scrollHorizontal .spread,
602 .pdfViewer.scrollWrapped .spread {
603 margin-left: 0;
604 margin-right: 0;
605 }
606
607 .spread .page,
608 .pdfViewer.scrollHorizontal .page,
609 .pdfViewer.scrollWrapped .page,
610 .pdfViewer.scrollHorizontal .spread,
611 .pdfViewer.scrollWrapped .spread {
612 display: inline-block;
613 vertical-align: middle;
614 }
615
616 .spread .page,
617 .pdfViewer.scrollHorizontal .page,
618 .pdfViewer.scrollWrapped .page {
619 margin-left: var(--spreadHorizontalWrapped-margin-LR);
620 margin-right: var(--spreadHorizontalWrapped-margin-LR);
621 }
622
623 .pdfViewer.removePageBorders .spread .page,
624 .pdfViewer.removePageBorders.scrollHorizontal .page,
625 .pdfViewer.removePageBorders.scrollWrapped .page {
626 margin-left: 5px;
627 margin-right: 5px;
628 }
629
630 .pdfViewer .page canvas {
631 margin: 0;
632 display: block;
633 }
634
635 .pdfViewer .page canvas[hidden] {
636 display: none;
637 }
638
639 .pdfViewer .page .loadingIcon {
640 position: absolute;
641 display: block;
642 left: 0;
643 top: 0;
644 right: 0;
645 bottom: 0;
646 background: url("images/loading-icon.gif") center no-repeat;
647 }
648
649 .pdfPresentationMode .pdfViewer {
650 margin-left: 0;
651 margin-right: 0;
652 }
653
654 .pdfPresentationMode .pdfViewer .page,
655 .pdfPresentationMode .pdfViewer .spread {
656 display: block;
657 }
658
659 .pdfPresentationMode .pdfViewer .page,
660 .pdfPresentationMode .pdfViewer.removePageBorders .page {
661 margin-left: auto;
662 margin-right: auto;
663 }
664
665 .pdfPresentationMode:-webkit-full-screen .pdfViewer .page {
666 margin-bottom: 100%;
667 border: 0;
668 }
669
670 .pdfPresentationMode:fullscreen .pdfViewer .page {
671 margin-bottom: 100%;
672 border: 0;
673 }
674
675 /* define for system light */
676 :root {
677 --sidebar-width: 200px;
678 --sidebar-transition-duration: 200ms;
679 --sidebar-transition-timing-function: ease;
680 --loadingBar-end-offset: 0;
681
682 --toolbar-icon-opacity: 0.7;
683 --doorhanger-icon-opacity: 0.9;
684
685 --main-color: rgba(12, 12, 13, 1);
686 --body-bg-color: rgba(237, 237, 240, 1);
687 --errorWrapper-bg-color: rgba(255, 110, 110, 1);
688 --progressBar-color: rgba(10, 132, 255, 1);
689 --progressBar-indeterminate-bg-color: rgba(221, 221, 222, 1);
690 --progressBar-indeterminate-blend-color: rgba(116, 177, 239, 1);
691 --scrollbar-color: auto;
692 --scrollbar-bg-color: auto;
693 --toolbar-icon-bg-color: rgba(0, 0, 0, 1);
694 --toolbar-icon-hover-bg-color: rgba(0, 0, 0, 1);
695
696 --sidebar-narrow-bg-color: rgba(237, 237, 240, 0.9);
697 --sidebar-toolbar-bg-color: rgba(245, 246, 247, 1);
698 --toolbar-bg-color: rgba(249, 249, 250, 1);
699 --toolbar-border-color: rgba(204, 204, 204, 1);
700 --button-hover-color: rgba(221, 222, 223, 1);
701 --toggled-btn-color: rgba(0, 0, 0, 1);
702 --toggled-btn-bg-color: rgba(0, 0, 0, 0.3);
703 --toggled-hover-active-btn-color: rgba(0, 0, 0, 0.4);
704 --dropdown-btn-bg-color: rgba(215, 215, 219, 1);
705 --separator-color: rgba(0, 0, 0, 0.3);
706 --field-color: rgba(6, 6, 6, 1);
707 --field-bg-color: rgba(255, 255, 255, 1);
708 --field-border-color: rgba(187, 187, 188, 1);
709 --findbar-nextprevious-btn-bg-color: rgba(227, 228, 230, 1);
710 --treeitem-color: rgba(0, 0, 0, 0.8);
711 --treeitem-hover-color: rgba(0, 0, 0, 0.9);
712 --treeitem-selected-color: rgba(0, 0, 0, 0.9);
713 --treeitem-selected-bg-color: rgba(0, 0, 0, 0.25);
714 --sidebaritem-bg-color: rgba(0, 0, 0, 0.15);
715 --doorhanger-bg-color: rgba(255, 255, 255, 1);
716 --doorhanger-border-color: rgba(12, 12, 13, 0.2);
717 --doorhanger-hover-color: rgba(12, 12, 13, 1);
718 --doorhanger-hover-bg-color: rgba(237, 237, 237, 1);
719 --doorhanger-separator-color: rgba(222, 222, 222, 1);
720 --overlay-button-border: 0 none;
721 --overlay-button-bg-color: rgba(12, 12, 13, 0.1);
722 --overlay-button-hover-bg-color: rgba(12, 12, 13, 0.3);
723
724 --loading-icon: url(images/loading.svg);
725 --treeitem-expanded-icon: url(images/treeitem-expanded.svg);
726 --treeitem-collapsed-icon: url(images/treeitem-collapsed.svg);
727 --toolbarButton-menuArrow-icon: url(images/toolbarButton-menuArrow.svg);
728 --toolbarButton-sidebarToggle-icon: url(images/toolbarButton-sidebarToggle.svg);
729 --toolbarButton-secondaryToolbarToggle-icon: url(images/toolbarButton-secondaryToolbarToggle.svg);
730 --toolbarButton-pageUp-icon: url(images/toolbarButton-pageUp.svg);
731 --toolbarButton-pageDown-icon: url(images/toolbarButton-pageDown.svg);
732 --toolbarButton-zoomOut-icon: url(images/toolbarButton-zoomOut.svg);
733 --toolbarButton-zoomIn-icon: url(images/toolbarButton-zoomIn.svg);
734 --toolbarButton-presentationMode-icon: url(images/toolbarButton-presentationMode.svg);
735 --toolbarButton-print-icon: url(images/toolbarButton-print.svg);
736 --toolbarButton-openFile-icon: url(images/toolbarButton-openFile.svg);
737 --toolbarButton-download-icon: url(images/toolbarButton-download.svg);
738 --toolbarButton-bookmark-icon: url(images/toolbarButton-bookmark.svg);
739 --toolbarButton-viewThumbnail-icon: url(images/toolbarButton-viewThumbnail.svg);
740 --toolbarButton-viewOutline-icon: url(images/toolbarButton-viewOutline.svg);
741 --toolbarButton-viewAttachments-icon: url(images/toolbarButton-viewAttachments.svg);
742 --toolbarButton-viewLayers-icon: url(images/toolbarButton-viewLayers.svg);
743 --toolbarButton-currentOutlineItem-icon: url(images/toolbarButton-currentOutlineItem.svg);
744 --toolbarButton-search-icon: url(images/toolbarButton-search.svg);
745 --findbarButton-previous-icon: url(images/findbarButton-previous.svg);
746 --findbarButton-next-icon: url(images/findbarButton-next.svg);
747 --secondaryToolbarButton-firstPage-icon: url(images/secondaryToolbarButton-firstPage.svg);
748 --secondaryToolbarButton-lastPage-icon: url(images/secondaryToolbarButton-lastPage.svg);
749 --secondaryToolbarButton-rotateCcw-icon: url(images/secondaryToolbarButton-rotateCcw.svg);
750 --secondaryToolbarButton-rotateCw-icon: url(images/secondaryToolbarButton-rotateCw.svg);
751 --secondaryToolbarButton-selectTool-icon: url(images/secondaryToolbarButton-selectTool.svg);
752 --secondaryToolbarButton-handTool-icon: url(images/secondaryToolbarButton-handTool.svg);
753 --secondaryToolbarButton-scrollVertical-icon: url(images/secondaryToolbarButton-scrollVertical.svg);
754 --secondaryToolbarButton-scrollHorizontal-icon: url(images/secondaryToolbarButton-scrollHorizontal.svg);
755 --secondaryToolbarButton-scrollWrapped-icon: url(images/secondaryToolbarButton-scrollWrapped.svg);
756 --secondaryToolbarButton-spreadNone-icon: url(images/secondaryToolbarButton-spreadNone.svg);
757 --secondaryToolbarButton-spreadOdd-icon: url(images/secondaryToolbarButton-spreadOdd.svg);
758 --secondaryToolbarButton-spreadEven-icon: url(images/secondaryToolbarButton-spreadEven.svg);
759 --secondaryToolbarButton-documentProperties-icon: url(images/secondaryToolbarButton-documentProperties.svg);
760 }
761
762 /* define for system dark */
763 @media (prefers-color-scheme: dark) {
764 :root {
765 --main-color: rgba(249, 249, 250, 1);
766 --body-bg-color: rgba(42, 42, 46, 1);
767 --errorWrapper-bg-color: rgba(169, 14, 14, 1);
768 --progressBar-color: rgba(0, 96, 223, 1);
769 --progressBar-indeterminate-bg-color: rgba(40, 40, 43, 1);
770 --progressBar-indeterminate-blend-color: rgba(20, 68, 133, 1);
771 --scrollbar-color: rgba(121, 121, 123, 1);
772 --scrollbar-bg-color: rgba(35, 35, 39, 1);
773 --toolbar-icon-bg-color: rgba(255, 255, 255, 1);
774 --toolbar-icon-hover-bg-color: rgba(255, 255, 255, 1);
775
776 --sidebar-narrow-bg-color: rgba(42, 42, 46, 0.9);
777 --sidebar-toolbar-bg-color: rgba(50, 50, 52, 1);
778 --toolbar-bg-color: rgba(56, 56, 61, 1);
779 --toolbar-border-color: rgba(12, 12, 13, 1);
780 --button-hover-color: rgba(102, 102, 103, 1);
781 --toggled-btn-color: rgba(255, 255, 255, 1);
782 --toggled-btn-bg-color: rgba(0, 0, 0, 0.3);
783 --toggled-hover-active-btn-color: rgba(0, 0, 0, 0.4);
784 --dropdown-btn-bg-color: rgba(74, 74, 79, 1);
785 --separator-color: rgba(0, 0, 0, 0.3);
786 --field-color: rgba(250, 250, 250, 1);
787 --field-bg-color: rgba(64, 64, 68, 1);
788 --field-border-color: rgba(115, 115, 115, 1);
789 --findbar-nextprevious-btn-bg-color: rgba(89, 89, 89, 1);
790 --treeitem-color: rgba(255, 255, 255, 0.8);
791 --treeitem-hover-color: rgba(255, 255, 255, 0.9);
792 --treeitem-selected-color: rgba(255, 255, 255, 0.9);
793 --treeitem-selected-bg-color: rgba(255, 255, 255, 0.25);
794 --sidebaritem-bg-color: rgba(255, 255, 255, 0.15);
795 --doorhanger-bg-color: rgba(74, 74, 79, 1);
796 --doorhanger-border-color: rgba(39, 39, 43, 1);
797 --doorhanger-hover-color: rgba(249, 249, 250, 1);
798 --doorhanger-hover-bg-color: rgba(93, 94, 98, 1);
799 --doorhanger-separator-color: rgba(92, 92, 97, 1);
800 --overlay-button-bg-color: rgba(92, 92, 97, 1);
801 --overlay-button-hover-bg-color: rgba(115, 115, 115, 1);
802
803 /* This image is used in <input> elements, which unfortunately means that
804 * the `mask-image` approach used with all of the other images doesn't work
805 * here; hence why we still have two versions of this particular image. */
806 --loading-icon: url(images/loading-dark.svg);
807 }
808 }
809
810 [ep-data-theme="light"] {
811 --sidebar-width: 200px;
812 --sidebar-transition-duration: 200ms;
813 --sidebar-transition-timing-function: ease;
814 --loadingBar-end-offset: 0;
815
816 --toolbar-icon-opacity: 0.7;
817 --doorhanger-icon-opacity: 0.9;
818
819 --main-color: rgba(12, 12, 13, 1);
820 --body-bg-color: rgba(237, 237, 240, 1);
821 --errorWrapper-bg-color: rgba(255, 110, 110, 1);
822 --progressBar-color: rgba(10, 132, 255, 1);
823 --progressBar-indeterminate-bg-color: rgba(221, 221, 222, 1);
824 --progressBar-indeterminate-blend-color: rgba(116, 177, 239, 1);
825 --scrollbar-color: auto;
826 --scrollbar-bg-color: auto;
827 --toolbar-icon-bg-color: rgba(0, 0, 0, 1);
828 --toolbar-icon-hover-bg-color: rgba(0, 0, 0, 1);
829
830 --sidebar-narrow-bg-color: rgba(237, 237, 240, 0.9);
831 --sidebar-toolbar-bg-color: rgba(245, 246, 247, 1);
832 --toolbar-bg-color: rgba(249, 249, 250, 1);
833 --toolbar-border-color: rgba(204, 204, 204, 1);
834 --button-hover-color: rgba(221, 222, 223, 1);
835 --toggled-btn-color: rgba(0, 0, 0, 1);
836 --toggled-btn-bg-color: rgba(0, 0, 0, 0.3);
837 --toggled-hover-active-btn-color: rgba(0, 0, 0, 0.4);
838 --dropdown-btn-bg-color: rgba(215, 215, 219, 1);
839 --separator-color: rgba(0, 0, 0, 0.3);
840 --field-color: rgba(6, 6, 6, 1);
841 --field-bg-color: rgba(255, 255, 255, 1);
842 --field-border-color: rgba(187, 187, 188, 1);
843 --findbar-nextprevious-btn-bg-color: rgba(227, 228, 230, 1);
844 --treeitem-color: rgba(0, 0, 0, 0.8);
845 --treeitem-hover-color: rgba(0, 0, 0, 0.9);
846 --treeitem-selected-color: rgba(0, 0, 0, 0.9);
847 --treeitem-selected-bg-color: rgba(0, 0, 0, 0.25);
848 --sidebaritem-bg-color: rgba(0, 0, 0, 0.15);
849 --doorhanger-bg-color: rgba(255, 255, 255, 1);
850 --doorhanger-border-color: rgba(12, 12, 13, 0.2);
851 --doorhanger-hover-color: rgba(12, 12, 13, 1);
852 --doorhanger-hover-bg-color: rgba(237, 237, 237, 1);
853 --doorhanger-separator-color: rgba(222, 222, 222, 1);
854 --overlay-button-border: 0 none;
855 --overlay-button-bg-color: rgba(12, 12, 13, 0.1);
856 --overlay-button-hover-bg-color: rgba(12, 12, 13, 0.3);
857
858 --loading-icon: url(images/loading.svg);
859 --treeitem-expanded-icon: url(images/treeitem-expanded.svg);
860 --treeitem-collapsed-icon: url(images/treeitem-collapsed.svg);
861 --toolbarButton-menuArrow-icon: url(images/toolbarButton-menuArrow.svg);
862 --toolbarButton-sidebarToggle-icon: url(images/toolbarButton-sidebarToggle.svg);
863 --toolbarButton-secondaryToolbarToggle-icon: url(images/toolbarButton-secondaryToolbarToggle.svg);
864 --toolbarButton-pageUp-icon: url(images/toolbarButton-pageUp.svg);
865 --toolbarButton-pageDown-icon: url(images/toolbarButton-pageDown.svg);
866 --toolbarButton-zoomOut-icon: url(images/toolbarButton-zoomOut.svg);
867 --toolbarButton-zoomIn-icon: url(images/toolbarButton-zoomIn.svg);
868 --toolbarButton-presentationMode-icon: url(images/toolbarButton-presentationMode.svg);
869 --toolbarButton-print-icon: url(images/toolbarButton-print.svg);
870 --toolbarButton-openFile-icon: url(images/toolbarButton-openFile.svg);
871 --toolbarButton-download-icon: url(images/toolbarButton-download.svg);
872 --toolbarButton-bookmark-icon: url(images/toolbarButton-bookmark.svg);
873 --toolbarButton-viewThumbnail-icon: url(images/toolbarButton-viewThumbnail.svg);
874 --toolbarButton-viewOutline-icon: url(images/toolbarButton-viewOutline.svg);
875 --toolbarButton-viewAttachments-icon: url(images/toolbarButton-viewAttachments.svg);
876 --toolbarButton-viewLayers-icon: url(images/toolbarButton-viewLayers.svg);
877 --toolbarButton-currentOutlineItem-icon: url(images/toolbarButton-currentOutlineItem.svg);
878 --toolbarButton-search-icon: url(images/toolbarButton-search.svg);
879 --findbarButton-previous-icon: url(images/findbarButton-previous.svg);
880 --findbarButton-next-icon: url(images/findbarButton-next.svg);
881 --secondaryToolbarButton-firstPage-icon: url(images/secondaryToolbarButton-firstPage.svg);
882 --secondaryToolbarButton-lastPage-icon: url(images/secondaryToolbarButton-lastPage.svg);
883 --secondaryToolbarButton-rotateCcw-icon: url(images/secondaryToolbarButton-rotateCcw.svg);
884 --secondaryToolbarButton-rotateCw-icon: url(images/secondaryToolbarButton-rotateCw.svg);
885 --secondaryToolbarButton-selectTool-icon: url(images/secondaryToolbarButton-selectTool.svg);
886 --secondaryToolbarButton-handTool-icon: url(images/secondaryToolbarButton-handTool.svg);
887 --secondaryToolbarButton-scrollVertical-icon: url(images/secondaryToolbarButton-scrollVertical.svg);
888 --secondaryToolbarButton-scrollHorizontal-icon: url(images/secondaryToolbarButton-scrollHorizontal.svg);
889 --secondaryToolbarButton-scrollWrapped-icon: url(images/secondaryToolbarButton-scrollWrapped.svg);
890 --secondaryToolbarButton-spreadNone-icon: url(images/secondaryToolbarButton-spreadNone.svg);
891 --secondaryToolbarButton-spreadOdd-icon: url(images/secondaryToolbarButton-spreadOdd.svg);
892 --secondaryToolbarButton-spreadEven-icon: url(images/secondaryToolbarButton-spreadEven.svg);
893 --secondaryToolbarButton-documentProperties-icon: url(images/secondaryToolbarButton-documentProperties.svg);
894 }
895
896 [ep-data-theme="dark"] {
897 --main-color: rgba(249, 249, 250, 1);
898 --body-bg-color: rgba(42, 42, 46, 1);
899 --errorWrapper-bg-color: rgba(169, 14, 14, 1);
900 --progressBar-color: rgba(0, 96, 223, 1);
901 --progressBar-indeterminate-bg-color: rgba(40, 40, 43, 1);
902 --progressBar-indeterminate-blend-color: rgba(20, 68, 133, 1);
903 --scrollbar-color: rgba(121, 121, 123, 1);
904 --scrollbar-bg-color: rgba(35, 35, 39, 1);
905 --toolbar-icon-bg-color: rgba(255, 255, 255, 1);
906 --toolbar-icon-hover-bg-color: rgba(255, 255, 255, 1);
907
908 --sidebar-narrow-bg-color: rgba(42, 42, 46, 0.9);
909 --sidebar-toolbar-bg-color: rgba(50, 50, 52, 1);
910 --toolbar-bg-color: rgba(56, 56, 61, 1);
911 --toolbar-border-color: rgba(12, 12, 13, 1);
912 --button-hover-color: rgba(102, 102, 103, 1);
913 --toggled-btn-color: rgba(255, 255, 255, 1);
914 --toggled-btn-bg-color: rgba(0, 0, 0, 0.3);
915 --toggled-hover-active-btn-color: rgba(0, 0, 0, 0.4);
916 --dropdown-btn-bg-color: rgba(74, 74, 79, 1);
917 --separator-color: rgba(0, 0, 0, 0.3);
918 --field-color: rgba(250, 250, 250, 1);
919 --field-bg-color: rgba(64, 64, 68, 1);
920 --field-border-color: rgba(115, 115, 115, 1);
921 --findbar-nextprevious-btn-bg-color: rgba(89, 89, 89, 1);
922 --treeitem-color: rgba(255, 255, 255, 0.8);
923 --treeitem-hover-color: rgba(255, 255, 255, 0.9);
924 --treeitem-selected-color: rgba(255, 255, 255, 0.9);
925 --treeitem-selected-bg-color: rgba(255, 255, 255, 0.25);
926 --sidebaritem-bg-color: rgba(255, 255, 255, 0.15);
927 --doorhanger-bg-color: rgba(74, 74, 79, 1);
928 --doorhanger-border-color: rgba(39, 39, 43, 1);
929 --doorhanger-hover-color: rgba(249, 249, 250, 1);
930 --doorhanger-hover-bg-color: rgba(93, 94, 98, 1);
931 --doorhanger-separator-color: rgba(92, 92, 97, 1);
932 --overlay-button-bg-color: rgba(92, 92, 97, 1);
933 --overlay-button-hover-bg-color: rgba(115, 115, 115, 1);
934
935 /* This image is used in <input> elements, which unfortunately means that
936 * the `mask-image` approach used with all of the other images doesn't work
937 * here; hence why we still have two versions of this particular image. */
938 --loading-icon: url(images/loading-dark.svg);
939 }
940
941 @media screen and (forced-colors: active) {
942 :root {
943 --main-color: ButtonText;
944 --button-hover-color: Highlight;
945 --doorhanger-hover-bg-color: Highlight;
946 --toolbar-icon-opacity: 1;
947 --toolbar-icon-bg-color: ButtonText;
948 --toolbar-icon-hover-bg-color: ButtonFace;
949 --toggled-btn-color: HighlightText;
950 --toggled-btn-bg-color: LinkText;
951 --doorhanger-hover-color: ButtonFace;
952 --doorhanger-border-color-whcm: 1px solid ButtonText;
953 --doorhanger-triangle-opacity-whcm: 0;
954 --overlay-button-border: 1px solid Highlight;
955 --overlay-button-hover-bg-color: Highlight;
956 --overlay-button-hover-color: ButtonFace;
957 --field-border-color: ButtonText;
958 }
959 }
960
961 #viewBookmark {
962 display: none !important;
963 }
964
965 * {
966 padding: 0;
967 margin: 0;
968 }
969
970 html {
971 height: 100%;
972 width: 100%;
973 /* Font size is needed to make the activity bar the correct size. */
974 font-size: 10px;
975 }
976
977 body {
978 height: 100%;
979 width: 100%;
980 background-color: var(--body-bg-color);
981 }
982
983 body,
984 input,
985 button,
986 select {
987 font: message-box;
988 outline: none;
989 scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color);
990 }
991
992 .hidden {
993 display: none !important;
994 }
995
996 [hidden] {
997 display: none !important;
998 }
999
1000 .pdfViewer.enablePermissions .textLayer span {
1001 -webkit-user-select: none !important;
1002 -moz-user-select: none !important;
1003 user-select: none !important;
1004 cursor: not-allowed;
1005 }
1006
1007 #viewerContainer.pdfPresentationMode:-webkit-full-screen {
1008 top: 0;
1009 border-top: 2px solid rgba(0, 0, 0, 0);
1010 background-color: rgba(0, 0, 0, 1);
1011 width: 100%;
1012 height: 100%;
1013 overflow: hidden;
1014 cursor: none;
1015 -webkit-user-select: none;
1016 user-select: none;
1017 }
1018
1019 #viewerContainer.pdfPresentationMode:fullscreen {
1020 top: 0;
1021 border-top: 2px solid rgba(0, 0, 0, 0);
1022 background-color: rgba(0, 0, 0, 1);
1023 width: 100%;
1024 height: 100%;
1025 overflow: hidden;
1026 cursor: none;
1027 -webkit-user-select: none;
1028 -moz-user-select: none;
1029 user-select: none;
1030 }
1031
1032 .pdfPresentationMode:-webkit-full-screen a:not(.internalLink) {
1033 display: none;
1034 }
1035
1036 .pdfPresentationMode:fullscreen a:not(.internalLink) {
1037 display: none;
1038 }
1039
1040 .pdfPresentationMode:-webkit-full-screen .textLayer span {
1041 cursor: none;
1042 }
1043
1044 .pdfPresentationMode:fullscreen .textLayer span {
1045 cursor: none;
1046 }
1047
1048 .pdfPresentationMode.pdfPresentationModeControls>*,
1049 .pdfPresentationMode.pdfPresentationModeControls .textLayer span {
1050 cursor: default;
1051 }
1052
1053 #outerContainer {
1054 width: 100%;
1055 height: 100%;
1056 position: relative;
1057 }
1058
1059 #sidebarContainer {
1060 position: absolute;
1061 top: 32px;
1062 bottom: 0;
1063 width: var(--sidebar-width);
1064 visibility: hidden;
1065 z-index: 100;
1066 border-top: 1px solid rgba(51, 51, 51, 1);
1067 transition-duration: var(--sidebar-transition-duration);
1068 transition-timing-function: var(--sidebar-transition-timing-function);
1069 }
1070
1071 html[dir="ltr"] #sidebarContainer {
1072 transition-property: left;
1073 left: calc(0px - var(--sidebar-width));
1074 border-right: var(--doorhanger-border-color-whcm);
1075 }
1076
1077 html[dir="rtl"] #sidebarContainer {
1078 transition-property: right;
1079 right: calc(0px - var(--sidebar-width));
1080 border-left: var(--doorhanger-border-color-whcm);
1081 }
1082
1083 #outerContainer.sidebarResizing #sidebarContainer {
1084 /* Improve responsiveness and avoid visual glitches when the sidebar is resized. */
1085 transition-duration: 0s;
1086 /* Prevent e.g. the thumbnails being selected when the sidebar is resized. */
1087 -webkit-user-select: none;
1088 -moz-user-select: none;
1089 user-select: none;
1090 }
1091
1092 #outerContainer.sidebarMoving #sidebarContainer,
1093 #outerContainer.sidebarOpen #sidebarContainer {
1094 visibility: visible;
1095 }
1096
1097 html[dir="ltr"] #outerContainer.sidebarOpen #sidebarContainer {
1098 left: 0;
1099 }
1100
1101 html[dir="rtl"] #outerContainer.sidebarOpen #sidebarContainer {
1102 right: 0;
1103 }
1104
1105 #mainContainer {
1106 position: absolute;
1107 top: 0;
1108 right: 0;
1109 bottom: 0;
1110 left: 0;
1111 min-width: 320px;
1112 }
1113
1114 #sidebarContent {
1115 top: 32px;
1116 bottom: 0;
1117 overflow: auto;
1118 -webkit-overflow-scrolling: touch;
1119 position: absolute;
1120 width: 100%;
1121 background-color: rgba(0, 0, 0, 0.1);
1122 }
1123
1124 html[dir="ltr"] #sidebarContent {
1125 left: 0;
1126 box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25);
1127 }
1128
1129 html[dir="rtl"] #sidebarContent {
1130 right: 0;
1131 box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25);
1132 }
1133
1134 #viewerContainer {
1135 overflow: auto;
1136 -webkit-overflow-scrolling: touch;
1137 position: absolute;
1138 top: 32px;
1139 right: 0;
1140 bottom: 0;
1141 left: 0;
1142 outline: none;
1143 }
1144
1145 #viewerContainer:not(.pdfPresentationMode) {
1146 transition-duration: var(--sidebar-transition-duration);
1147 transition-timing-function: var(--sidebar-transition-timing-function);
1148 }
1149
1150 #outerContainer.sidebarResizing #viewerContainer {
1151 /* Improve responsiveness and avoid visual glitches when the sidebar is resized. */
1152 transition-duration: 0s;
1153 }
1154
1155 html[dir="ltr"] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
1156 transition-property: left;
1157 left: var(--sidebar-width);
1158 }
1159
1160 html[dir="rtl"] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
1161 transition-property: right;
1162 right: var(--sidebar-width);
1163 }
1164
1165 .toolbar {
1166 position: relative;
1167 left: 0;
1168 right: 0;
1169 z-index: 9999;
1170 cursor: default;
1171 }
1172
1173 #toolbarContainer {
1174 width: 100%;
1175 }
1176
1177 #toolbarSidebar {
1178 width: 100%;
1179 height: 32px;
1180 background-color: var(--sidebar-toolbar-bg-color);
1181 }
1182
1183 html[dir="ltr"] #toolbarSidebar {
1184 box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25), 0 1px 0 rgba(0, 0, 0, 0.15),
1185 0 0 1px rgba(0, 0, 0, 0.1);
1186 }
1187
1188 html[dir="rtl"] #toolbarSidebar {
1189 box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25), 0 1px 0 rgba(0, 0, 0, 0.15),
1190 0 0 1px rgba(0, 0, 0, 0.1);
1191 }
1192
1193 html[dir="ltr"] #toolbarSidebar .toolbarButton {
1194 margin-right: 2px !important;
1195 }
1196
1197 html[dir="rtl"] #toolbarSidebar .toolbarButton {
1198 margin-left: 2px !important;
1199 }
1200
1201 html[dir="ltr"] #toolbarSidebarRight .toolbarButton {
1202 margin-right: 3px !important;
1203 }
1204
1205 html[dir="rtl"] #toolbarSidebarRight .toolbarButton {
1206 margin-left: 3px !important;
1207 }
1208
1209 #sidebarResizer {
1210 position: absolute;
1211 top: 0;
1212 bottom: 0;
1213 width: 6px;
1214 z-index: 200;
1215 cursor: ew-resize;
1216 }
1217
1218 html[dir="ltr"] #sidebarResizer {
1219 right: -6px;
1220 }
1221
1222 html[dir="rtl"] #sidebarResizer {
1223 left: -6px;
1224 }
1225
1226 #toolbarContainer,
1227 .findbar,
1228 .secondaryToolbar {
1229 position: relative;
1230 height: 32px;
1231 background-color: var(--toolbar-bg-color);
1232 box-shadow: 0 1px 0 var(--toolbar-border-color);
1233 }
1234
1235 #toolbarViewer {
1236 height: 32px;
1237 }
1238
1239 #loadingBar {
1240 position: absolute;
1241 height: 4px;
1242 background-color: var(--body-bg-color);
1243 border-bottom: 1px solid var(--toolbar-border-color);
1244
1245 transition-duration: var(--sidebar-transition-duration);
1246 transition-timing-function: var(--sidebar-transition-timing-function);
1247 }
1248
1249 html[dir="ltr"] #loadingBar {
1250 transition-property: left;
1251 left: 0;
1252 right: var(--loadingBar-end-offset);
1253 }
1254
1255 html[dir="rtl"] #loadingBar {
1256 transition-property: right;
1257 left: var(--loadingBar-end-offset);
1258 right: 0;
1259 }
1260
1261 html[dir="ltr"] #outerContainer.sidebarOpen #loadingBar {
1262 left: var(--sidebar-width);
1263 }
1264
1265 html[dir="rtl"] #outerContainer.sidebarOpen #loadingBar {
1266 right: var(--sidebar-width);
1267 }
1268
1269 #outerContainer.sidebarResizing #loadingBar {
1270 /* Improve responsiveness and avoid visual glitches when the sidebar is resized. */
1271 transition-duration: 0s;
1272 }
1273
1274 #loadingBar .progress {
1275 position: absolute;
1276 top: 0;
1277 left: 0;
1278 width: 0%;
1279 height: 100%;
1280 background-color: var(--progressBar-color);
1281 overflow: hidden;
1282 transition: width 200ms;
1283 }
1284
1285 @-webkit-keyframes progressIndeterminate {
1286 0% {
1287 left: -142px;
1288 }
1289
1290 100% {
1291 left: 0;
1292 }
1293 }
1294
1295 @keyframes progressIndeterminate {
1296 0% {
1297 left: -142px;
1298 }
1299
1300 100% {
1301 left: 0;
1302 }
1303 }
1304
1305 #loadingBar .progress.indeterminate {
1306 background-color: var(--progressBar-indeterminate-bg-color);
1307 transition: none;
1308 }
1309
1310 #loadingBar .progress.indeterminate .glimmer {
1311 position: absolute;
1312 top: 0;
1313 left: 0;
1314 height: 100%;
1315 width: calc(100% + 150px);
1316 background: repeating-linear-gradient(135deg,
1317 var(--progressBar-indeterminate-blend-color) 0,
1318 var(--progressBar-indeterminate-bg-color) 5px,
1319 var(--progressBar-indeterminate-bg-color) 45px,
1320 var(--progressBar-color) 55px,
1321 var(--progressBar-color) 95px,
1322 var(--progressBar-indeterminate-blend-color) 100px);
1323 -webkit-animation: progressIndeterminate 1s linear infinite;
1324 animation: progressIndeterminate 1s linear infinite;
1325 }
1326
1327 .findbar,
1328 .secondaryToolbar {
1329 top: 32px;
1330 position: absolute;
1331 z-index: 10000;
1332 height: auto;
1333 min-width: 16px;
1334 padding: 0 4px;
1335 margin: 4px 2px;
1336 color: rgba(217, 217, 217, 1);
1337 font-size: 12px;
1338 line-height: 14px;
1339 text-align: left;
1340 cursor: default;
1341 }
1342
1343 .findbar {
1344 min-width: 300px;
1345 background-color: var(--toolbar-bg-color);
1346 }
1347
1348 .findbar>div {
1349 height: 32px;
1350 }
1351
1352 .findbar.wrapContainers>div {
1353 clear: both;
1354 }
1355
1356 .findbar.wrapContainers>div#findbarMessageContainer {
1357 height: auto;
1358 }
1359
1360 html[dir="ltr"] .findbar {
1361 left: 64px;
1362 }
1363
1364 html[dir="rtl"] .findbar {
1365 right: 64px;
1366 }
1367
1368 .findbar .splitToolbarButton {
1369 margin-top: 3px;
1370 }
1371
1372 html[dir="ltr"] .findbar .splitToolbarButton {
1373 margin-left: 0;
1374 margin-right: 5px;
1375 }
1376
1377 html[dir="rtl"] .findbar .splitToolbarButton {
1378 margin-left: 5px;
1379 margin-right: 0;
1380 }
1381
1382 .findbar .splitToolbarButton>.toolbarButton {
1383 background-color: var(--findbar-nextprevious-btn-bg-color);
1384 border-radius: 0;
1385 height: 26px;
1386 border-top: 1px solid var(--field-border-color);
1387 border-bottom: 1px solid var(--field-border-color);
1388 }
1389
1390 .findbar .splitToolbarButton>.toolbarButton::before {
1391 top: 5px;
1392 }
1393
1394 .findbar .splitToolbarButton>.findNext {
1395 width: 29px;
1396 }
1397
1398 html[dir="ltr"] .findbar .splitToolbarButton>.findNext {
1399 border-bottom-right-radius: 2px;
1400 border-top-right-radius: 2px;
1401 border-right: 1px solid var(--field-border-color);
1402 }
1403
1404 html[dir="rtl"] .findbar .splitToolbarButton>.findNext {
1405 border-bottom-left-radius: 2px;
1406 border-top-left-radius: 2px;
1407 border-left: 1px solid var(--field-border-color);
1408 }
1409
1410 .findbar input[type="checkbox"] {
1411 pointer-events: none;
1412 }
1413
1414 .findbar label {
1415 -webkit-user-select: none;
1416 -moz-user-select: none;
1417 user-select: none;
1418 }
1419
1420 .findbar label:hover,
1421 .findbar input:focus+label {
1422 color: var(--toggled-btn-color);
1423 background-color: var(--button-hover-color);
1424 }
1425
1426 html[dir="ltr"] #findInput {
1427 border-top-right-radius: 0;
1428 border-bottom-right-radius: 0;
1429 }
1430
1431 html[dir="rtl"] #findInput {
1432 border-top-left-radius: 0;
1433 border-bottom-left-radius: 0;
1434 }
1435
1436 .findbar .toolbarField[type="checkbox"]:checked+.toolbarLabel {
1437 background-color: var(--toggled-btn-bg-color) !important;
1438 color: var(--toggled-btn-color);
1439 }
1440
1441 #findInput {
1442 width: 200px;
1443 }
1444
1445 #findInput::-moz-placeholder {
1446 font-style: normal;
1447 }
1448
1449 #findInput::placeholder {
1450 font-style: normal;
1451 }
1452
1453 #findInput[data-status="pending"] {
1454 background-image: var(--loading-icon);
1455 background-repeat: no-repeat;
1456 background-position: 98%;
1457 }
1458
1459 html[dir="rtl"] #findInput[data-status="pending"] {
1460 background-position: 3px;
1461 }
1462
1463 #findInput[data-status="notFound"] {
1464 background-color: rgba(255, 102, 102, 1);
1465 }
1466
1467 .secondaryToolbar {
1468 padding: 6px 0 10px;
1469 height: auto;
1470 z-index: 30000;
1471 background-color: var(--doorhanger-bg-color);
1472 }
1473
1474 html[dir="ltr"] .secondaryToolbar {
1475 right: 4px;
1476 }
1477
1478 html[dir="rtl"] .secondaryToolbar {
1479 left: 4px;
1480 }
1481
1482 #secondaryToolbarButtonContainer {
1483 max-width: 220px;
1484 max-height: 400px;
1485 overflow-y: auto;
1486 -webkit-overflow-scrolling: touch;
1487 margin-bottom: -4px;
1488 }
1489
1490 #secondaryToolbarButtonContainer.hiddenScrollModeButtons>.scrollModeButtons,
1491 #secondaryToolbarButtonContainer.hiddenSpreadModeButtons>.spreadModeButtons {
1492 display: none !important;
1493 }
1494
1495 .doorHanger,
1496 .doorHangerRight {
1497 border-radius: 2px;
1498 box-shadow: 0 1px 5px var(--doorhanger-border-color),
1499 0 0 0 1px var(--doorhanger-border-color);
1500 border: var(--doorhanger-border-color-whcm);
1501 }
1502
1503 .doorHanger:after,
1504 .doorHanger:before,
1505 .doorHangerRight:after,
1506 .doorHangerRight:before {
1507 bottom: 100%;
1508 border: solid rgba(0, 0, 0, 0);
1509 content: " ";
1510 height: 0;
1511 width: 0;
1512 position: absolute;
1513 pointer-events: none;
1514 opacity: var(--doorhanger-triangle-opacity-whcm);
1515 }
1516
1517 .doorHanger:after,
1518 .doorHangerRight:after {
1519 border-width: 8px;
1520 }
1521
1522 .doorHanger:after {
1523 border-bottom-color: var(--toolbar-bg-color);
1524 }
1525
1526 .doorHangerRight:after {
1527 border-bottom-color: var(--doorhanger-bg-color);
1528 }
1529
1530 .doorHanger:before,
1531 .doorHangerRight:before {
1532 border-bottom-color: var(--doorhanger-border-color);
1533 border-width: 9px;
1534 }
1535
1536 html[dir="ltr"] .doorHanger:after,
1537 html[dir="rtl"] .doorHangerRight:after {
1538 left: 10px;
1539 margin-left: -8px;
1540 }
1541
1542 html[dir="ltr"] .doorHanger:before,
1543 html[dir="rtl"] .doorHangerRight:before {
1544 left: 10px;
1545 margin-left: -9px;
1546 }
1547
1548 html[dir="rtl"] .doorHanger:after,
1549 html[dir="ltr"] .doorHangerRight:after {
1550 right: 10px;
1551 margin-right: -8px;
1552 }
1553
1554 html[dir="rtl"] .doorHanger:before,
1555 html[dir="ltr"] .doorHangerRight:before {
1556 right: 10px;
1557 margin-right: -9px;
1558 }
1559
1560 #findResultsCount {
1561 background-color: rgba(217, 217, 217, 1);
1562 color: rgba(82, 82, 82, 1);
1563 text-align: center;
1564 padding: 4px 5px;
1565 margin: 5px;
1566 }
1567
1568 #findMsg {
1569 color: rgba(251, 0, 0, 1);
1570 }
1571
1572 #findMsg:empty {
1573 display: none;
1574 }
1575
1576 #toolbarViewerMiddle {
1577 position: absolute;
1578 left: 50%;
1579 transform: translateX(-50%);
1580 }
1581
1582 html[dir="ltr"] #toolbarViewerLeft,
1583 html[dir="rtl"] #toolbarViewerRight,
1584 html[dir="ltr"] #toolbarSidebarLeft,
1585 html[dir="rtl"] #toolbarSidebarRight {
1586 float: left;
1587 }
1588
1589 html[dir="ltr"] #toolbarViewerRight,
1590 html[dir="rtl"] #toolbarViewerLeft,
1591 html[dir="ltr"] #toolbarSidebarRight,
1592 html[dir="rtl"] #toolbarSidebarLeft {
1593 float: right;
1594 }
1595
1596 html[dir="ltr"] #toolbarViewerLeft>*,
1597 html[dir="ltr"] #toolbarViewerMiddle>*,
1598 html[dir="ltr"] #toolbarViewerRight>*,
1599 html[dir="ltr"] #toolbarSidebarLeft *,
1600 html[dir="ltr"] #toolbarSidebarRight *,
1601 html[dir="ltr"] .findbar * {
1602 position: relative;
1603 float: left;
1604 }
1605
1606 html[dir="rtl"] #toolbarViewerLeft>*,
1607 html[dir="rtl"] #toolbarViewerMiddle>*,
1608 html[dir="rtl"] #toolbarViewerRight>*,
1609 html[dir="rtl"] #toolbarSidebarLeft *,
1610 html[dir="rtl"] #toolbarSidebarRight *,
1611 html[dir="rtl"] .findbar * {
1612 position: relative;
1613 float: right;
1614 }
1615
1616 .splitToolbarButton {
1617 margin: 2px 2px 0;
1618 display: inline-block;
1619 }
1620
1621 html[dir="ltr"] .splitToolbarButton>.toolbarButton {
1622 float: left;
1623 }
1624
1625 html[dir="rtl"] .splitToolbarButton>.toolbarButton {
1626 float: right;
1627 }
1628
1629 .toolbarButton,
1630 .secondaryToolbarButton,
1631 .overlayButton {
1632 border: 0 none;
1633 background: none;
1634 width: 28px;
1635 height: 28px;
1636 }
1637
1638 .overlayButton:hover,
1639 .overlayButton:focus {
1640 background-color: var(--overlay-button-hover-bg-color);
1641 }
1642
1643 .overlayButton:hover>span,
1644 .overlayButton:focus>span {
1645 color: var(--overlay-button-hover-color);
1646 }
1647
1648 .toolbarButton>span {
1649 display: inline-block;
1650 width: 0;
1651 height: 0;
1652 overflow: hidden;
1653 }
1654
1655 .toolbarButton[disabled],
1656 .secondaryToolbarButton[disabled],
1657 .overlayButton[disabled] {
1658 opacity: 0.5;
1659 }
1660
1661 .splitToolbarButton.toggled .toolbarButton {
1662 margin: 0;
1663 }
1664
1665 .splitToolbarButton>.toolbarButton:hover,
1666 .splitToolbarButton>.toolbarButton:focus,
1667 .dropdownToolbarButton:hover,
1668 .toolbarButton.textButton:hover,
1669 .toolbarButton.textButton:focus {
1670 background-color: var(--button-hover-color);
1671 z-index: 199;
1672 }
1673
1674 .splitToolbarButton>.toolbarButton {
1675 position: relative;
1676 }
1677
1678 html[dir="ltr"] .splitToolbarButton>.toolbarButton:first-child,
1679 html[dir="rtl"] .splitToolbarButton>.toolbarButton:last-child {
1680 margin: 0;
1681 }
1682
1683 html[dir="ltr"] .splitToolbarButton>.toolbarButton:last-child,
1684 html[dir="rtl"] .splitToolbarButton>.toolbarButton:first-child {
1685 margin: 0;
1686 }
1687
1688 .splitToolbarButtonSeparator {
1689 padding: 10px 0;
1690 width: 1px;
1691 background-color: var(--separator-color);
1692 z-index: 99;
1693 display: inline-block;
1694 margin: 4px 0;
1695 }
1696
1697 .findbar .splitToolbarButtonSeparator {
1698 background-color: var(--field-border-color);
1699 margin: 0;
1700 padding: 13px 0;
1701 }
1702
1703 html[dir="ltr"] .splitToolbarButtonSeparator {
1704 float: left;
1705 }
1706
1707 html[dir="rtl"] .splitToolbarButtonSeparator {
1708 float: right;
1709 }
1710
1711 .toolbarButton,
1712 .dropdownToolbarButton,
1713 .secondaryToolbarButton,
1714 .overlayButton {
1715 min-width: 16px;
1716 margin: 2px 1px;
1717 padding: 2px 6px 0;
1718 border: none;
1719 border-radius: 2px;
1720 color: var(--main-color);
1721 font-size: 12px;
1722 line-height: 14px;
1723 -webkit-user-select: none;
1724 -moz-user-select: none;
1725 user-select: none;
1726 cursor: default;
1727 box-sizing: border-box;
1728 }
1729
1730 html[dir="ltr"] #toolbarViewerLeft>.toolbarButton:first-child,
1731 html[dir="rtl"] #toolbarViewerRight>.toolbarButton:last-child {
1732 margin-left: 2px;
1733 }
1734
1735 html[dir="ltr"] #toolbarViewerRight>.toolbarButton:last-child,
1736 html[dir="rtl"] #toolbarViewerLeft>.toolbarButton:first-child {
1737 margin-right: 2px;
1738 }
1739
1740 .toolbarButton:hover,
1741 .toolbarButton:focus {
1742 background-color: var(--button-hover-color);
1743 }
1744
1745 .secondaryToolbarButton:hover,
1746 .secondaryToolbarButton:focus {
1747 background-color: var(--doorhanger-hover-bg-color);
1748 color: var(--doorhanger-hover-color);
1749 }
1750
1751 .toolbarButton.toggled,
1752 .splitToolbarButton.toggled>.toolbarButton.toggled,
1753 .secondaryToolbarButton.toggled {
1754 background-color: var(--toggled-btn-bg-color);
1755 color: var(--toggled-btn-color);
1756 }
1757
1758 .secondaryToolbarButton.toggled::before {
1759 background-color: var(--toggled-btn-color);
1760 }
1761
1762 .toolbarButton.toggled::before {
1763 background-color: var(--toggled-btn-color);
1764 }
1765
1766 .toolbarButton.toggled:hover:active,
1767 .splitToolbarButton.toggled>.toolbarButton.toggled:hover:active,
1768 .secondaryToolbarButton.toggled:hover:active {
1769 background-color: var(--toggled-hover-active-btn-color);
1770 }
1771
1772 .dropdownToolbarButton {
1773 width: 140px;
1774 padding: 0;
1775 overflow: hidden;
1776 background-color: var(--dropdown-btn-bg-color);
1777 margin-top: 2px !important;
1778 }
1779
1780 .dropdownToolbarButton::after {
1781 top: 6px;
1782 pointer-events: none;
1783
1784 -webkit-mask-image: var(--toolbarButton-menuArrow-icon);
1785 mask-image: var(--toolbarButton-menuArrow-icon);
1786 }
1787
1788 html[dir="ltr"] .dropdownToolbarButton::after {
1789 right: 7px;
1790 }
1791
1792 html[dir="rtl"] .dropdownToolbarButton::after {
1793 left: 7px;
1794 }
1795
1796 .dropdownToolbarButton>select {
1797 width: 162px;
1798 height: 28px;
1799 font-size: 12px;
1800 color: var(--main-color);
1801 margin: 0;
1802 padding: 1px 0 2px;
1803 border: none;
1804 background-color: var(--dropdown-btn-bg-color);
1805 }
1806
1807 html[dir="ltr"] .dropdownToolbarButton>select {
1808 padding-left: 4px;
1809 }
1810
1811 html[dir="rtl"] .dropdownToolbarButton>select {
1812 padding-right: 4px;
1813 }
1814
1815 .dropdownToolbarButton>select:hover,
1816 .dropdownToolbarButton>select:focus {
1817 background-color: var(--button-hover-color);
1818 color: var(--toggled-btn-color);
1819 }
1820
1821 .dropdownToolbarButton>select>option {
1822 background: var(--doorhanger-bg-color);
1823 color: var(--main-color);
1824 }
1825
1826 #customScaleOption {
1827 display: none;
1828 }
1829
1830 #pageWidthOption {
1831 border-bottom: 1px rgba(255, 255, 255, 0.5) solid;
1832 }
1833
1834 .toolbarButtonSpacer {
1835 width: 30px;
1836 display: inline-block;
1837 height: 1px;
1838 }
1839
1840 .toolbarButton::before,
1841 .secondaryToolbarButton::before,
1842 .dropdownToolbarButton::after,
1843 .treeItemToggler::before {
1844 /* All matching images have a size of 16x16
1845 * All relevant containers have a size of 28x28 */
1846 position: absolute;
1847 display: inline-block;
1848 width: 16px;
1849 height: 16px;
1850
1851 content: "";
1852 background-color: var(--toolbar-icon-bg-color);
1853 -webkit-mask-size: cover;
1854 mask-size: cover;
1855 }
1856
1857 .dropdownToolbarButton:hover::after,
1858 .dropdownToolbarButton:focus::after,
1859 .dropdownToolbarButton:active::after {
1860 background-color: var(--toolbar-icon-hover-bg-color);
1861 }
1862
1863 .toolbarButton::before {
1864 opacity: var(--toolbar-icon-opacity);
1865 top: 6px;
1866 left: 6px;
1867 }
1868
1869 .toolbarButton:hover::before,
1870 .toolbarButton:focus::before,
1871 .secondaryToolbarButton:hover::before,
1872 .secondaryToolbarButton:focus::before {
1873 background-color: var(--toolbar-icon-hover-bg-color);
1874 }
1875
1876 .secondaryToolbarButton::before {
1877 opacity: var(--doorhanger-icon-opacity);
1878 top: 5px;
1879 }
1880
1881 html[dir="ltr"] .secondaryToolbarButton::before {
1882 left: 12px;
1883 }
1884
1885 html[dir="rtl"] .secondaryToolbarButton::before {
1886 right: 12px;
1887 }
1888
1889 .toolbarButton#sidebarToggle::before {
1890 -webkit-mask-image: var(--toolbarButton-sidebarToggle-icon);
1891 mask-image: var(--toolbarButton-sidebarToggle-icon);
1892 }
1893
1894 html[dir="rtl"] .toolbarButton#sidebarToggle::before {
1895 transform: scaleX(-1);
1896 }
1897
1898 .toolbarButton#secondaryToolbarToggle::before {
1899 -webkit-mask-image: var(--toolbarButton-secondaryToolbarToggle-icon);
1900 mask-image: var(--toolbarButton-secondaryToolbarToggle-icon);
1901 }
1902
1903 html[dir="rtl"] .toolbarButton#secondaryToolbarToggle::before {
1904 transform: scaleX(-1);
1905 }
1906
1907 .toolbarButton.findPrevious::before {
1908 -webkit-mask-image: var(--findbarButton-previous-icon);
1909 mask-image: var(--findbarButton-previous-icon);
1910 }
1911
1912 .toolbarButton.findNext::before {
1913 -webkit-mask-image: var(--findbarButton-next-icon);
1914 mask-image: var(--findbarButton-next-icon);
1915 }
1916
1917 .toolbarButton.pageUp::before {
1918 -webkit-mask-image: var(--toolbarButton-pageUp-icon);
1919 mask-image: var(--toolbarButton-pageUp-icon);
1920 }
1921
1922 .toolbarButton.pageDown::before {
1923 -webkit-mask-image: var(--toolbarButton-pageDown-icon);
1924 mask-image: var(--toolbarButton-pageDown-icon);
1925 }
1926
1927 .toolbarButton.zoomOut::before {
1928 -webkit-mask-image: var(--toolbarButton-zoomOut-icon);
1929 mask-image: var(--toolbarButton-zoomOut-icon);
1930 }
1931
1932 .toolbarButton.zoomIn::before {
1933 -webkit-mask-image: var(--toolbarButton-zoomIn-icon);
1934 mask-image: var(--toolbarButton-zoomIn-icon);
1935 }
1936
1937 .toolbarButton.presentationMode::before,
1938 .secondaryToolbarButton.presentationMode::before {
1939 -webkit-mask-image: var(--toolbarButton-presentationMode-icon);
1940 mask-image: var(--toolbarButton-presentationMode-icon);
1941 }
1942
1943 .toolbarButton.print::before,
1944 .secondaryToolbarButton.print::before {
1945 -webkit-mask-image: var(--toolbarButton-print-icon);
1946 mask-image: var(--toolbarButton-print-icon);
1947 }
1948
1949 .toolbarButton.openFile::before,
1950 .secondaryToolbarButton.openFile::before {
1951 -webkit-mask-image: var(--toolbarButton-openFile-icon);
1952 mask-image: var(--toolbarButton-openFile-icon);
1953 }
1954
1955 .toolbarButton.download::before,
1956 .secondaryToolbarButton.download::before {
1957 -webkit-mask-image: var(--toolbarButton-download-icon);
1958 mask-image: var(--toolbarButton-download-icon);
1959 }
1960
1961 .secondaryToolbarButton.bookmark {
1962 padding-top: 6px;
1963 text-decoration: none;
1964 }
1965
1966 .bookmark[href="#"] {
1967 opacity: 0.5;
1968 pointer-events: none;
1969 }
1970
1971 .toolbarButton.bookmark::before,
1972 .secondaryToolbarButton.bookmark::before {
1973 -webkit-mask-image: var(--toolbarButton-bookmark-icon);
1974 mask-image: var(--toolbarButton-bookmark-icon);
1975 }
1976
1977 #viewThumbnail.toolbarButton::before {
1978 -webkit-mask-image: var(--toolbarButton-viewThumbnail-icon);
1979 mask-image: var(--toolbarButton-viewThumbnail-icon);
1980 }
1981
1982 #viewOutline.toolbarButton::before {
1983 -webkit-mask-image: var(--toolbarButton-viewOutline-icon);
1984 mask-image: var(--toolbarButton-viewOutline-icon);
1985 }
1986
1987 html[dir="rtl"] #viewOutline.toolbarButton::before {
1988 transform: scaleX(-1);
1989 }
1990
1991 #viewAttachments.toolbarButton::before {
1992 -webkit-mask-image: var(--toolbarButton-viewAttachments-icon);
1993 mask-image: var(--toolbarButton-viewAttachments-icon);
1994 }
1995
1996 #viewLayers.toolbarButton::before {
1997 -webkit-mask-image: var(--toolbarButton-viewLayers-icon);
1998 mask-image: var(--toolbarButton-viewLayers-icon);
1999 }
2000
2001 #currentOutlineItem.toolbarButton::before {
2002 -webkit-mask-image: var(--toolbarButton-currentOutlineItem-icon);
2003 mask-image: var(--toolbarButton-currentOutlineItem-icon);
2004 }
2005
2006 html[dir="rtl"] #currentOutlineItem.toolbarButton::before {
2007 transform: scaleX(-1);
2008 }
2009
2010 #viewFind.toolbarButton::before {
2011 -webkit-mask-image: var(--toolbarButton-search-icon);
2012 mask-image: var(--toolbarButton-search-icon);
2013 }
2014
2015 .toolbarButton.pdfSidebarNotification::after {
2016 position: absolute;
2017 display: inline-block;
2018 top: 1px;
2019 /* Create a filled circle, with a diameter of 9 pixels, using only CSS: */
2020 content: "";
2021 background-color: rgba(112, 219, 85, 1);
2022 height: 9px;
2023 width: 9px;
2024 border-radius: 50%;
2025 }
2026
2027 html[dir="ltr"] .toolbarButton.pdfSidebarNotification::after {
2028 left: 17px;
2029 }
2030
2031 html[dir="rtl"] .toolbarButton.pdfSidebarNotification::after {
2032 right: 17px;
2033 }
2034
2035 .secondaryToolbarButton {
2036 position: relative;
2037 margin: 0;
2038 padding: 0 0 1px;
2039 height: auto;
2040 min-height: 26px;
2041 width: auto;
2042 min-width: 100%;
2043 white-space: normal;
2044 border-radius: 0;
2045 box-sizing: border-box;
2046 }
2047
2048 html[dir="ltr"] .secondaryToolbarButton {
2049 padding-left: 36px;
2050 text-align: left;
2051 }
2052
2053 html[dir="rtl"] .secondaryToolbarButton {
2054 padding-right: 36px;
2055 text-align: right;
2056 }
2057
2058 html[dir="ltr"] .secondaryToolbarButton>span {
2059 padding-right: 4px;
2060 }
2061
2062 html[dir="rtl"] .secondaryToolbarButton>span {
2063 padding-left: 4px;
2064 }
2065
2066 .secondaryToolbarButton.firstPage::before {
2067 -webkit-mask-image: var(--secondaryToolbarButton-firstPage-icon);
2068 mask-image: var(--secondaryToolbarButton-firstPage-icon);
2069 }
2070
2071 .secondaryToolbarButton.lastPage::before {
2072 -webkit-mask-image: var(--secondaryToolbarButton-lastPage-icon);
2073 mask-image: var(--secondaryToolbarButton-lastPage-icon);
2074 }
2075
2076 .secondaryToolbarButton.rotateCcw::before {
2077 -webkit-mask-image: var(--secondaryToolbarButton-rotateCcw-icon);
2078 mask-image: var(--secondaryToolbarButton-rotateCcw-icon);
2079 }
2080
2081 .secondaryToolbarButton.rotateCw::before {
2082 -webkit-mask-image: var(--secondaryToolbarButton-rotateCw-icon);
2083 mask-image: var(--secondaryToolbarButton-rotateCw-icon);
2084 }
2085
2086 .secondaryToolbarButton.selectTool::before {
2087 -webkit-mask-image: var(--secondaryToolbarButton-selectTool-icon);
2088 mask-image: var(--secondaryToolbarButton-selectTool-icon);
2089 }
2090
2091 .secondaryToolbarButton.handTool::before {
2092 -webkit-mask-image: var(--secondaryToolbarButton-handTool-icon);
2093 mask-image: var(--secondaryToolbarButton-handTool-icon);
2094 }
2095
2096 .secondaryToolbarButton.scrollVertical::before {
2097 -webkit-mask-image: var(--secondaryToolbarButton-scrollVertical-icon);
2098 mask-image: var(--secondaryToolbarButton-scrollVertical-icon);
2099 }
2100
2101 .secondaryToolbarButton.scrollHorizontal::before {
2102 -webkit-mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon);
2103 mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon);
2104 }
2105
2106 .secondaryToolbarButton.scrollWrapped::before {
2107 -webkit-mask-image: var(--secondaryToolbarButton-scrollWrapped-icon);
2108 mask-image: var(--secondaryToolbarButton-scrollWrapped-icon);
2109 }
2110
2111 .secondaryToolbarButton.spreadNone::before {
2112 -webkit-mask-image: var(--secondaryToolbarButton-spreadNone-icon);
2113 mask-image: var(--secondaryToolbarButton-spreadNone-icon);
2114 }
2115
2116 .secondaryToolbarButton.spreadOdd::before {
2117 -webkit-mask-image: var(--secondaryToolbarButton-spreadOdd-icon);
2118 mask-image: var(--secondaryToolbarButton-spreadOdd-icon);
2119 }
2120
2121 .secondaryToolbarButton.spreadEven::before {
2122 -webkit-mask-image: var(--secondaryToolbarButton-spreadEven-icon);
2123 mask-image: var(--secondaryToolbarButton-spreadEven-icon);
2124 }
2125
2126 .secondaryToolbarButton.documentProperties::before {
2127 -webkit-mask-image: var(--secondaryToolbarButton-documentProperties-icon);
2128 mask-image: var(--secondaryToolbarButton-documentProperties-icon);
2129 }
2130
2131 .verticalToolbarSeparator {
2132 display: block;
2133 padding: 11px 0;
2134 margin: 5px 2px;
2135 width: 1px;
2136 background-color: var(--separator-color);
2137 }
2138
2139 html[dir="ltr"] .verticalToolbarSeparator {
2140 margin-left: 2px;
2141 }
2142
2143 html[dir="rtl"] .verticalToolbarSeparator {
2144 margin-right: 2px;
2145 }
2146
2147 .horizontalToolbarSeparator {
2148 display: block;
2149 margin: 6px 0 5px;
2150 height: 1px;
2151 width: 100%;
2152 border-top: 1px solid var(--doorhanger-separator-color);
2153 }
2154
2155 .toolbarField {
2156 padding: 4px 7px;
2157 margin: 3px 0;
2158 border-radius: 2px;
2159 background-color: var(--field-bg-color);
2160 background-clip: padding-box;
2161 border-width: 1px;
2162 border-style: solid;
2163 border-color: var(--field-border-color);
2164 box-shadow: none;
2165 color: var(--field-color);
2166 font-size: 12px;
2167 line-height: 16px;
2168 outline-style: none;
2169 }
2170
2171 .toolbarField[type="checkbox"] {
2172 opacity: 0;
2173 position: absolute !important;
2174 left: 0;
2175 }
2176
2177 html[dir="ltr"] .toolbarField[type="checkbox"] {
2178 margin: 10px 0 3px 7px;
2179 }
2180
2181 html[dir="rtl"] .toolbarField[type="checkbox"] {
2182 margin: 10px 7px 3px 0;
2183 }
2184
2185 .toolbarField.pageNumber {
2186 -moz-appearance: textfield;
2187 /* hides the spinner in moz */
2188 min-width: 16px;
2189 text-align: right;
2190 width: 40px;
2191 }
2192
2193 .toolbarField.pageNumber.visiblePageIsLoading {
2194 background-image: var(--loading-icon);
2195 background-repeat: no-repeat;
2196 background-position: 3px;
2197 }
2198
2199 .toolbarField.pageNumber::-webkit-inner-spin-button,
2200 .toolbarField.pageNumber::-webkit-outer-spin-button {
2201 -webkit-appearance: none;
2202 margin: 0;
2203 }
2204
2205 .toolbarField:focus {
2206 border-color: #0a84ff;
2207 }
2208
2209 .toolbarLabel {
2210 min-width: 16px;
2211 padding: 7px;
2212 margin: 2px;
2213 border-radius: 2px;
2214 color: var(--main-color);
2215 font-size: 12px;
2216 line-height: 14px;
2217 text-align: left;
2218 -webkit-user-select: none;
2219 -moz-user-select: none;
2220 user-select: none;
2221 cursor: default;
2222 }
2223
2224 html[dir="ltr"] #numPages.toolbarLabel {
2225 padding-left: 3px;
2226 }
2227
2228 html[dir="rtl"] #numPages.toolbarLabel {
2229 padding-right: 3px;
2230 }
2231
2232 #thumbnailView {
2233 position: absolute;
2234 width: calc(100% - 60px);
2235 top: 0;
2236 bottom: 0;
2237 padding: 10px 30px 0;
2238 overflow: auto;
2239 -webkit-overflow-scrolling: touch;
2240 }
2241
2242 #thumbnailView>a:active,
2243 #thumbnailView>a:focus {
2244 outline: 0;
2245 }
2246
2247 .thumbnail {
2248 margin: 0 10px 5px;
2249 }
2250
2251 html[dir="ltr"] .thumbnail {
2252 float: left;
2253 }
2254
2255 html[dir="rtl"] .thumbnail {
2256 float: right;
2257 }
2258
2259 #thumbnailView>a:last-of-type>.thumbnail {
2260 margin-bottom: 10px;
2261 }
2262
2263 #thumbnailView>a:last-of-type>.thumbnail:not([data-loaded]) {
2264 margin-bottom: 9px;
2265 }
2266
2267 .thumbnail:not([data-loaded]) {
2268 border: 1px dashed rgba(132, 132, 132, 1);
2269 margin: -1px 9px 4px;
2270 }
2271
2272 .thumbnailImage {
2273 border: 1px solid rgba(0, 0, 0, 0);
2274 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
2275 opacity: 0.8;
2276 z-index: 99;
2277 background-color: rgba(255, 255, 255, 1);
2278 background-clip: content-box;
2279 }
2280
2281 .thumbnailSelectionRing {
2282 border-radius: 2px;
2283 padding: 7px;
2284 }
2285
2286 a:focus>.thumbnail>.thumbnailSelectionRing>.thumbnailImage,
2287 .thumbnail:hover>.thumbnailSelectionRing>.thumbnailImage {
2288 opacity: 0.9;
2289 }
2290
2291 a:focus>.thumbnail>.thumbnailSelectionRing,
2292 .thumbnail:hover>.thumbnailSelectionRing {
2293 background-color: var(--sidebaritem-bg-color);
2294 background-clip: padding-box;
2295 color: rgba(255, 255, 255, 0.9);
2296 }
2297
2298 .thumbnail.selected>.thumbnailSelectionRing>.thumbnailImage {
2299 opacity: 1;
2300 }
2301
2302 .thumbnail.selected>.thumbnailSelectionRing {
2303 background-color: var(--sidebaritem-bg-color);
2304 background-clip: padding-box;
2305 color: rgba(255, 255, 255, 1);
2306 }
2307
2308 #outlineView,
2309 #attachmentsView,
2310 #layersView {
2311 position: absolute;
2312 width: calc(100% - 8px);
2313 top: 0;
2314 bottom: 0;
2315 padding: 4px 4px 0;
2316 overflow: auto;
2317 -webkit-overflow-scrolling: touch;
2318 -webkit-user-select: none;
2319 -moz-user-select: none;
2320 user-select: none;
2321 }
2322
2323 html[dir="ltr"] .treeWithDeepNesting>.treeItem,
2324 html[dir="ltr"] .treeItem>.treeItems {
2325 margin-left: 20px;
2326 }
2327
2328 html[dir="rtl"] .treeWithDeepNesting>.treeItem,
2329 html[dir="rtl"] .treeItem>.treeItems {
2330 margin-right: 20px;
2331 }
2332
2333 .treeItem>a {
2334 text-decoration: none;
2335 display: inline-block;
2336 min-width: 95%;
2337 /* Subtract the right padding (left, in RTL mode) of the container: */
2338 min-width: calc(100% - 4px);
2339 height: auto;
2340 margin-bottom: 1px;
2341 border-radius: 2px;
2342 color: var(--treeitem-color);
2343 font-size: 13px;
2344 line-height: 15px;
2345 -webkit-user-select: none;
2346 -moz-user-select: none;
2347 user-select: none;
2348 white-space: normal;
2349 cursor: pointer;
2350 }
2351
2352 html[dir="ltr"] .treeItem>a {
2353 padding: 2px 0 5px 4px;
2354 }
2355
2356 html[dir="rtl"] .treeItem>a {
2357 padding: 2px 4px 5px 0;
2358 }
2359
2360 #layersView .treeItem>a>* {
2361 cursor: pointer;
2362 }
2363
2364 html[dir="ltr"] #layersView .treeItem>a>label {
2365 padding-left: 4px;
2366 }
2367
2368 html[dir="rtl"] #layersView .treesItem>a>label {
2369 padding-right: 4px;
2370 }
2371
2372 .treeItemToggler {
2373 position: relative;
2374 height: 0;
2375 width: 0;
2376 color: rgba(255, 255, 255, 0.5);
2377 }
2378
2379 .treeItemToggler::before {
2380 -webkit-mask-image: var(--treeitem-expanded-icon);
2381 mask-image: var(--treeitem-expanded-icon);
2382 }
2383
2384 .treeItemToggler.treeItemsHidden::before {
2385 -webkit-mask-image: var(--treeitem-collapsed-icon);
2386 mask-image: var(--treeitem-collapsed-icon);
2387 }
2388
2389 html[dir="rtl"] .treeItemToggler.treeItemsHidden::before {
2390 transform: scaleX(-1);
2391 }
2392
2393 .treeItemToggler.treeItemsHidden~.treeItems {
2394 display: none;
2395 }
2396
2397 html[dir="ltr"] .treeItemToggler {
2398 float: left;
2399 }
2400
2401 html[dir="rtl"] .treeItemToggler {
2402 float: right;
2403 }
2404
2405 html[dir="ltr"] .treeItemToggler::before {
2406 right: 4px;
2407 }
2408
2409 html[dir="rtl"] .treeItemToggler::before {
2410 left: 4px;
2411 }
2412
2413 .treeItem.selected>a {
2414 background-color: var(--treeitem-selected-bg-color);
2415 color: var(--treeitem-selected-color);
2416 }
2417
2418 .treeItemToggler:hover,
2419 .treeItemToggler:hover+a,
2420 .treeItemToggler:hover~.treeItems,
2421 .treeItem>a:hover {
2422 background-color: var(--sidebaritem-bg-color);
2423 background-clip: padding-box;
2424 border-radius: 2px;
2425 color: var(--treeitem-hover-color);
2426 }
2427
2428 /* TODO: file FF bug to support ::-moz-selection:window-inactive
2429 so we can override the opaque grey background when the window is inactive;
2430 see https://bugzilla.mozilla.org/show_bug.cgi?id=706209 */
2431 ::-moz-selection {
2432 background: rgba(0, 0, 255, 0.3);
2433 }
2434
2435 ::selection {
2436 background: rgba(0, 0, 255, 0.3);
2437 }
2438
2439 #errorWrapper {
2440 background: none repeat scroll 0 0 var(--errorWrapper-bg-color);
2441 color: var(--main-color);
2442 left: 0;
2443 position: absolute;
2444 right: 0;
2445 z-index: 1000;
2446 padding: 3px 6px;
2447 }
2448
2449 #errorMessageLeft {
2450 float: left;
2451 }
2452
2453 #errorMessageRight {
2454 float: right;
2455 }
2456
2457 #errorMoreInfo {
2458 background-color: var(--field-bg-color);
2459 color: var(--field-color);
2460 border: 1px solid var(--field-border-color);
2461 padding: 3px;
2462 margin: 3px;
2463 width: 98%;
2464 }
2465
2466 .overlayButton {
2467 width: auto;
2468 margin: 3px 4px 2px !important;
2469 padding: 2px 11px;
2470 color: var(--main-color);
2471 background-color: var(--overlay-button-bg-color);
2472 border: var(--overlay-button-border) !important;
2473 }
2474
2475 #overlayContainer {
2476 display: table;
2477 position: absolute;
2478 width: 100%;
2479 height: 100%;
2480 background-color: rgba(0, 0, 0, 0.2);
2481 z-index: 40000;
2482 }
2483
2484 #overlayContainer>* {
2485 overflow: auto;
2486 -webkit-overflow-scrolling: touch;
2487 }
2488
2489 #overlayContainer>.container {
2490 display: table-cell;
2491 vertical-align: middle;
2492 text-align: center;
2493 }
2494
2495 #overlayContainer>.container>.dialog {
2496 display: inline-block;
2497 padding: 15px;
2498 border-spacing: 4px;
2499 color: var(--main-color);
2500 font-size: 12px;
2501 line-height: 14px;
2502 background-color: var(--doorhanger-bg-color);
2503 border: 1px solid rgba(0, 0, 0, 0.5);
2504 border-radius: 4px;
2505 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
2506 }
2507
2508 .dialog>.row {
2509 display: table-row;
2510 }
2511
2512 .dialog>.row>* {
2513 display: table-cell;
2514 }
2515
2516 .dialog .toolbarField {
2517 margin: 5px 0;
2518 }
2519
2520 .dialog .separator {
2521 display: block;
2522 margin: 4px 0;
2523 height: 1px;
2524 width: 100%;
2525 background-color: var(--separator-color);
2526 }
2527
2528 .dialog .buttonRow {
2529 text-align: center;
2530 vertical-align: middle;
2531 }
2532
2533 .dialog :link {
2534 color: rgba(255, 255, 255, 1);
2535 }
2536
2537 #passwordOverlay>.dialog {
2538 text-align: center;
2539 }
2540
2541 #passwordOverlay .toolbarField {
2542 width: 200px;
2543 }
2544
2545 #documentPropertiesOverlay>.dialog {
2546 text-align: left;
2547 }
2548
2549 #documentPropertiesOverlay .row>* {
2550 min-width: 100px;
2551 }
2552
2553 html[dir="ltr"] #documentPropertiesOverlay .row>* {
2554 text-align: left;
2555 }
2556
2557 html[dir="rtl"] #documentPropertiesOverlay .row>* {
2558 text-align: right;
2559 }
2560
2561 #documentPropertiesOverlay .row>span {
2562 width: 125px;
2563 word-wrap: break-word;
2564 }
2565
2566 #documentPropertiesOverlay .row>p {
2567 max-width: 225px;
2568 word-wrap: break-word;
2569 }
2570
2571 #documentPropertiesOverlay .buttonRow {
2572 margin-top: 10px;
2573 }
2574
2575 .clearBoth {
2576 clear: both;
2577 }
2578
2579 .fileInput {
2580 background: rgba(255, 255, 255, 1);
2581 color: rgba(0, 0, 0, 1);
2582 margin-top: 5px;
2583 visibility: hidden;
2584 position: fixed;
2585 right: 0;
2586 top: 0;
2587 }
2588
2589 #PDFBug {
2590 background: none repeat scroll 0 0 rgba(255, 255, 255, 1);
2591 border: 1px solid rgba(102, 102, 102, 1);
2592 position: fixed;
2593 top: 32px;
2594 right: 0;
2595 bottom: 0;
2596 font-size: 10px;
2597 padding: 0;
2598 width: 300px;
2599 }
2600
2601 #PDFBug .controls {
2602 background: rgba(238, 238, 238, 1);
2603 border-bottom: 1px solid rgba(102, 102, 102, 1);
2604 padding: 3px;
2605 }
2606
2607 #PDFBug .panels {
2608 bottom: 0;
2609 left: 0;
2610 overflow: auto;
2611 -webkit-overflow-scrolling: touch;
2612 position: absolute;
2613 right: 0;
2614 top: 27px;
2615 }
2616
2617 #PDFBug .panels>div {
2618 padding: 5px;
2619 }
2620
2621 #PDFBug button.active {
2622 font-weight: bold;
2623 }
2624
2625 .debuggerShowText {
2626 background: none repeat scroll 0 0 rgba(255, 255, 0, 1);
2627 color: rgba(0, 0, 255, 1);
2628 }
2629
2630 .debuggerHideText:hover {
2631 background: none repeat scroll 0 0 rgba(255, 255, 0, 1);
2632 }
2633
2634 #PDFBug .stats {
2635 font-family: courier;
2636 font-size: 10px;
2637 white-space: pre;
2638 }
2639
2640 #PDFBug .stats .title {
2641 font-weight: bold;
2642 }
2643
2644 #PDFBug table {
2645 font-size: 10px;
2646 }
2647
2648 #viewer.textLayer-visible .textLayer {
2649 opacity: 1;
2650 }
2651
2652 #viewer.textLayer-visible .canvasWrapper {
2653 background-color: rgba(128, 255, 128, 1);
2654 }
2655
2656 #viewer.textLayer-visible .canvasWrapper canvas {
2657 mix-blend-mode: screen;
2658 }
2659
2660 #viewer.textLayer-visible .textLayer span {
2661 background-color: rgba(255, 255, 0, 0.1);
2662 color: rgba(0, 0, 0, 1);
2663 border: solid 1px rgba(255, 0, 0, 0.5);
2664 box-sizing: border-box;
2665 }
2666
2667 #viewer.textLayer-hover .textLayer span:hover {
2668 background-color: rgba(255, 255, 255, 1);
2669 color: rgba(0, 0, 0, 1);
2670 }
2671
2672 #viewer.textLayer-shadow .textLayer span {
2673 background-color: rgba(255, 255, 255, 0.6);
2674 color: rgba(0, 0, 0, 1);
2675 }
2676
2677 .grab-to-pan-grab {
2678 cursor: url("images/grab.cur"), move !important;
2679 cursor: -webkit-grab !important;
2680 cursor: grab !important;
2681 }
2682
2683 .grab-to-pan-grab *:not(input):not(textarea):not(button):not(select):not(:link) {
2684 cursor: inherit !important;
2685 }
2686
2687 .grab-to-pan-grab:active,
2688 .grab-to-pan-grabbing {
2689 cursor: url("images/grabbing.cur"), move !important;
2690 cursor: -webkit-grabbing !important;
2691 cursor: grabbing !important;
2692 position: fixed;
2693 background: rgba(0, 0, 0, 0);
2694 display: block;
2695 top: 0;
2696 left: 0;
2697 right: 0;
2698 bottom: 0;
2699 overflow: hidden;
2700 z-index: 50000;
2701 /* should be higher than anything else in PDF.js! */
2702 }
2703
2704 @page { {
2705 margin: 0;
2706 }
2707
2708 #printContainer {
2709 display: none;
2710 }
2711
2712 @media print {
2713
2714 /* General rules for printing. */
2715 body {
2716 background: rgba(0, 0, 0, 0) none;
2717 }
2718
2719 /* Rules for browsers that don't support mozPrintCallback. */
2720 #sidebarContainer,
2721 #secondaryToolbar,
2722 .toolbar,
2723 #loadingBox,
2724 #errorWrapper,
2725 .textLayer {
2726 display: none;
2727 }
2728
2729 #viewerContainer {
2730 overflow: visible;
2731 }
2732
2733 #mainContainer,
2734 #viewerContainer,
2735 .page,
2736 .page canvas {
2737 position: static;
2738 padding: 0;
2739 margin: 0;
2740 }
2741
2742 .page {
2743 float: left;
2744 display: none;
2745 border: none;
2746 box-shadow: none;
2747 background-clip: content-box;
2748 background-color: rgba(255, 255, 255, 1);
2749 }
2750
2751 .page[data-loaded] {
2752 display: block;
2753 }
2754
2755 .fileInput {
2756 display: none;
2757 }
2758
2759 /* Rules for browsers that support PDF.js printing */
2760 body[data-pdfjsprinting] #outerContainer {
2761 display: none;
2762 }
2763
2764 body[data-pdfjsprinting] #printContainer {
2765 display: block;
2766 }
2767
2768 #printContainer {
2769 height: 100%;
2770 }
2771
2772 /* wrapper around (scaled) print canvas elements */
2773 #printContainer>div {
2774 page-break-after: always;
2775 page-break-inside: avoid;
2776
2777 /* The wrapper always cover the whole page. */
2778 height: 100%;
2779 width: 100%;
2780
2781 display: flex;
2782 flex-direction: column;
2783 justify-content: center;
2784 align-items: center;
2785 }
2786
2787 #printContainer canvas,
2788 #printContainer img {
2789 /* The intrinsic canvas / image size will make sure that we fit the page. */
2790 max-width: 100%;
2791 max-height: 100%;
2792
2793 direction: ltr;
2794 display: block;
2795 }
2796 }
2797
2798 .visibleLargeView,
2799 .visibleMediumView,
2800 .visibleSmallView {
2801 display: none;
2802 }
2803
2804 @media all and (max-width: 900px) {
2805 #toolbarViewerMiddle {
2806 display: table;
2807 margin: auto;
2808 left: auto;
2809 position: inherit;
2810 transform: none;
2811 }
2812 }
2813
2814 @media all and (max-width: 840px) {
2815 #sidebarContainer {
2816 background-color: var(--sidebar-narrow-bg-color);
2817 }
2818
2819 html[dir="ltr"] #outerContainer.sidebarOpen #viewerContainer {
2820 left: 0 !important;
2821 }
2822
2823 html[dir="rtl"] #outerContainer.sidebarOpen #viewerContainer {
2824 right: 0 !important;
2825 }
2826
2827 #outerContainer .hiddenLargeView,
2828 #outerContainer .hiddenMediumView {
2829 display: inherit;
2830 }
2831
2832 #outerContainer .visibleLargeView,
2833 #outerContainer .visibleMediumView {
2834 display: none;
2835 }
2836 }
2837
2838 @media all and (max-width: 770px) {
2839 #outerContainer .hiddenLargeView {
2840 display: none;
2841 }
2842
2843 #outerContainer .visibleLargeView {
2844 display: inherit;
2845 }
2846 }
2847
2848 @media all and (max-width: 700px) {
2849 #outerContainer .hiddenMediumView {
2850 display: none;
2851 }
2852
2853 #outerContainer .visibleMediumView {
2854 display: none;
2855 }
2856 }
2857
2858 @media all and (max-width: 640px) {
2859
2860 .hiddenSmallView,
2861 .hiddenSmallView * {
2862 display: none;
2863 }
2864
2865 .visibleSmallView {
2866 display: none;
2867 }
2868
2869 .toolbarButtonSpacer {
2870 width: 0;
2871 }
2872
2873 html[dir="ltr"] .findbar {
2874 left: 34px;
2875 }
2876
2877 html[dir="rtl"] .findbar {
2878 right: 34px;
2879 }
2880 }
2881
2882 @media all and (max-width: 535px) {
2883 #scaleSelectContainer {
2884 display: none;
2885 }
2886 }