Greasy Fork is available in English.
增强 X岛 页面的视觉效果和可用性
当前为
// ==UserScript==
// @name X岛 页面美化
// @namespace http://tampermonkey.net/
// @version 1.0.2
// @description 增强 X岛 页面的视觉效果和可用性
// @author 热心群众
// @match *://*.nmbxd1.com/*
// @grant none
// @require https://code.jquery.com/jquery-3.6.0.min.js
// @license MIT
// ==/UserScript==
(function () {
'use strict';
const styles = `
html{background-color: #f1f2f5;}
hr{display:none;}
#h-content-top-nav{padding: 15px;background: #fff;margin: 10px 0 0 0 !important;border-radius: 10px 10px 0 0 ;}
#h-content-top-nav .uk-breadcrumb{margin:0 !important;}
#h-content h2.h-title{padding: 15px;background: #fff; margin: 0 0 10px 0 !important;border-radius: 0 0 10px 10px;}
/*底部*/
#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 {background-color: #fff;}
.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 {border-radius: 5px;padding: 10px;margin-top: 10px;}
.h-threads-item .h-threads-item-replies .h-threads-item-reply {width: 100%;margin: 10px auto;padding: 10px 0;position: relative;border-top: 1px solid #cccccc50;}
.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: #fff0;padding: 0px 0 0 40px;}
.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 {display: none;}
.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-info-idafter {text-align: center;line-height: 50px;font-size: 15px;font-weight: bolder;color: #fff;position: absolute;left: 15px;top: 15px;display: block;width: 50px;height: 50px;background: #c0c4cc;border-radius: 10px;}
.h-threads-info-idafter::before {content: " ";position: absolute;top: 0;left: 0;width: 100%;height: 100%;
background-image: url(https://file.moetu.org/images/2023/08/29/e1db89f8b15b0002b1ebdf574d5a7f30c6f2590891da1a8422eba303bf8b589c.gif);
background-size: cover;background-repeat: no-repeat;background-position: center;opacity: 0.1;}
.Po-text{}
.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-info-reply-btn {font-size: 14px !important;color: #cc1105;border: 1px solid #ccc;padding: 2px 10px;margin: 0 15px;border-radius: 5px;background: #cc1105;}
.h-threads-item .h-threads-info-reply-btn:hover {color: red;background: red;}
.h-threads-item .h-threads-info-reply-btn a {color: #fff;text-decoration: none;}
.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: #FFF;border-radius: 10px;}
.h-forum-header{margin-bottom: 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;width: 100%;}
.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;}
.uk-width-1-5{
width: 100px !important;
border: 1px solid #e9e9e9;
padding: 5px 10px;
height: 35px;
margin: 0 10px;
border-radius: 5px;
display: flex;
align-content: flex-start;
flex-wrap: wrap;
background: #fff;
}
#h-post-form .h-post-form-textarea-title{line-height: 23px !important;height: 0px;}
.__jion-form {
width: 100%;
height: 35px;
display: flex;
align-items: center;
background-color: #fff;
padding: 0 10px;
border-radius: 5px;
box-sizing: border-box;
margin-bottom: 10px;
cursor: pointer;
user-select: none;
}
.__jion-form:hover {
color: #FFF;
background: linear-gradient(45deg,#84F0EE 0%,#84F0EE 30%,#5AD4C2 30%,#5AD4C2 60%,#7b8df3 60%,#7b8df3 100%,#84F0EE 100%,#84F0EE 100%);
background-size: 400%;
background-position: 0% 100%;
animation: rainbow 1.5s linear infinite;
}
@keyframes rainbow {
0% {background-position: 0% 200%;}
100% {background-position: 200% 0%;}
}
.ripple {position: relative;overflow: hidden;}
.ripple:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background-image: radial-gradient(circle, #666 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
transform: scale(10, 10);
opacity: 0;
transition: transform .3s, opacity .5s;
}
.ripple:active:after {transform: scale(0, 0);opacity: .3;transition: 0s;}
/* 清除浮动 */
.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);
// 添加头像
$(".h-threads-item-reply").each(function () {
if ($(this).find(".h-threads-img-box").length === 0) {
var uid = $(this).find(".h-threads-info-uid").text();
var mainUid = $(this).parent().siblings(".h-threads-item-main").find(".h-threads-info-uid").text();
var firstThreeChars = uid.substring(3, 6);
if (mainUid == uid) {
$(this).append(`<div class="h-threads-info-idafter Po-text">${firstThreeChars}</div>`)
} else {
$(this).append(`<div class="h-threads-info-idafter">${firstThreeChars}</div>`)
}
} else {
$(this).find(".h-threads-item-reply-main").css("padding", "0")
}
});
//移除表单的类
$(".h-post-form-input").removeClass("uk-width-1-5")
// 初始化隐藏表单
$("#h-post-form").find("form").hide();
$("#h-post-form").prepend(`<div class="__jion-form"><div>点击参与讨论</div></div>`);
$(".__jion-form").on('click', function () {
var form = $("#h-post-form").find("form");
if (form.is(":hidden")) {
$(this).text("点击隐藏表单")
form.slideDown(200);
} else {
$(this).text("点击参与讨论")
form.slideUp(200);
}
});
});
// 解决图片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');
}
});
})();