@include peertube-input-text(300px);
}
+.peertube-select-container {
+ @include peertube-select-container(auto);
+ margin-left: 0.5rem;
+}
+
h1 {
display: flex;
justify-content: space-between;
}
.action-button-delete-selection {
- display: inline-block;
-
@include peertube-button;
@include orange-button;
@include button-with-icon(21px);
+ display: inline-block;
+
my-global-icon {
@include apply-svg-color(#fff);
}
}
-::ng-deep {
- .video {
- flex-wrap: wrap;
- }
-
- .action-button span {
- white-space: nowrap;
- }
-
- .video-miniature {
- &.display-as-row {
- // width: min-content !important;
- width: 100% !important;
-
- .video-bottom .video-miniature-information {
- width: max-content !important;
- min-width: unset !important;
- }
- }
-
- .video-bottom {
- max-width: 350px;
- }
- }
-}
-
.action-button {
display: flex;
- margin-left: 55px;
- margin-top: 10px;
+ margin-left: 10px;
align-self: flex-end;
}
margin-right: 10px;
}
-@media screen and (max-width: $small-view) {
+@include on-small-main-col {
h1 {
flex-direction: column;
}
.action-button {
- flex-direction: column;
- align-self: center;
- align-items: center;
- margin-left: 0px;
- }
-
- my-edit-button {
- margin: 15px 0 5px 0;
- width: 100%;
- text-align: center;
-
- ::ng-deep {
- .action-button {
- /* same width than a.video-thumbnail */
- width: $video-thumbnail-width;
- }
- }
- }
-
- ::ng-deep {
- .video-miniature {
- align-items: center;
-
- .video-bottom,
- .video-bottom .video-miniature-information {
- /* same width than a.video-thumbnail */
- max-width: $video-thumbnail-width !important;
- }
- }
+ margin-top: 10px;
+ margin-left: auto;
}
}
-// 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) {
+@include on-mobile-main-col {
.videos-header {
flex-direction: column;
input[type=text] {
- width: 100% !important;
+ width: 100%;
+ margin-bottom: 12px;
}
+ .peertube-select-container {
+ margin-left: 0;
+ }
+ }
+
+ .action-button {
+ margin-left: 0;
}
}