diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less index c12f7031a..59efec4f9 100644 --- a/src/routes/Discover/styles.less +++ b/src/routes/Discover/styles.less @@ -1,3 +1,4 @@ +@import (reference) '~stremio-colors/dist/less/stremio-colors.less'; @import (reference) '~stremio/common/screen-sizes.less'; :import('~stremio/common/Multiselect/styles.less') { @@ -9,12 +10,13 @@ pagination-prev-button-container: prev-button-container; pagination-next-button-container: next-button-container; pagination-button-icon: icon; + pagination-label: label; } .discover-container { width: 100%; height: 100%; - background-color: var(--color-background); + background-color: @color-background-dark2; .discover-content { width: 100%; @@ -62,7 +64,7 @@ justify-content: center; width: 3rem; height: 3rem; - background-color: var(--color-backgroundlighter); + background-color: @color-background; &:not(:nth-last-child(2)) { margin-right: 1.5rem; @@ -72,7 +74,7 @@ flex: none; width: 1.2rem; height: 1.2rem; - fill: var(--color-surfacelighter); + fill: @color-secondaryvariant1; } } @@ -83,7 +85,6 @@ .pagination-input-container { flex: none; height: 3rem; - background-color: var(--color-backgroundlighter); .pagination-prev-button-container, .pagination-next-button-container { width: 3rem; @@ -94,6 +95,10 @@ height: 1rem; } } + + .pagination-label { + width: 3rem; + } } } @@ -107,7 +112,7 @@ .warning-info { margin-bottom: 1rem; font-size: 1.2rem; - color: var(--color-surfacelighter); + color: @color-surface-light5; } .install-button { @@ -117,14 +122,14 @@ justify-content: center; width: 10rem; padding: 1rem; - background-color: var(--color-signal5); + background-color: @color-accent3; &:hover { - filter: brightness(1.2); + background-color: @color-accent3-light1; } .label { - color: var(--color-surfacelighter); + color: @color-surface-light5; } } } @@ -141,27 +146,18 @@ margin-right: 1.5rem; padding: 0 1.5rem; overflow-y: auto; - - .meta-item { - &:global(.selected) { - &::after { - outline-width: calc(1.5 * var(--focus-outline-size)); - outline-offset: calc(-1.5 * var(--focus-outline-size)); - } - } - } } .message-container { padding: 0 1.5rem; font-size: 2rem; - color: var(--color-surfacelighter); + color: @color-surface-light5; } } .meta-preview-container { grid-area: meta-preview-area; - background-color: var(--color-backgrounddarker); + background-color: @color-background-dark5; } } } @@ -181,7 +177,7 @@ width: 10rem; max-height: 2.4em; padding-right: 0.5rem; - color: var(--color-backgrounddarker); + color: @color-background-dark5; } .select-input-container {