mirrors/pdf.js
1
0
Fork 0
mirror of https://github.com/mozilla/pdf.js.git synced 2025-04-19 06:38:07 +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-border-color: #8f8f9d;
--radio-checked-border-color: #0060df; --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-fg-color: var(--text-primary-color);
--button-secondary-border-color: var(--button-secondary-bg-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-fg-color: var(--button-secondary-fg-color);
--button-secondary-hover-border-color: var(--button-secondary-hover-bg-color); --button-secondary-hover-border-color: var(--button-secondary-hover-bg-color);
--button-primary-bg-color: #0060df; --button-primary-bg-color: #0060df;
--button-primary-fg-color: #fbfbfe; --button-primary-fg-color: #fbfbfe;
--button-primary-border-color: var(--button-primary-bg-color); --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-fg-color: var(--button-primary-fg-color);
--button-primary-hover-border-color: var(--button-primary-hover-bg-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-bg-color: color-mix(in srgb, currentcolor, transparent 60%);
--button-disabled-fg-color: var(--button-disabled-bg-color); --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) { @media (prefers-color-scheme: dark) {
--dialog-bg-color: #1c1b22; --dialog-bg-color: #1c1b22;
--dialog-border-color: #1c1b22; --dialog-border-color: #1c1b22;
@ -67,9 +76,15 @@
--radio-checked-bg-color: #15141a; --radio-checked-bg-color: #15141a;
--radio-checked-border-color: #0df; --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-bg-color: #0df;
--button-primary-fg-color: #15141a; --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) { @media screen and (forced-colors: active) {
@ -92,19 +107,31 @@
--radio-border-color: ButtonText; --radio-border-color: ButtonText;
--radio-checked-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-fg-color: ButtonText;
--button-secondary-border-color: ButtonText; --button-secondary-border-color: ButtonText;
--button-secondary-hover-bg-color: AccentColor; --button-secondary-active-bg-color: HighlightText;
--button-secondary-hover-fg-color: AccentColorText; --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-bg-color: ButtonText;
--button-primary-fg-color: ButtonFace; --button-primary-fg-color: HighlightText;
--button-primary-hover-bg-color: AccentColor; --button-primary-border-color: ButtonText;
--button-primary-hover-fg-color: AccentColorText; --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-bg-color: GrayText;
--button-disabled-fg-color: ButtonFace; --button-disabled-fg-color: ButtonFace;
--input-text-bg-color: HighlightText;
--input-text-fg-color: FieldText;
} }
font: message-box; font: message-box;
@ -205,7 +232,8 @@
border-radius: 4px; border-radius: 4px;
border: 1px solid; border: 1px solid;
font: menu; font: menu;
font-weight: 600; font-weight: 590;
font-size: 13px;
padding: 4px 16px; padding: 4px 16px;
width: auto; width: auto;
height: 32px; height: 32px;
@ -217,6 +245,7 @@
> span { > span {
color: inherit; color: inherit;
font: inherit;
} }
&.secondaryButton { &.secondaryButton {
@ -229,6 +258,12 @@
background-color: var(--button-secondary-hover-bg-color); background-color: var(--button-secondary-hover-bg-color);
border-color: var(--button-secondary-hover-border-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 { &.primaryButton {
@ -242,6 +277,12 @@
background-color: var(--button-primary-hover-bg-color); background-color: var(--button-primary-hover-bg-color);
border-color: var(--button-primary-hover-border-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 { &:disabled {
@ -282,6 +323,11 @@
} }
} }
input[type="text"] {
background-color: var(--input-text-bg-color);
color: var(--input-text-fg-color);
}
.messageBar { .messageBar {
--message-bar-bg-color: #ffebcd; --message-bar-bg-color: #ffebcd;
--message-bar-fg-color: #15141a; --message-bar-fg-color: #15141a;

23
web/signature_manager.css
View file

@ -50,10 +50,14 @@
--primary-color: var(--text-primary-color); --primary-color: var(--text-primary-color);
--description-input-color: var(--primary-color); --description-input-color: var(--primary-color);
--border-color: #8f8f9d; --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) { @media screen and (forced-colors: active) {
--primary-color: ButtonText; --primary-color: ButtonText;
--border-color: ButtonText; --border-color: ButtonText;
--open-link-fg: ButtonText;
--open-link-hover-fg: ButtonText;
} }
width: 570px; width: 570px;
@ -82,9 +86,7 @@
.inputWithClearButton { .inputWithClearButton {
--button-dimension: 24px; --button-dimension: 24px;
--clear-button-icon: url(images/messageBar_closingButton.svg);
--closing-button-icon: url(images/messageBar_closingButton.svg);
--closing-button-color: var(--primary-color);
width: 100%; width: 100%;
position: relative; position: relative;
@ -97,10 +99,8 @@
height: 32px; height: 32px;
padding-inline: 8px calc(4px + var(--button-dimension)); padding-inline: 8px calc(4px + var(--button-dimension));
box-sizing: border-box; box-sizing: border-box;
background-color: transparent;
border-radius: 4px; border-radius: 4px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
color: var(--description-input-color);
} }
.clearInputButton { .clearInputButton {
@ -110,9 +110,9 @@
display: inline-block; display: inline-block;
width: var(--button-dimension); width: var(--button-dimension);
height: var(--button-dimension); height: var(--button-dimension);
background-color: var(--closing-button-color); background-color: var(--input-text-fg-color);
mask-size: cover; mask-size: cover;
mask-image: var(--closing-button-icon); mask-image: var(--clear-button-icon);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -465,9 +465,18 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
span {
color: var(--signature-placeholder-color);
}
a { a {
color: var(--open-link-fg);
text-decoration: underline; text-decoration: underline;
cursor: pointer; cursor: pointer;
&:hover {
color: var(--open-link-hover-fg);
}
} }
} }