Oscloud/web-mxchat
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

design: add glow effects, noise texture, vivid accent colors

Browse Source 
- text-shadow glow on hero title and badge
- brighter accent colors (#1e88e5)
- stronger card hover glow
- subtle noise texture on background
- nav CTA button glow
- badge pulse animation
This commit is contained in:
Zdenek Kreml
2026-04-29 21:31:58 +02:00
parent d12e7224ba
commit c6cd9855e8
1 changed files with 19 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style/mxchat.css
+19 -7
View File
@@ -15,9 +15,9 @@
--font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "Geist Mono", "JetBrains Mono", "Fira Code", monospace; --font-mono: "Geist Mono", "JetBrains Mono", "Fira Code", monospace;
--accent: #1565c0; --accent: #1e88e5;
--accent-light: #1e88e5; --accent-light: #42a5f5;
--accent-hover: #1976d2; --accent-hover: #1565c0;
--accent-subtle: rgba(21, 101, 192, 0.12); --accent-subtle: rgba(21, 101, 192, 0.12);
--radius-sm: 6px; --radius-sm: 6px;
@@ -93,7 +93,10 @@ body {
font-size: 15px; font-size: 15px;
line-height: 1.65; line-height: 1.65;
color: var(--text); color: var(--text);
background: var(--bg); background-image: radial-gradient(900px 500px at 20% -10%, rgba(21, 101, 192, .06), transparent 60%),
radial-gradient(900px 500px at 120% 10%, rgba(30, 136, 229, .06), transparent 60%),
url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
background-color: var(--bg);
transition: background var(--transition), color var(--transition); transition: background var(--transition), color var(--transition);
} }
img { max-width: 100%; display: block; } img { max-width: 100%; display: block; }
@@ -168,9 +171,10 @@ a:hover { color: var(--accent); text-decoration: underline; }
padding: 6px 16px; padding: 6px 16px;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
text-decoration: none; text-decoration: none;
transition: background var(--transition); transition: background var(--transition), box-shadow var(--transition);
box-shadow: 0 0 12px rgba(30, 136, 229, 0.3);
} }
.nav-cta:hover { background: var(--accent-hover); text-decoration: none; color: #fff; } .nav-cta:hover { background: var(--accent-hover); text-decoration: none; color: #fff; box-shadow: 0 0 20px rgba(30, 136, 229, 0.5); }
/* Theme toggle */ /* Theme toggle */
.theme-toggle { .theme-toggle {
@@ -250,6 +254,8 @@ a:hover { color: var(--accent); text-decoration: underline; }
padding: 5px 16px; padding: 5px 16px;
border-radius: var(--radius-full); border-radius: var(--radius-full);
margin-bottom: 24px; margin-bottom: 24px;
animation: badge-pulse 3s ease-in-out infinite;
text-shadow: 0 0 20px rgba(30, 136, 229, 0.4);
} }
.hero h1 { .hero h1 {
font-size: 44px; font-size: 44px;
@@ -258,6 +264,7 @@ a:hover { color: var(--accent); text-decoration: underline; }
line-height: 1.12; line-height: 1.12;
margin-bottom: 16px; margin-bottom: 16px;
color: var(--text); color: var(--text);
text-shadow: 0 0 40px rgba(30, 136, 229, 0.3);
} }
.hero p { .hero p {
font-size: 17px; font-size: 17px;
@@ -347,7 +354,7 @@ a:hover { color: var(--accent); text-decoration: underline; }
.link-card:hover { .link-card:hover {
transform: translateY(-4px); transform: translateY(-4px);
border-color: var(--accent-light); border-color: var(--accent-light);
box-shadow: 0 4px 24px rgba(21, 101, 192, 0.25); box-shadow: 0 8px 32px rgba(30, 136, 229, 0.35);
background: var(--bg-card-hover); background: var(--bg-card-hover);
text-decoration: none; text-decoration: none;
} }
@@ -525,3 +532,8 @@ a:hover { color: var(--accent); text-decoration: underline; }
background: var(--accent); background: var(--accent);
color: #fff; color: #fff;
} }
@keyframes badge-pulse {
0%, 100% { border-color: rgba(30, 136, 229, 0.25); }
50% { border-color: rgba(66, 165, 245, 0.6); }
}