diff --git a/retro-refresh.css b/retro-refresh.css deleted file mode 100644 index 9e987ff..0000000 --- a/retro-refresh.css +++ /dev/null @@ -1,369 +0,0 @@ -/* Retro Floating Refresh Bar Styles */ -:root { - --terminal-bg: #000000; - --terminal-border: #f7931a; - --terminal-text: #f7931a; - --terminal-glow: rgba(247, 147, 26, 0.7); - --terminal-width: 300px; -} - -/* Adjust width for desktop */ -@media (min-width: 768px) { - :root { - --terminal-width: 340px; - } -} - -/* Remove the existing refresh timer container styles */ -#refreshUptime { - visibility: hidden !important; - height: 0 !important; - overflow: hidden !important; - margin: 0 !important; - padding: 0 !important; -} - -/* Add padding to the bottom of the page to prevent floating bar from covering content -body { - padding-bottom: 100px !important; -} -*/ -/* Floating Retro Terminal Container */ -#retro-terminal-bar { - position: fixed; - bottom: 20px; - left: 50%; - transform: translateX(-50%); - width: var(--terminal-width); - background-color: var(--terminal-bg); - border: 2px solid var(--terminal-border); - /* box-shadow: 0 0 15px var(--terminal-glow); */ - z-index: 1000; - font-family: 'VT323', monospace; - overflow: hidden; - padding: 5px; -} - -/* Desktop positioning (bottom right) */ -@media (min-width: 768px) { - #retro-terminal-bar { - left: auto; - right: 20px; - transform: none; - } -} - -/* Terminal header with control buttons */ -/* Update the terminal title to match card headers */ -.terminal-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 5px; - border-bottom: 1px solid var(--terminal-border); - padding-bottom: 3px; - background-color: #000; /* Match card header background */ -} - -.terminal-title { - color: var(--primary-color); - font-weight: bold; - font-size: 1.1rem; /* Match card header font size */ - border-bottom: none; - text-shadow: 0 0 5px var(--primary-color); - animation: flicker 4s infinite; /* Add flicker animation from card headers */ - font-family: var(--header-font); /* Use the same font variable */ - padding: 0.3rem 0; /* Match card header padding */ - letter-spacing: 1px; -} - -/* Make sure we're using the flicker animation defined in the main CSS */ -@keyframes flicker { - 0% { opacity: 0.97; } - 5% { opacity: 0.95; } - 10% { opacity: 0.97; } - 15% { opacity: 0.94; } - 20% { opacity: 0.98; } - 50% { opacity: 0.95; } - 80% { opacity: 0.96; } - 90% { opacity: 0.94; } - 100% { opacity: 0.98; } -} - -.terminal-controls { - display: flex; - gap: 5px; -} - -.terminal-dot { - width: 8px; - height: 8px; - border-radius: 50%; - background-color: #555; - transition: background-color 0.3s; -} - -.terminal-dot:hover { - background-color: #999; - cursor: pointer; -} - -.terminal-dot.minimize:hover { - background-color: #ffcc00; -} - -.terminal-dot.close:hover { - background-color: #ff3b30; -} - -/* Terminal content area */ -.terminal-content { - position: relative; - color: #ffffff; - padding: 5px 0; -} - -/* Scanline effect for authentic CRT look */ -.terminal-content::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: repeating-linear-gradient( - 0deg, - rgba(0, 0, 0, 0.15), - rgba(0, 0, 0, 0.15) 1px, - transparent 1px, - transparent 2px - ); - pointer-events: none; - z-index: 1; - animation: flicker 0.15s infinite; -} - -@keyframes flicker { - 0% { opacity: 1.0; } - 50% { opacity: 0.98; } - 100% { opacity: 1.0; } -} - -/* Enhanced Progress Bar with tick marks */ -#retro-terminal-bar .bitcoin-progress-container { - width: 100%; - height: 20px; - background-color: #111; - border: 1px solid var(--terminal-border); - margin-bottom: 10px; - position: relative; - overflow: hidden; - box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8); -} - -/* Tick marks on progress bar */ -.progress-ticks { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: flex; - justify-content: space-between; - padding: 0 5px; - color: rgba(255, 255, 255, 0.6); - font-size: 10px; - pointer-events: none; - z-index: 3; -} - -.progress-ticks span { - display: flex; - align-items: flex-end; - height: 100%; - padding-bottom: 2px; -} - -.tick-mark { - position: absolute; - top: 0; - width: 1px; - height: 5px; - background-color: rgba(255, 255, 255, 0.4); -} - -.tick-mark.major { - height: 8px; - background-color: rgba(255, 255, 255, 0.6); -} - -/* The actual progress bar */ -#retro-terminal-bar #bitcoin-progress-inner { - height: 100%; - width: 0; - background: linear-gradient(90deg, #f7931a, #ffa500); - position: relative; - transition: width 1s linear; -} - -/* Position the original inner container correctly */ -#retro-terminal-bar #refreshContainer { - display: block; - width: 100%; -} - -/* Blinking scan line animation */ -.scan-line { - position: absolute; - height: 2px; - width: 100%; - background-color: rgba(255, 255, 255, 0.7); - animation: scan 3s linear infinite; - box-shadow: 0 0 8px 1px rgba(255, 255, 255, 0.5); - z-index: 2; -} - -@keyframes scan { - 0% { top: -2px; } - 100% { top: 22px; } -} - -/* Text styling */ -#retro-terminal-bar #progress-text { - font-size: 16px; - color: var(--terminal-text); - text-shadow: 0 0 5px var(--terminal-text); - margin-top: 5px; - text-align: center; - position: relative; - z-index: 2; -} - -#retro-terminal-bar #uptimeTimer { - font-size: 16px; - color: var(--terminal-text); - text-shadow: 0 0 5px var(--terminal-text); - text-align: center; - position: relative; - z-index: 2; - border-top: 1px solid rgba(247, 147, 26, 0.3); - padding-top: 5px; - margin-top: 5px; -} - -/* Terminal cursor */ -#retro-terminal-bar #terminal-cursor { - display: inline-block; - width: 8px; - height: 14px; - background-color: var(--terminal-text); - margin-left: 2px; - animation: blink 1s step-end infinite; - box-shadow: 0 0 8px var(--terminal-text); -} - -/* Glowing effect during the last few seconds */ -#retro-terminal-bar #bitcoin-progress-inner.glow-effect { - box-shadow: 0 0 15px #f7931a, 0 0 25px #f7931a; -} - -#retro-terminal-bar .waiting-for-update { - animation: waitingPulse 2s infinite !important; -} - -@keyframes waitingPulse { - 0%, 100% { box-shadow: 0 0 10px #f7931a, 0 0 15px #f7931a; opacity: 0.8; } - 50% { box-shadow: 0 0 20px #f7931a, 0 0 35px #f7931a; opacity: 1; } -} - -/* Status indicators */ -.status-indicators { - display: flex; - justify-content: space-between; - margin-bottom: 5px; - font-size: 12px; - color: #aaa; -} - -.status-indicator { - display: flex; - align-items: center; -} - -.status-dot { - width: 6px; - height: 6px; - border-radius: 50%; - margin-right: 4px; -} - -.status-dot.connected { - background-color: #32CD32; - box-shadow: 0 0 5px #32CD32; - animation: pulse 2s infinite; -} - -@keyframes pulse { - 0% { opacity: 0.8; } - 50% { opacity: 1; } - 100% { opacity: 0.8; } -} - -/* Collapse/expand functionality */ -#retro-terminal-bar.collapsed .terminal-content { - display: none; -} - -#retro-terminal-bar.collapsed { - width: 180px; -} - -/* On desktop, move the collapsed bar to bottom right */ -@media (min-width: 768px) { - #retro-terminal-bar.collapsed { - right: 20px; - transform: none; - } -} - -/* Show button */ -#show-terminal-button { - position: fixed; - bottom: 10px; - right: 10px; - z-index: 1000; - background-color: #f7931a; - color: #000; - border: none; - padding: 8px 12px; - cursor: pointer; - font-family: 'VT323', monospace; - font-size: 14px; - box-shadow: 0 0 10px rgba(247, 147, 26, 0.5); -} - -#show-terminal-button:hover { - background-color: #ffaa33; -} - -/* Mobile responsiveness */ -@media (max-width: 576px) { - #retro-terminal-bar { - width: 280px; - bottom: 10px; - } - - .terminal-title { - font-size: 14px; - } - - .terminal-dot { - width: 6px; - height: 6px; - } - - #show-terminal-button { - padding: 6px 10px; - font-size: 12px; - } -} \ No newline at end of file