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; + } +