mirror of
https://github.com/Chocobozzz/PeerTube.git
synced 2025-10-03 17:59:37 +02:00
Propagate CSS variables to embed too
This commit is contained in:
Chocobozzz
parent
0320f5b5e4
commit
61ca8f8d6e
8 changed files with 168 additions and 153 deletions
|
|
@ -10,6 +10,7 @@
|
|||
@use './primeng-custom';
|
||||
@use './z-index';
|
||||
@use './class-helpers/index.scss';
|
||||
@use '_css-variables' as *;
|
||||
|
||||
@mixin main-col-expanded {
|
||||
--main-col-width: 100vw;
|
||||
|
|
@ -25,145 +26,7 @@ input[type="search"]::-webkit-search-results-button,
|
|||
input[type="search"]::-webkit-search-results-decoration { display: none; }
|
||||
|
||||
body {
|
||||
// ---------------------------------------------------------------------------
|
||||
// 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)};
|
||||
}
|
||||
@include define-css-variables();
|
||||
|
||||
& {
|
||||
font-family: $main-fonts;
|
||||
|
|
|
|||
147
client/src/sass/include/_css-variables.scss
Normal file
147
client/src/sass/include/_css-variables.scss
Normal 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)};
|
||||
}
|
||||
}
|
||||
|
|
@ -83,9 +83,6 @@ $primeng-breakpoint: 960px;
|
|||
// ---------------------------------------------------------------------------
|
||||
|
||||
$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),
|
||||
--main-col-width: var(--main-col-width),
|
||||
--header-height: var(--header-height),
|
||||
|
|
@ -209,6 +206,9 @@ $variables: (
|
|||
--alert-primary-border-color: var(--alert-primary-border-color),
|
||||
|
||||
--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
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ $context-menu-width: 350px;
|
|||
|
||||
.vjs-menu-content {
|
||||
opacity: $primary-foreground-opacity;
|
||||
color: pvar(--embed-foreground-color);
|
||||
color: pvar(--embed-fg);
|
||||
font-size: $font-size !important;
|
||||
font-weight: $font-semibold;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ $chapter-marker-size: 9px;
|
|||
border-radius: $chapter-marker-size;
|
||||
margin-left: - math.div($chapter-marker-size, 2);
|
||||
|
||||
background-color: pvar(--bg);
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
transition: transform 50ms ease-in-out, border-color 50ms ease-in-out;
|
||||
border: 2px solid transparent;
|
||||
|
|
@ -77,7 +77,7 @@ $chapter-marker-size: 9px;
|
|||
.vjs-theater-control,
|
||||
.vjs-caption-toggle-control,
|
||||
.vjs-settings {
|
||||
color: pvar(--embed-foreground-color) !important;
|
||||
color: pvar(--embed-fg) !important;
|
||||
|
||||
opacity: $primary-foreground-opacity;
|
||||
transition: opacity .1s;
|
||||
|
|
@ -90,7 +90,7 @@ $chapter-marker-size: 9px;
|
|||
.vjs-current-time,
|
||||
.vjs-duration,
|
||||
.vjs-peertube {
|
||||
color: pvar(--embed-foreground-color);
|
||||
color: pvar(--embed-fg);
|
||||
opacity: $primary-foreground-opacity;
|
||||
}
|
||||
|
||||
|
|
@ -111,7 +111,7 @@ $chapter-marker-size: 9px;
|
|||
transition: none;
|
||||
|
||||
.vjs-play-progress {
|
||||
background: pvar(--embed-foreground-color);
|
||||
background: pvar(--embed-fg);
|
||||
|
||||
// Not display the circle if the progress is not hovered
|
||||
&::before {
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ body {
|
|||
|
||||
.video-js.vjs-peertube-skin {
|
||||
font-size: $font-size;
|
||||
color: pvar(--embed-foreground-color);
|
||||
color: pvar(--embed-fg);
|
||||
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
|
|
@ -101,7 +101,7 @@ body {
|
|||
}
|
||||
|
||||
.vjs-big-play-button {
|
||||
background-color: pvar(--embed-big-play-background-color);
|
||||
background-color: pvar(--embed-big-play-bg);
|
||||
}
|
||||
|
||||
.vjs-settings-dialog,
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ $setting-transition-easing: ease-out;
|
|||
position: absolute;
|
||||
right: .5em;
|
||||
bottom: 4em;
|
||||
color: pvar(--embed-foreground-color);
|
||||
color: pvar(--embed-fg);
|
||||
opacity: $primary-foreground-opacity;
|
||||
margin: 0 auto;
|
||||
font-size: $font-size !important;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@use '_variables' as *;
|
||||
@use '_mixins' as *;
|
||||
@use '_css-variables' as *;
|
||||
@use 'video.js/dist/video-js';
|
||||
|
||||
$assets-path: '../../assets/';
|
||||
|
|
@ -11,9 +12,13 @@ $assets-path: '../../assets/';
|
|||
}
|
||||
|
||||
body {
|
||||
@include define-css-variables();
|
||||
|
||||
& {
|
||||
font-family: $main-fonts;
|
||||
font-weight: $font-regular;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
video {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue