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

Cleanup CSS variables

Chocobozzz 2024-11-18 09:46:09 +01:00
parent 5ae397a7ed
commit 614d1351c9
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
75 changed files with 324 additions and 379 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -45,6 +45,6 @@
} }
.section-title { .section-title {
color: var(--fg); color: pvar(--fg);
} }
} }

10
client/src/app/+accounts/accounts.component.scss
View File

@ -4,8 +4,8 @@
@use '_miniature' as *; @use '_miniature' as *;
.root { .root {
--myFontSize: 1rem; --co-font-size: 1rem;
--myGreyFontSize: 1rem; --co-secondary-font-size: 1rem;
} }
.section-label { .section-label {
@ -44,7 +44,7 @@ my-copy-button {
} }
.account-avatar-row { .account-avatar-row {
@include avatar-row-responsive(2rem, var(--myGreyFontSize)); @include avatar-row-responsive(2rem, var(--co-secondary-font-size));
} }
.actor-display-name { .actor-display-name {
@ -101,8 +101,8 @@ my-copy-button {
@media screen and (max-width: $mobile-view) { @media screen and (max-width: $mobile-view) {
.root { .root {
--myFontSize: 14px; --co-font-size: 14px;
--myGreyFontSize: 13px; --co-secondary-font-size: 13px;
} }
.links { .links {

16
client/src/app/+admin/follows/followers-list/followers-list.component.scss
View File

@ -1,22 +1,6 @@
@use '_variables' as *; @use '_variables' as *;
@use '_mixins' as *; @use '_mixins' as *;
a {
display: inline-block;
@include disable-default-a-behaviour;
&,
&:hover {
color: pvar(--fg);
}
span {
font-size: 80%;
color: pvar(--secondary-750);
}
}
.action-cell { .action-cell {
my-button:first-child { my-button:first-child {
@include margin-right(10px); @include margin-right(10px);

14
client/src/app/+admin/follows/following-list/following-list.component.scss
View File

@ -2,19 +2,7 @@
@use '_mixins' as *; @use '_mixins' as *;
a { a {
display: inline-block; color: pvar(--fg);
@include disable-default-a-behaviour;
&,
&:hover {
color: pvar(--fg);
}
span {
font-size: 80%;
color: pvar(--secondary-750);
}
} }
my-delete-button { my-delete-button {

14
client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss
View File

@ -2,19 +2,7 @@
@use '_mixins' as *; @use '_mixins' as *;
a { a {
display: inline-block; color: pvar(--fg);
@include disable-default-a-behaviour;
&,
&:hover {
color: pvar(--fg);
}
span {
font-size: 80%;
color: pvar(--secondary-750);
}
} }
.expansion-block { .expansion-block {

4
client/src/app/+admin/overview/users/user-edit/user-edit.component.scss
View File

@ -54,7 +54,7 @@ my-select-custom-value {
> a, > a,
> div { > div {
padding: 20px; padding: 20px;
background: pvar(--secondary-400); background: pvar(--bg-secondary-400);
border-radius: 4px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
@ -72,7 +72,7 @@ my-select-custom-value {
.dashboard-label { .dashboard-label {
font-size: 90%; font-size: 90%;
color: pvar(--main-fg-400); color: pvar(--fg-300);
text-align: center; text-align: center;
} }
} }

6
client/src/app/+admin/plugins/shared/plugin-card.component.scss
View File

@ -3,7 +3,7 @@
.plugin { .plugin {
margin: 15px 0; margin: 15px 0;
background-color: pvar(--secondary-400); background-color: pvar(--bg-secondary-400);
} }
.first-row { .first-row {
@ -25,10 +25,10 @@
@include margin-left(10px); @include margin-left(10px);
my-global-icon { my-global-icon {
color: pvar(--main-fg-500); color: pvar(--fg-400);
&[iconName=npm] { &[iconName=npm] {
@include fill-svg-color(pvar(--main-fg-500)); @include fill-svg-color(pvar(--fg-400));
} }
} }
} }

2
client/src/app/+admin/system/logs/logs.component.scss
View File

@ -92,7 +92,7 @@
my-copy-button { my-copy-button {
position: absolute; position: absolute;
right: 5px; right: 5px;
background: pvar(--secondary-300); background: pvar(--bg-secondary-300);
} }
@include on-small-main-col { @include on-small-main-col {

2
client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
View File

@ -44,7 +44,7 @@ my-edit-button {
.video-channel-name { .video-channel-name {
font-size: 14px; font-size: 14px;
color: pvar(--main-fg-400); color: pvar(--fg-300);
@include margin-left(5px); @include margin-left(5px);
} }

2
client/src/app/+my-library/my-history/my-history.component.scss
View File

@ -32,7 +32,7 @@
label { label {
margin: 0 0 0 5px; margin: 0 0 0 5px;
color: var(--main-fg-500); color: pvar(--fg-400);
font-weight: $font-semibold; font-weight: $font-semibold;
} }
} }

2
client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
View File

@ -70,7 +70,7 @@ my-video-playlist-miniature {
} }
.playlist-info { .playlist-info {
width: calc(100% + (2 * var(--x-margin-content))); width: calc(100% + (2 * pvar(--x-margin-content)));
padding-top: 20px; padding-top: 20px;
margin-bottom: 10px; margin-bottom: 10px;
} }

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

@ -86,7 +86,7 @@
} }
.video-channel-name { .video-channel-name {
color: pvar(--main-fg-400); color: pvar(--fg-300);
} }
// Use the same breakpoints as in video-miniature // Use the same breakpoints as in video-miniature

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

@ -47,7 +47,7 @@ header {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
// Better than border color for aliasing // Better than border color for aliasing
box-shadow: 0 0 0 1px var(--primary); box-shadow: 0 0 0 1px pvar(--primary);
overflow: hidden; overflow: hidden;
my-global-icon { my-global-icon {

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

@ -39,7 +39,7 @@
height: fit-content; height: fit-content;
min-height: 100px; min-height: 100px;
min-width: 200px; min-width: 200px;
background-color: pvar(--secondary-400); background-color: pvar(--bg-secondary-400);
margin-bottom: 15px; margin-bottom: 15px;
@include margin-right(15px); @include margin-right(15px);

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

@ -46,7 +46,7 @@ type ChartBuilderResult = {
type Card = { label: string, value: string | number, moreInfo?: string, help?: string } type Card = { label: string, value: string | number, moreInfo?: string, help?: string }
ChartJSDefaults.backgroundColor = getComputedStyle(document.body).getPropertyValue('--bg') ChartJSDefaults.backgroundColor = getComputedStyle(document.body).getPropertyValue('--bg')
ChartJSDefaults.borderColor = getComputedStyle(document.body).getPropertyValue('--secondary-350') ChartJSDefaults.borderColor = getComputedStyle(document.body).getPropertyValue('--bg-secondary-350')
ChartJSDefaults.color = getComputedStyle(document.body).getPropertyValue('--fg') ChartJSDefaults.color = getComputedStyle(document.body).getPropertyValue('--fg')
@Component({ @Component({

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

@ -4,11 +4,11 @@
@use '_miniature' as *; @use '_miniature' as *;
.root { .root {
--myGlobalTopPadding: 60px; --co-global-top-padding: 60px;
--myChannelImgMargin: 30px; --co-channel-img-margin: 30px;
--myFontSize: 16px; --co-font-size: 16px;
--myChannelHandleFontSize: 16px; --co-channel-handle-font-size: 16px;
--myOwnerHandleFontSize: 14px; --co-owner-handle-font-size: 14px;
} }
.section-label { .section-label {
@ -35,8 +35,8 @@
grid-template-rows: auto auto; grid-template-rows: auto auto;
background-color: pvar(--channel-bg); background-color: pvar(--channel-bg);
padding-top: var(--myGlobalTopPadding); padding-top: var(--co-global-top-padding);
font-size: var(--myFontSize); font-size: var(--co-font-size);
// Use the same margin as the videos grid // Use the same margin as the videos grid
@include grid-videos-miniature-margins(false, 15px); @include grid-videos-miniature-margins(false, 15px);
@ -44,7 +44,7 @@
} }
.channel-avatar-row { .channel-avatar-row {
@include avatar-row-responsive(var(--myChannelImgMargin), var(--myChannelHandleFontSize)); @include avatar-row-responsive(var(--co-channel-img-margin), var(--co-channel-handle-font-size));
} }
.support-button { .support-button {
@ -54,7 +54,7 @@
.channel-description { .channel-description {
grid-column: 1; grid-column: 1;
word-break: break-word; word-break: break-word;
padding-bottom: var(--myGlobalTopPadding); padding-bottom: var(--co-global-top-padding);
} }
.show-more { .show-more {
@ -100,7 +100,7 @@
background-color: pvar(--bg); background-color: pvar(--bg);
padding: 30px; padding: 30px;
width: 300px; width: 300px;
font-size: var(--myFontSize); font-size: var(--co-font-size);
.avatar-row { .avatar-row {
display: flex; display: flex;
@ -120,8 +120,8 @@
} }
.actor-handle { .actor-handle {
font-size: var(--myOwnerHandleFontSize); font-size: var(--co-owner-handle-font-size);
color: pvar(--main-fg-400); color: pvar(--fg-300);
} }
} }
@ -156,8 +156,8 @@ my-copy-button {
@media screen and (max-width: 1100px) { @media screen and (max-width: 1100px) {
.root { .root {
--myGlobalTopPadding: 45px; --co-global-top-padding: 45px;
--myChannelImgMargin: 15px; --co-channel-img-margin: 15px;
} }
.channel-info { .channel-info {
@ -194,7 +194,7 @@ my-copy-button {
display: block; display: block;
width: 100%; width: 100%;
border-bottom: 2px solid $separator-border-color; border-bottom: 2px solid $separator-border-color;
padding: var(--myGlobalTopPadding) 45px; padding: var(--co-global-top-padding) 45px;
margin-bottom: 60px; margin-bottom: 60px;
} }
@ -234,10 +234,10 @@ my-copy-button {
@media screen and (max-width: $mobile-view) { @media screen and (max-width: $mobile-view) {
.root { .root {
--myGlobalTopPadding: 15px; --co-global-top-padding: 15px;
--myFontSize: 14px; --co-font-size: 14px;
--myChannelHandleFontSize: 13px; --co-channel-handle-font-size: 13px;
--myOwnerHandleFontSize: 13px; --co-owner-handle-font-size: 13px;
} }
.links { .links {

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

@ -83,7 +83,7 @@ h2 {
} }
.description { .description {
color: pvar(--main-fg-400); color: pvar(--fg-300);
margin-top: 5px; margin-top: 5px;
margin-bottom: 15px; margin-bottom: 15px;
} }

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

@ -18,7 +18,7 @@
&.active, &.active,
&:hover { &:hover {
background: pvar(--secondary-300); background: pvar(--bg-secondary-300);
} }
} }

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

@ -68,7 +68,7 @@ my-timestamp-input {
.message-submit { .message-submit {
display: inline-block; display: inline-block;
color: pvar(--main-fg-400); color: pvar(--fg-300);
@include margin-right(25px); @include margin-right(25px);
} }

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

@ -3,7 +3,7 @@
.first-step-block { .first-step-block {
.torrent-or-magnet { .torrent-or-magnet {
@include divider($color: pvar(--secondary-750), $background: pvar(--secondary-400)); @include divider($color: pvar(--secondary-icon-color), $background: pvar(--bg-secondary-400));
&[data-content] { &[data-content] {
margin: 1.5rem 0; margin: 1.5rem 0;

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

@ -19,7 +19,7 @@ $width-size: 275px;
.upload-icon { .upload-icon {
width: 90px; width: 90px;
margin-bottom: 25px; margin-bottom: 25px;
color: pvar(--main-fg-400); color: pvar(--fg-300);
} }
.peertube-select-container { .peertube-select-container {

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

@ -41,21 +41,21 @@ $nav-link-height: 40px;
padding-top: 20px; padding-top: 20px;
} }
::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);
a.nav-link { a.nav-link {
&.active { &.active {
background-color: pvar(--secondary-400) !important; background-color: pvar(--bg-secondary-400) !important;
} }
} }
} }
::ng-deep .upload-video-container { :host ::ng-deep .upload-video-container {
border: $border-width $border-type $border-color; border: $border-width $border-type $border-color;
border-top: transparent; border-top: transparent;
background-color: pvar(--secondary-400); background-color: pvar(--bg-secondary-400);
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
width: 100%; width: 100%;

4
client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.scss
View File

@ -22,7 +22,7 @@
padding: 4px 10px; padding: 4px 10px;
white-space: nowrap; white-space: nowrap;
background-color: transparent !important; background-color: transparent !important;
color: pvar(--main-fg-400); color: pvar(--fg-300);
text-transform: uppercase; text-transform: uppercase;
@include peertube-button; @include peertube-button;
@ -92,7 +92,7 @@
background-color: #909090; background-color: #909090;
&.liked { &.liked {
background-color: pvar(--main-fg-500); background-color: pvar(--fg-400);
} }
} }
} }

2
client/src/app/+videos/+video-watch/shared/action-buttons/video-rate.component.scss
View File

@ -11,5 +11,5 @@
} }
.activated { .activated {
color: pvar(--main-fg-500) !important; color: pvar(--fg-400) !important;
} }

10
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(--secondary-350); background-color: pvar(--bg-secondary-350);
color: pvar(--fg); color: pvar(--fg);
padding: 0 5px; padding: 0 5px;
font-size: 13px; font-size: 13px;
@ -78,13 +78,13 @@
} }
.comment-account-fid { .comment-account-fid {
color: pvar(--main-fg-400); color: pvar(--fg-300);
} }
} }
.comment-date { .comment-date {
font-size: 90%; font-size: 90%;
color: pvar(--main-fg-400); color: pvar(--fg-300);
text-decoration: none; text-decoration: none;
@include margin-left(5px); @include margin-left(5px);
@ -116,7 +116,7 @@
} }
&.comment-html-deleted { &.comment-html-deleted {
color: pvar(--main-fg-400); color: pvar(--fg-300);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
} }
@ -127,7 +127,7 @@
::ng-deep .dropdown-toggle, ::ng-deep .dropdown-toggle,
.comment-action-reply { .comment-action-reply {
color: pvar(--main-fg-400); color: pvar(--fg-300);
cursor: pointer; cursor: pointer;
@include margin-right(10px); @include margin-right(10px);

2
client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.scss
View File

@ -10,7 +10,7 @@
.attribute-label { .attribute-label {
min-width: 142px; min-width: 142px;
display: inline-block; display: inline-block;
color: pvar(--main-fg-400); color: pvar(--fg-300);
font-weight: $font-bold; font-weight: $font-bold;
@include padding-right(5px); @include padding-right(5px);

2
client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss
View File

@ -29,7 +29,7 @@
.video-info-description-more { .video-info-description-more {
cursor: pointer; cursor: pointer;
font-weight: $font-semibold; font-weight: $font-semibold;
color: pvar(--main-fg-400); color: pvar(--fg-300);
margin-top: 1rem; margin-top: 1rem;
@include font-size(14px); @include font-size(14px);

2
client/src/app/+videos/+video-watch/shared/player-widgets/player-widget.component.scss
View File

@ -12,7 +12,7 @@
border-bottom: 1px solid $separator-border-color; border-bottom: 1px solid $separator-border-color;
.widget-header { .widget-header {
background-color: pvar(--secondary-400); background-color: pvar(--bg-secondary-400);
padding: 1rem 2rem; padding: 1rem 2rem;
} }

2
client/src/app/+videos/+video-watch/shared/player-widgets/video-transcription.component.scss
View File

@ -4,7 +4,7 @@
.segment { .segment {
&.active, &.active,
&:hover { &:hover {
background: pvar(--secondary-300); background: pvar(--bg-secondary-300);
} }
} }

2
client/src/app/+videos/+video-watch/shared/player-widgets/video-watch-playlist.component.scss
View File

@ -5,7 +5,7 @@
.playlist { .playlist {
.playlist-by-index { .playlist-by-index {
color: pvar(--main-fg-400); color: pvar(--fg-300);
display: flex; display: flex;
.playlist-by { .playlist-by {

16
client/src/app/+videos/+video-watch/video-watch.component.scss
View File

@ -40,7 +40,7 @@ $video-max-height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
} }
::ng-deep .video-js { ::ng-deep .video-js {
--player-height: #{$video-max-height}; --co-player-height: #{$video-max-height};
} }
.player-widget-component ::ng-deep .widget-root { .player-widget-component ::ng-deep .widget-root {
@ -62,16 +62,16 @@ $video-max-height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
} }
::ng-deep .video-js { ::ng-deep .video-js {
--player-height: #{$video-default-height}; --co-player-height: #{$video-default-height};
--player-portrait-mode: 0; --co-player-portrait-mode: 0;
// Default player ratio, redefined by the player to automatically adapt player size // Default player ratio, redefined by the player to automatically adapt player size
--player-ratio: #{math.div(16, 9)}; --co-player-ratio: #{math.div(16, 9)};
width: 100%; width: 100%;
height: var(--player-height); height: var(--co-player-height);
// Can be recalculated by the player depending on video ratio // Can be recalculated by the player depending on video ratio
max-width: calc(var(--player-height) * var(--player-ratio)); max-width: calc(var(--co-player-height) * var(--co-player-ratio));
// VideoJS create an inner video player // VideoJS create an inner video player
video { video {
@ -253,8 +253,8 @@ my-video-comments {
.remote-server-down, .remote-server-down,
::ng-deep .video-js { ::ng-deep .video-js {
--player-portrait-mode: 1; --co-player-portrait-mode: 1;
--player-height: calc(100vw / var(--player-ratio)) !important; --co-player-height: calc(100vw / var(--co-player-ratio)) !important;
max-height: calc(100vh - #{$header-height} - #{$player-portrait-bottom-space}); max-height: calc(100vh - #{$header-height} - #{$player-portrait-bottom-space});
} }

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

@ -181,8 +181,8 @@ export class ThemeService {
const toProcess = [ const toProcess = [
{ prefix: 'primary', invertIfDark: false }, { prefix: 'primary', invertIfDark: false },
{ prefix: 'secondary', invertIfDark: true }, { prefix: 'bg-secondary', invertIfDark: true },
{ prefix: 'main-fg', invertIfDark: true } { prefix: 'fg', invertIfDark: true }
] ]
for (const { prefix, invertIfDark } of toProcess) { for (const { prefix, invertIfDark } of toProcess) {

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

@ -2,6 +2,10 @@
@use '_variables' as *; @use '_variables' as *;
@use '_mixins' as *; @use '_mixins' as *;
.root {
background-color: pvar(--bg);
}
.peertube-title { .peertube-title {
font-size: 24px; font-size: 24px;
font-weight: $font-bold; font-weight: $font-bold;
@ -70,7 +74,7 @@
} }
.username { .username {
color: pvar(--main-fg-400); color: pvar(--fg-300);
} }
> .dropdown-toggle { > .dropdown-toggle {

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

@ -3,7 +3,7 @@
@use '_mixins' as *; @use '_mixins' as *;
.menu-container { .menu-container {
--menuXPadding: 1.5rem; --co-menu-x-padding: 1.5rem;
z-index: z(menu); z-index: z(menu);
width: calc(#{$menu-width} - 2rem); width: calc(#{$menu-width} - 2rem);
@ -13,7 +13,7 @@
@include margin-left(2rem); @include margin-left(2rem);
&.collapsed { &.collapsed {
--menuXPadding: 0.25rem; --co-menu-x-padding: 0.25rem;
width: auto; width: auto;
@ -30,11 +30,11 @@
} }
.toggle-menu { .toggle-menu {
color: pvar(--secondary-750); color: pvar-fallback(--menu-fg, --fg-200);
width: 24px; width: 24px;
height: 24px; height: 24px;
border-radius: 100%; border-radius: 100%;
background-color: pvar(--secondary-450); background-color: pvar-fallback(--menu-bg, --bg-secondary-500);
@include button-with-icon(20px, 0, 0, 1px); @include button-with-icon(20px, 0, 0, 1px);
@ -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-400); background-color: pvar-fallback(--menu-bg, --bg-secondary-400);
} }
.menu-link, .menu-link,
@ -97,8 +97,8 @@
.block-title, .block-title,
.about .description, .about .description,
.about my-button { .about my-button {
@include padding-left(var(--menuXPadding)); @include padding-left(var(--co-menu-x-padding));
@include padding-right(var(--menuXPadding)); @include padding-right(var(--co-menu-x-padding));
} }
.menu-block, .menu-block,
@ -107,8 +107,7 @@
content: ''; content: '';
display: block; display: block;
height: 2px; height: 2px;
background: pvar(--secondary-450); margin: 1rem var(--co-menu-x-padding);
margin: 1rem var(--menuXPadding);
} }
} }
@ -136,6 +135,7 @@
.block-title { .block-title {
font-weight: $font-bold; font-weight: $font-bold;
color: pvar-fallback(--menu-fg, --fg-350);
font-size: 14px; font-size: 14px;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
@ -144,7 +144,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
color: pvar(--main-fg-450); color: pvar-fallback(--menu-fg, --fg-400);
white-space: normal; white-space: normal;
word-break: break-word; word-break: break-word;
transition: background-color .1s ease-in-out; transition: background-color .1s ease-in-out;
@ -156,11 +156,11 @@
&:hover, &:hover,
&:focus-visible { &:focus-visible {
background-color: pvar(--secondary-500); background-color: pvar-fallback(--menu-fg, --bg-secondary-500);
} }
&.active { &.active {
background-color: pvar(--secondary-600); background-color: pvar-fallback(--menu-fg, --bg-secondary-600);
} }
my-global-icon { my-global-icon {
@ -169,7 +169,7 @@
line-height: 22px; line-height: 22px;
position: relative; position: relative;
top: -1px; top: -1px;
color: pvar(--secondary-750); color: pvar-fallback(--menu-fg, --secondary-icon-color);
+ *:not(.visually-hidden) { + *:not(.visually-hidden) {
@include margin-left(12px); @include margin-left(12px);
@ -184,6 +184,6 @@
.about { .about {
.description { .description {
font-size: 14px; font-size: 14px;
color: pvar(--main-fg-300); color: pvar-fallback(--menu-fg, --fg-200)
} }
} }

2
client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
View File

@ -5,7 +5,7 @@
.account-flagged-handle, .account-flagged-handle,
.video-owner { .video-owner {
font-size: 11px; font-size: 11px;
color: var(--main-fg-400); color: pvar(--fg-300);
} }
.abuse-messages { .abuse-messages {

14
client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss
View File

@ -33,7 +33,7 @@ textarea {
max-width: 60%; max-width: 60%;
.author { .author {
color: var(--main-fg-400); color: pvar(--fg-300);
font-size: 14px; font-size: 14px;
padding: 0 0 3px 10px; padding: 0 0 3px 10px;
} }
@ -41,23 +41,23 @@ textarea {
.bubble { .bubble {
border-radius: 10px; border-radius: 10px;
padding: 5px 10px; padding: 5px 10px;
color: var(--fg); color: pvar(--fg);
background-color: var(--secondary-400); background-color: pvar(--bg-secondary-400);
.date { .date {
font-size: 13px; font-size: 13px;
color: var(--main-fg-400); color: pvar(--fg-300);
} }
} }
&.by-me { &.by-me {
.bubble { .bubble {
color: var(--on-primary); color: pvar(--on-primary);
background-color: var(--primary-400); background-color: pvar(--primary-400);
.date { .date {
color: var(--on-primary); color: pvar(--on-primary);
} }
} }
} }

2
client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
View File

@ -24,7 +24,7 @@
.actor-info-username { .actor-info-username {
position: relative; position: relative;
font-size: 14px; font-size: 14px;
color: pvar(--main-fg-400); color: pvar(--fg-300);
} }
.actor-info-followers { .actor-info-followers {

2
client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss
View File

@ -6,7 +6,7 @@
} }
.banner-placeholder { .banner-placeholder {
background-color: pvar(--secondary-350); background-color: pvar(--bg-secondary-350);
} }
.actor-img-edit-container { .actor-img-edit-container {

11
client/src/app/shared/shared-actor-image/actor-avatar.component.scss
View File

@ -3,10 +3,10 @@
.avatar { .avatar {
// Defined in component // Defined in component
width: var(--avatarSize); width: var(--co-avatar-size);
height: var(--avatarSize); height: var(--co-avatar-size);
min-width: var(--avatarSize); min-width: var(--co-avatar-size);
min-height: var(--avatarSize); min-height: var(--co-avatar-size);
&.account { &.account {
object-fit: cover; object-fit: cover;
@ -28,7 +28,8 @@ a:hover {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: var(--initialFontSize); // Defined in component
font-size: var(--co-font-size);
&.blue { &.blue {
background-color: #009FD4; background-color: #009FD4;

12
client/src/app/shared/shared-actor-image/actor-avatar.component.ts
View File

@ -69,7 +69,7 @@ export class ActorAvatarComponent implements OnInit, OnChanges {
private buildClasses () { private buildClasses () {
let avatarSize = '100%' let avatarSize = '100%'
let initialFontSize = '22px' let fontSize = '22px'
this.classes = [ 'avatar' ] this.classes = [ 'avatar' ]
@ -77,11 +77,11 @@ export class ActorAvatarComponent implements OnInit, OnChanges {
avatarSize = `${this.size}px` avatarSize = `${this.size}px`
if (this.size <= 18) { if (this.size <= 18) {
initialFontSize = '13px' fontSize = '13px'
} else if (this.size >= 100) { } else if (this.size >= 100) {
initialFontSize = '40px' fontSize = '40px'
} else if (this.size >= 120) { } else if (this.size >= 120) {
initialFontSize = '46px' fontSize = '46px'
} }
} }
@ -98,8 +98,8 @@ export class ActorAvatarComponent implements OnInit, OnChanges {
} }
const elStyle = (this.el.nativeElement as HTMLElement).style const elStyle = (this.el.nativeElement as HTMLElement).style
elStyle.setProperty('--avatarSize', avatarSize) elStyle.setProperty('--co-avatar-size', avatarSize)
elStyle.setProperty('--initialFontSize', initialFontSize) elStyle.setProperty('--co-font-size', fontSize)
} }
private buildDefaultAvatarUrl () { private buildDefaultAvatarUrl () {

2
client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss
View File

@ -52,6 +52,6 @@
.video-label { .video-label {
font-size: 12px; font-size: 12px;
color: pvar(--main-fg-400); color: pvar(--fg-300);
margin: 15px 0 5px; margin: 15px 0 5px;
} }

4
client/src/app/shared/shared-forms/markdown-textarea.component.scss
View File

@ -11,7 +11,7 @@ $input-border-radius: 3px;
flex-direction: column; flex-direction: column;
textarea { textarea {
background-color: pvar(--secondary-350); background-color: pvar(--bg-secondary-350);
font-family: monospace; font-family: monospace;
font-size: 13px; font-size: 13px;
@ -120,7 +120,7 @@ $input-border-radius: 3px;
overflow-y: auto; overflow-y: auto;
word-wrap: break-word; word-wrap: break-word;
scrollbar-color: pvar(--main-fg-400) pvar(--bg); scrollbar-color: pvar(--fg-300) pvar(--bg);
} }
textarea, textarea,

4
client/src/app/shared/shared-forms/peertube-checkbox.component.html
View File

@ -1,5 +1,5 @@
<div class="root flex-column"> <div class="root flex-column">
<div class="d-flex"> <div class="d-flex align-items-center">
<label> <label>
<input <input
type="checkbox" type="checkbox"
@ -31,7 +31,7 @@
</ng-template> </ng-template>
</my-help> </my-help>
<div *ngIf="recommended" class="recommended" i18n>Recommended</div> <div *ngIf="recommended" class="ms-2 pt-badge badge-secondary" i18n>Recommended</div>
</div> </div>
<div class="ms-4 d-flex flex-column"> <div class="ms-4 d-flex flex-column">

20
client/src/app/shared/shared-forms/peertube-checkbox.component.scss
View File

@ -28,20 +28,8 @@
.wrapper:empty { .wrapper:empty {
display: none; display: none;
} }
}
.recommended {
align-self: baseline; .pt-badge {
display: inline-block; height: fit-content;
padding: 4px 6px;
cursor: default;
border-radius: 3px;
font-size: 12px;
line-height: 12px;
font-weight: 500;
color: pvar(--secondary-750);
background-color: rgba(217, 225, 232, .1);
border: 1px solid rgba(217, 225, 232, .5);
@include margin-left(.5rem);
}
} }

2
client/src/app/shared/shared-icons/global-icon.component.scss
View File

@ -1,4 +1,4 @@
::ng-deep { :host ::ng-deep {
svg { svg {
vertical-align: bottom; vertical-align: bottom;
width: inherit; width: inherit;

4
client/src/app/shared/shared-main/buttons/help.component.scss
View File

@ -6,11 +6,11 @@
width: 17px; width: 17px;
position: relative; position: relative;
top: -1px; top: -1px;
color: pvar(--main-fg-500); color: pvar(--fg-400);
} }
} }
::ng-deep { :host ::ng-deep {
.help-popover { .help-popover {
min-width: 200px; min-width: 200px;
max-width: 300px; max-width: 300px;

4
client/src/app/shared/shared-main/common/progress-bar.component.scss
View File

@ -2,7 +2,7 @@
@use '_mixins' as *; @use '_mixins' as *;
.progress-container { .progress-container {
background-color: pvar(--secondary-350); background-color: pvar(--bg-secondary-350);
display: flex; display: flex;
overflow: hidden; overflow: hidden;
height: 2rem; height: 2rem;
@ -13,7 +13,7 @@
span { span {
position: absolute; position: absolute;
color: pvar(--main-fg-500); color: pvar(--fg-400);
line-height: 2rem; line-height: 2rem;
margin: 0 12px; margin: 0 12px;
} }

4
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(--main-fg-300); border-bottom: 1px solid pvar(--fg-200);
} }
.x-menu-entry { .x-menu-entry {
color: pvar(--secondary-750); color: pvar(--fg-100);
display: inline-block; display: inline-block;
font-weight: $font-bold; font-weight: $font-bold;
white-space: nowrap; white-space: nowrap;

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

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

14
client/src/app/shared/shared-moderation/server-blocklist.component.scss
View File

@ -2,17 +2,5 @@
@use '_mixins' as *; @use '_mixins' as *;
a { a {
display: inline-block; color: pvar(--fg);
@include disable-default-a-behaviour;
&,
&:hover {
color: pvar(--fg);
}
span {
font-size: 80%;
color: pvar(--secondary-750);
}
} }

6
client/src/app/shared/shared-tables/video-cell.component.scss
View File

@ -36,10 +36,6 @@
border-radius: 2px; border-radius: 2px;
} }
span {
color: pvar(--secondary-750);
}
.table-video-image-label { .table-video-image-label {
position: absolute; position: absolute;
border-radius: 3px; border-radius: 3px;
@ -62,7 +58,7 @@
line-height: 1rem; line-height: 1rem;
div + div { div + div {
color: var(--main-fg-400); color: pvar(--fg-300);
font-size: 11px; font-size: 11px;
} }
} }

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

@ -53,10 +53,10 @@
.live-overlay { .live-overlay {
font-weight: $font-bold; font-weight: $font-bold;
color: pvar(--secondary-300); color: #F4F4F5;
&.live-streaming { &.live-streaming {
color: pvar(--secondary-300); color: #F4F4F5;
&::before { &::before {
content: ''; content: '';
@ -96,6 +96,6 @@
width: 22px; width: 22px;
height: 22px; height: 22px;
color: pvar(--secondary-300); color: #F4F4F5;
} }
} }

2
client/src/app/shared/shared-video-miniature/download/video-files-download.component.scss
View File

@ -30,7 +30,7 @@
> span:first-child { > span:first-child {
min-width: 142px; min-width: 142px;
display: inline-block; display: inline-block;
color: pvar(--main-fg-400); color: pvar(--fg-300);
font-weight: $font-bold; font-weight: $font-bold;
@include padding-right(5px); @include padding-right(5px);

2
client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.scss
View File

@ -7,6 +7,6 @@
} }
} }
::ng-deep .icon-playlist-add { :host ::ng-deep .icon-playlist-add {
left: 2px; left: 2px;
} }

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

@ -1,7 +1,7 @@
@use '_variables' as *; @use '_variables' as *;
@use '_mixins' as *; @use '_mixins' as *;
$filters-background: pvar(--secondary-400); $filters-background: pvar(--bg-secondary-400);
.root { .root {
margin-bottom: 45px; margin-bottom: 45px;
@ -42,7 +42,7 @@ $filters-background: pvar(--secondary-400);
} }
.filters-summary { .filters-summary {
color: pvar(--main-fg-300); color: pvar(--fg-200);
} }
.filters-toggle { .filters-toggle {

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

@ -5,13 +5,13 @@
$more-button-width: 40px; $more-button-width: 40px;
.video-miniature { .video-miniature {
--fs-small: 0.75rem; --co-fs-small: 0.75rem;
--fs-medium: 0.875rem; --co-fs-medium: 0.875rem;
--fs-big: 1rem; --co-fs-big: 1rem;
} }
.video-name { .video-name {
font-size: var(--fs-big); font-size: var(--co-fs-big);
@include miniature-name; @include miniature-name;
} }
@ -25,28 +25,28 @@ $more-button-width: 40px;
.owner { .owner {
display: flex; display: flex;
position: relative; position: relative;
font-size: var(--fs-medium); font-size: var(--co-fs-medium);
} }
.date-and-views, .date-and-views,
.video-info-privacy, .video-info-privacy,
.badges { .badges {
font-size: var(--fs-small); font-size: var(--co-fs-small);
} }
.date-and-views { .date-and-views {
color: pvar(--main-fg-300); color: pvar(--fg-200);
} }
.owner-label { .owner-label {
display: block; display: block;
color: pvar(--main-fg-400); color: pvar(--fg-300);
@include disable-default-a-behaviour; @include disable-default-a-behaviour;
@include ellipsis; @include ellipsis;
&:hover { &:hover {
color: pvar(--main-fg-600); color: pvar(--fg);
} }
} }
@ -166,20 +166,20 @@ $more-button-width: 40px;
} }
.video-miniature.display-as-row { .video-miniature.display-as-row {
--fs-small: 0.875rem; --co-fs-small: 0.875rem;
--fs-medium: 1rem; --co-fs-medium: 1rem;
--fs-big: 1.25rem; --co-fs-big: 1.25rem;
--rowThumbnailWidth: #{$video-thumbnail-width}; --co-row-thumbnail-width: #{$video-thumbnail-width};
--rowThumbnailHeight: #{$video-thumbnail-height}; --co-row-thumbnail-height: #{$video-thumbnail-height};
display: flex; display: flex;
flex-direction: row; flex-direction: row;
my-video-thumbnail { my-video-thumbnail {
min-width: var(--rowThumbnailWidth); min-width: var(--co-row-thumbnail-width);
max-width: var(--rowThumbnailWidth); max-width: var(--co-row-thumbnail-width);
height: var(--rowThumbnailHeight); height: var(--co-row-thumbnail-height);
@include margin-right(1rem); @include margin-right(1rem);
} }
@ -223,14 +223,14 @@ $more-button-width: 40px;
@include on-small-main-col { @include on-small-main-col {
.video-miniature.display-as-row { .video-miniature.display-as-row {
--rowThumbnailWidth: #{$video-thumbnail-medium-width}; --co-row-thumbnail-width: #{$video-thumbnail-medium-width};
--rowThumbnailHeight: #{$video-thumbnail-medium-height}; --co-row-thumbnail-height: #{$video-thumbnail-medium-height};
} }
} }
@include on-mobile-main-col { @include on-mobile-main-col {
.video-miniature.display-as-row { .video-miniature.display-as-row {
--rowThumbnailWidth: #{$video-thumbnail-small-width}; --co-row-thumbnail-width: #{$video-thumbnail-small-width};
--rowThumbnailHeight: #{$video-thumbnail-small-height}; --co-row-thumbnail-height: #{$video-thumbnail-small-height};
} }
} }

2
client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
View File

@ -108,7 +108,7 @@ my-timestamp-input {
.header-label { .header-label {
font-size: 13px; font-size: 13px;
color: pvar(--main-fg-400); color: pvar(--fg-300);
padding-left: 2px; padding-left: 2px;
&:nth-child(1) { &:nth-child(1) {

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

@ -51,14 +51,14 @@ my-video-thumbnail,
.position { .position {
font-weight: $font-semibold; font-weight: $font-semibold;
color: pvar(--main-fg-400); color: pvar(--fg-300);
min-width: 25px; min-width: 25px;
my-global-icon { my-global-icon {
width: 17px; width: 17px;
position: relative; position: relative;
left: -2px; left: -2px;
color: pvar(--main-fg-400); color: pvar(--fg-300);
} }
} }
} }
@ -85,7 +85,7 @@ my-video-thumbnail,
} }
my-global-icon { my-global-icon {
color: pvar(--main-fg-400); color: pvar(--fg-300);
} }
} }
@ -139,7 +139,7 @@ my-video-thumbnail,
.video-info-owner, .video-info-owner,
.video-info-timestamp { .video-info-timestamp {
color: pvar(--main-fg-400); color: pvar(--fg-300);
} }
} }

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

@ -49,7 +49,7 @@
.by { .by {
display: block; display: block;
color: pvar(--main-fg-400); color: pvar(--fg-300);
@include disable-default-a-behaviour; @include disable-default-a-behaviour;
} }
@ -70,7 +70,7 @@
.description { .description {
margin-top: 10px; margin-top: 10px;
color: pvar(--main-fg-400); color: pvar(--fg-300);
@include peertube-word-wrap; @include peertube-word-wrap;
} }
@ -92,8 +92,8 @@
} }
.miniature.display-as-row { .miniature.display-as-row {
--rowThumbnailWidth: #{$video-thumbnail-width}; --co-row-thumbnail-width: #{$video-thumbnail-width};
--rowThumbnailHeight: #{$video-thumbnail-height}; --co-row-thumbnail-height: #{$video-thumbnail-height};
display: flex; display: flex;
@ -102,9 +102,9 @@
} }
.miniature-thumbnail { .miniature-thumbnail {
min-width: var(--rowThumbnailWidth); min-width: var(--co-row-thumbnail-width);
max-width: var(--rowThumbnailWidth); max-width: var(--co-row-thumbnail-width);
height: var(--rowThumbnailHeight); height: var(--co-row-thumbnail-height);
@include margin-right(1rem); @include margin-right(1rem);
} }
@ -112,14 +112,14 @@
@include on-small-main-col { @include on-small-main-col {
.miniature.display-as-row { .miniature.display-as-row {
--rowThumbnailWidth: #{$video-thumbnail-medium-width}; --co-row-thumbnail-width: #{$video-thumbnail-medium-width};
--rowThumbnailHeight: #{$video-thumbnail-medium-height}; --co-row-thumbnail-height: #{$video-thumbnail-medium-height};
} }
} }
@include on-mobile-main-col { @include on-mobile-main-col {
.miniature.display-as-row { .miniature.display-as-row {
--rowThumbnailWidth: #{$video-thumbnail-small-width}; --co-row-thumbnail-width: #{$video-thumbnail-small-width};
--rowThumbnailHeight: #{$video-thumbnail-small-height}; --co-row-thumbnail-height: #{$video-thumbnail-small-height};
} }
} }

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

@ -48,7 +48,7 @@
.from-date { .from-date {
font-size: 0.85em; font-size: 0.85em;
color: pvar(--main-fg-400); color: pvar(--fg-300);
min-width: 70px; min-width: 70px;
text-align: end; text-align: end;

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

@ -18,24 +18,20 @@ input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; } input[type="search"]::-webkit-search-results-decoration { display: none; }
body { body {
/*** theme ***/ // ---------------------------------------------------------------------------
// now beware sass requires interpolation
// for css custom properties #{$var}
--menuBackgroundColor: #{$menu-background};
--menuForegroundColor: #{$menu-color};
// Create a theme system using CSS variables
// Fallback from old theme
--primary: var(--primary);
--secondary: var(--greyBackgroundColor);
--main-fg: var(--fg);
--main-fg-500: var(--greyForegroundColor, 0); // 0 means undefined
// New theme with fallback // New theme with fallback
--fg: var(--mainForegroundColor, #{pvar(--main-fg-600)}); // ---------------------------------------------------------------------------
--bg: var(--mainBackgroundColor, #{pvar(--secondary-300)});
--menu-bg: var(--menuBackgroundColor);
--menu-fg: var(--menuForegroundColor);
--fg: var(--mainForegroundColor, #000);
--fg-300: var(--greyForegroundColor, 0); // 0 means undefined
--bg: var(--mainBackgroundColor, #fff);
--bg-secondary: var(--greyBackgroundColor, #E5E5E5);
--primary: var(--mainColor, hsl(24, 90%, 45%));
--on-primary: #{pvar(--fg)}; --on-primary: #{pvar(--fg)};
--red: #{$red}; --red: #{$red};
@ -44,16 +40,16 @@ body {
--green: #{$green}; --green: #{$green};
--input-fg: var(--inputForegroundColor, #{pvar(--fg)}); --input-fg: var(--inputForegroundColor, #{pvar(--fg)});
--input-bg: var(--inputBackgroundColor, #{pvar(--secondary-400)}); --input-bg: var(--inputBackgroundColor, #{pvar(--bg-secondary-400)});
--input-placeholder: var(--inputPlaceholderColor, #{pvar(--secondary-750)}); --input-placeholder: var(--inputPlaceholderColor, #{pvar(--fg-50)});
--input-border-color: var(--inputBorderColor, #{pvar(--secondary-500)}); --input-border-color: var(--inputBorderColor, #{pvar(--bg-secondary-500)});
--textarea-fg: var(--textareaForegroundColor, #{pvar(--input-fg)}); --textarea-fg: var(--textareaForegroundColor, #{pvar(--input-fg)});
--textarea-bg: var(--textareaBackgroundColor, #{pvar(--input-bg)}); --textarea-bg: var(--textareaBackgroundColor, #{pvar(--input-bg)});
--channel-bg: var(--channelBackgroundColor, #{pvar(--primary-50)}); --channel-bg: var(--channelBackgroundColor, #{pvar(--primary-50)});
--support-btn-fg: var(--supportButtonColor, #{pvar(--main-fg-400)}); --support-btn-fg: var(--supportButtonColor, #{pvar(--fg-300)});
--support-btn-bg: var(--supportButtonBackgroundColor, transparent); --support-btn-bg: var(--supportButtonBackgroundColor, transparent);
--support-btn-heart-bg: var(--supportButtonHeartColor, #{$support-button-heart}); --support-btn-heart-bg: var(--supportButtonHeartColor, #{$support-button-heart});
@ -61,23 +57,36 @@ body {
--x-videos-margin-content: 2rem; --x-videos-margin-content: 2rem;
--main-col-width: calc(100vw - #{$menu-width}); --main-col-width: calc(100vw - #{$menu-width});
--secondary-icon-color: #{pvar(--fg-50)};
--secondary-fg: #{pvar(--fg-50)};
// Light theme // Light theme
&[data-pt-theme=peertube-core-light], &[data-pt-theme=peertube-core-light],
&[data-pt-theme=default] { &[data-pt-theme=default] {
--is-dark: 0; --is-dark: 0;
--primary: #F2690D; --primary: #F2690D;
--main-fg: hsl(0 14% 12%);
--secondary: hsl(0 10% 76%); --fg: hsl(0 14% 2%);
--bg: hsl(0 10% 96%);
--bg-secondary: hsl(0 10% 76%);
--secondary-icon-color: #8F7676;
--input-placeholder: #8F7676;
} }
// Brown // Brown
&[data-pt-theme=peertube-core-dark] { &[data-pt-theme=peertube-core-dark] {
--is-dark: 1; --is-dark: 1;
--primary: #FD9C50; --primary: #FD9C50;
--main-fg: hsl(0 10% 86%); --on-primary: #111;
--secondary: hsl(0 14% 22%);
--bg: #{pvar(--secondary-350)}; --fg: hsl(0 10% 96%);
--on-primary: #{pvar(--secondary-600)};
--bg: hsl(0 14% 7%);
--bg-secondary: hsl(0 14% 22%);
} }
& { & {
@ -147,8 +156,8 @@ label {
} }
code { code {
background-color: pvar(--secondary-350); background-color: pvar(--bg-secondary-350);
color: pvar(--main-fg-500); color: pvar(--fg-400);
border-radius: 3px; border-radius: 3px;
padding: .2em .4em; padding: .2em .4em;
margin: auto .4em; margin: auto .4em;
@ -174,7 +183,7 @@ code {
} }
.sub-menu { .sub-menu {
background-color: pvar(--secondary-400); background-color: pvar(--bg-secondary-400);
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
@ -232,8 +241,9 @@ my-global-icon[iconName=external-link] {
margin: 0 0.3em; margin: 0 0.3em;
width: 0.9em; width: 0.9em;
height: 0.9em; height: 0.9em;
line-height: 0.9em;
display: inline-block; display: inline-block;
color: pvar(--secondary-750); color: pvar(--secondary-icon-color);
position: relative; position: relative;
top: -0.1em; top: -0.1em;
} }

4
client/src/sass/bootstrap.scss
View File

@ -53,7 +53,7 @@ body {
} }
.btn-outline-secondary { .btn-outline-secondary {
--bs-btn-color: #{pvar(--main-fg-400)}; --bs-btn-color: #{pvar(--fg-300)};
} }
.btn { .btn {
@ -75,7 +75,7 @@ body {
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
.dropdown-menu { .dropdown-menu {
--bs-dropdown-link-hover-bg: #{pvar(--secondary-350)}; --bs-dropdown-link-hover-bg: #{pvar(--bg-secondary-350)};
--bs-dropdown-link-color: #{pvar(--fg)}; --bs-dropdown-link-color: #{pvar(--fg)};
--bs-dropdown-border-color: #{pvar(--input-border-color)}; --bs-dropdown-border-color: #{pvar(--input-border-color)};

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

@ -64,9 +64,9 @@
padding: 0; padding: 0;
border: 0 !important; border: 0 !important;
text-decoration: underline; text-decoration: underline;
color: pvar(--main-fg-500); color: pvar(--fg-400);
&:hover { &:hover {
color: pvar(--main-fg-200); color: pvar(--fg-100);
} }
} }

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

@ -99,11 +99,11 @@
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
.chip { .chip {
--avatarSize: 1.2rem; --chip-avatar-size: 1.2rem;
display: inline-flex; display: inline-flex;
color: pvar(--fg); color: pvar(--fg);
height: var(--avatarSize); height: var(--chip-avatar-size);
max-width: 320px; max-width: 320px;
overflow: hidden; overflow: hidden;
text-decoration: none; text-decoration: none;
@ -114,14 +114,14 @@
my-actor-avatar { my-actor-avatar {
border-radius: 5rem; border-radius: 5rem;
width: var(--avatarSize); width: var(--chip-avatar-size);
height: var(--avatarSize); height: var(--chip-avatar-size);
@include margin-right(0.5rem); @include margin-right(0.5rem);
} }
&.two-lines { &.two-lines {
--avatarSize: 2rem; --chip-avatar-size: 2rem;
font-size: 14px; font-size: 14px;
line-height: 1rem; line-height: 1rem;

2
client/src/sass/include/_account-channel-page.scss
View File

@ -63,7 +63,7 @@
.actor-handle, .actor-handle,
.actor-counters { .actor-counters {
color: pvar(--main-fg-400); color: pvar(--fg-300);
@include font-size($actor-handle-font-size); @include font-size($actor-handle-font-size);
} }

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

@ -28,7 +28,7 @@
.actor-name { .actor-name {
font-size: 14px; font-size: 14px;
color: pvar(--main-fg-400); color: pvar(--fg-300);
@include margin-left(5px); @include margin-left(5px);
} }

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

@ -21,7 +21,7 @@
&.badge-secondary { &.badge-secondary {
color: pvar(--bg); color: pvar(--bg);
background-color: pvar(--main-fg-400); background-color: pvar(--fg-300);
opacity: 0.7; opacity: 0.7;
} }

8
client/src/sass/include/_bootstrap-variables.scss
View File

@ -45,18 +45,18 @@ $input-focus-border-color: #ced4da;
$input-focus-box-shadow: 0 0 0 0.25rem pvar(--primary-100); $input-focus-box-shadow: 0 0 0 0.25rem pvar(--primary-100);
$input-group-addon-color: pvar(--fg); $input-group-addon-color: pvar(--fg);
$input-group-addon-bg: pvar(--secondary-350); $input-group-addon-bg: pvar(--bg-secondary-350);
$nav-pills-link-active-bg: pvar(--secondary-350); $nav-pills-link-active-bg: pvar(--bg-secondary-350);
$nav-pills-link-active-color: pvar(--fg); $nav-pills-link-active-color: pvar(--fg);
$nav-link-transition: none; $nav-link-transition: none;
$dropdown-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); $dropdown-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
$dropdown-border-radius: 3px; $dropdown-border-radius: 3px;
$dropdown-link-active-color: pvar(--fg); $dropdown-link-active-color: pvar(--fg);
$dropdown-link-active-bg: pvar(--secondary-300); $dropdown-link-active-bg: pvar(--bg-secondary-300);
$dropdown-link-hover-color: pvar(--fg); $dropdown-link-hover-color: pvar(--fg);
$dropdown-link-hover-bg: pvar(--secondary-300); $dropdown-link-hover-bg: pvar(--bg-secondary-300);
$dropdown-color: pvar(--fg); $dropdown-color: pvar(--fg);
$dropdown-bg: pvar(--bg); $dropdown-bg: pvar(--bg);

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

@ -108,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: pvar(--secondary-400); color: #E9DFDF;
} }
// Use margin by default, or padding if $margin is false // Use margin by default, or padding if $margin is false
@ -134,14 +134,14 @@
@media screen and (min-width: $mobile-view) { @media screen and (min-width: $mobile-view) {
.videos, .videos,
.playlists { .playlists {
--miniatureMinWidth: #{$video-thumbnail-width - 25px}; --co-miniature-min-width: #{$video-thumbnail-width - 25px};
--miniatureMaxWidth: #{$video-thumbnail-width}; --co-miniature-max-width: #{$video-thumbnail-width};
display: grid; display: grid;
column-gap: 30px; column-gap: 30px;
grid-template-columns: repeat( grid-template-columns: repeat(
auto-fill, auto-fill,
minmax(var(--miniatureMinWidth), 1fr) minmax(var(--co-miniature-min-width), 1fr)
); );
@if ($rows-limit != 0) { @if ($rows-limit != 0) {
@ -158,8 +158,8 @@
my-video-miniature, my-video-miniature,
my-video-playlist-miniature { my-video-playlist-miniature {
display: block; display: block;
min-width: var(--miniatureMinWidth); min-width: var(--co-miniature-min-width);
max-width: var(--miniatureMaxWidth); max-width: var(--co-miniature-max-width);
} }
} }

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

@ -28,7 +28,7 @@
} }
@mixin muted { @mixin muted {
color: pvar(--main-fg-400) !important; color: pvar(--fg-300) !important;
} }
@mixin fade-text ($fade-after, $background-color) { @mixin fade-text ($fade-after, $background-color) {
@ -103,7 +103,7 @@
} }
&[readonly] { &[readonly] {
color: pvar(--main-fg-400); color: pvar(--fg-300);
} }
&:focus, &:focus,
@ -167,15 +167,15 @@
& { & {
color: pvar(--fg); color: pvar(--fg);
background-color: transparent; background-color: transparent;
border: 1px solid pvar(--secondary-500); border: 1px solid pvar(--bg-secondary-500);
} }
&:active, &:active,
&:focus, &:focus,
&:focus-visible { &:focus-visible {
color: pvar(--fg); color: pvar(--fg);
background-color: pvar(--secondary-450); background-color: pvar(--bg-secondary-450);
border-color: pvar(--secondary-500); border-color: pvar(--bg-secondary-500);
} }
// Override bootstrap // Override bootstrap
@ -183,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-450) !important; background-color: pvar(--bg-secondary-450) !important;
border-color: pvar(--secondary-500) !important; border-color: pvar(--bg-secondary-500) !important;
} }
&:hover { &:hover {
color: pvar(--fg); color: pvar(--fg);
background-color: pvar(--secondary-450); background-color: pvar(--bg-secondary-450);
} }
&[disabled] { &[disabled] {
@ -198,18 +198,18 @@
} }
my-global-icon { my-global-icon {
color: pvar(--secondary-750); color: pvar(--secondary-icon-color);
} }
} }
@mixin tertiary-button { @mixin tertiary-button {
color: pvar(--main-fg-300); color: pvar(--fg-200);
background-color: transparent; background-color: transparent;
border: 1px solid transparent; border: 1px solid transparent;
&:hover { &:hover {
color: pvar(--main-fg-300); color: pvar(--fg-200);
background-color: pvar(--secondary-400); background-color: pvar(--bg-secondary-400);
} }
&[disabled] { &[disabled] {
@ -217,20 +217,20 @@
} }
&:active { &:active {
background-color: pvar(--secondary-450); background-color: pvar(--bg-secondary-450);
} }
&.show { &.show {
border-color: pvar(--main-fg-300); border-color: pvar(--fg-200);
} }
// Override bootstrap // Override bootstrap
&.btn:active { &.btn:active {
background-color: pvar(--secondary-200) !important; background-color: pvar(--bg-secondary-200) !important;
} }
&.btn.show { &.btn.show {
border-color: pvar(--main-fg-300) !important; border-color: pvar(--fg-200) !important;
} }
} }
@ -406,7 +406,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(--secondary); border-top-color: pvar(--bg-secondary-500);
margin-top: -2px; margin-top: -2px;
z-index: 100; z-index: 100;
} }
@ -563,7 +563,7 @@
} }
@mixin actor-counters ($separator-margin: 10px) { @mixin actor-counters ($separator-margin: 10px) {
color: pvar(--main-fg-400); color: pvar(--fg-300);
display: flex; display: flex;
align-items: center; align-items: center;
@ -617,7 +617,7 @@
} }
} }
@mixin divider($color: pvar(--secondary-400), $background: pvar(--bg)) { @mixin divider($color: pvar(--bg-secondary-400), $background: pvar(--bg)) {
width: 95%; width: 95%;
border-top: .05rem solid $color; border-top: .05rem solid $color;
height: .05rem; height: .05rem;
@ -724,7 +724,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 pvar(--secondary-300); border-left: $width solid pvar(--bg-secondary-300);
} }
@mixin on-small-main-col () { @mixin on-small-main-col () {

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

@ -26,7 +26,7 @@ $white: #fff;
$button-font-size: 1rem; $button-font-size: 1rem;
$header-height: 84px; $header-height: 94px;
$menu-background: #221A1A; $menu-background: #221A1A;
$menu-color: #E9DFDF; $menu-color: #E9DFDF;
@ -63,8 +63,6 @@ $player-portrait-bottom-space: 50px;
$sub-menu-margin-bottom: 30px; $sub-menu-margin-bottom: 30px;
$sub-menu-margin-bottom-small-view: 10px; $sub-menu-margin-bottom-small-view: 10px;
$activated-action-button-color: hsl(210, 11%, 15%);
$focus-box-shadow-form: 0 0 0 .2rem; $focus-box-shadow-form: 0 0 0 .2rem;
$form-input-font-size: 16px; $form-input-font-size: 16px;
@ -109,22 +107,27 @@ $variables: (
--support-btn-fg: var(--support-btn-fg), --support-btn-fg: var(--support-btn-fg),
--support-btn-heart-bg: var(--support-btn-heart-bg), --support-btn-heart-bg: var(--support-btn-heart-bg),
--main-fg: var(--main-fg), --secondary-icon-color: var(--secondary-icon-color),
--main-fg-800: var(--main-fg-800),
--main-fg-750: var(--main-fg-750), --fg-500: var(--fg-500),
--main-fg-700: var(--main-fg-700), --fg-450: var(--fg-450),
--main-fg-650: var(--main-fg-650), --fg-400: var(--fg-400),
--main-fg-600: var(--main-fg-600), --fg-350: var(--fg-350),
--main-fg-550: var(--main-fg-550), --fg-300: var(--fg-300),
--main-fg-500: var(--main-fg-500), --fg-250: var(--fg-250),
--main-fg-450: var(--main-fg-450), --fg-200: var(--fg-200),
--main-fg-400: var(--main-fg-400), --fg-150: var(--fg-150),
--main-fg-350: var(--main-fg-350), --fg-100: var(--fg-100),
--main-fg-300: var(--main-fg-300), --fg-50: var(--fg-50),
--main-fg-250: var(--main-fg-250),
--main-fg-200: var(--main-fg-200), --bg-secondary-600: var(--bg-secondary-600),
--main-fg-150: var(--main-fg-150), --bg-secondary-500: var(--bg-secondary-500),
--main-fg-100: var(--main-fg-100), --bg-secondary-450: var(--bg-secondary-450),
--bg-secondary-400: var(--bg-secondary-400),
--bg-secondary-350: var(--bg-secondary-350),
--bg-secondary-300: var(--bg-secondary-300),
--bg-secondary-250: var(--bg-secondary-250),
--bg-secondary-200: var(--bg-secondary-200),
--on-primary: var(--on-primary), --on-primary: var(--on-primary),
@ -146,22 +149,9 @@ $variables: (
--primary-100: var(--primary-100), --primary-100: var(--primary-100),
--primary-50: var(--primary-50), --primary-50: var(--primary-50),
--secondary: var(--secondary), // Optional variables
--secondary-800: var(--secondary-800), --menu-fg: var(--menu-fg),
--secondary-750: var(--secondary-750), --menu-bg: var(--menu-bg)
--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-150: var(--secondary-150),
--secondary-100: var(--secondary-100)
); );
// SASS type check our CSS variables // SASS type check our CSS variables
@ -173,6 +163,14 @@ $variables: (
} }
} }
@function pvar-fallback($variable, $fallback) {
@if map.has-key($variables, $variable) and map.has-key($variables, $fallback) {
@return var($variable, map.get($variables, $fallback));
} @else {
@error 'ERROR: Variable #{$variable} does not exist';
}
}
/*** z-index groups ***/ /*** z-index groups ***/
$zindex: ( $zindex: (

16
client/src/sass/player/dock.scss
View File

@ -6,7 +6,7 @@
.video-js.vjs-peertube-skin { .video-js.vjs-peertube-skin {
.peertube-dock { .peertube-dock {
--avatarSize: 48px; --dock-avatar-size: 48px;
transition: opacity 0.1s; transition: opacity 0.1s;
@ -28,10 +28,10 @@
.peertube-dock-avatar { .peertube-dock-avatar {
border-radius: 50%; border-radius: 50%;
margin-right: 10px; margin-right: 10px;
min-width: var(--avatarSize); min-width: var(--dock-avatar-size);
min-height: var(--avatarSize); min-height: var(--dock-avatar-size);
max-height: var(--avatarSize); max-height: var(--dock-avatar-size);
max-height: var(--avatarSize); max-height: var(--dock-avatar-size);
} }
.peertube-dock-title-description { .peertube-dock-title-description {
@ -70,7 +70,7 @@
.video-js.vjs-peertube-skin.vjs-size-750 { .video-js.vjs-peertube-skin.vjs-size-750 {
.peertube-dock-avatar { .peertube-dock-avatar {
--avatarSize: 40px; --dock-avatar-size: 40px;
} }
.peertube-dock { .peertube-dock {
@ -85,7 +85,7 @@
.video-js.vjs-peertube-skin.vjs-size-570 { .video-js.vjs-peertube-skin.vjs-size-570 {
.peertube-dock-avatar { .peertube-dock-avatar {
--avatarSize: 35px; --dock-avatar-size: 35px;
} }
.peertube-dock { .peertube-dock {
@ -95,7 +95,7 @@
.video-js.vjs-peertube-skin.vjs-size-350 { .video-js.vjs-peertube-skin.vjs-size-350 {
.peertube-dock-avatar { .peertube-dock-avatar {
--avatarSize: 30px; --dock-avatar-size: 30px;
} }
.peertube-dock { .peertube-dock {

2
client/src/sass/player/offline-notification.scss
View File

@ -7,7 +7,7 @@ $height: 40px;
right: 0; right: 0;
height: $height; height: $height;
color: pvar(--on-primary); color: pvar(--on-primary);
background-color: var(--primary-50); background-color: pvar(--primary-50);
text-align: center; text-align: center;
z-index: 1; z-index: 1;
display: flex; display: flex;

2
client/src/sass/player/peertube-skin.scss
View File

@ -67,7 +67,7 @@ body {
&:focus-visible, &:focus-visible,
&:hover { &:hover {
background-color: var(--primary, #696969); background-color: pvar(--primary);
} }
} }

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

@ -56,7 +56,7 @@ body .p-paginator .p-paginator-first,
body .p-paginator .p-paginator-prev, body .p-paginator .p-paginator-prev,
body .p-paginator .p-paginator-next, body .p-paginator .p-paginator-next,
body .p-paginator .p-paginator-last { body .p-paginator .p-paginator-last {
color: pvar(--main-fg-400); color: pvar(--fg-300);
height: 2.286em; height: 2.286em;
min-width: 2.286em; min-width: 2.286em;
border: 0 none; border: 0 none;
@ -89,7 +89,7 @@ body .p-paginator .p-paginator-current {
line-height: 2.286em; line-height: 2.286em;
} }
body .p-paginator .p-dropdown .p-dropdown-trigger, body .p-paginator .p-dropdown .p-dropdown-label { body .p-paginator .p-dropdown .p-dropdown-trigger, body .p-paginator .p-dropdown .p-dropdown-label {
color: pvar(--main-fg-400); color: pvar(--fg-300);
} }
body .p-paginator .p-dropdown:hover .p-dropdown-trigger, body .p-paginator .p-dropdown:hover .p-dropdown-label { body .p-paginator .p-dropdown:hover .p-dropdown-trigger, body .p-paginator .p-dropdown:hover .p-dropdown-label {
color: #333333; color: #333333;
@ -116,7 +116,7 @@ body .p-paginator .p-paginator-pages {
padding: 0; padding: 0;
} }
body .p-paginator .p-paginator-pages .p-paginator-page { body .p-paginator .p-paginator-pages .p-paginator-page {
color: pvar(--main-fg-400); color: pvar(--fg-300);
height: 2.286em; height: 2.286em;
min-width: 2.286em; min-width: 2.286em;
border: 0 none; border: 0 none;
@ -180,10 +180,10 @@ body .p-dropdown .p-dropdown-trigger {
width: 2rem; width: 2rem;
border-top-right-radius: 6px; border-top-right-radius: 6px;
border-bottom-right-radius: 6px; border-bottom-right-radius: 6px;
color: pvar(--main-fg-400); color: pvar(--fg-300);
} }
body .p-dropdown .p-dropdown-clear-icon { body .p-dropdown .p-dropdown-clear-icon {
color: pvar(--main-fg-400); color: pvar(--fg-300);
right: 2rem; right: 2rem;
} }
body .p-dropdown.p-dropdown-clearable .p-dropdown-label { body .p-dropdown.p-dropdown-clearable .p-dropdown-label {
@ -484,7 +484,7 @@ body p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
.p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.25rem var(--primary-100); box-shadow: 0 0 0 0.25rem pvar(--primary-100);
} }
.p-chips .p-chips-multiple-container { .p-chips .p-chips-multiple-container {
padding: 3px 15px; padding: 3px 15px;
@ -521,7 +521,7 @@ p-chips.p-chips-clearable .p-inputtext {
padding-right: 1.429rem; padding-right: 1.429rem;
} }
p-chips.p-chips-clearable .p-chips-clear-icon { p-chips.p-chips-clearable .p-chips-clear-icon {
color: pvar(--main-fg-400); color: pvar(--fg-300);
right: 0.429rem; right: 0.429rem;
} }
@ -540,7 +540,7 @@ p-chips.p-chips-clearable .p-chips-clear-icon {
.p-multiselect:not(.p-disabled).p-focus { .p-multiselect:not(.p-disabled).p-focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.25rem var(--primary-100); box-shadow: 0 0 0 0.25rem pvar(--primary-100);
} }
.p-multiselect .p-multiselect-label { .p-multiselect .p-multiselect-label {
padding: 4px 15px; padding: 4px 15px;
@ -584,7 +584,7 @@ p-chips.p-chips-clearable .p-chips-clear-icon {
padding-right: 1.429rem; padding-right: 1.429rem;
} }
.p-multiselect-clearable .p-multiselect-clear-icon { .p-multiselect-clearable .p-multiselect-clear-icon {
color: pvar(--main-fg-400); color: pvar(--fg-300);
right: 2.357rem; right: 2.357rem;
} }
@ -609,7 +609,7 @@ p-chips.p-chips-clearable .p-chips-clear-icon {
} }
.p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon { .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
right: 0.429rem; right: 0.429rem;
color: pvar(--main-fg-400); color: pvar(--fg-300);
} }
.p-multiselect-panel .p-multiselect-header .p-checkbox { .p-multiselect-panel .p-multiselect-header .p-checkbox {
margin-right: 0.5rem; margin-right: 0.5rem;
@ -618,7 +618,7 @@ p-chips.p-chips-clearable .p-chips-clear-icon {
margin-left: 0.5rem; margin-left: 0.5rem;
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
color: pvar(--main-fg-400); color: pvar(--fg-300);
border: 0 none; border: 0 none;
background: transparent; background: transparent;
border-radius: 50%; border-radius: 50%;
@ -713,7 +713,7 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
.p-inputtext:enabled:focus { .p-inputtext:enabled:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.25rem var(--primary-100); box-shadow: 0 0 0 0.25rem pvar(--primary-100);
} }
.p-inputtext.ng-dirty.ng-invalid { .p-inputtext.ng-dirty.ng-invalid {
border-color: pvar(--red); border-color: pvar(--red);
@ -806,7 +806,7 @@ p-table {
height: 46px; height: 46px;
&.p-highlight { &.p-highlight {
background-color: pvar(--secondary-400) !important; background-color: pvar(--bg-secondary-400) !important;
td, td > a { td, td > a {
color: pvar(--fg) !important; color: pvar(--fg) !important;
@ -821,7 +821,7 @@ p-table {
.p-datatable-tbody { .p-datatable-tbody {
tr { tr {
&:hover { &:hover {
background-color: pvar(--secondary-400) !important; background-color: pvar(--bg-secondary-400) !important;
} }
td { td {
@ -859,13 +859,13 @@ p-table {
border: none !important; border: none !important;
border-bottom: 1px solid !important; border-bottom: 1px solid !important;
border-color: pvar(--secondary-400) !important; border-color: pvar(--bg-secondary-400) !important;
text-align: start !important; text-align: start !important;
font-weight: $font-semibold !important; font-weight: $font-semibold !important;
color: pvar(--fg) !important; color: pvar(--fg) !important;
&.p-sortable-column:hover { &.p-sortable-column:hover {
background-color: pvar(--secondary-400) !important; background-color: pvar(--bg-secondary-400) !important;
} }
&.p-sortable-column:focus-visible { &.p-sortable-column:focus-visible {
@ -873,7 +873,7 @@ p-table {
} }
&.p-highlight { &.p-highlight {
background-color: pvar(--secondary-400) !important; background-color: pvar(--bg-secondary-400) !important;
.pi-sort-amount-up-alt, .pi-sort-amount-up-alt,
.pi-sort-amount-down { .pi-sort-amount-down {
@ -915,7 +915,7 @@ p-table {
position: relative; position: relative;
border: none; border: none;
border-top: 1px solid !important; border-top: 1px solid !important;
border-color: pvar(--secondary-400) !important; border-color: pvar(--bg-secondary-400) !important;
height: 40px; height: 40px;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -933,7 +933,7 @@ p-table {
} }
.p-label { .p-label {
color: pvar(--main-fg-400); color: pvar(--fg-300);
} }
} }
@ -944,7 +944,7 @@ p-table {
} }
.p-paginator-current { .p-paginator-current {
color: pvar(--main-fg-400); color: pvar(--fg-300);
overflow: visible; overflow: visible;
} }
@ -1088,7 +1088,7 @@ p-toast {
min-width: 200px; min-width: 200px;
.p-toast-icon-close { .p-toast-icon-close {
color: pvar(--main-fg-400); color: pvar(--fg-300);
position: absolute; position: absolute;
right: 5px; right: 5px;
top: 5px; top: 5px;