aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
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/src/app/videos
parent51e028a94e79957a4ef6a620b9ef3c956064f05e (diff)
downloadPeerTube-0240da5c3249ee567c679b069c143858194ff142.tar.gz
PeerTube-0240da5c3249ee567c679b069c143858194ff142.tar.zst
PeerTube-0240da5c3249ee567c679b069c143858194ff142.zip
(css) transparent buttons in watch page
Diffstat (limited to 'client/src/app/videos')
-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
2 files changed, 34 insertions, 23 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 }