Use CSS styles from old attempt

#438
readthedocs · Sep 16, 2024 · 79a7c2e · 79a7c2e
1 parent bac696e
commit 79a7c2e
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 4 deletions.
diff --git a/sphinx_rtd_theme/layout.html b/sphinx_rtd_theme/layout.html
@@ -137,8 +137,12 @@
           {%- endif %}
 
           {%- if READTHEDOCS and theme_flyout_display == "selectors" %}
-            <select id="readthedocs-version-selector"></select>
-            <select id="readthedocs-language-selector"></select>
+            <div class="version">
+              <div class="version-dropdown">
+                <select id="readthedocs-version-selector" class="version-list"></select>
+                <select id="readthedocs-language-selector" class="version-list"></select>
+              </div>
+            </div>
           {%- endif %}
 
           {%- include "searchbox.html" %}

diff --git a/sphinx_rtd_theme/static/css/theme.css b/sphinx_rtd_theme/static/css/theme.css
diff --git a/src/sass/_theme_layout.sass b/src/sass/_theme_layout.sass
@@ -217,7 +217,7 @@ html
     padding: ($base-line-height / 6) ($base-line-height / 4)
     margin-bottom: $gutter / 2
     max-width: 100%
-    &:hover
+    &:hover, &active, &focus
       background: rgba(255, 255, 255, 0.1)
     img.logo
       display: block  // display on its own line all the time
@@ -235,6 +235,43 @@ html
     margin-bottom: $gutter / 2
     font-weight: normal
     color: rgba(255, 255, 255, 0.3)
+    > div.version-dropdown
+      position: relative
+      display: inline-block
+      > select
+        max-width: 8em
+        padding: .1em 1.5em .1em .5em
+        text-align-last: center
+        background: none
+        border: none
+        border-radius: 0em
+        box-shadow: none
+        font-family: $base-font-family
+        font-size: 1em
+        font-weight: normal
+        color: rgba(255, 255, 255, .3)
+        // Allow for padding
+        appearance: none
+        -webkit-appearance: none
+        -moz-appearance: none
+        &:hover, &:active, &:focus
+          background: rgba(255, 255, 255, .1)
+          color: rgba(255, 255, 255, .5)
+      &:after
+        content: "\f0d7"
+        font-size: 1em
+        line-height: 1.2em
+        font-family: FontAwesome
+        padding: .1em .5em
+        position: absolute
+        right: 0
+        top: 0
+        z-index: 1
+        text-align: center
+        width: 1.5em
+        height: 100%
+        pointer-events: none
+        box-sizing: border-box
 
 .wy-nav .wy-menu-vertical
   header