From 538884b80602c72edb12c8ab9a131cf36aad1427 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Sun, 27 Aug 2023 19:18:48 -0500
Subject: [PATCH 01/67] Replace margin-left with margin-inline-start

---
 .../ft-community-post/ft-community-post.scss  |  6 +++---
 .../ft-search-filters/ft-search-filters.css   |  2 +-
 .../ft-settings-section.scss                  |  2 +-
 .../components/ft-tooltip/ft-tooltip.css      |  2 +-
 .../side-nav-more-options.css                 |  4 ++--
 src/renderer/components/side-nav/side-nav.css | 12 +++++------
 src/renderer/components/top-nav/top-nav.scss  |  4 ++--
 .../watch-video-chapters.css                  |  2 +-
 .../watch-video-comments.css                  | 20 +++++++++----------
 .../watch-video-info/watch-video-info.scss    | 10 +++++-----
 .../watch-video-live-chat.css                 | 18 ++++++++---------
 .../watch-video-playlist.css                  |  4 ++--
 src/renderer/scss-partials/_ft-list-item.scss |  2 +-
 src/renderer/videoJS.css                      | 12 +++++------
 src/renderer/views/Channel/Channel.css        |  6 +++---
 15 files changed, 53 insertions(+), 53 deletions(-)

diff --git a/src/renderer/components/ft-community-post/ft-community-post.scss b/src/renderer/components/ft-community-post/ft-community-post.scss
index ad3cf1c875022..3975b338d4021 100644
--- a/src/renderer/components/ft-community-post/ft-community-post.scss
+++ b/src/renderer/components/ft-community-post/ft-community-post.scss
@@ -56,7 +56,7 @@
   text-align: left;
 
   @media screen and (max-width: 680px) {
-    margin-left: 0;
+    margin-inline-start: 0;
     text-align: left;
   }
 
@@ -67,7 +67,7 @@
   }
 
   .likeCount {
-    margin-left: 5px;
+    margin-inline-start: 5px;
     margin-right: 6px;
   }
 }
@@ -91,7 +91,7 @@
   }
 
   .playlistText {
-    margin-left: 10px;
+    margin-inline-start: 10px;
     width: 50%;
     word-wrap: break-word;
 
diff --git a/src/renderer/components/ft-search-filters/ft-search-filters.css b/src/renderer/components/ft-search-filters/ft-search-filters.css
index b9052b3050c85..6115e010b10db 100644
--- a/src/renderer/components/ft-search-filters/ft-search-filters.css
+++ b/src/renderer/components/ft-search-filters/ft-search-filters.css
@@ -1,6 +1,6 @@
 .searchFilterInner {
   max-width: 800px;
-  margin-left: auto;
+  margin-inline-start: auto;
   margin-right: auto;
 
   padding: 20px 20px 70px 20px;
diff --git a/src/renderer/components/ft-settings-section/ft-settings-section.scss b/src/renderer/components/ft-settings-section/ft-settings-section.scss
index f22fce69983d7..c63550cd2dffe 100644
--- a/src/renderer/components/ft-settings-section/ft-settings-section.scss
+++ b/src/renderer/components/ft-settings-section/ft-settings-section.scss
@@ -41,7 +41,7 @@
 .sectionTitle {
   -webkit-user-select: none;
   user-select: none;
-  margin-left: 2%;
+  margin-inline-start: 2%;
 }
 
 :deep(.switchGrid) {
diff --git a/src/renderer/components/ft-tooltip/ft-tooltip.css b/src/renderer/components/ft-tooltip/ft-tooltip.css
index 3a1977d79983f..95a3929f581ec 100644
--- a/src/renderer/components/ft-tooltip/ft-tooltip.css
+++ b/src/renderer/components/ft-tooltip/ft-tooltip.css
@@ -77,7 +77,7 @@
 
 .text.right {
   left: 100%;
-  margin-left: 1em;
+  margin-inline-start: 1em;
   top: 50%;
   -webkit-transform: translate(-1em, -50%);
   transform: translate(-1em, -50%);
diff --git a/src/renderer/components/side-nav-more-options/side-nav-more-options.css b/src/renderer/components/side-nav-more-options/side-nav-more-options.css
index 146e64ebc2a4b..ff7f9891efaf5 100644
--- a/src/renderer/components/side-nav-more-options/side-nav-more-options.css
+++ b/src/renderer/components/side-nav-more-options/side-nav-more-options.css
@@ -57,7 +57,7 @@
   }
 
   .navLabel {
-    margin-left: 0px;
+    margin-inline-start: 0px;
     width: 100%;
     text-align: center;
     left: 0px;
@@ -65,7 +65,7 @@
   }
 
   .navIcon {
-    margin-left: 0px;
+    margin-inline-start: 0px;
     width: 100%;
     display: block;
     margin-top: 0.5em;
diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index a81c78bce68c2..51a95ee20a023 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@@ -65,18 +65,18 @@
 }
 
 .navIcon {
-  margin-left: 10px;
+  margin-inline-start: 10px;
 }
 
 .navOption .navLabel {
-  margin-left: 40px;
+  margin-inline-start: 40px;
   overflow: hidden;
   word-break: break-word;
 }
 
 .navChannel .navLabel {
   overflow: hidden;
-  margin-left: 40px;
+  margin-inline-start: 40px;
   word-break: break-word;
   font-size: 12px;
 }
@@ -128,7 +128,7 @@
 }
 
 .closed .navIcon {
-  margin-left: 0px;
+  margin-inline-start: 0px;
   width: 100%;
   display: block;
   margin-bottom: 0px;
@@ -138,7 +138,7 @@
 }
 
 .closed .navLabel {
-  margin-left: 0px;
+  margin-inline-start: 0px;
   width: 100%;
   text-align: center;
   left: 0px;
@@ -205,7 +205,7 @@
   }
 
   .navLabel {
-    margin-left: 0px;
+    margin-inline-start: 0px;
     width: 100%;
     text-align: center;
     left: 0px;
diff --git a/src/renderer/components/top-nav/top-nav.scss b/src/renderer/components/top-nav/top-nav.scss
index 6647409ff283f..0c26927305f45 100644
--- a/src/renderer/components/top-nav/top-nav.scss
+++ b/src/renderer/components/top-nav/top-nav.scss
@@ -87,7 +87,7 @@
 .navFilterIcon {
   $effect-distance: 10px;
 
-  margin-left: $effect-distance;
+  margin-inline-start: $effect-distance;
 
   &.filterChanged {
     box-shadow: 0 0 $effect-distance var(--primary-color);
@@ -154,7 +154,7 @@
       background-repeat: no-repeat;
       background-size: 100px;
       height: 40px;
-      margin-left: 5px;
+      margin-inline-start: 5px;
       position: relative;
       top: -3px;
       width: 100px;
diff --git a/src/renderer/components/watch-video-chapters/watch-video-chapters.css b/src/renderer/components/watch-video-chapters/watch-video-chapters.css
index d95bde01073f5..fa7aec0224aa7 100644
--- a/src/renderer/components/watch-video-chapters/watch-video-chapters.css
+++ b/src/renderer/components/watch-video-chapters/watch-video-chapters.css
@@ -30,7 +30,7 @@
 }
 
 .chaptersChevron.open {
-  margin-left: 4px;
+  margin-inline-start: 4px;
 }
 
 .chapter {
diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.css b/src/renderer/components/watch-video-comments/watch-video-comments.css
index 85b9882408bd3..4a525c6ab6cb3 100644
--- a/src/renderer/components/watch-video-comments/watch-video-comments.css
+++ b/src/renderer/components/watch-video-comments/watch-video-comments.css
@@ -56,7 +56,7 @@
 .commentAuthorWrapper {
   font-weight: bold;
   font-size: 14px;
-  margin-left: 68px;
+  margin-inline-start: 68px;
   margin-top: 0px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -77,7 +77,7 @@
   white-space: pre-wrap;
   font-size: 14px;
   margin-top: -10px;
-  margin-left: 70px;
+  margin-inline-start: 70px;
   word-wrap: break-word;
 }
 .commentPinned {
@@ -85,25 +85,25 @@
   font-size: 12px;
   margin-block-end: 0;
   margin-block-start: 0;
-  margin-left: 68px;
+  margin-inline-start: 68px;
   margin-bottom: 5px;
 }
 
 .commentDate {
   font-weight: normal;
-  margin-left: 5px;
+  margin-inline-start: 5px;
   font-size: 12px;
 }
 
 .commentMemberIcon {
-  margin-left: 5px;
+  margin-inline-start: 5px;
   width: 14px;
   height: 14px;
 }
 
 .commentLikeCount {
   font-size: 11px;
-  margin-left: 70px;
+  margin-inline-start: 70px;
   margin-top: 0px;
 }
 
@@ -112,7 +112,7 @@
   position: relative;
   width: 25px;
   height: 20px;
-  margin-left: 10px;
+  margin-inline-start: 10px;
   margin-bottom: -7px;
 }
 
@@ -146,18 +146,18 @@
 
 .commentMoreReplies {
   font-size: 11px;
-  margin-left: 5px;
+  margin-inline-start: 5px;
   text-decoration: underline;
   cursor: pointer;
   color: var(--title-color);
 }
 
 .commentReplies {
-  margin-left: 30px;
+  margin-inline-start: 30px;
 }
 
 .showMoreReplies {
-  margin-left: 30px;
+  margin-inline-start: 30px;
   font-size: 15px;
   cursor: pointer;
   text-decoration: underline;
diff --git a/src/renderer/components/watch-video-info/watch-video-info.scss b/src/renderer/components/watch-video-info/watch-video-info.scss
index 5dd5784c4058e..8d122cccb5038 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.scss
+++ b/src/renderer/components/watch-video-info/watch-video-info.scss
@@ -36,7 +36,7 @@
     color: inherit;
     cursor: pointer;
     display: block;
-    margin-left: 6px;
+    margin-inline-start: 6px;
     position: relative;
     text-decoration: inherit;
     top: -2px;
@@ -44,7 +44,7 @@
 
   .subscribeButton {
     font-size: 14px;
-    margin-left: 6px;
+    margin-inline-start: 6px;
     margin-top: 6px;
     padding: 6px;
   }
@@ -78,13 +78,13 @@
   display: flex;
   flex-direction: column;
   font-size: 16px;
-  margin-left: auto;
+  margin-inline-start: auto;
   margin-top: 4px;
   max-width: 210px;
   text-align: right;
 
   @media screen and (max-width: 680px) {
-    margin-left: 0;
+    margin-inline-start: 0;
     text-align: left;
   }
 
@@ -105,7 +105,7 @@
   margin-top: 16px;
 
   .option:not(:first-child) {
-    margin-left: 4px;
+    margin-inline-start: 4px;
   }
 
   @media screen and (max-width: 680px) {
diff --git a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
index d73623b60c09a..7727068ac1997 100644
--- a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
+++ b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
@@ -58,7 +58,7 @@
   display: inline-block;
   padding: 1px;
   padding-right: 10px;
-  margin-left: 2px;
+  margin-inline-start: 2px;
   margin-right: 2px;
   height: 30px;
   cursor: pointer;
@@ -68,14 +68,14 @@
 }
 
 .superChatContent {
-  margin-left: 32px;
+  margin-inline-start: 32px;
   margin-top: -25px;
   color: var(--text-with-main-color);
 }
 
 .superChat .channelThumbnail {
   margin-top: 3px;
-  margin-left: 3px;
+  margin-inline-start: 3px;
   height: 25px;
 }
 
@@ -88,7 +88,7 @@
   width: 100%;
   height: 415px;
   position: absolute;
-  margin-left: -16px;
+  margin-inline-start: -16px;
   padding-right: 32px;
   bottom: -15px;
   cursor: auto;
@@ -119,7 +119,7 @@
 .superChatMessage {
   width: 90%;
   grid-template-columns: auto;
-  margin-left: 5%;
+  margin-inline-start: 5%;
   margin-right: 5%;
   margin-top: 25px;
   margin-bottom: 10px;
@@ -140,7 +140,7 @@
 
 .upperSuperChatMessage .channelThumbnail {
   width: 45px;
-  margin-left: 10px;
+  margin-inline-start: 10px;
   margin-top: 5px;
 }
 
@@ -149,20 +149,20 @@
   opacity: 0.7;
   position: absolute;
   top: -20px;
-  margin-left: 65px;
+  margin-inline-start: 65px;
 }
 
 .upperSuperChatMessage .donationAmount {
   color: var(--text-with-main-color);
   font-weight: bold;
-  margin-left: 65px;
+  margin-inline-start: 65px;
   position: absolute;
   top: 0px;
 }
 
 .superChatMessage .chatMessage {
   color: var(--text-with-main-color);
-  margin-left: 20px;
+  margin-inline-start: 20px;
 }
 
 .liveChatComments {
diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.css b/src/renderer/components/watch-video-playlist/watch-video-playlist.css
index 16b10972e08b8..c5b0846b70dd1 100644
--- a/src/renderer/components/watch-video-playlist/watch-video-playlist.css
+++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.css
@@ -16,7 +16,7 @@
 }
 
 .playlistProgressBar {
-  margin-left: 10px;
+  margin-inline-start: 10px;
   /* > In order to let ::-webkit-progress-value take effect, appearance needs to be set to none on the <progress> element. */
   /* https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-value */
   appearance: none;
@@ -89,7 +89,7 @@
 }
 
 .videoInfo {
-  margin-left: 30px;
+  margin-inline-start: 30px;
   position: relative;
   bottom: 7px;
 }
diff --git a/src/renderer/scss-partials/_ft-list-item.scss b/src/renderer/scss-partials/_ft-list-item.scss
index 3774ae5d4cb84..e06ff750d2ee5 100644
--- a/src/renderer/scss-partials/_ft-list-item.scss
+++ b/src/renderer/scss-partials/_ft-list-item.scss
@@ -142,7 +142,7 @@ $watched-transition-duration: 0.5s;
       font-size: 17px;
       justify-self: left;
       margin-bottom: 4px;
-      margin-left: 4px;
+      margin-inline-start: 4px;
     }
 
     .favoritesIcon {
diff --git a/src/renderer/videoJS.css b/src/renderer/videoJS.css
index 813bb40c3302c..29dcdb16c2241 100644
--- a/src/renderer/videoJS.css
+++ b/src/renderer/videoJS.css
@@ -376,7 +376,7 @@
   font-size: inherit;
   line-height: inherit;
   list-style-position: outside;
-  margin-left: 0;
+  margin-inline-start: 0;
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 0;
@@ -596,7 +596,7 @@ body.vjs-full-window {
   top: 50%;
   left: 50%;
   margin-top: -0.81666em;
-  margin-left: -1.5em;
+  margin-inline-start: -1.5em;
 }
 
 .video-js:hover .vjs-big-play-button,
@@ -1127,7 +1127,7 @@ body.vjs-full-window {
   opacity: 0;
   width: 1px;
   height: 1px;
-  margin-left: -1px;
+  margin-inline-start: -1px;
 }
 
 .video-js .vjs-volume-tooltip {
@@ -1925,7 +1925,7 @@ video::-webkit-media-text-track-display {
 }
 
 .video-js .vjs-time-control.vjs-current-time {
-    margin-left: 1em
+    margin-inline-start: 1em
 }
 
 .video-js .vjs-time-control .vjs-current-time-display,.video-js .vjs-time-control .vjs-duration-display {
@@ -2017,13 +2017,13 @@ video::-webkit-media-text-track-display {
 }
 
 .video-js.vjs-live .vjs-live-control {
-    margin-left: 1em
+    margin-inline-start: 1em
 }
 
 .video-js .vjs-big-play-button {
     top: 50%;
     left: 50%;
-    margin-left: -1em;
+    margin-inline-start: -1em;
     margin-top: -1em;
     width: 2em;
     height: 2em;
diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css
index 190fd2e8ad7e8..31f6c8e4ddca8 100644
--- a/src/renderer/views/Channel/Channel.css
+++ b/src/renderer/views/Channel/Channel.css
@@ -75,13 +75,13 @@
 
 .channelSearch {
   width: 220px;
-  margin-left: auto;
+  margin-inline-start: auto;
   align-self: flex-end;
   flex: 1 1 0%;
 }
 
 .sortSelect {
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 .channelInfoTabs {
@@ -171,7 +171,7 @@
 
 .ft-community-image {
   display: block;
-  margin-left: auto;
+  margin-inline-start: auto;
   margin-right: auto;
 }
 

From ed1836a6a65708442333468401537a26ca35bc94 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Sun, 27 Aug 2023 21:04:12 -0500
Subject: [PATCH 02/67] Replace margin-right with margin-inline-end

---
 .../ft-community-post/ft-community-post.scss         |  4 ++--
 .../ft-notification-banner.css                       |  2 +-
 .../ft-search-filters/ft-search-filters.css          |  2 +-
 src/renderer/components/ft-select/ft-select.css      |  4 ++--
 .../ft-settings-section/ft-settings-section.scss     |  2 +-
 .../components/ft-share-button/ft-share-button.scss  |  2 +-
 src/renderer/components/ft-tooltip/ft-tooltip.css    |  2 +-
 .../watch-video-info/watch-video-info.scss           |  4 ++--
 .../watch-video-live-chat/watch-video-live-chat.css  |  6 +++---
 src/renderer/scss-partials/_ft-list-item.scss        |  6 +++---
 src/renderer/videoJS.css                             | 12 ++++++------
 src/renderer/views/Channel/Channel.css               |  2 +-
 src/renderer/views/Playlist/Playlist.css             |  2 +-
 13 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/renderer/components/ft-community-post/ft-community-post.scss b/src/renderer/components/ft-community-post/ft-community-post.scss
index 3975b338d4021..acfad386cd2c9 100644
--- a/src/renderer/components/ft-community-post/ft-community-post.scss
+++ b/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;
 }
 
@@ -68,7 +68,7 @@
 
   .likeCount {
     margin-inline-start: 5px;
-    margin-right: 6px;
+    margin-inline-end: 6px;
   }
 }
 
diff --git a/src/renderer/components/ft-notification-banner/ft-notification-banner.css b/src/renderer/components/ft-notification-banner/ft-notification-banner.css
index fc4d165581095..a7368795605af 100644
--- a/src/renderer/components/ft-notification-banner/ft-notification-banner.css
+++ b/src/renderer/components/ft-notification-banner/ft-notification-banner.css
@@ -19,7 +19,7 @@
 }
 
 .message {
-  margin-right: 25px;
+  margin-inline-end: 25px;
   cursor: pointer;
 }
 
diff --git a/src/renderer/components/ft-search-filters/ft-search-filters.css b/src/renderer/components/ft-search-filters/ft-search-filters.css
index 6115e010b10db..6782abc926f8c 100644
--- a/src/renderer/components/ft-search-filters/ft-search-filters.css
+++ b/src/renderer/components/ft-search-filters/ft-search-filters.css
@@ -1,7 +1,7 @@
 .searchFilterInner {
   max-width: 800px;
   margin-inline-start: auto;
-  margin-right: auto;
+  margin-inline-end: auto;
 
   padding: 20px 20px 70px 20px;
   max-height: 410px;
diff --git a/src/renderer/components/ft-select/ft-select.css b/src/renderer/components/ft-select/ft-select.css
index 5387cdbbc2cd4..fb2cb82b58095 100644
--- a/src/renderer/components/ft-select/ft-select.css
+++ b/src/renderer/components/ft-select/ft-select.css
@@ -162,6 +162,6 @@
 @media only screen and (max-width: 680px) {
   .select {
     padding: 0px;
-    margin-right: -15px;
-  }  
+    margin-inline-end: -15px;
+  }
 }
diff --git a/src/renderer/components/ft-settings-section/ft-settings-section.scss b/src/renderer/components/ft-settings-section/ft-settings-section.scss
index c63550cd2dffe..04089ce44cf57 100644
--- a/src/renderer/components/ft-settings-section/ft-settings-section.scss
+++ b/src/renderer/components/ft-settings-section/ft-settings-section.scss
@@ -93,7 +93,7 @@
 
     :deep(.switch-ctn.containsTooltip) {
       left: -10px;
-      margin-right: 5px;
+      margin-inline-end: 5px;
       padding: 0 10px;
     }
 
diff --git a/src/renderer/components/ft-share-button/ft-share-button.scss b/src/renderer/components/ft-share-button/ft-share-button.scss
index ead1c516ae2e7..3bd9a29fb8983 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.scss
+++ b/src/renderer/components/ft-share-button/ft-share-button.scss
@@ -60,7 +60,7 @@
       background-size: cover;
       display: inline-block;
       height: 20px;
-      margin-right: 2px;
+      margin-inline-end: 2px;
       width: 20px;
 
       @at-root {
diff --git a/src/renderer/components/ft-tooltip/ft-tooltip.css b/src/renderer/components/ft-tooltip/ft-tooltip.css
index 95a3929f581ec..9fd0be2662e01 100644
--- a/src/renderer/components/ft-tooltip/ft-tooltip.css
+++ b/src/renderer/components/ft-tooltip/ft-tooltip.css
@@ -68,7 +68,7 @@
 }
 
 .text.left {
-  margin-right:1em;
+  margin-inline-end:1em;
   right: 100%;
   top: 50%;
   -webkit-transform: translate(1em, -50%);
diff --git a/src/renderer/components/watch-video-info/watch-video-info.scss b/src/renderer/components/watch-video-info/watch-video-info.scss
index 8d122cccb5038..f27d543f984d1 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.scss
+++ b/src/renderer/components/watch-video-info/watch-video-info.scss
@@ -28,7 +28,7 @@
   .channelThumbnail {
     border-radius: 50%;
     cursor: pointer;
-    margin-right: 10px;
+    margin-inline-end: 10px;
     width: 56px;
   }
 
@@ -95,7 +95,7 @@
   }
 
   .likeCount {
-    margin-right: 0;
+    margin-inline-end: 0;
   }
 }
 
diff --git a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
index 7727068ac1997..8424c2d09e258 100644
--- a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
+++ b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
@@ -59,7 +59,7 @@
   padding: 1px;
   padding-right: 10px;
   margin-inline-start: 2px;
-  margin-right: 2px;
+  margin-inline-end: 2px;
   height: 30px;
   cursor: pointer;
   background-color: var(--primary-color);
@@ -120,7 +120,7 @@
   width: 90%;
   grid-template-columns: auto;
   margin-inline-start: 5%;
-  margin-right: 5%;
+  margin-inline-end: 5%;
   margin-top: 25px;
   margin-bottom: 10px;
   background-color: var(--primary-color);
@@ -198,7 +198,7 @@
 }
 
 .owner {
-  margin-right: 2px;
+  margin-inline-end: 2px;
   background-color: var(--primary-color);
   color: var(--text-with-main-color);
 }
diff --git a/src/renderer/scss-partials/_ft-list-item.scss b/src/renderer/scss-partials/_ft-list-item.scss
index e06ff750d2ee5..32d334a559e80 100644
--- a/src/renderer/scss-partials/_ft-list-item.scss
+++ b/src/renderer/scss-partials/_ft-list-item.scss
@@ -148,7 +148,7 @@ $watched-transition-duration: 0.5s;
     .favoritesIcon {
       font-size: 17px;
       justify-self: right;
-      margin-right: 3px;
+      margin-inline-end: 3px;
       margin-top: 3px;
       height: fit-content;
     }
@@ -260,13 +260,13 @@ $watched-transition-duration: 0.5s;
 
     @include is-sidebar-item {
       .videoThumbnail {
-        margin-right: 10px;
+        margin-inline-end: 10px;
       }
     }
 
     .videoThumbnail,
     .channelThumbnail {
-      margin-right: 20px;
+      margin-inline-end: 20px;
     }
 
     .channelThumbnail {
diff --git a/src/renderer/videoJS.css b/src/renderer/videoJS.css
index 29dcdb16c2241..990d8d27aae5a 100644
--- a/src/renderer/videoJS.css
+++ b/src/renderer/videoJS.css
@@ -377,7 +377,7 @@
   line-height: inherit;
   list-style-position: outside;
   margin-inline-start: 0;
-  margin-right: 0;
+  margin-inline-end: 0;
   margin-top: 0;
   margin-bottom: 0;
 }
@@ -1113,7 +1113,7 @@ body.vjs-full-window {
 }
 .video-js .vjs-volume-control {
   cursor: pointer;
-  margin-right: 1em;
+  margin-inline-end: 1em;
   display: flex;
 }
 
@@ -1146,7 +1146,7 @@ body.vjs-full-window {
 .video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal {
   width: 5em;
   height: 3em;
-  margin-right: 0;
+  margin-inline-end: 0;
 }
 .video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical {
   left: -3.5em;
@@ -1337,7 +1337,7 @@ body.vjs-full-window {
 }
 
 .vjs-seek-to-live-control .vjs-icon-placeholder {
-  margin-right: 0.5em;
+  margin-inline-end: 0.5em;
   color: #888;
 }
 
@@ -1729,7 +1729,7 @@ video::-webkit-media-text-track-display {
   }
 }
 .vjs-track-setting > select {
-  margin-right: 1em;
+  margin-inline-end: 1em;
   margin-bottom: 0.5em;
 }
 
@@ -1785,7 +1785,7 @@ video::-webkit-media-text-track-display {
 }
 
 .vjs-track-settings-controls .vjs-default-button {
-  margin-right: 1em;
+  margin-inline-end: 1em;
 }
 
 @media print {
diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css
index 31f6c8e4ddca8..a7365888786f6 100644
--- a/src/renderer/views/Channel/Channel.css
+++ b/src/renderer/views/Channel/Channel.css
@@ -172,7 +172,7 @@
 .ft-community-image {
   display: block;
   margin-inline-start: auto;
-  margin-right: auto;
+  margin-inline-end: auto;
 }
 
 .community-post-container {
diff --git a/src/renderer/views/Playlist/Playlist.css b/src/renderer/views/Playlist/Playlist.css
index f762bfc71f93d..a38dd512bca9d 100644
--- a/src/renderer/views/Playlist/Playlist.css
+++ b/src/renderer/views/Playlist/Playlist.css
@@ -6,7 +6,7 @@
   background-color: var(--card-bg-color);
   box-sizing: border-box;
   height: calc(100vh - 132px);
-  margin-right: 1em;
+  margin-inline-end: 1em;
   overflow-y: auto;
   padding: 10px;
   position: sticky;

From 5dc8303b5301c6b98a08580e37740e34cb962208 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Sun, 27 Aug 2023 21:32:55 -0500
Subject: [PATCH 03/67] Replace padding-left with padding-inline-start

---
 .../experimental-settings/experimental-settings.css       | 2 +-
 src/renderer/components/ft-input-tags/ft-input-tags.css   | 2 +-
 src/renderer/components/ft-input/ft-input.css             | 8 ++++----
 .../components/ft-radio-button/ft-radio-button.css        | 2 +-
 src/renderer/components/side-nav/side-nav.css             | 2 +-
 src/renderer/videoJS.css                                  | 4 ++--
 src/renderer/views/Channel/Channel.css                    | 4 ++--
 7 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/renderer/components/experimental-settings/experimental-settings.css b/src/renderer/components/experimental-settings/experimental-settings.css
index 58e50c3ab6762..de4541a52d739 100644
--- a/src/renderer/components/experimental-settings/experimental-settings.css
+++ b/src/renderer/components/experimental-settings/experimental-settings.css
@@ -1,6 +1,6 @@
 .experimental-warning {
   text-align: center;
   font-weight: bold;
-  padding-left: 4%;
+  padding-inline-start: 4%;
   padding-right: 4%
 }
diff --git a/src/renderer/components/ft-input-tags/ft-input-tags.css b/src/renderer/components/ft-input-tags/ft-input-tags.css
index d5878a42a6204..a2ce70eeb607d 100644
--- a/src/renderer/components/ft-input-tags/ft-input-tags.css
+++ b/src/renderer/components/ft-input-tags/ft-input-tags.css
@@ -26,7 +26,7 @@
 .ft-tag-box li>span {
   padding-top: 10px;
   padding-bottom: 10px;
-  padding-left: 10px;
+  padding-inline-start: 10px;
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-all;
diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css
index 26cc385cd95ab..65c6e78692eec 100644
--- a/src/renderer/components/ft-input/ft-input.css
+++ b/src/renderer/components/ft-input/ft-input.css
@@ -3,22 +3,22 @@
 }
 
 .ft-input-component.search.showClearTextButton {
-  padding-left: 30px;
+  padding-inline-start: 30px;
 }
 
 .ft-input-component.search.clearTextButtonVisible,
 .ft-input-component.search.showClearTextButton:focus-within {
-  padding-left: 0;
+  padding-inline-start: 0;
 }
 
 .ft-input-component.showClearTextButton:not(.search) .ft-input {
-  padding-left: 46px;
+  padding-inline-start: 46px;
 }
 
 /* Main search input */
 .clearTextButtonVisible.search .ft-input,
 .ft-input-component.search.showClearTextButton:focus-within .ft-input {
-  padding-left: 46px;
+  padding-inline-start: 46px;
 }
 
 .ft-input-component:focus-within .clearInputTextButton {
diff --git a/src/renderer/components/ft-radio-button/ft-radio-button.css b/src/renderer/components/ft-radio-button/ft-radio-button.css
index 7c5aa29e1254f..9ad75972f5ace 100644
--- a/src/renderer/components/ft-radio-button/ft-radio-button.css
+++ b/src/renderer/components/ft-radio-button/ft-radio-button.css
@@ -17,7 +17,7 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
 
 .pure-checkbox input[type="checkbox"] + label, .pure-radiobutton input[type="checkbox"] + label, .pure-checkbox input[type="radio"] + label, .pure-radiobutton input[type="radio"] + label {
   position: relative;
-  padding-left: 2em;
+  padding-inline-start: 2em;
   vertical-align: middle;
   -webkit-user-select: none;
   user-select: none;
diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index 51a95ee20a023..316d4befb8508 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@@ -183,7 +183,7 @@
 
   .topNavOption {
     margin-top: 0px;
-    padding-left: 10px;
+    padding-inline-start: 10px;
     padding-right: 10px;
   }
 
diff --git a/src/renderer/videoJS.css b/src/renderer/videoJS.css
index 990d8d27aae5a..c0dab26a33c14 100644
--- a/src/renderer/videoJS.css
+++ b/src/renderer/videoJS.css
@@ -1313,7 +1313,7 @@ body.vjs-full-window {
   flex: none;
   display: inline-flex;
   height: 100%;
-  padding-left: 0.5em;
+  padding-inline-start: 0.5em;
   padding-right: 0.5em;
   font-size: 1em;
   line-height: 3em;
@@ -1351,7 +1351,7 @@ body.vjs-full-window {
   line-height: 3.7em;
   min-width: 2em;
   width: auto;
-  padding-left: 0em;
+  padding-inline-start: 0em;
   padding-right: 0em;
 }
 
diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css
index a7365888786f6..78e50eb00bbb7 100644
--- a/src/renderer/views/Channel/Channel.css
+++ b/src/renderer/views/Channel/Channel.css
@@ -153,7 +153,7 @@
   display: flex;
   justify-content: center;
   flex-direction: column;
-  padding-left: 1em;
+  padding-inline-start: 1em;
 }
 
 .channelLineContainer h1,
@@ -176,7 +176,7 @@
 }
 
 .community-post-container {
-  padding-left: 30%;
+  padding-inline-start: 30%;
   padding-right: 30%;
 }
 

From 215ae6624546dfaecacc94c819c214630d352830 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Sun, 27 Aug 2023 21:36:13 -0500
Subject: [PATCH 04/67] Replace padding-right with padding-inline-end

---
 src/renderer/components/channel-about/channel-about.css     | 2 +-
 .../experimental-settings/experimental-settings.css         | 2 +-
 src/renderer/components/ft-input/ft-input.css               | 2 +-
 .../components/ft-profile-selector/ft-profile-selector.css  | 2 +-
 src/renderer/components/ft-select/ft-select.css             | 2 +-
 src/renderer/components/side-nav/side-nav.css               | 2 +-
 .../watch-video-live-chat/watch-video-live-chat.css         | 6 +++---
 src/renderer/videoJS.css                                    | 4 ++--
 src/renderer/views/Channel/Channel.css                      | 2 +-
 9 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/renderer/components/channel-about/channel-about.css b/src/renderer/components/channel-about/channel-about.css
index 348768ec4aaa2..6d14c5b71ddab 100644
--- a/src/renderer/components/channel-about/channel-about.css
+++ b/src/renderer/components/channel-about/channel-about.css
@@ -38,5 +38,5 @@
 }
 
 .aboutDetails th {
-  padding-right: 10px;
+  padding-inline-end: 10px;
 }
diff --git a/src/renderer/components/experimental-settings/experimental-settings.css b/src/renderer/components/experimental-settings/experimental-settings.css
index de4541a52d739..3f20bf0554619 100644
--- a/src/renderer/components/experimental-settings/experimental-settings.css
+++ b/src/renderer/components/experimental-settings/experimental-settings.css
@@ -2,5 +2,5 @@
   text-align: center;
   font-weight: bold;
   padding-inline-start: 4%;
-  padding-right: 4%
+  padding-inline-end: 4%
 }
diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css
index 65c6e78692eec..d3c21a7836a2b 100644
--- a/src/renderer/components/ft-input/ft-input.css
+++ b/src/renderer/components/ft-input/ft-input.css
@@ -153,7 +153,7 @@
   With arrow present means
   the text might get under the arrow with normal padding
    */
-  padding-right: calc(36px + 6px);
+  padding-inline-end: calc(36px + 6px);
 }
 
 .inputAction.enabled:hover {
diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.css b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
index b63bbfeba5ba9..ca4e372134194 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.css
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
@@ -66,7 +66,7 @@
   display: flex;
   align-items: center;
   height: 50px;
-  padding-right: 10px;
+  padding-inline-end: 10px;
 }
 
 .profileListTitle {
diff --git a/src/renderer/components/ft-select/ft-select.css b/src/renderer/components/ft-select/ft-select.css
index fb2cb82b58095..6344e0edc466e 100644
--- a/src/renderer/components/ft-select/ft-select.css
+++ b/src/renderer/components/ft-select/ft-select.css
@@ -60,7 +60,7 @@
   appearance: none;
   -webkit-appearance:none;
   text-overflow: ellipsis;
-  padding-right: 1.1rem;
+  padding-inline-end: 1.1rem;
 }
 
 .iconSelect {
diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index 316d4befb8508..ac2bfb9d1ab60 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@@ -184,7 +184,7 @@
   .topNavOption {
     margin-top: 0px;
     padding-inline-start: 10px;
-    padding-right: 10px;
+    padding-inline-end: 10px;
   }
 
   .sideNav, .closed {
diff --git a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
index 8424c2d09e258..6add3c493037e 100644
--- a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
+++ b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
@@ -57,7 +57,7 @@
 .superChat {
   display: inline-block;
   padding: 1px;
-  padding-right: 10px;
+  padding-inline-end: 10px;
   margin-inline-start: 2px;
   margin-inline-end: 2px;
   height: 30px;
@@ -89,7 +89,7 @@
   height: 415px;
   position: absolute;
   margin-inline-start: -16px;
-  padding-right: 32px;
+  padding-inline-end: 32px;
   bottom: -15px;
   cursor: auto;
   z-index: 1;
@@ -186,7 +186,7 @@
 .channelName {
   color: var(--tertiary-text-color);
   font-weight: bold;
-  padding-right: 5px;
+  padding-inline-end: 5px;
 }
 
 .member {
diff --git a/src/renderer/videoJS.css b/src/renderer/videoJS.css
index c0dab26a33c14..84a3b0bcdbbf1 100644
--- a/src/renderer/videoJS.css
+++ b/src/renderer/videoJS.css
@@ -1314,7 +1314,7 @@ body.vjs-full-window {
   display: inline-flex;
   height: 100%;
   padding-inline-start: 0.5em;
-  padding-right: 0.5em;
+  padding-inline-end: 0.5em;
   font-size: 1em;
   line-height: 3em;
   width: auto;
@@ -1352,7 +1352,7 @@ body.vjs-full-window {
   min-width: 2em;
   width: auto;
   padding-inline-start: 0em;
-  padding-right: 0em;
+  padding-inline-end: 0em;
 }
 
 .vjs-live .vjs-time-control {
diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css
index 78e50eb00bbb7..c57c3604990e4 100644
--- a/src/renderer/views/Channel/Channel.css
+++ b/src/renderer/views/Channel/Channel.css
@@ -177,7 +177,7 @@
 
 .community-post-container {
   padding-inline-start: 30%;
-  padding-right: 30%;
+  padding-inline-end: 30%;
 }
 
 @media only screen and (max-width: 800px) {

From 1bee690bcc194ef1c5333f4f13a4694cf8144e86 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Sun, 27 Aug 2023 22:59:04 -0500
Subject: [PATCH 05/67] Replace padding-top & padding-bottom with
 padding-block; continue replacing  padding-left and padding-right with
 padding-inline-start and padding-inline-end

---
 .../ft-age-restricted/ft-age-restricted.scss    |  6 ++++--
 src/renderer/components/ft-button/ft-button.css |  3 ++-
 src/renderer/components/ft-card/ft-card.css     |  5 ++---
 .../ft-community-poll/ft-community-poll.css     |  9 +++++----
 .../ft-community-post/ft-community-post.scss    |  4 ++--
 .../ft-icon-button/ft-icon-button.scss          |  3 ++-
 .../components/ft-input-tags/ft-input-tags.css  |  3 +--
 src/renderer/components/ft-input/ft-input.css   |  3 ++-
 .../ft-notification-banner.css                  |  4 ++--
 .../ft-profile-bubble/ft-profile-bubble.css     |  6 ++++--
 .../ft-profile-edit/ft-profile-edit.css         |  3 ++-
 .../ft-search-filters/ft-search-filters.css     |  3 ++-
 src/renderer/components/ft-select/ft-select.css |  6 ++++--
 .../ft-settings-section.scss                    |  8 +++++---
 src/renderer/components/ft-slider/ft-slider.css |  3 ++-
 .../ft-sponsor-block-category.scss              |  3 ++-
 .../ft-toggle-switch/ft-toggle-switch.scss      |  3 ++-
 .../components/ft-tooltip/ft-tooltip.css        |  3 ++-
 .../side-nav-more-options.css                   |  3 ++-
 src/renderer/components/side-nav/side-nav.css   | 10 ++++++----
 src/renderer/components/top-nav/top-nav.scss    |  3 ++-
 .../watch-video-chapters.css                    |  3 ++-
 .../watch-video-comments.css                    | 17 +++++++----------
 .../watch-video-live-chat.css                   |  3 +--
 src/renderer/scss-partials/_ft-list-item.scss   |  5 +++--
 src/renderer/views/Channel/Channel.css          |  8 +++++---
 .../SubscribedChannels/SubscribedChannels.css   |  3 ++-
 src/renderer/views/Watch/Watch.scss             |  3 ++-
 28 files changed, 79 insertions(+), 57 deletions(-)

diff --git a/src/renderer/components/ft-age-restricted/ft-age-restricted.scss b/src/renderer/components/ft-age-restricted/ft-age-restricted.scss
index a30ab65b880bd..34bc140b7e4b9 100644
--- a/src/renderer/components/ft-age-restricted/ft-age-restricted.scss
+++ b/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%;
   }
diff --git a/src/renderer/components/ft-button/ft-button.css b/src/renderer/components/ft-button/ft-button.css
index 49e3a6e1c5757..2a00cab980d9f 100644
--- a/src/renderer/components/ft-button/ft-button.css
+++ b/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;
diff --git a/src/renderer/components/ft-card/ft-card.css b/src/renderer/components/ft-card/ft-card.css
index 7048b65424b4a..7f9c2c571f060 100644
--- a/src/renderer/components/ft-card/ft-card.css
+++ b/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);
 }
diff --git a/src/renderer/components/ft-community-poll/ft-community-poll.css b/src/renderer/components/ft-community-poll/ft-community-poll.css
index a92808a54be03..39264321d030e 100644
--- a/src/renderer/components/ft-community-poll/ft-community-poll.css
+++ b/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;
 }
 
@@ -16,7 +16,7 @@
   top: 8px;
   width: 10px;
 }
-  
+
 .filled-circle {
   border-radius: 50%;
   background-color: black;
@@ -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 {
diff --git a/src/renderer/components/ft-community-post/ft-community-post.scss b/src/renderer/components/ft-community-post/ft-community-post.scss
index acfad386cd2c9..e2fa2d06678da 100644
--- a/src/renderer/components/ft-community-post/ft-community-post.scss
+++ b/src/renderer/components/ft-community-post/ft-community-post.scss
@@ -111,7 +111,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 +128,5 @@
 
 .ft-list-item.grid {
   min-height: 0 !important;
-  padding-bottom: 20px;
+  padding-block-end: 20px;
 }
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.scss b/src/renderer/components/ft-icon-button/ft-icon-button.scss
index 8a8bdc6723752..823575a3f1079 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.scss
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss
@@ -115,7 +115,8 @@
   .listItem {
     cursor: pointer;
     margin: 0;
-    padding: 8px 10px;
+    padding-block: 8px;
+    padding-inline: 10px;
     transition: background 0.2s ease-out;
     white-space: nowrap;
 
diff --git a/src/renderer/components/ft-input-tags/ft-input-tags.css b/src/renderer/components/ft-input-tags/ft-input-tags.css
index a2ce70eeb607d..8bdb606d4082a 100644
--- a/src/renderer/components/ft-input-tags/ft-input-tags.css
+++ b/src/renderer/components/ft-input-tags/ft-input-tags.css
@@ -24,8 +24,7 @@
 }
 
 .ft-tag-box li>span {
-  padding-top: 10px;
-  padding-bottom: 10px;
+  padding-block: 10px;
   padding-inline-start: 10px;
   overflow-wrap: break-word;
   word-wrap: break-word;
diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css
index d3c21a7836a2b..a652ab7fa1269 100644
--- a/src/renderer/components/ft-input/ft-input.css
+++ b/src/renderer/components/ft-input/ft-input.css
@@ -183,7 +183,8 @@
   width: 100%;
   list-style: none;
   margin: 0;
-  padding: 5px 0;
+  padding-block: 5px;
+  padding-inline: 0;
   z-index: 10;
   border-radius: 0 0 5px 5px;
   word-wrap: break-word;
diff --git a/src/renderer/components/ft-notification-banner/ft-notification-banner.css b/src/renderer/components/ft-notification-banner/ft-notification-banner.css
index a7368795605af..a9ca9614b0a44 100644
--- a/src/renderer/components/ft-notification-banner/ft-notification-banner.css
+++ b/src/renderer/components/ft-notification-banner/ft-notification-banner.css
@@ -7,8 +7,8 @@
   */
   margin: 4px;
 	padding: 16px;
-	padding-top: 3px;
-	padding-bottom: 5px;
+  padding-block: 3px 5px;
+  padding-inline: 16px;
   box-shadow: 0 1px 2px rgba(0,0,0,.1);
   position: relative;
   cursor: pointer;
diff --git a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
index 2d2df9b0c1fb3..d99fdeaaf3422 100644
--- a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
+++ b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
@@ -1,7 +1,8 @@
 .bubblePadding {
   width: 100px;
   height: 115px;
-  padding: 10px 10px 30px 10px;
+  padding-block: 10px 30px;
+  padding-inline: 10px;
   cursor: pointer;
   -webkit-transition: background 0.2s ease-out;
   -moz-transition: background 0.2s ease-out;
@@ -28,7 +29,8 @@
   font-size: 35px;
   line-height: 1em;
   text-align: center;
-  padding: 17.5px 0;
+  padding-block: 17.5px;
+  padding-inline: 0;
   user-select: none;
   -webkit-user-select: none;
 }
diff --git a/src/renderer/components/ft-profile-edit/ft-profile-edit.css b/src/renderer/components/ft-profile-edit/ft-profile-edit.css
index 3db26c9236a2e..aefd0f7298e80 100644
--- a/src/renderer/components/ft-profile-edit/ft-profile-edit.css
+++ b/src/renderer/components/ft-profile-edit/ft-profile-edit.css
@@ -35,7 +35,8 @@
   font-size: 50px;
   line-height: 1em;
   text-align: center;
-  padding: 25px 0;
+  padding-block: 25px;
+  padding-inline: 0px;
   user-select: none;
   -webkit-user-select: none;
 }
diff --git a/src/renderer/components/ft-search-filters/ft-search-filters.css b/src/renderer/components/ft-search-filters/ft-search-filters.css
index 6782abc926f8c..4066da7b650e6 100644
--- a/src/renderer/components/ft-search-filters/ft-search-filters.css
+++ b/src/renderer/components/ft-search-filters/ft-search-filters.css
@@ -3,7 +3,8 @@
   margin-inline-start: auto;
   margin-inline-end: auto;
 
-  padding: 20px 20px 70px 20px;
+  padding-block: 20px 70px;
+  padding-inline: 20px;
   max-height: 410px;
   overflow-y: auto;
 
diff --git a/src/renderer/components/ft-select/ft-select.css b/src/renderer/components/ft-select/ft-select.css
index 6344e0edc466e..7f0701abe74b8 100644
--- a/src/renderer/components/ft-select/ft-select.css
+++ b/src/renderer/components/ft-select/ft-select.css
@@ -24,7 +24,8 @@
 .select {
   position: relative;
   width: 200px;
-  padding: 0px 10px 10px 0;
+  padding-block: 0 10px;
+  padding-inline: 0 10px;
   margin-top: 30px;
 }
 
@@ -39,7 +40,8 @@
   background-color: transparent;
   color: var(--primary-text-color);
   width: 240px;
-  padding: 10px 10px 10px 0;
+  padding-block: 10px;
+  padding-inline: 0 10px;
   font-size: 18px;
   border-radius: 0;
   border: none;
diff --git a/src/renderer/components/ft-settings-section/ft-settings-section.scss b/src/renderer/components/ft-settings-section/ft-settings-section.scss
index 04089ce44cf57..624da337bcf6e 100644
--- a/src/renderer/components/ft-settings-section/ft-settings-section.scss
+++ b/src/renderer/components/ft-settings-section/ft-settings-section.scss
@@ -8,12 +8,13 @@
   }
 
   &[open] {
-    padding-bottom: 15px;
+    padding-block-end: 15px;
   }
 
   > div {
     box-sizing: border-box;
-    padding: 0 20px;
+    padding-block: 0;
+    padding-inline: 20px;
     width: 100%;
   }
 
@@ -94,7 +95,8 @@
     :deep(.switch-ctn.containsTooltip) {
       left: -10px;
       margin-inline-end: 5px;
-      padding: 0 10px;
+      padding-block: 0;
+      padding-inline: 10px;
     }
 
     :not(.select, .selectLabel) {
diff --git a/src/renderer/components/ft-slider/ft-slider.css b/src/renderer/components/ft-slider/ft-slider.css
index b4169819a5365..852d2b3f65367 100644
--- a/src/renderer/components/ft-slider/ft-slider.css
+++ b/src/renderer/components/ft-slider/ft-slider.css
@@ -177,7 +177,8 @@
     margin: 17px 0;
     border: none;
     border-radius: 1px;
-    padding: 0 17px;
+    padding-block: 0;
+    padding-inline: 17px;
     width: 100%;
     height: 2px;
     background-color: transparent;
diff --git a/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.scss b/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.scss
index 9fff4e5cc826b..5c03586317a91 100644
--- a/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.scss
+++ b/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.scss
@@ -1,6 +1,7 @@
 .sponsorBlockCategory {
   margin-top: 30px;
-  padding: 0 10px;
+  padding-block: 0;
+  padding-inline: 10px;
 
   @media only screen and (max-width: 680px) {
     width: 100%;
diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
index d116fcf7450e4..47301a0104635 100644
--- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
+++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
@@ -23,7 +23,8 @@
   cursor: pointer;
   display: inline-block;
   font-weight: 500;
-  padding: 12px 0 12px 44px;
+  padding-block: 12px;
+  padding-inline: 44px 0;
   position: relative;
   text-align: left;
 
diff --git a/src/renderer/components/ft-tooltip/ft-tooltip.css b/src/renderer/components/ft-tooltip/ft-tooltip.css
index 9fd0be2662e01..85c5ccb7096a0 100644
--- a/src/renderer/components/ft-tooltip/ft-tooltip.css
+++ b/src/renderer/components/ft-tooltip/ft-tooltip.css
@@ -41,7 +41,8 @@
   max-width: max-content;
   min-width: 15em;
   opacity: 0;
-  padding: 10px 8px;
+  padding-block: 10px;
+  padding-inline: 8px;
   pointer-events: none;
   position: absolute;
   text-align: center;
diff --git a/src/renderer/components/side-nav-more-options/side-nav-more-options.css b/src/renderer/components/side-nav-more-options/side-nav-more-options.css
index ff7f9891efaf5..02799d9f5156e 100644
--- a/src/renderer/components/side-nav-more-options/side-nav-more-options.css
+++ b/src/renderer/components/side-nav-more-options/side-nav-more-options.css
@@ -53,7 +53,8 @@
   .navOption, .closed .navOption {
     width: 70px;
     height: 40px;
-    padding: 10px 0px;
+    padding-block: 10px;
+    padding-inline: 0;
   }
 
   .navLabel {
diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index ac2bfb9d1ab60..a251292948103 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@@ -124,7 +124,8 @@
 
 .closed .navOption {
   width: 100%;
-  padding: 5px 0px;
+  padding-block: 5px;
+  padding-inline: 0;
 }
 
 .closed .navIcon {
@@ -149,7 +150,8 @@
 .closed .navChannel {
   width: 100%;
   height: 45px;
-  padding: 5px 0px;
+  padding-block: 5px;
+  padding-inline: 0;
 }
 
 .closed .thumbnailContainer {
@@ -200,8 +202,8 @@
     width: 70px;
     height: 40px;
     padding: 0px;
-    padding-top: 10px;
-    padding-bottom: 10px;
+    padding-block-start: 10px;
+    padding-block-end: 10px;
   }
 
   .navLabel {
diff --git a/src/renderer/components/top-nav/top-nav.scss b/src/renderer/components/top-nav/top-nav.scss
index 0c26927305f45..9f643b9bdbcb3 100644
--- a/src/renderer/components/top-nav/top-nav.scss
+++ b/src/renderer/components/top-nav/top-nav.scss
@@ -124,7 +124,8 @@
     align-items: center;
     cursor: pointer;
     display: flex;
-    padding: 0 25px 0 10px;
+    padding-block: 0;
+    padding-inline: 10px 25px;
 
     &:active {
       background-color: var(--tertiary-text-color);
diff --git a/src/renderer/components/watch-video-chapters/watch-video-chapters.css b/src/renderer/components/watch-video-chapters/watch-video-chapters.css
index fa7aec0224aa7..54358e41d6e25 100644
--- a/src/renderer/components/watch-video-chapters/watch-video-chapters.css
+++ b/src/renderer/components/watch-video-chapters/watch-video-chapters.css
@@ -76,7 +76,8 @@
 .chapterTimestamp {
   grid-area: timestamp;
   align-self: flex-start;
-  padding: 3px 4px;
+  padding-block: 3px;
+  padding-inline: 4px;
   border-radius: 5px;
   background-color: var(--accent-color);
   color: var(--text-with-accent-color);
diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.css b/src/renderer/components/watch-video-comments/watch-video-comments.css
index 4a525c6ab6cb3..2211ef1afed35 100644
--- a/src/renderer/components/watch-video-comments/watch-video-comments.css
+++ b/src/renderer/components/watch-video-comments/watch-video-comments.css
@@ -1,5 +1,6 @@
 .card {
-  padding: 0 16px;
+  padding-block: 0;
+  padding-inline: 16px;
 }
 
 .getCommentsTitle,
@@ -9,8 +10,7 @@
 }
 
 .getCommentsTitle {
-  padding-bottom: 8px;
-  padding-top: 8px;
+  padding-block: 8px;
   text-align: center;
   text-decoration: underline;
   cursor: pointer;
@@ -18,15 +18,12 @@
 }
 
 .noCommentMsg {
-  padding-top: 1em;
-  padding-bottom: 1em;
-
+  padding-block: 1em;
   text-align: center;
 }
 
 .commentsTitle {
-  padding-bottom: 1em;
-  padding-top: 1em;
+  padding-block: 1em;
 }
 
 .commentSort {
@@ -65,7 +62,7 @@
 .commentOwner {
   background-color: var(--scrollbar-color);
   border-radius: 10px;
-  padding: 0 10px;
+  padding-inline: 10px;
 }
 
 .commentAuthor {
@@ -164,7 +161,7 @@
 }
 
 .getMoreComments {
-  padding-bottom: 1em;
+  padding-block-end: 1em;
 
   text-align: center;
   text-decoration: underline;
diff --git a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
index 6add3c493037e..d70ddb9db28aa 100644
--- a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
+++ b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
@@ -109,8 +109,7 @@
 
 .comment {
   width: 100%;
-  padding-top: 5px;
-  padding-bottom: 7px;
+  padding-block: 5px 7px;
   display: grid;
   grid-template-columns: min-content auto;
   gap: 5px;
diff --git a/src/renderer/scss-partials/_ft-list-item.scss b/src/renderer/scss-partials/_ft-list-item.scss
index 32d334a559e80..c677728af3146 100644
--- a/src/renderer/scss-partials/_ft-list-item.scss
+++ b/src/renderer/scss-partials/_ft-list-item.scss
@@ -124,7 +124,8 @@ $watched-transition-duration: 0.5s;
       line-height: 1.2;
       margin: 0 4px 4px 0;
       opacity: $thumbnail-overlay-opacity;
-      padding: 3px 4px;
+      padding-block: 3px;
+      padding-inline: 4px;
       pointer-events: none;
 
       @include is-watch-playlist-item {
@@ -278,7 +279,7 @@ $watched-transition-duration: 0.5s;
     display: flex;
     flex-direction: column;
     min-height: 230px;
-    padding-bottom: 20px;
+    padding-block-end: 20px;
 
     .videoThumbnail,
     .channelThumbnail {
diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css
index c57c3604990e4..f3a3f0201e627 100644
--- a/src/renderer/views/Channel/Channel.css
+++ b/src/renderer/views/Channel/Channel.css
@@ -29,7 +29,8 @@
   position: relative;
   background-color: var(--card-bg-color);
   margin-top: 10px;
-  padding: 0 16px;
+  padding-block: 0;
+  padding-inline: 16px;
 }
 
 .channelInfo {
@@ -40,7 +41,7 @@
 }
 
 .channelInfoHasError {
-  padding-bottom: 10px;
+  padding-block-end: 10px;
 }
 
 .channelThumbnail {
@@ -90,7 +91,8 @@
   height: auto;
   justify-content: unset;
   gap: 32px;
-  padding: .3em 0;
+  padding-block: .3em;
+  padding-inline: 0;
 }
 
 .tabs {
diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.css b/src/renderer/views/SubscribedChannels/SubscribedChannels.css
index 78781b0371bed..9ca63f5638c9b 100644
--- a/src/renderer/views/SubscribedChannels/SubscribedChannels.css
+++ b/src/renderer/views/SubscribedChannels/SubscribedChannels.css
@@ -52,7 +52,8 @@
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
-  padding: 0 4px;
+  padding-block: 0;
+  padding-inline: 4px;
 }
 
 .unsubscribeContainer {
diff --git a/src/renderer/views/Watch/Watch.scss b/src/renderer/views/Watch/Watch.scss
index 90e5360a4993f..ea90cb433b404 100644
--- a/src/renderer/views/Watch/Watch.scss
+++ b/src/renderer/views/Watch/Watch.scss
@@ -58,7 +58,8 @@
         display: flex;
         height: 60px;
         left: 12px;
-        padding: 0 12px;
+        padding-block: 0;
+        padding-inline: 12px;
         position: absolute;
 
         .premiereIcon {

From 0fa5a5f34b573081fb41f8f2d340abd7feeed2ca Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Sun, 27 Aug 2023 23:38:37 -0500
Subject: [PATCH 06/67] Add updated rtl-compatible margins to ft-slider and fix
 indentation

---
 .../components/ft-slider/ft-slider.css        | 237 +++++++++---------
 1 file changed, 121 insertions(+), 116 deletions(-)

diff --git a/src/renderer/components/ft-slider/ft-slider.css b/src/renderer/components/ft-slider/ft-slider.css
index 852d2b3f65367..3b79dec56ceb9 100644
--- a/src/renderer/components/ft-slider/ft-slider.css
+++ b/src/renderer/components/ft-slider/ft-slider.css
@@ -1,251 +1,256 @@
 .pure-material-slider {
-    --pure-material-safari-helper1: var(--accent-color-opacity1);
-    --pure-material-safari-helper2: var(--accent-color-opacity2);
-    --pure-material-safari-helper3: var(--accent-color-opacity3);
-    --pure-material-safari-helper4: var(--accent-color-opacity4);
-    display: inline-block;
-    width: 380px;
-    color: rgba(var(--primary-text-color), 0.87);
-    font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
-    font-size: 16px;
-    line-height: 1.5;
-    padding: 5px;
-    margin: 12px 8px;
+  --pure-material-safari-helper1: var(--accent-color-opacity1);
+  --pure-material-safari-helper2: var(--accent-color-opacity2);
+  --pure-material-safari-helper3: var(--accent-color-opacity3);
+  --pure-material-safari-helper4: var(--accent-color-opacity4);
+  display: inline-block;
+  width: 380px;
+  color: rgba(var(--primary-text-color), 0.87);
+  font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
+  font-size: 16px;
+  line-height: 1.5;
+  padding: 5px;
+  margin-block: 12px;
+  margin-inline: 8px;
 }
 
 /* Input */
 .pure-material-slider > input {
-    -webkit-appearance: none;
-    position: relative;
-    top: 24px;
-    display: block;
-    margin: 0 0 -36px;
-    width: 100%;
-    height: 36px;
-    background-color: transparent;
-    cursor: pointer;
+  -webkit-appearance: none;
+  position: relative;
+  top: 24px;
+  display: block;
+  margin-block: 0 -36px;
+  margin-inline: 0;
+  width: 100%;
+  height: 36px;
+  background-color: transparent;
+  cursor: pointer;
 }
 
 /* Without Span */
 .pure-material-slider > input:last-child {
-    position: static;
-    margin: 0;
+  position: static;
+  margin: 0;
 }
 
 /* Span */
 .pure-material-slider > span {
-    display: inline-block;
-    margin-bottom: 36px;
+  display: inline-block;
+  margin-bottom: 36px;
 }
 
 /* Focus */
 .pure-material-slider > input:focus {
-    outline: none;
+  outline: none;
 }
 
 /* Disabled */
 .pure-material-slider > input:disabled {
-    cursor: default;
-    opacity: 0.38;
+  cursor: default;
+  opacity: 0.38;
 }
 
 .pure-material-slider > input:disabled + span {
-    opacity: 0.38;
+  opacity: 0.38;
 }
 
 /* Webkit | Track */
 .pure-material-slider > input::-webkit-slider-runnable-track {
-    margin: 17px 0;
-    border-radius: 1px;
-    width: 100%;
-    height: 2px;
-    background-color: var(--accent-color-opacity4);
+  margin-block: 17px;
+  margin-inline: 0;
+  border-radius: 1px;
+  width: 100%;
+  height: 2px;
+  background-color: var(--accent-color-opacity4);
 }
 
 /* Webkit | Thumb */
 .pure-material-slider > input::-webkit-slider-thumb {
-    appearance: none;
-    -webkit-appearance: none;
-    border: none;
-    border-radius: 50%;
-    height: 2px;
-    width: 2px;
-    background-color: var(--accent-color);
-    transform: scale(6, 6);
-    transition: box-shadow 0.2s;
+  appearance: none;
+  -webkit-appearance: none;
+  border: none;
+  border-radius: 50%;
+  height: 2px;
+  width: 2px;
+  background-color: var(--accent-color);
+  transform: scale(6, 6);
+  transition: box-shadow 0.2s;
 }
 
 /* Webkit | Hover, Focus */
 .pure-material-slider:hover > input::-webkit-slider-thumb {
-    box-shadow: 0 0 0 2px var(--pure-material-safari-helper1);
+  box-shadow: 0 0 0 2px var(--pure-material-safari-helper1);
 }
 
 .pure-material-slider > input:focus::-webkit-slider-thumb {
-    box-shadow: 0 0 0 2px var(--pure-material-safari-helper2);
+  box-shadow: 0 0 0 2px var(--pure-material-safari-helper2);
 }
 
 .pure-material-slider:hover > input:focus::-webkit-slider-thumb {
-    box-shadow: 0 0 0 2px var(--pure-material-safari-helper3);
+  box-shadow: 0 0 0 2px var(--pure-material-safari-helper3);
 }
 
 /* Webkit | Active */
 .pure-material-slider > input:active::-webkit-slider-thumb {
-     box-shadow: 0 0 0 2px var(--pure-material-safari-helper4) !important;
+  box-shadow: 0 0 0 2px var(--pure-material-safari-helper4) !important;
 }
 
 /* Webkit | Disabled */
 .pure-material-slider > input:disabled::-webkit-slider-runnable-track {
-    background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
+  background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
 }
 
 .pure-material-slider > input:disabled::-webkit-slider-thumb {
-    background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0));
-    color: rgb(var(--pure-material-surface-rgb, 255, 255, 255)); /* Safari */
-    box-shadow: 0 0 0 1px rgb(var(--pure-material-surface-rgb, 255, 255, 255)) !important;
-    transform: scale(4, 4);
+  background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0));
+  color: rgb(var(--pure-material-surface-rgb, 255, 255, 255)); /* Safari */
+  box-shadow: 0 0 0 1px rgb(var(--pure-material-surface-rgb, 255, 255, 255)) !important;
+  transform: scale(4, 4);
 }
 
 /* Moz | Track */
 .pure-material-slider > input::-moz-range-track {
-    margin: 17px 0;
-    border-radius: 1px;
-    width: 100%;
-    height: 2px;
-    background-color: var(--accent-color-opacity4);
+  margin-block: 0;
+  margin-auto: 17px;
+  border-radius: 1px;
+  width: 100%;
+  height: 2px;
+  background-color: var(--accent-color-opacity4);
 }
 
 /* Moz | Thumb */
 .pure-material-slider > input::-moz-range-thumb {
-    appearance: none;
-    -moz-appearance: none;
-    border: none;
-    border-radius: 50%;
-    height: 2px;
-    width: 2px;
-    background-color: var(--accent-color);
-    transform: scale(6, 6);
-    transition: box-shadow 0.2s;
+  appearance: none;
+  -moz-appearance: none;
+  border: none;
+  border-radius: 50%;
+  height: 2px;
+  width: 2px;
+  background-color: var(--accent-color);
+  transform: scale(6, 6);
+  transition: box-shadow 0.2s;
 }
 
 /* Moz | Progress */
 .pure-material-slider > input::-moz-range-progress {
-    border-radius: 1px;
-    height: 2px;
-    background-color: var(--accent-color);
+  border-radius: 1px;
+  height: 2px;
+  background-color: var(--accent-color);
 }
 
 /* Moz | Hover, Focus */
 .pure-material-slider:hover > input:hover::-moz-range-thumb {
-    box-shadow: 0 0 0 2px var(--accent-color-opacity1);
+  box-shadow: 0 0 0 2px var(--accent-color-opacity1);
 }
 
 .pure-material-slider > input:focus::-moz-range-thumb {
-    box-shadow: 0 0 0 2px var(--accent-color-opacity2);
+  box-shadow: 0 0 0 2px var(--accent-color-opacity2);
 }
 
 .pure-material-slider:hover > input:focus::-moz-range-thumb {
-    box-shadow: 0 0 0 2px var(--accent-color-opacity3);
+  box-shadow: 0 0 0 2px var(--accent-color-opacity3);
 }
 
 /* Moz | Active */
 .pure-material-slider > input:active::-moz-range-thumb {
-    box-shadow: 0 0 0 2px var(--accent-color-opacity4) !important;
+  box-shadow: 0 0 0 2px var(--accent-color-opacity4) !important;
 }
 
 /* Moz | Disabled */
 .pure-material-slider > input:disabled::-moz-range-track {
-    background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
+  background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
 }
 
 .pure-material-slider > input:disabled::-moz-range-progress {
-    background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.87);
+  background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.87);
 }
 
 .pure-material-slider > input:disabled::-moz-range-thumb {
-    background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0));
-    box-shadow: 0 0 0 1px rgb(var(--pure-material-surface-rgb, 255, 255, 255)) !important;
-    transform: scale(4, 4);
+  background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0));
+  box-shadow: 0 0 0 1px rgb(var(--pure-material-surface-rgb, 255, 255, 255)) !important;
+  transform: scale(4, 4);
 }
 
 .pure-material-slider > input::-moz-focus-outer {
-    border: none;
+  border: none;
 }
 
 /* MS | Track */
 .pure-material-slider > input::-ms-track {
-    box-sizing: border-box;
-    margin: 17px 0;
-    border: none;
-    border-radius: 1px;
-    padding-block: 0;
-    padding-inline: 17px;
-    width: 100%;
-    height: 2px;
-    background-color: transparent;
+  box-sizing: border-box;
+  margin-block: 17px;
+  margin-inline: 0;
+  border: none;
+  border-radius: 1px;
+  padding-block: 0;
+  padding-inline: 17px;
+  width: 100%;
+  height: 2px;
+  background-color: transparent;
 }
 
 .pure-material-slider > input::-ms-fill-lower {
-    border-radius: 1px;
-    height: 2px;
-    background-color: var(--accent-color);
+  border-radius: 1px;
+  height: 2px;
+  background-color: var(--accent-color);
 }
 
 /* MS | Progress */
 .pure-material-slider > input::-ms-fill-upper {
-    border-radius: 1px;
-    height: 2px;
-    background-color: var(--accent-color-opacity4);
+  border-radius: 1px;
+  height: 2px;
+  background-color: var(--accent-color-opacity4);
 }
 
 /* MS | Thumb */
 .pure-material-slider > input::-ms-thumb {
-    appearance: none;
-    margin: 0 17px;
-    border: none;
-    border-radius: 50%;
-    height: 2px;
-    width: 2px;
-    background-color: var(--accent-color);
-    transform: scale(6, 6);
-    transition: box-shadow 0.2s;
+  appearance: none;
+  margin: 0 17px;
+  border: none;
+  border-radius: 50%;
+  height: 2px;
+  width: 2px;
+  background-color: var(--accent-color);
+  transform: scale(6, 6);
+  transition: box-shadow 0.2s;
 }
 
 /* MS | Hover, Focus */
 .pure-material-slider:hover > input::-ms-thumb {
-    box-shadow: 0 0 0 2px var(--accent-color-opacity1);
+  box-shadow: 0 0 0 2px var(--accent-color-opacity1);
 }
 
 .pure-material-slider > input:focus::-ms-thumb {
-    box-shadow: 0 0 0 2px var(--accent-color-opacity2);
+  box-shadow: 0 0 0 2px var(--accent-color-opacity2);
 }
 
 .pure-material-slider:hover > input:focus::-ms-thumb {
-    box-shadow: 0 0 0 2px var(--accent-color-opacity3);
+  box-shadow: 0 0 0 2px var(--accent-color-opacity3);
 }
 
 /* MS | Active */
 .pure-material-slider > input:active::-ms-thumb {
-    box-shadow: 0 0 0 2px var(--accent-color-opacity4) !important;
+  box-shadow: 0 0 0 2px var(--accent-color-opacity4) !important;
 }
 
 /* MS | Disabled */
 .pure-material-slider > input:disabled::-ms-fill-lower {
-    background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
+  background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
 }
 
 .pure-material-slider > input:disabled::-ms-fill-upper {
-    background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
-    opacity: 0.38;
+  background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
+  opacity: 0.38;
 }
 
 .pure-material-slider > input:disabled::-ms-thumb {
-    background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0));
-    box-shadow: 0 0 0 1px rgb(var(--pure-material-surface-rgb, 255, 255, 255)) !important;
-    transform: scale(4, 4);
+  background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0));
+  box-shadow: 0 0 0 1px rgb(var(--pure-material-surface-rgb, 255, 255, 255)) !important;
+  transform: scale(4, 4);
 }
 
 @media only screen and (max-width: 680px) {
-    .pure-material-slider {
-        width: 100%;
-    }
+  .pure-material-slider {
+    width: 100%;
+  }
 }

From c88f916c80e022eea1225fda220c867cd6e9341c Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Sun, 27 Aug 2023 23:59:01 -0500
Subject: [PATCH 07/67] Replace margin-top & margin-bottom with margin-block;
 continue replacing margin-left and margin-right with margin-inline-start and
 margin-inline-end

---
 src/renderer/App.css                          | 16 ++++++----
 .../channel-about/channel-about.css           |  2 +-
 .../ft-community-post/ft-community-post.scss  | 10 +++---
 .../ft-input-tags/ft-input-tags.css           |  2 +-
 src/renderer/components/ft-input/ft-input.css |  6 ++--
 .../ft-profile-bubble/ft-profile-bubble.css   |  3 +-
 .../ft-profile-selector.css                   |  2 +-
 .../ft-radio-button/ft-radio-button.css       |  6 ++--
 .../components/ft-select/ft-select.css        |  2 +-
 .../ft-settings-section.scss                  |  5 +--
 .../ft-share-button/ft-share-button.scss      |  6 ++--
 .../ft-sponsor-block-category.scss            |  2 +-
 .../ft-toggle-switch/ft-toggle-switch.scss    |  3 +-
 .../components/ft-tooltip/ft-tooltip.css      |  4 +--
 .../player-settings/player-settings.scss      |  2 +-
 .../side-nav-more-options.css                 |  4 +--
 src/renderer/components/side-nav/side-nav.css |  6 ++--
 src/renderer/components/top-nav/top-nav.scss  |  9 ++++--
 .../watch-video-chapters.css                  |  4 +--
 .../watch-video-comments.css                  |  6 ++--
 .../watch-video-info/watch-video-info.scss    | 16 +++++-----
 .../watch-video-live-chat.css                 | 15 +++++----
 .../watch-video-playlist.css                  |  2 +-
 src/renderer/scss-partials/_ft-list-item.scss |  9 +++---
 src/renderer/videoJS.css                      | 32 +++++++++----------
 src/renderer/views/Channel/Channel.css        | 13 ++++----
 src/renderer/views/Hashtag/Hashtag.css        |  5 +--
 src/renderer/views/Playlist/Playlist.css      |  2 +-
 src/renderer/views/Search/Search.css          |  2 +-
 .../SubscribedChannels/SubscribedChannels.css |  4 +--
 .../views/Subscriptions/Subscriptions.css     |  2 +-
 src/renderer/views/Trending/Trending.css      |  2 +-
 src/renderer/views/Watch/Watch.scss           | 25 +++++++++------
 33 files changed, 128 insertions(+), 101 deletions(-)

diff --git a/src/renderer/App.css b/src/renderer/App.css
index e6bceeb967f60..d520e4b73bde0 100644
--- a/src/renderer/App.css
+++ b/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-block-start: 60px;
     margin-bottom: -75px;
   }
 }
diff --git a/src/renderer/components/channel-about/channel-about.css b/src/renderer/components/channel-about/channel-about.css
index 6d14c5b71ddab..0af4cb90f1805 100644
--- a/src/renderer/components/channel-about/channel-about.css
+++ b/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;
diff --git a/src/renderer/components/ft-community-post/ft-community-post.scss b/src/renderer/components/ft-community-post/ft-community-post.scss
index e2fa2d06678da..af97a368cdb06 100644
--- a/src/renderer/components/ft-community-post/ft-community-post.scss
+++ b/src/renderer/components/ft-community-post/ft-community-post.scss
@@ -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,7 +53,7 @@
   display: block;
   flex-direction: column;
   font-size: 15px;
-  margin-top: 4px;
+  margin-block-start: 4px;
   max-width: 210px;
   text-align: left;
 
@@ -78,7 +80,7 @@
   .videoThumbnail {
     display: flex;
     margin-bottom: auto;
-    margin-top: auto;
+    margin-block-start: auto;
     position: relative;
     width: fit-content;
 
diff --git a/src/renderer/components/ft-input-tags/ft-input-tags.css b/src/renderer/components/ft-input-tags/ft-input-tags.css
index 8bdb606d4082a..d7b552dc75088 100644
--- a/src/renderer/components/ft-input-tags/ft-input-tags.css
+++ b/src/renderer/components/ft-input-tags/ft-input-tags.css
@@ -44,7 +44,7 @@
 }
 
 :deep(.ft-input-component .ft-input) {
-  margin-top: 10px;
+  margin-block-start: 10px;
 }
 
 @media only screen and (max-width: 576px) {
diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css
index a652ab7fa1269..91ed4f9423bee 100644
--- a/src/renderer/components/ft-input/ft-input.css
+++ b/src/renderer/components/ft-input/ft-input.css
@@ -42,7 +42,8 @@
   left: 0;
   /* To be higher than `.inputWrapper` */
   z-index: 1;
-  margin: 0 3px;
+  margin-block: 0;
+  margin-inline: 3px;
   padding: 10px;
   border-radius: 100%;
   color: var(--primary-text-color);
@@ -123,7 +124,8 @@
 
 .inputAction {
   position: absolute;
-  margin: 0 3px;
+  margin-block: 0;
+  margin-inline: 3px;
   padding: 10px;
   top: -8px;
   right: 0;
diff --git a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
index d99fdeaaf3422..0a3075003c511 100644
--- a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
+++ b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
@@ -20,7 +20,8 @@
 .bubble {
   width: 70px;
   height: 70px;
-  margin: 20px auto 5px auto;
+  margin-block: 20px 5px;
+  margin-inline: auto;
   border-radius: 50%;
   -webkit-border-radius: 50%;
 }
diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.css b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
index ca4e372134194..eb2f7e4281d84 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.css
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
@@ -34,7 +34,7 @@
 }
 
 .profileWrapper {
-  margin-top: 60px;
+  margin-block-start: 60px;
   height: 340px;
   overflow-y: auto;
 }
diff --git a/src/renderer/components/ft-radio-button/ft-radio-button.css b/src/renderer/components/ft-radio-button/ft-radio-button.css
index 9ad75972f5ace..3a00f66596953 100644
--- a/src/renderer/components/ft-radio-button/ft-radio-button.css
+++ b/src/renderer/components/ft-radio-button/ft-radio-button.css
@@ -35,7 +35,7 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
   left: 0;
   width: 14px;
   height: 14px;
-  margin-top: -9px;
+  margin-block-start: -9px;
   border: 2px solid var(--primary-color);
   text-align: center;
   transition: all 0.4s ease;
@@ -50,7 +50,7 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
   left: 4px;
   width: 10px;
   height: 10px;
-  margin-top: -5px;
+  margin-block-start: -5px;
   transform: scale(0);
   transform-origin: 50%;
   transition: transform 200ms ease-out;
@@ -68,7 +68,7 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
   left: 4px;
   width: 8px;
   height: 3px;
-  margin-top: -4px;
+  margin-block-start: -4px;
   border-style: solid;
   border-width: 0 0 3px 3px;
   border-image: none;
diff --git a/src/renderer/components/ft-select/ft-select.css b/src/renderer/components/ft-select/ft-select.css
index 7f0701abe74b8..924e6e934c3d3 100644
--- a/src/renderer/components/ft-select/ft-select.css
+++ b/src/renderer/components/ft-select/ft-select.css
@@ -26,7 +26,7 @@
   width: 200px;
   padding-block: 0 10px;
   padding-inline: 0 10px;
-  margin-top: 30px;
+  margin-block-start: 30px;
 }
 
 .disabled, .disabled + svg.iconSelect {
diff --git a/src/renderer/components/ft-settings-section/ft-settings-section.scss b/src/renderer/components/ft-settings-section/ft-settings-section.scss
index 624da337bcf6e..51c0ea01265b5 100644
--- a/src/renderer/components/ft-settings-section/ft-settings-section.scss
+++ b/src/renderer/components/ft-settings-section/ft-settings-section.scss
@@ -29,7 +29,7 @@
   background-color: var(--primary-color);
   border: 0;
   height: 2px;
-  margin-top: -1px;
+  margin-block-start: -1px;
   width: 100%;
 }
 
@@ -114,7 +114,8 @@
     }
 
     :deep(.switch-ctn) {
-      margin: 10px 7px;
+      margin-block: 10px;
+      margin-inline: 7px;
     }
   }
 }
diff --git a/src/renderer/components/ft-share-button/ft-share-button.scss b/src/renderer/components/ft-share-button/ft-share-button.scss
index 3bd9a29fb8983..5b5471c789281 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.scss
+++ b/src/renderer/components/ft-share-button/ft-share-button.scss
@@ -9,7 +9,8 @@
     color: var(--primary-text-color);
     font-size: 18px;
     font-weight: bold;
-    margin: 4px 0 8px;
+    margin-block: 4px 8px;
+    margin-inline: 0;
   }
 
   .buttons {
@@ -24,7 +25,8 @@
   .divider {
     background: var(--tertiary-text-color);
     grid-row: span 3;
-    margin: 0 12px;
+    margin-block: 0;
+    margin-inline: 12px;
     width: 1px;
   }
 
diff --git a/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.scss b/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.scss
index 5c03586317a91..3afca0e66b660 100644
--- a/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.scss
+++ b/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.scss
@@ -1,5 +1,5 @@
 .sponsorBlockCategory {
-  margin-top: 30px;
+  margin-block-start: 30px;
   padding-block: 0;
   padding-inline: 10px;
 
diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
index 47301a0104635..a522f3709bf9d 100644
--- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
+++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
@@ -1,7 +1,8 @@
 /* Thanks to Guus Lieben for the Material Design Switch */
 
 .switch-ctn {
-  margin: 20px 16px;
+  margin-block: 20px;
+  margin-inline: 16px;
   position: relative;
 
   &.compact {
diff --git a/src/renderer/components/ft-tooltip/ft-tooltip.css b/src/renderer/components/ft-tooltip/ft-tooltip.css
index 85c5ccb7096a0..9f6fffc46bcc3 100644
--- a/src/renderer/components/ft-tooltip/ft-tooltip.css
+++ b/src/renderer/components/ft-tooltip/ft-tooltip.css
@@ -53,7 +53,7 @@
 }
 
 .text.bottom {
-  margin-top: 1em;
+  margin-block-start: 1em;
   top: 100%;
   left: 50%;
   -webkit-transform: translate(-50%, -1em);
@@ -61,7 +61,7 @@
 }
 
 .text.bottom-left {
-  margin-top: 1em;
+  margin-block-start: 1em;
   top: 100%;
   left: -100px;
   -webkit-transform: translate(-50%, -1em);
diff --git a/src/renderer/components/player-settings/player-settings.scss b/src/renderer/components/player-settings/player-settings.scss
index 246dc136e4685..4e3f3bbe4d3be 100644
--- a/src/renderer/components/player-settings/player-settings.scss
+++ b/src/renderer/components/player-settings/player-settings.scss
@@ -18,6 +18,6 @@
   .screenshotFilenamePatternInput,
   .screenshotFilenamePatternExample {
     flex-grow: 1;
-    margin-top: 10px;
+    margin-block-start: 10px;
   }
 }
diff --git a/src/renderer/components/side-nav-more-options/side-nav-more-options.css b/src/renderer/components/side-nav-more-options/side-nav-more-options.css
index 02799d9f5156e..f1abdaede16e4 100644
--- a/src/renderer/components/side-nav-more-options/side-nav-more-options.css
+++ b/src/renderer/components/side-nav-more-options/side-nav-more-options.css
@@ -42,7 +42,7 @@
   }
 
   .sideNav, .closed {
-    margin-top: 0px;
+    margin-block-start: 0px;
     height: 60px;
     width: 100%;
     bottom: 0px;
@@ -69,7 +69,7 @@
     margin-inline-start: 0px;
     width: 100%;
     display: block;
-    margin-top: 0.5em;
+    margin-block-start: 0.5em;
   }
 
   .moreOption {
diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index a251292948103..b579ff3f9a702 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@@ -36,7 +36,7 @@
 }
 
 .topNavOption {
-  margin-top: 10px;
+  margin-block-start: 10px;
 }
 
 .navOption, .navChannel {
@@ -184,13 +184,13 @@
   }
 
   .topNavOption {
-    margin-top: 0px;
+    margin-block-start: 0px;
     padding-inline-start: 10px;
     padding-inline-end: 10px;
   }
 
   .sideNav, .closed {
-    margin-top: 0px;
+    margin-block-start: 0px;
     height: 60px;
     width: 100%;
     bottom: 0px;
diff --git a/src/renderer/components/top-nav/top-nav.scss b/src/renderer/components/top-nav/top-nav.scss
index 9f643b9bdbcb3..d780c752e5f27 100644
--- a/src/renderer/components/top-nav/top-nav.scss
+++ b/src/renderer/components/top-nav/top-nav.scss
@@ -102,7 +102,8 @@
   align-items: center;
   display: flex;
   gap: 3px;
-  margin: 0 6px;
+  margin-block: 0;
+  margin-inline: 6px;
 
   &.profiles {
     justify-content: flex-end;
@@ -198,14 +199,16 @@
 
   .searchFilters {
     left: 0;
-    margin: 10px 20px 20px 220px;
+    margin-block: 10px 20px;
+    margin-inline: 220px 20px;
     position: absolute;
     right: 0;
     transition: margin 150ms ease-in-out;
 
     @media only screen and (max-width: 680px) {
       left: 0;
-      margin: 95px 10px 0;
+      margin-block: 95px 0;
+      margin-inline: 10px;
       right: 0;
     }
   }
diff --git a/src/renderer/components/watch-video-chapters/watch-video-chapters.css b/src/renderer/components/watch-video-chapters/watch-video-chapters.css
index 54358e41d6e25..190cd10714513 100644
--- a/src/renderer/components/watch-video-chapters/watch-video-chapters.css
+++ b/src/renderer/components/watch-video-chapters/watch-video-chapters.css
@@ -3,7 +3,7 @@
 }
 
 .chaptersTitle {
-  margin-top: 10px;
+  margin-block-start: 10px;
   margin-bottom: 0;
   cursor: pointer;
 }
@@ -13,7 +13,7 @@
 }
 
 .chaptersWrapper {
-  margin-top: 15px;
+  margin-block-start: 15px;
   max-height: 250px;
   overflow-y: scroll;
   display: flex;
diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.css b/src/renderer/components/watch-video-comments/watch-video-comments.css
index 2211ef1afed35..2d9d58f7e1a6b 100644
--- a/src/renderer/components/watch-video-comments/watch-video-comments.css
+++ b/src/renderer/components/watch-video-comments/watch-video-comments.css
@@ -54,7 +54,7 @@
   font-weight: bold;
   font-size: 14px;
   margin-inline-start: 68px;
-  margin-top: 0px;
+  margin-block-start: 0px;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -73,7 +73,7 @@
 .commentText {
   white-space: pre-wrap;
   font-size: 14px;
-  margin-top: -10px;
+  margin-block-start: -10px;
   margin-inline-start: 70px;
   word-wrap: break-word;
 }
@@ -101,7 +101,7 @@
 .commentLikeCount {
   font-size: 11px;
   margin-inline-start: 70px;
-  margin-top: 0px;
+  margin-block-start: 0px;
 }
 
 .commentHeartBadge {
diff --git a/src/renderer/components/watch-video-info/watch-video-info.scss b/src/renderer/components/watch-video-info/watch-video-info.scss
index f27d543f984d1..b5a2cef21e060 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.scss
+++ b/src/renderer/components/watch-video-info/watch-video-info.scss
@@ -13,10 +13,9 @@
   display: block;
   font-size: 22px;
   font-weight: normal;
-  margin: 0 0 24px;
+  margin-block: 0 24px;
+  margin-inline: 0;
   margin-block-end: 1em;
-  margin-inline-end: 0;
-  margin-inline-start: 0;
   word-break: break-word;
 }
 
@@ -45,7 +44,7 @@
   .subscribeButton {
     font-size: 14px;
     margin-inline-start: 6px;
-    margin-top: 6px;
+    margin-block-start: 6px;
     padding: 6px;
   }
 }
@@ -62,14 +61,15 @@
 }
 
 .viewCount {
-  margin: 18px 0 0;
+  margin-block: 18px 0;
+  margin-inline: 0;
 }
 
 .datePublished {
   margin: 4px 0 0;
 
   @media screen and (max-width: 680px) {
-    margin-top: 16px;
+    margin-block-start: 16px;
   }
 }
 
@@ -79,7 +79,7 @@
   flex-direction: column;
   font-size: 16px;
   margin-inline-start: auto;
-  margin-top: 4px;
+  margin-block-start: 4px;
   max-width: 210px;
   text-align: right;
 
@@ -102,7 +102,7 @@
 .videoOptions {
   display: flex;
   justify-content: flex-end;
-  margin-top: 16px;
+  margin-block-start: 16px;
 
   .option:not(:first-child) {
     margin-inline-start: 4px;
diff --git a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
index d70ddb9db28aa..f5d34be043236 100644
--- a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
+++ b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
@@ -31,7 +31,8 @@
 
 :deep(.liveChatEmoji) {
   vertical-align: middle;
-  margin: 0 2px;
+  margin-block: 0;
+  margin-inline: 2px;
 }
 
 .errorIcon {
@@ -69,12 +70,12 @@
 
 .superChatContent {
   margin-inline-start: 32px;
-  margin-top: -25px;
+  margin-block-start: -25px;
   color: var(--text-with-main-color);
 }
 
 .superChat .channelThumbnail {
-  margin-top: 3px;
+  margin-block-start: 3px;
   margin-inline-start: 3px;
   height: 25px;
 }
@@ -120,7 +121,7 @@
   grid-template-columns: auto;
   margin-inline-start: 5%;
   margin-inline-end: 5%;
-  margin-top: 25px;
+  margin-block-start: 25px;
   margin-bottom: 10px;
   background-color: var(--primary-color);
   border-radius: 5px;
@@ -129,7 +130,7 @@
 }
 
 .upperSuperChatMessage {
-  margin-top: -15px;
+  margin-block-start: -15px;
   width: 100%;
   height: 55px;
   background-color: var(--primary-color-hover);
@@ -140,7 +141,7 @@
 .upperSuperChatMessage .channelThumbnail {
   width: 45px;
   margin-inline-start: 10px;
-  margin-top: 5px;
+  margin-block-start: 5px;
 }
 
 .upperSuperChatMessage .channelName {
@@ -176,7 +177,7 @@
 }
 
 .chatContent {
-  margin-top: 5px;
+  margin-block-start: 5px;
   margin-bottom: 2px;
   font-size: 12px;
   word-wrap: break-word;
diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.css b/src/renderer/components/watch-video-playlist/watch-video-playlist.css
index c5b0846b70dd1..75488b63a7665 100644
--- a/src/renderer/components/watch-video-playlist/watch-video-playlist.css
+++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.css
@@ -38,7 +38,7 @@
 .playlistIcon {
   font-size: 20px;
   padding: 10px;
-  margin-top: -25px;
+  margin-block-start: -25px;
   cursor: pointer;
   border-radius: 50%;
   color: var(--tertiary-text-color);
diff --git a/src/renderer/scss-partials/_ft-list-item.scss b/src/renderer/scss-partials/_ft-list-item.scss
index c677728af3146..60c6cbabf4dcb 100644
--- a/src/renderer/scss-partials/_ft-list-item.scss
+++ b/src/renderer/scss-partials/_ft-list-item.scss
@@ -122,7 +122,8 @@ $watched-transition-duration: 0.5s;
       font-size: 15px;
       justify-self: right;
       line-height: 1.2;
-      margin: 0 4px 4px 0;
+      margin-block: 0 4px;
+      margin-inline: 0 4px;
       opacity: $thumbnail-overlay-opacity;
       padding-block: 3px;
       padding-inline: 4px;
@@ -150,7 +151,7 @@ $watched-transition-duration: 0.5s;
       font-size: 17px;
       justify-self: right;
       margin-inline-end: 3px;
-      margin-top: 3px;
+      margin-block-start: 3px;
       height: fit-content;
     }
 
@@ -229,7 +230,7 @@ $watched-transition-duration: 0.5s;
     .infoLine {
       font-size: 14px;
       grid-area: infoLine;
-      margin-top: 5px;
+      margin-block-start: 5px;
       overflow-wrap: anywhere;
 
       @include is-sidebar-item {
@@ -296,7 +297,7 @@ $watched-transition-duration: 0.5s;
 
     .infoLine {
       font-size: 13px;
-      margin-top: 8px;
+      margin-block-start: 8px;
     }
   }
 
diff --git a/src/renderer/videoJS.css b/src/renderer/videoJS.css
index 84a3b0bcdbbf1..813bb40c3302c 100644
--- a/src/renderer/videoJS.css
+++ b/src/renderer/videoJS.css
@@ -376,8 +376,8 @@
   font-size: inherit;
   line-height: inherit;
   list-style-position: outside;
-  margin-inline-start: 0;
-  margin-inline-end: 0;
+  margin-left: 0;
+  margin-right: 0;
   margin-top: 0;
   margin-bottom: 0;
 }
@@ -596,7 +596,7 @@ body.vjs-full-window {
   top: 50%;
   left: 50%;
   margin-top: -0.81666em;
-  margin-inline-start: -1.5em;
+  margin-left: -1.5em;
 }
 
 .video-js:hover .vjs-big-play-button,
@@ -1113,7 +1113,7 @@ body.vjs-full-window {
 }
 .video-js .vjs-volume-control {
   cursor: pointer;
-  margin-inline-end: 1em;
+  margin-right: 1em;
   display: flex;
 }
 
@@ -1127,7 +1127,7 @@ body.vjs-full-window {
   opacity: 0;
   width: 1px;
   height: 1px;
-  margin-inline-start: -1px;
+  margin-left: -1px;
 }
 
 .video-js .vjs-volume-tooltip {
@@ -1146,7 +1146,7 @@ body.vjs-full-window {
 .video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal {
   width: 5em;
   height: 3em;
-  margin-inline-end: 0;
+  margin-right: 0;
 }
 .video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical {
   left: -3.5em;
@@ -1313,8 +1313,8 @@ body.vjs-full-window {
   flex: none;
   display: inline-flex;
   height: 100%;
-  padding-inline-start: 0.5em;
-  padding-inline-end: 0.5em;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
   font-size: 1em;
   line-height: 3em;
   width: auto;
@@ -1337,7 +1337,7 @@ body.vjs-full-window {
 }
 
 .vjs-seek-to-live-control .vjs-icon-placeholder {
-  margin-inline-end: 0.5em;
+  margin-right: 0.5em;
   color: #888;
 }
 
@@ -1351,8 +1351,8 @@ body.vjs-full-window {
   line-height: 3.7em;
   min-width: 2em;
   width: auto;
-  padding-inline-start: 0em;
-  padding-inline-end: 0em;
+  padding-left: 0em;
+  padding-right: 0em;
 }
 
 .vjs-live .vjs-time-control {
@@ -1729,7 +1729,7 @@ video::-webkit-media-text-track-display {
   }
 }
 .vjs-track-setting > select {
-  margin-inline-end: 1em;
+  margin-right: 1em;
   margin-bottom: 0.5em;
 }
 
@@ -1785,7 +1785,7 @@ video::-webkit-media-text-track-display {
 }
 
 .vjs-track-settings-controls .vjs-default-button {
-  margin-inline-end: 1em;
+  margin-right: 1em;
 }
 
 @media print {
@@ -1925,7 +1925,7 @@ video::-webkit-media-text-track-display {
 }
 
 .video-js .vjs-time-control.vjs-current-time {
-    margin-inline-start: 1em
+    margin-left: 1em
 }
 
 .video-js .vjs-time-control .vjs-current-time-display,.video-js .vjs-time-control .vjs-duration-display {
@@ -2017,13 +2017,13 @@ video::-webkit-media-text-track-display {
 }
 
 .video-js.vjs-live .vjs-live-control {
-    margin-inline-start: 1em
+    margin-left: 1em
 }
 
 .video-js .vjs-big-play-button {
     top: 50%;
     left: 50%;
-    margin-inline-start: -1em;
+    margin-left: -1em;
     margin-top: -1em;
     width: 2em;
     height: 2em;
diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css
index f3a3f0201e627..5f6305125770a 100644
--- a/src/renderer/views/Channel/Channel.css
+++ b/src/renderer/views/Channel/Channel.css
@@ -1,7 +1,8 @@
 .card {
   position: relative;
   width: 85%;
-  margin: 0 auto 20px;
+  margin-block: 0 20px;
+  margin-inline: auto;
   box-sizing: border-box;
 }
 
@@ -28,7 +29,7 @@
 .channelInfoContainer {
   position: relative;
   background-color: var(--card-bg-color);
-  margin-top: 10px;
+  margin-block-start: 10px;
   padding-block: 0;
   padding-inline: 16px;
 }
@@ -125,12 +126,12 @@
 }
 
 .channelSearch {
-  margin-top: 10px;
+  margin-block-start: 10px;
   max-width: 250px;
 }
 
 .elementListLoading {
-  margin-top: 200px;
+  margin-block-start: 200px;
 }
 
 .message {
@@ -144,7 +145,7 @@
   line-height: 45px;
   text-align: center;
   cursor: pointer;
-  margin-top: 16px;
+  margin-block-start: 16px;
 }
 
 .thumbnailContainer {
@@ -197,6 +198,6 @@
     overflow-x: scroll;
   }
   #communityPanel {
-    margin-top: 1rem;
+    margin-block-start: 1rem;
   }
 }
diff --git a/src/renderer/views/Hashtag/Hashtag.css b/src/renderer/views/Hashtag/Hashtag.css
index 282946b4aa611..b06652cc0e76e 100644
--- a/src/renderer/views/Hashtag/Hashtag.css
+++ b/src/renderer/views/Hashtag/Hashtag.css
@@ -5,7 +5,7 @@
   line-height: 45px;
   text-align: center;
   cursor: pointer;
-  margin-top: 16px;
+  margin-block-start: 16px;
 }
 
 .getNextPage:hover, .getNextPage:focus {
@@ -13,7 +13,8 @@
 }
 
 .card {
-  margin: 0 auto 20px;
+  margin-block: 0 20px;
+  margin-inline: auto;
   width: 85%;
 }
 
diff --git a/src/renderer/views/Playlist/Playlist.css b/src/renderer/views/Playlist/Playlist.css
index a38dd512bca9d..0e1ba0cfc6d9a 100644
--- a/src/renderer/views/Playlist/Playlist.css
+++ b/src/renderer/views/Playlist/Playlist.css
@@ -40,7 +40,7 @@
 }
 
 :deep(.videoThumbnail) {
-  margin-top: auto;
+  margin-block-start: auto;
   margin-bottom: auto;
 }
 
diff --git a/src/renderer/views/Search/Search.css b/src/renderer/views/Search/Search.css
index bce8f337f6281..be15d509ee426 100644
--- a/src/renderer/views/Search/Search.css
+++ b/src/renderer/views/Search/Search.css
@@ -5,7 +5,7 @@
   line-height: 45px;
   text-align: center;
   cursor: pointer;
-  margin-top: 16px;
+  margin-block-start: 16px;
 }
 
 .getNextPage:hover, .getNextPage:focus {
diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.css b/src/renderer/views/SubscribedChannels/SubscribedChannels.css
index 9ca63f5638c9b..df83ce5e49827 100644
--- a/src/renderer/views/SubscribedChannels/SubscribedChannels.css
+++ b/src/renderer/views/SubscribedChannels/SubscribedChannels.css
@@ -9,7 +9,7 @@
 }
 
 .count {
-  margin-top: 1rem;
+  margin-block-start: 1rem;
 }
 
 .channels {
@@ -17,7 +17,7 @@
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(120px, 1fr) );
   gap: 2.5rem;
-  margin-top: 2rem;
+  margin-block-start: 2rem;
 }
 
 .channel {
diff --git a/src/renderer/views/Subscriptions/Subscriptions.css b/src/renderer/views/Subscriptions/Subscriptions.css
index 3e37187ae8802..e1c94ae4f3c66 100644
--- a/src/renderer/views/Subscriptions/Subscriptions.css
+++ b/src/renderer/views/Subscriptions/Subscriptions.css
@@ -10,7 +10,7 @@
 
 .subscriptionTabs {
   width: 100%;
-  margin-top: -3px;
+  margin-block-start: -3px;
   color: var(--tertiary-text-color);
   margin-bottom: 10px;
 }
diff --git a/src/renderer/views/Trending/Trending.css b/src/renderer/views/Trending/Trending.css
index 3f5bf94dc39cb..a3196344d3102 100644
--- a/src/renderer/views/Trending/Trending.css
+++ b/src/renderer/views/Trending/Trending.css
@@ -14,7 +14,7 @@
   width: 100%;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
-  margin-top: -3px;
+  margin-block-start: -3px;
   color: var(--tertiary-text-color);
   margin-bottom: 10px;
 }
diff --git a/src/renderer/views/Watch/Watch.scss b/src/renderer/views/Watch/Watch.scss
index ea90cb433b404..0d27a0d298e09 100644
--- a/src/renderer/views/Watch/Watch.scss
+++ b/src/renderer/views/Watch/Watch.scss
@@ -36,7 +36,8 @@
     grid-area: video;
 
     .videoAreaMargin {
-      margin: 0 0 16px;
+      margin-block: 0 16px;
+      margin-inline: 0;
     }
 
     .videoPlayer {
@@ -65,11 +66,13 @@
         .premiereIcon {
           float: left;
           font-size: 25px;
-          margin: 0 12px;
+          margin-block: 0;
+          margin-inline: 12px;
         }
 
         .premiereText {
-          margin: 0 12px;
+          margin-block: 0;
+          margin-inline: 12px;
           min-width: 200px;
 
           .premiereTextTimestamp {
@@ -83,7 +86,8 @@
 
   .watchVideo {
     grid-column: 1;
-    margin: 0 0 16px;
+    margin-block: 0 16px;
+    margin-inline: 0;
   }
 
   .infoArea {
@@ -106,7 +110,8 @@
   .watchVideoPlaylist,
   .watchVideoSidebar,
   .theatrePlaylist {
-    margin: 0 8px 16px;
+    margin-block: 0 16px;
+    margin-inline: 8px;
   }
 
   .watchVideoSidebar,
@@ -116,7 +121,7 @@
 
   .watchVideoPlaylist {
     :deep(.videoThumbnail) {
-      margin-top: auto;
+      margin-block-start: auto;
       margin-bottom: auto;
     }
     @media (max-width: 768px) {
@@ -126,10 +131,12 @@
 
   .watchVideoRecommendations,
   .theatreRecommendations {
-    margin: 0 0 16px;
+    margin-block: 0 16px;
+    margin-inline: 0;
 
     @media only screen and (min-width: 901px) {
-      margin: 0 8px 16px;
+      margin-block: 0 16px;
+      margin-inline: 8px;
     }
   }
 
@@ -149,7 +156,7 @@
 
   @media only screen and (min-width: 901px) {
     .infoArea {
-      scroll-margin-top: 76px;
+      scroll-margin-block-start: 76px;
     }
 
     .infoAreaSticky {

From 7509ef1f42c3adb217f7db6fa10f582bb2762495 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 28 Aug 2023 00:10:50 -0500
Subject: [PATCH 08/67] Continue replacing with margin-block and margin-inline

---
 .../components/ft-icon-button/ft-icon-button.scss         | 3 ++-
 src/renderer/components/ft-loader/ft-loader.css           | 3 ++-
 .../ft-profile-channel-list/ft-profile-channel-list.css   | 4 ++--
 .../components/ft-profile-edit/ft-profile-edit.css        | 8 ++++----
 .../ft-profile-filter-channels-list.css                   | 4 ++--
 src/renderer/components/ft-prompt/ft-prompt.css           | 3 ++-
 .../components/ft-search-filters/ft-search-filters.css    | 3 ++-
 .../ft-settings-section/ft-settings-section.scss          | 3 ++-
 src/renderer/components/ft-slider/ft-slider.css           | 5 +++--
 .../components/player-settings/player-settings.scss       | 3 ++-
 src/renderer/components/side-nav/side-nav.css             | 3 ++-
 .../subscriptions-tab-ui/subscriptions-tab-ui.css         | 4 ++--
 src/renderer/views/About/About.scss                       | 7 ++++---
 src/renderer/views/History/History.css                    | 4 ++--
 src/renderer/views/Popular/Popular.css                    | 4 ++--
 src/renderer/views/ProfileSettings/ProfileSettings.css    | 8 ++++----
 src/renderer/views/Search/Search.css                      | 4 ++--
 src/renderer/views/Settings/Settings.css                  | 3 ++-
 .../views/SubscribedChannels/SubscribedChannels.css       | 4 ++--
 src/renderer/views/Subscriptions/Subscriptions.css        | 4 ++--
 src/renderer/views/Trending/Trending.css                  | 4 ++--
 src/renderer/views/UserPlaylists/UserPlaylists.css        | 4 ++--
 22 files changed, 51 insertions(+), 41 deletions(-)

diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.scss b/src/renderer/components/ft-icon-button/ft-icon-button.scss
index 823575a3f1079..5364ccfc0a63e 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.scss
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss
@@ -134,7 +134,8 @@
 
   .listItemDivider {
     border-top: 1px solid var(--tertiary-text-color);
-    margin: 1px auto;
+    margin-block: 1px;
+    margin-inline: auto;
     // Too "visible" with current color
     opacity: 0.5;
     width: 95%;
diff --git a/src/renderer/components/ft-loader/ft-loader.css b/src/renderer/components/ft-loader/ft-loader.css
index 9216fc6e7781a..bdd0a20f2d4fb 100644
--- a/src/renderer/components/ft-loader/ft-loader.css
+++ b/src/renderer/components/ft-loader/ft-loader.css
@@ -39,7 +39,8 @@
     width: 40px;
     height: 40px;
     position: relative;
-    margin: 100px auto;
+    margin-block: 100px;
+    margin-inline: auto;
 }
 
 .double-bounce1,
diff --git a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.css b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.css
index ba8f5fc06c845..4beaf2f6b792f 100644
--- a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.css
+++ b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.css
@@ -1,5 +1,5 @@
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 15px;
+  margin-block: 0 15px;
+  margin-inline: auto;
 }
diff --git a/src/renderer/components/ft-profile-edit/ft-profile-edit.css b/src/renderer/components/ft-profile-edit/ft-profile-edit.css
index aefd0f7298e80..8e9c5c4952f33 100644
--- a/src/renderer/components/ft-profile-edit/ft-profile-edit.css
+++ b/src/renderer/components/ft-profile-edit/ft-profile-edit.css
@@ -1,7 +1,7 @@
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 15px;
+  margin-block: 0 15px;
+  margin-inline: auto;
 }
 
 .message {
@@ -18,8 +18,8 @@
 
 .colorOptions {
   max-width: 1000px;
-  margin: 0 auto;
-  margin-bottom: 30px;
+  margin-block: 0 30px;
+  margin-inline: auto;
 }
 
 .colorOption {
diff --git a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.css b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.css
index 7243d3db9ed77..8a902e94724c8 100644
--- a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.css
+++ b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.css
@@ -1,7 +1,7 @@
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 30px;
+  margin-block: 0 30px;
+  margin-inline: auto;
 }
 
 .selected {
diff --git a/src/renderer/components/ft-prompt/ft-prompt.css b/src/renderer/components/ft-prompt/ft-prompt.css
index 87e71c4fcf410..a8ca5159dbff5 100644
--- a/src/renderer/components/ft-prompt/ft-prompt.css
+++ b/src/renderer/components/ft-prompt/ft-prompt.css
@@ -15,7 +15,8 @@
 
 .promptCard.autosize {
   box-sizing: border-box;
-  margin: 0 auto;
+  margin-block: 0;
+  margin-inline: auto;
   max-width: 95%;
 }
 
diff --git a/src/renderer/components/ft-search-filters/ft-search-filters.css b/src/renderer/components/ft-search-filters/ft-search-filters.css
index 4066da7b650e6..26ff71793938e 100644
--- a/src/renderer/components/ft-search-filters/ft-search-filters.css
+++ b/src/renderer/components/ft-search-filters/ft-search-filters.css
@@ -24,7 +24,8 @@
 
 .radioFlexBox {
   max-width: 1000px;
-  margin: 0 auto;
+  margin-block: 0;
+  margin-inline: auto;
 }
 
 @media only screen and (max-width: 600px) {
diff --git a/src/renderer/components/ft-settings-section/ft-settings-section.scss b/src/renderer/components/ft-settings-section/ft-settings-section.scss
index 51c0ea01265b5..b82b0b1849126 100644
--- a/src/renderer/components/ft-settings-section/ft-settings-section.scss
+++ b/src/renderer/components/ft-settings-section/ft-settings-section.scss
@@ -1,6 +1,7 @@
 .settingsSection {
   background-color: var(--card-bg-color);
-  margin: 0 auto;
+  margin-block: 0;
+  margin-inline: auto;
   width: 85%;
 
   @media only screen and (max-width: 800px) {
diff --git a/src/renderer/components/ft-slider/ft-slider.css b/src/renderer/components/ft-slider/ft-slider.css
index 3b79dec56ceb9..7310cb6bc24b7 100644
--- a/src/renderer/components/ft-slider/ft-slider.css
+++ b/src/renderer/components/ft-slider/ft-slider.css
@@ -164,7 +164,7 @@
 .pure-material-slider > input:disabled::-moz-range-progress {
   background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.87);
 }
-
+O
 .pure-material-slider > input:disabled::-moz-range-thumb {
   background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0));
   box-shadow: 0 0 0 1px rgb(var(--pure-material-surface-rgb, 255, 255, 255)) !important;
@@ -205,7 +205,8 @@
 /* MS | Thumb */
 .pure-material-slider > input::-ms-thumb {
   appearance: none;
-  margin: 0 17px;
+  margin-block: 0;
+  margin-inline: 17px;
   border: none;
   border-radius: 50%;
   height: 2px;
diff --git a/src/renderer/components/player-settings/player-settings.scss b/src/renderer/components/player-settings/player-settings.scss
index 4e3f3bbe4d3be..19bfa9b25f8e9 100644
--- a/src/renderer/components/player-settings/player-settings.scss
+++ b/src/renderer/components/player-settings/player-settings.scss
@@ -5,7 +5,8 @@
 .screenshotFolderContainer {
   align-items: center;
   column-gap: 1rem;
-  margin: 0 auto;
+  margin-block: 0;
+  margin-inline: auto;
   width: 95%;
 
   .screenshotFolderLabel,
diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index b579ff3f9a702..2a3866479ea86 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@@ -158,7 +158,8 @@
   position: static;
   display: block;
   float: none;
-  margin: 0 auto;
+  margin-block: 0;
+  margin-inline: auto;
   top: 0px;
   -ms-transform: none;
   transform: none;
diff --git a/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css b/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css
index 8c2f61968d9a0..af02a9394a043 100644
--- a/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css
+++ b/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css
@@ -1,7 +1,7 @@
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 60px;
+  margin-block: 0 60px;
+  margin-inline: auto;
 }
 
 .message {
diff --git a/src/renderer/views/About/About.scss b/src/renderer/views/About/About.scss
index 5d683607044e9..41592fbf7b997 100644
--- a/src/renderer/views/About/About.scss
+++ b/src/renderer/views/About/About.scss
@@ -1,6 +1,6 @@
 .card {
-  margin: 0 auto;
-  margin-bottom: 60px;
+  margin-block: 0 60px;
+  margin-inline: auto;
   width: 85%;
 
   @media only screen and (max-width: 680px) {
@@ -25,7 +25,8 @@
   display: grid;
   grid-gap: 16px;
   grid-template-columns: 1fr 1fr;
-  margin: 80px auto;
+  margin-block: 80;
+  margin-inline: auto;
   max-width: 860px;
 
   @media only screen and (max-width: 650px) {
diff --git a/src/renderer/views/History/History.css b/src/renderer/views/History/History.css
index b6db9095ce937..924a994f96e38 100644
--- a/src/renderer/views/History/History.css
+++ b/src/renderer/views/History/History.css
@@ -1,7 +1,7 @@
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 60px;
+  margin-block: 0 60px;
+  margin-inline: auto;
 }
 
 .message {
diff --git a/src/renderer/views/Popular/Popular.css b/src/renderer/views/Popular/Popular.css
index a08e05caeaca8..f9dd142c3b68d 100644
--- a/src/renderer/views/Popular/Popular.css
+++ b/src/renderer/views/Popular/Popular.css
@@ -1,7 +1,7 @@
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 60px;
+  margin-block: 0 60px;
+  margin-inline: auto;
 }
 
 .floatingTopButton {
diff --git a/src/renderer/views/ProfileSettings/ProfileSettings.css b/src/renderer/views/ProfileSettings/ProfileSettings.css
index 670ae2a98f8da..ae0b80968567b 100644
--- a/src/renderer/views/ProfileSettings/ProfileSettings.css
+++ b/src/renderer/views/ProfileSettings/ProfileSettings.css
@@ -1,7 +1,7 @@
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 60px;
+  margin-block: 0 60px;
+  margin-inline: auto;
 }
 
 .message {
@@ -10,8 +10,8 @@
 
 .profileList {
   max-width: 1000px;
-  margin: 0 auto;
-  margin-bottom: 10px;
+  margin-block: 0 10px;
+  margin-inline: auto;
 }
 
 @media only screen and (max-width: 680px) {
diff --git a/src/renderer/views/Search/Search.css b/src/renderer/views/Search/Search.css
index be15d509ee426..5977d1bd4ea3d 100644
--- a/src/renderer/views/Search/Search.css
+++ b/src/renderer/views/Search/Search.css
@@ -14,8 +14,8 @@
 
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 60px;
+  margin-block: 0 60px;
+  margin-inline: auto;
 }
 
 @media only screen and (max-width: 680px) {
diff --git a/src/renderer/views/Settings/Settings.css b/src/renderer/views/Settings/Settings.css
index c308b9a836525..ef60230187c1c 100644
--- a/src/renderer/views/Settings/Settings.css
+++ b/src/renderer/views/Settings/Settings.css
@@ -1,7 +1,8 @@
 hr {
   height: 2px;
   width: 85%;
-  margin: 0 auto;
+  margin-block: 0;
+  margin-inline: auto;
   border: 0;
   background-color: var(--scrollbar-color-hover);
 }
diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.css b/src/renderer/views/SubscribedChannels/SubscribedChannels.css
index df83ce5e49827..aefeadce2bf30 100644
--- a/src/renderer/views/SubscribedChannels/SubscribedChannels.css
+++ b/src/renderer/views/SubscribedChannels/SubscribedChannels.css
@@ -1,7 +1,7 @@
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 60px;
+  margin-block: 0 60px;
+  margin-inline: auto;
 }
 
 .message {
diff --git a/src/renderer/views/Subscriptions/Subscriptions.css b/src/renderer/views/Subscriptions/Subscriptions.css
index e1c94ae4f3c66..cad7e62dc9208 100644
--- a/src/renderer/views/Subscriptions/Subscriptions.css
+++ b/src/renderer/views/Subscriptions/Subscriptions.css
@@ -1,7 +1,7 @@
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 60px;
+  margin-block: 0 60px;
+  margin-inline: auto;
 }
 
 .message {
diff --git a/src/renderer/views/Trending/Trending.css b/src/renderer/views/Trending/Trending.css
index a3196344d3102..814e8749f94bf 100644
--- a/src/renderer/views/Trending/Trending.css
+++ b/src/renderer/views/Trending/Trending.css
@@ -1,7 +1,7 @@
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 60px;
+  margin-block: 0 60px;
+  margin-inline: auto;
 }
 
 .floatingTopButton {
diff --git a/src/renderer/views/UserPlaylists/UserPlaylists.css b/src/renderer/views/UserPlaylists/UserPlaylists.css
index b6db9095ce937..924a994f96e38 100644
--- a/src/renderer/views/UserPlaylists/UserPlaylists.css
+++ b/src/renderer/views/UserPlaylists/UserPlaylists.css
@@ -1,7 +1,7 @@
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 60px;
+  margin-block: 0 60px;
+  margin-inline: auto;
 }
 
 .message {

From 0b06cb117eb7fb8ddeb8f5b8906e9f1f5fa2e127 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 28 Aug 2023 00:25:14 -0500
Subject: [PATCH 09/67] Replace left and right with inset-inline-start and
 inset-inline-end

This commit also changes border-left to border-inline-start, and border-right to border-inline-end.
---
 src/renderer/components/ft-button/ft-button.css  |  2 +-
 .../ft-channel-bubble/ft-channel-bubble.css      |  2 +-
 .../ft-community-poll/ft-community-poll.css      |  4 ++--
 .../ft-icon-button/ft-icon-button.scss           |  4 ++--
 src/renderer/components/ft-input/ft-input.css    |  7 ++++---
 src/renderer/components/ft-loader/ft-loader.css  |  2 +-
 .../ft-notification-banner.css                   |  2 +-
 .../ft-profile-selector/ft-profile-selector.css  |  6 +++---
 .../ft-progress-bar/ft-progress-bar.css          |  2 +-
 src/renderer/components/ft-prompt/ft-prompt.css  |  4 ++--
 .../ft-radio-button/ft-radio-button.css          |  6 +++---
 .../ft-search-filters/ft-search-filters.css      |  2 +-
 src/renderer/components/ft-select/ft-select.css  | 16 ++++++++--------
 .../ft-settings-section/ft-settings-section.scss |  8 ++++----
 src/renderer/components/ft-toast/ft-toast.css    |  2 +-
 .../ft-toggle-switch/ft-toggle-switch.scss       |  6 +++---
 .../components/ft-tooltip/ft-tooltip.css         | 10 +++++-----
 .../side-nav-more-options.css                    |  2 +-
 src/renderer/components/side-nav/side-nav.css    | 10 +++++-----
 .../subscriptions-tab-ui.css                     |  2 +-
 src/renderer/components/top-nav/top-nav.scss     | 16 ++++++++--------
 .../watch-video-comments.css                     |  6 +++---
 .../watch-video-info/watch-video-info.scss       |  4 ++--
 .../watch-video-live-chat.css                    |  2 +-
 src/renderer/views/Channel/Channel.css           |  2 +-
 src/renderer/views/Popular/Popular.css           |  2 +-
 src/renderer/views/Trending/Trending.css         |  2 +-
 src/renderer/views/Watch/Watch.scss              |  2 +-
 28 files changed, 68 insertions(+), 67 deletions(-)

diff --git a/src/renderer/components/ft-button/ft-button.css b/src/renderer/components/ft-button/ft-button.css
index 2a00cab980d9f..577dfd1bd3f58 100644
--- a/src/renderer/components/ft-button/ft-button.css
+++ b/src/renderer/components/ft-button/ft-button.css
@@ -38,7 +38,7 @@
   width: 100%;
   height: 100%;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   pointer-events: none;
   background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
   background-repeat: no-repeat;
diff --git a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
index 940f3a266c609..782f6d77f7f19 100644
--- a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
+++ b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
@@ -40,7 +40,7 @@
   font-size: 25px;
   position: absolute;
   top: 12px;
-  left: 12px;
+  inset-inline-start: 12px;
 }
 
 .channelName {
diff --git a/src/renderer/components/ft-community-poll/ft-community-poll.css b/src/renderer/components/ft-community-poll/ft-community-poll.css
index 39264321d030e..91e9e5e868592 100644
--- a/src/renderer/components/ft-community-poll/ft-community-poll.css
+++ b/src/renderer/components/ft-community-poll/ft-community-poll.css
@@ -11,7 +11,7 @@
   display: block;
   float: left;
   height: 10px;
-  left: 5px;
+  inset-inline-start: 5px;
   position: relative;
   top: 8px;
   width: 10px;
@@ -22,7 +22,7 @@
   background-color: black;
   float: left;
   height: 6px;
-  left: 2px;
+  inset-inline-start: 2px;
   top: 2px;
   position: relative;
   width: 6px;
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.scss b/src/renderer/components/ft-icon-button/ft-icon-button.scss
index 5364ccfc0a63e..c8d9561da542c 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.scss
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss
@@ -91,11 +91,11 @@
   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 {
diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css
index 91ed4f9423bee..fc53c0f7cd1a7 100644
--- a/src/renderer/components/ft-input/ft-input.css
+++ b/src/renderer/components/ft-input/ft-input.css
@@ -39,7 +39,7 @@
 .clearInputTextButton {
   position: absolute;
   top: 5px;
-  left: 0;
+  inset-inline-start: 0;
   /* To be higher than `.inputWrapper` */
   z-index: 1;
   margin-block: 0;
@@ -128,7 +128,7 @@
   margin-inline: 3px;
   padding: 10px;
   top: -8px;
-  right: 0;
+  inset-inline-end: 0;
   border-radius: 100%;
   color: var(--primary-text-color);
   /* this should look disabled by default */
@@ -196,7 +196,8 @@
 
 .list li {
   display: block;
-  padding: 0 15px;
+  padding-block: 0;
+  padding-inline: 15px;
   line-height: 2rem;
 }
 
diff --git a/src/renderer/components/ft-loader/ft-loader.css b/src/renderer/components/ft-loader/ft-loader.css
index bdd0a20f2d4fb..e4c5288466c12 100644
--- a/src/renderer/components/ft-loader/ft-loader.css
+++ b/src/renderer/components/ft-loader/ft-loader.css
@@ -51,7 +51,7 @@
     opacity: 0.6;
     position: absolute;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     background-color: var(--primary-color);
 
     -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
diff --git a/src/renderer/components/ft-notification-banner/ft-notification-banner.css b/src/renderer/components/ft-notification-banner/ft-notification-banner.css
index a9ca9614b0a44..361d379e75c8f 100644
--- a/src/renderer/components/ft-notification-banner/ft-notification-banner.css
+++ b/src/renderer/components/ft-notification-banner/ft-notification-banner.css
@@ -26,6 +26,6 @@
 .bannerIcon {
   position: absolute;
   top: 35%;
-  right: 10px;
+  inset-inline-end: 10px;
   cursor: pointer;
 }
diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.css b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
index eb2f7e4281d84..ef3faba06d4cd 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.css
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
@@ -25,7 +25,7 @@
   display: inline;
   position: absolute;
   top: 60px;
-  right: 10px;
+  inset-inline-end: 10px;
   min-width: 250px;
   height: 400px;
   padding: 5px;
@@ -72,12 +72,12 @@
 .profileListTitle {
   position: absolute;
   margin: 0;
-  left: 10px;
+  inset-inline-start: 10px;
 }
 
 .profileSettings {
   float: right;
   position: absolute;
   top: 10px;
-  right: 5px;
+  inset-inline-end: 5px;
 }
diff --git a/src/renderer/components/ft-progress-bar/ft-progress-bar.css b/src/renderer/components/ft-progress-bar/ft-progress-bar.css
index 43816bd2f3671..a3eca41c36349 100644
--- a/src/renderer/components/ft-progress-bar/ft-progress-bar.css
+++ b/src/renderer/components/ft-progress-bar/ft-progress-bar.css
@@ -2,7 +2,7 @@
   position: fixed;
   height: 3px;
   bottom: 0px;
-  left: 0px;
+  inset-inline-start: 0px;
   background-color: var(--primary-color);
   z-index: 1;
   transition: width 0.5s;
diff --git a/src/renderer/components/ft-prompt/ft-prompt.css b/src/renderer/components/ft-prompt/ft-prompt.css
index a8ca5159dbff5..c4f194662518d 100644
--- a/src/renderer/components/ft-prompt/ft-prompt.css
+++ b/src/renderer/components/ft-prompt/ft-prompt.css
@@ -1,7 +1,7 @@
 .prompt {
   position: fixed;
   top: 0px;
-  left: 0px;
+  inset-inline-start: 0px;
   width: 100vw;
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.7);
@@ -24,7 +24,7 @@
   width: 95%;
   margin: 0;
   position: absolute;
-  left: 2.5%;
+  inset-inline-start: 2.5%;
   box-sizing: border-box;
 }
 
diff --git a/src/renderer/components/ft-radio-button/ft-radio-button.css b/src/renderer/components/ft-radio-button/ft-radio-button.css
index 3a00f66596953..3b73b503f7777 100644
--- a/src/renderer/components/ft-radio-button/ft-radio-button.css
+++ b/src/renderer/components/ft-radio-button/ft-radio-button.css
@@ -32,7 +32,7 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
   color: var(--primary-color);
   position: absolute;
   top: 50%;
-  left: 0;
+  inset-inline-start: 0;
   width: 14px;
   height: 14px;
   margin-block-start: -9px;
@@ -47,7 +47,7 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
   background-color: var(--primary-color);
   position: absolute;
   top: 50%;
-  left: 4px;
+  inset-inline-start: 4px;
   width: 10px;
   height: 10px;
   margin-block-start: -5px;
@@ -65,7 +65,7 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
 .pure-checkbox input[type="checkbox"] + label:after, .pure-radiobutton input[type="checkbox"] + label:after {
   background-color: transparent;
   top: 50%;
-  left: 4px;
+  inset-inline-start: 4px;
   width: 8px;
   height: 3px;
   margin-block-start: -4px;
diff --git a/src/renderer/components/ft-search-filters/ft-search-filters.css b/src/renderer/components/ft-search-filters/ft-search-filters.css
index 26ff71793938e..0159e28feffff 100644
--- a/src/renderer/components/ft-search-filters/ft-search-filters.css
+++ b/src/renderer/components/ft-search-filters/ft-search-filters.css
@@ -30,6 +30,6 @@
 
 @media only screen and (max-width: 600px) {
   .searchRadio {
-    border-right: 0;
+    border-inline-end: 0;
   }
 }
diff --git a/src/renderer/components/ft-select/ft-select.css b/src/renderer/components/ft-select/ft-select.css
index 924e6e934c3d3..702ed402bb875 100644
--- a/src/renderer/components/ft-select/ft-select.css
+++ b/src/renderer/components/ft-select/ft-select.css
@@ -68,12 +68,12 @@
 .iconSelect {
   position: absolute;
   top: 10px;
-  right: 15px;
+  inset-inline-end: 15px;
   /* Styling the down arrow */
   padding: 0;
   content: '';
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
+  border-inline-start: 6px solid transparent;
+  border-inline-end: 6px solid transparent;
   pointer-events: none;
   color: var(--tertiary-text-color);
 }
@@ -81,7 +81,7 @@
 .selectTooltip {
   position: absolute;
   top: -20px;
-  right: 17px;
+  inset-inline-end: 17px;
 }
 
 
@@ -90,7 +90,7 @@
   font-size: 18px;
   font-weight: normal;
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   top: 10px;
   transition: 0.2s ease all;
   color: var(--tertiary-text-color);
@@ -122,11 +122,11 @@
 }
 
 .select-bar:before {
-  left: 50%;
+  inset-inline-start: 50%;
 }
 
 .select-bar:after {
-  right: 50%;
+  inset-inline-end: 50%;
 }
 
 /* active state */
@@ -140,7 +140,7 @@
   height: 60%;
   width: 100px;
   top: 25%;
-  left: 0;
+  inset-inline-start: 0;
   pointer-events: none;
   opacity: 0.5;
 }
diff --git a/src/renderer/components/ft-settings-section/ft-settings-section.scss b/src/renderer/components/ft-settings-section/ft-settings-section.scss
index b82b0b1849126..b53e979f0022e 100644
--- a/src/renderer/components/ft-settings-section/ft-settings-section.scss
+++ b/src/renderer/components/ft-settings-section/ft-settings-section.scss
@@ -89,12 +89,12 @@
   .settingsSection {
     > div {
       :deep(.text.bottom) {
-        left: -85px;
+        inset-inline-start: -85px;
       }
     }
 
     :deep(.switch-ctn.containsTooltip) {
-      left: -10px;
+      inset-inline-start: -10px;
       margin-inline-end: 5px;
       padding-block: 0;
       padding-inline: 10px;
@@ -104,13 +104,13 @@
       > :deep(.tooltip) {
         display: inline-block;
         position: absolute;
-        right: -25px;
+        inset-inline-end: -25px;
         top: 12px;
       }
     }
 
     .settingsFlexStart460px :deep(.tooltip) {
-      right: 0;
+      inset-inline-end: 0;
       top: -2px;
     }
 
diff --git a/src/renderer/components/ft-toast/ft-toast.css b/src/renderer/components/ft-toast/ft-toast.css
index 686b9c32f2afb..ca6df59774fae 100644
--- a/src/renderer/components/ft-toast/ft-toast.css
+++ b/src/renderer/components/ft-toast/ft-toast.css
@@ -1,6 +1,6 @@
 .toast-holder {
   position: fixed;
-  left: 50vw;
+  inset-inline-start: 50vw;
   transform: translate(-50%, 0);
   bottom: 50px;
   z-index: 1;
diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
index a522f3709bf9d..51dfdb9664ed8 100644
--- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
+++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
@@ -13,7 +13,7 @@
 .switch-input {
   appearance: none;
   height: 20px;
-  left: -3px;
+  inset-inline-start: -3px;
   position: absolute;
   top: calc(50% - 3px);
   transform: translate(0, -50%);
@@ -44,7 +44,7 @@
     background-color: #9e9e9e;
     border-radius: 8px;
     height: 14px;
-    left: 1px;
+    inset-inline-start: 1px;
     width: 34px;
 
     .switch-input:checked + & {
@@ -61,7 +61,7 @@
     border-radius: 50%;
     box-shadow: 0 3px 1px -2px rgb(0 0 0 / 14%), 0 2px 2px 0 rgb(0 0 0 / 9.8%), 0 1px 5px 0 rgb(0 0 0 / 8.4%);
     height: 20px;
-    left: 0;
+    inset-inline-start: 0;
     width: 20px;
 
     .switch-input:checked + & {
diff --git a/src/renderer/components/ft-tooltip/ft-tooltip.css b/src/renderer/components/ft-tooltip/ft-tooltip.css
index 9f6fffc46bcc3..8734408ea1c0a 100644
--- a/src/renderer/components/ft-tooltip/ft-tooltip.css
+++ b/src/renderer/components/ft-tooltip/ft-tooltip.css
@@ -55,7 +55,7 @@
 .text.bottom {
   margin-block-start: 1em;
   top: 100%;
-  left: 50%;
+  inset-inline-start: 50%;
   -webkit-transform: translate(-50%, -1em);
   transform: translate(-50%, -1em);
 }
@@ -63,21 +63,21 @@
 .text.bottom-left {
   margin-block-start: 1em;
   top: 100%;
-  left: -100px;
+  inset-inline-start: -100px;
   -webkit-transform: translate(-50%, -1em);
   transform: translate(-50%, -1em);
 }
 
 .text.left {
   margin-inline-end:1em;
-  right: 100%;
+  inset-inline-end: 100%;
   top: 50%;
   -webkit-transform: translate(1em, -50%);
   transform: translate(1em, -50%);
 }
 
 .text.right {
-  left: 100%;
+  inset-inline-start: 100%;
   margin-inline-start: 1em;
   top: 50%;
   -webkit-transform: translate(-1em, -50%);
@@ -86,7 +86,7 @@
 
 .text.top {
   bottom: 100%;
-  left: 50%;
+  inset-inline-start: 50%;
   margin-bottom: 1em;
   -webkit-transform: translate(-50%, 1em);
   transform: translate(-50%, 1em);
diff --git a/src/renderer/components/side-nav-more-options/side-nav-more-options.css b/src/renderer/components/side-nav-more-options/side-nav-more-options.css
index f1abdaede16e4..9ecd187a5fb7c 100644
--- a/src/renderer/components/side-nav-more-options/side-nav-more-options.css
+++ b/src/renderer/components/side-nav-more-options/side-nav-more-options.css
@@ -61,7 +61,7 @@
     margin-inline-start: 0px;
     width: 100%;
     text-align: center;
-    left: 0px;
+    inset-inline-start: 0px;
     font-size: 11px;
   }
 
diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index 2a3866479ea86..c4d5858482455 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@@ -4,7 +4,7 @@
   width: 200px;
   overflow-x: hidden;
   position: sticky;
-  left: 0;
+  inset-inline-start: 0;
   top: 60px;
   z-index: 3;
   box-shadow: 1px -1px 1px -1px var(--primary-shadow-color);
@@ -115,7 +115,7 @@
 .refreshIcon {
   position: absolute;
   top: 20px;
-  right: 20px;
+  inset-inline-end: 20px;
 }
 
 .closed .refreshIcon {
@@ -142,7 +142,7 @@
   margin-inline-start: 0px;
   width: 100%;
   text-align: center;
-  left: 0px;
+  inset-inline-start: 0px;
   font-size: 11px;
   margin-block-end: 0em;
 }
@@ -178,7 +178,7 @@
 
   .sideNav {
     position: fixed;
-    left: 0;
+    inset-inline-start: 0;
     bottom: 0;
 
     display: flex;
@@ -211,7 +211,7 @@
     margin-inline-start: 0px;
     width: 100%;
     text-align: center;
-    left: 0px;
+    inset-inline-start: 0px;
     font-size: 11px;
   }
 
diff --git a/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css b/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css
index af02a9394a043..2641a338f6ba2 100644
--- a/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css
+++ b/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css
@@ -11,7 +11,7 @@
 .floatingTopButton {
   position: fixed;
   top: 70px;
-  right: 10px;
+  inset-inline-end: 10px;
 }
 
 @media only screen and (max-width: 350px) {
diff --git a/src/renderer/components/top-nav/top-nav.scss b/src/renderer/components/top-nav/top-nav.scss
index d780c752e5f27..e15b86a6612ad 100644
--- a/src/renderer/components/top-nav/top-nav.scss
+++ b/src/renderer/components/top-nav/top-nav.scss
@@ -14,10 +14,10 @@
   box-shadow: 0 2px 1px 0 var(--primary-shadow-color);
   display: flex;
   height: 60px;
-  left: 0;
+  inset-inline-start: 0;
   line-height: 60px;
   position: sticky;
-  right: 0;
+  inset-inline-end: 0;
   top: 0;
   width: 100%;
   z-index: 4;
@@ -182,9 +182,9 @@
 
     @media only screen and (max-width: 680px) {
       background-color: var(--side-nav-color);
-      left: 0;
+      inset-inline-start: 0;
       position: fixed;
-      right: 0;
+      inset-inline-end: 0;
       top: 60px;
 
       @include top-nav-is-colored {
@@ -198,18 +198,18 @@
   }
 
   .searchFilters {
-    left: 0;
+    inset-inline-start: 0;
     margin-block: 10px 20px;
     margin-inline: 220px 20px;
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     transition: margin 150ms ease-in-out;
 
     @media only screen and (max-width: 680px) {
-      left: 0;
+      inset-inline-start: 0;
       margin-block: 95px 0;
       margin-inline: 10px;
-      right: 0;
+      inset-inline-end: 0;
     }
   }
 }
diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.css b/src/renderer/components/watch-video-comments/watch-video-comments.css
index 2d9d58f7e1a6b..81e1d55fae934 100644
--- a/src/renderer/components/watch-video-comments/watch-video-comments.css
+++ b/src/renderer/components/watch-video-comments/watch-video-comments.css
@@ -115,7 +115,7 @@
 
 .commentHeartBadgeImg {
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   width: 15px;
   height: 15px;
   border-radius: 50%;
@@ -124,7 +124,7 @@
 
 .commentHeartBadgeWhite {
   position: absolute;
-  left: 9px;
+  inset-inline-start: 9px;
   bottom: 1px;
   width: 11px;
   height: 11px;
@@ -134,7 +134,7 @@
 .commentHeartBadgeRed {
   position: absolute;
   color: var(--red-500);
-  left: 10px;
+  inset-inline-start: 10px;
   bottom: 2px;
   width: 9px;
   height: 9px;
diff --git a/src/renderer/components/watch-video-info/watch-video-info.scss b/src/renderer/components/watch-video-info/watch-video-info.scss
index b5a2cef21e060..6c72f1874c981 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.scss
+++ b/src/renderer/components/watch-video-info/watch-video-info.scss
@@ -112,8 +112,8 @@
     justify-content: flex-start;
 
     :deep(.iconDropdown) {
-      left: calc(50% - 20px);
-      right: auto;
+      inset-inline-start: calc(50% - 20px);
+      inset-inline-end: auto;
     }
   }
 }
diff --git a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
index f5d34be043236..423ad538f5720 100644
--- a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
+++ b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
@@ -212,7 +212,7 @@
   width: 35px;
   height: 35px;
   position: absolute;
-  left: 45%;
+  inset-inline-start: 45%;
   bottom: 20px;
   cursor: pointer;
   border-radius: 200px;
diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css
index 5f6305125770a..11ee2d73837e5 100644
--- a/src/renderer/views/Channel/Channel.css
+++ b/src/renderer/views/Channel/Channel.css
@@ -62,7 +62,7 @@
 .channelSubCount {
   color: var(--tertiary-text-color);
   top: 50px;
-  left: 120px;
+  inset-inline-start: 120px;
 }
 
 .channelInfoActionsContainer {
diff --git a/src/renderer/views/Popular/Popular.css b/src/renderer/views/Popular/Popular.css
index f9dd142c3b68d..a4d64f3a56658 100644
--- a/src/renderer/views/Popular/Popular.css
+++ b/src/renderer/views/Popular/Popular.css
@@ -7,7 +7,7 @@
 .floatingTopButton {
   position: fixed;
   top: 70px;
-  right: 10px;
+  inset-inline-end: 10px;
 }
 
 @media only screen and (max-width: 350px) {
diff --git a/src/renderer/views/Trending/Trending.css b/src/renderer/views/Trending/Trending.css
index 814e8749f94bf..f718ccb6415e4 100644
--- a/src/renderer/views/Trending/Trending.css
+++ b/src/renderer/views/Trending/Trending.css
@@ -7,7 +7,7 @@
 .floatingTopButton {
   position: fixed;
   top: 70px;
-  right: 10px;
+  inset-inline-end: 10px;
 }
 
 .trendingInfoTabs {
diff --git a/src/renderer/views/Watch/Watch.scss b/src/renderer/views/Watch/Watch.scss
index 0d27a0d298e09..2d5e7a6830519 100644
--- a/src/renderer/views/Watch/Watch.scss
+++ b/src/renderer/views/Watch/Watch.scss
@@ -58,7 +58,7 @@
         color: #fff;
         display: flex;
         height: 60px;
-        left: 12px;
+        inset-inline-start: 12px;
         padding-block: 0;
         padding-inline: 12px;
         position: absolute;

From d73c9ee1191cec420eddf73bedfc1d49f6c24382 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 28 Aug 2023 00:34:02 -0500
Subject: [PATCH 10/67] Replace margin-bottom, top, and bottom with
 margin-block-end, inset-block-start, and inset-block-end

This commit also replaces border-top and border-bottom with border-block-start and border-block-end.
---
 src/renderer/App.css                             |  2 +-
 src/renderer/components/ft-button/ft-button.css  |  2 +-
 .../ft-channel-bubble/ft-channel-bubble.css      |  4 ++--
 .../ft-community-poll/ft-community-poll.css      |  4 ++--
 .../ft-community-post/ft-community-post.scss     |  4 ++--
 .../ft-icon-button/ft-icon-button.scss           |  6 +++---
 src/renderer/components/ft-input/ft-input.css    |  8 ++++----
 src/renderer/components/ft-loader/ft-loader.css  |  2 +-
 .../ft-notification-banner.css                   |  2 +-
 .../ft-profile-edit/ft-profile-edit.css          |  2 +-
 .../ft-profile-selector/ft-profile-selector.css  |  6 +++---
 .../ft-progress-bar/ft-progress-bar.css          |  2 +-
 src/renderer/components/ft-prompt/ft-prompt.css  |  2 +-
 .../ft-radio-button/ft-radio-button.css          | 10 +++++-----
 src/renderer/components/ft-select/ft-select.css  | 12 ++++++------
 .../ft-settings-section/ft-settings-section.scss |  6 +++---
 src/renderer/components/ft-slider/ft-slider.css  |  4 ++--
 .../ft-subscribe-button/ft-subscribe-button.css  |  2 +-
 src/renderer/components/ft-toast/ft-toast.css    |  2 +-
 .../ft-toggle-switch/ft-toggle-switch.scss       |  4 ++--
 .../components/ft-tooltip/ft-tooltip.css         | 12 ++++++------
 .../ft-video-player/ft-video-player.css          |  2 +-
 .../components/playlist-info/playlist-info.scss  |  2 +-
 .../side-nav-more-options.css                    |  6 +++---
 src/renderer/components/side-nav/side-nav.css    | 16 ++++++++--------
 .../subscriptions-tab-ui.css                     |  2 +-
 src/renderer/components/top-nav/top-nav.scss     |  6 +++---
 .../watch-video-chapters.css                     |  2 +-
 .../watch-video-comments.css                     |  8 ++++----
 .../watch-video-info/watch-video-info.scss       |  4 ++--
 .../watch-video-live-chat.css                    | 14 +++++++-------
 .../watch-video-playlist.css                     |  8 ++++----
 src/renderer/scss-partials/_ft-list-item.scss    |  4 ++--
 src/renderer/views/Channel/Channel.css           |  8 ++++----
 src/renderer/views/Playlist/Playlist.css         |  6 +++---
 src/renderer/views/Popular/Popular.css           |  2 +-
 .../views/Subscriptions/Subscriptions.css        |  6 +++---
 src/renderer/views/Trending/Trending.css         |  8 ++++----
 src/renderer/views/Watch/Watch.scss              |  6 +++---
 39 files changed, 104 insertions(+), 104 deletions(-)

diff --git a/src/renderer/App.css b/src/renderer/App.css
index d520e4b73bde0..1c616d95969c1 100644
--- a/src/renderer/App.css
+++ b/src/renderer/App.css
@@ -59,6 +59,6 @@
 
   .flexBox {
     margin-block-start: 60px;
-    margin-bottom: -75px;
+    margin-block-end: -75px;
   }
 }
diff --git a/src/renderer/components/ft-button/ft-button.css b/src/renderer/components/ft-button/ft-button.css
index 577dfd1bd3f58..e37af8dbcbf35 100644
--- a/src/renderer/components/ft-button/ft-button.css
+++ b/src/renderer/components/ft-button/ft-button.css
@@ -37,7 +37,7 @@
   position: absolute;
   width: 100%;
   height: 100%;
-  top: 0;
+  inset-block-start: 0;
   inset-inline-start: 0;
   pointer-events: none;
   background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
diff --git a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
index 782f6d77f7f19..60db6abe77427 100644
--- a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
+++ b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
@@ -31,7 +31,7 @@
 
 .selected {
   position: absolute;
-  top: 10px;
+  inset-block-start: 10px;
   background-color: rgba(0, 0, 0, 0.5);
 }
 
@@ -39,7 +39,7 @@
   color: #EEEEEE;
   font-size: 25px;
   position: absolute;
-  top: 12px;
+  inset-block-start: 12px;
   inset-inline-start: 12px;
 }
 
diff --git a/src/renderer/components/ft-community-poll/ft-community-poll.css b/src/renderer/components/ft-community-poll/ft-community-poll.css
index 91e9e5e868592..df15842c15c54 100644
--- a/src/renderer/components/ft-community-poll/ft-community-poll.css
+++ b/src/renderer/components/ft-community-poll/ft-community-poll.css
@@ -13,7 +13,7 @@
   height: 10px;
   inset-inline-start: 5px;
   position: relative;
-  top: 8px;
+  inset-block-start: 8px;
   width: 10px;
 }
 
@@ -23,7 +23,7 @@
   float: left;
   height: 6px;
   inset-inline-start: 2px;
-  top: 2px;
+  inset-block-start: 2px;
   position: relative;
   width: 6px;
 }
diff --git a/src/renderer/components/ft-community-post/ft-community-post.scss b/src/renderer/components/ft-community-post/ft-community-post.scss
index af97a368cdb06..c5ed52d92ff7a 100644
--- a/src/renderer/components/ft-community-post/ft-community-post.scss
+++ b/src/renderer/components/ft-community-post/ft-community-post.scss
@@ -65,7 +65,7 @@
   .likeBar {
     border-radius: 4px;
     height: 8px;
-    margin-bottom: 4px;
+    margin-block-end: 4px;
   }
 
   .likeCount {
@@ -79,7 +79,7 @@
 
   .videoThumbnail {
     display: flex;
-    margin-bottom: auto;
+    margin-block-end: auto;
     margin-block-start: auto;
     position: relative;
     width: fit-content;
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.scss b/src/renderer/components/ft-icon-button/ft-icon-button.scss
index c8d9561da542c..91b448cb4ce80 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.scss
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss
@@ -99,11 +99,11 @@
   }
 
   &.top {
-    bottom: 45px;
+    inset-block-end 45px;
   }
 
   &.bottom {
-    top: 45px;
+    inset-block-start: 45px;
   }
 
   .list {
@@ -133,7 +133,7 @@
   }
 
   .listItemDivider {
-    border-top: 1px solid var(--tertiary-text-color);
+    border-block-start: 1px solid var(--tertiary-text-color);
     margin-block: 1px;
     margin-inline: auto;
     // Too "visible" with current color
diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css
index fc53c0f7cd1a7..e3c1dd438a7b1 100644
--- a/src/renderer/components/ft-input/ft-input.css
+++ b/src/renderer/components/ft-input/ft-input.css
@@ -38,7 +38,7 @@
 
 .clearInputTextButton {
   position: absolute;
-  top: 5px;
+  inset-block-start: 5px;
   inset-inline-start: 0;
   /* To be higher than `.inputWrapper` */
   z-index: 1;
@@ -69,7 +69,7 @@
 }
 
 .search .clearInputTextButton {
-  top: 12px;
+  inset-block-start: 12px;
 }
 
 .forceTextColor .clearInputTextButton {
@@ -88,7 +88,7 @@
   width: 100%;
   padding: 1rem;
   border: none;
-  margin-bottom: 10px;
+  margin-block-end: 10px;
   font-size: 16px;
   height: 45px;
   color: var(--secondary-text-color);
@@ -127,7 +127,7 @@
   margin-block: 0;
   margin-inline: 3px;
   padding: 10px;
-  top: -8px;
+  inset-block-start: -8px;
   inset-inline-end: 0;
   border-radius: 100%;
   color: var(--primary-text-color);
diff --git a/src/renderer/components/ft-loader/ft-loader.css b/src/renderer/components/ft-loader/ft-loader.css
index e4c5288466c12..538b43ee85acb 100644
--- a/src/renderer/components/ft-loader/ft-loader.css
+++ b/src/renderer/components/ft-loader/ft-loader.css
@@ -50,7 +50,7 @@
     border-radius: 50%;
     opacity: 0.6;
     position: absolute;
-    top: 0;
+    inset-block-start: 0;
     inset-inline-start: 0;
     background-color: var(--primary-color);
 
diff --git a/src/renderer/components/ft-notification-banner/ft-notification-banner.css b/src/renderer/components/ft-notification-banner/ft-notification-banner.css
index 361d379e75c8f..4bf8377664972 100644
--- a/src/renderer/components/ft-notification-banner/ft-notification-banner.css
+++ b/src/renderer/components/ft-notification-banner/ft-notification-banner.css
@@ -25,7 +25,7 @@
 
 .bannerIcon {
   position: absolute;
-  top: 35%;
+  inset-block-start: 35%;
   inset-inline-end: 10px;
   cursor: pointer;
 }
diff --git a/src/renderer/components/ft-profile-edit/ft-profile-edit.css b/src/renderer/components/ft-profile-edit/ft-profile-edit.css
index 8e9c5c4952f33..c72cf594982c9 100644
--- a/src/renderer/components/ft-profile-edit/ft-profile-edit.css
+++ b/src/renderer/components/ft-profile-edit/ft-profile-edit.css
@@ -13,7 +13,7 @@
 }
 
 .bottomMargin {
-  margin-bottom: 30px;
+  margin-block-end: 30px;
 }
 
 .colorOptions {
diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.css b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
index ef3faba06d4cd..620559aab434f 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.css
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
@@ -24,7 +24,7 @@
 .profileList {
   display: inline;
   position: absolute;
-  top: 60px;
+  inset-block-start: 60px;
   inset-inline-end: 10px;
   min-width: 250px;
   height: 400px;
@@ -58,7 +58,7 @@
 .profile .colorOption {
   float: left;
   position: relative;
-  bottom: 5px;
+  inset-block-end 5px;
   margin: 10px;
 }
 
@@ -78,6 +78,6 @@
 .profileSettings {
   float: right;
   position: absolute;
-  top: 10px;
+  inset-block-start: 10px;
   inset-inline-end: 5px;
 }
diff --git a/src/renderer/components/ft-progress-bar/ft-progress-bar.css b/src/renderer/components/ft-progress-bar/ft-progress-bar.css
index a3eca41c36349..acd8a5738cf27 100644
--- a/src/renderer/components/ft-progress-bar/ft-progress-bar.css
+++ b/src/renderer/components/ft-progress-bar/ft-progress-bar.css
@@ -1,7 +1,7 @@
 .progressBar {
   position: fixed;
   height: 3px;
-  bottom: 0px;
+  inset-block-end 0px;
   inset-inline-start: 0px;
   background-color: var(--primary-color);
   z-index: 1;
diff --git a/src/renderer/components/ft-prompt/ft-prompt.css b/src/renderer/components/ft-prompt/ft-prompt.css
index c4f194662518d..ed37a7f7636ff 100644
--- a/src/renderer/components/ft-prompt/ft-prompt.css
+++ b/src/renderer/components/ft-prompt/ft-prompt.css
@@ -1,6 +1,6 @@
 .prompt {
   position: fixed;
-  top: 0px;
+  inset-block-start: 0px;
   inset-inline-start: 0px;
   width: 100vw;
   height: 100vh;
diff --git a/src/renderer/components/ft-radio-button/ft-radio-button.css b/src/renderer/components/ft-radio-button/ft-radio-button.css
index 3b73b503f7777..670616ecb077e 100644
--- a/src/renderer/components/ft-radio-button/ft-radio-button.css
+++ b/src/renderer/components/ft-radio-button/ft-radio-button.css
@@ -23,7 +23,7 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
   user-select: none;
   cursor: pointer;
   display: block;
-  margin-bottom: -20px;
+  margin-block-end: -20px;
 }
 
 .pure-checkbox input[type="checkbox"] + label:before, .pure-radiobutton input[type="checkbox"] + label:before, .pure-checkbox input[type="radio"] + label:before, .pure-radiobutton input[type="radio"] + label:before {
@@ -31,7 +31,7 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
   content: '';
   color: var(--primary-color);
   position: absolute;
-  top: 50%;
+  inset-block-start: 50%;
   inset-inline-start: 0;
   width: 14px;
   height: 14px;
@@ -46,7 +46,7 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
   content: '';
   background-color: var(--primary-color);
   position: absolute;
-  top: 50%;
+  inset-block-start: 50%;
   inset-inline-start: 4px;
   width: 10px;
   height: 10px;
@@ -64,7 +64,7 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
 
 .pure-checkbox input[type="checkbox"] + label:after, .pure-radiobutton input[type="checkbox"] + label:after {
   background-color: transparent;
-  top: 50%;
+  inset-block-start: 50%;
   inset-inline-start: 4px;
   width: 8px;
   height: 3px;
@@ -103,5 +103,5 @@ borderscale {  50% {
 }
 
 .radioTitle {
-  margin-bottom: -20px;
+  margin-block-end: -20px;
 }
diff --git a/src/renderer/components/ft-select/ft-select.css b/src/renderer/components/ft-select/ft-select.css
index 702ed402bb875..429fa362068ae 100644
--- a/src/renderer/components/ft-select/ft-select.css
+++ b/src/renderer/components/ft-select/ft-select.css
@@ -67,7 +67,7 @@
 
 .iconSelect {
   position: absolute;
-  top: 10px;
+  inset-block-start: 10px;
   inset-inline-end: 15px;
   /* Styling the down arrow */
   padding: 0;
@@ -80,7 +80,7 @@
 
 .selectTooltip {
   position: absolute;
-  top: -20px;
+  inset-block-start: -20px;
   inset-inline-end: 17px;
 }
 
@@ -91,7 +91,7 @@
   font-weight: normal;
   position: absolute;
   inset-inline-start: 0;
-  top: 10px;
+  inset-block-start: 10px;
   transition: 0.2s ease all;
   color: var(--tertiary-text-color);
 }
@@ -99,7 +99,7 @@
 /* active state */
 .select-text:focus ~ .select-label, .select-text:valid ~ .select-label {
   color: var(--accent-color);
-  top: -20px;
+  inset-block-start: -20px;
   transition: 0.2s ease all;
   font-size: 14px;
 }
@@ -115,7 +115,7 @@
   content: '';
   height: 2px;
   width: 0;
-  bottom: 1px;
+  inset-block-end 1px;
   position: absolute;
   background: var(--accent-color);
   transition: 0.2s ease all;
@@ -139,7 +139,7 @@
   position: absolute;
   height: 60%;
   width: 100px;
-  top: 25%;
+  inset-block-start: 25%;
   inset-inline-start: 0;
   pointer-events: none;
   opacity: 0.5;
diff --git a/src/renderer/components/ft-settings-section/ft-settings-section.scss b/src/renderer/components/ft-settings-section/ft-settings-section.scss
index b53e979f0022e..ddc6edd444d0c 100644
--- a/src/renderer/components/ft-settings-section/ft-settings-section.scss
+++ b/src/renderer/components/ft-settings-section/ft-settings-section.scss
@@ -21,7 +21,7 @@
 
   > div:not(:last-child, .ft-flex-box) {
     @media only screen and (max-width: 800px) {
-      margin-bottom: 20px;
+      margin-block-end: 20px;
     }
   }
 }
@@ -105,13 +105,13 @@
         display: inline-block;
         position: absolute;
         inset-inline-end: -25px;
-        top: 12px;
+        inset-block-start: 12px;
       }
     }
 
     .settingsFlexStart460px :deep(.tooltip) {
       inset-inline-end: 0;
-      top: -2px;
+      inset-block-start: -2px;
     }
 
     :deep(.switch-ctn) {
diff --git a/src/renderer/components/ft-slider/ft-slider.css b/src/renderer/components/ft-slider/ft-slider.css
index 7310cb6bc24b7..ae7e957b87a92 100644
--- a/src/renderer/components/ft-slider/ft-slider.css
+++ b/src/renderer/components/ft-slider/ft-slider.css
@@ -18,7 +18,7 @@
 .pure-material-slider > input {
   -webkit-appearance: none;
   position: relative;
-  top: 24px;
+  inset-block-start: 24px;
   display: block;
   margin-block: 0 -36px;
   margin-inline: 0;
@@ -37,7 +37,7 @@
 /* Span */
 .pure-material-slider > span {
   display: inline-block;
-  margin-bottom: 36px;
+  margin-block-end: 36px;
 }
 
 /* Focus */
diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css
index 7aff233049d6e..9faeb44025d03 100644
--- a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css
+++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css
@@ -1,6 +1,6 @@
 .subscribeButton {
   align-self: center;
   height: 50%;
-  margin-bottom: 10px;
+  margin-block-end: 10px;
   min-width: 150px;
 }
diff --git a/src/renderer/components/ft-toast/ft-toast.css b/src/renderer/components/ft-toast/ft-toast.css
index ca6df59774fae..0956f6deddde6 100644
--- a/src/renderer/components/ft-toast/ft-toast.css
+++ b/src/renderer/components/ft-toast/ft-toast.css
@@ -2,7 +2,7 @@
   position: fixed;
   inset-inline-start: 50vw;
   transform: translate(-50%, 0);
-  bottom: 50px;
+  inset-block-end 50px;
   z-index: 1;
   display: flex;
   flex-direction: column;
diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
index 51dfdb9664ed8..7c5e3f5e8ec25 100644
--- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
+++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
@@ -15,7 +15,7 @@
   height: 20px;
   inset-inline-start: -3px;
   position: absolute;
-  top: calc(50% - 3px);
+  inset-block-start: calc(50% - 3px);
   transform: translate(0, -50%);
   width: 34px;
 }
@@ -35,7 +35,7 @@
     margin: 0;
     outline: 0;
     position: absolute;
-    top: 50%;
+    inset-block-start: 50%;
     transform: translate(0, -50%);
     transition: all 0.3s ease;
   }
diff --git a/src/renderer/components/ft-tooltip/ft-tooltip.css b/src/renderer/components/ft-tooltip/ft-tooltip.css
index 8734408ea1c0a..9a6bc9134c871 100644
--- a/src/renderer/components/ft-tooltip/ft-tooltip.css
+++ b/src/renderer/components/ft-tooltip/ft-tooltip.css
@@ -54,7 +54,7 @@
 
 .text.bottom {
   margin-block-start: 1em;
-  top: 100%;
+  inset-block-start: 100%;
   inset-inline-start: 50%;
   -webkit-transform: translate(-50%, -1em);
   transform: translate(-50%, -1em);
@@ -62,7 +62,7 @@
 
 .text.bottom-left {
   margin-block-start: 1em;
-  top: 100%;
+  inset-block-start: 100%;
   inset-inline-start: -100px;
   -webkit-transform: translate(-50%, -1em);
   transform: translate(-50%, -1em);
@@ -71,7 +71,7 @@
 .text.left {
   margin-inline-end:1em;
   inset-inline-end: 100%;
-  top: 50%;
+  inset-block-start: 50%;
   -webkit-transform: translate(1em, -50%);
   transform: translate(1em, -50%);
 }
@@ -79,15 +79,15 @@
 .text.right {
   inset-inline-start: 100%;
   margin-inline-start: 1em;
-  top: 50%;
+  inset-block-start: 50%;
   -webkit-transform: translate(-1em, -50%);
   transform: translate(-1em, -50%);
 }
 
 .text.top {
-  bottom: 100%;
+  inset-block-end 100%;
   inset-inline-start: 50%;
-  margin-bottom: 1em;
+  margin-block-end: 1em;
   -webkit-transform: translate(-50%, 1em);
   transform: translate(-50%, 1em);
 }
diff --git a/src/renderer/components/ft-video-player/ft-video-player.css b/src/renderer/components/ft-video-player/ft-video-player.css
index d34fd7dd84118..c751799f90781 100644
--- a/src/renderer/components/ft-video-player/ft-video-player.css
+++ b/src/renderer/components/ft-video-player/ft-video-player.css
@@ -22,7 +22,7 @@
 
 :deep(.chapterMarker) {
   height: 100%;
-  top: 0;
+  inset-block-start: 0;
   width: 2px;
   z-index: 2;
   background-color: #000;
diff --git a/src/renderer/components/playlist-info/playlist-info.scss b/src/renderer/components/playlist-info/playlist-info.scss
index f06dca68fe2e3..2aaec046357fc 100644
--- a/src/renderer/components/playlist-info/playlist-info.scss
+++ b/src/renderer/components/playlist-info/playlist-info.scss
@@ -21,7 +21,7 @@
 }
 
 .playlistTitle {
-  margin-bottom: 0.1em;
+  margin-block-end: 0.1em;
 }
 
 .playlistDescription {
diff --git a/src/renderer/components/side-nav-more-options/side-nav-more-options.css b/src/renderer/components/side-nav-more-options/side-nav-more-options.css
index 9ecd187a5fb7c..d3ed54600654c 100644
--- a/src/renderer/components/side-nav-more-options/side-nav-more-options.css
+++ b/src/renderer/components/side-nav-more-options/side-nav-more-options.css
@@ -28,7 +28,7 @@
 .moreOptionContainer {
   position: fixed;
   background-color: var(--side-nav-color);
-  bottom: 60px;
+  inset-block-end 60px;
   width: 70px;
   z-index: 0;
   -webkit-box-shadow: 3px -3px 5px 0px rgba(0,0,0,0.2);
@@ -45,8 +45,8 @@
     margin-block-start: 0px;
     height: 60px;
     width: 100%;
-    bottom: 0px;
-    top: auto;
+    inset-block-end 0px;
+    inset-block-start: auto;
     overflow-y: inherit;
   }
 
diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index c4d5858482455..54b758a35877e 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@@ -5,7 +5,7 @@
   overflow-x: hidden;
   position: sticky;
   inset-inline-start: 0;
-  top: 60px;
+  inset-block-start: 60px;
   z-index: 3;
   box-shadow: 1px -1px 1px -1px var(--primary-shadow-color);
   background-color: var(--side-nav-color);
@@ -85,7 +85,7 @@
   width: 35px;
   margin: 0;
   position: absolute;
-  top: 50%;
+  inset-block-start: 50%;
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
 }
@@ -114,7 +114,7 @@
 
 .refreshIcon {
   position: absolute;
-  top: 20px;
+  inset-block-start: 20px;
   inset-inline-end: 20px;
 }
 
@@ -132,7 +132,7 @@
   margin-inline-start: 0px;
   width: 100%;
   display: block;
-  margin-bottom: 0px;
+  margin-block-end: 0px;
 }
 .closed .navIconExpand{
   height:1.3em;
@@ -160,7 +160,7 @@
   float: none;
   margin-block: 0;
   margin-inline: auto;
-  top: 0px;
+  inset-block-start: 0px;
   -ms-transform: none;
   transform: none;
   margin-block-start: 0.3em;
@@ -179,7 +179,7 @@
   .sideNav {
     position: fixed;
     inset-inline-start: 0;
-    bottom: 0;
+    inset-block-end 0;
 
     display: flex;
   }
@@ -194,8 +194,8 @@
     margin-block-start: 0px;
     height: 60px;
     width: 100%;
-    bottom: 0px;
-    top: auto;
+    inset-block-end 0px;
+    inset-block-start: auto;
     overflow-y: hidden;
   }
 
diff --git a/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css b/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css
index 2641a338f6ba2..103af5333ec49 100644
--- a/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css
+++ b/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css
@@ -10,7 +10,7 @@
 
 .floatingTopButton {
   position: fixed;
-  top: 70px;
+  inset-block-start: 70px;
   inset-inline-end: 10px;
 }
 
diff --git a/src/renderer/components/top-nav/top-nav.scss b/src/renderer/components/top-nav/top-nav.scss
index e15b86a6612ad..a7a72e128c3d8 100644
--- a/src/renderer/components/top-nav/top-nav.scss
+++ b/src/renderer/components/top-nav/top-nav.scss
@@ -18,7 +18,7 @@
   line-height: 60px;
   position: sticky;
   inset-inline-end: 0;
-  top: 0;
+  inset-block-start: 0;
   width: 100%;
   z-index: 4;
 
@@ -158,7 +158,7 @@
       height: 40px;
       margin-inline-start: 5px;
       position: relative;
-      top: -3px;
+      inset-block-start: -3px;
       width: 100px;
 
       @media only screen and (max-width: 680px) {
@@ -185,7 +185,7 @@
       inset-inline-start: 0;
       position: fixed;
       inset-inline-end: 0;
-      top: 60px;
+      inset-block-start: 60px;
 
       @include top-nav-is-colored {
         background-color: var(--primary-color-hover);
diff --git a/src/renderer/components/watch-video-chapters/watch-video-chapters.css b/src/renderer/components/watch-video-chapters/watch-video-chapters.css
index 190cd10714513..29e3a29eb71b8 100644
--- a/src/renderer/components/watch-video-chapters/watch-video-chapters.css
+++ b/src/renderer/components/watch-video-chapters/watch-video-chapters.css
@@ -4,7 +4,7 @@
 
 .chaptersTitle {
   margin-block-start: 10px;
-  margin-bottom: 0;
+  margin-block-end: 0;
   cursor: pointer;
 }
 
diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.css b/src/renderer/components/watch-video-comments/watch-video-comments.css
index 81e1d55fae934..2407e1037c343 100644
--- a/src/renderer/components/watch-video-comments/watch-video-comments.css
+++ b/src/renderer/components/watch-video-comments/watch-video-comments.css
@@ -83,7 +83,7 @@
   margin-block-end: 0;
   margin-block-start: 0;
   margin-inline-start: 68px;
-  margin-bottom: 5px;
+  margin-block-end: 5px;
 }
 
 .commentDate {
@@ -110,7 +110,7 @@
   width: 25px;
   height: 20px;
   margin-inline-start: 10px;
-  margin-bottom: -7px;
+  margin-block-end: -7px;
 }
 
 .commentHeartBadgeImg {
@@ -125,7 +125,7 @@
 .commentHeartBadgeWhite {
   position: absolute;
   inset-inline-start: 9px;
-  bottom: 1px;
+  inset-block-end 1px;
   width: 11px;
   height: 11px;
   z-index: 1;
@@ -135,7 +135,7 @@
   position: absolute;
   color: var(--red-500);
   inset-inline-start: 10px;
-  bottom: 2px;
+  inset-block-end 2px;
   width: 9px;
   height: 9px;
   z-index: 2;
diff --git a/src/renderer/components/watch-video-info/watch-video-info.scss b/src/renderer/components/watch-video-info/watch-video-info.scss
index 6c72f1874c981..224d9ccf70b6b 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.scss
+++ b/src/renderer/components/watch-video-info/watch-video-info.scss
@@ -38,7 +38,7 @@
     margin-inline-start: 6px;
     position: relative;
     text-decoration: inherit;
-    top: -2px;
+    inset-block-start: -2px;
   }
 
   .subscribeButton {
@@ -91,7 +91,7 @@
   .likeBar {
     border-radius: 4px;
     height: 8px;
-    margin-bottom: 4px;
+    margin-block-end: 4px;
   }
 
   .likeCount {
diff --git a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
index 423ad538f5720..8e88cf83916f0 100644
--- a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
+++ b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
@@ -91,7 +91,7 @@
   position: absolute;
   margin-inline-start: -16px;
   padding-inline-end: 32px;
-  bottom: -15px;
+  inset-block-end -15px;
   cursor: auto;
   z-index: 1;
 }
@@ -122,7 +122,7 @@
   margin-inline-start: 5%;
   margin-inline-end: 5%;
   margin-block-start: 25px;
-  margin-bottom: 10px;
+  margin-block-end: 10px;
   background-color: var(--primary-color);
   border-radius: 5px;
   -webkit-border-radius: 5px;
@@ -148,7 +148,7 @@
   color: var(--text-with-main-color);
   opacity: 0.7;
   position: absolute;
-  top: -20px;
+  inset-block-start: -20px;
   margin-inline-start: 65px;
 }
 
@@ -157,7 +157,7 @@
   font-weight: bold;
   margin-inline-start: 65px;
   position: absolute;
-  top: 0px;
+  inset-block-start: 0px;
 }
 
 .superChatMessage .chatMessage {
@@ -178,7 +178,7 @@
 
 .chatContent {
   margin-block-start: 5px;
-  margin-bottom: 2px;
+  margin-block-end: 2px;
   font-size: 12px;
   word-wrap: break-word;
 }
@@ -213,7 +213,7 @@
   height: 35px;
   position: absolute;
   inset-inline-start: 45%;
-  bottom: 20px;
+  inset-block-end 20px;
   cursor: pointer;
   border-radius: 200px;
   -webkit-border-radius: 200px;
@@ -231,5 +231,5 @@
   color: var(--text-with-accent-color);
   font-size: 22px;
   position: relative;
-  top: 0.45rem;
+  inset-block-start: 0.45rem;
 }
diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.css b/src/renderer/components/watch-video-playlist/watch-video-playlist.css
index 75488b63a7665..19aa00fb4e49c 100644
--- a/src/renderer/components/watch-video-playlist/watch-video-playlist.css
+++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.css
@@ -6,12 +6,12 @@
 .channelName {
   font-size: 15px;
   position: relative;
-  bottom: 15px;
+  inset-block-end 15px;
 }
 
 .playlistIndex {
   position: relative;
-  bottom: 15px;
+  inset-block-end 15px;
   color: var(--tertiary-text-color);
 }
 
@@ -67,7 +67,7 @@
 }
 
 .playlistItem:not(:last-child) {
-  margin-bottom: 8px;
+  margin-block-end: 8px;
 }
 
 .playlistItem:hover {
@@ -91,5 +91,5 @@
 .videoInfo {
   margin-inline-start: 30px;
   position: relative;
-  bottom: 7px;
+  inset-block-end 7px;
 }
diff --git a/src/renderer/scss-partials/_ft-list-item.scss b/src/renderer/scss-partials/_ft-list-item.scss
index 60c6cbabf4dcb..9b338ac53a656 100644
--- a/src/renderer/scss-partials/_ft-list-item.scss
+++ b/src/renderer/scss-partials/_ft-list-item.scss
@@ -143,7 +143,7 @@ $watched-transition-duration: 0.5s;
       align-self: flex-end;
       font-size: 17px;
       justify-self: left;
-      margin-bottom: 4px;
+      margin-block-end: 4px;
       margin-inline-start: 4px;
     }
 
@@ -284,7 +284,7 @@ $watched-transition-duration: 0.5s;
 
     .videoThumbnail,
     .channelThumbnail {
-      margin-bottom: 12px;
+      margin-block-end: 12px;
 
       .thumbnailImage {
         width: 100%;
diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css
index 11ee2d73837e5..77d807acd49aa 100644
--- a/src/renderer/views/Channel/Channel.css
+++ b/src/renderer/views/Channel/Channel.css
@@ -61,7 +61,7 @@
 
 .channelSubCount {
   color: var(--tertiary-text-color);
-  top: 50px;
+  inset-block-start: 50px;
   inset-inline-start: 120px;
 }
 
@@ -109,18 +109,18 @@
   align-self: flex-end;
   text-align: center;
   color: var(--tertiary-text-color);
-  border-bottom: 3px solid transparent;
+  border-block-end: 3px solid transparent;
 }
 
 .tab:hover,
 .tab:focus {
   font-weight: bold;
-  border-bottom: 3px solid var(--tertiary-text-color);
+  border-block-end: 3px solid var(--tertiary-text-color);
 }
 
 .selectedTab {
   color: var(--primary-text-color);
-  border-bottom: 3px solid var(--primary-color);
+  border-block-end: 3px solid var(--primary-color);
   font-weight: bold;
   box-sizing: border-box;
 }
diff --git a/src/renderer/views/Playlist/Playlist.css b/src/renderer/views/Playlist/Playlist.css
index 0e1ba0cfc6d9a..59550e3a65ca8 100644
--- a/src/renderer/views/Playlist/Playlist.css
+++ b/src/renderer/views/Playlist/Playlist.css
@@ -10,7 +10,7 @@
   overflow-y: auto;
   padding: 10px;
   position: sticky;
-  top: 96px;
+  inset-block-start: 96px;
   width: 30%;
 }
 
@@ -41,7 +41,7 @@
 
 :deep(.videoThumbnail) {
   margin-block-start: auto;
-  margin-bottom: auto;
+  margin-block-end: auto;
 }
 
 :deep(.thumbnailImage) {
@@ -56,7 +56,7 @@
   .playlistInfo {
     box-sizing: border-box;
     position: relative;
-    top: 0;
+    inset-block-start: 0;
     height: auto;
     width: 100%;
   }
diff --git a/src/renderer/views/Popular/Popular.css b/src/renderer/views/Popular/Popular.css
index a4d64f3a56658..ac963d12e854d 100644
--- a/src/renderer/views/Popular/Popular.css
+++ b/src/renderer/views/Popular/Popular.css
@@ -6,7 +6,7 @@
 
 .floatingTopButton {
   position: fixed;
-  top: 70px;
+  inset-block-start: 70px;
   inset-inline-end: 10px;
 }
 
diff --git a/src/renderer/views/Subscriptions/Subscriptions.css b/src/renderer/views/Subscriptions/Subscriptions.css
index cad7e62dc9208..21a6d79aea7ea 100644
--- a/src/renderer/views/Subscriptions/Subscriptions.css
+++ b/src/renderer/views/Subscriptions/Subscriptions.css
@@ -12,15 +12,15 @@
   width: 100%;
   margin-block-start: -3px;
   color: var(--tertiary-text-color);
-  margin-bottom: 10px;
+  margin-block-end: 10px;
 }
 
 .selectedTab {
-  border-bottom: 3px solid var(--primary-color);
+  border-block-end: 3px solid var(--primary-color);
   color: var(--primary-text-color);
   font-weight: bold;
   box-sizing: border-box;
-  margin-bottom: -3px;
+  margin-block-end: -3px;
 }
 
 .tab {
diff --git a/src/renderer/views/Trending/Trending.css b/src/renderer/views/Trending/Trending.css
index f718ccb6415e4..51640fed1f5f4 100644
--- a/src/renderer/views/Trending/Trending.css
+++ b/src/renderer/views/Trending/Trending.css
@@ -6,7 +6,7 @@
 
 .floatingTopButton {
   position: fixed;
-  top: 70px;
+  inset-block-start: 70px;
   inset-inline-end: 10px;
 }
 
@@ -16,15 +16,15 @@
   grid-template-columns: 1fr 1fr 1fr 1fr;
   margin-block-start: -3px;
   color: var(--tertiary-text-color);
-  margin-bottom: 10px;
+  margin-block-end: 10px;
 }
 
 .selectedTab {
-  border-bottom: 3px solid var(--primary-color);
+  border-block-end: 3px solid var(--primary-color);
   color: var(--primary-text-color);
   font-weight: bold;
   box-sizing: border-box;
-  margin-bottom: -3px;
+  margin-block-end: -3px;
 }
 
 .tab {
diff --git a/src/renderer/views/Watch/Watch.scss b/src/renderer/views/Watch/Watch.scss
index 2d5e7a6830519..9e3ea417f4513 100644
--- a/src/renderer/views/Watch/Watch.scss
+++ b/src/renderer/views/Watch/Watch.scss
@@ -54,7 +54,7 @@
         align-items: center;
         background-color: rgb(0 0 0 / 80%);
         border-radius: 5px;
-        bottom: 12px;
+        inset-block-end 12px;
         color: #fff;
         display: flex;
         height: 60px;
@@ -122,7 +122,7 @@
   .watchVideoPlaylist {
     :deep(.videoThumbnail) {
       margin-block-start: auto;
-      margin-bottom: auto;
+      margin-block-end: auto;
     }
     @media (max-width: 768px) {
       height: auto;
@@ -161,7 +161,7 @@
 
     .infoAreaSticky {
       position: sticky;
-      top: 76px;
+      inset-block-start: 76px;
     }
   }
 }

From 127ee1aed3ecb74d1d022e438b1333959709b522 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 28 Aug 2023 00:35:18 -0500
Subject: [PATCH 11/67] Replace text-align left and right with text-align start
 and end

---
 src/renderer/components/channel-about/channel-about.css   | 2 +-
 .../components/ft-community-post/ft-community-post.scss   | 4 ++--
 .../components/ft-toggle-switch/ft-toggle-switch.scss     | 2 +-
 .../components/watch-video-info/watch-video-info.scss     | 8 ++++----
 src/renderer/themes.css                                   | 2 +-
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/renderer/components/channel-about/channel-about.css b/src/renderer/components/channel-about/channel-about.css
index 0af4cb90f1805..8b01216021a82 100644
--- a/src/renderer/components/channel-about/channel-about.css
+++ b/src/renderer/components/channel-about/channel-about.css
@@ -34,7 +34,7 @@
 }
 
 .aboutDetails {
-  text-align: left;
+  text-align: start;
 }
 
 .aboutDetails th {
diff --git a/src/renderer/components/ft-community-post/ft-community-post.scss b/src/renderer/components/ft-community-post/ft-community-post.scss
index c5ed52d92ff7a..6f56df4f4c38c 100644
--- a/src/renderer/components/ft-community-post/ft-community-post.scss
+++ b/src/renderer/components/ft-community-post/ft-community-post.scss
@@ -55,11 +55,11 @@
   font-size: 15px;
   margin-block-start: 4px;
   max-width: 210px;
-  text-align: left;
+  text-align: start;
 
   @media screen and (max-width: 680px) {
     margin-inline-start: 0;
-    text-align: left;
+    text-align: start;
   }
 
   .likeBar {
diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
index 7c5e3f5e8ec25..4af00fc0ee01d 100644
--- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
+++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
@@ -27,7 +27,7 @@
   padding-block: 12px;
   padding-inline: 44px 0;
   position: relative;
-  text-align: left;
+  text-align: start;
 
   &::before,
   &::after {
diff --git a/src/renderer/components/watch-video-info/watch-video-info.scss b/src/renderer/components/watch-video-info/watch-video-info.scss
index 224d9ccf70b6b..fa086d1083421 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.scss
+++ b/src/renderer/components/watch-video-info/watch-video-info.scss
@@ -53,10 +53,10 @@
 .datePublished {
   color: var(--secondary-text-color);
   font-size: 15px;
-  text-align: right;
+  text-align: end;
 
   @media screen and (max-width: 680px) {
-    text-align: left;
+    text-align: start;
   }
 }
 
@@ -81,11 +81,11 @@
   margin-inline-start: auto;
   margin-block-start: 4px;
   max-width: 210px;
-  text-align: right;
+  text-align: end;
 
   @media screen and (max-width: 680px) {
     margin-inline-start: 0;
-    text-align: left;
+    text-align: start;
   }
 
   .likeBar {
diff --git a/src/renderer/themes.css b/src/renderer/themes.css
index 56743fadc7319..fc2aa2e0462e4 100644
--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@@ -921,7 +921,7 @@ body {
 }
 
 .rightAligned {
-  text-align: right;
+  text-align: end;
 }
 
 a:link {

From 3fe79776f22e090fe52b4d714525d611fdc48fbf Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 28 Aug 2023 00:38:48 -0500
Subject: [PATCH 12/67] Fix syntax error with inset-block-end

---
 src/renderer/components/ft-icon-button/ft-icon-button.scss  | 2 +-
 .../components/ft-profile-selector/ft-profile-selector.css  | 2 +-
 src/renderer/components/ft-progress-bar/ft-progress-bar.css | 2 +-
 src/renderer/components/ft-select/ft-select.css             | 2 +-
 src/renderer/components/ft-toast/ft-toast.css               | 2 +-
 src/renderer/components/ft-tooltip/ft-tooltip.css           | 2 +-
 .../side-nav-more-options/side-nav-more-options.css         | 4 ++--
 src/renderer/components/side-nav/side-nav.css               | 4 ++--
 .../watch-video-comments/watch-video-comments.css           | 4 ++--
 .../watch-video-live-chat/watch-video-live-chat.css         | 4 ++--
 .../watch-video-playlist/watch-video-playlist.css           | 6 +++---
 src/renderer/views/Watch/Watch.scss                         | 2 +-
 12 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.scss b/src/renderer/components/ft-icon-button/ft-icon-button.scss
index 91b448cb4ce80..1ebbed17672f7 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.scss
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss
@@ -99,7 +99,7 @@
   }
 
   &.top {
-    inset-block-end 45px;
+    inset-block-end: 45px;
   }
 
   &.bottom {
diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.css b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
index 620559aab434f..8a0a5f443e453 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.css
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
@@ -58,7 +58,7 @@
 .profile .colorOption {
   float: left;
   position: relative;
-  inset-block-end 5px;
+  inset-block-end: 5px;
   margin: 10px;
 }
 
diff --git a/src/renderer/components/ft-progress-bar/ft-progress-bar.css b/src/renderer/components/ft-progress-bar/ft-progress-bar.css
index acd8a5738cf27..8dc334371cfbe 100644
--- a/src/renderer/components/ft-progress-bar/ft-progress-bar.css
+++ b/src/renderer/components/ft-progress-bar/ft-progress-bar.css
@@ -1,7 +1,7 @@
 .progressBar {
   position: fixed;
   height: 3px;
-  inset-block-end 0px;
+  inset-block-end: 0px;
   inset-inline-start: 0px;
   background-color: var(--primary-color);
   z-index: 1;
diff --git a/src/renderer/components/ft-select/ft-select.css b/src/renderer/components/ft-select/ft-select.css
index 429fa362068ae..67a822bbf7775 100644
--- a/src/renderer/components/ft-select/ft-select.css
+++ b/src/renderer/components/ft-select/ft-select.css
@@ -115,7 +115,7 @@
   content: '';
   height: 2px;
   width: 0;
-  inset-block-end 1px;
+  inset-block-end: 1px;
   position: absolute;
   background: var(--accent-color);
   transition: 0.2s ease all;
diff --git a/src/renderer/components/ft-toast/ft-toast.css b/src/renderer/components/ft-toast/ft-toast.css
index 0956f6deddde6..e252e0c39c22a 100644
--- a/src/renderer/components/ft-toast/ft-toast.css
+++ b/src/renderer/components/ft-toast/ft-toast.css
@@ -2,7 +2,7 @@
   position: fixed;
   inset-inline-start: 50vw;
   transform: translate(-50%, 0);
-  inset-block-end 50px;
+  inset-block-end: 50px;
   z-index: 1;
   display: flex;
   flex-direction: column;
diff --git a/src/renderer/components/ft-tooltip/ft-tooltip.css b/src/renderer/components/ft-tooltip/ft-tooltip.css
index 9a6bc9134c871..04dc8ffd109fb 100644
--- a/src/renderer/components/ft-tooltip/ft-tooltip.css
+++ b/src/renderer/components/ft-tooltip/ft-tooltip.css
@@ -85,7 +85,7 @@
 }
 
 .text.top {
-  inset-block-end 100%;
+  inset-block-end: 100%;
   inset-inline-start: 50%;
   margin-block-end: 1em;
   -webkit-transform: translate(-50%, 1em);
diff --git a/src/renderer/components/side-nav-more-options/side-nav-more-options.css b/src/renderer/components/side-nav-more-options/side-nav-more-options.css
index d3ed54600654c..90aee4ee69347 100644
--- a/src/renderer/components/side-nav-more-options/side-nav-more-options.css
+++ b/src/renderer/components/side-nav-more-options/side-nav-more-options.css
@@ -28,7 +28,7 @@
 .moreOptionContainer {
   position: fixed;
   background-color: var(--side-nav-color);
-  inset-block-end 60px;
+  inset-block-end: 60px;
   width: 70px;
   z-index: 0;
   -webkit-box-shadow: 3px -3px 5px 0px rgba(0,0,0,0.2);
@@ -45,7 +45,7 @@
     margin-block-start: 0px;
     height: 60px;
     width: 100%;
-    inset-block-end 0px;
+    inset-block-end: 0px;
     inset-block-start: auto;
     overflow-y: inherit;
   }
diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index 54b758a35877e..784614c774f28 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@@ -179,7 +179,7 @@
   .sideNav {
     position: fixed;
     inset-inline-start: 0;
-    inset-block-end 0;
+    inset-block-end: 0;
 
     display: flex;
   }
@@ -194,7 +194,7 @@
     margin-block-start: 0px;
     height: 60px;
     width: 100%;
-    inset-block-end 0px;
+    inset-block-end: 0px;
     inset-block-start: auto;
     overflow-y: hidden;
   }
diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.css b/src/renderer/components/watch-video-comments/watch-video-comments.css
index 2407e1037c343..ab8989925d792 100644
--- a/src/renderer/components/watch-video-comments/watch-video-comments.css
+++ b/src/renderer/components/watch-video-comments/watch-video-comments.css
@@ -125,7 +125,7 @@
 .commentHeartBadgeWhite {
   position: absolute;
   inset-inline-start: 9px;
-  inset-block-end 1px;
+  inset-block-end: 1px;
   width: 11px;
   height: 11px;
   z-index: 1;
@@ -135,7 +135,7 @@
   position: absolute;
   color: var(--red-500);
   inset-inline-start: 10px;
-  inset-block-end 2px;
+  inset-block-end: 2px;
   width: 9px;
   height: 9px;
   z-index: 2;
diff --git a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
index 8e88cf83916f0..0a9e1a956592c 100644
--- a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
+++ b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
@@ -91,7 +91,7 @@
   position: absolute;
   margin-inline-start: -16px;
   padding-inline-end: 32px;
-  inset-block-end -15px;
+  inset-block-end: -15px;
   cursor: auto;
   z-index: 1;
 }
@@ -213,7 +213,7 @@
   height: 35px;
   position: absolute;
   inset-inline-start: 45%;
-  inset-block-end 20px;
+  inset-block-end: 20px;
   cursor: pointer;
   border-radius: 200px;
   -webkit-border-radius: 200px;
diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.css b/src/renderer/components/watch-video-playlist/watch-video-playlist.css
index 19aa00fb4e49c..1b01eeac13d8c 100644
--- a/src/renderer/components/watch-video-playlist/watch-video-playlist.css
+++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.css
@@ -6,12 +6,12 @@
 .channelName {
   font-size: 15px;
   position: relative;
-  inset-block-end 15px;
+  inset-block-end: 15px;
 }
 
 .playlistIndex {
   position: relative;
-  inset-block-end 15px;
+  inset-block-end: 15px;
   color: var(--tertiary-text-color);
 }
 
@@ -91,5 +91,5 @@
 .videoInfo {
   margin-inline-start: 30px;
   position: relative;
-  inset-block-end 7px;
+  inset-block-end: 7px;
 }
diff --git a/src/renderer/views/Watch/Watch.scss b/src/renderer/views/Watch/Watch.scss
index 9e3ea417f4513..cd1ee2ed9ba7e 100644
--- a/src/renderer/views/Watch/Watch.scss
+++ b/src/renderer/views/Watch/Watch.scss
@@ -54,7 +54,7 @@
         align-items: center;
         background-color: rgb(0 0 0 / 80%);
         border-radius: 5px;
-        inset-block-end 12px;
+        inset-block-end: 12px;
         color: #fff;
         display: flex;
         height: 60px;

From 6de06bb677a0e847d1e02b1e2dddd444e3b0af78 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 28 Aug 2023 01:37:52 -0500
Subject: [PATCH 13/67] Implement dynamic float: left/right based on direction
 ltr/rtl

---
 .../ft-community-poll/ft-community-poll.css          |  4 ++--
 .../components/ft-input-tags/ft-input-tags.css       |  2 +-
 .../ft-profile-selector/ft-profile-selector.css      |  4 ++--
 .../components/playlist-info/playlist-info.scss      |  2 +-
 .../watch-video-comments/watch-video-comments.css    |  4 ++--
 src/renderer/themes.css                              | 12 ++++++++++++
 src/renderer/views/Watch/Watch.scss                  |  2 +-
 7 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/renderer/components/ft-community-poll/ft-community-poll.css b/src/renderer/components/ft-community-poll/ft-community-poll.css
index df15842c15c54..4466c81766ab3 100644
--- a/src/renderer/components/ft-community-poll/ft-community-poll.css
+++ b/src/renderer/components/ft-community-poll/ft-community-poll.css
@@ -9,7 +9,7 @@
   border-style: solid;
   border-width: 2px;
   display: block;
-  float: left;
+  float: var(--float-left-ltr-rtl-value);
   height: 10px;
   inset-inline-start: 5px;
   position: relative;
@@ -20,7 +20,7 @@
 .filled-circle {
   border-radius: 50%;
   background-color: black;
-  float: left;
+  float: var(--float-left-ltr-rtl-value);
   height: 6px;
   inset-inline-start: 2px;
   inset-block-start: 2px;
diff --git a/src/renderer/components/ft-input-tags/ft-input-tags.css b/src/renderer/components/ft-input-tags/ft-input-tags.css
index d7b552dc75088..cc167aba2face 100644
--- a/src/renderer/components/ft-input-tags/ft-input-tags.css
+++ b/src/renderer/components/ft-input-tags/ft-input-tags.css
@@ -20,7 +20,7 @@
   margin: 5px;
   border-radius: 5px;
   display:flex;
-  float: left;
+  float: var(--float-left-ltr-rtl-value);
 }
 
 .ft-tag-box li>span {
diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.css b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
index 8a0a5f443e453..489317d5a196c 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.css
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
@@ -56,7 +56,7 @@
 }
 
 .profile .colorOption {
-  float: left;
+  float: var(--float-left-ltr-rtl-value);
   position: relative;
   inset-block-end: 5px;
   margin: 10px;
@@ -76,7 +76,7 @@
 }
 
 .profileSettings {
-  float: right;
+  float: var(--float-right-ltr-rtl-value);
   position: absolute;
   inset-block-start: 10px;
   inset-inline-end: 5px;
diff --git a/src/renderer/components/playlist-info/playlist-info.scss b/src/renderer/components/playlist-info/playlist-info.scss
index 2aaec046357fc..ef4e1f6429d5b 100644
--- a/src/renderer/components/playlist-info/playlist-info.scss
+++ b/src/renderer/components/playlist-info/playlist-info.scss
@@ -45,7 +45,7 @@
 
 .channelThumbnail {
   border-radius: 200px;
-  float: left;
+  float: var(--float-left-ltr-rtl-value);
   width: 40px;
 }
 
diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.css b/src/renderer/components/watch-video-comments/watch-video-comments.css
index ab8989925d792..44bfaba86e4a6 100644
--- a/src/renderer/components/watch-video-comments/watch-video-comments.css
+++ b/src/renderer/components/watch-video-comments/watch-video-comments.css
@@ -27,7 +27,7 @@
 }
 
 .commentSort {
-  float: right;
+  float: var(--float-right-ltr-rtl-value);
 }
 
 .comment {
@@ -43,7 +43,7 @@
 }
 
 .commentThumbnail {
-  float: left;
+  float: var(--float-left-ltr-rtl-value);
   width: 60px;
   height: 60px;
   border-radius: 200px;
diff --git a/src/renderer/themes.css b/src/renderer/themes.css
index fc2aa2e0462e4..cbb0a3d324df9 100644
--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@@ -903,6 +903,18 @@
   --accent-color-opacity4: rgba(180,190,254,0.24);
 }
 
+body[dir='ltr'] {
+  --ltr-or-rtl: ltr;
+  --float-left-ltr-rtl-value: left;
+  --float-right-ltr-rtl-value: right;
+}
+
+body[dir='rtl'] {
+  --ltr-or-rtl: rtl;
+  --float-left-ltr-rtl-value: right;
+  --float-right-ltr-rtl-value: left;
+}
+
 body {
   margin: 0;
   min-height: 100vh;
diff --git a/src/renderer/views/Watch/Watch.scss b/src/renderer/views/Watch/Watch.scss
index cd1ee2ed9ba7e..97f3661c54c38 100644
--- a/src/renderer/views/Watch/Watch.scss
+++ b/src/renderer/views/Watch/Watch.scss
@@ -64,7 +64,7 @@
         position: absolute;
 
         .premiereIcon {
-          float: left;
+          float: var(--float-left-ltr-rtl-value);
           font-size: 25px;
           margin-block: 0;
           margin-inline: 12px;

From a95d32ce34471f1698b783847df50503a86a37cf Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 28 Aug 2023 08:54:59 -0500
Subject: [PATCH 14/67] Implement dynamic navigation arrow placement based on
 direction ltr/rtl

To the fullest of my understanding, it is expected for the left navigation in rtl-supporting browsers to be for forward navigation, and the right one to be for backward navigation.
---
 src/renderer/components/top-nav/top-nav.js   | 21 ++++++++++++++------
 src/renderer/components/top-nav/top-nav.scss |  4 ++--
 src/renderer/components/top-nav/top-nav.vue  |  8 ++++----
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index 347d02ab6fc37..b021aee2c2fae 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -54,6 +54,15 @@ export default defineComponent({
       return this.$store.getters.getCurrentInvidiousInstance
     },
 
+    currentLocale: function () {
+      return this.$store.getters.getCurrentLocale
+    },
+
+    isDirectionLtr: function() {
+      const locale = this.currentLocale
+      return !(locale === 'ar' || locale === 'fa' || locale === 'he' || locale === 'ur' || locale === 'yi')
+    },
+
     backendFallback: function () {
       return this.$store.getters.getBackendFallback
     },
@@ -280,8 +289,8 @@ export default defineComponent({
     navigateHistory: function () {
       if (!this.isForwardOrBack) {
         this.historyIndex = window.history.length
-        this.$refs.historyArrowBack.classList.remove('fa-arrow-left')
-        this.$refs.historyArrowForward.classList.add('fa-arrow-right')
+        this.$refs.historyArrowBack.classList.remove('arrowBackwardDisabled')
+        this.$refs.historyArrowForward.classList.add('arrowForwardDisabled')
       } else {
         this.isForwardOrBack = false
       }
@@ -293,9 +302,9 @@ export default defineComponent({
 
       if (this.historyIndex > 1) {
         this.historyIndex--
-        this.$refs.historyArrowForward.classList.remove('fa-arrow-right')
+        this.$refs.historyArrowForward.classList.remove('arrowForwardDisabled')
         if (this.historyIndex === 1) {
-          this.$refs.historyArrowBack.classList.add('fa-arrow-left')
+          this.$refs.historyArrowBack.classList.add('arrowBackwardDisabled')
         }
       }
     },
@@ -306,10 +315,10 @@ export default defineComponent({
 
       if (this.historyIndex < window.history.length) {
         this.historyIndex++
-        this.$refs.historyArrowBack.classList.remove('fa-arrow-left')
+        this.$refs.historyArrowBack.classList.remove('arrowBackwardDisabled')
 
         if (this.historyIndex === window.history.length) {
-          this.$refs.historyArrowForward.classList.add('fa-arrow-right')
+          this.$refs.historyArrowForward.classList.add('arrowForwardDisabled')
         }
       }
     },
diff --git a/src/renderer/components/top-nav/top-nav.scss b/src/renderer/components/top-nav/top-nav.scss
index a7a72e128c3d8..7b6d6a1771f4e 100644
--- a/src/renderer/components/top-nav/top-nav.scss
+++ b/src/renderer/components/top-nav/top-nav.scss
@@ -56,8 +56,8 @@
     color: var(--text-with-main-color);
   }
 
-  &.fa-arrow-left,
-  &.fa-arrow-right {
+  &.arrowBackwardDisabled,
+  &.arrowForwardDisabled {
     color: gray;
     opacity: 0.5;
     pointer-events: none;
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index 291948ec65b7d..c56e0a1d15d43 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -15,8 +15,8 @@
       />
       <font-awesome-icon
         ref="historyArrowBack"
-        class="navBackIcon navIcon fa-arrow-left"
-        :icon="['fas', 'arrow-left']"
+        class="navIcon arrowBackwardDisabled"
+        :icon="['fas', isDirectionLtr ? 'arrow-left' : 'arrow-right']"
         role="button"
         tabindex="0"
         :title="backwardText"
@@ -25,8 +25,8 @@
       />
       <font-awesome-icon
         ref="historyArrowForward"
-        class="navForwardIcon navIcon fa-arrow-right"
-        :icon="['fas', 'arrow-right']"
+        class="navIcon arrowForwardDisabled"
+        :icon="['fas', isDirectionLtr ? 'arrow-right' : 'arrow-left']"
         role="button"
         tabindex="0"
         :title="forwardText"

From 3f5539a3074eaef24bb82bd3bc3861327d2a252d Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 28 Aug 2023 08:55:44 -0500
Subject: [PATCH 15/67] Add direction to body based on preferred language

---
 src/renderer/App.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/renderer/App.js b/src/renderer/App.js
index 340e7b9825ece..d421172b6e859 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -504,6 +504,13 @@ export default defineComponent({
     setWindowTitle: function() {
       if (this.windowTitle !== null) {
         document.title = this.windowTitle
+        const locale = this.$store.getters.getCurrentLocale
+        document.querySelector('html').lang = locale
+        if (locale === 'ar' || locale === 'fa' || locale === 'he' || locale === 'ur' || locale === 'yi') {
+          document.querySelector('body').dir = 'rtl'
+        } else {
+          document.querySelector('body').dir = 'ltr'
+        }
       }
     },
 

From 5f29208370b6f59cd4d6d87b9a3bcdcb7090f392 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 28 Aug 2023 20:42:25 -0500
Subject: [PATCH 16/67] Implement horizontal directionality coefficient to fix
 translate working in wrong x-direction for rtl languages

---
 src/renderer/components/ft-toast/ft-toast.css |  2 +-
 .../ft-toggle-switch/ft-toggle-switch.scss    |  2 +-
 .../components/ft-tooltip/ft-tooltip.css      | 22 +++++++++----------
 src/renderer/themes.css                       |  2 ++
 4 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/renderer/components/ft-toast/ft-toast.css b/src/renderer/components/ft-toast/ft-toast.css
index e252e0c39c22a..99274cece4058 100644
--- a/src/renderer/components/ft-toast/ft-toast.css
+++ b/src/renderer/components/ft-toast/ft-toast.css
@@ -1,7 +1,7 @@
 .toast-holder {
   position: fixed;
   inset-inline-start: 50vw;
-  transform: translate(-50%, 0);
+  transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 0);
   inset-block-end: 50px;
   z-index: 1;
   display: flex;
diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
index 4af00fc0ee01d..dc4207e1675a8 100644
--- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
+++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
@@ -66,7 +66,7 @@
 
     .switch-input:checked + & {
       background-color: var(--accent-color);
-      transform: translate(80%, -50%);
+      transform: translate(calc(80% * var(--horizontal-directionality-coefficient)), -50%);
     }
 
     .switch-input:disabled + & {
diff --git a/src/renderer/components/ft-tooltip/ft-tooltip.css b/src/renderer/components/ft-tooltip/ft-tooltip.css
index 04dc8ffd109fb..7af822570323f 100644
--- a/src/renderer/components/ft-tooltip/ft-tooltip.css
+++ b/src/renderer/components/ft-tooltip/ft-tooltip.css
@@ -19,8 +19,8 @@
 .button:hover + .text.bottom-left,
 .button:focus + .text.top,
 .button:hover + .text.top {
-  -webkit-transform: translate(-50%, 0);
-  transform: translate(-50%, 0);
+  -webkit-transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 0);
+  transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 0);
 }
 
 .button:focus + .text.left,
@@ -56,8 +56,8 @@
   margin-block-start: 1em;
   inset-block-start: 100%;
   inset-inline-start: 50%;
-  -webkit-transform: translate(-50%, -1em);
-  transform: translate(-50%, -1em);
+  -webkit-transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), -1em);
+  transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), -1em);
 }
 
 .text.bottom-left {
@@ -65,31 +65,31 @@
   inset-block-start: 100%;
   inset-inline-start: -100px;
   -webkit-transform: translate(-50%, -1em);
-  transform: translate(-50%, -1em);
+  transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), -1em);
 }
 
 .text.left {
   margin-inline-end:1em;
   inset-inline-end: 100%;
   inset-block-start: 50%;
-  -webkit-transform: translate(1em, -50%);
-  transform: translate(1em, -50%);
+  -webkit-transform: translate(calc(1em * var(--horizontal-directionality-coefficient)), -50%);
+  transform: translate(calc(1em * var(--horizontal-directionality-coefficient)), -50%);
 }
 
 .text.right {
   inset-inline-start: 100%;
   margin-inline-start: 1em;
   inset-block-start: 50%;
-  -webkit-transform: translate(-1em, -50%);
-  transform: translate(-1em, -50%);
+  -webkit-transform: translate(calc(-1em * var(--horizontal-directionality-coefficient)), -50%);
+  transform: translate(calc(-1em * var(--horizontal-directionality-coefficient)), -50%);
 }
 
 .text.top {
   inset-block-end: 100%;
   inset-inline-start: 50%;
   margin-block-end: 1em;
-  -webkit-transform: translate(-50%, 1em);
-  transform: translate(-50%, 1em);
+  -webkit-transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 1em);
+  transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 1em);
 }
 
 .tooltip {
diff --git a/src/renderer/themes.css b/src/renderer/themes.css
index cbb0a3d324df9..322de3823829f 100644
--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@@ -905,12 +905,14 @@
 
 body[dir='ltr'] {
   --ltr-or-rtl: ltr;
+  --horizontal-directionality-coefficient: 1;
   --float-left-ltr-rtl-value: left;
   --float-right-ltr-rtl-value: right;
 }
 
 body[dir='rtl'] {
   --ltr-or-rtl: rtl;
+  --horizontal-directionality-coefficient: -1;
   --float-left-ltr-rtl-value: right;
   --float-right-ltr-rtl-value: left;
 }

From eb6169cb8635d1aec9ed577221e237347c2e6dec Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 28 Aug 2023 17:57:09 -0500
Subject: [PATCH 17/67] Add explicit text-align: start in places to ensure rtl
 version is correctly aligned

---
 .../components/ft-settings-section/ft-settings-section.scss   | 1 +
 src/renderer/components/side-nav/side-nav.css                 | 1 +
 src/renderer/scss-partials/_ft-list-item.scss                 | 1 +
 src/renderer/themes.css                                       | 4 ++++
 4 files changed, 7 insertions(+)

diff --git a/src/renderer/components/ft-settings-section/ft-settings-section.scss b/src/renderer/components/ft-settings-section/ft-settings-section.scss
index ddc6edd444d0c..817e93225e427 100644
--- a/src/renderer/components/ft-settings-section/ft-settings-section.scss
+++ b/src/renderer/components/ft-settings-section/ft-settings-section.scss
@@ -44,6 +44,7 @@
   -webkit-user-select: none;
   user-select: none;
   margin-inline-start: 2%;
+  text-align: start;
 }
 
 :deep(.switchGrid) {
diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index 784614c774f28..5dba438bc808b 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@@ -72,6 +72,7 @@
   margin-inline-start: 40px;
   overflow: hidden;
   word-break: break-word;
+  text-align: start;
 }
 
 .navChannel .navLabel {
diff --git a/src/renderer/scss-partials/_ft-list-item.scss b/src/renderer/scss-partials/_ft-list-item.scss
index 9b338ac53a656..e7deec60e09f2 100644
--- a/src/renderer/scss-partials/_ft-list-item.scss
+++ b/src/renderer/scss-partials/_ft-list-item.scss
@@ -232,6 +232,7 @@ $watched-transition-duration: 0.5s;
       grid-area: infoLine;
       margin-block-start: 5px;
       overflow-wrap: anywhere;
+      text-align: start;
 
       @include is-sidebar-item {
         font-size: 12px;
diff --git a/src/renderer/themes.css b/src/renderer/themes.css
index 322de3823829f..1cad257028867 100644
--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@@ -925,6 +925,10 @@ body {
   --red-500: #f44336;
 }
 
+body p, body a {
+  text-align: start;
+}
+
 #app {
   color: var(--primary-text-color);
   background-color: var(--bg-color);

From e2e7bfb5deec7b707ddb3d210ea0988c553d599f Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 28 Aug 2023 21:06:24 -0500
Subject: [PATCH 18/67] Add text-align: start to places where it is not
 inferred to enable proper rtl text orientation

---
 .../components/ft-settings-section/ft-settings-section.scss     | 1 -
 src/renderer/components/side-nav/side-nav.css                   | 1 -
 src/renderer/themes.css                                         | 2 +-
 3 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/renderer/components/ft-settings-section/ft-settings-section.scss b/src/renderer/components/ft-settings-section/ft-settings-section.scss
index 817e93225e427..ddc6edd444d0c 100644
--- a/src/renderer/components/ft-settings-section/ft-settings-section.scss
+++ b/src/renderer/components/ft-settings-section/ft-settings-section.scss
@@ -44,7 +44,6 @@
   -webkit-user-select: none;
   user-select: none;
   margin-inline-start: 2%;
-  text-align: start;
 }
 
 :deep(.switchGrid) {
diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index 5dba438bc808b..784614c774f28 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@@ -72,7 +72,6 @@
   margin-inline-start: 40px;
   overflow: hidden;
   word-break: break-word;
-  text-align: start;
 }
 
 .navChannel .navLabel {
diff --git a/src/renderer/themes.css b/src/renderer/themes.css
index 1cad257028867..7fb7d6c27bd5d 100644
--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@@ -925,7 +925,7 @@ body {
   --red-500: #f44336;
 }
 
-body p, body a {
+body p, body a, body h2, body h3 {
   text-align: start;
 }
 

From 245c811d7bcace6aa5adda9249b26e2e0d8448e2 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 28 Aug 2023 22:10:03 -0500
Subject: [PATCH 19/67] Fix search bar magnifying glass being too far right
 issue

---
 src/renderer/components/ft-input/ft-input.css | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css
index e3c1dd438a7b1..c85e8b667fa99 100644
--- a/src/renderer/components/ft-input/ft-input.css
+++ b/src/renderer/components/ft-input/ft-input.css
@@ -2,6 +2,15 @@
   position: relative;
 }
 
+ body[dir='rtl'] .ft-input-component.search.showClearTextButton .inputAction {
+  inset-inline-end: -30px;
+ }
+
+ body[dir='rtl'] .ft-input-component.search.clearTextButtonVisible .inputAction,
+ body[dir='rtl'] .ft-input-component.search.showClearTextButton:focus-within .inputAction {
+  inset-inline-end: 0;
+ }
+
 .ft-input-component.search.showClearTextButton {
   padding-inline-start: 30px;
 }

From 32b34738eec34074866763b260ff620d8d88f4c4 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 28 Aug 2023 23:05:11 -0500
Subject: [PATCH 20/67] Move body.dir-setting logic to setLocale to fix dir not
 setting correctly on page reload

---
 src/renderer/App.js | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/renderer/App.js b/src/renderer/App.js
index d421172b6e859..b9786f33660f5 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -504,18 +504,17 @@ export default defineComponent({
     setWindowTitle: function() {
       if (this.windowTitle !== null) {
         document.title = this.windowTitle
-        const locale = this.$store.getters.getCurrentLocale
-        document.querySelector('html').lang = locale
-        if (locale === 'ar' || locale === 'fa' || locale === 'he' || locale === 'ur' || locale === 'yi') {
-          document.querySelector('body').dir = 'rtl'
-        } else {
-          document.querySelector('body').dir = 'ltr'
-        }
       }
     },
 
     setLocale: function() {
       document.documentElement.setAttribute('lang', this.locale)
+      const locale = this.$store.getters.getCurrentLocale
+      if (locale === 'ar' || locale === 'fa' || locale === 'he' || locale === 'ur' || locale === 'yi') {
+        document.body.dir = 'rtl'
+      } else {
+        document.body.dir = 'ltr'
+      }
     },
 
     /**

From fe8f397446ef4ee967a4571a4b6805c2dd8a2232 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 28 Aug 2023 23:08:15 -0500
Subject: [PATCH 21/67] Change .switchColumn to have align-items: start instead
 of justify-items: start

I have validated this for all settings tabs; the justify-content: start did nothing in any language, left-to-right or right-to-left. Replacing it with align-items: start aligned all menu switch items by their switches, not by their labels. This makes for a much more uniform settings section for trl languages.
---
 .../components/ft-settings-section/ft-settings-section.scss     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/ft-settings-section/ft-settings-section.scss b/src/renderer/components/ft-settings-section/ft-settings-section.scss
index ddc6edd444d0c..9fa31bcf8cf44 100644
--- a/src/renderer/components/ft-settings-section/ft-settings-section.scss
+++ b/src/renderer/components/ft-settings-section/ft-settings-section.scss
@@ -66,7 +66,7 @@
 :deep(.switchColumn) {
   display: flex;
   flex-direction: column;
-  justify-items: start;
+  align-items: start;
 }
 
 :deep(.center) {

From 5325cc27232eb95a420b6ae06ff3a9bbfcacfefe Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 28 Aug 2023 23:18:28 -0500
Subject: [PATCH 22/67] Fix emergent bug in which history icons are temporarily
 disabled on changing language to one with different directionality

Given that which icon is displayed for which history arrow is now dynamic based on the user's directionality, changing of the icon resets the font-awesome-icon state and thus re-adds the base disabled class to both arrows. This means that changing your language to one that has a different directionality was falsely setting the arrows to their disabled state (until the route is changed, after which the history icons will be fully back to normal). This commmit refactors the history icon setting logic to use class binding to two booleans in the top-nav component's data rather than adding and removing the disabled classes directly to the arrow elements' classLists, thus cleaning up the implementation and fixing the bug.
---
 src/renderer/components/top-nav/top-nav.js  | 14 ++++++++------
 src/renderer/components/top-nav/top-nav.vue | 10 ++++++----
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index b021aee2c2fae..e80be7d77c560 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -25,6 +25,8 @@ export default defineComponent({
       searchFilterValueChanged: false,
       historyIndex: 1,
       isForwardOrBack: false,
+      isArrowBackwardDisabled: true,
+      isArrowForwardDisabled: true,
       searchSuggestionsDataList: [],
       lastSuggestionQuery: ''
     }
@@ -289,8 +291,8 @@ export default defineComponent({
     navigateHistory: function () {
       if (!this.isForwardOrBack) {
         this.historyIndex = window.history.length
-        this.$refs.historyArrowBack.classList.remove('arrowBackwardDisabled')
-        this.$refs.historyArrowForward.classList.add('arrowForwardDisabled')
+        this.isArrowBackwardDisabled = false
+        this.isArrowForwardDisabled = true
       } else {
         this.isForwardOrBack = false
       }
@@ -302,9 +304,9 @@ export default defineComponent({
 
       if (this.historyIndex > 1) {
         this.historyIndex--
-        this.$refs.historyArrowForward.classList.remove('arrowForwardDisabled')
+        this.isArrowForwardDisabled = false
         if (this.historyIndex === 1) {
-          this.$refs.historyArrowBack.classList.add('arrowBackwardDisabled')
+          this.isArrowBackwardDisabled = true
         }
       }
     },
@@ -315,10 +317,10 @@ export default defineComponent({
 
       if (this.historyIndex < window.history.length) {
         this.historyIndex++
-        this.$refs.historyArrowBack.classList.remove('arrowBackwardDisabled')
+        this.isArrowBackwardDisabled = false
 
         if (this.historyIndex === window.history.length) {
-          this.$refs.historyArrowForward.classList.add('arrowForwardDisabled')
+          this.isArrowForwardDisabled = true
         }
       }
     },
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index c56e0a1d15d43..b61ec153f4b28 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -14,8 +14,9 @@
         @keydown.enter.prevent="toggleSideNav"
       />
       <font-awesome-icon
-        ref="historyArrowBack"
-        class="navIcon arrowBackwardDisabled"
+        :aria-disabled="isArrowBackwardDisabled"
+        class="navIcon"
+        :class="{ arrowBackwardDisabled: isArrowBackwardDisabled}"
         :icon="['fas', isDirectionLtr ? 'arrow-left' : 'arrow-right']"
         role="button"
         tabindex="0"
@@ -24,8 +25,9 @@
         @keydown.enter.prevent="historyBack"
       />
       <font-awesome-icon
-        ref="historyArrowForward"
-        class="navIcon arrowForwardDisabled"
+        :aria-disabled="isArrowForwardDisabled"
+        class="navIcon"
+        :class="{ arrowForwardDisabled: isArrowForwardDisabled}"
         :icon="['fas', isDirectionLtr ? 'arrow-right' : 'arrow-left']"
         role="button"
         tabindex="0"

From 251cde5b658f460f2b1ae37b6185b97e2e341cf5 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 29 Aug 2023 01:56:47 -0500
Subject: [PATCH 23/67] Add Kurdish to rtl languages list & add li items to be
 right-aligned on rtl languages

---
 src/renderer/App.js                        | 2 +-
 src/renderer/components/top-nav/top-nav.js | 2 +-
 src/renderer/themes.css                    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/renderer/App.js b/src/renderer/App.js
index b9786f33660f5..d57ba871f26a8 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -510,7 +510,7 @@ export default defineComponent({
     setLocale: function() {
       document.documentElement.setAttribute('lang', this.locale)
       const locale = this.$store.getters.getCurrentLocale
-      if (locale === 'ar' || locale === 'fa' || locale === 'he' || locale === 'ur' || locale === 'yi') {
+      if (locale === 'ar' || locale === 'fa' || locale === 'he' || locale === 'ur' || locale === 'yi' || locale === 'ku') {
         document.body.dir = 'rtl'
       } else {
         document.body.dir = 'ltr'
diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index e80be7d77c560..3fc5ec366f772 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -62,7 +62,7 @@ export default defineComponent({
 
     isDirectionLtr: function() {
       const locale = this.currentLocale
-      return !(locale === 'ar' || locale === 'fa' || locale === 'he' || locale === 'ur' || locale === 'yi')
+      return !(locale === 'ar' || locale === 'fa' || locale === 'he' || locale === 'ur' || locale === 'yi' || locale === 'ku')
     },
 
     backendFallback: function () {
diff --git a/src/renderer/themes.css b/src/renderer/themes.css
index 7fb7d6c27bd5d..3ed3f0224df33 100644
--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@@ -925,7 +925,7 @@ body {
   --red-500: #f44336;
 }
 
-body p, body a, body h2, body h3 {
+body p, body a, body h2, body h3, body li {
   text-align: start;
 }
 

From b38c5862b83a2fa0eed9c46fd96eccd81db129ce Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 29 Aug 2023 02:07:50 -0500
Subject: [PATCH 24/67] Force FreeTube logo to be ordered left-to-right for
 'brand consistency'

---
 src/renderer/components/top-nav/top-nav.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index b61ec153f4b28..9c43e44f39951 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -56,6 +56,7 @@
       <div
         v-if="!hideHeaderLogo"
         class="logo"
+        dir="ltr"
         role="link"
         tabindex="0"
         :title="$t('Subscriptions.Subscriptions')"

From d221f4314a7d41eb648483030f8b49304cb59a40 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 29 Aug 2023 04:01:36 -0500
Subject: [PATCH 25/67] Add styling flipping font-awesome icons for rtl
 languages except for exclusion list

---
 src/renderer/themes.css | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/renderer/themes.css b/src/renderer/themes.css
index 3ed3f0224df33..7729736c2c6c1 100644
--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@@ -905,16 +905,20 @@
 
 body[dir='ltr'] {
   --ltr-or-rtl: ltr;
-  --horizontal-directionality-coefficient: 1;
   --float-left-ltr-rtl-value: left;
   --float-right-ltr-rtl-value: right;
+  --horizontal-directionality-coefficient: 1;
 }
 
 body[dir='rtl'] {
   --ltr-or-rtl: rtl;
-  --horizontal-directionality-coefficient: -1;
   --float-left-ltr-rtl-value: right;
   --float-right-ltr-rtl-value: left;
+  --horizontal-directionality-coefficient: -1;
+}
+
+body[dir='rtl'] [data-prefix="fas"]:not([data-icon="arrow-left"]):not([data-icon="arrow-right"]):not([data-icon="magnifying-glass"]):not([data-icon="circle-question"]) {
+  transform: scale(-1,1);
 }
 
 body {

From b8462cc457dadead0ce0f5e40ac422f400ce69f7 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 29 Aug 2023 04:27:42 -0500
Subject: [PATCH 26/67] Update isRightAligned with additional languages, and
 use it instead of locale value from store

Kudos to absidue for pointing out this existing function for representing this, and that it grabs directly from the i18n object. This means that FreeTube will display the proper rtl interface if one is the user's system language, where it did not before.
---
 src/renderer/App.js                         | 6 +++---
 src/renderer/components/top-nav/top-nav.js  | 7 ++++---
 src/renderer/components/top-nav/top-nav.vue | 4 ++--
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/renderer/App.js b/src/renderer/App.js
index d57ba871f26a8..e76e0e4ce3e35 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -60,7 +60,8 @@ export default defineComponent({
       return this.$store.getters.getShowProgressBar
     },
     isRightAligned: function () {
-      return this.locale === 'ar' || this.locale === 'he'
+      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,8 +510,7 @@ export default defineComponent({
 
     setLocale: function() {
       document.documentElement.setAttribute('lang', this.locale)
-      const locale = this.$store.getters.getCurrentLocale
-      if (locale === 'ar' || locale === 'fa' || locale === 'he' || locale === 'ur' || locale === 'yi' || locale === 'ku') {
+      if (this.isRightAligned) {
         document.body.dir = 'rtl'
       } else {
         document.body.dir = 'ltr'
diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index 3fc5ec366f772..5b2b805323a13 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -60,9 +60,10 @@ export default defineComponent({
       return this.$store.getters.getCurrentLocale
     },
 
-    isDirectionLtr: function() {
-      const locale = this.currentLocale
-      return !(locale === 'ar' || locale === 'fa' || locale === 'he' || locale === 'ur' || locale === 'yi' || locale === 'ku')
+    isRightAligned: function() {
+      const locale = this.$i18n.locale.replace('_', '-')
+      return locale === 'ar' || locale === 'fa' || locale === 'he' ||
+        locale === 'ur' || locale === 'yi' || locale === 'ku'
     },
 
     backendFallback: function () {
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index 9c43e44f39951..c4624839e37b6 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -17,7 +17,7 @@
         :aria-disabled="isArrowBackwardDisabled"
         class="navIcon"
         :class="{ arrowBackwardDisabled: isArrowBackwardDisabled}"
-        :icon="['fas', isDirectionLtr ? 'arrow-left' : 'arrow-right']"
+        :icon="['fas', !isRightAligned ? 'arrow-left' : 'arrow-right']"
         role="button"
         tabindex="0"
         :title="backwardText"
@@ -28,7 +28,7 @@
         :aria-disabled="isArrowForwardDisabled"
         class="navIcon"
         :class="{ arrowForwardDisabled: isArrowForwardDisabled}"
-        :icon="['fas', isDirectionLtr ? 'arrow-right' : 'arrow-left']"
+        :icon="['fas', !isRightAligned ? 'arrow-right' : 'arrow-left']"
         role="button"
         tabindex="0"
         :title="forwardText"

From 03648af01ffbdc34c182e1af5cfb543c5a98127b Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 29 Aug 2023 04:28:33 -0500
Subject: [PATCH 27/67] Update isRightAligned property name to more clearly
 reflect rtl purpose

---
 src/renderer/App.js                         | 4 ++--
 src/renderer/App.vue                        | 2 +-
 src/renderer/components/top-nav/top-nav.js  | 2 +-
 src/renderer/components/top-nav/top-nav.vue | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/renderer/App.js b/src/renderer/App.js
index e76e0e4ce3e35..21db0394f2e90 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -59,7 +59,7 @@ export default defineComponent({
     showProgressBar: function () {
       return this.$store.getters.getShowProgressBar
     },
-    isRightAligned: function () {
+    isLocaleRightToLeft: function () {
       return this.locale === 'ar' || this.locale === 'fa' || this.locale === 'he' ||
         this.locale === 'ur' || this.locale === 'yi' || this.locale === 'ku'
     },
@@ -510,7 +510,7 @@ export default defineComponent({
 
     setLocale: function() {
       document.documentElement.setAttribute('lang', this.locale)
-      if (this.isRightAligned) {
+      if (this.isLocaleRightToLeft) {
         document.body.dir = 'rtl'
       } else {
         document.body.dir = 'ltr'
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 84ecb7ba348ab..9bc23ae602525 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -4,7 +4,7 @@
     id="app"
     :class="{
       hideOutlines: hideOutlines,
-      rightAligned: isRightAligned
+      rightAligned: isLocaleRightToLeft
     }"
   >
     <top-nav ref="topNav" />
diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index 5b2b805323a13..beb775770c21c 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -60,7 +60,7 @@ export default defineComponent({
       return this.$store.getters.getCurrentLocale
     },
 
-    isRightAligned: function() {
+    isLocaleRightToLeft: function() {
       const locale = this.$i18n.locale.replace('_', '-')
       return locale === 'ar' || locale === 'fa' || locale === 'he' ||
         locale === 'ur' || locale === 'yi' || locale === 'ku'
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index c4624839e37b6..1e7d40f2b6dfd 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -17,7 +17,7 @@
         :aria-disabled="isArrowBackwardDisabled"
         class="navIcon"
         :class="{ arrowBackwardDisabled: isArrowBackwardDisabled}"
-        :icon="['fas', !isRightAligned ? 'arrow-left' : 'arrow-right']"
+        :icon="['fas', !isLocaleRightToLeft ? 'arrow-left' : 'arrow-right']"
         role="button"
         tabindex="0"
         :title="backwardText"
@@ -28,7 +28,7 @@
         :aria-disabled="isArrowForwardDisabled"
         class="navIcon"
         :class="{ arrowForwardDisabled: isArrowForwardDisabled}"
-        :icon="['fas', !isRightAligned ? 'arrow-right' : 'arrow-left']"
+        :icon="['fas', !isLocaleRightToLeft ? 'arrow-right' : 'arrow-left']"
         role="button"
         tabindex="0"
         :title="forwardText"

From a16c7f7ac8b76c82a04b96aae17fba9a78e7146d Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 29 Aug 2023 08:22:41 -0500
Subject: [PATCH 28/67] Simplify left/right arrow display logic

Leverage the icons being flipped rather than manually setting the classes to their opposites when the directionality is RTL.
---
 src/renderer/components/top-nav/top-nav.js  | 6 ------
 src/renderer/components/top-nav/top-nav.vue | 4 ++--
 src/renderer/themes.css                     | 2 +-
 3 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index beb775770c21c..7f6161391e79a 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -60,12 +60,6 @@ export default defineComponent({
       return this.$store.getters.getCurrentLocale
     },
 
-    isLocaleRightToLeft: function() {
-      const locale = this.$i18n.locale.replace('_', '-')
-      return locale === 'ar' || locale === 'fa' || locale === 'he' ||
-        locale === 'ur' || locale === 'yi' || locale === 'ku'
-    },
-
     backendFallback: function () {
       return this.$store.getters.getBackendFallback
     },
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index 1e7d40f2b6dfd..03cd544ce1ac6 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -17,7 +17,7 @@
         :aria-disabled="isArrowBackwardDisabled"
         class="navIcon"
         :class="{ arrowBackwardDisabled: isArrowBackwardDisabled}"
-        :icon="['fas', !isLocaleRightToLeft ? 'arrow-left' : 'arrow-right']"
+        :icon="['fas', 'arrow-left']"
         role="button"
         tabindex="0"
         :title="backwardText"
@@ -28,7 +28,7 @@
         :aria-disabled="isArrowForwardDisabled"
         class="navIcon"
         :class="{ arrowForwardDisabled: isArrowForwardDisabled}"
-        :icon="['fas', !isLocaleRightToLeft ? 'arrow-right' : 'arrow-left']"
+        :icon="['fas', 'arrow-right']"
         role="button"
         tabindex="0"
         :title="forwardText"
diff --git a/src/renderer/themes.css b/src/renderer/themes.css
index 7729736c2c6c1..35ad1112157cd 100644
--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@@ -917,7 +917,7 @@ body[dir='rtl'] {
   --horizontal-directionality-coefficient: -1;
 }
 
-body[dir='rtl'] [data-prefix="fas"]:not([data-icon="arrow-left"]):not([data-icon="arrow-right"]):not([data-icon="magnifying-glass"]):not([data-icon="circle-question"]) {
+body[dir='rtl'] [data-prefix="fas"]:not([data-icon="magnifying-glass"]):not([data-icon="circle-question"]) {
   transform: scale(-1,1);
 }
 

From a96fc0cc5fe0f0fc3748fb5ff717954277111d75 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 29 Aug 2023 08:37:19 -0500
Subject: [PATCH 29/67] Replace justify-self: left & justify-self: right with
 justify-self; start and justify-self: end

---
 src/renderer/scss-partials/_ft-list-item.scss | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/renderer/scss-partials/_ft-list-item.scss b/src/renderer/scss-partials/_ft-list-item.scss
index e7deec60e09f2..3541a5267c845 100644
--- a/src/renderer/scss-partials/_ft-list-item.scss
+++ b/src/renderer/scss-partials/_ft-list-item.scss
@@ -108,7 +108,7 @@ $watched-transition-duration: 0.5s;
       align-self: flex-start;
       background-color: var(--bg-color);
       color: var(--primary-text-color);
-      justify-self: left;
+      justify-self: start;
       opacity: $thumbnail-overlay-opacity;
       padding: 2px;
       pointer-events: none;
@@ -120,7 +120,7 @@ $watched-transition-duration: 0.5s;
       border-radius: 5px;
       color: var(--primary-text-color);
       font-size: 15px;
-      justify-self: right;
+      justify-self: end;
       line-height: 1.2;
       margin-block: 0 4px;
       margin-inline: 0 4px;
@@ -142,14 +142,14 @@ $watched-transition-duration: 0.5s;
     .externalPlayerIcon {
       align-self: flex-end;
       font-size: 17px;
-      justify-self: left;
+      justify-self: start;
       margin-block-end: 4px;
       margin-inline-start: 4px;
     }
 
     .favoritesIcon {
       font-size: 17px;
-      justify-self: right;
+      justify-self: end;
       margin-inline-end: 3px;
       margin-block-start: 3px;
       height: fit-content;
@@ -167,7 +167,7 @@ $watched-transition-duration: 0.5s;
       align-self: stretch;
       display: grid;
       font-size: 20px;
-      justify-self: right;
+      justify-self: end;
       width: 60px;
 
       .background {

From a9d193763113c5a3ee9b13c4d88c4fc769cc3a1c Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 29 Aug 2023 14:31:37 -0500
Subject: [PATCH 30/67] Remove misguided attempt to emulate
 directionality-agnosticism with rightAligned class

---
 src/renderer/App.vue    | 2 +-
 src/renderer/themes.css | 8 --------
 2 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 9bc23ae602525..ed2ec65454021 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -4,7 +4,7 @@
     id="app"
     :class="{
       hideOutlines: hideOutlines,
-      rightAligned: isLocaleRightToLeft
+      isLocaleRightToLeft: isLocaleRightToLeft
     }"
   >
     <top-nav ref="topNav" />
diff --git a/src/renderer/themes.css b/src/renderer/themes.css
index 35ad1112157cd..e5bb3389215ed 100644
--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@@ -929,10 +929,6 @@ body {
   --red-500: #f44336;
 }
 
-body p, body a, body h2, body h3, body li {
-  text-align: start;
-}
-
 #app {
   color: var(--primary-text-color);
   background-color: var(--bg-color);
@@ -942,10 +938,6 @@ body p, body a, body h2, body h3, body li {
   outline: none;
 }
 
-.rightAligned {
-  text-align: end;
-}
-
 a:link {
     color: var(--link-color);
 }

From e6a8b5c89afd4f7a3c3802b136b1cb42c64fef52 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 29 Aug 2023 14:32:11 -0500
Subject: [PATCH 31/67] Explicitly center FreeTube version on About page

---
 src/renderer/views/About/About.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/renderer/views/About/About.scss b/src/renderer/views/About/About.scss
index 41592fbf7b997..a03e061095f0e 100644
--- a/src/renderer/views/About/About.scss
+++ b/src/renderer/views/About/About.scss
@@ -18,6 +18,7 @@
 }
 
 .version {
+  text-align: center;
   font-size: 2em;
 }
 

From 83db9b6d03b87c145ec4f06b41dffbf5d98d3468 Mon Sep 17 00:00:00 2001
From: Jason <84899178+jasonhenriquez@users.noreply.github.com>
Date: Wed, 30 Aug 2023 00:18:14 +0000
Subject: [PATCH 32/67] Replace pre-existing identation issue

---
 .../ft-notification-banner/ft-notification-banner.css           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/ft-notification-banner/ft-notification-banner.css b/src/renderer/components/ft-notification-banner/ft-notification-banner.css
index 4bf8377664972..822b66f99d0ce 100644
--- a/src/renderer/components/ft-notification-banner/ft-notification-banner.css
+++ b/src/renderer/components/ft-notification-banner/ft-notification-banner.css
@@ -6,7 +6,7 @@
   color: var(--text-with-accent-color);
   */
   margin: 4px;
-	padding: 16px;
+  padding: 16px;
   padding-block: 3px 5px;
   padding-inline: 16px;
   box-shadow: 0 1px 2px rgba(0,0,0,.1);

From 2617e7d8c7672942279d1ed6b80569755de4ff92 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Sun, 27 Aug 2023 19:18:48 -0500
Subject: [PATCH 33/67] Replace margin-left with margin-inline-start

---
 .../ft-community-post/ft-community-post.scss  |  6 +++---
 .../ft-search-filters/ft-search-filters.css   |  2 +-
 .../ft-settings-section.scss                  |  2 +-
 .../components/ft-tooltip/ft-tooltip.css      |  2 +-
 .../side-nav-more-options.css                 |  4 ++--
 src/renderer/components/side-nav/side-nav.css | 12 +++++------
 src/renderer/components/top-nav/top-nav.scss  |  4 ++--
 .../watch-video-chapters.css                  |  2 +-
 .../watch-video-comments.css                  | 20 +++++++++----------
 .../watch-video-info/watch-video-info.scss    | 10 +++++-----
 .../watch-video-live-chat.css                 | 18 ++++++++---------
 .../watch-video-playlist.css                  |  4 ++--
 src/renderer/scss-partials/_ft-list-item.scss |  2 +-
 src/renderer/videoJS.css                      | 12 +++++------
 src/renderer/views/Channel/Channel.css        |  6 +++---
 15 files changed, 53 insertions(+), 53 deletions(-)

diff --git a/src/renderer/components/ft-community-post/ft-community-post.scss b/src/renderer/components/ft-community-post/ft-community-post.scss
index ad3cf1c875022..3975b338d4021 100644
--- a/src/renderer/components/ft-community-post/ft-community-post.scss
+++ b/src/renderer/components/ft-community-post/ft-community-post.scss
@@ -56,7 +56,7 @@
   text-align: left;
 
   @media screen and (max-width: 680px) {
-    margin-left: 0;
+    margin-inline-start: 0;
     text-align: left;
   }
 
@@ -67,7 +67,7 @@
   }
 
   .likeCount {
-    margin-left: 5px;
+    margin-inline-start: 5px;
     margin-right: 6px;
   }
 }
@@ -91,7 +91,7 @@
   }
 
   .playlistText {
-    margin-left: 10px;
+    margin-inline-start: 10px;
     width: 50%;
     word-wrap: break-word;
 
diff --git a/src/renderer/components/ft-search-filters/ft-search-filters.css b/src/renderer/components/ft-search-filters/ft-search-filters.css
index b9052b3050c85..6115e010b10db 100644
--- a/src/renderer/components/ft-search-filters/ft-search-filters.css
+++ b/src/renderer/components/ft-search-filters/ft-search-filters.css
@@ -1,6 +1,6 @@
 .searchFilterInner {
   max-width: 800px;
-  margin-left: auto;
+  margin-inline-start: auto;
   margin-right: auto;
 
   padding: 20px 20px 70px 20px;
diff --git a/src/renderer/components/ft-settings-section/ft-settings-section.scss b/src/renderer/components/ft-settings-section/ft-settings-section.scss
index f22fce69983d7..c63550cd2dffe 100644
--- a/src/renderer/components/ft-settings-section/ft-settings-section.scss
+++ b/src/renderer/components/ft-settings-section/ft-settings-section.scss
@@ -41,7 +41,7 @@
 .sectionTitle {
   -webkit-user-select: none;
   user-select: none;
-  margin-left: 2%;
+  margin-inline-start: 2%;
 }
 
 :deep(.switchGrid) {
diff --git a/src/renderer/components/ft-tooltip/ft-tooltip.css b/src/renderer/components/ft-tooltip/ft-tooltip.css
index 3a1977d79983f..95a3929f581ec 100644
--- a/src/renderer/components/ft-tooltip/ft-tooltip.css
+++ b/src/renderer/components/ft-tooltip/ft-tooltip.css
@@ -77,7 +77,7 @@
 
 .text.right {
   left: 100%;
-  margin-left: 1em;
+  margin-inline-start: 1em;
   top: 50%;
   -webkit-transform: translate(-1em, -50%);
   transform: translate(-1em, -50%);
diff --git a/src/renderer/components/side-nav-more-options/side-nav-more-options.css b/src/renderer/components/side-nav-more-options/side-nav-more-options.css
index 146e64ebc2a4b..ff7f9891efaf5 100644
--- a/src/renderer/components/side-nav-more-options/side-nav-more-options.css
+++ b/src/renderer/components/side-nav-more-options/side-nav-more-options.css
@@ -57,7 +57,7 @@
   }
 
   .navLabel {
-    margin-left: 0px;
+    margin-inline-start: 0px;
     width: 100%;
     text-align: center;
     left: 0px;
@@ -65,7 +65,7 @@
   }
 
   .navIcon {
-    margin-left: 0px;
+    margin-inline-start: 0px;
     width: 100%;
     display: block;
     margin-top: 0.5em;
diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index a81c78bce68c2..51a95ee20a023 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@@ -65,18 +65,18 @@
 }
 
 .navIcon {
-  margin-left: 10px;
+  margin-inline-start: 10px;
 }
 
 .navOption .navLabel {
-  margin-left: 40px;
+  margin-inline-start: 40px;
   overflow: hidden;
   word-break: break-word;
 }
 
 .navChannel .navLabel {
   overflow: hidden;
-  margin-left: 40px;
+  margin-inline-start: 40px;
   word-break: break-word;
   font-size: 12px;
 }
@@ -128,7 +128,7 @@
 }
 
 .closed .navIcon {
-  margin-left: 0px;
+  margin-inline-start: 0px;
   width: 100%;
   display: block;
   margin-bottom: 0px;
@@ -138,7 +138,7 @@
 }
 
 .closed .navLabel {
-  margin-left: 0px;
+  margin-inline-start: 0px;
   width: 100%;
   text-align: center;
   left: 0px;
@@ -205,7 +205,7 @@
   }
 
   .navLabel {
-    margin-left: 0px;
+    margin-inline-start: 0px;
     width: 100%;
     text-align: center;
     left: 0px;
diff --git a/src/renderer/components/top-nav/top-nav.scss b/src/renderer/components/top-nav/top-nav.scss
index 6647409ff283f..0c26927305f45 100644
--- a/src/renderer/components/top-nav/top-nav.scss
+++ b/src/renderer/components/top-nav/top-nav.scss
@@ -87,7 +87,7 @@
 .navFilterIcon {
   $effect-distance: 10px;
 
-  margin-left: $effect-distance;
+  margin-inline-start: $effect-distance;
 
   &.filterChanged {
     box-shadow: 0 0 $effect-distance var(--primary-color);
@@ -154,7 +154,7 @@
       background-repeat: no-repeat;
       background-size: 100px;
       height: 40px;
-      margin-left: 5px;
+      margin-inline-start: 5px;
       position: relative;
       top: -3px;
       width: 100px;
diff --git a/src/renderer/components/watch-video-chapters/watch-video-chapters.css b/src/renderer/components/watch-video-chapters/watch-video-chapters.css
index d95bde01073f5..fa7aec0224aa7 100644
--- a/src/renderer/components/watch-video-chapters/watch-video-chapters.css
+++ b/src/renderer/components/watch-video-chapters/watch-video-chapters.css
@@ -30,7 +30,7 @@
 }
 
 .chaptersChevron.open {
-  margin-left: 4px;
+  margin-inline-start: 4px;
 }
 
 .chapter {
diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.css b/src/renderer/components/watch-video-comments/watch-video-comments.css
index ce1e0b0e95154..52d880502b7c2 100644
--- a/src/renderer/components/watch-video-comments/watch-video-comments.css
+++ b/src/renderer/components/watch-video-comments/watch-video-comments.css
@@ -72,7 +72,7 @@
 .commentAuthorWrapper {
   font-weight: bold;
   font-size: 14px;
-  margin-left: 68px;
+  margin-inline-start: 68px;
   margin-top: 0px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -93,7 +93,7 @@
   white-space: pre-wrap;
   font-size: 14px;
   margin-top: -10px;
-  margin-left: 70px;
+  margin-inline-start: 70px;
   word-wrap: break-word;
 }
 .commentPinned {
@@ -101,25 +101,25 @@
   font-size: 12px;
   margin-block-end: 0;
   margin-block-start: 0;
-  margin-left: 68px;
+  margin-inline-start: 68px;
   margin-bottom: 5px;
 }
 
 .commentDate {
   font-weight: normal;
-  margin-left: 5px;
+  margin-inline-start: 5px;
   font-size: 12px;
 }
 
 .commentMemberIcon {
-  margin-left: 5px;
+  margin-inline-start: 5px;
   width: 14px;
   height: 14px;
 }
 
 .commentLikeCount {
   font-size: 11px;
-  margin-left: 70px;
+  margin-inline-start: 70px;
   margin-top: 0px;
 }
 
@@ -128,7 +128,7 @@
   position: relative;
   width: 25px;
   height: 20px;
-  margin-left: 10px;
+  margin-inline-start: 10px;
   margin-bottom: -7px;
 }
 
@@ -162,18 +162,18 @@
 
 .commentMoreReplies {
   font-size: 11px;
-  margin-left: 5px;
+  margin-inline-start: 5px;
   text-decoration: underline;
   cursor: pointer;
   color: var(--title-color);
 }
 
 .commentReplies {
-  margin-left: 30px;
+  margin-inline-start: 30px;
 }
 
 .showMoreReplies {
-  margin-left: 30px;
+  margin-inline-start: 30px;
   font-size: 15px;
   cursor: pointer;
   text-decoration: underline;
diff --git a/src/renderer/components/watch-video-info/watch-video-info.scss b/src/renderer/components/watch-video-info/watch-video-info.scss
index 5dd5784c4058e..8d122cccb5038 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.scss
+++ b/src/renderer/components/watch-video-info/watch-video-info.scss
@@ -36,7 +36,7 @@
     color: inherit;
     cursor: pointer;
     display: block;
-    margin-left: 6px;
+    margin-inline-start: 6px;
     position: relative;
     text-decoration: inherit;
     top: -2px;
@@ -44,7 +44,7 @@
 
   .subscribeButton {
     font-size: 14px;
-    margin-left: 6px;
+    margin-inline-start: 6px;
     margin-top: 6px;
     padding: 6px;
   }
@@ -78,13 +78,13 @@
   display: flex;
   flex-direction: column;
   font-size: 16px;
-  margin-left: auto;
+  margin-inline-start: auto;
   margin-top: 4px;
   max-width: 210px;
   text-align: right;
 
   @media screen and (max-width: 680px) {
-    margin-left: 0;
+    margin-inline-start: 0;
     text-align: left;
   }
 
@@ -105,7 +105,7 @@
   margin-top: 16px;
 
   .option:not(:first-child) {
-    margin-left: 4px;
+    margin-inline-start: 4px;
   }
 
   @media screen and (max-width: 680px) {
diff --git a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
index d73623b60c09a..7727068ac1997 100644
--- a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
+++ b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
@@ -58,7 +58,7 @@
   display: inline-block;
   padding: 1px;
   padding-right: 10px;
-  margin-left: 2px;
+  margin-inline-start: 2px;
   margin-right: 2px;
   height: 30px;
   cursor: pointer;
@@ -68,14 +68,14 @@
 }
 
 .superChatContent {
-  margin-left: 32px;
+  margin-inline-start: 32px;
   margin-top: -25px;
   color: var(--text-with-main-color);
 }
 
 .superChat .channelThumbnail {
   margin-top: 3px;
-  margin-left: 3px;
+  margin-inline-start: 3px;
   height: 25px;
 }
 
@@ -88,7 +88,7 @@
   width: 100%;
   height: 415px;
   position: absolute;
-  margin-left: -16px;
+  margin-inline-start: -16px;
   padding-right: 32px;
   bottom: -15px;
   cursor: auto;
@@ -119,7 +119,7 @@
 .superChatMessage {
   width: 90%;
   grid-template-columns: auto;
-  margin-left: 5%;
+  margin-inline-start: 5%;
   margin-right: 5%;
   margin-top: 25px;
   margin-bottom: 10px;
@@ -140,7 +140,7 @@
 
 .upperSuperChatMessage .channelThumbnail {
   width: 45px;
-  margin-left: 10px;
+  margin-inline-start: 10px;
   margin-top: 5px;
 }
 
@@ -149,20 +149,20 @@
   opacity: 0.7;
   position: absolute;
   top: -20px;
-  margin-left: 65px;
+  margin-inline-start: 65px;
 }
 
 .upperSuperChatMessage .donationAmount {
   color: var(--text-with-main-color);
   font-weight: bold;
-  margin-left: 65px;
+  margin-inline-start: 65px;
   position: absolute;
   top: 0px;
 }
 
 .superChatMessage .chatMessage {
   color: var(--text-with-main-color);
-  margin-left: 20px;
+  margin-inline-start: 20px;
 }
 
 .liveChatComments {
diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.css b/src/renderer/components/watch-video-playlist/watch-video-playlist.css
index 16b10972e08b8..c5b0846b70dd1 100644
--- a/src/renderer/components/watch-video-playlist/watch-video-playlist.css
+++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.css
@@ -16,7 +16,7 @@
 }
 
 .playlistProgressBar {
-  margin-left: 10px;
+  margin-inline-start: 10px;
   /* > In order to let ::-webkit-progress-value take effect, appearance needs to be set to none on the <progress> element. */
   /* https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-value */
   appearance: none;
@@ -89,7 +89,7 @@
 }
 
 .videoInfo {
-  margin-left: 30px;
+  margin-inline-start: 30px;
   position: relative;
   bottom: 7px;
 }
diff --git a/src/renderer/scss-partials/_ft-list-item.scss b/src/renderer/scss-partials/_ft-list-item.scss
index 3774ae5d4cb84..e06ff750d2ee5 100644
--- a/src/renderer/scss-partials/_ft-list-item.scss
+++ b/src/renderer/scss-partials/_ft-list-item.scss
@@ -142,7 +142,7 @@ $watched-transition-duration: 0.5s;
       font-size: 17px;
       justify-self: left;
       margin-bottom: 4px;
-      margin-left: 4px;
+      margin-inline-start: 4px;
     }
 
     .favoritesIcon {
diff --git a/src/renderer/videoJS.css b/src/renderer/videoJS.css
index 813bb40c3302c..29dcdb16c2241 100644
--- a/src/renderer/videoJS.css
+++ b/src/renderer/videoJS.css
@@ -376,7 +376,7 @@
   font-size: inherit;
   line-height: inherit;
   list-style-position: outside;
-  margin-left: 0;
+  margin-inline-start: 0;
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 0;
@@ -596,7 +596,7 @@ body.vjs-full-window {
   top: 50%;
   left: 50%;
   margin-top: -0.81666em;
-  margin-left: -1.5em;
+  margin-inline-start: -1.5em;
 }
 
 .video-js:hover .vjs-big-play-button,
@@ -1127,7 +1127,7 @@ body.vjs-full-window {
   opacity: 0;
   width: 1px;
   height: 1px;
-  margin-left: -1px;
+  margin-inline-start: -1px;
 }
 
 .video-js .vjs-volume-tooltip {
@@ -1925,7 +1925,7 @@ video::-webkit-media-text-track-display {
 }
 
 .video-js .vjs-time-control.vjs-current-time {
-    margin-left: 1em
+    margin-inline-start: 1em
 }
 
 .video-js .vjs-time-control .vjs-current-time-display,.video-js .vjs-time-control .vjs-duration-display {
@@ -2017,13 +2017,13 @@ video::-webkit-media-text-track-display {
 }
 
 .video-js.vjs-live .vjs-live-control {
-    margin-left: 1em
+    margin-inline-start: 1em
 }
 
 .video-js .vjs-big-play-button {
     top: 50%;
     left: 50%;
-    margin-left: -1em;
+    margin-inline-start: -1em;
     margin-top: -1em;
     width: 2em;
     height: 2em;
diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css
index 190fd2e8ad7e8..31f6c8e4ddca8 100644
--- a/src/renderer/views/Channel/Channel.css
+++ b/src/renderer/views/Channel/Channel.css
@@ -75,13 +75,13 @@
 
 .channelSearch {
   width: 220px;
-  margin-left: auto;
+  margin-inline-start: auto;
   align-self: flex-end;
   flex: 1 1 0%;
 }
 
 .sortSelect {
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 .channelInfoTabs {
@@ -171,7 +171,7 @@
 
 .ft-community-image {
   display: block;
-  margin-left: auto;
+  margin-inline-start: auto;
   margin-right: auto;
 }
 

From bf1c458acf87d4317180e7f173d17a4a867d2690 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Sun, 27 Aug 2023 21:04:12 -0500
Subject: [PATCH 34/67] Replace margin-right with margin-inline-end

---
 .../ft-community-post/ft-community-post.scss         |  4 ++--
 .../ft-notification-banner.css                       |  2 +-
 .../ft-search-filters/ft-search-filters.css          |  2 +-
 src/renderer/components/ft-select/ft-select.css      |  4 ++--
 .../ft-settings-section/ft-settings-section.scss     |  2 +-
 .../components/ft-share-button/ft-share-button.scss  |  2 +-
 src/renderer/components/ft-tooltip/ft-tooltip.css    |  2 +-
 .../watch-video-info/watch-video-info.scss           |  4 ++--
 .../watch-video-live-chat/watch-video-live-chat.css  |  6 +++---
 src/renderer/scss-partials/_ft-list-item.scss        |  6 +++---
 src/renderer/videoJS.css                             | 12 ++++++------
 src/renderer/views/Channel/Channel.css               |  2 +-
 src/renderer/views/Playlist/Playlist.css             |  2 +-
 13 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/renderer/components/ft-community-post/ft-community-post.scss b/src/renderer/components/ft-community-post/ft-community-post.scss
index 3975b338d4021..acfad386cd2c9 100644
--- a/src/renderer/components/ft-community-post/ft-community-post.scss
+++ b/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;
 }
 
@@ -68,7 +68,7 @@
 
   .likeCount {
     margin-inline-start: 5px;
-    margin-right: 6px;
+    margin-inline-end: 6px;
   }
 }
 
diff --git a/src/renderer/components/ft-notification-banner/ft-notification-banner.css b/src/renderer/components/ft-notification-banner/ft-notification-banner.css
index fc4d165581095..a7368795605af 100644
--- a/src/renderer/components/ft-notification-banner/ft-notification-banner.css
+++ b/src/renderer/components/ft-notification-banner/ft-notification-banner.css
@@ -19,7 +19,7 @@
 }
 
 .message {
-  margin-right: 25px;
+  margin-inline-end: 25px;
   cursor: pointer;
 }
 
diff --git a/src/renderer/components/ft-search-filters/ft-search-filters.css b/src/renderer/components/ft-search-filters/ft-search-filters.css
index 6115e010b10db..6782abc926f8c 100644
--- a/src/renderer/components/ft-search-filters/ft-search-filters.css
+++ b/src/renderer/components/ft-search-filters/ft-search-filters.css
@@ -1,7 +1,7 @@
 .searchFilterInner {
   max-width: 800px;
   margin-inline-start: auto;
-  margin-right: auto;
+  margin-inline-end: auto;
 
   padding: 20px 20px 70px 20px;
   max-height: 410px;
diff --git a/src/renderer/components/ft-select/ft-select.css b/src/renderer/components/ft-select/ft-select.css
index 5387cdbbc2cd4..fb2cb82b58095 100644
--- a/src/renderer/components/ft-select/ft-select.css
+++ b/src/renderer/components/ft-select/ft-select.css
@@ -162,6 +162,6 @@
 @media only screen and (max-width: 680px) {
   .select {
     padding: 0px;
-    margin-right: -15px;
-  }  
+    margin-inline-end: -15px;
+  }
 }
diff --git a/src/renderer/components/ft-settings-section/ft-settings-section.scss b/src/renderer/components/ft-settings-section/ft-settings-section.scss
index c63550cd2dffe..04089ce44cf57 100644
--- a/src/renderer/components/ft-settings-section/ft-settings-section.scss
+++ b/src/renderer/components/ft-settings-section/ft-settings-section.scss
@@ -93,7 +93,7 @@
 
     :deep(.switch-ctn.containsTooltip) {
       left: -10px;
-      margin-right: 5px;
+      margin-inline-end: 5px;
       padding: 0 10px;
     }
 
diff --git a/src/renderer/components/ft-share-button/ft-share-button.scss b/src/renderer/components/ft-share-button/ft-share-button.scss
index ead1c516ae2e7..3bd9a29fb8983 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.scss
+++ b/src/renderer/components/ft-share-button/ft-share-button.scss
@@ -60,7 +60,7 @@
       background-size: cover;
       display: inline-block;
       height: 20px;
-      margin-right: 2px;
+      margin-inline-end: 2px;
       width: 20px;
 
       @at-root {
diff --git a/src/renderer/components/ft-tooltip/ft-tooltip.css b/src/renderer/components/ft-tooltip/ft-tooltip.css
index 95a3929f581ec..9fd0be2662e01 100644
--- a/src/renderer/components/ft-tooltip/ft-tooltip.css
+++ b/src/renderer/components/ft-tooltip/ft-tooltip.css
@@ -68,7 +68,7 @@
 }
 
 .text.left {
-  margin-right:1em;
+  margin-inline-end:1em;
   right: 100%;
   top: 50%;
   -webkit-transform: translate(1em, -50%);
diff --git a/src/renderer/components/watch-video-info/watch-video-info.scss b/src/renderer/components/watch-video-info/watch-video-info.scss
index 8d122cccb5038..f27d543f984d1 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.scss
+++ b/src/renderer/components/watch-video-info/watch-video-info.scss
@@ -28,7 +28,7 @@
   .channelThumbnail {
     border-radius: 50%;
     cursor: pointer;
-    margin-right: 10px;
+    margin-inline-end: 10px;
     width: 56px;
   }
 
@@ -95,7 +95,7 @@
   }
 
   .likeCount {
-    margin-right: 0;
+    margin-inline-end: 0;
   }
 }
 
diff --git a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
index 7727068ac1997..8424c2d09e258 100644
--- a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
+++ b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
@@ -59,7 +59,7 @@
   padding: 1px;
   padding-right: 10px;
   margin-inline-start: 2px;
-  margin-right: 2px;
+  margin-inline-end: 2px;
   height: 30px;
   cursor: pointer;
   background-color: var(--primary-color);
@@ -120,7 +120,7 @@
   width: 90%;
   grid-template-columns: auto;
   margin-inline-start: 5%;
-  margin-right: 5%;
+  margin-inline-end: 5%;
   margin-top: 25px;
   margin-bottom: 10px;
   background-color: var(--primary-color);
@@ -198,7 +198,7 @@
 }
 
 .owner {
-  margin-right: 2px;
+  margin-inline-end: 2px;
   background-color: var(--primary-color);
   color: var(--text-with-main-color);
 }
diff --git a/src/renderer/scss-partials/_ft-list-item.scss b/src/renderer/scss-partials/_ft-list-item.scss
index e06ff750d2ee5..32d334a559e80 100644
--- a/src/renderer/scss-partials/_ft-list-item.scss
+++ b/src/renderer/scss-partials/_ft-list-item.scss
@@ -148,7 +148,7 @@ $watched-transition-duration: 0.5s;
     .favoritesIcon {
       font-size: 17px;
       justify-self: right;
-      margin-right: 3px;
+      margin-inline-end: 3px;
       margin-top: 3px;
       height: fit-content;
     }
@@ -260,13 +260,13 @@ $watched-transition-duration: 0.5s;
 
     @include is-sidebar-item {
       .videoThumbnail {
-        margin-right: 10px;
+        margin-inline-end: 10px;
       }
     }
 
     .videoThumbnail,
     .channelThumbnail {
-      margin-right: 20px;
+      margin-inline-end: 20px;
     }
 
     .channelThumbnail {
diff --git a/src/renderer/videoJS.css b/src/renderer/videoJS.css
index 29dcdb16c2241..990d8d27aae5a 100644
--- a/src/renderer/videoJS.css
+++ b/src/renderer/videoJS.css
@@ -377,7 +377,7 @@
   line-height: inherit;
   list-style-position: outside;
   margin-inline-start: 0;
-  margin-right: 0;
+  margin-inline-end: 0;
   margin-top: 0;
   margin-bottom: 0;
 }
@@ -1113,7 +1113,7 @@ body.vjs-full-window {
 }
 .video-js .vjs-volume-control {
   cursor: pointer;
-  margin-right: 1em;
+  margin-inline-end: 1em;
   display: flex;
 }
 
@@ -1146,7 +1146,7 @@ body.vjs-full-window {
 .video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal {
   width: 5em;
   height: 3em;
-  margin-right: 0;
+  margin-inline-end: 0;
 }
 .video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical {
   left: -3.5em;
@@ -1337,7 +1337,7 @@ body.vjs-full-window {
 }
 
 .vjs-seek-to-live-control .vjs-icon-placeholder {
-  margin-right: 0.5em;
+  margin-inline-end: 0.5em;
   color: #888;
 }
 
@@ -1729,7 +1729,7 @@ video::-webkit-media-text-track-display {
   }
 }
 .vjs-track-setting > select {
-  margin-right: 1em;
+  margin-inline-end: 1em;
   margin-bottom: 0.5em;
 }
 
@@ -1785,7 +1785,7 @@ video::-webkit-media-text-track-display {
 }
 
 .vjs-track-settings-controls .vjs-default-button {
-  margin-right: 1em;
+  margin-inline-end: 1em;
 }
 
 @media print {
diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css
index 31f6c8e4ddca8..a7365888786f6 100644
--- a/src/renderer/views/Channel/Channel.css
+++ b/src/renderer/views/Channel/Channel.css
@@ -172,7 +172,7 @@
 .ft-community-image {
   display: block;
   margin-inline-start: auto;
-  margin-right: auto;
+  margin-inline-end: auto;
 }
 
 .community-post-container {
diff --git a/src/renderer/views/Playlist/Playlist.css b/src/renderer/views/Playlist/Playlist.css
index f762bfc71f93d..a38dd512bca9d 100644
--- a/src/renderer/views/Playlist/Playlist.css
+++ b/src/renderer/views/Playlist/Playlist.css
@@ -6,7 +6,7 @@
   background-color: var(--card-bg-color);
   box-sizing: border-box;
   height: calc(100vh - 132px);
-  margin-right: 1em;
+  margin-inline-end: 1em;
   overflow-y: auto;
   padding: 10px;
   position: sticky;

From 594adb88268da0ffef1bb333409a7daedb037123 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Sun, 27 Aug 2023 21:32:55 -0500
Subject: [PATCH 35/67] Replace padding-left with padding-inline-start

---
 .../experimental-settings/experimental-settings.css       | 2 +-
 src/renderer/components/ft-input-tags/ft-input-tags.css   | 2 +-
 src/renderer/components/ft-input/ft-input.css             | 8 ++++----
 .../components/ft-radio-button/ft-radio-button.css        | 2 +-
 src/renderer/components/side-nav/side-nav.css             | 2 +-
 src/renderer/videoJS.css                                  | 4 ++--
 src/renderer/views/Channel/Channel.css                    | 4 ++--
 7 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/renderer/components/experimental-settings/experimental-settings.css b/src/renderer/components/experimental-settings/experimental-settings.css
index 58e50c3ab6762..de4541a52d739 100644
--- a/src/renderer/components/experimental-settings/experimental-settings.css
+++ b/src/renderer/components/experimental-settings/experimental-settings.css
@@ -1,6 +1,6 @@
 .experimental-warning {
   text-align: center;
   font-weight: bold;
-  padding-left: 4%;
+  padding-inline-start: 4%;
   padding-right: 4%
 }
diff --git a/src/renderer/components/ft-input-tags/ft-input-tags.css b/src/renderer/components/ft-input-tags/ft-input-tags.css
index d5878a42a6204..a2ce70eeb607d 100644
--- a/src/renderer/components/ft-input-tags/ft-input-tags.css
+++ b/src/renderer/components/ft-input-tags/ft-input-tags.css
@@ -26,7 +26,7 @@
 .ft-tag-box li>span {
   padding-top: 10px;
   padding-bottom: 10px;
-  padding-left: 10px;
+  padding-inline-start: 10px;
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-all;
diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css
index 26cc385cd95ab..65c6e78692eec 100644
--- a/src/renderer/components/ft-input/ft-input.css
+++ b/src/renderer/components/ft-input/ft-input.css
@@ -3,22 +3,22 @@
 }
 
 .ft-input-component.search.showClearTextButton {
-  padding-left: 30px;
+  padding-inline-start: 30px;
 }
 
 .ft-input-component.search.clearTextButtonVisible,
 .ft-input-component.search.showClearTextButton:focus-within {
-  padding-left: 0;
+  padding-inline-start: 0;
 }
 
 .ft-input-component.showClearTextButton:not(.search) .ft-input {
-  padding-left: 46px;
+  padding-inline-start: 46px;
 }
 
 /* Main search input */
 .clearTextButtonVisible.search .ft-input,
 .ft-input-component.search.showClearTextButton:focus-within .ft-input {
-  padding-left: 46px;
+  padding-inline-start: 46px;
 }
 
 .ft-input-component:focus-within .clearInputTextButton {
diff --git a/src/renderer/components/ft-radio-button/ft-radio-button.css b/src/renderer/components/ft-radio-button/ft-radio-button.css
index 7c5aa29e1254f..9ad75972f5ace 100644
--- a/src/renderer/components/ft-radio-button/ft-radio-button.css
+++ b/src/renderer/components/ft-radio-button/ft-radio-button.css
@@ -17,7 +17,7 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
 
 .pure-checkbox input[type="checkbox"] + label, .pure-radiobutton input[type="checkbox"] + label, .pure-checkbox input[type="radio"] + label, .pure-radiobutton input[type="radio"] + label {
   position: relative;
-  padding-left: 2em;
+  padding-inline-start: 2em;
   vertical-align: middle;
   -webkit-user-select: none;
   user-select: none;
diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index 51a95ee20a023..316d4befb8508 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@@ -183,7 +183,7 @@
 
   .topNavOption {
     margin-top: 0px;
-    padding-left: 10px;
+    padding-inline-start: 10px;
     padding-right: 10px;
   }
 
diff --git a/src/renderer/videoJS.css b/src/renderer/videoJS.css
index 990d8d27aae5a..c0dab26a33c14 100644
--- a/src/renderer/videoJS.css
+++ b/src/renderer/videoJS.css
@@ -1313,7 +1313,7 @@ body.vjs-full-window {
   flex: none;
   display: inline-flex;
   height: 100%;
-  padding-left: 0.5em;
+  padding-inline-start: 0.5em;
   padding-right: 0.5em;
   font-size: 1em;
   line-height: 3em;
@@ -1351,7 +1351,7 @@ body.vjs-full-window {
   line-height: 3.7em;
   min-width: 2em;
   width: auto;
-  padding-left: 0em;
+  padding-inline-start: 0em;
   padding-right: 0em;
 }
 
diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css
index a7365888786f6..78e50eb00bbb7 100644
--- a/src/renderer/views/Channel/Channel.css
+++ b/src/renderer/views/Channel/Channel.css
@@ -153,7 +153,7 @@
   display: flex;
   justify-content: center;
   flex-direction: column;
-  padding-left: 1em;
+  padding-inline-start: 1em;
 }
 
 .channelLineContainer h1,
@@ -176,7 +176,7 @@
 }
 
 .community-post-container {
-  padding-left: 30%;
+  padding-inline-start: 30%;
   padding-right: 30%;
 }
 

From 0427ceee9994d2a3d24bff8204727d970d3904eb Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Sun, 27 Aug 2023 21:36:13 -0500
Subject: [PATCH 36/67] Replace padding-right with padding-inline-end

---
 src/renderer/components/channel-about/channel-about.css     | 2 +-
 .../experimental-settings/experimental-settings.css         | 2 +-
 src/renderer/components/ft-input/ft-input.css               | 2 +-
 .../components/ft-profile-selector/ft-profile-selector.css  | 2 +-
 src/renderer/components/ft-select/ft-select.css             | 2 +-
 src/renderer/components/side-nav/side-nav.css               | 2 +-
 .../watch-video-live-chat/watch-video-live-chat.css         | 6 +++---
 src/renderer/videoJS.css                                    | 4 ++--
 src/renderer/views/Channel/Channel.css                      | 2 +-
 9 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/renderer/components/channel-about/channel-about.css b/src/renderer/components/channel-about/channel-about.css
index 348768ec4aaa2..6d14c5b71ddab 100644
--- a/src/renderer/components/channel-about/channel-about.css
+++ b/src/renderer/components/channel-about/channel-about.css
@@ -38,5 +38,5 @@
 }
 
 .aboutDetails th {
-  padding-right: 10px;
+  padding-inline-end: 10px;
 }
diff --git a/src/renderer/components/experimental-settings/experimental-settings.css b/src/renderer/components/experimental-settings/experimental-settings.css
index de4541a52d739..3f20bf0554619 100644
--- a/src/renderer/components/experimental-settings/experimental-settings.css
+++ b/src/renderer/components/experimental-settings/experimental-settings.css
@@ -2,5 +2,5 @@
   text-align: center;
   font-weight: bold;
   padding-inline-start: 4%;
-  padding-right: 4%
+  padding-inline-end: 4%
 }
diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css
index 65c6e78692eec..d3c21a7836a2b 100644
--- a/src/renderer/components/ft-input/ft-input.css
+++ b/src/renderer/components/ft-input/ft-input.css
@@ -153,7 +153,7 @@
   With arrow present means
   the text might get under the arrow with normal padding
    */
-  padding-right: calc(36px + 6px);
+  padding-inline-end: calc(36px + 6px);
 }
 
 .inputAction.enabled:hover {
diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.css b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
index b63bbfeba5ba9..ca4e372134194 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.css
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
@@ -66,7 +66,7 @@
   display: flex;
   align-items: center;
   height: 50px;
-  padding-right: 10px;
+  padding-inline-end: 10px;
 }
 
 .profileListTitle {
diff --git a/src/renderer/components/ft-select/ft-select.css b/src/renderer/components/ft-select/ft-select.css
index fb2cb82b58095..6344e0edc466e 100644
--- a/src/renderer/components/ft-select/ft-select.css
+++ b/src/renderer/components/ft-select/ft-select.css
@@ -60,7 +60,7 @@
   appearance: none;
   -webkit-appearance:none;
   text-overflow: ellipsis;
-  padding-right: 1.1rem;
+  padding-inline-end: 1.1rem;
 }
 
 .iconSelect {
diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index 316d4befb8508..ac2bfb9d1ab60 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@@ -184,7 +184,7 @@
   .topNavOption {
     margin-top: 0px;
     padding-inline-start: 10px;
-    padding-right: 10px;
+    padding-inline-end: 10px;
   }
 
   .sideNav, .closed {
diff --git a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
index 8424c2d09e258..6add3c493037e 100644
--- a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
+++ b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
@@ -57,7 +57,7 @@
 .superChat {
   display: inline-block;
   padding: 1px;
-  padding-right: 10px;
+  padding-inline-end: 10px;
   margin-inline-start: 2px;
   margin-inline-end: 2px;
   height: 30px;
@@ -89,7 +89,7 @@
   height: 415px;
   position: absolute;
   margin-inline-start: -16px;
-  padding-right: 32px;
+  padding-inline-end: 32px;
   bottom: -15px;
   cursor: auto;
   z-index: 1;
@@ -186,7 +186,7 @@
 .channelName {
   color: var(--tertiary-text-color);
   font-weight: bold;
-  padding-right: 5px;
+  padding-inline-end: 5px;
 }
 
 .member {
diff --git a/src/renderer/videoJS.css b/src/renderer/videoJS.css
index c0dab26a33c14..84a3b0bcdbbf1 100644
--- a/src/renderer/videoJS.css
+++ b/src/renderer/videoJS.css
@@ -1314,7 +1314,7 @@ body.vjs-full-window {
   display: inline-flex;
   height: 100%;
   padding-inline-start: 0.5em;
-  padding-right: 0.5em;
+  padding-inline-end: 0.5em;
   font-size: 1em;
   line-height: 3em;
   width: auto;
@@ -1352,7 +1352,7 @@ body.vjs-full-window {
   min-width: 2em;
   width: auto;
   padding-inline-start: 0em;
-  padding-right: 0em;
+  padding-inline-end: 0em;
 }
 
 .vjs-live .vjs-time-control {
diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css
index 78e50eb00bbb7..c57c3604990e4 100644
--- a/src/renderer/views/Channel/Channel.css
+++ b/src/renderer/views/Channel/Channel.css
@@ -177,7 +177,7 @@
 
 .community-post-container {
   padding-inline-start: 30%;
-  padding-right: 30%;
+  padding-inline-end: 30%;
 }
 
 @media only screen and (max-width: 800px) {

From 68a00a8ceb8e3c88059b917e7a42ad90610b483a Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Sun, 27 Aug 2023 22:59:04 -0500
Subject: [PATCH 37/67] Replace padding-top & padding-bottom with
 padding-block; continue replacing  padding-left and padding-right with
 padding-inline-start and padding-inline-end

---
 .../ft-age-restricted/ft-age-restricted.scss    |  6 ++++--
 src/renderer/components/ft-button/ft-button.css |  3 ++-
 src/renderer/components/ft-card/ft-card.css     |  5 ++---
 .../ft-community-poll/ft-community-poll.css     |  9 +++++----
 .../ft-community-post/ft-community-post.scss    |  4 ++--
 .../ft-icon-button/ft-icon-button.scss          |  3 ++-
 .../components/ft-input-tags/ft-input-tags.css  |  3 +--
 src/renderer/components/ft-input/ft-input.css   |  3 ++-
 .../ft-notification-banner.css                  |  4 ++--
 .../ft-profile-bubble/ft-profile-bubble.css     |  6 ++++--
 .../ft-profile-edit/ft-profile-edit.css         |  3 ++-
 .../ft-search-filters/ft-search-filters.css     |  3 ++-
 src/renderer/components/ft-select/ft-select.css |  6 ++++--
 .../ft-settings-section.scss                    |  8 +++++---
 src/renderer/components/ft-slider/ft-slider.css |  3 ++-
 .../ft-sponsor-block-category.scss              |  3 ++-
 .../ft-toggle-switch/ft-toggle-switch.scss      |  3 ++-
 .../components/ft-tooltip/ft-tooltip.css        |  3 ++-
 .../side-nav-more-options.css                   |  3 ++-
 src/renderer/components/side-nav/side-nav.css   | 10 ++++++----
 src/renderer/components/top-nav/top-nav.scss    |  3 ++-
 .../watch-video-chapters.css                    |  3 ++-
 .../watch-video-comments.css                    | 17 +++++++----------
 .../watch-video-live-chat.css                   |  3 +--
 src/renderer/scss-partials/_ft-list-item.scss   |  5 +++--
 src/renderer/views/Channel/Channel.css          |  8 +++++---
 .../SubscribedChannels/SubscribedChannels.css   |  3 ++-
 src/renderer/views/Watch/Watch.scss             |  3 ++-
 28 files changed, 79 insertions(+), 57 deletions(-)

diff --git a/src/renderer/components/ft-age-restricted/ft-age-restricted.scss b/src/renderer/components/ft-age-restricted/ft-age-restricted.scss
index a30ab65b880bd..34bc140b7e4b9 100644
--- a/src/renderer/components/ft-age-restricted/ft-age-restricted.scss
+++ b/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%;
   }
diff --git a/src/renderer/components/ft-button/ft-button.css b/src/renderer/components/ft-button/ft-button.css
index 49e3a6e1c5757..2a00cab980d9f 100644
--- a/src/renderer/components/ft-button/ft-button.css
+++ b/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;
diff --git a/src/renderer/components/ft-card/ft-card.css b/src/renderer/components/ft-card/ft-card.css
index 7048b65424b4a..7f9c2c571f060 100644
--- a/src/renderer/components/ft-card/ft-card.css
+++ b/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);
 }
diff --git a/src/renderer/components/ft-community-poll/ft-community-poll.css b/src/renderer/components/ft-community-poll/ft-community-poll.css
index a92808a54be03..39264321d030e 100644
--- a/src/renderer/components/ft-community-poll/ft-community-poll.css
+++ b/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;
 }
 
@@ -16,7 +16,7 @@
   top: 8px;
   width: 10px;
 }
-  
+
 .filled-circle {
   border-radius: 50%;
   background-color: black;
@@ -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 {
diff --git a/src/renderer/components/ft-community-post/ft-community-post.scss b/src/renderer/components/ft-community-post/ft-community-post.scss
index acfad386cd2c9..e2fa2d06678da 100644
--- a/src/renderer/components/ft-community-post/ft-community-post.scss
+++ b/src/renderer/components/ft-community-post/ft-community-post.scss
@@ -111,7 +111,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 +128,5 @@
 
 .ft-list-item.grid {
   min-height: 0 !important;
-  padding-bottom: 20px;
+  padding-block-end: 20px;
 }
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.scss b/src/renderer/components/ft-icon-button/ft-icon-button.scss
index 8a8bdc6723752..823575a3f1079 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.scss
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss
@@ -115,7 +115,8 @@
   .listItem {
     cursor: pointer;
     margin: 0;
-    padding: 8px 10px;
+    padding-block: 8px;
+    padding-inline: 10px;
     transition: background 0.2s ease-out;
     white-space: nowrap;
 
diff --git a/src/renderer/components/ft-input-tags/ft-input-tags.css b/src/renderer/components/ft-input-tags/ft-input-tags.css
index a2ce70eeb607d..8bdb606d4082a 100644
--- a/src/renderer/components/ft-input-tags/ft-input-tags.css
+++ b/src/renderer/components/ft-input-tags/ft-input-tags.css
@@ -24,8 +24,7 @@
 }
 
 .ft-tag-box li>span {
-  padding-top: 10px;
-  padding-bottom: 10px;
+  padding-block: 10px;
   padding-inline-start: 10px;
   overflow-wrap: break-word;
   word-wrap: break-word;
diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css
index d3c21a7836a2b..a652ab7fa1269 100644
--- a/src/renderer/components/ft-input/ft-input.css
+++ b/src/renderer/components/ft-input/ft-input.css
@@ -183,7 +183,8 @@
   width: 100%;
   list-style: none;
   margin: 0;
-  padding: 5px 0;
+  padding-block: 5px;
+  padding-inline: 0;
   z-index: 10;
   border-radius: 0 0 5px 5px;
   word-wrap: break-word;
diff --git a/src/renderer/components/ft-notification-banner/ft-notification-banner.css b/src/renderer/components/ft-notification-banner/ft-notification-banner.css
index a7368795605af..a9ca9614b0a44 100644
--- a/src/renderer/components/ft-notification-banner/ft-notification-banner.css
+++ b/src/renderer/components/ft-notification-banner/ft-notification-banner.css
@@ -7,8 +7,8 @@
   */
   margin: 4px;
 	padding: 16px;
-	padding-top: 3px;
-	padding-bottom: 5px;
+  padding-block: 3px 5px;
+  padding-inline: 16px;
   box-shadow: 0 1px 2px rgba(0,0,0,.1);
   position: relative;
   cursor: pointer;
diff --git a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
index 2d2df9b0c1fb3..d99fdeaaf3422 100644
--- a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
+++ b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
@@ -1,7 +1,8 @@
 .bubblePadding {
   width: 100px;
   height: 115px;
-  padding: 10px 10px 30px 10px;
+  padding-block: 10px 30px;
+  padding-inline: 10px;
   cursor: pointer;
   -webkit-transition: background 0.2s ease-out;
   -moz-transition: background 0.2s ease-out;
@@ -28,7 +29,8 @@
   font-size: 35px;
   line-height: 1em;
   text-align: center;
-  padding: 17.5px 0;
+  padding-block: 17.5px;
+  padding-inline: 0;
   user-select: none;
   -webkit-user-select: none;
 }
diff --git a/src/renderer/components/ft-profile-edit/ft-profile-edit.css b/src/renderer/components/ft-profile-edit/ft-profile-edit.css
index 3db26c9236a2e..aefd0f7298e80 100644
--- a/src/renderer/components/ft-profile-edit/ft-profile-edit.css
+++ b/src/renderer/components/ft-profile-edit/ft-profile-edit.css
@@ -35,7 +35,8 @@
   font-size: 50px;
   line-height: 1em;
   text-align: center;
-  padding: 25px 0;
+  padding-block: 25px;
+  padding-inline: 0px;
   user-select: none;
   -webkit-user-select: none;
 }
diff --git a/src/renderer/components/ft-search-filters/ft-search-filters.css b/src/renderer/components/ft-search-filters/ft-search-filters.css
index 6782abc926f8c..4066da7b650e6 100644
--- a/src/renderer/components/ft-search-filters/ft-search-filters.css
+++ b/src/renderer/components/ft-search-filters/ft-search-filters.css
@@ -3,7 +3,8 @@
   margin-inline-start: auto;
   margin-inline-end: auto;
 
-  padding: 20px 20px 70px 20px;
+  padding-block: 20px 70px;
+  padding-inline: 20px;
   max-height: 410px;
   overflow-y: auto;
 
diff --git a/src/renderer/components/ft-select/ft-select.css b/src/renderer/components/ft-select/ft-select.css
index 6344e0edc466e..7f0701abe74b8 100644
--- a/src/renderer/components/ft-select/ft-select.css
+++ b/src/renderer/components/ft-select/ft-select.css
@@ -24,7 +24,8 @@
 .select {
   position: relative;
   width: 200px;
-  padding: 0px 10px 10px 0;
+  padding-block: 0 10px;
+  padding-inline: 0 10px;
   margin-top: 30px;
 }
 
@@ -39,7 +40,8 @@
   background-color: transparent;
   color: var(--primary-text-color);
   width: 240px;
-  padding: 10px 10px 10px 0;
+  padding-block: 10px;
+  padding-inline: 0 10px;
   font-size: 18px;
   border-radius: 0;
   border: none;
diff --git a/src/renderer/components/ft-settings-section/ft-settings-section.scss b/src/renderer/components/ft-settings-section/ft-settings-section.scss
index 04089ce44cf57..624da337bcf6e 100644
--- a/src/renderer/components/ft-settings-section/ft-settings-section.scss
+++ b/src/renderer/components/ft-settings-section/ft-settings-section.scss
@@ -8,12 +8,13 @@
   }
 
   &[open] {
-    padding-bottom: 15px;
+    padding-block-end: 15px;
   }
 
   > div {
     box-sizing: border-box;
-    padding: 0 20px;
+    padding-block: 0;
+    padding-inline: 20px;
     width: 100%;
   }
 
@@ -94,7 +95,8 @@
     :deep(.switch-ctn.containsTooltip) {
       left: -10px;
       margin-inline-end: 5px;
-      padding: 0 10px;
+      padding-block: 0;
+      padding-inline: 10px;
     }
 
     :not(.select, .selectLabel) {
diff --git a/src/renderer/components/ft-slider/ft-slider.css b/src/renderer/components/ft-slider/ft-slider.css
index b4169819a5365..852d2b3f65367 100644
--- a/src/renderer/components/ft-slider/ft-slider.css
+++ b/src/renderer/components/ft-slider/ft-slider.css
@@ -177,7 +177,8 @@
     margin: 17px 0;
     border: none;
     border-radius: 1px;
-    padding: 0 17px;
+    padding-block: 0;
+    padding-inline: 17px;
     width: 100%;
     height: 2px;
     background-color: transparent;
diff --git a/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.scss b/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.scss
index 9fff4e5cc826b..5c03586317a91 100644
--- a/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.scss
+++ b/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.scss
@@ -1,6 +1,7 @@
 .sponsorBlockCategory {
   margin-top: 30px;
-  padding: 0 10px;
+  padding-block: 0;
+  padding-inline: 10px;
 
   @media only screen and (max-width: 680px) {
     width: 100%;
diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
index d116fcf7450e4..47301a0104635 100644
--- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
+++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
@@ -23,7 +23,8 @@
   cursor: pointer;
   display: inline-block;
   font-weight: 500;
-  padding: 12px 0 12px 44px;
+  padding-block: 12px;
+  padding-inline: 44px 0;
   position: relative;
   text-align: left;
 
diff --git a/src/renderer/components/ft-tooltip/ft-tooltip.css b/src/renderer/components/ft-tooltip/ft-tooltip.css
index 9fd0be2662e01..85c5ccb7096a0 100644
--- a/src/renderer/components/ft-tooltip/ft-tooltip.css
+++ b/src/renderer/components/ft-tooltip/ft-tooltip.css
@@ -41,7 +41,8 @@
   max-width: max-content;
   min-width: 15em;
   opacity: 0;
-  padding: 10px 8px;
+  padding-block: 10px;
+  padding-inline: 8px;
   pointer-events: none;
   position: absolute;
   text-align: center;
diff --git a/src/renderer/components/side-nav-more-options/side-nav-more-options.css b/src/renderer/components/side-nav-more-options/side-nav-more-options.css
index ff7f9891efaf5..02799d9f5156e 100644
--- a/src/renderer/components/side-nav-more-options/side-nav-more-options.css
+++ b/src/renderer/components/side-nav-more-options/side-nav-more-options.css
@@ -53,7 +53,8 @@
   .navOption, .closed .navOption {
     width: 70px;
     height: 40px;
-    padding: 10px 0px;
+    padding-block: 10px;
+    padding-inline: 0;
   }
 
   .navLabel {
diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index ac2bfb9d1ab60..a251292948103 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@@ -124,7 +124,8 @@
 
 .closed .navOption {
   width: 100%;
-  padding: 5px 0px;
+  padding-block: 5px;
+  padding-inline: 0;
 }
 
 .closed .navIcon {
@@ -149,7 +150,8 @@
 .closed .navChannel {
   width: 100%;
   height: 45px;
-  padding: 5px 0px;
+  padding-block: 5px;
+  padding-inline: 0;
 }
 
 .closed .thumbnailContainer {
@@ -200,8 +202,8 @@
     width: 70px;
     height: 40px;
     padding: 0px;
-    padding-top: 10px;
-    padding-bottom: 10px;
+    padding-block-start: 10px;
+    padding-block-end: 10px;
   }
 
   .navLabel {
diff --git a/src/renderer/components/top-nav/top-nav.scss b/src/renderer/components/top-nav/top-nav.scss
index 0c26927305f45..9f643b9bdbcb3 100644
--- a/src/renderer/components/top-nav/top-nav.scss
+++ b/src/renderer/components/top-nav/top-nav.scss
@@ -124,7 +124,8 @@
     align-items: center;
     cursor: pointer;
     display: flex;
-    padding: 0 25px 0 10px;
+    padding-block: 0;
+    padding-inline: 10px 25px;
 
     &:active {
       background-color: var(--tertiary-text-color);
diff --git a/src/renderer/components/watch-video-chapters/watch-video-chapters.css b/src/renderer/components/watch-video-chapters/watch-video-chapters.css
index fa7aec0224aa7..54358e41d6e25 100644
--- a/src/renderer/components/watch-video-chapters/watch-video-chapters.css
+++ b/src/renderer/components/watch-video-chapters/watch-video-chapters.css
@@ -76,7 +76,8 @@
 .chapterTimestamp {
   grid-area: timestamp;
   align-self: flex-start;
-  padding: 3px 4px;
+  padding-block: 3px;
+  padding-inline: 4px;
   border-radius: 5px;
   background-color: var(--accent-color);
   color: var(--text-with-accent-color);
diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.css b/src/renderer/components/watch-video-comments/watch-video-comments.css
index 52d880502b7c2..f2a44196a30d0 100644
--- a/src/renderer/components/watch-video-comments/watch-video-comments.css
+++ b/src/renderer/components/watch-video-comments/watch-video-comments.css
@@ -1,5 +1,6 @@
 .card {
-  padding: 0 16px;
+  padding-block: 0;
+  padding-inline: 16px;
 }
 
 .getCommentsTitle,
@@ -9,8 +10,7 @@
 }
 
 .getCommentsTitle {
-  padding-bottom: 8px;
-  padding-top: 8px;
+  padding-block: 8px;
   text-align: center;
   text-decoration: underline;
   cursor: pointer;
@@ -18,15 +18,12 @@
 }
 
 .noCommentMsg {
-  padding-top: 1em;
-  padding-bottom: 1em;
-
+  padding-block: 1em;
   text-align: center;
 }
 
 .commentsTitle {
-  padding-bottom: 1em;
-  padding-top: 1em;
+  padding-block: 1em;
 }
 
 .commentSort {
@@ -81,7 +78,7 @@
 .commentOwner {
   background-color: var(--scrollbar-color);
   border-radius: 10px;
-  padding: 0 10px;
+  padding-inline: 10px;
 }
 
 .commentAuthor {
@@ -180,7 +177,7 @@
 }
 
 .getMoreComments {
-  padding-bottom: 1em;
+  padding-block-end: 1em;
 
   text-align: center;
   text-decoration: underline;
diff --git a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
index 6add3c493037e..d70ddb9db28aa 100644
--- a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
+++ b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
@@ -109,8 +109,7 @@
 
 .comment {
   width: 100%;
-  padding-top: 5px;
-  padding-bottom: 7px;
+  padding-block: 5px 7px;
   display: grid;
   grid-template-columns: min-content auto;
   gap: 5px;
diff --git a/src/renderer/scss-partials/_ft-list-item.scss b/src/renderer/scss-partials/_ft-list-item.scss
index 32d334a559e80..c677728af3146 100644
--- a/src/renderer/scss-partials/_ft-list-item.scss
+++ b/src/renderer/scss-partials/_ft-list-item.scss
@@ -124,7 +124,8 @@ $watched-transition-duration: 0.5s;
       line-height: 1.2;
       margin: 0 4px 4px 0;
       opacity: $thumbnail-overlay-opacity;
-      padding: 3px 4px;
+      padding-block: 3px;
+      padding-inline: 4px;
       pointer-events: none;
 
       @include is-watch-playlist-item {
@@ -278,7 +279,7 @@ $watched-transition-duration: 0.5s;
     display: flex;
     flex-direction: column;
     min-height: 230px;
-    padding-bottom: 20px;
+    padding-block-end: 20px;
 
     .videoThumbnail,
     .channelThumbnail {
diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css
index c57c3604990e4..f3a3f0201e627 100644
--- a/src/renderer/views/Channel/Channel.css
+++ b/src/renderer/views/Channel/Channel.css
@@ -29,7 +29,8 @@
   position: relative;
   background-color: var(--card-bg-color);
   margin-top: 10px;
-  padding: 0 16px;
+  padding-block: 0;
+  padding-inline: 16px;
 }
 
 .channelInfo {
@@ -40,7 +41,7 @@
 }
 
 .channelInfoHasError {
-  padding-bottom: 10px;
+  padding-block-end: 10px;
 }
 
 .channelThumbnail {
@@ -90,7 +91,8 @@
   height: auto;
   justify-content: unset;
   gap: 32px;
-  padding: .3em 0;
+  padding-block: .3em;
+  padding-inline: 0;
 }
 
 .tabs {
diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.css b/src/renderer/views/SubscribedChannels/SubscribedChannels.css
index 78781b0371bed..9ca63f5638c9b 100644
--- a/src/renderer/views/SubscribedChannels/SubscribedChannels.css
+++ b/src/renderer/views/SubscribedChannels/SubscribedChannels.css
@@ -52,7 +52,8 @@
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
-  padding: 0 4px;
+  padding-block: 0;
+  padding-inline: 4px;
 }
 
 .unsubscribeContainer {
diff --git a/src/renderer/views/Watch/Watch.scss b/src/renderer/views/Watch/Watch.scss
index 180f443d7f292..817403891d0f1 100644
--- a/src/renderer/views/Watch/Watch.scss
+++ b/src/renderer/views/Watch/Watch.scss
@@ -68,7 +68,8 @@
         display: flex;
         height: 60px;
         left: 12px;
-        padding: 0 12px;
+        padding-block: 0;
+        padding-inline: 12px;
         position: absolute;
 
         .premiereIcon {

From c70a511cb2c1ecf22e17371469c81dc4e0007076 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Sun, 27 Aug 2023 23:38:37 -0500
Subject: [PATCH 38/67] Add updated rtl-compatible margins to ft-slider and fix
 indentation

---
 .../components/ft-slider/ft-slider.css        | 237 +++++++++---------
 1 file changed, 121 insertions(+), 116 deletions(-)

diff --git a/src/renderer/components/ft-slider/ft-slider.css b/src/renderer/components/ft-slider/ft-slider.css
index 852d2b3f65367..3b79dec56ceb9 100644
--- a/src/renderer/components/ft-slider/ft-slider.css
+++ b/src/renderer/components/ft-slider/ft-slider.css
@@ -1,251 +1,256 @@
 .pure-material-slider {
-    --pure-material-safari-helper1: var(--accent-color-opacity1);
-    --pure-material-safari-helper2: var(--accent-color-opacity2);
-    --pure-material-safari-helper3: var(--accent-color-opacity3);
-    --pure-material-safari-helper4: var(--accent-color-opacity4);
-    display: inline-block;
-    width: 380px;
-    color: rgba(var(--primary-text-color), 0.87);
-    font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
-    font-size: 16px;
-    line-height: 1.5;
-    padding: 5px;
-    margin: 12px 8px;
+  --pure-material-safari-helper1: var(--accent-color-opacity1);
+  --pure-material-safari-helper2: var(--accent-color-opacity2);
+  --pure-material-safari-helper3: var(--accent-color-opacity3);
+  --pure-material-safari-helper4: var(--accent-color-opacity4);
+  display: inline-block;
+  width: 380px;
+  color: rgba(var(--primary-text-color), 0.87);
+  font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
+  font-size: 16px;
+  line-height: 1.5;
+  padding: 5px;
+  margin-block: 12px;
+  margin-inline: 8px;
 }
 
 /* Input */
 .pure-material-slider > input {
-    -webkit-appearance: none;
-    position: relative;
-    top: 24px;
-    display: block;
-    margin: 0 0 -36px;
-    width: 100%;
-    height: 36px;
-    background-color: transparent;
-    cursor: pointer;
+  -webkit-appearance: none;
+  position: relative;
+  top: 24px;
+  display: block;
+  margin-block: 0 -36px;
+  margin-inline: 0;
+  width: 100%;
+  height: 36px;
+  background-color: transparent;
+  cursor: pointer;
 }
 
 /* Without Span */
 .pure-material-slider > input:last-child {
-    position: static;
-    margin: 0;
+  position: static;
+  margin: 0;
 }
 
 /* Span */
 .pure-material-slider > span {
-    display: inline-block;
-    margin-bottom: 36px;
+  display: inline-block;
+  margin-bottom: 36px;
 }
 
 /* Focus */
 .pure-material-slider > input:focus {
-    outline: none;
+  outline: none;
 }
 
 /* Disabled */
 .pure-material-slider > input:disabled {
-    cursor: default;
-    opacity: 0.38;
+  cursor: default;
+  opacity: 0.38;
 }
 
 .pure-material-slider > input:disabled + span {
-    opacity: 0.38;
+  opacity: 0.38;
 }
 
 /* Webkit | Track */
 .pure-material-slider > input::-webkit-slider-runnable-track {
-    margin: 17px 0;
-    border-radius: 1px;
-    width: 100%;
-    height: 2px;
-    background-color: var(--accent-color-opacity4);
+  margin-block: 17px;
+  margin-inline: 0;
+  border-radius: 1px;
+  width: 100%;
+  height: 2px;
+  background-color: var(--accent-color-opacity4);
 }
 
 /* Webkit | Thumb */
 .pure-material-slider > input::-webkit-slider-thumb {
-    appearance: none;
-    -webkit-appearance: none;
-    border: none;
-    border-radius: 50%;
-    height: 2px;
-    width: 2px;
-    background-color: var(--accent-color);
-    transform: scale(6, 6);
-    transition: box-shadow 0.2s;
+  appearance: none;
+  -webkit-appearance: none;
+  border: none;
+  border-radius: 50%;
+  height: 2px;
+  width: 2px;
+  background-color: var(--accent-color);
+  transform: scale(6, 6);
+  transition: box-shadow 0.2s;
 }
 
 /* Webkit | Hover, Focus */
 .pure-material-slider:hover > input::-webkit-slider-thumb {
-    box-shadow: 0 0 0 2px var(--pure-material-safari-helper1);
+  box-shadow: 0 0 0 2px var(--pure-material-safari-helper1);
 }
 
 .pure-material-slider > input:focus::-webkit-slider-thumb {
-    box-shadow: 0 0 0 2px var(--pure-material-safari-helper2);
+  box-shadow: 0 0 0 2px var(--pure-material-safari-helper2);
 }
 
 .pure-material-slider:hover > input:focus::-webkit-slider-thumb {
-    box-shadow: 0 0 0 2px var(--pure-material-safari-helper3);
+  box-shadow: 0 0 0 2px var(--pure-material-safari-helper3);
 }
 
 /* Webkit | Active */
 .pure-material-slider > input:active::-webkit-slider-thumb {
-     box-shadow: 0 0 0 2px var(--pure-material-safari-helper4) !important;
+  box-shadow: 0 0 0 2px var(--pure-material-safari-helper4) !important;
 }
 
 /* Webkit | Disabled */
 .pure-material-slider > input:disabled::-webkit-slider-runnable-track {
-    background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
+  background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
 }
 
 .pure-material-slider > input:disabled::-webkit-slider-thumb {
-    background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0));
-    color: rgb(var(--pure-material-surface-rgb, 255, 255, 255)); /* Safari */
-    box-shadow: 0 0 0 1px rgb(var(--pure-material-surface-rgb, 255, 255, 255)) !important;
-    transform: scale(4, 4);
+  background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0));
+  color: rgb(var(--pure-material-surface-rgb, 255, 255, 255)); /* Safari */
+  box-shadow: 0 0 0 1px rgb(var(--pure-material-surface-rgb, 255, 255, 255)) !important;
+  transform: scale(4, 4);
 }
 
 /* Moz | Track */
 .pure-material-slider > input::-moz-range-track {
-    margin: 17px 0;
-    border-radius: 1px;
-    width: 100%;
-    height: 2px;
-    background-color: var(--accent-color-opacity4);
+  margin-block: 0;
+  margin-auto: 17px;
+  border-radius: 1px;
+  width: 100%;
+  height: 2px;
+  background-color: var(--accent-color-opacity4);
 }
 
 /* Moz | Thumb */
 .pure-material-slider > input::-moz-range-thumb {
-    appearance: none;
-    -moz-appearance: none;
-    border: none;
-    border-radius: 50%;
-    height: 2px;
-    width: 2px;
-    background-color: var(--accent-color);
-    transform: scale(6, 6);
-    transition: box-shadow 0.2s;
+  appearance: none;
+  -moz-appearance: none;
+  border: none;
+  border-radius: 50%;
+  height: 2px;
+  width: 2px;
+  background-color: var(--accent-color);
+  transform: scale(6, 6);
+  transition: box-shadow 0.2s;
 }
 
 /* Moz | Progress */
 .pure-material-slider > input::-moz-range-progress {
-    border-radius: 1px;
-    height: 2px;
-    background-color: var(--accent-color);
+  border-radius: 1px;
+  height: 2px;
+  background-color: var(--accent-color);
 }
 
 /* Moz | Hover, Focus */
 .pure-material-slider:hover > input:hover::-moz-range-thumb {
-    box-shadow: 0 0 0 2px var(--accent-color-opacity1);
+  box-shadow: 0 0 0 2px var(--accent-color-opacity1);
 }
 
 .pure-material-slider > input:focus::-moz-range-thumb {
-    box-shadow: 0 0 0 2px var(--accent-color-opacity2);
+  box-shadow: 0 0 0 2px var(--accent-color-opacity2);
 }
 
 .pure-material-slider:hover > input:focus::-moz-range-thumb {
-    box-shadow: 0 0 0 2px var(--accent-color-opacity3);
+  box-shadow: 0 0 0 2px var(--accent-color-opacity3);
 }
 
 /* Moz | Active */
 .pure-material-slider > input:active::-moz-range-thumb {
-    box-shadow: 0 0 0 2px var(--accent-color-opacity4) !important;
+  box-shadow: 0 0 0 2px var(--accent-color-opacity4) !important;
 }
 
 /* Moz | Disabled */
 .pure-material-slider > input:disabled::-moz-range-track {
-    background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
+  background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
 }
 
 .pure-material-slider > input:disabled::-moz-range-progress {
-    background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.87);
+  background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.87);
 }
 
 .pure-material-slider > input:disabled::-moz-range-thumb {
-    background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0));
-    box-shadow: 0 0 0 1px rgb(var(--pure-material-surface-rgb, 255, 255, 255)) !important;
-    transform: scale(4, 4);
+  background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0));
+  box-shadow: 0 0 0 1px rgb(var(--pure-material-surface-rgb, 255, 255, 255)) !important;
+  transform: scale(4, 4);
 }
 
 .pure-material-slider > input::-moz-focus-outer {
-    border: none;
+  border: none;
 }
 
 /* MS | Track */
 .pure-material-slider > input::-ms-track {
-    box-sizing: border-box;
-    margin: 17px 0;
-    border: none;
-    border-radius: 1px;
-    padding-block: 0;
-    padding-inline: 17px;
-    width: 100%;
-    height: 2px;
-    background-color: transparent;
+  box-sizing: border-box;
+  margin-block: 17px;
+  margin-inline: 0;
+  border: none;
+  border-radius: 1px;
+  padding-block: 0;
+  padding-inline: 17px;
+  width: 100%;
+  height: 2px;
+  background-color: transparent;
 }
 
 .pure-material-slider > input::-ms-fill-lower {
-    border-radius: 1px;
-    height: 2px;
-    background-color: var(--accent-color);
+  border-radius: 1px;
+  height: 2px;
+  background-color: var(--accent-color);
 }
 
 /* MS | Progress */
 .pure-material-slider > input::-ms-fill-upper {
-    border-radius: 1px;
-    height: 2px;
-    background-color: var(--accent-color-opacity4);
+  border-radius: 1px;
+  height: 2px;
+  background-color: var(--accent-color-opacity4);
 }
 
 /* MS | Thumb */
 .pure-material-slider > input::-ms-thumb {
-    appearance: none;
-    margin: 0 17px;
-    border: none;
-    border-radius: 50%;
-    height: 2px;
-    width: 2px;
-    background-color: var(--accent-color);
-    transform: scale(6, 6);
-    transition: box-shadow 0.2s;
+  appearance: none;
+  margin: 0 17px;
+  border: none;
+  border-radius: 50%;
+  height: 2px;
+  width: 2px;
+  background-color: var(--accent-color);
+  transform: scale(6, 6);
+  transition: box-shadow 0.2s;
 }
 
 /* MS | Hover, Focus */
 .pure-material-slider:hover > input::-ms-thumb {
-    box-shadow: 0 0 0 2px var(--accent-color-opacity1);
+  box-shadow: 0 0 0 2px var(--accent-color-opacity1);
 }
 
 .pure-material-slider > input:focus::-ms-thumb {
-    box-shadow: 0 0 0 2px var(--accent-color-opacity2);
+  box-shadow: 0 0 0 2px var(--accent-color-opacity2);
 }
 
 .pure-material-slider:hover > input:focus::-ms-thumb {
-    box-shadow: 0 0 0 2px var(--accent-color-opacity3);
+  box-shadow: 0 0 0 2px var(--accent-color-opacity3);
 }
 
 /* MS | Active */
 .pure-material-slider > input:active::-ms-thumb {
-    box-shadow: 0 0 0 2px var(--accent-color-opacity4) !important;
+  box-shadow: 0 0 0 2px var(--accent-color-opacity4) !important;
 }
 
 /* MS | Disabled */
 .pure-material-slider > input:disabled::-ms-fill-lower {
-    background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
+  background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
 }
 
 .pure-material-slider > input:disabled::-ms-fill-upper {
-    background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
-    opacity: 0.38;
+  background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
+  opacity: 0.38;
 }
 
 .pure-material-slider > input:disabled::-ms-thumb {
-    background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0));
-    box-shadow: 0 0 0 1px rgb(var(--pure-material-surface-rgb, 255, 255, 255)) !important;
-    transform: scale(4, 4);
+  background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0));
+  box-shadow: 0 0 0 1px rgb(var(--pure-material-surface-rgb, 255, 255, 255)) !important;
+  transform: scale(4, 4);
 }
 
 @media only screen and (max-width: 680px) {
-    .pure-material-slider {
-        width: 100%;
-    }
+  .pure-material-slider {
+    width: 100%;
+  }
 }

From d7cf4029c3a093af89bc8e4da11ca0453996100e Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Sun, 27 Aug 2023 23:59:01 -0500
Subject: [PATCH 39/67] Replace margin-top & margin-bottom with margin-block;
 continue replacing margin-left and margin-right with margin-inline-start and
 margin-inline-end

---
 src/renderer/App.css                          | 16 ++++++----
 .../channel-about/channel-about.css           |  2 +-
 .../ft-community-post/ft-community-post.scss  | 10 +++---
 .../ft-input-tags/ft-input-tags.css           |  2 +-
 src/renderer/components/ft-input/ft-input.css |  6 ++--
 .../ft-profile-bubble/ft-profile-bubble.css   |  3 +-
 .../ft-profile-selector.css                   |  2 +-
 .../ft-radio-button/ft-radio-button.css       |  6 ++--
 .../components/ft-select/ft-select.css        |  2 +-
 .../ft-settings-section.scss                  |  5 +--
 .../ft-share-button/ft-share-button.scss      |  6 ++--
 .../ft-sponsor-block-category.scss            |  2 +-
 .../ft-toggle-switch/ft-toggle-switch.scss    |  3 +-
 .../components/ft-tooltip/ft-tooltip.css      |  4 +--
 .../player-settings/player-settings.scss      |  2 +-
 .../side-nav-more-options.css                 |  4 +--
 src/renderer/components/side-nav/side-nav.css |  6 ++--
 src/renderer/components/top-nav/top-nav.scss  |  9 ++++--
 .../watch-video-chapters.css                  |  4 +--
 .../watch-video-comments.css                  |  6 ++--
 .../watch-video-info/watch-video-info.scss    | 16 +++++-----
 .../watch-video-live-chat.css                 | 15 +++++----
 .../watch-video-playlist.css                  |  2 +-
 src/renderer/scss-partials/_ft-list-item.scss |  9 +++---
 src/renderer/videoJS.css                      | 32 +++++++++----------
 src/renderer/views/Channel/Channel.css        | 13 ++++----
 src/renderer/views/Hashtag/Hashtag.css        |  5 +--
 src/renderer/views/Playlist/Playlist.css      |  2 +-
 src/renderer/views/Search/Search.css          |  2 +-
 .../SubscribedChannels/SubscribedChannels.css |  4 +--
 .../views/Subscriptions/Subscriptions.css     |  2 +-
 src/renderer/views/Trending/Trending.css      |  2 +-
 src/renderer/views/Watch/Watch.scss           | 25 +++++++++------
 33 files changed, 128 insertions(+), 101 deletions(-)

diff --git a/src/renderer/App.css b/src/renderer/App.css
index e6bceeb967f60..d520e4b73bde0 100644
--- a/src/renderer/App.css
+++ b/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-block-start: 60px;
     margin-bottom: -75px;
   }
 }
diff --git a/src/renderer/components/channel-about/channel-about.css b/src/renderer/components/channel-about/channel-about.css
index 6d14c5b71ddab..0af4cb90f1805 100644
--- a/src/renderer/components/channel-about/channel-about.css
+++ b/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;
diff --git a/src/renderer/components/ft-community-post/ft-community-post.scss b/src/renderer/components/ft-community-post/ft-community-post.scss
index e2fa2d06678da..af97a368cdb06 100644
--- a/src/renderer/components/ft-community-post/ft-community-post.scss
+++ b/src/renderer/components/ft-community-post/ft-community-post.scss
@@ -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,7 +53,7 @@
   display: block;
   flex-direction: column;
   font-size: 15px;
-  margin-top: 4px;
+  margin-block-start: 4px;
   max-width: 210px;
   text-align: left;
 
@@ -78,7 +80,7 @@
   .videoThumbnail {
     display: flex;
     margin-bottom: auto;
-    margin-top: auto;
+    margin-block-start: auto;
     position: relative;
     width: fit-content;
 
diff --git a/src/renderer/components/ft-input-tags/ft-input-tags.css b/src/renderer/components/ft-input-tags/ft-input-tags.css
index 8bdb606d4082a..d7b552dc75088 100644
--- a/src/renderer/components/ft-input-tags/ft-input-tags.css
+++ b/src/renderer/components/ft-input-tags/ft-input-tags.css
@@ -44,7 +44,7 @@
 }
 
 :deep(.ft-input-component .ft-input) {
-  margin-top: 10px;
+  margin-block-start: 10px;
 }
 
 @media only screen and (max-width: 576px) {
diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css
index a652ab7fa1269..91ed4f9423bee 100644
--- a/src/renderer/components/ft-input/ft-input.css
+++ b/src/renderer/components/ft-input/ft-input.css
@@ -42,7 +42,8 @@
   left: 0;
   /* To be higher than `.inputWrapper` */
   z-index: 1;
-  margin: 0 3px;
+  margin-block: 0;
+  margin-inline: 3px;
   padding: 10px;
   border-radius: 100%;
   color: var(--primary-text-color);
@@ -123,7 +124,8 @@
 
 .inputAction {
   position: absolute;
-  margin: 0 3px;
+  margin-block: 0;
+  margin-inline: 3px;
   padding: 10px;
   top: -8px;
   right: 0;
diff --git a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
index d99fdeaaf3422..0a3075003c511 100644
--- a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
+++ b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
@@ -20,7 +20,8 @@
 .bubble {
   width: 70px;
   height: 70px;
-  margin: 20px auto 5px auto;
+  margin-block: 20px 5px;
+  margin-inline: auto;
   border-radius: 50%;
   -webkit-border-radius: 50%;
 }
diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.css b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
index ca4e372134194..eb2f7e4281d84 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.css
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
@@ -34,7 +34,7 @@
 }
 
 .profileWrapper {
-  margin-top: 60px;
+  margin-block-start: 60px;
   height: 340px;
   overflow-y: auto;
 }
diff --git a/src/renderer/components/ft-radio-button/ft-radio-button.css b/src/renderer/components/ft-radio-button/ft-radio-button.css
index 9ad75972f5ace..3a00f66596953 100644
--- a/src/renderer/components/ft-radio-button/ft-radio-button.css
+++ b/src/renderer/components/ft-radio-button/ft-radio-button.css
@@ -35,7 +35,7 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
   left: 0;
   width: 14px;
   height: 14px;
-  margin-top: -9px;
+  margin-block-start: -9px;
   border: 2px solid var(--primary-color);
   text-align: center;
   transition: all 0.4s ease;
@@ -50,7 +50,7 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
   left: 4px;
   width: 10px;
   height: 10px;
-  margin-top: -5px;
+  margin-block-start: -5px;
   transform: scale(0);
   transform-origin: 50%;
   transition: transform 200ms ease-out;
@@ -68,7 +68,7 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
   left: 4px;
   width: 8px;
   height: 3px;
-  margin-top: -4px;
+  margin-block-start: -4px;
   border-style: solid;
   border-width: 0 0 3px 3px;
   border-image: none;
diff --git a/src/renderer/components/ft-select/ft-select.css b/src/renderer/components/ft-select/ft-select.css
index 7f0701abe74b8..924e6e934c3d3 100644
--- a/src/renderer/components/ft-select/ft-select.css
+++ b/src/renderer/components/ft-select/ft-select.css
@@ -26,7 +26,7 @@
   width: 200px;
   padding-block: 0 10px;
   padding-inline: 0 10px;
-  margin-top: 30px;
+  margin-block-start: 30px;
 }
 
 .disabled, .disabled + svg.iconSelect {
diff --git a/src/renderer/components/ft-settings-section/ft-settings-section.scss b/src/renderer/components/ft-settings-section/ft-settings-section.scss
index 624da337bcf6e..51c0ea01265b5 100644
--- a/src/renderer/components/ft-settings-section/ft-settings-section.scss
+++ b/src/renderer/components/ft-settings-section/ft-settings-section.scss
@@ -29,7 +29,7 @@
   background-color: var(--primary-color);
   border: 0;
   height: 2px;
-  margin-top: -1px;
+  margin-block-start: -1px;
   width: 100%;
 }
 
@@ -114,7 +114,8 @@
     }
 
     :deep(.switch-ctn) {
-      margin: 10px 7px;
+      margin-block: 10px;
+      margin-inline: 7px;
     }
   }
 }
diff --git a/src/renderer/components/ft-share-button/ft-share-button.scss b/src/renderer/components/ft-share-button/ft-share-button.scss
index 3bd9a29fb8983..5b5471c789281 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.scss
+++ b/src/renderer/components/ft-share-button/ft-share-button.scss
@@ -9,7 +9,8 @@
     color: var(--primary-text-color);
     font-size: 18px;
     font-weight: bold;
-    margin: 4px 0 8px;
+    margin-block: 4px 8px;
+    margin-inline: 0;
   }
 
   .buttons {
@@ -24,7 +25,8 @@
   .divider {
     background: var(--tertiary-text-color);
     grid-row: span 3;
-    margin: 0 12px;
+    margin-block: 0;
+    margin-inline: 12px;
     width: 1px;
   }
 
diff --git a/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.scss b/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.scss
index 5c03586317a91..3afca0e66b660 100644
--- a/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.scss
+++ b/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.scss
@@ -1,5 +1,5 @@
 .sponsorBlockCategory {
-  margin-top: 30px;
+  margin-block-start: 30px;
   padding-block: 0;
   padding-inline: 10px;
 
diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
index 47301a0104635..a522f3709bf9d 100644
--- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
+++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
@@ -1,7 +1,8 @@
 /* Thanks to Guus Lieben for the Material Design Switch */
 
 .switch-ctn {
-  margin: 20px 16px;
+  margin-block: 20px;
+  margin-inline: 16px;
   position: relative;
 
   &.compact {
diff --git a/src/renderer/components/ft-tooltip/ft-tooltip.css b/src/renderer/components/ft-tooltip/ft-tooltip.css
index 85c5ccb7096a0..9f6fffc46bcc3 100644
--- a/src/renderer/components/ft-tooltip/ft-tooltip.css
+++ b/src/renderer/components/ft-tooltip/ft-tooltip.css
@@ -53,7 +53,7 @@
 }
 
 .text.bottom {
-  margin-top: 1em;
+  margin-block-start: 1em;
   top: 100%;
   left: 50%;
   -webkit-transform: translate(-50%, -1em);
@@ -61,7 +61,7 @@
 }
 
 .text.bottom-left {
-  margin-top: 1em;
+  margin-block-start: 1em;
   top: 100%;
   left: -100px;
   -webkit-transform: translate(-50%, -1em);
diff --git a/src/renderer/components/player-settings/player-settings.scss b/src/renderer/components/player-settings/player-settings.scss
index 246dc136e4685..4e3f3bbe4d3be 100644
--- a/src/renderer/components/player-settings/player-settings.scss
+++ b/src/renderer/components/player-settings/player-settings.scss
@@ -18,6 +18,6 @@
   .screenshotFilenamePatternInput,
   .screenshotFilenamePatternExample {
     flex-grow: 1;
-    margin-top: 10px;
+    margin-block-start: 10px;
   }
 }
diff --git a/src/renderer/components/side-nav-more-options/side-nav-more-options.css b/src/renderer/components/side-nav-more-options/side-nav-more-options.css
index 02799d9f5156e..f1abdaede16e4 100644
--- a/src/renderer/components/side-nav-more-options/side-nav-more-options.css
+++ b/src/renderer/components/side-nav-more-options/side-nav-more-options.css
@@ -42,7 +42,7 @@
   }
 
   .sideNav, .closed {
-    margin-top: 0px;
+    margin-block-start: 0px;
     height: 60px;
     width: 100%;
     bottom: 0px;
@@ -69,7 +69,7 @@
     margin-inline-start: 0px;
     width: 100%;
     display: block;
-    margin-top: 0.5em;
+    margin-block-start: 0.5em;
   }
 
   .moreOption {
diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index a251292948103..b579ff3f9a702 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@@ -36,7 +36,7 @@
 }
 
 .topNavOption {
-  margin-top: 10px;
+  margin-block-start: 10px;
 }
 
 .navOption, .navChannel {
@@ -184,13 +184,13 @@
   }
 
   .topNavOption {
-    margin-top: 0px;
+    margin-block-start: 0px;
     padding-inline-start: 10px;
     padding-inline-end: 10px;
   }
 
   .sideNav, .closed {
-    margin-top: 0px;
+    margin-block-start: 0px;
     height: 60px;
     width: 100%;
     bottom: 0px;
diff --git a/src/renderer/components/top-nav/top-nav.scss b/src/renderer/components/top-nav/top-nav.scss
index 9f643b9bdbcb3..d780c752e5f27 100644
--- a/src/renderer/components/top-nav/top-nav.scss
+++ b/src/renderer/components/top-nav/top-nav.scss
@@ -102,7 +102,8 @@
   align-items: center;
   display: flex;
   gap: 3px;
-  margin: 0 6px;
+  margin-block: 0;
+  margin-inline: 6px;
 
   &.profiles {
     justify-content: flex-end;
@@ -198,14 +199,16 @@
 
   .searchFilters {
     left: 0;
-    margin: 10px 20px 20px 220px;
+    margin-block: 10px 20px;
+    margin-inline: 220px 20px;
     position: absolute;
     right: 0;
     transition: margin 150ms ease-in-out;
 
     @media only screen and (max-width: 680px) {
       left: 0;
-      margin: 95px 10px 0;
+      margin-block: 95px 0;
+      margin-inline: 10px;
       right: 0;
     }
   }
diff --git a/src/renderer/components/watch-video-chapters/watch-video-chapters.css b/src/renderer/components/watch-video-chapters/watch-video-chapters.css
index 54358e41d6e25..190cd10714513 100644
--- a/src/renderer/components/watch-video-chapters/watch-video-chapters.css
+++ b/src/renderer/components/watch-video-chapters/watch-video-chapters.css
@@ -3,7 +3,7 @@
 }
 
 .chaptersTitle {
-  margin-top: 10px;
+  margin-block-start: 10px;
   margin-bottom: 0;
   cursor: pointer;
 }
@@ -13,7 +13,7 @@
 }
 
 .chaptersWrapper {
-  margin-top: 15px;
+  margin-block-start: 15px;
   max-height: 250px;
   overflow-y: scroll;
   display: flex;
diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.css b/src/renderer/components/watch-video-comments/watch-video-comments.css
index f2a44196a30d0..01a80c1eccd06 100644
--- a/src/renderer/components/watch-video-comments/watch-video-comments.css
+++ b/src/renderer/components/watch-video-comments/watch-video-comments.css
@@ -70,7 +70,7 @@
   font-weight: bold;
   font-size: 14px;
   margin-inline-start: 68px;
-  margin-top: 0px;
+  margin-block-start: 0px;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -89,7 +89,7 @@
 .commentText {
   white-space: pre-wrap;
   font-size: 14px;
-  margin-top: -10px;
+  margin-block-start: -10px;
   margin-inline-start: 70px;
   word-wrap: break-word;
 }
@@ -117,7 +117,7 @@
 .commentLikeCount {
   font-size: 11px;
   margin-inline-start: 70px;
-  margin-top: 0px;
+  margin-block-start: 0px;
 }
 
 .commentHeartBadge {
diff --git a/src/renderer/components/watch-video-info/watch-video-info.scss b/src/renderer/components/watch-video-info/watch-video-info.scss
index f27d543f984d1..b5a2cef21e060 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.scss
+++ b/src/renderer/components/watch-video-info/watch-video-info.scss
@@ -13,10 +13,9 @@
   display: block;
   font-size: 22px;
   font-weight: normal;
-  margin: 0 0 24px;
+  margin-block: 0 24px;
+  margin-inline: 0;
   margin-block-end: 1em;
-  margin-inline-end: 0;
-  margin-inline-start: 0;
   word-break: break-word;
 }
 
@@ -45,7 +44,7 @@
   .subscribeButton {
     font-size: 14px;
     margin-inline-start: 6px;
-    margin-top: 6px;
+    margin-block-start: 6px;
     padding: 6px;
   }
 }
@@ -62,14 +61,15 @@
 }
 
 .viewCount {
-  margin: 18px 0 0;
+  margin-block: 18px 0;
+  margin-inline: 0;
 }
 
 .datePublished {
   margin: 4px 0 0;
 
   @media screen and (max-width: 680px) {
-    margin-top: 16px;
+    margin-block-start: 16px;
   }
 }
 
@@ -79,7 +79,7 @@
   flex-direction: column;
   font-size: 16px;
   margin-inline-start: auto;
-  margin-top: 4px;
+  margin-block-start: 4px;
   max-width: 210px;
   text-align: right;
 
@@ -102,7 +102,7 @@
 .videoOptions {
   display: flex;
   justify-content: flex-end;
-  margin-top: 16px;
+  margin-block-start: 16px;
 
   .option:not(:first-child) {
     margin-inline-start: 4px;
diff --git a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
index d70ddb9db28aa..f5d34be043236 100644
--- a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
+++ b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
@@ -31,7 +31,8 @@
 
 :deep(.liveChatEmoji) {
   vertical-align: middle;
-  margin: 0 2px;
+  margin-block: 0;
+  margin-inline: 2px;
 }
 
 .errorIcon {
@@ -69,12 +70,12 @@
 
 .superChatContent {
   margin-inline-start: 32px;
-  margin-top: -25px;
+  margin-block-start: -25px;
   color: var(--text-with-main-color);
 }
 
 .superChat .channelThumbnail {
-  margin-top: 3px;
+  margin-block-start: 3px;
   margin-inline-start: 3px;
   height: 25px;
 }
@@ -120,7 +121,7 @@
   grid-template-columns: auto;
   margin-inline-start: 5%;
   margin-inline-end: 5%;
-  margin-top: 25px;
+  margin-block-start: 25px;
   margin-bottom: 10px;
   background-color: var(--primary-color);
   border-radius: 5px;
@@ -129,7 +130,7 @@
 }
 
 .upperSuperChatMessage {
-  margin-top: -15px;
+  margin-block-start: -15px;
   width: 100%;
   height: 55px;
   background-color: var(--primary-color-hover);
@@ -140,7 +141,7 @@
 .upperSuperChatMessage .channelThumbnail {
   width: 45px;
   margin-inline-start: 10px;
-  margin-top: 5px;
+  margin-block-start: 5px;
 }
 
 .upperSuperChatMessage .channelName {
@@ -176,7 +177,7 @@
 }
 
 .chatContent {
-  margin-top: 5px;
+  margin-block-start: 5px;
   margin-bottom: 2px;
   font-size: 12px;
   word-wrap: break-word;
diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.css b/src/renderer/components/watch-video-playlist/watch-video-playlist.css
index c5b0846b70dd1..75488b63a7665 100644
--- a/src/renderer/components/watch-video-playlist/watch-video-playlist.css
+++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.css
@@ -38,7 +38,7 @@
 .playlistIcon {
   font-size: 20px;
   padding: 10px;
-  margin-top: -25px;
+  margin-block-start: -25px;
   cursor: pointer;
   border-radius: 50%;
   color: var(--tertiary-text-color);
diff --git a/src/renderer/scss-partials/_ft-list-item.scss b/src/renderer/scss-partials/_ft-list-item.scss
index c677728af3146..60c6cbabf4dcb 100644
--- a/src/renderer/scss-partials/_ft-list-item.scss
+++ b/src/renderer/scss-partials/_ft-list-item.scss
@@ -122,7 +122,8 @@ $watched-transition-duration: 0.5s;
       font-size: 15px;
       justify-self: right;
       line-height: 1.2;
-      margin: 0 4px 4px 0;
+      margin-block: 0 4px;
+      margin-inline: 0 4px;
       opacity: $thumbnail-overlay-opacity;
       padding-block: 3px;
       padding-inline: 4px;
@@ -150,7 +151,7 @@ $watched-transition-duration: 0.5s;
       font-size: 17px;
       justify-self: right;
       margin-inline-end: 3px;
-      margin-top: 3px;
+      margin-block-start: 3px;
       height: fit-content;
     }
 
@@ -229,7 +230,7 @@ $watched-transition-duration: 0.5s;
     .infoLine {
       font-size: 14px;
       grid-area: infoLine;
-      margin-top: 5px;
+      margin-block-start: 5px;
       overflow-wrap: anywhere;
 
       @include is-sidebar-item {
@@ -296,7 +297,7 @@ $watched-transition-duration: 0.5s;
 
     .infoLine {
       font-size: 13px;
-      margin-top: 8px;
+      margin-block-start: 8px;
     }
   }
 
diff --git a/src/renderer/videoJS.css b/src/renderer/videoJS.css
index 84a3b0bcdbbf1..813bb40c3302c 100644
--- a/src/renderer/videoJS.css
+++ b/src/renderer/videoJS.css
@@ -376,8 +376,8 @@
   font-size: inherit;
   line-height: inherit;
   list-style-position: outside;
-  margin-inline-start: 0;
-  margin-inline-end: 0;
+  margin-left: 0;
+  margin-right: 0;
   margin-top: 0;
   margin-bottom: 0;
 }
@@ -596,7 +596,7 @@ body.vjs-full-window {
   top: 50%;
   left: 50%;
   margin-top: -0.81666em;
-  margin-inline-start: -1.5em;
+  margin-left: -1.5em;
 }
 
 .video-js:hover .vjs-big-play-button,
@@ -1113,7 +1113,7 @@ body.vjs-full-window {
 }
 .video-js .vjs-volume-control {
   cursor: pointer;
-  margin-inline-end: 1em;
+  margin-right: 1em;
   display: flex;
 }
 
@@ -1127,7 +1127,7 @@ body.vjs-full-window {
   opacity: 0;
   width: 1px;
   height: 1px;
-  margin-inline-start: -1px;
+  margin-left: -1px;
 }
 
 .video-js .vjs-volume-tooltip {
@@ -1146,7 +1146,7 @@ body.vjs-full-window {
 .video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal {
   width: 5em;
   height: 3em;
-  margin-inline-end: 0;
+  margin-right: 0;
 }
 .video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical {
   left: -3.5em;
@@ -1313,8 +1313,8 @@ body.vjs-full-window {
   flex: none;
   display: inline-flex;
   height: 100%;
-  padding-inline-start: 0.5em;
-  padding-inline-end: 0.5em;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
   font-size: 1em;
   line-height: 3em;
   width: auto;
@@ -1337,7 +1337,7 @@ body.vjs-full-window {
 }
 
 .vjs-seek-to-live-control .vjs-icon-placeholder {
-  margin-inline-end: 0.5em;
+  margin-right: 0.5em;
   color: #888;
 }
 
@@ -1351,8 +1351,8 @@ body.vjs-full-window {
   line-height: 3.7em;
   min-width: 2em;
   width: auto;
-  padding-inline-start: 0em;
-  padding-inline-end: 0em;
+  padding-left: 0em;
+  padding-right: 0em;
 }
 
 .vjs-live .vjs-time-control {
@@ -1729,7 +1729,7 @@ video::-webkit-media-text-track-display {
   }
 }
 .vjs-track-setting > select {
-  margin-inline-end: 1em;
+  margin-right: 1em;
   margin-bottom: 0.5em;
 }
 
@@ -1785,7 +1785,7 @@ video::-webkit-media-text-track-display {
 }
 
 .vjs-track-settings-controls .vjs-default-button {
-  margin-inline-end: 1em;
+  margin-right: 1em;
 }
 
 @media print {
@@ -1925,7 +1925,7 @@ video::-webkit-media-text-track-display {
 }
 
 .video-js .vjs-time-control.vjs-current-time {
-    margin-inline-start: 1em
+    margin-left: 1em
 }
 
 .video-js .vjs-time-control .vjs-current-time-display,.video-js .vjs-time-control .vjs-duration-display {
@@ -2017,13 +2017,13 @@ video::-webkit-media-text-track-display {
 }
 
 .video-js.vjs-live .vjs-live-control {
-    margin-inline-start: 1em
+    margin-left: 1em
 }
 
 .video-js .vjs-big-play-button {
     top: 50%;
     left: 50%;
-    margin-inline-start: -1em;
+    margin-left: -1em;
     margin-top: -1em;
     width: 2em;
     height: 2em;
diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css
index f3a3f0201e627..5f6305125770a 100644
--- a/src/renderer/views/Channel/Channel.css
+++ b/src/renderer/views/Channel/Channel.css
@@ -1,7 +1,8 @@
 .card {
   position: relative;
   width: 85%;
-  margin: 0 auto 20px;
+  margin-block: 0 20px;
+  margin-inline: auto;
   box-sizing: border-box;
 }
 
@@ -28,7 +29,7 @@
 .channelInfoContainer {
   position: relative;
   background-color: var(--card-bg-color);
-  margin-top: 10px;
+  margin-block-start: 10px;
   padding-block: 0;
   padding-inline: 16px;
 }
@@ -125,12 +126,12 @@
 }
 
 .channelSearch {
-  margin-top: 10px;
+  margin-block-start: 10px;
   max-width: 250px;
 }
 
 .elementListLoading {
-  margin-top: 200px;
+  margin-block-start: 200px;
 }
 
 .message {
@@ -144,7 +145,7 @@
   line-height: 45px;
   text-align: center;
   cursor: pointer;
-  margin-top: 16px;
+  margin-block-start: 16px;
 }
 
 .thumbnailContainer {
@@ -197,6 +198,6 @@
     overflow-x: scroll;
   }
   #communityPanel {
-    margin-top: 1rem;
+    margin-block-start: 1rem;
   }
 }
diff --git a/src/renderer/views/Hashtag/Hashtag.css b/src/renderer/views/Hashtag/Hashtag.css
index 282946b4aa611..b06652cc0e76e 100644
--- a/src/renderer/views/Hashtag/Hashtag.css
+++ b/src/renderer/views/Hashtag/Hashtag.css
@@ -5,7 +5,7 @@
   line-height: 45px;
   text-align: center;
   cursor: pointer;
-  margin-top: 16px;
+  margin-block-start: 16px;
 }
 
 .getNextPage:hover, .getNextPage:focus {
@@ -13,7 +13,8 @@
 }
 
 .card {
-  margin: 0 auto 20px;
+  margin-block: 0 20px;
+  margin-inline: auto;
   width: 85%;
 }
 
diff --git a/src/renderer/views/Playlist/Playlist.css b/src/renderer/views/Playlist/Playlist.css
index a38dd512bca9d..0e1ba0cfc6d9a 100644
--- a/src/renderer/views/Playlist/Playlist.css
+++ b/src/renderer/views/Playlist/Playlist.css
@@ -40,7 +40,7 @@
 }
 
 :deep(.videoThumbnail) {
-  margin-top: auto;
+  margin-block-start: auto;
   margin-bottom: auto;
 }
 
diff --git a/src/renderer/views/Search/Search.css b/src/renderer/views/Search/Search.css
index bce8f337f6281..be15d509ee426 100644
--- a/src/renderer/views/Search/Search.css
+++ b/src/renderer/views/Search/Search.css
@@ -5,7 +5,7 @@
   line-height: 45px;
   text-align: center;
   cursor: pointer;
-  margin-top: 16px;
+  margin-block-start: 16px;
 }
 
 .getNextPage:hover, .getNextPage:focus {
diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.css b/src/renderer/views/SubscribedChannels/SubscribedChannels.css
index 9ca63f5638c9b..df83ce5e49827 100644
--- a/src/renderer/views/SubscribedChannels/SubscribedChannels.css
+++ b/src/renderer/views/SubscribedChannels/SubscribedChannels.css
@@ -9,7 +9,7 @@
 }
 
 .count {
-  margin-top: 1rem;
+  margin-block-start: 1rem;
 }
 
 .channels {
@@ -17,7 +17,7 @@
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(120px, 1fr) );
   gap: 2.5rem;
-  margin-top: 2rem;
+  margin-block-start: 2rem;
 }
 
 .channel {
diff --git a/src/renderer/views/Subscriptions/Subscriptions.css b/src/renderer/views/Subscriptions/Subscriptions.css
index 3e37187ae8802..e1c94ae4f3c66 100644
--- a/src/renderer/views/Subscriptions/Subscriptions.css
+++ b/src/renderer/views/Subscriptions/Subscriptions.css
@@ -10,7 +10,7 @@
 
 .subscriptionTabs {
   width: 100%;
-  margin-top: -3px;
+  margin-block-start: -3px;
   color: var(--tertiary-text-color);
   margin-bottom: 10px;
 }
diff --git a/src/renderer/views/Trending/Trending.css b/src/renderer/views/Trending/Trending.css
index 3f5bf94dc39cb..a3196344d3102 100644
--- a/src/renderer/views/Trending/Trending.css
+++ b/src/renderer/views/Trending/Trending.css
@@ -14,7 +14,7 @@
   width: 100%;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
-  margin-top: -3px;
+  margin-block-start: -3px;
   color: var(--tertiary-text-color);
   margin-bottom: 10px;
 }
diff --git a/src/renderer/views/Watch/Watch.scss b/src/renderer/views/Watch/Watch.scss
index 817403891d0f1..7617b7b180714 100644
--- a/src/renderer/views/Watch/Watch.scss
+++ b/src/renderer/views/Watch/Watch.scss
@@ -46,7 +46,8 @@
     grid-area: video;
 
     .videoAreaMargin {
-      margin: 0 0 16px;
+      margin-block: 0 16px;
+      margin-inline: 0;
     }
 
     .videoPlayer {
@@ -75,11 +76,13 @@
         .premiereIcon {
           float: left;
           font-size: 25px;
-          margin: 0 12px;
+          margin-block: 0;
+          margin-inline: 12px;
         }
 
         .premiereText {
-          margin: 0 12px;
+          margin-block: 0;
+          margin-inline: 12px;
           min-width: 200px;
 
           .premiereTextTimestamp {
@@ -93,7 +96,8 @@
 
   .watchVideo {
     grid-column: 1;
-    margin: 0 0 16px;
+    margin-block: 0 16px;
+    margin-inline: 0;
   }
 
   .infoArea {
@@ -116,7 +120,8 @@
   .watchVideoPlaylist,
   .watchVideoSidebar,
   .theatrePlaylist {
-    margin: 0 8px 16px;
+    margin-block: 0 16px;
+    margin-inline: 8px;
   }
 
   .watchVideoSidebar,
@@ -126,7 +131,7 @@
 
   .watchVideoPlaylist {
     :deep(.videoThumbnail) {
-      margin-top: auto;
+      margin-block-start: auto;
       margin-bottom: auto;
     }
     @media (max-width: 768px) {
@@ -136,10 +141,12 @@
 
   .watchVideoRecommendations,
   .theatreRecommendations {
-    margin: 0 0 16px;
+    margin-block: 0 16px;
+    margin-inline: 0;
 
     @media only screen and (min-width: 901px) {
-      margin: 0 8px 16px;
+      margin-block: 0 16px;
+      margin-inline: 8px;
     }
   }
 
@@ -159,7 +166,7 @@
 
   @media only screen and (min-width: 901px) {
     .infoArea {
-      scroll-margin-top: 76px;
+      scroll-margin-block-start: 76px;
     }
 
     .infoAreaSticky {

From f2a038564c4a6132010e0ddf85337da239b19e92 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 28 Aug 2023 00:10:50 -0500
Subject: [PATCH 40/67] Continue replacing with margin-block and margin-inline

---
 .../components/ft-icon-button/ft-icon-button.scss         | 3 ++-
 src/renderer/components/ft-loader/ft-loader.css           | 3 ++-
 .../ft-profile-channel-list/ft-profile-channel-list.css   | 4 ++--
 .../components/ft-profile-edit/ft-profile-edit.css        | 8 ++++----
 .../ft-profile-filter-channels-list.css                   | 4 ++--
 src/renderer/components/ft-prompt/ft-prompt.css           | 3 ++-
 .../components/ft-search-filters/ft-search-filters.css    | 3 ++-
 .../ft-settings-section/ft-settings-section.scss          | 3 ++-
 src/renderer/components/ft-slider/ft-slider.css           | 5 +++--
 .../components/player-settings/player-settings.scss       | 3 ++-
 src/renderer/components/side-nav/side-nav.css             | 3 ++-
 .../subscriptions-tab-ui/subscriptions-tab-ui.css         | 4 ++--
 src/renderer/views/About/About.scss                       | 7 ++++---
 src/renderer/views/History/History.css                    | 4 ++--
 src/renderer/views/Popular/Popular.css                    | 4 ++--
 src/renderer/views/ProfileSettings/ProfileSettings.css    | 8 ++++----
 src/renderer/views/Search/Search.css                      | 4 ++--
 src/renderer/views/Settings/Settings.css                  | 3 ++-
 .../views/SubscribedChannels/SubscribedChannels.css       | 4 ++--
 src/renderer/views/Subscriptions/Subscriptions.css        | 4 ++--
 src/renderer/views/Trending/Trending.css                  | 4 ++--
 src/renderer/views/UserPlaylists/UserPlaylists.css        | 4 ++--
 22 files changed, 51 insertions(+), 41 deletions(-)

diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.scss b/src/renderer/components/ft-icon-button/ft-icon-button.scss
index 823575a3f1079..5364ccfc0a63e 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.scss
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss
@@ -134,7 +134,8 @@
 
   .listItemDivider {
     border-top: 1px solid var(--tertiary-text-color);
-    margin: 1px auto;
+    margin-block: 1px;
+    margin-inline: auto;
     // Too "visible" with current color
     opacity: 0.5;
     width: 95%;
diff --git a/src/renderer/components/ft-loader/ft-loader.css b/src/renderer/components/ft-loader/ft-loader.css
index 9216fc6e7781a..bdd0a20f2d4fb 100644
--- a/src/renderer/components/ft-loader/ft-loader.css
+++ b/src/renderer/components/ft-loader/ft-loader.css
@@ -39,7 +39,8 @@
     width: 40px;
     height: 40px;
     position: relative;
-    margin: 100px auto;
+    margin-block: 100px;
+    margin-inline: auto;
 }
 
 .double-bounce1,
diff --git a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.css b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.css
index ba8f5fc06c845..4beaf2f6b792f 100644
--- a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.css
+++ b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.css
@@ -1,5 +1,5 @@
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 15px;
+  margin-block: 0 15px;
+  margin-inline: auto;
 }
diff --git a/src/renderer/components/ft-profile-edit/ft-profile-edit.css b/src/renderer/components/ft-profile-edit/ft-profile-edit.css
index aefd0f7298e80..8e9c5c4952f33 100644
--- a/src/renderer/components/ft-profile-edit/ft-profile-edit.css
+++ b/src/renderer/components/ft-profile-edit/ft-profile-edit.css
@@ -1,7 +1,7 @@
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 15px;
+  margin-block: 0 15px;
+  margin-inline: auto;
 }
 
 .message {
@@ -18,8 +18,8 @@
 
 .colorOptions {
   max-width: 1000px;
-  margin: 0 auto;
-  margin-bottom: 30px;
+  margin-block: 0 30px;
+  margin-inline: auto;
 }
 
 .colorOption {
diff --git a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.css b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.css
index 7243d3db9ed77..8a902e94724c8 100644
--- a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.css
+++ b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.css
@@ -1,7 +1,7 @@
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 30px;
+  margin-block: 0 30px;
+  margin-inline: auto;
 }
 
 .selected {
diff --git a/src/renderer/components/ft-prompt/ft-prompt.css b/src/renderer/components/ft-prompt/ft-prompt.css
index 87e71c4fcf410..a8ca5159dbff5 100644
--- a/src/renderer/components/ft-prompt/ft-prompt.css
+++ b/src/renderer/components/ft-prompt/ft-prompt.css
@@ -15,7 +15,8 @@
 
 .promptCard.autosize {
   box-sizing: border-box;
-  margin: 0 auto;
+  margin-block: 0;
+  margin-inline: auto;
   max-width: 95%;
 }
 
diff --git a/src/renderer/components/ft-search-filters/ft-search-filters.css b/src/renderer/components/ft-search-filters/ft-search-filters.css
index 4066da7b650e6..26ff71793938e 100644
--- a/src/renderer/components/ft-search-filters/ft-search-filters.css
+++ b/src/renderer/components/ft-search-filters/ft-search-filters.css
@@ -24,7 +24,8 @@
 
 .radioFlexBox {
   max-width: 1000px;
-  margin: 0 auto;
+  margin-block: 0;
+  margin-inline: auto;
 }
 
 @media only screen and (max-width: 600px) {
diff --git a/src/renderer/components/ft-settings-section/ft-settings-section.scss b/src/renderer/components/ft-settings-section/ft-settings-section.scss
index 51c0ea01265b5..b82b0b1849126 100644
--- a/src/renderer/components/ft-settings-section/ft-settings-section.scss
+++ b/src/renderer/components/ft-settings-section/ft-settings-section.scss
@@ -1,6 +1,7 @@
 .settingsSection {
   background-color: var(--card-bg-color);
-  margin: 0 auto;
+  margin-block: 0;
+  margin-inline: auto;
   width: 85%;
 
   @media only screen and (max-width: 800px) {
diff --git a/src/renderer/components/ft-slider/ft-slider.css b/src/renderer/components/ft-slider/ft-slider.css
index 3b79dec56ceb9..7310cb6bc24b7 100644
--- a/src/renderer/components/ft-slider/ft-slider.css
+++ b/src/renderer/components/ft-slider/ft-slider.css
@@ -164,7 +164,7 @@
 .pure-material-slider > input:disabled::-moz-range-progress {
   background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.87);
 }
-
+O
 .pure-material-slider > input:disabled::-moz-range-thumb {
   background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0));
   box-shadow: 0 0 0 1px rgb(var(--pure-material-surface-rgb, 255, 255, 255)) !important;
@@ -205,7 +205,8 @@
 /* MS | Thumb */
 .pure-material-slider > input::-ms-thumb {
   appearance: none;
-  margin: 0 17px;
+  margin-block: 0;
+  margin-inline: 17px;
   border: none;
   border-radius: 50%;
   height: 2px;
diff --git a/src/renderer/components/player-settings/player-settings.scss b/src/renderer/components/player-settings/player-settings.scss
index 4e3f3bbe4d3be..19bfa9b25f8e9 100644
--- a/src/renderer/components/player-settings/player-settings.scss
+++ b/src/renderer/components/player-settings/player-settings.scss
@@ -5,7 +5,8 @@
 .screenshotFolderContainer {
   align-items: center;
   column-gap: 1rem;
-  margin: 0 auto;
+  margin-block: 0;
+  margin-inline: auto;
   width: 95%;
 
   .screenshotFolderLabel,
diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index b579ff3f9a702..2a3866479ea86 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@@ -158,7 +158,8 @@
   position: static;
   display: block;
   float: none;
-  margin: 0 auto;
+  margin-block: 0;
+  margin-inline: auto;
   top: 0px;
   -ms-transform: none;
   transform: none;
diff --git a/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css b/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css
index 8c2f61968d9a0..af02a9394a043 100644
--- a/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css
+++ b/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css
@@ -1,7 +1,7 @@
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 60px;
+  margin-block: 0 60px;
+  margin-inline: auto;
 }
 
 .message {
diff --git a/src/renderer/views/About/About.scss b/src/renderer/views/About/About.scss
index 5d683607044e9..41592fbf7b997 100644
--- a/src/renderer/views/About/About.scss
+++ b/src/renderer/views/About/About.scss
@@ -1,6 +1,6 @@
 .card {
-  margin: 0 auto;
-  margin-bottom: 60px;
+  margin-block: 0 60px;
+  margin-inline: auto;
   width: 85%;
 
   @media only screen and (max-width: 680px) {
@@ -25,7 +25,8 @@
   display: grid;
   grid-gap: 16px;
   grid-template-columns: 1fr 1fr;
-  margin: 80px auto;
+  margin-block: 80;
+  margin-inline: auto;
   max-width: 860px;
 
   @media only screen and (max-width: 650px) {
diff --git a/src/renderer/views/History/History.css b/src/renderer/views/History/History.css
index b6db9095ce937..924a994f96e38 100644
--- a/src/renderer/views/History/History.css
+++ b/src/renderer/views/History/History.css
@@ -1,7 +1,7 @@
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 60px;
+  margin-block: 0 60px;
+  margin-inline: auto;
 }
 
 .message {
diff --git a/src/renderer/views/Popular/Popular.css b/src/renderer/views/Popular/Popular.css
index a08e05caeaca8..f9dd142c3b68d 100644
--- a/src/renderer/views/Popular/Popular.css
+++ b/src/renderer/views/Popular/Popular.css
@@ -1,7 +1,7 @@
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 60px;
+  margin-block: 0 60px;
+  margin-inline: auto;
 }
 
 .floatingTopButton {
diff --git a/src/renderer/views/ProfileSettings/ProfileSettings.css b/src/renderer/views/ProfileSettings/ProfileSettings.css
index 670ae2a98f8da..ae0b80968567b 100644
--- a/src/renderer/views/ProfileSettings/ProfileSettings.css
+++ b/src/renderer/views/ProfileSettings/ProfileSettings.css
@@ -1,7 +1,7 @@
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 60px;
+  margin-block: 0 60px;
+  margin-inline: auto;
 }
 
 .message {
@@ -10,8 +10,8 @@
 
 .profileList {
   max-width: 1000px;
-  margin: 0 auto;
-  margin-bottom: 10px;
+  margin-block: 0 10px;
+  margin-inline: auto;
 }
 
 @media only screen and (max-width: 680px) {
diff --git a/src/renderer/views/Search/Search.css b/src/renderer/views/Search/Search.css
index be15d509ee426..5977d1bd4ea3d 100644
--- a/src/renderer/views/Search/Search.css
+++ b/src/renderer/views/Search/Search.css
@@ -14,8 +14,8 @@
 
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 60px;
+  margin-block: 0 60px;
+  margin-inline: auto;
 }
 
 @media only screen and (max-width: 680px) {
diff --git a/src/renderer/views/Settings/Settings.css b/src/renderer/views/Settings/Settings.css
index c308b9a836525..ef60230187c1c 100644
--- a/src/renderer/views/Settings/Settings.css
+++ b/src/renderer/views/Settings/Settings.css
@@ -1,7 +1,8 @@
 hr {
   height: 2px;
   width: 85%;
-  margin: 0 auto;
+  margin-block: 0;
+  margin-inline: auto;
   border: 0;
   background-color: var(--scrollbar-color-hover);
 }
diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.css b/src/renderer/views/SubscribedChannels/SubscribedChannels.css
index df83ce5e49827..aefeadce2bf30 100644
--- a/src/renderer/views/SubscribedChannels/SubscribedChannels.css
+++ b/src/renderer/views/SubscribedChannels/SubscribedChannels.css
@@ -1,7 +1,7 @@
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 60px;
+  margin-block: 0 60px;
+  margin-inline: auto;
 }
 
 .message {
diff --git a/src/renderer/views/Subscriptions/Subscriptions.css b/src/renderer/views/Subscriptions/Subscriptions.css
index e1c94ae4f3c66..cad7e62dc9208 100644
--- a/src/renderer/views/Subscriptions/Subscriptions.css
+++ b/src/renderer/views/Subscriptions/Subscriptions.css
@@ -1,7 +1,7 @@
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 60px;
+  margin-block: 0 60px;
+  margin-inline: auto;
 }
 
 .message {
diff --git a/src/renderer/views/Trending/Trending.css b/src/renderer/views/Trending/Trending.css
index a3196344d3102..814e8749f94bf 100644
--- a/src/renderer/views/Trending/Trending.css
+++ b/src/renderer/views/Trending/Trending.css
@@ -1,7 +1,7 @@
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 60px;
+  margin-block: 0 60px;
+  margin-inline: auto;
 }
 
 .floatingTopButton {
diff --git a/src/renderer/views/UserPlaylists/UserPlaylists.css b/src/renderer/views/UserPlaylists/UserPlaylists.css
index b6db9095ce937..924a994f96e38 100644
--- a/src/renderer/views/UserPlaylists/UserPlaylists.css
+++ b/src/renderer/views/UserPlaylists/UserPlaylists.css
@@ -1,7 +1,7 @@
 .card {
   width: 85%;
-  margin: 0 auto;
-  margin-bottom: 60px;
+  margin-block: 0 60px;
+  margin-inline: auto;
 }
 
 .message {

From 9558f61c8df37f108313784732067288249551bb Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 28 Aug 2023 00:25:14 -0500
Subject: [PATCH 41/67] Replace left and right with inset-inline-start and
 inset-inline-end

This commit also changes border-left to border-inline-start, and border-right to border-inline-end.
---
 src/renderer/components/ft-button/ft-button.css  |  2 +-
 .../ft-channel-bubble/ft-channel-bubble.css      |  2 +-
 .../ft-community-poll/ft-community-poll.css      |  4 ++--
 .../ft-icon-button/ft-icon-button.scss           |  4 ++--
 src/renderer/components/ft-input/ft-input.css    |  7 ++++---
 src/renderer/components/ft-loader/ft-loader.css  |  2 +-
 .../ft-notification-banner.css                   |  2 +-
 .../ft-profile-selector/ft-profile-selector.css  |  6 +++---
 .../ft-progress-bar/ft-progress-bar.css          |  2 +-
 src/renderer/components/ft-prompt/ft-prompt.css  |  4 ++--
 .../ft-radio-button/ft-radio-button.css          |  6 +++---
 .../ft-search-filters/ft-search-filters.css      |  2 +-
 src/renderer/components/ft-select/ft-select.css  | 16 ++++++++--------
 .../ft-settings-section/ft-settings-section.scss |  8 ++++----
 src/renderer/components/ft-toast/ft-toast.css    |  2 +-
 .../ft-toggle-switch/ft-toggle-switch.scss       |  6 +++---
 .../components/ft-tooltip/ft-tooltip.css         | 10 +++++-----
 .../side-nav-more-options.css                    |  2 +-
 src/renderer/components/side-nav/side-nav.css    | 10 +++++-----
 .../subscriptions-tab-ui.css                     |  2 +-
 src/renderer/components/top-nav/top-nav.scss     | 16 ++++++++--------
 .../watch-video-comments.css                     |  6 +++---
 .../watch-video-info/watch-video-info.scss       |  4 ++--
 .../watch-video-live-chat.css                    |  2 +-
 src/renderer/views/Channel/Channel.css           |  2 +-
 src/renderer/views/Popular/Popular.css           |  2 +-
 src/renderer/views/Trending/Trending.css         |  2 +-
 src/renderer/views/Watch/Watch.scss              |  2 +-
 28 files changed, 68 insertions(+), 67 deletions(-)

diff --git a/src/renderer/components/ft-button/ft-button.css b/src/renderer/components/ft-button/ft-button.css
index 2a00cab980d9f..577dfd1bd3f58 100644
--- a/src/renderer/components/ft-button/ft-button.css
+++ b/src/renderer/components/ft-button/ft-button.css
@@ -38,7 +38,7 @@
   width: 100%;
   height: 100%;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   pointer-events: none;
   background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
   background-repeat: no-repeat;
diff --git a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
index 940f3a266c609..782f6d77f7f19 100644
--- a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
+++ b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
@@ -40,7 +40,7 @@
   font-size: 25px;
   position: absolute;
   top: 12px;
-  left: 12px;
+  inset-inline-start: 12px;
 }
 
 .channelName {
diff --git a/src/renderer/components/ft-community-poll/ft-community-poll.css b/src/renderer/components/ft-community-poll/ft-community-poll.css
index 39264321d030e..91e9e5e868592 100644
--- a/src/renderer/components/ft-community-poll/ft-community-poll.css
+++ b/src/renderer/components/ft-community-poll/ft-community-poll.css
@@ -11,7 +11,7 @@
   display: block;
   float: left;
   height: 10px;
-  left: 5px;
+  inset-inline-start: 5px;
   position: relative;
   top: 8px;
   width: 10px;
@@ -22,7 +22,7 @@
   background-color: black;
   float: left;
   height: 6px;
-  left: 2px;
+  inset-inline-start: 2px;
   top: 2px;
   position: relative;
   width: 6px;
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.scss b/src/renderer/components/ft-icon-button/ft-icon-button.scss
index 5364ccfc0a63e..c8d9561da542c 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.scss
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss
@@ -91,11 +91,11 @@
   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 {
diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css
index 91ed4f9423bee..fc53c0f7cd1a7 100644
--- a/src/renderer/components/ft-input/ft-input.css
+++ b/src/renderer/components/ft-input/ft-input.css
@@ -39,7 +39,7 @@
 .clearInputTextButton {
   position: absolute;
   top: 5px;
-  left: 0;
+  inset-inline-start: 0;
   /* To be higher than `.inputWrapper` */
   z-index: 1;
   margin-block: 0;
@@ -128,7 +128,7 @@
   margin-inline: 3px;
   padding: 10px;
   top: -8px;
-  right: 0;
+  inset-inline-end: 0;
   border-radius: 100%;
   color: var(--primary-text-color);
   /* this should look disabled by default */
@@ -196,7 +196,8 @@
 
 .list li {
   display: block;
-  padding: 0 15px;
+  padding-block: 0;
+  padding-inline: 15px;
   line-height: 2rem;
 }
 
diff --git a/src/renderer/components/ft-loader/ft-loader.css b/src/renderer/components/ft-loader/ft-loader.css
index bdd0a20f2d4fb..e4c5288466c12 100644
--- a/src/renderer/components/ft-loader/ft-loader.css
+++ b/src/renderer/components/ft-loader/ft-loader.css
@@ -51,7 +51,7 @@
     opacity: 0.6;
     position: absolute;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     background-color: var(--primary-color);
 
     -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
diff --git a/src/renderer/components/ft-notification-banner/ft-notification-banner.css b/src/renderer/components/ft-notification-banner/ft-notification-banner.css
index a9ca9614b0a44..361d379e75c8f 100644
--- a/src/renderer/components/ft-notification-banner/ft-notification-banner.css
+++ b/src/renderer/components/ft-notification-banner/ft-notification-banner.css
@@ -26,6 +26,6 @@
 .bannerIcon {
   position: absolute;
   top: 35%;
-  right: 10px;
+  inset-inline-end: 10px;
   cursor: pointer;
 }
diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.css b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
index eb2f7e4281d84..ef3faba06d4cd 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.css
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
@@ -25,7 +25,7 @@
   display: inline;
   position: absolute;
   top: 60px;
-  right: 10px;
+  inset-inline-end: 10px;
   min-width: 250px;
   height: 400px;
   padding: 5px;
@@ -72,12 +72,12 @@
 .profileListTitle {
   position: absolute;
   margin: 0;
-  left: 10px;
+  inset-inline-start: 10px;
 }
 
 .profileSettings {
   float: right;
   position: absolute;
   top: 10px;
-  right: 5px;
+  inset-inline-end: 5px;
 }
diff --git a/src/renderer/components/ft-progress-bar/ft-progress-bar.css b/src/renderer/components/ft-progress-bar/ft-progress-bar.css
index 43816bd2f3671..a3eca41c36349 100644
--- a/src/renderer/components/ft-progress-bar/ft-progress-bar.css
+++ b/src/renderer/components/ft-progress-bar/ft-progress-bar.css
@@ -2,7 +2,7 @@
   position: fixed;
   height: 3px;
   bottom: 0px;
-  left: 0px;
+  inset-inline-start: 0px;
   background-color: var(--primary-color);
   z-index: 1;
   transition: width 0.5s;
diff --git a/src/renderer/components/ft-prompt/ft-prompt.css b/src/renderer/components/ft-prompt/ft-prompt.css
index a8ca5159dbff5..c4f194662518d 100644
--- a/src/renderer/components/ft-prompt/ft-prompt.css
+++ b/src/renderer/components/ft-prompt/ft-prompt.css
@@ -1,7 +1,7 @@
 .prompt {
   position: fixed;
   top: 0px;
-  left: 0px;
+  inset-inline-start: 0px;
   width: 100vw;
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.7);
@@ -24,7 +24,7 @@
   width: 95%;
   margin: 0;
   position: absolute;
-  left: 2.5%;
+  inset-inline-start: 2.5%;
   box-sizing: border-box;
 }
 
diff --git a/src/renderer/components/ft-radio-button/ft-radio-button.css b/src/renderer/components/ft-radio-button/ft-radio-button.css
index 3a00f66596953..3b73b503f7777 100644
--- a/src/renderer/components/ft-radio-button/ft-radio-button.css
+++ b/src/renderer/components/ft-radio-button/ft-radio-button.css
@@ -32,7 +32,7 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
   color: var(--primary-color);
   position: absolute;
   top: 50%;
-  left: 0;
+  inset-inline-start: 0;
   width: 14px;
   height: 14px;
   margin-block-start: -9px;
@@ -47,7 +47,7 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
   background-color: var(--primary-color);
   position: absolute;
   top: 50%;
-  left: 4px;
+  inset-inline-start: 4px;
   width: 10px;
   height: 10px;
   margin-block-start: -5px;
@@ -65,7 +65,7 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
 .pure-checkbox input[type="checkbox"] + label:after, .pure-radiobutton input[type="checkbox"] + label:after {
   background-color: transparent;
   top: 50%;
-  left: 4px;
+  inset-inline-start: 4px;
   width: 8px;
   height: 3px;
   margin-block-start: -4px;
diff --git a/src/renderer/components/ft-search-filters/ft-search-filters.css b/src/renderer/components/ft-search-filters/ft-search-filters.css
index 26ff71793938e..0159e28feffff 100644
--- a/src/renderer/components/ft-search-filters/ft-search-filters.css
+++ b/src/renderer/components/ft-search-filters/ft-search-filters.css
@@ -30,6 +30,6 @@
 
 @media only screen and (max-width: 600px) {
   .searchRadio {
-    border-right: 0;
+    border-inline-end: 0;
   }
 }
diff --git a/src/renderer/components/ft-select/ft-select.css b/src/renderer/components/ft-select/ft-select.css
index 924e6e934c3d3..702ed402bb875 100644
--- a/src/renderer/components/ft-select/ft-select.css
+++ b/src/renderer/components/ft-select/ft-select.css
@@ -68,12 +68,12 @@
 .iconSelect {
   position: absolute;
   top: 10px;
-  right: 15px;
+  inset-inline-end: 15px;
   /* Styling the down arrow */
   padding: 0;
   content: '';
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
+  border-inline-start: 6px solid transparent;
+  border-inline-end: 6px solid transparent;
   pointer-events: none;
   color: var(--tertiary-text-color);
 }
@@ -81,7 +81,7 @@
 .selectTooltip {
   position: absolute;
   top: -20px;
-  right: 17px;
+  inset-inline-end: 17px;
 }
 
 
@@ -90,7 +90,7 @@
   font-size: 18px;
   font-weight: normal;
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   top: 10px;
   transition: 0.2s ease all;
   color: var(--tertiary-text-color);
@@ -122,11 +122,11 @@
 }
 
 .select-bar:before {
-  left: 50%;
+  inset-inline-start: 50%;
 }
 
 .select-bar:after {
-  right: 50%;
+  inset-inline-end: 50%;
 }
 
 /* active state */
@@ -140,7 +140,7 @@
   height: 60%;
   width: 100px;
   top: 25%;
-  left: 0;
+  inset-inline-start: 0;
   pointer-events: none;
   opacity: 0.5;
 }
diff --git a/src/renderer/components/ft-settings-section/ft-settings-section.scss b/src/renderer/components/ft-settings-section/ft-settings-section.scss
index b82b0b1849126..b53e979f0022e 100644
--- a/src/renderer/components/ft-settings-section/ft-settings-section.scss
+++ b/src/renderer/components/ft-settings-section/ft-settings-section.scss
@@ -89,12 +89,12 @@
   .settingsSection {
     > div {
       :deep(.text.bottom) {
-        left: -85px;
+        inset-inline-start: -85px;
       }
     }
 
     :deep(.switch-ctn.containsTooltip) {
-      left: -10px;
+      inset-inline-start: -10px;
       margin-inline-end: 5px;
       padding-block: 0;
       padding-inline: 10px;
@@ -104,13 +104,13 @@
       > :deep(.tooltip) {
         display: inline-block;
         position: absolute;
-        right: -25px;
+        inset-inline-end: -25px;
         top: 12px;
       }
     }
 
     .settingsFlexStart460px :deep(.tooltip) {
-      right: 0;
+      inset-inline-end: 0;
       top: -2px;
     }
 
diff --git a/src/renderer/components/ft-toast/ft-toast.css b/src/renderer/components/ft-toast/ft-toast.css
index 686b9c32f2afb..ca6df59774fae 100644
--- a/src/renderer/components/ft-toast/ft-toast.css
+++ b/src/renderer/components/ft-toast/ft-toast.css
@@ -1,6 +1,6 @@
 .toast-holder {
   position: fixed;
-  left: 50vw;
+  inset-inline-start: 50vw;
   transform: translate(-50%, 0);
   bottom: 50px;
   z-index: 1;
diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
index a522f3709bf9d..51dfdb9664ed8 100644
--- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
+++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
@@ -13,7 +13,7 @@
 .switch-input {
   appearance: none;
   height: 20px;
-  left: -3px;
+  inset-inline-start: -3px;
   position: absolute;
   top: calc(50% - 3px);
   transform: translate(0, -50%);
@@ -44,7 +44,7 @@
     background-color: #9e9e9e;
     border-radius: 8px;
     height: 14px;
-    left: 1px;
+    inset-inline-start: 1px;
     width: 34px;
 
     .switch-input:checked + & {
@@ -61,7 +61,7 @@
     border-radius: 50%;
     box-shadow: 0 3px 1px -2px rgb(0 0 0 / 14%), 0 2px 2px 0 rgb(0 0 0 / 9.8%), 0 1px 5px 0 rgb(0 0 0 / 8.4%);
     height: 20px;
-    left: 0;
+    inset-inline-start: 0;
     width: 20px;
 
     .switch-input:checked + & {
diff --git a/src/renderer/components/ft-tooltip/ft-tooltip.css b/src/renderer/components/ft-tooltip/ft-tooltip.css
index 9f6fffc46bcc3..8734408ea1c0a 100644
--- a/src/renderer/components/ft-tooltip/ft-tooltip.css
+++ b/src/renderer/components/ft-tooltip/ft-tooltip.css
@@ -55,7 +55,7 @@
 .text.bottom {
   margin-block-start: 1em;
   top: 100%;
-  left: 50%;
+  inset-inline-start: 50%;
   -webkit-transform: translate(-50%, -1em);
   transform: translate(-50%, -1em);
 }
@@ -63,21 +63,21 @@
 .text.bottom-left {
   margin-block-start: 1em;
   top: 100%;
-  left: -100px;
+  inset-inline-start: -100px;
   -webkit-transform: translate(-50%, -1em);
   transform: translate(-50%, -1em);
 }
 
 .text.left {
   margin-inline-end:1em;
-  right: 100%;
+  inset-inline-end: 100%;
   top: 50%;
   -webkit-transform: translate(1em, -50%);
   transform: translate(1em, -50%);
 }
 
 .text.right {
-  left: 100%;
+  inset-inline-start: 100%;
   margin-inline-start: 1em;
   top: 50%;
   -webkit-transform: translate(-1em, -50%);
@@ -86,7 +86,7 @@
 
 .text.top {
   bottom: 100%;
-  left: 50%;
+  inset-inline-start: 50%;
   margin-bottom: 1em;
   -webkit-transform: translate(-50%, 1em);
   transform: translate(-50%, 1em);
diff --git a/src/renderer/components/side-nav-more-options/side-nav-more-options.css b/src/renderer/components/side-nav-more-options/side-nav-more-options.css
index f1abdaede16e4..9ecd187a5fb7c 100644
--- a/src/renderer/components/side-nav-more-options/side-nav-more-options.css
+++ b/src/renderer/components/side-nav-more-options/side-nav-more-options.css
@@ -61,7 +61,7 @@
     margin-inline-start: 0px;
     width: 100%;
     text-align: center;
-    left: 0px;
+    inset-inline-start: 0px;
     font-size: 11px;
   }
 
diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index 2a3866479ea86..c4d5858482455 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@@ -4,7 +4,7 @@
   width: 200px;
   overflow-x: hidden;
   position: sticky;
-  left: 0;
+  inset-inline-start: 0;
   top: 60px;
   z-index: 3;
   box-shadow: 1px -1px 1px -1px var(--primary-shadow-color);
@@ -115,7 +115,7 @@
 .refreshIcon {
   position: absolute;
   top: 20px;
-  right: 20px;
+  inset-inline-end: 20px;
 }
 
 .closed .refreshIcon {
@@ -142,7 +142,7 @@
   margin-inline-start: 0px;
   width: 100%;
   text-align: center;
-  left: 0px;
+  inset-inline-start: 0px;
   font-size: 11px;
   margin-block-end: 0em;
 }
@@ -178,7 +178,7 @@
 
   .sideNav {
     position: fixed;
-    left: 0;
+    inset-inline-start: 0;
     bottom: 0;
 
     display: flex;
@@ -211,7 +211,7 @@
     margin-inline-start: 0px;
     width: 100%;
     text-align: center;
-    left: 0px;
+    inset-inline-start: 0px;
     font-size: 11px;
   }
 
diff --git a/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css b/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css
index af02a9394a043..2641a338f6ba2 100644
--- a/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css
+++ b/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css
@@ -11,7 +11,7 @@
 .floatingTopButton {
   position: fixed;
   top: 70px;
-  right: 10px;
+  inset-inline-end: 10px;
 }
 
 @media only screen and (max-width: 350px) {
diff --git a/src/renderer/components/top-nav/top-nav.scss b/src/renderer/components/top-nav/top-nav.scss
index d780c752e5f27..e15b86a6612ad 100644
--- a/src/renderer/components/top-nav/top-nav.scss
+++ b/src/renderer/components/top-nav/top-nav.scss
@@ -14,10 +14,10 @@
   box-shadow: 0 2px 1px 0 var(--primary-shadow-color);
   display: flex;
   height: 60px;
-  left: 0;
+  inset-inline-start: 0;
   line-height: 60px;
   position: sticky;
-  right: 0;
+  inset-inline-end: 0;
   top: 0;
   width: 100%;
   z-index: 4;
@@ -182,9 +182,9 @@
 
     @media only screen and (max-width: 680px) {
       background-color: var(--side-nav-color);
-      left: 0;
+      inset-inline-start: 0;
       position: fixed;
-      right: 0;
+      inset-inline-end: 0;
       top: 60px;
 
       @include top-nav-is-colored {
@@ -198,18 +198,18 @@
   }
 
   .searchFilters {
-    left: 0;
+    inset-inline-start: 0;
     margin-block: 10px 20px;
     margin-inline: 220px 20px;
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     transition: margin 150ms ease-in-out;
 
     @media only screen and (max-width: 680px) {
-      left: 0;
+      inset-inline-start: 0;
       margin-block: 95px 0;
       margin-inline: 10px;
-      right: 0;
+      inset-inline-end: 0;
     }
   }
 }
diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.css b/src/renderer/components/watch-video-comments/watch-video-comments.css
index 01a80c1eccd06..3d6ac41bc09c6 100644
--- a/src/renderer/components/watch-video-comments/watch-video-comments.css
+++ b/src/renderer/components/watch-video-comments/watch-video-comments.css
@@ -131,7 +131,7 @@
 
 .commentHeartBadgeImg {
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   width: 15px;
   height: 15px;
   border-radius: 50%;
@@ -140,7 +140,7 @@
 
 .commentHeartBadgeWhite {
   position: absolute;
-  left: 9px;
+  inset-inline-start: 9px;
   bottom: 1px;
   width: 11px;
   height: 11px;
@@ -150,7 +150,7 @@
 .commentHeartBadgeRed {
   position: absolute;
   color: var(--red-500);
-  left: 10px;
+  inset-inline-start: 10px;
   bottom: 2px;
   width: 9px;
   height: 9px;
diff --git a/src/renderer/components/watch-video-info/watch-video-info.scss b/src/renderer/components/watch-video-info/watch-video-info.scss
index b5a2cef21e060..6c72f1874c981 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.scss
+++ b/src/renderer/components/watch-video-info/watch-video-info.scss
@@ -112,8 +112,8 @@
     justify-content: flex-start;
 
     :deep(.iconDropdown) {
-      left: calc(50% - 20px);
-      right: auto;
+      inset-inline-start: calc(50% - 20px);
+      inset-inline-end: auto;
     }
   }
 }
diff --git a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
index f5d34be043236..423ad538f5720 100644
--- a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
+++ b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
@@ -212,7 +212,7 @@
   width: 35px;
   height: 35px;
   position: absolute;
-  left: 45%;
+  inset-inline-start: 45%;
   bottom: 20px;
   cursor: pointer;
   border-radius: 200px;
diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css
index 5f6305125770a..11ee2d73837e5 100644
--- a/src/renderer/views/Channel/Channel.css
+++ b/src/renderer/views/Channel/Channel.css
@@ -62,7 +62,7 @@
 .channelSubCount {
   color: var(--tertiary-text-color);
   top: 50px;
-  left: 120px;
+  inset-inline-start: 120px;
 }
 
 .channelInfoActionsContainer {
diff --git a/src/renderer/views/Popular/Popular.css b/src/renderer/views/Popular/Popular.css
index f9dd142c3b68d..a4d64f3a56658 100644
--- a/src/renderer/views/Popular/Popular.css
+++ b/src/renderer/views/Popular/Popular.css
@@ -7,7 +7,7 @@
 .floatingTopButton {
   position: fixed;
   top: 70px;
-  right: 10px;
+  inset-inline-end: 10px;
 }
 
 @media only screen and (max-width: 350px) {
diff --git a/src/renderer/views/Trending/Trending.css b/src/renderer/views/Trending/Trending.css
index 814e8749f94bf..f718ccb6415e4 100644
--- a/src/renderer/views/Trending/Trending.css
+++ b/src/renderer/views/Trending/Trending.css
@@ -7,7 +7,7 @@
 .floatingTopButton {
   position: fixed;
   top: 70px;
-  right: 10px;
+  inset-inline-end: 10px;
 }
 
 .trendingInfoTabs {
diff --git a/src/renderer/views/Watch/Watch.scss b/src/renderer/views/Watch/Watch.scss
index 7617b7b180714..83b09ec1a96b5 100644
--- a/src/renderer/views/Watch/Watch.scss
+++ b/src/renderer/views/Watch/Watch.scss
@@ -68,7 +68,7 @@
         color: #fff;
         display: flex;
         height: 60px;
-        left: 12px;
+        inset-inline-start: 12px;
         padding-block: 0;
         padding-inline: 12px;
         position: absolute;

From b07a378006e9d24ea392477d484390821cb8b7ff Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 28 Aug 2023 00:34:02 -0500
Subject: [PATCH 42/67] Replace margin-bottom, top, and bottom with
 margin-block-end, inset-block-start, and inset-block-end

This commit also replaces border-top and border-bottom with border-block-start and border-block-end.
---
 src/renderer/App.css                             |  2 +-
 src/renderer/components/ft-button/ft-button.css  |  2 +-
 .../ft-channel-bubble/ft-channel-bubble.css      |  4 ++--
 .../ft-community-poll/ft-community-poll.css      |  4 ++--
 .../ft-community-post/ft-community-post.scss     |  4 ++--
 .../ft-icon-button/ft-icon-button.scss           |  6 +++---
 src/renderer/components/ft-input/ft-input.css    |  8 ++++----
 src/renderer/components/ft-loader/ft-loader.css  |  2 +-
 .../ft-notification-banner.css                   |  2 +-
 .../ft-profile-edit/ft-profile-edit.css          |  2 +-
 .../ft-profile-selector/ft-profile-selector.css  |  6 +++---
 .../ft-progress-bar/ft-progress-bar.css          |  2 +-
 src/renderer/components/ft-prompt/ft-prompt.css  |  2 +-
 .../ft-radio-button/ft-radio-button.css          | 10 +++++-----
 src/renderer/components/ft-select/ft-select.css  | 12 ++++++------
 .../ft-settings-section/ft-settings-section.scss |  6 +++---
 src/renderer/components/ft-slider/ft-slider.css  |  4 ++--
 .../ft-subscribe-button/ft-subscribe-button.css  |  2 +-
 src/renderer/components/ft-toast/ft-toast.css    |  2 +-
 .../ft-toggle-switch/ft-toggle-switch.scss       |  4 ++--
 .../components/ft-tooltip/ft-tooltip.css         | 12 ++++++------
 .../ft-video-player/ft-video-player.css          |  2 +-
 .../components/playlist-info/playlist-info.scss  |  2 +-
 .../side-nav-more-options.css                    |  6 +++---
 src/renderer/components/side-nav/side-nav.css    | 16 ++++++++--------
 .../subscriptions-tab-ui.css                     |  2 +-
 src/renderer/components/top-nav/top-nav.scss     |  6 +++---
 .../watch-video-chapters.css                     |  2 +-
 .../watch-video-comments.css                     |  8 ++++----
 .../watch-video-info/watch-video-info.scss       |  4 ++--
 .../watch-video-live-chat.css                    | 14 +++++++-------
 .../watch-video-playlist.css                     |  8 ++++----
 src/renderer/scss-partials/_ft-list-item.scss    |  4 ++--
 src/renderer/views/Channel/Channel.css           |  8 ++++----
 src/renderer/views/Playlist/Playlist.css         |  6 +++---
 src/renderer/views/Popular/Popular.css           |  2 +-
 .../views/Subscriptions/Subscriptions.css        |  6 +++---
 src/renderer/views/Trending/Trending.css         |  8 ++++----
 src/renderer/views/Watch/Watch.scss              |  6 +++---
 39 files changed, 104 insertions(+), 104 deletions(-)

diff --git a/src/renderer/App.css b/src/renderer/App.css
index d520e4b73bde0..1c616d95969c1 100644
--- a/src/renderer/App.css
+++ b/src/renderer/App.css
@@ -59,6 +59,6 @@
 
   .flexBox {
     margin-block-start: 60px;
-    margin-bottom: -75px;
+    margin-block-end: -75px;
   }
 }
diff --git a/src/renderer/components/ft-button/ft-button.css b/src/renderer/components/ft-button/ft-button.css
index 577dfd1bd3f58..e37af8dbcbf35 100644
--- a/src/renderer/components/ft-button/ft-button.css
+++ b/src/renderer/components/ft-button/ft-button.css
@@ -37,7 +37,7 @@
   position: absolute;
   width: 100%;
   height: 100%;
-  top: 0;
+  inset-block-start: 0;
   inset-inline-start: 0;
   pointer-events: none;
   background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
diff --git a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
index 782f6d77f7f19..60db6abe77427 100644
--- a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
+++ b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
@@ -31,7 +31,7 @@
 
 .selected {
   position: absolute;
-  top: 10px;
+  inset-block-start: 10px;
   background-color: rgba(0, 0, 0, 0.5);
 }
 
@@ -39,7 +39,7 @@
   color: #EEEEEE;
   font-size: 25px;
   position: absolute;
-  top: 12px;
+  inset-block-start: 12px;
   inset-inline-start: 12px;
 }
 
diff --git a/src/renderer/components/ft-community-poll/ft-community-poll.css b/src/renderer/components/ft-community-poll/ft-community-poll.css
index 91e9e5e868592..df15842c15c54 100644
--- a/src/renderer/components/ft-community-poll/ft-community-poll.css
+++ b/src/renderer/components/ft-community-poll/ft-community-poll.css
@@ -13,7 +13,7 @@
   height: 10px;
   inset-inline-start: 5px;
   position: relative;
-  top: 8px;
+  inset-block-start: 8px;
   width: 10px;
 }
 
@@ -23,7 +23,7 @@
   float: left;
   height: 6px;
   inset-inline-start: 2px;
-  top: 2px;
+  inset-block-start: 2px;
   position: relative;
   width: 6px;
 }
diff --git a/src/renderer/components/ft-community-post/ft-community-post.scss b/src/renderer/components/ft-community-post/ft-community-post.scss
index af97a368cdb06..c5ed52d92ff7a 100644
--- a/src/renderer/components/ft-community-post/ft-community-post.scss
+++ b/src/renderer/components/ft-community-post/ft-community-post.scss
@@ -65,7 +65,7 @@
   .likeBar {
     border-radius: 4px;
     height: 8px;
-    margin-bottom: 4px;
+    margin-block-end: 4px;
   }
 
   .likeCount {
@@ -79,7 +79,7 @@
 
   .videoThumbnail {
     display: flex;
-    margin-bottom: auto;
+    margin-block-end: auto;
     margin-block-start: auto;
     position: relative;
     width: fit-content;
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.scss b/src/renderer/components/ft-icon-button/ft-icon-button.scss
index c8d9561da542c..91b448cb4ce80 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.scss
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss
@@ -99,11 +99,11 @@
   }
 
   &.top {
-    bottom: 45px;
+    inset-block-end 45px;
   }
 
   &.bottom {
-    top: 45px;
+    inset-block-start: 45px;
   }
 
   .list {
@@ -133,7 +133,7 @@
   }
 
   .listItemDivider {
-    border-top: 1px solid var(--tertiary-text-color);
+    border-block-start: 1px solid var(--tertiary-text-color);
     margin-block: 1px;
     margin-inline: auto;
     // Too "visible" with current color
diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css
index fc53c0f7cd1a7..e3c1dd438a7b1 100644
--- a/src/renderer/components/ft-input/ft-input.css
+++ b/src/renderer/components/ft-input/ft-input.css
@@ -38,7 +38,7 @@
 
 .clearInputTextButton {
   position: absolute;
-  top: 5px;
+  inset-block-start: 5px;
   inset-inline-start: 0;
   /* To be higher than `.inputWrapper` */
   z-index: 1;
@@ -69,7 +69,7 @@
 }
 
 .search .clearInputTextButton {
-  top: 12px;
+  inset-block-start: 12px;
 }
 
 .forceTextColor .clearInputTextButton {
@@ -88,7 +88,7 @@
   width: 100%;
   padding: 1rem;
   border: none;
-  margin-bottom: 10px;
+  margin-block-end: 10px;
   font-size: 16px;
   height: 45px;
   color: var(--secondary-text-color);
@@ -127,7 +127,7 @@
   margin-block: 0;
   margin-inline: 3px;
   padding: 10px;
-  top: -8px;
+  inset-block-start: -8px;
   inset-inline-end: 0;
   border-radius: 100%;
   color: var(--primary-text-color);
diff --git a/src/renderer/components/ft-loader/ft-loader.css b/src/renderer/components/ft-loader/ft-loader.css
index e4c5288466c12..538b43ee85acb 100644
--- a/src/renderer/components/ft-loader/ft-loader.css
+++ b/src/renderer/components/ft-loader/ft-loader.css
@@ -50,7 +50,7 @@
     border-radius: 50%;
     opacity: 0.6;
     position: absolute;
-    top: 0;
+    inset-block-start: 0;
     inset-inline-start: 0;
     background-color: var(--primary-color);
 
diff --git a/src/renderer/components/ft-notification-banner/ft-notification-banner.css b/src/renderer/components/ft-notification-banner/ft-notification-banner.css
index 361d379e75c8f..4bf8377664972 100644
--- a/src/renderer/components/ft-notification-banner/ft-notification-banner.css
+++ b/src/renderer/components/ft-notification-banner/ft-notification-banner.css
@@ -25,7 +25,7 @@
 
 .bannerIcon {
   position: absolute;
-  top: 35%;
+  inset-block-start: 35%;
   inset-inline-end: 10px;
   cursor: pointer;
 }
diff --git a/src/renderer/components/ft-profile-edit/ft-profile-edit.css b/src/renderer/components/ft-profile-edit/ft-profile-edit.css
index 8e9c5c4952f33..c72cf594982c9 100644
--- a/src/renderer/components/ft-profile-edit/ft-profile-edit.css
+++ b/src/renderer/components/ft-profile-edit/ft-profile-edit.css
@@ -13,7 +13,7 @@
 }
 
 .bottomMargin {
-  margin-bottom: 30px;
+  margin-block-end: 30px;
 }
 
 .colorOptions {
diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.css b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
index ef3faba06d4cd..620559aab434f 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.css
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
@@ -24,7 +24,7 @@
 .profileList {
   display: inline;
   position: absolute;
-  top: 60px;
+  inset-block-start: 60px;
   inset-inline-end: 10px;
   min-width: 250px;
   height: 400px;
@@ -58,7 +58,7 @@
 .profile .colorOption {
   float: left;
   position: relative;
-  bottom: 5px;
+  inset-block-end 5px;
   margin: 10px;
 }
 
@@ -78,6 +78,6 @@
 .profileSettings {
   float: right;
   position: absolute;
-  top: 10px;
+  inset-block-start: 10px;
   inset-inline-end: 5px;
 }
diff --git a/src/renderer/components/ft-progress-bar/ft-progress-bar.css b/src/renderer/components/ft-progress-bar/ft-progress-bar.css
index a3eca41c36349..acd8a5738cf27 100644
--- a/src/renderer/components/ft-progress-bar/ft-progress-bar.css
+++ b/src/renderer/components/ft-progress-bar/ft-progress-bar.css
@@ -1,7 +1,7 @@
 .progressBar {
   position: fixed;
   height: 3px;
-  bottom: 0px;
+  inset-block-end 0px;
   inset-inline-start: 0px;
   background-color: var(--primary-color);
   z-index: 1;
diff --git a/src/renderer/components/ft-prompt/ft-prompt.css b/src/renderer/components/ft-prompt/ft-prompt.css
index c4f194662518d..ed37a7f7636ff 100644
--- a/src/renderer/components/ft-prompt/ft-prompt.css
+++ b/src/renderer/components/ft-prompt/ft-prompt.css
@@ -1,6 +1,6 @@
 .prompt {
   position: fixed;
-  top: 0px;
+  inset-block-start: 0px;
   inset-inline-start: 0px;
   width: 100vw;
   height: 100vh;
diff --git a/src/renderer/components/ft-radio-button/ft-radio-button.css b/src/renderer/components/ft-radio-button/ft-radio-button.css
index 3b73b503f7777..670616ecb077e 100644
--- a/src/renderer/components/ft-radio-button/ft-radio-button.css
+++ b/src/renderer/components/ft-radio-button/ft-radio-button.css
@@ -23,7 +23,7 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
   user-select: none;
   cursor: pointer;
   display: block;
-  margin-bottom: -20px;
+  margin-block-end: -20px;
 }
 
 .pure-checkbox input[type="checkbox"] + label:before, .pure-radiobutton input[type="checkbox"] + label:before, .pure-checkbox input[type="radio"] + label:before, .pure-radiobutton input[type="radio"] + label:before {
@@ -31,7 +31,7 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
   content: '';
   color: var(--primary-color);
   position: absolute;
-  top: 50%;
+  inset-block-start: 50%;
   inset-inline-start: 0;
   width: 14px;
   height: 14px;
@@ -46,7 +46,7 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
   content: '';
   background-color: var(--primary-color);
   position: absolute;
-  top: 50%;
+  inset-block-start: 50%;
   inset-inline-start: 4px;
   width: 10px;
   height: 10px;
@@ -64,7 +64,7 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
 
 .pure-checkbox input[type="checkbox"] + label:after, .pure-radiobutton input[type="checkbox"] + label:after {
   background-color: transparent;
-  top: 50%;
+  inset-block-start: 50%;
   inset-inline-start: 4px;
   width: 8px;
   height: 3px;
@@ -103,5 +103,5 @@ borderscale {  50% {
 }
 
 .radioTitle {
-  margin-bottom: -20px;
+  margin-block-end: -20px;
 }
diff --git a/src/renderer/components/ft-select/ft-select.css b/src/renderer/components/ft-select/ft-select.css
index 702ed402bb875..429fa362068ae 100644
--- a/src/renderer/components/ft-select/ft-select.css
+++ b/src/renderer/components/ft-select/ft-select.css
@@ -67,7 +67,7 @@
 
 .iconSelect {
   position: absolute;
-  top: 10px;
+  inset-block-start: 10px;
   inset-inline-end: 15px;
   /* Styling the down arrow */
   padding: 0;
@@ -80,7 +80,7 @@
 
 .selectTooltip {
   position: absolute;
-  top: -20px;
+  inset-block-start: -20px;
   inset-inline-end: 17px;
 }
 
@@ -91,7 +91,7 @@
   font-weight: normal;
   position: absolute;
   inset-inline-start: 0;
-  top: 10px;
+  inset-block-start: 10px;
   transition: 0.2s ease all;
   color: var(--tertiary-text-color);
 }
@@ -99,7 +99,7 @@
 /* active state */
 .select-text:focus ~ .select-label, .select-text:valid ~ .select-label {
   color: var(--accent-color);
-  top: -20px;
+  inset-block-start: -20px;
   transition: 0.2s ease all;
   font-size: 14px;
 }
@@ -115,7 +115,7 @@
   content: '';
   height: 2px;
   width: 0;
-  bottom: 1px;
+  inset-block-end 1px;
   position: absolute;
   background: var(--accent-color);
   transition: 0.2s ease all;
@@ -139,7 +139,7 @@
   position: absolute;
   height: 60%;
   width: 100px;
-  top: 25%;
+  inset-block-start: 25%;
   inset-inline-start: 0;
   pointer-events: none;
   opacity: 0.5;
diff --git a/src/renderer/components/ft-settings-section/ft-settings-section.scss b/src/renderer/components/ft-settings-section/ft-settings-section.scss
index b53e979f0022e..ddc6edd444d0c 100644
--- a/src/renderer/components/ft-settings-section/ft-settings-section.scss
+++ b/src/renderer/components/ft-settings-section/ft-settings-section.scss
@@ -21,7 +21,7 @@
 
   > div:not(:last-child, .ft-flex-box) {
     @media only screen and (max-width: 800px) {
-      margin-bottom: 20px;
+      margin-block-end: 20px;
     }
   }
 }
@@ -105,13 +105,13 @@
         display: inline-block;
         position: absolute;
         inset-inline-end: -25px;
-        top: 12px;
+        inset-block-start: 12px;
       }
     }
 
     .settingsFlexStart460px :deep(.tooltip) {
       inset-inline-end: 0;
-      top: -2px;
+      inset-block-start: -2px;
     }
 
     :deep(.switch-ctn) {
diff --git a/src/renderer/components/ft-slider/ft-slider.css b/src/renderer/components/ft-slider/ft-slider.css
index 7310cb6bc24b7..ae7e957b87a92 100644
--- a/src/renderer/components/ft-slider/ft-slider.css
+++ b/src/renderer/components/ft-slider/ft-slider.css
@@ -18,7 +18,7 @@
 .pure-material-slider > input {
   -webkit-appearance: none;
   position: relative;
-  top: 24px;
+  inset-block-start: 24px;
   display: block;
   margin-block: 0 -36px;
   margin-inline: 0;
@@ -37,7 +37,7 @@
 /* Span */
 .pure-material-slider > span {
   display: inline-block;
-  margin-bottom: 36px;
+  margin-block-end: 36px;
 }
 
 /* Focus */
diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css
index 7aff233049d6e..9faeb44025d03 100644
--- a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css
+++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css
@@ -1,6 +1,6 @@
 .subscribeButton {
   align-self: center;
   height: 50%;
-  margin-bottom: 10px;
+  margin-block-end: 10px;
   min-width: 150px;
 }
diff --git a/src/renderer/components/ft-toast/ft-toast.css b/src/renderer/components/ft-toast/ft-toast.css
index ca6df59774fae..0956f6deddde6 100644
--- a/src/renderer/components/ft-toast/ft-toast.css
+++ b/src/renderer/components/ft-toast/ft-toast.css
@@ -2,7 +2,7 @@
   position: fixed;
   inset-inline-start: 50vw;
   transform: translate(-50%, 0);
-  bottom: 50px;
+  inset-block-end 50px;
   z-index: 1;
   display: flex;
   flex-direction: column;
diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
index 51dfdb9664ed8..7c5e3f5e8ec25 100644
--- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
+++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
@@ -15,7 +15,7 @@
   height: 20px;
   inset-inline-start: -3px;
   position: absolute;
-  top: calc(50% - 3px);
+  inset-block-start: calc(50% - 3px);
   transform: translate(0, -50%);
   width: 34px;
 }
@@ -35,7 +35,7 @@
     margin: 0;
     outline: 0;
     position: absolute;
-    top: 50%;
+    inset-block-start: 50%;
     transform: translate(0, -50%);
     transition: all 0.3s ease;
   }
diff --git a/src/renderer/components/ft-tooltip/ft-tooltip.css b/src/renderer/components/ft-tooltip/ft-tooltip.css
index 8734408ea1c0a..9a6bc9134c871 100644
--- a/src/renderer/components/ft-tooltip/ft-tooltip.css
+++ b/src/renderer/components/ft-tooltip/ft-tooltip.css
@@ -54,7 +54,7 @@
 
 .text.bottom {
   margin-block-start: 1em;
-  top: 100%;
+  inset-block-start: 100%;
   inset-inline-start: 50%;
   -webkit-transform: translate(-50%, -1em);
   transform: translate(-50%, -1em);
@@ -62,7 +62,7 @@
 
 .text.bottom-left {
   margin-block-start: 1em;
-  top: 100%;
+  inset-block-start: 100%;
   inset-inline-start: -100px;
   -webkit-transform: translate(-50%, -1em);
   transform: translate(-50%, -1em);
@@ -71,7 +71,7 @@
 .text.left {
   margin-inline-end:1em;
   inset-inline-end: 100%;
-  top: 50%;
+  inset-block-start: 50%;
   -webkit-transform: translate(1em, -50%);
   transform: translate(1em, -50%);
 }
@@ -79,15 +79,15 @@
 .text.right {
   inset-inline-start: 100%;
   margin-inline-start: 1em;
-  top: 50%;
+  inset-block-start: 50%;
   -webkit-transform: translate(-1em, -50%);
   transform: translate(-1em, -50%);
 }
 
 .text.top {
-  bottom: 100%;
+  inset-block-end 100%;
   inset-inline-start: 50%;
-  margin-bottom: 1em;
+  margin-block-end: 1em;
   -webkit-transform: translate(-50%, 1em);
   transform: translate(-50%, 1em);
 }
diff --git a/src/renderer/components/ft-video-player/ft-video-player.css b/src/renderer/components/ft-video-player/ft-video-player.css
index d34fd7dd84118..c751799f90781 100644
--- a/src/renderer/components/ft-video-player/ft-video-player.css
+++ b/src/renderer/components/ft-video-player/ft-video-player.css
@@ -22,7 +22,7 @@
 
 :deep(.chapterMarker) {
   height: 100%;
-  top: 0;
+  inset-block-start: 0;
   width: 2px;
   z-index: 2;
   background-color: #000;
diff --git a/src/renderer/components/playlist-info/playlist-info.scss b/src/renderer/components/playlist-info/playlist-info.scss
index f06dca68fe2e3..2aaec046357fc 100644
--- a/src/renderer/components/playlist-info/playlist-info.scss
+++ b/src/renderer/components/playlist-info/playlist-info.scss
@@ -21,7 +21,7 @@
 }
 
 .playlistTitle {
-  margin-bottom: 0.1em;
+  margin-block-end: 0.1em;
 }
 
 .playlistDescription {
diff --git a/src/renderer/components/side-nav-more-options/side-nav-more-options.css b/src/renderer/components/side-nav-more-options/side-nav-more-options.css
index 9ecd187a5fb7c..d3ed54600654c 100644
--- a/src/renderer/components/side-nav-more-options/side-nav-more-options.css
+++ b/src/renderer/components/side-nav-more-options/side-nav-more-options.css
@@ -28,7 +28,7 @@
 .moreOptionContainer {
   position: fixed;
   background-color: var(--side-nav-color);
-  bottom: 60px;
+  inset-block-end 60px;
   width: 70px;
   z-index: 0;
   -webkit-box-shadow: 3px -3px 5px 0px rgba(0,0,0,0.2);
@@ -45,8 +45,8 @@
     margin-block-start: 0px;
     height: 60px;
     width: 100%;
-    bottom: 0px;
-    top: auto;
+    inset-block-end 0px;
+    inset-block-start: auto;
     overflow-y: inherit;
   }
 
diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index c4d5858482455..54b758a35877e 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@@ -5,7 +5,7 @@
   overflow-x: hidden;
   position: sticky;
   inset-inline-start: 0;
-  top: 60px;
+  inset-block-start: 60px;
   z-index: 3;
   box-shadow: 1px -1px 1px -1px var(--primary-shadow-color);
   background-color: var(--side-nav-color);
@@ -85,7 +85,7 @@
   width: 35px;
   margin: 0;
   position: absolute;
-  top: 50%;
+  inset-block-start: 50%;
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
 }
@@ -114,7 +114,7 @@
 
 .refreshIcon {
   position: absolute;
-  top: 20px;
+  inset-block-start: 20px;
   inset-inline-end: 20px;
 }
 
@@ -132,7 +132,7 @@
   margin-inline-start: 0px;
   width: 100%;
   display: block;
-  margin-bottom: 0px;
+  margin-block-end: 0px;
 }
 .closed .navIconExpand{
   height:1.3em;
@@ -160,7 +160,7 @@
   float: none;
   margin-block: 0;
   margin-inline: auto;
-  top: 0px;
+  inset-block-start: 0px;
   -ms-transform: none;
   transform: none;
   margin-block-start: 0.3em;
@@ -179,7 +179,7 @@
   .sideNav {
     position: fixed;
     inset-inline-start: 0;
-    bottom: 0;
+    inset-block-end 0;
 
     display: flex;
   }
@@ -194,8 +194,8 @@
     margin-block-start: 0px;
     height: 60px;
     width: 100%;
-    bottom: 0px;
-    top: auto;
+    inset-block-end 0px;
+    inset-block-start: auto;
     overflow-y: hidden;
   }
 
diff --git a/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css b/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css
index 2641a338f6ba2..103af5333ec49 100644
--- a/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css
+++ b/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css
@@ -10,7 +10,7 @@
 
 .floatingTopButton {
   position: fixed;
-  top: 70px;
+  inset-block-start: 70px;
   inset-inline-end: 10px;
 }
 
diff --git a/src/renderer/components/top-nav/top-nav.scss b/src/renderer/components/top-nav/top-nav.scss
index e15b86a6612ad..a7a72e128c3d8 100644
--- a/src/renderer/components/top-nav/top-nav.scss
+++ b/src/renderer/components/top-nav/top-nav.scss
@@ -18,7 +18,7 @@
   line-height: 60px;
   position: sticky;
   inset-inline-end: 0;
-  top: 0;
+  inset-block-start: 0;
   width: 100%;
   z-index: 4;
 
@@ -158,7 +158,7 @@
       height: 40px;
       margin-inline-start: 5px;
       position: relative;
-      top: -3px;
+      inset-block-start: -3px;
       width: 100px;
 
       @media only screen and (max-width: 680px) {
@@ -185,7 +185,7 @@
       inset-inline-start: 0;
       position: fixed;
       inset-inline-end: 0;
-      top: 60px;
+      inset-block-start: 60px;
 
       @include top-nav-is-colored {
         background-color: var(--primary-color-hover);
diff --git a/src/renderer/components/watch-video-chapters/watch-video-chapters.css b/src/renderer/components/watch-video-chapters/watch-video-chapters.css
index 190cd10714513..29e3a29eb71b8 100644
--- a/src/renderer/components/watch-video-chapters/watch-video-chapters.css
+++ b/src/renderer/components/watch-video-chapters/watch-video-chapters.css
@@ -4,7 +4,7 @@
 
 .chaptersTitle {
   margin-block-start: 10px;
-  margin-bottom: 0;
+  margin-block-end: 0;
   cursor: pointer;
 }
 
diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.css b/src/renderer/components/watch-video-comments/watch-video-comments.css
index 3d6ac41bc09c6..aab3a6b1e6970 100644
--- a/src/renderer/components/watch-video-comments/watch-video-comments.css
+++ b/src/renderer/components/watch-video-comments/watch-video-comments.css
@@ -99,7 +99,7 @@
   margin-block-end: 0;
   margin-block-start: 0;
   margin-inline-start: 68px;
-  margin-bottom: 5px;
+  margin-block-end: 5px;
 }
 
 .commentDate {
@@ -126,7 +126,7 @@
   width: 25px;
   height: 20px;
   margin-inline-start: 10px;
-  margin-bottom: -7px;
+  margin-block-end: -7px;
 }
 
 .commentHeartBadgeImg {
@@ -141,7 +141,7 @@
 .commentHeartBadgeWhite {
   position: absolute;
   inset-inline-start: 9px;
-  bottom: 1px;
+  inset-block-end 1px;
   width: 11px;
   height: 11px;
   z-index: 1;
@@ -151,7 +151,7 @@
   position: absolute;
   color: var(--red-500);
   inset-inline-start: 10px;
-  bottom: 2px;
+  inset-block-end 2px;
   width: 9px;
   height: 9px;
   z-index: 2;
diff --git a/src/renderer/components/watch-video-info/watch-video-info.scss b/src/renderer/components/watch-video-info/watch-video-info.scss
index 6c72f1874c981..224d9ccf70b6b 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.scss
+++ b/src/renderer/components/watch-video-info/watch-video-info.scss
@@ -38,7 +38,7 @@
     margin-inline-start: 6px;
     position: relative;
     text-decoration: inherit;
-    top: -2px;
+    inset-block-start: -2px;
   }
 
   .subscribeButton {
@@ -91,7 +91,7 @@
   .likeBar {
     border-radius: 4px;
     height: 8px;
-    margin-bottom: 4px;
+    margin-block-end: 4px;
   }
 
   .likeCount {
diff --git a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
index 423ad538f5720..8e88cf83916f0 100644
--- a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
+++ b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
@@ -91,7 +91,7 @@
   position: absolute;
   margin-inline-start: -16px;
   padding-inline-end: 32px;
-  bottom: -15px;
+  inset-block-end -15px;
   cursor: auto;
   z-index: 1;
 }
@@ -122,7 +122,7 @@
   margin-inline-start: 5%;
   margin-inline-end: 5%;
   margin-block-start: 25px;
-  margin-bottom: 10px;
+  margin-block-end: 10px;
   background-color: var(--primary-color);
   border-radius: 5px;
   -webkit-border-radius: 5px;
@@ -148,7 +148,7 @@
   color: var(--text-with-main-color);
   opacity: 0.7;
   position: absolute;
-  top: -20px;
+  inset-block-start: -20px;
   margin-inline-start: 65px;
 }
 
@@ -157,7 +157,7 @@
   font-weight: bold;
   margin-inline-start: 65px;
   position: absolute;
-  top: 0px;
+  inset-block-start: 0px;
 }
 
 .superChatMessage .chatMessage {
@@ -178,7 +178,7 @@
 
 .chatContent {
   margin-block-start: 5px;
-  margin-bottom: 2px;
+  margin-block-end: 2px;
   font-size: 12px;
   word-wrap: break-word;
 }
@@ -213,7 +213,7 @@
   height: 35px;
   position: absolute;
   inset-inline-start: 45%;
-  bottom: 20px;
+  inset-block-end 20px;
   cursor: pointer;
   border-radius: 200px;
   -webkit-border-radius: 200px;
@@ -231,5 +231,5 @@
   color: var(--text-with-accent-color);
   font-size: 22px;
   position: relative;
-  top: 0.45rem;
+  inset-block-start: 0.45rem;
 }
diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.css b/src/renderer/components/watch-video-playlist/watch-video-playlist.css
index 75488b63a7665..19aa00fb4e49c 100644
--- a/src/renderer/components/watch-video-playlist/watch-video-playlist.css
+++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.css
@@ -6,12 +6,12 @@
 .channelName {
   font-size: 15px;
   position: relative;
-  bottom: 15px;
+  inset-block-end 15px;
 }
 
 .playlistIndex {
   position: relative;
-  bottom: 15px;
+  inset-block-end 15px;
   color: var(--tertiary-text-color);
 }
 
@@ -67,7 +67,7 @@
 }
 
 .playlistItem:not(:last-child) {
-  margin-bottom: 8px;
+  margin-block-end: 8px;
 }
 
 .playlistItem:hover {
@@ -91,5 +91,5 @@
 .videoInfo {
   margin-inline-start: 30px;
   position: relative;
-  bottom: 7px;
+  inset-block-end 7px;
 }
diff --git a/src/renderer/scss-partials/_ft-list-item.scss b/src/renderer/scss-partials/_ft-list-item.scss
index 60c6cbabf4dcb..9b338ac53a656 100644
--- a/src/renderer/scss-partials/_ft-list-item.scss
+++ b/src/renderer/scss-partials/_ft-list-item.scss
@@ -143,7 +143,7 @@ $watched-transition-duration: 0.5s;
       align-self: flex-end;
       font-size: 17px;
       justify-self: left;
-      margin-bottom: 4px;
+      margin-block-end: 4px;
       margin-inline-start: 4px;
     }
 
@@ -284,7 +284,7 @@ $watched-transition-duration: 0.5s;
 
     .videoThumbnail,
     .channelThumbnail {
-      margin-bottom: 12px;
+      margin-block-end: 12px;
 
       .thumbnailImage {
         width: 100%;
diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css
index 11ee2d73837e5..77d807acd49aa 100644
--- a/src/renderer/views/Channel/Channel.css
+++ b/src/renderer/views/Channel/Channel.css
@@ -61,7 +61,7 @@
 
 .channelSubCount {
   color: var(--tertiary-text-color);
-  top: 50px;
+  inset-block-start: 50px;
   inset-inline-start: 120px;
 }
 
@@ -109,18 +109,18 @@
   align-self: flex-end;
   text-align: center;
   color: var(--tertiary-text-color);
-  border-bottom: 3px solid transparent;
+  border-block-end: 3px solid transparent;
 }
 
 .tab:hover,
 .tab:focus {
   font-weight: bold;
-  border-bottom: 3px solid var(--tertiary-text-color);
+  border-block-end: 3px solid var(--tertiary-text-color);
 }
 
 .selectedTab {
   color: var(--primary-text-color);
-  border-bottom: 3px solid var(--primary-color);
+  border-block-end: 3px solid var(--primary-color);
   font-weight: bold;
   box-sizing: border-box;
 }
diff --git a/src/renderer/views/Playlist/Playlist.css b/src/renderer/views/Playlist/Playlist.css
index 0e1ba0cfc6d9a..59550e3a65ca8 100644
--- a/src/renderer/views/Playlist/Playlist.css
+++ b/src/renderer/views/Playlist/Playlist.css
@@ -10,7 +10,7 @@
   overflow-y: auto;
   padding: 10px;
   position: sticky;
-  top: 96px;
+  inset-block-start: 96px;
   width: 30%;
 }
 
@@ -41,7 +41,7 @@
 
 :deep(.videoThumbnail) {
   margin-block-start: auto;
-  margin-bottom: auto;
+  margin-block-end: auto;
 }
 
 :deep(.thumbnailImage) {
@@ -56,7 +56,7 @@
   .playlistInfo {
     box-sizing: border-box;
     position: relative;
-    top: 0;
+    inset-block-start: 0;
     height: auto;
     width: 100%;
   }
diff --git a/src/renderer/views/Popular/Popular.css b/src/renderer/views/Popular/Popular.css
index a4d64f3a56658..ac963d12e854d 100644
--- a/src/renderer/views/Popular/Popular.css
+++ b/src/renderer/views/Popular/Popular.css
@@ -6,7 +6,7 @@
 
 .floatingTopButton {
   position: fixed;
-  top: 70px;
+  inset-block-start: 70px;
   inset-inline-end: 10px;
 }
 
diff --git a/src/renderer/views/Subscriptions/Subscriptions.css b/src/renderer/views/Subscriptions/Subscriptions.css
index cad7e62dc9208..21a6d79aea7ea 100644
--- a/src/renderer/views/Subscriptions/Subscriptions.css
+++ b/src/renderer/views/Subscriptions/Subscriptions.css
@@ -12,15 +12,15 @@
   width: 100%;
   margin-block-start: -3px;
   color: var(--tertiary-text-color);
-  margin-bottom: 10px;
+  margin-block-end: 10px;
 }
 
 .selectedTab {
-  border-bottom: 3px solid var(--primary-color);
+  border-block-end: 3px solid var(--primary-color);
   color: var(--primary-text-color);
   font-weight: bold;
   box-sizing: border-box;
-  margin-bottom: -3px;
+  margin-block-end: -3px;
 }
 
 .tab {
diff --git a/src/renderer/views/Trending/Trending.css b/src/renderer/views/Trending/Trending.css
index f718ccb6415e4..51640fed1f5f4 100644
--- a/src/renderer/views/Trending/Trending.css
+++ b/src/renderer/views/Trending/Trending.css
@@ -6,7 +6,7 @@
 
 .floatingTopButton {
   position: fixed;
-  top: 70px;
+  inset-block-start: 70px;
   inset-inline-end: 10px;
 }
 
@@ -16,15 +16,15 @@
   grid-template-columns: 1fr 1fr 1fr 1fr;
   margin-block-start: -3px;
   color: var(--tertiary-text-color);
-  margin-bottom: 10px;
+  margin-block-end: 10px;
 }
 
 .selectedTab {
-  border-bottom: 3px solid var(--primary-color);
+  border-block-end: 3px solid var(--primary-color);
   color: var(--primary-text-color);
   font-weight: bold;
   box-sizing: border-box;
-  margin-bottom: -3px;
+  margin-block-end: -3px;
 }
 
 .tab {
diff --git a/src/renderer/views/Watch/Watch.scss b/src/renderer/views/Watch/Watch.scss
index 83b09ec1a96b5..fd5c3771e8066 100644
--- a/src/renderer/views/Watch/Watch.scss
+++ b/src/renderer/views/Watch/Watch.scss
@@ -64,7 +64,7 @@
         align-items: center;
         background-color: rgb(0 0 0 / 80%);
         border-radius: 5px;
-        bottom: 12px;
+        inset-block-end 12px;
         color: #fff;
         display: flex;
         height: 60px;
@@ -132,7 +132,7 @@
   .watchVideoPlaylist {
     :deep(.videoThumbnail) {
       margin-block-start: auto;
-      margin-bottom: auto;
+      margin-block-end: auto;
     }
     @media (max-width: 768px) {
       height: auto;
@@ -171,7 +171,7 @@
 
     .infoAreaSticky {
       position: sticky;
-      top: 76px;
+      inset-block-start: 76px;
     }
   }
 }

From fa2cba3f1650a2afc00449dfdfadc4decce94813 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 28 Aug 2023 00:35:18 -0500
Subject: [PATCH 43/67] Replace text-align left and right with text-align start
 and end

---
 src/renderer/components/channel-about/channel-about.css   | 2 +-
 .../components/ft-community-post/ft-community-post.scss   | 4 ++--
 .../components/ft-toggle-switch/ft-toggle-switch.scss     | 2 +-
 .../components/watch-video-info/watch-video-info.scss     | 8 ++++----
 src/renderer/themes.css                                   | 2 +-
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/renderer/components/channel-about/channel-about.css b/src/renderer/components/channel-about/channel-about.css
index 0af4cb90f1805..8b01216021a82 100644
--- a/src/renderer/components/channel-about/channel-about.css
+++ b/src/renderer/components/channel-about/channel-about.css
@@ -34,7 +34,7 @@
 }
 
 .aboutDetails {
-  text-align: left;
+  text-align: start;
 }
 
 .aboutDetails th {
diff --git a/src/renderer/components/ft-community-post/ft-community-post.scss b/src/renderer/components/ft-community-post/ft-community-post.scss
index c5ed52d92ff7a..6f56df4f4c38c 100644
--- a/src/renderer/components/ft-community-post/ft-community-post.scss
+++ b/src/renderer/components/ft-community-post/ft-community-post.scss
@@ -55,11 +55,11 @@
   font-size: 15px;
   margin-block-start: 4px;
   max-width: 210px;
-  text-align: left;
+  text-align: start;
 
   @media screen and (max-width: 680px) {
     margin-inline-start: 0;
-    text-align: left;
+    text-align: start;
   }
 
   .likeBar {
diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
index 7c5e3f5e8ec25..4af00fc0ee01d 100644
--- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
+++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
@@ -27,7 +27,7 @@
   padding-block: 12px;
   padding-inline: 44px 0;
   position: relative;
-  text-align: left;
+  text-align: start;
 
   &::before,
   &::after {
diff --git a/src/renderer/components/watch-video-info/watch-video-info.scss b/src/renderer/components/watch-video-info/watch-video-info.scss
index 224d9ccf70b6b..fa086d1083421 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.scss
+++ b/src/renderer/components/watch-video-info/watch-video-info.scss
@@ -53,10 +53,10 @@
 .datePublished {
   color: var(--secondary-text-color);
   font-size: 15px;
-  text-align: right;
+  text-align: end;
 
   @media screen and (max-width: 680px) {
-    text-align: left;
+    text-align: start;
   }
 }
 
@@ -81,11 +81,11 @@
   margin-inline-start: auto;
   margin-block-start: 4px;
   max-width: 210px;
-  text-align: right;
+  text-align: end;
 
   @media screen and (max-width: 680px) {
     margin-inline-start: 0;
-    text-align: left;
+    text-align: start;
   }
 
   .likeBar {
diff --git a/src/renderer/themes.css b/src/renderer/themes.css
index 56743fadc7319..fc2aa2e0462e4 100644
--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@@ -921,7 +921,7 @@ body {
 }
 
 .rightAligned {
-  text-align: right;
+  text-align: end;
 }
 
 a:link {

From 31729e67b12dee28c84eb68a69adab60a314601a Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 28 Aug 2023 00:38:48 -0500
Subject: [PATCH 44/67] Fix syntax error with inset-block-end

---
 src/renderer/components/ft-icon-button/ft-icon-button.scss  | 2 +-
 .../components/ft-profile-selector/ft-profile-selector.css  | 2 +-
 src/renderer/components/ft-progress-bar/ft-progress-bar.css | 2 +-
 src/renderer/components/ft-select/ft-select.css             | 2 +-
 src/renderer/components/ft-toast/ft-toast.css               | 2 +-
 src/renderer/components/ft-tooltip/ft-tooltip.css           | 2 +-
 .../side-nav-more-options/side-nav-more-options.css         | 4 ++--
 src/renderer/components/side-nav/side-nav.css               | 4 ++--
 .../watch-video-comments/watch-video-comments.css           | 4 ++--
 .../watch-video-live-chat/watch-video-live-chat.css         | 4 ++--
 .../watch-video-playlist/watch-video-playlist.css           | 6 +++---
 src/renderer/views/Watch/Watch.scss                         | 2 +-
 12 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.scss b/src/renderer/components/ft-icon-button/ft-icon-button.scss
index 91b448cb4ce80..1ebbed17672f7 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.scss
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss
@@ -99,7 +99,7 @@
   }
 
   &.top {
-    inset-block-end 45px;
+    inset-block-end: 45px;
   }
 
   &.bottom {
diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.css b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
index 620559aab434f..8a0a5f443e453 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.css
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
@@ -58,7 +58,7 @@
 .profile .colorOption {
   float: left;
   position: relative;
-  inset-block-end 5px;
+  inset-block-end: 5px;
   margin: 10px;
 }
 
diff --git a/src/renderer/components/ft-progress-bar/ft-progress-bar.css b/src/renderer/components/ft-progress-bar/ft-progress-bar.css
index acd8a5738cf27..8dc334371cfbe 100644
--- a/src/renderer/components/ft-progress-bar/ft-progress-bar.css
+++ b/src/renderer/components/ft-progress-bar/ft-progress-bar.css
@@ -1,7 +1,7 @@
 .progressBar {
   position: fixed;
   height: 3px;
-  inset-block-end 0px;
+  inset-block-end: 0px;
   inset-inline-start: 0px;
   background-color: var(--primary-color);
   z-index: 1;
diff --git a/src/renderer/components/ft-select/ft-select.css b/src/renderer/components/ft-select/ft-select.css
index 429fa362068ae..67a822bbf7775 100644
--- a/src/renderer/components/ft-select/ft-select.css
+++ b/src/renderer/components/ft-select/ft-select.css
@@ -115,7 +115,7 @@
   content: '';
   height: 2px;
   width: 0;
-  inset-block-end 1px;
+  inset-block-end: 1px;
   position: absolute;
   background: var(--accent-color);
   transition: 0.2s ease all;
diff --git a/src/renderer/components/ft-toast/ft-toast.css b/src/renderer/components/ft-toast/ft-toast.css
index 0956f6deddde6..e252e0c39c22a 100644
--- a/src/renderer/components/ft-toast/ft-toast.css
+++ b/src/renderer/components/ft-toast/ft-toast.css
@@ -2,7 +2,7 @@
   position: fixed;
   inset-inline-start: 50vw;
   transform: translate(-50%, 0);
-  inset-block-end 50px;
+  inset-block-end: 50px;
   z-index: 1;
   display: flex;
   flex-direction: column;
diff --git a/src/renderer/components/ft-tooltip/ft-tooltip.css b/src/renderer/components/ft-tooltip/ft-tooltip.css
index 9a6bc9134c871..04dc8ffd109fb 100644
--- a/src/renderer/components/ft-tooltip/ft-tooltip.css
+++ b/src/renderer/components/ft-tooltip/ft-tooltip.css
@@ -85,7 +85,7 @@
 }
 
 .text.top {
-  inset-block-end 100%;
+  inset-block-end: 100%;
   inset-inline-start: 50%;
   margin-block-end: 1em;
   -webkit-transform: translate(-50%, 1em);
diff --git a/src/renderer/components/side-nav-more-options/side-nav-more-options.css b/src/renderer/components/side-nav-more-options/side-nav-more-options.css
index d3ed54600654c..90aee4ee69347 100644
--- a/src/renderer/components/side-nav-more-options/side-nav-more-options.css
+++ b/src/renderer/components/side-nav-more-options/side-nav-more-options.css
@@ -28,7 +28,7 @@
 .moreOptionContainer {
   position: fixed;
   background-color: var(--side-nav-color);
-  inset-block-end 60px;
+  inset-block-end: 60px;
   width: 70px;
   z-index: 0;
   -webkit-box-shadow: 3px -3px 5px 0px rgba(0,0,0,0.2);
@@ -45,7 +45,7 @@
     margin-block-start: 0px;
     height: 60px;
     width: 100%;
-    inset-block-end 0px;
+    inset-block-end: 0px;
     inset-block-start: auto;
     overflow-y: inherit;
   }
diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index 54b758a35877e..784614c774f28 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@@ -179,7 +179,7 @@
   .sideNav {
     position: fixed;
     inset-inline-start: 0;
-    inset-block-end 0;
+    inset-block-end: 0;
 
     display: flex;
   }
@@ -194,7 +194,7 @@
     margin-block-start: 0px;
     height: 60px;
     width: 100%;
-    inset-block-end 0px;
+    inset-block-end: 0px;
     inset-block-start: auto;
     overflow-y: hidden;
   }
diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.css b/src/renderer/components/watch-video-comments/watch-video-comments.css
index aab3a6b1e6970..b3f181b9de245 100644
--- a/src/renderer/components/watch-video-comments/watch-video-comments.css
+++ b/src/renderer/components/watch-video-comments/watch-video-comments.css
@@ -141,7 +141,7 @@
 .commentHeartBadgeWhite {
   position: absolute;
   inset-inline-start: 9px;
-  inset-block-end 1px;
+  inset-block-end: 1px;
   width: 11px;
   height: 11px;
   z-index: 1;
@@ -151,7 +151,7 @@
   position: absolute;
   color: var(--red-500);
   inset-inline-start: 10px;
-  inset-block-end 2px;
+  inset-block-end: 2px;
   width: 9px;
   height: 9px;
   z-index: 2;
diff --git a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
index 8e88cf83916f0..0a9e1a956592c 100644
--- a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
+++ b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
@@ -91,7 +91,7 @@
   position: absolute;
   margin-inline-start: -16px;
   padding-inline-end: 32px;
-  inset-block-end -15px;
+  inset-block-end: -15px;
   cursor: auto;
   z-index: 1;
 }
@@ -213,7 +213,7 @@
   height: 35px;
   position: absolute;
   inset-inline-start: 45%;
-  inset-block-end 20px;
+  inset-block-end: 20px;
   cursor: pointer;
   border-radius: 200px;
   -webkit-border-radius: 200px;
diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.css b/src/renderer/components/watch-video-playlist/watch-video-playlist.css
index 19aa00fb4e49c..1b01eeac13d8c 100644
--- a/src/renderer/components/watch-video-playlist/watch-video-playlist.css
+++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.css
@@ -6,12 +6,12 @@
 .channelName {
   font-size: 15px;
   position: relative;
-  inset-block-end 15px;
+  inset-block-end: 15px;
 }
 
 .playlistIndex {
   position: relative;
-  inset-block-end 15px;
+  inset-block-end: 15px;
   color: var(--tertiary-text-color);
 }
 
@@ -91,5 +91,5 @@
 .videoInfo {
   margin-inline-start: 30px;
   position: relative;
-  inset-block-end 7px;
+  inset-block-end: 7px;
 }
diff --git a/src/renderer/views/Watch/Watch.scss b/src/renderer/views/Watch/Watch.scss
index fd5c3771e8066..f2d74a3ac99aa 100644
--- a/src/renderer/views/Watch/Watch.scss
+++ b/src/renderer/views/Watch/Watch.scss
@@ -64,7 +64,7 @@
         align-items: center;
         background-color: rgb(0 0 0 / 80%);
         border-radius: 5px;
-        inset-block-end 12px;
+        inset-block-end: 12px;
         color: #fff;
         display: flex;
         height: 60px;

From 08a0a5f18916d5e037af86b1947d9ae0f9b93652 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 28 Aug 2023 01:37:52 -0500
Subject: [PATCH 45/67] Implement dynamic float: left/right based on direction
 ltr/rtl

---
 .../ft-community-poll/ft-community-poll.css          |  4 ++--
 .../components/ft-input-tags/ft-input-tags.css       |  2 +-
 .../ft-profile-selector/ft-profile-selector.css      |  4 ++--
 .../components/playlist-info/playlist-info.scss      |  2 +-
 .../watch-video-comments/watch-video-comments.css    |  4 ++--
 src/renderer/themes.css                              | 12 ++++++++++++
 src/renderer/views/Watch/Watch.scss                  |  2 +-
 7 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/renderer/components/ft-community-poll/ft-community-poll.css b/src/renderer/components/ft-community-poll/ft-community-poll.css
index df15842c15c54..4466c81766ab3 100644
--- a/src/renderer/components/ft-community-poll/ft-community-poll.css
+++ b/src/renderer/components/ft-community-poll/ft-community-poll.css
@@ -9,7 +9,7 @@
   border-style: solid;
   border-width: 2px;
   display: block;
-  float: left;
+  float: var(--float-left-ltr-rtl-value);
   height: 10px;
   inset-inline-start: 5px;
   position: relative;
@@ -20,7 +20,7 @@
 .filled-circle {
   border-radius: 50%;
   background-color: black;
-  float: left;
+  float: var(--float-left-ltr-rtl-value);
   height: 6px;
   inset-inline-start: 2px;
   inset-block-start: 2px;
diff --git a/src/renderer/components/ft-input-tags/ft-input-tags.css b/src/renderer/components/ft-input-tags/ft-input-tags.css
index d7b552dc75088..cc167aba2face 100644
--- a/src/renderer/components/ft-input-tags/ft-input-tags.css
+++ b/src/renderer/components/ft-input-tags/ft-input-tags.css
@@ -20,7 +20,7 @@
   margin: 5px;
   border-radius: 5px;
   display:flex;
-  float: left;
+  float: var(--float-left-ltr-rtl-value);
 }
 
 .ft-tag-box li>span {
diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.css b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
index 8a0a5f443e453..489317d5a196c 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.css
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
@@ -56,7 +56,7 @@
 }
 
 .profile .colorOption {
-  float: left;
+  float: var(--float-left-ltr-rtl-value);
   position: relative;
   inset-block-end: 5px;
   margin: 10px;
@@ -76,7 +76,7 @@
 }
 
 .profileSettings {
-  float: right;
+  float: var(--float-right-ltr-rtl-value);
   position: absolute;
   inset-block-start: 10px;
   inset-inline-end: 5px;
diff --git a/src/renderer/components/playlist-info/playlist-info.scss b/src/renderer/components/playlist-info/playlist-info.scss
index 2aaec046357fc..ef4e1f6429d5b 100644
--- a/src/renderer/components/playlist-info/playlist-info.scss
+++ b/src/renderer/components/playlist-info/playlist-info.scss
@@ -45,7 +45,7 @@
 
 .channelThumbnail {
   border-radius: 200px;
-  float: left;
+  float: var(--float-left-ltr-rtl-value);
   width: 40px;
 }
 
diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.css b/src/renderer/components/watch-video-comments/watch-video-comments.css
index b3f181b9de245..0c5936b8ffc8a 100644
--- a/src/renderer/components/watch-video-comments/watch-video-comments.css
+++ b/src/renderer/components/watch-video-comments/watch-video-comments.css
@@ -27,7 +27,7 @@
 }
 
 .commentSort {
-  float: right;
+  float: var(--float-right-ltr-rtl-value);
 }
 
 .comment {
@@ -43,7 +43,7 @@
 }
 
 .commentThumbnail {
-  float: left;
+  float: var(--float-left-ltr-rtl-value);
   width: 60px;
   height: 60px;
   border-radius: 200px;
diff --git a/src/renderer/themes.css b/src/renderer/themes.css
index fc2aa2e0462e4..cbb0a3d324df9 100644
--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@@ -903,6 +903,18 @@
   --accent-color-opacity4: rgba(180,190,254,0.24);
 }
 
+body[dir='ltr'] {
+  --ltr-or-rtl: ltr;
+  --float-left-ltr-rtl-value: left;
+  --float-right-ltr-rtl-value: right;
+}
+
+body[dir='rtl'] {
+  --ltr-or-rtl: rtl;
+  --float-left-ltr-rtl-value: right;
+  --float-right-ltr-rtl-value: left;
+}
+
 body {
   margin: 0;
   min-height: 100vh;
diff --git a/src/renderer/views/Watch/Watch.scss b/src/renderer/views/Watch/Watch.scss
index f2d74a3ac99aa..e2a62f5b75304 100644
--- a/src/renderer/views/Watch/Watch.scss
+++ b/src/renderer/views/Watch/Watch.scss
@@ -74,7 +74,7 @@
         position: absolute;
 
         .premiereIcon {
-          float: left;
+          float: var(--float-left-ltr-rtl-value);
           font-size: 25px;
           margin-block: 0;
           margin-inline: 12px;

From 03542be228e5f655e968e6dee3ca65f2c2aabc37 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 28 Aug 2023 08:54:59 -0500
Subject: [PATCH 46/67] Implement dynamic navigation arrow placement based on
 direction ltr/rtl

To the fullest of my understanding, it is expected for the left navigation in rtl-supporting browsers to be for forward navigation, and the right one to be for backward navigation.
---
 src/renderer/components/top-nav/top-nav.js   | 21 ++++++++++++++------
 src/renderer/components/top-nav/top-nav.scss |  4 ++--
 src/renderer/components/top-nav/top-nav.vue  |  8 ++++----
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index 347d02ab6fc37..b021aee2c2fae 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -54,6 +54,15 @@ export default defineComponent({
       return this.$store.getters.getCurrentInvidiousInstance
     },
 
+    currentLocale: function () {
+      return this.$store.getters.getCurrentLocale
+    },
+
+    isDirectionLtr: function() {
+      const locale = this.currentLocale
+      return !(locale === 'ar' || locale === 'fa' || locale === 'he' || locale === 'ur' || locale === 'yi')
+    },
+
     backendFallback: function () {
       return this.$store.getters.getBackendFallback
     },
@@ -280,8 +289,8 @@ export default defineComponent({
     navigateHistory: function () {
       if (!this.isForwardOrBack) {
         this.historyIndex = window.history.length
-        this.$refs.historyArrowBack.classList.remove('fa-arrow-left')
-        this.$refs.historyArrowForward.classList.add('fa-arrow-right')
+        this.$refs.historyArrowBack.classList.remove('arrowBackwardDisabled')
+        this.$refs.historyArrowForward.classList.add('arrowForwardDisabled')
       } else {
         this.isForwardOrBack = false
       }
@@ -293,9 +302,9 @@ export default defineComponent({
 
       if (this.historyIndex > 1) {
         this.historyIndex--
-        this.$refs.historyArrowForward.classList.remove('fa-arrow-right')
+        this.$refs.historyArrowForward.classList.remove('arrowForwardDisabled')
         if (this.historyIndex === 1) {
-          this.$refs.historyArrowBack.classList.add('fa-arrow-left')
+          this.$refs.historyArrowBack.classList.add('arrowBackwardDisabled')
         }
       }
     },
@@ -306,10 +315,10 @@ export default defineComponent({
 
       if (this.historyIndex < window.history.length) {
         this.historyIndex++
-        this.$refs.historyArrowBack.classList.remove('fa-arrow-left')
+        this.$refs.historyArrowBack.classList.remove('arrowBackwardDisabled')
 
         if (this.historyIndex === window.history.length) {
-          this.$refs.historyArrowForward.classList.add('fa-arrow-right')
+          this.$refs.historyArrowForward.classList.add('arrowForwardDisabled')
         }
       }
     },
diff --git a/src/renderer/components/top-nav/top-nav.scss b/src/renderer/components/top-nav/top-nav.scss
index a7a72e128c3d8..7b6d6a1771f4e 100644
--- a/src/renderer/components/top-nav/top-nav.scss
+++ b/src/renderer/components/top-nav/top-nav.scss
@@ -56,8 +56,8 @@
     color: var(--text-with-main-color);
   }
 
-  &.fa-arrow-left,
-  &.fa-arrow-right {
+  &.arrowBackwardDisabled,
+  &.arrowForwardDisabled {
     color: gray;
     opacity: 0.5;
     pointer-events: none;
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index 291948ec65b7d..c56e0a1d15d43 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -15,8 +15,8 @@
       />
       <font-awesome-icon
         ref="historyArrowBack"
-        class="navBackIcon navIcon fa-arrow-left"
-        :icon="['fas', 'arrow-left']"
+        class="navIcon arrowBackwardDisabled"
+        :icon="['fas', isDirectionLtr ? 'arrow-left' : 'arrow-right']"
         role="button"
         tabindex="0"
         :title="backwardText"
@@ -25,8 +25,8 @@
       />
       <font-awesome-icon
         ref="historyArrowForward"
-        class="navForwardIcon navIcon fa-arrow-right"
-        :icon="['fas', 'arrow-right']"
+        class="navIcon arrowForwardDisabled"
+        :icon="['fas', isDirectionLtr ? 'arrow-right' : 'arrow-left']"
         role="button"
         tabindex="0"
         :title="forwardText"

From b97480fc7bb9ea5d6cbb9ba4751906e97a382fac Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 28 Aug 2023 08:55:44 -0500
Subject: [PATCH 47/67] Add direction to body based on preferred language

---
 src/renderer/App.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/renderer/App.js b/src/renderer/App.js
index 340e7b9825ece..d421172b6e859 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -504,6 +504,13 @@ export default defineComponent({
     setWindowTitle: function() {
       if (this.windowTitle !== null) {
         document.title = this.windowTitle
+        const locale = this.$store.getters.getCurrentLocale
+        document.querySelector('html').lang = locale
+        if (locale === 'ar' || locale === 'fa' || locale === 'he' || locale === 'ur' || locale === 'yi') {
+          document.querySelector('body').dir = 'rtl'
+        } else {
+          document.querySelector('body').dir = 'ltr'
+        }
       }
     },
 

From b73220ee5d2af27ae5305957ee0c4d7f2c60c5c3 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 28 Aug 2023 20:42:25 -0500
Subject: [PATCH 48/67] Implement horizontal directionality coefficient to fix
 translate working in wrong x-direction for rtl languages

---
 src/renderer/components/ft-toast/ft-toast.css |  2 +-
 .../ft-toggle-switch/ft-toggle-switch.scss    |  2 +-
 .../components/ft-tooltip/ft-tooltip.css      | 22 +++++++++----------
 src/renderer/themes.css                       |  2 ++
 4 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/renderer/components/ft-toast/ft-toast.css b/src/renderer/components/ft-toast/ft-toast.css
index e252e0c39c22a..99274cece4058 100644
--- a/src/renderer/components/ft-toast/ft-toast.css
+++ b/src/renderer/components/ft-toast/ft-toast.css
@@ -1,7 +1,7 @@
 .toast-holder {
   position: fixed;
   inset-inline-start: 50vw;
-  transform: translate(-50%, 0);
+  transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 0);
   inset-block-end: 50px;
   z-index: 1;
   display: flex;
diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
index 4af00fc0ee01d..dc4207e1675a8 100644
--- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
+++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
@@ -66,7 +66,7 @@
 
     .switch-input:checked + & {
       background-color: var(--accent-color);
-      transform: translate(80%, -50%);
+      transform: translate(calc(80% * var(--horizontal-directionality-coefficient)), -50%);
     }
 
     .switch-input:disabled + & {
diff --git a/src/renderer/components/ft-tooltip/ft-tooltip.css b/src/renderer/components/ft-tooltip/ft-tooltip.css
index 04dc8ffd109fb..7af822570323f 100644
--- a/src/renderer/components/ft-tooltip/ft-tooltip.css
+++ b/src/renderer/components/ft-tooltip/ft-tooltip.css
@@ -19,8 +19,8 @@
 .button:hover + .text.bottom-left,
 .button:focus + .text.top,
 .button:hover + .text.top {
-  -webkit-transform: translate(-50%, 0);
-  transform: translate(-50%, 0);
+  -webkit-transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 0);
+  transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 0);
 }
 
 .button:focus + .text.left,
@@ -56,8 +56,8 @@
   margin-block-start: 1em;
   inset-block-start: 100%;
   inset-inline-start: 50%;
-  -webkit-transform: translate(-50%, -1em);
-  transform: translate(-50%, -1em);
+  -webkit-transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), -1em);
+  transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), -1em);
 }
 
 .text.bottom-left {
@@ -65,31 +65,31 @@
   inset-block-start: 100%;
   inset-inline-start: -100px;
   -webkit-transform: translate(-50%, -1em);
-  transform: translate(-50%, -1em);
+  transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), -1em);
 }
 
 .text.left {
   margin-inline-end:1em;
   inset-inline-end: 100%;
   inset-block-start: 50%;
-  -webkit-transform: translate(1em, -50%);
-  transform: translate(1em, -50%);
+  -webkit-transform: translate(calc(1em * var(--horizontal-directionality-coefficient)), -50%);
+  transform: translate(calc(1em * var(--horizontal-directionality-coefficient)), -50%);
 }
 
 .text.right {
   inset-inline-start: 100%;
   margin-inline-start: 1em;
   inset-block-start: 50%;
-  -webkit-transform: translate(-1em, -50%);
-  transform: translate(-1em, -50%);
+  -webkit-transform: translate(calc(-1em * var(--horizontal-directionality-coefficient)), -50%);
+  transform: translate(calc(-1em * var(--horizontal-directionality-coefficient)), -50%);
 }
 
 .text.top {
   inset-block-end: 100%;
   inset-inline-start: 50%;
   margin-block-end: 1em;
-  -webkit-transform: translate(-50%, 1em);
-  transform: translate(-50%, 1em);
+  -webkit-transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 1em);
+  transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 1em);
 }
 
 .tooltip {
diff --git a/src/renderer/themes.css b/src/renderer/themes.css
index cbb0a3d324df9..322de3823829f 100644
--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@@ -905,12 +905,14 @@
 
 body[dir='ltr'] {
   --ltr-or-rtl: ltr;
+  --horizontal-directionality-coefficient: 1;
   --float-left-ltr-rtl-value: left;
   --float-right-ltr-rtl-value: right;
 }
 
 body[dir='rtl'] {
   --ltr-or-rtl: rtl;
+  --horizontal-directionality-coefficient: -1;
   --float-left-ltr-rtl-value: right;
   --float-right-ltr-rtl-value: left;
 }

From c20e834754bb8ecf9000a4c3190d3c06e21e2f5a Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 28 Aug 2023 17:57:09 -0500
Subject: [PATCH 49/67] Add explicit text-align: start in places to ensure rtl
 version is correctly aligned

---
 .../components/ft-settings-section/ft-settings-section.scss   | 1 +
 src/renderer/components/side-nav/side-nav.css                 | 1 +
 src/renderer/scss-partials/_ft-list-item.scss                 | 1 +
 src/renderer/themes.css                                       | 4 ++++
 4 files changed, 7 insertions(+)

diff --git a/src/renderer/components/ft-settings-section/ft-settings-section.scss b/src/renderer/components/ft-settings-section/ft-settings-section.scss
index ddc6edd444d0c..817e93225e427 100644
--- a/src/renderer/components/ft-settings-section/ft-settings-section.scss
+++ b/src/renderer/components/ft-settings-section/ft-settings-section.scss
@@ -44,6 +44,7 @@
   -webkit-user-select: none;
   user-select: none;
   margin-inline-start: 2%;
+  text-align: start;
 }
 
 :deep(.switchGrid) {
diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index 784614c774f28..5dba438bc808b 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@@ -72,6 +72,7 @@
   margin-inline-start: 40px;
   overflow: hidden;
   word-break: break-word;
+  text-align: start;
 }
 
 .navChannel .navLabel {
diff --git a/src/renderer/scss-partials/_ft-list-item.scss b/src/renderer/scss-partials/_ft-list-item.scss
index 9b338ac53a656..e7deec60e09f2 100644
--- a/src/renderer/scss-partials/_ft-list-item.scss
+++ b/src/renderer/scss-partials/_ft-list-item.scss
@@ -232,6 +232,7 @@ $watched-transition-duration: 0.5s;
       grid-area: infoLine;
       margin-block-start: 5px;
       overflow-wrap: anywhere;
+      text-align: start;
 
       @include is-sidebar-item {
         font-size: 12px;
diff --git a/src/renderer/themes.css b/src/renderer/themes.css
index 322de3823829f..1cad257028867 100644
--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@@ -925,6 +925,10 @@ body {
   --red-500: #f44336;
 }
 
+body p, body a {
+  text-align: start;
+}
+
 #app {
   color: var(--primary-text-color);
   background-color: var(--bg-color);

From b46e92bca50b6cbeffe8f6bd5a84e36056ea75ae Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 28 Aug 2023 21:06:24 -0500
Subject: [PATCH 50/67] Add text-align: start to places where it is not
 inferred to enable proper rtl text orientation

---
 .../components/ft-settings-section/ft-settings-section.scss     | 1 -
 src/renderer/components/side-nav/side-nav.css                   | 1 -
 src/renderer/themes.css                                         | 2 +-
 3 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/renderer/components/ft-settings-section/ft-settings-section.scss b/src/renderer/components/ft-settings-section/ft-settings-section.scss
index 817e93225e427..ddc6edd444d0c 100644
--- a/src/renderer/components/ft-settings-section/ft-settings-section.scss
+++ b/src/renderer/components/ft-settings-section/ft-settings-section.scss
@@ -44,7 +44,6 @@
   -webkit-user-select: none;
   user-select: none;
   margin-inline-start: 2%;
-  text-align: start;
 }
 
 :deep(.switchGrid) {
diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index 5dba438bc808b..784614c774f28 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@@ -72,7 +72,6 @@
   margin-inline-start: 40px;
   overflow: hidden;
   word-break: break-word;
-  text-align: start;
 }
 
 .navChannel .navLabel {
diff --git a/src/renderer/themes.css b/src/renderer/themes.css
index 1cad257028867..7fb7d6c27bd5d 100644
--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@@ -925,7 +925,7 @@ body {
   --red-500: #f44336;
 }
 
-body p, body a {
+body p, body a, body h2, body h3 {
   text-align: start;
 }
 

From 64e69f09c0740288de8d611a9a44a497a0e07f5b Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 28 Aug 2023 22:10:03 -0500
Subject: [PATCH 51/67] Fix search bar magnifying glass being too far right
 issue

---
 src/renderer/components/ft-input/ft-input.css | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css
index e3c1dd438a7b1..c85e8b667fa99 100644
--- a/src/renderer/components/ft-input/ft-input.css
+++ b/src/renderer/components/ft-input/ft-input.css
@@ -2,6 +2,15 @@
   position: relative;
 }
 
+ body[dir='rtl'] .ft-input-component.search.showClearTextButton .inputAction {
+  inset-inline-end: -30px;
+ }
+
+ body[dir='rtl'] .ft-input-component.search.clearTextButtonVisible .inputAction,
+ body[dir='rtl'] .ft-input-component.search.showClearTextButton:focus-within .inputAction {
+  inset-inline-end: 0;
+ }
+
 .ft-input-component.search.showClearTextButton {
   padding-inline-start: 30px;
 }

From cdcbc08a1a08d2048eafcb7f6db991665e6d4dfc Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 28 Aug 2023 23:05:11 -0500
Subject: [PATCH 52/67] Move body.dir-setting logic to setLocale to fix dir not
 setting correctly on page reload

---
 src/renderer/App.js | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/renderer/App.js b/src/renderer/App.js
index d421172b6e859..b9786f33660f5 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -504,18 +504,17 @@ export default defineComponent({
     setWindowTitle: function() {
       if (this.windowTitle !== null) {
         document.title = this.windowTitle
-        const locale = this.$store.getters.getCurrentLocale
-        document.querySelector('html').lang = locale
-        if (locale === 'ar' || locale === 'fa' || locale === 'he' || locale === 'ur' || locale === 'yi') {
-          document.querySelector('body').dir = 'rtl'
-        } else {
-          document.querySelector('body').dir = 'ltr'
-        }
       }
     },
 
     setLocale: function() {
       document.documentElement.setAttribute('lang', this.locale)
+      const locale = this.$store.getters.getCurrentLocale
+      if (locale === 'ar' || locale === 'fa' || locale === 'he' || locale === 'ur' || locale === 'yi') {
+        document.body.dir = 'rtl'
+      } else {
+        document.body.dir = 'ltr'
+      }
     },
 
     /**

From e152e4e07ee3cdfc4e6812d17774fbfed240dfb7 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 28 Aug 2023 23:08:15 -0500
Subject: [PATCH 53/67] Change .switchColumn to have align-items: start instead
 of justify-items: start

I have validated this for all settings tabs; the justify-content: start did nothing in any language, left-to-right or right-to-left. Replacing it with align-items: start aligned all menu switch items by their switches, not by their labels. This makes for a much more uniform settings section for trl languages.
---
 .../components/ft-settings-section/ft-settings-section.scss     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/ft-settings-section/ft-settings-section.scss b/src/renderer/components/ft-settings-section/ft-settings-section.scss
index ddc6edd444d0c..9fa31bcf8cf44 100644
--- a/src/renderer/components/ft-settings-section/ft-settings-section.scss
+++ b/src/renderer/components/ft-settings-section/ft-settings-section.scss
@@ -66,7 +66,7 @@
 :deep(.switchColumn) {
   display: flex;
   flex-direction: column;
-  justify-items: start;
+  align-items: start;
 }
 
 :deep(.center) {

From df5926ad6f46234f9887e5423e9c121c0f5c8818 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 28 Aug 2023 23:18:28 -0500
Subject: [PATCH 54/67] Fix emergent bug in which history icons are temporarily
 disabled on changing language to one with different directionality

Given that which icon is displayed for which history arrow is now dynamic based on the user's directionality, changing of the icon resets the font-awesome-icon state and thus re-adds the base disabled class to both arrows. This means that changing your language to one that has a different directionality was falsely setting the arrows to their disabled state (until the route is changed, after which the history icons will be fully back to normal). This commmit refactors the history icon setting logic to use class binding to two booleans in the top-nav component's data rather than adding and removing the disabled classes directly to the arrow elements' classLists, thus cleaning up the implementation and fixing the bug.
---
 src/renderer/components/top-nav/top-nav.js  | 14 ++++++++------
 src/renderer/components/top-nav/top-nav.vue | 10 ++++++----
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index b021aee2c2fae..e80be7d77c560 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -25,6 +25,8 @@ export default defineComponent({
       searchFilterValueChanged: false,
       historyIndex: 1,
       isForwardOrBack: false,
+      isArrowBackwardDisabled: true,
+      isArrowForwardDisabled: true,
       searchSuggestionsDataList: [],
       lastSuggestionQuery: ''
     }
@@ -289,8 +291,8 @@ export default defineComponent({
     navigateHistory: function () {
       if (!this.isForwardOrBack) {
         this.historyIndex = window.history.length
-        this.$refs.historyArrowBack.classList.remove('arrowBackwardDisabled')
-        this.$refs.historyArrowForward.classList.add('arrowForwardDisabled')
+        this.isArrowBackwardDisabled = false
+        this.isArrowForwardDisabled = true
       } else {
         this.isForwardOrBack = false
       }
@@ -302,9 +304,9 @@ export default defineComponent({
 
       if (this.historyIndex > 1) {
         this.historyIndex--
-        this.$refs.historyArrowForward.classList.remove('arrowForwardDisabled')
+        this.isArrowForwardDisabled = false
         if (this.historyIndex === 1) {
-          this.$refs.historyArrowBack.classList.add('arrowBackwardDisabled')
+          this.isArrowBackwardDisabled = true
         }
       }
     },
@@ -315,10 +317,10 @@ export default defineComponent({
 
       if (this.historyIndex < window.history.length) {
         this.historyIndex++
-        this.$refs.historyArrowBack.classList.remove('arrowBackwardDisabled')
+        this.isArrowBackwardDisabled = false
 
         if (this.historyIndex === window.history.length) {
-          this.$refs.historyArrowForward.classList.add('arrowForwardDisabled')
+          this.isArrowForwardDisabled = true
         }
       }
     },
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index c56e0a1d15d43..b61ec153f4b28 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -14,8 +14,9 @@
         @keydown.enter.prevent="toggleSideNav"
       />
       <font-awesome-icon
-        ref="historyArrowBack"
-        class="navIcon arrowBackwardDisabled"
+        :aria-disabled="isArrowBackwardDisabled"
+        class="navIcon"
+        :class="{ arrowBackwardDisabled: isArrowBackwardDisabled}"
         :icon="['fas', isDirectionLtr ? 'arrow-left' : 'arrow-right']"
         role="button"
         tabindex="0"
@@ -24,8 +25,9 @@
         @keydown.enter.prevent="historyBack"
       />
       <font-awesome-icon
-        ref="historyArrowForward"
-        class="navIcon arrowForwardDisabled"
+        :aria-disabled="isArrowForwardDisabled"
+        class="navIcon"
+        :class="{ arrowForwardDisabled: isArrowForwardDisabled}"
         :icon="['fas', isDirectionLtr ? 'arrow-right' : 'arrow-left']"
         role="button"
         tabindex="0"

From 2fe664aa00afc6adf9c55cd90b5ff3e6e0490a68 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 29 Aug 2023 01:56:47 -0500
Subject: [PATCH 55/67] Add Kurdish to rtl languages list & add li items to be
 right-aligned on rtl languages

---
 src/renderer/App.js                        | 2 +-
 src/renderer/components/top-nav/top-nav.js | 2 +-
 src/renderer/themes.css                    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/renderer/App.js b/src/renderer/App.js
index b9786f33660f5..d57ba871f26a8 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -510,7 +510,7 @@ export default defineComponent({
     setLocale: function() {
       document.documentElement.setAttribute('lang', this.locale)
       const locale = this.$store.getters.getCurrentLocale
-      if (locale === 'ar' || locale === 'fa' || locale === 'he' || locale === 'ur' || locale === 'yi') {
+      if (locale === 'ar' || locale === 'fa' || locale === 'he' || locale === 'ur' || locale === 'yi' || locale === 'ku') {
         document.body.dir = 'rtl'
       } else {
         document.body.dir = 'ltr'
diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index e80be7d77c560..3fc5ec366f772 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -62,7 +62,7 @@ export default defineComponent({
 
     isDirectionLtr: function() {
       const locale = this.currentLocale
-      return !(locale === 'ar' || locale === 'fa' || locale === 'he' || locale === 'ur' || locale === 'yi')
+      return !(locale === 'ar' || locale === 'fa' || locale === 'he' || locale === 'ur' || locale === 'yi' || locale === 'ku')
     },
 
     backendFallback: function () {
diff --git a/src/renderer/themes.css b/src/renderer/themes.css
index 7fb7d6c27bd5d..3ed3f0224df33 100644
--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@@ -925,7 +925,7 @@ body {
   --red-500: #f44336;
 }
 
-body p, body a, body h2, body h3 {
+body p, body a, body h2, body h3, body li {
   text-align: start;
 }
 

From 8f42005fd9e3cd113f297c797a2c9a5d581fa1b7 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 29 Aug 2023 02:07:50 -0500
Subject: [PATCH 56/67] Force FreeTube logo to be ordered left-to-right for
 'brand consistency'

---
 src/renderer/components/top-nav/top-nav.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index b61ec153f4b28..9c43e44f39951 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -56,6 +56,7 @@
       <div
         v-if="!hideHeaderLogo"
         class="logo"
+        dir="ltr"
         role="link"
         tabindex="0"
         :title="$t('Subscriptions.Subscriptions')"

From 3bc31a16cbc340c2981f7028cbec87930ecb88a0 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 29 Aug 2023 04:01:36 -0500
Subject: [PATCH 57/67] Add styling flipping font-awesome icons for rtl
 languages except for exclusion list

---
 src/renderer/themes.css | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/renderer/themes.css b/src/renderer/themes.css
index 3ed3f0224df33..7729736c2c6c1 100644
--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@@ -905,16 +905,20 @@
 
 body[dir='ltr'] {
   --ltr-or-rtl: ltr;
-  --horizontal-directionality-coefficient: 1;
   --float-left-ltr-rtl-value: left;
   --float-right-ltr-rtl-value: right;
+  --horizontal-directionality-coefficient: 1;
 }
 
 body[dir='rtl'] {
   --ltr-or-rtl: rtl;
-  --horizontal-directionality-coefficient: -1;
   --float-left-ltr-rtl-value: right;
   --float-right-ltr-rtl-value: left;
+  --horizontal-directionality-coefficient: -1;
+}
+
+body[dir='rtl'] [data-prefix="fas"]:not([data-icon="arrow-left"]):not([data-icon="arrow-right"]):not([data-icon="magnifying-glass"]):not([data-icon="circle-question"]) {
+  transform: scale(-1,1);
 }
 
 body {

From ea6405a18a30dcefac68657f06de8a975041932e Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 29 Aug 2023 04:27:42 -0500
Subject: [PATCH 58/67] Update isRightAligned with additional languages, and
 use it instead of locale value from store

Kudos to absidue for pointing out this existing function for representing this, and that it grabs directly from the i18n object. This means that FreeTube will display the proper rtl interface if one is the user's system language, where it did not before.
---
 src/renderer/App.js                         | 6 +++---
 src/renderer/components/top-nav/top-nav.js  | 7 ++++---
 src/renderer/components/top-nav/top-nav.vue | 4 ++--
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/renderer/App.js b/src/renderer/App.js
index d57ba871f26a8..e76e0e4ce3e35 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -60,7 +60,8 @@ export default defineComponent({
       return this.$store.getters.getShowProgressBar
     },
     isRightAligned: function () {
-      return this.locale === 'ar' || this.locale === 'he'
+      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,8 +510,7 @@ export default defineComponent({
 
     setLocale: function() {
       document.documentElement.setAttribute('lang', this.locale)
-      const locale = this.$store.getters.getCurrentLocale
-      if (locale === 'ar' || locale === 'fa' || locale === 'he' || locale === 'ur' || locale === 'yi' || locale === 'ku') {
+      if (this.isRightAligned) {
         document.body.dir = 'rtl'
       } else {
         document.body.dir = 'ltr'
diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index 3fc5ec366f772..5b2b805323a13 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -60,9 +60,10 @@ export default defineComponent({
       return this.$store.getters.getCurrentLocale
     },
 
-    isDirectionLtr: function() {
-      const locale = this.currentLocale
-      return !(locale === 'ar' || locale === 'fa' || locale === 'he' || locale === 'ur' || locale === 'yi' || locale === 'ku')
+    isRightAligned: function() {
+      const locale = this.$i18n.locale.replace('_', '-')
+      return locale === 'ar' || locale === 'fa' || locale === 'he' ||
+        locale === 'ur' || locale === 'yi' || locale === 'ku'
     },
 
     backendFallback: function () {
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index 9c43e44f39951..c4624839e37b6 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -17,7 +17,7 @@
         :aria-disabled="isArrowBackwardDisabled"
         class="navIcon"
         :class="{ arrowBackwardDisabled: isArrowBackwardDisabled}"
-        :icon="['fas', isDirectionLtr ? 'arrow-left' : 'arrow-right']"
+        :icon="['fas', !isRightAligned ? 'arrow-left' : 'arrow-right']"
         role="button"
         tabindex="0"
         :title="backwardText"
@@ -28,7 +28,7 @@
         :aria-disabled="isArrowForwardDisabled"
         class="navIcon"
         :class="{ arrowForwardDisabled: isArrowForwardDisabled}"
-        :icon="['fas', isDirectionLtr ? 'arrow-right' : 'arrow-left']"
+        :icon="['fas', !isRightAligned ? 'arrow-right' : 'arrow-left']"
         role="button"
         tabindex="0"
         :title="forwardText"

From 301fe300e969c7d6eda915904b52ab0835b3925a Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 29 Aug 2023 04:28:33 -0500
Subject: [PATCH 59/67] Update isRightAligned property name to more clearly
 reflect rtl purpose

---
 src/renderer/App.js                         | 4 ++--
 src/renderer/App.vue                        | 2 +-
 src/renderer/components/top-nav/top-nav.js  | 2 +-
 src/renderer/components/top-nav/top-nav.vue | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/renderer/App.js b/src/renderer/App.js
index e76e0e4ce3e35..21db0394f2e90 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -59,7 +59,7 @@ export default defineComponent({
     showProgressBar: function () {
       return this.$store.getters.getShowProgressBar
     },
-    isRightAligned: function () {
+    isLocaleRightToLeft: function () {
       return this.locale === 'ar' || this.locale === 'fa' || this.locale === 'he' ||
         this.locale === 'ur' || this.locale === 'yi' || this.locale === 'ku'
     },
@@ -510,7 +510,7 @@ export default defineComponent({
 
     setLocale: function() {
       document.documentElement.setAttribute('lang', this.locale)
-      if (this.isRightAligned) {
+      if (this.isLocaleRightToLeft) {
         document.body.dir = 'rtl'
       } else {
         document.body.dir = 'ltr'
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 84ecb7ba348ab..9bc23ae602525 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -4,7 +4,7 @@
     id="app"
     :class="{
       hideOutlines: hideOutlines,
-      rightAligned: isRightAligned
+      rightAligned: isLocaleRightToLeft
     }"
   >
     <top-nav ref="topNav" />
diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index 5b2b805323a13..beb775770c21c 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -60,7 +60,7 @@ export default defineComponent({
       return this.$store.getters.getCurrentLocale
     },
 
-    isRightAligned: function() {
+    isLocaleRightToLeft: function() {
       const locale = this.$i18n.locale.replace('_', '-')
       return locale === 'ar' || locale === 'fa' || locale === 'he' ||
         locale === 'ur' || locale === 'yi' || locale === 'ku'
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index c4624839e37b6..1e7d40f2b6dfd 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -17,7 +17,7 @@
         :aria-disabled="isArrowBackwardDisabled"
         class="navIcon"
         :class="{ arrowBackwardDisabled: isArrowBackwardDisabled}"
-        :icon="['fas', !isRightAligned ? 'arrow-left' : 'arrow-right']"
+        :icon="['fas', !isLocaleRightToLeft ? 'arrow-left' : 'arrow-right']"
         role="button"
         tabindex="0"
         :title="backwardText"
@@ -28,7 +28,7 @@
         :aria-disabled="isArrowForwardDisabled"
         class="navIcon"
         :class="{ arrowForwardDisabled: isArrowForwardDisabled}"
-        :icon="['fas', !isRightAligned ? 'arrow-right' : 'arrow-left']"
+        :icon="['fas', !isLocaleRightToLeft ? 'arrow-right' : 'arrow-left']"
         role="button"
         tabindex="0"
         :title="forwardText"

From d7626c840f467907b7cb8ccf0ac8f83771c518dc Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 29 Aug 2023 08:22:41 -0500
Subject: [PATCH 60/67] Simplify left/right arrow display logic

Leverage the icons being flipped rather than manually setting the classes to their opposites when the directionality is RTL.
---
 src/renderer/components/top-nav/top-nav.js  | 6 ------
 src/renderer/components/top-nav/top-nav.vue | 4 ++--
 src/renderer/themes.css                     | 2 +-
 3 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index beb775770c21c..7f6161391e79a 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -60,12 +60,6 @@ export default defineComponent({
       return this.$store.getters.getCurrentLocale
     },
 
-    isLocaleRightToLeft: function() {
-      const locale = this.$i18n.locale.replace('_', '-')
-      return locale === 'ar' || locale === 'fa' || locale === 'he' ||
-        locale === 'ur' || locale === 'yi' || locale === 'ku'
-    },
-
     backendFallback: function () {
       return this.$store.getters.getBackendFallback
     },
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index 1e7d40f2b6dfd..03cd544ce1ac6 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -17,7 +17,7 @@
         :aria-disabled="isArrowBackwardDisabled"
         class="navIcon"
         :class="{ arrowBackwardDisabled: isArrowBackwardDisabled}"
-        :icon="['fas', !isLocaleRightToLeft ? 'arrow-left' : 'arrow-right']"
+        :icon="['fas', 'arrow-left']"
         role="button"
         tabindex="0"
         :title="backwardText"
@@ -28,7 +28,7 @@
         :aria-disabled="isArrowForwardDisabled"
         class="navIcon"
         :class="{ arrowForwardDisabled: isArrowForwardDisabled}"
-        :icon="['fas', !isLocaleRightToLeft ? 'arrow-right' : 'arrow-left']"
+        :icon="['fas', 'arrow-right']"
         role="button"
         tabindex="0"
         :title="forwardText"
diff --git a/src/renderer/themes.css b/src/renderer/themes.css
index 7729736c2c6c1..35ad1112157cd 100644
--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@@ -917,7 +917,7 @@ body[dir='rtl'] {
   --horizontal-directionality-coefficient: -1;
 }
 
-body[dir='rtl'] [data-prefix="fas"]:not([data-icon="arrow-left"]):not([data-icon="arrow-right"]):not([data-icon="magnifying-glass"]):not([data-icon="circle-question"]) {
+body[dir='rtl'] [data-prefix="fas"]:not([data-icon="magnifying-glass"]):not([data-icon="circle-question"]) {
   transform: scale(-1,1);
 }
 

From 1f5844579efa29e55686598efb1dd1f580ac950b Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 29 Aug 2023 08:37:19 -0500
Subject: [PATCH 61/67] Replace justify-self: left & justify-self: right with
 justify-self; start and justify-self: end

---
 src/renderer/scss-partials/_ft-list-item.scss | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/renderer/scss-partials/_ft-list-item.scss b/src/renderer/scss-partials/_ft-list-item.scss
index e7deec60e09f2..3541a5267c845 100644
--- a/src/renderer/scss-partials/_ft-list-item.scss
+++ b/src/renderer/scss-partials/_ft-list-item.scss
@@ -108,7 +108,7 @@ $watched-transition-duration: 0.5s;
       align-self: flex-start;
       background-color: var(--bg-color);
       color: var(--primary-text-color);
-      justify-self: left;
+      justify-self: start;
       opacity: $thumbnail-overlay-opacity;
       padding: 2px;
       pointer-events: none;
@@ -120,7 +120,7 @@ $watched-transition-duration: 0.5s;
       border-radius: 5px;
       color: var(--primary-text-color);
       font-size: 15px;
-      justify-self: right;
+      justify-self: end;
       line-height: 1.2;
       margin-block: 0 4px;
       margin-inline: 0 4px;
@@ -142,14 +142,14 @@ $watched-transition-duration: 0.5s;
     .externalPlayerIcon {
       align-self: flex-end;
       font-size: 17px;
-      justify-self: left;
+      justify-self: start;
       margin-block-end: 4px;
       margin-inline-start: 4px;
     }
 
     .favoritesIcon {
       font-size: 17px;
-      justify-self: right;
+      justify-self: end;
       margin-inline-end: 3px;
       margin-block-start: 3px;
       height: fit-content;
@@ -167,7 +167,7 @@ $watched-transition-duration: 0.5s;
       align-self: stretch;
       display: grid;
       font-size: 20px;
-      justify-self: right;
+      justify-self: end;
       width: 60px;
 
       .background {

From 3d1cdfa3dfc41f587e5f01e198e6d3dd42d758d7 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 29 Aug 2023 14:31:37 -0500
Subject: [PATCH 62/67] Remove misguided attempt to emulate
 directionality-agnosticism with rightAligned class

---
 src/renderer/App.vue    | 2 +-
 src/renderer/themes.css | 8 --------
 2 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 9bc23ae602525..ed2ec65454021 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -4,7 +4,7 @@
     id="app"
     :class="{
       hideOutlines: hideOutlines,
-      rightAligned: isLocaleRightToLeft
+      isLocaleRightToLeft: isLocaleRightToLeft
     }"
   >
     <top-nav ref="topNav" />
diff --git a/src/renderer/themes.css b/src/renderer/themes.css
index 35ad1112157cd..e5bb3389215ed 100644
--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@@ -929,10 +929,6 @@ body {
   --red-500: #f44336;
 }
 
-body p, body a, body h2, body h3, body li {
-  text-align: start;
-}
-
 #app {
   color: var(--primary-text-color);
   background-color: var(--bg-color);
@@ -942,10 +938,6 @@ body p, body a, body h2, body h3, body li {
   outline: none;
 }
 
-.rightAligned {
-  text-align: end;
-}
-
 a:link {
     color: var(--link-color);
 }

From 812cdee51a67b30475b8d299bc1cc9b0581a4b74 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 29 Aug 2023 14:32:11 -0500
Subject: [PATCH 63/67] Explicitly center FreeTube version on About page

---
 src/renderer/views/About/About.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/renderer/views/About/About.scss b/src/renderer/views/About/About.scss
index 41592fbf7b997..a03e061095f0e 100644
--- a/src/renderer/views/About/About.scss
+++ b/src/renderer/views/About/About.scss
@@ -18,6 +18,7 @@
 }
 
 .version {
+  text-align: center;
   font-size: 2em;
 }
 

From 3149c3e4504c636b710f97407c7383d89995c7fd Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Fri, 1 Sep 2023 18:42:11 -0500
Subject: [PATCH 64/67] Fix question mark reversing logic for Arabic, Hebrew,
 Persian, and Urdu

---
 src/renderer/themes.css | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/renderer/themes.css b/src/renderer/themes.css
index 08649faf9044f..a59f26f6d9de7 100644
--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@@ -1017,14 +1017,16 @@ body[dir='rtl'] {
   --horizontal-directionality-coefficient: -1;
 }
 
-/* Arabic, Kurdish, Persian and Urdu have a reversed question mark, but not Hebrew and Yiddish */
-html[lang='he'] body[dir='rtl'] [data-prefix="fas"]:not([data-icon="magnifying-glass"]):not([data-icon="circle-question"]),
-html[lang='yi'] body[dir='rtl'] [data-prefix="fas"]:not([data-icon="magnifying-glass"]):not([data-icon="circle-question"]) {
+body[dir='rtl'] [data-prefix="fas"]:not([data-icon="magnifying-glass"]):not([data-icon="circle-question"]) {
   transform: scale(-1,1);
 }
 
-body[dir='rtl'] [data-prefix="fas"]:not([data-icon="magnifying-glass"]) {
-  transform: scale(-1,1);
+/* Arabic, Kurdish, Persian and Urdu have a reversed question mark, but not Hebrew and Yiddish */
+html[lang='ar'] [data-prefix="fas"][data-icon="circle-question"],
+html[lang='fa'] [data-prefix="fas"][data-icon="circle-question"],
+html[lang='ku'] [data-prefix="fas"][data-icon="circle-question"],
+html[lang='ur'] [data-prefix="fas"][data-icon="circle-question"] {
+  transform: scale(-1, 1)
 }
 
 body {

From 7ed599ddfc7f21c01b34a07e390ba173148f4773 Mon Sep 17 00:00:00 2001
From: Jason <84899178+jasonhenriquez@users.noreply.github.com>
Date: Tue, 5 Sep 2023 01:24:20 +0000
Subject: [PATCH 65/67] Fix minor indentation issue

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>
---
 src/renderer/components/ft-card/ft-card.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/ft-card/ft-card.css b/src/renderer/components/ft-card/ft-card.css
index 7f9c2c571f060..b9ef73f8b7f41 100644
--- a/src/renderer/components/ft-card/ft-card.css
+++ b/src/renderer/components/ft-card/ft-card.css
@@ -1,7 +1,7 @@
 .ft-card {
   background-color: var(--card-bg-color);
   margin: 8px;
-	padding-block: 3px 16px;
+  padding-block: 3px 16px;
   padding-inline: 16px;
   box-shadow: 0 1px 2px rgba(0,0,0,.1);
 }

From a97b3feeb01cfc2c647083654a874274f0c585c1 Mon Sep 17 00:00:00 2001
From: Jason <84899178+jasonhenriquez@users.noreply.github.com>
Date: Tue, 5 Sep 2023 01:24:49 +0000
Subject: [PATCH 66/67] Remove unused function

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>
---
 src/renderer/components/top-nav/top-nav.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index 7f6161391e79a..801bb2c92da6c 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -56,10 +56,6 @@ export default defineComponent({
       return this.$store.getters.getCurrentInvidiousInstance
     },
 
-    currentLocale: function () {
-      return this.$store.getters.getCurrentLocale
-    },
-
     backendFallback: function () {
       return this.$store.getters.getBackendFallback
     },

From 3cee5da315cd015de7d76b327df431e4c7387a74 Mon Sep 17 00:00:00 2001
From: Jason <84899178+jasonhenriquez@users.noreply.github.com>
Date: Thu, 7 Sep 2023 11:02:17 +0000
Subject: [PATCH 67/67] Update src/renderer/components/ft-slider/ft-slider.css

Co-authored-by: PikachuEXE <pikachuexe@gmail.com>
---
 src/renderer/components/ft-slider/ft-slider.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/renderer/components/ft-slider/ft-slider.css b/src/renderer/components/ft-slider/ft-slider.css
index ae7e957b87a92..501d1cddac0c4 100644
--- a/src/renderer/components/ft-slider/ft-slider.css
+++ b/src/renderer/components/ft-slider/ft-slider.css
@@ -164,7 +164,6 @@
 .pure-material-slider > input:disabled::-moz-range-progress {
   background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.87);
 }
-O
 .pure-material-slider > input:disabled::-moz-range-thumb {
   background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0));
   box-shadow: 0 0 0 1px rgb(var(--pure-material-surface-rgb, 255, 255, 255)) !important;