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

Group and scope the secondary toolbar rules using CSS nesting

Browse Source 
The secondary toolbar CSS rules predate the general availability of CSS
nesting, which makes them more difficult to understand and change
safely. The primary issues are that the rules are spread over the
`viewer.css` file, they share blocks with other elements and the scope
of the rules is sometimes bigger than necessary.

This refactoring groups all remaining secondary toolbar rules together,
scoped to the top-level `#secondaryToolbar` element, for improved
overview and isolation. Note that this patch only intends to move the
existing rules around and not change any behavior.

Co-authored-by: Calixte Denizet <calixte.denizet@gmail.com>
This commit is contained in:
Tim van der Meij 2024-08-11 18:16:51 +02:00
parent aa2337f934
commit 5193adf1fd
No known key found for this signature in database
GPG Key ID: 8C3FD2925A5F2762
1 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
web/viewer.css
View File

@ -334,8 +334,7 @@ body {
}
:is(.toolbar, .editorParamsToolbar, #sidebarContainer)
:is(input, button, select),
.secondaryToolbar :is(input, button, a, select) {
:is(input, button, select) {
outline: none;
font: message-box;
}
@ -362,7 +361,6 @@ body {
}
#toolbarContainer,
.secondaryToolbar,
.editorParamsToolbar {
position: relative;
height: var(--toolbar-height);
@ -447,7 +445,6 @@ body {
transition-duration: 0s;
}
.secondaryToolbar,
.editorParamsToolbar {
top: var(--toolbar-height);
position: absolute;
@ -462,7 +459,6 @@ body {
cursor: default;
}
.secondaryToolbar,
.editorParamsToolbar {
padding: 6px 0 10px;
inset-inline-end: 4px;
@ -1223,6 +1219,25 @@ dialog :link {
}
#secondaryToolbar {
background-color: var(--doorhanger-bg-color);
cursor: default;
font: message-box;
font-size: 12px;
height: auto;
inset-inline-end: 4px;
line-height: 14px;
margin: 4px 2px;
padding: 6px 0 10px;
position: absolute;
text-align: left;
top: var(--toolbar-height);
z-index: 30000;
:is(button, a) {
font: message-box;
outline: none;
}
.toolbarButton {
border-radius: 0;
display: inline-block;