494 lines
13 KiB
CSS
494 lines
13 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/. */
|
|
|
|
/* all localizable skin settings shall live here */
|
|
|
|
@import url("chrome://global/skin/design-system/tokens-platform.css");
|
|
@import url("chrome://global/skin/design-system/text-and-typography.css");
|
|
|
|
@import url("chrome://global/locale/intl.css");
|
|
@import url("chrome://global/content/widgets.css");
|
|
|
|
@import url("close-icon.css");
|
|
|
|
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
|
|
@namespace html url("http://www.w3.org/1999/xhtml");
|
|
|
|
:root {
|
|
--default-focusring-width: 2px;
|
|
--default-focusring: var(--default-focusring-width) dotted;
|
|
|
|
--animation-easing-function: cubic-bezier(.07, .95, 0, 1);
|
|
|
|
--arrowpanel-background: Field;
|
|
--arrowpanel-color: FieldText;
|
|
--arrowpanel-border-color: ThreeDShadow;
|
|
--arrowpanel-border-radius: 8px;
|
|
--arrowpanel-padding: 16px;
|
|
--arrowpanel-shadow-margin: 4px;
|
|
|
|
--arrowpanel-menuitem-border-radius: 4px;
|
|
--arrowpanel-menuitem-margin-block: 0px;
|
|
--arrowpanel-menuitem-margin-inline: 8px;
|
|
--arrowpanel-menuitem-margin: var(--arrowpanel-menuitem-margin-block) var(--arrowpanel-menuitem-margin-inline);
|
|
--arrowpanel-menuitem-padding-block: 8px;
|
|
--arrowpanel-menuitem-padding-inline: 8px;
|
|
--arrowpanel-menuitem-padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline);
|
|
|
|
@media (-moz-platform: macos) {
|
|
/* On macOS we use native shadows via -moz-window-shadow */
|
|
--arrowpanel-shadow-margin: 0px;
|
|
}
|
|
|
|
--arrowpanel-dimmed: color-mix(in srgb, currentColor 17%, transparent);
|
|
--arrowpanel-dimmed-further: color-mix(in srgb, currentColor 30%, transparent);
|
|
|
|
--panel-separator-color: color-mix(in srgb, currentColor 25%, transparent);
|
|
|
|
--popup-notification-body-width: calc(31em - calc(2 * var(--arrowpanel-padding)));
|
|
|
|
--input-border-color: color-mix(in srgb, currentColor 46%, transparent);
|
|
|
|
--toolbarbutton-icon-fill: currentColor;
|
|
--toolbarbutton-icon-fill-attention: AccentColor;
|
|
--toolbarbutton-icon-fill-attention-text: AccentColorText;
|
|
--toolbarbutton-disabled-opacity: 0.4;
|
|
|
|
--toolbar-field-background-color: Field;
|
|
--toolbar-field-color: FieldText;
|
|
--toolbar-field-border-color: var(--input-border-color);
|
|
--toolbar-field-focus-background-color: Field;
|
|
--toolbar-field-focus-color: FieldText;
|
|
--toolbar-field-focus-border-color: color-mix(in srgb, var(--focus-outline-color) 50%, transparent);
|
|
|
|
--toolbar-bgcolor: color-mix(in srgb, -moz-dialog 85%, white);
|
|
--toolbar-color: -moz-dialogtext;
|
|
|
|
/* Override some toolbar colors when not under prefers-contrast. Note that
|
|
* for the browser window these might be overridden by
|
|
* browser-colors.css.
|
|
*
|
|
* For the light theme we use .05 alpha, to increase the contrast of the
|
|
* text. For the dark theme, we use a darker background, which works because
|
|
* the toolbar background applies some white unconditionally.
|
|
*/
|
|
@media not (prefers-contrast) {
|
|
--toolbar-field-border-color: transparent;
|
|
--toolbar-field-background-color: light-dark(rgba(0, 0, 0, .05), rgba(0, 0, 0, .3));
|
|
--toolbar-field-color: inherit;
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
--toolbar-bgcolor: white;
|
|
}
|
|
}
|
|
|
|
&[lwtheme] {
|
|
--toolbar-bgcolor: rgba(255,255,255,.4);
|
|
--toolbar-color: var(--lwt-text-color, inherit);
|
|
|
|
--toolbarbutton-icon-fill-attention: light-dark(rgb(0, 97, 224), rgb(0, 221, 255));
|
|
--toolbarbutton-icon-fill-attention-text-light: rgb(240, 240, 244);
|
|
--toolbarbutton-icon-fill-attention-text-dark: rgb(28, 27, 34);
|
|
--toolbarbutton-icon-fill-attention-text: light-dark(
|
|
var(--toolbarbutton-icon-fill-attention-text-light),
|
|
var(--toolbarbutton-icon-fill-attention-text-dark)
|
|
);
|
|
&[lwt-icon-fill-attention="dark"] {
|
|
--toolbarbutton-icon-fill-attention-text: var(--toolbarbutton-icon-fill-attention-text-light);
|
|
}
|
|
&[lwt-icon-fill-attention="light"] {
|
|
--toolbarbutton-icon-fill-attention-text: var(--toolbarbutton-icon-fill-attention-text-dark);
|
|
}
|
|
}
|
|
|
|
/* This color scheme should match --toolbar-color. However, note that
|
|
* individual toolbars might override this (see ToolbarIconColor and the
|
|
* brighttext attribute). */
|
|
--toolbar-color-scheme: light dark;
|
|
&[lwt-toolbar="light"] {
|
|
--toolbar-color-scheme: light;
|
|
}
|
|
&[lwt-toolbar="dark"] {
|
|
--toolbar-color-scheme: dark;
|
|
}
|
|
|
|
@media (prefers-contrast) {
|
|
/* Reduce the opacity of disabled toolbar buttons in order to increase
|
|
contrast with the enabled state. */
|
|
--toolbarbutton-disabled-opacity: 0.3;
|
|
|
|
--panel-separator-color: currentColor;
|
|
--toolbar-field-focus-border-color: var(--focus-outline-color);
|
|
|
|
--input-border-color: currentColor;
|
|
}
|
|
|
|
@media (forced-colors) {
|
|
--input-border-color: ThreeDShadow;
|
|
}
|
|
|
|
background-color: -moz-Dialog;
|
|
color: -moz-DialogText;
|
|
font: message-box;
|
|
-moz-box-collapse: legacy;
|
|
|
|
&[dialogroot] {
|
|
font: menu;
|
|
}
|
|
}
|
|
|
|
:is(menupopup, panel):where([type=arrow]) {
|
|
--panel-background: var(--arrowpanel-background);
|
|
--panel-color: var(--arrowpanel-color);
|
|
--panel-border-color: var(--arrowpanel-border-color);
|
|
--panel-border-radius: var(--arrowpanel-border-radius);
|
|
--panel-padding: var(--arrowpanel-padding);
|
|
--panel-shadow-margin: var(--arrowpanel-shadow-margin);
|
|
--menuitem-border-radius: var(--arrowpanel-menuitem-border-radius);
|
|
--menuitem-padding: var(--arrowpanel-menuitem-padding);
|
|
--menuitem-margin: var(--arrowpanel-menuitem-margin);
|
|
}
|
|
|
|
/* Lightweight theme roots */
|
|
|
|
:root[lwtheme] {
|
|
&,
|
|
toolbar,
|
|
&[lwt-popup="light"] panel {
|
|
color-scheme: light;
|
|
}
|
|
&[lwtheme-brighttext],
|
|
toolbar[brighttext],
|
|
&[lwt-popup="dark"] panel {
|
|
color-scheme: dark;
|
|
}
|
|
}
|
|
|
|
:root[lwtheme-image] {
|
|
text-shadow: 0 -0.5px 1.5px white;
|
|
}
|
|
|
|
:root[lwtheme-image][lwtheme-brighttext] {
|
|
text-shadow: 1px 1px 1.5px black;
|
|
}
|
|
|
|
/* Rules for 'hiding' portions of the chrome for special
|
|
kinds of windows with toolbars (not just browser windows) */
|
|
: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;
|
|
}
|
|
|
|
/* General styles */
|
|
|
|
moz-input-box,
|
|
html|input {
|
|
min-width: 0;
|
|
}
|
|
|
|
html|input {
|
|
margin: 2px 4px;
|
|
}
|
|
|
|
html|button,
|
|
html|input,
|
|
html|select,
|
|
html|textarea {
|
|
font: inherit;
|
|
}
|
|
|
|
html|input:where(:not([type=radio i], [type=checkbox i], [type=range i])),
|
|
html|textarea {
|
|
appearance: none;
|
|
padding: var(--space-small);
|
|
border: 1px solid var(--input-border-color);
|
|
border-radius: var(--border-radius-small);
|
|
margin: 0;
|
|
background-color: var(--input-bgcolor, Field);
|
|
color: var(--input-color, FieldText);
|
|
|
|
&:where(:user-invalid) {
|
|
border-color: var(--outline-color-error);
|
|
}
|
|
|
|
&:where(:focus-visible) {
|
|
outline: var(--focus-outline);
|
|
outline-offset: var(--focus-outline-inset);
|
|
}
|
|
}
|
|
|
|
/* adapted from toolkit/themes/shared/menulist.css */
|
|
html|select:where(:not([size], [multiple])) {
|
|
appearance: none;
|
|
padding: 6px 16px;
|
|
padding-inline-end: 32px; /* 2 * 10px padding + image's 12px width */
|
|
margin: 5px 2px 3px;
|
|
border: none;
|
|
border-radius: var(--border-radius-small);
|
|
|
|
font-weight: var(--font-weight-bold);
|
|
|
|
color: var(--button-text-color);
|
|
background-color: var(--button-background-color);
|
|
background-image: url(chrome://global/skin/icons/arrow-down-12.svg);
|
|
background-position: right 10px center;
|
|
background-repeat: no-repeat;
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
|
|
&:-moz-locale-dir(rtl) {
|
|
background-position-x: left 10px;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var(--button-background-color-hover);
|
|
}
|
|
|
|
&:hover:active {
|
|
background-color: var(--button-background-color-active);
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: var(--focus-outline);
|
|
outline-offset: var(--focus-outline-offset);
|
|
}
|
|
}
|
|
|
|
.header {
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
.indent {
|
|
margin-inline-start: 23px;
|
|
}
|
|
|
|
.box-padded {
|
|
padding: 5px;
|
|
}
|
|
|
|
/* XUL iframe */
|
|
|
|
xul|iframe {
|
|
border: none;
|
|
min-width: 10px;
|
|
min-height: 10px;
|
|
}
|
|
|
|
/* Label/description formatting */
|
|
|
|
xul|description,
|
|
xul|label {
|
|
cursor: default;
|
|
margin-block: 1px 2px;
|
|
margin-inline: 6px 5px;
|
|
}
|
|
|
|
xul|description {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
xul|label[disabled="true"] {
|
|
color: GrayText;
|
|
}
|
|
|
|
.tooltip-label {
|
|
margin: 0;
|
|
word-wrap: break-word;
|
|
/* We must specify a min-width, otherwise word-wrap:break-word doesn't work.
|
|
See Bug 630864. */
|
|
min-width: 1px;
|
|
}
|
|
|
|
/* Links */
|
|
|
|
.text-link,
|
|
a,
|
|
::part(support-link) {
|
|
color: var(--link-color);
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
|
|
&:hover {
|
|
color: var(--link-color-hover);
|
|
}
|
|
|
|
&:hover:active {
|
|
color: var(--link-color-active);
|
|
text-decoration: none;
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: var(--focus-outline);
|
|
outline-offset: var(--link-focus-outline-offset);
|
|
border-radius: 1px;
|
|
}
|
|
}
|
|
|
|
|
|
/* Override properties set on buttons, to display the links without unwanted styling */
|
|
button.text-link {
|
|
appearance: none;
|
|
background-color: transparent;
|
|
border: none;
|
|
min-width: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
font: inherit;
|
|
}
|
|
|
|
button.text-link .button-text {
|
|
/* Cancel out the default internal margin */
|
|
margin: 0;
|
|
}
|
|
|
|
/* Textbox context menu */
|
|
|
|
.textbox-contextmenu:-moz-locale-dir(rtl) {
|
|
direction: rtl;
|
|
}
|
|
|
|
/* Panel footer buttons */
|
|
|
|
.panel-footer {
|
|
margin: 8px 16px 16px;
|
|
}
|
|
|
|
.footer-button {
|
|
appearance: none;
|
|
border: 0;
|
|
border-radius: var(--border-radius-small);
|
|
color: var(--button-text-color);
|
|
background-color: var(--button-background-color);
|
|
padding: .45em 1em;
|
|
min-height: var(--size-item-large);
|
|
font-weight: 600;
|
|
min-width: 0;
|
|
margin-inline: 8px 0;
|
|
margin-bottom: 0;
|
|
|
|
&.small-button {
|
|
margin: 0;
|
|
min-height: var(--size-item-medium);
|
|
font-size: var(--font-size-small);
|
|
align-items: center;
|
|
}
|
|
|
|
&[disabled] {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: var(--focus-outline);
|
|
outline-offset: var(--focus-outline-offset);
|
|
}
|
|
|
|
&:not([disabled]) {
|
|
&:hover {
|
|
color: var(--button-text-color-hover);
|
|
background-color: var(--button-background-color-hover);
|
|
}
|
|
&:hover:active,
|
|
&[open] {
|
|
color: var(--button-text-color-active);
|
|
background-color: var(--button-background-color-active);
|
|
}
|
|
&[default],
|
|
&.primary {
|
|
color: var(--button-text-color-primary);
|
|
background-color: var(--color-accent-primary);
|
|
&:hover {
|
|
color: var(--button-text-color-primary-hover);
|
|
background-color: var(--color-accent-primary-hover);
|
|
}
|
|
&:hover:active,
|
|
&[open] {
|
|
color: var(--button-text-color-primary-active);
|
|
background-color: var(--color-accent-primary-active);
|
|
}
|
|
}
|
|
}
|
|
|
|
&[type=menu] > .button-box > .button-menu-dropmarker {
|
|
appearance: none;
|
|
display: flex;
|
|
content: url("chrome://global/skin/icons/arrow-down-12.svg");
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
}
|
|
}
|
|
|
|
/* Autoscroll popup */
|
|
|
|
.autoscroller {
|
|
appearance: none;
|
|
|
|
/* Resets the native styles in windows and macOS */
|
|
border: none;
|
|
background-color: transparent;
|
|
-moz-window-shadow: none;
|
|
|
|
--autoscroll-background-image: url("chrome://global/skin/icons/autoscroll.svg");
|
|
--panel-border-color: rgba(0,0,0,.4);
|
|
--panel-padding: 0;
|
|
--panel-background: rgba(249,249,250,.8) no-repeat center var(--autoscroll-background-image);
|
|
--panel-shadow: 0 0 var(--panel-shadow-margin) rgba(0,0,0,.2);
|
|
--panel-shadow-margin: 4px;
|
|
--panel-border-radius: 100%;
|
|
|
|
/* Set pointer-events: none; so that mousemove events can be handled by AutoScrollChild.sys.mjs. */
|
|
pointer-events: none;
|
|
|
|
&::part(content) {
|
|
background-clip: padding-box;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
&[scrolldir="NS"] {
|
|
--autoscroll-background-image: url("chrome://global/skin/icons/autoscroll-vertical.svg");
|
|
}
|
|
|
|
&[scrolldir="EW"] {
|
|
--autoscroll-background-image: url("chrome://global/skin/icons/autoscroll-horizontal.svg");
|
|
}
|
|
}
|
|
|
|
|
|
/* 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;
|
|
}
|
|
|
|
#ContentSelectDropdown > menupopup::part(arrowscrollbox-scrollbox) {
|
|
scrollbar-width: var(--content-select-scrollbar-width, auto);
|
|
}
|
|
|
|
#ContentSelectDropdown > menupopup[customoptionstyling="true"]::part(arrowscrollbox) {
|
|
/* When authors specify a custom background, we use background-image to specify the author-supplied color.
|
|
* In that case, we don't want stuff like custom appearance or custom
|
|
* backgrounds, so we make sure to apply it on top of the default background. */
|
|
background-image: var(--content-select-background-image, none);
|
|
background-color: -moz-Combobox;
|
|
}
|
|
|
|
/* Full width separator in select */
|
|
#ContentSelectDropdown menuseparator {
|
|
padding-inline: 0;
|
|
}
|
|
|
|
/* Indent options in optgroups */
|
|
.contentSelectDropdown-ingroup .menu-text {
|
|
padding-inline-start: 2em;
|
|
}
|
|
|
|
.deemphasized {
|
|
color: var(--text-color-deemphasized);
|
|
}
|