browser/themes/linux/downloads/indicator.css@6474c204b198
browser/themes/linux/downloads/indicator.css
Wed, 31 Dec 2014 06:09:35 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:09:35 +0100
- changeset 0
- 6474c204b198
- permissions
- -rw-r--r--
Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.
1 /* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
5 /*** Status and progress indicator ***/
7 #downloads-animation-container {
8 min-height: 1px;
9 min-width: 1px;
10 height: 1px;
11 margin-bottom: -1px;
12 /* Makes the outermost animation container element positioned, so that its
13 contents are rendered over the main browser window in the Z order.
14 This is required by the animated event notification. */
15 position: relative;
16 /* The selected tab may overlap #downloads-indicator-notification */
17 z-index: 5;
18 }
20 /*** Main indicator icon ***/
22 #downloads-button[cui-areatype="toolbar"] > #downloads-indicator-anchor > #downloads-indicator-icon {
23 background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
24 0, 198, 18, 180) center no-repeat;
25 min-width: 18px;
26 min-height: 18px;
27 }
29 toolbar[brighttext] #downloads-button[cui-areatype="toolbar"]:not([attention]) > #downloads-indicator-anchor > #downloads-indicator-icon {
30 background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"),
31 0, 198, 18, 180) center no-repeat;
32 }
34 #downloads-button[cui-areatype="toolbar"][attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
35 background-image: url("chrome://browser/skin/downloads/download-glow.png");
36 }
38 #downloads-button[cui-areatype="menu-panel"][attention] {
39 list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png");
40 -moz-image-region: auto;
41 }
43 /* In the next few rules, we use :not([counter]) as a shortcut that is
44 equivalent to -moz-any([progress], [paused]). */
46 #downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
47 background: -moz-image-rect(url("chrome://browser/skin/Toolbar-small.png"),
48 0, 16, 16, 0) center no-repeat;
49 background-size: 12px;
50 }
52 toolbar[brighttext] #downloads-button:not([counter]):not([attention]) > #downloads-indicator-anchor > #downloads-button-progress-area > #downloads-indicator-counter {
53 background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 198, 18, 180);
54 }
56 #downloads-button:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
57 background-image: url("chrome://browser/skin/downloads/download-glow.png");
58 }
60 /*** Download notifications ***/
62 #downloads-indicator-notification {
63 opacity: 0;
64 background-size: 16px;
65 background-position: center;
66 background-repeat: no-repeat;
67 width: 16px;
68 height: 16px;
69 }
71 @keyframes downloadsIndicatorNotificationStartRight {
72 from { opacity: 0; transform: translate(-128px, 128px) scale(8); }
73 20% { opacity: .85; animation-timing-function: ease-out; }
74 to { opacity: 0; transform: translate(0) scale(1); }
75 }
77 @keyframes downloadsIndicatorNotificationStartLeft {
78 from { opacity: 0; transform: translate(128px, 128px) scale(8); }
79 20% { opacity: .85; animation-timing-function: ease-out; }
80 to { opacity: 0; transform: translate(0) scale(1); }
81 }
83 #downloads-notification-anchor[notification="start"] > #downloads-indicator-notification {
84 background-image: url("chrome://browser/skin/downloads/download-notification-start.png");
85 animation-name: downloadsIndicatorNotificationStartRight;
86 animation-duration: 1s;
87 }
89 #downloads-notification-anchor[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-notification {
90 animation-name: downloadsIndicatorNotificationStartLeft;
91 }
93 @keyframes downloadsIndicatorNotificationFinish {
94 from { opacity: 0; transform: scale(1); }
95 20% { opacity: .65; animation-timing-function: ease-in; }
96 to { opacity: 0; transform: scale(8); }
97 }
99 #downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification {
100 background-image: url("chrome://browser/skin/downloads/download-notification-finish.png");
101 animation-name: downloadsIndicatorNotificationFinish;
102 animation-duration: 1s;
103 }
105 /*** Progress bar and text ***/
107 #downloads-indicator-counter {
108 height: 10px;
109 margin: 0;
110 color: hsl(0,0%,30%);
111 text-shadow: 0 1px 0 hsla(0,0%,100%,.5);
112 font-size: 10px;
113 line-height: 10px;
114 text-align: center;
115 }
117 toolbar[brighttext] #downloads-indicator-counter {
118 color: white;
119 text-shadow: 0 0 1px rgba(0,0,0,.7),
120 0 1px 1.5px rgba(0,0,0,.5);
121 }
123 #downloads-indicator-progress {
124 width: 18px;
125 height: 6px;
126 min-width: 0;
127 min-height: 0;
128 margin-top: 1px;
129 margin-bottom: 2px;
130 border-radius: 2px;
131 box-shadow: 0 1px 0 hsla(0,0%,100%,.4);
132 }
134 #downloads-indicator-progress > .progress-bar {
135 -moz-appearance: none;
136 min-width: 0;
137 min-height: 0;
138 /* The background-clip: border-box; and background-image: none; are there to expand the background-color behind the border */
139 background-clip: padding-box, border-box;
140 background-color: rgb(255, 135, 94);
141 background-image: linear-gradient(transparent 1px, rgba(255, 255, 255, 0.4) 1px, rgba(255, 255, 255, 0.4) 2px, transparent 2px), none;
142 border: 1px solid;
143 border-color: rgba(0,43,86,.6) rgba(0,43,86,.4) rgba(0,43,86,.4);
144 border-radius: 2px 0 0 2px;
145 }
147 #downloads-indicator-progress > .progress-remainder {
148 -moz-appearance: none;
149 min-width: 0;
150 min-height: 0;
151 background-image: linear-gradient(#505050, #575757);
152 border: 1px solid;
153 border-color: hsla(0,0%,0%,.6) hsla(0,0%,0%,.4) hsla(0,0%,0%,.4);
154 -moz-border-start: none;
155 border-radius: 0 2px 2px 0;
156 }
158 #downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
159 background-color: rgb(220, 230, 81);
160 }
162 #downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
163 background-image: linear-gradient(#4b5000, #515700);
164 }
