refactor: split monolithic App.css into feature-based co-located CSS files
This commit is contained in:
Xiaohan-Tian
@@ -0,0 +1,265 @@
|
||||
/* For the piano roll (to be implemented later) */
|
||||
.piano-roll {
|
||||
background-color: #7b68ee;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Piano Roll Panel */
|
||||
.piano-roll-panel {
|
||||
position: fixed;
|
||||
background-color: #2d2d2d;
|
||||
border: 1px solid #3a3a3a;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Piano notes */
|
||||
.piano-note {
|
||||
position: absolute;
|
||||
background-color: #ff5555; /* Red color */
|
||||
border: 1px solid #999;
|
||||
border-radius: 2px;
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.piano-note:hover {
|
||||
filter: brightness(1.1);
|
||||
box-shadow: 0 0 5px rgba(255, 85, 85, 0.5);
|
||||
}
|
||||
|
||||
.piano-note.dragging {
|
||||
opacity: 0.8;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||||
z-index: 100;
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.piano-note.resizing {
|
||||
opacity: 0.8;
|
||||
box-shadow: 0 0 10px rgba(255, 85, 85, 0.7);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.piano-note.selected {
|
||||
border: 2px solid white;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.piano-roll-header {
|
||||
height: 30px;
|
||||
background-color: #1e1e1e;
|
||||
border-bottom: 1px solid #3a3a3a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
cursor: move;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Piano roll toolbar */
|
||||
.piano-roll-toolbar {
|
||||
height: 30px;
|
||||
background-color: #252525;
|
||||
border-bottom: 1px solid #3a3a3a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
z-index: 100; /* Ensure toolbar and its dropdowns appear above piano roll content */
|
||||
}
|
||||
|
||||
/* Override pointer-events for piano roll toolbar sections */
|
||||
.piano-roll-toolbar .toolbar-left,
|
||||
.piano-roll-toolbar .toolbar-right {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.piano-roll-toolbar .quant-button {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.piano-roll-toolbar .toolbar-left .quant-button {
|
||||
margin-left: 0px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.piano-roll-toolbar .toolbar-left .quant-dropdown {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.piano-roll-title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #e0e0e0;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #e0e0e0;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.close-button:hover {
|
||||
color: #ff4444;
|
||||
}
|
||||
|
||||
.piano-roll-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.piano-grid-header {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--max-number-of-bars), var(--region-grid-bar-width));
|
||||
width: calc(var(--max-number-of-bars) * var(--region-grid-bar-width) + var(--region-piano-key-width) - 1px);
|
||||
min-width: 100%;
|
||||
height: 20px;
|
||||
border-bottom: 1px solid #3a3a3a;
|
||||
background-color: #1e1e1e;
|
||||
padding-left: calc(var(--region-piano-key-width) - 1px);
|
||||
box-sizing: border-box;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
cursor: pointer; /* Show pointer cursor on hover to indicate interactivity */
|
||||
}
|
||||
|
||||
.piano-grid-header:hover {
|
||||
cursor: url("data:image/svg+xml,%3csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4 6h8l-4 4-4-4z' fill='%23e0e0e0'/%3e%3c/svg%3e") 8 8, pointer;
|
||||
}
|
||||
|
||||
.piano-bar-number {
|
||||
border-left: 1px solid #3a3a3a;
|
||||
padding-left: 10px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.piano-roll-body {
|
||||
display: flex;
|
||||
min-height: calc(8 * 12 * var(--region-piano-key-height)); /* 8 octaves * 12 notes * piano key height */
|
||||
width: calc(var(--max-number-of-bars) * var(--region-grid-bar-width) + var(--region-piano-key-width)); /* 32 bars * 160px width + piano keys width */
|
||||
}
|
||||
|
||||
.piano-keys-container {
|
||||
width: var(--region-piano-key-width);
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
border-right: 1px solid #3a3a3a;
|
||||
background-color: #252525;
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.piano-grid-container {
|
||||
flex: 1;
|
||||
min-width: calc(var(--max-number-of-bars) * var(--region-grid-bar-width));
|
||||
min-height: calc(8 * 12 * var(--region-piano-key-height));
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.piano-octave {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.piano-key {
|
||||
width: var(--region-piano-key-width);
|
||||
height: var(--region-piano-key-height);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #3a3a3a;
|
||||
}
|
||||
|
||||
.piano-key.natural {
|
||||
background-color: #e0e0e0;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.piano-key.sharp {
|
||||
background-color: #222;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.key-label {
|
||||
font-size: 10px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.piano-grid {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background-size: var(--region-grid-beat-width) var(--region-piano-key-height), 100% 100%;
|
||||
/* background-image is now set dynamically via React inline styles in PianoGrid component */
|
||||
}
|
||||
|
||||
.piano-grid.pencil-cursor {
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
/* Piano Grid Cursor Highlights */
|
||||
.piano-grid-pitch-highlight {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(123, 104, 238, 0.15);
|
||||
border-top: 1px solid rgba(123, 104, 238, 0.3);
|
||||
border-bottom: 1px solid rgba(123, 104, 238, 0.3);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
transition: opacity 0.1s ease;
|
||||
}
|
||||
|
||||
.piano-grid-beat-highlight {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(123, 104, 238, 0.1);
|
||||
border-left: 1px solid rgba(123, 104, 238, 0.25);
|
||||
border-right: 1px solid rgba(123, 104, 238, 0.25);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
transition: opacity 0.1s ease;
|
||||
}
|
||||
|
||||
.piano-grid-chord-highlight {
|
||||
position: absolute;
|
||||
background-color: rgba(255, 77, 77, 0.25);
|
||||
border: 1px solid rgba(255, 77, 77, 0.8);
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
transition: opacity 0.1s ease;
|
||||
}
|
||||
|
||||
.resize-handle {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: nwse-resize;
|
||||
color: #999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 100;
|
||||
}
|
||||
Reference in New Issue
Block a user