Translated using Weblate (Russian)

[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 79d3506295cdd95cab2aea1a6320605adda7b658..1ce584f9b4d73fcd6d9af96d92391396f6ad5e98 100644 (file)
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -1,18 +1,23 @@
 @use 'sass:math';
 @use '_variables' as *;
 
+@import '_bootstrap-mixins';
+
 @mixin disable-default-a-behaviour {
   &:hover,
   &:focus,
   &:active {
     text-decoration: none !important;
+  }
+
+  &:focus:not(.focus-visible) {
     outline: none !important;
   }
 }
 
 @mixin disable-outline {
   &:focus:not(.focus-visible) {
-    outline: none;
+    outline: none !important;
   }
 }
 
@@ -22,20 +27,6 @@
   text-overflow: ellipsis;
 }
 
-@mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2) {
-  display: block;
-  /* 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;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-height: $font-size * $number-of-lines;
-}
-
 @mixin muted {
   color: pvar(--greyForegroundColor) !important;
 }
@@ -89,18 +80,23 @@
   }
 }
 
-@mixin peertube-input-text($width) {
-  padding: 0 15px;
+@mixin rounded-line-height-1-5 ($font-size) {
+  line-height: $font-size + math.round(math.div($font-size, 2));
+}
+
+@mixin peertube-input-text($width, $font-size: $form-input-font-size) {
+  @include rounded-line-height-1-5($font-size);
+
+  font-size: $font-size;
+
+  padding: 3px 15px;
   display: inline-block;
-  height: $button-height;
   width: $width;
   max-width: $width;
   color: pvar(--inputForegroundColor);
   background-color: pvar(--inputBackgroundColor);
   border: 1px solid pvar(--inputBorderColor);
   border-radius: 3px;
-  font-size: $form-input-font-size;
-  line-height: $form-input-line-height;
 
   &::placeholder {
     color: pvar(--inputPlaceholderColor);
@@ -154,6 +150,7 @@
 @mixin orange-button-inverted {
   @include button-focus(pvar(--mainColorLightest));
 
+  padding: 2px 13px;
   border: 2px solid pvar(--mainColor);
   font-weight: $font-semibold;
 
@@ -250,12 +247,12 @@
 }
 
 @mixin peertube-button {
-  padding: 0 13px;
+  @include rounded-line-height-1-5($button-font-size);
+
+  padding: 4px 13px;
 
   border: 0;
   font-weight: $font-semibold;
-  min-height: $button-height;
-  line-height: $button-height;
 
   // Because of primeng that redefines border-radius of all input[type="..."]
   border-radius: 3px !important;
@@ -267,6 +264,7 @@
 
   my-global-icon + * {
     @include margin-right(4px);
+    @include margin-left(4px);
   }
 }
 
@@ -318,7 +316,6 @@
   position: relative;
   overflow: hidden;
   display: inline-block;
-  min-height: 30px;
 
   input[type=file] {
     position: absolute;
@@ -331,7 +328,7 @@
     filter: alpha(opacity=0);
     opacity: 0;
     outline: none;
-    background: #fff;
+    background: pvar(--mainBackgroundColor);
     cursor: inherit;
     display: block;
   }
@@ -397,22 +394,23 @@
     position: absolute;
     pointer-events: none;
     border: 5px solid rgba(0, 0, 0, 0);
-    border-top-color: #000;
+    border-top-color: pvar(--mainForegroundColor);
     margin-top: -2px;
     z-index: 100;
   }
 
   select {
-    padding: 0 35px 0 12px;
+    @include rounded-line-height-1-5($form-input-font-size);
+
+    font-size: $form-input-font-size;
+
+    padding: 3px 35px 3px 12px;
     position: relative;
     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;
@@ -439,6 +437,9 @@
       font-weight: $font-semibold;
       color: pvar(--greyForegroundColor);
       border: 0;
+
+      // No border, add +1 to vertical padding
+      padding: 4px 35px 4px 12px;
     }
   }
 }
@@ -646,7 +647,7 @@
 }
 
 @mixin progressbar($small: false) {
-  background-color: $grey-background-color;
+  background-color: pvar(--greyBackgroundColor);
   display: flex;
   height: 1rem;
   overflow: hidden;
@@ -656,7 +657,7 @@
 
   span {
     position: absolute;
-    color: $grey-foreground-color;
+    color: pvar(--greyForegroundColor);
 
     @if $small {
       top: -1px;
@@ -920,58 +921,81 @@
   }
 }
 
-@mixin margin ($block-start, $inline-end, $block-end, $inline-start) {
-  @include margin-left($inline-start);
-  @include margin-right($inline-end);
-
-  margin-top: $block-start;
-  margin-bottom: $block-end;
+@mixin margin ($arg1: null, $arg2: null, $arg3: null, $arg4: null) {
+  @if $arg2 == null and $arg3 == null and $arg4 == null {
+    @include margin-original($arg1, $arg1, $arg1, $arg1);
+  } @else if $arg3 == null and $arg4 == null {
+    @include margin-original($arg1, $arg2, $arg1, $arg2);
+  } @else if $arg4 == null {
+    @include margin-original($arg1, $arg2, $arg3, $arg2);
+  } @else {
+    @include margin-original($arg1, $arg2, $arg3, $arg4);
+  }
 }
 
-@mixin padding ($block-start, $inline-end, $block-end, $inline-start) {
-  @include padding-left($inline-start);
-  @include padding-right($inline-end);
-
-  padding-top: $block-start;
-  padding-bottom: $block-end;
+@mixin margin-original ($block-start, $inline-end, $block-end, $inline-start) {
+  @include margin-left($inline-start);
+  @include margin-right($inline-end);
+  @include margin-top($block-start);
+  @include margin-bottom($block-end);
 }
 
 @mixin margin-left ($value) {
   @supports (margin-inline-start: $value) {
-    margin-inline-start: $value;
+    @include rfs($value, margin-inline-start);
   }
 
   @supports not (margin-inline-start: $value) {
-    margin-left: $value;
+    @include rfs($value, margin-left);
   }
 }
 
 @mixin margin-right ($value) {
   @supports (margin-inline-end: $value) {
-    margin-inline-end: $value;
+    @include rfs($value, margin-inline-end);
   }
 
   @supports not (margin-inline-end: $value) {
-    margin-right: $value;
+    @include rfs($value, margin-right);
+  }
+}
+
+@mixin padding-original ($block-start, $inline-end, $block-end, $inline-start) {
+  @include padding-left($inline-start);
+  @include padding-right($inline-end);
+  @include padding-top($block-start);
+  @include padding-bottom($block-end);
+}
+
+
+@mixin padding ($arg1: null, $arg2: null, $arg3: null, $arg4: null) {
+  @if $arg2 == null and $arg3 == null and $arg4 == null {
+    @include padding-original($arg1, $arg1, $arg1, $arg1);
+  } @else if $arg3 == null and $arg4 == null {
+    @include padding-original($arg1, $arg2, $arg1, $arg2);
+  } @else if $arg4 == null {
+    @include padding-original($arg1, $arg2, $arg3, $arg2);
+  } @else {
+    @include padding-original($arg1, $arg2, $arg3, $arg4);
   }
 }
 
 @mixin padding-left ($value) {
   @supports (padding-inline-start: $value) {
-    padding-inline-start: $value;
+    @include rfs($value, padding-inline-start);
   }
 
   @supports not (padding-inline-start: $value) {
-    padding-left: $value;
+    @include rfs($value, padding-left);
   }
 }
 
 @mixin padding-right ($value) {
   @supports (padding-inline-end: $value) {
-    padding-inline-end: $value;
+    @include rfs($value, padding-inline-end);
   }
 
   @supports not (padding-inline-end: $value) {
-    padding-right: $value;
+    @include rfs($value, padding-right);
   }
 }