1/** 2 * This file provides the styles for the page tools 3 * (fly out navigation beside the page to edit, etc). 4 * 5 * @author Anika Henke <anika@selfthinker.org> 6 * @author Andreas Gohr <andi@splitbrain.org> 7 */ 8 9#dokuwiki__site > .site { 10 /* give space to the right so the tools won't disappear on smaller screens */ 11 /* it's 40px because the 30px wide icons will have 5px more spacing to the left and right */ 12 padding-right: 40px; 13 /* give the same space to the left to balance it out */ 14 padding-left: 40px; 15} 16.dokuwiki div.page { 17 height: 190px; 18 min-height: 190px; /* 30 (= height of icons) x 6 (= maximum number of possible tools) + 2x5 */ 19 height: auto; 20} 21#dokuwiki__usertools { 22 /* move the tools just outside of the site */ 23 right: 40px; 24} 25[dir=rtl] #dokuwiki__usertools { 26 right: auto; 27 left: 40px; 28} 29 30 31#dokuwiki__pagetools { 32 position: absolute; 33 right: -40px; 34 /* on same vertical level as first headline, because .page has 2em padding */ 35 top: 2em; 36 width: 40px; 37} 38[dir=rtl] #dokuwiki__pagetools { 39 right: auto; 40 left: -40px; 41} 42 43#dokuwiki__pagetools div.tools { 44 position: fixed; 45 width: 40px; 46} 47 48#dokuwiki__pagetools ul { 49 position: absolute; 50 right: 0; 51 text-align: right; 52 margin: 0; 53 padding: 0; 54 /* add transparent border to prevent jumping when proper border is added on hover */ 55 border: 1px solid transparent; 56 z-index: 10; 57} 58[dir=rtl] #dokuwiki__pagetools ul { 59 right: auto; 60 left: 0; 61 text-align: left; 62} 63 64#dokuwiki__pagetools ul li { 65 padding: 0; 66 margin: 0; 67 list-style: none; 68 font-size: 0.875em; 69} 70 71#dokuwiki__pagetools ul li a { 72 display: block; 73 min-height: 20px; /* 30 - 2x5 */ 74 line-height: 20px; 75 padding: 0; 76 background-position: right 0; 77 background-repeat: no-repeat; 78 /* add transparent border to prevent jumping when proper border is added on focus */ 79 border: 1px solid transparent; 80 white-space: nowrap; 81 width: 30px; 82 height: 30px; 83 overflow: hidden; 84 margin-left: auto; /* align right if the ul is larger because one item is focused */ 85} 86 87#dokuwiki__pagetools ul li a:before { 88 content: url(images/pagetools-sprite.png); 89 display: inline-block; 90 font-size: 0; 91 line-height: 0; 92} 93 94[dir=rtl] #dokuwiki__pagetools ul li a { 95 background-position: left 0; 96 margin-right: auto; 97 margin-left: 0; 98} 99 100/* show all tools on hover and individual tools on focus */ 101#dokuwiki__pagetools:hover ul, 102#dokuwiki__pagetools ul li a:focus, 103#dokuwiki__pagetools ul li a:active { 104 /* background-color: __background__; */ 105 background-color: #999; 106 border-color: __border__; 107 border-radius: 2px; 108 box-shadow: 2px 2px 2px __text_alt__; 109} 110 111#dokuwiki__pagetools:hover ul li a, 112#dokuwiki__pagetools ul li a:focus, 113#dokuwiki__pagetools ul li a:active { 114 width: auto; 115 height: auto; 116 overflow: visible; 117 padding: 5px 40px 5px 5px; 118 background-image: url(images/pagetools-sprite.png); 119} 120 121#dokuwiki__pagetools:hover ul li a:before, 122#dokuwiki__pagetools ul li a:focus:before { 123 content: none; 124} 125 126[dir=rtl] #dokuwiki__pagetools:hover ul, 127[dir=rtl] #dokuwiki__pagetools ul li a:focus { 128 box-shadow: -2px 2px 2px __text_alt__; 129} 130 131[dir=rtl] #dokuwiki__pagetools:hover li a, 132[dir=rtl] #dokuwiki__pagetools ul li a:focus, 133[dir=rtl] #dokuwiki__pagetools ul li a:active { 134 padding: 5px 5px 5px 40px; 135} 136 137/* IE7 fixes, doesn't work without images */ 138 139#IE7 #dokuwiki__pagetools ul li a { 140 background-image: url(images/pagetools-sprite.png); 141} 142 143#IE7 #dokuwiki__pagetools:hover ul li a span, 144#IE7 #dokuwiki__pagetools ul li a:focus span, 145#IE7 #dokuwiki__pagetools ul li a:active span { 146 clip: auto; 147 display: inline; 148 position: static; 149} 150 151#IE7 #dokuwiki__pagetools ul li a span { 152 clip: rect(0 0 0 0); 153 position: absolute; 154} 155 156#dokuwiki__pagetools ul li a:hover, 157#dokuwiki__pagetools ul li a:active, 158#dokuwiki__pagetools ul li a:focus { 159 text-decoration: none; 160} 161#dokuwiki__pagetools ul li a:hover { 162 /* background-color: __background_alt__; */ 163 background-color: #fff; 164 color: #333; 165 text-shadow: none; 166} 167 168/*____________ all available icons in sprite ____________*/ 169 170#dokuwiki__pagetools ul li a.edit { 171 background-position: right 0; 172} 173#dokuwiki__pagetools ul li a.edit:hover, 174#dokuwiki__pagetools ul li a.edit:active, 175#dokuwiki__pagetools ul li a.edit:focus { 176 background-position: right -45px; 177} 178[dir=rtl] #dokuwiki__pagetools ul li a.edit { 179 background-position: left 0; 180} 181[dir=rtl] #dokuwiki__pagetools ul li a.edit:hover, 182[dir=rtl] #dokuwiki__pagetools ul li a.edit:active, 183[dir=rtl] #dokuwiki__pagetools ul li a.edit:focus { 184 background-position: left -45px; 185} 186 187#dokuwiki__pagetools ul li a.create:before { 188 margin-top: -90px; 189} 190#dokuwiki__pagetools ul li a.create { 191 background-position: right -90px; 192} 193#dokuwiki__pagetools ul li a.create:hover, 194#dokuwiki__pagetools ul li a.create:active, 195#dokuwiki__pagetools ul li a.create:focus { 196 background-position: right -135px; 197} 198[dir=rtl] #dokuwiki__pagetools ul li a.create { 199 background-position: left -90px; 200} 201[dir=rtl] #dokuwiki__pagetools ul li a.create:hover, 202[dir=rtl] #dokuwiki__pagetools ul li a.create:active, 203[dir=rtl] #dokuwiki__pagetools ul li a.create:focus { 204 background-position: left -135px; 205} 206 207#dokuwiki__pagetools ul li a.show { 208 background-position: right -270px; 209} 210#dokuwiki__pagetools ul li a.show:before { 211 margin-top: -270px; 212} 213#dokuwiki__pagetools ul li a.show:hover, 214#dokuwiki__pagetools ul li a.show:active, 215#dokuwiki__pagetools ul li a.show:focus { 216 background-position: right -315px; 217} 218[dir=rtl] #dokuwiki__pagetools ul li a.show { 219 background-position: left -270px; 220} 221[dir=rtl] #dokuwiki__pagetools ul li a.show:hover, 222[dir=rtl] #dokuwiki__pagetools ul li a.show:active, 223[dir=rtl] #dokuwiki__pagetools ul li a.show:focus { 224 background-position: left -315px; 225} 226 227#dokuwiki__pagetools ul li a.source { 228 background-position: right -360px; 229} 230#dokuwiki__pagetools ul li a.source:before { 231 margin-top: -360px; 232} 233#dokuwiki__pagetools ul li a.source:hover, 234#dokuwiki__pagetools ul li a.source:active, 235#dokuwiki__pagetools ul li a.source:focus { 236 background-position: right -405px; 237} 238[dir=rtl] #dokuwiki__pagetools ul li a.source { 239 background-position: left -360px; 240} 241[dir=rtl] #dokuwiki__pagetools ul li a.source:hover, 242[dir=rtl] #dokuwiki__pagetools ul li a.source:active, 243[dir=rtl] #dokuwiki__pagetools ul li a.source:focus { 244 background-position: left -405px; 245} 246 247#dokuwiki__pagetools ul li a.draft { 248 background-position: right -180px; 249} 250#dokuwiki__pagetools ul li a.draft:before { 251 margin-top: -180px; 252} 253#dokuwiki__pagetools ul li a.draft:hover, 254#dokuwiki__pagetools ul li a.draft:active, 255#dokuwiki__pagetools ul li a.draft:focus { 256 background-position: right -225px; 257} 258[dir=rtl] #dokuwiki__pagetools ul li a.draft { 259 background-position: left -180px; 260} 261[dir=rtl] #dokuwiki__pagetools ul li a.draft:hover, 262[dir=rtl] #dokuwiki__pagetools ul li a.draft:active, 263[dir=rtl] #dokuwiki__pagetools ul li a.draft:focus { 264 background-position: left -225px; 265} 266 267#dokuwiki__pagetools ul li a.revs { 268 background-position: right -540px; 269} 270#dokuwiki__pagetools ul li a.revs:before { 271 margin-top: -540px; 272} 273#dokuwiki__pagetools ul li a.revs:hover, 274#dokuwiki__pagetools ul li a.revs:active, 275#dokuwiki__pagetools ul li a.revs:focus, 276.mode_revisions #dokuwiki__pagetools ul li a.revs { 277 background-position: right -585px; 278} 279.mode_revisions #dokuwiki__pagetools ul li a.revs:before { 280 margin-top: -585px; 281} 282[dir=rtl] #dokuwiki__pagetools ul li a.revs { 283 background-position: left -540px; 284} 285[dir=rtl] #dokuwiki__pagetools ul li a.revs:hover, 286[dir=rtl] #dokuwiki__pagetools ul li a.revs:active, 287[dir=rtl] #dokuwiki__pagetools ul li a.revs:focus, 288[dir=rtl] .mode_revisions #dokuwiki__pagetools ul li a.revs { 289 background-position: left -585px; 290} 291 292#dokuwiki__pagetools ul li a.backlink { 293 background-position: right -630px; 294} 295#dokuwiki__pagetools ul li a.backlink:before { 296 margin-top: -630px; 297} 298#dokuwiki__pagetools ul li a.backlink:hover, 299#dokuwiki__pagetools ul li a.backlink:active, 300#dokuwiki__pagetools ul li a.backlink:focus, 301.mode_backlink #dokuwiki__pagetools ul li a.backlink { 302 background-position: right -675px; 303} 304.mode_backlink #dokuwiki__pagetools ul li a.backlink:before { 305 margin-top: -675px; 306} 307[dir=rtl] #dokuwiki__pagetools ul li a.backlink { 308 background-position: left -630px; 309} 310[dir=rtl] #dokuwiki__pagetools ul li a.backlink:hover, 311[dir=rtl] #dokuwiki__pagetools ul li a.backlink:active, 312[dir=rtl] #dokuwiki__pagetools ul li a.backlink:focus, 313[dir=rtl] .mode_backlink #dokuwiki__pagetools ul li a.backlink { 314 background-position: left -675px; 315} 316 317#dokuwiki__pagetools ul li a.top { 318 background-position: right -810px; 319} 320#dokuwiki__pagetools ul li a.top:before{ 321 margin-top: -810px; 322} 323#dokuwiki__pagetools ul li a.top:hover, 324#dokuwiki__pagetools ul li a.top:active, 325#dokuwiki__pagetools ul li a.top:focus { 326 background-position: right -855px; 327} 328[dir=rtl] #dokuwiki__pagetools ul li a.top { 329 background-position: left -810px; 330} 331[dir=rtl] #dokuwiki__pagetools ul li a.top:hover, 332[dir=rtl] #dokuwiki__pagetools ul li a.top:active, 333[dir=rtl] #dokuwiki__pagetools ul li a.top:focus { 334 background-position: left -855px; 335} 336 337#dokuwiki__pagetools ul li a.revert { 338 background-position: right -450px; 339} 340#dokuwiki__pagetools ul li a.revert:before { 341 margin-top: -450px; 342} 343#dokuwiki__pagetools ul li a.revert:hover, 344#dokuwiki__pagetools ul li a.revert:active, 345#dokuwiki__pagetools ul li a.revert:focus, 346.mode_revert #dokuwiki__pagetools ul li a.revert { 347 background-position: right -495px; 348} 349.mode_revert #dokuwiki__pagetools ul li a.revert:before { 350 margin-top: -450px; 351} 352[dir=rtl] #dokuwiki__pagetools ul li a.revert { 353 background-position: left -450px; 354} 355[dir=rtl] #dokuwiki__pagetools ul li a.revert:hover, 356[dir=rtl] #dokuwiki__pagetools ul li a.revert:active, 357[dir=rtl] #dokuwiki__pagetools ul li a.revert:focus, 358[dir=rtl] .mode_revert #dokuwiki__pagetools ul li a.revert { 359 background-position: left -495px; 360} 361 362#dokuwiki__pagetools ul li a.subscribe { 363 background-position: right -720px; 364} 365#dokuwiki__pagetools ul li a.subscribe:before { 366 margin-top: -720px; 367} 368#dokuwiki__pagetools ul li a.subscribe:hover, 369#dokuwiki__pagetools ul li a.subscribe:active, 370#dokuwiki__pagetools ul li a.subscribe:focus, 371.mode_subscribe #dokuwiki__pagetools ul li a.subscribe { 372 background-position: right -765px; 373} 374.mode_subscribe #dokuwiki__pagetools ul li a.subscribe:before { 375 margin-top: -765px; 376} 377[dir=rtl] #dokuwiki__pagetools ul li a.subscribe { 378 background-position: left -720px; 379} 380[dir=rtl] #dokuwiki__pagetools ul li a.subscribe:hover, 381[dir=rtl] #dokuwiki__pagetools ul li a.subscribe:active, 382[dir=rtl] #dokuwiki__pagetools ul li a.subscribe:focus, 383[dir=rtl] .mode_subscribe #dokuwiki__pagetools ul li a.subscribe { 384 background-position: left -765px; 385} 386 387#dokuwiki__pagetools ul li a.mediaManager { 388 background-position: right -900px; 389} 390#dokuwiki__pagetools ul li a.mediaManager:before { 391 margin-top: -900px; 392} 393#dokuwiki__pagetools ul li a.mediaManager:hover, 394#dokuwiki__pagetools ul li a.mediaManager:active, 395#dokuwiki__pagetools ul li a.mediaManager:focus { 396 background-position: right -945px; 397} 398[dir=rtl] #dokuwiki__pagetools ul li a.mediaManager { 399 background-position: left -900px; 400} 401[dir=rtl] #dokuwiki__pagetools ul li a.mediaManager:hover, 402[dir=rtl] #dokuwiki__pagetools ul li a.mediaManager:active, 403[dir=rtl] #dokuwiki__pagetools ul li a.mediaManager:focus { 404 background-position: left -945px; 405} 406 407#dokuwiki__pagetools ul li a.back { 408 background-position: right -990px; 409} 410#dokuwiki__pagetools ul li a.back { 411 margin-top: -990px; 412} 413#dokuwiki__pagetools ul li a.back:hover, 414#dokuwiki__pagetools ul li a.back:active, 415#dokuwiki__pagetools ul li a.back:focus { 416 background-position: right -1035px; 417} 418[dir=rtl] #dokuwiki__pagetools ul li a.back { 419 background-position: left -990px; 420} 421[dir=rtl] #dokuwiki__pagetools ul li a.back:hover, 422[dir=rtl] #dokuwiki__pagetools ul li a.back:active, 423[dir=rtl] #dokuwiki__pagetools ul li a.back:focus { 424 background-position: left -1035px; 425} 426