config.html

<div id="BGEnhanced-Extra-Dom">
    <section class="transparency">
        <h1 class="title">
            <strong>Material附加歌单容器的透明</strong>
        </h1>
        <div class="item_container">
            <span>歌单列表的背景透明</span>
            <input type="checkbox" class="switch-btn enabled">
            <span>(关闭-背景半透)</span>
        </div>
    </section>
    <section class="pointermove">
        <h1 class="title">
            <strong>正在操作时</strong>
            <button class="u-ibtn5 u-ibtnsz8 apply">立即应用</button>
            <button class="u-ibtn5 u-ibtnsz8 reset">恢复默认</button>
        </h1>
        <div class="item_container">
            <span>跟随指针：</span>
            <input type="checkbox" class="switch-btn followPointerSwitch">
            <span>(关闭后，背景不再跟随指针移动)</span>
        </div>
        <div class="item_container">
            <span>过度：</span>
            <input type="number" class="u-txt sc-flag number-input transitionDelay" step="50">
            <span>毫秒(ms)</span>
        </div>
        <div class="item_container">
            <span>缩放：</span>
            <input type="number" class="u-txt sc-flag number-input transformScale" step="1">
            <span>百分比(%)</span>
        </div>
        <div class="item_container">
            <span>模糊：</span>
            <input type="number" class="u-txt sc-flag number-input filterBlur" step="1">
            <span>像素(px)</span>
        </div>
        <div class="item_container">
            <span>亮度：</span>
            <input type="number" class="u-txt sc-flag number-input filterBrightness" step="1">
            <span>百分比(%)</span>
        </div>
        <div class="item_container">
            <span>饱和：</span>
            <input type="number" class="u-txt sc-flag number-input filterSaturate" step="1">
            <span>百分比(%)</span>
        </div>
    </section>

    <hr />

<section class="pointerIdle">
    <h1 class="title">
        <strong>无操作时</strong>
        <button class="u-ibtn5 u-ibtnsz8 apply">立即应用</button>
        <button class="u-ibtn5 u-ibtnsz8 reset">恢复默认</button>
    </h1>

    <div class="item_container">
        <span>启用空闲检测：</span>
        <input type="checkbox" class="switch-btn enabled">
        <span>(鼠标静止一段时间后应用下方设置)</span>
    </div>

    <div class="item_container">
        <span>等待：</span>
        <input type="number" class="u-txt sc-flag number-input time" step="500">
        <span>毫秒(ms)（1秒=1000ms）</span>
    </div>

    <div class="item_container">
        <span>过度：</span>
        <input type="number" class="u-txt sc-flag number-input transitionDelay" step="50">
        <span>毫秒(ms)</span>
    </div>

    <div class="item_container">
        <span>缩放：</span>
        <input type="number" class="u-txt sc-flag number-input transformScale" step="1">
        <span>百分比(%)</span>
    </div>

    <div class="item_container">
        <span>模糊：</span>
        <input type="number" class="u-txt sc-flag number-input filterBlur" step="1">
        <span>像素(px)</span>
    </div>

    <div class="item_container">
        <span>亮度：</span>
        <input type="number" class="u-txt sc-flag number-input filterBrightness" step="1">
        <span>百分比(%)</span>
    </div>

    <div class="item_container">
        <span>饱和：</span>
        <input type="number" class="u-txt sc-flag number-input filterSaturate" step="1">
        <span>百分比(%)</span>
    </div>
</section>

    <hr />

    <section class="pointerleave">
        <h1 class="title">
            <strong>指针离开</strong>
            <button class="u-ibtn5 u-ibtnsz8 apply">立即应用</button>
            <button class="u-ibtn5 u-ibtnsz8 reset">恢复默认</button>
        </h1>
        <div class="item_container">
            <span>过度：</span>
            <input type="number" class="u-txt sc-flag number-input transitionDelay" step="50">
            <span>毫秒(ms)</span>
        </div>
        <div class="item_container">
            <span>缩放：</span>
            <input type="number" class="u-txt sc-flag number-input transformScale" step="1">
            <span>百分比(%)</span>
        </div>
        <div class="item_container">
            <span>模糊：</span>
            <input type="number" class="u-txt sc-flag number-input filterBlur" step="1">
            <span>像素(px)</span>
        </div>
        <div class="item_container">
            <span>亮度：</span>
            <input type="number" class="u-txt sc-flag number-input filterBrightness" step="1">
            <span>百分比(%)</span>
        </div>
        <div class="item_container">
            <span>饱和：</span>
            <input type="number" class="u-txt sc-flag number-input filterSaturate" step="1">
            <span>百分比(%)</span>
        </div>
    </section>

    <hr />

    <section class="windowFocus">
        <h1 class="title">
            <strong>窗口聚焦</strong>
            <button class="u-ibtn5 u-ibtnsz8 apply">立即应用</button>
            <button class="u-ibtn5 u-ibtnsz8 reset">恢复默认</button>
        </h1>
        <div class="item_container">
            <span>过度：</span>
            <input type="number" class="u-txt sc-flag number-input transitionDelay" step="50">
            <span>毫秒(ms)</span>
        </div>
        <div class="item_container">
            <span>缩放：</span>
            <input type="number" class="u-txt sc-flag number-input transformScale" step="1">
            <span>百分比(%)</span>
        </div>
        <div class="item_container">
            <span>模糊：</span>
            <input type="number" class="u-txt sc-flag number-input filterBlur" step="1">
            <span>像素(px)</span>
        </div>
        <div class="item_container">
            <span>亮度：</span>
            <input type="number" class="u-txt sc-flag number-input filterBrightness" step="1">
            <span>百分比(%)</span>
        </div>
        <div class="item_container">
            <span>饱和：</span>
            <input type="number" class="u-txt sc-flag number-input filterSaturate" step="1">
            <span>百分比(%)</span>
        </div>
    </section>

    <hr />

    <section class="windowBlur">
        <h1 class="title">
            <strong>窗口失焦</strong>
            <button class="u-ibtn5 u-ibtnsz8 apply">立即应用</button>
            <button class="u-ibtn5 u-ibtnsz8 reset">恢复默认</button>
        </h1>
        <div class="item_container">
            <span>过度：</span>
            <input type="number" class="u-txt sc-flag number-input transitionDelay" step="50">
            <span>毫秒(ms)</span>
        </div>
        <div class="item_container">
            <span>缩放：</span>
            <input type="number" class="u-txt sc-flag number-input transformScale" step="1">
            <span>百分比(%)</span>
        </div>
        <div class="item_container">
            <span>模糊：</span>
            <input type="number" class="u-txt sc-flag number-input filterBlur" step="1">
            <span>像素(px)</span>
        </div>
        <div class="item_container">
            <span>亮度：</span>
            <input type="number" class="u-txt sc-flag number-input filterBrightness" step="1">
            <span>百分比(%)</span>
        </div>
        <div class="item_container">
            <span>饱和：</span>
            <input type="number" class="u-txt sc-flag number-input filterSaturate" step="1">
            <span>百分比(%)</span>
        </div>
    </section>
</div>

<style id="BGEnhanced-Extra-Style">
    #BGEnhanced-Extra-Dom .title {
        height: 30px;
        display: flex;
        align-items: center;
        margin: 10px 0;
        gap: 10px;
    }

    #BGEnhanced-Extra-Dom .title strong {
        font-size: 1.25rem;
        font-weight: bold;
    }

    #BGEnhanced-Extra-Dom hr {
        margin: 20px 0;
        border: none;
        height: 1px;
        background-color: rgba(255, 255, 255, 0.2);
    }

    body.s-theme-white #BGEnhanced-Extra-Dom hr {
        background-color: rgba(0, 0, 0, 0.2);
    }

    #BGEnhanced-Extra-Dom .item_container {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        margin: 5px 0;
        min-height: 30px;
    }

    #BGEnhanced-Extra-Dom .item_container input.number-input {
        width: 100px;
    }

    #BGEnhanced-Extra-Dom .item_container input.u-txt {
        border-radius: 4px;
    }

    #BGEnhanced-Extra-Dom .item_container input.switch-btn {
        width: 44px;
        height: 22px;
        appearance: none;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        position: relative;
    }

    #BGEnhanced-Extra-Dom .item_container input.switch-btn::before {
        content: "关";
        text-align: center;
        line-height: 18px;
        font-size: 12px;
        position: absolute;
        top: 1px;
        left: 1px;
        height: 18px;
        width: 18px;
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        transition: all 0.1s ease-out;
    }

    #BGEnhanced-Extra-Dom .item_container input.switch-btn:checked {
        background-color: rgba(255, 255, 255, 0.1);
    }

    #BGEnhanced-Extra-Dom .item_container input.switch-btn:checked::before {
        content: "开";
        text-align: center;
        line-height: 18px;
        font-size: 12px;
        left: calc(100% - 19px);
    }

    body.s-theme-white #BGEnhanced-Extra-Dom .item_container input.switch-btn {
        border: 1px solid rgba(0, 0, 0, 0.15);
    }

    body.s-theme-white #BGEnhanced-Extra-Dom .item_container input.switch-btn::before {
        background-color: rgba(0, 0, 0, 0.3);
    }

    body.s-theme-white #BGEnhanced-Extra-Dom .item_container input.switch-btn:checked {
        background-color: rgba(0, 0, 0, 0.1);
    }
</style>