用户:ChenM0M/playground：修订间差异
来自RIA | Wiki
更多操作
创建页面，内容为“__NOTOC__ __NOEDITSECTION__ <templatestyles src="playground_styles.css" /> <div class="pg-page"> <div id="pg-top"></div> <div class="pg-zone pg-zone-hero"> <div class="pg-hero"> <div class="pg-hero-kicker">RIA Wiki · Playground</div> <div class="pg-hero-title">Playground</div> <div class="pg-hero-sub">探索 MediaWiki TemplateStyles 的边界——这里没有 JavaScript，只有纯 CSS 的可能性。每一个组件、每一种交互，都在…” |
无编辑摘要 |
||
| 第2行： | 第2行： | ||
__NOEDITSECTION__ | __NOEDITSECTION__ | ||
<templatestyles src="playground_styles | <templatestyles src="playground_styles" /> | ||
<div class="pg-page"> | <div class="pg-page"> | ||
2026年2月14日 (六) 17:20的版本
数据概览
悬浮任意数字卡片查看交互效果。
15组件类型
6Hover 特效
12色彩方案
0行 JavaScript
手风琴 · FAQ（:target 交互）
点击问题标题展开答案，点击"↩ 收起"或其他问题折叠当前项。纯 CSS
:target 实现。 MediaWiki 的安全策略严格限制页面内 JavaScript 注入。TemplateStyles 只允许 CSS 属性白名单，因此我们利用 :target 伪类和锚点切换来实现折叠/展开等常见交互模式，既安全又可维护。
↩ 收起
当 URL 的 hash 片段（如#pg-q2）与页面某元素的id匹配时，该元素即处于:target状态。我们通过 CSS 控制max-height和opacity来实现平滑的展开/折叠动画。 ↩ 收起
高风险或常被限制的属性包括：position: fixed/sticky、perspective、transform-style、backface-visibility、pointer-events、user-select以及基于表单元素的 checkbox/radio hack 等。这些在 TemplateStyles 的白名单策略下可能被直接拦截。 ↩ 收起
移动端没有真正的 hover 事件，因此:hover效果主要服务于桌面端体验。移动端的交互应当依赖:target（锚点切换），或在信息层面确保在无 hover 状态下也可阅读完整内容。 ↩ 收起
面板切换 · Tabs（:target 交互）
点击标签切换内容面板，无需 JavaScript。利用
:target 控制面板显隐与 tab 高亮。布局系统
基于
display: flex 的响应式布局是 TemplateStyles 中最可靠的布局手段。通过 flex-wrap: wrap 与 min-width 配合，无需 Grid 也能实现灵活的多列排版。辅以 @media 断点，可以在移动端自动降级为单列。要点：flex-wrap min-width @media calc()
色彩策略
门户页的色彩应当克制——主色只用于强调标签、边框和标题色条。背景保持白/极浅灰，避免大面积彩色块。渐变色建议只在卡片、进度条等小面积元素上使用，不用于全屏背景。
要点：克制主色 浅底深字 边框色条 渐变限小面积
交互模式
MediaWiki 中只有两种安全的 CSS 交互手段：
:hover（微交互：背景、边框、阴影变化）和 :target（锚点切换：Tabs、FAQ 展开等）。将这两者组合使用，已经能覆盖绝大多数信息门户的交互需求。要点：:hover :target transition max-height 动画
Hover 微交互展示
六种不同的悬浮效果，仅使用
border、background、box-shadow 和 color 实现。将鼠标悬浮在卡片上查看效果。边框变色 border-color 过渡
背景渐变 background gradient
阴影浮起 box-shadow elevation
左色条 border-left accent
底部色条 border-bottom accent
色彩反转 dark inversion
引用块 · Callout
四种语义化引用块，适用于提示、成功、警告和危险信息。
ℹ️ 信息提示
TemplateStyles 允许在任何 wiki 页面内加载自定义 CSS，只需在页面头部引用
<templatestyles src="样式页名" /> 即可生效。✅ 操作成功
所有组件已通过 TemplateStyles 安全验证，可直接部署到 MediaWiki 1.39 站点。
⚠️ 注意事项
请勿使用
position: fixed、pointer-events 或 user-select——这些属性可能被站点白名单拦截。🚫 不可用
JavaScript 注入、表单标签（
<input>、<label>、<button>）以及 checkbox/radio hack 均被 MediaWiki 安全策略禁止。色彩画廊 · Swatch Grid
八组渐变色卡，悬浮时边框变色并呈现微透明效果。展示
linear-gradient 的视觉可能性。Violet#a29bfe → #6c5ce7
Azure#74b9ff → #0984e3
Mint#55efc4 → #00b894
Amber#ffeaa7 → #fdcb6e
Coral#fab1a0 → #e17055
Rose#fd79a8 → #e84393
Graphite#636e72 → #2d3436
Silver#dfe6e9 → #b2bec3
纯 CSS 渐变填充条，悬浮时触发脉冲动画（
@keyframes）。无 JavaScript，无 canvas。排版系统 · Typography
字号阶梯
巨型标题 2.4em
大标题 1.8em
区域标题 1.3em
正文段落：TemplateStyles 在 MediaWiki 1.39 中提供了一种安全的、页面级别的自定义样式加载方式。
辅助说明文字 0.88em — 用于注释、元信息、次要描述
最小文字 0.78em — 用于版本号、技术标注、脚注
标签系统 · Badges
Purple Blue Green Orange Pink Dark Default
色彩系统 · Color Palette
主色板
Violet
Azure
Mint
Amber
Coral
Rose
中性色板
Charcoal
Slate
Silver
Smoke
Snow
White
渐变色卡片 · Gradient Cards
六种预设渐变方案，悬浮时呈现阴影浮起效果。适合用于大面积色块、Hero 背景或强调区域。
Sunset 温暖的日落色调 135deg · #f093fb → #f5576c
Ocean 深海到浅海的过渡 135deg · #4facfe → #00f2fe
Forest 生机盎然的自然绿 135deg · #43e97b → #38f9d7
Night Sky 深邃的夜空蓝 135deg · #1e3c72 → #2a5298
Candy 甜蜜的糖果色 135deg · #fa709a → #fee140
Slate Teal 沉稳的深色专业感 135deg · #2c3e50 → #4ca1af
时间线 · Timeline
竖线时间线：左侧色条 + 圆点节点，悬浮时节点填色。展示
position: absolute 与 border 的组合运用。
Phase 1
基础组件
实现 Hero、Banner、Section Header、Muted 文字等基础原子组件。
Phase 2
交互层
加入 :hover 微交互（边框、阴影、背景渐变）与 :target 状态切换（Tabs、FAQ）。
Phase 3
色彩与排版
建立完整的色彩系统（6 主色 + 6 中性色）和排版阶梯（6 级字号）。
Phase 4
动画层
引入 @keyframes 脉冲动画和 transition 过渡，在 TemplateStyles 白名单内探索动效的极限。
Phase 5
响应式适配
通过 @media 断点（720px / 480px）实现移动端优雅降级，确保所有组件在窄屏下依然可用。