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

Replace dir-dependent float with logical properties

Browse Source 
*Please note:* This is another step in what will, time permitting, become a series of patches to simplify/modernize the viewer CSS.

Rather than having to manually specify ltr/rtl-specific float-values in the CSS, we can use logical `inline-start`/`inline-end` instead (and similar for some related left/right occurrences).
These logical properties depend on, among other things, the direction of the HTML document which we *always* specify in the viewer.

Given that most of these logical CSS properties are fairly new, and that cross-browser support is thus somewhat limited (see below), we rely on PostCSS plugins in order to support this in the GENERIC viewer.

 - https://developer.mozilla.org/en-US/docs/Web/CSS/float#browser_compatibility
 - https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end#browser_compatibility
This commit is contained in:
Jonas Jenwald 2022-03-13 23:21:32 +01:00
parent 502fd7c80d
commit bc6ea6a878
1 changed files with 20 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
web/viewer.css
View File

@ -668,46 +668,31 @@ html[dir="rtl"] .secondaryToolbar {
transform: translateX(-50%);
}
html[dir="ltr"] #toolbarViewerLeft,
html[dir="rtl"] #toolbarViewerRight,
html[dir="ltr"] #toolbarSidebarLeft,
html[dir="rtl"] #toolbarSidebarRight {
float: left;
#toolbarViewerLeft,
#toolbarSidebarLeft {
float: inline-start;
}
html[dir="ltr"] #toolbarViewerRight,
html[dir="rtl"] #toolbarViewerLeft,
html[dir="ltr"] #toolbarSidebarRight,
html[dir="rtl"] #toolbarSidebarLeft {
float: right;
#toolbarViewerRight,
#toolbarSidebarRight {
float: inline-end;
}
html[dir="ltr"] #toolbarViewerLeft > *,
html[dir="ltr"] #toolbarViewerMiddle > *,
html[dir="ltr"] #toolbarViewerRight > *,
html[dir="ltr"] #toolbarSidebarLeft *,
html[dir="ltr"] #toolbarSidebarRight *,
html[dir="ltr"] .findbar * {
#toolbarViewerLeft > *,
#toolbarViewerMiddle > *,
#toolbarViewerRight > *,
#toolbarSidebarLeft *,
#toolbarSidebarRight *,
.findbar * {
position: relative;
float: left;
}
html[dir="rtl"] #toolbarViewerLeft > *,
html[dir="rtl"] #toolbarViewerMiddle > *,
html[dir="rtl"] #toolbarViewerRight > *,
html[dir="rtl"] #toolbarSidebarLeft *,
html[dir="rtl"] #toolbarSidebarRight *,
html[dir="rtl"] .findbar * {
position: relative;
float: right;
float: inline-start;
}
.splitToolbarButton {
margin: 2px 2px 0;
display: inline-block;
}
html[dir="ltr"] .splitToolbarButton > .toolbarButton {
float: left;
}
html[dir="rtl"] .splitToolbarButton > .toolbarButton {
float: right;
.splitToolbarButton > .toolbarButton {
float: inline-start;
}
.toolbarButton,
@ -764,6 +749,7 @@ html[dir="rtl"] .splitToolbarButton > .toolbarButton:first-child {
margin: 0;
}
.splitToolbarButtonSeparator {
float: inline-start;
padding: 10px 0;
width: 1px;
background-color: var(--separator-color);
@ -778,13 +764,6 @@ html[dir="rtl"] .splitToolbarButton > .toolbarButton:first-child {
padding: 13px 0;
}
html[dir="ltr"] .splitToolbarButtonSeparator {
float: left;
}
html[dir="rtl"] .splitToolbarButtonSeparator {
float: right;
}
.toolbarButton,
.dropdownToolbarButton,
.secondaryToolbarButton,
@ -1230,14 +1209,9 @@ html[dir="rtl"] .toolbarButton.pdfSidebarNotification::after {
}
.thumbnail {
float: inline-start;
margin: 0 10px 5px;
}
html[dir="ltr"] .thumbnail {
float: left;
}
html[dir="rtl"] .thumbnail {
float: right;
}
#thumbnailView > a:last-of-type > .thumbnail {
margin-bottom: 10px;
@ -1332,11 +1306,13 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
.treeItemToggler {
position: relative;
float: inline-start;
height: 0;
width: 0;
color: rgba(255, 255, 255, 0.5);
}
.treeItemToggler::before {
inset-inline-end: 4px;
mask-image: var(--treeitem-expanded-icon);
}
.treeItemToggler.treeItemsHidden::before {
@ -1348,18 +1324,6 @@ html[dir="rtl"] .treeItemToggler.treeItemsHidden::before {
.treeItemToggler.treeItemsHidden ~ .treeItems {
display: none;
}
html[dir="ltr"] .treeItemToggler {
float: left;
}
html[dir="rtl"] .treeItemToggler {
float: right;
}
html[dir="ltr"] .treeItemToggler::before {
right: 4px;
}
html[dir="rtl"] .treeItemToggler::before {
left: 4px;
}
.treeItem.selected > a {
background-color: var(--treeitem-selected-bg-color);
@ -1396,7 +1360,6 @@ html[dir="rtl"] .treeItemToggler::before {
#errorMessageLeft {
float: left;
}
#errorMessageRight {
float: right;
}