Enhance 'drill-luxe' Keycloak theme with additional responsive styles and layout adjustments

- Introduced new media queries for improved layout on smaller screens, ensuring a better user experience.
- Updated CSS properties for various elements, including height adjustments and display properties, to enhance visual consistency.
- Refined styles for brand, panel, and feature grid components to improve aesthetics and usability in the login interface.
This commit is contained in:
Первов Артем
2026-04-08 12:54:43 +03:00
parent 1c89d9591d
commit 80ab9ff408

View File

@@ -562,9 +562,15 @@ body.drill-login {
} }
@media (max-height: 900px) { @media (max-height: 900px) {
body.drill-login {
overflow: hidden;
}
.drill-login__shell { .drill-login__shell {
gap: 16px; gap: 16px;
padding: 16px; padding: 16px;
height: 100vh;
height: 100dvh;
} }
.drill-login__brand, .drill-login__brand,
@@ -633,13 +639,26 @@ body.drill-login {
.drill-login__submit { .drill-login__submit {
padding: 14px 16px; padding: 14px 16px;
} }
.drill-login__feature-grid article p:last-child {
display: none;
}
} }
@media (max-height: 760px) { @media (max-height: 760px) {
.drill-login__shell {
height: 100vh;
height: 100dvh;
}
.drill-login__brand-copy p { .drill-login__brand-copy p {
display: none; display: none;
} }
.drill-login__metrics {
display: none;
}
.drill-login__feature-grid article p { .drill-login__feature-grid article p {
display: none; display: none;
} }
@@ -674,6 +693,8 @@ body.drill-login {
grid-template-columns: minmax(0, 1.08fr) minmax(360px, 430px); grid-template-columns: minmax(0, 1.08fr) minmax(360px, 430px);
gap: 14px; gap: 14px;
padding: 14px; padding: 14px;
height: 100vh;
height: 100dvh;
} }
.drill-login__brand, .drill-login__brand,
@@ -728,11 +749,19 @@ body.drill-login {
line-height: 1.38; line-height: 1.38;
} }
.drill-login__brand-copy > p {
display: none;
}
.drill-login__metrics, .drill-login__metrics,
.drill-login__feature-grid { .drill-login__feature-grid {
gap: 10px; gap: 10px;
} }
.drill-login__metrics {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.drill-login__metrics div, .drill-login__metrics div,
.drill-login__feature-grid article { .drill-login__feature-grid article {
padding: 12px; padding: 12px;
@@ -763,6 +792,10 @@ body.drill-login {
display: none; display: none;
} }
.drill-login__feature-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.drill-login__panel { .drill-login__panel {
padding: 20px 18px; padding: 20px 18px;
justify-content: center; justify-content: center;
@@ -817,6 +850,132 @@ body.drill-login {
} }
} }
@media (max-width: 1440px) and (max-height: 768px) {
.drill-login__shell {
grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
gap: 12px;
padding: 12px;
height: 100vh;
height: 100dvh;
}
.drill-login__brand,
.drill-login__panel {
border-radius: 22px;
}
.drill-login__brand {
padding: 18px;
gap: 10px;
}
.drill-login__brand-orbit,
.drill-login__brand-grid,
.drill-login__panel-glow {
opacity: 0.45;
}
.drill-login__brand-orbit--two {
width: 260px;
height: 260px;
bottom: -150px;
left: -80px;
}
.drill-login__brand-mark {
width: 56px;
height: 56px;
font-size: 1.4rem;
}
.drill-login__status-pill {
min-height: 32px;
padding: 6px 10px;
font-size: 0.62rem;
}
.drill-login__eyebrow {
margin-bottom: 6px;
font-size: 0.64rem;
}
.drill-login__brand h1 {
font-size: clamp(1.7rem, 2.8vw, 2.8rem);
max-width: 11ch;
}
.drill-login__brand-copy > p,
.drill-login__metrics,
.drill-login__feature-grid article p {
display: none;
}
.drill-login__feature-grid {
gap: 8px;
}
.drill-login__feature-grid article {
padding: 10px;
border-radius: 16px;
}
.drill-login__feature-grid strong {
font-size: 0.8rem;
}
.drill-login__panel {
padding: 18px 16px;
}
.drill-login__panel-head {
margin-bottom: 14px;
}
.drill-login__panel h2 {
font-size: clamp(1.45rem, 2vw, 1.9rem);
margin-bottom: 6px;
}
.drill-login__panel-head p {
font-size: 0.8rem;
line-height: 1.35;
}
.drill-login__alert {
margin-bottom: 8px;
padding: 9px 10px;
border-radius: 14px;
font-size: 0.8rem;
}
.drill-login__form {
gap: 8px;
}
.drill-login__field label,
.drill-login__remember span,
.drill-login__field-row a {
font-size: 0.8rem;
}
.drill-login__field input {
padding: 10px 12px;
border-radius: 14px;
font-size: 0.84rem;
}
.drill-login__submit {
padding: 11px 14px;
border-radius: 16px;
font-size: 0.84rem;
}
.drill-login__footer {
margin-top: 8px;
font-size: 0.68rem;
}
}
@media (min-width: 1800px) and (min-height: 980px) { @media (min-width: 1800px) and (min-height: 980px) {
.drill-login__shell { .drill-login__shell {
grid-template-columns: minmax(0, 1.22fr) minmax(430px, 520px); grid-template-columns: minmax(0, 1.22fr) minmax(430px, 520px);