# limitless 网站样式设计风格说明

[TOC]

## 总体印象

limitless 主站是一套 **浅灰底 + 白色圆角卡片 + 近黑色细边框 + 柔和阴影** 的"纸质卡片"风格站点，整体克制、干净，交互上大量使用 **hover 黑白翻转**（使用`#1e1e1e` ↔ `#efefef`）而非彩色高亮，或者纯白纯黑。

主站视觉语言的核心可用一句话概括：**「浅灰纸面 `#efefef` 上悬浮白色卡片，近黑描边 + 柔影，蓝色点缀，黑白翻转反馈」**。

## 主站主题设计规范

我们是魔改fox009-wisdom主题的。整体界面风格类似于知乎，颜色是自己的主题色（`#efefef`和`#1e1e1e`）。

### 色板

- **页面背景**：`#efefef`（浅灰）
- **卡片背景**：`#ffffff`
- **边框主色**：`#1e1e1e`（近黑，卡片描边、分隔线）
- **次级边框**：`#cccccc`（输入框、控件）
- **主色**：`#0066ff`（唯一强调色，链接 hover / 按钮 / 分页当前页）
- **浅色辅助**：`#efefef`（代码块、meta 标签底）、`#fff9c0`（mark 高亮）
- **hover 翻转对**：`#1e1e1e`（底）↔ `#efefef`（前景文字）

反正一句话：#ccc作为边框，#efefef和#fff交替使用（背景一般是#efefef，然后逐个嵌套，比如背景#efefef，卡片#fff，卡片内的代码块，按钮就又是#efefef了），需要作为强调使用的黑色是#1e1e1e（比如希望高亮的按钮，则底色是这个，字换为#efefef）。总之主要就是#fff，#efefef和#1e1e1e三个颜色作为主体。文字为#1e1e1e背景#efefef或者反之（强调的时候之类的）。一般开发的时候会给模板（html和style），参考着来就行。

### 字体

```css
font-family: -apple-system, "PingFang SC", BlinkMacSystemFont, "Segoe UI",
             Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
```

- 正文：`1rem`，行高 `1.5`；段落 `line-height: 1.8`
- 标题 h1~h6：`1.714rem → 1rem` 递降，加粗
- 代码：`monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace`
- 英文花体：Tangerine（Google Fonts，装饰用）
- 图标：Font Awesome 4.7.0
- 比较正式的地方：可以用times new roman

### 间距与版式

- 容器 `.container`：`max-width: 1240px` 居中，左右 `padding 20px`
- 主栏 70% / 侧边栏 30% 两栏布局（可左右切换），1024px 以上生效
- 卡片间距：`margin-bottom: 20px`
- 卡片内边距：`.padding20` → `padding: 20px`

一般是这个要求，当然有可能有例外。反正如果是单独页面，作为白色卡片悬浮在#efefef背景的这个容器的话，宽度一般就是1280px, 768px, 512px中的某一个。取决于开发者今天的心情或者页面内容的长度之类的。

### 组件规范

一般如下表所述，除非开发者强调说明了，否则都默认用这个。

| 组件 | 规范 |
|---|---|
| **卡片容器**（文章、侧栏 widget、分页、评论块、归档头） | 白底 `#fff`、`border-radius: 10px`、`border: 1px solid #1e1e1e`、`box-shadow: 0 0px 4px rgb(18 18 18 / 15%)`、`margin-bottom: 20px` |
| **按钮**（`button`、`a.button`、submit） | 主色蓝底白字、圆角 `4px`、`text-transform: uppercase`、字距 `0.1em`；hover/active 翻转为白底主色字 |
| **输入框**（text/email/password/textarea 等） | `border: 1px solid #ccc`、`border-radius: 10px`、`padding: 10px`、`background: #efefef`；focus 时文字变 `#333` |
| **链接** | 默认 `#404040` 无下划线；hover/focus/active 变主色 `#0066ff`，过渡 `all .3s ease-in-out` |
| **meta 标签**（`.meta-span`） | 主色字、`#efefef` 底、圆角 `0.35rem`、`1px solid #ccc` 边框 |
| **代码块 `pre`** | `#efefef` 底、`1px solid #ccc` 边框、圆角 `10px`；行内 `code` 圆角 `4px`；悬停显示"复制"按钮 |
| **引用 `blockquote`** | 左侧 `4px solid #1e1e1e` 竖线 |
| **表格** | 通栏，`border-collapse`，表头/表脚 `#1e1e1e` 边框 |
| **标签云（tagcloud）** | 胶囊形：圆角 `1rem`、`1px solid #999`、hover 变主色蓝底白字 |
| **分页** | 白底、`1px solid #ccc`、圆角 `4px`、当前页主色蓝底白字 |
| **文章摘要** | 多行截断（`-webkit-line-clamp`，默认 5 行）+ "Read More" 主色链接 |
| **摘要缩略图** | hover 时 `scale3d(1.1,1.1,1)` 放大 + 透明度 `.75`，过渡 1s |
| **卡片链接 `.card-link`**（主题自定义） | 居中、宽 60%、白/`#efefef` 底、圆角 10px、`1px solid #ccc` 边框、加粗；hover 翻转为 `#1e1e1e` 底 `#efefef` 字 |

### 顶栏（Header）

- 固定顶部，高 **40px**，白底，下边框 `1px solid #1e1e1e`，浅阴影
- 左侧站点名（主色蓝 + 发光 `text-shadow`）→ 主菜单（大写、字距，hover 变深）→ 搜索框（`#efefef` 底圆角，右侧主色蓝放大镜按钮）→ 社交图标（FontAwesome 字符图标）
- 移动端（≤782px）菜单为左侧滑出抽屉（白底、阴影、占宽 70%）
- 一般独立页面不需要顶栏

### 页脚（Footer）

- **固定底部**（`position: fixed; bottom: 0`，白底，上边框 `1px solid #1e1e1e`，浅阴影）
- 版权行：`limitless © 2021~2026`、ICP 备案、公安备案、**实时显示访客 IP**，文字 `#888`
- 移动端（≤600px）改为文档流内（`position: relative`）

注意：一般独立页面的底栏是：

```html
  <footer style="text-align: center; margin-top: 0; padding: 12px 0; font-size: 0.78rem;">
    <p><a href="/" style="color: #888; text-decoration: none !important" target="_self" rel="nofollow">limitless © Copyright 2021~2026 All right reserved</a></p>
  </footer>
```

一般是放到`</body>`之前，#efefef背景颜色的上方，往往无需特殊设置（因为本来背景就应该是这个色）。也就是放到body容器的最后一行。

一些特殊的网页这么放会有问题，因此会做改动。除非特殊说明不然一般都是这样的。

### 右侧浮动按钮组

固定于右下角，四个 40×40 方块按钮，样式统一：白底、`1px solid #1e1e1e` 边框、圆角 `4px`、阴影 `0 0px 8px rgb(18 18 18 / 30%)`、FontAwesome 图标；hover 翻转为黑底灰字。自上而下：

1. `.toggle-background`（背景显隐，暂禁用）
2. `.set_bk_anime`（水彩背景参数面板）
3. `.share`（分享当前页）
4. `.skip-to-top`（回顶）

这个是博客网页的，一般独立页面不需要，如果你认为设置个按钮比较合适放到窗口的侧边，那么可以参考。

### 动态背景（标志性元素）

- 全屏 `<canvas id="glcanvas">` 固定在页面底层（`z-index: -1`）
- WebGL 实时渲染 **"印象派水彩"**：分形布朗运动 + 柏林噪声，按等高线配色调性、随机湿润模糊、叠加纸张颗粒纹理
- 参数面板（`.bkani-controls`）为半透明毛玻璃：`rgba(239,239,239,0.6)` + `backdrop-filter: blur(8px)`，可调帧率/色块密度/色彩占比/湿润度/演化速度/颗粒度/配色方案
- 默认配色为牛奶白、灰、米黄、青灰、青白、高级灰、深米黄的低饱和自然色系

只有博客网页使用这个背景，独立页面一般不使用。

### 内容增强

- **MathJax**（`tex-chtml`）支持数学公式
- **Mermaid** 图表渲染（`.mermaid` 居中显示）
- **自动目录** `.auto-toc`：侧栏可折叠目录，`#efefef`/`#1e1e1e` 双色系，圆角 6~7px，hover 黑白翻转
- 分类导航 `.wp-block-categories-list`：50% 宽网格方块，hover 黑底翻转
- 404 页：图片 + 搜索框

只有博客网页使用这个，独立页面一般不使用。（也就是说除非专门引入，否则独立页面不支持mathjax公式和mermaid图。自动目录也不支持但是一般无需）

如果独立页面需要引入公式支持，那么在html页面的`<head>`插入：

```html
<script src="/mathjax/tex-chtml.js" id="MathJax-script" async></script>
```

插入这么一行即可，我们的网站已经部署了源代码。

内容上，在段落内的以下匹配上的内容会被自动渲染，无需额外容器。

```text
行内公式, 使用      \(  ....     \)     包裹你的公式.
行间公式, 使用      \[  ....     \]     包裹你的公式, 
当然也可以用        $$  ....     $$     创建行间公式.

注意, 单个美元符号是不被允许的, 例如   $  ...  $  是无效的!
```

独立页面通常无需添加mermaid图。我都忘了怎么加了，需要加了再想办法。反正我的网站是支持mermaid的，但是我忘了当时是怎么支持的了。本地的js在`/wp-content/themes/fox009-wisdom/assets/js/mermaid.min.js`，好像还得引入个什么代码启动下，然后插入`<div class="mermaid">`包裹的mermaid代码即可。

## wyb/ 子工具页面风格分类

依据与主站主题的一致性，`wyb/` 下页面分为三类。

### 同源风格（与主站一致，仅缺小元素）

**统一特征**（即主站核心视觉语言的"独立页面版"）：

- 页面背景 `#efefef`，文字 `#1e1e1e`
- 白色卡片容器 `.container13009`：`border-radius: 10px`、`border: 1px solid #1e1e1e`、`box-shadow: 0 0px 4px rgb(18 18 18 / 15%)`（宽度 1024px 或 512px 居中）
- 卡片链接 `.card-link`：`#efefef` 底、圆角 10px、`1px solid #ccc` 边框，**hover 黑白翻转** `#1e1e1e`/`#efefef`，`transition 0.3s`
- 变体按钮 `.btn-green`（`#c8e6c9`/`#a5d6a7`）、`.btn-yellow`（`#fff9c4`/`#dfc900`），hover 同样翻转为黑底
- 表格 `th/td`：`1px solid #ccc`、圆角 10px；表头 `#ccc` 底；`tr` `#efefef` 底、hover `#ccc`（过渡 0.5s）
- 页脚版权行、返回主站/上一页链接

**与主站的两处小差异**：

1. 均未使用主色，为纯灰/近黑单色系，个别页面用同族蓝 `#2563eb`
2. 均未显式声明中文字体栈，走浏览器默认无衬线

**页面清单**：`binary_progress_bar`、`location_test`、`speedtest`、`pi`、`goout_check_list`、`lissajous`、`mouse_flash_test`、`orbit_simulation`、`wp_publisher`、`cursor13009`、`server_check_list.html`、`wyb/index.php`（导航页，系本类模板源头，含移动端响应式适配）。

> 其中 `peisujisuanqi`（配速计算器）也完全遵循主站卡片规范，且显式声明中文字体栈、使用同族蓝色 `#2563eb`，是全套最贴近主站的一页，可视为"标准范例"。

新开发页面的时候可以参考之前的页面的实现，去看看代码之类的是比较推荐的。

### 部分不一致

比如：

**`wyb/random_backimg`**（印象派水彩工具，主站动态背景的独立版）

- 背景 `#efefef` 被全屏 WebGL 水彩画面覆盖
- 控制面板为毛玻璃：`rgba(239,239,239,0.6)` + `backdrop-filter: blur(8px)`、圆角 8px
- 按钮为深灰 `#555` 底白字，hover `#333`（非主站翻转/蓝色）
- 字体 `'Segoe UI', Tahoma, Geneva, Verdana, sans-serif`

这个毛玻璃效果的卡片其实一些地方适合替换默认的白色圆角卡片。尤其是设置页面这种点击后会弹出的卡片，特别适合使用这种毛玻璃风格。可以必要的时候看看相关代码。

### 独立风格

| 页面 | 实际风格 |
|---|---|
| `wyb/Kerr_hole` | **深色科技风**：背景 `#1e1e1e`、Plotly 3D 交互图表（无白色圆角卡片、无主站按钮体系），配套 MathJax |
| `wyb/kongtiaoxingnengjisuan` | **深色荧光绿科技风**：背景 `#0b0d10`/面板 `#141a1f`、主色荧光绿 `#00ff9d`、等宽字体 `Courier New`、面板无圆角、顶部绿色渐变条、输入框聚焦绿色光环 |
| `wyb/DysonSphereProgramTool` | **工业游戏工具风**：白底、`#d3d3d3` 虚线边框、无圆角卡片、深蓝灰配色（`#4A5C72` 等）、表格布局，基于 Vue 2 + jQuery |
| `wyb/random-password-generator` | **Materialize/UIkit 风**：`aliceblue` 背景、`groove black` 沟槽边框、偏硬阴影 `0 4px 6px #999`、亮蓝 `#3bb6ff` 按钮 hover 变紫 `#999fff` |
| `wyb/test/index.php` | **零样式**调试页，浏览器默认渲染 |
| `wyb/uestc-access-authority/index.html` | **零样式**，浏览器默认渲染（同目录下另存页为第三方成电小程序页面，非本站风格） |

这些一般就不作为参考了，除非明确要求，可能需要过去看看代码看看。

## 写给开发者的快速参考

> 若需为 `wyb/` 新增工具页面并保持主站风格，请直接复用以下"最小模板"：

```html
<style>
  body { background: #efefef; margin: 0; padding: 20px;
         font-family: -apple-system, "PingFang SC", "Segoe UI", Roboto, sans-serif; }
  .container13009 {
    max-width: 1024px; margin: 0 auto; padding: 20px;
    background: #fff; border: 1px solid #1e1e1e;
    border-radius: 10px; box-shadow: 0 0px 4px rgb(18 18 18 / 15%);
  }
  .card-link {
    display: inline-block; border-radius: 10px; border: 1px solid #ccc;
    background: #efefef; color: #1e1e1e; padding: 8px 20px;
    text-decoration: none !important; transition: background-color 0.3s;
  }
  .card-link:hover { background: #1e1e1e; color: #efefef; }
  /* 可选主色强调 #0066ff */
</style>
```

**关键约定速查**：

- 卡片四要素 = 白底 `#fff` + 圆角 `10px` + 边框 `1px solid #1e1e1e` + 阴影 `0 0px 4px rgb(18 18 18 / 15%)`
- 背景一般是 `#efefef`，当容器嵌套时，可能和白色交替。
- 主色蓝 `#0066ff` 仅作点缀（按钮、链接 hover、当前页），不铺大面积
- hover 反馈偏好**黑白翻转**（`#1e1e1e` ↔ `#efefef`），`transition 0.3s`
- 中文字体栈优先 `-apple-system, "PingFang SC", "Segoe UI", Roboto, sans-serif`
- 次级控件（输入框、标签）用 `#ccc` 边框；代码块 `#efefef` 底