mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-03-11 21:27:05 +00:00
stream/video layout unified
This commit is contained in:
parent
8e6ba7cf7b
commit
caa522ed31
2 changed files with 18 additions and 20 deletions
|
|
@ -10,25 +10,24 @@
|
|||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
background-color: @color-background-dark3-80;
|
||||
padding: 0.5rem 1rem;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: @color-background;
|
||||
|
||||
.play-icon {
|
||||
.play-icon-circle-centered-background {
|
||||
fill: @color-accent4;
|
||||
fill: @color-accent4-90;
|
||||
}
|
||||
|
||||
.play-icon-circle-centered-icon {
|
||||
fill: @color-surface-light5;
|
||||
fill: @color-surface-light5-90;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail-container, .addon-name-container {
|
||||
flex: none;
|
||||
padding: 0.5rem;
|
||||
|
||||
.thumbnail {
|
||||
display: block;
|
||||
|
|
@ -36,13 +35,15 @@
|
|||
height: 5rem;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.placeholder-icon {
|
||||
display: block;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
fill: @color-secondaryvariant1-light3;
|
||||
padding: 0.5rem;
|
||||
fill: @color-secondaryvariant1-light3-90;
|
||||
}
|
||||
|
||||
.addon-name {
|
||||
|
|
@ -50,36 +51,33 @@
|
|||
max-height: 3.6em;
|
||||
font-size: 1.1rem;
|
||||
text-align: center;
|
||||
color: @color-surface-light5;
|
||||
color: @color-surface-light5-90;
|
||||
}
|
||||
}
|
||||
|
||||
.info-container {
|
||||
flex: 1;
|
||||
max-height: 3.6em;
|
||||
margin: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
color: @color-surface-90;
|
||||
margin: 0.5rem 1rem;
|
||||
color: @color-surface-light5-90;
|
||||
}
|
||||
|
||||
.play-icon {
|
||||
flex: none;
|
||||
width: 3.5rem;
|
||||
height: 5rem;
|
||||
margin: 0.5rem 1.5rem 0.5rem 0.5rem;
|
||||
|
||||
.play-icon-circle-centered-background {
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.play-icon-circle-centered-icon {
|
||||
fill: @color-surface-dark5;
|
||||
fill: @color-surface-dark5-90;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-bar-container {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
flex-basis: 100%;
|
||||
flex: 0 0 100%;
|
||||
background-color: @color-background-light2;
|
||||
|
||||
.progress-bar {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
padding: 0.5rem 1rem;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: @color-background;
|
||||
|
|
@ -11,7 +12,6 @@
|
|||
|
||||
.thumbnail-container {
|
||||
flex: none;
|
||||
padding: 0.5rem 0 0.5rem 1rem;
|
||||
|
||||
.thumbnail {
|
||||
display: block;
|
||||
|
|
@ -24,9 +24,9 @@
|
|||
|
||||
.placeholder-icon {
|
||||
display: block;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
margin: 0.5rem;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
padding: 0.5rem;
|
||||
fill: @color-secondaryvariant1-light3-90;
|
||||
}
|
||||
}
|
||||
|
|
@ -37,10 +37,10 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem 1rem;
|
||||
margin: 0.5rem 1rem;
|
||||
|
||||
&:first-child {
|
||||
height: 4rem;
|
||||
height: 3rem;
|
||||
|
||||
.title-container {
|
||||
max-height: 1.2em;
|
||||
|
|
|
|||
Loading…
Reference in a new issue