Propagate CSS variables to embed too

2025-10-03 09:49:20 +02:00 · 2025-01-28 09:14:58 +01:00 · 2025-01-28 09:14:58 +01:00 · 61ca8f8d6e
commit 61ca8f8d6e
parent 0320f5b5e4
8 changed files with 168 additions and 153 deletions
--- a/client/src/sass/include/_css-variables.scss
+++ b/client/src/sass/include/_css-variables.scss
@ -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)};
+  }
+}