Home | History | Annotate | Download | only in resources 
      1 html {
      2   height: 100%;
      3 }
      4 
      5 body {
      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 
     16 body.loaded {
     17   opacity: 1;
     18 }
     19 
     20 a {
     21   -webkit-transition: text-shadow .15s;
     22   color: #506c40;
     23   text-decoration: none;
     24   text-shadow: 0 0 1px white;
     25 }
     26 
     27 a:hover {
     28   text-shadow: 0 0 1px rgba(80, 108, 164, .5);
     29 }
     30 
     31 a:active {
     32   color: #283c78;
     33   text-shadow: 0 0 1px rgba(40, 60, 120, .5);
     34 }
     35 
     36 p {
     37   margin: 20px 0;
     38   padding: 0;
     39 }
     40 
     41 p:first-child {
     42   margin-top: 0;
     43 }
     44 
     45 p:last-child {
     46   margin-bottom: 0;
     47 }
     48 
     49 p.list {
     50   font-weight: 600;
     51   margin-bottom: 6px;
     52 }
     53 
     54 .options-block {
     55   -webkit-padding-start: 100px;
     56 }
     57 
     58 header {
     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 
     81 body:not(.loaded) header {
     82   opacity: .5;
     83   top: -30px;
     84 }
     85 
     86 body.loaded header {
     87   -webkit-transition: all .2s ease-out;
     88 }
     89 
     90 body:not(.loaded) footer {
     91   height: 10px;
     92   opacity: .5;
     93   top: 30px;
     94 }
     95 
     96 header > 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 
    107 header > h1 span {
    108   -webkit-padding-end: 3px;
    109   color: #606060;
    110   font-weight: 400;
    111 }
    112 
    113 input::-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 
    235 section.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 
    244 hr + section.text {
    245   margin-top: 24px;
    246 }
    247 
    248 hr {
    249   border-bottom: 1px solid #dcdcdc;
    250   border-top: 0px;
    251   margin: 15px 0;
    252 }
    253 
    254 hr.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 
    300 input[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 
    316 input[type='text'].with-hint {
    317   -webkit-line-box-contain: auto;
    318   margin-bottom: 40px;
    319 }
    320 
    321 input[type='text'].small {
    322   width: 5em;
    323 }
    324 input[type='text'].medium {
    325   width: 10em;
    326 }
    327 
    328 input[type='text']::selection {
    329   color: red;
    330 }
    331 
    332 input[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 
    346 select {
    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 
    368 select:not(:disabled):not(.disabled):hover,
    369 select.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 
    378 label {
    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 
    388 input[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 
    405 input[type='checkbox']:hover {
    406   background: -webkit-linear-gradient(#ffffff, #e6e6e6);
    407   text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
    408 }
    409 
    410 input[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 
    419 input[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 
    434 input[type='checkbox']:focus,
    435 input[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 */
    447 input[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 
    464 input[type='radio']:hover {
    465   background: -webkit-linear-gradient(#ffffff, #e6e6e6);
    466   text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
    467 }
    468 
    469 input[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 
    478 input[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 
    493 input[type='radio']:active:checked:before {
    494   background: #606060;
    495 }
    496 
    497 /* Buttons */
    498 
    499 button {
    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 
    520 button:first-child {
    521   -webkit-margin-start: 0;
    522 }
    523 
    524 span + button {
    525   -webkit-margin-start: 16px;
    526 }
    527 
    528 input + button {
    529   margin-top: 0;
    530 }
    531 
    532 button + button {
    533   -webkit-margin-start: 4px;
    534 }
    535 
    536 button.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 
    544 button:disabled,
    545 button.disabled {
    546   border: 1px solid #c0c0c0;
    547   color: rgba(0, 0, 0, .5);
    548 }
    549 
    550 button:not(:disabled):not(.disabled):hover,
    551 button.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 
    558 button:not(:disabled):not(.disabled):active,
    559 button.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 
    570 button.default:not(:disabled):not(.disabled):active,
    571 button.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 
    589 body::-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 shouldnt 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 
    608 body > .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