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

Improve rendering of buttons in the toolbar in HCM (bug 1845515)

Browse Source 
With this patch, in HCM, make a button visible when it's active and
add an outline around toggled buttons when they're hovered.
This commit is contained in:
Calixte Denizet 2023-07-26 15:05:50 +02:00
parent 48cc67f17e
commit 7ce4e288e1
1 changed files with 8 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/viewer.css
View File

@ -53,6 +53,7 @@
--toggled-btn-color: rgba(0, 0, 0, 1);
--toggled-btn-bg-color: rgba(0, 0, 0, 0.3);
--toggled-hover-active-btn-color: rgba(0, 0, 0, 0.4);
--toggled-hover-btn-outline: none;
--dropdown-btn-bg-color: rgba(215, 215, 219, 1);
--dropdown-btn-border: none;
--separator-color: rgba(0, 0, 0, 0.3);
@ -181,6 +182,8 @@
--toolbar-icon-opacity: 1;
--toolbar-icon-bg-color: ButtonText;
--toolbar-icon-hover-bg-color: ButtonFace;
--toggled-hover-active-btn-color: ButtonText;
--toggled-hover-btn-outline: 2px solid ButtonBorder;
--toolbar-border-color: CanvasText;
--toolbar-border-bottom: 1px solid var(--toolbar-border-color);
--toolbar-box-shadow: none;
@ -764,6 +767,11 @@ body {
color: var(--toggled-btn-color);
}
:is(.toolbarButton, .secondaryToolbarButton).toggled:hover,
.splitToolbarButton.toggled > .toolbarButton.toggled:hover {
outline: var(--toggled-hover-btn-outline) !important;
}
:is(.toolbarButton, .secondaryToolbarButton).toggled::before {
background-color: var(--toggled-btn-color);
}