juanatsap
e373a7d0ae
The menu was showing light gray text in dark theme, creating poor contrast against the white menu background. Menu text must always be dark since the menu background is always white regardless of theme. Changes: - Added dark theme overrides for .navigation-menu and .submenu-content - Force --text-dark to #1a1a1a (dark text) in dark theme for menu - Force --text-gray to #333333 (dark gray) in dark theme for menu icons - Applied same fix for auto theme when system preference is dark Result: - Menu text: Dark/black (rgb(26, 26, 26)) in all themes - Menu icons: Dark gray (rgb(51, 51, 51)) in all themes - Menu background: White (rgb(255, 255, 255)) in all themes - Proper contrast and readability restored Test created: 68-menu-colors-dark-theme-test.mjs Screenshots: menu-light-theme.png, menu-dark-theme.png
379 lines
9.1 KiB
CSS
379 lines
9.1 KiB
CSS
/* Hamburger button */
|
|
.hamburger-btn {
|
|
background: transparent;
|
|
border: none;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
padding: 0.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: background-color 0.2s ease;
|
|
border-radius: 4px;
|
|
margin: 0 0.5rem;
|
|
position: relative; /* For CSS-only hover trigger */
|
|
}
|
|
|
|
|
|
.hamburger-btn:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.hamburger-btn:active {
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
/* Navigation Menu */
|
|
.navigation-menu {
|
|
position: fixed;
|
|
top: 50px; /* Height of action bar */
|
|
left: 0;
|
|
width: 280px;
|
|
max-height: 0;
|
|
background: #ffffff;
|
|
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.15);
|
|
transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
|
|
overflow-y: auto;
|
|
z-index: 1000; /* Above fixed buttons (z-index: 999) */
|
|
pointer-events: none; /* Disable pointer events when hidden */
|
|
opacity: 0;
|
|
}
|
|
|
|
/* Pure CSS Menu Activation - Show menu when hovering hamburger OR menu */
|
|
/* Show when hovering the hamburger button (adjacent in DOM after site-title-left) */
|
|
.hamburger-btn:hover ~ .navigation-menu,
|
|
.hamburger-btn:focus ~ .navigation-menu,
|
|
/* Show when hovering the menu itself */
|
|
.navigation-menu:hover,
|
|
/* Legacy class for backward compatibility */
|
|
.navigation-menu.menu-hover,
|
|
.navigation-menu.menu-open {
|
|
max-height: calc(100vh - 60px); /* Viewport height minus header + some spacing */
|
|
pointer-events: auto; /* Enable pointer events when visible */
|
|
opacity: 1;
|
|
}
|
|
|
|
.menu-content {
|
|
padding: 1rem 0;
|
|
}
|
|
|
|
.menu-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 0.875rem 1.5rem;
|
|
color: var(--text-dark);
|
|
text-decoration: none;
|
|
transition: background-color 0.2s ease, color 0.2s ease;
|
|
font-size: 0.95rem;
|
|
font-weight: 500;
|
|
border-left: 3px solid transparent;
|
|
}
|
|
|
|
.menu-item:hover {
|
|
background-color: rgba(0, 102, 204, 0.08);
|
|
color: var(--accent-blue);
|
|
border-left-color: var(--accent-blue);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.menu-item iconify-icon {
|
|
color: var(--text-gray);
|
|
flex-shrink: 0;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.menu-item:hover iconify-icon {
|
|
color: var(--accent-blue);
|
|
}
|
|
|
|
/* Menu item action controls (Expand All, Collapse All) */
|
|
/* Removed centered text styling - action items now behave like regular menu items */
|
|
|
|
/* Remove extra padding - all menu items should align consistently */
|
|
|
|
/* Submenu styles - hover triggered, opens to the right */
|
|
.menu-item-submenu {
|
|
position: relative;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
padding: 0 0 1rem 0;
|
|
}
|
|
|
|
.menu-item.has-submenu {
|
|
justify-content: space-between;
|
|
position: relative;
|
|
}
|
|
|
|
.submenu-arrow {
|
|
transition: transform 0.2s ease;
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* Rotate arrow slightly on hover */
|
|
.menu-item-submenu:hover .submenu-arrow {
|
|
transform: translateX(3px);
|
|
}
|
|
|
|
.submenu-content {
|
|
position: fixed; /* Changed from absolute to fixed to break out of parent overflow */
|
|
left: 232px; /* Slight overlap with menu to eliminate any gap */
|
|
background: #ffffff;
|
|
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);
|
|
border-radius: 8px;
|
|
min-width: 250px;
|
|
max-width: 300px;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translateX(-3px);
|
|
transition: all 0.3s ease;
|
|
z-index: 1000; /* Higher z-index to appear above everything */
|
|
padding: 0.5rem 0;
|
|
max-height: calc(100vh - 100px); /* Ensure it fits viewport */
|
|
overflow-y: auto; /* Scroll if content is too long */
|
|
}
|
|
|
|
/* Show submenu when hovering the submenu container OR the submenu itself */
|
|
.menu-item-submenu:hover .submenu-content,
|
|
.submenu-content:hover {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
/* Legacy class for JS compatibility */
|
|
.menu-item-submenu.submenu-open .submenu-arrow {
|
|
transform: translateX(3px);
|
|
}
|
|
|
|
.menu-item-submenu.submenu-open .submenu-content {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.submenu-content .menu-item {
|
|
padding: 0.875rem 1.5rem;
|
|
font-size: 0.9rem;
|
|
border-left: 3px solid transparent;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.submenu-content .menu-item:first-child {
|
|
border-top-left-radius: 8px;
|
|
border-top-right-radius: 8px;
|
|
}
|
|
|
|
.submenu-content .menu-item:last-child {
|
|
border-bottom-left-radius: 8px;
|
|
border-bottom-right-radius: 8px;
|
|
}
|
|
|
|
/* ========== Menu Sections with Separators ========== */
|
|
/* Quick Actions section - always visible */
|
|
.menu-section-wrapper {
|
|
padding: 0.5rem 1.5rem 1rem;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Remove border from last visible section */
|
|
.menu-content > *:last-child,
|
|
.menu-content > div:last-child {
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
/* ========== Menu Controls & Actions (Always Visible) ========== */
|
|
/* Always visible in hamburger menu at all screen sizes */
|
|
.menu-controls-section,
|
|
.menu-actions-section {
|
|
display: block;
|
|
padding: 0.5rem 1.5rem 1rem;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.menu-item-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 0.875rem 0 0.875rem 0;
|
|
color: var(--text-dark);
|
|
font-size: 0.85rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
cursor: default;
|
|
}
|
|
|
|
/* Disable hover effect for headers */
|
|
.menu-item-header:hover {
|
|
background-color: transparent !important;
|
|
color: var(--text-dark) !important;
|
|
border-left-color: transparent !important;
|
|
}
|
|
|
|
.menu-item-header iconify-icon {
|
|
color: var(--text-gray);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.menu-item-header:hover iconify-icon {
|
|
color: var(--text-gray) !important;
|
|
}
|
|
|
|
.menu-item-header span {
|
|
flex: 1;
|
|
}
|
|
|
|
.menu-control-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0.75rem 0;
|
|
}
|
|
|
|
.menu-control-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
color: var(--text-dark);
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.menu-control-label iconify-icon {
|
|
color: var(--text-gray);
|
|
}
|
|
|
|
.menu-action-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
padding: 0.875rem 1rem;
|
|
margin: 0.25rem 0;
|
|
background: rgba(0, 0, 0, 0.03);
|
|
border: none;
|
|
border-radius: 8px;
|
|
color: var(--text-dark);
|
|
text-decoration: none;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
width: 100%;
|
|
}
|
|
|
|
.menu-action-btn:hover {
|
|
background: rgba(0, 102, 204, 0.08);
|
|
color: var(--accent-blue);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.menu-action-btn iconify-icon {
|
|
color: var(--text-gray);
|
|
flex-shrink: 0;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.menu-action-btn:hover iconify-icon {
|
|
color: var(--accent-blue);
|
|
}
|
|
|
|
/* PDF button in menu - White bg with red icon on hover */
|
|
.menu-pdf-btn:hover,
|
|
.menu-pdf-btn.pdf-hover-sync {
|
|
background: white !important;
|
|
color: #e74c3c !important;
|
|
}
|
|
|
|
.menu-pdf-btn:hover iconify-icon,
|
|
.menu-pdf-btn.pdf-hover-sync iconify-icon {
|
|
color: #e74c3c !important;
|
|
}
|
|
|
|
/* Print button in menu - White bg with green icon on hover */
|
|
.menu-print-btn:hover,
|
|
.menu-print-btn.print-hover-sync {
|
|
background: white !important;
|
|
color: #27ae60 !important;
|
|
}
|
|
|
|
.menu-print-btn:hover iconify-icon,
|
|
.menu-print-btn.print-hover-sync iconify-icon {
|
|
color: #27ae60 !important;
|
|
}
|
|
|
|
/* Section icons in titles */
|
|
.section-icon {
|
|
vertical-align: middle;
|
|
margin-right: 0.5rem;
|
|
color: #7d7d7d;
|
|
}
|
|
|
|
/* Add invisible separator (blank space) below section titles */
|
|
#experience .section-title,
|
|
#awards .section-title,
|
|
#courses .section-title,
|
|
#projects .section-title {
|
|
margin-bottom: 40px !important;
|
|
}
|
|
|
|
/* Smooth scrolling */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* Add scroll padding to account for fixed header */
|
|
html {
|
|
scroll-padding-top: 70px; /* Action bar height + some spacing */
|
|
}
|
|
|
|
/* Mobile responsive */
|
|
@media (max-width: 768px) {
|
|
.navigation-menu {
|
|
width: 240px;
|
|
}
|
|
|
|
.menu-item {
|
|
padding: 0.75rem 1rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.site-title {
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Hide menu overlay on print */
|
|
@media print {
|
|
.navigation-menu {
|
|
display: none !important;
|
|
}
|
|
|
|
.hamburger-btn {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* ==============================================================================
|
|
DARK THEME - Menu Text Colors Override
|
|
============================================================================== */
|
|
/* Navigation menu always has white background, so text must always be dark */
|
|
[data-color-theme="dark"] .navigation-menu,
|
|
[data-color-theme="dark"] .navigation-menu .submenu-content {
|
|
/* Menu items */
|
|
--text-dark: #1a1a1a; /* Force dark text for white menu background */
|
|
--text-gray: #333333; /* Force dark gray for icons on white background */
|
|
}
|
|
|
|
/* Auto theme - dark mode */
|
|
@media (prefers-color-scheme: dark) {
|
|
[data-color-theme="auto"] .navigation-menu,
|
|
[data-color-theme="auto"] .navigation-menu .submenu-content {
|
|
/* Menu items */
|
|
--text-dark: #1a1a1a; /* Force dark text for white menu background */
|
|
--text-gray: #333333; /* Force dark gray for icons on white background */
|
|
}
|
|
}
|
|
|