CRM_ENVIROMENT/Newbie_CRM
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update cyberpunk theme: light mode overrides synced to dark mode colors
Build & Auto-Repair / build (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Uwais
2026-07-01 14:34:59 +02:00
parent 9bfd4e47ee
commit 727dcddf37
2 changed files with 321 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Web_Backgrounds/cyberpunk-theme.css
+301 -37
View File
@@ -38,34 +38,38 @@
--sidebar-ring: 330 100% 50%; --sidebar-ring: 330 100% 50%;
} }
.light.theme-cyberpunk { .light.theme-cyberpunk {
--background: 220 15% 96%; --background: 0 0% 98%;
--foreground: 240 30% 10%; --foreground: 240 10% 15%;
--card: 0 0% 100%; --card: 0 0% 100%;
--card-foreground: 240 30% 10%; --card-foreground: 240 10% 15%;
--popover: 0 0% 100%; --popover: 0 0% 100%;
--popover-foreground: 240 30% 10%; --popover-foreground: 240 10% 15%;
--primary: 330 80% 48%; --primary: 330 100% 50%;
--primary-foreground: 0 0% 100%; --primary-foreground: 0 0% 100%;
--secondary: 180 80% 38%; --secondary: 180 100% 50%;
--secondary-foreground: 0 0% 100%; --secondary-foreground: 0 0% 0%;
--muted: 240 8% 92%; --muted: 240 5% 94%;
--muted-foreground: 240 8% 48%; --muted-foreground: 240 4% 48%;
--accent: 260 65% 52%; --accent: 260 80% 60%;
--accent-foreground: 0 0% 100%; --accent-foreground: 0 0% 100%;
--destructive: 0 80% 55%; --destructive: 0 84% 55%;
--destructive-foreground: 0 0% 100%; --destructive-foreground: 0 0% 100%;
--border: 270 15% 84%; --success: 110 100% 50%;
--input: 240 8% 92%; --success-foreground: 0 0% 0%;
--ring: 330 80% 48%; --warning: 30 100% 55%;
--warning-foreground: 0 0% 0%;
--border: 270 10% 88%;
--input: 240 5% 92%;
--ring: 330 100% 50%;
--radius: 0.5rem; --radius: 0.5rem;
--sidebar: 0 0% 100%; --sidebar: 0 0% 100%;
--sidebar-foreground: 240 30% 10%; --sidebar-foreground: 240 10% 15%;
--sidebar-primary: 330 80% 48%; --sidebar-primary: 330 100% 50%;
--sidebar-primary-foreground: 0 0% 100%; --sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 240 8% 92%; --sidebar-accent: 240 5% 94%;
--sidebar-accent-foreground: 240 30% 10%; --sidebar-accent-foreground: 240 10% 15%;
--sidebar-border: 270 15% 84%; --sidebar-border: 270 10% 88%;
--sidebar-ring: 330 80% 48%; --sidebar-ring: 330 100% 50%;
} }
/* ============================================================================ /* ============================================================================
@@ -89,11 +93,7 @@
inset: 0; inset: 0;
z-index: -1; z-index: -1;
pointer-events: none; pointer-events: none;
background: background: hsl(0, 0%, 98%);
repeating-linear-gradient(90deg, transparent 0px, transparent 59px, rgba(255, 0, 127, 0.03) 59px, transparent 61px),
repeating-linear-gradient(0deg, transparent 0px, transparent 39px, rgba(0, 200, 255, 0.02) 39px, transparent 41px);
background-size: 200% 200%;
animation: cyberpunk-bg 50s ease-in-out infinite;
} }
@keyframes cyberpunk-bg { @keyframes cyberpunk-bg {
@@ -106,12 +106,17 @@
/* ============================================================================ /* ============================================================================
App Shell � Make the background transparent so body::before shows through App Shell � Make the background transparent so body::before shows through
============================================================================ */ ============================================================================ */
.dark.theme-cyberpunk .min-h-screen.bg-\[\#F8F8F8\] { .dark.theme-cyberpunk .min-h-screen.bg-\[\#F8F8F8\],
.light.theme-cyberpunk .min-h-screen.bg-\[\#F8F8F8\] {
background: transparent !important; background: transparent !important;
} }
.dark.theme-cyberpunk .dark\:bg-\[\#0A0A0A\] { .dark.theme-cyberpunk .dark\:bg-\[\#0A0A0A\],
.light.theme-cyberpunk .dark\:bg-\[\#0A0A0A\] {
background: transparent !important; background: transparent !important;
} }
.light.theme-cyberpunk .min-h-screen {
background: hsl(0, 0%, 98%) !important;
}
/* ============================================================================ /* ============================================================================
Top Navigation & Header Bar Top Navigation & Header Bar
@@ -152,24 +157,32 @@
/* ============================================================================ /* ============================================================================
Page Header � Dashboard title Page Header � Dashboard title
============================================================================ */ ============================================================================ */
.dark.theme-cyberpunk .border-l-4.border-\[\#C84B4B\] { .dark.theme-cyberpunk .border-l-4.border-\[\#C84B4B\],
.light.theme-cyberpunk .border-l-4.border-\[\#C84B4B\] {
border-left-color: hsl(330, 100%, 50%) !important; border-left-color: hsl(330, 100%, 50%) !important;
} }
.dark.theme-cyberpunk .dark\:border-\[\#FF1111\] { .dark.theme-cyberpunk .dark\:border-\[\#FF1111\],
.light.theme-cyberpunk .dark\:border-\[\#FF1111\] {
border-left-color: hsl(330, 100%, 50%) !important; border-left-color: hsl(330, 100%, 50%) !important;
} }
.dark.theme-cyberpunk .dark\:text-white.text-2xl.font-bold { .dark.theme-cyberpunk .dark\:text-white.text-2xl.font-bold {
color: hsl(0, 0%, 97%) !important; color: hsl(0, 0%, 97%) !important;
text-shadow: 0 0 6px rgba(255, 0, 127, 0.15); text-shadow: 0 0 6px rgba(255, 0, 127, 0.15);
} }
.dark.theme-cyberpunk .dark\:text-\[\#AAAAAA\] { .light.theme-cyberpunk .text-2xl.font-bold {
color: hsl(220, 20%, 12%) !important;
font-weight: 800 !important;
}
.dark.theme-cyberpunk .dark\:text-\[\#AAAAAA\],
.light.theme-cyberpunk .text-\[\#AAAAAA\] {
color: hsl(240, 8%, 50%) !important; color: hsl(240, 8%, 50%) !important;
} }
/* ============================================================================ /* ============================================================================
Section Subtitles � "Pipeline Overview" / "Analytics" Section Subtitles � "Pipeline Overview" / "Analytics"
============================================================================ */ ============================================================================ */
.dark.theme-cyberpunk .dark\:text-\[\#666666\].text-xs.font-semibold.tracking-widest { .dark.theme-cyberpunk .dark\:text-\[\#666666\].text-xs.font-semibold.tracking-widest,
.light.theme-cyberpunk .text-xs.font-semibold.tracking-widest {
color: hsl(240, 8%, 38%) !important; color: hsl(240, 8%, 38%) !important;
letter-spacing: 0.18em; letter-spacing: 0.18em;
} }
@@ -257,7 +270,8 @@
============================================================================ */ ============================================================================ */
/* Pipeline Overview metric cards � semi-transparent glass + neon-pink glow border */ /* Pipeline Overview metric cards � semi-transparent glass + neon-pink glow border */
.dark.theme-cyberpunk .group.h-full > .rounded-xl.border { .dark.theme-cyberpunk .group.h-full > .rounded-xl.border,
.light.theme-cyberpunk .group.h-full > .rounded-xl.border {
background: rgba(20, 20, 25, 0.75) !important; background: rgba(20, 20, 25, 0.75) !important;
backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important;
border: 2px solid hsl(330, 100%, 50%) !important; border: 2px solid hsl(330, 100%, 50%) !important;
@@ -267,7 +281,8 @@
0 -2px 8px rgba(255, 0, 127, 0.15), 0 -2px 8px rgba(255, 0, 127, 0.15),
0 4px 24px rgba(0, 0, 0, 0.5) !important; 0 4px 24px rgba(0, 0, 0, 0.5) !important;
} }
.dark.theme-cyberpunk .group.h-full:hover > .rounded-xl.border { .dark.theme-cyberpunk .group.h-full:hover > .rounded-xl.border,
.light.theme-cyberpunk .group.h-full:hover > .rounded-xl.border {
border-color: hsl(330, 100%, 55%) !important; border-color: hsl(330, 100%, 55%) !important;
box-shadow: 0 0 0 2px hsla(330, 100%, 50%, 0.5), box-shadow: 0 0 0 2px hsla(330, 100%, 50%, 0.5),
0 0 20px rgba(255, 0, 127, 0.3), 0 0 20px rgba(255, 0, 127, 0.3),
@@ -277,13 +292,15 @@
} }
/* Neon-pink top border strip on every card */ /* Neon-pink top border strip on every card */
.dark.theme-cyberpunk .h-1.w-full.bg-gradient-to-r.shadow-sm { .dark.theme-cyberpunk .h-1.w-full.bg-gradient-to-r.shadow-sm,
.light.theme-cyberpunk .h-1.w-full.bg-gradient-to-r.shadow-sm {
background: linear-gradient(to right, hsl(330, 100%, 50%), hsl(330, 100%, 65%), hsl(330, 100%, 50%)) !important; background: linear-gradient(to right, hsl(330, 100%, 50%), hsl(330, 100%, 65%), hsl(330, 100%, 50%)) !important;
box-shadow: 0 0 8px rgba(255, 0, 127, 0.3), 0 0 16px rgba(255, 0, 127, 0.1) !important; box-shadow: 0 0 8px rgba(255, 0, 127, 0.3), 0 0 16px rgba(255, 0, 127, 0.1) !important;
} }
/* Stat value � bright white with subtle glow */ /* Stat value � bright white with subtle glow */
.dark.theme-cyberpunk .text-3xl.font-bold.tracking-tight { .dark.theme-cyberpunk .text-3xl.font-bold.tracking-tight,
.light.theme-cyberpunk .text-3xl.font-bold.tracking-tight {
color: hsl(0, 0%, 97%) !important; color: hsl(0, 0%, 97%) !important;
text-shadow: 0 0 8px rgba(255, 0, 127, 0.1); text-shadow: 0 0 8px rgba(255, 0, 127, 0.1);
} }
@@ -336,7 +353,8 @@
} }
/* Bottom glow bar on cards */ /* Bottom glow bar on cards */
.dark.theme-cyberpunk .absolute.bottom-0.left-0.right-0.h-1 { .dark.theme-cyberpunk .absolute.bottom-0.left-0.right-0.h-1,
.light.theme-cyberpunk .absolute.bottom-0.left-0.right-0.h-1 {
background: linear-gradient(to right, transparent, hsla(330, 100%, 50%, 0.25), transparent) !important; background: linear-gradient(to right, transparent, hsla(330, 100%, 50%, 0.25), transparent) !important;
} }
@@ -829,7 +847,10 @@
============================================================================ */ ============================================================================ */
.dark.theme-cyberpunk .grid.grid-cols-1.md\:grid-cols-2.xl\:grid-cols-3.gap-4 > div, .dark.theme-cyberpunk .grid.grid-cols-1.md\:grid-cols-2.xl\:grid-cols-3.gap-4 > div,
.dark.theme-cyberpunk [class*="bg-card"], .dark.theme-cyberpunk [class*="bg-card"],
.dark.theme-cyberpunk .rounded-xl.border.bg-card { .dark.theme-cyberpunk .rounded-xl.border.bg-card,
.light.theme-cyberpunk .grid.grid-cols-1.md\:grid-cols-2.xl\:grid-cols-3.gap-4 > div,
.light.theme-cyberpunk [class*="bg-card"],
.light.theme-cyberpunk .rounded-xl.border.bg-card {
border-top: 2px solid hsl(330, 100%, 50%) !important; border-top: 2px solid hsl(330, 100%, 50%) !important;
border-bottom: 2px solid hsl(330, 100%, 50%) !important; border-bottom: 2px solid hsl(330, 100%, 50%) !important;
box-shadow: 0 4px 20px rgba(255, 0, 127, 0.15) !important; box-shadow: 0 4px 20px rgba(255, 0, 127, 0.15) !important;
@@ -929,6 +950,11 @@
.dark.theme-cyberpunk .dark\:text-\[\#666666\].text-xs.font-semibold.tracking-widest.uppercase { .dark.theme-cyberpunk .dark\:text-\[\#666666\].text-xs.font-semibold.tracking-widest.uppercase {
color: hsl(210, 20%, 88%) !important; color: hsl(210, 20%, 88%) !important;
} }
.light.theme-cyberpunk .text-xs.font-semibold.tracking-widest.uppercase {
color: hsl(220, 15%, 20%) !important;
font-weight: 700 !important;
letter-spacing: 0.18em;
}
/* ============================================================================ /* ============================================================================
Pipeline Color Bars — Cyberpunk neon pink/cyan Pipeline Color Bars — Cyberpunk neon pink/cyan
@@ -969,3 +995,241 @@
color: #1BB0CE !important; color: #1BB0CE !important;
background: none !important; background: none !important;
} }
/* Progress bar background track — light theme */
.light.theme-cyberpunk .w-full.h-1\.5.bg-muted.rounded-full {
background: hsl(240, 5%, 90%) !important;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}
/* Progress bar fill — red/faded-red → neon pink */
.light.theme-cyberpunk .h-full.rounded-full.bg-gradient-to-r {
background: linear-gradient(to right, hsl(330, 100%, 50%), hsl(180, 100%, 50%)) !important;
box-shadow: 0 0 6px rgba(255, 0, 127, 0.3) !important;
}
/* Progress bar fill — blue → neon cyan */
.light.theme-cyberpunk .h-full.rounded-full {
background: hsl(180, 100%, 50%) !important;
}
/* Percentage text above progress bars — dark slate */
.light.theme-cyberpunk .text-sm.font-semibold {
color: hsl(220, 15%, 20%) !important;
}
/* ============================================================================
LIGHT THEME — Metric Card Icons & Indicator Lines Override
============================================================================ */
.light.theme-cyberpunk .grid.grid-cols-1.md\:grid-cols-2.xl\:grid-cols-3.gap-4 > div,
.light.theme-cyberpunk [class*="bg-card"],
.light.theme-cyberpunk .rounded-xl.border.bg-card {
border-top: 2px solid hsl(330, 100%, 50%) !important;
border-bottom: 2px solid hsl(330, 100%, 50%) !important;
box-shadow: 0 4px 20px rgba(255, 0, 127, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06) !important;
background: hsl(0, 0%, 100%) !important;
}
.light.theme-cyberpunk .group.h-full > .rounded-xl.border {
background: hsl(0, 0%, 100%) !important;
border: 2px solid hsl(330, 100%, 50%) !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 20px rgba(255, 0, 127, 0.1) !important;
}
.light.theme-cyberpunk .group.h-full:hover > .rounded-xl.border {
border-color: hsl(330, 100%, 55%) !important;
box-shadow: 0 4px 24px rgba(255, 0, 127, 0.15), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}
.light.theme-cyberpunk .h-1.w-full.bg-gradient-to-r.shadow-sm {
background: linear-gradient(to right, hsl(330, 100%, 50%), hsl(330, 100%, 65%), hsl(330, 100%, 50%)) !important;
box-shadow: 0 0 8px rgba(255, 0, 127, 0.2) !important;
}
.light.theme-cyberpunk .text-3xl.font-bold.tracking-tight {
color: hsl(240, 10%, 15%) !important;
}
.light.theme-cyberpunk .text-sm.font-medium.text-muted-foreground {
color: hsl(240, 4%, 48%) !important;
}
.light.theme-cyberpunk .flex.h-12.w-12.items-center.justify-center.rounded-xl {
background: hsla(330, 100%, 50%, 0.08) !important;
}
.light.theme-cyberpunk .flex.h-12.w-12.items-center.justify-center.rounded-xl svg.h-6 {
color: hsl(330, 100%, 50%) !important;
}
.light.theme-cyberpunk .absolute.bottom-0.left-0.right-0.h-1 {
background: linear-gradient(to right, transparent, hsla(330, 100%, 50%, 0.2), transparent) !important;
}
/* Pipeline accent lines — odd cards neon pink */
.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .h-1.w-full {
background: linear-gradient(to right, hsl(330, 100%, 50%), hsl(330, 100%, 65%), hsl(330, 100%, 50%)) !important;
box-shadow: 0 0 8px rgba(255, 0, 127, 0.3) !important;
}
/* Pipeline accent lines — even cards neon cyan */
.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .h-1.w-full {
background: linear-gradient(to right, hsl(180, 100%, 50%), hsl(180, 100%, 65%), hsl(180, 100%, 50%)) !important;
box-shadow: 0 0 8px rgba(0, 240, 255, 0.3) !important;
}
/* Icon containers — odd neon pink, even neon cyan */
.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .rounded-xl.shrink-0 {
background: hsla(330, 100%, 50%, 0.12) !important;
}
.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .rounded-xl.shrink-0 {
background: hsla(180, 100%, 50%, 0.1) !important;
}
/* Icon SVG colors — odd neon pink, even neon cyan */
.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .rounded-xl.shrink-0 svg {
color: hsl(330, 100%, 50%) !important;
}
.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .rounded-xl.shrink-0 svg {
color: hsl(180, 100%, 50%) !important;
}
/* Bottom glow bars — odd neon pink, even neon cyan */
.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .absolute.bottom-0.h-1 {
background: linear-gradient(to right, transparent, hsla(330, 100%, 50%, 0.3), transparent) !important;
}
.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .absolute.bottom-0.h-1 {
background: linear-gradient(to right, transparent, hsla(180, 100%, 50%, 0.25), transparent) !important;
}
.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 .rounded-full.bg-gradient-to-r {
background: linear-gradient(to right, hsl(330, 100%, 50%), hsl(180, 100%, 50%)) !important;
}
/* ============================================================================
LIGHT THEME — Donut Chart Segment Colors (mirrors dark mode)
============================================================================ */
.light.theme-cyberpunk svg path[stroke="#000000"]:nth-of-type(1) {
fill: hsl(285, 100%, 50%) !important;
filter: drop-shadow(0 0 8px rgba(189, 0, 255, 0.4));
}
.light.theme-cyberpunk svg path[stroke="#000000"]:nth-of-type(2) {
fill: hsl(186, 100%, 50%) !important;
filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.4));
}
.light.theme-cyberpunk svg path[stroke="#000000"]:nth-of-type(3) {
fill: hsl(51, 100%, 50%) !important;
filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.4));
}
.light.theme-cyberpunk svg path[stroke="#000000"]:nth-of-type(4) {
fill: hsl(110, 100%, 50%) !important;
filter: drop-shadow(0 0 8px rgba(57, 255, 20, 0.4));
}
.light.theme-cyberpunk svg path[stroke="#000000"]:nth-of-type(5) {
fill: hsl(340, 100%, 50%) !important;
filter: drop-shadow(0 0 6px rgba(255, 0, 85, 0.3));
}
/* Legend dots — match dark mode colors */
.light.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(1) .rounded-full {
background: hsl(285, 100%, 50%) !important;
box-shadow: 0 0 10px rgba(189, 0, 255, 0.5) !important;
}
.light.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(2) .rounded-full {
background: hsl(186, 100%, 50%) !important;
box-shadow: 0 0 10px rgba(0, 229, 255, 0.5) !important;
}
.light.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(3) .rounded-full {
background: hsl(51, 100%, 50%) !important;
box-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important;
}
.light.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(4) .rounded-full {
background: hsl(110, 100%, 50%) !important;
box-shadow: 0 0 10px rgba(57, 255, 20, 0.5) !important;
}
.light.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(5) .rounded-full {
background: hsl(340, 100%, 50%) !important;
box-shadow: 0 0 8px rgba(255, 0, 85, 0.4) !important;
}
/* ============================================================================
LIGHT THEME — Bar Chart (mirrors dark mode)
============================================================================ */
.light.theme-cyberpunk svg rect[fill*="newLeadsGrad"] {
fill: hsl(330, 100%, 50%) !important;
filter: drop-shadow(0 0 8px rgba(255, 0, 127, 0.5)) !important;
rx: 4;
}
.light.theme-cyberpunk svg rect[fill*="closedGrad"] {
fill: hsl(186, 100%, 50%) !important;
filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.4)) !important;
rx: 4;
}
.light.theme-cyberpunk .items-start .gap-4 > :first-child .rounded-sm {
background: hsl(330, 100%, 50%) !important;
box-shadow: 0 0 10px rgba(255, 0, 127, 0.7), 0 0 20px rgba(255, 0, 127, 0.25) !important;
border: 1px solid hsl(330, 100%, 60%) !important;
}
.light.theme-cyberpunk .items-start .gap-4 > :nth-child(2) .rounded-sm {
background: hsl(186, 100%, 50%) !important;
box-shadow: 0 0 10px rgba(0, 229, 255, 0.6), 0 0 20px rgba(0, 229, 255, 0.2) !important;
border: 1px solid hsl(186, 100%, 55%) !important;
}
.light.theme-cyberpunk .items-start .gap-4 > :first-child .text-xs {
color: hsl(330, 100%, 65%) !important;
font-weight: 600;
}
.light.theme-cyberpunk .items-start .gap-4 > :nth-child(2) .text-xs {
color: hsl(186, 100%, 60%) !important;
font-weight: 600;
}
/* ============================================================================
LIGHT THEME — Status Badges (mirrors dark mode neon pills)
============================================================================ */
.light.theme-cyberpunk [class*="bg-blue-500/10"] {
background: hsla(186, 100%, 50%, 0.12) !important;
color: hsl(186, 100%, 40%) !important;
border-color: hsla(186, 100%, 50%, 0.25) !important;
border-radius: 9999px !important;
}
.light.theme-cyberpunk [class*="bg-amber-500/10"] {
background: hsla(285, 100%, 50%, 0.12) !important;
color: hsl(285, 100%, 45%) !important;
border-color: hsla(285, 100%, 50%, 0.25) !important;
border-radius: 9999px !important;
}
.light.theme-cyberpunk [class*="bg-purple-500/10"] {
background: hsla(40, 100%, 55%, 0.12) !important;
color: hsl(40, 90%, 40%) !important;
border-color: hsla(40, 100%, 55%, 0.25) !important;
border-radius: 9999px !important;
}
.light.theme-cyberpunk [class*="bg-emerald-500/10"] {
background: hsla(350, 75%, 45%, 0.12) !important;
color: hsl(350, 75%, 40%) !important;
border-color: hsla(350, 75%, 45%, 0.25) !important;
border-radius: 9999px !important;
}
.light.theme-cyberpunk [class*="bg-zinc-500/10"] {
background: hsla(0, 0%, 40%, 0.08) !important;
color: hsl(0, 0%, 40%) !important;
border-color: hsla(0, 0%, 40%, 0.15) !important;
border-radius: 9999px !important;
}
.light.theme-cyberpunk .text-blue-600.dark\:text-blue-400 {
color: hsl(186, 100%, 40%) !important;
}
.light.theme-cyberpunk .text-amber-600.dark\:text-amber-400 {
color: hsl(285, 100%, 45%) !important;
}
.light.theme-cyberpunk .text-purple-600.dark\:text-purple-400 {
color: hsl(40, 90%, 40%) !important;
}
.light.theme-cyberpunk .text-emerald-600.dark\:text-emerald-400 {
color: hsl(350, 75%, 40%) !important;
}
.light.theme-cyberpunk .text-zinc-600.dark\:text-zinc-400 {
color: hsl(0, 0%, 40%) !important;
}
/* Status dots — light theme */
.light.theme-cyberpunk span.h-1\.5.w-1\.5.rounded-full.bg-blue-500 {
background: hsl(186, 100%, 50%) !important;
}
.light.theme-cyberpunk span.h-1\.5.w-1\.5.rounded-full.bg-amber-500 {
background: hsl(285, 100%, 50%) !important;
}
.light.theme-cyberpunk span.h-1\.5.w-1\.5.rounded-full.bg-purple-500 {
background: hsl(40, 100%, 55%) !important;
}
.light.theme-cyberpunk span.h-1\.5.w-1\.5.rounded-full.bg-emerald-500 {
background: hsl(350, 75%, 45%) !important;
}
.light.theme-cyberpunk span.h-1\.5.w-1\.5.rounded-full.bg-zinc-500 {
background: hsl(0, 0%, 40%) !important;
}
Web_Backgrounds/theme.json
+20 -20
View File
@@ -40,33 +40,33 @@
}, },
"light": { "light": {
"colors": { "colors": {
"background": "hsl(220, 15%, 96%)", "background": "hsl(0, 0%, 98%)",
"foreground": "hsl(240, 30%, 10%)", "foreground": "hsl(240, 10%, 15%)",
"card": "hsl(0, 0%, 100%)", "card": "hsl(0, 0%, 100%)",
"cardForeground": "hsl(240, 30%, 10%)", "cardForeground": "hsl(240, 10%, 15%)",
"popover": "hsl(0, 0%, 100%)", "popover": "hsl(0, 0%, 100%)",
"popoverForeground": "hsl(240, 30%, 10%)", "popoverForeground": "hsl(240, 10%, 15%)",
"primary": "hsl(330, 80%, 48%)", "primary": "hsl(330, 100%, 50%)",
"primaryForeground": "hsl(0, 0%, 100%)", "primaryForeground": "hsl(0, 0%, 100%)",
"secondary": "hsl(180, 80%, 38%)", "secondary": "hsl(180, 100%, 50%)",
"secondaryForeground": "hsl(0, 0%, 100%)", "secondaryForeground": "hsl(0, 0%, 0%)",
"muted": "hsl(240, 8%, 92%)", "muted": "hsl(240, 5%, 94%)",
"mutedForeground": "hsl(240, 8%, 48%)", "mutedForeground": "hsl(240, 4%, 48%)",
"accent": "hsl(260, 65%, 52%)", "accent": "hsl(260, 80%, 60%)",
"accentForeground": "hsl(0, 0%, 100%)", "accentForeground": "hsl(0, 0%, 100%)",
"destructive": "hsl(0, 80%, 55%)", "destructive": "hsl(0, 84%, 55%)",
"destructiveForeground": "hsl(0, 0%, 100%)", "destructiveForeground": "hsl(0, 0%, 100%)",
"border": "hsl(270, 15%, 84%)", "border": "hsl(270, 10%, 88%)",
"input": "hsl(240, 8%, 92%)", "input": "hsl(240, 5%, 92%)",
"ring": "hsl(330, 80%, 48%)", "ring": "hsl(330, 100%, 50%)",
"sidebar": "hsl(0, 0%, 100%)", "sidebar": "hsl(0, 0%, 100%)",
"sidebarForeground": "hsl(240, 30%, 10%)", "sidebarForeground": "hsl(240, 10%, 15%)",
"sidebarPrimary": "hsl(330, 80%, 48%)", "sidebarPrimary": "hsl(330, 100%, 50%)",
"sidebarPrimaryForeground": "hsl(0, 0%, 100%)", "sidebarPrimaryForeground": "hsl(0, 0%, 100%)",
"sidebarAccent": "hsl(240, 8%, 92%)", "sidebarAccent": "hsl(240, 5%, 94%)",
"sidebarAccentForeground": "hsl(240, 30%, 10%)", "sidebarAccentForeground": "hsl(240, 10%, 15%)",
"sidebarBorder": "hsl(270, 15%, 84%)", "sidebarBorder": "hsl(270, 10%, 88%)",
"sidebarRing": "hsl(330, 80%, 48%)" "sidebarRing": "hsl(330, 100%, 50%)"
} }
} }
}, },