607 lines
16 KiB
CSS
607 lines
16 KiB
CSS
@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 {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
max-width: 100vw !important;
|
|
overflow-x: hidden !important;
|
|
}
|
|
|
|
/* Fix viewport overflow on all container levels */
|
|
body, html {
|
|
width: 100%;
|
|
max-width: 100vw;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.itinerary-timeline-page {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.main-top-bar {
|
|
position: sticky;
|
|
top: 0;
|
|
height: var(--main-header-height);
|
|
z-index: 50;
|
|
background-color: var(--surface);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.sub-nav-menu {
|
|
position: sticky;
|
|
top: var(--main-header-height);
|
|
height: var(--sub-nav-height);
|
|
z-index: 40;
|
|
width: 100% !important;
|
|
margin: 0 !important;
|
|
border-radius: 0 !important;
|
|
box-shadow: none !important;
|
|
border-bottom: 1px solid var(--border);
|
|
background-color: var(--surface);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Master viewport wrapper - contains entire itinerary */
|
|
.itinerary-viewport {
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
height: 100dvh !important;
|
|
width: 100vw !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.itinerary-viewport-wrapper {
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
height: 100dvh !important;
|
|
width: 100vw !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
/* Global sticky header zone - locks main header + sub-nav at top */
|
|
.global-sticky-header-zone {
|
|
position: sticky !important;
|
|
top: 0;
|
|
z-index: 100 !important;
|
|
background-color: var(--surface);
|
|
color: var(--text-primary);
|
|
flex-shrink: 0 !important;
|
|
}
|
|
|
|
/* Fixed header block (handled at parent TourDetailPage level) */
|
|
.fixed-top-header-block {
|
|
flex-shrink: 0 !important;
|
|
width: 100% !important;
|
|
background-color: var(--surface);
|
|
color: var(--text-primary);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
/* Timeline scroll container - main scrollable region */
|
|
.directory-scroll-viewport {
|
|
flex: 1 !important;
|
|
overflow-y: auto !important;
|
|
position: relative !important;
|
|
z-index: 10 !important;
|
|
width: 100% !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
background-color: var(--background);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.timeline-scroll-container {
|
|
flex: 1 !important;
|
|
overflow-y: auto !important;
|
|
position: relative !important;
|
|
z-index: 10 !important;
|
|
width: 100% !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
/* Scrollable timeline area - removes all padding gaps */
|
|
.timeline-scroll-area {
|
|
flex: 1 1 0% !important;
|
|
overflow-y: auto !important;
|
|
width: 100% !important;
|
|
padding: 0 !important;
|
|
margin-top: 0px !important;
|
|
background-color: var(--background);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.timeline-scroll-viewport {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Main timeline container with dynamic height support */
|
|
.itinerary-timeline-container {
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
width: 100% !important;
|
|
max-width: 100vw !important;
|
|
height: auto !important;
|
|
overflow-x: hidden !important;
|
|
position: relative !important;
|
|
}
|
|
|
|
/* Individual folder node wrapper - base stage container */
|
|
.folder-node-wrapper {
|
|
width: 100% !important;
|
|
background-color: var(--surface);
|
|
color: var(--text-primary);
|
|
margin-bottom: 0px !important;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
/* Individual stage card block - backwards compatibility */
|
|
.stage-card-block {
|
|
width: 100% !important;
|
|
background-color: var(--surface);
|
|
color: var(--text-primary);
|
|
margin-bottom: 1px !important;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Stage section - semantic wrapper */
|
|
.stage-section {
|
|
position: relative;
|
|
width: 100%;
|
|
display: block !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
/* Folder header row - sticky positioning for pinned effect */
|
|
.folder-header-row {
|
|
position: sticky !important;
|
|
top: 0px !important;
|
|
z-index: 30 !important;
|
|
width: 100% !important;
|
|
padding: 12px 16px !important;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: var(--surface) !important;
|
|
color: var(--text-primary);
|
|
cursor: pointer;
|
|
border-bottom: 1px solid var(--border);
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.folder-header-row:hover {
|
|
background-color: var(--surface-muted) !important;
|
|
}
|
|
|
|
/* Stage header row - sticky positioning for pinned effect */
|
|
.stage-header-row {
|
|
position: sticky !important;
|
|
top: 0px !important;
|
|
z-index: 40 !important;
|
|
width: 100% !important;
|
|
padding: 12px 16px !important;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: var(--surface) !important;
|
|
color: var(--text-primary);
|
|
cursor: pointer;
|
|
border-bottom: 1px solid var(--border);
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.stage-header-row:hover {
|
|
background-color: var(--surface-muted) !important;
|
|
}
|
|
|
|
/* Alternate sticky header styling (kept for backwards compatibility) */
|
|
.stage-sticky-header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 30;
|
|
background-color: #ffffff;
|
|
width: 100%;
|
|
padding: 8px 16px;
|
|
border-bottom: 1px solid #f3f4f6;
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Folder child content box - Grid accordion for exclusive expansion */
|
|
.folder-child-content-box {
|
|
display: grid !important;
|
|
grid-template-rows: 0fr;
|
|
transition: grid-template-rows 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Expanded folder state - children visible */
|
|
.folder-child-content-box.expanded {
|
|
grid-template-rows: 1fr !important;
|
|
}
|
|
|
|
/* Wrapper for child nodes list - proper z-index layering */
|
|
.child-nodes-list-wrapper {
|
|
position: relative;
|
|
z-index: 20 !important;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Child nodes list - content container within expanded folder */
|
|
.child-nodes-list {
|
|
overflow: hidden;
|
|
min-height: 0px;
|
|
padding: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
/* CSS Grid Accordion Engine - Smooth expand/collapse without layout shattering */
|
|
.stage-accordion-content {
|
|
display: grid !important;
|
|
grid-template-rows: 0fr;
|
|
transition: grid-template-rows 0.25s ease-out !important;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Expanded state - opens to full content height */
|
|
.stage-accordion-content.expanded {
|
|
grid-template-rows: 1fr !important;
|
|
}
|
|
|
|
/* Scrollable content body - lower z-index so it scrolls behind header */
|
|
.stage-scrollable-content-body {
|
|
position: relative;
|
|
z-index: 20 !important;
|
|
width: 100%;
|
|
padding: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
/* Inner content wrapper - structural compliance */
|
|
.stage-points-list {
|
|
overflow: hidden;
|
|
min-height: 0px;
|
|
padding: 0 16px 16px 16px;
|
|
}
|
|
|
|
/* Legacy accordion container classes (for backwards compatibility) */
|
|
.stage-accordion-transition-container {
|
|
display: grid !important;
|
|
grid-template-rows: 0fr;
|
|
transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
.stage-accordion-transition-container.expanded {
|
|
grid-template-rows: 1fr !important;
|
|
}
|
|
|
|
.stage-accordion-inner-content {
|
|
overflow: hidden !important;
|
|
min-height: 0px !important;
|
|
width: 100% !important;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.stage-content-body {
|
|
width: 100%;
|
|
padding: 16px;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.banner-location-text {
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
max-width: 80px;
|
|
display: inline-block;
|
|
vertical-align: bottom;
|
|
cursor: help; /* Hiển thị biểu tượng giúp đỡ để gợi ý có tooltip */
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.banner-location-text {
|
|
max-width: 150px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes bell-ring {
|
|
0% { transform: rotate(0); }
|
|
5% { transform: rotate(30deg); }
|
|
10% { transform: rotate(-28deg); }
|
|
15% { transform: rotate(34deg); }
|
|
20% { transform: rotate(-32deg); }
|
|
25% { transform: rotate(30deg); }
|
|
30% { transform: rotate(-28deg); }
|
|
35% { transform: rotate(26deg); }
|
|
40% { transform: rotate(-24deg); }
|
|
45% { transform: rotate(22deg); }
|
|
50% { transform: rotate(-20deg); }
|
|
55% { transform: rotate(18deg); }
|
|
60% { transform: rotate(-16deg); }
|
|
65% { transform: rotate(14deg); }
|
|
70% { transform: rotate(-12deg); }
|
|
75% { transform: rotate(10deg); }
|
|
80% { transform: rotate(-8deg); }
|
|
85% { transform: rotate(6deg); }
|
|
90% { transform: rotate(-4deg); }
|
|
95% { transform: rotate(2deg); }
|
|
100% { transform: rotate(0); }
|
|
}
|
|
|
|
.animate-ring {
|
|
display: inline-block !important;
|
|
transform-origin: top center !important;
|
|
transform-box: fill-box !important;
|
|
animation: bell-ring 1.5s ease-in-out infinite !important;
|
|
}
|
|
|
|
/* Light theme overrides for Member Dashboard */
|
|
html.light body,
|
|
html.light .app-container {
|
|
background-color: #f8fafc;
|
|
color: #334155;
|
|
}
|
|
|
|
html.light .bg-slate-950 {
|
|
background-color: #f8fafc !important;
|
|
color: #1e293b !important;
|
|
}
|
|
|
|
html.light .bg-slate-900 {
|
|
background-color: #f1f5f9 !important;
|
|
color: #1e293b !important;
|
|
}
|
|
|
|
html.light .bg-slate-900\/60 {
|
|
background-color: rgba(255, 255, 255, 0.7) !important;
|
|
border-color: #e2e8f0 !important;
|
|
}
|
|
|
|
html.light .bg-slate-900\/30 {
|
|
background-color: rgba(255, 255, 255, 0.4) !important;
|
|
border-color: #e2e8f0 !important;
|
|
}
|
|
|
|
html.light .bg-slate-950\/40 {
|
|
background-color: #f1f5f9 !important;
|
|
}
|
|
|
|
html.light .text-white,
|
|
html.light .text-white\/95,
|
|
html.light .text-slate-100 {
|
|
color: #0f172a !important;
|
|
}
|
|
|
|
html.light .text-slate-400,
|
|
html.light .text-slate-350,
|
|
html.light .text-slate-300 {
|
|
color: #475569 !important;
|
|
}
|
|
|
|
html.light .border-slate-800,
|
|
html.light .border-slate-800\/60,
|
|
html.light .border-slate-800\/80,
|
|
html.light .border-slate-900,
|
|
html.light .border-slate-700\/50 {
|
|
border-color: #cbd5e1 !important;
|
|
}
|
|
|
|
html.light .hover\:bg-slate-800\/50:hover {
|
|
background-color: rgba(226, 232, 240, 0.5) !important;
|
|
}
|
|
|
|
html.light .hover\:bg-slate-850:hover,
|
|
html.light .hover\:bg-slate-800:hover,
|
|
html.light .hover\:bg-white\/10:hover,
|
|
html.light .hover\:bg-white\/5:hover {
|
|
background-color: #e2e8f0 !important;
|
|
color: #0f172a !important;
|
|
}
|
|
|
|
/* Chat bubble styling overrides */
|
|
html.light .bg-slate-850\/50 {
|
|
background-color: rgba(241, 245, 249, 0.5) !important;
|
|
}
|
|
|
|
html.light .bg-slate-850 {
|
|
background-color: #f1f5f9 !important;
|
|
color: #0f172a !important;
|
|
}
|
|
|
|
html.light .bg-slate-800\/60 {
|
|
background-color: rgba(226, 232, 240, 0.6) !important;
|
|
}
|
|
|
|
html.light .bg-slate-800\/40 {
|
|
background-color: rgba(226, 232, 240, 0.4) !important;
|
|
}
|
|
|
|
html.light .bg-slate-950\/60 {
|
|
background-color: rgba(255, 255, 255, 0.8) !important;
|
|
}
|
|
|
|
html.light .bg-rose-950\/10 {
|
|
background-color: #fef2f2 !important;
|
|
border-color: #fee2e2 !important;
|
|
}
|
|
|
|
html.light .text-rose-400 {
|
|
color: #dc2626 !important;
|
|
}
|
|
|
|
html.light .bg-rose-950\/40 {
|
|
background-color: #fee2e2 !important;
|
|
}
|
|
|
|
html.light .border-rose-900\/50 {
|
|
border-color: #fecaca !important;
|
|
}
|
|
|
|
/* Additional light mode overrides for MemberDashboard and complex classes */
|
|
html.light [class*="bg-slate-800"] {
|
|
background-color: #f0f1f5 !important;
|
|
color: #0f172a !important;
|
|
}
|
|
|
|
html.light [class*="bg-slate-900"] {
|
|
background-color: #f1f5f9 !important;
|
|
color: #0f172a !important;
|
|
}
|
|
|
|
html.light [class*="text-slate-400"],
|
|
html.light [class*="text-slate-350"],
|
|
html.light [class*="text-slate-300"] {
|
|
color: #475569 !important;
|
|
}
|
|
|
|
html.light [class*="border-slate-900"],
|
|
html.light [class*="border-slate-800"] {
|
|
border-color: #cbd5e1 !important;
|
|
}
|
|
|
|
html.light .hover\:bg-slate-900:hover {
|
|
background-color: #e2e8f0 !important;
|
|
color: #0f172a !important;
|
|
}
|
|
|
|
html.light .hover\:bg-white:hover {
|
|
background-color: #f8fafc !important;
|
|
}
|
|
|
|
/* Ensure text contrast in light mode */
|
|
html.light .text-white {
|
|
color: #0f172a !important;
|
|
}
|
|
|
|
html.light .text-gray-50 {
|
|
color: #0f172a !important;
|
|
}
|
|
|
|
html.light .text-gray-100 {
|
|
color: #1e293b !important;
|
|
}
|
|
|
|
/* Tailwind Dark Mode - ensure dark classes work when in dark theme */
|
|
html.dark .dark\:bg-slate-800 {
|
|
background-color: #1e293b !important;
|
|
}
|
|
|
|
html.dark .dark\:text-slate-200 {
|
|
color: #e2e8f0 !important;
|
|
}
|
|
|
|
html.dark .dark\:border-slate-700 {
|
|
border-color: #334155 !important;
|
|
}
|
|
|
|
html.dark .dark\:hover\:bg-slate-700:hover {
|
|
background-color: #334155 !important;
|
|
} |