diff --git a/src/common/MetaPreview/styles.less b/src/common/MetaPreview/styles.less index c17afc0cc..f1756c05b 100644 --- a/src/common/MetaPreview/styles.less +++ b/src/common/MetaPreview/styles.less @@ -1,3 +1,5 @@ +@import (reference) '~stremio-colors/dist/less/stremio-colors.less'; + .meta-preview-container { position: relative; z-index: 0; @@ -50,7 +52,8 @@ .meta-info-container { flex: 1; align-self: stretch; - padding: 0 1rem; + width: 32.5rem; + padding: 0 2rem; overflow-y: auto; .logo, .logo-placeholder-icon { @@ -74,6 +77,7 @@ .runtime-release-info-container { display: flex; flex-direction: row; + align-items: center; flex-wrap: wrap; margin-top: 1rem; @@ -81,22 +85,61 @@ flex-grow: 0; flex-shrink: 1; flex-basis: auto; - margin: 1rem 1rem 1rem 0; - font-size: 1.2rem; - text-align: center; - color: var(--color-surfacelighter); + margin-right: 2rem; + margin-bottom: 0.5rem; + font-size: 1.4rem; + color: @color-surface-light5-90; + } + + .imdb-button-container { + display: flex; + flex-direction: row; + align-items: center; + margin-bottom: 0.5rem; + padding: 0.3rem 1rem; + border-radius: 2.3rem; + border: var(--focus-outline-size) solid transparent; + background-color: @color-surface-light5-20; + + &:hover, &:focus-within { + background-color: @color-surface-light5-30; + } + + &:focus-within { + outline: none; + border: var(--focus-outline-size) solid @color-surface-light5; + } + + .icon { + flex: none; + width: 3rem; + margin-right: 1rem; + fill: @color-surface-dark2; + } + + .label { + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + max-height: 1.2em; + font-size: 1.6rem; + font-weight: 500; + color: @color-surface-light5-90; + } } } .name-container { margin-top: 1rem; - font-size: 1.4rem; - color: var(--color-surfacelighter); + font-size: 1.7rem; + color: @color-surface-light5-90; } .description-container { + max-height: 6.8em; margin-top: 1rem; - color: var(--color-surfacelighter); + line-height: 1.7em; + color: @color-surface-light5-90; } .meta-links { @@ -110,13 +153,17 @@ display: flex; flex-direction: row; flex-wrap: wrap; - padding: 0 1rem; + padding: 0 2rem; .action-button { flex: none; width: 6rem; height: 6rem; - margin: 1rem 0; + margin: 2rem 0; + + &:not(:last-child) { + margin-right: 1.5rem; + } } } }