forked from mirrors/gecko-dev
d12b5147a1
This is how we load styles for other components like downloads, and lets us remove the dependancy on XBL <resources>. MozReview-Commit-ID: DWIyUhx9Nkh --HG-- extra : rebase_source : ca0dc1a799b0c133fb33cac675e4a8772b3e8df5
1457 lines
40 KiB
CSS
1457 lines
40 KiB
CSS
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
|
|
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
|
|
@namespace html url("http://www.w3.org/1999/xhtml");
|
|
|
|
:root {
|
|
--panelui-subview-transition-duration: 150ms;
|
|
--lwt-additional-images: none;
|
|
--lwt-background-alignment: right top;
|
|
--lwt-background-tiling: no-repeat;
|
|
}
|
|
|
|
:root:-moz-lwtheme {
|
|
color: var(--lwt-text-color) !important;
|
|
}
|
|
|
|
:root:-moz-lwtheme {
|
|
background-color: var(--lwt-accent-color) !important;
|
|
background-image: var(--lwt-additional-images) !important;
|
|
background-position: var(--lwt-background-alignment) !important;
|
|
background-repeat: var(--lwt-background-tiling) !important;
|
|
}
|
|
|
|
:root:-moz-lwtheme[lwtheme-image] {
|
|
background-image: var(--lwt-header-image), var(--lwt-additional-images) !important;
|
|
}
|
|
|
|
:root:-moz-lwtheme:-moz-window-inactive {
|
|
background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)) !important;
|
|
}
|
|
|
|
#main-window:not([chromehidden~="toolbar"]) {
|
|
%ifdef XP_MACOSX
|
|
min-width: 335px;
|
|
%else
|
|
min-width: 300px;
|
|
%endif
|
|
}
|
|
|
|
#main-window[customize-entered] {
|
|
min-width: -moz-fit-content;
|
|
}
|
|
|
|
searchbar {
|
|
-moz-binding: url("chrome://browser/content/search/search.xml#searchbar");
|
|
}
|
|
|
|
.searchbar-textbox {
|
|
-moz-binding: url("chrome://browser/content/search/search.xml#searchbar-textbox");
|
|
}
|
|
|
|
.search-one-offs {
|
|
-moz-binding: url("chrome://browser/content/search/search.xml#search-one-offs");
|
|
}
|
|
|
|
.search-setting-button[compact=true],
|
|
.search-setting-button-compact:not([compact=true]) {
|
|
display: none;
|
|
}
|
|
|
|
/* Prevent shrinking the page content to 0 height and width */
|
|
.browserStack > browser {
|
|
min-height: 25px;
|
|
min-width: 25px;
|
|
}
|
|
|
|
.browserStack > browser {
|
|
-moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-browser");
|
|
}
|
|
|
|
.browserStack > browser[remote="true"] {
|
|
-moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-remote-browser");
|
|
}
|
|
|
|
toolbar[customizable="true"] {
|
|
-moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
|
|
}
|
|
|
|
%ifdef XP_MACOSX
|
|
#toolbar-menubar {
|
|
-moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-menubar-stub");
|
|
}
|
|
%endif
|
|
|
|
#toolbar-menubar[autohide="true"] {
|
|
-moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-menubar-autohide");
|
|
}
|
|
|
|
panelmultiview {
|
|
-moz-box-align: start;
|
|
}
|
|
|
|
panelmultiview[transitioning] {
|
|
pointer-events: none;
|
|
}
|
|
|
|
panelview {
|
|
-moz-box-orient: vertical;
|
|
}
|
|
|
|
panelview:not([visible]) {
|
|
visibility: collapse;
|
|
}
|
|
|
|
/* Hide the header when a subview is reused as a main view. */
|
|
panelview[mainview] > .panel-header {
|
|
display: none;
|
|
}
|
|
|
|
.panel-viewcontainer {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.panel-viewcontainer[panelopen] {
|
|
transition-property: height;
|
|
transition-timing-function: var(--animation-easing-function);
|
|
transition-duration: var(--panelui-subview-transition-duration);
|
|
will-change: height;
|
|
}
|
|
|
|
.panel-viewcontainer.offscreen {
|
|
position: absolute;
|
|
}
|
|
|
|
.panel-viewstack {
|
|
overflow: visible;
|
|
transition: height var(--panelui-subview-transition-duration);
|
|
}
|
|
|
|
#tabbrowser-tabs {
|
|
-moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-tabs");
|
|
}
|
|
|
|
@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
|
|
#tabbrowser-tabs {
|
|
/* Without this, the tabs container width extends beyond the window width */
|
|
width: 0;
|
|
}
|
|
.tab-stack {
|
|
/* Without this, pinned tabs get a bit too tall when the tabstrip overflows. */
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
|
|
|
|
#tabbrowser-tabs:not([overflow="true"]):not([hashiddentabs]) ~ #alltabs-button,
|
|
#tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow="true"]) ~ #new-tab-button,
|
|
#tabbrowser-tabs[overflow="true"] > .tabbrowser-arrowscrollbox > .tabs-newtab-button,
|
|
#tabbrowser-tabs:not([hasadjacentnewtabbutton]) > .tabbrowser-arrowscrollbox > .tabs-newtab-button,
|
|
#TabsToolbar[customizing="true"] > #tabbrowser-tabs > .tabbrowser-arrowscrollbox > .tabs-newtab-button {
|
|
visibility: collapse;
|
|
}
|
|
|
|
#tabbrowser-tabs:not([overflow="true"])[using-closing-tabs-spacer] ~ #alltabs-button {
|
|
visibility: hidden; /* temporary space to keep a tab's close button under the cursor */
|
|
}
|
|
|
|
.tabbrowser-tab {
|
|
-moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-tab");
|
|
}
|
|
|
|
.tabbrowser-tab:not([pinned]) {
|
|
-moz-box-flex: 100;
|
|
max-width: 225px;
|
|
min-width: var(--tab-min-width);
|
|
width: 0;
|
|
transition: min-width 100ms ease-out,
|
|
max-width 100ms ease-out;
|
|
}
|
|
|
|
:root[uidensity=touch] .tabbrowser-tab:not([pinned]) {
|
|
/* Touch mode needs additional space for the close button. */
|
|
min-width: calc(var(--tab-min-width) + 10px);
|
|
}
|
|
|
|
.tabbrowser-tab:not([pinned]):not([fadein]) {
|
|
max-width: 0.1px;
|
|
min-width: 0.1px;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.tab-icon-image[fadein],
|
|
.tab-close-button[fadein],
|
|
.tabbrowser-tab[fadein]::after,
|
|
.tab-background[fadein] {
|
|
/* This transition is only wanted for opening tabs. */
|
|
transition: visibility 0ms 25ms;
|
|
}
|
|
|
|
.tab-icon-image:not([fadein]),
|
|
.tab-close-button:not([fadein]),
|
|
.tabbrowser-tab:not([fadein])::after,
|
|
.tab-background:not([fadein]) {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.tab-label:not([fadein]),
|
|
.tab-throbber:not([fadein]),
|
|
.tab-throbber-fallback:not([fadein]) {
|
|
display: none;
|
|
}
|
|
|
|
%ifdef NIGHTLY_BUILD
|
|
@supports -moz-bool-pref("browser.tabs.hideThrobber") {
|
|
.tab-throbber,
|
|
.tab-throbber-fallback {
|
|
display: none;
|
|
}
|
|
}
|
|
%endif
|
|
|
|
#tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
|
|
position: fixed !important;
|
|
display: block; /* position:fixed already does this (bug 579776), but let's be explicit */
|
|
}
|
|
|
|
#tabbrowser-tabs[movingtab] > .tabbrowser-tab[selected] {
|
|
position: relative;
|
|
z-index: 2;
|
|
pointer-events: none; /* avoid blocking dragover events on scroll buttons */
|
|
}
|
|
|
|
.tabbrowser-tab[tabdrop-samewindow],
|
|
#tabbrowser-tabs[movingtab] > .tabbrowser-tab[fadein]:not([selected]) {
|
|
transition: transform 200ms var(--animation-easing-function);
|
|
}
|
|
|
|
/* The next 3 rules allow dragging tabs slightly outside of the tabstrip
|
|
* to make it easier to drag tabs. */
|
|
#TabsToolbar[movingtab] {
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
#TabsToolbar[movingtab] > #tabbrowser-tabs {
|
|
padding-bottom: 15px;
|
|
margin-bottom: -15px;
|
|
}
|
|
|
|
#TabsToolbar[movingtab] + #nav-bar {
|
|
margin-top: -15px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Allow dropping a tab on buttons with associated drop actions. */
|
|
#TabsToolbar[movingtab] + #nav-bar > #nav-bar-customization-target > #personal-bookmarks,
|
|
#TabsToolbar[movingtab] + #nav-bar > #nav-bar-customization-target > #home-button,
|
|
#TabsToolbar[movingtab] + #nav-bar > #nav-bar-customization-target > #downloads-button,
|
|
#TabsToolbar[movingtab] + #nav-bar > #nav-bar-customization-target > #bookmarks-menu-button {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.new-tab-popup,
|
|
#alltabs-popup {
|
|
-moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-alltabs-popup");
|
|
}
|
|
|
|
toolbar[printpreview="true"] {
|
|
-moz-binding: url("chrome://global/content/printPreviewBindings.xml#printpreviewtoolbar");
|
|
}
|
|
|
|
toolbar[overflowable] > .customization-target {
|
|
overflow: hidden;
|
|
}
|
|
|
|
toolbar:not([overflowing]) > .overflow-button,
|
|
toolbar[customizing] > .overflow-button {
|
|
display: none;
|
|
}
|
|
|
|
window:not([chromehidden~="toolbar"]) #nav-bar[nonemptyoverflow] > .overflow-button,
|
|
#nav-bar[customizing] > .overflow-button {
|
|
display: -moz-box;
|
|
}
|
|
|
|
/* The ids are ugly, but this should be reasonably performant, and
|
|
* using a tagname as the last item would be less so.
|
|
*/
|
|
#widget-overflow-list:empty + #widget-overflow-fixed-separator,
|
|
#widget-overflow:not([hasfixeditems]) #widget-overflow-fixed-separator {
|
|
display: none;
|
|
}
|
|
|
|
|
|
%ifdef MENUBAR_CAN_AUTOHIDE
|
|
#toolbar-menubar:not([autohide=true]) + #TabsToolbar > .titlebar-placeholder,
|
|
%endif
|
|
%ifndef MOZ_WIDGET_COCOA
|
|
#main-window:not([sizemode=normal]) .titlebar-placeholder[type="pre-tabs"],
|
|
%endif
|
|
#main-window:not([chromemargin]) > #titlebar,
|
|
#main-window[inFullscreen] > #titlebar,
|
|
#main-window[inFullscreen] .titlebar-placeholder,
|
|
#main-window:not([tabsintitlebar]) .titlebar-placeholder {
|
|
display: none;
|
|
}
|
|
|
|
#titlebar {
|
|
-moz-window-dragging: drag;
|
|
}
|
|
|
|
#titlebar-spacer {
|
|
pointer-events: none;
|
|
}
|
|
|
|
#main-window[tabsintitlebar] #titlebar-buttonbox {
|
|
position: relative;
|
|
}
|
|
|
|
#titlebar-buttonbox {
|
|
-moz-appearance: -moz-window-button-box;
|
|
}
|
|
|
|
#personal-bookmarks {
|
|
-moz-window-dragging: inherit;
|
|
}
|
|
|
|
toolbarpaletteitem {
|
|
-moz-window-dragging: no-drag;
|
|
}
|
|
|
|
%ifdef XP_MACOSX
|
|
#titlebar-fullscreen-button {
|
|
-moz-appearance: -moz-mac-fullscreen-button;
|
|
}
|
|
|
|
/* Fullscreen and caption buttons don't move with RTL on OS X so override the automatic ordering. */
|
|
#titlebar-secondary-buttonbox:-moz-locale-dir(ltr),
|
|
#titlebar-buttonbox-container:-moz-locale-dir(rtl),
|
|
.titlebar-placeholder[type="fullscreen-button"]:-moz-locale-dir(ltr),
|
|
.titlebar-placeholder[type="caption-buttons"]:-moz-locale-dir(rtl) {
|
|
-moz-box-ordinal-group: 1000;
|
|
}
|
|
|
|
#titlebar-secondary-buttonbox:-moz-locale-dir(rtl),
|
|
#titlebar-buttonbox-container:-moz-locale-dir(ltr),
|
|
.titlebar-placeholder[type="caption-buttons"]:-moz-locale-dir(ltr),
|
|
.titlebar-placeholder[type="fullscreen-button"]:-moz-locale-dir(rtl) {
|
|
-moz-box-ordinal-group: 0;
|
|
}
|
|
%endif
|
|
|
|
%ifdef XP_WIN
|
|
#main-window[sizemode="maximized"] #titlebar-buttonbox {
|
|
-moz-appearance: -moz-window-button-box-maximized;
|
|
}
|
|
|
|
#main-window[tabletmode] #titlebar-min,
|
|
#main-window[tabletmode] #titlebar-max {
|
|
display: none !important;
|
|
}
|
|
%endif
|
|
|
|
#main-window[inFullscreen][inDOMFullscreen] #navigator-toolbox,
|
|
#main-window[inFullscreen][inDOMFullscreen] #fullscr-toggler,
|
|
#main-window[inFullscreen][inDOMFullscreen] #sidebar-box,
|
|
#main-window[inFullscreen][inDOMFullscreen] #sidebar-splitter,
|
|
#main-window[inFullscreen][inDOMFullscreen] #developer-toolbar,
|
|
#main-window[inFullscreen]:not([OSXLionFullscreen]) toolbar:not([fullscreentoolbar=true]),
|
|
#main-window[inFullscreen] #global-notificationbox,
|
|
#main-window[inFullscreen] #high-priority-global-notificationbox {
|
|
visibility: collapse;
|
|
}
|
|
|
|
#navigator-toolbox[fullscreenShouldAnimate] {
|
|
transition: 1.5s margin-top ease-out;
|
|
}
|
|
|
|
/* Rules to help integrate WebExtension buttons */
|
|
|
|
.webextension-browser-action > .toolbarbutton-badge-stack > .toolbarbutton-icon {
|
|
height: 16px;
|
|
width: 16px;
|
|
}
|
|
|
|
@media not all and (min-resolution: 1.1dppx) {
|
|
.webextension-browser-action {
|
|
list-style-image: var(--webextension-toolbar-image, inherit);
|
|
}
|
|
|
|
.webextension-browser-action:-moz-lwtheme-brighttext {
|
|
list-style-image: var(--webextension-toolbar-image-light, inherit);
|
|
}
|
|
|
|
.webextension-browser-action:-moz-lwtheme-darktext {
|
|
list-style-image: var(--webextension-toolbar-image-dark, inherit);
|
|
}
|
|
|
|
.webextension-browser-action[cui-areatype="menu-panel"],
|
|
toolbarpaletteitem[place="palette"] > .webextension-browser-action {
|
|
list-style-image: var(--webextension-menupanel-image, inherit);
|
|
}
|
|
|
|
toolbarpaletteitem[place="palette"] > .webextension-browser-action:-moz-lwtheme-brighttext {
|
|
list-style-image: var(--webextension-menupanel-image-light, inherit);
|
|
}
|
|
|
|
.webextension-browser-action[cui-areatype="menu-panel"]:-moz-lwtheme-darktext,
|
|
toolbarpaletteitem[place="palette"] > .webextension-browser-action:-moz-lwtheme-darktext {
|
|
list-style-image: var(--webextension-menupanel-image-dark, inherit);
|
|
}
|
|
|
|
.webextension-menuitem {
|
|
list-style-image: var(--webextension-menuitem-image, inherit) !important;
|
|
}
|
|
}
|
|
|
|
@media (min-resolution: 1.1dppx) {
|
|
.webextension-browser-action {
|
|
list-style-image: var(--webextension-toolbar-image-2x, inherit);
|
|
}
|
|
|
|
.webextension-browser-action:-moz-lwtheme-brighttext {
|
|
list-style-image: var(--webextension-toolbar-image-2x-light, inherit);
|
|
}
|
|
|
|
.webextension-browser-action:-moz-lwtheme-darktext {
|
|
list-style-image: var(--webextension-toolbar-image-2x-dark, inherit);
|
|
}
|
|
|
|
.webextension-browser-action[cui-areatype="menu-panel"],
|
|
toolbarpaletteitem[place="palette"] > .webextension-browser-action {
|
|
list-style-image: var(--webextension-menupanel-image-2x, inherit);
|
|
}
|
|
|
|
toolbarpaletteitem[place="palette"] > .webextension-browser-action:-moz-lwtheme-brighttext {
|
|
list-style-image: var(--webextension-menupanel-image-2x-light, inherit);
|
|
}
|
|
|
|
.webextension-browser-action[cui-areatype="menu-panel"]:-moz-lwtheme-darktext,
|
|
toolbarpaletteitem[place="palette"] > .webextension-browser-action:-moz-lwtheme-darktext {
|
|
list-style-image: var(--webextension-menupanel-image-2x-dark, inherit);
|
|
}
|
|
|
|
.webextension-menuitem {
|
|
list-style-image: var(--webextension-menuitem-image-2x, inherit) !important;
|
|
}
|
|
}
|
|
|
|
toolbarbutton.webextension-menuitem > .toolbarbutton-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
toolbarpaletteitem[removable="false"] {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
%ifndef XP_MACOSX
|
|
toolbarpaletteitem[place="palette"],
|
|
toolbarpaletteitem[place="menu-panel"],
|
|
toolbarpaletteitem[place="toolbar"] {
|
|
-moz-user-focus: normal;
|
|
}
|
|
%endif
|
|
|
|
#bookmarks-toolbar-placeholder,
|
|
#bookmarks-toolbar-button,
|
|
toolbarpaletteitem > #personal-bookmarks > #PlacesToolbar,
|
|
#personal-bookmarks:-moz-any([overflowedItem=true], [cui-areatype="menu-panel"]) > #PlacesToolbar {
|
|
display: none;
|
|
}
|
|
|
|
toolbarpaletteitem[place="toolbar"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
|
|
toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-button,
|
|
#personal-bookmarks:-moz-any([overflowedItem=true], [cui-areatype="menu-panel"]) > #bookmarks-toolbar-button {
|
|
display: -moz-box;
|
|
}
|
|
|
|
#personal-bookmarks {
|
|
position: relative;
|
|
}
|
|
|
|
#PlacesToolbarDropIndicatorHolder {
|
|
position: absolute;
|
|
}
|
|
|
|
#nav-bar-customization-target > #personal-bookmarks,
|
|
toolbar:not(#TabsToolbar) > #wrapper-personal-bookmarks,
|
|
toolbar:not(#TabsToolbar) > #personal-bookmarks {
|
|
-moz-box-flex: 1;
|
|
}
|
|
|
|
#zoom-controls[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zoom-reset-button > .toolbarbutton-text {
|
|
display: -moz-box;
|
|
}
|
|
|
|
#reload-button:not([displaystop]) + #stop-button,
|
|
#reload-button[displaystop] {
|
|
display: none;
|
|
}
|
|
|
|
/* The reload-button is only disabled temporarily when it becomes visible
|
|
to prevent users from accidentally clicking it. We don't however need
|
|
to show this disabled state, as the flicker that it generates is short
|
|
enough to be visible but not long enough to explain anything to users. */
|
|
#reload-button[disabled]:not(:-moz-window-inactive) > .toolbarbutton-icon {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* Ensure stop-button and reload-button are displayed correctly when in the overflow menu */
|
|
.widget-overflow-list > #stop-reload-button > .toolbarbutton-1 {
|
|
-moz-box-flex: 1;
|
|
}
|
|
|
|
#PanelUI-feeds > .feed-toolbarbutton:-moz-locale-dir(rtl) {
|
|
direction: rtl;
|
|
}
|
|
|
|
#appMenu_historyMenu > .bookmark-item,
|
|
#appMenu-library-recentlyClosedTabs > .panel-subview-body > .bookmark-item,
|
|
#appMenu-library-recentlyClosedWindows > .panel-subview-body > .bookmark-item,
|
|
#appMenu-library-recentHighlights > .bookmark-item,
|
|
#panelMenu_bookmarksMenu > .bookmark-item {
|
|
max-width: none;
|
|
}
|
|
|
|
#main-window:-moz-lwtheme {
|
|
background-repeat: no-repeat;
|
|
background-position: top right;
|
|
}
|
|
|
|
%ifdef XP_MACOSX
|
|
#main-window[inFullscreen="true"] {
|
|
padding-top: 0; /* override drawintitlebar="true" */
|
|
}
|
|
%endif
|
|
|
|
:root[lwthemefooter=true] #browser-bottombox:-moz-lwtheme {
|
|
background-repeat: no-repeat;
|
|
background-position: bottom left;
|
|
background-color: var(--lwt-accent-color);
|
|
background-image: var(--lwt-footer-image);
|
|
}
|
|
|
|
/* Hide menu elements intended for keyboard access support */
|
|
#main-menubar[openedwithkey=false] .show-only-for-keyboard {
|
|
display: none;
|
|
}
|
|
|
|
/* ::::: location bar & search bar ::::: */
|
|
|
|
/* url bar min-width is defined further down, together with the maximum size
|
|
* of the identity icon block, for different window sizes.
|
|
*/
|
|
#search-container {
|
|
min-width: 25ch;
|
|
}
|
|
|
|
#urlbar,
|
|
.searchbar-textbox {
|
|
/* Setting a width and min-width to let the location & search bars maintain
|
|
a constant width in case they haven't be resized manually. (bug 965772) */
|
|
width: 1px;
|
|
min-width: 1px;
|
|
}
|
|
|
|
#urlbar {
|
|
-moz-binding: url(chrome://browser/content/urlbarBindings.xml#urlbar);
|
|
}
|
|
|
|
/* Display URLs left-to-right but right aligned in RTL mode. */
|
|
html|input.urlbar-input:-moz-locale-dir(rtl) {
|
|
direction: ltr !important;
|
|
text-align: right !important;
|
|
}
|
|
|
|
/* Make sure that the location bar's alignment in RTL mode changes according
|
|
to the input box direction if the user switches the text direction using
|
|
cmd_switchTextDirection (which applies a dir attribute to the <input>). */
|
|
html|input.urlbar-input[dir=ltr]:-moz-locale-dir(rtl) {
|
|
text-align: left !important;
|
|
}
|
|
|
|
/*
|
|
* Display visual cue that browser is under remote control by Marionette.
|
|
* This is to help users visually distinguish a user agent session that
|
|
* is under remote control from those used for normal browsing sessions.
|
|
*
|
|
* Attribute is controlled by browser.js:/gRemoteControl.
|
|
*/
|
|
#main-window[remotecontrol] #urlbar {
|
|
background: repeating-linear-gradient(
|
|
-45deg,
|
|
transparent,
|
|
transparent 25px,
|
|
rgba(255,255,255,.3) 25px,
|
|
rgba(255,255,255,.3) 50px);
|
|
background-color: rgba(255,170,68,.8);
|
|
color: black;
|
|
}
|
|
#main-window[remotecontrol] #urlbar #identity-box {
|
|
background: white;
|
|
}
|
|
|
|
/* Fade out URL on overflow */
|
|
html|input.urlbar-input[textoverflow]:not([focused]) {
|
|
/* Don't need to worry about RTL here since we use direction:ltr for the
|
|
input field. */
|
|
mask-image: linear-gradient(to left, transparent, black 3em);
|
|
}
|
|
|
|
/* Apply crisp rendering for favicons at exactly 2dppx resolution */
|
|
@media (resolution: 2dppx) {
|
|
.searchbar-engine-image {
|
|
image-rendering: -moz-crisp-edges;
|
|
}
|
|
}
|
|
|
|
/* Always show URLs LTR. */
|
|
.ac-url-text:-moz-locale-dir(rtl),
|
|
.ac-title-text[lookslikeurl]:-moz-locale-dir(rtl) {
|
|
direction: ltr !important;
|
|
}
|
|
|
|
/* Never show a scrollbar for the Location Bar popup. This overrides the
|
|
richlistbox inline overflow: auto style.*/
|
|
#PopupAutoCompleteRichResult > richlistbox > scrollbox {
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
/* For non-action items, hide the action text; for action items, hide the URL
|
|
text. Don't show the separator for keyword results. */
|
|
#PopupAutoCompleteRichResult > richlistbox > richlistitem > .ac-type-icon,
|
|
#PopupAutoCompleteRichResult > richlistbox > richlistitem > .ac-site-icon,
|
|
#PopupAutoCompleteRichResult > richlistbox > richlistitem > .ac-tags:not([empty]),
|
|
#PopupAutoCompleteRichResult > richlistbox > richlistitem > .ac-separator:not([type=keyword]),
|
|
#PopupAutoCompleteRichResult > richlistbox > richlistitem > .ac-url:not([actiontype]),
|
|
#PopupAutoCompleteRichResult > richlistbox > richlistitem > .ac-action[actiontype],
|
|
#PopupAutoCompleteRichResult > richlistbox > richlistitem[selected] > .ac-url[actiontype=remotetab],
|
|
#PopupAutoCompleteRichResult > richlistbox > richlistitem:hover > .ac-url[actiontype=remotetab]
|
|
{
|
|
display: -moz-box;
|
|
}
|
|
|
|
#PopupAutoCompleteRichResult > richlistbox > richlistitem[selected] > .ac-action[actiontype=remotetab],
|
|
#PopupAutoCompleteRichResult > richlistbox > richlistitem:hover > .ac-action[actiontype=remotetab] {
|
|
display: none;
|
|
}
|
|
|
|
/* Only show the "Search with" label on hover or selection. */
|
|
#PopupAutoCompleteRichResult > richlistbox > richlistitem:not([selected]):not(:hover) > .ac-action[actiontype=searchengine],
|
|
#PopupAutoCompleteRichResult > richlistbox > richlistitem:not([selected]):not(:hover) > .ac-separator[actiontype=searchengine] {
|
|
display: none;
|
|
}
|
|
|
|
#PopupAutoCompleteRichResult > richlistbox > richlistitem > .ac-site-icon {
|
|
margin-inline-start: 0;
|
|
}
|
|
|
|
/* For action items in a noactions popup, show the URL text and hide the action
|
|
text and type icon. */
|
|
#PopupAutoCompleteRichResult[noactions] > richlistbox > richlistitem.overridable-action > .ac-url {
|
|
display: -moz-box;
|
|
}
|
|
#PopupAutoCompleteRichResult[noactions] > richlistbox > richlistitem.overridable-action > .ac-action {
|
|
display: none;
|
|
}
|
|
#PopupAutoCompleteRichResult[noactions] > richlistbox > richlistitem.overridable-action > .ac-type-icon {
|
|
list-style-image: none;
|
|
}
|
|
|
|
#urlbar:not([actiontype="switchtab"]):not([actiontype="extension"]) > #urlbar-display-box,
|
|
#urlbar:not([actiontype="switchtab"]) > #urlbar-display-box > #switchtab,
|
|
#urlbar:not([actiontype="extension"]) > #urlbar-display-box > #extension {
|
|
display: none;
|
|
}
|
|
|
|
#PopupAutoComplete[firstresultstyle="insecureWarning"] {
|
|
min-width: 200px;
|
|
}
|
|
|
|
#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] {
|
|
-moz-binding: url("chrome://global/content/bindings/autocomplete.xml#autocomplete-richlistitem-insecure-field");
|
|
height: auto;
|
|
}
|
|
|
|
#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon {
|
|
margin-inline-start: 0;
|
|
display: initial;
|
|
}
|
|
|
|
#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title > .ac-text-overflow-container > .ac-title-text {
|
|
text-overflow: initial;
|
|
white-space: initial;
|
|
}
|
|
|
|
#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title > label {
|
|
margin-inline-start: 0;
|
|
}
|
|
|
|
#PopupSearchAutoComplete {
|
|
-moz-binding: url("chrome://browser/content/search/search.xml#browser-search-autocomplete-result-popup");
|
|
}
|
|
|
|
#PopupAutoCompleteRichResult {
|
|
-moz-binding: url("chrome://browser/content/urlbarBindings.xml#urlbar-rich-result-popup");
|
|
}
|
|
|
|
#PopupAutoCompleteRichResult.showSearchSuggestionsNotification {
|
|
transition: height 100ms;
|
|
}
|
|
|
|
#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] {
|
|
display: none;
|
|
transition: margin-top 100ms;
|
|
}
|
|
|
|
#PopupAutoCompleteRichResult.showSearchSuggestionsNotification > deck[anonid="search-suggestions-notification"] {
|
|
display: -moz-deck;
|
|
}
|
|
|
|
#PopupAutoCompleteRichResult > richlistbox {
|
|
transition: height 100ms;
|
|
}
|
|
|
|
#PopupAutoCompleteRichResult.showSearchSuggestionsNotification > richlistbox {
|
|
transition: none;
|
|
}
|
|
|
|
#DateTimePickerPanel[active="true"] {
|
|
-moz-binding: url("chrome://global/content/bindings/datetimepopup.xml#datetime-popup");
|
|
}
|
|
|
|
#urlbar[pageproxystate=invalid] > #page-action-buttons > .urlbar-page-action,
|
|
#identity-box.chromeUI ~ #page-action-buttons > .urlbar-page-action:not(#star-button-box),
|
|
.urlbar-history-dropmarker[usertyping],
|
|
.urlbar-go-button:not([usertyping]),
|
|
.urlbar-go-button:not([parentfocused="true"]),
|
|
#urlbar[pageproxystate="invalid"] > #identity-box > #blocked-permissions-container,
|
|
#urlbar[pageproxystate="invalid"] > #identity-box > #notification-popup-box,
|
|
#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon-labels {
|
|
display: none;
|
|
}
|
|
|
|
#identity-box {
|
|
-moz-user-focus: normal;
|
|
}
|
|
|
|
#urlbar[pageproxystate="invalid"] > #identity-box {
|
|
pointer-events: none;
|
|
-moz-user-focus: ignore;
|
|
}
|
|
|
|
|
|
/* We leave 49ch plus whatever space the download button will need when it
|
|
* appears. Normally this should be 16px for the icon, plus 2 * 2px padding
|
|
* plus the toolbarbutton-inner-padding. We're adding 4px to ensure things
|
|
* like rounding on hidpi don't accidentally result in the button going
|
|
* into overflow.
|
|
*/
|
|
#urlbar-container {
|
|
min-width: calc(49ch + 24px + 2 * var(--toolbarbutton-inner-padding));
|
|
}
|
|
|
|
#nav-bar[downloadsbuttonshown] #urlbar-container {
|
|
min-width: 49ch;
|
|
}
|
|
|
|
#identity-icon-labels {
|
|
max-width: 17em;
|
|
}
|
|
@media (max-width: 700px) {
|
|
#urlbar-container {
|
|
min-width: calc(44ch + 24px + 2 * var(--toolbarbutton-inner-padding));
|
|
}
|
|
#nav-bar[downloadsbuttonshown] #urlbar-container {
|
|
min-width: 44ch;
|
|
}
|
|
|
|
#identity-icon-labels {
|
|
max-width: 60px;
|
|
}
|
|
}
|
|
@media (max-width: 600px) {
|
|
#urlbar-container {
|
|
min-width: calc(39ch + 24px + 2 * var(--toolbarbutton-inner-padding));
|
|
}
|
|
#nav-bar[downloadsbuttonshown] #urlbar-container {
|
|
min-width: 39ch;
|
|
}
|
|
#identity-icon-labels {
|
|
max-width: 50px;
|
|
}
|
|
}
|
|
@media (max-width: 500px) {
|
|
#urlbar-container {
|
|
min-width: calc(34ch + 24px + 2 * var(--toolbarbutton-inner-padding));
|
|
}
|
|
#nav-bar[downloadsbuttonshown] #urlbar-container {
|
|
min-width: 34ch;
|
|
}
|
|
#identity-icon-labels {
|
|
max-width: 40px;
|
|
}
|
|
}
|
|
@media (max-width: 400px) {
|
|
#urlbar-container {
|
|
min-width: calc(27ch + 24px + 2 * var(--toolbarbutton-inner-padding));
|
|
}
|
|
#nav-bar[downloadsbuttonshown] #urlbar-container {
|
|
min-width: 27ch;
|
|
}
|
|
#identity-icon-labels {
|
|
max-width: 30px;
|
|
}
|
|
}
|
|
|
|
#identity-icon-country-label {
|
|
direction: ltr;
|
|
}
|
|
|
|
#identity-box.verifiedIdentity > #identity-icon-labels > #identity-icon-label {
|
|
margin-inline-end: 0.25em !important;
|
|
}
|
|
|
|
/* Flexible spacer sizing (matching url bar) */
|
|
toolbarpaletteitem[place=toolbar][id^=wrapper-customizableui-special-spring],
|
|
toolbarspring {
|
|
-moz-box-flex: 1;
|
|
min-width: 28px;
|
|
max-width: 112px;
|
|
}
|
|
|
|
#nav-bar toolbarpaletteitem[id^=wrapper-customizableui-special-spring],
|
|
#nav-bar toolbarspring {
|
|
-moz-box-flex: 80;
|
|
}
|
|
|
|
#widget-overflow-list > toolbarspring {
|
|
display: none;
|
|
}
|
|
|
|
/* ::::: Unified Back-/Forward Button ::::: */
|
|
.unified-nav-current {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.bookmark-item > label {
|
|
/* ensure we use the direction of the bookmarks label instead of the
|
|
* browser locale */
|
|
unicode-bidi: plaintext;
|
|
}
|
|
|
|
/* Apply crisp rendering for favicons at exactly 2dppx resolution */
|
|
@media (resolution: 2dppx) {
|
|
#alltabs-popup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon,
|
|
.menuitem-with-favicon > .menu-iconic-left > .menu-iconic-icon {
|
|
image-rendering: -moz-crisp-edges;
|
|
}
|
|
|
|
.bookmark-item > .toolbarbutton-icon,
|
|
.bookmark-item > .menu-iconic-left > .menu-iconic-icon {
|
|
image-rendering: -moz-crisp-edges;
|
|
}
|
|
/* Synced Tabs sidebar */
|
|
html|*.tabs-container html|*.item-tabs-list html|*.item-icon-container {
|
|
image-rendering: -moz-crisp-edges;
|
|
}
|
|
}
|
|
|
|
#editBMPanel_tagsSelector {
|
|
/* override default listbox width from xul.css */
|
|
width: auto;
|
|
}
|
|
|
|
menupopup[emptyplacesresult="true"] > .hide-if-empty-places-result {
|
|
display: none;
|
|
}
|
|
menuitem.spell-suggestion {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Hide extension toolbars that neglected to set the proper class */
|
|
window[chromehidden~="location"][chromehidden~="toolbar"] toolbar:not(.chromeclass-menubar),
|
|
window[chromehidden~="toolbar"] toolbar:not(#nav-bar):not(#TabsToolbar):not(#print-preview-toolbar):not(.chromeclass-menubar) {
|
|
display: none;
|
|
}
|
|
|
|
#navigator-toolbox ,
|
|
#mainPopupSet {
|
|
min-width: 1px;
|
|
}
|
|
|
|
/* History Swipe Animation */
|
|
|
|
#historySwipeAnimationContainer {
|
|
overflow: hidden;
|
|
}
|
|
|
|
#historySwipeAnimationPreviousPage,
|
|
#historySwipeAnimationCurrentPage,
|
|
#historySwipeAnimationNextPage {
|
|
background: none top left no-repeat white;
|
|
}
|
|
|
|
#historySwipeAnimationPreviousPage {
|
|
background-image: -moz-element(#historySwipeAnimationPreviousPageSnapshot);
|
|
}
|
|
|
|
#historySwipeAnimationCurrentPage {
|
|
background-image: -moz-element(#historySwipeAnimationCurrentPageSnapshot);
|
|
}
|
|
|
|
#historySwipeAnimationNextPage {
|
|
background-image: -moz-element(#historySwipeAnimationNextPageSnapshot);
|
|
}
|
|
|
|
/* Full Screen UI */
|
|
|
|
#fullscr-toggler {
|
|
height: 1px;
|
|
background: black;
|
|
}
|
|
|
|
html|*.pointerlockfswarning {
|
|
position: fixed;
|
|
z-index: 2147483647 !important;
|
|
visibility: visible;
|
|
transition: transform 300ms ease-in;
|
|
/* To center the warning box horizontally,
|
|
we use left: 50% with translateX(-50%). */
|
|
top: 0; left: 50%;
|
|
transform: translate(-50%, -100%);
|
|
box-sizing: border-box;
|
|
width: -moz-max-content;
|
|
max-width: 95%;
|
|
pointer-events: none;
|
|
}
|
|
html|*.pointerlockfswarning:not([hidden]) {
|
|
display: flex;
|
|
will-change: transform;
|
|
}
|
|
html|*.pointerlockfswarning[onscreen] {
|
|
transform: translate(-50%, 50px);
|
|
}
|
|
html|*.pointerlockfswarning[ontop] {
|
|
/* Use -10px to hide the border and border-radius on the top */
|
|
transform: translate(-50%, -10px);
|
|
}
|
|
#main-window[OSXLionFullscreen] html|*.pointerlockfswarning[ontop] {
|
|
transform: translate(-50%, 80px);
|
|
}
|
|
|
|
html|*.pointerlockfswarning-domain-text,
|
|
html|*.pointerlockfswarning-generic-text {
|
|
word-wrap: break-word;
|
|
/* We must specify a min-width, otherwise word-wrap:break-word doesn't work. Bug 630864. */
|
|
min-width: 1px
|
|
}
|
|
html|*.pointerlockfswarning-domain-text:not([hidden]) + html|*.pointerlockfswarning-generic-text {
|
|
display: none;
|
|
}
|
|
|
|
html|*#fullscreen-exit-button {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* ::::: Ctrl-Tab Panel ::::: */
|
|
|
|
.ctrlTab-preview {
|
|
-moz-binding: url("chrome://browser/content/browser-tabPreviews.xml#ctrlTab-preview");
|
|
}
|
|
|
|
|
|
/* notification anchors should only be visible when their associated
|
|
notifications are */
|
|
.notification-anchor-icon {
|
|
-moz-user-focus: normal;
|
|
}
|
|
|
|
#blocked-permissions-container > .blocked-permission-icon:not([showing]),
|
|
.notification-anchor-icon:not([showing]) {
|
|
display: none;
|
|
}
|
|
|
|
#invalid-form-popup > description {
|
|
max-width: 280px;
|
|
}
|
|
|
|
.popup-anchor {
|
|
/* should occupy space but not be visible */
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
-moz-stack-sizing: ignore;
|
|
}
|
|
|
|
#addon-progress-notification {
|
|
-moz-binding: url("chrome://browser/content/urlbarBindings.xml#addon-progress-notification");
|
|
}
|
|
|
|
browser[tabmodalPromptShowing] {
|
|
-moz-user-focus: none !important;
|
|
}
|
|
|
|
/* Status panel */
|
|
|
|
#statuspanel {
|
|
position: fixed;
|
|
margin-top: -3em;
|
|
max-width: calc(100% - 5px);
|
|
pointer-events: none;
|
|
}
|
|
|
|
#statuspanel[mirror] {
|
|
offset-inline-start: auto;
|
|
offset-inline-end: 0;
|
|
}
|
|
|
|
#statuspanel[sizelimit] {
|
|
max-width: 50%;
|
|
}
|
|
|
|
#statuspanel[type=status] {
|
|
min-width: 23em;
|
|
}
|
|
|
|
@media all and (max-width: 800px) {
|
|
#statuspanel[type=status] {
|
|
min-width: 33%;
|
|
}
|
|
}
|
|
|
|
#statuspanel[type=overLink] {
|
|
transition: opacity 120ms ease-out;
|
|
}
|
|
|
|
#statuspanel[type=overLink] > #statuspanel-inner {
|
|
direction: ltr;
|
|
}
|
|
|
|
#statuspanel[inactive] {
|
|
transition: none;
|
|
opacity: 0;
|
|
}
|
|
|
|
#statuspanel[inactive][previoustype=overLink] {
|
|
transition: opacity 200ms ease-out;
|
|
}
|
|
|
|
#statuspanel-inner {
|
|
height: 3em;
|
|
width: 100%;
|
|
-moz-box-align: end;
|
|
}
|
|
|
|
/* gcli */
|
|
|
|
html|*#gcli-tooltip-frame,
|
|
html|*#gcli-output-frame,
|
|
#gcli-output,
|
|
#gcli-tooltip {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.gclitoolbar-input-node,
|
|
.gclitoolbar-complete-node {
|
|
direction: ltr;
|
|
}
|
|
|
|
#developer-toolbar-toolbox-button[error-count] > .toolbarbutton-icon {
|
|
display: none;
|
|
}
|
|
|
|
#developer-toolbar-toolbox-button[error-count]:before {
|
|
content: attr(error-count);
|
|
display: -moz-box;
|
|
-moz-box-pack: center;
|
|
}
|
|
|
|
/* Translation */
|
|
notification[value="translation"] {
|
|
-moz-binding: url("chrome://browser/content/translation-infobar.xml#translationbar");
|
|
}
|
|
|
|
/*** Visibility of downloads indicator controls ***/
|
|
|
|
/* Bug 924050: If we've loaded the indicator, for now we hide it in the menu panel,
|
|
and just show the icon. This is a hack to side-step very weird layout bugs that
|
|
seem to be caused by the indicator stack interacting with the menu panel. */
|
|
#downloads-button[indicator]:not([cui-areatype="menu-panel"]) > .toolbarbutton-badge-stack > image.toolbarbutton-icon,
|
|
#downloads-button[indicator][cui-areatype="menu-panel"] > #downloads-indicator-anchor {
|
|
display: none;
|
|
}
|
|
|
|
toolbarpaletteitem[place="palette"] > #downloads-button[indicator] > .toolbarbutton-badge-stack > image.toolbarbutton-icon {
|
|
display: -moz-box;
|
|
}
|
|
|
|
toolbarpaletteitem[place="palette"] > #downloads-button[indicator] > #downloads-indicator-anchor {
|
|
display: none;
|
|
}
|
|
|
|
/* Combobox dropdown renderer */
|
|
#ContentSelectDropdown > menupopup {
|
|
/* The menupopup itself should always be rendered LTR to ensure the scrollbar aligns with
|
|
* the dropdown arrow on the dropdown widget. If a menuitem is RTL, its style will be set accordingly */
|
|
direction: ltr;
|
|
}
|
|
|
|
/* Indent options in optgroups */
|
|
.contentSelectDropdown-ingroup .menu-iconic-text {
|
|
padding-inline-start: 2em;
|
|
}
|
|
|
|
/* Give this menupopup an arrow panel styling */
|
|
#BMB_bookmarksPopup {
|
|
-moz-appearance: none;
|
|
-moz-binding: url("chrome://browser/content/places/menu.xml#places-popup-arrow");
|
|
background: transparent;
|
|
border: none;
|
|
/* The popup inherits -moz-image-region from the button, must reset it */
|
|
-moz-image-region: auto;
|
|
}
|
|
|
|
%ifdef MOZ_WIDGET_COCOA
|
|
|
|
/* On Mac, use the properties "-moz-window-transform" and "-moz-window-opacity"
|
|
instead of "transform" and "opacity" for these animations.
|
|
The -moz-window* properties apply to the whole window including the window's
|
|
shadow, and they don't affect the window's "shape", so the system doesn't
|
|
have to recompute the shadow shape during the animation. This makes them a
|
|
lot faster. In fact, Gecko no longer triggers shadow shape recomputations
|
|
for repaints.
|
|
These properties are not implemented on other platforms. */
|
|
#BMB_bookmarksPopup:not([animate="false"]) {
|
|
-moz-window-opacity: 0;
|
|
-moz-window-transform: translateY(-70px);
|
|
transition-property: -moz-window-transform, -moz-window-opacity;
|
|
transition-duration: 0.18s, 0.18s;
|
|
transition-timing-function:
|
|
var(--animation-easing-function), ease-out;
|
|
}
|
|
|
|
#BMB_bookmarksPopup[side="bottom"]:not([animate="false"]) {
|
|
-moz-window-transform: translateY(70px);
|
|
}
|
|
|
|
#BMB_bookmarksPopup[side][animate="open"] {
|
|
-moz-window-opacity: 1.0;
|
|
transition-duration: 0.18s, 0.18s;
|
|
-moz-window-transform: none;
|
|
transition-timing-function:
|
|
var(--animation-easing-function), ease-in-out;
|
|
}
|
|
|
|
#BMB_bookmarksPopup[animate="cancel"] {
|
|
-moz-window-transform: none;
|
|
}
|
|
|
|
%elifndef MOZ_WIDGET_GTK
|
|
|
|
#BMB_bookmarksPopup {
|
|
will-change: transform, opacity; /* workaround for bug 1414033 */
|
|
}
|
|
|
|
#BMB_bookmarksPopup:not([animate="false"]) {
|
|
opacity: 0;
|
|
transform: translateY(-70px);
|
|
transition-property: transform, opacity;
|
|
transition-duration: 0.18s, 0.18s;
|
|
transition-timing-function:
|
|
var(--animation-easing-function), ease-out;
|
|
}
|
|
|
|
#BMB_bookmarksPopup[side="bottom"]:not([animate="false"]) {
|
|
transform: translateY(70px);
|
|
}
|
|
|
|
#BMB_bookmarksPopup[side][animate="open"] {
|
|
opacity: 1.0;
|
|
transition-duration: 0.18s, 0.18s;
|
|
transform: none;
|
|
transition-timing-function:
|
|
var(--animation-easing-function), ease-in-out;
|
|
}
|
|
|
|
#BMB_bookmarksPopup[animate="cancel"] {
|
|
transform: none;
|
|
}
|
|
%endif
|
|
|
|
/* Apply crisp rendering for favicons at exactly 2dppx resolution */
|
|
@media (resolution: 2dppx) {
|
|
#PanelUI-remotetabs-tabslist > toolbarbutton > .toolbarbutton-icon,
|
|
#PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
|
|
#PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
|
|
#PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
|
|
image-rendering: -moz-crisp-edges;
|
|
}
|
|
}
|
|
|
|
#customization-container {
|
|
-moz-box-orient: horizontal;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#customization-container:not([hidden]) {
|
|
/* In a separate rule to avoid 'display:flex' causing the node to be
|
|
* displayed while the container is still hidden. */
|
|
display: flex;
|
|
}
|
|
|
|
#customization-content-container {
|
|
display: flex;
|
|
flex-grow: 1; /* Grow so there isn't empty space below the footer */
|
|
min-height: 0; /* Allow this to shrink so the footer doesn't get pushed out. */
|
|
}
|
|
|
|
#customization-panelHolder {
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
#customization-panelHolder > #widget-overflow-fixed-list {
|
|
flex: 1 1 auto; /* Grow within the available space, and allow ourselves to shrink */
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
#customization-panelWrapper,
|
|
#customization-panelWrapper > .panel-arrowcontent,
|
|
#customization-panelHolder {
|
|
flex-direction: column;
|
|
display: flex;
|
|
min-height: calc(174px + 9em);
|
|
}
|
|
|
|
#customization-panelWrapper {
|
|
flex: 1 1 auto;
|
|
height: 0; /* Don't let my contents affect ancestors' content-based sizing */
|
|
align-items: end; /* align to the end on the cross-axis (affects arrow) */
|
|
}
|
|
|
|
#customization-panelWrapper,
|
|
#customization-panelWrapper > .panel-arrowcontent {
|
|
-moz-box-flex: 1;
|
|
}
|
|
|
|
#customization-panel-container {
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: none;
|
|
}
|
|
|
|
toolbarpaletteitem[dragover] {
|
|
border-left-color: transparent;
|
|
border-right-color: transparent;
|
|
}
|
|
|
|
#customization-palette-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
#customization-palette:not([hidden]) {
|
|
display: block;
|
|
flex: 1 1 auto;
|
|
overflow: auto;
|
|
min-height: 3em;
|
|
}
|
|
|
|
#customization-footer-spacer,
|
|
#customization-spacer {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
#customization-footer {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
#customization-toolbar-visibility-button > .box-inherit > .button-menu-dropmarker {
|
|
display: -moz-box;
|
|
}
|
|
|
|
toolbarpaletteitem[place="palette"] {
|
|
-moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbarpaletteitem-palette-wrapping-label");
|
|
width: 7em;
|
|
/* icon (16) + margin (9 + 12) + 3 lines of text: */
|
|
height: calc(39px + 3em);
|
|
margin-bottom: 5px;
|
|
margin-inline-end: 24px;
|
|
overflow: visible;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
toolbarpaletteitem[place="palette"][hidden] {
|
|
display: none;
|
|
}
|
|
|
|
#customization-palette .toolbarpaletteitem-box {
|
|
-moz-box-pack: center;
|
|
width: 7em;
|
|
max-width: 7em;
|
|
}
|
|
|
|
#main-window[customizing=true] .addon-banner-item,
|
|
#main-window[customizing=true] .panel-banner-item {
|
|
display: none;
|
|
}
|
|
|
|
/* UI Tour */
|
|
|
|
@keyframes uitour-wobble {
|
|
from {
|
|
transform: rotate(0deg) translateX(3px) rotate(0deg);
|
|
}
|
|
50% {
|
|
transform: rotate(360deg) translateX(3px) rotate(-360deg);
|
|
}
|
|
to {
|
|
transform: rotate(720deg) translateX(0px) rotate(-720deg);
|
|
}
|
|
}
|
|
|
|
@keyframes uitour-zoom {
|
|
from {
|
|
transform: scale(0.8);
|
|
}
|
|
50% {
|
|
transform: scale(1.0);
|
|
}
|
|
to {
|
|
transform: scale(0.8);
|
|
}
|
|
}
|
|
|
|
@keyframes uitour-color {
|
|
from {
|
|
border-color: #5B9CD9;
|
|
}
|
|
50% {
|
|
border-color: #FF0000;
|
|
}
|
|
to {
|
|
border-color: #5B9CD9;
|
|
}
|
|
}
|
|
|
|
#UITourHighlightContainer,
|
|
#UITourHighlight {
|
|
pointer-events: none;
|
|
}
|
|
|
|
#UITourHighlight[active] {
|
|
animation-delay: 2s;
|
|
animation-fill-mode: forwards;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: linear;
|
|
}
|
|
|
|
#UITourHighlight[active="wobble"] {
|
|
animation-name: uitour-wobble;
|
|
animation-delay: 0s;
|
|
animation-duration: 1.5s;
|
|
animation-iteration-count: 1;
|
|
}
|
|
#UITourHighlight[active="zoom"] {
|
|
animation-name: uitour-zoom;
|
|
animation-duration: 1s;
|
|
}
|
|
#UITourHighlight[active="color"] {
|
|
animation-name: uitour-color;
|
|
animation-duration: 2s;
|
|
}
|
|
|
|
/* Combined context-menu items */
|
|
#context-navigation > .menuitem-iconic > .menu-iconic-text,
|
|
#context-navigation > .menuitem-iconic > .menu-accel-container {
|
|
display: none;
|
|
}
|
|
|
|
.popup-notification-invalid-input {
|
|
box-shadow: 0 0 1.5px 1px red;
|
|
}
|
|
|
|
.popup-notification-invalid-input[focused] {
|
|
box-shadow: 0 0 2px 2px rgba(255,0,0,0.4);
|
|
}
|
|
|
|
.popup-notification-description[popupid=webauthn-prompt-register-direct] {
|
|
white-space: pre-line;
|
|
}
|
|
|
|
.dragfeedback-tab {
|
|
-moz-appearance: none;
|
|
opacity: 0.65;
|
|
-moz-window-shadow: none;
|
|
}
|
|
|
|
/* Page action panel */
|
|
#pageAction-panel-sendToDevice-subview-body:not([state="notready"]) > .pageAction-sendToDevice-notReady,
|
|
#pageAction-urlbar-sendToDevice-subview-body:not([state="notready"]) > .pageAction-sendToDevice-notReady {
|
|
display: none;
|
|
}
|
|
|
|
/* Page action buttons */
|
|
.pageAction-panel-button > .toolbarbutton-icon {
|
|
list-style-image: var(--pageAction-image-16px, inherit);
|
|
}
|
|
.urlbar-page-action {
|
|
list-style-image: var(--pageAction-image-16px, inherit);
|
|
}
|
|
@media (min-resolution: 1.1dppx) {
|
|
.pageAction-panel-button > .toolbarbutton-icon {
|
|
list-style-image: var(--pageAction-image-32px, inherit);
|
|
}
|
|
.urlbar-page-action {
|
|
list-style-image: var(--pageAction-image-32px, inherit);
|
|
}
|
|
}
|
|
|
|
/* Page action context menu */
|
|
#pageActionContextMenu > .pageActionContextMenuItem {
|
|
visibility: collapse;
|
|
}
|
|
#pageActionContextMenu[state=builtInPinned] > .pageActionContextMenuItem.builtInPinned,
|
|
#pageActionContextMenu[state=builtInUnpinned] > .pageActionContextMenuItem.builtInUnpinned,
|
|
#pageActionContextMenu[state=extensionPinned] > .pageActionContextMenuItem.extensionPinned,
|
|
#pageActionContextMenu[state=extensionUnpinned] > .pageActionContextMenuItem.extensionUnpinned {
|
|
visibility: visible;
|
|
}
|
|
|
|
|
|
/* Favicon in Open Bookmark in Sidebar */
|
|
#sidebar-box[sidebarcommand="viewWebPanelsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
|
|
list-style-image: var(--sidebar-webpage-icon, url(chrome://mozapps/skin/places/defaultFavicon.svg) );
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
/* WebExtension Sidebars */
|
|
#sidebar-box[sidebarcommand$="-sidebar-action"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
|
|
list-style-image: var(--webextension-menuitem-image, inherit);
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
@media (min-resolution: 1.1dppx) {
|
|
#sidebar-box[sidebarcommand$="-sidebar-action"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
|
|
list-style-image: var(--webextension-menuitem-image-2x, inherit);
|
|
}
|
|
}
|
|
|
|
%include theme-vars.inc.css
|