feat: enhance zoom and print button UX
Print Button Improvements: - Hover shows white background with green icon (was green bg + white icon) - Applied to all print buttons: fixed, action bar, and menu - Default state remains dark gray with white icon Zoom Control Improvements: - Text now 100% white (was 70-95% opacity) for better readability - Increased font sizes: labels 0.95rem (was 0.8rem), current value 1.05rem (was 0.9rem) - Hover zoom toggle button highlights zoom control with blue glow shadow - Active zoom button uses semi-transparent blue rgba(52, 152, 219, 0.5) instead of solid Z-Index Fix: - Hamburger menu now appears above fixed buttons (z-index: 1000 vs 999)
This commit is contained in:
+40
-18
@@ -461,19 +461,25 @@ iconify-icon {
|
||||
filter: brightness(0) invert(1); /* Keep white on hover */
|
||||
}
|
||||
|
||||
/* Print Friendly button - transparent by default, green on hover */
|
||||
/* Print Friendly button - white bg with green icon on hover */
|
||||
.print-btn {
|
||||
background: transparent;
|
||||
background: transparent !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.print-btn:hover,
|
||||
.print-btn.print-hover-sync {
|
||||
background: #27ae60 !important;
|
||||
color: white !important;
|
||||
background: white !important; /* White background on hover */
|
||||
color: #27ae60 !important; /* Green icon on hover */
|
||||
}
|
||||
|
||||
.print-btn:hover iconify-icon {
|
||||
color: white;
|
||||
.print-btn iconify-icon {
|
||||
color: white; /* White icon by default */
|
||||
}
|
||||
|
||||
.print-btn:hover iconify-icon,
|
||||
.print-btn.print-hover-sync iconify-icon {
|
||||
color: #27ae60; /* Green icon on hover */
|
||||
}
|
||||
|
||||
/* CV Length Toggle - Center of action bar */
|
||||
@@ -2435,7 +2441,7 @@ text-align: center;
|
||||
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: 99;
|
||||
z-index: 1000; /* Above fixed buttons (z-index: 999) */
|
||||
pointer-events: none; /* Disable pointer events when hidden */
|
||||
opacity: 0;
|
||||
}
|
||||
@@ -2679,10 +2685,10 @@ text-align: center;
|
||||
color: var(--accent-blue);
|
||||
}
|
||||
|
||||
/* Print button in menu - Green hover to match other print buttons */
|
||||
/* Print button in menu - White bg with green icon on hover */
|
||||
.menu-print-btn:hover,
|
||||
.menu-print-btn.print-hover-sync {
|
||||
background: rgba(39, 174, 96, 0.08) !important;
|
||||
background: white !important;
|
||||
color: #27ae60 !important;
|
||||
}
|
||||
|
||||
@@ -3709,6 +3715,12 @@ html {
|
||||
user-select: none; /* Prevent text selection while dragging */
|
||||
}
|
||||
|
||||
/* Zoom control highlight when hovering zoom toggle button */
|
||||
.zoom-control.zoom-highlight {
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 20px rgba(52, 152, 219, 0.6), 0 3px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Hidden state for zoom control and show button */
|
||||
.zoom-hidden {
|
||||
display: none !important;
|
||||
@@ -3751,17 +3763,17 @@ html {
|
||||
|
||||
/* Zoom Values (Labels) */
|
||||
.zoom-value {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 1); /* 100% white */
|
||||
font-size: 0.95rem; /* Bigger */
|
||||
font-weight: 500; /* Medium weight */
|
||||
min-width: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.zoom-value-current {
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
color: rgba(255, 255, 255, 1); /* 100% white */
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
font-size: 1.05rem; /* Bigger */
|
||||
min-width: 35px;
|
||||
}
|
||||
|
||||
@@ -3979,7 +3991,7 @@ html {
|
||||
|
||||
.zoom-toggle-btn.zoom-active {
|
||||
opacity: 1;
|
||||
background: #3498db; /* Blue when active */
|
||||
background: rgba(52, 152, 219, 0.5); /* Semi-transparent blue when active */
|
||||
color: white;
|
||||
}
|
||||
|
||||
@@ -4032,8 +4044,8 @@ html {
|
||||
left: 2rem;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: var(--black-bar);
|
||||
color: white;
|
||||
background: var(--black-bar); /* Dark background by default */
|
||||
color: white; /* White icon by default */
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
@@ -4046,12 +4058,22 @@ html {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.print-friendly-btn iconify-icon {
|
||||
color: white; /* White icon by default */
|
||||
}
|
||||
|
||||
.print-friendly-btn:hover,
|
||||
.print-friendly-btn.print-hover-sync {
|
||||
opacity: 1;
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
|
||||
background: #27ae60 !important; /* Green hover */
|
||||
background: white !important; /* White background on hover */
|
||||
color: #27ae60; /* Green icon on hover */
|
||||
}
|
||||
|
||||
.print-friendly-btn:hover iconify-icon,
|
||||
.print-friendly-btn.print-hover-sync iconify-icon {
|
||||
color: #27ae60; /* Green icon on hover */
|
||||
}
|
||||
|
||||
/* Download Button (above print-friendly) */
|
||||
|
||||
Reference in New Issue
Block a user