feat: modify prompt style and icon

[wuyiping0628]

Summary by CodeRabbit

• Style
  • Enhanced visual styling for documentation custom blocks for improved readability and consistency in light and dark modes.
  • Added distinct backgrounds, borders and icon accents for informational, warning, danger, and tip callouts.
  • Hid block titles for a cleaner presentation and introduced compact, padded layouts with consistent spacing and font sizing.
  • Added decorative icons that adapt in dark mode.
  • Maintained responsive behavior across breakpoints.

[coderabbitai]

Walkthrough

Adds a new .vp-doc .custom-block styling system to the VitePress theme: base layout, per-variant styles (info, warning, danger, tip) with decorative ::before icons, dark-mode overrides using dark icon assets, and a stray/malformed inline text fragment present in the CSS.

Changes

Cohort / File(s)

Summary

VitePress theme CSS /.vitepress/theme/style.css

Adds .vp-doc .custom-block base rules (flex layout, padding, border-radius, spacing, font-size), hides .custom-block-title, adds per-variant rules (.info, .warning, .danger, .tip) with distinct backgrounds/borders/foreground colors, injects decorative ::before icons and a generic ::before rule, provides dark-mode overrides switching to dark icon assets, retains responsive behavior. Contains a stray/malformed inline text fragment that should be fixed.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

• Attention required:
  • Remove or fix the stray/malformed inline text fragment so the CSS parses correctly.
  • Verify icon asset paths and that the dark-mode icon files (icon-info-dark.svg, icon-warning-dark.svg, icon-error-dark.svg, icon-success-dark.svg) are present.
  • Confirm color contrast and accessibility for dark-mode variants.

Poem

I hopped through styles both bold and meek,
Tiny icons nibble at each block's cheek,
Light and dark — borders snug and bright,
Padding warm through day and night,
A rabbit's ribbon for docs so sleek. 🐰✨

Pre-merge checks and finishing touches

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat: modify prompt style and icon' accurately describes the main changes: CSS styling modifications for custom blocks (prompt styles) and icon updates for different block types.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c2e9ce0 and 09f22bd.

📒 Files selected for processing (1)

• .vitepress/theme/style.css (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• .vitepress/theme/style.css

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 09d1968 and dab40eb.

📒 Files selected for processing (1)

• .vitepress/theme/style.css (2 hunks)

🔇 Additional comments (1)

.vitepress/theme/style.css (1)

493-505: Define icon content for remaining custom-block variants.

The ::before pseudo-element is styled for all custom-block types (lines 493–502), but content is specified only for the info variant (lines 503–505). The warning, danger, and tip blocks will render the icon box but with no visible content. Add missing icon content, or clarify if this is intentional.

Are warning, danger, and tip blocks intended to display icons? If so, add corresponding content definitions:

 .vp-doc .custom-block.info::before {
   content: url("../../public/icon-app.svg");
 }
+.vp-doc .custom-block.warning::before {
+  content: url("../../public/icon-warning.svg");
+}
+.vp-doc .custom-block.danger::before {
+  content: url("../../public/icon-danger.svg");
+}
+.vp-doc .custom-block.tip::before {
+  content: url("../../public/icon-tip.svg");
+}

[coderabbitai]

Actionable comments posted: 1

♻️ Duplicate comments (2)

.vitepress/theme/style.css (2)

507-507: Comment syntax issue appears resolved.

This line was previously flagged for containing a stray 'r' after the closing */. The current code shows the comment is now properly formatted, so the CSS parsing issue should be resolved.

---

640-644: Fix dark mode warning block text color visibility.

Line 643 specifies the warning text color as rgba(255, 136, 0, 0.1), which has 10% opacity and renders text nearly invisible. This issue was flagged in the previous review. The light mode warning uses solid color #79350f, and other dark mode block variants use opaque colors. Align the dark mode warning to use a visible, readable color.

Apply this diff to fix the text color:

 .dark .vp-doc .custom-block.warning{
   background: rgba(255, 183, 0, 0.1);
   border: 1px solid rgba(255, 183, 0, 0.2);
-  color: rgba(255, 136, 0, 0.1);
+  color: #ffb700;
 }

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between dab40eb and fab9c68.

📒 Files selected for processing (1)

• .vitepress/theme/style.css (2 hunks)

🔇 Additional comments (1)

.vitepress/theme/style.css (1)

458-505: Light mode custom-block styling looks good.

The flex layout, typography, and color schemes are well-designed with appropriate contrast. The ::before pseudo-element setup is consistent with existing header anchor and outline title patterns.

[coderabbitai]

Actionable comments posted: 1

♻️ Duplicate comments (1)

.vitepress/theme/style.css (1)

650-654: Fix dark mode warning block text color visibility.

Line 653 specifies color: rgba(255, 136, 0, 0.1) (10% opacity), rendering text nearly invisible. This issue was flagged in a prior review but remains unfixed.

Apply this diff to use a solid, visible color:

 .dark .vp-doc .custom-block.warning{
   background: rgba(255, 183, 0, 0.1);
   border: 1px solid rgba(255, 183, 0, 0.2);
-  color: rgba(255, 136, 0, 0.1);
+  color: #ffb700;
 }

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between fab9c68 and c2e9ce0.

📒 Files selected for processing (1)

• .vitepress/theme/style.css (2 hunks)