diff options
Diffstat (limited to 'toolkit/content/xul.css')
-rw-r--r-- | toolkit/content/xul.css | 617 |
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; } +} |