mirrors/pdf.js
1
0
Fork 0
mirror of https://github.com/mozilla/pdf.js.git synced 2025-04-20 15:18:08 +02:00
Code Activity

Replace dir-dependent margin/margin-left/margin-right 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 margin-values in the CSS, we can use logical margin 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 need to use a couple of PostCSS plugins (see below) in order to support this in the GENERIC viewer.

 - https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline#browser_compatibility
 - https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start#browser_compatibility
 - https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end#browser_compatibility
 - https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start#browser_compatibility
 - https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end#browser_compatibility

---

 - https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical
 - https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-dir-pseudo-class
This commit is contained in:
Jonas Jenwald 2022-03-13 18:30:51 +01:00
parent 764ccd9d34
commit c99d558646
4 changed files with 111 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

106
web/viewer.css
View file

@ -355,18 +355,11 @@ html[dir="rtl"] #toolbarSidebar {
0 0 1px rgba(0, 0, 0, 0.1);
}
html[dir="ltr"] #toolbarSidebar .toolbarButton {
margin-right: 2px !important;
#toolbarSidebar .toolbarButton {
margin-inline-end: 2px !important;
}
html[dir="rtl"] #toolbarSidebar .toolbarButton {
margin-left: 2px !important;
}
html[dir="ltr"] #toolbarSidebarRight .toolbarButton {
margin-right: 3px !important;
}
html[dir="rtl"] #toolbarSidebarRight .toolbarButton {
margin-left: 3px !important;
#toolbarSidebarRight .toolbarButton {
margin-inline-end: 3px !important;
}
#sidebarResizer {
@ -510,14 +503,7 @@ html[dir="rtl"] .findbar {
.findbar .splitToolbarButton {
margin-top: 3px;
}
html[dir="ltr"] .findbar .splitToolbarButton {
margin-left: 0;
margin-right: 5px;
}
html[dir="rtl"] .findbar .splitToolbarButton {
margin-left: 5px;
margin-right: 0;
margin-inline: 0 5px;
}
.findbar .splitToolbarButton > .toolbarButton {
@ -627,7 +613,7 @@ html[dir="rtl"] .secondaryToolbar {
.doorHangerRight:after,
.doorHangerRight:before {
bottom: 100%;
border: solid rgba(0, 0, 0, 0);
border: 8px solid rgba(0, 0, 0, 0);
content: " ";
height: 0;
width: 0;
@ -635,14 +621,14 @@ html[dir="rtl"] .secondaryToolbar {
pointer-events: none;
opacity: var(--doorhanger-triangle-opacity-whcm);
}
.doorHanger:after,
.doorHangerRight:after {
border-width: 8px;
}
.doorHanger:after {
inset-inline-start: 10px;
margin-inline-start: -8px;
border-bottom-color: var(--toolbar-bg-color);
}
.doorHangerRight:after {
inset-inline-end: 10px;
margin-inline-end: -8px;
border-bottom-color: var(--doorhanger-bg-color);
}
.doorHanger:before,
@ -650,29 +636,13 @@ html[dir="rtl"] .secondaryToolbar {
border-bottom-color: var(--doorhanger-border-color);
border-width: 9px;
}
html[dir="ltr"] .doorHanger:after,
html[dir="rtl"] .doorHangerRight:after {
left: 10px;
margin-left: -8px;
.doorHanger:before {
inset-inline-start: 10px;
margin-inline-start: -9px;
}
html[dir="ltr"] .doorHanger:before,
html[dir="rtl"] .doorHangerRight:before {
left: 10px;
margin-left: -9px;
}
html[dir="rtl"] .doorHanger:after,
html[dir="ltr"] .doorHangerRight:after {
right: 10px;
margin-right: -8px;
}
html[dir="rtl"] .doorHanger:before,
html[dir="ltr"] .doorHangerRight:before {
right: 10px;
margin-right: -9px;
.doorHangerRight:before {
inset-inline-end: 10px;
margin-inline-end: -9px;
}
#findResultsCount {
@ -788,9 +758,7 @@ html[dir="rtl"] .splitToolbarButton > .toolbarButton {
position: relative;
}
html[dir="ltr"] .splitToolbarButton > .toolbarButton:first-child,
html[dir="rtl"] .splitToolbarButton > .toolbarButton:last-child {
margin: 0;
}
html[dir="rtl"] .splitToolbarButton > .toolbarButton:last-child,
html[dir="ltr"] .splitToolbarButton > .toolbarButton:last-child,
html[dir="rtl"] .splitToolbarButton > .toolbarButton:first-child {
margin: 0;
@ -834,15 +802,13 @@ html[dir="rtl"] .splitToolbarButtonSeparator {
box-sizing: border-box;
}
html[dir="ltr"] #toolbarViewerLeft > .toolbarButton:first-child,
html[dir="rtl"] #toolbarViewerRight > .toolbarButton:last-child {
margin-left: 2px;
#toolbarViewerLeft > .toolbarButton:first-child {
margin-inline-start: 2px;
}
#toolbarViewerRight > .toolbarButton:last-child {
margin-inline-end: 2px;
}
html[dir="ltr"] #toolbarViewerRight > .toolbarButton:last-child,
html[dir="rtl"] #toolbarViewerLeft > .toolbarButton:first-child {
margin-right: 2px;
}
.toolbarButton:hover,
.toolbarButton:focus-visible {
background-color: var(--button-hover-color);
@ -1178,12 +1144,6 @@ html[dir="rtl"] .toolbarButton.pdfSidebarNotification::after {
width: 1px;
background-color: var(--separator-color);
}
html[dir="ltr"] .verticalToolbarSeparator {
margin-left: 2px;
}
html[dir="rtl"] .verticalToolbarSeparator {
margin-right: 2px;
}
.horizontalToolbarSeparator {
display: block;
@ -1213,14 +1173,8 @@ html[dir="rtl"] .verticalToolbarSeparator {
opacity: 0;
position: absolute !important;
left: 0;
}
html[dir="ltr"] .toolbarField[type="checkbox"] {
margin: 10px 0 3px 7px;
}
html[dir="rtl"] .toolbarField[type="checkbox"] {
margin: 10px 7px 3px 0;
margin: 10px 0 3px;
margin-inline-start: 7px;
}
.toolbarField.pageNumber {
@ -1288,7 +1242,6 @@ html[dir="rtl"] .thumbnail {
#thumbnailView > a:last-of-type > .thumbnail {
margin-bottom: 10px;
}
#thumbnailView > a:last-of-type > .thumbnail:not([data-loaded]) {
margin-bottom: 9px;
}
@ -1346,14 +1299,9 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
user-select: none;
}
html[dir="ltr"] .treeWithDeepNesting > .treeItem,
html[dir="ltr"] .treeItem > .treeItems {
margin-left: 20px;
}
html[dir="rtl"] .treeWithDeepNesting > .treeItem,
html[dir="rtl"] .treeItem > .treeItems {
margin-right: 20px;
.treeWithDeepNesting > .treeItem,
.treeItem > .treeItems {
margin-inline-start: 20px;
}
.treeItem > a {