xref: /template/sprintdoc/css/area_nav-pagetools.less (revision 9435a59c744bf75bc2f707ed537541f52a7f74d4) 
1/**
2 * This file provides the design styles for the page specific tool bar.
3 *
4 * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
5 */
6
7/*
8 FIXME
9.pagetools-item(edit, 1);
10.pagetools-item(create, 2);
11.pagetools-item(show, 4);
12.pagetools-item(source, 5);
13.pagetools-item(draft, 3);
14.pagetools-item(revs, 7, revisions);
15.pagetools-item(backlink, 8, backlink);
16.pagetools-item(top, 10);
17.pagetools-item(revert, 6, revert);
18.pagetools-item(subscribe, 9, subscribe);
19.pagetools-item(mediaManager, 11);
20.pagetools-item(back, 12);
21.pagetools-item(img_backto, 12);
22*/
23
24#dokuwiki__aside{
25    @media @screen_max-md {
26        display: none !important;
27    }
28}
29
30
31nav#dokuwiki__pagetools {
32    @toolbox-width: 32px;
33
34    top: 3.05rem;
35    z-index: 100;
36
37    @media @screen_min-md {
38        right: -2.5rem;
39    }
40
41    @media @screen_max-md {
42        right: 8px;
43    }
44
45    &:hover {
46        ul {
47            li {
48                a {
49                    box-shadow: none;
50                    background-image: none;
51                    border-color: transparent;
52                }
53            }
54        }
55    }
56
57    ul {
58        li {
59            * {
60                font-size: @font-size-default;
61            }
62
63            &.plugin_move_page {
64                a {
65                    opacity: .6;
66                    color: @color-nav;
67
68                    * {
69                        color: inherit;
70                    }
71
72                    &:hover,
73                    &:focus,
74                    &:active {
75                        color: @color-nav-hover;
76                        background-color: #fff;
77                        opacity: 1;
78                    }
79                }
80            }
81
82            a {
83                .fontello-double();
84
85                position: relative;
86                min-height: @toolbox-width; // for nav:hover
87                opacity: .6;
88                color: @color-nav;
89                font-size: @font-size-default;
90
91                * {
92                    color: inherit;
93                }
94
95                &::before {
96                    display: none;
97                }
98
99                &::after {
100                    position: absolute;
101                    top: 0;
102                    right: 0;
103                    width: @toolbox-width;
104                    height: 100%;
105                    box-sizing: border-box;
106                    font-size: @font-size-big;
107                    margin: 0;
108                    padding-top: .2rem;
109
110                    @media @screen_min-md {
111                        background-color: @color-site-bg;
112                    }
113
114                    @media @screen_max-xlg {
115                        padding-top: .25rem;
116                    }
117
118                    @media @screen_max-lg {
119                        padding-top: .4rem;
120                    }
121
122                    @media @screen_max-md {
123                        background-color: #FFF;
124                        padding-top: 0;
125                    }
126                }
127
128                &:hover,
129                &:focus,
130                &:active {
131                    opacity: 1;
132                    color: @color-nav-hover;
133                    background-color: #FFF;
134                }
135
136                &.source {
137                    .icon-code();
138
139                    &::after {
140                        @media @screen_min-xlg {
141                            padding-top: .25rem;
142                        }
143
144                        @media @screen_max-xlg {
145                            padding-top: .35rem;
146                        }
147
148                        @media @screen_max-md {
149                            padding-top: .05rem;
150                        }
151                    }
152                }
153
154                &.edit {
155                    .icon-pencil();
156                }
157
158                &.revs {
159                    .icon-revisions-history();
160                }
161
162                &.backlink {
163                    .icon-link();
164                }
165
166                &.top {
167                    .icon-up-bold();
168                    margin-top: 1em;
169
170                    &::after {
171                        @media @screen_min-lg {
172                            padding-top: .15rem;
173                        }
174
175                        @media @screen_max-lg {
176                            padding-top: .25rem;
177                        }
178
179                        @media @screen_max-md {
180                            padding-top: .05rem;
181                        }
182                    }
183                }
184
185                &.plugin_bookcreator_addtobook {
186                    .icon-book-open();
187                }
188
189                &.export_pdf {
190                    .icon-file-pdf();
191                }
192
193                &.show {
194                    .icon-file-text();
195                }
196            }
197        }
198    }
199/*
200<ul>
201  <li><a href="#" class="action edit" title="Diese Seite bearbeiten [E]">Diese Seite bearbeiten</a></li>
202  <li><a href="#" class="action revs" title="Ältere Versionen [O]">Ältere Versionen</a></li>
203  <li><a href="#" class="action backlink" title="Links hierher">Links hierher</a></li>
204  <li><a href="#" class="action export_pdf" title="PDF exportieren"><span>PDF exportieren</span></a></li>
205  <li><a href="#" class="action source" title="PDF exportieren"><span>source</span></a></li>
206  <li><a href="#" class="action show" title="PDF exportieren"><span>show</span></a></li>
207  <li><a href="#" class="action plugin_bookcreator_addtobook" title="PDF exportieren"><span>was auch immer</span></a></li>
208  <li><a href="#" class="action top" title="Nach oben [T]">Nach oben</a></li>
209</ul>
210*/
211    &:hover {
212        ul {
213            background-color: #fff;
214            box-shadow: @box-shadow-offset;
215
216            li {
217                a {
218                    opacity: .8;
219
220                    &::after {
221                        background-color: #FFF;
222                    }
223
224                    &:hover,
225                    &:focus,
226                    &:active {
227                        opacity: 1;
228                    }
229                }
230            }
231        }
232    }
233}
234