哪吒探针主题DIY

    5
<head>
    <link rel="stylesheet" type="text/css" href="https://dokku.eu.org/down.php/4789bec4633c150273e10c9f8e234403.css">
</head>

<!--替换默认Favicon-->
<script>
    var faviconurl = "//inkart.eu.org/i/2024/04/04/195443.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>


<style>
    /* 屏幕适配 */
    @media only screen and (min-width: 1200px) {
        .ui.container {
            width: 80% !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,
    html {
        font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
        justify-content: center;
        align-items: center;
        margin: 0;
        /* height: 1000%; */
    }

    body {
        background: linear-gradient(45deg, #3498db, #e74c3c, #2ecc71, #f39c12, #9b59b6, #1abc9c, #e67e22) !important;
        background-size: 600% 600% !important;
        animation: gradientAnimation 10s ease infinite !important;
    }



    @keyframes gradientAnimation {
        0% {
            background-position: 0% 50%;
        }

        50% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0% 50%;
        }

    }




    /* 导航栏 */
    .ui.large.menu {
        backdrop-filter: blur(15px) brightness(110%);
        background-color: var(--he-color-light);
        border-radius: 0 0 1rem 1rem !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;
    }

    /* 登录按钮区域 */
    .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: var(--he-color-light);
        backdrop-filter: blur(15px);
        padding: 0 0.3em !important;
    }

    .nezha-primary-btn {
        background-color: #ffffff8f !important;
        color: #000000cf !important;
    }

    .right.menu .item a.ui.large.positive.nezha-primary-btn.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 {
        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;
    }

    .nezha-primary-btn:hover {
        background-color: #ff8457;
        color: #ffffffbd;
        font-weight: bolder;
    }

    /* 大卡片 */
    #app .ui.fluid.accordion {
        background-color: #fbfbfb26 !important;
        border-radius: 0.4rem !important;
    }

    /* 小卡片 */
    .ui.four.cards>.card {
        background-color: rgba(255, 255, 255, 0.664);
        box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.2);
        border-radius: 0.6rem !important;
        /* background-color: #fafafaa3 !important; */
        transition: box-shadow 0.3s ease;
    }

    .ui.four.cards>.card:hover {
        box-shadow: 0px 0px 40px 0px rgba(255, 255, 255, 0.642);
    }

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

    .status.cards .three.wide.column {
        padding-right: 0rem !important;
    }

    .status.cards .wide.column:nth-child(1) {
        margin-top: 2rem !important;
    }

    .status.cards .wide.column:nth-child(2) {
        margin-top: 2rem !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: 8px !important;
        /* 减小圆角半径 */
        /* height: 1.65em !important; 减小进度条的高度 */
    }

    /* 状态进度条 */
    .ui.progress .bar {
        min-width: 1.8em !important;
        border-radius: 8px !important;
        /* 圆角半径保持一致 */
        line-height: 1.65em !important;
    }


    /* 正常状态进度条颜色 */
    .ui.progress.fine .bar {
        background-color: #4CAF50 !important;
        /* 苹果绿色 */
    }

    /* 有点累状态进度条颜色 */
    .ui.progress.warning .bar {
        background-color: #FFC107 !important;
        /* 苹果黄色 */
    }

    /* 高负载状态进度条颜色 */
    .ui.progress.error .bar {
        background-color: #FF3D00 !important;
        /* 苹果橙红色 */
    }

    /* 离线状态进度条颜色 */
    .ui.progress.offline .bar {
        background-color: #8E8E93 !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;
        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;
        font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;

        background-color: var(--he-color-light);
        backdrop-filter: blur(15px) brightness(110%);
    }

    .ui.content {
        margin: 0 !important;
        padding: 1em !important;
    }

    /* 服务页 */
    .ui.table {
        background: RGB(225, 225, 225, 0.6) !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;
    }

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

    .floating.message.success .header {
        color: var(--message-color-light);
    }

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

    .floating.message.warning .header {
        color: var(--message-color-light);
    }


    /* 版权 */
    /*底部*/
    .footer {
        backdrop-filter: blur(15px) brightness(110%);
        background-color: var(--he-color-light);
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 1rem 1rem 0 0 !important;
    }

    .ui.inverted.segment,
    .ui.primary.inverted.segment {
        background-color: var(--he-color-light);
    }

    .footer .container,
    .footer .container a {
        color: var(--message-color-light);
        transition: all 0.5s;
    }

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

    .copyright-link {
        display: inline-block;
        animation: rainbowText 5s infinite;
        font-weight: bold;
        /* Change 5s to your preferred duration */
    }

    @keyframes rainbowText {
        0% {
            color: red;
        }

        14% {
            color: orange;
        }

        28% {
            color: yellow;
        }

        42% {
            color: green;
        }

        57% {
            color: cyan;
        }

        71% {
            color: blue;
        }

        85% {
            color: indigo;
        }

        100% {
            color: red;
        }
    }

    i.flag:not(.icon) {
        width: 20px;
        height: 15px;
    }

    i.fi {
        width: 20px;
        height: 15px
    }

    i.flag:not(.icon):before {
        display: inline-block;
        content: '';
        width: 20px;
        height: 15px
    }
</style>

<!--Logo和版权-->
<script>
    window.onload = function () {
        var avatar = document.querySelector(".item img");
        var footer = document.querySelector("div.is-size-7");
        footer.innerHTML =
            'Copyright <a href="https://mailgo.eu.org/" target="_blank" class="copyright-link">© Monitor-VPS</a> 2023-2024 All Rights Reserved.';
        footer.style.visibility = "visible";
        avatar.src = "https://inkart.eu.org/i/2024/04/04/195443.png";
        avatar.style.visibility = "visible";
    }
</script>

消息盒子

# 暂无消息 #

只显示最新10条未读和已读信息