* {
box-sizing: border-box;
}
html,
body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
font-family:
Arial,
Helvetica,
sans-serif;
background:
#15101c;
color:
#ffffff;
}
body {
display: flex;
flex-direction: column;
}
/* HEADER */
header {
height: 82px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 18px;
background:
linear-gradient(
90deg,
#21152d,
#342044
);
border-bottom:
2px solid #704b8e;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
}
.brand img {
width: 62px;
height: 62px;
object-fit: cover;
border-radius: 12px;
border:
2px solid #c987ff;
box-shadow:
0 0 15px
rgba(201,135,255,0.35);
}
.brand h1 {
margin: 0;
color:
#e8b5ff;
letter-spacing:
5px;
font-size:
25px;
}
.brand p {
margin:
3px 0 0;
color:
#d1bddc;
font-size:
12px;
}
.topButtons {
display: flex;
gap: 8px;
}
button {
border: none;
border-radius: 7px;
padding:
10px 14px;
background:
#63417c;
color:
white;
font-weight:
bold;
cursor:
pointer;
}
button:hover {
background:
#8656a7;
}
#exportButton {
background:
#9b5c2f;
}
#exportButton:hover {
background:
#c5793d;
}
/* MAIN */
main {
flex: 1;
min-height: 0;
display: grid;
grid-template-columns:
190px
minmax(300px, 1fr)
250px;
}
/* PANELS */
.leftPanel,
.rightPanel {
overflow-y: auto;
padding: 14px;
background:
#211827;
}
.leftPanel {
border-right:
1px solid #493552;
}
.rightPanel {
border-left:
1px solid #493552;
}
section {
margin-bottom:
24px;
}
h2 {
font-size:
12px;
letter-spacing:
2px;
color:
#d5a9ee;
margin:
0 0 10px;
}
h3 {
font-size:
10px;
letter-spacing:
1px;
color:
#a98bb9;
margin:
17px 0 7px;
}
/* ADD BUTTONS */
.addButton {
display: block;
width: 100%;
margin-bottom: 7px;
text-align: left;
background:
#342541;
}
.addButton:hover {
background:
#704b8e;
}
/* OBJECT LIST */
.objectItem {
padding:
9px;
margin-bottom:
5px;
border-radius:
6px;
background:
#302139;
cursor:
pointer;
font-size:
13px;
}
.objectItem:hover {
background:
#493052;
}
.objectItem.selected {
background:
#704b8e;
outline:
1px solid #c987ff;
}
.empty {
color:
#76677c;
font-size:
12px;
}
/* VIEWPORT */
.viewport {
position:
relative;
min-width:
0;
background:
#080b12;
}
#glCanvas {
width:
100%;
height:
100%;
display:
block;
}
.viewportTitle {
position:
absolute;
top:
12px;
left:
15px;
color:
rgba(255,255,255,0.55);
font-size:
11px;
letter-spacing:
2px;
}
.help {
position:
absolute;
bottom:
12px;
left:
50%;
transform:
translateX(-50%);
padding:
7px 12px;
border-radius:
20px;
background:
rgba(20,15,28,0.8);
color:
#bcaec2;
font-size:
11px;
}
/* FORMS */
label {
display:
block;
color:
#b9a9c0;
font-size:
11px;
}
input {
width:
100%;
margin-top:
4px;
padding:
7px;
border:
1px solid #55405e;
border-radius:
5px;
background:
#130e18;
color:
white;
}
input:focus {
outline:
1px solid #a96dcb;
}
.three {
display:
grid;
grid-template-columns:
1fr 1fr 1fr;
gap:
5px;
}
.three label {
min-width:
0;
}
input[type="color"] {
height:
40px;
padding:
2px;
cursor:
pointer;
}
/* OBJECT BUTTONS */
.objectButtons {
display:
flex;
gap:
6px;
margin-top:
18px;
}
.objectButtons button {
flex:
1;
padding:
8px 4px;
font-size:
10px;
}
button.danger {
background:
#71343d;
}
button.danger:hover {
background:
#a94450;
}
.tip {
color:
#86778d;
font-size:
11px;
line-height:
1.5;
}
@media(max-width:800px) {
main {
grid-template-columns:
140px
1fr
190px;
}
.brand p {
display:
none;
}
.topButtons button {
padding:
8px;
font-size:
9px;
}
}
.transformRow {
display: flex;
flex-direction: column;
gap: 10px;
}
.transformRow label {
display: block;
}
.transformRow input[type="range"] {
width: 100%;
margin-top: 5px;
accent-color:
#b56ee0;
}
.transformRow input[type="number"] {
margin-top: 4px;
}
.checkRow {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.checkRow input {
width: auto;
}