模板:在积雨云上空相遇/styles.css
来自Blockland Wiki
更多操作
/*
* 積乱雲の上で、出会う。
* 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;
}
}