diff --git a/src/components/image/useImageZoomControls.ts b/src/components/image/useImageZoomControls.ts index f4e9b80f..b6c83472 100644 --- a/src/components/image/useImageZoomControls.ts +++ b/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]); diff --git a/src/site/viewerjs.css b/src/site/viewerjs.css index e28f93cb..d6ede4ae 100644 --- a/src/site/viewerjs.css +++ b/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; +}