Design video watch modals

2 files changed, 44 insertions, 2 deletions

diff --git a/client/src/sass/_mixins.scss b/client/src/sass/_mixins.scss
index ddc9c6766..14d9b5044 100644
--- a/client/src/sass/_mixins.scss
+++ b/client/src/sass/_mixins.scss
@@ -23,7 +23,8 @@
   color: #fff;
   background-color: $orange-color;
 
-  &:hover {
+  &:hover, &:active, &:focus, &[disabled] {
+    color: #fff;
     background-color: $orange-hoover-color;
   }
 }
@@ -32,7 +33,8 @@
   background-color: $grey-color;
   color: #585858;
 
-  &:hover {
+  &:hover, &:active, &:focus, &[disabled] {
+    color: #585858;
     background-color: $grey-hoover-color;
   }
 }
@@ -60,3 +62,13 @@
   width: $size;
   height: $size;
 }
+
+@mixin icon ($size) {
+  display: inline-block;
+  background-repeat: no-repeat;
+  background-size: contain;
+  width: $size;
+  height: $size;
+  vertical-align: middle;
+  cursor: pointer;
+}
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index c81031021..dc1f4dba0 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -152,3 +152,33 @@ p-datatable {
     color: #000 !important;
   }
 }
+
+.modal {
+  .modal-header {
+    border-bottom: none;
+
+    .title-page-single {
+      margin: 0;
+    }
+  }
+}
+
+.orange-button {
+  @include peertube-button;
+  @include orange-button;
+}
+
+.orange-button-link {
+  @include peertube-button-link;
+  @include orange-button;
+}
+
+.grey-button {
+  @include peertube-button;
+  @include grey-button;
+}
+
+.grey-button-link {
+  @include peertube-button-link;
+  @include grey-button;
+}