X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;ds=sidebyside;f=client%2Fsrc%2Fapp%2Fvideos%2F%2Bvideo-watch%2Fvideo-watch.component.scss;h=fac4bdbe5deccb81aac5a1db8c9190d7d3a21157;hb=a157b3a322258ee5792322cf4a79437ba8d5cc2d;hp=109357b590b40d665831cd32a09bf9a3d11783da;hpb=b891f9bc612217b5b6f08a886c7d12eca260b9c8;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 109357b59..fac4bdbe5 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss @@ -1,18 +1,48 @@ @import '_variables'; @import '_mixins'; -#video-container { +.root-row { + flex-direction: column; +} + +.blacklisted-label { + font-weight: $font-semibold; +} + +#video-element-wrapper { background-color: #000; display: flex; justify-content: center; + flex-grow: 1; + + .remote-server-down { + color: #fff; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + justify-content: center; + background-color: #141313; + width: 100%; + font-size: 24px; + height: 500px; + + @media screen and (max-width: 1000px) { + font-size: 20px; + } + + @media screen and (max-width: 600px) { + font-size: 16px; + } + } /deep/ .video-js { width: 888px; height: 500px; - @media screen and (max-width: 600px) { - height: auto; - max-height: calc(100vh - #{$header-height}); + &.vjs-theater-enabled { + height: calc(100vh - #{$header-height} - #{$theater-bottom-space}); + width: 100%; } // VideoJS create an inner video player @@ -21,6 +51,18 @@ position: relative !important; } } + + @media screen and (max-width: 600px) { + .remote-server-down, + /deep/ .video-js { + width: 100vw; + height: calc(100vw / 1.7); // 16/9 + } + } +} + +.alert { + text-align: center; } #video-not-found { @@ -34,11 +76,9 @@ .video-bottom { margin-top: 40px; - display: flex; .video-info { flex-grow: 1; - margin-right: 40px; // Set min width for flex item min-width: 1px; @@ -58,32 +98,74 @@ } .video-info-date-views { - font-size: 16px; - margin-bottom: 10px; flex-grow: 1; + margin-bottom: 10px; + margin-right: 10px; + font-size: 16px; } .video-info-channel { font-weight: $font-semibold; font-size: 15px; + + a { + @include disable-default-a-behaviour; + + color: var(--mainForegroundColor); + + &:hover { + opacity: 0.8; + } + + img { + @include avatar(18px); + + margin: -2px 2px 0 5px; + } + } + + my-subscribe-button { + margin-left: 5px; + } } .video-info-by { - display: flex; - align-items: center; - font-size: 13px; - img { - @include avatar(18px); + a { + @include disable-default-a-behaviour; + + 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; + } + } - margin-left: 7px; + my-help { + position: relative; + top: 1px; + margin-left: 2px; } } + my-video-feed { + margin-left: 5px; + margin-top: 1px; + } + .video-actions-rates { - display: flex; - flex-direction: column; - align-items: flex-end; + margin: 20px 0 10px 0; + align-items: start; .video-actions { height: 40px; // Align with the title @@ -104,6 +186,10 @@ padding: 0 10px 0 10px; white-space: nowrap; + &::after { + display: none; + } + .icon { @include icon(21px); @@ -132,12 +218,12 @@ } } - &.action-button-share { - width: 82px; + .icon-text { + margin-left: 3px; } &.action-button-like.activated { - background-color: #39CC0B; + background-color: $green; .icon-like { background-image: url('../../../assets/images/video/like-white.svg'); @@ -145,7 +231,7 @@ } &.action-button-dislike.activated { - background-color: #FF0000; + background-color: $red; .icon-dislike { background-image: url('../../../assets/images/video/dislike-white.svg'); @@ -181,20 +267,31 @@ &.icon-blacklist { background-image: url('../../../assets/images/video/blacklist.svg'); } + + &.icon-unblacklist { + background-image: url('../../../assets/images/global/undo.svg'); + } + + &.icon-delete { + background-image: url('../../../assets/images/global/delete-black.svg'); + } } } } } .video-info-likes-dislikes-bar { - height: 5px; + $likes-bar-height: 2px; + height: $likes-bar-height; + margin-top: -$likes-bar-height; width: 186px; - background-color: #E5E5E5; - margin-top: 25px; + background-color: $red; + position: relative; + top: 10px; .likes-bar { height: 100%; - background-color: #39CC0B; + background-color: $green; } } } @@ -205,8 +302,11 @@ font-size: 15px; .video-info-description-html { - word-wrap: break-word; - text-align: justify; + @include peertube-word-wrap; + } + + .glyphicon, .description-loading { + margin-left: 3px; } .description-loading { @@ -232,39 +332,78 @@ margin-bottom: 12px; .video-attribute-label { - width: 86px; + min-width: 91px; + padding-right: 5px; display: inline-block; color: #585858; font-weight: $font-bold; } + + a.video-attribute-value { + @include disable-default-a-behaviour; + color: var(--mainForegroundColor); + + &:hover { + opacity: 0.9; + } + } + + &.video-attribute-tags { + .video-attribute-value:not(:nth-child(2)) { + &::before { + content: ', ' + } + } + } } } - .other-videos { + /deep/ .other-videos { + padding-left: 15px; + width: 260px; + .title-page { - margin-top: 0; + margin-top: 0 !important; } - /deep/ .video-miniature { + .video-miniature { display: flex; height: 100%; margin-bottom: 20px; + flex-wrap: wrap; .video-miniature-information { - margin-left: 10px; + flex-grow: 1; + } + + .video-thumbnail { + margin-right: 10px } } } } +my-video-comments { + display: inline-block; + width: 100%; + margin-bottom: 20px; +} + // If the view is not expanded, take into account the menu .privacy-concerns { width: calc(100% - #{$menu-width}); } +@media screen and (max-width: $small-view) { + .privacy-concerns { + margin-left: $menu-width; + } +} + :host-context(.expanded) { .privacy-concerns { width: 100%; + margin-left: 0; } } @@ -287,7 +426,7 @@ a { @include disable-default-a-behaviour; - color: $orange-color; + color: var(--mainColor); transition: color 0.3s; &:hover { @@ -296,7 +435,7 @@ } .privacy-concerns-okay { - background-color: $orange-color; + background-color: var(--mainColor); padding: 5px 8px 5px 7px; margin-left: auto; border-radius: 3px; @@ -312,45 +451,12 @@ @media screen and (max-width: 1600px) { - .video-bottom { - .video-info { - margin-right: 20px; - - .video-info-first-row { - flex-direction: column; - margin-bottom: 30px; - - .video-actions-rates { - margin-top: 20px; - align-items: left; - - .video-info-likes-dislikes-bar { - margin-top: 10px; - } - } - } - - .video-info-date-views { - flex-direction: column; - margin-bottom: 30px; - - .video-info-likes-dislikes-bar { - margin-top: 0; - } - } - - .video-attributes .video-attribute { - margin-bottom: 5px; - } - } + .video-bottom .video-info .video-attributes .video-attribute { + margin-bottom: 5px; } } @media screen and (max-width: 1300px) { - .other-videos { - display: none; - } - .privacy-concerns { font-size: 12px; padding: 2px 5px; @@ -377,6 +483,12 @@ } } + /deep/ .other-videos { + /deep/ .video-miniature { + flex-direction: column; + } + } + .privacy-concerns { width: 100%;