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