diff options
Diffstat (limited to 'browser/themes/osx/downloads/indicator.css')
| -rw-r--r-- | browser/themes/osx/downloads/indicator.css | 250 |
1 files changed, 250 insertions, 0 deletions
diff --git a/browser/themes/osx/downloads/indicator.css b/browser/themes/osx/downloads/indicator.css new file mode 100644 index 000000000..eb88f074e --- /dev/null +++ b/browser/themes/osx/downloads/indicator.css @@ -0,0 +1,250 @@ +/* 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-indicator-anchor { + min-width: 18px; + min-height: 18px; +} + +#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 ***/ + +#downloads-indicator-icon { + background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), + 0, 198, 18, 180) center no-repeat; +} + +toolbar[brighttext] #downloads-indicator-icon { + background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 198, 18, 180); +} + +#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: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), 36, 198, 54, 180); +} + +toolbar[brighttext] #downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon { + background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 36, 198, 54, 180); +} + +#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: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), + 0, 198, 18, 180) center no-repeat; + background-size: 12px; +} + +toolbar[brighttext] #downloads-button:not([counter]):not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { + background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 198, 18, 180); +} + +#downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { + background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), 36, 198, 54, 180); +} + +toolbar[brighttext] #downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { + background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 36, 198, 54, 180); +} + +@media (min-resolution: 2dppx) { + #downloads-indicator-icon { + background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 0, 396, 36, 360); + background-size: 18px; + } + + toolbar[brighttext] #downloads-indicator-icon { + background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"), 0, 396, 36, 360); + } + + #downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { + background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 0, 396, 36, 360); + } + + toolbar[brighttext] #downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { + background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"), + 0, 396, 36, 360); + } + + #downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon { + background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 72, 396, 108, 360); + } + + toolbar[brighttext] #downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon { + background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"), 72, 396, 108, 360); + } + + #downloads-button[cui-areatype="menu-panel"][attention="success"] { + list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel@2x.png"); + } + + #downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { + background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 72, 396, 108, 360); + } + + toolbar[brighttext] #downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { + background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"), 72, 396, 108, 360); + } +} + +/*** 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; +} + +@media (min-resolution: 2dppx) { + #downloads-notification-anchor[notification="start"] > #downloads-indicator-notification { + background-image: url("chrome://browser/skin/downloads/download-notification-start@2x.png"); + } +} + +#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; +} + +@media (min-resolution: 2dppx) { + #downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification { + background-image: url("chrome://browser/skin/downloads/download-notification-finish@2x.png"); + } +} + +/*** Progress bar and text ***/ + +#downloads-indicator-counter { + height: 9px; + margin: -3px 0 0; + color: hsl(0,0%,30%); + text-shadow: 0 1px 0 hsla(0,0%,100%,.5); + font-size: 9px; + line-height: 9px; + text-align: center; +} + +#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, 185, 255); + 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); +} |