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