commit 71c8c0239b1230d17782752345012921c9035ace
parent 866d50cd0922665055990789e7a4d751fb1a3cec
Author: Lootyhoof <lootyhoofer@gmail.com>
Date: Sat, 4 Mar 2017 21:33:42 +0000
Move indicator.css into downloads.css
Diffstat:
2 files changed, 154 insertions(+), 160 deletions(-)
diff --git a/src/chrome/browser/downloads/downloads.css b/src/chrome/browser/downloads/downloads.css
@@ -202,3 +202,156 @@ richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:hove
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;
+}
+
+/*** Main indicator icon ***/
+
+#downloads-indicator-icon {
+ background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
+ 0, 108, 18, 90) center no-repeat;
+ min-width: 18px;
+ min-height: 18px;
+}
+
+#downloads-indicator-icon:-moz-lwtheme-darktext {
+ background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"),
+ 0, 108, 18, 90) center no-repeat;
+}
+
+#downloads-indicator[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
+ background-image: url("chrome://browser/skin/downloads/download-glow.png");
+}
+
+/* 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(url("chrome://browser/skin/Toolbar.png"),
+ 0, 108, 18, 90) center no-repeat;
+ background-size: 12px;
+}
+
+#downloads-indicator:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
+ background-image: url("chrome://browser/skin/downloads/download-glow.png");
+}
+
+/*** 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: white;
+ text-shadow: 0 0 1px rgba(0,0,0,.7),
+ 0 1px 1.5px rgba(0,0,0,.5);
+ font-size: 9px;
+ line-height: 9px;
+ text-align: center;
+}
+
+#downloads-indicator-counter:-moz-lwtheme-darktext {
+ color: hsl(0,0%,30%);
+ text-shadow: hsla(0,0%,100%,.5) 0 1px;
+}
+
+#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;
+}
+\ No newline at end of file
diff --git a/src/chrome/browser/downloads/indicator.css b/src/chrome/browser/downloads/indicator.css
@@ -1,160 +0,0 @@
-/* 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/. */
-
-/* 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 {
- /* 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;
-}
-
-/*** Main indicator icon ***/
-
-#downloads-indicator-icon {
- background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
- 0, 108, 18, 90) center no-repeat;
- min-width: 18px;
- min-height: 18px;
-}
-
-#downloads-indicator-icon:-moz-lwtheme-darktext {
- background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"),
- 0, 108, 18, 90) center no-repeat;
-}
-
-#downloads-indicator[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
- background-image: url("chrome://browser/skin/downloads/download-glow.png");
-}
-
-/* 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(url("chrome://browser/skin/Toolbar.png"),
- 0, 108, 18, 90) center no-repeat;
- background-size: 12px;
-}
-
-#downloads-indicator:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
- background-image: url("chrome://browser/skin/downloads/download-glow.png");
-}
-
-/*** 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: white;
- text-shadow: 0 0 1px rgba(0,0,0,.7),
- 0 1px 1.5px rgba(0,0,0,.5);
- font-size: 9px;
- line-height: 9px;
- text-align: center;
-}
-
-#downloads-indicator-counter:-moz-lwtheme-brighttext {
- color: hsl(0,0%,30%);
- text-shadow: hsla(0,0%,100%,.5) 0 1px;
-}
-
-#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;
-}
