diff --git a/src/components/FlexColorStand.module.css b/src/components/FlexColorStand.module.css index 04d0511..b41f847 100644 --- a/src/components/FlexColorStand.module.css +++ b/src/components/FlexColorStand.module.css @@ -11,12 +11,19 @@ .color_block { flex: 1 0; } - .color_value { + .operate_row { padding: var(--spacing-xxs) var(--spacing-xs); font-size: var(--font-size-xs); - text-align: right; - text-transform: uppercase; - cursor: pointer; + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + gap: var(--spacing-s); + .color_value { + text-align: right; + text-transform: uppercase; + cursor: pointer; + } } } } diff --git a/src/components/FlexColorStand.tsx b/src/components/FlexColorStand.tsx index 34f6e0f..69ce77e 100644 --- a/src/components/FlexColorStand.tsx +++ b/src/components/FlexColorStand.tsx @@ -1,6 +1,7 @@ import { useMemo } from 'react'; import { useColorFunction } from '../ColorFunctionContext'; import { useCopyColor } from '../hooks/useCopyColor'; +import ContextMenu from './ContextMenu'; import styles from './FlexColorStand.module.css'; type FlexColorStandProps = { @@ -51,8 +52,11 @@ export function FlexColorStand({ color, valueMode = 'hex' }: FlexColorStandProps return (