mirror of
https://github.com/mozilla/pdf.js.git
synced 2025-04-19 14:48:08 +02:00
Merge pull request #18174 from calixteman/make_dialog_css
Move the dialog css stuff in its own file
This commit is contained in:
calixteman
GitHub
commit
95a7de9f98
4 changed files with 231 additions and 208 deletions
|
|
@ -693,104 +693,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
#altTextDialog {
|
||||
--dialog-bg-color: white;
|
||||
--dialog-border-color: white;
|
||||
--dialog-shadow: 0 2px 14px 0 rgb(58 57 68 / 0.2);
|
||||
--text-primary-color: #15141a;
|
||||
--text-secondary-color: #5b5b66;
|
||||
--hover-filter: brightness(0.9);
|
||||
--focus-ring-color: #0060df;
|
||||
--focus-ring-outline: 2px solid var(--focus-ring-color);
|
||||
|
||||
--textarea-border-color: #8f8f9d;
|
||||
--textarea-bg-color: white;
|
||||
--textarea-fg-color: var(--text-secondary-color);
|
||||
|
||||
--radio-bg-color: #f0f0f4;
|
||||
--radio-checked-bg-color: #fbfbfe;
|
||||
--radio-border-color: #8f8f9d;
|
||||
--radio-checked-border-color: #0060df;
|
||||
|
||||
--button-cancel-bg-color: #f0f0f4;
|
||||
--button-cancel-fg-color: var(--text-primary-color);
|
||||
--button-cancel-border-color: var(--button-cancel-bg-color);
|
||||
--button-cancel-hover-bg-color: var(--button-cancel-bg-color);
|
||||
--button-cancel-hover-fg-color: var(--button-cancel-fg-color);
|
||||
--button-cancel-hover-border-color: var(--button-cancel-hover-bg-color);
|
||||
|
||||
--button-save-bg-color: #0060df;
|
||||
--button-save-fg-color: #fbfbfe;
|
||||
--button-save-hover-bg-color: var(--button-save-bg-color);
|
||||
--button-save-hover-fg-color: var(--button-save-fg-color);
|
||||
--button-save-hover-border-color: var(--button-save-hover-bg-color);
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
--dialog-bg-color: #1c1b22;
|
||||
--dialog-border-color: #1c1b22;
|
||||
--dialog-shadow: 0 2px 14px 0 #15141a;
|
||||
--text-primary-color: #fbfbfe;
|
||||
--text-secondary-color: #cfcfd8;
|
||||
--focus-ring-color: #0df;
|
||||
--hover-filter: brightness(1.4);
|
||||
|
||||
--textarea-bg-color: #42414d;
|
||||
|
||||
--radio-bg-color: #2b2a33;
|
||||
--radio-checked-bg-color: #15141a;
|
||||
--radio-checked-border-color: #0df;
|
||||
|
||||
--button-cancel-bg-color: #2b2a33;
|
||||
--button-save-bg-color: #0df;
|
||||
--button-save-fg-color: #15141a;
|
||||
}
|
||||
|
||||
@media screen and (forced-colors: active) {
|
||||
--dialog-bg-color: Canvas;
|
||||
--dialog-border-color: CanvasText;
|
||||
--dialog-shadow: none;
|
||||
--text-primary-color: CanvasText;
|
||||
--text-secondary-color: CanvasText;
|
||||
--hover-filter: none;
|
||||
--focus-ring-color: ButtonBorder;
|
||||
|
||||
--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-cancel-bg-color: ButtonFace;
|
||||
--button-cancel-fg-color: ButtonText;
|
||||
--button-cancel-border-color: ButtonText;
|
||||
--button-cancel-hover-bg-color: AccentColor;
|
||||
--button-cancel-hover-fg-color: AccentColorText;
|
||||
|
||||
--button-save-bg-color: ButtonText;
|
||||
--button-save-fg-color: ButtonFace;
|
||||
--button-save-hover-bg-color: AccentColor;
|
||||
--button-save-hover-fg-color: AccentColorText;
|
||||
}
|
||||
|
||||
font: message-box;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
line-height: 150%;
|
||||
border-radius: 4px;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid var(--dialog-border-color);
|
||||
background: var(--dialog-bg-color);
|
||||
color: var(--text-primary-color);
|
||||
box-shadow: var(--dialog-shadow);
|
||||
|
||||
.dialog.altText {
|
||||
&::backdrop {
|
||||
/* This is needed to avoid to darken the image the user want to describe. */
|
||||
mask: url(#alttext-manager-mask);
|
||||
}
|
||||
|
||||
/* See alt_text_manager.js */
|
||||
&.positioned {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -803,58 +712,6 @@
|
|||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
|
||||
& *:focus-visible {
|
||||
outline: var(--focus-ring-outline);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
& .radio {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
|
||||
& .radioButton {
|
||||
display: flex;
|
||||
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 {
|
||||
display: flex;
|
||||
padding-inline-start: 24px;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
align-self: stretch;
|
||||
|
||||
& span {
|
||||
flex: 1 0 0;
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& #overallDescription {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -884,27 +741,8 @@
|
|||
padding-inline: 24px 10px;
|
||||
|
||||
textarea {
|
||||
font: inherit;
|
||||
width: 100%;
|
||||
min-height: 75px;
|
||||
padding: 8px;
|
||||
resize: none;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--textarea-border-color);
|
||||
background: var(--textarea-bg-color);
|
||||
color: var(--textarea-fg-color);
|
||||
|
||||
&:focus {
|
||||
outline-offset: 0;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -915,46 +753,6 @@
|
|||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
align-self: stretch;
|
||||
|
||||
button {
|
||||
border-radius: 4px;
|
||||
border: 1px solid;
|
||||
font: menu;
|
||||
font-weight: 600;
|
||||
padding: 4px 16px;
|
||||
width: auto;
|
||||
height: 32px;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
filter: var(--hover-filter);
|
||||
}
|
||||
|
||||
&#altTextCancel {
|
||||
color: var(--button-cancel-fg-color);
|
||||
background-color: var(--button-cancel-bg-color);
|
||||
border-color: var(--button-cancel-border-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--button-cancel-hover-fg-color);
|
||||
background-color: var(--button-cancel-hover-bg-color);
|
||||
border-color: var(--button-cancel-hover-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
&#altTextSave {
|
||||
color: var(--button-save-hover-fg-color);
|
||||
background-color: var(--button-save-hover-bg-color);
|
||||
border-color: var(--button-save-hover-border-color);
|
||||
opacity: 1;
|
||||
|
||||
&:hover {
|
||||
color: var(--button-save-hover-fg-color);
|
||||
background-color: var(--button-save-hover-bg-color);
|
||||
border-color: var(--button-save-hover-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
224
web/dialog.css
Normal file
224
web/dialog.css
Normal file
|
|
@ -0,0 +1,224 @@
|
|||
/* Copyright 2022 Mozilla Foundation
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.dialog {
|
||||
--dialog-bg-color: white;
|
||||
--dialog-border-color: white;
|
||||
--dialog-shadow: 0 2px 14px 0 rgb(58 57 68 / 0.2);
|
||||
--text-primary-color: #15141a;
|
||||
--text-secondary-color: #5b5b66;
|
||||
--hover-filter: brightness(0.9);
|
||||
--focus-ring-color: #0060df;
|
||||
--focus-ring-outline: 2px solid var(--focus-ring-color);
|
||||
|
||||
--textarea-border-color: #8f8f9d;
|
||||
--textarea-bg-color: white;
|
||||
--textarea-fg-color: var(--text-secondary-color);
|
||||
|
||||
--radio-bg-color: #f0f0f4;
|
||||
--radio-checked-bg-color: #fbfbfe;
|
||||
--radio-border-color: #8f8f9d;
|
||||
--radio-checked-border-color: #0060df;
|
||||
|
||||
--button-secondary-bg-color: #f0f0f4;
|
||||
--button-secondary-fg-color: var(--text-primary-color);
|
||||
--button-secondary-border-color: var(--button-secondary-bg-color);
|
||||
--button-secondary-hover-bg-color: var(--button-secondary-bg-color);
|
||||
--button-secondary-hover-fg-color: var(--button-secondary-fg-color);
|
||||
--button-secondary-hover-border-color: var(--button-secondary-hover-bg-color);
|
||||
|
||||
--button-primary-bg-color: #0060df;
|
||||
--button-primary-fg-color: #fbfbfe;
|
||||
--button-primary-hover-bg-color: var(--button-primary-bg-color);
|
||||
--button-primary-hover-fg-color: var(--button-primary-fg-color);
|
||||
--button-primary-hover-border-color: var(--button-primary-hover-bg-color);
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
--dialog-bg-color: #1c1b22;
|
||||
--dialog-border-color: #1c1b22;
|
||||
--dialog-shadow: 0 2px 14px 0 #15141a;
|
||||
--text-primary-color: #fbfbfe;
|
||||
--text-secondary-color: #cfcfd8;
|
||||
--focus-ring-color: #0df;
|
||||
--hover-filter: brightness(1.4);
|
||||
|
||||
--textarea-bg-color: #42414d;
|
||||
|
||||
--radio-bg-color: #2b2a33;
|
||||
--radio-checked-bg-color: #15141a;
|
||||
--radio-checked-border-color: #0df;
|
||||
|
||||
--button-secondary-bg-color: #2b2a33;
|
||||
--button-primary-bg-color: #0df;
|
||||
--button-primary-fg-color: #15141a;
|
||||
}
|
||||
|
||||
@media screen and (forced-colors: active) {
|
||||
--dialog-bg-color: Canvas;
|
||||
--dialog-border-color: CanvasText;
|
||||
--dialog-shadow: none;
|
||||
--text-primary-color: CanvasText;
|
||||
--text-secondary-color: CanvasText;
|
||||
--hover-filter: none;
|
||||
--focus-ring-color: ButtonBorder;
|
||||
|
||||
--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-hover-bg-color: AccentColor;
|
||||
--button-secondary-hover-fg-color: AccentColorText;
|
||||
|
||||
--button-primary-bg-color: ButtonText;
|
||||
--button-primary-fg-color: ButtonFace;
|
||||
--button-primary-hover-bg-color: AccentColor;
|
||||
--button-primary-hover-fg-color: AccentColorText;
|
||||
}
|
||||
|
||||
font: message-box;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
line-height: 150%;
|
||||
border-radius: 4px;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid var(--dialog-border-color);
|
||||
background: var(--dialog-bg-color);
|
||||
color: var(--text-primary-color);
|
||||
box-shadow: var(--dialog-shadow);
|
||||
|
||||
.mainContainer {
|
||||
*:focus-visible {
|
||||
outline: var(--focus-ring-outline);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.radio {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
|
||||
> .radioButton {
|
||||
display: flex;
|
||||
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 {
|
||||
display: flex;
|
||||
padding-inline-start: 24px;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
align-self: stretch;
|
||||
|
||||
> span {
|
||||
flex: 1 0 0;
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 4px;
|
||||
border: 1px solid;
|
||||
font: menu;
|
||||
font-weight: 600;
|
||||
padding: 4px 16px;
|
||||
width: auto;
|
||||
height: 32px;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
filter: var(--hover-filter);
|
||||
}
|
||||
|
||||
&.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);
|
||||
}
|
||||
}
|
||||
|
||||
&.primaryButton {
|
||||
color: var(--button-primary-hover-fg-color);
|
||||
background-color: var(--button-primary-hover-bg-color);
|
||||
border-color: var(--button-primary-hover-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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
font: inherit;
|
||||
padding: 8px;
|
||||
resize: none;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--textarea-border-color);
|
||||
background: var(--textarea-bg-color);
|
||||
color: var(--textarea-fg-color);
|
||||
|
||||
&:focus {
|
||||
outline-offset: 0;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -12,6 +12,7 @@
|
|||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
@import url(dialog.css);
|
||||
@import url(text_layer_builder.css);
|
||||
@import url(annotation_layer_builder.css);
|
||||
@import url(xfa_layer_builder.css);
|
||||
|
|
|
|||
|
|
@ -507,8 +507,8 @@ See https://github.com/adobe-type-tools/cmap-resources
|
|||
<button id="documentPropertiesClose" class="dialogButton"><span data-l10n-id="pdfjs-document-properties-close-button">Close</span></button>
|
||||
</div>
|
||||
</dialog>
|
||||
<dialog id="altTextDialog" aria-labelledby="dialogLabel" aria-describedby="dialogDescription">
|
||||
<div id="altTextContainer">
|
||||
<dialog class="dialog altText" id="altTextDialog" aria-labelledby="dialogLabel" aria-describedby="dialogDescription">
|
||||
<div id="altTextContainer" class="mainContainer">
|
||||
<div id="overallDescription">
|
||||
<span id="dialogLabel" data-l10n-id="pdfjs-editor-alt-text-dialog-label" class="title">Choose an option</span>
|
||||
<span id="dialogDescription" data-l10n-id="pdfjs-editor-alt-text-dialog-description">
|
||||
|
|
@ -545,8 +545,8 @@ See https://github.com/adobe-type-tools/cmap-resources
|
|||
</div>
|
||||
</div>
|
||||
<div id="buttons">
|
||||
<button id="altTextCancel" tabindex="0"><span data-l10n-id="pdfjs-editor-alt-text-cancel-button">Cancel</span></button>
|
||||
<button id="altTextSave" tabindex="0"><span data-l10n-id="pdfjs-editor-alt-text-save-button">Save</span></button>
|
||||
<button id="altTextCancel" class="secondaryButton" tabindex="0"><span data-l10n-id="pdfjs-editor-alt-text-cancel-button">Cancel</span></button>
|
||||
<button id="altTextSave" class="primaryButton" tabindex="0"><span data-l10n-id="pdfjs-editor-alt-text-save-button">Save</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue