X-Git-Url: https://git-public.kairo.at/?a=blobdiff_plain;f=LCARStrek%2Fbrowser%2Fdownloads%2Findicator.css;h=b89998cfb338124eb90b2d696de4c9d0dd862851;hb=3d7395995722f1504f54d637cc567d5b4eee63ce;hp=8d05f22fbbe6b7b389b89af6490e5747efafc243;hpb=45dc7657b767fde2dc6b5d3ec71379bf5f624007;p=themes.git diff --git a/LCARStrek/browser/downloads/indicator.css b/LCARStrek/browser/downloads/indicator.css index 8d05f22f..b89998cf 100644 --- a/LCARStrek/browser/downloads/indicator.css +++ b/LCARStrek/browser/downloads/indicator.css @@ -2,6 +2,74 @@ * 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/. */ +/* === BEGIN indicator.inc.css === */ + +#downloads-indicator-progress-icon { + background: var(--downloads-indicator-image-attention) bottom no-repeat; + background-size: 18px; + margin-top: 18px; + /* From javascript side we use animation delay from 0s to -100s to show + * corresponding frames needed for progress. + * animation-delay is set to a positive value to make nothing shown. + */ + animation-play-state: paused; + animation-delay: 1s; + animation-duration: 100s; + animation-timing-function: linear; + animation-name: indicatorArrowProgress; +} +/* +toolbar[brighttext] #downloads-indicator-progress-icon { + background-image: var(--downloads-indicator-image-attention-inverted); + animation-name: indicatorArrowProgressDark; +} +*/ +@keyframes indicatorArrowProgress { + 0% { + margin-top: 12px; + filter: brightness(1.2); + } + 100% { + margin-top: 2px; + filter: brightness(1); + } +} +/* +@keyframes indicatorArrowProgressDark { + 0% { + margin-top: 12px; + filter: brightness(0.7); + } + 100% { + margin-top: 2px; + filter: brightness(1); + } +} +*/ +#downloads-button[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-icon { + animation-name: downloadsIndicatorStartJump; + /* Upon changing the overall duration below, please keep the delay time of + setTimeout() identical in indicator.js for this animation. */ + animation-duration: 0.5s; + animation-delay: 1s; + animation-iteration-count: 2; +} + +@keyframes downloadsIndicatorStartJump { + 0% { + transform: translateY(0); + animation-timing-function: ease-out; + } + 50% { + transform: translateY(-3px); + animation-timing-function: ease-in; + } + 100% { + transform: translateY(0); + } +} +/* === END indicator.inc.css === */ + /*** Status and progress indicator ***/ #downloads-animation-container { @@ -19,31 +87,70 @@ /*** Main indicator icon ***/ +/*@media not all and (min-resolution: 1.1dppx) {*/ + #downloads-button { + --downloads-indicator-image: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"), 0, 198, 18, 180); + --downloads-indicator-image-hover: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"), 18, 198, 36, 180); + --downloads-indicator-image-attention: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"), 36, 198, 54, 180); +/* --downloads-indicator-image-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 198, 18, 180); + --downloads-indicator-image-attention-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 18, 198, 36, 180);*/ + } +/*}*/ + + #downloads-indicator-icon { - background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"), - 0, 108, 18, 90) center no-repeat; - min-width: 18px; - min-height: 18px; + background: var(--downloads-indicator-image) center no-repeat; + width: 18px; + height: 18px; + background-size: 18px; } #downloads-button:hover > #downloads-indicator-anchor > #downloads-indicator-icon, #downloads-button[open="true"] > #downloads-indicator-anchor > #downloads-indicator-icon, #downloads-button[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-icon { - background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"), - 18, 108, 36, 90) center no-repeat; + background-image: var(--downloads-indicator-image-hover); color: #000000; } -#downloads-indicator-icon:-moz-lwtheme-brighttext { -/* background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), - 0, 108, 18, 90) center no-repeat;*/ +toolbar[brighttext] #downloads-button:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon { +/* background-image: var(--downloads-indicator-image-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: #FF0000; +} + +#downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: #FFCF00; +} + +#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] > #downloads-indicator-anchor > #downloads-indicator-icon { - background-image: url("chrome://browser/skin/downloads/download-glow.png"); +#downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon { + background-image: var(--downloads-indicator-image-attention); } -#downloads-button[cui-areatype="menu-panel"][attention] { +#downloads-button[cui-areatype="menu-panel"][attention="success"] { list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png"); -moz-image-region: auto; } @@ -52,20 +159,18 @@ 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/FxToolbar.png"), - 0, 108, 18, 90) center no-repeat; + background: var(--downloads-indicator-image) center no-repeat; background-size: 12px; } -#downloads-button:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { - background-image: url("chrome://browser/skin/downloads/download-glow.png"); +#downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { + background-image: var(--downloads-indicator-image-attention); } #downloads-button:not([counter]):hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter, #downloads-button[open="true"]:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter, -#downloads-button:not([counter])[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { - background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"), - 18, 108, 36, 90) center no-repeat; +#downloads-button:not([counter])[attention="success"]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { + background-image: var(--downloads-indicator-image-hover); background-size: 12px; } @@ -125,7 +230,7 @@ text-align: center; } -#downloads-indicator-counter:-moz-lwtheme-brighttext { +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);*/