Marmelator/pdf.js.mirror
1
0
Fork 0
mirror of https://github.com/mozilla/pdf.js.git synced 2026-07-31 19:37:21 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #21665 from calixteman/sync_firefox_css

Browse Source 
Sync the viewer chrome with the Firefox design system
This commit is contained in:
calixteman 2026-07-31 09:48:01 +02:00 committed by GitHub
commit 40f6492997
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
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;