homeio

1:root {
2  --bg: #0b0d12;
3  --surface: #151922;
4  --surface-2: #1d2330;
5  --border: #2a3140;
6  --text: #e7ebf2;
7  --muted: #9aa6b8;
8  --accent: #4f8cff;
9  --accent-press: #3d72d6;
10  --danger: #ff6b6b;
11  --radius: 14px;
12  color-scheme: dark;
13}
14
15* {
16  box-sizing: border-box;
17}
18
19html,
20body {
21  margin: 0;
22  background: var(--bg);
23  color: var(--text);
24  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
25  -webkit-font-smoothing: antialiased;
26}
27
28.screen {
29  max-width: 560px;
30  margin: 0 auto;
31  padding: calc(env(safe-area-inset-top) + 32px) 20px
32    calc(env(safe-area-inset-bottom) + 32px);
33  display: flex;
34  flex-direction: column;
35  gap: 22px;
36  min-height: 100dvh;
37}
38
39.brand h1 {
40  margin: 0;
41  font-size: 30px;
42  letter-spacing: -0.02em;
43}
44
45.subtitle {
46  margin: 4px 0 0;
47  color: var(--muted);
48  font-size: 15px;
49}
50
51.error {
52  margin: 0;
53  padding: 12px 14px;
54  background: rgba(255, 107, 107, 0.12);
55  border: 1px solid rgba(255, 107, 107, 0.4);
56  border-radius: var(--radius);
57  color: var(--danger);
58  font-size: 14px;
59}
60
61.empty {
62  margin: 0;
63  color: var(--muted);
64  font-size: 14px;
65}
66
67.servers {
68  display: flex;
69  flex-direction: column;
70  gap: 10px;
71}
72
73.server-card {
74  display: flex;
75  align-items: stretch;
76  gap: 8px;
77  background: var(--surface);
78  border: 1px solid var(--border);
79  border-radius: var(--radius);
80  overflow: hidden;
81}
82
83.server-main {
84  flex: 1;
85  display: flex;
86  flex-direction: column;
87  gap: 4px;
88  align-items: flex-start;
89  padding: 16px;
90  background: transparent;
91  border: 0;
92  color: inherit;
93  text-align: left;
94  cursor: pointer;
95}
96
97.server-main:active {
98  background: var(--surface-2);
99}
100
101.server-main:disabled {
102  opacity: 0.6;
103}
104
105.server-label {
106  font-size: 17px;
107  font-weight: 600;
108}
109
110.server-meta {
111  font-size: 13px;
112  color: var(--muted);
113  word-break: break-all;
114}
115
116.server-remove {
117  width: 48px;
118  background: transparent;
119  border: 0;
120  border-left: 1px solid var(--border);
121  color: var(--muted);
122  font-size: 16px;
123  cursor: pointer;
124}
125
126.server-remove:active {
127  background: var(--surface-2);
128  color: var(--danger);
129}
130
131.add-form {
132  display: flex;
133  flex-direction: column;
134  gap: 14px;
135  background: var(--surface);
136  border: 1px solid var(--border);
137  border-radius: var(--radius);
138  padding: 20px;
139}
140
141.add-form h2 {
142  margin: 0;
143  font-size: 17px;
144}
145
146.add-form label {
147  display: flex;
148  flex-direction: column;
149  gap: 6px;
150  font-size: 13px;
151  color: var(--muted);
152}
153
154.add-form label em {
155  font-style: normal;
156  opacity: 0.7;
157}
158
159.add-form input {
160  width: 100%;
161  padding: 13px 14px;
162  background: var(--bg);
163  border: 1px solid var(--border);
164  border-radius: 10px;
165  color: var(--text);
166  font-size: 16px;
167}
168
169.add-form input:focus {
170  outline: none;
171  border-color: var(--accent);
172}
173
174.add-form button {
175  margin-top: 4px;
176  padding: 14px;
177  background: var(--accent);
178  border: 0;
179  border-radius: 10px;
180  color: #fff;
181  font-size: 16px;
182  font-weight: 600;
183  cursor: pointer;
184}
185
186.add-form button:active {
187  background: var(--accent-press);
188}
189
190.add-form button:disabled {
191  opacity: 0.7;
192}
193
194.hint {
195  margin: 0;
196  font-size: 12px;
197  color: var(--muted);
198  line-height: 1.5;
199}
200