docs.rootprint.io/custom.css at main · rootprint/docs.rootprint.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
/* Match the web app's flat material language: small 4px radii, no pill-like chrome. */
:root {
	--rootprint-radius: 4px;
}

#navbar,
#sidebar,
#search-bar-entry,
#search-bar-entry-mobile,
#topbar-cta-button,
#endpoints-menu-trigger,
#request-example,
#response-example,
#api-playground-input,
#page-context-menu-button,
#pagination,
#feedback-form,
#feedback-form-input,
#feedback-form-submit,
#feedback-form-cancel,
#mobile-nav,
#mobile-nav-content,
card,
callout,
code-block,
code-group,
accordion,
accordion-group,
expandable,
frame,
step,
tabs,
tile,
prompt,
field,
method-pill,
method-nav-pill,
tryit-button,
option-dropdown,
pagination-prev,
pagination-next {
	border-radius: var(--rootprint-radius) !important;
}

/* Mintlify method badges and nav tags tend to render as pills; square them off. */
method-pill,
method-nav-pill,
nav-tag-pill,
[data-badge] {
	border-radius: var(--rootprint-radius) !important;
}

/* Keep media pleasant, but avoid oversized rounded preview frames. */
img,
video,
iframe {
	border-radius: var(--rootprint-radius);
}

/* Mermaid renders each diagram at its intrinsic size and centers it, so on a wide
   content column the flowcharts look small. Let them fill the available width —
   the viewBox scales the whole diagram (and its labels) up proportionally. */
svg[aria-roledescription="flowchart-v2"],
svg[id^="mermaid-"] {
	max-width: 100% !important;
	width: 100% !important;
	height: auto !important;
}

/* Bold every <Step> title; Mintlify renders it font-normal by default. */
[data-component-part="step-title"] {
	font-weight: 700 !important;
}

/* Cards in a row stretch to equal height, but Mintlify's content container
   doesn't fill that height — so when one card wraps to two lines the shorter
   ones top-align instead of matching. Fill the height so the container's own
   `items-center` actually centers every card's icon + title. */
[data-component-part="card-content-container"] {
	height: 100%;
}

/* The card-icon wrapper is a flex item in the card's horizontal row. With the
   default flex-shrink it collapses below 24px to the image's min-content width;
   narrow marks like the OTel logo shrink to ~8px and effectively vanish. `width`
   can't hold a shrinking flex item (and the img's max-width:100% then clamps it
   to the shrunk wrapper) — min-width sets a floor flex-shrink can't cross. */
[data-component-part="card-icon"] img {
	min-width: 1.5rem !important;
	width: 1.5rem !important;
	height: 1.5rem !important;
	object-fit: contain !important;
}