diff --git a/static/css/main.css b/static/css/main.css index 1efc330..e56d0e6 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -438,14 +438,38 @@ iconify-icon { color: #27ae60; } +/* PDF Download button - gray by default, red on hover */ +.pdf-btn { + background: transparent !important; /* Transparent like other buttons */ + color: white !important; +} + +.pdf-btn:hover, +.pdf-btn.pdf-hover-sync { + background: #cd6060 !important; /* PDF red on hover */ + color: white !important; +} + +.pdf-btn iconify-icon { + color: white !important; + filter: brightness(0) invert(1); /* Always white */ + transition: filter 0.3s ease; +} + +.pdf-btn:hover iconify-icon { + color: white !important; + filter: brightness(0) invert(1); /* Keep white on hover */ +} + /* Print Friendly button - transparent by default, green on hover */ .print-btn { background: transparent; } -.print-btn:hover { - background: #27ae60; - color: white; +.print-btn:hover, +.print-btn.print-hover-sync { + background: #27ae60 !important; + color: white !important; } .print-btn:hover iconify-icon { @@ -2655,6 +2679,18 @@ text-align: center; color: var(--accent-blue); } +/* Print button in menu - Green hover to match other print buttons */ +.menu-print-btn:hover, +.menu-print-btn.print-hover-sync { + background: rgba(39, 174, 96, 0.08) !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; @@ -3861,10 +3897,21 @@ html { outline-offset: 2px; } -/* Mobile Responsive - Smaller on mobile */ +/* Mobile Responsive - Hide most buttons, keep only download and info */ @media (max-width: 768px) { - .zoom-control { - display: none; /* Hide zoom control on mobile - not useful on small screens */ + .zoom-control, + .zoom-toggle-btn, + .shortcuts-btn, + .print-friendly-btn, + .back-to-top { + display: none !important; /* Hide these buttons on mobile */ + } + + /* Reposition download button to be above info button (right side) */ + .download-btn { + bottom: 6rem; /* Above info button */ + left: auto; + right: 2rem; /* Right side like info button */ } } @@ -3976,7 +4023,78 @@ html { .shortcuts-btn:active { transform: translateY(-1px); - box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); +} + +/* Print-Friendly Button (above shortcuts) */ +.print-friendly-btn { + position: fixed; + bottom: 14rem; /* Above zoom button */ + left: 2rem; + width: 50px; + height: 50px; + background: var(--black-bar); + color: white; + border: none; + border-radius: 50%; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); + transition: all 0.3s ease; + z-index: 999; + opacity: 0.6; +} + +.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 */ +} + +/* Download Button (above print-friendly) */ +.download-btn { + position: fixed; + bottom: 18rem; /* Above print-friendly button */ + left: 2rem; + width: 50px; + height: 50px; + background: var(--black-bar); + color: white; + border: none; + border-radius: 50%; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); + transition: all 0.3s ease; + z-index: 999; + opacity: 0.6; +} + +.download-btn { + background: var(--black-bar); /* Gray by default like other buttons */ + opacity: 0.6; /* Match other buttons */ +} + +.download-btn:hover, +.download-btn.pdf-hover-sync { + opacity: 1; + transform: translateY(-3px); + box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); + background: #cd6060 !important; /* PDF red on hover */ +} + +.download-btn iconify-icon { + filter: brightness(0) invert(1); /* Always white */ + transition: filter 0.3s ease; +} + +.download-btn:hover iconify-icon { + filter: brightness(0) invert(1); /* Keep white on hover */ } /* Mobile adjustments */ diff --git a/templates/index.html b/templates/index.html index 5114d5e..b79e41c 100644 --- a/templates/index.html +++ b/templates/index.html @@ -138,6 +138,8 @@ {{template "error-toast" .}} {{template "back-to-top" .}} {{template "info-button" .}} + {{template "download-button" .}} + {{template "print-friendly-button" .}} {{template "zoom-toggle-button" .}} {{template "shortcuts-button" .}} {{template "info-modal" .}} diff --git a/templates/partials/navigation/action-buttons.html b/templates/partials/navigation/action-buttons.html index 8b87c9d..51c3030 100644 --- a/templates/partials/navigation/action-buttons.html +++ b/templates/partials/navigation/action-buttons.html @@ -2,16 +2,31 @@
diff --git a/templates/partials/navigation/hamburger-menu.html b/templates/partials/navigation/hamburger-menu.html index 2d97c30..3763ece 100644 --- a/templates/partials/navigation/hamburger-menu.html +++ b/templates/partials/navigation/hamburger-menu.html @@ -205,11 +205,20 @@
- diff --git a/templates/partials/widgets/download-button.html b/templates/partials/widgets/download-button.html new file mode 100644 index 0000000..76ad0de --- /dev/null +++ b/templates/partials/widgets/download-button.html @@ -0,0 +1,17 @@ +{{define "download-button"}} + + +{{end}} diff --git a/templates/partials/widgets/print-friendly-button.html b/templates/partials/widgets/print-friendly-button.html new file mode 100644 index 0000000..a5feded --- /dev/null +++ b/templates/partials/widgets/print-friendly-button.html @@ -0,0 +1,19 @@ +{{define "print-friendly-button"}} + + +{{end}}