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   height: 32px;
  84   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"][exists]:hover { */
 148 #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"]:hover {
 149   border-radius: 3px;
 150   background-color: #794900;
 151   color: #FFCF00;
 152   cursor: pointer;
 153 }
 154
 155 /*** Button icons ***/
 156
 157 .downloadButton.downloadCancel {
 158   -moz-image-region: rect(0px, 16px, 16px, 0px);
 159 }
 160 richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel,
 161 richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:hover,
 162 richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:active {
 163   -moz-image-region: rect(0px, 32px, 16px, 16px);
 164 }
 165
 166 .downloadButton.downloadShow {
 167   -moz-image-region: rect(16px, 16px, 32px, 0px);
 168 }
 169 richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow,
 170 richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow:hover,
 171 richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow:active {
 172   -moz-image-region: rect(16px, 32px, 32px, 16px);
 173 }
 174
 175 .downloadButton.downloadRetry {
 176   -moz-image-region: rect(32px, 16px, 48px, 0px);
 177 }
 178 richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry,
 179 richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:hover,
 180 richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:active {
 181   -moz-image-region: rect(32px, 32px, 48px, 16px);
 182 }
 183
 184 /*** Status and progress indicator ***/
 185
 186 #downloads-indicator-anchor {
 187   /* Makes the outermost stack element positioned, so that its contents are
 188      rendered over the main browser window in the Z order.  This is required by
 189      the animated event notification. */
 190   position: relative;
 191 }
 192
 193 /*** Main indicator icon ***/
 194
 195 #downloads-indicator-icon {
 196   background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"),
 197                               0, 108, 18, 90) center no-repeat;
 198   min-width: 18px;
 199   min-height: 18px;
 200 }
 201
 202 #downloads-indicator:hover > #downloads-indicator-anchor > #downloads-indicator-icon,
 203 #downloads-indicator[open="true"] > #downloads-indicator-anchor > #downloads-indicator-icon,
 204 #downloads-indicator[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-icon {
 205   background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"),
 206                               18, 108, 36, 90) center no-repeat;
 207   color: #000000;
 208 }
 209
 210 #downloads-indicator-icon:-moz-lwtheme-brighttext {
 211 /*  background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"),
 212                               0, 108, 18, 90) center no-repeat;*/
 213 }
 214
 215 #downloads-indicator[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
 216   background-image: url("chrome://browser/skin/downloads/download-glow.png");
 217 }
 218
 219 /* In the next few rules, we use :not([counter]) as a shortcut that is
 220    equivalent to -moz-any([progress], [paused]). */
 221
 222 #downloads-indicator:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
 223   background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"),
 224                               0, 108, 18, 90) center no-repeat;
 225   background-size: 12px;
 226 }
 227
 228 #downloads-indicator:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
 229   background-image: url("chrome://browser/skin/downloads/download-glow.png");
 230 }
 231
 232 #downloads-indicator:not([counter]):hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
 233 #downloads-indicator[open="true"]:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
 234 #downloads-indicator:not([counter])[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
 235   background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"),
 236                               18, 108, 36, 90) center no-repeat;
 237   background-size: 12px;
 238 }
 239
 240 /*** Download notifications ***/
 241
 242 #downloads-indicator-notification {
 243   opacity: 0;
 244   background-size: 16px;
 245   background-position: center;
 246   background-repeat: no-repeat;
 247 }
 248
 249 @keyframes downloadsIndicatorNotificationStartRight {
 250   from { opacity: 0; transform: translate(-128px, 128px) scale(8); }
 251   20%  { opacity: .85; animation-timing-function: ease-out; }
 252   to   { opacity: 0; transform: translate(0) scale(1); }
 253 }
 254
 255 @keyframes downloadsIndicatorNotificationStartLeft {
 256   from { opacity: 0; transform: translate(128px, 128px) scale(8); }
 257   20%  { opacity: .85; animation-timing-function: ease-out; }
 258   to   { opacity: 0; transform: translate(0) scale(1); }
 259 }
 260
 261 #downloads-indicator[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-notification {
 262   background-image: url("chrome://browser/skin/downloads/download-notification-start.png");
 263   animation-name: downloadsIndicatorNotificationStartRight;
 264   animation-duration: 1s;
 265 }
 266
 267 #downloads-indicator[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification {
 268   animation-name: downloadsIndicatorNotificationStartLeft;
 269 }
 270
 271 @keyframes downloadsIndicatorNotificationFinish {
 272   from { opacity: 0; transform: scale(1); }
 273   20%  { opacity: .65; animation-timing-function: ease-in; }
 274   to   { opacity: 0; transform: scale(8); }
 275 }
 276
 277 #downloads-indicator[notification="finish"] > #downloads-indicator-anchor > #downloads-indicator-notification {
 278   background-image: url("chrome://browser/skin/downloads/download-notification-finish.png");
 279   animation-name: downloadsIndicatorNotificationFinish;
 280   animation-duration: 1s;
 281 }
 282
 283 /*** Progress bar and text ***/
 284
 285 #downloads-indicator-counter {
 286   height: 9px;
 287   margin: -3px 0 0;
 288   color: #FFCF00;
 289   font-size: 9px;
 290   line-height: 9px;
 291   text-align: center;
 292 }
 293
 294 #downloads-indicator-counter:-moz-lwtheme-brighttext {
 295 /*  color: white;
 296   text-shadow: 0 0 1px rgba(0,0,0,.7),
 297                0 1px 1.5px rgba(0,0,0,.5);*/
 298 }
 299
 300 #downloads-indicator[counter]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
 301 #downloads-indicator[counter][open="true"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
 302   color: #000000;
 303 }
 304
 305 #downloads-indicator-progress {
 306   width: 16px;
 307   height: 5px;
 308   min-width: 0;
 309   min-height: 0;
 310   margin-top: 1px;
 311   margin-bottom: 2px;
 312   border-radius: 2px;
 313   background-color: #795900;
 314 }
 315
 316 #downloads-indicator-progress > .progress-bar {
 317   -moz-appearance: none;
 318   min-width: 0;
 319   min-height: 0;
 320   background-color: #008484;
 321   border-radius: 2px 0 0 2px;
 322 }
 323
 324 #downloads-indicator-progress > .progress-remainder {
 325   min-width: 0;
 326   min-height: 0;
 327   background-color: #A09090;
 328   border-radius: 0 2px 2px 0;
 329 }
 330
 331 #downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
 332   background-color: #8050B0;
 333 }
 334
 335 #downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
 336   background-color: #404048;
 337 }
 338
 339 toolbar[mode="full"] > #downloads-indicator > .toolbarbutton-text {
 340   margin: 0;
 341   text-align: center;
 342 }