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

Simplify setting of spacing at the left/right edges of the toolbar(s)

Browse Source 
Rather than modifying the leading/trailing `margin` on the actual toolbar buttons, to achieve appropriate spacing at the left/right edges of the toolbar(s), it seems much more appropriate (and simpler) to just specify an explicit `padding` for the relevant toolbar containers.

Also, for toolbar buttons placed in `splitToolbarButton`-classes we can reduce some complexity around setting the `margin` (since it should always be zero now).

With these changes, we're thus able to get rid of a couple more `!important`-rules.
This commit is contained in:
Jonas Jenwald 2022-04-22 13:04:12 +02:00
parent f39219cd45
commit 33ed743c48
1 changed files with 14 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
web/viewer.css
View File

@ -313,13 +313,6 @@ select {
0 1px 0 rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
}
#toolbarSidebar .toolbarButton {
margin-inline-end: 2px !important;
}
#toolbarSidebarRight .toolbarButton {
margin-inline-end: 3px !important;
}
#sidebarResizer {
position: absolute;
top: 0;
@ -580,8 +573,18 @@ select {
float: inline-start;
}
#toolbarViewerLeft {
padding-inline-start: 1px;
}
#toolbarViewerRight {
padding-inline-end: 1px;
}
#toolbarSidebarRight {
padding-inline-end: 2px;
}
.splitToolbarButton {
margin: 2px 2px 0;
margin: 2px;
display: inline-block;
}
.splitToolbarButton > .toolbarButton {
@ -620,10 +623,6 @@ select {
opacity: 0.5;
}
.splitToolbarButton.toggled .toolbarButton {
margin: 0;
}
.splitToolbarButton > .toolbarButton:hover,
.splitToolbarButton > .toolbarButton:focus-visible,
.dropdownToolbarButton:hover,
@ -634,11 +633,11 @@ select {
}
.splitToolbarButton > .toolbarButton {
position: relative;
}
.splitToolbarButton > .toolbarButton:first-child,
.splitToolbarButton > .toolbarButton:last-child {
margin: 0;
}
#toolbarSidebar .splitToolbarButton > .toolbarButton {
margin-inline-end: 2px;
}
.splitToolbarButtonSeparator {
float: inline-start;
@ -667,13 +666,6 @@ select {
box-sizing: border-box;
}
#toolbarViewerLeft > .toolbarButton:first-child {
margin-inline-start: 2px;
}
#toolbarViewerRight > .toolbarButton:last-child {
margin-inline-end: 2px;
}
.toolbarButton:hover,
.toolbarButton:focus-visible {
background-color: var(--button-hover-color);