cosmos-docusaurus-theme 1.2.4 → 1.2.6

package/CHANGELOG.md

@@ -7,6 +7,42 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ---
 
+## [1.2.6] — 2026-03-10
+
+### Added
+
+- **Sidebar icons** — category icon system via `className: 'sidebar-cat-*'` in `sidebars.js`.
+  10 Lucide-style SVG icons (rocket, monitor, pencil, puzzle, sliders, folder, server,
+  database, layers, grid, code). CSS-only with dark-mode `filter:invert(1)`.
+- **Sidebar sub-menu vertical line** — Rackscope-style left border on nested items.
+  Sub-items: slightly smaller font, muted color, left padding.
+- **Sidebar version badge** — always pinned at the very bottom of the sidebar viewport
+  (`[class*="sidebarViewport"]` flex-column + `::after` outside scroll area).
+  Hardcoded backgrounds (#fff / #111827) to always cover scrolled content.
+- **Ctrl+K hint redesign** — ghost style: transparent chips with hairline border,
+  `+` separator via `::before`, opacity 0.7 at rest, 0.9 on input focus.
+  Preserves plugin positioning (only kbd elements restyled).
+
+### Changed
+
+- Search input: `min-width` 220px → 300px; font-family → `var(--ifm-font-family-base)` (Outfit)
+- Demo `docusaurus.config.js`: `{ type:'search' }` positioned before external links;
+  `searchBarShortcutHint: true`
+- Dockerfile: copies full project so `file:..` resolves during local dev
+
+## [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.4",
+  "version": "1.2.6",
   "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
@@ -928,60 +934,115 @@ details > :not(summary) {
   --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 AppSearch component */
+/* ── 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.  */
+
+/* Search input — wider, Outfit font, consistent with Rackscope AppSearch */
 .navbar__search-input {
-  height: 38px;
-  min-width: 220px;
-  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: 300px !important;
+  border-radius: 8px !important;
+  border: 1px solid var(--ifm-toc-border-color) !important;
+  font-family: var(--ifm-font-family-base) !important;
+  font-size: 0.875rem !important;
+  background-color: #f3f4f6 !important;
+  color: #1a1714 !important;
+  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s !important;
 }
 
 .navbar__search-input::placeholder {
-  color: var(--ifm-font-color-secondary);
-  font-size: 0.875rem;
+  color: #8a8479 !important;
+  font-family: var(--ifm-font-family-base) !important;
+}
+
+[data-theme='dark'] .navbar__search-input {
+  background-color: #1f2937 !important;
+  color: #e5e5e5 !important;
+}
+
+[data-theme='dark'] .navbar__search-input::placeholder {
+  color: #6b7280 !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 hint badges inside search input */
-[class*="searchHint"] kbd,
-.navbar__search-input ~ * kbd {
-  background: var(--ifm-code-background);
-  border: 1px solid var(--ifm-toc-border-color);
-  border-radius: 4px;
-  color: var(--ifm-font-color-secondary);
-  font-size: 0.65rem;
-  font-family: var(--ifm-font-family-monospace);
-  padding: 1px 5px;
-  box-shadow: none;
+/* Ctrl+K hint — ghost style: transparent, blends into the input surface.
+   Uses currentColor border so it adapts to both Void and Slate automatically. */
+
+/* Inner hint wrapper: flex row for the two keys */
+[class*="searchHint"]:not([class*="Container"]) {
+  display: inline-flex !important;
+  align-items: center !important;
+  gap: 0 !important;
+}
+
+/* Each key: ghost chip, no fill, hairline border */
+[class*="searchHintContainer"] kbd {
+  background: transparent !important;
+  border: 1px solid var(--ifm-toc-border-color) !important;
+  border-radius: 4px !important;
+  color: var(--ifm-font-color-secondary) !important;
+  font-family: var(--ifm-font-family-monospace) !important;
+  font-size: 0.6rem !important;
+  font-weight: 400 !important;
+  letter-spacing: 0.02em !important;
+  padding: 1px 5px !important;
+  line-height: 1.6 !important;
+  box-shadow: none !important;
+  opacity: 0.7 !important;
 }
 
-/* Right-side navbar ordering: Search | GitHub | Theme toggle */
-.navbar__search {
-  order: 0;
+/* "+" separator between the two kbd elements */
+[class*="searchHintContainer"] kbd + kbd {
+  margin-left: 2px !important;
 }
 
+[class*="searchHintContainer"] kbd + kbd::before {
+  content: '+';
+  font-family: var(--ifm-font-family-monospace) !important;
+  font-size: 0.6rem !important;
+  color: var(--ifm-font-color-secondary) !important;
+  opacity: 0.5 !important;
+  margin-right: 2px !important;
+}
+
+/* Whole hint brightens on input focus — discovery moment */
+.navbar__search-input:focus ~ [class*="searchHintContainer"],
+.navbar__search-input:focus + [class*="searchHintContainer"] {
+  opacity: 0.9 !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: 1;
+  order: 0 !important;
 }
 
-/* Color mode toggle wrapper (direct flex child) — rightmost */
-/* Must target the wrapper div, not button[aria-label] which is a nested child */
+/* Color mode toggle wrapper — rightmost */
 [class*="colorModeToggle"] {
-  order: 2;
+  order: 1 !important;
 }
 
 /* ── Algolia DocSearch ───────────────────────────────────────────────────── */
@@ -1050,6 +1111,176 @@ details > :not(summary) {
   background: #475467;
 }
 
+/* =============================================================================
+   SIDEBAR — RACKSCOPE STYLE
+   Vertical line for nested items + icon system via className + version footer.
+   ============================================================================= */
+
+/* ── Nested items — vertical left border ─────────────────────────────────── */
+/* Like Rackscope: [Category Title]                                           */
+/*                   │ sub item                                                */
+/*                   │ sub item                                                */
+
+.theme-doc-sidebar-menu .menu__list .menu__list {
+  margin-left: 8px;
+  padding-left: 12px;
+  border-left: 1.5px solid var(--ifm-toc-border-color);
+}
+
+[data-theme='dark'] .theme-doc-sidebar-menu .menu__list .menu__list {
+  border-left-color: #374151;  /* Void gray-700 — slightly more visible */
+}
+
+/* Sub-items: slightly smaller + muted when inactive */
+.menu__list .menu__list > .menu__list-item > .menu__link {
+  font-size: 0.8375rem;
+  padding-left: 12px;
+}
+
+.menu__list .menu__list > .menu__list-item > .menu__link:not(.menu__link--active) {
+  color: var(--ifm-font-color-secondary);
+}
+
+[data-theme='dark'] .menu__list .menu__list > .menu__list-item > .menu__link:not(.menu__link--active) {
+  color: #71717a;
+}
+
+/* ── Category icons — via className in sidebars.js ───────────────────────── */
+/* Usage: { type: 'category', label: '...', className: 'sidebar-cat-rocket'} */
+/* Icon = black SVG via ::before — inverted in dark mode with filter:invert   */
+
+[class*="sidebar-cat-"] > .menu__list-item-collapsible > .menu__link {
+  display: flex;
+  align-items: center;
+}
+
+[class*="sidebar-cat-"] > .menu__list-item-collapsible > .menu__link::before {
+  content: '';
+  display: inline-block;
+  flex-shrink: 0;
+  width: 15px;
+  height: 15px;
+  margin-right: 8px;
+  background-size: 15px 15px;
+  background-repeat: no-repeat;
+  background-position: center;
+  opacity: 0.6;
+  transition: opacity 0.12s;
+}
+
+/* Dark mode — invert the black SVG to white */
+[data-theme='dark'] [class*="sidebar-cat-"] > .menu__list-item-collapsible > .menu__link::before {
+  filter: invert(1);
+}
+
+/* Hover + active state — full opacity */
+[class*="sidebar-cat-"] > .menu__list-item-collapsible > .menu__link--active::before,
+[class*="sidebar-cat-"] > .menu__list-item-collapsible:hover > .menu__link::before {
+  opacity: 1;
+}
+
+/* ── Icon definitions (Lucide-style SVG, black stroke, 24×24) ───────────── */
+
+/* Rocket — Getting Started, Deployment */
+.sidebar-cat-rocket > .menu__list-item-collapsible > .menu__link::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E");
+}
+
+/* Monitor — Views */
+.sidebar-cat-monitor > .menu__list-item-collapsible > .menu__link::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3C/svg%3E");
+}
+
+/* Pencil — Editors */
+.sidebar-cat-pencil > .menu__list-item-collapsible > .menu__link::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5z'/%3E%3C/svg%3E");
+}
+
+/* Puzzle — Plugins & Features */
+.sidebar-cat-puzzle > .menu__list-item-collapsible > .menu__link::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h4a2 2 0 0 1 2 2v1a2 2 0 0 0 4 0v-1a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M14 2v4a2 2 0 0 1-2 2h-1a2 2 0 0 0 0 4h1a2 2 0 0 1 2 2v4'/%3E%3C/svg%3E");
+}
+
+/* SlidersHorizontal — Interface, Core, Settings */
+.sidebar-cat-sliders > .menu__list-item-collapsible > .menu__link::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='21' y1='4' x2='14' y2='4'/%3E%3Cline x1='10' y1='4' x2='3' y2='4'/%3E%3Ccircle cx='12' cy='4' r='2'/%3E%3Cline x1='21' y1='12' x2='12' y2='12'/%3E%3Cline x1='8' y1='12' x2='3' y2='12'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Cline x1='21' y1='20' x2='16' y2='20'/%3E%3Cline x1='12' y1='20' x2='3' y2='20'/%3E%3Ccircle cx='14' cy='20' r='2'/%3E%3C/svg%3E");
+}
+
+/* FolderOpen — Configuration */
+.sidebar-cat-folder > .menu__list-item-collapsible > .menu__link::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
+}
+
+/* Server — Infrastructure */
+.sidebar-cat-server > .menu__list-item-collapsible > .menu__link::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='8' rx='2' ry='2'/%3E%3Crect x='2' y='14' width='20' height='8' rx='2' ry='2'/%3E%3Cline x1='6' y1='6' x2='6.01' y2='6'/%3E%3Cline x1='6' y1='18' x2='6.01' y2='18'/%3E%3C/svg%3E");
+}
+
+/* Database — Data & Plugins */
+.sidebar-cat-database > .menu__list-item-collapsible > .menu__link::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M21 12c0 1.66-4 3-9 3s-9-1.34-9-3'/%3E%3Cpath d='M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5'/%3E%3C/svg%3E");
+}
+
+/* Layers — Component Reference */
+.sidebar-cat-layers > .menu__list-item-collapsible > .menu__link::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z'/%3E%3Cpath d='M22 17.65l-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65'/%3E%3Cpath d='M22 12.65l-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'/%3E%3C/svg%3E");
+}
+
+/* Grid2x2 — Showcase */
+.sidebar-cat-grid > .menu__list-item-collapsible > .menu__link::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E");
+}
+
+/* Code2 — API, Development, Architecture features */
+.sidebar-cat-code > .menu__list-item-collapsible > .menu__link::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
+}
+
+/* ── Sidebar version badge — always at the very bottom ───────────────────── */
+/* Architecture: .theme-doc-sidebar is the sticky viewport with fixed height.
+   Converting it to flex-column + making the scrollable nav flex:1 means the
+   ::after pseudo-element is a flex-child OUTSIDE the scroll area — always
+   pinned to the bottom regardless of content height or scroll position. */
+:root {
+  --cosmos-version: "cosmos v1.2.6";
+}
+
+/* Sidebar viewport — flex column so version badge is always pinned at the bottom.
+   Targets the CSS-module class via attribute substring match (Docusaurus 3). */
+[class*="sidebarViewport"] {
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+/* The scrollable menu fills the available space */
+[class*="sidebarViewport"] > .menu {
+  flex: 1 !important;
+  min-height: 0 !important;
+}
+
+/* Version badge — flex child OUTSIDE the scroll area, always at the very bottom */
+[class*="sidebarViewport"]::after {
+  content: var(--cosmos-version);
+  flex-shrink: 0;
+  display: block;
+  padding: 8px 0 12px;
+  text-align: center;
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.58rem;
+  font-weight: 500;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: #9ca3af;
+  background: #fff;
+  border-top: 1px solid #e5e7eb;
+}
+
+[data-theme='dark'] [class*="sidebarViewport"]::after {
+  color: #374151;
+  background: #111827;
+  border-top-color: #1f2937;
+}
+
 /* =============================================================================
    OPTIONAL UTILITY CLASSES
    The following classes are not required for the theme to work.