g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Christmas theme and snow effects for December

Browse Source 
Introduces a Christmas theme that activates in December, including themed colors, subtle background patterns, and snowflake effects on loading screens. Adds a reusable SnowLoader component and utility for December detection. Updates layout and loading components to conditionally apply decorations and styles only during December.
This commit is contained in:
g
2025-12-08 00:47:57 +00:00
parent 224342c410
commit e7fcfd63a2
10 changed files with 139 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
app/globals.css
View File

@@ -317,8 +317,15 @@ body {
hsl(var(--christmas-gold))) 1;
}
/* Subtle Christmas pattern overlay */
body::before {
/* Christmas-themed styles - only active in December */
.christmas-theme {
/* Subtle Christmas pattern overlay */
--christmas-pattern: radial-gradient(circle at 20% 50%, hsl(var(--christmas-red) / 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, hsl(var(--christmas-green) / 0.03) 0%, transparent 50%),
radial-gradient(circle at 40% 20%, hsl(var(--christmas-gold) / 0.03) 0%, transparent 50%);
}
.christmas-theme body::before {
content: '';
position: fixed;
top: 0;
@@ -334,13 +341,13 @@ body {
}
/* Christmas-themed card hover effects */
.card:hover {
.christmas-theme .card:hover {
border-color: hsl(var(--christmas-red) / 0.3);
transition: border-color 0.3s ease;
}
/* Christmas-themed button hover effects */
button.bg-primary:hover {
.christmas-theme button.bg-primary:hover {
background: linear-gradient(135deg,
hsl(var(--christmas-red)),
hsl(var(--christmas-green)));
@@ -348,13 +355,13 @@ body {
}
/* Christmas-themed link colors */
a:hover {
.christmas-theme a:hover {
color: hsl(var(--christmas-red));
transition: color 0.2s ease;
}
/* Subtle Christmas border on focus */
*:focus-visible {
.christmas-theme *:focus-visible {
outline-color: hsl(var(--christmas-red));
}
}
@@ -398,28 +405,46 @@ body {
--card-foreground: 0 0% 98%;
--popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 0 0% 9%;
--secondary: 0 0% 14.9%;
--secondary-foreground: 0 0% 98%;
--muted: 0 0% 14.9%;
--muted-foreground: 0 0% 63.9%;
--accent: 0 0% 14.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 14.9%;
--input: 0 0% 14.9%;
--ring: 0 0% 83.1%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
/* Christmas colors */
--christmas-red: 0 84% 50%;
--christmas-green: 142 76% 36%;
--christmas-gold: 43 96% 56%;
}
/* Apply Christmas colors only in December */
html.christmas-theme.dark,
html.christmas-theme .dark {
--primary: 0 84% 50%;
--primary-foreground: 0 0% 98%;
--secondary: 142 76% 36%;
--secondary-foreground: 0 0% 98%;
--muted: 0 0% 14.9%;
--muted-foreground: 0 0% 63.9%;
--accent: 142 76% 36%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 142 76% 20%;
--input: 0 0% 14.9%;
--ring: 0 84% 50%;
--chart-1: 0 84% 50%;
--chart-2: 142 76% 36%;
--chart-3: 43 96% 56%;
--chart-4: 0 84% 50%;
--chart-5: 142 76% 36%;
/* Christmas colors */
--christmas-red: 0 84% 50%;
--christmas-green: 142 76% 36%;
--christmas-gold: 43 96% 56%;
}
}