Greasy Fork is available in English.
Enhance the visual appearance and usability of the X岛揭示板page
当前为
// ==UserScript==
// @name X岛页面美化
// @namespace http://tampermonkey.net/
// @version 1.0
// @license MIT
// @description Enhance the visual appearance and usability of the X岛揭示板page
// @author Your Name
// @match *://*.nmbxd1.com/*
// @grant none
// @require https://code.jquery.com/jquery-3.6.0.min.js
// ==/UserScript==
(function () {
'use strict';
// Add custom styles
const styles = `
/*底部*/
#h-bottom-nav {display: flex;justify-content: center;color: #cfcfcf;display: none;box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);transition: opacity 0.3s ease, visibility 0.3s ease;border: none;font-size: 12px}
#h-bottom-nav a {margin: 0 5px;color: #cfcfcf;font-size: 12px}
#h-menu {height: 100% !important;width: 240px;overflow: inherit;}
#h-content {margin: auto auto 68px 240px;display: flex;flex-direction: column;align-items: center;}
#h-active {height: 900px}
.h-threads-item {background-color: #f9f9f9;border-radius: 10px;padding: 15px;margin-bottom: 10px;}
.h-threads-info-title {font-size: 1.5em;font-weight: bold;color: #333;}
.h-threads-info {margin-bottom: 10px;}
.h-threads-content {line-height: 1.6;color: #555;}
/*图片*/
.h-threads-img-box {position: relative;display: inline-block;}
.h-threads-img-box::after {content: '';position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background: rgba(0, 0, 0, 0);transition: background 0.3s ease;z-index: 1;pointer-events: none;}
.h-threads-img-box:hover::after {background: rgba(0, 0, 0, 0.5);}
.h-threads-img {display: block;max-width: 100%;height: auto;border-radius: 5px;transition: transform 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease;}
.h-threads-img:hover {position: relative;transform: translateX(160px) translateY(0px) scale(2.5) translateZ(0px);z-index: 9999;border-radius: 0px}
.h-threads-img:hover div.h-threads-item-index{overflow: inherit;}
.h-threads-item-reply {background-color: #f0f0f0;border-radius: 10px;padding: 10px;margin-top: 10px;}
.h-threads-item .h-threads-tips {color: #dbdbdb;}
.h-threads-item .h-threads-item-main .h-threads-content{margin: 15px 0px;}
.h-threads-item .h-threads-item-replies .h-threads-item-reply {width: 100%;margin: 20px auto;padding: 10px 0;}
.h-threads-item .h-threads-item-replies .h-threads-item-reply .h-threads-item-reply-icon{display:none;}
.h-threads-item .h-threads-item-replies .h-threads-item-reply .h-threads-item-reply-main {background-color: #f0f0f0;}
.h-threads-item .h-threads-item-replies .h-threads-item-reply .h-threads-item-reply-main .h-threads-info {font-size: 14px;line-height: 22px;margin: 5px 40px;color:#22222250;}
.h-threads-item .h-threads-item-replies .h-threads-item-reply .h-threads-item-reply-main .h-threads-info .h-threads-info-title {font-size: 14px;color:#22222250;}
.h-threads-item .h-threads-item-replies .h-threads-item-reply .h-threads-item-reply-main .h-threads-info .h-threads-info-email {color:#22222250;}
.h-threads-item .h-threads-item-replies .h-threads-item-reply .h-threads-item-reply-main .h-threads-info .h-threads-info-createdat {color:#22222250;}
.h-threads-item .h-threads-item-replies .h-threads-item-reply .h-threads-item-reply-main .h-threads-info .h-threads-info-uid {color:#22222250;}
.h-threads-item .h-threads-info-report-btn {float: right;color:#22222220;}
.h-threads-item .h-threads-info-report-btn a{color:#22222220;}
.h-threads-item .h-threads-item-replies .h-threads-item-reply .h-threads-item-reply-main .h-threads-info .h-threads-info-id {color:#22222250;}
.h-threads-item .h-threads-item-replies .h-threads-item-reply .h-threads-item-reply-main .h-threads-content {margin: 10px 40px;}
.h-threads-item .h-threads-item-replies .h-threads-item-reply .h-threads-item-reply-main .h-threads-content font{float: right;color: #22222220;font-size: 14px}
.h-threads-item .h-threads-item-replies .h-threads-item-reply .h-threads-item-reply-main .h-threads-content br:first-of-type{display:none;}
.h-threads-item .h-threads-img-box.h-active .h-threads-img-a .h-threads-img {max-height: 800px;}
.h-threads-item .h-threads-img-box .h-threads-img-a .h-threads-img {margin: 0 20px 10px 0;}
#h-post-form {display: block;width: 100%;}
#h-post-form .h-post-form-title {border-radius: 2px;background-color: #f9f9f9;}
div.h-threads-item-reply.h-threads-item-reply-selected > div.h-threads-item-reply-main, div.h-threads-item.uk-clearfix.h-threads-item-selected > div.h-threads-item-main {box-shadow:none}
#h-post-form .h-post-form-title, #h-post-form .h-post-form-input, #h-post-form .h-post-form-option {padding: 0;}
.uk-width-1-6 {flex-basis: 20% !important;}
.uk-width-1-6 {width: 20% !important;}
.uk-width-1-5, .uk-width-2-10 {width: 20% !important;}
#h-post-form .h-post-form-textarea {padding:10px !important;}
/* 整体表单样式 */
.uk-container-center form {
margin: 0 auto;
padding: 20px 20px 0 20px;
background-color: #f9f9f9;
border-radius: 10px;
}
/* 表单标题样式 */
.h-post-form-title {
font-weight: bold;
margin-bottom: 5px;
}
/* 表单输入框和选项样式 */
.h-post-form-input {
margin-bottom: 10px;
}
#h-emot-select{border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box;padding: 8px;}
/* 文本输入框样式 */
.uk-container-center input[type="text"],
.uk-container-center input[type="file"],
.uk-container-center textarea {
width: 100%;
padding: 8px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box; /* 使输入框宽度包括内边距和边框，而不会影响宽度 */
}
/* 文本输入框样式 */
.uk-container-center input[type="file"] {
width: 100%;
padding: 8px;
font-size: 14px;
border-radius: 4px;border: none;
box-sizing: border-box; /* 使输入框宽度包括内边距和边框，而不会影响宽度 */
}
/* 提交按钮样式 */
.uk-container-center input[type="submit"] {
padding: 6px 20px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin: 0 0 0 10%;
width: 90%;
}
.uk-container-center input[type="submit"]:hover {
background-color: #45a049;
}
/* 复选框样式 */
.uk-container-center label.h-water-tool {
display: block;
margin-top: 8px;
font-size: 14px;
}
/* 响应式网格布局 */
.uk-grid {
display: flex;
flex-wrap: wrap;
}
.uk-width-1-5,
.uk-width-3-5,
.uk-width-1-6 {
flex: 0 0 auto;
box-sizing: border-box;
padding-right: 10px;
}
/* 清除浮动 */
.h-post-form-grid::after {
content: "";
display: table;
clear: both;
}
/* 文本域样式 */
.h-post-form-textarea {
width: 100%;
padding: 8px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical; /* 允许垂直调整文本域大小 */
}
`;
// 添加样式
const styleSheet = document.createElement("style");
styleSheet.type = "text/css";
styleSheet.innerText = styles;
document.head.appendChild(styleSheet);
// Enhance image tool buttons functionality
$(document).on('click', '.h-threads-img-tool-left', function () {
const img = $(this).closest('.h-threads-img-box').find('.h-threads-img');
img.css('transform', 'rotate(-90deg)');
});
$(document).on('click', '.h-threads-img-tool-right', function () {
const img = $(this).closest('.h-threads-img-box').find('.h-threads-img');
img.css('transform', 'rotate(90deg)');
});
// Add toggle functionality for content visibility
$('.h-threads-img-tool-small').click(function () {
const content = $(this).closest('.h-threads-item-main').find('.h-threads-content');
content.toggle();
$(this).find('i').toggleClass('uk-icon-minus uk-icon-plus');
});
// 替换图片地址
$(document).ready(function() {
$('img[src*="https://image.nmb.best/thumb"]').each(function() {
$(this).attr('src', $(this).attr('src').replace('https://image.nmb.best/thumb', 'https://image.nmb.best/image'));
});
});
// 解决图片hover父元素overflow问题
$(document).ready(function() {
$('.h-threads-img-box').hover(
function() {
var $parent = $(this).closest('.h-threads-item');
if ($parent.css('overflow-y') !== 'hidden') {
$parent.data('overflow-y', $parent.css('overflow-y')); // 存储原始overflow-y值
$parent.css('overflow-y', 'inherit'); // 设置为inherit
}
},
function() {
var $parent = $(this).closest('.h-threads-item');
var originalOverflowY = $parent.data('overflow-y'); // 恢复原始overflow-y值
if (originalOverflowY !== undefined) {
$parent.css('overflow-y', originalOverflowY);
}
}
);
});
// 隐藏底部
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
$('#h-bottom-nav').css('display', 'flex');
} else {
$('#h-bottom-nav').css('display', 'none');
}
});
})();