commit c22b7c6c8a3f580fe273651804f228f0b8ecdda2
parent 9e28d175fb8bc4ea7697b01e43afad59c7b15877
Author: Hunter
Date: Fri, 19 Dec 2025 21:12:05 -0500
update fullscreen toggle icon styling
Diffstat:
1 file changed, 6 insertions(+), 10 deletions(-)
diff --git a/index.html b/index.html
@@ -393,24 +393,20 @@
// Add CSS for overscroll and button
const style = doc.createElement('style');
- style.textContent = '* { overscroll-behavior: none !important; } .iframe-fullscreen-toggle { position: fixed; top: 5px; right: 5px; z-index: 10000; background: rgba(0, 0, 0, 0.2); color: white; border: none; border-radius: 4px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); } .iframe-fullscreen-toggle img { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)); opacity: 0.8; transition: opacity 0.2s; } @media (hover: hover) and (pointer: fine) { .iframe-fullscreen-toggle:hover { background: rgba(0, 0, 0, 0.35); } .iframe-fullscreen-toggle:hover img { opacity: 1; } }';
+ style.textContent = '* { overscroll-behavior: none !important; } .iframe-fullscreen-toggle { position: fixed; top: 5px; right: 5px; z-index: 10000; background: rgba(0, 0, 0, 0.2); color: white; border: none; border-radius: 4px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); -webkit-tap-highlight-color: transparent; outline: none; user-select: none; } .iframe-fullscreen-toggle svg { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)); opacity: 0.8; transition: opacity 0.2s; } @media (hover: hover) and (pointer: fine) { .iframe-fullscreen-toggle:hover { background: rgba(0, 0, 0, 0.35); } .iframe-fullscreen-toggle:hover svg { opacity: 1; } }';
doc.head.appendChild(style);
-
+
// Create fullscreen button
const existingButton = doc.getElementById('fullscreenToggle');
if (existingButton) existingButton.remove();
-
+
const button = doc.createElement('button');
button.id = 'fullscreenToggle';
button.className = 'iframe-fullscreen-toggle';
button.title = 'Toggle fullscreen';
-
- const img = doc.createElement('img');
- img.src = 'resources/fullscreen.svg';
- img.width = 20;
- img.height = 20;
- img.alt = 'Fullscreen';
- button.appendChild(img);
+
+ // Use inline SVG to avoid being affected by user's img styles
+ button.innerHTML = '<svg width="20" height="20" viewBox="0 0 14 14" fill="white"><path d="M 7,14 H 5 v 5 h 5 V 17 H 7 Z M 5,10 H 7 V 7 h 3 V 5 H 5 Z m 12,7 h -3 v 2 h 5 V 14 H 17 Z M 14,5 v 2 h 3 v 3 h 2 V 5 Z" transform="translate(-5,-5)"/></svg>';
button.addEventListener('click', function() {
parent.postMessage('toggleFullscreen', '*');