mirrors/pdf.js
1
0
Fork 0
mirror of https://github.com/mozilla/pdf.js.git synced 2025-04-29 15:47:57 +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;