webc.site 0.1.24 → 0.1.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/-oloHJiPWtJPJs8g_0WIaA.svg +1 -0
- package/README.md +56 -54
- package/Scroll.css +2 -2
- package/Scroll.css.map +1 -0
- package/Scroll.js +87 -1
- package/Scroll.js.map +1 -0
- package/Wait.css +2 -2
- package/Wait.css.map +1 -0
- package/_Scroll.css +2 -0
- package/_Scroll.css.map +1 -0
- package/_Wait.css +2 -0
- package/_Wait.css.map +1 -0
- package/giUzPhnYmbjOG3VzqseH5g.svg +1 -0
- package/package.json +1 -1
- package/reset.css +2 -1
- package/reset.css.map +1 -0
- package/sgoOOaKyF_KnkUoRKxWczw.svg +1 -0
- package/yhI9x3s8u28j5vUN45useQ.svg +1 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" preserveAspectRatio="xMidYMid" style="shape-rendering:geometricPrecision" viewBox="0 0 100 100"><circle cx="50" cy="50" r="0" fill="none" stroke="#000" stroke-width="2"><animate attributeName="r" begin="0s" calcMode="spline" dur="1s" keySplines="0 0.2 0.8 1" keyTimes="0;1" repeatCount="indefinite" values="0;40"/><animate attributeName="opacity" begin="0s" calcMode="spline" dur="1s" keySplines="0.2 0 0.8 1" keyTimes="0;1" repeatCount="indefinite" values="1;0"/></circle><circle cx="50" cy="50" r="0" fill="none" stroke="#333" stroke-width="2"><animate attributeName="r" begin="-0.5s" calcMode="spline" dur="1s" keySplines="0 0.2 0.8 1" keyTimes="0;1" repeatCount="indefinite" values="0;40"/><animate attributeName="opacity" begin="-0.5s" calcMode="spline" dur="3s" keySplines="0.2 0 0.8 1" keyTimes="0;1" repeatCount="indefinite" values="1;0"/></circle></svg>
|
package/README.md
CHANGED
|
@@ -1,26 +1,27 @@
|
|
|
1
|
-
#
|
|
1
|
+
# WebC
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
面向 AI 辅助开发设计的 Web Components 组件库与开发规范。
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[组件库在线预览](https://webc-zh.github.io)
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
## 特性
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
- **跨框架**：基于原生 Web Components 构建，兼容 React、Vue、Svelte、Solid 等前端框架。
|
|
10
|
+
- **无样式**：逻辑与样式解耦，支持仅引入逻辑以自定义样式。
|
|
11
|
+
- **免构建与构建双模式**：
|
|
12
|
+
- **免构建（CDN 模式）**：在浏览器中直接通过 CDN 引用 JS 与 CSS 文件。
|
|
13
|
+
- **构建模式（本地命令行）**：提供本地命令行工具，按需将组件源码集成至项目。
|
|
14
|
+
- **在线调试**：提供组件预览与“在线调试”入口，支持直接调试免构建组件。
|
|
10
15
|
|
|
11
|
-
|
|
16
|
+
## 快速上手
|
|
12
17
|
|
|
13
|
-
|
|
18
|
+
### 1. CDN 引入（免构建模式）
|
|
14
19
|
|
|
15
|
-
|
|
20
|
+
在免构建场景下，可通过 CDN 直接在浏览器中引用 JS 与 CSS 文件。
|
|
16
21
|
|
|
17
|
-
|
|
22
|
+
以 `Scroll`（虚拟滚动条）组件为例：
|
|
18
23
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
以 `Scroll` 组件（虚拟滚动条）为例：
|
|
22
|
-
|
|
23
|
-
#### 使用 jsdelivr:
|
|
24
|
+
#### 使用 jsdelivr
|
|
24
25
|
|
|
25
26
|
```html
|
|
26
27
|
<link href="//cdn.jsdelivr.net/npm/webc.site@0.1.23/Scroll.css" rel="stylesheet" />
|
|
@@ -29,7 +30,7 @@
|
|
|
29
30
|
</script>
|
|
30
31
|
```
|
|
31
32
|
|
|
32
|
-
#### 使用
|
|
33
|
+
#### 使用 npmmirror（中国大陆镜像源）
|
|
33
34
|
|
|
34
35
|
```html
|
|
35
36
|
<link href="//registry.npmmirror.com/webc.site/0.1.23/files/Scroll.css" rel="stylesheet" />
|
|
@@ -38,70 +39,71 @@
|
|
|
38
39
|
</script>
|
|
39
40
|
```
|
|
40
41
|
|
|
41
|
-
|
|
42
|
+
> [!TIP]
|
|
43
|
+
> **自定义 CSS 变量（重写样式与替换背景资源）**
|
|
44
|
+
> 如需重写默认样式，可引用前缀为 `_` 的样式文件（该文件不包含 `var.css` 声明）：
|
|
45
|
+
>
|
|
46
|
+
> ```html
|
|
47
|
+
> <link href="//cdn.jsdelivr.net/npm/webc.site@0.1.23/_Scroll.css" rel="stylesheet" />
|
|
48
|
+
> ```
|
|
49
|
+
|
|
50
|
+
### 2. 构建模式
|
|
42
51
|
|
|
43
|
-
|
|
52
|
+
构建模式与免构建（CDN）模式特性对比：
|
|
44
53
|
|
|
45
|
-
|
|
54
|
+
- **免构建（CDN 模式）**：适用于无需开发环境配置、直接引用的轻量化场景。
|
|
55
|
+
- **构建模式**：支持摇树优化与按需引入以减少构建体积，并支持静态资源优化（如 SVG 资源内联与去重）。
|
|
56
|
+
|
|
57
|
+
在构建项目中，可运行以下命令将组件源码引入本地：
|
|
46
58
|
|
|
47
59
|
```bash
|
|
48
60
|
bunx webc.add <组件名>
|
|
49
61
|
```
|
|
50
62
|
|
|
51
|
-
例如添加 `Scroll
|
|
63
|
+
例如添加 `Scroll`（虚拟滚动条）组件：
|
|
52
64
|
|
|
53
65
|
```bash
|
|
54
66
|
bunx webc.add Scroll
|
|
55
67
|
```
|
|
56
68
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
- 运行该命令时，它会向 npm 注册表查询并解析 `webc.com` 对应的包源。
|
|
60
|
-
- 自动下载包源文件并提取对应的组件源码，将其按需编译并输出到本地项目中对应的 `lib/组件名` 目录下，且会把组件相关的 Stylus 自动编译成 CSS 放入公共样式中。
|
|
61
|
-
|
|
62
|
-
---
|
|
63
|
-
|
|
64
|
-
### 3. 配合 `vite-plugin-svg-var` 优化 SVG 资源
|
|
65
|
-
|
|
66
|
-
为了优化打包体积并大幅减少网络请求，建议在 Vite 构建器中配合使用 [vite-plugin-svg-var](https://www.npmjs.com/package/vite-plugin-svg-var) 插件。
|
|
67
|
-
|
|
68
|
-
#### 插件的用途与核心特性：
|
|
69
|
-
|
|
70
|
-
- **智能去重**：自动对 `public/svg` 下的所有 SVG 内容进行 MD5 哈希计算。即使不同路径或文件名对应同一个 SVG 内容，也只会在 CSS 中生成单一变量，所有引用都将映射到该变量，避免冗余打包。
|
|
71
|
-
- **UTF-8 安全编码**：将 SVG 直接转换为更轻量、体积更小的 UTF-8 编码 `data:image/svg+xml` URL 写入 CSS 变量，比传统的 Base64 编码方式体积更小、压缩率更高。
|
|
72
|
-
- **自动注入与替换**：在构建或运行开发服务器时，它会自动在项目入口 JS（如匹配 `/page/entry/**/*.js`）中注入虚拟的 CSS 变量样式，并将 CSS/Stylus/Svelte 中原本引用的 `url("/svg/xxx.svg")` 自动替换为 CSS 变量形式（如 `var(--xxxSvg)`）。这意味着所有 SVG 将被直接内联合并在 CSS 中，页面加载时无需发起任何多余的 SVG 图片 HTTP 请求。
|
|
73
|
-
- **开发阶段热更新 (HMR)**：自动监听 `public/svg` 文件夹，当新增、删除或修改 SVG 文件时，插件会自动重新扫描并生成 CSS 变量，且触发模块热重载，方便高效调试。
|
|
74
|
-
|
|
75
|
-
## 初衷
|
|
76
|
-
|
|
77
|
-
人工智能开发前端，比较大的问题是调试。
|
|
69
|
+
#### 命令行工作原理
|
|
78
70
|
|
|
79
|
-
|
|
71
|
+
1. **解析依赖**：查询 npm 注册表并解析 `webc.com` 包源。
|
|
72
|
+
2. **源码集成**：下载包源并提取目标组件源码，编译输出至本地项目的 `lib/<组件名>` 目录。
|
|
73
|
+
3. **样式处理**：将组件关联的 Stylus 代码编译为 CSS，并集成至公共样式。
|
|
80
74
|
|
|
81
|
-
|
|
75
|
+
### 3. SVG 资源优化 (`vite-plugin-svg-var`)
|
|
82
76
|
|
|
83
|
-
|
|
77
|
+
在 Vite 构建配置中，配合使用 [vite-plugin-svg-var](https://www.npmjs.com/package/vite-plugin-svg-var) 插件优化 SVG 资源加载：
|
|
84
78
|
|
|
85
|
-
|
|
79
|
+
- **内容去重**：对 `public/svg` 目录下的 SVG 进行 MD5 哈希校验。内容相同的 SVG 文件仅生成单个 CSS 变量，避免资源冗余。
|
|
80
|
+
- **UTF-8 编码**：将 SVG 转为 UTF-8 编码的 `data:image/svg+xml` 并写入 CSS 变量，降低编码体积，提升压缩率。
|
|
81
|
+
- **替换与注入**：构建或开发阶段，插件在项目入口 JS（匹配 `/page/entry/**/*.js`）中注入 CSS 变量样式，并将 CSS/Stylus/Svelte 中引用的 `url("/svg/xxx.svg")` 替换为 `var(--xxxSvg)` 形式，减少网络请求。
|
|
82
|
+
- **热更新**：监听 `public/svg` 目录变动，在新增、修改或删除 SVG 文件时，重新计算 CSS 变量并触发热重载。
|
|
86
83
|
|
|
87
|
-
|
|
84
|
+
## AI 驱动开发规范
|
|
88
85
|
|
|
89
|
-
|
|
86
|
+
### 1. 状态与逻辑解耦
|
|
90
87
|
|
|
91
|
-
|
|
88
|
+
AI 智能体在通过自动化浏览器（如 Antigravity）进行界面调试时，常因交互链路长、鉴权限制以及对后端数据的依赖而导致调试中断。
|
|
92
89
|
|
|
93
|
-
|
|
90
|
+
为提升 AI 开发效率，本项目采用以下设计规范：
|
|
94
91
|
|
|
95
|
-
|
|
92
|
+
- **数据流向上管理**：组件内部不直接调用后端接口，数据交互均通过异步回调函数向外暴露。
|
|
93
|
+
- **数据模拟**：在 `Demo.svelte` 中传入模拟数据，以展现组件在多种状态下的交互表现，免除鉴权及后端环境依赖。
|
|
96
94
|
|
|
97
|
-
|
|
95
|
+
### 2. 组件架构与本地调试
|
|
98
96
|
|
|
99
|
-
|
|
97
|
+
组件采用独立目录结构，每个组件文件夹内包含其全部的逻辑、样式及静态资源（如 SVG）。
|
|
100
98
|
|
|
101
|
-
|
|
99
|
+
- **按需添加**：支持通过命令行独立拉取组件。
|
|
100
|
+
- **隔离调试**：执行以下命令，针对指定组件启动开发服务，调试入口为该组件目录下的 `Demo.svelte`：
|
|
101
|
+
```bash
|
|
102
|
+
./comDev.sh com/<组件名>
|
|
103
|
+
```
|
|
102
104
|
|
|
103
|
-
|
|
105
|
+
### 3. 智能体提示词配置
|
|
104
106
|
|
|
105
|
-
|
|
107
|
+
开发提示词配置参见 [.agents/skills/com/SKILL.md](.agents/skills/com/SKILL.md)。在谷歌反重力（Antigravity）环境下，使用 `/com` 命令即可调用。
|
|
106
108
|
|
|
107
109
|
|
package/Scroll.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
:root{--cursorGrabSvg:url(
|
|
2
|
-
|
|
1
|
+
:root{--cursorGrabSvg:url(giUzPhnYmbjOG3VzqseH5g.svg) 8 7, grabbing;--cursorScrollhSvg:url(yhI9x3s8u28j5vUN45useQ.svg) 10 10, ew-resize;--cursorScrollvSvg:url(sgoOOaKyF_KnkUoRKxWczw.svg) 10 10, ns-resize}v-scroll,h-scroll{display:block}v-scroll::part(scroll),h-scroll::part(scroll){scrollbar-width:none;width:100%;height:100%;display:flex;position:relative;overflow:auto}v-scroll::part(scroll)::-webkit-scrollbar,h-scroll::part(scroll)::-webkit-scrollbar{display:none}v-scroll::part(bar),h-scroll::part(bar){user-select:none;z-index:999;--si-anim:none;--si-bg:#7d7d7d99;transition:all .2s,opacity 1s,box-shadow 1s;display:block;position:sticky;bottom:0}v-scroll::part(bar):hover,h-scroll::part(bar):hover,v-scroll::part(drag),h-scroll::part(drag){--si-anim:v-scroll-pop .4s ease-out;--si-bg:#7d7d7dcc;background:#0000000d;box-shadow:inset 0 1px 6px #fffc,inset 0 -2px 8px #0000000a,inset 0 0 0 1px #ffffff80;opacity:1!important}v-scroll::part(si),h-scroll::part(si){animation:var(--si-anim);background:var(--si-bg);border-radius:3px;margin:auto;transition:all .2s,opacity 1s,box-shadow 1s;display:block;position:absolute}v-scroll{--sh:inset 3px 0 3px -3px #0000004d, inset -3px 0 3px -3px #0000000d;width:100%;height:100%}v-scroll::part(scroll){overflow-x:hidden}v-scroll::part(bar){width:13px;height:100%;margin-left:-13px;top:0;left:100%}v-scroll::part(bar):hover,v-scroll::part(drag){cursor:var(--cursorScrollvSvg);width:21px;margin-left:-21px}v-scroll::part(si){cursor:var(--cursorScrollvSvg);width:7px;left:0;right:0}h-scroll{--sh:inset 0 3px 3px -3px #0000004d, inset 0 -3px 3px -3px #0000000d;width:100%}h-scroll::part(scroll){width:100%;display:block;overflow-y:hidden}h-scroll::part(bar){width:100%;height:13px;margin-top:-13px;left:0;right:0}h-scroll::part(bar):hover,h-scroll::part(drag){cursor:var(--cursorScrollhSvg);height:21px;margin-top:-21px}h-scroll::part(si){cursor:var(--cursorScrollhSvg);height:7px;top:0;bottom:0}body.drag{cursor:var(--cursorGrabSvg)!important}@-webkit-keyframes v-scroll-pop{0%{transform:scale(1)}40%{transform:scale(1.15)}to{transform:scale(1)}}@-moz-keyframes v-scroll-pop{0%{transform:scale(1)}40%{transform:scale(1.15)}to{transform:scale(1)}}@-o-keyframes v-scroll-pop{0%{transform:scale(1)}40%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes v-scroll-pop{0%{transform:scale(1)}40%{transform:scale(1.15)}to{transform:scale(1)}}
|
|
2
|
+
/*# sourceMappingURL=Scroll.css.map */
|
package/Scroll.css.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"AAAA,4MACA,gCAAgC,uIAAuI,iGAAiG,yLAAyL,mRAAmR,iMAAiM,qGAAqG,yCAAyC,6EAA6E,2GAA2G,2EAA2E,yFAAyF,kEAAkE,2EAA2E,2GAA2G,4EAA4E,gDAAgD","sources":["Scroll.css"],"sourcesContent":[":root{--cursorGrabSvg:url(\"giUzPhnYmbjOG3VzqseH5g.svg\") 8 7, grabbing;--cursorScrollhSvg:url(\"yhI9x3s8u28j5vUN45useQ.svg\") 10 10, ew-resize;--cursorScrollvSvg:url(\"sgoOOaKyF_KnkUoRKxWczw.svg\") 10 10, ns-resize}\nv-scroll,h-scroll{display:block}v-scroll::part(scroll),h-scroll::part(scroll){scrollbar-width:none;width:100%;height:100%;display:flex;position:relative;overflow:auto}v-scroll::part(scroll)::-webkit-scrollbar,h-scroll::part(scroll)::-webkit-scrollbar{display:none}v-scroll::part(bar),h-scroll::part(bar){user-select:none;z-index:999;--si-anim:none;--si-bg:#7d7d7d99;transition:all .2s,opacity 1s,box-shadow 1s;display:block;position:sticky;bottom:0}v-scroll::part(bar):hover,h-scroll::part(bar):hover,v-scroll::part(drag),h-scroll::part(drag){--si-anim:v-scroll-pop .4s ease-out;--si-bg:#7d7d7dcc;background:#0000000d;box-shadow:inset 0 1px 6px #fffc,inset 0 -2px 8px #0000000a,inset 0 0 0 1px #ffffff80;opacity:1!important}v-scroll::part(si),h-scroll::part(si){animation:var(--si-anim);background:var(--si-bg);border-radius:3px;margin:auto;transition:all .2s,opacity 1s,box-shadow 1s;display:block;position:absolute}v-scroll{--sh:inset 3px 0 3px -3px #0000004d, inset -3px 0 3px -3px #0000000d;width:100%;height:100%}v-scroll::part(scroll){overflow-x:hidden}v-scroll::part(bar){width:13px;height:100%;margin-left:-13px;top:0;left:100%}v-scroll::part(bar):hover,v-scroll::part(drag){cursor:var(--cursorScrollvSvg);width:21px;margin-left:-21px}v-scroll::part(si){cursor:var(--cursorScrollvSvg);width:7px;left:0;right:0}h-scroll{--sh:inset 0 3px 3px -3px #0000004d, inset 0 -3px 3px -3px #0000000d;width:100%}h-scroll::part(scroll){width:100%;display:block;overflow-y:hidden}h-scroll::part(bar){width:100%;height:13px;margin-top:-13px;left:0;right:0}h-scroll::part(bar):hover,h-scroll::part(drag){cursor:var(--cursorScrollhSvg);height:21px;margin-top:-21px}h-scroll::part(si){cursor:var(--cursorScrollhSvg);height:7px;top:0;bottom:0}body.drag{cursor:var(--cursorGrabSvg)!important}@-webkit-keyframes v-scroll-pop{0%{transform:scale(1)}40%{transform:scale(1.15)}to{transform:scale(1)}}@-moz-keyframes v-scroll-pop{0%{transform:scale(1)}40%{transform:scale(1.15)}to{transform:scale(1)}}@-o-keyframes v-scroll-pop{0%{transform:scale(1)}40%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes v-scroll-pop{0%{transform:scale(1)}40%{transform:scale(1.15)}to{transform:scale(1)}}"],"names":[]}
|
package/Scroll.js
CHANGED
|
@@ -1 +1,87 @@
|
|
|
1
|
-
import { On as e, D as t, newEl as
|
|
1
|
+
import { On as e, D as t, newEl as n } from "./x.js";//#region com/Scroll/Scroll.js
|
|
2
|
+
(() => {
|
|
3
|
+
let { round: r, max: i, min: a } = Math, o = "drag", s = (e, t, ...r) => {
|
|
4
|
+
let i = n(e);
|
|
5
|
+
return t && i.setAttribute("part", t), i.append(...r), i;
|
|
6
|
+
}, c = (n, c, l) => {
|
|
7
|
+
let u = n.toLowerCase(), d = c.toLowerCase(), f = "client" + n, p = "scroll" + n, m = "scroll" + c, h = "client" + l;
|
|
8
|
+
return (n) => {
|
|
9
|
+
let c, l, g, _ = -1, v = n.firstElementChild, y = s("i", "si"), b = s("b", "bar", y), x = (e = y[f]) => {
|
|
10
|
+
let t = n[f], r = v[p];
|
|
11
|
+
return [
|
|
12
|
+
r - t,
|
|
13
|
+
i(1, t - e - 6),
|
|
14
|
+
e,
|
|
15
|
+
t,
|
|
16
|
+
r
|
|
17
|
+
];
|
|
18
|
+
}, S = (e) => {
|
|
19
|
+
if (!b.parentNode) return;
|
|
20
|
+
let [t, o] = x(e), s = i(0, a(n[m], t));
|
|
21
|
+
_ != -1 && _ != s && (b.style.opacity = 1, clearTimeout(c), c = setTimeout(() => b.style.opacity = 0, 1e3)), _ = s, y.style[d] = 3 + r(o * s / t) + "px";
|
|
22
|
+
}, C = (i) => {
|
|
23
|
+
if (l) return;
|
|
24
|
+
let a = t.body;
|
|
25
|
+
a.setPointerCapture(i.pointerId), a.classList.add(o), b.part.add(o);
|
|
26
|
+
let s = i[h], c = () => {
|
|
27
|
+
a.classList.remove(o), b.part.remove(o), u(), l = null;
|
|
28
|
+
}, u = e(a, {
|
|
29
|
+
pointermove: (e) => {
|
|
30
|
+
let [t, i] = x();
|
|
31
|
+
n[m] += r(t * (e[h] - s) / i), s = e[h];
|
|
32
|
+
},
|
|
33
|
+
pointerup: c,
|
|
34
|
+
lostpointercapture: c
|
|
35
|
+
});
|
|
36
|
+
l = c;
|
|
37
|
+
}, w = [
|
|
38
|
+
e(b, { pointerdown: (e) => {
|
|
39
|
+
let t = b.getBoundingClientRect()[d], [o, s, c] = x();
|
|
40
|
+
n[m] = r(o * i(a((e[h] - t - 3 - c / 2) / s, 1), 0)), C(e);
|
|
41
|
+
} }),
|
|
42
|
+
e(y, { pointerdown: (e) => {
|
|
43
|
+
e.stopPropagation(), C(e);
|
|
44
|
+
} }),
|
|
45
|
+
e(n, { scroll: S.bind(null, void 0) })
|
|
46
|
+
], T = new ResizeObserver(() => {
|
|
47
|
+
clearTimeout(g), g = setTimeout(() => {
|
|
48
|
+
let [, , , e, t] = x();
|
|
49
|
+
if (e < t) {
|
|
50
|
+
b.parentNode != n && n.appendChild(b);
|
|
51
|
+
let a = i(16, r(e * e / t));
|
|
52
|
+
y.style[u] = a + "px", S(a);
|
|
53
|
+
} else b.parentNode && b.remove();
|
|
54
|
+
}, 200);
|
|
55
|
+
}), E = () => {
|
|
56
|
+
clearTimeout(c), clearTimeout(g), w.forEach((e) => e()), l && l(), T.disconnect(), b.parentNode && b.remove();
|
|
57
|
+
};
|
|
58
|
+
return b.style.opacity = 0, [n, v].forEach((e) => T.observe(e)), E;
|
|
59
|
+
};
|
|
60
|
+
};
|
|
61
|
+
[[
|
|
62
|
+
"v",
|
|
63
|
+
"Height",
|
|
64
|
+
"Top",
|
|
65
|
+
"Y",
|
|
66
|
+
"flex-direction:column;width:100%;min-height:100%"
|
|
67
|
+
], [
|
|
68
|
+
"h",
|
|
69
|
+
"Width",
|
|
70
|
+
"Left",
|
|
71
|
+
"X",
|
|
72
|
+
"min-width:100%;width:max-content;height:100%"
|
|
73
|
+
]].map(([e, t, n, r, i]) => {
|
|
74
|
+
let a = c(t, n, r);
|
|
75
|
+
customElements.define(e + "-scroll", class extends HTMLElement {
|
|
76
|
+
connectedCallback() {
|
|
77
|
+
let e = s("b", "", s("slot")), t = s("b", "scroll", e);
|
|
78
|
+
e.style.cssText = "display:flex;" + i, this.attachShadow({ mode: "open" }).appendChild(t), this._unbind = a(t);
|
|
79
|
+
}
|
|
80
|
+
disconnectedCallback() {
|
|
81
|
+
this._unbind?.();
|
|
82
|
+
}
|
|
83
|
+
});
|
|
84
|
+
});
|
|
85
|
+
})();
|
|
86
|
+
//#endregion
|
|
87
|
+
|
package/Scroll.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Scroll.js","names":[],"sources":["../../com/Scroll/Scroll.js"],"sourcesContent":["import { On } from \"x/On.js\";\nimport { D, newEl } from \"x/dom.js\";\n\n(() => {\n const { round, max, min } = Math,\n PART = \"part\",\n BAR = \"bar\",\n SI = \"si\",\n DRAG = \"drag\",\n PX = \"px\",\n mk = (tag, part, ...kids) => {\n const e = newEl(tag);\n if (part) e.setAttribute(PART, part);\n e.append(...kids);\n return e;\n },\n mkScroll = (size, pos, axis) => {\n const style_size = size.toLowerCase(),\n style_pos = pos.toLowerCase(),\n client_size = \"client\" + size,\n scroll_size = \"scroll\" + size,\n scroll_pos = \"scroll\" + pos,\n client_pos = \"client\" + axis;\n return (ct) => {\n let timer_bar,\n ptr_unbind,\n timer_resize,\n pre_st = -1;\n const m = ct.firstElementChild,\n si = mk(\"i\", SI),\n bar = mk(\"b\", BAR, si),\n getGeo = (sih = si[client_size]) => {\n const ch = ct[client_size],\n sh = m[scroll_size];\n return [sh - ch, max(1, ch - sih - 6), sih, ch, sh];\n },\n updateTop = (h) => {\n if (!bar.parentNode) return;\n const [ds, db] = getGeo(h),\n st = max(0, min(ct[scroll_pos], ds));\n if (pre_st != -1 && pre_st != st) {\n bar.style.opacity = 1;\n clearTimeout(timer_bar);\n timer_bar = setTimeout(() => (bar.style.opacity = 0), 1e3);\n }\n pre_st = st;\n si.style[style_pos] = 3 + round((db * st) / ds) + PX;\n },\n onDown = (e) => {\n if (ptr_unbind) return;\n const bd = D.body;\n bd.setPointerCapture(e.pointerId);\n bd.classList.add(DRAG);\n bar.part.add(DRAG);\n let pre = e[client_pos];\n const detach = () => {\n bd.classList.remove(DRAG);\n bar.part.remove(DRAG);\n un_ptr();\n ptr_unbind = null;\n },\n un_ptr = On(bd, {\n pointermove: (e) => {\n const [ds, db] = getGeo();\n ct[scroll_pos] += round((ds * (e[client_pos] - pre)) / db);\n pre = e[client_pos];\n },\n pointerup: detach,\n lostpointercapture: detach,\n });\n ptr_unbind = detach;\n },\n onClick = (e) => {\n const rect = bar.getBoundingClientRect(),\n top = rect[style_pos],\n [ds, db, sih] = getGeo();\n ct[scroll_pos] = round(ds * max(min((e[client_pos] - top - 3 - sih / 2) / db, 1), 0));\n onDown(e);\n },\n unbind = [\n On(bar, { pointerdown: onClick }),\n On(si, {\n pointerdown: (e) => {\n e.stopPropagation();\n onDown(e);\n },\n }),\n On(ct, { scroll: updateTop.bind(null, undefined) }),\n ],\n ob = new ResizeObserver(() => {\n clearTimeout(timer_resize);\n timer_resize = setTimeout(() => {\n const [, , , ch, sh] = getGeo(),\n is_turn = ch < sh;\n if (is_turn) {\n if (bar.parentNode != ct) ct.appendChild(bar);\n const h = max(16, round((ch * ch) / sh));\n si.style[style_size] = h + PX;\n updateTop(h);\n } else if (bar.parentNode) {\n bar.remove();\n }\n }, 200);\n }),\n destroy = () => {\n clearTimeout(timer_bar);\n clearTimeout(timer_resize);\n unbind.forEach((f) => f());\n if (ptr_unbind) ptr_unbind();\n ob.disconnect();\n if (bar.parentNode) bar.remove();\n };\n bar.style.opacity = 0;\n [ct, m].forEach((i) => ob.observe(i));\n return destroy;\n };\n };\n\n [\n [\"v\", \"Height\", \"Top\", \"Y\", \"flex-direction:column;width:100%;min-height:100%\"],\n [\"h\", \"Width\", \"Left\", \"X\", \"min-width:100%;width:max-content;height:100%\"],\n ].map(([prefix, size, pos, axis, css]) => {\n const initScroll = mkScroll(size, pos, axis);\n customElements.define(\n prefix + \"-scroll\",\n class extends HTMLElement {\n connectedCallback() {\n const content = mk(\"b\", \"\", mk(\"slot\")),\n wrapper = mk(\"b\", \"scroll\", content);\n content.style.cssText = \"display:flex;\" + css;\n this.attachShadow({ mode: \"open\" }).appendChild(wrapper);\n this._unbind = initScroll(wrapper);\n }\n disconnectedCallback() {\n this._unbind?.();\n }\n },\n );\n });\n})();\n"],"mappings":"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"}
|
package/Wait.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
:root{--waitSvg:url(
|
|
2
|
-
|
|
1
|
+
:root{--waitSvg:url(-oloHJiPWtJPJs8g_0WIaA.svg)}.wait,.ing{position:relative}.wait:before,.ing:before{background:var(--waitSvg) 50% 50%/64px no-repeat;content:"";cursor:wait;z-index:999;animation-name:fadeIn;animation-duration:1s;position:absolute;inset:0}.ing:before{background-color:#fff9}.wait{align-self:center;width:64px;height:64px;display:flex}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-moz-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-o-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}
|
|
2
|
+
/*# sourceMappingURL=Wait.css.map */
|
package/Wait.css.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"AAAA,gDACA,6BAA6B,mLAAmL,mCAAmC,4DAA4D","sources":["Wait.css"],"sourcesContent":[":root{--waitSvg:url(\"-oloHJiPWtJPJs8g_0WIaA.svg\")}\n.wait,.ing{position:relative}.wait:before,.ing:before{background:var(--waitSvg) 50% 50%/64px no-repeat;content:\"\";cursor:wait;z-index:999;animation-name:fadeIn;animation-duration:1s;position:absolute;inset:0}.ing:before{background-color:#fff9}.wait{align-self:center;width:64px;height:64px;display:flex}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-moz-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-o-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}"],"names":[]}
|
package/_Scroll.css
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
v-scroll,h-scroll{display:block}v-scroll::part(scroll),h-scroll::part(scroll){scrollbar-width:none;width:100%;height:100%;display:flex;position:relative;overflow:auto}v-scroll::part(scroll)::-webkit-scrollbar,h-scroll::part(scroll)::-webkit-scrollbar{display:none}v-scroll::part(bar),h-scroll::part(bar){user-select:none;z-index:999;--si-anim:none;--si-bg:#7d7d7d99;transition:all .2s,opacity 1s,box-shadow 1s;display:block;position:sticky;bottom:0}v-scroll::part(bar):hover,h-scroll::part(bar):hover,v-scroll::part(drag),h-scroll::part(drag){--si-anim:v-scroll-pop .4s ease-out;--si-bg:#7d7d7dcc;background:#0000000d;box-shadow:inset 0 1px 6px #fffc,inset 0 -2px 8px #0000000a,inset 0 0 0 1px #ffffff80;opacity:1!important}v-scroll::part(si),h-scroll::part(si){animation:var(--si-anim);background:var(--si-bg);border-radius:3px;margin:auto;transition:all .2s,opacity 1s,box-shadow 1s;display:block;position:absolute}v-scroll{--sh:inset 3px 0 3px -3px #0000004d, inset -3px 0 3px -3px #0000000d;width:100%;height:100%}v-scroll::part(scroll){overflow-x:hidden}v-scroll::part(bar){width:13px;height:100%;margin-left:-13px;top:0;left:100%}v-scroll::part(bar):hover,v-scroll::part(drag){cursor:var(--cursorScrollvSvg);width:21px;margin-left:-21px}v-scroll::part(si){cursor:var(--cursorScrollvSvg);width:7px;left:0;right:0}h-scroll{--sh:inset 0 3px 3px -3px #0000004d, inset 0 -3px 3px -3px #0000000d;width:100%}h-scroll::part(scroll){width:100%;display:block;overflow-y:hidden}h-scroll::part(bar){width:100%;height:13px;margin-top:-13px;left:0;right:0}h-scroll::part(bar):hover,h-scroll::part(drag){cursor:var(--cursorScrollhSvg);height:21px;margin-top:-21px}h-scroll::part(si){cursor:var(--cursorScrollhSvg);height:7px;top:0;bottom:0}body.drag{cursor:var(--cursorGrabSvg)!important}@-webkit-keyframes v-scroll-pop{0%{transform:scale(1)}40%{transform:scale(1.15)}to{transform:scale(1)}}@-moz-keyframes v-scroll-pop{0%{transform:scale(1)}40%{transform:scale(1.15)}to{transform:scale(1)}}@-o-keyframes v-scroll-pop{0%{transform:scale(1)}40%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes v-scroll-pop{0%{transform:scale(1)}40%{transform:scale(1.15)}to{transform:scale(1)}}
|
|
2
|
+
/*# sourceMappingURL=_Scroll.css.map */
|
package/_Scroll.css.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"AAAA,gCAAgC,uIAAuI,iGAAiG,yLAAyL,mRAAmR,iMAAiM,qGAAqG,yCAAyC,6EAA6E,2GAA2G,2EAA2E,yFAAyF,kEAAkE,2EAA2E,2GAA2G,4EAA4E,gDAAgD","sources":["_Scroll.css"],"sourcesContent":["v-scroll,h-scroll{display:block}v-scroll::part(scroll),h-scroll::part(scroll){scrollbar-width:none;width:100%;height:100%;display:flex;position:relative;overflow:auto}v-scroll::part(scroll)::-webkit-scrollbar,h-scroll::part(scroll)::-webkit-scrollbar{display:none}v-scroll::part(bar),h-scroll::part(bar){user-select:none;z-index:999;--si-anim:none;--si-bg:#7d7d7d99;transition:all .2s,opacity 1s,box-shadow 1s;display:block;position:sticky;bottom:0}v-scroll::part(bar):hover,h-scroll::part(bar):hover,v-scroll::part(drag),h-scroll::part(drag){--si-anim:v-scroll-pop .4s ease-out;--si-bg:#7d7d7dcc;background:#0000000d;box-shadow:inset 0 1px 6px #fffc,inset 0 -2px 8px #0000000a,inset 0 0 0 1px #ffffff80;opacity:1!important}v-scroll::part(si),h-scroll::part(si){animation:var(--si-anim);background:var(--si-bg);border-radius:3px;margin:auto;transition:all .2s,opacity 1s,box-shadow 1s;display:block;position:absolute}v-scroll{--sh:inset 3px 0 3px -3px #0000004d, inset -3px 0 3px -3px #0000000d;width:100%;height:100%}v-scroll::part(scroll){overflow-x:hidden}v-scroll::part(bar){width:13px;height:100%;margin-left:-13px;top:0;left:100%}v-scroll::part(bar):hover,v-scroll::part(drag){cursor:var(--cursorScrollvSvg);width:21px;margin-left:-21px}v-scroll::part(si){cursor:var(--cursorScrollvSvg);width:7px;left:0;right:0}h-scroll{--sh:inset 0 3px 3px -3px #0000004d, inset 0 -3px 3px -3px #0000000d;width:100%}h-scroll::part(scroll){width:100%;display:block;overflow-y:hidden}h-scroll::part(bar){width:100%;height:13px;margin-top:-13px;left:0;right:0}h-scroll::part(bar):hover,h-scroll::part(drag){cursor:var(--cursorScrollhSvg);height:21px;margin-top:-21px}h-scroll::part(si){cursor:var(--cursorScrollhSvg);height:7px;top:0;bottom:0}body.drag{cursor:var(--cursorGrabSvg)!important}@-webkit-keyframes v-scroll-pop{0%{transform:scale(1)}40%{transform:scale(1.15)}to{transform:scale(1)}}@-moz-keyframes v-scroll-pop{0%{transform:scale(1)}40%{transform:scale(1.15)}to{transform:scale(1)}}@-o-keyframes v-scroll-pop{0%{transform:scale(1)}40%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes v-scroll-pop{0%{transform:scale(1)}40%{transform:scale(1.15)}to{transform:scale(1)}}"],"names":[]}
|
package/_Wait.css
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.wait,.ing{position:relative}.wait:before,.ing:before{background:var(--waitSvg) 50% 50%/64px no-repeat;content:"";cursor:wait;z-index:999;animation-name:fadeIn;animation-duration:1s;position:absolute;inset:0}.ing:before{background-color:#fff9}.wait{align-self:center;width:64px;height:64px;display:flex}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-moz-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-o-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}
|
|
2
|
+
/*# sourceMappingURL=_Wait.css.map */
|
package/_Wait.css.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"AAAA,6BAA6B,mLAAmL,mCAAmC,4DAA4D","sources":["_Wait.css"],"sourcesContent":[".wait,.ing{position:relative}.wait:before,.ing:before{background:var(--waitSvg) 50% 50%/64px no-repeat;content:\"\";cursor:wait;z-index:999;animation-name:fadeIn;animation-duration:1s;position:absolute;inset:0}.ing:before{background-color:#fff9}.wait{align-self:center;width:64px;height:64px;display:flex}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-moz-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-o-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}"],"names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="14" fill="none"><path fill="#ffffffb3" fill-rule="evenodd" d="M3.573 2.036c.48-.178 1.427-.069 1.677.473.213.462.396 1.241.406 1.075.024-.369-.024-1.167.137-1.584.117-.304.347-.59.686-.69a1.9 1.9 0 0 1 .916-.056c.313.064.642.287.765.5.362.622.368 1.898.385 1.83.064-.272.07-1.229.283-1.584.141-.235.497-.445.687-.479.294-.052.656-.068.964-.008.25.05.586.344.677.487.22.344.342 1.316.38 1.658.015.141.073-.393.292-.736.406-.639 1.844-.763 1.898.64.026.653.02.623.02 1.063 0 .516-.012.828-.04 1.202-.03.4-.116 1.304-.24 1.742-.087.301-.372.978-.654 1.384 0 0-1.074 1.25-1.19 1.812-.118.563-.079.567-.103.965-.023.4.121.923.121.923s-.8.104-1.234.034c-.39-.062-.875-.84-1-1.078-.172-.328-.539-.265-.682-.023-.224.383-.709 1.07-1.05 1.113-.669.084-2.055.03-3.14.02 0 0 .185-1.01-.227-1.358-.305-.26-.83-.784-1.144-1.06l-.832-.92c-.283-.36-1.002-.93-1.243-1.986C.875 6.46.896 6 1.125 5.625c.232-.38.67-.589.854-.625.208-.042.692-.039.875.062.223.123.313.16.488.391.23.307.312.456.213.121-.076-.262-.322-.595-.434-.97-.109-.36-.4-.943-.38-1.526.008-.22.103-.77.832-1.042" clip-rule="evenodd"/><path stroke="#0000008c" stroke-linejoin="round" stroke-width=".75" d="M3.573 2.036c.48-.178 1.427-.069 1.677.473.213.462.396 1.241.406 1.075.024-.369-.024-1.167.137-1.584.117-.304.347-.59.686-.69a1.9 1.9 0 0 1 .916-.056c.313.064.642.287.765.5.362.622.368 1.898.385 1.83.064-.272.07-1.229.283-1.584.141-.235.497-.445.687-.479.294-.052.656-.068.964-.008.25.05.586.344.677.487.22.344.342 1.316.38 1.658.015.141.073-.393.292-.736.406-.639 1.844-.763 1.898.64.026.653.02.623.02 1.063 0 .516-.012.828-.04 1.202-.03.4-.116 1.304-.24 1.742-.087.301-.372.978-.654 1.384 0 0-1.074 1.25-1.19 1.812-.118.563-.079.567-.103.965-.023.4.121.923.121.923s-.8.104-1.234.034c-.39-.062-.875-.84-1-1.078-.172-.328-.539-.265-.682-.023-.224.383-.709 1.07-1.05 1.113-.669.084-2.055.03-3.14.02 0 0 .185-1.01-.227-1.358-.305-.26-.83-.784-1.144-1.06l-.832-.92c-.283-.36-1.002-.93-1.243-1.986C.875 6.46.896 6 1.125 5.625c.232-.38.67-.589.854-.625.208-.042.692-.039.875.062.223.123.313.16.488.391.23.307.312.456.213.121-.076-.262-.322-.595-.434-.97-.109-.36-.4-.943-.38-1.526.008-.22.103-.77.832-1.042Z" clip-rule="evenodd"/><path stroke="#0000008c" stroke-linecap="round" stroke-width=".75" d="M10.566 9.734V6.275M8.55 9.746l-.015-3.473m-1.98.032.02 3.426"/></svg>
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"name":"webc.site","version":"0.1.
|
|
1
|
+
{"name":"webc.site","version":"0.1.25","description":"","keywords":[],"homepage":"https://webc-zh.github.io","license":"MulanPSL-2.0","author":"i18n.site@gmail.com","repository":{"type":"git","url":"git+https://github.com/webc-zh/webc-zh.github.io.git"},"bin":{"webc-i":"./cli.js"},"files":["./*"],"type":"module","exports":{"./*":"./*"},"scripts":{},"dependencies":{"@3-/read":"^0.1.4","ansis":"^4.3.0","stylus":"^0.64.0","tar":"^7.5.15","yargs":"^18.0.0"},"devDependencies":{}}
|
package/reset.css
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
*,:before,:after{border-color:var(--un-default-border-color,#e5e7eb) ;box-sizing:border-box;border-style:solid;border-width:0}html,:host{font-feature-settings:normal ;font-variation-settings:normal ;-moz-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent ;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit ;margin:0}hr{color:inherit ;border-top-width:1px;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal ;font-variation-settings:normal ;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse ;border-color:inherit ;text-indent:0}button,input,optgroup,select,textarea{color:inherit ;font-feature-settings:inherit ;font-variation-settings:inherit ;font-family:inherit;font-size:100%;font-weight:inherit ;line-height:inherit ;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px ;-webkit-appearance:textfield}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit ;-webkit-appearance:button}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}
|
|
1
|
+
*,:before,:after{border-color:var(--un-default-border-color,#e5e7eb) ;box-sizing:border-box;border-style:solid;border-width:0}html,:host{font-feature-settings:normal ;font-variation-settings:normal ;-moz-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent ;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit ;margin:0}hr{color:inherit ;border-top-width:1px;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal ;font-variation-settings:normal ;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse ;border-color:inherit ;text-indent:0}button,input,optgroup,select,textarea{color:inherit ;font-feature-settings:inherit ;font-variation-settings:inherit ;font-family:inherit;font-size:100%;font-weight:inherit ;line-height:inherit ;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px ;-webkit-appearance:textfield}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit ;-webkit-appearance:button}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}
|
|
2
|
+
/*# sourceMappingURL=reset.css.map */
|
package/reset.css.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"AAQA,8HAiBA,4SAeA,mCASA,gDAQA,qDAMA,wDAYA,wCAOA,4BAUA,kMAYA,oBAMA,8EAOA,kBAGA,cAQA,oEAUA,qNAkBA,kCAQA,gGAaA,6BAMA,iCAMA,iCAMA,oEAQA,gEAOA,oDAOA,qEAOA,0BAMA,4DAeA,4BAIA,iBAGA,8CAOA,iBAMA,yBAOA,iEAQA,oCAOA,yBAQA,mFAcA,qCAQA","sources":["Users/z/git/webc-zh/dist/webc.site/reset.css"],"sourcesContent":["/*\nPlease read: https://github.com/unocss/unocss/blob/main/packages-presets/reset/tailwind-compat.md\n*/\n/*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n2. [UnoCSS]: allow to override the default border color with css var `--un-default-border-color`\n*/\n*,\n::before,\n::after {\n border-color: var(--un-default-border-color, #e5e7eb) /* 2 */;\n border-style: solid /* 2 */;\n border-width: 0 /* 2 */;\n box-sizing: border-box /* 1 */;\n}\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n6. Use the user's configured `sans` font-variation-settings by default.\n7. Disable tap highlights on iOS.\n*/\nhtml,\n:host {\n font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' /* 4 */;\n font-feature-settings: normal /* 5 */;\n font-variation-settings: normal /* 6 */;\n line-height: 1.5 /* 1 */;\n tab-size: 4 /* 3 */;\n -moz-tab-size: 4 /* 3 */;\n -webkit-tap-highlight-color: transparent /* 7 */;\n -webkit-text-size-adjust: 100% /* 2 */;\n}\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\nbody {\n line-height: inherit /* 2 */;\n margin: 0 /* 1 */;\n}\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\nhr {\n border-top-width: 1px /* 3 */;\n color: inherit /* 2 */;\n height: 0 /* 1 */;\n}\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\nabbr:where([title]) {\n text-decoration: underline dotted;\n}\n/*\nRemove the default font size and weight for headings.\n*/\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\na {\n color: inherit;\n text-decoration: inherit;\n}\n/*\nAdd the correct font weight in Edge and Safari.\n*/\nb,\nstrong {\n font-weight: bolder;\n}\n/*\n1. Use the user's configured `mono` font-family by default.\n2. Use the user's configured `mono` font-feature-settings by default.\n3. Use the user's configured `mono` font-variation-settings by default.\n4. Correct the odd `em` font sizing in all browsers.\n*/\ncode,\nkbd,\nsamp,\npre {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace /* 1 */;\n font-feature-settings: normal /* 2 */;\n font-size: 1em /* 4 */;\n font-variation-settings: normal /* 3 */;\n}\n/*\nAdd the correct font size in all browsers.\n*/\nsmall {\n font-size: 80%;\n}\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\nsub {\n bottom: -0.25em;\n}\nsup {\n top: -0.5em;\n}\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\ntable {\n border-collapse: collapse /* 3 */;\n border-color: inherit /* 2 */;\n text-indent: 0 /* 1 */;\n}\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n color: inherit /* 1 */;\n font-family: inherit /* 1 */;\n font-feature-settings: inherit /* 1 */;\n font-size: 100% /* 1 */;\n font-variation-settings: inherit /* 1 */;\n font-weight: inherit /* 1 */;\n line-height: inherit /* 1 */;\n margin: 0 /* 2 */;\n padding: 0 /* 3 */;\n}\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\nbutton,\nselect {\n text-transform: none;\n}\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n/* Will affect the button style of most component libraries, so disable it */\n/* https://github.com/unocss/unocss/issues/2127 */\n/* background-color: transparent; !* 2 *! */\n background-image: none /* 2 */;\n -webkit-appearance: button /* 1 */;\n}\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n:-moz-focusring {\n outline: auto;\n}\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n:-moz-ui-invalid {\n box-shadow: none;\n}\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\nprogress {\n vertical-align: baseline;\n}\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n[type='search'] {\n outline-offset: -2px /* 2 */;\n -webkit-appearance: textfield /* 1 */;\n}\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n::-webkit-file-upload-button {\n font: inherit /* 2 */;\n -webkit-appearance: button /* 1 */;\n}\n/*\nAdd the correct display in Chrome and Safari.\n*/\nsummary {\n display: list-item;\n}\n/*\nRemoves the default spacing for appropriate elements.\n*/\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n margin: 0;\n}\nfieldset {\n margin: 0;\n padding: 0;\n}\nlegend {\n padding: 0;\n}\nol,\nul,\nmenu {\n list-style: none;\n margin: 0;\n padding: 0;\n}\ndialog {\n padding: 0;\n}\n/*\nPrevent resizing textareas horizontally by default.\n*/\ntextarea {\n resize: vertical;\n}\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\ninput::placeholder,\ntextarea::placeholder {\n color: #9ca3af /* 2 */;\n opacity: 1 /* 1 */;\n}\n/*\nSet the default cursor for buttons.\n*/\nbutton,\n[role='button'] {\n cursor: pointer;\n}\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n cursor: default;\n}\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n*/\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block /* 1 */;\n vertical-align: middle /* 2 */;\n}\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\nimg,\nvideo {\n height: auto;\n max-width: 100%;\n}\n/*\nMake elements with the HTML hidden attribute stay hidden by default.\n*/\n[hidden]:where(:not([hidden='until-found'])) {\n display: none;\n}\n"],"names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="#fff" stroke="#000" stroke-linejoin="round" stroke-width="2" d="M12 2 6 8h4v8H6l6 6 6-6h-4V8h4z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="#fff" stroke="#000" stroke-linejoin="round" stroke-width="2" d="m22 12-6-6v4H8V6l-6 6 6 6v-4h8v4z"/></svg>
|