Use CSS selectors to override properties for RTL

Fix behavior of some elements when displaying page in RTL.

Signed-off-by: Tim Crawford <crawfxrd@gmail.com>
This commit is contained in:
Tim Crawford 2021-03-16 23:23:13 -06:00 committed by Eric Huss
parent 1088066c69
commit 3a99899114
2 changed files with 18 additions and 5 deletions

View File

@ -173,16 +173,20 @@ a > .hljs {
background-color: var(--sidebar-bg); background-color: var(--sidebar-bg);
} }
.previous {
/* Only Firefox supports flow-relative values */ /* Only Firefox supports flow-relative values */
float: left; .previous { float: left; }
} [dir=rtl] .previous { float: right; }
.next {
/* Only Firefox supports flow-relative values */ /* Only Firefox supports flow-relative values */
.next {
float: right; float: right;
right: var(--page-padding); right: var(--page-padding);
} }
[dir=rtl] .next {
float: left;
right: unset;
left: var(--page-padding);
}
@media only screen and (max-width: 1080px) { @media only screen and (max-width: 1080px) {
.nav-wide-wrapper { display: none; } .nav-wide-wrapper { display: none; }
@ -387,6 +391,7 @@ ul#searchresults span.teaser em {
background-color: var(--sidebar-bg); background-color: var(--sidebar-bg);
color: var(--sidebar-fg); color: var(--sidebar-fg);
} }
[dir=rtl] .sidebar { left: unset; right: 0; }
.sidebar-resizing { .sidebar-resizing {
-moz-user-select: none; -moz-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
@ -417,6 +422,7 @@ ul#searchresults span.teaser em {
top: 0; top: 0;
bottom: 0; bottom: 0;
} }
[dir=rtl] .sidebar .sidebar-resize-handle { right: unset; left: 0; }
.js .sidebar .sidebar-resize-handle { .js .sidebar .sidebar-resize-handle {
cursor: col-resize; cursor: col-resize;
width: 5px; width: 5px;
@ -426,6 +432,9 @@ ul#searchresults span.teaser em {
transform: translateX(calc(0px - var(--sidebar-width))); transform: translateX(calc(0px - var(--sidebar-width)));
z-index: -1; z-index: -1;
} }
[dir=rtl] .sidebar-hidden .sidebar {
transform: translateX(var(--sidebar-width));
}
.sidebar::-webkit-scrollbar { .sidebar::-webkit-scrollbar {
background: var(--sidebar-bg); background: var(--sidebar-bg);
} }
@ -539,6 +548,7 @@ ul#searchresults span.teaser em {
/* Don't let the children's background extend past the rounded corners. */ /* Don't let the children's background extend past the rounded corners. */
overflow: hidden; overflow: hidden;
} }
[dir=rtl] .theme-popup { left: unset; right: 10px; }
.theme-popup .default { .theme-popup .default {
color: var(--icons); color: var(--icons);
} }

View File

@ -91,6 +91,9 @@ h6:target::before {
.js:not(.sidebar-resizing) .page-wrapper { .js:not(.sidebar-resizing) .page-wrapper {
transition: margin-left 0.3s ease, transform 0.3s ease; /* Animation: slide away */ transition: margin-left 0.3s ease, transform 0.3s ease; /* Animation: slide away */
} }
[dir=rtl] .js:not(.sidebar-resizing) .page-wrapper {
transition: margin-right 0.3s ease, transform 0.3s ease; /* Animation: slide away */
}
.content { .content {
overflow-y: auto; overflow-y: auto;