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
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 display: flex;
43 justify-content: space-between;
44}
45
46header h1 {
47 font-size: 1rem;
48 margin: 0;
49 display: flex;
50 align-items: center;
51}
52
53header .icon-btn {
54 border: none;
55 background: none;
56 cursor: pointer;
57 padding: 0.4rem;
58}
59
60.status {
61 background: #fff;
62 border-bottom: 1px solid #f3f4f6;
63 padding: 0.75rem 1rem;
64 display: flex;
65 justify-content: space-between;
66 align-items: center;
67 font-size: 0.9rem;
68}
69
70.content {
71 flex: 1;
72 overflow-y: auto;
73 padding: 1rem;
74}
75
76.friends-header {
77 display: flex;
78 align-items: center;
79 gap: 0.5rem;
80 margin-bottom: 1rem;
81}
82
83.friend-card {
84 background: #fff;
85 border: 1px solid #e5e7eb;
86 border-radius: 8px;
87 padding: 1rem;
88 margin-bottom: 0.75rem;
89 display: flex;
90 justify-content: space-between;
91 align-items: center;
92}
93
94.friend-actions {
95 display: flex;
96 align-items: center;
97 gap: 0.1rem;
98}
99
100.friend-actions .view-btn {
101 cursor: pointer;
102 border-radius: 6px;
103 border: 1px solid #d1d5db;
104 background: #fff;
105 padding: 0.3rem 0.5rem;
106 font-size: 0.8rem;
107}
108
109.friend-actions .view-btn:hover {
110 background: #f3f4f6;
111}
112
113.menu-icon {
114 width: 16px;
115 height: 16px;
116 margin: 0;
117}
118
119.friend-actions {
120 cursor: pointer;
121 font-size: 1.2rem;
122 color: #6b7280;
123 padding: 0 0.3rem;
124 user-select: none;
125}
126
127.friend-actions {
128 color: #111827;
129}
130
131.empty-state {
132 text-align: center;
133 padding: 3rem 1rem;
134 color: #6b7280;
135}
136
137.empty-state button {
138 margin-top: 0.75rem;
139 padding: 0.5rem 1rem;
140 border: none;
141 border-radius: 6px;
142 background: #3b82f6;
143 color: white;
144 cursor: pointer;
145}
146
147.friend-actions button img {
148 width: 16px;
149 height: 16px;
150 vertical-align: middle;
151 margin-right: 4px;
152}