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