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