查看“︁模板:在积雨云上空相遇/styles.css”︁的源代码


/*
 * 積乱雲の上で、出会う。
 * SUMMER SKYGLASS 4.0
 * Full Navbox Sky Experience
 */

/* ===== 01. 外层：明亮天空卡片 ===== */

.navbox.sekiun-navbox,
html body.skin-citizen .navbox.sekiun-navbox {
    position: relative !important;
    background: #99DDF7 !important;
    border: 2px solid #45CFF2 !important;
    border-radius: 18px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: visible !important;

    box-shadow:
        0 7px 28px rgba(27,172,231,.26),
        0 0 15px rgba(65,205,245,.20) !important;

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

.navbox.sekiun-navbox:hover,
html body.skin-citizen .navbox.sekiun-navbox:hover {
    border-color: #00C9F5 !important;
    box-shadow:
        0 10px 36px rgba(12,169,232,.38),
        0 0 24px rgba(57,213,255,.30) !important;
}

/* ===== 02. 整卡云层定位 ===== */

/*
 * navbox-inner 是定位容器。
 * 标题单元格和标题 div 保持 static，
 * 这样绝对定位的云图可以覆盖整张内部表格。
 */

.sekiun-navbox .navbox-inner,
html body.skin-citizen .navbox.sekiun-navbox .navbox-inner {
    position: relative;
    z-index: 0;
    background: transparent !important;
}

.sekiun-navbox .navbox-title,
.sekiun-navbox .sekiun-title-inner,
html body.skin-citizen .navbox.sekiun-navbox .navbox-title,
html body.skin-citizen .navbox.sekiun-navbox .sekiun-title-inner {
    position: static !important;
}

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

    display: block;
    overflow: hidden;
    border-radius: 15px;
    z-index: 0;
}

/* 图片本体：覆盖整个 Navbox */

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

    width: 100% !important;
    height: 100% !important;
    max-width: none !important;

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

    transform: scale(1.025);
    transition: transform 1.3s ease;
}

/* Hover：整个云层向前推进 */

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

/* ===== 03. 云层光影 ===== */

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

    background: linear-gradient(
        110deg,
        rgba(30,174,241,.11),
        rgba(255,255,255,.03) 45%,
        rgba(28,180,246,.16)
    );

    z-index: 1;
    transition: background-color .4s ease;
}

/* ===== 04. 标题：作品主视觉 ===== */

.sekiun-navbox .navbox-title,
html body.skin-citizen .navbox.sekiun-navbox .navbox-title {
    padding: 25px 10px 20px !important;
    background: transparent !important;

    border: 0 !important;
    border-bottom: 2px solid rgba(255,255,255,.72) !important;

    text-align: center;
    color: #064965 !important;
}

/* 标题里的真实内容高于云层 */

.sekiun-navbox .sekiun-title-text {
    display: inline-block;
    position: relative;
    z-index: 3;

    padding: 7px 16px;
    border-radius: 10px;

    background: rgba(233,251,255,.75);
    border: 1px solid rgba(255,255,255,.88);

    color: #074C68;
    font-size: 1.22em;
    font-weight: 800;
    letter-spacing: .07em;

    text-shadow: 0 1px 3px #FFFFFF;

    box-shadow:
        0 4px 17px rgba(19,103,152,.21),
        inset 0 1px 0 #FFFFFF;

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

.sekiun-navbox:hover .sekiun-title-text {
    transform: translateY(-2px);

    box-shadow:
        0 6px 25px rgba(12,135,205,.30),
        0 0 16px rgba(120,230,255,.50);
}

/* 英文副标题 */

.sekiun-navbox .sekiun-title-en {
    display: block;
    position: relative;
    z-index: 3;

    margin-top: 8px;
    font-size: .65em;
    font-weight: 700;
    letter-spacing: .24em;

    color: #FFFFFF;
    text-shadow:
        0 1px 4px rgba(0,65,105,.85),
        0 0 12px rgba(0,65,105,.50);
}

/* 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: #074C68 !important;
    text-decoration: none !important;
}

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

/* 折叠按钮与 navbar 始终在上层 */

.sekiun-navbox .navbox-title .navbar,
.sekiun-navbox .navbox-title .mw-collapsible-toggle,
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: 5;
}

/* ===== 05. 内容单元格叠在图片上 ===== */

.sekiun-navbox .navbox-group,
.sekiun-navbox .navbox-list,
.sekiun-navbox .navbox-abovebelow,
html body.skin-citizen .navbox.sekiun-navbox .navbox-group,
html body.skin-citizen .navbox.sekiun-navbox .navbox-list,
html body.skin-citizen .navbox.sekiun-navbox .navbox-abovebelow {
    position: relative;
    z-index: 2;
}

/* 作品标识条 */

html body.skin-citizen .navbox.sekiun-navbox .navbox-abovebelow,
.navbox.sekiun-navbox .navbox-abovebelow {
    text-align: center;
    padding: 10px 14px !important;
    border: 0 !important;
}

.sekiun-navbox .sekiun-kicker {
    font-size: .85em;
    font-weight: 800;
    letter-spacing: .16em;
    color: #086183;
}

/* 上方标识条 */

/* ===== 06. 分组浮层 ===== */

.sekiun-navbox .navbox-group,
html body.skin-citizen .navbox.sekiun-navbox .navbox-inner .navbox-group {
    background: rgba(210,244,255,.79) !important;
    color: #07566E !important;

    text-align: center !important;
    padding: 13px 15px !important;
    font-weight: 800;

    border-right: 2px solid rgba(75,205,241,.55) !important;
    border-top: 1px solid rgba(255,255,255,.55) !important;
}

/* ===== 07. 成员列表：浮在云层之上 ===== */

.sekiun-navbox .navbox-list,
html body.skin-citizen .navbox.sekiun-navbox .navbox-inner .navbox-list {
    background: rgba(246,253,255,.54) !important;
    color: #17475A !important;
    border-top: 1px solid rgba(255,255,255,.42) !important;
}

html body.skin-citizen .navbox.sekiun-navbox .navbox-inner .navbox-even {
    background: rgba(216,245,255,.46) !important;
}

html body.skin-citizen .navbox.sekiun-navbox .navbox-list > div {
    padding: 12px 15px !important;
    line-height: 2;
}

/* ===== 08. 成员标签 ===== */

.sekiun-navbox .sekiun-member {
    display: inline-block;
    margin: 3px 4px 3px 0;
    padding: 5px 10px;

    background: rgba(255,255,255,.74);
    border: 1px solid rgba(136,220,244,.82);
    border-radius: 8px;

    box-shadow: 0 2px 9px rgba(22,151,199,.10);

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

.sekiun-navbox .sekiun-member:hover {
    transform: translateY(-3px);
    background: rgba(231,251,255,.98);

    box-shadow:
        0 5px 18px rgba(12,165,214,.27),
        0 0 11px rgba(107,221,253,.34);
}

.sekiun-navbox .sekiun-role {
    margin-left: 5px;
    font-size: .72em;
    font-weight: 700;
    letter-spacing: .04em;
    color: #54899A;
}

/* 链接颜色 */

html body.skin-citizen .navbox.sekiun-navbox .navbox-list a[href],
html body.skin-citizen .navbox.sekiun-navbox .navbox-list a[href]:visited {
    color: #087C9E !important;
    font-weight: 700;
    text-decoration: none;
}

html body.skin-citizen .navbox.sekiun-navbox .navbox-list a[href]:hover {
    color: #00A7D8 !important;
    text-shadow: 0 0 9px rgba(65,212,245,.45);
}

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

/* ===== 09. 作品宣言 ===== */

/* 最后一行采用更醒目的蓝色 */

.sekiun-navbox .navbox-abovebelow:last-child,
html body.skin-citizen .navbox.sekiun-navbox .navbox-inner .navbox-abovebelow:last-child {
    background: linear-gradient(
        100deg,
        rgba(10,142,193,.87),
        rgba(72,202,235,.88),
        rgba(11,151,203,.87)
    ) !important;

    color: #FFFFFF !important;
    border-top: 2px solid rgba(255,255,255,.65) !important;
}

.sekiun-navbox .sekiun-quote {
    display: block;
    padding: 4px 6px;

    font-size: 1.03em;
    font-weight: 800;
    letter-spacing: .035em;
    line-height: 1.7;
    color: #FFFFFF;

    text-shadow:
        0 1px 4px rgba(0,65,102,.56),
        0 0 15px rgba(227,251,255,.44);
}

.sekiun-navbox .sekiun-quote-sub {
    display: block;
    margin-top: 3px;

    font-size: .76em;
    font-weight: 700;
    letter-spacing: .15em;
    color: #E0FAFF;
}

/* ===== 10. 深色模式 ===== */

html.skin-theme-clientpref-night body.skin-citizen .navbox.sekiun-navbox,
html.skin-theme-clientpref-black body.skin-citizen .navbox.sekiun-navbox {
    background: #12374D !important;
    border-color: #39ADD1 !important;
}

html.skin-theme-clientpref-night .sekiun-navbox .sekiun-sky::after,
html.skin-theme-clientpref-black .sekiun-navbox .sekiun-sky::after {
    background: linear-gradient(
        110deg,
        rgba(4,24,42,.63),
        rgba(6,49,75,.42),
        rgba(4,24,42,.63)
    );
}

html.skin-theme-clientpref-night .sekiun-navbox .sekiun-title-text,
html.skin-theme-clientpref-black .sekiun-navbox .sekiun-title-text {
    background: rgba(16,56,79,.90);
    color: #DDF9FF;
    border-color: rgba(137,223,248,.50);
    text-shadow: none;
}

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

html.skin-theme-clientpref-night body.skin-citizen .sekiun-navbox .navbox-inner .navbox-group,
html.skin-theme-clientpref-black body.skin-citizen .sekiun-navbox .navbox-inner .navbox-group {
    background: rgba(23,73,95,.84) !important;
    color: #DDF6FF !important;
}

html.skin-theme-clientpref-night body.skin-citizen .sekiun-navbox .navbox-inner .navbox-list,
html.skin-theme-clientpref-black body.skin-citizen .sekiun-navbox .navbox-inner .navbox-list {
    background: rgba(17,49,68,.78) !important;
    color: #DDF5FC !important;
}

html.skin-theme-clientpref-night .sekiun-navbox .sekiun-member,
html.skin-theme-clientpref-black .sekiun-navbox .sekiun-member {
    background: rgba(23,74,95,.91);
    border-color: #4A9FB8;
}

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

html.skin-theme-clientpref-night .sekiun-navbox .sekiun-role,
html.skin-theme-clientpref-black .sekiun-navbox .sekiun-role {
    color: #9CCBD8;
}

/* ===== 11. 手机端 ===== */

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

    .sekiun-navbox .sekiun-title-text {
        font-size: 1em;
        padding: 7px 9px;
        letter-spacing: 0;
    }

    .sekiun-navbox .sekiun-title-en {
        font-size: .55em;
        letter-spacing: .10em;
    }

    html body.skin-citizen .navbox.sekiun-navbox .navbox-group {
        padding: 8px !important;
    }

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

    .sekiun-navbox .sekiun-member {
        margin: 3px 2px;
        padding: 5px 7px;
    }

    .sekiun-navbox .sekiun-quote {
        font-size: .88em;
    }
}

/* ===== 12. 减少动画 ===== */

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