SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场tinyworld-block-button-style

tinyworld-block-button-style

设计与创作

查看项目

更新于 10-30 12:08

技能介绍

用途

tinyworld-block-button-style 是 Tiny World Builder 项目内锁定的“方块”按钮视觉风格规范，用于任何工具/方块按钮、调色板图块、图标芯片或新的可点击正方形元素。该风格由项目所有者确认作为统一风格，新图标方块/图块应直接复用。

主要能力与视觉构成

该风格由三部分组成：

  1. 描边方形：1.5px 边框，颜色为图块分类色的加深版本；内侧一条白色细线；带轻微凸起效果。
  2. 描边图标：白色图标主体加同色系深色描边，使用 paint-order: stroke 与 vector-effect: non-scaling-stroke，使同一 stroke-width 在不同 viewBox（24、512 等）中看起来一致。
  3. 分类色：深色描边取自分类色调暗后的颜色，方形保留淡淡的半透明分类背景。

分类调色板

  • terrain：背景 rgba(123,194,48,0.16)，深色描边 #3a6511
  • primary：背景 rgba(23,107,235,0.13)，深色描边 #1e428a
  • tertiary：背景 rgba(254,146,14,0.18)，深色描边 #a05600
  • shield：背景 rgba(45,215,255,0.15)，深色描边 #0e5f7e
  • neutral：无背景，默认 --glyph-outline: #2f3b57

深色描边约为分类色调暗 50–60% 后的颜色。新分类应选择相同色相、相近亮度的颜色。

使用方式

样式规则位于 styles/tiny-world.css。图标规则示例：

.tool .tool-glyph { color: #fff; --glyph-outline: #2f3b57; }
.tool .tool-glyph svg { fill: currentColor; overflow: visible; }
.tool .tool-glyph svg * {
  fill: currentColor;
  stroke: var(--glyph-outline);
  stroke-width: 2.1;
  vector-effect: non-scaling-stroke;
  paint-order: stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}

凸起描边方形规则示例（按 posType 重复同一模式，同样适用于 .tool.flyout-tool[data-pos-type]）：

.tool[data-pos-type="primary"] {
  border: 1.5px solid #1e428a;
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,0.92),
    inset 0 -3px 0 rgba(30,66,138,0.22),
    0 2px 3px -1px rgba(20,30,50,0.22);
}

给新按钮/图块添加 data-pos-type（terrain/primary/tertiary 等），现有规则会自动为其上色。19-tools-toolbar.js 中的 posTypeForTool() 负责把工具映射到 posType。图标应通过 buildToolButton(tool, { flyout: true }) 构建，以复用 .tool-glyph / .tool-icon 机制和描边规则。

适用范围与细节

  • 底部工具栏按钮都须带稳定的 data-pos-type：Select 用 primary，Erase 用 neutral，未激活的分组按钮使用 posTypeForToolGroup(group)。
  • 统一方块按钮的 CSS 块应放在通用 flyout 尺寸规则之后。
  • 选择径向按钮保持圆形，但同样遵循分类约定；通过 .radial-btn[data-pos-type] 设置样式，并为径向标签/图标使用不透明 --radial-bg 上的高对比 --radial-ink，避免 3D 场景透出导致文字不可读。
  • 应用栏图标按钮、语言选择触发器和左侧边栏控件也使用分类外观，通过 .appbar .btn.icon[data-pos-type]、.controls .btn.icon[data-pos-type]、.language-trigger[data-pos-type] 设置。
  • 顶部居中的 .world-pill[data-pos-type="primary"] 保留主蓝色描边，但静止填充为亮白玻璃色 rgba(255,255,255,0.82)；其悬停状态必须保持 transform: translateX(-50%)。
  • .token-corner 为纯文本，不加 data-pos-type、边框、背景模糊或悬停变换；仅其中嵌套的 GitHub 链接按钮使用方块按钮外观。
  • 底部工具栏工具按钮使用 buildToolbarUtilityButton(...) 和相同的仅图标方块。Home 与 Shield 作为相邻工具按钮放在底部工具栏前端；Shield 使用 data-pos-type="shield"，并通过 .active 与 aria-pressed 反映 VoxelShield 状态。
  • 激活/按下状态须覆盖深色/夜间主题规则：保留分类描边色、使用浅色凸起填充、可见的 2px 外环和底部短强调条；需在通用选中样式之后添加匹配的 body.ui-theme-dark 选中选择器。
  • 若组件硬编码了按钮背景、颜色、边框或局部分类变量，需在浅色规则后补充组件作用域的 body.ui-theme-dark ... 规则。
  • 单色/工具图标（select、erase）使用 .tool-icon，渲染为 fill:none; stroke:currentColor 线稿，不要填充。
  • 方块按钮不要改回实心填充（fill:currentColor; stroke:none）的旧外观。

注意事项

  • vector-effect / paint-order 必须放在路径/形状元素（svg *）上，放在 <svg> 上不会继承。
  • 全局 [data-tooltip]{position:relative} 规则在相同特异性下可能覆盖定位；若样式按钮定位异常，可提高选择器特异性。
  • 应在真实浏览器中验证，而非合成事件：采样渲染后的像素进行检查。