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>
</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">
<option value="createdAt" i18n>Newest 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">
<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">
<option value="-publishedAt" i18n>Last published 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 { HTMLServerConfig, ServerConfigTheme } from '@peertube/peertube-models'
import { logger } from '@root-helpers/logger'
import { capitalizeFirstLetter } from '@root-helpers/string'
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 { AuthService } from '../auth'
import { PluginService } from '../plugins/plugin.service'
import { ServerService } from '../server'
import { UserService } from '../users/user.service'
import { LocalStorageService } from '../wrappers/storage.service'
import { darken, lighten, format, parse, blend } from 'color-bits'
const debugLogger = debug('peertube:theme')
@Injectable()
export class ThemeService {
@ -143,32 +146,17 @@ export class ThemeService {
}
private injectColorPalette () {
const style = document.body.style
const rootStyle = document.body.style
const computedStyle = getComputedStyle(document.body)
// FIXME: Remove previously injected properties
for (const property of this.oldInjectedProperties) {
style.removeProperty(property)
rootStyle.removeProperty(property)
}
this.oldInjectedProperties = []
const lightenRatios = [
{ 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' ]) {
for (const prefix of [ 'primary', 'secondary', 'main-fg' ]) {
const mainColor = computedStyle.getPropertyValue('--' + prefix)
if (!mainColor) {
@ -177,14 +165,20 @@ export class ThemeService {
}
const mainColorParsed = parse(mainColor)
for (const { ratios, color } of [ { ratios: lightenRatios, color: parse('#fff') }, { ratios: darkenRatios, color: parse('#000') } ]) {
for (const ratio of ratios) {
const key = `--${prefix}-${ratio.suffix}`
const mainColorHSL = toHSLA(mainColorParsed)
if (!computedStyle.getPropertyValue(key)) {
style.setProperty(key, format(blend(mainColorParsed, color, ratio.value)))
this.oldInjectedProperties.push(key)
}
for (let i = -8; i <= 8; i++) {
const suffix = 500 + (50 * i)
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">
<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>
</a>

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

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

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

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

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

@ -3,9 +3,8 @@
#search-video {
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

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

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

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

@ -5,6 +5,11 @@
width: 100%;
}
li {
// Fix child outline on focus-visible
padding-top: 2px;
}
.list-overflow-parent {
display: flex;
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>
@if (video.isLive) {
<div class="live-overlay" [ngClass]="{ 'live-ended': isLiveEnded() }">
<ng-container i18n *ngIf="!isLiveEnded()">LIVE</ng-container>
<ng-container i18n *ngIf="isLiveEnded()">LIVE ENDED</ng-container>
<div class="live-overlay" [ngClass]="{ 'live-streaming': isLiveStreaming(), 'ended-live': isEndedLive() }">
@if (isLiveStreaming()) {
<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>
} @else {
<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,
.duration-overlay,
.live-overlay {
font-size: 12px;
line-height: 1.1;
font-size: 0.75rem;
line-height: normal;
z-index: z(miniature);
@include static-thumbnail-overlay;
@ -39,7 +39,7 @@
font-weight: $font-bold;
&.warning { background-color: #ffa500; }
&.danger { background-color: #ff0000; }
&.danger { background-color: pvar(--red); }
}
.duration-overlay,
@ -53,10 +53,23 @@
.live-overlay {
font-weight: $font-bold;
color: #fff;
color: pvar(--secondary-300);
&:not(.live-ended) {
background-color: rgba(224, 8, 8, 0.7);
&.live-streaming {
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;
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
}
isLiveEnded () {
if (!this.video.state) return
isLiveStreaming () {
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 () {

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="first-row">
<div class="active-filters">
<div class="filters-summary">
<div class="d-inline-block active-filters">{{ getActiveFilters() }}</div>
<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"
[ngClass]="{ active: !areFiltersCollapsed }"
>
@ -24,25 +26,6 @@
<my-global-icon iconName="chevrons-up"></my-global-icon>
</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>
<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 '_mixins' as *;
$filters-background: pvar(--secondary-400);
.root {
margin-bottom: 45px;
}
@ -8,19 +10,15 @@
.first-row {
display: flex;
justify-content: space-between;
}
.active-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.filters {
display: flex;
flex-wrap: wrap;
margin-top: 25px;
border-bottom: 1px solid $separator-border-color;
background-color: $filters-background;
padding: 1.5rem;
border-radius: 14px;
input[type=radio] + label {
font-weight: $font-regular;
@ -43,68 +41,33 @@
}
}
.pastille {
border-radius: 24px;
padding: 4px 15px;
margin-bottom: 15px;
cursor: pointer;
@include margin-right(15px);
&:focus-visible {
outline: pvar(--mainColor) auto 1px;
}
.filters-summary {
color: pvar(--main-fg-300);
}
.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 {
@include margin-left(5px);
}
&.active my-global-icon {
position: relative;
top: -1px;
}
&: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);
&.active {
background-color: $filters-background;
border-start-start-radius: 14px;
border-start-end-radius: 14px;
my-global-icon {
width: 16px;
color: pvar(--greyForegroundColor);
position: relative;
top: -1px;
}
}
&:not(.active) my-global-icon ::ng-deep svg {
transform: rotate(180deg);
}
}
.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)
}
resetFilter (key: string, canRemove: boolean) {
if (!canRemove) return
getActiveFilters () {
const store: string[] = []
this.filters.reset(key)
this.patchForm(false)
this.filtersChanged.emit()
for (const activeFilter of this.filters.getActiveFilters()) {
if (activeFilter.value) {
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) {
if (canRemove) return $localize`Remove this filter`
return ''
}
getFilterValue (filter: VideoFilterActive) {
private getFilterValue (filter: VideoFilterActive) {
if ((filter.key === 'categoryOneOf' || filter.key === 'languageOneOf') && Array.isArray(filter.rawValue)) {
if (filter.rawValue.length > 2) {
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);
}
.date-and-views {
color: pvar(--main-fg-300);
}
.owner-label {
display: block;
color: pvar(--greyForegroundColor);
color: pvar(--main-fg-500);
@include disable-default-a-behaviour;
@include ellipsis;
&: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="videos-header mb-4">
<div *ngIf="headerActions.length !== 0" class="action-block mt-3">
<div class="videos-header">
<div *ngIf="headerActions.length !== 0" class="action-block mt-3 mb-4">
<ng-container *ngFor="let action of headerActions">
@if (action.routerLink) {
<my-button theme="secondary" [ptRouterLink]="action.routerLink" [icon]="action.iconName">{{ action.label }}</my-button>
@ -10,8 +10,8 @@
</div>
<my-video-filters-header
*ngIf="displayFilters" [displayModerationBlock]="displayModerationBlock" [hideScope]="hideScopeFilter"
[filters]="filters"
*ngIf="displayFilters" class="d-block mt-3"
[displayModerationBlock]="displayModerationBlock" [hideScope]="hideScopeFilter" [filters]="filters"
(filtersChanged)="onFiltersChanged(true)"
></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">
<g>
<path fill="#211f20" d="M2799-911v11l8-5" />
<path fill="#737373" d="M2799-900v11l8-6" />
<path fill="#f1680d" d="M2807-905v10l8-5" />
<path fill="transparent" d="M2807-895v-10l-8 5z" />
</g>
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="34" height="34" rx="12" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 16.3306V7L18 11.6653L11 16.3306Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 25.6613V16.3307L18 20.996L11 25.6613Z" fill="#737373"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M18 20.9959V11.6653L25 16.3306L18 20.9959Z" fill="#F1680D"/>
</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});
// Create a theme system using CSS variables
--fg: #0A0A0A;
--bg :#E9DFDF;
--fg: #{pvar(--main-fg-600)};
--bg: #{pvar(--secondary-300)};
--primary: #FF8F37;
--primary: #F2690D;
--secondary: #8D7777;
// --secondary-300: #E9DFDF;
// --secondary-400: #D4C7C7;
--secondary-text-emphasis: #553D3D;
--main-fg: hsl(0 14% 12%);
--secondary: hsl(0 10% 76%);
font-family: $main-fonts;
font-weight: $font-regular;
@ -315,7 +312,7 @@ my-global-icon[iconName=external-link] {
ngx-loading-bar {
.ngx-bar {
height: 4px !important;
height: 3px !important;
border-radius: 0 !important;
border-start-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 *;
.peertube-button {
@ -58,3 +59,14 @@
padding: 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);
&.active {
border-bottom-color: pvar(--primary);
border-bottom-color: pvar(--primary-500);
}
&:hover,

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

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

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

@ -1,3 +1,4 @@
@use 'sass:math';
@use '_variables' as *;
@use '_mixins' as *;
@ -44,7 +45,7 @@
width: inherit;
height: inherit;
opacity: 0;
background-color: rgba(0, 0, 0, 0.3);
background-color: rgba(46, 35, 35, 0.80);
&,
.icon {
@ -53,6 +54,24 @@
.icon {
@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 {
width: inherit;
height: inherit;
@ -94,7 +108,7 @@
@mixin static-thumbnail-overlay {
display: inline-block;
background-color: rgba(17, 17, 17, 0.8);
color: #fff;
color: pvar(--secondary-400);
}
// 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))});
}
@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) {
font-size: $font-size;
padding: 6px 20px;
line-height: 1.66;
width: $width;
max-width: $width;
color: pvar(--inputForegroundColor);
@ -100,16 +95,24 @@
border: 1px solid pvar(--inputBorderColor);
border-radius: 4px;
@include rounded-line-height-1-42($font-size);
@include rounded-line-height-1-5($font-size);
&::placeholder {
color: pvar(--inputPlaceholderColor);
font-size: 14px;
}
&[readonly] {
color: pvar(--greyForegroundColor);
}
&:focus,
&:focus-visible {
outline: 0;
border-color: pvar(--fg);
box-shadow: none;
}
@media screen and (max-width: calc(#{$width} + 40px)) {
width: 100%;
}
@ -131,8 +134,8 @@
&:active,
&:focus {
color: pvar(--fg);
background-color: pvar(--primary);
border: 1px solid pvar(--primary);
background-color: pvar(--primary-450);
border: 1px solid pvar(--primary-450);
}
// Override bootstrap
@ -140,8 +143,8 @@
&.btn:focus-visible,
&.btn.show {
color: pvar(--fg) !important;
background-color: pvar(--primary) !important;
border: 1px solid pvar(--primary) !important;
background-color: pvar(--primary-450) !important;
border: 1px solid pvar(--primary-450) !important;
}
&:hover {
@ -155,7 +158,7 @@
}
my-global-icon {
@include apply-svg-color(pvar(--fg));
color: pvar(--fg);
}
}
@ -164,15 +167,15 @@
& {
color: pvar(--fg);
background-color: transparent;
border: 1px solid pvar(--secondary-400);
border: 1px solid pvar(--secondary-500);
}
&:active,
&:focus,
&:focus-visible {
color: pvar(--fg);
background-color: pvar(--secondary);
border-color: pvar(--secondary);
background-color: pvar(--secondary-450);
border-color: pvar(--secondary-500);
}
// Override bootstrap
@ -180,13 +183,13 @@
&.btn:focus-visible,
&.btn.show {
color: pvar(--fg) !important;
background-color: pvar(--secondary) !important;
border-color: pvar(--secondary) !important;
background-color: pvar(--secondary-450) !important;
border-color: pvar(--secondary-500) !important;
}
&:hover {
color: pvar(--fg);
background-color: pvar(--secondary-400);
background-color: pvar(--secondary-450);
}
&[disabled] {
@ -195,18 +198,18 @@
}
my-global-icon {
@include apply-svg-color(pvar(--secondary-400));
color: pvar(--secondary-750);
}
}
@mixin tertiary-button {
color: pvar(--secondary);
color: pvar(--main-fg-300);
background-color: transparent;
border: 1px solid transparent;
&:hover {
color: pvar(--secondary);
background-color: pvar(--secondary-300);
color: pvar(--main-fg-300);
background-color: pvar(--secondary-400);
}
&[disabled] {
@ -214,11 +217,11 @@
}
&:active {
background-color: pvar(--secondary-200);
background-color: pvar(--secondary-450);
}
&.show {
border-color: pvar(--secondary);
border-color: pvar(--main-fg-300);
}
// Override bootstrap
@ -227,10 +230,8 @@
}
&.btn.show {
border-color: pvar(--secondary) !important;
border-color: pvar(--main-fg-300) !important;
}
@include button-focus(--secondary);
}
@mixin rounded-icon-button {
@ -323,14 +324,6 @@
@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) {
my-global-icon {
position: relative;
@ -402,9 +395,7 @@
position: relative;
height: min-content;
select[disabled] {
background-color: #f9f9f9;
}
@include secondary-button;
@media screen and (max-width: $width) {
width: 100%;
@ -419,7 +410,7 @@
position: absolute;
pointer-events: none;
border: 5px solid rgba(0, 0, 0, 0);
border-top-color: pvar(--mainForegroundColor);
border-top-color: pvar(--secondary);
margin-top: -2px;
z-index: 100;
}
@ -427,31 +418,21 @@
select {
font-size: $form-input-font-size;
padding: 3px 35px 3px 12px;
font-weight: $font-semibold;
padding: 6px 43px 6px 20px;
position: relative;
border: 1px solid pvar(--inputBorderColor);
border: 0;
background: transparent none;
appearance: none;
text-overflow: ellipsis;
color: pvar(--mainForegroundColor);
@include rounded-line-height-1-5($form-input-font-size);
option {
color: #000;
}
}
&.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;
&:focus,
&:focus-visible {
outline: 0;
border-color: pvar(--fg);
box-shadow: none;
}
}
}
@ -747,7 +728,7 @@
border-top: #{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 () {

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;
$focus-box-shadow-form: 0 0 0 .2rem;
$form-input-font-size: 14px;
$form-input-font-size: 16px;
$video-watch-info-margin-left: 44px;
@ -149,19 +149,56 @@ $variables: (
--fg: var(--fg),
--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-800: var(--primary-800),
--primary-750: var(--primary-750),
--primary-700: var(--primary-700),
--primary-650: var(--primary-650),
--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-350: var(--primary-350),
--primary-300: var(--primary-300),
--primary-250: var(--primary-250),
--primary-200: var(--primary-200),
--primary-150: var(--primary-150),
--primary-100: var(--primary-100),
--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-350: var(--secondary-350),
--secondary-300: var(--secondary-300),
--secondary-250: var(--secondary-250),
--secondary-200: var(--secondary-200),
--secondary-text-emphasis: var(--secondary-text-emphasis)
--secondary-150: var(--secondary-150),
--secondary-100: var(--secondary-100)
);
// SASS type check our CSS variables