mirror of
https://github.com/mozilla/pdf.js.git
synced 2025-04-19 22:58:07 +02:00
Move the dialog css stuff in its own file
In order to share common parts between different dialogs, this patch aims to slightly refactor the css in making it more generic. This way it'll simplify adding a new dialog (we want to add a new one when leaving an unsaved document).
This commit is contained in:
Calixte Denizet
parent
4bdc75f18d
commit
697255d7cc
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