xref: /template/writr/css/tools.less (revision ab6807c0adec892ca423fba682a9d173b4932b59) 
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    .bookmarks,
98    .user-tools {
99        a i {
100            display: inline-block;
101            width: 20px;
102            height: 20px;
103            -webkit-font-smoothing: antialiased;
104            font-size: 20px;
105            line-height: 20px;
106            vertical-align: middle;
107            font-family: 'bootstrap-icons';
108            text-decoration: inherit;
109            font-weight: normal;
110            font-style: normal;
111        }
112
113        a           i:before { content: '\F28A'; }
114        a.admin     i:before { content: '\F3E5'; }
115        a.login     i:before { content: '\F1BE'; }
116        a.logout    i:before { content: '\F1C3'; }
117        a.register  i:before { content: '\F89A'; }
118        a.profile   i:before { content: '\F4CB'; }
119        a.show      i:before { content: '\F4E1'; }
120        a.starred   i:before { content: '\F588'; }
121
122        p.user:before {
123            font-family: 'bootstrap-icons';
124            content: "\F4E1";
125            font-size: 20px;
126            padding-right: 4px;
127            line-height: 20px;
128            vertical-align: middle;
129        }
130    }
131}
132
133@media print {
134    .page-tools {
135        display: none;
136    }
137}
138
139@media only screen and (min-width: 960px) {
140
141    .page-tools {
142        position: fixed;
143        top: 40px;
144        left: 320px;
145
146        a.action,
147        a.menuitem {
148            width: 60px;
149            height: 60px;
150            display: block;
151        }
152        a span {
153            width: 60px;
154            display: block;
155            text-align: center;
156        }
157        a span.icon {
158            width: 60px;
159            height: 60px;
160            background: @ini_text_neu;
161            color: @ini_background;
162            font-size: 30px;
163            line-height: 2;
164
165            -webkit-border-radius: 50%;
166            -moz-border-radius:    50%;
167            border-radius:         50%;
168            transition:         all 0.25s ease-in-out;
169        }
170
171        a:hover span.icon {
172            background: @ini_background;
173            color: @ini_text_alt;
174        }
175
176        a:focus {
177            outline: none;
178
179            span.icon {
180                background-color: @ini_theme_color;
181                color: #fff;
182            }
183        }
184    }
185
186    .mode_revisions .page-tools a.revs span.icon,
187    .mode_backlink .page-tools a.backlink span.icon,
188    .mode_revert .page-tools a.revert span.icon,
189    .mode_subscribe .page-tools a.subscribe span.icon {
190        background: @ini_background;
191        color: @ini_text_alt;
192        position: relative;
193
194        &:after {
195            content: '';
196            z-index: 2;
197            display: block;
198            position: absolute;
199            top: 25px;
200            right: -25px;
201            border-left: 5px solid @ini_text_alt;
202            border-top: 5px solid transparent;
203            border-bottom: 5px solid transparent;
204        }
205    }
206
207}
208
209@media only screen and (max-width: 959px) {
210    #writr__sidebar {
211        margin-bottom: 0px;
212    }
213
214    #writr__sidebar:has(#writr__sidebar-toggle.open) + .page-tools {
215        z-index: -1;
216    }
217
218    .page-tools {
219        position: fixed;
220        top: 80px;
221        left: 60px;
222        z-index: 1000;
223
224        a.action,
225        a.menuitem {
226            width: 60px;
227            height: 60px;
228            display: block;
229        }
230        a span {
231            width: 60px;
232            display: block;
233            text-align: center;
234        }
235        a span.icon {
236            width: 60px;
237            height: 60px;
238            background: @ini_text_neu;
239            color: @ini_background;
240            font-size: 30px;
241            line-height: 2;
242
243            -webkit-border-radius: 50%;
244            -moz-border-radius:    50%;
245            border-radius:         50%;
246            transition:         all 0.25s ease-in-out;
247        }
248
249        a:hover span.icon {
250            background: @ini_background;
251            color: @ini_text_alt;
252        }
253
254        a:focus {
255            outline: none;
256
257            span.icon {
258                background-color: @ini_theme_color;
259                color: #fff;
260            }
261        }
262    }
263}
264
265@media only screen and (max-width: 767px) {
266    #writr__sidebar {
267        margin-bottom: 0px;
268    }
269
270    .page-tools {
271        position: relative;
272        top: auto;
273        left: auto;
274
275        ul {
276            background: @ini_text_alt;
277            margin-bottom: 0px;
278            width: 100vw;
279            height: 60px;
280
281            li:has(a.top) {
282                position: fixed;
283                bottom: 8px;
284                right: 8px;
285                z-index: 999;
286            }
287
288            li:has(a.create),
289            li:has(a.show),
290            li:has(a.edit) {
291                position: fixed;
292                top: 68px;
293                right: 8px;
294                z-index: 999;
295            }
296
297            li:first-child {
298                padding-top: 4px;
299                padding-left: 8px;
300            }
301
302            li {
303                float: left;
304                padding: 4px;
305
306                a.action,
307                a.menuitem {
308                    width: 48px;
309                    height: 48px;
310                    display: block;
311                }
312                a span {
313                    width: 48px;
314                    display: block;
315                    text-align: center;
316                }
317                a span.icon {
318                    width: 48px;
319                    height: 48px;
320                    background: @ini_text_neu;
321                    color: @ini_background;
322                    font-size: 24px;
323                    line-height: 2;
324
325                    -webkit-border-radius: 50%;
326                    -moz-border-radius:    50%;
327                    border-radius:         50%;
328                    transition:         all 0.25s ease-in-out;
329                }
330
331                a:hover span.icon {
332                    background: @ini_background;
333                    color: @ini_text_alt;
334                }
335
336                a:focus {
337                    outline: none;
338
339                    span.icon {
340                        background-color: @ini_theme_color;
341                        color: #fff;
342                    }
343                }
344            }
345        }
346    }
347}
348