Small color mode docs CSS fixes (#37896)

* SImplify background gradient syntax

* Move inline style to CSS file

diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss
index 9f1f4e71af57f820920a368143e0f03bd88c38f4..5a1c529ca8266f8f709925f447ae9b4dd172361b 100644 (file)
--- a/site/assets/scss/_navbar.scss
+++ b/site/assets/scss/_navbar.scss
@@ -9,7 +9,7 @@
     z-index: -1;
     display: block;
     content: "";
-    background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
+    background-image: linear-gradient(rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
   }
 
   .bd-navbar-toggle {
@@ -116,6 +116,10 @@
       }
     }
   }
+
+  .dropdown-menu-end {
+    --bs-dropdown-min-width: 8rem;
+  }
 }
 
 @include color-mode(dark) {

diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html
index 2795ec85b7b68e592f06eb4b131725ce0ceccd18..2c1403c0c968b1877b59f2e8abd37147238e84c7 100644 (file)
--- a/site/layouts/partials/docs-navbar.html
+++ b/site/layouts/partials/docs-navbar.html
@@ -95,7 +95,7 @@
               <svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg>
               <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
             </button>
-            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text" style="--bs-dropdown-min-width: 8rem;">
+            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text">
               <li>
                 <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
                   <svg class="bi me-2 opacity-50 theme-icon"><use href="#sun-fill"></use></svg>