From 482fa503e545e00252e25eee7b3e0f7d421cf9d4 Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Sun, 8 Mar 2020 17:33:40 +0100 Subject: Use grid to organise settings in admin, my-account --- client/src/app/+about/about.component.html | 6 +- client/src/app/+admin/admin.component.html | 2 +- .../edit-custom-config.component.html | 1158 +++++++++++--------- .../edit-custom-config.component.scss | 43 +- .../+admin/plugins/shared/toggle-plugin-type.scss | 14 + .../my-account-change-email.component.scss | 7 +- .../my-account-change-password.component.scss | 5 + .../my-account-danger-zone.component.html | 2 +- .../my-account-interface-settings.component.scss | 5 + .../my-account-profile.component.html | 2 +- .../my-account-profile.component.scss | 16 +- .../my-account-settings.component.html | 93 +- .../my-account-settings.component.scss | 8 +- .../my-account-video-settings.component.scss | 5 + .../shared/actor-avatar-info.component.ts | 2 +- .../shared/forms/markdown-textarea.component.scss | 2 + .../shared/menu/top-menu-dropdown.component.html | 4 +- client/src/sass/application.scss | 10 + client/src/sass/bootstrap.scss | 2 +- client/src/sass/include/_mixins.scss | 8 + 20 files changed, 808 insertions(+), 586 deletions(-) (limited to 'client/src') diff --git a/client/src/app/+about/about.component.html b/client/src/app/+about/about.component.html index 0c4a5156d..da16b933d 100644 --- a/client/src/app/+about/about.component.html +++ b/client/src/app/+about/about.component.html @@ -2,11 +2,11 @@
- Instance + Instance - PeerTube + PeerTube - Follows + Follows
diff --git a/client/src/app/+admin/admin.component.html b/client/src/app/+admin/admin.component.html index 6c98fe453..76d297c52 100644 --- a/client/src/app/+admin/admin.component.html +++ b/client/src/app/+admin/admin.component.html @@ -1,7 +1,7 @@
- {{ item.label }} + {{ item.label }} diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html index 2cf0e5fd9..77e857d6b 100644 --- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html +++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html @@ -7,185 +7,217 @@ -
INSTANCE
- -
- - -
{{ formErrors.instance.name }}
-
+
+
+
INSTANCE
+
-
- - -
{{ formErrors.instance.shortDescription }}
-
+
-
- - -
{{ formErrors.instance.description }}
-
+
+ + +
{{ formErrors.instance.name }}
+
-
- +
+ + +
{{ formErrors.instance.shortDescription }}
+
-
- -
-
+
+ + +
{{ formErrors.instance.description }}
+
-
- +
+ + +
+ +
+
+ +
+ + +
+ +
+
-
-
-
MODERATION & NSFW
+
+
+
MODERATION & NSFW
+
-
- - - This instance is dedicated to sensitive or NSFW content - +
- - - Enabling it will allow other administrators to know that you are mainly federating sensitive content.

- Moreover, the NSFW checkbox on video upload will be automatically checked by default. - - - -
+
+ + + This instance is dedicated to sensitive or NSFW content + -
- + + + Enabling it will allow other administrators to know that you are mainly federating sensitive content.

+ Moreover, the NSFW checkbox on video upload will be automatically checked by default. + + + +
- - - - With Do not list or Blur thumbnails, a confirmation will be requested to watch the video. - - - - -
- -
-
{{ formErrors.instance.defaultNSFWPolicy }}
-
+
+ -
- - -
{{ formErrors.instance.terms }}
-
+ + + + With Do not list or Blur thumbnails, a confirmation will be requested to watch the video. + + + + +
+ +
+
{{ formErrors.instance.defaultNSFWPolicy }}
+
-
- - -
{{ formErrors.instance.codeOfConduct }}
-
+
+ + +
{{ formErrors.instance.terms }}
+
-
- -
Who moderates the instance? What is the policy regarding NSFW videos? Political videos? etc
+
+ + +
{{ formErrors.instance.codeOfConduct }}
+
- -
{{ formErrors.instance.moderationInformation }}
+
+ +
Who moderates the instance? What is the policy regarding NSFW videos? Political videos? etc
+ + +
{{ formErrors.instance.moderationInformation }}
+
+ +
-
YOU AND YOUR INSTANCE
+
+
+
YOU AND YOUR INSTANCE
+
-
- -
A single person? A non-profit? A company?
+
- +
+ +
A single person? A non-profit? A company?
-
{{ formErrors.instance.administrator }}
-
+ -
- -
To share your personal videos? To open registrations and allow people to upload what they want?
+
{{ formErrors.instance.administrator }}
+
- -
{{ formErrors.instance.creationReason }}
-
+
+ +
To share your personal videos? To open registrations and allow people to upload what they want?
+ + +
{{ formErrors.instance.creationReason }}
+
-
- -
It's important to know for users who want to register on your instance
+
+ +
It's important to know for users who want to register on your instance
+ + +
{{ formErrors.instance.maintenanceLifetime }}
+
+ +
+ +
With your own funds? With user donations? Advertising?
+ + +
{{ formErrors.instance.businessModel }}
+
- -
{{ formErrors.instance.maintenanceLifetime }}
+
-
- -
With your own funds? With users donations? Advertising?
+
+
+
OTHER INFORMATION
+
- -
{{ formErrors.instance.businessModel }}
-
+
-
OTHER INFORMATION
+
+ +
2vCore 2GB RAM/or directly the link to the server you rent etc
-
- -
2vCore 2GB RAM/or directly the link to the server you rent etc
+ - +
{{ formErrors.instance.hardwareInformation }}
+
-
{{ formErrors.instance.hardwareInformation }}
+
@@ -195,226 +227,254 @@ -
THEME AND DEFAULT ROUTE
- - -
- - -
- -
+
+
+
APPEARANCE
- +
-
- -
- -
-
{{ formErrors.instance.defaultClientRoute }}
-
+ +
+ -
SIGNUP
+
+ -
{{ formErrors.signup.limit }}
- Signup won't be limited to a fixed number of users. + +
- - -
- - - -
USERS
+
+ - -
- -
- +
+ +
+ +
+
{{ formErrors.instance.defaultClientRoute }}
-
{{ formErrors.user.videoQuota }}
+
+
-
- -
- -
-
{{ formErrors.user.videoQuotaDaily }}
+
+
+
NEW USERS
- +
-
IMPORT
+ +
+ + + ⚠️ This functionality requires a lot of attention and extra moderation. + + + - - +
+ + +
{{ formErrors.signup.limit }}
+ Signup won't be limited to a fixed number of users. +
+ + +
+ -
- -
+ +
+ +
+ +
+
{{ formErrors.user.videoQuota }}
+
-
- -
+
+ +
+ +
+
{{ formErrors.user.videoQuotaDaily }}
+
+ - - +
+
+
+
+
NEW VIDEOS
+
-
AUTO-BLACKLIST
+
- - - + + + +
+ +
-
- - - Unless a user is marked as trusted, their videos will stay private until a moderator reviews them. - - -
+
+ +
+ - - - -
INSTANCE FOLLOWERS
+ + + + +
+ + + Unless a user is marked as trusted, their videos will stay private until a moderator reviews them. + + +
+ + + + - - +
+
-
- -
+
+
+
FEDERATION
+
-
- -
- - +
-
INSTANCE FOLLOWINGS
+ + - - +
+ +
- -
- - - ⚠️ This functionality requires a lot of attention and extra moderation. - - -
+
+ +
+ - -
- - - ⚠️ This functionality requires a lot of attention and extra moderation. - + + + + +
+ + + ⚠️ This functionality requires a lot of attention and extra moderation. + + +
+ - -
- - -
{{ formErrors.followings.instance.autoFollowIndex.indexUrl }}
-
- - -
+ +
+ + + ⚠️ This functionality requires a lot of attention and extra moderation. + + + +
+ + +
{{ formErrors.followings.instance.autoFollowIndex.indexUrl }}
+
+ + +
+ + - - +
+
+ +
+
+
ADMINISTRATORS
+
-
ADMINISTRATORS
+
-
- - -
{{ formErrors.admin.email }}
-
+
+ + +
{{ formErrors.admin.email }}
+
+ +
+ +
-
- +
@@ -422,47 +482,56 @@ -
TWITTER
- - +
+
+
TWITTER
+
-
- +
- - - Indicates the Twitter account for the website or platform on which the content was published. - - + + - -
{{ formErrors.services.twitter.username }}
-
+
+ -
- - - Instance whitelisted by Twitter - + + + Indicates the Twitter account for the website or platform on which the content was published. + + - - - If your instance is whitelisted by Twitter, a video player will be embedded in the Twitter feed on PeerTube video share.
- If the instance is not whitelisted, we use an image link card that will redirect on your PeerTube instance.

- Check this checkbox, save the configuration and test with a video URL of your instance (https://example.com/videos/watch/blabla) on - https://cards-dev.twitter.com/validator - to see if you instance is whitelisted. - - - -
+ +
{{ formErrors.services.twitter.username }}
+
- - +
+ + + Instance whitelisted by Twitter + + + + + If your instance is whitelisted by Twitter, a video player will be embedded in the Twitter feed on PeerTube video share.
+ If the instance is not whitelisted, we use an image link card that will redirect on your PeerTube instance.

+ Check this checkbox, save the configuration and test with a video URL of your instance (https://example.com/videos/watch/blabla) on + https://cards-dev.twitter.com/validator + to see if you instance is whitelisted. + + + +
+ + + + +
+
@@ -470,206 +539,235 @@ -
TRANSCODING
- - -
- - - Transcoding enabled - - - - If you disable transcoding, many videos from your users will not work! - - +
+
+
TRANSCODING
- +
-
- - - Allow your users to upload .mkv, .mov, .avi and .flv videos - - -
- -
- - - Allow your users to upload audio files that will be merged with the preview file on upload - - -
+ - -
- +
+ + + Transcoding enabled + + - - Experimental, we suggest you to not disable webtorrent support for now + If you disable transcoding, many videos from your users will not work! + -

If you also enabled HLS support, it will multiply videos storage by 2

+ -
+
+ + + Allow your users to upload .mkv, .mov, .avi and .flv videos + + +
+ +
+ + + Allow your users to upload audio files that will be merged with the preview file on upload + + +
- If disabled, breaks federation with PeerTube instances < 2.1 + +
+ + + + Experimental, we suggest you to not disable webtorrent support for now + +

If you also enabled HLS support, it will multiply videos storage by 2

+ +
+ + If disabled, breaks federation with PeerTube instances < 2.1 + + + +
- + + +
+ + + + Requires ffmpeg >= 4.1 + +

Generate HLS playlists and fragmented MP4 files resulting in a better playback than with the current default player:

+
    +
  • Resolution change is smoother
    • +
  • Faster playback in particular with long videos
    • +
  • More stable playback (less bugs/infinite loading)
    • +
+ +

If you also enabled WebTorrent support, it will multiply videos storage by 2

+ + + +
+ + +
+ +
+ +
+
{{ formErrors.transcoding.threads }}
+
+ + +
+ + +
+ + +
+ + +
+ - -
- - - - Requires ffmpeg >= 4.1 +
+
-

Generate HLS playlists and fragmented MP4 files resulting in a better playback than with the current default player:

-
    -
  • Resolution change is smoother
    • -
  • Faster playback in particular with long videos
    • -
  • More stable playback (less bugs/infinite loading)
    • -
+
+
+
+ CACHE + + + Some files are not federated (previews, captions). We fetch them directly from the origin instance and cache them. + + +
+
-

If you also enabled WebTorrent support, it will multiply videos storage by 2

- - - -
- +
-
- -
- + +
+ + +
{{ formErrors.cache.previews.size }}
-
{{ formErrors.transcoding.threads }}
-
- -
- + + - -
- - +
{{ formErrors.cache.captions.size }}
 - - - -
- CACHE - - - - Some files are not federated (previews, captions). We fetch them directly from the origin instance and cache them. - - -
- - -
- - -
{{ formErrors.cache.previews.size }}
+
-
- - -
{{ formErrors.cache.captions.size }}
+
+
+
CUSTOMIZATIONS
- -
CUSTOMIZATIONS
- - - -
- - - - - Write JavaScript code directly.
Example: 
console.log('my instance is amazing');
- - - - - - -
{{ formErrors.instance.customizations.javascript }}
-
- -
- +
+ + + +
+ + + + + Write JavaScript code directly.
Example: 
console.log('my instance is amazing');
+ + + + + + +
{{ formErrors.instance.customizations.javascript }}
+
- - - - Write CSS code directly. Example:

-
-#custom-css {{ '{' }}
-  color: red;
-{{ '}' }}
-
- - Prepend with #custom-css to override styles. Example:

-
-#custom-css .logged-in-email {{ '{' }}
-  color: red;
-{{ '}' }}
-
- - - +
+ + + + + + Write CSS code directly. Example:

+ 
+    #custom-css {{ '{' }}
+      color: red;
+    {{ '}' }}
+
+ Prepend with #custom-css to override styles. Example:

+ 
+    #custom-css .logged-in-email {{ '{' }}
+      color: red;
+    {{ '}' }}
+
+ + + + + +
{{ formErrors.instance.customizations.css }}
+
+ + - -
{{ formErrors.instance.customizations.css }}
-
- - +
+
- - It seems like the configuration is invalid. Please search for potential errors in the different tabs. +
+
+
+ + It seems like the configuration is invalid. Please search for potential errors in the different tabs. +
+
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 dd70f1c06..8b1cdcbba 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 @@ -1,12 +1,19 @@ @import '_variables'; @import '_mixins'; -.form-group { - margin-bottom: 25px; +$form-base-input-width: 340px; + +label { + font-weight: $font-regular; + font-size: 100%; +} + +form { + padding-bottom: 1.5rem; } input[type=text] { - @include peertube-input-text(340px); + @include peertube-input-text($form-base-input-width); display: block; } @@ -20,14 +27,15 @@ input[type=checkbox] { } .peertube-select-container { - @include peertube-select-container(340px); + @include peertube-select-container($form-base-input-width); } input[type=submit] { @include peertube-button; @include orange-button; - margin-top: 20px; + display: flex; + margin-left: auto; & + .form-error { display: inline; @@ -36,12 +44,7 @@ input[type=submit] { } .inner-form-title { - text-transform: uppercase; - color: var(--mainColor); - font-weight: $font-bold; - font-size: 13px; - margin-top: 30px; - margin-bottom: 10px; + @include settings-big-title; } textarea { @@ -63,3 +66,21 @@ textarea { opacity: .5; pointer-events: none; } + +my-markdown-textarea ::ng-deep { + .root { + @media screen and (max-width: 1400px) { + flex-direction: column !important; + } + } +} + +.form-group-right { + padding-top: 2px; +} + +ngb-tabset:not(.previews) ::ng-deep { + .nav-link { + font-size: 105%; + } +} \ No newline at end of file diff --git a/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss b/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss index 3d3b6dd12..56ea91d0b 100644 --- a/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss +++ b/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss @@ -13,9 +13,23 @@ font-weight: 600; } + .ui-button.ui-state-default { + background-color: #f0f0f0; + border: 1px solid #f0f0f0; + } + .ui-button.ui-state-active { background-color: var(--mainColor); border-color: var(--mainColor); + + &:hover { + background-color: var(--mainHoverColor); + border-color: var(--mainHoverColor); + } + } + + .ui-button:not(.ui-state-active).ui-state-focus { + box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2); } } } diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss index 81eba3ec9..aec709ea0 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss +++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss @@ -1,6 +1,11 @@ @import '_variables'; @import '_mixins'; +label { + font-weight: $font-regular; + font-size: 100%; +} + input[type=password], input[type=email] { @include peertube-input-text(340px); @@ -16,7 +21,7 @@ input[type=submit] { .current-email, .pending-email { font-size: 16px; - margin: 15px 0; + margin-bottom: 15px; .email { font-weight: $font-semibold; diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss index e641482f0..381afae07 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss +++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss @@ -1,6 +1,11 @@ @import '_variables'; @import '_mixins'; +label { + font-weight: $font-regular; + font-size: 100%; +} + input[type=password] { @include peertube-input-text(340px); display: block; diff --git a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.html b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.html index c542cc675..dd9b56585 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.html +++ b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.html @@ -1,5 +1,5 @@
-

Once you delete your account, there is no going back. Please be certain.

+

Once you delete your account, there is no going back.

\ No newline at end of file diff --git a/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.scss b/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.scss index 629f01733..7818dfc02 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.scss +++ b/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.scss @@ -1,6 +1,11 @@ @import '_variables'; @import '_mixins'; +label { + font-weight: $font-regular; + font-size: 100%; +} + input[type=submit] { @include peertube-button; @include orange-button; 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 05c0b5ddc..14e51f57c 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 @@ -24,5 +24,5 @@
- + 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 6aabb60f4..2f8df81d4 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,6 +1,11 @@ @import '_variables'; @import '_mixins'; +label { + font-weight: $font-regular; + font-size: 100%; +} + .form-group:first-child { margin-bottom: 15px; } @@ -11,12 +16,6 @@ input[type=text] { display: block; } -textarea { - @include peertube-textarea(500px, 150px); - - display: block; -} - input[type=submit] { @include peertube-button; @include orange-button; @@ -24,3 +23,8 @@ input[type=submit] { margin-top: 15px; } +textarea { + @include peertube-textarea(500px, 150px); + + display: block; +} 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 9f187b574..164afb4ea 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 @@ -1,34 +1,83 @@ - +
+
+ +
+ +
+ + +
+
+ + {{ userVideoQuotaUsed | bytes: 0 }} used / {{ userVideoQuota }} +
+ +
+ + {{ userVideoQuotaUsedDaily | bytes: 0 }} used / {{ userVideoQuotaDaily }} +
+
+ + +
+
-
-
- Total video quota: - {{ userVideoQuotaUsed | bytes: 0 }} used / {{ userVideoQuota }} +
+
+
-
- Daily video quota: - {{ userVideoQuotaUsedDaily | bytes: 0 }} used / {{ userVideoQuotaDaily }} +
+
- - +
+
+ +
- - +
+ +
+
- - +
+
+ +
- - +
+ +
+
- - +
+
+ +
+ +
+ +
+
+ +
+
+ +
- - +
+ +
+
+ +
+
+ +
- - +
+ +
+
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss index d0395aca9..7eb60c7fb 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss +++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss @@ -5,15 +5,11 @@ font-size: 15px; margin-top: 20px; - .user-quota-label { + label { margin-right: 5px; - font-weight: $font-semibold; } } .account-title { - @include in-content-small-title; - - margin-top: 55px; - margin-bottom: 30px; + @include settings-big-title; } diff --git a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss index 1881be762..56cef0398 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss +++ b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss @@ -1,6 +1,11 @@ @import '_variables'; @import '_mixins'; +label { + font-weight: $font-regular; + font-size: 100%; +} + input[type=submit] { @include peertube-button; @include orange-button; diff --git a/client/src/app/+my-account/shared/actor-avatar-info.component.ts b/client/src/app/+my-account/shared/actor-avatar-info.component.ts index 8e034bb82..eb198587d 100644 --- a/client/src/app/+my-account/shared/actor-avatar-info.component.ts +++ b/client/src/app/+my-account/shared/actor-avatar-info.component.ts @@ -48,6 +48,6 @@ export class ActorAvatarInfoComponent implements OnInit { } get avatarExtensions () { - return this.serverConfig.avatar.file.extensions.join(',') + return this.serverConfig.avatar.file.extensions.join(', ') } } diff --git a/client/src/app/shared/forms/markdown-textarea.component.scss b/client/src/app/shared/forms/markdown-textarea.component.scss index eacaf36a2..bd02343de 100644 --- a/client/src/app/shared/forms/markdown-textarea.component.scss +++ b/client/src/app/shared/forms/markdown-textarea.component.scss @@ -22,6 +22,8 @@ align-items: center; height: 30px !important; padding: 0 15px !important; + font-size: 85% !important; + opacity: .7; } .tab-content { diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.html b/client/src/app/shared/menu/top-menu-dropdown.component.html index 35511ee62..3087b2e98 100644 --- a/client/src/app/shared/menu/top-menu-dropdown.component.html +++ b/client/src/app/shared/menu/top-menu-dropdown.component.html @@ -1,12 +1,12 @@
- {{ menuEntry.label }} + {{ menuEntry.label }}
{{ menuEntry.label }} - {{ suffixLabels[menuEntry.label] }} diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 046368c8b..a9475e484 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -174,6 +174,16 @@ label { } } +.title-page-about, +.title-page-settings { + font-size: 115%; + font-weight: $font-regular; + + &.active { + font-weight: $font-semibold; + } +} + .admin-sub-header { display: flex; align-items: center; diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss index f718791eb..5c1ce1028 100644 --- a/client/src/sass/bootstrap.scss +++ b/client/src/sass/bootstrap.scss @@ -175,10 +175,10 @@ ngb-tabset { .nav-tabs .nav-link { &:not(.active) { - opacity: .6; border-bottom: 3px solid transparent; } &.active { + font-weight: $font-semibold; background-color: var(--mainBackgroundColor) !important; border: none; border-bottom: 2px solid var(--mainColor); diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 9a8d0073a..0a500b6f3 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -463,6 +463,14 @@ font-size: 13px; } +@mixin settings-big-title { + text-transform: uppercase; + color: var(--mainColor); + font-weight: $font-bold; + font-size: 110%; + margin-bottom: 10px; +} + @mixin actor-owner { @include disable-default-a-behaviour; -- cgit v1.2.3