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 /* === BEGIN panelUIOverlay.inc.css === */
7 #customization-panelHolder {
12 background-color: #000000;
13 -moz-margin-start: 38px;
16 .panel-subviews:-moz-locale-dir(rtl) {
19 .panel-viewstack[viewtype="main"] > .panel-subviews {
20 transform: translateX(21em);
23 .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
24 transform: translateX(-21em);
27 .panel-viewstack:not([viewtype="main"]) > .panel-mainview > #PanelUI-mainView {
33 flex-direction: column;
37 #app-extension-point-end > #PanelUI-menu-button {
40 #app-extension-point-end > #PanelUI-menu-button .toolbarbutton-text {
43 #app-extension-point-end > #PanelUI-menu-button .toolbarbutton-icon {
47 #PanelUI-popup > arrowscrollbox > autorepeatbutton {
50 #PanelUI-popup > arrowscrollbox > scrollbox {
54 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent {
63 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text,
64 #bookmarks-menu-button > toolbarbutton > .toolbarbutton-text,
65 :-moz-any(#PanelUI-contents,#widget-overflow-list) > toolbarpaletteitem > toolbaritem > toolbarbutton > .toolbarbutton-text,
66 :-moz-any(#PanelUI-contents,#widget-overflow-list) > toolbaritem > toolbarbutton > .toolbarbutton-text,
67 :-moz-any(#PanelUI-contents,#widget-overflow-list) > toolbarpaletteitem > toolbarbutton > .toolbarbutton-text,
68 :-moz-any(#PanelUI-contents,#widget-overflow-list) > toolbarbutton > .toolbarbutton-text {
72 #wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls,
73 #wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls {
78 .panel-mainview:not([panelid="PanelUI-popup"]) {
82 panelview:not([mainview]) .toolbarbutton-text,
83 #customizationui-widget-panel toolbarbutton > .toolbarbutton-text {
85 -moz-padding-start: 8px;
97 #PanelUI-contents-scroller {
106 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton > .toolbarbutton-icon,
107 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton > .toolbarbutton-icon {
113 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
114 #PanelUI-contents toolbarbutton,
115 toolbarpaletteitem[place="panel"] > toolbarbutton,
116 toolbarpaletteitem[place="palette"] > toolbarbutton,
117 toolbarpaletteitem[place="panel"] > toolbaritem > toolbarbutton,
118 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton,
119 .panel-customization-placeholder {
120 -moz-appearance: none;
121 -moz-box-orient: vertical;
130 .panel-customization-placeholder[expand],
131 .panel-customization-placeholder[contract] {
132 transition-property: width;
133 transition-duration: 170ms;
134 transition-delay: 20ms;
135 transition-timing-function: ease-in-out;
140 .panel-combined-button[disabled] > .toolbarbutton-icon {
144 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] {
146 margin: 0 !important;
149 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-widget) {
150 -moz-box-align: center;
151 -moz-box-pack: center;
154 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
155 margin: calc(5em / 12) auto;
158 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
162 .panel-customization-placeholder-child > .toolbarbutton-icon,
163 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
164 toolbarbutton[cui-areatype="menu-panel"] > .toolbarbutton-icon,
165 toolbaritem[cui-areatype="menu-panel"] > toolbarbutton > .toolbarbutton-icon,
166 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
167 toolbarpaletteitem[place="palette"] > toolbarbutton > .toolbarbutton-icon,
168 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton > .toolbarbutton-icon {
169 min-width: calc(8em / 3);
170 min-height: calc(8em / 3);
171 margin: calc(5em / 12);
174 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
178 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #copy-button,
179 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-reset-button {
185 #zoom-in-button > .toolbarbutton-text,
186 #zoom-out-button > .toolbarbutton-text,
187 #zoom-reset-button > .toolbarbutton-icon {
193 background-color: #000000;
194 border-top: 1px solid #9C9CFF;
198 border-bottom-right-radius: 4px;
199 border-bottom-left-radius: 4px;
207 -moz-appearance: none;
209 background-image: none;
210 border: 1px solid transparent;
211 border-bottom-style: none;
213 transition: background-color;
214 -moz-box-orient: horizontal;
222 #PanelUI-customize > .toolbarbutton-text {
226 #PanelUI-help > .toolbarbutton-text,
227 #PanelUI-quit > .toolbarbutton-text {
231 #PanelUI-help > .toolbarbutton-icon,
232 #PanelUI-quit > .toolbarbutton-icon {
238 -moz-padding-start: 15px;
239 -moz-border-start-style: none;
240 list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
244 list-style-image: url("chrome://browser/skin/menuPanel-help.png");
248 -moz-border-end-style: none;
249 list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
255 -moz-image-region: rect(0, 16px, 16px, 0);
258 #PanelUI-customize:hover,
259 #PanelUI-help:not([disabled]):hover,
260 #PanelUI-quit:not([disabled]):hover,
261 #PanelUI-customize:hover:active,
262 #PanelUI-help:not([disabled]):hover:active,
263 #PanelUI-quit:not([disabled]):hover:active {
264 -moz-image-region: rect(0, 32px, 16px, 16px);
267 #PanelUI-help[disabled],
268 #PanelUI-quit[disabled] {
269 -moz-image-region: rect(0, 48px, 16px, 32px);
272 #PanelUI-help:not([disabled]):hover,
273 #PanelUI-customize:hover,
274 #PanelUI-quit:not([disabled]):hover {
275 /* border-color: rgba(8,25,42,0.2);
276 border-top-color: rgba(8,25,42,0.1);
277 background-color: rgba(0,0,0,0.1);
281 #main-window[customize-entered] #PanelUI-customize {
283 background-color: #008484;
286 #main-window[customize-entered] #PanelUI-customize:hover,
287 #main-window[customize-entered] #PanelUI-customize:hover:active {
289 background-color: #FFCF00;
292 #customization-palette .toolbarbutton-text {
296 panelview toolbarbutton,
297 #widget-overflow-list > toolbarbutton,
298 .customizationmode-button,
299 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton,
300 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton,
301 #BMB_bookmarksPopup > menu,
302 #BMB_bookmarksPopup > menuitem {
303 -moz-appearance: none;
305 /* background-color: hsla(210,4%,10%,0);
308 border-color: hsla(210,4%,10%,0);*/
309 transition-property: background-color, border-color;
310 transition-duration: 150ms;
313 panelview .toolbarbutton-1,
314 #widget-overflow-list > toolbarbutton {
318 panelview toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover,
319 #widget-overflow-list > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover,
320 .customizationmode-button,
321 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover,
322 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover,
323 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem):not(:-moz-any([disabled],[checked="true"],[open],:active)):hover,
324 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem):not(:-moz-any([disabled],[checked="true"],[open],:active)):hover,
325 #BMB_bookmarksPopup > menu:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover,
326 #BMB_bookmarksPopup > menuitem:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
327 background-color: hsla(210,4%,10%,.08);
328 border-color: hsla(210,4%,10%,.1);
331 panelview toolbarbutton:not([disabled]):-moz-any([open],[checked="true"],:hover:active),
332 .customizationmode-button:not([disabled]):-moz-any([open],[checked="true"],:hover:active),
333 #widget-overflow-list > toolbarbutton:not([disabled]):-moz-any([open],[checked="true"],:hover:active),
334 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton:not([disabled]):-moz-any([open],[checked="true"],:hover:active),
335 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton:not([disabled]):-moz-any([open],[checked="true"],:hover:active),
336 #BMB_bookmarksPopup > menu:not([disabled]):-moz-any([open],[checked="true"],:hover:active),
337 #BMB_bookmarksPopup > menuitem:not([disabled]):-moz-any([open],[checked="true"],:hover:active) {
338 background-color: hsla(210,4%,10%,.15);
339 border-color: hsla(210,4%,10%,.15);
340 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.05) inset;
343 #BMB_bookmarksPopup > menu,
344 #BMB_bookmarksPopup > menuitem {
348 #BMB_bookmarksPopup > menu:not([disabled="true"]),
349 #BMB_bookmarksPopup > menuitem:not([disabled="true"]) {
353 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
354 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
355 -moz-appearance: none;
360 panelview toolbarseparator,
361 #BMB_bookmarksPopup > menuseparator {
362 -moz-appearance: none;
364 border-top: 1px solid ThreeDShadow;
368 #PanelUI-historyItems > toolbarbutton {
369 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
372 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
373 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
374 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
379 #PanelUI-footer.panel-multiview-anchor,
380 #PanelUI-footer.panel-multiview-anchor > #PanelUI-help,
381 toolbarbutton.panel-multiview-anchor {
382 /* background-color: Highlight;
383 background-image: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0));
384 background-repeat: repeat-x;
385 color: HighlightText;*/
388 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker,
389 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
393 #search-container[cui-areatype="menu-panel"] {
397 toolbarpaletteitem[place="palette"] > #search-container {
402 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem),
403 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) {
404 /* background-color: hsla(210,4%,10%,0);
407 border-color: hsla(210,4%,10%,0);
408 border-bottom-color: hsla(210,4%,10%,.1);*/
411 transition-property: background-color, border-color;
412 transition-duration: 150ms;
415 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton,
416 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton {
421 /* reduce the width with 2px for each button to compensate for two separators
423 min-width: calc(7em - 2px);
424 max-width: calc(7em - 2px);
427 -moz-box-orient: horizontal;
430 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton[disabled] > .toolbarbutton-icon,
431 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton[disabled] > .toolbarbutton-icon {
435 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
439 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #cut-button:-moz-locale-dir(ltr),
440 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #paste-button:-moz-locale-dir(rtl),
441 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-out-button:-moz-locale-dir(ltr),
442 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-in-button:-moz-locale-dir(rtl) {
443 border-top-right-radius: 0;
444 border-bottom-right-radius: 0;
447 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #cut-button:-moz-locale-dir(rtl),
448 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #paste-button:-moz-locale-dir(ltr),
449 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-out-button:-moz-locale-dir(rtl),
450 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-in-button:-moz-locale-dir(ltr) {
451 border-top-left-radius: 0;
452 border-bottom-left-radius: 0;
455 #edit-controls > separator,
456 #zoom-controls > separator {
458 -moz-box-align: stretch;
459 /* 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)),
460 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)),
461 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));
462 background-size: 1px, 1px, 1px;
463 background-position: 0 0, 1px 0, 2px 0;
464 background-repeat: no-repeat;*/
467 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
471 #widget-overflow-scroller {
479 #widget-overflow-list {
485 #widget-overflow-list > .overflowedItem {
489 background-repeat: no-repeat;
490 background-position: 0 center;
493 #widget-overflow-list > toolbarbutton,
494 #widget-overflow-list > toolbarbutton > toolbarbutton {
495 -moz-box-align: center;
496 -moz-box-orient: horizontal;
499 #widget-overflow-list > toolbarbutton > .toolbarbutton-text,
500 #widget-overflow-list > #bookmarks-menu-button > toolbarbutton > .toolbarbutton-text {
502 -moz-padding-start: .5em;
505 #widget-overflow-list > #edit-controls,
506 #widget-overflow-list > #zoom-controls {
510 #PanelUI-developerItems > toolbarbutton[checked="true"],
511 #PanelUI-bookmarks > toolbarbutton[checked="true"],
512 .PanelUI-characterEncodingView-list > toolbarbutton[current] {
513 -moz-padding-start: 4px;
516 #PanelUI-developerItems > toolbarbutton[checked="true"] > .toolbarbutton-text,
517 #PanelUI-bookmarks > toolbarbutton[checked="true"] > .toolbarbutton-text,
518 .PanelUI-characterEncodingView-list > toolbarbutton[current] > .toolbarbutton-text,
519 #customizationui-widget-panel .PanelUI-characterEncodingView-list > toolbarbutton[current] > .toolbarbutton-text {
520 -moz-padding-start: 0px;
523 #BMB_bookmarksPopup > menuitem[checked="true"]::before,
524 #PanelUI-bookmarks > toolbarbutton[checked="true"]::before,
525 #PanelUI-developerItems > toolbarbutton[checked="true"]::before,
526 .PanelUI-characterEncodingView-list > toolbarbutton[current]::before {
532 #PanelUI-bookmarks > toolbarbutton[checked="true"]::before,
533 #PanelUI-developerItems > toolbarbutton[checked="true"]::before,
534 .PanelUI-characterEncodingView-list > toolbarbutton[current]::before {
535 -moz-margin-end: -2px;
538 #BMB_bookmarksPopup > menuitem[checked="true"] > .menu-iconic-left {
542 /* === END panelUIOverlay.inc.css === */
544 #PanelUI-contents #zoom-out-btn {
549 #PanelUI-contents #zoom-in-btn {
554 #BMB_bookmarksPopup > menu,
555 #BMB_bookmarksPopup > menuitem {
560 #BMB_bookmarksPopup > menu > .menu-text,
561 #BMB_bookmarksPopup > menuitem > .menu-text,
562 #BMB_bookmarksPopup > menu > .menu-iconic-text,
563 #BMB_bookmarksPopup > menuitem > .menu-iconic-text,
564 #BMB_bookmarksPopup > menuseparator {