Enhance 'drill-luxe' Keycloak theme with new animations and hover effects
- Added multiple animations to various elements for a more engaging user experience, including background shifts and glowing effects. - Implemented hover effects for metrics and feature grid items to improve interactivity. - Introduced transitions for smoother visual feedback on link interactions. - Updated CSS keyframes for enhanced visual dynamics across the login interface.
This commit is contained in:
Первов Артем
@@ -37,6 +37,7 @@ body.drill-login {
|
||||
radial-gradient(circle at 80% 82%, rgba(109, 70, 37, 0.34), transparent 26%),
|
||||
linear-gradient(145deg, #06070a 0%, #0a0d12 30%, #111622 68%, #171d29 100%);
|
||||
background-attachment: fixed;
|
||||
animation: drillBackgroundShift 18s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.drill-login__shell {
|
||||
@@ -59,6 +60,7 @@ body.drill-login {
|
||||
rgba(10, 13, 18, 0.72);
|
||||
box-shadow: var(--drill-shadow-lg), var(--drill-shadow-glow);
|
||||
backdrop-filter: blur(28px);
|
||||
animation: drillFadeUp 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
|
||||
}
|
||||
|
||||
.drill-login__brand {
|
||||
@@ -104,6 +106,7 @@ body.drill-login {
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(239, 214, 180, 0.08);
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
|
||||
animation: drillOrbitFloat 16s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.drill-login__brand-orbit--one {
|
||||
@@ -112,6 +115,7 @@ body.drill-login {
|
||||
top: -90px;
|
||||
right: 18%;
|
||||
transform: rotate(-18deg);
|
||||
animation-duration: 14s;
|
||||
}
|
||||
|
||||
.drill-login__brand-orbit--two {
|
||||
@@ -120,6 +124,8 @@ body.drill-login {
|
||||
bottom: -240px;
|
||||
left: -120px;
|
||||
opacity: 0.45;
|
||||
animation-duration: 22s;
|
||||
animation-direction: alternate-reverse;
|
||||
}
|
||||
|
||||
.drill-login__brand-grid {
|
||||
@@ -130,6 +136,7 @@ body.drill-login {
|
||||
background-size: 72px 72px;
|
||||
mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0.6), transparent 70%);
|
||||
opacity: 0.35;
|
||||
animation: drillGridDrift 26s linear infinite;
|
||||
}
|
||||
|
||||
.drill-login__brand-top {
|
||||
@@ -157,6 +164,7 @@ body.drill-login {
|
||||
box-shadow:
|
||||
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;
|
||||
}
|
||||
|
||||
.drill-login__status-pill {
|
||||
@@ -234,6 +242,11 @@ body.drill-login {
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
|
||||
rgba(255, 255, 255, 0.012);
|
||||
border: 1px solid rgba(210, 161, 112, 0.12);
|
||||
transition:
|
||||
transform 220ms ease,
|
||||
border-color 220ms ease,
|
||||
box-shadow 220ms ease,
|
||||
background 220ms ease;
|
||||
}
|
||||
|
||||
.drill-login__metrics div::before {
|
||||
@@ -246,6 +259,15 @@ body.drill-login {
|
||||
background: linear-gradient(90deg, var(--drill-accent-secondary), transparent);
|
||||
}
|
||||
|
||||
.drill-login__metrics div:hover {
|
||||
transform: translateY(-3px);
|
||||
border-color: rgba(239, 214, 180, 0.2);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
|
||||
rgba(255, 255, 255, 0.016);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
.drill-login__metrics strong {
|
||||
display: block;
|
||||
margin: 8px 0 10px;
|
||||
@@ -280,6 +302,11 @@ body.drill-login {
|
||||
border-radius: 26px;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.015));
|
||||
border: 1px solid rgba(210, 161, 112, 0.12);
|
||||
transition:
|
||||
transform 220ms ease,
|
||||
border-color 220ms ease,
|
||||
background 220ms ease,
|
||||
box-shadow 220ms ease;
|
||||
}
|
||||
|
||||
.drill-login__feature-grid article::after {
|
||||
@@ -290,6 +317,13 @@ body.drill-login {
|
||||
background: linear-gradient(90deg, rgba(239, 214, 180, 0.18), transparent);
|
||||
}
|
||||
|
||||
.drill-login__feature-grid article:hover {
|
||||
transform: translateY(-3px);
|
||||
border-color: rgba(239, 214, 180, 0.2);
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.018));
|
||||
box-shadow: 0 22px 42px rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
.drill-login__feature-grid span {
|
||||
display: inline-block;
|
||||
color: var(--drill-accent-secondary);
|
||||
@@ -326,6 +360,7 @@ body.drill-login {
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(239, 214, 180, 0.12), transparent 68%);
|
||||
filter: blur(10px);
|
||||
animation: drillGlowPulse 10s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.drill-login__panel-head {
|
||||
@@ -397,6 +432,12 @@ body.drill-login {
|
||||
.drill-login__field-row a {
|
||||
color: var(--drill-accent-secondary);
|
||||
text-decoration: none;
|
||||
transition: color 180ms ease, opacity 180ms ease;
|
||||
}
|
||||
|
||||
.drill-login__field-row a:hover {
|
||||
color: var(--drill-accent-tertiary);
|
||||
opacity: 0.96;
|
||||
}
|
||||
|
||||
.drill-login__field input {
|
||||
@@ -494,6 +535,116 @@ body.drill-login {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@keyframes drillFadeUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(18px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes drillOrbitFloat {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0) rotate(-18deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate3d(8px, -10px, 0) rotate(-12deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(-6px, 6px, 0) rotate(-22deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes drillGridDrift {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(24px, 18px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes drillGlowPulse {
|
||||
0% {
|
||||
opacity: 0.45;
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.72;
|
||||
transform: scale(1.04);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.5;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes drillMarkGlow {
|
||||
0% {
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.08),
|
||||
0 18px 40px rgba(185, 106, 51, 0.18);
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1),
|
||||
0 22px 46px rgba(185, 106, 51, 0.24);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.08),
|
||||
0 18px 40px rgba(185, 106, 51, 0.18);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes drillBackgroundShift {
|
||||
0% {
|
||||
background-position:
|
||||
0% 0%,
|
||||
0% 0%,
|
||||
0% 0%,
|
||||
0% 0%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position:
|
||||
2% -1%,
|
||||
-2% 1%,
|
||||
1% 2%,
|
||||
0% 0%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
body.drill-login,
|
||||
.drill-login__brand,
|
||||
.drill-login__panel,
|
||||
.drill-login__brand-orbit,
|
||||
.drill-login__brand-grid,
|
||||
.drill-login__brand-mark,
|
||||
.drill-login__panel-glow {
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
.drill-login__metrics div,
|
||||
.drill-login__feature-grid article,
|
||||
.drill-login__submit,
|
||||
.drill-login__field-row a {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.drill-login__shell {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
Reference in New Issue
Block a user