前言
最近京东的公共图床403了,好多图要转移,麻烦啊,所以说免费的就是最贵的!言归正传,有好多朋友要那款非常漂亮的哪吒监控透明主题,正好今天就能水一篇了,话不多说,直接上代码!
截图演示
- 主题截图
- 使用方法
- 自定义项
登录哪吒面板后台,然后进入
设置
,将主题设为 Default
,然后在下面可以看到 自定义代码
一栏,把下面deCSS代码粘贴到里面就好了。下面的代码里53行是背景图片,186行是页头logo图片,193行是页面favicon图标,其他的颜色可以根据自己喜好修改,所有的代码都有注释,非常简单,差不多就这么多,快去折腾吧。
CSS代码
<style>
/*.ui.fine.progress> .progress-bar {
background-color:#00a7d0 !important;
*/
}
/* 奶妈的版权 */
.ui.inverted.segment,.ui.primary.inverted.segment {
color:#000;
font-weight:normal;
background-color:rgba(255,255,255,35%)
}
/* 屏幕适配 */
@media only screen and (min-width:1200px) {
.ui.container {
width:80%;
}
}@media only screen and (max-width:767px) {
.ui.card>.content>.header:not(.ui),.ui.cards>.card>.content>.header:not(.ui) {
margin-top:0.5em;
font-size:1.2em;
}
}/* 图标颜色和大小*/
i.icon {
color:#000;
width:1em !important;
}
/* 菜单颜色 */
.ui.large.menu {
background-color:rgba(255,255,255,55%);
}
.ui.dropdown .menu {
border:0;
border-radius:0px;
background-color:rgba(255,255,255,55%);
}
/* 登录按钮颜色 */
.nezha-primary-btn {
background-color:#21ba45 !important;
color:#fff;
}
/* 背景图片 */
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://dd-static.jd.com/ddimg/jfs/t1/175323/30/27560/24945/63139efaE84ee0d9e/fca1dbab91044e55.jpg);
}
/* 大卡片 */
#app .ui.fluid.accordion {
background-color:#fbfbfb26;
border-radius:0.4rem;
}
/* 小卡片 */
.ui.four.cards>.card {
border-radius:0.6rem;
background-color:#fafafaa3;
}
/* 小卡片右上角图标颜色 */
.nezha-secondary-font {
color:rgba(252,166,7,0.952) !important;
}
/* 小卡片右上角图标位置 */
.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 {
border-radius:0.35rem;
background-color:rgba(255,255,255,85%);
}
.ui.content {
margin:0;
padding:1em !important;
}
/* 弹出来的小卡片位置 */
.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:2.5rem !important;
}
.status.cards .three.wide.column {
padding-right:0 !important;
}
.status.cards .wide.column:nth-child(1) {
margin-top:1rem !important;
}
.status.cards .wide.column:nth-child(2) {
margin-top:1rem !important;
}
.status.cards .description {
padding-bottom:1rem !important;
}
.status.cards .ui.content.popup {
min-width:292px;
min-width:21rem;
}
.status.cards .outline.icon {
margin-right:-4px;
}
/* 进度条圆角和颜色 */
.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:green;
}
i.arrow.alternate.circle.up.outline.icon {
color:#ff0000;
}
/*服务状态*/
.service-status .good {
background-color:rgb(33 186 69) !important;
}
/* 奶妈的版权 */
.ui.inverted.segment,.ui.primary.inverted.segment {
color:#000;
font-weight:bold;
background-color:rgba(255,255,255,55%)
}
</style>
<script>
window.onload = function() {
var avatar=document.querySelector(".item img")
var footer=document.querySelector("div.is-size-7")
footer.innerHTML="©2021 NieGe VPS Status"
footer.style.visibility="visible"
avatar.src="https://img14.360buyimg.com/ddimg/jfs/t1/162473/22/23012/3692/6184b06aEa95a0194/8c51cebbd04b95b2.png"
avatar.style.visibility="visible"
}
</script>
<script>
var faviconurl="//img14.360buyimg.com/ddimg/jfs/t1/162473/22/23012/3692/6184b06aEa95a0194/8c51cebbd04b95b2.png";
var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
link.type = 'image/png';
link.rel = 'shortcut icon';
link.href = faviconurl;
document.getElementsByTagName('head')[0].appendChild(link);
</script>
后记
这里说一下,本主题非本人原创,来源于这里,后面的修改favicon是我自己加上的,就是这样。
发现作者也加上了自定义favicon的代码
xiaohui Lv.1
4月3日
见到过!