• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1html {
2  height: 100%;
3}
4
5body {
6  -webkit-user-select: none;
7  background: white;
8  display: -webkit-box;
9  font-family: 'Open Sans', Arial, sans-serif;
10  height: 100%;
11  margin: 0;
12  opacity: 0;
13  overflow: hidden;
14}
15
16body.loaded {
17  opacity: 1;
18}
19
20a {
21  -webkit-transition: text-shadow .15s;
22  color: #506c40;
23  text-decoration: none;
24  text-shadow: 0 0 1px white;
25}
26
27a:hover {
28  text-shadow: 0 0 1px rgba(80, 108, 164, .5);
29}
30
31a:active {
32  color: #283c78;
33  text-shadow: 0 0 1px rgba(40, 60, 120, .5);
34}
35
36p {
37  margin: 20px 0;
38  padding: 0;
39}
40
41p:first-child {
42  margin-top: 0;
43}
44
45p:last-child {
46  margin-bottom: 0;
47}
48
49p.list {
50  font-weight: 600;
51  margin-bottom: 6px;
52}
53
54.options-block {
55  -webkit-padding-start: 100px;
56}
57
58header {
59  -webkit-box-shadow: inset 0 2px 3px rgba(0, 0, 0, .1),
60                      0 2px 2px rgba(0, 0, 0, .1);
61  -webkit-user-select: none;
62  background-clip: border-box;
63  background-image: none,
64                    -webkit-linear-gradient(#dcdcdc, #f0f0f0);
65  background-origin: border-box;
66  background-position: 80px 26px, 0 0;
67  background-repeat: no-repeat;
68  background-size: 26px, 100%;
69  border-bottom: 1px solid rgba(255, 255, 255, .5);
70  display: block;
71  margin: 0;
72  margin-bottom: -77px;
73  min-height: 76px;
74  overflow: hidden;
75  padding: 0;
76  position: fixed;
77  width: 100%;
78  z-index: 2000;
79}
80
81body:not(.loaded) header {
82  opacity: .5;
83  top: -30px;
84}
85
86body.loaded header {
87  -webkit-transition: all .2s ease-out;
88}
89
90body:not(.loaded) footer {
91  height: 10px;
92  opacity: .5;
93  top: 30px;
94}
95
96header > h1 {
97  -webkit-padding-start: 118px;
98  color: #000;
99  font-size: 32px;
100  font-weight: 500;
101  letter-spacing: -1px;
102  margin: 0;
103  padding-top: 17px;
104  text-shadow: 0 1px 1px rgba(255, 255, 255, .75);
105}
106
107header > h1 span {
108  -webkit-padding-end: 3px;
109  color: #606060;
110  font-weight: 400;
111}
112
113input::-webkit-input-placeholder {
114  color: #b2b2b2;
115}
116
117/* Content */
118
119.body {
120  display: block;
121  margin-bottom: -49px;
122  min-height: 100%;
123}
124
125.body::before {
126  content: '';
127  display: block;
128  height: 76px;
129}
130
131.body::after {
132  content: '';
133  display: block;
134  height: 76px;
135}
136
137.text.form {
138  -webkit-line-box-contain: block;
139  line-height: 28px;
140}
141
142.text > h1 {
143  -webkit-padding-end: 1em;
144  border-top: 1px solid white;
145  clear: both;
146  display: inline-block;
147  font-size: 100%;
148  font-weight: 500;
149  line-height: 18px;
150  margin: 0;
151  padding-top: 0px;
152}
153
154.text > h1 + p {
155  display: inline-block;
156}
157
158.text h3 {
159  color: #808080;
160  font-size: 100%;
161  font-weight: 300;
162  margin: 0;
163  padding: 0;
164}
165
166.text h3 + p {
167  margin-top: 0;
168}
169
170.text .left-label h3 {
171  width: 100px;
172}
173
174.text .left-label h3 + p {
175  -webkit-padding-start: 100px;
176}
177
178.text .left-label + .left-label {
179  margin-top: 14px;
180}
181
182/* Sidebar */
183
184.sidebar {
185  background: white;
186  height: 100%;
187  left: 0;
188  min-height: 100%;
189  top: 0;
190  width: 360px;
191  z-index: 1000;
192}
193
194.sidebar header {
195  width: 360px;
196}
197
198.sidebar header > h1 {
199  -webkit-padding-start: 24px;
200}
201
202.sidebar section.text {
203  -webkit-padding-start: 24px;
204}
205
206.sidebar .main {
207  -webkit-line-box-contain: block;
208  text-align: center;
209}
210
211#print-summary {
212  -webkit-box-align: center;
213  -webkit-box-pack: center;
214  -webkit-line-box-contain: auto;
215  display: -webkit-box;
216  height: 36px;
217  line-height: 18px;
218  margin-bottom: 15px;
219  margin-top: -10px;
220}
221
222#collate-option {
223  display: inline-block;
224  -webkit-transition: opacity .2s, -webkit-transform .2s;
225  opacity: 1;
226}
227
228#collate-option[hidden] {
229  -webkit-transition: opacity .2s, -webkit-transform .2s;
230  opacity: 0;
231}
232
233/* Text */
234
235section.text {
236  -webkit-padding-end: 18px;
237  -webkit-padding-start: 118px;
238  font-size: 13px;
239  line-height: 20px;
240  margin-top: 36px;
241  max-width: 650px;
242}
243
244hr + section.text {
245  margin-top: 24px;
246}
247
248hr {
249  border-bottom: 1px solid #dcdcdc;
250  border-top: 0px;
251  margin: 15px 0;
252}
253
254hr.invisible {
255  visibility: hidden;
256}
257
258.hidden-section {
259  background: white;
260  position: relative;
261}
262
263.hidden-section p {
264  position: relative;
265}
266
267.extra {
268  background: white;
269  font-size: 13px;
270  height: 0;
271  opacity: 0;
272  overflow: hidden;
273  padding-top: 0;
274  position: absolute;
275  visibility: hidden;
276}
277
278.opened .extra {
279  -webkit-animation-duration: .2s;
280  -webkit-animation-fill-mode: forwards;
281  height: auto;
282  opacity: 1;
283  padding-top: 10px;
284  position: static;
285  visibility: visible;
286}
287
288.closing .extra {
289  -webkit-transition: padding-top .1s, height .1s, opacity .2s, background .3s;
290  height: 0 !important;
291  opacity: 0;
292  overflow: hidden;
293  padding-top: 0;
294  position: static;
295  visibility: visible;
296}
297
298/* Form fields */
299
300input[type='text'] {
301  -webkit-box-shadow: inset 0 2px 2px rgba(0, 0, 0, .1),
302                      0 1px 0 white,
303                      0 0 1px transparent,
304                      0 0 1px transparent,
305                      0 0 1px transparent;
306  -webkit-margin-end: 7px;
307  -webkit-margin-start: 2px;
308  -webkit-transition: -webkit-box-shadow .1s, background .1s, border .5s;
309  border-radius: 3px;
310  border: 1px solid #c0c0c0;
311  font-size: 13px;
312  font-weight: 400;
313  padding: 4px 6px 4px 6px;
314}
315
316input[type='text'].with-hint {
317  -webkit-line-box-contain: auto;
318  margin-bottom: 40px;
319}
320
321input[type='text'].small {
322  width: 5em;
323}
324input[type='text'].medium {
325  width: 10em;
326}
327
328input[type='text']::selection {
329  color: red;
330}
331
332input[type='text']:focus {
333  -webkit-box-shadow: inset 0 2px 2px rgba(0, 0, 0, .15),
334                      0 1px 0 transparent,
335                      0 0 1px #c0c0c0,
336                      0 0 1px #c0c0c0,
337                      0 0 1px #c0c0c0;
338  -webkit-transition: -webkit-box-shadow .2s, background .2s, border .2s;
339  background: #f8f8f8;
340  border-color: #4080fa;
341  outline: none;
342}
343
344/* Select */
345
346select {
347  -webkit-appearance: none;
348  -webkit-box-shadow: inset 0 1px 2px white,
349                      0 1px 2px rgba(0, 0, 0, .2);
350  -webkit-padding-end: 14px;
351  -webkit-padding-start: 14px;
352  -webkit-user-select: none;
353  background-image: -webkit-linear-gradient(#fafafa, #dcdcdc);
354  background-position: 100% 50%, left top;
355  background-repeat: no-repeat, repeat;
356  border-radius: 3px;
357  border: 1px solid #a0a0a0;
358  font-family: 'Open Sans', Arial;
359  font-size: 13px;
360  font-weight: 400;
361  outline: 0;
362  padding-bottom: 5px;
363  padding-top: 5px;
364  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
365  width: 100%;
366}
367
368select:not(:disabled):not(.disabled):hover,
369select.hover {
370  -webkit-box-shadow: inset 0 1px 2px white,
371                      0 2px 4px rgba(0, 0, 0, .2);
372  background-image: -webkit-linear-gradient(#ffffff, #e6e6e6);
373  text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
374}
375
376/* Label */
377
378label {
379  /* Remove the dead space on the left */
380  -webkit-margin-start: -5px;
381  -webkit-padding-start: 5px;
382  -webkit-user-select: none;
383  cursor: default;
384}
385
386/* Checkbox */
387
388input[type='checkbox'] {
389  -webkit-appearance: none;
390  -webkit-box-shadow: inset 0 1px 2px white,
391                      0 1px 2px rgba(0, 0, 0, .2);
392  -webkit-margin-end: 5px;
393  background: -webkit-linear-gradient(#fafafa, #dcdcdc);
394  border-radius: 3px;
395  border: 1px solid #a0a0a0;
396  display: inline-block;
397  height: 18px;
398  left: 0;
399  position: relative;
400  top: 6px;
401  vertical-align: baseline;
402  width: 18px;
403}
404
405input[type='checkbox']:hover {
406  background: -webkit-linear-gradient(#ffffff, #e6e6e6);
407  text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
408}
409
410input[type='checkbox']:active {
411  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
412  background: -webkit-linear-gradient(#f0f0f0, #bebebe);
413  border: 1px solid #808080;
414  padding-bottom: 4px;
415  padding-top: 6px;
416  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
417}
418
419input[type='checkbox']:checked:before {
420  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5);
421  color: #808080;
422  content: '×';
423  display: inline-block;
424  font-family: 'Open Sans', Arial, sans-serif;
425  font-size: 21px;
426  font-weight: bold;
427  left: 2px;
428  opacity: 1;
429  position: absolute;
430  top: -6px;
431  vertical-align: top;
432}
433
434input[type='checkbox']:focus,
435input[type='radio']:focus {
436  -webkit-box-shadow: inset 0 1px 2px white,
437                      0 1px 2px rgba(0, 0, 0, .2),
438                      0 0 1px #c0c0c0,
439                      0 0 1px #c0c0c0,
440                      0 0 1px #c0c0c0;
441  -webkit-transition: border-color .2s;
442  outline: none;
443  border-color: #4080fa;
444}
445
446/* Radio buttons */
447input[type='radio'] {
448  -webkit-appearance: none;
449  -webkit-box-shadow: inset 0 1px 2px white,
450                      0 1px 2px rgba(0, 0, 0, .2);
451  -webkit-margin-end: 5px;
452  -webkit-transition: border .5s;
453  background: -webkit-linear-gradient(#fafafa, #dcdcdc);
454  border-radius: 100%;
455  border: 1px solid #a0a0a0;
456  display: inline-block;
457  height: 17px;
458  position: relative;
459  top: 5px;
460  vertical-align: baseline;
461  width: 17px;
462}
463
464input[type='radio']:hover {
465  background: -webkit-linear-gradient(#ffffff, #e6e6e6);
466  text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
467}
468
469input[type='radio']:active {
470  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
471  background: -webkit-linear-gradient(#f0f0f0, #bebebe);
472  border: 1px solid #808080;
473  padding-bottom: 4px;
474  padding-top: 6px;
475  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
476}
477
478input[type='radio']:checked:before {
479  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5);
480  background: #808080;
481  border-radius: 10px;
482  content: '';
483  display: inline-block;
484  height: 5px;
485  left: 5px;
486  opacity: 1;
487  position: absolute;
488  top: 5px;
489  vertical-align: top;
490  width: 5px;
491}
492
493input[type='radio']:active:checked:before {
494  background: #606060;
495}
496
497/* Buttons */
498
499button {
500  -webkit-box-shadow: inset 0 1px 2px white,
501                      0 1px 2px rgba(0, 0, 0, .2);
502  -webkit-margin-end: 4px;
503  -webkit-margin-start: 4px;
504  -webkit-padding-end: 14px;
505  -webkit-padding-start: 14px;
506  -webkit-user-select: none;
507  background: -webkit-linear-gradient(#fafafa, #dcdcdc);
508  border-radius: 3px;
509  border: 1px solid #a0a0a0;
510  cursor: default;
511  font-size: 13px;
512  font-weight: 400;
513  margin-top: -5px;
514  margin-bottom: 0;
515  padding-bottom: 5px;
516  padding-top: 5px;
517  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
518}
519
520button:first-child {
521  -webkit-margin-start: 0;
522}
523
524span + button {
525  -webkit-margin-start: 16px;
526}
527
528input + button {
529  margin-top: 0;
530}
531
532button + button {
533  -webkit-margin-start: 4px;
534}
535
536button.default {
537  -webkit-padding-end: 21px;
538  -webkit-padding-start: 21px;
539  border-color: #808080;
540  border-width: 2px;
541  font-weight: 500;
542}
543
544button:disabled,
545button.disabled {
546  border: 1px solid #c0c0c0;
547  color: rgba(0, 0, 0, .5);
548}
549
550button:not(:disabled):not(.disabled):hover,
551button.hover {
552  -webkit-box-shadow: inset 0 1px 2px white,
553                      0 2px 4px rgba(0, 0, 0, .2);
554  background: -webkit-linear-gradient(#ffffff, #e6e6e6);
555  text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
556}
557
558button:not(:disabled):not(.disabled):active,
559button.active {
560  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3);
561  background: -webkit-linear-gradient(#f0f0f0, #bebebe);
562  border-color: #808080;
563  padding-bottom: 4px;
564  padding-top: 6px;
565  position: relative;
566  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
567  top: 1px;
568}
569
570button.default:not(:disabled):not(.disabled):active,
571button.default.active {
572  padding-bottom: 6px;
573  padding-top: 8px;
574}
575
576/* Scrollbars */
577
578.scrollbar-inside {
579  height: 100%;
580  overflow: scroll;
581  width: 100%;
582}
583
584.scrollbar-inside::-webkit-scrollbar {
585  height: 0;
586  width: 0;
587}
588
589body::-webkit-scrollbar {
590  height: 0;
591  width: 0;
592}
593
594.scrollbar {
595  -webkit-box-shadow: 0 0 1px white, 0 0 2px white;
596  background: #404040;
597  border-radius: 3px;
598  margin: 3px;
599  opacity: 1;
600  /* Scrollbars shouldn’t intervene with mouse operations */
601  pointer-events: none;
602  position: absolute;
603  z-index: 3000;
604  -webkit-transition: opacity .25s, width .5s, height .5s;
605  -webkit-transition-delay: 0, 0, 0;
606}
607
608body > .scrollbar {
609  position: fixed;
610}
611
612.scrollbar.vert,.scrollbar.hor {
613  right: 0;
614  top: 0;
615  width: 5px;
616}
617
618.scrollbar.hor {
619  bottom: 0;
620  height: 5px;
621  left: 0;
622}
623
624/* Scrollbar when not necessary (no scrolling in that direction) */
625.scrollbar.hidden {
626  display: none;
627}
628
629/* Scrollbar when temporarily invisible (no activity) */
630.scrollbar.invisible {
631  -webkit-transition: opacity .75s, width .5s, height .5s;
632  /* Scrollbars disappear after 2 seconds */
633  -webkit-transition-delay: 2s, 0, 0;
634  opacity: 0;
635}
636
637#mainview {
638  -webkit-box-flex: 1;
639  -webkit-padding-start: 10px;
640  background-color: #ccc;
641}
642
643#pdf-viewer {
644  height: 100%;
645  width: 100%;
646}
647
648#no-plugin {
649  padding: 20px;
650}
651
652.hidden {
653  display: none;
654}
655
656.disabled-label-text {
657  color: gray;
658}
659