Refine 'drill-luxe' Keycloak theme with enhanced brand mark styling
- Updated the brand mark in the login template to improve visual hierarchy and accessibility. - Added new CSS styles for brand mark components, including core, bar, and ring elements, to enhance the overall aesthetic. - Implemented overflow hidden to maintain layout integrity within the login interface.
This commit is contained in:
@@ -20,7 +20,11 @@
|
||||
<div class="drill-login__brand-orbit drill-login__brand-orbit--two"></div>
|
||||
<div class="drill-login__brand-grid"></div>
|
||||
<div class="drill-login__brand-top">
|
||||
<div class="drill-login__brand-mark">D</div>
|
||||
<div class="drill-login__brand-mark" aria-hidden="true">
|
||||
<span class="drill-login__brand-mark-core">D</span>
|
||||
<span class="drill-login__brand-mark-bar"></span>
|
||||
<span class="drill-login__brand-mark-ring"></span>
|
||||
</div>
|
||||
<div class="drill-login__status-pill">Industrial Intelligence Suite</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -165,6 +165,35 @@ body.drill-login {
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.08),
|
||||
0 18px 40px rgba(185, 106, 51, 0.18);
|
||||
animation: drillMarkGlow 8s ease-in-out infinite;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.drill-login__brand-mark-core,
|
||||
.drill-login__brand-mark-bar,
|
||||
.drill-login__brand-mark-ring {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.drill-login__brand-mark-core {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.drill-login__brand-mark-bar {
|
||||
right: 14px;
|
||||
top: 16px;
|
||||
width: 8px;
|
||||
height: 46px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, rgba(255, 241, 223, 0.88), rgba(210, 161, 112, 0.25));
|
||||
box-shadow: 0 0 18px rgba(239, 214, 180, 0.24);
|
||||
}
|
||||
|
||||
.drill-login__brand-mark-ring {
|
||||
inset: 8px;
|
||||
border-radius: 22px;
|
||||
border: 1px solid rgba(255, 241, 223, 0.12);
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
.drill-login__status-pill {
|
||||
|
||||
Reference in New Issue
Block a user