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:
parent
1088066c69
commit
3a99899114
|
@ -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 */
|
.previous { float: left; }
|
||||||
float: left;
|
[dir=rtl] .previous { float: right; }
|
||||||
}
|
|
||||||
|
|
||||||
|
/* Only Firefox supports flow-relative values */
|
||||||
.next {
|
.next {
|
||||||
/* Only Firefox supports flow-relative values */
|
|
||||||
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);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue