自用的哪吒探针主题

前言

打算换一下主题，在此记录一下，以防后面要改过来。

主题设置

1、首先需要修改主题为：Default

2、添加以下自定义样式：

<link rel="stylesheet" href="https://s4.zstatic.net/npm/semantic-ui@2.4.1/dist/semantic.min.css">
<link rel="stylesheet" href="https://s4.zstatic.net/npm/font-logos@0.17/assets/font-logos.css">
<link rel="stylesheet" href="https://s4.zstatic.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://s4.zstatic.net/npm/flag-icons@7.0.0/css/flag-icons.min.css">
<style>
/* 屏幕适配 */

@media only screen and (min-width: 1200px) {
  .ui.container {
    width: 77% !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: 1em !important;
}

/* 背景图片 */

body {
  content: " ";
  background: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-position: top !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-image: url(https://img.v2girl.com/images/2022/03/09/1123014fb76c2362f4dc011.webp) !important;
  font-family: Arial,Helvetica,sans-serif;
}

/* 菜单*/

.ui.large.menu {
  border: 0;
  border-radius: 0px;
  background-color: rgba(255, 255, 255, 55%);
}

.ui.menu .active.item {
    background-color: transparent;    
}

.ui.dropdown .menu {
  border: 0;
  border-radius: 0px;
  background-color: rgba(255, 255, 255, 55%);
}

.nezha-primary-btn {
    background-color: transparent !important;
    color: #000 !important;
}

/* 大卡片 */

#app .ui.fluid.accordion {
    background-color: #fbfbfb26;
    border-radius: 0.4rem;
}

/* 小卡片 */

.ui.four.cards>.card {
    border-radius: 0.6rem;
    background-color: #fafafaa3;
}

.status.cards .flag {
  margin-right: 0 !important;
}

.status.cards .header > .info.icon {
  float: right;
  margin-right: 0;
  cursor: pointer;
}

.status.cards .wide.column {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: 3.3rem !important;
}

.status.cards .three.wide.column {
  padding-right: 0 !important;
}

.status.cards .wide.column:nth-child(1) {
  margin-top: 2rem !important;
}

.status.cards .wide.column:nth-child(2) {
  margin-top: 2rem !important;
}

.status.cards .description {
  padding-bottom: 0rem !important;
}

.status.cards .ui.content.popup {
  min-width: 292px;
  min-width: 21rem;
}

.status.cards .outline.icon {
  margin-right: -4px;
}

.nezha-secondary-font {
  color: #21ba45 !important;
}

.ui.progress{
  border-radius: 50rem;
}

.ui.progress .bar {
  min-width: 1.8em !important;
  border-radius: 15px;
  line-height: 1.65em;
  }

.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;
}

i.arrow.alternate.circle.down.outline.icon {
    color: #21ba45;
}

i.arrow.alternate.circle.up.outline.icon {
    color: red;
}

.ui.right.center.popup {
  margin: -3px 0 0 0.914286em !important;
  -webkit-transform-origin: left 50%;
  transform-origin: left 50%;
}

.ui.bottom.left.popup {
  margin-left: 1px !important;
  margin-top: 3px !important;
}

.ui.top.left.popup {
  margin-left: 0;
  margin-bottom: 10px !important;
}

.ui.top.right.popup {
  margin-right: 0;
  margin-bottom: 8px !important;
}

.ui.left.center.popup {
  margin: -3px .91428571em 0 0 !important;
  -webkit-transform-origin: right 50%;
  transform-origin: right 50%;
}

/* 弹出来的卡片 */

.status.cards .ui.content.popup {
    line-height: 2rem;
    border-radius: 5px;
    border: 1px solid transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    inset: 28.1562px auto auto 214.82px;
    background-color: #fafafaeb;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-box-shadow: 0 1px 4px 0 rgb(0 0 0 / 20%);
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 20%);
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    font-family: Arial,Helvetica,sans-serif;
}

.ui.content {
  margin: 0;
  padding: 1em !important;
}

.ui.top.popup:before {
    border-color: #fafafaeb transparent transparent;
}

.ui.popup:before {
    border-color: #fafafaeb transparent transparent;
}

.ui.bottom.left.popup:before {
    border-radius: 0px;
    border: 1px solid transparent;
    border-color: #fafafaeb transparent transparent;
    background: #fafafaeb;
    -webkit-box-shadow: 0px 0px 0 0 #fafafaeb;
    box-shadow: 0px 0px 0 0 #fafafaeb;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.ui.bottom.right.popup:before {
    border-radius: 0px;
    border: 1px solid transparent;
    border-color: #fafafaeb transparent transparent;
    background: #fafafaeb;
    -webkit-box-shadow: 0px 0px 0 0 #fafafaeb;
    box-shadow: 0px 0px 0 0 #fafafaeb;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.ui.top.left.popup:before {
    border-radius: 0px;
    border: 1px solid transparent;
    border-color: #fafafaeb transparent transparent;
    background: #fafafaeb;
    -webkit-box-shadow: 0px 0px 0 0 #fafafaeb;
    box-shadow: 0px 0px 0 0 #fafafaeb;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.ui.top.right.popup:before {
    border-radius: 0px;
    border: 1px solid transparent;
    border-color: #fafafaeb transparent transparent;
    background: #fafafaeb;
    -webkit-box-shadow: 0px 0px 0 0 #fafafaeb;
    box-shadow: 0px 0px 0 0 #fafafaeb;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.ui.left.center.popup:before {
    border-radius: 0px;
    border: 1px solid transparent;
    border-color: #fafafaeb transparent transparent;
    background: #fafafaeb;
    -webkit-box-shadow: 0px 0px 0 0 #fafafaeb;
    box-shadow: 0px 0px 0 0 #fafafaeb;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* 服务 */

.ui.table {
    background: RGB(225,225,225,0.6) !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;
    font-weight: bold;
    background-color: #fafafaa3;
}
</style>
<script src="https://s4.zstatic.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://s4.zstatic.net/npm/semantic-ui@2.4.1/dist/semantic.min.js"></script>
<script src="https://s4.zstatic.net/npm/vue@2.6.14"></script>
<script src="https://s4.zstatic.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
<script>
$(document).ready(function(){

   var avatar=document.querySelector(".item img")
   avatar.src="https://hellojxl.com/favicon.ico"
   avatar.style.visibility="visible"
})

</script>
<!-- 网页特效 - 樱花 -->
<script src="https://status.hellojxl.com/gh/yinghua.js"></script>

<!-- 网页鼠标点击特效 - 爱心 -->
<script src="https://status.hellojxl.com/gh/aixin.js"></script>

<!-- 网页鼠标点击特效 - 烟花波纹 -->
<script src="https://status.hellojxl.com/gh/yanhuabowen.js"></script>

<!-- 鼠标特效 - 小星星拖尾 -->
<span class="js-cursor-container"></span>
<script src="https://status.hellojxl.com/gh/xiaoxingxing.js"></script>

结束

应用一下就可以了。