aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-08-19 09:24:29 +0200
committerChocobozzz <me@florianbigard.com>2021-08-25 11:24:11 +0200
commitdd24f1bb0a4b252e5342b251ba36853364da7b8e (patch)
tree41a9506d07413f056fb90425705e258f96fdc77d /client/src/sass
parent2e80d256cc75b4b02c8efc3d3e4cdf57ddf401a8 (diff)
downloadPeerTube-dd24f1bb0a4b252e5342b251ba36853364da7b8e.tar.gz
PeerTube-dd24f1bb0a4b252e5342b251ba36853364da7b8e.tar.zst
PeerTube-dd24f1bb0a4b252e5342b251ba36853364da7b8e.zip
Add video filters to common video pages
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/bootstrap.scss1
-rw-r--r--client/src/sass/classes.scss4
-rw-r--r--client/src/sass/include/_mixins.scss77
3 files changed, 50 insertions, 32 deletions
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 4f6e08c1b..4e88d9706 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -287,6 +287,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
287 287
288 &.show { 288 &.show {
289 max-height: 1500px; 289 max-height: 1500px;
290 overflow: inherit !important;
290 } 291 }
291} 292}
292 293
diff --git a/client/src/sass/classes.scss b/client/src/sass/classes.scss
index 2d8117ee5..1cd7a6058 100644
--- a/client/src/sass/classes.scss
+++ b/client/src/sass/classes.scss
@@ -24,3 +24,7 @@
24.tertiary-button { 24.tertiary-button {
25 @include tertiary-button; 25 @include tertiary-button;
26} 26}
27
28.peertube-radio-container {
29 @include peertube-radio-container;
30}
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 4d4c52b34..9f6d69131 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -420,42 +420,55 @@
420 } 420 }
421} 421}
422 422
423// Thanks: https://codepen.io/triss90/pen/XNEdRe/ 423// Thanks: https://codepen.io/manabox/pen/raQmpL
424@mixin peertube-radio-container { 424@mixin peertube-radio-container {
425 input[type=radio] { 425 [type=radio]:checked,
426 display: none; 426 [type=radio]:not(:checked) {
427 427 position: absolute;
428 + label { 428 left: -9999px;
429 font-weight: $font-regular; 429 }
430 cursor: pointer;
431 430
432 &::before { 431 [type=radio]:checked + label,
433 @include margin-right(10px); 432 [type=radio]:not(:checked) + label {
434 433 position: relative;
435 position: relative; 434 padding-left: 28px;
436 top: -2px; 435 cursor: pointer;
437 content: ''; 436 line-height: 20px;
438 background: #fff; 437 display: inline-block;
439 border-radius: 100%; 438 }
440 border: 1px solid #000;
441 display: inline-block;
442 width: 15px;
443 height: 15px;
444 vertical-align: middle;
445 cursor: pointer;
446 text-align: center;
447 }
448 }
449 439
450 &:checked + label::before { 440 [type=radio]:checked + label::before,
451 background-color: #000; 441 [type=radio]:not(:checked) + label::before {
452 box-shadow: inset 0 0 0 4px #fff; 442 content: '';
453 } 443 position: absolute;
444 left: 0;
445 top: 0;
446 width: 18px;
447 height: 18px;
448 border: 1px solid #C6C6C6;
449 border-radius: 100%;
450 background: #fff;
451 }
454 452
455 &:focus + label::before { 453 [type=radio]:checked + label::after,
456 outline: none; 454 [type=radio]:not(:checked) + label::after {
457 border-color: #000; 455 content: '';
458 } 456 width: 10px;
457 height: 10px;
458 background: pvar(--mainColor);
459 position: absolute;
460 top: 4px;
461 left: 4px;
462 border-radius: 100%;
463 transition: all 0.2s ease;
464 }
465 [type=radio]:not(:checked) + label::after {
466 opacity: 0;
467 transform: scale(0);
468 }
469 [type=radio]:checked + label::after {
470 opacity: 1;
471 transform: scale(1);
459 } 472 }
460} 473}
461 474