Nice little directory browser :D
fix/ThankYouTestUser: mask-[...] has a tailwind util, thanks twitter!
+99
-3
+1
-1
Components/ThankYouTestUser.razor
+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
+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;