mirrors/pdf.js
1
0
Fork 0
mirror of https://github.com/mozilla/pdf.js.git synced 2025-04-18 14:18:23 +02:00
Code Activity

[Editor] Fix the style of the buttons in dialog (bug 1953003)

Browse source 
This patch fixes:
 - the style of the primary/secondary buttons in the dialog which weren't fully compliant to the last specs.
 - the style of the input field in HCM (wrong background)
 - the color of the link in the image tab.
This commit is contained in:
Calixte Denizet 2025-03-11 20:01:53 +01:00
parent 391e84c34b
commit 216e17afc5
2 changed files with 73 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

68
web/dialog.css
View file

@ -33,23 +33,32 @@
--radio-border-color: #8f8f9d;
--radio-checked-border-color: #0060df;
--button-secondary-bg-color: #f0f0f4;
--button-secondary-bg-color: rgb(21 20 26 / 0.07);
--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-active-bg-color: rgb(21 20 26 / 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: rgb(21 20 26 / 0.14);
--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-border-color: var(--button-primary-bg-color);
--button-primary-hover-bg-color: var(--button-primary-bg-color);
--button-primary-active-bg-color: #054096;
--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: #0250bb;
--button-primary-hover-fg-color: var(--button-primary-fg-color);
--button-primary-hover-border-color: var(--button-primary-hover-bg-color);
--button-disabled-bg-color: color-mix(in srgb, currentcolor, transparent 60%);
--button-disabled-fg-color: var(--button-disabled-bg-color);
--input-text-bg-color: white;
--input-text-fg-color: var(--text-primary-color);
@media (prefers-color-scheme: dark) {
--dialog-bg-color: #1c1b22;
--dialog-border-color: #1c1b22;
@ -67,9 +76,15 @@
--radio-checked-bg-color: #15141a;
--radio-checked-border-color: #0df;
--button-secondary-bg-color: #2b2a33;
--button-secondary-bg-color: rgb(251 251 254 / 0.07);
--button-secondary-active-bg-color: rgb(251 251 254 / 0.21);
--button-secondary-hover-bg-color: rgb(251 251 254 / 0.14);
--button-primary-bg-color: #0df;
--button-primary-fg-color: #15141a;
--button-primary-active-bg-color: #aaf2ff;
--button-primary-hover-bg-color: #80ebff;
--input-text-bg-color: #42414d;
}
@media screen and (forced-colors: active) {
@ -92,19 +107,31 @@
--radio-border-color: ButtonText;
--radio-checked-border-color: ButtonText;
--button-secondary-bg-color: ButtonFace;
--button-secondary-bg-color: HighlightText;
--button-secondary-fg-color: ButtonText;
--button-secondary-border-color: ButtonText;
--button-secondary-hover-bg-color: AccentColor;
--button-secondary-hover-fg-color: AccentColorText;
--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-primary-bg-color: ButtonText;
--button-primary-fg-color: ButtonFace;
--button-primary-hover-bg-color: AccentColor;
--button-primary-hover-fg-color: AccentColorText;
--button-primary-fg-color: HighlightText;
--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-disabled-bg-color: GrayText;
--button-disabled-fg-color: ButtonFace;
--input-text-bg-color: HighlightText;
--input-text-fg-color: FieldText;
}
font: message-box;
@ -205,7 +232,8 @@
border-radius: 4px;
border: 1px solid;
font: menu;
font-weight: 600;
font-weight: 590;
font-size: 13px;
padding: 4px 16px;
width: auto;
height: 32px;
@ -217,6 +245,7 @@
> span {
color: inherit;
font: inherit;
}
&.secondaryButton {
@ -229,6 +258,12 @@
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);
}
}
&.primaryButton {
@ -242,6 +277,12 @@
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 {
@ -282,6 +323,11 @@
}
}
input[type="text"] {
background-color: var(--input-text-bg-color);
color: var(--input-text-fg-color);
}
.messageBar {
--message-bar-bg-color: #ffebcd;
--message-bar-fg-color: #15141a;

23
web/signature_manager.css
View file

@ -50,10 +50,14 @@
--primary-color: var(--text-primary-color);
--description-input-color: var(--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;
@ -82,9 +86,7 @@
.inputWithClearButton {
--button-dimension: 24px;
--closing-button-icon: url(images/messageBar_closingButton.svg);
--closing-button-color: var(--primary-color);
--clear-button-icon: url(images/messageBar_closingButton.svg);
width: 100%;
position: relative;
@ -97,10 +99,8 @@
height: 32px;
padding-inline: 8px calc(4px + var(--button-dimension));
box-sizing: border-box;
background-color: transparent;
border-radius: 4px;
border: 1px solid var(--border-color);
color: var(--description-input-color);
}
.clearInputButton {
@ -110,9 +110,9 @@
display: inline-block;
width: var(--button-dimension);
height: var(--button-dimension);
background-color: var(--closing-button-color);
background-color: var(--input-text-fg-color);
mask-size: cover;
mask-image: var(--closing-button-icon);
mask-image: var(--clear-button-icon);
padding: 0;
border: 0;
}
@ -465,9 +465,18 @@
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);
}
}
}