print_preview.css revision 03b57e008b61dfcb1fbad3aea950ae0e001748b0
1/* Copyright (c) 2012 The Chromium Authors. All rights reserved. 2 * Use of this source code is governed by a BSD-style license that can be 3 * found in the LICENSE file. */ 4 5html { 6 height: 100%; 7 overflow: hidden; 8} 9 10body { 11 display: -webkit-box; 12 height: 100%; 13 margin: 0; 14} 15 16/* Header */ 17 18header { 19 -webkit-padding-end: 19px; 20 -webkit-padding-start: 20px; 21 background-color: #F6F6F6; 22 border-bottom: 1px solid #d2d2d2; 23} 24 25#print-preview #navbar-container { 26 -webkit-border-end: 1px solid #c8c8c8; 27 -webkit-box-orient: vertical; 28 -webkit-user-select: none; 29 background-color: white; 30 display: -webkit-box; 31 position: relative; 32 width: 310px; 33 z-index: 2; 34} 35 36#navbar-content-title { 37 color: black; 38 font-size: 15px; 39 font-weight: normal; 40 margin: 0; 41 padding-bottom: 6px; 42 padding-top: 16px; 43} 44 45#navbar-scroll-container { 46 -webkit-box-flex: 1; 47 background: #fbfbfb; 48 border-top: 1px solid #f3f3f3; 49 overflow-y: auto; 50 padding-top: 2px; 51} 52 53/* Settings */ 54 55.two-column { 56 display: table-row; 57} 58 59.right-column { 60 -webkit-padding-end: 20px; 61 display: table-cell; 62 width: 99%; 63} 64 65.right-column .checkbox, 66.right-column .radio { 67 margin: 0; 68} 69 70.right-column .checkbox label, 71.right-column .radio label { 72 padding-bottom: 5px; 73 padding-top: 10px; 74} 75 76.right-column .radio input[type='radio'] { 77 height: 13px; 78 width: 13px; 79} 80 81.two-column h1 { 82 -webkit-padding-end: 20px; 83 -webkit-padding-start: 20px; 84 color: #646464; 85 display: table-cell; 86 font-size: 12px; 87 min-width: 70px; 88} 89 90.two-column.visible h1, 91.two-column.visible .right-column { 92 padding-bottom: 5px; 93 padding-top: 5px; 94} 95 96.two-column:not(.visible) select { 97 border-top-width: 0; 98 margin-top: 0; 99 padding-top: 0; 100} 101 102p { 103 -webkit-line-box-contain: block; 104 margin: 0; 105 margin-bottom: 10px; 106} 107 108h1 { 109 color: #808080; 110 font-weight: 300; 111} 112 113#print-preview .navbar-link { 114 -webkit-margin-start: 20px; 115 min-height: 32px; 116 outline: 0; 117 padding: 0; 118 text-align: start; 119 text-decoration: none; 120} 121 122#print-preview .navbar-link:hover:not(:disabled) { 123 text-decoration: underline; 124} 125 126#print-preview .navbar-link:disabled { 127 color: rgba(0, 0, 0, .5); 128 cursor: default; 129 text-shadow: none; 130} 131 132button.loading { 133 cursor: progress; 134} 135 136#print-preview button.default { 137 font-weight: bold; 138} 139 140#print-preview button.default:not(:focus):not(:disabled) { 141 border-color: #808080; 142} 143 144span.hint { 145 -webkit-transition: color 200ms; 146 background: white; 147 display: block; 148 font-size: 0.9em; 149 font-weight: bold; 150 height: 0; 151 line-height: 10px; 152 margin: 0; 153 overflow: hidden; 154} 155 156span.hint.visible { 157 -webkit-animation-duration: 200ms; 158 -webkit-animation-fill-mode: forwards; 159 -webkit-user-select: text; 160 color: rgb(140, 20, 20); 161 height: auto; 162 margin-bottom: -5px; 163 margin-top: 5px; 164 padding-bottom: 5px; 165} 166 167span.hint.closing { 168 -webkit-transition: margin 150ms, height 150ms, opacity 150ms; 169 background: transparent; 170 height: 0 !important; 171 margin: 0; 172 opacity: 0; 173} 174 175.collapsible { 176 height: 0; 177} 178 179.collapsible.visible { 180 -webkit-animation-duration: 200ms; 181 -webkit-animation-fill-mode: forwards; 182 height: auto; 183} 184 185.collapsible.closing { 186 -webkit-transition: margin 150ms, height 150ms, opacity 150ms; 187 height: 0 !important; 188 opacity: 0; 189 overflow: hidden; 190} 191 192select { 193 width: 100%; 194} 195 196label { 197 -webkit-user-select: none; 198} 199 200.hidden-section { 201 background: white; 202 position: relative; 203} 204 205.extra { 206 background: white; 207 height: 0; 208 opacity: 0; 209 padding-top: 0; 210 position: absolute; 211 visibility: hidden; 212} 213 214.visible .extra { 215 -webkit-animation-duration: 200ms; 216 -webkit-animation-fill-mode: forwards; 217 height: auto; 218 opacity: 1; 219 overflow: hidden; 220 padding-bottom: 0; 221 position: static; 222 visibility: visible; 223} 224 225.closing .extra { 226 -webkit-transition: padding-top 100ms, height 100ms, opacity 200ms, 227 background 300ms; 228 height: 0 !important; 229 opacity: 0; 230 overflow: hidden; 231 padding-top: 0; 232 position: static; 233 visibility: visible; 234} 235 236/* Individual settings sections */ 237 238/* TODO(estade): this should be in a shared location but I'm afraid of the 239 * damage it could do. */ 240[hidden] { 241 display: none !important; 242} 243 244@-webkit-keyframes dancing-dots-jump { 245 0% { top: 0; } 246 55% { top: 0; } 247 60% { top: -10px; } 248 80% { top: 3px; } 249 90% { top: -2px; } 250 95% { top: 1px; } 251 100% { top: 0; } 252} 253 254span.jumping-dots > span { 255 -webkit-animation: dancing-dots-jump 1800ms infinite; 256 padding: 1px; 257 position: relative; 258} 259 260span.jumping-dots > span:nth-child(2) { 261 -webkit-animation-delay: 100ms; 262} 263 264span.jumping-dots > span:nth-child(3) { 265 -webkit-animation-delay: 300ms; 266} 267 268/* TODO(estade): unfork this code. */ 269#print-header .button-strip { 270<if expr="not chromeos and not is_win"> 271 -webkit-box-direction: reverse; 272</if> 273 -webkit-box-orient: horizontal; 274 -webkit-box-pack: end; 275 display: -webkit-box; 276} 277 278#print-header .button-strip button { 279 -webkit-margin-start: 9px; 280 display: block; 281} 282 283#link-container { 284 -webkit-box-orient: vertical; 285 display: -webkit-box; 286 margin: 7px 0; 287} 288 289#main-container { 290 -webkit-border-start: 1px solid #dcdcdc; 291 -webkit-box-flex: 1; 292 -webkit-box-orient: vertical; 293 display: -webkit-box; 294 height: 100%; 295 position: relative; 296} 297 298html:not(.focus-outline-visible) 299:enabled:focus:-webkit-any(input[type='checkbox'], 300 input[type='radio'], 301 button):not(.link-button) { 302 /* Cancel border-color for :focus specified in widgets.css. */ 303 border-color: rgba(0,0,0,0.25); 304} 305 306html:not(.focus-outline-visible) button:focus.link-button { 307 outline: none; 308} 309