src/ui/file_manager/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: flex;
  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: flex;
 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 html[dir='rtl'] menu.chrome-menu > :not(hr) {
 198   background-position: left 10px center;
 199 }
 200
 201 menu.chrome-menu > .menuitem-button {
 202   background-position: center;
 203   background-repeat: no-repeat;
 204   border: 1px solid rgb(235, 235, 235);
 205   height: 42px;
 206   margin: -36px -1px -1px 0;
 207   min-width: 60px;
 208   padding: 0;
 209   position: absolute;
 210   width: 60px;
 211 }
 212
 213 menu.chrome-menu > .menuitem-button[checked] {
 214   background-color: rgb(235, 235, 235);
 215 }
 216
 217 menu.chrome-menu > .menuitem-button.left {
 218   right: 59px;
 219 }
 220
 221 html[dir='rtl'] menu.chrome-menu > .menuitem-button.left {
 222   left: 59px;
 223   right: auto;
 224 }
 225
 226 menu.chrome-menu > .menuitem-button.right {
 227   right: 0;
 228 }
 229
 230 html[dir='rtl'] menu.chrome-menu > .menuitem-button.right {
 231   left: 0;
 232   right: auto;
 233 }
 234
 235 menu.chrome-menu > menuitem[disabled] {
 236   color: rgb(153, 153, 153);
 237 }
 238
 239 menu.chrome-menu > menuitem:not([disabled])[selected],
 240 menu.chrome-menu > menuitem:not([disabled]):active {
 241   background-color: rgb(66, 129, 244);
 242   color: white;
 243 }
 244
 245 menu.chrome-menu > hr {
 246   background: rgb(235, 235, 235);
 247   height: 1px;
 248   margin: 5px 0;
 249 }
 250
 251 menu.chrome-menu > menuitem[checked] {
 252   background-image: -webkit-image-set(
 253     url('../images/common/check_no_box.png') 1x,
 254     url('../images/common/2x/check_no_box.png') 2x);
 255 }
 256
 257 menu.chrome-menu > [checked]::before {
 258   display: none;
 259 }
 260
 261 menu[showShortcuts] > menuitem[shortcutText][selected]:not([disabled])::after {
 262   color: white;
 263 }
 264
 265 /**
 266  * Ok/Cancel style buttons
 267  * Height: 31px (content:21px + border:5px * 2)
 268  **/
 269 button,
 270 input[type='button'],
 271 input[type='submit'],
 272 select {
 273   background-color: rgb(250, 250, 250);
 274   background-image: none;
 275   background-position: center;
 276   background-repeat: no-repeat;
 277   border: 5px solid transparent;
 278   border-image: -webkit-image-set(
 279     url('chrome://resources/images/apps/button.png') 1x,
 280     url('chrome://resources/images/2x/apps/button.png')
 281         2x) 5 / 5px / 2px repeat;
 282   box-sizing: content-box;
 283   color: rgb(34, 34, 34);
 284   cursor: default;
 285   height: 21px;
 286   line-height: 21px;
 287   margin: 0;
 288   min-height: 21px;
 289   min-width: 55px;
 290   padding: 0 10px;
 291   position: relative;
 292   text-align: center;
 293   z-index: 1;
 294 }
 295
 296 .buttonbar button {
 297   -webkit-margin-start: 10px;
 298 }
 299
 300 button:hover,
 301 input[type='button']:hover,
 302 input[type='submit']:hover,
 303 select:hover {
 304   border-image: -webkit-image-set(
 305     url('chrome://resources/images/apps/button_hover.png') 1x,
 306     url('chrome://resources/images/2x/apps/button_hover.png')
 307         2x) 5 fill / 5px / 2px repeat;
 308   color: #222;
 309 }
 310
 311 button:active,
 312 input[type='button']:active,
 313 input[type='submit']:active {
 314   border-image: -webkit-image-set(
 315     url('chrome://resources/images/apps/button_pressed.png') 1x,
 316     url('chrome://resources/images/2x/apps/button_pressed.png')
 317         2x) 5 fill / 5px / 2px repeat;
 318   color: #333;
 319 }
 320
 321 button[disabled],
 322 input[type='button'][disabled],
 323 input[type='submit'][disabled],
 324 button[disabled]:hover,
 325 input[type='button'][disabled]:hover,
 326 input[type='submit'][disabled]:hover {
 327   background-color: rgb(250, 250, 250);
 328   background-image: none;
 329   border-image: -webkit-image-set(
 330     url('chrome://resources/images/apps/button.png') 1x,
 331     url('chrome://resources/images/2x/apps/button.png')
 332         2x) 5 fill / 5px / 2px repeat;
 333   color: rgb(150, 150, 150);
 334 }
 335
 336 select:not([size]):hover,
 337 select[size='0']:hover,
 338 select[size='1']:hover {
 339   /* Original value is '5 fill', which hides the dropdown triangle. */
 340   border-image-slice: 5;
 341 }
 342
 343 /* Gray progress bar. */
 344 .progress-bar {
 345   background-color: #e6e6e6;
 346   border-radius: 3px;
 347   height: 6px;
 348 }
 349
 350 .progress-track {
 351   background-color: #888;
 352   border-radius: 3px;
 353   height: 6px;
 354   min-width: 6px;
 355 }
 356
 357 /* Entry names (File names, Folder names, Volume names, ...). */
 358 /* Their base bidi direction should be ltr even in RTL languages. */
 359 html[dir='rtl'] .entry-name {
 360   direction: ltr;
 361   text-align: right;
 362   unicode-bidi: embed;
 363 }
 364
 365 /* Pop-up dialogs. */
 366
 367 .cr-dialog-container {
 368   -webkit-user-select: none;
 369   align-items: center;
 370   display: flex;
 371   height: 100%;
 372   justify-content: center;
 373   left: 0;
 374   overflow: hidden;
 375   position: absolute;
 376   top: 0;
 377   transition: opacity 250ms linear;
 378   width: 100%;
 379   z-index: 9999;
 380 }
 381
 382 .cr-dialog-frame {
 383   background-color: rgb(250, 250, 250);
 384   border: 1px solid rgb(255, 255, 255);
 385   border-radius: 2px;
 386   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .5);
 387   color: rgb(34, 34, 34);
 388   cursor: default;
 389   display: flex;
 390   flex-direction: column;
 391   padding: 20px;
 392   position: relative;
 393   width: 460px;
 394 }
 395
 396 .cr-dialog-frame:focus {
 397   outline: none;
 398 }
 399
 400 @-webkit-keyframes pulse {
 401  0% {
 402    -webkit-transform: scale(1);
 403  }
 404  40% {
 405    -webkit-transform: scale(1.02);
 406   }
 407  60% {
 408    -webkit-transform: scale(1.02);
 409   }
 410  100% {
 411    -webkit-transform: scale(1);
 412  }
 413 }
 414
 415 .cr-dialog-frame.pulse {
 416   -webkit-animation-duration: 180ms;
 417   -webkit-animation-iteration-count: 1;
 418   -webkit-animation-name: pulse;
 419   -webkit-animation-timing-function: ease-in-out;
 420 }
 421
 422 .shown > .cr-dialog-frame {
 423   -webkit-transform: perspective(500px) scale(1)
 424                      translateY(0) rotateX(0);
 425   opacity: 1;
 426 }
 427
 428 .cr-dialog-frame {
 429   -webkit-transform: perspective(500px) scale(0.99)
 430                      translateY(-20px) rotateX(5deg);
 431   opacity: 0;
 432   transition: all 180ms;
 433   transition-duration: 250ms;
 434 }
 435
 436 .cr-dialog-shield {
 437   background-color: white;
 438   bottom: 0;
 439   display: block;
 440   left: 0;
 441   opacity: 0;
 442   pointer-events: none;
 443   position: absolute;
 444   right: 0;
 445   top: 0;
 446   transition: opacity 500ms;
 447 }
 448
 449 .shown > .cr-dialog-shield {
 450   opacity: 0.5;
 451   transition: opacity 500ms;
 452 }
 453
 454 .cr-dialog-title {
 455   -webkit-margin-end: 20px;
 456   display: block;
 457   font-size: 125%;
 458   margin-bottom: 10px;
 459   white-space: nowrap;
 460   word-wrap: normal;
 461 }
 462
 463 .cr-dialog-text {
 464   margin: 13px 0;
 465 }
 466
 467 .cr-dialog-text,
 468 .cr-dialog-title {
 469   overflow: hidden;
 470   text-overflow: ellipsis;
 471 }
 472
 473 .cr-dialog-frame input {
 474   box-sizing: border-box;
 475   width: 100%;
 476 }
 477
 478 .cr-dialog-buttons {
 479   display: flex;
 480   flex-direction: row;
 481   justify-content: flex-end;
 482   padding-top: 10px;
 483 }
 484
 485 .cr-dialog-buttons button {
 486   -webkit-margin-start: 8px;
 487   line-height: 1.8;
 488 }
 489
 490 .cr-dialog-close {
 491   background: url('chrome://theme/IDR_CLOSE_DIALOG') center no-repeat;
 492   display: inline-block;
 493   height: 44px;
 494   opacity: 0.7;
 495   position: absolute;
 496   right: 0;
 497   top: 0;
 498   width: 44px;
 499 }
 500
 501 .cr-dialog-close:hover {
 502   background-image: url('chrome://theme/IDR_CLOSE_DIALOG_H');
 503 }
 504
 505 .cr-dialog-close:active {
 506   background-image: url('chrome://theme/IDR_CLOSE_DIALOG_P');
 507 }