graphgames/style.css at main · JonahWilberg/graphgames · GitHub

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
84
85
:root{
  --bg:#0b0f14; --panel:#111827; --ink:#e5e7eb; --muted:#9ca3af; --border:#263244;
}
*{ box-sizing:border-box; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; }
body{ margin:0; background:var(--bg); color:var(--ink); }
header{ padding:18px 18px 0 18px; }
h1{ margin:0 0 6px 0; font-size:20px; }
.sub{ margin:0 0 14px 0; color:var(--muted); max-width:1100px; }
main.grid{
  display:grid;
  grid-template-columns: 340px 340px 1fr;
  gap:14px;
  padding:14px 18px 18px 18px;
}
.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
}
.panel.wide{ grid-column: 1 / span 3; }
h2{ margin:0 0 10px 0; font-size:15px; }
label{ display:block; margin:10px 0; color:var(--muted); font-size:12px; }
label.inline{ display:flex; align-items:center; gap:10px; }
select,input{
  width:100%;
  margin-top:6px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#0b1220;
  color:var(--ink);
  outline:none;
}
.row{ display:flex; gap:10px; }
.row > label{ flex:1; }
.btnRow{ display:flex; gap:10px; margin-top:10px; }
button{
  flex:1;
  padding:9px 10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#0b1220;
  color:var(--ink);
  cursor:pointer;
}
button:hover{ filter:brightness(1.15); }
.small{ color:var(--muted); font-size:12px; margin-top:8px; line-height:1.35; }
.hidden{ display:none; }

.matrix{
  display:grid;
  grid-template-columns: 40px 1fr 1fr;
  gap:8px;
  align-items:center;
  margin-top:8px;
}
.matrix > div{ color:var(--muted); font-size:12px; text-align:center; }
.matrix input{ margin-top:0; }

.vizRow{ display:flex; gap:14px; align-items:flex-start; }
canvas{
  border-radius:14px;
  border:1px solid var(--border);
  background:#060a10;
  max-width:100%;
  height:auto;
}
.stats{
  width:280px;
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px;
  background:#0b1220;
  color:var(--ink);
  font-size:13px;
}
.stats hr{ border:0; border-top:1px solid var(--border); margin:10px 0; }
footer{ padding:0 18px 18px 18px; }
@media (max-width: 1100px){
  main.grid{ grid-template-columns:1fr; }
  .panel.wide{ grid-column:auto; }
  .vizRow{ flex-direction:column; }
  .stats{ width:100%; }
}