browser/themes/shared/customizableui/panelUIOverlay.inc.css@b8a032363ba2
browser/themes/shared/customizableui/panelUIOverlay.inc.css
Thu, 22 Jan 2015 13:21:57 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 22 Jan 2015 13:21:57 +0100
- branch
- TOR_BUG_9701
- changeset 15
- b8a032363ba2
- permissions
- -rw-r--r--
Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6
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/. */
5 %filter substitution
7 %define menuPanelWidth 22.35em
8 %define standaloneSubviewWidth 30em
9 % XXXgijs This is the ugliest bit of code I think I've ever written for Mozilla.
10 % Basically, the 0.1px is there to avoid CSS rounding errors causing buttons to wrap.
11 % For gory details, refer to https://bugzilla.mozilla.org/show_bug.cgi?id=963365#c11
12 % There's no calc() here (and therefore lots of calc() where this is used) because
13 % we don't support nested calc(): https://bugzilla.mozilla.org/show_bug.cgi?id=968761
14 %define menuPanelButtonWidth (@menuPanelWidth@ / 3 - 0.1px)
15 %define exitSubviewGutterWidth 38px
16 %define buttonStateHover :not(:-moz-any([disabled],[open],:active)):hover
17 %define menuStateHover :not(:-moz-any([disabled],:active))[_moz-menuactive]
18 %define buttonStateActive :not([disabled]):-moz-any([open],:hover:active)
19 %define menuStateActive :not([disabled])[_moz-menuactive]:active
21 %include ../browser.inc
23 #PanelUI-popup #PanelUI-contents:empty {
24 height: 128px;
25 }
27 #PanelUI-popup #PanelUI-contents:empty::before {
28 content: "";
29 background-image: url(chrome://browser/skin/customizableui/whimsy-bw.png);
30 display: block;
31 width: 64px;
32 height: 64px;
33 position: absolute;
34 animation: moveX 3.05s linear 0s infinite alternate,
35 moveY 3.4s linear 0s infinite alternate;
36 }
38 #PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):empty::before {
39 animation: moveXRTL 3.05s linear 0s infinite alternate,
40 moveY 3.4s linear 0s infinite alternate;
41 }
43 #PanelUI-popup #PanelUI-contents:empty:hover::before {
44 background-image: url(chrome://browser/skin/customizableui/whimsy.png);
45 }
47 @media (min-resolution: 2dppx) {
48 #PanelUI-popup #PanelUI-contents:empty::before {
49 background-image: url(chrome://browser/skin/customizableui/whimsy-bw@2x.png);
50 background-size: 64px 64px;
51 }
52 #PanelUI-popup #PanelUI-contents:empty:hover::before {
53 background-image: url(chrome://browser/skin/customizableui/whimsy@2x.png);
54 }
55 }
57 @keyframes moveX {
58 /* These values are adjusted for the padding on the panel. */
59 from { margin-left: -15px; } to { margin-left: calc(100% - 49px); }
60 }
62 @keyframes moveXRTL {
63 /* These values are adjusted for the padding on the panel. */
64 from { margin-right: -15px; } to { margin-right: calc(100% - 49px); }
65 }
67 @keyframes moveY {
68 /* These values are adjusted for the padding and height of the panel. */
69 from { margin-top: -.5em; } to { margin-top: calc(64px - .5em); }
70 }
72 #PanelUI-button {
73 background-image: linear-gradient(to bottom, hsla(0,0%,100%,0), hsla(0,0%,100%,.3) 30%, hsla(0,0%,100%,.3) 70%, hsla(0,0%,100%,0)),
74 linear-gradient(to bottom, hsla(210,54%,20%,0), hsla(210,54%,20%,.3) 30%, hsla(210,54%,20%,.3) 70%, hsla(210,54%,20%,0)),
75 linear-gradient(to bottom, hsla(0,0%,100%,0), hsla(0,0%,100%,.3) 30%, hsla(0,0%,100%,.3) 70%, hsla(0,0%,100%,0));
76 background-size: 1px calc(100% - 1px), 1px calc(100% - 1px), 1px calc(100% - 1px) !important;
77 background-position: 0px 0px, 1px 0px, 2px 0px;
78 background-repeat: no-repeat;
79 }
81 #PanelUI-button:-moz-locale-dir(rtl) {
82 background-position: 100% 0, calc(100% - 1px) 0, calc(100% - 2px) 0;
83 }
85 .panel-subviews {
86 padding: 4px;
87 background-color: hsla(0,0%,100%,.97);
88 background-clip: padding-box;
89 border-left: 1px solid hsla(210,4%,10%,.3);
90 box-shadow: 0 3px 5px hsla(210,4%,10%,.1),
91 0 0 7px hsla(210,4%,10%,.1);
92 color: hsl(0,0%,15%);
93 -moz-margin-start: @exitSubviewGutterWidth@;
94 }
96 .panel-viewstack[viewtype="main"] > .panel-subviews {
97 transform: translateX(@menuPanelWidth@);
98 }
100 .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
101 transform: translateX(-@menuPanelWidth@);
102 }
104 panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
105 display: none;
106 }
108 .panel-viewstack:not([viewtype="main"]) > .panel-mainview > #PanelUI-mainView {
109 -moz-box-flex: 1;
110 }
112 .panel-subview-body {
113 overflow-y: auto;
114 overflow-x: hidden;
115 -moz-box-flex: 1;
116 }
118 #PanelUI-popup .panel-subview-body {
119 margin: -4px;
120 padding: 4px 4px;
121 }
123 .panel-subview-header,
124 .subviewbutton.panel-subview-footer {
125 padding: 12px;
126 }
128 .panel-subview-header {
129 margin: -4px -4px 4px;
130 background-color: hsla(210,4%,10%,.05);
131 box-shadow: 0 -1px 0 hsla(210,4%,10%,.05) inset;
132 color: hsl(0,0%,50%);
133 }
135 .cui-widget-panelview .panel-subview-header {
136 display: none;
137 }
139 .cui-widget-panelview .subviewbutton.panel-subview-footer {
140 margin: 4px 0 0;
141 -moz-box-pack: center;
142 }
144 #PanelUI-mainView {
145 display: flex;
146 flex-direction: column;
147 }
149 #app-extension-point-end > #PanelUI-menu-button {
150 padding: 2px 5px;
151 }
152 #app-extension-point-end > #PanelUI-menu-button .toolbarbutton-text {
153 display: none;
154 }
155 #app-extension-point-end > #PanelUI-menu-button .toolbarbutton-icon {
156 margin: 0;
157 }
159 #PanelUI-popup > arrowscrollbox > autorepeatbutton {
160 display: none;
161 }
162 #PanelUI-popup > arrowscrollbox > scrollbox {
163 overflow: visible;
164 }
166 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent {
167 overflow: hidden;
168 }
170 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent,
171 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box {
172 padding: 0;
173 }
175 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
176 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
177 line-height: 1.1;
178 max-height: 2.2em;
179 }
181 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
182 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-multiline-text {
183 -moz-hyphens: auto;
184 }
186 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
187 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-multiline-text {
188 position: absolute;
189 clip: rect(auto, auto, 2.3em, auto);
190 }
192 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-text,
193 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
194 text-align: center;
195 /* Need to override toolkit theming which sets margin: 0 !important; */
196 margin: 2px 0 0 !important;
197 }
199 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
200 text-align: center;
201 margin: -1px 0 0;
202 }
204 #wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls,
205 #wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls {
206 -moz-margin-start: 0;
207 }
209 #PanelUI-contents {
210 max-width: @menuPanelWidth@;
211 }
213 #BMB_bookmarksPopup,
214 .panel-mainview:not([panelid="PanelUI-popup"]) {
215 max-width: @standaloneSubviewWidth@;
216 }
218 panelview:not([mainview]) .toolbarbutton-text,
219 .cui-widget-panel toolbarbutton > .toolbarbutton-text {
220 text-align: start;
221 display: -moz-box;
222 }
224 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {
225 padding: 4px 0;
226 }
228 .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
229 padding-bottom: 0;
230 }
232 #PanelUI-contents {
233 display: block;
234 flex: 1 0 auto;
235 margin-left: auto;
236 margin-right: auto;
237 padding: .5em 0;
238 max-width: @menuPanelWidth@;
239 }
241 #PanelUI-contents-scroller {
242 overflow-y: auto;
243 overflow-x: hidden;
244 width: @menuPanelWidth@;
245 padding-left: 5px;
246 padding-right: 5px;
247 flex: auto;
248 }
250 .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton > .toolbarbutton-icon {
251 min-width: 0;
252 min-height: 0;
253 margin: 0;
254 }
256 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
257 .panelUI-grid .toolbarbutton-1,
258 .panel-customization-placeholder-child {
259 -moz-appearance: none;
260 -moz-box-orient: vertical;
261 width: calc(@menuPanelButtonWidth@);
262 height: calc(51px + 2.2em);
263 }
265 /* In order to have button labels constrained appropriately, items inside the toolbarpaletteitem
266 * should have a min-width set so they abide by the width set above (which they do outside of
267 * customize mode because they're in a flexed container) */
268 toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 {
269 min-width: 0.01px;
270 }
272 /* Help SDK buttons fit in. */
273 toolbarpaletteitem[place="palette"] > toolbarbutton[sdk-button="true"] > .toolbarbutton-icon,
274 toolbarbutton[sdk-button="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon {
275 height: 32px;
276 width: 32px;
277 }
279 .customization-palette .toolbarbutton-1 {
280 -moz-appearance: none;
281 -moz-box-orient: vertical;
282 }
284 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
285 -moz-appearance: none;
286 -moz-box-orient: vertical;
287 width: calc(@menuPanelButtonWidth@ - 2px);
288 height: calc(49px + 2.2em);
289 border: 0;
290 }
292 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text,
293 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
294 margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */
295 }
297 .panel-customization-placeholder-child {
298 margin: 6px 0 0;
299 padding: 2px 6px;
300 border: 1px solid transparent;
301 }
303 .panelUI-grid .toolbarbutton-1[type="menu"] {
304 background-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow.png");
305 background-position: right 3px top 16px;
306 background-repeat: no-repeat;
307 }
309 .panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) {
310 background-position: left 3px top 16px;
311 }
313 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
314 display: none;
315 }
317 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
318 -moz-box-align: center;
319 width: 16px;
320 -moz-margin-start: -16px;
321 height: 51px;
322 margin-bottom: 2.2em;
323 padding: 0;
324 }
326 .panelUI-grid .toolbarbutton-1:not([buttonover])@buttonStateHover@ > .toolbarbutton-menubutton-dropmarker {
327 background-color: hsla(210,4%,10%,.1) !important;
328 border-radius: 0 0 0 2px;
329 }
331 .panelUI-grid .toolbarbutton-1:not([buttonover])@buttonStateHover@ > .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
332 border-radius: 0 0 2px 0;
333 }
335 #main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon {
336 opacity: .5;
337 }
339 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
340 width: calc(@menuPanelButtonWidth@);
341 margin: 0 !important;
342 }
344 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
345 -moz-box-align: center;
346 -moz-box-pack: center;
347 }
349 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
350 margin: 4px auto;
351 }
353 #PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview > #PanelUI-mainView {
354 background-color: hsla(210,4%,10%,.1);
355 }
357 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
358 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
359 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-status,
360 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator,
361 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize,
362 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) {
363 opacity: .5;
364 }
366 /*
367 * XXXgijs: this is a workaround for a layout issue that was caused by these iframes,
368 * which was affecting subview display. Because of this, we're hiding the iframe *only*
369 * when displaying a subview. The discerning user might notice this, but it's not nearly
370 * as bad as the brokenness.
371 * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375
372 * is addressed.
373 */
374 #PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe {
375 visibility: hidden;
376 }
378 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
379 text-align: center;
380 }
382 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
383 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
384 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container,
385 .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
386 .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
387 .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
388 .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
389 .panel-customization-placeholder-child > .toolbarbutton-icon {
390 min-width: 32px;
391 min-height: 32px;
392 /* Explanation for the below formula (A / B - C)
393 A
394 Each button is @menuPanelButtonWidth@ wide
395 B
396 Each button has two margins.
397 C (46px / 2 = 23px)
398 The button icon is 32 pixels wide.
399 The button has 12px of horizontal padding (6 on each side).
400 The button has 2px of horizontal border (1 on each side).
401 Total width of button's icon + button padding should therefore be 46px,
402 which means each horizontal margin should be the half the button's width - (46/2) px.
403 */
404 margin: 4px calc(@menuPanelButtonWidth@ / 2 - 23px);
405 }
407 /* above we treat the container as the icon for the margins, that is so the
408 /* badge itself is positioned correctly. Here we make sure that the icon itself
409 /* has the minum size we want, but no padding/margin. */
410 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon {
411 min-width: 32px;
412 min-height: 32px;
413 margin: 0;
414 padding: 0;
415 }
417 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
418 -moz-box-flex: 1;
419 }
421 #personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
422 -moz-box-flex: 1;
423 }
425 #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
426 -moz-margin-end: 2px;
427 }
429 #edit-controls@inAnyPanel@ > #copy-button,
430 #zoom-controls@inAnyPanel@ > #zoom-reset-button {
431 border-left: none;
432 border-right: none;
433 border-radius: 0;
434 }
436 #zoom-in-button > .toolbarbutton-text,
437 #zoom-out-button > .toolbarbutton-text,
438 #zoom-reset-button > .toolbarbutton-icon {
439 display: none;
440 }
442 #PanelUI-footer {
443 display: flex;
444 flex-shrink: 0;
445 flex-direction: column;
446 background-color: hsla(210,4%,10%,.07);
447 padding: 0;
448 margin: 0;
449 }
451 #PanelUI-footer-inner {
452 display: flex;
453 border-top: 1px solid hsla(210,4%,10%,.14);
454 }
456 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner {
457 position: relative;
458 }
460 #PanelUI-footer-inner > toolbarseparator {
461 border: 0;
462 border-left: 1px solid hsla(210,4%,10%,.14);
463 margin: 7px 0 7px;
464 -moz-appearance: none;
465 }
467 #PanelUI-footer-inner:hover > toolbarseparator {
468 margin: 0;
469 }
471 #PanelUI-help,
472 #PanelUI-fxa-status,
473 #PanelUI-customize,
474 #PanelUI-quit {
475 margin: 0;
476 padding: 10px 0;
477 min-height: 2em;
478 -moz-appearance: none;
479 box-shadow: none;
480 border: none;
481 border-radius: 0;
482 transition: background-color;
483 -moz-box-orient: horizontal;
484 }
486 #PanelUI-fxa-status {
487 border-top: 1px solid hsla(210,4%,10%,.14);
488 border-bottom: 1px solid transparent;
489 margin-bottom: -1px;
490 }
492 #PanelUI-fxa-status > .toolbarbutton-text {
493 width: 0; /* Fancy cropping solution for flexbox. */
494 }
496 #PanelUI-help,
497 #PanelUI-quit {
498 min-width: 46px;
499 }
501 #PanelUI-fxa-status > .toolbarbutton-text,
502 #PanelUI-customize > .toolbarbutton-text {
503 margin: 0;
504 padding: 0 6px;
505 text-align: start;
506 }
508 #PanelUI-help > .toolbarbutton-text,
509 #PanelUI-quit > .toolbarbutton-text {
510 display: none;
511 }
513 #PanelUI-fxa-status > .toolbarbutton-icon,
514 #PanelUI-customize > .toolbarbutton-icon,
515 #PanelUI-help > .toolbarbutton-icon,
516 #PanelUI-quit > .toolbarbutton-icon {
517 -moz-margin-end: 0;
518 }
520 #PanelUI-fxa-status,
521 #PanelUI-customize {
522 flex: 1;
523 -moz-padding-start: 15px;
524 -moz-border-start-style: none;
525 }
527 #PanelUI-fxa-status {
528 list-style-image: url(chrome://browser/skin/sync-horizontalbar.png);
529 }
531 #PanelUI-fxa-status[status="active"] {
532 list-style-image: url(chrome://browser/skin/syncProgress-horizontalbar.png);
533 }
535 #PanelUI-customize {
536 list-style-image: url(chrome://browser/skin/menuPanel-customize.png);
537 }
539 #customization-panelHolder #PanelUI-customize {
540 list-style-image: url(chrome://browser/skin/customizableui/menuPanel-customizeFinish.png);
541 }
543 #PanelUI-help {
544 list-style-image: url(chrome://browser/skin/menuPanel-help.png);
545 }
547 #PanelUI-quit {
548 -moz-border-end-style: none;
549 list-style-image: url(chrome://browser/skin/menuPanel-exit.png);
550 }
552 #PanelUI-fxa-status,
553 #PanelUI-customize,
554 #PanelUI-help,
555 #PanelUI-quit {
556 -moz-image-region: rect(0, 16px, 16px, 0);
557 }
559 #PanelUI-customize:hover,
560 #PanelUI-help:not([disabled]):hover,
561 #PanelUI-quit:not([disabled]):hover {
562 -moz-image-region: rect(0, 32px, 16px, 16px);
563 }
565 #PanelUI-customize:hover:active,
566 #PanelUI-help:not([disabled]):hover:active,
567 #PanelUI-quit:not([disabled]):hover:active {
568 -moz-image-region: rect(0, 48px, 16px, 32px);
569 }
571 #PanelUI-help[panel-multiview-anchor="true"] {
572 -moz-image-region: rect(0, 64px, 16px, 48px);
573 }
575 #PanelUI-help[disabled],
576 #PanelUI-quit[disabled] {
577 opacity: 0.4;
578 }
580 #PanelUI-fxa-status:not([disabled]):hover,
581 #PanelUI-help:not([disabled]):hover,
582 #PanelUI-customize:hover,
583 #PanelUI-quit:not([disabled]):hover {
584 outline: 1px solid hsla(210,4%,10%,.07);
585 background-color: hsla(210,4%,10%,.07);
586 }
588 #PanelUI-fxa-status:not([disabled]):hover:active,
589 #PanelUI-help:not([disabled]):hover:active,
590 #PanelUI-customize:hover:active,
591 #PanelUI-quit:not([disabled]):hover:active {
592 outline: 1px solid hsla(210,4%,10%,.12);
593 background-color: hsla(210,4%,10%,.12);
594 box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
595 }
597 #PanelUI-fxa-status:not([disabled]):hover,
598 #PanelUI-fxa-status:not([disabled]):hover:active {
599 outline: none;
600 }
602 #PanelUI-quit:not([disabled]):hover {
603 background-color: #d94141;
604 outline-color: #c23a3a;
605 }
607 #PanelUI-quit:not([disabled]):hover:active {
608 background-color: #ad3434;
609 outline-color: #992e2e;
610 }
612 #customization-panelHolder #PanelUI-customize {
613 color: white;
614 background-color: rgb(116,191,67);
615 text-shadow: none;
616 margin-top: -1px;
617 }
619 #customization-panelHolder #PanelUI-customize + toolbarseparator {
620 display: none;
621 }
623 #customization-panelHolder #PanelUI-customize:hover,
624 #customization-panelHolder #PanelUI-customize:hover:active {
625 background-color: rgb(105,173,61);
626 }
628 #customization-palette .toolbarbutton-multiline-text,
629 #customization-palette .toolbarbutton-text {
630 display: none;
631 }
633 panelview .toolbarbutton-1,
634 .subviewbutton,
635 .widget-overflow-list .toolbarbutton-1,
636 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
637 .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton {
638 -moz-appearance: none;
639 padding: 0 6px;
640 background-color: hsla(210,4%,10%,0);
641 border-radius: 2px;
642 border-style: solid;
643 border-color: hsla(210,4%,10%,0);
644 }
646 panelview .toolbarbutton-1,
647 .subviewbutton,
648 .widget-overflow-list .toolbarbutton-1,
649 .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton {
650 border-width: 1px;
651 }
653 .subviewbutton.panel-subview-footer {
654 border-radius: 0;
655 border: none;
656 }
658 .subviewbutton.panel-subview-footer > .menu-text {
659 -moz-appearance: none;
660 -moz-margin-start: 0px !important;
661 -moz-padding-start: 6px;
662 -moz-padding-end: 6px;
663 -moz-box-flex: 0;
664 text-align: center;
665 }
667 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
668 margin: 0;
669 }
671 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
672 text-align: center;
673 padding: 0;
674 }
676 .subviewbutton.panel-subview-footer > .menu-accel-container {
677 -moz-padding-start: 6px;
678 }
680 .subviewbutton:not(.panel-subview-footer) {
681 margin: 0;
682 }
684 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
685 /* Bookmark items need a more specific selector. */
686 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
687 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
688 font: menu;
689 }
691 .PanelUI-subView .subviewbutton[shortcut]::after {
692 content: attr(shortcut);
693 float: right;
694 color: hsl(0,0%,50%);
695 }
697 .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
698 -moz-margin-start: 10px;
699 }
701 /* This is a <label> but it should fit in with the menu font- and colorwise. */
702 #PanelUI-characterEncodingView-autodetect-label {
703 font: menu;
704 color: inherit;
705 }
707 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
708 margin-left: 4px;
709 margin-right: 4px;
710 }
712 panelview .toolbarbutton-1,
713 .widget-overflow-list .toolbarbutton-1 {
714 margin-top: 6px;
715 }
717 panelview .toolbarbutton-1@buttonStateHover@,
718 toolbarbutton.subviewbutton@buttonStateHover@,
719 menu.subviewbutton@menuStateHover@,
720 menuitem.subviewbutton@menuStateHover@,
721 .widget-overflow-list .toolbarbutton-1@buttonStateHover@,
722 .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton@buttonStateHover@ {
723 background-color: hsla(210,4%,10%,.08);
724 border-color: hsla(210,4%,10%,.11);
725 }
727 .toolbaritem-combined-buttons@inAnyPanel@@buttonStateHover@ {
728 border-color: hsla(210,4%,10%,.11);
729 }
731 panelview .toolbarbutton-1:-moz-any(@buttonStateActive@,[checked=true]),
732 toolbarbutton.subviewbutton@buttonStateActive@,
733 menu.subviewbutton@menuStateActive@,
734 menuitem.subviewbutton@menuStateActive@,
735 .widget-overflow-list .toolbarbutton-1@buttonStateActive@,
736 .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton@buttonStateActive@ {
737 background-color: hsla(210,4%,10%,.12);
738 border-color: hsla(210,4%,10%,.14);
739 box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
740 }
742 .subviewbutton.panel-subview-footer {
743 margin: 4px -4px -4px;
744 background-color: hsla(210,4%,10%,.07);
745 border-top: 1px solid hsla(210,4%,10%,.12);
746 border-radius: 0;
747 color: hsl(0,0%,25%)
748 }
750 menuitem.panel-subview-footer@menuStateHover@,
751 .subviewbutton.panel-subview-footer@buttonStateHover@ {
752 background-color: hsla(210,4%,10%,.15);
753 border-top: 1px solid hsla(210,4%,10%,.14);
754 }
756 menuitem.panel-subview-footer@menuStateActive@,
757 .subviewbutton.panel-subview-footer@buttonStateActive@ {
758 background-color: hsla(210,4%,10%,.19);
759 border-top: 1px solid hsla(210,4%,10%,.14);
760 box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
761 }
763 #BMB_bookmarksPopup .subviewbutton {
764 font: menu;
765 font-weight: normal;
766 }
768 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
769 color: inherit;
770 }
772 #BMB_bookmarksPopup .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
773 #BMB_bookmarksPopup .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
774 -moz-appearance: none;
775 margin-top: 0;
776 margin-bottom: 0;
777 }
779 /* Remove padding on xul:arrowscrollbox to avoid extra padding on footer */
780 #BMB_bookmarksPopup arrowscrollbox {
781 padding-bottom: 0px;
782 }
784 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
785 /* Hide bottom separator as the styled footer includes a top border serving the same purpose */
786 display: none;
787 }
789 /* Popups with only one item don't have a footer */
790 #BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
791 /* These popups never have a footer */
792 #BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
793 #BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
794 /* And so they need some bottom padding: */
795 padding-bottom: 4px;
796 }
798 /* Disabled (empty) item is always alone and never has an icon, so fix its left padding */
799 #BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
800 padding-left: 6px;
801 }
803 .PanelUI-subView menuseparator,
804 .PanelUI-subView toolbarseparator,
805 .cui-widget-panelview menuseparator {
806 -moz-appearance: none;
807 min-height: 0;
808 border-top: 1px solid hsla(210,4%,10%,.15);
809 margin: 6px 0;
810 padding: 0;
811 }
813 .PanelUI-subView menuseparator,
814 .PanelUI-subView toolbarseparator {
815 -moz-margin-start: -5px;
816 -moz-margin-end: -4px;
817 }
819 .PanelUI-subView menuseparator.small-separator,
820 .PanelUI-subView toolbarseparator.small-separator {
821 margin-left: 5px;
822 margin-right: 5px;
823 }
825 .cui-widget-panelview menuseparator.small-separator {
826 margin-left: 10px;
827 margin-right: 10px;
828 }
830 .subviewbutton > .menu-accel-container {
831 -moz-box-pack: start;
832 -moz-margin-start: 10px;
833 -moz-margin-end: auto;
834 color: hsl(0,0%,50%);
835 }
837 #PanelUI-historyItems > toolbarbutton {
838 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
839 }
841 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
842 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
843 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
844 width: 16px;
845 height: 16px;
846 }
848 toolbarbutton[panel-multiview-anchor="true"],
849 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
850 color: HighlightText;
851 background-color: Highlight;
852 }
854 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
855 display: none;
856 }
858 #PanelUI-help[panel-multiview-anchor="true"] {
859 background-image: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0));
860 background-position: 0;
861 }
863 #PanelUI-help[panel-multiview-anchor="true"]::after {
864 content: "";
865 position: absolute;
866 top: 0;
867 height: 100%;
868 width: @exitSubviewGutterWidth@;
869 background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted.png),
870 linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0));
871 background-repeat: no-repeat;
872 background-color: Highlight;
873 background-position: left 10px center, 0; /* this doesn't need to be changed for RTL */
874 }
876 toolbarbutton[panel-multiview-anchor="true"] {
877 background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted.png),
878 linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0));
879 background-position: right 5px center;
880 background-repeat: no-repeat, repeat;
881 }
883 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
884 background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png),
885 linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0));
886 background-position: left 5px center;
887 }
889 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
890 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
891 display: none;
892 }
894 #search-container[cui-areatype="menu-panel"],
895 #wrapper-search-container[place="panel"] {
896 width: @menuPanelWidth@;
897 }
899 #search-container[cui-areatype="menu-panel"] {
900 margin-top: 6px;
901 margin-bottom: 6px;
902 }
904 toolbarpaletteitem[place="palette"] > #search-container {
905 min-width: 7em;
906 width: 7em;
907 }
909 .toolbaritem-combined-buttons@inAnyPanel@ {
910 background-color: hsla(210,4%,10%,0);
911 border-radius: 2px;
912 border: 1px solid;
913 border-color: hsla(210,4%,10%,0);
914 border-bottom-color: hsla(210,4%,10%,.1);
915 padding: 0;
916 transition-property: background-color, border-color;
917 transition-duration: 150ms;
918 }
920 /* Make direct siblings overlap borders: */
921 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons@inAnyPanel@ {
922 border-top-color: transparent !important;
923 }
925 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons@inAnyPanel@,
926 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
927 margin-top: -1px;
928 }
930 .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton {
931 border: 0;
932 padding: .5em;
933 margin: 0;
934 -moz-box-flex: 1;
935 min-width: calc(@menuPanelButtonWidth@);
936 max-width: calc(@menuPanelButtonWidth@);
937 /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
938 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
939 height: calc(2.2em + 4px);
940 max-height: none;
941 -moz-box-orient: horizontal;
942 }
944 #edit-controls@inAnyPanel@ > #copy-button,
945 #zoom-controls@inAnyPanel@ > #zoom-reset-button {
946 /* reduce the width with 2px for this button to compensate for two separators
947 of 1px. */
948 min-width: calc(@menuPanelButtonWidth@ - 2px);
949 max-width: calc(@menuPanelButtonWidth@ - 2px);
950 }
952 #main-window:not([customizing]) .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton[disabled] > .toolbarbutton-icon {
953 opacity: .25;
954 }
956 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
957 %ifdef XP_MACOSX
958 min-width: 6ch;
959 %else
960 min-width: 7ch;
961 %endif
962 }
964 #edit-controls@inAnyPanel@ > #cut-button:-moz-locale-dir(ltr),
965 #edit-controls@inAnyPanel@ > #paste-button:-moz-locale-dir(rtl),
966 #zoom-controls@inAnyPanel@ > #zoom-out-button:-moz-locale-dir(ltr),
967 #zoom-controls@inAnyPanel@ > #zoom-in-button:-moz-locale-dir(rtl) {
968 border-top-right-radius: 0;
969 border-bottom-right-radius: 0;
970 }
972 #edit-controls@inAnyPanel@ > #cut-button:-moz-locale-dir(rtl),
973 #edit-controls@inAnyPanel@ > #paste-button:-moz-locale-dir(ltr),
974 #zoom-controls@inAnyPanel@ > #zoom-out-button:-moz-locale-dir(rtl),
975 #zoom-controls@inAnyPanel@ > #zoom-in-button:-moz-locale-dir(ltr) {
976 border-top-left-radius: 0;
977 border-bottom-left-radius: 0;
978 }
980 .toolbaritem-combined-buttons > separator {
981 -moz-appearance: none;
982 width: 3px;
983 -moz-box-align: stretch;
984 background-image: linear-gradient(to bottom, hsla(0,0%,100%,0), hsla(0,0%,100%,.3) 40%, hsla(0,0%,100%,.3) 60%, hsla(0,0%,100%,0)),
985 linear-gradient(to bottom, hsla(210,54%,20%,0), hsla(210,54%,20%,.15) 40%, hsla(210,54%,20%,.15) 60%, hsla(210,54%,20%,0)),
986 linear-gradient(to bottom, hsla(0,0%,100%,0), hsla(0,0%,100%,.3) 40%, hsla(0,0%,100%,.3) 60%, hsla(0,0%,100%,0));
987 background-size: 1px, 1px, 1px;
988 background-position: 0 0, 1px 0, 2px 0;
989 background-repeat: no-repeat;
990 }
992 .toolbaritem-combined-buttons@inAnyPanel@ > separator {
993 margin: .5em 0;
994 width: 1px;
995 height: auto;
996 background: hsla(210,4%,10%,.15);
997 transition-property: margin;
998 transition-duration: 10ms;
999 transition-timing-function: ease;
1000 }
1002 .toolbaritem-combined-buttons@inAnyPanel@:hover > separator {
1003 margin: 0;
1004 }
1006 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
1007 padding: 0;
1008 }
1010 .cui-widget-panelview,
1011 #widget-overflow-scroller {
1012 overflow-y: auto;
1013 overflow-x: hidden;
1014 }
1016 #widget-overflow-scroller {
1017 max-height: 30em;
1018 margin-top: 10px;
1019 margin-bottom: 10px;
1020 }
1022 #widget-overflow-list {
1023 width: @menuPanelWidth@;
1024 padding-left: 10px;
1025 padding-right: 10px;
1026 }
1028 toolbaritem[overflowedItem=true],
1029 .widget-overflow-list .toolbarbutton-1 {
1030 width: 100%;
1031 max-width: @menuPanelWidth@;
1032 min-height: 36px;
1033 background-repeat: no-repeat;
1034 background-position: 0 center;
1035 }
1037 .widget-overflow-list .toolbarbutton-1,
1038 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1039 -moz-box-align: center;
1040 -moz-box-orient: horizontal;
1041 }
1043 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
1044 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1045 text-align: start;
1046 -moz-padding-start: .5em;
1047 }
1049 #widget-overflow-list > .toolbaritem-combined-buttons {
1050 min-height: 28px;
1051 }
1053 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1054 content: "";
1055 display: -moz-box;
1056 width: 1px;
1057 height: 18px;
1058 -moz-margin-end: -1px;
1059 background-image: linear-gradient(hsla(210,54%,20%,.2) 0, hsla(210,54%,20%,.2) 18px);
1060 background-clip: padding-box;
1061 background-position: center;
1062 background-repeat: no-repeat;
1063 background-size: 1px 18px;
1064 box-shadow: 0 0 0 1px hsla(0,0%,100%,.2);
1065 }
1067 .subviewbutton[checked="true"] {
1068 background: url("chrome://global/skin/menu/shared-menu-check.png") center left 7px / 11px 11px no-repeat transparent;
1069 }
1071 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1072 background-position: center right 7px;
1073 }
1075 .subviewbutton > .menu-iconic-left {
1076 -moz-appearance: none;
1077 -moz-margin-end: 3px;
1078 }
1080 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1081 visibility: hidden;
1082 }
