1/** 2 * This file provides the most basic styles. 3 * 4 * If you integrate DokuWiki into another project, you might either 5 * want to integrate this file into the other project as well, or use 6 * the other project's basic CSS for DokuWiki instead of this one. 7 * 8 * @author Anika Henke <anika@selfthinker.org> 9 */ 10 11html { 12 overflow-x: auto; 13 overflow-y: scroll; 14} 15html, 16body { 17 color: @ini_text; 18 // background: @ini_background_site url(images/page-gradient.png) top left repeat-x; 19 margin: 0; 20 padding: 0; 21} 22body { 23 font: normal 87.5%/1.4 Arial, sans-serif; 24 /* default font size: 100% => 16px; 93.75% => 15px; 87.5% => 14px; 81.25% => 13px; 75% => 12px */ 25 -webkit-text-size-adjust: 100%; 26} 27 28 29/*____________ headers ____________*/ 30 31caption, 32figcaption, 33summary, 34legend { 35 padding: 0; 36 margin: 0 0 .35em; 37 line-height: 1.2; 38} 39 40h1, 41h2, 42h3, 43h4, 44h5, 45h6 { 46 font-weight: bold; 47 padding: 0; 48 line-height: 1.2; 49 clear: left; /* ideally 'both', but problems with toc */ 50} 51[dir=rtl] h1, 52[dir=rtl] h2, 53[dir=rtl] h3, 54[dir=rtl] h4, 55[dir=rtl] h5, 56[dir=rtl] h6 { 57 clear: right; 58} 59 60.navbar-brand:hover { 61 text-decoration: none !important; 62} 63 64#mldropdown { 65 text-decoration: none !important; 66} 67 68#mldropdown:link { 69 text-decoration: none !important; 70 color: dark; 71} 72 73h1 { 74 font-size: 3.6em; 75 font-weight: 900; 76 text-align: center; 77} 78h2 { 79 font-size: 1.8em; 80 margin: 2em 0 0.6em 0; 81 font-weight: 700; 82 background:transparent; 83 font-weight: 700; 84} 85 86h3 { 87 font-size: 1.2em; 88 margin: 0.4em 0 0em 0; 89 color: #343a40; 90} 91 92h3::before { 93} 94 95h3.toggle::before { 96 content: "\025b2"; 97} 98 99h4 { 100 font-size: 1em; 101 margin: 0 0 1.0em; 102} 103h5 { 104 font-size: .875em; 105 margin: 0 0 1.1428em; 106} 107h6 { 108 font-size: .75em; 109 margin: 0 0 1.333em; 110} 111/* bottom margin = 1 / font-size */ 112 113 114/*____________ basic margins and paddings ____________*/ 115 116p, 117ul, 118ol, 119dl, 120pre, 121table, 122hr, 123blockquote, 124figure, 125details, 126fieldset, 127address { 128 margin: 0 0 1.4em 0; /* bottom margin = line-height */ 129 padding: 0; 130} 131 132div, 133video, 134audio { 135 margin: 0; 136 padding: 0; 137} 138 139 140/*____________ lists ____________*/ 141 142ul, 143ol { 144 padding: 0 0 0 1.5em; 145} 146[dir=rtl] ul, 147[dir=rtl] ol { 148 padding: 0 1.5em 0 0; 149} 150 151li, 152dd { 153 padding: 0; 154 margin: 0 0 0 1.5em; 155} 156[dir=rtl] li, 157[dir=rtl] dd { 158 margin: 0 1.5em 0 0; 159} 160dt { 161 font-weight: bold; 162 margin: 0; 163 padding: 0; 164} 165 166li ul, 167li ol, 168li dl, 169dl ul, 170dl ol, 171dl dl { 172 margin-bottom: 0; 173 padding: 0; 174} 175li li { 176 font-size: 100%; 177} 178 179ul { list-style: square outside; // color: #999; 180 } 181ol { list-style: decimal outside; } 182ol ol { list-style-type: lower-alpha; } 183ol ol ol { list-style-type: upper-roman; } 184ol ol ol ol { list-style-type: upper-alpha; } 185ol ol ol ol ol { list-style-type: lower-roman; } 186 187 188/*____________ tables ____________*/ 189 190table { 191 border-collapse: collapse; 192 empty-cells: show; 193 border-spacing: 0; 194 border: 1px solid @ini_border; 195} 196 197caption { 198 caption-side: top; 199 text-align: left; 200} 201[dir=rtl] caption { 202 text-align: right; 203} 204 205th, 206td { 207 padding: .3em .5em; 208 margin: 0; 209 vertical-align: top; 210 border: 1px solid @ini_border; 211} 212th { 213 font-weight: bold; 214 background-color: @ini_background_alt; 215 text-align: left; 216} 217[dir=rtl] th { 218 text-align: right; 219} 220 221 222/*____________ links ____________*/ 223 224a { 225 outline: none; 226} 227a:link, 228a:visited { 229 text-decoration: none; 230 color: @ini_link; 231} 232a:link:hover, 233a:visited:hover, 234a:link:focus, 235a:visited:focus, 236a:link:active, 237a:visited:active { 238 text-decoration: underline; 239} 240 241 242/*____________ misc ____________*/ 243 244img { 245 border-width: 0; 246 vertical-align: middle; 247 color: #666; 248 background-color: transparent; 249 font-style: italic; 250 height: auto; 251} 252video { 253 height: auto; 254} 255img, 256object, 257embed, 258iframe, 259video, 260audio { 261 max-width: 100%; 262} 263button img { 264 max-width: none; 265} 266 267hr { 268 border-top: solid @ini_border; 269 border-bottom: solid @ini_background; 270 border-width: 1px 0; 271 height: 0; 272 text-align: center; 273 clear: both; 274} 275 276acronym, 277abbr { 278 cursor: help; 279 border-bottom: 1px dotted; 280 font-style: normal; 281} 282em acronym, 283em abbr { 284 font-style: italic; 285} 286 287mark { 288 background-color: @ini_highlight; 289 color: inherit; 290} 291 292pre, 293code, 294samp, 295kbd { 296 font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace; 297 /* same font stack should be used for ".dokuwiki table.diff td" in _diff.css */ 298 font-size: 1em; 299 direction: ltr; 300 text-align: left; 301 background-color: #343a40; 302 color: #20c997; 303 // box-shadow: inset 0 0 .3em @ini_border; 304 // border-radius: 2px; 305} 306pre { 307 overflow: auto; 308 word-wrap: normal; 309 // border-radius: 2px; 310 // box-shadow: inset 0 0 .5em @ini_border; 311 padding: .7em 1em; 312} 313 314blockquote { 315 padding: 0 .5em; 316 border: solid @ini_border; 317 border-width: 0 0 0 .25em; 318} 319[dir=rtl] blockquote { 320 border-width: 0 .25em 0 0; 321} 322q:before, 323q:after { 324 content: ''; 325} 326 327sub, 328sup { 329 // font-size: .8em; 330 // line-height: 1; 331} 332sub { 333 // vertical-align: sub; 334} 335sup { 336 // vertical-align: super; 337} 338 339small { 340 font-size: .8em; 341} 342 343/*____________ forms ____________*/ 344 345/* for all of the form styles, style.ini colours are not used on purpose (except for fieldset border) */ 346 347form { 348 display: inline; 349 margin: 0; 350 padding: 0; 351} 352fieldset { 353 padding: .7em 1em 0; 354 padding: .7rem 1rem; /* for those browsers understanding :last-child */ 355 border: 1px solid @ini_text_alt; 356} 357fieldset > :last-child { 358 margin-bottom: 0; 359} 360legend { 361 margin: 0; 362 padding: 0 .1em; 363} 364label { 365 vertical-align: middle; 366 cursor: pointer; 367} 368 369input, 370textarea, 371button, 372select, 373optgroup, 374option, 375keygen, 376output, 377meter, 378progress { 379 font: inherit; 380 font-weight: normal; 381 color: #333; 382 background-color: #fff; 383 line-height: normal; 384 margin: 0; 385 vertical-align: middle; 386 box-sizing: border-box; 387} 388 389select { 390 max-width: 100%; 391} 392optgroup { 393 font-style: italic; 394 font-weight: bold; 395} 396option { 397 font-style: normal; 398 font-weight: normal; 399} 400 401input, 402textarea, 403select, 404keygen { 405 border: 1px solid; 406 border-color: #999; 407 border-radius: .25rem; 408 box-shadow: none; 409} 410input:active, 411input:focus, 412textarea:active, 413textarea:focus, 414select:active, 415select:focus, 416keygen:active, 417keygen:focus { 418 border-color: #999; 419} 420input[type=radio], 421input[type=checkbox], 422input[type=image] { 423 padding: 0; 424 border-style: none; 425 box-shadow: none; 426} 427 428/* all types of buttons */ 429input[type=submit], 430input[type=button], 431input[type=reset], 432input.button, 433a.button, 434button, 435.qq-upload-button { 436 // color: #333; 437 // background-color: #eee; 438 // background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0VFRUVFRSIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0NDQ0NDQyIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnODI0KSIgLz4KPC9zdmc+); 439 // background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%); 440 // border: 1px solid #ccc; 441 // border-radius: 2px; 442 // padding: .1em .5em; 443 // cursor: pointer; 444 445 display: inline-block; 446 margin-bottom: 0; 447 font-weight: normal; 448 text-align: center; 449 white-space: nowrap; 450 vertical-align: middle; 451 -ms-touch-action: manipulation; 452 touch-action: manipulation; 453 cursor: pointer; 454 background-image: none; 455 border: 1px solid transparent; 456 padding: 2px 6px; 457 font-size: 10px; 458 line-height: 1.42857143; 459 border-radius: 4px; 460 -webkit-user-select: none; 461 -moz-user-select: none; 462 -ms-user-select: none; 463 user-select: none; 464 color: black; 465 border-color: black; 466 // float: right; 467} 468 469input[type=submit]:hover, 470input[type=submit]:active, 471input[type=submit]:focus, 472input[type=button]:hover, 473input[type=button]:active, 474input[type=button]:hover, 475input[type=reset]:hover, 476input[type=reset]:active, 477input[type=reset]:hover, 478input.button:hover, 479input.button:active, 480input.button:focus, 481a.button:hover, 482a.button:active, 483a.button:focus, 484button:hover, 485button:active, 486button:focus, 487.qq-upload-button:hover { 488 // border-color: #999; 489 // background-color: #ddd; 490 // background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2NzAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0RERERERCIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0JCQkJCQiIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNjcwKSIgLz4KPC9zdmc+); 491 // background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%); 492 493 background-color: #6c757d; 494 color: white; 495 border-color: #343a40; 496 text-decoration: none; 497 498 // display: inline-block; 499 // margin-bottom: 0; 500 // font-weight: normal; 501 // text-align: center; 502 // white-space: nowrap; 503 // vertical-align: middle; 504 // -ms-touch-action: manipulation; 505 // touch-action: manipulation; 506 // cursor: pointer; 507 // background-image: none; 508 // border: 1px solid transparent; 509 // padding: 2px 6px; 510 // font-size: 10px; 511 // line-height: 1.42857143; 512 // border-radius: 4px; 513 // -webkit-user-select: none; 514 // -moz-user-select: none; 515 // -ms-user-select: none; 516 // user-select: none; 517 // color: white; 518 // background-color: #343a40; 519 520} 521 522input::-moz-focus-inner, 523button::-moz-focus-inner { 524 border: 0; 525 padding: 0; 526} 527 528input[disabled], 529button[disabled], 530select[disabled], 531textarea[disabled], 532option[disabled], 533input[readonly], 534button[readonly], 535select[readonly], 536textarea[readonly] { 537 cursor: auto; 538 opacity: .5; 539 background-color: #eee; 540} 541 542a.node{ 543 color: black !important; 544} 545 546a.nodeUrl{ 547 color: black !important; 548} 549