From 75d7a62693a2adac848518be1270dc621abb0d9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Zoe=CC=88=20Bijl?= <code@moiety.me>
Date: Fri, 10 Oct 2025 21:17:25 +0200
Subject: [PATCH] [feature] decouple login.scss from variables (#93)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../glitch/styles/components/index.scss       |  1 +
 .../glitch/styles/components/scrollbars.scss  | 42 +++++++++++++++++++
 .../flavours/glitch/styles/login.scss         | 15 ++++---
 .../flavours/glitch/styles/reset.scss         | 41 ------------------
 4 files changed, 53 insertions(+), 46 deletions(-)
 create mode 100644 app/javascript/flavours/glitch/styles/components/scrollbars.scss

diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index d94f12364..c221f82b3 100644
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/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';
diff --git a/app/javascript/flavours/glitch/styles/components/scrollbars.scss b/app/javascript/flavours/glitch/styles/components/scrollbars.scss
new file mode 100644
index 000000000..1661e04ab
--- /dev/null
+++ b/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;
+}
diff --git a/app/javascript/flavours/glitch/styles/login.scss b/app/javascript/flavours/glitch/styles/login.scss
index 607160a65..c5e702510 100644
--- a/app/javascript/flavours/glitch/styles/login.scss
+++ b/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;
diff --git a/app/javascript/flavours/glitch/styles/reset.scss b/app/javascript/flavours/glitch/styles/reset.scss
index f54ed5bc7..2c3efbddc 100644
--- a/app/javascript/flavours/glitch/styles/reset.scss
+++ b/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;
-}