summaryrefslogtreecommitdiffstats
path: root/toolkit/content/xul.css
diff options
context:
space:
mode:
Diffstat (limited to 'toolkit/content/xul.css')
-rw-r--r--toolkit/content/xul.css617
1 files changed, 617 insertions, 0 deletions
diff --git a/toolkit/content/xul.css b/toolkit/content/xul.css
new file mode 100644
index 0000000000..73b4447dbc
--- /dev/null
+++ b/toolkit/content/xul.css
@@ -0,0 +1,617 @@
+/* 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/. */
+
+/**
+ * A minimal set of rules for the XUL elements that may be implicitly created
+ * as part of HTML/SVG documents (e.g. scrollbars) can be found over in
+ * minimal-xul.css. Rules for everything else related to XUL can be found in
+ * this file. Make sure you choose the correct style sheet when adding new
+ * rules. (This split of the XUL rules is to minimize memory use and improve
+ * performance in HTML/SVG documents.)
+ *
+ * This file should also not contain any app specific styling. Defaults for
+ * widgets of a particular application should be in that application's style
+ * sheet. For example, style definitions for browser can be found in
+ * browser.css.
+ */
+
+@import url("chrome://global/skin/tooltip.css");
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */
+@namespace html url("http://www.w3.org/1999/xhtml"); /* namespace for HTML elements */
+
+/* TODO: investigate unifying these two root selectors
+ * https://bugzilla.mozilla.org/show_bug.cgi?id=1592344
+ */
+*|*:root {
+ --animation-easing-function: cubic-bezier(.07, .95, 0, 1);
+}
+
+:root {
+ text-rendering: optimizeLegibility;
+ -moz-control-character-visibility: visible;
+}
+
+:root:-moz-locale-dir(rtl) {
+ direction: rtl;
+}
+
+/*
+ * Native anonymous popups and tooltips in html are document-level, which means
+ * that they don't inherit from the root, so this is needed.
+ */
+popupgroup:-moz-native-anonymous:-moz-locale-dir(rtl),
+tooltip:-moz-native-anonymous:-moz-locale-dir(rtl) {
+ direction: rtl;
+}
+
+/* ::::::::::
+ :: Rules for 'hiding' portions of the chrome for special
+ :: kinds of windows (not JUST browser windows) with toolbars
+ ::::: */
+
+*|*:root[chromehidden~="menubar"] .chromeclass-menubar,
+*|*:root[chromehidden~="directories"] .chromeclass-directories,
+*|*:root[chromehidden~="status"] .chromeclass-status,
+*|*:root[chromehidden~="extrachrome"] .chromeclass-extrachrome,
+*|*:root[chromehidden~="location"] .chromeclass-location,
+*|*:root[chromehidden~="location"][chromehidden~="toolbar"] .chromeclass-toolbar,
+*|*:root[chromehidden~="toolbar"] .chromeclass-toolbar-additional {
+ display: none;
+}
+
+/* ::::::::::
+ :: Rules for forcing direction for entry and display of URIs
+ :: or URI elements
+ ::::: */
+
+.uri-element {
+ direction: ltr !important;
+}
+
+/****** elements that have no visual representation ******/
+
+script, data, commandset, command,
+broadcasterset, broadcaster, observes,
+keyset, key, toolbarpalette, template,
+treeitem, treeseparator, treerow, treecell {
+ display: none;
+}
+
+/********** focus rules **********/
+
+button,
+checkbox,
+menulist,
+radiogroup,
+tree,
+browser,
+editor,
+iframe {
+ -moz-user-focus: normal;
+}
+
+/******** window & page ******/
+
+window {
+ overflow: clip;
+ -moz-box-orient: vertical;
+}
+
+/******** box *******/
+
+vbox {
+ -moz-box-orient: vertical;
+}
+
+/********** label **********/
+label.text-link, label[onclick] {
+ -moz-user-focus: normal;
+}
+
+label html|span.accesskey {
+ text-decoration: underline;
+ text-decoration-skip-ink: none;
+}
+
+/********** toolbarbutton **********/
+
+toolbar[mode="icons"] .toolbarbutton-text,
+toolbar[mode="text"] .toolbarbutton-icon,
+html|label.toolbarbutton-badge:empty {
+ display: none;
+}
+
+/********** button **********/
+
+button {
+ -moz-default-appearance: button;
+ appearance: auto;
+}
+
+/******** browser, editor, iframe ********/
+
+browser,
+editor,
+iframe {
+ display: inline;
+}
+
+@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
+ browser,
+ editor,
+ iframe {
+ display: block;
+ }
+}
+
+/* Allow the browser to shrink below its intrinsic size, to match legacy
+ * behavior */
+browser {
+ align-self: stretch;
+ justify-self: stretch;
+ min-height: 0;
+ min-width: 0;
+}
+
+/*********** popup notification ************/
+popupnotification {
+ -moz-box-orient: vertical;
+}
+
+.popup-notification-menubutton:not([label]) {
+ display: none;
+}
+
+/********** radio **********/
+
+radiogroup {
+ -moz-box-orient: vertical;
+}
+
+/******** groupbox *********/
+
+groupbox {
+ -moz-box-orient: vertical;
+}
+
+/******** draggable elements *********/
+
+%ifndef MOZ_WIDGET_GTK
+titlebar,
+toolbar:not([nowindowdrag="true"], [customizing="true"]) {
+ -moz-window-dragging: drag;
+}
+%endif
+
+/* The list below is non-comprehensive and will probably need some tweaking. */
+toolbaritem,
+toolbarbutton,
+toolbarseparator,
+button,
+search-textbox,
+html|input,
+tab,
+radio,
+splitter,
+menulist {
+ -moz-window-dragging: no-drag;
+}
+
+titlebar {
+ pointer-events: auto !important;
+}
+
+/******* toolbar *******/
+
+toolbox {
+ -moz-box-orient: vertical;
+}
+
+%ifdef XP_MACOSX
+toolbar[type="menubar"] {
+ min-height: 0 !important;
+ border: 0 !important;
+}
+%endif
+
+toolbarspring {
+ -moz-box-flex: 1000;
+}
+
+/********* menu ***********/
+
+menubar > menu:empty {
+ visibility: collapse;
+}
+
+.menu-text {
+ -moz-box-flex: 1;
+}
+
+/********* menupopup, panel, & tooltip ***********/
+
+menupopup,
+panel {
+ -moz-box-orient: vertical;
+}
+
+menupopup,
+panel,
+tooltip {
+ display: -moz-popup;
+ z-index: 2147483647;
+ text-shadow: none;
+}
+
+tooltip {
+ -moz-box-orient: vertical;
+ white-space: pre-wrap;
+ margin-top: 21px;
+}
+
+% excluding Android here to work around bug 1637975:
+%ifndef ANDROID
+@supports -moz-bool-pref("xul.panel-animations.enabled") {
+@media (prefers-reduced-motion: no-preference) {
+%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. */
+ panel[type="arrow"]:not([animate="false"]) {
+ transition-property: -moz-window-transform, -moz-window-opacity;
+ transition-duration: 0.18s, 0.18s;
+ transition-timing-function:
+ var(--animation-easing-function), ease-out;
+ }
+
+ /* Only do the fade-in animation on pre-Big Sur to avoid missing shadows on
+ * Big Sur, see bug 1672091. */
+ @media (-moz-mac-big-sur-theme: 0) {
+ panel[type="arrow"]:not([animate="false"]) {
+ -moz-window-opacity: 0;
+ -moz-window-transform: translateY(-70px);
+ }
+
+ panel[type="arrow"][side="bottom"]:not([animate="false"]) {
+ -moz-window-transform: translateY(70px);
+ }
+ }
+
+ /* [animate] is here only so that this rule has greater specificity than the
+ * rule right above */
+ panel[type="arrow"][animate][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;
+ }
+
+ panel[type="arrow"][animate][animate="cancel"] {
+ -moz-window-opacity: 0;
+ -moz-window-transform: none;
+ }
+%else
+ panel[type="arrow"]: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;
+ }
+
+ panel[type="arrow"][side="bottom"]:not([animate="false"]) {
+ transform: translateY(70px);
+ }
+
+ /* [animate] is here only so that this rule has greater specificity than the
+ * rule right above */
+ panel[type="arrow"][animate][animate="open"] {
+ opacity: 1.0;
+ transition-duration: 0.18s, 0.18s;
+ transform: none;
+ transition-timing-function:
+ var(--animation-easing-function), ease-in-out;
+ }
+
+ panel[type="arrow"][animate][animate="cancel"] {
+ transform: none;
+ }
+%endif
+}
+}
+%endif
+
+panel[type="arrow"][animating] {
+ pointer-events: none;
+}
+
+/******** tree ******/
+
+treecolpicker {
+ -moz-box-ordinal-group: 2147483646;
+}
+
+treechildren {
+ display: -moz-box;
+ user-select: none;
+ -moz-box-flex: 1;
+}
+
+tree {
+ -moz-box-orient: vertical;
+ width: 10px;
+ height: 10px;
+}
+
+tree[hidecolumnpicker="true"] treecolpicker {
+ display: none;
+}
+
+treecol {
+ min-width: 16px;
+}
+
+treecol[hidden="true"] {
+ visibility: collapse;
+ display: -moz-box;
+}
+
+/* ::::: lines connecting cells ::::: */
+tree:not([treelines="true"]) treechildren::-moz-tree-line {
+ visibility: hidden;
+}
+
+treechildren::-moz-tree-cell(ltr) {
+ direction: ltr !important;
+}
+
+/********** deck & stack *********/
+
+deck {
+ display: -moz-deck;
+}
+
+stack {
+ display: grid;
+ position: relative;
+}
+
+/* We shouldn't style native anonymous children like scrollbars or what not */
+stack > *|*:not(:-moz-native-anonymous) {
+ grid-area: 1 / 1;
+ z-index: 0;
+
+ /*
+ The default `min-height: auto` value makes grid items refuse to be smaller
+ than their content. This doesn't match the traditional behavior of XUL stack,
+ which often shoehorns tall content into a smaller stack and allows the content
+ to decide how to handle overflow (e.g. by scaling down if it's an image, or
+ by adding scrollbars if it's scrollable).
+ */
+ min-height: 0;
+}
+
+legacy-stack {
+ display: -moz-stack;
+}
+
+/********** tabbox *********/
+
+tabbox {
+ -moz-box-orient: vertical;
+}
+
+tabs {
+ -moz-box-orient: horizontal;
+}
+
+tab {
+ -moz-box-align: center;
+ -moz-box-pack: center;
+}
+
+tab[selected="true"]:not([ignorefocus="true"]) {
+ -moz-user-focus: normal;
+}
+
+tabpanels {
+ display: -moz-deck;
+}
+
+/********** tooltip *********/
+
+tooltip[titletip="true"] {
+ /* The width of the tooltip isn't limited on cropped <tree> cells. */
+ max-width: none;
+}
+
+/********** basic rule for anonymous content that needs to pass box properties through
+ ********** to an insertion point parent that holds the real kids **************/
+
+.box-inherit {
+ -moz-box-orient: inherit;
+ -moz-box-pack: inherit;
+ -moz-box-align: inherit;
+ -moz-box-direction: inherit;
+}
+
+/********** textbox **********/
+
+search-textbox {
+ user-select: text;
+ text-shadow: none;
+}
+
+/* Prefix with (xul|*):root to workaround HTML tests loading xul.css */
+:root html|textarea:not([resizable="true"]) {
+ resize: none;
+}
+
+@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
+ html|*.textbox-input {
+ /* Be block-level, so that -moz-box-flex can take effect, when we are an item
+ in a -moz-box being emulated by modified modern flex. */
+ display: block;
+ }
+}
+
+/********** autocomplete textbox **********/
+
+/* SeaMonkey uses its own autocomplete and the toolkit's autocomplete widget */
+%ifndef MOZ_SUITE
+
+.autocomplete-richlistbox {
+ -moz-user-focus: ignore;
+ overflow-x: hidden !important;
+}
+
+.autocomplete-richlistitem {
+ -moz-box-orient: vertical;
+ -moz-box-align: center;
+ overflow: clip;
+}
+
+%endif
+
+/* The following rule is here to fix bug 96899 (and now 117952).
+ Somehow trees create a situation
+ in which a popupset flows itself as if its popup child is directly within it
+ instead of the placeholder child that should actually be inside the popupset.
+ This is a stopgap measure, and it does not address the real bug. */
+.autocomplete-result-popupset {
+ max-width: 0px;
+ width: 0 !important;
+ min-width: 0%;
+ min-height: 0%;
+}
+
+/********** menulist **********/
+
+menulist[popuponly] {
+ appearance: none !important;
+ margin: 0 !important;
+ height: 0 !important;
+ min-height: 0 !important;
+ border: 0 !important;
+}
+
+/********** splitter **********/
+
+.tree-splitter {
+ width: 0px;
+ max-width: 0px;
+ min-width: 0% ! important;
+ min-height: 0% ! important;
+ -moz-box-ordinal-group: 2147483646;
+}
+
+/******** scrollbar ********/
+
+slider {
+ /* This is a hint to layerization that the scrollbar thumb can never leave
+ the scrollbar track. */
+ overflow: hidden;
+}
+
+/******** scrollbox ********/
+
+scrollbox {
+ /* This makes it scrollable! */
+ overflow: hidden;
+}
+
+scrollbox[smoothscroll=true] {
+ scroll-behavior: smooth;
+}
+
+/********** stringbundle **********/
+
+stringbundle,
+stringbundleset {
+ display: none;
+}
+
+/********** dialog **********/
+
+dialog {
+ -moz-box-flex: 1;
+ -moz-box-orient: vertical;
+}
+
+/********** wizard **********/
+
+wizard {
+ -moz-box-flex: 1;
+ -moz-box-orient: vertical;
+ width: 40em;
+ height: 30em;
+}
+
+wizardpage {
+ -moz-box-orient: vertical;
+ overflow: auto;
+}
+
+/********** Rich Listbox ********/
+
+richlistbox {
+ -moz-user-focus: normal;
+ -moz-box-orient: vertical;
+}
+
+/*********** findbar ************/
+findbar {
+ overflow-x: hidden;
+}
+
+/* Some elements that in HTML blocks should be inline-level by default */
+label, button, image {
+ display: -moz-inline-box;
+}
+
+.menu-iconic-highlightable-text:not([highlightable="true"]),
+.menu-iconic-text[highlightable="true"] {
+ display: none;
+}
+
+[orient="vertical"] { -moz-box-orient: vertical !important; }
+[orient="horizontal"] { -moz-box-orient: horizontal !important; }
+
+[align="start"] { -moz-box-align: start !important; }
+[align="center"] { -moz-box-align: center !important; }
+[align="end"] { -moz-box-align: end !important; }
+[align="baseline"] { -moz-box-align: baseline !important; }
+[align="stretch"] { -moz-box-align: stretch !important; }
+
+[pack="start"] { -moz-box-pack: start !important; }
+[pack="center"] { -moz-box-pack: center !important; }
+[pack="end"] { -moz-box-pack: end !important; }
+
+@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
+ /* This isn't a real solution for [flex] and [ordinal], but it covers enough
+ cases to render the browser chrome for us to test emulated flex mode without
+ mass-changing existing markup and CSS.
+ If we get attr() in Bug 435426 this could work for all cases. */
+ [flex="1"] { -moz-box-flex: 1; }
+ [flex="2"] { -moz-box-flex: 2; }
+ [flex="3"] { -moz-box-flex: 3; }
+ [flex="4"] { -moz-box-flex: 4; }
+ [flex="5"] { -moz-box-flex: 5; }
+ [flex="6"] { -moz-box-flex: 6; }
+ [flex="7"] { -moz-box-flex: 7; }
+ [flex="8"] { -moz-box-flex: 8; }
+ [flex="9"] { -moz-box-flex: 9; }
+ [flex="100"] { -moz-box-flex: 100; }
+ [flex="400"] { -moz-box-flex: 400; }
+ [flex="1000"] { -moz-box-flex: 1000; }
+ [flex="10000"] { -moz-box-flex: 10000; }
+}