mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-05-01 11:47:16 +08:00
8b018c2ed7
Custom animated splash screens were sitting a bit too low in the PWA vs web version, switching to DVH units and adding a minor offset fixes this. Before/After <img width="330" alt="Screenshot 2026-04-06 at 11 27 21" src="https://github.com/user-attachments/assets/22d025b8-17fe-4147-b9dc-af534be9a7f3" /><img width="330" alt="Screenshot 2026-04-06 at 11 26 48" src="https://github.com/user-attachments/assets/5c77c028-71de-4bca-aaa6-bcb2414b1b72" /> Web/PWA (after) <img width="330" alt="This is my community name - This is my community title" src="https://github.com/user-attachments/assets/b3fa467e-525f-4813-ab16-6d8d99992922" /><img width="330" alt="Screenshot 2026-04-06 at 11 26 48" src="https://github.com/user-attachments/assets/5c77c028-71de-4bca-aaa6-bcb2414b1b72" />
286 lines
8.5 KiB
Text
286 lines
8.5 KiB
Text
<section id="d-splash">
|
|
<style>
|
|
html {
|
|
<%- if custom_splash_screen_enabled? %>
|
|
overflow: hidden !important;
|
|
<%- else %>
|
|
overflow-y: hidden !important;
|
|
<%- end %>
|
|
}
|
|
|
|
/* user picked a theme where the "regular" scheme is dark */
|
|
<%- if dark_color_scheme? %>
|
|
html {
|
|
background-color: #<%= light_color_hex_for_name("secondary") %>;
|
|
}
|
|
|
|
#d-splash {
|
|
--dot-color: #<%= light_color_hex_for_name("tertiary") %>;
|
|
<%- if custom_splash_screen_enabled? %>
|
|
<%- if splash_screen_image_animated? %>
|
|
--primary: #<%= light_color_hex_for_name("primary") %>;
|
|
--secondary: #<%= light_color_hex_for_name("secondary") %>;
|
|
--tertiary: #<%= light_color_hex_for_name("tertiary") %>;
|
|
<%- else %>
|
|
--splash-bg: url("<%= splash_screen_image_data_uri %>");
|
|
<%- end %>
|
|
<%- end %>
|
|
}
|
|
<%- elsif forced_light_mode? %>
|
|
html {
|
|
background-color: #<%= light_color_hex_for_name("secondary") %>;
|
|
}
|
|
|
|
#d-splash {
|
|
--dot-color: #<%= light_color_hex_for_name("tertiary") %>;
|
|
<%- if custom_splash_screen_enabled? %>
|
|
<%- if splash_screen_image_animated? %>
|
|
--primary: #<%= light_color_hex_for_name("primary") %>;
|
|
--secondary: #<%= light_color_hex_for_name("secondary") %>;
|
|
--tertiary: #<%= light_color_hex_for_name("tertiary") %>;
|
|
<%- else %>
|
|
--splash-bg: url("<%= splash_screen_image_data_uri %>");
|
|
<%- end %>
|
|
<%- end %>
|
|
}
|
|
<%- elsif forced_dark_mode? %>
|
|
html {
|
|
background-color: #<%= dark_color_hex_for_name("secondary") %>;
|
|
}
|
|
|
|
#d-splash {
|
|
--dot-color: #<%= dark_color_hex_for_name("tertiary") %>;
|
|
<%- if custom_splash_screen_enabled? %>
|
|
<%- if splash_screen_image_animated? %>
|
|
--primary: #<%= dark_color_hex_for_name("primary") %>;
|
|
--secondary: #<%= dark_color_hex_for_name("secondary") %>;
|
|
--tertiary: #<%= dark_color_hex_for_name("tertiary") %>;
|
|
<%- else %>
|
|
--splash-bg: url("<%= splash_screen_image_data_uri(dark: true) %>");
|
|
<%- end %>
|
|
<%- end %>
|
|
}
|
|
<%- else %>
|
|
/* user picked a theme a light scheme and also enabled a dark scheme */
|
|
|
|
/* deal with light scheme first */
|
|
@media (prefers-color-scheme: light) {
|
|
html {
|
|
background-color: #<%= light_color_hex_for_name("secondary") %>;
|
|
}
|
|
|
|
#d-splash {
|
|
--dot-color: #<%= light_color_hex_for_name("tertiary") %>;
|
|
<%- if custom_splash_screen_enabled? %>
|
|
<%- if splash_screen_image_animated? %>
|
|
--primary: #<%= light_color_hex_for_name("primary") %>;
|
|
--secondary: #<%= light_color_hex_for_name("secondary") %>;
|
|
--tertiary: #<%= light_color_hex_for_name("tertiary") %>;
|
|
<%- else %>
|
|
--splash-bg: url("<%= splash_screen_image_data_uri %>");
|
|
<%- end %>
|
|
<%- end %>
|
|
}
|
|
}
|
|
|
|
/* then deal with dark scheme */
|
|
@media (prefers-color-scheme: dark) {
|
|
html {
|
|
background-color: #<%= dark_color_hex_for_name("secondary") %>;
|
|
}
|
|
|
|
#d-splash {
|
|
--dot-color: #<%= dark_color_hex_for_name("tertiary") %>;
|
|
<%- if custom_splash_screen_enabled? %>
|
|
<%- if splash_screen_image_animated? %>
|
|
--primary: #<%= dark_color_hex_for_name("primary") %>;
|
|
--secondary: #<%= dark_color_hex_for_name("secondary") %>;
|
|
--tertiary: #<%= dark_color_hex_for_name("tertiary") %>;
|
|
<%- else %>
|
|
--splash-bg: url("<%= splash_screen_image_data_uri(dark: true) %>");
|
|
<%- end %>
|
|
<%- end %>
|
|
}
|
|
}
|
|
<%- end %>
|
|
|
|
#d-splash {
|
|
display: grid;
|
|
place-items: center;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100vw;
|
|
height: 100dvh;
|
|
z-index: 1001;
|
|
}
|
|
|
|
#d-splash .preloader-image {
|
|
--splash-dot-size: max(1vw, 25px);
|
|
--splash-dot-spacing: calc(var(--splash-dot-size) * 1.5);
|
|
<%- if custom_splash_screen_enabled? %>
|
|
width: 700px;
|
|
@media (width < 700px) {
|
|
width: 320px;
|
|
}
|
|
@media (width < 325px) {
|
|
width: 300px;
|
|
}
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1.5rem;
|
|
<%- unless splash_screen_image_animated? %>
|
|
margin-top: -10vh;
|
|
<%- end %>
|
|
@media (display-mode: standalone) {
|
|
transform: translateY(-5dvh);
|
|
}
|
|
<%- else %>
|
|
width: calc((var(--splash-dot-size) + var(--splash-dot-spacing)) * 5);
|
|
<%- end %>
|
|
height: 100dvh;
|
|
background-size: cover;
|
|
}
|
|
|
|
@keyframes d-splash-fade-in {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
<%- if custom_splash_screen_enabled? %>
|
|
#d-splash .dots-container {
|
|
position: relative;
|
|
width: calc((var(--splash-dot-size) + var(--splash-dot-spacing)) * 5);
|
|
height: var(--splash-dot-size);
|
|
}
|
|
<%- end %>
|
|
|
|
.dots {
|
|
animation-name: d-splash-loader;
|
|
animation-timing-function: ease-in-out;
|
|
animation-duration: 3s;
|
|
animation-iteration-count: infinite;
|
|
animation-delay: calc(var(--n) * 0.15s);
|
|
|
|
position: absolute;
|
|
<%- if custom_splash_screen_enabled? %>
|
|
top: 0;
|
|
<%- else %>
|
|
top: calc(50% - var(--splash-dot-size) / 2);
|
|
<%- end %>
|
|
left: calc((50% - var(--splash-dot-size) / 2) + (var(--n) * var(--splash-dot-spacing)));
|
|
transform-origin: calc((var(--splash-dot-spacing) * var(--n) * -1) + var(--splash-dot-size)/2) center;
|
|
|
|
width: var(--splash-dot-size);
|
|
height: var(--splash-dot-size);
|
|
border-radius: 50%;
|
|
|
|
background-color: var(--dot-color);
|
|
filter: saturate(2) opacity(0.85);
|
|
opacity: 0;
|
|
}
|
|
|
|
@keyframes d-splash-loader {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(1);
|
|
}
|
|
45% {
|
|
opacity: 1;
|
|
transform: scale(0.7);
|
|
}
|
|
65% {
|
|
opacity: 1;
|
|
transform: scale(0.7);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
<%- if custom_splash_screen_enabled? %>
|
|
#d-splash .preloader-image {
|
|
--splash-dot-size: max(0.7vw, 14px);
|
|
}
|
|
#d-splash .splash-logo-container {
|
|
width: min(250px, 60vw);
|
|
height: min(150px, 25vh);
|
|
<%- if splash_screen_image_animated? %>
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
<%- else %>
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-image: var(--splash-bg);
|
|
opacity: 0.4;
|
|
animation: d-splash-logo-pulse 3s ease-in-out infinite;
|
|
<%- end %>
|
|
}
|
|
|
|
<%- if splash_screen_image_animated? %>
|
|
#d-splash .splash-logo-container svg {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
<%- end %>
|
|
|
|
@keyframes d-splash-logo-pulse {
|
|
0%, 100% {
|
|
opacity: 0.4;
|
|
}
|
|
25%, 65% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
<%- end %>
|
|
</style>
|
|
|
|
<div class="preloader-image" elementtiming="discourse-splash-visible">
|
|
<%- if custom_splash_screen_enabled? %>
|
|
<%- if splash_screen_image_animated? %>
|
|
<div class="splash-logo-container"><%= splash_screen_inline_svg %></div>
|
|
<%- else %>
|
|
<div class="splash-logo-container"></div>
|
|
<div class="dots-container">
|
|
<div class="dots" style="--n:-2;"></div>
|
|
<div class="dots" style="--n:-1;"></div>
|
|
<div class="dots" style="--n:0;"></div>
|
|
<div class="dots" style="--n:1;"></div>
|
|
<div class="dots" style="--n:2;"></div>
|
|
</div>
|
|
<%- end %>
|
|
<%- else %>
|
|
<div class="dots" style="--n:-2;"></div>
|
|
<div class="dots" style="--n:-1;"></div>
|
|
<div class="dots" style="--n:0;"></div>
|
|
<div class="dots" style="--n:1;"></div>
|
|
<div class="dots" style="--n:2;"></div>
|
|
<%- end %>
|
|
</div>
|
|
<script nonce="<%= csp_nonce_placeholder %>">
|
|
const svg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><!-- LCP candidate image ${".".repeat(5000)} --></svg>`;
|
|
document.querySelector("#d-splash .preloader-image").style.backgroundImage = `url('data:image/svg+xml,${svg}')`
|
|
</script>
|
|
|
|
<noscript>
|
|
<style>
|
|
html {
|
|
overflow-y: revert !important;
|
|
}
|
|
|
|
#d-splash {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</noscript>
|
|
</section>
|
