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 5 html { 6 height: 100%; 7 overflow: hidden; 8 } 9 10 body { 11 display: -webkit-box; 12 height: 100%; 13 margin: 0; 14 } 15 16 /* Header */ 17 18 header { 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 .left-column { 82 -webkit-padding-end: 20px; 83 -webkit-padding-start: 20px; 84 display: table-cell; 85 min-width: 70px; 86 vertical-align: middle; 87 } 88 89 .left-column h1 { 90 -webkit-margin-after: 0; 91 -webkit-margin-before: 0; 92 color: #646464; 93 font-size: 12px; 94 } 95 96 .two-column.visible .left-column, 97 .two-column.visible .right-column { 98 padding-bottom: 5px; 99 padding-top: 5px; 100 } 101 102 .two-column:not(.visible) .left-column, 103 .two-column:not(.visible) .right-column { 104 -webkit-transition: padding-bottom 150ms, padding-top 150ms; 105 padding-bottom: 0; 106 padding-top: 0; 107 } 108 109 .two-column:not(.visible) select { 110 border-top-width: 0; 111 margin-top: 0; 112 padding-top: 0; 113 } 114 115 p { 116 -webkit-line-box-contain: block; 117 margin: 0; 118 margin-bottom: 10px; 119 } 120 121 h1 { 122 color: #808080; 123 font-weight: 300; 124 } 125 126 #print-preview .navbar-link { 127 -webkit-margin-start: 20px; 128 min-height: 32px; 129 outline: 0; 130 padding: 0; 131 text-align: start; 132 text-decoration: none; 133 } 134 135 #print-preview .navbar-link:hover:not(:disabled) { 136 text-decoration: underline; 137 } 138 139 #print-preview .navbar-link:disabled { 140 color: rgba(0, 0, 0, .5); 141 cursor: default; 142 text-shadow: none; 143 } 144 145 button.loading { 146 cursor: progress; 147 } 148 149 #print-preview button.default { 150 font-weight: bold; 151 } 152 153 #print-preview button.default:not(:focus):not(:disabled) { 154 border-color: #808080; 155 } 156 157 span.hint { 158 -webkit-transition: color 200ms; 159 background: white; 160 display: block; 161 font-size: 0.9em; 162 font-weight: bold; 163 height: 0; 164 line-height: 10px; 165 margin: 0; 166 overflow: hidden; 167 } 168 169 span.hint.visible { 170 -webkit-animation-duration: 200ms; 171 -webkit-animation-fill-mode: forwards; 172 -webkit-user-select: text; 173 color: rgb(140, 20, 20); 174 height: auto; 175 margin-bottom: -5px; 176 margin-top: 5px; 177 padding-bottom: 5px; 178 } 179 180 span.hint.closing { 181 -webkit-transition: margin 150ms, height 150ms, opacity 150ms; 182 background: transparent; 183 height: 0 !important; 184 margin: 0; 185 opacity: 0; 186 } 187 188 .collapsible { 189 height: 0; 190 position: relative; 191 } 192 193 .collapsible.visible { 194 -webkit-animation-duration: 200ms; 195 -webkit-animation-fill-mode: forwards; 196 height: auto; 197 } 198 199 .collapsible.closing { 200 -webkit-transition: margin 150ms, height 150ms, opacity 150ms; 201 height: 0 !important; 202 opacity: 0; 203 overflow: hidden; 204 } 205 206 .collapsible.closing > * { 207 position: absolute; 208 } 209 210 select { 211 width: 100%; 212 } 213 214 label { 215 -webkit-user-select: none; 216 } 217 218 .hidden-section { 219 background: white; 220 position: relative; 221 } 222 223 .extra { 224 background: white; 225 height: 0; 226 opacity: 0; 227 padding-top: 0; 228 position: absolute; 229 visibility: hidden; 230 } 231 232 .visible .extra { 233 -webkit-animation-duration: 200ms; 234 -webkit-animation-fill-mode: forwards; 235 height: auto; 236 opacity: 1; 237 overflow: hidden; 238 padding-bottom: 0; 239 position: static; 240 visibility: visible; 241 } 242 243 .closing .extra { 244 -webkit-transition: padding-top 100ms, height 100ms, opacity 200ms, 245 background 300ms; 246 height: 0 !important; 247 opacity: 0; 248 overflow: hidden; 249 padding-top: 0; 250 position: static; 251 visibility: visible; 252 } 253 254 /* Individual settings sections */ 255 256 /* TODO(estade): this should be in a shared location but I'm afraid of the 257 * damage it could do. */ 258 [hidden] { 259 display: none !important; 260 } 261 262 @-webkit-keyframes dancing-dots-jump { 263 0% { top: 0; } 264 55% { top: 0; } 265 60% { top: -10px; } 266 80% { top: 3px; } 267 90% { top: -2px; } 268 95% { top: 1px; } 269 100% { top: 0; } 270 } 271 272 span.jumping-dots > span { 273 -webkit-animation: dancing-dots-jump 1800ms infinite; 274 padding: 1px; 275 position: relative; 276 } 277 278 span.jumping-dots > span:nth-child(2) { 279 -webkit-animation-delay: 100ms; 280 } 281 282 span.jumping-dots > span:nth-child(3) { 283 -webkit-animation-delay: 300ms; 284 } 285 286 /* TODO(estade): unfork this code. */ 287 #print-header .button-strip { 288 <if expr="not chromeos and not is_win"> 289 -webkit-box-direction: reverse; 290 </if> 291 -webkit-box-orient: horizontal; 292 -webkit-box-pack: end; 293 display: -webkit-box; 294 } 295 296 #print-header .button-strip button { 297 -webkit-margin-start: 9px; 298 display: block; 299 } 300 301 #link-container { 302 -webkit-box-orient: vertical; 303 display: -webkit-box; 304 margin: 7px 0; 305 } 306 307 #main-container { 308 -webkit-border-start: 1px solid #dcdcdc; 309 -webkit-box-flex: 1; 310 -webkit-box-orient: vertical; 311 display: -webkit-box; 312 height: 100%; 313 position: relative; 314 } 315 316 html:not(.focus-outline-visible) 317 :enabled:focus:-webkit-any(input[type='checkbox'], 318 input[type='radio'], 319 button):not(.link-button) { 320 /* Cancel border-color for :focus specified in widgets.css. */ 321 border-color: rgba(0,0,0,0.25); 322 } 323 324 html:not(.focus-outline-visible) button:focus.link-button { 325 outline: none; 326 } 327