@import '_variables';
@import '_mixins';
-.videos-header {
- display: flex;
- justify-content: space-between;
- margin: 20px 0 50px;
-
- h4,
- .fake-element {
- flex: 1;
- }
-
- input[type=text] {
- @include peertube-input-text(300px);
- }
+input[type=text] {
+ @include peertube-input-text(300px);
}
.action-button-delete-selection {
}
::ng-deep {
+ .video {
+ flex-wrap: wrap;
+ }
+
.action-button span {
white-space: nowrap;
}
}
}
+.action-button {
+ display: flex;
+ margin-left: 55px;
+ margin-top: 10px;
+ align-self: flex-end;
+}
+
my-delete-button,
my-edit-button {
margin-right: 10px;
}
@media screen and (max-width: $small-view) {
- .videos-header {
+ .action-button {
flex-direction: column;
+ align-self: center;
+ margin-left: 0px;
}
::ng-deep {
.video-bottom,
.video-bottom .video-miniature-information {
/* same width than a.video-thumbnail */
- max-width: 223px !important;
+ max-width: $video-thumbnail-width !important;
}
}
}
::ng-deep {
.action-button {
/* same width than a.video-thumbnail */
- width: 223px;
+ width: $video-thumbnail-width;
+ }
+ }
+ }
+}
+
+// Adapt my-video-miniature on small screens with menu
+@media screen and (min-width: $small-view) and (max-width: #{breakpoint(lg) + ($not-expanded-horizontal-margins / 3) * 2}) {
+ :host-context(.main-col:not(.expanded)) {
+ ::ng-deep {
+ .video-miniature {
+ flex-direction: column;
+
+ .video-miniature-name {
+ max-width: $video-thumbnail-width;
+ }
}
}
}
}
+
+@media screen and (max-width: $mobile-view) {
+ .videos-header {
+ flex-direction: column;
+
+ input[type=text] {
+ width: 100% !important;
+ }
+ }
+}