nandi.uk
This repository has no description
1:root {
2 color-scheme: dark;
3 font-family: Inter, ui-sans-serif, system-ui, sans-serif;
4 background: #0b1020;
5 color: #e8ecf3;
6}
7
8* {
9 box-sizing: border-box;
10}
11
12body {
13 margin: 0;
14 min-height: 100vh;
15 background:
16 radial-gradient(circle at top, rgba(76, 123, 255, 0.18), transparent 30%),
17 linear-gradient(180deg, #0b1020 0%, #111827 100%);
18}
19
20#app {
21 display: grid;
22 grid-template-columns: 360px 1fr;
23 min-height: 100vh;
24}
25
26.panel {
27 padding: 20px;
28 border-right: 1px solid rgba(255, 255, 255, 0.08);
29 background: rgba(10, 15, 30, 0.78);
30 backdrop-filter: blur(16px);
31}
32
33h1 {
34 margin: 0 0 8px;
35 font-size: 1.6rem;
36}
37
38p,
39label,
40button,
41input {
42 font: inherit;
43}
44
45.copy {
46 color: #9ba7bd;
47 line-height: 1.45;
48}
49
50.stack {
51 display: grid;
52 gap: 16px;
53 margin-top: 20px;
54}
55
56.card {
57 padding: 16px;
58 border: 1px solid rgba(255, 255, 255, 0.08);
59 border-radius: 14px;
60 background: rgba(255, 255, 255, 0.03);
61}
62
63.card h2 {
64 margin: 0 0 10px;
65 font-size: 1rem;
66}
67
68input[type="file"] {
69 width: 100%;
70}
71
72button {
73 border: 0;
74 border-radius: 10px;
75 padding: 10px 14px;
76 background: #5b8cff;
77 color: white;
78 cursor: pointer;
79}
80
81button:disabled {
82 opacity: 0.5;
83 cursor: not-allowed;
84}
85
86.stats {
87 display: grid;
88 gap: 10px;
89}
90
91.stat-row {
92 display: flex;
93 justify-content: space-between;
94 gap: 12px;
95 color: #cdd6e5;
96}
97
98.meter {
99 height: 10px;
100 width: 100%;
101 border-radius: 999px;
102 overflow: hidden;
103 background: rgba(255, 255, 255, 0.08);
104}
105
106.meter > div {
107 height: 100%;
108 width: 0%;
109 background: linear-gradient(90deg, #5b8cff, #7cf8c4);
110}
111
112.viewport {
113 position: relative;
114}
115
116canvas {
117 display: block;
118 width: 100%;
119 height: 100vh;
120}
121
122.badge {
123 display: inline-flex;
124 padding: 4px 8px;
125 border-radius: 999px;
126 background: rgba(124, 248, 196, 0.12);
127 color: #7cf8c4;
128 font-size: 0.8rem;
129}
130
131.footer {
132 margin-top: 16px;
133 color: #7f8aa3;
134 font-size: 0.9rem;
135}
136
137code {
138 font-family: ui-monospace, SFMono-Regular, monospace;
139 font-size: 0.9em;
140}
141
142@media (max-width: 900px) {
143 #app {
144 grid-template-columns: 1fr;
145 }
146
147 .panel {
148 border-right: 0;
149 border-bottom: 1px solid rgba(255, 255, 255, 0.08);
150 }
151
152 canvas {
153 height: 60vh;
154 }
155}