removing author and cleaning js / css
This commit is contained in:
76
assets/styles/components/mermaid.css
Normal file
76
assets/styles/components/mermaid.css
Normal file
@@ -0,0 +1,76 @@
|
||||
/* Mermaid container for zooming and panning */
|
||||
.mermaid-container {
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
min-height: 26rem;
|
||||
max-height: 800px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: color-mix(in oklab, var(--surface) 88%, var(--bg) 12%);
|
||||
position: relative;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
/* Make SVG scale properly */
|
||||
.mermaid-container .mermaid svg {
|
||||
transform-origin: top left; /* needed for scaling */
|
||||
transition: transform 0.2s ease; /* smooth zoom */
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.mermaid-container--site-map {
|
||||
width: min(96vw, 1400px);
|
||||
height: min(82vh, 980px);
|
||||
max-height: none;
|
||||
margin-left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.mermaid-container--site-map .mermaid {
|
||||
display: inline-block;
|
||||
min-width: max-content;
|
||||
padding: 3rem 2rem 2rem;
|
||||
}
|
||||
|
||||
.mermaid-container--site-map .mermaid svg {
|
||||
width: auto;
|
||||
max-width: none;
|
||||
min-width: 1100px;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.mermaid-container--site-map {
|
||||
width: 100%;
|
||||
height: 78vh;
|
||||
margin-left: 0;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.mermaid-container--site-map .mermaid svg {
|
||||
min-width: 900px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Zoom buttons */
|
||||
.mermaid-zoom-controls {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.mermaid-zoom-controls button {
|
||||
padding: 5px 10px;
|
||||
margin-left: 5px;
|
||||
background: var(--surface);
|
||||
color: var(--fg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mermaid-zoom-controls button:hover {
|
||||
background: var(--accent);
|
||||
color: var(--surface);
|
||||
}
|
||||
Reference in New Issue
Block a user