Add a clean slider to #upperrightmenu to scale #left-side-wrapper
// ==UserScript==
// @name BGA Modern
// @namespace http://tampermonkey.net/
// @version 2.0
// @description Add a clean slider to #upperrightmenu to scale #left-side-wrapper
// @author Gemini
// @match https://boardgamearena.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=boardgamearena.com
// @grant GM_addStyle
// // @license MIT
// ==/UserScript==
(function() {
'use strict';
// 配置参数
const CONFIG = {
targetId: '#left-side-wrapper',
parentId: '#upperrightmenu', // 目标父容器
sliderId: 'bga-custom-scale-slider-container',
minScale: 0.5,
maxScale: 1.0,
defaultScale: 1.0,
step: 0.05 // 步长改为 0.01
};
// 注入自定义 CSS (为了美化滑块，让它在白色顶栏看不突兀)
const style = document.createElement('style');
style.innerHTML = `
/* 滑块容器 */
#${CONFIG.sliderId} {
display: inline-flex;
align-items: center;
justify-content: center;
height: 100%;
margin-right: 15px; /* 与右侧原有图标的间距 */
vertical-align: middle;
}
/* 移除浏览器默认样式 */
input[type=range].bga-scale-range {
-webkit-appearance: none;
width: 120px !important;
height: 4px;
background: #e0e0e0 !important;
border-radius: 2px;
outline: none;
cursor: pointer;
padding: unset !important;
border: unset !important;
}
/* 滑块圆点 (Chrome/Safari/Edge) */
.bga-scale-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: #2c3e50; /* 深色圆点，符合BGA风格 */
cursor: pointer;
transition: background .15s ease-in-out;
border: 2px solid #fff; /* 白色描边增加层次感 */
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
/* 鼠标悬停变色 */
.bga-scale-range::-webkit-slider-thumb:hover {
background: #4a90e2; /* BGA蓝 */
transform: scale(1.1);
}
/* Firefox 兼容 */
.bga-scale-range::-moz-range-thumb {
width: 14px;
height: 14px;
border: 2px solid #fff;
border-radius: 50%;
background: #2c3e50;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
`;
document.head.appendChild(style);
// 初始化滑块
function initSlider(targetElement, parentElement) {
if (document.getElementById(CONFIG.sliderId)) return;
// 1. 设置目标的 transform-origin
targetElement.style.transformOrigin = 'top center';
targetElement.style.transition = 'transform 0.1s linear'; // 响应更快一点
// 2. 创建容器
const container = document.createElement('div');
container.id = CONFIG.sliderId;
// 3. 创建滑块
const rangeInput = document.createElement('input');
rangeInput.type = 'range';
rangeInput.className = 'bga-scale-range'; // 应用上面定义的CSS类
rangeInput.min = CONFIG.minScale;
rangeInput.max = CONFIG.maxScale;
rangeInput.step = CONFIG.step;
rangeInput.value = CONFIG.defaultScale;
rangeInput.title = `缩放左侧面板 (双击复原)`; // 鼠标悬停提示
// 4. 事件绑定
rangeInput.addEventListener('input', function(e) {
targetElement.style.transform = `scale(${e.target.value})`;
});
// 双击复原
rangeInput.addEventListener('dblclick', function() {
rangeInput.value = 1.0;
targetElement.style.transform = `scale(1)`;
});
// 5. 插入到 #upperrightmenu 的第一个位置
container.appendChild(rangeInput);
parentElement.prepend(container);
}
// 定时检查器
const checkInterval = setInterval(() => {
const target = document.querySelector(CONFIG.targetId); // 左侧面板
const parent = document.querySelector(CONFIG.parentId); // 顶部菜单
const sliderContainer = document.getElementById(CONFIG.sliderId);
// 只有当 左侧面板 和 顶部菜单 同时存在时，才显示滑块
if (target && parent) {
// 确保样式始终生效
if (target.style.transformOrigin !== 'top center') {
target.style.transformOrigin = 'top center';
}
if (!sliderContainer) {
initSlider(target, parent);
}
} else {
// 如果离开了游戏页面（左侧面板消失），则移除顶部的滑块，保持界面整洁
if (sliderContainer) {
sliderContainer.remove();
}
}
}, 1000);
const myCustomStyle = `
.bga-item-shadow-medium,
.bga-page-section-shadow,
.bga-button-holder,
.game_interface #page-title,
.player_board_inner,
.bga-omni-bar:after {
box-shadow: unset !important;
}
.bga-page-section .bga-page-section__content {
background-image: unset;
}
.bga-omni-bar input {
background: unset !important;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.bga-menu-bar {
background: white;
}
.bgabutton_grey,
.bgabutton_gray {
background: white !important;
border: 0.4px solid #ffffff !important;
color: #333;
}
#upperrightmenu {
display: flex;
align-items: center;
margin-right: 12px;
}
/* 遥远之地bug */
.fa_zone_desc {
width: unset !important;
}
`;
/**
* 注入样式函数
* 优先使用 GM_addStyle (油猴内置)，如果不可用则回退到原生 JS 注入
*/
function injectStyle(css) {
if (typeof GM_addStyle !== 'undefined') {
GM_addStyle(css);
} else {
const style = document.createElement('style');
style.textContent = css;
document.head.appendChild(style);
}
}
// 执行注入
injectStyle(myCustomStyle);
// 如果某些样式在页面完全加载后被原站脚本覆盖，可以尝试在 window.onload 时再次注入
window.addEventListener('load', () => {
injectStyle(myCustomStyle);
}, false);
})();