Better support for more themes

- sphinx_rtd_theme
- alabaster
- sphinx_material
- typlog

Author: humitos

MANIFEST.in

@@ -8,4 +8,5 @@ include hoverxref/_static/css/tooltipster.custom.css
 
 include hoverxref/_static/js/micromodal.min.js
 include hoverxref/_static/css/micromodal.css
-
+include hoverxref/_static/css/sphinx-material.css
+include hoverxref/_static/css/sphinx_rtd_theme.css

hoverxref/_static/css/micromodal.css

@@ -8,6 +8,7 @@
   background: rgba(0,0,0,0.6);
   display: flex;
   align-items: center;
+  justify-content: center;
   z-index: 250;
 }
 
@@ -20,7 +21,6 @@
   overflow-y: auto;
   box-sizing: border-box;
   z-index: 250;
-  position: relative;
 }
 
 .modal__header {

hoverxref/_static/css/sphinx-material.css

@@ -0,0 +1,7 @@
+#micromodal.md-typeset h1 {
+  margin: 0;
+}
+
+.modal__btn {
+  font-size: .675rem;
+}

hoverxref/_static/css/sphinx_rtd_theme.css

@@ -0,0 +1,7 @@
+#micromodal .modal__overlay {
+  justify-content: unset;
+}
+
+#micromodal .modal__container {
+  position: relative;
+}

hoverxref/_static/js/hoverxref.js_t

@@ -125,20 +125,21 @@ $(document).ready(function() {
     $('body').append(modalHtml);
 
     function onShow(modal, element) {
-        // This is a HACK to get some "smart" left position of the
-        // modal depending its size.
-        var container = $('#micromodal .modal__container')
-        // FIXME: this element only exists in sphinx-rtd-theme
-        var maxWidth = $('.wy-nav-content').innerWidth() - 150 || 650;
-        var contentLeft = $('.rst-content:first').position().left || 250;
-        if (container.width() >= maxWidth) {
-            var left = contentLeft - 150;
-        }
-        else {
-            var left = contentLeft + 150;
+        if (typeof READTHEDOCS_DATA !== 'undefined' && READTHEDOCS_DATA.theme == 'sphinx_rtd_theme') {
+            // This is a HACK to get some "smart" left position of the
+            // modal depending its size.
+            var container = $('#micromodal .modal__container')
+            var maxWidth = $('.wy-nav-content').innerWidth() - 150;
+            var contentLeft = $('.wy-nav-content').position().left;
+            if (container.width() >= maxWidth) {
+                var left = contentLeft - 150;
+            }
+            else {
+                var left = contentLeft + 150;
+            }
+            console.debug('Container left position: ' + left);
+            container.css('left', left);
         }
-        console.debug('Container left position: ' + left);
-        container.css('left', left);
     }
 
     function showModal(element) {

hoverxref/extension.py

@@ -93,6 +93,36 @@ def setup_sphinx_tabs(app, config):
             app.disconnect(listener_id)
 
 
+def setup_theme(app, exception):
+    """
+    Auto-configure default settings for known themes.
+
+    Add a small custom CSS file for a specific theme and set hoverxref configs
+    (if not overwritten by the user) with better defaults for these themes.
+    """
+    css_file = None
+    theme = app.config.html_theme
+    default, rebuild, types = app.config.values.get('hoverxref_modal_class')
+    if theme == 'sphinx_material':
+        if app.config.hoverxref_modal_class == default:
+            app.config.hoverxref_modal_class = 'md-typeset'
+            css_file = 'css/material.css'
+    elif theme == 'alabaster':
+        if app.config.hoverxref_modal_class == default:
+            app.config.hoverxref_modal_class = 'body'
+    elif theme == 'sphinx_rtd_theme':
+        if app.config.hoverxref_modal_class == default:
+            css_file = 'css/sphinx_rtd_theme.css'
+
+    if css_file:
+        app.add_css_file(css_file)
+        path = os.path.join(os.path.dirname(__file__), '_static', css_file)
+        copy_asset(
+            path,
+            os.path.join(app.outdir, '_static', 'css'),
+        )
+
+
 def setup(app):
     """Setup ``hoverxref`` Sphinx extension."""
 
@@ -144,6 +174,7 @@ def setup(app):
 
     app.connect('config-inited', setup_domains)
     app.connect('config-inited', setup_sphinx_tabs)
+    app.connect('config-inited', setup_theme)
     app.connect('build-finished', copy_asset_files)
 
     for f in ASSETS_FILES: