Skip to content

Improve Mermaid loading styles #1102

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
David Pine (IEvangelist) merged 2 commits into from
May 28, 2026
Merged

Improve Mermaid loading styles #1102

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a6c44bd
Improve Mermaid loading styles
IEvangelist May 27, 2026
03fa5e2
Refine Mermaid loading skeleton
IEvangelist May 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
144 changes: 142 additions & 2 deletions src/frontend/src/styles/site.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -334,8 +334,148 @@ pre[data-language='console'] > code {
line-height: initial;
}

pre.mermaid[data-processed='true'] {
border: 1px solid var(--sl-color-gray-5);
:root .sl-markdown-content pre.mermaid {
--aspire-mermaid-radius: 0.875rem;
--aspire-mermaid-loading-min-height: 200px;
--aspire-mermaid-surface: color-mix(in srgb, var(--sl-color-bg) 96%, var(--sl-color-accent-low));
--aspire-mermaid-surface-strong: color-mix(
in srgb,
var(--sl-color-bg) 92%,
var(--sl-color-accent-low) 8%
);
--aspire-mermaid-border: color-mix(in srgb, var(--sl-color-accent) 16%, var(--sl-color-gray-5));
--aspire-mermaid-glow: color-mix(in srgb, var(--sl-color-accent) 8%, transparent);
--aspire-mermaid-glow-secondary: color-mix(in srgb, var(--sl-color-accent-high) 7%, transparent);
--aspire-mermaid-line: color-mix(in srgb, var(--sl-color-accent-high) 22%, transparent);
--aspire-mermaid-node: color-mix(in srgb, var(--sl-color-accent) 8%, var(--sl-color-gray-6));
--aspire-mermaid-loading-text: var(--sl-color-accent-high);
--aspire-mermaid-skeleton-muted: color-mix(in srgb, var(--sl-color-accent-high) 22%, transparent);
--aspire-mermaid-skeleton-strong: color-mix(in srgb, var(--sl-color-accent) 28%, transparent);
--aspire-mermaid-skeleton-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 180'%3E%3Cg fill='none' stroke='white' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M150 72H250M390 72H490M320 102V126M260 126H210M380 126H430'/%3E%3C/g%3E%3Cg fill='white'%3E%3Crect x='20' y='42' width='130' height='60' rx='16'/%3E%3Crect x='255' y='42' width='130' height='60' rx='16'/%3E%3Crect x='490' y='42' width='130' height='60' rx='16'/%3E%3Crect x='160' y='120' width='130' height='48' rx='14'/%3E%3Crect x='350' y='120' width='130' height='48' rx='14'/%3E%3Ccircle cx='320' cy='72' r='14'/%3E%3C/g%3E%3C/svg%3E");
--aspire-mermaid-background:
radial-gradient(ellipse at 18% 16%, var(--aspire-mermaid-glow), transparent 46%),
radial-gradient(ellipse at 82% 74%, var(--aspire-mermaid-glow-secondary), transparent 48%),
linear-gradient(135deg, var(--aspire-mermaid-surface), var(--aspire-mermaid-surface-strong));

border: 1px solid var(--aspire-mermaid-border);
border-radius: var(--aspire-mermaid-radius);
background: var(--aspire-mermaid-background);
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sl-color-white) 5%, transparent);
overflow: auto;
position: relative;
isolation: isolate;
}

:root[data-theme='light'] .sl-markdown-content pre.mermaid {
--aspire-mermaid-surface: color-mix(in srgb, var(--sl-color-bg) 97%, var(--sl-color-accent-low));
--aspire-mermaid-surface-strong: color-mix(
in srgb,
var(--sl-color-bg) 94%,
var(--sl-color-accent-low) 6%
);
--aspire-mermaid-border: color-mix(in srgb, var(--sl-color-accent) 14%, var(--sl-color-gray-5));
--aspire-mermaid-glow: color-mix(in srgb, var(--sl-color-accent) 7%, transparent);
--aspire-mermaid-glow-secondary: color-mix(in srgb, var(--sl-color-accent-high) 5%, transparent);
--aspire-mermaid-line: color-mix(in srgb, var(--sl-color-accent-high) 16%, transparent);
--aspire-mermaid-node: color-mix(in srgb, var(--sl-color-accent-low) 24%, var(--sl-color-bg));
--aspire-mermaid-skeleton-muted: color-mix(in srgb, var(--sl-color-accent) 16%, transparent);
--aspire-mermaid-skeleton-strong: color-mix(
in srgb,
var(--sl-color-accent-high) 18%,
transparent
);
}

:root .sl-markdown-content pre.mermaid:not([data-processed]) {
color: transparent;
font-size: 0;
line-height: 0;
min-height: var(--aspire-mermaid-loading-min-height);
user-select: none;
overflow: hidden;
background: var(--aspire-mermaid-background);
}

:root .sl-markdown-content pre.mermaid:not([data-processed])::before {
content: '';
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
width: min(38rem, calc(100% - 3rem));
height: min(10rem, calc(100% - 4.5rem));
background: linear-gradient(
100deg,
var(--aspire-mermaid-skeleton-muted) 0%,
var(--aspire-mermaid-skeleton-strong) 45%,
var(--aspire-mermaid-skeleton-muted) 90%
)
0 0 / 220% 100%;
opacity: 0.95;
transform: translate(-50%, -58%);
-webkit-mask: var(--aspire-mermaid-skeleton-mask) center / contain no-repeat;
mask: var(--aspire-mermaid-skeleton-mask) center / contain no-repeat;
animation: aspire-mermaid-skeleton-sheen 1.8s ease-in-out infinite;
}

:root .sl-markdown-content pre.mermaid:not([data-processed])::after {
content: 'Rendering diagram';
position: absolute;
inset-block-end: 1rem;
inset-inline-start: 50%;
transform: translateX(-50%);
padding: 0.45rem 0.8rem;
border: 1px solid color-mix(in srgb, var(--sl-color-accent) 30%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--sl-color-bg) 84%, var(--sl-color-accent-low));
color: var(--aspire-mermaid-loading-text);
font-family: var(--font-heading);
font-size: var(--sl-text-sm);
font-weight: 600;
line-height: 1;
letter-spacing: 0.01em;
box-shadow: var(--sl-shadow-sm);
}

:root .sl-markdown-content pre.mermaid[data-processed='true'] {
min-height: auto;
animation: none;
background: var(--aspire-mermaid-background);
color: var(--sl-color-text);
box-shadow: none;
}

:root .sl-markdown-content .inheritance-diagram pre.mermaid {
margin: 0;
border: 0;
background: transparent;
box-shadow: none;
Comment thread
IEvangelist marked this conversation as resolved.
Outdated
}

@keyframes aspire-mermaid-skeleton-sheen {
from {
background-position: 160% 0;
}
to {
background-position: -60% 0;
}
}

@media (max-width: 40rem) {
:root .sl-markdown-content pre.mermaid {
--aspire-mermaid-loading-min-height: 10rem;
}

:root .sl-markdown-content pre.mermaid:not([data-processed])::after {
inset-inline: 1rem;
transform: none;
text-align: center;
}
}

@media (prefers-reduced-motion: reduce) {
:root .sl-markdown-content pre.mermaid:not([data-processed])::before {
animation: none;
}
}

.sl-markdown-content code {
Expand Down
Loading