Mippedia

MediaWiki:Common.js: Perbedaan antara revisi

← Revisi sebelumnyaRevisi selanjutnya →

Mippedia Patroli (bicara | kontrib)

8 grup pengguna
512 suntingan
Tidak ada ringkasan suntingan
Tanda: Suntingan perangkat seluler Suntingan peramban seluler
Tidak ada ringkasan suntingan
Tanda: Suntingan perangkat seluler Suntingan peramban seluler
Baris 1.327: Baris 1.327:


/* ==========================================================
/* ==========================================================
   🌙 MIPPEDIA DARK MODE ENGINE
   🌙 MIPPEDIA DARK MODE ENGINE V2 (FULL COVERAGE)
   Fitur: Toggle Mode Gelap/Terang dengan Memory (Simpan Pilihan)
   Fix: Menjangkau Halaman Terkait, Footer, dan Mobile Cards
   ========================================================== */
   ========================================================== */
(function() {
(function() {
    // 1. Definisikan Gaya Dark Mode (CSS)
     var darkModeStyles = `
     var darkModeStyles = `
         /* Warna Dasar */
         /* 1. Global Reset & Content */
         body.mippedia-dark { background-color: #121212 !important; color: #e0e0e0 !important; }
         body.mippedia-dark,
         .mippedia-dark #content, .mippedia-dark #mw-content-text { background-color: #1e1e1e !important; color: #e0e0e0 !important; border-color: #333 !important; }
        .mippedia-dark #content,
       
        .mippedia-dark #mw-content-text,
         /* Link & Header */
        .mippedia-dark .pagelib-hentry {  
            background-color: #121212 !important;  
            color: #e0e0e0 !important;  
        }
 
        /* 2. Fix Halaman Terkait & Cards (Berdasarkan Screenshot) */
         .mippedia-dark .ext-related-articles-card,
        .mippedia-dark .minerva-footer,
        .mippedia-dark .read-more-container,
        .mippedia-dark .mw-ui-card,
        .mippedia-dark .related-article-card {
            background-color: #1e1e1e !important;
            border-color: #333 !important;
            color: #e0e0e0 !important;
        }
        .mippedia-dark .ext-related-articles-card__extract { color: #bbbbbb !important; }
 
        /* 3. Header & Navigation */
        .mippedia-dark .header-container,
        .mippedia-dark .mw-header,
        .mippedia-dark .navigation-drawer {
            background-color: #181818 !important;
            border-bottom: 1px solid #333 !important;
        }
 
         /* 4. Teks, Link, & Judul */
        .mippedia-dark h1, .mippedia-dark h2, .mippedia-dark h3, .mippedia-dark h4 { color: #ffffff !important; }
         .mippedia-dark a { color: #8ab4f8 !important; }
         .mippedia-dark a { color: #8ab4f8 !important; }
         .mippedia-dark a:visited { color: #c58af9 !important; }
         .mippedia-dark a:visited { color: #c58af9 !important; }
         .mippedia-dark h1, .mippedia-dark h2, .mippedia-dark h3 { color: #ffffff !important; border-bottom-color: #333 !important; }
         .mippedia-dark .mw-ui-button { background-color: #2d2d2d !important; color: #fff !important; }
       
 
        /* Kotak Pencarian & Sidebar */
         /* 5. Tombol Saklar Melayang */
        .mippedia-dark input, .mippedia-dark textarea { background-color: #2d2d2d !important; color: #ffffff !important; border: 1px solid #444 !important; }
        .mippedia-dark #mw-panel, .mippedia-dark #p-logo { background-color: #121212 !important; }
       
         /* Tombol Saklar */
         #darkmode-toggle {
         #darkmode-toggle {
             position: fixed;
             position: fixed;
             bottom: 20px;
             bottom: 80px; /* Gue naikin dikit biar gak tabrakan sama tombol Scroll Up */
             right: 20px;
             right: 20px;
             width: 45px;
             width: 50px;
             height: 45px;
             height: 50px;
             background: #3498db;
             background: #3498db;
             color: white;
             color: white;
             border-radius: 50%;
             border-radius: 50%;
             text-align: center;
             text-align: center;
             line-height: 45px;
             line-height: 50px;
             font-size: 22px;
             font-size: 24px;
             cursor: pointer;
             cursor: pointer;
             z-index: 10000;
             z-index: 99999;
             box-shadow: 0 4px 10px rgba(0,0,0,0.3);
             box-shadow: 0 4px 15px rgba(0,0,0,0.5);
             transition: 0.3s;
             transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
             user-select: none;
             user-select: none;
         }
         }
        #darkmode-toggle:hover { transform: scale(1.1); background: #2980b9; }
         .mippedia-dark #darkmode-toggle { background: #f1c40f; color: #333; }
         .mippedia-dark #darkmode-toggle { background: #f1c40f; color: #333; }
     `;
     `;


    // 2. Suntikkan CSS ke Head
     var styleEl = document.createElement('style');
     var styleEl = document.createElement('style');
     styleEl.innerHTML = darkModeStyles;
     styleEl.innerHTML = darkModeStyles;
     document.head.appendChild(styleEl);
     document.head.appendChild(styleEl);


    // 3. Logika Fungsi Toggle
     $(document).ready(function() {
     $(document).ready(function() {
        // Tambahkan tombol saklar ke Body
         var $toggle = $('<div id="darkmode-toggle">🌙</div>');
         var $toggle = $('<div id="darkmode-toggle" title="Ganti Mode Lampu">🌙</div>');
         $('body').append($toggle);
         $('body').append($toggle);


        // Cek memory (localStorage) apakah sebelumnya user pake dark mode
         if (localStorage.getItem('mip-dark-mode') === 'enabled') {
         if (localStorage.getItem('mip-dark-mode') === 'enabled') {
             $('body').addClass('mippedia-dark');
             $('body').addClass('mippedia-dark');
Baris 1.386: Baris 1.402:
         }
         }


        // Event Klik
         $toggle.on('click', function() {
         $toggle.on('click', function() {
             $('body').toggleClass('mippedia-dark');
             $('body').toggleClass('mippedia-dark');
           
             if ($('body').hasClass('mippedia-dark')) {
             if ($('body').hasClass('mippedia-dark')) {
                 localStorage.setItem('mip-dark-mode', 'enabled');
                 localStorage.setItem('mip-dark-mode', 'enabled');
                 $toggle.html('☀️');
                 $(this).html('☀️');
             } else {
             } else {
                 localStorage.setItem('mip-dark-mode', 'disabled');
                 localStorage.setItem('mip-dark-mode', 'disabled');
                 $toggle.html('🌙');
                 $(this).html('🌙');
             }
             }
         });
         });
     });
     });
})();
})();
Diperoleh dari "https://id.mippedia.org/wiki/MediaWiki:Common.js"