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

/*
 * SUMMER SKYGLASS 3.1
 * 積乱雲の上で、出会う。
 * No CSS image URLs
 */

/* ===== 主体 ===== */

html body.skin-citizen .navbox.sekiun-navbox {
    background: #F3FAFF !important;
    border: 2px solid #8DDCEB !important;
    border-radius: 16px !important;
    border-collapse: separate !important;

    box-shadow:
        0 6px 22px rgba(54,172,218,.18) !important;

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

html body.skin-citizen .navbox.sekiun-navbox:hover {
    border-color: #45D1EB !important;
    box-shadow:
        0 8px 30px rgba(54,172,218,.28),
        0 0 18px rgba(71,211,245,.22) !important;
}

/* ===== 云层标题 ===== */

html body.skin-citizen .navbox.sekiun-navbox .navbox-title {
    position: relative !important;
    overflow: hidden !important;
    padding: 23px 12px !important;

    background: #B9EAFB !important;
    color: #13465C !important;

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

    text-align: center;
}

/* 覆盖 Citizen 强制透明的规则 */

html body.skin-citizen .navbox.sekiun-navbox .navbox-title:not([style*="background"]) {
    background: #B9EAFB !important;
}

/* 图片容器 */

.sekiun-navbox .sekiun-sky {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    display: block;
    overflow: hidden;
    z-index: 0;
}

/* MediaWiki 图片 */

.sekiun-navbox .sekiun-sky img {
    position: absolute;
    top: 0;
    left: 0;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover;
    object-position: center 43%;

    transform: scale(1.035);

    transition: transform 1s ease;
}

/* 悬停：云层缓缓放大 */

.sekiun-navbox:hover .sekiun-sky img {
    transform: scale(1.09);
}

/* ===== 夏空渐变遮罩 ===== */

html body.skin-citizen .navbox.sekiun-navbox .navbox-title::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background: linear-gradient(
        110deg,
        rgba(200,239,255,.72),
        rgba(255,255,255,.30) 45%,
        rgba(201,238,255,.65)
    ) !important;

    z-index: 1;
}

/* ===== 标题文字 ===== */

.sekiun-navbox .sekiun-title-text {
    position: relative;
    z-index: 2;

    color: #124B62;
    font-weight: 700;
    letter-spacing: .04em;

    text-shadow:
        0 1px 3px #FFFFFF,
        0 0 14px rgba(255,255,255,.8);
}

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

html body.skin-citizen .navbox.sekiun-navbox .sekiun-title-text a[href]:hover {
    color: #007FA6 !important;
    text-shadow: 0 0 12px #8BE9FF;
}

/* 保持导航和折叠按钮可见 */

html body.skin-citizen .navbox.sekiun-navbox .navbox-title .navbar,
html body.skin-citizen .navbox.sekiun-navbox .navbox-title .mw-collapsible-toggle {
    position: relative !important;
    z-index: 3;
}

/* ===== 分组 ===== */

html body.skin-citizen .navbox.sekiun-navbox .navbox-group {
    background: #DDF4FC !important;
    color: #24586C !important;

    text-align: center !important;
    padding: 10px 14px !important;
}

/* ===== 成员列表 ===== */

html body.skin-citizen .navbox.sekiun-navbox .navbox-list {
    background: #F6FCFF !important;
    color: #294C58 !important;
}

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

html body.skin-citizen .navbox.sekiun-navbox .navbox-list > div {
    padding: 10px 14px !important;
    line-height: 1.85;
}

html body.skin-citizen .navbox.sekiun-navbox .navbox-list a[href] {
    color: #14738D !important;
    transition: color .25s ease;
}

html body.skin-citizen .navbox.sekiun-navbox .navbox-list a[href]:hover {
    color: #00A1C7 !important;
    text-shadow: 0 0 8px rgba(65,205,239,.4);
}

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

/* ===== 底栏 ===== */

html body.skin-citizen .navbox.sekiun-navbox .navbox-abovebelow {
    background: #DEF4FC !important;
    color: #458396 !important;
    text-align: center;
    padding: 9px !important;
}

.sekiun-navbox .sekiun-footer {
    font-size: 85%;
    letter-spacing: .14em;
}

/* ===== 深色模式 ===== */

html.skin-theme-clientpref-night body.skin-citizen .navbox.sekiun-navbox,
html.skin-theme-clientpref-black body.skin-citizen .navbox.sekiun-navbox {
    background: #193440 !important;
    border-color: #458FA5 !important;
}

html.skin-theme-clientpref-night body.skin-citizen .navbox.sekiun-navbox .navbox-title::after,
html.skin-theme-clientpref-black body.skin-citizen .navbox.sekiun-navbox .navbox-title::after {
    background: linear-gradient(
        110deg,
        rgba(7,30,47,.78),
        rgba(12,57,80,.52),
        rgba(7,30,47,.78)
    ) !important;
}

html.skin-theme-clientpref-night body.skin-citizen .navbox.sekiun-navbox .sekiun-title-text a[href],
html.skin-theme-clientpref-black body.skin-citizen .navbox.sekiun-navbox .sekiun-title-text a[href] {
    color: #E4F9FF !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: #245061 !important;
    color: #DDF5FC !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: #193440 !important;
    color: #DAF0F7 !important;
}

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 {
    background: #214552 !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: #245061 !important;
    color: #B7E7F2 !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: #9EE8F8 !important;
}

/* ===== 手机端 ===== */

@media screen and (max-width: 640px) {
    html body.skin-citizen .navbox.sekiun-navbox .navbox-title {
        padding: 18px 6px !important;
    }

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

/* ===== 减少动态 ===== */

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