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: __text__; 18 background: __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} 39h1, 40h2, 41h3, 42h4, 43h5, 44h6 { 45 font-weight: bold; 46 padding: 0; 47 line-height: 1.2; 48 clear: left; /* ideally 'both', but problems with toc */ 49} 50[dir=rtl] h1, 51[dir=rtl] h2, 52[dir=rtl] h3, 53[dir=rtl] h4, 54[dir=rtl] h5, 55[dir=rtl] h6 { 56 clear: right; 57} 58 59h1 { 60 font-family: Georgia, serif; 61 font-size: 2em; 62 margin: 0 0 0.444em; 63 text-shadow: 1px 1px 2px #eee; 64} 65h2 { 66 font-size: 1.5em; 67 margin: 0 0 0.666em; 68 border-bottom: 1px solid __background_site__; 69} 70h3 { 71 font-size: 1.125em; 72 margin: 0 0 0.888em; 73} 74h4 { 75 font-size: 1em; 76 margin: 0 0 1.0em; 77} 78h5 { 79 font-size: .875em; 80 margin: 0 0 1.1428em; 81} 82h6 { 83 font-size: .75em; 84 margin: 0 0 1.333em; 85} 86/* bottom margin = 1 / font-size */ 87 88 89/*____________ basic margins and paddings ____________*/ 90 91p, 92ul, 93ol, 94dl, 95pre, 96table, 97hr, 98blockquote, 99figure, 100details, 101fieldset, 102address { 103 margin: 0 0 1.4em 0; /* bottom margin = line-height */ 104 padding: 0; 105} 106 107div { 108 margin: 0; 109 padding: 0; 110} 111 112 113/*____________ lists ____________*/ 114 115ul, 116ol { 117 padding: 0 0 0 1.5em; 118} 119[dir=rtl] ul, 120[dir=rtl] ol { 121 padding: 0 1.5em 0 0; 122} 123 124li, 125dd { 126 padding: 0; 127 margin: 0 0 0 1.5em; 128} 129[dir=rtl] li, 130[dir=rtl] dd { 131 margin: 0 1.5em 0 0; 132} 133dt { 134 font-weight: bold; 135 margin: 0; 136 padding: 0; 137} 138 139li ul, 140li ol, 141li dl, 142dl ul, 143dl ol, 144dl dl { 145 margin-bottom: 0; 146 padding: 0; 147} 148li li { 149 font-size: 100%; 150} 151 152ul { list-style: square outside; } 153ol { list-style: decimal outside; } 154ol ol { list-style-type: lower-alpha; } 155ol ol ol { list-style-type: upper-roman; } 156ol ol ol ol { list-style-type: upper-alpha; } 157ol ol ol ol ol { list-style-type: lower-roman; } 158 159 160/*____________ tables ____________*/ 161 162table { 163 border-collapse: collapse; 164 empty-cells: show; 165 border-spacing: 0; 166 border: 1px solid __border__; 167} 168 169caption { 170 caption-side: top; 171 text-align: left; 172} 173[dir=rtl] caption { 174 text-align: right; 175} 176 177th, 178td { 179 padding: .3em .5em; 180 margin: 0; 181 vertical-align: top; 182 border: 1px solid __border__; 183} 184th { 185 font-weight: bold; 186 background-color: __background_alt__; 187 text-align: left; 188} 189[dir=rtl] th { 190 text-align: right; 191} 192 193 194/*____________ links ____________*/ 195 196a { 197 outline: none; 198} 199a:link, 200a:visited { 201 text-decoration: none; 202 color: __link__; 203 text-shadow: 1px 1px 2px #444; 204} 205a:link:hover, 206a:visited:hover, 207a:link:focus, 208a:visited:focus, 209a:link:active, 210a:visited:active { 211 text-decoration: underline; 212} 213 214 215/*____________ misc ____________*/ 216 217img { 218 border-width: 0; 219 vertical-align: middle; 220 color: #666; 221 background-color: transparent; 222 font-style: italic; 223 height: auto; 224} 225img, 226object, 227embed, 228iframe, 229video, 230audio { 231 max-width: 100%; 232} 233#IE7 img, 234#IE8 img { 235 max-width: none; 236} 237 238hr { 239 border-top: solid __border__; 240 border-bottom: solid __background__; 241 border-width: 1px 0; 242 height: 0; 243 text-align: center; 244 clear: both; 245} 246 247acronym, 248abbr { 249 cursor: help; 250 border-bottom: 1px dotted; 251 font-style: normal; 252} 253em acronym, 254em abbr { 255 font-style: italic; 256} 257 258mark { 259 background-color: __highlight__; 260 color: inherit; 261} 262 263pre, 264code, 265samp, 266kbd { 267 font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace; 268 /* same font stack should be used for ".dokuwiki table.diff td" in _diff.css */ 269 font-size: 1em; 270 direction: ltr; 271 text-align: left; 272 /* background-color: __background_site__; */ 273 background-color: #aaa; 274 /* color: __text__; */ 275 color: #222; 276 /* box-shadow: inset 0 0 .3em __border__; */ 277 border-radius: 2px; 278} 279pre { 280 overflow: auto; 281 word-wrap: normal; 282 border: 1px solid __border__; 283 border-radius: 3px; 284 box-shadow: inset 0 0 .7em __background__; 285 padding: .7em 1em; 286} 287 288.code span.kw1 { 289 text-shadow: 1px 1px #333; 290} 291 292blockquote { 293 padding: 0 .5em; 294 border: solid __border__; 295 border-width: 0 0 0 .25em; 296} 297[dir=rtl] blockquote { 298 border-width: 0 .25em 0 0; 299} 300q:before, 301q:after { 302 content: ''; 303} 304 305sub, 306sup { 307 font-size: .8em; 308 line-height: 1; 309} 310sub { 311 vertical-align: sub; 312} 313sup { 314 vertical-align: super; 315} 316 317small { 318 font-size: .8em; 319} 320 321/*____________ forms ____________*/ 322 323/* for all of the form styles, style.ini colours are not used on purpose (except for fieldset border) */ 324 325form { 326 display: inline; 327 margin: 0; 328 padding: 0; 329} 330fieldset { 331 padding: .7em 1em 0; 332 padding: .7rem 1rem; /* for those browsers understanding :last-child */ 333 border: 1px solid __text_alt__; 334} 335fieldset > :last-child { 336 margin-bottom: 0; 337} 338legend { 339 margin: 0; 340 padding: 0 .1em; 341} 342label { 343 vertical-align: middle; 344 cursor: pointer; 345} 346 347input, 348textarea, 349button, 350select, 351optgroup, 352option, 353keygen, 354output, 355meter, 356progress { 357 font: inherit; 358 font-weight: normal; 359 color: #333; 360 background-color: #fff; 361 line-height: normal; 362 margin: 0; 363 vertical-align: middle; 364 -moz-box-sizing: border-box; 365 -webkit-box-sizing: border-box; 366 box-sizing: border-box; 367} 368 369optgroup { 370 font-style: italic; 371 font-weight: bold; 372} 373option { 374 font-style: normal; 375 font-weight: normal; 376} 377 378input, 379textarea, 380select, 381keygen { 382 border: 1px solid #ccc; 383 box-shadow: inset 0 0 1px #eee; 384 border-radius: 2px; 385} 386input:active, 387input:focus, 388textarea:active, 389textarea:focus, 390select:active, 391select:focus, 392keygen:active, 393keygen:focus { 394 border-color: #999; 395} 396input[type=radio], 397input[type=checkbox], 398input[type=image] { 399 padding: 0; 400 border-style: none; 401 box-shadow: none; 402} 403 404/* all types of buttons */ 405input[type=submit], 406input[type=button], 407input[type=reset], 408input.button, 409a.button, 410button, 411.qq-upload-button { 412 color: #333; 413 background-color: #eee; 414 background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0VFRUVFRSIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0NDQ0NDQyIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnODI0KSIgLz4KPC9zdmc+); 415 background: -moz-linear-gradient( top, #dddddd 0%, #d4d4d4 30%, #cccccc 99%, #aaaaaa 99%); 416 background: -webkit-linear-gradient(top, #dddddd 0%, #d4d4d4 30%, #cccccc 99%, #aaaaaa 99%); 417 background: -o-linear-gradient( top, #dddddd 0%, #d4d4d4 30%, #cccccc 99%, #aaaaaa 99%); 418 background: -ms-linear-gradient( top, #dddddd 0%, #d4d4d4 30%, #cccccc 99%, #aaaaaa 99%); 419 background: linear-gradient( top, #dddddd 0%, #d4d4d4 30%, #cccccc 99%, #aaaaaa 99%); 420 border: 1px solid #999; 421 border-radius: 2px; 422 padding: .1em .5em; 423 cursor: pointer; 424} 425#IE7 input.button, 426#IE7 button { 427 line-height: 1.4; 428 overflow: visible; 429} 430 431input[type=submit]:hover, 432input[type=submit]:active, 433input[type=submit]:focus, 434input[type=button]:hover, 435input[type=button]:active, 436input[type=button]:hover, 437input[type=reset]:hover, 438input[type=reset]:active, 439input[type=reset]:hover, 440input.button:hover, 441input.button:active, 442input.button:focus, 443a.button:hover, 444a.button:active, 445a.button:focus, 446button:hover, 447button:active, 448button:focus, 449.qq-upload-button:hover { 450 border-color: #999; 451 background-color: #ddd; 452 background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2NzAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0RERERERCIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0JCQkJCQiIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNjcwKSIgLz4KPC9zdmc+); 453 background: -moz-linear-gradient( top, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%); 454 background: -webkit-linear-gradient(top, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%); 455 background: -o-linear-gradient( top, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%); 456 background: -ms-linear-gradient( top, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%); 457 background: linear-gradient( top, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%); 458} 459 460input::-moz-focus-inner, 461button::-moz-focus-inner { 462 border: 0; 463 padding: 0; 464} 465 466input[disabled], 467button[disabled], 468select[disabled], 469textarea[disabled], 470input[readonly], 471button[readonly], 472select[readonly], 473textarea[readonly] { 474 cursor: auto; 475 opacity: .5; 476 background-color: #eee; 477} 478