xref: /template/writr/css/components/toolbar.less (revision d698c3acc7fb37c7d3561f8b960a336c27211c3a) 
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
41            > * {
42                line-height: 16px;
43                font-size: 16px;
44                margin: 0;
45                color:@ini_background;
46            }
47            ul {
48                list-style: none;
49                margin: 0;
50                padding: 0;
51                display: flex;
52                flex-direction: row;
53                justify-content: left;
54                align-items: center;
55                vertical-align: middle;
56
57                li {
58                    list-style: none;
59                    margin: 0;
60                    padding: 0;
61
62                    div.li {
63                        height: 32px;
64                    }
65                }
66            }
67            a,button {
68                color:@ini_background;
69                display: inline-block;
70                text-decoration: none;
71                padding: 8px;
72                padding-left: 12px;
73                padding-right: 12px;
74                line-height: 16px;
75                font-size: 16px;
76                outline: none;
77                height: 32px;
78
79                i {
80                    line-height: 16px;
81                    font-size: 16px;
82                }
83            }
84            a:hover,button:hover {
85                background-color: @ini_theme_color;
86            }
87            span.curid a{
88                font-weight: normal;
89                background-color: @ini_theme_color;
90            }
91            img.mediacenter{
92                max-height: 32px;
93                max-width: 32px;
94                display: inline-block;
95                margin: 0px 12px;
96            }
97            a:has(img) {
98                padding: 0px 12px;
99
100                img.mediacenter{
101                    margin: 0px;
102                }
103            }
104        }
105
106        .inline.user-tools {
107            float:right;
108            color:@ini_background;
109
110            a,button {
111                color:@ini_background;
112                display: inline-block;
113                text-decoration: none;
114                padding: 6px;
115                padding-left: 12px;
116                padding-right: 12px;
117                line-height: 16px;
118                font-size: 16px;
119                outline: none;
120
121                i {
122                    line-height: 16px;
123                    font-size: 16px;
124                }
125            }
126            a:hover,button:hover {
127                background-color: @ini_theme_color;
128            }
129        }
130
131        .dropdown.user-tools {
132            float:right;
133            color:@ini_background;
134
135            a[data-toggle="dropdown"],button[data-toggle="dropdown"] {
136                border-radius: 0px;
137            }
138            a,button {
139                color:@ini_background;
140
141                i {
142                    font-size: 16px;
143                    line-height: 16px;
144                    height: 16px;
145                    width: 16px;
146                    vertical-align: baseline;
147                    margin-right: 4px;
148                }
149                i.bi-person:before { content: '\F4E1'; }
150            }
151            .dropdown-menu {
152                border-top-left-radius: 0px;
153                border-top-right-radius: 0px;
154
155                li {
156                    a,button {
157
158                        i {
159                            vertical-align: middle;
160                        }
161                    }
162                    .avatar {
163                        padding: 20px;
164                        margin: 0px;
165                        text-align: center;
166                        vertical-align: middle;
167
168                        img {
169                            border-radius: 50%;
170                            height: 96px;
171                            width: 96px;
172                            // max-height: 96px;
173                            // max-width: 96px;
174                            border: 3px solid @ini_background;
175                        }
176                    }
177                }
178            }
179        }
180    }
181}
182