2 display: flex;
3 height: 100%;
4}
6.sidebar {
7 width: 340px;
8 flex-shrink: 0;
9 overflow-y: auto;
10 padding: 20px;
11 background: #1e2128;
12 border-right: 1px solid #2c313a;
13}
15.sidebar h1 {
16 margin: 0 0 4px;
17 font-size: 20px;
18 color: #fff;
19}
21.tagline {
edd4e73Mesh converter: upload, view, and export meshes across formatsJeremy Magland 23 color: #9aa1ac;
24 font-size: 13px;
25}
28 color: #7fb0e0;
29}
31.engine-status {
32 margin: 0 0 16px;
33 font-size: 12px;
34}
36.engine-status.loading {
37 color: #ecc477;
38}
40.engine-status.ready {
41 color: #8fd7ab;
42}
44.engine-status.error {
45 color: #f2a3a3;
46}
edd4e73Mesh converter: upload, view, and export meshes across formatsJeremy Magland 48.sidebar section {
49 margin-bottom: 22px;
50}
52.sidebar h2 {
53 font-size: 12px;
54 text-transform: uppercase;
55 letter-spacing: 0.08em;
56 color: #7f8794;
57 margin: 0 0 8px;
58}
60.button-row {
61 display: flex;
62 gap: 8px;
63}
65button {
66 font: inherit;
67 padding: 7px 12px;
68 border-radius: 6px;
69 border: 1px solid #3a4150;
70 background: #2a2f39;
71 color: #e2e5ea;
72 cursor: pointer;
73}
75button:hover {
76 background: #333947;
77}
79button.primary {
80 margin-top: 10px;
81 width: 100%;
82 background: #2f6fb3;
83 border-color: #2f6fb3;
84 color: #fff;
85 font-weight: 600;
86}
88button.primary:hover {
89 background: #3a80c9;
90}
92select {
93 font: inherit;
94 width: 100%;
95 padding: 7px 8px;
96 border-radius: 6px;
97 border: 1px solid #3a4150;
98 background: #2a2f39;
99 color: #e2e5ea;
100}
102.error {
103 margin-top: 10px;
104 padding: 8px 10px;
105 border-radius: 6px;
106 background: rgba(220, 70, 70, 0.12);
107 border: 1px solid rgba(220, 70, 70, 0.45);
108 color: #f2a3a3;
109 font-size: 13px;
110}
112.warning {
113 margin-top: 10px;
114 padding: 8px 10px;
115 border-radius: 6px;
116 background: rgba(230, 170, 50, 0.1);
117 border: 1px solid rgba(230, 170, 50, 0.45);
118 color: #ecc477;
119 font-size: 13px;
120}
122.ok {
123 margin-top: 10px;
124 padding: 8px 10px;
125 border-radius: 6px;
126 background: rgba(80, 190, 120, 0.1);
127 border: 1px solid rgba(80, 190, 120, 0.4);
128 color: #8fd7ab;
129 font-size: 13px;
130}
132.mesh-info .source {
133 color: #7f8794;
134 font-size: 12px;
135 margin-bottom: 4px;
136 overflow-wrap: anywhere;
137}
139.chips {
140 display: flex;
141 flex-wrap: wrap;
142 gap: 6px;
143 margin-top: 8px;
144}
146.chip {
147 padding: 2px 8px;
148 border-radius: 999px;
149 font-size: 12px;
150 border: 1px solid #3a4150;
151 color: #6b7280;
152 text-decoration: line-through;
153}
155.chip.on {
156 color: #a8d5b8;
157 border-color: rgba(80, 190, 120, 0.5);
158 text-decoration: none;
159}
161.format-blurb {
162 margin: 8px 0 0;
163 color: #9aa1ac;
164 font-size: 13px;
165}
167.format-table {
168 width: 100%;
169 border-collapse: collapse;
170 font-size: 13px;
171}
173.format-table th,
174.format-table td {
175 text-align: left;
176 padding: 4px 6px;
177 border-bottom: 1px solid #2c313a;
178}
180.format-table th {
181 color: #7f8794;
182 font-weight: 500;
183}
186 cursor: pointer;
187}
189.format-table tbody tr:hover {
190 background: #262b34;
191}
193.format-table tbody tr.selected {
194 background: rgba(47, 111, 179, 0.18);
195}
197.format-table tbody tr.selected td:first-child {
198 color: #9cc4ea;
199}
edd4e73Mesh converter: upload, view, and export meshes across formatsJeremy Magland 201.format-table th:not(:first-child),
202.format-table td:not(:first-child) {
203 text-align: center;
204}
206.ext {
207 color: #7f8794;
208 font-size: 12px;
209}
212 color: #9aa1ac;
213 white-space: nowrap;
214}
216button.subtle {
217 margin-top: 8px;
218 padding: 3px 8px;
219 font-size: 12px;
220 color: #9aa1ac;
221 background: transparent;
222 border-color: #2c313a;
223}
225button.subtle:hover {
226 background: #2a2f39;
227}
229button.subtle:disabled {
230 opacity: 0.5;
231 cursor: default;
232}
235 font: inherit;
236 font-size: 12px;
237 display: block;
238 width: 100%;
239 box-sizing: border-box;
240 margin-top: 8px;
241 padding: 5px 8px;
242 border-radius: 6px;
243 border: 1px solid #3a4150;
244 background: #2a2f39;
245 color: #e2e5ea;
246}
249 margin: 8px 0 0;
250 color: #6b7280;
251 font-size: 12px;
252}
254.viewport {
255 flex: 1;
256 min-width: 0;
257 position: relative;
258}
261 position: absolute;
262 top: 12px;
263 right: 12px;
264 z-index: 1;
265 display: flex;
266 gap: 0;
267 border: 1px solid #3a4150;
268 border-radius: 6px;
269 overflow: hidden;
270 background: rgba(30, 33, 40, 0.85);
271}
273.view-toolbar button {
274 border: none;
275 border-radius: 0;
276 background: transparent;
277 padding: 5px 10px;
278 font-size: 12px;
279 color: #9aa1ac;
280}
282.view-toolbar button + button {
283 border-left: 1px solid #3a4150;
284}
c26fd7dAnaglyph stereo view mode for red/cyan 3D glassesJeremy Magland 286/* separates the anaglyph toggle from the mutually-exclusive mode group */
287.view-toolbar button.sep {
288 border-left: 3px double #3a4150;
289}
50876cdConvert real mesh formats with meshio via PyodideJeremy Magland 291.view-toolbar button:hover {
292 background: #2a2f39;
293 color: #e2e5ea;
294}
296.view-toolbar button.active {
297 background: rgba(47, 111, 179, 0.35);
298 color: #d9e8f7;
299}
edd4e73Mesh converter: upload, view, and export meshes across formatsJeremy Magland 301.empty-state {
302 height: 100%;
303 display: flex;
304 flex-direction: column;
305 align-items: center;
306 justify-content: center;
307 color: #6b7280;
308}
310.empty-state p {
311 margin: 4px 0;
312}