Merge branch 'master' into contextual_border_radius_variables

src/styles/_elements.scss

@@ -4,8 +4,8 @@
 }
 
 ::-webkit-scrollbar {
-    width: 3px;
-    height: 3px;
+    width: var(--scrollbar-thickness);
+    height: var(--scrollbar-thickness);
 }
 
 ::-webkit-scrollbar-track {

src/styles/_page.scss

@@ -1,10 +1,10 @@
 * {
-	text-rendering: optimizeLegibility !important;
+    text-rendering: optimizeLegibility !important;
     -webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
+    -moz-osx-font-smoothing: grayscale;
 
-    scrollbar-width: thin;
     box-sizing: border-box;
+    scrollbar-width: var(--scrollbar-thickness-ff);
 }
 
 html {

src/styles/_variables.scss

@@ -19,6 +19,8 @@
      * Layout
      */
     --app-height: 100vh;
+    --scrollbar-thickness: 3px;
+    --scrollbar-thickness-ff: thin;
     --border-radius: 6px;
     --border-radius-half: 50%;
     --border-radius-user-profile-picture: var(--border-radius-half);
@@ -35,17 +37,4 @@
     --attachment-max-text-width: 800px;
 
     --bottom-navigation-height: 50px;
-
-    /**
-     * Experimental
-     */
-    --background-rgb: (
-        25,
-        25,
-        25
-    ); //THIS IS SO THAT WE CAN HAVE CUSTOM BACKGROUNDS FOR THE CLIENT, CONVERTS THE HEX TO AN RGB VALUE FROM --background
-    --background-rgba: rgba(
-        var(--background-rgb),
-        0.8
-    ); //make the opacity also customizable
 }