Beanz/pdf.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix the colors of disabled buttons in the dialogs

Browse Source
This commit is contained in:
Calixte Denizet 2025-05-26 19:11:24 +02:00
parent 21ef454faf
commit de1a9e7055
1 changed files with 30 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
web/dialog.css
View File

@ -51,6 +51,11 @@
); );
--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-secondary-disabled-bg-color: var(--button-secondary-bg-color);
--button-secondary-disabled-border-color: var(
--button-secondary-border-color
);
--button-secondary-disabled-fg-color: var(--button-secondary-fg-color);
--button-primary-bg-color: light-dark(#0060df, #0df); --button-primary-bg-color: light-dark(#0060df, #0df);
--button-primary-fg-color: light-dark(#fbfbfe, #15141a); --button-primary-fg-color: light-dark(#fbfbfe, #15141a);
@ -61,15 +66,17 @@
--button-primary-hover-bg-color: light-dark(#0250bb, #80ebff); --button-primary-hover-bg-color: light-dark(#0250bb, #80ebff);
--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-primary-disabled-bg-color: var(--button-primary-bg-color);
--button-disabled-bg-color: color-mix(in srgb, currentcolor, transparent 60%); --button-primary-disabled-border-color: var(--button-primary-border-color);
--button-disabled-fg-color: var(--button-disabled-bg-color); --button-primary-disabled-fg-color: var(--button-primary-fg-color);
--button-disabled-opacity: 0.4;
--input-text-bg-color: light-dark(white, #42414d); --input-text-bg-color: light-dark(white, #42414d);
--input-text-fg-color: var(--text-primary-color); --input-text-fg-color: var(--text-primary-color);
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
--hover-filter: brightness(1.4); --hover-filter: brightness(1.4);
--button-disabled-opacity: 0.6;
} }
@media screen and (forced-colors: active) { @media screen and (forced-colors: active) {
@ -101,6 +108,8 @@
--button-secondary-hover-bg-color: HighlightText; --button-secondary-hover-bg-color: HighlightText;
--button-secondary-hover-fg-color: SelectedItem; --button-secondary-hover-fg-color: SelectedItem;
--button-secondary-hover-border-color: SelectedItem; --button-secondary-hover-border-color: SelectedItem;
--button-secondary-disabled-fg-color: GrayText;
--button-secondary-disabled-border-color: GrayText;
--button-primary-bg-color: ButtonText; --button-primary-bg-color: ButtonText;
--button-primary-fg-color: HighlightText; --button-primary-fg-color: HighlightText;
@ -111,9 +120,10 @@
--button-primary-hover-bg-color: SelectedItem; --button-primary-hover-bg-color: SelectedItem;
--button-primary-hover-fg-color: HighlightText; --button-primary-hover-fg-color: HighlightText;
--button-primary-hover-border-color: SelectedItem; --button-primary-hover-border-color: SelectedItem;
--button-primary-disabled-bg-color: GrayText;
--button-disabled-bg-color: GrayText; --button-primary-disabled-fg-color: ButtonFace;
--button-disabled-fg-color: ButtonFace; --button-primary-disabled-border-color: GrayText;
--button-disabled-opacity: 1;
--input-text-bg-color: HighlightText; --input-text-bg-color: HighlightText;
--input-text-fg-color: FieldText; --input-text-fg-color: FieldText;
@ -249,6 +259,13 @@
background-color: var(--button-secondary-active-bg-color); background-color: var(--button-secondary-active-bg-color);
border-color: var(--button-secondary-active-border-color); border-color: var(--button-secondary-active-border-color);
} }
&:disabled {
background-color: var(--button-secondary-disabled-bg-color);
border-color: var(--button-secondary-disabled-border-color);
color: var(--button-secondary-disabled-fg-color);
opacity: var(--button-disabled-opacity);
}
} }
&.primaryButton { &.primaryButton {
@ -268,12 +285,16 @@
background-color: var(--button-primary-active-bg-color); background-color: var(--button-primary-active-bg-color);
border-color: var(--button-primary-active-border-color); border-color: var(--button-primary-active-border-color);
} }
&:disabled {
background-color: var(--button-primary-disabled-bg-color);
border-color: var(--button-primary-disabled-border-color);
color: var(--button-primary-disabled-fg-color);
opacity: var(--button-disabled-opacity);
}
} }
&:disabled { &:disabled {
color: var(--button-disabled-fg-color) !important;
background-color: var(--button-disabled-bg-color);
border-color: var(--button-disabled-bg-color);
pointer-events: none; pointer-events: none;
} }
} }