xref: /template/writr/css/tools.less (revision 1985b600f27037224e753fdc581b4405460f6c58) 
1/* =Tools
2----------------------------------------------- */
3
4@media screen {
5
6    /* highlight selected tool */
7    .mode_admin a.action.admin,
8    .mode_login a.action.login,
9    .mode_register a.action.register,
10    .mode_profile a.action.profile,
11    .mode_recent a.action.recent,
12    .mode_index a.action.index,
13    .mode_media a.action.media,
14    .mode_revisions a.action.revs,
15    .mode_backlink a.action.backlink,
16    .mode_subscribe a.action.subscribe {
17        background-color: transparent;
18    }
19
20    .loggedIn{
21        .site-tools ul li:has(> a.action.media), .user-tools ul li:has(> a.action.admin), .page-tools ul li:has(> a.action.revs) {
22            display: block;
23        }
24    }
25
26    .page-tools {
27        ul {
28            list-style: none;
29            text-transform: uppercase;
30        }
31        li {
32            padding: 5px 0;
33        }
34        li:first-child {
35            padding-top: 0;
36        }
37        li:last-child {
38            padding-bottom: 0;
39        }
40        ul a {
41            color: @ini_background;
42            font-weight: bold;
43            text-decoration: none;
44        }
45        ul a:hover {
46            color: @ini_theme_color_alt;
47        }
48        a span.icon {
49            display: inline-block;
50            width: 20px;
51            height: 20px;
52            -webkit-font-smoothing: antialiased;
53            font-size: 20px;
54            line-height: 1;
55            font-family: 'bootstrap-icons';
56            text-decoration: inherit;
57            font-weight: normal;
58            font-style: normal;
59            vertical-align: top;
60        }
61
62        a           span.icon:before { content: '\F28A'; }
63
64        a.edit      span.icon:before { content: '\F4CA'; }
65        a.create    span.icon:before { content: '\F64D'; }
66        a.show      span.icon:before { content: '\F341'; }
67        a.source    span.icon:before { content: '\F2C6'; }
68        a.draft     span.icon:before { content: '\F38B'; }
69        a.revs      span.icon:before { content: '\F292'; }
70        a.backlink  span.icon:before { content: '\F470'; }
71        a.top       span.icon:before { content: '\F278'; }
72        a.revert    span.icon:before { content: '\F117'; }
73        a.subscribe span.icon:before { content: '\F18A'; }
74    }
75
76    .site-tools {
77        a span {
78            display: inline-block;
79            width: 20px;
80            height: 20px;
81            -webkit-font-smoothing: antialiased;
82            font-size: 20px;
83            line-height: 1;
84            font-family: 'bootstrap-icons';
85            text-decoration: inherit;
86            font-weight: normal;
87            font-style: normal;
88            vertical-align: top;
89        }
90
91        a           span:before { content: '\F28A'; }
92        a.recent    span:before { content: '\F293'; }
93        a.index     span:before { content: '\F2EE'; }
94        a.media     span:before { content: '\F2CB'; }
95    }
96
97    .user-tools {
98        a i {
99            display: inline-block;
100            width: 20px;
101            height: 20px;
102            -webkit-font-smoothing: antialiased;
103            font-size: 20px;
104            line-height: 20px;
105            vertical-align: middle;
106            font-family: 'bootstrap-icons';
107            text-decoration: inherit;
108            font-weight: normal;
109            font-style: normal;
110        }
111
112        a           i:before { content: '\F28A'; }
113        a.admin     i:before { content: '\F3E5'; }
114        a.login     i:before { content: '\F1BE'; }
115        a.logout    i:before { content: '\F1C3'; }
116        a.register  i:before { content: '\F89A'; }
117        a.profile   i:before { content: '\F4CB'; }
118        a.show      i:before { content: '\F4E1'; }
119
120        p.user:before {
121            font-family: 'bootstrap-icons';
122            content: "\F4E1";
123            font-size: 20px;
124            padding-right: 4px;
125            line-height: 20px;
126            vertical-align: middle;
127        }
128    }
129}
130
131@media print {
132    .page-tools {
133        display: none;
134    }
135}
136
137@media only screen and (min-width: 960px) {
138
139    .page-tools {
140        position: fixed;
141        top: 40px;
142        left: 320px;
143
144        a.action,
145        a.menuitem {
146            width: 60px;
147            height: 60px;
148            display: block;
149        }
150        a span {
151            width: 60px;
152            display: block;
153            text-align: center;
154        }
155        a span.icon {
156            width: 60px;
157            height: 60px;
158            background: @ini_text_neu;
159            color: @ini_background;
160            font-size: 30px;
161            line-height: 2;
162
163            -webkit-border-radius: 50%;
164            -moz-border-radius:    50%;
165            border-radius:         50%;
166            transition:         all 0.25s ease-in-out;
167        }
168
169        a:hover span.icon {
170            background: @ini_background;
171            color: @ini_text_alt;
172        }
173
174        a:focus {
175            outline: none;
176
177            span.icon {
178                background-color: @ini_theme_color;
179                color: #fff;
180            }
181        }
182    }
183
184    .mode_revisions .page-tools a.revs span.icon,
185    .mode_backlink .page-tools a.backlink span.icon,
186    .mode_revert .page-tools a.revert span.icon,
187    .mode_subscribe .page-tools a.subscribe span.icon {
188        background: @ini_background;
189        color: @ini_text_alt;
190        position: relative;
191
192        &:after {
193            content: '';
194            z-index: 2;
195            display: block;
196            position: absolute;
197            top: 25px;
198            right: -25px;
199            border-left: 5px solid @ini_text_alt;
200            border-top: 5px solid transparent;
201            border-bottom: 5px solid transparent;
202        }
203    }
204
205}
206
207@media only screen and (max-width: 959px) {
208    #writr__sidebar {
209        margin-bottom: 0px;
210    }
211
212    #writr__sidebar:has(#writr__sidebar-toggle.open) + .page-tools {
213        z-index: -1;
214    }
215
216    .page-tools {
217        position: fixed;
218        top: 80px;
219        left: 60px;
220        z-index: 1000;
221
222        a.action,
223        a.menuitem {
224            width: 60px;
225            height: 60px;
226            display: block;
227        }
228        a span {
229            width: 60px;
230            display: block;
231            text-align: center;
232        }
233        a span.icon {
234            width: 60px;
235            height: 60px;
236            background: @ini_text_neu;
237            color: @ini_background;
238            font-size: 30px;
239            line-height: 2;
240
241            -webkit-border-radius: 50%;
242            -moz-border-radius:    50%;
243            border-radius:         50%;
244            transition:         all 0.25s ease-in-out;
245        }
246
247        a:hover span.icon {
248            background: @ini_background;
249            color: @ini_text_alt;
250        }
251
252        a:focus {
253            outline: none;
254
255            span.icon {
256                background-color: @ini_theme_color;
257                color: #fff;
258            }
259        }
260    }
261}
262
263@media only screen and (max-width: 767px) {
264    #writr__sidebar {
265        margin-bottom: 0px;
266    }
267
268    .page-tools {
269        position: relative;
270        top: auto;
271        left: auto;
272
273        ul {
274            background: @ini_text_alt;
275            margin-bottom: 0px;
276            width: 100vw;
277            height: 60px;
278
279            li:has(a.top) {
280                position: fixed;
281                bottom: 8px;
282                right: 8px;
283                z-index: 999;
284            }
285
286            li:has(a.create),
287            li:has(a.show),
288            li:has(a.edit) {
289                position: fixed;
290                top: 68px;
291                right: 8px;
292                z-index: 999;
293            }
294
295            li:first-child {
296                padding-top: 4px;
297                padding-left: 8px;
298            }
299
300            li {
301                float: left;
302                padding: 4px;
303
304                a.action,
305                a.menuitem {
306                    width: 48px;
307                    height: 48px;
308                    display: block;
309                }
310                a span {
311                    width: 48px;
312                    display: block;
313                    text-align: center;
314                }
315                a span.icon {
316                    width: 48px;
317                    height: 48px;
318                    background: @ini_text_neu;
319                    color: @ini_background;
320                    font-size: 24px;
321                    line-height: 2;
322
323                    -webkit-border-radius: 50%;
324                    -moz-border-radius:    50%;
325                    border-radius:         50%;
326                    transition:         all 0.25s ease-in-out;
327                }
328
329                a:hover span.icon {
330                    background: @ini_background;
331                    color: @ini_text_alt;
332                }
333
334                a:focus {
335                    outline: none;
336
337                    span.icon {
338                        background-color: @ini_theme_color;
339                        color: #fff;
340                    }
341                }
342            }
343        }
344    }
345}
346