an app to share curated trails
sidetrail.app
1/* Base utility button - shared styles */
2.edit-btn-utility {
3 width: 32px;
4 height: 32px;
5 border: 1.5px solid var(--accent-color);
6 background: transparent;
7 color: var(--accent-color);
8 cursor: pointer;
9 border-radius: 50%;
10 transition: all 0.15s ease;
11 display: flex;
12 align-items: center;
13 justify-content: center;
14 font-weight: 400;
15 padding: 0;
16 font-family: inherit;
17 font-size: 1rem;
18 line-height: 1;
19 position: relative;
20 filter: var(--user-content-filter);
21}
22
23.edit-btn-utility:hover {
24 background: var(--accent-color);
25 color: white;
26 transform: scale(1.05);
27}
28
29/* Add button - larger icon, adjusted centering */
30.edit-btn-add {
31 font-size: 1.25rem;
32 line-height: 0.9;
33 padding-bottom: 2px;
34}
35
36/* Delete button - subtle style */
37.edit-btn-delete {
38 width: 28px;
39 height: 28px;
40 border: none;
41 background: none;
42 color: var(--text-tertiary);
43 cursor: pointer;
44 border-radius: 6px;
45 transition: all 0.15s ease;
46 font-size: 1.75rem;
47 display: flex;
48 align-items: center;
49 justify-content: center;
50 font-weight: 300;
51 line-height: 1;
52 padding: 0;
53 padding-bottom: 3px; /* Adjust vertical alignment of × */
54 font-family: inherit;
55}
56
57.edit-btn-delete:hover {
58 color: var(--text-secondary);
59 background: rgba(0, 0, 0, 0.05);
60}
61
62@media (prefers-color-scheme: dark) {
63 .edit-btn-delete:hover {
64 background: rgba(255, 255, 255, 0.05);
65 }
66}
67
68.edit-btn-delete:focus-visible {
69 outline: 1px solid var(--accent-color);
70}