Update login.scss

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

@@ -2,16 +2,18 @@
 @import 'reset';
 
 :root {
-    --color-bg: #1e1f29;
-    --color-fg: #f7f7fa;
+    --light-color: #f7f7fa;
+    --dark-color: #1e1f29;
+    --footer-color: #2f313d;
+    --hover-color: #bd93f9;
 }
 
 body {
-    color: var(--color-fg);
+    color: var(--light-color);
     font-family: ui-rounded, mastodon-font-sans-serif, sans-serif;
     font-size: 1rem;
     line-height: 1.5;
-    background: var(--color-bg);
+    background-color: var(--dark-color);
 }
 
 .login-container {
@@ -31,6 +33,8 @@ header {
 
     img {
         height: 150px;
+        max-width: 100%;
+        object-fit: contain;
     }
 }
 
@@ -48,12 +52,12 @@ h1 {
 }
 
 label {
-    font-family: inherit;
-    color: var(--color-fg);
     display: block;
-    word-wrap: break-word;
-    font-weight: 500;
     grid-column: 1 / -1;
+    color: var(--light-color);
+    font-family: inherit;
+    font-weight: 500;
+    word-wrap: break-word;
 }
 
 form {
@@ -64,29 +68,37 @@ form {
 
 :focus-visible,
 button:focus-visible {
-    outline: 2px solid #bd93f9;
+    outline: 2px solid var(--hover-color);
     outline-offset: 3px;
 }
 
 button {
     padding: 7px 10px;
-    border: 1px solid lighten(#bd93f9, 7%);
+    border: 1px solid var(--hover-color);
     border-radius: 4px;
     box-sizing: border-box;
-    color: #1e1f29;
+    color: var(--dark-color);
     font-family: inherit;
     font-size: inherit;
-    font-weight: 500;
+    font-weight: 600;
     text-align: center;
     white-space: nowrap;
-    background-color: #1e1f29;
+    background-color: var(--hover-color);
+    cursor: pointer;
+    transition:
+        border-color 0.2s ease,
+        background-color 0.2s ease,
+        color 0.2s ease;
 
     &:hover {
-        background-color: #bd93f9;
+        color: var(--light-color);
+        background-color: var(--footer-color);
     }
 
     &:disabled {
-        background-color: #CEBBED;
+        border-color: rgba(247, 247, 250, 0.25);
+        color: rgba(247, 247, 250, 0.55);
+        background-color: var(--footer-color);
         cursor: default;
     }
 }
@@ -95,31 +107,61 @@ input[type='text'] {
     display: block;
     margin: 0;
     padding: 15px;
-    border: 1px solid lighten(#1e1f29, 7%);
+    border: 1px solid rgba(247, 247, 250, 0.1);
     border-radius: 4px;
     box-sizing: border-box;
     box-shadow: none;
-    color: #CEBBED;
+    color: var(--light-color);
     font-family: inherit;
     font-size: inherit;
     line-height: 18px;
-    background: #1e1f29;
+    background: var(--dark-color);
+    transition:
+        border-color 0.2s ease,
+        background-color 0.2s ease;
+
+    &::placeholder {
+        color: rgba(247, 247, 250, 0.55);
+    }
+
+    &:hover,
+    &:focus {
+        border-color: var(--hover-color);
+        background-color: var(--footer-color);
+    }
 }
 
 .content {
-    padding: 15px;
-    border-radius: 4px;
-    border: 1px solid lighten(#2f313d, 7%);
-    color: #fff;
-    background-color: #2f313d;
+    padding: 15px 15px 15px 12px;
+    border: 1px solid rgba(247, 247, 250, 0.08);
+    border-left: 4px solid var(--hover-color);
+    border-radius: 0;
+    color: var(--light-color);
+    background-color: var(--footer-color);
+    transition:
+        border-color 0.2s ease,
+        background-color 0.2s ease;
+
+    &:hover {
+        border-color: rgba(247, 247, 250, 0.16);
+        border-left-color: var(--hover-color);
+        background-color: var(--dark-color);
+    }
 }
 
 .link-footer {
     padding-inline: 10px;
-    color: var(--color-fg);
+    color: rgba(247, 247, 250, 0.75);
     font-size: 0.875rem;
 
     a {
-        color: inherit;
+        color: var(--hover-color);
+        text-decoration: none;
+        transition: color 0.2s ease;
+
+        &:hover {
+            color: var(--light-color);
+            text-decoration: underline;
+        }
     }
 }