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