Enhance 'drill-luxe' Keycloak theme with additional responsive styles

- Introduced new media queries for improved layout on specific screen sizes, enhancing user experience across devices.
- Updated CSS properties for various elements, including padding, font sizes, and grid layouts, to ensure better adaptability and visual consistency.
- Refined styles for brand, panel, and form components to improve aesthetics and usability in the login interface.
This commit is contained in:
Первов Артем
2026-04-08 12:46:41 +03:00
parent 9333eb327c
commit 1c89d9591d

View File

@@ -665,6 +665,216 @@ body.drill-login {
} }
} }
@media (min-width: 1280px) and (max-width: 1440px) and (max-height: 820px) {
body.drill-login {
overflow: hidden;
}
.drill-login__shell {
grid-template-columns: minmax(0, 1.08fr) minmax(360px, 430px);
gap: 14px;
padding: 14px;
}
.drill-login__brand,
.drill-login__panel {
border-radius: 24px;
}
.drill-login__brand {
padding: 20px;
gap: 12px;
}
.drill-login__brand-top {
gap: 12px;
}
.drill-login__brand-mark {
width: 60px;
height: 60px;
border-radius: 20px;
font-size: 1.55rem;
}
.drill-login__brand-mark-bar {
top: 13px;
right: 12px;
height: 34px;
}
.drill-login__status-pill {
min-height: 34px;
padding: 7px 12px;
font-size: 0.66rem;
letter-spacing: 0.14em;
}
.drill-login__eyebrow {
margin-bottom: 8px;
font-size: 0.68rem;
}
.drill-login__brand h1 {
font-size: clamp(1.9rem, 3.2vw, 3.2rem);
line-height: 0.92;
max-width: 12ch;
}
.drill-login__brand p,
.drill-login__panel p,
.drill-login__feature-grid p {
font-size: 0.82rem;
line-height: 1.38;
}
.drill-login__metrics,
.drill-login__feature-grid {
gap: 10px;
}
.drill-login__metrics div,
.drill-login__feature-grid article {
padding: 12px;
border-radius: 18px;
}
.drill-login__metrics strong {
margin: 4px 0 6px;
font-size: 0.92rem;
}
.drill-login__metrics span {
font-size: 0.77rem;
line-height: 1.32;
}
.drill-login__feature-grid span {
margin-bottom: 6px;
font-size: 0.72rem;
}
.drill-login__feature-grid strong {
margin-bottom: 0;
font-size: 0.84rem;
}
.drill-login__feature-grid article p {
display: none;
}
.drill-login__panel {
padding: 20px 18px;
justify-content: center;
}
.drill-login__panel-head {
margin-bottom: 16px;
}
.drill-login__panel h2 {
font-size: clamp(1.55rem, 2.3vw, 2.1rem);
margin-bottom: 8px;
}
.drill-login__alert {
margin-bottom: 10px;
padding: 10px 12px;
border-radius: 16px;
font-size: 0.84rem;
}
.drill-login__form {
gap: 10px;
}
.drill-login__field {
gap: 5px;
}
.drill-login__field label,
.drill-login__remember span,
.drill-login__field-row a {
font-size: 0.84rem;
}
.drill-login__field input {
padding: 12px 14px;
border-radius: 16px;
font-size: 0.88rem;
}
.drill-login__submit {
margin-top: 2px;
padding: 13px 16px;
border-radius: 18px;
font-size: 0.88rem;
}
.drill-login__footer {
margin-top: 10px;
font-size: 0.72rem;
}
}
@media (min-width: 1800px) and (min-height: 980px) {
.drill-login__shell {
grid-template-columns: minmax(0, 1.22fr) minmax(430px, 520px);
gap: 22px;
padding: 22px;
}
.drill-login__brand {
padding: 34px;
gap: 20px;
}
.drill-login__brand h1 {
font-size: clamp(3rem, 4.1vw, 4.6rem);
max-width: 13ch;
}
.drill-login__brand p,
.drill-login__panel p,
.drill-login__feature-grid p {
font-size: 0.93rem;
line-height: 1.5;
}
.drill-login__metrics div,
.drill-login__feature-grid article {
padding: 16px;
}
.drill-login__metrics strong {
font-size: 1.04rem;
}
.drill-login__metrics span {
font-size: 0.84rem;
}
.drill-login__feature-grid strong {
font-size: 0.92rem;
}
.drill-login__panel {
padding: 28px;
}
.drill-login__panel h2 {
font-size: clamp(2rem, 2.4vw, 2.6rem);
}
.drill-login__field input {
padding: 13px 16px;
}
.drill-login__submit {
padding: 14px 18px;
}
}
.drill-login__footer a { .drill-login__footer a {
color: var(--drill-accent-secondary); color: var(--drill-accent-secondary);
text-decoration: none; text-decoration: none;