X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fbrowser%2Fdownloads%2Findicator.css;fp=LCARStrek%2Fbrowser%2Fdownloads%2Findicator.css;h=96c59b09d9e9c677149bd721014f8b310e51f19c;hp=b89998cfb338124eb90b2d696de4c9d0dd862851;hb=1b1f3d099d79ff3f7e081b2702a1076c6cd627c4;hpb=6474f09ca3365ea117d6648ed31bed3b99449e84 diff --git a/LCARStrek/browser/downloads/indicator.css b/LCARStrek/browser/downloads/indicator.css index b89998cf..96c59b09 100644 --- a/LCARStrek/browser/downloads/indicator.css +++ b/LCARStrek/browser/downloads/indicator.css @@ -5,7 +5,9 @@ /* === BEGIN indicator.inc.css === */ #downloads-indicator-progress-icon { - background: var(--downloads-indicator-image-attention) bottom no-repeat; + background: var(--downloads-indicator-image) bottom no-repeat; + -moz-context-properties: fill; + fill: var(--toolbarbutton-icon-fill-attention); background-size: 18px; margin-top: 18px; /* From javascript side we use animation delay from 0s to -100s to show @@ -20,7 +22,6 @@ } /* toolbar[brighttext] #downloads-indicator-progress-icon { - background-image: var(--downloads-indicator-image-attention-inverted); animation-name: indicatorArrowProgressDark; } */ @@ -87,19 +88,14 @@ toolbar[brighttext] #downloads-indicator-progress-icon { /*** 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-button { + --downloads-indicator-image: url("chrome://browser/skin/download.svg"); +} #downloads-indicator-icon { background: var(--downloads-indicator-image) center no-repeat; + -moz-context-properties: fill; + fill: var(--toolbarbutton-icon-fill); width: 18px; height: 18px; background-size: 18px; @@ -108,12 +104,12 @@ toolbar[brighttext] #downloads-indicator-progress-icon { #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-image: var(--downloads-indicator-image-hover); + fill: var(--toolbarbutton-icon-fill-inverted); color: #000000; } toolbar[brighttext] #downloads-button:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon { -/* background-image: var(--downloads-indicator-image-inverted); */ +/* fill: var(--toolbarbutton-icon-fill-inverted);*/ } #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, @@ -147,7 +143,7 @@ toolbar[brighttext] #downloads-button:not([attention="success"]) > #downloads-in } #downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon { - background-image: var(--downloads-indicator-image-attention); + fill: var(--toolbarbutton-icon-fill-attention); } #downloads-button[cui-areatype="menu-panel"][attention="success"] { @@ -155,25 +151,6 @@ toolbar[brighttext] #downloads-button:not([attention="success"]) > #downloads-in -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-image) center no-repeat; - background-size: 12px; -} - -#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="success"]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { - background-image: var(--downloads-indicator-image-hover); - background-size: 12px; -} - /*** Download notifications ***/ #downloads-indicator-notification { @@ -219,62 +196,6 @@ toolbar[brighttext] #downloads-button:not([attention="success"]) > #downloads-in animation-duration: 1s; } -/*** Progress bar and text ***/ - -#downloads-indicator-counter { - height: 9px; - margin: -3px 0 0; - color: #FFCF00; - 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-button[counter]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter, -#downloads-button[counter][open="true"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { - color: #000000; -} - -#downloads-indicator-progress { - width: 16px; - height: 5px; - min-width: 0; - min-height: 0; - margin-top: 1px; - margin-bottom: 2px; - border-radius: 2px; - background-color: #795900; -} - -#downloads-indicator-progress > .progress-bar { - -moz-appearance: none; - min-width: 0; - min-height: 0; - background-color: #008484; - border-radius: 2px 0 0 2px; -} - -#downloads-indicator-progress > .progress-remainder { - min-width: 0; - min-height: 0; - background-color: #A09090; - border-radius: 0 2px 2px 0; -} - -#downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar { - background-color: #8050B0; -} - -#downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder { - background-color: #404048; -} - toolbar[mode="full"] > #downloads-button > .toolbarbutton-text { margin: 0; text-align: center;