Refine zoom button styles/positions

src/components/image/useImageZoomControls.ts

@@ -23,9 +23,8 @@ export default function useImageZoomControls(
         title: false,
         toolbar: {
           zoomIn: 1,
-          zoomOut: 1,
-          reset: 1,
-          tooltip: 1,
+          reset: 2,
+          zoomOut: 3,
         },
       });
       return () => {
@@ -46,7 +45,7 @@ export default function useImageZoomControls(
     };
   }, [imageRef, onShown]);
 
-  // On hide, reenable keyboard commands
+  // On hidden, reenable keyboard commands
   const onHide = useCallback(() =>
     setShouldRespondToKeyboardCommands?.(true),
   [setShouldRespondToKeyboardCommands]);

src/site/viewerjs.css

@@ -1,12 +1,12 @@
 @import 'viewerjs/dist/viewer.css';
 
 .viewer-canvas {
-  background-color: black !important;
+  background-color: black;
 }
 .viewer-reset::before {
   content: '1:1';
   font-size: 13px;
-  font-weight: 600;
+  font-weight: 500;
   color: #fff;
   display: inline-block;
   position: relative;
@@ -14,3 +14,47 @@
   letter-spacing: -2px;
   background-image: none;
 }
+.viewer-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 20px;
+  right: 20px;
+}
+.viewer-close::before {
+  transform: scale(1.1);
+}
+.viewer-button {
+  width: 40px;
+  height: 40px;
+}
+.viewer-button::before {
+  bottom: auto;
+  left: auto;
+}
+.viewer-button:focus {
+  box-shadow: none;
+}
+.viewer-button:active {
+  opacity: 0.5;
+}
+.viewer-toolbar > ul {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 2rem 0.25rem;
+}
+.viewer-toolbar > ul > li {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+}
+.viewer-toolbar > ul > li:focus {
+  box-shadow: none;
+}
+.viewer-reset::before {
+  left:-1px;
+}