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