an app to share curated trails
sidetrail.app
1.edit-btn-utility {
2 width: 32px;
3 height: 32px;
4 border: 1.5px solid var(--accent-color);
5 background: transparent;
6 color: var(--accent-color);
7 cursor: pointer;
8 border-radius: 50%;
9 transition: all 0.15s ease;
10 display: flex;
11 align-items: center;
12 justify-content: center;
13 font-weight: 400;
14 padding: 0;
15 font-family: inherit;
16 font-size: 1rem;
17 line-height: 1;
18 position: relative;
19 filter: var(--user-content-filter);
20}
21
22@media (max-width: 768px) {
23 .edit-btn-utility::after {
24 content: "";
25 position: absolute;
26 inset: -6px;
27 }
28}
29
30@media (hover: hover) {
31 .edit-btn-utility:hover {
32 background: var(--accent-color);
33 color: white;
34 transform: scale(1.05);
35 }
36}
37
38.edit-btn-utility:active {
39 background: var(--accent-color);
40 color: white;
41 transition-duration: 0.05s;
42}
43
44.edit-btn-utility:focus-visible {
45 outline: 2px solid var(--accent-color);
46 outline-offset: 2px;
47}
48
49.edit-btn-add {
50 font-size: 1.25rem;
51 line-height: 0.9;
52 padding-bottom: 2px;
53}
54
55.edit-btn-delete {
56 width: 28px;
57 height: 28px;
58 border: none;
59 background: none;
60 color: var(--text-tertiary);
61 cursor: pointer;
62 border-radius: 6px;
63 transition: all 0.15s ease;
64 font-size: 1.75rem;
65 display: flex;
66 align-items: center;
67 justify-content: center;
68 font-weight: 300;
69 line-height: 1;
70 padding: 0;
71 padding-bottom: 3px;
72 font-family: inherit;
73 position: relative;
74}
75
76@media (max-width: 768px) {
77 .edit-btn-delete::after {
78 content: "";
79 position: absolute;
80 inset: -8px;
81 }
82}
83
84@media (hover: hover) {
85 .edit-btn-delete:hover {
86 color: var(--text-secondary);
87 background: rgba(0, 0, 0, 0.05);
88 }
89}
90
91@media (hover: hover) and (prefers-color-scheme: dark) {
92 .edit-btn-delete:hover {
93 background: rgba(255, 255, 255, 0.05);
94 }
95}
96
97.edit-btn-delete:active {
98 color: var(--text-secondary);
99 background: rgba(0, 0, 0, 0.08);
100 transition-duration: 0.05s;
101}
102
103@media (prefers-color-scheme: dark) {
104 .edit-btn-delete:active {
105 background: rgba(255, 255, 255, 0.08);
106 }
107}
108
109.edit-btn-delete:focus-visible {
110 outline: 1px solid var(--accent-color);
111}