X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fvideos%2F%2Bvideo-watch%2Fvideo-watch.component.scss;h=fac4bdbe5deccb81aac5a1db8c9190d7d3a21157;hb=a157b3a322258ee5792322cf4a79437ba8d5cc2d;hp=dfabdfa60435fd44a0b95e4b606e7ca60cd25093;hpb=9e01e51099c2949036f29d01f7305dff4d2b8748;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 dfabdfa60..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'; +.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) { - width: 100vw; - height: calc(100vw / 1.7); // 16/9 + &.vjs-theater-enabled { + height: calc(100vh - #{$header-height} - #{$theater-bottom-space}); + width: 100%; } // VideoJS create an inner video player @@ -22,9 +52,12 @@ } } - /deep/ .video-js.vjs-theater-enabled { - width: 100%; - height: calc(100vh - #{$header-height} - #{$theater-bottom-space}); + @media screen and (max-width: 600px) { + .remote-server-down, + /deep/ .video-js { + width: 100vw; + height: calc(100vw / 1.7); // 16/9 + } } } @@ -43,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; @@ -67,9 +98,10 @@ } .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 { @@ -79,34 +111,50 @@ a { @include disable-default-a-behaviour; - color: #000; + color: var(--mainForegroundColor); &:hover { opacity: 0.8; } + + img { + @include avatar(18px); + + margin: -2px 2px 0 5px; + } } - my-help { - display: inline-block; + my-subscribe-button { + margin-left: 5px; } } - .video-info-by a { - @include disable-default-a-behaviour; + .video-info-by { - display: inline; - align-items: center; - font-size: 13px; - color: #000; + a { + @include disable-default-a-behaviour; - span:hover { - opacity: 0.8; - } + display: inline; + align-items: center; + font-size: 13px; + color: var(--mainForegroundColor); - img { - @include avatar(18px); + 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; } } @@ -116,9 +164,8 @@ } .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 @@ -139,6 +186,10 @@ padding: 0 10px 0 10px; white-space: nowrap; + &::after { + display: none; + } + .icon { @include icon(21px); @@ -172,7 +223,7 @@ } &.action-button-like.activated { - background-color: #39CC0B; + background-color: $green; .icon-like { background-image: url('../../../assets/images/video/like-white.svg'); @@ -180,7 +231,7 @@ } &.action-button-dislike.activated { - background-color: #FF0000; + background-color: $red; .icon-dislike { background-image: url('../../../assets/images/video/dislike-white.svg'); @@ -216,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; } } } @@ -270,43 +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 { - padding-left: 1em; + /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; } } @@ -329,7 +426,7 @@ a { @include disable-default-a-behaviour; - color: $orange-color; + color: var(--mainColor); transition: color 0.3s; &:hover { @@ -338,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; @@ -354,49 +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: start; - - .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) { - .video-bottom { - flex-direction: column; - } - - .other-videos { - padding-left: 0; - } - .privacy-concerns { font-size: 12px; padding: 2px 5px; @@ -423,6 +483,12 @@ } } + /deep/ .other-videos { + /deep/ .video-miniature { + flex-direction: column; + } + } + .privacy-concerns { width: 100%;