.top-buttons {
margin-bottom: 20px;
display: flex;
+ align-items: center;
+ flex-wrap: wrap;
.history-switch {
display: flex;
}
.delete-history {
- font-size: 15px;
+ @include peertube-button;
+ @include grey-button;
+ @include button-with-icon;
- button {
- @include peertube-button;
- @include grey-button;
- }
+ font-size: 15px;
}
}
.video {
@include row-blocks;
- my-video-thumbnail {
- margin-right: 10px;
- }
-
- .video-info {
+ .my-video-miniature {
flex-grow: 1;
-
- .video-info-name {
- @include disable-default-a-behaviour;
-
- color: var(--mainForegroundColor);
- display: block;
- width: fit-content;
- font-size: 18px;
- font-weight: $font-semibold;
- }
-
- .video-info-date-views {
- font-size: 14px;
- }
-
- .video-info-account {
- @include disable-default-a-behaviour;
- @include ellipsis;
-
- display: block;
- width: fit-content;
- font-size: 14px;
- color: $grey-foreground-color;
-
- &:hover {
- color: $grey-foreground-hover-color;
- }
- }
}
}
-@media screen and (max-width: $small-view) {
- .video {
- flex-direction: column;
- height: auto;
- text-align: center;
-
- .video-info-name {
- margin: auto;
- }
-
- input[type=checkbox] {
- display: none;
+@media screen and (max-width: $mobile-view) {
+ .top-buttons {
+ .history-switch label, .delete-history {
+ @include ellipsis;
}
- my-video-thumbnail {
- margin-right: 0;
+ .history-switch label {
+ width: 60%;
}
- .video-buttons {
- margin-top: 10px;
+ .delete-history {
+ margin-left: auto;
+ max-width: 32%;
}
}
}