MediaWiki:Citizen.js

注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。

• Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
• Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
• Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。

/* 这里所有JavaScript都会加载给Citizen皮肤的用户 */
(function() {
if( window.magneticCursorInit ) return;
window.magneticCursorInit = true;

mw.loader.using( [], function() {
    // 创建四角光标
    const ptr = document.createElement('div');
    ptr.className = 'magnetic-true-corner';
    ptr.innerHTML = `<i></i><i></i><i></i><i></i>`;
    document.body.appendChild(ptr);

    // 强制覆盖样式：纯四角镂空，永不方块
    const css = document.createElement('style');
    css.textContent = `
    .magnetic-true-corner{
        position:fixed;left:0;top:0;
        width:0;height:0;
        pointer-events:none;z-index:999999!important;
        transition:none;will-change:left,top;
    }
    .magnetic-true-corner i{
        position:absolute;width:14px;height:14px;
        border:2px solid #17f700;border-radius:2px;
        background:transparent!important;box-shadow:none!important;
    }
    .magnetic-true-corner i:nth-child(1){top:-2px;left:-2px;border-right:none;border-bottom:none;}
    .magnetic-true-corner i:nth-child(2){top:-2px;right:-2px;border-left:none;border-bottom:none;}
    .magnetic-true-corner i:nth-child(3){bottom:-2px;left:-2px;border-right:none;border-top:none;}
    .magnetic-true-corner i:nth-child(4){bottom:-2px;right:-2px;border-left:none;border-top:none;}
    `;
    document.head.appendChild(css);

    let hoverEl = null;
    let mx=0,my=0;

    // 鼠标实时位置
    document.addEventListener('mousemove',e=>{mx=e.clientX;my=e.clientY;});

    // 帧更新：精准贴元素四角
    function loop(){
        if(hoverEl){
            const r = hoverEl.getBoundingClientRect();
            ptr.style.left = r.left + 'px';
            ptr.style.top = r.top + 'px';
            ptr.style.width = r.width + 'px';
            ptr.style.height = r.height + 'px';
        }else{
            // 跟随鼠标缩小光标
            ptr.style.left = (mx - 20) + 'px';
            ptr.style.top = (my - 20) + 'px';
            ptr.style.width = '40px';
            ptr.style.height = '40px';
        }
        requestAnimationFrame(loop);
    }
    loop();

    // ✅ Citizen 皮肤【官方原生真实选择器】一个不漏
    const sel = [
        '.citizen-nav a',
        '.citizen-menu a',
        '.citizen-button',
        '.citizen-action-button',
        '.cdx-button',
        '.mw-editsection a',
        '#citizen-header__nav a',
        '.citizen-sidebar a'
    ].join(',');

    // 绑定+防重复
    function bind(){
        document.querySelectorAll(sel).forEach(el=>{
            if(el._magBind)return;
            el._magBind=1;
            el.onmouseenter=()=>hoverEl=el;
            el.onmouseleave=()=>hoverEl=null;
        });
    }

    bind();
    new MutationObserver(bind).observe(document.body,{childList:true,subtree:true});
});
})();