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

Clean-up some CSS rules for the various toolbar separators

Browse Source 
This re-factors the various toolbar separators to *explicitly* specify both their dimensions and margins. Also, for the `horizontalToolbarSeparator`-class we can just set the `background-color` rather than using `border-top`.

Note that the `splitToolbarButtonSeparator`-class currently sets a number of unnecessary CSS rules, since as mentioned by the Firefox Devtools both the `display`- and `z-index`-properties are being ignored because `float` is used.

Finally, there's also no need to set a `z-index` for some of the `:hover`-rules. It's possible that this *was* necessary before the re-design, since the buttons had borders then.
This commit is contained in:
Jonas Jenwald 2022-04-25 14:15:59 +02:00
parent 2be19e828f
commit f9262d29fc
1 changed files with 6 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/viewer.css
View File

@ -629,7 +629,6 @@ select {
.toolbarButton.textButton:hover, .toolbarButton.textButton:hover,
.toolbarButton.textButton:focus-visible { .toolbarButton.textButton:focus-visible {
background-color: var(--button-hover-color); background-color: var(--button-hover-color);
z-index: 199;
} }
.splitToolbarButton > .toolbarButton { .splitToolbarButton > .toolbarButton {
position: relative; position: relative;
@ -641,12 +640,10 @@ select {
.splitToolbarButtonSeparator { .splitToolbarButtonSeparator {
float: inline-start; float: inline-start;
padding: 10px 0;
width: 1px;
background-color: var(--separator-color);
z-index: 99;
display: inline-block;
margin: 4px 0; margin: 4px 0;
width: 1px;
height: 20px;
background-color: var(--separator-color);
} }
.toolbarButton, .toolbarButton,
@ -961,18 +958,17 @@ select {
.verticalToolbarSeparator { .verticalToolbarSeparator {
display: block; display: block;
padding: 11px 0;
margin: 5px 2px; margin: 5px 2px;
width: 1px; width: 1px;
height: 22px;
background-color: var(--separator-color); background-color: var(--separator-color);
} }
.horizontalToolbarSeparator { .horizontalToolbarSeparator {
display: block; display: block;
margin: 6px 0 5px; margin: 6px 0;
height: 1px; height: 1px;
width: 100%; width: 100%;
border-top: 1px solid var(--doorhanger-separator-color); background-color: var(--doorhanger-separator-color);
} }
.toolbarField { .toolbarField {