哪吒探针美化分享

@1049556901 #70
稍等一会儿，我服务器在维护中，大概一个小时后可用

@1049556901 #70
你好，已经可以下载了

能发发规则吗？

哈哈，好帖绑定

帮顶

@a186232641 #73
什么规则

感谢大佬分享！我也分享一个把前台主页改成暗色模式的CSS（基于楼主的CSS修改，没改后台，因为实在不会CSS ）：

预览：

代码：

<script>
    // 动画
    window.onload = function () {
        $('.nb-menu').css('visibility', 'visible');
        $('.footer').css('visibility', 'visible');
        $('.nb-menu .right.menu,.nb-menu .item')
            .transition({
                animation: 'fade down in',
                interval: 200,
            });
        $('.footer .container b,.footer .container small')
            .transition({
                animation: 'fade up in',
                interval: 200,
            });
        $('.accordion,.cards .card,table,.table tr,.service-status h2')
            .transition({
                animation: 'scale in',
                interval: 150
            });
        const cpuRollElements = document.querySelectorAll('.cpuroll');
        cpuRollElements.forEach((content) => {
            function updateContainerWidth() {
                const containerWidth = content.offsetWidth;
                content.style.setProperty('--container-width', `${containerWidth}px`);
            }
            updateContainerWidth();
            window.addEventListener('resize', updateContainerWidth);
        });
    }
</script>
<style>
    /* 自定义字体 */
    @font-face {
        font-family: 'Harmony Hans';
        src: url(https://cdn.amzayo.top/static/fonts/HarmonyOSHans-Medium.woff2) format('woff2');
    }

    * {
        font-family: 'Harmony Hans';
    }

    /* 背景图片 */
    body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(rgba(23, 23, 23, 0.32), rgba(69, 69, 69, 0.5)), url(https://cdn.jsdelivr.net/gh/imbalaomao/picx-images-hosting@master/20231031/Liella.5m9mkaavze80.63e7i16ujes0.webp);
        background-position: center;
        background-size: cover;
        z-index: -1;
    }

    /* 屏幕适配 */
    @media (min-width: 766px) {
        .ui.container {
            width: 84%;
            margin-left: auto;
            margin-right: auto;
        }

        /* 表格样式 */
        table .visible.transition {
            display: table-row !important;
        }

        .ui.table thead th {
            backdrop-filter: blur(15px) brightness(110%);
            background-color: rgba(0, 0, 0, 0.4);
        }

        thead tr :first-child {
            border-radius: 1rem 0 0 1rem !important;
        }

        thead tr :last-child {
            border-radius: 0 1rem 1rem 0 !important;
        }

        /* 小卡片 */
        .ui .cards>.card {
            border-radius: 1rem;
            border: none !important;
            background-color: rgba(0,0,0,.4);
            padding: .25rem .25rem !important;
            margin: .5rem .3rem !important;
            visibility: hidden;
        }

        /* 小卡片头部调整 */
        .ui.card>.content>.header,
        .ui.cards>.card>.content>.header {
            padding-top: 0;
            display: flex;
            color: rgba(0, 0, 0, .85);
            align-items: center;
            padding-bottom: .2em;
            border-bottom: 1px solid rgba(0, 0, 0, .2);
        }

        .header_info {
            font-size: 1rem !important;
            line-height: 1rem !important;
            margin-top: .3rem !important;
        }
    }

    @media (max-width: 766px) {

        .ui.menu>.container,
        .ui.menu>.grid {
            width: 100%;
            height: 100%;
        }

        /* 表格样式 */
        .ui.table thead {
            backdrop-filter: blur(15px) brightness(110%);
            background-color: rgba(0, 0, 0, 0.4);
        }

        thead {
            border-radius: 1rem !important;
        }

        thead tr {
            padding: 0 !important;
        }

        /* 小卡片 */
        .ui .cards>.card {
            border-radius: 1rem;
            background-color: rgba(255, 255, 255, 0.7);
        }

        /* 小卡片头部调整 */
        .ui.card>.content>.header,
        .ui.cards>.card>.content>.header {
            padding-top: 0.5rem;
            display: flex;
            color: rgba(0, 0, 0, .85);
            align-items: center;
            padding-bottom: .2em;
            border-bottom: 1px solid rgba(0, 0, 0, .2);
        }

        .header_info {
            font-size: 1rem !important;
            line-height: 1rem !important;
            padding-top: -.1rem !important;
        }
    }

    /* 菜单颜色 */
    .ui.large.menu {
        backdrop-filter: blur(15px) brightness(110%);
        background-color: rgba(69,69,69,0.5);
        border-radius: 0 0 1rem 1rem !important;
    }
    .ui.menu .item {
        color: rgb(255 255 255 / 87%) !important;
    }
    .right.menu .menu {
        background-color: rgb(97 97 97 / 50%);
    }

    /* 初始隐藏元素 */
    .nb-menu,
    .nb-menu .right.menu,
    .nb-menu .item,
    .accordion,
    .footer,
    .footer .container b,
    .footer .container small,
    .table,
    .table tr,
    .service-status h2 {
        visibility: hidden;
    }


    .ui.menu .item:last-child {
        padding: 0 1.142em !important;
    }

    /* 登录按钮区域 */
    .ui.simple.dropdown {
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .ui.dropdown.text{
        color: white !important;
    }

    /* 登录之后的下拉菜单 */
    .right.menu .menu {
        border-radius: 0 0 1rem 1rem !important;
        position: absolute;
        top: 0 !important;
        background-color: rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(15px);
        padding: 0 0.3em !important;
    }

    /* 登录按钮颜色（需要使用配套自定义主题） */
    .amzayo-custom-button {
        backdrop-filter: blur(10px) brightness(110%) !important;
        background-color: #0707078f;
        color: #000000cf;
        border: 2px solid #2e2d2b;
        border-radius: 1rem;
        padding: 10px 20px;
        font-size: 16px;
        transition: all 0.5s;
    }

    .amzayo-custom-button:hover {
        background-color: #ff8457;
        color: #000000bd;
        font-weight: bolder;
    }

    /* 大卡片 */
    #app .ui.fluid.accordion {
        backdrop-filter: blur(15px) brightness(110%);
        background: rgba(0, 0, 0, 0.1) !important;
        border-radius: 1rem;
    }

    .ui.styled.accordion .active.title{
        color: rgb(255 255 255 / 95%);
    }

    #app :last-child {
        margin-bottom: 0 !important;
    }

    /* 卡片字体 */
    .ui.card>.content>.header,
    .ui.cards>.card>.content>.header {
        color: #d4d4d5;
    }
    .ui.card>.content>.description,
    .ui.cards>.card>.content>.description{
        color: #d4d4d5;
    }


    #app .ui.fluid.accordion {
        backdrop-filter: blur(15px) brightness(110%);
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 1rem;
    }

    /* 小卡片靠哪个方向对齐 */
    .cards {
        justify-content: center;
    }

    .ui.card>.content {
        margin-top: 5px !important;
    }

    /* 取消下方注释调整下面的数字以调整卡片宽度（非移动端页面，移动端页面让它自适应吧） */
    .ui.cards>.card {
        width: 374px !important;
        margin: 1.3rem 1.3rem !important
    }

    /* 小卡片右上角的图标 */
    i.nezha-secondary-font.info.circle.icon {
        margin-left: auto;
        color: rgba(255, 153, 1, 0.65) !important;
    }

    /* 头部配置信息样式 */
    .header_info i {
        margin-top: .25rem;
        margin-right: .3rem;
        margin-left: .3rem;
    }

    /* 更多信息卡片 */
    .ui.content.popup {
        border: none !important;
        border-radius: 1rem;
        margin: 0;
        padding: 1em !important;
        backdrop-filter: blur(15px) brightness(110%);
        background-color: rgba(3, 3, 3, 0.8) !important;
        width: max-content;
        height: max-content;
    }
    .ui.popup {
        color: white
    }

    /* 小三角 */
    .popup:before {
        backdrop-filter: blur(15px) brightness(110%);
        background-color: rgba(3, 3, 3, 0.8) !important;
        z-index: 9999 !important;
        border: none !important;
    }

    .ui.bottom.popup:before {
        clip-path: polygon(0 0, 100% 0, 50% 50%, 0 100%);
    }

    .ui.top.popup:before {
        clip-path: polygon(100% 100%, 0% 100%, 100% 0);
    }

    /* 进度条圆角和颜色 */
    .ui.progress {
        border-radius: 50rem;
        height: 1.5rem;
    }

    /* 卡片内间距，如需调整小卡片高度，可以修改下面的2rem的数字 */
    .status.cards .wide.column {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        height: 2rem !important;
    }

    .bi::before,
    [class^="bi-"]::before,
    [class*=" bi-"]::before {
        vertical-align: middle;
        margin-bottom: .2rem;
    }

    /* 状态进度条 */
    .card .bar {
        height: 1.5rem;
    }

    .card .bar small {
        vertical-align: super;
        line-height: 1.5rem;
    }

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

    table .ui.progress .bar {
        border-radius: 13px;
    }

    /* 正常状态进度条颜色 */
    .ui.progress.fine .bar {
        background-color: rgb(0, 157, 255) !important;
    }

    /*有点累状态进度条颜色 */
    .ui.progress.warning .bar {
        background-color: #ff7700 !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: rgb(0, 157, 255);
    }

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

    /*服务状态*/
    .service-status .good {
        background-color: rgb(33 186 69) !important;
    }

    /* 服务页面大表格背景 */
    .table {
        backdrop-filter: blur(15px) brightness(110%);
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 1rem !important;
    }

    /* 循环流量统计标题 */
    .service-status h2 {
        backdrop-filter: blur(15px) brightness(110%);
        background-color: rgba(69,69,69,0.5);
        border-radius: 1rem !important;
        margin: 0 !important;
    }

    /* 循环流量统计字体 */
    .ui.table thead th {
        color: rgb(255 255 255 / 87%);
    }
    h2{
        color: white;
    }
    .ui.table {
        color: rgb(255 255 255 / 87%);
    }
    /*底部*/
    .footer {
        backdrop-filter: blur(15px) brightness(110%);
        background-color: rgba(69,69,69,0.5) !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 1rem 1rem 0 0 !important;
    }

    .footer .container,
    .footer .container a {
        color: rgb(255, 255, 255);
        transition: all 0.5s;
    }

    .footer .container a:hover {
        color: #ff8457;
    }

    /* 提示消息 */
    .floating.message.success {
        backdrop-filter: blur(15px) brightness(110%);
        background-color: rgba(69,69,69,0.5);
        border: 3px solid rgba(255.255.255.0.5);
        border-radius: 1rem !important;
        color: white;
        box-shadow: 0 0 15px rgba(1, 132, 255, 0.65);
    }

    .floating.message.success .header {
        color: white;
    }

    .floating.message.warning {
        backdrop-filter: blur(15px) brightness(110%);
        background-color: rgba(69,69,69,0.5);
        border: 1px solid rgba(255.255.255.0.5);
        border-radius: 1rem !important;
        color: rgb(255, 255, 255);
        box-shadow: 0 0 15px rgba(255, 153, 1, 0.65);
    }

    .floating.message.warning .header {
        color: white;
    }

    .cpucontent {
        display: inline-block;
        animation: scroll 10s cubic-bezier(.4,0,.41,1) infinite;
    }

    @keyframes scroll {

        0%,
        100% {
            transform: translateX(0%);
        }

        45% {
            transform: translateX(calc(-100% + var(--container-width)));
        }

        55% {
            transform: translateX(calc(-100% + var(--container-width)));
        }

        90% {
            transform: translateX(0%);
        }
    }
</style>

@oldcaty #77
很棒 暗色系护眼挺好。感谢分享

如果解决手机壁纸不能自适应呢，我看壁纸的css已经有相应的自适应代码，但是还是不能自适应