07abc03ef4
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>
211 lines
3.7 KiB
CSS
211 lines
3.7 KiB
CSS
/**
|
|
* Spaxel Dashboard - AP Detection Panel Styles
|
|
*
|
|
* Styles for the router AP detection banner and placement UI.
|
|
*/
|
|
|
|
/* ============================================
|
|
AP Detection Banner
|
|
============================================ */
|
|
|
|
.ap-detection-banner {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
background: linear-gradient(135deg, var(--blue-7) 0%, var(--blue-9) 100%);
|
|
box-shadow: 0 4px 20px var(--shadow);
|
|
transform: translateY(-100%);
|
|
transition: transform 0.3s ease-out;
|
|
}
|
|
|
|
.ap-detection-banner-visible {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.ap-detection-content {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: var(--space-4) var(--space-6);
|
|
max-width: 800px;
|
|
margin: 0;
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.ap-detection-icon {
|
|
font-size: var(--text-2xl);
|
|
margin-right: var(--space-4);
|
|
animation: pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
transform: scale(1.1);
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
.ap-detection-message {
|
|
flex: 1;
|
|
}
|
|
|
|
.ap-detection-title {
|
|
font-size: var(--text-xl);
|
|
font-weight: 600;
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
|
|
.ap-detection-subtitle {
|
|
font-size: var(--text-sm);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.ap-detection-actions {
|
|
display: flex;
|
|
gap: var(--space-3);
|
|
margin-left: var(--space-4);
|
|
}
|
|
|
|
/* ============================================
|
|
AP Placement Content
|
|
============================================ */
|
|
|
|
.ap-placement-content {
|
|
padding: 16px 0;
|
|
}
|
|
|
|
.ap-placement-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: var(--space-4);
|
|
}
|
|
|
|
.ap-placement-list li {
|
|
padding: 8px 0;
|
|
padding-left: var(--space-6);
|
|
position: relative;
|
|
}
|
|
|
|
.ap-placement-list li:before {
|
|
content: "•";
|
|
position: absolute;
|
|
left: 0;
|
|
color: var(--blue-7);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.ap-placement-tips {
|
|
margin-top: var(--space-5);
|
|
}
|
|
|
|
.ap-placement-tip {
|
|
background: var(--bg-input);
|
|
border-left: 4px solid var(--blue-7);
|
|
padding: var(--space-3);
|
|
border-radius: var(--radius-control);
|
|
font-size: var(--text-sm);
|
|
color: var(--slate-6);
|
|
}
|
|
|
|
/* ============================================
|
|
Responsive Design
|
|
============================================ */
|
|
|
|
@media (max-width: 768px) {
|
|
.ap-detection-content {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
|
|
.ap-detection-icon {
|
|
margin-right: 0;
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
|
|
.ap-detection-actions {
|
|
margin-left: 0;
|
|
margin-top: var(--space-4);
|
|
width: 100%;
|
|
}
|
|
|
|
.ap-detection-actions button {
|
|
flex: 1;
|
|
}
|
|
|
|
.ap-placement-list li {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.ap-placement-list li:before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
Button Styles
|
|
============================================ */
|
|
|
|
.ap-btn {
|
|
padding: 10px var(--space-5);
|
|
border: none;
|
|
border-radius: var(--radius-control);
|
|
font-size: var(--text-sm);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.ap-btn-primary {
|
|
background: var(--slate-12);
|
|
color: var(--blue-7);
|
|
}
|
|
|
|
.ap-btn-primary:hover {
|
|
background: var(--bg-hover);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 8px var(--overlay);
|
|
}
|
|
|
|
.ap-btn-secondary {
|
|
background: var(--border-strong);
|
|
color: var(--text-on-accent);
|
|
border: 1px solid var(--slate-7);
|
|
}
|
|
|
|
.ap-btn-secondary:hover {
|
|
background: var(--slate-7);
|
|
}
|
|
|
|
.ap-btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* ============================================
|
|
3D View Router Icon
|
|
============================================ */
|
|
|
|
/* Distinct router icon for virtual AP nodes in 3D view */
|
|
.virtual-node-router {
|
|
fill: var(--blue-7);
|
|
stroke: var(--blue-9);
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.virtual-node-router-glow {
|
|
opacity: 0.5;
|
|
animation: glow-pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes glow-pulse {
|
|
0%, 100% {
|
|
opacity: 0.3;
|
|
}
|
|
50% {
|
|
opacity: 0.6;
|
|
}
|
|
}
|