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[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-icon {
 168   background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
 169                               18, 108, 36, 90) center no-repeat;
 170 }
 171
 172 #downloads-indicator[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
 173   background-image: url("chrome://browser/skin/downloads/download-glow.png");
 174 }
 175
 176 #downloads-indicator:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
 177   background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
 178                               0, 108, 18, 90) center no-repeat;
 179   background-size: 12px;
 180 }
 181
 182 #downloads-indicator:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
 183   background-image: url("chrome://browser/skin/downloads/download-glow.png");
 184 }
 185
 186 #downloads-indicator:not([counter]):hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
 187 #downloads-indicator:not([counter])[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
 188   background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
 189                               18, 108, 36, 90) center no-repeat;
 190 }
 191
 192 /*** Event notification ***/
 193
 194 #downloads-indicator-notification {
 195   opacity: 0;
 196   background: url("chrome://browser/skin/downloads/download-notification.png")
 197               center no-repeat;
 198   background-size: 16px;
 199 }
 200
 201 @keyframes downloadsIndicatorNotificationRight {
 202   from { opacity: 0; transform: translate(-128px, 128px) scale(8); }
 203   20%  { opacity: .85; animation-timing-function: ease-out; }
 204   to   { opacity: 0; transform: translate(0) scale(1); }
 205 }
 206
 207 @keyframes downloadsIndicatorNotificationLeft {
 208   from { opacity: 0; transform: translate(128px, 128px) scale(8); }
 209   20%  { opacity: .85; animation-timing-function: ease-out; }
 210   to   { opacity: 0; transform: translate(0) scale(1); }
 211 }
 212
 213 #downloads-indicator[notification] > #downloads-indicator-anchor > #downloads-indicator-notification {
 214   animation-name: downloadsIndicatorNotificationRight;
 215   animation-duration: 1s;
 216 }
 217
 218 #downloads-indicator[notification]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification {
 219   animation-name: downloadsIndicatorNotificationLeft;
 220 }
 221
 222 /*** Progress bar and text ***/
 223
 224 #downloads-indicator-counter {
 225   height: 9px;
 226   margin: -3px 0 0;
 227   color: #FFCF00;
 228   font-size: 9px;
 229   line-height: 9px;
 230   text-align: center;
 231 }
 232
 233 #downloads-indicator-progress {
 234   width: 16px;
 235   height: 5px;
 236   min-width: 0;
 237   min-height: 0;
 238   margin-top: 1px;
 239   margin-bottom: 2px;
 240   border-radius: 2px;
 241   background-color: #795900;
 242   /*border: 1px solid #FFCF00;*/
 243 }
 244
 245 #downloads-indicator-progress > .progress-bar {
 246   -moz-appearance: none;
 247   min-width: 0;
 248   min-height: 0;
 249   background-color: #008484;
 250   border-radius: 2px 0 0 2px;
 251 }
 252
 253 #downloads-indicator-progress > .progress-remainder {
 254   min-width: 0;
 255   min-height: 0;
 256   background-color: #000000;
 257   border-radius: 0 2px 2px 0;
 258 }
 259
 260 #downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
 261   background-color: #8050B0;
 262 }
 263
 264 #downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
 265   background-color: #000000;
 266 }