From 7fae76132a7f190d154d71a52e0680ef46608ee1 Mon Sep 17 00:00:00 2001 From: DPN MW Date: Sun, 8 Mar 2026 21:30:29 -0400 Subject: [PATCH] PreLoader Custom Color Logo --- .../initializers/community-landing-admin-tabs.js | 3 ++- assets/stylesheets/community_landing/landing.css | 14 +++++++++----- config/locales/en.yml | 1 + config/settings.yml | 3 +++ lib/community_landing/page_builder.rb | 2 +- lib/community_landing/style_builder.rb | 3 +++ 6 files changed, 19 insertions(+), 7 deletions(-) diff --git a/assets/javascripts/discourse/initializers/community-landing-admin-tabs.js b/assets/javascripts/discourse/initializers/community-landing-admin-tabs.js index 724043c..261db5f 100644 --- a/assets/javascripts/discourse/initializers/community-landing-admin-tabs.js +++ b/assets/javascripts/discourse/initializers/community-landing-admin-tabs.js @@ -50,6 +50,7 @@ const DESCRIPTIONS = { preloader_bg_light: "Preloader background for light mode.", preloader_text_color_dark: "Percentage text color for dark mode.", preloader_text_color_light: "Percentage text color for light mode.", + preloader_logo_color: "Logo color. Works with single-color SVG logos on transparent background.", preloader_bar_color: "Progress bar color. Leave blank for accent color.", preloader_min_duration: "Minimum display time (ms). Prevents a flash on fast connections.", @@ -280,7 +281,7 @@ const TABS = [ "preloader_enabled", "preloader_logo_url", "preloader_bg_dark", "preloader_bg_light", "preloader_text_color_dark", "preloader_text_color_light", - "preloader_bar_color", "preloader_min_duration" + "preloader_logo_color", "preloader_bar_color", "preloader_min_duration" ]) }, { diff --git a/assets/stylesheets/community_landing/landing.css b/assets/stylesheets/community_landing/landing.css index 5a97224..656bb8d 100644 --- a/assets/stylesheets/community_landing/landing.css +++ b/assets/stylesheets/community_landing/landing.css @@ -2159,11 +2159,15 @@ html, .cl-body { } .cl-preloader__logo { - max-width: 120px; - max-height: 60px; - width: auto; - height: auto; - object-fit: contain; + width: 120px; + height: 60px; + background: var(--cl-preloader-logo-color, var(--cl-preloader-text, #ffffff)); + -webkit-mask-size: contain; + mask-size: contain; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; } .cl-preloader__counter { diff --git a/config/locales/en.yml b/config/locales/en.yml index 0d8859c..e1091db 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -44,6 +44,7 @@ en: preloader_bg_light: "Preloader background color for light mode." preloader_text_color_dark: "Percentage counter text color for dark mode." preloader_text_color_light: "Percentage counter text color for light mode." + preloader_logo_color: "Logo color override. Works with single-color SVG logos. Leave blank for white (dark mode) or inherits text color." preloader_bar_color: "Progress bar color. Leave blank to use the accent color." preloader_min_duration: "Minimum time (ms) the preloader is shown, even if loading finishes sooner. Prevents a flash on fast connections. Default: 800." diff --git a/config/settings.yml b/config/settings.yml index d12fa9f..868f3b7 100644 --- a/config/settings.yml +++ b/config/settings.yml @@ -143,6 +143,9 @@ plugins: preloader_text_color_light: default: "" type: color + preloader_logo_color: + default: "" + type: color preloader_bar_color: default: "" type: color diff --git a/lib/community_landing/page_builder.rb b/lib/community_landing/page_builder.rb index 5769a4b..854d824 100644 --- a/lib/community_landing/page_builder.rb +++ b/lib/community_landing/page_builder.rb @@ -158,7 +158,7 @@ module CommunityLanding html << "
\n" html << "
\n" if logo - html << " \"\"\n" + html << "
\n" end html << "
0%
\n" html << "
\n" diff --git a/lib/community_landing/style_builder.rb b/lib/community_landing/style_builder.rb index a85e04e..be534ac 100644 --- a/lib/community_landing/style_builder.rb +++ b/lib/community_landing/style_builder.rb @@ -72,6 +72,7 @@ module CommunityLanding preloader_text_dark = safe_hex(:preloader_text_color_dark) preloader_text_light = safe_hex(:preloader_text_color_light) preloader_bar = safe_hex(:preloader_bar_color) + preloader_logo = safe_hex(:preloader_logo_color) orb_color = safe_hex(:orb_color) orb_opacity = [[@s.orb_opacity.to_i, 0].max, 100].min rescue 50 @@ -112,6 +113,7 @@ module CommunityLanding dark_extras << "\n --cl-preloader-bg: #{preloader_bg_dark};" if preloader_bg_dark dark_extras << "\n --cl-preloader-text: #{preloader_text_dark};" if preloader_text_dark dark_extras << "\n --cl-preloader-bar: #{preloader_bar};" if preloader_bar + dark_extras << "\n --cl-preloader-logo-color: #{preloader_logo};" if preloader_logo light_extras = +"" light_extras << "\n --cl-navbar-signin-color: #{navbar_signin_light || navbar_signin_dark};" if navbar_signin_light || navbar_signin_dark @@ -128,6 +130,7 @@ module CommunityLanding light_extras << "\n --cl-preloader-bg: #{preloader_bg_light || preloader_bg_dark};" if preloader_bg_light || preloader_bg_dark light_extras << "\n --cl-preloader-text: #{preloader_text_light || preloader_text_dark};" if preloader_text_light || preloader_text_dark light_extras << "\n --cl-preloader-bar: #{preloader_bar};" if preloader_bar + light_extras << "\n --cl-preloader-logo-color: #{preloader_logo};" if preloader_logo "