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

Replace dir-dependent border-rules with logical properties

Browse Source 
*Please note:* This is the final step in a series of patches to simplify/modernize the viewer CSS, since the remaining `html[dir="rtl"]`-cases cannot be converted.

Rather than having to manually specify ltr/rtl-specific border-values in the CSS, we can use logical `border-inline-end`/`border-start-end-radius`/`border-end-end-radius` instead.
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 the previously added PostCSS plugins in order to support this in the GENERIC viewer.

 - https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end#browser_compatibility
 - https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-end-radius#browser_compatibility
 - https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-end-radius#browser_compatibility
This commit is contained in:
Jonas Jenwald 2022-03-17 11:43:32 +01:00
parent feea2b78fa
commit 477dc08b00
1 changed files with 6 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
web/viewer.css
View File

@ -240,16 +240,11 @@ select {
visibility: hidden;
z-index: 100;
border-top: 1px solid rgba(51, 51, 51, 1);
border-inline-end: var(--doorhanger-border-color-whcm);
transition-property: inset-inline-start;
transition-duration: var(--sidebar-transition-duration);
transition-timing-function: var(--sidebar-transition-timing-function);
}
html[dir="ltr"] #sidebarContainer {
border-right: var(--doorhanger-border-color-whcm);
}
html[dir="rtl"] #sidebarContainer {
border-left: var(--doorhanger-border-color-whcm);
}
#outerContainer.sidebarResizing #sidebarContainer {
/* Improve responsiveness and avoid visual glitches when the sidebar is resized. */
@ -484,16 +479,9 @@ html[dir="rtl"] #toolbarSidebar {
.findbar .splitToolbarButton > .findNext {
width: 29px;
}
html[dir="ltr"] .findbar .splitToolbarButton > .findNext {
border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
border-right: 1px solid var(--field-border-color);
}
html[dir="rtl"] .findbar .splitToolbarButton > .findNext {
border-bottom-left-radius: 2px;
border-top-left-radius: 2px;
border-left: 1px solid var(--field-border-color);
border-start-end-radius: 2px;
border-end-end-radius: 2px;
border-inline-end: 1px solid var(--field-border-color);
}
.findbar input[type="checkbox"] {
@ -510,15 +498,6 @@ html[dir="rtl"] .findbar .splitToolbarButton > .findNext {
background-color: var(--button-hover-color);
}
html[dir="ltr"] #findInput {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
html[dir="rtl"] #findInput {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.findbar .toolbarField[type="checkbox"]:checked + .toolbarLabel {
background-color: var(--toggled-btn-bg-color) !important;
color: var(--toggled-btn-color);
@ -526,6 +505,8 @@ html[dir="rtl"] #findInput {
#findInput {
width: 200px;
border-start-end-radius: 0;
border-end-end-radius: 0;
}
#findInput::-webkit-input-placeholder {
color: rgba(191, 191, 191, 1);