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,110 @@
+/* Track Region Styles */
+.track-region {
+  position: absolute;
+  background-color: #4a6b8a;
+  border: 2px solid #5a7b9a;
+  border-radius: 3px;
+  height: calc(100%);
+  margin: 0px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+  user-select: none;
+  transition: box-shadow 0.1s ease;
+  will-change: transform;
+}
+
+.track-region:hover {
+  box-shadow: 0 0 0 1px #7a9bba;
+}
+
+.track-region.selected {
+  /* box-shadow: 0 0 0 2px #ffffff, 0 0 8px rgba(255, 255, 255, 0.3); */ /* let's only apply a border */
+  border-color: #ffffff;
+}
+
+.track-region.dragging {
+  opacity: 0.8;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  z-index: 100;
+  pointer-events: none;
+  transform-origin: center center;
+  animation: pulse 1.5s infinite;
+  cursor: grabbing;
+  transition: none; /* Remove transition during drag for immediate response */
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(122, 155, 186, 0.7);
+  }
+  70% {
+    box-shadow: 0 0 0 5px rgba(122, 155, 186, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(122, 155, 186, 0);
+  }
+}
+
+.region-header {
+  background-color: #5a7b9a;
+  color: #fff;
+  padding: 2px 6px;
+  font-size: 11px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: move;
+  height: 18px;
+  user-select: none;
+}
+
+.track-region:hover .region-header {
+  background-color: #6a8baa;
+}
+
+.region-content {
+  height: calc(100% - 18px);
+  background-color: #87CEFA; /* Light blue */
+  width: 100%;
+  position: relative; /* Allow overlayed controls */
+}
+
+/* Region pencil trigger inside content */
+.region-pencil-btn {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  background: rgba(0, 0, 0, 0.25);
+  color: #fff;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 3px;
+  padding: 2px;
+  margin: 0;
+  cursor: pointer;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.region-pencil-btn:hover {
+  background: rgba(0, 0, 0, 0.35);
+}
+
+/* Instrument dropdown specific styles */
+.instrument-dropdown .quant-dropdown {
+  min-width: 80px;
+  width: auto;
+  right: auto;
+  left: 0;
+}
+
+/* Settings dropdown specific styles */
+.settings-dropdown .quant-dropdown {
+  min-width: 100px;
+  width: auto;
+  right: auto;
+  left: 0;
+}