generated from Gallardo7761/miarma-template-full
97 lines
2.1 KiB
CSS
97 lines
2.1 KiB
CSS
.login-card {
|
|
background: #111 !important;
|
|
border: 1px solid var(--dirty-gold) !important;
|
|
color: var(--parchment) !important;
|
|
padding: 40px;
|
|
clip-path: polygon(
|
|
20px 0, 100% 0,
|
|
100% calc(100% - 20px),
|
|
calc(100% - 20px) 100%,
|
|
0 100%, 0 20px
|
|
);
|
|
box-shadow: 0 0 25px rgba(0,0,0,0.9);
|
|
position: relative;
|
|
}
|
|
|
|
.login-card::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 6px;
|
|
border: 1px dashed #222;
|
|
pointer-events: none;
|
|
clip-path: inherit;
|
|
}
|
|
|
|
input.form-control {
|
|
background-color: rgba(0,0,0,0.8) !important;
|
|
border: 1px solid var(--plasteel) !important;
|
|
color: var(--imperial-gold) !important;
|
|
font-family: 'Share Tech Mono', monospace;
|
|
letter-spacing: 1px;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
input.form-control:focus {
|
|
background-color: #000 !important;
|
|
border-color: var(--blood-god) !important;
|
|
box-shadow: 0 0 10px rgba(138, 11, 11, 0.4) !important;
|
|
color: var(--imperial-gold) !important;
|
|
}
|
|
|
|
.form-floating > label {
|
|
font-family: 'Cinzel', serif;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
color: var(--dirty-gold) !important;
|
|
}
|
|
|
|
.form-floating > label::after {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.login-button {
|
|
font-family: 'Cinzel', serif !important;
|
|
font-weight: bold !important;
|
|
text-transform: uppercase !important;
|
|
letter-spacing: 2px !important;
|
|
background: #000 !important;
|
|
border: 1px solid var(--imperial-gold) !important;
|
|
color: var(--imperial-gold) !important;
|
|
padding: 15px 40px !important;
|
|
clip-path: polygon(
|
|
10px 0, 100% 0,
|
|
100% calc(100% - 10px),
|
|
calc(100% - 10px) 100%,
|
|
0 100%, 0 10px
|
|
);
|
|
transition: 0.4s;
|
|
}
|
|
|
|
.login-button:hover {
|
|
background: var(--blood-god) !important;
|
|
color: #fff !important;
|
|
border-color: var(--plasma-glow) !important;
|
|
box-shadow: 0 0 20px var(--blood-god) !important;
|
|
text-shadow: 0 0 5px #fff !important;
|
|
}
|
|
|
|
@media (max-width: 991.98px) {
|
|
.login-card {
|
|
padding: 28px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 575.98px) {
|
|
.login-card {
|
|
padding: 20px;
|
|
}
|
|
|
|
.login-card h1 {
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
.login-button {
|
|
padding: 12px 24px !important;
|
|
width: 100% !important;
|
|
}
|
|
} |