fourth part of syncing LCARStrek with Firefox 41 windows theme changes
[themes.git] / LCARStrek / browser / customizableui / panelUIOverlay.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
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
4
5/* === BEGIN panelUIOverlay.inc.css === */
6
7#PanelUI-popup #PanelUI-contents:empty {
8 height: 128px;
9}
10
11#PanelUI-popup #PanelUI-contents:empty::before {
12 content: "";
13 background-image: url("chrome://browser/skin/customizableui/whimsy-bw.png");
14 display: block;
15 width: 64px;
16 height: 64px;
17 position: absolute;
18 transition: transform 1s ease-out;
19 animation: whimsyMoveX 3.05s linear 0s infinite alternate,
20 whimsyMoveY 3.4s linear 0s infinite alternate;
21}
22
23#PanelUI-popup #PanelUI-contents:active:empty::before {
24 animation: whimsyMoveX 3.05s linear 0s infinite alternate,
25 whimsyMoveY 3.4s linear 0s infinite alternate,
26 whimsyRotate 1s linear 0s infinite normal;
27}
28
29#PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):empty::before {
30 animation: whimsyMoveXRTL 3.05s linear 0s infinite alternate,
31 whimsyMoveY 3.4s linear 0s infinite alternate;
32}
33
34#PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):active:empty::before {
35 animation: whimsyMoveXRTL 3.05s linear 0s infinite alternate,
36 whimsyMoveY 3.4s linear 0s infinite alternate,
37 whimsyRotate 1s linear 0s infinite normal;
38}
39
40#PanelUI-popup #PanelUI-contents:empty:hover::before {
41 background-image: url("chrome://browser/skin/customizableui/whimsy.png");
42}
43
44@media (min-resolution: 2dppx) {
45 #PanelUI-popup #PanelUI-contents:empty::before {
46 background-image: url("chrome://browser/skin/customizableui/whimsy-bw@2x.png");
47 background-size: 64px 64px;
48 }
49 #PanelUI-popup #PanelUI-contents:empty:hover::before {
50 background-image: url("chrome://browser/skin/customizableui/whimsy@2x.png");
51 }
52}
53
54@keyframes whimsyMoveX {
55 /* These values are adjusted for the padding on the panel. */
56 from { margin-left: -9px; } to { margin-left: calc(100% - 55px); }
57}
58
59@keyframes whimsyMoveXRTL {
60 /* These values are adjusted for the padding on the panel. */
61 from { margin-right: -9px; } to { margin-right: calc(100% - 55px); }
62}
63
64@keyframes whimsyMoveY {
65 /* These values are adjusted for the padding and height of the panel. */
66 from { margin-top: -.5em; } to { margin-top: calc(64px - .5em); }
67}
68
69@keyframes whimsyRotate {
70 to { transform: perspective(5000px) rotateY(360deg); }
71}
72
73#customization-panelHolder {
74 border-radius: 4px;
75}
76
77#PanelUI-button {
78 -moz-margin-start: 3px;
79}
80
81#PanelUI-button:-moz-locale-dir(rtl) {
82}
83
84#PanelUI-menu-button[update-status="succeeded"] .toolbarbutton-badge::after {
85 content: url(chrome://browser/skin/update-badge.svg);
86 background-color: #008484;
87 height: 10px;
88}
89
90.panel-subviews {
91 padding: 4px;
92 -moz-margin-start: 38px;
93}
94
95.panel-viewstack[viewtype="main"] > .panel-subviews {
96 transform: translateX(22.35em);
97}
98
99.panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
100 transform: translateX(-22.35em);
101}
102
103panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
104 display: none;
105}
106
107.panel-viewstack:not([viewtype="main"]) > .panel-mainview > #PanelUI-mainView {
108 -moz-box-flex: 1;
109}
110
111.panel-subview-body {
112 overflow-y: auto;
113 overflow-x: hidden;
114 -moz-box-flex: 1;
115}
116
117#PanelUI-popup .panel-subview-body {
118 margin: -4px;
119 padding: 4px 4px;
120}
121
122.panel-subview-header,
123.subviewbutton.panel-subview-footer {
124 box-sizing: border-box;
125/* min-height: 41px; */
126 padding: 3px;
127}
128
129.panel-subview-header {
130 margin: 0 0 4px;
131 background-color: #A09090;
132 color: #000000;
133 font-variant: small-caps;
134 border-radius: 4px;
135}
136
137.panel-subview-footer {
138 border-top: 1px solid #A09090;
139}
140
141.cui-widget-panelview .panel-subview-header {
142 display: none;
143}
144
145.cui-widget-panelview .subviewbutton.panel-subview-footer {
146 margin: 4px 0 0;
147 -moz-box-pack: center;
148}
149
150#PanelUI-mainView {
151 display: flex;
152 flex-direction: column;
153 border-radius: 4px;
154}
155
156#app-extension-point-end > #PanelUI-menu-button {
157 padding: 2px 5px;
158}
159#app-extension-point-end > #PanelUI-menu-button .toolbarbutton-text {
160 display: none;
161}
162#app-extension-point-end > #PanelUI-menu-button .toolbarbutton-icon {
163 margin: 0;
164}
165
166#PanelUI-popup > arrowscrollbox > autorepeatbutton {
167 display: none;
168}
169#PanelUI-popup > arrowscrollbox > scrollbox {
170 overflow: visible;
171}
172
173#PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent {
174 overflow: hidden;
175 padding: 0;
176}
177
178#PanelUI-contents {
179 padding: .5em 0;
180}
181
182.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
183.panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
184/* line-height: 1.1;*/
185 max-height: 2.2em;
186}
187
188.panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
189.panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-multiline-text {
190 -moz-hyphens: auto;
191}
192
193.panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
194.panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-multiline-text {
195 position: absolute;
196 clip: rect(auto, auto, 2.3em, auto);
197}
198
199.panelUI-grid .toolbarbutton-1 > .toolbarbutton-text,
200.panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
201 text-align: center;
202 /* Need to override toolkit theming which sets margin: 0 !important; */
203 margin: 2px 0 0 !important;
204}
205
206.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
207 text-align: center;
208 margin: -1px 0 0;
209}
210
211#wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls,
212#wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls {
213 -moz-margin-start: 0;
214}
215
216#PanelUI-contents {
217 max-width: 22.35em;
218}
219
220#BMB_bookmarksPopup,
221.panel-mainview:not([panelid="PanelUI-popup"]) {
222 max-width: 30em;
223}
224
225/* Bug 1164419 - increase Pocket panel size to accomidate wider Russian text. */
226panelmultiview[mainViewId=PanelUI-pocketView] > .panel-viewcontainer > .panel-viewstack > .panel-mainview:not([panelid="PanelUI-popup"]) {
227 max-width: 33em; /* standaloneSubviewWidth + 3 */
228}
229
230panelview:not([mainview]) .toolbarbutton-text,
231.cui-widget-panel toolbarbutton > .toolbarbutton-text {
232 text-align: start;
233 display: -moz-box;
234}
235
236.cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {
237 padding: 0;
238}
239
240.cui-widget-panel[viewId="PanelUI-pocketView"] > .panel-arrowcontainer > .panel-arrowcontent {
241 padding-top: 0;
242 padding-bottom: 0;
243}
244
245.cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
246 padding-bottom: 0;
247}
248
249.cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):first-child {
250 border-radius: 4px 4px 0 0;
251}
252
253.cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):last-child {
254 border-radius: 0 0 4px 4px;
255}
256
257#PanelUI-contents {
258 display: block;
259 flex: 1 0 auto;
260 margin-left: auto;
261 margin-right: auto;
262 max-width: 22.35em;
263}
264
265#PanelUI-contents-scroller {
266 overflow-y: auto;
267 overflow-x: hidden;
268 width: 22.35em;
269 flex: auto;
270}
271
272.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon {
273 min-width: 0;
274 min-height: 0;
275 margin: 0;
276}
277
278toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
279.panelUI-grid .toolbarbutton-1,
280.panel-customization-placeholder-child {
281 -moz-appearance: none;
282 -moz-box-orient: vertical;
283 width: calc(22.35em / 3 - 0.1px - 2px); /* LCARStrek: XXX: found out to be needed to fit the icons */
284 height: calc(51px + 2.2em);
285}
286
287/* In order to have button labels constrained appropriately, items inside the toolbarpaletteitem
288 * should have a min-width set so they abide by the width set above (which they do outside of
289 * customize mode because they're in a flexed container) */
290toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 {
291 min-width: 0.01px;
292}
293
294/* Help SDK buttons fit in. */
295toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-icon,
296toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-badge-container > .toolbarbutton-icon,
297toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon,
298toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-badge-container > .toolbarbutton-icon {
299 height: 32px;
300 width: 32px;
301}
302
303.customization-palette .toolbarbutton-1 {
304 -moz-appearance: none;
305 -moz-box-orient: vertical;
306}
307
308.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
309 -moz-appearance: none;
310 -moz-box-orient: vertical;
311 width: calc(22.35em / 3 - 0.1px - 2px);
312 height: calc(49px + 2.2em);
313 border: 0;
314}
315
316.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text,
317.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
318 margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */
319}
320
321.panel-customization-placeholder-child {
322 margin: 6px 0 0;
323/* padding: 2px 6px;*/
324}
325
326.panelUI-grid .toolbarbutton-1[type="menu"] {
327 background-image: url("chrome://global/skin/arrow/arrow-down-sharp.gif");
328 background-position: right 3px top 16px;
329 background-repeat: no-repeat;
330}
331
332.panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) {
333 background-position: left 3px top 16px;
334}
335
336.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
337 display: none;
338}
339
340.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
341 -moz-box-align: center;
342 width: 16px;
343 -moz-margin-start: -16px;
344 height: 51px;
345 margin-bottom: 2.2em;
346 padding: 0;
347}
348
349.panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active) > .toolbarbutton-menubutton-dropmarker {
350 border-radius: 0 0 0 2px;
351}
352
353.panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active)> .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
354 border-radius: 0 0 2px 0;
355}
356
357#main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon {
358/* opacity: .5; */
359}
360
361toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
362 width: calc(22.35em / 3 - 0.1px);
363 margin: 0 !important;
364}
365
366toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
367 -moz-box-align: center;
368 -moz-box-pack: center;
369}
370
371toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
372 margin: 4px auto;
373}
374
375#PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview > #PanelUI-mainView {
376}
377
378#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
379#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
380#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-update-status,
381#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
382#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-label,
383#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-icon,
384#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator,
385#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize,
386#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) {
387 opacity: .5;
388}
389
390/*
391 * XXXgijs: this is a workaround for a layout issue that was caused by these iframes,
392 * which was affecting subview display. Because of this, we're hiding the iframe *only*
393 * when displaying a subview. The discerning user might notice this, but it's not nearly
394 * as bad as the brokenness.
395 * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375
396 * is addressed.
397 */
398#PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe {
399 visibility: hidden;
400}
401
402toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
403 text-align: center;
404}
405
406.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
407.panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
408.panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container,
409.customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
410.customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
411.customization-palette .toolbarbutton-1 > .toolbarbutton-badge-container,
412.panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
413.customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
414.panel-customization-placeholder-child > .toolbarbutton-icon {
415 min-width: 32px;
416 min-height: 32px;
417 /* Explanation for the below formula (A / B - C)
418 A
419 Each button is 22.35em / 3 - 0.1px wide
420 B
421 Each button has two margins.
422 C (44px / 2 = 22px)
423 The button icon is 32 pixels wide.
424 The button has 12px of horizontal padding (6 on each side).
425 The button has 0px of horizontal border (0 on each side).
426 Total width of button's icon + button padding should therefore be 44px,
427 which means each horizontal margin should be the half the button's width - (44/2) px.
428 */
429 margin: 4px calc((22.35em / 3 - 0.1px) / 2 - 22px);
430}
431
432/* above we treat the container as the icon for the margins, that is so the
433/* badge itself is positioned correctly. Here we make sure that the icon itself
434/* has the minum size we want, but no padding/margin. */
435.panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon,
436.customization-palette .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon {
437 width: 32px;
438 height: 32px;
439 min-width: 32px;
440 min-height: 32px;
441 margin: 0;
442 padding: 0;
443}
444
445toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
446 -moz-box-flex: 1;
447}
448
449#personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
450 -moz-box-flex: 1;
451}
452
453#personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
454 -moz-margin-end: 2px;
455}
456
457#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
458#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
459 border-left: none;
460 border-right: none;
461 border-radius: 0;
462}
463
464#zoom-in-button > .toolbarbutton-text,
465#zoom-out-button > .toolbarbutton-text,
466#zoom-reset-button > .toolbarbutton-icon {
467 display: none;
468}
469
470#PanelUI-footer {
471 display: flex;
472 flex-shrink: 0;
473 flex-direction: column;
474/* background-color: hsla(210,4%,10%,.07);*/
475 padding: 0;
476 margin: 0;
477/* min-height: 4em;*/
478 border-bottom-right-radius: 4px;
479 border-bottom-left-radius: 4px;
480}
481
482#main-window[customizing] #PanelUI-footer-fxa > toolbarseparator {
483 display: none;
484}
485
486#PanelUI-footer-fxa:not([fxastatus="signedin"]) > toolbarseparator,
487#PanelUI-footer-fxa:not([fxastatus="signedin"]) > #PanelUI-fxa-icon,
488#PanelUI-footer-fxa:not([fxaprofileimage]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
489 display: none;
490}
491
492#PanelUI-fxa-status {
493 display: flex;
494 flex: 1 1 0%;
495}
496
497#PanelUI-footer-inner,
498#PanelUI-footer-fxa {
499 display: flex;
500 border-top: 1px solid #9C9CFF;
501}
502
503#PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner,
504#PanelUI-multiView[viewtype="subview"] #PanelUI-footer-fxa {
505 position: relative;
506}
507
508#PanelUI-footer-inner > toolbarseparator,
509#PanelUI-footer-fxa > toolbarseparator {
510 border: 0;
511 border-left: 1px solid #9C9CFF;
512 margin: 0;
513}
514
515#PanelUI-footer-inner:hover > toolbarseparator,
516#PanelUI-footer-fxa:hover > toolbarseparator {
517/* margin: 0;*/
518}
519
520#PanelUI-update-status,
521#PanelUI-help,
522#PanelUI-fxa-label,
523#PanelUI-fxa-icon,
524#PanelUI-customize,
525#PanelUI-quit {
526 margin: 0;
527 padding: 11px 0;
528 box-sizing: border-box;
529 min-height: 40px;
530 box-shadow: none;
531 border: none;
532 border-radius: 0;
533 transition: background-color;
534 -moz-box-orient: horizontal;
535}
536
537#PanelUI-update-status {
538 border-top: 1px solid #9C9CFF;
539 border-bottom: 1px solid transparent;
540 margin-bottom: -1px;
541}
542
543#PanelUI-update-status > .toolbarbutton-text {
544 width: 0; /* Fancy cropping solution for flexbox. */
545}
546
547#PanelUI-help[panel-multiview-anchor="true"] {
548 -moz-image-region: rect(0, 32px, 16px, 16px);
549}
550
551#PanelUI-help,
552#PanelUI-quit {
553 min-width: 44px;
554}
555
556#PanelUI-update-status > .toolbarbutton-text,
557#PanelUI-fxa-label > .toolbarbutton-text,
558#PanelUI-customize > .toolbarbutton-text {
559 margin: 0;
560 padding: 0 6px;
561 text-align: start;
562}
563
564#PanelUI-help > .toolbarbutton-text,
565#PanelUI-quit > .toolbarbutton-text,
566#PanelUI-fxa-avatar > .toolbarbutton-text {
567 display: none;
568}
569
570#PanelUI-update-status > .toolbarbutton-icon,
571#PanelUI-fxa-label > .toolbarbutton-icon,
572#PanelUI-fxa-icon > .toolbarbutton-icon,
573#PanelUI-customize > .toolbarbutton-icon,
574#PanelUI-help > .toolbarbutton-icon,
575#PanelUI-quit > .toolbarbutton-icon {
576 -moz-margin-end: 0;
577}
578
579#PanelUI-fxa-icon {
580 -moz-padding-start: 15px;
581 -moz-padding-end: 15px;
582}
583
584#PanelUI-fxa-label,
585#PanelUI-customize {
586 flex: 1;
587 -moz-padding-start: 15px;
588 -moz-border-start-style: none;
589}
590
591#PanelUI-footer-fxa[fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
592#PanelUI-footer-fxa[fxaprofileimage="enabled"]:not([fxastatus="error"]) > #PanelUI-fxa-status > #PanelUI-fxa-label {
593 -moz-padding-start: 0px;
594}
595
596#PanelUI-update-status {
597 width: calc(22.35em + 30px);
598 -moz-padding-start: 15px;
599 -moz-border-start-style: none;
600}
601
602#PanelUI-update-status {
603 list-style-image: url(chrome://branding/content/icon16.png);
604}
605
606#PanelUI-fxa-label,
607#PanelUI-fxa-icon {
608 list-style-image: url("chrome://browser/skin/syncFx-horizontalbar.png");
609}
610
611#PanelUI-footer-fxa[syncstatus="active"] > #PanelUI-fxa-icon {
612 list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png");
613}
614
615#PanelUI-fxa-icon[fxastatus="migrate-signup"],
616#PanelUI-fxa-icon[fxastatus="migrate-verify"] {
617 list-style-image: url(chrome://global/skin/warning-16.png);
618}
619
620#PanelUI-customize {
621 list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
622}
623
624#customization-panelHolder #PanelUI-customize {
625 list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
626}
627
628#PanelUI-help {
629 list-style-image: url("chrome://browser/skin/menuPanel-help.png");
630}
631
632#PanelUI-quit {
633 -moz-border-end-style: none;
634 list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
635}
636
637#PanelUI-fxa-label,
638#PanelUI-fxa-icon,
639#PanelUI-customize,
640#PanelUI-help,
641#PanelUI-quit {
642 -moz-image-region: rect(0, 16px, 16px, 0);
643}
644
645#PanelUI-footer-fxa[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon,
646#PanelUI-footer-fxa[fxastatus="error"][fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon {
647 display: none;
648}
649
650#PanelUI-footer-fxa[fxastatus="error"]:not([fxaprofileimage="set"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
651 display: none;
652}
653
654#PanelUI-fxa-avatar[disabled],
655#PanelUI-fxa-icon[disabled] {
656 display: none;
657}
658
659#PanelUI-fxa-avatar {
660 width: 32px;
661 height: 32px;
662 border-radius: 50%;
663 background-repeat: no-repeat;
664 background-position: 0 0;
665 background-size: contain;
666 align-self: center;
667 margin: 0px 7px;
668 padding: 0px;
669 border: 0px none;
670 -moz-margin-end: 0;
671}
672
673#PanelUI-footer-fxa[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
674 list-style-image: url(chrome://browser/skin/fxa/default-profile-image.svg);
675}
676
677#PanelUI-customize:hover,
678#PanelUI-help:not([disabled]):hover,
679#PanelUI-quit:not([disabled]):hover,
680#PanelUI-customize:hover:active,
681#PanelUI-help:not([disabled]):hover:active,
682#PanelUI-quit:not([disabled]):hover:active {
683 -moz-image-region: rect(0, 32px, 16px, 16px);
684}
685
686#PanelUI-help[disabled],
687#PanelUI-quit[disabled] {
688 -moz-image-region: rect(0, 48px, 16px, 32px);
689}
690
691#PanelUI-fxa-status:not([disabled]):hover,
692#PanelUI-fxa-icon:not([disabled]):hover,
693#PanelUI-help:not([disabled]):hover,
694#PanelUI-customize:hover,
695#PanelUI-quit:not([disabled]):hover {
696}
697
698#PanelUI-fxa-status:not([disabled]):hover:active,
699#PanelUI-fxa-icon:not([disabled]):hover:active,
700#PanelUI-help:not([disabled]):hover:active,
701#PanelUI-customize:hover:active,
702#PanelUI-quit:not([disabled]):hover:active {
703}
704
705#PanelUI-fxa-status:not([disabled]):hover,
706#PanelUI-fxa-status:not([disabled]):hover:active {
707}
708
709#PanelUI-footer-fxa[fxastatus="error"] {
710 background-color: #FF0000;
711 color: #000000;
712}
713
714#PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover {
715 background-color: #FFCF00;
716}
717
718#PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover:active {
719 background-color: #FF9F00;
720}
721
722#PanelUI-update-status {
723/* color: black; */
724}
725
726#PanelUI-update-status[update-status="succeeded"] {
727 background-color: #008484;
728 color: #000000;
729}
730
731#PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover {
732 background-color: #FFCF00;
733}
734
735#PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover:active {
736 background-color: #FF9F00;
737}
738
739#PanelUI-update-status[update-status="failed"] {
740 background-color: #FF0000;
741 color: #000000;
742}
743
744#PanelUI-update-status[update-status="failed"]:not([disabled]):hover {
745 background-color: #FFCF00;
746}
747
748#PanelUI-update-status[update-status="failed"]:not([disabled]):hover:active {
749 background-color: #FF9F00;
750}
751
752#PanelUI-quit:not([disabled]):hover {
753 background-color: #FF0000;
754}
755
756#PanelUI-quit:not([disabled]):hover:active {
757 background-color: #FF9F00;
758}
759
760#customization-panelHolder #PanelUI-customize {
761 color: #FFCF00;
762 background-color: #008484;
763 text-shadow: none;
764 margin-top: -1px;
765}
766
767#customization-panelHolder #PanelUI-customize + toolbarseparator {
768 display: none;
769}
770
771#customization-panelHolder #PanelUI-customize:hover,
772#customization-panelHolder #PanelUI-customize:hover:active {
773 background-color: #FFCF00;
774 color: #000000;
775}
776
777#customization-palette .toolbarbutton-multiline-text,
778#customization-palette .toolbarbutton-text {
779 display: none;
780}
781
782panelview .toolbarbutton-1,
783.subviewbutton,
784.widget-overflow-list .toolbarbutton-1,
785.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
786.share-provider-button,
787.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
788/* padding: 0 6px;
789 background-color: hsla(210,4%,10%,0);
790 border-radius: 2px;
791 border-style: solid;
792 border-color: hsla(210,4%,10%,0);*/
793}
794
795panelview .toolbarbutton-1,
796.subviewbutton,
797.widget-overflow-list .toolbarbutton-1,
798.share-provider-button,
799.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
800 border-width: 0;
801}
802
803.subviewbutton.panel-subview-footer {
804/* border-radius: 0; */
805 margin: 2px 0 0;
806}
807
808.subviewbutton.panel-subview-footer > .menu-text {
809 -moz-margin-start: 0px !important;
810 -moz-padding-start: 6px;
811 -moz-padding-end: 6px;
812 -moz-box-flex: 0;
813 text-align: center;
814}
815
816.subviewbutton.panel-subview-footer > .toolbarbutton-icon {
817 margin: 0;
818}
819
820.subviewbutton.panel-subview-footer > .toolbarbutton-text {
821 text-align: center;
822 padding: 0;
823}
824
825.subviewbutton.panel-subview-footer > .menu-accel-container {
826 -moz-padding-start: 6px;
827}
828
829.subviewbutton:not(.panel-subview-footer) {
830 margin: 0;
831}
832
833.subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
834/* Bookmark items need a more specific selector. */
835.PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
836.PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
837/* font: menu;*/
838}
839
840.PanelUI-subView .subviewbutton[shortcut]::after {
841 content: attr(shortcut);
842 float: right;
843 color: #A09090;
844}
845
846.PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
847 -moz-margin-start: 10px;
848}
849
850/* This is a <label> but it should fit in with the menu font- and colorwise. */
851#PanelUI-characterEncodingView-autodetect-label {
852 font: menu;
853 color: inherit;
854}
855
856.cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
857/* margin-left: 4px;
858 margin-right: 4px;*/
859}
860
861panelview .toolbarbutton-1,
862.widget-overflow-list .toolbarbutton-1 {
863 margin-top: 6px;
864}
865
866/*
867panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
868toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover,
869menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
870menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
871.share-provider-button:not(:-moz-any([disabled],[open],:active)):hover,
872.widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
873.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
874 > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
875 background-color: hsla(210,4%,10%,.08);
876 border-color: hsla(210,4%,10%,.11);
877}
878
879.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],:active)):hover {
880 border-color: hsla(210,4%,10%,.11);
881}
882
883panelview .toolbarbutton-1:-moz-any(:not([disabled]):-moz-any([open],:hover:active),[checked=true]),
884toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],:hover:active),
885menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
886menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
887.share-provider-button:not([disabled]):-moz-any([open],:hover:active),
888.widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active),
889.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
890 > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) {
891 background-color: hsla(210,4%,10%,.12);
892 border-color: hsla(210,4%,10%,.14);
893 box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
894}
895
896.subviewbutton.panel-subview-footer {
897 margin: 4px -4px -4px;
898 background-color: hsla(210,4%,10%,.07);
899 border-top: 1px solid hsla(210,4%,10%,.12);
900 border-radius: 0;
901 color: hsl(0,0%,25%)
902}
903
904menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
905.subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
906 background-color: hsla(210,4%,10%,.1);
907 border-top: 1px solid hsla(210,4%,10%,.12);
908}
909
910menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
911.subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active) {
912 background-color: hsla(210,4%,10%,.15);
913 border-top: 1px solid hsla(210,4%,10%,.12);
914 box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
915}
916
917#BMB_bookmarksPopup .subviewbutton {
918 font: menu;
919 font-weight: normal;
920}
921
922#BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
923 color: inherit;
924}
925
926#BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
927#BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
928 -moz-appearance: none;
929 margin-top: 0;
930 margin-bottom: 0;
931}
932
933/ Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
934#BMB_bookmarksPopup arrowscrollbox {
935 padding-bottom: 0px;
936}
937
938#BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
939 / Hide bottom separator as the styled footer includes a top border serving the same purpose /
940 display: none;
941}
942
943/ Popups with only one item don't have a footer /
944#BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
945/ These popups never have a footer /
946#BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
947#BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
948 / And so they need some bottom padding: /
949 padding-bottom: 4px;
950}
951
952/ Disabled (empty) item is always alone and never has an icon, so fix its left padding /
953#BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
954 padding-left: 6px;
955}
956*/
957
958.PanelUI-subView menuseparator,
959.PanelUI-subView toolbarseparator,
960.cui-widget-panelview menuseparator {
961 -moz-appearance: none;
962 min-height: 0;
963 border-top: 1px solid #9C9CFF;
964 margin: 2px 0;
965 padding: 0;
966}
967
968.PanelUI-subView menuseparator,
969.PanelUI-subView toolbarseparator {
970/* -moz-margin-start: -5px;
971 -moz-margin-end: -4px;*/
972}
973
974.PanelUI-subView menuseparator.small-separator,
975.PanelUI-subView toolbarseparator.small-separator {
976/* margin-left: 5px;
977 margin-right: 5px;*/
978}
979
980.cui-widget-panelview menuseparator.small-separator {
981/* margin-left: 10px;
982 margin-right: 10px;*/
983}
984
985.subviewbutton > .menu-accel-container {
986 -moz-box-pack: start;
987 -moz-margin-start: 10px;
988 -moz-margin-end: auto;
989 color: #A09090;
990}
991
992#PanelUI-historyItems > toolbarbutton {
993 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
994}
995
996#PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
997#PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
998#PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
999 width: 16px;
1000 height: 16px;
1001}
1002
1003toolbarbutton[panel-multiview-anchor="true"],
1004toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
1005 color: #000000;
1006 background-color: #008484;
1007}
1008
1009#PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
1010 display: none;
1011}
1012
1013#PanelUI-help[panel-multiview-anchor="true"] {
1014 background-image: none;
1015}
1016
1017#PanelUI-help[panel-multiview-anchor="true"]::after {
1018 content: "";
1019 position: absolute;
1020 top: 0;
1021 height: 100%;
1022 width: 38px;
1023 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1024 background-repeat: no-repeat;
1025 background-color: #008484;
1026 background-position: left 10px center, 0;
1027}
1028
1029#PanelUI-help[panel-multiview-anchor="true"]:-moz-locale-dir(rtl)::after {
1030 background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png);
1031 background-position: right 10px center, 0;
1032}
1033
1034toolbarbutton[panel-multiview-anchor="true"] {
1035 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1036 background-position: right calc((22.35em / 3 - 0.1px) / 2 - 38px + 2px) center;
1037 background-repeat: no-repeat;
1038}
1039
1040toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
1041 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
1042 background-position: left calc((22.35em / 3 - 0.1px) / 2 - 38px + 2px) center;
1043}
1044
1045toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
1046#bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
1047 display: none;
1048}
1049
1050#search-container[cui-areatype="menu-panel"],
1051#wrapper-search-container[place="panel"] {
1052 width: 22.35em;
1053}
1054
1055#search-container[cui-areatype="menu-panel"] {
1056 margin-top: 6px;
1057 margin-bottom: 6px;
1058}
1059
1060toolbarpaletteitem[place="palette"] > #search-container {
1061 min-width: 7em;
1062 width: 7em;
1063}
1064
1065.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1066 padding: 0;
1067 transition-property: background-color, border-color;
1068 transition-duration: 150ms;
1069}
1070
1071/* Make direct siblings overlap borders: */
1072.toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1073/* border-top-color: transparent !important; */
1074}
1075
1076.toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
1077toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
1078/* margin-top: -1px; */
1079}
1080
1081.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1082 border: 0;
1083 padding: .5em;
1084 margin: 0;
1085 -moz-box-flex: 1;
1086 min-width: calc(22.35em / 3 - 0.1px);
1087 max-width: calc(22.35em / 3 - 0.1px);
1088 /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
1089 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
1090 height: calc(2.2em + 4px);
1091 max-height: none;
1092 -moz-box-orient: horizontal;
1093}
1094
1095#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1096#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
1097 /* reduce the width with 2px for this button to compensate for two separators
1098 of 1px. */
1099 min-width: calc(22.35em / 3 - 0.1px - 2px);
1100 max-width: calc(22.35em / 3 - 0.1px - 2px);
1101}
1102
1103#main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
1104/* opacity: .25; */
1105}
1106
1107#zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
1108 min-width: 7ch;
1109}
1110
1111#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
1112#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
1113#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
1114#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
1115 border-top-right-radius: 0;
1116 border-bottom-right-radius: 0;
1117}
1118
1119#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
1120#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
1121#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
1122#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
1123 border-top-left-radius: 0;
1124 border-bottom-left-radius: 0;
1125}
1126
1127.toolbaritem-combined-buttons > separator {
1128 -moz-appearance: none;
1129 width: 3px;
1130 -moz-box-align: stretch;
1131}
1132
1133.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
1134 margin: .5em 0;
1135 width: 1px;
1136 height: auto;
1137/* background: hsla(210,4%,10%,.15);*/
1138 transition-property: margin;
1139 transition-duration: 10ms;
1140 transition-timing-function: ease;
1141}
1142
1143.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
1144 margin: 0;
1145}
1146
1147#widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
1148 padding: 0;
1149}
1150
1151.cui-widget-panelview,
1152#widget-overflow-scroller {
1153 overflow-y: auto;
1154 overflow-x: hidden;
1155}
1156
1157#widget-overflow-scroller {
1158 max-height: 30em;
1159 margin-top: 10px;
1160 margin-bottom: 10px;
1161}
1162
1163#widget-overflow-list {
1164 width: 22.35em;
1165 padding-left: 10px;
1166 padding-right: 10px;
1167}
1168
1169toolbaritem[overflowedItem=true],
1170toolbarbutton[overflowedItem=true] {
1171 width: 100%;
1172 max-width: 22.35em;
1173 min-height: 36px;
1174 background-repeat: no-repeat;
1175 background-position: 0 center;
1176}
1177
1178.widget-overflow-list .toolbarbutton-1,
1179.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1180 -moz-box-align: center;
1181 -moz-box-orient: horizontal;
1182}
1183
1184.widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
1185.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1186 text-align: start;
1187 -moz-padding-start: .5em;
1188}
1189
1190#widget-overflow-list > .toolbaritem-combined-buttons {
1191 min-height: 28px;
1192}
1193
1194.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1195 content: "";
1196 display: -moz-box;
1197 width: 1px;
1198 height: 18px;
1199 -moz-margin-end: -1px;
1200}
1201
1202.subviewbutton[checked="true"] {
1203 background-image: url("chrome://global/skin/menu/menu-check.gif");
1204 background-position: top 5px left 4px;
1205 background-repeat: no-repeat;
1206}
1207
1208.subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1209 background-position: top 5px right 4px;
1210}
1211
1212.subviewbutton[checked="true"]:hover {
1213 background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1214}
1215
1216.subbiewbutton > .menu-iconic-left {
1217 -moz-margin-end: 3px;
1218}
1219
1220menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1221 visibility: hidden;
1222}
1223
1224.panel-mainview[panelid=customizationui-widget-panel],
1225#customizationui-widget-multiview > .panel-viewcontainer,
1226#customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack,
1227#PanelUI-panicView > .panel-subview-body,
1228#PanelUI-panicView,
1229#PanelUI-pocketView > .panel-subview-body,
1230#PanelUI-pocketView {
1231 overflow: visible;
1232 color: #FF9F00;
1233}
1234
1235#PanelUI-panicView.cui-widget-panelview {
1236 min-width: 280px;
1237}
1238
1239#PanelUI-panic-timeframe {
1240 padding: 15px;
1241 border-bottom: 1px solid #A09090;
1242}
1243
1244#panic-button-success-icon,
1245#PanelUI-panic-timeframe-icon,
1246#PanelUI-panic-timeframe-icon-small {
1247 background-color: transparent;
1248 -moz-margin-end: 10px;
1249}
1250
1251#panic-button-success-icon,
1252#PanelUI-panic-timeframe-icon {
1253 list-style-image: url(chrome://browser/skin/panic-panel/header.png);
1254 max-height: 48px;
1255 width: 48px;
1256}
1257
1258#PanelUI-panic-timeframe-icon-small {
1259 list-style-image: url(chrome://browser/skin/panic-panel/header-small.png);
1260 max-height: 32px;
1261 width: 32px;
1262}
1263
1264/* current attribute is only set when in use as a subview instead of a main view */
1265#PanelUI-panicView[current] #PanelUI-panic-timeframe-icon {
1266 display: none;
1267}
1268
1269#PanelUI-panicView.cui-widget-panelview #PanelUI-panic-timeframe-icon-small {
1270 display: none;
1271}
1272
1273#panic-button-success-header,
1274#PanelUI-panic-header {
1275 -moz-box-align: center;
1276 margin-bottom: 5px;
1277}
1278
1279#PanelUI-panicView.cui-widget-panelview #PanelUI-panic-header {
1280 margin-bottom: 0;
1281}
1282
1283#PanelUI-panic-timeframe-icon-small:-moz-locale-dir(rtl),
1284#PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
1285 transform: scaleX(-1);
1286}
1287
1288/*
1289.subviewradio {
1290}
1291
1292.subviewradio@buttonStateHover@ {
1293}
1294
1295.subviewradio[selected],
1296.subviewradio[selected]:hover,
1297.subviewradio@buttonStateActive@ {
1298}
1299
1300.subviewradio > .radio-check {
1301}
1302
1303.subviewradio > .radio-check[selected] {
1304}
1305*/
1306
1307#PanelUI-panic-explanations {
1308 padding: 10px 10px 0;
1309}
1310
1311#PanelUI-panic-actionlist-main-label {
1312 color: #A09090;
1313 font-size: 0.9em;
1314}
1315
1316.PanelUI-panic-actionlist {
1317 -moz-padding-start: 20px;
1318 padding-top: 2px;
1319 padding-bottom: 2px;
1320 background-size: 16px 16px;
1321 background-repeat: no-repeat;
1322 background-color: transparent;
1323 background-position: center left;
1324}
1325
1326.PanelUI-panic-actionlist:-moz-locale-dir(rtl) {
1327 background-position: center right;
1328}
1329
1330#PanelUI-panic-actionlist-cookies {
1331 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0);
1332}
1333
1334#PanelUI-panic-actionlist-history {
1335 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16);
1336}
1337
1338#PanelUI-panic-actionlist-windows {
1339 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32);
1340}
1341
1342#PanelUI-panic-actionlist-newwindow {
1343 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48);
1344}
1345
1346#PanelUI-panic-warning {
1347 color: #FF0000;
1348 text-align: center;
1349 width: 100%;
1350 margin-top: 20px;
1351}
1352
1353#PanelUI-panic-view-button {
1354 background-color: #FF0000;
1355 color: #000000;
1356}
1357
1358#PanelUI-panic-view-button:hover {
1359 background-color: #FFCF00;
1360}
1361
1362#PanelUI-panic-view-button:hover:active {
1363 background-color: #FF9F00;
1364}
1365
1366#PanelUI-panic-view-button > .toolbarbutton-text {
1367 text-align: center;
1368 text-shadow: none;
1369}
1370
1371#panic-button-success-closebutton {
1372}
1373
1374#panic-button-success-closebutton:hover {
1375}
1376
1377#panic-button-success-closebutton:hover:active {
1378}
1379
1380/* === END panelUIOverlay.inc.css === */
1381
1382.panel-subviews {
1383 background-color: #000000;
1384}
1385
1386#PanelUI-contents #zoom-out-btn {
1387 padding-left: 12px;
1388 padding-right: 12px;
1389}
1390
1391#PanelUI-contents #zoom-in-btn {
1392 padding-left: 12px;
1393 padding-right: 12px;
1394}
1395
1396/* bookmark panel submenus */
1397
1398#BMB_bookmarksPopup menupopup[placespopup=true] {
1399/* background: transparent;
1400 border: none;
1401 padding: 6px;*/
1402}
1403
1404#BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1405 /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1406/* background: var(--panel-arrowcontent-background);
1407 border: var(--panel-arrowcontent-border);
1408 border-radius: 3.5px;
1409 margin-top: -4px;*/
1410}
1411
1412#BMB_bookmarksPopup menupopup {
1413/* padding-top: 2px;*/
1414}
1415
1416/* Add some space at the top because there are no headers: */
1417#BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1418/* padding-top: 4px;*/
1419}
1420
1421/* bookmark panel separator */
1422#BMB_bookmarksPopup menuseparator {
1423 padding-top: 0;
1424 padding-bottom: 0;
1425}
1426
1427.subviewbutton > .menu-right,
1428.subviewbutton > .menu-iconic-left {
1429/* padding-top: 1px;
1430 margin-top: 1px;
1431 margin-bottom: 2px;*/
1432}
1433
1434/* Disabled empty item looks too small otherwise, because it has no icon. */
1435menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1436/* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1437menuitem[type="checkbox"].subviewbutton {
1438 /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1439 * 2px for its border, see above */
1440/* min-height: 22px;*/
1441}
1442
1443.subviewbutton > .toolbarbutton-text {
1444/* padding-top: 3px;
1445 padding-bottom: 3px;*/
1446}
1447
1448.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1449 -moz-appearance: none;
1450 border: 0;
1451 -moz-margin-start: 3px;
1452}
1453
1454.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1455 padding: 0 2px;
1456 -moz-padding-start: 0;
1457 height: 18px;
1458}
1459
1460menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
1461/* transform: scaleX(-1); */
1462}
1463
1464.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1465 padding: 0 6px;
1466}
1467
1468.subviewbutton > .toolbarbutton-text {
1469 -moz-padding-start: 16px;
1470}
1471
1472.subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1473 -moz-padding-start: 0;
1474}
1475
1476/* subviewbutton entries for social sidebars have images that come from external
1477/* sources, and are not guaranteed to be the size we want, so force the size on
1478/* those icons. */
1479toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1480 width: 16px;
1481 height: 16px;
1482}
1483
1484.subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1485 visibility: hidden;
1486}
1487
1488menu.subviewbutton > .menu-right {
1489 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow);
1490 /* Reset the rect we inherit from the button: */
1491 -moz-image-region: auto;
1492}
1493menu.subviewbutton:not([disabled="true"]):hover > .menu-right,
1494menu.subviewbutton:not([disabled="true"])[_moz-menuactive="true"] > .menu-right {
1495 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-hover");
1496}
1497menu[disabled="true"].subviewbutton > .menu-right {
1498 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-disabled");
1499}