danabra.mov
an app to share curated trails
sidetrail.app
atproto
nextjs
react
rsc
1.TrailColorPicker-button {
2 position: fixed;
3 bottom: 2rem;
4 right: 2rem;
5 width: 56px;
6 height: 56px;
7 border-radius: 50%;
8 border: 3px solid rgba(255, 255, 255, 0.9);
9 cursor: pointer;
10 transition: all 0.2s;
11 z-index: 100;
12 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
13}
14
15.TrailColorPicker-button:hover {
16 transform: scale(1.1);
17 box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
18}
19
20.TrailColorPicker-popup {
21 position: fixed;
22 bottom: 6rem;
23 right: 2rem;
24 z-index: 99;
25 background: white;
26 padding: 1rem;
27 border-radius: 12px;
28 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
29}
30
31.TrailColorPicker-grid {
32 display: grid;
33 grid-template-columns: repeat(4, 1fr);
34 gap: 0.75rem;
35}
36
37.TrailColorPicker-option {
38 width: 48px;
39 height: 48px;
40 border-radius: 50%;
41 border: 3px solid transparent;
42 cursor: pointer;
43 transition: all 0.2s;
44}
45
46.TrailColorPicker-option:hover {
47 transform: scale(1.1);
48}
49
50.TrailColorPicker-option--active {
51 border-color: #333;
52 transform: scale(1.15);
53}
54
55@media (max-width: 768px) {
56 .TrailColorPicker-button {
57 bottom: 1.5rem;
58 right: 1.5rem;
59 width: 48px;
60 height: 48px;
61 }
62
63 .TrailColorPicker-popup {
64 bottom: 5rem;
65 right: 1.5rem;
66 }
67}