From 5b0ec7cddb1ae6dbd2057f067382866f846b882c Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 15 Jun 2022 14:59:25 +0200 Subject: [PATCH] Increase global font size --- .../about-instance.component.scss | 4 +- .../contact-admin-modal.component.scss | 1 - .../about-peertube.component.html | 21 +++--- .../about-peertube.component.scss | 16 +--- .../account-video-channels.component.scss | 6 -- .../edit-basic-configuration.component.html | 30 ++++---- .../edit-custom-config.component.scss | 12 +-- .../edit-instance-information.component.html | 4 +- .../edit-live-configuration.component.html | 15 ++-- .../edit-vod-transcoding.component.html | 26 +++---- .../followers-list.component.html | 2 +- .../users/user-edit/user-edit.component.scss | 5 -- .../plugin-search.component.scss | 2 - .../plugins/shared/plugin-card.component.scss | 1 - .../+admin/system/debug/debug.component.scss | 10 +-- client/src/app/+login/login.component.scss | 1 - .../video-channel-edit.component.html | 2 +- .../video-channel-edit.component.scss | 5 -- .../my-account-applications.component.scss | 5 -- .../my-account-notifications.component.scss | 6 -- .../my-account-change-email.component.html | 14 ++-- .../my-account-change-email.component.scss | 18 +---- .../my-account-change-password.component.scss | 7 +- ...nt-notification-preferences.component.html | 4 +- ...nt-notification-preferences.component.scss | 3 +- .../my-account-profile.component.html | 2 +- .../my-account-profile.component.scss | 5 -- .../my-account-settings.component.html | 1 - .../my-video-channels.component.html | 8 +- .../my-follows/my-followers.component.html | 2 +- .../my-follows/my-followers.component.scss | 4 - .../my-history/my-history.component.html | 2 +- .../my-history/my-history.component.scss | 5 +- .../my-history/my-history.component.ts | 8 ++ .../my-video-playlist-edit.component.scss | 5 -- .../app/+search/search-filters.component.scss | 1 - client/src/app/+search/search.component.scss | 1 - .../+signup/+register/register.component.scss | 9 --- .../video-caption-add-modal.component.scss | 5 -- .../shared/video-edit.component.scss | 13 ---- .../+video-edit/video-add.component.scss | 1 - .../comment/video-comment.component.scss | 1 - .../comment/video-comments.component.scss | 4 +- .../metadata/video-description.component.scss | 1 - .../+video-watch/video-watch.component.scss | 4 +- .../overview/video-overview.component.html | 6 +- .../overview/video-overview.component.scss | 61 +++------------- client/src/app/app.component.scss | 10 --- .../app/menu/language-chooser.component.scss | 1 - client/src/app/menu/menu.component.scss | 4 +- ...account-setup-warning-modal.component.scss | 2 - .../modal/admin-welcome-modal.component.scss | 6 -- client/src/app/modal/confirm.component.scss | 4 - .../src/app/modal/custom-modal.component.scss | 4 - ...stance-config-warning-modal.component.scss | 4 - .../abuse-message-modal.component.scss | 5 -- .../actor-avatar-edit.component.scss | 1 - .../actor-avatar.component.html | 4 +- .../actor-avatar.component.ts | 24 +++--- .../shared-forms/input-text.component.scss | 2 - .../markdown-textarea.component.scss | 1 - .../peertube-checkbox.component.html | 4 +- .../peertube-checkbox.component.scss | 14 +--- .../timestamp-input.component.scss | 1 - .../shared-icons/global-icon.component.scss | 5 ++ .../instance-about-accordion.component.scss | 1 - .../instance-features-table.component.scss | 1 - .../buttons/action-dropdown.component.html | 2 +- .../buttons/action-dropdown.component.ts | 2 +- .../shared-main/buttons/button.component.html | 6 +- .../shared-main/buttons/button.component.scss | 1 - .../shared-main/buttons/button.component.ts | 10 ++- .../buttons/edit-button.component.ts | 4 - .../channels-setup-message.component.scss | 34 ++++----- .../misc/simple-search-input.component.html | 10 +-- .../users/user-quota.component.scss | 5 -- .../account-blocklist.component.html | 2 +- .../server-blocklist.component.html | 2 +- .../user-ban-modal.component.scss | 1 - .../video-block.component.scss | 1 - .../video-share.component.scss | 5 +- .../user-interface-settings.component.scss | 5 -- .../user-video-settings.component.html | 2 +- .../user-video-settings.component.scss | 5 -- .../subscribe-button.component.html | 14 +--- .../subscribe-button.component.scss | 14 ++-- .../video-download.component.scss | 1 - .../video-filters-header.component.scss | 2 - .../video-miniature.component.scss | 4 + .../videos-list.component.scss | 2 +- .../video-add-to-playlist.component.html | 10 +-- .../video-add-to-playlist.component.scss | 45 ++++-------- ...-playlist-element-miniature.component.scss | 73 ++++++++++--------- .../video-playlist-miniature.component.scss | 2 +- .../assets/images/feather/external-link.svg | 2 +- client/src/assets/images/misc/tip.svg | 2 +- 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 +- 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 @@

- It is free and open-source software, under AGPLv3 + It is free and open-source software, under AGPLv3 licence.

- For more information, please visit joinpeertube.org. + For more information, please visit joinpeertube.org.

@@ -25,9 +25,8 @@
- Use PeerTube - documentation -
+ Use PeerTube documentation +
Discover how to setup your account, what is a channel, how to create a playlist and more! @@ -38,9 +37,8 @@
- PeerTube - Applications -
+ PeerTube Applications +
Discover unofficial Android applications or browser addons! @@ -51,9 +49,8 @@
- Contribute on - PeerTube -
+ Contribute on PeerTube +
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 this document for more information + See this document for more information 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 @@
APPEARANCE
- Use plugins & themes for more involved changes, or add slight customizations. + Use plugins & themes for more involved changes, or add slight customizations.
@@ -91,7 +91,7 @@
BROADCAST MESSAGE
-
+
Display a message on your instance
@@ -147,8 +147,8 @@
NEW USERS
-
- Manage users to set their quota individually. +
+ Manage users to set their quota individually.
@@ -185,7 +185,7 @@
{{ formErrors.signup.limit }}
- Signup won't be limited to a fixed number of users. + Signup won't be limited to a fixed number of users.
@@ -252,7 +252,7 @@
- allows to import multiple videos in parallel. ⚠️ Requires a PeerTube restart. + allows to import multiple videos in parallel. ⚠️ Requires a PeerTube restart.
@@ -268,7 +268,7 @@ i18n-labelText labelText="Allow import with HTTP URL (e.g. YouTube)" > - ⚠️ If enabled, we recommend to use a HTTP proxy to prevent private URL access from your PeerTube server + ⚠️ If enabled, we recommend to use a HTTP proxy to prevent private URL access from your PeerTube server
@@ -372,11 +372,11 @@ i18n-labelText labelText="Enable global search" > -

⚠️ This functionality depends heavily on the moderation of instances followed by the search index you select.

+
⚠️ This functionality depends heavily on the moderation of instances followed by the search index you select.
- - You should only use moderated search indexes in production, or host your own. - +
+ You should only use moderated search indexes in production, or host your own. +
@@ -424,7 +424,7 @@
FEDERATION
- Manage relations with other instances. + Manage relations with other instances.
@@ -472,10 +472,10 @@ i18n-labelText labelText="Automatically follow instances of a public index" > -

⚠️ This functionality requires a lot of attention and extra moderation.

+
⚠️ This functionality requires a lot of attention and extra moderation.
- See the documentation for more information about the expected URL + See the documentation for more information about the expected URL @@ -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.
If the instance is not, we use an image link card that will redirect to your PeerTube instance.

Check this checkbox, save the configuration and test with a video URL of your instance (https://example.com/w/blabla) on - https://cards-dev.twitter.com/validator + https://cards-dev.twitter.com/validator to see if you instance is allowed. 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 @@
MODERATION & NSFW
-
- Manage users to build a moderation team. +
+ Manage users to build a moderation team.
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 @@
- + + + (-1 for "unlimited")
@@ -59,9 +59,8 @@
- + + (-1 for "unlimited")
@@ -136,7 +135,7 @@
- + will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with VOD transcoding @@ -157,7 +156,7 @@
- new live transcoding profiles can be added by PeerTube plugins + new live transcoding profiles can be added by PeerTube plugins Estimating a server's capacity to transcode and stream videos isn't easy and we can't tune PeerTube automatically. + - However, you may want to read our guidelines before tweaking the following values. + However, you may want to read our guidelines before tweaking the following values. - -
- - Read guidelines - -
@@ -115,7 +110,11 @@
-
+
+ + The original file resolution will be the default target if no option is selected. + +
- - - The original file resolution will be the default target if no option is selected. -
@@ -142,7 +137,8 @@
- + + will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with live transcoding @@ -164,7 +160,7 @@
- allows to transcode multiple files in parallel. ⚠️ Requires a PeerTube restart + allows to transcode multiple files in parallel. ⚠️ Requires a PeerTube restart
@@ -176,7 +172,7 @@
- new transcoding profiles can be added by PeerTube plugins + new transcoding profiles can be added by PeerTube plugins - +
No follower found matching current filters. Your instance doesn't have any follower. 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 { - font-size: 15px; - - code { - 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 @@
-
Banner image of the channel
+ {{ error }}
{{ success }}
-
- Your current email is . - It is never shown to the public. -
-
- is awaiting email verification + {{ user.pendingEmail }} is awaiting email verification
+ + +
+ Your current email is {{ user.email }}. + It is never shown to the public. +
+ -
+
{{ group.label }}
Web
Email
-
+
{{ labelNotifications[notificationType] }}
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 > -
+
People can find you using @{{ user.username }}@{{ instanceHost }}
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 @@
- 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}} -
{videoChannel.videosCount, plural, =0 {No videos} =1 {1 video} other {{{ videoChannel.videosCount }} videos}}
- -
{videoChannel.totalViews, plural, =0 {No views} =1 {1 view} other {{{ videoChannel.totalViews }} views}}
+
+ {videoChannel.videosCount, plural, =0 {No videos} =1 {1 video} other {{{ videoChannel.videosCount }} videos}} + · + {videoChannel.totalViews, plural, =0 {No views} =1 {1 view} other {{{ videoChannel.totalViews | myNumberFormatter }} views}} +
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 @@ -
+
Is following all your channels Is following your channel {{ follow.following.name }}
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 @@

- {{ object.category.label }} + {{ object.category.label }}

@@ -21,7 +21,7 @@

- #{{ object.tag }} + #{{ object.tag }}

@@ -32,7 +32,7 @@
- +

{{ object.channel.displayName }}

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: 15px; - margin-bottom: 15px; - display: flex; - justify-content: space-between; + padding-top: 20px; + margin-bottom: 30px; &:not(h2) { border-top: 1px solid $separator-border-color; } - a { - color: pvar(--mainForegroundColor); - - &:hover, - &:focus:not(.focus-visible), - &:active { - text-decoration: none; - outline: none; - } + a > h2 { + margin-bottom: 0; + display: inline-block; + font-weight: $font-bold; } - } - - &.channel { - .section-title { - a { - display: flex; - width: fit-content; - align-items: center; - - my-actor-avatar { - @include margin-right(8px); - - font-size: initial; - } - } - .followers { - @include margin-left(10px); + my-actor-avatar { + @include margin-right(8px); - color: pvar(--greyForegroundColor); - font-weight: normal; - font-size: 14px; - position: relative; - top: 2px; - } + 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 @@ - + -
+
{{ initial }}
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') { - const base = [ 'avatar' ] + ngOnChanges () { + 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') - else base.push('account') + if (this.channel) this.classes.push('channel') + else this.classes.push('account') - if (type === 'initial' && this.initial) { - base.push('initial') - base.push(this.getColorTheme()) + if (!this.avatarUrl && this.initial) { + this.classes.push('initial') + 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 @@
- +
- +
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; - - .label-text { - font-weight: $font-regular; - margin: 0; - } + font-size: $form-input-font-size; input { @include peertube-checkbox(1px); @@ -23,12 +18,11 @@ } my-help { - position: relative; - top: 2px; + line-height: 17px; } - small { - font-size: 90%; + .form-group-description { + 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 @@
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 { 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 @@ - +
- +
- + 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 () { - return { + classes: { [id: string]: boolean } = {} + + 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 { // 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 { - width: 32px; - align-self: flex-start; +my-global-icon { + @include apply-svg-color(pvar(--mainColor)); - ::ng-deep { - svg { - fill: #0c5460; - } - } + width: 32px; + align-self: flex-start; - + div { - margin-left: 10px; - text-align: center; + + div { + margin-left: 10px; + text-align: center; + } +} - a.channels-settings-link { - @include peertube-button-link; - @include grey-button; +.channels-settings-link { + @include peertube-button-link; + @include grey-button; - height: fit-content; - margin-top: 10px; - } - } - } + height: fit-content; + 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 @@
- 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 @@ - +
No account found matching current filters. No account found. 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 @@ - +
No server found matching current filters. No server found. 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" > - The sharing system 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. + The sharing system 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.
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 @@
@@ -20,17 +20,11 @@ - - @@ -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 > -
-
-
Start at
-
Stop at
-
+
Start at
+
Stop at
-
+ -
+
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, -.optional-rows > div { +.primary-row { 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 { - padding: 8px 5px 5px 10px; - } + display: grid; + grid-template-columns: 35px 80px 80px; + row-gap: 3px; + column-gap: 10px; + align-items: center; my-peertube-checkbox { - @include margin-right(0 !important); - - display: block; - width: $optional-rows-checkbox-width; + @include margin-left(auto); } - .labels { - @include margin-left($optional-rows-checkbox-width); - + .header-label { font-size: 13px; color: pvar(--greyForegroundColor); - padding-top: 5px; - padding-bottom: 0; + padding-left: 2px; - div { - @include margin-right($timestamp-margin-right); + &:nth-child(1) { + 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 @@ - \ No newline at end of file + 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 @@ - + 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; } } -- 2.41.0