/** * This file provides the styles for the page tools * (fly out navigation beside the page to edit, etc). * * @author Anika Henke * @author Andreas Gohr */ #dokuwiki__site > .site { /* give space to the right so the tools won't disappear on smaller screens */ /* it's 40px because the 30px wide icons will have 5px more spacing to the left and right */ padding-right: 40px; /* give the same space to the left to balance it out */ padding-left: 40px; } .dokuwiki div.page { height: 190px; min-height: 190px; /* 30 (= height of icons) x 6 (= maximum number of possible tools) + 2x5 */ height: auto; } #dokuwiki__usertools { /* move the tools just outside of the site */ right: 40px; } [dir=rtl] #dokuwiki__usertools { right: auto; left: 40px; } #dokuwiki__pagetools { position: absolute; right: -40px; /* on same vertical level as first headline, because .page has 2em padding */ top: 2em; width: 40px; } [dir=rtl] #dokuwiki__pagetools { right: auto; left: -40px; } #dokuwiki__pagetools div.tools { position: fixed; width: 40px; } #dokuwiki__pagetools ul { position: absolute; right: 0; text-align: right; margin: 0; padding: 0; /* add transparent border to prevent jumping when proper border is added on hover */ border: 1px solid transparent; z-index: 10; } [dir=rtl] #dokuwiki__pagetools ul { right: auto; left: 0; text-align: left; } #dokuwiki__pagetools ul li { padding: 0; margin: 0; list-style: none; font-size: 0.875em; } #dokuwiki__pagetools ul li a { display: block; min-height: 20px; /* 30 - 2x5 */ line-height: 20px; padding: 0; background-position: right 0; background-repeat: no-repeat; /* add transparent border to prevent jumping when proper border is added on focus */ border: 1px solid transparent; white-space: nowrap; width: 30px; height: 30px; overflow: hidden; margin-left: auto; /* align right if the ul is larger because one item is focused */ } #dokuwiki__pagetools ul li a:before { content: url(images/pagetools-sprite.png?v=2); display: inline-block; font-size: 0; line-height: 0; } [dir=rtl] #dokuwiki__pagetools ul li a { background-position: left 0; margin-right: auto; margin-left: 0; } /* show all tools on hover and individual tools on focus */ #dokuwiki__pagetools:hover ul, #dokuwiki__pagetools ul li a:focus, #dokuwiki__pagetools ul li a:active { background-color: @ini_background; border-color: @ini_border; border-radius: 2px; box-shadow: 2px 2px 2px @ini_text_alt; } #dokuwiki__pagetools:hover ul li a, #dokuwiki__pagetools ul li a:focus, #dokuwiki__pagetools ul li a:active { width: auto; height: auto; overflow: visible; padding: 5px 40px 5px 5px; background-image: url(images/pagetools-sprite.png?v=2); } #dokuwiki__pagetools:hover ul li a:before, #dokuwiki__pagetools ul li a:focus:before { content: none; } [dir=rtl] #dokuwiki__pagetools:hover ul, [dir=rtl] #dokuwiki__pagetools ul li a:focus { box-shadow: -2px 2px 2px @ini_text_alt; } [dir=rtl] #dokuwiki__pagetools:hover li a, [dir=rtl] #dokuwiki__pagetools ul li a:focus, [dir=rtl] #dokuwiki__pagetools ul li a:active { padding: 5px 5px 5px 40px; } #dokuwiki__pagetools ul li a:hover, #dokuwiki__pagetools ul li a:active, #dokuwiki__pagetools ul li a:focus { text-decoration: none; } #dokuwiki__pagetools ul li a:hover { background-color: @ini_background_alt; } /*____________ all available icons in sprite ____________*/ @pagetools_icon_space: -90px; /** * page tools without highlighting * * @param string @action The action class * @param int @position Position in the page tools sprite */ .pagetools-item(@action, @position) { @position-active: (@position+0.5); #dokuwiki__pagetools ul li a.@{action} { background-position: right @pagetools_icon_space * @position; &:before { margin-top: @pagetools_icon_space * @position; } &:hover, &:active, &:focus { background-position: right @pagetools_icon_space * @position-active; } } [dir=rtl] #dokuwiki__pagetools ul li a.@{action} { background-position: left @pagetools_icon_space * @position; &:hover, &:active, &:focus { background-position: left @pagetools_icon_space * @position-active; } } } /** * page tools with highlighting * * @param string @action The action class * @param int @position Position in the page tools sprite * @param string @mode The mode in which this tool should be highlighted */ .pagetools-item(@action, @position, @mode) { .pagetools-item(@action, @position); @position-active: (@position+0.5); .mode_@{mode} #dokuwiki__pagetools ul li a.@{action} { background-position: right @pagetools_icon_space * @position-active; &:before { margin-top: @pagetools_icon_space * @position-active; } } [dir=rtl] .mode_@{mode} #dokuwiki__pagetools ul li a.@{action} { background-position: left @pagetools_icon_space * @position-active; } } .pagetools-item(edit, 1); .pagetools-item(create, 2); .pagetools-item(show, 4); .pagetools-item(source, 5); .pagetools-item(draft, 3); .pagetools-item(revs, 7, revisions); .pagetools-item(backlink, 8, backlink); .pagetools-item(top, 10); .pagetools-item(revert, 6, revert); .pagetools-item(subscribe, 9, subscribe); .pagetools-item(mediaManager, 11); .pagetools-item(back, 12); .pagetools-item(img_backto, 12);