michael@0: /* This Source Code Form is subject to the terms of the Mozilla Public
michael@0:  * License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0:  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0: 
michael@0: #downloadsRichListBox {
michael@0:   /** The default listbox appearance comes with an unwanted margin. **/
michael@0:   -moz-appearance: none;
michael@0:   margin: 0;
michael@0: }
michael@0: 
michael@0: #downloadsRichListBox > richlistitem.download {
michael@0:   height: 6em;
michael@0:   padding: 5px 8px;
michael@0: }
michael@0: 
michael@0: .downloadTypeIcon {
michael@0:   -moz-margin-end: 8px;
michael@0:   /* Ensure icons are displayed at 32px size even on Retina display */
michael@0:   height: 32px;
michael@0:   width: 32px;
michael@0: }
michael@0: 
michael@0: .blockedIcon {
michael@0:   list-style-image: url("chrome://global/skin/icons/Error.png");
michael@0: }
michael@0: 
michael@0: .downloadTarget {
michael@0:   margin-bottom: 3px;
michael@0:   cursor: inherit;
michael@0: }
michael@0: 
michael@0: .downloadDetails {
michael@0:   opacity: 0.7;
michael@0:   font-size: 95%;
michael@0:   cursor: inherit;
michael@0: }
michael@0: 
michael@0: .downloadButton {
michael@0:   -moz-appearance: none;
michael@0:   background: transparent;
michael@0:   min-width: 0;
michael@0:   min-height: 0;
michael@0:   margin: 3px;
michael@0:   border: none;
michael@0:   padding: 5px;
michael@0:   list-style-image: url("chrome://browser/skin/downloads/buttons.png");
michael@0: }
michael@0: 
michael@0: /*** Button icons ***/
michael@0: 
michael@0: .downloadButton.downloadCancel {
michael@0:   -moz-image-region: rect(0px, 16px, 16px, 0px);
michael@0: }
michael@0: richlistitem.download:hover > .downloadButton.downloadCancel {
michael@0:   -moz-image-region: rect(0px, 32px, 16px, 16px);
michael@0: }
michael@0: richlistitem.download:hover > .downloadButton.downloadCancel:hover {
michael@0:   -moz-image-region: rect(0px, 48px, 16px, 32px);
michael@0: }
michael@0: richlistitem.download:hover > .downloadButton.downloadCancel:active {
michael@0:   -moz-image-region: rect(0px, 64px, 16px, 48px);
michael@0: }
michael@0: richlistitem.download[selected] > .downloadButton.downloadCancel {
michael@0:   -moz-image-region: rect(0px, 80px, 16px, 64px);
michael@0: }
michael@0: richlistitem.download:hover[selected] > .downloadButton.downloadCancel {
michael@0:   -moz-image-region: rect(0px, 96px, 16px, 80px);
michael@0: }
michael@0: richlistitem.download:hover[selected] > .downloadButton.downloadCancel:hover {
michael@0:   -moz-image-region: rect(0px, 112px, 16px, 96px);
michael@0: }
michael@0: richlistitem.download:hover[selected] > .downloadButton.downloadCancel:active {
michael@0:   -moz-image-region: rect(0px, 128px, 16px, 112px);
michael@0: }
michael@0: 
michael@0: .downloadButton.downloadShow {
michael@0:   -moz-image-region: rect(16px, 16px, 32px, 0px);
michael@0: }
michael@0: richlistitem.download:hover > .downloadButton.downloadShow {
michael@0:   -moz-image-region: rect(16px, 32px, 32px, 16px);
michael@0: }
michael@0: richlistitem.download:hover > .downloadButton.downloadShow:hover {
michael@0:   -moz-image-region: rect(16px, 48px, 32px, 32px);
michael@0: }
michael@0: richlistitem.download:hover > .downloadButton.downloadShow:active {
michael@0:   -moz-image-region: rect(16px, 64px, 32px, 48px);
michael@0: }
michael@0: richlistitem.download[selected] > .downloadButton.downloadShow {
michael@0:   -moz-image-region: rect(16px, 80px, 32px, 64px);
michael@0: }
michael@0: richlistitem.download:hover[selected] > .downloadButton.downloadShow {
michael@0:   -moz-image-region: rect(16px, 96px, 32px, 80px);
michael@0: }
michael@0: richlistitem.download:hover[selected] > .downloadButton.downloadShow:hover {
michael@0:   -moz-image-region: rect(16px, 112px, 32px, 96px);
michael@0: }
michael@0: richlistitem.download:hover[selected] > .downloadButton.downloadShow:active {
michael@0:   -moz-image-region: rect(16px, 128px, 32px, 112px);
michael@0: }
michael@0: 
michael@0: .downloadButton.downloadRetry {
michael@0:   -moz-image-region: rect(32px, 16px, 48px, 0px);
michael@0: }
michael@0: richlistitem.download:hover > .downloadButton.downloadRetry {
michael@0:   -moz-image-region: rect(32px, 32px, 48px, 16px);
michael@0: }
michael@0: richlistitem.download:hover > .downloadButton.downloadRetry:hover {
michael@0:   -moz-image-region: rect(32px, 48px, 48px, 32px);
michael@0: }
michael@0: richlistitem.download:hover > .downloadButton.downloadRetry:active {
michael@0:   -moz-image-region: rect(32px, 64px, 48px, 48px);
michael@0: }
michael@0: richlistitem.download[selected] > .downloadButton.downloadRetry {
michael@0:   -moz-image-region: rect(32px, 80px, 48px, 64px);
michael@0: }
michael@0: richlistitem.download:hover[selected] > .downloadButton.downloadRetry {
michael@0:   -moz-image-region: rect(32px, 96px, 48px, 80px);
michael@0: }
michael@0: richlistitem.download:hover[selected] > .downloadButton.downloadRetry:hover {
michael@0:   -moz-image-region: rect(32px, 112px, 48px, 96px);
michael@0: }
michael@0: richlistitem.download:hover[selected] > .downloadButton.downloadRetry:active {
michael@0:   -moz-image-region: rect(32px, 128px, 48px, 112px);
michael@0: }
michael@0: 
michael@0: @media (min-resolution: 2dppx) {
michael@0:   .downloadButton {
michael@0:     list-style-image: url("chrome://browser/skin/downloads/buttons@2x.png");
michael@0:   }
michael@0:   .downloadButton > .button-box > .button-icon {
michael@0:     width: 16px;
michael@0:     height: 16px;
michael@0:   }
michael@0: 
michael@0:   .downloadButton.downloadCancel {
michael@0:      -moz-image-region: rect(0px, 32px, 32px, 0px);
michael@0:   }
michael@0:   richlistitem.download:hover > .downloadButton.downloadCancel {
michael@0:     -moz-image-region: rect(0px, 64px, 32px, 32px);
michael@0:   }
michael@0:   richlistitem.download:hover > .downloadButton.downloadCancel:hover {
michael@0:     -moz-image-region: rect(0px, 96px, 32px, 64px);
michael@0:   }
michael@0:   richlistitem.download:hover > .downloadButton.downloadCancel:active {
michael@0:     -moz-image-region: rect(0px, 128px, 32px, 96px);
michael@0:   }
michael@0:   richlistitem.download[selected] > .downloadButton.downloadCancel {
michael@0:     -moz-image-region: rect(0px, 160px, 32px, 128px);
michael@0:   }
michael@0:   richlistitem.download:hover[selected] > .downloadButton.downloadCancel {
michael@0:     -moz-image-region: rect(0px, 192px, 32px, 160px);
michael@0:   }
michael@0:   richlistitem.download:hover[selected] > .downloadButton.downloadCancel:hover {
michael@0:     -moz-image-region: rect(0px, 224px, 32px, 192px);
michael@0:   }
michael@0:   richlistitem.download:hover[selected] > .downloadButton.downloadCancel:active {
michael@0:     -moz-image-region: rect(0px, 256px, 32px, 224px);
michael@0:   }
michael@0: 
michael@0:   .downloadButton.downloadShow {
michael@0:     -moz-image-region: rect(32px, 32px, 64px, 0px);
michael@0:   }
michael@0:   richlistitem.download:hover > .downloadButton.downloadShow {
michael@0:     -moz-image-region: rect(32px, 64px, 64px, 32px);
michael@0:   }
michael@0:   richlistitem.download:hover > .downloadButton.downloadShow:hover {
michael@0:     -moz-image-region: rect(32px, 96px, 64px, 64px);
michael@0:   }
michael@0:   richlistitem.download:hover > .downloadButton.downloadShow:active {
michael@0:     -moz-image-region: rect(32px, 128px, 64px, 96px);
michael@0:   }
michael@0:   richlistitem.download[selected] > .downloadButton.downloadShow {
michael@0:     -moz-image-region: rect(32px, 160px, 64px, 128px);
michael@0:   }
michael@0:   richlistitem.download:hover[selected] > .downloadButton.downloadShow {
michael@0:     -moz-image-region: rect(32px, 192px, 64px, 160px);
michael@0:   }
michael@0:   richlistitem.download:hover[selected] > .downloadButton.downloadShow:hover {
michael@0:     -moz-image-region: rect(32px, 224px, 64px, 192px);
michael@0:   }
michael@0:   richlistitem.download:hover[selected] > .downloadButton.downloadShow:active {
michael@0:     -moz-image-region: rect(32px, 256px, 64px, 224px);
michael@0:   }
michael@0: 
michael@0:   .downloadButton.downloadRetry {
michael@0:     -moz-image-region: rect(64px, 32px, 96px, 0px);
michael@0:   }
michael@0:   richlistitem.download:hover > .downloadButton.downloadRetry {
michael@0:     -moz-image-region: rect(64px, 64px, 96px, 32px);
michael@0:   }
michael@0:   richlistitem.download:hover > .downloadButton.downloadRetry:hover {
michael@0:     -moz-image-region: rect(64px, 96px, 96px, 64px);
michael@0:   }
michael@0:   richlistitem.download:hover > .downloadButton.downloadRetry:active {
michael@0:     -moz-image-region: rect(64px, 128px, 96px, 96px);
michael@0:   }
michael@0:   richlistitem.download[selected] > .downloadButton.downloadRetry {
michael@0:     -moz-image-region: rect(64px, 160px, 96px, 128px);
michael@0:   }
michael@0:   richlistitem.download:hover[selected] > .downloadButton.downloadRetry {
michael@0:     -moz-image-region: rect(64px, 192px, 96px, 160px);
michael@0:   }
michael@0:   richlistitem.download:hover[selected] > .downloadButton.downloadRetry:hover {
michael@0:     -moz-image-region: rect(64px, 224px, 96px, 192px);
michael@0:   }
michael@0:   richlistitem.download:hover[selected] > .downloadButton.downloadRetry:active {
michael@0:     -moz-image-region: rect(64px, 256px, 96px, 224px);
michael@0:   }
michael@0: }