diff options
Diffstat (limited to 'arc-firefox-theme/chrome/browser/downloads/downloads.css')
| -rw-r--r-- | arc-firefox-theme/chrome/browser/downloads/downloads.css | 153 |
1 files changed, 90 insertions, 63 deletions
diff --git a/arc-firefox-theme/chrome/browser/downloads/downloads.css b/arc-firefox-theme/chrome/browser/downloads/downloads.css index 78c2f42..487d8f4 100644 --- a/arc-firefox-theme/chrome/browser/downloads/downloads.css +++ b/arc-firefox-theme/chrome/browser/downloads/downloads.css @@ -1,6 +1,12 @@ /* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this file, - * You can obtain one at http://mozilla.org/MPL/2.0/. */ + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + + /*** Panel and outer controls ***/ @@ -27,57 +33,43 @@ max-width: 40ch; } -#downloadsHistory { - background: transparent; - color: -moz-nativehyperlinktext; +#downloadsSummary { + padding: 8px 38px 8px 12px; cursor: pointer; + -moz-user-focus: normal; } -#downloadsFooter { - border-top: 1px solid ThreeDShadow; - background-image: linear-gradient(hsla(0,0%,0%,.15), hsla(0,0%,0%,.08) 6px); -} - -#downloadsHistory > .button-box { - margin: 1em; -} - -#downloadsPanel[keyfocus] > #downloadsFooter > #downloadsHistory:focus > .button-box { - outline: 1px -moz-dialogtext dotted; +#downloadsSummary > .downloadTypeIcon { + list-style-image: url("chrome://browser/skin/downloads/download-summary.png"); } -/*** Downloads Summary and List items ***/ -#downloadsSummary, -richlistitem[type="download"] { - height: 6em; - -moz-padding-end: 0; - color: inherit; +#downloadsSummaryDescription { + color: -moz-nativehyperlinktext; } -#downloadsSummary { - padding: 8px 38px 8px 12px; +#downloadsHistory { + background: transparent; cursor: pointer; - -moz-user-focus: normal; } -#downloadsPanel[keyfocus] > #downloadsFooter > #downloadsSummary:focus { - outline: 1px -moz-dialogtext dotted; - outline-offset: -5px; +#downloadsHistory > .button-box { + margin: 1em; } -#downloadsSummary > .downloadTypeIcon { - list-style-image: url("chrome://browser/skin/downloads/download-summary.png"); -} +/*** List items and similar elements in the summary ***/ -#downloadsSummaryDescription { - color: -moz-nativehyperlinktext; +#downloadsSummary, +richlistitem[type="download"] { + height: var(--downloads-item-height); + -moz-padding-end: 0; + color: inherit; } richlistitem[type="download"] { margin: 0; - border-top: 1px solid hsla(0,0%,100%,.2); - border-bottom: 1px solid hsla(0,0%,0%,.15); + border-top: 1px solid var(--downloads-item-border-top-color); + border-bottom: 1px solid var(--downloads-item-border-bottom-color); background: transparent; padding: 8px; } @@ -90,25 +82,20 @@ richlistitem[type="download"]:last-child { border-bottom: 1px solid transparent; } -#downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"][selected] { - outline: 1px -moz-dialogtext dotted; - outline-offset: -1px; -} - .downloadTypeIcon { -moz-margin-end: 8px; /* Prevent flickering when changing states. */ - min-height: 32px; - min-width: 32px; + height: 32px; + width: 32px; } .blockedIcon { - list-style-image: url("moz-icon://stock/gtk-dialog-error?size=dialog"); + list-style-image: url("chrome://global/skin/icons/Error.png"); } /* We hold .downloadTarget, .downloadProgress and .downloadDetails inside of a vbox with class .downloadContainer. We set the font-size of the entire - container to 90% because: + container to --downloads-item-font-size-factor because: 1) This is the size that we want .downloadDetails to be 2) The container's width is set by localizers by &downloadDetails.width;, @@ -120,26 +107,25 @@ richlistitem[type="download"]:last-child { font-size of .downloadContainer's parent, we use calc to go from the smaller font-size back to the original font-size. */ - #downloadsSummaryDetails, .downloadContainer { - font-size: 90%; + font-size: calc(100% * var(--downloads-item-font-size-factor)); } #downloadsSummaryDescription, .downloadTarget { - margin-bottom: 7px; + margin-bottom: var(--downloads-item-target-margin-bottom); cursor: inherit; } .downloadTarget { - font-size: calc(100%/0.9); + font-size: calc(100% / var(--downloads-item-font-size-factor)); } #downloadsSummaryDetails, .downloadDetails { - margin-top: 1px; - opacity: 0.6; + margin-top: var(--downloads-item-details-margin-top); + opacity: var(--downloads-item-details-opacity); cursor: inherit; } @@ -158,13 +144,54 @@ richlistitem[type="download"]:last-child { padding: 0; } +/*** Panel and outer controls ***/ + +#downloadsFooter { + border-top: 1px solid ThreeDShadow; + background-image: linear-gradient(hsla(0,0%,0%,.15), hsla(0,0%,0%,.08) 6px); +} + +#downloadsHistory { + color: -moz-nativehyperlinktext; +} + +#downloadsPanel[keyfocus] #downloadsSummary:focus, +#downloadsPanel[keyfocus] #downloadsHistory:focus > .button-box { + outline: 1px -moz-dialogtext dotted; +} + +#downloadsPanel[keyfocus] #downloadsSummary:focus { + outline-offset: -5px; +} + +/*** List items and similar elements in the summary ***/ + +:root { + --downloads-item-height: 6em; + --downloads-item-border-top-color: hsla(0,0%,100%,.2); + --downloads-item-border-bottom-color: hsla(0,0%,0%,.15); + --downloads-item-font-size-factor: 0.9; + --downloads-item-target-margin-bottom: 7px; + --downloads-item-details-margin-top: 1px; + --downloads-item-details-opacity: 0.6; +} + +.blockedIcon { + list-style-image: url("moz-icon://stock/gtk-dialog-error?size=dialog"); +} + .downloadButton:focus > .button-box { outline: 1px -moz-dialogtext dotted; } /*** Highlighted list items ***/ -#downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover { +#downloadsPanel[keyfocus] #downloadsListBox:focus > richlistitem[type="download"][selected] { + outline: 1px -moz-dialogtext dotted; + outline-offset: -1px; +} + +#downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"][exists]:hover { border-radius: 3px; border-top: 1px solid hsla(0,0%,100%,.3); border-bottom: 1px solid hsla(0,0%,0%,.2); @@ -180,41 +207,41 @@ richlistitem[type="download"]:last-child { .downloadButton.downloadCancel { -moz-image-region: rect(0px, 16px, 16px, 0px); } -richlistitem[type="download"]:hover > stack > .downloadButton.downloadConfirmBlock, -richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel { +richlistitem[type="download"]:hover .downloadButton.downloadConfirmBlock, +richlistitem[type="download"]:hover .downloadButton.downloadCancel { -moz-image-region: rect(0px, 32px, 16px, 16px); } -richlistitem[type="download"]:hover > stack > .downloadButton.downloadConfirmBlock:hover, -richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:hover { +richlistitem[type="download"]:hover .downloadButton.downloadConfirmBlock:hover, +richlistitem[type="download"]:hover .downloadButton.downloadCancel:hover { -moz-image-region: rect(0px, 48px, 16px, 32px); } -richlistitem[type="download"]:hover > stack > .downloadButton.downloadConfirmBlock:active, -richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:active { +richlistitem[type="download"]:hover .downloadButton.downloadConfirmBlock:active, +richlistitem[type="download"]:hover .downloadButton.downloadCancel:active { -moz-image-region: rect(0px, 64px, 16px, 48px); } .downloadButton.downloadShow { -moz-image-region: rect(16px, 16px, 32px, 0px); } -#downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow { +#downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"]:hover .downloadButton.downloadShow { -moz-image-region: rect(16px, 96px, 32px, 80px); } -#downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:hover { +#downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"]:hover .downloadButton.downloadShow:hover { -moz-image-region: rect(16px, 112px, 32px, 96px); } -#downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:active { +#downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"]:hover .downloadButton.downloadShow:active { -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 { +richlistitem[type="download"]:hover .downloadButton.downloadRetry { -moz-image-region: rect(32px, 32px, 48px, 16px); } -richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:hover { +richlistitem[type="download"]:hover .downloadButton.downloadRetry:hover { -moz-image-region: rect(32px, 48px, 48px, 32px); } -richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:active { +richlistitem[type="download"]:hover .downloadButton.downloadRetry:active { -moz-image-region: rect(32px, 64px, 48px, 48px); } |