LCARStrek/browser/downloads/progressmeter.inc.css

   1 /*** Common-styled progressmeter ***/
   2 .downloadProgress {
   3   height: 8px;
   4   border-radius: 1px;
   5   margin: 4px 0 0;
   6   margin-inline-end: 12px;
   7
   8   /* for overriding rules in progressmeter.css */
   9   -moz-appearance: none;
  10   border-style: none;
  11   background-color: transparent;
  12   min-width: initial;
  13   min-height: initial;
  14 }
  15
  16 .downloadProgress[mode="undetermined"] {
  17   /* for overriding rules on global.css in Linux. */
  18   -moz-binding: url("chrome://global/content/bindings/progressmeter.xml#progressmeter");
  19 }
  20
  21 .downloadProgress > .progress-bar {
  22   background-color: #008484;
  23
  24   /* for overriding rules in progressmeter.css */
  25   -moz-appearance: none;
  26 }
  27
  28 .downloadProgress[paused="true"] > .progress-bar {
  29   background-color: #A09090;
  30 }
  31
  32 .downloadProgress[mode="undetermined"] > .progress-bar {
  33   /* Make a white reflecting animation.
  34      Create a gradient with 2 identical pattern, and enlarge the size to 200%.
  35      This allows us to animate background-position with percentage. */
  36   background-image: linear-gradient(90deg, transparent 0%,
  37                                            rgba(255,255,255,0.5) 25%,
  38                                            transparent 50%,
  39                                            rgba(255,255,255,0.5) 75%,
  40                                            transparent 100%);
  41   background-blend-mode: lighten;
  42   background-size: 200% 100%;
  43   animation: downloadProgressSlideX 1.5s linear infinite;
  44 }
  45
  46 .downloadProgress > .progress-remainder {
  47   border: solid #9C9CFF;
  48   border-block-start-width: 1px;
  49   border-block-end-width: 1px;
  50   border-inline-start-width: 0;
  51   border-inline-end-width: 1px;
  52   background-color: #000000;
  53 }
  54
  55 .downloadProgress[value="0"] > .progress-remainder {
  56   border-width: 1px;
  57 }
  58
  59 .downloadProgress > .progress-remainder[mode="undetermined"] {
  60   border: none;
  61 }
  62
  63 @keyframes downloadProgressSlideX {
  64   0% {
  65     background-position: 0 0;
  66   }
  67   100% {
  68     background-position: -100% 0;
  69   }
  70 }