Spaces:
Sleeping
Sleeping
| .left-panel { | |
| width: 220px; | |
| background: #0e0e1f; | |
| border-right: 1px solid #2a2a4a; | |
| display: flex; | |
| flex-direction: column; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 11px; | |
| overflow: hidden; | |
| } | |
| .panel-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 10px 14px; | |
| background: #16162a; | |
| border-bottom: 1px solid #2a2a4a; | |
| font-weight: 700; | |
| font-size: 10px; | |
| letter-spacing: 2px; | |
| color: #8888cc; | |
| } | |
| .panel-icon { | |
| color: #6666ff; | |
| font-size: 14px; | |
| } | |
| .drop-zone { | |
| margin: 12px; | |
| border: 1.5px dashed #3a3a6a; | |
| border-radius: 8px; | |
| padding: 16px 10px; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| background: #13132a; | |
| } | |
| .drop-zone:hover, .drop-zone--active { | |
| border-color: #6666ff; | |
| background: #1a1a3a; | |
| } | |
| .drop-zone-icon { | |
| font-size: 22px; | |
| color: #6666ff; | |
| margin-bottom: 6px; | |
| } | |
| .drop-zone-text { | |
| color: #aaaadd; | |
| font-size: 10px; | |
| font-weight: 700; | |
| letter-spacing: 1px; | |
| margin-bottom: 3px; | |
| } | |
| .drop-zone-sub { | |
| color: #555577; | |
| font-size: 9px; | |
| } | |
| .object-list-header { | |
| padding: 8px 14px 4px; | |
| font-size: 9px; | |
| letter-spacing: 2px; | |
| color: #555577; | |
| font-weight: 700; | |
| } | |
| .object-list { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 4px 8px; | |
| } | |
| .object-list::-webkit-scrollbar { width: 4px; } | |
| .object-list::-webkit-scrollbar-track { background: transparent; } | |
| .object-list::-webkit-scrollbar-thumb { background: #333366; border-radius: 2px; } | |
| .empty-list { | |
| color: #444466; | |
| text-align: center; | |
| padding: 20px 10px; | |
| font-size: 10px; | |
| } | |
| .object-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 7px; | |
| padding: 7px 8px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| color: #8888bb; | |
| transition: all 0.15s; | |
| margin-bottom: 2px; | |
| border: 1px solid transparent; | |
| } | |
| .object-item:hover { | |
| background: #1e1e3a; | |
| color: #bbbbee; | |
| } | |
| .object-item--selected { | |
| background: #1a1a4a; | |
| border-color: #5555cc; | |
| color: #ccccff; | |
| } | |
| .obj-icon { color: #6666cc; font-size: 13px; } | |
| .obj-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; } | |
| .anim-badge { | |
| background: #2a2a6a; | |
| color: #8888ff; | |
| font-size: 8px; | |
| padding: 2px 4px; | |
| border-radius: 3px; | |
| font-weight: 700; | |
| } | |
| .obj-delete { | |
| background: none; | |
| border: none; | |
| color: #444466; | |
| cursor: pointer; | |
| font-size: 10px; | |
| padding: 2px 4px; | |
| border-radius: 3px; | |
| transition: all 0.15s; | |
| } | |
| .obj-delete:hover { | |
| background: #4a1a1a; | |
| color: #ff6666; | |
| } | |