哪吒监控：一款适应手机的列表主题

哪吒监控 一站式轻监控轻运维系统。支持系统状态、HTTP(SSL 证书变更、即将到期、到期)、TCP、Ping 监控报警，计划任务和在线终端。

使用方法：

[notebox color="green"]登录后台-设置-前台主题选择[cokemine-hotaru][/notebox]

自定义代码处复制以下代码:

[prism lang=""]

<style>
#app > div.container > table > thead > tr > th:nth-child(6){width:150px;}
#app > div.page-section{ display:none; visibility:hidden; }<!--负载隐藏-->
.table>thead>tr>th:last-child {
padding-right: 10px;
}
.table > thead > tr > th {
padding: 16px 10px;
vertical-align: bottom;
border-bottom: 1px solid #edeff2;
color: #9da2a6;
/* font-size: 12px; */
font-weight: bold;
}
.panel-body, .panel-block-sm {
padding: 24px;
background-color: transparent;
}
body.dark .page-section {
border-bottom: transparent;
}
.sidebar-container ul{
display:none; visibility:hidden;
}
.location-info>li{
color: #1b1c1d;
}
body.dark .panel h3, body.dark .panel span {
color: #1b1c1d;
}
body{
color: #1b1c1d;
}
body.dark table tr:nth-child(odd) {
background-color: #f9f9f9;
}

body.dark .panel {
background-color: transparent;
color: #aaa;
}
body.dark {
background: url(http://i.his.im/static/theme-hotaru/img/bg_parts.png) repeat-y left top, url(http://i.his.im/static/theme-hotaru/img/bg.png) repeat left top;;
color: #1b1c1d;
}
.hotaru-cover p, h1 {
color: white;
font-weight: bolder;
text-shadow: 0.1em 0.1em 1em black;
}
.hotaru-cover {
background: url(http://update.mymc.xyz/xxx.webp) center no-repeat;
}
.state-offline {
background-color: slategray;
border-radius: 0.3em;
margin-left: 0.5em;
margin-right:1em;
}
.state-online {
background-color: rgb(0, 235, 139);
border-radius: 0.3em;
margin-left: 0.5em;
margin-right:1em;
}
@media (max-width:992px) {
#app > div.container > table > thead > tr > th:nth-child(5){display:none; visibility:hidden; }
#location, tr td:nth-child(4) { display:none; visibility:hidden; }
.container {
padding-left: 10px;
padding-right: 10px;
}
}
@media (max-width:720px) {
#app > div.container > table > thead > tr > th:nth-child(3){display:none; visibility:hidden; }
#app > div.container > table > thead > tr > th:nth-child(4){display:none; visibility:hidden; }
#app > div.container > table > thead > tr > th:nth-child(5){display:none; visibility:hidden; }
#type, tr td:nth-child(3) { display:none; visibility:hidden; }
#location, tr td:nth-child(4) { display:none; visibility:hidden; }
#uptime, tr td:nth-child(5) { display:none; visibility:hidden; }
.container {
padding-left: 10px;
padding-right: 10px;
}
}
@media (max-width:600px) {
#app > div.container > table > thead > tr > th:nth-child(3){display:none; visibility:hidden; }
#app > div.container > table > thead > tr > th:nth-child(4){display:none; visibility:hidden; }
#app > div.container > table > thead > tr > th:nth-child(5){display:none; visibility:hidden; }
#app > div.container > table > thead > tr > th:nth-child(6){display:none; visibility:hidden; }
#type, tr td:nth-child(3) { display:none; visibility:hidden; }
#location, tr td:nth-child(4) { display:none; visibility:hidden; }
#uptime, tr td:nth-child(5) { display:none; visibility:hidden; }
#load, tr td:nth-child(6) { display:none; visibility:hidden; }
.container {
padding-left: 10px;
padding-right: 10px;
}
}

@media (max-width:533px) {
#app > div.container > table > thead > tr > th:nth-child(3){display:none; visibility:hidden; }
#app > div.container > table > thead > tr > th:nth-child(4){display:none; visibility:hidden; }
#app > div.container > table > thead > tr > th:nth-child(5){display:none; visibility:hidden; }
#app > div.container > table > thead > tr > th:nth-child(6){display:none; visibility:hidden; }
td:nth-child(3) { display:none; visibility:hidden; }
td:nth-child(4) { display:none; visibility:hidden; }
td:nth-child(5) { display:none; visibility:hidden; }
.container {
padding-left: 10px;
padding-right: 10px;
}
}
@media (max-width:450px) {
#app > div.container > table > thead > tr > th:nth-child(3){display:none; visibility:hidden; }
#app > div.container > table > thead > tr > th:nth-child(4){display:none; visibility:hidden; }
#app > div.container > table > thead > tr > th:nth-child(5){display:none; visibility:hidden; }
#app > div.container > table > thead > tr > th:nth-child(6){display:none; visibility:hidden; }
#app > div.container > table > thead{ padding: 16px 10px;}
.container {
padding-left: 10px;
padding-right: 10px;
}
}
</style>

[/prism]

其他主题请访问：https://github.com/naiba/nezha 官方获取。