可自定义按钮样式的洛谷专注模式
// ==UserScript==
// @name 洛谷专注模式
// @namespace http://tampermonkey.net/
// @version 0.2
// @description 可自定义按钮样式的洛谷专注模式
// @author zhangruixiang
// @match https://www.luogu.com.cn/problem/*
// @grant GM_addStyle
// ==/UserScript==
(function() {
'use strict';
// ====================== 自定义区域 ======================
// 在这里修改按钮样式和位置（所有数值均可自由调整）
const buttonConfig = {
text: {
normal: "专注模式", // 默认状态文字
active: "退出专注" // 专注模式状态文字
},
position: {
top: "80px", // 距离顶部距离（支持px/rem/vh等）
left: "100px", // 距离左侧距离（留空则为右侧按钮）
right: "", // 距离右侧距离
bottom: "" // 距离底部距离
},
style: {
padding: "8px 15px",
background: "linear-gradient(135deg, #6e8efb, #a777e3)", // 渐变背景色
color: "white",
border: "none",
borderRadius: "50px", // 圆形按钮可设为50%
fontSize: "14px",
fontWeight: "bold",
boxShadow: "0 4px 10px rgba(0,0,0,0.2)",
cursor: "pointer",
transition: "all 0.3s ease" // 悬停动画效果
},
hoverStyle: { // 鼠标悬停时的样式变化
transform: "scale(1.05)",
boxShadow: "0 6px 15px rgba(0,0,0,0.3)"
}
};
// ======================================================
// 创建样式表
GM_addStyle(`
#luogu-focus-btn {
position: fixed;
z-index: 9999;
${buttonConfig.position.top ? `top: ${buttonConfig.position.top};` : ''}
${buttonConfig.position.left ? `left: ${buttonConfig.position.left};` : ''}
${buttonConfig.position.right ? `right: ${buttonConfig.position.right};` : ''}
${buttonConfig.position.bottom ? `bottom: ${buttonConfig.position.bottom};` : ''}
padding: ${buttonConfig.style.padding};
background: ${buttonConfig.style.background};
color: ${buttonConfig.style.color};
border: ${buttonConfig.style.border};
border-radius: ${buttonConfig.style.borderRadius};
font-size: ${buttonConfig.style.fontSize};
font-weight: ${buttonConfig.style.fontWeight};
box-shadow: ${buttonConfig.style.boxShadow};
cursor: ${buttonConfig.style.cursor};
transition: ${buttonConfig.style.transition};
}
#luogu-focus-btn:hover {
transform: ${buttonConfig.hoverStyle.transform};
box-shadow: ${buttonConfig.hoverStyle.boxShadow};
}
`);
// 创建按钮
const toggleButton = document.createElement('button');
toggleButton.id = 'luogu-focus-btn';
toggleButton.textContent = buttonConfig.text.normal;
document.body.appendChild(toggleButton);
// 定义需要隐藏的元素选择器
const elementsToHide = [
'#header', // 顶部导航栏
'.side', // 侧边栏
'.footer', // 页脚
'.problem-btn-group' // 题目按钮组（可选）
];
let isFocusMode = false;
// 切换专注模式
toggleButton.addEventListener('click', () => {
isFocusMode = !isFocusMode;
toggleButton.textContent = isFocusMode ? buttonConfig.text.active : buttonConfig.text.normal;
if (isFocusMode) {
// 隐藏非题目内容
elementsToHide.forEach(selector => {
const element = document.querySelector(selector);
if (element) element.style.display = 'none';
});
// 调整题目区域
const problemContent = document.querySelector('.problem-content');
if (problemContent) {
problemContent.style.margin = '0 auto';
problemContent.style.maxWidth = '1000px'; // 可调整题目区域宽度
}
} else {
// 恢复显示
elementsToHide.forEach(selector => {
const element = document.querySelector(selector);
if (element) element.style.display = '';
});
const problemContent = document.querySelector('.problem-content');
if (problemContent) {
problemContent.style.margin = '';
problemContent.style.maxWidth = '';
}
}
});
})();