Add back 3 Stylelint configs

.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"] }]
   }
 }

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;
   }
 }

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>

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;
   }
 }

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%
 }

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;

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%);
 }

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;

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;
 }

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;
 

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;
 }

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;
 

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%;
   }

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 {