studio3d / src /components /Toolbar.css
Studio3D Deploy
๐Ÿš€ Initial Studio3D deployment โ€” React Three Fiber 3D Animation Studio
43024e4
.toolbar {
height: 48px;
background: #09091a;
border-bottom: 1px solid #2a2a4a;
display: flex;
align-items: center;
padding: 0 16px;
gap: 20px;
font-family: 'JetBrains Mono', monospace;
flex-shrink: 0;
}
.toolbar-brand {
display: flex;
align-items: center;
gap: 8px;
}
.brand-icon {
font-size: 20px;
color: #6666ff;
filter: drop-shadow(0 0 6px #6666ff88);
}
.brand-name {
font-size: 13px;
font-weight: 800;
color: #ddddff;
letter-spacing: 3px;
}
.brand-sub {
font-size: 9px;
color: #444466;
letter-spacing: 1px;
}
.mode-switcher {
display: flex;
gap: 4px;
background: #13132a;
padding: 4px;
border-radius: 7px;
border: 1px solid #2a2a4a;
}
.mode-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 14px;
border-radius: 5px;
border: none;
background: transparent;
color: #666688;
cursor: pointer;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
transition: all 0.2s;
}
.mode-btn:hover { color: #aaaacc; background: #1e1e3a; }
.mode-btn--active {
background: #1e1e4a;
color: #aaaaff;
box-shadow: 0 0 0 1px #5555cc44;
}
.mode-icon { font-size: 13px; }
.toolbar-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 12px;
}
.scene-info {
display: flex;
gap: 6px;
}
.info-badge {
padding: 3px 8px;
background: #13132a;
border: 1px solid #2a2a4a;
border-radius: 3px;
font-size: 9px;
color: #666688;
font-family: 'JetBrains Mono', monospace;
}
.info-badge.selected {
border-color: #5555cc;
color: #aaaaff;
}
.record-btn {
padding: 6px 14px;
border-radius: 5px;
border: 1px solid #4a2a4a;
background: #1e0e1e;
color: #cc66cc;
cursor: pointer;
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
font-weight: 700;
letter-spacing: 1px;
transition: all 0.2s;
}
.record-btn:hover { border-color: #cc44cc; color: #dd88dd; }
.record-btn.recording {
border-color: #ff4444;
background: #2a0a0a;
color: #ff6666;
animation: pulse-record 1s infinite;
}
@keyframes pulse-record {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}