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