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 #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent {
   8   padding: 0;
   9 }
  10
  11 #downloadsListBox {
  12   background-color: transparent;
  13   padding: 4px;
  14   color: inherit;
  15 }
  16
  17 #downloadsPanel:not([hasdownloads]) > #downloadsListBox {
  18   display: none;
  19 }
  20
  21 #downloadsHistory {
  22   cursor: pointer;
  23   margin: 4px !important;
  24 }
  25
  26 #downloadsPanel[keyfocus] > #downloadsFooter > #downloadsHistory:focus {
  27   outline: 1px #008484 dotted;
  28   outline-offset: -1px;
  29 }
  30
  31 #downloadsHistory > .button-box {
  32   border: none;
  33 }
  34
  35 /*** Downloads Summary and List items ***/
  36
  37 #downloadsSummary,
  38 richlistitem[type="download"] {
  39   height: 7em;
  40   -moz-padding-end: 0;
  41   color: inherit;
  42 }
  43
  44 #downloadsSummary {
  45   padding: 8px 38px 8px 12px;
  46   cursor: pointer;
  47   -moz-user-focus: normal;
  48 }
  49
  50 #downloadsPanel[keyfocus] > #downloadsFooter > #downloadsSummary:focus {
  51   outline: 1px #008484 dotted;
  52   outline-offset: -5px;
  53 }
  54
  55 #downloadsSummary > .downloadTypeIcon {
  56   list-style-image: url("chrome://browser/skin/downloads/download-summary.png");
  57 }
  58
  59 #downloadsSummaryDescription {
  60   color: #3333FF;
  61 }
  62
  63 richlistitem[type="download"] {
  64   margin: 0;
  65   border-bottom: 1px dotted #9C9CFF;
  66   background: transparent;
  67   padding: 8px;
  68 }
  69
  70 richlistitem[type="download"]:first-child {
  71 /*  border-top: 1px solid transparent;*/
  72 }
  73
  74 #downloadsListBox:-moz-focusring > richlistitem[type="download"][selected] {
  75   outline: 1px #008484 dotted;
  76   outline-offset: -1px;
  77   /*-moz-outline-radius: 3px;*/
  78 }
  79
  80 .downloadTypeIcon {
  81   -moz-margin-end: 8px;
  82   /* Prevent flickering when changing states. */
  83   min-height: 32px;
  84   min-width: 32px;
  85 }
  86
  87 .blockedIcon {
  88   list-style-image: url("chrome://global/skin/icons/alert-error.gif");
  89 }
  90
  91 /* We hold .downloadTarget, .downloadProgress and .downloadDetails inside of
  92    a vbox with class .downloadContainer. We set the font-size of the entire
  93    container to 90% because:
  94
  95    1) This is the size that we want .downloadDetails to be
  96    2) The container's width is set by localizers by &downloadDetails.width;,
  97       which is a ch unit. Since this is the value that should control the
  98       panel width, we apply it to the outer container to constrain
  99       .downloadTarget and .downloadProgress.
 100
 101    Finally, since we want .downloadTarget's font-size to be at 100% of the
 102    font-size of .downloadContainer's parent, we use calc to go from the
 103    smaller font-size back to the original font-size.
 104  */
 105 #downloadsSummaryDetails,
 106 .downloadContainer {
 107   font-size: 90%;
 108 }
 109
 110 #downloadsSummaryDescription,
 111 .downloadTarget {
 112   margin-bottom: 6px;
 113   cursor: inherit;
 114 }
 115
 116 .downloadTarget {
 117   font-size: calc(100%/0.9);
 118 }
 119
 120 #downloadsSummaryDetails,
 121 .downloadDetails {
 122   opacity: 0.6;
 123   cursor: inherit;
 124 }
 125
 126 .downloadButton {
 127   min-width: 0;
 128   min-height: 0;
 129   margin: 3px;
 130 /*  border: none; */
 131   background: transparent;
 132   padding: 5px;
 133   list-style-image: url("chrome://browser/skin/downloads/buttons.png");
 134 }
 135
 136 .downloadButton > .button-box {
 137   border: 1px solid transparent;
 138   padding: 0;
 139 }
 140
 141 #downloadsPanel[keyfocus] .downloadButton:focus > .button-box {
 142   border: 1px dotted #008484;
 143 }
 144
 145 /*** Highlighted list items ***/
 146
 147 #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover {
 148   border-radius: 3px;
 149   background-color: #794900;
 150   color: #FFCF00;
 151   cursor: pointer;
 152 }
 153
 154 /*** Button icons ***/
 155
 156 .downloadButton.downloadCancel {
 157   -moz-image-region: rect(0px, 16px, 16px, 0px);
 158 }
 159 richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel,
 160 richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:hover,
 161 richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:active {
 162   -moz-image-region: rect(0px, 32px, 16px, 16px);
 163 }
 164
 165 .downloadButton.downloadShow {
 166   -moz-image-region: rect(16px, 16px, 32px, 0px);
 167 }
 168 richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow,
 169 richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow:hover,
 170 richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow:active {
 171   -moz-image-region: rect(16px, 32px, 32px, 16px);
 172 }
 173
 174 .downloadButton.downloadRetry {
 175   -moz-image-region: rect(32px, 16px, 48px, 0px);
 176 }
 177 richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry,
 178 richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:hover,
 179 richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:active {
 180   -moz-image-region: rect(32px, 32px, 48px, 16px);
 181 }
 182
 183 /*** Status and progress indicator ***/
 184
 185 #downloads-indicator-anchor {
 186   /* Makes the outermost stack element positioned, so that its contents are
 187      rendered over the main browser window in the Z order.  This is required by
 188      the animated event notification. */
 189   position: relative;
 190 }
 191
 192 /*** Main indicator icon ***/
 193
 194 #downloads-indicator-icon {
 195   background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
 196                               0, 108, 18, 90) center no-repeat;
 197   min-width: 18px;
 198   min-height: 18px;
 199 }
 200
 201 #downloads-indicator:hover > #downloads-indicator-anchor > #downloads-indicator-icon,
 202 #downloads-indicator[open="true"] > #downloads-indicator-anchor > #downloads-indicator-icon,
 203 #downloads-indicator[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-icon {
 204   background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
 205                               18, 108, 36, 90) center no-repeat;
 206 }
 207
 208 #downloads-indicator-icon:-moz-lwtheme-brighttext {
 209 /*  background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"),
 210                               0, 108, 18, 90) center no-repeat;*/
 211 }
 212
 213 #downloads-indicator[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
 214   background-image: url("chrome://browser/skin/downloads/download-glow.png");
 215 }
 216
 217 /* In the next few rules, we use :not([counter]) as a shortcut that is
 218    equivalent to -moz-any([progress], [paused]). */
 219
 220 #downloads-indicator:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
 221   background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
 222                               0, 108, 18, 90) center no-repeat;
 223   background-size: 12px;
 224 }
 225
 226 #downloads-indicator:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
 227   background-image: url("chrome://browser/skin/downloads/download-glow.png");
 228 }
 229
 230 #downloads-indicator:not([counter]):hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
 231 #downloads-indicator:not([counter])[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
 232   background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
 233                               18, 108, 36, 90) center no-repeat;
 234 }
 235
 236 /*** Download notifications ***/
 237
 238 #downloads-indicator-notification {
 239   opacity: 0;
 240   background-size: 16px;
 241   background-position: center;
 242   background-repeat: no-repeat;
 243 }
 244
 245 @keyframes downloadsIndicatorNotificationStartRight {
 246   from { opacity: 0; transform: translate(-128px, 128px) scale(8); }
 247   20%  { opacity: .85; animation-timing-function: ease-out; }
 248   to   { opacity: 0; transform: translate(0) scale(1); }
 249 }
 250
 251 @keyframes downloadsIndicatorNotificationStartLeft {
 252   from { opacity: 0; transform: translate(128px, 128px) scale(8); }
 253   20%  { opacity: .85; animation-timing-function: ease-out; }
 254   to   { opacity: 0; transform: translate(0) scale(1); }
 255 }
 256
 257 #downloads-indicator[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-notification {
 258   background-image: url("chrome://browser/skin/downloads/download-notification-start.png");
 259   animation-name: downloadsIndicatorNotificationStartRight;
 260   animation-duration: 1s;
 261 }
 262
 263 #downloads-indicator[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification {
 264   animation-name: downloadsIndicatorNotificationStartLeft;
 265 }
 266
 267 @keyframes downloadsIndicatorNotificationFinish {
 268   from { opacity: 0; transform: scale(1); }
 269   20%  { opacity: .65; animation-timing-function: ease-in; }
 270   to   { opacity: 0; transform: scale(8); }
 271 }
 272
 273 #downloads-indicator[notification="finish"] > #downloads-indicator-anchor > #downloads-indicator-notification {
 274   background-image: url("chrome://browser/skin/downloads/download-notification-finish.png");
 275   animation-name: downloadsIndicatorNotificationFinish;
 276   animation-duration: 1s;
 277 }
 278
 279 /*** Progress bar and text ***/
 280
 281 #downloads-indicator-counter {
 282   height: 9px;
 283   margin: -3px 0 0;
 284   color: #FFCF00;
 285   font-size: 9px;
 286   line-height: 9px;
 287   text-align: center;
 288 }
 289
 290 #downloads-indicator-counter:-moz-lwtheme-brighttext {
 291 /*  color: white;
 292   text-shadow: 0 0 1px rgba(0,0,0,.7),
 293                0 1px 1.5px rgba(0,0,0,.5);*/
 294 }
 295
 296 #downloads-indicator-progress {
 297   width: 16px;
 298   height: 5px;
 299   min-width: 0;
 300   min-height: 0;
 301   margin-top: 1px;
 302   margin-bottom: 2px;
 303   border-radius: 2px;
 304   background-color: #795900;
 305 }
 306
 307 #downloads-indicator-progress > .progress-bar {
 308   -moz-appearance: none;
 309   min-width: 0;
 310   min-height: 0;
 311   background-color: #008484;
 312   border-radius: 2px 0 0 2px;
 313 }
 314
 315 #downloads-indicator-progress > .progress-remainder {
 316   min-width: 0;
 317   min-height: 0;
 318   background-color: #A09090;
 319   border-radius: 0 2px 2px 0;
 320 }
 321
 322 #downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
 323   background-color: #8050B0;
 324 }
 325
 326 #downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
 327   background-color: #404048;
 328 }