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.dokuwiki div.page {
17    height: 190px;
18    min-height: 190px; /* 30 (= height of icons) x 6 (= maximum number of possible tools) + 2x5 */
19    height: auto;
20}
21#dokuwiki__usertools {
22    /* move the tools just outside of the site */
23    right: 40px;
24}
25[dir=rtl] #dokuwiki__usertools {
26    right: auto;
27    left: 40px;
28}
29
30
31#dokuwiki__pagetools {
32    position: absolute;
33    right: -40px;
34    /* on same vertical level as first headline, because .page has 2em padding */
35    top: 2em;
36    width: 40px;
37}
38[dir=rtl] #dokuwiki__pagetools {
39    right: auto;
40    left: -40px;
41}
42
43#dokuwiki__pagetools div.tools {
44    position: fixed;
45    width: 40px;
46}
47
48#dokuwiki__pagetools ul {
49    position: absolute;
50    right: 0;
51    text-align: right;
52    margin: 0;
53    padding: 0;
54    /* add transparent border to prevent jumping when proper border is added on hover */
55    border: 1px solid transparent;
56    z-index: 10;
57}
58[dir=rtl] #dokuwiki__pagetools ul {
59    right: auto;
60    left: 0;
61    text-align: left;
62}
63
64#dokuwiki__pagetools ul li {
65    padding: 0;
66    margin: 0;
67    list-style: none;
68    font-size: 0.875em;
69}
70
71#dokuwiki__pagetools ul li a {
72    display: block;
73    min-height: 20px; /* 30 - 2x5 */
74    line-height: 20px;
75    padding: 0;
76    background-position: right 0;
77    background-repeat: no-repeat;
78    /* add transparent border to prevent jumping when proper border is added on focus */
79    border: 1px solid transparent;
80    white-space: nowrap;
81    width: 30px;
82    height: 30px;
83    overflow: hidden;
84    margin-left: auto; /* align right if the ul is larger because one item is focused */
85}
86
87#dokuwiki__pagetools ul li a:before {
88    content: url(images/pagetools-sprite.png?v=2);
89    display: inline-block;
90    font-size: 0;
91    line-height: 0;
92}
93
94[dir=rtl] #dokuwiki__pagetools ul li a {
95    background-position: left 0;
96    margin-right: auto;
97    margin-left: 0;
98}
99
100/* show all tools on hover and individual tools on focus */
101#dokuwiki__pagetools:hover ul,
102#dokuwiki__pagetools ul li a:focus,
103#dokuwiki__pagetools ul li a:active {
104    background-color: @ini_background;
105    border-color: @ini_border;
106    border-radius: 2px;
107    box-shadow: 2px 2px 2px @ini_text_alt;
108}
109
110#dokuwiki__pagetools:hover ul li a,
111#dokuwiki__pagetools ul li a:focus,
112#dokuwiki__pagetools ul li a:active {
113    width: auto;
114    height: auto;
115    overflow: visible;
116    padding: 5px 40px 5px 5px;
117    background-image: url(images/pagetools-sprite.png?v=2);
118}
119
120#dokuwiki__pagetools:hover ul li a:before,
121#dokuwiki__pagetools ul li a:focus:before {
122    content: none;
123}
124
125[dir=rtl] #dokuwiki__pagetools:hover ul,
126[dir=rtl] #dokuwiki__pagetools ul li a:focus {
127    box-shadow: -2px 2px 2px @ini_text_alt;
128}
129
130[dir=rtl] #dokuwiki__pagetools:hover li a,
131[dir=rtl] #dokuwiki__pagetools ul li a:focus,
132[dir=rtl] #dokuwiki__pagetools ul li a:active {
133    padding: 5px 5px 5px 40px;
134}
135
136#dokuwiki__pagetools ul li a:hover,
137#dokuwiki__pagetools ul li a:active,
138#dokuwiki__pagetools ul li a:focus {
139    text-decoration: none;
140}
141#dokuwiki__pagetools ul li a:hover {
142    background-color: @ini_background_alt;
143}
144
145/*____________ all available icons in sprite ____________*/
146
147@pagetools_icon_space: -90px;
148
149/**
150 * page tools without highlighting
151 *
152 * @param string @action The action class
153 * @param int @position Position in the page tools sprite
154 */
155.pagetools-item(@action, @position) {
156    @position-active: (@position+0.5);
157
158    #dokuwiki__pagetools ul li a.@{action} {
159        background-position: right @pagetools_icon_space * @position;
160
161        &:before {
162            margin-top: @pagetools_icon_space * @position;
163        }
164        &:hover,
165        &:active,
166        &:focus {
167            background-position: right @pagetools_icon_space * @position-active;
168        }
169    }
170    [dir=rtl] #dokuwiki__pagetools ul li a.@{action} {
171        background-position: left @pagetools_icon_space * @position;
172
173        &:hover,
174        &:active,
175        &:focus {
176            background-position: left @pagetools_icon_space * @position-active;
177        }
178    }
179}
180
181/**
182 * page tools with highlighting
183 *
184 * @param string @action The action class
185 * @param int @position Position in the page tools sprite
186 * @param string @mode The mode in which this tool should be highlighted
187 */
188.pagetools-item(@action, @position, @mode) {
189  .pagetools-item(@action, @position);
190  @position-active: (@position+0.5);
191
192  .mode_@{mode} #dokuwiki__pagetools ul li a.@{action} {
193    background-position: right @pagetools_icon_space * @position-active;
194    &:before {
195      margin-top: @pagetools_icon_space * @position-active;
196    }
197  }
198  [dir=rtl] .mode_@{mode} #dokuwiki__pagetools ul li a.@{action} {
199    background-position: left @pagetools_icon_space * @position-active;
200  }
201}
202
203.pagetools-item(edit, 1);
204.pagetools-item(create, 2);
205.pagetools-item(show, 4);
206.pagetools-item(source, 5);
207.pagetools-item(draft, 3);
208.pagetools-item(revs, 7, revisions);
209.pagetools-item(backlink, 8, backlink);
210.pagetools-item(top, 10);
211.pagetools-item(revert, 6, revert);
212.pagetools-item(subscribe, 9, subscribe);
213.pagetools-item(mediaManager, 11);
214.pagetools-item(back, 12);
215.pagetools-item(img_backto, 12);
216