From 8a069d28e3442af5d2a67a3d123d1c9c9cde1746 Mon Sep 17 00:00:00 2001
From: Reimar <mail@reim.ar>
Date: Mon, 13 Oct 2025 14:33:44 +0200
Subject: [PATCH] add secondary buttons

---
 index.html   |  4 ++--
 src/index.js |  4 ++--
 style.css    | 22 +++++++++++++++++-----
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index 416ca6f..ec08c6b 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,7 @@
                         href="docs/index.html"
                         target="_blank"
                     >
-                        <button class="icon-button">
+                        <button class="icon-button secondary">
                             <img
                                 src="https://chatgpt.com/favicon.ico"
                                 width="20"
@@ -72,7 +72,7 @@
                             💾 Save
                         </button>
 
-                        <button id="load-button">
+                        <button id="load-button" class="secondary">
                             📄 Load
                         </button>
                     </div>
diff --git a/src/index.js b/src/index.js
index 0b44aa7..cef10e0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -114,10 +114,10 @@ runButton.onclick = () => {
 
     if (codeRunner.isRunning) {
         runButton.textContent = "✋ Stop";
-        runButton.classList.add("active");
+        runButton.classList.add("running");
     } else {
         runButton.textContent = "🏃 Run";
-        runButton.classList.remove("active");
+        runButton.classList.remove("running");
     }
 };
 
diff --git a/style.css b/style.css
index fef7e1f..407108f 100644
--- a/style.css
+++ b/style.css
@@ -257,15 +257,27 @@ button {
     white-space: nowrap;
 }
 
-.dropdown-wrapper:has(.active) button,
-button:active {
-    background-color: #065275;
-}
-
 button:hover {
     box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
 }
 
+button.secondary {
+    background-color: #616161;
+}
+
+button.secondary:active {
+    background-color: #424242;
+}
+
+#run-button {
+    transition-duration: 0s;
+    background-color: #388e3c;
+}
+
+#run-button.running {
+    background-color: #d32f2f;
+}
+
 footer {
     position: absolute;
     bottom: 1px;