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
17.dokuwiki div.page {
18    height: 190px;
19    min-height: 190px; /* 30 (= height of icons) x 6 (= maximum number of possible tools) + 2x5 */
20    height: auto;
21}
22
23#dokuwiki__pagetools {
24    @ico-width: 28px;
25    @ico-margin: 8px;
26    @item-width: (@ico-width + @ico-margin + @ico-margin);
27    @item-height: (@ico-width + @ico-margin);
28
29    position: absolute;
30    right: (-1 * @item-width);
31    /* on same vertical level as first headline, because .page has 2em padding */
32    top: 2em;
33    width: @item-width;
34
35    div.tools {
36        position: fixed;
37        width: @item-width;
38
39        ul {
40            position: absolute;
41            right: 0;
42            text-align: right;
43            margin: 0;
44            padding: 0;
45            /* add transparent border to prevent jumping when proper border is added on hover */
46            border: 1px solid transparent;
47            z-index: 10;
48
49            li {
50                padding: 0;
51                margin: 0;
52                list-style: none;
53                font-size: 0.875em;
54
55                a {
56
57                    display: block;
58                    /* add transparent border to prevent jumping when proper border is added on focus */
59                    border: 1px solid transparent;
60                    white-space: nowrap;
61                    line-height: @item-height;
62                    vertical-align: middle;
63                    height: @item-height;
64
65                    span {
66                        display: none; // hide label until hover
67                        margin: 0 @ico-margin;
68                    }
69
70                    svg {
71                        width: @ico-width;
72                        height: @ico-width;
73                        margin: 0 @ico-margin;
74                        display: inline-block;
75                        vertical-align: middle;
76                        fill: @ini_border;
77                    }
78                }
79
80                // on interaction show the full item
81                a:active,
82                a:focus,
83                a:hover {
84                    background-color: @ini_background_alt;
85
86                    span {
87                        display: inline-block;
88                    }
89
90                    svg {
91                        fill: @ini_link;
92                    }
93                }
94            }
95        }
96    }
97
98    [dir=rtl] & {
99        right: auto;
100        left: (-1 * @item-width);
101
102        div.tools {
103            ul {
104                right: auto;
105                left: 0;
106                text-align: left;
107            }
108        }
109    }
110}
111
112// on hover or focus show all items
113#dokuwiki__pagetools:hover, #dokuwiki__pagetools:focus-within {
114    div.tools ul {
115        background-color: @ini_background;
116        border-color: @ini_border;
117        border-radius: 2px;
118        box-shadow: 2px 2px 2px @ini_text_alt;
119
120        li a span {
121            display: inline-block;
122        }
123    }
124}
125