From bb4043a39d632d43df602b268dee600f034a06fe Mon Sep 17 00:00:00 2001
From: traumweh <hello@lyx.sh>
Date: Sat, 5 Apr 2025 13:03:01 +0200
Subject: [PATCH] Fix lang-switcher and toc styling

---
 css/area_nav-metabox.less    | 62 +++++++++++-------------------------
 css/plugins/translation.less |  2 ++
 2 files changed, 20 insertions(+), 44 deletions(-)

diff --git a/css/area_nav-metabox.less b/css/area_nav-metabox.less
index ad17187..cdd9c86 100755
--- a/css/area_nav-metabox.less
+++ b/css/area_nav-metabox.less
@@ -22,7 +22,7 @@
     // >= 1024
     @media @screen_min-md {
         height: @page-header_height;
-        border: 1px solid transparent;
+        border: 0 none;
     }
 
     // < 1024
@@ -121,26 +121,17 @@
                 position: relative;
                 display: block;
                 font-size: @font-size-small;
-                transition: @transition background-color, @transition border-color, @transition color;
-
-                @media @screen_min-md {
-                    background-color: var(--color-background);
-                    border: 1px solid var(--color-shade-4);
-                    border-bottom-color: var(--color-background);
-                    border-radius: @ini_default_border_radius @ini_default_border_radius 0 0; // @ini_default_border_radius vs. @fix_border-radius
-                    color: var(--color-foreground);
-                    margin-left: 4px;
-                    padding: .3em 1rem .1em;
-                }
+                transition: var(--transition-glow);
+                background-color: var(--color-shade-1);
+                border: solid 0.1em var(--color-shade-2);
+                border-radius: 0.5rem;
+                color: var(--color-foreground);
+                padding: .25em;
+                margin-left: 0;
 
                 @media @screen_max-md {
-                    background-color: var(--color-background);
                     top: 0;
-                    border: 1px solid var(--color-shade-4);
-                    color: var(--color-foreground);
                     margin-top: .2rem;
-                    margin-left: 0;
-                    padding: .2em .3rem;
                 }
 
                 * {
@@ -159,35 +150,16 @@
                 &:focus,
                 &:active {
                     text-decoration: none;
-
-                    @media @screen_min-md {
-                        background-color: var(--color-background);
-                        border-color: var(--color-shade-4);
-                        color: var(--color-foreground);
-                    }
-
-                    @media @screen_max-md {
-                        background-color: var(--color-shade-4);
-                        border-color: var(--color-background);
-                        color: var(--color-foreground);
-                    }
+                    background-color: transparent;
+                    border-color: var(--color-glow-secondary);
+                    color: var(--color-glow-secondary);
+                    filter: var(--filter-glow-secondary);
                 }
             }
 
             &.active {
                 > a {
                     cursor: default;
-                    background-color: var(--color-background);
-                    border-color: var(--color-shade-4);
-                    border-bottom-color: var(--color-background);
-                    color: var(--color-foreground);
-
-                    @media @screen_max-md {
-                        background-color: var(--color-shade-4);
-                        border-bottom-color: var(--color-shade-4);
-                        border-radius: 0;
-                        color: var(--color-foreground);
-                    }
                 }
             }
         }
@@ -208,15 +180,16 @@
             right: 0;
             display: none;
             width: 100%;
-            background-color: var(--color-background);
-            border: 1px solid var(--color-shade-4);
+            background-color: var(--color-shade-1);
+            border: solid .1em var(--color-shade-2);
+            border-radius: 0.5rem;
 
             @media @screen_min-xs {
                 min-width: 20em;
             }
 
             @media @screen_min-md {
-                border-radius: 0 0 @fix_border-radius @fix_border-radius; // @ini_default_border_radius vs. @fix_border-radius
+                margin-top: 0.5rem;
             }
 
             &.active {
@@ -266,7 +239,8 @@
                 float: none;
                 margin: 0;
                 padding: .6rem .5rem .5rem .8rem;
-                background: transparent;
+                background-color: transparent;
+                color: var(--color-foreground);
                 border: 0 none;
 
                 h3 {
diff --git a/css/plugins/translation.less b/css/plugins/translation.less
index 66b36aa..eb6a464 100644
--- a/css/plugins/translation.less
+++ b/css/plugins/translation.less
@@ -21,6 +21,8 @@
     }
 
     ul li {
+        margin-top: 0;
+
         // active language
         span.wikilink1 {
             .fnButton();