Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Enable some Stylelint color-related rules to slightly reduce file sizes

Browse Source 
- Use a consistent format for all alpha-values (this rule didn't require any code changes); see https://stylelint.io/user-guide/rules/alpha-value-notation
 - Use modern and slightly shorter color notation, since [according to MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb#browser_compatibility) that should be supported "everywhere" nowadays; see https://stylelint.io/user-guide/rules/color-function-notation/
 - Use "short" hexadecimal colors whenever possible; see https://stylelint.io/user-guide/rules/color-hex-length/
 - Help avoid adding broken hexadecimal colors (this rule didn't require any code changes); see https://stylelint.io/user-guide/rules/color-no-invalid-hex/
This commit is contained in:
Jonas Jenwald 2023-10-05 17:43:56 +02:00
parent a60f90ae94
commit 4277205d78
13 changed files with 177 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.stylelintrc
View File

@ -6,7 +6,11 @@
"rules": { "rules": {
"prettier/prettier": true, "prettier/prettier": true,
"alpha-value-notation": "number",
"block-no-empty": true, "block-no-empty": true,
"color-function-notation": "modern",
"color-hex-length": "short",
"color-no-invalid-hex": true,
"declaration-block-no-duplicate-properties": true, "declaration-block-no-duplicate-properties": true,
"declaration-block-no-redundant-longhand-properties": true, "declaration-block-no-redundant-longhand-properties": true,
"declaration-property-value-disallowed-list": { "declaration-property-value-disallowed-list": {

38
examples/mobile-viewer/viewer.css
View File

@ -26,12 +26,12 @@ html {
} }
header { header {
background-color: rgba(244, 244, 244, 1); background-color: rgb(244 244 244 / 1);
} }
header h1 { header h1 {
border-bottom: 1px solid rgba(216, 216, 216, 1); border-bottom: 1px solid rgb(216 216 216 / 1);
color: rgba(133, 133, 133, 1); color: rgb(133 133 133 / 1);
font-size: 23px; font-size: 23px;
font-style: italic; font-style: italic;
font-weight: normal; font-weight: normal;
@ -44,7 +44,7 @@ header h1 {
body { body {
background: url(images/document_bg.png); background: url(images/document_bg.png);
color: rgba(255, 255, 255, 1); color: rgb(255 255 255 / 1);
font-family: sans-serif; font-family: sans-serif;
font-size: 10px; font-size: 10px;
height: 100%; height: 100%;
@ -71,7 +71,7 @@ footer {
left: 0; left: 0;
right: 0; right: 0;
z-index: 1; z-index: 1;
box-shadow: 0 -0.2rem 0.5rem rgba(50, 50, 50, 0.75); box-shadow: 0 -0.2rem 0.5rem rgb(50 50 50 / 0.75);
} }
.toolbarButton { .toolbarButton {
@ -81,7 +81,7 @@ footer {
border-width: 0; border-width: 0;
background-position: center center; background-position: center center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: rgba(0, 0, 0, 0); background-color: rgb(0 0 0 / 0);
} }
.toolbarButton.pageUp { .toolbarButton.pageUp {
@ -110,9 +110,9 @@ footer {
left: 36%; left: 36%;
text-align: center; text-align: center;
border: 0; border: 0;
background-color: rgba(0, 0, 0, 0); background-color: rgb(0 0 0 / 0);
font-size: 1.2rem; font-size: 1.2rem;
color: rgba(255, 255, 255, 1); color: rgb(255 255 255 / 1);
background-image: url(images/div_line_left.png), background-image: url(images/div_line_left.png),
url(images/div_line_right.png); url(images/div_line_right.png);
background-repeat: no-repeat; background-repeat: no-repeat;
@ -190,8 +190,8 @@ canvas {
position: relative; position: relative;
height: 0.6rem; height: 0.6rem;
background-color: rgba(51, 51, 51, 1); background-color: rgb(51 51 51 / 1);
border-bottom: 1px solid rgba(51, 51, 51, 1); border-bottom: 1px solid rgb(51 51 51 / 1);
} }
#loadingBar .progress { #loadingBar .progress {
@ -201,7 +201,7 @@ canvas {
transform: scaleX(var(--progressBar-percent)); transform: scaleX(var(--progressBar-percent));
transform-origin: 0 0; transform-origin: 0 0;
height: 100%; height: 100%;
background-color: rgba(221, 221, 221, 1); background-color: rgb(221 221 221 / 1);
overflow: hidden; overflow: hidden;
transition: transform 200ms; transition: transform 200ms;
} }
@ -220,7 +220,7 @@ canvas {
#loadingBar.indeterminate .progress { #loadingBar.indeterminate .progress {
transform: none; transform: none;
background-color: rgba(153, 153, 153, 1); background-color: rgb(153 153 153 / 1);
transition: none; transition: none;
} }
@ -232,9 +232,9 @@ canvas {
width: 5rem; width: 5rem;
background-image: linear-gradient( background-image: linear-gradient(
to right, to right,
rgba(153, 153, 153, 1) 0%, rgb(153 153 153 / 1) 0%,
rgba(255, 255, 255, 1) 50%, rgb(255 255 255 / 1) 50%,
rgba(153, 153, 153, 1) 100% rgb(153 153 153 / 1) 100%
); );
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -242,8 +242,8 @@ canvas {
} }
#errorWrapper { #errorWrapper {
background: none repeat scroll 0 0 rgba(255, 85, 85, 1); background: none repeat scroll 0 0 rgb(255 85 85 / 1);
color: rgba(255, 255, 255, 1); color: rgb(255 255 255 / 1);
left: 0; left: 0;
position: absolute; position: absolute;
right: 0; right: 0;
@ -262,8 +262,8 @@ canvas {
} }
#errorMoreInfo { #errorMoreInfo {
background-color: rgba(255, 255, 255, 1); background-color: rgb(255 255 255 / 1);
color: rgba(0, 0, 0, 1); color: rgb(0 0 0 / 1);
padding: 0.3rem; padding: 0.3rem;
margin: 0.3rem; margin: 0.3rem;
width: 98%; width: 98%;

6
test/annotation_layer_builder_overrides.css
View File

@ -37,8 +37,8 @@
.fileAttachmentAnnotation:not(.hasFillAlpha) .fileAttachmentAnnotation:not(.hasFillAlpha)
.popupTriggerArea { .popupTriggerArea {
opacity: 0.2; opacity: 0.2;
background: rgba(255, 255, 0, 1); background: rgb(255 255 0 / 1);
box-shadow: 0 2px 10px rgba(255, 255, 0, 1); box-shadow: 0 2px 10px rgb(255 255 0 / 1);
} }
.annotationLayer .fileAttachmentAnnotation.hasFillAlpha { .annotationLayer .fileAttachmentAnnotation.hasFillAlpha {
outline: 2px solid yellow; outline: 2px solid yellow;
@ -49,7 +49,7 @@
} }
.annotationLayer .linkAnnotation.hasBorder { .annotationLayer .linkAnnotation.hasBorder {
background-color: rgba(255, 255, 0, 0.2); background-color: rgb(255 255 0 / 0.2);
} }
.annotationLayer .popupTriggerArea::after { .annotationLayer .popupTriggerArea::after {

4
test/text_layer_test.css
View File

@ -26,8 +26,8 @@
position: absolute; position: absolute;
white-space: pre; white-space: pre;
transform-origin: 0% 0%; transform-origin: 0% 0%;
border: solid 1px rgba(255, 0, 0, 0.5); border: solid 1px rgb(255 0 0 / 0.5);
background-color: rgba(255, 255, 32, 0.1); background-color: rgb(255 255 32 / 0.1);
box-sizing: border-box; box-sizing: border-box;
} }

4
test/xfa_layer_builder_overrides.css
View File

@ -15,6 +15,6 @@
.xfaLink { .xfaLink {
opacity: 0.2; opacity: 0.2;
background: rgba(255, 255, 0, 1); background: rgb(255 255 0 / 1);
box-shadow: 0 2px 10px rgba(255, 255, 0, 1); box-shadow: 0 2px 10px rgb(255 255 0 / 1);
} }

18
web/annotation_editor_layer_builder.css
View File

@ -45,18 +45,18 @@
--alt-text-opacity: 0.8; --alt-text-opacity: 0.8;
--alt-text-add-image: url(images/altText_add.svg); --alt-text-add-image: url(images/altText_add.svg);
--alt-text-done-image: url(images/altText_done.svg); --alt-text-done-image: url(images/altText_done.svg);
--alt-text-bg-color: rgba(43, 42, 51, var(--alt-text-opacity)); --alt-text-bg-color: rgb(43 42 51 / var(--alt-text-opacity));
--alt-text-fg-color: #fbfbfe; --alt-text-fg-color: #fbfbfe;
--alt-text-border-color: var(--alt-text-bg-color); --alt-text-border-color: var(--alt-text-bg-color);
--alt-text-hover-bg-color: rgba(82, 82, 94, var(--alt-text-opacity)); --alt-text-hover-bg-color: rgb(82 82 94 / var(--alt-text-opacity));
--alt-text-hover-fg-color: var(--alt-text-fg-color); --alt-text-hover-fg-color: var(--alt-text-fg-color);
--alt-text-hover-border-color: var(--alt-text-hover-bg-color); --alt-text-hover-border-color: var(--alt-text-hover-bg-color);
--alt-text-active-bg-color: rgba(91, 91, 102, var(--alt-text-opacity)); --alt-text-active-bg-color: rgb(91 91 102 / var(--alt-text-opacity));
--alt-text-active-fg-color: var(--alt-text-fg-color); --alt-text-active-fg-color: var(--alt-text-fg-color);
--alt-text-active-border-color: var(--alt-text-hover-bg-color); --alt-text-active-border-color: var(--alt-text-hover-bg-color);
--alt-text-focus-outline-color: #0060df; --alt-text-focus-outline-color: #0060df;
--alt-text-focus-border-color: #f0f0f4; --alt-text-focus-border-color: #f0f0f4;
--alt-text-shadow: 0 2px 6px 0 rgba(28, 27, 34, 0.5); --alt-text-shadow: 0 2px 6px 0 rgb(28 27 34 / 0.5);
} }
@media (min-resolution: 1.1dppx) { @media (min-resolution: 1.1dppx) {
@ -558,7 +558,7 @@
--alt-text-tooltip-bg: #f0f0f4; --alt-text-tooltip-bg: #f0f0f4;
--alt-text-tooltip-fg: #15141a; --alt-text-tooltip-fg: #15141a;
--alt-text-tooltip-border: #8f8f9d; --alt-text-tooltip-border: #8f8f9d;
--alt-text-tooltip-shadow: 0px 2px 6px 0px rgba(58, 57, 68, 0.2); --alt-text-tooltip-shadow: 0px 2px 6px 0px rgb(58 57 68 / 0.2);
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
--alt-text-tooltip-bg: #1c1b22; --alt-text-tooltip-bg: #1c1b22;
@ -600,7 +600,7 @@
#altTextDialog { #altTextDialog {
--dialog-bg-color: white; --dialog-bg-color: white;
--dialog-border-color: white; --dialog-border-color: white;
--dialog-shadow: 0 2px 14px 0 rgba(58, 57, 68, 0.2); --dialog-shadow: 0 2px 14px 0 rgb(58 57 68 / 0.2);
--text-primary-color: #15141a; --text-primary-color: #15141a;
--text-secondary-color: #5b5b66; --text-secondary-color: #5b5b66;
--hover-filter: brightness(0.9); --hover-filter: brightness(0.9);
@ -635,17 +635,17 @@
--dialog-shadow: 0 2px 14px 0 #15141a; --dialog-shadow: 0 2px 14px 0 #15141a;
--text-primary-color: #fbfbfe; --text-primary-color: #fbfbfe;
--text-secondary-color: #cfcfd8; --text-secondary-color: #cfcfd8;
--focus-ring-color: #00ddff; --focus-ring-color: #0df;
--hover-filter: brightness(1.4); --hover-filter: brightness(1.4);
--textarea-bg-color: #42414d; --textarea-bg-color: #42414d;
--radio-bg-color: #2b2a33; --radio-bg-color: #2b2a33;
--radio-checked-bg-color: #15141a; --radio-checked-bg-color: #15141a;
--radio-checked-border-color: #00ddff; --radio-checked-border-color: #0df;
--button-cancel-bg-color: #2b2a33; --button-cancel-bg-color: #2b2a33;
--button-save-bg-color: #00ddff; --button-save-bg-color: #0df;
--button-save-fg-color: #15141a; --button-save-fg-color: #15141a;
} }

14
web/annotation_layer_builder.css
View File

@ -123,12 +123,12 @@
:is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder) :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder)
> a:hover { > a:hover {
opacity: 0.2; opacity: 0.2;
background-color: rgba(255, 255, 0, 1); background-color: rgb(255 255 0 / 1);
box-shadow: 0 2px 10px rgba(255, 255, 0, 1); box-shadow: 0 2px 10px rgb(255 255 0 / 1);
} }
.annotationLayer .linkAnnotation.hasBorder:hover { .annotationLayer .linkAnnotation.hasBorder:hover {
background-color: rgba(255, 255, 0, 0.2); background-color: rgb(255 255 0 / 0.2);
} }
.annotationLayer .hasBorder { .annotationLayer .hasBorder {
@ -291,11 +291,11 @@
} }
.annotationLayer .popup { .annotationLayer .popup {
background-color: rgba(255, 255, 153, 1); background-color: rgb(255 255 153 / 1);
box-shadow: 0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor)) box-shadow: 0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor))
rgba(136, 136, 136, 1); rgb(136 136 136 / 1);
border-radius: calc(2px * var(--scale-factor)); border-radius: calc(2px * var(--scale-factor));
outline: 1.5px solid rgb(255, 255, 74); outline: 1.5px solid rgb(255 255 74);
padding: calc(6px * var(--scale-factor)); padding: calc(6px * var(--scale-factor));
cursor: pointer; cursor: pointer;
font: message-box; font: message-box;
@ -327,7 +327,7 @@
} }
.annotationLayer .popupContent { .annotationLayer .popupContent {
border-top: 1px solid rgba(51, 51, 51, 1); border-top: 1px solid rgb(51 51 51 / 1);
margin-top: calc(2px * var(--scale-factor)); margin-top: calc(2px * var(--scale-factor));
padding-top: calc(2px * var(--scale-factor)); padding-top: calc(2px * var(--scale-factor));
} }

28
web/debugger.css
View File

@ -22,8 +22,8 @@
font: message-box; font: message-box;
} }
#PDFBug { #PDFBug {
background-color: rgba(255, 255, 255, 1); background-color: rgb(255 255 255 / 1);
border: 1px solid rgba(102, 102, 102, 1); border: 1px solid rgb(102 102 102 / 1);
position: fixed; position: fixed;
top: 32px; top: 32px;
right: 0; right: 0;
@ -33,8 +33,8 @@
width: var(--panel-width); width: var(--panel-width);
} }
#PDFBug .controls { #PDFBug .controls {
background: rgba(238, 238, 238, 1); background: rgb(238 238 238 / 1);
border-bottom: 1px solid rgba(102, 102, 102, 1); border-bottom: 1px solid rgb(102 102 102 / 1);
padding: 3px; padding: 3px;
} }
#PDFBug .panels { #PDFBug .panels {
@ -50,7 +50,7 @@
} }
.debuggerShowText, .debuggerShowText,
.debuggerHideText:hover { .debuggerHideText:hover {
background-color: rgba(255, 255, 0, 1); background-color: rgb(255 255 0 / 1);
} }
#PDFBug .stats { #PDFBug .stats {
font-family: courier; font-family: courier;
@ -82,7 +82,7 @@
} }
#viewer.textLayer-visible .canvasWrapper { #viewer.textLayer-visible .canvasWrapper {
background-color: rgba(128, 255, 128, 1); background-color: rgb(128 255 128 / 1);
} }
#viewer.textLayer-visible .canvasWrapper canvas { #viewer.textLayer-visible .canvasWrapper canvas {
@ -90,22 +90,22 @@
} }
#viewer.textLayer-visible .textLayer span { #viewer.textLayer-visible .textLayer span {
background-color: rgba(255, 255, 0, 0.1); background-color: rgb(255 255 0 / 0.1);
color: rgba(0, 0, 0, 1); color: rgb(0 0 0 / 1);
border: solid 1px rgba(255, 0, 0, 0.5); border: solid 1px rgb(255 0 0 / 0.5);
box-sizing: border-box; box-sizing: border-box;
} }
#viewer.textLayer-visible .textLayer span[aria-owns] { #viewer.textLayer-visible .textLayer span[aria-owns] {
background-color: rgba(255, 0, 0, 0.3); background-color: rgb(255 0 0 / 0.3);
} }
#viewer.textLayer-hover .textLayer span:hover { #viewer.textLayer-hover .textLayer span:hover {
background-color: rgba(255, 255, 255, 1); background-color: rgb(255 255 255 / 1);
color: rgba(0, 0, 0, 1); color: rgb(0 0 0 / 1);
} }
#viewer.textLayer-shadow .textLayer span { #viewer.textLayer-shadow .textLayer span {
background-color: rgba(255, 255, 255, 0.6); background-color: rgb(255 255 255 / 0.6);
color: rgba(0, 0, 0, 1); color: rgb(0 0 0 / 1);
} }

2
web/pdf_viewer.css
View File

@ -79,7 +79,7 @@
overflow: visible; overflow: visible;
border: var(--page-border); border: var(--page-border);
background-clip: content-box; background-clip: content-box;
background-color: rgba(255, 255, 255, 1); background-color: rgb(255 255 255 / 1);
} }
.pdfViewer .dummyPage { .pdfViewer .dummyPage {

4
web/text_layer_builder.css
View File

@ -14,8 +14,8 @@
*/ */
:root { :root {
--highlight-bg-color: rgba(180, 0, 170, 1); --highlight-bg-color: rgb(180 0 170 / 1);
--highlight-selected-bg-color: rgba(0, 100, 0, 1); --highlight-selected-bg-color: rgb(0 100 0 / 1);
} }
@media screen and (forced-colors: active) { @media screen and (forced-colors: active) {

46
web/viewer-geckoview.css
View File

@ -22,17 +22,17 @@
--toolbar-icon-opacity: 1; --toolbar-icon-opacity: 1;
--doorhanger-icon-opacity: 0.9; --doorhanger-icon-opacity: 0.9;
--main-color: rgba(12, 12, 13, 1); --main-color: rgb(12 12 13 / 1);
--body-bg-color: rgba(212, 212, 215, 1); --body-bg-color: rgb(212 212 215 / 1);
--scrollbar-color: auto; --scrollbar-color: auto;
--scrollbar-bg-color: auto; --scrollbar-bg-color: auto;
--field-color: rgba(6, 6, 6, 1); --field-color: rgb(6 6 6 / 1);
--field-bg-color: rgba(255, 255, 255, 1); --field-bg-color: rgb(255 255 255 / 1);
--field-border-color: rgba(187, 187, 188, 1); --field-border-color: rgb(187 187 188 / 1);
--doorhanger-bg-color: rgba(255, 255, 255, 1); --doorhanger-bg-color: rgb(255 255 255 / 1);
--dialog-button-border: none; --dialog-button-border: none;
--dialog-button-bg-color: rgba(12, 12, 13, 0.1); --dialog-button-bg-color: rgb(12 12 13 / 0.1);
--dialog-button-hover-bg-color: rgba(12, 12, 13, 0.3); --dialog-button-hover-bg-color: rgb(12 12 13 / 0.3);
--toolbar-bg-color: #f9f9fb; --toolbar-bg-color: #f9f9fb;
--toolbar-divider-color: #e0e0e6; --toolbar-divider-color: #e0e0e6;
@ -48,16 +48,16 @@
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--main-color: rgba(249, 249, 250, 1); --main-color: rgb(249 249 250 / 1);
--body-bg-color: rgba(42, 42, 46, 1); --body-bg-color: rgb(42 42 46 / 1);
--scrollbar-color: rgba(121, 121, 123, 1); --scrollbar-color: rgb(121 121 123 / 1);
--scrollbar-bg-color: rgba(35, 35, 39, 1); --scrollbar-bg-color: rgb(35 35 39 / 1);
--field-color: rgba(250, 250, 250, 1); --field-color: rgb(250 250 250 / 1);
--field-bg-color: rgba(64, 64, 68, 1); --field-bg-color: rgb(64 64 68 / 1);
--field-border-color: rgba(115, 115, 115, 1); --field-border-color: rgb(115 115 115 / 1);
--doorhanger-bg-color: rgba(74, 74, 79, 1); --doorhanger-bg-color: rgb(74 74 79 / 1);
--dialog-button-bg-color: rgba(92, 92, 97, 1); --dialog-button-bg-color: rgb(92 92 97 / 1);
--dialog-button-hover-bg-color: rgba(115, 115, 115, 1); --dialog-button-hover-bg-color: rgb(115 115 115 / 1);
--toolbar-bg-color: #2b2a33; --toolbar-bg-color: #2b2a33;
--toolbar-divider-color: #5b5b66; --toolbar-divider-color: #5b5b66;
@ -254,12 +254,12 @@ dialog {
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
background-color: var(--doorhanger-bg-color); background-color: var(--doorhanger-bg-color);
border: 1px solid rgba(0, 0, 0, 0.5); border: 1px solid rgb(0 0 0 / 0.5);
border-radius: 4px; border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 4px rgb(0 0 0 / 0.3);
} }
dialog::backdrop { dialog::backdrop {
background-color: rgba(0, 0, 0, 0.2); background-color: rgb(0 0 0 / 0.2);
} }
dialog > .row { dialog > .row {
@ -288,7 +288,7 @@ dialog .buttonRow {
} }
dialog :link { dialog :link {
color: rgba(255, 255, 255, 1); color: rgb(255 255 255 / 1);
} }
#passwordDialog { #passwordDialog {
@ -308,7 +308,7 @@ dialog :link {
@media print { @media print {
body { body {
background: rgba(0, 0, 0, 0) none; background: rgb(0 0 0 / 0) none;
} }
body[data-pdfjsprinting] #outerContainer { body[data-pdfjsprinting] #outerContainer {
display: none; display: none;

178
web/viewer.css
View File

@ -29,52 +29,52 @@
--toolbar-icon-opacity: 0.7; --toolbar-icon-opacity: 0.7;
--doorhanger-icon-opacity: 0.9; --doorhanger-icon-opacity: 0.9;
--main-color: rgba(12, 12, 13, 1); --main-color: rgb(12 12 13 / 1);
--body-bg-color: rgba(212, 212, 215, 1); --body-bg-color: rgb(212 212 215 / 1);
--progressBar-color: rgba(10, 132, 255, 1); --progressBar-color: rgb(10 132 255 / 1);
--progressBar-bg-color: rgba(221, 221, 222, 1); --progressBar-bg-color: rgb(221 221 222 / 1);
--progressBar-blend-color: rgba(116, 177, 239, 1); --progressBar-blend-color: rgb(116 177 239 / 1);
--scrollbar-color: auto; --scrollbar-color: auto;
--scrollbar-bg-color: auto; --scrollbar-bg-color: auto;
--toolbar-icon-bg-color: rgba(0, 0, 0, 1); --toolbar-icon-bg-color: rgb(0 0 0 / 1);
--toolbar-icon-hover-bg-color: rgba(0, 0, 0, 1); --toolbar-icon-hover-bg-color: rgb(0 0 0 / 1);
--sidebar-narrow-bg-color: rgba(212, 212, 215, 0.9); --sidebar-narrow-bg-color: rgb(212 212 215 / 0.9);
--sidebar-toolbar-bg-color: rgba(245, 246, 247, 1); --sidebar-toolbar-bg-color: rgb(245 246 247 / 1);
--toolbar-bg-color: rgba(249, 249, 250, 1); --toolbar-bg-color: rgb(249 249 250 / 1);
--toolbar-border-color: rgba(184, 184, 184, 1); --toolbar-border-color: rgb(184 184 184 / 1);
--toolbar-box-shadow: 0 1px 0 var(--toolbar-border-color); --toolbar-box-shadow: 0 1px 0 var(--toolbar-border-color);
--toolbar-border-bottom: none; --toolbar-border-bottom: none;
--toolbarSidebar-box-shadow: inset calc(-1px * var(--dir-factor)) 0 0 --toolbarSidebar-box-shadow: inset calc(-1px * var(--dir-factor)) 0 0
rgba(0, 0, 0, 0.25), rgb(0 0 0 / 0.25),
0 1px 0 rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1); 0 1px 0 rgb(0 0 0 / 0.15), 0 0 1px rgb(0 0 0 / 0.1);
--toolbarSidebar-border-bottom: none; --toolbarSidebar-border-bottom: none;
--button-hover-color: rgba(221, 222, 223, 1); --button-hover-color: rgb(221 222 223 / 1);
--toggled-btn-color: rgba(0, 0, 0, 1); --toggled-btn-color: rgb(0 0 0 / 1);
--toggled-btn-bg-color: rgba(0, 0, 0, 0.3); --toggled-btn-bg-color: rgb(0 0 0 / 0.3);
--toggled-hover-active-btn-color: rgba(0, 0, 0, 0.4); --toggled-hover-active-btn-color: rgb(0 0 0 / 0.4);
--toggled-hover-btn-outline: none; --toggled-hover-btn-outline: none;
--dropdown-btn-bg-color: rgba(215, 215, 219, 1); --dropdown-btn-bg-color: rgb(215 215 219 / 1);
--dropdown-btn-border: none; --dropdown-btn-border: none;
--separator-color: rgba(0, 0, 0, 0.3); --separator-color: rgb(0 0 0 / 0.3);
--field-color: rgba(6, 6, 6, 1); --field-color: rgb(6 6 6 / 1);
--field-bg-color: rgba(255, 255, 255, 1); --field-bg-color: rgb(255 255 255 / 1);
--field-border-color: rgba(187, 187, 188, 1); --field-border-color: rgb(187 187 188 / 1);
--treeitem-color: rgba(0, 0, 0, 0.8); --treeitem-color: rgb(0 0 0 / 0.8);
--treeitem-bg-color: rgba(0, 0, 0, 0.15); --treeitem-bg-color: rgb(0 0 0 / 0.15);
--treeitem-hover-color: rgba(0, 0, 0, 0.9); --treeitem-hover-color: rgb(0 0 0 / 0.9);
--treeitem-selected-color: rgba(0, 0, 0, 0.9); --treeitem-selected-color: rgb(0 0 0 / 0.9);
--treeitem-selected-bg-color: rgba(0, 0, 0, 0.25); --treeitem-selected-bg-color: rgb(0 0 0 / 0.25);
--thumbnail-hover-color: rgba(0, 0, 0, 0.1); --thumbnail-hover-color: rgb(0 0 0 / 0.1);
--thumbnail-selected-color: rgba(0, 0, 0, 0.2); --thumbnail-selected-color: rgb(0 0 0 / 0.2);
--doorhanger-bg-color: rgba(255, 255, 255, 1); --doorhanger-bg-color: rgb(255 255 255 / 1);
--doorhanger-border-color: rgba(12, 12, 13, 0.2); --doorhanger-border-color: rgb(12 12 13 / 0.2);
--doorhanger-hover-color: rgba(12, 12, 13, 1); --doorhanger-hover-color: rgb(12 12 13 / 1);
--doorhanger-hover-bg-color: rgba(237, 237, 237, 1); --doorhanger-hover-bg-color: rgb(237 237 237 / 1);
--doorhanger-separator-color: rgba(222, 222, 222, 1); --doorhanger-separator-color: rgb(222 222 222 / 1);
--dialog-button-border: none; --dialog-button-border: none;
--dialog-button-bg-color: rgba(12, 12, 13, 0.1); --dialog-button-bg-color: rgb(12 12 13 / 0.1);
--dialog-button-hover-bg-color: rgba(12, 12, 13, 0.3); --dialog-button-hover-bg-color: rgb(12 12 13 / 0.3);
--loading-icon: url(images/loading.svg); --loading-icon: url(images/loading.svg);
--treeitem-expanded-icon: url(images/treeitem-expanded.svg); --treeitem-expanded-icon: url(images/treeitem-expanded.svg);
@ -131,43 +131,43 @@
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--main-color: rgba(249, 249, 250, 1); --main-color: rgb(249 249 250 / 1);
--body-bg-color: rgba(42, 42, 46, 1); --body-bg-color: rgb(42 42 46 / 1);
--progressBar-color: rgba(0, 96, 223, 1); --progressBar-color: rgb(0 96 223 / 1);
--progressBar-bg-color: rgba(40, 40, 43, 1); --progressBar-bg-color: rgb(40 40 43 / 1);
--progressBar-blend-color: rgba(20, 68, 133, 1); --progressBar-blend-color: rgb(20 68 133 / 1);
--scrollbar-color: rgba(121, 121, 123, 1); --scrollbar-color: rgb(121 121 123 / 1);
--scrollbar-bg-color: rgba(35, 35, 39, 1); --scrollbar-bg-color: rgb(35 35 39 / 1);
--toolbar-icon-bg-color: rgba(255, 255, 255, 1); --toolbar-icon-bg-color: rgb(255 255 255 / 1);
--toolbar-icon-hover-bg-color: rgba(255, 255, 255, 1); --toolbar-icon-hover-bg-color: rgb(255 255 255 / 1);
--sidebar-narrow-bg-color: rgba(42, 42, 46, 0.9); --sidebar-narrow-bg-color: rgb(42 42 46 / 0.9);
--sidebar-toolbar-bg-color: rgba(50, 50, 52, 1); --sidebar-toolbar-bg-color: rgb(50 50 52 / 1);
--toolbar-bg-color: rgba(56, 56, 61, 1); --toolbar-bg-color: rgb(56 56 61 / 1);
--toolbar-border-color: rgba(12, 12, 13, 1); --toolbar-border-color: rgb(12 12 13 / 1);
--button-hover-color: rgba(102, 102, 103, 1); --button-hover-color: rgb(102 102 103 / 1);
--toggled-btn-color: rgba(255, 255, 255, 1); --toggled-btn-color: rgb(255 255 255 / 1);
--toggled-btn-bg-color: rgba(0, 0, 0, 0.3); --toggled-btn-bg-color: rgb(0 0 0 / 0.3);
--toggled-hover-active-btn-color: rgba(0, 0, 0, 0.4); --toggled-hover-active-btn-color: rgb(0 0 0 / 0.4);
--dropdown-btn-bg-color: rgba(74, 74, 79, 1); --dropdown-btn-bg-color: rgb(74 74 79 / 1);
--separator-color: rgba(0, 0, 0, 0.3); --separator-color: rgb(0 0 0 / 0.3);
--field-color: rgba(250, 250, 250, 1); --field-color: rgb(250 250 250 / 1);
--field-bg-color: rgba(64, 64, 68, 1); --field-bg-color: rgb(64 64 68 / 1);
--field-border-color: rgba(115, 115, 115, 1); --field-border-color: rgb(115 115 115 / 1);
--treeitem-color: rgba(255, 255, 255, 0.8); --treeitem-color: rgb(255 255 255 / 0.8);
--treeitem-bg-color: rgba(255, 255, 255, 0.15); --treeitem-bg-color: rgb(255 255 255 / 0.15);
--treeitem-hover-color: rgba(255, 255, 255, 0.9); --treeitem-hover-color: rgb(255 255 255 / 0.9);
--treeitem-selected-color: rgba(255, 255, 255, 0.9); --treeitem-selected-color: rgb(255 255 255 / 0.9);
--treeitem-selected-bg-color: rgba(255, 255, 255, 0.25); --treeitem-selected-bg-color: rgb(255 255 255 / 0.25);
--thumbnail-hover-color: rgba(255, 255, 255, 0.1); --thumbnail-hover-color: rgb(255 255 255 / 0.1);
--thumbnail-selected-color: rgba(255, 255, 255, 0.2); --thumbnail-selected-color: rgb(255 255 255 / 0.2);
--doorhanger-bg-color: rgba(74, 74, 79, 1); --doorhanger-bg-color: rgb(74 74 79 / 1);
--doorhanger-border-color: rgba(39, 39, 43, 1); --doorhanger-border-color: rgb(39 39 43 / 1);
--doorhanger-hover-color: rgba(249, 249, 250, 1); --doorhanger-hover-color: rgb(249 249 250 / 1);
--doorhanger-hover-bg-color: rgba(93, 94, 98, 1); --doorhanger-hover-bg-color: rgb(93 94 98 / 1);
--doorhanger-separator-color: rgba(92, 92, 97, 1); --doorhanger-separator-color: rgb(92 92 97 / 1);
--dialog-button-bg-color: rgba(92, 92, 97, 1); --dialog-button-bg-color: rgb(92 92 97 / 1);
--dialog-button-hover-bg-color: rgba(115, 115, 115, 1); --dialog-button-hover-bg-color: rgb(115 115 115 / 1);
/* This image is used in <input> elements, which unfortunately means that /* This image is used in <input> elements, which unfortunately means that
* the `mask-image` approach used with all of the other images doesn't work * the `mask-image` approach used with all of the other images doesn't work
@ -235,7 +235,7 @@ body {
#viewerContainer.pdfPresentationMode:fullscreen { #viewerContainer.pdfPresentationMode:fullscreen {
top: 0; top: 0;
background-color: rgba(0, 0, 0, 1); background-color: rgb(0 0 0 / 1);
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
@ -270,7 +270,7 @@ body {
visibility: hidden; visibility: hidden;
z-index: 100; z-index: 100;
font: message-box; font: message-box;
border-top: 1px solid rgba(51, 51, 51, 1); border-top: 1px solid rgb(51 51 51 / 1);
border-inline-end: var(--doorhanger-border-color-whcm); border-inline-end: var(--doorhanger-border-color-whcm);
transition-property: inset-inline-start; transition-property: inset-inline-start;
transition-duration: var(--sidebar-transition-duration); transition-duration: var(--sidebar-transition-duration);
@ -296,7 +296,7 @@ body {
overflow: auto; overflow: auto;
position: absolute; position: absolute;
width: 100%; width: 100%;
box-shadow: inset calc(-1px * var(--dir-factor)) 0 0 rgba(0, 0, 0, 0.25); box-shadow: inset calc(-1px * var(--dir-factor)) 0 0 rgb(0 0 0 / 0.25);
} }
#viewerContainer { #viewerContainer {
@ -497,7 +497,7 @@ body {
} }
/*#if !MOZCENTRAL*/ /*#if !MOZCENTRAL*/
#findInput::-webkit-input-placeholder { #findInput::-webkit-input-placeholder {
color: rgba(191, 191, 191, 1); color: rgb(191 191 191 / 1);
} }
/*#endif*/ /*#endif*/
#findInput::placeholder { #findInput::placeholder {
@ -509,7 +509,7 @@ body {
background-position: calc(50% + 48% * var(--dir-factor)); background-position: calc(50% + 48% * var(--dir-factor));
} }
#findInput[data-status="notFound"] { #findInput[data-status="notFound"] {
background-color: rgba(255, 102, 102, 1); background-color: rgb(255 102 102 / 1);
} }
.secondaryToolbar, .secondaryToolbar,
@ -607,7 +607,7 @@ body {
:is(.doorHanger, .doorHangerRight)::after, :is(.doorHanger, .doorHangerRight)::after,
:is(.doorHanger, .doorHangerRight)::before { :is(.doorHanger, .doorHangerRight)::before {
bottom: 100%; bottom: 100%;
border: 8px solid rgba(0, 0, 0, 0); border: 8px solid rgb(0 0 0 / 0);
content: " "; content: " ";
height: 0; height: 0;
width: 0; width: 0;
@ -639,8 +639,8 @@ body {
} }
#findResultsCount { #findResultsCount {
background-color: rgba(217, 217, 217, 1); background-color: rgb(217 217 217 / 1);
color: rgba(82, 82, 82, 1); color: rgb(82 82 82 / 1);
text-align: center; text-align: center;
padding: 4px 5px; padding: 4px 5px;
margin: 5px; margin: 5px;
@ -981,7 +981,7 @@ a:is(.toolbarButton, .secondaryToolbarButton)[href="#"] {
inset-inline-end: 2px; inset-inline-end: 2px;
/* Create a filled circle, with a diameter of 9 pixels, using only CSS: */ /* Create a filled circle, with a diameter of 9 pixels, using only CSS: */
content: ""; content: "";
background-color: rgba(112, 219, 85, 1); background-color: rgb(112 219 85 / 1);
height: 9px; height: 9px;
width: 9px; width: 9px;
border-radius: 50%; border-radius: 50%;
@ -1206,7 +1206,7 @@ a:focus > .thumbnail > .thumbnailImage,
.thumbnail:not([data-loaded]) > .thumbnailImage { .thumbnail:not([data-loaded]) > .thumbnailImage {
width: calc(var(--thumbnail-width) - 2px); width: calc(var(--thumbnail-width) - 2px);
height: calc(var(--thumbnail-height) - 2px); height: calc(var(--thumbnail-height) - 2px);
border: 1px dashed rgba(132, 132, 132, 1); border: 1px dashed rgb(132 132 132 / 1);
} }
.treeWithDeepNesting > .treeItem, .treeWithDeepNesting > .treeItem,
@ -1248,7 +1248,7 @@ a:focus > .thumbnail > .thumbnailImage,
float: var(--inline-start); float: var(--inline-start);
height: 0; height: 0;
width: 0; width: 0;
color: rgba(255, 255, 255, 0.5); color: rgb(255 255 255 / 0.5);
} }
.treeItemToggler::before { .treeItemToggler::before {
inset-inline-end: 4px; inset-inline-end: 4px;
@ -1295,12 +1295,12 @@ dialog {
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
background-color: var(--doorhanger-bg-color); background-color: var(--doorhanger-bg-color);
border: 1px solid rgba(0, 0, 0, 0.5); border: 1px solid rgb(0 0 0 / 0.5);
border-radius: 4px; border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 4px rgb(0 0 0 / 0.3);
} }
dialog::backdrop { dialog::backdrop {
background-color: rgba(0, 0, 0, 0.2); background-color: rgb(0 0 0 / 0.2);
} }
dialog > .row { dialog > .row {
@ -1329,7 +1329,7 @@ dialog .buttonRow {
} }
dialog :link { dialog :link {
color: rgba(255, 255, 255, 1); color: rgb(255 255 255 / 1);
} }
#passwordDialog { #passwordDialog {
@ -1371,7 +1371,7 @@ dialog :link {
} }
.grab-to-pan-grabbing { .grab-to-pan-grabbing {
position: fixed; position: fixed;
background: rgba(0, 0, 0, 0); background: rgb(0 0 0 / 0);
display: block; display: block;
inset: 0; inset: 0;
overflow: hidden; overflow: hidden;
@ -1388,7 +1388,7 @@ dialog :link {
@media print { @media print {
body { body {
background: rgba(0, 0, 0, 0) none; background: rgb(0 0 0 / 0) none;
} }
body[data-pdfjsprinting] #outerContainer { body[data-pdfjsprinting] #outerContainer {
display: none; display: none;

4
web/xfa_layer_builder.css
View File

@ -34,7 +34,7 @@
.xfaLayer .highlight { .xfaLayer .highlight {
margin: -1px; margin: -1px;
padding: 1px; padding: 1px;
background-color: rgba(239, 203, 237, 1); background-color: rgb(239 203 237 / 1);
border-radius: 4px; border-radius: 4px;
} }
@ -55,7 +55,7 @@
} }
.xfaLayer .highlight.selected { .xfaLayer .highlight.selected {
background-color: rgba(203, 223, 203, 1); background-color: rgb(203 223 203 / 1);
} }
.xfaPage { .xfaPage {