4 files changed, 53 insertions(+), 46 deletions(-)

M app/javascript/flavours/glitch/styles/components/index.scss
A app/javascript/flavours/glitch/styles/components/scrollbars.scss
M app/javascript/flavours/glitch/styles/login.scss
M app/javascript/flavours/glitch/styles/reset.scss

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

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

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

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