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 19 margin: 0; 20 padding: 0; 21} 22body { 23 font-family: "Open Sans",Helvetica,Arial,"Hiragino Sans GB","Microsoft YaHei","微软雅黑",STHeiti,"WenQuanYi Micro Hei",SimSun,sans-serif; 24 font-weight: lighter; 25 color: #707070; 26 -webkit-font-smoothing:antialiased; 27} 28 29 30/*____________ headers ____________*/ 31 32caption, 33figcaption, 34summary, 35legend { 36 padding: 0; 37 margin: 0 0 .35em; 38 line-height: 1.2; 39} 40h1, 41h2, 42h3, 43h4, 44h5, 45h6 { 46 font-weight: bold; 47 padding: 0; 48 line-height: 1.2; 49 color: #454545; 50 clear: left; /* ideally 'both', but problems with toc */ 51} 52[dir=rtl] h1, 53[dir=rtl] h2, 54[dir=rtl] h3, 55[dir=rtl] h4, 56[dir=rtl] h5, 57[dir=rtl] h6 { 58 clear: right; 59} 60 61h1 { 62 font-size: 2em; 63 margin: 0 0 0.444em; 64} 65h2 { 66 font-size: 1.5em; 67 margin: 0 0 0.666em; 68} 69h3 { 70 font-size: 1.125em; 71 margin: 0 0 0.888em; 72} 73h4 { 74 font-size: 1em; 75 margin: 0 0 1.0em; 76 border-top: 1px solid #CCC; 77 border-bottom: 1px solid #CCC; 78 text-align: center; 79 padding: 1em 0; 80} 81h5 { 82 font-size: .875em; 83 margin: 0 0 1.1428em; 84} 85h6 { 86 font-size: .75em; 87 margin: 0 0 1.333em; 88} 89/* bottom margin = 1 / font-size */ 90 91 92/*____________ basic margins and paddings ____________*/ 93 94p, 95ul, 96ol, 97dl, 98pre, 99table, 100hr, 101blockquote, 102figure, 103details, 104fieldset, 105address { 106 margin: 0 0 1.4em 0; /* bottom margin = line-height */ 107 padding: 0; 108} 109 110div, 111video, 112audio { 113 margin: 0; 114 padding: 0; 115} 116 117 118/*____________ lists ____________*/ 119 120ul, 121ol { 122 padding: 0 0 0 1.5em; 123} 124[dir=rtl] ul, 125[dir=rtl] ol { 126 padding: 0 1.5em 0 0; 127} 128 129li, 130dd { 131 padding: 0; 132 margin: 0 0 0 1.5em; 133} 134[dir=rtl] li, 135[dir=rtl] dd { 136 margin: 0 1.5em 0 0; 137} 138dt { 139 font-weight: bold; 140 margin: 0; 141 padding: 0; 142} 143 144li ul, 145li ol, 146li dl, 147dl ul, 148dl ol, 149dl dl { 150 margin-bottom: 0; 151 padding: 0; 152} 153li li { 154 font-size: 100%; 155} 156 157ul { list-style: square outside; } 158ol { list-style: decimal outside; } 159ol ol { list-style-type: lower-alpha; } 160ol ol ol { list-style-type: upper-roman; } 161ol ol ol ol { list-style-type: upper-alpha; } 162ol ol ol ol ol { list-style-type: lower-roman; } 163 164 165/*____________ tables ____________*/ 166 167table { 168 .pure-table; 169} 170 171caption { 172 caption-side: top; 173 text-align: left; 174} 175[dir=rtl] caption { 176 text-align: right; 177} 178 179th, 180td { 181 border-left: 1px solid #cbcbcb;/* inner column border */ 182 border-width: 0 0 0 1px; 183 font-size: inherit; 184 margin: 0; 185 overflow: visible; /*to make ths where the title is really long work*/ 186 padding: 0.5em 1em; /* cell padding */ 187 border-bottom: 1px solid #cbcbcb; 188} 189th { 190 background-color: #e0e0e0; 191 color: #000; 192 text-align: left; 193 vertical-align: bottom; 194} 195[dir=rtl] th { 196 text-align: right; 197} 198 199 200/*____________ links ____________*/ 201 202a { 203 outline: none; 204} 205a:link, 206a:visited { 207 text-decoration: none; 208 color: @ini_link; 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, 231button img { 232 max-width: none; 233} 234 235hr { 236 border-top: solid @ini_border; 237 border-bottom: solid @ini_background; 238 border-width: 1px 0; 239 height: 0; 240 text-align: center; 241 clear: both; 242} 243 244acronym, 245abbr { 246 cursor: help; 247 border-bottom: 1px dotted; 248 font-style: normal; 249} 250em acronym, 251em abbr { 252 font-style: italic; 253} 254 255mark { 256 background-color: @ini_highlight; 257 color: inherit; 258} 259 260blockquote { 261 padding: 0 .5em; 262 border: solid @ini_border; 263 border-width: 0 0 0 .25em; 264} 265[dir=rtl] blockquote { 266 border-width: 0 .25em 0 0; 267} 268q:before, 269q:after { 270 content: ''; 271} 272 273sub, 274sup { 275 font-size: .8em; 276 line-height: 1; 277} 278sub { 279 vertical-align: sub; 280} 281sup { 282 vertical-align: super; 283} 284 285small { 286 font-size: .8em; 287} 288 289/*____________ forms ____________*/ 290 291/* for all of the form styles, style.ini colours are not used on purpose (except for fieldset border) */ 292 293form { 294 display: inline; 295 margin: 0; 296 padding: 0; 297} 298fieldset { 299 padding: .7em 1em 0; 300 padding: .7rem 1rem; /* for those browsers understanding :last-child */ 301 border: 1px solid @ini_text_alt; 302} 303fieldset > :last-child { 304 margin-bottom: 0; 305} 306legend { 307 margin: 0; 308 padding: 0 .1em; 309} 310label { 311 vertical-align: middle; 312 cursor: pointer; 313} 314 315input, 316textarea, 317button, 318select, 319optgroup, 320option, 321keygen, 322output, 323meter, 324progress { 325 font: inherit; 326 font-weight: normal; 327 color: #333; 328 background-color: #fff; 329 line-height: normal; 330 margin: 0; 331 vertical-align: middle; 332 -moz-box-sizing: border-box; 333 -webkit-box-sizing: border-box; 334 box-sizing: border-box; 335} 336 337select { 338 max-width: 100%; 339} 340optgroup { 341 font-style: italic; 342 font-weight: bold; 343} 344option { 345 font-style: normal; 346 font-weight: normal; 347} 348 349input, 350textarea, 351select, 352keygen { 353 border: 1px solid #ccc; 354 box-shadow: inset 0 0 1px #eee; 355 border-radius: 2px; 356} 357input:active, 358input:focus, 359textarea:active, 360textarea:focus, 361select:active, 362select:focus, 363keygen:active, 364keygen:focus { 365 border-color: #999; 366} 367input[type=radio], 368input[type=checkbox], 369input[type=image] { 370 padding: 0; 371 border-style: none; 372 box-shadow: none; 373} 374 375/* all types of buttons */ 376input[type=submit], 377input[type=button], 378input[type=reset], 379input.button, 380a.button, 381button, 382.qq-upload-button { 383 .pure-buttion; 384 border-radius: 4px; 385 padding: 0.5em 1.5em; 386 margin: 0.5em 1em; 387 border-radius: 12px; 388 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); 389} 390#IE7 input.button, 391#IE7 button { 392 line-height: 1.4; 393 overflow: visible; 394} 395 396input[type=submit]:hover, 397input[type=submit]:active, 398input[type=submit]:focus, 399input[type=button]:hover, 400input[type=button]:active, 401input[type=button]:hover, 402input[type=reset]:hover, 403input[type=reset]:active, 404input[type=reset]:hover, 405input.button:hover, 406input.button:active, 407input.button:focus, 408a.button:hover, 409a.button:active, 410a.button:focus, 411button:hover, 412button:active, 413button:focus, 414.qq-upload-button:hover { 415 .buttion; 416 background-color: #AAD2F0; 417 background-image: -moz-linear-gradient(center top , #AAD2F0 5%, #8BC1ED 100%); 418 background-repeat: repeat; 419 background-attachment: scroll; 420 background-position: 0% 0%; 421 background-clip: border-box; 422 background-origin: padding-box; 423 background-size: auto auto; 424} 425 426input::-moz-focus-inner, 427button::-moz-focus-inner { 428 border: 0; 429 padding: 0; 430} 431 432input[disabled], 433button[disabled], 434select[disabled], 435textarea[disabled], 436option[disabled], 437input[readonly], 438button[readonly], 439select[readonly], 440textarea[readonly] { 441 cursor: auto; 442 opacity: .5; 443 background-color: #eee; 444} 445