Template:展示卡片/styles.css：修订间差异
模板页面
更多操作
DoubleCircle（留言 | 贡献） "新增展示卡片模板与样式，首页子模板统一使用" |
DoubleCircle（留言 | 贡献） 小 "移除展示卡片「跟随系统」暗色块" |
||
| （未显示同一用户的1个中间版本） | |||
| 第1行： | 第1行： | ||
/* ===== 展示卡片（Template:展示卡片/styles.css）===== */ | /* ========================================================================== | ||
展示卡片（Template:展示卡片/styles.css） | |||
========================================================================== | |||
配色与 MediaWiki:Common.css 全局变量保持一致： | |||
- 所有颜色通过 var(--xxx, 浅色回退) 引用 common.css 定义的变量， | |||
站点调色后本模板自动同步； | |||
- 暗色模式自动生效：common.css 会根据站内偏好（<html> 上的 | |||
skin-theme-clientpref-night / skin-theme-clientpref-os 类）重定义这些变量， | |||
本模板颜色无需额外覆盖；仅投影在此按 common.css 的暗色阴影显式适配。 | |||
========================================================================== */ | |||
.display-card { | .display-card { | ||
position: relative; | position: relative; | ||
| 第6行： | 第15行： | ||
margin: 5px; | margin: 5px; | ||
padding: 12px 14px; | padding: 12px 14px; | ||
border: 1px solid #D4E8C0; | border: 1px solid var(--color-primary-light, #D4E8C0); | ||
border-radius: 8px; | border-radius: 8px; | ||
background: linear-gradient(180deg, #F9FCF4, #F1F8E6); | background: linear-gradient(180deg, var(--color-theme-soft, #F9FCF4), var(--color-theme, #F1F8E6)); | ||
box-shadow: 0 1px 3px rgba(143, 188, 143, .25); | box-shadow: 0 1px 3px rgba(143, 188, 143, .25); | ||
transition: box-shadow .2s ease, transform .2s ease; | transition: box-shadow .2s ease, transform .2s ease; | ||
| 第22行： | 第31行： | ||
height: 4px; | height: 4px; | ||
border-radius: 8px 8px 0 0; | border-radius: 8px 8px 0 0; | ||
background: linear-gradient(90deg, #8FBC8F, #DCEFDC); | background: linear-gradient(90deg, var(--color-primary, #8FBC8F), var(--color-primary-lite, #DCEFDC)); | ||
} | } | ||
| 第34行： | 第43行： | ||
margin-bottom: 6px; | margin-bottom: 6px; | ||
padding-bottom: 4px; | padding-bottom: 4px; | ||
border-bottom: 1px solid #8FBC8F; | border-bottom: 1px solid var(--color-primary, #8FBC8F); | ||
font-size: 1.1em; | font-size: 1.1em; | ||
font-weight: bold; | font-weight: bold; | ||
color: #2E6B45; | color: var(--color-primary-deep, #2E6B45); | ||
} | } | ||
| 第43行： | 第52行： | ||
content: "◆"; | content: "◆"; | ||
margin-right: 6px; | margin-right: 6px; | ||
color: #8FBC8F; | color: var(--color-primary, #8FBC8F); | ||
font-size: .75em; | font-size: .75em; | ||
} | } | ||
.display-card-body { | .display-card-body { | ||
color: # | color: var(--color-text, #333333); | ||
font-size: .95em; | font-size: .95em; | ||
line-height: 1.6; | line-height: 1.6; | ||
| 第71行： | 第80行： | ||
/* 强调样式 */ | /* 强调样式 */ | ||
.display-card-accent { | .display-card-accent { | ||
background: linear-gradient(180deg, #FFF8EF, #FDF2E3); | background: linear-gradient(180deg, var(--color-accent-bg, #FFF8EF), var(--color-accent-bg-soft, #FDF2E3)); | ||
border-color | border: 1px solid var(--color-accent-border, #E8CFA8); | ||
} | } | ||
.display-card-accent::before { | .display-card-accent::before { | ||
background: linear-gradient(90deg, #E8B96A, #F3D9AE); | background: linear-gradient(90deg, var(--color-accent, #E8B96A), var(--color-accent-light, #F3D9AE)); | ||
} | } | ||
.display-card-accent .display-card-head { | .display-card-accent .display-card-head { | ||
border-bottom-color: #E8B96A; | border-bottom-color: var(--color-accent, #E8B96A); | ||
color: #8A5A1E; | color: var(--color-accent-deep, #8A5A1E); | ||
} | |||
/* ========================================================================== | |||
暗色模式投影（颜色由 common.css 变量自动适配，此处仅覆盖投影） | |||
与 common.css 暗色 --shadow-card / --shadow-card-hover 一致 | |||
========================================================================== */ | |||
@media screen { | |||
/* 用户明确选择「深色」 */ | |||
html.skin-theme-clientpref-night .display-card { | |||
box-shadow: 0 1px 3px rgba(0, 0, 0, .4); | |||
} | |||
html.skin-theme-clientpref-night .display-card:hover { | |||
box-shadow: 0 4px 14px rgba(0, 0, 0, .55); | |||
} | |||
} | } | ||