MediaWiki:Timeless.css
Da WikiAI.
Nota: dopo aver pubblicato, potrebbe essere necessario pulire la cache del proprio browser per vedere i cambiamenti.
- Firefox / Safari: tieni premuto il tasto delle maiuscole Shift e fai clic su Ricarica, oppure premi Ctrl-F5 o Ctrl-R (⌘-R su Mac)
- Google Chrome: premi Ctrl-Shift-R (⌘-Shift-R su un Mac)
- Edge: tieni premuto il tasto Ctrl e fai clic su Aggiorna, oppure premi Ctrl-F5.
/*
* 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 */
}
/* Wrapper principale della pagina per assicurare che lo sfondo sia applicato */
#mw-wrapper {
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 #222222 !important; /* Bordo più scuro */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important; /* Ombra leggera */
}
/* Stile per il logo nell'header */
#mw-header-container .mw-wiki-logo {
/* Per un'immagine logo, potresti voler regolare background-size, background-image, ecc. */
/* Esempio: background-image: url('/path/to/your/logo.png') !important; */
/* background-size: contain !important; */
/* background-repeat: no-repeat !important; */
/* background-position: center left !important; */
/* width: 150px !important; */
/* height: 40px !important; */
}
/* 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 */
}
/* 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) */
/* Per le icone SVG all'interno dell'header */
#mw-header-container svg {
fill: #FFFFFF !important; /* Rendi le icone SVG bianche */
color: #FFFFFF !important; /* Fallback per icone basate su font */
}
/* Per l'icona di ricerca all'interno del campo di ricerca (se è un background-image) */
/* Questo selettore è per l'input stesso, l'icona è spesso un background-image o un pseudo-elemento */
#mw-header-container .mw-timeless-search-box input[type="search"] {
/* Se l'icona è un'immagine di sfondo nera, prova questo filtro per renderla bianca */
filter: invert(100%) brightness(200%) !important;
}
/* Per le icone nel menu utente (es. ingranaggio, utente) */
/* Questi selettori sono basati su classi comuni di icone in MediaWiki/Timeless */
#mw-header-container .mw-timeless-tools .oo-ui-icon-user,
#mw-header-container .mw-timeless-tools .oo-ui-icon-settings,
#mw-header-container .mw-timeless-tools .oo-ui-icon-search { /* Aggiunto anche search per consistenza */
fill: #FFFFFF !important; /* Per icone SVG */
color: #FFFFFF !important; /* Per icone basate su font */
}
/* 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 */
}
/* Contenuto principale (l'area bianca della pagina) - Aggiornato con ID corretto */
#mw-content-container {
background-color: #FFFFFF !important; /* Mantenuto bianco come richiesto */
border-radius: 0.5rem !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: #1A2B4C !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 */
}
/* Aggiunge il link "Visita Nick Digital Projects" al footer usando un pseudo-elemento CSS */
#mw-footer-container::after {
content: " | Visita Nick Digital Projects"; /* Testo da visualizzare */
color: #0099FF !important; /* Blu vivace per il link */
text-decoration: none !important; /* Rimuove sottolineatura di default */
cursor: pointer; /* Indica che è cliccabile */
display: inline; /* Per stare sulla stessa riga */
/* Per rendere il link cliccabile, useremo JavaScript. */
}
/* Per rendere il link cliccabile, aggiungeremo un piccolo script */
/* Questo script andrebbe in MediaWiki:Common.js o in un file JS personalizzato */
/* Non possiamo iniettare JS direttamente qui, ma lo suggerisco come passo successivo */
/*
document.addEventListener('DOMContentLoaded', function() {
const footer = document.getElementById('mw-footer-container');
if (footer) {
footer.addEventListener('click', function(event) {
// Controlla se il click è avvenuto sul testo iniettato
if (event.target.textContent.includes('Visita Nick Digital Projects')) {
window.open('https://www.nick-digital-projects.com/soluzioni-digitali/', '_blank');
}
});
}
});
*/
