interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Cleanup

This commit is contained in:
Chocobozzz 2024-11-22 16:16:12 +01:00
parent c3aaee5dff
commit e346077a94
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
70 changed files with 306 additions and 315 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/package.json
View File

@ -89,7 +89,7 @@
"buffer": "^6.0.3", "buffer": "^6.0.3",
"chart.js": "^4.3.0", "chart.js": "^4.3.0",
"chartjs-plugin-zoom": "~2.0.1", "chartjs-plugin-zoom": "~2.0.1",
"color-bits": "^1.0.3", "color-bits": "^1.0.4",
"core-js": "^3.22.8", "core-js": "^3.22.8",
"debug": "^4.3.1", "debug": "^4.3.1",
"dompurify": "^3.1.6", "dompurify": "^3.1.6",

10
client/src/app/+about/about-instance/about-instance.component.scss
View File

@ -15,8 +15,11 @@
.middle-title { .middle-title {
margin-top: 0; margin-top: 0;
text-transform: uppercase;
color: pvar(--fg);
font-weight: $font-bold;
@include in-content-small-title; @include font-size(22px);
@include margin-bottom(1.5rem); @include margin-bottom(1.5rem);
} }
@ -42,9 +45,6 @@
.middle-title, .middle-title,
.section-title { .section-title {
display: inline-block; display: inline-block;
} color: pvar(--fg-400);
.section-title {
color: pvar(--fg);
} }
} }

10
client/src/app/+login/login.component.html
View File

@ -4,15 +4,9 @@
</div> </div>
</ng-template> </ng-template>
<h1 class="title-page-v2">
<strong class="underline-orange">{{ instanceName }}</strong>
>
<ng-container i18n>Login</ng-container>
</h1>
<div class="margin-content"> <div class="margin-content">
<h1 class="title-page" i18n>Login on {{ instanceName }}</h1>
<ng-container *ngIf="!externalAuthError && !isAuthenticatedWithExternalAuth"> <ng-container *ngIf="!externalAuthError && !isAuthenticatedWithExternalAuth">
<my-alert type="primary"> <my-alert type="primary">

4
client/src/app/+login/login.component.scss
View File

@ -18,7 +18,6 @@ input[type=email] {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
margin: auto;
> div { > div {
flex: 1 1; flex: 1 1;
@ -32,8 +31,7 @@ my-alert {
my-alert { my-alert {
display: block; display: block;
margin-bottom: 2rem;
@include margin(0, auto, 2rem);
} }
.login-form-and-externals { .login-form-and-externals {

4
client/src/app/+search/search.component.scss
View File

@ -124,10 +124,10 @@
} }
.video-channel-display-name { .video-channel-display-name {
font-size: $video-miniature-row-mobile-name-font-size; font-size: $miniature-fs-mobile-big;
} }
.video-channel-name { .video-channel-name {
font-size: $video-miniature-row-mobile-info-font-size; font-size: $miniature-fs-mobile-medium;
} }
} }

8
client/src/app/+signup/+register/custom-stepper.component.scss
View File

@ -5,10 +5,12 @@
$index-block-height: 40px; $index-block-height: 40px;
header { header {
margin-bottom: 30px;
padding-bottom: 25px;
width: 100%; width: 100%;
background-color: pvar(--primary-50); background-color: pvar(--primary-150);
border-radius: 5px;
@include rfs(2rem, margin-bottom);
@include rfs(2rem, padding);
} }
.header-steps { .header-steps {

14
client/src/app/+signup/+register/register.component.html
View File

@ -1,16 +1,10 @@
<div> <div class="margin-content">
<div class="margin-content signup-disabled" *ngIf="signupDisabled"> <div class="signup-disabled" *ngIf="signupDisabled">
<my-alert type="warning" i18n>Signup is not enabled on this instance.</my-alert> <my-alert type="warning" i18n>Signup is not enabled on this instance.</my-alert>
</div> </div>
<ng-container *ngIf="!signupDisabled"> <ng-container *ngIf="!signupDisabled">
<h1 class="title-page-v2">
<strong class="underline-orange">{{ instanceName }}</strong>
>
<my-signup-label [requiresApproval]="requiresApproval"></my-signup-label>
</h1>
<div class="register-content"> <div class="register-content">
<my-custom-stepper linear> <my-custom-stepper linear>
@ -26,7 +20,7 @@
<my-register-step-about [serverStats]="serverStats" [requiresApproval]="requiresApproval" [videoUploadDisabled]="videoUploadDisabled"></my-register-step-about> <my-register-step-about [serverStats]="serverStats" [requiresApproval]="requiresApproval" [videoUploadDisabled]="videoUploadDisabled"></my-register-step-about>
<div class="step-buttons"> <div class="step-buttons">
<a i18n class="skip-step underline-orange" routerLink="/login"> <a i18n class="skip-step link-primary fw-normal" routerLink="/login">
<strong>I already have an account</strong>, I log in <strong>I already have an account</strong>, I log in
</a> </a>
@ -93,7 +87,7 @@
<button class="peertube-button-big secondary-button" cdkStepperPrevious>{{ defaultPreviousStepButtonLabel }}</button> <button class="peertube-button-big secondary-button" cdkStepperPrevious>{{ defaultPreviousStepButtonLabel }}</button>
<div class="skip-step"> <div class="skip-step">
<button class="underline-orange button-unstyle" (click)="skipChannelCreation()"> <button class="link-primary button-unstyle" (click)="skipChannelCreation()">
<strong i18n>I don't want to create a channel</strong> <strong i18n>I don't want to create a channel</strong>
</button> </button>

14
client/src/app/+signup/+register/register.component.scss
View File

@ -9,12 +9,6 @@ my-signup-step-title strong {
padding-top: 30vh; padding-top: 30vh;
} }
.title-page-v2 {
background-color: pvar(--primary-50);
margin: 0;
padding-bottom: 10px;
}
my-instance-about-accordion { my-instance-about-accordion {
display: block; display: block;
margin-bottom: 30px; margin-bottom: 30px;
@ -36,14 +30,6 @@ my-instance-about-accordion {
font-size: 14px; font-size: 14px;
} }
.underline-orange {
color: pvar(--fg);
&:hover {
opacity: 0.8;
}
}
> button, > button,
.skip-step { .skip-step {
margin-top: 20px; margin-top: 20px;

4
client/src/app/+signup/+register/register.component.ts
View File

@ -7,7 +7,7 @@ import { AuthService, ServerService } from '@app/core'
import { HooksService } from '@app/core/plugins/hooks.service' import { HooksService } from '@app/core/plugins/hooks.service'
import { InstanceAboutAccordionComponent } from '@app/shared/shared-instance/instance-about-accordion.component' import { InstanceAboutAccordionComponent } from '@app/shared/shared-instance/instance-about-accordion.component'
import { AlertComponent } from '@app/shared/shared-main/common/alert.component' import { AlertComponent } from '@app/shared/shared-main/common/alert.component'
import { ServerConfig, ServerStats, UserRegister } from '@peertube/peertube-models' import { PeerTubeProblemDocument, ServerConfig, ServerStats, UserRegister } from '@peertube/peertube-models'
import { LoaderComponent } from '../../shared/shared-main/common/loader.component' import { LoaderComponent } from '../../shared/shared-main/common/loader.component'
import { SignupLabelComponent } from '../../shared/shared-main/users/signup-label.component' import { SignupLabelComponent } from '../../shared/shared-main/users/signup-label.component'
import { SignupStepTitleComponent } from '../shared/signup-step-title.component' import { SignupStepTitleComponent } from '../shared/signup-step-title.component'
@ -213,7 +213,7 @@ export class RegisterComponent implements OnInit {
}, },
error: err => { error: err => {
this.signupError = err.message this.signupError = (err.body as PeerTubeProblemDocument)?.detail || err.message
} }
}) })
} }

6
client/src/app/+stats/video/video-stats.component.html
View File

@ -1,5 +1,9 @@
<div class="margin-content"> <div class="margin-content">
<h1 class="title-page" i18n>{{ video.name }}</h1> <h1 class="title-page">
<my-global-icon iconName="stats"></my-global-icon>
<ng-container i18n>{{ video.name }} statistics</ng-container>
</h1>
<div class="stats-embed"> <div class="stats-embed">
<div class="global-stats"> <div class="global-stats">

3
client/src/app/+stats/video/video-stats.component.scss
View File

@ -46,7 +46,8 @@
.label, .label,
.more-info { .more-info {
font-size: 14px; font-size: 1rem;
font-weight: $font-semibold;
} }
.value { .value {

6
client/src/app/+stats/video/video-stats.component.ts
View File

@ -27,6 +27,7 @@ import { NgFor, NgIf } from '@angular/common'
import { NumberFormatterPipe } from '@app/shared/shared-main/common/number-formatter.pipe' import { NumberFormatterPipe } from '@app/shared/shared-main/common/number-formatter.pipe'
import { VideoDetails } from '@app/shared/shared-main/video/video-details.model' import { VideoDetails } from '@app/shared/shared-main/video/video-details.model'
import { LiveVideoService } from '@app/shared/shared-video-live/live-video.service' import { LiveVideoService } from '@app/shared/shared-video-live/live-video.service'
import { GlobalIconComponent } from '@app/shared/shared-icons/global-icon.component'
type ActiveGraphId = VideoStatsTimeserieMetric | 'retention' | 'countries' | 'regions' type ActiveGraphId = VideoStatsTimeserieMetric | 'retention' | 'countries' | 'regions'
@ -69,7 +70,8 @@ ChartJSDefaults.color = getComputedStyle(document.body).getPropertyValue('--fg')
NgbNavContent, NgbNavContent,
ChartModule, ChartModule,
ButtonComponent, ButtonComponent,
NgbNavOutlet NgbNavOutlet,
GlobalIconComponent
] ]
}) })
export class VideoStatsComponent implements OnInit { export class VideoStatsComponent implements OnInit {
@ -583,7 +585,7 @@ export class VideoStatsComponent implements OnInit {
} }
private buildChartColor () { private buildChartColor () {
return getComputedStyle(document.body).getPropertyValue('--primary-400') return getComputedStyle(document.body).getPropertyValue('--border-primary')
} }
private formatXTick (options: { private formatXTick (options: {

4
client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html
View File

@ -1,8 +1,4 @@
<div class="margin-content"> <div class="margin-content">
<h1 i18n class="title-page" *ngIf="pagination.totalItems">
Created {pagination.totalItems, plural, =1 {1 playlist} other {{{ pagination.totalItems }} playlists}}
</h1>
<div i18n class="no-results" *ngIf="pagination.totalItems === 0">This channel does not have playlists.</div> <div i18n class="no-results" *ngIf="pagination.totalItems === 0">This channel does not have playlists.</div>
<div class="playlists" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()"> <div class="playlists" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">

5
client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
View File

@ -19,11 +19,6 @@
} }
@media screen and (max-width: $mobile-view) { @media screen and (max-width: $mobile-view) {
.title-page {
display: block;
text-align: center;
}
.playlists { .playlists {
justify-content: left; justify-content: left;

17
client/src/app/+video-channels/video-channels.component.scss
View File

@ -4,8 +4,9 @@
@use '_miniature' as *; @use '_miniature' as *;
@use '_button-mixins' as *; @use '_button-mixins' as *;
$owner-block-bg: pvar(--bg-secondary-350);
.root { .root {
--co-global-top-padding: 2rem;
--co-channel-img-margin: 30px; --co-channel-img-margin: 30px;
--co-font-size: 16px; --co-font-size: 16px;
--co-channel-handle-font-size: 16px; --co-channel-handle-font-size: 16px;
@ -28,7 +29,6 @@
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
grid-template-rows: auto auto; grid-template-rows: auto auto;
padding-top: var(--co-global-top-padding);
font-size: var(--co-font-size); font-size: var(--co-font-size);
@include margin-bottom(3rem); @include margin-bottom(3rem);
@ -41,7 +41,6 @@
.channel-description { .channel-description {
grid-column: 1; grid-column: 1;
word-break: break-word; word-break: break-word;
padding-bottom: var(--co-global-top-padding);
} }
.show-more { .show-more {
@ -84,8 +83,6 @@
} }
.owner-block { .owner-block {
$owner-block-bg: pvar(--bg-secondary-350);
background-color: $owner-block-bg; background-color: $owner-block-bg;
padding: 30px; padding: 30px;
width: 300px; width: 300px;
@ -146,7 +143,6 @@ my-copy-button {
@media screen and (max-width: 1100px) { @media screen and (max-width: 1100px) {
.root { .root {
--co-global-top-padding: 45px;
--co-channel-img-margin: 15px; --co-channel-img-margin: 15px;
} }
@ -159,7 +155,7 @@ my-copy-button {
.channel-description:not(.expanded) { .channel-description:not(.expanded) {
max-height: 70px; max-height: 70px;
@include fade-text(30px, pvar(--bg-secondary-350)); @include fade-text(30px, pvar(--bg));
} }
.show-more { .show-more {
@ -182,16 +178,14 @@ my-copy-button {
.bottom-owner { .bottom-owner {
display: block; display: block;
width: 100%;
border-bottom: 2px solid $separator-border-color; border-bottom: 2px solid $separator-border-color;
padding: var(--co-global-top-padding) 45px;
margin-bottom: 60px; margin-bottom: 60px;
} }
.owner-block { .owner-block {
display: grid; display: grid;
width: 100%; width: 100%;
padding: 0; padding: 1rem;
.avatar-row { .avatar-row {
grid-column: 1; grid-column: 1;
@ -203,7 +197,7 @@ my-copy-button {
grid-column: 2; grid-column: 2;
max-height: 70px; max-height: 70px;
@include fade-text(30px, pvar(--bg)); @include fade-text(30px, $owner-block-bg);
} }
.view-account { .view-account {
@ -224,7 +218,6 @@ my-copy-button {
@media screen and (max-width: $mobile-view) { @media screen and (max-width: $mobile-view) {
.root { .root {
--co-global-top-padding: 1rem;
--co-font-size: 14px; --co-font-size: 14px;
--co-channel-handle-font-size: 13px; --co-channel-handle-font-size: 13px;
--co-owner-handle-font-size: 13px; --co-owner-handle-font-size: 13px;

10
client/src/app/+video-studio/edit/video-studio-edit.component.html
View File

@ -1,5 +1,9 @@
<div class="margin-content"> <div class="margin-content">
<h1 class="title-page" i18n>Studio for {{ video.name }}</h1> <h1 class="title-page">
<my-global-icon iconName="film"></my-global-icon>
<ng-container i18n>Studio for {{ video.name }}</ng-container>
</h1>
<div class="grid-container"> <div class="grid-container">
<form [formGroup]="form"> <form [formGroup]="form">
@ -11,12 +15,12 @@
<div class="form-group"> <div class="form-group">
<label i18n for="cutStart">New start</label> <label i18n for="cutStart">New start</label>
<my-timestamp-input inputName="cutStart" [disableBorder]="false" [maxTimestamp]="video.duration" formControlName="start"></my-timestamp-input> <my-timestamp-input inputName="cutStart" enableBorder="true" [maxTimestamp]="video.duration" formControlName="start"></my-timestamp-input>
</div> </div>
<div class="form-group"> <div class="form-group">
<label i18n for="cutEnd">New end</label> <label i18n for="cutEnd">New end</label>
<my-timestamp-input inputName="cutEnd" [disableBorder]="false" [maxTimestamp]="video.duration" formControlName="end"></my-timestamp-input> <my-timestamp-input inputName="cutEnd" enableBorder="true" [maxTimestamp]="video.duration" formControlName="end"></my-timestamp-input>
</div> </div>
</div> </div>

6
client/src/app/+video-studio/edit/video-studio-edit.component.scss
View File

@ -52,16 +52,12 @@ my-timestamp-input {
} }
} }
h1 {
font-size: 20px;
}
h2 { h2 {
font-weight: $font-bold; font-weight: $font-bold;
font-size: 16px; font-size: 16px;
padding: 0 5px; padding: 0 5px;
width: fit-content; width: fit-content;
margin: -8px 0 1rem; margin-top: 0.5rem;
} }
.section { .section {

4
client/src/app/+video-studio/edit/video-studio-edit.component.ts
View File

@ -15,6 +15,7 @@ import { ReactiveFileComponent } from '../../shared/shared-forms/reactive-file.c
import { TimestampInputComponent } from '../../shared/shared-forms/timestamp-input.component' import { TimestampInputComponent } from '../../shared/shared-forms/timestamp-input.component'
import { FormsModule, ReactiveFormsModule } from '@angular/forms' import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { VideoDetails } from '@app/shared/shared-main/video/video-details.model' import { VideoDetails } from '@app/shared/shared-main/video/video-details.model'
import { GlobalIconComponent } from '@app/shared/shared-icons/global-icon.component'
@Component({ @Component({
selector: 'my-video-studio-edit', selector: 'my-video-studio-edit',
@ -29,7 +30,8 @@ import { VideoDetails } from '@app/shared/shared-main/video/video-details.model'
ButtonComponent, ButtonComponent,
EmbedComponent, EmbedComponent,
NgIf, NgIf,
NgFor NgFor,
GlobalIconComponent
] ]
}) })
export class VideoStudioEditComponent extends FormReactive implements OnInit { export class VideoStudioEditComponent extends FormReactive implements OnInit {

4
client/src/app/+videos/+video-edit/shared/caption/video-caption-edit-modal-content.component.html
View File

@ -52,7 +52,7 @@
<my-timestamp-input <my-timestamp-input
class="me-1" class="me-1"
inputName="segmentStart" [disableBorder]="false" [maxTimestamp]="publishedVideo.duration * 1000" mask="99:99:99.999" inputName="segmentStart" enableBorder="true" [maxTimestamp]="publishedVideo.duration * 1000" mask="99:99:99.999"
[(ngModel)]="segment.startMs" [parser]="timestampParser" [formatter]="timestampFormatter" [(ngModel)]="segment.startMs" [parser]="timestampParser" [formatter]="timestampFormatter"
></my-timestamp-input> ></my-timestamp-input>
@ -67,7 +67,7 @@
<my-timestamp-input <my-timestamp-input
class="me-1" class="me-1"
inputName="segmentEnd" [disableBorder]="false" [maxTimestamp]="publishedVideo.duration * 1000" mask="99:99:99.999" inputName="segmentEnd" enableBorder="true" [maxTimestamp]="publishedVideo.duration * 1000" mask="99:99:99.999"
[(ngModel)]="segment.endMs" [parser]="timestampParser" [formatter]="timestampFormatter" [(ngModel)]="segment.endMs" [parser]="timestampParser" [formatter]="timestampFormatter"
></my-timestamp-input> ></my-timestamp-input>

2
client/src/app/+videos/+video-edit/shared/video-edit.component.html
View File

@ -262,7 +262,7 @@
<div class="position">{{ i + 1 }}</div> <div class="position">{{ i + 1 }}</div>
<my-timestamp-input <my-timestamp-input
class="d-block" [disableBorder]="false" [inputName]="'timecode[' + i + ']'" class="d-block" enableBorder="true" [inputName]="'timecode[' + i + ']'"
[maxTimestamp]="publishedVideo?.duration" formControlName="timecode" [maxTimestamp]="publishedVideo?.duration" formControlName="timecode"
></my-timestamp-input> ></my-timestamp-input>

1
client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.html
View File

@ -29,6 +29,7 @@
</div> </div>
<input <input
class="peertube-button primary-button"
[disabled]="firstStepPermanentLive !== true && firstStepPermanentLive !== false" [disabled]="firstStepPermanentLive !== true && firstStepPermanentLive !== false"
type="button" i18n-value value="Go Live" (click)="goLive()" type="button" i18n-value value="Go Live" (click)="goLive()"
/> />

2
client/src/app/+videos/+video-edit/video-add-components/video-send.scss
View File

@ -13,6 +13,8 @@ $width-size: 275px;
} }
.first-step-block { .first-step-block {
--input-bg: #{pvar(--bg-secondary-500)};
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;

13
client/src/app/+videos/+video-edit/video-add.component.html
View File

@ -42,15 +42,18 @@
<ng-container i18n>Instead, <a class="text-decoration-underline alert-link" routerLink="/admin/overview/users">create a dedicated account</a> to upload your videos.</ng-container> <ng-container i18n>Instead, <a class="text-decoration-underline alert-link" routerLink="/admin/overview/users">create a dedicated account</a> to upload your videos.</ng-container>
</my-alert> </my-alert>
<my-channels-setup-message></my-channels-setup-message>
<my-user-quota *ngIf="!isInSecondStep() || secondStepType === 'go-live'"></my-user-quota> <my-user-quota *ngIf="!isInSecondStep() || secondStepType === 'go-live'"></my-user-quota>
<div class="title-page" *ngIf="isInSecondStep()"> <div class="title-page" *ngIf="isInSecondStep()">
<ng-container *ngIf="secondStepType === 'import-url' || secondStepType === 'import-torrent'" i18n>Import {{ videoName }}</ng-container> @if (secondStepType === 'import-url' || secondStepType === 'import-torrent') {
<ng-container *ngIf="secondStepType === 'upload'" i18n>Upload {{ videoName }}</ng-container> <ng-container i18n>Import {{ videoName }}</ng-container>
} @else if (secondStepType === 'upload') {
<ng-container i18n>Upload {{ videoName }}</ng-container>
}
</div> </div>
<my-channels-setup-message></my-channels-setup-message>
<div ngbNav #nav="ngbNav" class="nav-tabs video-add-nav" [activeId]="activeNav" (activeIdChange)="onNavChange($event)" [ngClass]="{ 'hide-nav': !!secondStepType }"> <div ngbNav #nav="ngbNav" class="nav-tabs video-add-nav" [activeId]="activeNav" (activeIdChange)="onNavChange($event)" [ngClass]="{ 'hide-nav': !!secondStepType }">
<ng-container ngbNavItem="upload"> <ng-container ngbNavItem="upload">
<a ngbNavLink> <a ngbNavLink>
@ -93,6 +96,6 @@
</ng-container> </ng-container>
</div> </div>
<div [ngbNavOutlet]="nav"></div> <div class="nav-content" [ngbNavOutlet]="nav"></div>
</div> </div>
} }

4
client/src/app/+videos/+video-edit/video-add.component.scss
View File

@ -37,10 +37,6 @@ $nav-link-height: 40px;
} }
} }
.margin-content {
padding-top: 20px;
}
:host ::ng-deep .video-add-nav { :host ::ng-deep .video-add-nav {
@include peertube-nav-tabs($border-width, $border-type, $border-color, $nav-link-height); @include peertube-nav-tabs($border-width, $border-type, $border-color, $nav-link-height);

5
client/src/app/+videos/+video-edit/video-update.component.html
View File

@ -1,8 +1,5 @@
<div class="margin-content"> <div class="margin-content">
<div class="title-page"> <h1 class="title-page" i18n>Update {{ videoDetails?.name }}</h1>
<span class="me-1" i18n>Update</span>
<a [routerLink]="getVideoUrl()">{{ videoDetails?.name }}</a>
</div>
<my-upload-progress <my-upload-progress
[isUploading]="isReplacingVideoFile" [uploadPercents]="videoUploadPercents" [error]="uploadError" [uploaded]="updateDone" [isUploading]="isReplacingVideoFile" [uploadPercents]="videoUploadPercents" [error]="uploadError" [uploaded]="updateDone"

13
client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss
View File

@ -53,24 +53,17 @@ form {
::ng-deep .help-tooltip-button { ::ng-deep .help-tooltip-button {
my-global-icon { my-global-icon {
color: pvar(--input-placeholder);
height: $markdown-icon-height; height: $markdown-icon-height;
width: $markdown-icon-width; width: $markdown-icon-width;
svg { svg {
color: pvar(--input-border-color);
fill: pvar(--input-border-color);
border-radius: 3px; border-radius: 3px;
} }
} }
&:focus, &:focus my-global-icon {
&:active, color: pvar(--input-fg);
&:hover {
my-global-icon svg {
background-color: pvar(--input-border-color);
color: pvar(--bg);
fill: pvar(--bg);
}
} }
} }
} }

6
client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss
View File

@ -32,7 +32,7 @@
.highlighted-comment { .highlighted-comment {
display: inline-block; display: inline-block;
background-color: pvar(--bg-secondary-500); background-color: pvar(--bg-secondary-400);
color: pvar(--fg); color: pvar(--fg);
padding: 0 5px; padding: 0 5px;
font-size: 13px; font-size: 13px;
@ -48,7 +48,8 @@
.video-author { .video-author {
height: 20px; height: 20px;
background-color: #888888; background-color: pvar(--bg-secondary-400);
color: pvar(--fg);
border-radius: 12px; border-radius: 12px;
margin-bottom: 2px; margin-bottom: 2px;
max-width: 100%; max-width: 100%;
@ -56,7 +57,6 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
display: inline-flex; display: inline-flex;
color: #fff !important;
@include padding-right(6px); @include padding-right(6px);
@include padding-left(6px); @include padding-left(6px);

7
client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
View File

@ -1,15 +1,16 @@
<div> <div>
<div class="title-block"> <div class="title-block">
<h2 class="title-page"> <h2>
{totalNotDeletedComments, plural, =0 {Comments} =1 {1 Comment} other {{{totalNotDeletedComments}} Comments}} {totalNotDeletedComments, plural, =0 {Comments} =1 {1 Comment} other {{{totalNotDeletedComments}} Comments}}
</h2> </h2>
<my-feed [syndicationItems]="syndicationItems"></my-feed> <my-feed [syndicationItems]="syndicationItems"></my-feed>
<div ngbDropdown class="d-inline-block ms-4 dropdown-root"> <div ngbDropdown class="d-inline-block ms-auto dropdown-root">
<button class="btn btn-sm btn-outline-secondary" id="dropdown-sort-comments" ngbDropdownToggle i18n> <button class="peertube-button tertiary-button" id="dropdown-sort-comments" ngbDropdownToggle i18n>
SORT BY SORT BY
</button> </button>
<div ngbDropdownMenu aria-labelledby="dropdown-sort-comments"> <div ngbDropdownMenu aria-labelledby="dropdown-sort-comments">
<button (click)="handleSortChange('-createdAt')" ngbDropdownItem i18n>Most recent first (default)</button> <button (click)="handleSortChange('-createdAt')" ngbDropdownItem i18n>Most recent first (default)</button>
<button (click)="handleSortChange('-totalReplies')" ngbDropdownItem i18n>Most replies first</button> <button (click)="handleSortChange('-totalReplies')" ngbDropdownItem i18n>Most replies first</button>

7
client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss
View File

@ -16,8 +16,11 @@
} }
.title-block { .title-block {
.title-page { > h2 {
@include margin-right(0); display: inline-block;
margin-bottom: 1.5rem;
@include font-size(1.25rem);
} }
my-feed { my-feed {

2
client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.html
View File

@ -1,7 +1,7 @@
<div class="other-videos" [ngClass]="{ 'display-as-row': displayAsRow }"> <div class="other-videos" [ngClass]="{ 'display-as-row': displayAsRow }">
@if (videos.length !== 0) { @if (videos.length !== 0) {
<div class="title-page-container"> <div class="title-page-container">
<h2 i18n class="title-page">Other videos</h2> <h2 i18n>Other videos</h2>
<div <div
*ngIf="!playlist" class="title-page-autoplay" *ngIf="!playlist" class="title-page-autoplay"

5
client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.scss
View File

@ -8,9 +8,10 @@
margin-bottom: 25px; margin-bottom: 25px;
flex-wrap: wrap-reverse; flex-wrap: wrap-reverse;
.title-page { > h2 {
margin-bottom: unset; margin-bottom: 0;
margin-top: 0; margin-top: 0;
font-size: 1.25rem;
@include margin-right(.5rem !important); @include margin-right(.5rem !important);
} }

2
client/src/app/+videos/+video-watch/video-watch.component.html
View File

@ -107,7 +107,7 @@
<my-video-attributes [video]="video"></my-video-attributes> <my-video-attributes [video]="video"></my-video-attributes>
<my-video-comments <my-video-comments
class="border-top" class="border-top pt-3"
[video]="video" [video]="video"
[videoPassword]="videoPassword" [videoPassword]="videoPassword"
[user]="user" [user]="user"

4
client/src/app/core/theme/theme.service.ts
View File

@ -207,14 +207,14 @@ export class ThemeService {
const mainColorHSL = toHSLA(parse(mainColor)) const mainColorHSL = toHSLA(parse(mainColor))
let lastColorHSL = { ...mainColorHSL }
// Inject in alphabetical order for easy debug // Inject in alphabetical order for easy debug
const toInject: { id: number, key: string, value: string }[] = [ const toInject: { id: number, key: string, value: string }[] = [
{ id: 500, key: `--${prefix}-500`, value: this.toHSLStr(mainColorHSL) } { id: 500, key: `--${prefix}-500`, value: this.toHSLStr(mainColorHSL) }
] ]
for (const j of [ -1, 1 ]) { for (const j of [ -1, 1 ]) {
let lastColorHSL = { ...mainColorHSL }
for (let i = 1; i <= 9; i++) { for (let i = 1; i <= 9; i++) {
const suffix = 500 + (50 * i * j) const suffix = 500 + (50 * i * j)
const key = `--${prefix}-${suffix}` const key = `--${prefix}-${suffix}`

20
client/src/app/header/header.component.scss
View File

@ -5,10 +5,11 @@
.root { .root {
--co-logo-size: 34px; --co-logo-size: 34px;
--co-root-padding: 1.5rem;
background-color: pvar(--bg); background-color: pvar(--bg);
padding: 1.5rem; padding: var(--co-root-padding);
width: 100%; width: 100%;
display: flex; display: flex;
@ -34,6 +35,7 @@
width: 100%; width: 100%;
@include ellipsis; @include ellipsis;
@include margin-left(10px);
} }
.icon-logo { .icon-logo {
@ -45,8 +47,6 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
@include margin-right(10px);
} }
my-search-typeahead { my-search-typeahead {
@ -135,15 +135,15 @@ my-actor-avatar {
@media screen and (max-width: $small-view) { @media screen and (max-width: $small-view) {
.root { .root {
padding: 1rem; --co-root-padding: 1rem;
} }
my-search-typeahead { my-search-typeahead {
@include margin-right(0.5rem); @include margin-right(0.5rem);
} }
.margin-button.tertiary-button { .margin-button[theme=tertiary] {
@include margin-right(0); @include margin-right(5px);
} }
my-actor-avatar { my-actor-avatar {
@ -177,8 +177,8 @@ my-actor-avatar {
.root { .root {
--co-logo-size: 48px; --co-logo-size: 48px;
padding: 1rem;
display: grid; display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
row-gap: 0.5rem; row-gap: 0.5rem;
justify-content: space-between; justify-content: space-between;
@ -196,11 +196,15 @@ my-actor-avatar {
my-search-typeahead { my-search-typeahead {
grid-row: 2 !important; grid-row: 2 !important;
grid-column: 1 / 4; grid-column: 1 / 4;
max-width: none; max-width: 100%;
@include margin-right(0); @include margin-right(0);
} }
.peertube-title {
@include margin-right(5px)
}
.instance-name { .instance-name {
display: none; display: none;
} }

9
client/src/app/header/notification-dropdown.component.html
View File

@ -69,10 +69,11 @@
[markAllAsReadSubject]="markAllAsReadSubject" (notificationsLoaded)="onNotificationLoaded()" [markAllAsReadSubject]="markAllAsReadSubject" (notificationsLoaded)="onNotificationLoaded()"
></my-user-notifications> ></my-user-notifications>
<a *ngIf="loaded" class="all-notifications" routerLink="/my-account/notifications" #notifications (click)="onNavigate(notifications)"> <div class="all-notifications">
<my-global-icon class="me-1" iconName="bell" aria-hidden="true"></my-global-icon> <a *ngIf="loaded" class="text-decoration-underline" routerLink="/my-account/notifications" #notifications (click)="onNavigate(notifications)" i18n>
<span i18n>See all your notifications</span> View all
</a> </a>
</div>
</div> </div>
</div> </div>

11
client/src/app/header/notification-dropdown.component.scss
View File

@ -50,7 +50,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
border-bottom: 1px solid $separator-border-color; border-bottom: 1px solid $separator-border-color-on-secondary;
align-items: center; align-items: center;
padding: 0 12px; padding: 0 12px;
font-size: 14px; font-size: 14px;
@ -61,17 +61,10 @@
} }
.all-notifications { .all-notifications {
border-top: 1px solid pvar(--bg-secondary-300); border-top: 1px solid $separator-border-color-on-secondary;
margin-top: -1px; // To not have 2 borders with the last notification margin-top: -1px; // To not have 2 borders with the last notification
text-align: center; text-align: center;
font-weight: $font-semibold;
color: pvar(--fg);
padding: 0.75rem 0; padding: 0.75rem 0;
text-decoration: underline !important;
&:hover {
opacity: 0.85;
}
} }
} }
} }

4
client/src/app/header/search-typeahead.component.html
View File

@ -28,7 +28,7 @@
<!-- suggestion help, not shown until one of the suggestions is selected and specific to that suggestion --> <!-- suggestion help, not shown until one of the suggestions is selected and specific to that suggestion -->
<div *ngIf="showSearchGlobalHelp()" id="typeahead-suggestion-help" class="overflow-hidden"> <div *ngIf="showSearchGlobalHelp()" id="typeahead-suggestion-help" class="overflow-hidden">
<div class="d-flex justify-content-between"> <div class="d-flex justify-content-between">
<div class="small-title mb-2" i18n>GLOBAL SEARCH</div> <div class="section-label mb-2" i18n>GLOBAL SEARCH</div>
<span *ngIf="serverConfig" class="muted" i18n>using {{ serverConfig.search.searchIndex.url }}</span> <span *ngIf="serverConfig" class="muted" i18n>using {{ serverConfig.search.searchIndex.url }}</span>
</div> </div>
@ -39,7 +39,7 @@
<!-- search instructions, when search input is empty --> <!-- search instructions, when search input is empty -->
<div [hidden]="this.search" id="typeahead-input-help" class="overflow-hidden"> <div [hidden]="this.search" id="typeahead-input-help" class="overflow-hidden">
<span class="muted" i18n>Your query will be matched against video names or descriptions, channel names.</span> <span class="muted" i18n>Your query will be matched against video names or descriptions, channel names.</span>
<div class="mt-3 mb-2 small-title" i18n>ADVANCED SEARCH</div> <div class="mt-3 mb-2 section-label" i18n>ADVANCED SEARCH</div>
<ul> <ul>
<li> <li>

4
client/src/app/header/search-typeahead.component.scss
View File

@ -116,10 +116,6 @@
} }
} }
.small-title {
@include in-content-small-title;
}
my-suggestion { my-suggestion {
width: 100%; width: 100%;
} }

4
client/src/app/menu/quick-settings-modal.component.html
View File

@ -9,7 +9,7 @@
<div class="modal-body"> <div class="modal-body">
<my-alert i18n type="primary">These settings apply only to your session on this instance.</my-alert> <my-alert i18n type="primary">These settings apply only to your session on this instance.</my-alert>
<h5 i18n class="mt-4 mb-2">Videos</h5> <h5 i18n class="section-label mt-4 mb-2">VIDEOS</h5>
<my-user-video-settings <my-user-video-settings
*ngIf="!isUserLoggedIn()" *ngIf="!isUserLoggedIn()"
@ -17,7 +17,7 @@
> >
</my-user-video-settings> </my-user-video-settings>
<h5 i18n class="mt-4 mb-2">Interface</h5> <h5 i18n class="section-label mt-4 mb-2">INTERFACE</h5>
<my-user-interface-settings <my-user-interface-settings
*ngIf="!isUserLoggedIn()" *ngIf="!isUserLoggedIn()"

6
client/src/app/modal/admin-welcome-modal.component.html
View File

@ -11,19 +11,19 @@
<div class="block-documentation"> <div class="block-documentation">
<div class="columns"> <div class="columns">
<a class="link-block" href="https://docs.joinpeertube.org/maintain/tools" target="_blank" i18n-title title="Go to the CLI documentation"> <a class="link-block" href="https://docs.joinpeertube.org/maintain/tools" target="_blank" i18n-title title="Go to the CLI documentation">
<h5 i18n class="underline-orange">CLI documentation</h5> <h5 i18n class="link-primary">CLI documentation</h5>
<div i18n>Upload or import videos, parse logs, prune storage directories, reset user password...</div> <div i18n>Upload or import videos, parse logs, prune storage directories, reset user password...</div>
</a> </a>
<a class="link-block" href="https://docs.joinpeertube.org/admin/following-instances" target="_blank" i18n-title title="Go to the admin documentation"> <a class="link-block" href="https://docs.joinpeertube.org/admin/following-instances" target="_blank" i18n-title title="Go to the admin documentation">
<h5 i18n class="underline-orange">Admin documentation</h5> <h5 i18n class="link-primary">Admin documentation</h5>
<div i18n>Managing users, following other instances, dealing with spammers...</div> <div i18n>Managing users, following other instances, dealing with spammers...</div>
</a> </a>
<a class="link-block" href="https://docs.joinpeertube.org/use/setup-account" target="_blank" i18n-title title="Go to the user documentation"> <a class="link-block" href="https://docs.joinpeertube.org/use/setup-account" target="_blank" i18n-title title="Go to the user documentation">
<h5 i18n class="underline-orange">User documentation</h5> <h5 i18n class="link-primary">User documentation</h5>
<div i18n>Setup your account, managing video playlists, discover third-party applications...</div> <div i18n>Setup your account, managing video playlists, discover third-party applications...</div>
</a> </a>

8
client/src/app/shared/shared-abuse-list/abuse-details.component.html
View File

@ -11,9 +11,7 @@
class="chip me-1" class="chip me-1"
> >
<my-actor-avatar size="18" [actor]="abuse.reporterAccount" actorType="account"></my-actor-avatar> <my-actor-avatar size="18" [actor]="abuse.reporterAccount" actorType="account"></my-actor-avatar>
<div> <span class="muted">{{ abuse.reporterAccount.nameWithHost }}</span>
<span class="muted">{{ abuse.reporterAccount.nameWithHost }}</span>
</div>
</a> </a>
<a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }" <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }"
@ -32,9 +30,7 @@
class="chip me-1" class="chip me-1"
> >
<my-actor-avatar size="18" [actor]="abuse.flaggedAccount" actorType="account"></my-actor-avatar> <my-actor-avatar size="18" [actor]="abuse.flaggedAccount" actorType="account"></my-actor-avatar>
<div> <span class="muted">{{ abuse.flaggedAccount ? abuse.flaggedAccount.nameWithHost : '' }}</span>
<span class="muted">{{ abuse.flaggedAccount ? abuse.flaggedAccount.nameWithHost : '' }}</span>
</div>
</a> </a>
<a *ngIf="isAdminView" [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }" <a *ngIf="isAdminView" [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }"

4
client/src/app/shared/shared-abuse-list/abuse-details.component.scss
View File

@ -3,7 +3,7 @@
@use '_miniature' as *; @use '_miniature' as *;
.comment-html { .comment-html {
background-color: #ececec; background-color: pvar(--bg-secondary-400);
padding: 10px; padding: 10px;
} }
@ -17,5 +17,5 @@
} }
my-global-icon[iconName=flag] { my-global-icon[iconName=flag] {
width: 15px; @include global-icon-size(15px);
} }

5
client/src/app/shared/shared-forms/input-switch.component.scss
View File

@ -12,7 +12,7 @@ input {
text-indent: -9999px; text-indent: -9999px;
width: 35px; width: 35px;
height: 20px; height: 20px;
background: #cccccc; background: pvar(--input-bg);
display: block; display: block;
border-radius: 100px; border-radius: 100px;
position: relative; position: relative;
@ -25,7 +25,7 @@ input {
left: 3px; left: 3px;
width: 14px; width: 14px;
height: 14px; height: 14px;
background: pvar(--on-primary); background: pvar(--fg-300);
border-radius: 50%; border-radius: 50%;
transition: 0.3s ease-out; transition: 0.3s ease-out;
} }
@ -41,6 +41,7 @@ input {
&::after { &::after {
left: calc(100% - 3px); left: calc(100% - 3px);
transform: translateX(-100%); transform: translateX(-100%);
background: pvar(--on-primary);
} }
} }

2
client/src/app/shared/shared-forms/timestamp-input.component.html
View File

@ -1,5 +1,5 @@
<p-inputMask <p-inputMask
[disabled]="disabled" [(ngModel)]="timestampString" (onBlur)="onBlur()" [disabled]="disabled" [(ngModel)]="timestampString" (onBlur)="onBlur()"
[ngClass]="{ 'border-disabled': disableBorder }" [ngClass]="{ 'with-border': enableBorder }"
[mask]="mask" slotChar="0" (ngModelChange)="onModelChange()" [inputId]="inputName" [mask]="mask" slotChar="0" (ngModelChange)="onModelChange()" [inputId]="inputName"
></p-inputMask> ></p-inputMask>

18
client/src/app/shared/shared-forms/timestamp-input.component.scss
View File

@ -3,10 +3,16 @@
@use '_form-mixins' as *; @use '_form-mixins' as *;
p-inputmask { p-inputmask {
&.with-border {
--input-border-color: #{pvar(--bg-secondary-500)};
}
::ng-deep input { ::ng-deep input {
width: 100%; width: 100%;
text-align: center; text-align: center;
@include peertube-input-text(100%);
&:focus-within, &:focus-within,
&:focus { &:focus {
box-shadow: $focus-box-shadow-form; box-shadow: $focus-box-shadow-form;
@ -17,16 +23,4 @@ p-inputmask {
opacity: 0.5; opacity: 0.5;
} }
} }
&.border-disabled {
::ng-deep input {
border: 0;
}
}
&:not(.border-disabled) {
::ng-deep input {
@include peertube-input-text(100%);
}
}
} }

2
client/src/app/shared/shared-forms/timestamp-input.component.ts
View File

@ -23,7 +23,7 @@ export class TimestampInputComponent implements ControlValueAccessor, OnInit {
@Input() timestamp: number @Input() timestamp: number
@Input({ transform: booleanAttribute }) disabled = false @Input({ transform: booleanAttribute }) disabled = false
@Input({ transform: booleanAttribute }) disableBorder = true @Input({ transform: booleanAttribute }) enableBorder = false
@Input() inputName: string @Input() inputName: string
@Input() mask = '99:99:99' @Input() mask = '99:99:99'

3
client/src/app/shared/shared-instance/instance-about-accordion.component.scss
View File

@ -15,8 +15,7 @@
} }
my-global-icon { my-global-icon {
line-height: 24px; @include global-icon-size(24px);
@include margin-right(15px); @include margin-right(15px);
} }

1
client/src/app/shared/shared-main/menu/horizontal-menu.component.html
View File

@ -3,7 +3,6 @@
<my-global-icon *ngIf="h1Icon" [iconName]="h1Icon"></my-global-icon> <my-global-icon *ngIf="h1Icon" [iconName]="h1Icon"></my-global-icon>
{{ h1 }} {{ h1 }}
</h1> </h1>
<ng-template #entryTemplate let-item="item"> <ng-template #entryTemplate let-item="item">

15
client/src/app/shared/shared-main/users/signup-label.component.html
View File

@ -1,2 +1,13 @@
<ng-container i18n *ngIf="requiresApproval">Request an account</ng-container> @if (withInstanceName) {
<ng-container i18n *ngIf="!requiresApproval">Create an account</ng-container> @if (requiresApproval) {
<ng-container i18n>Request an account on {{ instanceName }}</ng-container>
} @else {
<ng-container i18n>Create an account on {{ instanceName }}</ng-container>
}
} @else {
@if (requiresApproval) {
<ng-container i18n>Request an account</ng-container>
} @else {
<ng-container i18n>Create an account</ng-container>
}
}

13
client/src/app/shared/shared-main/users/signup-label.component.ts
View File

@ -1,5 +1,6 @@
import { Component, Input } from '@angular/core' import { booleanAttribute, Component, Input } from '@angular/core'
import { NgIf } from '@angular/common' import { NgIf } from '@angular/common'
import { ServerService } from '@app/core'
@Component({ @Component({
selector: 'my-signup-label', selector: 'my-signup-label',
@ -8,5 +9,13 @@ import { NgIf } from '@angular/common'
imports: [ NgIf ] imports: [ NgIf ]
}) })
export class SignupLabelComponent { export class SignupLabelComponent {
@Input() requiresApproval: boolean @Input({ transform: booleanAttribute }) requiresApproval: boolean
@Input({ transform: booleanAttribute }) withInstanceName = false
constructor (private server: ServerService) {
}
get instanceName () {
return this.server.getHTMLConfig().instance.name
}
} }

1
client/src/app/shared/shared-moderation/moderation.scss
View File

@ -48,6 +48,7 @@ my-action-dropdown.show {
.table-comment-link, .table-comment-link,
.table-account-link { .table-account-link {
text-decoration: none;
color: pvar(--fg); color: pvar(--fg);
@include disable-outline; @include disable-outline;

41
client/src/app/shared/shared-video-miniature/video-filters-header.component.html
View File

@ -1,33 +1,34 @@
<div class="root" [formGroup]="form"> <div class="root" [formGroup]="form">
<div class="scope-row" *ngIf="totalFollowing && !hideScope"> <div class="d-flex flex-wrap mb-3">
@if (filters.scope === 'local') { @for (quickFilter of quickFilters; track quickFilter) {
<ng-container i18n>Videos on {{ instanceName }}</ng-container> <my-button
} @else { theme="secondary" [icon]="quickFilter.iconName" class="me-2 mb-2"
<ng-container i18n>Videos on {{ instanceName }} and {{ totalFollowing }} other platforms</ng-container> ptRouterLink="." [ptQueryParams]="quickFilter.filters" [active]="quickFilter.isActive()" ptQueryParamsHandling="merge"
(click)="onQuickFilter($event, quickFilter)"
>{{ quickFilter.label }} </my-button>
} }
</div> </div>
<div class="d-flex flex-wrap-reverse align-items-start justify-content-between">
<div class="filters-row"> <div class="me-3">
<div class="d-flex flex-wrap"> <div class="scope-info" *ngIf="totalFollowing && !hideScope">
<div class="d-flex flex-wrap me-2"> @if (filters.scope === 'local') {
@for (quickFilter of quickFilters; track quickFilter) { <ng-container i18n>Videos on <strong>{{ instanceName }}</strong></ng-container>
<my-button } @else {
theme="secondary" [icon]="quickFilter.iconName" class="me-2 mb-2" <ng-container i18n>Videos on <strong>{{ instanceName }}</strong> and <strong>{{ totalFollowing }}</strong> other platforms</ng-container>
ptRouterLink="." [ptQueryParams]="quickFilter.filters" [active]="quickFilter.isActive()" ptQueryParamsHandling="merge"
(click)="onQuickFilter($event, quickFilter)"
>{{ quickFilter.label }} </my-button>
} }
</div> </div>
<div class="filters-summary d-inline-block"> <div class="filters-summary d-inline-block">
<div class="d-inline-block active-filters"> <div class="d-inline-block active-filters">
@for (filter of filters.getActiveFilters(); track filter.key + (filter.value || '')) { @for (filter of filters.getActiveFilters(); track filter.key + (filter.value || '')) {
<div class="d-inline-block"> @if (filter.key !== 'scope') {
<span i18n *ngIf="filter.value">{{ filter.label }}: </span> <div class="d-inline-block">
<strong>{{ getFilterValue(filter) || filter.label }}</strong> <span i18n *ngIf="filter.value">{{ filter.label }}: </span>
</div> <strong>{{ getFilterValue(filter) || filter.label }}</strong>
</div>
}
} }
</div> </div>
@ -47,7 +48,7 @@
</div> </div>
</div> </div>
<div class="d-flex flex-wrap align-items-center ms-3" > <div class="d-flex flex-wrap align-items-center mb-2">
<label for="sort-videos" i18n class="select-label">Sort by:</label> <label for="sort-videos" i18n class="select-label">Sort by:</label>
<my-select-options inputId="sort-videos" class="d-inline-block me-2" formControlName="sort" [items]="sortItems"></my-select-options> <my-select-options inputId="sort-videos" class="d-inline-block me-2" formControlName="sort" [items]="sortItems"></my-select-options>

16
client/src/app/shared/shared-video-miniature/video-filters-header.component.scss
View File

@ -7,19 +7,15 @@ $filters-background: pvar(--bg-secondary-400);
--input-bg: #{pvar(--input-bg-in-secondary)}; --input-bg: #{pvar(--input-bg-in-secondary)};
--input-border-color: #{pvar(--input-bg-in-secondary)}; --input-border-color: #{pvar(--input-bg-in-secondary)};
margin-bottom: 45px; margin-bottom: 1rem;
// Prevent layout shift
min-height: 140px;
} }
.scope-row { .scope-info {
font-size: 20px; font-size: 20px;
color: pvar(--fg-350); color: pvar(--fg-350);
margin-bottom: 0.5rem;
}
.filters-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
} }
.select-label { .select-label {
@ -92,6 +88,8 @@ $filters-background: pvar(--bg-secondary-400);
@include margin-left(0.25rem); @include margin-left(0.25rem);
my-global-icon { my-global-icon {
color: pvar(--secondary-icon-color);
@include margin-left(5px); @include margin-left(5px);
} }

9
client/src/app/shared/shared-video-miniature/video-filters-header.component.ts
View File

@ -1,24 +1,23 @@
import { NgClass, NgIf } from '@angular/common' import { NgClass, NgIf } from '@angular/common'
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core' import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms' import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'
import { ActivatedRoute, Params, RouterLink } from '@angular/router' import { RouterLink } from '@angular/router'
import { AuthService, RedirectService } from '@app/core' import { AuthService, RedirectService } from '@app/core'
import { ServerService } from '@app/core/server/server.service' import { ServerService } from '@app/core/server/server.service'
import { NgbCollapse } from '@ng-bootstrap/ng-bootstrap' import { NgbCollapse } from '@ng-bootstrap/ng-bootstrap'
import { UserRight, VideoConstant } from '@peertube/peertube-models' import { UserRight, VideoConstant } from '@peertube/peertube-models'
import { AttributesOnly } from '@peertube/peertube-typescript-utils'
import debug from 'debug' import debug from 'debug'
import { Subscription } from 'rxjs'
import { SelectOptionsItem } from 'src/types' import { SelectOptionsItem } from 'src/types'
import { PeertubeCheckboxComponent } from '../shared-forms/peertube-checkbox.component' import { PeertubeCheckboxComponent } from '../shared-forms/peertube-checkbox.component'
import { SelectCategoriesComponent } from '../shared-forms/select/select-categories.component' import { SelectCategoriesComponent } from '../shared-forms/select/select-categories.component'
import { SelectLanguagesComponent } from '../shared-forms/select/select-languages.component' import { SelectLanguagesComponent } from '../shared-forms/select/select-languages.component'
import { SelectOptionsComponent } from '../shared-forms/select/select-options.component' import { SelectOptionsComponent } from '../shared-forms/select/select-options.component'
import { GlobalIconComponent, GlobalIconName } from '../shared-icons/global-icon.component' import { GlobalIconComponent, GlobalIconName } from '../shared-icons/global-icon.component'
import { InstanceFollowService } from '../shared-instance/instance-follow.service'
import { ButtonComponent } from '../shared-main/buttons/button.component' import { ButtonComponent } from '../shared-main/buttons/button.component'
import { PeertubeModalService } from '../shared-main/peertube-modal/peertube-modal.service' import { PeertubeModalService } from '../shared-main/peertube-modal/peertube-modal.service'
import { VideoFilterActive, VideoFilters } from './video-filters.model' import { VideoFilterActive, VideoFilters } from './video-filters.model'
import { InstanceFollowService } from '../shared-instance/instance-follow.service'
import { AttributesOnly } from '@peertube/peertube-typescript-utils'
const debugLogger = debug('peertube:videos:VideoFiltersHeaderComponent') const debugLogger = debug('peertube:videos:VideoFiltersHeaderComponent')

12
client/src/app/shared/shared-video-miniature/video-miniature.component.scss
View File

@ -204,8 +204,8 @@ $more-button-width: 40px;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
my-actor-avatar + .owner-label { my-actor-avatar {
@include margin-left(0.5rem); @include margin-right(0.5rem);
} }
.video-actions { .video-actions {
@ -232,5 +232,13 @@ $more-button-width: 40px;
.video-miniature.display-as-row { .video-miniature.display-as-row {
--co-row-thumbnail-width: #{$video-thumbnail-small-width}; --co-row-thumbnail-width: #{$video-thumbnail-small-width};
--co-row-thumbnail-height: #{$video-thumbnail-small-height}; --co-row-thumbnail-height: #{$video-thumbnail-small-height};
--co-fs-small: 0.875rem;
--co-fs-medium: 0.875rem;
--co-fs-big: 1rem;
my-actor-avatar {
display: none;
}
} }
} }

6
client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
View File

@ -98,7 +98,7 @@
display: flex; display: flex;
.miniature-name { .miniature-name {
font-size: $video-miniature-row-name-font-size; font-size: $miniature-fs-row-big;
} }
.miniature-thumbnail { .miniature-thumbnail {
@ -121,5 +121,9 @@
.miniature.display-as-row { .miniature.display-as-row {
--co-row-thumbnail-width: #{$video-thumbnail-small-width}; --co-row-thumbnail-width: #{$video-thumbnail-small-width};
--co-row-thumbnail-height: #{$video-thumbnail-small-height}; --co-row-thumbnail-height: #{$video-thumbnail-small-height};
.miniature-name {
font-size: $miniature-fs-mobile-big;
}
} }
} }

10
client/src/app/shared/standalone-notifications/user-notifications.component.scss
View File

@ -13,16 +13,21 @@
align-items: center; align-items: center;
font-size: inherit; font-size: inherit;
padding: 15px 5px 15px 10px; padding: 15px 5px 15px 10px;
border-bottom: 1px solid $separator-border-color; border-bottom: 1px solid $separator-border-color-on-secondary;
word-break: break-word; word-break: break-word;
&.unread { &.unread {
background-color: pvar(--bg-secondary-400); background-color: pvar(--bg-secondary-400);
cursor: pointer;
}
&:hover {
background-color: pvar(--bg-secondary-350);
} }
my-global-icon { my-global-icon {
width: 24px; width: 24px;
color: pvar(--fg); color: pvar(--secondary-icon-color);
@include margin-right(11px); @include margin-right(11px);
@include margin-left(3px); @include margin-left(3px);
@ -43,6 +48,7 @@
a { a {
font-weight: $font-semibold; font-weight: $font-semibold;
text-decoration: underline;
} }
} }

2
client/src/assets/images/misc/markdown.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="24" viewBox="0 0 208 128"><rect width="198" height="118" x="5" y="5" ry="10" stroke="#C6C6C6" stroke-width="10" fill="none"/><path d="M30 98V30h20l20 25 20-25h20v68H90V59L70 84 50 59v39zm125 0l-30-33h20V30h20v35h20z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width="40" height="24" viewBox="0 0 208 128"><rect width="198" height="118" x="5" y="5" ry="10" stroke="currentColor" stroke-width="10" fill="none"/><path fill="currentColor" d="M30 98V30h20l20 25 20-25h20v68H90V59L70 84 50 59v39zm125 0l-30-33h20V30h20v35h20z"/></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 284 B

After

Width:  |  Height:  |  Size: 309 B

28
client/src/sass/application.scss
View File

@ -51,6 +51,9 @@ body {
--input-border-color: var(--inputBorderColor, #{pvar(--input-bg)}); --input-border-color: var(--inputBorderColor, #{pvar(--input-bg)});
--input-bg-in-secondary: #{pvar(--bg-secondary-450)}; --input-bg-in-secondary: #{pvar(--bg-secondary-450)};
--input-check-active-fg: #{pvar(--on-primary)};
--input-check-active-bg: #{pvar(--primary)};
--input-y-padding: 5px; --input-y-padding: 5px;
--input-x-padding: 20px; --input-x-padding: 20px;
@ -78,6 +81,10 @@ body {
--header-height: #{$header-height}; --header-height: #{$header-height};
@media screen and (max-width: $small-view) {
--header-height: #{$header-height-small-view};
}
@media screen and (max-width: $mobile-view) { @media screen and (max-width: $mobile-view) {
--header-height: #{$header-height-mobile-view}; --header-height: #{$header-height-mobile-view};
} }
@ -102,6 +109,9 @@ body {
--secondary-icon-color: hsl(0, 9%, 51%); --secondary-icon-color: hsl(0, 9%, 51%);
--input-placeholder: hsl(0, 9%, 51%); --input-placeholder: hsl(0, 9%, 51%);
--input-check-active-fg: #{pvar(--bg)};
--input-check-active-bg: #{pvar(--fg-250)};
--alert-primary-fg: #{pvar(--on-primary)}; --alert-primary-fg: #{pvar(--on-primary)};
--alert-primary-bg: #{pvar(--primary-200)}; --alert-primary-bg: #{pvar(--primary-200)};
--alert-primary-border-color: #{pvar(--primary-300)}; --alert-primary-border-color: #{pvar(--primary-300)};
@ -204,6 +214,14 @@ code {
vertical-align: middle; vertical-align: middle;
} }
a {
color: inherit;
&:hover {
opacity: 0.8;
}
}
.main-col { .main-col {
// Don't use rfs to get exact pixels // Don't use rfs to get exact pixels
margin-inline-start: $menu-width; margin-inline-start: $menu-width;
@ -256,16 +274,6 @@ my-global-icon[iconName=external-link] {
top: -0.1em; top: -0.1em;
} }
@media screen and (max-width: #{breakpoint(xl)}) {
/* the following applies from 500px to 900px and is partially overridden from 500px to 800px by changes below to $small-view */
.main-col,
.main-col.expanded {
.title-page {
font-size: 17px;
}
}
}
@media screen and (max-width: $menu-overlay-view) { @media screen and (max-width: $menu-overlay-view) {
.menu-open { .menu-open {
overflow: hidden !important; overflow: hidden !important;

14
client/src/sass/bootstrap.scss vendored
View File

@ -218,6 +218,14 @@ body {
// Nav // Nav
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
.nav:not(.nav-pills) {
--bs-nav-link-padding-x: 0;
.nav-link {
@include margin-right(2rem);
}
}
.nav .nav-link { .nav .nav-link {
display: flex !important; display: flex !important;
align-items: center; align-items: center;
@ -281,11 +289,15 @@ body {
.accordion-button { .accordion-button {
font-size: 18px; font-size: 18px;
my-global-icon {
color: pvar(--secondary-icon-color);
}
&:not(.collapsed) { &:not(.collapsed) {
font-weight: $font-bold; font-weight: $font-bold;
my-global-icon { my-global-icon {
color: pvar(--primary-400); color: pvar(--fg);
} }
} }
} }

10
client/src/sass/class-helpers/_common.scss
View File

@ -49,7 +49,7 @@
.callout { .callout {
padding: 1.25rem; padding: 1.25rem;
border: 1px solid #eee; border: 1px solid pvar(--bg-secondary-400);
border-radius: 0.25rem; border-radius: 0.25rem;
position: relative; position: relative;
@ -57,7 +57,7 @@
position: relative; position: relative;
top: -5px; top: -5px;
left: -10px; left: -10px;
color: #6c757d !important; color: pvar(--fg-400) !important;
font-size: 1rem; font-size: 1rem;
font-weight: $font-bold; font-weight: $font-bold;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
@ -69,7 +69,7 @@
} }
&.callout-primary { &.callout-primary {
border-color: pvar(--primary-100); border-color: pvar(--primary-350);
&:not(.callout-light) { &:not(.callout-light) {
border-left-color: pvar(--primary); border-left-color: pvar(--primary);
@ -96,6 +96,10 @@
color: pvar(--alert-primary-fg) !important; color: pvar(--alert-primary-fg) !important;
} }
.link-primary {
color: inherit !important;
}
.secondary-button { .secondary-button {
@include secondary-button( @include secondary-button(
$fg: pvar(--alert-primary-fg), $fg: pvar(--alert-primary-fg),

33
client/src/sass/class-helpers/_menu.scss
View File

@ -38,36 +38,15 @@
} }
} }
.title-page-v2 {
font-weight: normal;
font-size: 15px;
padding: 35px 25px;
}
.title-page { .title-page {
margin-top: 30px; margin-bottom: 1.5rem;
margin-bottom: 25px; color: pvar(--fg-400);
color: pvar(--fg); @include font-size(2rem);
display: inline-block;
font-weight: $font-semibold;
font-size: 1.25rem;
@include margin-right(55px); my-global-icon {
@include global-icon-size(28px);
a { @include margin-right(0.5rem);
color: inherit;
@include disable-default-a-behaviour;
&:hover {
color: inherit;
opacity: 0.8;
}
}
@media screen and (max-width: $mobile-view) {
@include margin-left(15px);
} }
} }

8
client/src/sass/class-helpers/_text.scss
View File

@ -70,13 +70,13 @@
font-weight: $font-semibold; font-weight: $font-semibold;
line-height: 1.1; line-height: 1.1;
@include underline-orange; @include underline-primary;
&:hover { &:hover {
color: pvar(--fg); color: pvar(--fg);
opacity: 0.8; opacity: 0.8;
@include underline-orange; @include underline-primary;
} }
} }
@ -92,10 +92,6 @@
} }
} }
.underline-orange {
@include underline-orange;
}
.section-label { .section-label {
@include section-label; @include section-label;
} }

2
client/src/sass/include/_badges.scss
View File

@ -9,6 +9,8 @@
font-weight: $font-semibold; font-weight: $font-semibold;
line-height: 1.1; line-height: 1.1;
max-width: 100%; max-width: 100%;
white-space: normal;
word-break: normal;
&.badge-fs-normal { &.badge-fs-normal {
font-size: 100%; font-size: 100%;

31
client/src/sass/include/_form-mixins.scss
View File

@ -86,7 +86,7 @@
padding: pvar(--input-y-padding) calc(#{pvar(--input-x-padding)} + 23px) pvar(--input-y-padding) pvar(--input-x-padding); padding: pvar(--input-y-padding) calc(#{pvar(--input-x-padding)} + 23px) pvar(--input-y-padding) pvar(--input-x-padding);
position: relative; position: relative;
border: 0; border: 0 !important;
appearance: none; appearance: none;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -148,9 +148,9 @@
content: ''; content: '';
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: -1px;
width: 18px; width: 20px;
height: 18px; height: 20px;
border: 2px solid pvar(--fg-300); border: 2px solid pvar(--fg-300);
border-radius: 100%; border-radius: 100%;
} }
@ -158,11 +158,11 @@
[type=radio]:checked + label::after, [type=radio]:checked + label::after,
[type=radio]:not(:checked) + label::after { [type=radio]:not(:checked) + label::after {
content: ''; content: '';
width: 8px; width: 10px;
height: 8px; height: 10px;
background: pvar(--primary); background: pvar(--input-check-active-bg);
position: absolute; position: absolute;
top: 5px; top: 4px;
left: 5px; left: 5px;
border-radius: 100%; border-radius: 100%;
transition: all 0.2s ease; transition: all 0.2s ease;
@ -212,29 +212,30 @@
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
top: 3px; top: 4px;
left: 6px; left: 6px;
width: 5px; width: 5px;
height: 8px; height: 7px;
opacity: 0; opacity: 0;
transform: rotate(45deg) scale(0); transform: rotate(45deg) scale(0);
border-right: 2px solid pvar(--on-primary); border-right: 2px solid pvar(--input-check-active-fg);
border-bottom: 2px solid pvar(--on-primary); border-bottom: 2px solid pvar(--input-check-active-fg);
} }
} }
&:checked + span { &:checked + span {
background: pvar(--fg-400); background: pvar(--input-check-active-bg);
animation: jelly 0.6s ease; animation: jelly 0.6s ease;
&::before { &::before {
content: ''; content: '';
width: 100%; width: 100%;
height: 100%; height: 100%;
background: pvar(--primary); background: pvar(--input-check-active-bg);
position: absolute; position: absolute;
left: 0;
transition: all 0.2s ease; transition: all 0.2s ease;
border: 2px solid transparent; border: 2px solid pvar(--input-check-active-fg);
border-radius: 2px; border-radius: 2px;
} }

11
client/src/sass/include/_mixins.scss
View File

@ -3,7 +3,7 @@
@use '_variables' as *; @use '_variables' as *;
@import '_bootstrap-mixins'; @import '_bootstrap-mixins';
@mixin underline-orange { @mixin underline-primary {
text-decoration: underline !important; text-decoration: underline !important;
text-decoration-color: pvar(--border-primary) !important; text-decoration-color: pvar(--border-primary) !important;
text-underline-offset: 0.25em !important; text-underline-offset: 0.25em !important;
@ -135,15 +135,6 @@
} }
} }
@mixin in-content-small-title {
text-transform: uppercase;
color: pvar(--fg);
font-weight: $font-bold;
font-size: 13px;
@include underline-orange();
}
@mixin row-blocks ($column-responsive: true, $min-height: 130px, $separator: true) { @mixin row-blocks ($column-responsive: true, $min-height: 130px, $separator: true) {
display: flex; display: flex;
min-height: $min-height; min-height: $min-height;

25
client/src/sass/include/_variables.scss
View File

@ -21,7 +21,8 @@ $white: #fff;
$button-font-size: 1rem; $button-font-size: 1rem;
$header-height: 94px; $header-height: 94px;
$header-height-mobile-view: 144px; $header-height-small-view: 74px;
$header-height-mobile-view: 124px;
$menu-width: 248px; $menu-width: 248px;
$menu-collapsed-width: 50px; $menu-collapsed-width: 50px;
@ -37,11 +38,19 @@ $max-channels-width: 1200px;
$footer-height: 30px; $footer-height: 30px;
$footer-margin: 30px; $footer-margin: 30px;
$video-miniature-row-name-font-size: 1.3em; // ---------------------------------------------------------------------------
$video-miniature-row-mobile-name-font-size: 14px;
$video-miniature-row-info-font-size: 14px; $miniature-fs-small: 0.75rem;
$video-miniature-row-mobile-info-font-size: 12px; $miniature-fs-medium: 0.875rem;
$miniature-fs-big: 1rem;
$miniature-fs-row-small: 0.875rem;
$miniature-fs-row-medium: 1rem;
$miniature-fs-row-big: 1.25rem;
$miniature-fs-mobile-small: 0.875rem;
$miniature-fs-mobile-medium: 0.875rem;
$miniature-fs-mobile-big: 1rem;
$video-thumbnail-height: 153px; $video-thumbnail-height: 153px;
$video-thumbnail-width: 280px; $video-thumbnail-width: 280px;
@ -87,9 +96,14 @@ $variables: (
--input-fg: var(--input-fg), --input-fg: var(--input-fg),
--input-bg: var(--input-bg), --input-bg: var(--input-bg),
--input-placeholder: var(--input-placeholder), --input-placeholder: var(--input-placeholder),
--input-border-color: var(--input-border-color), --input-border-color: var(--input-border-color),
--input-bg-in-secondary: var(--input-bg-in-secondary), --input-bg-in-secondary: var(--input-bg-in-secondary),
--input-check-active-fg: var(--input-check-active-fg),
--input-check-active-bg: var(--input-check-active-bg),
--input-x-padding: var(--input-x-padding), --input-x-padding: var(--input-x-padding),
--input-y-padding: var(--input-y-padding), --input-y-padding: var(--input-y-padding),
@ -201,4 +215,5 @@ $zindex: (
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
$separator-border-color: pvar(--bg-secondary-400); $separator-border-color: pvar(--bg-secondary-400);
$separator-border-color-on-secondary: pvar(--bg-secondary-450);
$focus-box-shadow-form: #{$focus-box-shadow-dimensions} #{pvar(--fg-100)}; $focus-box-shadow-form: #{$focus-box-shadow-dimensions} #{pvar(--fg-100)};

14
client/src/sass/primeng-custom.scss
View File

@ -2,6 +2,8 @@
@use '_mixins' as *; @use '_mixins' as *;
@use '_icons' as *; @use '_icons' as *;
$hover-bg: pvar(--bg-secondary-350);
/* stylelint-disable */ /* stylelint-disable */
@import 'primeng/resources/primeng.css'; @import 'primeng/resources/primeng.css';
@ -71,7 +73,7 @@ body .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
body .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, body .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
body .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, body .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
body .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { body .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
background-color: pvar(--bg-secondary-400); background-color: $hover-bg;
color: pvar(--fg); color: pvar(--fg);
} }
body .p-paginator .p-paginator-first:focus, body .p-paginator .p-paginator-first:focus,
@ -128,7 +130,7 @@ body .p-paginator .p-paginator-pages .p-paginator-page {
border-radius: 0; border-radius: 0;
} }
body .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { body .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
background-color: pvar(--bg-secondary-400); background-color: $hover-bg;
color: pvar(--fg); color: pvar(--fg);
} }
body .p-paginator .p-paginator-pages .p-paginator-page:focus { body .p-paginator .p-paginator-pages .p-paginator-page:focus {
@ -243,7 +245,7 @@ body .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
} }
.p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
color: pvar(--fg); color: pvar(--fg);
background: pvar(--bg-secondary-400); background: $hover-bg;
} }
.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
margin: 0; margin: 0;
@ -565,7 +567,7 @@ p-chips.p-chips-clearable .p-chips-clear-icon {
background: pvar(--bg-secondary-500); background: pvar(--bg-secondary-500);
} }
.p-multiselect.p-variant-filled:not(.p-disabled):hover { .p-multiselect.p-variant-filled:not(.p-disabled):hover {
background-color: pvar(--bg-secondary-400); background-color: $hover-bg;
} }
.p-multiselect.p-variant-filled:not(.p-disabled).p-focus { .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
background-color: pvar(--bg-secondary-500); background-color: pvar(--bg-secondary-500);
@ -816,7 +818,7 @@ p-table {
.p-datatable-tbody { .p-datatable-tbody {
tr { tr {
&:hover { &:hover {
background-color: pvar(--bg-secondary-400) !important; background-color: $hover-bg !important;
} }
td { td {
@ -860,7 +862,7 @@ p-table {
color: pvar(--fg) !important; color: pvar(--fg) !important;
&.p-sortable-column:hover { &.p-sortable-column:hover {
background-color: pvar(--bg-secondary-400) !important; background-color: $hover-bg !important;
} }
&.p-sortable-column:focus-visible { &.p-sortable-column:focus-visible {

3
client/src/typings.d.ts vendored
View File

@ -7,6 +7,3 @@ interface NodeModule {
} }
declare module 'markdown-it-emoji/lib/light.mjs' declare module 'markdown-it-emoji/lib/light.mjs'
// FIXME: remove color-bits upgrade (with https://github.com/romgrk/color-bits/commit/ea01b950ab89e5ea7a85471642b95dd1fbffb68d included)
declare module 'color-bits'

8
client/yarn.lock
View File

@ -4444,10 +4444,10 @@ clone@^1.0.2:
resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e" resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg== integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
color-bits@^1.0.3: color-bits@^1.0.4:
version "1.0.3" version "1.0.4"
resolved "https://registry.yarnpkg.com/color-bits/-/color-bits-1.0.3.tgz#bd1c52eebffb4cd1e0c906161a76b7377a98dd8c" resolved "https://registry.yarnpkg.com/color-bits/-/color-bits-1.0.4.tgz#9ed0acc9bc67509493a713f60f356783f189adbf"
integrity sha512-CkCco0HfT8kWR317vK8r5hzIRcKbiM+kdhlZ/RbmEmoj5vINgzoCZ29S5cY6BMQZC49b+p2elgNj/xbdF9FOdg== integrity sha512-gcNCga5BpVlzW+ZqO+U1/4thYuJ13DsQSBzrnhBcEUUe30eF54STR/kqnPn2I18jLp0lfXDw8KJT228DTyLKXA==
color-convert@^1.9.0: color-convert@^1.9.0:
version "1.9.3" version "1.9.3"