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

Remove the remaining dir-dependent CSS rules

Browse Source 
After the recent round of patches, I figured that we'd gone as far as possible in replacing `dir`-dependent CSS rules for the viewer.
However, it occurred that me that we could actually use a bit of CSS-trickery to get rid of the remaining ones. More specifically, this was done by defining a CSS variable whose value depends on the document direction and then using that variable together with `calc()` in the affected rules.

*Please note:* I suppose that this could perhaps be seen as a bit too "magical", hence I understand if this patch is ultimately rejected, however this is probably the only simple way to get rid of the remaining `dir`-dependent CSS rules.
This commit is contained in:
Jonas Jenwald 2022-03-19 16:56:47 +01:00
parent db4f3adc5e
commit f8d60da94e
1 changed files with 14 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
web/viewer.css
View File

@ -16,6 +16,7 @@
@import url(pdf_viewer.css);
:root {
--dir-factor: 1;
--sidebar-width: 200px;
--sidebar-transition-duration: 200ms;
--sidebar-transition-timing-function: ease;
@ -104,6 +105,10 @@
--secondaryToolbarButton-documentProperties-icon: url(images/secondaryToolbarButton-documentProperties.svg);
}
:root:dir(rtl) {
--dir-factor: -1;
}
@media (prefers-color-scheme: dark) {
:root {
--main-color: rgba(249, 249, 250, 1);
@ -278,12 +283,7 @@ select {
position: absolute;
width: 100%;
background-color: rgba(0, 0, 0, 0.1);
}
html[dir="ltr"] #sidebarContent {
box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25);
}
html[dir="rtl"] #sidebarContent {
box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25);
box-shadow: inset calc(-1px * var(--dir-factor)) 0 0 rgba(0, 0, 0, 0.25);
}
#viewerContainer {
@ -326,14 +326,8 @@ html[dir="rtl"] #sidebarContent {
width: 100%;
height: 32px;
background-color: var(--sidebar-toolbar-bg-color);
}
html[dir="ltr"] #toolbarSidebar {
box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25), 0 1px 0 rgba(0, 0, 0, 0.15),
0 0 1px rgba(0, 0, 0, 0.1);
}
html[dir="rtl"] #toolbarSidebar {
box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25), 0 1px 0 rgba(0, 0, 0, 0.15),
0 0 1px rgba(0, 0, 0, 0.1);
box-shadow: inset calc(-1px * var(--dir-factor)) 0 0 rgba(0, 0, 0, 0.25),
0 1px 0 rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
}
#toolbarSidebar .toolbarButton {
@ -517,10 +511,7 @@ html[dir="rtl"] #toolbarSidebar {
#findInput[data-status="pending"] {
background-image: var(--loading-icon);
background-repeat: no-repeat;
background-position: 98%;
}
html[dir="rtl"] #findInput[data-status="pending"] {
background-position: 3px;
background-position: calc(50% + 48% * var(--dir-factor));
}
#findInput[data-status="notFound"] {
background-color: rgba(255, 102, 102, 1);
@ -852,16 +843,12 @@ html[dir="rtl"] #findInput[data-status="pending"] {
.toolbarButton#sidebarToggle::before {
mask-image: var(--toolbarButton-sidebarToggle-icon);
}
html[dir="rtl"] .toolbarButton#sidebarToggle::before {
transform: scaleX(-1);
transform: scaleX(var(--dir-factor));
}
.toolbarButton#secondaryToolbarToggle::before {
mask-image: var(--toolbarButton-secondaryToolbarToggle-icon);
}
html[dir="rtl"] .toolbarButton#secondaryToolbarToggle::before {
transform: scaleX(-1);
transform: scaleX(var(--dir-factor));
}
.toolbarButton.findPrevious::before {
@ -929,9 +916,7 @@ html[dir="rtl"] .toolbarButton#secondaryToolbarToggle::before {
#viewOutline.toolbarButton::before {
mask-image: var(--toolbarButton-viewOutline-icon);
}
html[dir="rtl"] #viewOutline.toolbarButton::before {
transform: scaleX(-1);
transform: scaleX(var(--dir-factor));
}
#viewAttachments.toolbarButton::before {
@ -944,9 +929,7 @@ html[dir="rtl"] #viewOutline.toolbarButton::before {
#currentOutlineItem.toolbarButton::before {
mask-image: var(--toolbarButton-currentOutlineItem-icon);
}
html[dir="rtl"] #currentOutlineItem.toolbarButton::before {
transform: scaleX(-1);
transform: scaleX(var(--dir-factor));
}
#viewFind.toolbarButton::before {
@ -1241,9 +1224,7 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
}
.treeItemToggler.treeItemsHidden::before {
mask-image: var(--treeitem-collapsed-icon);
}
html[dir="rtl"] .treeItemToggler.treeItemsHidden::before {
transform: scaleX(-1);
transform: scaleX(var(--dir-factor));
}
.treeItemToggler.treeItemsHidden ~ .treeItems {
display: none;