173 lines
3.7 KiB
CSS
173 lines
3.7 KiB
CSS
/*
|
|
* Prefixed by https://autoprefixer.github.io
|
|
* PostCSS: v8.4.14,
|
|
* Autoprefixer: v10.4.7
|
|
* Browsers: last 4 version
|
|
*/
|
|
|
|
/*
|
|
* Prefixed by https://autoprefixer.github.io
|
|
* PostCSS: v8.4.14,
|
|
* Autoprefixer: v10.4.7
|
|
* Browsers: last 4 version
|
|
*/
|
|
|
|
/* Auth Pages Styling */
|
|
.login-container {
|
|
min-height: 100vh;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
background-color: var(--secondary-bg);
|
|
background-image: -o-linear-gradient(315deg, #f5f5f5 0%, #ffffff 100%);
|
|
background-image: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
|
|
padding: 1rem;
|
|
}
|
|
|
|
.auth-container {
|
|
max-width: 420px;
|
|
width: 100%;
|
|
padding: 2.5rem;
|
|
border-radius: 12px;
|
|
-webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
|
|
background-color: var(--tertiary-bg);
|
|
border: 1px solid var(--secondary-border);
|
|
-webkit-transition: all 0.3s ease;
|
|
-o-transition: all 0.3s ease;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.auth-container:hover {
|
|
-webkit-box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
|
|
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
|
|
-webkit-transform: translateY(-5px);
|
|
-ms-transform: translateY(-5px);
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.auth-title {
|
|
text-align: center;
|
|
margin-bottom: 1.5rem;
|
|
color: var(--intensive-text);
|
|
font-weight: 700;
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
.auth-footer {
|
|
text-align: center;
|
|
margin-top: 1.5rem;
|
|
font-size: 0.9rem;
|
|
color: var(--neutral);
|
|
}
|
|
|
|
.auth-footer a {
|
|
color: var(--primary-text);
|
|
font-weight: 500;
|
|
-webkit-transition: all 0.2s ease;
|
|
-o-transition: all 0.2s ease;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.auth-footer a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Form Styling */
|
|
.auth-container .field {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.auth-container .label {
|
|
color: var(--intensive-text) !important;
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.auth-container .input {
|
|
color: var(--intensive-text) !important;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--secondary-border);
|
|
padding: 0.75rem 1rem;
|
|
height: auto;
|
|
font-size: 1rem;
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
-webkit-transition: all 0.2s ease;
|
|
-o-transition: all 0.2s ease;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.auth-container .input:focus {
|
|
border-color: var(--primary-bg);
|
|
-webkit-box-shadow: 0 0 0 2px rgba(110, 68, 255, 0.1);
|
|
box-shadow: 0 0 0 2px rgba(110, 68, 255, 0.1);
|
|
}
|
|
|
|
.auth-container .input.is-danger {
|
|
border-color: var(--error-bg);
|
|
}
|
|
|
|
.auth-container .button {
|
|
height: auto;
|
|
padding: 0.75rem 1.5rem;
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
border-radius: 8px;
|
|
-webkit-transition: all 0.3s ease;
|
|
-o-transition: all 0.3s ease;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.auth-container .button.is-primary {
|
|
background-color: var(--primary-bg);
|
|
border: none;
|
|
}
|
|
|
|
.auth-container .button.is-primary:hover {
|
|
background-color: var(--primary-dark);
|
|
-webkit-box-shadow: 0 4px 12px rgba(110, 68, 255, 0.3);
|
|
box-shadow: 0 4px 12px rgba(110, 68, 255, 0.3);
|
|
-webkit-transform: translateY(-2px);
|
|
-ms-transform: translateY(-2px);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.auth-container .checkbox {
|
|
font-size: 0.9rem;
|
|
color: var(--neutral-dark);
|
|
}
|
|
|
|
.auth-container .help.is-danger {
|
|
font-size: 0.8rem;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.auth-container .notification {
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.auth-container .notification .delete {
|
|
position: absolute;
|
|
right: 0.75rem;
|
|
top: 0.75rem;
|
|
}
|
|
|
|
/* Responsive Adjustments */
|
|
@media screen and (max-width: 768px) {
|
|
.auth-container {
|
|
padding: 2rem;
|
|
max-width: 100%;
|
|
margin: 0 1rem;
|
|
}
|
|
}
|