diff --git a/keycloak/themes/drill-luxe/login/resources/css/drill-luxe.css b/keycloak/themes/drill-luxe/login/resources/css/drill-luxe.css index 36638f7..80492d3 100644 --- a/keycloak/themes/drill-luxe/login/resources/css/drill-luxe.css +++ b/keycloak/themes/drill-luxe/login/resources/css/drill-luxe.css @@ -562,9 +562,15 @@ body.drill-login { } @media (max-height: 900px) { + body.drill-login { + overflow: hidden; + } + .drill-login__shell { gap: 16px; padding: 16px; + height: 100vh; + height: 100dvh; } .drill-login__brand, @@ -633,13 +639,26 @@ body.drill-login { .drill-login__submit { padding: 14px 16px; } + + .drill-login__feature-grid article p:last-child { + display: none; + } } @media (max-height: 760px) { + .drill-login__shell { + height: 100vh; + height: 100dvh; + } + .drill-login__brand-copy p { display: none; } + .drill-login__metrics { + display: none; + } + .drill-login__feature-grid article p { display: none; } @@ -674,6 +693,8 @@ body.drill-login { grid-template-columns: minmax(0, 1.08fr) minmax(360px, 430px); gap: 14px; padding: 14px; + height: 100vh; + height: 100dvh; } .drill-login__brand, @@ -728,11 +749,19 @@ body.drill-login { line-height: 1.38; } + .drill-login__brand-copy > p { + display: none; + } + .drill-login__metrics, .drill-login__feature-grid { gap: 10px; } + .drill-login__metrics { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + .drill-login__metrics div, .drill-login__feature-grid article { padding: 12px; @@ -763,6 +792,10 @@ body.drill-login { display: none; } + .drill-login__feature-grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + .drill-login__panel { padding: 20px 18px; 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) { .drill-login__shell { grid-template-columns: minmax(0, 1.22fr) minmax(430px, 520px);