7 files changed, 36 insertions, 50 deletions

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 5dacdd73b..fa2452231 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -32,7 +32,7 @@ body {
   --menuForegroundColor: #{$menu-color};
   --submenuColor: #{$sub-menu-color};
 
-  --inputColor: #{$input-background-color};
+  --inputBackgroundColor: #{$input-background-color};
   --inputPlaceholderColor: #{$input-placeholder-color};
 
   --actionButtonColor: #{$grey-foreground-color};
@@ -61,7 +61,7 @@ strong {
 
 input.readonly {
   /* Force blank on readonly inputs */
-  background-color: var(--inputColor) !important;
+  background-color: var(--inputBackgroundColor) !important;
 }
 
 input, textarea {
@@ -202,26 +202,6 @@ label {
   to { transform: scale(1) rotate(360deg);}
 }
 
-.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;
-}
-
 // In tables, don't have a hover different background
 table {
   .action-button-edit, .action-button-delete {
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 136eddd3a..317781e0e 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -77,11 +77,17 @@
   }
 }
 
+@mixin button-focus-visible-shadow($color) {
+  &.focus-visible {
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px $color;
+  }
+}
+
 @mixin peertube-input-text($width) {
   display: inline-block;
   height: $button-height;
   width: $width;
-  background: var(--inputColor);
+  background: var(--inputBackgroundColor);
   border: 1px solid #C6C6C6;
   border-radius: 3px;
   padding-left: 15px;
@@ -118,6 +124,8 @@
 }
 
 @mixin orange-button {
+  @include button-focus-visible-shadow(var(--mainHoverColor));
+
   &, &:active, &:focus {
     color: #fff;
     background-color: var(--mainColor);
@@ -169,7 +177,6 @@
   text-align: center;
   padding: 0 17px 0 13px;
   cursor: pointer;
-  outline: 0;
 }
 
 @mixin peertube-button-link {
@@ -254,7 +261,7 @@
   width: $width;
   border-radius: 3px;
   overflow: hidden;
-  background: var(--inputColor);
+  background: var(--inputBackgroundColor);
   position: relative;
   font-size: 15px;
 
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 5b5ac9adc..e087a2548 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -81,7 +81,7 @@ $variables: (
   --menuForegroundColor: var(--menuForegroundColor),
   --submenuColor: var(--submenuColor),
 
-  --inputColor: var(--inputColor),
+  --inputBackgroundColor: var(--inputBackgroundColor),
   --inputPlaceholderColor: var(--inputPlaceholderColor),
 
   --actionButtonColor: var(--actionButtonColor),
diff --git a/client/src/sass/player/_player-variables.scss b/client/src/sass/player/_player-variables.scss
index 0c2359ac7..935a60b49 100644
--- a/client/src/sass/player/_player-variables.scss
+++ b/client/src/sass/player/_player-variables.scss
@@ -1,7 +1,7 @@
 $primary-foreground-color: #fff;
 $primary-foreground-opacity: 0.9;
 $primary-foreground-opacity-hover: 1;
-$primary-background-color: #000;
+$primary-background-color: rgba(0, 0, 0, 0.8);
 
 $font-size: 13px;
 $control-bar-height: 34px;
diff --git a/client/src/sass/player/bezels.scss b/client/src/sass/player/bezels.scss
index ff3448511..853a030a3 100644
--- a/client/src/sass/player/bezels.scss
+++ b/client/src/sass/player/bezels.scss
@@ -32,11 +32,3 @@
     fill: #fff;
   }
 }
-
-.video-js {
-
-  .vjs-bezel-content {
-
-  }
-
-}
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 41e2a535c..f80106428 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -21,6 +21,12 @@ body {
 
   .vjs-dock-text {
     padding-right: 10px;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, .6) 0, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0) 100%);
+  }
+
+  .vjs-dock-title,
+  .vjs-dock-description {
+    text-shadow: 0 0 2px rgba(0, 0, 0, .5);
   }
 
   .vjs-dock-description {
@@ -55,7 +61,7 @@ body {
     $big-play-width: 1.2em;
     $big-play-height: 1.2em;
 
-    border: 4px solid #fff;
+    border: 2px solid #fff;
     border-radius: 100%;
 
     left: 50%;
@@ -185,7 +191,6 @@ body {
 
         .vjs-play-progress {
           background: var(--embedForegroundColor);
-          transition: all .2s ease 0s;
 
           // Not display the circle if the progress is not hovered
           &::before {
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 0d51818c3..753fdf5c9 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -389,25 +389,27 @@ p-toast {
 
   .ui-toast-message {
     font-family: $main-fonts;
-
-    &.ui-toast-message-success {
-      color: #fff !important;
-      background-color: #8BC34A !important;
+    background-color: var(--mainBackgroundColor) !important;
+    border-radius: 5px;
+    box-sizing: border-box;
+    border: 1px solid #EBEEF5 !important;
+    box-shadow: 0 2px 12px 0 rgba(0, 0 , 0, .1);
+    overflow: hidden;
+
+    &.ui-toast-message-success .glyphicon {
+      color: #8BC34A !important;
     }
 
-    &.ui-toast-message-error {
-      color: #fff !important;
-      background-color: #F44336 !important;
+    &.ui-toast-message-error .glyphicon {
+      color: #F44336 !important;
     }
 
-    &.ui-toast-message-info {
-      color: #fff !important;
-      background-color: #03A9F4 !important;
+    &.ui-toast-message-warn .glyphicon {
+      color: #F1680D !important;
     }
 
-    &.ui-toast-message-info {
-      color: #fff !important;
-      background-color: #03A9F4 !important;
+    &.ui-toast-message-info .glyphicon {
+      color: #03A9F4 !important;
     }
 
     .notification-block {