mirror of
https://github.com/mozilla/pdf.js.git
synced 2026-08-01 11:57:20 +02:00
b4d028132b
The chrome is now authored against Firefox design-token names with the shipped value as a fallback `var(--fx-token, <literal>)` so colors, borders and radii follow Firefox instead of having to be re-synced by hand. In MOZCENTRAL viewer.css imports chrome://global/skin/design-system/tokens-brand.css, gated on the new pdfjs.enableNova pref (default false, read straight from CSS via -moz-pref()). With the pref off the sheet isn't applied, every fallback resolves, and the viewer renders as before, as it also does in the GENERIC and components builds, which never see the chrome sheet. Consuming a token means never declaring its name in an unlayered rule, which would shadow Firefox's for the whole subtree; --focus-outline, --border-color and --text-color/--button-border-color are therefore renamed to --editor-selection-outline, --signature-border-color and --views-*. In forced colors each state reads a matching background/foreground/border triple so it can't collapse to a single system color. The dialog button styling also moves out of `.dialog .mainContainer button` into a shared .primaryButton/.secondaryButton primitive (buttons.css, imported from pdf_viewer.css so the components build gets it too). The password, document-properties, print and undo-bar buttons use it in place of .dialogButton, and the custom radio appearance gives way to native controls tinted with accent-color.
231 lines
7.1 KiB
CSS
231 lines
7.1 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/. */
|
|
|
|
/* The Firefox foundation tokens below are read with the shipped literal as the
|
|
fallback, so MOZCENTRAL tracks the design system (tokens-brand.css, linked
|
|
from viewer.html) while every other build keeps this self-contained
|
|
moz-toggle copy. Declaring those token names here instead would shadow
|
|
Firefox's (unlayered beats @layer), and a bare var() would both trip
|
|
stylelint's no-unknown-custom-properties and collapse the toggle to a
|
|
zero-size transparent element if the chrome sheet ever failed to load. */
|
|
|
|
/*
|
|
The original file is located at:
|
|
https://hg.mozilla.org/mozilla-central/file/168f6caa3b160c12413f9e9ad9df1db49c6b4cdf/toolkit/content/widgets/moz-toggle/moz-toggle.css
|
|
|
|
The original file is licensed under the Mozilla Public License, v. 2.0.
|
|
This file is a modified version of the original file.
|
|
|
|
The pseudo-selector :host has been replaced by .toggle-button.
|
|
|
|
TODO: check from times to times if the original file has been updated (and
|
|
in such a case don't forget to change the revision in the above link).
|
|
*/
|
|
|
|
.toggle-button {
|
|
--toggle-background-color: var(
|
|
--button-background-color,
|
|
color-mix(in srgb, currentColor 7%, transparent)
|
|
);
|
|
--toggle-background-color-hover: var(
|
|
--button-background-color-hover,
|
|
color-mix(in srgb, currentColor 14%, transparent)
|
|
);
|
|
--toggle-background-color-active: var(
|
|
--button-background-color-active,
|
|
color-mix(in srgb, currentColor 21%, transparent)
|
|
);
|
|
--toggle-background-color-pressed: var(
|
|
--color-accent-primary,
|
|
light-dark(#0060df, #0df)
|
|
);
|
|
--toggle-background-color-pressed-hover: var(
|
|
--color-accent-primary-hover,
|
|
light-dark(#0250bb, #80ebff)
|
|
);
|
|
--toggle-background-color-pressed-active: var(
|
|
--color-accent-primary-active,
|
|
light-dark(#054096, #aaf2ff)
|
|
);
|
|
--toggle-border-color: var(
|
|
--border-color-interactive,
|
|
light-dark(#8f8f9d, #f9f9fa)
|
|
);
|
|
--toggle-border-color-hover: var(--toggle-border-color);
|
|
--toggle-border-color-active: var(--toggle-border-color);
|
|
--toggle-border-radius: var(--border-radius-circle, 9999px);
|
|
--toggle-border-width: var(--border-width, 1px);
|
|
--toggle-height: var(--size-item-small, 16px);
|
|
--toggle-width: var(--size-item-large, 32px);
|
|
--toggle-dot-background-color: var(--toggle-border-color);
|
|
--toggle-dot-background-color-hover: var(--toggle-dot-background-color);
|
|
--toggle-dot-background-color-active: var(--toggle-dot-background-color);
|
|
--toggle-dot-background-color-on-pressed: var(
|
|
--background-color-canvas,
|
|
light-dark(white, #1c1b22)
|
|
);
|
|
--toggle-dot-margin: 1px;
|
|
--toggle-dot-height: calc(
|
|
var(--toggle-height) - 2 * var(--toggle-dot-margin) - 2 *
|
|
var(--toggle-border-width)
|
|
);
|
|
--toggle-dot-width: var(--toggle-dot-height);
|
|
--toggle-dot-transform-x: calc(
|
|
var(--toggle-width) - 4 * var(--toggle-dot-margin) - var(--toggle-dot-width)
|
|
);
|
|
--input-width: var(--toggle-width);
|
|
|
|
appearance: none;
|
|
padding: 0;
|
|
border: var(--toggle-border-width) solid var(--toggle-border-color);
|
|
height: var(--toggle-height);
|
|
width: var(--toggle-width);
|
|
border-radius: var(--toggle-border-radius);
|
|
background-color: var(--toggle-background-color);
|
|
box-sizing: border-box;
|
|
|
|
&:focus-visible {
|
|
outline: var(--focus-ring-outline);
|
|
outline-offset: var(--focus-outline-offset, 2px);
|
|
}
|
|
|
|
&:enabled:hover {
|
|
background-color: var(--toggle-background-color-hover);
|
|
border-color: var(--toggle-border-color);
|
|
}
|
|
|
|
&:enabled:hover:active {
|
|
background-color: var(--toggle-background-color-active);
|
|
border-color: var(--toggle-border-color);
|
|
}
|
|
|
|
&::before {
|
|
display: block;
|
|
content: "";
|
|
background-color: var(--toggle-dot-background-color);
|
|
height: var(--toggle-dot-height);
|
|
width: var(--toggle-dot-width);
|
|
margin: var(--toggle-dot-margin);
|
|
border-radius: var(--toggle-border-radius);
|
|
translate: 0;
|
|
}
|
|
}
|
|
|
|
.toggle-button[aria-pressed="true"] {
|
|
background-color: var(--toggle-background-color-pressed);
|
|
border-color: transparent;
|
|
|
|
&:enabled:hover {
|
|
background-color: var(--toggle-background-color-pressed-hover);
|
|
border-color: transparent;
|
|
}
|
|
|
|
&:enabled:hover:active {
|
|
background-color: var(--toggle-background-color-pressed-active);
|
|
border-color: transparent;
|
|
}
|
|
|
|
&::before {
|
|
translate: var(--toggle-dot-transform-x);
|
|
background-color: var(--toggle-dot-background-color-on-pressed);
|
|
}
|
|
|
|
&:enabled:hover::before,
|
|
&:enabled:hover:active::before {
|
|
background-color: var(--toggle-dot-background-color-on-pressed);
|
|
}
|
|
|
|
&:-moz-locale-dir(rtl)::before,
|
|
&:dir(rtl)::before {
|
|
translate: calc(-1 * var(--toggle-dot-transform-x));
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.toggle-button::before {
|
|
transition: translate 100ms;
|
|
}
|
|
}
|
|
|
|
@media (prefers-contrast) {
|
|
.toggle-button:enabled:hover {
|
|
border-color: var(--toggle-border-color-hover);
|
|
}
|
|
|
|
.toggle-button:enabled:hover:active {
|
|
border-color: var(--toggle-border-color-active);
|
|
}
|
|
|
|
.toggle-button[aria-pressed="true"]:enabled {
|
|
border-color: var(--toggle-border-color);
|
|
position: relative;
|
|
|
|
&:hover {
|
|
border-color: var(--toggle-border-color-hover);
|
|
|
|
&:active {
|
|
background-color: var(--toggle-dot-background-color-active);
|
|
border-color: var(--toggle-dot-background-color-hover);
|
|
}
|
|
}
|
|
}
|
|
|
|
.toggle-button:enabled:hover::before,
|
|
.toggle-button:enabled:hover:active::before {
|
|
background-color: var(--toggle-dot-background-color-hover);
|
|
}
|
|
}
|
|
|
|
@media (forced-colors) {
|
|
.toggle-button {
|
|
--toggle-background-color: var(--button-background-color, ButtonFace);
|
|
--toggle-background-color-pressed: var(--color-accent-primary, ButtonText);
|
|
--toggle-background-color-pressed-hover: var(
|
|
--color-accent-primary-hover,
|
|
SelectedItem
|
|
);
|
|
--toggle-background-color-pressed-active: var(
|
|
--color-accent-primary-active,
|
|
SelectedItem
|
|
);
|
|
--toggle-border-color: var(--border-color-interactive, ButtonText);
|
|
--toggle-dot-background-color: var(--color-accent-primary, ButtonText);
|
|
--toggle-dot-background-color-hover: var(
|
|
--color-accent-primary-hover,
|
|
SelectedItem
|
|
);
|
|
--toggle-dot-background-color-active: var(
|
|
--color-accent-primary-active,
|
|
SelectedItem
|
|
);
|
|
--toggle-dot-background-color-on-pressed: var(
|
|
--button-background-color,
|
|
ButtonFace
|
|
);
|
|
--toggle-border-color-hover: var(
|
|
--border-color-interactive-hover,
|
|
SelectedItem
|
|
);
|
|
--toggle-border-color-active: var(
|
|
--border-color-interactive-active,
|
|
ButtonText
|
|
);
|
|
}
|
|
|
|
.toggle-button[aria-pressed="true"]:enabled::after {
|
|
border: 1px solid var(--button-background-color, ButtonFace);
|
|
content: "";
|
|
position: absolute;
|
|
height: var(--toggle-height);
|
|
width: var(--toggle-width);
|
|
display: block;
|
|
border-radius: var(--toggle-border-radius);
|
|
inset: -2px;
|
|
}
|
|
|
|
.toggle-button[aria-pressed="true"]:enabled:hover:active::after {
|
|
border-color: var(--toggle-border-color-active);
|
|
}
|
|
}
|