fixed image switcher

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);

src/components/node/NodeImageBlock/index.tsx

@@ -62,13 +62,6 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout, modalShowP
 
   return (
     <div className={classNames(styles.wrap, { is_loading, is_animated })}>
-      <ImageSwitcher
-        total={images.length}
-        current={current}
-        onChange={setCurrent}
-        loaded={loaded}
-      />
-
       <div className={styles.image_container} style={{ height }} onClick={onOpenPhotoSwipe}>
         {(is_loading || !loaded[0] || !images.length) && (
           <div className={styles.placeholder}>
@@ -94,6 +87,13 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout, modalShowP
           </div>
         ))}
       </div>
+
+      <ImageSwitcher
+        total={images.length}
+        current={current}
+        onChange={setCurrent}
+        loaded={loaded}
+      />
     </div>
   );
 };