Bug 787285 - Enhance the presence of the stop/resume/open buttons in the downloads views.
r=mak
@ -51,11 +51,75 @@
|
||||
.downloadButton.downloadCancel {
|
||||
-moz-image-region: rect(0px, 16px, 16px, 0px);
|
||||
}
|
||||
richlistitem.download:hover > .downloadButton.downloadCancel {
|
||||
-moz-image-region: rect(0px, 32px, 16px, 16px);
|
||||
}
|
||||
richlistitem.download:hover > .downloadButton.downloadCancel:hover {
|
||||
-moz-image-region: rect(0px, 48px, 16px, 32px);
|
||||
}
|
||||
richlistitem.download:hover > .downloadButton.downloadCancel:active {
|
||||
-moz-image-region: rect(0px, 64px, 16px, 48px);
|
||||
}
|
||||
richlistitem.download[selected] > .downloadButton.downloadCancel {
|
||||
-moz-image-region: rect(0px, 80px, 16px, 64px);
|
||||
}
|
||||
richlistitem.download:hover[selected] > .downloadButton.downloadCancel {
|
||||
-moz-image-region: rect(0px, 96px, 16px, 80px);
|
||||
}
|
||||
richlistitem.download:hover[selected] > .downloadButton.downloadCancel:hover {
|
||||
-moz-image-region: rect(0px, 112px, 16px, 96px);
|
||||
}
|
||||
richlistitem.download:hover[selected] > .downloadButton.downloadCancel:active {
|
||||
-moz-image-region: rect(0px, 128px, 16px, 112px);
|
||||
}
|
||||
|
||||
.downloadButton.downloadShow {
|
||||
-moz-image-region: rect(16px, 16px, 32px, 0px);
|
||||
}
|
||||
richlistitem.download:hover > .downloadButton.downloadShow {
|
||||
-moz-image-region: rect(16px, 32px, 32px, 16px);
|
||||
}
|
||||
richlistitem.download:hover > .downloadButton.downloadShow:hover {
|
||||
-moz-image-region: rect(16px, 48px, 32px, 32px);
|
||||
}
|
||||
richlistitem.download:hover > .downloadButton.downloadShow:active {
|
||||
-moz-image-region: rect(16px, 64px, 32px, 48px);
|
||||
}
|
||||
richlistitem.download[selected] > .downloadButton.downloadShow {
|
||||
-moz-image-region: rect(16px, 80px, 32px, 64px);
|
||||
}
|
||||
richlistitem.download:hover[selected] > .downloadButton.downloadShow {
|
||||
-moz-image-region: rect(16px, 96px, 32px, 80px);
|
||||
}
|
||||
richlistitem.download:hover[selected] > .downloadButton.downloadShow:hover {
|
||||
-moz-image-region: rect(16px, 112px, 32px, 96px);
|
||||
}
|
||||
richlistitem.download:hover[selected] > .downloadButton.downloadShow:active {
|
||||
-moz-image-region: rect(16px, 128px, 32px, 112px);
|
||||
}
|
||||
|
||||
.downloadButton.downloadRetry {
|
||||
-moz-image-region: rect(32px, 16px, 48px, 0px);
|
||||
}
|
||||
richlistitem.download:hover > .downloadButton.downloadRetry {
|
||||
-moz-image-region: rect(32px, 32px, 48px, 16px);
|
||||
}
|
||||
richlistitem.download:hover > .downloadButton.downloadRetry:hover {
|
||||
-moz-image-region: rect(32px, 48px, 48px, 32px);
|
||||
}
|
||||
richlistitem.download:hover > .downloadButton.downloadRetry:active {
|
||||
-moz-image-region: rect(32px, 64px, 48px, 48px);
|
||||
}
|
||||
richlistitem.download[selected] > .downloadButton.downloadRetry {
|
||||
-moz-image-region: rect(32px, 80px, 48px, 64px);
|
||||
}
|
||||
richlistitem.download:hover[selected] > .downloadButton.downloadRetry {
|
||||
-moz-image-region: rect(32px, 96px, 48px, 80px);
|
||||
}
|
||||
richlistitem.download:hover[selected] > .downloadButton.downloadRetry:hover {
|
||||
-moz-image-region: rect(32px, 112px, 48px, 96px);
|
||||
}
|
||||
richlistitem.download:hover[selected] > .downloadButton.downloadRetry:active {
|
||||
-moz-image-region: rect(32px, 128px, 48px, 112px);
|
||||
}
|
||||
|
||||
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 5.0 KiB |
@ -144,41 +144,42 @@ richlistitem[type="download"][state="1"]:hover {
|
||||
.downloadButton.downloadCancel {
|
||||
-moz-image-region: rect(0px, 16px, 16px, 0px);
|
||||
}
|
||||
.downloadButton.downloadCancel:hover {
|
||||
richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel {
|
||||
-moz-image-region: rect(0px, 32px, 16px, 16px);
|
||||
}
|
||||
.downloadButton.downloadCancel:active {
|
||||
richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:hover {
|
||||
-moz-image-region: rect(0px, 48px, 16px, 32px);
|
||||
}
|
||||
richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:active {
|
||||
-moz-image-region: rect(0px, 64px, 16px, 48px);
|
||||
}
|
||||
|
||||
.downloadButton.downloadShow {
|
||||
-moz-image-region: rect(16px, 16px, 32px, 0px);
|
||||
}
|
||||
.downloadButton.downloadShow:hover {
|
||||
-moz-image-region: rect(16px, 32px, 32px, 16px);
|
||||
richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow {
|
||||
-moz-image-region: rect(16px, 96px, 32px, 80px);
|
||||
}
|
||||
.downloadButton.downloadShow:active {
|
||||
-moz-image-region: rect(16px, 48px, 32px, 32px);
|
||||
richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:hover {
|
||||
-moz-image-region: rect(16px, 112px, 32px, 96px);
|
||||
}
|
||||
richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:active {
|
||||
-moz-image-region: rect(16px, 128px, 32px, 112px);
|
||||
}
|
||||
|
||||
/** TODO: state="1"**/
|
||||
|
||||
.downloadButton.downloadRetry {
|
||||
-moz-image-region: rect(32px, 16px, 48px, 0px);
|
||||
}
|
||||
.downloadButton.downloadRetry:hover {
|
||||
richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry {
|
||||
-moz-image-region: rect(32px, 32px, 48px, 16px);
|
||||
}
|
||||
.downloadButton.downloadRetry:active {
|
||||
richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:hover {
|
||||
-moz-image-region: rect(32px, 48px, 48px, 32px);
|
||||
}
|
||||
|
||||
richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow {
|
||||
-moz-image-region: rect(48px, 16px, 64px, 0px);
|
||||
}
|
||||
richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:hover {
|
||||
-moz-image-region: rect(48px, 32px, 64px, 16px);
|
||||
}
|
||||
richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:active {
|
||||
-moz-image-region: rect(48px, 48px, 64px, 32px);
|
||||
richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:active {
|
||||
-moz-image-region: rect(32px, 64px, 48px, 48px);
|
||||
}
|
||||
|
||||
/*** Status and progress indicator ***/
|
||||
|
@ -51,11 +51,74 @@
|
||||
.downloadButton.downloadCancel {
|
||||
-moz-image-region: rect(0px, 16px, 16px, 0px);
|
||||
}
|
||||
richlistitem.download:hover > .downloadButton.downloadCancel {
|
||||
-moz-image-region: rect(0px, 32px, 16px, 16px);
|
||||
}
|
||||
richlistitem.download:hover > .downloadButton.downloadCancel:hover {
|
||||
-moz-image-region: rect(0px, 48px, 16px, 32px);
|
||||
}
|
||||
richlistitem.download:hover > .downloadButton.downloadCancel:active {
|
||||
-moz-image-region: rect(0px, 64px, 16px, 48px);
|
||||
}
|
||||
richlistitem.download[selected] > .downloadButton.downloadCancel {
|
||||
-moz-image-region: rect(0px, 80px, 16px, 64px);
|
||||
}
|
||||
richlistitem.download:hover[selected] > .downloadButton.downloadCancel {
|
||||
-moz-image-region: rect(0px, 96px, 16px, 80px);
|
||||
}
|
||||
richlistitem.download:hover[selected] > .downloadButton.downloadCancel:hover {
|
||||
-moz-image-region: rect(0px, 112px, 16px, 96px);
|
||||
}
|
||||
richlistitem.download:hover[selected] > .downloadButton.downloadCancel:active {
|
||||
-moz-image-region: rect(0px, 128px, 16px, 112px);
|
||||
}
|
||||
|
||||
.downloadButton.downloadShow {
|
||||
-moz-image-region: rect(16px, 16px, 32px, 0px);
|
||||
}
|
||||
richlistitem.download:hover > .downloadButton.downloadShow {
|
||||
-moz-image-region: rect(16px, 32px, 32px, 16px);
|
||||
}
|
||||
richlistitem.download:hover > .downloadButton.downloadShow:hover {
|
||||
-moz-image-region: rect(16px, 48px, 32px, 32px);
|
||||
}
|
||||
richlistitem.download:hover > .downloadButton.downloadShow:active {
|
||||
-moz-image-region: rect(16px, 64px, 32px, 48px);
|
||||
}
|
||||
richlistitem.download[selected] > .downloadButton.downloadShow {
|
||||
-moz-image-region: rect(16px, 80px, 32px, 64px);
|
||||
}
|
||||
richlistitem.download:hover[selected] > .downloadButton.downloadShow {
|
||||
-moz-image-region: rect(16px, 96px, 32px, 80px);
|
||||
}
|
||||
richlistitem.download:hover[selected] > .downloadButton.downloadShow:hover {
|
||||
-moz-image-region: rect(16px, 112px, 32px, 96px);
|
||||
}
|
||||
richlistitem.download:hover[selected] > .downloadButton.downloadShow:active {
|
||||
-moz-image-region: rect(16px, 128px, 32px, 112px);
|
||||
}
|
||||
|
||||
.downloadButton.downloadRetry {
|
||||
-moz-image-region: rect(32px, 16px, 48px, 0px);
|
||||
}
|
||||
richlistitem.download:hover > .downloadButton.downloadRetry {
|
||||
-moz-image-region: rect(32px, 32px, 48px, 16px);
|
||||
}
|
||||
richlistitem.download:hover > .downloadButton.downloadRetry:hover {
|
||||
-moz-image-region: rect(32px, 48px, 48px, 32px);
|
||||
}
|
||||
richlistitem.download:hover > .downloadButton.downloadRetry:active {
|
||||
-moz-image-region: rect(32px, 64px, 48px, 48px);
|
||||
}
|
||||
richlistitem.download[selected] > .downloadButton.downloadRetry {
|
||||
-moz-image-region: rect(32px, 80px, 48px, 64px);
|
||||
}
|
||||
richlistitem.download:hover[selected] > .downloadButton.downloadRetry {
|
||||
-moz-image-region: rect(32px, 96px, 48px, 80px);
|
||||
}
|
||||
richlistitem.download:hover[selected] > .downloadButton.downloadRetry:hover {
|
||||
-moz-image-region: rect(32px, 112px, 48px, 96px);
|
||||
}
|
||||
richlistitem.download:hover[selected] > .downloadButton.downloadRetry:active {
|
||||
-moz-image-region: rect(32px, 128px, 48px, 112px);
|
||||
}
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 6.5 KiB |
@ -163,23 +163,41 @@ richlistitem[type="download"][state="1"]:hover {
|
||||
.downloadButton.downloadCancel {
|
||||
-moz-image-region: rect(0px, 16px, 16px, 0px);
|
||||
}
|
||||
richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel {
|
||||
-moz-image-region: rect(0px, 32px, 16px, 16px);
|
||||
}
|
||||
richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:hover {
|
||||
-moz-image-region: rect(0px, 48px, 16px, 32px);
|
||||
}
|
||||
richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:active {
|
||||
-moz-image-region: rect(0px, 64px, 16px, 48px);
|
||||
}
|
||||
|
||||
.downloadButton.downloadShow {
|
||||
-moz-image-region: rect(16px, 16px, 32px, 0px);
|
||||
}
|
||||
richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow {
|
||||
-moz-image-region: rect(16px, 32px, 32px, 16px);
|
||||
-moz-image-region: rect(16px, 96px, 32px, 80px);
|
||||
}
|
||||
richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:hover {
|
||||
-moz-image-region: rect(16px, 48px, 32px, 32px);
|
||||
-moz-image-region: rect(16px, 112px, 32px, 96px);
|
||||
}
|
||||
richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:active {
|
||||
-moz-image-region: rect(16px, 64px, 32px, 48px);
|
||||
-moz-image-region: rect(16px, 128px, 32px, 112px);
|
||||
}
|
||||
|
||||
.downloadButton.downloadRetry {
|
||||
-moz-image-region: rect(32px, 16px, 48px, 0px);
|
||||
}
|
||||
richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry {
|
||||
-moz-image-region: rect(32px, 32px, 48px, 16px);
|
||||
}
|
||||
richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:hover {
|
||||
-moz-image-region: rect(32px, 48px, 48px, 32px);
|
||||
}
|
||||
richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:active {
|
||||
-moz-image-region: rect(32px, 64px, 48px, 48px);
|
||||
}
|
||||
|
||||
/*** Status and progress indicator ***/
|
||||
|
||||
|
@ -57,10 +57,96 @@
|
||||
-moz-image-region: rect(0px, 16px, 16px, 0px);
|
||||
}
|
||||
|
||||
richlistitem.download:hover > .downloadButton.downloadCancel {
|
||||
-moz-image-region: rect(0px, 32px, 16px, 16px);
|
||||
}
|
||||
|
||||
richlistitem.download:hover > .downloadButton.downloadCancel:hover {
|
||||
-moz-image-region: rect(0px, 48px, 16px, 32px);
|
||||
}
|
||||
|
||||
richlistitem.download:hover > .downloadButton.downloadCancel:active {
|
||||
-moz-image-region: rect(0px, 64px, 16px, 48px);
|
||||
}
|
||||
|
||||
.downloadButton.downloadShow {
|
||||
-moz-image-region: rect(16px, 16px, 32px, 0px);
|
||||
}
|
||||
|
||||
richlistitem.download:hover > .downloadButton.downloadShow {
|
||||
-moz-image-region: rect(16px, 32px, 32px, 16px);
|
||||
}
|
||||
|
||||
richlistitem.download:hover > .downloadButton.downloadShow:hover {
|
||||
-moz-image-region: rect(16px, 48px, 32px, 32px);
|
||||
}
|
||||
|
||||
richlistitem.download:hover > .downloadButton.downloadShow:active {
|
||||
-moz-image-region: rect(16px, 64px, 32px, 48px);
|
||||
}
|
||||
|
||||
.downloadButton.downloadRetry {
|
||||
-moz-image-region: rect(32px, 16px, 48px, 0px);
|
||||
}
|
||||
|
||||
richlistitem.download:hover > .downloadButton.downloadRetry {
|
||||
-moz-image-region: rect(32px, 32px, 48px, 16px);
|
||||
}
|
||||
|
||||
richlistitem.download:hover > .downloadButton.downloadRetry:hover {
|
||||
-moz-image-region: rect(32px, 48px, 48px, 32px);
|
||||
}
|
||||
|
||||
richlistitem.download:hover > .downloadButton.downloadRetry:active {
|
||||
-moz-image-region: rect(32px, 64px, 48px, 48px);
|
||||
}
|
||||
|
||||
%ifndef WINSTRIPE_AERO
|
||||
richlistitem.download[selected] > .downloadButton.downloadCancel {
|
||||
-moz-image-region: rect(0px, 80px, 16px, 64px);
|
||||
}
|
||||
|
||||
richlistitem.download[selected]:hover > .downloadButton.downloadCancel {
|
||||
-moz-image-region: rect(0px, 96px, 16px, 80px);
|
||||
}
|
||||
|
||||
richlistitem.download[selected]:hover > .downloadButton.downloadCancel:hover {
|
||||
-moz-image-region: rect(0px, 112px, 16px, 96px);
|
||||
}
|
||||
|
||||
richlistitem.download[selected]:hover > .downloadButton.downloadCancel:active {
|
||||
-moz-image-region: rect(0px, 128px, 16px, 112px);
|
||||
}
|
||||
|
||||
richlistitem.download[selected] > .downloadButton.downloadShow {
|
||||
-moz-image-region: rect(16px, 80px, 32px, 64px);
|
||||
}
|
||||
|
||||
richlistitem.download[selected]:hover > .downloadButton.downloadShow {
|
||||
-moz-image-region: rect(16px, 96px, 32px, 80px);
|
||||
}
|
||||
|
||||
richlistitem.download[selected]:hover > .downloadButton.downloadShow:hover {
|
||||
-moz-image-region: rect(16px, 112px, 32px, 96px);
|
||||
}
|
||||
|
||||
richlistitem.download[selected]:hover > .downloadButton.downloadShow:active {
|
||||
-moz-image-region: rect(16px, 128px, 32px, 112px);
|
||||
}
|
||||
|
||||
richlistitem.download[selected] > .downloadButton.downloadRetry {
|
||||
-moz-image-region: rect(32px, 80px, 48px, 64px);
|
||||
}
|
||||
|
||||
richlistitem.download[selected]:hover > .downloadButton.downloadRetry {
|
||||
-moz-image-region: rect(32px, 96px, 48px, 80px);
|
||||
}
|
||||
|
||||
richlistitem.download[selected]:hover > .downloadButton.downloadRetry:hover {
|
||||
-moz-image-region: rect(32px, 112px, 48px, 96px);
|
||||
}
|
||||
|
||||
richlistitem.download[selected]:hover > .downloadButton.downloadRetry:active {
|
||||
-moz-image-region: rect(32px, 128px, 48px, 112px);
|
||||
}
|
||||
%endif
|
||||
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 4.1 KiB |
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 6.7 KiB |
@ -145,50 +145,52 @@ richlistitem[type="download"][state="1"]:hover {
|
||||
.downloadButton.downloadCancel {
|
||||
-moz-image-region: rect(0px, 16px, 16px, 0px);
|
||||
}
|
||||
.downloadButton.downloadCancel:hover {
|
||||
richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel {
|
||||
-moz-image-region: rect(0px, 32px, 16px, 16px);
|
||||
}
|
||||
.downloadButton.downloadCancel:active {
|
||||
richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:hover {
|
||||
-moz-image-region: rect(0px, 48px, 16px, 32px);
|
||||
}
|
||||
richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:active {
|
||||
-moz-image-region: rect(0px, 64px, 16px, 48px);
|
||||
}
|
||||
|
||||
.downloadButton.downloadShow {
|
||||
-moz-image-region: rect(16px, 16px, 32px, 0px);
|
||||
}
|
||||
.downloadButton.downloadShow:hover {
|
||||
richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow {
|
||||
-moz-image-region: rect(16px, 32px, 32px, 16px);
|
||||
}
|
||||
.downloadButton.downloadShow:active {
|
||||
richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow:hover {
|
||||
-moz-image-region: rect(16px, 48px, 32px, 32px);
|
||||
}
|
||||
richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow:active {
|
||||
-moz-image-region: rect(16px, 64px, 32px, 48px);
|
||||
}
|
||||
%ifndef WINSTRIPE_AERO
|
||||
richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow {
|
||||
-moz-image-region: rect(16px, 96px, 32px, 80px);
|
||||
}
|
||||
richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:hover {
|
||||
-moz-image-region: rect(16px, 112px, 32px, 96px);
|
||||
}
|
||||
richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:active {
|
||||
-moz-image-region: rect(16px, 128px, 32px, 112px);
|
||||
}
|
||||
%endif
|
||||
|
||||
.downloadButton.downloadRetry {
|
||||
-moz-image-region: rect(32px, 16px, 48px, 0px);
|
||||
}
|
||||
.downloadButton.downloadRetry:hover {
|
||||
richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry {
|
||||
-moz-image-region: rect(32px, 32px, 48px, 16px);
|
||||
}
|
||||
.downloadButton.downloadRetry:active {
|
||||
richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:hover {
|
||||
-moz-image-region: rect(32px, 48px, 48px, 32px);
|
||||
}
|
||||
|
||||
%ifdef WINSTRIPE_AERO
|
||||
@media not all and (-moz-windows-default-theme) {
|
||||
%endif
|
||||
|
||||
richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow {
|
||||
-moz-image-region: rect(48px, 16px, 64px, 0px);
|
||||
richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:active {
|
||||
-moz-image-region: rect(32px, 64px, 48px, 48px);
|
||||
}
|
||||
richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:hover {
|
||||
-moz-image-region: rect(48px, 32px, 64px, 16px);
|
||||
}
|
||||
richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:active {
|
||||
-moz-image-region: rect(48px, 48px, 64px, 32px);
|
||||
}
|
||||
|
||||
%ifdef WINSTRIPE_AERO
|
||||
}
|
||||
%endif
|
||||
|
||||
/*** Status and progress indicator ***/
|
||||
|
||||
|