/**
* CSS per il contenimento del contenuto HTML della descrizione personalizzata
*
* Includere questo CSS nella pagina pubblica dove viene mostrato il contenuto
* dell'etichetta (es. nella sezione o in un file CSS separato)
*/
/* Wrapper principale - contiene tutto */
.descrizione-personalizzata-wrapper {
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
word-wrap: break-word;
overflow-wrap: break-word;
padding: 15px;
border-radius: 8px;
box-sizing: border-box;
}
/* Contenuto interno */
.descrizione-personalizzata-content {
max-width: 100%;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
font-size: 14px;
line-height: 1.6;
}
/* Tutti gli elementi all'interno devono rispettare il contenitore */
.descrizione-personalizzata-content * {
max-width: 100%;
box-sizing: border-box;
}
/* ========================================
TABELLE - Rispetta stili inline di TinyMCE
======================================== */
/* .descrizione-personalizzata-content table {
max-width: 100%;
table-layout: auto;
border-collapse: collapse;
word-wrap: break-word;
overflow-wrap: break-word;
margin: 10px 0;
}
/* Celle tabella - solo padding di fallback
.descrizione-personalizzata-content td,
.descrizione-personalizzata-content th {
padding: 8px 12px;
vertical-align: top;
word-wrap: break-word;
overflow-wrap: break-word;
} */
/* ========================================
IMMAGINI
======================================== */
.descrizione-personalizzata-content img {
max-width: 100%;
height: auto;
display: block;
margin: 10px auto;
}
/* ========================================
LINK
======================================== */
.descrizione-personalizzata-content a {
word-break: break-word;
color: #007bff;
text-decoration: underline;
}
.descrizione-personalizzata-content a:hover {
color: #0056b3;
}
/* ========================================
TESTO E PARAGRAFI
======================================== */
.descrizione-personalizzata-content p {
margin: 10px 0;
word-wrap: break-word;
overflow-wrap: break-word;
}
/* ========================================
LISTE
======================================== */
.descrizione-personalizzata-content ul,
.descrizione-personalizzata-content ol {
margin: 10px 0;
padding-left: 25px;
}
.descrizione-personalizzata-content li {
margin-bottom: 5px;
}
/* ========================================
INTESTAZIONI
======================================== */
.descrizione-personalizzata-content h1,
.descrizione-personalizzata-content h2,
.descrizione-personalizzata-content h3,
.descrizione-personalizzata-content h4,
.descrizione-personalizzata-content h5,
.descrizione-personalizzata-content h6 {
margin: 15px 0 10px 0;
font-weight: bold;
line-height: 1.3;
word-wrap: break-word;
}
.descrizione-personalizzata-content h1 { font-size: 24px; }
.descrizione-personalizzata-content h2 { font-size: 20px; }
.descrizione-personalizzata-content h3 { font-size: 18px; }
.descrizione-personalizzata-content h4 { font-size: 16px; }
.descrizione-personalizzata-content h5 { font-size: 14px; }
.descrizione-personalizzata-content h6 { font-size: 12px; }
/* ========================================
ALTRI ELEMENTI
======================================== */
/* Linea orizzontale */
.descrizione-personalizzata-content hr {
border: 0;
border-top: 1px solid #ccc;
margin: 15px 0;
}
/* Citazioni */
.descrizione-personalizzata-content blockquote {
border-left: 3px solid #ccc;
margin: 10px 0 10px 20px;
padding-left: 15px;
color: #666;
font-style: italic;
}
/* Preformattato e codice */
.descrizione-personalizzata-content pre,
.descrizione-personalizzata-content code {
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word;
overflow-x: auto;
background-color: #f5f5f5;
padding: 2px 5px;
border-radius: 3px;
font-family: 'Courier New', Courier, monospace;
}
/* ========================================
RESPONSIVE
======================================== */
@media (max-width: 768px) {
.descrizione-personalizzata-wrapper {
padding: 10px;
}
.descrizione-personalizzata-content {
font-size: 13px;
}
.descrizione-personalizzata-content h1 { font-size: 20px; }
.descrizione-personalizzata-content h2 { font-size: 18px; }
.descrizione-personalizzata-content h3 { font-size: 16px; }
}