Revert overflow-y

Inject the flyout on its position when on Read the Docs and the user defined
`flyout_display="attached"`.

docs/changelog.rst

@@ -4,9 +4,31 @@ Changelog
 
 .. seealso:: :ref:`howto_upgrade`
 
-.. |theme_version| replace:: 3.0.0rc4
+.. |theme_version| replace:: 3.0.2
 
-.. _release-3.0.0rc1:
+.. _release-3.0.2:
+
+3.0.2
+=====
+
+* Show current translation when the flyout is attached
+* Fix JavaScript issue that didn't allow users to disable selectors
+
+.. _release-3.0.1:
+
+3.0.1
+=====
+
+* Use black color for text in selectors.
+
+.. _release-3.0.0:
+
+3.0.0
+=====
+
+Final version.
+
+.. _release-3.0.0rc4:
 
 3.0.0rc4
 ========
@@ -16,6 +38,7 @@ Fixes
 
 * Trigger "Read the Docs Search addon" when focusing the "Search docs" input in the navbar.
 
+.. _release-3.0.0rc3:
 
 3.0.0rc3
 ========
@@ -25,6 +48,7 @@ Fixes
 
 * Show hidden version in selector if it's the current active version
 
+.. _release-3.0.0rc2:
 
 3.0.0rc2
 ========
@@ -35,6 +59,7 @@ Added
 * Render version and language selectors below the documentation's title (top left).
   This can be controlled via the new theme options ``version_selector`` and ``language_selector``.
 
+.. _release-3.0.0rc1:
 
 3.0.0rc1
 ========

docs/configuring.rst

@@ -20,7 +20,7 @@ For example:
         'style_external_links': False,
         'vcs_pageview_mode': '',
         'style_nav_header_background': 'white',
-        'flyout_display': 'hidden',
+        'flyout_display': 'attached',
         'version_selector': True,
         'language_selector': True,
         # Toc options
@@ -192,10 +192,9 @@ Miscellaneous options
     Specify how to display the flyout (language and version selector).
     This can be either ``attached`` or ``hidden``.
     ``attached`` means that it will show the flyout in the bottom of the sidebar.
-    You will need to disable the default `Read the Docs flyout <https://docs.readthedocs.io/en/stable/flyout-menu.html>`_ in order to not have 2 flyouts showing.
 
     :type: str
-    :default: ``hidden``
+    :default: ``attached``
 
 .. confval:: version_selector
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "sphinx_rtd_theme",
-  "version": "3.0.0rc4",
+  "version": "3.0.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "sphinx_rtd_theme",
   "main": "js/theme.js",
-  "version": "3.0.0rc4",
+  "version": "3.0.2",
   "scripts": {
     "dev": "webpack-dev-server --open --config webpack.dev.js",
     "build": "webpack --config webpack.prod.js",

setup.cfg

@@ -1,5 +1,5 @@
 [bumpversion]
-current_version = 3.0.0rc4
+current_version = 3.0.2
 commit = false
 tag = false
 parse = (?P<major>\d+)\.(?P<minor>\d+)\.(?P<patch>\d+)((?P<release>[a-z]+)(?P<dev>\d+))?

setup.py

@@ -86,7 +86,7 @@ class TransifexCommand(distutils.cmd.Command):
 
 
 setup(
-    version='3.0.0rc4',
+    version='3.0.2',
     cmdclass={
         'update_translations': UpdateTranslationsCommand,
         'transifex': TransifexCommand,

sphinx_rtd_theme/__init__.py

@@ -13,7 +13,7 @@ from sphinx.locale import _
 from sphinx.util.logging import getLogger
 
 
-__version__ = '3.0.0rc4'
+__version__ = '3.0.2'
 __version_full__ = __version__
 
 logger = getLogger(__name__)

sphinx_rtd_theme/layout.html

@@ -156,6 +156,12 @@
         </div>
         {%- endblock %}
       </div>
+
+      {%- if READTHEDOCS and theme_flyout_display == "attached" %}
+      <div class="readthedocs-flyout-container">
+        <readthedocs-flyout position="up inline"></readthedocs-flyout>
+      </div>
+      {%- endif %}
     </nav>
 
     <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">
@@ -167,6 +173,7 @@
           <i data-toggle="wy-nav-top" class="fa fa-bars"></i>
           <a href="{{ pathto(master_doc) }}">{{ project }}</a>
         {%- endblock %}
+
       </nav>
 
       <div class="wy-nav-content">

sphinx_rtd_theme/static/css/theme.css

@@ -1,4 +1,4 @@
 html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}[hidden],audio:not([controls]){display:none}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}blockquote{margin:0}dfn{font-style:italic}ins{background:#ff9;text-decoration:none}ins,mark{color:#000}mark{background:#ff0;font-style:italic;font-weight:700}.rst-content code,.rst-content tt,code,kbd,pre,samp{font-family:monospace,serif;_font-family:courier new,monospace;font-size:1em}pre{white-space:pre}q{quotes:none}q:after,q:before{content:"";content:none}small{font-size:85%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}dl,ol,ul{margin:0;padding:0;list-style:none;list-style-image:none}li{list-style:none}dd{margin:0}img{border:0;-ms-interpolation-mode:bicubic;vertical-align:middle;max-width:100%}svg:not(:root){overflow:hidden}figure,form{margin:0}label{cursor:pointer}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button;*overflow:visible}button[disabled],input[disabled]{cursor:default}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}textarea{resize:vertical}table{border-collapse:collapse;border-spacing:0}td{vertical-align:top}.chromeframe{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}.ir{display:block;border:0;text-indent:-999em;overflow:hidden;background-color:transparent;background-repeat:no-repeat;text-align:left;direction:ltr;*line-height:0}.ir br{display:none}.hidden{display:none!important;visibility:hidden}.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}.invisible{visibility:hidden}.relative{position:relative}big,small{font-size:100%}@media print{body,html,section{background:none!important}*{box-shadow:none!important;text-shadow:none!important;filter:none!important;-ms-filter:none!important}a,a:visited{text-decoration:underline}.ir a:after,a[href^="#"]:after,a[href^="javascript:"]:after{content:""}blockquote,pre{page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}img{max-width:100%!important}@page{margin:.5cm}.rst-content .toctree-wrapper>p.caption,h2,h3,p{orphans:3;widows:3}.rst-content .toctree-wrapper>p.caption,h2,h3{page-break-after:avoid}}.btn,.fa:before,.icon:before,.rst-content .admonition,.rst-content .admonition-title:before,.rst-content .admonition-todo,.rst-content .attention,.rst-content .caution,.rst-content .code-block-caption .headerlink:before,.rst-content .danger,.rst-content .eqno .headerlink:before,.rst-content .error,.rst-content .hint,.rst-content .important,.rst-content .note,.rst-content .seealso,.rst-content .tip,.rst-content .warning,.rst-content code.download span:first-child:before,.rst-content dl dt .headerlink:before,.rst-content h1 .headerlink:before,.rst-content h2 .headerlink:before,.rst-content h3 .headerlink:before,.rst-content h4 .headerlink:before,.rst-content h5 .headerlink:before,.rst-content h6 .headerlink:before,.rst-content p.caption .headerlink:before,.rst-content p .headerlink:before,.rst-content table>caption .headerlink:before,.rst-content tt.download span:first-child:before,.wy-alert,.wy-dropdown .caret:before,.wy-inline-validate.wy-inline-validate-danger .wy-input-context:before,.wy-inline-validate.wy-inline-validate-info .wy-input-context:before,.wy-inline-validate.wy-inline-validate-success .wy-input-context:before,.wy-inline-validate.wy-inline-validate-warning .wy-input-context:before,.wy-menu-vertical li.current>a button.toctree-expand:before,.wy-menu-vertical li.on a button.toctree-expand:before,.wy-menu-vertical li button.toctree-expand:before,input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{-webkit-font-smoothing:antialiased}.clearfix{*zoom:1}.clearfix:after,.clearfix:before{display:table;content:""}.clearfix:after{clear:both}/*!
  *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
- */@font-face{font-family:FontAwesome;src:url(fonts/fontawesome-webfont.eot?674f50d287a8c48dc19ba404d20fe713);src:url(fonts/fontawesome-webfont.eot?674f50d287a8c48dc19ba404d20fe713?#iefix&v=4.7.0) format("embedded-opentype"),url(fonts/fontawesome-webfont.woff2?af7ae505a9eed503f8b8e6982036873e) format("woff2"),url(fonts/fontawesome-webfont.woff?fee66e712a8a08eef5805a46892932ad) format("woff"),url(fonts/fontawesome-webfont.ttf?b06871f281fee6b241d60582ae9369b9) format("truetype"),url(fonts/fontawesome-webfont.svg?912ec66d7572ff821749319396470bde#fontawesomeregular) format("svg");font-weight:400;font-style:normal}.fa,.icon,.rst-content .admonition-title,.rst-content .code-block-caption .headerlink,.rst-content .eqno .headerlink,.rst-content code.download span:first-child,.rst-content dl dt .headerlink,.rst-content h1 .headerlink,.rst-content h2 .headerlink,.rst-content h3 .headerlink,.rst-content h4 .headerlink,.rst-content h5 .headerlink,.rst-content h6 .headerlink,.rst-content p.caption .headerlink,.rst-content p .headerlink,.rst-content table>caption .headerlink,.rst-content tt.download span:first-child,.wy-menu-vertical li.current>a button.toctree-expand,.wy-menu-vertical li.on a button.toctree-expand,.wy-menu-vertical li button.toctree-expand{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14286em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14286em;width:2.14286em;top:.14286em;text-align:center}.fa-li.fa-lg{left:-1.85714em}.fa-border{padding:.2em .25em .15em;border:.08em solid #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa-pull-left.icon,.fa.fa-pull-left,.rst-content .code-block-caption .fa-pull-left.headerlink,.rst-content .eqno .fa-pull-left.headerlink,.rst-content .fa-pull-left.admonition-title,.rst-content code.download span.fa-pull-left:first-child,.rst-content dl dt .fa-pull-left.headerlink,.rst-content h1 .fa-pull-left.headerlink,.rst-content h2 .fa-pull-left.headerlink,.rst-content h3 .fa-pull-left.headerlink,.rst-content h4 .fa-pull-left.headerlink,.rst-content h5 .fa-pull-left.headerlink,.rst-content h6 .fa-pull-left.headerlink,.rst-content p .fa-pull-left.headerlink,.rst-content table>caption .fa-pull-left.headerlink,.rst-content tt.download span.fa-pull-left:first-child,.wy-menu-vertical li.current>a button.fa-pull-left.toctree-expand,.wy-menu-vertical li.on a button.fa-pull-left.toctree-expand,.wy-menu-vertical li button.fa-pull-left.toctree-expand{margin-right:.3em}.fa-pull-right.icon,.fa.fa-pull-right,.rst-content .code-block-caption .fa-pull-right.headerlink,.rst-content .eqno .fa-pull-right.headerlink,.rst-content .fa-pull-right.admonition-title,.rst-content code.download span.fa-pull-right:first-child,.rst-content dl dt .fa-pull-right.headerlink,.rst-content h1 .fa-pull-right.headerlink,.rst-content h2 .fa-pull-right.headerlink,.rst-content h3 .fa-pull-right.headerlink,.rst-content h4 .fa-pull-right.headerlink,.rst-content h5 .fa-pull-right.headerlink,.rst-content h6 .fa-pull-right.headerlink,.rst-content p .fa-pull-right.headerlink,.rst-content table>caption .fa-pull-right.headerlink,.rst-content tt.download span.fa-pull-right:first-child,.wy-menu-vertical li.current>a button.fa-pull-right.toctree-expand,.wy-menu-vertical li.on a button.fa-pull-right.toctree-expand,.wy-menu-vertical li button.fa-pull-right.toctree-expand{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left,.pull-left.icon,.rst-content .code-block-caption .pull-left.headerlink,.rst-content .eqno .pull-left.headerlink,.rst-content .pull-left.admonition-title,.rst-content code.download span.pull-left:first-child,.rst-content dl dt .pull-left.headerlink,.rst-content h1 .pull-left.headerlink,.rst-content h2 .pull-left.headerlink,.rst-content h3 .pull-left.headerlink,.rst-content h4 .pull-left.headerlink,.rst-content h5 .pull-left.headerlink,.rst-content h6 .pull-left.headerlink,.rst-content p .pull-left.headerlink,.rst-content table>caption .pull-left.headerlink,.rst-content tt.download span.pull-left:first-child,.wy-menu-vertical li.current>a button.pull-left.toctree-expand,.wy-menu-vertical li.on a button.pull-left.toctree-expand,.wy-menu-vertical li button.pull-left.toctree-expand{margin-right:.3em}.fa.pull-right,.pull-right.icon,.rst-content .code-block-caption .pull-right.headerlink,.rst-content .eqno .pull-right.headerlink,.rst-content .pull-right.admonition-title,.rst-content code.download span.pull-right:first-child,.rst-content dl dt .pull-right.headerlink,.rst-content h1 .pull-right.headerlink,.rst-content h2 .pull-right.headerlink,.rst-content h3 .pull-right.headerlink,.rst-coLine truncated
+ */@font-face{font-family:FontAwesome;src:url(fonts/fontawesome-webfont.eot?674f50d287a8c48dc19ba404d20fe713);src:url(fonts/fontawesome-webfont.eot?674f50d287a8c48dc19ba404d20fe713?#iefix&v=4.7.0) format("embedded-opentype"),url(fonts/fontawesome-webfont.woff2?af7ae505a9eed503f8b8e6982036873e) format("woff2"),url(fonts/fontawesome-webfont.woff?fee66e712a8a08eef5805a46892932ad) format("woff"),url(fonts/fontawesome-webfont.ttf?b06871f281fee6b241d60582ae9369b9) format("truetype"),url(fonts/fontawesome-webfont.svg?912ec66d7572ff821749319396470bde#fontawesomeregular) format("svg");font-weight:400;font-style:normal}.fa,.icon,.rst-content .admonition-title,.rst-content .code-block-caption .headerlink,.rst-content .eqno .headerlink,.rst-content code.download span:first-child,.rst-content dl dt .headerlink,.rst-content h1 .headerlink,.rst-content h2 .headerlink,.rst-content h3 .headerlink,.rst-content h4 .headerlink,.rst-content h5 .headerlink,.rst-content h6 .headerlink,.rst-content p.caption .headerlink,.rst-content p .headerlink,.rst-content table>caption .headerlink,.rst-content tt.download span:first-child,.wy-menu-vertical li.current>a button.toctree-expand,.wy-menu-vertical li.on a button.toctree-expand,.wy-menu-vertical li button.toctree-expand{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14286em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14286em;width:2.14286em;top:.14286em;text-align:center}.fa-li.fa-lg{left:-1.85714em}.fa-border{padding:.2em .25em .15em;border:.08em solid #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa-pull-left.icon,.fa.fa-pull-left,.rst-content .code-block-caption .fa-pull-left.headerlink,.rst-content .eqno .fa-pull-left.headerlink,.rst-content .fa-pull-left.admonition-title,.rst-content code.download span.fa-pull-left:first-child,.rst-content dl dt .fa-pull-left.headerlink,.rst-content h1 .fa-pull-left.headerlink,.rst-content h2 .fa-pull-left.headerlink,.rst-content h3 .fa-pull-left.headerlink,.rst-content h4 .fa-pull-left.headerlink,.rst-content h5 .fa-pull-left.headerlink,.rst-content h6 .fa-pull-left.headerlink,.rst-content p .fa-pull-left.headerlink,.rst-content table>caption .fa-pull-left.headerlink,.rst-content tt.download span.fa-pull-left:first-child,.wy-menu-vertical li.current>a button.fa-pull-left.toctree-expand,.wy-menu-vertical li.on a button.fa-pull-left.toctree-expand,.wy-menu-vertical li button.fa-pull-left.toctree-expand{margin-right:.3em}.fa-pull-right.icon,.fa.fa-pull-right,.rst-content .code-block-caption .fa-pull-right.headerlink,.rst-content .eqno .fa-pull-right.headerlink,.rst-content .fa-pull-right.admonition-title,.rst-content code.download span.fa-pull-right:first-child,.rst-content dl dt .fa-pull-right.headerlink,.rst-content h1 .fa-pull-right.headerlink,.rst-content h2 .fa-pull-right.headerlink,.rst-content h3 .fa-pull-right.headerlink,.rst-content h4 .fa-pull-right.headerlink,.rst-content h5 .fa-pull-right.headerlink,.rst-content h6 .fa-pull-right.headerlink,.rst-content p .fa-pull-right.headerlink,.rst-content table>caption .fa-pull-right.headerlink,.rst-content tt.download span.fa-pull-right:first-child,.wy-menu-vertical li.current>a button.fa-pull-right.toctree-expand,.wy-menu-vertical li.on a button.fa-pull-right.toctree-expand,.wy-menu-vertical li button.fa-pull-right.toctree-expand{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left,.pull-left.icon,.rst-content .code-block-caption .pull-left.headerlink,.rst-content .eqno .pull-left.headerlink,.rst-content .pull-left.admonition-title,.rst-content code.download span.pull-left:first-child,.rst-content dl dt .pull-left.headerlink,.rst-content h1 .pull-left.headerlink,.rst-content h2 .pull-left.headerlink,.rst-content h3 .pull-left.headerlink,.rst-content h4 .pull-left.headerlink,.rst-content h5 .pull-left.headerlink,.rst-content h6 .pull-left.headerlink,.rst-content p .pull-left.headerlink,.rst-content table>caption .pull-left.headerlink,.rst-content tt.download span.pull-left:first-child,.wy-menu-vertical li.current>a button.pull-left.toctree-expand,.wy-menu-vertical li.on a button.pull-left.toctree-expand,.wy-menu-vertical li button.pull-left.toctree-expand{margin-right:.3em}.fa.pull-right,.pull-right.icon,.rst-content .code-block-caption .pull-right.headerlink,.rst-content .eqno .pull-right.headerlink,.rst-content .pull-right.admonition-title,.rst-content code.download span.pull-right:first-child,.rst-content dl dt .pull-right.headerlink,.rst-content h1 .pull-right.headerlink,.rst-content h2 .pull-right.headerlink,.rst-content h3 .pull-right.headerlink,.rst-coLine truncated

sphinx_rtd_theme/static/js/versions.js_t

@@ -1,139 +1,5 @@
-const themeFlyoutDisplay = "{{ theme_flyout_display }}";
-const themeVersionSelector = "{{ theme_version_selector }}";
-const themeLanguageSelector = "{{ theme_language_selector }}";
-
-if (themeFlyoutDisplay === "attached") {
-  function renderLanguages(config) {
-    if (!config.projects.translations.length) {
-      return "";
-    }
-
-    const languagesHTML = `
-      <dl>
-        <dt>{{ _('Languages') }}</dt>
-        ${config.projects.translations
-          .map(
-            (translation) => `
-        <dd ${translation.slug == config.projects.current.slug ? 'class="rtd-current-item"' : ""}>
-          <a href="${translation.urls.documentation}">${translation.language.code}</a>
-        </dd>
-        `,
-          )
-          .join("\n")}
-      </dl>
-    `;
-    return languagesHTML;
-  }
-
-  function renderVersions(config) {
-    if (!config.versions.active.length) {
-      return "";
-    }
-    const versionsHTML = `
-      <dl>
-        <dt>{{ _('Versions') }}</dt>
-        ${config.versions.active
-          .map(
-            (version) => `
-        <dd ${version.slug === config.versions.current.slug ? 'class="rtd-current-item"' : ""}>
-          <a href="${version.urls.documentation}">${version.slug}</a>
-        </dd>
-        `,
-          )
-          .join("\n")}
-      </dl>
-    `;
-    return versionsHTML;
-  }
-
-  function renderDownloads(config) {
-    if (!Object.keys(config.versions.current.downloads).length) {
-      return "";
-    }
-    const downloadsNameDisplay = {
-      pdf: "PDF",
-      epub: "Epub",
-      htmlzip: "HTML",
-    };
-
-    const downloadsHTML = `
-      <dl>
-        <dt>{{ _('Downloads') }}</dt>
-        ${Object.entries(config.versions.current.downloads)
-          .map(
-            ([name, url]) => `
-          <dd>
-            <a href="${url}">${downloadsNameDisplay[name]}</a>
-          </dd>
-        `,
-          )
-          .join("\n")}
-      </dl>
-    `;
-    return downloadsHTML;
-  }
-
-  document.addEventListener("readthedocs-addons-data-ready", function (event) {
-    const config = event.detail.data();
-
-    const flyout = `
-      <div class="rst-versions" data-toggle="rst-versions" role="note">
-        <span class="rst-current-version" data-toggle="rst-current-version">
-          <span class="fa fa-book"> Read the Docs</span>
-          v: ${config.versions.current.slug}
-          <span class="fa fa-caret-down"></span>
-        </span>
-        <div class="rst-other-versions">
-          <div class="injected">
-            ${renderLanguages(config)}
-            ${renderVersions(config)}
-            ${renderDownloads(config)}
-            <dl>
-              <dt>{{ _('On Read the Docs') }}</dt>
-              <dd>
-                <a href="${config.projects.current.urls.home}">{{ _('Project Home') }}</a>
-              </dd>
-              <dd>
-                <a href="${config.projects.current.urls.builds}">{{ _('Builds') }}</a>
-              </dd>
-              <dd>
-                <a href="${config.projects.current.urls.downloads}">{{ _('Downloads') }}</a>
-              </dd>
-            </dl>
-            <dl>
-              <dt>{{ _('Search') }}</dt>
-              <dd>
-                <form id="flyout-search-form">
-                  <input
-                    class="wy-form"
-                    type="text"
-                    name="q"
-                    aria-label="{{ _('Search docs') }}"
-                    placeholder="{{ _('Search docs') }}"
-                    />
-                </form>
-              </dd>
-            </dl>
-            <hr />
-            <small>
-              <span>Hosted by <a href="https://about.readthedocs.org/?utm_source={{ READTHEDOCS_PROJECT }}&utm_content=flyout">Read the Docs</a></span>
-            </small>
-          </div>
-        </div>
-    `;
-
-    // Inject the generated flyout into the body HTML element.
-    document.body.insertAdjacentHTML("beforeend", flyout);
-
-    // Trigger the Read the Docs Addons Search modal when clicking on the "Search docs" input from inside the flyout.
-    document
-      .querySelector("#flyout-search-form")
-      .addEventListener("focusin", () => {
-        const event = new CustomEvent("readthedocs-search-show");
-        document.dispatchEvent(event);
-      });
-  })
-}
+const themeVersionSelector = {{ 'true' if theme_version_selector|tobool else 'false' }};
+const themeLanguageSelector = {{ 'true' if theme_language_selector|tobool else 'false' }};
 
 if (themeLanguageSelector || themeVersionSelector) {
   function onSelectorSwitch(event) {

sphinx_rtd_theme/theme.conf

@@ -17,6 +17,6 @@ prev_next_buttons_location = bottom
 style_external_links = False
 style_nav_header_background =
 vcs_pageview_mode =
-flyout_display = hidden
+flyout_display = attached
 version_selector = True
 language_selector = True

src/sass/_theme_layout.sass

@@ -265,6 +265,8 @@ html
         &:hover, &:active, &:focus
           background: rgba(255, 255, 255, .1)
           color: rgba(255, 255, 255, .5)
+        option
+          color: black
       &:has(> select):after
         display: inline-block
         width: 1.5em
@@ -319,7 +321,6 @@ html
   top: 0
   bottom: 0
   left: 0
-  padding-bottom: 2em
   width: $nav-desktop-width
   overflow-x: hidden
   overflow-y: hidden
@@ -327,6 +328,8 @@ html
   color: $menu-medium
   background: $nav-background-color
   z-index: $z-index-popover
+  display: flex
+  flex-direction: column
 
 .wy-side-scroll
   width: $nav-desktop-width + 20px
@@ -402,6 +405,9 @@ footer
   margin-top: 12px
   +clearfix
 
+.readthedocs-flyout-container
+  width: calc(100% - 1rem)
+
 #search-results
   .search li
     margin-bottom: $base-line-height

src/sass/_theme_rst.sass

@@ -615,3 +615,5 @@
   .rst-content
     .sidebar
       width: 100%
+      float: none
+      margin-left: 0