| html { |
| height: 100%; |
| } |
| |
| body { |
| -webkit-user-select: none; |
| background: white; |
| display: -webkit-box; |
| font-family: 'Open Sans', Arial, sans-serif; |
| height: 100%; |
| margin: 0; |
| opacity: 0; |
| overflow: hidden; |
| } |
| |
| body.loaded { |
| opacity: 1; |
| } |
| |
| a { |
| -webkit-transition: text-shadow .15s; |
| color: #506c40; |
| text-decoration: none; |
| text-shadow: 0 0 1px white; |
| } |
| |
| a:hover { |
| text-shadow: 0 0 1px rgba(80, 108, 164, .5); |
| } |
| |
| a:active { |
| color: #283c78; |
| text-shadow: 0 0 1px rgba(40, 60, 120, .5); |
| } |
| |
| p { |
| margin: 20px 0; |
| padding: 0; |
| } |
| |
| p:first-child { |
| margin-top: 0; |
| } |
| |
| p:last-child { |
| margin-bottom: 0; |
| } |
| |
| p.list { |
| font-weight: 600; |
| margin-bottom: 6px; |
| } |
| |
| .options-block { |
| -webkit-padding-start: 100px; |
| } |
| |
| header { |
| -webkit-box-shadow: inset 0 2px 3px rgba(0, 0, 0, .1), |
| 0 2px 2px rgba(0, 0, 0, .1); |
| -webkit-user-select: none; |
| background-clip: border-box; |
| background-image: none, |
| -webkit-linear-gradient(#dcdcdc, #f0f0f0); |
| background-origin: border-box; |
| background-position: 80px 26px, 0 0; |
| background-repeat: no-repeat; |
| background-size: 26px, 100%; |
| border-bottom: 1px solid rgba(255, 255, 255, .5); |
| display: block; |
| margin: 0; |
| margin-bottom: -77px; |
| min-height: 76px; |
| overflow: hidden; |
| padding: 0; |
| position: fixed; |
| width: 100%; |
| z-index: 2000; |
| } |
| |
| body:not(.loaded) header { |
| opacity: .5; |
| top: -30px; |
| } |
| |
| body.loaded header { |
| -webkit-transition: all .2s ease-out; |
| } |
| |
| body:not(.loaded) footer { |
| height: 10px; |
| opacity: .5; |
| top: 30px; |
| } |
| |
| header > h1 { |
| -webkit-padding-start: 118px; |
| color: #000; |
| font-size: 32px; |
| font-weight: 500; |
| letter-spacing: -1px; |
| margin: 0; |
| padding-top: 17px; |
| text-shadow: 0 1px 1px rgba(255, 255, 255, .75); |
| } |
| |
| header > h1 span { |
| -webkit-padding-end: 3px; |
| color: #606060; |
| font-weight: 400; |
| } |
| |
| input::-webkit-input-placeholder { |
| color: #b2b2b2; |
| } |
| |
| /* Content */ |
| |
| .body { |
| display: block; |
| margin-bottom: -49px; |
| min-height: 100%; |
| } |
| |
| .body::before { |
| content: ''; |
| display: block; |
| height: 76px; |
| } |
| |
| .body::after { |
| content: ''; |
| display: block; |
| height: 76px; |
| } |
| |
| .text.form { |
| -webkit-line-box-contain: block; |
| line-height: 28px; |
| } |
| |
| .text > h1 { |
| -webkit-padding-end: 1em; |
| border-top: 1px solid white; |
| clear: both; |
| display: inline-block; |
| font-size: 100%; |
| font-weight: 500; |
| line-height: 18px; |
| margin: 0; |
| padding-top: 0px; |
| } |
| |
| .text > h1 + p { |
| display: inline-block; |
| } |
| |
| .text h3 { |
| color: #808080; |
| font-size: 100%; |
| font-weight: 300; |
| margin: 0; |
| padding: 0; |
| } |
| |
| .text h3 + p { |
| margin-top: 0; |
| } |
| |
| .text .left-label h3 { |
| width: 100px; |
| } |
| |
| .text .left-label h3 + p { |
| -webkit-padding-start: 100px; |
| } |
| |
| .text .left-label + .left-label { |
| margin-top: 14px; |
| } |
| |
| /* Sidebar */ |
| |
| .sidebar { |
| background: white; |
| height: 100%; |
| left: 0; |
| min-height: 100%; |
| top: 0; |
| width: 360px; |
| z-index: 1000; |
| } |
| |
| .sidebar header { |
| width: 360px; |
| } |
| |
| .sidebar header > h1 { |
| -webkit-padding-start: 24px; |
| } |
| |
| .sidebar section.text { |
| -webkit-padding-start: 24px; |
| } |
| |
| .sidebar .main { |
| -webkit-line-box-contain: block; |
| text-align: center; |
| } |
| |
| #print-summary { |
| -webkit-box-align: center; |
| -webkit-box-pack: center; |
| -webkit-line-box-contain: auto; |
| display: -webkit-box; |
| height: 36px; |
| line-height: 18px; |
| margin-bottom: 15px; |
| margin-top: -10px; |
| } |
| |
| #collate-option { |
| display: inline-block; |
| -webkit-transition: opacity .2s, -webkit-transform .2s; |
| opacity: 1; |
| } |
| |
| #collate-option[hidden] { |
| -webkit-transition: opacity .2s, -webkit-transform .2s; |
| opacity: 0; |
| } |
| |
| /* Text */ |
| |
| section.text { |
| -webkit-padding-end: 18px; |
| -webkit-padding-start: 118px; |
| font-size: 13px; |
| line-height: 20px; |
| margin-top: 36px; |
| max-width: 650px; |
| } |
| |
| hr + section.text { |
| margin-top: 24px; |
| } |
| |
| hr { |
| border-bottom: 1px solid #dcdcdc; |
| border-top: 0px; |
| margin: 15px 0; |
| } |
| |
| hr.invisible { |
| visibility: hidden; |
| } |
| |
| .hidden-section { |
| background: white; |
| position: relative; |
| } |
| |
| .hidden-section p { |
| position: relative; |
| } |
| |
| .extra { |
| background: white; |
| font-size: 13px; |
| height: 0; |
| opacity: 0; |
| overflow: hidden; |
| padding-top: 0; |
| position: absolute; |
| visibility: hidden; |
| } |
| |
| .opened .extra { |
| -webkit-animation-duration: .2s; |
| -webkit-animation-fill-mode: forwards; |
| height: auto; |
| opacity: 1; |
| padding-top: 10px; |
| position: static; |
| visibility: visible; |
| } |
| |
| .closing .extra { |
| -webkit-transition: padding-top .1s, height .1s, opacity .2s, background .3s; |
| height: 0 !important; |
| opacity: 0; |
| overflow: hidden; |
| padding-top: 0; |
| position: static; |
| visibility: visible; |
| } |
| |
| /* Form fields */ |
| |
| input[type='text'] { |
| -webkit-box-shadow: inset 0 2px 2px rgba(0, 0, 0, .1), |
| 0 1px 0 white, |
| 0 0 1px transparent, |
| 0 0 1px transparent, |
| 0 0 1px transparent; |
| -webkit-margin-end: 7px; |
| -webkit-margin-start: 2px; |
| -webkit-transition: -webkit-box-shadow .1s, background .1s, border .5s; |
| border-radius: 3px; |
| border: 1px solid #c0c0c0; |
| font-size: 13px; |
| font-weight: 400; |
| padding: 4px 6px 4px 6px; |
| } |
| |
| input[type='text'].with-hint { |
| -webkit-line-box-contain: auto; |
| margin-bottom: 40px; |
| } |
| |
| input[type='text'].small { |
| width: 5em; |
| } |
| input[type='text'].medium { |
| width: 10em; |
| } |
| |
| input[type='text']::selection { |
| color: red; |
| } |
| |
| input[type='text']:focus { |
| -webkit-box-shadow: inset 0 2px 2px rgba(0, 0, 0, .15), |
| 0 1px 0 transparent, |
| 0 0 1px #c0c0c0, |
| 0 0 1px #c0c0c0, |
| 0 0 1px #c0c0c0; |
| -webkit-transition: -webkit-box-shadow .2s, background .2s, border .2s; |
| background: #f8f8f8; |
| border-color: #4080fa; |
| outline: none; |
| } |
| |
| /* Select */ |
| |
| select { |
| -webkit-appearance: none; |
| -webkit-box-shadow: inset 0 1px 2px white, |
| 0 1px 2px rgba(0, 0, 0, .2); |
| -webkit-padding-end: 14px; |
| -webkit-padding-start: 14px; |
| -webkit-user-select: none; |
| background-image: -webkit-linear-gradient(#fafafa, #dcdcdc); |
| background-position: 100% 50%, left top; |
| background-repeat: no-repeat, repeat; |
| border-radius: 3px; |
| border: 1px solid #a0a0a0; |
| font-family: 'Open Sans', Arial; |
| font-size: 13px; |
| font-weight: 400; |
| outline: 0; |
| padding-bottom: 5px; |
| padding-top: 5px; |
| text-shadow: 0 1px 0 rgba(255, 255, 255, .5); |
| width: 100%; |
| } |
| |
| select:not(:disabled):not(.disabled):hover, |
| select.hover { |
| -webkit-box-shadow: inset 0 1px 2px white, |
| 0 2px 4px rgba(0, 0, 0, .2); |
| background-image: -webkit-linear-gradient(#ffffff, #e6e6e6); |
| text-shadow: 0 1px 0 rgba(255, 255, 255, 1); |
| } |
| |
| /* Label */ |
| |
| label { |
| /* Remove the dead space on the left */ |
| -webkit-margin-start: -5px; |
| -webkit-padding-start: 5px; |
| -webkit-user-select: none; |
| cursor: default; |
| } |
| |
| /* Checkbox */ |
| |
| input[type='checkbox'] { |
| -webkit-appearance: none; |
| -webkit-box-shadow: inset 0 1px 2px white, |
| 0 1px 2px rgba(0, 0, 0, .2); |
| -webkit-margin-end: 5px; |
| background: -webkit-linear-gradient(#fafafa, #dcdcdc); |
| border-radius: 3px; |
| border: 1px solid #a0a0a0; |
| display: inline-block; |
| height: 18px; |
| left: 0; |
| position: relative; |
| top: 6px; |
| vertical-align: baseline; |
| width: 18px; |
| } |
| |
| input[type='checkbox']:hover { |
| background: -webkit-linear-gradient(#ffffff, #e6e6e6); |
| text-shadow: 0 1px 0 rgba(255, 255, 255, 1); |
| } |
| |
| input[type='checkbox']:active { |
| -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2); |
| background: -webkit-linear-gradient(#f0f0f0, #bebebe); |
| border: 1px solid #808080; |
| padding-bottom: 4px; |
| padding-top: 6px; |
| text-shadow: 0 1px 0 rgba(255, 255, 255, .25); |
| } |
| |
| input[type='checkbox']:checked:before { |
| -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5); |
| color: #808080; |
| content: 'Ă—'; |
| display: inline-block; |
| font-family: 'Open Sans', Arial, sans-serif; |
| font-size: 21px; |
| font-weight: bold; |
| left: 2px; |
| opacity: 1; |
| position: absolute; |
| top: -6px; |
| vertical-align: top; |
| } |
| |
| input[type='checkbox']:focus, |
| input[type='radio']:focus { |
| -webkit-box-shadow: inset 0 1px 2px white, |
| 0 1px 2px rgba(0, 0, 0, .2), |
| 0 0 1px #c0c0c0, |
| 0 0 1px #c0c0c0, |
| 0 0 1px #c0c0c0; |
| -webkit-transition: border-color .2s; |
| outline: none; |
| border-color: #4080fa; |
| } |
| |
| /* Radio buttons */ |
| input[type='radio'] { |
| -webkit-appearance: none; |
| -webkit-box-shadow: inset 0 1px 2px white, |
| 0 1px 2px rgba(0, 0, 0, .2); |
| -webkit-margin-end: 5px; |
| -webkit-transition: border .5s; |
| background: -webkit-linear-gradient(#fafafa, #dcdcdc); |
| border-radius: 100%; |
| border: 1px solid #a0a0a0; |
| display: inline-block; |
| height: 17px; |
| position: relative; |
| top: 5px; |
| vertical-align: baseline; |
| width: 17px; |
| } |
| |
| input[type='radio']:hover { |
| background: -webkit-linear-gradient(#ffffff, #e6e6e6); |
| text-shadow: 0 1px 0 rgba(255, 255, 255, 1); |
| } |
| |
| input[type='radio']:active { |
| -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2); |
| background: -webkit-linear-gradient(#f0f0f0, #bebebe); |
| border: 1px solid #808080; |
| padding-bottom: 4px; |
| padding-top: 6px; |
| text-shadow: 0 1px 0 rgba(255, 255, 255, .25); |
| } |
| |
| input[type='radio']:checked:before { |
| -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5); |
| background: #808080; |
| border-radius: 10px; |
| content: ''; |
| display: inline-block; |
| height: 5px; |
| left: 5px; |
| opacity: 1; |
| position: absolute; |
| top: 5px; |
| vertical-align: top; |
| width: 5px; |
| } |
| |
| input[type='radio']:active:checked:before { |
| background: #606060; |
| } |
| |
| /* Buttons */ |
| |
| button { |
| -webkit-box-shadow: inset 0 1px 2px white, |
| 0 1px 2px rgba(0, 0, 0, .2); |
| -webkit-margin-end: 4px; |
| -webkit-margin-start: 4px; |
| -webkit-padding-end: 14px; |
| -webkit-padding-start: 14px; |
| -webkit-user-select: none; |
| background: -webkit-linear-gradient(#fafafa, #dcdcdc); |
| border-radius: 3px; |
| border: 1px solid #a0a0a0; |
| cursor: default; |
| font-size: 13px; |
| font-weight: 400; |
| margin-top: -5px; |
| margin-bottom: 0; |
| padding-bottom: 5px; |
| padding-top: 5px; |
| text-shadow: 0 1px 0 rgba(255, 255, 255, .5); |
| } |
| |
| button:first-child { |
| -webkit-margin-start: 0; |
| } |
| |
| span + button { |
| -webkit-margin-start: 16px; |
| } |
| |
| input + button { |
| margin-top: 0; |
| } |
| |
| button + button { |
| -webkit-margin-start: 4px; |
| } |
| |
| button.default { |
| -webkit-padding-end: 21px; |
| -webkit-padding-start: 21px; |
| border-color: #808080; |
| border-width: 2px; |
| font-weight: 500; |
| } |
| |
| button:disabled, |
| button.disabled { |
| border: 1px solid #c0c0c0; |
| color: rgba(0, 0, 0, .5); |
| } |
| |
| button:not(:disabled):not(.disabled):hover, |
| button.hover { |
| -webkit-box-shadow: inset 0 1px 2px white, |
| 0 2px 4px rgba(0, 0, 0, .2); |
| background: -webkit-linear-gradient(#ffffff, #e6e6e6); |
| text-shadow: 0 1px 0 rgba(255, 255, 255, 1); |
| } |
| |
| button:not(:disabled):not(.disabled):active, |
| button.active { |
| -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3); |
| background: -webkit-linear-gradient(#f0f0f0, #bebebe); |
| border-color: #808080; |
| padding-bottom: 4px; |
| padding-top: 6px; |
| position: relative; |
| text-shadow: 0 1px 0 rgba(255, 255, 255, .25); |
| top: 1px; |
| } |
| |
| button.default:not(:disabled):not(.disabled):active, |
| button.default.active { |
| padding-bottom: 6px; |
| padding-top: 8px; |
| } |
| |
| /* Scrollbars */ |
| |
| .scrollbar-inside { |
| height: 100%; |
| overflow: scroll; |
| width: 100%; |
| } |
| |
| .scrollbar-inside::-webkit-scrollbar { |
| height: 0; |
| width: 0; |
| } |
| |
| body::-webkit-scrollbar { |
| height: 0; |
| width: 0; |
| } |
| |
| .scrollbar { |
| -webkit-box-shadow: 0 0 1px white, 0 0 2px white; |
| background: #404040; |
| border-radius: 3px; |
| margin: 3px; |
| opacity: 1; |
| /* Scrollbars shouldn’t intervene with mouse operations */ |
| pointer-events: none; |
| position: absolute; |
| z-index: 3000; |
| -webkit-transition: opacity .25s, width .5s, height .5s; |
| -webkit-transition-delay: 0, 0, 0; |
| } |
| |
| body > .scrollbar { |
| position: fixed; |
| } |
| |
| .scrollbar.vert,.scrollbar.hor { |
| right: 0; |
| top: 0; |
| width: 5px; |
| } |
| |
| .scrollbar.hor { |
| bottom: 0; |
| height: 5px; |
| left: 0; |
| } |
| |
| /* Scrollbar when not necessary (no scrolling in that direction) */ |
| .scrollbar.hidden { |
| display: none; |
| } |
| |
| /* Scrollbar when temporarily invisible (no activity) */ |
| .scrollbar.invisible { |
| -webkit-transition: opacity .75s, width .5s, height .5s; |
| /* Scrollbars disappear after 2 seconds */ |
| -webkit-transition-delay: 2s, 0, 0; |
| opacity: 0; |
| } |
| |
| #mainview { |
| -webkit-box-flex: 1; |
| -webkit-padding-start: 10px; |
| background-color: #ccc; |
| } |
| |
| #pdf-viewer { |
| height: 100%; |
| width: 100%; |
| } |
| |
| #no-plugin { |
| padding: 20px; |
| } |
| |
| .hidden { |
| display: none; |
| } |
| |
| .disabled-label-text { |
| color: gray; |
| } |
