1/** 2 * This file provides the main design styles for the 3 * bits that surround the content. 4 * 5 * @author Anika Henke <anika@selfthinker.org> 6 * @author Andreas Gohr <andi@splitbrain.org> 7 * @author Clarence Lee <clarencedglee@gmail.com> 8 */ 9 10/* header 11********************************************************************/ 12 13 14#dokuwiki__header { 15 width: 100%; 16 height: 100px; 17 position: fixed; 18 right:0; 19 left:0; 20 top:0; 21 z-index: 30; 22 23 .pad { 24 width: 100%; 25 height: 60px; 26 background: #222c37; 27 } 28 29 .headings { 30 width: 271px; 31 height: 34px; 32 float: left; 33 padding: 13px 0 0 0; 34 } 35 36 .tools { 37 width: 170px; 38 height: 60px; 39 float: right; 40 position: relative; 41 42 43 44 .holder { 45 .pure-menu-link; 46 } 47 48 .menu { 49 list-style: none; 50 width:100%; 51 height:100%; 52 53 &:hover ul { 54 display:block; 55 } 56 ul { 57 .pure-menu-children; 58 } 59 60 li { 61 background:#222c37; 62 .pure-menu-item; 63 margin: 0px 0 0 -19px; 64 width: 190px; 65 a { 66 padding-left: 30px; 67 } 68 a { 69 height: 40px; 70 line-height: 40px; 71 display: block; 72 float: left; 73 margin: 0 15px; 74 text-decoration: none; 75 cursor: pointer; 76 color: #D1D1D1; 77 -webkit-transition: color .15s; 78 -moz-transition: color .15s; 79 -ms-transition: color .15s; 80 -o-transition: color .15s; 81 transition: color .15s; 82 } 83 a:hover { color: #00cccc; } 84 a.selected { 85 color: #00cccc; position: relative; font-family: 'avalonbold', sans-serif; line-height: 44px; 86 } 87 a.selected:after { 88 content: ''; display: block; width: 100%; height: 1px; position: absolute; bottom: 11px; left: 0; background: #00cccc; 89 } 90 } 91 92 a { 93 height: 40px; 94 line-height: 40px; 95 display: block; 96 float: left; 97 margin: 0px 15px; 98 text-decoration: none; 99 cursor: pointer; 100 color: #D1D1D1; 101 transition: color 0.15s ease 0s; 102 } 103 } 104 105 ul { 106 display:none; 107 position: relative; 108 z-index: 15; 109 list-style: none; 110 margin: 15px 15px 15px 0; 111 } 112 113 li { 114 float: left; 115 margin: 0 0 0 20px; 116 font-size: 1em; 117 font-family: 'avalon', sans-serif; 118 } 119 120 } 121 122 [dir=rtl] .tools li { 123 margin-right: 1em; 124 margin-left: 0; 125 } 126 127 form.search { 128 float: right; position: relative; 129 130 :before { 131 content: ''; 132 width: 18px; 133 height: 60px; 134 position: absolute; 135 left: -17px; 136 background: url(images/shard-left.png) 0 0 no-repeat; 137 } 138 :after { 139 content: ''; 140 width: 18px; 141 height: 60px; 142 position: absolute; 143 right: -17px; 144 background: url(images/shard-right.png) 0 0 no-repeat; 145 } 146 147 input.edit { 148 width: 350px; 149 line-height: 20px; 150 padding: 20px 50px 20px 20px; 151 border: 0; 152 margin: 0; 153 outline: none; 154 -webkit-border-radius: 0; 155 -moz-border-radius: 0; 156 border-radius: 0; 157 } 158 159 input.edit:focus { 160 background: #fff !important; 161 } 162 163 input.button { 164 background: transparent url(images/search.png) no-repeat 0 0; 165 border-width: 0; 166 width: 19px; 167 height: 14px; 168 text-indent: -99999px; 169 margin-left: -35px; 170 box-shadow: none; 171 padding: 0; 172 } 173 174 } 175 176 [dir=rtl] form.search { 177 input.edit { 178 padding: .35em .1em .35em 22px; 179 } 180 181 input.button { 182 background-position: 5px 0; 183 margin-left: 0; 184 margin-right: -20px; 185 position: relative; 186 } 187 } 188 189 #IE7 form.search { 190 min-height: 1px; 191 z-index: 21; 192 } 193 194 195 .links { 196 ul { 197 float: right; 198 list-style-type: none; 199 margin: 10px 0; 200 padding: 0 30px 0 0; 201 } 202 203 li { 204 float: left; 205 margin: 0 1px 0 0; 206 font-size: 1em; 207 font-family: 'avalon', sans-serif; 208 a { 209 height: 40px; 210 line-height: 40px; 211 display: block; 212 float: left; 213 margin: 0 15px; 214 text-decoration: none; 215 cursor: pointer; 216 color: #D1D1D1; 217 -webkit-transition: color .15s; 218 -moz-transition: color .15s; 219 -ms-transition: color .15s; 220 -o-transition: color .15s; 221 transition: color .15s; 222 } 223 a:hover { color: #00cccc; } 224 a.selected { color: #00cccc; position: relative; font-family: 'avalonbold', sans-serif; line-height: 44px; } 225 a.selected:after { content: ''; display: block; width: 100%; height: 1px; position: absolute; bottom: 11px; left: 0; background: #00cccc; } 226 } 227 228 } 229 230 h1 { 231 margin: 0; 232 font-size: 1.5em; 233 font-weight: normal; 234 235 img { 236 float: left; 237 margin: 0px 10px 0px 20px; 238 } 239 240 span { 241 display: block; 242 width:100%; 243 244 } 245 246 a { 247 color: #D1D1D1; 248 } 249 a:hover { color: #00cccc; } 250 a.selected { 251 color: #00cccc; position: relative; font-family: 'avalonbold', sans-serif; line-height: 44px; 252 } 253 a.selected:after { 254 content: ''; display: block; width: 100%; height: 1px; position: absolute; bottom: 11px; left: 0; background: #00cccc; 255 } 256 } 257 258 p.claim { 259 margin-bottom: 0; 260 font-size: 0.875em; 261 } 262 263 /* make all links in header (including breadcrumb and interwiki) same colour as the rest */ 264 a { 265 color: @ini_link; 266 background-color: inherit; 267 } 268} 269 270[dir=rtl] #dokuwiki__header h1 img { 271 float: right; 272 margin-left: .5em; 273 margin-right: 0; 274} 275 276/* highlight selected tool */ 277.mode_admin a.action.admin, 278.mode_login a.action.login, 279.mode_register a.action.register, 280.mode_profile a.action.profile, 281.mode_recent a.action.recent, 282.mode_index a.action.index, 283.mode_media a.action.media, 284.mode_revisions a.action.revs, 285.mode_backlink a.action.backlink, 286.mode_subscribe a.action.subscribe { 287 .pur 288} 289 290 291#dokuwiki__usertools a.action, 292#dokuwiki__usertools a.iw_user { 293 padding-left: 20px; 294 background: transparent url(images/usertools.png) no-repeat 0 0; 295} 296 297[dir=rtl] #dokuwiki__usertools a.action { 298 padding-left: 0; 299 padding-right: 20px; 300} 301 302[dir=rtl] #IE7 #dokuwiki__usertools a.action { 303 display: inline-block; 304} 305 306#dokuwiki__header .mobileTools { 307 display: none; /* hide mobile tools dropdown to only show in mobile view */ 308} 309 310/*____________ user tools ____________*/ 311 312#dokuwiki__usertools { 313 314 .pure-menu; 315 .pure-menu-horizontal; 316 float:right; 317 width:auto; 318 background:#333; 319 320 li.much { 321 .pure-menu-item; 322 .pure-menu-has-children; 323 .pure-menu-allow-hover; 324 } 325 326 ul { 327 .pure-menu-item; 328 } 329 330 li { 331 .pure-menu-item; 332 } 333} 334 335[dir=rtl] ##dokuwiki__header usertools { 336 text-align: left; 337 left: 40px; 338 right: auto; 339 340 a.action.admin { 341 background-position: right 0; 342 } 343 344 a.action.profile { 345 background-position: right -32px; 346 } 347 348 a.action.register { 349 background-position: right -64px; 350 } 351 352 a.action.login { 353 background-position: right -96px; 354 } 355 356 a.action.logout { 357 background-position: right -128px; 358 } 359} 360 361/*____________ site tools ____________*/ 362 363#dokuwiki__sitetools { 364 text-align: right; 365 form.search { 366 font-size: 0.875em; 367 } 368 a.action.recent { 369 background-position: left -96px; 370 } 371 372} 373 374[dir=rtl] #dokuwiki__sitetools { 375 text-align: left; 376} 377 378/*____________ breadcrumbs ____________*/ 379 380.dokuwiki div.breadcrumbs { 381 382 width: 100%; 383 background: #e6e6e6; 384 border-bottom: #222c37 0px solid; 385 386 div { 387 padding: .1em .35em; 388 } 389 390 div:only-child { 391 border-top: 1px solid @ini_background; 392 border-bottom: 1px solid @ini_border; 393 } 394 395 div:first-child { 396 //border-top: 1px solid @ini_background; 397 } 398 399 div:last-child { 400 //border-bottom: 1px solid @ini_border; 401 } 402 403 .bcsep { 404 font-size: 0.75em; 405 } 406 407 .trace { 408 span.info { 409 float: right; 410 } 411 } 412} 413 414#IE7 .dokuwiki div.breadcrumbs div, 415#IE8 .dokuwiki div.breadcrumbs div { 416 //border-bottom: 1px solid @ini_border; 417} 418 419/* sidebar 420********************************************************************/ 421 422.dokuwiki .aside { 423 font-size: 0.875em; 424 overflow: hidden; 425 word-wrap: break-word; 426 427 /* make sidebar more condensed */ 428 429 h1 { 430 font-size: 1.714em; 431 margin-bottom: .292em; 432 } 433 434 h2 { 435 margin: 2em 0 1em 0; 436 font-size: 14px; 437 border-bottom: 1px solid #EEE; 438 padding-left: 10px; 439 } 440 441 h3 { 442 margin-bottom: .444em; 443 } 444 445 h4 { 446 margin-bottom: .5em; 447 } 448 449 h5 { 450 margin-bottom: .5714em; 451 } 452 453 p, 454 ul, 455 ol, 456 dl, 457 pre, 458 table, 459 fieldset, 460 hr, 461 blockquote, 462 address { 463 margin-bottom: .7em; 464 } 465 466 ul, 467 ol { 468 padding-left: .5em; 469 } 470 471 li ul, 472 li ol { 473 margin-bottom: 0; 474 padding: 0; 475 } 476 477 a:link, 478 a:visited { 479 color: @ini_link; 480 background-color: inherit; 481 } 482} 483 484[dir=rtl] .dokuwiki .aside ul, 485[dir=rtl] .dokuwiki .aside ol { 486 padding-right: .5em; 487} 488 489/* content 490********************************************************************/ 491 492.dokuwiki .pageId { 493 margin: 0.2em 0; 494 color: #333; 495 text-align: center; 496 border-bottom: 1px solid #eee; 497 font-size: 3em; 498 font-weight: 300; 499 max-width: 800px; 500 margin: 0px auto 50px; 501} 502 503.dokuwiki div.page { 504 margin: 0 auto; 505 max-width: 800px; 506 margin-bottom: 50px; 507 line-height: 1.6em; 508 padding: 1.556em 2em 0; 509 510 p { 511 margin: 1em auto; 512 padding: 0 2em; 513 max-width: 800px; 514 line-height: 1.6em; 515 } 516} 517 518.dokuwiki .docInfo { 519 font-size: 0.875em; 520 text-align: right; 521} 522 523/* license note under edit window */ 524.dokuwiki div.license { 525 font-size: 93.75%; 526} 527 528[dir=rtl] .dokuwiki .docInfo { 529 text-align: left; 530} 531 532[dir=rtl] .dokuwiki .pageId { 533 right: auto; 534 left: -1em; 535} 536 537/* footer 538********************************************************************/ 539 540.dokuwiki .wrapper { 541 margin-bottom: 1.4em; 542} 543 544#dokuwiki__footer { 545 margin-bottom: 1em; 546 text-align: center; 547 548 > .pad { 549 font-size: 0.875em; 550 } 551 552 div.license { 553 margin-bottom: 0.5em; 554 font-size: 100%; 555 } 556 557 div.buttons a { 558 img { 559 opacity: 0.5; 560 } 561 562 &:hover img, 563 &:active img, 564 &:focus img { 565 opacity: 1; 566 } 567 } 568 569} 570 571[dir=rtl] #dokuwiki__footer .license img { 572 margin: 0 0 0 .5em; 573} 574