Retropex/custom-ocean.xyz-dashboard
1
0
Fork 0
mirror of https://github.com/Retropex/custom-ocean.xyz-dashboard.git synced 2025-05-12 19:20:45 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update retro-refresh.css

Browse Source
This commit is contained in:
DJObleezy 2025-03-25 08:18:15 -07:00 committed by GitHub
parent 111135ded6
commit e2c58c25cf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 44 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
static/css/retro-refresh.css
View File

@ -354,7 +354,7 @@ body {
} }
.terminal-title { .terminal-title {
font-size: 14px; font-size: 12px;
} }
.terminal-dot { .terminal-dot {
@ -366,4 +366,46 @@ body {
padding: 6px 10px; padding: 6px 10px;
font-size: 12px; font-size: 12px;
} }
} }
/* Add these styles to retro-refresh.css to make the progress bar transitions smoother */
/* Smooth transition for progress bar width */
#retro-terminal-bar #bitcoin-progress-inner {
transition: width 0.3s ease-out;
}
/* Add a will-change property to optimize the animation */
#retro-terminal-bar .bitcoin-progress-container {
will-change: contents;
}
/* Smooth transition when changing from waiting state */
#retro-terminal-bar #bitcoin-progress-inner.waiting-for-update {
transition: width 0.3s ease-out, box-shadow 1s ease;
}
/* Ensure the scan line stays smooth during transitions */
#retro-terminal-bar .scan-line {
will-change: transform;
}
/* Improve mobile centering for collapsed system monitor */
@media (max-width: 767px) {
/* Target both possible selectors to ensure we catch the right one */
#retro-terminal-bar.collapsed,
.bitcoin-terminal.collapsed,
.retro-terminal-bar.collapsed,
div[id*="terminal"].collapsed {
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
width: auto !important;
max-width: 300px !important; /* Smaller max-width for mobile */
}
/* Ensure consistent height for minimized view */
.terminal-minimized {
height: 40px;
display: flex;
align-items: center;
}
}