| /* Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| * Use of this source code is governed by a BSD-style license that can be |
| * found in the LICENSE file. */ |
| |
| html { |
| height: 100%; |
| overflow: hidden; |
| } |
| |
| body { |
| display: -webkit-box; |
| height: 100%; |
| margin: 0; |
| } |
| |
| /* Header */ |
| |
| header { |
| -webkit-padding-end: 19px; |
| -webkit-padding-start: 20px; |
| background-color: #F6F6F6; |
| border-bottom: 1px solid #d2d2d2; |
| } |
| |
| #print-preview #navbar-container { |
| -webkit-border-end: 1px solid #c8c8c8; |
| -webkit-box-orient: vertical; |
| -webkit-user-select: none; |
| background-color: white; |
| display: -webkit-box; |
| position: relative; |
| width: 310px; |
| z-index: 2; |
| } |
| |
| #navbar-content-title { |
| color: black; |
| font-size: 15px; |
| font-weight: normal; |
| margin: 0; |
| padding-bottom: 6px; |
| padding-top: 16px; |
| } |
| |
| #navbar-scroll-container { |
| -webkit-box-flex: 1; |
| background: #fbfbfb; |
| border-top: 1px solid #f3f3f3; |
| overflow-y: auto; |
| padding-top: 2px; |
| } |
| |
| /* Settings */ |
| |
| .two-column { |
| display: table-row; |
| } |
| |
| .right-column { |
| -webkit-padding-end: 20px; |
| display: table-cell; |
| width: auto; |
| } |
| |
| .right-column .checkbox, |
| .right-column .radio { |
| margin: 0; |
| } |
| |
| .right-column .checkbox label, |
| .right-column .radio label { |
| padding-bottom: 5px; |
| padding-top: 10px; |
| } |
| |
| .right-column .radio input[type='radio'] { |
| height: 13px; |
| width: 13px; |
| } |
| |
| .two-column h1 { |
| -webkit-padding-end: 20px; |
| -webkit-padding-start: 20px; |
| color: #646464; |
| display: table-cell; |
| font-size: 12px; |
| min-width: 70px; |
| } |
| |
| .two-column.visible h1, |
| .two-column.visible .right-column { |
| border-bottom: 1px solid #e9e9e9; |
| padding-bottom: 7px; |
| padding-top: 7px; |
| } |
| |
| .two-column:not(.visible) select { |
| border-top-width: 0; |
| margin-top: 0; |
| padding-top: 0; |
| } |
| |
| p { |
| -webkit-line-box-contain: block; |
| margin: 0; |
| margin-bottom: 10px; |
| } |
| |
| h1 { |
| color: #808080; |
| font-weight: 300; |
| } |
| |
| #print-preview .navbar-link { |
| -webkit-margin-start: 20px; |
| height: 32px; |
| outline: 0; |
| padding: 0; |
| text-align: start; |
| text-decoration: none; |
| } |
| |
| #print-preview .navbar-link:hover:not(:disabled) { |
| text-decoration: underline; |
| } |
| |
| #print-preview .navbar-link:disabled { |
| color: rgba(0, 0, 0, .5); |
| cursor: default; |
| text-shadow: none; |
| } |
| |
| button.loading { |
| cursor: progress; |
| } |
| |
| #print-preview button.default { |
| font-weight: bold; |
| } |
| |
| #print-preview button.default:not(:focus):not(:disabled) { |
| border-color: #808080; |
| } |
| |
| span.hint { |
| -webkit-transition: color 200ms; |
| background: white; |
| display: block; |
| font-size: 0.9em; |
| font-weight: bold; |
| height: 0; |
| line-height: 10px; |
| margin: 0; |
| overflow: hidden; |
| } |
| |
| span.hint.visible { |
| -webkit-animation-duration: 200ms; |
| -webkit-animation-fill-mode: forwards; |
| -webkit-user-select: text; |
| color: rgb(140, 20, 20); |
| height: auto; |
| margin-bottom: -5px; |
| margin-top: 5px; |
| padding-bottom: 5px; |
| } |
| |
| span.hint.closing { |
| -webkit-transition: margin 150ms, height 150ms, opacity 150ms; |
| background: transparent; |
| height: 0 !important; |
| margin: 0; |
| opacity: 0; |
| } |
| |
| .collapsible { |
| height: 0; |
| } |
| |
| .collapsible.visible { |
| -webkit-animation-duration: 200ms; |
| -webkit-animation-fill-mode: forwards; |
| height: auto; |
| } |
| |
| .collapsible.closing { |
| -webkit-transition: margin 150ms, height 150ms, opacity 150ms; |
| height: 0 !important; |
| opacity: 0; |
| overflow: hidden; |
| } |
| |
| select { |
| width: 100%; |
| } |
| |
| label { |
| -webkit-user-select: none; |
| } |
| |
| .hidden-section { |
| background: white; |
| position: relative; |
| } |
| |
| .extra { |
| background: white; |
| height: 0; |
| opacity: 0; |
| padding-top: 0; |
| position: absolute; |
| visibility: hidden; |
| } |
| |
| .visible .extra { |
| -webkit-animation-duration: 200ms; |
| -webkit-animation-fill-mode: forwards; |
| height: auto; |
| opacity: 1; |
| overflow: hidden; |
| padding-bottom: 0; |
| position: static; |
| visibility: visible; |
| } |
| |
| .closing .extra { |
| -webkit-transition: padding-top 100ms, height 100ms, opacity 200ms, |
| background 300ms; |
| height: 0 !important; |
| opacity: 0; |
| overflow: hidden; |
| padding-top: 0; |
| position: static; |
| visibility: visible; |
| } |
| |
| /* Individual settings sections */ |
| |
| /* TODO(estade): this should be in a shared location but I'm afraid of the |
| * damage it could do. */ |
| [hidden] { |
| display: none !important; |
| } |
| |
| @-webkit-keyframes dancing-dots-jump { |
| 0% { top: 0; } |
| 55% { top: 0; } |
| 60% { top: -10px; } |
| 80% { top: 3px; } |
| 90% { top: -2px; } |
| 95% { top: 1px; } |
| 100% { top: 0; } |
| } |
| |
| span.jumping-dots > span { |
| -webkit-animation: dancing-dots-jump 1800ms infinite; |
| padding: 1px; |
| position: relative; |
| } |
| |
| span.jumping-dots > span:nth-child(2) { |
| -webkit-animation-delay: 100ms; |
| } |
| |
| span.jumping-dots > span:nth-child(3) { |
| -webkit-animation-delay: 300ms; |
| } |
| |
| /* TODO(estade): unfork this code. */ |
| #print-header .button-strip { |
| <if expr="not pp_ifdef('toolkit_views')"> |
| -webkit-box-direction: reverse; |
| </if> |
| -webkit-box-orient: horizontal; |
| -webkit-box-pack: end; |
| display: -webkit-box; |
| } |
| |
| #print-header .button-strip button { |
| -webkit-margin-start: 9px; |
| display: block; |
| } |
| |
| #link-container { |
| -webkit-box-orient: vertical; |
| display: -webkit-box; |
| margin: 7px 0; |
| } |
| |
| #main-container { |
| -webkit-border-start: 1px solid #dcdcdc; |
| -webkit-box-flex: 1; |
| -webkit-box-orient: vertical; |
| display: -webkit-box; |
| height: 100%; |
| position: relative; |
| } |
| |
| html:not(.focus-outline-visible) |
| :enabled:focus:-webkit-any(input[type='checkbox'], |
| input[type='radio'], |
| button):not(.link-button) { |
| /* Cancel border-color for :focus specified in widgets.css. */ |
| border-color: rgba(0,0,0,0.25); |
| } |
| |
| html:not(.focus-outline-visible) button:focus.link-button { |
| outline: none; |
| } |