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>

src/theme/css/chrome.css

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

src/theme/css/general.css

@@ -91,6 +91,9 @@ h6:target::before {
 .js:not(.sidebar-resizing) .page-wrapper {
     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 {
     overflow-y: auto;