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