toolkit/themes/shared/global-shared.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 /* all localizable skin settings shall live here */
   6
   7 @import url("chrome://global/skin/design-system/tokens-platform.css");
   8 @import url("chrome://global/skin/design-system/text-and-typography.css");
   9
  10 @import url("chrome://global/locale/intl.css");
  11 @import url("chrome://global/content/widgets.css");
  12
  13 @import url("close-icon.css");
  14
  15 @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
  16 @namespace html url("http://www.w3.org/1999/xhtml");
  17
  18 :root {
  19   --default-focusring-width: 2px;
  20   --default-focusring: var(--default-focusring-width) dotted;
  21
  22   --arrowpanel-background: Field;
  23   --arrowpanel-color: FieldText;
  24   --arrowpanel-border-color: ThreeDShadow;
  25   --arrowpanel-border-radius: 8px;
  26   --arrowpanel-padding: 16px;
  27
  28   --arrowpanel-dimmed: color-mix(in srgb, currentColor 17%, transparent);
  29   --arrowpanel-dimmed-further: color-mix(in srgb, currentColor 30%, transparent);
  30
  31   --panel-separator-color: color-mix(in srgb, currentColor 25%, transparent);
  32   --panel-disabled-color: color-mix(in srgb, currentColor 40%, transparent);
  33
  34   --popup-notification-body-width: calc(31em - calc(2 * var(--arrowpanel-padding)));
  35
  36   --toolbarbutton-icon-fill: currentColor;
  37   --toolbarbutton-disabled-opacity: 0.4;
  38
  39   --toolbar-field-background-color: Field;
  40   --toolbar-field-color: FieldText;
  41   --toolbar-field-border-color: ThreeDShadow;
  42   --toolbar-field-focus-background-color: Field;
  43   --toolbar-field-focus-color: FieldText;
  44   --toolbar-field-focus-border-color: color-mix(in srgb, var(--focus-outline-color) 50%, transparent);
  45
  46   --toolbar-non-lwt-bgcolor: color-mix(in srgb, -moz-dialog 85%, white);
  47   --toolbar-non-lwt-textcolor: -moz-dialogtext;
  48   --toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor);
  49   --toolbar-color: var(--toolbar-non-lwt-textcolor);
  50
  51   &[lwtheme] {
  52     --toolbar-bgcolor: rgba(255,255,255,.4);
  53     --toolbar-color: var(--lwt-text-color, inherit);
  54   }
  55
  56   /* This color scheme should match --toolbar-color. However, note that
  57    * individual toolbars might override this (see ToolbarIconColor and the
  58    * brighttext attribute). */
  59   --toolbar-color-scheme: light dark;
  60   &[lwt-toolbar="light"] {
  61     --toolbar-color-scheme: light;
  62   }
  63   &[lwt-toolbar="dark"] {
  64     --toolbar-color-scheme: dark;
  65   }
  66
  67   @media (prefers-contrast) {
  68     /* Reduce the opacity of disabled toolbar buttons in order to increase
  69        contrast with the enabled state. */
  70     --toolbarbutton-disabled-opacity: 0.3;
  71
  72     --panel-separator-color: currentColor;
  73     --toolbar-field-focus-border-color: var(--focus-outline-color);
  74
  75     &:not([lwtheme]) {
  76       --panel-disabled-color: GrayText;
  77     }
  78   }
  79
  80   background-color: -moz-Dialog;
  81   color: -moz-DialogText;
  82   font: message-box;
  83
  84   &[dialogroot] {
  85     font: menu;
  86   }
  87 }
  88
  89 :is(menupopup, panel):where([type=arrow]) {
  90   --panel-background: var(--arrowpanel-background);
  91   --panel-color: var(--arrowpanel-color);
  92   --panel-border-color: var(--arrowpanel-border-color);
  93   --panel-border-radius: var(--arrowpanel-border-radius);
  94   --panel-padding: var(--arrowpanel-padding);
  95 }
  96
  97 /* Lightweight theme roots */
  98
  99 :root[lwtheme] {
 100   toolbar,
 101   &[lwt-popup="light"] panel {
 102     color-scheme: light;
 103   }
 104   toolbar[brighttext],
 105   &[lwt-popup="dark"] panel {
 106     color-scheme: dark;
 107   }
 108 }
 109
 110 :root[lwtheme-image] {
 111   text-shadow: 0 -0.5px 1.5px white;
 112 }
 113
 114 :root[lwtheme-image][lwtheme-brighttext] {
 115   text-shadow: 1px 1px 1.5px black;
 116 }
 117
 118 /* General styles */
 119
 120 .plain {
 121   appearance: none;
 122   margin: 0 !important;
 123   border: none;
 124   padding: 0;
 125 }
 126
 127 moz-input-box,
 128 html|input {
 129   min-width: 0;
 130 }
 131
 132 html|input {
 133   margin: 2px 4px;
 134 }
 135
 136 html|button,
 137 html|input,
 138 html|select,
 139 html|textarea {
 140   font: inherit;
 141 }
 142
 143 html|input:where(:not([type=radio i], [type=checkbox i], [type=range i])),
 144 html|textarea {
 145   appearance: none;
 146   padding: var(--space-small);
 147   border: 1px solid var(--input-border-color, ThreeDShadow);
 148   border-radius: var(--border-radius-small);
 149   margin: 0;
 150   background-color: var(--input-bgcolor, Field);
 151   color: var(--input-color, FieldText);
 152
 153   &:where(:user-invalid) {
 154     border-color: var(--color-error-outline);
 155   }
 156
 157   &:where(:focus-visible) {
 158     outline: var(--focus-outline);
 159     outline-offset: var(--focus-outline-inset);
 160   }
 161 }
 162
 163 /* adapted from toolkit/themes/shared/menulist-shared.css */
 164 html|select:where(:not([size], [multiple])) {
 165   appearance: none;
 166   padding: 6px 16px;
 167   padding-inline-end: 32px; /* 2 * 10px padding + image's 12px width */
 168   margin: 5px 2px 3px;
 169   border: none;
 170   border-radius: var(--border-radius-small);
 171
 172   font-weight: var(--font-weight-bold);
 173
 174   color: var(--button-color, ButtonText);
 175   background-color: var(--button-bgcolor, ButtonFace);
 176   background-image: url(chrome://global/skin/icons/arrow-down-12.svg);
 177   background-position: right 10px center;
 178   background-repeat: no-repeat;
 179   -moz-context-properties: fill;
 180   fill: currentColor;
 181
 182   &:-moz-locale-dir(rtl) {
 183     background-position-x: left 10px;
 184   }
 185
 186   &:hover {
 187     background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 10%, ButtonFace));
 188   }
 189
 190   &:hover:active {
 191     background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace));
 192   }
 193
 194   &:focus-visible {
 195     outline: var(--focus-outline);
 196     outline-offset: var(--focus-outline-offset);
 197   }
 198 }
 199
 200 .header {
 201   font-weight: var(--font-weight-bold);
 202 }
 203
 204 .indent {
 205   margin-inline-start: 23px;
 206 }
 207
 208 .box-padded {
 209   padding: 5px;
 210 }
 211
 212 /* XUL iframe */
 213
 214 xul|iframe {
 215   border: none;
 216   min-width: 10px;
 217   min-height: 10px;
 218 }
 219
 220 /* Label/description formatting */
 221
 222 xul|description,
 223 xul|label {
 224   cursor: default;
 225   margin-block: 1px 2px;
 226   margin-inline: 6px 5px;
 227 }
 228
 229 xul|description {
 230   margin-bottom: 4px;
 231 }
 232
 233 xul|label[disabled="true"] {
 234   color: GrayText;
 235 }
 236
 237 .tooltip-label {
 238   margin: 0;
 239   word-wrap: break-word;
 240   /* We must specify a min-width, otherwise word-wrap:break-word doesn't work.
 241      See Bug 630864. */
 242   min-width: 1px;
 243 }
 244
 245 /* Links */
 246
 247 .text-link,
 248 a {
 249   color: var(--link-color);
 250   cursor: pointer;
 251   text-decoration: underline;
 252
 253   &:focus-visible {
 254     outline: var(--focus-outline);
 255     outline-offset: var(--link-focus-outline-offset);
 256     border-radius: 1px;
 257   }
 258 }
 259
 260
 261 /* Override properties set on buttons, to display the links without unwanted styling */
 262 button.text-link {
 263   appearance: none;
 264   background-color: transparent;
 265   border: none;
 266   min-width: 0;
 267   margin: 0;
 268   padding: 0;
 269   font: inherit;
 270 }
 271
 272 button.text-link .button-text {
 273  /* Cancel out the default internal margin */
 274   margin: 0;
 275 }
 276
 277 /* Textbox context menu */
 278
 279 .textbox-contextmenu:-moz-locale-dir(rtl) {
 280   direction: rtl;
 281 }
 282
 283 /* Panel footer buttons */
 284
 285 .panel-footer {
 286   margin: 8px 16px 16px;
 287 }
 288
 289 .footer-button {
 290   appearance: none;
 291   border: 0;
 292   border-radius: var(--border-radius-small);
 293   color: var(--button-color, inherit);
 294   background-color: var(--button-bgcolor, color-mix(in srgb, currentColor 13%, transparent));
 295   padding: .45em 1em;
 296   min-height: var(--size-item-large);
 297   font-weight: 600;
 298   min-width: 0;
 299   margin-inline: 8px 0;
 300   margin-bottom: 0;
 301
 302   &.small-button {
 303     margin: 0;
 304     min-height: var(--size-item-medium);
 305     font-size: var(--font-size-small);
 306     align-items: center;
 307   }
 308
 309   &[disabled] {
 310     opacity: 0.4;
 311   }
 312
 313   &:focus-visible {
 314     outline: var(--focus-outline);
 315     outline-offset: var(--focus-outline-offset);
 316   }
 317
 318   &:not([disabled]) {
 319     &:hover {
 320       background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 17%, transparent));
 321     }
 322     &:hover:active {
 323       background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent));
 324     }
 325     &[default],
 326     &.primary {
 327       color: var(--button-primary-color);
 328       background-color: var(--button-primary-bgcolor);
 329
 330       &:hover {
 331         background-color: var(--button-primary-hover-bgcolor);
 332       }
 333       &:hover:active {
 334         background-color: var(--button-primary-active-bgcolor);
 335       }
 336     }
 337   }
 338
 339   &[type=menu] > .button-box > .button-menu-dropmarker {
 340     appearance: none;
 341     display: flex;
 342     content: url("chrome://global/skin/icons/arrow-down-12.svg");
 343     -moz-context-properties: fill;
 344     fill: currentColor;
 345   }
 346 }
 347
 348 /* Autoscroll popup */
 349
 350 .autoscroller {
 351   appearance: none;
 352
 353   /* Resets the native styles in windows and macOS */
 354   border: none;
 355   background-color: transparent;
 356   -moz-window-shadow: none;
 357
 358   --autoscroll-background-image: url("chrome://global/skin/icons/autoscroll.svg");
 359   --panel-border-color: rgba(0,0,0,.4);
 360   --panel-padding: 0;
 361   --panel-background: rgba(249,249,250,.8) no-repeat center var(--autoscroll-background-image);
 362   --panel-shadow-margin: 4px;
 363   /* Set pointer-events: none; so that mousemove events can be handled by AutoScrollChild.sys.mjs. */
 364   pointer-events: none;
 365 }
 366
 367 .autoscroller::part(content) {
 368   border-radius: 100%;
 369   background-clip: padding-box;
 370   box-shadow: 0 0 var(--panel-shadow-margin) rgba(0,0,0,.2);
 371   width: 100%;
 372   height: 100%;
 373 }
 374
 375 .autoscroller[scrolldir="NS"] {
 376   --autoscroll-background-image: url("chrome://global/skin/icons/autoscroll-vertical.svg");
 377 }
 378
 379 .autoscroller[scrolldir="EW"] {
 380   --autoscroll-background-image: url("chrome://global/skin/icons/autoscroll-horizontal.svg");
 381 }
 382
 383 /* Combobox dropdown renderer */
 384 #ContentSelectDropdown > menupopup {
 385   /* The menupopup itself should always be rendered LTR to ensure the scrollbar aligns with
 386    * the dropdown arrow on the dropdown widget. If a menuitem is RTL, its style will be set accordingly */
 387   direction: ltr;
 388 }
 389
 390 #ContentSelectDropdown > menupopup::part(arrowscrollbox-scrollbox) {
 391   scrollbar-width: var(--content-select-scrollbar-width, auto);
 392 }
 393
 394 #ContentSelectDropdown > menupopup[customoptionstyling="true"]::part(arrowscrollbox) {
 395   /* When authors specify a custom background, we use background-image to specify the author-supplied color.
 396    * In that case, we don't want stuff like custom appearance or custom
 397    * backgrounds, so we make sure to apply it on top of the default background. */
 398   background-image: var(--content-select-background-image, none);
 399   background-color: -moz-Combobox;
 400 }
 401
 402 /* Full width separator in select */
 403 #ContentSelectDropdown menuseparator {
 404   padding-inline: 0;
 405 }
 406
 407 /* Indent options in optgroups */
 408 .contentSelectDropdown-ingroup .menu-iconic-text {
 409   padding-inline-start: 2em;
 410 }
 411
 412 .deemphasized {
 413   color: var(--text-color-deemphasized);
 414 }