MediaWiki:Timeless.css: differenze tra le versioni

Versione attuale delle 09:56, 1 ago 2025

/* All CSS here will be loaded for users of the Timeless skin */
/*
 * Stili CSS personalizzati per la skin Timeless.
 * Colori basati sul sito Nick Digital Projects.
 *
 * NOTA: Questo CSS dovrebbe essere inserito in MediaWiki:Timeless.css.
 * La pagina MediaWiki:Common.css dovrebbe essere svuotata o eliminata.
 */

/* Importa il font Inter se non è già caricato */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif !important;
    color: #333333 !important; /* Testo principale: Grigio scuro per leggibilità */
    background-color: #F8F9FA !important; /* Sfondo generale del body: Grigio molto chiaro */
}

/* Header (barra superiore) - Aggiornato con ID corretto */
#mw-header-container {
    background-color: #333333 !important; /* Grigio scuro del tuo sito */
    border-bottom: 1px solid #ffffff !important; /* Bordo bianco */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 10) !important; /* Ombra leggera */
}

.color-middle {
    height: 0.95em;
    background: #2a4b8d;
    margin-left: 15em;
    margin-right: 17em;
}

/* Colore del testo del titolo della wiki nell'header - AGGIORNATO CON SELETTORE ESATTO */
#p-banner.mw-wiki-title {
    color: #FFFFFF !important; /* Bianco per il titolo della wiki */
    font-weight: 700 !important;
    text-decoration: none !important;
}
#p-banner.mw-wiki-title:hover {
    color: #CCCCCC !important; /* Grigio chiaro al hover */
}



/* Regola per l'elemento #simpleSearch */
#simpleSearch {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05) !important;
    background: #f8f7e6 !important;
    position: relative !important;
    border: solid 1px #c8ccd1 !important;
    border-radius: 0.5rem !important; /* Aggiunto per arrotondare i bordi */
}


/* Colore dei link di navigazione nell'header (es. Utente, Discussioni, Preferenze) */
#mw-header-container .mw-timeless-tools a,
#mw-header-container .mw-timeless-tools .mw-user-menu-button {
    color: #0099FF !important; /* Blu vivace per i link */
    text-decoration: none !important;
}
#mw-header-container .mw-timeless-tools a:hover,
#mw-header-container .mw-timeless-tools .mw-user-menu-button:hover {
    color: #FFFFFF !important; /* Bianco al hover */
    text-decoration: underline !important;
}

/* Campo di ricerca nell'header */
#mw-header-container .mw-timeless-search-box input[type="search"] {
    background-color: #444444 !important; /* Sfondo del campo di ricerca più scuro */
    border: 1px solid #555555 !important; /* Bordo più chiaro */
    color: #FFFFFF !important; /* Testo bianco */
    border-radius: 0.25rem !important;
    padding: 0.5rem 1rem !important;
}
#mw-header-container .mw-timeless-search-box input[type="search"]::placeholder {
    color: #AAAAAA !important; /* Colore del placeholder */
}

/* Pulsante di ricerca nell'header */
#mw-header-container .mw-timeless-search-box button {
    background-color: #007BFF !important; /* Blu per il pulsante */
    color: white !important;
    border: none !important;
    border-radius: 0.25rem !important;
    padding: 0.5rem 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}
#mw-header-container .mw-timeless-search-box button:hover {
    background-color: #0056B3 !important; /* Blu più scuro al hover */
}

/* Nuove regole per le icone nell'header (ricerca, menu utente) - AGGIORNATE con selettori più specifici */
/* Applica il filtro alle icone che sono immagini di sfondo */




/* Aggiungiamo anche il selettore per l'h2 dell'ingranaggio utente */
#user-tools h2, /* Icona ingranaggio utente nell'header */
#site-tools h2,
/* Anche per l'icona di ricerca, targettiamo l'elemento che ha l'immagine di sfondo */
#mw-search-top-box .oo-ui-icon-search, /* Icona di ricerca nel campo di ricerca */
#mw-search-top-box #searchform button.mw-searchButton { /* Icona di ricerca nel pulsante */
    filter: invert(100%) brightness(300%) saturate(0%) !important; /* Rende le icone nere/grigie bianche e rimuove il colore */
}


#site-navigation h2 {
        left: 0.45em;
        filter: invert(100%) brightness(300%) saturate(0%) !important;
    }


/* Stile per i link a pagine esistenti (blu/verde) */
a {
    color: #125d23 !important; /* Verde vibrante per i link normali (esistenti) */
    text-decoration: none !important;
    font-weight: bold !important; /* Rende il testo del link in grassetto */
}
a:hover {
    color: #1E7E34 !important; /* Verde più scuro al hover per maggiore evidenza */
    background-color: #E6F4E6 !important; /* Sfondo leggero verde chiaro per evidenziare il link */
    text-decoration: none !important; /* Rimuovi la sottolineatura se c'è il background */
    border-radius: 0.25rem !important; /* Bordi arrotondati per il background */
    padding: 0 0.2em !important; /* Piccolo padding per il background */
}

/* Stile per i link a pagine NON esistenti (rossi) */
a.new {
    color: #CC3333 !important; /* Rosso per i link a pagine non esistenti */
    text-decoration: none !important; /* Rimuovi la sottolineatura predefinita */
}
a.new:hover {
    color: #AA2222 !important; /* Rosso più scuro al hover */
    background-color: #FEEAEA !important; /* Sfondo leggero rosso chiaro al hover */
    text-decoration: none !important;
    border-radius: 0.25rem !important;
    padding: 0 0.2em !important;
}



/* Sidebar di navigazione (colonna di sinistra) - Aggiornato con ID comune per sidebar */
#mw-panel { /* Usiamo #mw-panel che è un ID comune per la sidebar in MediaWiki */
    background-color: #FFFFFF !important; /* Sfondo bianco per la sidebar */
    border-right: 1px solid #E5E7EB !important; /* Bordo leggero */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05) !important; /* Ombra leggera a destra */
}

/* Titoli delle sezioni nella sidebar (es. Navigazione, Strumenti) */
#mw-panel h2 {
    color: #1A2B4C !important; /* Blu scuro/Navy per i titoli della sidebar */
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.8rem !important;
    padding-bottom: 0.4rem !important;
    border-bottom: 1px solid #EEEEEE !important;
}


/* Link nella sidebar */
#mw-panel a {
    color: #007BFF !important; /* Blu per i link della sidebar */
    text-decoration: none !important;
    display: block !important;
    padding: 0.4rem 0.5rem !important;
    border-radius: 0.25rem !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}
#mw-panel a:hover {
    background-color: #F0F0F0 !important; /* Grigio chiaro al hover */
    color: #0056B3 !important; /* Blu più scuro al hover */
}


    #mw-site-navigation .sidebar-chunk {
        background: #f8f9fa;
        border: solid #eaecf0;
        border-width: 0px 0px 0.2em;
        border-radius: 0.90rem !important;
        box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.02);
        padding: 1.5em 1.5em 0;
        margin: 1em 0;
        line-height: 1.125;
        word-wrap: break-word;
        font-size: 1.04em;
    }

a:visited {
    color: #492b39;
}

    #mw-related-navigation .sidebar-chunk {
        background: #f8f9fa;
        border: solid #eaecf0;
        border-width: 1px 1px 0.2em;
        border-radius: 0.90rem !important;
        box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.02);
        padding: 1.5em 1.5em 0;
        margin: 1em 0;
        line-height: 1.125;
        word-wrap: break-word;
        font-size: 1.04em;
    }

#mw-content-wrapper {
        justify-content: space-between;
        width: auto;
        flex: 1 1 auto;
        order: 2;
        min-width: 50%;
    }
#mw-content {
    background: #efefef;
    border: solid #1849aa;
    border-width: 1px 1px 0.2em;
    border-radius: 0.90rem !important;
    box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.02);
    background: #ffffff;
    padding: 1em 2em 3em;
}

/* Contenuto principale (l'area bianca della pagina) - Aggiornato con ID corretto */
#mw-content-container {
    background-color: #e2dfe7 !important; /* Mantenuto bianco come richiesto */
    border-radius: 0.15rem !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important; /* Ombra per dare profondità */
    padding: 2rem !important;
}

/* Titoli all'interno del contenuto */
#mw-content-container h1,
#mw-content-container h2,
#mw-content-container h3,
#mw-content-container h4,
#mw-content-container h5,
#mw-content-container h6 {
    color: #123456 !important; /* Blu scuro/Navy per i titoli del contenuto */
    border-bottom: 1px solid #D0D0D0 !important; /* Linea sotto i titoli */
    padding-bottom: 0.5rem !important;
    margin-bottom: 1rem !important;
}

/* Footer - Aggiornato con ID corretto */
#mw-footer-container {
    background-color: #333333 !important; /* Grigio scuro del tuo sito */
    color: #CCCCCC !important; /* Testo grigio chiaro nel footer */
    padding: 1.5rem 2rem !important;
    text-align: center !important;
    margin-top: 2rem !important; /* Spazio dal contenuto */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2) !important; /* Ombra verso l'alto */
    position: relative; /* Necessario per posizionare l'::after */
}


#mw-footer-container a {
    color: #0099FF !important; /* Blu vivace per i link nel footer */
    text-decoration: none !important;
}

#mw-footer-container a:hover {
    text-decoration: underline !important;
}







/* Importa la libreria Font Awesome per le icone */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

/* Stili per la griglia delle categorie sulla pagina principale */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem; /* Spaziatura tra le schede */
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1.5rem;
    transition: all 0.2s ease-in-out;
}

.category-card:hover {
    background-color: #f3f4f6;
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.category-card .icon {
    font-size: 2.5rem;
    color: #3b82f6; /* Blu primario */
    margin-bottom: 1rem;
}

.category-card h3 {
    font-size: 1.25rem; /* text-xl */
    font-weight: 700;
    color: #1f2937; /* Grigio scuro */
    margin-bottom: 0.5rem;
}

.category-card p {
    color: #4b5563; /* Grigio medio */
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
}