txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add smooth color transitions to action bar buttons

Browse Source 
- Added 0.3s ease transitions for background-color and color
- Icons now smoothly transition color as well
- Matches the smooth animations on fixed buttons
- Applies to PDF and Print Friendly buttons in top action bar
This commit is contained in:
juanatsap
2025-11-16 13:48:54 +00:00
parent c456bb1637
commit 671f06cd21
1 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/main.css
+6 -2
View File
@@ -422,10 +422,12 @@ iconify-icon {
letter-spacing: -0.01em; letter-spacing: -0.01em;
height: 100%; height: 100%;
line-height: 1; line-height: 1;
transition: background-color 0.3s ease, color 0.3s ease; /* Smooth color transitions */
} }
.action-btn iconify-icon { .action-btn iconify-icon {
color: white; color: white;
transition: color 0.3s ease; /* Smooth icon color transition */
} }
.action-btn:hover { .action-btn:hover {
@@ -3718,7 +3720,8 @@ html {
/* Zoom control highlight when hovering zoom toggle button */ /* Zoom control highlight when hovering zoom toggle button */
.zoom-control.zoom-highlight { .zoom-control.zoom-highlight {
opacity: 1; opacity: 1;
box-shadow: 0 0 20px rgba(52, 152, 219, 0.6), 0 3px 10px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 10px 4px rgb(1 113 188 / 80%);
background: rgb(91 91 91);
} }
/* Hidden state for zoom control and show button */ /* Hidden state for zoom control and show button */
@@ -3873,11 +3876,12 @@ html {
border: 2px solid rgba(220, 220, 220, 0.3); border: 2px solid rgba(220, 220, 220, 0.3);
border-radius: 50%; border-radius: 50%;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
font-size: 0.75rem; font-size: 0.85rem;
font-weight: 700; font-weight: 700;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
flex-shrink: 0; flex-shrink: 0;
margin: 0 -5px 0 10px;
} }
.zoom-reset-btn #zoom-value-current { .zoom-reset-btn #zoom-value-current {