X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;ds=sidebyside;f=client%2Fsrc%2Fapp%2F%2Bmy-account%2Fmy-account-video-playlists%2Fmy-account-video-playlists.component.scss;h=4381d74b060665d9d6c84db99ba105af23db26d2;hb=4682468d4d07e0864155dd2b403d93754786ea13;hp=f648c33e4786ea121569db1a8155b6a6a0543c5b;hpb=97567dd81f508dd6295ac4d73d849aa2ce0a6549;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss index f648c33e4..4381d74b0 100644 --- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss +++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss @@ -5,7 +5,7 @@ @include create-button; } -/deep/ .action-button { +::ng-deep .action-button { &.action-button-delete { margin-right: 10px; } @@ -17,7 +17,7 @@ .miniature-wrapper { flex-grow: 1; - /deep/ .miniature { + ::ng-deep .miniature { display: flex; .miniature-info { @@ -29,15 +29,21 @@ .video-playlist-buttons { min-width: 190px; + height: max-content; } } .video-playlists-header { - text-align: right; + display: flex; + justify-content: space-between; margin: 20px 0 50px; + + input[type=text] { + @include peertube-input-text(300px); + } } -@media screen and (max-width: 800px) { +@media screen and (max-width: $small-view) { .video-playlists-header { text-align: center; } @@ -48,4 +54,35 @@ margin-top: 10px; } } + + my-video-playlist-miniature ::ng-deep .miniature { + flex-direction: column; + + .miniature-info { + margin-left: 0 !important; + } + + .miniature-name { + max-width: $video-thumbnail-width; + } + } +} + +@media only screen and (min-width: $mobile-view) and (max-width: $small-view) { + .video-playlists-header { + input[type=text] { + width: 42% !important; + } + } +} + +@media screen and (max-width: $mobile-view) { + .video-playlists-header { + flex-direction: column; + + input[type=text] { + width: 100% !important; + margin-bottom: 12px; + } + } }