add missing messebnger stylesheets
[themes.git] / LCARStrek / browser / downloads / downloads.css
... / ...
CommitLineData
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/* === BEGIN downloads.inc.css === */
6
7/* In the original, this is at the end of the file as a preprocessor-include */
8@import url("progressmeter.inc.css");
9
10/*** Panel and outer controls ***/
11
12#downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent {
13 overflow: hidden;
14 display: block;
15}
16
17#downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent,
18#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
19 padding: 0;
20}
21
22#downloadsListBox {
23 background-color: transparent;
24 color: inherit;
25 margin: 0;
26}
27
28#emptyDownloads {
29 padding: 16px 25px;
30 margin: 0;
31 /* The panel can be wider than this description after the blocked subview is
32 shown, so center the text. */
33 text-align: center;
34}
35
36.downloadsPanelFooter {
37/* background-color: var(--arrowpanel-dimmed);
38 border-top: 1px solid var(--panel-separator-color);*/
39}
40
41.downloadsPanelFooter toolbarseparator,
42richlistitem[type="download"] > toolbarseparator {
43 margin: 0;
44 border: 0;
45 min-width: 0;
46/* border-left: 1px solid var(--panel-separator-color);
47 -moz-appearance: none;*/
48}
49
50.downloadsPanelFooterButton {
51 margin: 0;
52 padding: 0;
53 min-width: 0;
54/* min-height: 40px;*/
55 border: none;
56}
57
58.downloadsPanelFooterButton:hover {
59}
60
61.downloadsPanelFooterButton:hover:active,
62.downloadsPanelFooterButton[open="true"] {
63}
64
65.downloadsPanelFooterButton[default] {
66}
67
68.downloadsPanelFooterButton[default]:hover {
69}
70
71.downloadsPanelFooterButton[default]:hover:active {
72}
73
74.downloadsPanelFooterButton > .button-box {
75 padding: 0;
76 margin: 0;
77 border: none;
78}
79
80#downloadsHistory {
81 padding-inline-start: 10px;
82 padding-inline-end: 10px;
83}
84
85#downloadsPanel[hasdownloads] #downloadsFooterButtons:not(.downloadsHideDropmarker) > #downloadsHistory {
86 padding-inline-start: 68px;
87}
88
89toolbarseparator.downloadsDropmarkerSplitter {
90 margin: 7px 0;
91}
92
93richlistitem[type="download"] > toolbarseparator {
94 margin: 10px 0;
95}
96
97richlistitem[type="download"]:hover > toolbarseparator,
98#downloadsFooter:hover toolbarseparator.downloadsDropmarkerSplitter,
99#downloadsFooter[showingdropdown] toolbarseparator {
100 margin: 0;
101}
102
103.downloadsDropmarker {
104 padding: 0 21px;
105}
106
107.downloadsDropmarker > .button-box > hbox {
108 display: none;
109}
110
111.downloadsDropmarker > .button-box > .button-menu-dropmarker {
112 display: -moz-box;
113 padding: 0;
114 margin: 0;
115}
116
117.downloadsDropmarker > .button-box > .button-menu-dropmarker > .dropmarker-icon {
118 width: 16px;
119 height: 16px;
120/* list-style-image: url("chrome://global/skin/icons/menubutton-dropmarker.svg");
121 filter: url("chrome://global/skin/filters.svg#fill");
122 fill: currentColor;*/
123}
124
125/* Override default icon size which is too small for this dropdown */
126.downloadsDropmarker > .button-box > .button-menu-dropmarker {
127 width: 16px;
128 height: 16px;
129}
130
131#downloadsSummary {
132 -moz-user-focus: normal;
133}
134
135#downloadsSummary > .downloadTypeIcon {
136 list-style-image: url("chrome://browser/skin/downloads/download-summary.svg");
137}
138
139#downloadsSummaryDescription {
140 color: #3333FF;
141}
142
143/*** List items and similar elements in the summary ***/
144
145#downloadsSummary,
146richlistitem[type="download"] {
147 height: var(--downloads-item-height);
148}
149
150richlistitem[type="download"] {
151 border-bottom: 1px solid var(--panel-separator-color);
152 background: transparent;
153 color: inherit;
154}
155
156richlistitem[type="download"]:last-child {
157 border-bottom: none;
158}
159
160.downloadTypeIcon {
161 margin: 8px 13px;
162 width: 32px;
163 height: 32px;
164}
165
166.downloadBlockedBadge {
167 margin: 0 5px;
168 background: url("chrome://browser/skin/downloads/download-blocked.svg") top right / 16px no-repeat;
169}
170
171downloadBlockedBadge:-moz-locale-dir(rtl) {
172 background-position-x: left;
173}
174
175richlistitem[type="download"][verdict="PotentiallyUnwanted"] .downloadBlockedBadge {
176 background-image: url("chrome://browser/skin/warning.svg");
177}
178
179richlistitem[type="download"][verdict="Uncommon"] .downloadBlockedBadge {
180 background-image: url("chrome://browser/skin/info.svg");
181}
182
183/* We hold .downloadTarget, .downloadProgress and .downloadDetails inside of
184 a vbox with class .downloadContainer. We set the font-size of the entire
185 container to --downloads-item-font-size-factor because:
186
187 1) This is the size that we want .downloadDetails to be
188 2) The container's width is set by localizers by &downloadDetails.width;,
189 which is a ch unit. Since this is the value that should control the
190 panel width, we apply it to the outer container to constrain
191 .downloadTarget and .downloadProgress.
192
193 Finally, since we want .downloadTarget's font-size to be at 100% of the
194 font-size of .downloadContainer's parent, we use calc to go from the
195 smaller font-size back to the original font-size.
196 */
197.downloadContainer {
198 font-size: calc(100% * var(--downloads-item-font-size-factor));
199 margin-inline-end: 13px;
200}
201
202#downloadsSummaryDescription,
203.downloadTarget {
204 margin: 0;
205 font-size: calc(100% / var(--downloads-item-font-size-factor));
206}
207
208#downloadsSummaryDetails,
209.downloadDetails {
210 opacity: var(--downloads-item-details-opacity);
211 /* Use calc() to keep the height consistent with .downloadTarget, so that the
212 progress bar can be vertically centered. */
213 margin: 4px 0 calc(1em / var(--downloads-item-font-size-factor) - 1em);
214}
215
216/* The following rules control which message is shown under the name of the
217 download, using a set of elements that share the class ".downloadDetails".
218 At any given time, only one of these elements is displayed. We use a set of
219 rules to hide the elements that shouldn't be displayed in each case. */
220
221/* The full status message is only displayed in the Downloads View. */
222.downloadDetailsFull {
223 display: none;
224}
225
226/* When hovering the mouse pointer over the item, instead of the normal message
227 we display a more detailed one. */
228richlistitem[type="download"]:hover > .downloadMainArea > .downloadContainer > .downloadDetailsNormal,
229richlistitem[type="download"]:not(:hover) > .downloadMainArea > .downloadContainer > .downloadDetailsHover {
230 display: none;
231}
232
233/* When hovering the action button in particular, instead of the usual hover
234 message we display the command associated with the button. */
235richlistitem[type="download"].downloadHoveringButton > .downloadMainArea > .downloadContainer > .downloadDetailsHover,
236richlistitem[type="download"]:not(.downloadHoveringButton) > .downloadMainArea > .downloadContainer > .downloadButtonLabels {
237 display: none;
238}
239
240/* When hovering the main area of a finished download whose target exists,
241 instead of the usual hover message we display the "Open File" command. */
242richlistitem[type="download"][state="1"][exists] > .downloadMainArea:hover > .downloadContainer > .downloadDetailsHover,
243richlistitem[type="download"]:not([state="1"]) > .downloadMainArea > .downloadContainer > .downloadOpenFile,
244richlistitem[type="download"]:not([exists]) > .downloadMainArea > .downloadContainer > .downloadOpenFile,
245.downloadMainArea:not(:hover) > .downloadContainer > .downloadOpenFile {
246 display: none;
247}
248
249/* When hovering items blocked by Application Reputation, instead of the other
250 hover messages we display the "Show more information" label. */
251richlistitem[type="download"][verdict] > .downloadMainArea > .downloadContainer > .downloadDetailsHover,
252richlistitem[type="download"][verdict] > .downloadMainArea > .downloadContainer > .downloadButtonLabels,
253richlistitem[type="download"]:not([verdict]) > .downloadMainArea > .downloadContainer > .downloadShowMoreInfo,
254richlistitem[type="download"]:not(:hover) > .downloadMainArea > .downloadContainer > .downloadShowMoreInfo {
255 display: none;
256}
257
258richlistitem[type="download"][verdict] > toolbarseparator {
259 visibility: hidden;
260}
261
262.downloadButton {
263 min-width: 58px;
264 margin: 0;
265/* border: none; */
266 background: transparent;
267 padding: 0;
268 color: inherit;
269}
270
271.downloadButton > .button-box > .button-icon {
272 width: 16px;
273 height: 16px;
274 margin: 1px;
275 filter: url("chrome://global/skin/filters.svg#fill");
276 fill: currentColor;
277}
278
279.downloadButton > .button-box > .button-text {
280 margin: 0 !important;
281 padding: 0;
282}
283
284richlistitem[type="download"][state="1"][exists] .downloadMainArea:hover,
285richlistitem[type="download"]:not([verdict]) > .downloadButtonArea:hover,
286richlistitem[type="download"][verdict]:hover {
287 background-color: var(--arrowpanel-dimmed);
288}
289
290richlistitem[type="download"][state="1"][exists] > .downloadMainArea:hover:active,
291richlistitem[type="download"]:not([verdict]) > .downloadButtonArea:hover:active,
292richlistitem[type="download"][verdict]:hover:active {
293 background-color: var(--arrowpanel-dimmed-further);
294}
295
296richlistitem[type="download"][showingsubview] {
297 background-color: #794900;
298 color: #FFCF00;
299 transition: background-color var(--panelui-subview-transition-duration),
300 color var(--panelui-subview-transition-duration);
301}
302
303richlistitem[type="download"][verdict="Malware"]:hover,
304richlistitem[type="download"][verdict="Malware"]:hover:active,
305richlistitem[type="download"][verdict="Malware"][showingsubview] {
306 background-color: #FF0000;
307 color: #000000;
308}
309
310/*** Button icons ***/
311
312.downloadIconCancel > .button-box > .button-icon {
313 list-style-image: url("chrome://browser/skin/panel-icons.svg#cancel");
314}
315
316.downloadIconShow > .button-box > .button-icon {
317 list-style-image: url("chrome://browser/skin/panel-icons.svg#folder");
318}
319
320.downloadIconRetry > .button-box > .button-icon {
321 list-style-image: url("chrome://browser/skin/panel-icons.svg#retry");
322}
323
324.downloadShowBlockedInfo > .button-box > .button-icon {
325 list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-right");
326}
327
328.downloadShowBlockedInfo > .button-box > .button-icon:-moz-locale-dir(rtl) {
329 list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-left");
330}
331
332/*** Blocked subview ***/
333
334#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype=main] > .panel-subviews {
335 /* When the main view is showing, the shadow on the left edge of the subview is
336 barely visible on the right edge of the main view, so set it to none. */
337 box-shadow: none;
338}
339
340/* When the subview is showing, turn the download button into an arrow pointing
341 back to the main view. */
342#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton {
343 color: #FFCF00;
344}
345
346#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton > .button-box > .button-icon {
347 list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-left");
348}
349
350#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton > .button-box > .button-icon:-moz-locale-dir(rtl) {
351 list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-right");
352}
353
354#downloadsPanel-blockedSubview {
355 background-image: url("chrome://browser/skin/warning.svg");
356 background-size: 32px 32px;
357 background-position: 16px 16px;
358 background-repeat: no-repeat;
359}
360
361#downloadsPanel-blockedSubview:-moz-locale-dir(rtl) {
362 background-position: calc(100% - 16px) 16px;
363}
364
365#downloadsPanel-blockedSubview[verdict=Malware] {
366 background-image: url("chrome://browser/skin/downloads/download-blocked.svg");
367}
368
369#downloadsPanel-blockedSubview-title {
370 margin-top: 16px;
371 margin-bottom: 16px;
372 font-size: calc(100% / var(--downloads-item-font-size-factor));
373}
374
375#downloadsPanel-blockedSubview-details1,
376#downloadsPanel-blockedSubview-details2 {
377 font-size: calc(100% * var(--downloads-item-font-size-factor));
378 margin-bottom: 16px;
379 opacity: var(--downloads-item-details-opacity);
380}
381
382#downloadsPanel-blockedSubview-title,
383#downloadsPanel-blockedSubview-details1,
384#downloadsPanel-blockedSubview-details2 {
385 -moz-margin-start: 64px;
386 -moz-margin-end: 16px;
387}
388
389/*** Progressmeter ***/
390/* %include progressmeter.inc.css - this happens as @import at the start of the file */
391
392/* === END downloads.inc.css === */
393
394/*** Panel and outer controls ***/
395
396#downloadsPanel[keyfocus] #downloadsSummary:focus,
397#downloadsPanel[keyfocus] .downloadsPanelFooterButton:focus {
398 outline: 1px #008484 dotted;
399 outline-offset: -1px;
400}
401
402#downloadsPanel[keyfocus] #downloadsSummary:focus {
403 outline-offset: -5px;
404}
405
406richlistitem[type="download"][showingsubview] {
407 background-color: Highlight;
408 color: HighlightText;
409 transition: background-color var(--panelui-subview-transition-duration),
410 color var(--panelui-subview-transition-duration);
411}
412
413#downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"][exists][verdict="Malware"]:hover,
414#downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"][exists][verdict="Malware"]:hover:active,
415richlistitem[type="download"][showingsubview][verdict="Malware"] {
416 background-color: hsl(4, 82%, 47%);
417 color: white;
418}
419
420
421/*** List items and similar elements in the summary ***/
422
423:root {
424 --downloads-item-height: 5.5em;
425 --downloads-item-font-size-factor: 0.9;
426 --downloads-item-details-opacity: 0.6;
427}
428
429.downloadButton > .button-box {
430 border: 1px solid transparent;
431}
432
433#downloadsPanel[keyfocus] .downloadButton:focus > .button-box {
434 border: 1px dotted #008484;
435}
436
437richlistitem[type="download"][verdict="PotentiallyUnwanted"] .blockedIcon {
438 list-style-image: url("chrome://global/skin/icons/warning.svg");
439}
440
441richlistitem[type="download"][verdict="Uncommon"] .blockedIcon {
442 list-style-image: url("chrome://global/skin/icons/info.svg");
443}
444
445@media (-moz-windows-default-theme) {
446 richlistitem[type="download"][verdict="Malware"] {
447 color: #FF0000;
448 }
449}
450
451/*** Highlighted list items ***/
452
453#downloadsListBox:-moz-focusring > richlistitem[type="download"][selected] {
454 outline: 1px #008484 dotted;
455 outline-offset: -1px;
456 /*-moz-outline-radius: 3px;*/
457}