File size: 3,378 Bytes
aa66c2a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
:root{
  --bg:#0b1220; --panel:#121a2e; --card:#0f1730; --text:#e6edf7; --muted:#9fb0cf;
  --green:#18c37e; --red:#ff6363; --accent:#3a8dde; --ring: rgba(58,141,222,.35);
  --radius:16px; --shadow: 0 10px 28px rgba(2,8,23,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font: 15px/1.45 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text); background:linear-gradient(180deg,#0b1220,#0b1220 60%, #0d1530);
}

header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 22px; position:sticky; top:0; background:#0b1220cc; backdrop-filter:saturate(120%) blur(6px);
  border-bottom:1px solid #1b2542;
}
.brand{display:flex; align-items:center; gap:12px;}
.logo-dot{width:14px; height:14px; border-radius:50%; background:linear-gradient(135deg,var(--accent),#6ea8ff); box-shadow:0 0 20px #2e6fd6;}
.title{font-weight:700; letter-spacing:.3px}

.actions button{
  background:var(--accent); color:white; border:none; padding:10px 14px; border-radius:12px; cursor:pointer;
  box-shadow:var(--shadow); margin-left:8px; font-weight:600;
}
.actions button#addSiteBtn{background:#243254; border:1px solid #2d3c63}

main{max-width:1100px; margin:26px auto; padding:0 16px; display:grid; gap:18px}
.card{
  background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid #1b2542;
}
.card-head{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid #1b2542}
.muted{color:var(--muted); font-size:13px}
.table-wrap{overflow:auto}
table{width:100%; border-collapse:collapse}
th, td{padding:12px 14px; border-bottom:1px solid #1b2542; text-align:left}
th{color:var(--muted); font-weight:600; background: #0f1730}
tbody tr:hover{background:#0f1730}

.dot{
  width:12px; height:12px; border-radius:50%;
  box-shadow:0 0 0 3px #0b1220, 0 0 16px rgba(0,0,0,.25);
  display:inline-block;
}
.dot.green{background:var(--green)}
.dot.red{background:var(--red)}

a.url{color:#a9c6ff; text-decoration:none}
a.url:hover{text-decoration:underline}

.badge{padding:4px 8px; border-radius:999px; font-size:12px; border:1px solid #263257; color:#c9d7ff; background:#102143}

td .row-actions{display:flex; gap:8px}
button.ghost{
  background:transparent; border:1px solid #27355f; color:#c9d7ff; padding:8px 12px; border-radius:12px; cursor:pointer;
}

.hidden{display:none}

.incidents{padding:10px 16px}
.incident{
  display:flex; align-items:center; justify-content:space-between;
  background:#0f1730; border:1px solid #1b2542; border-radius:12px; padding:10px 12px; margin-bottom:10px;
}
.incident .down{color:#ff9f9f}
.incident .ok{color:#9fffc7}

dialog{
  border:none; border-radius:18px; padding:0; background:#111a31; color:var(--text); box-shadow: var(--shadow);
}
.dialog-card{padding:18px; width:360px}
.dialog-card h3{margin:0 0 10px}
.dialog-card label{display:block; margin:10px 0}
.dialog-card input{
  width:100%; padding:10px 12px; border-radius:12px; border:1px solid #283663; background:#0f1730; color:var(--text);
}
.dialog-card .row{display:flex; gap:10px; margin-top:14px}
.dialog-card button{
  background:var(--accent); color:white; border:none; padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:600;
}
.dialog-card button.ghost{background:transparent; border:1px solid #27355f; color:#c9d7ff}