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 /* === BEGIN indicator.inc.css === */
   6
   7 #downloads-indicator-progress-icon {
   8   background: var(--downloads-indicator-image-attention) bottom no-repeat;
   9   background-size: 18px;
  10   margin-top: 18px;
  11   /* From javascript side we use animation delay from 0s to -100s to show
  12    * corresponding frames needed for progress.
  13    * animation-delay is set to a positive value to make nothing shown.
  14    */
  15   animation-play-state: paused;
  16   animation-delay: 1s;
  17   animation-duration: 100s;
  18   animation-timing-function: linear;
  19   animation-name: indicatorArrowProgress;
  20 }
  21 /*
  22 toolbar[brighttext] #downloads-indicator-progress-icon {
  23   background-image: var(--downloads-indicator-image-attention-inverted);
  24   animation-name: indicatorArrowProgressDark;
  25 }
  26 */
  27 @keyframes indicatorArrowProgress {
  28   0% {
  29     margin-top: 12px;
  30     filter: brightness(1.2);
  31   }
  32   100% {
  33     margin-top: 2px;
  34     filter: brightness(1);
  35   }
  36 }
  37 /*
  38 @keyframes indicatorArrowProgressDark {
  39   0% {
  40     margin-top: 12px;
  41     filter: brightness(0.7);
  42   }
  43   100% {
  44     margin-top: 2px;
  45     filter: brightness(1);
  46   }
  47 }
  48 */
  49 #downloads-button[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-icon {
  50   animation-name: downloadsIndicatorStartJump;
  51   /* Upon changing the overall duration below, please keep the delay time of
  52      setTimeout() identical in indicator.js for this animation. */
  53   animation-duration: 0.5s;
  54   animation-delay: 1s;
  55   animation-iteration-count: 2;
  56 }
  57
  58 @keyframes downloadsIndicatorStartJump {
  59   0% {
  60     transform: translateY(0);
  61     animation-timing-function: ease-out;
  62   }
  63   50% {
  64     transform: translateY(-3px);
  65     animation-timing-function: ease-in;
  66   }
  67   100% {
  68     transform: translateY(0);
  69   }
  70 }
  71 /* === END indicator.inc.css === */
  72
  73 /*** Status and progress indicator ***/
  74
  75 #downloads-animation-container {
  76   min-height: 1px;
  77   min-width: 1px;
  78   height: 1px;
  79   margin-bottom: -1px;
  80   /* Makes the outermost animation container element positioned, so that its
  81      contents are rendered over the main browser window in the Z order.
  82      This is required by the animated event notification. */
  83   position: relative;
  84   /* The selected tab may overlap #downloads-indicator-notification */
  85   z-index: 5;
  86 }
  87
  88 /*** Main indicator icon ***/
  89
  90 /*@media not all and (min-resolution: 1.1dppx) {*/
  91   #downloads-button {
  92     --downloads-indicator-image: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"), 0, 198, 18, 180);
  93     --downloads-indicator-image-hover: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"), 18, 198, 36, 180);
  94     --downloads-indicator-image-attention: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"), 36, 198, 54, 180);
  95 /*    --downloads-indicator-image-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 198, 18, 180);
  96     --downloads-indicator-image-attention-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 18, 198, 36, 180);*/
  97   }
  98 /*}*/
  99
 100
 101 #downloads-indicator-icon {
 102   background: var(--downloads-indicator-image) center no-repeat;
 103   width: 18px;
 104   height: 18px;
 105   background-size: 18px;
 106 }
 107
 108 #downloads-button:hover > #downloads-indicator-anchor > #downloads-indicator-icon,
 109 #downloads-button[open="true"] > #downloads-indicator-anchor > #downloads-indicator-icon,
 110 #downloads-button[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-icon {
 111   background-image: var(--downloads-indicator-image-hover);
 112   color: #000000;
 113 }
 114
 115 toolbar[brighttext] #downloads-button:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon {
 116 /*  background-image: var(--downloads-indicator-image-inverted); */
 117 }
 118
 119 #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
 120 #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
 121   display: -moz-box;
 122   height: 8px;
 123   width: 8px;
 124   min-width: 0;
 125   border-radius: 50%;
 126   /* "!important" is necessary to override the rule in toolbarbutton.css */
 127   margin-top: -1px !important;
 128   margin-right: -2px !important;
 129 }
 130
 131 #downloads-button[cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
 132   height: 7px;
 133   width: 7px;
 134 }
 135
 136 #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
 137   background: #FF0000;
 138 }
 139
 140 #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
 141   background: #FFCF00;
 142 }
 143
 144 #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive,
 145 #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive {
 146   filter: none;
 147 }
 148
 149 #downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon {
 150   background-image: var(--downloads-indicator-image-attention);
 151 }
 152
 153 #downloads-button[cui-areatype="menu-panel"][attention="success"] {
 154   list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png");
 155   -moz-image-region: auto;
 156 }
 157
 158 /* In the next few rules, we use :not([counter]) as a shortcut that is
 159    equivalent to -moz-any([progress], [paused]). */
 160
 161 #downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
 162   background: var(--downloads-indicator-image) center no-repeat;
 163   background-size: 12px;
 164 }
 165
 166 #downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
 167   background-image: var(--downloads-indicator-image-attention);
 168 }
 169
 170 #downloads-button:not([counter]):hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
 171 #downloads-button[open="true"]:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
 172 #downloads-button:not([counter])[attention="success"]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
 173   background-image: var(--downloads-indicator-image-hover);
 174   background-size: 12px;
 175 }
 176
 177 /*** Download notifications ***/
 178
 179 #downloads-indicator-notification {
 180   opacity: 0;
 181   background-size: 16px;
 182   background-position: center;
 183   background-repeat: no-repeat;
 184   width: 16px;
 185   height: 16px;
 186 }
 187
 188 @keyframes downloadsIndicatorNotificationStartRight {
 189   from { opacity: 0; transform: translate(-128px, 128px) scale(8); }
 190   20%  { opacity: .85; animation-timing-function: ease-out; }
 191   to   { opacity: 0; transform: translate(0) scale(1); }
 192 }
 193
 194 @keyframes downloadsIndicatorNotificationStartLeft {
 195   from { opacity: 0; transform: translate(128px, 128px) scale(8); }
 196   20%  { opacity: .85; animation-timing-function: ease-out; }
 197   to   { opacity: 0; transform: translate(0) scale(1); }
 198 }
 199
 200 #downloads-notification-anchor[notification="start"] > #downloads-indicator-notification {
 201   background-image: url("chrome://browser/skin/downloads/download-notification-start.png");
 202   animation-name: downloadsIndicatorNotificationStartRight;
 203   animation-duration: 1s;
 204 }
 205
 206 #downloads-notification-anchor[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-notification {
 207   animation-name: downloadsIndicatorNotificationStartLeft;
 208 }
 209
 210 @keyframes downloadsIndicatorNotificationFinish {
 211   from { opacity: 0; transform: scale(1); }
 212   20%  { opacity: .65; animation-timing-function: ease-in; }
 213   to   { opacity: 0; transform: scale(8); }
 214 }
 215
 216 #downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification {
 217   background-image: url("chrome://browser/skin/downloads/download-notification-finish.png");
 218   animation-name: downloadsIndicatorNotificationFinish;
 219   animation-duration: 1s;
 220 }
 221
 222 /*** Progress bar and text ***/
 223
 224 #downloads-indicator-counter {
 225   height: 9px;
 226   margin: -3px 0 0;
 227   color: #FFCF00;
 228   font-size: 9px;
 229   line-height: 9px;
 230   text-align: center;
 231 }
 232
 233 toolbar[brighttext] #downloads-indicator-counter {
 234 /*  color: white;
 235   text-shadow: 0 0 1px rgba(0,0,0,.7),
 236                0 1px 1.5px rgba(0,0,0,.5);*/
 237 }
 238
 239 #downloads-button[counter]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
 240 #downloads-button[counter][open="true"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
 241   color: #000000;
 242 }
 243
 244 #downloads-indicator-progress {
 245   width: 16px;
 246   height: 5px;
 247   min-width: 0;
 248   min-height: 0;
 249   margin-top: 1px;
 250   margin-bottom: 2px;
 251   border-radius: 2px;
 252   background-color: #795900;
 253 }
 254
 255 #downloads-indicator-progress > .progress-bar {
 256   -moz-appearance: none;
 257   min-width: 0;
 258   min-height: 0;
 259   background-color: #008484;
 260   border-radius: 2px 0 0 2px;
 261 }
 262
 263 #downloads-indicator-progress > .progress-remainder {
 264   min-width: 0;
 265   min-height: 0;
 266   background-color: #A09090;
 267   border-radius: 0 2px 2px 0;
 268 }
 269
 270 #downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
 271   background-color: #8050B0;
 272 }
 273
 274 #downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
 275   background-color: #404048;
 276 }
 277
 278 toolbar[mode="full"] > #downloads-button > .toolbarbutton-text {
 279   margin: 0;
 280   text-align: center;
 281 }