|
1 | 1 | /* ============================================ |
2 | | - ProXPL UI — Generated style.css |
| 2 | + ProXPL UI — Premium Generated style.css |
3 | 3 | App: MyLibraryApp |
4 | 4 | ============================================ */ |
5 | 5 |
|
6 | | -/* === CSS Reset === */ |
| 6 | +:root { |
| 7 | + --primary: #6366f1; |
| 8 | + --primary-hover: #4f46e5; |
| 9 | + --bg-gradient: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); |
| 10 | + --card-bg: rgba(255, 255, 255, 0.8); |
| 11 | + --text-main: #0f172a; |
| 12 | + --text-muted: #64748b; |
| 13 | +} |
| 14 | + |
7 | 15 | *, *::before, *::after { |
8 | 16 | box-sizing: border-box; |
9 | 17 | margin: 0; |
10 | 18 | padding: 0; |
11 | 19 | } |
12 | 20 |
|
13 | | -/* === Base === */ |
14 | 21 | html { |
15 | 22 | font-size: 16px; |
16 | 23 | scroll-behavior: smooth; |
17 | 24 | } |
18 | 25 |
|
19 | 26 | body { |
20 | | - font-family: 'Inter', system-ui, -apple-system, sans-serif; |
21 | | - font-size: 1rem; |
22 | | - line-height: 1.6; |
23 | | - color: #1f2937; |
24 | | - background: #f9fafb; |
| 27 | + font-family: 'Outfit', 'Inter', system-ui, sans-serif; |
| 28 | + color: var(--text-main); |
| 29 | + background: var(--bg-gradient); |
25 | 30 | min-height: 100vh; |
| 31 | + display: flex; |
| 32 | + align-items: center; |
| 33 | + justify-content: center; |
| 34 | +} |
| 35 | + |
| 36 | +.prox-window { |
| 37 | + background: var(--card-bg); |
| 38 | + backdrop-filter: blur(12px); |
| 39 | + -webkit-backdrop-filter: blur(12px); |
| 40 | + border-radius: 2rem; |
| 41 | + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1); |
| 42 | + border: 1px solid rgba(255, 255, 255, 0.3); |
| 43 | + padding: 3rem; |
| 44 | + margin: 1rem; |
| 45 | + max-width: 600px; |
| 46 | + width: 90%; |
| 47 | + animation: zoomIn 0.5s cubic-bezier(0.16, 1, 0.3, 1); |
26 | 48 | } |
27 | 49 |
|
28 | | -img, video, canvas { |
29 | | - max-width: 100%; |
30 | | - display: block; |
| 50 | +button { |
| 51 | + background: var(--primary); |
| 52 | + color: white; |
| 53 | + border: none; |
| 54 | + padding: 0.75rem 1.5rem; |
| 55 | + border-radius: 1rem; |
| 56 | + font-weight: 600; |
| 57 | + cursor: pointer; |
| 58 | + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); |
| 59 | + box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.3); |
31 | 60 | } |
32 | 61 |
|
33 | | -input, button, textarea, select { |
34 | | - font: inherit; |
| 62 | +button:hover { |
| 63 | + background: var(--primary-hover); |
| 64 | + transform: translateY(-2px); |
| 65 | + box-shadow: 0 20px 25px -5px rgba(99, 102, 241, 0.4); |
35 | 66 | } |
36 | 67 |
|
37 | | -/* === ProXPL Window Component === */ |
38 | | -.prox-window { |
39 | | - background: #ffffff; |
40 | | - border-radius: 1rem; |
41 | | - box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
42 | | - border: 1px solid rgba(0, 0, 0, 0.05); |
43 | | - padding: 2rem; |
44 | | - margin: 2rem; |
| 68 | +button:active { |
| 69 | + transform: translateY(0); |
45 | 70 | } |
46 | 71 |
|
47 | | -/* === Animations === */ |
48 | | -@keyframes fadeIn { |
49 | | - from { opacity: 0; } |
50 | | - to { opacity: 1; } |
| 72 | +span { |
| 73 | + font-size: 1.1rem; |
51 | 74 | } |
52 | 75 |
|
0 commit comments