fifth 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%;
499}
500
501#PanelUI-footer-inner,
502#PanelUI-footer-fxa {
e28f3f71
RK
503 display: flex;
504 border-top: 1px solid #9C9CFF;
505}
fe4ad58e 506
470b6552
RK
507#PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner,
508#PanelUI-multiView[viewtype="subview"] #PanelUI-footer-fxa {
5401f433
RK
509 position: relative;
510}
e28f3f71 511
470b6552
RK
512#PanelUI-footer-inner > toolbarseparator,
513#PanelUI-footer-fxa > toolbarseparator {
e28f3f71
RK
514 border: 0;
515 border-left: 1px solid #9C9CFF;
516 margin: 0;
517}
518
470b6552
RK
519#PanelUI-footer-inner:hover > toolbarseparator,
520#PanelUI-footer-fxa:hover > toolbarseparator {
e28f3f71
RK
521/* margin: 0;*/
522}
523
e548e22e 524#PanelUI-update-status,
43cc2806 525#PanelUI-help,
470b6552
RK
526#PanelUI-fxa-label,
527#PanelUI-fxa-icon,
43cc2806
RK
528#PanelUI-customize,
529#PanelUI-quit {
530 margin: 0;
2b5a5147
RK
531 padding: 11px 0;
532 box-sizing: border-box;
533 min-height: 40px;
43cc2806 534 box-shadow: none;
5401f433 535 border: none;
43cc2806
RK
536 border-radius: 0;
537 transition: background-color;
cc4b0b0d 538 -moz-box-orient: horizontal;
43cc2806 539}
cc4b0b0d 540
470b6552 541#PanelUI-update-status {
e28f3f71
RK
542 border-top: 1px solid #9C9CFF;
543 border-bottom: 1px solid transparent;
544 margin-bottom: -1px;
545}
546
470b6552 547#PanelUI-update-status > .toolbarbutton-text {
e28f3f71
RK
548 width: 0; /* Fancy cropping solution for flexbox. */
549}
550
5401f433
RK
551#PanelUI-help[panel-multiview-anchor="true"] {
552 -moz-image-region: rect(0, 32px, 16px, 16px);
553}
554
cc4b0b0d
RK
555#PanelUI-help,
556#PanelUI-quit {
e28f3f71 557 min-width: 44px;
cc4b0b0d
RK
558}
559
e548e22e 560#PanelUI-update-status > .toolbarbutton-text,
470b6552 561#PanelUI-fxa-label > .toolbarbutton-text,
cc4b0b0d 562#PanelUI-customize > .toolbarbutton-text {
e28f3f71
RK
563 margin: 0;
564 padding: 0 6px;
cc4b0b0d
RK
565 text-align: start;
566}
567
568#PanelUI-help > .toolbarbutton-text,
470b6552
RK
569#PanelUI-quit > .toolbarbutton-text,
570#PanelUI-fxa-avatar > .toolbarbutton-text {
cc4b0b0d
RK
571 display: none;
572}
573
e548e22e 574#PanelUI-update-status > .toolbarbutton-icon,
470b6552
RK
575#PanelUI-fxa-label > .toolbarbutton-icon,
576#PanelUI-fxa-icon > .toolbarbutton-icon,
e548e22e 577#PanelUI-customize > .toolbarbutton-icon,
cc4b0b0d
RK
578#PanelUI-help > .toolbarbutton-icon,
579#PanelUI-quit > .toolbarbutton-icon {
580 -moz-margin-end: 0;
43cc2806
RK
581}
582
470b6552
RK
583#PanelUI-fxa-icon {
584 -moz-padding-start: 15px;
585 -moz-padding-end: 15px;
586}
587
588#PanelUI-fxa-label,
43cc2806 589#PanelUI-customize {
cc4b0b0d
RK
590 flex: 1;
591 -moz-padding-start: 15px;
592 -moz-border-start-style: none;
e28f3f71
RK
593}
594
470b6552
RK
595#PanelUI-footer-fxa[fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
596#PanelUI-footer-fxa[fxaprofileimage="enabled"]:not([fxastatus="error"]) > #PanelUI-fxa-status > #PanelUI-fxa-label {
597 -moz-padding-start: 0px;
598}
599
e548e22e
RK
600#PanelUI-update-status {
601 width: calc(22.35em + 30px);
602 -moz-padding-start: 15px;
603 -moz-border-start-style: none;
604}
605
606#PanelUI-update-status {
607 list-style-image: url(chrome://branding/content/icon16.png);
608}
609
470b6552
RK
610#PanelUI-fxa-label,
611#PanelUI-fxa-icon {
d0e580f1 612 list-style-image: url("chrome://browser/skin/syncFx-horizontalbar.png");
e28f3f71
RK
613}
614
470b6552 615#PanelUI-footer-fxa[syncstatus="active"] > #PanelUI-fxa-icon {
d0e580f1 616 list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png");
e28f3f71
RK
617}
618
470b6552
RK
619#PanelUI-fxa-icon[fxastatus="migrate-signup"],
620#PanelUI-fxa-icon[fxastatus="migrate-verify"] {
20752032
RK
621 list-style-image: url(chrome://global/skin/warning-16.png);
622}
623
e28f3f71 624#PanelUI-customize {
43cc2806
RK
625 list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
626}
627
e28f3f71
RK
628#customization-panelHolder #PanelUI-customize {
629 list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
630}
631
43cc2806 632#PanelUI-help {
43cc2806
RK
633 list-style-image: url("chrome://browser/skin/menuPanel-help.png");
634}
635
636#PanelUI-quit {
637 -moz-border-end-style: none;
638 list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
639}
640
470b6552
RK
641#PanelUI-fxa-label,
642#PanelUI-fxa-icon,
43cc2806
RK
643#PanelUI-customize,
644#PanelUI-help,
645#PanelUI-quit {
646 -moz-image-region: rect(0, 16px, 16px, 0);
647}
648
470b6552
RK
649#PanelUI-footer-fxa[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon,
650#PanelUI-footer-fxa[fxastatus="error"][fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon {
651 display: none;
652}
653
654#PanelUI-footer-fxa[fxastatus="error"]:not([fxaprofileimage="set"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
655 display: none;
656}
657
658#PanelUI-fxa-avatar[disabled],
659#PanelUI-fxa-icon[disabled] {
660 display: none;
661}
662
b336389b
RK
663#PanelUI-fxa-status[disabled] {
664 pointer-events: none;
665}
666
470b6552
RK
667#PanelUI-fxa-avatar {
668 width: 32px;
669 height: 32px;
670 border-radius: 50%;
671 background-repeat: no-repeat;
672 background-position: 0 0;
673 background-size: contain;
674 align-self: center;
675 margin: 0px 7px;
676 padding: 0px;
677 border: 0px none;
678 -moz-margin-end: 0;
679}
680
681#PanelUI-footer-fxa[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
682 list-style-image: url(chrome://browser/skin/fxa/default-profile-image.svg);
683}
684
43cc2806
RK
685#PanelUI-customize:hover,
686#PanelUI-help:not([disabled]):hover,
687#PanelUI-quit:not([disabled]):hover,
688#PanelUI-customize:hover:active,
689#PanelUI-help:not([disabled]):hover:active,
690#PanelUI-quit:not([disabled]):hover:active {
691 -moz-image-region: rect(0, 32px, 16px, 16px);
692}
693
694#PanelUI-help[disabled],
695#PanelUI-quit[disabled] {
696 -moz-image-region: rect(0, 48px, 16px, 32px);
697}
698
470b6552 699#PanelUI-fxa-icon:not([disabled]):hover,
43cc2806
RK
700#PanelUI-help:not([disabled]):hover,
701#PanelUI-customize:hover,
702#PanelUI-quit:not([disabled]):hover {
43cc2806
RK
703}
704
470b6552 705#PanelUI-fxa-icon:not([disabled]):hover:active,
e28f3f71
RK
706#PanelUI-help:not([disabled]):hover:active,
707#PanelUI-customize:hover:active,
708#PanelUI-quit:not([disabled]):hover:active {
709}
710
711#PanelUI-fxa-status:not([disabled]):hover,
b336389b
RK
712#PanelUI-fxa-status:not([disabled]):hover:active,
713#PanelUI-fxa-icon:not([disabled]):hover,
714#PanelUI-fxa-icon:not([disabled]):hover:active {
e28f3f71
RK
715}
716
470b6552
RK
717#PanelUI-footer-fxa[fxastatus="error"] {
718 background-color: #FF0000;
719 color: #000000;
720}
721
722#PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover {
723 background-color: #FFCF00;
724}
725
726#PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover:active {
727 background-color: #FF9F00;
728}
729
20752032
RK
730#PanelUI-update-status {
731/* color: black; */
732}
733
e548e22e
RK
734#PanelUI-update-status[update-status="succeeded"] {
735 background-color: #008484;
736 color: #000000;
737}
738
739#PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover {
740 background-color: #FFCF00;
741}
742
743#PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover:active {
744 background-color: #FF9F00;
745}
746
747#PanelUI-update-status[update-status="failed"] {
748 background-color: #FF0000;
749 color: #000000;
750}
751
752#PanelUI-update-status[update-status="failed"]:not([disabled]):hover {
753 background-color: #FFCF00;
754}
755
756#PanelUI-update-status[update-status="failed"]:not([disabled]):hover:active {
757 background-color: #FF9F00;
758}
759
e28f3f71 760#PanelUI-quit:not([disabled]):hover {
83e3b5cf 761 background-color: #FF0000;
e28f3f71
RK
762}
763
764#PanelUI-quit:not([disabled]):hover:active {
83e3b5cf 765 background-color: #FF9F00;
e28f3f71
RK
766}
767
768#customization-panelHolder #PanelUI-customize {
43cc2806
RK
769 color: #FFCF00;
770 background-color: #008484;
e28f3f71
RK
771 text-shadow: none;
772 margin-top: -1px;
43cc2806
RK
773}
774
e28f3f71
RK
775#customization-panelHolder #PanelUI-customize + toolbarseparator {
776 display: none;
777}
778
779#customization-panelHolder #PanelUI-customize:hover,
780#customization-panelHolder #PanelUI-customize:hover:active {
43cc2806 781 background-color: #FFCF00;
e28f3f71 782 color: #000000;
43cc2806
RK
783}
784
e28f3f71 785#customization-palette .toolbarbutton-multiline-text,
43cc2806
RK
786#customization-palette .toolbarbutton-text {
787 display: none;
788}
789
e28f3f71
RK
790panelview .toolbarbutton-1,
791.subviewbutton,
792.widget-overflow-list .toolbarbutton-1,
793.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
20752032 794.share-provider-button,
51994fad 795.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
cae267ab 796/* padding: 0 6px;
e28f3f71
RK
797 background-color: hsla(210,4%,10%,0);
798 border-radius: 2px;
799 border-style: solid;
800 border-color: hsla(210,4%,10%,0);*/
43cc2806
RK
801}
802
803panelview .toolbarbutton-1,
e28f3f71
RK
804.subviewbutton,
805.widget-overflow-list .toolbarbutton-1,
20752032 806.share-provider-button,
51994fad 807.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
e28f3f71
RK
808 border-width: 0;
809}
810
811.subviewbutton.panel-subview-footer {
08b89971 812/* border-radius: 0; */
fe4ad58e 813 margin: 2px 0 0;
e28f3f71
RK
814}
815
e28f3f71 816.subviewbutton.panel-subview-footer > .menu-text {
51994fad
RK
817 -moz-margin-start: 0px !important;
818 -moz-padding-start: 6px;
819 -moz-padding-end: 6px;
e28f3f71 820 -moz-box-flex: 0;
51994fad
RK
821 text-align: center;
822}
823
824.subviewbutton.panel-subview-footer > .toolbarbutton-icon {
825 margin: 0;
826}
827
828.subviewbutton.panel-subview-footer > .toolbarbutton-text {
829 text-align: center;
830 padding: 0;
831}
832
833.subviewbutton.panel-subview-footer > .menu-accel-container {
834 -moz-padding-start: 6px;
e28f3f71
RK
835}
836
837.subviewbutton:not(.panel-subview-footer) {
fe4ad58e 838 margin: 0;
e28f3f71
RK
839}
840
841.subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
842/* Bookmark items need a more specific selector. */
843.PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
844.PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
cae267ab 845/* font: menu;*/
e28f3f71
RK
846}
847
51994fad
RK
848.PanelUI-subView .subviewbutton[shortcut]::after {
849 content: attr(shortcut);
850 float: right;
851 color: #A09090;
852}
853
854.PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
855 -moz-margin-start: 10px;
856}
857
858/* This is a <label> but it should fit in with the menu font- and colorwise. */
859#PanelUI-characterEncodingView-autodetect-label {
860 font: menu;
861 color: inherit;
862}
863
e28f3f71 864.cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
08b89971
RK
865/* margin-left: 4px;
866 margin-right: 4px;*/
e28f3f71
RK
867}
868
869panelview .toolbarbutton-1,
870.widget-overflow-list .toolbarbutton-1 {
43cc2806
RK
871 margin-top: 6px;
872}
e28f3f71 873
43cc2806 874/*
649b5d38
RK
875panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
876toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover,
877menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
878menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
20752032 879.share-provider-button:not(:-moz-any([disabled],[open],:active)):hover,
649b5d38 880.widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
51994fad 881.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
e28f3f71 882 > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
43cc2806 883 background-color: hsla(210,4%,10%,.08);
e28f3f71
RK
884 border-color: hsla(210,4%,10%,.11);
885}
886
649b5d38 887.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],:active)):hover {
e28f3f71 888 border-color: hsla(210,4%,10%,.11);
43cc2806
RK
889}
890
43371c9b 891panelview .toolbarbutton-1:-moz-any(:not([disabled]):-moz-any([open],:hover:active),[checked=true]),
649b5d38
RK
892toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],:hover:active),
893menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
894menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
20752032 895.share-provider-button:not([disabled]):-moz-any([open],:hover:active),
649b5d38 896.widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active),
51994fad 897.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
649b5d38 898 > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) {
e28f3f71
RK
899 background-color: hsla(210,4%,10%,.12);
900 border-color: hsla(210,4%,10%,.14);
901 box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
902}
903
904.subviewbutton.panel-subview-footer {
905 margin: 4px -4px -4px;
906 background-color: hsla(210,4%,10%,.07);
907 border-top: 1px solid hsla(210,4%,10%,.12);
908 border-radius: 0;
909 color: hsl(0,0%,25%)
910}
911
51994fad 912menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
e28f3f71
RK
913.subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
914 background-color: hsla(210,4%,10%,.1);
915 border-top: 1px solid hsla(210,4%,10%,.12);
916}
917
649b5d38
RK
918menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
919.subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active) {
43cc2806 920 background-color: hsla(210,4%,10%,.15);
e28f3f71
RK
921 border-top: 1px solid hsla(210,4%,10%,.12);
922 box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
43cc2806 923}
00f971bc 924
e28f3f71 925#BMB_bookmarksPopup .subviewbutton {
cae267ab 926 font: menu;
e28f3f71 927 font-weight: normal;
43cc2806
RK
928}
929
e28f3f71 930#BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
43cc2806
RK
931 color: inherit;
932}
933
934#BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
935#BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
936 -moz-appearance: none;
937 margin-top: 0;
938 margin-bottom: 0;
939}
66d96671 940
e28f3f71
RK
941/ Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
942#BMB_bookmarksPopup arrowscrollbox {
943 padding-bottom: 0px;
944}
945
e28f3f71 946#BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
589b5528
RK
947 / Hide bottom separator as the styled footer includes a top border serving the same purpose /
948 display: none;
e28f3f71 949}
cae267ab
RK
950
951/ Popups with only one item don't have a footer /
43371c9b 952#BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
cae267ab
RK
953/ These popups never have a footer /
954#BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
955#BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
956 / And so they need some bottom padding: /
957 padding-bottom: 4px;
958}
959
960/ Disabled (empty) item is always alone and never has an icon, so fix its left padding /
961#BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
962 padding-left: 6px;
963}
e28f3f71
RK
964*/
965
966.PanelUI-subView menuseparator,
967.PanelUI-subView toolbarseparator,
968.cui-widget-panelview menuseparator {
43cc2806
RK
969 -moz-appearance: none;
970 min-height: 0;
e28f3f71
RK
971 border-top: 1px solid #9C9CFF;
972 margin: 2px 0;
973 padding: 0;
43cc2806 974}
e28f3f71
RK
975
976.PanelUI-subView menuseparator,
977.PanelUI-subView toolbarseparator {
978/* -moz-margin-start: -5px;
979 -moz-margin-end: -4px;*/
980}
981
982.PanelUI-subView menuseparator.small-separator,
983.PanelUI-subView toolbarseparator.small-separator {
08b89971
RK
984/* margin-left: 5px;
985 margin-right: 5px;*/
e28f3f71
RK
986}
987
988.cui-widget-panelview menuseparator.small-separator {
08b89971
RK
989/* margin-left: 10px;
990 margin-right: 10px;*/
e28f3f71
RK
991}
992
993.subviewbutton > .menu-accel-container {
994 -moz-box-pack: start;
995 -moz-margin-start: 10px;
996 -moz-margin-end: auto;
08b89971 997 color: #A09090;
e28f3f71
RK
998}
999
43cc2806
RK
1000#PanelUI-historyItems > toolbarbutton {
1001 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
1002}
1003
1004#PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
1005#PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
1006#PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
1007 width: 16px;
1008 height: 16px;
1009}
1010
5401f433
RK
1011toolbarbutton[panel-multiview-anchor="true"],
1012toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
1013 color: #000000;
66d96671 1014 background-color: #008484;
43cc2806
RK
1015}
1016
5401f433
RK
1017#PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
1018 display: none;
1019}
1020
1021#PanelUI-help[panel-multiview-anchor="true"] {
1022 background-image: none;
1023}
1024
1025#PanelUI-help[panel-multiview-anchor="true"]::after {
1026 content: "";
1027 position: absolute;
1028 top: 0;
1029 height: 100%;
b336389b 1030 width: var(--panel-ui-exit-subview-gutter-width);
5401f433
RK
1031 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1032 background-repeat: no-repeat;
1033 background-color: #008484;
d1e87ec1
RK
1034 background-position: left 10px center, 0;
1035}
1036
1037#PanelUI-help[panel-multiview-anchor="true"]:-moz-locale-dir(rtl)::after {
1038 background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png);
1039 background-position: right 10px center, 0;
5401f433
RK
1040}
1041
1042toolbarbutton[panel-multiview-anchor="true"] {
e28f3f71 1043 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
b336389b 1044 background-position: right calc((22.35em / 3 - 0.1px) / 2 - var(--panel-ui-exit-subview-gutter-width) + 2px) center;
e28f3f71
RK
1045 background-repeat: no-repeat;
1046}
1047
5401f433 1048toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
e28f3f71 1049 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
b336389b 1050 background-position: left calc((22.35em / 3 - 0.1px) / 2 - var(--panel-ui-exit-subview-gutter-width) + 2px) center;
e28f3f71
RK
1051}
1052
e28f3f71 1053toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
43cc2806
RK
1054#bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
1055 display: none;
1056}
1057
e28f3f71
RK
1058#search-container[cui-areatype="menu-panel"],
1059#wrapper-search-container[place="panel"] {
45dc7657 1060 width: 22.35em;
43cc2806
RK
1061}
1062
e28f3f71
RK
1063#search-container[cui-areatype="menu-panel"] {
1064 margin-top: 6px;
1065 margin-bottom: 6px;
1066}
1067
43cc2806
RK
1068toolbarpaletteitem[place="palette"] > #search-container {
1069 min-width: 7em;
1070 width: 7em;
1071}
1072
51994fad 1073.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
43cc2806 1074 padding: 0;
43cc2806
RK
1075 transition-property: background-color, border-color;
1076 transition-duration: 150ms;
1077}
1078
5401f433
RK
1079/* Make direct siblings overlap borders: */
1080.toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1081/* border-top-color: transparent !important; */
1082}
1083
1084.toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
1085toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
1086/* margin-top: -1px; */
1087}
1088
51994fad 1089.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
43cc2806
RK
1090 border: 0;
1091 padding: .5em;
e28f3f71 1092 margin: 0;
43cc2806 1093 -moz-box-flex: 1;
46e71434
RK
1094 min-width: calc(22.35em / 3 - 0.1px);
1095 max-width: calc(22.35em / 3 - 0.1px);
e28f3f71
RK
1096 /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
1097 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
1098 height: calc(2.2em + 4px);
43cc2806
RK
1099 max-height: none;
1100 -moz-box-orient: horizontal;
1101}
1102
51994fad
RK
1103#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1104#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
e28f3f71
RK
1105 /* reduce the width with 2px for this button to compensate for two separators
1106 of 1px. */
46e71434
RK
1107 min-width: calc(22.35em / 3 - 0.1px - 2px);
1108 max-width: calc(22.35em / 3 - 0.1px - 2px);
e28f3f71
RK
1109}
1110
51994fad 1111#main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
cc4b0b0d 1112/* opacity: .25; */
43cc2806
RK
1113}
1114
1115#zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
1116 min-width: 7ch;
1117}
1118
51994fad
RK
1119#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
1120#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
1121#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
1122#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
43cc2806
RK
1123 border-top-right-radius: 0;
1124 border-bottom-right-radius: 0;
1125}
1126
51994fad
RK
1127#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
1128#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
1129#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
1130#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
43cc2806
RK
1131 border-top-left-radius: 0;
1132 border-bottom-left-radius: 0;
1133}
1134
e28f3f71
RK
1135.toolbaritem-combined-buttons > separator {
1136 -moz-appearance: none;
43cc2806
RK
1137 width: 3px;
1138 -moz-box-align: stretch;
43cc2806
RK
1139}
1140
51994fad 1141.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
e28f3f71
RK
1142 margin: .5em 0;
1143 width: 1px;
1144 height: auto;
1145/* background: hsla(210,4%,10%,.15);*/
1146 transition-property: margin;
1147 transition-duration: 10ms;
1148 transition-timing-function: ease;
1149}
1150
51994fad 1151.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
e28f3f71
RK
1152 margin: 0;
1153}
1154
43cc2806
RK
1155#widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
1156 padding: 0;
1157}
1158
e28f3f71 1159.cui-widget-panelview,
43cc2806 1160#widget-overflow-scroller {
43cc2806
RK
1161 overflow-y: auto;
1162 overflow-x: hidden;
e28f3f71
RK
1163}
1164
1165#widget-overflow-scroller {
1166 max-height: 30em;
43cc2806
RK
1167 margin-top: 10px;
1168 margin-bottom: 10px;
1169}
1170
1171#widget-overflow-list {
45dc7657 1172 width: 22.35em;
43cc2806
RK
1173 padding-left: 10px;
1174 padding-right: 10px;
1175}
1176
51994fad
RK
1177toolbaritem[overflowedItem=true],
1178toolbarbutton[overflowedItem=true] {
43cc2806 1179 width: 100%;
45dc7657 1180 max-width: 22.35em;
43cc2806
RK
1181 min-height: 36px;
1182 background-repeat: no-repeat;
1183 background-position: 0 center;
1184}
1185
e28f3f71
RK
1186.widget-overflow-list .toolbarbutton-1,
1187.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
43cc2806
RK
1188 -moz-box-align: center;
1189 -moz-box-orient: horizontal;
1190}
1191
51994fad 1192.widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
e28f3f71 1193.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
43cc2806
RK
1194 text-align: start;
1195 -moz-padding-start: .5em;
1196}
1197
e28f3f71 1198#widget-overflow-list > .toolbaritem-combined-buttons {
43cc2806
RK
1199 min-height: 28px;
1200}
1201
e28f3f71
RK
1202.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1203 content: "";
1204 display: -moz-box;
1205 width: 1px;
1206 height: 18px;
1207 -moz-margin-end: -1px;
43cc2806
RK
1208}
1209
e28f3f71
RK
1210.subviewbutton[checked="true"] {
1211 background-image: url("chrome://global/skin/menu/menu-check.gif");
1212 background-position: top 5px left 4px;
1213 background-repeat: no-repeat;
43cc2806
RK
1214}
1215
43371c9b
RK
1216.subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1217 background-position: top 5px right 4px;
1218}
1219
e28f3f71
RK
1220.subviewbutton[checked="true"]:hover {
1221 background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
43cc2806
RK
1222}
1223
cae267ab 1224.subbiewbutton > .menu-iconic-left {
e28f3f71 1225 -moz-margin-end: 3px;
43cc2806 1226}
e28f3f71 1227
cae267ab 1228menuitem[checked="true"].subviewbutton > .menu-iconic-left {
e28f3f71 1229 visibility: hidden;
43cc2806
RK
1230}
1231
22180555
RK
1232.panel-mainview[panelid=customizationui-widget-panel],
1233#customizationui-widget-multiview > .panel-viewcontainer,
1234#customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack,
1235#PanelUI-panicView > .panel-subview-body,
31bc2dc1
RK
1236#PanelUI-panicView,
1237#PanelUI-pocketView > .panel-subview-body,
1238#PanelUI-pocketView {
22180555
RK
1239 overflow: visible;
1240 color: #FF9F00;
1241}
1242
1243#PanelUI-panicView.cui-widget-panelview {
1244 min-width: 280px;
1245}
1246
1247#PanelUI-panic-timeframe {
1248 padding: 15px;
1249 border-bottom: 1px solid #A09090;
1250}
1251
1252#panic-button-success-icon,
1253#PanelUI-panic-timeframe-icon,
1254#PanelUI-panic-timeframe-icon-small {
1255 background-color: transparent;
1256 -moz-margin-end: 10px;
1257}
1258
1259#panic-button-success-icon,
1260#PanelUI-panic-timeframe-icon {
1261 list-style-image: url(chrome://browser/skin/panic-panel/header.png);
1262 max-height: 48px;
1263 width: 48px;
1264}
1265
1266#PanelUI-panic-timeframe-icon-small {
1267 list-style-image: url(chrome://browser/skin/panic-panel/header-small.png);
1268 max-height: 32px;
1269 width: 32px;
1270}
1271
1272/* current attribute is only set when in use as a subview instead of a main view */
1273#PanelUI-panicView[current] #PanelUI-panic-timeframe-icon {
1274 display: none;
1275}
1276
1277#PanelUI-panicView.cui-widget-panelview #PanelUI-panic-timeframe-icon-small {
1278 display: none;
1279}
1280
1281#panic-button-success-header,
1282#PanelUI-panic-header {
1283 -moz-box-align: center;
1284 margin-bottom: 5px;
1285}
1286
1287#PanelUI-panicView.cui-widget-panelview #PanelUI-panic-header {
1288 margin-bottom: 0;
1289}
1290
1291#PanelUI-panic-timeframe-icon-small:-moz-locale-dir(rtl),
1292#PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
1293 transform: scaleX(-1);
1294}
1295
1296/*
1297.subviewradio {
1298}
1299
1300.subviewradio@buttonStateHover@ {
1301}
1302
1303.subviewradio[selected],
1304.subviewradio[selected]:hover,
1305.subviewradio@buttonStateActive@ {
1306}
1307
1308.subviewradio > .radio-check {
1309}
1310
1311.subviewradio > .radio-check[selected] {
1312}
1313*/
1314
1315#PanelUI-panic-explanations {
1316 padding: 10px 10px 0;
1317}
1318
1319#PanelUI-panic-actionlist-main-label {
1320 color: #A09090;
1321 font-size: 0.9em;
1322}
1323
1324.PanelUI-panic-actionlist {
1325 -moz-padding-start: 20px;
1326 padding-top: 2px;
1327 padding-bottom: 2px;
1328 background-size: 16px 16px;
1329 background-repeat: no-repeat;
1330 background-color: transparent;
1331 background-position: center left;
1332}
1333
1334.PanelUI-panic-actionlist:-moz-locale-dir(rtl) {
1335 background-position: center right;
1336}
1337
1338#PanelUI-panic-actionlist-cookies {
1339 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0);
1340}
1341
1342#PanelUI-panic-actionlist-history {
1343 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16);
1344}
1345
1346#PanelUI-panic-actionlist-windows {
1347 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32);
1348}
1349
1350#PanelUI-panic-actionlist-newwindow {
1351 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48);
1352}
1353
1354#PanelUI-panic-warning {
1355 color: #FF0000;
1356 text-align: center;
1357 width: 100%;
1358 margin-top: 20px;
1359}
1360
1361#PanelUI-panic-view-button {
1362 background-color: #FF0000;
1363 color: #000000;
1364}
1365
1366#PanelUI-panic-view-button:hover {
1367 background-color: #FFCF00;
1368}
1369
1370#PanelUI-panic-view-button:hover:active {
1371 background-color: #FF9F00;
1372}
1373
1374#PanelUI-panic-view-button > .toolbarbutton-text {
1375 text-align: center;
1376 text-shadow: none;
1377}
1378
1379#panic-button-success-closebutton {
1380}
1381
1382#panic-button-success-closebutton:hover {
1383}
1384
1385#panic-button-success-closebutton:hover:active {
1386}
1387
43cc2806
RK
1388/* === END panelUIOverlay.inc.css === */
1389
8837ac2c
RK
1390.panel-subviews {
1391 background-color: #000000;
1392}
1393
43cc2806
RK
1394#PanelUI-contents #zoom-out-btn {
1395 padding-left: 12px;
1396 padding-right: 12px;
1397}
1398
1399#PanelUI-contents #zoom-in-btn {
1400 padding-left: 12px;
1401 padding-right: 12px;
1402}
1403
e28f3f71
RK
1404/* bookmark panel submenus */
1405
51994fad
RK
1406#BMB_bookmarksPopup menupopup[placespopup=true] {
1407/* background: transparent;
e28f3f71 1408 border: none;
51994fad 1409 padding: 6px;*/
43cc2806
RK
1410}
1411
51994fad 1412#BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
e28f3f71 1413 /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
e548e22e
RK
1414/* background: var(--panel-arrowcontent-background);
1415 border: var(--panel-arrowcontent-border);
e28f3f71
RK
1416 border-radius: 3.5px;
1417 margin-top: -4px;*/
1418}
1419
51994fad
RK
1420#BMB_bookmarksPopup menupopup {
1421/* padding-top: 2px;*/
1422}
1423
1424/* Add some space at the top because there are no headers: */
1425#BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1426/* padding-top: 4px;*/
1427}
1428
e28f3f71
RK
1429/* bookmark panel separator */
1430#BMB_bookmarksPopup menuseparator {
43cc2806
RK
1431 padding-top: 0;
1432 padding-bottom: 0;
1433}
e28f3f71 1434
51994fad
RK
1435.subviewbutton > .menu-right,
1436.subviewbutton > .menu-iconic-left {
1437/* padding-top: 1px;
1438 margin-top: 1px;
1439 margin-bottom: 2px;*/
1440}
1441
1442/* Disabled empty item looks too small otherwise, because it has no icon. */
1443menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1444/* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1445menuitem[type="checkbox"].subviewbutton {
1446 /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1447 * 2px for its border, see above */
1448/* min-height: 22px;*/
1449}
1450
1451.subviewbutton > .toolbarbutton-text {
1452/* padding-top: 3px;
1453 padding-bottom: 3px;*/
1454}
1455
e28f3f71
RK
1456.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1457 -moz-appearance: none;
1458 border: 0;
1459 -moz-margin-start: 3px;
1460}
1461
1462.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1463 padding: 0 2px;
1464 -moz-padding-start: 0;
1465 height: 18px;
1466}
1467
a21f2959
RK
1468menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
1469/* transform: scaleX(-1); */
1470}
1471
e28f3f71
RK
1472.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1473 padding: 0 6px;
1474}
1475
1476.subviewbutton > .toolbarbutton-text {
1477 -moz-padding-start: 16px;
1478}
1479
1480.subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1481 -moz-padding-start: 0;
1482}
1483
e28f3f71
RK
1484/* subviewbutton entries for social sidebars have images that come from external
1485/* sources, and are not guaranteed to be the size we want, so force the size on
1486/* those icons. */
1487toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1488 width: 16px;
1489 height: 16px;
1490}
1491
1492.subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1493 visibility: hidden;
1494}
649b5d38 1495
e28f3f71 1496menu.subviewbutton > .menu-right {
ae90b726
RK
1497 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow);
1498 /* Reset the rect we inherit from the button: */
1499 -moz-image-region: auto;
649b5d38 1500}
ae90b726
RK
1501menu.subviewbutton:not([disabled="true"]):hover > .menu-right,
1502menu.subviewbutton:not([disabled="true"])[_moz-menuactive="true"] > .menu-right {
1503 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-hover");
e28f3f71 1504}
e28f3f71 1505menu[disabled="true"].subviewbutton > .menu-right {
ae90b726 1506 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-disabled");
e28f3f71 1507}