Initial commit

2026-03-02 14:04:23 +01:00 · 2026-03-02 14:04:23 +01:00 · 9e6e6666ab
commit 9e6e6666ab
31 changed files with 3799 additions and 0 deletions
--- a/src/styles/app.css
+++ b/src/styles/app.css
@ -0,0 +1,129 @@
+
+main {
+  margin-top: 15px;
+}
+
+.app-layout {
+  display: grid;
+  /* Columns: Brushes | Canvas (800px) | Observables */
+  grid-template-columns: 100px 800px 400px;
+  /* Rows: Controls | Main content */
+  grid-template-rows: min-content min-content;
+
+  gap: 5px;
+  background-color: var(--bg-app);
+  min-height: 100vh;
+
+  justify-content: center;
+  align-content: start;
+}
+
+.controls {
+  grid-column: 2; /* Center column */
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  color: var(--text-main);
+  padding-bottom: 10px;
+}
+
+.canvas-container {
+  grid-column: 2;
+  height: 600px; /* Force the canvas height here */
+}
+
+.canvas-container canvas {
+  background: #000;
+  cursor: crosshair;
+  border-radius: 4px;
+  border: 1px solid var(--border-subtle);
+
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-user-drag: none;
+  touch-action: none;
+}
+
+.brushes-panel {
+  grid-column: 1;
+  grid-row: 2; /* Sits next to the canvas */
+  align-self: start;
+}
+
+.side-panel {
+  grid-column: 3;
+  grid-row: 2; /* Sits next to the canvas */
+  align-self: start;
+}
+
+/* --- Buttons --- */
+.btn {
+  background: var(--bg-panel);
+  color: var(--text-main);
+  border: 1px solid var(--border-subtle);
+  padding: 6px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 13px;
+}
+
+/* --- Checkboxes & Labels --- */
+.toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  cursor: pointer;
+  user-select: none;
+  color: var(--text-dim);
+}
+
+.toggle input[type="checkbox"] {
+  cursor: pointer;
+  accent-color: var(--accent-sub-label); /* Modern browsers will use your blue for the check */
+}
+
+
+/* --- Top Stats --- */
+.top-stats {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 13px;
+  color: var(--text-dim);
+  font-variant-numeric: tabular-nums;
+  display: inline-block;
+  min-width: 50px;
+}
+
+
+
+.top-nav {
+  display: flex;
+  align-items: center;
+  background-color: var(--bg-toolbar);
+  border-bottom: 1px solid var(--border-subtle);
+  padding: 0 10px;
+  font-size: 12px;
+  color: var(--text-toolbar);
+}
+
+/* Simple Select Styling */
+.system-dropdown {
+  background-color: var(--bg-panel);
+  color: var(--text-main);
+  border: 1px solid var(--border-subtle);
+  border-radius: 3px;
+  padding: 1px 4px;
+  font-family: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.system-dropdown:hover {
+  border-color: var(--accent-sub-label);
+}
+
+.system-dropdown:focus {
+  outline: 1px solid var(--accent-sub-label);
+}
+