mirrors/pdf.js
1
0
Fork 0
mirror of https://github.com/mozilla/pdf.js.git synced 2025-04-19 06:38:07 +02:00
Code 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
Download patch file Download diff file Expand all files Collapse all files

97
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,61 +177,63 @@ 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);
background-color: var(--toolbar-bg-color);
}
#floatingToolbar.show {
z-index: 100000;
opacity: 1;
}
#floatingToolbar:not(show) {
z-index: -1;
opacity: 0;
}
.toolbarButton {
display: flex;
align-items: center;
border-style: none;
user-select: none;
box-sizing: border-box; box-sizing: border-box;
background-color: transparent; border-block-end: solid var(--toolbar-border-width)
width: auto; var(--toolbar-divider-color);
height: auto; background-color: var(--toolbar-bg-color);
outline: none;
position: relative;
}
.toolbarButton > span { &.show {
color: var(--toolbar-fg-color); z-index: 100000;
width: auto; opacity: 1;
height: auto; }
overflow: hidden;
&:not(.show) {
z-index: -1;
opacity: 0;
}
.toolbarButton {
display: flex;
align-items: center;
border-style: none;
user-select: none;
box-sizing: border-box;
background-color: transparent;
width: auto;
height: 100%;
outline: none;
position: relative;
&::before {
width: 24px;
height: 24px;
content: "";
background-color: var(--toolbar-fg-color);
mask-size: cover;
margin-inline: 12px 8px;
}
> span {
color: var(--toolbar-fg-color);
width: auto;
height: auto;
overflow: hidden;
}
&#download::before {
mask-image: var(--toolbarButton-download-icon);
}
}
} }
:is(.toolbarButton .dialogButton)[disabled] { :is(.toolbarButton .dialogButton)[disabled] {
opacity: 0.5; opacity: 0.5;
} }
.toolbarButton::before {
width: 24px;
height: 24px;
content: "";
background-color: var(--toolbar-fg-color);
mask-size: cover;
margin-inline: 12px 8px;
}
#download::before {
mask-image: var(--toolbarButton-download-icon);
}
.dialogButton { .dialogButton {
width: auto; width: auto;
margin: 3px 4px 2px !important; margin: 3px 4px 2px !important;