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"]: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/FxToolbar.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/FxToolbar.png"),
 205                               18, 108, 36, 90) center no-repeat;
 206   color: #000000;
 207 }
 208
 209 #downloads-indicator-icon:-moz-lwtheme-brighttext {
 210 /*  background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"),
 211                               0, 108, 18, 90) center no-repeat;*/
 212 }
 213
 214 #downloads-indicator[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
 215   background-image: url("chrome://browser/skin/downloads/download-glow.png");
 216 }
 217
 218 /* In the next few rules, we use :not([counter]) as a shortcut that is
 219    equivalent to -moz-any([progress], [paused]). */
 220
 221 #downloads-indicator:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
 222   background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"),
 223                               0, 108, 18, 90) center no-repeat;
 224   background-size: 12px;
 225 }
 226
 227 #downloads-indicator:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
 228   background-image: url("chrome://browser/skin/downloads/download-glow.png");
 229 }
 230
 231 #downloads-indicator:not([counter]):hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
 232 #downloads-indicator[open="true"]:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
 233 #downloads-indicator:not([counter])[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
 234   background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"),
 235                               18, 108, 36, 90) center no-repeat;
 236   background-size: 12px;
 237 }
 238
 239 /*** Download notifications ***/
 240
 241 #downloads-indicator-notification {
 242   opacity: 0;
 243   background-size: 16px;
 244   background-position: center;
 245   background-repeat: no-repeat;
 246 }
 247
 248 @keyframes downloadsIndicatorNotificationStartRight {
 249   from { opacity: 0; transform: translate(-128px, 128px) scale(8); }
 250   20%  { opacity: .85; animation-timing-function: ease-out; }
 251   to   { opacity: 0; transform: translate(0) scale(1); }
 252 }
 253
 254 @keyframes downloadsIndicatorNotificationStartLeft {
 255   from { opacity: 0; transform: translate(128px, 128px) scale(8); }
 256   20%  { opacity: .85; animation-timing-function: ease-out; }
 257   to   { opacity: 0; transform: translate(0) scale(1); }
 258 }
 259
 260 #downloads-indicator[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-notification {
 261   background-image: url("chrome://browser/skin/downloads/download-notification-start.png");
 262   animation-name: downloadsIndicatorNotificationStartRight;
 263   animation-duration: 1s;
 264 }
 265
 266 #downloads-indicator[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification {
 267   animation-name: downloadsIndicatorNotificationStartLeft;
 268 }
 269
 270 @keyframes downloadsIndicatorNotificationFinish {
 271   from { opacity: 0; transform: scale(1); }
 272   20%  { opacity: .65; animation-timing-function: ease-in; }
 273   to   { opacity: 0; transform: scale(8); }
 274 }
 275
 276 #downloads-indicator[notification="finish"] > #downloads-indicator-anchor > #downloads-indicator-notification {
 277   background-image: url("chrome://browser/skin/downloads/download-notification-finish.png");
 278   animation-name: downloadsIndicatorNotificationFinish;
 279   animation-duration: 1s;
 280 }
 281
 282 /*** Progress bar and text ***/
 283
 284 #downloads-indicator-counter {
 285   height: 9px;
 286   margin: -3px 0 0;
 287   color: #FFCF00;
 288   font-size: 9px;
 289   line-height: 9px;
 290   text-align: center;
 291 }
 292
 293 #downloads-indicator-counter:-moz-lwtheme-brighttext {
 294 /*  color: white;
 295   text-shadow: 0 0 1px rgba(0,0,0,.7),
 296                0 1px 1.5px rgba(0,0,0,.5);*/
 297 }
 298
 299 #downloads-indicator[counter]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
 300 #downloads-indicator[counter][open="true"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
 301   color: #000000;
 302 }
 303
 304 #downloads-indicator-progress {
 305   width: 16px;
 306   height: 5px;
 307   min-width: 0;
 308   min-height: 0;
 309   margin-top: 1px;
 310   margin-bottom: 2px;
 311   border-radius: 2px;
 312   background-color: #795900;
 313 }
 314
 315 #downloads-indicator-progress > .progress-bar {
 316   -moz-appearance: none;
 317   min-width: 0;
 318   min-height: 0;
 319   background-color: #008484;
 320   border-radius: 2px 0 0 2px;
 321 }
 322
 323 #downloads-indicator-progress > .progress-remainder {
 324   min-width: 0;
 325   min-height: 0;
 326   background-color: #A09090;
 327   border-radius: 0 2px 2px 0;
 328 }
 329
 330 #downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
 331   background-color: #8050B0;
 332 }
 333
 334 #downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
 335   background-color: #404048;
 336 }
 337
 338 toolbar[mode="full"] > #downloads-indicator > .toolbarbutton-text {
 339   margin: 0;
 340   text-align: center;
 341 }