mirror of
https://github.com/mozilla/pdf.js.git
synced 2026-08-01 20:07:22 +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.
261 lines
7.0 KiB
CSS
261 lines
7.0 KiB
CSS
/* Copyright 2022 Mozilla Foundation
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
|
|
.dialog {
|
|
--dialog-bg-color: var(--background-color-canvas, light-dark(white, #1c1b22));
|
|
--dialog-border-color: var(
|
|
--background-color-canvas,
|
|
light-dark(white, #1c1b22)
|
|
);
|
|
--dialog-shadow: 0 2px 14px 0 light-dark(rgb(58 57 68 / 0.2), #15141a);
|
|
--text-secondary-color: light-dark(#5b5b66, #cfcfd8);
|
|
--separator-color: light-dark(#f0f0f4, #52525e);
|
|
|
|
/* A textarea is an interactive control, so it takes the interactive border
|
|
token (whose light value is the shipped literal) and not --border-color,
|
|
which is the low-contrast decorative one. */
|
|
--textarea-border-color: var(--border-color-interactive, #8f8f9d);
|
|
--textarea-bg-color: light-dark(white, #42414d);
|
|
--textarea-fg-color: var(--text-secondary-color);
|
|
|
|
/* .primaryButton / .secondaryButton button tokens are defined once, at :root
|
|
in buttons.css (the shared primitive), and inherit into dialogs. */
|
|
|
|
--input-text-bg-color: light-dark(white, #42414d);
|
|
--input-text-fg-color: var(--text-primary-color);
|
|
|
|
@media screen and (forced-colors: active) {
|
|
--dialog-bg-color: var(--background-color-canvas, Canvas);
|
|
/* border-only: --background-color-canvas would resolve to Canvas in FF HCM
|
|
(= the dialog bg) and the shadow is none here, leaving no boundary; route
|
|
through --border-color (CanvasText in HCM) to keep a visible border. */
|
|
--dialog-border-color: var(--border-color, CanvasText);
|
|
--dialog-shadow: none;
|
|
--text-secondary-color: CanvasText;
|
|
--separator-color: CanvasText;
|
|
|
|
--textarea-border-color: ButtonBorder;
|
|
--textarea-bg-color: Field;
|
|
--textarea-fg-color: ButtonText;
|
|
|
|
--input-text-bg-color: Field;
|
|
--input-text-fg-color: FieldText;
|
|
}
|
|
|
|
font: message-box;
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
line-height: 150%;
|
|
border-radius: var(--border-radius-medium, 4px);
|
|
padding: 12px 16px;
|
|
border: 1px solid var(--dialog-border-color);
|
|
background: var(--dialog-bg-color);
|
|
color: var(--text-primary-color);
|
|
box-shadow: var(--dialog-shadow);
|
|
|
|
.mainContainer {
|
|
*:focus-visible {
|
|
outline: var(--focus-ring-outline);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.title {
|
|
display: flex;
|
|
width: auto;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
|
|
> span {
|
|
font-size: 13px;
|
|
font-style: normal;
|
|
font-weight: 590;
|
|
line-height: 150%; /* 19.5px */
|
|
}
|
|
}
|
|
|
|
.dialogSeparator {
|
|
width: 100%;
|
|
height: 0;
|
|
margin-block: 4px;
|
|
border-top: 1px solid var(--separator-color);
|
|
border-bottom: none;
|
|
}
|
|
|
|
.dialogButtonsGroup {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-self: flex-end;
|
|
}
|
|
|
|
/* Native checkbox/radio tinted with the accent at Firefox's control size,
|
|
matching Firefox's default form controls (the custom appearance is
|
|
Nova-only in Firefox, so the default look is native + accent-color). */
|
|
input:is([type="checkbox"], [type="radio"]) {
|
|
accent-color: var(--color-accent-primary, light-dark(#0060df, #0df));
|
|
width: var(--checkbox-size, 16px);
|
|
height: var(--checkbox-size, 16px);
|
|
}
|
|
|
|
.radio {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 4px;
|
|
|
|
> .radioButton {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-self: stretch;
|
|
align-items: center;
|
|
}
|
|
|
|
> .radioLabel {
|
|
display: flex;
|
|
padding-inline-start: 24px;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
align-self: stretch;
|
|
|
|
> span {
|
|
flex: 1 0 0;
|
|
font-size: 11px;
|
|
color: var(--text-secondary-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
button:not(:is(.toggle-button, .closeButton, .clearInputButton)) {
|
|
border-radius: var(--button-border-radius, 4px);
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
font: menu;
|
|
font-weight: var(--button-font-weight, 590);
|
|
font-size: var(--button-font-size, 13px);
|
|
padding: var(--button-padding, 4px 16px);
|
|
width: auto;
|
|
min-height: var(--button-min-height, 32px);
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
filter: var(--hover-filter);
|
|
}
|
|
|
|
> span {
|
|
color: inherit;
|
|
font: inherit;
|
|
}
|
|
|
|
/* .primaryButton / .secondaryButton colours and states come from the
|
|
shared buttons.css primitive; only the dialog-specific base geometry
|
|
(above) lives here, so it also covers unclassed dialog buttons. */
|
|
&:disabled {
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: var(--link-fg-color);
|
|
|
|
&:hover {
|
|
color: var(--link-hover-fg-color);
|
|
}
|
|
}
|
|
|
|
textarea {
|
|
font: inherit;
|
|
padding: 8px;
|
|
resize: none;
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
border-radius: var(--border-radius-small, 4px);
|
|
border: 1px solid var(--textarea-border-color);
|
|
background: var(--textarea-bg-color);
|
|
color: var(--textarea-fg-color);
|
|
|
|
&:focus {
|
|
outline-offset: 0;
|
|
border-color: transparent;
|
|
}
|
|
|
|
&:disabled {
|
|
pointer-events: none;
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
input[type="text"] {
|
|
background-color: var(--input-text-bg-color);
|
|
color: var(--input-text-fg-color);
|
|
}
|
|
|
|
.messageBar {
|
|
--message-bar-bg-color: light-dark(#ffebcd, #5a3100);
|
|
--message-bar-fg-color: light-dark(#15141a, #fbfbfe);
|
|
--message-bar-border-color: light-dark(
|
|
rgb(0 0 0 / 0.08),
|
|
rgb(255 255 255 / 0.08)
|
|
);
|
|
--message-bar-icon: url(images/messageBar_warning.svg);
|
|
--message-bar-icon-color: light-dark(#cd411e, #e49c49);
|
|
|
|
@media screen and (forced-colors: active) {
|
|
--message-bar-bg-color: HighlightText;
|
|
--message-bar-fg-color: CanvasText;
|
|
--message-bar-border-color: CanvasText;
|
|
--message-bar-icon-color: CanvasText;
|
|
}
|
|
|
|
align-self: stretch;
|
|
|
|
> div {
|
|
&::before,
|
|
> div {
|
|
margin-block: 4px;
|
|
}
|
|
|
|
> div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
flex: 1 0 0;
|
|
|
|
.title {
|
|
font-size: 13px;
|
|
font-weight: 590;
|
|
}
|
|
|
|
.description {
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.toggler {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
align-self: stretch;
|
|
|
|
> .togglerLabel {
|
|
user-select: none;
|
|
}
|
|
}
|
|
}
|
|
}
|