Kumi
ae3d7ffc98
Enhanced UI element visibility and interaction across the editor and scene components. By switching to classList manipulation for showing and hiding UI elements, the approach aligns better with modern best practices, ensuring smooth transitions and consistency in user experience. The addition of `!important` in the CSS for the `.hide` class guarantees the override of conflicting styles, addressing potential visibility issues. Adjustments in HTML formatting enhance readability and maintainability without altering functionality. This change, while seemingly minor, significantly improves the user's ability to intuitively navigate and interact with the UI, potentially reducing frustration and increasing overall user satisfaction.
77 lines
1.1 KiB
CSS
77 lines
1.1 KiB
CSS
body {
|
|
background-color: #2d2d30;
|
|
color: #ccc;
|
|
font-family: "Courier New", monospace;
|
|
}
|
|
|
|
.scene-container {
|
|
height: 100vh;
|
|
background-color: #252526;
|
|
border: 5px solid #3c3c3c;
|
|
}
|
|
|
|
.sidebar {
|
|
background-color: #1e1e1e;
|
|
color: #9cdcfe;
|
|
padding: 20px;
|
|
border-left: 1px solid #3c3c3c;
|
|
height: 100vh; /* Full height */
|
|
overflow-y: auto; /* Enable vertical scrolling if necessary */
|
|
}
|
|
|
|
.sidebar h3 {
|
|
color: #dcdcaa;
|
|
}
|
|
|
|
.form-control {
|
|
background-color: #333333;
|
|
color: #9cdcfe;
|
|
border: 1px solid #3c3c3c;
|
|
}
|
|
|
|
.form-label {
|
|
color: #dcdcaa;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: #007acc;
|
|
border-color: #007acc;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background-color: #3c3c3c;
|
|
border-color: #3c3c3c;
|
|
}
|
|
|
|
.dropdown-item {
|
|
display: flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.dropdown-item img {
|
|
width: 128px;
|
|
height: 64px;
|
|
margin-right: 10px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.dropdown-item-text {
|
|
display: block;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
max-width: 100%;
|
|
}
|
|
|
|
#resetButton {
|
|
display: inline;
|
|
}
|
|
|
|
#buttons {
|
|
display: block;
|
|
} |