From 989fc7c6db47e46b2f1b8f389b98fce1155dfcc1 Mon Sep 17 00:00:00 2001
From: Damien De Paoli <ddp@depaoli.id.au>
Date: Sat, 4 Jan 2025 22:01:51 +1100
Subject: [PATCH] svgs cant have fill and do onHover properly, and arcs need a
 fill of none, so switched over to pngs and made the arrow match the actual
 direction of rotation

---
 templates/viewer.html | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/templates/viewer.html b/templates/viewer.html
index f9576a7..e9ce6d3 100644
--- a/templates/viewer.html
+++ b/templates/viewer.html
@@ -12,6 +12,7 @@
 .form-switch .form-check-input:focus {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23CFF4FC'/%3e%3c/svg%3e");
 }
+#tst90:hover,#tst90:focus { filter: invert(73%) sepia(27%) saturate(3970%) hue-rotate(146deg) brightness(94%) contrast(100%); }
 </style>
 
 <script src="{{ url_for( 'internal', filename='js/view_transform.js')}}"></script>
@@ -250,32 +251,35 @@
         </div>
         <div class="col col-auto pt-1">
             <button class="btn btn-outline-info p-1" title="Rotate by 90 degrees" onClick="Transform(90)">
-                <svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#rot90"/></svg>
+		<img src="{{url_for('internal', filename='rot90.png')}}" height="32" onMouseOver="this.src='{{url_for('internal', filename='rot90-invert.png')}}'" 
+		    onMouseOut="this.src='{{url_for('internal', filename='rot90.png')}}'" />
             </button>
             <button class="btn btn-outline-info p-1" title="Rotate by 180 degrees" onClick="Transform(180)">
-                <svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#rot180"/></svg>
+		<img src="{{url_for('internal', filename='rot180.png')}}" height="32" onMouseOver="this.src='{{url_for('internal', filename='rot180-invert.png')}}'"
+		    onMouseOut="this.src='{{url_for('internal', filename='rot180.png')}}'" />
             </button>
             <button class="btn btn-outline-info p-1" title="Rotate by 270 degrees" onClick="Transform(270)">
-                <svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#rot270"/></svg>
+		<img src="{{url_for('internal', filename='rot270.png')}}" height="32" onMouseOver="this.src='{{url_for('internal', filename='rot270-invert.png')}}'"
+		    onMouseOut="this.src='{{url_for('internal', filename='rot270.png')}}'" />
             </button>
             <button class="btn btn-outline-info p-1" title="Flip horizontally" onClick="Transform('fliph')">
-                <svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#flip_h"/></svg>
+                <svg width="32" height="32" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#flip_h"/></svg>
             </button>
             <button class="btn btn-outline-info p-1" title="Flip vertically" onClick="Transform('flipv')">
-                <svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#flip_v"/></svg>
+                <svg width="32" height="32" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#flip_v"/></svg>
             </button>
             <button class="btn btn-outline-info p-1" title="View in Fullscreen mode (hotkey: F)" onClick="fullscreen=true; ViewImageOrVideo()">
-                <svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#fullscreen"/></svg>
+                <svg width="32" height="32" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#fullscreen"/></svg>
             </button>
             <button class="btn btn-outline-info p-1" title="Show logs relating to this filename (hotkey: l)" onClick="JoblogSearch()">
-                <svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#log"/></svg>
+                <svg width="32" height="32" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#log"/></svg>
             </button>
             <button class="btn btn-outline-info p-1" title="View Original" onClick="window.location='/'+objs[current].url">
-                <svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#download"/></svg>
+                <svg width="32" height="32" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#download"/></svg>
             </button>
             <button id="del" class="btn btn-outline-danger p-1" title="Delete (hotkey: Del)" 
                 onClick="$.ajax({ type: 'POST', data: '&eid-0={{current}}', url: '/delete_files', success: function(data){ window.location='/'; return false; } })">
-                <svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#trash"/></svg>
+                <svg width="32" height="32" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#trash"/></svg>
             </button>
         </div>
     </div class="row">