mirror of
https://github.com/basicswap/basicswap.git
synced 2025-02-26 04:50:29 +00:00
ui: CSS update
This commit is contained in:
parent
f7315d405d
commit
d8430f4ca9
1 changed files with 79 additions and 0 deletions
|
@ -278,3 +278,82 @@ select.disabled-select-enabled {
|
||||||
.shutdown-button.shutdown-disabled svg {
|
.shutdown-button.shutdown-disabled svg {
|
||||||
opacity: 0.5;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue