X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2F%2Bmy-account%2Fmy-account-videos%2Fmy-account-videos.component.scss;h=8248cc94faae3fa4a8031903632fc56b51902241;hb=9181bc0c802bb84aeae9f07b08b59dcd90f486bc;hp=9df28f472b929a48df3bf8946fb1a444ea82767a;hpb=a8981e0b24ad41d9124344a780d878b08cef173b;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss index 9df28f472..8248cc94f 100644 --- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss +++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss @@ -1,115 +1,56 @@ @import '_variables'; @import '_mixins'; -.action-selection-mode { - width: 174px; +.videos-header { display: flex; - justify-content: flex-end; + justify-content: space-between; + margin: 20px 0 50px; - .action-selection-mode-child { - position: fixed; - - .action-button { - display: inline-block; - } - - .action-button-cancel-selection { - @include peertube-button; - @include grey-button; - - margin-right: 10px; - } - - .action-button-delete-selection { - @include peertube-button; - @include orange-button; - } - - .icon.icon-delete-white { - @include icon(21px); - - position: relative; - top: -2px; - background-image: url('../../../assets/images/global/delete-white.svg'); - } + h4, + .fake-element { + flex: 1; } -} -/deep/ .action-button { - &.action-button-delete { - margin-right: 10px; + input[type=text] { + @include peertube-input-text(300px); } } -.video { - display: flex; - min-height: 130px; - padding-bottom: 20px; - margin-bottom: 20px; - border-bottom: 1px solid #C6C6C6; +.action-button-delete-selection { + display: inline-block; - &:first-child { - margin-top: 47px; - } + @include peertube-button; + @include orange-button; + @include button-with-icon(21px); - .checkbox-container { - display: flex; - align-items: center; - margin-right: 20px; - margin-left: 12px; + my-global-icon { + @include apply-svg-color(#fff); } +} - my-video-thumbnail { - margin-right: 10px; +::ng-deep { + .action-button span { + white-space: nowrap; } - .video-info { - flex-grow: 1; - - .video-info-name { - @include disable-default-a-behaviour; + .video-miniature { + &.display-as-row { + // width: min-content !important; + width: 100% !important; - color: #000; - display: block; - width: fit-content; - font-size: 16px; - font-weight: $font-semibold; - } - - .video-info-date-views, .video-info-private { - font-size: 13px; - - &.video-info-private { - font-weight: $font-semibold; + .video-bottom .video-miniature-information { + width: max-content !important; + min-width: unset !important; } } - } - .video-buttons { - min-width: 190px; + .video-bottom { + max-width: 350px; + } } } -@media screen and (max-width: 800px) { - .video { - flex-direction: column; - height: auto; - text-align: center; - - .video-info-name { - margin: auto; - } - - input[type=checkbox] { - display: none; - } - - my-video-thumbnail { - margin-right: 0; - } - - .video-buttons { - margin-top: 10px; - } - } +my-delete-button, +my-edit-button { + margin-right: 10px; }