1/** 2 * This file provides the main design styles 3 * across all template elements (typo, colors etc.) 4 */ 5 6 7html, body { 8 background-color: @ini_background_site; 9} 10 11/* highlight selected tool */ 12.mode_admin a.action.admin, 13.mode_login a.action.login, 14.mode_register a.action.register, 15.mode_profile a.action.profile, 16.mode_recent a.action.recent, 17.mode_index a.action.index, 18.mode_media a.action.media, 19.mode_revisions a.action.revs, 20.mode_backlink a.action.backlink, 21.mode_subscribe a.action.subscribe { 22 font-weight: bold; 23} 24 25.dokuwiki { 26 .page ol li, 27 .page ul li, 28 .aside ul li { 29 color: @ini_text; 30 } 31 32 .pageId { 33 float: right; 34 margin-right: -1em; 35 margin-bottom: -1px; 36 margin-top: -1.5em; 37 overflow: hidden; 38 padding: 0.5em 1em 0; 39 40 span { 41 font-size: @font-size-small; 42 border: solid @ini_background_alt; 43 border-width: 1px 1px 0; 44 background-color: @ini_background_site; 45 color: @ini_text_alt; 46 padding: .1em .35em; 47 border-top-left-radius: 2px; 48 border-top-right-radius: 2px; 49 box-shadow: 0 0 .5em @ini_text_alt; 50 display: block; 51 } 52 } 53 54 div.page { 55 clear: both; 56 overflow: hidden; 57 word-wrap: break-word; 58 background: @ini_background; 59 color: inherit; 60 padding: @page_padding-top @margin-default @margin-default; 61 62 @media @screen_max-md { 63 padding-right: (@margin-default * 1.6); 64 } 65 66 @media @screen_max-xs { 67 padding-left: @margin-small; 68 } 69 70 @media @screen_max-xxs { 71 padding-right: @margin-small; 72 } 73 } 74 75 .content #dokuwiki__pagetools { 76 @media @screen_max-md { 77 top: 4rem; 78 } 79 } 80 81 .docInfo { 82 font-size: @font-size-small; 83 text-align: right; 84 } 85 86 /* license note under edit window */ 87 div.license { 88 font-size: @font-size-small; 89 line-height: @line-height-default; 90 padding-top: 1rem; 91 92 @media @screen_max-lg { 93 font-size: @font-size-default; 94 } 95 96 @media @screen_max-md { 97 font-size: @font-size-small; 98 } 99 100 * { 101 font-size: inherit; 102 } 103 } 104 105 [dir=rtl] & .docInfo { 106 text-align: left; 107 } 108 109 [dir=rtl] & .pageId { 110 float: left; 111 margin-left: -1em; 112 margin-right: 0; 113 } 114} 115 116caption, 117figcaption, 118summary, 119legend { 120 padding: 0; 121 margin: 0 0 .35em; 122 line-height: 1.2; 123} 124 125h1, 126h2, 127h3, 128h4, 129h5, 130h6 { 131 font-weight: bold; 132 padding: 0; 133 line-height: 1.2; 134 clear: both; 135} 136 137[dir=rtl] h1, 138[dir=rtl] h2, 139[dir=rtl] h3, 140[dir=rtl] h4, 141[dir=rtl] h5, 142[dir=rtl] h6 { 143 clear: right; 144} 145 146h1 { 147 font-size: @font-size-head1; 148 margin: 0 0 @font-size-head1; 149 padding-top: 1em; 150} 151 152h2 { 153 font-size: @font-size-head2; 154 margin: 0 0 @font-size-head2; 155 padding-top: (@font-size-head2 / 2); 156} 157 158h3 { 159 font-size: @font-size-head3; 160 margin: 0 0 @font-size-head3; 161 padding-top: (@font-size-head3 / 2); 162} 163 164h4 { 165 font-size: @font-size-head4; 166 margin: 0 0 @font-size-head4; 167 padding-top: (@font-size-head4 / 2); 168} 169 170h5 { 171 font-size: @font-size-head5; 172 margin: 0 0 @font-size-head5; 173 padding-top: (@font-size-head5 / 2); 174} 175 176h6 { 177 font-size: @font-size-head6; 178 font-weight: @font-weight-bold; 179 margin: 0 0 @font-size-head6; 180 padding-top: (@font-size-head6 / 2); 181} 182 183p { 184 font-size: @font-size-default; 185 line-height: @line-height-big; 186 187 a, 188 span, 189 strong { 190 font-size: inherit; 191 } 192} 193 194label, 195legend, 196button { 197 font-size: @font-size-default; 198 199 a, 200 span, 201 strong { 202 font-size: inherit; 203 } 204} 205 206hr, 207figure, 208details, 209address { 210 font-size: @font-size-default; 211 line-height: 140%; 212} 213 214p, 215ul, 216ol, 217dl, 218pre, 219table, 220hr, 221blockquote, 222figure, 223details, 224fieldset, 225address { 226 margin: 0 0 1.4em; /* bottom margin = line-height */ 227 padding: 0; 228} 229 230div, 231video, 232audio { 233 margin: 0; 234 padding: 0; 235} 236 237small, 238.code { 239 font-size: @font-size-small; 240} 241 242.code { 243 margin-top: @grid; 244 245 // SPR-926: darker colors for accessibility 246 .es6 { 247 color: #00832B; 248 } 249 250 .kw5 { 251 color: #005D00; 252 } 253 254 .kw6 { 255 color: #DC0075; 256 } 257 258 .nu0 { 259 color: #A74DA7; 260 } 261 262 .re3 { 263 color: #DE1B1B; 264 } 265 266 .re4 { 267 color: #007F6F; 268 } 269 270 .br0, .sy0 { 271 color: #248124; 272 } 273 274 .co1, .coMULTI, .sc-1 { 275 color: #707070; 276 } 277 278 .co2, .sy1 { 279 color: #108400; 280 } 281 282 .co3, .sy4 { 283 color: #008070; 284 } 285 286 .kw1, .kw8 { 287 color: #747400; 288 } 289 290 .re1, .st0, .st_h { 291 color: #DD0000; 292 } 293} 294 295/* + + + lists + + + */ 296ul, 297ol { 298 font-size: @font-size-default; 299 line-height: 140%; 300 padding: 0 0 0 1.5em; 301} 302 303[dir=rtl] ul, 304[dir=rtl] ol { 305 padding: 0 1.5em 0 0; 306} 307 308li, 309dd { 310 padding: 0; 311 margin: 0 0 0 1.5em; 312} 313 314[dir=rtl] li, 315[dir=rtl] dd { 316 margin: 0 1.5em 0 0; 317} 318 319dl { 320 font-size: @font-size-default; 321 line-height: 140%; 322} 323 324dt, 325dd { 326 line-height: inherit; 327} 328 329dt { 330 font-weight: bold; 331 margin: 0; 332 padding: 0; 333} 334 335li ul, 336li ol, 337li dl, 338dl ul, 339dl ol, 340dl dl { 341 margin-bottom: 0; 342 padding: 0; 343} 344 345li li { 346 font-size: 100%; 347} 348 349ul { 350 list-style: square outside; 351} 352 353ol { 354 list-style: decimal outside; 355} 356 357ol ol { 358 list-style-type: lower-alpha; 359} 360 361ol ol ol { 362 list-style-type: upper-roman; 363} 364 365ol ol ol ol { 366 list-style-type: upper-alpha; 367} 368 369ol ol ol ol ol { 370 list-style-type: lower-roman; 371} 372 373/* + + + tables + + + */ 374.dokuwiki { 375 table.inline tr:hover { 376 th { 377 background-color: fade(@ini_background_alt, 50%); 378 } 379 380 td { 381 background-color: fade(@ini_background_alt, 80%); 382 color: @ini_text_alt; 383 384 *:not(button,a) { 385 color: @ini_text_alt; 386 } 387 } 388 } 389} 390 391table { 392 border-collapse: collapse; 393 empty-cells: show; 394 border-spacing: 0; 395 border: 1px solid @ini_border; 396 font-size: @font-size-default; 397 line-height: 140%; 398} 399 400caption { 401 caption-side: top; 402 text-align: left; 403} 404 405[dir=rtl] caption { 406 text-align: right; 407} 408 409th, 410td { 411 padding: .3em .5em; 412 margin: 0; 413 vertical-align: top; 414 border: 1px solid @ini_border; 415} 416 417th { 418 font-weight: bold; 419 background-color: @ini_background_alt; 420 color: @ini_text_alt; 421 text-align: left; 422 423 a { 424 color: @ini_link_alt; 425 } 426} 427 428[dir=rtl] th { 429 text-align: right; 430} 431 432a { 433 outline: none; 434 435 &:link, 436 &:visited { 437 text-decoration: none; 438 color: @ini_link; // links to non wikipages (external links) 439 } 440 441 &:hover, 442 &:focus, 443 &:active { 444 text-decoration: underline; 445 } 446} 447 448img { 449 display: inline-block; 450 border-width: 0; 451 vertical-align: middle; 452 color: #666; 453 background-color: transparent; 454 font-style: italic; 455 height: auto; 456} 457 458img, 459object, 460embed, 461iframe, 462video, 463audio { 464 max-width: 100%; 465} 466 467button img { 468 max-width: none; 469} 470 471hr { 472 border-top: solid @ini_border; 473 border-bottom: solid @ini_background_site; 474 border-width: 1px 0; 475 height: 0; 476 text-align: center; 477 clear: both; 478} 479 480acronym, 481abbr { 482 cursor: help; 483 border-bottom: 1px dotted; 484 font-style: normal; 485} 486 487em acronym, 488em abbr { 489 font-style: italic; 490} 491 492mark { 493 background-color: @ini_highlight; 494 color: @ini_highlight_text; 495} 496 497pre, 498code, 499samp, 500kbd { 501 font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace; 502 /* same font stack should be used for ".dokuwiki table.diff td" in _diff.css */ 503 font-size: @font-size-default; 504 direction: ltr; 505 text-align: left; 506 background-color: @code-background; 507 color: @noopentasks-color; 508 box-shadow: inset 0 0 .3em @noopentasks-border; 509 border-radius: @fix_border-radius; 510 padding-left: @small-spacing; 511 padding-right: @small-spacing; 512 513 * { 514 font-family: inherit; 515 font-size: inherit; 516 } 517 518 span { 519 color: inherit; 520 } 521 522 a { 523 &:link, 524 &:visited { 525 color: inherit; 526 text-decoration: underline; 527 } 528 529 &:hover, 530 &:focus, 531 &:active { 532 text-decoration: none; 533 } 534 } 535} 536 537pre { 538 overflow: auto; 539 word-wrap: normal; 540 border: 1px solid @noopentasks-border; 541 font-size: @font-size-default; 542 line-height: 140%; 543 padding: .7em 1em; 544} 545 546code:not([class]) { 547 display: inline-block; 548} 549 550blockquote { 551 border: solid @ini_border; 552 border-width: 0 0 0 .25em; 553 font-size: @font-size-default; 554 line-height: 140%; 555 padding: 0 .5em; 556} 557 558[dir=rtl] blockquote { 559 border-width: 0 .25em 0 0; 560} 561 562q:before, 563q:after { 564 content: ''; 565} 566 567sub, 568sup { 569 font-size: .8em; 570 line-height: 1; 571} 572 573sub { 574 vertical-align: sub; 575} 576 577sup { 578 vertical-align: super; 579} 580 581small { 582 font-size: .9em; 583} 584