.placeholder-image {
height: 100%;
+ max-width: 100%;
+ object-fit: contain;
}
.flex-direction-column {
margin-top: 50px;
text-align: center;
font-weight: $font-semibold;
- font-size: 15px;
}
.video-bottom {
margin-bottom: 10px;
align-self: start;
- font-size: 1em;
+ font-size: 14px;
}
.video-info-channel {
font-weight: $font-semibold;
- font-size: 15px;
a {
@include disable-default-a-behaviour;
@include margin-left(5px);
}
-.video-attributes {
+my-video-attributes {
@include margin-left($video-watch-info-margin-left);
- .video-attribute {
- font-size: 13px;
- display: block;
- margin-bottom: 12px;
- }
-}
-
-.video-attribute-label {
- @include padding-right(5px);
-
- min-width: 142px;
- display: inline-block;
- color: pvar(--greyForegroundColor);
- font-weight: $font-bold;
-}
-
-a.video-attribute-value {
- @include disable-default-a-behaviour;
- color: pvar(--mainForegroundColor);
-
- &:hover {
- opacity: 0.9;
- }
-}
-
-.video-attribute-tags {
- .video-attribute-value:not(:nth-child(2)) {
- &::before {
- content: ', ';
- }
- }
+ display: block;
+ margin-bottom: 15px;
}
my-action-buttons {
margin-bottom: 20px;
}
-@media screen and (max-width: 1600px) {
- .video-attributes .video-attribute {
- margin-bottom: 5px;
- }
-}
-
// Use the same breakpoint than in the typescript component to display the other video miniatures as row
@media screen and (max-width: 1100px) {
#video-wrapper {