mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-20 16:55:40 +00:00
730ca3472e
This adds a simple empty box that is displayed when we're still loading an icon but are no longer showing the throbber. Ideally I'd like to keep showing the throbber and maintain the busy state but that seems more risky for now. Differential Revision: https://phabricator.services.mozilla.com/D2364 --HG-- extra : moz-landing-system : lando
1437 lines
40 KiB
CSS
1437 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 {
|
|
background-color: var(--lwt-accent-color) !important;
|
|
color: var(--lwt-text-color) !important;
|
|
}
|
|
|
|
:root:-moz-lwtheme[lwtheme-image] {
|
|
background-image: var(--lwt-header-image) !important;
|
|
background-repeat: no-repeat;
|
|
background-position: right top !important;
|
|
}
|
|
|
|
:root:-moz-lwtheme:-moz-window-inactive {
|
|
background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)) !important;
|
|
}
|
|
|
|
/* Set additional backgrounds alignment relative to toolbox */
|
|
|
|
#navigator-toolbox:-moz-lwtheme {
|
|
background-image: var(--lwt-additional-images);
|
|
background-position: var(--lwt-background-alignment);
|
|
background-repeat: var(--lwt-background-tiling);
|
|
}
|
|
|
|
#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;
|
|
}
|
|
|
|
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-pending:not([fadein]),
|
|
.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 !important;
|
|
}
|
|
}
|
|
%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],
|
|
#tabbrowser-tabs[movingtab] > .tabbrowser-tab[multiselected] {
|
|
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]):not([multiselected]) {
|
|
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;
|
|
}
|
|
|
|
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]: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);
|
|
}
|
|
|
|
toolbar[brighttext] .webextension-browser-action {
|
|
list-style-image: var(--webextension-toolbar-image-light, inherit);
|
|
}
|
|
|
|
toolbar:not([brighttext]) .webextension-browser-action:-moz-lwtheme {
|
|
list-style-image: var(--webextension-toolbar-image-dark, inherit);
|
|
}
|
|
|
|
.webextension-browser-action[cui-areatype="menu-panel"] {
|
|
list-style-image: var(--webextension-menupanel-image, inherit);
|
|
}
|
|
|
|
:root[lwt-popup-brighttext] .webextension-browser-action[cui-areatype="menu-panel"] {
|
|
list-style-image: var(--webextension-menupanel-image-light, inherit);
|
|
}
|
|
|
|
:root:not([lwt-popup-brighttext]) .webextension-browser-action[cui-areatype="menu-panel"]:-moz-lwtheme {
|
|
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);
|
|
}
|
|
|
|
toolbar[brighttext] .webextension-browser-action {
|
|
list-style-image: var(--webextension-toolbar-image-2x-light, inherit);
|
|
}
|
|
|
|
toolbar:not([brighttext]) .webextension-browser-action:-moz-lwtheme {
|
|
list-style-image: var(--webextension-toolbar-image-2x-dark, inherit);
|
|
}
|
|
|
|
.webextension-browser-action[cui-areatype="menu-panel"] {
|
|
list-style-image: var(--webextension-menupanel-image-2x, inherit);
|
|
}
|
|
|
|
:root[lwt-popup-brighttext] .webextension-browser-action[cui-areatype="menu-panel"] {
|
|
list-style-image: var(--webextension-menupanel-image-2x-light, inherit);
|
|
}
|
|
|
|
:root:not([lwt-popup-brighttext]) .webextension-browser-action[cui-areatype="menu-panel"]:-moz-lwtheme {
|
|
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;
|
|
}
|
|
|
|
%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;
|
|
}
|
|
|
|
/* Show the url scheme in a static box when overflowing to the left */
|
|
moz-input-box.urlbar-input-box {
|
|
position: relative;
|
|
direction: ltr;
|
|
}
|
|
html|input.urlbar-scheme {
|
|
position: absolute;
|
|
height: 100%;
|
|
visibility: hidden;
|
|
direction: ltr;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Visible if the urlbar is not focused and it overflows at the start.
|
|
Uses the required-valid trick to check if it contains a value */
|
|
html|input.urlbar-scheme[textoverflow="start"]:not([focused]):valid {
|
|
visibility: visible;
|
|
}
|
|
|
|
/* Fade out URL on overflow
|
|
This mask may be overriden when a Contextual Feature Recommendation is shown,
|
|
see browser/themes/shared/urlbar-searchbar.inc.css for details */
|
|
html|input.urlbar-input[textoverflow="end"]:not([focused]) {
|
|
mask-image: linear-gradient(to left, transparent, black 3ch);
|
|
}
|
|
|
|
html|input.urlbar-input[textoverflow="start"]:not([focused]) {
|
|
mask-image: linear-gradient(to right, transparent var(--urlbar-scheme-size), black calc(var(--urlbar-scheme-size) + 3ch));
|
|
}
|
|
|
|
html|input.urlbar-input:not([focused]) {
|
|
mask-repeat: no-repeat;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* Hide the em-dash separator between the search query description (.ac-title)
|
|
and the "Search with Foo" description (.ac-url) if the search query is the
|
|
empty string. Also hide .ac-title itself because it has a margin-inline-end;
|
|
alternatively we would need to remove that margin in this case. */
|
|
#PopupAutoCompleteRichResult > richlistbox > richlistitem.emptySearchQuery > .ac-separator,
|
|
#PopupAutoCompleteRichResult > richlistbox > richlistitem.emptySearchQuery > .ac-title {
|
|
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) {
|
|
.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;
|
|
}
|
|
}
|
|
|
|
menupopup[emptyplacesresult="true"] > .hide-if-empty-places-result {
|
|
display: none;
|
|
}
|
|
|
|
/* 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;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#historySwipeAnimationPreviousArrow {
|
|
background: url("chrome://browser/content/history-swipe-arrow.svg")
|
|
center left / 64px 128px no-repeat transparent;
|
|
}
|
|
#historySwipeAnimationNextArrow {
|
|
background: url("chrome://browser/content/history-swipe-arrow.svg")
|
|
center left / 64px 128px no-repeat transparent;
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/* 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://global/content/bindings/button.xml#button-base");
|
|
}
|
|
|
|
|
|
/* 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] {
|
|
inset-inline-start: auto;
|
|
inset-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;
|
|
}
|
|
|
|
/* 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 {
|
|
-moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbarpaletteitem");
|
|
}
|
|
|
|
toolbarpaletteitem[place="palette"] {
|
|
-moz-box-orient: vertical;
|
|
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:not([place="palette"]) > .toolbarpaletteitem-label,
|
|
toolbarpaletteitem[place="palette"][hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.toolbarpaletteitem-box {
|
|
/* Prevent children from getting events */
|
|
pointer-events: none;
|
|
}
|
|
|
|
toolbarpaletteitem[place="palette"] > .toolbarpaletteitem-box {
|
|
-moz-box-pack: center;
|
|
width: 7em;
|
|
max-width: 7em;
|
|
}
|
|
|
|
toolbarpaletteitem:not([place="palette"]) > .toolbarpaletteitem-box {
|
|
-moz-box-flex: 1;
|
|
}
|
|
|
|
#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;
|
|
}
|
|
|
|
/* 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
|