Bit of cleanup

2026-04-13 20:03:02 -05:00
parent 5a651d2d1f
commit a30b151e4d
30 changed files with 235 additions and 204 deletions
@@ -1,4 +1,4 @@
-/* Component – Buttons */
+/* Component – Button */

 .btn {
  display: block;
@@ -0,0 +1,13 @@
+/* Component – Control row */
+
+.control-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+}
+
+.control-row label {
+  color: var(--text-muted);
+  min-width: 44px;
+}
@@ -0,0 +1,13 @@
+/* Component – Empty state */
+
+.empty-state {
+  border-style: dashed;
+  padding: 3rem;
+  text-align: center;
+  color: var(--text-muted);
+}
+
+.empty-state p {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+}
@@ -1,43 +0,0 @@
-/* Component – File info and load area */
-
-.file-name {
-  font-size: 0.775rem;
-  color: var(--text-muted);
-  word-break: break-all;
-  line-height: 1.4;
-}
-
-.info-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.8rem;
-}
-
-.info-table td {
-  padding: 0.15rem 0;
-  vertical-align: top;
-}
-
-.info-table td:first-child {
-  color: var(--text-muted);
-  width: 50px;
-  font-size: 0.75rem;
-  padding-right: 0.75rem;
-}
-
-.load-area {
-  border: 1px dashed var(--border);
-  border-radius: var(--radius);
-  padding: 0.6rem;
-  text-align: center;
-  cursor: pointer;
-  font-size: 0.825rem;
-  color: var(--text-muted);
-  transition: border-color var(--speed), color var(--speed);
-  line-height: 1.5;
-}
-
-.load-area:hover,
-.load-area.drag-over {
-  color: var(--text);
-}
@@ -0,0 +1,8 @@
+/* Component – File name */
+
+.file-name {
+  font-size: 0.775rem;
+  color: var(--text-muted);
+  word-break: break-all;
+  line-height: 1.4;
+}
@@ -0,0 +1,19 @@
+/* Component – Info table */
+
+.info-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.8rem;
+}
+
+.info-table td {
+  padding: 0.15rem 0;
+  vertical-align: top;
+}
+
+.info-table td:first-child {
+  color: var(--text-muted);
+  width: 50px;
+  font-size: 0.75rem;
+  padding-right: 0.75rem;
+}
@@ -0,0 +1,18 @@
+/* Component – Load area */
+
+.load-area {
+  border: 1px dashed var(--border);
+  border-radius: var(--radius);
+  padding: 0.6rem;
+  text-align: center;
+  cursor: pointer;
+  font-size: 0.825rem;
+  color: var(--text-muted);
+  transition: border-color var(--speed), color var(--speed);
+  line-height: 1.5;
+}
+
+.load-area:hover,
+.load-area.drag-over {
+  color: var(--text);
+}
@@ -1,36 +1,4 @@
-/* Component – Tool panel (sidebar) */
-
-.tool-panel {
-  width: 210px;
-  flex-shrink: 0;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.panel-section {
-  padding: 0.875rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  border-bottom: 1px solid var(--border);
-}
-
-.panel-section:last-child {
-  border-bottom: none;
-}
-
-.control-row {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.875rem;
-}
-
-.control-row label {
-  color: var(--text-muted);
-  min-width: 44px;
-}
+/* Component – Panel form inputs */

 .tool-panel select {
  width: 100%;
@@ -0,0 +1,13 @@
+/* Component – Panel section */
+
+.panel-section {
+  padding: 0.875rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.panel-section:last-child {
+  border-bottom: none;
+}
@@ -0,0 +1,14 @@
+/* Component – Preview empty state */
+
+.preview-empty {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--text-muted);
+  font-size: 0.875rem;
+  text-align: center;
+  white-space: nowrap;
+  user-select: none;
+  pointer-events: none;
+}
@@ -0,0 +1,16 @@
+/* Component – Preview scroll */
+
+.preview-scroll {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+}
+
+.preview-scroll canvas {
+  image-rendering: pixelated;
+  image-rendering: crisp-edges;
+  display: block;
+  max-width: none;
+}
@@ -1,36 +0,0 @@
-/* Component – Preview area */
-
-.tool-preview {
-  flex: 1;
-  position: relative;
-  min-height: 300px;
-  transition: border-color var(--speed);
-}
-
-.preview-scroll {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1.5rem;
-}
-
-.preview-scroll canvas {
-  image-rendering: pixelated;
-  image-rendering: crisp-edges;
-  display: block;
-  max-width: none;
-}
-
-.preview-empty {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  color: var(--text-muted);
-  font-size: 0.875rem;
-  text-align: center;
-  white-space: nowrap;
-  user-select: none;
-  pointer-events: none;
-}
@@ -1,4 +1,4 @@
-/* Component – Tool cards and empty state */
+/* Component – Tool card */

 .tool-card {
  padding: 1.25rem;
@@ -24,15 +24,3 @@
  font-size: 0.85rem;
  line-height: 1.5;
 }
-
-.empty-state {
-  border-style: dashed;
-  padding: 3rem;
-  text-align: center;
-  color: var(--text-muted);
-}
-
-.empty-state p {
-  margin-top: 0.5rem;
-  font-size: 0.875rem;
-}
@@ -0,0 +1,9 @@
+/* Component – Tool panel */
+
+.tool-panel {
+  width: 210px;
+  flex-shrink: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
@@ -0,0 +1,8 @@
+/* Component – Tool preview */
+
+.tool-preview {
+  flex: 1;
+  position: relative;
+  min-height: 300px;
+  transition: border-color var(--speed);
+}
@@ -1,8 +1,4 @@
-/* Component – Warnings panel */
-
-.warnings-section {
-  border-color: #6b4a00;
-}
+/* Component – Warning list */

 .warning-list {
  list-style: none;
@@ -0,0 +1,5 @@
+/* Component – Warnings section */
+
+.warnings-section {
+  border-color: #6b4a00;
+}