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 11/*____________ Add font ____________*/ 12/* Not in use for now. TODO. Probably useful for pagetool and other icons. 13@font-face { 14 font-family: 'ForkAwesome'; 15 src: url('./fonts/forkawesome-webfont.woff') format('woff'); 16 font-weight: normal; 17 font-style: normal; 18}*/ 19/*____________ Reset some default css ____________*/ 20 21html,body { 22 /*overflow-x: auto; 23 overflow-y: scroll;*/ 24 margin: 0; 25 padding: 0; 26 border: 0; 27 font-size: 100%; 28 vertical-align: baseline; 29 /*position:absolute;*/ 30 width:100%; 31} 32 33/*____________ Body ____________*/ 34body { 35 background-size: contain, contain, auto; /* version standardisée */ 36 background: url("images/curve2.png") repeat-y fixed left bottom, url("images/curve.png") repeat-y fixed right bottom; 37 background-color: @ini_color7 ; 38 color: @ini_text; 39 /*font: normal 87.5%/1.4 Arial, sans-serif;*/ 40 font-family: BlinkMacSystemFont,-apple-system,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Helvetica","Arial",sans-serif; 41 margin: 0 auto; 42} 43 44 45 46/*____________ headers ____________*/ 47 48caption, 49figcaption, 50summary, 51legend { 52 padding: 0; 53 margin: 0 0 .35em; 54 line-height: 1.2; 55} 56h1, 57h2, 58h3, 59h4, 60h5, 61h6 { 62 font-family: Arial,sans-serif; 63 font-weight: bold; 64 padding: 0; 65 line-height: 1.2; 66 clear: left; /* ideally 'both', but problems with toc */ 67} 68[dir=rtl] h1, 69[dir=rtl] h2, 70[dir=rtl] h3, 71[dir=rtl] h4, 72[dir=rtl] h5, 73[dir=rtl] h6 { 74 clear: right; 75} 76 77/* bottom margin = 1 / font-size */ 78 79 80/*____________ basic margins and paddings ____________*/ 81 82p, 83ul, 84ol, 85dl, 86pre, 87table, 88hr, 89blockquote, 90figure, 91details, 92fieldset, 93address { 94 margin: 0 0 1.4em 0; /* bottom margin = line-height */ 95 padding: 0; 96} 97 98div, 99video, 100audio { 101 margin: 0; 102 padding: 0; 103} 104 105 106/*____________ lists ____________*/ 107 108ul, 109ol { 110 padding: 0 0 0 1.5em; 111} 112[dir=rtl] ul, 113[dir=rtl] ol { 114 padding: 0 1.5em 0 0; 115} 116 117li, 118dd { 119 padding: 0; 120 margin: 0 0 0 1.5em; 121} 122[dir=rtl] li, 123[dir=rtl] dd { 124 margin: 0 1.5em 0 0; 125} 126dt { 127 font-weight: bold; 128 margin: 0; 129 padding: 0; 130} 131 132li ul, 133li ol, 134li dl, 135dl ul, 136dl ol, 137dl dl { 138 margin-bottom: 0; 139 padding: 0; 140} 141li li { 142 font-size: 100%; 143} 144 145ul { list-style: square outside; } 146ol { list-style: decimal outside; } 147ol ol { list-style-type: lower-alpha; } 148ol ol ol { list-style-type: upper-roman; } 149ol ol ol ol { list-style-type: upper-alpha; } 150ol ol ol ol ol { list-style-type: lower-roman; } 151 152 153/*____________ links ____________*/ 154 155a { 156 color: @ini_link; 157} 158a:link, 159a:visited { 160 text-decoration: underline dotted; 161} 162a:link:hover, 163a:visited:hover, 164a:link:focus, 165a:visited:focus, 166a:link:active, 167a:visited:active { 168 text-decoration: underline; 169} 170 171 172/*____________ misc ____________*/ 173 174img { 175 border-width: 0; 176 vertical-align: middle; 177 color: @ini_neutral1; 178 background-color: transparent; 179 font-style: italic; 180 height: auto; 181} 182video { 183 height: auto; 184} 185img, 186object, 187embed, 188iframe, 189video, 190audio { 191 max-width: 100%; 192} 193 194 195hr { 196 border: 1px solid @ini_neutral2; 197 text-align: center; 198 clear: both; 199} 200 201acronym, 202abbr { 203 cursor: help; 204 border-bottom: 1px dotted; 205 font-style: normal; 206} 207em acronym, 208em abbr { 209 font-style: italic; 210} 211 212mark { 213 background-color: @ini_highlight; 214 color: inherit; 215} 216 217pre, 218code, 219samp, 220kbd { 221 font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace; 222 /* same font stack should be used for ".dokuwiki table.diff td" in _diff.css */ 223 font-size: 1em; 224 direction: ltr; 225 text-align: left; 226 background-color: @ini_background; 227 color: @ini_text; 228 box-shadow: inset 0 0 .3em @ini_border; 229 border-radius: 2px; 230} 231pre { 232 overflow: auto; 233 word-wrap: normal; 234 border: 1px solid @ini_border; 235 border-radius: 2px; 236 box-shadow: inset 0 0 .5em @ini_border; 237 padding: .7em 1em; 238} 239 240blockquote { 241 padding: 0 .5em; 242 border: solid @ini_border; 243 border-width: 0 0 0 .25em; 244} 245[dir=rtl] blockquote { 246 border-width: 0 .25em 0 0; 247} 248q:before, 249q:after { 250 content: ''; 251} 252 253sub, 254sup { 255 font-size: .8em; 256 line-height: 1; 257} 258sub { 259 vertical-align: sub; 260} 261sup { 262 vertical-align: super; 263} 264 265small { 266 font-size: .8em; 267} 268 269/*____________ forms ____________*/ 270 271/* for all of the form styles, style.ini colours are not used on purpose (except for fieldset border) */ 272 273form { 274 display: inline; 275 margin: 0; 276 padding: 0; 277} 278fieldset { 279 padding: .7em 1em 0; 280 padding: .7rem 1rem; /* for those browsers understanding :last-child */ 281 border: 1px solid @ini_text_alt; 282} 283 284 285fieldset > :last-child { 286 margin-bottom: 0; 287} 288legend { 289 margin: 0; 290 padding: 0 .1em; 291} 292label { 293 vertical-align: middle; 294 cursor: pointer; 295} 296 297input, 298textarea, 299select, 300optgroup, 301option, 302keygen, 303output, 304meter, 305progress { 306 font: inherit; 307 font-weight: normal; 308 color: @ini_neutraldark; 309 background-color: @ini_neutrallight; 310 line-height: normal; 311 margin: 0; 312 vertical-align: middle; 313 box-sizing: border-box; 314} 315 316select { 317 max-width: 100%; 318} 319optgroup { 320 font-style: italic; 321 font-weight: bold; 322} 323option { 324 font-style: normal; 325 font-weight: normal; 326} 327 328input, 329textarea, 330select, 331keygen { 332 border: 1px solid @ini_neutral3; 333 box-shadow: inset 0 0 1px @ini_neutral4; 334 border-radius: 2px; 335} 336input:active, 337input:focus, 338textarea:active, 339textarea:focus, 340select:active, 341select:focus, 342keygen:active, 343keygen:focus { 344 border-color: @ini_neutral2; 345} 346input[type=radio], 347input[type=checkbox], 348input[type=image] { 349 padding: 0; 350 border-style: none; 351 box-shadow: none; 352} 353 354/* all types of buttons */ 355 356 357input::-moz-focus-inner, 358button::-moz-focus-inner { 359 border: 0; 360 padding: 0; 361} 362 363input[disabled], 364button[disabled], 365select[disabled], 366textarea[disabled], 367option[disabled], 368input[readonly], 369button[readonly], 370select[readonly], 371textarea[readonly] { 372 cursor: auto; 373 opacity: .5; 374 background-color: @ini_neutral4; 375} 376 377button img { 378 max-width: none; 379} 380 381button { 382 font: inherit; 383 font-weight: normal; 384 color: @ini_neutraldark; 385 background-color: @ini_neutral4; 386 line-height: normal; 387 margin: 0; 388 vertical-align: middle; 389 box-sizing: border-box; 390 border: outset @ini_neutral4; 391} 392button:hover { 393 border-color: @ini_neutraldark; 394 font-weight: bold; 395} 396button:active { 397 color: @ini_neutral4; 398 background-color: @ini_neutraldark; 399 font-weight: bold; 400}