自定义了哪吒探针主题，备份下 css。
一、样式
<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>
二、样式
<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>
三、样式三
以下匹配默认风格。
<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>
文章若有侵权，请联系本站作者。
