1/** 2 * This contains the content styling 3 * @author Sascha Leib <sascha@leib.be> 4 */ 5 6body { 7 overflow: hidden auto; 8} 9 10.dokuwiki main { 11 p, 12 blockquote, 13 div.table { 14 margin-bottom: .5em; 15 margin-top: .5em; 16 } 17 18/* headlines: */ 19 h1, h2, h3, h4, h5, h6 { 20 font-family: @ini_headline_fonts; 21 color: @ini_headlines; 22 margin: 1em 0 1em 0; 23 line-height: 1.1em; 24 } 25 h1 { font-size: 2em; } 26 h2 { font-size: 1.5em; } 27 h3 { font-size: 1.125em; } 28 h4 { font-size: 1em; } 29 h5 { font-size: .875em; } 30 h6 { font-size: .75em; } 31 h1 *, h2 *, h3 *, h4 *, h5 *, h6 * { 32 font-family: inherit; 33 font-size: inherit; 34 color: inherit; 35 margin: inherit; 36 line-height: inherit; 37 } 38 /* Definition Terms are like Headlines in many ways */ 39 dl dt { 40 font-family: @ini_headline_fonts; 41 color: @ini_headlines; 42 } 43 dl.compact dl { /* except in compact mode */ 44 font-weight: 600; 45 font-family: inherit; 46 color: inherit; 47 } 48 49 /* make strike-through and underline more useful! */ 50 u { 51 -webkit-text-decoration-color: #F30; 52 -webkit-text-decoration-line: underline; 53 -webkit-text-decoration-style: wavy; 54 -webkit-text-decoration-thickness: .7pt; 55 text-decoration: underline #F30 wavy .7pt; 56 } 57 s, del { 58 -webkit-text-decoration-color: rgba(255,0,0,.5); 59 -webkit-text-decoration-line: line-through; 60 -webkit-text-decoration-style: solid; 61 -webkit-text-decoration-thickness: .1em; 62 text-decoration: line-through rgba(255,0,0,.5) solid .1em; 63 } 64 65 /* subscript and superscript */ 66 sup, sub { 67 line-height: 1; 68 font-size: .6em; 69 font-weight: 600; 70 margin: 0 .1em; 71 } 72 sup { 73 vertical-align: .5em; 74 } 75 sub { 76 vertical-align: -.15em; 77 } 78 79 /* lists: */ 80 ul, ol { 81 margin: 0 2em 1em 1em; 82 padding-left: 1.75em; 83 } 84 ul { list-style: square outside; } 85 ul ul { list-style-type: disc; } 86 ul ul ul { list-style-type: none; } 87 ul ul ul li {margin-left: 1em; } 88 ul ul ul li:before { display: block; content: '\2043'; text-align:center; float: left; width: 1em; margin-left: -1em; } 89 ul ul ul ul li:before { content: '\FE63' } 90 ul ul ul ul ul li:before { content: '\00B7' } 91 92 /* numbered lists vary by nestling: */ 93 ol { list-style: decimal outside; } 94 ol ol { list-style-type: lower-alpha; } 95 ol ol ol { list-style-type: lower-roman; } 96 ol ol ol ol { list-style-type: lower-greek; } 97 ol ol ol ol ol { list-style-type: decimal-leading-zero; font-size: .96em;} 98 ol ol ol ol ol ol { list-style-type: upper-alpha; font-size: .96em;} 99 ul ul ul ol li { margin-left: 0; } 100 ul ul ul ol li:before { display: none; content: ''; } 101 102 li::marker { 103 color: #666; 104 } 105 106 ul ul, ul ol, 107 ol ul, ol ol { 108 margin-bottom: 0; 109 padding-left: .25em; 110 } 111 112 /* horizontal rules */ 113 hr { 114 border: #666 solid 0; 115 border-top-width: 1pt; 116 height: 0; 117 margin: 3pt 0; 118 } 119 120 tt, blockquote tt, 121 pre, pre *, 122 code, code *, 123 blockquote code { 124 font-family: @ini_mono_fonts; 125 } 126 code, blockquote code { 127 border: @ini_border solid 1px; 128 border-radius: 3pt; 129 padding: 0 2pt; 130 } 131 pre { 132 overflow-x: auto; 133 white-space: pre-wrap; 134 word-wrap: normal; 135 border: 1px solid @ini_border; 136 border-radius: 2px; 137 box-shadow: inset 0 0 .5em @ini_border; 138 padding: .3em; 139 font-variant-numeric: slashed-zero; 140 } 141 142 /* overwrite pre styling for CodeMirror plugin: */ 143 .CodeMirror pre { 144 max-width: 100%; 145 } 146 /* quotes: */ 147 blockquote { 148 border: @ini_blockquote solid 0; 149 border-width: 0 0 0 .4em; 150 border-radius: .5em; 151 padding: .25em 0 .25em .75em; 152 margin: 0 2em 1em 1em; 153 font-family: @ini_alt_fonts; 154 font-size: @ini_alt_font_size; 155 hanging-punctuation: first allow-end; 156 } 157 blockquote * { 158 font-family: @ini_alt_fonts; 159 } 160 161 svg { 162 display: block; 163 fill-rule: evenodd; 164 clip-rule: evenodd; 165 stroke-linejoin: round; 166 stroke-miterlimit: 1.5; 167 } 168 svg.math { 169 margin-left: 15px 170 } 171 172 /* tables */ 173 div.table { 174 overflow-x: auto; 175 } 176 table { 177 & { 178 border-collapse: collapse; 179 empty-cells: show; 180 border-spacing: 0; 181 font-size: smaller; 182 border: 1px solid @ini_border; 183 margin-bottom: 1em; 184 } 185 th, td { 186 padding: .5em .3em; 187 vertical-align: top; 188 border: 1px solid @ini_border; 189 line-height: 1.25em; 190 } 191 th.centeralign, td.centeralign { 192 text-align: center; 193 } 194 th.rightalign, td.rightalign { 195 text-align: right; 196 } 197 th { 198 font-weight: bold; 199 background-color: @ini_background_alt; 200 text-align: left; 201 } 202 &.inline { 203 min-width: 50%; 204 margin-bottom: 0; 205 } 206 &.inline tr:hover td { 207 background-color: @ini_background_alt; 208 } 209 &.inline tr:hover th { 210 background-color: @ini_border; 211 } 212 } 213 214 /* asides */ 215 aside { 216 & > * { 217 margin: .25em 0; 218 } 219 &.float-left, &.float-right { 220 width: 50%; 221 max-width: 220px; 222 min-width: 150px; 223 font-size: smaller; 224 line-height: 1.5em; 225 } 226 &.float-left { 227 clear: left; 228 float: left; 229 margin-right: .5em; 230 } 231 &.float-right { 232 clear: right; 233 float: right; 234 margin-left: .5em; 235 } 236 & footer { 237 line-height: 1.1em; 238 } 239 } 240 241 /* images */ 242 img { 243 max-width: 100%; 244 height: auto; 245 } 246 247 /* abbbreviations a reslightly widened and made smaller */ 248 abbr { 249 letter-spacing: .01em; 250 font-size: 97%; 251 } 252 253 /* extra styles for ad-hoc tags: */ 254 kbd { 255 padding: .15em .25em; 256 margin: 0 .1em; 257 font-size: 85%; 258 color: @ini_headlines; 259 border: @ini_border solid 1px; 260 border-radius: .25em; 261 display: inline-block; 262 white-space: nowrap; 263 line-height: 1.2em; 264 letter-spacing: .03em; 265 } 266 kbd kbd { 267 background-color: @ini_background_alt; 268 -webkit-box-shadow: 0 .1em 0 rgba(0,0,0,0.25); 269 box-shadow: 0 .1em 0 rgba(0,0,0,0.25); 270 font-weight: bold; 271 } 272 samp { 273 background-color: @ini_background_alt; 274 font-family: @ini_mono_fonts; 275 white-space: nowrap; 276 } 277 mark { 278 background-color: @ini_highlight; 279 } 280 281 /* box / notification classes */ 282 .box, .wrap_box, 283 .outline, .wrap_outline { 284 padding: 1pt .5em; 285 margin: .5em 0; 286 } 287 .box, .wrap_box { 288 background-color: @ini_background_alt; 289 } 290 .rounded, .wrap_rounded { 291 border-radius: .5em; 292 } 293 294 /* hyphenation only in the main-content */ 295 p, li { 296 word-wrap: break-word; 297 overflow-wrap: break-word; 298 hyphens: auto; 299 -ms-hyphens: auto; 300 -moz-hyphens: auto; 301 -webkit-hyphens: auto; 302 hyphenate-limit-chars: 6 2 3; 303 } 304 305 /* footnotes section */ 306 div.footnotes { 307 border-top: transparent 0 none; 308 margin-top: 1.5em; 309 font-size: smaller; 310 } 311 div.footnotes:before { 312 content: ' '; 313 display: block; 314 width: 33%; 315 min-width: 5em; 316 border-top: @ini_border solid 1.5pt; 317 height: .5em; 318 } 319 div.footnotes div.fn { 320 margin-left: 1em; 321 } 322} 323 324/* footnotes and similar poups: */ 325.JSpopup { 326 background-color: @ini_background; 327 color: @ini_text; 328 border: @ini_border solid 1px; 329 padding: .25em; 330 box-shadow: 2px 2px 4px rgba(0, 0, 0, .5); 331} 332 333 334/* on the homepage only, reduce the H1 top margin: */ 335body.home h1:first-child { margin-top: .5em; } 336 337 338[dir=rtl] { 339 main { 340 blockquote { 341 border-width: 0 .4em 0 0; 342 padding: .25em .75em .25em 0; 343 margin: 0 1em 1em 2em; 344 } 345 346 ul, ol { 347 margin-left: 0; 348 margin-right: .5em; 349 padding-left: 0; 350 padding-right: .25em; 351 } 352 ul li, ol li { 353 width: 100%; 354 } 355 356 ul ul ul li:before { 357 float: right; 358 margin-left: 0; 359 margin-right: -1em; 360 } 361 362 } 363} 364 365/* tablet break point: */ 366@media (max-width: @ini_tablet_width) { 367 368 /* tighter hyphenation for narrower screens */ 369 #main-content p, #main-content li { 370 hyphenate-limit-chars: 5 2 2; 371 } 372} 373 374/* phone break point: */ 375@media (max-width: @ini_phone_width) { 376 377 .nophone, .wrap_nophone { 378 display: none !important; 379 } 380 381 main aside { 382 width: 100%; 383 max-width: initial; 384 float: none; 385 margin-left: 0; 386 } 387} 388 389/* dark mode overrides */ 390@media (prefers-color-scheme: dark) { 391 392 body.darkmode { 393 main { 394 h1, h2, h3, h4, h5, h6, dt { color: @ini_headlines_dark; } 395 table { 396 & { border-color: @ini_border_dark; } 397 &.inline tr:hover td, 398 &.inline tr:hover th { background-color: @ini_border_dark; } 399 th { background-color: rgba(255,255,255,0.05); } 400 } 401 #acl_manager table tr:hover { background-color: rgba(255,255,255,0.1); } 402 code, 403 blockquote { border-color: @ini_blockquote_dark } 404 blockquote code { border-color: @ini_border_dark; } 405 kbd {color: @ini_headlines_dark;border-color: @ini_border_dark;} 406 kbd kbd {background-color: @ini_background_alt_dark;} 407 samp {background-color: @ini_background_alt_dark;} 408 pre {border-color: @ini_border_dark; box-shadow: inset 0 0 .5em @ini_background_site_dark;} 409 dl dt { color: @ini_headlines_dark; } 410 411 /* overrides for PRE blocks: */ 412 pre.code { 413 .me1 {color: #3C3;} 414 .kw2 {color: #0C7;} 415 .kw3 {color: #0CF;} 416 } 417 418 div.error {background-color: #4B2F36; color: #FFB3D2; border-color: #743E4C;} 419 div.success {background-color: #28381F; color: #FBE2A1; border-color: #37562E;} 420 div.notify {background-color: #42381F; color: #FCE2A1; border-color: #56562E;} 421 422 /* colour overrides for Wrap Plugin */ 423 .wrap_hi {background-color: @ini_highlight; color: #000;} 424 .wrap_box, .box {background-color: @ini_background_alt_dark; color: inherit;} 425 .wrap_outline, .outline {border-color: @ini_border_dark; color: inherit} 426 .red, .wrap_red { color: #E53935; } 427 .green, .wrap_green { color: #00E676; } 428 .wrap_tip {background-color: #47391B;} 429 .wrap_important {background-color: #603000;} 430 .wrap_alert, .wrap_danger {background-color: #4C0909;} 431 .wrap_help, .wrap_info {background-color: #112847;} 432 .wrap_download, .wrap_safety {background-color: #1C3802;} 433 .wrap_todo, .wrap_notice {background-color: #004A7F;} 434 .wrap_caution {background-color: #fcffaa;} 435 .wrap_warning {background-color: #FFC9AA;} 436 437 /* MathML fixes */ 438 merror { background-color: @ini_highlight; color: red; } 439 440 } 441 442 /* footnote and similar poups: */ 443 .JSpopup { 444 background-color: @ini_background_site_dark; 445 color: @ini_text_dark; 446 border-color: @ini_border_dark; 447 box-shadow: 2px 2px 4px #000; 448 } 449 } 450} 451 452