X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fvideos%2F%2Bvideo-watch%2Fvideo-watch.component.scss;h=e0d41117a0aabd9e9806778464500a29daca6a75;hb=5baee5fca418487e72ddcd6419d31bca8659b668;hp=81c3199504502b6234567fe1765fe5bd0d29a4d9;hpb=b29bf61dbd518e5cef0b2f564ddc8f8a0657d089;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 81c319950..e0d41117a 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss @@ -45,7 +45,7 @@ $video-info-margin-left: 44px; } } -.blacklisted-label { +.blocked-label { font-weight: $font-semibold; } @@ -53,7 +53,6 @@ $video-info-margin-left: 44px; background-color: #000; display: flex; justify-content: center; - margin: 0 -15px; #videojs-wrapper { display: flex; @@ -147,14 +146,13 @@ $video-info-margin-left: 44px; } .video-info-first-row-bottom { - display: grid; - grid-template-columns: 1fr auto; + display: flex; + flex-wrap: wrap; align-items: center; width: 100%; } .video-info-date-views { - flex-grow: 1; align-self: start; margin-bottom: 10px; margin-right: 10px; @@ -168,7 +166,7 @@ $video-info-margin-left: 44px; a { @include disable-default-a-behaviour; - color: var(--mainForegroundColor); + color: pvar(--mainForegroundColor); &:hover { opacity: 0.8; @@ -188,7 +186,7 @@ $video-info-margin-left: 44px; display: flex; flex-direction: column; position: relative; - line-height: 1.3; + line-height: 1.37; a:nth-of-type(2) { font-weight: 500; @@ -210,8 +208,8 @@ $video-info-margin-left: 44px; .video-actions-rates { margin: 0 0 10px 0; align-items: start; - align-self: end; width: max-content; + margin-left: auto; .video-actions { height: 40px; // Align with the title @@ -221,66 +219,73 @@ $video-info-margin-left: 44px; .action-button:not(:first-child), .action-dropdown, my-video-actions-dropdown { - margin-left: 10px; + margin-left: 5px; } - .action-button { + ::ng-deep.action-button { @include peertube-button; - @include grey-button; @include button-with-icon(21px, 0, -1px); - @include apply-svg-color($grey-foreground-color); + @include apply-svg-color(pvar(--actionButtonColor)); - font-size: 15px; + font-size: 100%; font-weight: $font-semibold; display: inline-block; padding: 0 10px 0 10px; white-space: nowrap; + background-color: transparent !important; + color: pvar(--actionButtonColor); + text-transform: uppercase; &::after { display: none; } - .action-button-like, - .action-button-dislike { + &:hover { + opacity: 0.9; + } + + &.action-button-like, + &.action-button-dislike { + filter: brightness(120%); + .count { margin-right: 5px; } } &.action-button-like.activated { - background-color: $green; - .count { - color: #fff; + color: pvar(--activatedActionButtonColor); } my-global-icon { - @include apply-svg-color(#fff); + @include apply-svg-color(pvar(--activatedActionButtonColor)); } } &.action-button-dislike.activated { - background-color: $red; - .count { - color: #fff; + color: pvar(--activatedActionButtonColor); } my-global-icon { - @include apply-svg-color(#fff); + @include apply-svg-color(pvar(--activatedActionButtonColor)); } } &.action-button-support { - color: var(--supportButtonColor); - background-color: var(--supportButtonBackgroundColor); + color: pvar(--supportButtonColor); - &:hover { - opacity: 0.9; + my-global-icon { + @include apply-svg-color(pvar(--supportButtonColor)); } + } + &.action-button-support { my-global-icon { - @include apply-svg-color(var(--supportButtonColor)); + ::ng-deep path:first-child { + fill: pvar(--supportButtonHeartColor) !important; + } } } @@ -297,27 +302,31 @@ $video-info-margin-left: 44px; } } - .video-info-likes-dislikes-bar-outerContainer { + .video-info-likes-dislikes-bar-outer-container { position: relative; } - .video-info-likes-dislikes-bar-innerContainer { + .video-info-likes-dislikes-bar-inner-container { position: absolute; - height: 30px; + height: 20px; } .video-info-likes-dislikes-bar { $likes-bar-height: 2px; height: $likes-bar-height; margin-top: -$likes-bar-height; - width: 186px; - background-color: $red; + width: 120px; + background-color: #ccc; position: relative; top: 10px; .likes-bar { height: 100%; - background-color: $green; + background-color: #909090; + + &.liked { + background-color: pvar(--activatedActionButtonColor); + } } } } @@ -347,7 +356,7 @@ $video-info-margin-left: 44px; .video-info-description-more { cursor: pointer; font-weight: $font-semibold; - color: $grey-foreground-color; + color: pvar(--greyForegroundColor); font-size: 14px; .glyphicon { @@ -370,13 +379,13 @@ $video-info-margin-left: 44px; min-width: 142px; padding-right: 5px; display: inline-block; - color: $grey-foreground-color; + color: pvar(--greyForegroundColor); font-weight: $font-bold; } a.video-attribute-value { @include disable-default-a-behaviour; - color: var(--mainForegroundColor); + color: pvar(--mainForegroundColor); &:hover { opacity: 0.9; @@ -395,6 +404,11 @@ $video-info-margin-left: 44px; ::ng-deep .other-videos { padding-left: 15px; + min-width: $video-miniature-width; + + @media screen and (min-width: 1800px - (3* $video-miniature-width)) { + width: min-content; + } .title-page { margin: 0 !important; @@ -406,9 +420,15 @@ $video-info-margin-left: 44px; 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; + } + @media screen and (max-width: 500px) { + margin-left: 0; + margin-top: .5rem; } } } @@ -422,6 +442,7 @@ my-video-comments { // If the view is not expanded, take into account the menu .privacy-concerns { + z-index: z(dropdown) + 1; width: calc(100% - #{$menu-width}); } @@ -441,13 +462,14 @@ my-video-comments { .privacy-concerns { position: fixed; bottom: 0; + z-index: z(privacymsg); padding: 5px 15px; display: flex; flex-wrap: nowrap; align-items: center; - justify-content: flex-start; + justify-content: space-between; background-color: rgba(0, 0, 0, 0.9); color: #fff; @@ -458,7 +480,7 @@ my-video-comments { a { @include disable-default-a-behaviour; - color: var(--mainColor); + color: pvar(--mainColor); transition: color 0.3s; &:hover { @@ -466,11 +488,11 @@ my-video-comments { } } - .privacy-concerns-okay { - background-color: var(--mainColor); + .privacy-concerns-button { padding: 5px 8px 5px 7px; margin-left: auto; border-radius: 3px; + white-space: nowrap; cursor: pointer; transition: background-color 0.3s; font-weight: $font-semibold; @@ -479,6 +501,11 @@ my-video-comments { background-color: #000; } } + + .privacy-concerns-okay { + background-color: pvar(--mainColor); + margin-left: 10px; + } } @media screen and (max-width: 1600px) { @@ -524,7 +551,8 @@ my-video-comments { @media screen and (max-width: 600px) { .video-bottom { - margin: 20px 0 0 0 !important; + margin-top: 20px !important; + margin-bottom: 20px !important; .video-info { padding: 0;