stream/video layout unified

This commit is contained in:
nklhrstv 2020-03-30 16:08:46 +03:00
parent 8e6ba7cf7b
commit caa522ed31
2 changed files with 18 additions and 20 deletions

View file

@ -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 {

View file

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