From 28b36c99ac35ded195f0bf7b3ddfe6e975573c84 Mon Sep 17 00:00:00 2001
From: SquadleDude <167652540+squadledude@users.noreply.github.com>
Date: Mon, 3 Aug 2026 15:06:17 +0300
Subject: [PATCH] Refactor login styles for improved responsiveness

Increased the minimum width of the login container and adjusted logo sizes for better responsiveness. Updated styles for the login logo and navbar brand logo.
---
 app/static/css/login.css | 111 ++++++++-------------------------------
 1 file changed, 22 insertions(+), 89 deletions(-)

diff --git a/app/static/css/login.css b/app/static/css/login.css
index 94d43a0..0d16c8d 100644
--- a/app/static/css/login.css
+++ b/app/static/css/login.css
@@ -1,99 +1,32 @@
-body {
-    background: radial-gradient(circle, var(--auth-dot) 10%, transparent 11%),radial-gradient(circle at bottom left, var(--auth-dot) 5%, transparent 6%),radial-gradient(circle at bottom right, var(--auth-dot) 5%, transparent 6%),radial-gradient(circle at top left, var(--auth-dot) 5%, transparent 6%),radial-gradient(circle at top right, var(--auth-dot) 5%, transparent 6%);
-    background-size: 3em 3em;
-    background-color: var(--auth-bg);
-}
-#main {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-}
+body { background: radial-gradient(circle, var(--auth-dot) 10%, transparent 11%),radial-gradient(circle at bottom left, var(--auth-dot) 5%, transparent 6%),radial-gradient(circle at bottom right, var(--auth-dot) 5%, transparent 6%),radial-gradient(circle at top left, var(--auth-dot) 5%, transparent 6%),radial-gradient(circle at top right, var(--auth-dot) 5%, transparent 6%); background-size: 3em 3em; background-color: var(--auth-bg); } #main { display: flex; justify-content: center; align-items: center; min-height: 100vh; }
+.login-container { min-width: 420px; /* increased so larger logo has room */ display: inline-block; background-color: var(--auth-card-bg); box-shadow: 0 0 15px var(--auth-card-shadow); }
 
-.login-container {
-    min-width: 330px;
-    display: inline-block;
-    background-color: var(--auth-card-bg);
-    box-shadow: 0 0 15px var(--auth-card-shadow);
-}
 
-.login-container h1 {
-    text-align: center;
-    margin-bottom: 0;
-    font-size: 3.5rem;
-    font-weight: 700;
-}
-.login-container p {
-    text-align: center;
-    padding: 0;
-    margin-bottom: 15px; 
-    font-size: small;
-}
+.login-container h1 { text-align: center; margin-bottom: 0; font-size: 3.5rem; font-weight: 700; } .login-container p { text-align: center; padding: 0; margin-bottom: 15px; font-size: small; }
 
-.login-container button {
-    width: 100%;
-    font-weight: 600;
-    font-size: larger;
-    padding: 3px;
-    margin-bottom: 0 !important;
-}
+.login-container button { width: 100%; font-weight: 600; font-size: larger; padding: 3px; margin-bottom: 0 !important; }
 
-.login-container a {
-    font-size: small;
-    font-weight: 400 !important;
-}
+.login-container a { font-size: small; font-weight: 400 !important; }
 
-.col {
-    padding: 0 !important;
-}
+.col { padding: 0 !important; }
 
-#password {
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
+#password { margin-top: 10px; margin-bottom: 10px; }
 
-.form-text {
-    /* wrap the text*/
-    word-wrap: break-word;
-}
 
-#main a {
-    text-decoration: none !important;
-    color: rgb(32, 147, 255) !important;
-    font-weight: 500 !important;
-    transition: 0.2s;
-}
+.form-text { /* wrap the text*/ word-wrap: break-word; }
 
-#main a:hover {
-    text-decoration: none !important;
-    color: rgb(3, 133, 255) !important;
-    transition: 0.2s;
-}
+#main a { text-decoration: none !important; color: rgb(32, 147, 255) !important; font-weight: 500 !important; transition: 0.2s; }
 
-/* =========================
-   Login logo and responsive tweaks
-   ========================= */
-.login-logo {
-  display: block;
-  margin: 0 auto 8px;
-  max-width: 260px;
-  height: auto;
-}
-.login-subtitle {
-  text-align: center;
-  margin-bottom: 12px;
-  color: rgba(230,238,248,0.9);
-  font-size: small;
-}
-@media (max-width: 480px) {
-  .login-logo { max-width: 160px; }
-}
-.navbar .navbar-brand .brand-logo {
-  display: block;
-  max-height: 56px;
-  width: auto;
-  transform: translateY(4px);
-}
-@media (max-width: 576px) {
-  .navbar .navbar-brand .brand-logo { max-height: 40px; }
-}
+#main a:hover { text-decoration: none !important; color: rgb(3, 133, 255) !important; transition: 0.2s; }
+/* ========================= Login logo and responsive tweaks ========================= */
+
+/* login logo (used in login.html) / .login-logo { display: block; margin: 12px auto 14px; max-width: 420px;    / larger maximum width on desktop / width: 100%;         / scale responsively up to max-width */ height: auto; object-fit: contain; }
+
+
+/* subtitle under logo */ .login-subtitle { text-align: center; margin-bottom: 12px; color: rgba(230,238,248,0.9); font-size: small; }
+
+
+/* Navbar brand logo sizing */ .navbar .navbar-brand .brand-logo { display: block; max-height: 64px; width: auto; height: auto; transform: translateY(2px); }
+
+
+/* responsive breakpoints */ @media (max-width: 992px) { .login-logo { max-width: 300px; } .login-container { min-width: 360px; } } @media (max-width: 480px) { .login-logo { max-width: 160px; } .login-container { min-width: 280px; } } @media (max-width: 576px) { .navbar .navbar-brand .brand-logo { max-height: 40px; transform: translateY(0); } }