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

Adjust light colors

Chocobozzz 2024-11-15 11:28:39 +01:00
parent 45d7858cee
commit 8de0a388fc
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
26 changed files with 261 additions and 243 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
View File

@ -11,7 +11,7 @@
<span i18n>Notification preferences</span> <span i18n>Notification preferences</span>
</a> </a>
<div class="peertube-select-container peertube-select-button ms-2 me-2"> <div class="peertube-select-container ms-2 me-2">
<select [(ngModel)]="notificationSortType" (ngModelChange)="onChangeSortColumn()" class="form-control" i18n-ariaLabel aria-label="Sort by"> <select [(ngModel)]="notificationSortType" (ngModelChange)="onChangeSortColumn()" class="form-control" i18n-ariaLabel aria-label="Sort by">
<option value="createdAt" i18n>Newest first</option> <option value="createdAt" i18n>Newest first</option>
<option value="read" [disabled]="!hasUnreadNotifications()" i18n>Unread first</option> <option value="read" [disabled]="!hasUnreadNotifications()" i18n>Unread first</option>

2
client/src/app/+my-library/my-videos/my-videos.component.html
View File

@ -21,7 +21,7 @@
<div class="videos-header d-flex justify-content-between gap-2"> <div class="videos-header d-flex justify-content-between gap-2">
<my-advanced-input-filter [emitOnInit]="false" [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter> <my-advanced-input-filter [emitOnInit]="false" [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
<div class="peertube-select-container peertube-select-button"> <div class="peertube-select-container">
<select [(ngModel)]="sort" (ngModelChange)="onChangeSortColumn()" class="form-control" i18n-ariaLabel aria-label="Sort by"> <select [(ngModel)]="sort" (ngModelChange)="onChangeSortColumn()" class="form-control" i18n-ariaLabel aria-label="Sort by">
<option value="-publishedAt" i18n>Last published first</option> <option value="-publishedAt" i18n>Last published first</option>
<option value="-createdAt" i18n>Last created first</option> <option value="-createdAt" i18n>Last created first</option>

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

@ -1,15 +1,18 @@
import { Injectable } from '@angular/core' import { Injectable } from '@angular/core'
import { HTMLServerConfig, ServerConfigTheme } from '@peertube/peertube-models'
import { logger } from '@root-helpers/logger' import { logger } from '@root-helpers/logger'
import { capitalizeFirstLetter } from '@root-helpers/string' import { capitalizeFirstLetter } from '@root-helpers/string'
import { UserLocalStorageKeys } from '@root-helpers/users' import { UserLocalStorageKeys } from '@root-helpers/users'
import { HTMLServerConfig, ServerConfigTheme } from '@peertube/peertube-models' import { format, parse, toHSLA } from 'color-bits'
import debug from 'debug'
import { environment } from '../../../environments/environment' import { environment } from '../../../environments/environment'
import { AuthService } from '../auth' import { AuthService } from '../auth'
import { PluginService } from '../plugins/plugin.service' import { PluginService } from '../plugins/plugin.service'
import { ServerService } from '../server' import { ServerService } from '../server'
import { UserService } from '../users/user.service' import { UserService } from '../users/user.service'
import { LocalStorageService } from '../wrappers/storage.service' import { LocalStorageService } from '../wrappers/storage.service'
import { darken, lighten, format, parse, blend } from 'color-bits'
const debugLogger = debug('peertube:theme')
@Injectable() @Injectable()
export class ThemeService { export class ThemeService {
@ -143,32 +146,17 @@ export class ThemeService {
} }
private injectColorPalette () { private injectColorPalette () {
const style = document.body.style const rootStyle = document.body.style
const computedStyle = getComputedStyle(document.body) const computedStyle = getComputedStyle(document.body)
// FIXME: Remove previously injected properties // FIXME: Remove previously injected properties
for (const property of this.oldInjectedProperties) { for (const property of this.oldInjectedProperties) {
style.removeProperty(property) rootStyle.removeProperty(property)
} }
this.oldInjectedProperties = [] this.oldInjectedProperties = []
const lightenRatios = [ for (const prefix of [ 'primary', 'secondary', 'main-fg' ]) {
{ suffix: 100, value: 0.8 },
{ suffix: 200, value: 0.6 },
{ suffix: 300, value: 0.4 },
{ suffix: 400, value: 0.2 },
{ suffix: 500, value: 0 }
]
const darkenRatios = [
{ suffix: 600, value: 0.2 },
{ suffix: 700, value: 0.4 },
{ suffix: 800, value: 0.6 },
{ suffix: 900, value: 0.8 }
]
for (const prefix of [ 'primary', 'secondary' ]) {
const mainColor = computedStyle.getPropertyValue('--' + prefix) const mainColor = computedStyle.getPropertyValue('--' + prefix)
if (!mainColor) { if (!mainColor) {
@ -177,14 +165,20 @@ export class ThemeService {
} }
const mainColorParsed = parse(mainColor) const mainColorParsed = parse(mainColor)
for (const { ratios, color } of [ { ratios: lightenRatios, color: parse('#fff') }, { ratios: darkenRatios, color: parse('#000') } ]) { const mainColorHSL = toHSLA(mainColorParsed)
for (const ratio of ratios) {
const key = `--${prefix}-${ratio.suffix}`
if (!computedStyle.getPropertyValue(key)) { for (let i = -8; i <= 8; i++) {
style.setProperty(key, format(blend(mainColorParsed, color, ratio.value))) const suffix = 500 + (50 * i)
this.oldInjectedProperties.push(key) const key = `--${prefix}-${suffix}`
}
if (!computedStyle.getPropertyValue(key)) {
const newLuminance = Math.max(Math.min(100, Math.round(mainColorHSL.l + (i * 5 * -1))), 0)
const newColor = `hsl(${Math.round(mainColorHSL.h)} ${Math.round(mainColorHSL.s)}% ${newLuminance}% / ${mainColorHSL.a})`
rootStyle.setProperty(key, newColor)
this.oldInjectedProperties.push(key)
debugLogger(`Injected theme palette ${key} -> ${newColor}`)
} }
} }
} }

3
client/src/app/header/header.component.html
View File

@ -1,6 +1,7 @@
<div class="root py-4 px-4 w-100 d-flex justify-content-between"> <div class="root py-4 px-4 w-100 d-flex justify-content-between">
<a class="peertube-title me-3" [routerLink]="getDefaultRoute()" [queryParams]="getDefaultRouteQuery()"> <a class="peertube-title me-3" [routerLink]="getDefaultRoute()" [queryParams]="getDefaultRouteQuery()">
<span class="icon icon-logo"></span>
<span class="icon-logo"></span>
<span class="instance-name">{{ instanceName }}</span> <span class="instance-name">{{ instanceName }}</span>
</a> </a>

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

@ -23,13 +23,14 @@
} }
} }
.icon.icon-logo { .icon-logo {
display: inline-block; display: inline-block;
width: 34px; width: 34px;
height: 34px; height: 34px;
background-repeat: no-repeat; background-repeat: no-repeat;
@include margin-left(18px);
@include margin-right(10px); @include margin-right(10px);
} }
} }
@ -69,7 +70,7 @@
} }
.username { .username {
color: pvar(--secondary); color: pvar(--main-fg-400);
} }
> .dropdown-toggle { > .dropdown-toggle {

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

@ -116,10 +116,11 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: pvar(--mainColor); background-color: pvar(--primary-400);
color: #fff; color: pvar(--main-fg-500);
border: 1px solid pvar(--main-fg-500);
font-weight: $font-bold;
font-size: 10px; font-size: 10px;
font-weight: $font-semibold;
border-radius: 16px; border-radius: 16px;
width: 16px; width: 16px;

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

@ -3,9 +3,8 @@
#search-video { #search-video {
text-overflow: ellipsis; text-overflow: ellipsis;
line-height: 42px;
@include peertube-input-text(270px, 14px); @include peertube-input-text(270px);
& { & {
padding-inline-start: 42px; // For the search icon padding-inline-start: 42px; // For the search icon

16
client/src/app/menu/menu.component.scss
View File

@ -30,11 +30,11 @@
} }
.toggle-menu { .toggle-menu {
color: pvar(--secondary); color: pvar(--secondary-750);
width: 24px; width: 24px;
height: 24px; height: 24px;
border-radius: 100%; border-radius: 100%;
background-color: pvar(--secondary-400); background-color: pvar(--secondary-450);
@include button-with-icon(20px, 0, 0, 1px); @include button-with-icon(20px, 0, 0, 1px);
@ -49,7 +49,7 @@
.menu-container:not(.collapsed) .toggle-menu { .menu-container:not(.collapsed) .toggle-menu {
position: absolute; position: absolute;
top: 20px; top: 22px;
@include right(24px); @include right(24px);
} }
@ -89,7 +89,7 @@
padding-top: 1.5rem; padding-top: 1.5rem;
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
border-radius: 14px; border-radius: 14px;
background-color: pvar(--secondary-300); background-color: pvar(--secondary-400);
} }
.menu-link, .menu-link,
@ -107,7 +107,7 @@
content: ''; content: '';
display: block; display: block;
height: 2px; height: 2px;
background: pvar(--secondary); background: pvar(--secondary-450);
margin: 1rem var(--menuXPadding); margin: 1rem var(--menuXPadding);
} }
} }
@ -144,7 +144,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
color: pvar(--fg); color: pvar(--main-fg-450);
color: #2b2f32; color: #2b2f32;
white-space: normal; white-space: normal;
word-break: break-word; word-break: break-word;
@ -170,7 +170,7 @@
line-height: 22px; line-height: 22px;
position: relative; position: relative;
top: -1px; top: -1px;
color: pvar(--secondary); color: pvar(--secondary-750);
+ *:not(.visually-hidden) { + *:not(.visually-hidden) {
@include margin-left(12px); @include margin-left(12px);
@ -185,6 +185,6 @@
.about { .about {
.description { .description {
font-size: 14px; font-size: 14px;
color: pvar(--secondary-text-emphasis); color: pvar(--main-fg-300);
} }
} }

6
client/src/app/shared/shared-main/menu/horizontal-menu.component.scss
View File

@ -3,11 +3,11 @@
.root { .root {
width: 100%; width: 100%;
border-bottom: 1px solid pvar(--secondary-text-emphasis); border-bottom: 1px solid pvar(--main-fg-300);
} }
.x-menu-entry { .x-menu-entry {
color: pvar(--secondary); color: pvar(--secondary-750);
display: inline-block; display: inline-block;
font-weight: $font-bold; font-weight: $font-bold;
white-space: nowrap; white-space: nowrap;
@ -24,7 +24,7 @@
content: ''; content: '';
display: block; display: block;
height: 4px; height: 4px;
background-color: pvar(--primary); background-color: pvar(--primary-500);
border-radius: 2px; border-radius: 2px;
position: absolute; position: absolute;
bottom: -2px; bottom: -2px;

5
client/src/app/shared/shared-main/menu/list-overflow.component.scss
View File

@ -5,6 +5,11 @@
width: 100%; width: 100%;
} }
li {
// Fix child outline on focus-visible
padding-top: 2px;
}
.list-overflow-parent { .list-overflow-parent {
display: flex; display: flex;
align-items: center; align-items: center;

11
client/src/app/shared/shared-thumbnail/video-thumbnail.component.html
View File

@ -27,9 +27,14 @@
<div class="label-overlay danger"><ng-content select="label-danger"></ng-content></div> <div class="label-overlay danger"><ng-content select="label-danger"></ng-content></div>
@if (video.isLive) { @if (video.isLive) {
<div class="live-overlay" [ngClass]="{ 'live-ended': isLiveEnded() }"> <div class="live-overlay" [ngClass]="{ 'live-streaming': isLiveStreaming(), 'ended-live': isEndedLive() }">
<ng-container i18n *ngIf="!isLiveEnded()">LIVE</ng-container> @if (isLiveStreaming()) {
<ng-container i18n *ngIf="isLiveEnded()">LIVE ENDED</ng-container> <ng-container i18n >LIVE</ng-container>
} @else if (isEndedLive()) {
<ng-container i18n>LIVE ENDED</ng-container>
} @else {
<ng-container i18n>WAIT LIVE</ng-container>
}
</div> </div>
} @else { } @else {
<div class="duration-overlay" [ariaLabel]="getDurationOverlayLabel()">{{ video.durationLabel }}</div> <div class="duration-overlay" [ariaLabel]="getDurationOverlayLabel()">{{ video.durationLabel }}</div>

27
client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
View File

@ -23,8 +23,8 @@
.label-overlay, .label-overlay,
.duration-overlay, .duration-overlay,
.live-overlay { .live-overlay {
font-size: 12px; font-size: 0.75rem;
line-height: 1.1; line-height: normal;
z-index: z(miniature); z-index: z(miniature);
@include static-thumbnail-overlay; @include static-thumbnail-overlay;
@ -39,7 +39,7 @@
font-weight: $font-bold; font-weight: $font-bold;
&.warning { background-color: #ffa500; } &.warning { background-color: #ffa500; }
&.danger { background-color: #ff0000; } &.danger { background-color: pvar(--red); }
} }
.duration-overlay, .duration-overlay,
@ -53,10 +53,23 @@
.live-overlay { .live-overlay {
font-weight: $font-bold; font-weight: $font-bold;
color: #fff; color: pvar(--secondary-300);
&:not(.live-ended) { &.live-streaming {
background-color: rgba(224, 8, 8, 0.7); color: pvar(--secondary-300);
&::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-radius: 100%;
background-color: pvar(--primary);
position: relative;
top: -1px;
@include margin-right(8px);
}
} }
} }
@ -83,6 +96,6 @@
width: 22px; width: 22px;
height: 22px; height: 22px;
@include apply-svg-color(#fff); color: pvar(--secondary-300);
} }
} }

8
client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts
View File

@ -46,10 +46,12 @@ export class VideoThumbnailComponent {
return this.addToWatchLaterText return this.addToWatchLaterText
} }
isLiveEnded () { isLiveStreaming () {
if (!this.video.state) return return this.video.isLive && this.video.state?.id === VideoState.PUBLISHED
}
return this.video.state.id === VideoState.LIVE_ENDED isEndedLive () {
return this.video.state?.id === VideoState.LIVE_ENDED
} }
getImageUrl () { getImageUrl () {

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

@ -10,9 +10,11 @@
<div class="root" [formGroup]="form"> <div class="root" [formGroup]="form">
<div class="first-row"> <div class="first-row">
<div class="active-filters"> <div class="filters-summary">
<div class="d-inline-block active-filters">{{ getActiveFilters() }}</div>
<button <button
class="pastille filters-toggle" (click)="areFiltersCollapsed = !areFiltersCollapsed" class="filters-toggle peertube-button-like-link" (click)="areFiltersCollapsed = !areFiltersCollapsed"
[attr.aria-expanded]="!areFiltersCollapsed" aria-controls="collapseBasic" [attr.aria-expanded]="!areFiltersCollapsed" aria-controls="collapseBasic"
[ngClass]="{ active: !areFiltersCollapsed }" [ngClass]="{ active: !areFiltersCollapsed }"
> >
@ -24,25 +26,6 @@
<my-global-icon iconName="chevrons-up"></my-global-icon> <my-global-icon iconName="chevrons-up"></my-global-icon>
</button> </button>
<div
*ngFor="let activeFilter of filters.getActiveFilters()"
class="active-filter pastille button-unstyle" [ngClass]="{ 'can-remove': activeFilter.canRemove }" [title]="getFilterTitle(activeFilter.canRemove)"
>
<span>
{{ activeFilter.label }}
<ng-container *ngIf="activeFilter.value">: {{ getFilterValue(activeFilter) }}</ng-container>
</span>
<button
*ngIf="activeFilter.canRemove" type="button" class="remove-button"
(click)="resetFilter(activeFilter.key, activeFilter.canRemove)"
i18n-title title="Remove this filter"
>
<my-global-icon iconName="cross"></my-global-icon>
</button>
</div>
</div> </div>
<label class="visually-hidden" for="sort-videos">Sort videos</label> <label class="visually-hidden" for="sort-videos">Sort videos</label>

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

@ -1,6 +1,8 @@
@use '_variables' as *; @use '_variables' as *;
@use '_mixins' as *; @use '_mixins' as *;
$filters-background: pvar(--secondary-400);
.root { .root {
margin-bottom: 45px; margin-bottom: 45px;
} }
@ -8,19 +10,15 @@
.first-row { .first-row {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} align-items: center;
.active-filters {
display: flex;
flex-wrap: wrap;
} }
.filters { .filters {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 25px; background-color: $filters-background;
padding: 1.5rem;
border-bottom: 1px solid $separator-border-color; border-radius: 14px;
input[type=radio] + label { input[type=radio] + label {
font-weight: $font-regular; font-weight: $font-regular;
@ -43,68 +41,33 @@
} }
} }
.pastille { .filters-summary {
border-radius: 24px; color: pvar(--main-fg-300);
padding: 4px 15px;
margin-bottom: 15px;
cursor: pointer;
@include margin-right(15px);
&:focus-visible {
outline: pvar(--mainColor) auto 1px;
}
} }
.filters-toggle { .filters-toggle {
border: 2px solid pvar(--mainForegroundColor); padding: 6px 0.25rem calc(6px + 0.5rem) 0.5rem;
@include margin-left(0.25rem);
my-global-icon { my-global-icon {
@include margin-left(5px); @include margin-left(5px);
} }
&.active my-global-icon { &.active {
position: relative; background-color: $filters-background;
top: -1px; border-start-start-radius: 14px;
} border-start-end-radius: 14px;
&:not(.active) {
my-global-icon ::ng-deep svg {
transform: rotate(180deg);
}
}
}
// Than have an icon
.filters-toggle,
.active-filter.can-remove {
padding: 4px 11px 4px 15px;
}
.active-filter {
background-color: pvar(--channelBackgroundColor);
display: flex;
align-items: center;
&:not(.can-remove) {
cursor: default;
}
&.can-remove:hover {
opacity: 0.9;
}
> .remove-button {
border: 0;
padding: 0;
@include margin-left(10px);
my-global-icon { my-global-icon {
width: 16px; position: relative;
color: pvar(--greyForegroundColor); top: -1px;
} }
} }
&:not(.active) my-global-icon ::ng-deep svg {
transform: rotate(180deg);
}
} }
.sort { .sort {

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

@ -140,21 +140,29 @@ export class VideoFiltersHeaderComponent implements OnInit, OnDestroy {
return serverConfig.trending.videos.algorithms.enabled.includes(sort) return serverConfig.trending.videos.algorithms.enabled.includes(sort)
} }
resetFilter (key: string, canRemove: boolean) { getActiveFilters () {
if (!canRemove) return const store: string[] = []
this.filters.reset(key) for (const activeFilter of this.filters.getActiveFilters()) {
this.patchForm(false) if (activeFilter.value) {
this.filtersChanged.emit() store.push($localize`${activeFilter.label}\: ${this.getFilterValue(activeFilter)}`)
} else {
store.push(activeFilter.label)
}
}
const output = store.reduce((p, c) => {
if (!p) return c
return $localize`${p}, ${c}`
}, '')
if (output) return `${output}.`
return output
} }
getFilterTitle (canRemove: boolean) { private getFilterValue (filter: VideoFilterActive) {
if (canRemove) return $localize`Remove this filter`
return ''
}
getFilterValue (filter: VideoFilterActive) {
if ((filter.key === 'categoryOneOf' || filter.key === 'languageOneOf') && Array.isArray(filter.rawValue)) { if ((filter.key === 'categoryOneOf' || filter.key === 'languageOneOf') && Array.isArray(filter.rawValue)) {
if (filter.rawValue.length > 2) { if (filter.rawValue.length > 2) {
return filter.rawValue.length return filter.rawValue.length

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

@ -34,15 +34,19 @@ $more-button-width: 40px;
font-size: var(--fs-small); font-size: var(--fs-small);
} }
.date-and-views {
color: pvar(--main-fg-300);
}
.owner-label { .owner-label {
display: block; display: block;
color: pvar(--greyForegroundColor); color: pvar(--main-fg-500);
@include disable-default-a-behaviour; @include disable-default-a-behaviour;
@include ellipsis; @include ellipsis;
&:hover { &:hover {
color: $grey-foreground-hover-color; color: pvar(--main-fg-600);
} }
} }

8
client/src/app/shared/shared-video-miniature/videos-list.component.html
View File

@ -1,6 +1,6 @@
<div class="margin-content"> <div class="margin-content">
<div class="videos-header mb-4"> <div class="videos-header">
<div *ngIf="headerActions.length !== 0" class="action-block mt-3"> <div *ngIf="headerActions.length !== 0" class="action-block mt-3 mb-4">
<ng-container *ngFor="let action of headerActions"> <ng-container *ngFor="let action of headerActions">
@if (action.routerLink) { @if (action.routerLink) {
<my-button theme="secondary" [ptRouterLink]="action.routerLink" [icon]="action.iconName">{{ action.label }}</my-button> <my-button theme="secondary" [ptRouterLink]="action.routerLink" [icon]="action.iconName">{{ action.label }}</my-button>
@ -10,8 +10,8 @@
</div> </div>
<my-video-filters-header <my-video-filters-header
*ngIf="displayFilters" [displayModerationBlock]="displayModerationBlock" [hideScope]="hideScopeFilter" *ngIf="displayFilters" class="d-block mt-3"
[filters]="filters" [displayModerationBlock]="displayModerationBlock" [hideScope]="hideScopeFilter" [filters]="filters"
(filtersChanged)="onFiltersChanged(true)" (filtersChanged)="onFiltersChanged(true)"
></my-video-filters-header> ></my-video-filters-header>

12
client/src/assets/images/logo.svg
View File

@ -1,8 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="2799 -911 16 22"> <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<g> <rect width="34" height="34" rx="12" fill="currentColor"/>
<path fill="#211f20" d="M2799-911v11l8-5" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M11 16.3306V7L18 11.6653L11 16.3306Z" fill="black"/>
<path fill="#737373" d="M2799-900v11l8-6" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M11 25.6613V16.3307L18 20.996L11 25.6613Z" fill="#737373"/>
<path fill="#f1680d" d="M2807-905v10l8-5" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M18 20.9959V11.6653L25 16.3306L18 20.9959Z" fill="#F1680D"/>
<path fill="transparent" d="M2807-895v-10l-8 5z" />
</g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 290 B

After

Width:  |  Height:  |  Size: 491 B

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

@ -68,16 +68,13 @@ body {
--mainColWidth: calc(100vw - #{$menu-width}); --mainColWidth: calc(100vw - #{$menu-width});
// Create a theme system using CSS variables // Create a theme system using CSS variables
--fg: #0A0A0A; --fg: #{pvar(--main-fg-600)};
--bg :#E9DFDF; --bg: #{pvar(--secondary-300)};
--primary: #FF8F37; --primary: #F2690D;
--secondary: #8D7777; --main-fg: hsl(0 14% 12%);
// --secondary-300: #E9DFDF; --secondary: hsl(0 10% 76%);
// --secondary-400: #D4C7C7;
--secondary-text-emphasis: #553D3D;
font-family: $main-fonts; font-family: $main-fonts;
font-weight: $font-regular; font-weight: $font-regular;
@ -315,7 +312,7 @@ my-global-icon[iconName=external-link] {
ngx-loading-bar { ngx-loading-bar {
.ngx-bar { .ngx-bar {
height: 4px !important; height: 3px !important;
border-radius: 0 !important; border-radius: 0 !important;
border-start-end-radius: 6px !important; border-start-end-radius: 6px !important;
border-end-end-radius: 6px !important; border-end-end-radius: 6px !important;

12
client/src/sass/class-helpers/_buttons.scss
View File

@ -1,3 +1,4 @@
@use '_variables' as *;
@use '_mixins' as *; @use '_mixins' as *;
.peertube-button { .peertube-button {
@ -58,3 +59,14 @@
padding: 0; padding: 0;
border: 0; border: 0;
} }
.peertube-button-like-link {
padding: 0;
border: 0 !important;
text-decoration: underline;
color: pvar(--main-fg-500);
&:hover {
color: pvar(--main-fg-200);
}
}

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

@ -16,7 +16,7 @@
@include margin-right(55px); @include margin-right(55px);
&.active { &.active {
border-bottom-color: pvar(--primary); border-bottom-color: pvar(--primary-500);
} }
&:hover, &:hover,

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

@ -43,7 +43,7 @@
content: ''; content: '';
display: block; display: block;
height: 4px; height: 4px;
background-color: pvar(--primary); background-color: pvar(--primary-500);
border-radius: 2px; border-radius: 2px;
position: absolute; position: absolute;
width: 20px; width: 20px;

28
client/src/sass/include/_miniature.scss
View File

@ -1,3 +1,4 @@
@use 'sass:math';
@use '_variables' as *; @use '_variables' as *;
@use '_mixins' as *; @use '_mixins' as *;
@ -44,7 +45,7 @@
width: inherit; width: inherit;
height: inherit; height: inherit;
opacity: 0; opacity: 0;
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(46, 35, 35, 0.80);
&, &,
.icon { .icon {
@ -53,6 +54,24 @@
.icon { .icon {
@include play-icon($play-overlay-width, $play-overlay-height); @include play-icon($play-overlay-width, $play-overlay-height);
&::before {
$background-play-size: 49px;
display: block;
content: '';
width: $background-play-size;
height: $background-play-size;
top: math.round(math.div($background-play-size, 2)) * -1;
// Add some pixels at the end because it's visually better
right: #{math.round(math.div($background-play-size - $play-overlay-width, 2)) * -1 + 3};
border-radius: 100%;
position: absolute;
background-color: pvar(--primary-450);
opacity: 0.3;
}
} }
} }
@ -68,11 +87,6 @@
} }
} }
&:focus-visible {
box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
outline: none;
}
img { img {
width: inherit; width: inherit;
height: inherit; height: inherit;
@ -94,7 +108,7 @@
@mixin static-thumbnail-overlay { @mixin static-thumbnail-overlay {
display: inline-block; display: inline-block;
background-color: rgba(17, 17, 17, 0.8); background-color: rgba(17, 17, 17, 0.8);
color: #fff; color: pvar(--secondary-400);
} }
// Use margin by default, or padding if $margin is false // Use margin by default, or padding if $margin is false

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

@ -84,15 +84,10 @@
line-height: calc(#{$font-size} + #{math.round(math.div($font-size, 2))}); line-height: calc(#{$font-size} + #{math.round(math.div($font-size, 2))});
} }
@mixin rounded-line-height-1-42 ($font-size) {
line-height: math.round($font-size * 1.4285714286);
}
@mixin peertube-input-text($width, $font-size: $form-input-font-size) { @mixin peertube-input-text($width, $font-size: $form-input-font-size) {
font-size: $font-size; font-size: $font-size;
padding: 6px 20px; padding: 6px 20px;
line-height: 1.66;
width: $width; width: $width;
max-width: $width; max-width: $width;
color: pvar(--inputForegroundColor); color: pvar(--inputForegroundColor);
@ -100,16 +95,24 @@
border: 1px solid pvar(--inputBorderColor); border: 1px solid pvar(--inputBorderColor);
border-radius: 4px; border-radius: 4px;
@include rounded-line-height-1-42($font-size); @include rounded-line-height-1-5($font-size);
&::placeholder { &::placeholder {
color: pvar(--inputPlaceholderColor); color: pvar(--inputPlaceholderColor);
font-size: 14px;
} }
&[readonly] { &[readonly] {
color: pvar(--greyForegroundColor); color: pvar(--greyForegroundColor);
} }
&:focus,
&:focus-visible {
outline: 0;
border-color: pvar(--fg);
box-shadow: none;
}
@media screen and (max-width: calc(#{$width} + 40px)) { @media screen and (max-width: calc(#{$width} + 40px)) {
width: 100%; width: 100%;
} }
@ -131,8 +134,8 @@
&:active, &:active,
&:focus { &:focus {
color: pvar(--fg); color: pvar(--fg);
background-color: pvar(--primary); background-color: pvar(--primary-450);
border: 1px solid pvar(--primary); border: 1px solid pvar(--primary-450);
} }
// Override bootstrap // Override bootstrap
@ -140,8 +143,8 @@
&.btn:focus-visible, &.btn:focus-visible,
&.btn.show { &.btn.show {
color: pvar(--fg) !important; color: pvar(--fg) !important;
background-color: pvar(--primary) !important; background-color: pvar(--primary-450) !important;
border: 1px solid pvar(--primary) !important; border: 1px solid pvar(--primary-450) !important;
} }
&:hover { &:hover {
@ -155,7 +158,7 @@
} }
my-global-icon { my-global-icon {
@include apply-svg-color(pvar(--fg)); color: pvar(--fg);
} }
} }
@ -164,15 +167,15 @@
& { & {
color: pvar(--fg); color: pvar(--fg);
background-color: transparent; background-color: transparent;
border: 1px solid pvar(--secondary-400); border: 1px solid pvar(--secondary-500);
} }
&:active, &:active,
&:focus, &:focus,
&:focus-visible { &:focus-visible {
color: pvar(--fg); color: pvar(--fg);
background-color: pvar(--secondary); background-color: pvar(--secondary-450);
border-color: pvar(--secondary); border-color: pvar(--secondary-500);
} }
// Override bootstrap // Override bootstrap
@ -180,13 +183,13 @@
&.btn:focus-visible, &.btn:focus-visible,
&.btn.show { &.btn.show {
color: pvar(--fg) !important; color: pvar(--fg) !important;
background-color: pvar(--secondary) !important; background-color: pvar(--secondary-450) !important;
border-color: pvar(--secondary) !important; border-color: pvar(--secondary-500) !important;
} }
&:hover { &:hover {
color: pvar(--fg); color: pvar(--fg);
background-color: pvar(--secondary-400); background-color: pvar(--secondary-450);
} }
&[disabled] { &[disabled] {
@ -195,18 +198,18 @@
} }
my-global-icon { my-global-icon {
@include apply-svg-color(pvar(--secondary-400)); color: pvar(--secondary-750);
} }
} }
@mixin tertiary-button { @mixin tertiary-button {
color: pvar(--secondary); color: pvar(--main-fg-300);
background-color: transparent; background-color: transparent;
border: 1px solid transparent; border: 1px solid transparent;
&:hover { &:hover {
color: pvar(--secondary); color: pvar(--main-fg-300);
background-color: pvar(--secondary-300); background-color: pvar(--secondary-400);
} }
&[disabled] { &[disabled] {
@ -214,11 +217,11 @@
} }
&:active { &:active {
background-color: pvar(--secondary-200); background-color: pvar(--secondary-450);
} }
&.show { &.show {
border-color: pvar(--secondary); border-color: pvar(--main-fg-300);
} }
// Override bootstrap // Override bootstrap
@ -227,10 +230,8 @@
} }
&.btn.show { &.btn.show {
border-color: pvar(--secondary) !important; border-color: pvar(--main-fg-300) !important;
} }
@include button-focus(--secondary);
} }
@mixin rounded-icon-button { @mixin rounded-icon-button {
@ -323,14 +324,6 @@
@include peertube-button-big; @include peertube-button-big;
} }
@mixin peertube-button-outline {
display: inline-block;
border: 1px solid;
@include disable-default-a-behaviour;
@include peertube-button;
}
@mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px, $right: 0) { @mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px, $right: 0) {
my-global-icon { my-global-icon {
position: relative; position: relative;
@ -402,9 +395,7 @@
position: relative; position: relative;
height: min-content; height: min-content;
select[disabled] { @include secondary-button;
background-color: #f9f9f9;
}
@media screen and (max-width: $width) { @media screen and (max-width: $width) {
width: 100%; width: 100%;
@ -419,7 +410,7 @@
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
border: 5px solid rgba(0, 0, 0, 0); border: 5px solid rgba(0, 0, 0, 0);
border-top-color: pvar(--mainForegroundColor); border-top-color: pvar(--secondary);
margin-top: -2px; margin-top: -2px;
z-index: 100; z-index: 100;
} }
@ -427,31 +418,21 @@
select { select {
font-size: $form-input-font-size; font-size: $form-input-font-size;
padding: 3px 35px 3px 12px; font-weight: $font-semibold;
padding: 6px 43px 6px 20px;
position: relative; position: relative;
border: 1px solid pvar(--inputBorderColor); border: 0;
background: transparent none; background: transparent none;
appearance: none; appearance: none;
text-overflow: ellipsis; text-overflow: ellipsis;
color: pvar(--mainForegroundColor);
@include rounded-line-height-1-5($form-input-font-size); @include rounded-line-height-1-5($form-input-font-size);
option { &:focus,
color: #000; &:focus-visible {
} outline: 0;
} border-color: pvar(--fg);
box-shadow: none;
&.peertube-select-button {
@include secondary-button;
select {
font-weight: $font-semibold;
color: pvar(--greyForegroundColor);
border: 0;
// No border, add +1 to vertical padding
padding: 4px 35px 4px 12px;
} }
} }
} }
@ -747,7 +728,7 @@
border-top: #{math.div($height, 2)} solid transparent; border-top: #{math.div($height, 2)} solid transparent;
border-bottom: #{math.div($height, 2)} solid transparent; border-bottom: #{math.div($height, 2)} solid transparent;
border-left: $width solid rgba(255, 255, 255, 0.95); border-left: $width solid pvar(--secondary-300);
} }
@mixin on-small-main-col () { @mixin on-small-main-col () {

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

@ -88,7 +88,7 @@ $sub-menu-margin-bottom-small-view: 10px;
$activated-action-button-color: #212529; $activated-action-button-color: #212529;
$focus-box-shadow-form: 0 0 0 .2rem; $focus-box-shadow-form: 0 0 0 .2rem;
$form-input-font-size: 14px; $form-input-font-size: 16px;
$video-watch-info-margin-left: 44px; $video-watch-info-margin-left: 44px;
@ -149,19 +149,56 @@ $variables: (
--fg: var(--fg), --fg: var(--fg),
--bg: var(--bg), --bg: var(--bg),
--main-fg: var(--main-fg),
--main-fg-800: var(--main-fg-800),
--main-fg-750: var(--main-fg-750),
--main-fg-700: var(--main-fg-700),
--main-fg-650: var(--main-fg-650),
--main-fg-600: var(--main-fg-600),
--main-fg-550: var(--main-fg-550),
--main-fg-500: var(--main-fg-500),
--main-fg-450: var(--main-fg-450),
--main-fg-400: var(--main-fg-400),
--main-fg-350: var(--main-fg-350),
--main-fg-300: var(--main-fg-300),
--main-fg-250: var(--main-fg-250),
--main-fg-200: var(--main-fg-200),
--main-fg-150: var(--main-fg-150),
--main-fg-100: var(--main-fg-100),
--primary: var(--primary), --primary: var(--primary),
--primary-800: var(--primary-800),
--primary-750: var(--primary-750),
--primary-700: var(--primary-700), --primary-700: var(--primary-700),
--primary-650: var(--primary-650),
--primary-600: var(--primary-600), --primary-600: var(--primary-600),
--primary-550: var(--primary-550),
--primary-500: var(--primary-500),
--primary-450: var(--primary-450),
--primary-400: var(--primary-400), --primary-400: var(--primary-400),
--primary-350: var(--primary-350),
--primary-300: var(--primary-300), --primary-300: var(--primary-300),
--primary-250: var(--primary-250),
--primary-200: var(--primary-200), --primary-200: var(--primary-200),
--primary-150: var(--primary-150),
--primary-100: var(--primary-100),
--secondary: var(--secondary), --secondary: var(--secondary),
--secondary-800: var(--secondary-800),
--secondary-750: var(--secondary-750),
--secondary-700: var(--secondary-700),
--secondary-650: var(--secondary-650),
--secondary-600: var(--secondary-600),
--secondary-550: var(--secondary-550),
--secondary-500: var(--secondary-500),
--secondary-450: var(--secondary-450),
--secondary-400: var(--secondary-400), --secondary-400: var(--secondary-400),
--secondary-350: var(--secondary-350),
--secondary-300: var(--secondary-300), --secondary-300: var(--secondary-300),
--secondary-250: var(--secondary-250),
--secondary-200: var(--secondary-200), --secondary-200: var(--secondary-200),
--secondary-150: var(--secondary-150),
--secondary-text-emphasis: var(--secondary-text-emphasis) --secondary-100: var(--secondary-100)
); );
// SASS type check our CSS variables // SASS type check our CSS variables