Skip to content

feat: modify the style of the prompt component #97

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wuyiping0628 wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

feat: modify the style of the prompt component #97

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions .vitepress/theme/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -487,7 +487,6 @@ info {
display: none;
}
.vp-doc .custom-block {
display: flex;
padding: 1rem 1.25rem;
border-radius: 1rem;
margin-top: 1rem;
Expand All @@ -498,6 +497,15 @@ info {
margin: 0;
line-height: 20px;
}
.vp-doc .custom-block.info ol,
.vp-doc .custom-block.warning ol,
.vp-doc .custom-block.danger ol,
.vp-doc .custom-block.tip ol {
margin-left: 32px;
}
.vp-doc .custom-block .custom-block-content {
margin-left: 32px;
}
Comment on lines +500 to +508
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Mar 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🌐 Web query:

In VitePress v1.x, what is the default HTML structure for markdown custom containers (info/warning/danger/tip)? Specifically, are list elements typically wrapped by a .custom-block-content container?

💡 Result:

In VitePress v1.x, the default HTML structure for markdown custom containers (info, warning, danger, tip) is a div with class "custom-block" (and a type-specific subclass like "custom-block-info"), containing a div.custom-block-title with the title (e.g., "INFO") and a div.custom-block-content wrapping the container's content. List elements (ul/ol/li) within custom containers are typically wrapped by the .custom-block-content div, as it contains all the parsed markdown content from the ::: ... ::: block.

Citations:

🏁 Script executed:

cat -n .vitepress/theme/style.css | sed -n '490,520p'

Repository: opentiny/docs

Length of output: 927

🏁 Script executed:

# Search for any CSS rules that affect .custom-block-content margins or list margins
rg "\.custom-block.*\{|margin.*:" .vitepress/theme/style.css -A 2 -B 1 | head -100

Repository: opentiny/docs

Length of output: 1670

🏁 Script executed:

# Check for any resets or specific rules for lists inside custom-block-content
rg "custom-block-content.*ol|custom-block-content.*ul|custom-block.*ol.*margin|custom-block.*ul.*margin" .vitepress/theme/style.css -A 2

Repository: opentiny/docs

Length of output: 39

Fix double indentation for lists inside custom blocks.

Lines 500–508 apply conflicting margin-left rules: the ol selector adds 32px indentation and .custom-block-content adds another 32px, resulting in 64px total indentation when lists are nested inside the content wrapper (which VitePress renders by default).

Remove the explicit list indentation rule and apply margin only to .custom-block-content, then reset list margins to prevent the compound effect:

Suggested fix 
-.vp-doc .custom-block.info ol,
-.vp-doc .custom-block.warning ol,
-.vp-doc .custom-block.danger ol,
-.vp-doc .custom-block.tip ol {
-  margin-left: 32px;
-}
 .vp-doc .custom-block .custom-block-content {
-  margin-left: 32px;
+  margin-inline-start: 32px;
+}
+.vp-doc .custom-block .custom-block-content :is(ol, ul) {
+  margin-inline-start: 0;
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
.vp-doc .custom-block.info ol,
.vp-doc .custom-block.warning ol,
.vp-doc .custom-block.danger ol,
.vp-doc .custom-block.tip ol {
margin-left: 32px;
}
.vp-doc .custom-block .custom-block-content {
margin-left: 32px;
}
.vp-doc .custom-block .custom-block-content {
margin-inline-start: 32px;
}
.vp-doc .custom-block .custom-block-content :is(ol, ul) {
margin-inline-start: 0;
}
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In @.vitepress/theme/style.css around lines 500 - 508, The rules for list
indentation double-apply because both the selectors ".vp-doc .custom-block.info
ol, .vp-doc .custom-block.warning ol, .vp-doc .custom-block.danger ol, .vp-doc
.custom-block.tip ol" and ".vp-doc .custom-block .custom-block-content" add
margin-left; remove the explicit ol selector rules and keep the 32px margin only
on ".vp-doc .custom-block .custom-block-content", then add a reset for lists
inside that container (reset ol and ul margin-left to 0 inside ".vp-doc
.custom-block .custom-block-content") so nested lists do not accumulate
indentation.

.vp-doc .custom-block.info {
background: #f5faff;
border: 1px solid #ceebff;
Expand All @@ -519,7 +527,7 @@ info {
color: #5cb300;
}
.vp-doc .custom-block::before {
display: inline-block;
float: left;
width: 20px;
height: 20px;
margin-top: 2px;
Expand Down
Loading