@scribdown/ui-handdrawn 0.2.0 → 0.2.2
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="6" viewBox="0 0 200 6" preserveAspectRatio="none">
|
|
2
2
|
<g fill="none" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
3
|
-
<path d="M-0.8885389623697847
|
|
4
|
-
<path d="M19.680227263411506
|
|
3
|
+
<path d="M-0.8885389623697847 3.835747448122129 C5.98063496722219 3.023836115614201, 26.163666460150857 3.3836979418154813, 39.665068303281444 3.2720676984544848 C53.16647014641203 3.160437455093488, 66.7766827083969 2.1343503594553717, 80.11987209641376 2.165965987956151 C93.46306148443061 2.1975816164569304, 106.29286793692347 3.454849899923429, 119.72420463138259 3.4617614694591614 C133.1555413258417 3.468673038994894, 147.18285253716945 2.1781550389683497, 160.7078922631685 2.207435405170545 C174.23293198916755 2.23671577137274, 194.21855270786523 3.414428028380498, 200.87444298737682 3.637443666672334" />
|
|
4
|
+
<path d="M19.680227263411506 3.150232136854902 C29.60333365944421 2.7579639204105155, 59.151220776611524 4.316996703819475, 78.98881145630342 4.451140555848057 C98.82640213599532 4.585284407876639, 118.8756678476671 3.468230293965381, 138.7057713415629 3.355095249026393 C158.53587483545869 3.2419602040874045, 188.1445200029088 3.586171521686224, 197.96943241967818 3.772330286214128" />
|
|
5
5
|
</g>
|
|
6
6
|
</svg>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="66" height="48" viewBox="8.5 0 66 48" overflow="visible" role="img" aria-label="handdrawn tag">
|
|
2
2
|
<style>
|
|
3
3
|
.tag-fill-rect,
|
|
4
4
|
.tag-fill-triangle {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="39.903" height="48" viewBox="54 0 39.903 48" role="img" aria-label="handdrawn tag">
|
|
2
2
|
<style>
|
|
3
3
|
.tag-fill-rect,
|
|
4
4
|
.tag-fill-triangle {
|
|
@@ -46,6 +46,7 @@
|
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
48
|
</style>
|
|
49
|
-
|
|
49
|
+
<!-- 关键步骤：左端笔画以不同距离越过切片边界，裁切后形成自然、不整齐的拼接起笔。 -->
|
|
50
|
+
<path class="tag-fill-triangle" d="M58.4237706752122 9.26480130717802 C66.4237706752122 12.56480130717802, 84.2237706752122 18.86480130717802, 91.1067660103552 22.50208585606888 M62.15509930142562 12.548700574279295 C69.75509930142562 16.148700574279295, 84.53509930142562 21.248700574279295, 90.8853535654489 25.101957783615216 M57.17104369940784 15.19273557353439 C65.57104369940784 18.89273557353439, 83.45104369940784 23.89273557353439, 89.33360597220305 27.2298116854642 M60.23012385428177 18.142944509685588 C68.93012385428177 21.642944509685588, 80.73012385428177 26.242944509685588, 87.02022981597217 29.524242458629196 M55.63638699292616 21.654910013385663 C63.23638699292616 24.654910013385663, 78.93638699292616 28.754910013385663, 84.80078985781608 31.356022306177536 M60.38331095065755 24.689056984875517 C66.98331095065755 27.289056984875517, 76.28331095065755 30.689056984875517, 81.40515983046376 33.11584017612848 M58.15178897645438 27.521840223328377 C65.45178897645438 29.821840223328377, 74.55178897645438 32.32184022332838, 77.0673001471015 34.83793279051462 M64.09809519127251 30.42297204475464 C67.59809519127251 31.82297204475464, 72.89809519127251 33.92297204475464, 73.4469873344831 36.961023081565735 M61.67251050574944 33.40461716098325 C66.07251050574944 34.10461716098325, 71.27251050574944 35.60461716098325, 70.4237706752122 38.26480130717802" />
|
|
50
51
|
|
|
51
52
|
</svg>
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
48
|
</style>
|
|
49
|
-
<path class="tag-outline-triangle" d="M67.81899030609057 8.
|
|
50
|
-
<path class="tag-outline-triangle" d="M91.00484327096493 24.589532747678458
|
|
49
|
+
<path class="tag-outline-triangle" d="M67.81899030609057 8.18106529759243 C77.54079624171952 12.693676162540212, 84.65957415774115 21.805816044128733, 91.1067660103552 22.50208585606888 M67.59937126510776 10.550338016962632 C78.38768789225605 15.400502316764324, 85.76194378321408 19.722923510445984, 90.8853535654489 25.101957783615216" />
|
|
50
|
+
<path class="tag-outline-triangle" d="M91.00484327096493 24.589532747678458 C81.15963499819627 31.161803733457344, 77.65431767267874 31.346669881318228, 67.49413215536624 38.5532716838643 M93.00340586742387 23.704626417253166 C83.19385184191401 29.44669538330985, 75.75757446244593 35.71291955639376, 69.36792313596234 38.81769603798166" />
|
|
51
51
|
|
|
52
52
|
</svg>
|
package/src/styles/code.css
CHANGED
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
var(--scribdown-frame-edge-vertical), var(--scribdown-frame-edge-vertical);
|
|
76
76
|
background-position:
|
|
77
77
|
left top,
|
|
78
|
-
|
|
78
|
+
80% bottom,
|
|
79
79
|
left 40%,
|
|
80
80
|
right top;
|
|
81
81
|
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
|
|
@@ -111,7 +111,7 @@
|
|
|
111
111
|
border-radius: inherit;
|
|
112
112
|
pointer-events: none;
|
|
113
113
|
background-image: var(--scribdown-code-block-rect-shadow);
|
|
114
|
-
background-position:
|
|
114
|
+
background-position: left top;
|
|
115
115
|
background-repeat: repeat-x;
|
|
116
116
|
background-size: auto 100%;
|
|
117
117
|
}
|
|
@@ -135,7 +135,7 @@
|
|
|
135
135
|
background-image: var(--scribdown-frame-edge-horizontal);
|
|
136
136
|
background-repeat: repeat-x;
|
|
137
137
|
background-size: var(--scribdown-frame-edge-tile-horizontal);
|
|
138
|
-
background-position:
|
|
138
|
+
background-position: 40% bottom;
|
|
139
139
|
}
|
|
140
140
|
|
|
141
141
|
@supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
|
|
@@ -148,7 +148,7 @@
|
|
|
148
148
|
var(--scribdown-frame-edge-vertical), var(--scribdown-frame-edge-vertical);
|
|
149
149
|
-webkit-mask-position:
|
|
150
150
|
left top,
|
|
151
|
-
|
|
151
|
+
80% bottom,
|
|
152
152
|
left 40%,
|
|
153
153
|
right top;
|
|
154
154
|
-webkit-mask-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
|
|
@@ -163,7 +163,7 @@
|
|
|
163
163
|
var(--scribdown-frame-edge-vertical), var(--scribdown-frame-edge-vertical);
|
|
164
164
|
mask-position:
|
|
165
165
|
left top,
|
|
166
|
-
|
|
166
|
+
80% bottom,
|
|
167
167
|
left 40%,
|
|
168
168
|
right top;
|
|
169
169
|
mask-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
|
|
@@ -180,12 +180,12 @@
|
|
|
180
180
|
background-color: var(--scribdown-code-block-chrome-shadow-fill);
|
|
181
181
|
background-image: none;
|
|
182
182
|
-webkit-mask-image: var(--scribdown-code-block-rect-shadow);
|
|
183
|
-
-webkit-mask-position:
|
|
183
|
+
-webkit-mask-position: left top;
|
|
184
184
|
-webkit-mask-repeat: repeat-x;
|
|
185
185
|
-webkit-mask-size: auto 100%;
|
|
186
186
|
-webkit-mask-mode: alpha;
|
|
187
187
|
mask-image: var(--scribdown-code-block-rect-shadow);
|
|
188
|
-
mask-position:
|
|
188
|
+
mask-position: left top;
|
|
189
189
|
mask-repeat: repeat-x;
|
|
190
190
|
mask-size: auto 100%;
|
|
191
191
|
mask-mode: alpha;
|
|
@@ -197,12 +197,12 @@
|
|
|
197
197
|
-webkit-mask-image: var(--scribdown-frame-edge-horizontal);
|
|
198
198
|
-webkit-mask-repeat: repeat-x;
|
|
199
199
|
-webkit-mask-size: var(--scribdown-frame-edge-tile-horizontal);
|
|
200
|
-
-webkit-mask-position:
|
|
200
|
+
-webkit-mask-position: 40% bottom;
|
|
201
201
|
-webkit-mask-mode: alpha;
|
|
202
202
|
mask-image: var(--scribdown-frame-edge-horizontal);
|
|
203
203
|
mask-repeat: repeat-x;
|
|
204
204
|
mask-size: var(--scribdown-frame-edge-tile-horizontal);
|
|
205
|
-
mask-position:
|
|
205
|
+
mask-position: 40% bottom;
|
|
206
206
|
mask-mode: alpha;
|
|
207
207
|
}
|
|
208
208
|
}
|
package/src/styles/toolbar.css
CHANGED
|
@@ -88,8 +88,7 @@
|
|
|
88
88
|
align-self: stretch;
|
|
89
89
|
margin-right: 2px;
|
|
90
90
|
padding: 0 6px 0 4px;
|
|
91
|
-
border-right: 1px solid
|
|
92
|
-
color-mix(in srgb, var(--scribdown-color-border) 70%, transparent);
|
|
91
|
+
border-right: 1px solid color-mix(in srgb, var(--scribdown-color-border) 70%, transparent);
|
|
93
92
|
/* 关键步骤：可点击跳转到当前章节标题。 */
|
|
94
93
|
cursor: pointer;
|
|
95
94
|
}
|
|
@@ -154,10 +153,12 @@
|
|
|
154
153
|
/* ─── 更多下拉菜单 ──────────────────────────────────────────────── */
|
|
155
154
|
/* 关键步骤：菜单挂在 .scribdown-toolbar 内部，绝对定位到工具栏右下方。 */
|
|
156
155
|
.scribdown-toolbar-menu {
|
|
156
|
+
--scribdown-toolbar-menu-width: 260px;
|
|
157
157
|
position: absolute;
|
|
158
158
|
top: calc(100% + 6px);
|
|
159
159
|
right: 0;
|
|
160
|
-
|
|
160
|
+
width: var(--scribdown-toolbar-menu-width);
|
|
161
|
+
box-sizing: border-box;
|
|
161
162
|
padding: var(--scribdown-space-1);
|
|
162
163
|
background: var(--scribdown-color-surface);
|
|
163
164
|
border: 1.5px solid var(--scribdown-color-border);
|
|
@@ -181,12 +182,13 @@
|
|
|
181
182
|
visibility: visible;
|
|
182
183
|
}
|
|
183
184
|
|
|
184
|
-
/* 单个菜单项：横向 icon +
|
|
185
|
+
/* 单个菜单项：横向 icon + 文本（可能是 button 或 a，链接形态需去掉下划线）。 */
|
|
185
186
|
.scribdown-toolbar-menu-item {
|
|
186
187
|
display: flex;
|
|
187
188
|
align-items: center;
|
|
188
189
|
gap: var(--scribdown-space-2);
|
|
189
190
|
width: 100%;
|
|
191
|
+
box-sizing: border-box;
|
|
190
192
|
padding: 8px 10px;
|
|
191
193
|
background: transparent;
|
|
192
194
|
border: 0;
|
|
@@ -195,6 +197,7 @@
|
|
|
195
197
|
font-family: var(--scribdown-font-body);
|
|
196
198
|
font-size: 14px;
|
|
197
199
|
text-align: left;
|
|
200
|
+
text-decoration: none;
|
|
198
201
|
cursor: pointer;
|
|
199
202
|
transition:
|
|
200
203
|
color var(--scribdown-duration-fast) var(--scribdown-easing-standard),
|
|
@@ -219,11 +222,12 @@
|
|
|
219
222
|
.scribdown-toolbar-menu-group {
|
|
220
223
|
display: flex;
|
|
221
224
|
flex-direction: column;
|
|
225
|
+
/* 语言与宽度列表的容器、间隙均保留可点击指针，避免层级间光标闪回默认样式。 */
|
|
226
|
+
cursor: pointer;
|
|
222
227
|
/* 关键步骤：和上方菜单项之间用一条柔和分隔线划开层级。 */
|
|
223
228
|
margin-top: 4px;
|
|
224
229
|
padding-top: 4px;
|
|
225
|
-
border-top: 1px solid
|
|
226
|
-
color-mix(in srgb, var(--scribdown-color-border) 70%, transparent);
|
|
230
|
+
border-top: 1px solid color-mix(in srgb, var(--scribdown-color-border) 70%, transparent);
|
|
227
231
|
}
|
|
228
232
|
|
|
229
233
|
/* 触发行：复用 .scribdown-toolbar-menu-item 样式，右侧追加当前值 + chevron。 */
|
|
@@ -239,6 +243,7 @@
|
|
|
239
243
|
font-family: var(--scribdown-font-code);
|
|
240
244
|
font-size: 12px;
|
|
241
245
|
color: var(--scribdown-color-text-secondary);
|
|
246
|
+
white-space: nowrap;
|
|
242
247
|
}
|
|
243
248
|
|
|
244
249
|
.scribdown-toolbar-menu-item--select:hover .scribdown-toolbar-menu-select-value {
|
|
@@ -261,6 +266,7 @@
|
|
|
261
266
|
display: flex;
|
|
262
267
|
flex-direction: column;
|
|
263
268
|
gap: 2px;
|
|
269
|
+
cursor: pointer;
|
|
264
270
|
/* 关键步骤：与触发行文字左对齐（icon 16 + gap 8 = 24，再多 4 给视觉缩进）。 */
|
|
265
271
|
padding: 0 4px 0 28px;
|
|
266
272
|
max-height: 0;
|
|
@@ -271,11 +277,54 @@
|
|
|
271
277
|
}
|
|
272
278
|
|
|
273
279
|
.scribdown-toolbar-menu-group.is-open .scribdown-toolbar-menu-group-choices {
|
|
274
|
-
/*
|
|
275
|
-
max-height:
|
|
280
|
+
/* 关键步骤：语言选择器有 11 项，常规视口完整展示；小视口按剩余空间滚动，避免被裁切。 */
|
|
281
|
+
max-height: min(360px, calc(100vh - 190px));
|
|
282
|
+
overflow-y: auto;
|
|
276
283
|
padding: 4px 4px 4px 28px;
|
|
277
284
|
}
|
|
278
285
|
|
|
286
|
+
/* 关键步骤：语言列表始终固定在浮层位置；开合仅过渡可组合属性，避免定位与高度同时跳变。 */
|
|
287
|
+
.scribdown-toolbar-menu-group.scribdown-toolbar-menu-group--language
|
|
288
|
+
.scribdown-toolbar-menu-group-choices {
|
|
289
|
+
position: fixed;
|
|
290
|
+
top: 42px;
|
|
291
|
+
right: calc(var(--scribdown-toolbar-menu-width) + 6px);
|
|
292
|
+
width: 220px;
|
|
293
|
+
max-height: calc(100vh - 54px);
|
|
294
|
+
box-sizing: border-box;
|
|
295
|
+
padding: 4px;
|
|
296
|
+
overflow-y: auto;
|
|
297
|
+
background: var(--scribdown-color-surface);
|
|
298
|
+
border: 1.5px solid var(--scribdown-color-border);
|
|
299
|
+
border-radius: var(--scribdown-radius-md);
|
|
300
|
+
box-shadow: var(--scribdown-shadow-md);
|
|
301
|
+
opacity: 0;
|
|
302
|
+
visibility: hidden;
|
|
303
|
+
pointer-events: none;
|
|
304
|
+
transform: translateX(4px);
|
|
305
|
+
transition:
|
|
306
|
+
opacity var(--scribdown-duration-fast) var(--scribdown-easing-standard),
|
|
307
|
+
transform var(--scribdown-duration-fast) var(--scribdown-easing-standard),
|
|
308
|
+
visibility var(--scribdown-duration-fast) var(--scribdown-easing-standard);
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
.scribdown-toolbar-menu-group.scribdown-toolbar-menu-group--language.is-open
|
|
312
|
+
.scribdown-toolbar-menu-group-choices {
|
|
313
|
+
opacity: 1;
|
|
314
|
+
visibility: visible;
|
|
315
|
+
pointer-events: auto;
|
|
316
|
+
transform: translateX(0);
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
@media (max-width: 560px) {
|
|
320
|
+
.scribdown-toolbar-menu-group.scribdown-toolbar-menu-group--language
|
|
321
|
+
.scribdown-toolbar-menu-group-choices {
|
|
322
|
+
right: 6px;
|
|
323
|
+
left: 6px;
|
|
324
|
+
width: auto;
|
|
325
|
+
}
|
|
326
|
+
}
|
|
327
|
+
|
|
279
328
|
/* 档位选项：垂直列表项，左侧勾选位预留固定宽度，避免选中切换时文本抖动。 */
|
|
280
329
|
.scribdown-toolbar-menu-sub-item {
|
|
281
330
|
display: flex;
|
|
@@ -297,6 +346,13 @@
|
|
|
297
346
|
background var(--scribdown-duration-fast) var(--scribdown-easing-standard);
|
|
298
347
|
}
|
|
299
348
|
|
|
349
|
+
/* 关键步骤：文字与勾选图标继承 button 的 pointer；列表空隙则由 choices 容器承接。 */
|
|
350
|
+
.scribdown-toolbar-menu-sub-item-label,
|
|
351
|
+
.scribdown-toolbar-menu-sub-item-mark,
|
|
352
|
+
.scribdown-toolbar-menu-sub-item-mark svg {
|
|
353
|
+
cursor: inherit;
|
|
354
|
+
}
|
|
355
|
+
|
|
300
356
|
.scribdown-toolbar-menu-sub-item-mark {
|
|
301
357
|
display: inline-flex;
|
|
302
358
|
align-items: center;
|