用户:ChenM0M/playground

页面模板:Playground styles.css没有内容。

RIA Wiki · Playground

Playground

探索 MediaWiki TemplateStyles 的边界——这里没有 JavaScript，只有纯 CSS 的可能性。每一个组件、每一种交互，都在证明"无脚本"并不等于"无能力"。

MediaWiki 1.39 · TemplateStyles · CSS-only · Zero JavaScript

手风琴 · 面板切换 · 悬浮特效 · 色彩画廊 · 进度条 · 排版系统 · 渐变卡片 · 时间线

数据概览

悬浮任意数字卡片查看交互效果。

15组件类型

6Hover 特效

12色彩方案

0行 JavaScript

手风琴 · FAQ（:target 交互）

点击问题标题展开答案，点击"↩ 收起"或其他问题折叠当前项。纯 CSS :target 实现。

▸ 为什么选择 CSS-only 方案？

       MediaWiki 的安全策略严格限制页面内 JavaScript 注入。TemplateStyles 只允许 CSS 属性白名单，因此我们利用 :target 伪类和锚点切换来实现折叠/展开等常见交互模式，既安全又可维护。
       ↩ 收起

▸ :target 伪类的工作原理是什么？

       当 URL 的 hash 片段（如 #pg-q2）与页面某元素的 id 匹配时，该元素即处于 :target 状态。我们通过 CSS 控制 max-height 和 opacity 来实现平滑的展开/折叠动画。
       ↩ 收起

▸ TemplateStyles 禁用了哪些属性？

       高风险或常被限制的属性包括：position: fixed/sticky、perspective、transform-style、backface-visibility、pointer-events、user-select 以及基于表单元素的 checkbox/radio hack 等。这些在 TemplateStyles 的白名单策略下可能被直接拦截。
       ↩ 收起

▸ hover 交互在移动端是否有效？

       移动端没有真正的 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

进度条 · Status Bar（CSS 动画）

纯 CSS 渐变填充条，悬浮时触发脉冲动画（@keyframes）。无 JavaScript，无 canvas。

布局能力 · Flexbox85%

色彩系统 · Gradient72%

静态交互 · :hover95%

状态切换 · :target58%

动画能力 · @keyframes40%

排版系统 · 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）实现移动端优雅降级，确保所有组件在窄屏下依然可用。