diff --git a/src/routes/MetaDetails/StreamsList/StreamsList.js b/src/routes/MetaDetails/StreamsList/StreamsList.js index 2e0f8de86..3d10a9518 100644 --- a/src/routes/MetaDetails/StreamsList/StreamsList.js +++ b/src/routes/MetaDetails/StreamsList/StreamsList.js @@ -38,9 +38,9 @@ const StreamsList = ({ className, streamsResources }) => { } - ); diff --git a/src/routes/MetaDetails/StreamsList/styles.less b/src/routes/MetaDetails/StreamsList/styles.less index f6cc71c59..88c4389a3 100644 --- a/src/routes/MetaDetails/StreamsList/styles.less +++ b/src/routes/MetaDetails/StreamsList/styles.less @@ -1,7 +1,8 @@ +@import (reference) '~stremio-colors/dist/less/stremio-colors.less'; + .streams-list-container { display: flex; flex-direction: column; - background: var(--color-backgrounddark80); .streams-scroll-container { flex-grow: 0; @@ -14,20 +15,11 @@ padding: 2rem 0; font-size: 2rem; text-align: center; - color: var(--color-surfacelighter); + color: @color-surface-light5; } .stream { width: var(--item-size); - margin: 1rem 2rem; - - &:first-child { - margin-top: 2rem; - } - - &:last-child { - margin-bottom: 0; - } } } @@ -38,30 +30,28 @@ flex-direction: row; align-items: center; justify-content: center; - width: var(--item-size); - margin: 1rem 2rem 2rem 2rem; - padding: 1rem; - background-color: var(--color-signal5); + padding: 1.3rem; + background-color: @color-accent3; &:hover, &:focus { - filter: brightness(1.2); + background-color: @color-accent3-light2; } .icon { flex: none; - width: 3rem; - height: 3rem; + width: 2rem; + height: 2rem; margin-right: 1rem; - fill: var(--color-surfacelighter); + fill: @color-surface-light5; } .label { flex-grow: 0; flex-shrink: 1; flex-basis: auto; - font-size: 1.5rem; + font-size: 1.4rem; max-height: 3.6em; - color: var(--color-surfacelighter); + color: @color-surface-light5; } } } \ No newline at end of file