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