Increase global font size

author: Chocobozzz <me@florianbigard.com> 2022-06-15 14:59:25 +0200
committer: Chocobozzz <me@florianbigard.com> 2022-06-16 11:37:08 +0200
commit: 5b0ec7cddb1ae6dbd2057f067382866f846b882c (patch)
tree: 5751d96ec4ab0d49b793c4ff1c8edbc8daeab6ac /client/src
parent: b13a0a48bacb53e65e665774e621326452045294 (diff)
download: PeerTube-5b0ec7cddb1ae6dbd2057f067382866f846b882c.tar.gz
PeerTube-5b0ec7cddb1ae6dbd2057f067382866f846b882c.tar.zst
PeerTube-5b0ec7cddb1ae6dbd2057f067382866f846b882c.zip
106 files changed, 303 insertions, 547 deletions
diff --git a/client/src/app/+about/about-instance/about-instance.component.scss b/client/src/app/+about/about-instance/about-instance.component.scss
index a48783639..c01e690d1 100644
--- a/client/src/app/+about/about-instance/about-instance.component.scss
+++ b/client/src/app/+about/about-instance/about-instance.component.scss
@@ -20,7 +20,6 @@
 .instance-badges {
  margin-bottom: 20px;
-  font-size: 16px;
  .pt-badge {
    @include margin-right(5px);
@@ -29,10 +28,10 @@
 .section-title {
  font-weight: $font-semibold;
-  font-size: 16px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
+  font-size: 1rem;
 }
 .middle-title {
@@ -44,7 +43,6 @@
 .block {
  margin-bottom: 75px;
-  font-size: 15px;
 }
 .short-description {
diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.scss b/client/src/app/+about/about-instance/contact-admin-modal.component.scss
index e143a9dc6..6db6f13b3 100644
--- a/client/src/app/+about/about-instance/contact-admin-modal.component.scss
+++ b/client/src/app/+about/about-instance/contact-admin-modal.component.scss
@@ -2,7 +2,6 @@
 @use '_mixins' as *;
 .modal-subtitle {
-  font-size: 16px;
  line-height: 1rem;
  margin-bottom: 0;
 }
diff --git a/client/src/app/+about/about-peertube/about-peertube.component.html b/client/src/app/+about/about-peertube/about-peertube.component.html
index 62689e3ae..f8700d9b6 100644
--- a/client/src/app/+about/about-peertube/about-peertube.component.html
+++ b/client/src/app/+about/about-peertube/about-peertube.component.html
@@ -11,12 +11,12 @@
    </p>
    <p i18n>
-      It is free and open-source software, under <a href="https://github.com/Chocobozzz/PeerTube/blob/develop/LICENSE">AGPLv3
+      It is free and open-source software, under <a class="link-orange" href="https://github.com/Chocobozzz/PeerTube/blob/develop/LICENSE">AGPLv3
      licence</a>.
    </p>
    <p i18n>
-      For more information, please visit <a target="_blank" rel="noopener noreferrer" href="https://joinpeertube.org">joinpeertube.org</a>.
+      For more information, please visit <a class="link-orange" target="_blank" rel="noopener noreferrer" href="https://joinpeertube.org">joinpeertube.org</a>.
    </p>
  </div>
@@ -25,9 +25,8 @@
    <div class="card">
      <div class="card-body">
        <div class="card-title">
-          <a i18n target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/use-setup-account">Use PeerTube
+          <a i18n class="link-orange" target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/use-setup-account">Use PeerTube documentation</a>
-            documentation</a>
+        </div>
-          </div>
        <div i18n class="card-text">
          Discover how to setup your account, what is a channel, how to create a playlist and more!
@@ -38,9 +37,8 @@
    <div class="card">
      <div class="card-body">
        <div class="card-title">
-          <a i18n target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/use-third-party-application">PeerTube
+          <a i18n class="link-orange" target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/use-third-party-application">PeerTube Applications</a>
-            Applications</a>
+        </div>
-          </div>
        <div i18n class="card-text">
          Discover unofficial Android applications or browser addons!
@@ -51,9 +49,8 @@
    <div class="card">
      <div class="card-body">
        <div class="card-title">
-          <a i18n target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/contribute-getting-started">Contribute on
+          <a i18n class="link-orange" target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/contribute-getting-started">Contribute on PeerTube</a>
-            PeerTube</a>
+        </div>
-          </div>
        <div i18n class="card-text">
          Want to help to improve PeerTube? You can translate the web interface, give your feedback or directly contribute to the code!
@@ -116,7 +113,7 @@
          Web peers are not publicly accessible: because we use the websocket transport, the protocol is different from classic BitTorrent tracker.
          When you are in a web browser, you send a signal containing your IP address to the tracker that will randomly choose other peers
          to forward the information to.
-          See <a href="https://github.com/yciabaud/webtorrent/blob/beps/bep_webrtc.rst">this document</a> for more information
+          See <a class="link-orange" href="https://github.com/yciabaud/webtorrent/blob/beps/bep_webrtc.rst">this document</a> for more information
        </li>
      </ul>
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 2a5ec08f5..a0d227a28 100644
--- a/client/src/app/+about/about-peertube/about-peertube.component.scss
+++ b/client/src/app/+about/about-peertube/about-peertube.component.scss
@@ -37,18 +37,6 @@
  .card {
    margin: 30px;
    flex-basis: 300px;
-    font-size: 15px;
-  }
-}
-.description,
-.p2p-privacy,
-my-about-peertube-contributors {
-  ::ng-deep {
-    p,
-    li {
-      font-size: 15px;
-    }
  }
 }
@@ -70,7 +58,9 @@ my-about-peertube-contributors {
 }
 .card-title {
-  font-size: 1.25rem;
+  font-size: 1.1rem;
+  text-align: center;
+  margin-bottom: 1rem;
 }
 .p2p-privacy-title {
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 30b8098be..832ddf973 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
@@ -65,7 +65,6 @@
    grid-row: 2;
    max-height: 80px;
-    font-size: 16px;
  }
 }
@@ -105,7 +104,6 @@ my-subscribe-button {
  a {
    color: pvar(--mainColor);
-    font-size: 16px;
    font-weight: $font-semibold;
  }
 }
@@ -126,10 +124,6 @@ my-subscribe-button {
      grid-row: 1 / 4;
    }
-    h2 {
-      font-size: 16px;
-    }
    .actor-counters {
      margin: 0;
      font-size: 13px;
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
index d0d66d631..c62ea7700 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
@@ -3,7 +3,7 @@
    <div class="col-12 col-lg-4 col-xl-3">
      <div i18n class="inner-form-title">APPEARANCE</div>
      <div i18n class="inner-form-description">
-        Use <a routerLink="/admin/plugins">plugins & themes</a> for more involved changes, or <a routerLink="/admin/config/edit-custom" fragment="advanced-configuration">add slight customizations</a>.
+        Use <a class="link-orange" routerLink="/admin/plugins">plugins & themes</a> for more involved changes, or add slight <a class="link-orange" routerLink="/admin/config/edit-custom" fragment="advanced-configuration">customizations</a>.
      </div>
    </div>
@@ -91,7 +91,7 @@
  <div class="row mt-4"> <!-- broadcast grid -->
    <div class="col-12 col-lg-4 col-xl-3">
      <div i18n class="inner-form-title">BROADCAST MESSAGE</div>
-      <div i18n class="inner-for-description">
+      <div i18n class="inner-form-description">
        Display a message on your instance
      </div>
    </div>
@@ -147,8 +147,8 @@
  <div class="row mt-4"> <!-- new users grid -->
    <div class="col-12 col-lg-4 col-xl-3">
      <div i18n class="inner-form-title">NEW USERS</div>
-      <div i18n class="inner-for-description">
+      <div i18n class="inner-form-description">
-        Manage <a routerLink="/admin/users">users</a> to set their quota individually.
+        Manage <a class="link-orange" routerLink="/admin/users">users</a> to set their quota individually.
      </div>
    </div>
@@ -185,7 +185,7 @@
                <div *ngIf="formErrors.signup.limit" class="form-error">{{ formErrors.signup.limit }}</div>
-                <small i18n *ngIf="hasUnlimitedSignup()" class="muted">Signup won't be limited to a fixed number of users.</small>
+                <small i18n *ngIf="hasUnlimitedSignup()" class="muted small">Signup won't be limited to a fixed number of users.</small>
              </div>
              <div [ngClass]="getDisabledSignupClass()" class="mt-3">
@@ -252,7 +252,7 @@
          <div class="form-group">
            <label i18n for="importConcurrency">Import jobs concurrency</label>
-            <span i18n class="muted ms-1">allows to import multiple videos in parallel. ⚠️ Requires a PeerTube restart.</span>
+            <span i18n class="small muted ms-1">allows to import multiple videos in parallel. ⚠️ Requires a PeerTube restart.</span>
            <div class="number-with-unit">
              <input type="number" name="importConcurrency" formControlName="concurrency" />
@@ -268,7 +268,7 @@
              i18n-labelText labelText="Allow import with HTTP URL (e.g. YouTube)"
            >
            <ng-container ngProjectAs="description">
-              <span i18n>⚠️ If enabled, we recommend to use <a href="https://docs.joinpeertube.org/maintain-configuration?id=security">a HTTP proxy</a> to prevent private URL access from your PeerTube server</span>
+              <span i18n>⚠️ If enabled, we recommend to use <a class="link-orange" href="https://docs.joinpeertube.org/maintain-configuration?id=security">a HTTP proxy</a> to prevent private URL access from your PeerTube server</span>
            </ng-container>
          </my-peertube-checkbox>
          </div>
@@ -372,11 +372,11 @@
              i18n-labelText labelText="Enable global search"
            >
              <ng-container ngProjectAs="description">
-                <p i18n>⚠️ This functionality depends heavily on the moderation of instances followed by the search index you select.</p>
+                <div i18n>⚠️ This functionality depends heavily on the moderation of instances followed by the search index you select.</div>
-                <span i18n>
+                <div i18n>
-                  You should only use moderated search indexes in production, or <a href="https://framagit.org/framasoft/peertube/search-index">host your own</a>.
+                  You should only use moderated search indexes in production, or <a class="link-orange" href="https://framagit.org/framasoft/peertube/search-index">host your own</a>.
-                </span>
+                </div>
              </ng-container>
              <ng-container ngProjectAs="extra">
@@ -424,7 +424,7 @@
    <div class="col-12 col-lg-4 col-xl-3">
      <div i18n class="inner-form-title">FEDERATION</div>
      <div i18n class="inner-form-description">
-        Manage <a routerLink="/admin/follows">relations</a> with other instances.
+        Manage <a class="link-orange" routerLink="/admin/follows">relations</a> with other instances.
      </div>
    </div>
@@ -472,10 +472,10 @@
                i18n-labelText labelText="Automatically follow instances of a public index"
              >
                <ng-container ngProjectAs="description">
-                  <p i18n>⚠️ This functionality requires a lot of attention and extra moderation.</p>
+                  <div i18n>⚠️ This functionality requires a lot of attention and extra moderation.</div>
                  <span i18n>
-                    See <a href="https://docs.joinpeertube.org/admin-following-instances?id=automatically-follow-other-instances" rel="noopener noreferrer" target="_blank">the documentation</a> for more information about the expected URL
+                    See <a class="link-orange" href="https://docs.joinpeertube.org/admin-following-instances?id=automatically-follow-other-instances" rel="noopener noreferrer" target="_blank">the documentation</a> for more information about the expected URL
                  </span>
                </ng-container>
@@ -563,7 +563,7 @@
                  If your instance is explicitly allowed by Twitter, a video player will be embedded in the Twitter feed on PeerTube video share.<br />
                  If the instance is not, we use an image link card that will redirect to your PeerTube instance.<br /><br />
                  Check this checkbox, save the configuration and test with a video URL of your instance (https://example.com/w/blabla) on
-                  <a target='_blank' rel='noopener noreferrer' href='https://cards-dev.twitter.com/validator'>https://cards-dev.twitter.com/validator</a>
+                  <a class="link-orange" target='_blank' rel='noopener noreferrer' href='https://cards-dev.twitter.com/validator'>https://cards-dev.twitter.com/validator</a>
                  to see if you instance is allowed.
                </ng-container>
              </ng-template>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
index 31dd9f54f..f3bce8ee0 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
@@ -3,11 +3,6 @@
 $form-base-input-width: 340px;
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
 form {
  padding-bottom: 1.5rem;
 }
@@ -30,7 +25,7 @@ input[type=number] {
  input[type=number] + span {
    position: absolute;
-    top: 5px;
+    top: 0.2em;
    right: 2.5rem;
  }
@@ -74,6 +69,10 @@ input[type=submit] {
  @include settings-big-title;
 }
+.inner-form-description {
+  font-size: 15px;
+}
 textarea {
  @include peertube-textarea(500px, 150px);
@@ -88,6 +87,7 @@ textarea {
 .label-small-info {
  font-style: italic;
  margin-bottom: 10px;
+  font-size: 14px;
 }
 .disabled-checkbox-extra {
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
index 1c567d962..5931cb459 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
@@ -79,8 +79,8 @@
    <div class="row mt-4"> <!-- moderation & nsfw grid -->
      <div class="col-12 col-lg-4 col-xl-3">
        <div i18n class="inner-form-title">MODERATION & NSFW</div>
-        <div i18row="inner-for-description">
+        <div i18row="inner-form-description">
-          Manage <a routerLink="/admin/users">users</a> to build a moderation team.
+          Manage <a class="link-orange" routerLink="/admin/users">users</a> to build a moderation team.
        </div>
      </div>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html
index a970f3df3..ae79e54fc 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html
@@ -46,9 +46,9 @@
              </div>
              <div class="form-group" [ngClass]="getDisabledLiveClass()">
-                <label i18n for="liveMaxInstanceLives">
+                <label i18n for="liveMaxInstanceLives">Max simultaneous lives created on your instance</label>
-                  Max simultaneous lives created on your instance <span class="muted">(-1 for "unlimited")</span>
-                </label>
+                <span class="ms-2 small muted">(-1 for "unlimited")</span>
                <div class="number-with-unit">
                  <input type="number" name="liveMaxInstanceLives" formControlName="maxInstanceLives" />
@@ -59,9 +59,8 @@
              </div>
              <div class="form-group" [ngClass]="getDisabledLiveClass()">
-                <label i18n for="liveMaxUserLives">
+                <label i18n for="liveMaxUserLives">Max simultaneous lives created per user</label>
-                  Max simultaneous lives created per user <span class="muted">(-1 for "unlimited")</span>
+                <span class="ms-2 small muted">(-1 for "unlimited")</span>
-                </label>
                <div class="number-with-unit">
                  <input type="number" name="liveMaxUserLives" formControlName="maxUserLives" />
@@ -136,7 +135,7 @@
          <div class="form-group" [ngClass]="getDisabledLiveTranscodingClass()">
            <label i18n for="liveTranscodingThreads">Live transcoding threads</label>
-            <span class="muted ms-1">
+            <span class="small muted ms-1">
              <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>
                will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with VOD transcoding
              </ng-container>
@@ -157,7 +156,7 @@
          <div class="form-group mt-4" [ngClass]="getDisabledLiveTranscodingClass()">
            <label i18n for="liveTranscodingProfile">Live transcoding profile</label>
-            <span class="muted ms-1" i18n>new live transcoding profiles can be added by PeerTube plugins</span>
+            <span class="small muted ms-1" i18n>new live transcoding profiles can be added by PeerTube plugins</span>
            <my-select-options
              id="liveTranscodingProfile"
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
index 2a965ac97..66e421b16 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
@@ -8,15 +8,10 @@
        <span i18n>
          Estimating a server's capacity to transcode and stream videos isn't easy and we can't tune PeerTube automatically.
        </span>
        <span i18n>
-          However, you may want to read our guidelines before tweaking the following values.
+          However, you may want to read <a class="link-orange" target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/admin-configuration?id=transcoding">our guidelines</a> before tweaking the following values.
        </span>
-        <div class="callout-container">
-          <a class="callout-link" target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/admin-configuration?id=transcoding" i18n>
-            Read guidelines
-          </a>
-        </div>
      </div>
    </div>
  </div>
@@ -115,7 +110,11 @@
                <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
                  <label i18n>Resolutions to generate per enabled format</label>
-                  <div class="ms-2 mt-2 d-flex flex-column">
+                  <div class="ms-2 d-flex flex-column">
+                    <span class="mb-3 small muted" i18n>
+                      The original file resolution will be the default target if no option is selected.
+                    </span>
                    <ng-container formGroupName="resolutions">
                      <div class="form-group" *ngFor="let resolution of resolutions">
                        <my-peertube-checkbox
@@ -127,10 +126,6 @@
                          </ng-template>
                        </my-peertube-checkbox>
                      </div>
-                      <span class="mb-2 muted" i18n>
-                        The original file resolution will be the default target if no option is selected.
-                      </span>
                    </ng-container>
                  </div>
                </div>
@@ -142,7 +137,8 @@
        <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()">
          <label i18n for="transcodingThreads">Transcoding threads</label>
-          <span class="muted ms-1">
+          <span class="small muted ms-1">
            <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>
              will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with live transcoding
            </ng-container>
@@ -164,7 +160,7 @@
        <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
          <label i18n for="transcodingConcurrency">Transcoding jobs concurrency</label>
-          <span class="muted ms-1" i18n>allows to transcode multiple files in parallel. ⚠️ Requires a PeerTube restart</span>
+          <span class="small muted ms-1" i18n>allows to transcode multiple files in parallel. ⚠️ Requires a PeerTube restart</span>
          <div class="number-with-unit">
            <input type="number" name="transcodingConcurrency" formControlName="concurrency" />
@@ -176,7 +172,7 @@
        <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
          <label i18n for="transcodingProfile">Transcoding profile</label>
-          <span class="muted ms-1" i18n>new transcoding profiles can be added by PeerTube plugins</span>
+          <span class="small muted ms-1" i18n>new transcoding profiles can be added by PeerTube plugins</span>
          <my-select-options
            id="transcodingProfile"
diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.html b/client/src/app/+admin/follows/followers-list/followers-list.component.html
index a7d95e4a4..5367bf517 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.html
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.html
@@ -59,7 +59,7 @@
  <ng-template pTemplate="emptymessage">
    <tr>
-      <td colspan="6">
+      <td colspan="5">
        <div class="no-results">
          <ng-container *ngIf="search" i18n>No follower found matching current filters.</ng-container>
          <ng-container *ngIf="!search" i18n>Your instance doesn't have any follower.</ng-container>
diff --git a/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss b/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss
index f9f4474a2..254286ae3 100644
--- a/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss
+++ b/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss
@@ -4,11 +4,6 @@
 $form-base-input-width: 340px;
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
 .account-title {
  @include settings-big-title;
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss
index 55baa038f..d7b41f4d8 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss
@@ -17,8 +17,6 @@
  input {
    @include peertube-input-text(500px);
-    height: 35px;
  }
 }
diff --git a/client/src/app/+admin/plugins/shared/plugin-card.component.scss b/client/src/app/+admin/plugins/shared/plugin-card.component.scss
index 608064722..9f05f9db6 100644
--- a/client/src/app/+admin/plugins/shared/plugin-card.component.scss
+++ b/client/src/app/+admin/plugins/shared/plugin-card.component.scss
@@ -14,7 +14,6 @@
  .plugin-name {
    @include margin-right(10px);
-    font-size: 16px;
    font-weight: $font-semibold;
  }
diff --git a/client/src/app/+admin/system/debug/debug.component.scss b/client/src/app/+admin/system/debug/debug.component.scss
index 7f5e861e2..bcbc3fc7c 100644
--- a/client/src/app/+admin/system/debug/debug.component.scss
+++ b/client/src/app/+admin/system/debug/debug.component.scss
@@ -1,11 +1,7 @@
 @use '_variables' as *;
 @use '_mixins' as *;
-.root {
+code {
-  font-size: 15px;
+  font-size: 14px;
+  font-weight: $font-semibold;
-  code {
-    font-size: 14px;
-    font-weight: $font-semibold;
-  }
 }
diff --git a/client/src/app/+login/login.component.scss b/client/src/app/+login/login.component.scss
index f46cbf2bc..79a2081fe 100644
--- a/client/src/app/+login/login.component.scss
+++ b/client/src/app/+login/login.component.scss
@@ -66,7 +66,6 @@ input[type=email] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
-  font-size: 15px;
  max-width: 450px;
  margin-bottom: 40px;
diff --git a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
index 61b89082c..f71f73fec 100644
--- a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
+++ b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
@@ -10,7 +10,7 @@
      </div>
      <div class="col-12 col-lg-8 col-xl-9">
-        <h6 i18n>Banner image of the channel</h6>
+        <label i18n>Banner image of the channel</label>
        <my-actor-banner-edit
          *ngIf="videoChannel" [previewImage]="isCreation()"
diff --git a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss
index 2c720314a..008397a7a 100644
--- a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss
+++ b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss
@@ -5,11 +5,6 @@
  padding-top: 20px;
 }
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
 .video-channel-title {
  @include settings-big-title;
 }
diff --git a/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss b/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss
index 2a3b85c22..b3fedd2f6 100644
--- a/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss
+++ b/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss
@@ -1,11 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
 .applications-title {
  @include settings-big-title;
 }
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
index b0ac45e30..d412e568f 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
@@ -3,7 +3,6 @@
 .header {
  display: flex;
-  font-size: 15px;
  margin-bottom: 20px;
  a {
@@ -23,11 +22,6 @@
  }
 }
-my-user-notifications {
-  font-size: 15px;
-}
 @media screen and (max-width: $mobile-view) {
  .header {
    flex-direction: column;
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
index b0a9dbb38..c9f9d8f55 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
@@ -1,18 +1,20 @@
 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
 <div *ngIf="success" class="alert alert-success">{{ success }}</div>
-<div i18n class="current-email">
-  Your current email is <span class="email">{{ user.email }}</span>.
-  It is never shown to the public.
-</div>
 <div i18n class="pending-email" *ngIf="user.pendingEmail">
-  <span class="email">{{ user.pendingEmail }}</span> is awaiting email verification
+  <strong>{{ user.pendingEmail }}</strong> is awaiting email verification
 </div>
 <form role="form" class="change-email" (ngSubmit)="changeEmail()" [formGroup]="form" *ngIf="user.pluginAuth === null">
  <div class="form-group">
+    <label i18n for="new-email">Change your email</label>
+    <div i18n class="form-group-description">
+      Your current email is <strong>{{ user.email }}</strong>.
+      It is never shown to the public.
+    </div>
    <input
      type="email" id="new-email" i18n-placeholder placeholder="New email" class="form-control"
      formControlName="new-email" [ngClass]="{ 'input-error': formErrors['new-email'] }"
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
index 9be9056b8..8d1804a93 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
@@ -1,18 +1,17 @@
 @use '_variables' as *;
 @use '_mixins' as *;
-label {
+form {
-  font-weight: $font-regular;
+  max-width: 340px;
-  font-size: 100%;
 }
 my-input-text {
-  width: 340px;
  display: block;
+  width: 100%;
 }
 input[type=email] {
-  @include peertube-input-text(340px);
+  @include peertube-input-text(100%);
  display: block;
 }
@@ -22,15 +21,6 @@ input[type=submit] {
  @include orange-button;
 }
-.current-email,
 .pending-email {
  margin-bottom: 15px;
-  .email {
-    font-weight: $font-semibold;
-  }
-}
-.form-group {
-  width: max-content;
 }
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
index ab6a43b57..a29f04c36 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
@@ -1,14 +1,13 @@
 @use '_variables' as *;
 @use '_mixins' as *;
-label {
+form {
-  font-weight: $font-regular;
+  max-width: 340px;
-  font-size: 100%;
 }
 my-input-text {
-  width: 340px;
  display: block;
+  width: 100%;
 }
 my-input-text + my-input-text {
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html
index c3cfe0314..46f5e5d6b 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html
@@ -1,13 +1,13 @@
 <div *ngIf="webNotifications">
  <ng-container *ngFor="let group of notificationSettingGroups">
-    <div class="header custom-row">
+    <div class="header notification-row">
      <div i18n>{{ group.label }}</div>
      <div i18n>Web</div>
      <div i18n *ngIf="emailEnabled">Email</div>
    </div>
    <ng-container *ngFor="let notificationType of group.keys">
-      <div class="custom-row" *ngIf="hasUserRight(notificationType)">
+      <div class="small notification-row" *ngIf="hasUserRight(notificationType)">
        <div>{{ labelNotifications[notificationType] }}</div>
        <div>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
index 2fe1f9536..8181c3175 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
@@ -1,13 +1,12 @@
 @use '_variables' as *;
 @use '_mixins' as *;
-.custom-row {
+.notification-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid $separator-border-color;
  &.header {
-    font-size: 16px;
    font-weight: $font-semibold;
    margin-top: 10px;
  }
diff --git a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
index ae5f25cff..2b192ab6d 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
@@ -8,7 +8,7 @@
      type="text" id="username" class="form-control"
      formControlName="username" readonly
    >
-    <div class="muted" i18n>
+    <div class="form-group-description" i18n>
      People can find you using @{{ user.username }}@{{ instanceHost }}
    </div>
  </div>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
index 78f7ef1d5..23e701332 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
@@ -1,11 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
 input#username + .muted {
  margin-top: 5px;
 }
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
index abcfe54a6..d9e833019 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
@@ -14,7 +14,6 @@
  </div>
  <div class="col-12 col-lg-8 col-xl-9">
    <my-user-quota [user]="user" [userInformationLoaded]="userInformationLoaded"></my-user-quota>
    <my-account-profile [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-profile>
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
index aa51764be..f39f90803 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
@@ -34,9 +34,11 @@
        {videoChannel.followersCount, plural, =0 {No subscribers} =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}
      </a>
-      <div i18n class="video-channel-videos">{videoChannel.videosCount, plural, =0 {No videos} =1 {1 video} other {{{ videoChannel.videosCount }} videos}}</div>
+      <div class="d-flex">
+        <span i18n>{videoChannel.videosCount, plural, =0 {No videos} =1 {1 video} other {{{ videoChannel.videosCount }} videos}}</span>
-      <div i18n class="video-channel-views">{videoChannel.totalViews, plural, =0 {No views} =1 {1 view} other {{{ videoChannel.totalViews }} views}}</div>
+        <span class="mx-1">·</span>
+        <span i18n>{videoChannel.totalViews, plural, =0 {No views} =1 {1 view} other {{{ videoChannel.totalViews | myNumberFormatter }} views}}</span>
+      </div>
      <div class="video-channel-buttons">
        <my-edit-button label [routerLink]="[ '/manage/update', videoChannel.nameWithHost ]"></my-edit-button>
diff --git a/client/src/app/+my-library/my-follows/my-followers.component.html b/client/src/app/+my-library/my-follows/my-followers.component.html
index 6f4d1a9b7..ef2ab7aca 100644
--- a/client/src/app/+my-library/my-follows/my-followers.component.html
+++ b/client/src/app/+my-library/my-follows/my-followers.component.html
@@ -22,7 +22,7 @@
        <my-global-icon iconName="external-link"></my-global-icon>
      </a>
-      <div class="muted">
+      <div class="small muted">
        <ng-container *ngIf="isFollowingAccount(follow)" i18n>Is following all your channels</ng-container>
        <ng-container *ngIf="!isFollowingAccount(follow)" i18n>Is following your channel {{ follow.following.name }}</ng-container>
      </div>
diff --git a/client/src/app/+my-library/my-follows/my-followers.component.scss b/client/src/app/+my-library/my-follows/my-followers.component.scss
index d8c5f9cff..2caa4cc48 100644
--- a/client/src/app/+my-library/my-follows/my-followers.component.scss
+++ b/client/src/app/+my-library/my-follows/my-followers.component.scss
@@ -13,8 +13,4 @@ input[type=text] {
 .actor {
  @include actor-row($min-height: auto, $separator: true);
-  .actor-display-name {
-    font-size: 16px;
-  }
 }
diff --git a/client/src/app/+my-library/my-history/my-history.component.html b/client/src/app/+my-library/my-history/my-history.component.html
index 76367c029..6791dab52 100644
--- a/client/src/app/+my-library/my-history/my-history.component.html
+++ b/client/src/app/+my-library/my-history/my-history.component.html
@@ -27,7 +27,7 @@
  [titlePage]="titlePage"
  [getVideosObservableFunction]="getVideosObservableFunction"
  [user]="user"
-  i18n-noResultMessage noResultMessage="You don't have any video in your watch history yet."
+  [noResultMessage]="getNoResultMessage()"
  [enableSelection]="false"
  [disabled]="disabled"
  #videosSelection
diff --git a/client/src/app/+my-library/my-history/my-history.component.scss b/client/src/app/+my-library/my-history/my-history.component.scss
index 3257b2215..21011a089 100644
--- a/client/src/app/+my-library/my-history/my-history.component.scss
+++ b/client/src/app/+my-library/my-history/my-history.component.scss
@@ -6,7 +6,6 @@
  justify-content: center;
  margin-top: 50px;
  font-weight: $font-semibold;
-  font-size: 16px;
 }
 .top-buttons {
@@ -29,11 +28,11 @@
    grid-column: 3;
    display: flex;
+    align-items: center;
    label {
      margin: 0 0 0 5px;
      color: var(--greyForegroundColor);
-      font-size: 15px;
      font-weight: $font-semibold;
    }
  }
@@ -44,8 +43,6 @@
    @include button-with-icon;
    grid-column: 4;
-    font-size: 15px;
  }
 }
diff --git a/client/src/app/+my-library/my-history/my-history.component.ts b/client/src/app/+my-library/my-history/my-history.component.ts
index 766869637..c4878c957 100644
--- a/client/src/app/+my-library/my-history/my-history.component.ts
+++ b/client/src/app/+my-library/my-history/my-history.component.ts
@@ -134,4 +134,12 @@ export class MyHistoryComponent implements OnInit, DisableForReuseHook {
          error: err => this.notifier.error(err.message)
        })
  }
+  getNoResultMessage () {
+    if (this.search) {
+      return $localize`No videos found for "${this.search}".`
+    }
+    return $localize`You don't have any video in your watch history yet.`
+  }
 }
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss
index 840e449ea..93bc18fe2 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss
@@ -1,11 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
 .video-playlist-title {
  @include settings-big-title;
 }
diff --git a/client/src/app/+search/search-filters.component.scss b/client/src/app/+search/search-filters.component.scss
index 5fd1764d3..c55e59310 100644
--- a/client/src/app/+search/search-filters.component.scss
+++ b/client/src/app/+search/search-filters.component.scss
@@ -6,7 +6,6 @@ form {
 }
 .radio-label {
-  font-size: 15px;
  font-weight: $font-bold;
 }
diff --git a/client/src/app/+search/search.component.scss b/client/src/app/+search/search.component.scss
index cab1d0e88..11d95df6a 100644
--- a/client/src/app/+search/search.component.scss
+++ b/client/src/app/+search/search.component.scss
@@ -20,7 +20,6 @@
 }
 .results-header {
-  font-size: 16px;
  padding-bottom: 20px;
  margin-bottom: 30px;
  border-bottom: 1px solid #DADADA;
diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss
index 8388bed7d..c706d6955 100644
--- a/client/src/app/+signup/+register/register.component.scss
+++ b/client/src/app/+signup/+register/register.component.scss
@@ -1,11 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
-.alert {
-  font-size: 16px;
-  text-align: center;
-}
 .signup-disabled {
  padding-top: 30vh;
 }
@@ -15,10 +10,6 @@
  margin: 0;
 }
-.register-content {
-  font-size: 16px;
-}
 my-instance-about-accordion {
  display: block;
  margin-bottom: 25px;
diff --git a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss
index 4ce2c6758..c0b670c65 100644
--- a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss
+++ b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss
@@ -1,11 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
 .caption-file {
  margin-top: 20px;
  width: max-content;
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
index 7add71886..770a0f585 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
@@ -1,12 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
-label,
-my-dynamic-form-field ::ng-deep label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
 .peertube-select-container {
  @include peertube-select-container(auto);
 }
@@ -37,10 +31,6 @@ my-peertube-checkbox {
    @include peertube-input-text(100%);
    display: block;
  }
-  .label-tags + span {
-    font-size: 15px;
-  }
 }
 .captions-header {
@@ -71,7 +61,6 @@ my-peertube-checkbox {
  .caption-entry-label {
    @include margin-right(20px);
-    font-size: 15px;
    font-weight: bold;
    width: 150px;
  }
@@ -100,7 +89,6 @@ my-peertube-checkbox {
 .no-caption {
  text-align: center;
-  font-size: 15px;
 }
 .submit-container {
@@ -111,7 +99,6 @@ my-peertube-checkbox {
    display: inline-block;
    color: pvar(--greyForegroundColor);
-    font-size: 15px;
  }
 }
diff --git a/client/src/app/+videos/+video-edit/video-add.component.scss b/client/src/app/+videos/+video-edit/video-add.component.scss
index dda868789..461a38204 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.scss
+++ b/client/src/app/+videos/+video-edit/video-add.component.scss
@@ -10,7 +10,6 @@ $nav-link-height: 40px;
 .upload-message {
  width: 100%;
  text-align: center;
-  font-size: 15px;
  margin-bottom: 0;
  border-radius: 0;
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss
index 54f828014..8b5034083 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss
@@ -2,7 +2,6 @@
 @use '_mixins' as *;
 .root-comment {
-  font-size: 15px;
  display: flex;
  .left {
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss
index 4b00683ab..638147dfe 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss
@@ -7,7 +7,6 @@
 .view-replies {
  font-weight: $font-semibold;
-  font-size: 15px;
  cursor: pointer;
 }
@@ -33,10 +32,9 @@
 }
 #dropdown-sort-comments {
-  font-weight: 600;
+  font-weight: $font-semibold;
  text-transform: uppercase;
  border: 0;
-  transform: translateY(-7%);
 }
 @media screen and (max-width: 600px) {
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss
index 147bc4d7f..b503a94cb 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss
@@ -7,7 +7,6 @@
  margin-top: 20px;
  margin-bottom: 20px;
-  font-size: 15px;
  .video-info-description-html {
    @include peertube-word-wrap;
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.scss b/client/src/app/+videos/+video-watch/video-watch.component.scss
index 6818a4257..d438facd3 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/+videos/+video-watch/video-watch.component.scss
@@ -112,7 +112,6 @@ $video-height: 66vh;
  margin-top: 50px;
  text-align: center;
  font-weight: $font-semibold;
-  font-size: 15px;
 }
 .video-bottom {
@@ -158,12 +157,11 @@ $video-height: 66vh;
  margin-bottom: 10px;
  align-self: start;
-  font-size: 1em;
+  font-size: 14px;
 }
 .video-info-channel {
  font-weight: $font-semibold;
-  font-size: 15px;
  a {
    @include disable-default-a-behaviour;
diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.html b/client/src/app/+videos/video-list/overview/video-overview.component.html
index 1d5131092..20cbb239b 100644
--- a/client/src/app/+videos/video-list/overview/video-overview.component.html
+++ b/client/src/app/+videos/video-list/overview/video-overview.component.html
@@ -10,7 +10,7 @@
      <div class="section videos" *ngFor="let object of overview.categories">
        <h1 class="section-title">
-          <a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a>
+          <a class="link-orange" routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a>
        </h1>
        <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
@@ -21,7 +21,7 @@
      <div class="section videos" *ngFor="let object of overview.tags">
        <h2 class="section-title">
-          <a routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a>
+          <a class="link-orange" routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a>
        </h2>
        <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
@@ -32,7 +32,7 @@
      <div class="section channel videos" *ngFor="let object of overview.channels">
        <div class="section-title">
-          <a [routerLink]="[ '/c', buildVideoChannelBy(object) ]">
+          <a class="link-orange" [routerLink]="[ '/c', buildVideoChannelBy(object) ]">
            <my-actor-avatar [channel]="buildVideoChannel(object)" size="28"></my-actor-avatar>
            <h2 class="section-title">{{ object.channel.displayName }}</h2>
diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.scss b/client/src/app/+videos/video-list/overview/video-overview.component.scss
index 8b2aa88f2..5a789b66d 100644
--- a/client/src/app/+videos/video-list/overview/video-overview.component.scss
+++ b/client/src/app/+videos/video-list/overview/video-overview.component.scss
@@ -13,7 +13,7 @@
 .section {
  &:first-child {
-    padding-top: 30px;
+    padding-top: 15px;
    .section-title {
      border-top: 0 !important;
@@ -22,66 +22,27 @@
  .section-title {
    font-size: 24px;
-    font-weight: $font-semibold;
+    padding-top: 20px;
-    padding-top: 15px;
+    margin-bottom: 30px;
-    margin-bottom: 15px;
-    display: flex;
-    justify-content: space-between;
    &:not(h2) {
      border-top: 1px solid $separator-border-color;
    }
-    a {
+    a > h2 {
-      color: pvar(--mainForegroundColor);
+      margin-bottom: 0;
+      display: inline-block;
-      &:hover,
+      font-weight: $font-bold;
-      &:focus:not(.focus-visible),
-      &:active {
-        text-decoration: none;
-        outline: none;
-      }
    }
-  }
-  &.channel {
-    .section-title {
-      a {
-        display: flex;
-        width: fit-content;
-        align-items: center;
-        my-actor-avatar {
-          @include margin-right(8px);
-          font-size: initial;
-        }
-      }
-      .followers {
+    my-actor-avatar {
-        @include margin-left(10px);
+      @include margin-right(8px);
-        color: pvar(--greyForegroundColor);
+      position: relative;
-        font-weight: normal;
+      top: -2px;
-        font-size: 14px;
-        position: relative;
-        top: 2px;
-      }
    }
  }
-  .show-more {
-    position: relative;
-    top: -5px;
-    display: inline-block;
-    font-size: 16px;
-    text-transform: uppercase;
-    color: pvar(--greyForegroundColor);
-    margin-bottom: 10px;
-    font-weight: $font-semibold;
-    text-decoration: none;
-  }
  @media screen and (max-width: $mobile-view) {
    max-height: initial;
    overflow: initial;
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 5f3e15d80..31e9987c6 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -103,14 +103,4 @@
    cursor: pointer;
    width: 20px;
  }
-  ::ng-deep {
-    p {
-      font-size: 16px;
-    }
-    p:last-child {
-      margin-bottom: 0;
-    }
-  }
 }
diff --git a/client/src/app/menu/language-chooser.component.scss b/client/src/app/menu/language-chooser.component.scss
index 04b18af33..28d58a678 100644
--- a/client/src/app/menu/language-chooser.component.scss
+++ b/client/src/app/menu/language-chooser.component.scss
@@ -18,7 +18,6 @@
  a {
    display: block;
-    font-size: 16px;
    margin: 15px;
  }
 }
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 352682bfc..a548c08cf 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -16,7 +16,6 @@ $footer-links-base-opacity: .8;
  color: pvar(--menuForegroundColor);
  cursor: pointer;
-  font-size: 16px;
  white-space: normal;
  word-break: break-word;
  transition: background-color .1s ease-in-out;
@@ -195,7 +194,6 @@ my-actor-avatar {
 .logged-in-display-name {
  @include disable-default-a-behaviour;
-  font-size: 16px;
  font-weight: $font-semibold;
  color: pvar(--menuForegroundColor);
 }
@@ -319,7 +317,7 @@ my-actor-avatar {
    color: pvar(--menuForegroundColor);
    opacity: $footer-links-base-opacity;
    white-space: nowrap;
-    font-size: 90%;
+    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4rem;
  }
diff --git a/client/src/app/modal/account-setup-warning-modal.component.scss b/client/src/app/modal/account-setup-warning-modal.component.scss
index d99edaf7a..25e67b08f 100644
--- a/client/src/app/modal/account-setup-warning-modal.component.scss
+++ b/client/src/app/modal/account-setup-warning-modal.component.scss
@@ -2,7 +2,6 @@
 @use '_variables' as *;
 .modal-body {
-  font-size: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
@@ -24,7 +23,6 @@
 .subtitle {
  font-weight: $font-semibold;
  margin-bottom: 10px;
-  font-size: 16px;
 }
 li {
diff --git a/client/src/app/modal/admin-welcome-modal.component.scss b/client/src/app/modal/admin-welcome-modal.component.scss
index 242a498d0..716f1fff0 100644
--- a/client/src/app/modal/admin-welcome-modal.component.scss
+++ b/client/src/app/modal/admin-welcome-modal.component.scss
@@ -1,10 +1,6 @@
 @use '_mixins' as *;
 @use '_variables' as *;
-.modal-body {
-  font-size: 15px;
-}
 .two-columns {
  display: flex;
  align-items: center;
@@ -26,7 +22,6 @@
 .subtitle {
  font-weight: $font-semibold;
  margin-bottom: 10px;
-  font-size: 16px;
 }
 .block-documentation {
@@ -63,7 +58,6 @@ li {
  }
  .link-title {
-    font-size: 16px;
    font-weight: $font-semibold;
    display: flex;
    justify-content: center;
diff --git a/client/src/app/modal/confirm.component.scss b/client/src/app/modal/confirm.component.scss
index 21aa81eeb..3372baf1a 100644
--- a/client/src/app/modal/confirm.component.scss
+++ b/client/src/app/modal/confirm.component.scss
@@ -1,10 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
-.modal-body {
-  font-size: 15px;
-}
 .button {
  padding: 0 13px;
 }
diff --git a/client/src/app/modal/custom-modal.component.scss b/client/src/app/modal/custom-modal.component.scss
index 15cbadfc0..c5b77994e 100644
--- a/client/src/app/modal/custom-modal.component.scss
+++ b/client/src/app/modal/custom-modal.component.scss
@@ -1,10 +1,6 @@
 @use '_mixins' as *;
 @use '_variables' as *;
-.modal-body {
-  font-size: 15px;
-}
 li {
  margin-bottom: 10px;
 }
diff --git a/client/src/app/modal/instance-config-warning-modal.component.scss b/client/src/app/modal/instance-config-warning-modal.component.scss
index 3e6c6d716..b650f4e69 100644
--- a/client/src/app/modal/instance-config-warning-modal.component.scss
+++ b/client/src/app/modal/instance-config-warning-modal.component.scss
@@ -1,10 +1,6 @@
 @use '_mixins' as *;
 @use '_variables' as *;
-.modal-body {
-  font-size: 15px;
-}
 li {
  margin-bottom: 10px;
 }
diff --git a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss
index d77e44a9d..3b43a4a4d 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss
+++ b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss
@@ -25,7 +25,6 @@ textarea {
 .no-messages {
  display: flex;
-  font-size: 15px;
  justify-content: center;
 }
@@ -45,10 +44,6 @@ textarea {
    color: var(--mainForegroundColor);
    background-color: var(--greyBackgroundColor);
-    .content {
-      font-size: 15px;
-    }
    .date {
      font-size: 13px;
      color: var(--greyForegroundColor);
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
index 7fd9f057e..b8e6136fb 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
+++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
@@ -30,7 +30,6 @@ my-actor-avatar {
 }
 .actor-info-followers {
-  font-size: 15px;
  padding-bottom: .5rem;
 }
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.html b/client/src/app/shared/shared-actor-image/actor-avatar.component.html
index c285b6cc3..ba025da4d 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar.component.html
+++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.html
@@ -1,7 +1,7 @@
 <ng-template #img>
-  <img *ngIf="previewImage || avatarUrl || !initial" [class]="getClass('avatar')" [src]="previewImage || avatarUrl || defaultAvatarUrl" [alt]="alt" />
+  <img *ngIf="previewImage || avatarUrl || !initial" [class]="classes" [src]="previewImage || avatarUrl || defaultAvatarUrl" [alt]="alt" />
-  <div *ngIf="!avatarUrl && initial" [ngClass]="getClass('initial')">
+  <div *ngIf="!avatarUrl && initial" [ngClass]="classes">
    <span>{{ initial }}</span>
  </div>
 </ng-template>
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
index 600984aa2..fa4f1e51f 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
+++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core'
+import { Component, Input, OnChanges } from '@angular/core'
 import { VideoChannel } from '../shared-main'
 import { Account } from '../shared-main/account/account.model'
@@ -15,7 +15,7 @@ export type ActorAvatarSize = '18' | '25' | '28' | '32' | '34' | '35' | '36' | '
  styleUrls: [ './actor-avatar.component.scss' ],
  templateUrl: './actor-avatar.component.html'
 })
-export class ActorAvatarComponent {
+export class ActorAvatarComponent implements OnChanges {
  private _title: string
  @Input() account: ActorInput
@@ -42,6 +42,8 @@ export class ActorAvatarComponent {
    return ''
  }
+  classes: string[] = []
  get alt () {
    if (this.account) return $localize`Account avatar`
    if (this.channel) return $localize`Channel avatar`
@@ -68,20 +70,18 @@ export class ActorAvatarComponent {
    return name.slice(0, 1)
  }
-  getClass (type: 'avatar' | 'initial') {
+  ngOnChanges () {
-    const base = [ 'avatar' ]
+    this.classes = [ 'avatar' ]
-    if (this.size) base.push(`avatar-${this.size}`)
+    if (this.size) this.classes.push(`avatar-${this.size}`)
-    if (this.channel) base.push('channel')
+    if (this.channel) this.classes.push('channel')
-    else base.push('account')
+    else this.classes.push('account')
-    if (type === 'initial' && this.initial) {
+    if (!this.avatarUrl && this.initial) {
-      base.push('initial')
+      this.classes.push('initial')
-      base.push(this.getColorTheme())
+      this.classes.push(this.getColorTheme())
    }
-    return base
  }
  hasActor () {
diff --git a/client/src/app/shared/shared-forms/input-text.component.scss b/client/src/app/shared/shared-forms/input-text.component.scss
index 8baeec21d..ae8bf5fec 100644
--- a/client/src/app/shared/shared-forms/input-text.component.scss
+++ b/client/src/app/shared/shared-forms/input-text.component.scss
@@ -9,8 +9,6 @@ input {
 .btn {
  @include button-with-icon(18px);
-  font-size: 15px;
 }
 .copy-text {
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.scss b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
index 5939bb999..421c8cbcc 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
@@ -102,7 +102,6 @@ $input-border-radius: 3px;
  min-height: 75px;
  padding: $base-padding;
  overflow-y: auto;
-  font-size: 15px;
  word-wrap: break-word;
 }
diff --git a/client/src/app/shared/shared-forms/peertube-checkbox.component.html b/client/src/app/shared/shared-forms/peertube-checkbox.component.html
index 38a48a2a5..cd06e75ba 100644
--- a/client/src/app/shared/shared-forms/peertube-checkbox.component.html
+++ b/client/src/app/shared/shared-forms/peertube-checkbox.component.html
@@ -34,9 +34,9 @@
  </div>
  <div class="ms-4 d-flex flex-column">
-    <small class="wrapper mt-2 muted">
+    <div class="wrapper form-group-description">
      <ng-content select="description"></ng-content>
-    </small>
+    </div>
    <span class="wrapper mt-3">
      <ng-content select="extra"></ng-content>
diff --git a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
index 5fe20c3a5..ac9127677 100644
--- a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
+++ b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
@@ -6,12 +6,7 @@
  label {
    display: flex;
-    align-items: center;
+    font-size: $form-input-font-size;
-    .label-text {
-      font-weight: $font-regular;
-      margin: 0;
-    }
    input {
      @include peertube-checkbox(1px);
@@ -23,12 +18,11 @@
  }
  my-help {
-    position: relative;
+    line-height: 17px;
-    top: 2px;
  }
-  small {
+  .form-group-description {
-    font-size: 90%;
+    margin-top: 2px;
  }
  .wrapper:empty {
diff --git a/client/src/app/shared/shared-forms/timestamp-input.component.scss b/client/src/app/shared/shared-forms/timestamp-input.component.scss
index 27d6fa173..e69a06947 100644
--- a/client/src/app/shared/shared-forms/timestamp-input.component.scss
+++ b/client/src/app/shared/shared-forms/timestamp-input.component.scss
@@ -4,7 +4,6 @@
 p-inputmask {
  ::ng-deep input {
    width: 80px;
-    font-size: 15px;
    &:focus-within,
    &:focus {
diff --git a/client/src/app/shared/shared-icons/global-icon.component.scss b/client/src/app/shared/shared-icons/global-icon.component.scss
index 6795d6628..10180829f 100644
--- a/client/src/app/shared/shared-icons/global-icon.component.scss
+++ b/client/src/app/shared/shared-icons/global-icon.component.scss
@@ -3,4 +3,9 @@
    width: inherit;
    height: inherit;
  }
+  .feather-flag {
+    margin-left: -1px;
+  }
 }
diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.scss b/client/src/app/shared/shared-instance/instance-about-accordion.component.scss
index 0da7aede9..c8e288462 100644
--- a/client/src/app/shared/shared-instance/instance-about-accordion.component.scss
+++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.scss
@@ -12,6 +12,5 @@
 }
 .block {
-  font-size: 15px;
  margin-bottom: 15px;
 }
diff --git a/client/src/app/shared/shared-instance/instance-features-table.component.scss b/client/src/app/shared/shared-instance/instance-features-table.component.scss
index 105a7681f..bfae0c112 100644
--- a/client/src/app/shared/shared-instance/instance-features-table.component.scss
+++ b/client/src/app/shared/shared-instance/instance-features-table.component.scss
@@ -33,7 +33,6 @@ table {
  caption {
    caption-side: top;
-    font-size: 15px;
    font-weight: $font-semibold;
    color: pvar(--mainForegroundColor);
  }
diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
index 10dae68f0..017355bd0 100644
--- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
@@ -39,7 +39,7 @@
          </span>
          <h6
-            *ngIf="!action.linkBuilder && action.isHeader" [ngClass]="{ 'with-icon': !!action.iconName }"
+            *ngIf="!action.linkBuilder && action.isHeader && areActionsDisplayed(actions, entry)" [ngClass]="{ 'with-icon': !!action.iconName }"
            class="dropdown-header" tabindex="0" role="button" [title]="action.title || ''" (click)="action.handler(entry)" (keyup.enter)="action.handler(entry)"
          >
            <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts b/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
index 67ac6e1aa..749773f8a 100644
--- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
@@ -48,7 +48,7 @@ export class ActionDropdownComponent<T> {
    return actions.some(a => {
      if (Array.isArray(a)) return this.areActionsDisplayed(a, entry)
-      return a.isDisplayed === undefined || a.isDisplayed(entry)
+      return a.isHeader !== true && (a.isDisplayed === undefined || a.isDisplayed(entry))
    })
  }
 }
diff --git a/client/src/app/shared/shared-main/buttons/button.component.html b/client/src/app/shared/shared-main/buttons/button.component.html
index 3e558bbb8..3e3728623 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.html
+++ b/client/src/app/shared/shared-main/buttons/button.component.html
@@ -1,8 +1,8 @@
-<span *ngIf="!routerLink" class="action-button" [ngClass]="getClasses()" [ngbTooltip]="title" tabindex="0">
+<div *ngIf="!routerLink" class="action-button" [ngClass]="classes" [ngbTooltip]="title" tabindex="0">
  <ng-container *ngTemplateOutlet="content"></ng-container>
-</span>
+</div>
-<a *ngIf="routerLink" class="action-button" [ngClass]="getClasses()" [ngbTooltip]="title" [routerLink]="routerLink">
+<a *ngIf="routerLink" class="action-button" [ngClass]="classes" [ngbTooltip]="title" [routerLink]="routerLink">
  <ng-container *ngTemplateOutlet="content"></ng-container>
 </a>
diff --git a/client/src/app/shared/shared-main/buttons/button.component.scss b/client/src/app/shared/shared-main/buttons/button.component.scss
index cdd75d525..7f0cdf1ed 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.scss
+++ b/client/src/app/shared/shared-main/buttons/button.component.scss
@@ -16,7 +16,6 @@
 }
 :host {
-  outline: none;
  display: inline-block;
 }
diff --git a/client/src/app/shared/shared-main/buttons/button.component.ts b/client/src/app/shared/shared-main/buttons/button.component.ts
index 476057823..10d67831f 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/button.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core'
+import { Component, Input, OnChanges } from '@angular/core'
 import { GlobalIconName } from '@app/shared/shared-icons'
 @Component({
@@ -7,7 +7,7 @@ import { GlobalIconName } from '@app/shared/shared-icons'
  templateUrl: './button.component.html'
 })
-export class ButtonComponent {
+export class ButtonComponent implements OnChanges {
  @Input() label = ''
  @Input() className = 'grey-button'
  @Input() icon: GlobalIconName = undefined
@@ -17,8 +17,10 @@ export class ButtonComponent {
  @Input() disabled = false
  @Input() responsiveLabel = false
-  getClasses () {
+  classes: { [id: string]: boolean } = {}
-    return {
+  ngOnChanges () {
+    this.classes = {
      [this.className]: true,
      disabled: this.disabled,
      'icon-only': !this.label,
diff --git a/client/src/app/shared/shared-main/buttons/edit-button.component.ts b/client/src/app/shared/shared-main/buttons/edit-button.component.ts
index 0049dfa64..28aacbbff 100644
--- a/client/src/app/shared/shared-main/buttons/edit-button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/edit-button.component.ts
@@ -25,10 +25,6 @@ export class EditButtonComponent implements OnInit {
    // <my-edit-button label /> Use default label
    if (this.label === '') {
      this.label = $localize`Update`
-      if (!this.title) {
-        this.title = this.label
-      }
    }
  }
 }
diff --git a/client/src/app/shared/shared-main/misc/channels-setup-message.component.scss b/client/src/app/shared/shared-main/misc/channels-setup-message.component.scss
index 7dcba2ca5..2aa176e1b 100644
--- a/client/src/app/shared/shared-main/misc/channels-setup-message.component.scss
+++ b/client/src/app/shared/shared-main/misc/channels-setup-message.component.scss
@@ -5,28 +5,24 @@
  display: flex;
  align-items: center;
  justify-content: center;
+}
-  my-global-icon {
+my-global-icon {
-    width: 32px;
+  @include apply-svg-color(pvar(--mainColor));
-    align-self: flex-start;
-    ::ng-deep {
+  width: 32px;
-      svg {
+  align-self: flex-start;
-        fill: #0c5460;
-      }
-    }
-    + div {
+  + div {
-      margin-left: 10px;
+    margin-left: 10px;
-      text-align: center;
+    text-align: center;
+  }
+}
-      a.channels-settings-link {
+.channels-settings-link {
-        @include peertube-button-link;
+  @include peertube-button-link;
-        @include grey-button;
+  @include grey-button;
-        height: fit-content;
+  height: fit-content;
-        margin-top: 10px;
+  margin-top: 10px;
-      }
-    }
-  }
 }
diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.html b/client/src/app/shared/shared-main/misc/simple-search-input.component.html
index ae57ca5b7..386d26116 100644
--- a/client/src/app/shared/shared-main/misc/simple-search-input.component.html
+++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.html
@@ -1,13 +1,7 @@
 <div class="root">
  <div class="input-group has-clear">
-    <input
+    <input #ref type="text" class="last-in-group"
-      #ref
+      [(ngModel)]="value" (keyup.enter)="sendSearch()" [hidden]="!inputShown" [name]="name" [placeholder]="placeholder"
-      type="text"
-      [(ngModel)]="value"
-      (keyup.enter)="sendSearch()"
-      [hidden]="!inputShown"
-      [name]="name"
-      [placeholder]="placeholder"
    >
    <my-global-icon iconName="cross" role="button" class="form-control-clear" title="Clear filter" i18n-title (click)="onResetFilter()"></my-global-icon>
diff --git a/client/src/app/shared/shared-main/users/user-quota.component.scss b/client/src/app/shared/shared-main/users/user-quota.component.scss
index 70571bde6..f3e86ce78 100644
--- a/client/src/app/shared/shared-main/users/user-quota.component.scss
+++ b/client/src/app/shared/shared-main/users/user-quota.component.scss
@@ -1,11 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
 .user-quota {
  label {
    @include margin-right(5px);
diff --git a/client/src/app/shared/shared-moderation/account-blocklist.component.html b/client/src/app/shared/shared-moderation/account-blocklist.component.html
index 15632f654..131110318 100644
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/account-blocklist.component.html
@@ -48,7 +48,7 @@
  <ng-template pTemplate="emptymessage">
    <tr>
-      <td colspan="6">
+      <td colspan="3">
        <div class="no-results">
          <ng-container *ngIf="search" i18n>No account found matching current filters.</ng-container>
          <ng-container *ngIf="!search" i18n>No account found.</ng-container>
diff --git a/client/src/app/shared/shared-moderation/server-blocklist.component.html b/client/src/app/shared/shared-moderation/server-blocklist.component.html
index cabf0e9dd..bc47bf26f 100644
--- a/client/src/app/shared/shared-moderation/server-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/server-blocklist.component.html
@@ -50,7 +50,7 @@
  <ng-template pTemplate="emptymessage">
    <tr>
-      <td colspan="6">
+      <td colspan="3">
        <div class="no-results">
          <ng-container *ngIf="search" i18n>No server found matching current filters.</ng-container>
          <ng-container *ngIf="!search" i18n>No server found.</ng-container>
diff --git a/client/src/app/shared/shared-moderation/user-ban-modal.component.scss b/client/src/app/shared/shared-moderation/user-ban-modal.component.scss
index 2c46c3d03..376fb1693 100644
--- a/client/src/app/shared/shared-moderation/user-ban-modal.component.scss
+++ b/client/src/app/shared/shared-moderation/user-ban-modal.component.scss
@@ -2,7 +2,6 @@
 @use '_mixins' as *;
 .description {
-  font-size: 15px;
  margin-bottom: 15px;
 }
diff --git a/client/src/app/shared/shared-moderation/video-block.component.scss b/client/src/app/shared/shared-moderation/video-block.component.scss
index 3061bbf15..7726eca11 100644
--- a/client/src/app/shared/shared-moderation/video-block.component.scss
+++ b/client/src/app/shared/shared-moderation/video-block.component.scss
@@ -6,6 +6,5 @@ textarea {
 }
 .live-info {
-  font-size: 15px;
  margin: 40px 0 20px;
 }
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.scss b/client/src/app/shared/shared-share-modal/video-share.component.scss
index 611291981..456309d2d 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.scss
+++ b/client/src/app/shared/shared-share-modal/video-share.component.scss
@@ -34,6 +34,10 @@ my-input-text {
  margin-top: 20px;
 }
+.alert-private {
+  margin-top: 0;
+}
 .filters {
  margin-top: 30px;
@@ -46,7 +50,6 @@ my-input-text {
    justify-content: center;
    align-items: center;
    margin-top: 20px;
-    font-size: 16px;
    font-weight: $font-semibold;
    cursor: pointer;
  }
diff --git a/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss b/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss
index 2fc245ace..da8202594 100644
--- a/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss
+++ b/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss
@@ -1,11 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
 input[type=submit] {
  @include peertube-button;
  @include orange-button;
diff --git a/client/src/app/shared/shared-user-settings/user-video-settings.component.html b/client/src/app/shared/shared-user-settings/user-video-settings.component.html
index ccd7f8f4b..85b27a4ff 100644
--- a/client/src/app/shared/shared-user-settings/user-video-settings.component.html
+++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.html
@@ -42,7 +42,7 @@
      i18n-labelText labelText="Help share videos being played"
    >
      <ng-container ngProjectAs="description">
-        <span i18n>The <a routerLink="/about/peertube" fragment="privacy" target="_blank">sharing system</a> implies that some technical information about your system (such as a public IP address) can be sent to other peers, but greatly helps to reduce server load.</span>
+        <span i18n>The <a class="link-orange" routerLink="/about/peertube" fragment="privacy" target="_blank">sharing system</a> implies that some technical information about your system (such as a public IP address) can be sent to other peers, but greatly helps to reduce server load.</span>
      </ng-container>
    </my-peertube-checkbox>
  </div>
diff --git a/client/src/app/shared/shared-user-settings/user-video-settings.component.scss b/client/src/app/shared/shared-user-settings/user-video-settings.component.scss
index a39e7cf1f..163c899d3 100644
--- a/client/src/app/shared/shared-user-settings/user-video-settings.component.scss
+++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.scss
@@ -1,11 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
 input[type=submit] {
  @include peertube-button;
  @include orange-button;
diff --git a/client/src/app/shared/shared-user-subscription/subscribe-button.component.html b/client/src/app/shared/shared-user-subscription/subscribe-button.component.html
index a6d851315..0e09c2697 100644
--- a/client/src/app/shared/shared-user-subscription/subscribe-button.component.html
+++ b/client/src/app/shared/shared-user-subscription/subscribe-button.component.html
@@ -1,5 +1,5 @@
 <div
-  class="btn-group-subscribe btn-group"
+  class="btn-group-subscribe btn-group" role="group"
  [ngClass]="{'subscribe-button': !isAllChannelsSubscribed, 'unsubscribe-button': isAllChannelsSubscribed, 'big': isBigButton }"
 >
@@ -20,17 +20,11 @@
  </ng-template>
  <ng-template #userLoggedIn>
-    <button
+    <button *ngIf="!isAllChannelsSubscribed" type="button" class="btn" (click)="subscribe()">
-      *ngIf="!isAllChannelsSubscribed" type="button"
-      class="btn btn-sm" (click)="subscribe()"
-    >
      <ng-template [ngTemplateOutlet]="userLoggedOut"></ng-template>
    </button>
-    <button
+    <button *ngIf="isAllChannelsSubscribed" type="button" class="btn" role="button" (click)="unsubscribe()">
-      *ngIf="isAllChannelsSubscribed" type="button"
-      class="btn btn-sm" role="button"
-      (click)="unsubscribe()">
      <ng-container i18n>{account + "", select, undefined {Unsubscribe} other {Unsubscribe from all channels}}</ng-container>
    </button>
  </ng-template>
@@ -43,7 +37,7 @@
    class="btn-group" ngbDropdown autoClose="outside" placement="bottom-right bottom-left bottom auto"
    role="group" aria-label="Multiple ways to subscribe to the current channel" i18n-aria-label
  >
-    <button class="btn btn-sm dropdown-toggle-split" ngbDropdownToggle aria-label="Open subscription dropdown" i18n-aria-label>
+    <button class="btn dropdown-toggle-split" ngbDropdownToggle aria-label="Open subscription dropdown" i18n-aria-label>
      <ng-container
        *ngIf="!isUserLoggedIn(); then userLoggedOut">
      </ng-container>
diff --git a/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss b/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
index da8eaf646..889596b62 100644
--- a/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
+++ b/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
@@ -3,14 +3,10 @@
 .btn-group-subscribe {
  @include peertube-button;
-  @include disable-default-a-behaviour;
-  float: right;
+  button.dropdown-toggle {
-  padding: 0;
+    font-size: $button-font-size;
+    line-height: 1.2;
-  > .btn,
-  > .dropdown > .dropdown-toggle {
-    font-size: 15px;
  }
  &:not(.big) {
@@ -38,7 +34,7 @@
  // Unlogged
  > .dropdown > .dropdown-toggle span {
-    @include padding-right(3px);
+    @include padding-right(5px);
  }
  // Logged
@@ -65,9 +61,11 @@
      @include padding-left(5px);
    }
  }
  &.unsubscribe-button {
    .btn {
      @include grey-button;
      font-weight: 600;
    }
  }
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.scss b/client/src/app/shared/shared-video-miniature/video-download.component.scss
index eb9c57b2f..407bdadf2 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.scss
@@ -10,7 +10,6 @@
  justify-content: center;
  align-items: center;
  margin-top: 20px;
-  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss b/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss
index 6a968ed5c..a4e51982c 100644
--- a/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss
@@ -3,7 +3,6 @@
 .root {
  margin-bottom: 45px;
-  font-size: 15px;
 }
 .first-row {
@@ -49,7 +48,6 @@
  border-radius: 24px;
  padding: 4px 15px;
-  font-size: 16px;
  margin-bottom: 15px;
  cursor: pointer;
 }
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
index 80b418c87..a397efdca 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
@@ -4,6 +4,10 @@
 $more-button-width: 40px;
+.video-miniature {
+  font-size: 14px;
+}
 .video-miniature-name {
  @include miniature-name;
 }
diff --git a/client/src/app/shared/shared-video-miniature/videos-list.component.scss b/client/src/app/shared/shared-video-miniature/videos-list.component.scss
index 209201a5c..5e3df5a98 100644
--- a/client/src/app/shared/shared-video-miniature/videos-list.component.scss
+++ b/client/src/app/shared/shared-video-miniature/videos-list.component.scss
@@ -54,9 +54,9 @@ $margin-top: 30px;
 }
 .date-title {
-  font-size: 16px;
  font-weight: $font-semibold;
  margin-bottom: 20px;
+  font-size: 1rem;
  // Make the element span a full grid row within .videos grid
  grid-column: 1 / -1;
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html
index bd5d37196..6d787796a 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html
+++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html
@@ -30,12 +30,10 @@
      </div>
      <div class="optional-rows" *ngIf="playlist.optionalRowDisplayed">
-        <div class="labels">
+        <div class="header-label" i18n>Start at</div>
-          <div i18n>Start at</div>
+        <div class="header-label" i18n>Stop at</div>
-          <div i18n>Stop at</div>
-        </div>
-        <div *ngFor="let element of buildOptionalRowElements(playlist)">
+        <ng-container *ngFor="let element of buildOptionalRowElements(playlist)">
          <my-peertube-checkbox
            [inputName]="getOptionalInputName(playlist, element)"
            [ngModel]="element.enabled" [onPushWorkaround]="true"
@@ -55,7 +53,7 @@
            (inputBlur)="onElementTimestampUpdate(playlist, element)"
            #stopAt
          ></my-timestamp-input>
-        </div>
+        </ng-container>
      </div>
    </div>
  </div>
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
index 7db469d7c..de2f1032b 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
@@ -1,10 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
-$optional-rows-checkbox-width: 34px;
-$timestamp-width: 50px;
-$timestamp-margin-right: 10px;
 .header,
 .dropdown-item,
 .input-container {
@@ -52,12 +48,12 @@ $timestamp-margin-right: 10px;
  }
 }
-.primary-row,
+.primary-row {
-.optional-rows > div {
  display: flex;
  my-peertube-checkbox {
    @include margin-right(10px);
    align-self: center;
  }
@@ -84,41 +80,30 @@ $timestamp-margin-right: 10px;
      height: 19px;
    }
  }
-  my-timestamp-input {
-    @include margin-right($timestamp-margin-right);
-    ::ng-deep .ui-inputtext {
-      padding: 0;
-      width: $timestamp-width;
-    }
-  }
 }
 .optional-rows {
-  > div {
+  display: grid;
-    padding: 8px 5px 5px 10px;
+  grid-template-columns: 35px 80px 80px;
-  }
+  row-gap: 3px;
+  column-gap: 10px;
+  align-items: center;
  my-peertube-checkbox {
-    @include margin-right(0 !important);
+    @include margin-left(auto);
-    display: block;
-    width: $optional-rows-checkbox-width;
  }
-  .labels {
+  .header-label {
-    @include margin-left($optional-rows-checkbox-width);
    font-size: 13px;
    color: pvar(--greyForegroundColor);
-    padding-top: 5px;
+    padding-left: 2px;
-    padding-bottom: 0;
-    div {
+    &:nth-child(1) {
-      @include margin-right($timestamp-margin-right);
+      grid-column: 2;
+    }
-      width: $timestamp-width;
+    &:nth-child(2) {
+      grid-column: 3;
    }
  }
 }
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
index c0cf2d1da..e6b01d33d 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
@@ -75,40 +75,6 @@ my-video-thumbnail,
        left: -2px;
      }
    }
-    .video-info {
-      display: flex;
-      flex-direction: column;
-      align-self: flex-start;
-      min-width: 0;
-      .video-info-header {
-        display: flex;
-        align-items: baseline;
-        a {
-          width: auto;
-          padding-right: 5px;
-        }
-        .pt-badge {
-          @include margin-right(5px);
-        }
-      }
-      .video-info-account,
-      .video-info-timestamp {
-        color: pvar(--greyForegroundColor);
-      }
-    }
-  }
-  .video-info-name {
-    @include ellipsis;
-    font-size: 18px;
-    font-weight: $font-semibold;
-    display: inline-block;
  }
  .more,
@@ -139,6 +105,45 @@ my-video-thumbnail,
  }
 }
+.video-info-name {
+  @include ellipsis;
+  font-size: 18px;
+  font-weight: $font-semibold;
+  display: inline-block;
+}
+.video-info {
+  display: flex;
+  flex-direction: column;
+  align-self: flex-start;
+  min-width: 0;
+  .video-info-header {
+    display: flex;
+    align-items: baseline;
+    a {
+      width: auto;
+      padding-right: 5px;
+    }
+    .pt-badge {
+      @include margin-right(5px);
+    }
+  }
+  .video-info-account,
+  .video-info-timestamp {
+    color: pvar(--greyForegroundColor);
+  }
+}
+.video-info-account,
+.video-miniature-created-at-views {
+  font-size: 14px;
+}
 .dropdown-menu {
  .dropdown-item {
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
index 3956d9282..d43afad28 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
@@ -53,7 +53,7 @@
  .privacy-date {
    margin-top: 5px;
-    font-size: 13px;
+    font-size: 14px;
    .privacy {
      font-weight: $font-semibold;
diff --git a/client/src/assets/images/feather/external-link.svg b/client/src/assets/images/feather/external-link.svg
index 9ea666879..2165d6f5c 100644
--- a/client/src/assets/images/feather/external-link.svg
+++ b/client/src/assets/images/feather/external-link.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3"/></svg>
-\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3"/></svg>
diff --git a/client/src/assets/images/misc/tip.svg b/client/src/assets/images/misc/tip.svg
index 4b7d7543c..f99ed0a2b 100644
--- a/client/src/assets/images/misc/tip.svg
+++ b/client/src/assets/images/misc/tip.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><g><rect height="3" width="2" x="11" y="19"/><rect height="2" width="3" x="2" y="11"/><rect height="2" width="3" x="19" y="11"/><rect height="3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.6665 17.8014)" width="1.99" x="16.66" y="16.66"/><rect height="1.99" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -10.9791 9.8041)" width="3" x="4.85" y="17.16"/><path d="M15,8.02V3H9v5.02C7.79,8.94,7,10.37,7,12c0,2.76,2.24,5,5,5s5-2.24,5-5C17,10.37,16.21,8.94,15,8.02z M11,5h2v2.1 C12.68,7.04,12.34,7,12,7s-0.68,0.04-1,0.1V5z"/></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor" class="misc"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><g><rect height="3" width="2" x="11" y="19"/><rect height="2" width="3" x="2" y="11"/><rect height="2" width="3" x="19" y="11"/><rect height="3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.6665 17.8014)" width="1.99" x="16.66" y="16.66"/><rect height="1.99" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -10.9791 9.8041)" width="3" x="4.85" y="17.16"/><path d="M15,8.02V3H9v5.02C7.79,8.94,7,10.37,7,12c0,2.76,2.24,5,5,5s5-2.24,5-5C17,10.37,16.21,8.94,15,8.02z M11,5h2v2.1 C12.68,7.04,12.34,7,12,7s-0.68,0.04-1,0.1V5z"/></g></g></svg>
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 274f7b1ca..add01fb71 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -64,7 +64,7 @@ body {
  font-weight: $font-regular;
  color: pvar(--mainForegroundColor);
  background-color: pvar(--mainBackgroundColor);
-  font-size: 14px;
+  font-size: 1rem;
  // On desktop browsers, make sure vertical scroll bar is always visible
  // Allow to disable the scrollbar instead of hide it when the content fit the body
  // And not move the content and header horizontally sticked to right when the content is updating
@@ -114,7 +114,6 @@ button {
 label {
  font-weight: $font-bold;
-  font-size: 15px;
  margin-bottom: 0.5rem;
 }
@@ -200,10 +199,13 @@ table {
 }
 my-global-icon[iconName=external-link] {
-  margin: 0 3px;
+  margin: 0 0.3em;
-  width: 13px;
+  width: 0.9em;
-  vertical-align: text-bottom;
+  height: 0.9em;
+  display: inline-block;
  color: pvar(--inputPlaceholderColor);
+  position: relative;
+  top: -0.1em;
 }
 @media screen and (max-width: #{breakpoint(xxl)}) {
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 4d2fcf5b3..6a5d36639 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -42,7 +42,6 @@
 // ---------------------------------------------------------------------------
 .dropdown-menu {
-  font-size: 15px;
  color: pvar(--mainForegroundColor);
  background-color: pvar(--mainBackgroundColor);
@@ -74,6 +73,16 @@
 }
 // ---------------------------------------------------------------------------
+// Alert
+// ---------------------------------------------------------------------------
+.alert {
+  p:last-child {
+    margin-bottom: 0;
+  }
+}
+// ---------------------------------------------------------------------------
 // Modal
 // ---------------------------------------------------------------------------
@@ -115,18 +124,10 @@
    my-global-icon {
      @include icon(22px);
-      position: relative;
-      top: 5px;
-      float: right;
-      margin: 0;
-      padding: 0;
      opacity: 0.5;
-      &[iconName=cross] { /* stylelint-disable-line selector-max-compound-selectors */
+      &:hover {
-        @include icon(16px);
+        opacity: 0.8;
-        top: -3px;
      }
    }
  }
@@ -165,8 +166,6 @@
        opacity: 0.75;
        content: '';
        display: block;
-        position: fixed;
-        z-index: z(overlay);
      }
    }
  }
@@ -254,6 +253,11 @@
 // Buttons & form controls
 // ---------------------------------------------------------------------------
+.btn:not(.btn-sm) {
+  font-size: $button-font-size;
+  line-height: 1.2;
+}
 .btn-outline-secondary {
  border-color: $input-border-color;
@@ -294,7 +298,6 @@
 }
 .form-control {
-  font-size: 15px;
  color: pvar(--mainForegroundColor);
  background-color: pvar(--inputBackgroundColor);
  outline: none;
@@ -317,7 +320,6 @@
  }
  > .input-group-text {
-    font-size: 15px;
    line-height: normal;
    opacity: 0.9;
  }
@@ -333,8 +335,6 @@
 }
 .has-clear {
-  position: relative;
  input {
    @include padding-right(1.5rem !important);
  }
@@ -344,10 +344,10 @@
    display: flex;
    justify-content: center;
    align-items: center;
-    position: absolute;
-    right: .5rem;
    height: 95%;
    font-size: 14px;
+    position: absolute;
+    right: .5rem;
    &:hover {
      color: rgba(0, 0, 0, 0.7);
diff --git a/client/src/sass/class-helpers.scss b/client/src/sass/class-helpers.scss
index 42e41c96f..75e14ec09 100644
--- a/client/src/sass/class-helpers.scss
+++ b/client/src/sass/class-helpers.scss
@@ -6,7 +6,9 @@
 .link-orange {
  color: pvar(--mainForegroundColor);
  font-weight: $font-bold;
-  border-bottom: 0.20em solid pvar(--mainColor);
+  border-bottom: 0.19em solid pvar(--mainColor);
+  display: inline-block;
+  line-height: 1.2;
  &:hover {
    color: pvar(--mainForegroundColor);
@@ -16,7 +18,7 @@
 .underline-orange {
  display: inline-block;
-  border-bottom: 0.20em solid pvar(--mainColor);
+  border-bottom: 0.19em solid pvar(--mainColor);
 }
 // ---------------------------------------------------------------------------
@@ -84,7 +86,7 @@
 .form-group-description {
  @extend .muted !optional;
-  font-size: 90%;
+  font-size: 14px;
  margin-top: 10px;
 }
@@ -102,7 +104,6 @@ label + .form-group-description {
  opacity: 0.6;
  color: pvar(--mainForegroundColor);
-  font-size: 16px;
  display: inline-block;
  font-weight: $font-semibold;
  border-bottom: 2px solid transparent;
@@ -149,7 +150,7 @@ label + .form-group-description {
 .title-page-about,
 .title-page-settings {
  white-space: nowrap;
-  font-size: 115%;
+  font-size: 1rem;
 }
 .admin-sub-header {
@@ -172,7 +173,6 @@ label + .form-group-description {
  flex-direction: column;
  align-items: center;
  justify-content: center;
-  font-size: 16px;
  font-weight: $font-semibold;
 }
@@ -246,10 +246,6 @@ label + .form-group-description {
 // ---------------------------------------------------------------------------
 .alert {
-  p:last-child {
-    margin-bottom: 0;
-  }
  &.pt-alert-primary {
    background-color: pvar(--mainColorVeryLight);
    border: 2px solid pvar(--mainColorLightest);
diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss
index aa2331efe..bf73b52dc 100644
--- a/client/src/sass/include/_actor.scss
+++ b/client/src/sass/include/_actor.scss
@@ -36,18 +36,16 @@
  .actor-owner {
    @include disable-default-a-behaviour;
-    font-size: 13px;
    color: pvar(--mainForegroundColor);
+    display: flex;
+    align-items: center;
    span:hover {
      opacity: 0.8;
    }
    my-actor-avatar {
-      @include margin-left(7px);
+      @include margin-left(5px);
-      display: inline-block;
-      vertical-align: top;
    }
  }
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 565012717..1b460b723 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -94,7 +94,8 @@
  background-color: pvar(--inputBackgroundColor);
  border: 1px solid $input-border-color;
  border-radius: 3px;
-  font-size: 15px;
+  font-size: $form-input-font-size;
+  line-height: $form-input-line-height;
  &::placeholder {
    color: pvar(--inputPlaceholderColor);
@@ -116,7 +117,6 @@
  background-color: pvar(--textareaBackgroundColor) !important;
  height: $height;
  padding: 5px 15px;
-  font-size: 15px;
 }
 @mixin orange-button {
@@ -249,7 +249,6 @@
  border: 0;
  font-weight: $font-semibold;
-  font-size: 15px;
  height: $button-height;
  line-height: $button-height;
@@ -259,6 +258,8 @@
  text-align: center;
  cursor: pointer;
+  font-size: $button-font-size;
  my-global-icon + * {
    @include margin-right(4px);
  }
@@ -292,10 +293,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 +358,6 @@
  color: pvar(--inputForegroundColor);
  background: pvar(--inputBackgroundColor);
  position: relative;
-  font-size: 15px;
  height: min-content;
  &.disabled {
@@ -403,6 +399,8 @@
    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 +433,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 +450,6 @@
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
-    font-size: 15px;
    font-weight: $font-regular;
  }
@@ -540,7 +541,6 @@
  + span + span {
    @include margin-left(5px);
-    font-size: 15px;
    font-weight: $font-regular;
    cursor: pointer;
    display: inline;
@@ -563,7 +563,6 @@
 @mixin actor-counters ($separator-margin: 10px) {
  color: pvar(--greyForegroundColor);
-  font-size: 16px;
  display: flex;
  align-items: center;
@@ -585,7 +584,7 @@
  text-transform: uppercase;
  color: pvar(--mainColor);
  font-weight: $font-bold;
-  font-size: 110%;
+  font-size: 1rem;
  margin-bottom: 10px;
 }
@@ -675,11 +674,10 @@
 @mixin breadcrumb {
  display: flex;
  flex-wrap: wrap;
-  padding: 0.75rem 1rem;
+  padding: 0;
  margin-bottom: 1rem;
  list-style: none;
-  background-color: pvar(--submenuBackgroundColor);
+  font-weight: $font-semibold;
-  border-radius: 0.25rem;
  .breadcrumb-item {
    display: flex;
diff --git a/client/src/sass/include/_nav.scss b/client/src/sass/include/_nav.scss
index d069ac9ae..5fd32df45 100644
--- a/client/src/sass/include/_nav.scss
+++ b/client/src/sass/include/_nav.scss
@@ -20,7 +20,6 @@
    margin-bottom: -$border-width;
    height: $nav-link-height !important;
    padding: 0 30px !important;
-    font-size: 15px;
    border: $border-width $border-type transparent;
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 476a4ee52..3fe1f74a2 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -39,6 +39,7 @@ $grey-actor-name: #777272;
 $expanded-horizontal-margins: 150px;
 $not-expanded-horizontal-margins: 30px;
+$button-font-size: 15px;
 $button-height: 30px;
 $header-height: 50px;
@@ -97,6 +98,8 @@ $sub-menu-margin-bottom-small-view: 10px;
 $activated-action-button-color: #212529;
 $focus-box-shadow-form: 0 0 0 .2rem;
+$form-input-font-size: 15px;
+$form-input-line-height: 1.4;
 $video-watch-player-factor: math.div(16, 9);
 $video-watch-info-margin-left: 44px;
diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss
index b1b82b573..78e3a6de3 100644
--- a/client/src/sass/ng-select.scss
+++ b/client/src/sass/ng-select.scss
@@ -13,12 +13,13 @@ $ng-select-box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
 // $ng-select-placeholder: lighten($ng-select-primary-text, 40) !default;
 $ng-select-height: 30px;
 $ng-select-value-padding-left: 15px;
-$ng-select-value-font-size: 15px;
+$ng-select-value-font-size: $form-input-font-size;
 @import '~@ng-select/ng-select/scss/default.theme';
 .ng-select {
  font-size: $ng-select-value-font-size;
+  line-height: $form-input-line-height;
  &.ng-select-focused {
    &:not(.ng-select-opened) > .ng-select-container {
diff --git a/client/src/sass/player/playlist.scss b/client/src/sass/player/playlist.scss
index e1999709e..4419df242 100644
--- a/client/src/sass/player/playlist.scss
+++ b/client/src/sass/player/playlist.scss
@@ -82,7 +82,7 @@ $playlist-menu-width: 350px;
 }
 .vjs-playlist-button {
-  font-size: 15px;
+  font-size: 16px;
  position: absolute;
  right: 0;
  top: 0;
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 787fdbc88..061d626d8 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -476,7 +476,7 @@ p-table {
  td, th {
    font-family: $main-fonts;
-    font-size: 15px !important;
+    font-size: 15px;
    color: pvar(--mainForegroundColor) !important;
  }
@@ -890,7 +890,7 @@ p-toast {
        }
        p {
-          font-size: 15px;
+          font-size: 16px;
          margin-bottom: 0;
        }
      }
author	Chocobozzz <me@florianbigard.com>	2022-06-15 14:59:25 +0200
committer	Chocobozzz <me@florianbigard.com>	2022-06-16 11:37:08 +0200
commit	5b0ec7cddb1ae6dbd2057f067382866f846b882c (patch)
tree	5751d96ec4ab0d49b793c4ff1c8edbc8daeab6ac /client/src
parent	b13a0a48bacb53e65e665774e621326452045294 (diff)
download	PeerTube-5b0ec7cddb1ae6dbd2057f067382866f846b882c.tar.gz PeerTube-5b0ec7cddb1ae6dbd2057f067382866f846b882c.tar.zst PeerTube-5b0ec7cddb1ae6dbd2057f067382866f846b882c.zip