diff --git a/.stylelintrc.json b/.stylelintrc.json
index deadc16c868cb..e32dc52314fb9 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -1,5 +1,6 @@
 {
-  "plugins": ["stylelint-use-logical-spec"],
+  "plugins": ["stylelint-use-logical-spec", "@double-great/stylelint-a11y"],
+  "extends": ["stylelint-config-standard", "stylelint-config-sass-guidelines"],
   "overrides": [
     {
       "files": ["**/*.scss"],
@@ -16,6 +17,19 @@
     }
   ],
   "rules": {
+    "selector-no-qualifying-type": [
+      true, {
+      "ignore": ["attribute"]
+    }],
+    "selector-class-pattern": null,
+    "selector-id-pattern": null,
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        "ignorePseudoClasses": ["deep"]
+      }
+    ],
+    "a11y/no-outline-none": true,
     "liberty/use-logical-spec": ["always", { "except": ["float"] }]
   }
 }
diff --git a/src/renderer/App.css b/src/renderer/App.css
index 90fc87ab4938e..24b765ca8d13e 100644
--- a/src/renderer/App.css
+++ b/src/renderer/App.css
@@ -1,12 +1,12 @@
 @font-face {
   font-family: Roboto;
-  src: url(assets/font/Roboto-Regular.ttf);
+  src: url("assets/font/Roboto-Regular.ttf");
 }
 
-#app {
+.app {
   display: flex;
   flex-wrap: wrap;
-  font-family: 'Roboto', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  font-family: Roboto, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   block-size: 100%;
 }
 
@@ -30,23 +30,23 @@
 .flexBox {
   display: block;
   user-select: unset;
-  -webkit-user-select: unset;
 }
 
-#changeLogText {
+.changeLogText {
   overflow-y: scroll;
   block-size: 40vh;
-  display: block
+  display: block;
 }
 
 .fade-enter-active, .fade-leave-active {
   transition: opacity .15s;
 }
+
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
   opacity: 0;
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .routerView {
     margin-block: 68px;
     margin-inline: 8px;
@@ -58,7 +58,6 @@
   }
 
   .flexBox {
-    margin-block-start: 60px;
-    margin-block-end: -75px;
+    margin-block: 60px -75px;
   }
 }
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index cb563b887b91f..fb49f342eec88 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -2,6 +2,7 @@
   <div
     v-if="dataReady"
     id="app"
+    class="app"
     :class="{
       hideOutlines: outlinesHidden,
       isLocaleRightToLeft: isLocaleRightToLeft
@@ -52,7 +53,7 @@
       @click="showReleaseNotes = !showReleaseNotes"
     >
       <span
-        id="changeLogText"
+        class="changeLogText"
         v-html="updateChangelog"
       />
       <ft-flex-box>
diff --git a/src/renderer/components/distraction-settings/distraction-settings.css b/src/renderer/components/distraction-settings/distraction-settings.css
index d6cefc07134a0..a67117e854298 100644
--- a/src/renderer/components/distraction-settings/distraction-settings.css
+++ b/src/renderer/components/distraction-settings/distraction-settings.css
@@ -1,5 +1,5 @@
-@media only screen and (max-width: 800px) {
-  br.hide-on-mobile {
+@media only screen and (width <= 800px) {
+  .hide-on-mobile {
     display: none;
   }
 }
diff --git a/src/renderer/components/experimental-settings/experimental-settings.css b/src/renderer/components/experimental-settings/experimental-settings.css
index 3f20bf0554619..2b20e6e674d38 100644
--- a/src/renderer/components/experimental-settings/experimental-settings.css
+++ b/src/renderer/components/experimental-settings/experimental-settings.css
@@ -1,6 +1,5 @@
 .experimental-warning {
   text-align: center;
   font-weight: bold;
-  padding-inline-start: 4%;
-  padding-inline-end: 4%
+  padding-inline: 4% 4%
 }
diff --git a/src/renderer/components/ft-button/ft-button.css b/src/renderer/components/ft-button/ft-button.css
index 4642a184de499..4a0cc58edf2c5 100644
--- a/src/renderer/components/ft-button/ft-button.css
+++ b/src/renderer/components/ft-button/ft-button.css
@@ -1,5 +1,5 @@
 .btn {
-  font-family: 'Roboto', sans-serif;
+  font-family: Roboto, sans-serif;
   min-inline-size: 100px;
   font-size: 0.9rem;
   padding-block: 10px;
@@ -18,7 +18,7 @@
   font-weight: 500;
   vertical-align: middle;
   margin: 5px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
 }
 
 .btn:disabled {
@@ -32,7 +32,7 @@
   transform: translate3d(0, 0, 0);
 }
 
-.ripple:after {
+.ripple::after {
   content: "";
   display: block;
   position: absolute;
@@ -49,7 +49,7 @@
   transition: transform .5s, opacity 1s;
 }
 
-.ripple:active:after {
+.ripple:active::after {
   transform: scale(0, 0);
   opacity: .3;
   transition: 0s;
diff --git a/src/renderer/components/ft-card/ft-card.css b/src/renderer/components/ft-card/ft-card.css
index b9ef73f8b7f41..250d9a851753b 100644
--- a/src/renderer/components/ft-card/ft-card.css
+++ b/src/renderer/components/ft-card/ft-card.css
@@ -3,5 +3,5 @@
   margin: 8px;
   padding-block: 3px 16px;
   padding-inline: 16px;
-  box-shadow: 0 1px 2px rgba(0,0,0,.1);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
 }
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 701c0eb961aff..0dfb0c1148177 100644
--- a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
+++ b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
@@ -24,18 +24,17 @@
   inline-size: 50px;
   block-size: 50px;
   border-radius: 100%;
-  -webkit-border-radius: 100%;
   object-fit: cover;
 }
 
 .selected {
   position: absolute;
   inset-block-start: 10px;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgb(0 0 0 / 50%);
 }
 
 .icon {
-  color: #EEEEEE;
+  color: #EEE;
   font-size: 25px;
   position: absolute;
   inset-block-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 c35738a1bff99..3f954536a43c7 100644
--- a/src/renderer/components/ft-community-poll/ft-community-poll.css
+++ b/src/renderer/components/ft-community-poll/ft-community-poll.css
@@ -17,7 +17,7 @@
 
 .filled-circle {
   border-radius: 50%;
-  background-color: black;
+  background-color: #000;
   float: var(--float-left-ltr-rtl-value);
   block-size: 6px;
   inset-inline-start: 2px;
@@ -33,11 +33,10 @@
 .option {
   display: flex;
   align-items: center;
-  padding-block-end: 10px;
+  padding-block: 5px;
   border-radius: 5px;
   border-style: solid;
   border-width: 1px;
-  padding-block: 5px;
   padding-inline-start: 10px;
   margin-block-end: 10px;
 }
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 838cb658ba719..bb50bb5b4fb43 100644
--- a/src/renderer/components/ft-community-post/ft-community-post.scss
+++ b/src/renderer/components/ft-community-post/ft-community-post.scss
@@ -1,10 +1,11 @@
 /* stylelint-disable property-no-vendor-prefix */
-@use '../../scss-partials/_ft-list-item';
+@use '../../scss-partials/ft-list-item';
 
 .outside {
   margin: auto;
   inline-size: 40%;
-  @media screen and (max-width: 768px) {
+
+  @media screen and (width <= 768px) {
     inline-size: 100%;
   }
 }
@@ -25,7 +26,6 @@
 }
 
 .communityThumbnail {
-  -webkit-border-radius: 50%;
   border-radius: 50%;
   block-size: 55px;
   margin-inline-end: 5px;
@@ -40,6 +40,7 @@
     font-weight: bold;
     margin-block: 5px 0;
     margin-inline: 5px 6px;
+
     .authorNameLink {
       color: inherit;
       text-decoration: none;
@@ -67,7 +68,7 @@
   max-inline-size: 210px;
   text-align: start;
 
-  @media screen and (max-width: 680px) {
+  @media screen and (width <= 680px) {
     margin-inline-start: 0;
     text-align: start;
   }
@@ -79,8 +80,7 @@
   }
 
   .likeCount {
-    margin-inline-start: 5px;
-    margin-inline-end: 6px;
+    margin-inline: 5px 6px;
   }
 }
 
@@ -89,8 +89,7 @@
 
   .videoThumbnail {
     display: flex;
-    margin-block-end: auto;
-    margin-block-start: auto;
+    margin-block: auto;
     position: relative;
     inline-size: fit-content;
 
diff --git a/src/renderer/components/ft-flex-box/ft-flex-box.css b/src/renderer/components/ft-flex-box/ft-flex-box.css
index facb39fff6e40..281b6748999e1 100644
--- a/src/renderer/components/ft-flex-box/ft-flex-box.css
+++ b/src/renderer/components/ft-flex-box/ft-flex-box.css
@@ -3,5 +3,4 @@
   flex-flow: row wrap;
   justify-content: space-evenly;
   user-select: none;
-  -webkit-user-select: none;
 }
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 58f776dd6414c..c76e9333fd5b9 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.scss
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss
@@ -3,8 +3,6 @@
   flex-flow: row wrap;
   justify-content: space-evenly;
   position: relative;
-
-  -webkit-user-select: none;
   user-select: none;
 }
 
@@ -90,7 +88,6 @@
   list-style-type: none;
   position: absolute;
   text-align: center;
-  -webkit-user-select: none;
   user-select: none;
   z-index: 3;
 
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 c1a81925adc13..bdf006aff437c 100644
--- a/src/renderer/components/ft-input-tags/ft-input-tags.css
+++ b/src/renderer/components/ft-input-tags/ft-input-tags.css
@@ -8,7 +8,7 @@
 }
 
 .disabledMsg {
-  color: rgb(233, 255, 108);
+  color: rgb(233 255 108);
   padding-block-end: 10px;
 }
 
@@ -53,7 +53,7 @@
   color: var(--primary-text-color);
   opacity: 0.5;
   padding: 10px;
-  padding-inline-start: 0px;
+  padding-inline-start: 0;
 }
 
 .removeTagButton:hover {
@@ -64,7 +64,7 @@
   margin-block-start: 10px;
 }
 
-@media only screen and (max-width: 576px) {
+@media only screen and (width <= 576px) {
   .ft-input-tags-component {
     inline-size: 100%;
   }
diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css
index 4d383d327244e..e5f9a17041073 100644
--- a/src/renderer/components/ft-input/ft-input.css
+++ b/src/renderer/components/ft-input/ft-input.css
@@ -1,3 +1,4 @@
+/* stylelint-disable no-descending-specificity */
 .ft-input-component {
   position: relative;
 }
@@ -49,6 +50,7 @@
   position: absolute;
   inset-block-start: 5px;
   inset-inline-start: 0;
+
   /* To be higher than `.inputWrapper` */
   z-index: 1;
   margin-block: 0;
@@ -80,7 +82,7 @@
 }
 
 .forceTextColor .clearInputTextButton {
-  color: #EEEEEE;
+  color: #EEE;
 }
 
 .forceTextColor .clearInputTextButton:active {
@@ -89,12 +91,10 @@
 
 .ft-input {
   box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
   outline: none;
   inline-size: 100%;
   padding: 1rem;
-  border: none;
+  border: 0;
   margin-block-end: 10px;
   font-size: 16px;
   block-size: 45px;
@@ -103,26 +103,23 @@
   background-color: var(--search-bar-color);
 }
 
-.ft-input-component ::-webkit-input-placeholder {
+.ftcomponent ::placeholder {
   color: var(--tertiary-text-color);
   user-select: none;
-  -webkit-user-select: none;
 }
 
 .forceTextColor .ft-input {
-  color: #EEEEEE;
+  color: #EEE;
   background-color: var(--primary-input-color);
 }
 
 .forceTextColor .ft-input:focus {
   box-shadow: 0 0 1rem 0 var(--primary-input-color);
-  -moz-transition: box-shadow 0.2s ease-in-out;
-  -o-transition: box-shadow 0.2s ease-in-out;
   transition: box-shadow 0.2s ease-in-out;
 }
 
-.forceTextColor ::-webkit-input-placeholder {
-  color: #EEEEEE;
+.forceTextColor ::placeholder {
+  color: #EEE;
 }
 
 .inputWrapper {
@@ -138,12 +135,14 @@
   inset-inline-end: 0;
   border-radius: 100%;
   color: var(--primary-text-color);
+
   /* this should look disabled by default */
-  opacity: 50%;
+  opacity: 0.5;
 }
 
 .inputAction.enabled {
-  opacity: 100%;
+  opacity: 1;
+
   /* Only look respond to cursor when enabled */
   cursor: pointer;
 }
@@ -154,7 +153,7 @@
 }
 
 .forceTextColor .inputAction {
-  color: #EEEEEE;
+  color: #EEE;
 }
 
 .ft-input-component.showActionButton .ft-input {
diff --git a/src/renderer/components/ft-list-channel/ft-list-channel.scss b/src/renderer/components/ft-list-channel/ft-list-channel.scss
index 4fa0fe962cfaa..8f1b55dd7892d 100644
--- a/src/renderer/components/ft-list-channel/ft-list-channel.scss
+++ b/src/renderer/components/ft-list-channel/ft-list-channel.scss
@@ -1,4 +1,11 @@
-@use '../../scss-partials/_ft-list-item';
+@use '../../scss-partials/ft-list-item';
+
+.infoAndSubscribe {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  inline-size: 100%;
+}
 
 .ft-list-channel {
   &.grid {
@@ -21,9 +28,6 @@
 
   &.list {
     .infoAndSubscribe {
-      flex-flow: row wrap;
-      justify-content: center;
-
       .channelSubscribeButton {
         margin-block: auto;
         margin-inline: 7px;
@@ -32,13 +36,6 @@
   }
 }
 
-.infoAndSubscribe {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: center;
-  inline-size: 100%;
-}
-
 .handle {
   color: inherit;
   text-decoration: none;
diff --git a/src/renderer/components/ft-list-hashtag/ft-list-hashtag.scss b/src/renderer/components/ft-list-hashtag/ft-list-hashtag.scss
index c524018e4b808..b9932da1de4a5 100644
--- a/src/renderer/components/ft-list-hashtag/ft-list-hashtag.scss
+++ b/src/renderer/components/ft-list-hashtag/ft-list-hashtag.scss
@@ -1,4 +1,4 @@
-@use '../../scss-partials/_ft-list-item';
+@use '../../scss-partials/ft-list-item';
 
 .hashtagImage {
   color: var(--primary-text-color);
diff --git a/src/renderer/components/ft-list-playlist/ft-list-playlist.scss b/src/renderer/components/ft-list-playlist/ft-list-playlist.scss
index af386ff4b9119..0b80f3851c5ae 100644
--- a/src/renderer/components/ft-list-playlist/ft-list-playlist.scss
+++ b/src/renderer/components/ft-list-playlist/ft-list-playlist.scss
@@ -1 +1 @@
-@use '../../scss-partials/_ft-list-item';
+@use '../../scss-partials/ft-list-item';
diff --git a/src/renderer/components/ft-list-video/ft-list-video.scss b/src/renderer/components/ft-list-video/ft-list-video.scss
index 7512ac8a6d8ac..6a622222d5435 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.scss
+++ b/src/renderer/components/ft-list-video/ft-list-video.scss
@@ -1,4 +1,4 @@
-@use '../../scss-partials/_ft-list-item';
+@use '../../scss-partials/ft-list-item';
 
 .thumbnailLink:hover {
   outline: 3px solid var(--side-nav-hover-color);
diff --git a/src/renderer/components/ft-loader/ft-loader.css b/src/renderer/components/ft-loader/ft-loader.css
index 6dabd908c82ac..b27213cf68512 100644
--- a/src/renderer/components/ft-loader/ft-loader.css
+++ b/src/renderer/components/ft-loader/ft-loader.css
@@ -53,34 +53,20 @@
     inset-block-start: 0;
     inset-inline-start: 0;
     background-color: var(--primary-color);
-
-    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
     animation: sk-bounce 2.0s infinite ease-in-out;
 }
 
 .double-bounce2 {
-    -webkit-animation-delay: -1.0s;
     animation-delay: -1.0s;
 }
 
-@-webkit-keyframes sk-bounce {
-    0%,
-    100% {
-        -webkit-transform: scale(0.0)
-    }
-    50% {
-        -webkit-transform: scale(1.0)
-    }
-}
-
 @keyframes sk-bounce {
     0%,
     100% {
         transform: scale(0.0);
-        -webkit-transform: scale(0.0);
     }
+
     50% {
         transform: scale(1.0);
-        -webkit-transform: scale(1.0);
     }
 }
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..2f8464be3d343 100644
--- a/src/renderer/components/ft-notification-banner/ft-notification-banner.css
+++ b/src/renderer/components/ft-notification-banner/ft-notification-banner.css
@@ -1,6 +1,7 @@
 .ftNotificationBanner {
   background-color: var(--primary-color);
   color: var(--text-with-main-color);
+
   /*
   background-color: var(--accent-color);
   color: var(--text-with-accent-color);
@@ -9,13 +10,13 @@
 	padding: 16px;
   padding-block: 3px 5px;
   padding-inline: 16px;
-  box-shadow: 0 1px 2px rgba(0,0,0,.1);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
   position: relative;
   cursor: pointer;
 }
 
 .ftNotificationBanner:focus {
-  box-shadow: 20px 20px 20px rgba(0,0,0,.1);
+  box-shadow: 20px 20px 20px rgb(0 0 0 / 10%);
 }
 
 .message {
diff --git a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.css b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.css
index fa65984ce5534..1824909255479 100644
--- a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.css
+++ b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.css
@@ -23,7 +23,8 @@
   grid-template-columns: 1fr auto;
   column-gap: 16px;
 }
-@media only screen and (max-width: 800px) {
+
+@media only screen and (width <= 800px) {
   .searchInputsRow {
     /* Switch to 2 rows from 2 columns */
     grid-template-columns: auto;
@@ -37,7 +38,8 @@
   grid-template-rows: 1fr;
   align-items: center;
 }
-@media only screen and (max-width: 800px) {
+
+@media only screen and (width <= 800px) {
   .optionsRow {
     /* Switch to 2 rows from 2 columns */
     grid-template-columns: auto;
@@ -52,11 +54,10 @@
 }
 
 .playlists-container {
-  box-shadow: inset 0 0 5px rgba(0,0,0,.5);
+  box-shadow: inset 0 0 5px rgb(0 0 0 / 50%);
 
   /* Use remaining height */
   flex-grow: 1;
-
   overflow-y: scroll;
 }
 
diff --git a/src/renderer/components/ft-playlist-selector/ft-playlist-selector.scss b/src/renderer/components/ft-playlist-selector/ft-playlist-selector.scss
index f887a9962b92e..ddcce78f0b62b 100644
--- a/src/renderer/components/ft-playlist-selector/ft-playlist-selector.scss
+++ b/src/renderer/components/ft-playlist-selector/ft-playlist-selector.scss
@@ -15,11 +15,9 @@
 
     .videoCountContainer {
       position: absolute;
-
       inset-inline-end: 0;
       inset-block: 0;
       inline-size: 60px;
-
       font-size: 20px;
 
       .background,
@@ -38,7 +36,6 @@
         flex-direction: column;
         justify-content: center;
         align-items: center;
-
         color: var(--primary-text-color);
       }
     }
@@ -63,7 +60,6 @@
   &.grid {
     display: flex;
     flex-direction: column;
-
     inline-size: 245px;
     min-block-size: 230px;
     padding-block-end: 20px;
@@ -77,6 +73,7 @@
         aspect-ratio: 16/9;
       }
     }
+
     .title {
       font-size: 22px;
     }
@@ -85,9 +82,7 @@
 
 .selectedIcon {
   position: absolute;
-
   inset-block-start: calc(50% - 25px);
   inset-inline-start: calc(50% - 25px);
-
   font-size: 50px;
 }
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 024da1567200b..1dda37d0f1420 100644
--- a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
+++ b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
@@ -19,7 +19,6 @@
   margin-block: 20px 5px;
   margin-inline: auto;
   border-radius: 50%;
-  -webkit-border-radius: 50%;
 }
 
 .initial {
@@ -29,7 +28,6 @@
   padding-block: 17.5px;
   padding-inline: 0;
   user-select: none;
-  -webkit-user-select: none;
 }
 
 .profileName {
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 50867ea464314..52b828b61ad56 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
@@ -8,7 +8,7 @@ h2, .selectedCount {
   margin-inline: auto;
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;
   }
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 3636a961654de..31d54c310ff0f 100644
--- a/src/renderer/components/ft-profile-edit/ft-profile-edit.css
+++ b/src/renderer/components/ft-profile-edit/ft-profile-edit.css
@@ -45,14 +45,12 @@ h3 {
   margin: 2px;
   cursor: pointer;
   border-radius: 50%;
-  -webkit-border-radius: 50%;
 }
 
 .initial {
   font-size: 37.5px;
   text-align: center;
   user-select: none;
-  -webkit-user-select: none;
 }
 
 .colorOption:has(.initial) {
@@ -84,7 +82,7 @@ h3 {
   margin-inline: auto;
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;
   }
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 e91ac2a3c1af8..35ee6d14029ab 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
@@ -12,7 +12,7 @@ h2 {
   margin-inline: auto;
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;
   }
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 31e8405e3106b..53c3d41bf491b 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.css
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
@@ -6,7 +6,6 @@
   display: flex;
   justify-content: center;
   border-radius: 50%;
-  -webkit-border-radius: 50%;
 }
 
 .colorOption:hover {
@@ -18,7 +17,6 @@
   line-height: 1em;
   text-align: center;
   user-select: none;
-  -webkit-user-select: none;
 }
 
 .profileList {
@@ -37,6 +35,7 @@
   margin-block-start: 60px;
   block-size: auto;
   overflow-y: auto;
+
   /*
   profile list max height: 90% of window size - 100 px. It's scaled to be 340px on 800x600 resolution. 
   Offset of 100px is to compensate for the fixed size of elements above the list, which takes more screen space on lower resolutions
@@ -47,7 +46,7 @@
 
 /* Navbar changes position to horizontal with this media rule.
 Height adjust for profile list so it won't cover navbar.  */
-@media only screen and (max-width: 680px){
+@media only screen and (width <= 680px){
   .profileWrapper {
     max-block-size: calc(95vh - 180px);
   }
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 6f14df5af8311..c7ebd6f3ca871 100644
--- a/src/renderer/components/ft-progress-bar/ft-progress-bar.css
+++ b/src/renderer/components/ft-progress-bar/ft-progress-bar.css
@@ -1,8 +1,8 @@
 .progressBar {
   position: fixed;
   block-size: 3px;
-  inset-block-end: 0px;
-  inset-inline-start: 0px;
+  inset-block-end: 0;
+  inset-inline-start: 0;
   background-color: var(--primary-color);
   z-index: 1;
   transition: inline-size 0.5s;
diff --git a/src/renderer/components/ft-prompt/ft-prompt.css b/src/renderer/components/ft-prompt/ft-prompt.css
index 381fd8c4969cd..06312c5a864ac 100644
--- a/src/renderer/components/ft-prompt/ft-prompt.css
+++ b/src/renderer/components/ft-prompt/ft-prompt.css
@@ -4,7 +4,8 @@
   inset-inline-start: 0;
   inline-size: 100%;
   block-size: 100%;
-  background-color: rgba(0, 0, 0, 0.7);
+  background-color: rgb(0 0 0 / 70%);
+
   /* Higher than components like playlist info */
   z-index: 200;
   padding: 15px;
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 4efd5aeab7f1b..7a5e14ad680b8 100644
--- a/src/renderer/components/ft-radio-button/ft-radio-button.css
+++ b/src/renderer/components/ft-radio-button/ft-radio-button.css
@@ -1,3 +1,4 @@
+/* stylelint-disable no-descending-specificity */
 pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"], .pure-checkbox input[type="radio"], .pure-radiobutton input[type="radio"] {
   border: 0;
   clip: rect(0 0 0 0);
@@ -9,24 +10,22 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
   inline-size: 1px;
 }
 
-.pure-checkbox input[type="checkbox"]:focus + label:before, .pure-radiobutton input[type="checkbox"]:focus + label:before, .pure-checkbox input[type="radio"]:focus + label:before, .pure-radiobutton input[type="radio"]:focus + label:before, .pure-checkbox input[type="checkbox"]:hover + label:before, .pure-radiobutton input[type="checkbox"]:hover + label:before, .pure-checkbox input[type="radio"]:hover + label:before, .pure-radiobutton input[type="radio"]:hover + label:before {
+.pure-checkbox input[type="checkbox"]:focus + label::before, .pure-radiobutton input[type="checkbox"]:focus + label::before, .pure-checkbox input[type="radio"]:focus + label::before, .pure-radiobutton input[type="radio"]:focus + label::before, .pure-checkbox input[type="checkbox"]:hover + label::before, .pure-radiobutton input[type="checkbox"]:hover + label::before, .pure-checkbox input[type="radio"]:hover + label::before, .pure-radiobutton input[type="radio"]:hover + label::before {
   border-color: var(--primary-color);
 }
 
-.pure-checkbox input[type="checkbox"]:active + label:before, .pure-radiobutton input[type="checkbox"]:active + label:before, .pure-checkbox input[type="radio"]:active + label:before, .pure-radiobutton input[type="radio"]:active + label:before { transition-duration: 0s; }
+.pure-checkbox input[type="checkbox"]:active + label::before, .pure-radiobutton input[type="checkbox"]:active + label::before, .pure-checkbox input[type="radio"]:active + label::before, .pure-radiobutton input[type="radio"]:active + label::before { transition-duration: 0s; }
 
 .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-inline-start: 2em;
-  vertical-align: middle;
-  -webkit-user-select: none;
   user-select: none;
   cursor: pointer;
   display: block;
   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 {
+.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 {
   box-sizing: content-box;
   content: '';
   color: var(--primary-color);
@@ -41,7 +40,7 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
   transition: all 0.4s ease;
 }
 
-.pure-checkbox input[type="checkbox"] + label:after, .pure-radiobutton input[type="checkbox"] + label:after, .pure-checkbox input[type="radio"] + label:after, .pure-radiobutton input[type="radio"] + label:after {
+.pure-checkbox input[type="checkbox"] + label::after, .pure-radiobutton input[type="checkbox"] + label::after, .pure-checkbox input[type="radio"] + label::after, .pure-radiobutton input[type="radio"] + label::after {
   box-sizing: content-box;
   content: '';
   background-color: var(--primary-color);
@@ -56,13 +55,13 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
   transition: transform 200ms ease-out;
 }
 
-.pure-checkbox input[type="checkbox"]:disabled + label:before, .pure-radiobutton input[type="checkbox"]:disabled + label:before, .pure-checkbox input[type="radio"]:disabled + label:before, .pure-radiobutton input[type="radio"]:disabled + label:before { border-color: #cccccc; }
+.pure-checkbox input[type="checkbox"]:disabled + label::before, .pure-radiobutton input[type="checkbox"]:disabled + label::before, .pure-checkbox input[type="radio"]:disabled + label::before, .pure-radiobutton input[type="radio"]:disabled + label::before { border-color: #ccc; }
 
-.pure-checkbox input[type="checkbox"]:disabled:focus + label:before, .pure-radiobutton input[type="checkbox"]:disabled:focus + label:before, .pure-checkbox input[type="radio"]:disabled:focus + label:before, .pure-radiobutton input[type="radio"]:disabled:focus + label:before, .pure-checkbox input[type="checkbox"]:disabled:hover + label:before, .pure-radiobutton input[type="checkbox"]:disabled:hover + label:before, .pure-checkbox input[type="radio"]:disabled:hover + label:before, .pure-radiobutton input[type="radio"]:disabled:hover + label:before { background-color: inherit; }
+.pure-checkbox input[type="checkbox"]:disabled:focus + label::before, .pure-radiobutton input[type="checkbox"]:disabled:focus + label::before, .pure-checkbox input[type="radio"]:disabled:focus + label::before, .pure-radiobutton input[type="radio"]:disabled:focus + label::before, .pure-checkbox input[type="checkbox"]:disabled:hover + label::before, .pure-radiobutton input[type="checkbox"]:disabled:hover + label::before, .pure-checkbox input[type="radio"]:disabled:hover + label::before, .pure-radiobutton input[type="radio"]:disabled:hover + label::before { background-color: inherit; }
 
-.pure-checkbox input[type="checkbox"]:disabled:checked + label:before, .pure-radiobutton input[type="checkbox"]:disabled:checked + label:before, .pure-checkbox input[type="radio"]:disabled:checked + label:before, .pure-radiobutton input[type="radio"]:disabled:checked + label:before { background-color: #cccccc; }
+.pure-checkbox input[type="checkbox"]:disabled:checked + label::before, .pure-radiobutton input[type="checkbox"]:disabled:checked + label::before, .pure-checkbox input[type="radio"]:disabled:checked + label::before, .pure-radiobutton input[type="radio"]:disabled:checked + label::before { background-color: #ccc; }
 
-.pure-checkbox input[type="checkbox"] + label:after, .pure-radiobutton input[type="checkbox"] + label:after {
+.pure-checkbox input[type="checkbox"] + label::after, .pure-radiobutton input[type="checkbox"] + label::after {
   background-color: transparent;
   inset-block-start: 50%;
   inset-inline-start: 4px;
@@ -75,26 +74,26 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
   transform: rotate(-45deg) scale(0);
 }
 
-.pure-checkbox input[type="checkbox"]:checked + label:after, .pure-radiobutton input[type="checkbox"]:checked + label:after {
+.pure-checkbox input[type="checkbox"]:checked + label::after, .pure-radiobutton input[type="checkbox"]:checked + label::after {
   content: '';
   transform: rotate(-45deg) scale(1);
   transition: transform 200ms ease-out;
 }
 
-.pure-checkbox input[type="radio"]:checked + label:before, .pure-radiobutton input[type="radio"]:checked + label:before {
+.pure-checkbox input[type="radio"]:checked + label::before, .pure-radiobutton input[type="radio"]:checked + label::before {
   animation: borderscale 300ms ease-in;
 }
 
-.pure-checkbox input[type="radio"]:checked + label:after, .pure-radiobutton input[type="radio"]:checked + label:after { transform: scale(1); }
+.pure-checkbox input[type="radio"]:checked + label::after, .pure-radiobutton input[type="radio"]:checked + label::after { transform: scale(1); }
 
-.pure-checkbox input[type="radio"] + label:before, .pure-radiobutton input[type="radio"] + label:before, .pure-checkbox input[type="radio"] + label:after, .pure-radiobutton input[type="radio"] + label:after { border-radius: 50%; }
+.pure-checkbox input[type="radio"] + label::before, .pure-radiobutton input[type="radio"] + label::before, .pure-checkbox input[type="radio"] + label::after, .pure-radiobutton input[type="radio"] + label::after { border-radius: 50%; }
 
-.pure-checkbox input[type="checkbox"]:checked + label:before, .pure-radiobutton input[type="checkbox"]:checked + label:before {
+.pure-checkbox input[type="checkbox"]:checked + label::before, .pure-radiobutton input[type="checkbox"]:checked + label::before {
   animation: borderscale 200ms ease-in;
   background: var(--primary-color);
 }
 
-.pure-checkbox input[type="checkbox"]:checked + label:after, .pure-radiobutton input[type="checkbox"]:checked + label:after { transform: rotate(-45deg) scale(1); }
+.pure-radiobutton input[type="checkbox"]:checked + label::after { transform: rotate(-45deg) scale(1); }
 
 @keyframes
 borderscale {  50% {
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 cb31aba278150..33ba9f6448f50 100644
--- a/src/renderer/components/ft-search-filters/ft-search-filters.css
+++ b/src/renderer/components/ft-search-filters/ft-search-filters.css
@@ -1,16 +1,12 @@
 .searchFilterInner {
   max-inline-size: 800px;
-  margin-inline-start: auto;
-  margin-inline-end: auto;
-
+  margin-inline: auto;
   padding-block: 20px 70px;
   padding-inline: 20px;
   max-block-size: 410px;
   overflow-y: auto;
-
   background-color: var(--card-bg-color);
-  box-shadow: 0 1px 2px rgba(0,0,0,.1);
-
+  box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
   opacity: 0.9;
 }
 
@@ -28,7 +24,7 @@
   margin-inline: auto;
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (width <= 600px) {
   .searchRadio {
     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 58b328f537bed..d2b0a30f2bcdf 100644
--- a/src/renderer/components/ft-select/ft-select.css
+++ b/src/renderer/components/ft-select/ft-select.css
@@ -20,18 +20,13 @@
 * https://codepen.io/pavelvaravko/pen/qjojOr
 */
 
-/* select starting stylings ------------------------------*/
+/* select starting stylings ------------------------------ */
 .select {
   position: relative;
   inline-size: 200px;
   margin-block-start: 30px;
 }
 
-.disabled, .disabled + svg.iconSelect {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
 .select-text {
   position: relative;
   font-family: inherit;
@@ -42,7 +37,7 @@
   padding-inline-start: 1rem;
   font-size: 16px;
   border-radius: 5px;
-  border: none;
+  border: 0;
 }
 
 .select option {
@@ -50,7 +45,7 @@
   background-color: var(--card-bg-color);
 }
 
-/* Remove focus */
+/* stylelint-disable-next-line a11y/no-outline-none */
 .select-text:focus {
   outline: none;
 }
@@ -58,7 +53,6 @@
   /* Use custom arrow */
 .select .select-text {
   appearance: none;
-  -webkit-appearance:none;
   text-overflow: ellipsis;
   padding-inline-end: 1.5rem;
 }
@@ -67,6 +61,7 @@
   position: absolute;
   inset-block-start: 10px;
   inset-inline-end: 10px;
+
   /* Styling the down arrow */
   padding: 0;
   content: '';
@@ -76,6 +71,11 @@
   color: var(--tertiary-text-color);
 }
 
+.disabled, .disabled + .iconSelect {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
 .selectTooltip {
   position: absolute;
   inset-block-start: -22px;
@@ -108,7 +108,7 @@
   display: block;
 }
 
-.select-bar:before, .select-bar:after {
+.select-bar::before, .select-bar::after {
   content: '';
   block-size: 2px;
   inline-size: 0;
@@ -118,16 +118,16 @@
   transition: 0.2s ease all;
 }
 
-.select-bar:before {
+.select-bar::before {
   inset-inline-start: 50%;
 }
 
-.select-bar:after {
+.select-bar::after {
   inset-inline-end: 50%;
 }
 
 /* active state */
-.select-text:focus ~ .select-bar:before, .select-text:focus ~ .select-bar:after {
+.select-text:focus ~ .select-bar::before, .select-text:focus ~ .select-bar::after {
   inline-size: 50%;
 }
 
@@ -142,8 +142,8 @@
   opacity: 0.5;
 }
 
-@media only screen and (max-width: 800px) {
+@media only screen and (width <= 800px) {
   .select {
     inline-size: 100%;
   }
-}
\ No newline at end of file
+}
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 3a0fa62787292..cdf50ffd3296e 100644
--- a/src/renderer/components/ft-settings-section/ft-settings-section.scss
+++ b/src/renderer/components/ft-settings-section/ft-settings-section.scss
@@ -4,7 +4,7 @@
   margin-inline: auto;
   inline-size: 85%;
 
-  @media only screen and (max-width: 800px) {
+  @media only screen and (width <= 800px) {
     inline-size: 100%;
   }
 
@@ -20,7 +20,7 @@
   }
 
   > div:not(:last-child, .ft-flex-box) {
-    @media only screen and (max-width: 800px) {
+    @media only screen and (width <= 800px) {
       margin-block-end: 20px;
     }
   }
@@ -40,7 +40,6 @@
 }
 
 .sectionTitle {
-  -webkit-user-select: none;
   user-select: none;
   margin-inline-start: 2%;
   margin-block: 0.5em;
@@ -55,19 +54,23 @@
   margin-block: 0.5em;
 }
 
-:deep(.switchGrid) {
+%switch-grid {
   align-items: center;
   display: grid;
   grid-template-columns: auto auto;
   justify-content: space-evenly;
 
-  @media only screen and (max-width: 680px) {
+  @media only screen and (width <= 680px) {
     grid-template-columns: auto;
   }
 }
 
+:deep(.switchGrid) {
+  @extend %switch-grid;
+}
+
 :deep(.switchColumnGrid) {
-  @extend :deep(.switchGrid);
+  @extend %switch-grid;
 
   align-items: start;
 }
@@ -82,19 +85,19 @@
   text-align: center;
 }
 
-@media only screen and (max-width: 460px) {
+@media only screen and (width <= 460px) {
   :deep(.settingsFlexStart460px) {
     justify-content: flex-start;
   }
 }
 
-@media only screen and (max-width: 500px) {
+@media only screen and (width <= 500px) {
   :deep(.settingsFlexStart500px) {
     justify-content: flex-start;
   }
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .settingsSection {
     > div {
       :deep(.text.bottom) {
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 cfccc6a6bf3e1..b04bd46799524 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.scss
+++ b/src/renderer/components/ft-share-button/ft-share-button.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable no-descending-specificity */
 .shareLinks {
   display: grid;
   grid-auto-flow: column;
@@ -89,7 +90,7 @@
   }
 }
 
-@media only screen and (max-width: 450px) {
+@media only screen and (width <= 450px) {
   .shareLinks {
     grid-auto-flow: row;
     margin-inline: auto;
diff --git a/src/renderer/components/ft-slider/ft-slider.css b/src/renderer/components/ft-slider/ft-slider.css
index a71a5a90c3841..c6463d7c25650 100644
--- a/src/renderer/components/ft-slider/ft-slider.css
+++ b/src/renderer/components/ft-slider/ft-slider.css
@@ -1,11 +1,13 @@
+/* stylelint-disable no-descending-specificity */
 .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;
   inline-size: 380px;
-  color: rgba(var(--primary-text-color), 0.87);
+  color: rgb(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;
@@ -16,7 +18,7 @@
 
 /* Input */
 .pure-material-slider > input {
-  -webkit-appearance: none;
+  appearance: none;
   position: relative;
   inset-block-start: 24px;
   display: block;
@@ -41,6 +43,7 @@
 }
 
 /* Focus */
+/* stylelint-disable-next-line a11y/no-outline-none */
 .pure-material-slider > input:focus {
   outline: none;
 }
@@ -68,8 +71,7 @@
 /* Webkit | Thumb */
 .pure-material-slider > input::-webkit-slider-thumb {
   appearance: none;
-  -webkit-appearance: none;
-  border: none;
+  border: 0;
   border-radius: 50%;
   block-size: 2px;
   inline-size: 2px;
@@ -98,7 +100,7 @@
 
 /* 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: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0) 0.38);
 }
 
 .pure-material-slider > input:disabled::-webkit-slider-thumb {
@@ -111,7 +113,7 @@
 /* Moz | Track */
 .pure-material-slider > input::-moz-range-track {
   margin-block: 0;
-  margin-auto: 17px;
+  margin: 17px;
   border-radius: 1px;
   inline-size: 100%;
   block-size: 2px;
@@ -121,8 +123,7 @@
 /* Moz | Thumb */
 .pure-material-slider > input::-moz-range-thumb {
   appearance: none;
-  -moz-appearance: none;
-  border: none;
+  border: 0;
   border-radius: 50%;
   block-size: 2px;
   inline-size: 2px;
@@ -158,12 +159,13 @@
 
 /* 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: rgb(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: rgb(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;
@@ -171,7 +173,7 @@
 }
 
 .pure-material-slider > input::-moz-focus-outer {
-  border: none;
+  border: 0;
 }
 
 /* MS | Track */
@@ -179,7 +181,7 @@
   box-sizing: border-box;
   margin-block: 17px;
   margin-inline: 0;
-  border: none;
+  border: 0;
   border-radius: 1px;
   padding-block: 0;
   padding-inline: 17px;
@@ -206,7 +208,7 @@
   appearance: none;
   margin-block: 0;
   margin-inline: 17px;
-  border: none;
+  border: 0;
   border-radius: 50%;
   block-size: 2px;
   inline-size: 2px;
@@ -235,11 +237,11 @@
 
 /* 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: rgb(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);
+  background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0) 0.38);
   opacity: 0.38;
 }
 
@@ -249,7 +251,7 @@
   transform: scale(4, 4);
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .pure-material-slider {
     inline-size: 100%;
   }
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 b052038c4443a..a42c9ecee7a1d 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
@@ -3,7 +3,7 @@
   padding-block: 0;
   padding-inline: 10px;
 
-  @media only screen and (max-width: 680px) {
+  @media only screen and (width <= 680px) {
     inline-size: 100%;
   }
 
diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss
index 467ce117761f0..249281b8a6db6 100644
--- a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss
+++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss
@@ -3,9 +3,10 @@
   margin-block-end: 10px;
   border-radius: 4px;
   block-size: fit-content;
-  box-shadow: 0px 1px 2px rgb(0 0 0 / 50%);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
   display: flex;
   flex-wrap: nowrap;
+
   /* addresses odd clipping behavior when adjusting window size */
   background-color: var(--primary-color);
 }
@@ -76,7 +77,6 @@
   overflow-y: scroll;
   position: absolute;
   text-align: center;
-  -webkit-user-select: none;
   user-select: none;
   z-index: 3;
   // accounts for parent's left and right margins
@@ -112,7 +112,6 @@
       justify-content: center;
       flex-shrink: 0;
       border-radius: 50%;
-      -webkit-border-radius: 50%;
     }
 
     .initial {
@@ -120,7 +119,6 @@
       line-height: 1em;
       text-align: center;
       user-select: none;
-      -webkit-user-select: none;
     }
 
     .profileName {
diff --git a/src/renderer/components/ft-toast/ft-toast.css b/src/renderer/components/ft-toast/ft-toast.css
index 8ab713ae98f03..1a5ef01a53ff5 100644
--- a/src/renderer/components/ft-toast/ft-toast.css
+++ b/src/renderer/components/ft-toast/ft-toast.css
@@ -3,6 +3,7 @@
   inset-inline-start: 50vw;
   transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 0);
   inset-block-end: 50px;
+
   /* Higher than any prompt */
   z-index: 300;
   display: flex;
@@ -16,8 +17,8 @@
   margin: 5px;
   text-align: center;
   overflow-y: auto;
-  background-color: rgba(0, 0, 0, 0.7);
-  color: white;
+  background-color: rgb(0 0 0 / 70%);
+  color: #FFF;
   opacity: 0;
   border-radius: 20px;
   cursor: pointer;
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 5d939f8c56656..b96c676fa22ae 100644
--- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
+++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
@@ -74,7 +74,7 @@
     }
   }
 
-  @media (max-width: 680px) {
+  @media (width <= 680px) {
     max-inline-size: 250px;
   }
 }
diff --git a/src/renderer/components/ft-tooltip/ft-tooltip.css b/src/renderer/components/ft-tooltip/ft-tooltip.css
index 642a65e2ef612..9419eeed1c27c 100644
--- a/src/renderer/components/ft-tooltip/ft-tooltip.css
+++ b/src/renderer/components/ft-tooltip/ft-tooltip.css
@@ -7,30 +7,6 @@
   padding: 0;
 }
 
-.button:focus + .text,
-.button:hover + .text {
-  opacity: 1;
-  visibility: visible;
-}
-
-.button:focus + .text.bottom,
-.button:hover + .text.bottom,
-.button:hover + .text.bottom-left,
-.button:hover + .text.bottom-left,
-.button:focus + .text.top,
-.button:hover + .text.top {
-  -webkit-transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 0);
-  transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 0);
-}
-
-.button:focus + .text.left,
-.button:hover + .text.left,
-.button:focus + .text.right,
-.button:hover + .text.right {
-  -webkit-transform: translate(0, -50%);
-  transform: translate(0, -50%);
-}
-
 .text {
   background-color: color-mix(in srgb, var(--primary-text-color) 80%, transparent);
   border-radius: 20px;
@@ -56,7 +32,6 @@
   margin-block-start: 1em;
   inset-block-start: 100%;
   inset-inline-start: 50%;
-  -webkit-transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), -1em);
   transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), -1em);
 }
 
@@ -64,15 +39,13 @@
   margin-block-start: 1em;
   inset-block-start: 100%;
   inset-inline-start: -100px;
-  -webkit-transform: translate(-50%, -1em);
   transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), -1em);
 }
 
 .text.left {
-  margin-inline-end:1em;
+  margin-inline-end: 1em;
   inset-inline-end: 100%;
   inset-block-start: 50%;
-  -webkit-transform: translate(calc(1em * var(--horizontal-directionality-coefficient)), -50%);
   transform: translate(calc(1em * var(--horizontal-directionality-coefficient)), -50%);
 }
 
@@ -80,7 +53,6 @@
   inset-inline-start: 100%;
   margin-inline-start: 1em;
   inset-block-start: 50%;
-  -webkit-transform: translate(calc(-1em * var(--horizontal-directionality-coefficient)), -50%);
   transform: translate(calc(-1em * var(--horizontal-directionality-coefficient)), -50%);
 }
 
@@ -88,17 +60,37 @@
   inset-block-end: 100%;
   inset-inline-start: 50%;
   margin-block-end: 1em;
-  -webkit-transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 1em);
   transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 1em);
 }
 
+.button:focus + .text,
+.button:hover + .text {
+  opacity: 1;
+  visibility: visible;
+}
+
+.button:focus + .text.bottom,
+.button:hover + .text.bottom,
+.button:hover + .text.bottom-left,
+.button:focus + .text.top,
+.button:hover + .text.top {
+  transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 0);
+}
+
+.button:focus + .text.left,
+.button:hover + .text.left,
+.button:focus + .text.right,
+.button:hover + .text.right {
+  transform: translate(0, -50%);
+}
+
 .text.allowNewlines {
   white-space: pre-wrap;
   text-align: start;
   inline-size: 55vw;
 }
 
-@media only screen and (max-width: 1100px) {
+@media only screen and (width <= 1100px) {
   inline-size: 40vw;
 }
 
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 1eb804c1bc6f8..b098db5badf6d 100644
--- a/src/renderer/components/ft-video-player/ft-video-player.css
+++ b/src/renderer/components/ft-video-player/ft-video-player.css
@@ -30,7 +30,7 @@
 }
 /* stylelint-enable liberty/use-logical-spec */
 
-@media only screen and (max-width: 460px) {
+@media only screen and (width <= 460px) {
   :deep(.dash-selector .vjs-menu) {
     max-block-size: 14em;
   }
diff --git a/src/renderer/components/playlist-info/playlist-info.scss b/src/renderer/components/playlist-info/playlist-info.scss
index da6adcef16245..10bf1e6d749d8 100644
--- a/src/renderer/components/playlist-info/playlist-info.scss
+++ b/src/renderer/components/playlist-info/playlist-info.scss
@@ -11,7 +11,7 @@
   // Ensure placeholder image displayed at same aspect ratio as most other images
   aspect-ratio: 16/9;
 
-  @media only screen and (max-width: 800px) {
+  @media only screen and (width <= 800px) {
     display: none;
   }
 }
@@ -34,7 +34,7 @@
   overflow-y: auto;
   white-space: break-spaces;
 
-  @media only screen and (max-width: 500px) {
+  @media only screen and (width <= 500px) {
     max-block-size: 10vh;
   }
 }
@@ -77,9 +77,8 @@
   margin-block-start: 8px;
 }
 
-@media only screen and (max-width: 1250px) {
+@media only screen and (width <= 1250px) {
   :deep(.sharePlaylistIcon .iconDropdown) {
-    inset-inline-start: auto;
-    inset-inline-end: auto;
+    inset-inline: auto auto;
   }
 }
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 4945a84ecde27..1126225866802 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
@@ -29,22 +29,19 @@
   inset-block-end: 60px;
   inline-size: 70px;
   z-index: 0;
-  -webkit-box-shadow: 3px -3px 5px 0px rgba(0,0,0,0.2);
-  -moz-box-shadow: 3px -3px 5px 0px rgba(0,0,0,0.2);
-  box-shadow: 3px -3px 5px 0px rgba(0,0,0,0.2);
+  box-shadow: 3px -3px 5px 0 rgb(0 0 0 / 20%);
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .sideNavMoreOptions {
     display: block;
   }
 
   .sideNav, .closed {
-    margin-block-start: 0px;
+    margin-block-start: 0;
     block-size: 60px;
     inline-size: 100%;
-    inset-block-end: 0px;
-    inset-block-start: auto;
+    inset-block: auto 0;
     overflow-y: inherit;
   }
 
@@ -56,15 +53,15 @@
   }
 
   .navLabel {
-    margin-inline-start: 0px;
+    margin-inline-start: 0;
     inline-size: 100%;
     text-align: center;
-    inset-inline-start: 0px;
+    inset-inline-start: 0;
     font-size: 11px;
   }
 
   .navIcon {
-    margin-inline-start: 0px;
+    margin-inline-start: 0;
     inline-size: 100%;
     display: block;
     margin-block-start: 0.5em;
diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index a9a869114a770..dec21cf60961c 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@@ -13,14 +13,12 @@
   transition-duration: 150ms;
   transition-timing-function: ease-in-out;
   user-select: none;
-  -webkit-user-select: none;
 }
 
 .inner {
   block-size: 100%;
   inline-size: 200px;
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: hidden auto;
 }
 
 .closed .inner {
@@ -50,6 +48,19 @@
   display: none;
 }
 
+.navOption, .channelLink {
+  display: block;
+  color: inherit;
+  text-decoration: inherit;
+}
+
+
+.navOption .navLabel {
+  margin-inline-start: 40px;
+  overflow: hidden;
+  word-break: break-word;
+}
+
 .navOption:hover, .navChannel:hover {
   background-color: var(--side-nav-hover-color);
   color: var(--side-nav-hover-text-color);
@@ -66,12 +77,6 @@
   margin-inline-start: 10px;
 }
 
-.navOption .navLabel {
-  margin-inline-start: 40px;
-  overflow: hidden;
-  word-break: break-word;
-}
-
 .navChannel .navLabel {
   overflow: hidden;
   margin-inline-start: 40px;
@@ -84,16 +89,9 @@
   margin: 0;
   position: absolute;
   inset-block-start: 50%;
-  -ms-transform: translateY(-50%);
   transform: translateY(-50%);
 }
 
-.navOption, .channelLink {
-  display: block;
-  color: inherit;
-  text-decoration: inherit;
-}
-
 .channelThumbnail {
   border-radius: 50%;
   vertical-align: middle;
@@ -127,22 +125,23 @@
 }
 
 .closed .navIcon {
-  margin-inline-start: 0px;
+  margin-inline-start: 0;
   inline-size: 100%;
   display: block;
-  margin-block-end: 0px;
+  margin-block-end: 0;
 }
+
 .closed .navIconExpand{
   block-size:1.3em;
 }
 
 .closed .navLabel {
-  margin-inline-start: 0px;
+  margin-inline-start: 0;
   inline-size: 100%;
   text-align: center;
-  inset-inline-start: 0px;
+  inset-inline-start: 0;
   font-size: 11px;
-  margin-block-end: 0em;
+  margin-block-end: 0;
 }
 
 .closed .navChannel {
@@ -156,16 +155,13 @@
   position: static;
   display: block;
   float: none;
-  margin-block: 0;
   margin-inline: auto;
-  inset-block-start: 0px;
-  -ms-transform: none;
+  inset-block-start: 0;
   transform: none;
-  margin-block-start: 0.3em;
-  margin-block-end: 0.3em;
+  margin-block: 0.3em;
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .inner {
     display: contents; /* sunglasses emoji */
   }
@@ -178,44 +174,41 @@
     position: fixed;
     inset-inline-start: 0;
     inset-block-end: 0;
-
     display: flex;
   }
 
   .topNavOption {
-    margin-block-start: 0px;
-    padding-inline-start: 10px;
-    padding-inline-end: 10px;
+    margin-block-start: 0;
+    padding-inline: 10px;
   }
 
   .sideNav, .closed {
-    margin-block-start: 0px;
+    margin-block-start: 0;
     block-size: 60px;
     inline-size: 100%;
-    inset-block-end: 0px;
-    inset-block-start: auto;
+    inset-block: auto 0;
     overflow-y: hidden;
   }
 
   .navOption, .closed .navOption {
     inline-size: 70px;
     block-size: 40px;
-    padding: 0px;
-    padding-block-start: 10px;
-    padding-block-end: 10px;
+    padding: 0;
+    padding-block: 10px 10px;
   }
 
   .navLabel {
-    margin-inline-start: 0px;
+    margin-inline-start: 0;
     inline-size: 100%;
     text-align: center;
-    inset-inline-start: 0px;
+    inset-inline-start: 0;
     font-size: 11px;
   }
 
   .moreOption {
     display: block;
   }
+
   .closed.hiddenLabels{
     inline-size: 100%;
   }
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 43d037639526c..07025c77f31bb 100644
--- a/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css
+++ b/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css
@@ -14,13 +14,13 @@
   inset-inline-end: 10px;
 }
 
-@media only screen and (max-width: 350px) {
+@media only screen and (width <= 350px) {
   .floatingTopButton {
     position: absolute
   }
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;
   }
diff --git a/src/renderer/components/top-nav/top-nav.scss b/src/renderer/components/top-nav/top-nav.scss
index 943ffce8b3a3b..e53ece4e327e8 100644
--- a/src/renderer/components/top-nav/top-nav.scss
+++ b/src/renderer/components/top-nav/top-nav.scss
@@ -14,15 +14,14 @@
   box-shadow: 0 2px 1px 0 var(--primary-shadow-color);
   display: flex;
   block-size: 60px;
-  inset-inline-start: 0;
+  inset-inline: 0;
   line-height: 60px;
   position: sticky;
-  inset-inline-end: 0;
   inset-block-start: 0;
   inline-size: 100%;
   z-index: 4;
 
-  @media only screen and (min-width: 961px) {
+  @media only screen and (width >= 961px) {
     display: grid;
     grid-template-columns: 1fr 440px 1fr;
   }
@@ -31,13 +30,13 @@
     background-color: var(--primary-color);
   }
 
-  @media only screen and (max-width: 680px) {
+  @media only screen and (width <= 680px) {
     position: fixed;
   }
 }
 
 .menuIcon {
-  @media only screen and (max-width: 680px) {
+  @media only screen and (width <= 680px) {
     display: none;
   }
 }
@@ -58,10 +57,9 @@
 
   &.arrowBackwardDisabled,
   &.arrowForwardDisabled {
-    color: gray;
+    color: #808080;
     opacity: 0.5;
     pointer-events: none;
-    -webkit-user-select: none;
     user-select: none;
   }
 
@@ -112,13 +110,13 @@
   }
 
   .navSearchIcon {
-    @media only screen and (min-width: 681px) {
+    @media only screen and (width >= 681px) {
       display: none;
     }
   }
 
   .navNewWindowIcon {
-    @media only screen and (max-width: 680px) {
+    @media only screen and (width <= 680px) {
       display: none;
     }
   }
@@ -173,7 +171,7 @@
       inset-block-start: -3px;
       inline-size: 100px;
 
-      @media only screen and (max-width: 680px) {
+      @media only screen and (width <= 680px) {
         display: none;
       }
 
@@ -192,11 +190,10 @@
     align-items: center;
     display: flex;
 
-    @media only screen and (max-width: 680px) {
+    @media only screen and (width <= 680px) {
       background-color: var(--side-nav-color);
-      inset-inline-start: 0;
+      inset-inline: 0;
       position: fixed;
-      inset-inline-end: 0;
       inset-block-start: 60px;
 
       @include top-nav-is-colored {
@@ -210,18 +207,16 @@
   }
 
   .searchFilters {
-    inset-inline-start: 0;
+    inset-inline: 0;
     margin-block: 10px 20px;
     margin-inline: 220px 20px;
     position: absolute;
-    inset-inline-end: 0;
     transition: margin 150ms ease-in-out;
 
-    @media only screen and (max-width: 680px) {
-      inset-inline-start: 0;
+    @media only screen and (width <= 680px) {
+      inset-inline: 0;
       margin-block: 95px 0;
       margin-inline: 10px;
-      inset-inline-end: 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 d37cce5055917..f75e8e5a9cef8 100644
--- a/src/renderer/components/watch-video-chapters/watch-video-chapters.css
+++ b/src/renderer/components/watch-video-chapters/watch-video-chapters.css
@@ -3,8 +3,7 @@
 }
 
 .chaptersTitle {
-  margin-block-start: 10px;
-  margin-block-end: 0;
+  margin-block: 10px 0;
   cursor: pointer;
 }
 
@@ -35,11 +34,9 @@
 
 .chapter {
   display: grid;
-  grid-template-areas:
-    'thumbnail title'
-    'thumbnail timestamp';
-  grid-template-columns: auto 1fr;
-  grid-template-rows: min(auto, 2fr) 1fr;
+  grid-template:
+    'thumbnail title' 2fr
+    'thumbnail timestamp' 2fr / auto 1fr;
   column-gap: 10px;
   justify-items: start;
   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 a15d4999cfc71..79185b1309f4c 100644
--- a/src/renderer/components/watch-video-comments/watch-video-comments.css
+++ b/src/renderer/components/watch-video-comments/watch-video-comments.css
@@ -31,7 +31,7 @@
   float: var(--float-right-ltr-rtl-value);
 }
 
-@media only screen and (max-width: 1000px) {
+@media only screen and (width <= 1000px) {
   .commentSort {
     float: none;
   }
@@ -54,7 +54,6 @@
   inline-size: 60px;
   block-size: 60px;
   border-radius: 200px;
-  -webkit-border-radius: 200px;
 }
 
 .commentThumbnailHidden {
@@ -70,7 +69,6 @@
   color: rgb(0 0 0);
   background-color: rgb(235 160 172);
   border-radius: 50%;
-  -webkit-border-radius: 50%;
 }
 
 .commentAuthorWrapper {
@@ -104,9 +102,8 @@
 .commentPinned {
   font-weight: normal;
   font-size: 12px;
-  margin-block-start: 0;
+  margin-block: 0 5px;
   margin-inline-start: 68px;
-  margin-block-end: 5px;
 }
 
 .commentDate {
@@ -150,7 +147,6 @@
   inline-size: 15px;
   block-size: 15px;
   border-radius: 50%;
-  -webkit-border-radius: 50%;
 }
 
 .commentHeartBadgeWhite {
diff --git a/src/renderer/components/watch-video-description/watch-video-description.css b/src/renderer/components/watch-video-description/watch-video-description.css
index 721c263445f69..c7b2a437e55d8 100644
--- a/src/renderer/components/watch-video-description/watch-video-description.css
+++ b/src/renderer/components/watch-video-description/watch-video-description.css
@@ -4,7 +4,7 @@
 }
 
 .description {
-  font-family: 'Roboto', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  font-family: Roboto, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   font-size: 17px;
   white-space: pre-wrap;
   overflow-wrap: anywhere;
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 09177b58dae35..a6e3252aa2bcf 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.scss
+++ b/src/renderer/components/watch-video-info/watch-video-info.scss
@@ -58,22 +58,22 @@
     justify-content: flex-end;
     gap: 4px;
 
-    @media screen and (max-width: 680px) {
+    @media screen and (width <= 680px) {
       :deep(.iconDropdown) {
-        inset-inline-start: auto;
-        inset-inline-end: calc(50% - 20px);
+        inset-inline: auto calc(50% - 20px);
       }
     }
 
-    @media screen and (max-width: 460px) {
+    @media screen and (width <= 460px) {
       flex-wrap: nowrap;
+
       :deep(.iconDropdown) {
-        inset-inline-start: auto;
-        inset-inline-end: auto;
+        inset-inline: auto auto;
       }
     }
   }
-  @media screen and (max-width: 460px) {
+
+  @media screen and (width <= 460px) {
     flex-direction: column;
     align-items: flex-start;
     margin-block-start: 10px;
@@ -93,7 +93,7 @@
     max-inline-size: 210px;
     text-align: end;
 
-    @media screen and (max-width: 680px) {
+    @media screen and (width <= 680px) {
       margin-inline-start: 0;
       text-align: start;
     }
@@ -110,8 +110,9 @@
       gap: 3px;
     }
   }
+
   .datePublishedAndViewCount {
-    @media only screen and (max-width: 460px) {
+    @media only screen and (width <= 460px) {
       display: flex;
       justify-content: left;
       flex-direction: column;
@@ -121,6 +122,7 @@
       }
     }
   }
+
   .videoViews {
     white-space: nowrap;
   }
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 d73676000bbce..722c746329a10 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
@@ -66,13 +66,11 @@
   display: inline-block;
   padding: 1px;
   padding-inline-end: 10px;
-  margin-inline-start: 2px;
-  margin-inline-end: 2px;
+  margin-inline: 2px 2px;
   block-size: 30px;
   cursor: pointer;
   background-color: var(--primary-color);
   border-radius: 200px;
-  -webkit-border-radius: 200px;
 }
 
 .superChatContent {
@@ -81,6 +79,17 @@
   color: var(--text-with-main-color);
 }
 
+.channelThumbnail {
+  inline-size: 25px;
+  border-radius: 200px;
+}
+
+.channelName {
+  color: var(--tertiary-text-color);
+  font-weight: bold;
+  padding-inline-end: 5px;
+}
+
 .superChat .channelThumbnail {
   margin-block-start: 3px;
   margin-inline-start: 3px;
@@ -92,7 +101,7 @@
 }
 
 .openedSuperChat {
-  background-color: rgba(0, 0, 0, 0.7);
+  background-color: rgb(0 0 0 / 70%);
   inline-size: 100%;
   block-size: 415px;
   position: absolute;
@@ -103,6 +112,24 @@
   z-index: 1;
 }
 
+.superChatMessage {
+  inline-size: 90%;
+  grid-template-columns: auto;
+  margin-inline: 5% 5%;
+  margin-block: 25px 10px;
+  background-color: var(--primary-color);
+  border-radius: 5px;
+  position: relative;
+}
+
+.upperSuperChatMessage {
+  margin-block-start: -15px;
+  inline-size: 100%;
+  block-size: 55px;
+  background-color: var(--primary-color-hover);
+  border-radius: 5px 5px 0 0;
+}
+
 .openedSuperChat .superChatMessage {
   position: absolute;
 }
@@ -112,7 +139,7 @@
 }
 
 .comment .upperSuperChatMessage {
-  padding: 0px;
+  padding: 0;
 }
 
 .comment {
@@ -123,28 +150,6 @@
   gap: 5px;
 }
 
-.superChatMessage {
-  inline-size: 90%;
-  grid-template-columns: auto;
-  margin-inline-start: 5%;
-  margin-inline-end: 5%;
-  margin-block-start: 25px;
-  margin-block-end: 10px;
-  background-color: var(--primary-color);
-  border-radius: 5px;
-  -webkit-border-radius: 5px;
-  position: relative;
-}
-
-.upperSuperChatMessage {
-  margin-block-start: -15px;
-  inline-size: 100%;
-  block-size: 55px;
-  background-color: var(--primary-color-hover);
-  border-radius: 5px 5px 0px 0px;
-  -webkit-border-radius: 5px 5px 0px 0px;
-}
-
 .upperSuperChatMessage .channelThumbnail {
   inline-size: 45px;
   margin-inline-start: 10px;
@@ -164,7 +169,7 @@
   font-weight: bold;
   margin-inline-start: 65px;
   position: absolute;
-  inset-block-start: 0px;
+  inset-block-start: 0;
 }
 
 .superChatMessage .chatMessage {
@@ -177,25 +182,12 @@
   overflow-y: auto;
 }
 
-.channelThumbnail {
-  inline-size: 25px;
-  border-radius: 200px;
-  -webkit-border-radius: 200px;
-}
-
 .chatContent {
-  margin-block-start: 5px;
-  margin-block-end: 2px;
+  margin-block: 5px 2px;
   font-size: 12px;
   word-wrap: break-word;
 }
 
-.channelName {
-  color: var(--tertiary-text-color);
-  font-weight: bold;
-  padding-inline-end: 5px;
-}
-
 .member {
   color: #4CAF50;
 }
@@ -223,7 +215,6 @@
   inset-block-end: 20px;
   cursor: pointer;
   border-radius: 200px;
-  -webkit-border-radius: 200px;
   text-align: center;
   transition: background 0.2s ease-out;
 }
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 d327b87756ab1..0a632bf00c851 100644
--- a/src/renderer/components/watch-video-playlist/watch-video-playlist.css
+++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.css
@@ -23,20 +23,25 @@
 
 .playlistProgressBar {
   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;
 }
 
 .playlistProgressBar::-webkit-progress-value {
   /* Color for filled part */
+
   /* https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-value */
+
   /* background-color is required to be declared here to prevent color being green */
   background-color: var(--accent-color);
 }
 
 .playlistProgressBar::-webkit-progress-bar {
   /* Color for unfilled part */
+
   /* https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-bar */
   background-color: var(--secondary-text-color);
 }
@@ -63,6 +68,12 @@
   transition: background 0.2s ease-in;
 }
 
+.playlistIconActive {
+  color: var(--accent-color);
+  stroke-width: 10;
+  stroke: var(--accent-color);
+}
+
 .playlistIconActive:hover {
   background-color: var(--side-nav-hover-color);
   color: var(--accent-color-hover);
@@ -71,12 +82,6 @@
   transition: background 0.2s ease-in;
 }
 
-.playlistIconActive {
-  color: var(--accent-color);
-  stroke-width: 10;
-  stroke: var(--accent-color);
-}
-
 .playlistItems {
   overflow-y: auto;
   block-size: 360px;
diff --git a/src/renderer/scss-partials/_ft-list-item.scss b/src/renderer/scss-partials/_ft-list-item.scss
index 22be37765c625..c6f6a5d7af513 100644
--- a/src/renderer/scss-partials/_ft-list-item.scss
+++ b/src/renderer/scss-partials/_ft-list-item.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable no-descending-specificity */
 $thumbnail-overlay-opacity: 0.85;
 $watched-transition-duration: 0.5s;
 
@@ -86,7 +87,6 @@ $watched-transition-duration: 0.5s;
       grid-column: 1;
       grid-row: 1;
       user-select: none;
-      -webkit-user-select: none;
     }
 
     .thumbnailLink {
@@ -106,22 +106,20 @@ $watched-transition-duration: 0.5s;
     }
 
     .videoWatched {
-      align-self: flex-start;
+      place-self: flex-start start;
       background-color: var(--bg-color);
       color: var(--primary-text-color);
-      justify-self: start;
       opacity: $thumbnail-overlay-opacity;
       padding: 2px;
       pointer-events: none;
     }
 
     .videoDuration {
-      align-self: flex-end;
+      place-self: flex-end end;
       background-color: var(--card-bg-color);
       border-radius: 5px;
       color: var(--primary-text-color);
       font-size: 15px;
-      justify-self: end;
       line-height: 1.2;
       margin-block: 0 4px;
       margin-inline: 0 4px;
@@ -141,9 +139,8 @@ $watched-transition-duration: 0.5s;
     }
 
     .externalPlayerIcon {
-      align-self: flex-end;
+      place-self: flex-end start;
       font-size: 17px;
-      justify-self: start;
       margin-block-end: 4px;
       margin-inline-start: 4px;
     }
@@ -152,12 +149,12 @@ $watched-transition-duration: 0.5s;
       justify-self: end;
       margin-inline-end: 3px;
       margin-block-start: 3px;
-
       display: grid;
       grid-auto-flow: column;
       justify-content: flex-end;
       block-size: fit-content;
     }
+
     .quickBookmarkVideoIcon,
     .addToPlaylistIcon,
     .trashIcon,
@@ -167,18 +164,16 @@ $watched-transition-duration: 0.5s;
     }
 
     .watchedProgressBar {
-      align-self: flex-end;
+      place-self: flex-end stretch;
       background-color: var(--primary-color);
       block-size: 2px;
-      justify-self: stretch;
       z-index: 2;
     }
 
     .videoCountContainer {
-      align-self: stretch;
+      place-self: stretch end;
       display: grid;
       font-size: 20px;
-      justify-self: end;
       inline-size: 60px;
       pointer-events: none;
 
@@ -256,9 +251,7 @@ $watched-transition-duration: 0.5s;
         font-size: 12px;
       }
 
-      & {
-        @include low-contrast-when-watched(var(--secondary-text-color));
-      }
+      @include low-contrast-when-watched(var(--secondary-text-color));
 
       .channelName {
         @include low-contrast-when-watched(var(--secondary-text-color));
@@ -293,7 +286,7 @@ $watched-transition-duration: 0.5s;
         inline-size: 336px;
         max-inline-size: 25vw;
 
-        @media only screen and (max-width: 680px) {
+        @media only screen and (width <= 680px) {
           max-inline-size: 30vw;
         }
       }
@@ -302,7 +295,7 @@ $watched-transition-duration: 0.5s;
         max-inline-size: 25vw;
         max-block-size: 25vw;
 
-        @media only screen and (max-width: 680px) {
+        @media only screen and (width <= 680px) {
           max-inline-size: 30vw;
           max-block-size: 30vw;
         }
@@ -391,7 +384,6 @@ $watched-transition-duration: 0.5s;
 .upcoming {
   text-transform: uppercase;
   user-select: none;
-  -webkit-user-select: none;
 }
 
 // we use h3 for semantic reasons but don't want to keep the h3 style
diff --git a/src/renderer/themes.css b/src/renderer/themes.css
index 741dc631d2194..16f35ae590fa5 100644
--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@@ -7,7 +7,7 @@
 .pastelPink,
 .hotPink,
 .nordic {
-  --primary-input-color: rgba(0, 0, 0, 0.50);
+  --primary-input-color: rgb(0 0 0 / 50%);
 }
 
 .system[data-system-theme*='light'], .light,
@@ -31,7 +31,7 @@
 .catppuccinMocha,
 .pastelPink,
 .nordic {
-  --primary-input-color: rgba(0, 0, 0, 0.50);
+  --primary-input-color: rgb(0 0 0 / 50%);
   --side-nav-hover-text-color: var(--primary-text-color);
 }
 
@@ -62,36 +62,36 @@
 .catppuccinMocha,
 .hotPink,
 .nordic {
-  --primary-shadow-color: rgba(0, 0, 0, 0.75);
+  --primary-shadow-color: rgb(0 0 0 / 75%);
 }
 
 .system[data-system-theme*='light'], .light {
   --primary-text-color: #212121;
   --secondary-text-color: #424242;
   --tertiary-text-color: #757575;
-  --primary-shadow-color: rgba(232, 232, 232, 1);
+  --primary-shadow-color: rgb(232 232 232 / 100%);
   --title-color: #3f7ac6;
   --bg-color: #f1f1f1;
-  --favorite-icon-color: #00CC00;
-  --card-bg-color: #FFFFFF;
-  --secondary-card-bg-color: #eeeeee;
-  --scrollbar-color: #CCCCCC;
+  --favorite-icon-color: #0C0;
+  --card-bg-color: #FFF;
+  --secondary-card-bg-color: #eee;
+  --scrollbar-color: #CCC;
   --scrollbar-color-hover: #BDBDBD;
-  --side-nav-color: #FFFFFF;
+  --side-nav-color: #FFF;
   --side-nav-hover-color: #e0e0e0;
   --side-nav-active-color: #757575;
   --search-bar-color: #f5f5f5;
 }
 
 .system[data-system-theme*='dark'], .dark {
-  --primary-text-color: #EEEEEE;
+  --primary-text-color: #EEE;
   --secondary-text-color: #ddd;
   --tertiary-text-color: #999;
-  --title-color: #EEEEEE;
+  --title-color: #EEE;
   --bg-color: #212121;
-  --favorite-icon-color: #00FF00;
+  --favorite-icon-color: #0F0;
   --card-bg-color: #303030;
-  --secondary-card-bg-color: rgba(0, 0, 0, 0.75);
+  --secondary-card-bg-color: rgb(0 0 0 / 75%);
   --scrollbar-color: #414141;
   --scrollbar-color-hover: #757575;
   --side-nav-color: #262626;
@@ -101,14 +101,14 @@
 }
 
 .black {
-    --primary-text-color: #EEEEEE;
+    --primary-text-color: #EEE;
     --secondary-text-color: #ddd;
-    --tertiary-text-color: #EEEEEE;
-    --title-color: #EEEEEE;
-    --bg-color: #000000;
-    --favorite-icon-color: #00FF00;
-    --card-bg-color: #000000;
-    --secondary-card-bg-color: rgba(0, 0, 0, 0.75);
+    --tertiary-text-color: #EEE;
+    --title-color: #EEE;
+    --bg-color: #000;
+    --favorite-icon-color: #0F0;
+    --card-bg-color: #000;
+    --secondary-card-bg-color: rgb(0 0 0 / 75%);
     --scrollbar-color: #515151;
     --scrollbar-color-hover: #424242;
     --side-nav-color: #0f0f0f;
@@ -118,13 +118,13 @@
 }
 
 .gray {
-  --primary-text-color: #EEEEEE;
+  --primary-text-color: #EEE;
   --secondary-text-color: #E0E0E0;
   --tertiary-text-color: #F5F5F5;
-  --title-color: #EEEEEE;
+  --title-color: #EEE;
   --bg-color: #212121;
   --card-bg-color: #303030;
-  --secondary-card-bg-color: rgba(0, 0, 0, 0.75);
+  --secondary-card-bg-color: rgb(0 0 0 / 75%);
   --side-nav-color: #262626;
   --side-nav-hover-color: #212121;
   --side-nav-active-color: #303030;
@@ -137,7 +137,7 @@
   --tertiary-text-color: #e5e8f3;
   --title-color: #BD93F9;
   --bg-color: #282A36;
-  --favorite-icon-color: #00FF00;
+  --favorite-icon-color: #0F0;
   --card-bg-color: #33353F;
   --secondary-card-bg-color: #282A36;
   --scrollbar-color: #44475A;
@@ -156,7 +156,7 @@
   --tertiary-text-color: #a6adc8;
   --title-color: var(--accent-color);
   --bg-color: #1e1e2e;
-  --favorite-icon-color: #00FF00;
+  --favorite-icon-color: #0F0;
   --card-bg-color: #181825;
   --secondary-card-bg-color: #1e1e2e;
   --scrollbar-color: #313244;
@@ -173,12 +173,12 @@
   --primary-text-color: #1F002B;
   --secondary-text-color: #361836;
   --tertiary-text-color: #5A285A;
-  --primary-shadow-color: rgb(255, 240, 240, 0.5);
+  --primary-shadow-color: rgb(255 240 240 / 50%);
   --title-color: #185EB4;
   --bg-color: #ffeadd;
   --favorite-icon-color: #760278;
   --card-bg-color: #ffd1dc;
-  --secondary-card-bg-color: #FFFFFF;
+  --secondary-card-bg-color: #FFF;
   --scrollbar-color: #f5c8d3;
   --scrollbar-color-hover: #760278;
   --scrollbar-text-color-hover: var(--scrollbar-color);
@@ -195,62 +195,63 @@
   --primary-text-color: #FFFF;
   --secondary-text-color: #FFFF;
   --tertiary-text-color: #FFFF;
-  --title-color: #000000;
+  --title-color: #000;
   --bg-color: #ff008a;
-  --favorite-icon-color: #00FF00;
+  --favorite-icon-color: #0F0;
   --card-bg-color: #DE1C85;
-  --secondary-card-bg-color: rgba(0, 0, 0, 0.75);
-  --scrollbar-color: #FFFFFF;
+  --secondary-card-bg-color: rgb(0 0 0 / 75%);
+  --scrollbar-color: #FFF;
   --scrollbar-color-hover: #C0F6FF;
-  --scrollbar-text-color-hover: #000000;
+  --scrollbar-text-color-hover: #000;
   --side-nav-color: #EE1E90;
-  --side-nav-hover-color: #FFFFFF;
-  --side-nav-hover-text-color: #000000;
+  --side-nav-hover-color: #FFF;
+  --side-nav-hover-text-color: #000;
   --side-nav-active-color: #959595;
-  --side-nav-active-text-color: #000000;
+  --side-nav-active-text-color: #000;
   --search-bar-color: #9C2D5D;
   --logo-icon: url("../../_icons/iconWhiteSmall.svg");
   --logo-text: url("../../_icons/textWhiteSmall.svg");
+
   /* The hot pink theme does not have a great color contrast with
   many other colors than black and white. This means that the primary and
   secondary theme colors are forced here to be black so as to avoid any
   accessibility concerns. */
-  --primary-color: #000000 !important;
-  --primary-color-hover: #000000 !important;
-  --primary-color-active: #000000 !important;
-  --text-with-main-color: #FFFFFF !important;
-  --text-with-accent-color: #FFFFFF !important;
-  --accent-color: #000000 !important;
+  --primary-color: #000 !important;
+  --primary-color-hover: #000 !important;
+  --primary-color-active: #000 !important;
+  --text-with-main-color: #FFF !important;
+  --text-with-accent-color: #FFF !important;
+  --accent-color: #000 !important;
   --accent-color-hover: #808080 !important;
   --accent-color-active: #6A739A !important;
-  --accent-color-light: #000000 !important;
-  --accent-color-visited: #000000 !important;
-  --accent-color-opacity1: rgba(0,0,0,0.04) !important;
-  --accent-color-opacity2: rgba(0,0,0,0.12) !important;
-  --accent-color-opacity3: rgba(255,255,255,0.16) !important;
-  --accent-color-opacity4: rgba(255,255,255,0.24) !important;
+  --accent-color-light: #000 !important;
+  --accent-color-visited: #000 !important;
+  --accent-color-opacity1: rgb(0 0 0 / 4%) !important;
+  --accent-color-opacity2: rgb(0 0 0 / 12%) !important;
+  --accent-color-opacity3: rgb(255 255 255 / 16%) !important;
+  --accent-color-opacity4: rgb(255 255 255 / 24%) !important;
 }
 
 /* Given that the Hot Pink theme does not need link underlining due to meeting
 WCAG 2 Level AA (https://webaim.org/resources/linkcontrastchecker/?fcolor=FFFFFF&bcolor=DE1C85&lcolor=000000),
 it can be safely elided. This looks quite pleasant on this theme. */
-.hotPink a:not(:hover), .hotPink a.navOption:hover, .hotPink *:not(:hover) {
+.hotPink a:not(:hover, :focus), .hotPink .navOption:hover, .hotPink .navOption:focus, .hotPink *:not(:hover, :focus) {
   text-decoration: none;
 }
 
-.hotPink a:hover {
+.hotPink a:hover, .hotPink a:focus {
   text-decoration: underline;
 }
 
 .nordic {
-  --primary-text-color: #EEEEEE;
+  --primary-text-color: #EEE;
   --secondary-text-color: #ddd;
-  --tertiary-text-color: #EEEEEE;
-  --title-color: #EEEEEE;
+  --tertiary-text-color: #EEE;
+  --title-color: #EEE;
   --bg-color: #2b2f3a;
-  --favorite-icon-color: #00FF00;
+  --favorite-icon-color: #0F0;
   --card-bg-color: #2e3440;
-  --secondary-card-bg-color: rgba(59, 66, 82, 0.75);
+  --secondary-card-bg-color: rgb(59 66 82 / 75%);
   --scrollbar-color: #4b566a;
   --scrollbar-color-hover: #4b566a;
   --side-nav-color: #2e3440;
@@ -271,7 +272,7 @@ it can be safely elided. This looks quite pleasant on this theme. */
 .mainCyan,
 .mainTeal,
 .mainGreen {
-  --text-with-main-color: #FFFFFF;
+  --text-with-main-color: #FFF;
   --logo-icon-bar-color: url("../../_icons/iconWhiteSmall.svg");
   --logo-text-bar-color: url("../../_icons/textWhiteSmall.svg");
 }
@@ -282,7 +283,7 @@ it can be safely elided. This looks quite pleasant on this theme. */
 .mainAmber,
 .mainOrange,
 .mainDeepOrange {
-  --text-with-main-color: #000000;
+  --text-with-main-color: #000;
   --logo-icon-bar-color: url("../../_icons/iconBlackSmall.svg");
   --logo-text-bar-color: url("../../_icons/textBlackSmall.svg");
 }
@@ -431,8 +432,8 @@ it can be safely elided. This looks quite pleasant on this theme. */
 }
 
 .mainDraculaRed {
-  --primary-color: #FF5555;
-  --primary-color-hover: #FF6666;
+  --primary-color: #F55;
+  --primary-color-hover: #F66;
   --primary-color-active: #E64D4D;
 }
 
@@ -555,7 +556,7 @@ it can be safely elided. This looks quite pleasant on this theme. */
 .secCyan,
 .secTeal,
 .secGreen {
-  --text-with-accent-color: #FFFFFF;
+  --text-with-accent-color: #FFF;
 }
 
 .secLightGreen,
@@ -564,7 +565,7 @@ it can be safely elided. This looks quite pleasant on this theme. */
 .secAmber,
 .secOrange,
 .secDeepOrange {
-  --text-with-accent-color: #000000;
+  --text-with-accent-color: #000;
 }
 
 .secRed {
@@ -573,10 +574,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #c62828;
   --accent-color-light: #ef9a9a;
   --accent-color-visited: #b71c1c;
-  --accent-color-opacity1: rgba(244,67,54,0.04);
-  --accent-color-opacity2: rgba(244,67,54,0.12);
-  --accent-color-opacity3: rgba(244,67,54,0.16);
-  --accent-color-opacity4: rgba(244,67,54,0.24);
+  --accent-color-opacity1: rgb(244 67 54 / 4%);
+  --accent-color-opacity2: rgb(244 67 54 / 12%);
+  --accent-color-opacity3: rgb(244 67 54 / 16%);
+  --accent-color-opacity4: rgb(244 67 54 / 24%);
 }
 
 .secPink {
@@ -585,10 +586,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #AD1457;
   --accent-color-light: #F48FB1;
   --accent-color-visited: #880E4F;
-  --accent-color-opacity1: rgba(233,30,99,0.04);
-  --accent-color-opacity2: rgba(233,30,99,0.12);
-  --accent-color-opacity3: rgba(233,30,99,0.16);
-  --accent-color-opacity4: rgba(233,30,99,0.24);
+  --accent-color-opacity1: rgb(233 30 99 / 4%);
+  --accent-color-opacity2: rgb(233 30 99 / 12%);
+  --accent-color-opacity3: rgb(233 30 99 / 16%);
+  --accent-color-opacity4: rgb(233 30 99 / 24%);
 }
 
 .secPurple {
@@ -597,10 +598,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #6A1B9A;
   --accent-color-light: #CE93D8;
   --accent-color-visited: #4A148C;
-  --accent-color-opacity1: rgba(156,39,176,0.04);
-  --accent-color-opacity2: rgba(156,39,176,0.12);
-  --accent-color-opacity3: rgba(156,39,176,0.16);
-  --accent-color-opacity4: rgba(156,39,176,0.24);
+  --accent-color-opacity1: rgb(156 39 176 / 4%);
+  --accent-color-opacity2: rgb(156 39 176 / 12%);
+  --accent-color-opacity3: rgb(156 39 176 / 16%);
+  --accent-color-opacity4: rgb(156 39 176 / 24%);
 }
 
 .secDeepPurple {
@@ -609,10 +610,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #4527A0;
   --accent-color-light: #B39DDB;
   --accent-color-visited: #311B92;
-  --accent-color-opacity1: rgba(103,58,183,0.04);
-  --accent-color-opacity2: rgba(103,58,183,0.12);
-  --accent-color-opacity3: rgba(103,58,183,0.16);
-  --accent-color-opacity4: rgba(103,58,183,0.24);
+  --accent-color-opacity1: rgb(103 58 183 / 4%);
+  --accent-color-opacity2: rgb(103 58 183 / 12%);
+  --accent-color-opacity3: rgb(103 58 183 / 16%);
+  --accent-color-opacity4: rgb(103 58 183 / 24%);
 }
 
 .secIndigo {
@@ -621,10 +622,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #283593;
   --accent-color-light: #9FA8DA;
   --accent-color-visited: #1A237E;
-  --accent-color-opacity1: rgba(63,81,181,0.04);
-  --accent-color-opacity2: rgba(63,81,181,0.12);
-  --accent-color-opacity3: rgba(63,81,181,0.16);
-  --accent-color-opacity4: rgba(63,81,181,0.24);
+  --accent-color-opacity1: rgb(63 81 181 / 4%);
+  --accent-color-opacity2: rgb(63 81 181 / 12%);
+  --accent-color-opacity3: rgb(63 81 181 / 16%);
+  --accent-color-opacity4: rgb(63 81 181 / 24%);
 }
 
 .secBlue {
@@ -633,10 +634,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #1565C0;
   --accent-color-light: #90CAF9;
   --accent-color-visited: #0D47A1;
-  --accent-color-opacity1: rgba(33,150,243,0.04);
-  --accent-color-opacity2: rgba(33,150,243,0.12);
-  --accent-color-opacity3: rgba(33,150,243,0.16);
-  --accent-color-opacity4: rgba(33,150,243,0.24);
+  --accent-color-opacity1: rgb(33 150 243 / 4%);
+  --accent-color-opacity2: rgb(33 150 243 / 12%);
+  --accent-color-opacity3: rgb(33 150 243 / 16%);
+  --accent-color-opacity4: rgb(33 150 243 / 24%);
 }
 
 .secLightBlue {
@@ -645,10 +646,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #0277BD;
   --accent-color-light: #81D4FA;
   --accent-color-visited: #01579B;
-  --accent-color-opacity1: rgba(3,169,244,0.04);
-  --accent-color-opacity2: rgba(3,169,244,0.12);
-  --accent-color-opacity3: rgba(3,169,244,0.16);
-  --accent-color-opacity4: rgba(3,169,244,0.24);
+  --accent-color-opacity1: rgb(3 169 244 / 4%);
+  --accent-color-opacity2: rgb(3 169 244 / 12%);
+  --accent-color-opacity3: rgb(3 169 244 / 16%);
+  --accent-color-opacity4: rgb(3 169 244 / 24%);
 }
 
 .secCyan {
@@ -657,10 +658,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #00838F;
   --accent-color-light: #80DEEA;
   --accent-color-visited: #006064;
-  --accent-color-opacity1: rgba(0,188,212,0.04);
-  --accent-color-opacity2: rgba(0,188,212,0.12);
-  --accent-color-opacity3: rgba(0,188,212,0.16);
-  --accent-color-opacity4: rgba(0,188,212,0.24);
+  --accent-color-opacity1: rgb(0 188 212 / 4%);
+  --accent-color-opacity2: rgb(0 188 212 / 12%);
+  --accent-color-opacity3: rgb(0 188 212 / 16%);
+  --accent-color-opacity4: rgb(0 188 212 / 24%);
 }
 
 .secTeal {
@@ -669,10 +670,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #00695C;
   --accent-color-light: #80CBC4;
   --accent-color-visited: #004D40;
-  --accent-color-opacity1: rgba(0,150,136,0.04);
-  --accent-color-opacity2: rgba(0,150,136,0.12);
-  --accent-color-opacity3: rgba(0,150,136,0.16);
-  --accent-color-opacity4: rgba(0,150,136,0.24);
+  --accent-color-opacity1: rgb(0 150 136 / 4%);
+  --accent-color-opacity2: rgb(0 150 136 / 12%);
+  --accent-color-opacity3: rgb(0 150 136 / 16%);
+  --accent-color-opacity4: rgb(0 150 136 / 24%);
 }
 
 .secGreen {
@@ -681,10 +682,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #2E7D32;
   --accent-color-light: #A5D6A7;
   --accent-color-visited: #1B5E20;
-  --accent-color-opacity1: rgba(76,175,80,0.04);
-  --accent-color-opacity2: rgba(76,175,80,0.12);
-  --accent-color-opacity3: rgba(76,175,80,0.16);
-  --accent-color-opacity4: rgba(76,175,80,0.24);
+  --accent-color-opacity1: rgb(76 175 80 / 4%);
+  --accent-color-opacity2: rgb(76 175 80 / 12%);
+  --accent-color-opacity3: rgb(76 175 80 / 16%);
+  --accent-color-opacity4: rgb(76 175 80 / 24%);
 }
 
 .secLightGreen {
@@ -693,10 +694,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #558B2F;
   --accent-color-light: #C5E1A5;
   --accent-color-visited: #33691E;
-  --accent-color-opacity1: rgba(139,195,74,0.04);
-  --accent-color-opacity2: rgba(139,195,74,0.12);
-  --accent-color-opacity3: rgba(139,195,74,0.16);
-  --accent-color-opacity4: rgba(139,195,74,0.24);
+  --accent-color-opacity1: rgb(139 195 74 / 4%);
+  --accent-color-opacity2: rgb(139 195 74 / 12%);
+  --accent-color-opacity3: rgb(139 195 74 / 16%);
+  --accent-color-opacity4: rgb(139 195 74 / 24%);
 }
 
 .secLime {
@@ -705,10 +706,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #9E9D24;
   --accent-color-light: #E6EE9C;
   --accent-color-visited: #827717;
-  --accent-color-opacity1: rgba(205,220,57,0.04);
-  --accent-color-opacity2: rgba(205,220,57,0.12);
-  --accent-color-opacity3: rgba(205,220,57,0.16);
-  --accent-color-opacity4: rgba(205,220,57,0.24);
+  --accent-color-opacity1: rgb(205 220 57 / 4%);
+  --accent-color-opacity2: rgb(205 220 57 / 12%);
+  --accent-color-opacity3: rgb(205 220 57 / 16%);
+  --accent-color-opacity4: rgb(205 220 57 / 24%);
 }
 
 .secYellow {
@@ -717,10 +718,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #F9A825;
   --accent-color-light: #FFF59D;
   --accent-color-visited: #F57F17;
-  --accent-color-opacity1: rgba(255,235,59,0.04);
-  --accent-color-opacity2: rgba(255,235,59,0.12);
-  --accent-color-opacity3: rgba(255,235,59,0.16);
-  --accent-color-opacity4: rgba(255,235,59,0.24);
+  --accent-color-opacity1: rgb(255 235 59 / 4%);
+  --accent-color-opacity2: rgb(255 235 59 / 12%);
+  --accent-color-opacity3: rgb(255 235 59 / 16%);
+  --accent-color-opacity4: rgb(255 235 59 / 24%);
 }
 
 .secAmber {
@@ -729,10 +730,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #FF8F00;
   --accent-color-light: #FFE082;
   --accent-color-visited: #FF6F00;
-  --accent-color-opacity1: rgba(255,193,7,0.04);
-  --accent-color-opacity2: rgba(255,193,7,0.12);
-  --accent-color-opacity3: rgba(255,193,7,0.16);
-  --accent-color-opacity4: rgba(255,193,7,0.24);
+  --accent-color-opacity1: rgb(255 193 7 / 4%);
+  --accent-color-opacity2: rgb(255 193 7 / 12%);
+  --accent-color-opacity3: rgb(255 193 7 / 16%);
+  --accent-color-opacity4: rgb(255 193 7 / 24%);
 }
 
 .secOrange {
@@ -741,10 +742,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #EF6C00;
   --accent-color-light: #FFCC80;
   --accent-color-visited: #E65100;
-  --accent-color-opacity1: rgba(255,152,0,0.04);
-  --accent-color-opacity2: rgba(255,152,0,0.12);
-  --accent-color-opacity3: rgba(255,152,0,0.16);
-  --accent-color-opacity4: rgba(255,152,0,0.24);
+  --accent-color-opacity1: rgb(255 152 0 / 4%);
+  --accent-color-opacity2: rgb(255 152 0 / 12%);
+  --accent-color-opacity3: rgb(255 152 0 / 16%);
+  --accent-color-opacity4: rgb(255 152 0 / 24%);
 }
 
 .secDeepOrange {
@@ -753,10 +754,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #D84315;
   --accent-color-light: #FFAB91;
   --accent-color-visited: #BF360C;
-  --accent-color-opacity1: rgba(255,87,34,0.04);
-  --accent-color-opacity2: rgba(255,87,34,0.12);
-  --accent-color-opacity3: rgba(255,87,34,0.16);
-  --accent-color-opacity4: rgba(255,87,34,0.24);
+  --accent-color-opacity1: rgb(255 87 34 / 4%);
+  --accent-color-opacity2: rgb(255 87 34 / 12%);
+  --accent-color-opacity3: rgb(255 87 34 / 16%);
+  --accent-color-opacity4: rgb(255 87 34 / 24%);
 }
 
 .secDraculaCyan,
@@ -779,10 +780,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
 .secDraculaPurple,
 .secDraculaRed,
 .secDraculaYellow {
-  --accent-color-opacity1: rgba(98, 114, 164, 0.04);
-  --accent-color-opacity2: rgba(98, 114, 164, 0.12);
-  --accent-color-opacity3: rgba(98, 114, 164, 0.16);
-  --accent-color-opacity4: rgba(98, 114, 164, 0.24);
+  --accent-color-opacity1: rgb(98 114 164 / 4%);
+  --accent-color-opacity2: rgb(98 114 164 / 12%);
+  --accent-color-opacity3: rgb(98 114 164 / 16%);
+  --accent-color-opacity4: rgb(98 114 164 / 24%);
 }
 
 .secDraculaCyan {
@@ -827,11 +828,11 @@ it can be safely elided. This looks quite pleasant on this theme. */
 }
 
 .secDraculaRed {
-  --accent-color: #FF5555;
-  --accent-color-hover: #FF6666;
+  --accent-color: #F55;
+  --accent-color-hover: #F66;
   --accent-color-active: #E64D4D;
-  --accent-color-light: #FF7777;
-  --accent-color-visited: #CC4444;
+  --accent-color-light: #F77;
+  --accent-color-visited: #C44;
 }
 
 .secDraculaYellow {
@@ -865,10 +866,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #e1c8c3;
   --accent-color-light: #F8EAE7;
   --accent-color-visited: #D3A197;
-  --accent-color-opacity1: rgba(245,224,220,0.04);
-  --accent-color-opacity2: rgba(245,224,220,0.12);
-  --accent-color-opacity3: rgba(245,224,220,0.16);
-  --accent-color-opacity4: rgba(245,224,220,0.24);
+  --accent-color-opacity1: rgb(245 224 220 / 4%);
+  --accent-color-opacity2: rgb(245 224 220 / 12%);
+  --accent-color-opacity3: rgb(245 224 220 / 16%);
+  --accent-color-opacity4: rgb(245 224 220 / 24%);
 }
 
 .secCatppuccinMochaFlamingo {
@@ -877,10 +878,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #ddb7b7;
   --accent-color-light: #F7DFDF;
   --accent-color-visited: #cf9898;
-  --accent-color-opacity1: rgba(242,205,205,0.04);
-  --accent-color-opacity2: rgba(242,205,205,0.12);
-  --accent-color-opacity3: rgba(242,205,205,0.16);
-  --accent-color-opacity4: rgba(242,205,205,0.24);
+  --accent-color-opacity1: rgb(242 205 205 / 4%);
+  --accent-color-opacity2: rgb(242 205 205 / 12%);
+  --accent-color-opacity3: rgb(242 205 205 / 16%);
+  --accent-color-opacity4: rgb(242 205 205 / 24%);
 }
 
 .secCatppuccinMochaPink {
@@ -889,10 +890,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #dca3cd;
   --accent-color-light: #f4dbed;
   --accent-color-visited: #d28fc0;
-  --accent-color-opacity1: rgba(245,194,231,0.04);
-  --accent-color-opacity2: rgba(245,194,231,0.12);
-  --accent-color-opacity3: rgba(245,194,231,0.16);
-  --accent-color-opacity4: rgba(245,194,231,0.24);
+  --accent-color-opacity1: rgb(245 194 231 / 4%);
+  --accent-color-opacity2: rgb(245 194 231 / 12%);
+  --accent-color-opacity3: rgb(245 194 231 / 16%);
+  --accent-color-opacity4: rgb(245 194 231 / 24%);
 }
 
 .secCatppuccinMochaMauve {
@@ -901,10 +902,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #b38fdf;
   --accent-color-light: #D6B9F9;
   --accent-color-visited: #A171DA;
-  --accent-color-opacity1: rgba(203,166,247,0.04);
-  --accent-color-opacity2: rgba(203,166,247,0.12);
-  --accent-color-opacity3: rgba(203,166,247,0.16);
-  --accent-color-opacity4: rgba(203,166,247,0.24);
+  --accent-color-opacity1: rgb(203 166 247 / 4%);
+  --accent-color-opacity2: rgb(203 166 247 / 12%);
+  --accent-color-opacity3: rgb(203 166 247 / 16%);
+  --accent-color-opacity4: rgb(203 166 247 / 24%);
 }
 
 .secCatppuccinMochaRed {
@@ -913,10 +914,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #de7693;
   --accent-color-light: #F5A3BA;
   --accent-color-visited: #D56C89;
-  --accent-color-opacity1: rgba(243,139,168,0.04);
-  --accent-color-opacity2: rgba(243,139,168,0.12);
-  --accent-color-opacity3: rgba(243,139,168,0.16);
-  --accent-color-opacity4: rgba(243,139,168,0.24);
+  --accent-color-opacity1: rgb(243 139 168 / 4%);
+  --accent-color-opacity2: rgb(243 139 168 / 12%);
+  --accent-color-opacity3: rgb(243 139 168 / 16%);
+  --accent-color-opacity4: rgb(243 139 168 / 24%);
 }
 
 .secCatppuccinMochaMaroon {
@@ -925,10 +926,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #d68895;
   --accent-color-light: #F0B7C0;
   --accent-color-visited: #C86A79;
-  --accent-color-opacity1: rgba(235,160,172,0.04);
-  --accent-color-opacity2: rgba(235,160,172,0.12);
-  --accent-color-opacity3: rgba(235,160,172,0.16);
-  --accent-color-opacity4: rgba(235,160,172,0.24);
+  --accent-color-opacity1: rgb(235 160 172 / 4%);
+  --accent-color-opacity2: rgb(235 160 172 / 12%);
+  --accent-color-opacity3: rgb(235 160 172 / 16%);
+  --accent-color-opacity4: rgb(235 160 172 / 24%);
 }
 
 .secCatppuccinMochaPeach {
@@ -937,10 +938,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #e1996d;
   --accent-color-light: #FBC4A2;
   --accent-color-visited: #D78A5B;
-  --accent-color-opacity1: rgba(250,179,135,0.04);
-  --accent-color-opacity2: rgba(250,179,135,0.12);
-  --accent-color-opacity3: rgba(250,179,135,0.16);
-  --accent-color-opacity4: rgba(250,179,135,0.24);
+  --accent-color-opacity1: rgb(250 179 135 / 4%);
+  --accent-color-opacity2: rgb(250 179 135 / 12%);
+  --accent-color-opacity3: rgb(250 179 135 / 16%);
+  --accent-color-opacity4: rgb(250 179 135 / 24%);
 }
 
 .secCatppuccinMochaYellow {
@@ -949,10 +950,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #dec48d;
   --accent-color-light: #FBECCB;
   --accent-color-visited: #D5B05D;
-  --accent-color-opacity1: rgba(249,226,175,0.04);
-  --accent-color-opacity2: rgba(249,226,175,0.12);
-  --accent-color-opacity3: rgba(249,226,175,0.16);
-  --accent-color-opacity4: rgba(249,226,175,0.24);
+  --accent-color-opacity1: rgb(249 226 175 / 4%);
+  --accent-color-opacity2: rgb(249 226 175 / 12%);
+  --accent-color-opacity3: rgb(249 226 175 / 16%);
+  --accent-color-opacity4: rgb(249 226 175 / 24%);
 }
 
 .secCatppuccinMochaGreen {
@@ -961,10 +962,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #86c780;
   --accent-color-light: #BCEAB8;
   --accent-color-visited: #6ED166;
-  --accent-color-opacity1: rgba(166,227,161,0.04);
-  --accent-color-opacity2: rgba(166,227,161,0.12);
-  --accent-color-opacity3: rgba(166,227,161,0.16);
-  --accent-color-opacity4: rgba(166,227,161,0.24);
+  --accent-color-opacity1: rgb(166 227 161 / 4%);
+  --accent-color-opacity2: rgb(166 227 161 / 12%);
+  --accent-color-opacity3: rgb(166 227 161 / 16%);
+  --accent-color-opacity4: rgb(166 227 161 / 24%);
 }
 
 .secCatppuccinMochaTeal {
@@ -973,10 +974,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #6fc5b7;
   --accent-color-light: #AFE9DF;
   --accent-color-visited: #5CCCB9;
-  --accent-color-opacity1: rgba(148,226,213,0.04);
-  --accent-color-opacity2: rgba(148,226,213,0.12);
-  --accent-color-opacity3: rgba(148,226,213,0.16);
-  --accent-color-opacity4: rgba(148,226,213,0.24);
+  --accent-color-opacity1: rgb(148 226 213 / 4%);
+  --accent-color-opacity2: rgb(148 226 213 / 12%);
+  --accent-color-opacity3: rgb(148 226 213 / 16%);
+  --accent-color-opacity4: rgb(148 226 213 / 24%);
 }
 
 .secCatppuccinMochaSky {
@@ -985,10 +986,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #68bcca;
   --accent-color-light: #9FE3EF;
   --accent-color-visited: #64C2D3;
-  --accent-color-opacity1: rgba(137,220,235,0.04);
-  --accent-color-opacity2: rgba(137,220,235,0.12);
-  --accent-color-opacity3: rgba(137,220,235,0.16);
-  --accent-color-opacity4: rgba(137,220,235,0.24);
+  --accent-color-opacity1: rgb(137 220 235 / 4%);
+  --accent-color-opacity2: rgb(137 220 235 / 12%);
+  --accent-color-opacity3: rgb(137 220 235 / 16%);
+  --accent-color-opacity4: rgb(137 220 235 / 24%);
 }
 
 .secCatppuccinMochaSapphire {
@@ -997,10 +998,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #59a9cf;
   --accent-color-light: #93D4F0;
   --accent-color-visited: #6AB6D7;
-  --accent-color-opacity1: rgba(116,199,236,0.04);
-  --accent-color-opacity2: rgba(116,199,236,0.12);
-  --accent-color-opacity3: rgba(116,199,236,0.16);
-  --accent-color-opacity4: rgba(116,199,236,0.24);
+  --accent-color-opacity1: rgb(116 199 236 / 4%);
+  --accent-color-opacity2: rgb(116 199 236 / 12%);
+  --accent-color-opacity3: rgb(116 199 236 / 16%);
+  --accent-color-opacity4: rgb(116 199 236 / 24%);
 }
 
 .secCatppuccinMochaBlue {
@@ -1009,10 +1010,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #6593df;
   --accent-color-light: #A7C7FB;
   --accent-color-visited: #739CDD;
-  --accent-color-opacity1: rgba(137,220,235,0.04);
-  --accent-color-opacity2: rgba(137,220,235,0.12);
-  --accent-color-opacity3: rgba(137,220,235,0.16);
-  --accent-color-opacity4: rgba(137,220,235,0.24);
+  --accent-color-opacity1: rgb(137 220 235 / 4%);
+  --accent-color-opacity2: rgb(137 220 235 / 12%);
+  --accent-color-opacity3: rgb(137 220 235 / 16%);
+  --accent-color-opacity4: rgb(137 220 235 / 24%);
 }
 
 .secCatppuccinMochaLavender {
@@ -1021,10 +1022,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-active: #8d98e4;
   --accent-color-light: #D2D8FE;
   --accent-color-visited: #96A1E9;
-  --accent-color-opacity1: rgba(180,190,254,0.04);
-  --accent-color-opacity2: rgba(180,190,254,0.12);
-  --accent-color-opacity3: rgba(180,190,254,0.16);
-  --accent-color-opacity4: rgba(180,190,254,0.24);
+  --accent-color-opacity1: rgb(180 190 254 / 4%);
+  --accent-color-opacity2: rgb(180 190 254 / 12%);
+  --accent-color-opacity3: rgb(180 190 254 / 16%);
+  --accent-color-opacity4: rgb(180 190 254 / 24%);
 }
 
 body[dir='ltr'] {
@@ -1041,7 +1042,7 @@ body[dir='rtl'] {
   --horizontal-directionality-coefficient: -1;
 }
 
-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"], [data-icon="circle-question"]) {
   transform: scale(-1,1);
 }
 
@@ -1058,26 +1059,37 @@ body {
   min-block-size: 100vh;
   color: var(--primary-text-color);
   background-color: var(--bg-color);
+
   --red-500: #f44336;
 }
 
-#app {
+.app {
   color: var(--primary-text-color);
   background-color: var(--bg-color);
 }
 
+/* stylelint-disable-next-line a11y/no-outline-none */
 .hideOutlines *:focus {
   outline: none;
 }
 
+/* stylelint-disable-next-line no-descending-specificity */
 a:link {
     color: var(--link-color);
 }
 
+/* stylelint-disable-next-line no-descending-specificity */
 a:visited {
     color: var(--link-visited-color);
 }
 
+@media (prefers-reduced-motion) {
+  * {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
 ::-webkit-scrollbar {
 	inline-size: 6px;
   block-size: 6px;
@@ -1088,6 +1100,6 @@ a:visited {
   border-radius: 6px;
 }
 
-::-webkit-scrollbar-thumb:hover {
+::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:focus {
   background: var(--scrollbar-color-hover);
 }
diff --git a/src/renderer/videoJS.css b/src/renderer/videoJS.css
index 813bb40c3302c..bbf783cab856d 100644
--- a/src/renderer/videoJS.css
+++ b/src/renderer/videoJS.css
@@ -620,7 +620,7 @@ body.vjs-full-window {
 
 .video-js button {
   background: none;
-  border: none;
+  border: 0;
   color: inherit;
   display: inline-block;
   font-size: inherit;
@@ -1090,10 +1090,7 @@ body.vjs-full-window {
   cursor: pointer;
   padding: 0;
   margin: 0 0.45em 0 0.45em;
-
-  -webkit-user-select: none;
   user-select: none;
-
   background-color: #73859f;
   background-color: rgba(115, 133, 159, 0.5);
 }
@@ -1736,7 +1733,7 @@ video::-webkit-media-text-track-display {
 .vjs-text-track-settings fieldset {
   margin: 5px;
   padding: 3px;
-  border: none;
+  border: 0;
 }
 
 .vjs-text-track-settings fieldset span {
@@ -1799,7 +1796,7 @@ video::-webkit-media-text-track-display {
   left: 0;
   width: 100%;
   height: 100%;
-  border: none;
+  border: 0;
   z-index: -1000;
 }
 
@@ -2028,7 +2025,7 @@ video::-webkit-media-text-track-display {
     width: 2em;
     height: 2em;
     line-height: 2em;
-    border: none;
+    border: 0;
     border-radius: 50%;
     font-size: 3.5em;
     background-color: rgba(0,0,0,.45);
diff --git a/src/renderer/views/About/About.scss b/src/renderer/views/About/About.scss
index 0272d7628b06f..49e07f65bc886 100644
--- a/src/renderer/views/About/About.scss
+++ b/src/renderer/views/About/About.scss
@@ -3,7 +3,7 @@
   margin-inline: auto;
   inline-size: 85%;
 
-  @media only screen and (max-width: 680px) {
+  @media only screen and (width <= 680px) {
     inline-size: 90%;
   }
 }
@@ -30,7 +30,7 @@
   margin-inline: auto;
   max-inline-size: 860px;
 
-  @media only screen and (max-width: 650px) {
+  @media only screen and (width <= 650px) {
     grid-template-columns: 1fr;
   }
 }
diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css
index a1324d2bb8237..8fb4900f78a7b 100644
--- a/src/renderer/views/Channel/Channel.css
+++ b/src/renderer/views/Channel/Channel.css
@@ -20,7 +20,7 @@
 }
 
 .channelBannerContainer.default {
-  background-color: black;
+  background-color: #000;
   background-image: url("../../assets/img/defaultBanner.png");
   background-repeat: repeat;
   background-size: contain;
@@ -49,7 +49,6 @@
   inline-size: 100px;
   block-size: 100px;
   border-radius: 200px;
-  -webkit-border-radius: 200px;
   object-fit: cover;
 }
 
@@ -81,6 +80,8 @@
 }
 
 .channelSearch {
+  margin-block-start: 10px;
+  max-inline-size: 250px;
   inline-size: 220px;
   margin-inline-start: auto;
   align-self: flex-end;
@@ -134,11 +135,6 @@
   box-sizing: border-box;
 }
 
-.channelSearch {
-  margin-block-start: 10px;
-  max-inline-size: 250px;
-}
-
 .elementListLoading {
   margin-block-start: 200px;
 }
@@ -174,8 +170,6 @@
 }
 
 .communityThumbnail {
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -webkit-border-radius: 200px;
   border-radius: 200px;
   block-size: 12%;
   inline-size: 12%;
@@ -183,16 +177,14 @@
 
 .ft-community-image {
   display: block;
-  margin-inline-start: auto;
-  margin-inline-end: auto;
+  margin-inline: auto;
 }
 
 .community-post-container {
-  padding-inline-start: 30%;
-  padding-inline-end: 30%;
+  padding-inline: 30%;
 }
 
-@media only screen and (max-width: 800px) {
+@media only screen and (width <= 800px) {
   .channelInfoTabs {
     block-size: auto;
     flex-flow: column-reverse;
@@ -212,20 +204,22 @@
     flex: 1 1 0%;
   }
 
-  #communityPanel {
+  .communityPanel {
     margin-block-start: 1rem;
   }
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .channelInfo {
     flex-direction: column;
     margin-block: 20px 10px;
   }
+
   .card {
     max-inline-size: none;
     inline-size: 100%;
   }
+
   .channelInfoActionsContainer {
     flex-direction: row-reverse;
     justify-content: left;
@@ -234,7 +228,7 @@
   }
 }
 
-@media only screen and (max-width: 400px) {
+@media only screen and (width <= 400px) {
   .channelInfo {
     justify-content: center;
     gap: 10px;
@@ -260,7 +254,7 @@
   }
 }
 
-@media only screen and (max-width: 260px) {
+@media only screen and (width <= 260px) {
    .channelDetails {
     max-inline-size: none;
   }
diff --git a/src/renderer/views/Channel/Channel.vue b/src/renderer/views/Channel/Channel.vue
index edc267be1fd47..aed6e7f9694cd 100644
--- a/src/renderer/views/Channel/Channel.vue
+++ b/src/renderer/views/Channel/Channel.vue
@@ -368,6 +368,7 @@
         <ft-element-list
           v-if="!hideChannelCommunity && currentTab === 'community'"
           id="communityPanel"
+          class="communityPanel"
           :data="latestCommunityPosts"
           :use-channels-hidden-preference="false"
           role="tabpanel"
diff --git a/src/renderer/views/Hashtag/Hashtag.css b/src/renderer/views/Hashtag/Hashtag.css
index 8dd30434746de..a2d9314e834cc 100644
--- a/src/renderer/views/Hashtag/Hashtag.css
+++ b/src/renderer/views/Hashtag/Hashtag.css
@@ -19,7 +19,7 @@
   inline-size: 85%;
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;
   }
diff --git a/src/renderer/views/History/History.css b/src/renderer/views/History/History.css
index 8885b1123ddfb..a902565bb94b5 100644
--- a/src/renderer/views/History/History.css
+++ b/src/renderer/views/History/History.css
@@ -8,7 +8,7 @@
   color: var(--tertiary-text-color);
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;
   }
diff --git a/src/renderer/views/Playlist/Playlist.scss b/src/renderer/views/Playlist/Playlist.scss
index f4e8f09c94efa..1bf2cc61366a0 100644
--- a/src/renderer/views/Playlist/Playlist.scss
+++ b/src/renderer/views/Playlist/Playlist.scss
@@ -10,7 +10,9 @@
   padding: 10px;
   position: sticky;
   inset-block-start: 96px;
+
   /* This is needed to make prompt always above video entries */
+
   /* Value being too high would block search suggestions */
   z-index: 1;
   inline-size: 30%;
@@ -44,7 +46,7 @@
 
   // Hide action buttons during transitions
   //
-  // The class for icon container is mainly styled in `_ft-list-item.scss`
+  // The class for icon container is mainly styled in `ft-list-item.scss`
   // But the transition related classes are all on container elements
   // So `:deep` is used
   :deep(.ft-list-item .videoThumbnail .playlistIcons) {
@@ -56,6 +58,7 @@
     pointer-events: none;
   }
 }
+
 .playlistItem-enter, .playlistItem-leave-to {
   opacity: 0;
   transform: translate(calc(10% * var(--horizontal-directionality-coefficient)));
@@ -67,18 +70,15 @@
 }
 
 .sortSelect {
-  /* Put it on the right */
-  margin-inline-start: auto;
-  /* Align with 'More Options' dropdown button */
-  margin-inline-end: 20px;
+  /* Put it on the right and align with 'More Options' dropdown button */
+  margin-inline: auto 20px;
 }
 
 :deep(.videoThumbnail) {
-  margin-block-start: auto;
-  margin-block-end: auto;
+  margin-block: auto;
 }
 
-@media only screen and (max-width: 850px) {
+@media only screen and (width <= 850px) {
   .routerView {
     flex-direction: column;
   }
diff --git a/src/renderer/views/Popular/Popular.css b/src/renderer/views/Popular/Popular.css
index 8625c77b4f8df..05f87ad79961a 100644
--- a/src/renderer/views/Popular/Popular.css
+++ b/src/renderer/views/Popular/Popular.css
@@ -10,13 +10,13 @@
   inset-inline-end: 10px;
 }
 
-@media only screen and (max-width: 350px) {
+@media only screen and (width <= 350px) {
   .floatingTopButton {
     position: absolute
   }
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;
   }
diff --git a/src/renderer/views/ProfileSettings/ProfileSettings.css b/src/renderer/views/ProfileSettings/ProfileSettings.css
index 8c568da7bc3fc..f7d8a4ebc9a47 100644
--- a/src/renderer/views/ProfileSettings/ProfileSettings.css
+++ b/src/renderer/views/ProfileSettings/ProfileSettings.css
@@ -29,7 +29,7 @@ h2 {
   margin-inline: auto;
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;
   }
diff --git a/src/renderer/views/Search/Search.css b/src/renderer/views/Search/Search.css
index aeaa95da9bc44..1ef3d4d136f53 100644
--- a/src/renderer/views/Search/Search.css
+++ b/src/renderer/views/Search/Search.css
@@ -19,7 +19,7 @@
   margin-inline: auto;
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;
   }
diff --git a/src/renderer/views/Settings/Settings.css b/src/renderer/views/Settings/Settings.css
index 42f5502d04152..d433f8cf483cb 100644
--- a/src/renderer/views/Settings/Settings.css
+++ b/src/renderer/views/Settings/Settings.css
@@ -6,7 +6,7 @@ hr {
   border-block-start: 2px solid var(--scrollbar-color-hover);
 }
 
-@media only screen and (max-width: 800px) {
+@media only screen and (width <= 800px) {
   hr {
     inline-size: 100%;
   }
diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.css b/src/renderer/views/SubscribedChannels/SubscribedChannels.css
index 70798e8ce2e62..0c8c0f51ae041 100644
--- a/src/renderer/views/SubscribedChannels/SubscribedChannels.css
+++ b/src/renderer/views/SubscribedChannels/SubscribedChannels.css
@@ -49,7 +49,7 @@
   text-overflow: ellipsis;
   overflow-wrap: break-word;
   inline-size: 100%;
-  display: -webkit-box;
+  display: box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   padding-block: 0;
@@ -66,7 +66,7 @@
   block-size: 80%;
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;
   }
diff --git a/src/renderer/views/Subscriptions/Subscriptions.css b/src/renderer/views/Subscriptions/Subscriptions.css
index 66ff34fe8a104..3446217754239 100644
--- a/src/renderer/views/Subscriptions/Subscriptions.css
+++ b/src/renderer/views/Subscriptions/Subscriptions.css
@@ -10,9 +10,8 @@
 
 .subscriptionTabs {
   inline-size: 100%;
-  margin-block-start: -3px;
+  margin-block: -3px 10px;
   color: var(--tertiary-text-color);
-  margin-block-end: 10px;
 }
 
 .selectedTab {
@@ -35,7 +34,7 @@
   font-weight: bold;
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;
   }
diff --git a/src/renderer/views/Trending/Trending.css b/src/renderer/views/Trending/Trending.css
index a973f9088dd8e..5425c5e253094 100644
--- a/src/renderer/views/Trending/Trending.css
+++ b/src/renderer/views/Trending/Trending.css
@@ -14,9 +14,8 @@
   inline-size: 100%;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
-  margin-block-start: -3px;
+  margin-block: -3px 10px;
   color: var(--tertiary-text-color);
-  margin-block-end: 10px;
 }
 
 .selectedTab {
@@ -39,13 +38,13 @@
   font-weight: bold;
 }
 
-@media only screen and (max-width: 350px) {
+@media only screen and (width <= 350px) {
   .floatingTopButton {
     position: absolute
   }
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;
   }
diff --git a/src/renderer/views/UserPlaylists/UserPlaylists.css b/src/renderer/views/UserPlaylists/UserPlaylists.css
index d0da46adb028a..bdecb1640e17f 100644
--- a/src/renderer/views/UserPlaylists/UserPlaylists.css
+++ b/src/renderer/views/UserPlaylists/UserPlaylists.css
@@ -1,6 +1,5 @@
 .card {
   position: relative;
-
   inline-size: 85%;
   margin-block: 0 60px;
   margin-inline: auto;
@@ -23,7 +22,8 @@
   grid-template-columns: 1fr auto;
   column-gap: 16px;
 }
-@media only screen and (max-width: 800px) {
+
+@media only screen and (width <= 800px) {
   .searchInputsRow {
     /* Switch to 2 rows from 2 columns */
     grid-template-columns: auto;
@@ -37,7 +37,8 @@
   grid-template-rows: 1fr;
   align-items: center;
 }
-@media only screen and (max-width: 800px) {
+
+@media only screen and (width <= 800px) {
   .optionsRow {
     /* Switch to 2 rows from 2 columns */
     grid-template-columns: auto;
@@ -55,7 +56,7 @@
   color: var(--tertiary-text-color);
 }
 
-@media only screen and (max-width: 680px) {
+@media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;
   }
diff --git a/src/renderer/views/Watch/Watch.scss b/src/renderer/views/Watch/Watch.scss
index ad61d8af942a5..cac7c281dff90 100644
--- a/src/renderer/views/Watch/Watch.scss
+++ b/src/renderer/views/Watch/Watch.scss
@@ -16,7 +16,7 @@
   display: inline-block;
   max-inline-size: calc(80vh * 1.78);
 
-  @media only screen and (min-width: 1051px) {
+  @media only screen and (width >= 1051px) {
     inline-size: 300%;
   }
 }
@@ -99,7 +99,7 @@
   .sidebarArea {
     grid-area: sidebar;
 
-    @media only screen and (min-width: 1051px) {
+    @media only screen and (width >= 1051px) {
       min-inline-size: 380px;
     }
 
@@ -122,10 +122,10 @@
 
   .watchVideoPlaylist {
     :deep(.videoThumbnail) {
-      margin-block-start: auto;
-      margin-block-end: auto;
+      margin-block: auto;
     }
-    @media (max-width: 768px) {
+
+    @media (width <= 768px) {
       block-size: auto;
     }
   }
@@ -135,27 +135,27 @@
     margin-block: 0 16px;
     margin-inline: 0;
 
-    @media only screen and (min-width: 1051px) {
+    @media only screen and (width >= 1051px) {
       margin-block: 0 16px;
       margin-inline: 8px;
     }
   }
 
-  @media only screen and (max-width: 1350px) {
+  @media only screen and (width <= 1350px) {
     @include theatre-mode-template;
   }
 
-  @media only screen and (min-width: 1051px) {
+  @media only screen and (width >= 1051px) {
     &.useTheatreMode {
       @include theatre-mode-template;
     }
   }
 
-  @media only screen and (max-width: 1050px) {
+  @media only screen and (width <= 1050px) {
     @include single-column-template;
   }
 
-  @media only screen and (min-width: 1051px) {
+  @media only screen and (width >= 1051px) {
     .infoArea {
       scroll-margin-block-start: 76px;
     }