mamba-layout 0.46.0 → 0.48.0
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/README.md +221 -15
- package/dist/layout.css +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -2,6 +2,41 @@
|
|
|
2
2
|
|
|
3
3
|
Shared Mamba Vue layout shell, styles, locale helpers, and a standalone browser layout build.
|
|
4
4
|
|
|
5
|
+
## ⚠️ Important: Required CDN Links and Styles
|
|
6
|
+
|
|
7
|
+
**The following CDN links and styles are REQUIRED and cannot be omitted or modified:**
|
|
8
|
+
|
|
9
|
+
### Required Links (must be included in `<head>`):
|
|
10
|
+
```html
|
|
11
|
+
<!-- Icon fonts - DO NOT modify or remove -->
|
|
12
|
+
<link type="text/css" rel="stylesheet" href="https://at.alicdn.com/t/c/font_4614982_ta3fsffdp7.css" />
|
|
13
|
+
<link type="text/css" rel="stylesheet" href="https://at.alicdn.com/t/c/font_4839395_zeh0j9u8an.css" />
|
|
14
|
+
|
|
15
|
+
<!-- Mamba Layout CSS - DO NOT modify or remove -->
|
|
16
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mamba-layout@latest/dist/layout.css" />
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
### Required Styles (must be included in `<head>`):
|
|
20
|
+
```html
|
|
21
|
+
<style>
|
|
22
|
+
html, body, mamba-layout {
|
|
23
|
+
width: 100%;
|
|
24
|
+
height: 100%;
|
|
25
|
+
margin: 0;
|
|
26
|
+
}
|
|
27
|
+
mamba-layout {
|
|
28
|
+
display: block;
|
|
29
|
+
}
|
|
30
|
+
</style>
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### Required Script (must be included before closing `</body>`):
|
|
34
|
+
```html
|
|
35
|
+
<script src="https://cdn.jsdelivr.net/npm/mamba-layout@latest/dist/layout.global.js"></script>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
**⚠️ CRITICAL:** All of the above links and styles are essential for the layout to function correctly. Do not skip, modify, or change any of these URLs.
|
|
39
|
+
|
|
5
40
|
### Quick Start
|
|
6
41
|
|
|
7
42
|
```html
|
|
@@ -75,25 +110,196 @@ To customize dark mode colors for your content:
|
|
|
75
110
|
|
|
76
111
|
### Available CSS Variables
|
|
77
112
|
|
|
113
|
+
#### 主题颜色
|
|
114
|
+
|
|
78
115
|
```css
|
|
79
|
-
/*
|
|
80
|
-
--ui-
|
|
81
|
-
--ui-
|
|
82
|
-
--ui-
|
|
83
|
-
--ui-
|
|
116
|
+
/* 基础颜色 */
|
|
117
|
+
--ui-color-primary /* 主色 */
|
|
118
|
+
--ui-color-success /* 成功色 */
|
|
119
|
+
--ui-color-warning /* 警告色 */
|
|
120
|
+
--ui-color-destructive /* 危险色 */
|
|
121
|
+
--ui-color-info /* 信息色 */
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
#### 背景和前景色
|
|
84
125
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
--ui-
|
|
88
|
-
--ui-
|
|
126
|
+
```css
|
|
127
|
+
/* 页面背景 */
|
|
128
|
+
--ui-bg-page /* 页面背景色 */
|
|
129
|
+
--ui-bg-card /* 卡片背景色 */
|
|
130
|
+
--ui-bg-muted /* 次要背景色 */
|
|
131
|
+
--ui-bg-disabled /* 禁用背景色 */
|
|
132
|
+
--ui-bg-overlay /* 遮罩层背景色 */
|
|
133
|
+
--ui-bg-inverse /* 反色背景色 */
|
|
89
134
|
|
|
90
|
-
/*
|
|
91
|
-
--ui-
|
|
92
|
-
--ui-
|
|
135
|
+
/* 颜色变量（底层） */
|
|
136
|
+
--ui-color-background /* 背景色 */
|
|
137
|
+
--ui-color-foreground /* 前景色 */
|
|
138
|
+
--ui-color-card /* 卡片背景色 */
|
|
139
|
+
--ui-color-card-foreground /* 卡片前景色 */
|
|
140
|
+
--ui-color-muted /* 柔和背景色 */
|
|
141
|
+
--ui-color-accent /* 强调色 */
|
|
142
|
+
--ui-color-overlay /* 遮罩色 */
|
|
143
|
+
--ui-color-inverse /* 反色 */
|
|
144
|
+
--ui-color-on-brand /* 品牌色上的文字颜色 */
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
#### 文字颜色
|
|
148
|
+
|
|
149
|
+
```css
|
|
150
|
+
/* 文字颜色 */
|
|
151
|
+
--ui-text-primary /* 主要文字 */
|
|
152
|
+
--ui-text-secondary /* 次要文字 */
|
|
153
|
+
--ui-text-muted /* 柔和文字 */
|
|
154
|
+
--ui-text-placeholder /* 占位符文字 */
|
|
155
|
+
--ui-text-disabled /* 禁用文字 */
|
|
156
|
+
--ui-text-on-brand /* 品牌色上的文字 */
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
#### 边框颜色
|
|
160
|
+
|
|
161
|
+
```css
|
|
162
|
+
/* 边框颜色 */
|
|
163
|
+
--ui-border-default /* 默认边框 */
|
|
164
|
+
--ui-border-soft /* 柔和边框 */
|
|
165
|
+
--ui-border-strong /* 强边框 */
|
|
166
|
+
--ui-ring /* 焦点环颜色 */
|
|
167
|
+
|
|
168
|
+
/* 颜色变量（底层） */
|
|
169
|
+
--ui-color-border /* 边框色 */
|
|
170
|
+
--ui-color-border-soft /* 柔和边框色 */
|
|
171
|
+
--ui-color-border-strong /* 强边框色 */
|
|
172
|
+
--ui-color-ring /* 焦点环颜色 */
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
#### 顶部导航栏颜色
|
|
176
|
+
|
|
177
|
+
```css
|
|
178
|
+
/* 顶部导航栏 */
|
|
179
|
+
--ui-topnav-bg /* 导航栏背景色 */
|
|
180
|
+
--ui-topnav-accent /* 导航栏强调色 */
|
|
181
|
+
--ui-topnav-foreground /* 导航栏前景色 */
|
|
182
|
+
--ui-topnav-muted /* 导航栏柔和文字 */
|
|
183
|
+
--ui-topnav-border /* 导航栏边框 */
|
|
184
|
+
--ui-topnav-hover /* 悬停背景色 */
|
|
185
|
+
--ui-topnav-surface /* 表面背景色 */
|
|
186
|
+
--ui-topnav-shadow /* 导航栏阴影 */
|
|
187
|
+
--ui-topnav-active-bg /* 激活状态背景色 */
|
|
188
|
+
--ui-topnav-active-fg /* 激活状态文字色 */
|
|
189
|
+
--ui-avatar-bg /* 头像背景色 */
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
#### 侧边栏颜色
|
|
193
|
+
|
|
194
|
+
```css
|
|
195
|
+
/* 侧边栏 */
|
|
196
|
+
--ui-sidebar-bg /* 侧边栏背景色 */
|
|
197
|
+
--ui-sidebar-accent /* 侧边栏强调色 */
|
|
198
|
+
--ui-sidebar-foreground /* 侧边栏前景色 */
|
|
199
|
+
--ui-sidebar-border /* 侧边栏边框 */
|
|
200
|
+
--ui-sidebar-active-bg /* 激活项背景色 */
|
|
201
|
+
--ui-sidebar-active-fg /* 激活项文字色 */
|
|
202
|
+
--ui-sidebar-hover-bg /* 悬停背景色 */
|
|
203
|
+
```
|
|
93
204
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
205
|
+
#### 徽章颜色
|
|
206
|
+
|
|
207
|
+
```css
|
|
208
|
+
/* 徽章背景色 */
|
|
209
|
+
--ui-badge-purple-bg /* 紫色徽章背景 */
|
|
210
|
+
--ui-badge-purple-fg /* 紫色徽章文字 */
|
|
211
|
+
--ui-badge-blue-bg /* 蓝色徽章背景 */
|
|
212
|
+
--ui-badge-blue-fg /* 蓝色徽章文字 */
|
|
213
|
+
--ui-badge-green-bg /* 绿色徽章背景 */
|
|
214
|
+
--ui-badge-green-fg /* 绿色徽章文字 */
|
|
215
|
+
--ui-badge-orange-bg /* 橙色徽章背景 */
|
|
216
|
+
--ui-badge-orange-fg /* 橙色徽章文字 */
|
|
217
|
+
--ui-badge-yellow-bg /* 黄色徽章背景 */
|
|
218
|
+
--ui-badge-yellow-fg /* 黄色徽章文字 */
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
#### 表格颜色
|
|
222
|
+
|
|
223
|
+
```css
|
|
224
|
+
/* 表格 */
|
|
225
|
+
--ui-table-header-bg /* 表头背景色 */
|
|
226
|
+
--ui-table-row-bg /* 表格行背景色 */
|
|
227
|
+
--ui-table-row-alt-bg /* 表格交替行背景色 */
|
|
228
|
+
```
|
|
229
|
+
|
|
230
|
+
#### 登录页颜色
|
|
231
|
+
|
|
232
|
+
```css
|
|
233
|
+
/* 登录页 */
|
|
234
|
+
--ui-login-page-bg /* 登录页背景色 */
|
|
235
|
+
--ui-login-panel-bg /* 登录面板背景色 */
|
|
236
|
+
--ui-login-panel-border /* 登录面板边框 */
|
|
237
|
+
--ui-login-hero-overlay /* 英雄区遮罩 */
|
|
238
|
+
--ui-login-feature-bg /* 功能项背景色 */
|
|
239
|
+
--ui-login-feature-border /* 功能项边框 */
|
|
240
|
+
--ui-login-feature-icon /* 功能项图标颜色 */
|
|
241
|
+
--ui-login-action-bg /* 操作按钮背景色 */
|
|
242
|
+
--ui-login-action-border /* 操作按钮边框 */
|
|
243
|
+
--ui-login-action-text /* 操作按钮文字 */
|
|
244
|
+
--ui-login-input-bg /* 输入框背景色 */
|
|
245
|
+
--ui-login-input-border /* 输入框边框 */
|
|
246
|
+
--ui-login-input-border-hover /* 输入框悬停边框 */
|
|
247
|
+
--ui-login-input-placeholder /* 输入框占位符 */
|
|
248
|
+
--ui-login-input-icon /* 输入框图标颜色 */
|
|
249
|
+
```
|
|
250
|
+
|
|
251
|
+
#### 字体
|
|
252
|
+
|
|
253
|
+
```css
|
|
254
|
+
/* 字体 */
|
|
255
|
+
--ui-font-heading /* 标题字体 */
|
|
256
|
+
--ui-font-body /* 正文字体 */
|
|
257
|
+
--ui-font-mono /* 等宽字体 */
|
|
258
|
+
```
|
|
259
|
+
|
|
260
|
+
#### 圆角
|
|
261
|
+
|
|
262
|
+
```css
|
|
263
|
+
/* 圆角 */
|
|
264
|
+
--ui-radius-sm /* 小圆角 */
|
|
265
|
+
--ui-radius-control /* 控件圆角 */
|
|
266
|
+
--ui-radius-card /* 卡片圆角 */
|
|
267
|
+
--ui-radius-modal /* 模态框圆角 */
|
|
268
|
+
--ui-radius-pill /* 胶囊圆角 */
|
|
269
|
+
--ui-body-radius /* 页面主体圆角 */
|
|
270
|
+
```
|
|
271
|
+
|
|
272
|
+
#### 间距
|
|
273
|
+
|
|
274
|
+
```css
|
|
275
|
+
/* 间距 */
|
|
276
|
+
--ui-space-inline /* 内联间距 */
|
|
277
|
+
--ui-space-control /* 控件间距 */
|
|
278
|
+
--ui-space-card /* 卡片间距 */
|
|
279
|
+
--ui-space-section /* 区块间距 */
|
|
280
|
+
```
|
|
281
|
+
|
|
282
|
+
#### 阴影
|
|
283
|
+
|
|
284
|
+
```css
|
|
285
|
+
/* 阴影 */
|
|
286
|
+
--ui-shadow-card /* 卡片阴影 */
|
|
287
|
+
--ui-shadow-pop /* 弹出层阴影 */
|
|
288
|
+
```
|
|
289
|
+
|
|
290
|
+
#### 过渡动画
|
|
291
|
+
|
|
292
|
+
```css
|
|
293
|
+
/* 过渡动画 */
|
|
294
|
+
--ui-transition-fast /* 快速过渡 */
|
|
295
|
+
--ui-transition-base /* 基础过渡 */
|
|
296
|
+
```
|
|
297
|
+
|
|
298
|
+
#### 布局
|
|
299
|
+
|
|
300
|
+
```css
|
|
301
|
+
/* 布局 */
|
|
302
|
+
--ui-layout-shell-bg /* 布局壳背景渐变 */
|
|
97
303
|
```
|
|
98
304
|
|
|
99
305
|
### AI Usage Guidelines
|