complementary to noir
当前为
// ==UserScript==
// @name bbs stuff
// @version 2.5
// @description complementary to noir
// @author Jerry
// @match *://www.1point3acres.com/*
// @match *://newmitbbs.com/*
// @namespace https://greasyfork.org/en/users/28298
// @homepage https://greasyfork.org/en/scripts/456921
// @license MIT
// ==/UserScript==
// original author: Michael Wang https://greasyfork.org/en/scripts/472251-dark-mode/code
// with help of claude ai
// https://theabbie.github.io
(function () {
// Create a container for the buttons
const buttonContainer = document.createElement('div');
buttonContainer.style.position = 'fixed'; //'absolute'
buttonContainer.style.top = '2px'; // Position at the top
buttonContainer.style.left = '50%'; // Center horizontally
buttonContainer.style.transform = 'translateX(-50%)'; // Adjust for exact horizontal centering
buttonContainer.style.zIndex = '9999'; // Ensure it's on top of other elements
buttonContainer.style.display = 'flex';
buttonContainer.style.flexDirection = 'row'; // Arrange buttons in a row
buttonContainer.style.gap = '10px'; // Equal spacing between buttons
buttonContainer.style.flexWrap = 'wrap'; // Allow buttons to wrap on smaller screens
buttonContainer.style.justifyContent = 'center'; // Center buttons horizontally
buttonContainer.style.alignItems = 'center'; // Center buttons vertically
buttonContainer.style.backgroundColor = 'rgba(255, 255, 255, 0)'; // Transparent background
buttonContainer.style.padding = '5px'; // Smaller padding for the container
buttonContainer.style.borderRadius = '5px'; // Rounded corners for the container
buttonContainer.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)'; // Add a subtle shadow
// Array of button configurations
const buttons = [
{ text: '👾', url: 'https://newmitbbs.com' },
{ text: '💼', url: 'https://www.1point3acres.com/bbs/forum.php?mod=guide&view=hot&mobile=2' }
];
// Create and append buttons using the array
buttons.forEach(buttonConfig => {
const button = createButton(buttonConfig.text, buttonConfig.url);
buttonContainer.appendChild(button);
});
// Append the container to the body
document.body.appendChild(buttonContainer);
// Create style element for dark mode
const bbsDarkStyle = document.createElement('style');
bbsDarkStyle.textContent = `
html {
filter: invert(1) hue-rotate(180deg) contrast(0.8);
}
/** reverse filter for media elements */
img, video, picture, canvas, iframe, embed {
filter: invert(1) hue-rotate(180deg);
}
`;
// Initialize based on system mode
let darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (darkMode) {
document.head.appendChild(bbsDarkStyle);
} else {
document.head.removeChild(bbsDarkStyle);
}
// Function to create a button
function createButton(text, url) {
const button = document.createElement('button');
button.innerText = text;
button.style.padding = '0'; // Remove padding to control size explicitly
button.style.fontSize = '18px'; // Font size
button.style.backgroundColor = 'rgba(255, 255, 255, 0)'; // Transparent background
button.style.color = '#ffffff'; // White text color
button.style.border = 'none'; // Remove default border
button.style.borderRadius = '5px'; // Rounded corners
button.style.cursor = 'pointer'; // Pointer cursor on hover
button.style.transition = 'background-color 0.2s'; // Smooth hover effect
button.style.width = '40px'; // Fixed width
button.style.height = '40px'; // Fixed height
button.style.display = 'flex'; // Use flexbox to center content
button.style.justifyContent = 'center'; // Center content horizontally
button.style.alignItems = 'center'; // Center content vertically
button.onclick = function() {
window.location.href = url;
};
// Add hover effect
button.addEventListener('mouseenter', () => {
button.style.backgroundColor = '#0056b3'; // Darker blue on hover
});
button.addEventListener('mouseleave', () => {
button.style.backgroundColor = 'rgba(255, 255, 255, 0)'; // Restore original color
});
return button;
}
})();