body.airjournal-article { /* Keep native document scrolling, but do not let touch gestures pull the viewport beyond the real beginning or end of an article. */ overscroll-behavior-y: none; } /* Mermaid appends an empty, absolutely positioned tooltip to . Its padding and border otherwise create real scrollable space after the footer. */ .mermaidTooltip:empty { display: none !important; } .article-mermaid { position: relative; width: 100%; max-width: 100%; margin: 28px 0; padding: 22px; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 16px; background: #ffffff; box-shadow: 0 12px 34px rgba(15, 23, 42, 0.07); } .article-mermaid-stage { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; color: #64748b; text-align: center; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; -webkit-overflow-scrolling: touch; } .article-mermaid:not(.is-loading):not(.is-error) .article-mermaid-stage { cursor: zoom-in; } .article-mermaid:not(.is-loading):not(.is-error) .article-mermaid-stage:focus-visible { border-radius: 10px; outline: none; box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.5); } .article-mermaid-stage svg { display: block; width: auto; min-width: min-content; height: auto; margin: 0 auto; } .article-mermaid.is-loading .article-mermaid-stage { min-height: 120px; display: flex; align-items: center; justify-content: center; } .article-mermaid.is-error { border-color: #fecaca; background: #fff7f7; } .article-mermaid.is-error .article-mermaid-stage { margin-bottom: 12px; color: #b91c1c; } .article-mermaid.is-error pre { margin: 0 !important; text-align: left; } :root[data-blog-theme="dark"] .article-mermaid { border-color: rgba(148, 163, 184, 0.18); background: #2c333e; box-shadow: 0 14px 38px rgba(14, 18, 24, 0.24); } :root[data-blog-theme="dark"] .article-mermaid-stage { color: #94a3b8; scrollbar-color: #475569 transparent; } body.article-mermaid-viewer-open { overflow: hidden !important; } .article-mermaid-viewer[hidden] { display: none !important; } .article-mermaid-viewer { position: fixed; inset: 0; z-index: 2147483200; display: block; overflow: hidden; color: #e2e8f0; background: rgba(15, 23, 42, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .article-mermaid-viewer-title, .article-mermaid-viewer-description { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .article-mermaid-viewer-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; color: #e2e8f0; background: transparent; cursor: pointer; transition: color 160ms ease, background-color 160ms ease, transform 160ms ease; } .article-mermaid-viewer-button:focus-visible { color: #eff6ff; background: rgba(59, 130, 246, 0.34); outline: 2px solid rgba(147, 197, 253, 0.72); outline-offset: 1px; } @media (hover: hover) and (pointer: fine) { .article-mermaid-viewer-button:active { transform: scale(0.95); } } .article-mermaid-viewer-close { position: absolute; top: 26px; right: 26px; z-index: 3; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.26); border-radius: 50%; color: #f8fafc; background: rgba(15, 23, 42, 0.88); box-shadow: 0 10px 26px rgba(2, 6, 23, 0.34); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .article-mermaid-viewer-close:focus-visible { color: #f8fafc; background: rgba(15, 23, 42, 0.88); outline: 2px solid rgba(255, 255, 255, 0.82); outline-offset: 2px; box-shadow: 0 10px 26px rgba(2, 6, 23, 0.34); } .article-mermaid-viewer-viewport { position: absolute; top: 18px; right: 18px; bottom: 18px; left: 18px; overflow: hidden; border: 1px solid rgba(226, 232, 240, 0.2); border-radius: 16px; background: #f8fafc; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; } .article-mermaid-viewer-viewport.is-dragging { cursor: grabbing; } .article-mermaid-viewer-canvas { position: absolute; top: 50%; left: 50%; transform-origin: center center; will-change: transform; } .article-mermaid-viewer-canvas svg { display: block; max-width: none !important; overflow: visible; pointer-events: none; } :root[data-blog-theme="dark"] .article-mermaid-viewer { background: rgba(24, 30, 38, 0.96); } :root[data-blog-theme="dark"] .article-mermaid-viewer-viewport { border-color: rgba(148, 163, 184, 0.2); background: #2c333e; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } :root[data-blog-theme="dark"] .article-mermaid.is-error { border-color: #7f1d1d; background: #24191f; } :root[data-blog-theme="dark"] .article-mermaid.is-error .article-mermaid-stage { color: #fca5a5; } @media (max-width: 768px) { .article-mermaid { margin: 22px 0; padding: 14px 10px; border-radius: 12px; } .article-mermaid-stage { text-align: left; } .article-mermaid-stage svg { margin: 0; } .article-mermaid-viewer-close { top: 16px; right: 16px; width: 44px; height: 44px; } .article-mermaid-viewer-viewport { top: 8px; right: 8px; bottom: 8px; left: 8px; border-radius: 12px; } } @media (prefers-reduced-motion: reduce) { .article-mermaid, .article-mermaid *, .article-mermaid-viewer, .article-mermaid-viewer * { scroll-behavior: auto !important; animation: none !important; transition: none !important; } } @media (prefers-reduced-transparency: reduce) { .article-mermaid-viewer { background: #0f172a; backdrop-filter: none; -webkit-backdrop-filter: none; } .article-mermaid-viewer-close { background: #1e293b; } :root[data-blog-theme="dark"] .article-mermaid-viewer-viewport { background: #2c333e; } }