备份哪吒探针主题

自定义了哪吒探针主题，备份下css。

一、样式

代码语言：javascript复制

<style>
.nav-bar {
	padding:0;
}
.nav-menu li a {
	background-color:#2f405a;
}
.info-body ul {
	font-size:12px;
	width:auto;
	align-content:center;
	justify-items:stretch;
}
.info-body ul li {
	margin:.2em;
	padding:.2em;
}
ul {
	padding-inline-start:0;
}
.server-info-container {
	border-radius:6px;
	border:1px solid #d9d9d9;
}
server-info-container {
	display:flex;
}
img {
	padding:4px 0;
}
#app {
	grid-template-columns:repeat(4,1fr);
	grid-gap:2em;
	justify-content:center;
	margin:1em auto;
}
.info-body ul li img {
	border:0 solid rgba(0,0,0,.25);
	border-radius:0;
}
body[data-theme=dark] .info-body ul li img {
	border:0 solid rgba(255,255,255,.3);
}
body[data-theme=dark] .info-body .ui.progress.warning>.progress-bar {
	background-color:#fcbd5e !important;
}
/* 隐藏上传下载图标*/
.info-body ul li:nth-child(10):before {
	content:"下载";
	font-family:"Font Awesome 5 Free";
	font-weight:900;
}
.info-body ul li:nth-child(11):before {
	content:"上传";
	font-family:"Font Awesome 5 Free";
	font-weight:900;
}
</style>
<script>
        /* 设置模式 light dark*/
	window.onload = function() {
	$.showConfirmButton=false;
	document.getElementsByTagName("BODY")[0].setAttribute('data-theme','dark');
}
</script>

图例

图

二、样式

代码语言：javascript复制

<style>
td {
	text-align:center;
}
.ui.progress {
	margin-left:auto;
	max-width:100%;
}
/*隐藏 alerts 弹窗*/
.ui-alerts {
	display:none;
}
.table > thead > tr > th {
	padding:16px 1px !important;
	width:40px;
}
.container {
	width:1150px;
	padding-right:5px;
	padding-left:5px;
}
b,strong {
	color:#ffffff;
	line-height:25rem;
}
h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child {
	margin-bottom:0;
	background:url(https://vkceyugu.cdn.bspapp.com/VKCEYUGU-b48d5553-8a2e-48fb-a37d-3adb6d54c0da/550081a9-1425-4779-9993-f269348f91b3.png) center no-repeat;
}
.hotaru-cover {
	background:rgba(66,64,64,.15);
}
body {
	color:rgb(0 0 0 / 95%);
	line-height:2.1em;
}
.table > thead > tr > th {
	padding:16px 10px;
	vertical-align:bottom;
	border-bottom:1px solid #edeff2;
	color:#142ac5;
	font-size:18px;
	font-weight:bold;
}
table tr {
	height:4em !important;
}
.table-striped > tbody > tr:nth-of-type(odd) {
	background-color:#fafafa;
}
.state-online {
	background-color:#21ba45;
	border-radius:0.3em;
}
.ui.progress .bar {
	text-align:right;
	padding-right:0.4em;
	background-color:#21ba45 !important;
	border-radius:0.5rem;
}
.page-section {
	padding-top:10px;
	padding-bottom:5px;
}
.table {
	font-weight:600;
}
</style>
<script>
        /* 设置模式 light dark*/
	window.onload = function() {
	$('body').removeClass('dark');
}
</script>

图示

2

三、样式三

本改动匹配的是默认主题

代码语言：javascript复制

<style>
/*隐藏 alerts 弹窗*/
.ui-alerts {
	display:none;
}
.right.menu>a {
	visibility:hidden;
}
.footer .is-size-7 {
	visibility:hidden;
}
/* 避免网络文字溢出 */
.status.cards .wide.column {
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.ui.four.cards>.card {
	padding-bottom:1px !important;
}
/* 屏幕适配 */
@media only screen and (min-width:1160px) {
	.ui.container {
	width:78% !important;
}
}@media only screen and (max-width:767px) {
	.ui.card>.content>.header:not(.ui),.ui.cards>.card>.content>.header:not(.ui) {
	margin-top:0.4em !important;
}
}/* 整体图标 */
i.icon {
	color:#000;
	width:1.2em !important;
}
/* 背景图片 */
body {
	content:" " !important;
	background:fixed !important;
	z-index:-1 !important;
	top:0 !important;
	right:0 !important;
	bottom:0 !important;
	left:0 !important;
	background-position:top !important;
	background-repeat:no-repeat !important;
	background-size:cover !important;
	#background-image:url(https://dd-static.jd.com/ddimg/jfs/t1/167442/4/26497/4230/63353ad8E448df5c8/de464fc2af15247d.jpg) !important;
	font-family:Arial,Helvetica,sans-serif !important;
}
/* 导航栏 */
.ui.large.menu {
	border:0 !important;
	border-radius:0px !important;
	background-color:rgba(255,255,255,55%) !important;
}
/* 首页按钮 */
.ui.menu .active.item {
	background-color:transparent !important;
}
/* 导航栏下拉框 */
.ui.dropdown .menu {
	border:0 !important;
	border-radius:0 !important;
	background-color:rgba(255,255,255,80%) !important;
}
/* 登陆按钮 */
.nezha-primary-btn {
	background-color:transparent !important;
	color:#000 !important;
}
/* 大卡片 */
#app .ui.fluid.accordion {
	background-color:#fbfbfb26 !important;
	border-radius:0.4rem !important;
}
/* 小卡片 */
.ui.four.cards>.card {
	background-color:#fafafaa3 !important;
}
.status.cards .wide.column {
	padding-top:0 !important;
	padding-bottom:0 !important;
	height:2.5rem !important;
}
.status.cards .three.wide.column {
	padding-right:0rem !important;
}
.status.cards .wide.column:nth-child(1) {
	margin-top:1.5rem !important;
}
.status.cards .wide.column:nth-child(2) {
	margin-top:1.5rem !important;
}
.status.cards .description {
	padding-bottom:0 !important;
}
/* 小鸡名 */
.status.cards .flag {
	margin-right:0.5rem !important;
}
/* 弹出卡片图标 */
.status.cards .header > .info.icon {
	margin-right:0 !important;
}
.nezha-secondary-font {
	color:#21ba45 !important;
}
/* 进度条 */
.ui.progress {
	border-radius:50rem !important;
}
.ui.progress .bar {
	min-width:1.8em !important;
	border-radius:15px !important;
	line-height:1.65em !important;
}
.ui.fine.progress> .bar {
	background-color:#21ba45 !important;
}
.ui.progress> .bar {
	background-color:#000 !important;
}
.ui.progress.fine .bar {
	background-color:#21ba45 !important;
}
.ui.progress.warning .bar {
	background-color:#ff9800 !important;
}
.ui.progress.error .bar {
	background-color:#e41e10 !important;
}
.ui.progress.offline .bar {
	background-color:#000 !important;
}
/* 上传下载 */
.status.cards .outline.icon {
	margin-right:1px !important;
}
i.arrow.alternate.circle.down.outline.icon {
	color:#21ba45 !important;
}
i.arrow.alternate.circle.up.outline.icon {
	color:red !important;
}
/* 弹出卡片小箭头 */
.ui.right.center.popup {
	margin:-3px 0 0 0.914286em !important;
	-webkit-transform-origin:left 50% !important;
	transform-origin:left 50% !important;
}
.ui.bottom.left.popup {
	margin-left:1px !important;
	margin-top:3px !important;
}
.ui.top.left.popup {
	margin-left:0 !important;
	margin-bottom:10px !important;
}
.ui.top.right.popup {
	margin-right:0 !important;
	margin-bottom:8px !important;
}
.ui.left.center.popup {
	margin:-3px .91428571em 0 0 !important;
	-webkit-transform-origin:right 50% !important;
	transform-origin:right 50% !important;
}
.ui.right.center.popup:before,.ui.left.center.popup:before {
	border:0px solid #fafafaeb !important;
	background:#fafafaeb !important;
}
.ui.top.popup:before {
	border-color:#fafafaeb transparent transparent !important;
}
.ui.popup:before {
	border-color:#fafafaeb transparent transparent !important;
}
.ui.bottom.left.popup:before {
	border-radius:0 !important;
	border:1px solid transparent !important;
	border-color:#fafafaeb transparent transparent !important;
	background:#fafafaeb !important;
	-webkit-box-shadow:0px 0px 0 0 #fafafaeb !important;
	box-shadow:0px 0px 0 0 #fafafaeb !important;
	-webkit-tap-highlight-color:rgba(0,0,0,0) !important;
}
.ui.bottom.right.popup:before {
	border-radius:0 !important;
	border:1px solid transparent !important;
	border-color:#fafafaeb transparent transparent !important;
	background:#fafafaeb !important
    -webkit-box-shadow:0px 0px 0 0 #fafafaeb !important;
	box-shadow:0px 0px 0 0 #fafafaeb !important;
	-webkit-tap-highlight-color:rgba(0,0,0,0) !important;
}
.ui.top.left.popup:before {
	border-radius:0 !important;
	border:1px solid transparent !important;
	border-color:#fafafaeb transparent transparent !important;
	background:#fafafaeb !important;
	-webkit-box-shadow:0px 0px 0 0 #fafafaeb !important;
	box-shadow:0px 0px 0 0 #fafafaeb !important;
	-webkit-tap-highlight-color:rgba(0,0,0,0) !important;
}
.ui.top.right.popup:before {
	border-radius:0 !important;
	border:1px solid transparent !important;
	border-color:#fafafaeb transparent transparent !important;
	background:#fafafaeb !important;
	-webkit-box-shadow:0px 0px 0 0 #fafafaeb !important;
	box-shadow:0px 0px 0 0 #fafafaeb !important;
	-webkit-tap-highlight-color:rgba(0,0,0,0) !important;
}
.ui.left.center.popup:before {
	border-radius:0 !important;
	border:1px solid transparent !important;
	border-color:#fafafaeb transparent transparent !important;
	background:#fafafaeb !important;
	-webkit-box-shadow:0px 0px 0 0 #fafafaeb !important;
	box-shadow:0px 0px 0 0 #fafafaeb !important;
	-webkit-tap-highlight-color:rgba(0,0,0,0) !important;
}
/* 弹出卡片 */
.status.cards .ui.content.popup {
	min-width:20rem !important;
	line-height:2rem !important;
	border-radius:5px !important;
	border:1px solid transparent !important;
	background-color:#fafafaeb !important;
	font-family:Arial,Helvetica,sans-serif !important;
}
.ui.content {
	margin:0 !important;
	padding:1em !important;
}
/* 服务页 */

.ui.table thead th {
	background:transparent !important;
}
/* 服务页进度条 */
.service-status .good {
	background-color:#21ba45 !important;
}
.service-status .danger {
	background-color:red !important;
}
.service-status .warning {
	background-color:orange !important;
}
/* 版权 */
.ui.inverted.segment,.ui.primary.inverted.segment {
	color:#000 !important;
	font-weight:bold !important;
	background-color:#fafafaa3 !important;
}
</style>

<!--Logo和版权-->
<script>
window.onload = function() {
	var avatar=document.querySelector(".item img")
var footer=document.querySelector("div.is-size-7")

// 改版权
footer.innerHTML="2020 - 2022 © 小菜鸟服务器监控站点"
footer.style.visibility="visible"

// 改logo
//avatar.src="https://auwink.com/favicon.ico"
//avatar.style.visibility="visible"

// 改 favicon
//var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
//	link.type = 'image/x-icon';
//	link.rel = 'shortcut icon';
//	link.href = 'https://auwink.com/favicon.ico';
//	document.getElementsByTagName('head')[0].appendChild(link);
}
</script>

css 备份探针 nezha

0 人点赞