xref: /template/writr/css/components/toolbar.less (revision f6262f04b6c6297ca7cd18fbb21d50d1cc9e534a)
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                    }
115                    div.li:has(a) {
116                        padding: 0px;
117                    }
118                    > ul {
119                        display: none;
120                        position: absolute;
121                        top: 32px;
122                        background-color: @ini_text_alt;
123                        color: @ini_background;
124                        border-radius: 0px;
125                        border-bottom-left-radius: 20px;
126                        border-bottom-right-radius: 20px;
127                        min-width: 250px;
128                        height: auto;
129
130                        li {
131                            list-style-type: none;
132                            width: 100%;
133                            margin-top: 4px;
134
135                            div.li {
136                                width: 100%;
137                                cursor: default;
138
139                                > span {
140                                    width: 100%;
141                                }
142                                a {
143                                    cursor: pointer;
144                                    width: 100%;
145                                    padding: 8px;
146                                    padding-left: 16px;
147                                    padding-right: 16px;
148                                    border-radius: 0px;
149
150                                    i {
151                                        vertical-align: middle;
152                                    }
153                                }
154                                a:hover {
155                                    background-color: @ini_theme_color;
156                                }
157                            }
158                        }
159                        li:last-child {
160                            div.li {
161                                a {
162                                    border-bottom-left-radius: 20px;
163                                    border-bottom-right-radius: 20px;
164                                }
165                            }
166                        }
167                    }
168                }
169                > li:has(ul) {
170                    cursor: pointer;
171                }
172            }
173        }
174
175        .inline.user-tools {
176            float:right;
177            color:@ini_background;
178
179            a,button {
180                color:@ini_background;
181                display: inline-block;
182                text-decoration: none;
183                padding: 6px;
184                padding-left: 12px;
185                padding-right: 12px;
186                line-height: 16px;
187                font-size: 16px;
188                outline: none;
189
190                i {
191                    line-height: 16px;
192                    font-size: 16px;
193                }
194            }
195            a:hover,button:hover {
196                background-color: @ini_theme_color;
197            }
198        }
199
200        .dropdown.user-tools {
201            float:right;
202            color:@ini_background;
203
204            a[data-toggle="dropdown"],button[data-toggle="dropdown"] {
205                border-radius: 0px;
206            }
207            a,button {
208                color:@ini_background;
209
210                i {
211                    font-size: 16px;
212                    line-height: 16px;
213                    height: 16px;
214                    width: 16px;
215                    vertical-align: baseline;
216                    margin-right: 4px;
217                }
218                i.bi-person:before { content: '\F4E1'; }
219            }
220            .dropdown-menu {
221                border-top-left-radius: 0px;
222                border-top-right-radius: 0px;
223
224                li {
225                    a,button {
226
227                        i {
228                            vertical-align: middle;
229                        }
230                    }
231                    .avatar {
232                        padding: 20px;
233                        margin: 0px;
234                        text-align: center;
235                        vertical-align: middle;
236
237                        img {
238                            border-radius: 50%;
239                            height: 96px;
240                            width: 96px;
241                            // max-height: 96px;
242                            // max-width: 96px;
243                            border: 3px solid @ini_background;
244                        }
245                    }
246                }
247            }
248        }
249    }
250}
251