X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2F%2Bvideos%2F%2Bvideo-watch%2Fvideo-watch.component.scss;h=1d83fa139ea30dd45f8d59101e3d80967f3945ee;hb=06a555797929d4867264b096c8420cdedd50f496;hp=e075fc57ef6654bfc566990bd44531268a93c147;hpb=6ebdd12f8806edd7076e89c8ea3bcfaf5658b2b6;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 e075fc57e..1d83fa139 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.scss +++ b/client/src/app/+videos/+video-watch/video-watch.component.scss @@ -151,6 +151,7 @@ @include peertube-word-wrap; @include margin-right(30px); + min-height: 40px; // Align with the action buttons font-size: 27px; font-weight: $font-semibold; @@ -211,106 +212,6 @@ @include margin-left(5px); } } - - .video-actions-rates { - @include margin-left(auto); - @include margin-right(0); - - margin-top: 0; - margin-bottom: 10px; - - align-items: start; - width: max-content; - - .video-actions { - height: 40px; // Align with the title - display: flex; - align-items: center; - - .action-button:not(:first-child), - .action-dropdown, - my-video-actions-dropdown { - @include margin-left(5px); - } - - ::ng-deep.action-button { - @include peertube-button; - @include button-with-icon(21px, 0, -1px); - - font-size: 100%; - font-weight: $font-semibold; - display: inline-block; - padding: 0 10px; - white-space: nowrap; - background-color: transparent !important; - color: pvar(--actionButtonColor); - text-transform: uppercase; - - &::after { - display: none; - } - - &:hover { - opacity: 0.9; - } - - &.action-button-support { - color: pvar(--supportButtonColor); - - my-global-icon { - @include apply-svg-color(pvar(--supportButtonColor)); - } - } - - &.action-button-support { - my-global-icon { - ::ng-deep path:first-child { - fill: pvar(--supportButtonHeartColor) !important; - } - } - } - - &.action-button-save { - my-global-icon { - top: 0 !important; - right: -1px; - } - } - - .icon-text { - @include margin-left(3px); - } - } - } - - .video-info-likes-dislikes-bar-outer-container { - position: relative; - } - - .video-info-likes-dislikes-bar-inner-container { - position: absolute; - height: 20px; - } - - .video-info-likes-dislikes-bar { - $likes-bar-height: 2px; - height: $likes-bar-height; - margin-top: -$likes-bar-height; - width: 120px; - background-color: #ccc; - position: relative; - top: 10px; - - .likes-bar { - height: 100%; - background-color: #909090; - - &.liked { - background-color: pvar(--activatedActionButtonColor); - } - } - } - } } .video-attributes { @@ -351,6 +252,18 @@ } } +my-action-buttons { + @include margin-left(auto); + @include margin-right(0); + + display: block; + margin-top: 0; + margin-bottom: 10px; + + align-items: start; + width: max-content; +} + my-recommended-videos { @include padding-left(15px); @@ -411,10 +324,6 @@ my-video-comments { @media screen and (max-width: 450px) { .video-bottom { - .action-button .icon-text { - display: none !important; - } - .video-info .video-info-first-row { .video-info-name { font-size: 18px; @@ -423,12 +332,12 @@ my-video-comments { .video-info-date-views { font-size: 14px; } - - .video-actions-rates { - margin-top: 10px; - } } } + + my-action-buttons { + margin-top: 10px; + } }