From d8430f4ca9c23741ce1be424196958ad69ae1396 Mon Sep 17 00:00:00 2001
From: gerlofvanek <gerlof@particl.io>
Date: Wed, 9 Oct 2024 00:39:33 +0200
Subject: [PATCH] ui: CSS update

---
 basicswap/static/css/style.css | 79 ++++++++++++++++++++++++++++++++++
 1 file changed, 79 insertions(+)

diff --git a/basicswap/static/css/style.css b/basicswap/static/css/style.css
index d9258a1..96bfb70 100644
--- a/basicswap/static/css/style.css
+++ b/basicswap/static/css/style.css
@@ -278,3 +278,82 @@ select.disabled-select-enabled {
 .shutdown-button.shutdown-disabled svg {
   opacity: 0.5;
 }
+
+
+/* Loading line animation */
+.loading-line {
+  width: 100%;
+  height: 2px;
+  background-color: #ccc;
+  overflow: hidden;
+  position: relative;
+}
+.loading-line::before {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to right, transparent, #007bff, transparent);
+  animation: loading 1.5s infinite;
+}
+@keyframes loading {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+/* Hide the loading line once data is loaded */
+.usd-value:not(.loading) .loading-line,
+.profit-loss:not(.loading) .loading-line {
+  display: none;
+}
+
+  .resolution-button {
+    background: none;
+    border: none;
+    color: #4B5563; /* gray-600 */
+    font-size: 0.875rem; /* text-sm */
+    font-weight: 500; /* font-medium */
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+    transition: all 0.2s;
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+
+  .resolution-button:hover {
+    color: #1F2937; /* gray-800 */
+  }
+
+  .resolution-button:focus {
+    outline: 2px solid #3B82F6; /* blue-500 */
+  }
+
+  .resolution-button.active {
+    color: #3B82F6; /* blue-500 */
+    outline: 2px solid #3B82F6; /* blue-500 */
+  }
+
+  .dark .resolution-button {
+    color: #9CA3AF; /* gray-400 */
+  }
+
+  .dark .resolution-button:hover {
+    color: #F3F4F6; /* gray-100 */
+  }
+
+  .dark .resolution-button.active {
+    color: #60A5FA; /* blue-400 */
+    outline-color: #60A5FA; /* blue-400 */
+    color: #fff;
+  }
+  
+    #toggle-volume.active {
+    @apply bg-green-500 hover:bg-green-600 focus:ring-green-300;
+  }
+  #toggle-auto-refresh[data-enabled="true"] {
+    @apply bg-green-500 hover:bg-green-600 focus:ring-green-300;
+  }
+