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