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