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