Add video filters to common video pages

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/';
 
   &.show {
     max-height: 1500px;
+    overflow: inherit !important;
   }
 }
 
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 @@
 .tertiary-button {
   @include tertiary-button;
 }
+
+.peertube-radio-container {
+  @include peertube-radio-container;
+}
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 @@
   }
 }
 
-// Thanks: https://codepen.io/triss90/pen/XNEdRe/
+// Thanks: https://codepen.io/manabox/pen/raQmpL
 @mixin peertube-radio-container {
-  input[type=radio] {
-    display: none;
-
-    + label {
-      font-weight: $font-regular;
-      cursor: pointer;
+  [type=radio]:checked,
+  [type=radio]:not(:checked) {
+    position: absolute;
+    left: -9999px;
+  }
 
-      &::before {
-        @include margin-right(10px);
-
-        position: relative;
-        top: -2px;
-        content: '';
-        background: #fff;
-        border-radius: 100%;
-        border: 1px solid #000;
-        display: inline-block;
-        width: 15px;
-        height: 15px;
-        vertical-align: middle;
-        cursor: pointer;
-        text-align: center;
-      }
-    }
+  [type=radio]:checked + label,
+  [type=radio]:not(:checked) + label {
+    position: relative;
+    padding-left: 28px;
+    cursor: pointer;
+    line-height: 20px;
+    display: inline-block;
+  }
 
-    &:checked + label::before {
-      background-color: #000;
-      box-shadow: inset 0 0 0 4px #fff;
-    }
+  [type=radio]:checked + label::before,
+  [type=radio]:not(:checked) + label::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 18px;
+    height: 18px;
+    border: 1px solid #C6C6C6;
+    border-radius: 100%;
+    background: #fff;
+  }
 
-    &:focus + label::before {
-      outline: none;
-      border-color: #000;
-    }
+  [type=radio]:checked + label::after,
+  [type=radio]:not(:checked) + label::after {
+    content: '';
+    width: 10px;
+    height: 10px;
+    background: pvar(--mainColor);
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    border-radius: 100%;
+    transition: all 0.2s ease;
+  }
+  [type=radio]:not(:checked) + label::after {
+    opacity: 0;
+    transform: scale(0);
+  }
+  [type=radio]:checked + label::after {
+    opacity: 1;
+    transform: scale(1);
   }
 }