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