1 files changed, 21 insertions, 10 deletions

diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 136eddd3a..4766e4490 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -11,11 +11,6 @@
   &:focus:not(.focus-visible) {
     outline: none;
   }
-
-  &::-moz-focus-inner {
-    border: 0;
-    padding: 0
-  }
 }
 
 
@@ -77,11 +72,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 +119,8 @@
 }
 
 @mixin orange-button {
+  @include button-focus-visible-shadow(var(--mainHoverColor));
+
   &, &:active, &:focus {
     color: #fff;
     background-color: var(--mainColor);
@@ -169,7 +172,6 @@
   text-align: center;
   padding: 0 17px 0 13px;
   cursor: pointer;
-  outline: 0;
 }
 
 @mixin peertube-button-link {
@@ -254,7 +256,7 @@
   width: $width;
   border-radius: 3px;
   overflow: hidden;
-  background: var(--inputColor);
+  background: var(--inputBackgroundColor);
   position: relative;
   font-size: 15px;
 
@@ -443,7 +445,6 @@
 @mixin actor-owner {
   @include disable-default-a-behaviour;
 
-  display: inline-table;
   font-size: 13px;
   margin-top: 4px;
   color: var(--mainForegroundColor);
@@ -486,14 +487,15 @@
       .actor-names {
         display: flex;
         align-items: center;
+        flex-wrap: wrap;
 
         .actor-display-name {
           font-size: 23px;
           font-weight: $font-bold;
+          margin-right: 7px;
         }
 
         .actor-name {
-          margin-left: 7px;
           position: relative;
           top: 3px;
           font-size: 14px;
@@ -501,6 +503,10 @@
         }
       }
 
+      .actor-lower {
+        grid-area: lower;
+      }
+
       .actor-followers {
         font-size: 15px;
       }
@@ -520,6 +526,11 @@
       margin-bottom: 0;
       text-transform: uppercase;
       font-weight: 600;
+      font-size: 110%;
+
+      @media screen and (max-width: $mobile-view) {
+        font-size: 130%;
+      }
     }
   }
 }