/* --- INIZIO CSS hublist_pages (Ottimizzato e Completo) --- */ /* * ========================================================= * 1. FIX CRITICO PER LO SPEED INDEX & RESET BASE * ========================================================= */ body { margin: 0; min-width: 150px; /* MODIFICA PER IL TEST: FORZA LO STILE CON !important */ /* Manteniamo il percorso assoluto che hai confermato funzionare direttamente */ background: #ffffff url('/images/back.png') repeat left top !important; background-attachment: fixed !important; } /* * ========================================================= * 2. LAYOUT GLOBALE (Centraggio e Massima Larghezza a 1100px) * Questo garantisce che gli elementi principali siano centrati e non superino 1100px. * ========================================================= */ .navbar, .navbar-inner, .navbar-inverse, #page, .breadcrumb, footer, .container-fluid > * { box-sizing: border-box !important; max-width: 1100px !important; width: 100%; margin-left: auto !important; margin-right: auto !important; padding-left: 0; padding-right: 0; } /* * ========================================================= * 3. UTILITY: TRONCAMENTO TESTO (Da completare) * Questa sezione è pronta per le tue classi di utility, ad esempio, * per troncare il testo lungo in una riga con ellissi. * ========================================================= */ .text-truncate-single-line { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; /* Assicura che l'elemento rispetti un limite di larghezza */ display: block; /* Necessario per far funzionare overflow e text-overflow */ } /* Aggiungi altri stili completi qui sotto se necessario... */ /* --- INIZIO CSS hublist_pages (Ottimizzato e Completo) --- */ /* * ========================================================= * 1. FIX CRITICO PER LO SPEED INDEX & RESET BASE * ========================================================= */ body { margin: 0; min-width: 150px; /* BACKGROUND: Mantenuto background-attachment: fixed */ background-attachment: fixed; } /* 2. LAYOUT GLOBALE (Centraggio e Massima Larghezza a 1100px) */ .navbar, .navbar-inner, .navbar-inverse, #page, .breadcrumb, footer, .container-fluid > * { box-sizing: border-box !important; max-width: 1100px !important; width: 100%; margin-left: auto !important; margin-right: auto !important; padding-left: 0; padding-right: 0; } /* 3. UTILITY: TRONCAMENTO TESTO */ .text-truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; } /* 4. ALLINEAMENTO DETTAGLIATO DESKTOP (Larghezze > 992px) */ @media (min-width: 993px) { .navbar-inner { width: 100%; padding-left: 20px !important; padding-right: 20px !important; padding-top: 0 !important; padding-bottom: 0 !important; } #page { padding-top: 20px !important; padding-bottom: 20px !important; padding-left: 15px !important; padding-right: 15px !important; } .hublist-pages th, .hublist-pages td { padding: 9px 8px !important; vertical-align: middle; width: auto !important; } /* Input di ricerca: Larghezza fissa su desktop */ .hublist-search-container .search-hub-input { width: 250px !important; } /* Garantisce che il bottone e l'input siano affiancati e allineati */ .hublist-search-form .search-hub-input { margin-right: 5px; /* Spazio tra input e bottone */ } } /* 5. STILI TABELLA E TRONCAMENTO */ .hublist-pages { width: 100%; max-width: 100% !important; min-width: 650px; } .hublist-pages tbody td { /* Mantenuto per le colonne come Address e Share, ma forzato a normal in media query per Name */ white-space: nowrap; } .hublist-pages tbody td[data-label="Hub Name"] > a .hub-name-text { display: inline-block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* AUMENTO DELLE LARGHEZZE PER SPOSTARE LE COLONNE (Location, Users, Share) */ .hublist-pages .lang-col { width: 30px !important; } .hublist-pages .users-col { width: 120px !important; } .hublist-pages .share-col { width: 120px !important; } /* --- IMPLEMENTAZIONE RESPONSIVE TABLE (SCROLL) --- */ .table-responsive-scroll { width: 100%; overflow-x: auto; margin-bottom: 20px; -webkit-overflow-scrolling: touch; } /* 6. RESPONSIVENESS MOBILE (Media queries <= 992px) */ @media (max-width: 992px) { .navbar, .navbar-inner, .navbar-inverse, #page, .breadcrumb, footer, .container-fluid > * { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } .navbar-inner { padding-left: 10px !important; padding-right: 10px !important; } #page { padding-top: 15px !important; padding-bottom: 15px !important; padding-left: 10px !important; padding-right: 10px !important; } .hublist-pages { min-width: 500px; } .hublist-pages th, .hublist-pages td { padding: 8px 6px !important; font-size: 0.9em; } .hublist-main-data tfoot th, .hublist-main-data tfoot td { min-width: 90px; } .hublist-pages tbody td[data-label="Hub Name"] { white-space: normal; } .hublist-pages tbody td[data-label="Hub Name"] > a .hub-name-text { white-space: normal; text-overflow: clip; } } /* 7. CORREZIONE SEARCH BAR E CLEARFIX */ /* Desktop Default: FORZA la barra di ricerca a destra */ .hublist-search-container { float: right; margin-bottom: 20px; } /* Usato per allineare input e button affiancati */ .hublist-search-form { display: inline-flex; align-items: center; } .search-hub-button { height: 34px; } /* Standard clearfix */ .clearfix:after { content: " "; visibility: hidden; display: block; height: 0; clear: both; } /* Mobile: la barra di ricerca torna a tutta larghezza e flottante a sinistra (o nessuno) */ @media (max-width: 600px) { .hublist-search-container { float: none !important; width: 100% !important; margin-bottom: 15px; } .hublist-search-container form { width: 100%; } .hublist-search-container .search-hub-input { width: 100% !important; margin-right: 0 !important; } /* Il form-inline/flex su mobile forzerà l'input e il bottone a disporsi al 100% se non gestito altrimenti */ .hublist-search-form { display: block; } } /* * ========================================================= * 8. STILI DI BASE PER hublist_pages.php (Sostituzione CSS Inline) * ========================================================= */ /* Allineamenti (Usati per le colonne Utenti/Share/Totali) */ .hub-text-right { text-align: right !important; } .hub-text-center { text-align: center !important; } /* ⭐️ CORREZIONE CROMATICA: Alternanza di colori con specificità elevata ⭐️ */ /* Righe dispari (Row Default) -> #ffffff */ .hublist-main-data tbody tr.hub-row-default, .hublist-main-data tfoot tr.total-page-row.hub-row-default { background-color: #f6f6f6 !important; } /* Righe pari (Row Alt) -> #f6f6f6 */ .hublist-main-data tbody tr.hub-row-alt, .hublist-main-data tfoot tr.total-global-row.hub-row-alt { background-color: #ffffff !important; } /* Colore testo e link */ .hub-cell-name, .hub-cell-address { color: #333 !important; } .hub-name-text, .hub-link-address, .client-link-download { color: #007bff !important; } /* Testo Censurato (rosso e grassetto) */ .abuse-censor-text { color: #ff0000 !important; font-weight: bold !important; } /* Icona Secure (AUMENTATO MARGINE a 6px per separare da Hub Name) */ .hub-icon-secure { display: block; float: right; margin-left: 6px; margin-top: 2px; } /* Icone Clienti Raccomandati */ .client-icon { display: block; width: 24px; height: 24px; } /* Selettore Lingua */ .hublist-language-selector { margin-bottom: 20px; text-align: center; } .hublist-language-list { margin: 0 auto; display: inline-block; } /* Stili Label */ .hub-label { padding: 2px 5px; border-radius: 3px; font-size: 0.75em; font-weight: bold; display: inline-block; margin-right: 5px; line-height: 1; } .hub-online { background-color: #dc3545 !important; color: #ffffff !important; } .hub-offline { background-color: #6c757d !important; color: #ffffff !important; } .hub-new { background-color: #ffc107 !important; color: #343a40 !important; } .hub-banned { background-color: #000000 !important; color: #ffffff !important; } /* --- FINE CSS hublist_pages --- */ /* --- INIZIO CSS page_forum.php --- */ /* Base e Fix di Layout */ .page_forum { width: 100% !important; box-sizing: border-box; } .forum-blocks-container, .posts-list-container, .forum-block-card, .post-block-card, .reply-card { box-sizing: border-box; } /* FIX CHIAVE: Responsiveness per immagini e media nei post e nelle risposte (GLOBALE) */ /* Forziamo tutte le immagini, video e iframe a non superare il 100% della larghezza del loro contenitore */ .post-main-content img, .post-main-content video, .post-main-content iframe, .post-main-content object, .reply-body img, .reply-body video, .reply-body iframe, .reply-body object { max-width: 100% !important; height: auto !important; } /* --- STILI GLOBALI (Link e Footer) --- */ /* Forza tutti i link all'interno del corpo del post e delle risposte ad essere BLU */ .post-main-content a, .reply-body a, .reply-card a, .forum-block-card-link a, .post-block-link a { color: #0000ff !important; } /* Rende i link 'Delete' rossi */ .post-main-content a[href*='action=postdel'], .reply-card a[href*='action=repdel'] { color: #ff0000 !important; } /* 1. STILI PER LISTA FORUM (?do=forum) - MASSIMA COMPATTAZIONE */ .forum-blocks-container { display: flex; flex-wrap: wrap; gap: 15px; row-gap: 50px; margin-top: 15px; margin-bottom: 50px; } .forum-block-column { width: calc((100% - 30px) / 3); min-width: 0; padding: 0; } .forum-block-card-link { text-decoration: none; display: block; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; } .forum-block-card { padding: 4px 8px; border: 1px solid #c0c0c0; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); font-size: 14px; height: 100%; } /* Alternanza colori per i forum (alterna tra le categorie) */ .forum-block-card.block-odd { background-color: #ffffff; } .forum-block-card.block-even { background-color: #f6f6f6; } .forum-block-card-link:hover { transform: scale(1.02); box-shadow: 0 5px 15px rgba(0,0,0,0.2); } /* STILE COMPATTATO PER IL TITOLO DEL GRUPPO */ .forum-block-column .block-group-title { font-size: 14px; font-weight: bold; color: #333; padding: 4px 0; margin: 0 0 10px 0; border-bottom: 1px solid #c0c0c0; } /* COMPONENTI INTERNI CARD PER COMPATTAZIONE */ .forum-block-card .card-title { color: #0000ff; font-size: 15px; font-weight: bold; margin-top: 0; } .forum-block-card .card-description { margin-top: 3px; padding: 3px 0; border-top: 1px solid #e0e0e0; font-size: 10.5px; color: #555; line-height: 1.2; } .forum-block-card .card-stats { padding: 4px 0; border-top: 1px solid #e0e0e0; font-size: 11px; color: #333; } /* 2. STILI PER LISTA POST (?do=forum&id=...) */ .posts-list-container { display: flex; flex-wrap: wrap; gap: 15px; } .post-block-link { text-decoration: none; display: block; /* CORREZIONE PER 4 COLONNE: flex-grow: 0 impedisce l'espansione. La base (calc) forza la larghezza corretta con il gap di 15px. */ flex: 0 1 calc(25% - 11.25px); min-width: 250px; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; } .post-block-card { padding: 12px; border: 1px solid #c0c0c0; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); height: 100%; display: flex; flex-direction: column; justify-content: space-between; min-height: 80px; } /* Alternanza colori per i post */ .post-block-card.post-odd { background-color: #ffffff; } .post-block-card.post-even { background-color: #f6f6f6; } .post-card-title { color: #0000ff; font-size: 14px; font-weight: bold; margin-bottom: 8px; line-height: 1.3; } .post-card-meta { font-size: 12px; color: #333; border-top: 1px solid #e0e0e0; padding-top: 5px; display: flex; justify-content: space-between; } /* 3. STILI PER POST SINGOLO (?do=forum&id=...&post=...) */ .post-main-content { background-color: #ffffff; border: 1px solid #c0c0c0; padding: 15px; border-radius: 4px; margin: 0 0 20px 0 !important; line-height: 1.3; /* FIX CHIAVE 1: Forziamo il wrapping delle parole molto lunghe (es. URL non spezzati) - GLOBALE */ word-wrap: break-word; overflow-wrap: break-word; } /* FIX CHIAVE 2: Applichiamo il wrapping anche al corpo della risposta - GLOBALE */ .reply-body { padding: 0; margin-bottom: 8px; word-wrap: break-word; overflow-wrap: break-word; } /* !!! CORREZIONE PROBLEMA DISTANZA ULTRA-AGRESSSIVA E DEFINITIVA!!! */ .post-main-content > p, .post-main-content > div, .post-main-content > span, .post-main-content > h1, .post-main-content > h2, .post-main-content > h4, .post-main-content > br { margin: 0 !important; padding: 0 !important; line-height: 1.0 !important; } /* Regola specifica per l'elemento generato da [head] (che è un

) */ .post-main-content > h3 { margin: 0 !important; padding-top: 0 !important; padding-bottom: 5px !important; line-height: 1.2 !important; } /* REGOLA SPECIFICA: Rimuove l'ultimo margine inferiore dall'elemento immediatamente prima di una tabella */ .post-main-content > *:has(+ table) { margin-bottom: 0 !important; } /* REGOLA SPECIFICA: Rimuove il margine superiore e inferiore dalla tabella stessa */ .post-main-content > table { /* RIPRISTINO: Rimuoviamo display: block; e overflow-x: auto; da qui, verranno aggiunti nel media query */ margin-top: 0 !important; margin-bottom: 0 !important; } /* !!! FINE CORREZIONE PROBLEMA DISTANZA ULTRA-AGRESSSIVA !!! */ /* Footer Meta del Post Principale */ .post-meta-footer { margin-top: 15px; padding-top: 5px; border-top: 1px solid #c0c0c0; font-size: small; } /* Stili per le Risposte (Replies) */ .reply-card { border: 1px solid #c0c0c0; margin-top: 15px; border-radius: 4px; font-size: 13px; padding: 11px; } /* Alternanza colori per le risposte */ .reply-odd { background-color: #ffffff; } .reply-even { background-color: #f6f6f6; } .reply-title-header { margin-bottom: 8px; padding: 0 0 8px 0; border-bottom: 1px solid #c0c0c0; font-size: 12px; font-weight: bold; color: #0000ff; } .reply-meta-footer { padding: 8px 0 0 0; border-top: 1px solid #c0c0c0; font-size: 11px; } .post-reply-prompt { border: 1px solid #c0c0c0 !important; margin-top: 15px; padding: 10px; font-size: small; background-color: #ffffff !important; border-radius: 4px; } /* 4. STILI PER TABELLE E CODICE DENTRO I POST (BBCODE [table], [code], [pre]) */ /* I blocchi PRE/CODE hanno un overflow auto GIA' da desktop, non devono spezzare le linee */ .post-main-content pre, .reply-body pre { overflow-x: auto; /* Mantiene lo scroll anche su desktop se la linea è lunghissima */ white-space: pre; word-wrap: normal; padding: 10px; border: 1px solid #c0c0c0; background-color: #f8f8f8; } /* Stili base per le celle della tabella (Desktop) */ .post-main-content table, .reply-card table, .page_forum table { width: 100%; border-collapse: collapse; margin: 0 !important; padding: 0 !important; } .post-main-content table tr, .page_forum table tr { padding: 0 !important; margin: 0 !important; line-height: 1.0; } .post-main-content table th, .post-main-content table td, .reply-card table th, .reply-card table td, .page_forum table th, .page_forum table td { padding: 2px 4px !important; border: none; line-height: 1.0; } /* Alternanza colori */ .post-main-content table tr:nth-child(even), .page_forum table tr:nth-child(even) { background-color: #f6f6f6; } .post-main-content table tr:nth-child(odd), .page_forum table tr:nth-child(odd) { background-color: #ffffff; } /* Per le tabelle fuori dai post (es. Last posts), ripristina la spaziatura TH */ .page_forum table:not(.post-main-content table) th { padding: 10px !important; } /* 5. MEDIA QUERIES (Reattività) */ @media (max-width: 768px) { /* 5.1 LAYOUT GENERALE */ .forum-blocks-container { flex-direction: column; row-gap: 15px; margin-bottom: 15px; } .forum-block-column { width: 100%; min-width: 100%; margin-bottom: 10px; } .posts-list-container { flex-direction: column; gap: 10px; } .post-block-link { min-width: 100%; } .post-main-content { padding: 10px; } .reply-card { padding: 10px; } /* 5.2 FIX CHIAVE: SCROLL SOLO PER LE TABELLE SU MOBILE/TABLET */ .post-main-content table, .reply-card table, .page_forum table { /* ABILITA SCROLL SULLE TABELLE LARGHE SOLO SU MOBILE */ display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; /* Rimuoviamo width: 100% per permettere alla tabella di essere più larga del contenitore */ width: auto; min-width: 100%; /* Forziamo un minimo del 100% */ } /* Per evitare che la cella TH/TD si allarghi oltre il necessario quando in modalità block/scroll */ .post-main-content table th, .post-main-content table td, .reply-card table th, .reply-card table td { white-space: nowrap; /* Mantiene la cella su una sola riga (migliore per scroll) */ } } /* --- FINE CSS page_forum.php --- */ /* 🛠️ MODIFICA: Rende TUTTO il testo in grassetto (Richiesta utente precedente) */ body, p, div, span, li, td, a, strong { font-weight: bold !important; } /* 🛠️ MODIFICA CRITICA: Forza i link ad essere blu SOLO all'interno dei contenitori di lavoro e card. */ /* Questo esclude i link del menu principale che non dovrebbero avere questi selettori. */ .work-categories-grid a, .work-category-card a, .work-section-block a, /* Copre anche Changelog, Copyright e License */ .work-file-row a, /* Includiamo anche i link generati nelle descrizioni, commenti, ecc. */ h3.headline a, .custom-table a, div[id] a { /* Selettore per ID generico, utile per commenti e descrizioni non bloccate */ color: blue !important; } /* Stili per diminuire la dimensione dei titoli e delle tabelle */ h3.headline { /* 🛠️ MODIFICA: Dimensione ridotta da 1.3em a 1.2em */ font-size: 1.2em; font-weight: bold; margin-bottom: 10px; } /* Stili per tabelle compatte e zebrate */ .custom-table { font-size: small; /* Font ridotto */ width: 100%; border-collapse: collapse; border: 1px solid #c0c0c0; padding: 11px !important; /* Nuovo padding 11px per il tag table */ } /* Applica il padding 11px alle celle (th, td) per garantire il risultato visivo */ .custom-table th, .custom-table td { padding: 11px !important; /* Nuovo padding 11px */ border: 1px solid #e0e0e0; } .custom-table tr:nth-child(even) { background-color: #f0f0f0; /* Grigio chiarissimo */ } .custom-table tr:nth-child(odd) { background-color: #ffffff; /* Bianco */ } /* Forza la prima riga a essere bianca, utile per le intestazioni */ .custom-table tr:first-child { background-color: #ffffff !important; } /* 🆕 NUOVI STILI PER LISTA FILE (Richiesta padding 10px e colori alternati) */ .work-file-row { border: 1px solid #e0e0e0; /* Bordi sottili tra gli elementi */ padding: 10px; /* Padding richiesto per separare */ margin-bottom: 8px; /* Spazio tra una riga e l'altra */ background-color: #ffffff; /* Default: Bianco */ font-size: small; display: flex; /* Per allineare il contenuto */ justify-content: space-between; align-items: center; } /* Colore alternato richiesto: #f6f6f6 (Grigio chiaro) */ .work-file-row:nth-child(even) { background-color: #f6f6f6; } .work-file-row a { text-decoration: none; } /* --- STILI PER CARD CATEGORIE (Visualizzazione principale) --- */ .work-categories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-top: 15px; } /* 🛠️ MODIFICA: Riduzione in verticale (padding: 18px -> 12px) */ .work-category-card { border: 1px solid #d0d0d0; border-radius: 8px; padding: 12px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); background-color: #ffffff; /* Default */ display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; height: 100%; } /* 🛠️ MODIFICA: Alternanza colori per Card */ .work-categories-grid .work-category-card:nth-child(even) { background-color: #f6f6f6; /* Grigio chiaro */ } .work-categories-grid .work-category-card:nth-child(odd) { background-color: #ffffff; /* Bianco */ } .work-category-card:hover { transform: translateY(-5px); box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15); } .card-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #f0f0f0; padding-bottom: 8px; /* RIDOTTO */ margin-bottom: 8px; /* RIDOTTO */ } /* rimosso color: #1a73e8; perché ora è gestito da a:link globale, ma lo forziamo selettivamente */ .card-header a { font-size: 1.6em; font-weight: bold; text-decoration: none; } .card-icon { max-width: 24px; max-height: 24px; margin-left: 10px; } .card-summary { flex-grow: 1; font-size: 1em; color: #555; margin-bottom: 8px; /* RIDOTTO */ } .card-footer { margin-top: auto; padding-top: 8px; /* RIDOTTO */ border-top: 1px solid #f0f0f0; font-size: small; color: #777; } /* 🛠️ NUOVO STILE: BLOCCHI SEZIONE (Changelog, Copyright, Pages, Files) */ /* 🛠️ MODIFICA: Riduzione in verticale (padding: 15px -> 11px) */ .work-section-block { border: 1px solid #c0c0c0; /* Bordo medio */ border-radius: 8px; /* Arrotondamento per look 'card' */ padding: 11px; /* RIDOTTO a 11px come richiesto */ margin-top: 20px !important; /* Mantenuto */ background-color: #ffffff; /* Default, gestito dalle classi PHP */ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); /* Ombra leggera */ } /* 🛠️ CLASSI PER ALTERNANZA COLORI */ .work-block-even { background-color: #f6f6f6; } .work-block-odd { background-color: #ffffff; } .work-section-block h3.headline { margin-top: 0 !important; /* Rimuove il margin-top 15px interno al blocco */ border-bottom: 2px solid #e0e0e0; /* Separatore sotto il titolo del blocco */ /* 🛠️ MODIFICA: Riduzione padding/margin per ridurre l'altezza del titolo */ padding-bottom: 3px; /* Ridotto da 5px */ margin-bottom: 5px; /* Ridotto da 10px */ color: #333; /* Colore più scuro per il titolo del blocco */ } /* Assicura che la lista Pages abbia un margine ridotto all'interno del blocco */ .work-section-block ul { margin-top: 0; margin-bottom: 0; padding-left: 25px; } /* ❌ RIMOZIONE STILI CHANGELOG-BOX (Per permettere la visualizzazione delle tabelle) */ /* La classe .work-section-block è sufficiente per contenere il contenuto del Changelog. */ /* --- INIZIO CSS page_tools --- */ /* Contenitore Griglia: 3 colonne con spaziamento */ .tools-grid { display: grid; /* Crea colonne che riempiono automaticamente, minimo 250px di larghezza per evitare colonne troppo strette su mobile */ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; /* Spazio tra le card */ margin-top: 20px; } /* Stile per la singola Card/Elemento */ .tool-item { /* Proprietà di base della card */ border: 1px solid #d0d0d0; border-radius: 8px; padding: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.2s, box-shadow 0.2s; /* Animazione per l'hover */ text-align: center; font-weight: bold; } /* Alternanza colori di sfondo (per applicare la logica bianca/f6f6f6) */ .tools-grid .tool-item:nth-child(odd) { background-color: #ffffff; /* Bianco */ } .tools-grid .tool-item:nth-child(even) { background-color: #f6f6f6; /* Grigio chiaro */ } /* Stile Hover */ .tool-item:hover { transform: translateY(-5px); /* Solleva leggermente la card */ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } /* Stile per i link all'interno della card */ .tool-item a { color: #1a73e8; /* Colore link, tipicamente blu/azzurro */ text-decoration: none; display: block; /* Rende l'intera area della card cliccabile */ font-size: 1.1em; } /* Assicura che i link siano blu */ .tools-grid a { color: blue !important; } /* --- FINE CSS page_tools --- */ /* inizio css hub_info */ /** * 1. Responsività Tabelle (per mobile) * Avvolge le tabelle con la classe .hub-table-responsive-wrapper. */ .hub-table-responsive-wrapper { /* Abilita lo scroll orizzontale se la tabella è più larga del contenitore/schermo */ width: 100%; overflow-x: auto; /* Rende lo scroll più fluido sui dispositivi touch di Apple */ -webkit-overflow-scrolling: touch; } /* Assicura che le tabelle all'interno del wrapper abbiano una larghezza minima, forzando lo scroll */ .hub-table-responsive-wrapper table { /* Puoi impostare una larghezza minima se sai che le colonne lo richiedono */ min-width: 500px; } /* Rimuove l'avvolgimento del testo dalle celle se necessario (da usare con cautela) */ .hub-table-responsive-wrapper th, .hub-table-responsive-wrapper td { /* white-space: nowrap; */ } /** * 2. Centratura Logo (classe .hub-logo-container) * Centra il logo e assicura che sia responsive (max-width 100%). */ .hub-logo-container { /* Centra qualsiasi contenuto inline (come l'elemento ) */ text-align: center; } .hub-logo-container img { /* Sovrascrive max-width e max-height inline (1280px/480px) per essere sempre responsive su mobile */ max-width: 100% !important; height: auto !important; /* Mantiene le proporzioni */ /* Assicura la centratura orizzontale dell'immagine stessa (già presente nell'inline style, ma la si ribadisce) */ display: block; margin: 0 auto; } /* fine css hub_info */ /* page_news START: Stili per la pagina News (Card Block Style & Responsive) */ /* ========================================= */ /* --- Contenitore Principale della Pagina --- */ .page-card-wrapper { max-width: 1100px; margin: 20px auto; padding: 0 10px; box-sizing: border-box; } /* --- Layout Generale --- */ h3.headline { font-size: 1.5em; font-weight: 600; margin-top: 20px; margin-bottom: 10px; border-bottom: 2px solid #eee; padding-bottom: 3px; color: #1a73e8; } .not-found-message, .no-news-message { padding: 15px; border: 1px solid #ffab91; background-color: #ffe0b2; color: #333; border-radius: 4px; margin-bottom: 15px; text-align: center; } /* --------------------------------- */ /* BLOCCHI INIZIALI HUBLIST (RIDUZIONE MASSIMA VERTICALE) */ /* --------------------------------- */ .hublist-search-container { margin-bottom: 1px !important; } .hublist-language-selector { margin-top: 1px !important; margin-bottom: 1px !important; } .hublist-language-selector .yiiPager { margin: 0 auto !important; } .hublist-language-selector .page a, .hublist-language-selector .page span { padding: 3px 5px !important; font-size: 0.75em; } /* --------------------------------- */ /* LISTA ARTICOLI (CARD BLOCKS) - MASSIMA COMPATTEZZA INTERNA E SEPARAZIONE RIGHE */ /* --------------------------------- */ .news-blocks-container { display: grid; grid-template-columns: 1fr 1fr 1fr; row-gap: 30px; column-gap: 8px; margin-top: 10px; margin-bottom: 15px; } .news-block-link { text-decoration: none; color: inherit; display: block; transition: transform 0.2s, box-shadow 0.2s; height: 100%; } .news-block-link:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .news-block-card { border: 1px solid #e0e0e0; border-radius: 4px; padding: 3px 5px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Rimosso background-color predefinito */ display: flex; flex-direction: column; height: 100%; justify-content: flex-start; position: relative; } /* 🚀 FIX: Alternanza Colori FORZATA con !important */ .news-blocks-container .news-block-link:nth-child(odd) .news-block-card { background-color: #f6f6f6 !important; /* Blocco Dispari: Grigio chiaro forzato */ } .news-blocks-container .news-block-link:nth-child(even) .news-block-card { background-color: #ffffff !important; /* Blocco Pari: Bianco forzato */ } .block-title { font-size: 1.05em; font-weight: 700; margin-top: 0; margin-bottom: 0px; color: #1a73e8; line-height: 1.05; /* Stili per limitare il titolo a una riga */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .block-category { margin-bottom: 0px; height: 16px; line-height: 16px; } .category-icon { max-width: 16px; max-height: 16px; vertical-align: top; } .news-block-card img.news-block-icon { position: absolute; top: 3px !important; right: 5px !important; } /* Descrizione forzata in blu */ .news-block-card .block-description { /* Riduzione Margini e Font */ margin: 0 !important; padding: 0 !important; font-size: 0.8em; line-height: 1.15; /* Colore forzato e Limite */ color: #1a73e8 !important; /* Forza il blu */ max-height: 2.3em; overflow: hidden; text-overflow: ellipsis; } .block-summary { font-size: 0.75em; color: #777; margin-top: auto; /* Fissato a MAX 2 righe */ max-height: 3em; overflow: hidden; padding-top: 1px; border-top: 1px solid #f0f0f0; } /* GRASSETTO: Data e Commenti */ .block-summary strong { font-weight: 700; color: #555; } /* --------------------------------- */ /* ARTICOLO SINGOLO (Invariato) */ /* --------------------------------- */ .news-article-single { padding: 20px; border: 1px solid #ddd; border-radius: 6px; background-color: #fcfcfc; margin-bottom: 20px; } .news-article-single .headline { font-size: 1.8em; border-bottom: none; padding-bottom: 0; margin-bottom: 15px; } .news-article-body { font-size: 1em; line-height: 1.5; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed #eee; } .article-footer-info { font-size: 0.85em; color: #999; text-align: right; } /* GRASSETTO: Autore e Tempo nell'articolo */ .article-author, .article-time { font-weight: 700; color: #333; } /* --------------------------------- */ /* COMMENTI (Invariato) */ /* --------------------------------- */ .comment-section-title { margin-top: 25px; border-bottom: 2px solid #ddd; } .comment-box { padding: 10px; margin-bottom: 8px; border-radius: 4px; border: 1px solid #eee; } .odd-comment { background-color: #f9f9f9; } .even-comment { background-color: #ffffff; } .comment-text { font-size: 0.95em; line-height: 1.4; margin-bottom: 8px; } .comment-footer-info { font-size: 0.8em; color: #999; border-top: 1px dashed #eee; padding-top: 5px; } /* GRASSETTO: Autore e Tempo nei commenti */ .comment-author, .comment-time { font-weight: 700; color: #333; } .delete-link { color: #cc0000 !important; text-decoration: none; } .delete-link:hover { text-decoration: underline; } .comment-link-box { margin-bottom: 8px; padding: 8px; border: 1px dashed #ccc; background-color: #f5f5f5; text-align: center; border-radius: 4px; } .no-comments-message { padding: 10px; border: 1px solid #ddd; border-radius: 4px; text-align: center; background-color: #fff; } .no-comments-message a { color: #1a73e8; font-weight: bold; text-decoration: none; } .no-comments-message a:hover { text-decoration: underline; } /* --------------------------------- */ /* PAGINAZIONE (Invariato) */ /* --------------------------------- */ .pagination { padding: 15px 0 !important; text-align: center !important; margin-top: 15px; } .yiiPager { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } .yiiPager .page a, .yiiPager .previous a, .yiiPager .next a, .yiiPager .page span, .yiiPager .previous span, .yiiPager .next span { padding: 10px 10px; display: inline-block; min-width: 30px; text-align: center; border: 1px solid #ddd; border-radius: 4px; background-color: white; color: #1a73e8; text-decoration: none; transition: all 0.2s; } .yiiPager .active span { background-color: #1a73e8; color: white; border-color: #1a73e8; font-weight: bold; border-radius: 4px; } .yiiPager .disabled span { color: #ccc; cursor: default; } .yiiPager a:hover { background-color: #f0f0f0; } /* --------------------------------- */ /* RESPONSIVE (Adattato per row/column gap) */ /* --------------------------------- */ @media (max-width: 900px) { /* Passa a 2 colonne su schermi medi */ .news-blocks-container { grid-template-columns: 1fr 1fr; row-gap: 25px; column-gap: 15px; } } @media (max-width: 768px) { /* Regola per il Forum (forzata a 100% su mobile) */ .forum-card-item { width: 100%; max-width: 100%; } } @media (max-width: 600px) { .page-card-wrapper { margin: 10px 0; padding: 0 5px; } .news-blocks-container { /* Passa a 1 colonna su schermi piccoli */ grid-template-columns: 1fr; row-gap: 20px; column-gap: 0; margin-bottom: 15px; } .news-block-card { padding: 8px; } .block-title { font-size: 1.1em; } .news-article-single { padding: 15px; } .news-article-single .headline { font-size: 1.4em; } .article-footer-info { text-align: left; } } /* ========================================= */ /* page_news END */ /* ========================================= */ --- ## Stili page\_forum (Invariati) ```css /* ========================================= */ /* page_forum START: Stili per la pagina Forum (Aggiunti per Post Singolo) */ /* ========================================= */ /* --- Stili per la lista dei Forum a Card (Blocchi) --- */ .page_forum { display: flex; flex-wrap: wrap; margin: 0 -10px; padding: 0; margin-bottom: 20px; } /* Stile per la singola Card Item del Forum (2 per riga) */ .forum-card-item { flex: 0 0 50%; max-width: 50%; padding: 10px; box-sizing: border-box; /* ✅ Mantenuto il margine inferiore per evitare che le card si tocchino verticalmente */ margin-bottom: 20px; } /* Stile per l'effettivo contenitore della Card del Forum */ .forum-card-item > div { background-color: #ffffff; border-radius: 4px; border: 1px solid #c0c0c0; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); transition: box-shadow 0.3s ease, transform 0.3s ease; height: 100%; display: flex; flex-direction: column; } /* Effetto al passaggio del mouse (Hover) sul Forum */ .forum-card-item:hover > div { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); transform: translateY(-2px); } /* --- STILI DEDICATI PER LA PAGINA POST SINGOLO (?do=forum&id=...&post=...) --- */ /* 1. Stile per il Post Principale (div id="post-main") - Più Evidente */ #post-main { background-color: #e8f4f8 !important; border: 2px solid #0000ff !important; padding: 20px !important; margin-bottom: 25px !important; border-radius: 6px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } /* 2. Stile per il Contenitore delle Risposte (div id="reply-XXX") - Linee di Separazione Chiare */ div[id^="reply-"] { margin-top: 15px !important; padding: 15px !important; border: 1px solid #dcdcdc !important; border-left: 5px solid #c0c0c0 !important; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } /* Stile per il Div di Footer/Info Autore (all'interno di #post-main e #reply-XXX) */ #post-main > div:last-child, div[id^="reply-"] > div:last-child { font-size: 0.85em !important; color: #666; padding: 5px 0; border-top: 1px solid #c0c0c0; margin-top: 10px; } /* ========================================= */ /* page_forum END */ /* ========================================= */ /* Inizio css page_login */ /* ---------------------------------------------------- */ /* STILI GENERALI E CONTENITORE */ /* ---------------------------------------------------- */ .page_login-container { padding: 25px 20px; background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 6px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); margin-bottom: 25px; max-width: 100%; box-sizing: border-box; } .page_login-headline { color: #333333; font-size: 1.6em; font-weight: 400; border-bottom: 1px solid #cccccc; padding-bottom: 10px; margin-bottom: 20px; } .page_login-info { margin-bottom: 20px; } /* Messaggi di errore */ .page_login-error-box { font-weight: 600; font-size: 0.9em; padding: 10px; text-align: center; border: 1px solid #d9534f; background-color: #f2dede; color: #a94442; border-radius: 4px; margin-bottom: 15px; } .required-star { color: #d9534f; font-weight: bold; } /* ---------------------------------------------------- */ /* FORM E INPUT (Input alti e compatti) */ /* ---------------------------------------------------- */ .page_login-form-group { margin-bottom: 15px; } .page_login-form-group label { display: block; margin-bottom: 5px; font-weight: 600; color: #555555; } .page_login-input { /* Larghezza orizzontale compatta su desktop */ width: 300px; max-width: 100%; /* Altezza verticale (come concordato) */ padding: 15px 12px; min-height: 48px; border: 1px solid #cccccc; border-radius: 4px; background-color: #fcfcfc; transition: all 0.2s ease-in-out; box-sizing: border-box; height: auto !important; line-height: normal; } .page_login-input:focus { border-color: #3f90d5; box-shadow: 0 0 0 2px rgba(63, 144, 213, 0.2); background-color: #ffffff; outline: none; } /* Stile per i campi con errore */ .page_login-error-field { border-color: #d9534f !important; } /* Stile specifico per l'input CAPTCHA */ .page_login-input-code { width: 130px; } /* ---------------------------------------------------- */ /* STILI PULSANTI */ /* ---------------------------------------------------- */ .page_login-actions { margin-top: 25px; } .page_login-button { padding: 14px 18px; border: none; border-radius: 4px; font-weight: 600; text-decoration: none !important; cursor: pointer; transition: background-color 0.2s, box-shadow 0.2s, opacity 0.2s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); display: inline-block; margin-right: 8px; box-sizing: border-box; } .page_login-button.primary { background-color: #3f90d5; color: #ffffff !important; } .page_login-button.primary:hover { background-color: #2e7bbd; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15); } .page_login-button.secondary { background-color: #f0f0f0; color: #555555 !important; box-shadow: none; border: 1px solid #cccccc; margin-left: 0 !important; } .page_login-button.secondary:hover { background-color: #e0e0e0; } /* ---------------------------------------------------- */ /* RESPONSIVE MOBILE (Sotto 600px) */ /* ---------------------------------------------------- */ @media (max-width: 600px) { .page_login-container { padding: 15px 10px; border: none; box-shadow: none; } /* Su mobile, tutti gli input tornano al 100% di larghezza */ .page_login-input { width: 100%; } .page_login-actions { display: flex; flex-direction: column; gap: 10px; } .page_login-actions .page_login-button { width: 100%; margin-right: 0; } } /* Fine css page_login */ /* --- STILI GENERALI E FORM (Mantenuti per pulizia) --- */ .hublist_findhub-container { max-width: 1000px; /* Aumentato per dare più spazio */ margin: 20px auto; padding: 20px; background-color: #ffffff; /* Sfondo bianco */ border: 1px solid #e0e0e0; border-radius: 6px; font-family: Arial, sans-serif; } .headline { color: #444; border-bottom: 1px solid #ccc; padding-bottom: 5px; margin-top: 20px; margin-bottom: 15px; font-size: 1.4em; } /* Stili per Input e Pulsanti (Mantenuti) */ form input[type="text"], form select { padding: 7px 9px; margin-right: 5px; border: 1px solid #ccc; border-radius: 3px; font-size: 0.9em; } .button.hublist_findhub-button { padding: 8px 15px; border: none; border-radius: 3px; cursor: pointer; font-weight: bold; font-size: 0.95em; background-color: #5cb85c; /* Verde */ color: white; } .button[name="findhub_cancel"] { background-color: #f0ad4e; /* Arancione */ } /* --- STILI CHIAVE PER LA TABELLA (Ristrutturati) --- */ .table-container-hublist_findhub { overflow-x: auto; /* Permette lo scroll orizzontale se necessario */ margin-top: 20px; border: 1px solid #ccc; border-radius: 4px; } .tabella-hublist_findhub { border-collapse: collapse; width: 100%; /* LA TABELLA OCCUPA TUTTA LA LARGHEZZA DISPONIBILE */ /* RIMOSSA: min-width: 700px; */ } /* Intestazione della tabella */ .tabella-hublist_findhub thead { background-color: #f5f5f5 !important; border-bottom: 2px solid #ddd; } .tabella-hublist_findhub th { font-weight: bold; color: #333; text-align: left; padding: 10px 8px; font-size: 0.9em; } /* Larghezze specifiche per le colonne per evitare stringimenti */ .tabella-hublist_findhub .col-status-hublist_findhub { width: 70px; text-align: center; } .tabella-hublist_findhub .col-name-hublist_findhub { min-width: 250px; } /* Nome più spazio */ .tabella-hublist_findhub .col-address-hublist_findhub { width: 150px; } .tabella-hublist_findhub .col-loc-hublist_findhub { width: 35px; text-align: center; } .tabella-hublist_findhub .col-users-hublist_findhub { width: 80px; text-align: center; } .tabella-hublist_findhub .col-share-hublist_findhub { width: 100px; text-align: center; } /* Righe e celle */ .tabella-hublist_findhub td { padding: 8px 8px; border-bottom: 1px solid #eee; font-size: 0.9em; } .tabella-hublist_findhub tr:nth-child(odd) { background-color: #fcfcfc; } .tabella-hublist_findhub tr:hover { background-color: #e6f7ff !important; } /* Stili Status (Mantengono lo stile colorato) */ td span[title="Online"] { background-color: #5cb85c !important; /* Verde */ } td span[title="Offline"] { background-color: #777 !important; /* Grigio */ } td span[title="Banned"] { background-color: #d9534f !important; /* Rosso */ } td span[style*="font-weight: bold;"] { padding: 3px 6px; border-radius: 4px; color: #fff; font-size: 0.8em; } /* RIMOSSA: Tutta la sezione @media screen and (max-width: 768px) */ /* Stile per il contenitore di codice per posizionare il pulsante */ .bbcode-code-container { position: relative; } /* Stile per il pulsante Copy */ .bbcode-copy-button { float: right; margin: -5px 0 0 10px; padding: 3px 8px; border: 1px solid #a0a0a0; border-radius: 3px; background-color: #f0f0f0; color: #333; cursor: pointer; font-size: 10px; font-weight: normal; transition: background-color 0.3s, color 0.3s; } .bbcode-copy-button:hover { background-color: #e0e0e0; } /* --- INIZIO CSS hublist_lists (COMPLETO E DEFINITIVO) --- */ /* 1. LAYOUT BASE E SCROLL VIEW */ /* Contenitore principale: essenziale per lo scroll orizzontale */ .hublist-lists-container { overflow-x: auto; margin-bottom: 20px; -webkit-overflow-scrolling: touch; /* Scroll fluido per iOS */ } /* Stili generali della tabella */ table.hublist-lists-table { border-collapse: collapse; width: 100%; font-size: 0.9em; min-width: 500px; /* Forziamo la larghezza minima */ margin-top: 10px; } /* Stili comuni per TH e TD */ table.hublist-lists-table th, table.hublist-lists-table td { padding: 10px; border: 1px solid #eee; text-align: left; word-break: break-word; /* Permette il "a capo" su desktop */ font-weight: bold; color: #000000; /* Assicura colore nero per i dati */ } /* Intestazione */ table.hublist-lists-table thead th { background-color: #f7f7f7; color: #555; white-space: nowrap; } /* Larghezza e Allineamento Colonne */ table.hublist-lists-table thead th.col-flag { width: 40px; text-align: center; } table.hublist-lists-table thead th.col-hubs { width: 80px; text-align: center; } table.hublist-lists-table thead th.col-downloads { width: 100px; text-align: right; } /* 2. RIGHE ALTERNATE (Gestione interamente via CSS) */ /* Riga DISPARI (1, 3, 5...) è BIANCA */ table.hublist-lists-table tbody tr:nth-child(odd) { background-color: #ffffff; } /* Riga PARI (2, 4, 6...) è GRIGIA CHIARO */ table.hublist-lists-table tbody tr:nth-child(even) { background-color: #f6f6f6; } /* 3. STILI LINK E FOOTER */ /* Stili per la cella Link: usa Flexbox per affiancare Link e Pulsante */ table.hublist-lists-table td.col-link-data { display: flex; align-items: center; justify-content: space-between; } /* Stili per il piede (Total Row) */ table.hublist-lists-table tfoot .total-row td { background-color: #eeeeee !important; font-weight: bold; color: #000000; } /* 4. RESPONSIVITÀ MOBILE (SOLUZIONE DEFINITIVA PER L'OVERFLOW) */ @media (max-width: 768px) { /* Contenitore: Si espande a tutta la larghezza per gestire lo scroll */ .hublist-lists-container { width: 100vw; position: relative; /* Estende il div fino ai bordi dello schermo (recuperando padding esterno) */ margin-left: -15px !important; margin-right: -15px !important; box-sizing: border-box; } /* CORREZIONE FONT E PADDING PER IL TESTO DESCRITTIVO (H4 e H6) */ .hublist-lists-container h4, .hublist-lists-container h6 { white-space: normal !important; /* Forza il testo ad andare a capo */ padding-left: 15px; /* Riporta il testo all'interno dei bordi visivi */ padding-right: 15px; margin-left: 0; margin-right: 0; } /* Riduzione Dimensione Font per evitare l'overflow del testo stesso */ .hublist-lists-container h4 { font-size: 1.1em; } .hublist-lists-container h6 { font-size: 0.95em; } /* Tabella: Abilita lo scroll. Il testo dentro le celle NON va a capo */ table.hublist-lists-table th, table.hublist-lists-table td { white-space: nowrap; /* Chiave: Forza il contenuto su una singola linea per lo scroll */ padding: 8px 10px !important; } table.hublist-lists-table { min-width: 600px; /* Larghezza minima garantita per lo scroll */ width: auto; } } /* --- FINE CSS hublist_lists (COMPLETO E DEFINITIVO) --- */ /* --- INIZIO CSS page_work.php (CORREZIONE CONFLITTI E OTTIMIZZAZIONE MOBILE) --- */ /* 1. Regola generale per prevenire l'overflow da stringhe lunghe */ /* APPLICA QUESTA REGOLA A LIVELLO GENERALE O SOLO AL CONTENUTO DELLA LISTA SE POSSIBILE */ .content-area, .content-area p, .content-area div, .content-area a { word-break: break-word; /* Spezza le parole molto lunghe senza spazi */ overflow-wrap: break-word; /* Aggiunge supporto ai browser moderni */ } /* === RESPONSIVITÀ MOBILE & TABLET (<= 768px) === */ @media (max-width: 768px) { /* 2. Intervento SPECIFICO sulle Righe della Lista File (.work-file-row) */ /* Nota: Queste regole NON influenzano le tabelle di hublist_pages.php */ /* Contenitore principale: assicura che il contenitore della lista file non causi overflow */ .content-area, .main-content { overflow-x: hidden; } /* Forziamo la riga intera della lista file a essere un blocco verticale */ .work-file-row { display: block !important; /* Rimuove il layout orizzontale (flex) */ width: 100% !important; padding: 10px 0; margin-bottom: 5px; border-bottom: 1px solid #333; /* Usa un colore scuro se usi il tema nero */ } /* 3. Intervento sulle Colonne all'interno della Riga */ /* Applichiamo le regole di impilamento solo ai DIV diretti all'interno di .work-file-row */ .work-file-row > div { display: block !important; /* Forza ogni colonna a blocco (impilamento verticale) */ flex-basis: auto !important; /* Ignora l'impostazione di flex-basis */ min-width: auto !important; /* CHIAVE: Rimuove i min-width aggressivi */ width: 100% !important; /* Sfrutta tutta la larghezza */ text-align: left !important; padding: 3px 0; margin: 0; font-size: 0.9em; } /* 4. Manteniamo Etichette e Valori Sulla Stessa Riga Impilata */ .work-file-row strong { display: inline !important; margin-right: 5px; font-size: 1em !important; white-space: nowrap; } /* 5. Regole per il Contenitore del Form di Ricerca (Opzionale) */ /* Se il tuo form di ricerca (hublist-search-container) viene rotto su mobile: */ .hublist-search-container { float: none !important; /* Rimuove float: right */ width: 100%; margin-bottom: 10px; } /* Se il form usa flex (display: inline-flex nel PHP precedente) */ .hublist-search-container form { display: block !important; } .hublist-search-container .form-group { margin-right: 0 !important; margin-bottom: 10px; width: 100%; } .search-hub-input { width: 100% !important; /* Fa occupare all'input tutta la larghezza */ } .search-hub-button { width: 100%; height: auto !important; } } /* --- FINE CSS page_work.php (CORREZIONE CONFLITTI E OTTIMIZZAZIONE MOBILE) --- */ /* --- INIZIO CSS HUBFROMIP --- */ /* Definisce il layout a griglia e le colonne per desktop/schermi larghi */ .tools_hubfromip-grid { display: grid; /* 5 Colonne: Hub Name (300px, più largo), Address (1.2fr), Flag (40px), Users (60px), Share (80px) */ grid-template-columns: 300px 1.2fr 40px 60px 80px; border: 1px solid #ccc; border-radius: 4px; margin-top: 10px; } /* Stile per la riga di intestazione */ .hub-header.tools_hubfromip { display: contents; font-weight: bold; color: #333; text-align: left; } /* Allinea il testo delle intestazioni Address, Users e Share */ .hub-header .address-field, .hub-header .users-field, .hub-header .share-field { text-align: center; } /* Stile per ogni singola cella dell'intestazione (hub-field) */ .hub-header .hub-field { padding: 8px 5px; background-color: #eee; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Rimuove il bordo destro dall'ultima colonna dell'intestazione (Share) */ .hub-header .hub-field:last-child { border-right: none; } /* Stile per ogni riga di risultato */ .hub-item.tools_hubfromip { display: contents; } /* Stile per ogni cella di risultato */ .hub-item .hub-field { padding: 8px 5px; border-right: 1px solid #eee; border-bottom: 1px solid #ddd; overflow: hidden; text-overflow: ellipsis; white-space: normal; /* Permette l'andata a capo se il nome è *troppo* lungo */ vertical-align: middle; } /* Forzo nowrap solo su campi dove il testo non deve mai andare a capo (Address, Users, Share) */ .hub-item .address-field, .hub-item .users-field, .hub-item .share-field { text-align: center; white-space: nowrap; } /* Centra il contenuto delle colonne numeriche e della bandiera */ .hub-item .address-field, .hub-item .users-field, .hub-item .share-field { text-align: center; } /* Stile specifico per il campo della bandiera/locazione */ .hub-field.location-field.flag-field { text-align: center; padding: 3px 5px; } /* Stile per l'immagine della bandiera */ .country-flag { width: 20px; height: 15px; vertical-align: middle; } /* Rimuove il bordo destro dall'ultima cella di ogni riga (Share) */ .hub-item .hub-field:last-child { border-right: none; } /* Rimuove il bordo inferiore dall'ultima riga di risultati */ .tools_hubfromip-grid .hub-item:last-of-type .hub-field { border-bottom: none; } /* ------------------------------------------- */ /* Stili per l'alternanza dei colori (zebra stripping) */ /* ------------------------------------------- */ .tools_hubfromip-grid .row1 { background-color: #f6f6f6; } .tools_hubfromip-grid .row2 { background-color: #ffffff; } /* ------------------------------------------- */ /* Stili Responsive (Mobile First) */ /* ------------------------------------------- */ /* Nasconde le etichette per i dispositivi desktop */ .hub-field .hub-label { display: none; } /* Media query per schermi più piccoli (es. cellulari) */ @media (max-width: 768px) { .tools_hubfromip-grid { display: block; border: none; } .hub-header.tools_hubfromip { display: none; } .hub-item.tools_hubfromip { display: block; border: 1px solid #ccc; margin-bottom: 10px; padding: 0; } .hub-item .hub-field { display: block; border: none; border-bottom: 1px solid #eee; padding: 5px 10px; text-align: left !important; /* Forza l'allineamento a sinistra su mobile */ } /* Rende visibile l'etichetta su mobile */ .hub-field .hub-label { display: inline-block; font-weight: bold; min-width: 60px; margin-right: 10px; } /* L'ultima cella della riga non ha bordo inferiore */ .hub-item .hub-field:last-child { border-bottom: none; } .hub-field.location-field.flag-field { text-align: left; } } /* --- FINE CSS HUBFROMIP --- */ /* ======================================= */ /* INIZIO CSS MENU (Dark Mode) - CORRETTO PER IL CONFLITTO */ /* ======================================= */ /* * STILE: FLAT BORDER (Dark Mode) - LAYOUT CORRETTO * La barra è a tutta larghezza (100%), ma il contenuto è limitato e centrato. */ .main-navigation { clear: both; display: block; /* MODIFICHE CHIAVE: - Rimuovi max-width e margin: auto qui. - L'elemento si estende su tutta la larghezza per non interferire con float. */ width: 100%; margin: 20px 0; /* Spazio solo sopra e sotto */ /* SFONDO E BORDATURA */ background-color: #1a1a1a; /* Sfondo scuro (quasi nero) */ border-bottom: 1px solid #333; /* Bordo separatore scuro */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } /* Contenitore interno .wrap: E' questo che centra e limita il contenuto del menu. */ .main-navigation .wrap { max-width: 1100px; /* LIMITA A 1100px */ margin: 0 auto; /* CENTRA IL CONTENUTO ALL'INTERNO DELLA BARRA 100% */ padding: 0 10px; } .main-navigation .primary-menu { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; /* Centra gli elementi del menu */ flex-wrap: wrap; } .main-navigation .menu-item { margin: 0; padding: 0; position: relative; } /* Stile per i link */ .main-navigation a { display: block; padding: 15px 18px; text-decoration: none; color: #f0f0f0; font-weight: 500; font-size: 15px; line-height: 1.2; transition: color 0.2s; } /* Stato Hover */ .main-navigation a:hover { color: #4ac7ff; background-color: transparent; } /* Stato Attivo (Pagina Corrente) */ .main-navigation .current-menu-item { border-bottom: 3px solid #4ac7ff; margin-bottom: -1px; } .main-navigation .current-menu-item a { color: #4ac7ff; background-color: transparent; font-weight: 600; } /* ======================================= */ /* Adattamento Responsive */ /* ======================================= */ @media screen and (max-width: 1100px) { /* Il .main-navigation non ha più un max-width qui perché è a 100% di default. */ .main-navigation .primary-menu { justify-content: space-around; } } @media screen and (max-width: 768px) { .main-navigation a { padding: 12px 10px; font-size: 14px; } } /* ======================================= */ /* FINE CSS MENU (Dark Mode) */ /* ======================================= */ /* Rende il titolo principale (H1) più leggibile, ma mantiene la sua importanza SEO */ h1 { font-size: 24px; /* O qualsiasi dimensione tu preferisca, es. 1.8em */ font-weight: bold; margin-top: 15px; /* Spazio sopra */ margin-bottom: 10px; /* Spazio sotto */ } /* Rende i sottotitoli (H2) più piccoli dell'H1 */ h2 { font-size: 18px; /* O qualsiasi dimensione tu preferisca, es. 1.2em */ font-weight: normal; /* Rimuove il grassetto se lo desideri */ color: #333; /* Colore più discreto */ } /* =============================== 1. Stili Generali e Desktop (> 1024px) =============================== */ /* Contenitore principale: abilita lo scorrimento orizzontale su tutti i dispositivi */ .hublist-table-container { overflow-x: auto; /* Abilita lo scroll orizzontale se necessario */ margin-bottom: 20px; -webkit-overflow-scrolling: touch; /* Migliora l'inerzia dello scroll su iOS */ } table.hublist_stats { border-collapse: collapse; width: 100%; /* Larghezza completa su desktop */ font-size: 0.9em; } /* GRASSETTO: Rende tutti i link all'interno della tabella in grassetto */ table.hublist_stats a { font-weight: bold; } /* GRASSETTO: Rende TUTTE le celle e le intestazioni in grassetto */ table.hublist_stats th, table.hublist_stats td { padding: 12px 10px; border: 1px solid #eee; text-align: left; word-break: break-word; /* Permette il 'a capo' su desktop */ font-weight: bold; } /* Intestazione (TH dentro THEAD) */ table.hublist_stats thead th { background-color: #f7f7f7; color: #555; } /* Stili Nazione/Bandiera */ table.hublist_stats thead th:first-child { width: 40px !important; text-align: center !important; } table.hublist_stats tr th:first-child img, table.hublist_stats tr td:first-child img { width: 20px !important; height: auto !important; vertical-align: middle; margin-right: 5px; } table.hublist_stats tr td:first-child { text-align: left !important; white-space: normal; } /* 🟢 RIGHE ALTERNATE CORRETTE E FORZATE (R1 Bianco / R2 #f5f5f5) 🟢 */ .hublist_stats.table-striped tbody tr:nth-child(odd) { background-color: #ffffff !important; /* Riga DISPARI (1, 3, 5...): Colore più chiaro (Bianco) */ } .hublist_stats.table-striped tbody tr:nth-child(even) { background-color: #f5f5f5 !important; /* Riga PARI (2, 4, 6...): Colore più scuro (Grigio chiaro) */ } /* ======================================= 2. Responsività Mobile & Tablet (<= 1024px) FULL-WIDTH SCROLL VIEW ======================================= */ @media (max-width: 1024px) { /* 1. INGRANDISCI CONTENITORE: Espande la tabella fino ai bordi dello schermo (100vw) */ .hublist-table-container { width: 100vw !important; position: relative !important; /* Rimuove il padding della pagina per far espandere la tabella */ margin-left: -var(--page-padding, 15px) !important; margin-right: -var(--page-padding, 15px) !important; box-sizing: border-box !important; } /* 2. FORZA SCROLL: Permette alla tabella di espandersi orizzontalmente */ table.hublist_stats { width: auto; min-width: 100%; } /* 3. COMPATTAZIONE CHIAVE: Impedisce che il testo vada a capo (TESTO SU UNA SOLA RIGA) */ table.hublist_stats th, table.hublist_stats td { white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; /* Compattazione Verticale */ padding: 8px 10px !important; font-size: 0.85em; } /* Assicura che anche i contenuti interni non vadano a capo */ table.hublist_stats th *, table.hublist_stats td * { white-space: nowrap !important; } }