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 @@

Follows

-

Followers of {{ instanceName }} ({{ followersPagination.totalItems }})

+

Followers of {{ instanceName }} ({{ followersPagination.totalItems }})

{{ instanceName }} does not have followers.
@@ -14,7 +14,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;