Marmelator/pdf.js.mirror
1
0
Fork 0
mirror of https://github.com/mozilla/pdf.js.git synced 2026-08-01 11:57:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

Sync the viewer chrome with the Firefox design system

Browse Source 
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.
This commit is contained in:
Calixte Denizet 2026-07-30 10:53:39 +02:00
parent a80897dc9a
commit b4d028132b
17 changed files with 759 additions and 656 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
web/annotation_editor_layer_builder.css
View File

@ -21,15 +21,18 @@
:root {
--editor-toolbar-vert-offset: 6px;
--outline-width: 2px;
--outline-color: #0060df;
/* Palette primitives, not the semantic light-dark tokens: these are drawn on
the always-light PDF page, where --color-accent-primary and friends would
resolve to their dark value. */
--outline-color: var(--color-blue-60, #0060df);
--outline-around-width: 1px;
--outline-around-color: #f0f0f4;
--outline-around-color: var(--color-gray-20, #f0f0f4);
--hover-outline-around-color: var(--outline-around-color);
--focus-outline: solid var(--outline-width) var(--outline-color);
--editor-selection-outline: solid var(--outline-width) var(--outline-color);
--unfocus-outline: solid var(--outline-width) transparent;
--focus-outline-around: solid var(--outline-around-width)
var(--outline-around-color);
--hover-outline-color: #8f8f9d;
--hover-outline-color: var(--color-gray-60, #8f8f9d);
--hover-outline: solid var(--outline-width) var(--hover-outline-color);
--hover-outline-around: solid var(--outline-around-width)
var(--hover-outline-around-color);
@ -95,7 +98,7 @@
--outline-color: CanvasText;
--outline-around-color: ButtonFace;
--resizer-bg-color: ButtonText;
--hover-outline-color: Highlight;
--hover-outline-color: var(--color-accent-primary-hover, Highlight);
--hover-outline-around-color: SelectedItemText;
}
}
@ -188,7 +191,7 @@
}
&.selectedEditor {
border: var(--focus-outline);
border: var(--editor-selection-outline);
outline: var(--focus-outline-around);
&::before {
@ -244,30 +247,51 @@
--editor-toolbar-bg-color: light-dark(#f0f0f4, #2b2a33);
--editor-toolbar-highlight-image: url(images/toolbarButton-editorHighlight.svg);
--editor-toolbar-fg-color: light-dark(#2e2e56, #fbfbfe);
--editor-toolbar-border-color: #8f8f9d;
--editor-toolbar-border-color: var(--border-color-interactive, #8f8f9d);
--editor-toolbar-hover-border-color: var(--editor-toolbar-border-color);
--editor-toolbar-hover-bg-color: light-dark(#e0e0e6, #52525e);
--editor-toolbar-hover-fg-color: var(--editor-toolbar-fg-color);
--editor-toolbar-hover-outline: none;
--editor-toolbar-focus-outline-color: light-dark(#0060df, #0df);
--editor-toolbar-focus-outline-color: var(
--focus-outline-color,
light-dark(#0060df, #0df)
);
--editor-toolbar-shadow: 0 2px 6px 0 rgb(58 57 68 / 0.2);
--editor-toolbar-height: 28px;
--editor-toolbar-padding: 2px;
--alt-text-done-color: light-dark(#2ac3a2, #54ffbd);
--alt-text-done-color: var(
--color-accent-attention,
light-dark(#2ac3a2, #54ffbd)
);
--alt-text-warning-color: light-dark(#0090ed, #80ebff);
--alt-text-hover-done-color: var(--alt-text-done-color);
--alt-text-hover-warning-color: var(--alt-text-warning-color);
@media screen and (forced-colors: active) {
--editor-toolbar-bg-color: ButtonFace;
--editor-toolbar-fg-color: ButtonText;
--editor-toolbar-border-color: ButtonText;
--editor-toolbar-hover-border-color: AccentColor;
--editor-toolbar-hover-bg-color: ButtonFace;
--editor-toolbar-hover-fg-color: AccentColor;
--editor-toolbar-bg-color: var(--button-background-color, ButtonFace);
--editor-toolbar-fg-color: var(--button-text-color, ButtonText);
--editor-toolbar-border-color: var(--button-border-color, ButtonText);
--editor-toolbar-hover-border-color: var(
--button-border-color-hover,
AccentColor
);
--editor-toolbar-hover-bg-color: var(
--button-background-color-hover,
ButtonFace
);
--editor-toolbar-hover-fg-color: var(
--button-text-color-hover,
AccentColor
);
--editor-toolbar-hover-outline: 2px solid
var(--editor-toolbar-hover-border-color);
--editor-toolbar-focus-outline-color: ButtonBorder;
/* --button-border-color, not --focus-outline-color: the ring is painted
on the toolbar's own ButtonFace surface, and --focus-outline-color is
CanvasText in Firefox HCM. */
--editor-toolbar-focus-outline-color: var(
--button-border-color,
ButtonBorder
);
--editor-toolbar-shadow: none;
--alt-text-done-color: var(--editor-toolbar-fg-color);
--alt-text-warning-color: var(--editor-toolbar-fg-color);
@ -461,15 +485,18 @@
&.show {
--alt-text-tooltip-bg: light-dark(#f0f0f4, #1c1b22);
--alt-text-tooltip-fg: light-dark(#15141a, #fbfbfe);
--alt-text-tooltip-border: #8f8f9d;
--alt-text-tooltip-fg: var(
--text-color,
light-dark(#15141a, #fbfbfe)
);
--alt-text-tooltip-border: var(--border-color-interactive, #8f8f9d);
--alt-text-tooltip-shadow: 0 2px 6px 0
light-dark(rgb(58 57 68 / 0.2), #15141a);
@media screen and (forced-colors: active) {
--alt-text-tooltip-bg: Canvas;
--alt-text-tooltip-fg: CanvasText;
--alt-text-tooltip-border: CanvasText;
--alt-text-tooltip-fg: var(--text-color, CanvasText);
--alt-text-tooltip-border: var(--border-color, CanvasText);
--alt-text-tooltip-shadow: none;
}
@ -1055,7 +1082,10 @@
}
.colorPicker {
--hover-outline-color: light-dark(#0250bb, #80ebff);
--hover-outline-color: var(
--color-accent-primary-hover,
light-dark(#0250bb, #80ebff)
);
--selected-outline-color: light-dark(#0060df, #aaf2ff);
--swatch-border-color: light-dark(#cfcfd8, #52525e);

12
web/app_options.js
View File

@ -416,6 +416,18 @@ const defaultOptions = new Map([
kind: OptionKind.VIEWER + OptionKind.PREFERENCE,
},
],
[
// Whether the viewer follows the Firefox design system (see the pref-gated
// @import of tokens-brand.css in viewer.css). Read from CSS via
// -moz-pref(), not from JS, so it is Firefox-only and has no effect
// elsewhere.
"enableNova",
{
/** @type {boolean} */
value: true,
kind: OptionKind.VIEWER + OptionKind.PREFERENCE,
},
],
[
"enableOptimizedPartialRendering",
{

247
web/buttons.css Normal file
View File

@ -0,0 +1,247 @@
/* Copyright 2026 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.
*/
/*
* Shared button primitive: .primaryButton / .secondaryButton, for any button in
* the viewer and not only those inside a .dialog. The colors consume Firefox
* design tokens with the shipped literal as a fallback (see pdf_viewer.css).
*/
:root {
--button-primary-bg-color: var(
--button-background-color-primary,
light-dark(#0060df, #0df)
);
--button-primary-fg-color: var(
--button-text-color-primary,
light-dark(#fbfbfe, #15141a)
);
--button-primary-border-color: var(--button-primary-bg-color);
--button-primary-active-bg-color: var(
--button-background-color-primary-active,
light-dark(#054096, #aaf2ff)
);
--button-primary-active-fg-color: var(--button-primary-fg-color);
--button-primary-active-border-color: var(--button-primary-active-bg-color);
--button-primary-hover-bg-color: var(
--button-background-color-primary-hover,
light-dark(#0250bb, #80ebff)
);
--button-primary-hover-fg-color: var(--button-primary-fg-color);
--button-primary-hover-border-color: var(--button-primary-hover-bg-color);
--button-primary-disabled-bg-color: var(--button-primary-bg-color);
--button-primary-disabled-border-color: var(--button-primary-border-color);
--button-primary-disabled-fg-color: var(--button-primary-fg-color);
--button-secondary-bg-color: var(
--button-background-color,
light-dark(rgb(21 20 26 / 0.07), rgb(251 251 254 / 0.07))
);
--button-secondary-fg-color: var(--text-color, light-dark(#15141a, #fbfbfe));
/* Firefox's outline-style secondary button has a transparent fill and carries
the edge on --button-border-color; the fallback matches the fill instead,
since the shipped one is a translucent overlay. */
--button-secondary-border-color: var(
--button-border-color,
var(--button-secondary-bg-color)
);
--button-secondary-active-bg-color: var(
--button-background-color-active,
light-dark(rgb(21 20 26 / 0.21), rgb(251 251 254 / 0.21))
);
--button-secondary-active-fg-color: var(--button-secondary-fg-color);
--button-secondary-active-border-color: var(--button-secondary-bg-color);
--button-secondary-hover-bg-color: var(
--button-background-color-hover,
light-dark(rgb(21 20 26 / 0.14), rgb(251 251 254 / 0.14))
);
--button-secondary-hover-fg-color: var(--button-secondary-fg-color);
--button-secondary-hover-border-color: var(--button-secondary-hover-bg-color);
--button-secondary-disabled-bg-color: var(--button-secondary-bg-color);
--button-secondary-disabled-border-color: var(
--button-secondary-border-color
);
--button-secondary-disabled-fg-color: var(--button-secondary-fg-color);
--button-disabled-opacity: 0.4;
--hover-filter: brightness(0.9);
@media (prefers-color-scheme: dark) {
--button-disabled-opacity: 0.6;
--hover-filter: brightness(1.4);
}
@media screen and (forced-colors: active) {
--button-primary-bg-color: var(
--button-background-color-primary,
ButtonText
);
--button-primary-fg-color: var(--button-text-color-primary, ButtonFace);
--button-primary-border-color: var(
--button-border-color-primary,
ButtonText
);
--button-primary-active-bg-color: var(
--button-background-color-primary-active,
SelectedItem
);
--button-primary-active-fg-color: var(
--button-text-color-primary-active,
HighlightText
);
--button-primary-active-border-color: var(
--button-border-color-primary-active,
ButtonText
);
--button-primary-hover-bg-color: var(
--button-background-color-primary-hover,
SelectedItem
);
--button-primary-hover-fg-color: var(
--button-text-color-primary-hover,
HighlightText
);
--button-primary-hover-border-color: var(
--button-border-color-primary-hover,
SelectedItem
);
--button-primary-disabled-bg-color: var(
--button-background-color-primary-disabled,
GrayText
);
--button-primary-disabled-fg-color: var(
--button-text-color-primary-disabled,
ButtonFace
);
--button-primary-disabled-border-color: var(
--button-border-color-primary-disabled,
GrayText
);
--button-secondary-bg-color: var(--button-background-color, ButtonFace);
--button-secondary-fg-color: var(--button-text-color, ButtonText);
--button-secondary-border-color: var(--button-border-color, ButtonText);
--button-secondary-active-bg-color: var(
--button-background-color-active,
HighlightText
);
--button-secondary-active-fg-color: var(
--button-text-color-active,
SelectedItem
);
--button-secondary-active-border-color: var(
--button-border-color-active,
ButtonText
);
--button-secondary-hover-bg-color: var(
--button-background-color-hover,
HighlightText
);
--button-secondary-hover-fg-color: var(
--button-text-color-hover,
SelectedItem
);
--button-secondary-hover-border-color: var(
--button-border-color-hover,
SelectedItem
);
--button-secondary-disabled-fg-color: var(
--button-text-color-disabled,
GrayText
);
--button-secondary-disabled-border-color: var(
--button-border-color-disabled,
GrayText
);
--button-disabled-opacity: 1;
--hover-filter: none;
}
}
.primaryButton,
.secondaryButton {
border-radius: var(--button-border-radius, 4px);
border: 1px 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;
}
&:disabled {
pointer-events: none;
}
}
.primaryButton {
color: var(--button-primary-fg-color);
background-color: var(--button-primary-bg-color);
border-color: var(--button-primary-border-color);
opacity: 1;
&:hover {
color: var(--button-primary-hover-fg-color);
background-color: var(--button-primary-hover-bg-color);
border-color: var(--button-primary-hover-border-color);
}
&:active {
color: var(--button-primary-active-fg-color);
background-color: var(--button-primary-active-bg-color);
border-color: var(--button-primary-active-border-color);
}
&:disabled {
background-color: var(--button-primary-disabled-bg-color);
border-color: var(--button-primary-disabled-border-color);
color: var(--button-primary-disabled-fg-color);
opacity: var(--button-disabled-opacity);
}
}
.secondaryButton {
color: var(--button-secondary-fg-color);
background-color: var(--button-secondary-bg-color);
border-color: var(--button-secondary-border-color);
&:hover {
color: var(--button-secondary-hover-fg-color);
background-color: var(--button-secondary-hover-bg-color);
border-color: var(--button-secondary-hover-border-color);
}
&:active {
color: var(--button-secondary-active-fg-color);
background-color: var(--button-secondary-active-bg-color);
border-color: var(--button-secondary-active-border-color);
}
&:disabled {
background-color: var(--button-secondary-disabled-bg-color);
border-color: var(--button-secondary-disabled-border-color);
color: var(--button-secondary-disabled-fg-color);
opacity: var(--button-disabled-opacity);
}
}

117
web/comment_manager.css
View File

@ -65,39 +65,86 @@
:is(.annotationLayer, .annotationEditorLayer) {
.annotationCommentButton {
color-scheme: light dark;
--comment-button-bg: light-dark(white, #1c1b22);
--comment-button-bg: var(
--background-color-canvas,
light-dark(white, #1c1b22)
);
--comment-button-fg: light-dark(#5b5b66, #fbfbfe);
--comment-button-active-bg: light-dark(#0041a4, #a6ecf4);
--comment-button-active-fg: light-dark(white, #15141a);
--comment-button-hover-bg: light-dark(#0053cb, #61dce9);
--comment-button-hover-fg: light-dark(white, #15141a);
--comment-button-selected-bg: light-dark(#0062fa, #00cadb);
--comment-button-border-color: light-dark(#8f8f9d, #bfbfc9);
--comment-button-active-fg: var(
--button-text-color-primary,
light-dark(white, #15141a)
);
--comment-button-hover-bg: var(
--color-accent-primary-hover,
light-dark(#0053cb, #61dce9)
);
--comment-button-hover-fg: var(
--button-text-color-primary,
light-dark(white, #15141a)
);
--comment-button-selected-bg: var(
--color-accent-primary,
light-dark(#0062fa, #00cadb)
);
--comment-button-border-color: var(
--border-color-interactive,
light-dark(#8f8f9d, #bfbfc9)
);
--comment-button-active-border-color: var(--comment-button-active-bg);
--comment-button-focus-border-color: light-dark(#cfcfd8, #3a3944);
--comment-button-hover-border-color: var(--comment-button-hover-bg);
--comment-button-selected-border-color: var(--comment-button-selected-bg);
--comment-button-selected-fg: light-dark(white, #15141a);
--comment-button-selected-fg: var(
--button-text-color-primary,
light-dark(white, #15141a)
);
--comment-button-dim: 24px;
--comment-button-box-shadow:
0 0.25px 0.75px 0 light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)),
0 2px 6px 0 light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4));
--comment-button-focus-outline-color: light-dark(#0062fa, #00cadb);
--comment-button-focus-outline-color: var(
--focus-outline-color,
light-dark(#0062fa, #00cadb)
);
/* Each state reads the *matching* pair of Firefox button tokens, so the
background and the icon can never resolve to the same system colour. */
@media screen and (forced-colors: active) {
--comment-button-bg: ButtonFace;
--comment-button-fg: ButtonText;
--comment-button-hover-bg: SelectedItemText;
--comment-button-hover-fg: SelectedItem;
--comment-button-active-bg: SelectedItemText;
--comment-button-active-fg: SelectedItem;
--comment-button-border-color: ButtonBorder;
--comment-button-active-border-color: ButtonBorder;
--comment-button-hover-border-color: SelectedItem;
--comment-button-bg: var(--button-background-color, ButtonFace);
--comment-button-fg: var(--button-text-color, ButtonText);
--comment-button-hover-bg: var(
--button-background-color-hover,
SelectedItemText
);
--comment-button-hover-fg: var(--button-text-color-hover, SelectedItem);
--comment-button-active-bg: var(
--button-background-color-active,
SelectedItemText
);
--comment-button-active-fg: var(--button-text-color-active, SelectedItem);
--comment-button-border-color: var(--button-border-color, ButtonBorder);
--comment-button-active-border-color: var(
--button-border-color-active,
ButtonBorder
);
--comment-button-hover-border-color: var(
--button-border-color-hover,
SelectedItem
);
--comment-button-box-shadow: none;
--comment-button-focus-outline-color: CanvasText;
--comment-button-selected-bg: ButtonBorder;
--comment-button-selected-fg: ButtonFace;
--comment-button-focus-outline-color: var(
--focus-outline-color,
CanvasText
);
--comment-button-selected-bg: var(
--button-background-color-primary,
ButtonBorder
);
--comment-button-selected-fg: var(
--button-text-color-primary,
ButtonFace
);
}
position: absolute;
@ -185,19 +232,28 @@
--comment-active-brightness: 0.825;
--comment-active-filter: brightness(var(--comment-active-brightness));
--comment-border-color: light-dark(#f0f0f4, #52525e);
--comment-focus-outline-color: light-dark(#0062fa, #00cadb);
--comment-fg-color: light-dark(#15141a, #fbfbfe);
--comment-focus-outline-color: var(
--focus-outline-color,
light-dark(#0062fa, #00cadb)
);
--comment-fg-color: var(--text-color, light-dark(#15141a, #fbfbfe));
--comment-count-bg-color: light-dark(#e2f7ff, #00317e);
--comment-indicator-active-fg-color: light-dark(#0041a4, #a6ecf4);
--comment-indicator-active-filter: brightness(
calc(1 / var(--comment-active-brightness))
);
--comment-indicator-focus-fg-color: light-dark(#5b5b66, #fbfbfe);
--comment-indicator-hover-fg-color: light-dark(#0053cb, #61dce9);
--comment-indicator-hover-fg-color: var(
--color-accent-primary-hover,
light-dark(#0053cb, #61dce9)
);
--comment-indicator-hover-filter: brightness(
calc(1 / var(--comment-hover-brightness))
);
--comment-indicator-selected-fg-color: light-dark(#0062fa, #00cadb);
--comment-indicator-selected-fg-color: var(
--color-accent-primary,
light-dark(#0062fa, #00cadb)
);
--button-comment-bg: transparent;
--button-comment-color: var(--main-color);
@ -208,9 +264,6 @@
--button-comment-hover-bg: light-dark(#e0e0e6, #52525e);
--button-comment-hover-color: var(--button-comment-color);
--link-fg-color: light-dark(#0060df, #0df);
--link-hover-fg-color: light-dark(#0250bb, #80ebff);
@media screen and (forced-colors: active) {
--comment-date-fg-color: CanvasText;
--comment-bg-color: Canvas;
@ -219,11 +272,13 @@
--comment-active-bg-color: Canvas;
--comment-active-filter: none;
--comment-border-color: CanvasText;
--comment-fg-color: CanvasText;
--comment-fg-color: var(--text-color, CanvasText);
--comment-count-bg-color: Canvas;
--comment-indicator-active-fg-color: SelectedItem;
--comment-indicator-focus-fg-color: CanvasText;
--comment-indicator-hover-fg-color: CanvasText;
--comment-indicator-focus-fg-color: var(--text-color, CanvasText);
/* On the Canvas comment surface, so paired with --text-color rather than a
button/accent token. */
--comment-indicator-hover-fg-color: var(--text-color, CanvasText);
--comment-indicator-selected-fg-color: SelectedItem;
--button-comment-bg: ButtonFace;
--button-comment-color: ButtonText;
@ -232,8 +287,6 @@
--button-comment-border: 1px solid ButtonText;
--button-comment-hover-bg: Highlight;
--button-comment-hover-color: HighlightText;
--link-fg-color: LinkText;
--link-hover-fg-color: LinkText;
}
}

206
web/dialog.css
View File

@ -14,117 +14,42 @@
*/
.dialog {
--dialog-bg-color: light-dark(white, #1c1b22);
--dialog-border-color: light-dark(white, #1c1b22);
--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-primary-color: light-dark(#15141a, #fbfbfe);
--text-secondary-color: light-dark(#5b5b66, #cfcfd8);
--hover-filter: brightness(0.9);
--link-fg-color: light-dark(#0060df, #0df);
--link-hover-fg-color: light-dark(#0250bb, #80ebff);
--separator-color: light-dark(#f0f0f4, #52525e);
--textarea-border-color: #8f8f9d;
/* 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);
--radio-bg-color: light-dark(#f0f0f4, #2b2a33);
--radio-checked-bg-color: light-dark(#fbfbfe, #15141a);
--radio-border-color: #8f8f9d;
--radio-checked-border-color: light-dark(#0060df, #0df);
--button-secondary-bg-color: light-dark(
rgb(21 20 26 / 0.07),
rgb(251 251 254 / 0.07)
);
--button-secondary-fg-color: var(--text-primary-color);
--button-secondary-border-color: var(--button-secondary-bg-color);
--button-secondary-active-bg-color: light-dark(
rgb(21 20 26 / 0.21),
rgb(251 251 254 / 0.21)
);
--button-secondary-active-fg-color: var(--button-secondary-fg-color);
--button-secondary-active-border-color: var(--button-secondary-bg-color);
--button-secondary-hover-bg-color: light-dark(
rgb(21 20 26 / 0.14),
rgb(251 251 254 / 0.14)
);
--button-secondary-hover-fg-color: var(--button-secondary-fg-color);
--button-secondary-hover-border-color: var(--button-secondary-hover-bg-color);
--button-secondary-disabled-bg-color: var(--button-secondary-bg-color);
--button-secondary-disabled-border-color: var(
--button-secondary-border-color
);
--button-secondary-disabled-fg-color: var(--button-secondary-fg-color);
--button-primary-bg-color: light-dark(#0060df, #0df);
--button-primary-fg-color: light-dark(#fbfbfe, #15141a);
--button-primary-border-color: var(--button-primary-bg-color);
--button-primary-active-bg-color: light-dark(#054096, #aaf2ff);
--button-primary-active-fg-color: var(--button-primary-fg-color);
--button-primary-active-border-color: var(--button-primary-active-bg-color);
--button-primary-hover-bg-color: light-dark(#0250bb, #80ebff);
--button-primary-hover-fg-color: var(--button-primary-fg-color);
--button-primary-hover-border-color: var(--button-primary-hover-bg-color);
--button-primary-disabled-bg-color: var(--button-primary-bg-color);
--button-primary-disabled-border-color: var(--button-primary-border-color);
--button-primary-disabled-fg-color: var(--button-primary-fg-color);
--button-disabled-opacity: 0.4;
/* .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 (prefers-color-scheme: dark) {
--hover-filter: brightness(1.4);
--button-disabled-opacity: 0.6;
}
@media screen and (forced-colors: active) {
--dialog-bg-color: Canvas;
--dialog-border-color: CanvasText;
--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-primary-color: CanvasText;
--text-secondary-color: CanvasText;
--hover-filter: none;
--link-fg-color: LinkText;
--link-hover-fg-color: LinkText;
--separator-color: CanvasText;
--textarea-border-color: ButtonBorder;
--textarea-bg-color: Field;
--textarea-fg-color: ButtonText;
--radio-bg-color: ButtonFace;
--radio-checked-bg-color: ButtonFace;
--radio-border-color: ButtonText;
--radio-checked-border-color: ButtonText;
--button-secondary-bg-color: ButtonFace;
--button-secondary-fg-color: ButtonText;
--button-secondary-border-color: ButtonText;
--button-secondary-active-bg-color: HighlightText;
--button-secondary-active-fg-color: SelectedItem;
--button-secondary-active-border-color: ButtonText;
--button-secondary-hover-bg-color: HighlightText;
--button-secondary-hover-fg-color: SelectedItem;
--button-secondary-hover-border-color: SelectedItem;
--button-secondary-disabled-fg-color: GrayText;
--button-secondary-disabled-border-color: GrayText;
--button-primary-bg-color: ButtonText;
--button-primary-fg-color: ButtonFace;
--button-primary-border-color: ButtonText;
--button-primary-active-bg-color: SelectedItem;
--button-primary-active-fg-color: HighlightText;
--button-primary-active-border-color: ButtonText;
--button-primary-hover-bg-color: SelectedItem;
--button-primary-hover-fg-color: HighlightText;
--button-primary-hover-border-color: SelectedItem;
--button-primary-disabled-bg-color: GrayText;
--button-primary-disabled-fg-color: ButtonFace;
--button-primary-disabled-border-color: GrayText;
--button-disabled-opacity: 1;
--input-text-bg-color: Field;
--input-text-fg-color: FieldText;
}
@ -133,7 +58,7 @@
font-size: 13px;
font-weight: 400;
line-height: 150%;
border-radius: 4px;
border-radius: var(--border-radius-medium, 4px);
padding: 12px 16px;
border: 1px solid var(--dialog-border-color);
background: var(--dialog-bg-color);
@ -176,6 +101,15 @@
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;
@ -187,25 +121,6 @@
gap: 8px;
align-self: stretch;
align-items: center;
input {
appearance: none;
box-sizing: border-box;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: var(--radio-bg-color);
border: 1px solid var(--radio-border-color);
&:hover {
filter: var(--hover-filter);
}
&:checked {
background-color: var(--radio-checked-bg-color);
border: 4px solid var(--radio-checked-border-color);
}
}
}
> .radioLabel {
@ -224,14 +139,15 @@
}
button:not(:is(.toggle-button, .closeButton, .clearInputButton)) {
border-radius: 4px;
border: 1px solid;
border-radius: var(--button-border-radius, 4px);
border-width: 1px;
border-style: solid;
font: menu;
font-weight: 590;
font-size: 13px;
padding: 4px 16px;
font-weight: var(--button-font-weight, 590);
font-size: var(--button-font-size, 13px);
padding: var(--button-padding, 4px 16px);
width: auto;
height: 32px;
min-height: var(--button-min-height, 32px);
&:hover {
cursor: pointer;
@ -243,57 +159,9 @@
font: inherit;
}
&.secondaryButton {
color: var(--button-secondary-fg-color);
background-color: var(--button-secondary-bg-color);
border-color: var(--button-secondary-border-color);
&:hover {
color: var(--button-secondary-hover-fg-color);
background-color: var(--button-secondary-hover-bg-color);
border-color: var(--button-secondary-hover-border-color);
}
&:active {
color: var(--button-secondary-active-fg-color);
background-color: var(--button-secondary-active-bg-color);
border-color: var(--button-secondary-active-border-color);
}
&:disabled {
background-color: var(--button-secondary-disabled-bg-color);
border-color: var(--button-secondary-disabled-border-color);
color: var(--button-secondary-disabled-fg-color);
opacity: var(--button-disabled-opacity);
}
}
&.primaryButton {
color: var(--button-primary-fg-color);
background-color: var(--button-primary-bg-color);
border-color: var(--button-primary-border-color);
opacity: 1;
&:hover {
color: var(--button-primary-hover-fg-color);
background-color: var(--button-primary-hover-bg-color);
border-color: var(--button-primary-hover-border-color);
}
&:active {
color: var(--button-primary-active-fg-color);
background-color: var(--button-primary-active-bg-color);
border-color: var(--button-primary-active-border-color);
}
&:disabled {
background-color: var(--button-primary-disabled-bg-color);
border-color: var(--button-primary-disabled-border-color);
color: var(--button-primary-disabled-fg-color);
opacity: var(--button-disabled-opacity);
}
}
/* .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;
}
@ -313,7 +181,7 @@
resize: none;
margin: 0;
box-sizing: border-box;
border-radius: 4px;
border-radius: var(--border-radius-small, 4px);
border: 1px solid var(--textarea-border-color);
background: var(--textarea-bg-color);
color: var(--textarea-fg-color);

58
web/digital_signature_properties.css
View File

@ -28,16 +28,28 @@
--sig-detail-color: light-dark(rgb(96 96 96), rgb(180 180 184));
--sig-divider-color: light-dark(rgb(228 228 232), rgb(82 82 86));
--sig-summary-hover-color: light-dark(rgb(28 67 138), rgb(126 169 255));
--sig-link-color: light-dark(rgb(28 113 216), rgb(126 169 255));
--sig-link-color: var(
--link-color,
light-dark(rgb(28 113 216), rgb(126 169 255))
);
--sig-link-hover-bg: light-dark(
rgb(28 113 216 / 0.1),
rgb(126 169 255 / 0.15)
);
--sig-banner-verified-bg: light-dark(rgb(228 247 235), rgb(28 84 49));
--sig-banner-verified-bg: var(
--background-color-success,
light-dark(rgb(228 247 235), rgb(28 84 49))
);
--sig-banner-verified-color: light-dark(rgb(16 92 47), rgb(176 232 196));
--sig-banner-warn-bg: light-dark(rgb(255 247 217), rgb(95 67 9));
--sig-banner-warn-bg: var(
--background-color-warning,
light-dark(rgb(255 247 217), rgb(95 67 9))
);
--sig-banner-warn-color: light-dark(rgb(124 84 9), rgb(255 222 153));
--sig-banner-error-bg: light-dark(rgb(254 226 235), rgb(122 21 51));
--sig-banner-error-bg: var(
--background-color-critical,
light-dark(rgb(254 226 235), rgb(122 21 51))
);
--sig-banner-error-color: light-dark(rgb(167 26 70), rgb(255 188 207));
/* Tint colours for the row / toolbar icons. These are paired with
@ -48,9 +60,18 @@
* verified = green (only used for the top-level "everything fine"
* row and the toolbar's verified badge). */
--sig-icon-default: light-dark(rgb(150 150 150), rgb(180 180 184));
--sig-icon-warn: light-dark(rgb(217 142 27), rgb(255 178 77));
--sig-icon-error: light-dark(rgb(196 31 71), rgb(255 117 145));
--sig-icon-verified: light-dark(rgb(29 142 61), rgb(106 210 126));
--sig-icon-warn: var(
--icon-color-warning,
light-dark(rgb(217 142 27), rgb(255 178 77))
);
--sig-icon-error: var(
--icon-color-critical,
light-dark(rgb(196 31 71), rgb(255 117 145))
);
--sig-icon-verified: var(
--icon-color-success,
light-dark(rgb(29 142 61), rgb(106 210 126))
);
@media screen and (forced-colors: active) {
/* HCM keywords are picked by *semantic role*, not by hue — the
@ -77,23 +98,26 @@
--sig-detail-color: GrayText;
--sig-divider-color: GrayText;
--sig-summary-hover-color: AccentColor;
--sig-link-color: LinkText;
--sig-link-color: var(--link-color, LinkText);
--sig-link-hover-bg: transparent;
--sig-banner-verified-bg: ButtonFace;
--sig-banner-verified-color: ButtonText;
--sig-banner-warn-bg: ButtonFace;
--sig-banner-warn-color: ButtonText;
--sig-banner-error-bg: ButtonFace;
--sig-banner-error-color: ButtonText;
/* Firefox collapses the status backgrounds onto --background-color-canvas
in HCM, so the foregrounds have to follow --text-color to stay a pair
(ButtonText over that Canvas surface is not guaranteed to contrast). */
--sig-banner-verified-bg: var(--background-color-success, ButtonFace);
--sig-banner-verified-color: var(--text-color, ButtonText);
--sig-banner-warn-bg: var(--background-color-warning, ButtonFace);
--sig-banner-warn-color: var(--text-color, ButtonText);
--sig-banner-error-bg: var(--background-color-critical, ButtonFace);
--sig-banner-error-color: var(--text-color, ButtonText);
/* Severities collapse to the same emphasis keyword (AccentColor)
* in HCM — same trick as alt-text where `done` and `warning`
* share their hover colour. The glyph shape (check vs `!` vs `✕`)
* carries the remaining distinction. The neutral "row crypto
* verified" check stays muted (GrayText). */
--sig-icon-default: GrayText;
--sig-icon-warn: AccentColor;
--sig-icon-error: AccentColor;
--sig-icon-verified: AccentColor;
--sig-icon-warn: var(--icon-color-warning, AccentColor);
--sig-icon-error: var(--icon-color-critical, AccentColor);
--sig-icon-verified: var(--icon-color-success, AccentColor);
}
}

15
web/menu.css
View File

@ -41,10 +41,13 @@ button.hasPopupMenu {
var(--menu-text-color),
transparent 93%
);
--menuitem-focus-outline-color: light-dark(#0062fa, #00cadb);
--menuitem-focus-outline-color: var(
--focus-outline-color,
light-dark(#0062fa, #00cadb)
);
--menuitem-focus-border-color: light-dark(white, black);
--menu-bg: light-dark(white, #23222b);
--menu-bg: var(--background-color-box, light-dark(white, #23222b));
--menu-background-blend-mode: normal;
--menu-box-shadow:
0 0.375px 1.5px 0 light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)),
@ -52,7 +55,7 @@ button.hasPopupMenu {
--menu-border-color: light-dark(rgb(21 20 26 / 0.1), rgb(251 251 254 / 0.1));
--menuitem-border-radius: 8px;
--menu-backdrop-filter: none;
--menu-text-color: light-dark(#15141a, #fbfbfe);
--menu-text-color: var(--text-color, light-dark(#15141a, #fbfbfe));
--menu-text-disabled-color: var(--menu-text-color);
--menuitem-text-hover-fg: var(--menu-text-color);
--menuitem-hover-bg: color-mix(
@ -64,11 +67,11 @@ button.hasPopupMenu {
--disabled-opacity: 0.62;
@media screen and (forced-colors: active) {
--menu-bg: Canvas;
--menu-bg: var(--background-color-box, Canvas);
--menu-background-blend-mode: normal;
--menu-box-shadow: none;
--menu-backdrop-filter: none;
--menu-text-color: ButtonText;
--menu-text-color: var(--text-color, ButtonText);
--menu-text-disabled-color: GrayText;
--menu-border-color: CanvasText;
--menuitem-border-color: none;
@ -78,7 +81,7 @@ button.hasPopupMenu {
--menuitem-active-border-color: ButtonText;
--menuitem-text-active-fg: SelectedItem;
--menuitem-focus-bg: ButtonFace;
--menuitem-focus-outline-color: CanvasText;
--menuitem-focus-outline-color: var(--focus-outline-color, CanvasText);
--menuitem-focus-border-color: none;
--disabled-opacity: 1;
}

109
web/message_bar.css
View File

@ -17,28 +17,46 @@
--closing-button-icon: url(images/messageBar_closingButton.svg);
--message-bar-close-button-color: var(--text-primary-color);
--message-bar-close-button-color-hover: var(--text-primary-color);
--message-bar-close-button-border-radius: 4px;
--message-bar-close-button-border-radius: var(--border-radius-small, 4px);
--message-bar-close-button-border: none;
--message-bar-close-button-hover-bg-color: light-dark(
rgb(21 20 26 / 0.14),
rgb(251 251 254 / 0.14)
--message-bar-close-button-hover-bg-color: var(
--button-background-color-hover,
light-dark(rgb(21 20 26 / 0.14), rgb(251 251 254 / 0.14))
);
--message-bar-close-button-active-bg-color: light-dark(
rgb(21 20 26 / 0.21),
rgb(251 251 254 / 0.21)
--message-bar-close-button-active-bg-color: var(
--button-background-color-active,
light-dark(rgb(21 20 26 / 0.21), rgb(251 251 254 / 0.21))
);
--message-bar-close-button-focus-bg-color: light-dark(
rgb(21 20 26 / 0.07),
rgb(251 251 254 / 0.07)
--message-bar-close-button-focus-bg-color: var(
--button-background-color,
light-dark(rgb(21 20 26 / 0.07), rgb(251 251 254 / 0.07))
);
@media screen and (forced-colors: active) {
--message-bar-close-button-color: ButtonText;
--message-bar-close-button-border: 1px solid ButtonText;
--message-bar-close-button-hover-bg-color: ButtonText;
--message-bar-close-button-active-bg-color: ButtonText;
--message-bar-close-button-focus-bg-color: ButtonText;
--message-bar-close-button-color-hover: HighlightText;
--message-bar-close-button-color: var(--button-text-color, ButtonText);
--message-bar-close-button-border: 1px solid
var(--button-border-color, ButtonText);
/* One icon colour is shared by hover/active/focus, so all three backgrounds
read the -hover token and pair with --button-text-color-hover. The
fallbacks are SelectedItemText/SelectedItem for the same reason: the
previous ButtonText-behind-HighlightText hid the icon outright in any
theme whose button ink and highlight text are both light. */
--message-bar-close-button-hover-bg-color: var(
--button-background-color-hover,
SelectedItemText
);
--message-bar-close-button-active-bg-color: var(
--button-background-color-hover,
SelectedItemText
);
--message-bar-close-button-focus-bg-color: var(
--button-background-color-hover,
SelectedItemText
);
--message-bar-close-button-color-hover: var(
--button-text-color-hover,
SelectedItem
);
}
display: flex;
@ -50,7 +68,9 @@
gap: 8px;
user-select: none;
border-radius: 4px;
/* Nests inside .dialog, whose radius is --border-radius-medium, so it has to
scale with it to keep the inner corner tighter than the outer one. */
border-radius: var(--border-radius-small, 4px);
border: 1px solid var(--message-bar-border-color);
background: var(--message-bar-bg-color);
@ -130,8 +150,6 @@
}
#editorUndoBar {
--text-primary-color: light-dark(#15141a, #fbfbfe);
--message-bar-icon: url(images/messageBar_info.svg);
--message-bar-icon-color: light-dark(#0060df, #73a7f3);
--message-bar-bg-color: light-dark(#deeafc, #003070);
@ -141,41 +159,10 @@
rgb(255 255 255 / 0.08)
);
--undo-button-bg-color: light-dark(
rgb(21 20 26 / 0.07),
rgb(255 255 255 / 0.08)
);
--undo-button-bg-color-hover: light-dark(
rgb(21 20 26 / 0.14),
rgb(255 255 255 / 0.14)
);
--undo-button-bg-color-active: light-dark(
rgb(21 20 26 / 0.21),
rgb(255 255 255 / 0.21)
);
--undo-button-border: 1px solid light-dark(#0060df, #0df);
--undo-button-fg-color: var(--message-bar-fg-color);
--undo-button-fg-color-hover: var(--undo-button-fg-color);
--undo-button-fg-color-active: var(--undo-button-fg-color);
@media screen and (forced-colors: active) {
--text-primary-color: CanvasText;
--message-bar-icon-color: CanvasText;
--message-bar-bg-color: Canvas;
--message-bar-border-color: CanvasText;
--undo-button-bg-color: ButtonText;
--undo-button-bg-color-hover: SelectedItem;
--undo-button-bg-color-active: SelectedItem;
--undo-button-fg-color: ButtonFace;
--undo-button-fg-color-hover: SelectedItemText;
--undo-button-fg-color-active: SelectedItemText;
--undo-button-border: none;
}
position: fixed;
@ -197,26 +184,10 @@
}
#editorUndoBarUndoButton {
border-radius: 4px;
font-weight: 590;
line-height: 19.5px;
color: var(--undo-button-fg-color);
border: var(--undo-button-border);
padding: 4px 16px;
margin-inline-start: 8px;
height: 32px;
background-color: var(--undo-button-bg-color);
&:hover {
background-color: var(--undo-button-bg-color-hover);
color: var(--undo-button-fg-color-hover);
}
&:active {
background-color: var(--undo-button-bg-color-active);
color: var(--undo-button-fg-color-active);
}
/* The generic secondary border is the same translucent wash as its fill,
which disappears on the tinted bar, so keep an explicit accent edge. */
border-color: var(--color-accent-primary, light-dark(#0060df, #0df));
}
> div {

29
web/pdf_viewer.css
View File

@ -12,6 +12,22 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*
* Firefox design-system bridge.
*
* The viewer chrome is authored against Firefox design-token names with the
* shipped literal as the fallback: `var(--fx-token, <literal>)`. GENERIC and
* the components build resolve the fallback and stay self-contained; the
* MOZCENTRAL build imports tokens-brand.css when pdfjs.enableNova is set (see
* viewer.css), so those names resolve to live Firefox values and the theme
* never has to be re-synced by hand.
*
* Firefox declares its tokens inside `@layer tokens-foundation-brand`, so any
* unlayered declaration wins over them. To *consume* a Firefox value,
* reference it through var() (with a fallback) and do NOT redeclare the same
* name: that would shadow Firefox's for the whole subtree.
*/
@import url(buttons.css);
@import url(message_bar.css);
@import url(dialog.css);
@import url(text_layer_builder.css);
@ -34,8 +50,12 @@
--page-border: 9px solid transparent;
--spreadHorizontalWrapped-margin-LR: -3.5px;
--loading-icon-delay: 400ms;
--focus-ring-color: light-dark(#0060df, #0df);
--focus-ring-outline: 2px solid var(--focus-ring-color);
--focus-ring-color: var(--focus-outline-color, light-dark(#0060df, #0df));
--focus-ring-outline: var(--focus-outline-width, 2px) solid
var(--focus-ring-color);
--text-primary-color: var(--text-color, light-dark(#15141a, #fbfbfe));
--link-fg-color: var(--link-color, light-dark(#0060df, #0df));
--link-hover-fg-color: var(--link-color-hover, light-dark(#0250bb, #80ebff));
--new-badge-bg: light-dark(#070, #37b847);
--new-badge-color: light-dark(#fff, #15141a);
--new-badge-border-color: light-dark(#fbfbfe / 40%, #15141a / 40%);
@ -45,7 +65,10 @@
--page-margin: 8px auto -1px;
--page-border: 1px solid CanvasText;
--spreadHorizontalWrapped-margin-LR: 3.5px;
--focus-ring-color: CanvasText;
--focus-ring-color: var(--focus-outline-color, CanvasText);
--text-primary-color: var(--text-color, CanvasText);
--link-fg-color: var(--link-color, LinkText);
--link-hover-fg-color: var(--link-color-hover, LinkText);
--new-badge-bg: AccentColor;
--new-badge-color: ButtonFace;
--new-badge-border-color: CanvasText;

13
web/sidebar.css
View File

@ -14,7 +14,7 @@
*/
.sidebar {
--sidebar-bg-color: light-dark(#fff, #23222b);
--sidebar-bg-color: var(--background-color-box, light-dark(#fff, #23222b));
--sidebar-border-color: light-dark(
rgb(21 20 26 / 0.1),
rgb(251 251 254 / 0.1)
@ -30,13 +30,18 @@
--sidebar-width: 239px;
--resizer-width: 4px;
--resizer-shift: calc(0px - var(--resizer-width) - 2px);
--resizer-hover-bg-color: light-dark(#0062fa, #00cadb);
--resizer-hover-bg-color: var(
--color-accent-primary,
light-dark(#0062fa, #00cadb)
);
@media screen and (forced-colors: active) {
--sidebar-bg-color: Canvas;
--sidebar-bg-color: var(--background-color-box, Canvas);
--sidebar-border-color: CanvasText;
--sidebar-box-shadow: none;
--resizer-hover-bg-color: CanvasText;
/* Painted on the Canvas sidebar, so --text-color rather than the accent
(which is ButtonText in Firefox HCM). */
--resizer-hover-bg-color: var(--text-color, CanvasText);
}
border-radius: var(--sidebar-border-radius);

151
web/signature_manager.css
View File

@ -15,8 +15,16 @@
:root {
--clear-signature-button-icon: url(images/editor-toolbar-delete.svg);
--signature-bg: light-dark(#f9f9fb, #2b2a33);
--signature-hover-bg: light-dark(#f0f0f4, var(--signature-bg));
/* The signature wells are boxes nested in the dialog, i.e. Firefox's
.info-box-container pattern. */
--signature-bg: var(
--background-color-box-info,
light-dark(#f9f9fb, #2b2a33)
);
--signature-hover-bg: var(
--button-background-color-hover,
light-dark(#f0f0f4, var(--signature-bg))
);
--button-signature-bg: transparent;
--button-signature-color: var(--main-color);
--button-signature-active-bg: light-dark(#cfcfd8, #5b5b66);
@ -41,13 +49,13 @@
.signatureDialog {
--primary-color: var(--text-primary-color);
--border-color: #8f8f9d;
--signature-border-color: var(--border-color-interactive, #8f8f9d);
--open-link-fg: var(--link-fg-color);
--open-link-hover-fg: var(--link-hover-fg-color);
@media screen and (forced-colors: active) {
--primary-color: ButtonText;
--border-color: ButtonText;
--signature-border-color: var(--border-color-interactive, ButtonText);
--open-link-fg: ButtonText;
--open-link-hover-fg: ButtonText;
}
@ -88,11 +96,11 @@
> input {
width: 100%;
height: 32px;
height: var(--size-item-large, 32px);
padding-inline: 8px calc(4px + var(--button-dimension));
box-sizing: border-box;
border-radius: 4px;
border: 1px solid var(--border-color);
border-radius: var(--border-radius-small, 4px);
border: 1px solid var(--signature-border-color);
}
.clearInputButton {
@ -113,11 +121,17 @@
#addSignatureDialog {
--secondary-color: var(--text-secondary-color);
--bg-hover: #e0e0e6;
--tab-top-line-active-color: #0060df;
--bg-hover: var(
--button-background-color-hover,
light-dark(#e0e0e6, #52525e)
);
--tab-top-line-active-color: var(
--color-accent-primary,
light-dark(#0060df, #0df)
);
--tab-top-line-active-hover-color: var(--tab-text-hover-color);
--tab-top-line-hover-color: #8f8f9d;
--tab-top-line-inactive-color: #cfcfd8;
--tab-top-line-hover-color: var(--border-color-interactive, #8f8f9d);
--tab-top-line-inactive-color: light-dark(#cfcfd8, #8f8f9d);
--tab-bottom-line-active-color: var(--tab-top-line-inactive-color);
--tab-bottom-line-hover-color: var(--tab-top-line-inactive-color);
--tab-bottom-line-inactive-color: var(--tab-top-line-inactive-color);
@ -126,7 +140,7 @@
--tab-bg-active-hover-color: var(--bg-hover);
--tab-bg-hover: var(--bg-hover);
--tab-panel-border: none;
--tab-panel-border-radius: 4px;
--tab-panel-border-radius: var(--border-radius-small, 4px);
--tab-text-color: var(--primary-color);
--tab-text-active-color: var(--tab-top-line-active-color);
--tab-text-active-hover-color: var(--tab-text-hover-color);
@ -134,24 +148,6 @@
--signature-placeholder-color: var(--secondary-color);
--signature-draw-placeholder-color: var(--primary-color);
--signature-color: var(--primary-color);
--clear-signature-button-border-width: 0;
--clear-signature-button-border-style: solid;
--clear-signature-button-border-color: transparent;
--clear-signature-button-border-disabled-color: transparent;
--clear-signature-button-color: var(--primary-color);
--clear-signature-button-hover-color: var(--clear-signature-button-color);
--clear-signature-button-active-color: var(--clear-signature-button-color);
--clear-signature-button-disabled-color: var(--clear-signature-button-color);
--clear-signature-button-focus-color: var(--clear-signature-button-color);
--clear-signature-button-bg: var(--dialog-bg-color);
--clear-signature-button-bg-hover: var(--bg-hover);
--clear-signature-button-bg-active: #cfcfd8;
--clear-signature-button-bg-focus: #f0f0f4;
--clear-signature-button-bg-disabled: color-mix(
in srgb,
#f0f0f4,
transparent 40%
);
--save-warning-color: var(--secondary-color);
--thickness-bg: var(--dialog-bg-color);
--thickness-label-color: var(--primary-color);
@ -159,30 +155,13 @@
--thickness-border: none;
--draw-cursor: url(images/cursor-editorInk.svg) 0 16, pointer;
@media (prefers-color-scheme: dark) {
/* TODO: Update the dialog colors for dark mode but in dialog.css */
--dialog-bg-color: #42414d;
--bg-hover: #52525e;
--primary-color: #fbfbfe;
--secondary-color: #cfcfd8;
--tab-top-line-active-color: #0df;
--tab-top-line-inactive-color: #8f8f9d;
--clear-signature-button-bg-active: #5b5b66;
--clear-signature-button-bg-focus: #2b2a33;
--clear-signature-button-bg-disabled: color-mix(
in srgb,
#2b2a33,
transparent 40%
);
}
@media screen and (forced-colors: active) {
--secondary-color: ButtonText;
--bg: HighlightText;
--bg-hover: var(--bg);
--tab-top-line-active-color: ButtonText;
--tab-top-line-active-color: var(--color-accent-primary, ButtonText);
--tab-top-line-active-hover-color: HighlightText;
--tab-top-line-hover-color: SelectedItem;
--tab-top-line-hover-color: var(--border-color-interactive, SelectedItem);
--tab-top-line-inactive-color: ButtonText;
--tab-bottom-line-active-color: var(--tab-top-line-active-color);
--tab-bottom-line-hover-color: var(--tab-top-line-hover-color);
@ -196,24 +175,10 @@
--tab-text-active-hover-color: HighlightText;
--tab-text-hover-color: SelectedItem;
--signature-color: ButtonText;
--clear-signature-button-border-width: 1px;
--clear-signature-button-border-style: solid;
--clear-signature-button-border-color: ButtonText;
--clear-signature-button-border-disabled-color: GrayText;
--clear-signature-button-color: ButtonText;
--clear-signature-button-hover-color: HighlightText;
--clear-signature-button-active-color: SelectedItem;
--clear-signature-button-focus-color: CanvasText;
--clear-signature-button-disabled-color: GrayText;
--clear-signature-button-bg: var(--bg);
--clear-signature-button-bg-hover: SelectedItem;
--clear-signature-button-bg-active: var(--bg);
--clear-signature-button-bg-focus: var(--bg);
--clear-signature-button-bg-disabled: var(--bg);
--thickness-bg: Canvas;
--thickness-label-color: CanvasText;
--thickness-slider-color: ButtonText;
--thickness-border: 1px solid var(--border-color);
--thickness-border: 1px solid var(--signature-border-color);
}
#addSignatureDialogLabel {
@ -533,14 +498,7 @@
#clearSignatureButton {
display: flex;
height: 32px;
padding: 4px 8px;
align-items: center;
background-color: var(--clear-signature-button-bg);
border-width: var(--clear-signature-button-border-width);
border-style: var(--clear-signature-button-border-style);
border-color: var(--clear-signature-button-border-color);
border-radius: 4px;
> span {
display: flex;
@ -549,8 +507,6 @@
gap: 4px;
flex-shrink: 0;
color: var(--clear-signature-button-color);
&::after {
content: "";
display: inline-block;
@ -558,57 +514,10 @@
height: 16px;
mask-image: var(--clear-signature-button-icon);
mask-size: cover;
background-color: var(--clear-signature-button-color);
background-color: currentColor;
flex-shrink: 0;
}
}
&:hover {
background-color: var(--clear-signature-button-bg-hover);
> span {
color: var(--clear-signature-button-hover-color);
&::after {
background-color: var(--clear-signature-button-hover-color);
}
}
}
&:active {
background-color: var(--clear-signature-button-bg-active);
> span {
color: var(--clear-signature-button-active-color);
&::after {
background-color: var(--clear-signature-button-active-color);
}
}
}
&:focus-visible {
background-color: var(--clear-signature-button-bg-focus);
> span {
color: var(--clear-signature-button-focus-color);
&::after {
background-color: var(--clear-signature-button-focus-color);
}
}
}
&:disabled {
background-color: var(--clear-signature-button-bg-disabled);
border-color: var(--clear-signature-button-border-disabled-color);
> span {
color: var(--clear-signature-button-disabled-color);
&::after {
background-color: var(
--clear-signature-button-disabled-color
);
}
}
}
}
}

137
web/toggle_button.css
View File

@ -2,44 +2,13 @@
* 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/. */
.toggle-button {
--button-background-color: color-mix(in srgb, currentColor 7%, transparent);
--button-background-color-hover: color-mix(
in srgb,
currentColor 14%,
transparent
);
--button-background-color-active: color-mix(
in srgb,
currentColor 21%,
transparent
);
--color-accent-primary: light-dark(#0060df, #0df);
--color-accent-primary-hover: light-dark(#0250bb, #80ebff);
--color-accent-primary-active: light-dark(#054096, #aaf2ff);
--border-radius-circle: 9999px;
--border-width: 1px;
--size-item-small: 16px;
--size-item-large: 32px;
--color-canvas: light-dark(white, #1c1b22);
--background-color-canvas: var(--color-canvas);
--border-color-interactive: light-dark(#8f8f9d, #f9f9fa);
--border-color-interactive-hover: var(--border-color-interactive);
--border-color-interactive-active: var(--border-color-interactive);
--focus-outline-offset: 2px;
@media (forced-colors: active) {
--color-accent-primary: ButtonText;
--color-accent-primary-hover: SelectedItem;
--color-accent-primary-active: SelectedItem;
--button-background-color: ButtonFace;
--border-color-interactive: ButtonText;
--border-color-interactive-hover: SelectedItem;
--border-color-interactive-active: ButtonText;
--color-canvas: ButtonText;
--background-color-canvas: Canvas;
}
}
/* 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:
@ -55,23 +24,47 @@
*/
.toggle-button {
--toggle-background-color: var(--button-background-color);
--toggle-background-color-hover: var(--button-background-color-hover);
--toggle-background-color-active: var(--button-background-color-active);
--toggle-background-color-pressed: var(--color-accent-primary);
--toggle-background-color-pressed-hover: var(--color-accent-primary-hover);
--toggle-background-color-pressed-active: var(--color-accent-primary-active);
--toggle-border-color: var(--border-color-interactive);
--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);
--toggle-border-width: var(--border-width);
--toggle-height: var(--size-item-small);
--toggle-width: var(--size-item-large);
--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);
--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 *
@ -93,8 +86,8 @@
box-sizing: border-box;
&:focus-visible {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset);
outline: var(--focus-ring-outline);
outline-offset: var(--focus-outline-offset, 2px);
}
&:enabled:hover {
@ -186,16 +179,42 @@
@media (forced-colors) {
.toggle-button {
--toggle-dot-background-color: var(--color-accent-primary);
--toggle-dot-background-color-hover: var(--color-accent-primary-hover);
--toggle-dot-background-color-active: var(--color-accent-primary-active);
--toggle-dot-background-color-on-pressed: var(--button-background-color);
--toggle-border-color-hover: var(--border-color-interactive-hover);
--toggle-border-color-active: var(--border-color-interactive-active);
--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);
border: 1px solid var(--button-background-color, ButtonFace);
content: "";
position: absolute;
height: var(--toggle-height);

56
web/viewer-geckoview.css
View File

@ -24,12 +24,6 @@
--field-bg-color: light-dark(rgb(255 255 255), rgb(64 64 68));
--field-border-color: light-dark(rgb(187 187 188), rgb(115 115 115));
--doorhanger-bg-color: light-dark(rgb(255 255 255), rgb(74 74 79));
--dialog-button-border: none;
--dialog-button-bg-color: light-dark(rgb(12 12 13 / 0.1), rgb(92 92 97));
--dialog-button-hover-bg-color: light-dark(
rgb(12 12 13 / 0.3),
rgb(115 115 115)
);
--toolbar-bg-color: light-dark(#f9f9fb, #2b2a33);
--toolbar-divider-color: light-dark(#e0e0e6, #5b5b66);
@ -42,9 +36,6 @@
@media screen and (forced-colors: active) {
:root {
--dialog-button-border: 1px solid Highlight;
--dialog-button-hover-bg-color: Highlight;
--dialog-button-hover-color: ButtonFace;
--field-border-color: ButtonText;
--main-color: CanvasText;
}
@ -94,40 +85,6 @@ body {
inset-block-start: 0;
}
.dialogButton {
border: none;
background: none;
width: 28px;
height: 28px;
outline: none;
}
.dialogButton:is(:hover, :focus-visible) {
background-color: var(--dialog-button-hover-bg-color);
}
.dialogButton:is(:hover, :focus-visible) > span {
color: var(--dialog-button-hover-color);
}
.dialogButton[disabled] {
opacity: 0.5;
}
.dialogButton {
min-width: 16px;
margin: 2px 1px;
padding: 2px 6px 0;
border: none;
border-radius: 2px;
color: var(--main-color);
font-size: 12px;
line-height: 14px;
user-select: none;
cursor: default;
box-sizing: border-box;
}
.toolbarField {
padding: 4px 7px;
margin: 3px 0;
@ -204,19 +161,6 @@ body {
}
}
:is(.toolbarButton .dialogButton)[disabled] {
opacity: 0.5;
}
.dialogButton {
width: auto;
margin: 3px 4px 2px !important;
padding: 2px 11px;
color: var(--main-color);
background-color: var(--dialog-button-bg-color);
border: var(--dialog-button-border) !important;
}
dialog {
margin: auto;
padding: 15px;

4
web/viewer-geckoview.html
View File

@ -124,10 +124,10 @@ See https://github.com/adobe-type-tools/cmap-resources
<input type="password" id="password" class="toolbarField" />
</div>
<div class="buttonRow">
<button id="passwordCancel" class="dialogButton" type="button">
<button id="passwordCancel" class="secondaryButton" type="button">
<span data-l10n-id="pdfjs-password-cancel-button"></span>
</button>
<button id="passwordSubmit" class="dialogButton" type="button">
<button id="passwordSubmit" class="primaryButton" type="button">
<span data-l10n-id="pdfjs-password-ok-button"></span>
</button>
</div>

75
web/viewer.css
View File

@ -13,6 +13,16 @@
* limitations under the License.
*/
/* Pref-gated, so the Firefox tokens are opt-in (and with them the Nova theme,
which tokens-brand.css gates on browser.nova.enabled): with the pref off
every var() falls back to its shipped literal. -moz-pref() works here
because chrome rules are enabled for a resource:// stylesheet, and it only
sees pdfjs.* prefs. */
/*#if MOZCENTRAL*/
@import url(chrome://global/skin/design-system/tokens-brand.css) -moz-pref(
"pdfjs.enableNova"
);
/*#endif*/
@import url(pdf_viewer.css);
@import url(digital_signature_properties.css);
@ -55,7 +65,10 @@
inset calc(-1px * var(--dir-factor)) 0 0 rgb(0 0 0 / 0.25),
0 1px 0 rgb(0 0 0 / 0.15), 0 0 1px rgb(0 0 0 / 0.1);
--toolbarSidebar-border-bottom: none;
--button-hover-color: color-mix(in srgb, currentColor 17%, transparent);
--button-hover-color: var(
--button-background-color-toolbar-hover,
color-mix(in srgb, currentColor 17%, transparent)
);
--toggled-btn-color: light-dark(rgb(0 0 0), rgb(255 255 255));
--toggled-btn-bg-color: rgb(0 0 0 / 0.3);
--toggled-hover-active-btn-color: rgb(0 0 0 / 0.4);
@ -70,12 +83,6 @@
--doorhanger-border-color: light-dark(rgb(12 12 13 / 0.2), rgb(39 39 43));
--doorhanger-hover-color: light-dark(rgb(12 12 13), rgb(249 249 250));
--doorhanger-separator-color: light-dark(rgb(222 222 222), rgb(92 92 97));
--dialog-button-border: none;
--dialog-button-bg-color: light-dark(rgb(12 12 13 / 0.1), rgb(92 92 97));
--dialog-button-hover-bg-color: light-dark(
rgb(12 12 13 / 0.3),
rgb(115 115 115)
);
--loading-icon: url(images/loading.svg);
--toolbarButton-editorComment-icon: url(images/comment-editButton.svg);
@ -136,6 +143,10 @@
@media screen and (forced-colors: active) {
:root {
/* Must stay a system color in HCM: --button-background-color-toolbar-hover
is NOT overridden in the dist's forced-colors layer (it stays a
color-mix(currentColor 17%, transparent)), which would make the hover
background a faint translucent overlay and hide the ButtonFace icon. */
--button-hover-color: Highlight;
--toolbar-icon-opacity: 1;
--toolbar-icon-bg-color: ButtonText;
@ -150,9 +161,6 @@
--doorhanger-hover-color: ButtonFace;
--doorhanger-border-color-whcm: 1px solid ButtonText;
--doorhanger-triangle-opacity-whcm: 0;
--dialog-button-border: 1px solid Highlight;
--dialog-button-hover-bg-color: Highlight;
--dialog-button-hover-color: ButtonFace;
--dropdown-btn-border: 1px solid ButtonText;
--field-border-color: ButtonText;
--main-color: CanvasText;
@ -413,22 +421,6 @@ body {
}
}
.dialogButton {
border: none;
background: none;
width: 28px;
height: 28px;
outline: none;
}
.dialogButton:is(:hover, :focus-visible) {
background-color: var(--dialog-button-hover-bg-color);
}
.dialogButton:is(:hover, :focus-visible) > span {
color: var(--dialog-button-hover-color);
}
.splitToolbarButtonSeparator {
float: inline-start;
width: 0;
@ -437,20 +429,6 @@ body {
border-right: none;
}
.dialogButton {
min-width: 16px;
margin: 2px 1px;
padding: 2px 6px 0;
border: none;
border-radius: 2px;
color: var(--main-color);
font-size: 12px;
line-height: 14px;
user-select: none;
cursor: default;
box-sizing: border-box;
}
#viewsManagerToggleButton::before {
mask-image: var(--toolbarButton-viewsManagerToggle-icon);
transform: scaleX(var(--dir-factor));
@ -646,15 +624,6 @@ body {
}
}
.dialogButton {
width: auto;
margin: 3px 4px 2px !important;
padding: 2px 11px;
color: var(--main-color);
background-color: var(--dialog-button-bg-color);
border: var(--dialog-button-border) !important;
}
dialog {
margin: auto;
padding: 15px;
@ -665,7 +634,7 @@ dialog {
line-height: 14px;
background-color: var(--doorhanger-bg-color);
border: 1px solid rgb(0 0 0 / 0.5);
border-radius: 4px;
border-radius: var(--border-radius-medium, 4px);
box-shadow: 0 1px 4px rgb(0 0 0 / 0.3);
}
@ -695,8 +664,10 @@ dialog .separator {
}
dialog .buttonRow {
text-align: center;
vertical-align: middle;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
dialog :link {

16
web/viewer.html
View File

@ -33,7 +33,7 @@ See https://github.com/adobe-type-tools/cmap-resources
<!--<link rel="icon" type="image/svg+xml" href="chrome://global/skin/icons/pdf.svg" />-->
<!--<meta
http-equiv="Content-Security-Policy"
content="default-src 'none'; script-src resource: 'wasm-unsafe-eval'; worker-src resource:; style-src resource:; img-src resource: blob: data:; media-src blob:; font-src resource:; connect-src resource:; base-uri 'none'; form-action 'none';"
content="default-src 'none'; script-src resource: 'wasm-unsafe-eval'; worker-src resource:; style-src resource: chrome:; img-src resource: blob: data:; media-src blob:; font-src resource:; connect-src resource:; base-uri 'none'; form-action 'none';"
/>-->
<!--#elif TESTING-->
<!--<meta
@ -901,8 +901,8 @@ See https://github.com/adobe-type-tools/cmap-resources
<input type="password" id="password" class="toolbarField" />
</div>
<div class="buttonRow">
<button id="passwordCancel" class="dialogButton" type="button"><span data-l10n-id="pdfjs-password-cancel-button"></span></button>
<button id="passwordSubmit" class="dialogButton" type="button"><span data-l10n-id="pdfjs-password-ok-button"></span></button>
<button id="passwordCancel" class="secondaryButton" type="button"><span data-l10n-id="pdfjs-password-cancel-button"></span></button>
<button id="passwordSubmit" class="primaryButton" type="button"><span data-l10n-id="pdfjs-password-ok-button"></span></button>
</div>
</dialog>
<dialog id="documentPropertiesDialog">
@ -966,7 +966,9 @@ See https://github.com/adobe-type-tools/cmap-resources
<p id="linearizedField" aria-labelledby="linearizedLabel">-</p>
</div>
<div class="buttonRow">
<button id="documentPropertiesClose" class="dialogButton" type="button"><span data-l10n-id="pdfjs-document-properties-close-button"></span></button>
<button id="documentPropertiesClose" class="secondaryButton" type="button">
<span data-l10n-id="pdfjs-document-properties-close-button"></span>
</button>
</div>
</dialog>
<dialog class="dialog altText" id="altTextDialog" aria-labelledby="dialogLabel" aria-describedby="dialogDescription">
@ -1210,7 +1212,7 @@ See https://github.com/adobe-type-tools/cmap-resources
<button class="clearInputButton" type="button" tabindex="0" aria-hidden="true"></button>
</span>
</div>
<button id="clearSignatureButton" type="button" data-l10n-id="pdfjs-editor-add-signature-clear-button" tabindex="0">
<button id="clearSignatureButton" class="secondaryButton" type="button" data-l10n-id="pdfjs-editor-add-signature-clear-button" tabindex="0">
<span data-l10n-id="pdfjs-editor-add-signature-clear-button-label"></span>
</button>
</div>
@ -1297,7 +1299,7 @@ See https://github.com/adobe-type-tools/cmap-resources
<span data-l10n-id="pdfjs-print-progress-percent" data-l10n-args='{ "progress": 0 }' class="relative-progress">0%</span>
</div>
<div class="buttonRow">
<button id="printCancel" class="dialogButton" type="button"><span data-l10n-id="pdfjs-print-progress-close-button"></span></button>
<button id="printCancel" class="secondaryButton" type="button"><span data-l10n-id="pdfjs-print-progress-close-button"></span></button>
</div>
</dialog>
<!--#endif-->
@ -1312,7 +1314,7 @@ See https://github.com/adobe-type-tools/cmap-resources
<div>
<span id="editorUndoBarMessage" class="description"></span>
</div>
<button id="editorUndoBarUndoButton" class="undoButton" type="button" tabindex="0" data-l10n-id="pdfjs-editor-undo-bar-undo-button">
<button id="editorUndoBarUndoButton" class="secondaryButton" type="button" tabindex="0" data-l10n-id="pdfjs-editor-undo-bar-undo-button">
<span data-l10n-id="pdfjs-editor-undo-bar-undo-button-label"></span>
</button>
<button id="editorUndoBarCloseButton" class="closeButton" type="button" tabindex="0" data-l10n-id="pdfjs-editor-undo-bar-close-button">

98
web/views_manager.css
View File

@ -60,19 +60,35 @@
--sidebar-max-width: 50vw;
--sidebar-block-padding: 8px;
--text-color: light-dark(#15141a, #fbfbfe);
--button-fg: var(--text-color);
--button-no-bg: transparent;
--button-bg: light-dark(rgb(21 20 26 / 0.07), rgb(251 251 254 / 0.07));
--button-border-color: transparent;
--button-hover-bg: light-dark(rgb(21 20 26 / 0.14), rgb(251 251 254 / 0.14));
--button-hover-fg: var(--text-color);
--button-hover-border-color: var(--button-border-color);
--button-active-bg: light-dark(rgb(21 20 26 / 0.21), rgb(251 251 254 / 0.21));
--button-active-fg: var(--text-color);
--button-active-border-color: var(--button-border-color);
--button-focus-no-bg: color-mix(in srgb, var(--text-color), transparent 93%);
--button-focus-outline-color: light-dark(#0062fa, #00cadb);
--views-text-color: var(--text-color, light-dark(#15141a, #fbfbfe));
--button-fg: var(--views-text-color);
--button-no-bg: var(--button-background-color-toolbar, transparent);
--button-bg: var(
--button-background-color,
light-dark(rgb(21 20 26 / 0.07), rgb(251 251 254 / 0.07))
);
--views-button-border-color: var(--button-border-color, transparent);
--button-hover-bg: var(
--button-background-color-hover,
light-dark(rgb(21 20 26 / 0.14), rgb(251 251 254 / 0.14))
);
--button-hover-fg: var(--views-text-color);
--button-hover-border-color: var(--views-button-border-color);
--button-active-bg: var(
--button-background-color-active,
light-dark(rgb(21 20 26 / 0.21), rgb(251 251 254 / 0.21))
);
--button-active-fg: var(--views-text-color);
--button-active-border-color: var(--views-button-border-color);
--button-focus-no-bg: color-mix(
in srgb,
var(--views-text-color),
transparent 93%
);
--button-focus-outline-color: var(
--focus-outline-color,
light-dark(#0062fa, #00cadb)
);
--button-focus-border-color: light-dark(white, black);
--status-border-color: transparent;
--status-actions-bg: light-dark(
@ -81,7 +97,7 @@
);
--status-undo-bg: light-dark(rgb(0 98 250 / 0.08), rgb(0 202 219 / 0.08));
--status-waiting-bg: var(--status-undo-bg);
--indicator-color: light-dark(#0062fa, #00cadb);
--indicator-color: var(--color-accent-primary, light-dark(#0062fa, #00cadb));
--status-warning-bg: light-dark(#ffe8ea, #6e001f);
--indicator-warning-color: light-dark(#b20037, #ffa0aa);
--header-shadow:
@ -95,7 +111,7 @@
--image-current-border-color: var(--button-focus-outline-color);
--image-current-focused-outline-color: var(--image-hover-border-color);
--image-page-number-bg: light-dark(#f0f0f4, #42414d);
--image-page-number-fg: var(--text-color);
--image-page-number-fg: var(--views-text-color);
--image-page-number-border-color: transparent;
--image-hover-page-number-bg: var(--image-page-number-bg);
--image-hover-page-number-fg: var(--image-page-number-fg);
@ -134,23 +150,25 @@
--multiple-dragging-text-color: light-dark(#fbfbfe, #15141a);
@media screen and (forced-colors: active) {
--text-color: CanvasText;
--button-fg: ButtonText;
--button-bg: ButtonFace;
--button-no-bg: ButtonFace;
--button-border-color: ButtonText;
--button-hover-bg: SelectedItemText;
--button-hover-fg: SelectedItem;
--button-hover-border-color: SelectedItem;
--button-active-bg: SelectedItemText;
--button-active-fg: SelectedItem;
--button-active-border-color: ButtonText;
--button-focus-no-bg: ButtonFace;
--button-focus-outline-color: CanvasText;
--views-text-color: var(--text-color, CanvasText);
--button-fg: var(--button-text-color, ButtonText);
--button-bg: var(--button-background-color, ButtonFace);
--button-no-bg: var(--button-background-color, ButtonFace);
--views-button-border-color: var(--button-border-color, ButtonText);
--button-hover-bg: var(--button-background-color-hover, SelectedItemText);
--button-hover-fg: var(--button-text-color-hover, SelectedItem);
--button-hover-border-color: var(--button-border-color-hover, SelectedItem);
--button-active-bg: var(--button-background-color-active, SelectedItemText);
--button-active-fg: var(--button-text-color-active, SelectedItem);
--button-active-border-color: var(--button-border-color-active, ButtonText);
--button-focus-no-bg: var(--button-background-color, ButtonFace);
--button-focus-outline-color: var(--focus-outline-color, CanvasText);
--button-focus-border-color: none;
--status-border-color: CanvasText;
--status-undo-bg: none;
--indicator-color: CanvasText;
/* Painted on Canvas panels, so --text-color rather than the accent (which
is ButtonText in Firefox HCM). */
--indicator-color: var(--text-color, CanvasText);
--status-warning-bg: none;
--indicator-warning-color: CanvasText;
--header-shadow: none;
@ -162,7 +180,7 @@
--image-hover-page-number-fg: SelectedItem;
--image-current-page-number-bg: ButtonText;
--image-current-page-number-fg: ButtonFace;
--image-current-border-color: ButtonText;
--image-current-border-color: var(--border-color, ButtonText);
--image-current-focused-outline-color: var(--image-hover-border-color);
--image-current-hover-page-number-bg: SelectedItem;
--image-current-hover-page-number-fg: SelectedItemText;
@ -170,7 +188,7 @@
--image-page-number-fg: ButtonText;
--image-page-number-border-color: var(--image-page-number-fg);
--multiple-dragging-bg: Canvas;
--multiple-dragging-indicator-bg: ButtonBorder;
--multiple-dragging-indicator-bg: var(--text-color, ButtonBorder);
--multiple-dragging-text-color: Canvas;
--image-dragging-placeholder-bg: Canvas;
--image-dragging-placeholder-border: 1px GrayText solid;
@ -200,8 +218,8 @@
.viewsManagerButton {
width: auto;
color: var(--button-fg);
border-radius: 8px;
border: 1px solid var(--button-border-color);
border-radius: var(--button-border-radius, 8px);
border: 1px solid var(--views-button-border-color);
background: var(--button-bg);
&:hover {
@ -229,13 +247,17 @@
}
&.viewsCloseButton {
width: 26px;
height: 26px;
padding: 4px;
border-radius: 8px;
width: var(--size-item-large, 26px);
height: var(--size-item-large, 26px);
border-radius: var(--button-border-radius, 8px);
background: none;
display: flex;
align-items: center;
justify-content: center;
&::before {
width: 16px;
height: 16px;
mask-image: var(--close-button-icon);
}
}
@ -253,7 +275,7 @@
.viewsManagerLabel {
flex: 1 1 auto;
color: var(--text-color);
color: var(--views-text-color);
text-align: center;
height: fit-content;
width: fit-content;