sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update color scheme to a dark theme with pink accents

Browse Source 
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 2025-09-04 13:17:16 +00:00
parent 60c3ca23b3
commit 2b0a7ce80f
3 changed files with 58 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/folx_MT_poz_b_1756991830394.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
attached_assets/image_1756991665336.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 851 KiB

116
client/src/index.css
View File

@ -5,56 +5,56 @@
@tailwind utilities; @tailwind utilities;
:root { :root {
--background: hsl(222, 84%, 4.9%); --background: hsl(220, 13%, 9%);
--foreground: hsl(210, 40%, 98%); --foreground: hsl(210, 40%, 95%);
--muted: hsl(217, 32.6%, 17.5%); --muted: hsl(220, 13%, 15%);
--muted-foreground: hsl(215, 20.2%, 65.1%); --muted-foreground: hsl(215, 20%, 55%);
--popover: hsl(222, 84%, 4.9%); --popover: hsl(220, 13%, 12%);
--popover-foreground: hsl(210, 40%, 98%); --popover-foreground: hsl(210, 40%, 95%);
--card: hsl(222, 84%, 4.9%); --card: hsl(220, 13%, 12%);
--card-foreground: hsl(210, 40%, 98%); --card-foreground: hsl(210, 40%, 95%);
--border: hsl(217, 32.6%, 17.5%); --border: hsl(220, 13%, 20%);
--input: hsl(217, 32.6%, 17.5%); --input: hsl(220, 13%, 15%);
--primary: hsl(217, 91%, 60%); --primary: hsl(340, 75%, 55%);
--primary-foreground: hsl(222, 47%, 11%); --primary-foreground: hsl(210, 40%, 95%);
--secondary: hsl(217, 32.6%, 17.5%); --secondary: hsl(220, 13%, 15%);
--secondary-foreground: hsl(210, 40%, 98%); --secondary-foreground: hsl(210, 40%, 85%);
--accent: hsl(217, 32.6%, 17.5%); --accent: hsl(340, 75%, 55%);
--accent-foreground: hsl(210, 40%, 98%); --accent-foreground: hsl(210, 40%, 95%);
--destructive: hsl(0, 62.8%, 30.6%); --destructive: hsl(0, 62.8%, 30.6%);
--destructive-foreground: hsl(210, 40%, 98%); --destructive-foreground: hsl(210, 40%, 98%);
--ring: hsl(217, 91%, 60%); --ring: hsl(340, 75%, 55%);
--radius: 0.75rem; --radius: 0.75rem;
/* Custom video app colors - Modern gradient theme */ /* Custom video app colors - Temno sivo-črno z roza poudarki */
--bunny-dark: hsl(250, 50%, 15%); --bunny-dark: hsl(220, 13%, 9%);
--bunny-gray: hsl(240, 30%, 25%); --bunny-gray: hsl(220, 13%, 15%);
--bunny-blue: hsl(200, 100%, 60%); --bunny-blue: hsl(340, 75%, 55%);
--bunny-purple: hsl(280, 80%, 60%); --bunny-purple: hsl(350, 70%, 50%);
--bunny-light: hsl(210, 40%, 98%); --bunny-light: hsl(210, 40%, 95%);
--bunny-muted: hsl(215, 20.2%, 65.1%); --bunny-muted: hsl(215, 20%, 55%);
} }
.dark { .dark {
--background: hsl(222, 84%, 4.9%); --background: hsl(220, 13%, 9%);
--foreground: hsl(210, 40%, 98%); --foreground: hsl(210, 40%, 95%);
--muted: hsl(217, 32.6%, 17.5%); --muted: hsl(220, 13%, 15%);
--muted-foreground: hsl(215, 20.2%, 65.1%); --muted-foreground: hsl(215, 20%, 55%);
--popover: hsl(222, 84%, 4.9%); --popover: hsl(220, 13%, 12%);
--popover-foreground: hsl(210, 40%, 98%); --popover-foreground: hsl(210, 40%, 95%);
--card: hsl(222, 84%, 4.9%); --card: hsl(220, 13%, 12%);
--card-foreground: hsl(210, 40%, 98%); --card-foreground: hsl(210, 40%, 95%);
--border: hsl(217, 32.6%, 17.5%); --border: hsl(220, 13%, 20%);
--input: hsl(217, 32.6%, 17.5%); --input: hsl(220, 13%, 15%);
--primary: hsl(217, 91%, 60%); --primary: hsl(340, 75%, 55%);
--primary-foreground: hsl(222, 47%, 11%); --primary-foreground: hsl(210, 40%, 95%);
--secondary: hsl(217, 32.6%, 17.5%); --secondary: hsl(220, 13%, 15%);
--secondary-foreground: hsl(210, 40%, 98%); --secondary-foreground: hsl(210, 40%, 85%);
--accent: hsl(217, 32.6%, 17.5%); --accent: hsl(340, 75%, 55%);
--accent-foreground: hsl(210, 40%, 98%); --accent-foreground: hsl(210, 40%, 95%);
--destructive: hsl(0, 62.8%, 30.6%); --destructive: hsl(0, 62.8%, 30.6%);
--destructive-foreground: hsl(210, 40%, 98%); --destructive-foreground: hsl(210, 40%, 98%);
--ring: hsl(217, 91%, 60%); --ring: hsl(340, 75%, 55%);
} }
@layer base { @layer base {
@ -64,7 +64,7 @@
body { body {
@apply font-sans antialiased bg-background text-foreground; @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%); color: hsl(210, 40%, 98%);
min-height: 100vh; min-height: 100vh;
/* iOS PWA optimizacije */ /* iOS PWA optimizacije */
@ -77,33 +77,33 @@
@layer utilities { @layer utilities {
.bunny-dark { .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 { .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 { .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 { .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); backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(220, 55, 95, 0.2);
} }
.bunny-blue { .bunny-blue {
background-color: hsl(217, 91%, 60%); background-color: hsl(340, 75%, 55%);
} }
.bunny-light { .bunny-light {
color: hsl(210, 40%, 98%); color: hsl(210, 40%, 95%);
} }
.bunny-muted { .bunny-muted {
color: hsl(215, 20.2%, 65.1%); color: hsl(215, 20%, 55%);
} }
.line-clamp-2 { .line-clamp-2 {
@ -234,25 +234,25 @@ input[data-testid*="search"]::placeholder {
.video-card { .video-card {
transition: all 0.3s ease; transition: all 0.3s ease;
background: linear-gradient(135deg, rgba(75, 85, 175, 0.05) 0%, rgba(128, 90, 213, 0.05) 100%); background: linear-gradient(135deg, rgba(30, 30, 35, 0.6) 0%, rgba(40, 40, 45, 0.6) 100%);
border: 1px solid rgba(255, 255, 255, 0.05); border: 1px solid rgba(220, 55, 95, 0.15);
border-radius: 12px; border-radius: 12px;
} }
/* Modern button styles */ /* Modern button styles */
.gradient-button { .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; border: none;
color: white; color: white;
font-weight: 600; font-weight: 600;
border-radius: 8px; border-radius: 8px;
transition: all 0.3s ease; 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 { .gradient-button:hover {
transform: translateY(-2px); 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 */ /* Geometric triangle decorations */
@ -262,7 +262,7 @@ input[data-testid*="search"]::placeholder {
height: 0; height: 0;
border-left: 35px solid transparent; border-left: 35px solid transparent;
border-right: 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); transform: rotate(15deg);
z-index: 1; z-index: 1;
} }
@ -273,7 +273,7 @@ input[data-testid*="search"]::placeholder {
height: 0; height: 0;
border-left: 25px solid transparent; border-left: 25px solid transparent;
border-right: 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); transform: rotate(-25deg);
z-index: 1; z-index: 1;
} }
@ -284,7 +284,7 @@ input[data-testid*="search"]::placeholder {
height: 0; height: 0;
border-left: 30px solid transparent; border-left: 30px solid transparent;
border-right: 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); transform: rotate(45deg);
z-index: 1; z-index: 1;
} }