【テクニック】哪吒パネルのバックエンド美化

これは他人のコピーです。

修正後の効果は以下の通りです：

バックエンドカスタム CSS：

<style>

/* スクリーン適応 */
@media only screen and (min-width: 1200px) {
    .ui.container {
        width: 90% !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://s1.locimg.com/2023/04/25/4d8a5ab26c352.jpg) !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

/* ナビゲーションバー */
.ui.large.menu {
    border: 0 !important;
    border-radius: 0px !important;
    background-color: rgba(29, 29, 29, 0.55) !important;
}

/* ホームボタン */
.ui.menu .active.item {
    background-color: transparent !important;
}

/* ナビゲーションバーのドロップダウン */
.ui.dropdown .menu {
    border: 0 !important;
    border-radius: 0 !important;
    background-color: rgba(29, 29, 29, 0.8) !important;
}

/* ログインボタン */
.nezha-primary-btn {
    background-color: transparent !important;
    color: #fff !important;
}

/* 大カード */
#app .ui.fluid.accordion {
    background-color: #3030301f !important;
    border-radius: 0.4rem !important;
}

/* 小カード */
.ui.four.cards>.card {
    border-radius: 0.6rem !important;
    background-color: #272526a3 !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;
    color: black
}

.ui.fine.progress>.bar {
    background-color: #ba45ac !important;
}

.ui.progress>.bar {
    background-color: #000 !important;
}

.ui.progress.fine .bar {
    background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
    !important;
}

.ui.progress.warning .bar {
    background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
    !important;
}

.ui.progress.error .bar {
    background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
    important;
}

.ui.progress.offline .bar {
    background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
    !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 #272526eb !important;
    background: #272526eb !important;
}

.ui.top.popup:before {
    border-color: #272526eb transparent transparent !important;
}

.ui.popup:before {
    border-color: #272526eb transparent transparent !important;
}

.ui.bottom.left.popup:before {
    border-radius: 0 !important;
    border: 1px solid transparent !important;
    border-color: #272526eb transparent transparent !important;
    background: #272526eb !important;
    -webkit-box-shadow: 0px 0px 0 0 #272526eb !important;
    box-shadow: 0px 0px 0 0 #272526eb !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: #272526eb transparent transparent !important;
    background: #272526eb !important -webkit-box-shadow: 0px 0px 0 0 #272526eb !important;
    box-shadow: 0px 0px 0 0 #272526eb !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: #272526eb transparent transparent !important;
    background: #272526eb !important;
    -webkit-box-shadow: 0px 0px 0 0 #272526eb !important;
    box-shadow: 0px 0px 0 0 #272526eb !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: #272526eb transparent transparent !important;
    background: #272526eb !important;
    -webkit-box-shadow: 0px 0px 0 0 #272526eb !important;
    box-shadow: 0px 0px 0 0 #272526eb !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: #272526eb transparent transparent !important;
    background: #272526eb !important;
    -webkit-box-shadow: 0px 0px 0 0 #272526eb !important;
    box-shadow: 0px 0px 0 0 #272526eb !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: #272526eb !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

.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;
}

/* サービスページプログレスバー */

/* 著作権 */
.ui.inverted.segment,
.ui.primary.inverted.segment {
    color: #000 !important;
    font-weight: bold !important;
    background-color: #272526a3 !important;
}

</style>

黒背景とサーバー CPU 情報表示などの効果について：
Docker コンテナ内のtemplate/common/フォルダにあるheader.htmlとmenu.htmlを変更する必要があります。また、template/theme-default/フォルダ内のhome.htmlも変更する必要があります。大まかな修正の考え方は以下の通りです：

 を  に変更

および

@#server.Name + (server.live?'':'[{{tr "Offline"}}]')#@ を @#server.Name + (server.live?'':'[{{tr "Offline"}}]')#@ に変更

大まかに言えば、文字表示部分を白色に変更し、背景と上部メニューを黒色に変更する必要があります。