cosmos-docusaurus-theme 1.2.2 → 1.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/css/theme.css +49 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cosmos-docusaurus-theme",
3
- "version": "1.2.2",
3
+ "version": "1.2.4",
4
4
  "description": "A clean, dark-first Docusaurus CSS theme based on TailAdmin design system with Outfit typography",
5
5
  "keywords": [
6
6
  "docusaurus",
package/src/css/theme.css CHANGED
@@ -924,17 +924,64 @@ details > :not(summary) {
924
924
  --ifm-navbar-search-input-background-color: #1f2937;
925
925
  --ifm-navbar-search-input-color: #e5e5e5;
926
926
  --ifm-navbar-search-input-placeholder-color: #a3a3a3;
927
+ /* Fix: SVG background-image can't use currentColor — hardcode a light fill */
928
+ --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>");
927
929
  }
928
930
 
929
- /* Navbar search input — styled as ghost button to match navbar buttons */
931
+ /* Navbar search input — styled like Rackscope AppSearch component */
930
932
  .navbar__search-input {
933
+ height: 38px;
934
+ min-width: 220px;
931
935
  border-radius: 8px;
932
936
  border: 1px solid var(--ifm-toc-border-color);
933
- transition: border-color 0.15s;
937
+ background-color: var(--ifm-code-background);
938
+ color: var(--ifm-font-color-base);
939
+ font-size: 0.875rem;
940
+ transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
941
+ }
942
+
943
+ .navbar__search-input::placeholder {
944
+ color: var(--ifm-font-color-secondary);
945
+ font-size: 0.875rem;
934
946
  }
935
947
 
936
948
  .navbar__search-input:focus {
937
949
  border-color: var(--ifm-color-primary);
950
+ background-color: var(--ifm-background-surface-color);
951
+ box-shadow: 0 0 0 3px rgb(70, 95, 255, 0.10);
952
+ outline: none;
953
+ }
954
+
955
+ [data-theme='dark'] .navbar__search-input:focus {
956
+ box-shadow: 0 0 0 3px rgb(117, 146, 255, 0.12);
957
+ }
958
+
959
+ /* Ctrl+K hint badges inside search input */
960
+ [class*="searchHint"] kbd,
961
+ .navbar__search-input ~ * kbd {
962
+ background: var(--ifm-code-background);
963
+ border: 1px solid var(--ifm-toc-border-color);
964
+ border-radius: 4px;
965
+ color: var(--ifm-font-color-secondary);
966
+ font-size: 0.65rem;
967
+ font-family: var(--ifm-font-family-monospace);
968
+ padding: 1px 5px;
969
+ box-shadow: none;
970
+ }
971
+
972
+ /* Right-side navbar ordering: Search | GitHub | Theme toggle */
973
+ .navbar__search {
974
+ order: 0;
975
+ }
976
+
977
+ .navbar__items--right .navbar__link {
978
+ order: 1;
979
+ }
980
+
981
+ /* Color mode toggle wrapper (direct flex child) — rightmost */
982
+ /* Must target the wrapper div, not button[aria-label] which is a nested child */
983
+ [class*="colorModeToggle"] {
984
+ order: 2;
938
985
  }
939
986
 
940
987
  /* ── Algolia DocSearch ───────────────────────────────────────────────────── */