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