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 130} /* /@media */ 131 132 133@media only screen and (min-width: 960px) { 134 135 .page-tools { 136 position: fixed; 137 top: 40px; 138 left: 320px; 139 140 a.action, 141 a.menuitem { 142 width: 60px; 143 height: 60px; 144 display: block; 145 } 146 a span { 147 width: 60px; 148 display: block; 149 text-align: center; 150 } 151 a span.icon { 152 width: 60px; 153 height: 60px; 154 background: @ini_text_neu; 155 color: @ini_background; 156 font-size: 30px; 157 line-height: 2; 158 159 -webkit-border-radius: 50%; 160 -moz-border-radius: 50%; 161 border-radius: 50%; 162 transition: all 0.25s ease-in-out; 163 } 164 165 a:hover span.icon { 166 background: @ini_background; 167 color: @ini_text_alt; 168 } 169 170 a:focus { 171 outline: none; 172 173 span.icon { 174 background-color: @ini_theme_color; 175 color: #fff; 176 } 177 } 178 } 179 180 .mode_revisions .page-tools a.revs span.icon, 181 .mode_backlink .page-tools a.backlink span.icon, 182 .mode_revert .page-tools a.revert span.icon, 183 .mode_subscribe .page-tools a.subscribe span.icon { 184 background: @ini_background; 185 color: @ini_text_alt; 186 position: relative; 187 188 &:after { 189 content: ''; 190 z-index: 2; 191 display: block; 192 position: absolute; 193 top: 25px; 194 right: -25px; 195 border-left: 5px solid @ini_text_alt; 196 border-top: 5px solid transparent; 197 border-bottom: 5px solid transparent; 198 } 199 } 200 201} 202 203@media only screen and (max-width: 959px) { 204 #writr__sidebar { 205 margin-bottom: 0px; 206 } 207 208 .page-tools { 209 210 ul { 211 background: @ini_text_alt; 212 margin-bottom: 0px; 213 width: 100vw; 214 height: 60px; 215 216 li:has(a.top) { 217 position: fixed; 218 bottom: 8px; 219 right: 8px; 220 z-index: 999; 221 } 222 223 li:has(a.create), 224 li:has(a.show), 225 li:has(a.edit) { 226 position: fixed; 227 top: 68px; 228 right: 8px; 229 z-index: 999; 230 } 231 232 li:first-child { 233 padding-top: 4px; 234 padding-left: 8px; 235 } 236 237 li { 238 float: left; 239 padding: 4px; 240 241 a.action, 242 a.menuitem { 243 width: 48px; 244 height: 48px; 245 display: block; 246 } 247 a span { 248 width: 48px; 249 display: block; 250 text-align: center; 251 } 252 a span.icon { 253 width: 48px; 254 height: 48px; 255 background: @ini_text_neu; 256 color: @ini_background; 257 font-size: 24px; 258 line-height: 2; 259 260 -webkit-border-radius: 50%; 261 -moz-border-radius: 50%; 262 border-radius: 50%; 263 transition: all 0.25s ease-in-out; 264 } 265 266 a:hover span.icon { 267 background: @ini_background; 268 color: @ini_text_alt; 269 } 270 271 a:focus { 272 outline: none; 273 274 span.icon { 275 background-color: @ini_theme_color; 276 color: #fff; 277 } 278 } 279 } 280 } 281 } 282} 283