}
.video-info-first-row-bottom {
- display: grid;
- grid-template-columns: 1fr auto;
+ display: flex;
+ flex-wrap: wrap;
align-items: center;
width: 100%;
}
.video-info-date-views {
- flex-grow: 1;
+ align-self: start;
margin-bottom: 10px;
margin-right: 10px;
- font-size: 16px;
+ font-size: 1em;
}
.video-info-channel {
.video-actions-rates {
margin: 0 0 10px 0;
align-items: start;
- align-self: end;
width: max-content;
+ margin-left: auto;
.video-actions {
height: 40px; // Align with the title
}
}
- .video-info-likes-dislikes-bar-outerContainer {
+ .video-info-likes-dislikes-bar-outer-container {
position: relative;
}
- .video-info-likes-dislikes-bar-innerContainer {
+ .video-info-likes-dislikes-bar-inner-container {
position: absolute;
- height: 30px;
+ height: 20px;
}
.video-info-likes-dislikes-bar {
.video-info-description-html {
@include peertube-word-wrap;
+
+ /deep/ a {
+ text-decoration: none;
+ }
}
.glyphicon, .description-loading {
::ng-deep .other-videos {
padding-left: 15px;
+ min-width: $video-miniature-width;
+
+ @media screen and (min-width: 1800px - (3* $video-miniature-width)) {
+ width: min-content;
+ }
.title-page {
margin: 0 !important;
height: 100%;
margin-bottom: 20px;
flex-wrap: wrap;
+ }
- .video-thumbnail {
- margin-right: 10px
+ .video-bottom {
+ @media screen and (max-width: 1800px - (3* $video-miniature-width)) {
+ margin-left: 1rem;
+ }
+ @media screen and (max-width: 500px) {
+ margin-left: 0;
+ margin-top: .5rem;
}
}
}