interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

(css) transparent buttons in watch page

This commit is contained in:
Rigel Kent 2019-12-24 14:04:37 +01:00
parent 51e028a94e
commit 0240da5c32
No known key found for this signature in database
GPG Key ID: 5E53E96A494E452F
4 changed files with 45 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/app/videos/+video-watch/video-watch.component.html
View File

@ -124,7 +124,7 @@
<div
class="video-info-likes-dislikes-bar"
>
<div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
<div class="likes-bar" [ngClass]="{ 'liked': userRating !== 'none' }" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
</div>
</div>
</div>

57
client/src/app/videos/+video-watch/video-watch.component.scss
View File

@ -220,69 +220,76 @@ $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(var(--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: var(--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: $activated-action-button-color;
}
my-global-icon {
@include apply-svg-color(#fff);
@include apply-svg-color($activated-action-button-color);
}
}
&.action-button-dislike.activated {
background-color: $red;
.count {
color: #fff;
color: $activated-action-button-color;
}
my-global-icon {
@include apply-svg-color(#fff);
@include apply-svg-color($activated-action-button-color);
}
}
&.action-button-support {
color: var(--supportButtonColor);
background-color: var(--supportButtonBackgroundColor);
&:hover {
opacity: 0.9;
}
my-global-icon {
@include apply-svg-color(var(--supportButtonColor));
}
}
&.action-button-support {
my-global-icon {
::ng-deep path:first-child {
fill: var(--supportButtonHeartColor) !important;
}
}
}
&.action-button-save {
my-global-icon {
top: 0 !important;
@ -309,14 +316,18 @@ $video-info-margin-left: 44px;
$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: $activated-action-button-color;
}
}
}
}

6
client/src/sass/application.scss
View File

@ -34,8 +34,10 @@ body {
--inputColor: #{$input-background-color};
--inputPlaceholderColor: #{$input-placeholder-color};
--supportButtonBackgroundColor: #{$support-button};
--supportButtonColor: #{$white};
--actionButtonColor: #{$grey-foreground-color};
--supportButtonBackgroundColor: #{transparent};
--supportButtonColor: #{var(--actionButtonColor)};
--supportButtonHeartColor: #{$support-button-heart};
font-family: $main-fonts;
font-weight: $font-regular;

7
client/src/sass/include/_variables.scss
View File

@ -14,7 +14,8 @@ $grey-foreground-hover-color: #303030;
$orange-color: #F1680D;
$orange-hover-color: #F97D46;
$support-button: #38981a;
$support-button: inherit;
$support-button-heart: #e83e8c;
$bg-color: #fff;
$fg-color: #000;
@ -61,6 +62,8 @@ $input-placeholder-color: #898989;
$sub-menu-margin-bottom: 30px;
$activated-action-button-color: black;
/*** map theme ***/
// pass variables into a sass map,
@ -78,8 +81,10 @@ $variables: (
--inputColor: var(--inputColor),
--inputPlaceholderColor: var(--inputPlaceholderColor),
--actionButtonColor: var(--actionButtonColor),
--supportButtonColor: var(--supportButtonColor),
--supportButtonBackgroundColor: var(--supportButtonBackgroundColor),
--supportButtonHeartColor: var(--supportButtonHeartColor),
--embedForegroundColor: var(--embedForegroundColor),
--embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor)