1/* =Toolbar
2----------------------------------------------- */
3
4.disableToolbar {
5    #writr__toolbar {
6        display: none;
7    }
8}
9.enableToolbar {
10    #writr__page {
11        margin-top: 32px;
12    }
13    #writr__toolbar {
14        display: flex;
15        flex-direction: row;
16        justify-content: space-between;
17        align-items: center;
18        background:@ini_text_alt;
19        height:32px;
20        width:100vw;
21        position:fixed;
22        top:0;
23        box-sizing:border-box;
24        z-index:100000;
25        padding-right: 16px;
26        padding-left: 16px;
27
28        > * {
29            line-height: 16px;
30            font-size: 16px;
31            height: 32px;
32            color:@ini_background;
33        }
34        .hook {
35            display: flex;
36            flex-direction: row;
37            justify-content: left;
38            align-items: center;
39            vertical-align: middle;
40            color:@ini_background;
41
42            > p,
43            > a,
44            > ol,
45            > span,
46            > img {
47                display: none;
48            }
49            ul {
50                list-style: none;
51                margin: 0;
52                padding: 0;
53                display: flex;
54                flex-direction: row;
55                justify-content: left;
56                align-items: center;
57                vertical-align: middle;
58                height: 100%;
59
60                li {
61                    list-style: none;
62                    vertical-align: middle;
63                    margin: 0;
64                    padding: 0;
65                    height: 100%;
66                    display: flex;
67                    flex-direction: row;
68                    justify-content: left;
69                    align-items: center;
70                    vertical-align: middle;
71
72                    div.li {
73                        height: 100%;
74                        display: flex;
75                        flex-direction: row;
76                        justify-content: left;
77                        align-items: center;
78                        vertical-align: middle;
79                        padding: 8px 12px;
80
81                        p {
82                            margin: 0px;
83                        }
84                        img {
85                            max-height: 32px;
86                            max-width: 32px;
87                            height: 32px;
88                            width: 32px;
89                            display: inline-block;
90                            margin: 0px;
91                        }
92                        span.curid a{
93                            font-weight: normal;
94                        }
95                        a,a.urlextern {
96                            display: inline-block;
97                            height: 100%;
98                            font-size: 16px;
99                            line-height: 16px;
100                            text-decoration: none;
101                            color:@ini_background;
102                            padding: 8px 12px !important;
103
104                            img {
105                                margin: 0px;
106                            }
107                        }
108                        a:hover {
109                            background-color: @ini_theme_color;
110                        }
111                        a:has(img),a.urlexter:has(img) {
112                            padding: 0px 12px !important;
113                        }
114                        a.mail {
115                            background-image: none;
116                            display: flex !important;
117                            align-items: center;
118                            align-content: center;
119                        }
120                        a.mail::before {
121                            content: '\F32F';
122                            font-family: 'bootstrap-icons';
123                            display: inline-block;
124                            margin-right: 4px;
125                            font-size: 1.2em;
126                            color: #007bff;
127                        }
128                        a[href*="github.com/sponsors/"] {
129                            display: flex !important;
130                            align-items: center;
131                            align-content: center;
132                        }
133                        a[href*="github.com/sponsors/"]:before {
134                            content: "\F417";
135                            font-family: "bootstrap-icons";
136                            display: inline-block;
137                            margin-right: 4px;
138                            font-size: 1.2em;
139                            color: #e60073;
140                        }
141                    }
142                    div.li:has(a) {
143                        padding: 0px;
144                    }
145                    > ul {
146                        display: none;
147                        position: absolute;
148                        top: 32px;
149                        background-color: @ini_text_alt;
150                        color: @ini_background;
151                        border-radius: 0px;
152                        border-bottom-left-radius: 20px;
153                        border-bottom-right-radius: 20px;
154                        min-width: 250px;
155                        height: auto;
156
157                        li {
158                            list-style-type: none;
159                            width: 100%;
160                            margin-top: 4px;
161
162                            div.li {
163                                width: 100%;
164                                cursor: default;
165
166                                > span {
167                                    width: 100%;
168                                }
169                                a {
170                                    cursor: pointer;
171                                    width: 100%;
172                                    padding: 8px;
173                                    padding-left: 16px;
174                                    padding-right: 16px;
175                                    border-radius: 0px;
176
177                                    i {
178                                        vertical-align: middle;
179                                    }
180                                }
181                                a:hover {
182                                    background-color: @ini_theme_color;
183                                }
184                            }
185                        }
186                        li:last-child {
187                            div.li {
188                                a {
189                                    border-bottom-left-radius: 20px;
190                                    border-bottom-right-radius: 20px;
191                                }
192                            }
193                        }
194                    }
195                }
196                > li:has(ul) {
197                    cursor: pointer;
198                }
199            }
200        }
201
202        .inline.user-tools {
203            float:right;
204            color:@ini_background;
205
206            a,button {
207                color:@ini_background;
208                display: inline-block;
209                text-decoration: none;
210                padding: 6px;
211                padding-left: 12px;
212                padding-right: 12px;
213                line-height: 16px;
214                font-size: 16px;
215                outline: none;
216
217                i {
218                    line-height: 16px;
219                    font-size: 16px;
220                }
221            }
222            a:hover,button:hover {
223                background-color: @ini_theme_color;
224            }
225        }
226
227        .dropdown.bookmarks,
228        .dropdown.user-tools {
229            float:right;
230            color:@ini_background;
231
232            a[data-toggle="dropdown"],button[data-toggle="dropdown"] {
233                border-radius: 0px;
234            }
235            a,button {
236                color:@ini_background;
237
238                i {
239                    font-size: 16px;
240                    line-height: 16px;
241                    height: 16px;
242                    width: 16px;
243                    vertical-align: baseline;
244                    margin-right: 4px;
245                }
246                i.bi-person:before { content: '\F4E1'; }
247            }
248            .dropdown-menu {
249                border-top-left-radius: 0px;
250                border-top-right-radius: 0px;
251
252                li {
253                    a,button {
254
255                        i {
256                            vertical-align: middle;
257                        }
258                    }
259                    .avatar {
260                        padding: 20px;
261                        margin: 0px;
262                        text-align: center;
263                        vertical-align: middle;
264
265                        img {
266                            border-radius: 50%;
267                            height: 96px;
268                            width: 96px;
269                            border: 3px solid @ini_background;
270                        }
271                    }
272                }
273            }
274        }
275    }
276}
277/* Print */
278@media print {
279    .enableToolbar {
280        #writr__page {
281            margin-top: 0px;
282        }
283        #writr__toolbar {
284            display: none;
285        }
286    }
287}
288/* 960px > x */
289@media only screen and (max-width: 959px) {
290    .enableToolbar {
291        #writr__page {
292            margin-top: 64px;
293        }
294        #writr__toolbar {
295            flex-direction: column;
296            background: @ini_text_alt;
297
298            > * {
299                background: @ini_text_alt;
300                width: 100vw;
301                align-items: center;
302                align-content: center;
303                justify-content: center;
304                vertical-align: middle;
305                display: flex;
306            }
307
308            .hook {
309                justify-content: center;
310            }
311
312            .bookmarks,
313            .user-tools {
314
315                .dropdown-menu {
316                    width: 100vw;
317                    position: fixed;
318                    top: 64px;
319                    left: 0px;
320                }
321            }
322        }
323    }
324}
325