Update color scheme to a dark theme with pink accents
Update CSS variables in client/src/index.css to reflect a new dark color scheme with pink accents, replacing the previous modern gradient theme. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 946a0075-7e32-454b-b348-9e7f576d7f45 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/946a0075-7e32-454b-b348-9e7f576d7f45/jh6R7y2
This commit is contained in:
sebastjanartic
parent
60c3ca23b3
commit
2b0a7ce80f
BIN
attached_assets/folx_MT_poz_b_1756991830394.png
Normal file
BIN
attached_assets/folx_MT_poz_b_1756991830394.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
BIN
attached_assets/image_1756991665336.png
Normal file
BIN
attached_assets/image_1756991665336.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 851 KiB |
@ -5,56 +5,56 @@
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--background: hsl(222, 84%, 4.9%);
|
||||
--foreground: hsl(210, 40%, 98%);
|
||||
--muted: hsl(217, 32.6%, 17.5%);
|
||||
--muted-foreground: hsl(215, 20.2%, 65.1%);
|
||||
--popover: hsl(222, 84%, 4.9%);
|
||||
--popover-foreground: hsl(210, 40%, 98%);
|
||||
--card: hsl(222, 84%, 4.9%);
|
||||
--card-foreground: hsl(210, 40%, 98%);
|
||||
--border: hsl(217, 32.6%, 17.5%);
|
||||
--input: hsl(217, 32.6%, 17.5%);
|
||||
--primary: hsl(217, 91%, 60%);
|
||||
--primary-foreground: hsl(222, 47%, 11%);
|
||||
--secondary: hsl(217, 32.6%, 17.5%);
|
||||
--secondary-foreground: hsl(210, 40%, 98%);
|
||||
--accent: hsl(217, 32.6%, 17.5%);
|
||||
--accent-foreground: hsl(210, 40%, 98%);
|
||||
--background: hsl(220, 13%, 9%);
|
||||
--foreground: hsl(210, 40%, 95%);
|
||||
--muted: hsl(220, 13%, 15%);
|
||||
--muted-foreground: hsl(215, 20%, 55%);
|
||||
--popover: hsl(220, 13%, 12%);
|
||||
--popover-foreground: hsl(210, 40%, 95%);
|
||||
--card: hsl(220, 13%, 12%);
|
||||
--card-foreground: hsl(210, 40%, 95%);
|
||||
--border: hsl(220, 13%, 20%);
|
||||
--input: hsl(220, 13%, 15%);
|
||||
--primary: hsl(340, 75%, 55%);
|
||||
--primary-foreground: hsl(210, 40%, 95%);
|
||||
--secondary: hsl(220, 13%, 15%);
|
||||
--secondary-foreground: hsl(210, 40%, 85%);
|
||||
--accent: hsl(340, 75%, 55%);
|
||||
--accent-foreground: hsl(210, 40%, 95%);
|
||||
--destructive: hsl(0, 62.8%, 30.6%);
|
||||
--destructive-foreground: hsl(210, 40%, 98%);
|
||||
--ring: hsl(217, 91%, 60%);
|
||||
--ring: hsl(340, 75%, 55%);
|
||||
--radius: 0.75rem;
|
||||
|
||||
/* Custom video app colors - Modern gradient theme */
|
||||
--bunny-dark: hsl(250, 50%, 15%);
|
||||
--bunny-gray: hsl(240, 30%, 25%);
|
||||
--bunny-blue: hsl(200, 100%, 60%);
|
||||
--bunny-purple: hsl(280, 80%, 60%);
|
||||
--bunny-light: hsl(210, 40%, 98%);
|
||||
--bunny-muted: hsl(215, 20.2%, 65.1%);
|
||||
/* Custom video app colors - Temno sivo-črno z roza poudarki */
|
||||
--bunny-dark: hsl(220, 13%, 9%);
|
||||
--bunny-gray: hsl(220, 13%, 15%);
|
||||
--bunny-blue: hsl(340, 75%, 55%);
|
||||
--bunny-purple: hsl(350, 70%, 50%);
|
||||
--bunny-light: hsl(210, 40%, 95%);
|
||||
--bunny-muted: hsl(215, 20%, 55%);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: hsl(222, 84%, 4.9%);
|
||||
--foreground: hsl(210, 40%, 98%);
|
||||
--muted: hsl(217, 32.6%, 17.5%);
|
||||
--muted-foreground: hsl(215, 20.2%, 65.1%);
|
||||
--popover: hsl(222, 84%, 4.9%);
|
||||
--popover-foreground: hsl(210, 40%, 98%);
|
||||
--card: hsl(222, 84%, 4.9%);
|
||||
--card-foreground: hsl(210, 40%, 98%);
|
||||
--border: hsl(217, 32.6%, 17.5%);
|
||||
--input: hsl(217, 32.6%, 17.5%);
|
||||
--primary: hsl(217, 91%, 60%);
|
||||
--primary-foreground: hsl(222, 47%, 11%);
|
||||
--secondary: hsl(217, 32.6%, 17.5%);
|
||||
--secondary-foreground: hsl(210, 40%, 98%);
|
||||
--accent: hsl(217, 32.6%, 17.5%);
|
||||
--accent-foreground: hsl(210, 40%, 98%);
|
||||
--background: hsl(220, 13%, 9%);
|
||||
--foreground: hsl(210, 40%, 95%);
|
||||
--muted: hsl(220, 13%, 15%);
|
||||
--muted-foreground: hsl(215, 20%, 55%);
|
||||
--popover: hsl(220, 13%, 12%);
|
||||
--popover-foreground: hsl(210, 40%, 95%);
|
||||
--card: hsl(220, 13%, 12%);
|
||||
--card-foreground: hsl(210, 40%, 95%);
|
||||
--border: hsl(220, 13%, 20%);
|
||||
--input: hsl(220, 13%, 15%);
|
||||
--primary: hsl(340, 75%, 55%);
|
||||
--primary-foreground: hsl(210, 40%, 95%);
|
||||
--secondary: hsl(220, 13%, 15%);
|
||||
--secondary-foreground: hsl(210, 40%, 85%);
|
||||
--accent: hsl(340, 75%, 55%);
|
||||
--accent-foreground: hsl(210, 40%, 95%);
|
||||
--destructive: hsl(0, 62.8%, 30.6%);
|
||||
--destructive-foreground: hsl(210, 40%, 98%);
|
||||
--ring: hsl(217, 91%, 60%);
|
||||
--ring: hsl(340, 75%, 55%);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
@ -64,7 +64,7 @@
|
||||
|
||||
body {
|
||||
@apply font-sans antialiased bg-background text-foreground;
|
||||
background: linear-gradient(135deg, hsl(250, 50%, 15%) 0%, hsl(240, 30%, 25%) 50%, hsl(260, 40%, 20%) 100%);
|
||||
background: linear-gradient(135deg, hsl(220, 13%, 9%) 0%, hsl(220, 13%, 12%) 50%, hsl(220, 13%, 15%) 100%);
|
||||
color: hsl(210, 40%, 98%);
|
||||
min-height: 100vh;
|
||||
/* iOS PWA optimizacije */
|
||||
@ -77,33 +77,33 @@
|
||||
|
||||
@layer utilities {
|
||||
.bunny-dark {
|
||||
background: linear-gradient(135deg, hsl(250, 50%, 15%) 0%, hsl(240, 30%, 25%) 100%);
|
||||
background: linear-gradient(135deg, hsl(220, 13%, 9%) 0%, hsl(220, 13%, 12%) 100%);
|
||||
}
|
||||
|
||||
.bunny-gray {
|
||||
background: linear-gradient(135deg, hsl(240, 30%, 25%) 0%, hsl(235, 25%, 30%) 100%);
|
||||
background: linear-gradient(135deg, hsl(220, 13%, 12%) 0%, hsl(220, 13%, 15%) 100%);
|
||||
}
|
||||
|
||||
.gradient-primary {
|
||||
background: linear-gradient(135deg, hsl(200, 100%, 60%) 0%, hsl(280, 80%, 60%) 100%);
|
||||
background: linear-gradient(135deg, hsl(340, 75%, 55%) 0%, hsl(350, 70%, 50%) 100%);
|
||||
}
|
||||
|
||||
.gradient-card {
|
||||
background: linear-gradient(135deg, rgba(75, 85, 175, 0.1) 0%, rgba(128, 90, 213, 0.1) 100%);
|
||||
background: linear-gradient(135deg, rgba(30, 30, 35, 0.8) 0%, rgba(40, 40, 45, 0.8) 100%);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(220, 55, 95, 0.2);
|
||||
}
|
||||
|
||||
.bunny-blue {
|
||||
background-color: hsl(217, 91%, 60%);
|
||||
background-color: hsl(340, 75%, 55%);
|
||||
}
|
||||
|
||||
.bunny-light {
|
||||
color: hsl(210, 40%, 98%);
|
||||
color: hsl(210, 40%, 95%);
|
||||
}
|
||||
|
||||
.bunny-muted {
|
||||
color: hsl(215, 20.2%, 65.1%);
|
||||
color: hsl(215, 20%, 55%);
|
||||
}
|
||||
|
||||
.line-clamp-2 {
|
||||
@ -234,25 +234,25 @@ input[data-testid*="search"]::placeholder {
|
||||
|
||||
.video-card {
|
||||
transition: all 0.3s ease;
|
||||
background: linear-gradient(135deg, rgba(75, 85, 175, 0.05) 0%, rgba(128, 90, 213, 0.05) 100%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
background: linear-gradient(135deg, rgba(30, 30, 35, 0.6) 0%, rgba(40, 40, 45, 0.6) 100%);
|
||||
border: 1px solid rgba(220, 55, 95, 0.15);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* Modern button styles */
|
||||
.gradient-button {
|
||||
background: linear-gradient(135deg, hsl(200, 100%, 60%) 0%, hsl(280, 80%, 60%) 100%);
|
||||
background: linear-gradient(135deg, hsl(340, 75%, 55%) 0%, hsl(350, 70%, 50%) 100%);
|
||||
border: none;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
|
||||
box-shadow: 0 4px 15px rgba(220, 55, 95, 0.4);
|
||||
}
|
||||
|
||||
.gradient-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
|
||||
box-shadow: 0 8px 25px rgba(220, 55, 95, 0.5);
|
||||
}
|
||||
|
||||
/* Geometric triangle decorations */
|
||||
@ -262,7 +262,7 @@ input[data-testid*="search"]::placeholder {
|
||||
height: 0;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 50px solid rgba(59, 130, 246, 0.08);
|
||||
border-bottom: 50px solid rgba(220, 55, 95, 0.08);
|
||||
transform: rotate(15deg);
|
||||
z-index: 1;
|
||||
}
|
||||
@ -273,7 +273,7 @@ input[data-testid*="search"]::placeholder {
|
||||
height: 0;
|
||||
border-left: 25px solid transparent;
|
||||
border-right: 25px solid transparent;
|
||||
border-bottom: 35px solid rgba(147, 51, 234, 0.08);
|
||||
border-bottom: 35px solid rgba(220, 55, 95, 0.12);
|
||||
transform: rotate(-25deg);
|
||||
z-index: 1;
|
||||
}
|
||||
@ -284,7 +284,7 @@ input[data-testid*="search"]::placeholder {
|
||||
height: 0;
|
||||
border-left: 30px solid transparent;
|
||||
border-right: 30px solid transparent;
|
||||
border-bottom: 40px solid rgba(6, 182, 212, 0.08);
|
||||
border-bottom: 40px solid rgba(220, 55, 95, 0.10);
|
||||
transform: rotate(45deg);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user