riyadhafraa
e594b4be18
Theme overhaul (artifacts/teaboy-os/src/index.css):
- New light palette: background #F8FAFC, white cards, slate-200 borders
- Typography: IBM Plex Sans Arabic loaded via Google Fonts (Arabic-first, RTL)
- Soft glassmorphism: rgba(255,255,255,0.7) + 12px blur (vs heavy dark blur)
- Box shadows: 0 8px 30px rgba(15,23,42,0.05) (very soft, premium)
- .os-bg: light bg with two animated gradient blobs (soft purple top-left,
soft teal bottom-right) — Apple/SaaS style backdrop
- New helper classes: .topbar-glass (clean light header),
.dock-glass (floating macOS-like dock, lighter blur), .card-hover (lift)
- Gradient icon tiles: .icon-tile-{blue,purple,green,orange,pink,teal}
using soft from→to gradients per spec
Pages:
- home.tsx: AppIcon now uses gradient icon tiles mapped from app.color;
status bar uses .topbar-glass; bottom dock uses .dock-glass
- All pages: bulk-replaced dark-glass utilities so they read on light bg:
hover:bg-white/10 → hover:bg-slate-100,
bg-white/10 → bg-white/70,
border-white/10 → border-slate-200/70,
border-white/20 → border-slate-200,
bg-black/50 (modal backdrops) → bg-slate-900/30
17 lines
684 B
HTML
17 lines
684 B
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
|
|
<title>TeaBoy OS</title>
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html>
|