« MediaWiki:Common.js » : différence entre les versions

Version du 10 juin 2025 à 11:10

/* Tout JavaScript présent ici sera exécuté par tous les utilisateurs à chaque chargement de page. */

// Attendre que le DOM soit complètement chargé
$(document).ready(function() {
    // Fonction pour appliquer les styles
    function applyStyles() {
        // Variables CSS globales
        var root = document.documentElement;
        
        // Fond et texte de base
        root.style.setProperty('--background-color-base', '#000', 'important');
        root.style.setProperty('--background-color-neutral-subtle', '#111', 'important');
        root.style.setProperty('--background-color-page-container', '#000', 'important');
        root.style.setProperty('--color-base', '#fff', 'important');
        
        // Couleurs d'accent et liens
        root.style.setProperty('--color-progressive', '#00ff5a', 'important');
        root.style.setProperty('--color-link', '#00ff5a', 'important');
        root.style.setProperty('--color-link--visited', '#888888', 'important');
        root.style.setProperty('--color-link--hover', '#fff', 'important');
        root.style.setProperty('--color-link--active', '#00ff5a', 'important');
        root.style.setProperty('--color-interactive', '#00ff5a', 'important');
        root.style.setProperty('--color-interactive--hover', '#fff', 'important');
        root.style.setProperty('--color-interactive--active', '#00ff5a', 'important');
        root.style.setProperty('--color-button', '#00ff5a', 'important');
        root.style.setProperty('--color-button--hover', '#fff', 'important');
        root.style.setProperty('--color-button--active', '#00ff5a', 'important');

        // Codex (checkbox/radio)
        root.style.setProperty('--cdx-color-accent', '#00ff5a', 'important');
        root.style.setProperty('--cdx-color-accent--hover', '#00ff5a', 'important');
        root.style.setProperty('--cdx-color-accent--active', '#00ff5a', 'important');
        root.style.setProperty('--cdx-color-accent--focus', '#00ff5a', 'important');
        root.style.setProperty('--cdx-color-accent--selected', '#00ff5a', 'important');
        root.style.setProperty('--cdx-color-accent--checked', '#00ff5a', 'important');
        root.style.setProperty('--cdx-color-accent--pressed', '#00ff5a', 'important');
        root.style.setProperty('--cdx-color-accent--visited', '#888888', 'important');
        root.style.setProperty('--cdx-color-accent--disabled', '#00ff5a', 'important');
        root.style.setProperty('--cdx-color-accent--readonly', '#00ff5a', 'important');

        // Fond et texte du body
        document.body.style.background = '#000';
        document.body.style.color = '#fff';

        // CSS général
        var css = `
            /* Styles de base */
            body, .mw-body, .vector-body, .vector-page-container {
                background: #000 !important;
                color: #fff !important;
            }

            /* Container responsive */
            .vector-page-container {
                max-width: 100% !important;
                padding: 0 !important;
            }

            /* Header responsive */
            .vector-header-container {
                padding: 0.5rem 1rem !important;
            }
            .vector-header-start {
                padding: 0.5rem 0 !important;
            }
            .vector-header-end {
                padding: 0.5rem 0 !important;
            }

            /* Menu principal responsive */
            .vector-main-menu {
                background: #000 !important;
                border-color: #00ff5a !important;
            }
            .vector-main-menu .vector-menu-content {
                background: #000 !important;
            }
            .vector-main-menu .vector-menu-content-list {
                padding: 0.5rem !important;
            }
            .vector-main-menu .vector-menu-content-item {
                padding: 0.5rem !important;
            }
            .vector-main-menu .vector-menu-content-item a {
                color: #00ff5a !important;
            }
            .vector-main-menu .vector-menu-content-item a:hover {
                color: #fff !important;
            }

            /* Menu latéral responsive */
            .vector-sidebar {
                background: #000 !important;
                border-color: #00ff5a !important;
            }
            .vector-sidebar .vector-menu-heading {
                color: #00ff5a !important;
                border-color: #00ff5a !important;
            }
            .vector-sidebar .vector-menu-content {
                background: #000 !important;
            }
            .vector-sidebar .vector-menu-content-list {
                padding: 0.5rem !important;
            }
            .vector-sidebar .vector-menu-content-item {
                padding: 0.5rem !important;
            }
            .vector-sidebar .vector-menu-content-item a {
                color: #00ff5a !important;
            }
            .vector-sidebar .vector-menu-content-item a:hover {
                color: #fff !important;
            }

            /* Liens visités */
            a:visited {
                color: #888888 !important;
            }
            a:visited:hover {
                color: #fff !important;
            }

            /* Boutons d'épinglage/désépinglage Vector */
            .vector-pinnable-header-toggle-button {
                display: inline-block !important;
                background: #000 !important;
                border: 2px solid #00ff5a !important;
                color: #00ff5a !important;
                padding: 4px 8px !important;
                font-size: 0.75rem !important;
                border-radius: 2px !important;
                cursor: pointer !important;
                transition: background 0.2s, color 0.2s, border-color 0.2s;
            }
            .vector-pinnable-header-toggle-button:hover,
            .vector-pinnable-header-toggle-button:focus {
                background: #00ff5a !important;
                color: #000 !important;
                border-color: #00ff5a !important;
            }

            /* Boutons de recherche et Codex */
            .cdx-button,
            .cdx-search-input__end-button,
            .vector-search-box-button,
            .vector-search-box-input {
                background: #000 !important;
                border: 1px solid #00ff5a !important;
                color: #00ff5a !important;
                transition: background 0.2s, color 0.2s, border-color 0.2s;
            }
            .cdx-button:hover,
            .cdx-button:focus,
            .cdx-search-input__end-button:hover,
            .cdx-search-input__end-button:focus {
                background: #00ff5a !important;
                color: #000 !important;
                border-color: #00ff5a !important;
            }

            /* Barre de recherche responsive */
            .vector-search-box {
                margin: 0.5rem 0 !important;
            }
            .vector-search-box-input {
                background: #111 !important;
                color: #fff !important;
                border: 1px solid #00ff5a !important;
            }

            /* Code, éditeurs, <pre> */
            pre,
            .mw-code,
            .mw-highlight,
            .mw-code pre,
            pre.mw-code,
            pre.prettyprint,
            pre.source,
            pre.plain,
            pre.diff,
            pre#wpTextbox1,
            textarea,
            textarea#wpTextbox1,
            .CodeMirror,
            .CodeMirror-lines,
            .ve-ce-documentNode {
                background: #111 !important;
                color: #fff !important;
                font-family: 'Fira Mono', 'Consolas', 'Monaco', 'Courier New', monospace !important;
                border-radius: 4px !important;
                border: 1px solid #222 !important;
                overflow-x: auto !important;
                white-space: pre-wrap !important;
                word-wrap: break-word !important;
            }
            .CodeMirror-cursor {
                border-left: 2px solid #fff !important;
            }
            .CodeMirror-gutters {
                background: #111 !important;
                color: #888 !important;
                border-right: 1px solid #222 !important;
            }
            .ve-ce-documentNode {
                background: #111 !important;
                color: #fff !important;
            }

            /* Styles pour les pages spéciales */
            .mw-specialpage,
            .mw-htmlform,
            .mw-htmlform-field-HTMLTextField,
            .mw-htmlform-field-HTMLPasswordField,
            .mw-htmlform-field-HTMLCheckField {
                background: #000 !important;
                color: #fff !important;
            }
            .mw-specialpage input,
            .mw-specialpage select,
            .mw-specialpage textarea {
                background: #111 !important;
                color: #fff !important;
                border: 1px solid #00ff5a !important;
            }
            .mw-message-box,
            .error,
            .warning,
            .success {
                background: #111 !important;
                color: #fff !important;
                border: 1px solid #00ff5a !important;
            }

            /* Styles pour les menus et la navigation */
            .vector-menu-content,
            .vector-menu-dropdown,
            .vector-menu-tabs,
            .vector-menu-tabs-list {
                background: #000 !important;
                border-color: #00ff5a !important;
            }
            .vector-menu-tabs .selected a,
            .vector-menu-tabs .selected a:hover {
                background: #000 !important;
                color: #00ff5a !important;
                border: 1px solid #00ff5a !important;
                border-bottom: none !important;
            }
            .vector-menu-tabs a:hover {
                background: #111 !important;
                color: #00ff5a !important;
            }

            /* Styles spécifiques pour les liens visités dans les menus */
            .vector-menu-tabs a:visited {
                color: #888888 !important;
            }
            .vector-menu-tabs a:visited:hover {
                color: #00ff5a !important;
            }

            /* Tableaux responsifs */
            .mw-content-ltr table {
                width: 100% !important;
                overflow-x: auto !important;
                display: block !important;
            }

            /* Images responsives */
            .mw-file-element {
                max-width: 100% !important;
                height: auto !important;
            }

            /* Contenu principal */
            .vector-body {
                padding: 1rem !important;
            }
            .vector-body-content {
                background: #000 !important;
                color: #fff !important;
            }

            /* Pied de page */
            .vector-footer {
                background: #000 !important;
                border-color: #00ff5a !important;
                padding: 1rem !important;
            }
            .vector-footer .vector-footer-content {
                color: #fff !important;
            }
            .vector-footer a {
                color: #00ff5a !important;
            }
            .vector-footer a:hover {
                color: #fff !important;
            }
        `;

        // Injection du style
        var style = document.getElementById('custom-dark-style');
        if (!style) {
            style = document.createElement('style');
            style.id = 'custom-dark-style';
            document.head.appendChild(style);
        }
        style.innerHTML = css;
        // Forcer le fond noir sur le body et les containers principaux en dernier recours
        document.querySelectorAll('body, .mw-body, .vector-body, .vector-page-container').forEach(function(el) {
            el.setAttribute('style', 'background: #000 !important; color: #fff !important;');
        });
    }

    // Appliquer les styles immédiatement
    applyStyles();

    // Réappliquer les styles après un court délai pour s'assurer qu'ils sont bien appliqués
    setTimeout(applyStyles, 100);

    // Réappliquer les styles après le chargement complet de la page
    window.addEventListener('load', applyStyles);

    // Observer les changements dans le DOM pour réappliquer les styles si nécessaire
    var observer = new MutationObserver(function(mutations) {
        applyStyles();
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
});