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