Commit | Line | Data |
---|---|---|
64897c3a RK |
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 file, | |
3 | * You can obtain one at http://mozilla.org/MPL/2.0/. */ | |
4 | ||
5 | /*** Panel and outer controls ***/ | |
6 | ||
64897c3a RK |
7 | #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent { |
8 | padding: 0; | |
9 | } | |
10 | ||
11 | #downloadsListBox { | |
64897c3a RK |
12 | background-color: transparent; |
13 | padding: 4px; | |
14 | color: inherit; | |
15 | } | |
16 | ||
990cba4b RK |
17 | #downloadsPanel:not([hasdownloads]) > #downloadsListBox { |
18 | display: none; | |
19 | } | |
20 | ||
589b5528 RK |
21 | #downloadsPanel[hasdownloads] > #emptyDownloads { |
22 | display: none; | |
23 | } | |
24 | ||
25 | #emptyDownloads { | |
26 | padding: 10px 20px; | |
27 | max-width: 40ch; | |
28 | } | |
29 | ||
64897c3a | 30 | #downloadsHistory { |
64897c3a | 31 | cursor: pointer; |
5968ec68 | 32 | margin: 4px !important; |
649b5d38 | 33 | color: #3333FF; |
5968ec68 RK |
34 | } |
35 | ||
36 | #downloadsPanel[keyfocus] > #downloadsFooter > #downloadsHistory:focus { | |
37 | outline: 1px #008484 dotted; | |
38 | outline-offset: -1px; | |
64897c3a RK |
39 | } |
40 | ||
41 | #downloadsHistory > .button-box { | |
5968ec68 | 42 | border: none; |
64897c3a RK |
43 | } |
44 | ||
589b5528 | 45 | #downloadsFooter { |
649b5d38 RK |
46 | } |
47 | ||
589b5528 | 48 | #downloadsFooter:hover { |
649b5d38 RK |
49 | } |
50 | ||
589b5528 | 51 | #downloadsFooter:hover:active { |
649b5d38 RK |
52 | } |
53 | ||
990cba4b | 54 | /*** Downloads Summary and List items ***/ |
64897c3a | 55 | |
990cba4b | 56 | #downloadsSummary, |
64897c3a RK |
57 | richlistitem[type="download"] { |
58 | height: 7em; | |
990cba4b RK |
59 | -moz-padding-end: 0; |
60 | color: inherit; | |
61 | } | |
62 | ||
63 | #downloadsSummary { | |
64 | padding: 8px 38px 8px 12px; | |
65 | cursor: pointer; | |
5968ec68 RK |
66 | -moz-user-focus: normal; |
67 | } | |
68 | ||
69 | #downloadsPanel[keyfocus] > #downloadsFooter > #downloadsSummary:focus { | |
70 | outline: 1px #008484 dotted; | |
71 | outline-offset: -5px; | |
990cba4b RK |
72 | } |
73 | ||
74 | #downloadsSummary > .downloadTypeIcon { | |
5968ec68 | 75 | list-style-image: url("chrome://browser/skin/downloads/download-summary.png"); |
990cba4b RK |
76 | } |
77 | ||
78 | #downloadsSummaryDescription { | |
5968ec68 | 79 | color: #3333FF; |
990cba4b RK |
80 | } |
81 | ||
82 | richlistitem[type="download"] { | |
64897c3a RK |
83 | margin: 0; |
84 | border-bottom: 1px dotted #9C9CFF; | |
85 | background: transparent; | |
fcfb76ce | 86 | padding: 8px; |
64897c3a RK |
87 | } |
88 | ||
89 | richlistitem[type="download"]:first-child { | |
90 | /* border-top: 1px solid transparent;*/ | |
91 | } | |
92 | ||
93 | #downloadsListBox:-moz-focusring > richlistitem[type="download"][selected] { | |
94 | outline: 1px #008484 dotted; | |
95 | outline-offset: -1px; | |
b8384c33 | 96 | /*-moz-outline-radius: 3px;*/ |
64897c3a RK |
97 | } |
98 | ||
64897c3a RK |
99 | .downloadTypeIcon { |
100 | -moz-margin-end: 8px; | |
101 | /* Prevent flickering when changing states. */ | |
a6757852 RK |
102 | height: 32px; |
103 | width: 32px; | |
64897c3a RK |
104 | } |
105 | ||
106 | .blockedIcon { | |
107 | list-style-image: url("chrome://global/skin/icons/alert-error.gif"); | |
108 | } | |
109 | ||
5968ec68 RK |
110 | /* We hold .downloadTarget, .downloadProgress and .downloadDetails inside of |
111 | a vbox with class .downloadContainer. We set the font-size of the entire | |
112 | container to 90% because: | |
113 | ||
114 | 1) This is the size that we want .downloadDetails to be | |
115 | 2) The container's width is set by localizers by &downloadDetails.width;, | |
116 | which is a ch unit. Since this is the value that should control the | |
117 | panel width, we apply it to the outer container to constrain | |
118 | .downloadTarget and .downloadProgress. | |
119 | ||
120 | Finally, since we want .downloadTarget's font-size to be at 100% of the | |
121 | font-size of .downloadContainer's parent, we use calc to go from the | |
122 | smaller font-size back to the original font-size. | |
123 | */ | |
124 | #downloadsSummaryDetails, | |
125 | .downloadContainer { | |
126 | font-size: 90%; | |
127 | } | |
128 | ||
129 | #downloadsSummaryDescription, | |
64897c3a RK |
130 | .downloadTarget { |
131 | margin-bottom: 6px; | |
132 | cursor: inherit; | |
133 | } | |
134 | ||
5968ec68 RK |
135 | .downloadTarget { |
136 | font-size: calc(100%/0.9); | |
137 | } | |
138 | ||
139 | #downloadsSummaryDetails, | |
64897c3a RK |
140 | .downloadDetails { |
141 | opacity: 0.6; | |
64897c3a RK |
142 | cursor: inherit; |
143 | } | |
144 | ||
145 | .downloadButton { | |
64897c3a RK |
146 | min-width: 0; |
147 | min-height: 0; | |
5968ec68 RK |
148 | margin: 3px; |
149 | /* border: none; */ | |
64897c3a RK |
150 | background: transparent; |
151 | padding: 5px; | |
152 | list-style-image: url("chrome://browser/skin/downloads/buttons.png"); | |
153 | } | |
154 | ||
155 | .downloadButton > .button-box { | |
5968ec68 | 156 | border: 1px solid transparent; |
64897c3a RK |
157 | padding: 0; |
158 | } | |
159 | ||
5968ec68 RK |
160 | #downloadsPanel[keyfocus] .downloadButton:focus > .button-box { |
161 | border: 1px dotted #008484; | |
162 | } | |
163 | ||
64897c3a RK |
164 | /*** Highlighted list items ***/ |
165 | ||
ed1a91c6 | 166 | /* #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover { */ |
e75098eb | 167 | #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"]:hover { |
5968ec68 | 168 | border-radius: 3px; |
64897c3a RK |
169 | background-color: #794900; |
170 | color: #FFCF00; | |
171 | cursor: pointer; | |
172 | } | |
173 | ||
649b5d38 RK |
174 | #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover:active { |
175 | } | |
176 | ||
64897c3a RK |
177 | /*** Button icons ***/ |
178 | ||
e184b661 | 179 | .downloadButton.downloadConfirmBlock, |
64897c3a | 180 | .downloadButton.downloadCancel { |
fcfb76ce | 181 | -moz-image-region: rect(0px, 16px, 16px, 0px); |
64897c3a | 182 | } |
e184b661 RK |
183 | richlistitem[type="download"]:hover > stack > .downloadButton.downloadConfirmBlock, |
184 | richlistitem[type="download"]:hover > stack > .downloadButton.downloadConfirmBlock:hover, | |
185 | richlistitem[type="download"]:hover > stack > .downloadButton.downloadConfirmBlock:active, | |
5968ec68 RK |
186 | richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel, |
187 | richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:hover, | |
188 | richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:active { | |
fcfb76ce | 189 | -moz-image-region: rect(0px, 32px, 16px, 16px); |
64897c3a RK |
190 | } |
191 | ||
192 | .downloadButton.downloadShow { | |
fcfb76ce | 193 | -moz-image-region: rect(16px, 16px, 32px, 0px); |
64897c3a | 194 | } |
5968ec68 RK |
195 | richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow, |
196 | richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow:hover, | |
197 | richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow:active { | |
fcfb76ce | 198 | -moz-image-region: rect(16px, 32px, 32px, 16px); |
64897c3a RK |
199 | } |
200 | ||
201 | .downloadButton.downloadRetry { | |
fcfb76ce | 202 | -moz-image-region: rect(32px, 16px, 48px, 0px); |
64897c3a | 203 | } |
5968ec68 RK |
204 | richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry, |
205 | richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:hover, | |
206 | richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:active { | |
fcfb76ce | 207 | -moz-image-region: rect(32px, 32px, 48px, 16px); |
64897c3a | 208 | } |