3dtours/travelplanning
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: apply theme colors to all pages and modals - implement light/dark theme CSS variables across UI components

Browse Source
This commit is contained in:
3dtours
2026-06-23 18:28:05 +07:00
parent 7182391241
commit a64af5f9cf
18 changed files with 458 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/index.css
+113 -17
View File
@@ -1,10 +1,96 @@
@import "tailwindcss";
@layer base {
/* ============ LIGHT THEME (Default) ============ */
:root {
--main-header-height: 56px;
--sub-nav-height: 48px;
--combined-top-height: 104px;
/* Light Theme Variables - Soft Parchment & Yale Blue */
--background: #f6f0ed; /* Parchment */
--background-alt: #f9fafb; /* Light Gray Alt */
--surface: #ffffff; /* Pure White for crisp card layers */
--surface-muted: #f3f4f6; /* Muted Surface */
--surface-hover: #f9fafb; /* Surface Hover */
--border: #e5e7eb; /* Light Border */
--border-light: #f3f4f6; /* Light Border Alt */
--text-primary: #28536b; /* Yale Blue (High contrast text) */
--text-secondary: #7ea8be; /* Steel Blue */
--text-accent: #c2948a; /* Rosy Taupe */
--text-muted: #9ca3af; /* Muted Text */
--text-disabled: #d1d5db; /* Disabled Text */
--primary: #28536b; /* Yale Blue for main buttons */
--primary-hover: #1f4154; /* Darker Yale Blue */
--primary-light: #eff6ff; /* Light Blue Background */
--secondary: #7ea8be; /* Steel Blue */
--secondary-light: #f0f9ff; /* Light Secondary */
--success: #10b981; /* Green */
--success-light: #ecfdf5;
--danger: #ef4444; /* Red */
--danger-light: #fef2f2;
--warning: #f59e0b; /* Amber */
--warning-light: #fffbeb;
--info: #3b82f6; /* Blue */
--info-light: #eff6ff;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
/* Smooth theme transition */
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* ============ DARK THEME ============ */
:root.dark {
/* Dark Theme Variables - Vintage Grape & Bondi Blue */
--background: #513b56; /* Vintage Grape */
--background-alt: #434354; /* Dark Alt */
--surface: #525174; /* Dusty Grape */
--surface-muted: #626186; /* Surface Muted */
--surface-hover: #5f6b7e; /* Surface Hover */
--border: #626186; /* Border */
--border-light: #525174; /* Border Light */
--text-primary: #f8fafc; /* Soft White */
--text-secondary: #cbd5e1; /* Secondary Text */
--text-accent: #bce784; /* Lime Cream */
--text-muted: #94a3b8; /* Muted Slate */
--text-disabled: #64748b; /* Disabled Text */
--primary: #348aa7; /* Bondi Blue */
--primary-hover: #296f86; /* Darker Bondi Blue */
--primary-light: #0c2340; /* Dark Blue Background */
--secondary: #5dd39e; /* Emerald */
--secondary-light: #064e3b; /* Dark Secondary */
--success: #10b981; /* Green */
--success-light: #064e3b;
--danger: #ef4444; /* Red */
--danger-light: #3f0f0f;
--warning: #f59e0b; /* Amber */
--warning-light: #3f2009;
--info: #3b82f6; /* Blue */
--info-light: #0c2340;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
/* Smooth theme transition */
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
html, body, #root, .app-container {
@@ -33,7 +119,8 @@
top: 0;
height: var(--main-header-height);
z-index: 50;
background-color: #ffffff;
background-color: var(--surface);
color: var(--text-primary);
}
.sub-nav-menu {
@@ -45,8 +132,9 @@
margin: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
border-bottom: 1px solid #e5e7eb;
background-color: #ffffff;
border-bottom: 1px solid var(--border);
background-color: var(--surface);
color: var(--text-primary);
}
/* Master viewport wrapper - contains entire itinerary */
@@ -71,7 +159,8 @@
position: sticky !important;
top: 0;
z-index: 100 !important;
background-color: #ffffff;
background-color: var(--surface);
color: var(--text-primary);
flex-shrink: 0 !important;
}
@@ -79,8 +168,9 @@
.fixed-top-header-block {
flex-shrink: 0 !important;
width: 100% !important;
background-color: #ffffff;
border-bottom: 1px solid #e5e7eb;
background-color: var(--surface);
color: var(--text-primary);
border-bottom: 1px solid var(--border);
}
/* Timeline scroll container - main scrollable region */
@@ -92,7 +182,8 @@
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
background-color: #f8fafc;
background-color: var(--background);
color: var(--text-primary);
}
.timeline-scroll-container {
@@ -111,7 +202,8 @@
width: 100% !important;
padding: 0 !important;
margin-top: 0px !important;
background-color: #f8fafc;
background-color: var(--background);
color: var(--text-primary);
}
.timeline-scroll-viewport {
@@ -134,17 +226,19 @@
/* Individual folder node wrapper - base stage container */
.folder-node-wrapper {
width: 100% !important;
background-color: #ffffff;
background-color: var(--surface);
color: var(--text-primary);
margin-bottom: 0px !important;
display: flex;
flex-direction: column;
border-bottom: 1px solid #f3f4f6;
border-bottom: 1px solid var(--border);
}
/* Individual stage card block - backwards compatibility */
.stage-card-block {
width: 100% !important;
background-color: #ffffff;
background-color: var(--surface);
color: var(--text-primary);
margin-bottom: 1px !important;
display: flex;
flex-direction: column;
@@ -168,14 +262,15 @@
padding: 12px 16px !important;
display: flex;
align-items: center;
background-color: #ffffff !important;
background-color: var(--surface) !important;
color: var(--text-primary);
cursor: pointer;
border-bottom: 1px solid #f3f4f6;
border-bottom: 1px solid var(--border);
transition: background-color 0.2s;
}
.folder-header-row:hover {
background-color: #f9fafb !important;
background-color: var(--surface-muted) !important;
}
/* Stage header row - sticky positioning for pinned effect */
@@ -187,14 +282,15 @@
padding: 12px 16px !important;
display: flex;
align-items: center;
background-color: #ffffff !important;
background-color: var(--surface) !important;
color: var(--text-primary);
cursor: pointer;
border-bottom: 1px solid #f3f4f6;
border-bottom: 1px solid var(--border);
transition: background-color 0.2s;
}
.stage-header-row:hover {
background-color: #f9fafb !important;
background-color: var(--surface-muted) !important;
}
/* Alternate sticky header styling (kept for backwards compatibility) */