nav final

themes/DeepThought/sass/deep-thought.sass

@@ -589,18 +589,37 @@ li.lang-switcher
 .lang-switcher .lang-switcher-icon
   width: 1.25rem
   height: 1.25rem
-  margin-top: 0.35rem
+  margin-top: 0.5rem
+
+.dropdown
+  padding: 0
+
+.nav
+  padding: .5rem .75rem
 
 .dropdown .dropdown-content
-  padding-inline-start:.5rem
-  padding-inline-end:.5rem
   text-align: center
-  left:50%
   transform: translatex(-50%) !important
-  margin-top: 0.55rem
 
 .dropdown-content
   position: absolute !important
+  padding: 0
+  display: flex
+  flex-direction: row
+
+.dropdown-lang
+  background-color: #f5f5f5
+  padding-left: 0.5rem
+  padding-right: 0.5rem
+  padding-top: 0.5rem
+  padding-bottom: 0.5rem
+
+.dropdown-lang-select
+  background-color: #e8e8e8
+  padding-left: 0.5rem
+  padding-right: 0.5rem
+  padding-top: 0.5rem
+  padding-bottom: 0.5rem
 
 code
   color: #AE3B8B
@@ -655,7 +674,8 @@ body[theme="dark"] .navbar-item:hover
 body[theme="dark"] .navbar-item:focus
     color: black !important
 
-.navbar-item:hover > span > img[theme=dark]:not(.no-dark) 
+.navbar-item:hover>span>img[theme=dark]:not(.no-dark),
+.navbar-item:hover>details>summary>span>img[theme=dark]:not(.no-dark)
  filter: invert(0) hue-rotate(0deg)
 
 body[theme="dark"] p 

themes/DeepThought/templates/partials/language_switcher.html

@@ -6,7 +6,9 @@
         </summary>
         <div class="dropdown-content" role="menu">
             {#- Display the current language first in the dropdown -#}
+	    <div class="dropdown-lang-select">
             {{ trans(key="language_name", lang=lang) | upper }}
+	    </div>
             {#- Loop through all the available languages in the config -#}
             {%- for lcode, ldetails in config.languages -%}
                 {#- Skip the current language to avoid linking to the current page -#}
@@ -20,14 +22,14 @@
                 {#- Check if the language code matches the default language -#}
                 {%- if lcode == config.default_language -%}
                     {#- If it does, link to the root path (no language code in URL) -#}
-                    <a role="menuitem" lang="{{ lcode }}" aria-label="{{ language_name }}" href="{{ current_url | replace(from='/' ~ lang ~ '/', to = '/') }}">{{ lcode | upper }}</a>
+		    <div class="dropdown-lang"><a role="menuitem" lang="{{ lcode }}" aria-label="{{ language_name }}" href="{{ current_url | replace(from='/' ~ lang ~ '/', to = '/') }}">{{ lcode | upper }}</a></div>
                     {#- Check if the current language is the default language -#}
                     {#- If it is, append the language code to the base URL -#}
                 {%- elif lang == config.default_language -%}
-                    <a role="menuitem" lang="{{ lcode }}" aria-label="{{ language_name }}" href="{{ config.base_url }}/{{ lcode }}{{ current_path | default(value="/") | safe }}">{{ lcode | upper }}</a>
+		    <div class="dropdown-lang"><a role="menuitem" lang="{{ lcode }}" aria-label="{{ language_name }}" href="{{ config.base_url }}/{{ lcode }}{{ current_path | default(value="/") | safe }}">{{ lcode | upper }}</a></div>
                 {%- else -%}
                     {#- If it's not, replace the current language code in the URL with the new one -#}
-                    <a role="menuitem" lang="{{ lcode }}" aria-label="{{ language_name }}" href="{{ current_url | replace(from='/' ~ lang ~ '/', to='/' ~ lcode ~ '/') }}">{{ lcode | upper }}</a>
+		    <div class="dropdown-lang"><a role="menuitem" lang="{{ lcode }}" aria-label="{{ language_name }}" href="{{ current_url | replace(from='/' ~ lang ~ '/', to='/' ~ lcode ~ '/') }}">{{ lcode | upper }}</a></div>
                 {%- endif -%}
             {%- endfor -%}
         </div>