jedarden/spaxel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
spaxel/dashboard/css/replay.css
jedarden 07abc03ef4 style(dashboard): complete design token migration and live view cleanup 
Replace remaining hard-coded colors across all CSS files with design
tokens from tokens.css. Remove duplicate inline positioning from
live.html panels (now in layout.css). Add replay session blob fetch
for immediate 3D scene state on seek.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-04-24 16:39:53 -04:00

464 lines
9.5 KiB
CSS
Raw Blame History

/* ============================================
Time-Travel Replay Mode Styles
============================================ */
/* ----- Replay Control Bar ----- */
.replay-control-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-card) 100%);
border-bottom: 1px solid var(--bg-hover);
box-shadow: 0 4px 20px var(--shadow-lg);
z-index: 100;
padding: var(--space-3) var(--space-5);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-5);
backdrop-filter: blur(10px);
}
.replay-controls {
display: flex;
align-items: center;
gap: var(--space-4);
flex: 1;
}
.replay-btn {
background: var(--border-default);
border: 1px solid var(--border-strong);
border-radius: var(--radius-card);
color: var(--slate-12);
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
}
.replay-btn:hover {
background: var(--border-strong);
border-color: var(--border-strong);
transform: translateY(-1px);
}
.replay-btn:active {
background: var(--bg-hover);
transform: translateY(0);
}
.replay-btn svg {
width: 18px;
height: 18px;
}
.replay-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 150px;
}
.replay-timestamp {
font-size: var(--text-base);
font-weight: 600;
color: var(--blue-10);
font-family: var(--font-mono);
letter-spacing: 0.5px;
}
.replay-range {
font-size: var(--text-xs);
color: var(--text-muted);
font-family: var(--font-mono);
}
.replay-playback {
display: flex;
align-items: center;
gap: var(--space-2);
}
.replay-speed {
background: var(--border-subtle);
border: 1px solid var(--bg-hover);
border-radius: var(--radius-control);
color: var(--slate-11);
padding: 6px 10px;
font-size: var(--text-sm);
cursor: pointer;
transition: all 0.2s ease;
}
.replay-speed:hover {
background: var(--bg-hover);
border-color: var(--border-strong);
}
.replay-speed:focus {
outline: none;
border-color: var(--blue-10);
}
.replay-timeline {
flex: 1;
max-width: 400px;
}
.replay-scrubber {
width: 100%;
height: 6px;
background: var(--bg-hover);
border-radius: var(--radius-control);
outline: none;
-webkit-appearance: none;
cursor: pointer;
}
.replay-scrubber::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
background: var(--blue-10);
border-radius: 50%;
cursor: grab;
transition: all 0.15s ease;
box-shadow: 0 2px 6px var(--blue-border);
}
.replay-scrubber::-webkit-slider-thumb:hover {
transform: scale(1.2);
box-shadow: 0 2px 10px var(--blue-9);
}
.replay-scrubber::-webkit-slider-thumb:active {
cursor: grabbing;
transform: scale(1.1);
}
.replay-scrubber::-moz-range-thumb {
width: 16px;
height: 16px;
background: var(--blue-10);
border: none;
border-radius: 50%;
cursor: grab;
transition: all 0.15s ease;
box-shadow: 0 2px 6px var(--blue-border);
}
.replay-scrubber::-moz-range-thumb:hover {
transform: scale(1.2);
box-shadow: 0 2px 10px var(--blue-9);
}
.replay-scrubber::-moz-range-thumb:active {
cursor: grabbing;
}
.replay-scrubber::-moz-range-track {
background: var(--bg-hover);
border-radius: var(--radius-control);
height: 6px;
}
.replay-tuning {
display: flex;
align-items: center;
}
.replay-tune-btn {
background: var(--ok-bg);
border: 1px solid var(--ok-border);
border-radius: var(--radius-card);
color: var(--ok);
padding: var(--space-2) 14px;
font-size: var(--text-sm);
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 6px;
}
.replay-tune-btn:hover {
background: var(--ok-border);
border-color: var(--ok);
transform: translateY(-1px);
}
.replay-tune-btn:active {
transform: translateY(0);
}
.replay-tune-btn svg {
width: 16px;
height: 16px;
}
/* ----- Replay Tuning Panel ----- */
.replay-tuning-panel {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--overlay-strong);
backdrop-filter: blur(4px);
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
padding: var(--space-5);
}
.replay-tuning-content {
background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-page) 100%);
border-radius: var(--radius-modal);
box-shadow: 0 20px 60px var(--shadow-xl);
width: 100%;
max-width: 500px;
max-height: 90vh;
overflow: hidden;
display: flex;
flex-direction: column;
border: 1px solid var(--bg-hover);
}
.replay-tuning-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-5) var(--space-6);
border-bottom: 1px solid var(--bg-hover);
flex-shrink: 0;
}
.replay-tuning-header h2 {
margin: 0;
font-size: var(--text-xl);
font-weight: 600;
color: var(--slate-12);
}
.replay-tuning-close {
background: none;
border: none;
color: var(--text-muted);
font-size: var(--text-3xl);
line-height: 1;
cursor: pointer;
padding: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-control);
transition: all 0.2s ease;
}
.replay-tuning-close:hover {
background: var(--bg-hover);
color: var(--slate-12);
}
.replay-tuning-body {
padding: var(--space-6);
overflow-y: auto;
flex: 1;
}
.tuning-param {
margin-bottom: var(--space-6);
}
.tuning-param:last-child {
margin-bottom: 0;
}
.tuning-param label {
display: block;
font-size: var(--text-sm);
font-weight: 500;
color: var(--slate-11);
margin-bottom: var(--space-2);
}
.tuning-param input[type="range"] {
width: 100%;
height: 6px;
background: var(--bg-hover);
border-radius: var(--radius-control);
outline: none;
-webkit-appearance: none;
margin-bottom: var(--space-2);
}
.tuning-param input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
background: var(--blue-10);
border-radius: 50%;
cursor: pointer;
transition: all 0.15s ease;
box-shadow: 0 2px 6px var(--blue-border);
}
.tuning-param input[type="range"]::-webkit-slider-thumb:hover {
transform: scale(1.15);
}
.tuning-param input[type="range"]::-moz-range-thumb {
width: 16px;
height: 16px;
background: var(--blue-10);
border: none;
border-radius: 50%;
cursor: pointer;
transition: all 0.15s ease;
box-shadow: 0 2px 6px var(--blue-border);
}
.tuning-param input[type="range"]::-moz-range-thumb:hover {
transform: scale(1.15);
}
.tuning-param input[type="range"]::-moz-range-track {
background: var(--bg-hover);
border-radius: var(--radius-control);
height: 6px;
}
.tuning-value {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--blue-10);
float: right;
}
.tuning-actions {
display: flex;
gap: var(--space-3);
margin-top: 28px;
}
.tuning-btn {
flex: 1;
padding: var(--space-3) var(--space-5);
border: none;
border-radius: var(--radius-card);
font-size: var(--text-sm);
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.tuning-btn {
background: linear-gradient(135deg, var(--blue-10) 0%, var(--blue-10) 100%);
color: var(--slate-1);
}
.tuning-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px var(--blue-border);
}
.tuning-btn:active {
transform: translateY(0);
}
.tuning-btn-secondary {
background: var(--border-default);
color: var(--slate-11);
border: 1px solid var(--bg-hover);
}
.tuning-btn-secondary:hover {
background: var(--bg-active);
border-color: var(--border-strong);
}
/* ----- Responsive Adjustments ----- */
@media (max-width: 768px) {
.replay-control-bar {
flex-wrap: wrap;
padding: 10px var(--space-4);
}
.replay-controls {
flex-wrap: wrap;
gap: var(--space-3);
}
.replay-info {
min-width: 120px;
}
.replay-timeline {
max-width: 200px;
}
.replay-tuning-content {
max-width: 100%;
margin: 0;
}
}
/* ----- Replay Mode Indicator ----- */
.replay-mode-indicator {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: var(--blue-10);
color: var(--slate-1);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-modal);
font-size: var(--text-xs);
font-weight: 600;
z-index: 99;
box-shadow: 0 2px 10px var(--blue-border);
display: none;
}
.replay-mode-indicator.visible {
display: block;
animation: slideUp 0.3s ease;
}
@keyframes slideUp {
from {
transform: translateX(-50%) translateY(20px);
opacity: 0;
}
to {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
}
/* ----- Loading State ----- */
.replay-loading {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid var(--border-strong);
border-top-color: var(--blue-10);
border-radius: 50%;
animation: replaySpin 0.8s linear infinite;
}
@keyframes replaySpin {
to {
transform: rotate(360deg);
}
}
Reference in a new issue View git blame Copy permalink