lx/nexium-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor login styles for improved responsiveness

Browse Source 
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.
This commit is contained in:
SquadleDude
2026-08-03 15:06:17 +03:00
committed by GitHub
parent 079b20c23e
commit 28b36c99ac
1 changed files with 22 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/css/login.css
+22 -89
View File
@@ -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); } }