打开/关闭菜单
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

MediaWiki:Citizen.js:修订间差异

MediaWiki界面页面
OnlyOTO留言 | 贡献
无编辑摘要
OnlyOTO留言 | 贡献
无编辑摘要
第9行: 第9行:
     document.body.appendChild(ptr);
     document.body.appendChild(ptr);


    // 核心:明暗模式自动变色CSS
     const css = document.createElement('style');
     const css = document.createElement('style');
     css.textContent = `
     css.textContent = `
    /* 默认白天亮色:原版荧光绿 */
/* 浅色模式:原版亮绿 */
    .magnetic-true-corner i{
.magnetic-true-corner i{
        position:absolute;
    position:absolute;
        width:14px;height:14px;
    width:14px;height:14px;
        border:2px solid #17f700;
    border:2px solid #17f700;
        background:transparent!important;
    background:transparent!important;
        box-shadow:none!important;
    box-shadow:none!important;
    }
}
    /* Citizen深色/暗夜模式 自动变色 */
/* ========== Citizen 真正暗黑模式精准匹配 ========== */
    body.skin-citizen--dark .magnetic-true-corner i,
html[data-color-scheme="dark"] .magnetic-true-corner i {
    body.theme-dark .magnetic-true-corner i,
    border-color: #4fc3f7 !important;
    html[data-theme="dark"] .magnetic-true-corner i{
}
        border-color: #4fc3f7 !important;
    }


    .magnetic-true-corner{
.magnetic-true-corner{
        position:fixed;
    position:fixed;
        left:0;top:0;
    left:0;top:0;
        width:0;height:0;
    width:0;height:0;
        pointer-events:none;
    pointer-events:none;
        z-index:999999!important;
    z-index:999999!important;
    }
}
    .magnetic-true-corner i:nth-child(1){top:-2px;left:-2px;border-right:none;border-bottom:none;}
.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(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(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;}
.magnetic-true-corner i:nth-child(4){bottom:-2px;right:-2px;border-left:none;border-top:none;}
     `;
     `;
     document.head.appendChild(css);
     document.head.appendChild(css);
第51行: 第48行:
     });
     });


    // 顺滑磁吸动画保留
     function loop(){
     function loop(){
         const ease = 0.15;
         const ease = 0.15;
第82行: 第78行:
     loop();
     loop();


     // 全覆盖:Citizen原生 + 你的自定义按钮 + Commentstreams插件
     // 保留你所有自定义按钮 + commentstreams + citizen原生
     const sel = [
     const sel = [
         '.citizen-nav a',
         '.citizen-nav a',

2026年3月31日 (二) 16:10的版本

(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 i{
    position:absolute;
    width:14px;height:14px;
    border:2px solid #17f700;
    background:transparent!important;
    box-shadow:none!important;
}
/* ========== Citizen 真正暗黑模式精准匹配 ========== */
html[data-color-scheme="dark"] .magnetic-true-corner i {
    border-color: #4fc3f7 !important;
}

.magnetic-true-corner{
    position:fixed;
    left:0;top:0;
    width:0;height:0;
    pointer-events:none;
    z-index:999999!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;
    let smoothX = 0, smoothY = 0;
    let curW = 40, curH = 40;

    document.addEventListener('mousemove', e => {
        mx = e.clientX;
        my = e.clientY;
    });

    function loop(){
        const ease = 0.15;
        if(hoverEl){
            const r = hoverEl.getBoundingClientRect();
            const targetX = r.left + r.width / 2;
            const targetY = r.top + r.height / 2;
            smoothX += (targetX - smoothX) * ease;
            smoothY += (targetY - smoothY) * ease;
            curW = r.width;
            curH = r.height;

            ptr.style.left = (smoothX - curW / 2) + 'px';
            ptr.style.top = (smoothY - curH / 2) + 'px';
            ptr.style.width = curW + 'px';
            ptr.style.height = curH + 'px';
        }else{
            curW = 40;
            curH = 40;
            smoothX += (mx - smoothX) * ease;
            smoothY += (my - smoothY) * ease;

            ptr.style.left = (smoothX - 20) + 'px';
            ptr.style.top = (smoothY - 20) + 'px';
            ptr.style.width = curW + 'px';
            ptr.style.height = curH + 'px';
        }
        requestAnimationFrame(loop);
    }
    loop();

    // 保留你所有自定义按钮 + commentstreams + 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',
        '._target',
        '.commentstreams-button',
        '.commentstreams-submit',
        '.commentstreams-header button',
        '.commentstreams-box button',
        '.mw-ui-button',
        'button',
        'a[role="button"]'
    ].join(',');

    function bind(){
        document.querySelectorAll(sel).forEach(el=>{
            if(el._magBind)return;
            el._magBind = 1;
            el.addEventListener('mouseenter', ()=> hoverEl = el);
            el.addEventListener('mouseleave', ()=> hoverEl = null);
        });
    }

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