From 5b0ec7cddb1ae6dbd2057f067382866f846b882c Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 15 Jun 2022 14:59:25 +0200 Subject: Increase global font size --- client/src/sass/application.scss | 12 ++++++----- client/src/sass/bootstrap.scss | 38 ++++++++++++++++----------------- client/src/sass/class-helpers.scss | 16 ++++++-------- client/src/sass/include/_actor.scss | 8 +++---- client/src/sass/include/_mixins.scss | 28 +++++++++++------------- client/src/sass/include/_nav.scss | 1 - client/src/sass/include/_variables.scss | 3 +++ client/src/sass/ng-select.scss | 3 ++- client/src/sass/player/playlist.scss | 2 +- client/src/sass/primeng-custom.scss | 4 ++-- 10 files changed, 56 insertions(+), 59 deletions(-) (limited to 'client/src/sass') 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); @@ -73,6 +72,16 @@ margin: 0.3rem 0; } +// --------------------------------------------------------------------------- +// 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; } } -- cgit v1.2.3