SquadleDude
28b36c99ac
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.
33 lines
2.4 KiB
CSS
33 lines
2.4 KiB
CSS
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 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 a { font-size: small; font-weight: 400 !important; }
|
|
|
|
.col { padding: 0 !important; }
|
|
|
|
#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; }
|
|
|
|
#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); } }
|