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.
This commit is contained in:
SquadleDude
+22
-89
@@ -1,99 +1,32 @@
|
|||||||
body {
|
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; }
|
||||||
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%);
|
.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); }
|
||||||
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: 330px;
|
|
||||||
display: inline-block;
|
|
||||||
background-color: var(--auth-card-bg);
|
|
||||||
box-shadow: 0 0 15px var(--auth-card-shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-container h1 {
|
.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; }
|
||||||
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 {
|
.login-container button { width: 100%; font-weight: 600; font-size: larger; padding: 3px; margin-bottom: 0 !important; }
|
||||||
width: 100%;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: larger;
|
|
||||||
padding: 3px;
|
|
||||||
margin-bottom: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-container a {
|
.login-container a { font-size: small; font-weight: 400 !important; }
|
||||||
font-size: small;
|
|
||||||
font-weight: 400 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col {
|
.col { padding: 0 !important; }
|
||||||
padding: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#password {
|
#password { margin-top: 10px; margin-bottom: 10px; }
|
||||||
margin-top: 10px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-text {
|
|
||||||
/* wrap the text*/
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
#main a {
|
.form-text { /* wrap the text*/ word-wrap: break-word; }
|
||||||
text-decoration: none !important;
|
|
||||||
color: rgb(32, 147, 255) !important;
|
|
||||||
font-weight: 500 !important;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
#main a:hover {
|
#main a { text-decoration: none !important; color: rgb(32, 147, 255) !important; font-weight: 500 !important; transition: 0.2s; }
|
||||||
text-decoration: none !important;
|
|
||||||
color: rgb(3, 133, 255) !important;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =========================
|
#main a:hover { text-decoration: none !important; color: rgb(3, 133, 255) !important; transition: 0.2s; }
|
||||||
Login logo and responsive tweaks
|
/* ========================= Login logo and responsive tweaks ========================= */
|
||||||
========================= */
|
|
||||||
.login-logo {
|
/* 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; }
|
||||||
display: block;
|
|
||||||
margin: 0 auto 8px;
|
|
||||||
max-width: 260px;
|
/* subtitle under logo */ .login-subtitle { text-align: center; margin-bottom: 12px; color: rgba(230,238,248,0.9); font-size: small; }
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
.login-subtitle {
|
/* Navbar brand logo sizing */ .navbar .navbar-brand .brand-logo { display: block; max-height: 64px; width: auto; height: auto; transform: translateY(2px); }
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
color: rgba(230,238,248,0.9);
|
/* 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); } }
|
||||||
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; }
|
|
||||||
}
|
|
||||||
|
|||||||
Reference in New Issue
Block a user