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/* IE7 fixes, doesn't work without images */
137
138#IE7 #dokuwiki__pagetools ul li a {
139    background-image: url(images/pagetools-sprite.png?v=2);
140}
141
142#IE7 #dokuwiki__pagetools:hover ul li a span,
143#IE7 #dokuwiki__pagetools ul li a:focus span,
144#IE7 #dokuwiki__pagetools ul li a:active span {
145    clip: auto;
146    display: inline;
147    position: static;
148}
149
150#IE7 #dokuwiki__pagetools ul li a span {
151    clip: rect(0 0 0 0);
152    position: absolute;
153}
154
155#dokuwiki__pagetools ul li a:hover,
156#dokuwiki__pagetools ul li a:active,
157#dokuwiki__pagetools ul li a:focus {
158    text-decoration: none;
159}
160#dokuwiki__pagetools ul li a:hover {
161    background-color: @ini_background_alt;
162}
163
164/*____________ all available icons in sprite ____________*/
165
166@pagetools_icon_space: -90px;
167
168/**
169 * page tools without highlighting
170 *
171 * @param string @action The action class
172 * @param int @position Position in the page tools sprite
173 */
174.pagetools-item(@action, @position) {
175    @position-active: (@position+0.5);
176
177    #dokuwiki__pagetools ul li a.@{action} {
178        background-position: right @pagetools_icon_space * @position;
179
180        &:before {
181            margin-top: @pagetools_icon_space * @position;
182        }
183        &:hover,
184        &:active,
185        &:focus {
186            background-position: right @pagetools_icon_space * @position-active;
187        }
188    }
189    [dir=rtl] #dokuwiki__pagetools ul li a.@{action} {
190        background-position: left @pagetools_icon_space * @position;
191
192        &:hover,
193        &:active,
194        &:focus {
195            background-position: left @pagetools_icon_space * @position-active;
196        }
197    }
198}
199
200/**
201 * page tools with highlighting
202 *
203 * @param string @action The action class
204 * @param int @position Position in the page tools sprite
205 * @param string @mode The mode in which this tool should be highlighted
206 */
207.pagetools-item(@action, @position, @mode) {
208  .pagetools-item(@action, @position);
209  @position-active: (@position+0.5);
210
211  .mode_@{mode} #dokuwiki__pagetools ul li a.@{action} {
212    background-position: right @pagetools_icon_space * @position-active;
213    &:before {
214      margin-top: @pagetools_icon_space * @position-active;
215    }
216  }
217  [dir=rtl] .mode_@{mode} #dokuwiki__pagetools ul li a.@{action} {
218    background-position: left @pagetools_icon_space * @position-active;
219  }
220}
221
222.pagetools-item(edit, 1);
223.pagetools-item(create, 2);
224.pagetools-item(show, 4);
225.pagetools-item(source, 5);
226.pagetools-item(draft, 3);
227.pagetools-item(revs, 7, revisions);
228.pagetools-item(backlink, 8, backlink);
229.pagetools-item(top, 10);
230.pagetools-item(revert, 6, revert);
231.pagetools-item(subscribe, 9, subscribe);
232.pagetools-item(mediaManager, 11);
233.pagetools-item(back, 12);
234