docs: premium UI improvements — navbar links, hover effects, inline tips, accordion troubleshooting (#646)

- Move Discord, GitHub, PyPI, and Follow on X links from sidebar anchors to top-right navbar - Lock dark mode as default via appearance.strict and hide theme toggle - Add custom.css with hover highlighting for tables, code blocks, cards, callouts, and inline code - Move all Tips and Common Pitfalls sections inline next to their relevant content across all 25 reference docs - Polish context.md: remove duplicates, condense callouts, upgrade Cookbooks to CardGroup - Convert Troubleshooting and Performance Optimization sections in installation.md, cli-setup.md, explorer-setup.md, learning-more.md, and faq.md from plain headers to AccordionGroup - Change navigation-hint Tip callouts to Info in concepts.md, faq.md, glossary.md, and modules.md
2026-08-29 04:26:20 +00:00 · 2026-06-17 18:59:25 +05:30
parent a326c7d3bd
commit e04dc12e6e
30 changed files with 723 additions and 593 deletions
@@ -0,0 +1,127 @@
+/* ============================================================
+   TABLE — row & cell hover highlighting
+   ============================================================ */
+table tbody tr {
+  transition: background-color 0.15s ease;
+  cursor: default;
+}
+
+table tbody tr:hover {
+  background-color: rgba(16, 185, 129, 0.07) !important;
+}
+
+table tbody tr:hover td {
+  background-color: transparent !important;
+}
+
+table td,
+table th {
+  transition: background-color 0.15s ease;
+}
+
+/* ============================================================
+   CODE BLOCKS — glow on hover
+   ============================================================ */
+pre,
+[class*="codeblock"],
+[class*="code-group"],
+[class*="CodeBlock"],
+[data-rehype-pretty-code-fragment] {
+  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
+}
+
+pre:hover,
+[class*="codeblock"]:hover,
+[class*="CodeBlock"]:hover,
+[data-rehype-pretty-code-fragment]:hover {
+  box-shadow: 0 0 0 1.5px rgba(16, 185, 129, 0.35),
+              0 4px 24px rgba(16, 185, 129, 0.09) !important;
+}
+
+/* ============================================================
+   CARDS — lift + glow on hover
+   ============================================================ */
+[class*="card"],
+[class*="Card"],
+[data-card],
+.group\/card {
+  transition: transform 0.2s ease,
+              box-shadow 0.2s ease,
+              border-color 0.2s ease !important;
+}
+
+[class*="card"]:hover,
+[class*="Card"]:hover,
+[data-card]:hover,
+.group\/card:hover {
+  transform: translateY(-2px) !important;
+  box-shadow: 0 8px 32px rgba(16, 185, 129, 0.13),
+              0 0 0 1px rgba(16, 185, 129, 0.28) !important;
+}
+
+/* ============================================================
+   CALLOUTS / NOTES / TIPS — subtle left-border highlight
+   ============================================================ */
+[class*="callout"],
+[class*="Callout"],
+[class*="admonition"] {
+  transition: box-shadow 0.2s ease !important;
+}
+
+[class*="callout"]:hover,
+[class*="Callout"]:hover,
+[class*="admonition"]:hover {
+  box-shadow: inset 3px 0 0 rgba(16, 185, 129, 0.55),
+              0 2px 12px rgba(16, 185, 129, 0.06) !important;
+}
+
+/* ============================================================
+   STEPS — highlight active step on hover
+   ============================================================ */
+[class*="step"],
+[class*="Step"] {
+  transition: background-color 0.15s ease !important;
+}
+
+[class*="step"]:hover,
+[class*="Step"]:hover {
+  background-color: rgba(16, 185, 129, 0.04) !important;
+}
+
+/* ============================================================
+   INLINE CODE — subtle green tint on hover
+   ============================================================ */
+:not(pre) > code {
+  transition: background-color 0.15s ease, color 0.15s ease !important;
+  cursor: text;
+}
+
+:not(pre) > code:hover {
+  background-color: rgba(16, 185, 129, 0.15) !important;
+}
+
+/* ============================================================
+   NAV / SIDEBAR LINKS — subtle hover underline accent
+   ============================================================ */
+nav a,
+[class*="sidebar"] a,
+[class*="Sidebar"] a {
+  transition: color 0.15s ease !important;
+}
+
+/* ============================================================
+   HIDE THEME TOGGLE (moon / sun emoji button)
+   ============================================================ */
+button[aria-label="Switch to light mode"],
+button[aria-label="Switch to dark mode"],
+button[aria-label*="theme"],
+button[title*="theme"],
+button[title*="Theme"],
+[data-theme-toggle],
+[class*="ThemeToggle"],
+[class*="theme-toggle"],
+[class*="ColorModeToggle"],
+[class*="DarkModeToggle"] {
+  display: none !important;
+  pointer-events: none !important;
+}