模板:在积雨云上空相遇/styles.css

/*
 * 積乱雲の上で、出会う。
 * Navbox Theme: SKyglass
 * 独立 TemplateStyles
 */

/* ===== 01. 外层主体 ===== */

.navbox.sekiun-navbox {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 0 !important;
    overflow: hidden;

    border: 2px solid #8EDCE6;
    border-radius: 12px;

    background: #F5FBFC;
    color: #263C43;

    box-shadow:
        0 3px 14px rgba(79,213,232,.13),
        inset 0 0 0 1px rgba(255,255,255,.5);

    transition:
        border-color .35s ease,
        box-shadow .35s ease;
}

/* 悬停辉光 */
.navbox.sekiun-navbox:hover {
    border-color: #4FD5E8;

    box-shadow:
        0 5px 22px rgba(79,213,232,.26),
        0 0 15px rgba(79,213,232,.13),
        inset 0 0 0 1px rgba(255,255,255,.55);
}

/* 内部表格 */
.navbox.sekiun-navbox .navbox-inner {
    width: 100%;
    border-spacing: 0;
    background: transparent;
}

/* ===== 02. 天空流光标题 ===== */

.navbox.sekiun-navbox .navbox-title {
    background-color: #C2F3F6 !important;

    background-image: linear-gradient(
        110deg,
        #B4EBF3 0%,
        #D7F7FA 28%,
        #F3FDFF 50%,
        #D7F7FA 72%,
        #B4EBF3 100%
    ) !important;

    background-size: 200% 100%;
    background-position: 0% 50%;

    color: #183F49 !important;

    border: 0;
    border-bottom: 2px solid #67D9E8;

    padding: .7em .8em;
    text-align: center;
    letter-spacing: .045em;

    transition: background-position .85s ease;
}

/* 鼠标靠近时渐变流动 */
.navbox.sekiun-navbox:hover .navbox-title {
    background-position: 100% 50%;
}

/* 标题链接 */
.navbox.sekiun-navbox .navbox-title a {
    color: #183F49 !important;
    text-decoration: none;
    transition: text-shadow .3s ease;
}

.navbox.sekiun-navbox .navbox-title a:hover {
    text-shadow: 0 0 9px rgba(79,213,232,.6);
}

/* ===== 03. 分组标题 ===== */

.navbox.sekiun-navbox .navbox-group {
    background: #E0F4F7 !important;
    color: #244650 !important;

    text-align: center;
    font-weight: 600;

    padding: .7em .9em;
    border-right: 1px solid #C3E8ED;
}

/* ===== 04. 成员内容 ===== */

.navbox.sekiun-navbox .navbox-list {
    color: #263C43 !important;
    padding: .5em .75em;
    line-height: 1.9;
}

/* 奇偶行 */
.navbox.sekiun-navbox .navbox-odd {
    background: #F5FBFC !important;
}

.navbox.sekiun-navbox .navbox-even {
    background: #EDF7FA !important;
}

/* 人物链接 */
.navbox.sekiun-navbox .navbox-list a {
    color: #176477;
    border-radius: 4px;

    padding: .12em .2em;

    transition:
        color .25s ease,
        background-color .25s ease,
        text-shadow .25s ease;
}

.navbox.sekiun-navbox .navbox-list a:hover {
    color: #087C98;
    background-color: rgba(79,213,232,.13);
    text-shadow: 0 0 7px rgba(79,213,232,.3);
}

/* ===== 05. 作品底栏 ===== */

.navbox.sekiun-navbox .navbox-abovebelow {
    background: #E5F7FA !important;
    color: #426B75 !important;

    text-align: center;
    padding: .48em .8em;
    border-top: 1px solid #D0EDF1;
}

.navbox.sekiun-navbox .sekiun-footer {
    font-size: 90%;
    letter-spacing: .08em;
}

/* ===== 06. Citizen 深色模式 ===== */

html.skin-theme-clientpref-night .navbox.sekiun-navbox {
    background: #172D36;
    color: #D5EEF2;
    border-color: #397D8D;
}

html.skin-theme-clientpref-night .sekiun-navbox .navbox-title {
    background-color: #214B5B !important;
    background-image: linear-gradient(
        110deg,
        #20485B,
        #306579,
        #397D8B,
        #306579,
        #20485B
    ) !important;
    color: #E0F8FA !important;
    border-bottom-color: #4CAABB;
}

html.skin-theme-clientpref-night .sekiun-navbox .navbox-title a {
    color: #E0F8FA !important;
}

html.skin-theme-clientpref-night .sekiun-navbox .navbox-group {
    background: #234552 !important;
    color: #D5F0F3 !important;
    border-right-color: #3B6975;
}

html.skin-theme-clientpref-night .sekiun-navbox .navbox-list {
    color: #D5EEF2 !important;
}

html.skin-theme-clientpref-night .sekiun-navbox .navbox-odd {
    background: #192F38 !important;
}

html.skin-theme-clientpref-night .sekiun-navbox .navbox-even {
    background: #203944 !important;
}

html.skin-theme-clientpref-night .sekiun-navbox .navbox-list a {
    color: #A1E8F2;
}

html.skin-theme-clientpref-night .sekiun-navbox .navbox-list a:hover {
    color: #D4FAFF;
    background: rgba(104,220,239,.16);
}

html.skin-theme-clientpref-night .sekiun-navbox .navbox-abovebelow {
    background: #234552 !important;
    color: #B5DAE1 !important;
    border-top-color: #386C79;
}

/* 系统自动深色模式 */
@media screen and (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .navbox.sekiun-navbox {
        background: #172D36;
        color: #D5EEF2;
        border-color: #397D8D;
    }

    html.skin-theme-clientpref-os .sekiun-navbox .navbox-title {
        background-color: #214B5B !important;
        background-image: linear-gradient(
            110deg,
            #20485B, #306579, #397D8B,
            #306579, #20485B
        ) !important;
        color: #E0F8FA !important;
        border-bottom-color: #4CAABB;
    }

    html.skin-theme-clientpref-os .sekiun-navbox .navbox-title a {
        color: #E0F8FA !important;
    }

    html.skin-theme-clientpref-os .sekiun-navbox .navbox-group {
        background: #234552 !important;
        color: #D5F0F3 !important;
        border-right-color: #3B6975;
    }

    html.skin-theme-clientpref-os .sekiun-navbox .navbox-list {
        color: #D5EEF2 !important;
    }

    html.skin-theme-clientpref-os .sekiun-navbox .navbox-odd {
        background: #192F38 !important;
    }

    html.skin-theme-clientpref-os .sekiun-navbox .navbox-even {
        background: #203944 !important;
    }

    html.skin-theme-clientpref-os .sekiun-navbox .navbox-list a {
        color: #A1E8F2;
    }

    html.skin-theme-clientpref-os .sekiun-navbox .navbox-list a:hover {
        color: #D4FAFF;
        background: rgba(104,220,239,.16);
    }

    html.skin-theme-clientpref-os .sekiun-navbox .navbox-abovebelow {
        background: #234552 !important;
        color: #B5DAE1 !important;
        border-top-color: #386C79;
    }
}

/* ===== 07. 手机端 ===== */

@media screen and (max-width: 640px) {
    .navbox.sekiun-navbox {
        border-radius: 9px;
    }

    .navbox.sekiun-navbox .navbox-title {
        padding: .65em .4em;
        letter-spacing: 0;
    }

    .navbox.sekiun-navbox .navbox-group {
        padding: .55em .45em;
    }

    .navbox.sekiun-navbox .navbox-list {
        padding: .45em;
        line-height: 1.8;
        overflow-wrap: anywhere;
    }
}

/* 减少动态效果 */
@media (prefers-reduced-motion: reduce) {
    .navbox.sekiun-navbox,
    .navbox.sekiun-navbox .navbox-title,
    .navbox.sekiun-navbox a {
        transition: none;
    }
}