projects
/
oweals
/
peertube.git
/ commitdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
| commitdiff |
tree
raw
|
patch
|
inline
| side by side (parent:
51e028a
)
(css) transparent buttons in watch page
2349/head
author
Rigel Kent
<sendmemail@rigelk.eu>
Tue, 24 Dec 2019 13:04:37 +0000
(14:04 +0100)
committer
Rigel Kent
<sendmemail@rigelk.eu>
Fri, 27 Dec 2019 11:12:42 +0000
(12:12 +0100)
client/src/app/videos/+video-watch/video-watch.component.html
patch
|
blob
|
history
client/src/app/videos/+video-watch/video-watch.component.scss
patch
|
blob
|
history
client/src/sass/application.scss
patch
|
blob
|
history
client/src/sass/include/_variables.scss
patch
|
blob
|
history
diff --git
a/client/src/app/videos/+video-watch/video-watch.component.html
b/client/src/app/videos/+video-watch/video-watch.component.html
index 25029623eee5b6b6b9b6018a2a278b5926ab3b95..74ac64a63da2ae819ddbfb75741cedeb9e53a79d 100644
(file)
--- a/
client/src/app/videos/+video-watch/video-watch.component.html
+++ b/
client/src/app/videos/+video-watch/video-watch.component.html
@@
-124,7
+124,7
@@
<div
class="video-info-likes-dislikes-bar"
>
<div
class="video-info-likes-dislikes-bar"
>
- <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
+ <div class="likes-bar" [ng
Class]="{ 'liked': userRating !== 'none' }" [ng
Style]="{ 'width.%': video.likesPercent }"></div>
</div>
</div>
</div>
</div>
</div>
</div>
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 5da5a60dd31b61c2be965f6e9ae09010e4cd8cbe..ef0b2d1c5841276e3789b3ea0a06386c6e8b748d 100644
(file)
--- a/
client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/
client/src/app/videos/+video-watch/video-watch.component.scss
@@
-220,66
+220,73
@@
$video-info-margin-left: 44px;
.action-button:not(:first-child),
.action-dropdown,
my-video-actions-dropdown {
.action-button:not(:first-child),
.action-dropdown,
my-video-actions-dropdown {
- margin-left:
10
px;
+ margin-left:
5
px;
}
}
- .action-button {
+
::ng-deep
.action-button {
@include peertube-button;
@include peertube-button;
- @include grey-button;
@include button-with-icon(21px, 0, -1px);
@include button-with-icon(21px, 0, -1px);
- @include apply-svg-color(
$grey-foreground-color
);
+ @include apply-svg-color(
var(--actionButtonColor)
);
- font-size: 1
5px
;
+ font-size: 1
00%
;
font-weight: $font-semibold;
display: inline-block;
padding: 0 10px 0 10px;
white-space: nowrap;
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;
}
&::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 {
.count {
margin-right: 5px;
}
}
&.action-button-like.activated {
- background-color: $green;
-
.count {
.count {
- color:
#fff
;
+ color:
$activated-action-button-color
;
}
my-global-icon {
}
my-global-icon {
- @include apply-svg-color(
#fff
);
+ @include apply-svg-color(
$activated-action-button-color
);
}
}
&.action-button-dislike.activated {
}
}
&.action-button-dislike.activated {
- background-color: $red;
-
.count {
.count {
- color:
#fff
;
+ color:
$activated-action-button-color
;
}
my-global-icon {
}
my-global-icon {
- @include apply-svg-color(
#fff
);
+ @include apply-svg-color(
$activated-action-button-color
);
}
}
&.action-button-support {
color: var(--supportButtonColor);
}
}
&.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 {
my-global-icon {
- @include apply-svg-color(var(--supportButtonColor));
+ ::ng-deep path:first-child {
+ fill: var(--supportButtonHeartColor) !important;
+ }
}
}
}
}
@@
-309,14
+316,18
@@
$video-info-margin-left: 44px;
$likes-bar-height: 2px;
height: $likes-bar-height;
margin-top: -$likes-bar-height;
$likes-bar-height: 2px;
height: $likes-bar-height;
margin-top: -$likes-bar-height;
- width: 1
86
px;
- background-color:
$red
;
+ width: 1
20
px;
+ background-color:
#ccc
;
position: relative;
top: 10px;
.likes-bar {
height: 100%;
position: relative;
top: 10px;
.likes-bar {
height: 100%;
- background-color: $green;
+ background-color: #909090;
+
+ &.liked {
+ background-color: $activated-action-button-color;
+ }
}
}
}
}
}
}
diff --git
a/client/src/sass/application.scss
b/client/src/sass/application.scss
index 751f101ed6481cf9296f9468127d55653ec1eb60..9877a07d59b5375587ef47dd9be4ae678d44cba7 100644
(file)
--- a/
client/src/sass/application.scss
+++ b/
client/src/sass/application.scss
@@
-34,8
+34,10
@@
body {
--inputColor: #{$input-background-color};
--inputPlaceholderColor: #{$input-placeholder-color};
--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;
font-family: $main-fonts;
font-weight: $font-regular;
diff --git
a/client/src/sass/include/_variables.scss
b/client/src/sass/include/_variables.scss
index 0cec9c412c226b99bbbcc1f69961d3493217ab9c..6dededb0ee976eef9dafb526ad9e705c5dad4470 100644
(file)
--- a/
client/src/sass/include/_variables.scss
+++ b/
client/src/sass/include/_variables.scss
@@
-14,7
+14,8
@@
$grey-foreground-hover-color: #303030;
$orange-color: #F1680D;
$orange-hover-color: #F97D46;
$orange-color: #F1680D;
$orange-hover-color: #F97D46;
-$support-button: #38981a;
+$support-button: inherit;
+$support-button-heart: #e83e8c;
$bg-color: #fff;
$fg-color: #000;
$bg-color: #fff;
$fg-color: #000;
@@
-61,6
+62,8
@@
$input-placeholder-color: #898989;
$sub-menu-margin-bottom: 30px;
$sub-menu-margin-bottom: 30px;
+$activated-action-button-color: black;
+
/*** map theme ***/
// pass variables into a sass map,
/*** map theme ***/
// pass variables into a sass map,
@@
-78,8
+81,10
@@
$variables: (
--inputColor: var(--inputColor),
--inputPlaceholderColor: var(--inputPlaceholderColor),
--inputColor: var(--inputColor),
--inputPlaceholderColor: var(--inputPlaceholderColor),
+ --actionButtonColor: var(--actionButtonColor),
--supportButtonColor: var(--supportButtonColor),
--supportButtonBackgroundColor: var(--supportButtonBackgroundColor),
--supportButtonColor: var(--supportButtonColor),
--supportButtonBackgroundColor: var(--supportButtonBackgroundColor),
+ --supportButtonHeartColor: var(--supportButtonHeartColor),
--embedForegroundColor: var(--embedForegroundColor),
--embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor)
--embedForegroundColor: var(--embedForegroundColor),
--embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor)