aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos/+video-watch/video-watch.component.scss
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/videos/+video-watch/video-watch.component.scss')
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss32
1 files changed, 16 insertions, 16 deletions
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 431a21039..8be0bab1d 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -166,7 +166,7 @@ $video-info-margin-left: 44px;
166 a { 166 a {
167 @include disable-default-a-behaviour; 167 @include disable-default-a-behaviour;
168 168
169 color: var(--mainForegroundColor); 169 color: pvar(--mainForegroundColor);
170 170
171 &:hover { 171 &:hover {
172 opacity: 0.8; 172 opacity: 0.8;
@@ -225,7 +225,7 @@ $video-info-margin-left: 44px;
225 ::ng-deep.action-button { 225 ::ng-deep.action-button {
226 @include peertube-button; 226 @include peertube-button;
227 @include button-with-icon(21px, 0, -1px); 227 @include button-with-icon(21px, 0, -1px);
228 @include apply-svg-color(var(--actionButtonColor)); 228 @include apply-svg-color(pvar(--actionButtonColor));
229 229
230 font-size: 100%; 230 font-size: 100%;
231 font-weight: $font-semibold; 231 font-weight: $font-semibold;
@@ -233,7 +233,7 @@ $video-info-margin-left: 44px;
233 padding: 0 10px 0 10px; 233 padding: 0 10px 0 10px;
234 white-space: nowrap; 234 white-space: nowrap;
235 background-color: transparent !important; 235 background-color: transparent !important;
236 color: var(--actionButtonColor); 236 color: pvar(--actionButtonColor);
237 text-transform: uppercase; 237 text-transform: uppercase;
238 238
239 &::after { 239 &::after {
@@ -255,36 +255,36 @@ $video-info-margin-left: 44px;
255 255
256 &.action-button-like.activated { 256 &.action-button-like.activated {
257 .count { 257 .count {
258 color: var(--activatedActionButtonColor); 258 color: pvar(--activatedActionButtonColor);
259 } 259 }
260 260
261 my-global-icon { 261 my-global-icon {
262 @include apply-svg-color(var(--activatedActionButtonColor)); 262 @include apply-svg-color(pvar(--activatedActionButtonColor));
263 } 263 }
264 } 264 }
265 265
266 &.action-button-dislike.activated { 266 &.action-button-dislike.activated {
267 .count { 267 .count {
268 color: var(--activatedActionButtonColor); 268 color: pvar(--activatedActionButtonColor);
269 } 269 }
270 270
271 my-global-icon { 271 my-global-icon {
272 @include apply-svg-color(var(--activatedActionButtonColor)); 272 @include apply-svg-color(pvar(--activatedActionButtonColor));
273 } 273 }
274 } 274 }
275 275
276 &.action-button-support { 276 &.action-button-support {
277 color: var(--supportButtonColor); 277 color: pvar(--supportButtonColor);
278 278
279 my-global-icon { 279 my-global-icon {
280 @include apply-svg-color(var(--supportButtonColor)); 280 @include apply-svg-color(pvar(--supportButtonColor));
281 } 281 }
282 } 282 }
283 283
284 &.action-button-support { 284 &.action-button-support {
285 my-global-icon { 285 my-global-icon {
286 ::ng-deep path:first-child { 286 ::ng-deep path:first-child {
287 fill: var(--supportButtonHeartColor) !important; 287 fill: pvar(--supportButtonHeartColor) !important;
288 } 288 }
289 } 289 }
290 } 290 }
@@ -325,7 +325,7 @@ $video-info-margin-left: 44px;
325 background-color: #909090; 325 background-color: #909090;
326 326
327 &.liked { 327 &.liked {
328 background-color: var(--activatedActionButtonColor); 328 background-color: pvar(--activatedActionButtonColor);
329 } 329 }
330 } 330 }
331 } 331 }
@@ -356,7 +356,7 @@ $video-info-margin-left: 44px;
356 .video-info-description-more { 356 .video-info-description-more {
357 cursor: pointer; 357 cursor: pointer;
358 font-weight: $font-semibold; 358 font-weight: $font-semibold;
359 color: var(--greyForegroundColor); 359 color: pvar(--greyForegroundColor);
360 font-size: 14px; 360 font-size: 14px;
361 361
362 .glyphicon { 362 .glyphicon {
@@ -379,13 +379,13 @@ $video-info-margin-left: 44px;
379 min-width: 142px; 379 min-width: 142px;
380 padding-right: 5px; 380 padding-right: 5px;
381 display: inline-block; 381 display: inline-block;
382 color: var(--greyForegroundColor); 382 color: pvar(--greyForegroundColor);
383 font-weight: $font-bold; 383 font-weight: $font-bold;
384 } 384 }
385 385
386 a.video-attribute-value { 386 a.video-attribute-value {
387 @include disable-default-a-behaviour; 387 @include disable-default-a-behaviour;
388 color: var(--mainForegroundColor); 388 color: pvar(--mainForegroundColor);
389 389
390 &:hover { 390 &:hover {
391 opacity: 0.9; 391 opacity: 0.9;
@@ -480,7 +480,7 @@ my-video-comments {
480 a { 480 a {
481 @include disable-default-a-behaviour; 481 @include disable-default-a-behaviour;
482 482
483 color: var(--mainColor); 483 color: pvar(--mainColor);
484 transition: color 0.3s; 484 transition: color 0.3s;
485 485
486 &:hover { 486 &:hover {
@@ -503,7 +503,7 @@ my-video-comments {
503 } 503 }
504 504
505 .privacy-concerns-okay { 505 .privacy-concerns-okay {
506 background-color: var(--mainColor); 506 background-color: pvar(--mainColor);
507 margin-left: 10px; 507 margin-left: 10px;
508 } 508 }
509} 509}