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