1 /* Copyright (c) 2013 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 } 8 9 body { 10 -webkit-app-region: drag; 11 background-color: rgba(20, 20, 20, 0.93); 12 color: #999; 13 font-size: 80%; 14 height: 100%; 15 margin: 0; 16 padding: 0; 17 } 18 19 /* Click events are not received in draggable area. Making all clickable areas 20 * not draggable to receive click events. 21 * TODO(bshe): Remove this when http://crbug.com/142275 fixed. 22 */ 23 .dialog-topbar #navstrip, 24 .dialog-topbar #window-close-button, 25 .image-picker, 26 .overlay-container .page, 27 #surprise-me { 28 -webkit-app-region: no-drag; 29 } 30 31 .dialog-container { 32 -webkit-box-orient: vertical; 33 display: -webkit-box; 34 overflow: hidden; 35 } 36 37 .dialog-topbar { 38 -webkit-box-align: center; 39 display: -webkit-box; 40 height: 54px; 41 overflow: hidden; 42 padding: 0 15px; 43 position: relative; 44 } 45 46 .dialog-topbar .spacer { 47 -webkit-box-flex: 1; 48 } 49 50 #categories-list { 51 -webkit-box-orient: horizontal; 52 display: -webkit-box; 53 height: 54px; 54 outline: none; 55 width: 100%; 56 } 57 58 #categories-list > li { 59 -webkit-box-align: center; 60 -webkit-transition: border-top 130ms ease; 61 -webkit-user-select: none; 62 border-top: 4px solid transparent; 63 color: #777; 64 display: -webkit-box; 65 height: 50px; 66 } 67 68 #categories-list > li:hover { 69 border-top-color: rgba(255, 255, 255, 0.4); 70 cursor: pointer; 71 } 72 73 #categories-list > li[selected] { 74 color: rgb(70, 78, 90); 75 cursor: default; 76 } 77 78 #categories-list > li > div { 79 line-height: 34px; 80 padding: 0 10px; 81 } 82 83 #categories-list > li[selected] > div { 84 color: #eee; 85 } 86 87 .close { 88 background-position: center; 89 background-repeat: no-repeat; 90 height: 14px; 91 padding: 10px; 92 position: absolute; 93 right: 0; 94 top: 0; 95 width: 14px; 96 } 97 98 #window-close-button { 99 background-image: url('../images/ui/close-white.png'); 100 } 101 102 #window-close-button:hover { 103 background-image: url('../images/ui/close-white-hover.png'); 104 } 105 106 #bar { 107 -webkit-transition: left 130ms ease-in-out; 108 background-color: #eee; 109 height: 4px; 110 position: absolute; 111 top: 0; 112 } 113 114 .dialog-main { 115 -webkit-box-align: stretch; 116 -webkit-box-flex: 1; 117 display: -webkit-box; 118 } 119 120 #category-container { 121 -webkit-box-flex: 1; 122 -webkit-box-orient: vertical; 123 display: -webkit-box; 124 } 125 126 .image-picker { 127 -webkit-padding-end: 5px; 128 -webkit-padding-start: 15px; 129 display: block; 130 /* Set font size to 0 to remove the extra vertical margin between two rows of 131 * thumbnails. 132 * TODO(bshe): Find the root cause of the margin. 133 */ 134 font-size: 0; 135 height: 287px; 136 outline: none; 137 overflow-y: auto; 138 padding-bottom: 15px; 139 padding-top: 5px; 140 } 141 142 .image-picker .spacer { 143 display: block; 144 } 145 146 .image-picker > * { 147 display: inline-block; 148 margin: 0; 149 overflow: hidden; 150 padding: 0; 151 } 152 153 .image-picker [role=listitem] { 154 -webkit-margin-end: 1px; 155 height: 68px; 156 margin-bottom: 1px; 157 position: relative; 158 width: 108px; 159 } 160 161 .image-picker [role=listitem]:hover { 162 outline: 3px solid #f1f1f1; 163 z-index: 1; 164 } 165 166 .image-picker .check { 167 background-image: url('../images/ui/check.png'); 168 height: 32px; 169 left: 38px; 170 position: absolute; 171 top: 18px; 172 width: 32px; 173 z-index: 3; 174 } 175 176 ::-webkit-scrollbar { 177 width: 6px; 178 } 179 180 ::-webkit-scrollbar-thumb { 181 background: #aaa; 182 } 183 184 ::-webkit-scrollbar-thumb:hover { 185 background: #888; 186 } 187 188 /* The width and height of img tag need to be set here. Otherwise, an incorrect 189 * image size may be used during layout. Some images may be misaligned as a 190 * result. See http://code.google.com/p/chromium/issues/detail?id=148480 for 191 * screen shot. 192 */ 193 .image-picker img { 194 height: 68px; 195 width: 108px; 196 } 197 198 .image-picker[disabled], 199 .image-picker-offline img:not([offline]) { 200 -webkit-filter: grayscale(1); 201 } 202 203 #wallpaper-attribute { 204 -webkit-box-orient: vertical; 205 display: -webkit-box; 206 } 207 208 .bottom-bar { 209 -webkit-box-align: center; 210 -webkit-box-orient: horizontal; 211 -webkit-box-pack: end; 212 display: -webkit-box; 213 height: 40px; 214 padding: 11px 15px 8px 15px; 215 } 216 217 .bottom-bar > .spacer { 218 -webkit-box-flex: 1; 219 } 220 221 #online-wallpaper-attribute { 222 display: -webkit-box; 223 } 224 225 #attribute-image { 226 -webkit-margin-end: 10px; 227 height: 34px; 228 width: 54px; 229 } 230 231 #author-website { 232 color: #999; 233 overflow: hidden; 234 white-space: nowrap; 235 width: 240px; 236 } 237 238 /* [hidden] does display:none, but its priority is too low. */ 239 [hidden], 240 body[custom] [visibleif]:not([visibleif~='custom']), 241 body:not([custom]) [visibleif~='custom'] { 242 display: none !important; 243 } 244 245 .progress-bar { 246 background-color: rgba(255, 255, 255, 0.7); 247 height: 6px; 248 position: absolute; 249 top: 62px; 250 width: 100%; 251 } 252 253 .progress-track { 254 -webkit-transition: width 1ms linear; 255 background-color: rgb(66, 129, 244); 256 height: 100%; 257 width: 0; 258 } 259 260 .overlay-container { 261 -webkit-box-align: center; 262 -webkit-box-orient: vertical; 263 -webkit-box-pack: center; 264 background-color: rgba(25, 25, 25, 0.25); 265 bottom: 0; 266 display: -webkit-box; 267 left: 0; 268 overflow: auto; 269 position: fixed; 270 right: 0; 271 top: 0; 272 z-index: 4; 273 } 274 275 .overlay-container .page { 276 -webkit-border-radius: 3px; 277 -webkit-box-orient: vertical; 278 background: rgb(255, 255, 255); 279 box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15); 280 color: #333; 281 display: -webkit-box; 282 padding: 20px; 283 position: relative; 284 width: 302px; 285 } 286 287 #error-container { 288 z-index: 5; 289 } 290 291 .overlay-container .close { 292 background-image: url('../images/ui/close-overlay.png'); 293 } 294 295 .overlay-container .close:hover { 296 background-image: url('../images/ui/close-overlay-hover.png'); 297 } 298 299 /* Custom wallpaper thumbnail container. */ 300 #add-new img { 301 content: url('../images/ui/add-wallpaper-thumbnail.png'); 302 } 303 304 #add-new:hover img { 305 content: url('../images/ui/add-wallpaper-thumbnail-hover.png'); 306 } 307 308 #wallpaper-selection-container #content div { 309 margin: 20px 0 5px 0; 310 } 311 312 #wallpaper-selection-container #warning span { 313 line-height: 17px; 314 } 315 316 #wallpaper-selection-container select { 317 height: 30px; 318 } 319 320 #wallpaper-selection-container input[type='file']::-webkit-file-upload-button { 321 height: 30px; 322 } 323 324 #wallpaper-selection-container .remember-icon { 325 content: url('../images/ui/remember.png'); 326 } 327 328 #surprise-me #checkbox { 329 background-image: url('../images/ui/checkbox_unchecked.png'); 330 display: inline-block; 331 height: 17px; 332 margin-right: 4px; 333 opacity: 0.7; 334 position: relative; 335 top: 4px; 336 width: 17px; 337 } 338 339 #surprise-me #checkbox.checked { 340 background-image: url('../images/ui/checkbox_checked.png'); 341 } 342