change design login page
This commit is contained in:
Randa Firman Putra
181
app/globals.css
181
app/globals.css
@@ -3,6 +3,37 @@
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
/* Custom properties for gradient animation */
|
||||
@property --bg-1-x {
|
||||
syntax: "<number>";
|
||||
inherits: true;
|
||||
initial-value: 25;
|
||||
}
|
||||
|
||||
@property --bg-2-x {
|
||||
syntax: "<number>";
|
||||
inherits: true;
|
||||
initial-value: 35;
|
||||
}
|
||||
|
||||
@property --bg-2-y {
|
||||
syntax: "<number>";
|
||||
inherits: true;
|
||||
initial-value: 40;
|
||||
}
|
||||
|
||||
@property --bg-3-x {
|
||||
syntax: "<number>";
|
||||
inherits: true;
|
||||
initial-value: 45;
|
||||
}
|
||||
|
||||
@property --bg-3-y {
|
||||
syntax: "<number>";
|
||||
inherits: true;
|
||||
initial-value: 20;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
@@ -120,3 +151,153 @@
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
/* Gradient text animation keyframes */
|
||||
@keyframes gradient-bg-animate {
|
||||
0% {
|
||||
--bg-1-x: 25;
|
||||
--bg-2-y: 40;
|
||||
--bg-2-x: 35;
|
||||
--bg-3-y: 20;
|
||||
--bg-3-x: 45;
|
||||
}
|
||||
|
||||
25% {
|
||||
--bg-1-x: 30;
|
||||
--bg-2-y: 50;
|
||||
--bg-2-x: 80;
|
||||
--bg-3-y: 20;
|
||||
--bg-3-x: 70;
|
||||
}
|
||||
|
||||
50% {
|
||||
--bg-1-x: 10;
|
||||
--bg-2-y: 40;
|
||||
--bg-2-x: 30;
|
||||
--bg-3-y: 80;
|
||||
--bg-3-x: 50;
|
||||
}
|
||||
|
||||
75% {
|
||||
--bg-1-x: 70;
|
||||
--bg-2-y: 10;
|
||||
--bg-2-x: 50;
|
||||
--bg-3-y: 30;
|
||||
--bg-3-x: 40;
|
||||
}
|
||||
|
||||
100% {
|
||||
--bg-1-x: 25;
|
||||
--bg-2-y: 40;
|
||||
--bg-2-x: 35;
|
||||
--bg-3-y: 20;
|
||||
--bg-3-x: 45;
|
||||
}
|
||||
}
|
||||
|
||||
/* Gradient text utility class */
|
||||
.gradient-text-animated {
|
||||
background-image:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
#ffffff 0%,
|
||||
#3b82f6 12%,
|
||||
#10b981 24%,
|
||||
#f59e0b 36%,
|
||||
#ef4444 48%,
|
||||
#8b5cf6 60%,
|
||||
#06b6d4 72%,
|
||||
#ec4899 84%,
|
||||
#ffffff 100%
|
||||
);
|
||||
background-size: 300% 300%;
|
||||
background-position: calc(var(--bg-1-x) * 2%) 50%;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: gradient-bg-animate 20s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
/* Glass effect with grain texture */
|
||||
.glass-effect {
|
||||
background: rgba(30, 41, 59, 0.7);
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow:
|
||||
0 8px 32px 0 rgba(0, 0, 0, 0.37),
|
||||
inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.glass-effect::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
|
||||
background-size: 200px;
|
||||
opacity: 0.03;
|
||||
pointer-events: none;
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
|
||||
/* Glass input field */
|
||||
.glass-input {
|
||||
background: rgba(15, 23, 42, 0.5);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.glass-input:focus {
|
||||
background: rgba(15, 23, 42, 0.7);
|
||||
border-color: rgba(59, 130, 246, 0.5);
|
||||
box-shadow:
|
||||
0 0 0 3px rgba(59, 130, 246, 0.1),
|
||||
inset 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Glass button */
|
||||
.glass-button {
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.7), rgba(37, 99, 235, 0.8));
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(59, 130, 246, 0.3);
|
||||
box-shadow:
|
||||
0 2px 8px rgba(59, 130, 246, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.glass-button:hover:not(:disabled) {
|
||||
background: linear-gradient(135deg, rgba(37, 99, 235, 0.8), rgba(29, 78, 216, 0.9));
|
||||
box-shadow:
|
||||
0 4px 12px rgba(59, 130, 246, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.glass-button:disabled {
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.4), rgba(37, 99, 235, 0.5));
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Glass tab button */
|
||||
.glass-tab {
|
||||
background: rgba(15, 23, 42, 0.3);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.glass-tab-active {
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.6), rgba(37, 99, 235, 0.7));
|
||||
border-color: rgba(59, 130, 246, 0.3);
|
||||
box-shadow:
|
||||
0 2px 8px rgba(59, 130, 246, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user