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/ToolbarFx.png"),
  24                               0, 198, 18, 180) 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/ToolbarFx.png"),
  33                               18, 198, 36, 180) 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 #downloads-button[cui-areatype="menu-panel"][attention] {
  47   list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png");
  48   -moz-image-region: auto;
  49 }
  50
  51 /* In the next few rules, we use :not([counter]) as a shortcut that is
  52    equivalent to -moz-any([progress], [paused]). */
  53
  54 #downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
  55   background: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"),
  56                               0, 198, 18, 180) center no-repeat;
  57   background-size: 12px;
  58 }
  59
  60 #downloads-button:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
  61   background-image: url("chrome://browser/skin/downloads/download-glow.png");
  62 }
  63
  64 #downloads-button:not([counter]):hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
  65 #downloads-button[open="true"]:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
  66 #downloads-button:not([counter])[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
  67   background: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"),
  68                               18, 198, 36, 180) center no-repeat;
  69   background-size: 12px;
  70 }
  71
  72 /*** Download notifications ***/
  73
  74 #downloads-indicator-notification {
  75   opacity: 0;
  76   background-size: 16px;
  77   background-position: center;
  78   background-repeat: no-repeat;
  79   width: 16px;
  80   height: 16px;
  81 }
  82
  83 @keyframes downloadsIndicatorNotificationStartRight {
  84   from { opacity: 0; transform: translate(-128px, 128px) scale(8); }
  85   20%  { opacity: .85; animation-timing-function: ease-out; }
  86   to   { opacity: 0; transform: translate(0) scale(1); }
  87 }
  88
  89 @keyframes downloadsIndicatorNotificationStartLeft {
  90   from { opacity: 0; transform: translate(128px, 128px) scale(8); }
  91   20%  { opacity: .85; animation-timing-function: ease-out; }
  92   to   { opacity: 0; transform: translate(0) scale(1); }
  93 }
  94
  95 #downloads-notification-anchor[notification="start"] > #downloads-indicator-notification {
  96   background-image: url("chrome://browser/skin/downloads/download-notification-start.png");
  97   animation-name: downloadsIndicatorNotificationStartRight;
  98   animation-duration: 1s;
  99 }
 100
 101 #downloads-notification-anchor[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-notification {
 102   animation-name: downloadsIndicatorNotificationStartLeft;
 103 }
 104
 105 @keyframes downloadsIndicatorNotificationFinish {
 106   from { opacity: 0; transform: scale(1); }
 107   20%  { opacity: .65; animation-timing-function: ease-in; }
 108   to   { opacity: 0; transform: scale(8); }
 109 }
 110
 111 #downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification {
 112   background-image: url("chrome://browser/skin/downloads/download-notification-finish.png");
 113   animation-name: downloadsIndicatorNotificationFinish;
 114   animation-duration: 1s;
 115 }
 116
 117 /*** Progress bar and text ***/
 118
 119 #downloads-indicator-counter {
 120   height: 9px;
 121   margin: -3px 0 0;
 122   color: #FFCF00;
 123   font-size: 9px;
 124   line-height: 9px;
 125   text-align: center;
 126 }
 127
 128 #downloads-indicator-counter:-moz-lwtheme-brighttext {
 129 /*  color: white;
 130   text-shadow: 0 0 1px rgba(0,0,0,.7),
 131                0 1px 1.5px rgba(0,0,0,.5);*/
 132 }
 133
 134 #downloads-button[counter]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
 135 #downloads-button[counter][open="true"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
 136   color: #000000;
 137 }
 138
 139 #downloads-indicator-progress {
 140   width: 16px;
 141   height: 5px;
 142   min-width: 0;
 143   min-height: 0;
 144   margin-top: 1px;
 145   margin-bottom: 2px;
 146   border-radius: 2px;
 147   background-color: #795900;
 148 }
 149
 150 #downloads-indicator-progress > .progress-bar {
 151   -moz-appearance: none;
 152   min-width: 0;
 153   min-height: 0;
 154   background-color: #008484;
 155   border-radius: 2px 0 0 2px;
 156 }
 157
 158 #downloads-indicator-progress > .progress-remainder {
 159   min-width: 0;
 160   min-height: 0;
 161   background-color: #A09090;
 162   border-radius: 0 2px 2px 0;
 163 }
 164
 165 #downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
 166   background-color: #8050B0;
 167 }
 168
 169 #downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
 170   background-color: #404048;
 171 }
 172
 173 toolbar[mode="full"] > #downloads-button > .toolbarbutton-text {
 174   margin: 0;
 175   text-align: center;
 176 }