Annotation of mandoc/mandoc.css, Revision 1.52
1.52 ! schwarze 1: /* $Id: mandoc.css,v 1.51 2022/07/05 21:25:29 schwarze Exp $ */
1.1 schwarze 2: /*
1.3 schwarze 3: * Standard style sheet for mandoc(1) -Thtml and man.cgi(8).
1.39 schwarze 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.
1.1 schwarze 9: */
10:
1.3 schwarze 11: /* Global defaults. */
12:
1.46 schwarze 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; }
1.52 ! schwarze 19: h1, h2 { font-size: 110%; }
1.13 schwarze 20: table { margin-top: 0em;
1.40 schwarze 21: margin-bottom: 0em;
22: border-collapse: collapse; }
1.41 schwarze 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; }
1.42 schwarze 27: td { vertical-align: top;
1.40 schwarze 28: padding-left: 0.2em;
1.41 schwarze 29: padding-right: 0.2em;
30: border-color: inherit; }
1.12 schwarze 31: ul, ol, dl { margin-top: 0em;
32: margin-bottom: 0em; }
33: li, dt { margin-top: 1em; }
1.48 schwarze 34: pre { font-family: inherit; }
1.18 schwarze 35:
1.36 schwarze 36: .permalink { border-bottom: thin dotted;
1.18 schwarze 37: color: inherit;
38: font: inherit;
39: text-decoration: inherit; }
1.22 schwarze 40: * { clear: both }
1.3 schwarze 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:
1.11 schwarze 50: table.results { margin-top: 1em;
1.3 schwarze 51: margin-left: 2em;
52: font-size: smaller; }
53:
1.4 schwarze 54: /* Header and footer lines. */
55:
1.51 schwarze 56: div[role=doc-pageheader] {
57: display: flex;
1.13 schwarze 58: border-bottom: 1px dotted #808080;
1.4 schwarze 59: margin-bottom: 1em;
60: font-size: smaller; }
1.51 schwarze 61: .head-ltitle { flex: 1; }
62: .head-vol { flex: 0 1 auto;
63: text-align: center; }
64: .head-rtitle { flex: 1;
1.4 schwarze 65: text-align: right; }
66:
1.51 schwarze 67: div[role=doc-pagefooter] {
68: display: flex;
69: justify-content: space-between;
1.13 schwarze 70: border-top: 1px dotted #808080;
1.4 schwarze 71: margin-top: 1em;
72: font-size: smaller; }
1.51 schwarze 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; }
1.4 schwarze 78:
1.5 schwarze 79: /* Sections and paragraphs. */
80:
1.50 schwarze 81: main { margin-left: 3.8em; }
1.44 schwarze 82: .Nd { }
1.45 schwarze 83: section.Sh { }
1.52 ! schwarze 84: h2.Sh { margin-top: 1.2em;
1.35 schwarze 85: margin-bottom: 0.6em;
1.46 schwarze 86: margin-left: -3.2em; }
1.45 schwarze 87: section.Ss { }
1.52 ! schwarze 88: h3.Ss { margin-top: 1.2em;
1.35 schwarze 89: margin-bottom: 0.6em;
1.30 schwarze 90: margin-left: -1.2em;
1.5 schwarze 91: font-size: 105%; }
1.35 schwarze 92: .Pp { margin: 0.6em 0em; }
1.32 schwarze 93: .Sx { }
94: .Xr { }
1.3 schwarze 95:
1.7 schwarze 96: /* Displays and lists. */
97:
1.32 schwarze 98: .Bd { }
1.33 schwarze 99: .Bd-indent { margin-left: 3.8em; }
1.7 schwarze 100:
1.36 schwarze 101: .Bl-bullet { list-style-type: disc;
1.8 schwarze 102: padding-left: 1em; }
1.36 schwarze 103: .Bl-bullet > li { }
104: .Bl-dash { list-style-type: none;
1.8 schwarze 105: padding-left: 0em; }
1.36 schwarze 106: .Bl-dash > li:before {
1.8 schwarze 107: content: "\2014 "; }
1.36 schwarze 108: .Bl-item { list-style-type: none;
1.8 schwarze 109: padding-left: 0em; }
1.36 schwarze 110: .Bl-item > li { }
111: .Bl-compact > li {
1.30 schwarze 112: margin-top: 0em; }
1.8 schwarze 113:
1.36 schwarze 114: .Bl-enum { padding-left: 2em; }
115: .Bl-enum > li { }
116: .Bl-compact > li {
1.30 schwarze 117: margin-top: 0em; }
1.8 schwarze 118:
1.36 schwarze 119: .Bl-diag { }
120: .Bl-diag > dt {
1.25 schwarze 121: font-style: normal;
122: font-weight: bold; }
1.36 schwarze 123: .Bl-diag > dd {
1.30 schwarze 124: margin-left: 0em; }
1.36 schwarze 125: .Bl-hang { }
126: .Bl-hang > dt { }
127: .Bl-hang > dd {
1.30 schwarze 128: margin-left: 5.5em; }
1.36 schwarze 129: .Bl-inset { }
130: .Bl-inset > dt { }
131: .Bl-inset > dd {
1.30 schwarze 132: margin-left: 0em; }
1.36 schwarze 133: .Bl-ohang { }
134: .Bl-ohang > dt { }
135: .Bl-ohang > dd {
1.30 schwarze 136: margin-left: 0em; }
1.43 schwarze 137: .Bl-tag { margin-top: 0.6em;
138: margin-left: 5.5em; }
1.36 schwarze 139: .Bl-tag > dt {
1.25 schwarze 140: float: left;
1.30 schwarze 141: margin-top: 0em;
142: margin-left: -5.5em;
1.37 schwarze 143: padding-right: 0.5em;
1.14 schwarze 144: vertical-align: top; }
1.36 schwarze 145: .Bl-tag > dd {
1.25 schwarze 146: clear: right;
1.47 schwarze 147: column-count: 1; /* Force block formatting context. */
1.22 schwarze 148: width: 100%;
1.30 schwarze 149: margin-top: 0em;
150: margin-left: 0em;
1.43 schwarze 151: margin-bottom: 0.6em;
1.47 schwarze 152: vertical-align: top; }
1.43 schwarze 153: .Bl-compact { margin-top: 0em; }
154: .Bl-compact > dd {
155: margin-bottom: 0em; }
1.36 schwarze 156: .Bl-compact > dt {
1.30 schwarze 157: margin-top: 0em; }
1.8 schwarze 158:
1.36 schwarze 159: .Bl-column { }
160: .Bl-column > tbody > tr { }
161: .Bl-column > tbody > tr > td {
1.25 schwarze 162: margin-top: 1em; }
1.36 schwarze 163: .Bl-compact > tbody > tr > td {
1.30 schwarze 164: margin-top: 0em; }
1.8 schwarze 165:
1.32 schwarze 166: .Rs { font-style: normal;
1.15 schwarze 167: font-weight: normal; }
1.32 schwarze 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 { }
1.9 schwarze 185:
1.32 schwarze 186: .eqn { }
1.42 schwarze 187: .tbl td { vertical-align: middle; }
1.11 schwarze 188:
1.34 schwarze 189: .HP { margin-left: 3.8em;
190: text-indent: -3.8em; }
191:
1.10 schwarze 192: /* Semantic markup for command line utilities. */
193:
194: table.Nm { }
1.24 schwarze 195: code.Nm { font-style: normal;
196: font-weight: bold;
197: font-family: inherit; }
1.32 schwarze 198: .Fl { font-style: normal;
1.24 schwarze 199: font-weight: bold;
200: font-family: inherit; }
1.32 schwarze 201: .Cm { font-style: normal;
1.24 schwarze 202: font-weight: bold;
203: font-family: inherit; }
1.32 schwarze 204: .Ar { font-style: italic;
1.16 schwarze 205: font-weight: normal; }
1.49 schwarze 206: .Op { display: inline flow; }
1.32 schwarze 207: .Ic { font-style: normal;
1.24 schwarze 208: font-weight: bold;
209: font-family: inherit; }
1.32 schwarze 210: .Ev { font-style: normal;
1.10 schwarze 211: font-weight: normal;
212: font-family: monospace; }
1.32 schwarze 213: .Pa { font-style: italic;
1.27 schwarze 214: font-weight: normal; }
1.10 schwarze 215:
216: /* Semantic markup for function libraries. */
217:
1.32 schwarze 218: .Lb { }
1.24 schwarze 219: code.In { font-style: normal;
220: font-weight: bold;
221: font-family: inherit; }
1.10 schwarze 222: a.In { }
1.32 schwarze 223: .Fd { font-style: normal;
1.24 schwarze 224: font-weight: bold;
225: font-family: inherit; }
1.32 schwarze 226: .Ft { font-style: italic;
1.16 schwarze 227: font-weight: normal; }
1.32 schwarze 228: .Fn { font-style: normal;
1.24 schwarze 229: font-weight: bold;
230: font-family: inherit; }
1.32 schwarze 231: .Fa { font-style: italic;
1.16 schwarze 232: font-weight: normal; }
1.32 schwarze 233: .Vt { font-style: italic;
1.16 schwarze 234: font-weight: normal; }
1.32 schwarze 235: .Va { font-style: italic;
1.16 schwarze 236: font-weight: normal; }
1.32 schwarze 237: .Dv { font-style: normal;
1.10 schwarze 238: font-weight: normal;
239: font-family: monospace; }
1.32 schwarze 240: .Er { font-style: normal;
1.10 schwarze 241: font-weight: normal;
242: font-family: monospace; }
243:
244: /* Various semantic markup. */
245:
1.32 schwarze 246: .An { }
247: .Lk { }
248: .Mt { }
249: .Cd { font-style: normal;
1.24 schwarze 250: font-weight: bold;
251: font-family: inherit; }
1.32 schwarze 252: .Ad { font-style: italic;
1.28 schwarze 253: font-weight: normal; }
1.32 schwarze 254: .Ms { font-style: normal;
1.29 schwarze 255: font-weight: bold; }
1.32 schwarze 256: .St { }
257: .Ux { }
1.10 schwarze 258:
1.11 schwarze 259: /* Physical markup. */
1.7 schwarze 260:
1.49 schwarze 261: .Bf { display: inline flow; }
1.11 schwarze 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; }
1.7 schwarze 268: .Li { font-style: normal;
269: font-weight: normal;
270: font-family: monospace; }
1.44 schwarze 271:
272: /* Tooltip support. */
273:
1.52 ! schwarze 274: h2.Sh, h3.Ss { position: relative; }
1.44 schwarze 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 {
1.49 schwarze 278: display: inline flow;
1.44 schwarze 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"; }
1.52 ! schwarze 304: h2.Sh::before { content: "Sh"; }
! 305: h3.Ss::before { content: "Ss"; }
1.44 schwarze 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,
1.52 ! schwarze 319: h2.Sh::before, h3.Ss::before, .St::before, .Sx::before, .Sy::before,
1.44 schwarze 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%;
1.46 schwarze 326: box-shadow: 0 0 .35em var(--fg);
1.44 schwarze 327: padding: .15em .25em;
328: white-space: nowrap;
329: font-family: Helvetica,Arial,sans-serif;
330: font-style: normal;
331: font-weight: bold;
1.46 schwarze 332: background: var(--bg);
333: color: var(--fg); }
1.44 schwarze 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,
1.52 ! schwarze 340: .Rs:hover::before, h2.Sh:hover::before, h3.Ss:hover::before, .St:hover::before,
1.44 schwarze 341: .Sx:hover::before, .Sy:hover::before, .Va:hover::before, .Vt:hover::before,
342: .Xr:hover::before {
343: opacity: 1;
344: pointer-events: inherit; }
1.31 schwarze 345:
346: /* Overrides to avoid excessive margins on small devices. */
347:
348: @media (max-width: 37.5em) {
1.50 schwarze 349: main { margin-left: 0.5em; }
1.52 ! schwarze 350: h2.Sh, h3.Ss { margin-left: 0em; }
1.33 schwarze 351: .Bd-indent { margin-left: 2em; }
1.36 schwarze 352: .Bl-hang > dd {
1.31 schwarze 353: margin-left: 2em; }
1.36 schwarze 354: .Bl-tag { margin-left: 2em; }
355: .Bl-tag > dt {
1.31 schwarze 356: margin-left: -2em; }
1.34 schwarze 357: .HP { margin-left: 2em;
358: text-indent: -2em; }
1.46 schwarze 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; }
1.31 schwarze 368: }
CVSweb
![[BACK]](/cvsweb/icons/back.gif){kind=icon}
Return to mandoc.css CVS log ![[TXT]](/cvsweb/icons/text.gif){kind=icon}
![[DIR]](/cvsweb/icons/dir.gif){kind=icon}
Up to [cvsweb.bsd.lv] / mandoc