diff options
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.scss | 32 |
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 | } |