Add support button in channel page

[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 ae2b99a5b5f21bc98e6141004843e8db99ad8468..82c60a59dce9175ff57c36e9170fdc55a244f6b6 100644 (file)
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -31,9 +31,19 @@
   text-overflow: ellipsis;
 }
 
-@mixin prefix($property, $parameters...) {
-  @each $prefix in -webkit-, -moz-, -ms-, -o-, "" {
-    #{$prefix}#{$property}: $parameters;
+@mixin fade-text ($fade-after, $background-color) {
+  position: relative;
+  overflow: hidden;
+
+  &:after {
+    content: '';
+    pointer-events: none;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    background: linear-gradient(transparent $fade-after, $background-color);
   }
 }
 
@@ -41,9 +51,6 @@
   word-break: break-word;
   word-wrap: break-word;
   overflow-wrap: break-word;
-  -webkit-hyphens: auto;
-  -ms-hyphens: auto;
-  -moz-hyphens: auto;
   hyphens: auto;
 }
 
@@ -52,28 +59,6 @@
   ::ng-deep .material {
     color: $color;
   }
-
-  ::ng-deep svg {
-    path[fill="#000"],
-    g[fill="#000"],
-    rect[fill="#000"],
-    circle[fill="#000"],
-    polygon[fill="#000"] {
-      fill: $color;
-    }
-
-    path[stroke="#000"],
-    g[stroke="#000"],
-    rect[stroke="#000"],
-    circle[stroke="#000"],
-    polygon[stroke="#000"] {
-      stroke: $color;
-    }
-
-    stop[stop-color="#000"] {
-      stop-color: $color;
-    }
-  }
 }
 
 @mixin fill-svg-color ($color) {
@@ -121,6 +106,7 @@
   min-height: $button-height;
   padding-top: 0;
   padding-bottom: 0;
+  flex-wrap: nowrap;
 
   .input-group-text{
     font-size: 14px;
@@ -162,6 +148,33 @@
   }
 }
 
+@mixin orange-button-inverted {
+  @include button-focus(pvar(--mainColorLightest));
+
+  border: 2px solid pvar(--mainColor);
+  font-weight: $font-regular;
+
+  &, &:active, &:focus {
+    color: pvar(--mainColor);
+    background-color: pvar(--mainBackgroundColor);
+  }
+
+  &:hover {
+    color: pvar(--mainColor);
+    background-color: pvar(--mainColorLightest);
+  }
+
+  &[disabled], &.disabled {
+    cursor: default;
+    color: pvar(--mainColor);
+    background-color: #C6C6C6;
+  }
+
+  my-global-icon {
+    @include apply-svg-color(pvar(--mainColor))
+  }
+}
+
 @mixin tertiary-button {
   @include button-focus($grey-button-outline-color);
 
@@ -179,6 +192,7 @@
 
 @mixin grey-button {
   @include button-focus($grey-button-outline-color);
+
   background-color: $grey-background-color;
   color: pvar(--greyForegroundColor);
 
@@ -246,6 +260,10 @@
 }
 
 @mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) {
+  display: inline-flex;
+  align-items: center;
+  line-height: normal !important;
+
   my-global-icon {
     position: relative;
     width: $width;
@@ -254,15 +272,12 @@
   }
 }
 
-@mixin peertube-button-file ($width) {
+@mixin peertube-file {
   position: relative;
   overflow: hidden;
   display: inline-block;
-  width: $width;
   min-height: 30px;
 
-  @include peertube-button;
-
   input[type=file] {
     position: absolute;
     top: 0;
@@ -280,6 +295,13 @@
   }
 }
 
+@mixin peertube-button-file ($width) {
+  width: $width;
+
+  @include peertube-file;
+  @include peertube-button;
+}
+
 @mixin icon ($size) {
   display: inline-block;
   background-repeat: no-repeat;
@@ -304,6 +326,14 @@
   z-index: 100;
 }
 
+@mixin responsive-width ($width) {
+  width: $width;
+
+  @media screen and (max-width: $width) {
+    width: 100%;
+  }
+}
+
 @mixin peertube-select-container ($width) {
   padding: 0;
   margin: 0;
@@ -516,6 +546,13 @@
   min-height: $size;
 }
 
+@mixin channel-avatar ($size) {
+  width: $size;
+  height: $size;
+  min-width: $size;
+  min-height: $size;
+}
+
 @mixin chevron ($size, $border-width) {
   border-style: solid;
   border-width: $border-width $border-width 0 0;
@@ -647,6 +684,11 @@
         font-size: 130%;
       }
     }
+
+    list-overflow {
+      display: inline-block;
+      width: max-content;
+    }
   }
 }
 
@@ -720,6 +762,10 @@
     &.secondary {
       background-color: pvar(--secondaryColor);
     }
+
+    &.red {
+      background-color: lighten($color: #c54130, $amount: 10);
+    }
   }
 }
 
@@ -794,7 +840,6 @@
   .dashboard-num, .dashboard-text {
     text-align: center;
     font-size: 130%;
-    line-height: 21px;
     color: pvar(--mainForegroundColor);
     line-height: 30px;
     margin-bottom: 20px;