Skip to content

Commit e31a458

Browse files
phauptcursoragent
andcommitted
style: apply frosted glass look to custom blocks and hide type labels
Replace default VitePress callout styling with frosted glass aesthetic matching the home page wip-banner. Each block type uses a subtle color tint and left border (blue/green/amber/red/neutral) instead of the prominent INFO/TIP/WARNING/DANGER labels. Includes dark mode variants. Co-authored-by: Cursor <cursoragent@cursor.com>
1 parent 3a6c6a5 commit e31a458

1 file changed

Lines changed: 95 additions & 0 deletions

File tree

docs/.vitepress/theme/custom.css

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -275,3 +275,98 @@ html.dark .vp-doc img:not(.no-zoom):hover {
275275
html.dark .VPSwitchAppearance .icon [class^='vpi-'] {
276276
color: rgba(223, 223, 214, 0.85);
277277
}
278+
279+
/* ====================================================================
280+
Frosted-glass custom blocks (info · tip · warning · danger · details)
281+
Mirrors the wip-banner aesthetic from the home page.
282+
==================================================================== */
283+
284+
.vp-doc .custom-block.info,
285+
.vp-doc .custom-block.tip,
286+
.vp-doc .custom-block.warning,
287+
.vp-doc .custom-block.danger,
288+
.vp-doc .custom-block.details {
289+
backdrop-filter: blur(4px);
290+
-webkit-backdrop-filter: blur(4px);
291+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
292+
border-radius: 6px;
293+
border: none;
294+
padding: 1rem 1.5rem;
295+
line-height: 1.6;
296+
font-size: 0.95rem;
297+
color: var(--vp-c-text-1);
298+
}
299+
300+
/* Hide the type label (INFO / TIP / WARNING / DANGER) */
301+
.vp-doc .custom-block.info > .custom-block-title,
302+
.vp-doc .custom-block.tip > .custom-block-title,
303+
.vp-doc .custom-block.warning > .custom-block-title,
304+
.vp-doc .custom-block.danger > .custom-block-title {
305+
display: none;
306+
}
307+
308+
/* — info: subtle blue tint ----------------------------------------- */
309+
.vp-doc .custom-block.info {
310+
border-left: 4px solid rgba(59, 130, 246, 0.50);
311+
background-color: rgba(235, 245, 255, 0.58);
312+
}
313+
314+
/* — tip: subtle green tint ----------------------------------------- */
315+
.vp-doc .custom-block.tip {
316+
border-left: 4px solid rgba(16, 185, 129, 0.50);
317+
background-color: rgba(235, 255, 245, 0.58);
318+
}
319+
320+
/* — warning: subtle amber tint ------------------------------------- */
321+
.vp-doc .custom-block.warning {
322+
border-left: 4px solid rgba(245, 158, 11, 0.50);
323+
background-color: rgba(255, 250, 235, 0.58);
324+
}
325+
326+
/* — danger: subtle red tint ---------------------------------------- */
327+
.vp-doc .custom-block.danger {
328+
border-left: 4px solid rgba(239, 68, 68, 0.50);
329+
background-color: rgba(255, 240, 238, 0.58);
330+
}
331+
332+
/* — details: subtle neutral tint ----------------------------------- */
333+
.vp-doc .custom-block.details {
334+
border-left: 4px solid rgba(120, 120, 130, 0.40);
335+
background-color: rgba(245, 245, 250, 0.58);
336+
}
337+
338+
.vp-doc .custom-block.details > summary {
339+
font-weight: 600;
340+
color: var(--vp-c-text-1);
341+
}
342+
343+
/* ---- Dark mode --------------------------------------------------- */
344+
html.dark .vp-doc .custom-block.info {
345+
background-color: rgba(30, 40, 60, 0.62);
346+
border-left-color: rgba(59, 130, 246, 0.40);
347+
box-shadow: 0 1px 4px rgba(255, 255, 255, 0.06);
348+
}
349+
350+
html.dark .vp-doc .custom-block.tip {
351+
background-color: rgba(30, 50, 40, 0.62);
352+
border-left-color: rgba(16, 185, 129, 0.40);
353+
box-shadow: 0 1px 4px rgba(255, 255, 255, 0.06);
354+
}
355+
356+
html.dark .vp-doc .custom-block.warning {
357+
background-color: rgba(50, 45, 30, 0.62);
358+
border-left-color: rgba(245, 158, 11, 0.40);
359+
box-shadow: 0 1px 4px rgba(255, 255, 255, 0.06);
360+
}
361+
362+
html.dark .vp-doc .custom-block.danger {
363+
background-color: rgba(50, 30, 30, 0.62);
364+
border-left-color: rgba(239, 68, 68, 0.40);
365+
box-shadow: 0 1px 4px rgba(255, 255, 255, 0.06);
366+
}
367+
368+
html.dark .vp-doc .custom-block.details {
369+
background-color: rgba(35, 35, 40, 0.62);
370+
border-left-color: rgba(120, 120, 130, 0.35);
371+
box-shadow: 0 1px 4px rgba(255, 255, 255, 0.06);
372+
}

0 commit comments

Comments
 (0)