LCARStrek/browser/downloads/downloads.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 file,
   3  * You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 /*** Panel and outer controls ***/
   6
   7 #downloadsHistory,
   8 #downloadsHistory:-moz-focusring > .button-box {
   9   border-bottom-left-radius: 6px;
  10   border-bottom-right-radius: 6px;
  11 }
  12
  13 #downloadsPanel:not([hasdownloads]) > #downloadsHistory,
  14 #downloadsPanel:not([hasdownloads]) > #downloadsHistory:-moz-focusring > .button-box  {
  15   border-top-left-radius: 6px;
  16   border-top-right-radius: 6px;
  17 }
  18
  19 #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent {
  20   /* Avoid that the arrow overlaps the selection on first item */
  21   padding-top: 5px;
  22 }
  23
  24 #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent {
  25   padding: 0;
  26 }
  27
  28 #downloadsListBox {
  29   background-color: transparent;
  30   padding: 4px;
  31   color: inherit;
  32 }
  33
  34 #downloadsHistory {
  35   background: transparent;
  36   color: #9C9CFF;
  37   cursor: pointer;
  38 }
  39
  40 #downloadsHistory > .button-box {
  41   margin: 1em;
  42 }
  43
  44 /*** List items ***/
  45
  46 richlistitem[type="download"] {
  47   height: 7em;
  48   margin: 0;
  49   border-bottom: 1px dotted #9C9CFF;
  50   background: transparent;
  51   padding: 0;
  52   color: inherit;
  53 }
  54
  55 richlistitem[type="download"]:first-child {
  56 /*  border-top: 1px solid transparent;*/
  57 }
  58
  59 #downloadsListBox:-moz-focusring > richlistitem[type="download"][selected] {
  60   outline: 1px #008484 dotted;
  61   outline-offset: -1px;
  62   -moz-outline-radius: 3px;
  63 }
  64
  65 .downloadInfo {
  66   padding: 8px;
  67   -moz-padding-end: 0;
  68 }
  69
  70 .downloadTypeIcon {
  71   -moz-margin-end: 8px;
  72   /* Prevent flickering when changing states. */
  73   min-height: 32px;
  74   min-width: 32px;
  75 }
  76
  77 .blockedIcon {
  78   list-style-image: url("chrome://global/skin/icons/alert-error.gif");
  79 }
  80
  81 .downloadTarget {
  82   margin-bottom: 6px;
  83   cursor: inherit;
  84 }
  85
  86 .downloadDetails {
  87   opacity: 0.6;
  88   font-size: 90%;
  89   cursor: inherit;
  90 }
  91
  92 .downloadButton {
  93   -moz-appearance: none;
  94   min-width: 0;
  95   min-height: 0;
  96   margin: 6px;
  97   border: none;
  98   background: transparent;
  99   padding: 5px;
 100   list-style-image: url("chrome://browser/skin/downloads/buttons.png");
 101 }
 102
 103 .downloadButton > .button-box {
 104   padding: 0;
 105 }
 106
 107 /*** Highlighted list items ***/
 108
 109 richlistitem[type="download"][state="1"] > .downloadInfo {
 110   -moz-padding-end: 8px;
 111 }
 112
 113 richlistitem[type="download"][state="1"] > .downloadInfo:hover {
 114   background-color: #794900;
 115   color: #FFCF00;
 116   cursor: pointer;
 117 }
 118
 119 /*** Button icons ***/
 120
 121 .downloadButton.downloadCancel {
 122   -moz-image-region: rect(0px, 14px, 14px, 0px);
 123 }
 124 .downloadButton.downloadCancel:hover,
 125 .downloadButton.downloadCancel:active {
 126   -moz-image-region: rect(0px, 28px, 14px, 14px);
 127 }
 128
 129 .downloadButton.downloadShow {
 130   -moz-image-region: rect(14px, 14px, 28px, 0px);
 131 }
 132 .downloadButton.downloadShow:hover,
 133 .downloadButton.downloadShow:active {
 134   -moz-image-region: rect(14px, 28px, 28px, 14px);
 135 }
 136
 137 .downloadButton.downloadRetry {
 138   -moz-image-region: rect(28px, 14px, 42px, 0px);
 139 }
 140 .downloadButton.downloadRetry:hover,
 141 .downloadButton.downloadRetry:active {
 142   -moz-image-region: rect(28px, 28px, 42px, 14px);
 143 }
 144
 145 /*** Status and progress indicator ***/
 146
 147 #downloads-indicator {
 148   width: 35px;
 149 }
 150
 151 #downloads-indicator-anchor {
 152   min-width: 18px;
 153   min-height: 18px;
 154   /* Makes the outermost stack element positioned, so that its contents are
 155      rendered over the main browser window in the Z order.  This is required by
 156      the animated event notification. */
 157   position: relative;
 158 }
 159
 160 /*** Main indicator icon ***/
 161
 162 #downloads-indicator-icon {
 163   background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
 164                               0, 108, 18, 90) center no-repeat;
 165 }
 166
 167 #downloads-indicator:hover > #downloads-indicator-anchor > #downloads-indicator-icon,
 168 #downloads-indicator[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-icon {
 169   background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
 170                               18, 108, 36, 90) center no-repeat;
 171 }
 172
 173 #downloads-indicator[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
 174   background: -moz-image-rect(url("chrome://browser/skin/downloads/download-glow.png"),
 175                               15, 33, 33, 15) center no-repeat;
 176 }
 177
 178 #downloads-indicator:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
 179   background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
 180                               0, 108, 18, 90) center no-repeat;
 181   background-size: 12px;
 182 }
 183
 184 #downloads-indicator:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
 185   background-image: -moz-image-rect(url("chrome://browser/skin/downloads/download-glow.png"),
 186                                     16, 32, 32, 16);
 187 }
 188
 189 #downloads-indicator:not([counter]):hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
 190 #downloads-indicator:not([counter])[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
 191   background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
 192                               18, 108, 36, 90) center no-repeat;
 193 }
 194
 195 /*** Event notification ***/
 196
 197 #downloads-indicator-notification {
 198   opacity: 0;
 199   background: url("chrome://browser/skin/downloads/download-notification.png")
 200               center no-repeat;
 201   background-size: 16px;
 202 }
 203
 204 @keyframes downloadsIndicatorNotificationRight {
 205   from { opacity: 0; transform: translate(-128px, 128px) scale(8); }
 206   20%  { opacity: .85; animation-timing-function: ease-out; }
 207   to   { opacity: 0; transform: translate(0) scale(1); }
 208 }
 209
 210 @keyframes downloadsIndicatorNotificationLeft {
 211   from { opacity: 0; transform: translate(128px, 128px) scale(8); }
 212   20%  { opacity: .85; animation-timing-function: ease-out; }
 213   to   { opacity: 0; transform: translate(0) scale(1); }
 214 }
 215
 216 #downloads-indicator[notification] > #downloads-indicator-anchor > #downloads-indicator-notification {
 217   animation-name: downloadsIndicatorNotificationRight;
 218   animation-duration: 1s;
 219 }
 220
 221 #downloads-indicator[notification]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification {
 222   animation-name: downloadsIndicatorNotificationLeft;
 223 }
 224
 225 /*** Progress bar and text ***/
 226
 227 #downloads-indicator-counter {
 228   height: 12px;
 229   margin: 0;
 230   color: #FFCF00;
 231   font-size: 10px;
 232   line-height: 10px;
 233   text-align: center;
 234 }
 235
 236 #downloads-indicator-progress {
 237   width: 24px;
 238   height: 4px;
 239   min-width: 0;
 240   min-height: 0;
 241   margin-top: 1px;
 242   margin-bottom: 2px;
 243   border-radius: 2px;
 244   border: 1px solid #FFCF00;
 245 }
 246
 247 #downloads-indicator-progress > .progress-bar {
 248   -moz-appearance: none;
 249   min-width: 0;
 250   min-height: 0;
 251   background-color: #008484;
 252   border-radius: 2px 0 0 2px;
 253 }
 254
 255 #downloads-indicator-progress > .progress-remainder {
 256   min-width: 0;
 257   min-height: 0;
 258   background-color: #000000;
 259   border-radius: 0 2px 2px 0;
 260 }
 261
 262 #downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
 263   background-color: #8050B0;
 264 }
 265
 266 #downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
 267   background-color: #000000;
 268 }