refactor: split monolithic App.css into feature-based co-located CSS files

2026-04-09 17:31:49 -07:00
parent 58cb4cebef
commit 17610f12f3
28 changed files with 2035 additions and 2029 deletions
@@ -0,0 +1,125 @@
+/* Shared toolbar layout classes (used by Toolbar and PianoRollToolbar) */
+
+.toolbar-left, .toolbar-right {
+  display: flex;
+  align-items: center;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.toolbar-left {
+  width: 20%;
+  justify-content: flex-start;
+}
+
+.toolbar-right {
+  width: 33%;
+  justify-content: flex-end;
+  z-index: 1500;
+}
+
+.toolbar-center {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1005;
+  margin-left: -50px;
+}
+
+/* Tool buttons (used by Toolbar and PianoRollToolbar) */
+
+.tool-button {
+  width: 30px;
+  height: 30px;
+  background-color: transparent;
+  border: none;
+  border-radius: 3px;
+  color: #999;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  margin: 0 2px;
+}
+
+.tool-button:hover {
+  background-color: #3a3a3a;
+  color: #e0e0e0;
+}
+
+.tool-button.active {
+  background-color: #4a4a4a;
+  color: #e0e0e0;
+}
+
+/* Quantization dropdown system (used by KGDropdown) */
+
+.quant-button {
+  background-color: #333;
+  border: 1px solid #444;
+  border-radius: 3px;
+  color: #e0e0e0;
+  font-size: 12px;
+  padding: 3px 8px;
+  margin-left: 5px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.quant-button:hover {
+  background-color: #444;
+}
+
+.quant-dropdown-container {
+  position: relative;
+  display: inline-block;
+  z-index: 1500;
+}
+
+.quant-dropdown {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  background-color: #2d2d2d;
+  border: 1px solid #444;
+  border-radius: 3px;
+  width: 100px;
+  z-index: 1500;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  margin-top: 2px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.quant-option {
+  padding: 6px 10px;
+  font-size: 12px;
+  color: #e0e0e0;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.quant-option:hover {
+  background-color: #444;
+}
+
+.quant-option.active {
+  background-color: #4a6b8a;
+}
+
+/* Generic button blink effect */
+.quant-button.button-blink {
+  animation: buttonBlink 0.2s ease-in-out;
+}
+
+@keyframes buttonBlink {
+  0% { background-color: #333; }
+  50% { background-color: #555; }
+  100% { background-color: #333; }
+}
@@ -0,0 +1,11 @@
+:root {
+  --time-signature-numerator: 4;
+  --max-number-of-bars: 32;
+  --track-grid-bar-width: 40px;
+  --region-piano-key-width: 60px;
+  --region-piano-key-height: 20px;
+  --region-grid-beat-width: 40px;
+  --region-grid-bar-width: calc(var(--region-grid-beat-width) * var(--time-signature-numerator));
+  --chat-box-width: 350px;
+  --instrument-selection-width: 300px;
+}