yetangitu/Peertube
1
0
Fork 0
mirror of https://github.com/Chocobozzz/PeerTube.git synced 2025-10-03 17:59:37 +02:00
Code Issues Releases Wiki Activity

Propagate CSS variables to embed too

Browse source
This commit is contained in:
Chocobozzz 2025-01-28 09:14:58 +01:00
parent 0320f5b5e4
commit 61ca8f8d6e
No known key found for this signature in database
GPG key ID: 583A612D890159BE
8 changed files with 168 additions and 153 deletions
Download patch file Download diff file Expand all files Collapse all files

141
client/src/sass/application.scss
View file

@ -10,6 +10,7 @@
@use './primeng-custom'; @use './primeng-custom';
@use './z-index'; @use './z-index';
@use './class-helpers/index.scss'; @use './class-helpers/index.scss';
@use '_css-variables' as *;
@mixin main-col-expanded { @mixin main-col-expanded {
--main-col-width: 100vw; --main-col-width: 100vw;
@ -25,145 +26,7 @@ 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 {
// --------------------------------------------------------------------------- @include define-css-variables();
// New theme with fallback
// ---------------------------------------------------------------------------
--menu-bg: var(--menuBackgroundColor);
--menu-fg: var(--menuForegroundColor);
--fg: var(--mainForegroundColor, #000);
--bg: var(--mainBackgroundColor, #fff);
--bg-secondary: var(--greyBackgroundColor, #E5E5E5);
--primary: var(--mainColor, hsl(24, 90%, 45%));
--on-primary: #{pvar(--fg)};
--red: #{$red};
--on-red: #{$white};
--green: #{$green};
--input-fg: var(--inputForegroundColor, #{pvar(--fg)});
--input-bg: var(--inputBackgroundColor, #{pvar(--bg-secondary-400)});
--input-placeholder: var(--inputPlaceholderColor, #{pvar(--fg-50)});
--input-border-color: var(--inputBorderColor, #{pvar(--input-bg)});
--input-bg-in-secondary: #{pvar(--bg-secondary-450)};
--input-check-active-fg: #{pvar(--on-primary)};
--input-check-active-bg: #{pvar(--primary)};
--input-y-padding: 5px;
--input-x-padding: 20px;
--input-border-radius: 4px;
--textarea-fg: var(--textareaForegroundColor, #{pvar(--input-fg)});
--textarea-bg: var(--textareaBackgroundColor, #{pvar(--input-bg)});
--support-btn-fg: var(--supportButtonColor, #{pvar(--fg-300)});
--support-btn-bg: var(--supportButtonBackgroundColor, transparent);
--support-btn-heart-bg: var(--supportButtonHeartColor, #{$support-button-heart});
--x-margin-content: 2rem;
--main-col-width: calc(100vw - #{$menu-width});
--secondary-icon-color: #{pvar(--fg-50)};
--active-icon-color: #{pvar(--on-primary)};
--active-icon-bg: #{pvar(--primary)};
--border-primary: #{pvar(--primary)};
--border-secondary: #{pvar(--bg-secondary-450)};
--alert-primary-fg: #{pvar(--on-primary-200)};
--alert-primary-bg: #{pvar(--primary-200)};
--alert-primary-border-color: #{pvar(--primary-300)};
--menu-margin-left: #{$menu-margin-left};
--header-height: #{$header-height};
&.mobile-app-msg {
--header-height: #{$header-height + $header-mobile-msg-height};
}
--menu-fg: #{pvar(--fg-400)};
--menu-bg: #{pvar(--bg-secondary-400)};
@media screen and (max-width: $small-view) {
--header-height: #{$header-height-small-view};
&.mobile-app-msg {
--header-height: #{$header-height-small-view + $header-mobile-msg-height};
}
}
@media screen and (max-width: $mobile-view) {
--header-height: #{$header-height-mobile-view};
&.mobile-app-msg {
--header-height: #{$header-height-mobile-view + $header-mobile-msg-height};
}
}
// Light theme
&[data-pt-theme=peertube-core-light-beige],
&[data-pt-theme=default] {
--is-dark: 0;
--primary: #FF8F37;
--border-primary: #F2690D;
--fg: hsl(0 14% 2%);
--fg-200: hsl(0 14% 29%);
--bg: hsl(250 5% 96%);
--bg-secondary: hsl(0 12% 72%);
--bg-secondary-500: hsl(0 12% 72%);
--bg-secondary-450: hsl(0 13% 81%);
--bg-secondary-400: hsl(0 19% 89%);
--bg-secondary-350: hsl(0 13% 92%);
--menu-bg-600: hsl(0 12% 72%);
--menu-bg-550: hsl(0 13% 81%);
--menu-bg: hsl(0 19% 89%);
--secondary-icon-color: hsl(0, 9%, 51%);
--input-placeholder: hsl(0, 9%, 51%);
--input-check-active-fg: #{pvar(--bg)};
--input-check-active-bg: #{pvar(--fg-250)};
--alert-primary-fg: #{pvar(--on-primary-200)};
--alert-primary-bg: #{pvar(--primary-200)};
--alert-primary-border-color: #{pvar(--primary-300)};
}
// Brown
&[data-pt-theme=peertube-core-dark-brown] {
--is-dark: 1;
--primary: #FD9C50;
--on-primary: #111;
--border-primary: #F2690D;
--input-bg: #{pvar(--bg-secondary-450)};
--input-bg-in-secondary: #{pvar(--bg-secondary-500)};
--fg: hsl(0 10% 96%);
--bg: hsl(0 14% 7%);
--bg-secondary: hsl(0 14% 22%);
--alert-primary-fg: #{pvar(--on-primary)};
--alert-primary-bg: #cd9e7a;
--alert-primary-border-color: #{pvar(--primary-600)};
--active-icon-color: #{pvar(--fg-450)};
--active-icon-bg: #{pvar(--bg-secondary-600)};
}
& { & {
font-family: $main-fonts; font-family: $main-fonts;

147
client/src/sass/include/_css-variables.scss Normal file
View file

@ -0,0 +1,147 @@
@use '_variables' as *;
@use '_mixins' as *;
@mixin define-css-variables () {
// ---------------------------------------------------------------------------
// New theme with fallback
// ---------------------------------------------------------------------------
--menu-bg: var(--menuBackgroundColor);
--menu-fg: var(--menuForegroundColor);
--fg: var(--mainForegroundColor, #000);
--bg: var(--mainBackgroundColor, #fff);
--bg-secondary: var(--greyBackgroundColor, #E5E5E5);
--primary: var(--mainColor, hsl(24, 90%, 45%));
--on-primary: #{pvar(--fg)};
--red: #{$red};
--on-red: #{$white};
--green: #{$green};
--input-fg: var(--inputForegroundColor, #{pvar(--fg)});
--input-bg: var(--inputBackgroundColor, #{pvar(--bg-secondary-400)});
--input-placeholder: var(--inputPlaceholderColor, #{pvar(--fg-50)});
--input-border-color: var(--inputBorderColor, #{pvar(--input-bg)});
--input-bg-in-secondary: #{pvar(--bg-secondary-450)};
--input-check-active-fg: #{pvar(--on-primary)};
--input-check-active-bg: #{pvar(--primary)};
--input-y-padding: 5px;
--input-x-padding: 20px;
--input-border-radius: 4px;
--textarea-fg: var(--textareaForegroundColor, #{pvar(--input-fg)});
--textarea-bg: var(--textareaBackgroundColor, #{pvar(--input-bg)});
--support-btn-fg: var(--supportButtonColor, #{pvar(--fg-300)});
--support-btn-bg: var(--supportButtonBackgroundColor, transparent);
--support-btn-heart-bg: var(--supportButtonHeartColor, #{$support-button-heart});
--x-margin-content: 2rem;
--main-col-width: calc(100vw - #{$menu-width});
--secondary-icon-color: #{pvar(--fg-50)};
--active-icon-color: #{pvar(--on-primary)};
--active-icon-bg: #{pvar(--primary)};
--border-primary: #{pvar(--primary)};
--border-secondary: #{pvar(--bg-secondary-450)};
--alert-primary-fg: #{pvar(--on-primary-200)};
--alert-primary-bg: #{pvar(--primary-200)};
--alert-primary-border-color: #{pvar(--primary-300)};
--menu-margin-left: #{$menu-margin-left};
--header-height: #{$header-height};
--embed-fg: #fff;
--embed-big-play-bg: transparent;
&.mobile-app-msg {
--header-height: #{$header-height + $header-mobile-msg-height};
}
--menu-fg: #{pvar(--fg-400)};
--menu-bg: #{pvar(--bg-secondary-400)};
@media screen and (max-width: $small-view) {
--header-height: #{$header-height-small-view};
&.mobile-app-msg {
--header-height: #{$header-height-small-view + $header-mobile-msg-height};
}
}
@media screen and (max-width: $mobile-view) {
--header-height: #{$header-height-mobile-view};
&.mobile-app-msg {
--header-height: #{$header-height-mobile-view + $header-mobile-msg-height};
}
}
// Light theme
&[data-pt-theme=peertube-core-light-beige],
&[data-pt-theme=default] {
--is-dark: 0;
--primary: #FF8F37;
--border-primary: #F2690D;
--fg: hsl(0 14% 2%);
--fg-200: hsl(0 14% 29%);
--bg: hsl(250 5% 96%);
--bg-secondary: hsl(0 12% 72%);
--bg-secondary-500: hsl(0 12% 72%);
--bg-secondary-450: hsl(0 13% 81%);
--bg-secondary-400: hsl(0 19% 89%);
--bg-secondary-350: hsl(0 13% 92%);
--menu-bg-600: hsl(0 12% 72%);
--menu-bg-550: hsl(0 13% 81%);
--menu-bg: hsl(0 19% 89%);
--secondary-icon-color: hsl(0, 9%, 51%);
--input-placeholder: hsl(0, 9%, 51%);
--input-check-active-fg: #{pvar(--bg)};
--input-check-active-bg: #{pvar(--fg-250)};
--alert-primary-fg: #{pvar(--on-primary-200)};
--alert-primary-bg: #{pvar(--primary-200)};
--alert-primary-border-color: #{pvar(--primary-300)};
}
// Brown
&[data-pt-theme=peertube-core-dark-brown] {
--is-dark: 1;
--primary: #FD9C50;
--on-primary: #111;
--border-primary: #F2690D;
--input-bg: #{pvar(--bg-secondary-450)};
--input-bg-in-secondary: #{pvar(--bg-secondary-500)};
--fg: hsl(0 10% 96%);
--bg: hsl(0 14% 7%);
--bg-secondary: hsl(0 14% 22%);
--alert-primary-fg: #{pvar(--on-primary)};
--alert-primary-bg: #cd9e7a;
--alert-primary-border-color: #{pvar(--primary-600)};
--active-icon-color: #{pvar(--fg-450)};
--active-icon-bg: #{pvar(--bg-secondary-600)};
}
}

6
client/src/sass/include/_variables.scss
View file

@ -83,9 +83,6 @@ $primeng-breakpoint: 960px;
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
$variables: ( $variables: (
--embed-foreground-color: var(--embed-foreground-color),
--embed-big-play-background-color: var(--embed-big-play-background-color),
--x-margin-content: var(--x-margin-content), --x-margin-content: var(--x-margin-content),
--main-col-width: var(--main-col-width), --main-col-width: var(--main-col-width),
--header-height: var(--header-height), --header-height: var(--header-height),
@ -209,6 +206,9 @@ $variables: (
--alert-primary-border-color: var(--alert-primary-border-color), --alert-primary-border-color: var(--alert-primary-border-color),
--menu-margin-left: var(--menu-margin-left), --menu-margin-left: var(--menu-margin-left),
--embed-fg: var(--embed-fg),
--embed-big-play-bg: var(--embed-big-play-bg),
); );
// SASS type check our CSS variables // SASS type check our CSS variables

2
client/src/sass/player/context-menu.scss
View file

@ -16,7 +16,7 @@ $context-menu-width: 350px;
.vjs-menu-content { .vjs-menu-content {
opacity: $primary-foreground-opacity; opacity: $primary-foreground-opacity;
color: pvar(--embed-foreground-color); color: pvar(--embed-fg);
font-size: $font-size !important; font-size: $font-size !important;
font-weight: $font-semibold; font-weight: $font-semibold;
} }

8
client/src/sass/player/control-bar.scss
View file

@ -27,7 +27,7 @@ $chapter-marker-size: 9px;
border-radius: $chapter-marker-size; border-radius: $chapter-marker-size;
margin-left: - math.div($chapter-marker-size, 2); margin-left: - math.div($chapter-marker-size, 2);
background-color: pvar(--bg); background-color: #fff;
cursor: pointer; cursor: pointer;
transition: transform 50ms ease-in-out, border-color 50ms ease-in-out; transition: transform 50ms ease-in-out, border-color 50ms ease-in-out;
border: 2px solid transparent; border: 2px solid transparent;
@ -77,7 +77,7 @@ $chapter-marker-size: 9px;
.vjs-theater-control, .vjs-theater-control,
.vjs-caption-toggle-control, .vjs-caption-toggle-control,
.vjs-settings { .vjs-settings {
color: pvar(--embed-foreground-color) !important; color: pvar(--embed-fg) !important;
opacity: $primary-foreground-opacity; opacity: $primary-foreground-opacity;
transition: opacity .1s; transition: opacity .1s;
@ -90,7 +90,7 @@ $chapter-marker-size: 9px;
.vjs-current-time, .vjs-current-time,
.vjs-duration, .vjs-duration,
.vjs-peertube { .vjs-peertube {
color: pvar(--embed-foreground-color); color: pvar(--embed-fg);
opacity: $primary-foreground-opacity; opacity: $primary-foreground-opacity;
} }
@ -111,7 +111,7 @@ $chapter-marker-size: 9px;
transition: none; transition: none;
.vjs-play-progress { .vjs-play-progress {
background: pvar(--embed-foreground-color); background: pvar(--embed-fg);
// Not display the circle if the progress is not hovered // Not display the circle if the progress is not hovered
&::before { &::before {

4
client/src/sass/player/peertube-skin.scss
View file

@ -18,7 +18,7 @@ body {
.video-js.vjs-peertube-skin { .video-js.vjs-peertube-skin {
font-size: $font-size; font-size: $font-size;
color: pvar(--embed-foreground-color); color: pvar(--embed-fg);
&.disabled { &.disabled {
cursor: default; cursor: default;
@ -101,7 +101,7 @@ body {
} }
.vjs-big-play-button { .vjs-big-play-button {
background-color: pvar(--embed-big-play-background-color); background-color: pvar(--embed-big-play-bg);
} }
.vjs-settings-dialog, .vjs-settings-dialog,

2
client/src/sass/player/settings-menu.scss
View file

@ -19,7 +19,7 @@ $setting-transition-easing: ease-out;
position: absolute; position: absolute;
right: .5em; right: .5em;
bottom: 4em; bottom: 4em;
color: pvar(--embed-foreground-color); color: pvar(--embed-fg);
opacity: $primary-foreground-opacity; opacity: $primary-foreground-opacity;
margin: 0 auto; margin: 0 auto;
font-size: $font-size !important; font-size: $font-size !important;

5
client/src/standalone/videos/embed.scss
View file

@ -1,5 +1,6 @@
@use '_variables' as *; @use '_variables' as *;
@use '_mixins' as *; @use '_mixins' as *;
@use '_css-variables' as *;
@use 'video.js/dist/video-js'; @use 'video.js/dist/video-js';
$assets-path: '../../assets/'; $assets-path: '../../assets/';
@ -11,10 +12,14 @@ $assets-path: '../../assets/';
} }
body { body {
@include define-css-variables();
& {
font-family: $main-fonts; font-family: $main-fonts;
font-weight: $font-regular; font-weight: $font-regular;
color: #000; color: #000;
} }
}
video { video {
width: 99%; width: 99%;