1/* =Toolbar 2----------------------------------------------- */ 3 4.disableToolbar { 5 #writr__toolbar { 6 display: none; 7 } 8} 9.enableToolbar { 10 #writr__page { 11 margin-top: 32px; 12 } 13 #writr__toolbar { 14 display: flex; 15 flex-direction: row; 16 justify-content: space-between; 17 align-items: center; 18 background:@ini_text_alt; 19 height:32px; 20 width:100vw; 21 position:fixed; 22 top:0; 23 box-sizing:border-box; 24 z-index:100000; 25 padding-right: 16px; 26 padding-left: 16px; 27 28 > * { 29 line-height: 16px; 30 font-size: 16px; 31 height: 32px; 32 color:@ini_background; 33 } 34 .hook { 35 display: flex; 36 flex-direction: row; 37 justify-content: left; 38 align-items: center; 39 vertical-align: middle; 40 color:@ini_background; 41 42 > p, 43 > a, 44 > ol, 45 > span, 46 > img { 47 display: none; 48 } 49 ul { 50 list-style: none; 51 margin: 0; 52 padding: 0; 53 display: flex; 54 flex-direction: row; 55 justify-content: left; 56 align-items: center; 57 vertical-align: middle; 58 height: 100%; 59 60 li { 61 list-style: none; 62 vertical-align: middle; 63 margin: 0; 64 padding: 0; 65 height: 100%; 66 display: flex; 67 flex-direction: row; 68 justify-content: left; 69 align-items: center; 70 vertical-align: middle; 71 72 div.li { 73 height: 100%; 74 display: flex; 75 flex-direction: row; 76 justify-content: left; 77 align-items: center; 78 vertical-align: middle; 79 padding: 8px 12px; 80 81 p { 82 margin: 0px; 83 } 84 img { 85 max-height: 32px; 86 max-width: 32px; 87 height: 32px; 88 width: 32px; 89 display: inline-block; 90 margin: 0px; 91 } 92 span.curid a{ 93 font-weight: normal; 94 } 95 a,a.urlextern { 96 display: inline-flex; 97 align-items: center; 98 height: 100%; 99 font-size: 16px; 100 line-height: 16px; 101 text-decoration: none; 102 color:@ini_background; 103 padding: 8px 12px !important; 104 105 img { 106 margin: 0px; 107 } 108 109 &::before { 110 font-family: "bootstrap-icons"; 111 display: inline-block; 112 margin-right: 4px; 113 font-size: 1.2em; 114 } 115 116 &[href^="mailto:"]::before { 117 content: "\F32F"; 118 color: #007bff; 119 } 120 121 &[href^="tel:"]::before { 122 content: "\F3CD"; 123 color: #25D366; 124 } 125 126 &[href*="linkedin.com/"]::before { 127 content: "\F472"; 128 color: #0077B5; 129 } 130 131 &[href*="mastodon.social/"]::before { 132 content: "\F647"; 133 color: #6366F1; 134 } 135 136 &[href*="youtube.com/"]::before { 137 content: "\F62B"; 138 color: #b2071d; 139 } 140 141 &[href*="instagram.com/"]::before { 142 content: "\F437"; 143 color: #E4405F; 144 } 145 146 &[href*="github.com/"]::before { 147 content: "\F3ED"; 148 color: #ffffff; 149 } 150 151 &[href*="github.com/sponsors/"]::before { 152 content: "\F417"; 153 color: #e60073; 154 } 155 156 &[href*="reddit.com/"]::before { 157 content: "\F650"; 158 color: #FF4500; 159 } 160 161 &[href*="twitter.com/"]::before { 162 content: "\F5EF"; 163 color: #1DA1F2; 164 } 165 166 &[href*="x.com/"]::before { 167 content: "\F8DB"; 168 color: #1DA1F2; 169 } 170 171 &[href*="facebook.com/"]::before { 172 content: "\F344"; 173 color: #1877F2; 174 } 175 176 &[href*="patreon.com/"]::before { 177 content: "\F417"; 178 color: #F96854; 179 } 180 } 181 a:hover { 182 background-color: @ini_theme_color; 183 } 184 a:has(img),a.urlexter:has(img) { 185 padding: 0px 12px !important; 186 } 187 a.mail { 188 background-image: none; 189 display: flex !important; 190 align-items: center; 191 align-content: center; 192 } 193 a.mail::before { 194 content: '\F32F'; 195 font-family: 'bootstrap-icons'; 196 display: inline-block; 197 margin-right: 4px; 198 font-size: 1.2em; 199 color: #007bff; 200 } 201 a[href*="github.com/sponsors/"] { 202 display: flex !important; 203 align-items: center; 204 align-content: center; 205 } 206 a[href*="github.com/sponsors/"]:before { 207 content: "\F417"; 208 font-family: "bootstrap-icons"; 209 display: inline-block; 210 margin-right: 4px; 211 font-size: 1.2em; 212 color: #e60073; 213 } 214 } 215 div.li:has(a) { 216 padding: 0px; 217 } 218 > ul { 219 display: none; 220 position: absolute; 221 top: 32px; 222 background-color: @ini_text_alt; 223 color: @ini_background; 224 border-radius: 0px; 225 border-bottom-left-radius: 20px; 226 border-bottom-right-radius: 20px; 227 min-width: 250px; 228 height: auto; 229 230 li { 231 list-style-type: none; 232 width: 100%; 233 margin-top: 4px; 234 235 div.li { 236 width: 100%; 237 cursor: default; 238 239 > span { 240 width: 100%; 241 } 242 a { 243 cursor: pointer; 244 width: 100%; 245 padding: 8px; 246 padding-left: 16px; 247 padding-right: 16px; 248 border-radius: 0px; 249 250 i { 251 vertical-align: middle; 252 } 253 } 254 a:hover { 255 background-color: @ini_theme_color; 256 } 257 } 258 } 259 li:last-child { 260 div.li { 261 a { 262 border-bottom-left-radius: 20px; 263 border-bottom-right-radius: 20px; 264 } 265 } 266 } 267 } 268 } 269 > li:has(ul) { 270 cursor: pointer; 271 } 272 } 273 } 274 275 .inline.user-tools { 276 float:right; 277 color:@ini_background; 278 279 a,button { 280 color:@ini_background; 281 display: inline-block; 282 text-decoration: none; 283 padding: 6px; 284 padding-left: 12px; 285 padding-right: 12px; 286 line-height: 16px; 287 font-size: 16px; 288 outline: none; 289 290 i { 291 line-height: 16px; 292 font-size: 16px; 293 } 294 } 295 a:hover,button:hover { 296 background-color: @ini_theme_color; 297 } 298 } 299 300 .dropdown.bookmarks, 301 .dropdown.user-tools { 302 float:right; 303 color:@ini_background; 304 305 a[data-toggle="dropdown"],button[data-toggle="dropdown"] { 306 border-radius: 0px; 307 } 308 a,button { 309 color:@ini_background; 310 311 i { 312 font-size: 16px; 313 line-height: 16px; 314 height: 16px; 315 width: 16px; 316 vertical-align: baseline; 317 margin-right: 4px; 318 } 319 i.bi-person:before { content: '\F4E1'; } 320 } 321 .dropdown-menu { 322 border-top-left-radius: 0px; 323 border-top-right-radius: 0px; 324 325 li { 326 a,button { 327 328 i { 329 vertical-align: middle; 330 } 331 } 332 .avatar { 333 padding: 20px; 334 margin: 0px; 335 text-align: center; 336 vertical-align: middle; 337 338 img { 339 border-radius: 50%; 340 height: 96px; 341 width: 96px; 342 border: 3px solid @ini_background; 343 } 344 } 345 } 346 } 347 } 348 } 349} 350/* Print */ 351@media print { 352 .enableToolbar { 353 #writr__page { 354 margin-top: 0px; 355 } 356 #writr__toolbar { 357 display: none; 358 } 359 } 360} 361/* 960px > x */ 362@media only screen and (max-width: 959px) { 363 .enableToolbar { 364 &:has(#writr__toolbar .hook ul), 365 &:has(#writr__toolbar .hook ol), 366 &:has(#writr__toolbar .hook p), 367 &:has(#writr__toolbar .hook span), 368 &:has(#writr__toolbar .hook h1), 369 &:has(#writr__toolbar .hook h2), 370 &:has(#writr__toolbar .hook h3), 371 &:has(#writr__toolbar .hook h4), 372 &:has(#writr__toolbar .hook h5), 373 &:has(#writr__toolbar .hook h6), 374 &:has(#writr__toolbar .hook img) { 375 #writr__page { 376 margin-top: 64px; 377 } 378 } 379 #writr__toolbar { 380 flex-direction: column; 381 background: @ini_text_alt; 382 383 > * { 384 background: @ini_text_alt; 385 width: 100vw; 386 align-items: center; 387 align-content: center; 388 justify-content: center; 389 vertical-align: middle; 390 display: flex; 391 } 392 393 .hook { 394 justify-content: center; 395 } 396 397 .bookmarks, 398 .user-tools { 399 400 .dropdown-menu { 401 width: 100vw; 402 position: fixed; 403 top: 64px; 404 left: 0px; 405 } 406 } 407 } 408 } 409} 410