1/** 2 * This contains the content styling 3 * @author Sascha Leib <sascha@leib.be> 4 */ 5 6body { 7 overflow: hidden auto; 8} 9 10main p, 11main blockquote, 12main div.table { 13 margin-bottom: 1em; 14} 15 16/* headlines: */ 17main h1, main h2, main h3, main h4, main h5, main h6 { 18 font-family: @ini_alt_fonts; 19 color: @ini_headlines; 20 margin: 1em 0 1em 0; 21 line-height: 1.1em; 22} 23 24main h1 { font-size: 2em; } 25main h2 { font-size: 1.5em; } 26main h3 { font-size: 1.125em; } 27main h4 { font-size: 1em; } 28main h5 { font-size: .875em; } 29main h6 { font-size: .75em; } 30 31main h1 *, main h2 *, main h3 *, main h4 *, main h5 *, main h6 * { 32 font-family: inherit; 33 font-size: inherit; 34 color: inherit; 35 margin: inherit; 36 line-height: inherit; 37} 38 39/* on the homepage only, reduce the H1 top margin: */ 40body.home h1:first-child { margin-top: .5em; } 41 42/* make strike-through and underline more useful! */ 43main u { 44 -webkit-text-decoration-color: #F30; 45 -webkit-text-decoration-line: underline; 46 -webkit-text-decoration-style: wavy; 47 -webkit-text-decoration-thickness: .7pt; 48 text-decoration: underline #F30 wavy .7pt; 49} 50main s, 51main del { 52 -webkit-text-decoration-color: rgba(255,0,0,.5); 53 -webkit-text-decoration-line: line-through; 54 -webkit-text-decoration-style: solid; 55 -webkit-text-decoration-thickness: .1em; 56 text-decoration: line-through rgba(255,0,0,.5) solid .1em; 57} 58 59/* lists: */ 60main ul, main ol { 61 margin: 0 2em 1em 1em; 62 padding-left: 1.75em; 63} 64main ul { list-style: square outside; } 65main ul ul { list-style-type: disc; } 66main ul ul ul { list-style-type: none; } 67main ul ul ul li {margin-left: 1em; } 68main ul ul ul li:before { display: block; content: '\2043'; text-align:center; float: left; width: 1em; margin-left: -1em; } 69main ul ul ul ul li:before { content: '\FE63' } 70main ul ul ul ul ul li:before { content: '\00B7' } 71 72/* numbered lists vary by nestling: */ 73main ol { list-style: decimal outside; } 74main ol ol { list-style-type: lower-alpha; } 75main ol ol ol { list-style-type: lower-roman; } 76main ol ol ol ol { list-style-type: lower-greek; } 77main ol ol ol ol ol { list-style-type: decimal-leading-zero; } 78main ul ul ul ol li { margin-left: 0; } 79main ul ul ul ol li:before { display: none; content: ''; } 80 81main li::marker { 82 color: #666; 83} 84 85main ul ul, main ul ol, 86main ol ul, main ol ol { 87 margin-bottom: 0; 88 padding-left: .25em; 89} 90 91/* horizontal rules */ 92main hr { 93 border: #666 solid 0; 94 border-top-width: 1pt; 95 height: 0; 96 margin: 3pt 0; 97} 98 99main tt, main blockquote tt, 100main pre, main pre *, 101main code, main code *, 102main blockquote code { 103 font-family: @ini_mono_fonts; 104} 105main code, main blockquote code { 106 border: @ini_border solid 1px; 107 border-radius: 3pt; 108 padding: 0 2pt; 109} 110main pre { 111 max-width: calc(@ini_site_width - @ini_sidebar_width - .5em); 112 overflow: auto; 113 word-wrap: normal; 114 border: 1px solid @ini_border; 115 border-radius: 2px; 116 box-shadow: inset 0 0 .5em @ini_border; 117 padding: .3em; 118} 119 120/* overwrite pre styling for CodeMirror plugin: */ 121main .CodeMirror pre { 122 max-width: 100%; 123} 124/* quotes: */ 125main blockquote { 126 border-left: @ini_blockquote solid .4em; 127 border-radius: .5em; 128 padding: .25em 0 .25em .75em; 129 margin: 0 2em 1em 1em; 130 font-family: @ini_alt_fonts; 131 font-size: 1.1rem; 132} 133main blockquote * { 134 font-family: @ini_alt_fonts; 135 font-size: 1.1rem; 136} 137 138main svg { 139 display: block; 140 fill-rule: evenodd; 141 clip-rule: evenodd; 142 stroke-linejoin: round; 143 stroke-miterlimit: 1.5; 144} 145main svg.math { 146 margin-left: 15px 147} 148 149/* tables */ 150main div.table { 151 overflow-x: auto; 152} 153 154main table { 155 border-collapse: collapse; 156 empty-cells: show; 157 border-spacing: 0; 158 font-size: smaller; 159 border: 1px solid @ini_border; 160 margin-bottom: 1em; 161} 162 163main table.inline { 164 min-width: 50%; 165} 166 167main table th, 168main table td { 169 padding: .5em .3em; 170 vertical-align: top; 171 border: 1px solid @ini_border; 172 line-height: 1.25em; 173} 174main table th { 175 font-weight: bold; 176 background-color: @ini_background_alt; 177 text-align: left; 178} 179 180main table.inline tr:hover td { 181 background-color: @ini_background_alt; 182} 183 184main table.inline tr:hover th { 185 background-color: @ini_border; 186} 187 188/* asides */ 189main aside { 190 border: @ini_border solid 1px; 191 background: @ini_background_site; 192 padding: .5em; 193} 194 195main aside > * { 196 margin: .25em 0; 197} 198main aside.float-left, 199main aside.float-right { 200 width: 50%; 201 max-width: 220px; 202 min-width: 150px; 203 font-size: smaller; 204 line-height: 1.5em; 205} 206main aside.float-left { 207 float: left; 208 margin-right: .5em; 209} 210main aside.float-right { 211 float: right; 212 margin-left: .5em; 213} 214main aside footer { 215 line-height: 1.1em; 216} 217 218/* images */ 219main img { 220 max-width: 100%; 221 height: auto; 222} 223 224/* extra styles for ad-hoc tags: */ 225main kbd { 226 padding: .15em .25em; 227 margin: 0 .1em; 228 font-size: 85%; 229 color: @ini_headlines; 230 border: @ini_border solid 1px; 231 border-radius: .25em; 232 display: inline-block; 233 white-space: nowrap; 234 line-height: 1.2em; 235 letter-spacing: .03em; 236} 237main kbd kbd { 238 background-color: @ini_background_alt; 239 -webkit-box-shadow: 0 .1em 0 rgba(0,0,0,0.25); 240 box-shadow: 0 .1em 0 rgba(0,0,0,0.25); 241} 242 243main samp { 244 background-color: @ini_background_alt; 245 font-family: @ini_mono_fonts; 246 white-space: nowrap; 247} 248main mark { 249 background-color: @ini_highlight; 250} 251 252/* tablet break point: */ 253@media (max-width: @ini_tablet_width) { 254 255 /* use hyphenation rules */ 256 main p { 257 hyphens: auto; 258 -webkit-hyphens: auto; 259 hyphenate-limit-chars: 6 2 3; 260 -ms-hyphenate-limit-chars: 6 2 3; 261 -webkit-hyphenate-limit-before: 2; 262 -webkit-hyphenate-limit-after: 3; 263 hyphenate-limit-lines: 3; 264 -ms-hyphenate-limit-lines: 3; 265 hyphenate-limit-last: always; 266 -ms-hyphenate-limit-last: always; 267 hyphenate-limit-zone: 8%; 268 -ms-hyphenate-limit-zone: 8%; 269 } 270} 271 272/* phone break point: */ 273@media (max-width: @ini_phone_width) { 274 275 .nophone, .wrap_nophone { 276 display: none !important; 277 } 278 279 main aside { 280 width: 100%; 281 max-width: initial; 282 float: none; 283 margin-left: 0; 284 } 285} 286 287/* dark mode overrides */ 288@media (prefers-color-scheme: dark) { 289 body.darkmode main h1, body.darkmode main h2, 290 body.darkmode main h3, body.darkmode main h4, 291 body.darkmode main h5, body.darkmode main h6 { color: @ini_headlines_dark; } 292 body.darkmode main table { border-color: @ini_border_dark; } 293 body.darkmode main table th { background-color: rgba(255,255,255,0.05); } 294 body.darkmode main table.inline tr:hover td, 295 body.darkmode #acl_manager table tr:hover { background-color: rgba(255,255,255,0.1); } 296 body.darkmode main code, main blockquote code { border-color: @ini_border_dark; } 297 body.darkmode main table.inline tr:hover th { background-color: @ini_border_dark; } 298 body.darkmode main blockquote { border-left-color: @ini_blockquote_dark } 299 300 body.darkmode main kbd {color: @ini_headlines_dark;border-color: @ini_border_dark;} 301 body.darkmode main kbd kbd {background-color: @ini_background_alt_dark;} 302 body.darkmode main samp {background-color: @ini_background_alt_dark;} 303 304 body.darkmode div.error {background-color: #4B2F36; color: #FFB3D2; border-color: #743E4C;} 305 body.darkmode div.success {background-color: #28381F; color: #FBE2A1; border-color: #37562E;} 306 body.darkmode div.notify {background-color: #42381F; color: #FCE2A1; border-color: #56562E;} 307 body.darkmode main pre {border-color: @ini_border_dark; box-shadow: inset 0 0 .5em @ini_background_site_dark;} 308 309 body.darkmode main aside {border-color: @ini_border_dark; background-color: @ini_background_site_dark;} 310 311 /* colour overrides for Wrap Plugin */ 312 body.darkmode .wrap_hi {background-color: @ini_highlight; color: #000;} 313 body.darkmode .wrap_box, body.darkmode .box {background-color: @ini_background_alt_dark; color: inherit;} 314 body.darkmode .wrap_tip {background-color: #47391B;} 315 body.darkmode .wrap_important {background-color: #603000;} 316 body.darkmode .wrap_alert, body.darkmode .wrap_danger {background-color: #4C0909;} 317 body.darkmode .wrap_help,body.darkmode .wrap_info {background-color: #112847;} 318 body.darkmode .wrap_download, body.darkmode .wrap_safety {background-color: #1C3802;} 319 body.darkmode .wrap_todo, body.darkmode .wrap_notice {background-color: #004A7F;} 320 body.darkmode .wrap_caution {background-color: #fcffaa;} 321 body.darkmode .wrap_warning {background-color: #FFC9AA;} 322 323} 324 325