alro65
deb04c9315
Sprint 0 completo del producto VMS-Sailor (Vessel Management System integrado para buques 30-40m). Brief de referencia en VMS_Sailor_v2_Parte_*.md (intacto). Core (vmssailor.core, 95.17% coverage, 99 tests verde): - ShipCoord: sistema naval x_pp/y_cl/z_bl frozen - Vessel, Deck, Bulkhead - Equipment, EquipmentModel, Sensor, EquipmentSpec - Tag, AlarmConfig, TagBinding, Scaling - CardInstance, Bus, Topology con validacion 21 puntos I/O AR-NMEA-IO-v1.0 - Alarm, PermissiveRule, Condition - Project agregado raiz con validacion cross-entity - Persistencia portable .vmsproj (SQLite) con roundtrip verificable Biblioteca curada seed (vmssailor.library): - systems_catalog.json completo (catalogo maestro Parte 1 sec 7) - 2 vessels: Sunseeker 76, Ferretti 850 - 2 motores: MTU 12V 2000 M96, Volvo D13-900 - 1 genset: Northern Lights M65C13 - yacht_motor_planeo.yaml (reglas heuristicas) - TODO marcado data_source=seed_estimate - requiere validacion datasheets Tools: - vms-validate-library: CLI valida biblioteca completa - vms-generate-test-project: CLI demo + verificacion roundtrip persistencia Design System + 8 mockups HTML estaticos: - docs/design_system.md (paleta Deep Ocean, gradientes, typography, motion) - docs/brand/ (logo + variantes SVG) - docs/mockups/splash, studio_main, runtime_overview, runtime_mimic_fuel (P&ID animado), runtime_alarms, runtime_trim (panel estrella con horizonte artificial), mobile_overview, mobile_trim - docs/mockups/index.html (galeria) Firmware (Sprint 12+ implementacion): - firmware/ar_nmea_io_v1/src/config/pinout.h con macros GPIO Decisiones autonomas documentadas en docs/decisions_sprint0.md. Stack: Python 3.11 + uv + Pydantic v2 + SQLite stdlib + hatchling + pytest 9 + ruff + mypy. Sin PySide6, FastAPI, Flutter ni firmware funcional (entran en sprints siguientes). Criterio de aceptacion Sprint 0: cumplido. - uv sync: OK - pytest: 99/99 verde - cov vmssailor.core: 95.17% (objetivo >=80%) - ruff: clean - vms-validate-library: OK - vms-generate-test-project: INTEGRIDAD OK Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
259 lines
7.2 KiB
CSS
259 lines
7.2 KiB
CSS
/* VMS-Sailor Design Tokens - canonical reference for all UI sprints. */
|
|
|
|
:root {
|
|
/* ---- Colors: Deep Ocean ---- */
|
|
--c-abyss: #04111F;
|
|
--c-midnight: #0A1A2E;
|
|
--c-steel: #1A2B42;
|
|
--c-iron: #2C3E5C;
|
|
--c-fog: #7C8B9F;
|
|
--c-sand: #E6EAF0;
|
|
--c-foam: #F2F5F9;
|
|
--c-cyan: #00D9FF;
|
|
--c-cyan-deep: #1B7FB5;
|
|
--c-horizon: #5BC0EB;
|
|
|
|
/* ---- Semantic ---- */
|
|
--c-ok: #00E08A;
|
|
--c-info: #5BC0EB;
|
|
--c-warn: #FFB020;
|
|
--c-high: #FF8030;
|
|
--c-emergency: #FF3B47;
|
|
--c-emergency-deep: #A11220;
|
|
|
|
/* ---- Gradients ---- */
|
|
--g-deep-sea: linear-gradient(135deg, #04111F 0%, #0A1A2E 60%, #1A2B42 100%);
|
|
--g-horizon: linear-gradient(180deg, #04111F 0%, #1B3E6E 60%, #3A6BA8 90%, #5BC0EB 100%);
|
|
--g-cyan-glow: radial-gradient(circle at 50% 50%, rgba(0,217,255,0.4) 0%, transparent 70%);
|
|
--g-glass: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
|
|
--g-glass-edge: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.02));
|
|
--g-emergency: linear-gradient(135deg, #FF3B47, #A11220);
|
|
--g-warn: linear-gradient(135deg, #FFB020, #C0760F);
|
|
--g-cyan: linear-gradient(135deg, #00D9FF 0%, #5BC0EB 50%, #1B7FB5 100%);
|
|
--g-ok: linear-gradient(135deg, #00E08A, #007F4E);
|
|
|
|
/* ---- Spacing 4px base ---- */
|
|
--s-1: 4px;
|
|
--s-2: 8px;
|
|
--s-3: 12px;
|
|
--s-4: 16px;
|
|
--s-5: 24px;
|
|
--s-6: 32px;
|
|
--s-7: 48px;
|
|
--s-8: 64px;
|
|
--s-9: 96px;
|
|
|
|
/* ---- Radius ---- */
|
|
--r-1: 4px;
|
|
--r-2: 8px;
|
|
--r-3: 12px;
|
|
--r-4: 16px;
|
|
--r-5: 24px;
|
|
--r-pill: 9999px;
|
|
|
|
/* ---- Elevation ---- */
|
|
--e-1: 0 1px 3px rgba(0,0,0,0.32);
|
|
--e-2: 0 4px 12px rgba(0,0,0,0.40);
|
|
--e-3: 0 8px 24px rgba(0,0,0,0.50);
|
|
--e-4: 0 16px 48px rgba(0,0,0,0.60);
|
|
--e-5: 0 32px 80px rgba(0,0,0,0.70);
|
|
--glow-cyan: 0 0 24px rgba(0,217,255,0.45);
|
|
--glow-warn: 0 0 24px rgba(255,176,32,0.45);
|
|
--glow-emergency: 0 0 32px rgba(255,59,71,0.55);
|
|
--inner-stroke: inset 0 0 0 1px rgba(255,255,255,0.06);
|
|
|
|
/* ---- Typography families ---- */
|
|
--f-display: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
--f-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
--f-mono: "JetBrains Mono", "Cascadia Mono", Consolas, "Courier New", monospace;
|
|
|
|
/* ---- Motion ---- */
|
|
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
|
|
--ease-out: cubic-bezier(0.0, 0, 0.2, 1);
|
|
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
/* ---- Reset ---- */
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: var(--g-deep-sea);
|
|
color: var(--c-sand);
|
|
font-family: var(--f-ui);
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
min-height: 100vh;
|
|
}
|
|
body::before {
|
|
/* subtle horizon glow at the top */
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
background: radial-gradient(ellipse at 20% -20%, rgba(0,217,255,0.10), transparent 50%),
|
|
radial-gradient(ellipse at 80% 110%, rgba(91,192,235,0.06), transparent 50%);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
button { font-family: inherit; cursor: pointer; }
|
|
a { color: var(--c-cyan); text-decoration: none; }
|
|
|
|
/* ---- Utility classes ---- */
|
|
.mono { font-family: var(--f-mono); }
|
|
.display { font-family: var(--f-display); }
|
|
.overline {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 2.4px;
|
|
text-transform: uppercase;
|
|
color: var(--c-fog);
|
|
}
|
|
.caption {
|
|
font-size: 12px;
|
|
letter-spacing: 0.4px;
|
|
color: var(--c-fog);
|
|
}
|
|
|
|
/* ---- Cards ---- */
|
|
.card {
|
|
background: var(--c-midnight);
|
|
border: 1px solid var(--c-steel);
|
|
border-radius: var(--r-3);
|
|
padding: var(--s-5);
|
|
box-shadow: var(--e-2);
|
|
}
|
|
.card-glass {
|
|
background: var(--g-glass);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
border-radius: var(--r-3);
|
|
backdrop-filter: blur(16px) saturate(1.4);
|
|
-webkit-backdrop-filter: blur(16px) saturate(1.4);
|
|
box-shadow: var(--e-3), var(--inner-stroke);
|
|
padding: var(--s-5);
|
|
}
|
|
|
|
/* ---- Buttons ---- */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--s-2);
|
|
min-width: 96px;
|
|
padding: 12px 20px;
|
|
border: none;
|
|
border-radius: var(--r-2);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.2px;
|
|
transition: transform 120ms var(--ease-standard),
|
|
box-shadow 120ms var(--ease-standard),
|
|
background 120ms var(--ease-standard);
|
|
}
|
|
.btn:hover { transform: translateY(-1px); }
|
|
.btn:active { transform: translateY(0); }
|
|
.btn-primary {
|
|
background: var(--g-cyan);
|
|
color: #04111F;
|
|
box-shadow: var(--glow-cyan);
|
|
}
|
|
.btn-secondary {
|
|
background: transparent;
|
|
color: var(--c-sand);
|
|
border: 1px solid var(--c-iron);
|
|
}
|
|
.btn-secondary:hover { background: var(--c-steel); }
|
|
.btn-ghost {
|
|
background: transparent;
|
|
color: var(--c-cyan);
|
|
min-width: 0;
|
|
padding: 8px 12px;
|
|
}
|
|
.btn-danger {
|
|
background: var(--g-emergency);
|
|
color: var(--c-foam);
|
|
box-shadow: var(--glow-emergency);
|
|
}
|
|
.btn-icon {
|
|
min-width: 0;
|
|
padding: 8px;
|
|
width: 36px;
|
|
height: 36px;
|
|
background: transparent;
|
|
border: 1px solid var(--c-iron);
|
|
border-radius: var(--r-2);
|
|
color: var(--c-sand);
|
|
}
|
|
.btn-icon:hover { background: var(--c-steel); }
|
|
|
|
/* ---- Badges ---- */
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 10px;
|
|
border-radius: var(--r-pill);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.6px;
|
|
text-transform: uppercase;
|
|
}
|
|
.badge-emergency { background: var(--c-emergency); color: #FFFFFF; box-shadow: inset 0 0 0 1px #FF8090; }
|
|
.badge-high { background: var(--c-high); color: #04111F; box-shadow: inset 0 0 0 1px #FFA060; }
|
|
.badge-low { background: var(--c-warn); color: #04111F; box-shadow: inset 0 0 0 1px #FFCB60; }
|
|
.badge-info { background: var(--c-info); color: #04111F; box-shadow: inset 0 0 0 1px #8DDBF2; }
|
|
.badge-ok { background: var(--c-ok); color: #04111F; box-shadow: inset 0 0 0 1px #5BEFB8; }
|
|
.badge-muted { background: var(--c-steel); color: var(--c-fog); }
|
|
|
|
/* ---- Tag (chip) ---- */
|
|
.chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 12px;
|
|
background: var(--c-steel);
|
|
border: 1px solid var(--c-iron);
|
|
border-radius: var(--r-pill);
|
|
font-size: 12px;
|
|
color: var(--c-sand);
|
|
}
|
|
|
|
/* ---- Pulse animation for active critical alarms ---- */
|
|
@keyframes pulseEmergency {
|
|
0%, 100% { box-shadow: var(--glow-emergency); }
|
|
50% { box-shadow: 0 0 48px rgba(255,59,71,0.85); }
|
|
}
|
|
.pulse-emergency { animation: pulseEmergency 1200ms ease-in-out infinite; }
|
|
|
|
@keyframes pulseWarn {
|
|
0%, 100% { box-shadow: var(--glow-warn); }
|
|
50% { box-shadow: 0 0 40px rgba(255,176,32,0.7); }
|
|
}
|
|
.pulse-warn { animation: pulseWarn 1600ms ease-in-out infinite; }
|
|
|
|
/* ---- Dot indicator ---- */
|
|
.dot {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--c-fog);
|
|
}
|
|
.dot.ok { background: var(--c-ok); box-shadow: 0 0 8px rgba(0,224,138,0.6); }
|
|
.dot.warn { background: var(--c-warn); box-shadow: 0 0 8px rgba(255,176,32,0.6); }
|
|
.dot.emergency {
|
|
background: var(--c-emergency);
|
|
box-shadow: 0 0 12px rgba(255,59,71,0.8);
|
|
animation: pulseEmergency 1200ms ease-in-out infinite;
|
|
}
|
|
.dot.cyan { background: var(--c-cyan); box-shadow: 0 0 8px rgba(0,217,255,0.6); }
|
|
|
|
/* ---- App shell common ---- */
|
|
.app-root {
|
|
position: relative;
|
|
z-index: 1;
|
|
min-height: 100vh;
|
|
}
|