Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-19 13:52:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

MetaPreview styles adapted to design changes

Browse source
This commit is contained in:
svetlagasheva 2020-03-24 14:12:24 +02:00
parent 8b5f580442
commit 18413fbaa8
1 changed files with 57 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
src/common/MetaPreview/styles.less
View file

@ -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;
}
}
}
}