X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fvideos%2F%2Bvideo-watch%2Fvideo-watch.component.scss;h=edd5ae6ba85a85c3f9e074c635f94bd0b59286ff;hb=9a0fc8409c7a783348ec212fa9f38d0a98413467;hp=ae8bdccafaf0b6b836d7827eabac27341aab8d27;hpb=9e9afa455b11d1c7a722d7b9d23bf232bf397356;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 ae8bdccaf..edd5ae6ba 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,49 @@ @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; - - /deep/ .video-js { - width: 888px; + 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) { - width: 100vw; - height: calc(100vw / 1.7); // 16/9 + font-size: 16px; + } + } + + /deep/ .video-js { + width: calc(100vw - 240px); + height: auto; + max-height: 500px; + + &.vjs-theater-enabled { + height: calc(100vh - #{$header-height} - #{$theater-bottom-space}); + width: 100%; } // VideoJS create an inner video player @@ -22,13 +53,16 @@ } } - /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 + } } } -#warning-transcoding { +.alert { text-align: center; } @@ -43,11 +77,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; @@ -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 { + + a { + @include disable-default-a-behaviour; - display: flex; - align-items: center; - font-size: 13px; - color: #000; + display: inline; + align-items: center; + font-size: 13px; + color: var(--mainForegroundColor); - span:hover { - opacity: 0.8; - } + span:hover { + opacity: 0.8; + } + + img { + @include avatar(18px); - 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,9 @@ } .video-actions-rates { - display: flex; - flex-direction: column; - align-items: flex-end; + margin-top: 20px; + margin-bottom: 10px; + align-items: start; .video-actions { height: 40px; // Align with the title @@ -139,6 +187,10 @@ padding: 0 10px 0 10px; white-space: nowrap; + &::after { + display: none; + } + .icon { @include icon(21px); @@ -172,7 +224,7 @@ } &.action-button-like.activated { - background-color: #39CC0B; + background-color: $green; .icon-like { background-image: url('../../../assets/images/video/like-white.svg'); @@ -180,7 +232,7 @@ } &.action-button-dislike.activated { - background-color: #FF0000; + background-color: $red; .icon-dislike { background-image: url('../../../assets/images/video/dislike-white.svg'); @@ -216,16 +268,27 @@ &.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; + position: relative; + top: 10px; .likes-bar { height: 100%; @@ -270,28 +333,51 @@ 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: 1em; .title-page { - margin-top: 0; + margin-top: 0 !important; } /deep/ .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 } } } @@ -327,7 +413,7 @@ a { @include disable-default-a-behaviour; - color: $orange-color; + color: var(--mainColor); transition: color 0.3s; &:hover { @@ -336,7 +422,7 @@ } .privacy-concerns-okay { - background-color: $orange-color; + background-color: var(--mainColor); padding: 5px 8px 5px 7px; margin-left: auto; border-radius: 3px; @@ -354,20 +440,9 @@ @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; - } - } + margin-bottom: 20px; } .video-info-date-views { @@ -387,8 +462,12 @@ } @media screen and (max-width: 1300px) { - .other-videos { - display: none; + .video-bottom { + flex-direction: column; + } + + /deep/ .other-videos { + padding-left: 0 !important; } .privacy-concerns { @@ -401,6 +480,10 @@ } } +@media (max-width: 1150px) { + .w-100-until-1150px { width: 100% !important } +} + @media screen and (max-width: 600px) { .video-bottom { margin: 20px 0 0 0; @@ -417,6 +500,12 @@ } } + /deep/ .other-videos { + /deep/ .video-miniature { + flex-direction: column; + } + } + .privacy-concerns { width: 100%;