Skip to content

Commit 32586fd

Browse files
bigmalloybigmalloy
committed
luci-app-starlink-panel: const/let for module-level vars; move CSS to status.css
1 parent 8cef0fd commit 32586fd

2 files changed

Lines changed: 330 additions & 77 deletions

File tree

‎applications/luci-app-starlink-panel/htdocs/luci-static/resources/view/starlink-panel/status.css‎

Lines changed: 291 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,291 @@
1+
/* SPDX-License-Identifier: MIT */
2+
3+
:root {
4+
--sl-border: rgba(0, 0, 0, 0.15);
5+
--sl-subtle: rgba(0, 0, 0, 0.05);
6+
--sl-muted: #555;
7+
--sl-accent: #0550ae;
8+
--sl-green: #1a7f37;
9+
--sl-yellow: #9a6700;
10+
--sl-red: #cf222e;
11+
}
12+
13+
@media (prefers-color-scheme: dark) {
14+
:root {
15+
--sl-border: rgba(255, 255, 255, 0.12);
16+
--sl-subtle: rgba(255, 255, 255, 0.06);
17+
--sl-muted: #8b949e;
18+
--sl-accent: #58a6ff;
19+
--sl-green: #3fb950;
20+
--sl-yellow: #d29922;
21+
--sl-red: #f85149;
22+
}
23+
}
24+
25+
/* ── Layout ─────────────────────────────────────────────────────────────────── */
26+
27+
.sl-wrap {
28+
font-family: inherit;
29+
padding: 20px;
30+
min-height: 400px;
31+
}
32+
33+
.sl-header {
34+
display: flex;
35+
align-items: center;
36+
justify-content: space-between;
37+
margin-bottom: 20px;
38+
padding-bottom: 16px;
39+
border-bottom: 1px solid var(--sl-border);
40+
}
41+
42+
.sl-title {
43+
font-size: 1.3em;
44+
font-weight: 700;
45+
color: var(--sl-accent);
46+
display: flex;
47+
align-items: center;
48+
gap: 8px;
49+
}
50+
51+
.sl-meta {
52+
font-size: 0.8em;
53+
color: var(--sl-muted);
54+
display: flex;
55+
align-items: center;
56+
gap: 10px;
57+
}
58+
59+
.sl-grid {
60+
display: grid;
61+
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
62+
gap: 14px;
63+
}
64+
65+
/* ── Cards ──────────────────────────────────────────────────────────────────── */
66+
67+
.sl-card {
68+
border: 1px solid var(--sl-border);
69+
border-radius: 8px;
70+
overflow: hidden;
71+
}
72+
73+
.sl-card-full {
74+
grid-column: 1 / -1;
75+
}
76+
77+
.sl-card-hd {
78+
display: flex;
79+
align-items: center;
80+
gap: 8px;
81+
padding: 10px 14px;
82+
border-bottom: 1px solid var(--sl-border);
83+
font-size: 0.88em;
84+
font-weight: 600;
85+
color: var(--sl-muted);
86+
text-transform: uppercase;
87+
letter-spacing: 0.06em;
88+
}
89+
90+
.sl-card-icon {
91+
font-size: 1.1em;
92+
}
93+
94+
.sl-card-bd {
95+
padding: 12px 14px;
96+
}
97+
98+
/* ── Rows ───────────────────────────────────────────────────────────────────── */
99+
100+
.sl-row {
101+
display: flex;
102+
justify-content: space-between;
103+
align-items: center;
104+
padding: 5px 0;
105+
border-bottom: 1px solid var(--sl-border);
106+
font-size: 0.88em;
107+
gap: 8px;
108+
}
109+
110+
.sl-row:last-child {
111+
border-bottom: none;
112+
}
113+
114+
.sl-lbl {
115+
color: var(--sl-muted);
116+
white-space: nowrap;
117+
}
118+
119+
.sl-val {
120+
font-weight: 500;
121+
text-align: right;
122+
word-break: break-all;
123+
}
124+
125+
/* ── Big stat row ───────────────────────────────────────────────────────────── */
126+
127+
.sl-big-row {
128+
display: flex;
129+
justify-content: space-around;
130+
padding: 10px 0;
131+
}
132+
133+
.sl-big-item {
134+
text-align: center;
135+
}
136+
137+
.sl-big-num {
138+
font-size: 1.5em;
139+
font-weight: 700;
140+
}
141+
142+
.sl-big-lbl {
143+
font-size: 0.75em;
144+
color: var(--sl-muted);
145+
margin-top: 2px;
146+
}
147+
148+
/* ── Misc ───────────────────────────────────────────────────────────────────── */
149+
150+
.sl-qdisc {
151+
font-family: monospace;
152+
font-size: 0.78em;
153+
color: var(--sl-muted);
154+
padding: 8px;
155+
background: var(--sl-subtle);
156+
border-radius: 4px;
157+
margin-top: 10px;
158+
word-break: break-all;
159+
}
160+
161+
.sl-na {
162+
color: var(--sl-muted);
163+
font-size: 0.85em;
164+
font-style: italic;
165+
text-align: center;
166+
padding: 12px 0;
167+
}
168+
169+
.sl-note {
170+
background: var(--sl-subtle);
171+
border: 1px solid var(--sl-border);
172+
border-left: 3px solid var(--sl-accent);
173+
border-radius: 0 4px 4px 0;
174+
padding: 10px 12px;
175+
font-size: 0.82em;
176+
color: var(--sl-muted);
177+
margin-top: 8px;
178+
}
179+
180+
.sl-note code {
181+
background: var(--sl-subtle);
182+
padding: 1px 5px;
183+
border-radius: 3px;
184+
font-family: monospace;
185+
color: var(--sl-accent);
186+
}
187+
188+
.sl-alert-row {
189+
margin-top: 4px;
190+
font-size: 0.85em;
191+
color: var(--sl-yellow);
192+
}
193+
194+
/* ── Alignment card ─────────────────────────────────────────────────────────── */
195+
196+
.sl-align-grid {
197+
display: grid;
198+
grid-template-columns: 1fr 1fr;
199+
gap: 12px;
200+
padding: 4px 0;
201+
}
202+
203+
.sl-align-item {
204+
text-align: center;
205+
background: var(--sl-subtle);
206+
border: 1px solid var(--sl-border);
207+
border-radius: 6px;
208+
padding: 12px 8px;
209+
}
210+
211+
.sl-align-val {
212+
font-size: 1.4em;
213+
font-weight: 700;
214+
letter-spacing: -0.01em;
215+
}
216+
217+
.sl-align-lbl {
218+
font-size: 0.78em;
219+
color: var(--sl-muted);
220+
margin-top: 4px;
221+
}
222+
223+
.sl-align-ok {
224+
font-size: 1.1em;
225+
font-weight: 600;
226+
color: var(--sl-green);
227+
text-align: center;
228+
padding: 8px;
229+
}
230+
231+
/* ── Reboot button ──────────────────────────────────────────────────────────── */
232+
233+
.sl-reboot-btn {
234+
width: 100%;
235+
margin-top: 12px;
236+
padding: 8px 0;
237+
background: var(--sl-subtle);
238+
border: 1px solid #f0883e;
239+
color: #f0883e;
240+
border-radius: 6px;
241+
font-size: 0.88em;
242+
font-weight: 600;
243+
cursor: pointer;
244+
letter-spacing: 0.03em;
245+
}
246+
247+
.sl-reboot-btn:hover {
248+
background: rgba(240, 136, 62, 0.15);
249+
border-color: #f0883e;
250+
}
251+
252+
.sl-reboot-btn:disabled {
253+
opacity: 0.4;
254+
cursor: not-allowed;
255+
}
256+
257+
/* ── Alerts list ────────────────────────────────────────────────────────────── */
258+
259+
.sl-al-list {
260+
display: grid;
261+
grid-template-columns: 1fr 1fr;
262+
gap: 0;
263+
}
264+
265+
.sl-al-item {
266+
display: flex;
267+
align-items: center;
268+
gap: 8px;
269+
padding: 6px 4px;
270+
border-bottom: 1px solid var(--sl-border);
271+
font-size: 0.87em;
272+
}
273+
274+
.sl-al-item:nth-child(odd):last-child {
275+
grid-column: 1 / -1;
276+
}
277+
278+
.sl-al-dot {
279+
width: 8px;
280+
height: 8px;
281+
border-radius: 50%;
282+
flex-shrink: 0;
283+
}
284+
285+
.sl-al-ok { background: var(--sl-green); }
286+
.sl-al-err { background: var(--sl-red); }
287+
288+
.sl-al-txt-err {
289+
color: var(--sl-red);
290+
font-weight: 600;
291+
}

0 commit comments

Comments
 (0)