diff --git a/assets/javascripts/discourse/initializers/community-landing-admin-tabs.js b/assets/javascripts/discourse/initializers/community-landing-admin-tabs.js index 261db5f..8be59f8 100644 --- a/assets/javascripts/discourse/initializers/community-landing-admin-tabs.js +++ b/assets/javascripts/discourse/initializers/community-landing-admin-tabs.js @@ -18,8 +18,8 @@ const DESCRIPTIONS = { json_ld_enabled: "Add JSON-LD structured data (Organization + WebSite schema) for search engines.", // ── Branding: Logo ── - logo_dark_url: "Logo image URL for dark mode. Shown in navbar and footer. Leave blank to show site name as text.", - logo_light_url: "Logo image URL for light mode. If not set, the dark logo is used for both themes.", + logo_dark_url: "Logo image URL for dark mode. Shown in navbar and footer. Leave blank to use the Discourse site logo.", + logo_light_url: "Logo image URL for light mode. Leave blank to use the dark logo for both themes.", logo_height: "Logo height in pixels (16–80). Applies to both navbar and footer logos.", logo_use_accent_color: "Tint the logo to match the accent color. Works best with monochrome SVG or PNG logos.", footer_logo_url: "Override logo for the footer only. If not set, the navbar logo is reused.", @@ -45,12 +45,12 @@ const DESCRIPTIONS = { // ── Preloader ── preloader_enabled: "Show a loading overlay with logo and progress counter while the page loads.", - preloader_logo_url: "Custom logo for the preloader. Leave blank to use the site logo.", + preloader_logo_dark_url: "Logo image for the preloader in dark mode. Leave blank to use the site logo.", + preloader_logo_light_url: "Logo image for the preloader in light mode. Leave blank to use the dark preloader logo.", preloader_bg_dark: "Preloader background for dark mode.", 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.", @@ -278,10 +278,10 @@ const TABS = [ "scroll_animation", "staggered_reveal_enabled", "dynamic_background_enabled", "mouse_parallax_enabled", "scroll_progress_enabled", "google_font_name", "title_font_name", "icon_library", - "preloader_enabled", "preloader_logo_url", + "preloader_enabled", "preloader_logo_dark_url", "preloader_logo_light_url", "preloader_bg_dark", "preloader_bg_light", "preloader_text_color_dark", "preloader_text_color_light", - "preloader_logo_color", "preloader_bar_color", "preloader_min_duration" + "preloader_bar_color", "preloader_min_duration" ]) }, { @@ -449,7 +449,8 @@ const IMAGE_UPLOAD_SETTINGS = { android_app_badge_image_url: { label: "Upload Badge", multi: false }, app_cta_image_url: { label: "Upload Image", multi: false }, splits_background_image_url: { label: "Upload Image", multi: false }, - preloader_logo_url: { label: "Upload Logo", multi: false }, + preloader_logo_dark_url: { label: "Upload Logo (Dark)", multi: false }, + preloader_logo_light_url: { label: "Upload Logo (Light)", multi: false }, }; let currentTab = "settings"; diff --git a/assets/stylesheets/community_landing/landing.css b/assets/stylesheets/community_landing/landing.css index 656bb8d..584b9e4 100644 --- a/assets/stylesheets/community_landing/landing.css +++ b/assets/stylesheets/community_landing/landing.css @@ -2159,15 +2159,21 @@ html, .cl-body { } .cl-preloader__logo { - 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; + max-width: 120px; + max-height: 60px; + object-fit: contain; +} + +/* Dark/light logo visibility */ +.cl-preloader__logo--light { display: none; } +.cl-preloader__logo--dark { display: block; } + +[data-theme="light"] .cl-preloader__logo--dark { display: none; } +[data-theme="light"] .cl-preloader__logo--light { display: block; } + +@media (prefers-color-scheme: light) { + :root:not([data-theme="dark"]) .cl-preloader__logo--dark { display: none; } + :root:not([data-theme="dark"]) .cl-preloader__logo--light { display: block; } } .cl-preloader__counter { diff --git a/config/locales/en.yml b/config/locales/en.yml index e1091db..06e009d 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -16,8 +16,8 @@ en: json_ld_enabled: "Add JSON-LD structured data (Organization + WebSite schema) for search engines." # ── Branding: Logo ── - logo_dark_url: "━━ BRANDING ━━ — Logo image URL for dark mode. Displayed in the navbar and footer. Leave blank to show the site name as text." - logo_light_url: "Logo image URL for light mode. If not set, the dark logo is used for both themes." + logo_dark_url: "━━ BRANDING ━━ — Logo image URL for dark mode. Displayed in the navbar and footer. Leave blank to use the Discourse site logo, or show the site name as text if no site logo is set." + logo_light_url: "Logo image URL for light mode. Leave blank to use the dark logo for both themes." logo_height: "Logo height in pixels (16–80). Applies to both the navbar and footer logos." logo_use_accent_color: "Tint the logo to match the accent color. Works best with monochrome SVG or PNG logos." footer_logo_url: "Override logo specifically for the footer. If not set, the navbar logo is reused." @@ -39,12 +39,12 @@ en: # ── Preloader ── preloader_enabled: "━━ PRELOADER ━━ — Show a full-screen loading overlay with logo and progress counter while the page loads." - preloader_logo_url: "Custom logo image for the preloader. Leave blank to use the site logo." + preloader_logo_dark_url: "Logo image for the preloader in dark mode. Leave blank to use the site logo." + preloader_logo_light_url: "Logo image for the preloader in light mode. Leave blank to use the dark mode preloader logo." preloader_bg_dark: "Preloader background color for dark mode. Leave blank for default (matches site background)." 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 868f3b7..f8154eb 100644 --- a/config/settings.yml +++ b/config/settings.yml @@ -128,7 +128,10 @@ plugins: preloader_enabled: default: false type: bool - preloader_logo_url: + preloader_logo_dark_url: + default: "" + type: string + preloader_logo_light_url: default: "" type: string preloader_bg_dark: @@ -143,9 +146,6 @@ 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 854d824..4f27953 100644 --- a/lib/community_landing/page_builder.rb +++ b/lib/community_landing/page_builder.rb @@ -151,14 +151,17 @@ module CommunityLanding # ── PRELOADER ── def render_preloader - logo = (@s.preloader_logo_url.presence rescue nil) || logo_dark_url + logo_dark = (@s.preloader_logo_dark_url.presence rescue nil) || logo_dark_url + logo_light = (@s.preloader_logo_light_url.presence rescue nil) || logo_dark + min_ms = (@s.preloader_min_duration rescue 800).to_i.clamp(0, 5000) html = +"" html << "
\n" html << "
\n" - if logo - html << "
\n" + if logo_dark + 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 be534ac..a85e04e 100644 --- a/lib/community_landing/style_builder.rb +++ b/lib/community_landing/style_builder.rb @@ -72,7 +72,6 @@ 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 @@ -113,7 +112,6 @@ 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 @@ -130,7 +128,6 @@ 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 "