按钮
Hexagon-bordered button with golden glow radiation hover effect
- 基础骨架
font-serif font-semibold tracking-wide border border-[#fbbf24]/30 rounded-sm transition-all duration-500 ease-in-out- 变体
- 主要、次要、金色、符文
- 状态
- hover、active、disabled
魔法阵风组件配方
font-serif font-semibold tracking-wide border border-[#fbbf24]/30 rounded-sm transition-all duration-500 ease-in-out bg-[#1e1b4b] text-[#fbbf24] shadow-[0_0_20px_rgba(251,191,36,0.2)] hover:shadow-[0_0_35px_rgba(251,191,36,0.5)] hover:border-[#fbbf24]/60 active:scale-95卡片
Arcane card with concentric ring border decorations and runic edge marks
- 基础骨架
relative bg-[#0a0920] border border-[#fbbf24]/15 rounded-sm transition-all duration-500 ease-in-out- 变体
- 默认、金色辉光、靛蓝辉光、神圣几何
- 状态
- hover
输入框
Geometric frame input with golden glow focus and runic aesthetics
- 基础骨架
w-full rounded-sm border border-[#fbbf24]/15 bg-[#0a0920] text-[#e2e8f0] placeholder:text-[#e2e8f0]/25 font-sans focus:outline-none transition-all duration-500 ease-in-out- 变体
- 默认、金色、靛蓝
- 状态
- focus、disabled
符文徽记
Circular glyph badge with golden border and mystical feel
- 基础骨架
inline-flex items-center justify-center rounded-full bg-[#0a0920] border-2 font-serif outline outline-2 outline-offset-4 outline-[#fbbf24]/20 shadow-[0_0_15px_rgba(251,191,36,0.15),inset_0_0_10px_rgba(251,191,36,0.1)]- 变体
- 金色、银色、靛蓝
- 状态
- 静态
召唤面板
Panel with concentric circle border decoration
- 基础骨架
relative bg-[#0a0920] border border-[#fbbf24]/15 rounded-sm overflow-hidden transition-all duration-500 ease-in-out bg-[radial-gradient(circle_at_50%_50%,rgba(251,191,36,0.04)_0%,transparent_50%)] outline outline-1 outline-offset-4 outline-[#fbbf24]/10- 变体
- 默认、金色、空灵
- 状态
- hover
魔法书标签
Tab button with arcane styling
- 基础骨架
px-4 py-2 font-serif text-sm border-2 border-transparent transition-all duration-300 text-[#e2e8f0]/60- 变体
- 激活、未激活、锁定
- 状态
- hover
魔力条
Magical energy bar with gradient fill and glow
- 基础骨架
relative h-5 bg-[#0a0920] border border-[#fbbf24]/20 rounded-sm overflow-hidden outline outline-1 outline-offset-2 outline-[#fbbf24]/15 shadow-[0_0_8px_rgba(251,191,36,0.1)]- 变体
- 魔力、生命、耐力
- 状态
- 静态
附魔提示
Alert box with mystical border and glow effects
- 基础骨架
relative bg-[#0a0920] border-2 border-[#fbbf24]/30 rounded-sm p-4 font-serif text-sm shadow-[-6px_0_0_-2px_rgba(251,191,36,0.15)] bg-[radial-gradient(circle_at_0%_50%,rgba(251,191,36,0.04)_0%,transparent_50%)]- 变体
- 祝福、诅咒、中性
- 状态
- 静态