Skip to content

Commit d04ff5c

Browse files
davidlu1001davidlu1001
authored
Merge pull request #33 from RepliMap/claude/fix-firefox-compatibility-JEDDa
fix: add Firefox compatibility for CSS colors, scrollbar, and backdrop-filter
2 parents 679b760 + 49249f7 commit d04ff5c

2 files changed

Lines changed: 190 additions & 90 deletions

File tree

‎apps/web/src/app/globals.css‎

Lines changed: 189 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -66,41 +66,43 @@
6666

6767
/* ============================================
6868
CSS Variables - Light Theme (default)
69+
sRGB fallback for Firefox < 113 compatibility
6970
============================================ */
7071
:root {
71-
--background: oklch(1 0 0);
72-
--foreground: oklch(0.145 0 0);
73-
--card: oklch(1 0 0);
74-
--card-foreground: oklch(0.145 0 0);
75-
--popover: oklch(1 0 0);
76-
--popover-foreground: oklch(0.145 0 0);
77-
--primary: oklch(0.6 0.17 162);
78-
--primary-foreground: oklch(0.985 0 0);
79-
--secondary: oklch(0.97 0 0);
80-
--secondary-foreground: oklch(0.205 0 0);
81-
--muted: oklch(0.97 0 0);
82-
--muted-foreground: oklch(0.556 0 0);
83-
--accent: oklch(0.97 0 0);
84-
--accent-foreground: oklch(0.205 0 0);
85-
--destructive: oklch(0.577 0.245 27.325);
86-
--destructive-foreground: oklch(0.985 0 0);
87-
--border: oklch(0.922 0 0);
88-
--input: oklch(0.922 0 0);
89-
--ring: oklch(0.6 0.17 162);
72+
/* sRGB fallback values (for browsers without OKLCH support) */
73+
--background: #ffffff;
74+
--foreground: #171717;
75+
--card: #ffffff;
76+
--card-foreground: #171717;
77+
--popover: #ffffff;
78+
--popover-foreground: #171717;
79+
--primary: #10b981;
80+
--primary-foreground: #fafafa;
81+
--secondary: #f5f5f5;
82+
--secondary-foreground: #262626;
83+
--muted: #f5f5f5;
84+
--muted-foreground: #737373;
85+
--accent: #f5f5f5;
86+
--accent-foreground: #262626;
87+
--destructive: #ef4444;
88+
--destructive-foreground: #fafafa;
89+
--border: #e5e5e5;
90+
--input: #e5e5e5;
91+
--ring: #10b981;
9092
--radius: 0.625rem;
91-
--chart-1: oklch(0.646 0.222 41.116);
92-
--chart-2: oklch(0.6 0.118 184.704);
93-
--chart-3: oklch(0.398 0.07 227.392);
94-
--chart-4: oklch(0.828 0.189 84.429);
95-
--chart-5: oklch(0.769 0.188 70.08);
96-
--sidebar: oklch(0.985 0 0);
97-
--sidebar-foreground: oklch(0.145 0 0);
98-
--sidebar-primary: oklch(0.205 0 0);
99-
--sidebar-primary-foreground: oklch(0.985 0 0);
100-
--sidebar-accent: oklch(0.97 0 0);
101-
--sidebar-accent-foreground: oklch(0.205 0 0);
102-
--sidebar-border: oklch(0.922 0 0);
103-
--sidebar-ring: oklch(0.708 0 0);
93+
--chart-1: #f97316;
94+
--chart-2: #0891b2;
95+
--chart-3: #1e40af;
96+
--chart-4: #fbbf24;
97+
--chart-5: #f59e0b;
98+
--sidebar: #fafafa;
99+
--sidebar-foreground: #171717;
100+
--sidebar-primary: #262626;
101+
--sidebar-primary-foreground: #fafafa;
102+
--sidebar-accent: #f5f5f5;
103+
--sidebar-accent-foreground: #262626;
104+
--sidebar-border: #e5e5e5;
105+
--sidebar-ring: #a3a3a3;
104106

105107
/* Fumadocs Variable Mapping - Point to Shadcn variables */
106108
--fd-background: var(--background);
@@ -118,59 +120,120 @@
118120
--fd-accent-foreground: var(--accent-foreground);
119121
}
120122

123+
/* OKLCH enhanced colors (for modern browsers) */
124+
@supports (color: oklch(0 0 0)) {
125+
:root {
126+
--background: oklch(1 0 0);
127+
--foreground: oklch(0.145 0 0);
128+
--card: oklch(1 0 0);
129+
--card-foreground: oklch(0.145 0 0);
130+
--popover: oklch(1 0 0);
131+
--popover-foreground: oklch(0.145 0 0);
132+
--primary: oklch(0.6 0.17 162);
133+
--primary-foreground: oklch(0.985 0 0);
134+
--secondary: oklch(0.97 0 0);
135+
--secondary-foreground: oklch(0.205 0 0);
136+
--muted: oklch(0.97 0 0);
137+
--muted-foreground: oklch(0.556 0 0);
138+
--accent: oklch(0.97 0 0);
139+
--accent-foreground: oklch(0.205 0 0);
140+
--destructive: oklch(0.577 0.245 27.325);
141+
--destructive-foreground: oklch(0.985 0 0);
142+
--border: oklch(0.922 0 0);
143+
--input: oklch(0.922 0 0);
144+
--ring: oklch(0.6 0.17 162);
145+
--chart-1: oklch(0.646 0.222 41.116);
146+
--chart-2: oklch(0.6 0.118 184.704);
147+
--chart-3: oklch(0.398 0.07 227.392);
148+
--chart-4: oklch(0.828 0.189 84.429);
149+
--chart-5: oklch(0.769 0.188 70.08);
150+
--sidebar: oklch(0.985 0 0);
151+
--sidebar-foreground: oklch(0.145 0 0);
152+
--sidebar-primary: oklch(0.205 0 0);
153+
--sidebar-primary-foreground: oklch(0.985 0 0);
154+
--sidebar-accent: oklch(0.97 0 0);
155+
--sidebar-accent-foreground: oklch(0.205 0 0);
156+
--sidebar-border: oklch(0.922 0 0);
157+
--sidebar-ring: oklch(0.708 0 0);
158+
}
159+
}
160+
121161
/* ============================================
122162
CSS Variables - Dark Theme (RepliMap default)
163+
sRGB fallback for Firefox < 113 compatibility
123164
============================================ */
124165
.dark {
125-
/* Base colors - RepliMap dark theme */
126-
--background: oklch(0.12 0.01 260);
127-
--foreground: oklch(0.985 0 0);
128-
--card: oklch(0.16 0.01 260);
129-
--card-foreground: oklch(0.985 0 0);
130-
--popover: oklch(0.16 0.01 260);
131-
--popover-foreground: oklch(0.985 0 0);
132-
133-
/* Emerald primary - RepliMap accent */
134-
--primary: oklch(0.696 0.17 162.48);
135-
--primary-foreground: oklch(0.985 0 0);
136-
137-
/* Secondary */
138-
--secondary: oklch(0.269 0.015 260);
139-
--secondary-foreground: oklch(0.985 0 0);
140-
141-
/* Muted */
142-
--muted: oklch(0.269 0.015 260);
143-
--muted-foreground: oklch(0.708 0 0);
144-
145-
/* Accent */
146-
--accent: oklch(0.269 0.015 260);
147-
--accent-foreground: oklch(0.985 0 0);
148-
149-
/* Destructive */
150-
--destructive: oklch(0.396 0.141 25.723);
151-
--destructive-foreground: oklch(0.985 0 0);
152-
153-
/* Borders */
154-
--border: oklch(0.269 0.015 260);
155-
--input: oklch(0.269 0.015 260);
156-
--ring: oklch(0.696 0.17 162.48);
157-
158-
/* Charts */
159-
--chart-1: oklch(0.488 0.243 264.376);
160-
--chart-2: oklch(0.696 0.17 162.48);
161-
--chart-3: oklch(0.769 0.188 70.08);
162-
--chart-4: oklch(0.627 0.265 303.9);
163-
--chart-5: oklch(0.645 0.246 16.439);
164-
165-
/* Sidebar */
166-
--sidebar: oklch(0.12 0.01 260);
167-
--sidebar-foreground: oklch(0.985 0 0);
168-
--sidebar-primary: oklch(0.696 0.17 162.48);
169-
--sidebar-primary-foreground: oklch(0.985 0 0);
170-
--sidebar-accent: oklch(0.269 0.015 260);
171-
--sidebar-accent-foreground: oklch(0.985 0 0);
172-
--sidebar-border: oklch(0.269 0.015 260);
173-
--sidebar-ring: oklch(0.556 0 0);
166+
/* sRGB fallback values (for browsers without OKLCH support) */
167+
--background: #030712;
168+
--foreground: #fafafa;
169+
--card: #0f172a;
170+
--card-foreground: #fafafa;
171+
--popover: #0f172a;
172+
--popover-foreground: #fafafa;
173+
--primary: #34d399;
174+
--primary-foreground: #fafafa;
175+
--secondary: #1e293b;
176+
--secondary-foreground: #fafafa;
177+
--muted: #1e293b;
178+
--muted-foreground: #a3a3a3;
179+
--accent: #1e293b;
180+
--accent-foreground: #fafafa;
181+
--destructive: #b91c1c;
182+
--destructive-foreground: #fafafa;
183+
--border: #1e293b;
184+
--input: #1e293b;
185+
--ring: #34d399;
186+
--chart-1: #3b82f6;
187+
--chart-2: #34d399;
188+
--chart-3: #f59e0b;
189+
--chart-4: #a855f7;
190+
--chart-5: #ef4444;
191+
--sidebar: #030712;
192+
--sidebar-foreground: #fafafa;
193+
--sidebar-primary: #34d399;
194+
--sidebar-primary-foreground: #fafafa;
195+
--sidebar-accent: #1e293b;
196+
--sidebar-accent-foreground: #fafafa;
197+
--sidebar-border: #1e293b;
198+
--sidebar-ring: #737373;
199+
}
200+
201+
/* OKLCH enhanced colors for dark theme (for modern browsers) */
202+
@supports (color: oklch(0 0 0)) {
203+
.dark {
204+
--background: oklch(0.12 0.01 260);
205+
--foreground: oklch(0.985 0 0);
206+
--card: oklch(0.16 0.01 260);
207+
--card-foreground: oklch(0.985 0 0);
208+
--popover: oklch(0.16 0.01 260);
209+
--popover-foreground: oklch(0.985 0 0);
210+
--primary: oklch(0.696 0.17 162.48);
211+
--primary-foreground: oklch(0.985 0 0);
212+
--secondary: oklch(0.269 0.015 260);
213+
--secondary-foreground: oklch(0.985 0 0);
214+
--muted: oklch(0.269 0.015 260);
215+
--muted-foreground: oklch(0.708 0 0);
216+
--accent: oklch(0.269 0.015 260);
217+
--accent-foreground: oklch(0.985 0 0);
218+
--destructive: oklch(0.396 0.141 25.723);
219+
--destructive-foreground: oklch(0.985 0 0);
220+
--border: oklch(0.269 0.015 260);
221+
--input: oklch(0.269 0.015 260);
222+
--ring: oklch(0.696 0.17 162.48);
223+
--chart-1: oklch(0.488 0.243 264.376);
224+
--chart-2: oklch(0.696 0.17 162.48);
225+
--chart-3: oklch(0.769 0.188 70.08);
226+
--chart-4: oklch(0.627 0.265 303.9);
227+
--chart-5: oklch(0.645 0.246 16.439);
228+
--sidebar: oklch(0.12 0.01 260);
229+
--sidebar-foreground: oklch(0.985 0 0);
230+
--sidebar-primary: oklch(0.696 0.17 162.48);
231+
--sidebar-primary-foreground: oklch(0.985 0 0);
232+
--sidebar-accent: oklch(0.269 0.015 260);
233+
--sidebar-accent-foreground: oklch(0.985 0 0);
234+
--sidebar-border: oklch(0.269 0.015 260);
235+
--sidebar-ring: oklch(0.556 0 0);
236+
}
174237
}
175238

176239
/* ============================================
@@ -185,7 +248,21 @@
185248
@apply bg-background text-foreground;
186249
}
187250

188-
/* Custom scrollbar for dark mode */
251+
/* ==========================================
252+
Cross-browser Scrollbar Styling
253+
========================================== */
254+
255+
/* Firefox standard scrollbar properties */
256+
html {
257+
scrollbar-width: thin;
258+
scrollbar-color: #374151 transparent; /* gray-700 transparent */
259+
}
260+
261+
.dark {
262+
scrollbar-color: #374151 transparent;
263+
}
264+
265+
/* WebKit browsers (Chrome, Safari, Edge) */
189266
::-webkit-scrollbar {
190267
width: 8px;
191268
height: 8px;
@@ -210,28 +287,51 @@
210287
@layer utilities {
211288
/* Dot pattern background for Hero section */
212289
.bg-dot-pattern {
213-
background-image:
214-
linear-gradient(to right, oklch(0.5 0 0 / 0.07) 1px, transparent 1px),
215-
linear-gradient(to bottom, oklch(0.5 0 0 / 0.07) 1px, transparent 1px);
290+
/* sRGB fallback */
291+
background-image:
292+
linear-gradient(to right, rgba(115, 115, 115, 0.07) 1px, transparent 1px),
293+
linear-gradient(to bottom, rgba(115, 115, 115, 0.07) 1px, transparent 1px);
216294
background-size: 24px 24px;
217295
}
218296

297+
@supports (color: oklch(0 0 0)) {
298+
.bg-dot-pattern {
299+
background-image:
300+
linear-gradient(to right, oklch(0.5 0 0 / 0.07) 1px, transparent 1px),
301+
linear-gradient(to bottom, oklch(0.5 0 0 / 0.07) 1px, transparent 1px);
302+
}
303+
}
304+
219305
/* Gradient text utility */
220306
.text-gradient {
221307
@apply bg-gradient-to-r from-emerald-400 to-cyan-400 bg-clip-text text-transparent;
222308
}
223309

224-
/* Glow effects */
310+
/* Glow effects - sRGB fallback with OKLCH enhancement */
225311
.glow-emerald {
226-
box-shadow: 0 0 20px oklch(0.696 0.17 162.48 / 0.3);
312+
box-shadow: 0 0 20px rgba(52, 211, 153, 0.3);
227313
}
228314

229315
.glow-emerald-sm {
230-
box-shadow: 0 0 10px oklch(0.696 0.17 162.48 / 0.2);
316+
box-shadow: 0 0 10px rgba(52, 211, 153, 0.2);
231317
}
232318

233319
/* Card hover glow */
234320
.hover-glow:hover {
235-
box-shadow: 0 0 30px oklch(0.696 0.17 162.48 / 0.15);
321+
box-shadow: 0 0 30px rgba(52, 211, 153, 0.15);
322+
}
323+
324+
@supports (color: oklch(0 0 0)) {
325+
.glow-emerald {
326+
box-shadow: 0 0 20px oklch(0.696 0.17 162.48 / 0.3);
327+
}
328+
329+
.glow-emerald-sm {
330+
box-shadow: 0 0 10px oklch(0.696 0.17 162.48 / 0.2);
331+
}
332+
333+
.hover-glow:hover {
334+
box-shadow: 0 0 30px oklch(0.696 0.17 162.48 / 0.15);
335+
}
236336
}
237337
}

‎apps/web/src/components/header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export function Header() {
2626
]
2727

2828
return (
29-
<header className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-md border-b border-border">
29+
<header className="fixed top-0 left-0 right-0 z-50 bg-background/95 supports-[backdrop-filter]:bg-background/80 backdrop-blur-md border-b border-border">
3030
<div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
3131
{/* Logo */}
3232
<Link href="/" className="flex items-center gap-2">

0 commit comments

Comments
 (0)