哪吒监控面板默认主题美化代码2023版

oocun
已于 2024-11-19 01:44:00 修改
阅读量2k
点赞数 1
CC 4.0 BY-SA版权
文章标签： linux
于 2023-10-13 14:58:17 首次发布
本文链接：https://blog.youkuaiyun.com/oocun/article/details/133810853
本文提供了哪吒监控面板的样式定制指导，包括媒体查询、图标颜色、背景图片、导航栏样式、登录按钮、卡片样式、进度条动画和版权信息的调整。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
预览图

使用方法

打开哪吒监控面板控制后台后，选择设置，主题选择默认Default，然后将下面的自定义代码粘贴进去即可
<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);
        });
        $('.cpucontent').addClass("rollanimation");
    }
</script>
<style>
    /* 自定义字体 */
    @font-face {
        font-family: 'Harmony Hans';
        src: url(https://jsdelivr.panbaidu.cn/gh/baige007/ttf/HarmonyOS_Sans_SC_Medium.woff2) format('woff2');
    }

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

    /* 背景图片 */
    body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: url(https://imgapi.cn/bing.php?rand=true) center/cover no-repeat;
}

    /* 屏幕适配 */
    @media (min-width: 766px) {
        .ui.container {
            width: 80%;
            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(255, 255, 255, 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(255, 255, 255, 0.7);
            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;
padding-right:.38rem !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(255, 255, 255, 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;
padding-right:.38rem !important;
        }
    }

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

    /* 初始隐藏元素 */
    .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;
    }

    /* 登录之后的下拉菜单 */
    .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: #ffffff8f;
        color: #000000cf;
        border: 2px solid #ebe1d9;
        border-radius: 1rem;
        padding: 10px 20px;
        font-size: 16px;
        transition: all 0.5s;
    }

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

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

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

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

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

    /* 取消下方注释调整下面的数字以调整卡片宽度（非移动端页面，移动端页面让它自适应吧） */
    /* .ui.card,
    .ui.cards>.card {
        width: 300px !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(251, 251, 251, 0.8) !important;
        width: max-content;
        height: max-content;
    }

    /* 小三角 */
    .popup:before {
        backdrop-filter: blur(15px) brightness(110%);
        background-color: rgba(251, 251, 251, 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(255, 255, 255, 0.5);
        border-radius: 1rem !important;
        margin: 0 !important;
    }

    /*底部*/
    .footer {
        backdrop-filter: blur(15px) brightness(110%);
        background-color: rgba(255, 255, 255, 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(0, 0, 0);
        transition: all 0.5s;
    }

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

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

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

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

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

    .cpucontent {
        display: inline-block;
    }

    .rollanimation {
        animation: scroll 20s cubic-bezier(.3, 0, .7, 1) infinite;
    }

    @keyframes scroll {

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

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

        65% {
            transform: translateX(calc(-100% + var(--container-width)));
        }
    }
</style>