Tweak default CSS rules for better defaults, fix merge issue for fullscreen css classes

timkpaine · timkpaine · commit 421db3cb8c43 · 2025-11-23T19:32:11.000-05:00
diff --git a/CHANGELOG.rst b/CHANGELOG.rst
@@ -1,6 +1,12 @@
 Changelog
 ---------
 
+1.2.1 (November 23, 2025)
++++++++++++++++++++++
+
+- Adjust chart size defaults to closer resember previous
+- Fix issue with fullscreen classes after rebase
+
 1.2.0 (November 23, 2025)
 +++++++++++++++++++++
 
diff --git a/README.rst b/README.rst
@@ -230,6 +230,14 @@ Config values
 
     Enables zooming in all the generated Mermaid diagrams.
 
+``mermaid_width``
+
+    Sets the default diagram width within its container. Default to 100%.
+
+``mermaid_height``
+
+    Sets the default diagram height within its container. Default to 500px.
+
 ``mermaid_fullscreen``
 
     Enables fullscreen modal viewing for all Mermaid diagrams. When enabled, a fullscreen button
diff --git a/sphinxcontrib/mermaid/__init__.py b/sphinxcontrib/mermaid/__init__.py
@@ -43,9 +43,9 @@
 
 # Load fullscreen CSS and JavaScript from external files
 _MODULE_DIR = Path(__file__).parent
-_FULLSCREEN_CSS = (_MODULE_DIR / "fullscreen.css").read_text(encoding="utf-8")
-_MERMAID_CSS = (_MODULE_DIR / "default.css").read_text(encoding="utf-8")
-_MERMAID_RUN = (_MODULE_DIR / "default.js").read_text(encoding="utf-8")
+_FULLSCREEN_CSS = (_MODULE_DIR / "fullscreen.css.j2").read_text(encoding="utf-8")
+_MERMAID_CSS = (_MODULE_DIR / "default.css.j2").read_text(encoding="utf-8")
+_MERMAID_RUN = (_MODULE_DIR / "default.js.j2").read_text(encoding="utf-8")
 
 mapname_re = re.compile(r'<map id="(.*?)"')
 _MERMAID_INIT_JS_DEFAULT = "mermaid.initialize({startOnLoad:false});"
@@ -451,6 +451,8 @@ def install_js(
     _has_fullscreen = app.config.mermaid_fullscreen
     _button_text = app.config.mermaid_fullscreen_button
     _button_opacity = app.config.mermaid_fullscreen_button_opacity
+    _mermaid_width = app.config.mermaid_width
+    _mermaid_height = app.config.mermaid_height
 
     if app.config.mermaid_output_format == "raw":
         if app.config.d3_use_local:
@@ -466,6 +468,10 @@ def install_js(
             if not _has_fullscreen:
                 _d3_js_script = _MERMAID_RUN.format(
                     mermaid_js_url=_mermaid_js_url,
+                    common_css=_MERMAID_CSS.format(
+                        mermaid_width=_mermaid_width,
+                        mermaid_height=_mermaid_height,
+                    ),
                     fullscreen_css="",  # ignored
                     button_text=_button_text,  # ignored
                     button_opacity=_button_opacity,  # ignored
@@ -493,6 +499,10 @@ def install_js(
                 if not _has_fullscreen:
                     _d3_js_script = _MERMAID_RUN.format(
                         mermaid_js_url=_mermaid_js_url,
+                        common_css=_MERMAID_CSS.format(
+                            mermaid_width=_mermaid_width,
+                            mermaid_height=_mermaid_height,
+                        ),
                         fullscreen_css="",  # ignored
                         button_text=_button_text,  # ignored
                         button_opacity=_button_opacity,  # ignored
@@ -528,7 +538,14 @@ def install_js(
                 count = -1
             _d3_js_script = _MERMAID_RUN.format(
                 mermaid_js_url=_mermaid_js_url,
-                fullscreen_css=_FULLSCREEN_CSS,
+                common_css=_MERMAID_CSS.format(
+                    mermaid_width=_mermaid_width,
+                    mermaid_height=_mermaid_height,
+                ),
+                fullscreen_css=_FULLSCREEN_CSS.format(
+                    mermaid_width=_mermaid_width,
+                    mermaid_height=_mermaid_height,
+                ),
                 button_text=_button_text,
                 button_opacity=_button_opacity,
                 d3_selector=_d3_selector if _d3_selector else ".mermaid svg",
@@ -542,7 +559,14 @@ def install_js(
             # Fullscreen without zoom
             _fullscreen_js_script = _MERMAID_RUN.format(
                 mermaid_js_url=_mermaid_js_url,
-                fullscreen_css=_FULLSCREEN_CSS,
+                common_css=_MERMAID_CSS.format(
+                    mermaid_width=_mermaid_width,
+                    mermaid_height=_mermaid_height,
+                ),
+                fullscreen_css=_FULLSCREEN_CSS.format(
+                    mermaid_width=_mermaid_width,
+                    mermaid_height=_mermaid_height,
+                ),
                 button_text=_button_text,
                 button_opacity=_button_opacity,
                 d3_selector="",  # ignored
@@ -558,6 +582,7 @@ def install_js(
             None,
             body=_MERMAID_RUN.format(
                 mermaid_js_url=_mermaid_js_url,
+                common_css="",
                 fullscreen_css="",
                 button_text="",
                 button_opacity="",
@@ -601,6 +626,8 @@ def setup(app):
     app.add_config_value("d3_use_local", "", "html")
     app.add_config_value("d3_version", "7.9.0", "html")
     app.add_config_value("mermaid_d3_zoom", False, "html")
+    app.add_config_value("mermaid_width", "100%", "html")
+    app.add_config_value("mermaid_height", "500px", "html")
     app.add_config_value("mermaid_fullscreen", True, "html")
     app.add_config_value("mermaid_fullscreen_button", "⛶", "html")
     app.add_config_value("mermaid_fullscreen_button_opacity", "50", "html")
diff --git a/sphinxcontrib/mermaid/default.css b/sphinxcontrib/mermaid/default.css
diff --git a/sphinxcontrib/mermaid/default.css.j2 b/sphinxcontrib/mermaid/default.css.j2
@@ -0,0 +1,12 @@
+pre.mermaid {{
+    /* Same as .mermaid-container > pre */
+    display: block;
+    width: {mermaid_width};
+}}
+
+pre.mermaid > svg {{
+    /* Same as .mermaid-container > pre > svg */
+    height: {mermaid_height};
+    width: 100%;
+    max-width: 100% !important;
+}}
diff --git a/sphinxcontrib/mermaid/default.js.j2 b/sphinxcontrib/mermaid/default.js.j2
@@ -1,8 +1,12 @@
 import mermaid from "{mermaid_js_url}";
 
-const style = document.createElement('style');
-style.textContent = `{fullscreen_css}`;
-document.head.appendChild(style);
+const defaultStyle = document.createElement('style');
+defaultStyle.textContent = `{common_css}`;
+document.head.appendChild(defaultStyle);
+
+const fullscreenStyle = document.createElement('style');
+fullscreenStyle.textContent = `{fullscreen_css}`;
+document.head.appendChild(fullscreenStyle);
 
 // Detect if page has dark background
 const isDarkTheme = () => {{
diff --git a/sphinxcontrib/mermaid/fullscreen.css.j2 b/sphinxcontrib/mermaid/fullscreen.css.j2
@@ -1,21 +1,21 @@
-.mermaid-container {
+.mermaid-container {{
     display: flex;
     flex-direction: row;
     width: 100%;
-}
+}}
 
-.mermaid-container > pre {
+.mermaid-container > pre {{
     display: block;
-    width: 95%;
-}
+    width: {mermaid_width};
+}}
 
-.mermaid-container > pre > svg {
+.mermaid-container > pre > svg {{
+    height: {mermaid_height};
     width: 100%;
-    height: auto;
     max-width: 100% !important;
-}
+}}
 
-.mermaid-fullscreen-btn {
+.mermaid-fullscreen-btn {{
     width: 28px;
     height: 28px;
     background: rgba(255, 255, 255, 0.95);
@@ -31,50 +31,50 @@
     line-height: 1;
     padding: 0;
     color: #333;
-}
+}}
 
-.mermaid-fullscreen-btn:hover {
+.mermaid-fullscreen-btn:hover {{
     opacity: 100% !important;
     background: rgba(255, 255, 255, 1);
     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
     transform: scale(1.1);
-}
+}}
 
-.mermaid-fullscreen-btn.dark-theme {
+.mermaid-fullscreen-btn.dark-theme {{
     background: rgba(50, 50, 50, 0.95);
     border: 1px solid rgba(255, 255, 255, 0.3);
     color: #e0e0e0;
-}
+}}
 
-.mermaid-fullscreen-btn.dark-theme:hover {
+.mermaid-fullscreen-btn.dark-theme:hover {{
     background: rgba(60, 60, 60, 1);
     box-shadow: 0 3px 10px rgba(255, 255, 255, 0.2);
-}
+}}
 
-.mermaid-fullscreen-modal {
+.mermaid-fullscreen-modal {{
     display: none;
     position: fixed !important;
     top: 0 !important;
     left: 0 !important;
-    width: 100vw;
+    width: 95vw;
     height: 100vh;
     background: rgba(255, 255, 255, 0.98);
     z-index: 9999;
     padding: 20px;
     overflow: auto;
-}
+}}
 
-.mermaid-fullscreen-modal.dark-theme {
+.mermaid-fullscreen-modal.dark-theme {{
     background: rgba(0, 0, 0, 0.98);
-}
+}}
 
-.mermaid-fullscreen-modal.active {
+.mermaid-fullscreen-modal.active {{
     display: flex;
     align-items: center;
     justify-content: center;
-}
+}}
 
-.mermaid-fullscreen-content {
+.mermaid-container-fullscreen {{
     position: relative;
     width: 95vw;
     height: 90vh;
@@ -88,30 +88,28 @@
     display: flex;
     align-items: center;
     justify-content: center;
-}
+}}
 
-.mermaid-fullscreen-content.dark-theme {
+.mermaid-container-fullscreen.dark-theme {{
     background: #1a1a1a;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
-}
+}}
 
-.mermaid-fullscreen-content .mermaid {
+.mermaid-container-fullscreen pre.mermaid {{
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
-}
+}}
 
-.mermaid-fullscreen-content .mermaid svg {
-    width: 100%;
-    height: auto;
-    max-width: 100%;
-    max-height: 85vh;
+.mermaid-container-fullscreen .mermaid svg {{
+    height: 100% !important;
+    width: 100% !important;
     cursor: grab;
-}
+}}
 
-.mermaid-fullscreen-close {
+.mermaid-fullscreen-close {{
     position: fixed !important;
     top: 20px !important;
     right: 20px !important;
@@ -130,25 +128,25 @@
     font-size: 24px;
     line-height: 1;
     color: #333;
-}
+}}
 
-.mermaid-fullscreen-close:hover {
+.mermaid-fullscreen-close:hover {{
     background: white;
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
     transform: scale(1.1);
-}
+}}
 
-.mermaid-fullscreen-close.dark-theme {
+.mermaid-fullscreen-close.dark-theme {{
     background: rgba(50, 50, 50, 0.95);
     border: 1px solid rgba(255, 255, 255, 0.2);
     color: #e0e0e0;
-}
+}}
 
-.mermaid-fullscreen-close.dark-theme:hover {
+.mermaid-fullscreen-close.dark-theme:hover {{
     background: rgba(60, 60, 60, 1);
     box-shadow: 0 6px 16px rgba(255, 255, 255, 0.2);
-}
+}}
 
-.mermaid-fullscreen-modal .mermaid-fullscreen-btn {
+.mermaid-fullscreen-modal .mermaid-fullscreen-btn {{
     display: none !important;
-}
+}}
