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*="youtube.com/"]::before { 127 content: "\F62B"; 128 color: #b2071d; 129 } 130 131 &[href*="instagram.com/"]::before { 132 content: "\F437"; 133 color: #E4405F; 134 } 135 136 &[href*="github.com/"]::before { 137 content: "\F3ED"; 138 color: #ffffff; 139 } 140 141 &[href*="github.com/sponsors/"]::before { 142 content: "\F417"; 143 color: #e60073; 144 } 145 146 &[href*="reddit.com/"]::before { 147 content: "\F650"; 148 color: #FF4500; 149 } 150 151 &[href*="twitter.com/"]::before { 152 content: "\F5EF"; 153 color: #1DA1F2; 154 } 155 156 &[href*="x.com/"]::before { 157 content: "\F8DB"; 158 color: #1DA1F2; 159 } 160 161 &[href*="facebook.com/"]::before { 162 content: "\F344"; 163 color: #1877F2; 164 } 165 166 &[href*="patreon.com/"]::before { 167 content: "\F417"; 168 color: #F96854; 169 } 170 } 171 a:hover { 172 background-color: @ini_theme_color; 173 } 174 a:has(img),a.urlexter:has(img) { 175 padding: 0px 12px !important; 176 } 177 a.mail { 178 background-image: none; 179 display: flex !important; 180 align-items: center; 181 align-content: center; 182 } 183 a.mail::before { 184 content: '\F32F'; 185 font-family: 'bootstrap-icons'; 186 display: inline-block; 187 margin-right: 4px; 188 font-size: 1.2em; 189 color: #007bff; 190 } 191 a[href*="github.com/sponsors/"] { 192 display: flex !important; 193 align-items: center; 194 align-content: center; 195 } 196 a[href*="github.com/sponsors/"]:before { 197 content: "\F417"; 198 font-family: "bootstrap-icons"; 199 display: inline-block; 200 margin-right: 4px; 201 font-size: 1.2em; 202 color: #e60073; 203 } 204 } 205 div.li:has(a) { 206 padding: 0px; 207 } 208 > ul { 209 display: none; 210 position: absolute; 211 top: 32px; 212 background-color: @ini_text_alt; 213 color: @ini_background; 214 border-radius: 0px; 215 border-bottom-left-radius: 20px; 216 border-bottom-right-radius: 20px; 217 min-width: 250px; 218 height: auto; 219 220 li { 221 list-style-type: none; 222 width: 100%; 223 margin-top: 4px; 224 225 div.li { 226 width: 100%; 227 cursor: default; 228 229 > span { 230 width: 100%; 231 } 232 a { 233 cursor: pointer; 234 width: 100%; 235 padding: 8px; 236 padding-left: 16px; 237 padding-right: 16px; 238 border-radius: 0px; 239 240 i { 241 vertical-align: middle; 242 } 243 } 244 a:hover { 245 background-color: @ini_theme_color; 246 } 247 } 248 } 249 li:last-child { 250 div.li { 251 a { 252 border-bottom-left-radius: 20px; 253 border-bottom-right-radius: 20px; 254 } 255 } 256 } 257 } 258 } 259 > li:has(ul) { 260 cursor: pointer; 261 } 262 } 263 } 264 265 .inline.user-tools { 266 float:right; 267 color:@ini_background; 268 269 a,button { 270 color:@ini_background; 271 display: inline-block; 272 text-decoration: none; 273 padding: 6px; 274 padding-left: 12px; 275 padding-right: 12px; 276 line-height: 16px; 277 font-size: 16px; 278 outline: none; 279 280 i { 281 line-height: 16px; 282 font-size: 16px; 283 } 284 } 285 a:hover,button:hover { 286 background-color: @ini_theme_color; 287 } 288 } 289 290 .dropdown.bookmarks, 291 .dropdown.user-tools { 292 float:right; 293 color:@ini_background; 294 295 a[data-toggle="dropdown"],button[data-toggle="dropdown"] { 296 border-radius: 0px; 297 } 298 a,button { 299 color:@ini_background; 300 301 i { 302 font-size: 16px; 303 line-height: 16px; 304 height: 16px; 305 width: 16px; 306 vertical-align: baseline; 307 margin-right: 4px; 308 } 309 i.bi-person:before { content: '\F4E1'; } 310 } 311 .dropdown-menu { 312 border-top-left-radius: 0px; 313 border-top-right-radius: 0px; 314 315 li { 316 a,button { 317 318 i { 319 vertical-align: middle; 320 } 321 } 322 .avatar { 323 padding: 20px; 324 margin: 0px; 325 text-align: center; 326 vertical-align: middle; 327 328 img { 329 border-radius: 50%; 330 height: 96px; 331 width: 96px; 332 border: 3px solid @ini_background; 333 } 334 } 335 } 336 } 337 } 338 } 339} 340/* Print */ 341@media print { 342 .enableToolbar { 343 #writr__page { 344 margin-top: 0px; 345 } 346 #writr__toolbar { 347 display: none; 348 } 349 } 350} 351/* 960px > x */ 352@media only screen and (max-width: 959px) { 353 .enableToolbar { 354 &:has(#writr__toolbar .hook ul), 355 &:has(#writr__toolbar .hook ol), 356 &:has(#writr__toolbar .hook p), 357 &:has(#writr__toolbar .hook span), 358 &:has(#writr__toolbar .hook h1), 359 &:has(#writr__toolbar .hook h2), 360 &:has(#writr__toolbar .hook h3), 361 &:has(#writr__toolbar .hook h4), 362 &:has(#writr__toolbar .hook h5), 363 &:has(#writr__toolbar .hook h6), 364 &:has(#writr__toolbar .hook img) { 365 #writr__page { 366 margin-top: 64px; 367 } 368 } 369 #writr__toolbar { 370 flex-direction: column; 371 background: @ini_text_alt; 372 373 > * { 374 background: @ini_text_alt; 375 width: 100vw; 376 align-items: center; 377 align-content: center; 378 justify-content: center; 379 vertical-align: middle; 380 display: flex; 381 } 382 383 .hook { 384 justify-content: center; 385 } 386 387 .bookmarks, 388 .user-tools { 389 390 .dropdown-menu { 391 width: 100vw; 392 position: fixed; 393 top: 64px; 394 left: 0px; 395 } 396 } 397 } 398 } 399} 400