Skip to content

Commit 6313cb0

Browse files
lmanganilmangani
authored
Merge pull request #6 from audiohacking/copilot/fix-ui-styles-issues
Fix UI serving: replace runtime CDN Tailwind with build-time CSS
2 parents 7d7cdd7 + 007a31e commit 6313cb0

9 files changed

Lines changed: 1182 additions & 251 deletions

File tree

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ build/
1616
server/.env
1717

1818
# Database (SQLite)
19+
data/*.db
20+
data/*.db-shm
21+
data/*.db-wal
1922
server/data/*.db
2023
server/data/*.db-shm
2124
server/data/*.db-wal

‎index.css‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
2+
3+
@tailwind base;
4+
@tailwind components;
5+
@tailwind utilities;
6+
7+
:root {
8+
--breakpoint-mobile: 768px;
9+
}
10+
11+
body {
12+
font-family: 'Inter', sans-serif;
13+
}
14+
15+
::-webkit-scrollbar {
16+
width: 6px;
17+
height: 6px;
18+
}
19+
::-webkit-scrollbar-track {
20+
background: transparent;
21+
}
22+
::-webkit-scrollbar-thumb {
23+
background: #d4d4d8;
24+
border-radius: 3px;
25+
}
26+
::-webkit-scrollbar-thumb:hover {
27+
background: #a1a1aa;
28+
}
29+
30+
/* Dark mode scrollbar */
31+
.dark ::-webkit-scrollbar-thumb {
32+
background: #3f3f46;
33+
}
34+
.dark ::-webkit-scrollbar-thumb:hover {
35+
background: #52525b;
36+
}
37+
38+
/* Hide scrollbar utility */
39+
.scrollbar-hide {
40+
-ms-overflow-style: none;
41+
scrollbar-width: none;
42+
}
43+
.scrollbar-hide::-webkit-scrollbar {
44+
display: none;
45+
}
46+
47+
.gradient-text {
48+
background: linear-gradient(to right, #f472b6, #a78bfa, #60a5fa);
49+
-webkit-background-clip: text;
50+
-webkit-text-fill-color: transparent;
51+
}
52+
53+
@keyframes music-bars {
54+
0% { height: 20%; opacity: 0.5; }
55+
50% { height: 100%; opacity: 1; }
56+
100% { height: 20%; opacity: 0.5; }
57+
}
58+
59+
.music-bar-anim {
60+
animation: music-bars 1s ease-in-out infinite;
61+
}
62+
63+
.mobile-only {
64+
display: none;
65+
}
66+
.desktop-only {
67+
display: block;
68+
}
69+
@media (max-width: 767px) {
70+
.mobile-only {
71+
display: block;
72+
}
73+
.desktop-only {
74+
display: none;
75+
}
76+
.mobile-only-flex {
77+
display: flex;
78+
}
79+
.mobile-only-inline {
80+
display: inline;
81+
}
82+
.mobile-only-inline-flex {
83+
display: inline-flex;
84+
}
85+
}
86+
87+
@keyframes slide-in-left {
88+
from { transform: translateX(-100%); }
89+
to { transform: translateX(0); }
90+
}
91+
@keyframes slide-out-left {
92+
from { transform: translateX(0); }
93+
to { transform: translateX(-100%); }
94+
}
95+
@keyframes slide-in-right {
96+
from { transform: translateX(100%); }
97+
to { transform: translateX(0); }
98+
}
99+
@keyframes slide-out-right {
100+
from { transform: translateX(0); }
101+
to { transform: translateX(-100%); }
102+
}
103+
@keyframes fade-in {
104+
from { opacity: 0; }
105+
to { opacity: 1; }
106+
}
107+
@keyframes fade-out {
108+
from { opacity: 1; }
109+
to { opacity: 0; }
110+
}
111+
.drawer-slide-in-left {
112+
animation: slide-in-left 0.3s ease-out forwards;
113+
}
114+
.drawer-slide-out-left {
115+
animation: slide-out-left 0.3s ease-in forwards;
116+
}
117+
.drawer-slide-in-right {
118+
animation: slide-in-right 0.3s ease-out forwards;
119+
}
120+
.drawer-slide-out-right {
121+
animation: slide-out-right 0.3s ease-in forwards;
122+
}
123+
.drawer-backdrop-in {
124+
animation: fade-in 0.3s ease-out forwards;
125+
}
126+
.drawer-backdrop-out {
127+
animation: fade-out 0.3s ease-in forwards;
128+
}
129+
130+
.backdrop-blur-mobile {
131+
backdrop-filter: blur(8px);
132+
-webkit-backdrop-filter: blur(8px);
133+
}
134+
.backdrop-blur-mobile-lg {
135+
backdrop-filter: blur(16px);
136+
-webkit-backdrop-filter: blur(16px);
137+
}
138+
139+
.safe-area-inset-top {
140+
padding-top: env(safe-area-inset-top, 0px);
141+
}
142+
.safe-area-inset-bottom {
143+
padding-bottom: env(safe-area-inset-bottom, 0px);
144+
}
145+
.safe-area-inset-left {
146+
padding-left: env(safe-area-inset-left, 0px);
147+
}
148+
.safe-area-inset-right {
149+
padding-right: env(safe-area-inset-right, 0px);
150+
}
151+
.safe-area-inset-x {
152+
padding-left: env(safe-area-inset-left, 0px);
153+
padding-right: env(safe-area-inset-right, 0px);
154+
}
155+
.safe-area-inset-y {
156+
padding-top: env(safe-area-inset-top, 0px);
157+
padding-bottom: env(safe-area-inset-bottom, 0px);
158+
}
159+
.safe-area-inset-all {
160+
padding-top: env(safe-area-inset-top, 0px);
161+
padding-bottom: env(safe-area-inset-bottom, 0px);
162+
padding-left: env(safe-area-inset-left, 0px);
163+
padding-right: env(safe-area-inset-right, 0px);
164+
}
165+
166+
.touch-none {
167+
-webkit-tap-highlight-color: transparent;
168+
touch-action: none;
169+
}
170+
.touch-pan-x {
171+
touch-action: pan-x;
172+
}
173+
.touch-pan-y {
174+
touch-action: pan-y;
175+
}
176+
.touch-manipulation {
177+
touch-action: manipulation;
178+
}
179+
.tap-highlight-none {
180+
-webkit-tap-highlight-color: transparent;
181+
}
182+
.scroll-touch {
183+
-webkit-overflow-scrolling: touch;
184+
}
185+
.overscroll-none {
186+
overscroll-behavior: none;
187+
}
188+
.overscroll-contain {
189+
overscroll-behavior: contain;
190+
}

0 commit comments

Comments
 (0)