LCARStrek/browser/downloads/indicator.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 /*** Status and progress indicator ***/
   6
   7 #downloads-animation-container {
   8   min-height: 1px;
   9   min-width: 1px;
  10   height: 1px;
  11   margin-bottom: -1px;
  12   /* Makes the outermost animation container element positioned, so that its
  13      contents are rendered over the main browser window in the Z order.
  14      This is required by the animated event notification. */
  15   position: relative;
  16   /* The selected tab may overlap #downloads-indicator-notification */
  17   z-index: 5;
  18 }
  19
  20 /*** Main indicator icon ***/
  21
  22 #downloads-indicator-icon {
  23   background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"),
  24                               0, 108, 18, 90) center no-repeat;
  25   min-width: 18px;
  26   min-height: 18px;
  27 }
  28
  29 #downloads-button:hover > #downloads-indicator-anchor > #downloads-indicator-icon,
  30 #downloads-button[open="true"] > #downloads-indicator-anchor > #downloads-indicator-icon,
  31 #downloads-button[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-icon {
  32   background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"),
  33                               18, 108, 36, 90) center no-repeat;
  34   color: #000000;
  35 }
  36
  37 #downloads-indicator-icon:-moz-lwtheme-brighttext {
  38 /*  background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"),
  39                               0, 108, 18, 90) center no-repeat;*/
  40 }
  41
  42 #downloads-button[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
  43   background-image: url("chrome://browser/skin/downloads/download-glow.png");
  44 }
  45
  46 /* In the next few rules, we use :not([counter]) as a shortcut that is
  47    equivalent to -moz-any([progress], [paused]). */
  48
  49 #downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
  50   background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"),
  51                               0, 108, 18, 90) center no-repeat;
  52   background-size: 12px;
  53 }
  54
  55 #downloads-button:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
  56   background-image: url("chrome://browser/skin/downloads/download-glow.png");
  57 }
  58
  59 #downloads-button:not([counter]):hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
  60 #downloads-button[open="true"]:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
  61 #downloads-button:not([counter])[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
  62   background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"),
  63                               18, 108, 36, 90) center no-repeat;
  64   background-size: 12px;
  65 }
  66
  67 /*** Download notifications ***/
  68
  69 #downloads-indicator-notification {
  70   opacity: 0;
  71   background-size: 16px;
  72   background-position: center;
  73   background-repeat: no-repeat;
  74   width: 16px;
  75   height: 16px;
  76 }
  77
  78 @keyframes downloadsIndicatorNotificationStartRight {
  79   from { opacity: 0; transform: translate(-128px, 128px) scale(8); }
  80   20%  { opacity: .85; animation-timing-function: ease-out; }
  81   to   { opacity: 0; transform: translate(0) scale(1); }
  82 }
  83
  84 @keyframes downloadsIndicatorNotificationStartLeft {
  85   from { opacity: 0; transform: translate(128px, 128px) scale(8); }
  86   20%  { opacity: .85; animation-timing-function: ease-out; }
  87   to   { opacity: 0; transform: translate(0) scale(1); }
  88 }
  89
  90 #downloads-notification-anchor[notification="start"] > #downloads-indicator-notification {
  91   background-image: url("chrome://browser/skin/downloads/download-notification-start.png");
  92   animation-name: downloadsIndicatorNotificationStartRight;
  93   animation-duration: 1s;
  94 }
  95
  96 #downloads-notification-anchor[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-notification {
  97   animation-name: downloadsIndicatorNotificationStartLeft;
  98 }
  99
 100 @keyframes downloadsIndicatorNotificationFinish {
 101   from { opacity: 0; transform: scale(1); }
 102   20%  { opacity: .65; animation-timing-function: ease-in; }
 103   to   { opacity: 0; transform: scale(8); }
 104 }
 105
 106 #downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification {
 107   background-image: url("chrome://browser/skin/downloads/download-notification-finish.png");
 108   animation-name: downloadsIndicatorNotificationFinish;
 109   animation-duration: 1s;
 110 }
 111
 112 /*** Progress bar and text ***/
 113
 114 #downloads-indicator-counter {
 115   height: 9px;
 116   margin: -3px 0 0;
 117   color: #FFCF00;
 118   font-size: 9px;
 119   line-height: 9px;
 120   text-align: center;
 121 }
 122
 123 #downloads-indicator-counter:-moz-lwtheme-brighttext {
 124 /*  color: white;
 125   text-shadow: 0 0 1px rgba(0,0,0,.7),
 126                0 1px 1.5px rgba(0,0,0,.5);*/
 127 }
 128
 129 #downloads-button[counter]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
 130 #downloads-button[counter][open="true"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
 131   color: #000000;
 132 }
 133
 134 #downloads-indicator-progress {
 135   width: 16px;
 136   height: 5px;
 137   min-width: 0;
 138   min-height: 0;
 139   margin-top: 1px;
 140   margin-bottom: 2px;
 141   border-radius: 2px;
 142   background-color: #795900;
 143 }
 144
 145 #downloads-indicator-progress > .progress-bar {
 146   -moz-appearance: none;
 147   min-width: 0;
 148   min-height: 0;
 149   background-color: #008484;
 150   border-radius: 2px 0 0 2px;
 151 }
 152
 153 #downloads-indicator-progress > .progress-remainder {
 154   min-width: 0;
 155   min-height: 0;
 156   background-color: #A09090;
 157   border-radius: 0 2px 2px 0;
 158 }
 159
 160 #downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
 161   background-color: #8050B0;
 162 }
 163
 164 #downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
 165   background-color: #404048;
 166 }
 167
 168 toolbar[mode="full"] > #downloads-button > .toolbarbutton-text {
 169   margin: 0;
 170   text-align: center;
 171 }