Increase global font size

This commit is contained in:
Chocobozzz 2022-06-15 14:59:25 +02:00
parent b13a0a48ba
commit 5b0ec7cddb
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
106 changed files with 305 additions and 549 deletions

View File

@ -20,7 +20,6 @@
.instance-badges { .instance-badges {
margin-bottom: 20px; margin-bottom: 20px;
font-size: 16px;
.pt-badge { .pt-badge {
@include margin-right(5px); @include margin-right(5px);
@ -29,10 +28,10 @@
.section-title { .section-title {
font-weight: $font-semibold; font-weight: $font-semibold;
font-size: 16px;
margin-bottom: 5px; margin-bottom: 5px;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 1rem;
} }
.middle-title { .middle-title {
@ -44,7 +43,6 @@
.block { .block {
margin-bottom: 75px; margin-bottom: 75px;
font-size: 15px;
} }
.short-description { .short-description {

View File

@ -2,7 +2,6 @@
@use '_mixins' as *; @use '_mixins' as *;
.modal-subtitle { .modal-subtitle {
font-size: 16px;
line-height: 1rem; line-height: 1rem;
margin-bottom: 0; margin-bottom: 0;
} }

View File

@ -11,12 +11,12 @@
</p> </p>
<p i18n> <p i18n>
It is free and open-source software, under <a href="https://github.com/Chocobozzz/PeerTube/blob/develop/LICENSE">AGPLv3 It is free and open-source software, under <a class="link-orange" href="https://github.com/Chocobozzz/PeerTube/blob/develop/LICENSE">AGPLv3
licence</a>. licence</a>.
</p> </p>
<p i18n> <p i18n>
For more information, please visit <a target="_blank" rel="noopener noreferrer" href="https://joinpeertube.org">joinpeertube.org</a>. For more information, please visit <a class="link-orange" target="_blank" rel="noopener noreferrer" href="https://joinpeertube.org">joinpeertube.org</a>.
</p> </p>
</div> </div>
@ -25,9 +25,8 @@
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<div class="card-title"> <div class="card-title">
<a i18n target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/use-setup-account">Use PeerTube <a i18n class="link-orange" target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/use-setup-account">Use PeerTube documentation</a>
documentation</a> </div>
</div>
<div i18n class="card-text"> <div i18n class="card-text">
Discover how to setup your account, what is a channel, how to create a playlist and more! Discover how to setup your account, what is a channel, how to create a playlist and more!
@ -38,9 +37,8 @@
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<div class="card-title"> <div class="card-title">
<a i18n target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/use-third-party-application">PeerTube <a i18n class="link-orange" target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/use-third-party-application">PeerTube Applications</a>
Applications</a> </div>
</div>
<div i18n class="card-text"> <div i18n class="card-text">
Discover unofficial Android applications or browser addons! Discover unofficial Android applications or browser addons!
@ -51,9 +49,8 @@
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<div class="card-title"> <div class="card-title">
<a i18n target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/contribute-getting-started">Contribute on <a i18n class="link-orange" target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/contribute-getting-started">Contribute on PeerTube</a>
PeerTube</a> </div>
</div>
<div i18n class="card-text"> <div i18n class="card-text">
Want to help to improve PeerTube? You can translate the web interface, give your feedback or directly contribute to the code! 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. 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 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. to forward the information to.
See <a href="https://github.com/yciabaud/webtorrent/blob/beps/bep_webrtc.rst">this document</a> for more information See <a class="link-orange" href="https://github.com/yciabaud/webtorrent/blob/beps/bep_webrtc.rst">this document</a> for more information
</li> </li>
</ul> </ul>

View File

@ -37,18 +37,6 @@
.card { .card {
margin: 30px; margin: 30px;
flex-basis: 300px; 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 { .card-title {
font-size: 1.25rem; font-size: 1.1rem;
text-align: center;
margin-bottom: 1rem;
} }
.p2p-privacy-title { .p2p-privacy-title {

View File

@ -65,7 +65,6 @@
grid-row: 2; grid-row: 2;
max-height: 80px; max-height: 80px;
font-size: 16px;
} }
} }
@ -105,7 +104,6 @@ my-subscribe-button {
a { a {
color: pvar(--mainColor); color: pvar(--mainColor);
font-size: 16px;
font-weight: $font-semibold; font-weight: $font-semibold;
} }
} }
@ -126,10 +124,6 @@ my-subscribe-button {
grid-row: 1 / 4; grid-row: 1 / 4;
} }
h2 {
font-size: 16px;
}
.actor-counters { .actor-counters {
margin: 0; margin: 0;
font-size: 13px; font-size: 13px;

View File

@ -3,7 +3,7 @@
<div class="col-12 col-lg-4 col-xl-3"> <div class="col-12 col-lg-4 col-xl-3">
<div i18n class="inner-form-title">APPEARANCE</div> <div i18n class="inner-form-title">APPEARANCE</div>
<div i18n class="inner-form-description"> <div i18n class="inner-form-description">
Use <a routerLink="/admin/plugins">plugins & themes</a> for more involved changes, or <a routerLink="/admin/config/edit-custom" fragment="advanced-configuration">add slight customizations</a>. Use <a class="link-orange" routerLink="/admin/plugins">plugins & themes</a> for more involved changes, or add slight <a class="link-orange" routerLink="/admin/config/edit-custom" fragment="advanced-configuration">customizations</a>.
</div> </div>
</div> </div>
@ -91,7 +91,7 @@
<div class="row mt-4"> <!-- broadcast grid --> <div class="row mt-4"> <!-- broadcast grid -->
<div class="col-12 col-lg-4 col-xl-3"> <div class="col-12 col-lg-4 col-xl-3">
<div i18n class="inner-form-title">BROADCAST MESSAGE</div> <div i18n class="inner-form-title">BROADCAST MESSAGE</div>
<div i18n class="inner-for-description"> <div i18n class="inner-form-description">
Display a message on your instance Display a message on your instance
</div> </div>
</div> </div>
@ -147,8 +147,8 @@
<div class="row mt-4"> <!-- new users grid --> <div class="row mt-4"> <!-- new users grid -->
<div class="col-12 col-lg-4 col-xl-3"> <div class="col-12 col-lg-4 col-xl-3">
<div i18n class="inner-form-title">NEW USERS</div> <div i18n class="inner-form-title">NEW USERS</div>
<div i18n class="inner-for-description"> <div i18n class="inner-form-description">
Manage <a routerLink="/admin/users">users</a> to set their quota individually. Manage <a class="link-orange" routerLink="/admin/users">users</a> to set their quota individually.
</div> </div>
</div> </div>
@ -185,7 +185,7 @@
<div *ngIf="formErrors.signup.limit" class="form-error">{{ formErrors.signup.limit }}</div> <div *ngIf="formErrors.signup.limit" class="form-error">{{ formErrors.signup.limit }}</div>
<small i18n *ngIf="hasUnlimitedSignup()" class="muted">Signup won't be limited to a fixed number of users.</small> <small i18n *ngIf="hasUnlimitedSignup()" class="muted small">Signup won't be limited to a fixed number of users.</small>
</div> </div>
<div [ngClass]="getDisabledSignupClass()" class="mt-3"> <div [ngClass]="getDisabledSignupClass()" class="mt-3">
@ -252,7 +252,7 @@
<div class="form-group"> <div class="form-group">
<label i18n for="importConcurrency">Import jobs concurrency</label> <label i18n for="importConcurrency">Import jobs concurrency</label>
<span i18n class="muted ms-1">allows to import multiple videos in parallel. ⚠️ Requires a PeerTube restart.</span> <span i18n class="small muted ms-1">allows to import multiple videos in parallel. ⚠️ Requires a PeerTube restart.</span>
<div class="number-with-unit"> <div class="number-with-unit">
<input type="number" name="importConcurrency" formControlName="concurrency" /> <input type="number" name="importConcurrency" formControlName="concurrency" />
@ -268,7 +268,7 @@
i18n-labelText labelText="Allow import with HTTP URL (e.g. YouTube)" i18n-labelText labelText="Allow import with HTTP URL (e.g. YouTube)"
> >
<ng-container ngProjectAs="description"> <ng-container ngProjectAs="description">
<span i18n>⚠️ If enabled, we recommend to use <a href="https://docs.joinpeertube.org/maintain-configuration?id=security">a HTTP proxy</a> to prevent private URL access from your PeerTube server</span> <span i18n>⚠️ If enabled, we recommend to use <a class="link-orange" href="https://docs.joinpeertube.org/maintain-configuration?id=security">a HTTP proxy</a> to prevent private URL access from your PeerTube server</span>
</ng-container> </ng-container>
</my-peertube-checkbox> </my-peertube-checkbox>
</div> </div>
@ -372,11 +372,11 @@
i18n-labelText labelText="Enable global search" i18n-labelText labelText="Enable global search"
> >
<ng-container ngProjectAs="description"> <ng-container ngProjectAs="description">
<p i18n>⚠️ This functionality depends heavily on the moderation of instances followed by the search index you select.</p> <div i18n>⚠️ This functionality depends heavily on the moderation of instances followed by the search index you select.</div>
<span i18n> <div i18n>
You should only use moderated search indexes in production, or <a href="https://framagit.org/framasoft/peertube/search-index">host your own</a>. You should only use moderated search indexes in production, or <a class="link-orange" href="https://framagit.org/framasoft/peertube/search-index">host your own</a>.
</span> </div>
</ng-container> </ng-container>
<ng-container ngProjectAs="extra"> <ng-container ngProjectAs="extra">
@ -424,7 +424,7 @@
<div class="col-12 col-lg-4 col-xl-3"> <div class="col-12 col-lg-4 col-xl-3">
<div i18n class="inner-form-title">FEDERATION</div> <div i18n class="inner-form-title">FEDERATION</div>
<div i18n class="inner-form-description"> <div i18n class="inner-form-description">
Manage <a routerLink="/admin/follows">relations</a> with other instances. Manage <a class="link-orange" routerLink="/admin/follows">relations</a> with other instances.
</div> </div>
</div> </div>
@ -472,10 +472,10 @@
i18n-labelText labelText="Automatically follow instances of a public index" i18n-labelText labelText="Automatically follow instances of a public index"
> >
<ng-container ngProjectAs="description"> <ng-container ngProjectAs="description">
<p i18n>⚠️ This functionality requires a lot of attention and extra moderation.</p> <div i18n>⚠️ This functionality requires a lot of attention and extra moderation.</div>
<span i18n> <span i18n>
See <a href="https://docs.joinpeertube.org/admin-following-instances?id=automatically-follow-other-instances" rel="noopener noreferrer" target="_blank">the documentation</a> for more information about the expected URL See <a class="link-orange" href="https://docs.joinpeertube.org/admin-following-instances?id=automatically-follow-other-instances" rel="noopener noreferrer" target="_blank">the documentation</a> for more information about the expected URL
</span> </span>
</ng-container> </ng-container>
@ -563,7 +563,7 @@
If your instance is explicitly allowed by Twitter, a video player will be embedded in the Twitter feed on PeerTube video share.<br /> If your instance is explicitly allowed by Twitter, a video player will be embedded in the Twitter feed on PeerTube video share.<br />
If the instance is not, we use an image link card that will redirect to your PeerTube instance.<br /><br /> If the instance is not, we use an image link card that will redirect to your PeerTube instance.<br /><br />
Check this checkbox, save the configuration and test with a video URL of your instance (https://example.com/w/blabla) on Check this checkbox, save the configuration and test with a video URL of your instance (https://example.com/w/blabla) on
<a target='_blank' rel='noopener noreferrer' href='https://cards-dev.twitter.com/validator'>https://cards-dev.twitter.com/validator</a> <a class="link-orange" target='_blank' rel='noopener noreferrer' href='https://cards-dev.twitter.com/validator'>https://cards-dev.twitter.com/validator</a>
to see if you instance is allowed. to see if you instance is allowed.
</ng-container> </ng-container>
</ng-template> </ng-template>

View File

@ -3,11 +3,6 @@
$form-base-input-width: 340px; $form-base-input-width: 340px;
label {
font-weight: $font-regular;
font-size: 100%;
}
form { form {
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
} }
@ -30,7 +25,7 @@ input[type=number] {
input[type=number] + span { input[type=number] + span {
position: absolute; position: absolute;
top: 5px; top: 0.2em;
right: 2.5rem; right: 2.5rem;
} }
@ -74,6 +69,10 @@ input[type=submit] {
@include settings-big-title; @include settings-big-title;
} }
.inner-form-description {
font-size: 15px;
}
textarea { textarea {
@include peertube-textarea(500px, 150px); @include peertube-textarea(500px, 150px);
@ -88,6 +87,7 @@ textarea {
.label-small-info { .label-small-info {
font-style: italic; font-style: italic;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 14px;
} }
.disabled-checkbox-extra { .disabled-checkbox-extra {

View File

@ -79,8 +79,8 @@
<div class="row mt-4"> <!-- moderation & nsfw grid --> <div class="row mt-4"> <!-- moderation & nsfw grid -->
<div class="col-12 col-lg-4 col-xl-3"> <div class="col-12 col-lg-4 col-xl-3">
<div i18n class="inner-form-title">MODERATION & NSFW</div> <div i18n class="inner-form-title">MODERATION & NSFW</div>
<div i18row="inner-for-description"> <div i18row="inner-form-description">
Manage <a routerLink="/admin/users">users</a> to build a moderation team. Manage <a class="link-orange" routerLink="/admin/users">users</a> to build a moderation team.
</div> </div>
</div> </div>

View File

@ -46,9 +46,9 @@
</div> </div>
<div class="form-group" [ngClass]="getDisabledLiveClass()"> <div class="form-group" [ngClass]="getDisabledLiveClass()">
<label i18n for="liveMaxInstanceLives"> <label i18n for="liveMaxInstanceLives">Max simultaneous lives created on your instance</label>
Max simultaneous lives created on your instance <span class="muted">(-1 for "unlimited")</span>
</label> <span class="ms-2 small muted">(-1 for "unlimited")</span>
<div class="number-with-unit"> <div class="number-with-unit">
<input type="number" name="liveMaxInstanceLives" formControlName="maxInstanceLives" /> <input type="number" name="liveMaxInstanceLives" formControlName="maxInstanceLives" />
@ -59,9 +59,8 @@
</div> </div>
<div class="form-group" [ngClass]="getDisabledLiveClass()"> <div class="form-group" [ngClass]="getDisabledLiveClass()">
<label i18n for="liveMaxUserLives"> <label i18n for="liveMaxUserLives">Max simultaneous lives created per user</label>
Max simultaneous lives created per user <span class="muted">(-1 for "unlimited")</span> <span class="ms-2 small muted">(-1 for "unlimited")</span>
</label>
<div class="number-with-unit"> <div class="number-with-unit">
<input type="number" name="liveMaxUserLives" formControlName="maxUserLives" /> <input type="number" name="liveMaxUserLives" formControlName="maxUserLives" />
@ -136,7 +135,7 @@
<div class="form-group" [ngClass]="getDisabledLiveTranscodingClass()"> <div class="form-group" [ngClass]="getDisabledLiveTranscodingClass()">
<label i18n for="liveTranscodingThreads">Live transcoding threads</label> <label i18n for="liveTranscodingThreads">Live transcoding threads</label>
<span class="muted ms-1"> <span class="small muted ms-1">
<ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n> <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>
will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with VOD transcoding will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with VOD transcoding
</ng-container> </ng-container>
@ -157,7 +156,7 @@
<div class="form-group mt-4" [ngClass]="getDisabledLiveTranscodingClass()"> <div class="form-group mt-4" [ngClass]="getDisabledLiveTranscodingClass()">
<label i18n for="liveTranscodingProfile">Live transcoding profile</label> <label i18n for="liveTranscodingProfile">Live transcoding profile</label>
<span class="muted ms-1" i18n>new live transcoding profiles can be added by PeerTube plugins</span> <span class="small muted ms-1" i18n>new live transcoding profiles can be added by PeerTube plugins</span>
<my-select-options <my-select-options
id="liveTranscodingProfile" id="liveTranscodingProfile"

View File

@ -8,15 +8,10 @@
<span i18n> <span i18n>
Estimating a server's capacity to transcode and stream videos isn't easy and we can't tune PeerTube automatically. Estimating a server's capacity to transcode and stream videos isn't easy and we can't tune PeerTube automatically.
</span> </span>
<span i18n>
However, you may want to read our guidelines before tweaking the following values.
</span>
<div class="callout-container"> <span i18n>
<a class="callout-link" target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/admin-configuration?id=transcoding" i18n> However, you may want to read <a class="link-orange" target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/admin-configuration?id=transcoding">our guidelines</a> before tweaking the following values.
Read guidelines </span>
</a>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -115,7 +110,11 @@
<div class="form-group" [ngClass]="getTranscodingDisabledClass()"> <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
<label i18n>Resolutions to generate per enabled format</label> <label i18n>Resolutions to generate per enabled format</label>
<div class="ms-2 mt-2 d-flex flex-column"> <div class="ms-2 d-flex flex-column">
<span class="mb-3 small muted" i18n>
The original file resolution will be the default target if no option is selected.
</span>
<ng-container formGroupName="resolutions"> <ng-container formGroupName="resolutions">
<div class="form-group" *ngFor="let resolution of resolutions"> <div class="form-group" *ngFor="let resolution of resolutions">
<my-peertube-checkbox <my-peertube-checkbox
@ -127,10 +126,6 @@
</ng-template> </ng-template>
</my-peertube-checkbox> </my-peertube-checkbox>
</div> </div>
<span class="mb-2 muted" i18n>
The original file resolution will be the default target if no option is selected.
</span>
</ng-container> </ng-container>
</div> </div>
</div> </div>
@ -142,7 +137,8 @@
<div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()"> <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()">
<label i18n for="transcodingThreads">Transcoding threads</label> <label i18n for="transcodingThreads">Transcoding threads</label>
<span class="muted ms-1">
<span class="small muted ms-1">
<ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n> <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>
will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with live transcoding will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with live transcoding
</ng-container> </ng-container>
@ -164,7 +160,7 @@
<div class="form-group" [ngClass]="getTranscodingDisabledClass()"> <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
<label i18n for="transcodingConcurrency">Transcoding jobs concurrency</label> <label i18n for="transcodingConcurrency">Transcoding jobs concurrency</label>
<span class="muted ms-1" i18n>allows to transcode multiple files in parallel. ⚠️ Requires a PeerTube restart</span> <span class="small muted ms-1" i18n>allows to transcode multiple files in parallel. ⚠️ Requires a PeerTube restart</span>
<div class="number-with-unit"> <div class="number-with-unit">
<input type="number" name="transcodingConcurrency" formControlName="concurrency" /> <input type="number" name="transcodingConcurrency" formControlName="concurrency" />
@ -176,7 +172,7 @@
<div class="form-group" [ngClass]="getTranscodingDisabledClass()"> <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
<label i18n for="transcodingProfile">Transcoding profile</label> <label i18n for="transcodingProfile">Transcoding profile</label>
<span class="muted ms-1" i18n>new transcoding profiles can be added by PeerTube plugins</span> <span class="small muted ms-1" i18n>new transcoding profiles can be added by PeerTube plugins</span>
<my-select-options <my-select-options
id="transcodingProfile" id="transcodingProfile"

View File

@ -59,7 +59,7 @@
<ng-template pTemplate="emptymessage"> <ng-template pTemplate="emptymessage">
<tr> <tr>
<td colspan="6"> <td colspan="5">
<div class="no-results"> <div class="no-results">
<ng-container *ngIf="search" i18n>No follower found matching current filters.</ng-container> <ng-container *ngIf="search" i18n>No follower found matching current filters.</ng-container>
<ng-container *ngIf="!search" i18n>Your instance doesn't have any follower.</ng-container> <ng-container *ngIf="!search" i18n>Your instance doesn't have any follower.</ng-container>

View File

@ -4,11 +4,6 @@
$form-base-input-width: 340px; $form-base-input-width: 340px;
label {
font-weight: $font-regular;
font-size: 100%;
}
.account-title { .account-title {
@include settings-big-title; @include settings-big-title;

View File

@ -17,8 +17,6 @@
input { input {
@include peertube-input-text(500px); @include peertube-input-text(500px);
height: 35px;
} }
} }

View File

@ -14,7 +14,6 @@
.plugin-name { .plugin-name {
@include margin-right(10px); @include margin-right(10px);
font-size: 16px;
font-weight: $font-semibold; font-weight: $font-semibold;
} }

View File

@ -1,11 +1,7 @@
@use '_variables' as *; @use '_variables' as *;
@use '_mixins' as *; @use '_mixins' as *;
.root { code {
font-size: 15px; font-size: 14px;
font-weight: $font-semibold;
code {
font-size: 14px;
font-weight: $font-semibold;
}
} }

View File

@ -66,7 +66,6 @@ input[type=email] {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
font-size: 15px;
max-width: 450px; max-width: 450px;
margin-bottom: 40px; margin-bottom: 40px;

View File

@ -10,7 +10,7 @@
</div> </div>
<div class="col-12 col-lg-8 col-xl-9"> <div class="col-12 col-lg-8 col-xl-9">
<h6 i18n>Banner image of the channel</h6> <label i18n>Banner image of the channel</label>
<my-actor-banner-edit <my-actor-banner-edit
*ngIf="videoChannel" [previewImage]="isCreation()" *ngIf="videoChannel" [previewImage]="isCreation()"

View File

@ -5,11 +5,6 @@
padding-top: 20px; padding-top: 20px;
} }
label {
font-weight: $font-regular;
font-size: 100%;
}
.video-channel-title { .video-channel-title {
@include settings-big-title; @include settings-big-title;
} }

View File

@ -1,11 +1,6 @@
@use '_variables' as *; @use '_variables' as *;
@use '_mixins' as *; @use '_mixins' as *;
label {
font-weight: $font-regular;
font-size: 100%;
}
.applications-title { .applications-title {
@include settings-big-title; @include settings-big-title;
} }

View File

@ -3,7 +3,6 @@
.header { .header {
display: flex; display: flex;
font-size: 15px;
margin-bottom: 20px; margin-bottom: 20px;
a { a {
@ -23,11 +22,6 @@
} }
} }
my-user-notifications {
font-size: 15px;
}
@media screen and (max-width: $mobile-view) { @media screen and (max-width: $mobile-view) {
.header { .header {
flex-direction: column; flex-direction: column;

View File

@ -1,18 +1,20 @@
<div *ngIf="error" class="alert alert-danger">{{ error }}</div> <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
<div *ngIf="success" class="alert alert-success">{{ success }}</div> <div *ngIf="success" class="alert alert-success">{{ success }}</div>
<div i18n class="current-email">
Your current email is <span class="email">{{ user.email }}</span>.
It is never shown to the public.
</div>
<div i18n class="pending-email" *ngIf="user.pendingEmail"> <div i18n class="pending-email" *ngIf="user.pendingEmail">
<span class="email">{{ user.pendingEmail }}</span> is awaiting email verification <strong>{{ user.pendingEmail }}</strong> is awaiting email verification
</div> </div>
<form role="form" class="change-email" (ngSubmit)="changeEmail()" [formGroup]="form" *ngIf="user.pluginAuth === null"> <form role="form" class="change-email" (ngSubmit)="changeEmail()" [formGroup]="form" *ngIf="user.pluginAuth === null">
<div class="form-group"> <div class="form-group">
<label i18n for="new-email">Change your email</label>
<div i18n class="form-group-description">
Your current email is <strong>{{ user.email }}</strong>.
It is never shown to the public.
</div>
<input <input
type="email" id="new-email" i18n-placeholder placeholder="New email" class="form-control" type="email" id="new-email" i18n-placeholder placeholder="New email" class="form-control"
formControlName="new-email" [ngClass]="{ 'input-error': formErrors['new-email'] }" formControlName="new-email" [ngClass]="{ 'input-error': formErrors['new-email'] }"

View File

@ -1,18 +1,17 @@
@use '_variables' as *; @use '_variables' as *;
@use '_mixins' as *; @use '_mixins' as *;
label { form {
font-weight: $font-regular; max-width: 340px;
font-size: 100%;
} }
my-input-text { my-input-text {
width: 340px;
display: block; display: block;
width: 100%;
} }
input[type=email] { input[type=email] {
@include peertube-input-text(340px); @include peertube-input-text(100%);
display: block; display: block;
} }
@ -22,15 +21,6 @@ input[type=submit] {
@include orange-button; @include orange-button;
} }
.current-email,
.pending-email { .pending-email {
margin-bottom: 15px; margin-bottom: 15px;
.email {
font-weight: $font-semibold;
}
}
.form-group {
width: max-content;
} }

View File

@ -1,14 +1,13 @@
@use '_variables' as *; @use '_variables' as *;
@use '_mixins' as *; @use '_mixins' as *;
label { form {
font-weight: $font-regular; max-width: 340px;
font-size: 100%;
} }
my-input-text { my-input-text {
width: 340px;
display: block; display: block;
width: 100%;
} }
my-input-text + my-input-text { my-input-text + my-input-text {

View File

@ -1,13 +1,13 @@
<div *ngIf="webNotifications"> <div *ngIf="webNotifications">
<ng-container *ngFor="let group of notificationSettingGroups"> <ng-container *ngFor="let group of notificationSettingGroups">
<div class="header custom-row"> <div class="header notification-row">
<div i18n>{{ group.label }}</div> <div i18n>{{ group.label }}</div>
<div i18n>Web</div> <div i18n>Web</div>
<div i18n *ngIf="emailEnabled">Email</div> <div i18n *ngIf="emailEnabled">Email</div>
</div> </div>
<ng-container *ngFor="let notificationType of group.keys"> <ng-container *ngFor="let notificationType of group.keys">
<div class="custom-row" *ngIf="hasUserRight(notificationType)"> <div class="small notification-row" *ngIf="hasUserRight(notificationType)">
<div>{{ labelNotifications[notificationType] }}</div> <div>{{ labelNotifications[notificationType] }}</div>
<div> <div>

View File

@ -1,13 +1,12 @@
@use '_variables' as *; @use '_variables' as *;
@use '_mixins' as *; @use '_mixins' as *;
.custom-row { .notification-row {
display: flex; display: flex;
align-items: center; align-items: center;
border-bottom: 1px solid $separator-border-color; border-bottom: 1px solid $separator-border-color;
&.header { &.header {
font-size: 16px;
font-weight: $font-semibold; font-weight: $font-semibold;
margin-top: 10px; margin-top: 10px;
} }

View File

@ -8,7 +8,7 @@
type="text" id="username" class="form-control" type="text" id="username" class="form-control"
formControlName="username" readonly formControlName="username" readonly
> >
<div class="muted" i18n> <div class="form-group-description" i18n>
People can find you using @{{ user.username }}@{{ instanceHost }} People can find you using @{{ user.username }}@{{ instanceHost }}
</div> </div>
</div> </div>

View File

@ -1,11 +1,6 @@
@use '_variables' as *; @use '_variables' as *;
@use '_mixins' as *; @use '_mixins' as *;
label {
font-weight: $font-regular;
font-size: 100%;
}
input#username + .muted { input#username + .muted {
margin-top: 5px; margin-top: 5px;
} }

View File

@ -14,7 +14,6 @@
</div> </div>
<div class="col-12 col-lg-8 col-xl-9"> <div class="col-12 col-lg-8 col-xl-9">
<my-user-quota [user]="user" [userInformationLoaded]="userInformationLoaded"></my-user-quota> <my-user-quota [user]="user" [userInformationLoaded]="userInformationLoaded"></my-user-quota>
<my-account-profile [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-profile> <my-account-profile [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-profile>

View File

@ -34,9 +34,11 @@
{videoChannel.followersCount, plural, =0 {No subscribers} =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}} {videoChannel.followersCount, plural, =0 {No subscribers} =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}
</a> </a>
<div i18n class="video-channel-videos">{videoChannel.videosCount, plural, =0 {No videos} =1 {1 video} other {{{ videoChannel.videosCount }} videos}}</div> <div class="d-flex">
<span i18n>{videoChannel.videosCount, plural, =0 {No videos} =1 {1 video} other {{{ videoChannel.videosCount }} videos}}</span>
<div i18n class="video-channel-views">{videoChannel.totalViews, plural, =0 {No views} =1 {1 view} other {{{ videoChannel.totalViews }} views}}</div> <span class="mx-1">·</span>
<span i18n>{videoChannel.totalViews, plural, =0 {No views} =1 {1 view} other {{{ videoChannel.totalViews | myNumberFormatter }} views}}</span>
</div>
<div class="video-channel-buttons"> <div class="video-channel-buttons">
<my-edit-button label [routerLink]="[ '/manage/update', videoChannel.nameWithHost ]"></my-edit-button> <my-edit-button label [routerLink]="[ '/manage/update', videoChannel.nameWithHost ]"></my-edit-button>

View File

@ -22,7 +22,7 @@
<my-global-icon iconName="external-link"></my-global-icon> <my-global-icon iconName="external-link"></my-global-icon>
</a> </a>
<div class="muted"> <div class="small muted">
<ng-container *ngIf="isFollowingAccount(follow)" i18n>Is following all your channels</ng-container> <ng-container *ngIf="isFollowingAccount(follow)" i18n>Is following all your channels</ng-container>
<ng-container *ngIf="!isFollowingAccount(follow)" i18n>Is following your channel {{ follow.following.name }}</ng-container> <ng-container *ngIf="!isFollowingAccount(follow)" i18n>Is following your channel {{ follow.following.name }}</ng-container>
</div> </div>

View File

@ -13,8 +13,4 @@ input[type=text] {
.actor { .actor {
@include actor-row($min-height: auto, $separator: true); @include actor-row($min-height: auto, $separator: true);
.actor-display-name {
font-size: 16px;
}
} }

View File

@ -27,7 +27,7 @@
[titlePage]="titlePage" [titlePage]="titlePage"
[getVideosObservableFunction]="getVideosObservableFunction" [getVideosObservableFunction]="getVideosObservableFunction"
[user]="user" [user]="user"
i18n-noResultMessage noResultMessage="You don't have any video in your watch history yet." [noResultMessage]="getNoResultMessage()"
[enableSelection]="false" [enableSelection]="false"
[disabled]="disabled" [disabled]="disabled"
#videosSelection #videosSelection

View File

@ -6,7 +6,6 @@
justify-content: center; justify-content: center;
margin-top: 50px; margin-top: 50px;
font-weight: $font-semibold; font-weight: $font-semibold;
font-size: 16px;
} }
.top-buttons { .top-buttons {
@ -29,11 +28,11 @@
grid-column: 3; grid-column: 3;
display: flex; display: flex;
align-items: center;
label { label {
margin: 0 0 0 5px; margin: 0 0 0 5px;
color: var(--greyForegroundColor); color: var(--greyForegroundColor);
font-size: 15px;
font-weight: $font-semibold; font-weight: $font-semibold;
} }
} }
@ -44,8 +43,6 @@
@include button-with-icon; @include button-with-icon;
grid-column: 4; grid-column: 4;
font-size: 15px;
} }
} }

View File

@ -134,4 +134,12 @@ export class MyHistoryComponent implements OnInit, DisableForReuseHook {
error: err => this.notifier.error(err.message) 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.`
}
} }

View File

@ -1,11 +1,6 @@
@use '_variables' as *; @use '_variables' as *;
@use '_mixins' as *; @use '_mixins' as *;
label {
font-weight: $font-regular;
font-size: 100%;
}
.video-playlist-title { .video-playlist-title {
@include settings-big-title; @include settings-big-title;
} }

View File

@ -6,7 +6,6 @@ form {
} }
.radio-label { .radio-label {
font-size: 15px;
font-weight: $font-bold; font-weight: $font-bold;
} }

View File

@ -20,7 +20,6 @@
} }
.results-header { .results-header {
font-size: 16px;
padding-bottom: 20px; padding-bottom: 20px;
margin-bottom: 30px; margin-bottom: 30px;
border-bottom: 1px solid #DADADA; border-bottom: 1px solid #DADADA;

View File

@ -1,11 +1,6 @@
@use '_variables' as *; @use '_variables' as *;
@use '_mixins' as *; @use '_mixins' as *;
.alert {
font-size: 16px;
text-align: center;
}
.signup-disabled { .signup-disabled {
padding-top: 30vh; padding-top: 30vh;
} }
@ -15,10 +10,6 @@
margin: 0; margin: 0;
} }
.register-content {
font-size: 16px;
}
my-instance-about-accordion { my-instance-about-accordion {
display: block; display: block;
margin-bottom: 25px; margin-bottom: 25px;

View File

@ -1,11 +1,6 @@
@use '_variables' as *; @use '_variables' as *;
@use '_mixins' as *; @use '_mixins' as *;
label {
font-weight: $font-regular;
font-size: 100%;
}
.caption-file { .caption-file {
margin-top: 20px; margin-top: 20px;
width: max-content; width: max-content;

View File

@ -1,12 +1,6 @@
@use '_variables' as *; @use '_variables' as *;
@use '_mixins' as *; @use '_mixins' as *;
label,
my-dynamic-form-field ::ng-deep label {
font-weight: $font-regular;
font-size: 100%;
}
.peertube-select-container { .peertube-select-container {
@include peertube-select-container(auto); @include peertube-select-container(auto);
} }
@ -37,10 +31,6 @@ my-peertube-checkbox {
@include peertube-input-text(100%); @include peertube-input-text(100%);
display: block; display: block;
} }
.label-tags + span {
font-size: 15px;
}
} }
.captions-header { .captions-header {
@ -71,7 +61,6 @@ my-peertube-checkbox {
.caption-entry-label { .caption-entry-label {
@include margin-right(20px); @include margin-right(20px);
font-size: 15px;
font-weight: bold; font-weight: bold;
width: 150px; width: 150px;
} }
@ -100,7 +89,6 @@ my-peertube-checkbox {
.no-caption { .no-caption {
text-align: center; text-align: center;
font-size: 15px;
} }
.submit-container { .submit-container {
@ -111,7 +99,6 @@ my-peertube-checkbox {
display: inline-block; display: inline-block;
color: pvar(--greyForegroundColor); color: pvar(--greyForegroundColor);
font-size: 15px;
} }
} }

View File

@ -10,7 +10,6 @@ $nav-link-height: 40px;
.upload-message { .upload-message {
width: 100%; width: 100%;
text-align: center; text-align: center;
font-size: 15px;
margin-bottom: 0; margin-bottom: 0;
border-radius: 0; border-radius: 0;

View File

@ -2,7 +2,6 @@
@use '_mixins' as *; @use '_mixins' as *;
.root-comment { .root-comment {
font-size: 15px;
display: flex; display: flex;
.left { .left {

View File

@ -7,7 +7,6 @@
.view-replies { .view-replies {
font-weight: $font-semibold; font-weight: $font-semibold;
font-size: 15px;
cursor: pointer; cursor: pointer;
} }
@ -33,10 +32,9 @@
} }
#dropdown-sort-comments { #dropdown-sort-comments {
font-weight: 600; font-weight: $font-semibold;
text-transform: uppercase; text-transform: uppercase;
border: 0; border: 0;
transform: translateY(-7%);
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {

View File

@ -7,7 +7,6 @@
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
font-size: 15px;
.video-info-description-html { .video-info-description-html {
@include peertube-word-wrap; @include peertube-word-wrap;

View File

@ -112,7 +112,6 @@ $video-height: 66vh;
margin-top: 50px; margin-top: 50px;
text-align: center; text-align: center;
font-weight: $font-semibold; font-weight: $font-semibold;
font-size: 15px;
} }
.video-bottom { .video-bottom {
@ -158,12 +157,11 @@ $video-height: 66vh;
margin-bottom: 10px; margin-bottom: 10px;
align-self: start; align-self: start;
font-size: 1em; font-size: 14px;
} }
.video-info-channel { .video-info-channel {
font-weight: $font-semibold; font-weight: $font-semibold;
font-size: 15px;
a { a {
@include disable-default-a-behaviour; @include disable-default-a-behaviour;

View File

@ -10,7 +10,7 @@
<div class="section videos" *ngFor="let object of overview.categories"> <div class="section videos" *ngFor="let object of overview.categories">
<h1 class="section-title"> <h1 class="section-title">
<a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a> <a class="link-orange" routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a>
</h1> </h1>
<div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)"> <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
@ -21,7 +21,7 @@
<div class="section videos" *ngFor="let object of overview.tags"> <div class="section videos" *ngFor="let object of overview.tags">
<h2 class="section-title"> <h2 class="section-title">
<a routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a> <a class="link-orange" routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a>
</h2> </h2>
<div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)"> <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
@ -32,7 +32,7 @@
<div class="section channel videos" *ngFor="let object of overview.channels"> <div class="section channel videos" *ngFor="let object of overview.channels">
<div class="section-title"> <div class="section-title">
<a [routerLink]="[ '/c', buildVideoChannelBy(object) ]"> <a class="link-orange" [routerLink]="[ '/c', buildVideoChannelBy(object) ]">
<my-actor-avatar [channel]="buildVideoChannel(object)" size="28"></my-actor-avatar> <my-actor-avatar [channel]="buildVideoChannel(object)" size="28"></my-actor-avatar>
<h2 class="section-title">{{ object.channel.displayName }}</h2> <h2 class="section-title">{{ object.channel.displayName }}</h2>

View File

@ -13,7 +13,7 @@
.section { .section {
&:first-child { &:first-child {
padding-top: 30px; padding-top: 15px;
.section-title { .section-title {
border-top: 0 !important; border-top: 0 !important;
@ -22,66 +22,27 @@
.section-title { .section-title {
font-size: 24px; font-size: 24px;
font-weight: $font-semibold; padding-top: 20px;
padding-top: 15px; margin-bottom: 30px;
margin-bottom: 15px;
display: flex;
justify-content: space-between;
&:not(h2) { &:not(h2) {
border-top: 1px solid $separator-border-color; border-top: 1px solid $separator-border-color;
} }
a { a > h2 {
color: pvar(--mainForegroundColor); margin-bottom: 0;
display: inline-block;
&:hover, font-weight: $font-bold;
&:focus:not(.focus-visible),
&:active {
text-decoration: none;
outline: none;
}
} }
}
&.channel { my-actor-avatar {
.section-title { @include margin-right(8px);
a {
display: flex;
width: fit-content;
align-items: center;
my-actor-avatar { position: relative;
@include margin-right(8px); top: -2px;
font-size: initial;
}
}
.followers {
@include margin-left(10px);
color: pvar(--greyForegroundColor);
font-weight: normal;
font-size: 14px;
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) { @media screen and (max-width: $mobile-view) {
max-height: initial; max-height: initial;
overflow: initial; overflow: initial;

View File

@ -103,14 +103,4 @@
cursor: pointer; cursor: pointer;
width: 20px; width: 20px;
} }
::ng-deep {
p {
font-size: 16px;
}
p:last-child {
margin-bottom: 0;
}
}
} }

View File

@ -18,7 +18,6 @@
a { a {
display: block; display: block;
font-size: 16px;
margin: 15px; margin: 15px;
} }
} }

View File

@ -16,7 +16,6 @@ $footer-links-base-opacity: .8;
color: pvar(--menuForegroundColor); color: pvar(--menuForegroundColor);
cursor: pointer; cursor: pointer;
font-size: 16px;
white-space: normal; white-space: normal;
word-break: break-word; word-break: break-word;
transition: background-color .1s ease-in-out; transition: background-color .1s ease-in-out;
@ -195,7 +194,6 @@ my-actor-avatar {
.logged-in-display-name { .logged-in-display-name {
@include disable-default-a-behaviour; @include disable-default-a-behaviour;
font-size: 16px;
font-weight: $font-semibold; font-weight: $font-semibold;
color: pvar(--menuForegroundColor); color: pvar(--menuForegroundColor);
} }
@ -319,7 +317,7 @@ my-actor-avatar {
color: pvar(--menuForegroundColor); color: pvar(--menuForegroundColor);
opacity: $footer-links-base-opacity; opacity: $footer-links-base-opacity;
white-space: nowrap; white-space: nowrap;
font-size: 90%; font-size: 0.75rem;
font-weight: 500; font-weight: 500;
line-height: 1.4rem; line-height: 1.4rem;
} }

View File

@ -2,7 +2,6 @@
@use '_variables' as *; @use '_variables' as *;
.modal-body { .modal-body {
font-size: 15px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -24,7 +23,6 @@
.subtitle { .subtitle {
font-weight: $font-semibold; font-weight: $font-semibold;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 16px;
} }
li { li {

View File

@ -1,10 +1,6 @@
@use '_mixins' as *; @use '_mixins' as *;
@use '_variables' as *; @use '_variables' as *;
.modal-body {
font-size: 15px;
}
.two-columns { .two-columns {
display: flex; display: flex;
align-items: center; align-items: center;
@ -26,7 +22,6 @@
.subtitle { .subtitle {
font-weight: $font-semibold; font-weight: $font-semibold;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 16px;
} }
.block-documentation { .block-documentation {
@ -63,7 +58,6 @@ li {
} }
.link-title { .link-title {
font-size: 16px;
font-weight: $font-semibold; font-weight: $font-semibold;
display: flex; display: flex;
justify-content: center; justify-content: center;

View File

@ -1,10 +1,6 @@
@use '_variables' as *; @use '_variables' as *;
@use '_mixins' as *; @use '_mixins' as *;
.modal-body {
font-size: 15px;
}
.button { .button {
padding: 0 13px; padding: 0 13px;
} }

View File

@ -1,10 +1,6 @@
@use '_mixins' as *; @use '_mixins' as *;
@use '_variables' as *; @use '_variables' as *;
.modal-body {
font-size: 15px;
}
li { li {
margin-bottom: 10px; margin-bottom: 10px;
} }

View File

@ -1,10 +1,6 @@
@use '_mixins' as *; @use '_mixins' as *;
@use '_variables' as *; @use '_variables' as *;
.modal-body {
font-size: 15px;
}
li { li {
margin-bottom: 10px; margin-bottom: 10px;
} }

View File

@ -25,7 +25,6 @@ textarea {
.no-messages { .no-messages {
display: flex; display: flex;
font-size: 15px;
justify-content: center; justify-content: center;
} }
@ -45,10 +44,6 @@ textarea {
color: var(--mainForegroundColor); color: var(--mainForegroundColor);
background-color: var(--greyBackgroundColor); background-color: var(--greyBackgroundColor);
.content {
font-size: 15px;
}
.date { .date {
font-size: 13px; font-size: 13px;
color: var(--greyForegroundColor); color: var(--greyForegroundColor);

View File

@ -30,7 +30,6 @@ my-actor-avatar {
} }
.actor-info-followers { .actor-info-followers {
font-size: 15px;
padding-bottom: .5rem; padding-bottom: .5rem;
} }

View File

@ -1,7 +1,7 @@
<ng-template #img> <ng-template #img>
<img *ngIf="previewImage || avatarUrl || !initial" [class]="getClass('avatar')" [src]="previewImage || avatarUrl || defaultAvatarUrl" [alt]="alt" /> <img *ngIf="previewImage || avatarUrl || !initial" [class]="classes" [src]="previewImage || avatarUrl || defaultAvatarUrl" [alt]="alt" />
<div *ngIf="!avatarUrl && initial" [ngClass]="getClass('initial')"> <div *ngIf="!avatarUrl && initial" [ngClass]="classes">
<span>{{ initial }}</span> <span>{{ initial }}</span>
</div> </div>
</ng-template> </ng-template>

View File

@ -1,4 +1,4 @@
import { Component, Input } from '@angular/core' import { Component, Input, OnChanges } from '@angular/core'
import { VideoChannel } from '../shared-main' import { VideoChannel } from '../shared-main'
import { Account } from '../shared-main/account/account.model' 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' ], styleUrls: [ './actor-avatar.component.scss' ],
templateUrl: './actor-avatar.component.html' templateUrl: './actor-avatar.component.html'
}) })
export class ActorAvatarComponent { export class ActorAvatarComponent implements OnChanges {
private _title: string private _title: string
@Input() account: ActorInput @Input() account: ActorInput
@ -42,6 +42,8 @@ export class ActorAvatarComponent {
return '' return ''
} }
classes: string[] = []
get alt () { get alt () {
if (this.account) return $localize`Account avatar` if (this.account) return $localize`Account avatar`
if (this.channel) return $localize`Channel avatar` if (this.channel) return $localize`Channel avatar`
@ -68,20 +70,18 @@ export class ActorAvatarComponent {
return name.slice(0, 1) return name.slice(0, 1)
} }
getClass (type: 'avatar' | 'initial') { ngOnChanges () {
const base = [ 'avatar' ] 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') if (this.channel) this.classes.push('channel')
else base.push('account') else this.classes.push('account')
if (type === 'initial' && this.initial) { if (!this.avatarUrl && this.initial) {
base.push('initial') this.classes.push('initial')
base.push(this.getColorTheme()) this.classes.push(this.getColorTheme())
} }
return base
} }
hasActor () { hasActor () {

View File

@ -9,8 +9,6 @@ input {
.btn { .btn {
@include button-with-icon(18px); @include button-with-icon(18px);
font-size: 15px;
} }
.copy-text { .copy-text {

View File

@ -102,7 +102,6 @@ $input-border-radius: 3px;
min-height: 75px; min-height: 75px;
padding: $base-padding; padding: $base-padding;
overflow-y: auto; overflow-y: auto;
font-size: 15px;
word-wrap: break-word; word-wrap: break-word;
} }

View File

@ -34,9 +34,9 @@
</div> </div>
<div class="ms-4 d-flex flex-column"> <div class="ms-4 d-flex flex-column">
<small class="wrapper mt-2 muted"> <div class="wrapper form-group-description">
<ng-content select="description"></ng-content> <ng-content select="description"></ng-content>
</small> </div>
<span class="wrapper mt-3"> <span class="wrapper mt-3">
<ng-content select="extra"></ng-content> <ng-content select="extra"></ng-content>

View File

@ -6,12 +6,7 @@
label { label {
display: flex; display: flex;
align-items: center; font-size: $form-input-font-size;
.label-text {
font-weight: $font-regular;
margin: 0;
}
input { input {
@include peertube-checkbox(1px); @include peertube-checkbox(1px);
@ -23,12 +18,11 @@
} }
my-help { my-help {
position: relative; line-height: 17px;
top: 2px;
} }
small { .form-group-description {
font-size: 90%; margin-top: 2px;
} }
.wrapper:empty { .wrapper:empty {

View File

@ -4,7 +4,6 @@
p-inputmask { p-inputmask {
::ng-deep input { ::ng-deep input {
width: 80px; width: 80px;
font-size: 15px;
&:focus-within, &:focus-within,
&:focus { &:focus {

View File

@ -3,4 +3,9 @@
width: inherit; width: inherit;
height: inherit; height: inherit;
} }
.feather-flag {
margin-left: -1px;
}
} }

View File

@ -12,6 +12,5 @@
} }
.block { .block {
font-size: 15px;
margin-bottom: 15px; margin-bottom: 15px;
} }

View File

@ -33,7 +33,6 @@ table {
caption { caption {
caption-side: top; caption-side: top;
font-size: 15px;
font-weight: $font-semibold; font-weight: $font-semibold;
color: pvar(--mainForegroundColor); color: pvar(--mainForegroundColor);
} }

View File

@ -39,7 +39,7 @@
</span> </span>
<h6 <h6
*ngIf="!action.linkBuilder && action.isHeader" [ngClass]="{ 'with-icon': !!action.iconName }" *ngIf="!action.linkBuilder && action.isHeader && areActionsDisplayed(actions, entry)" [ngClass]="{ 'with-icon': !!action.iconName }"
class="dropdown-header" tabindex="0" role="button" [title]="action.title || ''" (click)="action.handler(entry)" (keyup.enter)="action.handler(entry)" class="dropdown-header" tabindex="0" role="button" [title]="action.title || ''" (click)="action.handler(entry)" (keyup.enter)="action.handler(entry)"
> >
<ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container> <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>

View File

@ -48,7 +48,7 @@ export class ActionDropdownComponent<T> {
return actions.some(a => { return actions.some(a => {
if (Array.isArray(a)) return this.areActionsDisplayed(a, entry) 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))
}) })
} }
} }

View File

@ -1,8 +1,8 @@
<span *ngIf="!routerLink" class="action-button" [ngClass]="getClasses()" [ngbTooltip]="title" tabindex="0"> <div *ngIf="!routerLink" class="action-button" [ngClass]="classes" [ngbTooltip]="title" tabindex="0">
<ng-container *ngTemplateOutlet="content"></ng-container> <ng-container *ngTemplateOutlet="content"></ng-container>
</span> </div>
<a *ngIf="routerLink" class="action-button" [ngClass]="getClasses()" [ngbTooltip]="title" [routerLink]="routerLink"> <a *ngIf="routerLink" class="action-button" [ngClass]="classes" [ngbTooltip]="title" [routerLink]="routerLink">
<ng-container *ngTemplateOutlet="content"></ng-container> <ng-container *ngTemplateOutlet="content"></ng-container>
</a> </a>

View File

@ -16,7 +16,6 @@
} }
:host { :host {
outline: none;
display: inline-block; display: inline-block;
} }

View File

@ -1,4 +1,4 @@
import { Component, Input } from '@angular/core' import { Component, Input, OnChanges } from '@angular/core'
import { GlobalIconName } from '@app/shared/shared-icons' import { GlobalIconName } from '@app/shared/shared-icons'
@Component({ @Component({
@ -7,7 +7,7 @@ import { GlobalIconName } from '@app/shared/shared-icons'
templateUrl: './button.component.html' templateUrl: './button.component.html'
}) })
export class ButtonComponent { export class ButtonComponent implements OnChanges {
@Input() label = '' @Input() label = ''
@Input() className = 'grey-button' @Input() className = 'grey-button'
@Input() icon: GlobalIconName = undefined @Input() icon: GlobalIconName = undefined
@ -17,8 +17,10 @@ export class ButtonComponent {
@Input() disabled = false @Input() disabled = false
@Input() responsiveLabel = false @Input() responsiveLabel = false
getClasses () { classes: { [id: string]: boolean } = {}
return {
ngOnChanges () {
this.classes = {
[this.className]: true, [this.className]: true,
disabled: this.disabled, disabled: this.disabled,
'icon-only': !this.label, 'icon-only': !this.label,

View File

@ -25,10 +25,6 @@ export class EditButtonComponent implements OnInit {
// <my-edit-button label /> Use default label // <my-edit-button label /> Use default label
if (this.label === '') { if (this.label === '') {
this.label = $localize`Update` this.label = $localize`Update`
if (!this.title) {
this.title = this.label
}
} }
} }
} }

View File

@ -5,28 +5,24 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
}
my-global-icon { my-global-icon {
width: 32px; @include apply-svg-color(pvar(--mainColor));
align-self: flex-start;
::ng-deep { width: 32px;
svg { align-self: flex-start;
fill: #0c5460;
}
}
+ div { + div {
margin-left: 10px; margin-left: 10px;
text-align: center; text-align: center;
a.channels-settings-link {
@include peertube-button-link;
@include grey-button;
height: fit-content;
margin-top: 10px;
}
}
} }
} }
.channels-settings-link {
@include peertube-button-link;
@include grey-button;
height: fit-content;
margin-top: 10px;
}

View File

@ -1,13 +1,7 @@
<div class="root"> <div class="root">
<div class="input-group has-clear"> <div class="input-group has-clear">
<input <input #ref type="text" class="last-in-group"
#ref [(ngModel)]="value" (keyup.enter)="sendSearch()" [hidden]="!inputShown" [name]="name" [placeholder]="placeholder"
type="text"
[(ngModel)]="value"
(keyup.enter)="sendSearch()"
[hidden]="!inputShown"
[name]="name"
[placeholder]="placeholder"
> >
<my-global-icon iconName="cross" role="button" class="form-control-clear" title="Clear filter" i18n-title (click)="onResetFilter()"></my-global-icon> <my-global-icon iconName="cross" role="button" class="form-control-clear" title="Clear filter" i18n-title (click)="onResetFilter()"></my-global-icon>

View File

@ -1,11 +1,6 @@
@use '_variables' as *; @use '_variables' as *;
@use '_mixins' as *; @use '_mixins' as *;
label {
font-weight: $font-regular;
font-size: 100%;
}
.user-quota { .user-quota {
label { label {
@include margin-right(5px); @include margin-right(5px);

View File

@ -48,7 +48,7 @@
<ng-template pTemplate="emptymessage"> <ng-template pTemplate="emptymessage">
<tr> <tr>
<td colspan="6"> <td colspan="3">
<div class="no-results"> <div class="no-results">
<ng-container *ngIf="search" i18n>No account found matching current filters.</ng-container> <ng-container *ngIf="search" i18n>No account found matching current filters.</ng-container>
<ng-container *ngIf="!search" i18n>No account found.</ng-container> <ng-container *ngIf="!search" i18n>No account found.</ng-container>

View File

@ -50,7 +50,7 @@
<ng-template pTemplate="emptymessage"> <ng-template pTemplate="emptymessage">
<tr> <tr>
<td colspan="6"> <td colspan="3">
<div class="no-results"> <div class="no-results">
<ng-container *ngIf="search" i18n>No server found matching current filters.</ng-container> <ng-container *ngIf="search" i18n>No server found matching current filters.</ng-container>
<ng-container *ngIf="!search" i18n>No server found.</ng-container> <ng-container *ngIf="!search" i18n>No server found.</ng-container>

View File

@ -2,7 +2,6 @@
@use '_mixins' as *; @use '_mixins' as *;
.description { .description {
font-size: 15px;
margin-bottom: 15px; margin-bottom: 15px;
} }

View File

@ -6,6 +6,5 @@ textarea {
} }
.live-info { .live-info {
font-size: 15px;
margin: 40px 0 20px; margin: 40px 0 20px;
} }

View File

@ -34,6 +34,10 @@ my-input-text {
margin-top: 20px; margin-top: 20px;
} }
.alert-private {
margin-top: 0;
}
.filters { .filters {
margin-top: 30px; margin-top: 30px;
@ -46,7 +50,6 @@ my-input-text {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-top: 20px; margin-top: 20px;
font-size: 16px;
font-weight: $font-semibold; font-weight: $font-semibold;
cursor: pointer; cursor: pointer;
} }

View File

@ -1,11 +1,6 @@
@use '_variables' as *; @use '_variables' as *;
@use '_mixins' as *; @use '_mixins' as *;
label {
font-weight: $font-regular;
font-size: 100%;
}
input[type=submit] { input[type=submit] {
@include peertube-button; @include peertube-button;
@include orange-button; @include orange-button;

View File

@ -42,7 +42,7 @@
i18n-labelText labelText="Help share videos being played" i18n-labelText labelText="Help share videos being played"
> >
<ng-container ngProjectAs="description"> <ng-container ngProjectAs="description">
<span i18n>The <a routerLink="/about/peertube" fragment="privacy" target="_blank">sharing system</a> 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.</span> <span i18n>The <a class="link-orange" routerLink="/about/peertube" fragment="privacy" target="_blank">sharing system</a> 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.</span>
</ng-container> </ng-container>
</my-peertube-checkbox> </my-peertube-checkbox>
</div> </div>

View File

@ -1,11 +1,6 @@
@use '_variables' as *; @use '_variables' as *;
@use '_mixins' as *; @use '_mixins' as *;
label {
font-weight: $font-regular;
font-size: 100%;
}
input[type=submit] { input[type=submit] {
@include peertube-button; @include peertube-button;
@include orange-button; @include orange-button;

View File

@ -1,5 +1,5 @@
<div <div
class="btn-group-subscribe btn-group" class="btn-group-subscribe btn-group" role="group"
[ngClass]="{'subscribe-button': !isAllChannelsSubscribed, 'unsubscribe-button': isAllChannelsSubscribed, 'big': isBigButton }" [ngClass]="{'subscribe-button': !isAllChannelsSubscribed, 'unsubscribe-button': isAllChannelsSubscribed, 'big': isBigButton }"
> >
@ -20,17 +20,11 @@
</ng-template> </ng-template>
<ng-template #userLoggedIn> <ng-template #userLoggedIn>
<button <button *ngIf="!isAllChannelsSubscribed" type="button" class="btn" (click)="subscribe()">
*ngIf="!isAllChannelsSubscribed" type="button"
class="btn btn-sm" (click)="subscribe()"
>
<ng-template [ngTemplateOutlet]="userLoggedOut"></ng-template> <ng-template [ngTemplateOutlet]="userLoggedOut"></ng-template>
</button> </button>
<button <button *ngIf="isAllChannelsSubscribed" type="button" class="btn" role="button" (click)="unsubscribe()">
*ngIf="isAllChannelsSubscribed" type="button"
class="btn btn-sm" role="button"
(click)="unsubscribe()">
<ng-container i18n>{account + "", select, undefined {Unsubscribe} other {Unsubscribe from all channels}}</ng-container> <ng-container i18n>{account + "", select, undefined {Unsubscribe} other {Unsubscribe from all channels}}</ng-container>
</button> </button>
</ng-template> </ng-template>
@ -43,7 +37,7 @@
class="btn-group" ngbDropdown autoClose="outside" placement="bottom-right bottom-left bottom auto" 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 role="group" aria-label="Multiple ways to subscribe to the current channel" i18n-aria-label
> >
<button class="btn btn-sm dropdown-toggle-split" ngbDropdownToggle aria-label="Open subscription dropdown" i18n-aria-label> <button class="btn dropdown-toggle-split" ngbDropdownToggle aria-label="Open subscription dropdown" i18n-aria-label>
<ng-container <ng-container
*ngIf="!isUserLoggedIn(); then userLoggedOut"> *ngIf="!isUserLoggedIn(); then userLoggedOut">
</ng-container> </ng-container>

View File

@ -3,14 +3,10 @@
.btn-group-subscribe { .btn-group-subscribe {
@include peertube-button; @include peertube-button;
@include disable-default-a-behaviour;
float: right; button.dropdown-toggle {
padding: 0; font-size: $button-font-size;
line-height: 1.2;
> .btn,
> .dropdown > .dropdown-toggle {
font-size: 15px;
} }
&:not(.big) { &:not(.big) {
@ -38,7 +34,7 @@
// Unlogged // Unlogged
> .dropdown > .dropdown-toggle span { > .dropdown > .dropdown-toggle span {
@include padding-right(3px); @include padding-right(5px);
} }
// Logged // Logged
@ -65,9 +61,11 @@
@include padding-left(5px); @include padding-left(5px);
} }
} }
&.unsubscribe-button { &.unsubscribe-button {
.btn { .btn {
@include grey-button; @include grey-button;
font-weight: 600; font-weight: 600;
} }
} }

View File

@ -10,7 +10,6 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-top: 20px; margin-top: 20px;
font-size: 16px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;

View File

@ -3,7 +3,6 @@
.root { .root {
margin-bottom: 45px; margin-bottom: 45px;
font-size: 15px;
} }
.first-row { .first-row {
@ -49,7 +48,6 @@
border-radius: 24px; border-radius: 24px;
padding: 4px 15px; padding: 4px 15px;
font-size: 16px;
margin-bottom: 15px; margin-bottom: 15px;
cursor: pointer; cursor: pointer;
} }

View File

@ -4,6 +4,10 @@
$more-button-width: 40px; $more-button-width: 40px;
.video-miniature {
font-size: 14px;
}
.video-miniature-name { .video-miniature-name {
@include miniature-name; @include miniature-name;
} }

View File

@ -54,9 +54,9 @@ $margin-top: 30px;
} }
.date-title { .date-title {
font-size: 16px;
font-weight: $font-semibold; font-weight: $font-semibold;
margin-bottom: 20px; margin-bottom: 20px;
font-size: 1rem;
// Make the element span a full grid row within .videos grid // Make the element span a full grid row within .videos grid
grid-column: 1 / -1; grid-column: 1 / -1;

View File

@ -30,12 +30,10 @@
</div> </div>
<div class="optional-rows" *ngIf="playlist.optionalRowDisplayed"> <div class="optional-rows" *ngIf="playlist.optionalRowDisplayed">
<div class="labels"> <div class="header-label" i18n>Start at</div>
<div i18n>Start at</div> <div class="header-label" i18n>Stop at</div>
<div i18n>Stop at</div>
</div>
<div *ngFor="let element of buildOptionalRowElements(playlist)"> <ng-container *ngFor="let element of buildOptionalRowElements(playlist)">
<my-peertube-checkbox <my-peertube-checkbox
[inputName]="getOptionalInputName(playlist, element)" [inputName]="getOptionalInputName(playlist, element)"
[ngModel]="element.enabled" [onPushWorkaround]="true" [ngModel]="element.enabled" [onPushWorkaround]="true"
@ -55,7 +53,7 @@
(inputBlur)="onElementTimestampUpdate(playlist, element)" (inputBlur)="onElementTimestampUpdate(playlist, element)"
#stopAt #stopAt
></my-timestamp-input> ></my-timestamp-input>
</div> </ng-container>
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,10 +1,6 @@
@use '_variables' as *; @use '_variables' as *;
@use '_mixins' as *; @use '_mixins' as *;
$optional-rows-checkbox-width: 34px;
$timestamp-width: 50px;
$timestamp-margin-right: 10px;
.header, .header,
.dropdown-item, .dropdown-item,
.input-container { .input-container {
@ -52,12 +48,12 @@ $timestamp-margin-right: 10px;
} }
} }
.primary-row, .primary-row {
.optional-rows > div {
display: flex; display: flex;
my-peertube-checkbox { my-peertube-checkbox {
@include margin-right(10px); @include margin-right(10px);
align-self: center; align-self: center;
} }
@ -84,41 +80,30 @@ $timestamp-margin-right: 10px;
height: 19px; height: 19px;
} }
} }
my-timestamp-input {
@include margin-right($timestamp-margin-right);
::ng-deep .ui-inputtext {
padding: 0;
width: $timestamp-width;
}
}
} }
.optional-rows { .optional-rows {
> div { display: grid;
padding: 8px 5px 5px 10px; grid-template-columns: 35px 80px 80px;
} row-gap: 3px;
column-gap: 10px;
align-items: center;
my-peertube-checkbox { my-peertube-checkbox {
@include margin-right(0 !important); @include margin-left(auto);
display: block;
width: $optional-rows-checkbox-width;
} }
.labels { .header-label {
@include margin-left($optional-rows-checkbox-width);
font-size: 13px; font-size: 13px;
color: pvar(--greyForegroundColor); color: pvar(--greyForegroundColor);
padding-top: 5px; padding-left: 2px;
padding-bottom: 0;
div { &:nth-child(1) {
@include margin-right($timestamp-margin-right); grid-column: 2;
}
width: $timestamp-width; &:nth-child(2) {
grid-column: 3;
} }
} }
} }

View File

@ -75,40 +75,6 @@ my-video-thumbnail,
left: -2px; 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, .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-menu {
.dropdown-item { .dropdown-item {

View File

@ -53,7 +53,7 @@
.privacy-date { .privacy-date {
margin-top: 5px; margin-top: 5px;
font-size: 13px; font-size: 14px;
.privacy { .privacy {
font-weight: $font-semibold; font-weight: $font-semibold;

View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3"/></svg>

Before

Width:  |  Height:  |  Size: 293 B

After

Width:  |  Height:  |  Size: 314 B

View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><g><rect height="3" width="2" x="11" y="19"/><rect height="2" width="3" x="2" y="11"/><rect height="2" width="3" x="19" y="11"/><rect height="3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.6665 17.8014)" width="1.99" x="16.66" y="16.66"/><rect height="1.99" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -10.9791 9.8041)" width="3" x="4.85" y="17.16"/><path d="M15,8.02V3H9v5.02C7.79,8.94,7,10.37,7,12c0,2.76,2.24,5,5,5s5-2.24,5-5C17,10.37,16.21,8.94,15,8.02z M11,5h2v2.1 C12.68,7.04,12.34,7,12,7s-0.68,0.04-1,0.1V5z"/></g></g></svg> <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor" class="misc"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><g><rect height="3" width="2" x="11" y="19"/><rect height="2" width="3" x="2" y="11"/><rect height="2" width="3" x="19" y="11"/><rect height="3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.6665 17.8014)" width="1.99" x="16.66" y="16.66"/><rect height="1.99" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -10.9791 9.8041)" width="3" x="4.85" y="17.16"/><path d="M15,8.02V3H9v5.02C7.79,8.94,7,10.37,7,12c0,2.76,2.24,5,5,5s5-2.24,5-5C17,10.37,16.21,8.94,15,8.02z M11,5h2v2.1 C12.68,7.04,12.34,7,12,7s-0.68,0.04-1,0.1V5z"/></g></g></svg>

Before

Width:  |  Height:  |  Size: 726 B

After

Width:  |  Height:  |  Size: 744 B

View File

@ -64,7 +64,7 @@ body {
font-weight: $font-regular; font-weight: $font-regular;
color: pvar(--mainForegroundColor); color: pvar(--mainForegroundColor);
background-color: pvar(--mainBackgroundColor); background-color: pvar(--mainBackgroundColor);
font-size: 14px; font-size: 1rem;
// On desktop browsers, make sure vertical scroll bar is always visible // 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 // 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 // And not move the content and header horizontally sticked to right when the content is updating
@ -114,7 +114,6 @@ button {
label { label {
font-weight: $font-bold; font-weight: $font-bold;
font-size: 15px;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
@ -200,10 +199,13 @@ table {
} }
my-global-icon[iconName=external-link] { my-global-icon[iconName=external-link] {
margin: 0 3px; margin: 0 0.3em;
width: 13px; width: 0.9em;
vertical-align: text-bottom; height: 0.9em;
display: inline-block;
color: pvar(--inputPlaceholderColor); color: pvar(--inputPlaceholderColor);
position: relative;
top: -0.1em;
} }
@media screen and (max-width: #{breakpoint(xxl)}) { @media screen and (max-width: #{breakpoint(xxl)}) {

View File

@ -42,7 +42,6 @@
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
.dropdown-menu { .dropdown-menu {
font-size: 15px;
color: pvar(--mainForegroundColor); color: pvar(--mainForegroundColor);
background-color: pvar(--mainBackgroundColor); background-color: pvar(--mainBackgroundColor);
@ -73,6 +72,16 @@
margin: 0.3rem 0; margin: 0.3rem 0;
} }
// ---------------------------------------------------------------------------
// Alert
// ---------------------------------------------------------------------------
.alert {
p:last-child {
margin-bottom: 0;
}
}
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
// Modal // Modal
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
@ -115,18 +124,10 @@
my-global-icon { my-global-icon {
@include icon(22px); @include icon(22px);
position: relative;
top: 5px;
float: right;
margin: 0;
padding: 0;
opacity: 0.5; opacity: 0.5;
&[iconName=cross] { /* stylelint-disable-line selector-max-compound-selectors */ &:hover {
@include icon(16px); opacity: 0.8;
top: -3px;
} }
} }
} }
@ -165,8 +166,6 @@
opacity: 0.75; opacity: 0.75;
content: ''; content: '';
display: block; display: block;
position: fixed;
z-index: z(overlay);
} }
} }
} }
@ -254,6 +253,11 @@
// Buttons & form controls // Buttons & form controls
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
.btn:not(.btn-sm) {
font-size: $button-font-size;
line-height: 1.2;
}
.btn-outline-secondary { .btn-outline-secondary {
border-color: $input-border-color; border-color: $input-border-color;
@ -294,7 +298,6 @@
} }
.form-control { .form-control {
font-size: 15px;
color: pvar(--mainForegroundColor); color: pvar(--mainForegroundColor);
background-color: pvar(--inputBackgroundColor); background-color: pvar(--inputBackgroundColor);
outline: none; outline: none;
@ -317,7 +320,6 @@
} }
> .input-group-text { > .input-group-text {
font-size: 15px;
line-height: normal; line-height: normal;
opacity: 0.9; opacity: 0.9;
} }
@ -333,8 +335,6 @@
} }
.has-clear { .has-clear {
position: relative;
input { input {
@include padding-right(1.5rem !important); @include padding-right(1.5rem !important);
} }
@ -344,10 +344,10 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
position: absolute;
right: .5rem;
height: 95%; height: 95%;
font-size: 14px; font-size: 14px;
position: absolute;
right: .5rem;
&:hover { &:hover {
color: rgba(0, 0, 0, 0.7); color: rgba(0, 0, 0, 0.7);

View File

@ -6,7 +6,9 @@
.link-orange { .link-orange {
color: pvar(--mainForegroundColor); color: pvar(--mainForegroundColor);
font-weight: $font-bold; 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 { &:hover {
color: pvar(--mainForegroundColor); color: pvar(--mainForegroundColor);
@ -16,7 +18,7 @@
.underline-orange { .underline-orange {
display: inline-block; display: inline-block;
border-bottom: 0.20em solid pvar(--mainColor); border-bottom: 0.19em solid pvar(--mainColor);
} }
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
@ -84,7 +86,7 @@
.form-group-description { .form-group-description {
@extend .muted !optional; @extend .muted !optional;
font-size: 90%; font-size: 14px;
margin-top: 10px; margin-top: 10px;
} }
@ -102,7 +104,6 @@ label + .form-group-description {
opacity: 0.6; opacity: 0.6;
color: pvar(--mainForegroundColor); color: pvar(--mainForegroundColor);
font-size: 16px;
display: inline-block; display: inline-block;
font-weight: $font-semibold; font-weight: $font-semibold;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
@ -149,7 +150,7 @@ label + .form-group-description {
.title-page-about, .title-page-about,
.title-page-settings { .title-page-settings {
white-space: nowrap; white-space: nowrap;
font-size: 115%; font-size: 1rem;
} }
.admin-sub-header { .admin-sub-header {
@ -172,7 +173,6 @@ label + .form-group-description {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 16px;
font-weight: $font-semibold; font-weight: $font-semibold;
} }
@ -246,10 +246,6 @@ label + .form-group-description {
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
.alert { .alert {
p:last-child {
margin-bottom: 0;
}
&.pt-alert-primary { &.pt-alert-primary {
background-color: pvar(--mainColorVeryLight); background-color: pvar(--mainColorVeryLight);
border: 2px solid pvar(--mainColorLightest); border: 2px solid pvar(--mainColorLightest);

View File

@ -36,18 +36,16 @@
.actor-owner { .actor-owner {
@include disable-default-a-behaviour; @include disable-default-a-behaviour;
font-size: 13px;
color: pvar(--mainForegroundColor); color: pvar(--mainForegroundColor);
display: flex;
align-items: center;
span:hover { span:hover {
opacity: 0.8; opacity: 0.8;
} }
my-actor-avatar { my-actor-avatar {
@include margin-left(7px); @include margin-left(5px);
display: inline-block;
vertical-align: top;
} }
} }

Some files were not shown because too many files have changed in this diff Show More