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