/** * 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; color: var(--color-dark-1); 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: var(--color-dark-1); } } // on interaction show the full item a:active, a:focus, a:hover { background-color: var(--color-dark-6); color: var(--color-blue-4); 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 or focus show all items #dokuwiki__pagetools:hover, #dokuwiki__pagetools:focus-within { div.tools ul { background-color: var(--color-dark-7); border-color: @ini_border; border-radius: 0.25rem; li a span { display: inline-block; } } } /* icons */ #dokuwiki__pagetools div.tools ul li:first-child a { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } #dokuwiki__pagetools div.tools ul li:last-child a { border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } a[title="Edit this page [e]"], a[title="Old revisions [o]"], a[title="Backlinks"], a[title="Back to top [t]"], a[title="Show page [v]"] { position: relative; } a[title="Edit this page [e]"] svg, a[title="Old revisions [o]"] svg, a[title="Backlinks"] svg, a[title="Back to top [t]"] svg, a[title="Show page [v]"] svg { display: none !important; } a[title="Edit this page [e]"]::after, a[title="Old revisions [o]"]::after, a[title="Backlinks"]::after, a[title="Back to top [t]"]::after, a[title="Show page [v]"]::after { display: inline-block; vertical-align: middle; margin: 0 8px; width: 28px; height: 28px; text-align: center; } a[title="Edit this page [e]"]::after { content: url('data:image/svg+xml,'); } a[title="Edit this page [e]"]:hover::after { content: url('data:image/svg+xml,'); } a[title="Old revisions [o]"]::after { content: url('data:image/svg+xml,'); } a[title="Old revisions [o]"]:hover::after { content: url('data:image/svg+xml,'); } a[title="Backlinks"]::after { content: url('data:image/svg+xml,'); } a[title="Backlinks"]:hover::after { content: url('data:image/svg+xml,'); } a[title="Back to top [t]"]::after { content: url('data:image/svg+xml,'); } a[title="Back to top [t]"]:hover::after { content: url('data:image/svg+xml,'); } a[title="Show page [v]"]::after { content: url('data:image/svg+xml,'); } a[title="Show page [v]"]:hover::after { content: url('data:image/svg+xml,'); }