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 @import url("chrome://global/skin/");
6 @import url("downloads/indicator.css");
8 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
9 @namespace html url("http://www.w3.org/1999/xhtml");
10 @namespace svg url("http://www.w3.org/2000/svg");
13 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar");
16 toolbar[customizable="true"] {
17 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-browsercustom");
20 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme), (-moz-mac-yosemite-theme) {
21 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
22 toolbar[customizable="true"]:not([nowindowdrag="true"]) {
23 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-drag-browsercustom");
27 toolbar[type="menubar"][autohide="true"] {
28 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide");
31 #toolbar-menubar[autohide="true"] {
32 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide-browsercustom");
36 -moz-binding: url("chrome://global/skin/globalBindings.xml#menubar");
40 /*--backbutton-urlbar-overlap: 5px;*/
42 /* icon width + border + horizontal padding (includes the overlap from backbutton-urlbar-overlap) */
43 --forwardbutton-width: 27px;
44 /* icon width + border + horizontal padding (without the overlap from backbutton-urlbar-overlap) /
45 --forwardbutton-width: 25px;*/
47 --identity-box-verified-background-color: #000000;
49 --panel-separator-color: #A09090;
51 --urlbar-separator-color: #9C9CFF;
55 -moz-box-orient: vertical; /* for flex hack */
59 -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
62 /* ::::: primary toolbar ::::: */
64 .toolbar-primary > .toolbar-box > .toolbar-holder {
65 background-color: #A09090;
68 .toolbar-primary > .toolbar-box > .toolbar-startcap,
69 .toolbar-primary > .toolbar-box > .toolbar-endcap {
70 background-color: #9C9CFF;
73 /* Hides the titlebar-placeholder underneath the window caption buttons when we
74 are not autohiding the menubar. */
75 #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-placeholder[type="caption-buttons"] {
79 /* We want a 4px gap between the TabsToolbar and the toolbar-menubar when the
80 toolbar-menu is displayed, and a 16px gap when it is not. 1px is taken care
81 of by the (light) outer shadow of the tab, the remaining 3/15 are these margins. */
82 #toolbar-menubar:not([moz-collapsed=true]):not([autohide=true]) ~ #TabsToolbar,
83 #toolbar-menubar:not([moz-collapsed=true])[autohide=true]:not([inactive]) ~ #TabsToolbar {
87 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
88 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
89 /* margin-top: var(--space-above-tabbar);*/
92 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
93 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
94 #main-window[tabsintitlebar]:not([inFullscreen="true"]) #TabsToolbar {
99 #main-window[tabsintitlebar] #toolbar-menubar .toolbar-endcap {
100 /* the titlebar buttons are shown right over the endcap but we have no power over the buttonbox position just for this case, so hide the endcap */
104 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar[customizing-dragovertarget].customization-target::before,
105 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar[customizing-dragovertarget].customization-target::before,
106 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar.customization-target:hover::before,
107 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar.customization-target:hover::before {
108 outline-color: #A09090;
114 #navigator-toolbox::after {
117 -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
121 #navigator-toolbox > toolbar {
124 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme) {
127 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar) {
128 overflow: -moz-hidden-unscrollable;
130 transition: min-height 170ms ease-out, max-height 170ms ease-out;
133 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar)[collapsed=true] {
136 transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
139 @media (-moz-mac-graphite-theme: 0) and (-moz-mac-lion-theme: 0) {
140 /* This is a hackish workaround to exclude most of Mac OS until bug 1060941 gets fixed. */
141 /* Indent also due to non-applicable aero rule in original Windows theme. */
142 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
143 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
145 background-color: #6000CF;
149 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive,
150 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
151 background-color: #8050B0;
155 #main-window[tabsintitlebar] #main-menubar > menu:not(:-moz-lwtheme) {
159 #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
163 #main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
164 -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
169 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
170 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
171 #titlebar-buttonbox > .titlebar-button {
177 /* Position the toolbar above the bottom of background tabs */
182 #personal-bookmarks {
183 /* min-height: 24px; */
186 #PersonalToolbar > #home-button {
187 -moz-box-orient: horizontal;
190 #PersonalToolbar > #home-button > .toolbarbutton-text {
194 #print-preview-toolbar:not(:-moz-lwtheme) {
195 /* -moz-appearance: toolbox; */
198 #browser-bottombox:not(:-moz-lwtheme) {
201 /* ::::: titlebar ::::: */
205 background-color: #6000CF;
208 #titlebar:-moz-window-inactive {
209 background-color: #8050B0;
213 #main-window[sizemode="normal"] > #titlebar {
218 #main-window[sizemode="maximized"] > #titlebar {
222 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
223 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
224 #main-window[sizemode="normal"] > #titlebar,
225 #main-window[sizemode="maximized"] > #titlebar {
227 /* There is a margin-bottom set to -23 by code. */
231 /* The button box must appear on top of the navigator-toolbox in order for
232 * click and hover mouse events to work properly for the button in the restored
233 * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
234 * can swallow those events. It will also place the buttons above the fog on
235 * themes with Aero Glass.
238 #main-window[sizemode="maximized"] #titlebar-buttonbox {
239 -moz-appearance: none;
242 margin-inline-end: 3px;
246 .titlebar-placeholder[type="appmenu-button"] {
250 .titlebar-placeholder[type="caption-buttons"] {
254 /* titlebar command buttons */
256 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize");
259 #titlebar-min:hover {
260 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize-hover");
264 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize");
267 #titlebar-max:hover {
268 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize-hover");
271 #main-window[sizemode="maximized"] #titlebar-max {
272 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore");
275 #main-window[sizemode="maximized"] #titlebar-max:hover {
276 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore-hover");
280 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close");
283 #titlebar-close:hover {
284 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-hover");
287 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
288 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
289 #titlebar-fullscreen-button {
290 -moz-appearance: none;
291 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon.png");
292 -moz-image-region: rect(0px, 16px, 16px, 0px);
295 #titlebar-fullscreen-button:hover {
296 -moz-image-region: rect(0px, 32px, 16px, 16px);
299 @media (min-resolution: 2dppx) {
300 #titlebar-fullscreen-button {
301 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon@2x.png");
302 -moz-image-region: rect(0px, 32px, 32px, 0px);
305 #titlebar-fullscreen-button:hover {
306 -moz-image-region: rect(0px, 64px, 32px, 32px);
312 /* ::::: bookmark buttons ::::: */
314 toolbarbutton.bookmark-item:not(.subviewbutton),
315 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
320 toolbarbutton.bookmark-item:not([disabled="true"]):not(.subviewbutton):hover:active,
321 toolbarbutton.bookmark-item[open="true"] {
324 padding-inline-start: 4px;
325 padding-inline-end: 2px;*/
328 .bookmark-item > .toolbarbutton-icon,
329 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
332 margin-inline-start: 1px;
333 margin-inline-end: 2px;
338 /* Force the display of the label for bookmarks */
339 .bookmark-item > .toolbarbutton-text,
340 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
341 display: -moz-box !important;
344 .bookmark-item > .toolbarbutton-menu-dropmarker {
348 #bookmarks-toolbar-placeholder {
349 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") !important;
350 -moz-box-orient: horizontal;
353 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
354 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
355 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
358 /* ----- BOOKMARK STAR ANIMATION ----- */
360 @keyframes animation-bookmarkAdded {
361 from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
362 60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
364 to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
367 @keyframes animation-bookmarkPulse {
368 from { transform: scale(1); }
369 50% { transform: scale(1.3); }
370 to { transform: scale(1); }
373 #bookmarked-notification-container {
382 #bookmarked-notification {
383 background-size: 16px;
384 background-position: center;
385 background-repeat: no-repeat;
391 #bookmarked-notification-dropmarker-anchor {
396 #bookmarked-notification-dropmarker-icon {
402 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
403 background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
404 animation: animation-bookmarkAdded 800ms;
405 animation-timing-function: ease, ease, ease;
408 #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
409 list-style-image: none !important;
412 #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
414 animation: animation-bookmarkPulse 300ms;
415 animation-delay: 600ms;
416 animation-timing-function: ease-out;
419 /* ::::: bookmark menus ::::: */
422 menuitem.bookmark-item {
427 .bookmark-item:not(.subviewbutton) > .menu-iconic-left {
432 .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
433 padding-inline-start: 0px;
436 /* ::::: bookmark items ::::: */
439 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
440 -moz-image-region: auto;
443 .bookmark-item[container] {
444 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
445 -moz-image-region: auto;
448 .bookmark-item[container][open] {
449 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
450 -moz-image-region: auto;
453 .bookmark-item[container][livemark] {
454 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-folder.png");
455 -moz-image-region: auto;
458 .bookmark-item[container][livemark] .bookmark-item {
459 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-item.png");
460 -moz-image-region: rect(0px, 16px, 16px, 0px);
463 .bookmark-item[container][livemark] .bookmark-item[visited] {
464 -moz-image-region: rect(0px, 32px, 16px, 16px);
467 .bookmark-item[container][query] {
468 list-style-image: url("chrome://communicator/skin/bookmarks/query.png");
469 -moz-image-region: auto;
472 .bookmark-item[query][tagContainer] {
473 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
474 -moz-image-region: auto;
477 .bookmark-item[query][dayContainer] {
478 list-style-image: url("chrome://communicator/skin/history/calendar.png");
479 -moz-image-region: auto;
482 .bookmark-item[query][hostContainer] {
483 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
484 -moz-image-region: auto;
487 .bookmark-item[query][hostContainer][open] {
488 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
489 -moz-image-region: auto;
492 .bookmark-item[cutting] > .toolbarbutton-icon,
493 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
497 .bookmark-item[cutting] > .toolbarbutton-text,
498 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
502 /* ::::: primary toolbar buttons ::::: */
504 /* === BEGIN toolbarbuttons.inc.css === */
506 /* Whole section of this included file: */
507 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
508 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
509 #social-share-button, #open-file-button, #find-button, #developer-button,
510 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
511 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
512 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
513 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu),
514 #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
515 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
519 -moz-image-region: rect(0, 36px, 18px, 18px);
522 #back-button:hover:not([disabled="true"]) {
523 -moz-image-region: rect(18px, 36px, 36px, 18px);
526 #back-button[disabled="true"] {
527 -moz-image-region: rect(36px, 36px, 54px, 18px);
531 -moz-image-region: rect(0, 72px, 18px, 54px);
534 #forward-button:hover:not([disabled="true"]) {
535 -moz-image-region: rect(18px, 72px, 36px, 54px);
538 #forward-button[disabled="true"] {
539 -moz-image-region: rect(36px, 72px, 54px, 54px);
542 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
543 #forward-button:-moz-locale-dir(rtl) {
544 transform: scaleX(-1);
547 #home-button[cui-areatype="toolbar"] {
548 -moz-image-region: rect(0, 126px, 18px, 108px);
551 #home-button[cui-areatype="toolbar"]:hover {
552 -moz-image-region: rect(18px, 126px, 36px, 108px);
555 #bookmarks-menu-button[cui-areatype="toolbar"] {
556 -moz-image-region: rect(0, 144px, 18px, 126px);
559 #bookmarks-menu-button[cui-areatype="toolbar"]:hover,
560 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
561 -moz-image-region: rect(18px, 144px, 36px, 126px);
564 /* When "new tab" page shows up, the menubutton-button (star button) is disabled */
565 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
566 -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
567 background-color: transparent !important;
570 #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
571 -moz-image-region: rect(0, 162px, 18px, 144px);
574 #bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
575 #bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
576 #bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
577 /* When starred and clicked (for edit/delete dialog),
578 * then only the menubutton-button itself is open, but not the whole menubutton. */
579 -moz-image-region: rect(18px, 162px, 36px, 144px);
582 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
583 -moz-image-region: rect(0, 630px, 18px, 612px);
586 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
588 -moz-box-align: center;
591 #bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
592 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
593 -moz-image-region: rect(18px, 630px, 36px, 612px);
596 #bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
597 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
600 padding-inline-start: 2px;
601 padding-inline-end: 0px;
604 #history-panelmenu[cui-areatype="toolbar"] {
605 -moz-image-region: rect(0, 180px, 18px, 162px);
608 #history-panelmenu[cui-areatype="toolbar"]:hover,
609 #history-panelmenu[cui-areatype="toolbar"][open="true"] {
610 -moz-image-region: rect(18px, 180px, 36px, 162px);
613 #downloads-button[cui-areatype="toolbar"] {
614 -moz-image-region: rect(0, 198px, 18px, 180px);
617 #downloads-button[cui-areatype="toolbar"]:hover,
618 #downloads-button[cui-areatype="toolbar"][open="true"] {
619 -moz-image-region: rect(18px, 198px, 36px, 180px);
622 #add-ons-button[cui-areatype="toolbar"] {
623 -moz-image-region: rect(0, 216px, 18px, 198px);
626 #add-ons-button[cui-areatype="toolbar"]:hover {
627 -moz-image-region: rect(18px, 216px, 36px, 198px);
630 #open-file-button[cui-areatype="toolbar"] {
631 -moz-image-region: rect(0, 234px, 18px, 216px);
634 #open-file-button[cui-areatype="toolbar"]:hover {
635 -moz-image-region: rect(18px, 234px, 36px, 216px);
638 #save-page-button[cui-areatype="toolbar"] {
639 -moz-image-region: rect(0, 252px, 18px, 234px);
642 #save-page-button[cui-areatype="toolbar"]:hover {
643 -moz-image-region: rect(18px, 252px, 36px, 234px);
646 #sync-button[cui-areatype="toolbar"] {
647 -moz-image-region: rect(0, 792px, 18px, 774px);
650 #sync-button[cui-areatype="toolbar"]:hover {
651 -moz-image-region: rect(18px, 792px, 36px, 774px);
654 #containers-panelmenu[cui-areatype="toolbar"] {
655 -moz-image-region: rect(0, 810px, 18px, 792px);
658 #containers-panelmenu[cui-areatype="toolbar"]:hover {
659 -moz-image-region: rect(18px, 810px, 36px, 792px);
662 #feed-button[cui-areatype="toolbar"] {
663 -moz-image-region: rect(0, 288px, 18px, 270px);
666 #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true],
667 #feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
668 -moz-image-region: rect(18px, 288px, 36px, 270px);
671 #feed-button[cui-areatype="toolbar"][disabled="true"] {
672 -moz-image-region: rect(36px, 288px, 54px, 270px);
675 #social-share-button[cui-areatype="toolbar"] {
676 -moz-image-region: rect(0px, 306px, 18px, 288px);
679 #social-share-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
680 #social-share-button[cui-areatype="toolbar"][open="true"] {
681 -moz-image-region: rect(18px, 306px, 36px, 288px);
684 #social-share-button[cui-areatype="toolbar"][disabled="true"] {
685 -moz-image-region: rect(36px, 306px, 54px, 288px);
688 #characterencoding-button[cui-areatype="toolbar"] {
689 -moz-image-region: rect(0, 324px, 18px, 306px);
692 #characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
693 #characterencoding-button[cui-areatype="toolbar"][open="true"] {
694 -moz-image-region: rect(18px, 324px, 36px, 306px);
697 #characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
698 -moz-image-region: rect(36px, 324px, 54px, 306px);
701 #new-window-button[cui-areatype="toolbar"] {
702 -moz-image-region: rect(0, 342px, 18px, 324px);
705 #new-window-button[cui-areatype="toolbar"]:hover {
706 -moz-image-region: rect(18px, 342px, 36px, 324px);
709 #e10s-button[cui-areatype="toolbar"] {
710 -moz-image-region: rect(0, 342px, 18px, 324px);
713 #e10s-button[cui-areatype="toolbar"]:hover {
714 -moz-image-region: rect(18px, 342px, 36px, 324px);
717 #e10s-button > .toolbarbutton-icon {
718 transform: scaleY(-1);
721 #new-tab-button[cui-areatype="toolbar"] {
722 -moz-image-region: rect(0, 360px, 18px, 342px);
725 #new-tab-button[cui-areatype="toolbar"]:hover {
726 -moz-image-region: rect(18px, 360px, 36px, 342px);
729 #privatebrowsing-button[cui-areatype="toolbar"] {
730 -moz-image-region: rect(0, 378px, 18px, 360px);
733 #privatebrowsing-button[cui-areatype="toolbar"]:hover {
734 -moz-image-region: rect(18px, 378px, 36px, 360px);
737 #find-button[cui-areatype="toolbar"] {
738 -moz-image-region: rect(0, 396px, 18px, 378px);
741 #find-button[cui-areatype="toolbar"]:hover {
742 -moz-image-region: rect(18px, 396px, 36px, 378px);
745 #print-button[cui-areatype="toolbar"] {
746 -moz-image-region: rect(0, 414px, 18px, 396px);
749 #print-button[cui-areatype="toolbar"]:hover {
750 -moz-image-region: rect(18px, 414px, 36px, 396px);
753 #fullscreen-button[cui-areatype="toolbar"] {
754 -moz-image-region: rect(0, 432px, 18px, 414px);
757 #fullscreen-button[cui-areatype="toolbar"]:hover {
758 -moz-image-region: rect(18px, 432px, 36px, 414px);
761 #developer-button[cui-areatype="toolbar"] {
762 -moz-image-region: rect(0, 450px, 18px, 432px);
765 #developer-button[cui-areatype="toolbar"]:hover,
766 #developer-button[cui-areatype="toolbar"][open="true"] {
767 -moz-image-region: rect(18px, 450px, 36px, 432px);
770 #preferences-button[cui-areatype="toolbar"] {
771 -moz-image-region: rect(0, 468px, 18px, 450px);
774 #preferences-button[cui-areatype="toolbar"]:hover {
775 -moz-image-region: rect(18px, 468px, 36px, 450px);
778 #PanelUI-menu-button {
779 -moz-image-region: rect(0, 486px, 18px, 468px);
782 #PanelUI-menu-button:hover,
783 #PanelUI-menu-button[open="true"] {
784 -moz-image-region: rect(18px, 486px, 36px, 468px);
787 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button {
788 -moz-image-region: rect(0, 504px, 18px, 486px);
791 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button:hover:not([disabled="true"]) {
792 -moz-image-region: rect(18px, 504px, 36px, 486px);
795 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button[disabled="true"] {
796 -moz-image-region: rect(36px, 504px, 54px, 486px);
799 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button {
800 -moz-image-region: rect(0, 522px, 18px, 504px);
803 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button:hover:not([disabled="true"]) {
804 -moz-image-region: rect(18px, 522px, 36px, 504px);
807 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button[disabled="true"] {
808 -moz-image-region: rect(36px, 522px, 54px, 504px);
811 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button {
812 -moz-image-region: rect(0, 540px, 18px, 522px);
815 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button:hover:not([disabled="true"]) {
816 -moz-image-region: rect(18px, 540px, 36px, 522px);
819 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button[disabled="true"] {
820 -moz-image-region: rect(36px, 540px, 54px, 522px);
823 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button {
824 -moz-image-region: rect(0, 558px, 18px, 540px);
827 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button:hover:not([disabled="true"]) {
828 -moz-image-region: rect(18px, 558px, 36px, 540px);
831 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button[disabled="true"] {
832 -moz-image-region: rect(36px, 558px, 54px, 540px);
835 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button {
836 -moz-image-region: rect(0, 576px, 18px, 558px);
839 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button:hover:not([disabled="true"]) {
840 -moz-image-region: rect(18px, 576px, 36px, 558px);
843 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button[disabled="true"] {
844 -moz-image-region: rect(36px, 576px, 54px, 558px);
847 #nav-bar-overflow-button {
848 -moz-image-region: rect(0, 612px, 18px, 594px);
851 #nav-bar-overflow-button:hover,
852 #nav-bar-overflow-button[open="true"] {
853 -moz-image-region: rect(18px, 612px, 36px, 594px);
856 #nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
857 transform: scaleX(-1);
861 -moz-image-region: rect(0, 648px, 18px, 630px);
864 #tabview-button:hover {
865 -moz-image-region: rect(18px, 648px, 36px, 630px);
868 #email-link-button[cui-areatype="toolbar"] {
869 -moz-image-region: rect(0, 666px, 18px, 648px);
872 #email-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
873 -moz-image-region: rect(18px, 666px, 36px, 648px);
876 #email-button[cui-areatype="toolbar"][disabled="true"] {
877 -moz-image-region: rect(36px, 666px, 54px, 648px);
880 #sidebar-button[cui-areatype="toolbar"] {
881 -moz-image-region: rect(0, 684px, 18px, 666px);
884 #sidebar-button[cui-areatype="toolbar"]:hover {
885 -moz-image-region: rect(18px, 684px, 36px, 666px);
888 #panic-button[cui-areatype="toolbar"] {
889 -moz-image-region: rect(0, 702px, 18px, 684px);
892 #panic-button[cui-areatype="toolbar"]:hover,
893 #panic-button[cui-areatype="toolbar"][open] {
894 -moz-image-region: rect(18px, 702px, 36px, 684px);
897 #panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
898 transform: scaleX(-1);
901 #webide-button[cui-areatype="toolbar"] {
902 -moz-image-region: rect(0, 738px, 18px, 720px);
905 #webide-button[cui-areatype="toolbar"]:hover {
906 -moz-image-region: rect(18px, 738px, 36px, 720px);
909 /* === END toolbarbuttons.inc.css === */
911 /* === BEGIN menupanel.inc.css === */
913 /* Menu panel and palette styles */
916 /* avoid aero overrides with changed filenames */
917 --menupanel-list-style-image: url(chrome://browser/skin/menuPanelFx.png);
918 --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanelFx-small.png);
921 toolbaritem[sdkstylewidget="true"] > toolbarbutton,
922 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
923 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
924 #social-share-button, #open-file-button, #find-button, #developer-button,
925 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
926 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
927 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
928 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"],
929 toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
930 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
931 #social-share-button, #open-file-button, #find-button, #developer-button,
932 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
933 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
934 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
935 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) {
936 list-style-image: var(--menupanel-list-style-image);
939 #home-button[cui-areatype="menu-panel"],
940 toolbarpaletteitem[place="palette"] > #home-button {
941 -moz-image-region: rect(0px, 128px, 32px, 96px);
944 #home-button[cui-areatype="menu-panel"]:hover,
945 toolbarpaletteitem[place="palette"] > #home-button:hover {
946 -moz-image-region: rect(32px, 128px, 64px, 96px);
949 #bookmarks-menu-button[cui-areatype="menu-panel"],
950 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
951 -moz-image-region: rect(0px, 192px, 32px, 160px);
954 #bookmarks-menu-button[cui-areatype="menu-panel"]:hover,
955 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button:hover {
956 -moz-image-region: rect(32px, 192px, 64px, 160px);
959 #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
960 -moz-image-region: rect(32px, 192px, 64px, 160px);
963 #history-panelmenu[cui-areatype="menu-panel"],
964 toolbarpaletteitem[place="palette"] > #history-panelmenu {
965 -moz-image-region: rect(0px, 224px, 32px, 192px);
968 #history-panelmenu[cui-areatype="menu-panel"]:hover,
969 toolbarpaletteitem[place="palette"] > #history-panelmenu:hover {
970 -moz-image-region: rect(32px, 224px, 64px, 192px);
973 #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
974 -moz-image-region: rect(32px, 224px, 64px, 192px);
977 #downloads-button[cui-areatype="menu-panel"],
978 toolbarpaletteitem[place="palette"] > #downloads-button {
979 -moz-image-region: rect(0px, 256px, 32px, 224px);
982 #downloads-button[cui-areatype="menu-panel"]:hover,
983 toolbarpaletteitem[place="palette"] > #downloads-button:hover {
984 -moz-image-region: rect(32px, 256px, 64px, 224px);
987 #add-ons-button[cui-areatype="menu-panel"],
988 toolbarpaletteitem[place="palette"] > #add-ons-button {
989 -moz-image-region: rect(0px, 288px, 32px, 256px);
992 #add-ons-button[cui-areatype="menu-panel"]:hover,
993 toolbarpaletteitem[place="palette"] > #add-ons-button:hover {
994 -moz-image-region: rect(32px, 288px, 64px, 256px);
997 #open-file-button[cui-areatype="menu-panel"],
998 toolbarpaletteitem[place="palette"] > #open-file-button {
999 -moz-image-region: rect(0px, 320px, 32px, 288px);
1002 #open-file-button[cui-areatype="menu-panel"]:hover,
1003 toolbarpaletteitem[place="palette"] > #open-file-button:hover {
1004 -moz-image-region: rect(32px, 320px, 64px, 288px);
1007 #save-page-button[cui-areatype="menu-panel"],
1008 toolbarpaletteitem[place="palette"] > #save-page-button {
1009 -moz-image-region: rect(0px, 352px, 32px, 320px);
1012 #save-page-button[cui-areatype="menu-panel"]:hover,
1013 toolbarpaletteitem[place="palette"] > #save-page-button:hover {
1014 -moz-image-region: rect(32px, 352px, 64px, 320px);
1017 #sync-button[cui-areatype="menu-panel"],
1018 toolbarpaletteitem[place="palette"] > #sync-button {
1019 -moz-image-region: rect(0px, 1024px, 32px, 992px);
1022 #sync-button[cui-areatype="menu-panel"]:hover,
1023 toolbarpaletteitem[place="palette"] > #sync-button:hover {
1024 -moz-image-region: rect(32px, 1024px, 64px, 992px);
1027 #containers-panelmenu[cui-areatype="menu-panel"],
1028 toolbarpaletteitem[place="palette"] > #containers-panelmenu {
1029 -moz-image-region: rect(0px, 1056px, 32px, 1024px);
1032 #containers-panelmenu[cui-areatype="menu-panel"]:hover,
1033 toolbarpaletteitem[place="palette"] > #containers-panelmenu:hover,
1034 #containers-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1035 -moz-image-region: rect(32px, 1056px, 64px, 1024px);
1038 #feed-button[cui-areatype="menu-panel"],
1039 toolbarpaletteitem[place="palette"] > #feed-button {
1040 -moz-image-region: rect(0px, 416px, 32px, 384px);
1043 #feed-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1044 toolbarpaletteitem[place="palette"] > #feed-button:hover:not([disabled="true"]) {
1045 -moz-image-region: rect(32px, 416px, 64px, 384px);
1048 #feed-button[cui-areatype="menu-panel"][disabled="true"],
1049 toolbarpaletteitem[place="palette"] > #feed-button[disabled="true"] {
1050 -moz-image-region: rect(64px, 416px, 96px, 384px);
1053 #social-share-button[cui-areatype="menu-panel"],
1054 toolbarpaletteitem[place="palette"] > #social-share-button {
1055 -moz-image-region: rect(0px, 448px, 32px, 416px);
1058 #social-share-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1059 toolbarpaletteitem[place="palette"] > #social-share-button:hover:not([disabled="true"]) {
1060 -moz-image-region: rect(32px, 448px, 64px, 416px);
1063 #social-share-button[cui-areatype="menu-panel"][disabled="true"],
1064 toolbarpaletteitem[place="palette"] > #social-share-button[disabled="true"] {
1065 -moz-image-region: rect(64px, 448px, 96px, 416px);
1068 #characterencoding-button[cui-areatype="menu-panel"],
1069 toolbarpaletteitem[place="palette"] > #characterencoding-button {
1070 -moz-image-region: rect(0px, 480px, 32px, 448px);
1073 #characterencoding-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1074 toolbarpaletteitem[place="palette"] > #characterencoding-button:hover:not([disabled="true"]) {
1075 -moz-image-region: rect(32px, 480px, 64px, 448px);
1078 #characterencoding-button[cui-areatype="menu-panel"][disabled="true"],
1079 toolbarpaletteitem[place="palette"] > #characterencoding-button[disabled="true"] {
1080 -moz-image-region: rect(64px, 480px, 96px, 448px);
1083 #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1084 -moz-image-region: rect(32px, 480px, 64px, 448px);
1087 #new-window-button[cui-areatype="menu-panel"],
1088 toolbarpaletteitem[place="palette"] > #new-window-button {
1089 -moz-image-region: rect(0px, 512px, 32px, 480px);
1092 #new-window-button[cui-areatype="menu-panel"]:hover,
1093 toolbarpaletteitem[place="palette"] > #new-window-button:hover {
1094 -moz-image-region: rect(32px, 512px, 64px, 480px);
1097 #e10s-button[cui-areatype="menu-panel"],
1098 toolbarpaletteitem[place="palette"] > #e10s-button {
1099 -moz-image-region: rect(0px, 512px, 32px, 480px);
1102 #e10s-button[cui-areatype="menu-panel"]:hover,
1103 toolbarpaletteitem[place="palette"] > #e10s-button:hover {
1104 -moz-image-region: rect(32px, 512px, 64px, 480px);
1107 #new-tab-button[cui-areatype="menu-panel"],
1108 toolbarpaletteitem[place="palette"] > #new-tab-button {
1109 -moz-image-region: rect(0px, 544px, 32px, 512px);
1112 #new-tab-button[cui-areatype="menu-panel"]:hover,
1113 toolbarpaletteitem[place="palette"] > #new-tab-button:hover {
1114 -moz-image-region: rect(32px, 544px, 64px, 512px);
1117 #privatebrowsing-button[cui-areatype="menu-panel"],
1118 toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
1119 -moz-image-region: rect(0px, 576px, 32px, 544px);
1122 #privatebrowsing-button[cui-areatype="menu-panel"]:hover,
1123 toolbarpaletteitem[place="palette"] > #privatebrowsing-button:hover {
1124 -moz-image-region: rect(32px, 576px, 64px, 544px);
1127 #tabview-button[cui-areatype="menu-panel"],
1128 toolbarpaletteitem[place="palette"] > #tabview-button {
1129 -moz-image-region: rect(0px, 608px, 32px, 576px);
1132 #tabview-button[cui-areatype="menu-panel"]:hover,
1133 toolbarpaletteitem[place="palette"] > #tabview-button:hover {
1134 -moz-image-region: rect(32px, 608px, 64px, 576px);
1137 #find-button[cui-areatype="menu-panel"],
1138 toolbarpaletteitem[place="palette"] > #find-button {
1139 -moz-image-region: rect(0px, 640px, 32px, 608px);
1142 #find-button[cui-areatype="menu-panel"]:hover,
1143 toolbarpaletteitem[place="palette"] > #find-button:hover {
1144 -moz-image-region: rect(32px, 640px, 64px, 608px);
1147 #print-button[cui-areatype="menu-panel"],
1148 toolbarpaletteitem[place="palette"] > #print-button {
1149 -moz-image-region: rect(0px, 672px, 32px, 640px);
1152 #print-button[cui-areatype="menu-panel"]:hover,
1153 toolbarpaletteitem[place="palette"] > #print-button:hover {
1154 -moz-image-region: rect(32px, 672px, 64px, 640px);
1157 #fullscreen-button[cui-areatype="menu-panel"],
1158 toolbarpaletteitem[place="palette"] > #fullscreen-button {
1159 -moz-image-region: rect(0px, 704px, 32px, 672px);
1162 #fullscreen-button[cui-areatype="menu-panel"]:hover,
1163 toolbarpaletteitem[place="palette"] > #fullscreen-button:hover {
1164 -moz-image-region: rect(32px, 704px, 64px, 672px);
1167 #developer-button[cui-areatype="menu-panel"],
1168 toolbarpaletteitem[place="palette"] > #developer-button {
1169 -moz-image-region: rect(0px, 736px, 32px, 704px);
1172 #developer-button[cui-areatype="menu-panel"]:hover,
1173 toolbarpaletteitem[place="palette"] > #developer-button:hover {
1174 -moz-image-region: rect(32px, 736px, 64px, 704px);
1177 #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1178 -moz-image-region: rect(32px, 736px, 64px, 704px);
1181 #preferences-button[cui-areatype="menu-panel"],
1182 toolbarpaletteitem[place="palette"] > #preferences-button {
1183 -moz-image-region: rect(0px, 768px, 32px, 736px);
1186 #preferences-button[cui-areatype="menu-panel"]:hover,
1187 toolbarpaletteitem[place="palette"] > #preferences-button:hover {
1188 -moz-image-region: rect(32px, 768px, 64px, 736px);
1191 #email-link-button[cui-areatype="menu-panel"],
1192 toolbarpaletteitem[place="palette"] > #email-link-button {
1193 -moz-image-region: rect(0, 800px, 32px, 768px);
1196 #email-link-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1197 toolbarpaletteitem[place="palette"] > #email-link-button:hover:not([disabled="true"]) {
1198 -moz-image-region: rect(32px, 800px, 64px, 768px);
1201 #email-link-button[cui-areatype="menu-panel"][disabled="true"],
1202 toolbarpaletteitem[place="palette"] > #email-link-button[disabled="true"] {
1203 -moz-image-region: rect(64px, 800px, 96px, 768px);
1206 #sidebar-button[cui-areatype="menu-panel"],
1207 toolbarpaletteitem[place="palette"] > #sidebar-button {
1208 -moz-image-region: rect(0, 864px, 32px, 832px);
1211 #sidebar-button[cui-areatype="menu-panel"]:hover,
1212 toolbarpaletteitem[place="palette"] > #sidebar-button:hover,
1213 #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1214 -moz-image-region: rect(32px, 864px, 64px, 832px);
1217 #panic-button[cui-areatype="menu-panel"],
1218 toolbarpaletteitem[place="palette"] > #panic-button {
1219 -moz-image-region: rect(0, 896px, 32px, 864px);
1222 #panic-button[cui-areatype="menu-panel"]:hover,
1223 toolbarpaletteitem[place="palette"] > #panic-button:hover,
1224 #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1225 -moz-image-region: rect(32px, 896px, 64px, 864px);
1228 #webide-button[cui-areatype="menu-panel"],
1229 toolbarpaletteitem[place="palette"] > #webide-button {
1230 -moz-image-region: rect(0px, 960px, 32px, 928px);
1233 #webide-button[cui-areatype="menu-panel"]:hover,
1234 toolbarpaletteitem[place="palette"] > #webide-button:hover {
1235 -moz-image-region: rect(32px, 960px, 64px, 928px);
1238 toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1239 -moz-image-region: rect(0, 832px, 32px, 800px);
1242 /* Wide panel control icons */
1244 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1245 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1246 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1247 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1248 list-style-image: var(--menupanel-small-list-style-image);
1251 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
1252 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1253 -moz-image-region: rect(0px, 32px, 16px, 16px);
1256 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:hover:not([disabled="true"]),
1257 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button:hover:not([disabled="true"]) {
1258 -moz-image-region: rect(16px, 32px, 32px, 16px);
1261 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button[disabled="true"],
1262 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button[disabled="true"] {
1263 -moz-image-region: rect(32px, 32px, 48px, 16px);
1266 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1267 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1268 -moz-image-region: rect(0px, 48px, 16px, 32px);
1271 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button:hover:not([disabled="true"]),
1272 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button:hover:not([disabled="true"]) {
1273 -moz-image-region: rect(16px, 48px, 32px, 32px);
1276 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button[disabled="true"],
1277 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button[disabled="true"] {
1278 -moz-image-region: rect(32px, 48px, 48px, 32px);
1281 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
1282 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1283 -moz-image-region: rect(0px, 64px, 16px, 48px);
1286 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:hover:not([disabled="true"]),
1287 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button:hover:not([disabled="true"]) {
1288 -moz-image-region: rect(16px, 64px, 32px, 48px);
1291 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button[disabled="true"],
1292 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button[disabled="true"] {
1293 -moz-image-region: rect(32px, 64px, 48px, 48px);
1296 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
1297 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1298 -moz-image-region: rect(0px, 80px, 16px, 64px);
1301 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:hover:not([disabled="true"]),
1302 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button:hover:not([disabled="true"]) {
1303 -moz-image-region: rect(16px, 80px, 32px, 64px);
1306 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button[disabled="true"],
1307 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button[disabled="true"] {
1308 -moz-image-region: rect(32px, 80px, 48px, 64px);
1311 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
1312 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1313 -moz-image-region: rect(0px, 96px, 16px, 80px);
1316 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:hover:not([disabled="true"]),
1317 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button:hover:not([disabled="true"]) {
1318 -moz-image-region: rect(16px, 96px, 32px, 80px);
1321 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button[disabled="true"],
1322 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button[disabled="true"] {
1323 -moz-image-region: rect(32px, 96px, 48px, 80px);
1326 #add-share-provider {
1327 list-style-image: var(--menupanel-small-list-style-image);
1328 -moz-image-region: rect(0px, 96px, 16px, 80px);
1331 /* === END menupanel.inc.css === */
1333 .toolbarbutton-1:not([type="menu-button"]) {
1334 -moz-box-orient: vertical;
1338 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1344 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1345 .toolbarbutton-1[disabled="true"]:hover:active,
1346 .toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1350 .toolbarbutton-1:hover:active,
1351 .toolbarbutton-1[open="true"],
1352 .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1354 padding-bottom: 0px;
1355 padding-inline-start: 3px;
1356 padding-inline-end: 1px;
1359 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1360 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1361 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1362 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1363 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
1366 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1367 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1370 toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1371 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
1374 .toolbarbutton-1 > .toolbarbutton-icon,
1375 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1379 #nav-bar .toolbarbutton-1,
1380 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1383 #nav-bar .toolbarbutton-1:not([type=menu-button]),
1384 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1385 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1388 #nav-bar #PanelUI-menu-button {
1389 /* padding-inline-start: 7px;
1390 padding-inline-end: 5px;*/
1393 #nav-bar .toolbarbutton-1[type=panel],
1394 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
1395 /* padding-left: 5px;
1396 padding-right: 5px;*/
1399 #nav-bar .toolbarbutton-1 > menupopup {
1400 /* margin-top: -3px;*/
1403 #nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
1407 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1408 /* padding-inline-end: 0;*/
1411 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1412 /* padding-inline-start: 0;
1413 -moz-box-align: center;*/
1416 .findbar-button > .toolbarbutton-text,
1417 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1418 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1419 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
1420 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1421 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1422 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1423 /* padding: 2px 6px;
1425 border-color: transparent;
1426 transition-property: background-color, border-color;
1427 transition-duration: 150ms;*/
1430 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon,
1431 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-stack,
1432 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1437 /* Help SDK icons fit: */
1438 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
1439 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
1443 #nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1444 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1448 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1449 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
1450 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon,
1451 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
1452 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1453 /* padding-inline-end: 17px;*/
1456 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1457 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon {
1458 /* horizontal padding + border + icon width */
1459 /* max-width: 43px;*/
1462 #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1465 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1468 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1471 #nav-bar .toolbaritem-combined-buttons {
1472 /* margin-left: 2px;
1473 margin-right: 2px;*/
1476 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1481 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1482 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled=true]) + .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled=true])::before {
1488 margin-inline-end: -1px;
1492 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1495 .findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
1496 #nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1497 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1498 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1499 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1500 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
1501 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
1502 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
1503 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
1506 .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
1507 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
1508 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1509 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1510 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
1511 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
1514 #TabsToolbar .toolbarbutton-1,
1515 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1516 .tabbrowser-arrowscrollbox > .scrollbutton-up,
1517 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1520 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1521 #TabsToolbar .toolbarbutton-1[open],
1522 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1523 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1524 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
1527 /* unified back/forward button */
1530 -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
1533 #forward-button > menupopup {
1534 margin-top: 1px !important;
1537 #forward-button > .toolbarbutton-icon {
1538 background-clip: padding-box !important;
1539 /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
1540 /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
1544 margin-inline-start: -4px !important;
1549 border-radius: 0 10000px 10000px 0;
1550 /* max-width: calc(var(--forwardbutton-width) + var(--backbutton-urlbar-overlap)) !important; */
1553 #forward-button:-moz-locale-dir(rtl) {
1554 border-radius: 10000px 0 0 10000px;
1557 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
1558 transition: margin-left 150ms ease-out;
1561 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
1562 margin-left: calc(0px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
1565 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] {
1566 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1567 transition-delay: 100s;
1570 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] {
1571 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1572 margin-left: calc(-0.01px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
1576 /* padding-top: 3px !important;
1577 padding-bottom: 3px !important;
1578 padding-inline-start: 5px !important;
1579 padding-inline-end: 0 !important;*/
1582 border-radius: 10000px;
1586 margin-bottom: -2px;
1589 #back-button:-moz-locale-dir(rtl) {
1592 #back-button > menupopup {
1593 margin-top: -1px !important;
1596 #back-button > .toolbarbutton-icon {
1597 border-radius: 10000px !important;
1598 background-clip: padding-box !important;
1599 /* background-color: hsla(210,25%,98%,.08) !important;
1600 padding: 6px !important;
1601 border-style: none !important;
1602 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1603 0 0 0 1px hsla(210,4%,10%,.25);*/
1604 transition-property: background-color, box-shadow !important;
1605 transition-duration: 250ms !important;
1608 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1609 /* background-color: hsla(210,4%,10%,.08) !important;*/
1612 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1613 #back-button[open="true"] > .toolbarbutton-icon {
1614 /* background-color: hsla(210,4%,10%,.12) !important;
1615 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1616 0 0 0 1px hsla(210,4%,10%,.25),
1617 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
1620 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1621 transform: scaleX(-1);
1624 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1625 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1626 list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1629 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1630 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1631 list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1634 #home-button.bookmark-item {
1635 list-style-image: url("chrome://browser/skin/Toolbar.png");
1638 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1639 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1640 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1641 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1642 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1643 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1644 #home-button.bookmark-item:-moz-lwtheme-brighttext {
1647 list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
1650 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1651 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1652 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
1656 #downloads-button > .toolbarbutton-icon {
1660 /* tabview menu item */
1663 list-style-image: url("chrome://browser/skin/tabview/tabviewFx.png");
1664 -moz-image-region: rect(1px, 89px, 17px, 73px);
1667 #menu_tabview[groups="0"] {
1668 -moz-image-region: rect(1px, 17px, 17px, 1px);
1671 #menu_tabview[groups="1"] {
1672 -moz-image-region: rect(1px, 35px, 17px, 19px);
1675 #menu_tabview[groups="2"] {
1676 -moz-image-region: rect(1px, 53px, 17px, 37px);
1679 #menu_tabview[groups="3"] {
1680 -moz-image-region: rect(1px, 71px, 17px, 55px);
1683 /* undo close tab menu item */
1684 #alltabs_undoCloseTab {
1685 list-style-image: url(chrome://browser/skin/undoCloseTab.png);
1688 @media (min-resolution: 1.1dppx) {
1689 #alltabs_undoCloseTab {
1690 list-style-image: url(chrome://browser/skin/undoCloseTab@2x.png);
1692 #alltabs_undoCloseTab > .toolbarbutton-icon {
1697 /* zoom control text (reset) button special case: */
1699 #nav-bar #zoom-reset-button > .toolbarbutton-text {
1700 /* To make this line up with the icons, it needs the same height (18px) +
1701 * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
1702 * increase in text sizes would break things...
1707 /* ::::: fullscreen window controls ::::: */
1710 margin-inline-start: 4px;
1716 /* list-style-image: url("chrome://global/skin/icons/windowControls.png");
1721 list-style-image: url("chrome://navigator/skin/icons/win-minimize.gif");
1724 #minimize-button:hover {
1725 list-style-image: url("chrome://navigator/skin/icons/win-minimize-hover.gif");
1729 list-style-image: url("chrome://navigator/skin/icons/win-restore.gif");
1732 #restore-button:hover {
1733 list-style-image: url("chrome://navigator/skin/icons/win-restore-hover.gif");
1737 list-style-image: url("chrome://navigator/skin/icons/win-close.gif");
1740 #close-button:hover {
1741 list-style-image: url("chrome://navigator/skin/icons/win-close-hover.gif");
1744 /* ::::: Location Bar ::::: */
1747 .searchbar-textbox {
1750 margin-inline-start: 3px;
1754 /* make color as light as possible to deal with dark non-domain parts */
1758 #urlbar:-moz-lwtheme,
1759 .searchbar-textbox:-moz-lwtheme {
1760 /* background-color: rgba(255,255,255,.8);
1761 @navbarTextboxCustomBorder@
1765 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1766 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1767 /* background-color: rgba(255,255,255,.9);*/
1770 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1771 .searchbar-textbox:-moz-lwtheme[focused] {
1772 /* background-color: white;*/
1775 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
1776 /* border-inline-start: none;
1780 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1781 /* border-top-left-radius: 0;
1782 border-bottom-left-radius: 0; */
1785 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1786 /* border-top-right-radius: 0;
1787 border-bottom-right-radius: 0; */
1790 window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
1791 /* clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
1792 /* margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */
1795 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1796 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1797 /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
1798 transform: scaleX(-1);
1801 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
1802 -moz-box-direction: reverse;
1805 html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
1806 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
1811 -moz-box-orient: horizontal;
1812 -moz-box-align: stretch;
1815 .urlbar-textbox-container {
1816 -moz-box-align: stretch;
1820 margin-inline-start: 0;
1824 -moz-box-align: center;
1829 /* 16x16 icon with border-box sizing */
1834 .search-go-container {
1838 .search-go-container > .search-go-button {
1842 #urlbar-search-footer {
1843 border-top: 1px solid #A09090;
1846 #urlbar-search-settings {
1849 #urlbar-search-settings:hover {
1852 #urlbar-search-settings:hover:active {
1855 #urlbar-search-splitter {
1857 margin-inline-start: -3px;
1859 background: transparent;
1862 #urlbar-search-splitter + #urlbar-container > #urlbar,
1863 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1864 margin-inline-start: 0;
1867 #urlbar-display-box {
1871 border-inline-end: 1px solid #9C9CFF;
1872 margin-inline-end: 3px;
1875 margin-inline-start: 0;
1879 /* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
1881 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1882 border-bottom: 1px solid #A09090;
1883 background-color: #000000;
1885 padding-inline-start: 44px;
1886 padding-inline-end: 6px;
1887 background-image: url("chrome://browser/skin/info.svg");
1888 background-clip: padding-box;
1889 background-position: 20px center;
1890 background-repeat: no-repeat;
1891 background-size: 16px 16px;
1894 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
1895 background-position: right 20px center;
1898 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
1903 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
1904 margin-inline-start: 0;
1907 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
1908 -moz-appearance: none;
1913 margin-inline-start: 10px;
1916 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
1919 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
1922 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
1925 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
1928 /* === END urlbarSearchSuggestionsNotification.inc.css === */
1931 min-width: calc(54px + 11ch);
1936 #identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
1937 background-color: var(--identity-box-verified-background-color);
1940 #identity-box:-moz-focusring {
1941 outline: 1px dotted #008484;
1942 outline-offset: -1px;
1945 #identity-box.verifiedDomain:-moz-focusring,
1946 #identity-box.verifiedIdentity:-moz-focusring {
1947 outline-color: #000000;
1950 /* Location bar dropmarker */
1952 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
1953 background-color: transparent;
1956 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
1957 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
1958 #urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1961 transition: opacity 0.15s ease;
1964 #urlbar-wrapper[switchingtabs] > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1968 #navigator-toolbox:not(:hover) #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker {
1972 .urlbar-history-dropmarker:hover {
1975 .urlbar-history-dropmarker:hover:active,
1976 .urlbar-history-dropmarker[open="true"] {
1979 /* page proxy icon */
1981 /* === BEGIN identity-block.inc.css === */
1984 /* --identity-box-hover-background-color: #FFCF00;
1985 --identity-box-selected-background-color: #FF9F00; */
1986 --identity-box-verified-color: #008484;
1987 /* Default theme does different color per channel, we can't as they do it build-time. */
1988 --identity-box-chrome-color: #9C9CFF;
1990 border-inline-end: 1px solid var(--urlbar-separator-color);
1994 margin-inline-end: 4px;
1996 /* The latter two properties have a transition to handle the delayed hiding of
1997 the forward button when hovered. */
1998 transition: background-color 150ms ease, padding-left, padding-right;
2001 #identity-box:-moz-locale-dir(ltr) {
2002 border-top-right-radius: 0;
2003 border-bottom-right-radius: 0;
2006 #identity-box:-moz-locale-dir(rtl) {
2007 border-top-left-radius: 0;
2008 border-bottom-left-radius: 0;
2011 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
2012 color: var(--identity-box-chrome-color);
2013 border-inline-end: 1px solid var(--identity-box-chrome-color);
2016 #identity-box:hover > :not(#identity-icon),
2017 #identity-box[open=true] > :not(#identity-icon) {
2018 /* filter: grayscale(100%);*/
2021 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
2022 color: var(--identity-box-verified-color);
2023 border-inline-end: 1px solid var(--identity-box-verified-color);
2026 #identity-icon-labels:-moz-locale-dir(ltr) {
2030 #identity-icon-labels:-moz-locale-dir(rtl) {
2034 #notification-popup-box:not([hidden]) + #identity-box {
2035 padding-inline-start: 10px;
2039 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
2040 /* border-radius: 0;
2041 padding-inline-start: 2px; */
2042 padding-inline-end: 2px;
2043 margin-inline-end: 1px;
2046 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar >
2047 #notification-popup-box[hidden] + #identity-box {
2048 padding-inline-start: 2px;
2051 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar >
2052 #notification-popup-box[hidden] + #identity-box {
2053 /* Forward button hiding is delayed when hovered, so we should use the same
2054 delay for the identity box. We handle both horizontal paddings (for LTR and
2055 RTL), the latter two delays here are for padding-left and padding-right. */
2056 transition-delay: 0s, 100s, 100s;
2059 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar >
2060 #notification-popup-box[hidden] + #identity-box {
2061 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2062 padding-inline-start: 2.01px;
2065 /* MAIN IDENTITY ICON */
2070 list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
2073 #identity-box:hover > #identity-icon,
2074 #identity-box[open=true] > #identity-icon {
2075 list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
2078 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
2079 list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
2082 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2086 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2087 -moz-image-region: inherit;
2088 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2094 /* TRACKING PROTECTION ICON */
2096 #tracking-protection-icon {
2099 margin-inline-start: 2px;
2100 margin-inline-end: 0;
2101 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg);
2105 #tracking-protection-icon[state="loaded-tracking-content"] {
2106 list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg);
2109 #tracking-protection-icon[animate] {
2110 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2113 #tracking-protection-icon:not([state]) {
2114 margin-inline-end: -18px;
2115 pointer-events: none;
2117 /* Only animate the shield in, when it disappears hide it immediately. */
2121 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2122 visibility: collapse;
2125 /* CONNECTION ICON */
2130 margin-inline-start: 2px;
2131 visibility: collapse;
2134 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
2135 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon {
2136 list-style-image: url(chrome://browser/skin/identity-secure.svg);
2137 visibility: visible;
2140 #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2141 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2142 list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg);
2143 visibility: visible;
2146 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
2147 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
2148 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon {
2149 list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2150 visibility: visible;
2153 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
2154 list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg);
2155 visibility: visible;
2158 #urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
2159 list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2160 visibility: visible;
2163 /* === END identity-block.inc.css === */
2165 #page-proxy-favicon {
2166 -moz-image-region: rect(0, 16px, 16px, 0);
2169 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2170 /* margin-inline-end: 1px;*/
2173 #identity-box:hover > #page-proxy-favicon {
2174 -moz-image-region: rect(0, 32px, 16px, 16px);
2177 #identity-box:hover:active > #page-proxy-favicon,
2178 #identity-box[open=true] > #page-proxy-favicon {
2179 -moz-image-region: rect(0, 48px, 16px, 32px);
2182 #identity-box:hover {
2183 background-color: #FFCF00;
2187 #identity-box:hover:active,
2188 #identity-box[open=true] {
2189 background-color: #FF9F00;
2193 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2194 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2195 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2196 background-color: #9C9CFF;
2200 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2201 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2202 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2203 background-color: #008484;
2209 #treecolAutoCompleteImage {
2214 .autocomplete-richlistbox {
2218 .autocomplete-richlistitem {
2223 border: 1px solid transparent;
2226 .autocomplete-richlistitem[selected=true] {
2227 background-color: hsl(210, 80%, 52%);
2232 /* color: hsl(0, 0%, 0%);*/
2240 background-color: hsl(216, 0%, 88%);
2241 color: hsl(0, 0%, 0%);
2243 border: 1px solid transparent;
2255 /* color: hsl(0, 0%, 50%);*/
2266 .ac-title[selected=true],
2267 .ac-separator[selected],
2268 .ac-url[selected=true],
2269 .ac-action[selected=true] {
2273 .ac-tags-text[selected] > html|span.ac-tag {
2274 background-color: #A09090;
2278 html|span.ac-emphasize-text-title,
2279 html|span.ac-emphasize-text-tag,
2280 html|span.ac-emphasize-text-url {
2284 .ac-type-icon[type=bookmark] {
2285 list-style-image: url("chrome://browser/skin/urlbar-star.svg#star");
2288 .ac-type-icon[type=bookmark][selected][current] {
2289 /* list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");*/
2292 .ac-result-type-bookmark,
2293 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
2294 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2295 -moz-image-region: rect(0px 16px 16px 0px);
2300 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
2301 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
2302 /* -moz-image-region: rect(0px 48px 16px 32px);*/
2305 .ac-type-icon[type=keyword],
2306 .ac-site-icon[type=searchengine],
2307 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) {
2308 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2311 .ac-type-icon[type=keyword][selected],
2312 .ac-site-icon[type=searchengine][selected],
2313 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected) {
2314 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2317 .ac-result-type-tag,
2318 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
2319 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2324 .ac-type-icon[type=switchtab],
2325 .ac-type-icon[type=remotetab] {
2326 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab");
2329 .ac-type-icon[type=switchtab][selected],
2330 .ac-type-icon[type=remotetab][selected] {
2331 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted");
2334 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2335 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2341 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2342 border-top: 1px solid #9C9CFF;
2345 /* combined go/reload/stop button in location bar */
2348 #urlbar-reload-button,
2349 #urlbar-stop-button {
2351 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2352 /* padding: 0 9px;*/
2353 margin-inline-start: 0px;
2354 border-inline-start: 1px solid var(--urlbar-separator-color);
2355 border-image: linear-gradient(transparent 15%,
2356 var(--urlbar-separator-color) 15%,
2357 var(--urlbar-separator-color) 85%,
2359 border-image-slice: 1;
2362 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2363 border-top-left-radius: 0px;
2364 border-bottom-left-radius: 0px;
2367 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2368 border-top-right-radius: 0px;
2369 border-bottom-right-radius: 0px;
2372 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2373 #urlbar-reload-button:not(:hover) {
2374 border-inline-start-style: none;
2375 padding-inline-start: 3px;
2378 #urlbar-reload-button {
2379 -moz-image-region: rect(0px, 14px, 14px, 0px);
2382 #urlbar-reload-button[disabled=true] {
2383 -moz-image-region: rect(28px, 14px, 42px, 0px);
2386 #urlbar-reload-button:not([disabled=true]):hover {
2387 -moz-image-region: rect(14px, 14px, 28px, 0px);
2390 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2391 transform: scaleX(-1);
2395 -moz-image-region: rect(0, 42px, 14px, 28px);
2398 #urlbar-go-button:hover {
2399 -moz-image-region: rect(14px, 42px, 28px, 28px);
2402 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2403 transform: scaleX(-1);
2406 #urlbar-stop-button {
2407 -moz-image-region: rect(0px, 28px, 14px, 14px);
2410 #urlbar-stop-button:hover {
2411 -moz-image-region: rect(14px, 28px, 28px, 14px);
2414 @media (min-resolution: 1.1dppx) {
2416 #urlbar-reload-button,
2417 #urlbar-stop-button {
2418 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2421 #urlbar-go-button > .toolbarbutton-icon,
2422 #urlbar-reload-button > .toolbarbutton-icon,
2423 #urlbar-stop-button > .toolbarbutton-icon {
2428 -moz-image-region: rect(0, 84px, 28px, 56px);
2431 #urlbar-go-button:hover {
2432 -moz-image-region: rect(28px, 84px, 56px, 56px);
2435 #urlbar-go-button:hover:active {
2436 -moz-image-region: rect(56px, 84px, 84px, 56px);
2439 #urlbar-reload-button {
2440 -moz-image-region: rect(0, 28px, 28px, 0);
2443 #urlbar-reload-button:not([disabled]):hover {
2444 -moz-image-region: rect(28px, 28px, 56px, 0);
2447 #urlbar-reload-button:not([disabled]):hover:active {
2448 -moz-image-region: rect(56px, 28px, 84px, 0);
2451 #urlbar-stop-button {
2452 -moz-image-region: rect(0, 56px, 28px, 28px);
2455 #urlbar-stop-button:not([disabled]):hover {
2456 -moz-image-region: rect(28px, 56px, 56px, 28px);
2459 #urlbar-stop-button:hover:active {
2460 -moz-image-region: rect(56px, 56px, 84px, 28px);
2464 /* popup blocker button */
2466 #page-report-button {
2467 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2468 -moz-image-region: rect(0, 16px, 16px, 0);
2471 #page-report-button:hover ,
2472 #page-report-button:hover:active,
2473 #page-report-button[open="true"] {
2474 -moz-image-region: rect(0, 32px, 16px, 16px);
2477 /* Reader mode button */
2479 #reader-mode-button {
2480 list-style-image: url("chrome://browser/skin/readerMode.svg");
2481 -moz-image-region: rect(0, 16px, 16px, 0);
2484 #reader-mode-button:hover,
2485 #reader-mode-button[readeractive]:hover {
2486 -moz-image-region: rect(0, 32px, 16px, 16px);
2489 #reader-mode-button:hover:active,
2490 #reader-mode-button[readeractive] {
2491 -moz-image-region: rect(0, 48px, 16px, 32px);
2494 /* social share panel */
2496 .social-share-frame {
2503 background-color: white;
2504 background-repeat: no-repeat;
2505 background-position: center center;
2507 #share-container[loading] {
2508 background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2510 #share-container > browser {
2511 transition: opacity 150ms ease-in-out;
2514 #share-container[loading] > browser {
2518 .social-share-toolbar {
2519 border-bottom: 1px solid #9C9CFF;
2523 #social-share-provider-buttons {
2528 .share-provider-button {
2533 .share-provider-button > .toolbarbutton-text {
2536 .share-provider-button > .toolbarbutton-icon {
2542 /* fixup corners for share panel */
2543 .social-panel > .social-panel-frame {
2544 border-radius: inherit;
2547 #social-share-panel {
2553 .social-share-frame {
2554 border-top-left-radius: 0;
2555 border-bottom-left-radius: inherit;
2556 border-top-right-radius: 0;
2557 border-bottom-right-radius: inherit;
2560 #social-share-panel > .social-share-toolbar {
2561 border-top-left-radius: inherit;
2562 border-top-right-radius: inherit;
2565 #social-share-provider-buttons {
2566 border-top-left-radius: inherit;
2567 border-top-right-radius: inherit;
2570 /* social recommending panel */
2572 #social-mark-button {
2573 -moz-image-region: rect(0, 16px, 16px, 0);
2576 /* bookmarks menu-button */
2578 #bookmarks-menu-button.bookmark-item {
2579 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2580 -moz-image-region: rect(0px 16px 16px 0px);
2583 #bookmarks-menu-button.bookmark-item[starred] {
2584 -moz-image-region: rect(0px 32px 16px 16px);
2587 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2589 padding-bottom: 2px;
2592 #BMB_bookmarksPopup[side="top"],
2593 #BMB_bookmarksPopup[side="bottom"] {
2595 margin-right: -20px;
2598 #BMB_bookmarksPopup[side="left"],
2599 #BMB_bookmarksPopup[side="right"] {
2601 margin-bottom: -20px;
2604 /* bookmarking panel */
2606 #editBookmarkPanelStarIcon {
2607 list-style-image: url("chrome://browser/skin/places/starred48.png");
2612 #editBookmarkPanelStarIcon[unstarred] {
2613 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2616 #editBookmarkPanelTitle {
2620 #editBookmarkPanelHeader,
2621 #editBookmarkPanelContent {
2622 margin-bottom: .5em;
2625 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2626 #editBMPanel_folderTree {
2633 border-top: 1px solid #9C9CFF;
2634 border-bottom-left-radius: 5px;
2635 border-bottom-right-radius: 5px;
2639 list-style-image: url("chrome://browser/skin/sync-notification-24.png");
2640 margin-inline-end: 10px;
2641 vertical-align: middle;
2644 .panel-promo-closebutton {
2645 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2646 margin-inline-end: -3px;
2650 .panel-promo-closebutton:hover {
2651 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2654 .panel-promo-closebutton:hover:active {
2655 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2658 .panel-promo-closebutton > .toolbarbutton-text {
2662 /* ::::: content area ::::: */
2665 background-color: #9C9CFF;
2670 background-color: #000000;
2674 margin-inline-start: 0;
2683 padding-inline-start: 0px;
2686 #sidebar-header > .close-icon {
2687 /* padding: 4px 2px;
2690 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2693 #sidebar-header > .close-icon:hover,
2694 #sidebar-header > .close-icon:hover:active {
2695 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2698 #sidebar-splitter:-moz-locale-dir(ltr),
2699 #sidebar:-moz-locale-dir(ltr) {
2700 border-radius: 0 5px 0 0;
2703 #sidebar-splitter:-moz-locale-dir(rtl),
2704 #sidebar:-moz-locale-dir(rtl) {
2705 border-radius: 5px 0 0 0;
2708 .browserContainer > findbar {
2710 background-color: -moz-dialog;
2711 color: -moz-DialogText;
2720 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2723 #TabsToolbar .toolbar-holder {
2724 background-color: #000000; /* correct effect of being an actual toolbar */
2727 #main-window[disablechrome] #TabsToolbar,
2728 #TabsToolbar[tabsontop="false"] {
2729 border-bottom: 1px solid #008484;
2732 /* === BEGIN tabs.inc.css === */
2735 /* --tab-toolbar-navbar-overlap: 1px; */
2736 /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2737 /* --tab-min-height: 31px; */
2740 /* --tab-stroke-background-size: auto 100%; */
2744 .tabs-newtab-button,
2745 #TabsToolbar > #new-tab-button {
2750 padding: 1px 4px 2px;
2753 .tabbrowser-tab:first-of-type {
2754 margin-inline-start: 2px;
2757 .tabs-newtab-button,
2758 #TabsToolbar > #new-tab-button,
2759 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2760 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2761 border-radius: 8px 8px 0px 0px;
2762 margin-inline-start: 0;
2765 .tabs-newtab-button:not(:hover),
2766 #TabsToolbar > #new-tab-button:not(:hover),
2767 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2768 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2769 background-color: #C09070;
2772 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2773 .tabbrowser-tab[visuallyselected=true] {
2774 /* position: relative;
2778 .tab-background-middle {
2784 .tab-content[pinned] {
2797 margin-inline-end: 3px;
2801 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2808 margin-inline-start: -15px;
2809 margin-inline-end: -1px;
2813 .tab-icon-overlay[crashed] {
2814 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2817 .tab-icon-overlay[soundplaying],
2818 .tab-icon-overlay[muted]:not([crashed]) {
2819 border-radius: 10px;
2822 .tab-icon-overlay[soundplaying]:hover,
2823 .tab-icon-overlay[muted]:hover {
2824 background-color: #FFCF00;
2827 .tab-icon-overlay[soundplaying] {
2829 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2832 .tab-icon-overlay[muted]:not([crashed]) {
2833 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2836 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) {
2837 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2841 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) {
2842 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2845 .tab-throbber[busy] {
2846 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2849 .tab-throbber[progress] {
2850 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2853 @media (min-resolution: 1.1dppx) {
2854 .tab-throbber[busy] {
2855 list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
2858 .tab-throbber[progress] {
2859 list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
2863 .tab-throbber[pinned],
2864 .tab-icon-image[pinned] {
2865 margin-inline-start: 2px;
2866 margin-inline-end: 2px;
2870 /* this needs to add up to the 16px of the icon image */
2872 margin-top: 2px !important;
2873 margin-bottom: 2px !important;
2877 margin-inline-start: 4px;
2883 .tab-icon-sound[muted] {
2884 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
2887 .tab-icon-sound[muted]:hover {
2888 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
2891 .tab-icon-sound[muted]:hover:active {
2892 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
2895 .tab-icon-sound[soundplaying] {
2896 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab");
2899 .tab-icon-sound[soundplaying]:hover {
2900 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-hover");
2903 .tab-icon-sound[soundplaying]:hover:active {
2904 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-pressed");
2907 .tab-icon-sound[muted] {
2908 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted");
2911 .tab-icon-sound[muted]:hover {
2912 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-hover");
2915 .tab-icon-sound[muted]:hover:active {
2916 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-pressed");
2919 .tab-icon-sound[visuallyselected=true][soundplaying] {
2920 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
2923 .tab-icon-sound[visuallyselected=true][soundplaying]:hover {
2924 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover");
2927 .tab-icon-sound[visuallyselected=true][soundplaying]:hover:active {
2928 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed");
2931 .tab-icon-sound[visuallyselected=true][muted] {
2932 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
2935 .tab-icon-sound[visuallyselected=true][muted]:hover {
2936 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
2939 .tab-icon-sound[visuallyselected=true][muted]:hover:active {
2940 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
2943 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying] {
2944 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white");
2947 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover {
2948 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover");
2951 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active {
2952 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed");
2955 #TabsToolbar[brighttext] .tab-icon-sound[muted] {
2956 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white");
2959 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover {
2960 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover");
2963 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active {
2964 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed");
2973 .tabs-newtab-button {
2974 /* overlap the tab curves */
2977 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
2981 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
2982 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
2985 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
2986 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
2989 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
2992 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
2995 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
2996 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
2999 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
3000 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
3003 .tab-background-start[visuallyselected=true]::after,
3004 .tab-background-start[visuallyselected=true]::before,
3005 .tab-background-start,
3006 .tab-background-end,
3007 .tab-background-end[visuallyselected=true]::after,
3008 .tab-background-end[visuallyselected=true]::before {
3011 .tabbrowser-tab:not([visuallyselected=true]),
3012 .tabbrowser-tab:-moz-lwtheme {
3015 /* tabbrowser-tab focus ring */
3016 .tabbrowser-tab:focus {
3017 outline: 1px dotted;
3022 .tabbrowser-tab[visuallyselected="true"] {
3025 /* End selected tab */
3027 /* Tab pointer-events */
3030 pointer-events: none;
3033 .tab-background-middle,
3034 .tabs-newtab-button,
3035 .tab-icon-overlay[soundplaying],
3036 .tab-icon-overlay[muted]:not([crashed]),
3039 pointer-events: auto;
3045 .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([visuallyselected="true"]),
3046 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([visuallyselected="true"]) {
3048 .tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
3049 background-color: #E7ADE7;
3052 .tab-label[attention]:not([visuallyselected="true"]) {
3056 .tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
3057 background-color: #3333FF;
3061 /* Tab separators */
3063 .tabbrowser-tab::after,
3064 .tabbrowser-tab::before {
3066 margin-inline-start: -1px;
3067 background-image: linear-gradient(transparent 5px,
3069 currentColor calc(100% - 4px),
3070 transparent calc(100% - 4px));
3074 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3075 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3079 /* Also show separators beside the selected tab when dragging it. */
3081 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3082 .tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3083 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
3088 /* New tab button */
3090 .tabs-newtab-button {
3092 /* width: calc(36px + var(--tab-curve-width)); */
3095 /* === END tabs.inc.css === */
3099 * Decrease the height of the hoverable region of background tabs whenever the tabs are at the top
3100 * of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by
3101 * the titlebar. We don't need this in fullscreen since window dragging is not an issue there.
3103 #main-window[tabsintitlebar][sizemode=normal] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar .tab-background-middle:not([visuallyselected=true]) {
3104 /* clip-path: url(chrome://browser/content/browser.xul#tab-hover-clip-path);*/
3107 /* Tab DnD indicator */
3108 .tab-drop-indicator {
3109 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3110 margin-bottom: -11px;
3113 /* Tab close button */
3115 list-style-image: url("chrome://global/skin/icons/close-button.gif");
3118 .tab-close-button:hover,
3119 .tab-close-button:hover[selected="true"] {
3120 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3123 .tab-close-button:hover:active,
3124 .tab-close-button:hover:active[selected="true"] {
3125 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3128 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3130 .tabbrowser-arrowscrollbox > .scrollbutton-up,
3131 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3135 background-origin: border-box;
3138 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3139 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3140 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3141 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3144 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3145 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3148 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3149 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3150 /* transform: scaleX(-1);*/
3153 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3154 transition: 1s background-color ease-out;
3157 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
3158 background-color: #008484;
3161 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3162 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3163 /* border-width: 0 2px 0 0;
3164 border-style: solid;
3165 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3168 .tabs-newtab-button > .toolbarbutton-icon {
3170 margin-bottom: -1px;
3173 .tabs-newtab-button,
3174 #TabsToolbar > #new-tab-button,
3175 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3176 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3177 list-style-image: url("chrome://browser/skin/tabbrowser/newtab.svg");
3178 -moz-image-region: auto;
3181 .tabs-newtab-button,
3182 .tabs-newtab-button:hover,
3183 #TabsToolbar > #new-tab-button,
3184 #TabsToolbar > #new-tab-button:hover {
3187 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3188 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3189 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3190 .tabs-newtab-button:-moz-lwtheme-brighttext,
3191 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3192 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3195 #TabsToolbar > #new-tab-button {
3200 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3203 #alltabs-button:hover,
3204 #alltabs-button:hover:active,
3205 #alltabs-button[open="true"] {
3206 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3209 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3210 #alltabs-button:-moz-lwtheme-brighttext {
3213 #alltabs-button > .toolbarbutton-icon {
3217 #alltabs-button > .toolbarbutton-menu-dropmarker {
3221 /* All tabs menupopup */
3222 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3223 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3224 -moz-image-region: auto;
3227 .alltabs-item[selected="true"] {
3231 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3232 list-style-image: url("chrome://global/skin/icons/loading.png");
3235 @media (min-resolution: 1.1dppx) {
3236 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3237 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3241 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3242 background-color: #402800;
3245 .alltabs-endimage[muted] {
3246 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3249 .alltabs-endimage[soundplaying] {
3250 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
3253 toolbarbutton.chevron {
3254 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3257 toolbarbutton.chevron:hover {
3258 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3261 toolbar[brighttext] toolbarbutton.chevron {
3262 list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3265 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3266 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3267 transform: scaleX(-1);
3270 toolbarbutton.chevron > .toolbarbutton-text,
3271 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3275 toolbarbutton.chevron > .toolbarbutton-icon {
3279 #sidebar-throbber[loading="true"] {
3280 list-style-image: url("chrome://global/skin/icons/loading.png");
3281 margin-inline-end: 4px;
3284 @media (min-resolution: 1.1dppx) {
3285 #sidebar-throbber[loading="true"] {
3286 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3291 /* Bookmarks toolbar */
3292 #PlacesToolbarDropIndicator {
3293 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3296 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3297 background-color: #008484 !important;
3298 color: #FFCF00 !important;
3301 /* rules for menupopup drop indicators */
3302 .menupopup-drop-indicator-bar {
3304 /* these two margins must together compensate the indicator's height */
3306 margin-bottom: -1px;
3309 .menupopup-drop-indicator {
3310 list-style-image: none;
3312 margin-inline-end: -4em;
3313 background-color: #008484;
3316 /* === BEGIN notification-icons.inc.css === */
3318 .popup-notification-icon {
3321 margin-inline-end: 10px;
3324 .popup-notification-icon[popupid="geolocation"] {
3325 list-style-image: url("chrome://browser/skin/Geolocation-64.png");
3328 .popup-notification-icon[popupid="xpinstall-disabled"],
3329 .popup-notification-icon[popupid="addon-install-blocked"],
3330 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3331 list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3334 .popup-notification-icon[popupid="addon-progress"] {
3335 list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3338 .popup-notification-icon[popupid="addon-install-failed"] {
3339 list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3342 .popup-notification-icon[popupid="addon-install-confirmation"] {
3343 list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3346 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3347 list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3350 .popup-notification-icon[popupid="addon-install-complete"] {
3351 list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3354 .popup-notification-icon[popupid="addon-install-restart"] {
3355 list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3358 .popup-notification-icon[popupid="click-to-play-plugins"] {
3359 list-style-image: url("chrome://mozapps/skin/plugins/pluginBlocked-64.png");
3362 .popup-notification-icon[popupid="web-notifications"] {
3363 list-style-image: url("chrome://browser/skin/web-notifications-icon.svg");
3366 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3367 .popup-notification-icon[popupid*="offline-app-requested"],
3368 .popup-notification-icon[popupid="offline-app-usage"] {
3369 list-style-image: url("chrome://global/skin/icons/alert-question.gif");
3372 .popup-notification-icon[popupid="password"] {
3373 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-64.png");
3376 .popup-notification-icon[popupid="webRTC-sharingDevices"],
3377 .popup-notification-icon[popupid="webRTC-shareDevices"] {
3378 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-64.png");
3381 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3382 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3383 list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-64.png");
3386 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3387 .popup-notification-icon[popupid="webRTC-shareScreen"] {
3388 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64.png);
3391 .popup-notification-icon[popupid="pointerLock"] {
3392 list-style-image: url("chrome://browser/skin/pointerLock-64.png");
3395 /* Notification icon box */
3396 #notification-popup .panel-promo-box {
3397 /* margin: 10px -10px -10px; */
3400 #notification-popup-box {
3402 background-color: #000000;
3403 background-clip: padding-box;
3406 border-radius: 3px 0 0 3px;
3407 border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 / 0 8px 0 0;
3408 margin-inline-end: -8px;
3409 border-right-width: 8px;
3412 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #notification-popup-box {
3413 /* padding-left: 7px; */
3416 /* This changes the direction of the main notification box on the url bar. */
3417 #notification-popup-box:-moz-locale-dir(rtl),
3418 /* This adds a second flip for the notification anchors, as they don't switch direction
3420 .notification-anchor-icon:-moz-locale-dir(rtl) {
3421 transform: scaleX(-1);
3424 /* For the anchor icons in the chat window, we don't have the notification popup box,
3425 so we need to cancel the RTL transform. */
3426 .notification-anchor-icon.chat-toolbarbutton:-moz-locale-dir(rtl) {
3430 .notification-anchor-icon {
3431 list-style-image: url("chrome://global/skin/icons/information-16.png");
3438 .notification-anchor-icon:-moz-focusring {
3439 outline: 1px dotted #008484;
3442 .geo-notification-icon,
3443 #geo-notification-icon {
3444 list-style-image: url("chrome://browser/skin/Geolocation-16.png");
3447 #addons-notification-icon {
3448 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default);
3451 #addons-notification-icon:hover {
3452 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#hover);
3455 #addons-notification-icon:hover:active {
3456 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#active);
3459 .indexedDB-notification-icon,
3460 #indexedDB-notification-icon {
3461 list-style-image: url("chrome://global/skin/icons/question-16.png");
3464 #password-notification-icon {
3465 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-16.png");
3468 #login-fill-notification-icon {
3469 /* Temporary icon until the capture and fill doorhangers are unified. */
3470 list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png);
3471 transform: scaleX(-1);
3474 #plugins-notification-icon {
3475 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
3478 #plugins-notification-icon.plugin-hidden {
3479 list-style-image: url("chrome://browser/skin/notification-pluginAlert.png");
3482 #plugins-notification-icon.plugin-blocked {
3483 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
3486 #plugins-notification-icon {
3487 /* -moz-image-region: rect(0, 16px, 16px, 0);*/
3490 #plugins-notification-icon:hover {
3491 /* -moz-image-region: rect(0, 32px, 16px, 16px);*/
3494 #notification-popup-box[hidden] {
3495 /* Override display:none to make the pluginBlockedNotification animation work
3496 when showing the notification repeatedly. */
3498 visibility: collapse;
3501 #plugins-notification-icon.plugin-blocked[showing] {
3502 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3505 @keyframes pluginBlockedNotification {
3514 .webRTC-shareDevices-notification-icon,
3515 #webRTC-shareDevices-notification-icon {
3516 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-16.png");
3519 .webRTC-sharingDevices-notification-icon,
3520 #webRTC-sharingDevices-notification-icon {
3521 list-style-image: url("chrome://browser/skin/webRTC-sharingDevice-16.png");
3524 .webRTC-shareMicrophone-notification-icon,
3525 #webRTC-shareMicrophone-notification-icon {
3526 list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-16.png");
3529 .webRTC-sharingMicrophone-notification-icon,
3530 #webRTC-sharingMicrophone-notification-icon {
3531 list-style-image: url("chrome://browser/skin/webRTC-sharingMicrophone-16.png");
3534 .webRTC-shareScreen-notification-icon,
3535 #webRTC-shareScreen-notification-icon {
3536 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png);
3539 .webRTC-sharingScreen-notification-icon,
3540 #webRTC-sharingScreen-notification-icon {
3541 list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16.png);
3544 .web-notifications-notification-icon,
3545 #web-notifications-notification-icon {
3546 list-style-image: url("chrome://browser/skin/web-notifications-tray.svg");
3547 -moz-image-region: rect(0, 16px, 16px, 0);
3550 .web-notifications-notification-icon:hover,
3551 #web-notifications-notification-icon:hover {
3552 -moz-image-region: rect(0, 32px, 16px, 16px);
3555 .web-notifications-notification-icon:hover:active,
3556 #web-notifications-notification-icon:hover:active {
3557 -moz-image-region: rect(0, 48px, 16px, 32px);
3560 #pointerLock-notification-icon {
3561 list-style-image: url("chrome://browser/skin/pointerLock-16.png");
3564 .translate-notification-icon,
3565 #translate-notification-icon {
3566 list-style-image: url("chrome://browser/skin/translation-16.png");
3567 -moz-image-region: rect(0px, 16px, 16px, 0px);
3570 .translated-notification-icon,
3571 #translated-notification-icon {
3572 list-style-image: url("chrome://browser/skin/translation-16.png");
3573 -moz-image-region: rect(0px, 32px, 16px, 16px);
3576 .popup-notification-icon[popupid="servicesInstall"] {
3577 list-style-image: url("chrome://browser/skin/social/services-64.png");
3579 #servicesInstall-notification-icon {
3580 list-style-image: url("chrome://browser/skin/social/services-16.png");
3583 /* EME notifications */
3585 .popup-notification-icon[popupid="drmContentPlaying"],
3586 #eme-notification-icon {
3587 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3590 #eme-notification-icon:hover:active {
3591 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3594 #eme-notification-icon[firstplay=true] {
3595 animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3598 @keyframes emeTeachingMoment {
3599 0% {transform: translateX(0); }
3600 25% {transform: translateX(3px) }
3601 75% {transform: translateX(-3px) }
3602 100% { transform: translateX(0); }
3605 /* HiDPI notification icons */
3606 @media (min-resolution: 1.1dppx) {
3607 /* #notification-popup-box {
3608 border-image: url("chrome://browser/skin/urlbar-arrow@2x.png") 0 16 0 0 fill;
3611 .notification-anchor-icon {
3612 list-style-image: url(chrome://global/skin/icons/information-32.png);
3615 .webRTC-shareDevices-notification-icon,
3616 #webRTC-shareDevices-notification-icon {
3617 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16@2x.png);
3620 .webRTC-sharingDevices-notification-icon,
3621 #webRTC-sharingDevices-notification-icon {
3622 list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16@2x.png);
3625 .webRTC-shareMicrophone-notification-icon,
3626 #webRTC-shareMicrophone-notification-icon {
3627 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16@2x.png);
3630 .webRTC-sharingMicrophone-notification-icon,
3631 #webRTC-sharingMicrophone-notification-icon {
3632 list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16@2x.png);
3635 .webRTC-shareScreen-notification-icon,
3636 #webRTC-shareScreen-notification-icon {
3637 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16@2x.png);
3640 .webRTC-sharingScreen-notification-icon,
3641 #webRTC-sharingScreen-notification-icon {
3642 list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16@2x.png);
3645 .popup-notification-icon[popupid="webRTC-sharingDevices"],
3646 .popup-notification-icon[popupid="webRTC-shareDevices"] {
3647 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64@2x.png);
3650 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3651 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3652 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64@2x.png);
3655 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3656 .popup-notification-icon[popupid="webRTC-shareScreen"] {
3657 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64@2x.png);
3661 /* === END notification-icons.inc.css === */
3663 .popup-notification-body[popupid="addon-progress"],
3664 .popup-notification-body[popupid="addon-install-confirmation"] {
3669 /* Translation infobar */
3671 /* === BEGIN infobar.inc.css === */
3673 notification[value="translation"] .messageImage {
3674 list-style-image: url("chrome://browser/skin/translation-16.png");
3675 -moz-image-region: rect(0, 32px, 16px, 16px);
3678 @media (min-resolution: 1.25dppx) {
3679 notification[value="translation"] .messageImage {
3680 list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3681 -moz-image-region: rect(0, 64px, 32px, 32px);
3685 notification[value="translation"][state="translating"] .messageImage {
3686 list-style-image: url("chrome://browser/skin/translating-16.png");
3687 -moz-image-region: auto;
3690 @media (min-resolution: 1.25dppx) {
3691 notification[value="translation"][state="translating"] .messageImage {
3692 list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3696 notification[value="translation"] hbox[anonid="details"] {
3700 notification[value="translation"] button,
3701 notification[value="translation"] menulist {
3705 notification[value="translation"] menulist > .menulist-dropmarker {
3708 .translation-menupopup arrowscrollbox {
3712 .translation-attribution {
3714 -moz-box-align: end;
3718 .translation-attribution > label {
3722 .translation-attribution > image {
3726 .translation-welcome-panel {
3730 .translation-welcome-logo {
3733 list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3734 -moz-image-region: rect(0, 64px, 32px, 32px);
3737 .translation-welcome-content {
3738 margin-inline-start: 16px;
3741 .translation-welcome-headline {
3746 .translation-welcome-body {
3751 /* === END infobar.inc.css === */
3753 notification[value="translation"] {
3757 .translation-menupopup {
3758 -moz-appearance: none;
3761 /* Bookmarks roots menu-items */
3762 #subscribeToPageMenuitem:not([disabled]),
3763 #subscribeToPageMenupopup {
3764 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3767 #bookmarksToolbarFolderMenu,
3768 #BMB_bookmarksToolbar,
3769 #panelMenu_bookmarksToolbar {
3770 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3771 -moz-image-region: auto;
3774 #BMB_unsortedBookmarks,
3775 #panelMenu_unsortedBookmarks {
3776 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3777 -moz-image-region: auto;
3780 /* ::::: Keyboard UI Panel ::::: */
3785 border-radius: 20px;
3788 .KUI-panel[level="top"] {
3789 /*background-color: rgba(27%,27%,27%,.65);*/
3795 padding: 20px 10px 10px;
3799 .ctrlTab-favicon[src] {
3800 background-color: #000000;
3806 .ctrlTab-preview-inner > .tabPreview-canvas {
3809 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3813 .ctrlTab-preview-inner {
3814 padding-bottom: 10px;
3817 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3819 background-color: #000000;
3820 border-radius: .5em;
3823 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3825 background-color: #000000;
3828 border: 2px solid #9C9CFF;
3829 border-radius: .5em;
3832 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
3833 margin: -10px -10px 0;
3845 background: url("chrome://browser/content/abouthome/sync.png") top left no-repeat;
3853 .sync-panel-button-box {
3857 #sync-start-panel-title {
3863 #sync-start-panel-subtitle {
3869 .statuspanel-label {
3872 background: #404000;
3873 border: 1px none #9C9CFF;
3874 border-top-style: solid;
3879 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3880 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3881 border-right-style: solid;
3882 border-top-right-radius: .3em;
3886 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3887 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3888 border-left-style: solid;
3889 border-top-left-radius: .3em;
3893 /* HACK to abolish devily color on main content */
3896 background-color: transparent !important;
3899 /* === BEGIN fullscreen/warning.inc.css === */
3901 html|*#fullscreen-warning {
3902 align-items: center;
3903 background: rgba(0, 0, 0, 0.9);
3904 border: 2px solid #A09090;
3905 box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
3908 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3911 html|*#fullscreen-warning::before {
3913 width: 24px; height: 24px;
3916 html|*#fullscreen-warning.verifiedIdentity::before,
3917 html|*#fullscreen-warning.verifiedDomain::before {
3918 content: url("chrome://browser/skin/fullscreen/secure.svg");
3921 html|*#fullscreen-warning.unknownIdentity::before {
3922 content: url("chrome://browser/skin/fullscreen/insecure.svg");
3925 html|*#fullscreen-domain-text,
3926 html|*#fullscreen-generic-text {
3928 font-weight: lighter;
3933 html|*#fullscreen-domain {
3938 html|*#fullscreen-exit-button {
3940 font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3942 font-weight: lighter;
3944 box-sizing: content-box;
3946 border-radius: 300px;
3948 background-color: #C09070;
3952 /* === END fullscreen/warning.inc.css === */
3954 /* === BEGIN commandline.inc.css === */
3956 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
3957 We are copy/pasting variables from light-theme and dark-theme,
3958 since they aren't loaded in this context (within browser.css). */
3959 :root #developer-toolbar {
3960 --gcli-background-color: #000000; /* --theme-toolbar-background */
3961 --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
3962 --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
3963 --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
3964 --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
3965 --selection-background: #008484; /* --theme-selection-background */
3966 --selection-color: #000000; /* --theme-selection-color */
3969 /* Developer toolbar */
3971 #developer-toolbar {
3972 border-top: 3px solid var(--gcli-background-color);
3973 border-bottom: none;
3976 #developer-toolbar .toolbar-holder {
3977 background-color: #8050B0;
3981 #developer-toolbar .toolbar-holder {
3982 background-color: #8050B0;
3986 #developer-toolbar .toolbar-startcap,
3987 #developer-toolbar .toolbar-endcap{
3988 background-color: #6000CF;
3991 #developer-toolbar {
3993 min-height: 32px; */
3996 #developer-toolbar > toolbarbutton {
3998 background-color: transparent;
4004 .developer-toolbar-button > image {
4005 /* margin: auto 10px; */
4008 #developer-toolbar-toolbox-button > label {
4012 .developer-toolbar-button > .toolbarbutton-icon {
4017 #developer-toolbar-toolbox-button {
4018 list-style-image: url("chrome://devtools/skin/images/toggle-tools.png");
4019 -moz-image-region: rect(0px, 16px, 16px, 0px);
4022 #developer-toolbar-toolbox-button > label {
4026 #developer-toolbar-toolbox-button:hover,
4027 #developer-toolbar-toolbox-button:hover:active,
4028 #developer-toolbar-toolbox-button[checked=true] {
4029 -moz-image-region: rect(0px, 32px, 16px, 16px);
4032 @media (min-resolution: 2dppx) {
4033 #developer-toolbar-toolbox-button {
4034 list-style-image: url("chrome://devtools/skin/images/toggle-tools@2x.png");
4035 -moz-image-region: rect(0px, 32px, 32px, 0px);
4038 #developer-toolbar-toolbox-button:hover,
4039 #developer-toolbar-toolbox-button:hover:active,
4040 #developer-toolbar-toolbox-button[checked=true] {
4041 -moz-image-region: rect(0px, 64px, 32px, 32px);
4047 html|*#gcli-tooltip-frame,
4048 html|*#gcli-output-frame {
4051 background-color: transparent;
4057 background-color: transparent;
4060 .gclitoolbar-input-node,
4061 .gclitoolbar-complete-node {
4063 -moz-box-align: center;
4067 background-color: transparent;
4070 .gclitoolbar-input-node {
4071 /* line-height: 32px;
4072 outline-style: none; */
4073 background-repeat: no-repeat;
4074 background-color: var(--gcli-input-background);
4077 .gclitoolbar-input-node[focused="true"] {
4078 background-color: var(--gcli-input-focused-background);
4081 .gclitoolbar-input-node::before {
4083 display: inline-block;
4084 -moz-box-ordinal-group: 0;
4088 background-image: url("chrome://devtools/skin/images/commandline-icon.png");
4089 background-position: 0 center;
4090 background-size: 32px 16px;
4093 .gclitoolbar-input-node[focused="true"]::before {
4094 background-position: -16px center;
4097 @media (min-resolution: 2dppx) {
4098 .gclitoolbar-input-node::before {
4099 background-image: url("chrome://devtools/skin/images/commandline-icon@2x.png");
4103 .gclitoolbar-input-node:not([focused="true"]) {
4104 border-color: transparent;
4107 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
4108 background-color: var(--selection-background);
4109 color: var(--selection-color);
4112 .gclitoolbar-complete-node {
4114 background-color: transparent;
4117 pointer-events: none;
4120 .gcli-in-incomplete,
4124 .gcli-in-closebrace,
4131 .gcli-in-incomplete {
4132 border-bottom: 2px dotted #8050B0;
4136 border-bottom: 2px dotted #FF0000;
4147 .gcli-in-closebrace {
4151 /* === END commandline.inc.css === */
4153 /* === BEGIN responsivedesign.inc.css === */
4155 /* Responsive Mode */
4157 .browserContainer[responsivemode] {
4158 background-color: #221500;
4159 padding: 0 20px 20px 20px;
4162 .browserStack[responsivemode] {
4163 box-shadow: 0 0 7px #9C9CFF;
4166 .devtools-responsiveui-toolbar {
4167 background: transparent;
4168 /* text color is textColor from dark theme, since no theme is applied to
4169 * the responsive toolbar.
4175 border-bottom-width: 0;
4178 .devtools-responsiveui-textinput {
4179 /* -moz-appearance: none;
4182 border: 1px solid #111;
4189 .devtools-responsiveui-textinput[attention] {
4190 /* border-color: #38ace6;
4191 background: rgba(56,172,230,0.4);*/
4194 .devtools-responsiveui-menulist,
4195 .devtools-responsiveui-toolbarbutton {
4196 -moz-box-align: center;
4198 /* min-height: 22px;*/
4199 /* margin: 0 3px; */
4202 .devtools-responsiveui-menulist .menulist-editable-box {
4203 background-color: transparent;
4206 .devtools-responsiveui-menulist html|*.menulist-editable-input {
4211 .devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4212 /* background: hsla(212,7%,57%,.35);*/
4215 .devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4220 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4221 -moz-box-orient: horizontal;
4224 .devtools-responsiveui-menulist:-moz-focusring,
4225 .devtools-responsiveui-toolbarbutton:-moz-focusring {
4226 /* outline: 1px dotted hsla(210,30%,85%,0.7);
4227 outline-offset: -4px;*/
4230 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4234 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4235 /* border-color: hsla(210,8%,5%,.6);
4236 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4237 box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15); */
4240 .devtools-responsiveui-menulist[open=true],
4241 .devtools-responsiveui-toolbarbutton[open=true],
4242 .devtools-responsiveui-toolbarbutton[checked=true] {
4243 /* border-color: hsla(210,8%,5%,.6) !important;
4244 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4245 box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15); */
4248 .devtools-responsiveui-toolbarbutton[checked=true] {
4249 /* color: hsl(208,100%,60%); */
4252 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
4253 /* background-color: transparent !important;*/
4256 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4257 /* background-color: hsla(210,8%,5%,.2) !important;*/
4260 .devtools-responsiveui-menulist > .menulist-label-box {
4264 .devtools-responsiveui-menulist > .menulist-dropmarker {
4265 /* display: -moz-box;
4266 background-color: transparent;
4267 list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4268 -moz-box-align: center;
4273 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4276 border-inline-end: 1px solid hsla(210,8%,5%,.45);
4277 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
4280 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4281 /* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4284 .devtools-responsiveui-toolbarbutton[type=menu-button] {
4285 /* padding: 0 1px;*/
4286 -moz-box-align: stretch;
4289 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4290 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
4291 /* list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4292 -moz-box-align: center;
4296 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4297 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
4301 .devtools-responsiveui-close {
4302 list-style-image: url("chrome://devtools/skin/close.svg");
4305 .devtools-responsiveui-close:hover {
4306 filter: url(images/filters.svg#checked-icon-state);
4309 .devtools-responsiveui-rotate {
4310 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate.png");
4311 -moz-image-region: rect(0px,16px,16px,0px);
4314 .devtools-responsiveui-rotate:hover {
4315 -moz-image-region: rect(0px,32px,16px,16px);
4318 @media (min-resolution: 2dppx) {
4319 .devtools-responsiveui-rotate {
4320 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate@2x.png");
4323 .devtools-responsiveui-rotate:hover {
4324 -moz-image-region: rect(0px,64px,32px,32px);
4328 .devtools-responsiveui-touch {
4329 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch.png");
4330 -moz-image-region: rect(0px,16px,16px,0px);
4333 .devtools-responsiveui-touch:hover,
4334 .devtools-responsiveui-touch[checked],
4335 .devtools-responsiveui-touch[checked]:hover {
4336 -moz-image-region: rect(0px,32px,16px,16px);
4339 @media (min-resolution: 2dppx) {
4340 .devtools-responsiveui-touch {
4341 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch@2x.png");
4342 -moz-image-region: rect(0px,32px,32px,0px);
4345 .devtools-responsiveui-touch:hover,
4346 .devtools-responsiveui-touch[checked],
4347 .devtools-responsiveui-touch[checked]:hover {
4348 -moz-image-region: rect(0px,64px,32px,32px);
4352 .devtools-responsiveui-screenshot {
4353 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot.png");
4354 -moz-image-region: rect(0px,16px,16px,0px);
4357 .devtools-responsiveui-screenshot:hover {
4358 -moz-image-region: rect(0px,32px,16px,16px);
4361 @media (min-resolution: 2dppx) {
4362 .devtools-responsiveui-screenshot {
4363 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot@2x.png");
4366 .devtools-responsiveui-screenshot:hover {
4367 -moz-image-region: rect(0px,64px,32px,32px);
4371 .devtools-responsiveui-resizebarV {
4375 transform: translate(12px, -12px);
4376 background-size: cover;
4377 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer.png");
4380 .devtools-responsiveui-resizebarH {
4384 transform: translate(-12px, 12px);
4385 background-size: cover;
4386 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer.png");
4389 .devtools-responsiveui-resizehandle {
4393 transform: translate(12px, 12px);
4394 background-size: cover;
4395 background-image: url("chrome://devtools/skin/images/responsive-se-resizer.png");
4398 /* FxOS custom mode with additional buttons and phone look'n feel */
4400 /* Hide devtools manual resizer */
4401 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4402 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4403 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4407 /* Gives responsive mode a phone look'n feel */
4408 .browserStack[responsivemode].fxos-mode {
4409 padding: 60px 15px 0;
4411 border-radius: 25px / 20px;
4412 border-bottom-left-radius: 0;
4413 border-bottom-right-radius: 0;
4414 border: 1px solid #FFFFFF;
4415 border-bottom-width: 0;
4417 background-color: #353535;
4419 box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4421 background-image: linear-gradient(to right, #111 11%, #333 56%);
4425 .devtools-responsiveui-hardware-buttons {
4426 -moz-appearance: none;
4429 border: 1px solid #FFFFFF;
4430 border-bottom-left-radius: 25px;
4431 border-bottom-right-radius: 25px;
4432 border-top-width: 0;
4434 box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4436 background-image: linear-gradient(to right, #111 11%, #333 56%);
4439 .devtools-responsiveui-home-button {
4440 -moz-user-focus: ignore;
4443 list-style-image: url("chrome://devtools/skin/images/responsiveui-home.png");
4446 .devtools-responsiveui-sleep-button {
4447 -moz-user-focus: ignore;
4448 -moz-appearance: none;
4449 /* compensate browserStack top padding */
4457 border: 1px solid #444;
4458 border-top-right-radius: 12px;
4459 border-top-left-radius: 12px;
4460 border-bottom-color: transparent;
4462 background-image: linear-gradient(to top, #111 11%, #333 56%);
4465 .devtools-responsiveui-sleep-button:hover:active {
4466 background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4469 .devtools-responsiveui-volume-buttons {
4473 .devtools-responsiveui-volume-up-button,
4474 .devtools-responsiveui-volume-down-button {
4475 -moz-user-focus: ignore;
4476 -moz-appearance: none;
4477 border: 1px solid red;
4481 border: 1px solid #444;
4482 border-right-color: transparent;
4484 background-image: linear-gradient(to right, #111 11%, #333 56%);
4487 .devtools-responsiveui-volume-up-button:hover:active,
4488 .devtools-responsiveui-volume-down-button:hover:active {
4489 background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4492 .devtools-responsiveui-volume-up-button {
4493 border-top-left-radius: 12px;
4496 .devtools-responsiveui-volume-down-button {
4497 border-bottom-left-radius: 12px;
4500 @media (min-resolution: 2dppx) {
4501 .devtools-responsiveui-resizebarV {
4502 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer@2x.png");
4505 .devtools-responsiveui-resizebarH {
4506 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer@2x.png");
4509 .devtools-responsiveui-resizehandle {
4510 background-image: url("chrome://devtools/skin/images/responsive-se-resizer@2x.png");
4514 /* === END responsivedesign.inc.css === */
4516 /* === including indicator.css is done at the start of the file === */
4520 #developer-toolbar-toolbox-button[error-count]:before {
4524 background-color: #FF0000;
4526 margin-inline-end: 5px;
4529 /* Social toolbar item */
4531 #social-notification-icon-mentions {
4532 background-color: #000000;
4534 margin-inline-start: 2px;
4537 #social-notification-icon-mentions:hover {
4538 background-color: #FFCF00;
4541 #social-notification-icon-mentions[open="true"] {
4542 background-color: #FF9F00;
4545 #social-sidebar-splitter {
4549 #socialActivatedNotification .popup-notification-button-container {
4553 .social-activation-icon {
4560 #social-activation-message {
4564 #social-activation-message > label {
4568 /* social toolbar provider menu */
4569 .social-statusarea-popup {
4572 margin-right: -12px;
4575 .social-statusarea-user {
4576 border-bottom: 1px solid #9C9CFF;
4577 background-color: #000000;
4583 .social-statusarea-user-portrait {
4590 .social-statusarea-loggedInStatus {
4591 background: transparent;
4596 list-style-image: none;
4599 #social-statusarea-user[_moz-menuactive] > vbox > .social-statusarea-loggedInStatus {
4600 text-decoration: underline;
4603 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
4607 .social-panel-frame {
4608 border-radius: inherit;
4611 /* === BEGIN chat.inc.css === */
4613 #social-sidebar-header {
4617 #manage-share-providers,
4618 #social-sidebar-button {
4619 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4620 -moz-image-region: rect(0, 468px, 18px, 450px);
4623 #social-sidebar-button {
4624 -moz-appearance: none;
4629 #manage-share-providers > .toolbarbutton-icon,
4630 #social-sidebar-button > .toolbarbutton-icon {
4634 #manage-share-providers:hover,
4635 #manage-share-providers:hover:active,
4636 #social-sidebar-button:hover,
4637 #social-sidebar-button:hover:active {
4638 -moz-image-region: rect(18px, 468px, 36px, 450px);
4640 #social-sidebar-button > .toolbarbutton-menu-dropmarker {
4644 #social-sidebar-button[loading="true"] {
4645 list-style-image: url("chrome://global/skin/icons/loading.png");
4648 #social-sidebar-favico {
4661 .chat-toolbarbutton {
4662 -moz-appearance: none;
4669 .chat-toolbarbutton > .toolbarbutton-text {
4673 .chat-toolbarbutton > .toolbarbutton-icon {
4678 .chat-close-button {
4679 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close");
4682 .chat-close-button:hover {
4683 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-hover");
4686 .chat-close-button:hover:active {
4687 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-active");
4690 .chat-minimize-button {
4691 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize");
4694 .chat-minimize-button:hover {
4695 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-hover");
4698 .chat-minimize-button:hover:active {
4699 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-active");
4703 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand");
4704 transform: rotate(180deg);
4707 .chat-swap-button:hover {
4708 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-hover");
4711 .chat-swap-button:hover:active {
4712 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-active");
4715 chatbar > chatbox > .chat-titlebar > .chat-swap-button {
4726 background-color: #9C9CFF;
4733 border: 1px solid #008484;
4735 border-top-left-radius: 4px;
4736 border-top-right-radius: 4px;
4738 background-color: #A09090;
4741 .chat-titlebar[selected] {
4742 background-color: #008484;
4745 .chat-titlebar > .notification-anchor-icon {
4750 .chat-titlebar[minimized="true"] {
4751 border-bottom: none;
4754 .chat-titlebar[selected] {
4755 background-color: #008484;
4758 .chat-titlebar[activity] {
4759 background-color: #E7ADE7;
4769 list-style-image: url("chrome://browser/skin/social/services-16.png");
4770 background-color: #000000;
4776 border-top: 1px solid #008484;
4777 border-inline-end: 1px solid #008484;
4780 @media (min-resolution: 2dppx) {
4782 list-style-image: url("chrome://browser/skin/social/services-16@2x.png");
4786 .chatbar-button:hover {
4787 background-color: #FFCF00;
4789 .chatbar-button[open="true"] {
4790 background-color: #FF9F00;
4793 .chatbar-button[activity]:not([open]) {
4794 background-image: radial-gradient(circle farthest-corner at center 2px, rgb(160,144,144) 3%, rgba(160,144,144,0.9) 12%, rgba(156,156,255,0.6) 30%, rgba(156,156,255,0.2) 70%);
4797 .chatbar-button > .toolbarbutton-icon {
4801 .chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
4808 .chatbar-button > .toolbarbutton-icon {
4810 margin-inline-end: 0;
4812 .chatbar-button:hover > .toolbarbutton-icon,
4813 .chatbar-button[open="true"] > .toolbarbutton-icon {
4817 .chatbar-button:hover,
4818 .chatbar-button[open="true"] {
4821 .chatbar-button > .toolbarbutton-text,
4822 .chatbar-button > .toolbarbutton-menu-dropmarker {
4826 .chatbar-button[activity]:not([open="true"]) {
4827 background-color: #E7ADE7;
4830 .chatbar-button > menupopup > menuitem[activity] {
4835 background: transparent;
4840 margin-inline-end: 20px;
4844 margin-inline-start: 4px;
4845 background-color: transparent;
4849 /* Apply the same border-radius as the .chat-titlebar to make the box-shadow
4851 /* border-top-left-radius: 4px;
4852 border-top-right-radius: 4px;*/
4853 /* Offset the chatbox the same amount as the box-shadows' spread, to make it
4855 /* margin-inline-end: 5px;*/
4858 chatbox[minimized="true"] {
4864 margin-inline-start: 0px;
4870 /* === END chat.inc.css === */
4872 /* === BEGIN plugin-doorhanger.inc.css === */
4875 * Plugin Doorhanger Styles
4878 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4879 padding: 6px 1px 2px;
4882 .click-to-play-plugins-notification-center-box {
4885 .plugin-popupnotification-centeritem:nth-child(odd) {
4886 /* background-color: rgba(0,0,0,0.1);*/
4889 .center-item-label {
4891 text-overflow: ellipsis;
4894 .center-item-warning-icon {
4895 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
4896 background-repeat: no-repeat;
4899 margin-inline-start: 6px;
4902 .click-to-play-plugins-notification-button-container {
4905 .click-to-play-popup-button {
4909 .click-to-play-plugins-notification-description-box {
4913 padding-bottom: 3px;
4916 .click-to-play-plugins-outer-description {
4920 .click-to-play-plugins-notification-link,
4925 .messageImage[value="plugin-hidden"] {
4926 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
4929 /* Keep any changes to this style in sync with pluginProblem.css */
4930 notification.pluginVulnerable {
4933 notification.pluginVulnerable .messageImage {
4934 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
4937 /* === END plugin-doorhanger.inc.css === */
4939 /* === BEGIN login-doorhanger.inc.css === */
4941 #notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent {
4942 /* Since we display a sliding subview that extends to the border, we cannot
4943 * keep the default padding of arrow panels. We use the same padding in the
4944 * individual content views instead. Since we removed the padding, we also
4945 * have to ensure the contents are clipped to the border box. */
4950 #login-fill-mainview,
4951 #login-fill-details {
4952 padding: var(--panel-arrowcontent-padding);
4955 #login-fill-doorhanger[inDetailView] > #login-fill-mainview {
4956 transform: translateX(-14px);
4959 #login-fill-mainview,
4960 #login-fill-details {
4961 transition: transform 150ms;
4964 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details {
4965 transform: translateX(105%);
4968 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) {
4969 transform: translateX(-105%);
4972 #login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer {
4973 background-color: hsla(240,39%,100%,.1);
4976 #login-fill-testing {
4982 border: 1px solid #9C9CFF;
4986 .login-fill-item[disabled] {
4988 background-color: #000000;
4991 .login-fill-item[disabled][selected] {
4992 background-color: #008484;
5000 .login-fill-item.different-hostname > .login-hostname {
5010 #login-fill-details {
5012 background: var(--panel-arrowcontent-background);
5013 color: var(--panel-arrowcontent-color);
5014 background-clip: padding-box;
5015 border-left: 1px solid #9C9CFF;
5016 margin-inline-start: 38px;
5019 /* === END login-doorhanger.inc.css === */
5021 /* === BEGIN customizeMode.inc.css === */
5023 /* Customization mode */
5025 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
5029 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
5030 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
5031 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
5036 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
5037 pointer-events: none;
5040 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
5041 #PanelUI-contents > .panel-customization-placeholder {
5042 -moz-outline-radius: 2.5px;
5043 outline: 1px dashed transparent;
5046 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
5047 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
5048 -moz-box-ordinal-group: 0;
5053 outline-offset: -2px;
5054 pointer-events: none;
5060 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
5061 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
5062 offset from the bottom effectively the same as other targets (-2px). */
5063 #main-window[customize-entered] #TabsToolbar.customization-target::before {
5067 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
5068 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
5069 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
5070 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
5074 /* Most target outlines are shown on hover and drag over but the panel menu uses
5075 placeholders instead. */
5076 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
5077 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
5078 /* nav-bar and panel outlines are always shown */
5079 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5080 outline-color: #A09090;
5083 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5084 transition: outline-color 250ms linear;
5087 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
5088 transition: outline-color 250ms linear;
5089 outline-color: #9C9CFF;
5092 #PanelUI-contents > .panel-customization-placeholder {
5094 outline-offset: -5px;
5097 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
5099 /* padding-left: 10px;
5100 padding-right: 10px;*/
5103 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
5107 #customization-container {
5108 background-color: #000000;
5112 #customization-palette,
5113 #customization-empty {
5114 padding: 0 15px 15px;
5117 #customization-header {
5119 line-height: 1.75em;
5122 margin: 25px 25px 12px;
5123 padding-bottom: 12px;
5124 border-bottom: 1px solid #A09090;
5127 #customization-panel-container {
5128 padding: 10px 10px 0px;
5131 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
5132 #customization-footer {
5133 /*background-color: rgb(236,236,236);*/
5136 #customization-footer {
5137 border-top: 1px solid #9C9CFF;
5141 .customizationmode-button {
5145 .customizationmode-button:hover {
5148 #customization-titlebar-visibility-button[checked],
5149 #customization-devedition-theme-button[checked] {
5150 background-color: #008484;
5153 #customization-titlebar-visibility-button[checked]:hover,
5154 #customization-devedition-theme-button[checked]:hover {
5155 background-color: #FFCF00;
5158 #customization-titlebar-visibility-button[checked]:hover:active,
5159 #customization-devedition-theme-button[checked]:hover:active {
5160 background-color: #FF9F00;
5163 .customizationmode-button[disabled="true"] {
5166 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
5167 .customizationmode-button > .button-box > .button-icon {
5171 #customization-titlebar-visibility-button {
5172 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
5173 -moz-image-region: rect(0, 16px, 16px, 0);
5176 #customization-titlebar-visibility-button:hover {
5177 -moz-image-region: rect(16px, 16px, 32px, 0);
5180 #customization-lwtheme-button,
5181 #customization-titlebar-visibility-button {
5185 #customization-titlebar-visibility-button > .button-box {
5187 padding-bottom: 1px;
5190 #customization-titlebar-visibility-button:hover:active > .button-box {
5195 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
5196 #customization-titlebar-visibility-button > .button-box > .button-text {
5197 /* Sadly, button.css thinks its margins are perfect for everyone. */
5198 margin-inline-start: 5px !important;
5201 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
5205 background-size: contain;
5208 #customization-titlebar-visibility-button > .button-box > .button-icon {
5209 vertical-align: middle;
5212 #customization-titlebar-visibility-button[checked] {
5213 -moz-image-region: rect(0, 32px, 16px, 16px);
5214 background-color: #008484;
5217 #customization-titlebar-visibility-button[checked]:hover {
5218 -moz-image-region: rect(16px, 32px, 32px, 16px);
5219 background-color: #FFCF00;
5222 #customization-titlebar-visibility-button[checked]:hover:active {
5223 background-color: #FF9F00;
5226 @media (min-resolution: 1.1dppx) {
5227 #customization-titlebar-visibility-button {
5228 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
5229 -moz-image-region: rect(0, 48px, 48px, 0);
5232 #customization-titlebar-visibility-button:hover {
5233 -moz-image-region: rect(48px, 48px, 96px, 0);
5236 #customization-titlebar-visibility-button[checked] {
5237 -moz-image-region: rect(0, 96px, 48px, 48px);
5240 #customization-titlebar-visibility-button[checked]:hover {
5241 -moz-image-region: rect(48px, 96px, 96px, 48px);
5245 #main-window[customize-entered] #customization-panel-container {
5246 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5247 background-position: left top;
5248 background-repeat: repeat;
5249 background-size: auto;
5250 background-attachment: fixed;
5253 toolbarpaletteitem[place="toolbar"] {
5254 transition: border-width 250ms ease-in-out;
5257 toolbarpaletteitem[mousedown] {
5258 outline: 1px solid #008484;
5259 cursor: -moz-grabbing;
5263 .panel-customization-placeholder,
5264 toolbarpaletteitem[place="palette"],
5265 toolbarpaletteitem[place="panel"] {
5266 transition: transform .3s ease-in-out;
5269 #customization-palette {
5270 transition: opacity .3s ease-in-out;
5274 #customization-palette[showing="true"] {
5278 toolbarpaletteitem[notransition].panel-customization-placeholder,
5279 toolbarpaletteitem[notransition][place="toolbar"],
5280 toolbarpaletteitem[notransition][place="palette"],
5281 toolbarpaletteitem[notransition][place="panel"] {
5285 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
5286 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
5287 toolbarpaletteitem > toolbaritem.panel-wide-item,
5288 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
5289 transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important;
5292 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
5293 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
5294 transform: scale(1.3);
5297 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
5298 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
5299 transform: scale(1.1);
5302 /* Override the toolkit styling for items being dragged over. */
5303 toolbarpaletteitem[place="toolbar"] {
5304 border-left-width: 0;
5305 border-right-width: 0;
5310 #customization-palette:not([hidden]) {
5311 margin-bottom: 25px;
5314 toolbarpaletteitem[place="palette"]:-moz-focusring,
5315 toolbarpaletteitem[place="panel"]:-moz-focusring,
5316 toolbarpaletteitem[place="toolbar"]:-moz-focusring {
5317 outline: 1px dotted #A09090;
5318 outline-offset: -5px;
5319 -moz-outline-radius: 2.5px;
5322 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5323 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
5324 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
5325 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
5329 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5330 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
5340 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
5341 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
5345 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
5346 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
5349 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
5350 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
5354 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
5355 -moz-box-pack: center;
5359 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
5360 margin-inline-end: 5px;
5363 #customization-palette > toolbarpaletteitem > label {
5369 #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
5370 -moz-box-orient: vertical;
5371 /* Make the panel padding uniform across all platforms due to the
5372 styling of the section headers and footer. */
5376 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5381 .customization-lwtheme-menu-theme {
5382 -moz-appearance: none;
5385 padding-inline-end: 5px;
5387 padding-inline-start: 0;
5390 .customization-lwtheme-menu-theme[defaulttheme] {
5391 list-style-image: url(chrome://browser/skin/Fxtheme-switcher-icon.png);
5394 .customization-lwtheme-menu-theme[active="true"] {
5395 background-color: #008484;
5398 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5402 .customization-lwtheme-menu-theme > .toolbarbutton-text {
5406 #customization-lwtheme-menu-header,
5407 #customization-lwtheme-menu-recommended {
5412 #customization-lwtheme-menu-header,
5413 #customization-lwtheme-menu-recommended,
5414 #customization-lwtheme-menu-footer {
5415 background-color: #A09090;
5417 margin-right: -10px;
5421 #customization-lwtheme-menu-header {
5423 border-top-right-radius: 3px;
5424 border-top-left-radius: 3px;
5427 #customization-lwtheme-menu-recommended {
5430 #customization-lwtheme-menu-footer {
5431 margin-bottom: -10px;
5432 border-bottom-right-radius: 3px;
5433 border-bottom-left-radius: 3px;
5436 .customization-lwtheme-menu-footeritem {
5437 -moz-appearance: none;
5439 background-color: #C09070;
5441 border: 1px solid transparent;
5447 .customization-lwtheme-menu-footeritem:hover {
5448 background-color: #FFCF00;
5451 .customization-lwtheme-menu-footeritem:first-child {
5454 /* === END customizeMode.inc.css === */
5456 /* === BEGIN customizeTip.inc.css === */
5458 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
5465 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
5466 border: 1px solid #9C9CFF;
5470 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
5471 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
5474 .customization-tipPanel-infoBox {
5475 margin: 20px 25px 25px;
5477 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
5478 background-repeat: no-repeat;
5481 .customization-tipPanel-content {
5487 .customization-tipPanel-em {
5492 .customization-tipPanel-contentImage {
5494 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
5502 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
5503 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
5506 .customization-tipPanel-link {
5507 -moz-appearance: none;
5508 background: transparent;
5516 .customization-tipPanel-link > .button-box > .button-text {
5517 margin: 0 !important;
5520 .customization-tipPanel-closeBox > .close-icon {
5521 -moz-appearance: none;
5523 margin-inline-end: -25px;
5526 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
5527 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5528 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
5531 /* === END customizeTip.inc.css === */
5534 * This next rule is a hack to disable subpixel anti-aliasing on all
5535 * labels during the customize mode transition. Subpixel anti-aliasing
5536 * on Windows with Direct2D layers acceleration is particularly slow to
5537 * paint, so this hack is how we sidestep that performance bottleneck.
5539 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
5540 transform: perspective(0.01px);
5543 #main-window[customize-entered] > #tab-view-deck {
5544 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5545 background-attachment: fixed;
5548 #main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
5549 background-repeat: no-repeat;
5550 background-position: right top;
5551 background-attachment: fixed;
5552 /* The image will get set from CustomizeMode.jsm */
5553 background-image: none;
5554 background-color: transparent;
5557 #main-window[customization-lwtheme]:-moz-lwtheme {
5558 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5559 background-repeat: repeat;
5560 background-attachment: fixed;
5561 background-position: left top;
5564 #main-window[customize-entered] #browser-bottombox,
5565 #main-window[customize-entered] #customization-container {
5566 border-left: 1px solid #9C9CFF;
5567 border-right: 1px solid #9C9CFF;
5568 background-clip: padding-box;
5571 #main-window[customize-entered] #browser-bottombox {
5572 border-bottom: 1px solid #9C9CFF;
5575 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5579 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5583 /* End customization mode */
5585 /* Private browsing indicators */
5588 * Currently, we have two places where we put private browsing indicators on
5589 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5590 * When tabsintitlebar is disabled, we draw the indicator at the end of the
5591 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5592 * want the bottom border of the image to line up with the bottom of the window
5593 * caption buttons. That's why there's so much special-casing going on in here.
5595 .private-browsing-indicator {
5597 pointer-events: none;
5600 #private-browsing-indicator-titlebar {
5605 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5609 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5613 #TabsToolbar > .private-browsing-indicator {
5614 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5615 margin-inline-start: 4px;
5619 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5620 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5621 * min/max/close window buttons.
5623 #private-browsing-indicator-titlebar > .private-browsing-indicator,
5624 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5625 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5626 margin-inline-end: 4px;
5632 /* This one is for Linux */
5633 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5634 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5638 /* End private browsing indicators */
5640 /* === BEGIN UITour.inc.css === */
5644 #UITourHighlightContainer {
5645 -moz-appearance: none;
5647 background-color: transparent;
5648 /* This is a buffer to compensate for the movement in the "wobble" effect */
5653 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5654 border-radius: 40px;
5655 border: 1px solid #9C9CFF;
5656 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5657 on Linux without an X compositor where opacity is either 0 or 1. */
5658 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5663 #UITourTooltipBody {
5664 margin-inline-end: 14px;
5665 margin-inline-start: 14px;
5670 #UITourTooltipIcon {
5673 margin-inline-start: 14px;
5674 margin-inline-end: 14px;
5677 #UITourTooltipTitle,
5678 #UITourTooltipDescription {
5682 #UITourTooltipTitle {
5685 margin-inline-start: 0;
5686 /* Avoid the title overlapping the close button */
5687 margin-inline-end: 14px;
5692 #UITourTooltipDescription {
5693 margin-inline-start: 0;
5694 margin-inline-end: 0;
5696 line-height: 1.8rem;
5697 margin-bottom: 0; /* Override global.css */
5700 #UITourTooltipClose {
5702 -moz-appearance: none;
5704 background-color: transparent;
5706 margin-inline-start: 4px;
5710 #UITourTooltipClose > .toolbarbutton-text {
5714 #UITourTooltipButtons {
5716 background-color: rgba(0,0,0,.2);
5717 border-top: 1px solid rgba(0,0,0,.4);
5718 margin: 10px -16px -16px;
5722 #UITourTooltipButtons > label,
5723 #UITourTooltipButtons > button {
5727 #UITourTooltipButtons > label:first-child,
5728 #UITourTooltipButtons > button:first-child {
5729 margin-inline-start: 0;
5732 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
5735 margin-inline-end: 5px;
5738 #UITourTooltipButtons > label,
5739 #UITourTooltipButtons > button .button-text {
5743 #UITourTooltipButtons > button:not(.button-link) {
5744 -moz-appearance: none;
5745 background-color: #C09070;
5746 border-radius: 3000px;
5750 transition-property: background-color, color;
5751 transition-duration: 150ms;
5754 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5755 background-color: #FFCF00;
5759 #UITourTooltipButtons > label,
5760 #UITourTooltipButtons > button.button-link {
5761 -moz-appearance: none;
5762 background: transparent;
5765 color: rgba(0,0,0,0.35);
5767 padding-right: 10px;
5770 #UITourTooltipButtons > button.button-link:hover {
5774 /* The primary button gets the same color as the customize button. */
5775 #UITourTooltipButtons > button.button-primary {
5776 background-color: #A06060; /* LCARS default button background color */
5779 padding-right: 30px;
5782 #UITourTooltipButtons > button.button-primary:not(:active):hover {
5783 background-color: #FFCF00;
5787 /* Notification overrides for Heartbeat UI */
5789 notification.heartbeat {
5790 background-color: #A09090;
5794 @keyframes pulse-onshow {
5797 transform: scale(1.0);
5801 transform: scale(1.1);
5804 transform: scale(1.0);
5807 transform: scale(1.1);
5810 transform: scale(1.0);
5814 @keyframes pulse-twice {
5816 transform: scale(1.1);
5819 transform: scale(0.8);
5822 transform: scale(1);
5826 .messageText.heartbeat {
5828 /* text-shadow: none; */
5829 margin-inline-start: 0px;
5832 .messageImage.heartbeat {
5835 margin-inline-start: 8px;
5836 margin-inline-end: 8px;
5839 .messageImage.heartbeat.pulse-onshow {
5840 animation-name: pulse-onshow;
5841 animation-duration: 1.5s;
5842 animation-iteration-count: 1;
5843 animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
5846 .messageImage.heartbeat.pulse-twice {
5847 animation-name: pulse-twice;
5848 animation-duration: 1s;
5849 animation-iteration-count: 2;
5850 animation-timing-function: linear;
5853 /* Learn More link styles */
5854 .heartbeat > .text-link {
5856 margin-inline-start: 0px;
5859 .heartbeat > .text-link:hover {
5861 text-decoration: none;
5864 .heartbeat > .text-link:hover:active {
5868 /* Heartbeat UI Rating Star Classes */
5869 .heartbeat > #star-rating-container {
5871 /* margin-bottom: 4px;*/
5874 .heartbeat > #star-rating-container > #star5 {
5875 -moz-box-ordinal-group: 5;
5878 .heartbeat > #star-rating-container > #star4 {
5879 -moz-box-ordinal-group: 4;
5882 .heartbeat > #star-rating-container > #star3 {
5883 -moz-box-ordinal-group: 3;
5886 .heartbeat > #star-rating-container > #star2 {
5887 -moz-box-ordinal-group: 2;
5890 .heartbeat > #star-rating-container > .star-x {
5891 background: url("chrome://browser/skin/heartbeat-star-off.svg");
5893 /* Overrides the margin-inline-end for all platforms defined in the .plain class */
5894 margin-inline-end: 4px !important;
5899 .heartbeat > #star-rating-container > .star-x:hover,
5900 .heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
5901 background: url("chrome://browser/skin/heartbeat-star-lit.svg");
5904 /* === END UITour.inc.css === */
5906 #UITourTooltipButtons {
5908 * Override the --panel-arrowcontent-padding so the background extends
5909 * to the sides and bottom of the panel.
5912 margin-right: -10px;
5913 margin-bottom: -10px;
5916 /* === BEGIN contextmenu.inc.css === */
5918 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
5921 #context-navigation > .menuitem-iconic {
5923 -moz-box-pack: center;
5924 -moz-box-align: center;
5927 #context-navigation > .menuitem-iconic[disabled="true"] {
5928 background-color: transparent;
5931 #context-navigation > .menuitem-iconic > .menu-iconic-left {
5932 -moz-appearance: none;
5935 #context-back > .menu-iconic-left {
5936 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back"); */
5937 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
5938 -moz-image-region: rect(0, 54px, 18px, 36px);
5941 #context-back:not([disabled="true"]):hover > .menu-iconic-left {
5942 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-active"); */
5943 -moz-image-region: rect(18px, 54px, 36px, 36px);
5946 #context-back[disabled="true"] > .menu-iconic-left {
5947 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-disabled"); */
5948 -moz-image-region: rect(36px, 54px, 54px, 36px);
5951 #context-forward > .menu-iconic-left {
5952 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward"); */
5953 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
5954 -moz-image-region: rect(0, 72px, 18px, 54px);
5957 #context-forward:not([disabled="true"]):hover > .menu-iconic-left {
5958 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-active"); */
5959 -moz-image-region: rect(18px, 72px, 36px, 54px);
5962 #context-forward[disabled="true"] > .menu-iconic-left {
5963 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-disabled"); */
5964 -moz-image-region: rect(36px, 72px, 54px, 54px);
5967 #context-reload > .menu-iconic-left {
5968 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload"); */
5969 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
5970 -moz-image-region: rect(0, 14px, 14px, 0);
5973 #context-reload:not([disabled="true"]):hover > .menu-iconic-left {
5974 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-active"); */
5975 -moz-image-region: rect(14px, 14px, 28px, 0);
5978 #context-reload[disabled="true"] > .menu-iconic-left {
5979 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-disabled"); */
5980 -moz-image-region: rect(28px, 14px, 42px, 0);
5983 #context-stop > .menu-iconic-left {
5984 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop"); */
5985 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
5986 -moz-image-region: rect(0, 28px, 14px, 14px);
5989 #context-stop:not([disabled="true"]):hover > .menu-iconic-left {
5990 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-active"); */
5991 -moz-image-region: rect(14px, 28px, 28px, 14px);
5994 #context-stop[disabled="true"] > .menu-iconic-left {
5995 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-disabled"); */
5996 -moz-image-region: rect(28px, 28px, 42px, 14px);
5999 #context-bookmarkpage > .menu-iconic-left {
6000 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark"); */
6001 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6002 -moz-image-region: rect(0, 144px, 18px, 126px);
6005 #context-bookmarkpage:not([disabled="true"]):hover > .menu-iconic-left {
6006 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-active"); */
6007 -moz-image-region: rect(18px, 144px, 36px, 126px);
6010 #context-bookmarkpage[disabled="true"] > .menu-iconic-left {
6011 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); */
6012 -moz-image-region: rect(36px, 144px, 54px, 126px);
6015 #context-bookmarkpage[starred=true] {
6016 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); */
6017 -moz-image-region: rect(0px, 162px, 18px, 144px);
6020 #context-bookmarkpage[starred=true][_moz-menuactive=true] {
6021 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); */
6022 -moz-image-region: rect(18px, 162px, 36px, 144px);
6025 #context-bookmarkpage[starred=true][disabled=true] {
6026 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); */
6027 -moz-image-region: rect(36px, 162px, 54px, 144px);
6030 #context-back:-moz-locale-dir(rtl),
6031 #context-forward:-moz-locale-dir(rtl),
6032 #context-reload:-moz-locale-dir(rtl) {
6033 transform: scaleX(-1);
6036 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
6037 width: 18px; /*16px;*/
6038 height: 18px; /*16px;*/
6042 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
6043 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
6049 #context-media-eme-learnmore {
6050 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
6053 #context-media-eme-learnmore {
6054 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
6057 /* === END contextmenu.inc.css === */
6059 #context-navigation {
6062 #context-sep-navigation {
6063 /* margin-top: -4px; */
6066 .browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {