Increase global font size

5 files changed, 41 insertions, 46 deletions

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">
-        Manage <a routerLink="/admin/users">users</a> to set their quota individually.
+      <div i18n class="inner-form-description">
+        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>
-                  You should only use moderated search indexes in production, or <a href="https://framagit.org/framasoft/peertube/search-index">host your own</a>.
-                </span>
+                <div i18n>
+                  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>.
+                </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">
-          Manage <a routerLink="/admin/users">users</a> to build a moderation team.
+        <div i18row="inner-form-description">
+          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">
-                  Max simultaneous lives created on your instance <span class="muted">(-1 for "unlimited")</span>
-                </label>
+                <label i18n for="liveMaxInstanceLives">Max simultaneous lives created on your instance</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">
-                  Max simultaneous lives created per user <span class="muted">(-1 for "unlimited")</span>
-                </label>
+                <label i18n for="liveMaxUserLives">Max simultaneous lives created per user</label>
+                <span class="ms-2 small muted">(-1 for "unlimited")</span>
 
                 <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"