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                    color: var(--color-dark-1);
65
66                    span {
67                        display: none; // hide label until hover
68                        margin: 0 @ico-margin;
69                    }
70
71                    svg {
72                        width: @ico-width;
73                        height: @ico-width;
74                        margin: 0 @ico-margin;
75                        display: inline-block;
76                        vertical-align: middle;
77                        fill: var(--color-dark-1);
78                    }
79                }
80
81                // on interaction show the full item
82                a:active,
83                a:focus,
84                a:hover {
85                    background-color: var(--color-dark-6);
86                    color: var(--color-blue-4);
87
88                    span {
89                        display: inline-block;
90                    }
91
92                    svg {
93                        fill: @ini_link;
94                    }
95                }
96            }
97        }
98    }
99
100    [dir=rtl] & {
101        right: auto;
102        left: (-1 * @item-width);
103
104        div.tools {
105            ul {
106                right: auto;
107                left: 0;
108                text-align: left;
109            }
110        }
111    }
112}
113
114// on hover or focus show all items
115#dokuwiki__pagetools:hover, #dokuwiki__pagetools:focus-within {
116    div.tools ul {
117        background-color: var(--color-dark-7);
118        border-color: @ini_border;
119        border-radius: 0.25rem;
120
121        li a span {
122            display: inline-block;
123        }
124    }
125}
126
127/* icons */
128
129#dokuwiki__pagetools div.tools ul li:first-child a {
130    border-top-left-radius: 0.25rem;
131    border-top-right-radius: 0.25rem;
132}
133#dokuwiki__pagetools div.tools ul li:last-child a {
134    border-bottom-left-radius: 0.25rem;
135    border-bottom-right-radius: 0.25rem;
136}
137
138a[title="Edit this page [e]"],
139a[title="Old revisions [o]"],
140a[title="Backlinks"],
141a[title="Back to top [t]"],
142a[title="Show page [v]"] {
143    position: relative;
144}
145a[title="Edit this page [e]"] svg,
146a[title="Old revisions [o]"] svg,
147a[title="Backlinks"] svg,
148a[title="Back to top [t]"] svg,
149a[title="Show page [v]"] svg {
150    display: none !important;
151}
152a[title="Edit this page [e]"]::after,
153a[title="Old revisions [o]"]::after,
154a[title="Backlinks"]::after,
155a[title="Back to top [t]"]::after,
156a[title="Show page [v]"]::after {
157    display: inline-block;
158    vertical-align: middle;
159    margin: 0 8px;
160    width: 28px;
161    height: 28px;
162    text-align: center;
163}
164
165
166a[title="Edit this page [e]"]::after {
167    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-edit" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="%23b8b8b8" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" /><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" /><path d="M16 5l3 3" /></svg>');
168}
169a[title="Edit this page [e]"]:hover::after {
170    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-edit" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="%234dabf7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" /><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" /><path d="M16 5l3 3" /></svg>');
171}
172
173a[title="Old revisions [o]"]::after {
174    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clock-search" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="%23b8b8b8" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M20.993 11.646a9 9 0 1 0 -9.318 9.348" /><path d="M12 7v5l1 1" /><path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M20.2 20.2l1.8 1.8" /></svg>');
175}
176a[title="Old revisions [o]"]:hover::after {
177    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clock-search" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="%234dabf7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M20.993 11.646a9 9 0 1 0 -9.318 9.348" /><path d="M12 7v5l1 1" /><path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M20.2 20.2l1.8 1.8" /></svg>');
178}
179
180a[title="Backlinks"]::after {
181    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="%23b8b8b8" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 15l6 -6" /><path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" /><path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" /></svg>');
182}
183a[title="Backlinks"]:hover::after {
184    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="%234dabf7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 15l6 -6" /><path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" /><path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" /></svg>');
185}
186
187a[title="Back to top [t]"]::after {
188    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-chevron-up" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="%23b8b8b8" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 13l3 -3l3 3" /><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /></svg>');
189}
190a[title="Back to top [t]"]:hover::after {
191    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-chevron-up" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="%234dabf7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 13l3 -3l3 3" /><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /></svg>');
192}
193
194a[title="Show page [v]"]::after {
195    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="%23b8b8b8" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /></svg>');
196}
197a[title="Show page [v]"]:hover::after {
198    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="%234dabf7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /></svg>');
199}