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
119    p.user:before {
120        font-family: 'bootstrap-icons';
121        content: "\F4E1";
122        font-size: 20px;
123        padding-right: 4px;
124        line-height: 20px;
125        vertical-align: middle;
126    }
127}
128
129} /* /@media */
130
131
132@media only screen and (min-width: 960px) {
133
134.page-tools {
135    position: fixed;
136    top: 40px;
137    left: 320px;
138
139    a.action,
140    a.menuitem {
141        width: 60px;
142        height: 60px;
143        display: block;
144    }
145    a span {
146        width: 60px;
147        display: block;
148        text-align: center;
149    }
150    a span.icon {
151        width: 60px;
152        height: 60px;
153        background: @ini_text_neu;
154        color: @ini_background;
155        font-size: 30px;
156        line-height: 2;
157
158        -webkit-border-radius: 50%;
159        -moz-border-radius:    50%;
160        border-radius:         50%;
161        transition:         all 0.25s ease-in-out;
162    }
163
164    a:hover span.icon {
165        background: @ini_background;
166        color: @ini_text_alt;
167    }
168
169    a:focus {
170        outline: none;
171
172        span.icon {
173            background-color: @ini_theme_color;
174            color: #fff;
175        }
176    }
177}
178
179.mode_revisions .page-tools a.revs span.icon,
180.mode_backlink .page-tools a.backlink span.icon,
181.mode_revert .page-tools a.revert span.icon,
182.mode_subscribe .page-tools a.subscribe span.icon {
183    background: @ini_background;
184    color: @ini_text_alt;
185    position: relative;
186
187    &:after {
188        content: '';
189        z-index: 2;
190        display: block;
191        position: absolute;
192        top: 25px;
193        right: -25px;
194        border-left: 5px solid @ini_text_alt;
195        border-top: 5px solid transparent;
196        border-bottom: 5px solid transparent;
197    }
198}
199
200} /* /@media */
201
202@media only screen and (max-width: 959px) {
203    .page-tools .a11y {
204        position: static !important;
205        left: 0 !important;
206        right: 0 !important;
207        width: auto !important;
208        height: auto !important;
209    }
210}
211