diff options
Diffstat (limited to 'browser/themes/windows/downloads')
-rw-r--r-- | browser/themes/windows/downloads/allDownloadsViewOverlay.css | 49 | ||||
-rw-r--r-- | browser/themes/windows/downloads/download-glow-XPVista7.png | bin | 0 -> 494 bytes | |||
-rw-r--r-- | browser/themes/windows/downloads/download-glow-menuPanel-XPVista7.png | bin | 0 -> 893 bytes | |||
-rw-r--r-- | browser/themes/windows/downloads/download-glow-menuPanel.png | bin | 0 -> 405 bytes | |||
-rw-r--r-- | browser/themes/windows/downloads/download-glow.png | bin | 0 -> 175 bytes | |||
-rw-r--r-- | browser/themes/windows/downloads/download-notification-finish.png | bin | 0 -> 3880 bytes | |||
-rw-r--r-- | browser/themes/windows/downloads/download-notification-start.png | bin | 0 -> 1478 bytes | |||
-rw-r--r-- | browser/themes/windows/downloads/downloads.css | 56 | ||||
-rw-r--r-- | browser/themes/windows/downloads/indicator.css | 225 |
9 files changed, 330 insertions, 0 deletions
diff --git a/browser/themes/windows/downloads/allDownloadsViewOverlay.css b/browser/themes/windows/downloads/allDownloadsViewOverlay.css new file mode 100644 index 000000000..e288f1e90 --- /dev/null +++ b/browser/themes/windows/downloads/allDownloadsViewOverlay.css @@ -0,0 +1,49 @@ +/* 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/. */ + +%include ../../shared/downloads/allDownloadsViewOverlay.inc.css + +/*** List items ***/ + +:root { + --downloads-item-height: 6em; +} + +@media (-moz-windows-default-theme) { + .downloadProgress > .progress-bar { + background-color: #3c9af8; + } +} + +/*** Highlighted list items ***/ + +@media not all and (-moz-os-version: windows-xp) { + @media (-moz-windows-default-theme) { + /* + -moz-appearance: menuitem is almost right, but the hover effect is not + transparent and is lighter than desired. + + Copied from the autocomplete richlistbox styling in + toolkit/themes/windows/global/autocomplete.css + + This styling should be kept in sync with the style from the above file. + */ + @itemFocused@ { + color: inherit; + background-color: transparent; + /* four gradients for the bevel highlights on each edge, one for blue background */ + background-image: + linear-gradient(to bottom, rgba(255,255,255,0.9) 3px, transparent 3px), + linear-gradient(to right, rgba(255,255,255,0.5) 3px, transparent 3px), + linear-gradient(to left, rgba(255,255,255,0.5) 3px, transparent 3px), + linear-gradient(to top, rgba(255,255,255,0.4) 3px, transparent 3px), + linear-gradient(to bottom, rgba(163,196,247,0.3), rgba(122,180,246,0.3)); + background-clip: content-box; + border-radius: 6px; + outline: 1px solid rgb(124,163,206); + -moz-outline-radius: 3px; + outline-offset: -2px; + } + } +} diff --git a/browser/themes/windows/downloads/download-glow-XPVista7.png b/browser/themes/windows/downloads/download-glow-XPVista7.png Binary files differnew file mode 100644 index 000000000..e7415e83d --- /dev/null +++ b/browser/themes/windows/downloads/download-glow-XPVista7.png diff --git a/browser/themes/windows/downloads/download-glow-menuPanel-XPVista7.png b/browser/themes/windows/downloads/download-glow-menuPanel-XPVista7.png Binary files differnew file mode 100644 index 000000000..7ff7e6a03 --- /dev/null +++ b/browser/themes/windows/downloads/download-glow-menuPanel-XPVista7.png diff --git a/browser/themes/windows/downloads/download-glow-menuPanel.png b/browser/themes/windows/downloads/download-glow-menuPanel.png Binary files differnew file mode 100644 index 000000000..d05b07b57 --- /dev/null +++ b/browser/themes/windows/downloads/download-glow-menuPanel.png diff --git a/browser/themes/windows/downloads/download-glow.png b/browser/themes/windows/downloads/download-glow.png Binary files differnew file mode 100644 index 000000000..1239ada52 --- /dev/null +++ b/browser/themes/windows/downloads/download-glow.png diff --git a/browser/themes/windows/downloads/download-notification-finish.png b/browser/themes/windows/downloads/download-notification-finish.png Binary files differnew file mode 100644 index 000000000..2ef1420ad --- /dev/null +++ b/browser/themes/windows/downloads/download-notification-finish.png diff --git a/browser/themes/windows/downloads/download-notification-start.png b/browser/themes/windows/downloads/download-notification-start.png Binary files differnew file mode 100644 index 000000000..a2fca743b --- /dev/null +++ b/browser/themes/windows/downloads/download-notification-start.png diff --git a/browser/themes/windows/downloads/downloads.css b/browser/themes/windows/downloads/downloads.css new file mode 100644 index 000000000..4b60da149 --- /dev/null +++ b/browser/themes/windows/downloads/downloads.css @@ -0,0 +1,56 @@ +/* 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/. */ + +%include ../../shared/downloads/downloads.inc.css + +/*** Panel and outer controls ***/ + +@keyfocus@ #downloadsSummary:focus, +@keyfocus@ .downloadsPanelFooterButton:focus { + outline: 1px -moz-dialogtext dotted; + outline-offset: -1px; +} + +@keyfocus@ #downloadsSummary:focus { + outline-offset: -5px; +} + +/*** List items and similar elements in the summary ***/ + +:root { + --downloads-item-height: 5.5em; + --downloads-item-font-size-factor: 0.9; + --downloads-item-details-opacity: 0.6; +} + +.downloadButton > .button-box { + border: 1px solid transparent; +} + +@keyfocus@ .downloadButton:focus > .button-box { + border: 1px dotted ThreeDDarkShadow; +} + +@media (-moz-windows-default-theme) { + @item@[verdict="Malware"] { + color: #aa1b08; + } + + /* Use unified color for the progressbar on default theme */ + .downloadProgress > .progress-bar { + background-color: #3c9af8; + } + + .downloadProgress[paused="true"] > .progress-bar { + background-color: #a6a6a6; + } + +} + +/*** Highlighted list items ***/ + +@keyfocus@ @itemFocused@ { + outline: 1px -moz-dialogtext dotted; + outline-offset: -1px; +} diff --git a/browser/themes/windows/downloads/indicator.css b/browser/themes/windows/downloads/indicator.css new file mode 100644 index 000000000..627265088 --- /dev/null +++ b/browser/themes/windows/downloads/indicator.css @@ -0,0 +1,225 @@ +/* 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/. */ + +/*** Status and progress indicator ***/ + +#downloads-animation-container { + min-height: 1px; + min-width: 1px; + height: 1px; + margin-bottom: -1px; + /* Makes the outermost animation container element positioned, so that its + contents are rendered over the main browser window in the Z order. + This is required by the animated event notification. */ + position: relative; + /* The selected tab may overlap #downloads-indicator-notification */ + z-index: 5; +} + +/*** Main indicator icon ***/ + +@media not all and (min-resolution: 1.1dppx) { + #downloads-button { + --downloads-indicator-icon: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), 0, 198, 18, 180); + --downloads-indicator-icon-attention: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), 18, 198, 36, 180); + --downloads-indicator-icon-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 198, 18, 180); + --downloads-indicator-icon-attention-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 18, 198, 36, 180); + } +} + +@media (min-resolution: 1.1dppx) { + #downloads-button { + --downloads-indicator-icon: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 0, 396, 36, 360); + --downloads-indicator-icon-attention: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 36, 396, 72, 360); + --downloads-indicator-icon-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"), 0, 396, 36, 360); + --downloads-indicator-icon-attention-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"), 36, 396, 72, 360); + } +} + +#downloads-indicator-icon { + background: var(--downloads-indicator-icon) center no-repeat; + width: 18px; + height: 18px; + background-size: 18px; +} + +toolbar[brighttext] #downloads-button:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon { + background-image: var(--downloads-indicator-icon-inverted); +} + +#downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + display: -moz-box; + height: 8px; + width: 8px; + min-width: 0; + border-radius: 50%; + /* "!important" is necessary to override the rule in toolbarbutton.css */ + margin-top: -1px !important; + margin-right: -2px !important; +} + +#downloads-button[cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + height: 7px; + width: 7px; +} + +#downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: #D90000; +} + +#downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: #FFBF00; +} + +#downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive, +#downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive { + filter: none; +} + +#downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon { + background-image: var(--downloads-indicator-icon-attention); +} + +toolbar[brighttext] #downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon { + background-image: var(--downloads-indicator-icon-attention-inverted); +} + +#downloads-button[cui-areatype="menu-panel"][attention="success"] { + list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png"); + -moz-image-region: auto; +} + +/* In the next few rules, we use :not([counter]) as a shortcut that is + equivalent to -moz-any([progress], [paused]). */ + +#downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { + background: var(--downloads-indicator-icon) center no-repeat; + background-size: 12px; +} + +toolbar[brighttext] #downloads-button:not([counter]):not([attention="success"]) > #downloads-indicator-anchor > #downloads-button-progress-area > #downloads-indicator-counter { + background-image: var(--downloads-indicator-icon-inverted); +} + +#downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { + background-image: var(--downloads-indicator-icon-attention); +} + +toolbar[brighttext] #downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { + background-image: var(--downloads-indicator-icon-attention-inverted); +} + +/*** Download notifications ***/ + +#downloads-indicator-notification { + opacity: 0; + background-size: 16px; + background-position: center; + background-repeat: no-repeat; + width: 16px; + height: 16px; +} + +@keyframes downloadsIndicatorNotificationStartRight { + from { opacity: 0; transform: translate(-128px, 128px) scale(8); } + 20% { opacity: .85; animation-timing-function: ease-out; } + to { opacity: 0; transform: translate(0) scale(1); } +} + +@keyframes downloadsIndicatorNotificationStartLeft { + from { opacity: 0; transform: translate(128px, 128px) scale(8); } + 20% { opacity: .85; animation-timing-function: ease-out; } + to { opacity: 0; transform: translate(0) scale(1); } +} + +#downloads-notification-anchor[notification="start"] > #downloads-indicator-notification { + background-image: url("chrome://browser/skin/downloads/download-notification-start.png"); + animation-name: downloadsIndicatorNotificationStartRight; + animation-duration: 1s; +} + +#downloads-notification-anchor[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-notification { + animation-name: downloadsIndicatorNotificationStartLeft; +} + +@keyframes downloadsIndicatorNotificationFinish { + from { opacity: 0; transform: scale(1); } + 20% { opacity: .65; animation-timing-function: ease-in; } + to { opacity: 0; transform: scale(8); } +} + +#downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification { + background-image: url("chrome://browser/skin/downloads/download-notification-finish.png"); + animation-name: downloadsIndicatorNotificationFinish; + animation-duration: 1s; +} + +/*** Progress bar and text ***/ + +#downloads-indicator-counter { + height: 9px; + margin: -3px 0px 0px 0px; + color: hsl(0,0%,30%); + text-shadow: hsla(0,0%,100%,.5) 0 1px; + font-size: 9px; + line-height: 9px; + text-align: center; +} + +@media not all and (-moz-os-version: windows-xp) { + #downloads-indicator-counter { + /* Bug 812345 added this... */ + margin-bottom: -1px; + } +} + +toolbar[brighttext] #downloads-indicator-counter { + color: white; + text-shadow: 0 0 1px rgba(0,0,0,.7), + 0 1px 1.5px rgba(0,0,0,.5); +} + +#downloads-indicator-progress { + width: 16px; + height: 5px; + min-width: 0; + min-height: 0; + margin-top: 1px; + margin-bottom: 2px; + border-radius: 2px; + box-shadow: 0 1px 0 hsla(0,0%,100%,.4); +} + +#downloads-indicator-progress > .progress-bar { + -moz-appearance: none; + min-width: 0; + min-height: 0; + /* The background-clip: border-box; and background-image: none; are there to expand the background-color behind the border */ + background-clip: padding-box, border-box; + background-color: rgb(90, 201, 66); + background-image: linear-gradient(transparent 1px, rgba(255, 255, 255, 0.4) 1px, rgba(255, 255, 255, 0.4) 2px, transparent 2px), none; + border: 1px solid; + border-color: rgba(0,43,86,.6) rgba(0,43,86,.4) rgba(0,43,86,.4); + border-radius: 2px 0 0 2px; +} + +#downloads-indicator-progress > .progress-remainder { + -moz-appearance: none; + min-width: 0; + min-height: 0; + background-image: linear-gradient(#505050, #575757); + border: 1px solid; + border-color: hsla(0,0%,0%,.6) hsla(0,0%,0%,.4) hsla(0,0%,0%,.4); + border-inline-start: none; + border-radius: 0 2px 2px 0; +} + +#downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar { + background-color: rgb(220, 230, 81); +} + +#downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder { + background-image: linear-gradient(#4b5000, #515700); +} |