huge refactor and css fix

css/about-panel.css

@@ -0,0 +1,32 @@
+/* about panel stuff */
+#aboutPanel {
+  left: 5px;
+  top: 5px;
+  text-align: center;
+  z-index: 3;
+}
+
+#githubLink {
+  font-size: 18px;
+  background: none;
+  padding: 0;
+  margin: 0;
+}
+
+.about-panel-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.about-label {
+  font-size: 16px;
+  color: #d8d4cf;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 10px;
+}
+
+

css/animation-panel.css

@@ -0,0 +1,55 @@
+/* Animation panel stuff */
+#animationPanel {
+  top: 54px;
+  left: 5px;
+  background-color: #181a1b;
+  border: 1px solid #3e4446;
+  border-radius: 5px;
+  color: #d8d4cf;
+  position: absolute;
+  z-index: 2;
+  transition: transform 0.4s ease; /* Sliding animation */
+}
+
+.animation-button {
+  margin: 5px;
+  width: 50px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  background: #202020;
+  cursor: pointer;
+  transition: background 0.2s, transform 0.1s;
+}
+
+.animation-buttons-container {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.animation-buttons-container {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.animation-button {
+}
+
+.animation-button:hover {
+  background: #e0e0e0;
+  transform: scale(1.1);
+}
+
+.animation-button i {
+  pointer-events: none; /* Ensure clicks pass through to the button */
+}
+
+

css/chromalink-panel.css

@@ -0,0 +1,83 @@
+/* chromalink-panel.css */
+#chromalinkPanel {
+  background-color: #181a1b;
+  border: 1px solid #3e4446;
+  border-radius: 5px;
+  color: #d8d4cf;
+  padding: 10px;
+  position: absolute;
+  width: 150px;
+  z-index: 4;
+  top: 5px;
+  right: 390px;
+  width: 200px;
+}
+
+#chromalinkPanel h2 {
+  margin-bottom: 10px;
+  margin-top: 5px;
+  font-size: 16px;
+  text-align: center;
+}
+
+.chromalink-button {
+  display: block;
+  width: 100%;
+  padding: 8px;
+  margin: 10px 0 0 0;
+  background-color: #444;
+  border: none;
+  border-radius: 5px;
+  color: #fff;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.chromalink-button:hover {
+  background-color: #666;
+}
+
+.chromalink-update-progress-container {
+  margin: 5px;
+  margin-top: 10px;
+  height: 20px;
+  background-color: #e0e0e0;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.chromalink-update-progress-bar {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.device-info {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+
+.device-info img {
+  width: 50px;
+  height: 50px;
+  margin-right: 10px;
+}
+
+#firmwareProgress {
+  height: 20px;
+  background-color: #e0e0e0;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+#firmwareProgressBar {
+  height: 100%;
+  background-color: #007bff;
+  width: 0;
+  transition: width 0.3s ease;
+}
+
+