diff options
Diffstat (limited to 'toolkit/themes/shared/global-shared.css')
| -rw-r--r-- | toolkit/themes/shared/global-shared.css | 352 |
1 files changed, 352 insertions, 0 deletions
diff --git a/toolkit/themes/shared/global-shared.css b/toolkit/themes/shared/global-shared.css new file mode 100644 index 0000000000..c478b2745e --- /dev/null +++ b/toolkit/themes/shared/global-shared.css @@ -0,0 +1,352 @@ +/* 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; + + --arrowpanel-background: Field; + --arrowpanel-color: FieldText; + --arrowpanel-border-color: ThreeDShadow; + --arrowpanel-border-radius: 8px; + --arrowpanel-padding: 16px; + + --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); + --panel-disabled-color: color-mix(in srgb, currentColor 40%, transparent); + + --popup-notification-body-width: calc(31em - calc(2 * var(--arrowpanel-padding))); + + --toolbarbutton-icon-fill: currentColor; + --toolbarbutton-disabled-opacity: 0.4; + + --toolbar-field-background-color: Field; + --toolbar-field-color: FieldText; + --toolbar-field-border-color: ThreeDShadow; + --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-non-lwt-bgcolor: color-mix(in srgb, -moz-dialog 85%, white); + --toolbar-non-lwt-textcolor: -moz-dialogtext; + --toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor); + --toolbar-color: var(--toolbar-non-lwt-textcolor); + + &:-moz-lwtheme { + --toolbar-bgcolor: rgba(255,255,255,.4); + --toolbar-color: var(--lwt-text-color, inherit); + } + + /* 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); + + &:not(:-moz-lwtheme) { + --panel-disabled-color: GrayText; + } + } + + background-color: -moz-Dialog; + color: -moz-DialogText; + font: message-box; + + &[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); +} + +/* Lightweight theme roots */ + +:root:-moz-lwtheme { + toolbar, + &[lwt-popup="light"] panel { + color-scheme: light; + } + 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; +} + +/* General styles */ + +.plain { + appearance: none; + margin: 0 !important; + border: none; + padding: 0; +} + +moz-input-box, +html|input { + min-width: 0; +} + +html|button, +html|input, +html|textarea { + font: inherit; +} + +.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 { + color: var(--link-color); + cursor: pointer; + text-decoration: underline; + + &: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: 4px; + color: var(--button-color, inherit); + background-color: var(--button-bgcolor, color-mix(in srgb, currentColor 13%, transparent)); + 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 { + background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 17%, transparent)); + } + &:hover:active { + background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent)); + } + &[default], + &.primary { + color: var(--button-primary-color); + background-color: var(--button-primary-bgcolor); + + &:hover { + background-color: var(--button-primary-hover-bgcolor); + } + &:hover:active { + background-color: var(--button-primary-active-bgcolor); + } + } + } + + &[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-margin: 4px; + /* Set pointer-events: none; so that mousemove events can be handled by AutoScrollChild.jsm. */ + pointer-events: none; +} + +.autoscroller::part(content) { + border-radius: 100%; + background-clip: padding-box; + box-shadow: 0 0 var(--panel-shadow-margin) rgba(0,0,0,.2); + width: 100%; + height: 100%; +} + +.autoscroller[scrolldir="NS"] { + --autoscroll-background-image: url("chrome://global/skin/icons/autoscroll-vertical.svg"); +} + +.autoscroller[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-iconic-text { + padding-inline-start: 2em; +} + +.deemphasized { + color: var(--text-color-deemphasized); +} |