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.1
// @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
// @license MIT
// ==/UserScript==
(function () {
'use strict';
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: auto;border-right: 1px solid #e6e6e6;}
#h-menu a{text-decoration: none;}
/*---滚动条默认显示样式--*/
#h-menu::-webkit-scrollbar-thumb {background-color: #d6f4ff;outline-offset: -2px;outline: 2px solid #fff;-webkit-border-radius: 4px;border: 2px solid #fff;}
#h-menu::-webkit-scrollbar-thumb:hover {background-color: #00bbff;-webkit-border-radius: 4px;}/*---滚动条大小--*/
#h-menu::-webkit-scrollbar {width: 8px;height: 8px;}/*---滚动框背景样式--*/
#h-menu::-webkit-scrollbar-track-piece {background-color: #fff;-webkit-border-radius: 0;}
#h-menu::-webkit-scrollbar-thumb:active{height:50px;background-color:#000;-webkit-border-radius:4px;}
#h-content {margin: auto auto 68px 240px;display: flex;flex-direction: column;align-items: center;}
#h-active {height: 900px}
#h-menu #h-menu-content .h-active {background: #ecf5ff;}
#h-menu #h-menu-content .h-active a{color: #07D;}
.uk-nav-parent-icon>.uk-parent.uk-open>a:before {content: "\\f009";font-family: FontAwesome;margin-right: 5px;}
.uk-nav-parent-icon>.uk-parent>a:before {content: "\\f009";font-family: FontAwesome;margin-right: 5px;}
.uk-nav-sub>li:hover {background: rgba(0, 0, 0, .03);color: #444;outline: 0;box-shadow: inset 0 0 1px rgba(0, 0, 0, .06);text-shadow: 0 -1px 0 #fff;}
.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}
.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;}
#h-post-form .h-post-form-title, #h-post-form .h-post-form-input, #h-post-form .h-post-form-option {padding: 0;}
/* 表单样式 */
.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;}
#progress-bar {position: fixed;top: 0; left: 0;width: 0%; height: 2px;background: #00a8e64a;transition: width 0.2s;border-radius: 2px;}
`;
// 添加样式
const styleSheet = document.createElement("style");
styleSheet.type = "text/css";
styleSheet.innerText = styles;
document.head.appendChild(styleSheet);
// 插入加载条
$('body').prepend('<div id="progress-bar"></div>');
// 模拟页面加载进度
var progress = 0;
var interval = setInterval(function () {
progress += 10;
$('#progress-bar').css('width', progress + '%');
if (progress >= 100) {
clearInterval(interval);
$('#progress-bar').css('width', '100%').fadeOut(200);
}
}, 200);
$(window).on('scroll', function () {
var h = $(document).height() - $(window).height() - 109;
var s = $(window).scrollTop();
if (s > h) {
$('#progress-bar').css('width', '100%').fadeOut(200);
} else {
$('#progress-bar').css('width', (s / h) * 100 + '%').fadeIn(200);
}
});
// 添加样式页面加载执行
$(document).ready(function () {
// 替换图片地址
$('img[src^="https://image.nmb.best/thumb"]').attr('src', function(index, oldSrc) {
return oldSrc.replace('/thumb', '/image');
});
// 新的<logo>内容
var newContent = `
<div id="h-menu-top" style="display: flex;justify-content: center;padding: 5px;">
<div class="h-menu-logo" style="width: 60px;margin-right: 10px;">
<img src="https://file.moetu.org/images/2023/08/29/e1db89f8b15b0002b1ebdf574d5a7f30c6f2590891da1a8422eba303bf8b589c.gif" alt="" border="0" width="100%">
</div>
<div class="h-menu-slogan">
<a href="/" id="h-menu-top-sitename" style="display: block;font-size: 20px;font-weight: bold;margin:6px 6px 6px 0;text-align:left;">X岛揭示板 </a>
<a href="/" id="h-menu-top-img" style="display: block;font-size: 14px;color: #ccc;">写作绅士，读作丧尸</a>
</div>
</div>
`;
// 替换logo
$('#h-menu-top').empty();
$('#h-menu-top').append(newContent);
});
// 解决图片hover父元素overflow问题
$('.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');
}
});
})();