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

[GV] Increase the height (48px) of the toolbar in order to fit the a11y recommendations (bug 1838602)

Browse Source 
and reorganize the toolbar css to use nested styles.
This commit is contained in:
Calixte Denizet 2024-10-02 18:21:43 +02:00
parent 567df42149
commit 0ce6f8b482
1 changed files with 50 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
web/viewer-geckoview.css
View File

@ -37,6 +37,8 @@
--toolbar-bg-color: #f9f9fb; --toolbar-bg-color: #f9f9fb;
--toolbar-divider-color: #e0e0e6; --toolbar-divider-color: #e0e0e6;
--toolbar-fg-color: #15141a; --toolbar-fg-color: #15141a;
--toolbar-height: 48px;
--toolbar-border-width: 1px;
--toolbarButton-download-icon: url(images/gv-toolbarButton-download.svg); --toolbarButton-download-icon: url(images/gv-toolbarButton-download.svg);
} }
@ -110,8 +112,7 @@ body {
#viewerContainer { #viewerContainer {
overflow: auto; overflow: auto;
position: absolute; position: absolute;
inset-block: 41px 0; inset: var(--toolbar-height) 0 0;
inset-inline: 0;
outline: none; outline: none;
} }
@ -176,20 +177,21 @@ body {
align-items: center; align-items: center;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 40px; height: calc(var(--toolbar-height) + var(--toolbar-border-width));
top: 0; top: 0;
left: 0; left: 0;
box-sizing: content-box; padding: 2px;
border-block-end: solid 1px var(--toolbar-divider-color); box-sizing: border-box;
border-block-end: solid var(--toolbar-border-width)
var(--toolbar-divider-color);
background-color: var(--toolbar-bg-color); background-color: var(--toolbar-bg-color);
}
#floatingToolbar.show { &.show {
z-index: 100000; z-index: 100000;
opacity: 1; opacity: 1;
} }
#floatingToolbar:not(show) { &:not(.show) {
z-index: -1; z-index: -1;
opacity: 0; opacity: 0;
} }
@ -202,23 +204,11 @@ body {
box-sizing: border-box; box-sizing: border-box;
background-color: transparent; background-color: transparent;
width: auto; width: auto;
height: auto; height: 100%;
outline: none; outline: none;
position: relative; position: relative;
}
.toolbarButton > span { &::before {
color: var(--toolbar-fg-color);
width: auto;
height: auto;
overflow: hidden;
}
:is(.toolbarButton .dialogButton)[disabled] {
opacity: 0.5;
}
.toolbarButton::before {
width: 24px; width: 24px;
height: 24px; height: 24px;
content: ""; content: "";
@ -227,9 +217,22 @@ body {
margin-inline: 12px 8px; margin-inline: 12px 8px;
} }
#download::before { > span {
color: var(--toolbar-fg-color);
width: auto;
height: auto;
overflow: hidden;
}
&#download::before {
mask-image: var(--toolbarButton-download-icon); mask-image: var(--toolbarButton-download-icon);
} }
}
}
:is(.toolbarButton .dialogButton)[disabled] {
opacity: 0.5;
}
.dialogButton { .dialogButton {
width: auto; width: auto;