Nuova tab Guida: manuale d'uso completo dentro l'app
Aggiunta una sezione 'Guida' (icona 📖, hero indaco) con manuale d'uso interno, organizzato in 10 capitoli con sommario sticky a sinistra: - Introduzione, Setup iniziale - Una sezione per ogni tab (Scarica, Video, Upgrade, Metadati, Registra, Impostazioni) - Aggiornamenti - Troubleshooting con tabella di 8 sintomi/cause/fix - Risorse esterne (GitHub, yt-dlp FAQ, BlackHole) UX: - Layout grid 200px (TOC) + content fluido. Su schermi <900px il TOC diventa una row in alto - TOC sticky con highlight del link attivo via IntersectionObserver - Link esterni (data-ext) aperti nel browser di sistema via open_external_url - Hint nella tab Registra ora apre la sezione 'Tab Registra' della guida invece del README su GitHub - Box info/success/warn riusabili, stile <code> verde, <pre> monospace, tabella troubleshooting CSS: - Nuova palette indigo + hero-indigo - Stili .guide-layout, .guide-toc, .g-section, .g-box, .g-table, .kbd, .toc-link.active Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
luzadevandClaude Opus 4.7 committed
1 parent
52002f5184
commit
e56a975b77
3 files changed
+540
-3
No files matched your search
@@ -38,6 +38,10 @@
|
||||
--rec-red-hover: #F87171;
|
||||
--rec-red-dim: #7F1D1D;
|
||||
|
||||
--indigo: #6366F1;
|
||||
--indigo-hover: #818CF8;
|
||||
--indigo-dim: #312E81;
|
||||
|
||||
--red: #E22134;
|
||||
--red-hover: #FF4055;
|
||||
|
||||
@@ -249,6 +253,10 @@ button, input, select, textarea { font-family: inherit; font-size: inherit; }
|
||||
background: linear-gradient(135deg, #DC2626 0%, #7F1D1D 60%, #3F0A0A 100%);
|
||||
}
|
||||
|
||||
.hero-indigo {
|
||||
background: linear-gradient(135deg, #4F46E5 0%, #312E81 60%, #1E1B4B 100%);
|
||||
}
|
||||
|
||||
.hero-content { position: relative; z-index: 2; max-width: 70%; }
|
||||
|
||||
.hero-eyebrow {
|
||||
@@ -264,6 +272,7 @@ button, input, select, textarea { font-family: inherit; font-size: inherit; }
|
||||
.hero-eyebrow.pink { color: var(--pink-hover); }
|
||||
.hero-eyebrow.amber { color: var(--amber-hover); }
|
||||
.hero-eyebrow.red { color: var(--rec-red-hover); }
|
||||
.hero-eyebrow.indigo { color: var(--indigo-hover); }
|
||||
|
||||
.hero-title {
|
||||
font-size: 36px;
|
||||
@@ -1038,3 +1047,212 @@ input[type="number"]::-webkit-inner-spin-button {
|
||||
font-weight: 700;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* ===============================
|
||||
GUIDE
|
||||
=============================== */
|
||||
.guide-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 200px 1fr;
|
||||
gap: 32px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.guide-toc {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
padding: 16px 10px;
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--r-md);
|
||||
max-height: calc(100vh - 80px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.toc-link {
|
||||
color: var(--text-2);
|
||||
text-decoration: none;
|
||||
padding: 8px 12px;
|
||||
border-radius: var(--r-sm);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
transition: background-color 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.toc-link:hover {
|
||||
background: var(--bg-input);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.toc-link.active {
|
||||
background: var(--indigo-dim);
|
||||
color: var(--indigo-hover);
|
||||
}
|
||||
|
||||
.guide-content {
|
||||
min-width: 0; /* evita overflow horizontal */
|
||||
color: var(--text-2);
|
||||
font-size: 14px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.g-section {
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--r-md);
|
||||
padding: 24px 28px;
|
||||
margin-bottom: 18px;
|
||||
scroll-margin-top: 12px;
|
||||
}
|
||||
|
||||
.g-section h2 {
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
color: var(--text);
|
||||
margin-bottom: 10px;
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
|
||||
.g-section h3 {
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
color: var(--text);
|
||||
margin-top: 22px;
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.g-section h4 {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--indigo-hover);
|
||||
margin-top: 16px;
|
||||
margin-bottom: 6px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
|
||||
.g-section p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.g-section ul,
|
||||
.g-section ol {
|
||||
padding-left: 22px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.g-section li {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.g-section strong { color: var(--text); }
|
||||
|
||||
.g-section code {
|
||||
background: var(--bg-input);
|
||||
padding: 2px 7px;
|
||||
border-radius: 4px;
|
||||
font-family: "SF Mono", Menlo, Consolas, monospace;
|
||||
font-size: 12.5px;
|
||||
color: var(--green-hover);
|
||||
}
|
||||
|
||||
.g-section pre {
|
||||
background: var(--bg-card-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-sm);
|
||||
padding: 12px 16px;
|
||||
margin: 10px 0 14px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.g-section pre code {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.g-section a {
|
||||
color: var(--indigo-hover);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
.g-section a:hover {
|
||||
border-bottom-color: var(--indigo-hover);
|
||||
}
|
||||
|
||||
.kbd {
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--bg-input-hover);
|
||||
color: var(--text);
|
||||
padding: 1px 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.g-box {
|
||||
padding: 14px 18px;
|
||||
border-radius: var(--r-sm);
|
||||
margin: 14px 0;
|
||||
font-size: 13.5px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.g-box.info {
|
||||
background: rgba(99, 102, 241, 0.10);
|
||||
border-left: 3px solid var(--indigo);
|
||||
}
|
||||
|
||||
.g-box.success {
|
||||
background: rgba(29, 185, 84, 0.10);
|
||||
border-left: 3px solid var(--green);
|
||||
}
|
||||
|
||||
.g-box.warn {
|
||||
background: rgba(253, 203, 110, 0.10);
|
||||
border-left: 3px solid #FDCB6E;
|
||||
}
|
||||
|
||||
.g-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 12px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.g-table th,
|
||||
.g-table td {
|
||||
padding: 10px 14px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--divider);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.g-table th {
|
||||
color: var(--text);
|
||||
font-weight: 700;
|
||||
font-size: 11.5px;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
background: var(--bg-card-2);
|
||||
}
|
||||
|
||||
.g-table tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.guide-layout { grid-template-columns: 1fr; }
|
||||
.guide-toc {
|
||||
position: static;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
max-height: none;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user