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 &[href*="pixelfed.social/"]::before { 182 content: "\F437"; 183 color: #FF5C34; 184 } 185 186 &[href*="bandcamp.com/"]::before { 187 content: "\F49E"; 188 color: #1DA0C3; 189 } 190 191 &[href*="last.fm/"]::before { 192 content: "\F684"; 193 color: #D51007; 194 } 195 196 &[href*="lemmy.world/"]::before { 197 content: "\F252"; 198 color: #563ACC; 199 } 200 } 201 a:hover { 202 background-color: @ini_theme_color; 203 } 204 a:has(img),a.urlexter:has(img) { 205 padding: 0px 12px !important; 206 } 207 a.mail { 208 background-image: none; 209 display: flex !important; 210 align-items: center; 211 align-content: center; 212 } 213 a.mail::before { 214 content: '\F32F'; 215 font-family: 'bootstrap-icons'; 216 display: inline-block; 217 margin-right: 4px; 218 font-size: 1.2em; 219 color: #007bff; 220 } 221 a[href*="github.com/sponsors/"] { 222 display: flex !important; 223 align-items: center; 224 align-content: center; 225 } 226 a[href*="github.com/sponsors/"]:before { 227 content: "\F417"; 228 font-family: "bootstrap-icons"; 229 display: inline-block; 230 margin-right: 4px; 231 font-size: 1.2em; 232 color: #e60073; 233 } 234 } 235 div.li:has(a) { 236 padding: 0px; 237 } 238 > ul { 239 display: none; 240 position: absolute; 241 top: 32px; 242 background-color: @ini_text_alt; 243 color: @ini_background; 244 border-radius: 0px; 245 border-bottom-left-radius: 20px; 246 border-bottom-right-radius: 20px; 247 min-width: 250px; 248 height: auto; 249 250 li { 251 list-style-type: none; 252 width: 100%; 253 margin-top: 4px; 254 255 div.li { 256 width: 100%; 257 cursor: default; 258 259 > span { 260 width: 100%; 261 } 262 a { 263 cursor: pointer; 264 width: 100%; 265 padding: 8px; 266 padding-left: 16px; 267 padding-right: 16px; 268 border-radius: 0px; 269 270 i { 271 vertical-align: middle; 272 } 273 } 274 a:hover { 275 background-color: @ini_theme_color; 276 } 277 } 278 } 279 li:last-child { 280 div.li { 281 a { 282 border-bottom-left-radius: 20px; 283 border-bottom-right-radius: 20px; 284 } 285 } 286 } 287 } 288 } 289 > li:has(ul) { 290 cursor: pointer; 291 } 292 } 293 } 294 295 .inline.user-tools { 296 float:right; 297 color:@ini_background; 298 299 a,button { 300 color:@ini_background; 301 display: inline-block; 302 text-decoration: none; 303 padding: 6px; 304 padding-left: 12px; 305 padding-right: 12px; 306 line-height: 16px; 307 font-size: 16px; 308 outline: none; 309 310 i { 311 line-height: 16px; 312 font-size: 16px; 313 } 314 } 315 a:hover,button:hover { 316 background-color: @ini_theme_color; 317 } 318 } 319 320 .dropdown.bookmarks, 321 .dropdown.user-tools { 322 float:right; 323 color:@ini_background; 324 325 a[data-toggle="dropdown"],button[data-toggle="dropdown"] { 326 border-radius: 0px; 327 } 328 a,button { 329 color:@ini_background; 330 331 i { 332 font-size: 16px; 333 line-height: 16px; 334 height: 16px; 335 width: 16px; 336 vertical-align: baseline; 337 margin-right: 4px; 338 } 339 i.bi-person:before { content: '\F4E1'; } 340 } 341 .dropdown-menu { 342 border-top-left-radius: 0px; 343 border-top-right-radius: 0px; 344 345 li { 346 a,button { 347 348 i { 349 vertical-align: middle; 350 } 351 } 352 .avatar { 353 padding: 20px; 354 margin: 0px; 355 text-align: center; 356 vertical-align: middle; 357 358 img { 359 border-radius: 50%; 360 height: 96px; 361 width: 96px; 362 border: 3px solid @ini_background; 363 } 364 } 365 } 366 } 367 } 368 } 369} 370/* Print */ 371@media print { 372 .enableToolbar { 373 #writr__page { 374 margin-top: 0px; 375 } 376 #writr__toolbar { 377 display: none; 378 } 379 } 380} 381/* 960px > x */ 382@media only screen and (max-width: 959px) { 383 .enableToolbar { 384 &:has(#writr__toolbar .hook ul), 385 &:has(#writr__toolbar .hook ol), 386 &:has(#writr__toolbar .hook p), 387 &:has(#writr__toolbar .hook span), 388 &:has(#writr__toolbar .hook h1), 389 &:has(#writr__toolbar .hook h2), 390 &:has(#writr__toolbar .hook h3), 391 &:has(#writr__toolbar .hook h4), 392 &:has(#writr__toolbar .hook h5), 393 &:has(#writr__toolbar .hook h6), 394 &:has(#writr__toolbar .hook img) { 395 #writr__page { 396 margin-top: 64px; 397 } 398 } 399 #writr__toolbar { 400 flex-direction: column; 401 background: @ini_text_alt; 402 403 > * { 404 background: @ini_text_alt; 405 width: 100vw; 406 align-items: center; 407 align-content: center; 408 justify-content: center; 409 vertical-align: middle; 410 display: flex; 411 } 412 413 .hook { 414 justify-content: center; 415 } 416 417 .bookmarks, 418 .user-tools { 419 420 .dropdown-menu { 421 width: 100vw; 422 position: fixed; 423 top: 64px; 424 left: 0px; 425 } 426 } 427 } 428 } 429} 430