模板:在积雨云上空相遇/styles.css：修订间差异

2026年10月8日 (四) 18:29的版本

/*
 * 積乱雲の上で、出会う。
 * Skyglass v2
 * Citizen.css 高优先级兼容版
 *
 * 不修改全站 CSS
 * 保留全站 Navbox 的鼠标跟随光效
 */

/* ===== 01. 外层卡片 ===== */

.navbox.sekiun-navbox,
html body.skin-citizen .navbox.sekiun-navbox {
    box-sizing: border-box;
    width: 100%;

    background: rgba(245,251,252,.94) !important;
    color: #263C43 !important;

    border: 2px solid #8EDCE6 !important;
    border-radius: 16px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;

    /* 保留 Citizen 原有外层光效 */
    overflow: visible !important;

    box-shadow:
        0 4px 18px rgba(79,213,232,.16),
        0 0 0 1px rgba(255,255,255,.25) !important;

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

/* 鼠标悬停光晕 */

.navbox.sekiun-navbox:hover,
html body.skin-citizen .navbox.sekiun-navbox:hover {
    border-color: #4FD5E8 !important;

    box-shadow:
        0 6px 25px rgba(79,213,232,.27),
        0 0 18px rgba(79,213,232,.17) !important;
}

/* ===== 02. 积雨云天空渐变标题 ===== */

.navbox.sekiun-navbox .navbox-title,
html body.skin-citizen .navbox.sekiun-navbox .navbox-title {
    background: linear-gradient(
        110deg,
        #B4EBF3 0%,
        #D7F7FA 28%,
        #F3FDFF 50%,
        #D7F7FA 72%,
        #B4EBF3 100%
    ) !important;

    background-size: 220% 100% !important;
    background-position: 0% 50% !important;

    color: #183F49 !important;

    border: 0 !important;
    border-bottom: 2px solid #67D9E8 !important;
    border-radius: 14px 14px 0 0 !important;

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

    transition:
        background-position .85s ease,
        box-shadow .35s ease;
}

/* 标题光影流动 */

.navbox.sekiun-navbox:hover .navbox-title,
html body.skin-citizen .navbox.sekiun-navbox:hover .navbox-title {
    background-position: 100% 50% !important;
}

/* 标题链接覆盖全站 Citizen 链接颜色 */

html body.skin-citizen .navbox.sekiun-navbox .navbox-title a[href],
html body.skin-citizen .navbox.sekiun-navbox .navbox-title a[href]:visited {
    color: #183F49 !important;
    text-decoration: none;
}

html body.skin-citizen .navbox.sekiun-navbox .navbox-title a[href]:hover {
    color: #087D97 !important;
    text-shadow: 0 0 9px rgba(79,213,232,.55);
}

html body.skin-citizen .navbox.sekiun-navbox .navbox-title a.new[href] {
    color: #B73552 !important;
}

/* ===== 03. 乐队 / 成员分组 ===== */

.navbox.sekiun-navbox .navbox-group,
html body.skin-citizen .navbox.sekiun-navbox .navbox-group {
    background: #E0F4F7 !important;
    color: #244650 !important;

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

    padding: .65em .85em !important;
    border-right: 1px solid #B7E3EA !important;
}

/* 避免 Citizen 原本的竖线叠加 */

html body.skin-citizen .navbox.sekiun-navbox .navbox-group + .navbox-list {
    border-left: 0 !important;
}

/* ===== 04. 列表背景 ===== */

.navbox.sekiun-navbox .navbox-list,
html body.skin-citizen .navbox.sekiun-navbox .navbox-list {
    background: #F5FBFC !important;
    color: #263C43 !important;
}

/* 交替背景 */

html body.skin-citizen .navbox.sekiun-navbox .navbox-odd {
    background-color: #F5FBFC !important;
}

html body.skin-citizen .navbox.sekiun-navbox .navbox-even {
    background-color: #EDF7FA !important;
}

html body.skin-citizen .navbox.sekiun-navbox .navbox-list.navbox-even {
    background: #EDF7FA !important;
}

/* 有些 Navbox 把奇偶类放在 tr 上 */

html body.skin-citizen .navbox.sekiun-navbox tr.navbox-even .navbox-list {
    background: #EDF7FA !important;
}

/* 内边距必须覆盖 Citizen 的 > div 规则 */

.navbox.sekiun-navbox .navbox-list > div,
html body.skin-citizen .navbox.sekiun-navbox .navbox-list > div {
    padding: .6em 1em !important;
    line-height: 1.85;
}

/* ===== 05. 人物链接交互 ===== */

html body.skin-citizen .navbox.sekiun-navbox .navbox-list a[href],
html body.skin-citizen .navbox.sekiun-navbox .navbox-list a[href]:visited {
    color: #176477 !important;
    border-radius: 4px;

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

html body.skin-citizen .navbox.sekiun-navbox .navbox-list a[href]:hover {
    color: #087C98 !important;
    background-color: rgba(79,213,232,.14);
    text-shadow: 0 0 8px rgba(79,213,232,.3);
}

/* 未创建条目仍显示红色 */

html body.skin-citizen .navbox.sekiun-navbox .navbox-list a.new[href] {
    color: #B73552 !important;
}

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

.navbox.sekiun-navbox .navbox-abovebelow,
html body.skin-citizen .navbox.sekiun-navbox .navbox-abovebelow {
    background: #E5F7FA !important;
    color: #426B75 !important;

    text-align: center;
    padding: .5em .8em !important;
}

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

/* ===== 07. 夜间模式 / 纯黑模式 ===== */

html.skin-theme-clientpref-night body.skin-citizen .navbox.sekiun-navbox,
html.skin-theme-clientpref-black body.skin-citizen .navbox.sekiun-navbox {
    background: rgba(22,43,53,.94) !important;
    color: #D5EEF2 !important;
    border-color: #397D8D !important;
}

html.skin-theme-clientpref-night body.skin-citizen .navbox.sekiun-navbox .navbox-title,
html.skin-theme-clientpref-black body.skin-citizen .navbox.sekiun-navbox .navbox-title {
    background: linear-gradient(
        110deg,
        #20485B,
        #306579,
        #397D8B,
        #306579,
        #20485B
    ) !important;

    background-size: 220% 100% !important;
    color: #E0F8FA !important;
    border-bottom: 2px solid #4CAABB !important;
}

html.skin-theme-clientpref-night body.skin-citizen .navbox.sekiun-navbox .navbox-title a[href],
html.skin-theme-clientpref-black body.skin-citizen .navbox.sekiun-navbox .navbox-title a[href] {
    color: #E0F8FA !important;
}

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

html.skin-theme-clientpref-night body.skin-citizen .navbox.sekiun-navbox .navbox-list,
html.skin-theme-clientpref-black body.skin-citizen .navbox.sekiun-navbox .navbox-list {
    background: #192F38 !important;
    color: #D5EEF2 !important;
}

html.skin-theme-clientpref-night body.skin-citizen .navbox.sekiun-navbox .navbox-even,
html.skin-theme-clientpref-black body.skin-citizen .navbox.sekiun-navbox .navbox-even,
html.skin-theme-clientpref-night body.skin-citizen .navbox.sekiun-navbox .navbox-list.navbox-even,
html.skin-theme-clientpref-black body.skin-citizen .navbox.sekiun-navbox .navbox-list.navbox-even,
html.skin-theme-clientpref-night body.skin-citizen .navbox.sekiun-navbox tr.navbox-even .navbox-list,
html.skin-theme-clientpref-black body.skin-citizen .navbox.sekiun-navbox tr.navbox-even .navbox-list {
    background: #203944 !important;
}

html.skin-theme-clientpref-night body.skin-citizen .navbox.sekiun-navbox .navbox-abovebelow,
html.skin-theme-clientpref-black body.skin-citizen .navbox.sekiun-navbox .navbox-abovebelow {
    background: #234552 !important;
    color: #B5DAE1 !important;
}

html.skin-theme-clientpref-night body.skin-citizen .navbox.sekiun-navbox .navbox-list a[href],
html.skin-theme-clientpref-black body.skin-citizen .navbox.sekiun-navbox .navbox-list a[href] {
    color: #A1E8F2 !important;
}

html.skin-theme-clientpref-night body.skin-citizen .navbox.sekiun-navbox .navbox-list a[href]:hover,
html.skin-theme-clientpref-black body.skin-citizen .navbox.sekiun-navbox .navbox-list a[href]:hover {
    color: #D4FAFF !important;
}

html.skin-theme-clientpref-night body.skin-citizen .navbox.sekiun-navbox a.new[href],
html.skin-theme-clientpref-black body.skin-citizen .navbox.sekiun-navbox a.new[href] {
    color: #FF9BA6 !important;
}

/* ===== 08. 跟随系统深色模式 ===== */

@media screen and (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os body.skin-citizen .navbox.sekiun-navbox {
        background: rgba(22,43,53,.94) !important;
        color: #D5EEF2 !important;
        border-color: #397D8D !important;
    }

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

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

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

    html.skin-theme-clientpref-os body.skin-citizen .navbox.sekiun-navbox .navbox-list {
        background: #192F38 !important;
        color: #D5EEF2 !important;
    }

    html.skin-theme-clientpref-os body.skin-citizen .navbox.sekiun-navbox .navbox-even,
    html.skin-theme-clientpref-os body.skin-citizen .navbox.sekiun-navbox .navbox-list.navbox-even,
    html.skin-theme-clientpref-os body.skin-citizen .navbox.sekiun-navbox tr.navbox-even .navbox-list {
        background: #203944 !important;
    }

    html.skin-theme-clientpref-os body.skin-citizen .navbox.sekiun-navbox .navbox-abovebelow {
        background: #234552 !important;
        color: #B5DAE1 !important;
    }

    html.skin-theme-clientpref-os body.skin-citizen .navbox.sekiun-navbox .navbox-list a[href] {
        color: #A1E8F2 !important;
    }

    html.skin-theme-clientpref-os body.skin-citizen .navbox.sekiun-navbox a.new[href] {
        color: #FF9BA6 !important;
    }
}

/* ===== 09. 移动端优化 ===== */

@media screen and (max-width: 640px) {
    html body.skin-citizen .navbox.sekiun-navbox {
        border-radius: 11px !important;
    }

    html body.skin-citizen .navbox.sekiun-navbox .navbox-title {
        padding: .65em .5em !important;
        border-radius: 9px 9px 0 0 !important;
    }

    html body.skin-citizen .navbox.sekiun-navbox .navbox-group {
        padding: .5em .4em !important;
    }

    html body.skin-citizen .navbox.sekiun-navbox .navbox-list > div {
        padding: .5em .65em !important;
        overflow-wrap: anywhere;
    }
}

/* ===== 10. 减少动态效果 ===== */

@media (prefers-reduced-motion: reduce) {
    .navbox.sekiun-navbox,
    .navbox.sekiun-navbox .navbox-title,
    .navbox.sekiun-navbox a {
        transition: none !important;
    }
}