/** * 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__pagetools { @ico-width: 28px; @ico-margin: 8px; @item-width: (@ico-width + @ico-margin + @ico-margin); @item-height: (@ico-width + @ico-margin); position: absolute; right: (-1 * @item-width); /* on same vertical level as first headline, because .page has 2em padding */ top: 2em; width: @item-width; div.tools { position: fixed; width: @item-width; 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; li { padding: 0; margin: 0; list-style: none; font-size: 0.875em; a { display: block; /* add transparent border to prevent jumping when proper border is added on focus */ border: 1px solid transparent; white-space: nowrap; line-height: @item-height; vertical-align: middle; height: @item-height; span { display: none; // hide label until hover margin: 0 @ico-margin; } svg { width: @ico-width; height: @ico-width; margin: 0 @ico-margin; display: inline-block; vertical-align: middle; fill: @ini_border; } } // on interaction show the full item a:active, a:focus, a:hover { background-color: @ini_background_alt; span { display: inline-block; } svg { fill: @ini_link; } } } } } [dir=rtl] & { right: auto; left: (-1 * @item-width); div.tools { ul { right: auto; left: 0; text-align: left; } } } } // on hover show all items #dokuwiki__pagetools:hover { div.tools ul { background-color: @ini_background; border-color: @ini_border; border-radius: 2px; box-shadow: 2px 2px 2px @ini_text_alt; li a span { display: inline-block; } } }