1/**
2 * This file provides the design styles for the direct / menu jump links.
3 */
4
5#dokuwiki__usertools.nav-usertools {
6    @media @screen_min-md {
7        right: 1.25rem;
8    }
9
10    @media @screen_max-md {
11        position: absolute;
12        top: 0;
13        left: (@toggle-size + 1.25); // margin-left content
14        right: @headericons-margin-xxs;
15        margin-top: 0;
16        margin-right: 0;
17    }
18
19    &.has-bar {
20        @media @screen_min-md {
21            margin-top: @height-context-bar;
22            padding-top: .5em;
23        }
24    }
25
26    /* + + + + +  icon list  + + + + + */
27    ul {
28        float: right;
29        padding: 0;
30        margin: (@very-small-spacing * 2) -.25rem 0 0;
31
32        @media @screen_max-md {
33            margin-right: .5rem;
34        }
35
36        @media @screen_max-xxs {
37            margin-right: -.3rem;
38        }
39
40        li {
41            .btn-usertools-wrapper(); // uniform li
42            .btn-usertools-num();
43
44            float: right;
45
46            @media @screen_max-xs {
47                display: block;
48                float: none;
49
50                margin-bottom: @headericons-margin-xxs;
51            }
52
53            @media @screen_max-xxs {
54                margin-bottom: (@headericons-margin-xxs - .2);
55                display: none;
56            }
57
58            > span,
59            > a {
60                display: block;
61                width: auto;
62                min-width: (@toggle-size + .25);
63                min-height: @toggle-size;
64                overflow: hidden;
65                border: 1px solid @wikiicons-border;
66                border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
67                text-align: center;
68                margin: 0;
69
70                @media @screen_md-xlg {
71                    padding-top: .14rem;
72                }
73            }
74
75            /* !!! &.user-task FIND in plugins/do_tasks.less !!! */
76            &.user {
77                position: relative;
78                display: table-cell;
79                background-color: @ini_background_site;
80                border: solid 1px @wikiicons-border;
81                border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
82                color: @ini_text_webframe;
83                padding-right: .3rem;
84
85                @media @screen_min-md {
86                    padding-top: .35rem;
87                }
88
89                @media @screen_max-md {
90                    min-height: @toggle-size;
91                    padding-top: .3rem;
92                }
93
94                @media @screen_max-sm {
95                    padding-top: .35rem;
96                }
97
98                @media @screen_max-xs {
99                    position: absolute;
100                    top: @headericons-margin-xxs;
101                    right: (@toggle-size + @headericons-margin-xxs + 1); // 1.75rem + 1 + (button login/out margin-right)
102                    overflow: hidden;
103                    white-space: nowrap;
104                    margin: -1px 0 0;
105                    padding-top: .4rem;
106                }
107
108                @media @screen_max-xxs {
109                    left: -10px;
110                    right: 0;
111                    width: auto;
112                    padding-top: .35rem;
113                }
114
115                > a {
116                    .display-flex();
117                    .align-items();
118
119                    position: relative;
120                    height: 1rem; // for IE11
121                    overflow: visible;
122                    background: @ini_nav_menu_hover_bg; // for removing bg-image
123                    border: 0 none;
124                    color: @ini_nav_menu_hover_color;
125                    text-indent: 0;
126                    font-size: inherit;
127                    margin-right: -.3rem;
128                    padding: 0 .2em 0 0;
129
130                    @media @screen_min-xxlg {
131                        min-height: (@toggle-size - .1);
132                        margin-top: -.4rem;
133                    }
134
135                    @media @screen_max-xxlg {
136                        min-height: (@toggle-size - .15);
137                        margin-top: -.35rem;
138                    }
139
140                    @media @screen_max-md {
141                        min-height: (@toggle-size - .1);
142                        margin-top: -.35rem;
143                    }
144
145                    @media @screen_max-sm {
146                        margin-top: -.35rem;
147                    }
148
149                    @media @screen_max-xs {
150                        margin-top: -.4rem;
151                    }
152
153                    &::before {
154                        content: '';
155                        top: -1px;
156                        bottom: -1px;
157                        left: -1px;
158                        right: -1px;
159                        width: auto;
160                        opacity: 0;
161                        border: solid 1px @ini_nav_menu_hover_color;
162                        border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
163                        color: inherit;
164                        transform: none;
165                    }
166
167                    &:hover,
168                    &:focus,
169                    &:active {
170                        background-color: @ini_nav_menu_hover_color;
171                        color: @ini_nav_menu_hover_bg;
172
173                        &::before {
174                            opacity: 1;
175                            border-color: @ini_nav_menu_hover_color;
176                        }
177
178                        bdi,
179                        bdi:first-of-type {
180                            color: @ini_nav_menu_hover_bg;
181                        }
182                    }
183                }
184
185                bdi {
186                    display: inline-block;
187                    color: inherit;
188                }
189
190                bdi:first-of-type {
191                    .fontello();
192                    .icon-user-circle();
193
194                    position: relative;
195                    margin: 0 0 0 .25rem;
196                    padding: 0 .1rem 0 1.3rem;
197
198                    &::before {
199                        position: absolute;
200                        left: -2px;
201                        font-size: 1.4rem;
202                        margin: 0;
203
204                        @media @screen_min-xxlg {
205                            top: -.25rem;
206                        }
207
208                        @media @screen_max-xxlg {
209                            top: -.2rem;
210                        }
211
212                        @media @screen_max-xs {
213                            top: -.25rem;
214
215                        }
216                    }
217                }
218            } // user
219        } // li
220
221        /* + + +  icons  + + + */
222        .menuitem, button {
223            padding: 2px 0 0 2px;
224            min-height: @toggle-size; // overrides button[type="submit"] styles
225            border: solid 1px @wikiicons-border; // overrides button[type="submit"] styles
226            .btn-hover();
227
228            &:hover svg, &:focus svg {
229                transition: @transition fill;
230                fill: @ini_nav_menu_hover_bg;
231            }
232
233            svg {
234                fill: @ini_nav_menu_hover_color;
235                height: @font-size-default + (@font-scale-factor * 4);
236            }
237
238            span {
239                display: none;
240            }
241        }
242
243        a { // Pre-Greebo backwards compatibility, remove after transitioning to Greebo
244            .fontello();
245            .hide-text-show-before();
246            .btn-hover();
247
248            cursor: pointer;
249            position: relative;
250            line-height: 1;
251            text-decoration: none;
252
253            &::before {
254                .center-middle();
255
256                content: "?";
257                cursor: pointer;
258                display: block;
259                width: 100%;
260                box-sizing: border-box;
261                font-size: @font-size-default + (@font-scale-factor * 4);
262                line-height: 1;
263            }
264
265            /* icon register new user */
266            &.register {
267                .icon-user();
268            }
269
270            /* icon log-out */
271            &.logout {
272                .icon-logout();
273            }
274
275            /* icon log-in */
276            &.login {
277                .icon-login();
278            }
279
280            /* icon admin */
281            &.admin {
282                .icon-cog();
283
284                &::before {
285                    vertical-align: top;
286                }
287            }
288        } // a
289    } // ul
290} // nav-usertools
291
292/* + + + + +  layout option compact  + + + + + */
293.header-compact {
294    #dokuwiki__usertools.nav-usertools {
295
296        // mobile
297        @media @screen_max-md {
298            left: 6rem;
299
300            ul {
301                overflow: hidden;
302
303                li.user {
304                    color: @ini_background_site;
305
306                    bdi {
307                        position: absolute;
308                        width: 0;
309                        padding: 0;
310                        text-indent: -10000px;
311
312                        &:before {
313                            transition: @transition background-color;
314                            background-color: @ini_background_site;
315                            color: @ini_nav_menu_color;
316                            text-indent: 0;
317                        }
318                    }
319
320                    > a {
321                        padding: 0 .2em;
322                        color: @ini_nav_menu_hover_bg;
323
324                        bdi {
325                            &:before {
326                                background-color: @ini_nav_menu_hover_bg;
327                                color: @ini_nav_menu_hover_color;
328                            }
329                        }
330
331                        &:hover {
332                            color: @ini_nav_menu_hover_color;
333
334                            bdi {
335                                &:before {
336                                    background-color: @ini_nav_menu_hover_color;
337                                    color: @ini_nav_menu_hover_bg;
338                                }
339                            }
340                        }
341                    }
342
343                    bdi + bdi {
344                        display: none;
345                    }
346                }
347            }
348        }
349
350        @media @screen_max-sm {
351            ul li {
352                position: static;
353                float: right;
354                top: 0; right: 0;
355            }
356        }
357    }
358}
359