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