MENU

非常好看的哪吒监控透明主题

August 30, 2021 • 已被 963 位童鞋围观过 • 闲言碎语

主题是我扒的，扒的一个修改版的哪吒，他的是修改内部文件，不是像我这样的自定义 css，可能不太完美，但是使用应该没问题

我想把国旗和系统的图标搞下来，不好搞，估计 js 可以做到替换，但是我不会

扒下来一大堆东西，然后一个一个删掉多余的，顺便自己也改了点点，耗时几个小时。CSS 里面我搞了注释，你要修改自己的风格也就方便点

哪吒监控
https://github.com/naiba/nezha

主题截图
哪吒监控

主题演示
http://server.ii.do/

主题代码

<style>
/* 屏幕适配 */

@media only screen and (min-width: 1200px) {
  .ui.container {
    width: 77%;
  }
}

@media only screen and (max-width: 767px) {
  .ui.card>.content>.header:not(.ui), .ui.cards>.card>.content>.header:not(.ui) {
    margin-top: 0.4em;
  }
}

/* 整体图标*/

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;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(https://cdn.jsdelivr.net/gh/idarku/img@main/1628656119298.jpg);
  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: rgba(252, 166, 7, 0.952) !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>
window.onload = function(){
var avatar=document.querySelector(".item img")
var footer=document.querySelector("div.is-size-7")
footer.innerHTML="奶妈监控面板 and 我扒的CSS"
footer.style.visibility="visible"
avatar.src="https://cdn.jsdelivr.net/gh/idarku/blog@20210723/favicon.ico"
avatar.style.visibility="visible"
}
</script>

2021.08.22 增加服务页的样式
2021.08.21 把登录按钮搞了下
2021.08.20 修改了点点细节，我是照我个人喜欢的风格来改的，假如你想要原有的风格，你可能需要自己动动手
使用方法

  1. 用哪吒的默认主题，复制上方主题代码，粘贴到自定义代码里面保存即可
  1. 实在不懂找奶妈，我只是个打工人
Last Modified: September 29, 2023
Leave a Comment