stylelint: re-enable few more rules, fix warnings

.stylelintrc.json

@@ -20,12 +20,10 @@
     "selector-id-pattern": null,
     "selector-type-no-unknown": null,
     "shorthand-property-no-redundant-values": null,
-    "value-keyword-case": null,
     "scss/dollar-variable-pattern": null,
     "scss/dollar-variable-empty-line-before": null,
     "scss/double-slash-comment-empty-line-before": null,
     "scss/no-global-function-names": null,
-    "scss/operator-no-newline-after": null,
-    "scss/percent-placeholder-pattern": null
+    "scss/operator-no-newline-after": null
   }
 }

ui/analyse/css/study/panel/_multiboard.scss

@@ -155,10 +155,7 @@
         content: '';
         display: block;
         position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
+        inset: 0;
         box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset;
       }
       tick {

ui/bits/css/_lpv.embed.scss

@@ -10,10 +10,7 @@ body {
   @extend %flex-center;
 
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   justify-content: center;
   height: 100%;
   background: radial-gradient(circle, #484848, #2f3031);

ui/lib/css/ceval/_eval-gauge.scss

@@ -22,10 +22,7 @@
     content: '';
     display: block;
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    inset: 0;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.5) inset;
   }
 

ui/lib/css/component/_podium.scss

@@ -4,10 +4,7 @@
 
   #confetti {
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    inset: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;

ui/lib/css/component/_tagify.scss

@@ -266,10 +266,7 @@
         content: '';
         position: absolute;
         border-radius: inherit;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
+        inset: 0;
         z-index: -1;
         pointer-events: none;
         transition: 120ms ease;
@@ -284,10 +281,7 @@
         &::before {
           $size: -$tagMargin / 2;
           $size: -2px;
-          top: $size;
-          left: $size;
-          bottom: $size;
-          right: $size;
+          inset: $size;
           box-shadow: 0 0 0 $tag-inset-shadow-size $tag-hover inset;
           box-shadow: 0 0 0 var(--tag-inset-shadow-size, $tag-inset-shadow-size) var(--tag-hover, $tag-hover)
             inset;

ui/lobby/css/_lobby.scss

@@ -22,7 +22,7 @@ body {
   ---main-max-width: 1400px;
 }
 
-%lobby__side__more {
+%lobby-side-more {
   @extend %roboto;
 
   font-size: 0.9em;

ui/lobby/css/_stream.scss

@@ -25,6 +25,6 @@
   }
 
   .more {
-    @extend %lobby__side__more;
+    @extend %lobby-side-more;
   }
 }

ui/lobby/css/_timeline.scss

@@ -35,6 +35,6 @@
   }
 
   .more {
-    @extend %lobby__side__more;
+    @extend %lobby-side-more;
   }
 }

ui/recap/css/_recap.scss

@@ -50,10 +50,7 @@ body {
 }
 .recap {
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 1vw;
-  right: 1vw;
+  inset: 0 1vw;
   height: 100%;
   text-align: center;
 

ui/round/css/_control.scss

@@ -230,10 +230,7 @@
       &::before {
         content: '';
         position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
+        inset: 0;
         pointer-events: none;
         background: $c-primary;
         opacity: 0;