sharix-open-dokuwiki-design-template/css/pagetools.less

/**
 * This file provides the styles for the page tools
 * (fly out navigation beside the page to edit, etc).
 *
 * @author Anika Henke <anika@selfthinker.org>
 * @author Andreas Gohr <andi@splitbrain.org>
 */

#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: var(--ini-border);
                    }
                }

                // on interaction show the full item
                a:active,
                a:focus,
                a:hover {
                    background-color: var(--ini-background-alt);

                    span {
                        display: inline-block;
                    }

                    svg {
                        fill: var(--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(--ini-background);
        border-color: var(--ini-border);
        border-radius: 2px;
        box-shadow: 2px 2px 2px var(--ini-text-alt);

        li a span {
            display: inline-block;
        }
    }
}