首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >备份哪吒探针主题

备份哪吒探针主题

原创
作者头像
无敌小菜鸟
修改于 2022-12-02 11:26:31
修改于 2022-12-02 11:26:31
1.9K00
代码可运行
举报
文章被收录于专栏:搬砖笔记搬砖笔记
运行总次数:0
代码可运行

自定义了哪吒探针主题,备份下css。

一、样式

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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>

图例

图

二、样式

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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>

图示

2
2

三、样式三

本改动匹配的是默认主题

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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>

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
C嘎嘎入门篇:类和对象(1)
小编在之前讲述了C++的部分入门基础,读者朋友一定要掌握好那些,因为C++的学习和C有点不同,C++的知识都是比较连贯的,所以我们学好了前面才可以学习后面的内容,本篇文章小编将会讲述C++真正的入门篇:类和对象,学完这一部分后我们才可以说我们真的C++入门了,下面废话不多说,开启今天第一部分的讲解:
用户11295429
2024/10/16
1020
C嘎嘎入门篇:类和对象(1)
python入门教程NO.9 怎么理解面向对象编程?看我就够了!
在python中,用变量表示属性,用函数表示方法,因此具有相同属性和方法的一类事物就是‘类’,对象就是这这类事物中具体的一个。
python鱼霸霸
2020/04/23
4300
1.面向对象:初识
面向对象的程序设计的核心是对象(上帝式思维),要理解对象为何物,必须把自己当成上帝,上帝眼里世间存在的万物皆为对象,不存在的也可以创造出来。
changxin7
2019/08/14
3070
初识Python面向对象
对象具有的行为(动词),通常可以定义成 方法(用类去定义的的对象所具备的可操作的能力叫做方法)
星陨1357
2023/03/14
2090
初识Python面向对象
【C++入门篇】保姆级教程篇【中】
由上一篇的博客我们已经学习到可以写出的基本C++程序了,接下来我们将要进入C++重要的一环——面向对象,在学习面向对象之前,我觉得有必要先了解一下面向对象的由来,那么我们就从语言的发展史开始今天的学习之旅吧!
用户11029129
2024/06/04
1360
【C++入门篇】保姆级教程篇【中】
【C++】踏上C++的学习之旅(六):深入“类和对象“世界,掌握编程的黄金法则(一)
在本文中我们即将要接触到C++的第一块"硬骨头"——“类和对象”。为什么说"类和对象"是一块一骨头呢?因为里面涉及的语法细节十分的繁杂,不过读者们不必担心,我的"类和对象"这个系列会罗列和讲解各种语法细节,还要对这些地方加以认证,以帮助大家能够感知到这些细节的存在更好的理解"类和对象"的玩法!
埋头编程
2024/11/15
1750
【C++】踏上C++的学习之旅(六):深入“类和对象“世界,掌握编程的黄金法则(一)
初识C++ · 类和对象(上)
C语言是一门面向过程的语言,注重的是解决问题的过程,举个例子——洗衣服,洗衣服的过程是:拿衣服——放进洗衣机——放洗衣液——放水——打开洗衣机——开始工作——结束——晾衣服,注重整个过程,C++是一门面向对象的语言,注重的是解决问题时候涉及的对象,比如洗衣服的时候涉及到了衣服,洗衣机,水,洗衣液等对象,注重的是对象交互来解决某个问题。
_lazy
2024/10/16
890
初识C++ · 类和对象(上)
python开发第六篇--递归函数和面
面向过程的程序设计的核心是过程(流水线式思维),过程即解决问题的步骤,面向过程的设计就好比精心设计好一条流水线,考虑周全什么时候处理什么东西。
py3study
2020/01/03
3380
从基础入门到学穿C++(类和对象篇)【超详细】【一站式速通】
C语言是一种面向过程的语言,C++和python、java一样都是一种面向对象的语言。
see.
2024/06/04
1361
从基础入门到学穿C++(类和对象篇)【超详细】【一站式速通】
【c++】类和对象(一)
在面向过程编程中,我们关注的是如何一步一步地执行这些任务,每个步骤都是一个过程或函数,我们按照顺序调用它们,最终得到想要的结果。这里的食材和步骤是分开的,首先我们定义了食材(数据),然后通过一系列的函数(步骤)来处理这些食材
用户11029103
2024/04/02
1220
【c++】类和对象(一)
Python面向对象编程(一)
1.面向过程的程序设计:核心是过程二字,过程指的是解决问题的步骤,即先干什么再干什么......面向过程的编程就好比设计一条流水线,是一种机械式的思维方式。
py3study
2020/01/07
3330
Python面向对象编程(一)
【C++】42道面试经典问题总结
C和C++的内存分布没有区别,usr space (reserve、.text、.rodata、.bss、heap stack 命令行参数和环境变量)+kernal space(ZONE_DMA 、ZONE_NORAMAL、ZONE_HIGHMEM)
洁洁
2024/09/11
2210
Java教程分享Java面向对象与面向过程[通俗易懂]
Java教程分享Java面向对象与面向过程,面向对象: 是一种看待问题, 解决问题的思维方式, 着眼点在于找到一个能够帮助解决问题的实体, 然后委托这个实体来解决问题
全栈程序员站长
2022/09/15
2270
【C++初阶】类和对象修炼上
C语言是面向过程的语言,关注的是过程,把洗衣服这件事拆分成浸泡,漂洗,脱水,晾干等过程,把过程写成函数,最后调用函数来完成;
MicroFrank
2023/01/16
7790
第二阶段-Java面向对象:【第一章 面向对象】
在我们正式进入学习这部分前,了解一下面向过程和面向对象这两个概念,对于我们 接下来的学习有很大的好处。别急,下面我就来和你说一说。
BWH_Steven
2019/08/09
6080
什么是面向对象? Java 的灵魂概念
为满足移动端和PC端的双重阅读体验,以及文章质量的保证,开始重构的以及新写的文章都会基于 “语雀” 平台编写,公众号会同步刚发布的文章,但随后的修改或者更新只会在语雀中维护。
BWH_Steven
2021/09/22
5520
什么是面向对象? Java 的灵魂概念
【 JavaSE 】 类和对象
作用:this表示当前对象引用(注意不是当前对象),可以借助 this 来访问对象的字段和方法
用户9645905
2022/11/30
4940
【 JavaSE 】 类和对象
【C++篇】类与对象(上篇):从面向过程到面向对象的跨越
大家好,我是“我想吃余”,很高兴你能和我一起进入到C++的学习中,我会将我的学习过程中的宝贵经验不遗余力的输入到文章中,希望可以帮助到你的学习。本文涵盖了从面向过程与面向对象的区别,到类的定义、访问限定符、封装、作用域、实例化、对象大小计算,以及this指针等内容。
我想吃余
2025/03/31
1620
【C++篇】类与对象(上篇):从面向过程到面向对象的跨越
Java基础语法(七)——类和对象
  相信大家都吃过月饼,我们做月饼的模子就是一个类,而通过这个模子可以做出月饼,那么在这个例子当中,类就是那个模子,而月饼就是那个对象,所以月饼就是一个实体。一个模子可以实例化无数个对象。
RAIN7
2021/08/11
5590
开源图书《Python完全自学教程》8.1面向对象
有的资料将这一章内容命名为“面向对象”,虽然没有错误,但这并不很 Pythonic ,因为 Python 中的函数是第一类对象,在前一章中已经开始“面向对象”了。其实不仅仅是第7章,本书从一开始,就在“面向对象”。那么,本章的类与对象有什么关系?为什么很多自学者会在学到本章的时候遇到困难?如何跨过这个难关?请读者满怀信心地认真学习本章和第9章,严格地执行各项学习建议。“漫卷诗书喜欲狂”的成功愉悦就在不远的将来。
老齐
2022/07/06
3720
开源图书《Python完全自学教程》8.1面向对象
相关推荐
C嘎嘎入门篇:类和对象(1)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验