mirror of
https://github.com/mozilla/pdf.js.git
synced 2025-04-20 15:18:08 +02:00
Merge pull request #14670 from Snuffleupagus/postcss-logical
Replace `dir`-dependent `margin`/`margin-left`/`margin-right` with logical properties
This commit is contained in:
commit
079dea2274
4 changed files with 111 additions and 85 deletions
106
web/viewer.css
106
web/viewer.css
|
@ -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 {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue