Nice little directory browser :D
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix/ThankYouTestUser: mask-[...] has a tailwind util, thanks twitter!

+99 -3
+1 -1
Components/ThankYouTestUser.razor
··· 18 18 @* TODO: BUG on using browser back button, marquee text will duplicate. *@ 19 19 <div id="message" class="text-center items-center text-3xl flex flex-row gap-3"> 20 20 <div>🚧</div> 21 - <span class="mask-[linear-gradient(to_right,transparent,black_5%,black_95%,transparent)] w-full overflow-hidden text-sm invisible" 21 + <span class="mask-x-from-95% w-full overflow-hidden text-sm invisible" 22 22 data-duration="7500" 23 23 data-gap="25" 24 24 data-duplicated="true"
+98 -2
public/style.css
··· 286 286 --tw-gradient-to: var(--color-red-500) !important; 287 287 --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)) !important; 288 288 } 289 - .mask-\[linear-gradient\(to_right\,transparent\,black_5\%\,black_95\%\,transparent\)\] { 290 - mask-image: linear-gradient(to right,transparent,black 5%,black 95%,transparent); 289 + .mask-x-from-95\% { 290 + mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic); 291 + mask-composite: intersect; 292 + --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top); 293 + --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position)); 294 + --tw-mask-right-from-position: 95%; 295 + --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position)); 296 + --tw-mask-left-from-position: 95%; 291 297 } 292 298 .p-4 { 293 299 padding: calc(var(--spacing) * 4); ··· 3532 3538 inherits: false; 3533 3539 initial-value: 100%; 3534 3540 } 3541 + @property --tw-mask-linear { 3542 + syntax: "*"; 3543 + inherits: false; 3544 + initial-value: linear-gradient(#fff, #fff); 3545 + } 3546 + @property --tw-mask-radial { 3547 + syntax: "*"; 3548 + inherits: false; 3549 + initial-value: linear-gradient(#fff, #fff); 3550 + } 3551 + @property --tw-mask-conic { 3552 + syntax: "*"; 3553 + inherits: false; 3554 + initial-value: linear-gradient(#fff, #fff); 3555 + } 3556 + @property --tw-mask-left { 3557 + syntax: "*"; 3558 + inherits: false; 3559 + initial-value: linear-gradient(#fff, #fff); 3560 + } 3561 + @property --tw-mask-right { 3562 + syntax: "*"; 3563 + inherits: false; 3564 + initial-value: linear-gradient(#fff, #fff); 3565 + } 3566 + @property --tw-mask-bottom { 3567 + syntax: "*"; 3568 + inherits: false; 3569 + initial-value: linear-gradient(#fff, #fff); 3570 + } 3571 + @property --tw-mask-top { 3572 + syntax: "*"; 3573 + inherits: false; 3574 + initial-value: linear-gradient(#fff, #fff); 3575 + } 3576 + @property --tw-mask-right-from-position { 3577 + syntax: "*"; 3578 + inherits: false; 3579 + initial-value: 0%; 3580 + } 3581 + @property --tw-mask-right-to-position { 3582 + syntax: "*"; 3583 + inherits: false; 3584 + initial-value: 100%; 3585 + } 3586 + @property --tw-mask-right-from-color { 3587 + syntax: "*"; 3588 + inherits: false; 3589 + initial-value: black; 3590 + } 3591 + @property --tw-mask-right-to-color { 3592 + syntax: "*"; 3593 + inherits: false; 3594 + initial-value: transparent; 3595 + } 3596 + @property --tw-mask-left-from-position { 3597 + syntax: "*"; 3598 + inherits: false; 3599 + initial-value: 0%; 3600 + } 3601 + @property --tw-mask-left-to-position { 3602 + syntax: "*"; 3603 + inherits: false; 3604 + initial-value: 100%; 3605 + } 3606 + @property --tw-mask-left-from-color { 3607 + syntax: "*"; 3608 + inherits: false; 3609 + initial-value: black; 3610 + } 3611 + @property --tw-mask-left-to-color { 3612 + syntax: "*"; 3613 + inherits: false; 3614 + initial-value: transparent; 3615 + } 3535 3616 @property --tw-leading { 3536 3617 syntax: "*"; 3537 3618 inherits: false; ··· 3619 3700 --tw-gradient-from-position: 0%; 3620 3701 --tw-gradient-via-position: 50%; 3621 3702 --tw-gradient-to-position: 100%; 3703 + --tw-mask-linear: linear-gradient(#fff, #fff); 3704 + --tw-mask-radial: linear-gradient(#fff, #fff); 3705 + --tw-mask-conic: linear-gradient(#fff, #fff); 3706 + --tw-mask-left: linear-gradient(#fff, #fff); 3707 + --tw-mask-right: linear-gradient(#fff, #fff); 3708 + --tw-mask-bottom: linear-gradient(#fff, #fff); 3709 + --tw-mask-top: linear-gradient(#fff, #fff); 3710 + --tw-mask-right-from-position: 0%; 3711 + --tw-mask-right-to-position: 100%; 3712 + --tw-mask-right-from-color: black; 3713 + --tw-mask-right-to-color: transparent; 3714 + --tw-mask-left-from-position: 0%; 3715 + --tw-mask-left-to-position: 100%; 3716 + --tw-mask-left-from-color: black; 3717 + --tw-mask-left-to-color: transparent; 3622 3718 --tw-leading: initial; 3623 3719 --tw-duration: initial; 3624 3720 --tw-border-style: solid;