1 /* $OpenBSD: mandoc.css,v 1.39 2022/07/06 14:27:55 schwarze Exp $ */
2 /*
3  * Standard style sheet for mandoc(1) -Thtml and man.cgi(8).
4  *
5  * Written by Ingo Schwarze <schwarze@openbsd.org>.
6  * I place this file into the public domain.
7  * Permission to use, copy, modify, and distribute it for any purpose
8  * with or without fee is hereby granted, without any conditions.
9  */
10 
11 /* Global defaults. */
12 
13 html {		max-width: 65em;
14 		--bg: #FFFFFF;
15 		--fg: #000000; }
16 body {		background: var(--bg);
17 		color: var(--fg);
18 		font-family: Helvetica,Arial,sans-serif; }
19 h1, h2 {	font-size: 110%; }
20 table {		margin-top: 0em;
21 		margin-bottom: 0em;
22 		border-collapse: collapse; }
23 /* Some browsers set border-color in a browser style for tbody,
24  * but not for table, resulting in inconsistent border styling. */
25 tbody {		border-color: inherit; }
26 tr {		border-color: inherit; }
27 td {		vertical-align: top;
28 		padding-left: 0.2em;
29 		padding-right: 0.2em;
30 		border-color: inherit; }
31 ul, ol, dl {	margin-top: 0em;
32 		margin-bottom: 0em; }
33 li, dt {	margin-top: 1em; }
34 pre {		font-family: inherit; }
35 
36 .permalink {	border-bottom: thin dotted;
37 		color: inherit;
38 		font: inherit;
39 		text-decoration: inherit; }
40 * {		clear: both }
41 
42 /* Search form and search results. */
43 
44 fieldset {	border: thin solid silver;
45 		border-radius: 1em;
46 		text-align: center; }
47 input[name=expr] {
48 		width: 25%; }
49 
50 table.results {	margin-top: 1em;
51 		margin-left: 2em;
52 		font-size: smaller; }
53 
54 /* Header and footer lines. */
55 
56 div[role=doc-pageheader] {
57 		display: flex;
58 		border-bottom: 1px dotted #808080;
59 		margin-bottom: 1em;
60 		font-size: smaller; }
61 .head-ltitle {	flex: 1; }
62 .head-vol {	flex: 0 1 auto;
63 		text-align: center; }
64 .head-rtitle {	flex: 1;
65 		text-align: right; }
66 
67 div[role=doc-pagefooter] {
68 		display: flex;
69 		justify-content: space-between;
70 		border-top: 1px dotted #808080;
71 		margin-top: 1em;
72 		font-size: smaller; }
73 .foot-left {	flex: 1; }
74 .foot-date {	flex: 0 1 auto;
75 		text-align: center; }
76 .foot-os {	flex: 1;
77 		text-align: right; }
78 
79 /* Sections and paragraphs. */
80 
81 main {		margin-left: 3.8em; }
82 .Nd { }
83 section.Sh { }
84 h2.Sh {		margin-top: 1.2em;
85 		margin-bottom: 0.6em;
86 		margin-left: -3.2em; }
87 section.Ss { }
88 h3.Ss {		margin-top: 1.2em;
89 		margin-bottom: 0.6em;
90 		margin-left: -1.2em;
91 		font-size: 105%; }
92 .Pp {		margin: 0.6em 0em; }
93 .Sx { }
94 .Xr { }
95 
96 /* Displays and lists. */
97 
98 .Bd { }
99 .Bd-indent {	margin-left: 3.8em; }
100 
101 .Bl-bullet {	list-style-type: disc;
102 		padding-left: 1em; }
103 .Bl-bullet > li { }
104 .Bl-dash {	list-style-type: none;
105 		padding-left: 0em; }
106 .Bl-dash > li:before {
107 		content: "\2014  "; }
108 .Bl-item {	list-style-type: none;
109 		padding-left: 0em; }
110 .Bl-item > li { }
111 .Bl-compact > li {
112 		margin-top: 0em; }
113 
114 .Bl-enum {	padding-left: 2em; }
115 .Bl-enum > li { }
116 .Bl-compact > li {
117 		margin-top: 0em; }
118 
119 .Bl-diag { }
120 .Bl-diag > dt {
121 		font-style: normal;
122 		font-weight: bold; }
123 .Bl-diag > dd {
124 		margin-left: 0em; }
125 .Bl-hang { }
126 .Bl-hang > dt { }
127 .Bl-hang > dd {
128 		margin-left: 5.5em; }
129 .Bl-inset { }
130 .Bl-inset > dt { }
131 .Bl-inset > dd {
132 		margin-left: 0em; }
133 .Bl-ohang { }
134 .Bl-ohang > dt { }
135 .Bl-ohang > dd {
136 		margin-left: 0em; }
137 .Bl-tag {	margin-top: 0.6em;
138 		margin-left: 5.5em; }
139 .Bl-tag > dt {
140 		float: left;
141 		margin-top: 0em;
142 		margin-left: -5.5em;
143 		padding-right: 0.5em;
144 		vertical-align: top; }
145 .Bl-tag > dd {
146 		clear: right;
147 		column-count: 1;  /* Force block formatting context. */
148 		width: 100%;
149 		margin-top: 0em;
150 		margin-left: 0em;
151 		margin-bottom: 0.6em;
152 		vertical-align: top; }
153 .Bl-compact {	margin-top: 0em; }
154 .Bl-compact > dd {
155 		margin-bottom: 0em; }
156 .Bl-compact > dt {
157 		margin-top: 0em; }
158 
159 .Bl-column { }
160 .Bl-column > tbody > tr { }
161 .Bl-column > tbody > tr > td {
162 		margin-top: 1em; }
163 .Bl-compact > tbody > tr > td {
164 		margin-top: 0em; }
165 
166 .Rs {		font-style: normal;
167 		font-weight: normal; }
168 .RsA { }
169 .RsB {		font-style: italic;
170 		font-weight: normal; }
171 .RsC { }
172 .RsD { }
173 .RsI {		font-style: italic;
174 		font-weight: normal; }
175 .RsJ {		font-style: italic;
176 		font-weight: normal; }
177 .RsN { }
178 .RsO { }
179 .RsP { }
180 .RsQ { }
181 .RsR { }
182 .RsT {		text-decoration: underline; }
183 .RsU { }
184 .RsV { }
185 
186 .eqn { }
187 .tbl td {	vertical-align: middle; }
188 
189 .HP {		margin-left: 3.8em;
190 		text-indent: -3.8em; }
191 
192 /* Semantic markup for command line utilities. */
193 
194 table.Nm { }
195 code.Nm {	font-style: normal;
196 		font-weight: bold;
197 		font-family: inherit; }
198 .Fl {		font-style: normal;
199 		font-weight: bold;
200 		font-family: inherit; }
201 .Cm {		font-style: normal;
202 		font-weight: bold;
203 		font-family: inherit; }
204 .Ar {		font-style: italic;
205 		font-weight: normal; }
206 .Op {		display: inline flow; }
207 .Ic {		font-style: normal;
208 		font-weight: bold;
209 		font-family: inherit; }
210 .Ev {		font-style: normal;
211 		font-weight: normal;
212 		font-family: monospace; }
213 .Pa {		font-style: italic;
214 		font-weight: normal; }
215 
216 /* Semantic markup for function libraries. */
217 
218 .Lb { }
219 code.In {	font-style: normal;
220 		font-weight: bold;
221 		font-family: inherit; }
222 a.In { }
223 .Fd {		font-style: normal;
224 		font-weight: bold;
225 		font-family: inherit; }
226 .Ft {		font-style: italic;
227 		font-weight: normal; }
228 .Fn {		font-style: normal;
229 		font-weight: bold;
230 		font-family: inherit; }
231 .Fa {		font-style: italic;
232 		font-weight: normal; }
233 .Vt {		font-style: italic;
234 		font-weight: normal; }
235 .Va {		font-style: italic;
236 		font-weight: normal; }
237 .Dv {		font-style: normal;
238 		font-weight: normal;
239 		font-family: monospace; }
240 .Er {		font-style: normal;
241 		font-weight: normal;
242 		font-family: monospace; }
243 
244 /* Various semantic markup. */
245 
246 .An { }
247 .Lk { }
248 .Mt { }
249 .Cd {		font-style: normal;
250 		font-weight: bold;
251 		font-family: inherit; }
252 .Ad {		font-style: italic;
253 		font-weight: normal; }
254 .Ms {		font-style: normal;
255 		font-weight: bold; }
256 .St { }
257 .Ux { }
258 
259 /* Physical markup. */
260 
261 .Bf {		display: inline flow; }
262 .No {		font-style: normal;
263 		font-weight: normal; }
264 .Em {		font-style: italic;
265 		font-weight: normal; }
266 .Sy {		font-style: normal;
267 		font-weight: bold; }
268 .Li {		font-style: normal;
269 		font-weight: normal;
270 		font-family: monospace; }
271 
272 /* Tooltip support. */
273 
274 h2.Sh, h3.Ss {	position: relative; }
275 .An, .Ar, .Cd, .Cm, .Dv, .Em, .Er, .Ev, .Fa, .Fd, .Fl, .Fn, .Ft,
276 .Ic, code.In, .Lb, .Lk, .Ms, .Mt, .Nd, code.Nm, .Pa, .Rs,
277 .St, .Sx, .Sy, .Va, .Vt, .Xr {
278 		display: inline flow;
279 		position: relative; }
280 
281 .An::before {	content: "An"; }
282 .Ar::before {	content: "Ar"; }
283 .Cd::before {	content: "Cd"; }
284 .Cm::before {	content: "Cm"; }
285 .Dv::before {	content: "Dv"; }
286 .Em::before {	content: "Em"; }
287 .Er::before {	content: "Er"; }
288 .Ev::before {	content: "Ev"; }
289 .Fa::before {	content: "Fa"; }
290 .Fd::before {	content: "Fd"; }
291 .Fl::before {	content: "Fl"; }
292 .Fn::before {	content: "Fn"; }
293 .Ft::before {	content: "Ft"; }
294 .Ic::before {	content: "Ic"; }
295 code.In::before { content: "In"; }
296 .Lb::before {	content: "Lb"; }
297 .Lk::before {	content: "Lk"; }
298 .Ms::before {	content: "Ms"; }
299 .Mt::before {	content: "Mt"; }
300 .Nd::before {	content: "Nd"; }
301 code.Nm::before { content: "Nm"; }
302 .Pa::before {	content: "Pa"; }
303 .Rs::before {	content: "Rs"; }
304 h2.Sh::before {	content: "Sh"; }
305 h3.Ss::before {	content: "Ss"; }
306 .St::before {	content: "St"; }
307 .Sx::before {	content: "Sx"; }
308 .Sy::before {	content: "Sy"; }
309 .Va::before {	content: "Va"; }
310 .Vt::before {	content: "Vt"; }
311 .Xr::before {	content: "Xr"; }
312 
313 .An::before, .Ar::before, .Cd::before, .Cm::before,
314 .Dv::before, .Em::before, .Er::before, .Ev::before,
315 .Fa::before, .Fd::before, .Fl::before, .Fn::before, .Ft::before,
316 .Ic::before, code.In::before, .Lb::before, .Lk::before,
317 .Ms::before, .Mt::before, .Nd::before, code.Nm::before,
318 .Pa::before, .Rs::before,
319 h2.Sh::before, h3.Ss::before, .St::before, .Sx::before, .Sy::before,
320 .Va::before, .Vt::before, .Xr::before {
321 		opacity: 0;
322 		transition: .15s ease opacity;
323 		pointer-events: none;
324 		position: absolute;
325 		bottom: 100%;
326 		box-shadow: 0 0 .35em var(--fg);
327 		padding: .15em .25em;
328 		white-space: nowrap;
329 		font-family: Helvetica,Arial,sans-serif;
330 		font-style: normal;
331 		font-weight: bold;
332 		background: var(--bg);
333 		color: var(--fg); }
334 .An:hover::before, .Ar:hover::before, .Cd:hover::before, .Cm:hover::before,
335 .Dv:hover::before, .Em:hover::before, .Er:hover::before, .Ev:hover::before,
336 .Fa:hover::before, .Fd:hover::before, .Fl:hover::before, .Fn:hover::before,
337 .Ft:hover::before, .Ic:hover::before, code.In:hover::before,
338 .Lb:hover::before, .Lk:hover::before, .Ms:hover::before, .Mt:hover::before,
339 .Nd:hover::before, code.Nm:hover::before, .Pa:hover::before,
340 .Rs:hover::before, h2.Sh:hover::before, h3.Ss:hover::before, .St:hover::before,
341 .Sx:hover::before, .Sy:hover::before, .Va:hover::before, .Vt:hover::before,
342 .Xr:hover::before {
343 		opacity: 1;
344 		pointer-events: inherit; }
345 
346 /* Overrides to avoid excessive margins on small devices. */
347 
348 @media (max-width: 37.5em) {
349 main {		margin-left: 0.5em; }
350 h2.Sh, h3.Ss {	margin-left: 0em; }
351 .Bd-indent {	margin-left: 2em; }
352 .Bl-hang > dd {
353 		margin-left: 2em; }
354 .Bl-tag {	margin-left: 2em; }
355 .Bl-tag > dt {
356 		margin-left: -2em; }
357 .HP {		margin-left: 2em;
358 		text-indent: -2em; }
359 }
360 
361 /* Overrides for a dark color scheme for accessibility. */
362 
363 @media (prefers-color-scheme: dark) {
364 html {		--bg: #1E1F21;
365 		--fg: #EEEFF1; }
366 :link {		color: #BAD7FF; }
367 :visited {	color: #F6BAFF; }
368 }