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

Merge pull request #14690 from Snuffleupagus/inset-inline

Browse Source 
Replace `dir`-dependent `left`/`right` with logical properties
This commit is contained in:
Tim van der Meij 2022-03-20 12:27:02 +01:00 committed by GitHub
commit feea2b78fa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
web/viewer.css
View File

@ -235,21 +235,19 @@ select {
position: absolute; position: absolute;
top: 32px; top: 32px;
bottom: 0; bottom: 0;
inset-inline-start: calc(-1 * var(--sidebar-width));
width: var(--sidebar-width); width: var(--sidebar-width);
visibility: hidden; visibility: hidden;
z-index: 100; z-index: 100;
border-top: 1px solid rgba(51, 51, 51, 1); border-top: 1px solid rgba(51, 51, 51, 1);
transition-property: inset-inline-start;
transition-duration: var(--sidebar-transition-duration); transition-duration: var(--sidebar-transition-duration);
transition-timing-function: var(--sidebar-transition-timing-function); transition-timing-function: var(--sidebar-transition-timing-function);
} }
html[dir="ltr"] #sidebarContainer { html[dir="ltr"] #sidebarContainer {
transition-property: left;
left: calc(-1 * var(--sidebar-width));
border-right: var(--doorhanger-border-color-whcm); border-right: var(--doorhanger-border-color-whcm);
} }
html[dir="rtl"] #sidebarContainer { html[dir="rtl"] #sidebarContainer {
transition-property: right;
right: calc(-1 * var(--sidebar-width));
border-left: var(--doorhanger-border-color-whcm); border-left: var(--doorhanger-border-color-whcm);
} }
@ -264,11 +262,8 @@ html[dir="rtl"] #sidebarContainer {
#outerContainer.sidebarOpen #sidebarContainer { #outerContainer.sidebarOpen #sidebarContainer {
visibility: visible; visibility: visible;
} }
html[dir="ltr"] #outerContainer.sidebarOpen #sidebarContainer { #outerContainer.sidebarOpen #sidebarContainer {
left: 0; inset-inline-start: 0;
}
html[dir="rtl"] #outerContainer.sidebarOpen #sidebarContainer {
right: 0;
} }
#mainContainer { #mainContainer {
@ -283,17 +278,16 @@ html[dir="rtl"] #outerContainer.sidebarOpen #sidebarContainer {
#sidebarContent { #sidebarContent {
top: 32px; top: 32px;
bottom: 0; bottom: 0;
inset-inline-start: 0;
overflow: auto; overflow: auto;
position: absolute; position: absolute;
width: 100%; width: 100%;
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1);
} }
html[dir="ltr"] #sidebarContent { html[dir="ltr"] #sidebarContent {
left: 0;
box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25); box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25);
} }
html[dir="rtl"] #sidebarContent { html[dir="rtl"] #sidebarContent {
right: 0;
box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25); box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25);
} }
@ -316,17 +310,9 @@ html[dir="rtl"] #sidebarContent {
transition-duration: 0s; transition-duration: 0s;
} }
html[dir="ltr"] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
#outerContainer.sidebarOpen inset-inline-start: var(--sidebar-width);
#viewerContainer:not(.pdfPresentationMode) { transition-property: inset-inline-start;
transition-property: left;
left: var(--sidebar-width);
}
html[dir="rtl"]
#outerContainer.sidebarOpen
#viewerContainer:not(.pdfPresentationMode) {
transition-property: right;
right: var(--sidebar-width);
} }
.toolbar { .toolbar {
@ -366,16 +352,11 @@ html[dir="rtl"] #toolbarSidebar {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
inset-inline-end: -6px;
width: 6px; width: 6px;
z-index: 200; z-index: 200;
cursor: ew-resize; cursor: ew-resize;
} }
html[dir="ltr"] #sidebarResizer {
right: -6px;
}
html[dir="rtl"] #sidebarResizer {
left: -6px;
}
#toolbarContainer, #toolbarContainer,
.findbar, .findbar,
@ -392,29 +373,17 @@ html[dir="rtl"] #sidebarResizer {
#loadingBar { #loadingBar {
position: absolute; position: absolute;
inset-inline: 0 var(--loadingBar-end-offset);
height: 4px; height: 4px;
background-color: var(--body-bg-color); background-color: var(--body-bg-color);
border-bottom: 1px solid var(--toolbar-border-color); border-bottom: 1px solid var(--toolbar-border-color);
transition-property: inset-inline-start;
transition-duration: var(--sidebar-transition-duration); transition-duration: var(--sidebar-transition-duration);
transition-timing-function: var(--sidebar-transition-timing-function); transition-timing-function: var(--sidebar-transition-timing-function);
} }
html[dir="ltr"] #loadingBar {
transition-property: left;
left: 0;
right: var(--loadingBar-end-offset);
}
html[dir="rtl"] #loadingBar {
transition-property: right;
left: var(--loadingBar-end-offset);
right: 0;
}
html[dir="ltr"] #outerContainer.sidebarOpen #loadingBar { #outerContainer.sidebarOpen #loadingBar {
left: var(--sidebar-width); inset-inline-start: var(--sidebar-width);
}
html[dir="rtl"] #outerContainer.sidebarOpen #loadingBar {
right: var(--sidebar-width);
} }
#outerContainer.sidebarResizing #loadingBar { #outerContainer.sidebarResizing #loadingBar {
@ -482,6 +451,7 @@ html[dir="rtl"] #outerContainer.sidebarOpen #loadingBar {
} }
.findbar { .findbar {
inset-inline-start: 64px;
min-width: 300px; min-width: 300px;
background-color: var(--toolbar-bg-color); background-color: var(--toolbar-bg-color);
} }
@ -494,12 +464,6 @@ html[dir="rtl"] #outerContainer.sidebarOpen #loadingBar {
.findbar.wrapContainers > div.findbarMessageContainer { .findbar.wrapContainers > div.findbarMessageContainer {
height: auto; height: auto;
} }
html[dir="ltr"] .findbar {
left: 64px;
}
html[dir="rtl"] .findbar {
right: 64px;
}
.findbar .splitToolbarButton { .findbar .splitToolbarButton {
margin-top: 3px; margin-top: 3px;
@ -583,16 +547,11 @@ html[dir="rtl"] #findInput[data-status="pending"] {
.secondaryToolbar { .secondaryToolbar {
padding: 6px 0 10px; padding: 6px 0 10px;
inset-inline-end: 4px;
height: auto; height: auto;
z-index: 30000; z-index: 30000;
background-color: var(--doorhanger-bg-color); background-color: var(--doorhanger-bg-color);
} }
html[dir="ltr"] .secondaryToolbar {
right: 4px;
}
html[dir="rtl"] .secondaryToolbar {
left: 4px;
}
#secondaryToolbarButtonContainer { #secondaryToolbarButtonContainer {
max-width: 220px; max-width: 220px;
@ -742,12 +701,11 @@ html[dir="rtl"] .secondaryToolbar {
.splitToolbarButton > .toolbarButton { .splitToolbarButton > .toolbarButton {
position: relative; position: relative;
} }
html[dir="ltr"] .splitToolbarButton > .toolbarButton:first-child, .splitToolbarButton > .toolbarButton:first-child,
html[dir="rtl"] .splitToolbarButton > .toolbarButton:last-child, .splitToolbarButton > .toolbarButton:last-child {
html[dir="ltr"] .splitToolbarButton > .toolbarButton:last-child,
html[dir="rtl"] .splitToolbarButton > .toolbarButton:first-child {
margin: 0; margin: 0;
} }
.splitToolbarButtonSeparator { .splitToolbarButtonSeparator {
float: inline-start; float: inline-start;
padding: 10px 0; padding: 10px 0;
@ -828,15 +786,10 @@ html[dir="rtl"] .splitToolbarButton > .toolbarButton:first-child {
} }
.dropdownToolbarButton::after { .dropdownToolbarButton::after {
top: 6px; top: 6px;
inset-inline-end: 7px;
pointer-events: none; pointer-events: none;
mask-image: var(--toolbarButton-menuArrow-icon); mask-image: var(--toolbarButton-menuArrow-icon);
} }
html[dir="ltr"] .dropdownToolbarButton::after {
right: 7px;
}
html[dir="rtl"] .dropdownToolbarButton::after {
left: 7px;
}
.dropdownToolbarButton > select { .dropdownToolbarButton > select {
width: calc( width: calc(
@ -913,12 +866,7 @@ html[dir="rtl"] .dropdownToolbarButton::after {
.secondaryToolbarButton::before { .secondaryToolbarButton::before {
opacity: var(--doorhanger-icon-opacity); opacity: var(--doorhanger-icon-opacity);
top: 5px; top: 5px;
} inset-inline-start: 12px;
html[dir="ltr"] .secondaryToolbarButton::before {
left: 12px;
}
html[dir="rtl"] .secondaryToolbarButton::before {
right: 12px;
} }
.toolbarButton#sidebarToggle::before { .toolbarButton#sidebarToggle::before {
@ -1028,6 +976,7 @@ html[dir="rtl"] #currentOutlineItem.toolbarButton::before {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
top: 1px; top: 1px;
inset-inline-start: 17px;
/* Create a filled circle, with a diameter of 9 pixels, using only CSS: */ /* Create a filled circle, with a diameter of 9 pixels, using only CSS: */
content: ""; content: "";
background-color: rgba(112, 219, 85, 1); background-color: rgba(112, 219, 85, 1);
@ -1035,12 +984,6 @@ html[dir="rtl"] #currentOutlineItem.toolbarButton::before {
width: 9px; width: 9px;
border-radius: 50%; border-radius: 50%;
} }
html[dir="ltr"] .toolbarButton.pdfSidebarNotification::after {
left: 17px;
}
html[dir="rtl"] .toolbarButton.pdfSidebarNotification::after {
right: 17px;
}
.secondaryToolbarButton { .secondaryToolbarButton {
position: relative; position: relative;
@ -1715,11 +1658,8 @@ html[dir="rtl"] .treeItemToggler.treeItemsHidden::before {
background-color: var(--sidebar-narrow-bg-color); background-color: var(--sidebar-narrow-bg-color);
} }
html[dir="ltr"] #outerContainer.sidebarOpen #viewerContainer { #outerContainer.sidebarOpen #viewerContainer {
left: 0 !important; inset-inline-start: 0 !important;
}
html[dir="rtl"] #outerContainer.sidebarOpen #viewerContainer {
right: 0 !important;
} }
#outerContainer .hiddenLargeView, #outerContainer .hiddenLargeView,
@ -1761,11 +1701,8 @@ html[dir="rtl"] .treeItemToggler.treeItemsHidden::before {
.toolbarButtonSpacer { .toolbarButtonSpacer {
width: 0; width: 0;
} }
html[dir="ltr"] .findbar { .findbar {
left: 34px; inset-inline-start: 34px;
}
html[dir="rtl"] .findbar {
right: 34px;
} }
} }