X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fvideos%2F%2Bvideo-watch%2Fvideo-watch.component.scss;h=fe6a891d54c01d11fba6e8a50d1a071047ef5d54;hb=9f0327aeb39c307ce7da28dda57cc526c928ca62;hp=bada9bae8ee50b65a61f4d2d49dbd29abbf4746d;hpb=67c687236f84dd288f2df3201c8ab77b93682b67;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss index bada9bae8..fe6a891d5 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss @@ -3,8 +3,8 @@ @import '_bootstrap-variables'; @import '_miniature'; -$other-videos-width: 260px; $player-factor: 1.7; // 16/9 +$video-info-margin-left: 44px; @function getPlayerHeight($width){ @return calc(#{$width} / #{$player-factor}) @@ -31,14 +31,15 @@ $player-factor: 1.7; // 16/9 width: 100%; } - /deep/ .video-js { + ::ng-deep .video-js { $height: calc(100vh - #{$header-height} - #{$theater-bottom-space}); height: $height; width: 100%; + max-width: initial; } - my-video-watch-playlist /deep/ .playlist { + my-video-watch-playlist ::ng-deep .playlist { @include playlist-below-player; } } @@ -81,8 +82,9 @@ $player-factor: 1.7; // 16/9 } } - /deep/ .video-js { - width: getPlayerWidth(66vh); + ::ng-deep .video-js { + width: 100%; + max-width: getPlayerWidth(66vh); height: 66vh; // VideoJS create an inner video player @@ -94,7 +96,7 @@ $player-factor: 1.7; // 16/9 @media screen and (max-width: 600px) { .remote-server-down, - /deep/ .video-js { + ::ng-deep .video-js { width: 100vw; height: getPlayerHeight(100vw) } @@ -106,6 +108,10 @@ $player-factor: 1.7; // 16/9 border-radius: 0; } +.flex-direction-column { + flex-direction: column; +} + #video-not-found { height: 300px; line-height: 300px; @@ -140,11 +146,19 @@ $player-factor: 1.7; // 16/9 flex-grow: 1; } + .video-info-first-row-bottom { + display: grid; + grid-template-columns: 1fr auto; + align-items: center; + width: 100%; + } + .video-info-date-views { flex-grow: 1; + align-self: start; margin-bottom: 10px; margin-right: 10px; - font-size: 16px; + font-size: 1em; } .video-info-channel { @@ -163,41 +177,28 @@ $player-factor: 1.7; // 16/9 img { @include avatar(18px); - margin: -2px 2px 0 5px; + margin: -2px 5px 0 0; } } - my-subscribe-button { - margin-left: 5px; - } - } - - .video-info-by { + .video-info-channel-left { + flex-grow: 1; - a { - @include disable-default-a-behaviour; + .video-info-channel-left-links { + display: flex; + flex-direction: column; + position: relative; + line-height: 1.3; - display: inline; - align-items: center; - font-size: 13px; - color: var(--mainForegroundColor); - - span:hover { - opacity: 0.8; - } - - img { - @include avatar(18px); - - margin-top: -2px; - margin-left: 7px; + a:nth-of-type(2) { + font-weight: 500; + font-size: 90%; + } } } - my-help { - position: relative; - top: 1px; - margin-left: 2px; + my-subscribe-button { + margin-left: 5px; } } @@ -207,8 +208,10 @@ $player-factor: 1.7; // 16/9 } .video-actions-rates { - margin: 20px 0 10px 0; + margin: 0 0 10px 0; align-items: start; + align-self: end; + width: max-content; .video-actions { height: 40px; // Align with the title @@ -237,9 +240,20 @@ $player-factor: 1.7; // 16/9 display: none; } + .action-button-like, + .action-button-dislike { + .count { + margin-right: 5px; + } + } + &.action-button-like.activated { background-color: $green; + .count { + color: #fff; + } + my-global-icon { @include apply-svg-color(#fff); } @@ -248,11 +262,28 @@ $player-factor: 1.7; // 16/9 &.action-button-dislike.activated { background-color: $red; + .count { + color: #fff; + } + my-global-icon { @include apply-svg-color(#fff); } } + &.action-button-support { + color: var(--supportButtonColor); + background-color: var(--supportButtonBackgroundColor); + + &:hover { + opacity: 0.9; + } + + my-global-icon { + @include apply-svg-color(var(--supportButtonColor)); + } + } + &.action-button-save { my-global-icon { top: 0 !important; @@ -266,6 +297,15 @@ $player-factor: 1.7; // 16/9 } } + .video-info-likes-dislikes-bar-outerContainer { + position: relative; + } + + .video-info-likes-dislikes-bar-innerContainer { + position: absolute; + height: 30px; + } + .video-info-likes-dislikes-bar { $likes-bar-height: 2px; height: $likes-bar-height; @@ -285,10 +325,15 @@ $player-factor: 1.7; // 16/9 .video-info-description { margin: 20px 0; + margin-left: $video-info-margin-left; font-size: 15px; .video-info-description-html { @include peertube-word-wrap; + + /deep/ a { + text-decoration: none; + } } .glyphicon, .description-loading { @@ -312,6 +357,10 @@ $player-factor: 1.7; // 16/9 } } + .video-attributes { + margin-left: $video-info-margin-left; + } + .video-attributes .video-attribute { font-size: 13px; display: block; @@ -344,23 +393,24 @@ $player-factor: 1.7; // 16/9 } } - /deep/ .other-videos { + ::ng-deep .other-videos { padding-left: 15px; - flex-basis: $other-videos-width; .title-page { - margin-top: 0 !important; + margin: 0 !important; } .video-miniature { display: flex; - width: $other-videos-width; + width: max-content; height: 100%; margin-bottom: 20px; flex-wrap: wrap; + } - .video-thumbnail { - margin-right: 10px + .video-bottom { + @media screen and (max-width: 1800px - (3* $video-miniature-width)) { + margin-left: 1rem; } } } @@ -455,7 +505,7 @@ my-video-comments { flex-direction: column; justify-content: center; - my-video-watch-playlist /deep/ .playlist { + my-video-watch-playlist ::ng-deep .playlist { @include playlist-below-player; } } @@ -463,10 +513,10 @@ my-video-comments { .video-bottom { flex-direction: column; - /deep/ .other-videos { + ::ng-deep .other-videos { padding-left: 0 !important; - /deep/ .video-miniature { + ::ng-deep .video-miniature { flex-direction: row; width: auto; } @@ -491,7 +541,7 @@ my-video-comments { } } - /deep/ .other-videos .video-miniature { + ::ng-deep .other-videos .video-miniature { flex-direction: column; }