1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/themes/osx/downloads/downloads.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,356 @@
1.4 +/* This Source Code Form is subject to the terms of the Mozilla Public
1.5 + * License, v. 2.0. If a copy of the MPL was not distributed with this file,
1.6 + * You can obtain one at http://mozilla.org/MPL/2.0/. */
1.7 +
1.8 +/*** Panel and outer controls ***/
1.9 +
1.10 +#downloadsPanel {
1.11 + margin-top: -1px;
1.12 +}
1.13 +
1.14 +#downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent {
1.15 + padding: 0;
1.16 +}
1.17 +
1.18 +#downloadsListBox {
1.19 + background: transparent;
1.20 + padding: 4px;
1.21 + color: inherit;
1.22 +}
1.23 +
1.24 +#downloadsPanel:not([hasdownloads]) > #downloadsListBox {
1.25 + display: none;
1.26 +}
1.27 +
1.28 +#downloadsPanel[hasdownloads] > #emptyDownloads {
1.29 + display: none;
1.30 +}
1.31 +
1.32 +#emptyDownloads {
1.33 + padding: 10px 20px;
1.34 + max-width: 40ch;
1.35 +}
1.36 +
1.37 +#downloadsFooter {
1.38 + border-bottom-left-radius: 4px;
1.39 + border-bottom-right-radius: 4px;
1.40 +}
1.41 +
1.42 +#downloadsHistory {
1.43 + background: transparent;
1.44 + color: hsl(210,100%,75%);
1.45 + cursor: pointer;
1.46 +}
1.47 +
1.48 +#downloadsFooter {
1.49 + background: #e5e5e5;
1.50 + border-top: 1px solid hsla(0,0%,0%,.1);
1.51 + box-shadow: 0 -1px hsla(0,0%,100%,.5) inset, 0 1px 1px hsla(0,0%,0%,.03) inset;
1.52 +}
1.53 +
1.54 +#downloadsHistory > .button-box {
1.55 + color: #808080;
1.56 + margin: 1em;
1.57 +}
1.58 +
1.59 +#downloadsPanel[keyfocus] > #downloadsFooter > #downloadsSummary:focus,
1.60 +#downloadsPanel[keyfocus] > #downloadsFooter > #downloadsHistory:focus {
1.61 + outline: 2px -moz-mac-focusring solid;
1.62 + outline-offset: -2px;
1.63 + -moz-outline-radius-bottomleft: 4px;
1.64 + -moz-outline-radius-bottomright: 4px;
1.65 +}
1.66 +
1.67 +/*** Downloads Summary and List items ***/
1.68 +
1.69 +#downloadsSummary,
1.70 +richlistitem[type="download"] {
1.71 + height: 7em;
1.72 + -moz-padding-end: 0;
1.73 + color: inherit;
1.74 +}
1.75 +
1.76 +#downloadsSummary {
1.77 + padding: 8px 38px 8px 12px;
1.78 + cursor: pointer;
1.79 + -moz-user-focus: normal;
1.80 +}
1.81 +
1.82 +#downloadsSummary > .downloadTypeIcon {
1.83 + list-style-image: url("chrome://browser/skin/downloads/download-summary.png");
1.84 +}
1.85 +
1.86 +@media (min-resolution: 2dppx) {
1.87 + #downloadsSummary > .downloadTypeIcon {
1.88 + list-style-image: url("chrome://browser/skin/downloads/download-summary@2x.png");
1.89 + }
1.90 +}
1.91 +
1.92 +#downloadsSummaryDescription {
1.93 + color: -moz-nativehyperlinktext;
1.94 +}
1.95 +
1.96 +richlistitem[type="download"] {
1.97 + margin: 0;
1.98 + border-top: 1px solid hsla(0,0%,100%,.07);
1.99 + border-bottom: 1px solid hsla(0,0%,0%,.2);
1.100 + background: transparent;
1.101 + padding: 8px;
1.102 +}
1.103 +
1.104 +richlistitem[type="download"]:first-child {
1.105 + border-top: 1px solid transparent;
1.106 +}
1.107 +
1.108 +richlistitem[type="download"]:last-child {
1.109 + border-bottom: 1px solid transparent;
1.110 +}
1.111 +
1.112 +.downloadTypeIcon {
1.113 + -moz-margin-end: 8px;
1.114 + /* Prevent flickering when changing states. */
1.115 + height: 32px;
1.116 + width: 32px;
1.117 +}
1.118 +
1.119 +.blockedIcon {
1.120 + list-style-image: url("chrome://global/skin/icons/Error.png");
1.121 +}
1.122 +
1.123 +/* We hold .downloadTarget, .downloadProgress and .downloadDetails inside of
1.124 + a vbox with class .downloadContainer. We set the font-size of the entire
1.125 + container to 95% because:
1.126 +
1.127 + 1) This is the size that we want .downloadDetails to be
1.128 + 2) The container's width is set by localizers by &downloadDetails.width;,
1.129 + which is a ch unit. Since this is the value that should control the
1.130 + panel width, we apply it to the outer container to constrain
1.131 + .downloadTarget and .downloadProgress.
1.132 +
1.133 + Finally, since we want .downloadTarget's font-size to be at 100% of the
1.134 + font-size of .downloadContainer's parent, we use calc to go from the
1.135 + smaller font-size back to the original font-size.
1.136 + */
1.137 +#downloadsSummaryDetails,
1.138 +.downloadContainer {
1.139 + font-size: 95%;
1.140 +}
1.141 +
1.142 +#downloadsSummaryDescription,
1.143 +.downloadTarget {
1.144 + margin-bottom: 6px;
1.145 + cursor: inherit;
1.146 +}
1.147 +
1.148 +.downloadTarget {
1.149 + font-size: calc(100%/0.95);
1.150 +}
1.151 +
1.152 +#downloadsSummaryDetails,
1.153 +.downloadDetails {
1.154 + opacity: 0.7;
1.155 + cursor: inherit;
1.156 +}
1.157 +
1.158 +.downloadButton {
1.159 + -moz-appearance: none;
1.160 + min-width: 0;
1.161 + min-height: 0;
1.162 + margin: 3px;
1.163 + border: none;
1.164 + background: transparent;
1.165 + padding: 5px;
1.166 + list-style-image: url("chrome://browser/skin/downloads/buttons.png");
1.167 +}
1.168 +
1.169 +.downloadButton:focus > .button-box {
1.170 + outline: 2px -moz-mac-focusring solid;
1.171 + outline-offset: -2px;
1.172 +}
1.173 +
1.174 +.downloadButton > .button-box {
1.175 + padding: 0;
1.176 +}
1.177 +
1.178 +/*** Highlighted list items ***/
1.179 +
1.180 +#downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"][selected],
1.181 +#downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover {
1.182 + border-radius: 3px;
1.183 + border-top: 1px solid hsla(0,0%,100%,.2);
1.184 + border-bottom: 1px solid hsla(0,0%,0%,.4);
1.185 + background-color: Highlight;
1.186 + color: HighlightText;
1.187 +}
1.188 +
1.189 +#downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover {
1.190 + cursor: pointer;
1.191 +}
1.192 +
1.193 +/*** Button icons ***/
1.194 +
1.195 +.downloadButton.downloadCancel {
1.196 + -moz-image-region: rect(0px, 16px, 16px, 0px);
1.197 +}
1.198 +richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel {
1.199 + -moz-image-region: rect(0px, 32px, 16px, 16px);
1.200 +}
1.201 +richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:hover {
1.202 + -moz-image-region: rect(0px, 48px, 16px, 32px);
1.203 +}
1.204 +richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:active {
1.205 + -moz-image-region: rect(0px, 64px, 16px, 48px);
1.206 +}
1.207 +#downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"][selected] > stack > .downloadButton.downloadCancel {
1.208 + -moz-image-region: rect(0px, 80px, 16px, 64px);
1.209 +}
1.210 +#downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadCancel {
1.211 + -moz-image-region: rect(0px, 96px, 16px, 80px);
1.212 +}
1.213 +#downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadCancel:hover {
1.214 + -moz-image-region: rect(0px, 112px, 16px, 96px);
1.215 +}
1.216 +#downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadCancel:active {
1.217 + -moz-image-region: rect(0px, 128px, 16px, 112px);
1.218 +}
1.219 +
1.220 +.downloadButton.downloadShow {
1.221 + -moz-image-region: rect(16px, 16px, 32px, 0px);
1.222 +}
1.223 +#downloadsPanel[keyfocus] > #downloadsListBox > richlistitem[type="download"][state="1"]:hover:not[selected] > stack > .downloadButton.downloadShow {
1.224 + -moz-image-region: rect(16px, 32px, 32px, 16px);
1.225 +}
1.226 +#downloadsPanel[keyfocus] > #downloadsListBox > richlistitem[type="download"][state="1"]:hover:not[selected] > stack > .downloadButton.downloadShow:hover {
1.227 + -moz-image-region: rect(16px, 48px, 32px, 32px);
1.228 +}
1.229 +#downloadsPanel[keyfocus] > #downloadsListBox > richlistitem[type="download"][state="1"]:hover:not[selected] > stack > .downloadButton.downloadShow:active {
1.230 + -moz-image-region: rect(16px, 64px, 32px, 48px);
1.231 +}
1.232 +#downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"][selected] > stack > .downloadButton.downloadShow {
1.233 + -moz-image-region: rect(16px, 80px, 32px, 64px);
1.234 +}
1.235 +#downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow,
1.236 +#downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadShow {
1.237 + -moz-image-region: rect(16px, 96px, 32px, 80px);
1.238 +}
1.239 +#downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:hover,
1.240 +#downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadShow:hover {
1.241 + -moz-image-region: rect(16px, 112px, 32px, 96px);
1.242 +}
1.243 +#downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:active,
1.244 +#downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadShow:active {
1.245 + -moz-image-region: rect(16px, 128px, 32px, 112px);
1.246 +}
1.247 +
1.248 +.downloadButton.downloadRetry {
1.249 + -moz-image-region: rect(32px, 16px, 48px, 0px);
1.250 +}
1.251 +richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry {
1.252 + -moz-image-region: rect(32px, 32px, 48px, 16px);
1.253 +}
1.254 +richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:hover {
1.255 + -moz-image-region: rect(32px, 48px, 48px, 32px);
1.256 +}
1.257 +richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:active {
1.258 + -moz-image-region: rect(32px, 64px, 48px, 48px);
1.259 +}
1.260 +#downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"][selected] > stack > .downloadButton.downloadRetry {
1.261 + -moz-image-region: rect(32px, 80px, 48px, 64px);
1.262 +}
1.263 +#downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadRetry {
1.264 + -moz-image-region: rect(32px, 96px, 48px, 80px);
1.265 +}
1.266 +#downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadRetry:hover {
1.267 + -moz-image-region: rect(32px, 112px, 48px, 96px);
1.268 +}
1.269 +#downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadRetry:active {
1.270 + -moz-image-region: rect(32px, 128px, 48px, 112px);
1.271 +}
1.272 +
1.273 +@media (min-resolution: 2dppx) {
1.274 + .downloadButton {
1.275 + list-style-image: url("chrome://browser/skin/downloads/buttons@2x.png");
1.276 + }
1.277 + .downloadButton > .button-box > .button-icon {
1.278 + width: 16px;
1.279 + height: 16px;
1.280 + }
1.281 +
1.282 + .downloadButton.downloadCancel {
1.283 + -moz-image-region: rect(0px, 32px, 32px, 0px);
1.284 + }
1.285 + richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel {
1.286 + -moz-image-region: rect(0px, 64px, 32px, 32px);
1.287 + }
1.288 + richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:hover {
1.289 + -moz-image-region: rect(0px, 96px, 32px, 64px);
1.290 + }
1.291 + richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:active {
1.292 + -moz-image-region: rect(0px, 128px, 32px, 96px);
1.293 + }
1.294 + #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"][selected] > stack > .downloadButton.downloadCancel {
1.295 + -moz-image-region: rect(0px, 160px, 32px, 128px);
1.296 + }
1.297 + #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadCancel {
1.298 + -moz-image-region: rect(0px, 192px, 32px, 160px);
1.299 + }
1.300 + #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadCancel:hover {
1.301 + -moz-image-region: rect(0px, 224px, 32px, 192px);
1.302 + }
1.303 + #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadCancel:active {
1.304 + -moz-image-region: rect(0px, 256px, 32px, 224px);
1.305 + }
1.306 +
1.307 + .downloadButton.downloadShow {
1.308 + -moz-image-region: rect(32px, 32px, 64px, 0px);
1.309 + }
1.310 + #downloadsPanel[keyfocus] > #downloadsListBox > richlistitem[type="download"][state="1"]:hover:not[selected] > stack > .downloadButton.downloadShow {
1.311 + -moz-image-region: rect(32px, 64px, 64px, 32px);
1.312 + }
1.313 + #downloadsPanel[keyfocus] > #downloadsListBox > richlistitem[type="download"][state="1"]:hover:not[selected] > stack > .downloadButton.downloadShow:hover {
1.314 + -moz-image-region: rect(32px, 96px, 64px, 64px);
1.315 + }
1.316 + #downloadsPanel[keyfocus] > #downloadsListBox > richlistitem[type="download"][state="1"]:hover:not[selected] > stack > .downloadButton.downloadShow:active {
1.317 + -moz-image-region: rect(32px, 128px, 64px, 96px);
1.318 + }
1.319 + #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"][selected] > stack > .downloadButton.downloadShow {
1.320 + -moz-image-region: rect(32px, 160px, 64px, 128px);
1.321 + }
1.322 + #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow,
1.323 + #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadShow {
1.324 + -moz-image-region: rect(32px, 192px, 64px, 160px);
1.325 + }
1.326 + #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:hover,
1.327 + #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadShow:hover {
1.328 + -moz-image-region: rect(32px, 224px, 64px, 192px);
1.329 + }
1.330 + #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:active,
1.331 + #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadShow:active {
1.332 + -moz-image-region: rect(32px, 256px, 64px, 224px);
1.333 + }
1.334 +
1.335 + .downloadButton.downloadRetry {
1.336 + -moz-image-region: rect(64px, 32px, 96px, 0px);
1.337 + }
1.338 + richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry {
1.339 + -moz-image-region: rect(64px, 64px, 96px, 32px);
1.340 + }
1.341 + richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:hover {
1.342 + -moz-image-region: rect(64px, 96px, 96px, 64px);
1.343 + }
1.344 + richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:active {
1.345 + -moz-image-region: rect(64px, 128px, 96px, 96px);
1.346 + }
1.347 + #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"][selected] > stack > .downloadButton.downloadRetry {
1.348 + -moz-image-region: rect(64px, 160px, 96px, 128px);
1.349 + }
1.350 + #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadRetry {
1.351 + -moz-image-region: rect(64px, 192px, 96px, 160px);
1.352 + }
1.353 + #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadRetry:hover {
1.354 + -moz-image-region: rect(64px, 224px, 96px, 192px);
1.355 + }
1.356 + #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadRetry:active {
1.357 + -moz-image-region: rect(64px, 256px, 96px, 224px);
1.358 + }
1.359 +}
