Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): tweak slider divider styling

Browse Source
This commit is contained in:
psychedelicious 2024-06-01 19:17:18 +10:00
parent 08bcc71e99
commit 8bb9571485
1 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageComparisonSlider.tsx
View File

@ -11,7 +11,7 @@ import type { ImageDTO } from 'services/api/types';
const DROP_SHADOW = 'drop-shadow(0px 0px 4px rgb(0, 0, 0))'; const DROP_SHADOW = 'drop-shadow(0px 0px 4px rgb(0, 0, 0))';
const INITIAL_POS = '50%'; const INITIAL_POS = '50%';
const HANDLE_WIDTH = 1; const HANDLE_WIDTH = 2;
const HANDLE_WIDTH_PX = `${HANDLE_WIDTH}px`; const HANDLE_WIDTH_PX = `${HANDLE_WIDTH}px`;
const HANDLE_HITBOX = 20; const HANDLE_HITBOX = 20;
const HANDLE_HITBOX_PX = `${HANDLE_HITBOX}px`; const HANDLE_HITBOX_PX = `${HANDLE_HITBOX}px`;
@ -226,15 +226,16 @@ export const ImageComparisonSlider = memo(({ firstImage, secondImage }: Props) =
bottom={0} bottom={0}
left={left} left={left}
w={HANDLE_HITBOX_PX} w={HANDLE_HITBOX_PX}
tabIndex={-1}
cursor="ew-resize" cursor="ew-resize"
filter={DROP_SHADOW} filter={DROP_SHADOW}
opacity={0.8}
color="base.50"
> >
<Box <Box
id="image-comparison-handle-divider" id="image-comparison-handle-divider"
w={HANDLE_WIDTH_PX} w={HANDLE_WIDTH_PX}
h="full" h="full"
bg="base.50" bg="currentColor"
shadow="dark-lg" shadow="dark-lg"
position="absolute" position="absolute"
top={0} top={0}