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