Mermaid-Export-Fit-Plugin/styles.css at main · fyaic/Mermaid-Export-Fit-Plugin · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
/* ============================================
   Mermaid Export Fit - core styles
   Version: 1.0.2
   Notes:
   - !important is required because Mermaid writes
     inline styles (max-width, width) on the SVG.
   - Screen and print rules are split into separate
     media blocks so they can never fight each other.
   - Print rules intentionally do NOT depend on the
     per-element classes/attributes the plugin adds:
     export re-renders the note and the SVG arrives
     asynchronously, so those markers are unreliable
     in the print DOM. In print, every Mermaid diagram
     is scaled to the page width (unless the user
     disabled export fitting in settings).
   ============================================ */

@media screen {
    /* ---- Base fitting: reading mode + live preview ---- */
    body.mermaid-fit-scroll-enabled .mermaid.mermaid-export-fit-scrollable {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        max-width: 100% !important;
        padding: 4px 0;
        position: relative;
    }

    /* Keep the original SVG width for clarity. */
    body.mermaid-fit-enabled .mermaid.mermaid-export-fit-managed svg.mermaid-export-fit-svg {
        max-width: none !important;
        min-width: auto !important;
        height: auto !important;
        display: block;
    }

    /* ---- Scrollbar styling ---- */
    body.mermaid-fit-scroll-enabled .mermaid::-webkit-scrollbar {
        height: 6px;
    }

    body.mermaid-fit-scroll-enabled .mermaid::-webkit-scrollbar-track {
        background: transparent;
    }

    body.mermaid-fit-scroll-enabled .mermaid::-webkit-scrollbar-thumb {
        background: rgba(128, 128, 128, 0.25);
        border-radius: 3px;
    }

    body.mermaid-fit-scroll-enabled .mermaid::-webkit-scrollbar-thumb:hover {
        background: rgba(128, 128, 128, 0.45);
    }

    body.mermaid-fit-enabled .mermaid.mermaid-export-fit-scaled {
        overflow-x: hidden !important;
    }

    body.mermaid-fit-enabled .mermaid.mermaid-export-fit-scaled svg {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }

    /* ---- Slides / presentation mode ---- */
    body.mermaid-fit-export-enabled .reveal .mermaid[data-mermaid-fit="true"] svg {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ---- Print / PDF export fitting ----
   Gated on :not(disabled) instead of an "enabled" class so the
   fit still applies when the print renderer uses a fresh document
   that never received the plugin's body classes. */
@media print {
    body:not(.mermaid-fit-export-disabled) .mermaid {
        overflow: visible !important;
        max-width: 100% !important;
    }

    body:not(.mermaid-fit-export-disabled) .mermaid svg {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }
}