refactor

web/src/components/DialogTorrentDetailsContent/TorrentCache/style.js

@@ -0,0 +1,66 @@
+import styled, { css } from 'styled-components'
+
+import {
+  defaultBackgroundColor,
+  defaultBorderColor,
+  progressColor,
+  completeColor,
+  activeColor,
+  rangeColor,
+  gapBetweenPieces,
+  miniCacheMaxHeight,
+  borderWidth,
+} from './snakeSettings'
+
+export const ScrollNotification = styled.div`
+  margin-top: 10px;
+  text-transform: uppercase;
+  color: rgba(0, 0, 0, 0.5);
+  align-self: center;
+`
+
+export const SnakeWrapper = styled.div`
+  ${({ pieceSize, piecesInOneRow }) => css`
+    display: grid;
+    gap: ${gapBetweenPieces}px;
+    grid-template-columns: repeat(${piecesInOneRow || 'auto-fit'}, ${pieceSize}px);
+    grid-auto-rows: max-content;
+    justify-content: center;
+
+    ${piecesInOneRow &&
+    css`
+      max-height: ${miniCacheMaxHeight}px;
+      overflow: auto;
+    `}
+
+    .piece {
+      width: ${pieceSize}px;
+      height: ${pieceSize}px;
+      background: ${defaultBackgroundColor};
+      border: ${borderWidth}px solid ${defaultBorderColor};
+      display: grid;
+      align-items: end;
+
+      &-loading {
+        background: ${progressColor};
+        border-color: ${progressColor};
+      }
+      &-complete {
+        background: ${completeColor};
+        border-color: ${completeColor};
+      }
+      &-reader {
+        border-color: ${activeColor};
+      }
+    }
+
+    .reader-range {
+      border-color: ${rangeColor};
+    }
+  `}
+`
+
+export const PercentagePiece = styled.div`
+  background: ${completeColor};
+  height: ${({ percentage }) => (percentage / 100) * 12}px;
+`