docs/style.css at main · usebarekey/docs · 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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap");

/* ─── Sharp corners everywhere ─────────────────────────────── */
*,
*::before,
*::after {
	border-radius: 0 !important;
}

/* ─── Code font ─────────────────────────────────────────────── */
code,
pre,
pre code,
[class*="language-"],
.shiki,
.shiki code,
[data-rehype-pretty-code-figure] pre,
[data-rehype-pretty-code-figure] code {
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
	font-size: 13px !important;
	line-height: 1.65 !important;
	letter-spacing: 0 !important;
}

/* ─── Inline code ───────────────────────────────────────────── */
:not(pre) > code {
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
	font-size: 12.5px !important;
	padding: 2px 5px !important;
	background: rgba(57, 68, 71, 0.09) !important;
	border: 1px solid rgba(57, 68, 71, 0.18) !important;
	color: inherit !important;
}

.dark :not(pre) > code {
	background: rgba(208, 214, 216, 0.07) !important;
	border-color: rgba(208, 214, 216, 0.13) !important;
}

/* ─── Shiki token base — let github-dark/light theme control colours ── */
/* Only make the shiki element itself transparent so the Mintlify
   code block container background shows through unobstructed. */
.shiki,
.shiki code {
	background-color: transparent !important;
}

/* ─── Copy button ───────────────────────────────────────────── */
/* No border — the icon itself is the affordance. A border around
   a copy icon makes it look like a second copy icon. */
[data-rehype-pretty-code-figure] button,
button[aria-label="Copy"],
.copy-button {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: #67787c !important;
	opacity: 0.6 !important;
	padding: 4px !important;
	transition: opacity 0.15s !important;
}

[data-rehype-pretty-code-figure] button:hover,
button[aria-label="Copy"]:hover,
.copy-button:hover {
	opacity: 1 !important;
	color: #d0d6d8 !important;
}

/* ─── Sidebar nav ───────────────────────────────────────────── */
nav a,
[class*="sidebar"] a {
	font-size: 13.5px !important;
}

/* ─── Headings ──────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
	font-family: "Google Sans", sans-serif !important;
	font-weight: 500 !important;
	letter-spacing: -0.01em !important;
}

h1 { font-size: 1.625rem !important; }
h2 { font-size: 1.25rem !important; }
h3 { font-size: 1.05rem !important; }

/* ─── Callout / note cards ──────────────────────────────────── */
[class*="callout"],
[class*="note"],
[class*="warning"],
[class*="tip"],
[class*="info"] {
	border-left-width: 2px !important;
}

/* ─── Tables ─────────────────────────────────────────────────── */
table {
	border-collapse: collapse !important;
	font-size: 13.5px !important;
}

th {
	font-weight: 500 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 12.5px !important;
}

td, th {
	border: 1px solid rgba(57, 68, 71, 0.2) !important;
	padding: 8px 12px !important;
}

.dark td,
.dark th {
	border-color: rgba(57, 68, 71, 0.5) !important;
}

/* ─── Body text ─────────────────────────────────────────────── */
p, li {
	font-size: 14.5px !important;
	line-height: 1.7 !important;
}