sxlxc/PDF.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
3b66fedaaa16e964952cdf142b5d090e0ce55a27
PDF.js/web/signature_manager.css
Yu Cong 44db9807a1
Some checks failed
Types tests / Test (lts/*) (push) Has been cancelled
Details
Lint / Lint (lts/*) (push) Has been cancelled
Details
CodeQL / Analyze (javascript) (push) Has been cancelled
Details
CI / Test (20) (push) Has been cancelled
Details
CI / Test (22) (push) Has been cancelled
Details
CI / Test (24) (push) Has been cancelled
Details
first commit
2025-10-03 22:20:19 +08:00

842 lines
23 KiB
CSS
Raw Blame History

/* Copyright 2022 Mozilla Foundation
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
: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));
--button-signature-bg: transparent;
--button-signature-color: var(--main-color);
--button-signature-active-bg: light-dark(#cfcfd8, #5b5b66);
--button-signature-active-border: none;
--button-signature-active-color: var(--button-signature-color);
--button-signature-border: none;
--button-signature-hover-bg: light-dark(#e0e0e6, #52525e);
--button-signature-hover-color: var(--button-signature-color);
@media screen and (forced-colors: active) {
--signature-bg: HighlightText;
--signature-hover-bg: var(--signature-bg);
--button-signature-bg: HighlightText;
--button-signature-color: ButtonText;
--button-signature-active-bg: ButtonText;
--button-signature-active-color: HighlightText;
--button-signature-border: 1px solid ButtonText;
--button-signature-hover-bg: Highlight;
--button-signature-hover-color: HighlightText;
}
}
.signatureDialog {
--primary-color: var(--text-primary-color);
--border-color: #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;
--open-link-fg: ButtonText;
--open-link-hover-fg: ButtonText;
}
width: 570px;
max-width: 100%;
min-width: 300px;
padding: 16px 0;
.mainContainer {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
span:not([role="sectionhead"]) {
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.title {
margin-inline-start: 16px;
}
}
.inputWithClearButton {
--button-dimension: 24px;
--clear-button-icon: url(images/messageBar_closingButton.svg);
width: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
> input {
width: 100%;
height: 32px;
padding-inline: 8px calc(4px + var(--button-dimension));
box-sizing: border-box;
border-radius: 4px;
border: 1px solid var(--border-color);
}
.clearInputButton {
position: absolute;
inset-block-start: 4px;
inset-inline-end: 4px;
display: inline-block;
width: var(--button-dimension);
height: var(--button-dimension);
background-color: var(--input-text-fg-color);
mask-size: cover;
mask-image: var(--clear-button-icon);
padding: 0;
border: 0;
}
}
}
#addSignatureDialog {
--secondary-color: var(--text-secondary-color);
--bg-hover: #e0e0e6;
--tab-top-line-active-color: #0060df;
--tab-top-line-active-hover-color: var(--tab-text-hover-color);
--tab-top-line-hover-color: #8f8f9d;
--tab-top-line-inactive-color: #cfcfd8;
--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);
--tab-bg: var(--dialog-bg-color);
--tab-bg-active-color: var(--tab-bg);
--tab-bg-active-hover-color: var(--bg-hover);
--tab-bg-hover: var(--bg-hover);
--tab-panel-border: none;
--tab-panel-border-radius: 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);
--tab-text-hover-color: var(--tab-text-color);
--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);
--thickness-slider-color: var(--primary-color);
--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-hover-color: HighlightText;
--tab-top-line-hover-color: 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);
--tab-bg: var(--bg);
--tab-bg-active-color: SelectedItem;
--tab-bg-active-hover-color: SelectedItem;
--tab-panel-border: 1px solid ButtonText;
--tab-panel-border-radius: 8px;
--tab-text-color: ButtonText;
--tab-text-active-color: HighlightText;
--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);
}
#addSignatureDialogLabel {
overflow: hidden;
position: absolute;
inset: 0;
width: 0;
height: 0;
}
&.waiting::after {
content: "";
cursor: wait;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.mainContainer {
[role="tablist"] {
width: 100%;
display: flex;
align-items: flex-start;
gap: 0;
> [role="tab"] {
flex: 1 0 0;
align-self: stretch;
background-color: var(--tab-bg);
padding-inline: 0;
cursor: default;
border-inline: 0;
border-block-width: 1px;
border-block-style: solid;
border-block-start-color: var(--tab-top-line-inactive-color);
border-block-end-color: var(--tab-bottom-line-inactive-color);
border-radius: 0;
font: menu;
font-size: 13px;
font-style: normal;
line-height: normal;
font-weight: 400;
color: var(--tab-text-color);
&:hover {
border-block-start-width: 2px;
border-block-start-color: var(--tab-top-line-hover-color);
border-block-end-color: var(--tab-bottom-line-hover-color);
background-color: var(--tab-bg-hover);
color: var(--tab-text-hover-color);
}
&:focus-visible {
outline: 2px solid var(--tab-top-line-active-color);
outline-offset: -2px;
}
&[aria-selected="true"] {
border-block-start-width: 2px;
border-block-start-color: var(--tab-top-line-active-color);
border-block-end-color: var(--tab-bottom-line-active-color);
background-color: var(--tab-bg-active-color);
font-weight: 590;
color: var(--tab-text-active-color);
&:hover {
border-block-start-color: var(--tab-top-line-active-hover-color);
background-color: var(--tab-bg-active-hover-color);
color: var(--tab-text-active-hover-color);
}
}
}
}
#addSignatureActionContainer {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
align-items: flex-end;
align-self: stretch;
gap: 12px;
padding-inline: 16px;
box-sizing: border-box;
> [role="tabpanel"] {
position: relative;
width: 100%;
height: 220px;
background-color: var(--signature-bg);
border: var(--tab-panel-border);
border-radius: var(--tab-panel-border-radius);
> svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-color: transparent;
}
&#addSignatureTypeContainer {
display: none;
#addSignatureTypeInput {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
padding: 0;
text-align: center;
color: var(--signature-color);
background-color: transparent;
border-radius: var(--tab-panel-border-radius);
font-family:
"Brush script", "Apple Chancery", "Segoe script",
"Freestyle Script", "Palace Script MT", "Brush Script MT", TK,
cursive, serif;
font-size: 44px;
font-style: italic;
font-weight: 400;
&::placeholder {
color: var(--signature-placeholder-color);
text-align: center;
font: menu;
font-style: normal;
font-weight: 274;
font-size: 44px;
line-height: normal;
}
}
}
&#addSignatureDrawContainer {
display: none;
> span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: grid;
align-items: center;
justify-content: center;
background-color: transparent;
color: var(--signature-placeholder-color);
user-select: none;
}
> svg {
stroke: var(--signature-color);
fill: none;
stroke-opacity: 1;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
&:hover {
cursor: var(--draw-cursor);
}
}
#thickness {
position: absolute;
width: 100%;
inset-block-end: 0;
display: grid;
align-items: center;
justify-content: center;
pointer-events: none;
> span {
color: var(--signature-draw-placeholder-color);
}
> div {
width: auto;
height: auto;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 6px 8px 7px;
margin: 0;
background-color: var(--thickness-bg);
border-radius: 4px 4px 0 0;
border-inline: var(--thickness-border);
border-top: var(--thickness-border);
pointer-events: auto;
/* Move the div in order to cover to bottom border of the area. */
position: relative;
top: 1px;
> label {
color: var(--thickness-label-color);
}
> input {
width: 100px;
height: 14px;
background-color: transparent;
/*#if !MOZCENTRAL*/
&::-webkit-slider-runnable-track,
/*#endif*/
&::-moz-range-track,
&::-moz-range-progress {
background-color: var(--thickness-slider-color);
}
/*#if !MOZCENTRAL*/
&::-webkit-slider-thumb,
/*#endif*/
&::-moz-range-thumb {
background-color: var(--thickness-bg);
}
border-radius: 4.5px;
border: 0;
color: var(--signature-color);
}
}
}
}
&#addSignatureImageContainer {
display: none;
> svg {
stroke: none;
stroke-width: 0;
fill: var(--signature-color);
fill-opacity: 1;
}
#addSignatureImagePlaceholder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
span {
color: var(--signature-placeholder-color);
}
a {
color: var(--open-link-fg);
text-decoration: underline;
cursor: pointer;
&:hover {
color: var(--open-link-hover-fg);
}
}
}
#addSignatureFilePicker {
visibility: hidden;
position: relative;
width: 0;
height: 0;
}
}
}
&[data-selected="type"] > #addSignatureTypeContainer,
&[data-selected="draw"] > #addSignatureDrawContainer,
&[data-selected="image"] > #addSignatureImageContainer {
display: block;
}
#addSignatureControls {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 12px;
align-self: stretch;
#horizontalContainer {
display: flex;
align-items: flex-end;
gap: 16px;
align-self: stretch;
#addSignatureDescriptionContainer {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
flex: 1 0 0;
&:has(input:disabled) > label {
opacity: 0.4;
}
> label {
width: auto;
}
}
#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;
height: 24px;
align-items: center;
gap: 4px;
flex-shrink: 0;
color: var(--clear-signature-button-color);
&::after {
content: "";
display: inline-block;
width: 16px;
height: 16px;
mask-image: var(--clear-signature-button-icon);
mask-size: cover;
background-color: var(--clear-signature-button-color);
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
);
}
}
}
}
}
#addSignatureSaveContainer {
display: grid;
grid-template-columns: max-content auto;
gap: 4px;
width: 100%;
> input {
margin: 0;
&:disabled + label {
opacity: 0.4;
}
}
> label {
user-select: none;
}
&:not(.fullStorage) #addSignatureSaveWarning {
display: none;
}
&.fullStorage #addSignatureSaveWarning {
display: block;
opacity: 1;
color: var(--save-warning-color);
font-size: 11px;
}
}
}
}
}
}
#editSignatureDescriptionDialog {
.mainContainer {
padding-inline: 16px;
box-sizing: border-box;
.title {
margin-inline-start: 0;
}
#editSignatureDescriptionAndView {
width: auto;
display: flex;
justify-content: flex-end;
align-items: flex-start;
gap: 12px;
align-self: stretch;
#editSignatureDescriptionContainer {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
flex: 1 1 auto;
}
> svg {
width: 210px;
height: 180px;
padding: 8px;
background-color: var(--signature-bg);
> path {
stroke: var(--button-signature-color);
stroke-width: 1px;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
vector-effect: non-scaling-stroke;
fill: none;
&.contours {
fill: var(--button-signature-color);
stroke-width: 0.5px;
}
}
}
}
}
}
#editorSignatureParamsToolbar {
padding: 8px;
#addSignatureDoorHanger {
gap: 8px;
padding: 2px;
.toolbarAddSignatureButtonContainer {
height: 32px;
display: flex;
justify-content: space-between;
align-items: center;
align-self: stretch;
gap: 8px;
button {
border: var(--button-signature-border);
border-radius: 4px;
background-color: var(--button-signature-bg);
color: var(--button-signature-color);
&:hover {
background-color: var(--button-signature-hover-bg);
}
&:active {
border: var(--button-signature-active-border);
background-color: var(--button-signature-active-bg);
color: var(--button-signature-active-color);
&::before {
background-color: var(--button-signature-active-color);
}
}
&:focus-visible {
outline: var(--focus-ring-outline);
&::before {
background-color: var(--button-signature-color);
}
}
}
.deleteButton {
&::before {
mask-image: var(--clear-signature-button-icon);
}
}
.toolbarAddSignatureButton {
width: calc(0.8 * var(--editor-toolbar-min-width));
height: 100%;
min-height: var(--menuitem-height);
aspect-ratio: unset;
display: flex;
align-items: center;
justify-content: flex-start;
outline: none;
border-radius: 4px;
box-sizing: border-box;
font: message-box;
position: relative;
flex: 1 1 auto;
padding: 0;
gap: 8px;
text-align: start;
white-space: normal;
cursor: default;
overflow: hidden;
> svg {
display: inline-block;
height: 100%;
aspect-ratio: 1;
background-color: var(--signature-bg);
flex: none;
padding: 4px;
box-sizing: border-box;
border: none;
border-radius: 4px;
> path {
stroke: var(--button-signature-color);
stroke-width: 1px;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
vector-effect: non-scaling-stroke;
fill: none;
&.contours {
fill: var(--button-signature-color);
stroke-width: 0.5px;
}
}
}
&:is(:hover, :active) > svg {
border-radius: 4px 0 0 4px;
background-color: var(--signature-hover-bg);
}
&:hover {
> span {
color: var(--button-signature-hover-color);
}
}
&:active {
background-color: var(--button-signature-active-bg);
}
&:is([disabled="disabled"], [disabled]) {
opacity: 0.5;
pointer-events: none;
}
> span {
height: auto;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1 1 auto;
font: menu;
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: normal;
overflow: hidden;
}
}
}
}
}
.editDescription.altText {
--alt-text-add-image: url(images/editor-toolbar-edit.svg) !important;
&::before {
width: 16px !important;
height: 16px !important;
}
}
Reference in New Issue View Git Blame Copy Permalink