diff options
Diffstat (limited to 'themes/windows/downloads/downloads.css')
| -rw-r--r-- | themes/windows/downloads/downloads.css | 487 |
1 files changed, 487 insertions, 0 deletions
diff --git a/themes/windows/downloads/downloads.css b/themes/windows/downloads/downloads.css new file mode 100644 index 0000000..f169896 --- /dev/null +++ b/themes/windows/downloads/downloads.css @@ -0,0 +1,487 @@ +/* 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 ***/ + +#downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; +} + +#downloadsListBox { + background-color: transparent; + padding: 4px; + color: inherit; +} + +#downloadsPanel:not([hasdownloads]) > #downloadsListBox { + display: none; +} + +#downloadsPanel[hasdownloads] > #emptyDownloads { + display: none; +} + +#emptyDownloads { + padding: 10px 20px; + max-width: 40ch; +} + +#downloadsHistory { + background: transparent; + cursor: pointer; +} + +@media (-moz-os-version: windows-vista), + (-moz-os-version: windows-win7) { + #downloadsHistory { + color: -moz-nativehyperlinktext; + } +} + +#downloadsPanel[keyfocus] > #downloadsFooter > #downloadsHistory:focus { + outline: 1px -moz-dialogtext dotted; + outline-offset: -1px; +} + +#downloadsHistory > .button-box { + border: none; + margin: 1em; +} + +#downloadsFooter { + background-color: hsla(210,4%,10%,.04); + box-shadow: 0 1px 0 hsla(210,4%,10%,.08) inset; + transition-duration: 150ms; + transition-property: background-color; +} + +#downloadsFooter:hover { + background-color: hsla(210,4%,10%,.05); +} + +#downloadsFooter:hover:active { + background-color: hsla(210,4%,10%,.1); + box-shadow: 0 2px 0 0 hsla(210,4%,10%,.1) inset; +} + +@media (-moz-os-version: windows-vista), + (-moz-os-version: windows-win7) { + @media (-moz-windows-default-theme) { + #downloadsFooter { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + transition-duration: 0s; + } + + #downloadsFooter, + #downloadsFooter:hover, + #downloadsFooter:hover:active { + background-color: #f1f5fb; + box-shadow: 0px 1px 2px rgb(204,214,234) inset; + } + } +} + +/*** Downloads Summary and List items ***/ + +#downloadsSummary, +richlistitem[type="download"] { + height: 7em; + -moz-padding-end: 0; + color: inherit; +} + +#downloadsSummary { + padding: 8px 38px 8px 12px; + cursor: pointer; + -moz-user-focus: normal; +} + +#downloadsPanel[keyfocus] > #downloadsFooter > #downloadsSummary:focus { + outline: 1px -moz-dialogtext dotted; + outline-offset: -5px; +} + +#downloadsSummary > .downloadTypeIcon { + list-style-image: url("chrome://browser/skin/downloads/download-summary.png"); +} + +#downloadsSummaryDescription { + color: -moz-nativehyperlinktext; +} + +richlistitem[type="download"] { + margin: 0; + border-top: 1px solid hsla(0,0%,100%,.3); + border-bottom: 1px solid hsla(220,18%,51%,.25); + background: transparent; + padding: 8px; +} + +@media (-moz-windows-default-theme) and (-moz-os-version: windows-vista), + (-moz-windows-default-theme) and (-moz-os-version: windows-win7) { + richlistitem[type="download"] { + border: 1px solid transparent; + border-bottom: 1px solid hsl(213,40%,90%); + } +} + +richlistitem[type="download"]:first-child { + border-top: 1px solid transparent; +} + +@media (-moz-windows-default-theme) { + 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. */ + height: 32px; + width: 32px; +} + +.blockedIcon { + list-style-image: url("chrome://global/skin/icons/Error.png"); +} + +/* We hold .downloadDisplayName, .downloadProgress and .downloadDetails + inside of a vbox with class .downloadContainer. We set the font-size of + the entire container to 90% because: + + 1) This is the size that we want .downloadDetails to be + 2) The container's width is set by localizers by &downloadDetails.width;, + which is a ch unit. Since this is the value that should control the + panel width, we apply it to the outer container to constrain + .downloadDisplayName and .downloadProgress. + + Finally, since we want .downloadDisplayName's font-size to be at 100% of + the 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%; +} + +#downloadsSummaryDescription, +.downloadDisplayName { + margin-bottom: 6px; + cursor: inherit; +} + +.downloadDisplayName { + font-size: calc(100%/0.9); +} + +#downloadsSummaryDetails, +.downloadDetails { + opacity: 0.6; + cursor: inherit; +} + +.downloadButton { + -moz-appearance: none; + min-width: 0; + min-height: 0; + margin: 3px; + border: none; + background: transparent; + padding: 5px; + list-style-image: url("chrome://browser/skin/downloads/buttons.png"); +} + +.downloadButton > .button-box { + border: 1px solid transparent; + padding: 0; +} + +#downloadsPanel[keyfocus] .downloadButton:focus > .button-box { + border: 1px dotted ThreeDDarkShadow; +} + +/*** Highlighted list items ***/ + +#downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover { + background-color: hsla(210,4%,10%,.08); + outline: 1px solid hsla(210,4%,10%,.1); + outline-offset: -1px; + cursor: pointer; +} + +#downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover:active { + background-color: hsla(210,4%,10%,.15); + outline: 1px solid hsla(210,4%,10%,.15); + box-shadow: 0 1px 0 0 hsla(210,4%,10%,.05) inset; +} + +@media (-moz-os-version: windows-vista), + (-moz-os-version: windows-win7) { + #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover { + border-radius: 3px; + outline: 0; + border-top: 1px solid hsla(0,0%,100%,.2); + border-bottom: 1px solid hsla(0,0%,0%,.2); + background-color: Highlight; + color: HighlightText; + } + + #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover:active { + background-color: Highlight; + outline: 0; + box-shadow: none; + } +} + +@media (-moz-windows-default-theme) and (-moz-os-version: windows-vista), + (-moz-windows-default-theme) and (-moz-os-version: windows-win7) { + #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover { + border: 1px solid hsl(213,45%,65%); + box-shadow: 0 0 0 1px hsla(0,0%,100%,.5) inset, + 0 1px 0 hsla(0,0%,100%,.3) inset; + background-image: linear-gradient(hsl(212,86%,92%), hsl(212,91%,86%)); + color: black; + } +} + +/*** Button icons ***/ + +.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"]:hover > stack > .downloadButton.downloadShow { + -moz-image-region: rect(16px, 32px, 32px, 16px); +} +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); +} + +.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 ***/ + +#downloads-indicator-anchor { + /* Makes the outermost stack 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; +} + +#navigator-toolbox[iconsize=large][mode=icons] > #nav-bar[brighttext] #downloads-indicator[counter] > #downloads-indicator-anchor { + /* Use a dark download button when appropriate to improve text legibility */ + background: hsla(94,56%,18%,.3) padding-box; + background-image: linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,0%,.4)); + border-color: hsla(29,12%,90%,.2) hsla(29,12%,90%,.2) hsla(29,12%,90%,.2); + box-shadow: 0 1px hsla(0,0%,0%,.05) inset, + 0 1px hsla(29,12%,90%,.05), + 0 0 2px hsla(29,12%,90%,.05); +} + +/*** Main indicator icon ***/ + +#downloads-indicator-icon { + background: -moz-image-rect(var(--toolbarbutton-image), + 0, 108, 18, 90) center no-repeat; + min-width: 18px; + min-height: 18px; +} + +toolbar[brighttext] #downloads-indicator-icon { + background: -moz-image-rect(var(--toolbarbutton-inverted-image), + 0, 108, 18, 90) center no-repeat; +} + +#downloads-indicator[attention] > #downloads-indicator-anchor > #downloads-indicator-icon { + background: -moz-image-rect(var(--toolbarbutton-image), + 19, 108, 36, 90) center no-repeat; +} + +@media (-moz-windows-compositor) { + :-moz-any(#toolbar-menubar, #nav-bar[tabsontop=false]) #downloads-indicator-icon:not(:-moz-lwtheme), + #TabsToolbar[tabsontop=true] #downloads-indicator-icon:not(:-moz-lwtheme), + #nav-bar + #customToolbars + #PersonalToolbar[collapsed=true] + #TabsToolbar[tabsontop=false]:last-child #downloads-indicator-icon:not(:-moz-lwtheme) { + background: -moz-image-rect(var(--toolbarbutton-glass-image), + 0, 108, 18, 90) center no-repeat; + } + #downloads-indicator[attention] > #downloads-indicator-anchor > #downloads-indicator-icon { + background: -moz-image-rect(var(--toolbarbutton-glass-image), + 19, 108, 36, 90) center no-repeat; +} + + +} + +/* In the next few rules, we use :not([counter]) as a shortcut that is + equivalent to -moz-any([progress], [paused]). */ + +#downloads-indicator:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { + background: -moz-image-rect(var(--toolbarbutton-image), + 0, 108, 18, 90) center no-repeat; + background-size: 12px; +} + +toolbar[brighttext] #downloads-indicator:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { + background: -moz-image-rect(var(--toolbarbutton-inverted-image), + 0, 108, 18, 90) center no-repeat; +} + +@media (-moz-windows-compositor) { + :-moz-any(#toolbar-menubar, #nav-bar[tabsontop=false]) #downloads-indicator:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter:not(:-moz-lwtheme), + #TabsToolbar[tabsontop=true] #downloads-indicator:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter:not(:-moz-lwtheme), + #nav-bar + #customToolbars + #PersonalToolbar[collapsed=true] + #TabsToolbar[tabsontop=false]:last-child #downloads-indicator:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter:not(:-moz-lwtheme) { + background: -moz-image-rect(var(--toolbarbutton-glass-image), + 0, 108, 18, 90) center no-repeat; + } + #downloads-indicator:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { + background: -moz-image-rect(var(--toolbarbutton-glass-image), + 19, 108, 36, 90) center no-repeat; + } +} + +/*** Download notifications ***/ + +#downloads-indicator-notification { + opacity: 0; + background-size: 16px; + background-position: center; + background-repeat: no-repeat; +} + +@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-indicator[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-notification { + background-image: url("chrome://browser/skin/downloads/download-notification-start.png"); + animation-name: downloadsIndicatorNotificationStartRight; + animation-duration: 1s; +} + +#downloads-indicator[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #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-indicator[notification="finish"] > #downloads-indicator-anchor > #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; +} + +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); + -moz-border-start: none; + border-radius: 0 2px 2px 0; +} + +#downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar { + background-color: rgb(220, 230, 81); +} + +#downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder { + background-image: linear-gradient(#4b5000, #515700); +} + +toolbar[mode="full"] > #downloads-indicator > .toolbarbutton-text { + margin: 0; + text-align: center; +} + +#downloads-indicator-counter { + margin-bottom: -1px; +} |