src/chrome/browser/resources/file_manager/foreground/css/common.css

   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 /* Special attribute to hide elements. */
   6 [hidden] {
   7   display: none !important;
   8 }
   9
  10 /* This file contains "borrowed" copy of standard styles. To simplify merging,
  11  * when altering, please preserve original property value by adding comments. */
  12 input.common[type='checkbox'],
  13 input.common[type='radio'] {
  14   -webkit-appearance: none;
  15   border: 1px solid #555;
  16   border-radius: 1px;
  17   box-sizing: border-box;
  18   cursor: default;
  19   height: 13px;
  20   margin: 0;
  21   opacity: 0.4;
  22   width: 13px;
  23 }
  24
  25 input.common[type='checkbox']:hover,
  26 input.common[type='checkbox']:checked,
  27 input.common[type='radio']:hover,
  28 input.common[type='radio']:checked {
  29   opacity: 1;
  30 }
  31
  32 input.common[type='checkbox'] {
  33   position: relative;
  34 }
  35
  36 input.common[type='checkbox']:checked::after {
  37   background-image: -webkit-image-set(
  38     url('../images/common/check_no_box.png') 1x,
  39     url('../images/common/2x/check_no_box.png') 2x);
  40   background-position: -3px -4px;
  41   background-repeat: no-repeat;
  42 }
  43
  44 input.common[type='checkbox'].white {
  45   border: none;
  46 }
  47
  48 input.common[type='checkbox'].white:not(:checked)::after {
  49   background-image: -webkit-image-set(
  50     url('../images/common/checkbox_white_unchecked.png') 1x,
  51     url('../images/common/2x/checkbox_white_unchecked.png') 2x);
  52   background-position: -1px 0;
  53 }
  54
  55 input.common[type='checkbox'].white:checked::after {
  56   background-image: -webkit-image-set(
  57     url('../images/common/checkbox_white_checked.png') 1x,
  58     url('../images/common/2x/checkbox_white_checked.png') 2x);
  59   background-position: -1px 0;
  60 }
  61
  62 input.common[type='checkbox']::after {
  63   content: '';
  64   display: -webkit-box;
  65   height: 15px;
  66   left: -2px;
  67   position: absolute;
  68   top: -2px;
  69   width: 17px;
  70 }
  71
  72 .bubble {
  73   background: #FFF;
  74   border-radius: 2px;
  75   cursor: default;
  76   outline: 1px solid rgba(0, 0, 0, 0.2);
  77   padding: 16px;
  78 }
  79
  80 .bubble .pointer {
  81   background: -webkit-image-set(
  82     url('../images/common/bubble_point_white.png') 1x,
  83     url('../images/common/2x/bubble_point_white.png') 2x);
  84   display: block;
  85   height: 11px;
  86   left: 24px;
  87   margin: 0 0 0 -5px;
  88   outline: none;
  89   position: absolute;
  90   width: 17px;
  91 }
  92
  93 .bubble .pointer:not(.bottom) {
  94   top: -11px;
  95 }
  96
  97 .bubble .pointer.bottom {
  98   -webkit-transform: rotate(180deg);
  99   bottom: -11px;
 100 }
 101
 102 .bubble .close-x {
 103   background: -webkit-image-set(
 104     url('../images/common/close_x_gray.png') 1x,
 105     url('../images/common/2x/close_x_gray.png') 2x);
 106   height: 21px;
 107   opacity: 0.3;
 108   position: absolute;
 109   right: 3px;
 110   top: 3px;
 111   width: 21px;
 112 }
 113
 114 .bubble .close-x:hover {
 115   opacity: 0.7;
 116 }
 117
 118 .buttonbar {
 119   display: -webkit-box;
 120   height: 31px;
 121 }
 122
 123 .buttonbar button:active img {
 124   opacity: 1.0;
 125 }
 126
 127 .buttonbar button:hover img {
 128   opacity: 0.72;
 129 }
 130
 131 .buttonbar button[disabled] img {
 132   opacity: 0.9;
 133 }
 134
 135 .buttonbar button img {
 136   display: inline-block;
 137   margin: -3px 0 0;
 138   opacity: 0.55;
 139   vertical-align: middle;
 140 }
 141
 142 .buttonbar button.menubutton span.disclosureindicator {
 143   -webkit-transform: rotate(90deg);
 144   float: right;
 145   margin-left: 7px;
 146   margin-top: 10px;
 147   opacity: .8;
 148   transition: none;
 149 }
 150
 151 span.disclosureindicator {
 152   background-image: -webkit-image-set(
 153     url('../images/common/disclosure_arrow_dk_grey.png') 1x,
 154     url('../images/common/2x/disclosure_arrow_dk_grey.png') 2x);
 155   background-position: center;
 156   background-repeat: no-repeat;
 157   display: inline-block;
 158   height: 7px;
 159   width: 5px;
 160 }
 161
 162 /* "chrome-menu" class overrides some standard menu.css styles, to make custom
 163    menus in FileBrowser look like native ChromeOS menus. */
 164
 165 menu.chrome-menu {
 166   background-color: rgb(250, 250, 250);
 167   border-radius: 3px;
 168   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .5);
 169   color: rgb(34, 34, 34);
 170   outline: none;
 171   overflow: hidden;
 172   padding: 5px 0;
 173   transition: opacity 200ms ease-in;
 174   z-index: 600;  /* Must be below the overlay pane (1000). */
 175 }
 176
 177 menu.chrome-menu[hidden] {
 178   display: block !important;  /* Overrides default [hidden] for animation. */
 179   opacity: 0;
 180   pointer-events: none;
 181   visibility: hidden;
 182 }
 183
 184 menu.chrome-menu.hide-delayed[hidden] {
 185   transition-delay: 120ms;
 186   transition-property: opacity, visibility;
 187 }
 188
 189 menu.chrome-menu > :not(hr) {
 190   background-position: right 10px center;
 191   background-repeat: no-repeat;
 192   line-height: 30px;
 193   padding-left: 20px;
 194   padding-right: 20px;
 195 }
 196
 197 menu.chrome-menu > .menuitem-button {
 198   background-position: center;
 199   background-repeat: no-repeat;
 200   border: 1px solid rgb(235, 235, 235);
 201   height: 42px;
 202   margin: -36px -1px -1px 0;
 203   min-width: 60px;
 204   padding: 0;
 205   position: absolute;
 206   width: 60px;
 207 }
 208
 209 menu.chrome-menu > .menuitem-button[checked] {
 210   background-color: rgb(235, 235, 235);
 211 }
 212
 213 menu.chrome-menu > .menuitem-button.left {
 214   right: 59px;
 215 }
 216
 217 menu.chrome-menu > .menuitem-button.right {
 218   right: 0;
 219 }
 220
 221 menu.chrome-menu > menuitem[disabled] {
 222   color: rgb(153, 153, 153);
 223 }
 224
 225 menu.chrome-menu > menuitem:not([disabled])[selected],
 226 menu.chrome-menu > menuitem:not([disabled])[selected]:active {
 227   background-color: rgb(66, 129, 244);
 228   color: white;
 229 }
 230
 231 menu.chrome-menu > hr {
 232   background: rgb(235, 235, 235);
 233   height: 1px;
 234   margin: 5px 0;
 235 }
 236
 237 menu.chrome-menu > menuitem[checked] {
 238   background-image: -webkit-image-set(
 239     url('../images/common/check_no_box.png') 1x,
 240     url('../images/common/2x/check_no_box.png') 2x);
 241 }
 242
 243 menu.chrome-menu > [checked]::before {
 244   display: none;
 245 }
 246
 247 menu[showShortcuts] > menuitem[shortcutText][selected]:not([disabled])::after {
 248   color: white;
 249 }
 250
 251 /**
 252  * Ok/Cancel style buttons
 253  * Height: 31px (content:21px + border:5px * 2)
 254  **/
 255 button,
 256 input[type='button'],
 257 input[type='submit'],
 258 select {
 259   background-color: rgb(250, 250, 250);
 260   background-image: none;
 261   background-position: center;
 262   background-repeat: no-repeat;
 263   border: 5px solid transparent;
 264   border-image: -webkit-image-set(
 265     url('chrome://resources/images/apps/button.png') 1x,
 266     url('chrome://resources/images/2x/apps/button.png')
 267         2x) 5 / 5px / 2px repeat;
 268   box-sizing: content-box;
 269   color: rgb(34, 34, 34);
 270   cursor: default;
 271   height: 21px;
 272   line-height: 21px;
 273   margin: 0;
 274   min-height: 21px;
 275   min-width: 55px;
 276   padding: 0 10px;
 277   position: relative;
 278   text-align: center;
 279   z-index: 1;
 280 }
 281
 282 .buttonbar button {
 283   -webkit-margin-start: 10px;
 284 }
 285
 286 button:hover,
 287 input[type='button']:hover,
 288 input[type='submit']:hover,
 289 select:hover {
 290   border-image: -webkit-image-set(
 291     url('chrome://resources/images/apps/button_hover.png') 1x,
 292     url('chrome://resources/images/2x/apps/button_hover.png')
 293         2x) 5 fill / 5px / 2px repeat;
 294   color: #222;
 295 }
 296
 297 button:active,
 298 input[type='button']:active,
 299 input[type='submit']:active {
 300   border-image: -webkit-image-set(
 301     url('chrome://resources/images/apps/button_pressed.png') 1x,
 302     url('chrome://resources/images/2x/apps/button_pressed.png')
 303         2x) 5 fill / 5px / 2px repeat;
 304   color: #333;
 305 }
 306
 307 button[disabled],
 308 input[type='button'][disabled],
 309 input[type='submit'][disabled],
 310 button[disabled]:hover,
 311 input[type='button'][disabled]:hover,
 312 input[type='submit'][disabled]:hover {
 313   background-color: rgb(250, 250, 250);
 314   background-image: none;
 315   border-image: -webkit-image-set(
 316     url('chrome://resources/images/apps/button.png') 1x,
 317     url('chrome://resources/images/2x/apps/button.png')
 318         2x) 5 fill / 5px / 2px repeat;
 319   color: rgb(150, 150, 150);
 320 }
 321
 322 /* Gray progress bar. */
 323 .progress-bar {
 324   background-color: #e6e6e6;
 325   border-radius: 3px;
 326   height: 6px;
 327 }
 328
 329 .progress-track {
 330   background-color: #888;
 331   border-radius: 3px;
 332   height: 6px;
 333   min-width: 6px;
 334 }
 335
 336 .progress-track.smoothed {
 337   transition: width 1s linear;
 338 }
 339
 340 /* Icons for the action choice dialog and choosing the default app. */
 341 div.import-photos-to-drive-icon {
 342   background-image: -webkit-image-set(
 343     url('../images/media/drive.png') 1x,
 344     url('../images/media/2x/drive.png') 2x);
 345 }
 346
 347 div.view-files-icon {
 348   background-image: -webkit-image-set(
 349     url('../../common/images/icon32.png') 1x,
 350     url('../../common/images/icon64.png') 2x);
 351 }
 352
 353 div.watch-single-video-icon {
 354   background-image: -webkit-image-set(
 355     url('../images/media/watch.png') 1x,
 356     url('../images/media/2x/watch.png') 2x);
 357 }
 358
 359 /* Pop-up dialogs. */
 360
 361 .cr-dialog-container {
 362   -webkit-box-align: center;
 363   -webkit-box-pack: center;
 364   -webkit-user-select: none;
 365   display: -webkit-box;
 366   height: 100%;
 367   left: 0;
 368   overflow: hidden;
 369   position: absolute;
 370   top: 0;
 371   transition: opacity 250ms linear;
 372   width: 100%;
 373   z-index: 9999;
 374 }
 375
 376 .cr-dialog-frame {
 377   -webkit-box-orient: vertical;
 378   background-color: rgb(250, 250, 250);
 379   border: 1px solid rgb(255, 255, 255);
 380   border-radius: 2px;
 381   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .5);
 382   color: rgb(34, 34, 34);
 383   cursor: default;
 384   display: -webkit-box;
 385   padding: 20px;
 386   position: relative;
 387   width: 460px;
 388 }
 389
 390 .cr-dialog-frame:focus {
 391   outline: none;
 392 }
 393
 394 @-webkit-keyframes pulse {
 395  0% {
 396    -webkit-transform: scale(1);
 397  }
 398  40% {
 399    -webkit-transform: scale(1.02);
 400   }
 401  60% {
 402    -webkit-transform: scale(1.02);
 403   }
 404  100% {
 405    -webkit-transform: scale(1);
 406  }
 407 }
 408
 409 .cr-dialog-frame.pulse {
 410   -webkit-animation-duration: 180ms;
 411   -webkit-animation-iteration-count: 1;
 412   -webkit-animation-name: pulse;
 413   -webkit-animation-timing-function: ease-in-out;
 414 }
 415
 416 .shown > .cr-dialog-frame {
 417   -webkit-transform: perspective(500px) scale(1)
 418                      translateY(0) rotateX(0);
 419   opacity: 1;
 420 }
 421
 422 .cr-dialog-frame {
 423   -webkit-transform: perspective(500px) scale(0.99)
 424                      translateY(-20px) rotateX(5deg);
 425   opacity: 0;
 426   transition: all 180ms;
 427   transition-duration: 250ms;
 428 }
 429
 430 .cr-dialog-shield {
 431   background-color: white;
 432   bottom: 0;
 433   display: block;
 434   left: 0;
 435   opacity: 0;
 436   pointer-events: none;
 437   position: absolute;
 438   right: 0;
 439   top: 0;
 440   transition: opacity 500ms;
 441 }
 442
 443 .shown > .cr-dialog-shield {
 444   opacity: 0.5;
 445   transition: opacity 500ms;
 446 }
 447
 448 .cr-dialog-title {
 449   -webkit-margin-after: 10px;
 450   -webkit-margin-end: 20px;
 451   display: block;
 452   font-size: 125%;
 453   white-space: nowrap;
 454   word-wrap: normal;
 455 }
 456
 457 .cr-dialog-text {
 458   margin: 13px 0;
 459 }
 460
 461 .cr-dialog-text,
 462 .cr-dialog-title {
 463   overflow: hidden;
 464   text-overflow: ellipsis;
 465 }
 466
 467 .cr-dialog-frame input {
 468   box-sizing: border-box;
 469   width: 100%;
 470 }
 471
 472 .cr-dialog-buttons {
 473   -webkit-box-orient: horizontal;
 474   -webkit-box-pack: end;
 475   display: -webkit-box;
 476   padding-top: 10px;
 477 }
 478
 479 .cr-dialog-buttons button {
 480   -webkit-margin-start: 8px;
 481   line-height: 1.8;
 482 }
 483
 484 .cr-dialog-close {
 485   background: url('chrome://theme/IDR_CLOSE_DIALOG') center no-repeat;
 486   display: inline-block;
 487   height: 44px;
 488   opacity: 0.7;
 489   position: absolute;
 490   right: 0;
 491   top: 0;
 492   width: 44px;
 493 }
 494
 495 .cr-dialog-close:hover {
 496   background-image: url('chrome://theme/IDR_CLOSE_DIALOG_H');
 497 }
 498
 499 .cr-dialog-close:active {
 500   background-image: url('chrome://theme/IDR_CLOSE_DIALOG_P');
 501 }