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