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

[Editor] Fix the colors in HCM when hovering a button in the editor toolbar

Browse Source 
It fixes few errors in the CSS for HCM.
It now complies to the specs from UI/UX.
Only the foreground must change in HCM and not the background, similarly to what
we had for the alt-text button before moving it.
This commit is contained in:
Calixte Denizet 2023-11-29 16:50:00 +01:00
parent 59cf2ee5a9
commit 91eda77f63
1 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
web/annotation_editor_layer_builder.css
View File

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