Fix preview generation for imports

[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 565012717ec38c873d14f8a015449f5d23f7562f..4738d130554ff514e7d5f9b7ca4ba86e750edd4e 100644 (file)
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -27,6 +27,7 @@
   /* Fallback for non-webkit */
   display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */
   -webkit-line-clamp: $number-of-lines;
+  -webkit-box-orient: vertical;
   /* Fallback for non-webkit */
   font-size: $font-size;
   line-height: $font-size;
@@ -92,9 +93,10 @@
   max-width: $width;
   color: pvar(--inputForegroundColor);
   background-color: pvar(--inputBackgroundColor);
-  border: 1px solid $input-border-color;
+  border: 1px solid pvar(--inputBorderColor);
   border-radius: 3px;
-  font-size: 15px;
+  font-size: $form-input-font-size;
+  line-height: $form-input-line-height;
 
   &::placeholder {
     color: pvar(--inputPlaceholderColor);
@@ -116,7 +118,6 @@
   background-color: pvar(--textareaBackgroundColor) !important;
   height: $height;
   padding: 5px 15px;
-  font-size: 15px;
 }
 
 @mixin orange-button {
@@ -138,7 +139,7 @@
   &.disabled {
     cursor: default;
     color: #fff;
-    background-color: $input-border-color;
+    background-color: pvar(--inputBorderColor);
   }
 
   my-global-icon {
@@ -168,7 +169,7 @@
   &.disabled {
     cursor: default;
     color: pvar(--mainColor);
-    background-color: $input-border-color;
+    background-color: pvar(--inputBorderColor);
   }
 
   my-global-icon {
@@ -249,7 +250,6 @@
 
   border: 0;
   font-weight: $font-semibold;
-  font-size: 15px;
   height: $button-height;
   line-height: $button-height;
 
@@ -259,6 +259,8 @@
   text-align: center;
   cursor: pointer;
 
+  font-size: $button-font-size;
+
   my-global-icon + * {
     @include margin-right(4px);
   }
@@ -283,6 +285,13 @@
   display: inline-block;
 }
 
+@mixin peertube-button-big-link {
+  @include disable-default-a-behaviour;
+  @include peertube-button-big;
+
+  display: inline-block;
+}
+
 @mixin peertube-button-outline {
   @include disable-default-a-behaviour;
   @include peertube-button;
@@ -292,10 +301,6 @@
 }
 
 @mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) {
-  display: inline-flex;
-  align-items: center;
-  line-height: normal !important;
-
   my-global-icon {
     @include margin-right($margin-right);
 
@@ -361,7 +366,6 @@
   color: pvar(--inputForegroundColor);
   background: pvar(--inputBackgroundColor);
   position: relative;
-  font-size: 15px;
   height: min-content;
 
   &.disabled {
@@ -397,12 +401,14 @@
   select {
     padding: 0 35px 0 12px;
     position: relative;
-    border: 1px solid $input-border-color;
+    border: 1px solid pvar(--inputBorderColor);
     background: transparent none;
     appearance: none;
     height: $button-height;
     text-overflow: ellipsis;
     color: pvar(--mainForegroundColor);
+    font-size: $form-input-font-size;
+    line-height: $form-input-line-height;
 
     &:focus {
       outline: none;
@@ -435,6 +441,10 @@
 
 // Thanks: https://codepen.io/manabox/pen/raQmpL
 @mixin peertube-radio-container {
+  label {
+    font-size: $form-input-font-size;
+  }
+
   [type=radio]:checked,
   [type=radio]:not(:checked) {
     position: absolute;
@@ -448,7 +458,6 @@
     cursor: pointer;
     line-height: 20px;
     display: inline-block;
-    font-size: 15px;
     font-weight: $font-regular;
   }
 
@@ -460,7 +469,7 @@
     top: 0;
     width: 18px;
     height: 18px;
-    border: 1px solid $input-border-color;
+    border: 1px solid pvar(--inputBorderColor);
     border-radius: 100%;
     background: #fff;
   }
@@ -507,7 +516,7 @@
     width: 18px;
     min-width: 18px;
     height: 18px;
-    border: $border-width solid $input-border-color;
+    border: $border-width solid pvar(--inputBorderColor);
     border-radius: 3px;
     vertical-align: middle;
     cursor: pointer;
@@ -540,7 +549,6 @@
   + span + span {
     @include margin-left(5px);
 
-    font-size: 15px;
     font-weight: $font-regular;
     cursor: pointer;
     display: inline;
@@ -563,7 +571,6 @@
 
 @mixin actor-counters ($separator-margin: 10px) {
   color: pvar(--greyForegroundColor);
-  font-size: 16px;
   display: flex;
   align-items: center;
 
@@ -585,7 +592,7 @@
   text-transform: uppercase;
   color: pvar(--mainColor);
   font-weight: $font-bold;
-  font-size: 110%;
+  font-size: 1rem;
   margin-bottom: 10px;
 }
 
@@ -602,7 +609,7 @@
   margin-bottom: 20px;
 
   @if $separator {
-    border-bottom: 1px solid $input-border-color;
+    border-bottom: 1px solid pvar(--inputBorderColor);
   }
 
   @media screen and (max-width: $small-view) {
@@ -675,11 +682,10 @@
 @mixin breadcrumb {
   display: flex;
   flex-wrap: wrap;
-  padding: 0.75rem 1rem;
+  padding: 0;
   margin-bottom: 1rem;
   list-style: none;
-  background-color: pvar(--submenuBackgroundColor);
-  border-radius: 0.25rem;
+  font-weight: $font-semibold;
 
   .breadcrumb-item {
     display: flex;