Implement right-to-left interface

src/renderer/App.css

@@ -12,16 +12,19 @@
 
 .routerView {
   flex: 1 1 0%;
-  margin: 18px 10px;
+  margin-block: 18px;
+  margin-inline: 10px;
 }
 
 .banner {
   width: 85%;
-  margin: 20px auto 0;
+  margin-block: 20px;
+  margin-inline: auto;
 }
 
 .banner-wrapper {
-  margin: 0 10px;
+  margin-block: 0;
+  margin-inline: 10px;
 }
 
 .flexBox {
@@ -45,16 +48,17 @@
 
 @media only screen and (max-width: 680px) {
   .routerView {
-    margin: 68px 8px 68px;
+    margin-block: 68px;
+    margin-inline: 8px;
   }
 
   .banner {
     width: 80%;
-    margin-top: 20px;
+    margin-block-start: 20px;
   }
 
   .flexBox {
-    margin-top: 60px;
-    margin-bottom: -75px;
+    margin-block-start: 60px;
+    margin-block-end: -75px;
   }
 }

src/renderer/App.js

@@ -59,8 +59,9 @@ export default defineComponent({
     showProgressBar: function () {
       return this.$store.getters.getShowProgressBar
     },
-    isRightAligned: function () {
-      return this.locale === 'ar' || this.locale === 'he'
+    isLocaleRightToLeft: function () {
+      return this.locale === 'ar' || this.locale === 'fa' || this.locale === 'he' ||
+        this.locale === 'ur' || this.locale === 'yi' || this.locale === 'ku'
     },
     checkForUpdates: function () {
       return this.$store.getters.getCheckForUpdates
@@ -509,6 +510,11 @@ export default defineComponent({
 
     setLocale: function() {
       document.documentElement.setAttribute('lang', this.locale)
+      if (this.isLocaleRightToLeft) {
+        document.body.dir = 'rtl'
+      } else {
+        document.body.dir = 'ltr'
+      }
     },
 
     /**

src/renderer/App.vue

@@ -4,7 +4,7 @@
     id="app"
     :class="{
       hideOutlines: hideOutlines,
-      rightAligned: isRightAligned
+      isLocaleRightToLeft: isLocaleRightToLeft
     }"
   >
     <top-nav ref="topNav" />

src/renderer/components/channel-about/channel-about.css

@@ -1,6 +1,6 @@
 .about {
   background-color: var(--card-bg-color);
-  margin-top: 0;
+  margin-block-start: 0;
   padding: 10px;
   position: relative;
   z-index: 1;
@@ -34,9 +34,9 @@
 }
 
 .aboutDetails {
-  text-align: left;
+  text-align: start;
 }
 
 .aboutDetails th {
-  padding-right: 10px;
+  padding-inline-end: 10px;
 }

src/renderer/components/experimental-settings/experimental-settings.css

@@ -1,6 +1,6 @@
 .experimental-warning {
   text-align: center;
   font-weight: bold;
-  padding-left: 4%;
-  padding-right: 4%
+  padding-inline-start: 4%;
+  padding-inline-end: 4%
 }

src/renderer/components/ft-age-restricted/ft-age-restricted.scss

@@ -3,7 +3,8 @@
 
   h2 {
     background-color: var(--card-bg-color);
-    padding: 10px 0;
+    padding-block: 10px;
+    padding-inline: 0;
     text-align: center;
     width: 100%;
   }
@@ -12,7 +13,8 @@
     background-color: var(--card-bg-color);
     font-size: 10em;
     height: 100%;
-    padding: 20px 0;
+    padding-block: 20px;
+    padding-inline: 0;
     text-align: center;
     width: 100%;
   }

src/renderer/components/ft-button/ft-button.css

@@ -2,7 +2,8 @@
   font-family: 'Roboto', sans-serif;
   min-width: 100px;
   font-size: 0.9rem;
-  padding: 10px 20px;
+  padding-block: 10px;
+  padding-inline: 20px;
   box-sizing: border-box;
   cursor: pointer;
   display: inline-block;
@@ -36,8 +37,8 @@
   position: absolute;
   width: 100%;
   height: 100%;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   pointer-events: none;
   background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
   background-repeat: no-repeat;

src/renderer/components/ft-card/ft-card.css

@@ -1,8 +1,7 @@
 .ft-card {
   background-color: var(--card-bg-color);
   margin: 8px;
-	padding: 16px;
-	padding-top: 3px;
-	padding-bottom: 16px;
+	padding-block: 3px 16px;
+  padding-inline: 16px;
   box-shadow: 0 1px 2px rgba(0,0,0,.1);
 }

src/renderer/components/ft-channel-bubble/ft-channel-bubble.css

@@ -32,16 +32,16 @@
 
 .selected {
   position: absolute;
-  top: 10px;
+  inset-block-start: 10px;
   background-color: rgba(0, 0, 0, 0.5);
 }
 
 .icon {
   color: #EEEEEE;
   font-size: 25px;
   position: absolute;
-  top: 12px;
-  left: 12px;
+  inset-block-start: 12px;
+  inset-inline-start: 12px;
 }
 
 .channelName {

src/renderer/components/ft-community-poll/ft-community-poll.css

@@ -1,5 +1,5 @@
 .vote-count {
-  padding-bottom: 6px;
+  padding-block-end: 6px;
   font-size: smaller;
 }
 
@@ -9,21 +9,21 @@
   border-style: solid;
   border-width: 2px;
   display: block;
-  float: left;
+  float: var(--float-left-ltr-rtl-value);
   height: 10px;
-  left: 5px;
+  inset-inline-start: 5px;
   position: relative;
-  top: 8px;
+  inset-block-start: 8px;
   width: 10px;
 }
-  
+
 .filled-circle {
   border-radius: 50%;
   background-color: black;
-  float: left;
+  float: var(--float-left-ltr-rtl-value);
   height: 6px;
-  left: 2px;
-  top: 2px;
+  inset-inline-start: 2px;
+  inset-block-start: 2px;
   position: relative;
   width: 6px;
 }
@@ -32,11 +32,12 @@
   border-radius: 5px;
   border-style: solid;
   border-width: 2px;
-  padding: 5px 25px;
+  padding-block: 5px;
+  padding-inline: 25px;
 }
 
 .option {
-  padding-bottom: 10px;
+  padding-block-end: 10px;
 }
 
 .correct-option {

src/renderer/components/ft-community-post/ft-community-post.scss

@@ -22,7 +22,7 @@
   -webkit-border-radius: 50%;
   border-radius: 50%;
   height: 55px;
-  margin-right: 5px;
+  margin-inline-end: 5px;
   width: 55px;
 }
 
@@ -32,12 +32,14 @@
   .authorName {
     font-size: 15px;
     font-weight: bold;
-    margin: 5px 6px 0 5px;
+    margin-block: 5px 0;
+    margin-inline: 5px 6px;
   }
 
   .publishedText {
     font-size: 15px;
-    margin: 5px 6px 0 5px;
+    margin-block: 5px 0;
+    margin-inline: 5px 6px;
   }
 }
 
@@ -51,24 +53,24 @@
   display: block;
   flex-direction: column;
   font-size: 15px;
-  margin-top: 4px;
+  margin-block-start: 4px;
   max-width: 210px;
-  text-align: left;
+  text-align: start;
 
   @media screen and (max-width: 680px) {
-    margin-left: 0;
-    text-align: left;
+    margin-inline-start: 0;
+    text-align: start;
   }
 
   .likeBar {
     border-radius: 4px;
     height: 8px;
-    margin-bottom: 4px;
+    margin-block-end: 4px;
   }
 
   .likeCount {
-    margin-left: 5px;
-    margin-right: 6px;
+    margin-inline-start: 5px;
+    margin-inline-end: 6px;
   }
 }
 
@@ -77,8 +79,8 @@
 
   .videoThumbnail {
     display: flex;
-    margin-bottom: auto;
-    margin-top: auto;
+    margin-block-end: auto;
+    margin-block-start: auto;
     position: relative;
     width: fit-content;
 
@@ -91,7 +93,7 @@
   }
 
   .playlistText {
-    margin-left: 10px;
+    margin-inline-start: 10px;
     width: 50%;
     word-wrap: break-word;
 
@@ -111,7 +113,7 @@
       color: var(--primary-text-color);
       display: flex;
       font-size: small;
-      padding-top: 10px;
+      padding-block-start: 10px;
       text-decoration-line: none;
       width: 100%;
     }
@@ -128,5 +130,5 @@
 
 .ft-list-item.grid {
   min-height: 0 !important;
-  padding-bottom: 20px;
+  padding-block-end: 20px;
 }

src/renderer/components/ft-icon-button/ft-icon-button.scss

@@ -95,19 +95,19 @@
   z-index: 3;
 
   &.left {
-    right: calc(50% - 10px);
+    inset-inline-end: calc(50% - 10px);
   }
 
   &.right {
-    left: calc(50% - 10px);
+    inset-inline-start: calc(50% - 10px);
   }
 
   &.top {
-    bottom: 45px;
+    inset-block-end: 45px;
   }
 
   &.bottom {
-    top: 45px;
+    inset-block-start: 45px;
   }
 
   .list {
@@ -119,7 +119,8 @@
   .listItem {
     cursor: pointer;
     margin: 0;
-    padding: 8px 10px;
+    padding-block: 8px;
+    padding-inline: 10px;
     transition: background 0.2s ease-out;
     white-space: nowrap;
 
@@ -138,8 +139,9 @@
   }
 
   .listItemDivider {
-    border-top: 1px solid var(--tertiary-text-color);
-    margin: 1px auto;
+    border-block-start: 1px solid var(--tertiary-text-color);
+    margin-block: 1px;
+    margin-inline: auto;
     // Too "visible" with current color
     opacity: 0.5;
     width: 95%;

src/renderer/components/ft-input-tags/ft-input-tags.css

@@ -20,13 +20,12 @@
   margin: 5px;
   border-radius: 5px;
   display:flex;
-  float: left;
+  float: var(--float-left-ltr-rtl-value);
 }
 
 .ft-tag-box li>span {
-  padding-top: 10px;
-  padding-bottom: 10px;
-  padding-left: 10px;
+  padding-block: 10px;
+  padding-inline-start: 10px;
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-all;
@@ -45,7 +44,7 @@
 }
 
 :deep(.ft-input-component .ft-input) {
-  margin-top: 10px;
+  margin-block-start: 10px;
 }
 
 @media only screen and (max-width: 576px) {