Refined UI using a completely reconstructed Glassmorphism aesthetic and modern UX updates. Updated support for up to 26.3.
This commit is contained in:
Miguel Villegas
2026-04-20 15:21:23 -05:00
parent ea06488810
commit 7ff6b67362
4 changed files with 1017 additions and 690 deletions
+44 -64
View File
@@ -1,19 +1,7 @@
/*
NOTE: This is just an experiment and
could use some changes to improve performance:
/* VIP Aurora Stripes Background */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');
https://x.com/actualTimWilson/status/1730753841795158313
See a production optimized version here: https://charmui.com
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
body {
font-family: Inter, sans-serif;
}
@keyframes jumbo {
@keyframes aurora {
from {
background-position: 50% 50%, 50% 50%;
}
@@ -22,55 +10,52 @@ body {
}
}
/* New Styles for Form Isolation */
.box-main {
position: relative;
z-index: 1;
z-index: 10;
}
.jumbo {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
inset: 0;
width: 100vw;
height: 100vh;
z-index: 0;
}
pointer-events: none;
--stripes: repeating-linear-gradient(
100deg,
#fff 0%,
#fff 7%,
transparent 10%,
transparent 12%,
#fff 16%
);
--stripesDark: repeating-linear-gradient(
100deg,
#000 0%,
#000 7%,
transparent 10%,
transparent 12%,
#000 16%
);
--rainbow: repeating-linear-gradient(
100deg,
#60a5fa 10%,
#e879f9 15%,
#60a5fa 20%,
#5eead4 25%,
#60a5fa 30%
);
.jumbo {
--stripes: repeating-linear-gradient(
100deg,
#fff 0%,
#fff 7%,
transparent 10%,
transparent 12%,
#fff 16%
);
--stripesDark: repeating-linear-gradient(
100deg,
#000 0%,
#000 7%,
transparent 10%,
transparent 12%,
#000 16%
);
--rainbow: repeating-linear-gradient(
100deg,
#60a5fa 10%,
#e879f9 15%,
#60a5fa 20%,
#5eead4 25%,
#60a5fa 30%
);
background-image: var(--stripes), var(--rainbow);
background-size: 300%, 200%;
background-position: 50% 50%, 50% 50%;
filter: blur(10px) invert(100%);
mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
pointer-events: none;
mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
background-image: var(--stripes), var(--rainbow);
background-size: 300%, 200%;
background-position: 50% 50%, 50% 50%;
filter: blur(15px) invert(100%);
opacity: 0.9;
}
.jumbo::after {
@@ -79,20 +64,15 @@ body {
inset: 0;
background-image: var(--stripes), var(--rainbow);
background-size: 200%, 100%;
animation: jumbo 60s linear infinite;
background-attachment: fixed;
animation: aurora 40s linear infinite;
mix-blend-mode: difference;
}
.dark .jumbo {
background-image: var(--stripesDark), var(--rainbow);
filter: blur(10px) opacity(50%) saturate(200%);
filter: blur(15px) opacity(60%) saturate(200%);
}
.dark .jumbo::after {
background-image: var(--stripesDark), var(--rainbow);
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255);
}