💪大气愉快浏览本论坛CSS样式分享❣

分享点滴经验
回复
青灯明月
帖子: 10
注册时间: 2025年 5月 1日 07:05

💪大气愉快浏览本论坛CSS样式分享❣

帖子 青灯明月 »

自定义了本论坛CSS, 以更舒服大气地浏览阅读本论坛.
  • ⌦ 去除纷扰无关元素, 沉浸式浏览
  • 🗚 适当加大字号大气浏览
  • 多处交互增强
  • 🌐 打开过的链接(帖子列表&帖子里的a)→灰色标记, 不再傻傻分不清
  • 🖱 板块页, 去线条和背景色, 帖子链接的点击范围由标题文字扩展到整列
  • ⚓ 强力指示#hash锚点贴💪
222.png
222.png (18.71 KiB) 查看 363 次



复制↓代码, 在Stylus 里新建样式, 按CtrlV粘贴即可导入!


代码: 全选

@-moz-document url-prefix("https://www.catsxp.com/forum/") {
/* catsxp-forum	*/


#nav-breadcrumbs		{
	font-size:15px;
	.crumb	{font-weight:100;	&::before{font-weight:100}	}
}
#nav-breadcrumbs	{font-size:15px}

a:hover	{color:blue}

.search::placeholder{color:#0000}
/*.copyright	{display:none!important}*/
}

@-moz-document regexp(".+/forum/viewforum\\.php\\?f=\\d.*") {
/*板块页
主题列表*/

.topics	{
	.topictitle	{
		font-size:17px;display:inline-block;width:100%;
		padding-bottom:18px;margin-bottom:-18px;
		&:visited	{color:#888}
		&:hover	{background:#dedbc452}
		&:visited:hover	{color:#222}
	}
	.topic-poster	{margin-left:36px}
	& time	{color:#4f6c98;font-weight:100;word-spacing:-3px}
	
	& li.row	{background:white;border:none;
		& dd	{border:none}
	}
	.username, .username-coloured	{pointer-events:none}
}


a:hover	{color:blue}
h2.forum-title	{display:none}
}

@-moz-document regexp(".+/forum/viewtopic\\.php\\?(t|p)=\\d.*") {
/*帖子页*/

.action-bar	{display:flex;justify-content:flex-end;align-items:center;
	.pagination	{margin-left:20px}
	.jumpbox-return	{margin-right:20px}
	.search	{width:50px;	&:focus{width:300px}}
}
.post	{
	font-size:14px;
	& h3.first a	{margin-left:20px;font-size:19px;color:#000}
	& h3:not(.first) a	{margin-left:20px;font-size:17px;
		font-weight:400;font-style:italic}
	& time	{font-weight:100;word-spacing:-4px}

	.content	{
		line-height:1.5;color:#000;
		& a		{border:none;background:none;
			&:visited	{color:#888}
			&:hover	{color:blue;box-shadow:0 1px #c7f;}
		}
	}
	

	&&:target	{margin-block:40px;
		box-shadow:0 0 0 9px #5493df;z-index:9;
		&::before	{content:'✑';color:#3476c6;animation: 左拉入 1s;
			font-size:80px;left:-1.05em;position:absolute}
		&::after	{display:none}
	}
	&+.post	{margin-top:20px}
}


.postprofile	{
	& dd+dd		{margin-top:4px}
	.username	{font-size:16px}
	.username-coloured /*管理团队*/	{font-size:18px}
	.profile-rank	{
		font-style:italic;font-weight:100;margin:3px 0 0 30px}
	.profile-joined	{word-spacing:-4px;white-space:nowrap}
}

#qr_postform	{margin-top:80px}

.topic-title	{display:none}

}


@-moz-document regexp(".+/forum/posting.php\\?mode=.+") {
/*发帖回帖*/

.posting-title	{text-indent:8ch}
textarea#message	{
	height:55vh;font-size:17px;line-height:1.5;padding:5px 8px;
	&:focus	{border-color:#c439cc}
}
.submit-buttons	{
	font-size:15px;
	& [name=save]~input	{
		padding-inline:30px;margin-left:15px;letter-spacing:2px;
		&:hover	{background:#c7f;color:#fff}
	}
}

#tabs	{font-size:13px;text-align:center;
	& li	{
		width:90px;letter-spacing:2px;display:block!important;
		&.responsive-tab	{display:none!important}
	}
}
#attach-panel	{
	font-size:11px;
	& p:first-child	{margin-bottom:0}
	#add_files	{padding:10px 99px;font-size:16px;letter-spacing:3px}
}


#options-panel {font-size:14px;
	& [for=notify]	{box-shadow:0 1px #777;
		&:has(:checked)::before	{content:'✉';position:absolute;
	font-size:34px;line-height:.7;margin-left:-1.3em}
	}
}


}

附件
锚点
锚点
255_01215123.png (90.27 KiB) 查看 363 次
255_01213454.png
255_01213454.png (101.04 KiB) 查看 363 次
回复