Add opacity effect on control bar icons

[github/Chocobozzz/PeerTube.git] / client / src / sass / include / _mixins.scss

diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 140de1b2c6f54ab2b14e8bfc8833fc308d5d97b1..e1b1bb32c7203c3709bb15cd03c507ad1f27545b 100644 (file)
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -7,6 +7,15 @@
   }
 }
 
+@mixin disable-outline {
+  outline: none;
+
+  &::-moz-focus-inner {
+    border: 0;
+    padding: 0
+  }
+}
+
 @mixin peertube-input-text($width) {
   display: inline-block;
   height: $button-height;
@@ -110,11 +119,6 @@
   }
 }
 
-@mixin avatar ($size) {
-  width: $size;
-  height: $size;
-}
-
 @mixin icon ($size) {
   display: inline-block;
   background-repeat: no-repeat;
@@ -125,7 +129,6 @@
   cursor: pointer;
 }
 
-
 @mixin peertube-select-container ($width) {
   padding: 0;
   margin: 0;
@@ -152,7 +155,7 @@
   }
 
   select {
-    padding: 0 12px;
+    padding: 0 35px 0 12px;
     width: calc(100% + 2px);
     position: relative;
     left: 1px;
@@ -162,6 +165,7 @@
     appearance: none;
     cursor: pointer;
     height: $button-height;
+    text-overflow: ellipsis;
 
     &:focus {
       outline: none;
@@ -264,6 +268,14 @@
     font-weight: $font-regular;
     margin-left: 5px;
     cursor: pointer;
+    display: inline;
   }
 }
 
+
+@mixin avatar ($size) {
+  object-fit: cover;
+  border-radius:50%;
+  width: $size;
+  height: $size;
+}