cosmos-docusaurus-theme 1.2.3 → 1.2.5

package/CHANGELOG.md

@@ -7,6 +7,19 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ---
 
+## [1.2.5] — 2026-03-10
+
+### Fixed
+
+- **Search position**: add `{ type: 'search' }` in demo config before external links
+  (CSS `order` alone insufficient when easyops inserts search last in DOM)
+- **Search CSS selectors**: `[class*="navbarSearchContainer"]` with `order: -1 !important`
+  + `[class*="navbarSearch"]` — previous `.navbar__search` didn't match actual class
+- **Search input styling**: `!important` on bg/color to beat CSS module specificity
+- **CTRL+K**: redesigned as compact transparent pill with clean kbd elements
+- **colorModeToggle**: `order: 1 !important` on wrapper div (not button)
+- **Hover**: navbar link color now changes to brand primary in both modes
+
 ## [1.2.2] — 2026-03-10
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cosmos-docusaurus-theme",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "description": "A clean, dark-first Docusaurus CSS theme based on TailAdmin design system with Outfit typography",
   "keywords": [
     "docusaurus",

package/src/css/theme.css

@@ -254,6 +254,12 @@ button[aria-label*="dark and light mode"]:hover::before {
 
 .navbar__link:hover {
   background: rgb(70, 95, 255, 0.08);
+  color: var(--ifm-color-primary);
+}
+
+[data-theme='dark'] .navbar__link:hover {
+  color: #7592ff;
+  background: rgb(117, 146, 255, 0.10);
 }
 
 /* Force direct properties — CSS variables alone are not reliable for navbar
@@ -924,35 +930,105 @@ details > :not(summary) {
   --ifm-navbar-search-input-background-color: #1f2937;
   --ifm-navbar-search-input-color: #e5e5e5;
   --ifm-navbar-search-input-placeholder-color: #a3a3a3;
+  /* Fix: SVG background-image can't use currentColor — hardcode a light fill */
+  --ifm-navbar-search-input-icon: url("data:image/svg+xml;utf8,<svg fill='%23a3a3a3' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='16px' width='16px'><path d='M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z' /></svg>");
 }
 
-/* Navbar search input — styled like Rackscope's AppSearch component       */
-/* rounded-lg, bg surface, border, focus ring — consistent with the app   */
+/* ── Navbar search — input styling ───────────────────────────────────────── */
+/* The easyops search plugin renders: navbarSearchContainer > searchBarContainer
+   > input.navbar__search-input.searchInput_xxx (CSS module).
+   We need !important on background/color to beat the CSS module specificity.  */
+
 .navbar__search-input {
-  height: 36px;
-  min-width: 180px;
-  border-radius: 8px;
-  border: 1px solid var(--ifm-toc-border-color);
-  background-color: var(--ifm-code-background);
-  color: var(--ifm-font-color-base);
-  font-size: 0.875rem;
-  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
+  height: 38px !important;
+  min-width: 220px !important;
+  border-radius: 8px !important;
+  border: 1px solid var(--ifm-toc-border-color) !important;
+  font-size: 0.875rem !important;
+  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s !important;
+}
+
+/* Light (Slate): bg-gray-100 */
+.navbar__search-input {
+  background-color: #f3f4f6 !important;
+  color: #1a1714 !important;
 }
 
 .navbar__search-input::placeholder {
-  color: var(--ifm-font-color-secondary);
-  font-size: 0.875rem;
+  color: #8a8479 !important;
+}
+
+/* Dark (Void): bg-gray-800 */
+[data-theme='dark'] .navbar__search-input {
+  background-color: #1f2937 !important;
+  color: #e5e5e5 !important;
+}
+
+[data-theme='dark'] .navbar__search-input::placeholder {
+  color: #71717a !important;
 }
 
 .navbar__search-input:focus {
-  border-color: var(--ifm-color-primary);
-  background-color: var(--ifm-background-surface-color);
-  box-shadow: 0 0 0 3px rgb(70, 95, 255, 0.10);
-  outline: none;
+  border-color: var(--ifm-color-primary) !important;
+  background-color: var(--ifm-background-surface-color) !important;
+  box-shadow: 0 0 0 3px rgb(70, 95, 255, 0.10) !important;
+  outline: none !important;
 }
 
 [data-theme='dark'] .navbar__search-input:focus {
-  box-shadow: 0 0 0 3px rgb(117, 146, 255, 0.12);
+  background-color: #111827 !important;
+  box-shadow: 0 0 0 3px rgb(117, 146, 255, 0.12) !important;
+}
+
+/* ── Ctrl+K keyboard shortcut — compact pill style ───────────────────────── */
+/* Replaces the default split kbd elements with a unified minimal appearance  */
+[class*="searchHintContainer"] {
+  gap: 2px !important;
+}
+
+[class*="searchHint"] {
+  display: inline-flex !important;
+  align-items: center !important;
+  gap: 1px !important;
+  background: transparent !important;
+  border: 1px solid var(--ifm-toc-border-color) !important;
+  border-radius: 5px !important;
+  padding: 1px 5px !important;
+  box-shadow: none !important;
+}
+
+/* Individual kbd keys inside the hint */
+[class*="searchHint"] kbd {
+  background: transparent !important;
+  border: none !important;
+  border-radius: 0 !important;
+  color: var(--ifm-font-color-secondary) !important;
+  font-size: 0.68rem !important;
+  font-family: var(--ifm-font-family-monospace) !important;
+  padding: 0 !important;
+  box-shadow: none !important;
+  line-height: 1.4 !important;
+}
+
+/* ── Right-side navbar order: Search | GitHub/npm | Theme ────────────────── */
+/* Real DOM structure: navbarSearchContainer | a.navbar__link | colorModeToggle
+   All are direct children of .navbar__items--right (flex container).
+   Use !important to beat any default ordering.                                */
+
+/* Search container (class contains 'navbarSearch') — leftmost */
+[class*="navbarSearch"],
+[class*="navbarSearchContainer"] {
+  order: -1 !important;
+}
+
+/* External links (GitHub, npm…) — middle */
+.navbar__items--right .navbar__link {
+  order: 0 !important;
+}
+
+/* Color mode toggle wrapper — rightmost */
+[class*="colorModeToggle"] {
+  order: 1 !important;
 }
 
 /* ── Algolia DocSearch ───────────────────────────────────────────────────── */