Zeusina/zeusina-keycloak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: some fixes for glassmorphism

Browse Source
This commit is contained in:
Zeusina
2026-07-01 18:51:49 +00:00
parent 76f56c1571
commit cd7211e367
3 changed files with 282 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/login/glass/GlassAmbientBackground.tsx
+53 -27
View File
@@ -10,60 +10,86 @@ export function GlassAmbientBackground({ children }: { children: React.ReactNode
<>
<div
aria-hidden="true"
className="fixed inset-0 -z-10 overflow-hidden pointer-events-none"
className="fixed inset-0 z-0 overflow-hidden pointer-events-none"
>
{/* Slow, soft color blobs */}
{/* Large, heavily blurred color blobs */}
<div
className="glass-ambient-blob"
style={{
width: "52vw",
height: "52vw",
left: "-12vw",
top: "-12vh",
width: "70vw",
height: "70vw",
left: "-22vw",
top: "-18vh",
background: "var(--glass-ambient-1)",
animationDuration: "24s",
animationDelay: "-5s"
animationDuration: "30s",
animationDelay: "-6s"
}}
/>
<div
className="glass-ambient-blob"
style={{
width: "44vw",
height: "44vw",
right: "-8vw",
top: "8vh",
width: "60vw",
height: "60vw",
right: "-16vw",
top: "2vh",
background: "var(--glass-ambient-2)",
animationDuration: "28s",
animationDelay: "-12s"
animationDuration: "34s",
animationDelay: "-14s"
}}
/>
<div
className="glass-ambient-blob"
style={{
width: "38vw",
height: "38vw",
left: "18vw",
bottom: "-12vh",
width: "55vw",
height: "55vw",
left: "10vw",
bottom: "-20vh",
background: "var(--glass-ambient-3)",
animationDuration: "32s",
animationDelay: "-8s"
animationDuration: "38s",
animationDelay: "-10s"
}}
/>
<div
className="glass-ambient-blob"
style={{
width: "34vw",
height: "34vw",
right: "14vw",
bottom: "4vh",
width: "48vw",
height: "48vw",
right: "6vw",
bottom: "-8vh",
background: "var(--glass-ambient-4)",
animationDuration: "26s",
animationDuration: "32s",
animationDelay: "-22s"
}}
/>
{/* Long flowing aurora bands */}
<div
className="glass-ambient-aurora"
style={{
width: "80vw",
height: "30vh",
left: "-10vw",
top: "35vh",
background: "var(--glass-ambient-5)",
animationDuration: "40s",
animationDelay: "-4s"
}}
/>
<div
className="glass-ambient-aurora"
style={{
width: "70vw",
height: "24vh",
right: "-12vw",
bottom: "25vh",
background: "var(--glass-ambient-6)",
animationDuration: "44s",
animationDelay: "-18s"
}}
/>
{/* Sharper mesh layer so the glass has defined shapes to refract */}
<div className="glass-ambient-mesh" />
{/* Soft vignette to focus attention on the card */}
<div className="glass-vignette" />
</div>
{children}
</>
src/login/glass/glass-theme.css
+96 -33
View File
@@ -24,11 +24,16 @@
--glass-shadow: 0 14px 44px hsla(220 40% 16% / 0.18);
--glass-shadow-elevated: 0 24px 64px hsla(220 40% 12% / 0.24);
/* Ambient background blobs — saturated and fairly opaque so the glass has something to refract */
--glass-ambient-1: hsla(250 85% 62% / 0.55);
--glass-ambient-2: hsla(320 80% 58% / 0.5);
--glass-ambient-3: hsla(190 90% 52% / 0.48);
--glass-ambient-4: hsla(40 95% 58% / 0.42);
/*
* Soft ambient background palette.
* Pastel, heavily blurred blobs for a calm liquid-glass feeling.
*/
--glass-ambient-1: hsla(250 90% 70% / 0.45);
--glass-ambient-2: hsla(320 85% 68% / 0.4);
--glass-ambient-3: hsla(190 90% 62% / 0.38);
--glass-ambient-4: hsla(40 95% 65% / 0.34);
--glass-ambient-5: hsla(140 80% 60% / 0.26);
--glass-ambient-6: hsla(10 90% 66% / 0.3);
/* Text stability on busy backgrounds */
--glass-text-shadow: 0 1px 2px hsla(0 0% 0% / 0.1);
@@ -45,11 +50,13 @@
--glass-shadow: 0 14px 44px hsla(0 0% 0% / 0.45);
--glass-shadow-elevated: 0 24px 64px hsla(0 0% 0% / 0.55);
/* Dark-mode blobs: still vivid but not overwhelming */
--glass-ambient-1: hsla(250 85% 58% / 0.4);
--glass-ambient-2: hsla(320 80% 55% / 0.36);
--glass-ambient-3: hsla(190 90% 50% / 0.36);
--glass-ambient-4: hsla(40 95% 55% / 0.3);
/* Dark-mode blobs: vivid enough to refract, soft enough to not distract */
--glass-ambient-1: hsla(250 90% 58% / 0.38);
--glass-ambient-2: hsla(320 85% 56% / 0.34);
--glass-ambient-3: hsla(190 90% 54% / 0.32);
--glass-ambient-4: hsla(40 95% 58% / 0.28);
--glass-ambient-5: hsla(140 80% 50% / 0.22);
--glass-ambient-6: hsla(10 90% 58% / 0.26);
--glass-text-shadow: 0 1px 3px hsla(0 0% 0% / 0.4);
}
@@ -126,6 +133,37 @@
);
}
/* Dark mode card sheen — cool tinted gradient instead of a white glare */
@media (prefers-color-scheme: dark) {
.glass {
background: linear-gradient(
145deg,
hsla(220 30% 26% / 0.35) 0%,
hsla(220 20% 12% / 0.12) 55%,
hsla(220 30% 22% / 0.28) 100%
),
var(--glass-bg);
box-shadow:
inset 0 1px 0 0 var(--glass-border-highlight),
inset 0 0 0 1px hsla(0 0% 100% / 0.05),
var(--glass-shadow);
}
.glass-solid {
background: linear-gradient(
145deg,
hsla(220 30% 22% / 0.3) 0%,
hsla(220 20% 10% / 0.08) 55%,
hsla(220 30% 18% / 0.22) 100%
),
var(--glass-bg-solid);
box-shadow:
inset 0 1px 0 0 var(--glass-border-highlight),
inset 0 0 0 1px hsla(0 0% 100% / 0.05),
var(--glass-shadow);
}
}
/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(12px)) {
.glass {
@@ -140,14 +178,18 @@
}
}
/* Ambient background blobs — keep some definition so the glass can refract them */
/*
* Ambient background blobs.
* Huge, very soft, slowly drifting color clouds.
* The heavy blur makes them feel like liquid light.
*/
.glass-ambient-blob {
position: absolute;
border-radius: 50%;
filter: blur(44px);
filter: blur(90px);
opacity: 0.85;
will-change: transform, opacity;
animation: glass-float 20s ease-in-out infinite alternate;
animation: glass-float 28s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
@@ -159,47 +201,68 @@
@keyframes glass-float {
0% {
transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
}
100% {
transform: translate3d(30px, -40px, 0) scale(1.15);
transform: translate3d(60px, -70px, 0) scale(1.22) rotate(12deg);
}
}
/* Extra mesh layer behind the card: sharper color bands for stronger refraction */
.glass-ambient-mesh {
/*
* Aurora-like flowing gradient bands.
* Long, elliptical, heavily blurred shapes that drift across the screen.
*/
.glass-ambient-aurora {
position: absolute;
inset: 0;
border-radius: 50%;
filter: blur(110px);
opacity: 0.7;
background: radial-gradient(
circle at 20% 30%,
var(--glass-ambient-1) 0%,
transparent 45%
),
radial-gradient(circle at 80% 20%, var(--glass-ambient-2) 0%, transparent 40%),
radial-gradient(circle at 60% 80%, var(--glass-ambient-3) 0%, transparent 45%),
radial-gradient(circle at 30% 75%, var(--glass-ambient-4) 0%, transparent 40%);
filter: blur(28px);
will-change: transform;
animation: glass-mesh-drift 30s ease-in-out infinite alternate;
pointer-events: none;
animation: glass-aurora-drift 36s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
.glass-ambient-mesh {
.glass-ambient-aurora {
animation: none;
opacity: 0.5;
}
}
@keyframes glass-mesh-drift {
@keyframes glass-aurora-drift {
0% {
transform: scale(1) translate3d(0, 0, 0);
transform: translate3d(0, 0, 0) scale(1) rotate(-6deg);
}
100% {
transform: scale(1.08) translate3d(-20px, 10px, 0);
transform: translate3d(-80px, 40px, 0) scale(1.18) rotate(8deg);
}
}
/*
* Subtle vignette overlay.
* Darkens the edges so the eye is drawn to the glass card in the center.
*/
.glass-vignette {
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(
ellipse at center,
transparent 0%,
transparent 50%,
hsla(0 0% 0% / 0.06) 100%
);
}
@media (prefers-color-scheme: dark) {
.glass-vignette {
background: radial-gradient(
ellipse at center,
transparent 0%,
transparent 45%,
hsla(0 0% 0% / 0.35) 100%
);
}
}
src/login/tailwind.css
+133 -25
View File
@@ -31,6 +31,14 @@
--color-glass-border: var(--glass-border);
--color-glass-shadow: var(--glass-shadow);
/* Alert/status tokens */
--color-info: var(--info);
--color-info-foreground: var(--info-foreground);
--color-success: var(--success);
--color-success-foreground: var(--success-foreground);
--color-warning: var(--warning);
--color-warning-foreground: var(--warning-foreground);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
@@ -55,11 +63,20 @@
--accent-foreground: hsl(222.2 47.4% 11.2%);
--destructive: hsl(0 84.2% 60.2%);
--destructive-foreground: hsl(210 40% 98%);
--border: hsl(214.3 31.8% 91.4%);
--input: hsl(214.3 31.8% 91.4%);
/* Darker border for better visibility on light glass backgrounds */
--border: hsl(214.3 25% 78%);
--input: hsl(214.3 25% 78%);
--ring: hsl(222.2 84% 4.9%);
--radius: 0.625rem;
/* Status colors */
--info: hsl(210 80% 52%);
--info-foreground: hsl(210 40% 98%);
--success: hsl(142 76% 36%);
--success-foreground: hsl(210 40% 98%);
--warning: hsl(38 92% 50%);
--warning-foreground: hsl(210 40% 98%);
/* Page gradient visible behind the glass card */
--page-bg-gradient: linear-gradient(
135deg,
@@ -85,12 +102,20 @@
--muted-foreground: hsl(215 20.2% 65.1%);
--accent: hsl(217.2 32.6% 17.5%);
--accent-foreground: hsl(210 40% 98%);
--destructive: hsl(0 62.8% 30.6%);
--destructive: hsl(0 72% 58%);
--destructive-foreground: hsl(210 40% 98%);
--border: hsl(217.2 32.6% 17.5%);
--input: hsl(217.2 32.6% 17.5%);
/* Lighter border so dividers remain visible on dark glass backgrounds */
--border: hsl(217.2 25% 34%);
--input: hsl(217.2 25% 34%);
--ring: hsl(212.7 26.8% 83.9%);
--info: hsl(210 80% 62%);
--info-foreground: hsl(222 47% 6%);
--success: hsl(142 70% 50%);
--success-foreground: hsl(222 47% 6%);
--warning: hsl(38 92% 58%);
--warning-foreground: hsl(222 47% 6%);
--page-bg-gradient: linear-gradient(
135deg,
hsl(222 47% 6%) 0%,
@@ -371,24 +396,41 @@
#kc-current-locale-link {
display: inline-flex;
align-items: center;
gap: 0.25rem;
gap: 0.35rem;
height: 2rem;
border-radius: 9999px;
border: 1px solid var(--color-border);
background: var(--color-background);
padding: 0 0.5rem;
border: 1px solid var(--glass-border);
background: var(--glass-bg);
box-shadow:
inset 0 1px 0 0 var(--glass-border-highlight),
0 1px 2px hsla(0 0% 0% / 0.05);
padding: 0 0.65rem;
font-size: 0.75rem;
font-weight: 500;
color: var(--color-muted-foreground);
color: var(--color-foreground);
cursor: pointer;
transition:
border-color 150ms ease,
background-color 150ms ease;
background-color 150ms ease,
box-shadow 150ms ease;
}
#kc-current-locale-link::after {
content: "";
width: 0.4rem;
height: 0.4rem;
border: solid currentColor;
border-width: 0 1.5px 1.5px 0;
transform: rotate(45deg) translateY(-2px);
opacity: 0.7;
}
#kc-current-locale-link:hover,
#kc-current-locale-link[aria-expanded="true"] {
background: var(--color-muted);
background: var(--glass-bg-solid);
box-shadow:
inset 0 1px 0 0 var(--glass-border-highlight),
0 2px 4px hsla(0 0% 0% / 0.08);
}
.kcLocaleListClass {
@@ -450,10 +492,86 @@
.alert-error.kcAlertClass,
.pf-m-danger.kcAlertClass {
border-color: var(--color-destructive);
background: color-mix(in oklab, var(--color-destructive) 10%, transparent);
background: color-mix(in oklab, var(--color-destructive) 12%, transparent);
color: var(--color-destructive);
}
.pf-m-info.kcAlertClass {
border-color: var(--color-info);
background: color-mix(in oklab, var(--color-info) 12%, transparent);
color: var(--color-info);
}
.pf-m-success.kcAlertClass {
border-color: var(--color-success);
background: color-mix(in oklab, var(--color-success) 12%, transparent);
color: var(--color-success);
}
.pf-m-warning.kcAlertClass {
border-color: var(--color-warning);
background: color-mix(in oklab, var(--color-warning) 12%, transparent);
color: var(--color-warning);
}
/* Info/error page message boxes.
Only the .instruction paragraph is highlighted; action links stay plain. */
#kc-info-message,
#kc-error-message {
display: grid;
gap: 0.875rem;
}
#kc-info-message .instruction,
#kc-error-message .instruction {
margin: 0;
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
border-left-width: 4px;
padding: 0.875rem 1rem;
font-size: 0.875rem;
line-height: 1.5;
}
#kc-info-message .instruction {
border-color: var(--color-info);
border-left-color: var(--color-info);
background: color-mix(in oklab, var(--color-info) 10%, transparent);
color: var(--color-info);
}
#kc-error-message .instruction {
border-color: var(--color-destructive);
border-left-color: var(--color-destructive);
background: color-mix(in oklab, var(--color-destructive) 14%, transparent);
color: var(--color-destructive);
font-weight: 500;
}
@media (prefers-color-scheme: dark) {
#kc-error-message .instruction {
background: color-mix(in oklab, var(--color-destructive) 24%, transparent);
color: var(--color-destructive-foreground);
}
}
#kc-info-message p:not(.instruction),
#kc-error-message p:not(.instruction) {
margin: 0;
}
#kc-info-message a,
#kc-error-message a {
color: var(--color-primary);
text-decoration: none;
font-weight: 500;
}
#kc-info-message a:hover,
#kc-error-message a:hover {
text-decoration: underline;
}
.kcFormSocialAccountListButtonClass {
display: flex;
align-items: center;
@@ -818,7 +936,7 @@
content: "";
flex: 1;
height: 1px;
background: var(--color-border);
background: color-mix(in oklab, var(--color-border) 70%, var(--color-foreground));
}
.kcCommonLogoIdP {
@@ -864,17 +982,7 @@
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23FC3F1D%22%20d%3D%22M16.376%2012.644L21%202h-3.842l-4.624%2010.644h3.842zM13.915%2024v-3.733c0-2.822-.352-3.64-1.407-5.988L6.933%202H3l7.124%2015.709V24h3.79z%22%2F%3E%3C%2Fsvg%3E");
}
#social-yandex.kcFormSocialAccountListButtonClass::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
flex: 0 0 18px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23FC3F1D%22%20d%3D%22M16.376%2012.644L21%202h-3.842l-4.624%2010.644h3.842zM13.915%2024v-3.733c0-2.822-.352-3.64-1.407-5.988L6.933%202H3l7.124%2015.709V24h3.79z%22%2F%3E%3C%2Fsvg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
/* Yandex icon is rendered by .kcCommonLogoIdP::before above; no extra pseudo-element needed. */
#social-vk .kcCommonLogoIdP::before,
#social-vkontakte .kcCommonLogoIdP::before {