feat: Telegram fleet alerts, forge sigil scramble, UI polish, agent ops
- Calibrate: per-event Telegram/SMTP toggles, test notification, chat ID help - Notify on agent connect/reconnect, offline/hashrate/rejection, forge complete - Sigil scramble post-forge uniquification and Dispense Reveal ceremony - Full system check, desktop push, BITS/host-binary persistence, Path Tracer - Dashboard/Crucible visual polish, haptics, sacred geometry, mobile nav - README documents alerts, sigil scramble, and pack-usb workflow - USB bundle repacked via pack-usb.bat (AetherForge.exe + synced agent source)
This commit is contained in:
AetherForge
179
server/web/src/styles/mobile.css
Normal file
179
server/web/src/styles/mobile.css
Normal file
@@ -0,0 +1,179 @@
|
||||
/* ── iPhone / mobile browser compatibility ───────────────────────────── */
|
||||
|
||||
html {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* Safe areas (notch, home indicator) */
|
||||
@supports (padding: env(safe-area-inset-bottom)) {
|
||||
.mobile-bottom-nav {
|
||||
padding-bottom: calc(0.35rem + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.mobile-top-bar {
|
||||
padding-top: env(safe-area-inset-top);
|
||||
padding-left: max(0.75rem, env(safe-area-inset-left));
|
||||
padding-right: max(0.75rem, env(safe-area-inset-right));
|
||||
}
|
||||
|
||||
.main-with-status--mobile .main-content {
|
||||
padding-left: max(0.75rem, env(safe-area-inset-left));
|
||||
padding-right: max(0.75rem, env(safe-area-inset-right));
|
||||
}
|
||||
}
|
||||
|
||||
/* Prevent iOS Safari zoom on focus (needs ≥16px) */
|
||||
@media (max-width: 768px) {
|
||||
input,
|
||||
select,
|
||||
textarea,
|
||||
.input {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.nav-item,
|
||||
.mobile-bottom-nav-item,
|
||||
button {
|
||||
min-height: 44px;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.cursor-fire-fx {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Reduce GPU load on phones */
|
||||
.ambient-bg,
|
||||
.ambient-bg canvas {
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
.table-wrap,
|
||||
.agents-table-wrap,
|
||||
.crucible-terminal,
|
||||
pre,
|
||||
code {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.table-wrap,
|
||||
.agents-table-wrap {
|
||||
overflow-x: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.system-status-bar {
|
||||
padding: 0.45rem 0.75rem;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.system-status-bar .status-pill:last-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.fleet-toolbar {
|
||||
padding: 0.65rem 0.75rem;
|
||||
}
|
||||
|
||||
.fleet-toolbar-filters {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.fleet-filter-search,
|
||||
.fleet-filter-select {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fleet-bulk-bar {
|
||||
overflow-x: auto;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.fleet-bulk-bar .btn {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.page-header,
|
||||
.deck-hero {
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.page-header h1,
|
||||
.deck-hero h1 {
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
|
||||
.neon-card,
|
||||
.card {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.guide-code-pre {
|
||||
font-size: 0.72rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.modal-overlay,
|
||||
.pt-qr-overlay {
|
||||
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
|
||||
}
|
||||
|
||||
.crucible-layout,
|
||||
.crucible-main,
|
||||
.crucible-sidebar {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.crucible-agent-col {
|
||||
min-width: 0 !important;
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
.builder-grid,
|
||||
.forge-form-grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
|
||||
.topology-map-wrap {
|
||||
min-height: 200px;
|
||||
max-height: 40vh;
|
||||
}
|
||||
|
||||
.hashrate-chart-wrap {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.layout--mobile .sidebar--desktop {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.layout--mobile .main-with-status {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
}
|
||||
|
||||
.layout--mobile .main-with-status .main-content {
|
||||
padding: 0.75rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
429
server/web/src/styles/sacred-geometry.css
Normal file
429
server/web/src/styles/sacred-geometry.css
Normal file
@@ -0,0 +1,429 @@
|
||||
/* Sacred geometry — whimsical knowledge-deck overlays (additive décor) */
|
||||
|
||||
.sacred-layer {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sacred-layer__corner {
|
||||
position: absolute;
|
||||
width: clamp(72px, 11vw, 140px);
|
||||
height: clamp(72px, 11vw, 140px);
|
||||
opacity: 0.14;
|
||||
filter: drop-shadow(0 0 6px rgba(201, 162, 39, 0.25));
|
||||
}
|
||||
|
||||
.sacred-layer__corner svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sacred-layer__corner--tl {
|
||||
top: 4.5rem;
|
||||
left: calc(260px + 0.75rem);
|
||||
animation: sacred-drift-a 90s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.sacred-layer__corner--tr {
|
||||
top: 4.5rem;
|
||||
right: 0.75rem;
|
||||
animation: sacred-drift-b 110s ease-in-out infinite reverse;
|
||||
}
|
||||
|
||||
.sacred-layer__corner--bl {
|
||||
bottom: 1.5rem;
|
||||
left: calc(260px + 0.75rem);
|
||||
animation: sacred-drift-b 100s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.sacred-layer__corner--br {
|
||||
bottom: 1.5rem;
|
||||
right: 0.75rem;
|
||||
animation: sacred-drift-a 85s ease-in-out infinite reverse;
|
||||
}
|
||||
|
||||
.sacred-layer__corner--mid-l {
|
||||
top: 42%;
|
||||
left: calc(260px + 0.25rem);
|
||||
width: clamp(56px, 8vw, 100px);
|
||||
height: clamp(56px, 8vw, 100px);
|
||||
opacity: 0.09;
|
||||
animation: sacred-geo-rotate 200s linear infinite;
|
||||
}
|
||||
|
||||
.sacred-layer__corner--mid-r {
|
||||
top: 38%;
|
||||
right: 0.25rem;
|
||||
width: clamp(56px, 8vw, 100px);
|
||||
height: clamp(56px, 8vw, 100px);
|
||||
opacity: 0.09;
|
||||
animation: sacred-geo-rotate 240s linear infinite reverse;
|
||||
}
|
||||
|
||||
.sacred-layer__keys {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.sacred-key {
|
||||
position: absolute;
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(1.1rem, 2vw, 1.6rem);
|
||||
color: rgba(201, 162, 39, 0.22);
|
||||
text-shadow: 0 0 12px rgba(0, 245, 255, 0.15);
|
||||
animation: sacred-key-glimmer 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.sacred-key--1 { top: 22%; left: calc(260px + 12%); animation-delay: 0s; }
|
||||
.sacred-key--2 { top: 18%; right: 14%; animation-delay: -2s; }
|
||||
.sacred-key--3 { bottom: 28%; left: calc(260px + 18%); animation-delay: -4s; }
|
||||
.sacred-key--4 { bottom: 22%; right: 10%; animation-delay: -1s; }
|
||||
|
||||
.sacred-layer__wisdom-rail {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0.35rem;
|
||||
transform: translateY(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.2em;
|
||||
color: rgba(201, 162, 39, 0.16);
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: mixed;
|
||||
}
|
||||
|
||||
.sacred-layer__wisdom-rail span {
|
||||
animation: sacred-key-glimmer 12s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.sacred-layer__wisdom-rail span:nth-child(2) { animation-delay: -3s; color: rgba(0, 245, 255, 0.14); }
|
||||
.sacred-layer__wisdom-rail span:nth-child(3) { animation-delay: -6s; }
|
||||
.sacred-layer__wisdom-rail span:nth-child(4) { animation-delay: -9s; color: rgba(255, 176, 32, 0.14); }
|
||||
|
||||
/* Main content area — subtle hex veil */
|
||||
.main-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.main-content::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
opacity: 0.045;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%23c9a227' stroke-width='0.35'%3E%3Cpolygon points='28,2 54,16 54,44 28,58 2,44 2,16'/%3E%3Cpolygon points='28,42 54,56 54,84 28,98 2,84 2,56'/%3E%3C/g%3E%3C/svg%3E");
|
||||
background-size: 56px 100px;
|
||||
animation: sacred-hex-scroll 120s linear infinite;
|
||||
}
|
||||
|
||||
.main-content > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.page-header--sacred {
|
||||
position: relative;
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.page-header--sacred::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(201, 162, 39, 0.5) 15%,
|
||||
rgba(0, 245, 255, 0.35) 50%,
|
||||
rgba(201, 162, 39, 0.5) 85%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.page-header--sacred .page-header-sacred-motif {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
opacity: 0.2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Neon card corner watermarks */
|
||||
.neon-card {
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.neon-card-sacred {
|
||||
position: absolute;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
opacity: 0.16;
|
||||
}
|
||||
|
||||
.neon-card-sacred svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.neon-card-sacred--tl { top: 6px; left: 6px; }
|
||||
.neon-card-sacred--br { bottom: 6px; right: 6px; opacity: 0.12; animation: sacred-geo-rotate 180s linear infinite; }
|
||||
.neon-card-sacred--tr {
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
/* Session gate — vault of keys */
|
||||
.session-gate {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.session-gate::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -20%;
|
||||
background:
|
||||
radial-gradient(ellipse 40% 35% at 20% 30%, rgba(0, 245, 255, 0.06), transparent 55%),
|
||||
radial-gradient(ellipse 35% 40% at 80% 70%, rgba(255, 45, 166, 0.05), transparent 55%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.session-gate-sacred-ring {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: min(90vw, 520px);
|
||||
height: min(90vw, 520px);
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 0.1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.session-gate-sacred-ring svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
animation: sacred-geo-rotate 160s linear infinite;
|
||||
}
|
||||
|
||||
.session-gate-keys {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.session-gate-key {
|
||||
position: absolute;
|
||||
width: clamp(40px, 8vw, 72px);
|
||||
height: clamp(40px, 8vw, 72px);
|
||||
opacity: 0.12;
|
||||
}
|
||||
|
||||
.session-gate-key--tl { top: 8%; left: 8%; animation: sacred-drift-a 70s ease-in-out infinite; }
|
||||
.session-gate-key--br { bottom: 10%; right: 8%; animation: sacred-drift-b 80s ease-in-out infinite reverse; }
|
||||
|
||||
.session-gate-card {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.session-gate-whisper {
|
||||
font-family: var(--font-tech);
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.28em;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
color: rgba(201, 162, 39, 0.35);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* Sidebar knowledge sigil */
|
||||
.sidebar-sacred-sigil {
|
||||
position: absolute;
|
||||
bottom: 5.5rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
opacity: 0.11;
|
||||
pointer-events: none;
|
||||
animation: sacred-geo-rotate 300s linear infinite;
|
||||
}
|
||||
|
||||
.sidebar-sacred-sigil svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Ambient extra corners */
|
||||
.ambient-geo-corner {
|
||||
position: absolute;
|
||||
width: min(22vw, 280px);
|
||||
height: min(22vw, 280px);
|
||||
opacity: 0.06;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ambient-geo-corner svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ambient-geo-corner--tl {
|
||||
top: 8%;
|
||||
left: calc(260px + 2%);
|
||||
animation: sacred-geo-rotate 400s linear infinite;
|
||||
}
|
||||
|
||||
.ambient-geo-corner--br {
|
||||
bottom: 6%;
|
||||
right: 3%;
|
||||
animation: sacred-geo-rotate 320s linear infinite reverse;
|
||||
}
|
||||
|
||||
.ambient-geo-hex-veil {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0.035;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='83' viewBox='0 0 48 83'%3E%3Cpath d='M24 1 L47 14 L47 42 L24 55 L1 42 L1 14 Z' fill='none' stroke='%23c9a227' stroke-width='0.4'/%3E%3Cpath d='M24 28 L47 41 L47 69 L24 82 L1 69 L1 41 Z' fill='none' stroke='%2300f5ff' stroke-width='0.25' opacity='0.6'/%3E%3C/svg%3E");
|
||||
background-size: 48px 83px;
|
||||
}
|
||||
|
||||
.nav-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0.35rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
opacity: 0;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12,2 22,8 22,16 12,22 2,16 2,8' fill='none' stroke='%23c9a227' stroke-width='1'/%3E%3C/svg%3E");
|
||||
background-size: contain;
|
||||
transition: opacity 0.25s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.nav-item:hover::before,
|
||||
.nav-item.active::before {
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
/* Page heroes — command deck titles */
|
||||
.deck-hero {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.deck-hero::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
opacity: 0.12;
|
||||
pointer-events: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23c9a227' stroke-width='0.2' opacity='0.8'%3E%3Ccircle cx='50' cy='50' r='32'/%3E%3Cpolygon points='50,18 62,42 50,50 38,42'/%3E%3C/g%3E%3C/svg%3E");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.section-title.font-display,
|
||||
.deck-hero h1 {
|
||||
text-shadow: 0 0 24px rgba(201, 162, 39, 0.08);
|
||||
}
|
||||
|
||||
.command-deck .neon-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
opacity: 0.04;
|
||||
background: radial-gradient(circle at 100% 0%, rgba(0, 245, 255, 0.2), transparent 45%),
|
||||
radial-gradient(circle at 0% 100%, rgba(255, 176, 32, 0.15), transparent 40%);
|
||||
}
|
||||
|
||||
@keyframes sacred-drift-a {
|
||||
0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
||||
50% { transform: translate(6px, -8px) rotate(6deg); }
|
||||
}
|
||||
|
||||
@keyframes sacred-drift-b {
|
||||
0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
||||
50% { transform: translate(-8px, 6px) rotate(-5deg); }
|
||||
}
|
||||
|
||||
@keyframes sacred-key-glimmer {
|
||||
0%, 100% { opacity: 0.14; filter: blur(0); }
|
||||
50% { opacity: 0.32; filter: blur(0.3px); }
|
||||
}
|
||||
|
||||
@keyframes sacred-hex-scroll {
|
||||
from { background-position: 0 0; }
|
||||
to { background-position: 56px 100px; }
|
||||
}
|
||||
|
||||
@keyframes sacred-geo-rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* mid-l/r corners need rotate on child */
|
||||
.sacred-layer__corner--mid-l,
|
||||
.sacred-layer__corner--mid-r {
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.sacred-layer__corner--tl,
|
||||
.sacred-layer__corner--bl,
|
||||
.sacred-layer__corner--mid-l {
|
||||
left: 0.5rem;
|
||||
}
|
||||
|
||||
.ambient-geo-corner--tl {
|
||||
left: 2%;
|
||||
}
|
||||
|
||||
.sacred-key--1,
|
||||
.sacred-key--3 {
|
||||
left: 8%;
|
||||
}
|
||||
|
||||
.sacred-layer__wisdom-rail {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.sacred-layer__corner,
|
||||
.sacred-key,
|
||||
.sacred-layer__wisdom-rail span,
|
||||
.neon-card-sacred--br,
|
||||
.session-gate-sacred-ring,
|
||||
.session-gate-key,
|
||||
.sidebar-sacred-sigil,
|
||||
.ambient-geo-corner,
|
||||
.ambient-sacred-geo,
|
||||
.ambient-sparkle,
|
||||
.main-content::before {
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
417
server/web/src/styles/visual-polish.css
Normal file
417
server/web/src/styles/visual-polish.css
Normal file
@@ -0,0 +1,417 @@
|
||||
/**
|
||||
* Visual polish layer — additive overrides only.
|
||||
* Loaded last; does not replace steampunk-theme or sacred-geometry.
|
||||
*/
|
||||
|
||||
/* ── Depth & atmosphere ───────────────────────────────────────────────────── */
|
||||
#root {
|
||||
min-height: 100vh;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
body {
|
||||
background:
|
||||
radial-gradient(ellipse 120% 80% at 50% -30%, rgba(0, 245, 255, 0.07), transparent 55%),
|
||||
radial-gradient(ellipse 90% 60% at 100% 50%, rgba(255, 45, 166, 0.04), transparent 50%),
|
||||
radial-gradient(ellipse 70% 50% at 0% 80%, rgba(201, 162, 39, 0.06), transparent 45%),
|
||||
var(--bg-void);
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: rgba(0, 245, 255, 0.25);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--brass-light);
|
||||
transition: color 0.2s ease, text-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--neon-cyan);
|
||||
text-shadow: 0 0 12px rgba(0, 245, 255, 0.35);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* ── Main shell ───────────────────────────────────────────────────────────── */
|
||||
.main-with-status {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.main-with-status::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 260px;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
z-index: 50;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(201, 162, 39, 0.35) 15%,
|
||||
rgba(0, 245, 255, 0.5) 50%,
|
||||
rgba(255, 45, 166, 0.25) 85%,
|
||||
transparent
|
||||
);
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.layout--mobile .main-with-status::before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: 2rem 2.5rem 3rem;
|
||||
}
|
||||
|
||||
/* ── Page chrome ──────────────────────────────────────────────────────────── */
|
||||
.page,
|
||||
.page.fade-in {
|
||||
animation: af-page-in 0.55s cubic-bezier(0.23, 1, 0.32, 1) both;
|
||||
}
|
||||
|
||||
@keyframes af-page-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.page-header h1,
|
||||
.page > h1.font-display {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(1.35rem, 2.5vw, 1.75rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
background: linear-gradient(
|
||||
105deg,
|
||||
var(--brass-light) 0%,
|
||||
var(--text-primary) 35%,
|
||||
var(--neon-cyan) 70%,
|
||||
var(--brass) 100%
|
||||
);
|
||||
background-size: 200% auto;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
animation: af-title-shimmer 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes af-title-shimmer {
|
||||
0%,
|
||||
100% {
|
||||
background-position: 0% center;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% center;
|
||||
}
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid rgba(201, 162, 39, 0.12);
|
||||
margin-bottom: 1.75rem;
|
||||
}
|
||||
|
||||
.deck-hero h1 {
|
||||
filter: drop-shadow(0 0 28px rgba(201, 162, 39, 0.15));
|
||||
}
|
||||
|
||||
.deck-eyebrow {
|
||||
text-shadow: 0 0 20px rgba(201, 162, 39, 0.25);
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
color: var(--text-secondary);
|
||||
letter-spacing: 0.02em;
|
||||
max-width: 52rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.deck-hero-status {
|
||||
border-radius: 6px;
|
||||
backdrop-filter: blur(12px);
|
||||
box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.section h2,
|
||||
.detail-section h3 {
|
||||
font-family: var(--font-tech);
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.8rem;
|
||||
color: var(--brass-light);
|
||||
}
|
||||
|
||||
.header-count,
|
||||
.header-status {
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
/* ── Cards & panels ───────────────────────────────────────────────────────── */
|
||||
.card,
|
||||
.neon-card {
|
||||
border-radius: 6px;
|
||||
transition:
|
||||
transform 0.35s cubic-bezier(0.23, 1, 0.32, 1),
|
||||
box-shadow 0.35s ease,
|
||||
border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.neon-card:hover,
|
||||
.card:hover {
|
||||
transform: translateY(-3px);
|
||||
border-color: rgba(201, 162, 39, 0.45);
|
||||
}
|
||||
|
||||
.neon-card-cyan:hover {
|
||||
border-color: rgba(0, 245, 255, 0.45);
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.stat-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: auto 0 0 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.stat-card:hover::after {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
text-shadow: 0 0 24px rgba(0, 245, 255, 0.12);
|
||||
}
|
||||
|
||||
.stat-value.hashrate,
|
||||
.neon-glow-cyan {
|
||||
text-shadow: 0 0 20px rgba(0, 245, 255, 0.35);
|
||||
}
|
||||
|
||||
.neon-glow-gold,
|
||||
.neon-glow-amber {
|
||||
text-shadow: 0 0 18px rgba(255, 176, 32, 0.35);
|
||||
}
|
||||
|
||||
.neon-glow-purple {
|
||||
text-shadow: 0 0 18px rgba(178, 75, 243, 0.35);
|
||||
}
|
||||
|
||||
/* ── Buttons ───────────────────────────────────────────────────────────────── */
|
||||
.btn {
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
box-shadow 0.25s ease,
|
||||
border-color 0.2s ease,
|
||||
background 0.2s ease;
|
||||
}
|
||||
|
||||
.btn:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.45;
|
||||
filter: grayscale(0.3);
|
||||
}
|
||||
|
||||
.crucible-op-btn,
|
||||
.agent-action-btn,
|
||||
.button {
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
box-shadow 0.2s ease,
|
||||
border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.crucible-op-btn:hover:not(:disabled),
|
||||
.agent-action-btn:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
/* ── Forms ─────────────────────────────────────────────────────────────────── */
|
||||
.input,
|
||||
.select,
|
||||
textarea.input {
|
||||
transition:
|
||||
border-color 0.2s ease,
|
||||
box-shadow 0.25s ease,
|
||||
background 0.2s ease;
|
||||
}
|
||||
|
||||
.input:hover:not(:disabled),
|
||||
.select:hover:not(:disabled) {
|
||||
border-color: rgba(201, 162, 39, 0.5);
|
||||
}
|
||||
|
||||
.checkbox,
|
||||
input[type='checkbox'] {
|
||||
accent-color: var(--neon-cyan);
|
||||
}
|
||||
|
||||
input[type='range'] {
|
||||
accent-color: var(--brass);
|
||||
}
|
||||
|
||||
.label {
|
||||
color: var(--text-secondary);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* ── Sidebar nav ───────────────────────────────────────────────────────────── */
|
||||
.nav-item.active {
|
||||
text-shadow: 0 0 12px rgba(0, 245, 255, 0.4);
|
||||
}
|
||||
|
||||
.nav-item.active .nav-icon svg {
|
||||
filter: drop-shadow(0 0 4px rgba(0, 245, 255, 0.6));
|
||||
}
|
||||
|
||||
/* ── Status & badges ───────────────────────────────────────────────────────── */
|
||||
.status-badge,
|
||||
.latency-badge {
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
.system-status-bar {
|
||||
border-bottom: 1px solid rgba(201, 162, 39, 0.15);
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
/* ── Fleet / agent UI ──────────────────────────────────────────────────────── */
|
||||
.tactical-panel,
|
||||
.agent-detail-panel {
|
||||
border: 1px solid rgba(201, 162, 39, 0.2);
|
||||
border-radius: 6px;
|
||||
background: linear-gradient(165deg, rgba(22, 18, 14, 0.92), rgba(8, 6, 4, 0.96));
|
||||
box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.agent-list-item,
|
||||
.fleet-agent-row {
|
||||
transition:
|
||||
background 0.2s ease,
|
||||
border-color 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.agent-list-item:hover,
|
||||
.fleet-agent-row:hover {
|
||||
box-shadow: inset 0 0 24px rgba(0, 245, 255, 0.04);
|
||||
}
|
||||
|
||||
/* ── Tables & code ─────────────────────────────────────────────────────────── */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th {
|
||||
font-family: var(--font-tech);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--brass-light);
|
||||
border-bottom: 1px solid rgba(201, 162, 39, 0.25);
|
||||
}
|
||||
|
||||
tr:hover td {
|
||||
background: rgba(0, 245, 255, 0.03);
|
||||
}
|
||||
|
||||
pre,
|
||||
.log-viewer,
|
||||
.master-terminal,
|
||||
.terminal-output {
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(201, 162, 39, 0.15);
|
||||
box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: var(--font-tech);
|
||||
font-size: 0.88em;
|
||||
color: var(--neon-cyan);
|
||||
background: rgba(0, 245, 255, 0.06);
|
||||
padding: 0.1em 0.35em;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* ── Session gate ──────────────────────────────────────────────────────────── */
|
||||
.session-gate {
|
||||
background:
|
||||
radial-gradient(ellipse 80% 60% at 50% 20%, rgba(0, 245, 255, 0.1), transparent 55%),
|
||||
radial-gradient(ellipse 60% 50% at 80% 80%, rgba(201, 162, 39, 0.08), transparent 50%),
|
||||
var(--bg-void);
|
||||
}
|
||||
|
||||
.session-gate-card {
|
||||
border-radius: 8px;
|
||||
box-shadow:
|
||||
var(--shadow-panel),
|
||||
0 0 40px rgba(0, 245, 255, 0.08),
|
||||
0 0 80px rgba(201, 162, 39, 0.06);
|
||||
animation: af-page-in 0.7s cubic-bezier(0.23, 1, 0.32, 1) both;
|
||||
}
|
||||
|
||||
.session-gate-card h1 {
|
||||
text-align: center;
|
||||
background: linear-gradient(135deg, var(--brass-light), var(--neon-cyan));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* ── Ambient layer harmony ─────────────────────────────────────────────────── */
|
||||
.ambient-vignette {
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
.ambient-orb {
|
||||
filter: blur(90px);
|
||||
}
|
||||
|
||||
/* ── Scrollbars (firefox) ──────────────────────────────────────────────────── */
|
||||
* {
|
||||
scrollbar-color: var(--brass-dark) var(--bg-deep);
|
||||
}
|
||||
|
||||
/* ── Reduced motion ────────────────────────────────────────────────────────── */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.page,
|
||||
.page-header h1,
|
||||
.page > h1.font-display,
|
||||
.session-gate-card,
|
||||
.neon-card:hover,
|
||||
.card:hover,
|
||||
.btn:hover:not(:disabled) {
|
||||
animation: none !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.page-header h1,
|
||||
.page > h1.font-display {
|
||||
-webkit-text-fill-color: var(--text-primary);
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
187
server/web/src/styles/wealth-deck.css
Normal file
187
server/web/src/styles/wealth-deck.css
Normal file
@@ -0,0 +1,187 @@
|
||||
/* Wealth-deck polish — charts & stats feel like money is moving */
|
||||
|
||||
.chart-row {
|
||||
margin-top: 1.25rem;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.neon-chart-panel.wealth-chart {
|
||||
padding: 1rem 1.1rem 0.85rem;
|
||||
background: linear-gradient(
|
||||
155deg,
|
||||
rgba(28, 22, 12, 0.92) 0%,
|
||||
rgba(10, 8, 6, 0.96) 55%,
|
||||
rgba(18, 28, 22, 0.88) 100%
|
||||
);
|
||||
border: 1px solid rgba(201, 162, 39, 0.28);
|
||||
box-shadow:
|
||||
var(--shadow-panel),
|
||||
inset 0 1px 0 rgba(232, 197, 71, 0.12),
|
||||
0 0 40px rgba(0, 245, 255, 0.04);
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.chart-header-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.65rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.chart-peak {
|
||||
font-family: var(--font-tech);
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--brass-light);
|
||||
padding: 0.2rem 0.5rem;
|
||||
border: 1px solid rgba(201, 162, 39, 0.25);
|
||||
background: rgba(201, 162, 39, 0.06);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.chart-delta {
|
||||
font-family: var(--font-tech);
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.chart-delta.up {
|
||||
color: var(--neon-green);
|
||||
text-shadow: 0 0 10px rgba(57, 255, 20, 0.35);
|
||||
}
|
||||
|
||||
.chart-delta.down {
|
||||
color: var(--accent-red);
|
||||
}
|
||||
|
||||
.chart-live.sample {
|
||||
color: var(--brass-light);
|
||||
text-shadow: 0 0 8px rgba(232, 197, 71, 0.35);
|
||||
}
|
||||
|
||||
.chart-live.blend {
|
||||
color: var(--neon-amber);
|
||||
}
|
||||
|
||||
.chart-empty.wealth-empty {
|
||||
min-height: 280px;
|
||||
background: linear-gradient(180deg, rgba(201, 162, 39, 0.04), transparent);
|
||||
}
|
||||
|
||||
.chart-empty.wealth-empty span {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.chart-preview-spark {
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
height: 48px;
|
||||
opacity: 0.35;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.deck-hero.wealth-hero {
|
||||
border: 1px solid rgba(201, 162, 39, 0.22);
|
||||
background: linear-gradient(
|
||||
120deg,
|
||||
rgba(201, 162, 39, 0.06) 0%,
|
||||
rgba(8, 6, 4, 0.4) 40%,
|
||||
rgba(0, 245, 255, 0.04) 100%
|
||||
);
|
||||
box-shadow: 0 0 48px rgba(201, 162, 39, 0.06);
|
||||
}
|
||||
|
||||
.deck-wealth-strip {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.deck-wealth-pill {
|
||||
padding: 0.65rem 0.85rem;
|
||||
border: 1px solid rgba(201, 162, 39, 0.2);
|
||||
background: rgba(12, 10, 8, 0.65);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.deck-wealth-pill .dwp-label {
|
||||
font-family: var(--font-tech);
|
||||
font-size: 0.62rem;
|
||||
letter-spacing: 0.14em;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.deck-wealth-pill .dwp-value {
|
||||
font-family: var(--font-tech);
|
||||
font-size: 1.05rem;
|
||||
color: var(--brass-light);
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.deck-wealth-pill .dwp-value.mint {
|
||||
color: var(--neon-green);
|
||||
text-shadow: 0 0 12px rgba(57, 255, 20, 0.35);
|
||||
}
|
||||
|
||||
.deck-wealth-pill .dwp-sub {
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-muted);
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
|
||||
.steampunk-stats .stat-card-wrap.wealth-stat {
|
||||
border-color: rgba(201, 162, 39, 0.32);
|
||||
}
|
||||
|
||||
.earnings-estimator.wealth-earnings,
|
||||
.earnings-preview.wealth-earnings {
|
||||
border: 1px solid rgba(255, 176, 32, 0.35);
|
||||
background: linear-gradient(145deg, rgba(40, 28, 8, 0.5), rgba(12, 10, 8, 0.95));
|
||||
}
|
||||
|
||||
.earnings-preview .earnings-usd-day {
|
||||
font-size: 1.35rem;
|
||||
font-weight: 700;
|
||||
color: var(--neon-green);
|
||||
text-shadow: 0 0 16px rgba(57, 255, 20, 0.4);
|
||||
}
|
||||
|
||||
.earnings-preview-badge {
|
||||
font-family: var(--font-tech);
|
||||
font-size: 0.6rem;
|
||||
letter-spacing: 0.18em;
|
||||
color: var(--brass-light);
|
||||
opacity: 0.75;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
.contrib-panel.sample-contrib .contrib-fill {
|
||||
background: linear-gradient(90deg, var(--brass-dark), var(--neon-cyan));
|
||||
box-shadow: 0 0 10px rgba(0, 245, 255, 0.25);
|
||||
}
|
||||
|
||||
.activity-pulse.sample-activity .pulse-row.ok .pulse-dot {
|
||||
box-shadow: 0 0 8px rgba(57, 255, 20, 0.5);
|
||||
}
|
||||
|
||||
.preview-deck-hint {
|
||||
font-family: var(--font-tech);
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.12em;
|
||||
color: rgba(201, 162, 39, 0.55);
|
||||
text-align: center;
|
||||
margin: 0.5rem 0 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.deck-wealth-strip {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user