toolkit/content/minimal-xul.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 /**
   6  * This file should only contain a minimal set of rules for the XUL elements
   7  * that may be implicitly created as part of HTML/SVG documents (e.g.
   8  * scrollbars).  Rules for everything else related to XUL can be found in
   9  * xul.css.  (This split of the XUL rules is to minimize memory use and improve
  10  * performance in HTML/SVG documents.)
  11  *
  12  * ANYTHING ADDED TO THIS FILE WILL APPLY TO ALL DOCUMENTS, INCLUDING WEB CONTENT.
  13  * IF UA RULES ARE ONLY NEEDED IN CHROME, THEY SHOULD BE ADDED TO xul.css.
  14  */
  15
  16 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */
  17
  18 * {
  19   -moz-user-focus: ignore;
  20   user-select: none;
  21   display: -moz-box;
  22   box-sizing: border-box;
  23 }
  24
  25 /* hide the content and destroy the frame */
  26 [hidden="true"] {
  27   display: none;
  28 }
  29
  30 /* hide the content, but don't destroy the frames */
  31 [collapsed="true"] {
  32   visibility: collapse;
  33 }
  34
  35 /* Rules required for style caching of anonymous content scrollbar parts */
  36 @supports -moz-bool-pref("layout.css.cached-scrollbar-styles.enabled") {
  37   :is(scrollcorner, resizer, scrollbar, scrollbarbutton, slider):where(:-moz-native-anonymous) {
  38     /* All scrollbar parts must not inherit any properties from the scrollable
  39      * element (except for visibility and pointer-events), for the anonymous
  40      * content style caching system to work.
  41      */
  42     all: initial;
  43     visibility: inherit;
  44     pointer-events: inherit;
  45
  46     /* These properties are not included in 'all'. */
  47     -moz-context-properties: initial;
  48     -moz-control-character-visibility: initial;
  49     -moz-font-smoothing-background-color: initial;
  50     -moz-min-font-size-ratio: initial;
  51     math-depth: initial;
  52     /* As long as inert implies pointer-events: none as it does now, we're
  53      * good. */
  54     -moz-inert: initial;
  55
  56     /* Using initial is not sufficient for direction, since its initial value can
  57      * depend on the document's language.
  58      *
  59      * LTR is what we want for all scrollbar parts anyway, so that e.g. we don't
  60      * reverse the rendering of a horizontal scrollbar.
  61      */
  62     direction: ltr;
  63
  64     /* Similarly for font properties, whose initial values depend on the
  65      * document's language.  Scrollbar parts don't have any text or rely on
  66      * font metrics.
  67      */
  68     font: 16px sans-serif;
  69
  70     /* The initial value of justify-items is `legacy`, which makes it depend on
  71      * the parent style.
  72      *
  73      * Reset it to something else.
  74      */
  75     justify-items: start;
  76
  77     /* Avoid `object > *` rule in html.css from setting a useless, non-initial
  78      * value of vertical-align.
  79      */
  80     vertical-align: initial !important;
  81
  82     /* Duplicate the rules from the '*' rule above, which were clobbered by the
  83      * 'all: initial' declaration.
  84      *
  85      * The other zero specificity rules above are on :root, and scrollbar parts
  86      * cannot match :root, so no need to duplicate them.
  87      */
  88     -moz-user-focus: ignore;
  89     user-select: none;
  90     display: -moz-box;
  91     box-sizing: border-box;
  92   }
  93
  94   /* There are other rules that set direction and cursor on scrollbar,
  95    * expecting them to inherit into its children.  Explicitly inherit those,
  96    * overriding the 'all: initial; direction: ltr;' declarations above.
  97    */
  98   :is(scrollbarbutton, slider, thumb):where(:-moz-native-anonymous) {
  99     direction: inherit;
 100     cursor: inherit;
 101   }
 102 }
 103
 104 scrollbar[orient="vertical"],
 105 slider[orient="vertical"],
 106 thumb[orient="vertical"] {
 107   -moz-box-orient: vertical;
 108 }
 109
 110 thumb {
 111   /* Prevent -moz-user-modify declaration from designmode.css having an
 112    * effect. */
 113   -moz-user-modify: initial;
 114
 115   -moz-box-align: center;
 116   -moz-box-pack: center;
 117 }
 118
 119 /********** resizer **********/
 120
 121 resizer {
 122   position: relative;
 123   z-index: 2147483647;
 124   /* Widget gets decide on its own whether or not the native theme should apply,
 125      based on the context/OS theme. If it does not, SVG background will kick in. */
 126   appearance: auto;
 127   -moz-default-appearance: resizer;
 128
 129   /* native resizer should never flip on its own;
 130      we will flip it (or the SVG background) with CSS transform below. */
 131   direction: ltr;
 132   writing-mode: initial;
 133
 134   background: url("chrome://global/skin/icons/resizer.svg") no-repeat;
 135   background-size: 100% 100%;
 136   cursor: se-resize;
 137   width: 15px;
 138   height: 15px;
 139 }
 140
 141 /* bottomstart/bottomend is supported in XUL window only */
 142 resizer[dir="bottom"][flip],
 143 resizer[dir="bottomleft"],
 144 resizer[dir="bottomstart"]:-moz-locale-dir(ltr),
 145 resizer[dir="bottomend"]:-moz-locale-dir(rtl) {
 146   transform: scaleX(-1);
 147 }
 148
 149 resizer[dir="bottomleft"],
 150 resizer[dir="bottomstart"]:-moz-locale-dir(ltr),
 151 resizer[dir="bottomend"]:-moz-locale-dir(rtl) {
 152   cursor: sw-resize;
 153 }
 154
 155 resizer[dir="top"],
 156 resizer[dir="bottom"] {
 157   cursor: ns-resize;
 158 }
 159
 160 resizer[dir="left"] {
 161   transform: scaleX(-1);
 162 }
 163
 164 resizer[dir="left"],
 165 resizer[dir="right"] {
 166   cursor: ew-resize;
 167 }
 168
 169 resizer[dir="topleft"] {
 170   cursor: nw-resize;
 171 }
 172
 173 resizer[dir="topright"] {
 174   cursor: ne-resize;
 175 }
 176
 177 /********** scrollbar **********/
 178
 179 thumb {
 180   display: -moz-box !important;
 181 }
 182
 183 /* Don't collapse thumb when scrollbar is disabled. */
 184 thumb[collapsed="true"] {
 185   visibility: hidden;
 186 }
 187
 188 scrollbar, scrollbarbutton, scrollcorner, slider, thumb {
 189   user-select: none;
 190 }
 191
 192 scrollcorner {
 193   display: -moz-box !important;
 194 }
 195
 196 scrollcorner[hidden="true"] {
 197   display: none !important;
 198 }
 199
 200 scrollbar[value="hidden"] {
 201   visibility: hidden;
 202 }
 203
 204 @media (-moz-scrollbar-start-backward: 0) {
 205   scrollbarbutton[sbattr="scrollbar-up-top"] {
 206     display: none;
 207   }
 208 }
 209
 210 @media (-moz-scrollbar-start-forward: 0) {
 211   scrollbarbutton[sbattr="scrollbar-down-top"] {
 212     display: none;
 213   }
 214 }
 215
 216 @media (-moz-scrollbar-end-backward: 0) {
 217   scrollbarbutton[sbattr="scrollbar-up-bottom"] {
 218     display: none;
 219   }
 220 }
 221
 222 @media (-moz-scrollbar-end-forward: 0) {
 223   scrollbarbutton[sbattr="scrollbar-down-bottom"] {
 224     display: none;
 225   }
 226 }
 227
 228 @media (-moz-scrollbar-thumb-proportional) {
 229   thumb {
 230     -moz-box-flex: 1;
 231   }
 232 }