xref: /template/writr/css/components/toolbar.less (revision a4ff460312082e5543c3b264d467682eb9ea836a) 
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-flex;
97                            align-items: center;
98                            height: 100%;
99                            font-size: 16px;
100                            line-height: 16px;
101                            text-decoration: none;
102                            color:@ini_background;
103                            padding: 8px 12px !important;
104
105                            img {
106                                margin: 0px;
107                            }
108
109                            &::before {
110                                font-family: "bootstrap-icons";
111                                display: inline-block;
112                                margin-right: 4px;
113                                font-size: 1.2em;
114                            }
115
116                            &[href^="mailto:"]::before {
117                                content: "\F32F";
118                                color: #007bff;
119                            }
120
121                            &[href^="tel:"]::before {
122                                content: "\F3CD";
123                                color: #25D366;
124                            }
125
126                            &[href*="youtube.com/"]::before {
127                                content: "\F62B";
128                                color: #b2071d;
129                            }
130
131                            &[href*="instagram.com/"]::before {
132                                content: "\F437";
133                                color: #E4405F;
134                            }
135
136                            &[href*="github.com/"]::before {
137                                content: "\F3ED";
138                                color: #ffffff;
139                            }
140
141                            &[href*="github.com/sponsors/"]::before {
142                                content: "\F417";
143                                color: #e60073;
144                            }
145
146                            &[href*="reddit.com/"]::before {
147                                content: "\F650";
148                                color: #FF4500;
149                            }
150
151                            &[href*="twitter.com/"]::before {
152                                content: "\F5EF";
153                                color: #1DA1F2;
154                            }
155
156                            &[href*="x.com/"]::before {
157                                content: "\F8DB";
158                                color: #1DA1F2;
159                            }
160
161                            &[href*="facebook.com/"]::before {
162                                content: "\F344";
163                                color: #1877F2;
164                            }
165
166                            &[href*="patreon.com/"]::before {
167                                content: "\F417";
168                                color: #F96854;
169                            }
170                        }
171                        a:hover {
172                            background-color: @ini_theme_color;
173                        }
174                        a:has(img),a.urlexter:has(img) {
175                            padding: 0px 12px !important;
176                        }
177                        a.mail {
178                            background-image: none;
179                            display: flex !important;
180                            align-items: center;
181                            align-content: center;
182                        }
183                        a.mail::before {
184                            content: '\F32F';
185                            font-family: 'bootstrap-icons';
186                            display: inline-block;
187                            margin-right: 4px;
188                            font-size: 1.2em;
189                            color: #007bff;
190                        }
191                        a[href*="github.com/sponsors/"] {
192                            display: flex !important;
193                            align-items: center;
194                            align-content: center;
195                        }
196                        a[href*="github.com/sponsors/"]:before {
197                            content: "\F417";
198                            font-family: "bootstrap-icons";
199                            display: inline-block;
200                            margin-right: 4px;
201                            font-size: 1.2em;
202                            color: #e60073;
203                        }
204                    }
205                    div.li:has(a) {
206                        padding: 0px;
207                    }
208                    > ul {
209                        display: none;
210                        position: absolute;
211                        top: 32px;
212                        background-color: @ini_text_alt;
213                        color: @ini_background;
214                        border-radius: 0px;
215                        border-bottom-left-radius: 20px;
216                        border-bottom-right-radius: 20px;
217                        min-width: 250px;
218                        height: auto;
219
220                        li {
221                            list-style-type: none;
222                            width: 100%;
223                            margin-top: 4px;
224
225                            div.li {
226                                width: 100%;
227                                cursor: default;
228
229                                > span {
230                                    width: 100%;
231                                }
232                                a {
233                                    cursor: pointer;
234                                    width: 100%;
235                                    padding: 8px;
236                                    padding-left: 16px;
237                                    padding-right: 16px;
238                                    border-radius: 0px;
239
240                                    i {
241                                        vertical-align: middle;
242                                    }
243                                }
244                                a:hover {
245                                    background-color: @ini_theme_color;
246                                }
247                            }
248                        }
249                        li:last-child {
250                            div.li {
251                                a {
252                                    border-bottom-left-radius: 20px;
253                                    border-bottom-right-radius: 20px;
254                                }
255                            }
256                        }
257                    }
258                }
259                > li:has(ul) {
260                    cursor: pointer;
261                }
262            }
263        }
264
265        .inline.user-tools {
266            float:right;
267            color:@ini_background;
268
269            a,button {
270                color:@ini_background;
271                display: inline-block;
272                text-decoration: none;
273                padding: 6px;
274                padding-left: 12px;
275                padding-right: 12px;
276                line-height: 16px;
277                font-size: 16px;
278                outline: none;
279
280                i {
281                    line-height: 16px;
282                    font-size: 16px;
283                }
284            }
285            a:hover,button:hover {
286                background-color: @ini_theme_color;
287            }
288        }
289
290        .dropdown.bookmarks,
291        .dropdown.user-tools {
292            float:right;
293            color:@ini_background;
294
295            a[data-toggle="dropdown"],button[data-toggle="dropdown"] {
296                border-radius: 0px;
297            }
298            a,button {
299                color:@ini_background;
300
301                i {
302                    font-size: 16px;
303                    line-height: 16px;
304                    height: 16px;
305                    width: 16px;
306                    vertical-align: baseline;
307                    margin-right: 4px;
308                }
309                i.bi-person:before { content: '\F4E1'; }
310            }
311            .dropdown-menu {
312                border-top-left-radius: 0px;
313                border-top-right-radius: 0px;
314
315                li {
316                    a,button {
317
318                        i {
319                            vertical-align: middle;
320                        }
321                    }
322                    .avatar {
323                        padding: 20px;
324                        margin: 0px;
325                        text-align: center;
326                        vertical-align: middle;
327
328                        img {
329                            border-radius: 50%;
330                            height: 96px;
331                            width: 96px;
332                            border: 3px solid @ini_background;
333                        }
334                    }
335                }
336            }
337        }
338    }
339}
340/* Print */
341@media print {
342    .enableToolbar {
343        #writr__page {
344            margin-top: 0px;
345        }
346        #writr__toolbar {
347            display: none;
348        }
349    }
350}
351/* 960px > x */
352@media only screen and (max-width: 959px) {
353    .enableToolbar {
354        #writr__page {
355            margin-top: 64px;
356        }
357        #writr__toolbar {
358            flex-direction: column;
359            background: @ini_text_alt;
360
361            > * {
362                background: @ini_text_alt;
363                width: 100vw;
364                align-items: center;
365                align-content: center;
366                justify-content: center;
367                vertical-align: middle;
368                display: flex;
369            }
370
371            .hook {
372                justify-content: center;
373            }
374
375            .bookmarks,
376            .user-tools {
377
378                .dropdown-menu {
379                    width: 100vw;
380                    position: fixed;
381                    top: 64px;
382                    left: 0px;
383                }
384            }
385        }
386    }
387}
388