feat: add dark/light mode toggle to navigation, enhance sidebar styles, and update layout colors
- Implemented a button for toggling between dark and light modes in the navigation component. - Adjusted sidebar width and improved active link indicators with shadows for better visibility. - Updated layout colors for a more vibrant and cohesive theme, focusing on a "Pure Neutral Black + Neon" aesthetic. - Refined ambient gradient accents for improved content readability across devices. - Enhanced console layout for better responsiveness and user experience.
This commit is contained in:
@@ -1,3 +1,4 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
||||
@import 'tailwindcss';
|
||||
|
||||
@plugin '@tailwindcss/forms' {
|
||||
@@ -13,6 +14,9 @@
|
||||
|
||||
/* =============================================================================
|
||||
FONT DEFINITIONS
|
||||
-----------------------------------------------------------------------------
|
||||
Inter is the canonical Volt dashboard font. Figtree is kept as a fallback
|
||||
for the local bundled font file.
|
||||
============================================================================= */
|
||||
|
||||
@font-face {
|
||||
@@ -48,7 +52,25 @@
|
||||
============================================================================= */
|
||||
|
||||
@theme {
|
||||
--font-sans: "Figtree", "Poppins", "Nunito", ui-sans-serif, system-ui, sans-serif;
|
||||
--font-sans: "Inter", "Figtree", "Poppins", "Nunito", ui-sans-serif, system-ui, sans-serif;
|
||||
|
||||
/* Dark-first neutral shadow scale (rest state) */
|
||||
--shadow-volt-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
|
||||
--shadow-volt-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.45), 0 1px 2px -1px rgba(0, 0, 0, 0.35);
|
||||
--shadow-volt: 0 4px 12px -2px rgba(0, 0, 0, 0.5), 0 2px 6px -2px rgba(0, 0, 0, 0.35);
|
||||
--shadow-volt-lg: 0 12px 32px -6px rgba(0, 0, 0, 0.6), 0 6px 14px -6px rgba(0, 0, 0, 0.4);
|
||||
|
||||
/* Neon glow shadows — used on hover/focus for interactive elements */
|
||||
--shadow-glow-primary: 0 0 0 1px hsl(var(--color-primary) / 0.35), 0 8px 32px -4px hsl(var(--color-primary) / 0.35);
|
||||
--shadow-glow-secondary: 0 0 0 1px hsl(var(--color-secondary) / 0.35), 0 8px 32px -4px hsl(var(--color-secondary) / 0.35);
|
||||
--shadow-glow-primary-sm: 0 0 16px -2px hsl(var(--color-primary) / 0.45);
|
||||
--shadow-glow-secondary-sm: 0 0 16px -2px hsl(var(--color-secondary) / 0.45);
|
||||
|
||||
/* Border radius scale */
|
||||
--radius-volt-sm: 0.375rem;
|
||||
--radius-volt: 0.5rem;
|
||||
--radius-volt-lg: 0.75rem;
|
||||
--radius-volt-xl: 1rem;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
@@ -106,6 +128,44 @@ html {
|
||||
text-wrap: wrap;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
CARD GLASS — canonical dark glass-morphism surface.
|
||||
Use .card-glass on any panel/card. Hover adds a subtle primary edge-glow.
|
||||
============================================================================= */
|
||||
@utility card-glass {
|
||||
position: relative;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid hsl(var(--color-neutral) / 0.6);
|
||||
background-color: hsl(var(--color-background-secondary) / 0.6);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
box-shadow: var(--shadow-volt);
|
||||
transition: border-color 240ms ease, box-shadow 240ms ease, transform 240ms ease;
|
||||
}
|
||||
|
||||
@utility card-glass-hover {
|
||||
transition: border-color 240ms ease, box-shadow 240ms ease, transform 240ms ease;
|
||||
}
|
||||
.card-glass:hover,
|
||||
.card-glass-hover:hover {
|
||||
border-color: hsl(var(--color-primary) / 0.45);
|
||||
box-shadow: var(--shadow-volt-lg), var(--shadow-glow-primary-sm);
|
||||
}
|
||||
|
||||
/* Neon glow on focus ring for interactive elements */
|
||||
@utility glow-primary {
|
||||
box-shadow: var(--shadow-glow-primary);
|
||||
}
|
||||
@utility glow-secondary {
|
||||
box-shadow: var(--shadow-glow-secondary);
|
||||
}
|
||||
@utility glow-primary-sm {
|
||||
box-shadow: var(--shadow-glow-primary-sm);
|
||||
}
|
||||
@utility glow-secondary-sm {
|
||||
box-shadow: var(--shadow-glow-secondary-sm);
|
||||
}
|
||||
|
||||
/* Line clamp utilities - removed excessive containment */
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
@@ -2156,3 +2216,237 @@ a:hover .card-arrow-animate {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
VOLT-INSPIRED VISUAL POLISH (appended)
|
||||
-----------------------------------------------------------------------------
|
||||
Non-invasive refinements layered on top of existing styles.
|
||||
Based on Themesberg Volt Laravel Dashboard visual language:
|
||||
softer shadows, Inter typography, cleaner cards, modern focus rings,
|
||||
and improved mobile ergonomics. Functionality is unchanged.
|
||||
============================================================================= */
|
||||
|
||||
/* --- Typography baseline ------------------------------------------------- */
|
||||
html {
|
||||
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Inter", "Figtree", "Poppins", ui-sans-serif, system-ui, sans-serif;
|
||||
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
letter-spacing: -0.02em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* --- Modern card surface (opt-in via .volt-card) ------------------------- */
|
||||
.volt-card {
|
||||
background-color: hsl(var(--color-background-secondary));
|
||||
border: 1px solid hsl(var(--color-neutral) / 0.7);
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.06),
|
||||
0 1px 2px -1px rgba(15, 23, 42, 0.04);
|
||||
transition: box-shadow 0.25s ease, transform 0.25s ease,
|
||||
border-color 0.25s ease;
|
||||
}
|
||||
|
||||
.volt-card:hover {
|
||||
box-shadow: 0 10px 20px -5px rgba(15, 23, 42, 0.08),
|
||||
0 4px 6px -2px rgba(15, 23, 42, 0.04);
|
||||
border-color: hsl(var(--color-neutral));
|
||||
}
|
||||
|
||||
.dark .volt-card {
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3),
|
||||
0 1px 2px -1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.dark .volt-card:hover {
|
||||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4),
|
||||
0 8px 10px -6px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
/* --- Softer global shadow replacements ----------------------------------- */
|
||||
/* Rebalance Tailwind's shadow-lg / shadow-xl on the site to feel lighter */
|
||||
/* without removing existing utilities: targeted overrides only. */
|
||||
main .shadow-lg,
|
||||
main .shadow-xl,
|
||||
main .shadow-2xl {
|
||||
box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.08),
|
||||
0 2px 6px -2px rgba(15, 23, 42, 0.05) !important;
|
||||
}
|
||||
|
||||
.dark main .shadow-lg,
|
||||
.dark main .shadow-xl,
|
||||
.dark main .shadow-2xl {
|
||||
box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.35),
|
||||
0 2px 6px -2px rgba(0, 0, 0, 0.25) !important;
|
||||
}
|
||||
|
||||
/* --- Button refinements (additive; does not break existing) -------------- */
|
||||
button,
|
||||
a.btn-primary,
|
||||
button.btn-primary,
|
||||
[role="button"] {
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.005em;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.btn-primary:focus-visible {
|
||||
outline: 2px solid hsl(var(--color-primary) / 0.5);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* --- Form focus polish --------------------------------------------------- */
|
||||
.form-input:focus,
|
||||
input:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
box-shadow: 0 0 0 3px hsl(var(--color-primary) / 0.18);
|
||||
border-color: hsl(var(--color-primary));
|
||||
}
|
||||
|
||||
/* --- Navigation (topbar) visual lift -------------------------------------- */
|
||||
nav.scrolled,
|
||||
header.scrolled {
|
||||
backdrop-filter: saturate(180%) blur(12px);
|
||||
-webkit-backdrop-filter: saturate(180%) blur(12px);
|
||||
box-shadow: 0 1px 0 0 hsl(var(--color-neutral) / 0.6),
|
||||
0 4px 12px -6px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
/* --- Sidebar active indicator (Volt-style left accent) ------------------- */
|
||||
.sidebar-active,
|
||||
[aria-current="page"] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* --- Tables: cleaner Volt-style rows ------------------------------------- */
|
||||
table thead th {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
color: hsl(var(--color-muted));
|
||||
}
|
||||
|
||||
table tbody tr {
|
||||
transition: background-color 0.15s ease;
|
||||
}
|
||||
|
||||
table tbody tr:hover {
|
||||
background-color: hsl(var(--color-primary) / 0.04);
|
||||
}
|
||||
|
||||
.dark table tbody tr:hover {
|
||||
background-color: hsl(var(--color-primary) / 0.10);
|
||||
}
|
||||
|
||||
/* --- Badges softened ----------------------------------------------------- */
|
||||
.badge,
|
||||
[class*="bg-success"],
|
||||
[class*="bg-error"],
|
||||
[class*="bg-warning"],
|
||||
[class*="bg-info"] {
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
RESPONSIVE / MOBILE POLISH
|
||||
============================================================================= */
|
||||
|
||||
/* Tighter, safer horizontal padding on very small screens */
|
||||
@media (max-width: 480px) {
|
||||
main.container {
|
||||
padding-left: 0.875rem !important;
|
||||
padding-right: 0.875rem !important;
|
||||
}
|
||||
|
||||
/* Avoid giant rounded corners eating width on tiny screens */
|
||||
.rounded-3xl { border-radius: 1.25rem !important; }
|
||||
.rounded-2xl { border-radius: 1rem !important; }
|
||||
|
||||
/* Stack nav avatars/buttons with spacing */
|
||||
nav .gap-4 { gap: 0.75rem !important; }
|
||||
}
|
||||
|
||||
/* Prevent horizontal overflow on any page */
|
||||
html, body {
|
||||
overflow-x: hidden;
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
/* Prevent fixed navbar from covering content on short viewports */
|
||||
@media (max-height: 600px) {
|
||||
main {
|
||||
margin-top: 4.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ensure tables never force horizontal page scroll on mobile */
|
||||
@media (max-width: 768px) {
|
||||
table {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Reduce visually noisy background blobs on mobile */
|
||||
.animate-pulse-optimized {
|
||||
opacity: 0.08 !important;
|
||||
animation-duration: 8s !important;
|
||||
}
|
||||
|
||||
/* Lift touch targets inside cards */
|
||||
.volt-card button,
|
||||
.volt-card a {
|
||||
min-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Larger screens: hero/card spacing tightened */
|
||||
@media (min-width: 1024px) {
|
||||
main.container {
|
||||
padding-left: 2rem !important;
|
||||
padding-right: 2rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
DARK MODE FINE-TUNING (Volt-style deep navy)
|
||||
============================================================================= */
|
||||
.dark body {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
.dark input,
|
||||
.dark select,
|
||||
.dark textarea {
|
||||
background-color: hsl(var(--color-background-secondary)) !important;
|
||||
border-color: hsl(var(--color-neutral)) !important;
|
||||
}
|
||||
|
||||
.dark .form-input {
|
||||
background: hsl(var(--color-background-secondary) / 0.6);
|
||||
}
|
||||
|
||||
/* Subtle gradient divider accent used on the Volt dashboard footer/hero edge */
|
||||
.volt-divider {
|
||||
height: 1px;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
hsl(var(--color-neutral) / 0.9),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user