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 81639d1..f99ecd0 100644
--- a/keycloak/themes/drill-luxe/login/resources/css/drill-luxe.css
+++ b/keycloak/themes/drill-luxe/login/resources/css/drill-luxe.css
@@ -223,7 +223,7 @@ body.drill-login::before {
align-items: stretch;
}
-.drill-login__rig,
+.drill-login__signal-flow,
.drill-login__signal-list {
position: relative;
overflow: hidden;
@@ -235,55 +235,98 @@ body.drill-login::before {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
-.drill-login__rig {
+.drill-login__signal-flow {
min-height: 224px;
+ display: grid;
+ align-items: stretch;
}
-.drill-login__rig::before {
+.drill-login__signal-flow::before {
content: "";
position: absolute;
- inset: auto 24px 28px;
- height: 1px;
- background: linear-gradient(90deg, transparent, rgba(215, 161, 95, 0.7), transparent);
+ inset: 0;
+ pointer-events: none;
+ background:
+ radial-gradient(circle at 18% 24%, rgba(52, 211, 153, 0.12), transparent 28%),
+ linear-gradient(90deg, rgba(215, 161, 95, 0.08), transparent 38%, rgba(52, 211, 153, 0.08));
}
-.drill-login__rig-mast,
-.drill-login__rig-leg,
-.drill-login__rig-floor {
+.drill-login__signal-flow svg {
+ position: relative;
+ z-index: 1;
+ width: 100%;
+ height: 100%;
+ min-height: 224px;
+ padding: 16px;
+}
+
+.drill-login__signal-path {
+ fill: none;
+ stroke-linecap: round;
+ stroke-linejoin: round;
+}
+
+.drill-login__signal-path--base {
+ stroke: rgba(148, 163, 184, 0.24);
+ stroke-width: 2;
+}
+
+.drill-login__signal-path--pulse {
+ stroke: url("#signalLine");
+ stroke-width: 3;
+ stroke-dasharray: 42 280;
+ animation: drillSignalFlow 3.2s linear infinite;
+ filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.42));
+}
+
+.drill-login__signal-path--two {
+ animation-delay: -1s;
+}
+
+.drill-login__signal-path--three {
+ animation-delay: -2s;
+}
+
+.drill-login__signal-nodes circle {
+ fill: #0b1220;
+ stroke: rgba(215, 161, 95, 0.68);
+ stroke-width: 2;
+ filter: drop-shadow(0 0 8px rgba(215, 161, 95, 0.22));
+ animation: drillSignalNodePulse 2.8s ease-in-out infinite;
+}
+
+.drill-login__signal-nodes circle:nth-child(3n) {
+ stroke: rgba(52, 211, 153, 0.78);
+ animation-delay: -1.4s;
+}
+
+.drill-login__signal-flow-label {
position: absolute;
- left: 50%;
- display: block;
- background: rgba(215, 161, 95, 0.84);
- box-shadow: 0 0 18px rgba(215, 161, 95, 0.16);
+ left: 14px;
+ right: 14px;
+ bottom: 12px;
+ z-index: 2;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+ padding-top: 10px;
+ border-top: 1px solid rgba(148, 163, 184, 0.12);
}
-.drill-login__rig-mast {
- bottom: 48px;
- width: 4px;
- height: 132px;
- transform: translateX(-50%);
+.drill-login__signal-flow-label strong {
+ color: #f8fafc;
+ font-size: 0.86rem;
}
-.drill-login__rig-leg {
- bottom: 48px;
- width: 3px;
- height: 134px;
- transform-origin: bottom;
-}
-
-.drill-login__rig-leg--left {
- transform: translateX(-50%) rotate(18deg);
-}
-
-.drill-login__rig-leg--right {
- transform: translateX(-50%) rotate(-18deg);
-}
-
-.drill-login__rig-floor {
- bottom: 42px;
- width: 120px;
- height: 5px;
- transform: translateX(-50%);
+.drill-login__signal-flow-label span {
+ min-width: 0;
+ overflow: hidden;
+ color: var(--drill-muted);
+ font-size: 0.74rem;
+ text-align: right;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.drill-login__signal-list {
@@ -534,6 +577,27 @@ body.drill-login::before {
font-size: 0.78rem;
}
+@keyframes drillSignalFlow {
+ from {
+ stroke-dashoffset: 320;
+ }
+
+ to {
+ stroke-dashoffset: 0;
+ }
+}
+
+@keyframes drillSignalNodePulse {
+ 0%,
+ 100% {
+ opacity: 0.72;
+ }
+
+ 50% {
+ opacity: 1;
+ }
+}
+
@media (max-width: 1120px) {
.drill-login__shell {
grid-template-columns: 1fr;
@@ -599,7 +663,8 @@ body.drill-login::before {
min-height: 180px;
}
- .drill-login__rig {
+ .drill-login__signal-flow,
+ .drill-login__signal-flow svg {
min-height: 180px;
}