Skip to content

Commit 5c4f923

Browse files
xcontcomxcontcom
authored
Add files via upload
1 parent 07ea309 commit 5c4f923

File tree

1 file changed

+247
-0
lines changed

1 file changed

+247
-0
lines changed

‎3d/torus-iso/style.css‎

Lines changed: 247 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,247 @@
1+
:root {
2+
--bg:#000;
3+
--panel:#0a0a0a;
4+
--cyan:#5ff;
5+
--magenta:#f5f;
6+
--white:#fff;
7+
--dim:#777;
8+
}
9+
10+
/* ===============================
11+
Global page
12+
=============================== */
13+
14+
body {
15+
background: var(--bg);
16+
color: var(--white);
17+
font-family: monospace;
18+
padding: 20px;
19+
20+
max-width: 1200px;
21+
margin: 0 auto;
22+
}
23+
24+
/* ===============================
25+
Panels (base)
26+
=============================== */
27+
28+
.panel {
29+
border: 1px solid var(--cyan);
30+
background: var(--panel);
31+
padding: 14px 16px;
32+
margin-bottom: 16px;
33+
display: block;
34+
}
35+
36+
.panel-cyan { border-color: var(--cyan); }
37+
.panel-magenta { border-color: var(--magenta); }
38+
39+
.panel-title {
40+
color: var(--cyan);
41+
font-weight: bold;
42+
margin-bottom: 10px;
43+
}
44+
45+
/* ===============================
46+
Top layout (A)
47+
=============================== */
48+
49+
.top-layout {
50+
display: grid;
51+
grid-template-columns: auto 1fr;
52+
gap: 24px;
53+
align-items: start;
54+
margin-bottom: 24px;
55+
}
56+
57+
/* ===============================
58+
Left controls (B)
59+
=============================== */
60+
61+
.left-controls {
62+
display: flex;
63+
flex-direction: column;
64+
gap: 16px;
65+
66+
/* squeeze to content */
67+
width: max-content;
68+
}
69+
70+
/* ===============================
71+
Right controls (C)
72+
=============================== */
73+
74+
.right-controls {
75+
width: 100%;
76+
}
77+
78+
/* ===============================
79+
Inputs
80+
=============================== */
81+
82+
label {
83+
display: block;
84+
margin-bottom: 8px;
85+
}
86+
87+
input,
88+
select,
89+
button {
90+
background: #000;
91+
color: var(--white);
92+
border: 1px solid var(--cyan);
93+
font-family: monospace;
94+
padding: 4px 6px;
95+
}
96+
97+
button {
98+
cursor: pointer;
99+
}
100+
101+
button:hover {
102+
border-color: var(--magenta);
103+
color: var(--magenta);
104+
}
105+
106+
/* ===============================
107+
Kernel sliders
108+
=============================== */
109+
110+
.kernel-panel {
111+
width: 100%;
112+
box-sizing: border-box;
113+
}
114+
115+
.kslider {
116+
margin-bottom: 10px;
117+
}
118+
119+
.kslider-title {
120+
color: var(--cyan);
121+
font-size: 12px;
122+
margin-bottom: 2px;
123+
}
124+
125+
.kslider input[type="range"] {
126+
width: 100%;
127+
height: 16px;
128+
border: 0;
129+
padding: 0;
130+
margin: 0;
131+
}
132+
133+
/* ===============================
134+
3-face viewer
135+
=============================== */
136+
137+
.faces {
138+
display: flex;
139+
gap: 16px;
140+
overflow-x: auto;
141+
padding-bottom: 8px;
142+
}
143+
144+
.faces > div {
145+
flex: 0 0 auto;
146+
text-align: center;
147+
}
148+
149+
.face-title {
150+
color: var(--dim);
151+
font-size: 12px;
152+
margin-bottom: 6px;
153+
}
154+
155+
canvas {
156+
display: block;
157+
border: 1px solid var(--cyan);
158+
background: #000;
159+
}
160+
161+
/* ===============================
162+
Toroidal translation
163+
=============================== */
164+
165+
.torus-panel {
166+
margin-top: 24px;
167+
}
168+
169+
/* tighter vertical spacing for torus sliders */
170+
171+
.torus-panel .kslider {
172+
margin-bottom: 6px;
173+
}
174+
175+
.torus-panel .kslider-title {
176+
display: flex;
177+
justify-content: space-between;
178+
font-size: 12px;
179+
}
180+
181+
/* ===============================
182+
Misc
183+
=============================== */
184+
185+
.pad-switch {
186+
display: flex;
187+
gap: 12px;
188+
font-size: 12px;
189+
}
190+
191+
.pad-switch input {
192+
margin-right: 4px;
193+
}
194+
195+
.hint {
196+
color: var(--dim);
197+
font-size: 12px;
198+
margin-top: 6px;
199+
}
200+
201+
#kernelDump {
202+
margin-top: 14px;
203+
color: var(--dim);
204+
font-family: monospace;
205+
}
206+
207+
a {
208+
color: var(--cyan);
209+
}
210+
211+
/* ===============================
212+
Slider header: title + hint
213+
=============================== */
214+
215+
.kslider-header {
216+
display: flex;
217+
justify-content: space-between;
218+
align-items: baseline;
219+
margin-bottom: 2px;
220+
}
221+
222+
.kslider-hint {
223+
color: var(--dim);
224+
font-size: 12px;
225+
white-space: nowrap;
226+
}
227+
228+
#isoCanvas {
229+
display: block;
230+
margin: 0 auto;
231+
border: 1px solid var(--cyan);
232+
background: #000;
233+
}
234+
235+
.sync-toggle {
236+
display: inline-flex;
237+
align-items: center;
238+
gap: 6px;
239+
font-size: 11px;
240+
color: var(--dim);
241+
margin-bottom: 6px;
242+
user-select: none;
243+
}
244+
245+
.sync-toggle input {
246+
margin: 0;
247+
}

0 commit comments

Comments
 (0)