diff --git a/client/src/app/+about/about-follows/about-follows.component.html b/client/src/app/+about/about-follows/about-follows.component.html
index 84626809d..fd4109416 100644
--- a/client/src/app/+about/about-follows/about-follows.component.html
+++ b/client/src/app/+about/about-follows/about-follows.component.html
@@ -2,7 +2,7 @@
-
Subscriptions of {{ instanceName }} ({{ followingsPagination.totalItems }})
+
Subscriptions of {{ instanceName }} ({{ followingsPagination.totalItems }})
{{ instanceName }} does not have subscriptions.
diff --git a/client/src/app/+about/about-peertube/about-peertube.component.scss b/client/src/app/+about/about-peertube/about-peertube.component.scss
index 001405dc7..a81bb8cfc 100644
--- a/client/src/app/+about/about-peertube/about-peertube.component.scss
+++ b/client/src/app/+about/about-peertube/about-peertube.component.scss
@@ -7,7 +7,7 @@
}
.card {
- @include rfs(2rem, margin);
+ @include margin(2rem);
flex-basis: 300px;
}
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
index 2e34ed71c..b5aacffc8 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
@@ -8,8 +8,8 @@
}
.channel {
- @include rfs(2rem, padding);
- @include rfs(2rem 0, margin);
+ @include padding(1.75rem);
+ @include margin(2rem, 0);
max-width: $max-channels-width;
background-color: pvar(--channelBackgroundColor);
@@ -110,10 +110,6 @@ my-subscribe-button {
}
@include on-small-main-col {
- .channel {
- padding: 15px;
- }
-
.channel-avatar-row {
grid-template-columns: auto auto auto 1fr;
diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index 116b26a4d..2a4985964 100644
--- a/client/src/app/+accounts/accounts.component.html
+++ b/client/src/app/+accounts/accounts.component.html
@@ -13,7 +13,7 @@
{{ account.displayName }}
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
index 908e4eeda..56b952b65 100644
--- a/client/src/app/+accounts/accounts.component.scss
+++ b/client/src/app/+accounts/accounts.component.scss
@@ -109,8 +109,8 @@
@media screen and (max-width: $mobile-view) {
.root {
- --myFontSize: $font-size-rem-14px;
- --myGreyFontSize: $font-size-rem-13px;
+ --myFontSize: 14px;
+ --myGreyFontSize: 13px;
}
.links {
diff --git a/client/src/app/+home/home.component.ts b/client/src/app/+home/home.component.ts
index 8da4a2008..e59cde989 100644
--- a/client/src/app/+home/home.component.ts
+++ b/client/src/app/+home/home.component.ts
@@ -2,7 +2,7 @@ import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'
import { CustomPageService } from '@app/shared/shared-main/custom-page'
@Component({
- templateUrl: './home.component.html',
+ templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {
diff --git a/client/src/app/+login/login.component.scss b/client/src/app/+login/login.component.scss
index f981cd3d3..c588c425a 100644
--- a/client/src/app/+login/login.component.scss
+++ b/client/src/app/+login/login.component.scss
@@ -2,7 +2,7 @@
@use '_mixins' as *;
label {
- @include font-size(1.125rem);
+ @include font-size(18px);
display: block;
margin-bottom: 5px;
@@ -30,7 +30,7 @@ input[type=email] {
}
.alert {
- @include margin(0, auto, 2rem, auto);
+ @include margin(0, auto, 2rem);
}
.login-form-and-externals {
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index 945d9a13d..c8b182196 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -264,10 +264,6 @@
width: min-content;
}
- .show-more {
- margin-bottom: 30px;
- }
-
.bottom-owner {
padding: 15px;
margin-bottom: 30px;
diff --git a/client/src/sass/class-helpers/_custom-bootstrap-helpers.scss b/client/src/sass/class-helpers/_custom-bootstrap-helpers.scss
index bb5902ec9..dfe6f9050 100644
--- a/client/src/sass/class-helpers/_custom-bootstrap-helpers.scss
+++ b/client/src/sass/class-helpers/_custom-bootstrap-helpers.scss
@@ -4,5 +4,5 @@
// Font sizes
.fs-5-5 {
- @include font-size(1.125rem);
+ @include font-size(18px);
}
diff --git a/client/src/sass/include/_account-channel-page.scss b/client/src/sass/include/_account-channel-page.scss
index ab6c772c1..c47acb7b7 100644
--- a/client/src/sass/include/_account-channel-page.scss
+++ b/client/src/sass/include/_account-channel-page.scss
@@ -16,7 +16,7 @@
}
@mixin show-more-description {
- @include rfs(10px auto 45px, margin);
+ @include margin(10px, auto, 45px);
color: pvar(--mainColor);
cursor: pointer;
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index bd467a0ed..3941cf374 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -919,20 +919,25 @@
}
}
-@mixin margin ($block-start, $inline-end, $block-end, $inline-start) {
+@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 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 padding ($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 margin-left ($value) {
@supports (margin-inline-start: $value) {
@include rfs($value, margin-inline-start);
@@ -953,6 +958,26 @@
}
}
+@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) {
@include rfs($value, padding-inline-start);
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 1243854ec..8358270da 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -10,9 +10,6 @@ $font-semibold: 600;
$font-bold: 700;
$line-height-normal: 1.2;
-$font-size-rem-13px: 0.8125rem;
-$font-size-rem-14px: 0.875rem;
-
$grey-background-color: #E5E5E5;
$grey-background-hover-color: #EFEFEF;
$grey-foreground-color: #585858;