chrome/browser/resources/chromeos/wallpaper_manager/css/wallpaper_manager.css

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