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

Merge pull request #17352 from calixteman/move_button_hcm

Browse Source 
[Editor] Fix the colors in HCM when hovering a button in the editor toolbar
This commit is contained in:
calixteman 2023-11-29 20:21:16 +01:00 committed by GitHub
commit 9ac1ac6ed3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
web/annotation_editor_layer_builder.css
View File

@ -171,7 +171,10 @@
--editor-toolbar-bg-color: #f0f0f4; --editor-toolbar-bg-color: #f0f0f4;
--editor-toolbar-fg-color: #2e2e56; --editor-toolbar-fg-color: #2e2e56;
--editor-toolbar-border-color: #8f8f9d; --editor-toolbar-border-color: #8f8f9d;
--editor-toolbar-hover-border-color: var(--editor-toolbar-border-color);
--editor-toolbar-hover-bg-color: #e0e0e6; --editor-toolbar-hover-bg-color: #e0e0e6;
--editor-toolbar-hover-fg-color: var(--editor-toolbar-fg-color);
--editor-toolbar-hover-outline: none;
--editor-toolbar-active-bg-color: #cfcfd8; --editor-toolbar-active-bg-color: #cfcfd8;
--editor-toolbar-focus-outline-color: #0060df; --editor-toolbar-focus-outline-color: #0060df;
--editor-toolbar-shadow: 0 2px 6px 0 rgb(58 57 68 / 0.2); --editor-toolbar-shadow: 0 2px 6px 0 rgb(58 57 68 / 0.2);
@ -191,7 +194,11 @@
--editor-toolbar-bg-color: ButtonFace; --editor-toolbar-bg-color: ButtonFace;
--editor-toolbar-fg-color: ButtonText; --editor-toolbar-fg-color: ButtonText;
--editor-toolbar-border-color: ButtonText; --editor-toolbar-border-color: ButtonText;
--editor-toolbar-hover-bg-color: AccentColor; --editor-toolbar-hover-border-color: AccentColor;
--editor-toolbar-hover-bg-color: ButtonFace;
--editor-toolbar-hover-fg-color: AccentColor;
--editor-toolbar-hover-outline: 2px solid
var(--editor-toolbar-hover-border-color);
--editor-toolbar-active-bg-color: ButtonFace; --editor-toolbar-active-bg-color: ButtonFace;
--editor-toolbar-focus-outline-color: ButtonBorder; --editor-toolbar-focus-outline-color: ButtonBorder;
--editor-toolbar-shadow: none; --editor-toolbar-shadow: none;
@ -263,6 +270,10 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
&:hover::before {
background-color: var(--editor-toolbar-hover-fg-color);
}
} }
> * { > * {
@ -277,11 +288,13 @@
&:hover { &:hover {
border-radius: 2px; border-radius: 2px;
background-color: var(--editor-toolbar-hover-bg-color); background-color: var(--editor-toolbar-hover-bg-color);
} color: var(--editor-toolbar-hover-fg-color);
outline: var(--editor-toolbar-hover-outline);
outline-offset: 1px;
&:active { &:active {
border-radius: 2px; outline: none;
background-color: var(--editor-toolbar-active-bg-color); }
} }
&:focus-visible { &:focus-visible {
@ -321,6 +334,10 @@
margin-inline-end: 4px; margin-inline-end: 4px;
} }
&:hover::before {
background-color: var(--editor-toolbar-hover-fg-color);
}
&.done::before { &.done::before {
mask-image: var(--alt-text-done-image); mask-image: var(--alt-text-done-image);
} }