/* * PLATFORM-DASHBOARD-002 — shell rinnovata: eliminazione della topbar * nera, sidebar modernizzata, texture di sfondo, sistema di ombre al * posto dei bordi. Tutto scoperto sotto ".v2-platform-dash" * (impostata sul solo da platform_dashboard_base.html): nessuna * di queste regole puo' mai raggiungere app_base.html (dashboard * legacy), che non porta quella classe — ne' i file condivisi * app-shell.css/navigation.css vengono toccati, solo sovrascritti qui * con selettori piu' specifici. */ .v2-platform-dash { --pd-shadow-sm: 0 1px 2px rgba(15, 36, 64, 0.06); --pd-shadow-md: 0 6px 20px rgba(15, 36, 64, 0.08); --pd-shadow-lg: 0 16px 40px rgba(15, 36, 64, 0.12); --pd-radius-lg: 20px; --pd-ease: cubic-bezier(0.22, 1, 0.36, 1); /* PLATFORM-DASHBOARD-003: palette fissa e permanente delle serie del grafico economia, riusata identica in legenda/tooltip/assi/KPI/ marker (vincolo esplicito del task). Blu/turchese/oro gia' esistenti come token; viola/verde sono nuovi, scoperti qui (mai in tokens.css condiviso con la dashboard legacy). */ --pd-color-prezzo: var(--v2-blue); --pd-color-pool: var(--v2-mint); --pd-color-supply: var(--v2-gold); --pd-color-volume: #8b5cf6; --pd-color-partecipanti: #22c55e; } html[data-theme="dark"] .v2-platform-dash, html:not([data-theme]) .v2-platform-dash { --pd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28); --pd-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.32); --pd-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.4); } @media (prefers-reduced-motion: reduce) { .v2-platform-dash * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* --- Texture di sfondo, quasi invisibile: simboli matematici/economici (Δ Σ ∞ % ↗), MAI simboli crypto/valuta. Due varianti (chiaro/scuro), opacita' bassissima incorporata direttamente nell'SVG (fill-opacity), non un elemento DOM aggiuntivo. */ .v2-platform-dash-shell { background-color: var(--v2-bg); background-repeat: repeat; background-size: 260px 260px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Ctext x='18' y='46' font-family='Georgia,serif' font-size='32' fill='%23e8eef6' fill-opacity='0.05'%3E%CE%94%3C/text%3E%3Ctext x='150' y='96' font-family='Georgia,serif' font-size='26' fill='%23e8eef6' fill-opacity='0.045'%3E%CE%A3%3C/text%3E%3Ctext x='60' y='160' font-family='Georgia,serif' font-size='24' fill='%23e8eef6' fill-opacity='0.04'%3E%E2%88%9E%3C/text%3E%3Ctext x='185' y='205' font-family='Georgia,serif' font-size='24' fill='%23e8eef6' fill-opacity='0.045'%3E%25%3C/text%3E%3Ctext x='14' y='225' font-family='Georgia,serif' font-size='22' fill='%23e8eef6' fill-opacity='0.04'%3E%E2%86%97%3C/text%3E%3Ctext x='210' y='40' font-family='Georgia,serif' font-size='22' fill='%23e8eef6' fill-opacity='0.04'%3E+%3C/text%3E%3C/svg%3E"); } html[data-theme="light"] .v2-platform-dash-shell { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Ctext x='18' y='46' font-family='Georgia,serif' font-size='32' fill='%230f2440' fill-opacity='0.035'%3E%CE%94%3C/text%3E%3Ctext x='150' y='96' font-family='Georgia,serif' font-size='26' fill='%230f2440' fill-opacity='0.03'%3E%CE%A3%3C/text%3E%3Ctext x='60' y='160' font-family='Georgia,serif' font-size='24' fill='%230f2440' fill-opacity='0.028'%3E%E2%88%9E%3C/text%3E%3Ctext x='185' y='205' font-family='Georgia,serif' font-size='24' fill='%230f2440' fill-opacity='0.03'%3E%25%3C/text%3E%3Ctext x='14' y='225' font-family='Georgia,serif' font-size='22' fill='%230f2440' fill-opacity='0.028'%3E%E2%86%97%3C/text%3E%3Ctext x='210' y='40' font-family='Georgia,serif' font-size='22' fill='%230f2440' fill-opacity='0.028'%3E+%3C/text%3E%3C/svg%3E"); } /* --- Header: mai piu' una barra nera amministrativa. Sottile, chiara, trasparente, si confonde con la pagina invece di dominarla. --- */ .v2-platform-dash .v2-app-header { background: transparent; border-bottom: 1px solid var(--v2-border); box-shadow: none; padding: var(--v2-space-2) var(--v2-space-4); backdrop-filter: blur(6px); } .v2-platform-dash .v2-app-header .v2-brand { color: var(--v2-text); font-size: 0.95rem; } .v2-platform-dash .v2-app-header .v2-brand-tag { color: var(--v2-mint); border-color: var(--v2-mint); } .v2-platform-dash .v2-mobile-toggle { border-color: var(--v2-border); } .v2-platform-dash .v2-hamburger, .v2-platform-dash .v2-hamburger::before, .v2-platform-dash .v2-hamburger::after { background: var(--v2-text); } /* I trigger economia/wallet/account erano pensati per sfondo navy (--v2-nav-*): sotto l'header chiaro rinnovato servono le variabili di testo normali, altrimenti risulterebbero illeggibili (quasi bianco su bianco). */ .v2-platform-dash .v2-platform-selector-trigger, .v2-platform-dash .v2-account-trigger { border-color: var(--v2-border); color: var(--v2-text); } .v2-platform-dash .v2-platform-selector-trigger:hover, .v2-platform-dash .v2-platform-selector-trigger:focus-visible, .v2-platform-dash .v2-account-trigger:hover, .v2-platform-dash .v2-account-trigger:focus-visible { background: var(--v2-bg); } .v2-platform-dash .v2-platform-selector-label { color: var(--v2-text-soft); } .v2-platform-dash .v2-platform-selector-value, .v2-platform-dash .v2-account-username { color: var(--v2-text); } .v2-platform-dash .v2-account-chevron { border-color: var(--v2-text-soft); } .v2-platform-selector { position: relative; min-width: 0; } .v2-platform-selector-trigger { display: flex; align-items: center; gap: var(--v2-space-2); background: transparent; border: 1px solid var(--v2-navy-700); border-radius: 999px; padding: 4px 12px; color: var(--v2-nav-text); cursor: pointer; font-size: 0.85rem; font-family: inherit; min-width: 0; max-width: 180px; transition: background 150ms var(--pd-ease), border-color 150ms var(--pd-ease); } .v2-platform-selector-trigger:hover, .v2-platform-selector-trigger:focus-visible { background: var(--v2-nav-hover-bg); outline: none; } .v2-platform-selector-trigger:focus-visible { box-shadow: 0 0 0 2px var(--v2-mint); } .v2-platform-selector-trigger[aria-expanded="true"] { background: var(--v2-nav-hover-bg); border-color: var(--v2-mint); } .v2-platform-selector-label { color: var(--v2-nav-text-muted); font-weight: 600; white-space: nowrap; } .v2-platform-selector-value { color: var(--v2-nav-text); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-platform-selector-panel { position: absolute; left: 0; top: calc(100% + 8px); min-width: 260px; max-width: 320px; background: var(--v2-surface); border: none; border-radius: var(--v2-radius); box-shadow: var(--pd-shadow-lg); padding: var(--v2-space-2); z-index: 30; animation: pd-pop-in 160ms var(--pd-ease); } .v2-platform-selector-panel-header { padding: var(--v2-space-2) var(--v2-space-3); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--v2-text-soft); } .v2-platform-selector-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 260px; overflow-y: auto; } .v2-platform-selector-item { display: block; width: 100%; text-align: left; padding: var(--v2-space-2) var(--v2-space-3); border-radius: var(--v2-radius-sm); border: none; background: transparent; color: var(--v2-text); font-size: 0.9rem; cursor: pointer; font-family: inherit; text-decoration: none; transition: background 120ms var(--pd-ease); } .v2-platform-selector-item:hover, .v2-platform-selector-item:focus-visible { background: var(--v2-bg); outline: none; } .v2-platform-selector-item.is-active { background: var(--v2-nav-active-bg, rgba(73, 227, 194, 0.16)); color: var(--v2-mint); font-weight: 700; } .v2-platform-selector-item-meta { display: block; font-size: 0.75rem; color: var(--v2-text-soft); } .v2-platform-selector-empty { padding: var(--v2-space-2) var(--v2-space-3); color: var(--v2-text-soft); font-size: 0.85rem; } .v2-platform-selector-panel-footer { border-top: 1px solid var(--v2-border); margin-top: var(--v2-space-2); padding-top: var(--v2-space-2); display: flex; flex-direction: column; gap: var(--v2-space-2); } /* TASK-CLAUDE-NAVIGATION-WALLET-ACCOUNT-FINAL-002: voce senza pagina reale ancora disponibile, mai un link verso il Protocol Lab. */ .v2-platform-selector-panel-footer .is-disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; text-align: center; } .v2-platform-selector-create-form { display: flex; flex-direction: column; gap: var(--v2-space-2); margin-top: var(--v2-space-2); padding-top: var(--v2-space-2); border-top: 1px solid var(--v2-border); } /* CORREZIONE (stesso bug gia' visto in questa sessione): una regola d'autore con "display" vince sempre su [hidden]{display:none} dello user-agent stylesheet — senza questa riga il form restava visibile anche da chiuso. */ .v2-platform-selector-create-form[hidden] { display: none; } .v2-platform-selector-create-form input { width: 100%; padding: var(--v2-space-2) var(--v2-space-3); border: 1px solid var(--v2-border); border-radius: var(--v2-radius-sm); font: inherit; } .v2-platform-selector-create-actions { display: flex; gap: var(--v2-space-2); } .v2-platform-selector-create-error { color: #b3261e; font-size: 0.82rem; margin: 0; } /* Un solo wallet: nulla da "cambiare" — elenco nascosto, il pannello resta utile solo per creare un altro wallet. */ .v2-platform-selector.is-compact .v2-platform-selector-list, .v2-platform-selector.is-compact .v2-platform-selector-panel-header { display: none; } @keyframes pd-pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 640px) { .v2-app-header { flex-wrap: wrap; row-gap: var(--v2-space-2); } .v2-platform-selector-label { display: none; } .v2-platform-selector-trigger { max-width: 120px; padding: 4px 8px; } .v2-platform-selector-value { max-width: 84px; } } /* --- Sidebar modernizzata: meno "effetto Bootstrap", piu' aria, ombra al posto del bordo destro netto, gruppi con toggle discreto. --- */ .v2-platform-dash .v2-app-sidebar { background: var(--v2-navy-800); border-right: none; box-shadow: var(--pd-shadow-md); padding: var(--v2-space-4) var(--v2-space-3); gap: var(--v2-space-3); } .v2-platform-dash .v2-sidebar-group { display: grid; gap: 2px; } .v2-platform-dash .v2-sidebar-group-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: transparent; border: none; cursor: pointer; padding: var(--v2-space-2) var(--v2-space-3) 4px; margin-top: var(--v2-space-1); font-family: inherit; } .v2-platform-dash .v2-sidebar-group-label { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--v2-nav-text-muted); opacity: 0.75; padding: 0; margin: 0; } .v2-platform-dash .v2-sidebar-group-chevron { width: 7px; height: 7px; border-right: 1.5px solid var(--v2-nav-text-muted); border-bottom: 1.5px solid var(--v2-nav-text-muted); transform: rotate(45deg); transition: transform 180ms var(--pd-ease); opacity: 0.6; } .v2-platform-dash .v2-sidebar-group[data-collapsed="true"] .v2-sidebar-group-chevron { transform: rotate(-45deg); } .v2-platform-dash .v2-sidebar-group[data-collapsed="true"] .v2-sidebar-nav { display: none; } .v2-platform-dash .v2-sidebar-nav { gap: 1px; margin-bottom: 0; } .v2-platform-dash .v2-sidebar-link, .v2-platform-dash .v2-sidebar-link-disabled { border-radius: 10px; font-weight: 500; font-size: 0.9rem; padding: 7px var(--v2-space-3); transition: background 140ms var(--pd-ease), transform 140ms var(--pd-ease); } .v2-platform-dash .v2-sidebar-link:hover { transform: translateX(2px); } .v2-platform-dash .v2-sidebar-link.is-active { box-shadow: inset 2px 0 0 var(--v2-mint); } .v2-sidebar-link-disabled { display: block; padding: var(--v2-space-2) var(--v2-space-3); color: var(--v2-nav-text-muted); font-size: 0.95rem; font-weight: 600; opacity: 0.55; cursor: not-allowed; } /* --- Stato vuoto / errore: senza bordo tratteggiato pesante, ombra sospesa come le altre card. --- */ .v2-empty-state { text-align: center; padding: var(--v2-space-5) var(--v2-space-4); border: none; border-radius: var(--pd-radius-lg); background: var(--v2-surface); box-shadow: var(--pd-shadow-md); animation: pd-fade-up 260ms var(--pd-ease) both; } .v2-empty-state-icon { display: block; font-size: 2.2rem; margin-bottom: var(--v2-space-2); } .v2-empty-state-title { margin-bottom: var(--v2-space-2); } .v2-empty-state-desc { color: var(--v2-text-soft); max-width: 52ch; margin: 0 auto var(--v2-space-4); } .v2-empty-state-actions { display: flex; gap: var(--v2-space-2); justify-content: center; flex-wrap: wrap; } .v2-error-state { padding: var(--v2-space-4); border: none; border-radius: var(--v2-radius); background: var(--v2-surface); box-shadow: var(--pd-shadow-sm); color: #d64545; } @keyframes pd-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* TASK-CLAUDE-NAVIGATION-001 — voci di navbar/pannello senza una route reale (es. Marketplace, ancora demo/hardcoded): mostrate ma non cliccabili, mai un link rotto. */ .v2-btn-disabled, .v2-global-header__notification:disabled { opacity: .55; cursor: not-allowed; pointer-events: none; } .v2-platform-footer { padding: 22px 28px; border-top: 1px solid rgba(16, 35, 61, .08); background: rgba(255, 255, 255, .6); } .v2-platform-footer__links { display: flex; flex-wrap: wrap; gap: 10px 24px; max-width: 1200px; margin: 0 auto; } .v2-platform-footer__links a { color: #52606f; text-decoration: none; font-size: .86rem; font-weight: 600; } .v2-platform-footer__links a:hover { color: #172033; text-decoration: underline; } /* TASK-PLATFORM-PRIVATE-001, sezione 11 -- banner condiviso "dati dimostrativi", incluso via demo_data_notice.html su tutte le pagine private non ancora collegate al backend reale. */ .v2-demo-data-notice { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(214, 179, 106, .35); background: rgba(214, 179, 106, .1); color: #6b4e12; } .v2-demo-data-notice__icon { flex-shrink: 0; font-size: 1.1rem; line-height: 1; margin-top: 1px; } .v2-demo-data-notice strong { display: block; font-size: .86rem; margin-bottom: 2px; } .v2-demo-data-notice p { margin: 0; font-size: .84rem; line-height: 1.5; color: #6b4e12; } html[data-theme="dark"] .v2-demo-data-notice { border-color: rgba(214, 179, 106, .3); background: rgba(214, 179, 106, .08); color: #e3c887; } html[data-theme="dark"] .v2-demo-data-notice p { color: #e3c887; } /* TASK-PLATFORM-PRIVATE-001, sezione 8 -- link corretti da href="#" a controlli disabilitati "in integrazione": stesso markup/stile del link reale, solo inerte. Selettore generico, riusabile su tutte le pagine private. */ a.is-disabled, span.is-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }