fifth part of syncing LCARStrek with Firefox 41 windows theme changes
[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:root {
8 --panel-ui-exit-subview-gutter-width: 38px;
9}
10
11#PanelUI-popup #PanelUI-contents:empty {
12 height: 128px;
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;
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;
31}
32
33#PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):empty::before {
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;
42}
43
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
58@keyframes whimsyMoveX {
59 /* These values are adjusted for the padding on the panel. */
60 from { margin-left: -9px; } to { margin-left: calc(100% - 55px); }
61}
62
63@keyframes whimsyMoveXRTL {
64 /* These values are adjusted for the padding on the panel. */
65 from { margin-right: -9px; } to { margin-right: calc(100% - 55px); }
66}
67
68@keyframes whimsyMoveY {
69 /* These values are adjusted for the padding and height of the panel. */
70 from { margin-top: -.5em; } to { margin-top: calc(64px - .5em); }
71}
72
73@keyframes whimsyRotate {
74 to { transform: perspective(5000px) rotateY(360deg); }
75}
76
77#customization-panelHolder {
78 border-radius: 4px;
79}
80
81#PanelUI-button {
82 -moz-margin-start: 3px;
83}
84
85#PanelUI-button:-moz-locale-dir(rtl) {
86}
87
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
94.panel-subviews {
95 padding: 4px;
96 -moz-margin-start: var(--panel-ui-exit-subview-gutter-width);
97}
98
99.panel-viewstack[viewtype="main"] > .panel-subviews {
100 transform: translateX(22.35em);
101}
102
103.panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
104 transform: translateX(-22.35em);
105}
106
107panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
108 display: none;
109}
110
111.panel-viewstack:not([viewtype="main"]) > .panel-mainview > #PanelUI-mainView {
112 -moz-box-flex: 1;
113}
114
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;
123 padding: 4px 4px;
124}
125
126.panel-subview-header,
127.subviewbutton.panel-subview-footer {
128 box-sizing: border-box;
129/* min-height: 41px; */
130 padding: 3px;
131}
132
133.panel-subview-header {
134 margin: 0 0 4px;
135 background-color: #A09090;
136 color: #000000;
137 font-variant: small-caps;
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
154#PanelUI-mainView {
155 display: flex;
156 flex-direction: column;
157 border-radius: 4px;
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
186.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
187.panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
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 {
194 -moz-hyphens: auto;
195}
196
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
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
220#PanelUI-contents {
221 max-width: 22.35em;
222}
223
224#BMB_bookmarksPopup,
225.panel-mainview:not([panelid="PanelUI-popup"]) {
226 max-width: 30em;
227}
228
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
234panelview:not([mainview]) .toolbarbutton-text,
235.cui-widget-panel toolbarbutton > .toolbarbutton-text {
236 text-align: start;
237 display: -moz-box;
238}
239
240.cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {
241 padding: 0;
242}
243
244.cui-widget-panel[viewId="PanelUI-pocketView"] > .panel-arrowcontainer > .panel-arrowcontent {
245 padding-top: 0;
246 padding-bottom: 0;
247}
248
249.cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
250 padding-bottom: 0;
251}
252
253.cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):first-child {
254 border-radius: 4px 4px 0 0;
255}
256
257.cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):last-child {
258 border-radius: 0 0 4px 4px;
259}
260
261#PanelUI-contents {
262 display: block;
263 flex: 1 0 auto;
264 margin-left: auto;
265 margin-right: auto;
266 max-width: 22.35em;
267}
268
269#PanelUI-contents-scroller {
270 overflow-y: auto;
271 overflow-x: hidden;
272 width: 22.35em;
273 flex: auto;
274}
275
276.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon {
277 min-width: 0;
278 min-height: 0;
279 margin: 0;
280}
281
282toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
283.panelUI-grid .toolbarbutton-1,
284.panel-customization-placeholder-child {
285 -moz-appearance: none;
286 -moz-box-orient: vertical;
287 width: calc(22.35em / 3 - 0.1px - 2px); /* LCARStrek: XXX: found out to be needed to fit the icons */
288 height: calc(51px + 2.2em);
289}
290
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
298/* Help SDK buttons fit in. */
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 {
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;
315 width: calc(22.35em / 3 - 0.1px - 2px);
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;
350 padding: 0;
351}
352
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;
359}
360
361#main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon {
362/* opacity: .5; */
363}
364
365toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
366 width: calc(22.35em / 3 - 0.1px);
367 margin: 0 !important;
368}
369
370toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
371 -moz-box-align: center;
372 -moz-box-pack: center;
373}
374
375toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
376 margin: 4px auto;
377}
378
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"]),
384#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-update-status,
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,
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
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;
404}
405
406toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
407 text-align: center;
408}
409
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,
415.customization-palette .toolbarbutton-1 > .toolbarbutton-badge-container,
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
423 Each button is 22.35em / 3 - 0.1px wide
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 */
433 margin: 4px calc((22.35em / 3 - 0.1px) / 2 - 22px);
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. */
439.panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon,
440.customization-palette .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon {
441 width: 32px;
442 height: 32px;
443 min-width: 32px;
444 min-height: 32px;
445 margin: 0;
446 padding: 0;
447}
448
449toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
450 -moz-box-flex: 1;
451}
452
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
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 {
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;
476 flex-shrink: 0;
477 flex-direction: column;
478/* background-color: hsla(210,4%,10%,.07);*/
479 padding: 0;
480 margin: 0;
481/* min-height: 4em;*/
482 border-bottom-right-radius: 4px;
483 border-bottom-left-radius: 4px;
484}
485
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 {
503 display: flex;
504 border-top: 1px solid #9C9CFF;
505}
506
507#PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner,
508#PanelUI-multiView[viewtype="subview"] #PanelUI-footer-fxa {
509 position: relative;
510}
511
512#PanelUI-footer-inner > toolbarseparator,
513#PanelUI-footer-fxa > toolbarseparator {
514 border: 0;
515 border-left: 1px solid #9C9CFF;
516 margin: 0;
517}
518
519#PanelUI-footer-inner:hover > toolbarseparator,
520#PanelUI-footer-fxa:hover > toolbarseparator {
521/* margin: 0;*/
522}
523
524#PanelUI-update-status,
525#PanelUI-help,
526#PanelUI-fxa-label,
527#PanelUI-fxa-icon,
528#PanelUI-customize,
529#PanelUI-quit {
530 margin: 0;
531 padding: 11px 0;
532 box-sizing: border-box;
533 min-height: 40px;
534 box-shadow: none;
535 border: none;
536 border-radius: 0;
537 transition: background-color;
538 -moz-box-orient: horizontal;
539}
540
541#PanelUI-update-status {
542 border-top: 1px solid #9C9CFF;
543 border-bottom: 1px solid transparent;
544 margin-bottom: -1px;
545}
546
547#PanelUI-update-status > .toolbarbutton-text {
548 width: 0; /* Fancy cropping solution for flexbox. */
549}
550
551#PanelUI-help[panel-multiview-anchor="true"] {
552 -moz-image-region: rect(0, 32px, 16px, 16px);
553}
554
555#PanelUI-help,
556#PanelUI-quit {
557 min-width: 44px;
558}
559
560#PanelUI-update-status > .toolbarbutton-text,
561#PanelUI-fxa-label > .toolbarbutton-text,
562#PanelUI-customize > .toolbarbutton-text {
563 margin: 0;
564 padding: 0 6px;
565 text-align: start;
566}
567
568#PanelUI-help > .toolbarbutton-text,
569#PanelUI-quit > .toolbarbutton-text,
570#PanelUI-fxa-avatar > .toolbarbutton-text {
571 display: none;
572}
573
574#PanelUI-update-status > .toolbarbutton-icon,
575#PanelUI-fxa-label > .toolbarbutton-icon,
576#PanelUI-fxa-icon > .toolbarbutton-icon,
577#PanelUI-customize > .toolbarbutton-icon,
578#PanelUI-help > .toolbarbutton-icon,
579#PanelUI-quit > .toolbarbutton-icon {
580 -moz-margin-end: 0;
581}
582
583#PanelUI-fxa-icon {
584 -moz-padding-start: 15px;
585 -moz-padding-end: 15px;
586}
587
588#PanelUI-fxa-label,
589#PanelUI-customize {
590 flex: 1;
591 -moz-padding-start: 15px;
592 -moz-border-start-style: none;
593}
594
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
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
610#PanelUI-fxa-label,
611#PanelUI-fxa-icon {
612 list-style-image: url("chrome://browser/skin/syncFx-horizontalbar.png");
613}
614
615#PanelUI-footer-fxa[syncstatus="active"] > #PanelUI-fxa-icon {
616 list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png");
617}
618
619#PanelUI-fxa-icon[fxastatus="migrate-signup"],
620#PanelUI-fxa-icon[fxastatus="migrate-verify"] {
621 list-style-image: url(chrome://global/skin/warning-16.png);
622}
623
624#PanelUI-customize {
625 list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
626}
627
628#customization-panelHolder #PanelUI-customize {
629 list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
630}
631
632#PanelUI-help {
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
641#PanelUI-fxa-label,
642#PanelUI-fxa-icon,
643#PanelUI-customize,
644#PanelUI-help,
645#PanelUI-quit {
646 -moz-image-region: rect(0, 16px, 16px, 0);
647}
648
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
663#PanelUI-fxa-status[disabled] {
664 pointer-events: none;
665}
666
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
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
699#PanelUI-fxa-icon:not([disabled]):hover,
700#PanelUI-help:not([disabled]):hover,
701#PanelUI-customize:hover,
702#PanelUI-quit:not([disabled]):hover {
703}
704
705#PanelUI-fxa-icon:not([disabled]):hover:active,
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,
712#PanelUI-fxa-status:not([disabled]):hover:active,
713#PanelUI-fxa-icon:not([disabled]):hover,
714#PanelUI-fxa-icon:not([disabled]):hover:active {
715}
716
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
730#PanelUI-update-status {
731/* color: black; */
732}
733
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
760#PanelUI-quit:not([disabled]):hover {
761 background-color: #FF0000;
762}
763
764#PanelUI-quit:not([disabled]):hover:active {
765 background-color: #FF9F00;
766}
767
768#customization-panelHolder #PanelUI-customize {
769 color: #FFCF00;
770 background-color: #008484;
771 text-shadow: none;
772 margin-top: -1px;
773}
774
775#customization-panelHolder #PanelUI-customize + toolbarseparator {
776 display: none;
777}
778
779#customization-panelHolder #PanelUI-customize:hover,
780#customization-panelHolder #PanelUI-customize:hover:active {
781 background-color: #FFCF00;
782 color: #000000;
783}
784
785#customization-palette .toolbarbutton-multiline-text,
786#customization-palette .toolbarbutton-text {
787 display: none;
788}
789
790panelview .toolbarbutton-1,
791.subviewbutton,
792.widget-overflow-list .toolbarbutton-1,
793.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
794.share-provider-button,
795.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
796/* padding: 0 6px;
797 background-color: hsla(210,4%,10%,0);
798 border-radius: 2px;
799 border-style: solid;
800 border-color: hsla(210,4%,10%,0);*/
801}
802
803panelview .toolbarbutton-1,
804.subviewbutton,
805.widget-overflow-list .toolbarbutton-1,
806.share-provider-button,
807.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
808 border-width: 0;
809}
810
811.subviewbutton.panel-subview-footer {
812/* border-radius: 0; */
813 margin: 2px 0 0;
814}
815
816.subviewbutton.panel-subview-footer > .menu-text {
817 -moz-margin-start: 0px !important;
818 -moz-padding-start: 6px;
819 -moz-padding-end: 6px;
820 -moz-box-flex: 0;
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;
835}
836
837.subviewbutton:not(.panel-subview-footer) {
838 margin: 0;
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 {
845/* font: menu;*/
846}
847
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
864.cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
865/* margin-left: 4px;
866 margin-right: 4px;*/
867}
868
869panelview .toolbarbutton-1,
870.widget-overflow-list .toolbarbutton-1 {
871 margin-top: 6px;
872}
873
874/*
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],
879.share-provider-button:not(:-moz-any([disabled],[open],:active)):hover,
880.widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
881.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
882 > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
883 background-color: hsla(210,4%,10%,.08);
884 border-color: hsla(210,4%,10%,.11);
885}
886
887.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],:active)):hover {
888 border-color: hsla(210,4%,10%,.11);
889}
890
891panelview .toolbarbutton-1:-moz-any(:not([disabled]):-moz-any([open],:hover:active),[checked=true]),
892toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],:hover:active),
893menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
894menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
895.share-provider-button:not([disabled]):-moz-any([open],:hover:active),
896.widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active),
897.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
898 > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) {
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
912menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
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
918menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
919.subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active) {
920 background-color: hsla(210,4%,10%,.15);
921 border-top: 1px solid hsla(210,4%,10%,.12);
922 box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
923}
924
925#BMB_bookmarksPopup .subviewbutton {
926 font: menu;
927 font-weight: normal;
928}
929
930#BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
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}
940
941/ Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
942#BMB_bookmarksPopup arrowscrollbox {
943 padding-bottom: 0px;
944}
945
946#BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
947 / Hide bottom separator as the styled footer includes a top border serving the same purpose /
948 display: none;
949}
950
951/ Popups with only one item don't have a footer /
952#BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
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}
964*/
965
966.PanelUI-subView menuseparator,
967.PanelUI-subView toolbarseparator,
968.cui-widget-panelview menuseparator {
969 -moz-appearance: none;
970 min-height: 0;
971 border-top: 1px solid #9C9CFF;
972 margin: 2px 0;
973 padding: 0;
974}
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 {
984/* margin-left: 5px;
985 margin-right: 5px;*/
986}
987
988.cui-widget-panelview menuseparator.small-separator {
989/* margin-left: 10px;
990 margin-right: 10px;*/
991}
992
993.subviewbutton > .menu-accel-container {
994 -moz-box-pack: start;
995 -moz-margin-start: 10px;
996 -moz-margin-end: auto;
997 color: #A09090;
998}
999
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
1011toolbarbutton[panel-multiview-anchor="true"],
1012toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
1013 color: #000000;
1014 background-color: #008484;
1015}
1016
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%;
1030 width: var(--panel-ui-exit-subview-gutter-width);
1031 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1032 background-repeat: no-repeat;
1033 background-color: #008484;
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;
1040}
1041
1042toolbarbutton[panel-multiview-anchor="true"] {
1043 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1044 background-position: right calc((22.35em / 3 - 0.1px) / 2 - var(--panel-ui-exit-subview-gutter-width) + 2px) center;
1045 background-repeat: no-repeat;
1046}
1047
1048toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
1049 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
1050 background-position: left calc((22.35em / 3 - 0.1px) / 2 - var(--panel-ui-exit-subview-gutter-width) + 2px) center;
1051}
1052
1053toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
1054#bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
1055 display: none;
1056}
1057
1058#search-container[cui-areatype="menu-panel"],
1059#wrapper-search-container[place="panel"] {
1060 width: 22.35em;
1061}
1062
1063#search-container[cui-areatype="menu-panel"] {
1064 margin-top: 6px;
1065 margin-bottom: 6px;
1066}
1067
1068toolbarpaletteitem[place="palette"] > #search-container {
1069 min-width: 7em;
1070 width: 7em;
1071}
1072
1073.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1074 padding: 0;
1075 transition-property: background-color, border-color;
1076 transition-duration: 150ms;
1077}
1078
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
1089.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1090 border: 0;
1091 padding: .5em;
1092 margin: 0;
1093 -moz-box-flex: 1;
1094 min-width: calc(22.35em / 3 - 0.1px);
1095 max-width: calc(22.35em / 3 - 0.1px);
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);
1099 max-height: none;
1100 -moz-box-orient: horizontal;
1101}
1102
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 {
1105 /* reduce the width with 2px for this button to compensate for two separators
1106 of 1px. */
1107 min-width: calc(22.35em / 3 - 0.1px - 2px);
1108 max-width: calc(22.35em / 3 - 0.1px - 2px);
1109}
1110
1111#main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
1112/* opacity: .25; */
1113}
1114
1115#zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
1116 min-width: 7ch;
1117}
1118
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) {
1123 border-top-right-radius: 0;
1124 border-bottom-right-radius: 0;
1125}
1126
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) {
1131 border-top-left-radius: 0;
1132 border-bottom-left-radius: 0;
1133}
1134
1135.toolbaritem-combined-buttons > separator {
1136 -moz-appearance: none;
1137 width: 3px;
1138 -moz-box-align: stretch;
1139}
1140
1141.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
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
1151.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
1152 margin: 0;
1153}
1154
1155#widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
1156 padding: 0;
1157}
1158
1159.cui-widget-panelview,
1160#widget-overflow-scroller {
1161 overflow-y: auto;
1162 overflow-x: hidden;
1163}
1164
1165#widget-overflow-scroller {
1166 max-height: 30em;
1167 margin-top: 10px;
1168 margin-bottom: 10px;
1169}
1170
1171#widget-overflow-list {
1172 width: 22.35em;
1173 padding-left: 10px;
1174 padding-right: 10px;
1175}
1176
1177toolbaritem[overflowedItem=true],
1178toolbarbutton[overflowedItem=true] {
1179 width: 100%;
1180 max-width: 22.35em;
1181 min-height: 36px;
1182 background-repeat: no-repeat;
1183 background-position: 0 center;
1184}
1185
1186.widget-overflow-list .toolbarbutton-1,
1187.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1188 -moz-box-align: center;
1189 -moz-box-orient: horizontal;
1190}
1191
1192.widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
1193.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1194 text-align: start;
1195 -moz-padding-start: .5em;
1196}
1197
1198#widget-overflow-list > .toolbaritem-combined-buttons {
1199 min-height: 28px;
1200}
1201
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;
1208}
1209
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;
1214}
1215
1216.subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1217 background-position: top 5px right 4px;
1218}
1219
1220.subviewbutton[checked="true"]:hover {
1221 background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1222}
1223
1224.subbiewbutton > .menu-iconic-left {
1225 -moz-margin-end: 3px;
1226}
1227
1228menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1229 visibility: hidden;
1230}
1231
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,
1236#PanelUI-panicView,
1237#PanelUI-pocketView > .panel-subview-body,
1238#PanelUI-pocketView {
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
1388/* === END panelUIOverlay.inc.css === */
1389
1390.panel-subviews {
1391 background-color: #000000;
1392}
1393
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
1404/* bookmark panel submenus */
1405
1406#BMB_bookmarksPopup menupopup[placespopup=true] {
1407/* background: transparent;
1408 border: none;
1409 padding: 6px;*/
1410}
1411
1412#BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1413 /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1414/* background: var(--panel-arrowcontent-background);
1415 border: var(--panel-arrowcontent-border);
1416 border-radius: 3.5px;
1417 margin-top: -4px;*/
1418}
1419
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
1429/* bookmark panel separator */
1430#BMB_bookmarksPopup menuseparator {
1431 padding-top: 0;
1432 padding-bottom: 0;
1433}
1434
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
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
1468menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
1469/* transform: scaleX(-1); */
1470}
1471
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
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}
1495
1496menu.subviewbutton > .menu-right {
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;
1500}
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");
1504}
1505menu[disabled="true"].subviewbutton > .menu-right {
1506 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-disabled");
1507}