mirror of
https://github.com/opensourcepos/opensourcepos.git
synced 2026-04-02 14:24:27 -04:00
132 lines
2.6 KiB
CSS
132 lines
2.6 KiB
CSS
/* Standard Dekstop Styling */
|
|
html {
|
|
height: -webkit-fill-available; /* Prevent mobile webkit browsers from dropping footer behind the navigation bar */
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
min-height: -webkit-fill-available; /* Prevent mobile webkit browsers from dropping footer behind the navigation bar */
|
|
}
|
|
|
|
.container-login,
|
|
.footer {
|
|
max-width: 720px;
|
|
}
|
|
|
|
.container-login {
|
|
min-height: 405px;
|
|
}
|
|
|
|
.box-logo {
|
|
width: 40%;
|
|
}
|
|
|
|
.logo {
|
|
object-fit: contain; /* Logo contains aspect ratio */
|
|
max-width: 405px; /* Prevent horizontal logo going too big on large mobile screens */
|
|
max-height: calc(405px - 3rem); /* Container height minus container padding */
|
|
}
|
|
|
|
img.logo {
|
|
filter: drop-shadow(1px 0 0 rgba(255, 255, 255, 0.87)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.87)) drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.87)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.87)); /* White border around Company Logo for correct display on darker themes */
|
|
}
|
|
|
|
.box-login {
|
|
width: 60%;
|
|
}
|
|
|
|
.box-login form {
|
|
width: 100%; /* Login box content full width */
|
|
}
|
|
|
|
.box-login .form-floating:focus-within,
|
|
.box-login .input-group:focus-within {
|
|
z-index: 2;
|
|
}
|
|
|
|
.box-login input[name="username"],
|
|
.box-login span[id="input-username"] {
|
|
margin-bottom: -1px;
|
|
border-bottom-right-radius: 0 !important;
|
|
border-bottom-left-radius: 0 !important;
|
|
}
|
|
|
|
.box-login input[name="password"],
|
|
.box-login span[id="input-password"] {
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
|
|
.alert div:not(:first-child) {
|
|
margin-top: 1rem; /* Space between multiple validation errors */
|
|
}
|
|
|
|
footer a:not(:hover) {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Mobile Styling */
|
|
@media (max-width: 767.98px) {
|
|
.container-login {
|
|
min-height: auto;
|
|
}
|
|
|
|
.box-logo,
|
|
.box-login {
|
|
width: 100%;
|
|
}
|
|
|
|
.box-logo {
|
|
border-right: none !important;
|
|
}
|
|
|
|
.logo {
|
|
max-height: 150px;
|
|
}
|
|
|
|
.footer {
|
|
max-width: 100%;
|
|
border-radius: 0 !important;
|
|
}
|
|
}
|
|
|
|
/* QHD Styling */
|
|
@media (min-width: 2560px) {
|
|
.container-login,
|
|
.footer {
|
|
max-width: 960px;
|
|
}
|
|
|
|
.container-login {
|
|
min-height: 540px;
|
|
}
|
|
|
|
.logo {
|
|
max-height: calc(540px - 3rem);
|
|
}
|
|
}
|
|
|
|
/* 4K Styling */
|
|
@media (min-width: 3840px) {
|
|
.container-login,
|
|
.footer {
|
|
max-width: 1140px;
|
|
}
|
|
|
|
.container-login {
|
|
min-height: 641.25px;
|
|
}
|
|
|
|
.logo {
|
|
max-height: calc(641.25px - 3rem);
|
|
}
|
|
}
|
|
|
|
/* Specific Styling */
|
|
@media (max-width: 359.98px) {
|
|
.g-recaptcha {
|
|
overflow-x: auto; /* Makes sure reCAPTCHA is usable on the smallest screens */
|
|
min-height: 86px;
|
|
}
|
|
}
|