quackscape/assets/css/editor.css
Kumi ae3d7ffc98
feat: improve UI visibility and interaction
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.
2024-03-28 11:15:36 +01:00

77 lines
No EOL
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;
}