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) bottom no-repeat;
   9   -moz-context-properties: fill;
  10   fill: var(--toolbarbutton-icon-fill-attention);
  11   background-size: 18px;
  12   margin-top: 18px;
  13   /* From javascript side we use animation delay from 0s to -100s to show
  14    * corresponding frames needed for progress.
  15    * animation-delay is set to a positive value to make nothing shown.
  16    */
  17   animation-play-state: paused;
  18   animation-delay: 1s;
  19   animation-duration: 100s;
  20   animation-timing-function: linear;
  21   animation-name: indicatorArrowProgress;
  22 }
  23 /*
  24 toolbar[brighttext] #downloads-indicator-progress-icon {
  25   animation-name: indicatorArrowProgressDark;
  26 }
  27 */
  28 @keyframes indicatorArrowProgress {
  29   0% {
  30     margin-top: 12px;
  31     filter: brightness(1.2);
  32   }
  33   100% {
  34     margin-top: 2px;
  35     filter: brightness(1);
  36   }
  37 }
  38 /*
  39 @keyframes indicatorArrowProgressDark {
  40   0% {
  41     margin-top: 12px;
  42     filter: brightness(0.7);
  43   }
  44   100% {
  45     margin-top: 2px;
  46     filter: brightness(1);
  47   }
  48 }
  49 */
  50 #downloads-button[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-icon {
  51   animation-name: downloadsIndicatorStartJump;
  52   /* Upon changing the overall duration below, please keep the delay time of
  53      setTimeout() identical in indicator.js for this animation. */
  54   animation-duration: 0.5s;
  55   animation-delay: 1s;
  56   animation-iteration-count: 2;
  57 }
  58
  59 @keyframes downloadsIndicatorStartJump {
  60   0% {
  61     transform: translateY(0);
  62     animation-timing-function: ease-out;
  63   }
  64   50% {
  65     transform: translateY(-3px);
  66     animation-timing-function: ease-in;
  67   }
  68   100% {
  69     transform: translateY(0);
  70   }
  71 }
  72 /* === END indicator.inc.css === */
  73
  74 /*** Status and progress indicator ***/
  75
  76 #downloads-animation-container {
  77   min-height: 1px;
  78   min-width: 1px;
  79   height: 1px;
  80   margin-bottom: -1px;
  81   /* Makes the outermost animation container element positioned, so that its
  82      contents are rendered over the main browser window in the Z order.
  83      This is required by the animated event notification. */
  84   position: relative;
  85   /* The selected tab may overlap #downloads-indicator-notification */
  86   z-index: 5;
  87 }
  88
  89 /*** Main indicator icon ***/
  90
  91 #downloads-button {
  92   --downloads-indicator-image: url("chrome://browser/skin/download.svg");
  93 }
  94
  95 #downloads-indicator-icon {
  96   background: var(--downloads-indicator-image) center no-repeat;
  97   -moz-context-properties: fill;
  98   fill: var(--toolbarbutton-icon-fill);
  99   width: 18px;
 100   height: 18px;
 101   background-size: 18px;
 102 }
 103
 104 #downloads-button:hover > #downloads-indicator-anchor > #downloads-indicator-icon,
 105 #downloads-button[open="true"] > #downloads-indicator-anchor > #downloads-indicator-icon,
 106 #downloads-button[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-icon {
 107   fill: var(--toolbarbutton-icon-fill-inverted);
 108   color: #000000;
 109 }
 110
 111 toolbar[brighttext] #downloads-button:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon {
 112 /*  fill: var(--toolbarbutton-icon-fill-inverted);*/
 113 }
 114
 115 #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
 116 #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
 117   display: -moz-box;
 118   height: 8px;
 119   width: 8px;
 120   min-width: 0;
 121   border-radius: 50%;
 122   /* "!important" is necessary to override the rule in toolbarbutton.css */
 123   margin-top: -1px !important;
 124   margin-right: -2px !important;
 125 }
 126
 127 #downloads-button[cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
 128   height: 7px;
 129   width: 7px;
 130 }
 131
 132 #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
 133   background: #FF0000;
 134 }
 135
 136 #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
 137   background: #FFCF00;
 138 }
 139
 140 #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive,
 141 #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive {
 142   filter: none;
 143 }
 144
 145 #downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon {
 146   fill: var(--toolbarbutton-icon-fill-attention);
 147 }
 148
 149 #downloads-button[cui-areatype="menu-panel"][attention="success"] {
 150   list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png");
 151   -moz-image-region: auto;
 152 }
 153
 154 /*** Download notifications ***/
 155
 156 #downloads-indicator-notification {
 157   opacity: 0;
 158   background-size: 16px;
 159   background-position: center;
 160   background-repeat: no-repeat;
 161   width: 16px;
 162   height: 16px;
 163 }
 164
 165 @keyframes downloadsIndicatorNotificationStartRight {
 166   from { opacity: 0; transform: translate(-128px, 128px) scale(8); }
 167   20%  { opacity: .85; animation-timing-function: ease-out; }
 168   to   { opacity: 0; transform: translate(0) scale(1); }
 169 }
 170
 171 @keyframes downloadsIndicatorNotificationStartLeft {
 172   from { opacity: 0; transform: translate(128px, 128px) scale(8); }
 173   20%  { opacity: .85; animation-timing-function: ease-out; }
 174   to   { opacity: 0; transform: translate(0) scale(1); }
 175 }
 176
 177 #downloads-notification-anchor[notification="start"] > #downloads-indicator-notification {
 178   background-image: url("chrome://browser/skin/downloads/download-notification-start.png");
 179   animation-name: downloadsIndicatorNotificationStartRight;
 180   animation-duration: 1s;
 181 }
 182
 183 #downloads-notification-anchor[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-notification {
 184   animation-name: downloadsIndicatorNotificationStartLeft;
 185 }
 186
 187 @keyframes downloadsIndicatorNotificationFinish {
 188   from { opacity: 0; transform: scale(1); }
 189   20%  { opacity: .65; animation-timing-function: ease-in; }
 190   to   { opacity: 0; transform: scale(8); }
 191 }
 192
 193 #downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification {
 194   background-image: url("chrome://browser/skin/downloads/download-notification-finish.png");
 195   animation-name: downloadsIndicatorNotificationFinish;
 196   animation-duration: 1s;
 197 }
 198
 199 toolbar[mode="full"] > #downloads-button > .toolbarbutton-text {
 200   margin: 0;
 201   text-align: center;
 202 }