azom.dev
Self-hosted, federated location sharing app and server that prioritizes user privacy and security
end-to-end-encryption
location-sharing
privacy
self-hosted
federated
kishka.cc
added a 15% padding to top of header on home and add-friend pages so top controls can be accessed and aren't cut off.
1.container-sl {
2 display: flex;
3 justify-content: space-between; /* This will align the elements on opposite sides of the container */
4}
5
6.element-al,
7.element-ar {
8 flex: 1; /* Make the elements take up equal width */
9}
10
11.element-al {
12 text-align: left;
13}
14
15.element-ar {
16 text-align: right;
17}
18
19body {
20 font-family: sans-serif;
21 background: #f9fafb;
22 margin: 0;
23 display: flex;
24 justify-content: center;
25}
26
27.app {
28 width: 100%;
29 background: #f9fafb;
30}
31
32.svg-icon {
33 width: 25px;
34 height: 25px;
35 margin: auto;
36}
37
38header {
39 background: #fff;
40 border-bottom: 1px solid #e5e7eb;
41 padding: 0.75rem 1rem;
42 padding-top: 15%;
43 display: flex;
44 justify-content: space-between;
45}
46
47header h1 {
48 font-size: 1rem;
49 margin: 0;
50 display: flex;
51 align-items: center;
52}
53
54header .icon-btn {
55 border: none;
56 background: none;
57 cursor: pointer;
58 padding: 0.4rem;
59}
60
61.status {
62 background: #fff;
63 border-bottom: 1px solid #f3f4f6;
64 padding: 0.75rem 1rem;
65 display: flex;
66 justify-content: space-between;
67 align-items: center;
68 font-size: 0.9rem;
69}
70
71.content {
72 flex: 1;
73 overflow-y: auto;
74 padding: 1rem;
75}
76
77.friends-header {
78 display: flex;
79 align-items: center;
80 gap: 0.5rem;
81 margin-bottom: 1rem;
82}
83
84.friend-card {
85 background: #fff;
86 border: 1px solid #e5e7eb;
87 border-radius: 8px;
88 padding: 1rem;
89 margin-bottom: 0.75rem;
90 display: flex;
91 justify-content: space-between;
92 align-items: center;
93}
94
95.friend-actions {
96 display: flex;
97 align-items: center;
98 gap: 0.1rem;
99}
100
101.friend-actions .view-btn {
102 cursor: pointer;
103 border-radius: 6px;
104 border: 1px solid #d1d5db;
105 background: #fff;
106 padding: 0.3rem 0.5rem;
107 font-size: 0.8rem;
108}
109
110.friend-actions .view-btn:hover {
111 background: #f3f4f6;
112}
113
114.menu-icon {
115 width: 16px;
116 height: 16px;
117 margin: 0;
118}
119
120.friend-actions {
121 cursor: pointer;
122 font-size: 1.2rem;
123 color: #6b7280;
124 padding: 0 0.3rem;
125 user-select: none;
126}
127
128.friend-actions {
129 color: #111827;
130}
131
132.empty-state {
133 text-align: center;
134 padding: 3rem 1rem;
135 color: #6b7280;
136}
137
138.empty-state button {
139 margin-top: 0.75rem;
140 padding: 0.5rem 1rem;
141 border: none;
142 border-radius: 6px;
143 background: #3b82f6;
144 color: white;
145 cursor: pointer;
146}
147
148.friend-actions button img {
149 width: 16px;
150 height: 16px;
151 vertical-align: middle;
152 margin-right: 4px;
153}