xref: /template/sprintdoc/css/area_nav-usertools.less (revision b3aa151af476d317b6ae1192643feec22bad29c1) 
1/**
2 * This file provides the design styles for the direct / menu jump links.
3 *
4 * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
5 */
6
7
8#dokuwiki__usertools.nav-usertools {
9    @media @screen_min-md {
10        right: 1.25rem;
11    }
12
13    @media @screen_max-md {
14        position: absolute;
15        top: 0;
16        left: (@toggle-size + 1.25); // margin-left content
17        right: @headericons-margin-xxs;
18        margin-top: 0;
19        margin-right: 0;
20    }
21
22    &.has-bar {
23        @media @screen_min-md {
24            margin-top: @height-context-bar;
25            padding-top: .5em;
26        }
27    }
28
29
30/* + + + + +  icon list  + + + + + */
31    ul {
32        float: right;
33        padding: 0;
34        margin: (@very-small-spacing * 2) -.25rem 0 0;
35
36        @media @screen_max-md {
37            margin-right: .5rem;
38        }
39
40        @media @screen_max-xxs {
41            margin-right: -.3rem;
42        }
43
44        li {
45            .btn-usertools-wrapper(); // uniform li
46            .btn-usertools-num();
47
48            float: right;
49            min-height: 28px;
50
51            @media @screen_max-xs {
52                display: block;
53                float: none;
54                margin-bottom: @headericons-margin-xxs;
55            }
56
57            > span,
58            > a {
59                display: block;
60                width: auto;
61                min-height: @toggle-size;
62                overflow: hidden;
63                border: 1px solid @wikiicons-border;
64                border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
65                text-align: center;
66                margin: 0;
67
68                @media @screen_md-xlg {
69                    padding-top: .14rem;
70                }
71
72                @media @screen_max-xxlg {
73                    min-height: 28px;
74                }
75
76                @media @screen_max-md {
77                    min-height: @toggle-size;
78                }
79
80                @media @screen_only-lg {
81                    min-width: 2rem;
82                }
83            }
84
85            &.user {
86                @space-min-xxlg: .35rem;
87                @space-max-xxlg: .4rem;
88                @space-max-xlg: .5rem;
89                @space-max-md: .35rem;
90
91                position: relative;
92                display: table-cell;
93                background-color: @ini_background_site;
94                border: solid 1px @wikiicons-border; // @ini_border_light;
95                border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
96                color: @ini_text_webframe;
97                padding-right: .3rem;
98
99                @media @screen_min-xxlg {
100                    padding-top: @space-min-xxlg;
101                }
102
103                @media @screen_max-xxlg {
104                    padding-top: @space-max-xxlg;
105                }
106
107                @media @screen_max-xlg {
108                    padding-top: @space-max-xlg;
109                }
110
111                @media @screen_max-md {
112                    min-height: @toggle-size;
113                    padding-top: @space-max-md;
114                }
115
116                @media @screen_max-xs {
117                    position: absolute;
118                    top: @headericons-margin-xxs;
119                    right: 2.9rem;
120                    overflow: hidden;
121                    white-space: nowrap;
122                    margin: -1px 0 0;
123                }
124
125                @media @screen_max-xxs {
126                    left: -10px;
127                    right: (@toggle-size + @headericons-margin-xxs);
128                    width: auto;
129                }
130
131                > a {
132                    .display-flex();
133                    .align-items();
134
135                    position: relative;
136                    min-height: 26px;
137                    height: 1rem; // for IE11
138                    overflow: visible;
139                    background: @ini_nav_menu_hover_bg; // for removing bg-image
140                    border: 0 none;
141                    color: @ini_nav_menu_hover_color;
142                    text-indent: 0;
143                    font-size: inherit;
144                    margin-right: -.3rem;
145                    padding: 0 .2em 0 0;
146
147                    @media @screen_only-xlg {
148                        padding-bottom: .1em;
149                    }
150
151                    @media @screen_min-xxlg {
152                        margin-top: -(@space-min-xxlg);
153                    }
154
155                    @media @screen_max-xxlg {
156                        margin-top: -(@space-max-xxlg);
157                    }
158
159                    @media @screen_max-xlg {
160                        margin-top: -(@space-max-xlg);
161                    }
162
163                    @media @screen_max-md {
164                        min-height: (@toggle-size - .1);
165                        margin-top: -(@space-max-md);
166                    }
167
168                    @media @screen_max-xxs {
169                        min-height: (@toggle-size - .15);
170                    }
171
172                    &::before {
173                        content: '';
174                        top: -1px;
175                        bottom: -1px;
176                        left: -1px;
177                        right: -1px;
178                        width: auto;
179                        opacity: 0;
180                        border: solid 1px @ini_nav_menu_hover_color;
181                        border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
182                        color: inherit;
183                        transform: none;
184                    }
185
186                    &:hover,
187                    &:focus,
188                    &:active {
189                        background-color: @ini_nav_menu_hover_color;
190                        color: @ini_nav_menu_hover_bg;
191
192                        &::before {
193                            opacity: 1;
194                            border-color: @ini_nav_menu_hover_bg;
195                        }
196
197                        bdi,
198                        bdi:first-of-type {
199                            color: @ini_nav_menu_hover_bg;
200                        }
201                    }
202                }
203
204                bdi {
205                    display: inline-block;
206                    color: inherit;
207                }
208
209                bdi:first-of-type {
210                    .fontello();
211                    .icon-user-circle();
212
213                    position: relative;
214                    margin: 0 0 0 .25rem;
215                    padding: 0 .1rem 0 1.3rem;
216
217                    &::before {
218                        position: absolute;
219                        left: -2px;
220                        font-size: 1.4rem;
221                        margin: 0;
222
223                        @media @screen_min-xxlg {
224                            top: -.25rem;
225                        }
226
227                        @media @screen_max-xxlg {
228                            top: -.2rem;
229                        }
230
231                        @media @screen_max-xs {
232                            top: -.25rem;
233
234                        }
235                    }
236                }
237            } // user
238        } // li
239
240
241/* + + +  icons  + + + */
242        a {
243            .fontello();
244            .hide-text-show-before();
245            .btn-hover();
246
247            cursor: pointer;
248            position: relative;
249            line-height: 1;
250            text-decoration: none;
251
252            @media @screen_md-xlg {
253                min-width: 2rem;
254            }
255
256            &::before {
257                .center-middle();
258
259                content: "?";
260                cursor: pointer;
261                display: block;
262                width: 100%;
263                box-sizing: border-box;
264                font-size: @font-size-default + (@font-scale-factor * 4);
265                line-height: 1;
266            }
267
268            /* icon register new user */
269            &.register {
270                .icon-user();
271            }
272
273            /* icon log-out */
274            &.logout {
275                .icon-logout();
276            }
277
278            /* icon log-in */
279            &.login {
280                .icon-login();
281            }
282
283            /* icon admin */
284            &.admin {
285                .icon-cog();
286
287                &::before {
288                    vertical-align: top;
289                }
290            }
291        } // a
292    } // ul
293} // nav-usertools