an app to share curated trails
sidetrail.app
atproto
nextjs
react
rsc
1.TextButton {
2 font-family: inherit;
3 font-size: inherit;
4 line-height: 1;
5 padding: 0.5rem 0;
6 background: none;
7 border: none;
8 color: var(--text-muted);
9 cursor: pointer;
10 text-transform: lowercase;
11 transition: color 0.2s ease;
12 white-space: nowrap;
13}
14
15@media (hover: hover) {
16 .TextButton:hover:not(:disabled) {
17 color: var(--text-secondary);
18 }
19}
20
21.TextButton:active:not(:disabled) {
22 color: var(--text-secondary);
23 transition-duration: 0.05s;
24}
25
26.TextButton:disabled {
27 pointer-events: none;
28 cursor: default;
29}
30
31.TextButton--pending {
32 color: transparent;
33 -webkit-text-fill-color: transparent;
34 background-image: linear-gradient(
35 to right,
36 var(--text-muted) 0%,
37 var(--text-secondary) 50%,
38 var(--text-muted) 100%
39 );
40 background-size: 30px 100%;
41 background-repeat: no-repeat;
42 background-color: var(--text-muted);
43 background-clip: text;
44 -webkit-background-clip: text;
45 animation: text-shimmer 2s ease-out infinite;
46}
47
48@keyframes text-shimmer {
49 0% {
50 background-image: linear-gradient(
51 to right,
52 var(--text-muted) 0%,
53 var(--text-secondary) 50%,
54 var(--text-muted) 100%
55 );
56 background-position: -30px 0;
57 background-clip: text;
58 -webkit-background-clip: text;
59 }
60 80% {
61 background-image: linear-gradient(
62 to right,
63 var(--text-muted) 0%,
64 var(--text-secondary) 50%,
65 var(--text-muted) 100%
66 );
67 background-position: 100px 0;
68 background-clip: text;
69 -webkit-background-clip: text;
70 }
71 100% {
72 background-image: linear-gradient(
73 to right,
74 var(--text-muted) 0%,
75 var(--text-secondary) 50%,
76 var(--text-muted) 100%
77 );
78 background-position: 150px 0;
79 background-clip: text;
80 -webkit-background-clip: text;
81 }
82}