diff --git a/src/components/node/ImageSwitcher/styles.scss b/src/components/node/ImageSwitcher/styles.scss index b54d77ba..dae7fef9 100644 --- a/src/components/node/ImageSwitcher/styles.scss +++ b/src/components/node/ImageSwitcher/styles.scss @@ -2,24 +2,21 @@ width: 100%; height: 0; position: relative; - z-index: 2; + z-index: 4; } .switcher { position: absolute; - background: transparentize(black, 0.5); + background: darken($content_bg, 2%); display: flex; - right: $gap; - top: $gap; + left: 50%; + transform: translate(-50%, 0); + top: 0; border-radius: 24px; - padding: 0 3px; + padding: 0 13px; flex-wrap: wrap; transition: background-color 0.5s; - &:hover { - background: transparentize(black, 0.2); - } - & > div { width: 30px; height: 30px; @@ -28,19 +25,14 @@ display: flex; align-items: center; justify-content: center; - opacity: 0.5; transition: opacity 0.25s; - - &:hover { - opacity: 1; - } + opacity: 0.5; &::after { content: ' '; display: block; width: 14px; height: 14px; - // background: white; border-radius: 8px; box-shadow: inset white 0 0 0 2px; transform: scale(0.5); diff --git a/src/components/node/NodeImageBlock/index.tsx b/src/components/node/NodeImageBlock/index.tsx index 9fe22919..0741da31 100644 --- a/src/components/node/NodeImageBlock/index.tsx +++ b/src/components/node/NodeImageBlock/index.tsx @@ -62,13 +62,6 @@ const NodeImageBlock: FC = ({ node, is_loading, updateLayout, modalShowP return (
- -
{(is_loading || !loaded[0] || !images.length) && (
@@ -94,6 +87,13 @@ const NodeImageBlock: FC = ({ node, is_loading, updateLayout, modalShowP
))}
+ +
); };