mirror of
https://github.com/kiddin9/op-packages.git
synced 2026-11-03 00:53:56 +08:00
333 lines
8.9 KiB
Plaintext
333 lines
8.9 KiB
Plaintext
// out: false
|
|
// Both login layouts share their fields, actions and footer.
|
|
|
|
.login-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
min-height: 100vh;
|
|
min-height: 100dvh;
|
|
|
|
// Wallpaper stays behind the whole page when a short viewport needs scrolling.
|
|
.main-bg,
|
|
.video {
|
|
position: fixed;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.main-bg {
|
|
background: url(../img/blank.png) no-repeat center/cover;
|
|
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
.video {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: var(--media-bg);
|
|
overflow: hidden;
|
|
|
|
video {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
.volume-control {
|
|
position: fixed;
|
|
top: 1rem;
|
|
right: 1rem;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
z-index: 5000;
|
|
cursor: pointer;
|
|
border: 0 !important;
|
|
background: url(../img/volume_high.svg) no-repeat center/contain;
|
|
|
|
&:focus-visible {
|
|
outline: 2px solid var(--focus-ring);
|
|
outline-offset: 4px;
|
|
}
|
|
|
|
&.mute {
|
|
background-image: url(../img/volume_off.svg);
|
|
}
|
|
}
|
|
|
|
.login-container {
|
|
--login-inset: 3.125rem;
|
|
--login-logo-size: 3.125rem;
|
|
--login-logo-gap: 1.5625rem;
|
|
position: relative;
|
|
z-index: 10;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 26rem;
|
|
max-width: 100%;
|
|
min-height: 100vh;
|
|
min-height: 100dvh;
|
|
margin-inline-start: 5%;
|
|
-webkit-backdrop-filter: blur(var(--blur-radius));
|
|
backdrop-filter: blur(var(--blur-radius));
|
|
background-color: rgba(var(--login-panel-rgb), var(--blur-opacity));
|
|
box-shadow: rgba(0, 0, 0, .75) 0 0 35px -5px;
|
|
}
|
|
|
|
.login-form {
|
|
display: flex;
|
|
flex: 1 0 auto;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
min-width: 0;
|
|
padding-block: 0;
|
|
|
|
.brand {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
gap: var(--login-logo-gap);
|
|
width: 100%;
|
|
padding: 3.125rem var(--login-inset) 0;
|
|
color: var(--login-text);
|
|
text-decoration: none;
|
|
|
|
.icon {
|
|
flex: 0 0 auto;
|
|
width: var(--login-logo-size);
|
|
height: var(--login-logo-size);
|
|
object-fit: contain;
|
|
}
|
|
|
|
.brand-text {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
font-family: "TypoGraphica";
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
.form-login {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
width: 100%;
|
|
min-width: 0;
|
|
margin-block: auto;
|
|
padding-block: 2rem;
|
|
padding-inline: var(--login-inset);
|
|
|
|
.errorbox {
|
|
padding: .75rem 1rem;
|
|
overflow-wrap: anywhere;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-control);
|
|
background: color-mix(in srgb, var(--warning) 6%, var(--surface-color));
|
|
color: var(--text-strong);
|
|
line-height: 1.5;
|
|
text-align: start;
|
|
}
|
|
|
|
.input-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.25rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.input-group {
|
|
position: relative;
|
|
min-width: 0;
|
|
|
|
&::before {
|
|
position: absolute;
|
|
top: 50%;
|
|
inset-inline-start: .625rem;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
translate: 0 -50%;
|
|
background-color: var(--overlay-text);
|
|
-webkit-mask: var(--login-field-icon) center / contain no-repeat;
|
|
mask: var(--login-field-icon) center / contain no-repeat;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&.user-icon::before {
|
|
content: "";
|
|
--login-field-icon: url('../icon/user.svg');
|
|
}
|
|
|
|
&.pass-icon::before {
|
|
content: "";
|
|
--login-field-icon: url('../icon/password.svg');
|
|
}
|
|
|
|
input {
|
|
display: block;
|
|
width: 100%;
|
|
min-width: 0;
|
|
margin: 0;
|
|
padding: .5rem .75rem;
|
|
padding-inline-start: 3rem;
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
color: var(--overlay-text);
|
|
background: transparent;
|
|
border: 0;
|
|
border-bottom: 1px solid var(--login-input-border);
|
|
border-radius: 0;
|
|
outline: none;
|
|
box-shadow: 0 3px 2px rgba(233, 236, 239, .05);
|
|
|
|
&::placeholder {
|
|
color: var(--placeholder-color);
|
|
opacity: 1;
|
|
}
|
|
|
|
&:focus + .border {
|
|
transform: scaleX(1);
|
|
}
|
|
}
|
|
|
|
.border {
|
|
position: absolute;
|
|
inset-inline: 0;
|
|
bottom: 0;
|
|
height: 2px;
|
|
background-color: var(--control-focus);
|
|
transform: scaleX(0);
|
|
pointer-events: none;
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
transition: transform .15s ease;
|
|
}
|
|
}
|
|
}
|
|
|
|
.auth-plugin {
|
|
max-width: 100%;
|
|
overflow-wrap: anywhere;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.cbi-button-apply {
|
|
width: 100% !important;
|
|
min-height: 50px;
|
|
height: auto;
|
|
margin: 0;
|
|
padding: .75rem 1rem;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
letter-spacing: .1rem;
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
color: var(--accent-text);
|
|
background-color: var(--primary) !important;
|
|
border: 0;
|
|
border-radius: var(--radius-control);
|
|
transition: box-shadow .15s ease-out, scale .15s ease-out;
|
|
|
|
&:focus-visible {
|
|
outline: 2px solid var(--focus-ring);
|
|
outline-offset: 3px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
footer {
|
|
position: static;
|
|
width: 100%;
|
|
min-width: 0;
|
|
margin-block-start: auto;
|
|
padding: 1.5rem var(--login-inset);
|
|
color: var(--login-text);
|
|
font-size: .75rem;
|
|
line-height: 1.5;
|
|
text-align: center;
|
|
white-space: normal;
|
|
overflow: visible;
|
|
overflow-wrap: anywhere;
|
|
|
|
.login-footer-links {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: .25rem 1rem;
|
|
margin-bottom: .375rem;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
|
|
&:focus-visible {
|
|
outline: 2px solid var(--focus-ring);
|
|
outline-offset: 3px;
|
|
}
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 480px) {
|
|
.login-container {
|
|
width: 100%;
|
|
margin-inline-start: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Only the outer presentation differs from the classic sidebar.
|
|
.login-page[data-login-style="centered"] {
|
|
align-items: center;
|
|
padding: 2rem 1rem;
|
|
|
|
.login-container {
|
|
--login-inset: 2rem;
|
|
--login-logo-size: 2.5rem;
|
|
--login-logo-gap: 1rem;
|
|
width: 26rem;
|
|
min-height: 0;
|
|
margin: auto 0;
|
|
border-radius: var(--radius-dialog);
|
|
}
|
|
|
|
.login-form {
|
|
flex: 0 0 auto;
|
|
padding-block: 0;
|
|
|
|
.brand {
|
|
justify-content: center;
|
|
padding: 2rem 1.5rem 1.5rem;
|
|
}
|
|
|
|
.form-login {
|
|
margin-block: 0;
|
|
padding-block: 0;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 480px) {
|
|
padding: 1rem;
|
|
|
|
.login-container {
|
|
--login-inset: 1.25rem;
|
|
}
|
|
}
|
|
}
|