Increase global font size

10 files changed, 56 insertions, 59 deletions

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;
-  width: 13px;
-  vertical-align: text-bottom;
+  margin: 0 0.3em;
+  width: 0.9em;
+  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 */
-        @include icon(16px);
-
-        top: -3px;
+      &:hover {
+        opacity: 0.8;
       }
     }
   }
@@ -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);
-
-      display: inline-block;
-      vertical-align: top;
+      @include margin-left(5px);
     }
   }
 
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);
-  border-radius: 0.25rem;
+  font-weight: $font-semibold;
 
   .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;
         }
       }