[feature] decouple login.scss from variables (#93)

Preparing for a switch to CSS variables

- decouple login.scss from variables.scss
- move scrollbar css to separate file

Reviewed-on: https://codeberg.org/superseriousbusiness/masto-fe-standalone/pulls/93
Co-authored-by: Zoë Bijl <code@moiety.me>
Co-committed-by: Zoë Bijl <code@moiety.me>

app/javascript/flavours/glitch/styles/components/index.scss

@@ -20,6 +20,7 @@
 @import 'single_column';
 @import 'announcements';
 @import 'explore';
+@import 'scrollbars';
 @import 'signed_out';
 @import 'privacy_policy';
 @import 'about';

app/javascript/flavours/glitch/styles/components/scrollbars.scss

@@ -0,0 +1,42 @@
+/* Scrollbars */
+html {
+  scrollbar-color: lighten($ui-base-color, 4%)
+    rgba($base-overlay-background, 0.1);
+}
+
+::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: lighten($ui-base-color, 4%);
+  border: 0 none $base-border-color;
+  border-radius: 50px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: lighten($ui-base-color, 6%);
+}
+
+::-webkit-scrollbar-thumb:active {
+  background: lighten($ui-base-color, 4%);
+}
+
+::-webkit-scrollbar-track {
+  border: 0 none $base-border-color;
+  border-radius: 0;
+  background: rgba($base-overlay-background, 0.1);
+}
+
+::-webkit-scrollbar-track:hover {
+  background: $ui-base-color;
+}
+
+::-webkit-scrollbar-track:active {
+  background: $ui-base-color;
+}
+
+::-webkit-scrollbar-corner {
+  background: transparent;
+}

app/javascript/flavours/glitch/styles/login.scss

@@ -1,13 +1,17 @@
-@import 'variables';
 @import 'styles/fonts/roboto';
-@import 'styles/fonts/roboto-mono';
 @import 'reset';
-@import 'basics';
+
+:root {
+    --color-bg: #191b22;
+    --color-fg: #fff;
+}
 
 body {
+    color: var(--color-fg);
     font-family: ui-rounded, mastodon-font-sans-serif, sans-serif;
     font-size: 1rem;
     line-height: 1.5;
+    background: var(--color-bg);
 }
 
 .login-container {
@@ -45,7 +49,7 @@ h1 {
 
 label {
     font-family: inherit;
-    color: $primary-text-color;
+    color: var(--color-fg);
     display: block;
     word-wrap: break-word;
     font-weight: 500;
@@ -70,6 +74,7 @@ button {
     border-radius: 4px;
     box-sizing: border-box;
     color: #2a2b2f;
+    font-family: inherit;
     font-size: inherit;
     font-weight: 500;
     text-align: center;
@@ -102,7 +107,7 @@ input[type='text'] {
 }
 
 .content {
-    padding: 20px 15px;
+    padding: 15px;
     border-radius: 4px;
     border: 1px solid lighten(#39404f, 7%);
     color: #fff;

app/javascript/flavours/glitch/styles/reset.scss

@@ -52,44 +52,3 @@ table {
   border-collapse: collapse;
   border-spacing: 0;
 }
-
-html {
-  scrollbar-color: lighten($ui-base-color, 4%) rgba($base-overlay-background, 0.1);
-}
-
-::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: lighten($ui-base-color, 4%);
-  border: 0px none $base-border-color;
-  border-radius: 50px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: lighten($ui-base-color, 6%);
-}
-
-::-webkit-scrollbar-thumb:active {
-  background: lighten($ui-base-color, 4%);
-}
-
-::-webkit-scrollbar-track {
-  border: 0px none $base-border-color;
-  border-radius: 0;
-  background: rgba($base-overlay-background, 0.1);
-}
-
-::-webkit-scrollbar-track:hover {
-  background: $ui-base-color;
-}
-
-::-webkit-scrollbar-track:active {
-  background: $ui-base-color;
-}
-
-::-webkit-scrollbar-corner {
-  background: transparent;
-}