aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2019-12-24 14:04:37 +0100
committerRigel Kent <sendmemail@rigelk.eu>2019-12-27 12:12:42 +0100
commit0240da5c3249ee567c679b069c143858194ff142 (patch)
tree7c01b5f642be031793ec0bd7ecf1dcce005a4165 /client
parent51e028a94e79957a4ef6a620b9ef3c956064f05e (diff)
downloadPeerTube-0240da5c3249ee567c679b069c143858194ff142.tar.gz
PeerTube-0240da5c3249ee567c679b069c143858194ff142.tar.zst
PeerTube-0240da5c3249ee567c679b069c143858194ff142.zip
(css) transparent buttons in watch page
Diffstat (limited to 'client')
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html2
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss55
-rw-r--r--client/src/sass/application.scss6
-rw-r--r--client/src/sass/include/_variables.scss7
4 files changed, 44 insertions, 26 deletions
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 25029623e..74ac64a63 100644
--- 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 @@
124 <div 124 <div
125 class="video-info-likes-dislikes-bar" 125 class="video-info-likes-dislikes-bar"
126 > 126 >
127 <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div> 127 <div class="likes-bar" [ngClass]="{ 'liked': userRating !== 'none' }" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
128 </div> 128 </div>
129 </div> 129 </div>
130 </div> 130 </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 5da5a60dd..ef0b2d1c5 100644
--- 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;
220 .action-button:not(:first-child), 220 .action-button:not(:first-child),
221 .action-dropdown, 221 .action-dropdown,
222 my-video-actions-dropdown { 222 my-video-actions-dropdown {
223 margin-left: 10px; 223 margin-left: 5px;
224 } 224 }
225 225
226 .action-button { 226 ::ng-deep.action-button {
227 @include peertube-button; 227 @include peertube-button;
228 @include grey-button;
229 @include button-with-icon(21px, 0, -1px); 228 @include button-with-icon(21px, 0, -1px);
230 @include apply-svg-color($grey-foreground-color); 229 @include apply-svg-color(var(--actionButtonColor));
231 230
232 font-size: 15px; 231 font-size: 100%;
233 font-weight: $font-semibold; 232 font-weight: $font-semibold;
234 display: inline-block; 233 display: inline-block;
235 padding: 0 10px 0 10px; 234 padding: 0 10px 0 10px;
236 white-space: nowrap; 235 white-space: nowrap;
236 background-color: transparent !important;
237 color: var(--actionButtonColor);
238 text-transform: uppercase;
237 239
238 &::after { 240 &::after {
239 display: none; 241 display: none;
240 } 242 }
241 243
242 .action-button-like, 244 &:hover {
243 .action-button-dislike { 245 opacity: 0.9;
246 }
247
248 &.action-button-like,
249 &.action-button-dislike {
250 filter: brightness(120%);
251
244 .count { 252 .count {
245 margin-right: 5px; 253 margin-right: 5px;
246 } 254 }
247 } 255 }
248 256
249 &.action-button-like.activated { 257 &.action-button-like.activated {
250 background-color: $green;
251
252 .count { 258 .count {
253 color: #fff; 259 color: $activated-action-button-color;
254 } 260 }
255 261
256 my-global-icon { 262 my-global-icon {
257 @include apply-svg-color(#fff); 263 @include apply-svg-color($activated-action-button-color);
258 } 264 }
259 } 265 }
260 266
261 &.action-button-dislike.activated { 267 &.action-button-dislike.activated {
262 background-color: $red;
263
264 .count { 268 .count {
265 color: #fff; 269 color: $activated-action-button-color;
266 } 270 }
267 271
268 my-global-icon { 272 my-global-icon {
269 @include apply-svg-color(#fff); 273 @include apply-svg-color($activated-action-button-color);
270 } 274 }
271 } 275 }
272 276
273 &.action-button-support { 277 &.action-button-support {
274 color: var(--supportButtonColor); 278 color: var(--supportButtonColor);
275 background-color: var(--supportButtonBackgroundColor);
276 279
277 &:hover { 280 my-global-icon {
278 opacity: 0.9; 281 @include apply-svg-color(var(--supportButtonColor));
279 } 282 }
283 }
280 284
285 &.action-button-support {
281 my-global-icon { 286 my-global-icon {
282 @include apply-svg-color(var(--supportButtonColor)); 287 ::ng-deep path:first-child {
288 fill: var(--supportButtonHeartColor) !important;
289 }
283 } 290 }
284 } 291 }
285 292
@@ -309,14 +316,18 @@ $video-info-margin-left: 44px;
309 $likes-bar-height: 2px; 316 $likes-bar-height: 2px;
310 height: $likes-bar-height; 317 height: $likes-bar-height;
311 margin-top: -$likes-bar-height; 318 margin-top: -$likes-bar-height;
312 width: 186px; 319 width: 120px;
313 background-color: $red; 320 background-color: #ccc;
314 position: relative; 321 position: relative;
315 top: 10px; 322 top: 10px;
316 323
317 .likes-bar { 324 .likes-bar {
318 height: 100%; 325 height: 100%;
319 background-color: $green; 326 background-color: #909090;
327
328 &.liked {
329 background-color: $activated-action-button-color;
330 }
320 } 331 }
321 } 332 }
322 } 333 }
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 751f101ed..9877a07d5 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -34,8 +34,10 @@ body {
34 --inputColor: #{$input-background-color}; 34 --inputColor: #{$input-background-color};
35 --inputPlaceholderColor: #{$input-placeholder-color}; 35 --inputPlaceholderColor: #{$input-placeholder-color};
36 36
37 --supportButtonBackgroundColor: #{$support-button}; 37 --actionButtonColor: #{$grey-foreground-color};
38 --supportButtonColor: #{$white}; 38 --supportButtonBackgroundColor: #{transparent};
39 --supportButtonColor: #{var(--actionButtonColor)};
40 --supportButtonHeartColor: #{$support-button-heart};
39 41
40 font-family: $main-fonts; 42 font-family: $main-fonts;
41 font-weight: $font-regular; 43 font-weight: $font-regular;
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 0cec9c412..6dededb0e 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -14,7 +14,8 @@ $grey-foreground-hover-color: #303030;
14$orange-color: #F1680D; 14$orange-color: #F1680D;
15$orange-hover-color: #F97D46; 15$orange-hover-color: #F97D46;
16 16
17$support-button: #38981a; 17$support-button: inherit;
18$support-button-heart: #e83e8c;
18 19
19$bg-color: #fff; 20$bg-color: #fff;
20$fg-color: #000; 21$fg-color: #000;
@@ -61,6 +62,8 @@ $input-placeholder-color: #898989;
61 62
62$sub-menu-margin-bottom: 30px; 63$sub-menu-margin-bottom: 30px;
63 64
65$activated-action-button-color: black;
66
64/*** map theme ***/ 67/*** map theme ***/
65 68
66// pass variables into a sass map, 69// pass variables into a sass map,
@@ -78,8 +81,10 @@ $variables: (
78 --inputColor: var(--inputColor), 81 --inputColor: var(--inputColor),
79 --inputPlaceholderColor: var(--inputPlaceholderColor), 82 --inputPlaceholderColor: var(--inputPlaceholderColor),
80 83
84 --actionButtonColor: var(--actionButtonColor),
81 --supportButtonColor: var(--supportButtonColor), 85 --supportButtonColor: var(--supportButtonColor),
82 --supportButtonBackgroundColor: var(--supportButtonBackgroundColor), 86 --supportButtonBackgroundColor: var(--supportButtonBackgroundColor),
87 --supportButtonHeartColor: var(--supportButtonHeartColor),
83 88
84 --embedForegroundColor: var(--embedForegroundColor), 89 --embedForegroundColor: var(--embedForegroundColor),
85 --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor) 90 --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor)