-@import '_variables';
-@import '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.no-history {
display: flex;
.top-buttons {
margin-bottom: 30px;
- display: flex;
+ display: grid;
+ grid-template-columns: 250px 1fr auto auto;
align-items: center;
- flex-wrap: wrap;
- #history-search {
- @include peertube-input-text(250px);
+ .search-wrapper {
+ grid-column: 1;
+
+ input {
+ @include peertube-input-text(250px);
+ }
}
.history-switch {
+ @include margin-left(auto);
+ @include margin-right(15px);
+
+ grid-column: 3;
display: flex;
label {
@include grey-button;
@include button-with-icon;
+ grid-column: 4;
+
font-size: 15px;
}
}
.video {
- @include row-blocks;
-
- .my-video-miniature {
- flex-grow: 1;
- }
+ @include row-blocks($column-responsive: false);
}
-@media screen and (max-width: $mobile-view) {
+@media screen and (max-width: $small-view) {
.top-buttons {
- .history-switch label, .delete-history {
- @include ellipsis;
- }
+ grid-template-columns: auto 1fr auto;
+ row-gap: 20px;
- .history-switch label {
- width: 60%;
+ .history-switch {
+ grid-row: 1;
+ grid-column: 1;
+ margin: 0;
}
.delete-history {
- margin-left: auto;
- max-width: 32%;
+ grid-row: 1;
+ grid-column: 3;
+ }
+
+ .search-wrapper {
+ grid-column: 1 / 4;
}
}
}