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