/* APRS Function Bar (Stats Strip) Styles */ .aprs-strip { background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-dark) 100%); border: 1px solid var(--border-color); border-radius: 6px; padding: 6px 12px; margin-bottom: 10px; overflow-x: auto; } .aprs-strip-inner { display: flex; align-items: center; gap: 8px; min-width: max-content; } .aprs-strip .strip-stat { display: flex; flex-direction: column; align-items: center; padding: 4px 10px; background: rgba(74, 158, 255, 0.05); border: 1px solid rgba(74, 158, 255, 0.15); border-radius: 4px; min-width: 55px; } .aprs-strip .strip-stat:hover { background: rgba(74, 158, 255, 0.1); border-color: rgba(74, 158, 255, 0.3); } .aprs-strip .strip-value { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--accent-cyan); line-height: 1.2; } .aprs-strip .strip-label { font-size: 8px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 1px; } .aprs-strip .strip-divider { width: 1px; height: 28px; background: var(--border-color); margin: 0 4px; } /* Signal stat coloring */ .aprs-strip .signal-stat.good .strip-value { color: var(--accent-green); } .aprs-strip .signal-stat.warning .strip-value { color: var(--accent-yellow); } .aprs-strip .signal-stat.poor .strip-value { color: var(--accent-red); } /* Controls */ .aprs-strip .strip-control { display: flex; align-items: center; gap: 4px; } .aprs-strip .strip-select { background: var(--bg-dark); border: 1px solid var(--border-color); color: var(--text-primary); padding: 4px 8px; border-radius: 4px; font-size: 10px; cursor: pointer; } .aprs-strip .strip-select:hover { border-color: var(--accent-cyan); } .aprs-strip .strip-input-label { font-size: 9px; color: var(--text-muted); font-weight: 600; } .aprs-strip .strip-input { background: rgba(0,0,0,0.3); border: 1px solid var(--border-color); color: var(--text-primary); padding: 4px 6px; border-radius: 4px; font-size: 10px; width: 50px; text-align: center; } .aprs-strip .strip-input:hover, .aprs-strip .strip-input:focus { border-color: var(--accent-cyan); outline: none; } /* Tool Status Indicators */ .aprs-strip .strip-tools { display: flex; gap: 4px; } .aprs-strip .strip-tool { font-size: 9px; font-weight: 600; padding: 3px 6px; border-radius: 3px; background: rgba(255, 59, 48, 0.2); color: var(--accent-red); border: 1px solid rgba(255, 59, 48, 0.3); } .aprs-strip .strip-tool.ok { background: rgba(0, 255, 136, 0.1); color: var(--accent-green); border-color: rgba(0, 255, 136, 0.3); } /* Buttons */ .aprs-strip .strip-btn { background: rgba(74, 158, 255, 0.1); border: 1px solid rgba(74, 158, 255, 0.2); color: var(--text-primary); padding: 6px 12px; border-radius: 4px; font-size: 10px; font-weight: 600; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .aprs-strip .strip-btn:hover:not(:disabled) { background: rgba(74, 158, 255, 0.2); border-color: rgba(74, 158, 255, 0.4); } .aprs-strip .strip-btn.primary { background: linear-gradient(135deg, var(--accent-green) 0%, #10b981 100%); border: none; color: var(--text-inverse); } .aprs-strip .strip-btn.primary:hover:not(:disabled) { filter: brightness(1.1); } .aprs-strip .strip-btn.stop { background: linear-gradient(135deg, var(--accent-red) 0%, #dc2626 100%); border: none; color: var(--text-inverse); } .aprs-strip .strip-btn.stop:hover:not(:disabled) { filter: brightness(1.1); } .aprs-strip .strip-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Status indicator */ .aprs-strip .strip-status { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: rgba(0,0,0,0.2); border-radius: 4px; font-size: 10px; font-weight: 600; color: var(--text-secondary); } .aprs-strip .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); } .aprs-strip .status-dot.listening { background: var(--accent-cyan); animation: aprs-strip-pulse 1.5s ease-in-out infinite; } .aprs-strip .status-dot.tracking { background: var(--accent-green); animation: aprs-strip-pulse 1.5s ease-in-out infinite; } .aprs-strip .status-dot.error { background: var(--accent-red); } @keyframes aprs-strip-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 4px 2px currentColor; } 50% { opacity: 0.6; box-shadow: none; } } /* Time display */ .aprs-strip .strip-time { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); padding: 4px 8px; background: rgba(0,0,0,0.2); border-radius: 4px; white-space: nowrap; } /* APRS Status Bar Styles (Sidebar - legacy) */ .aprs-status-bar { margin-top: 12px; padding: 10px; background: rgba(0,0,0,0.3); border: 1px solid var(--border-color); border-radius: 4px; } .aprs-status-indicator { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .aprs-status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-muted); } .aprs-status-dot.standby { background: var(--text-muted); } .aprs-status-dot.listening { background: var(--accent-cyan); animation: aprs-pulse 1.5s ease-in-out infinite; } .aprs-status-dot.tracking { background: var(--accent-green); } .aprs-status-dot.error { background: var(--accent-red); } @keyframes aprs-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(74, 158, 255, 0.7); } 50% { opacity: 0.6; box-shadow: 0 0 8px 4px rgba(74, 158, 255, 0.3); } } .aprs-status-text { font-size: 10px; font-weight: bold; letter-spacing: 1px; } .aprs-status-stats { display: flex; flex-wrap: wrap; gap: 8px; font-size: 9px; } .aprs-stat { color: var(--text-secondary); } .aprs-stat-label { color: var(--text-muted); } /* Signal Meter Styles */ .aprs-signal-meter { margin-top: 12px; padding: 10px; background: rgba(0,0,0,0.3); border: 1px solid var(--border-color); border-radius: 4px; } .aprs-meter-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .aprs-meter-label { font-size: 10px; font-weight: bold; letter-spacing: 1px; color: var(--text-secondary); } .aprs-meter-value { font-size: 12px; font-weight: bold; font-family: monospace; color: var(--accent-cyan); min-width: 24px; } .aprs-meter-burst { font-size: 9px; font-weight: bold; color: var(--accent-yellow); background: rgba(255, 193, 7, 0.2); padding: 2px 6px; border-radius: 3px; animation: burst-flash 0.3s ease-out; } @keyframes burst-flash { 0% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } } .aprs-meter-bar-container { position: relative; height: 16px; background: rgba(0,0,0,0.4); border-radius: 3px; overflow: hidden; margin-bottom: 4px; } .aprs-meter-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent-green) 0%, var(--accent-cyan) 50%, var(--accent-yellow) 75%, var(--accent-red) 100% ); border-radius: 3px; transition: width 0.1s ease-out; } .aprs-meter-bar.no-signal { opacity: 0.3; } .aprs-meter-ticks { display: flex; justify-content: space-between; font-size: 8px; color: var(--text-muted); padding: 0 2px; } .aprs-meter-status { font-size: 9px; color: var(--text-muted); text-align: center; margin-top: 6px; } .aprs-meter-status.active { color: var(--accent-green); } .aprs-meter-status.no-signal { color: var(--accent-yellow); } /* APRS map markers (flat SVG icons) */ .aprs-map-marker-wrap { background: transparent; border: none; } .aprs-map-marker { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px 2px 5px; border-radius: 999px; border: 1px solid rgba(74, 158, 255, 0.35); background: rgba(10, 18, 28, 0.88); color: var(--text-primary); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); } .aprs-map-marker-icon { display: inline-flex; width: 14px; height: 14px; color: var(--accent-cyan); } .aprs-map-marker-icon svg { width: 14px; height: 14px; display: block; fill: currentColor; } .aprs-map-marker-label { font-size: 9px; font-weight: 600; line-height: 1; letter-spacing: 0.02em; } .aprs-map-marker.vehicle .aprs-map-marker-icon { color: var(--accent-green); } .aprs-map-marker.tower .aprs-map-marker-icon { color: var(--accent-cyan); }