listpage-next 0.0.245 → 0.0.246
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/dist/ui/Menu/SiderItem.d.ts +21 -0
- package/dist/ui/Menu/SiderItem.js +81 -0
- package/dist/ui/Menu/index.d.ts +10 -0
- package/dist/ui/Menu/index.js +42 -0
- package/dist/ui/index.d.ts +1 -0
- package/dist/ui/index.js +2 -1
- package/dist/ui.css +199 -0
- package/package.json +1 -1
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface MenuItem {
|
|
3
|
+
id: string;
|
|
4
|
+
label: string;
|
|
5
|
+
icon?: React.ReactNode;
|
|
6
|
+
path?: string;
|
|
7
|
+
children?: MenuItem[];
|
|
8
|
+
badge?: number | string;
|
|
9
|
+
}
|
|
10
|
+
interface InternalSidebarItemProps {
|
|
11
|
+
item: MenuItem;
|
|
12
|
+
isCollapsed: boolean;
|
|
13
|
+
isActive: boolean;
|
|
14
|
+
activePath?: string;
|
|
15
|
+
expandedIds: string[];
|
|
16
|
+
onToggleExpand: (id: string) => void;
|
|
17
|
+
onNavigate?: (path: string) => void;
|
|
18
|
+
level?: number;
|
|
19
|
+
}
|
|
20
|
+
export declare const SidebarItem: React.FC<InternalSidebarItemProps>;
|
|
21
|
+
export {};
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import "react";
|
|
3
|
+
import { ChevronDown, Circle } from "lucide-react";
|
|
4
|
+
const SidebarItem = ({ item, isCollapsed, isActive, activePath, expandedIds, onToggleExpand, onNavigate, level = 0 })=>{
|
|
5
|
+
const hasChildren = item.children && item.children.length > 0;
|
|
6
|
+
const isExpanded = expandedIds.includes(item.id);
|
|
7
|
+
const handleClick = (e)=>{
|
|
8
|
+
e.stopPropagation();
|
|
9
|
+
if (hasChildren) onToggleExpand(item.id);
|
|
10
|
+
else if (item.path) onNavigate?.(item.path);
|
|
11
|
+
};
|
|
12
|
+
const paddingLeft = isCollapsed ? '0' : `${12 * level + 12}px`;
|
|
13
|
+
return /*#__PURE__*/ jsxs("div", {
|
|
14
|
+
className: "w-full select-none mb-0.5",
|
|
15
|
+
children: [
|
|
16
|
+
/*#__PURE__*/ jsxs("div", {
|
|
17
|
+
onClick: handleClick,
|
|
18
|
+
className: `
|
|
19
|
+
relative flex items-center justify-between py-1.5 px-2 mx-2 rounded-md cursor-pointer transition-all duration-200 group
|
|
20
|
+
${isActive ? 'bg-[#007AFF] text-white shadow-sm' : 'text-neutral-400 hover:bg-white/10 hover:text-neutral-200'}
|
|
21
|
+
${isCollapsed ? 'justify-center mx-2 px-0' : ''}
|
|
22
|
+
`,
|
|
23
|
+
style: {
|
|
24
|
+
paddingLeft: isCollapsed ? 0 : paddingLeft,
|
|
25
|
+
paddingRight: isCollapsed ? 0 : '8px'
|
|
26
|
+
},
|
|
27
|
+
title: item.label,
|
|
28
|
+
children: [
|
|
29
|
+
/*#__PURE__*/ jsxs("div", {
|
|
30
|
+
className: `flex items-center ${isCollapsed ? 'justify-center w-full' : 'gap-2.5 overflow-hidden'}`,
|
|
31
|
+
children: [
|
|
32
|
+
/*#__PURE__*/ jsx("span", {
|
|
33
|
+
className: `shrink-0 transition-opacity ${isActive ? 'opacity-100' : 'opacity-70 group-hover:opacity-100'}`,
|
|
34
|
+
children: item.icon ? /*#__PURE__*/ jsx("div", {
|
|
35
|
+
className: `${isActive ? 'text-white' : ''}`,
|
|
36
|
+
children: item.icon
|
|
37
|
+
}) : /*#__PURE__*/ jsx(Circle, {
|
|
38
|
+
size: 4,
|
|
39
|
+
className: isActive ? 'fill-current text-white' : 'text-neutral-500'
|
|
40
|
+
})
|
|
41
|
+
}),
|
|
42
|
+
!isCollapsed && /*#__PURE__*/ jsx("span", {
|
|
43
|
+
className: `truncate text-[13px] leading-none ${isActive ? 'font-medium' : 'font-normal'}`,
|
|
44
|
+
children: item.label
|
|
45
|
+
})
|
|
46
|
+
]
|
|
47
|
+
}),
|
|
48
|
+
!isCollapsed && /*#__PURE__*/ jsxs("div", {
|
|
49
|
+
className: "flex items-center gap-2",
|
|
50
|
+
children: [
|
|
51
|
+
item.badge && /*#__PURE__*/ jsx("span", {
|
|
52
|
+
className: `text-[10px] px-1.5 py-px rounded-full font-medium ${isActive ? 'bg-white/20 text-white' : 'bg-white/10 text-neutral-400'}`,
|
|
53
|
+
children: item.badge
|
|
54
|
+
}),
|
|
55
|
+
hasChildren && /*#__PURE__*/ jsx("span", {
|
|
56
|
+
className: `transition-transform duration-200 ${isExpanded ? 'rotate-180' : ''} ${isActive ? 'text-white/70' : 'text-neutral-600'}`,
|
|
57
|
+
children: /*#__PURE__*/ jsx(ChevronDown, {
|
|
58
|
+
size: 12
|
|
59
|
+
})
|
|
60
|
+
})
|
|
61
|
+
]
|
|
62
|
+
})
|
|
63
|
+
]
|
|
64
|
+
}),
|
|
65
|
+
hasChildren && !isCollapsed && /*#__PURE__*/ jsx("div", {
|
|
66
|
+
className: `overflow-hidden transition-all duration-300 ease-in-out ${isExpanded ? 'max-h-[500px] opacity-100' : 'max-h-0 opacity-0'}`,
|
|
67
|
+
children: item.children?.map((child)=>/*#__PURE__*/ jsx(SidebarItem, {
|
|
68
|
+
item: child,
|
|
69
|
+
isCollapsed: isCollapsed,
|
|
70
|
+
isActive: child.path === activePath,
|
|
71
|
+
activePath: activePath,
|
|
72
|
+
expandedIds: expandedIds,
|
|
73
|
+
onToggleExpand: onToggleExpand,
|
|
74
|
+
onNavigate: onNavigate,
|
|
75
|
+
level: level + 1
|
|
76
|
+
}, child.id))
|
|
77
|
+
})
|
|
78
|
+
]
|
|
79
|
+
});
|
|
80
|
+
};
|
|
81
|
+
export { SidebarItem };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { MenuItem } from './SiderItem';
|
|
2
|
+
export interface MenuProps {
|
|
3
|
+
title?: string;
|
|
4
|
+
items: MenuItem[];
|
|
5
|
+
isCollapsed?: boolean;
|
|
6
|
+
activePath?: string;
|
|
7
|
+
defaultActivePath?: string;
|
|
8
|
+
onNavigate?: (path: string) => void;
|
|
9
|
+
}
|
|
10
|
+
export declare const Menu: (props: MenuProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from "react";
|
|
3
|
+
import { SidebarItem } from "./SiderItem.js";
|
|
4
|
+
import { useControllableValue } from "ahooks";
|
|
5
|
+
const Menu = (props)=>{
|
|
6
|
+
const { items, isCollapsed, title } = props;
|
|
7
|
+
const [activePath, setActivePath] = useControllableValue(props, {
|
|
8
|
+
valuePropName: 'activePath',
|
|
9
|
+
trigger: 'onNavigate',
|
|
10
|
+
defaultValuePropName: 'defaultActivePath',
|
|
11
|
+
defaultValue: ''
|
|
12
|
+
});
|
|
13
|
+
const [expandedIds, setExpandedIds] = useState([]);
|
|
14
|
+
const handleToggleExpand = (id)=>{
|
|
15
|
+
setExpandedIds((prev)=>prev.includes(id) ? prev.filter((item)=>item !== id) : [
|
|
16
|
+
...prev,
|
|
17
|
+
id
|
|
18
|
+
]);
|
|
19
|
+
};
|
|
20
|
+
return /*#__PURE__*/ jsxs("div", {
|
|
21
|
+
className: "flex-1 overflow-y-auto overflow-x-hidden py-2 px-2 scrollbar-hide",
|
|
22
|
+
children: [
|
|
23
|
+
!isCollapsed && title && /*#__PURE__*/ jsx("div", {
|
|
24
|
+
className: "px-3 mb-2 mt-2 text-[11px] font-medium text-neutral-500 uppercase tracking-widest",
|
|
25
|
+
children: "菜单"
|
|
26
|
+
}),
|
|
27
|
+
/*#__PURE__*/ jsx("nav", {
|
|
28
|
+
className: "space-y-0.5",
|
|
29
|
+
children: items.map((item)=>/*#__PURE__*/ jsx(SidebarItem, {
|
|
30
|
+
item: item,
|
|
31
|
+
isCollapsed: isCollapsed ?? false,
|
|
32
|
+
isActive: item.path === activePath,
|
|
33
|
+
activePath: activePath,
|
|
34
|
+
expandedIds: expandedIds,
|
|
35
|
+
onToggleExpand: handleToggleExpand,
|
|
36
|
+
onNavigate: setActivePath
|
|
37
|
+
}, item.id))
|
|
38
|
+
})
|
|
39
|
+
]
|
|
40
|
+
});
|
|
41
|
+
};
|
|
42
|
+
export { Menu };
|
package/dist/ui/index.d.ts
CHANGED
|
@@ -3,3 +3,4 @@ export { Button, type ButtonProps } from './Button';
|
|
|
3
3
|
export { LogPreview, type LogPreviewProps, type LogEntry } from './LogPreview';
|
|
4
4
|
export { StatusTag, type StatusTagProps } from './StatusTag';
|
|
5
5
|
export { Tabs, type TabsProps } from './Tabs';
|
|
6
|
+
export { Menu, type MenuProps } from './Menu';
|
package/dist/ui/index.js
CHANGED
|
@@ -3,4 +3,5 @@ import { Button } from "./Button/index.js";
|
|
|
3
3
|
import { LogPreview } from "./LogPreview/index.js";
|
|
4
4
|
import { StatusTag } from "./StatusTag/index.js";
|
|
5
5
|
import { Tabs } from "./Tabs/index.js";
|
|
6
|
-
|
|
6
|
+
import { Menu } from "./Menu/index.js";
|
|
7
|
+
export { Button, LogPreview, Menu, PromptEditor, StatusTag, Tabs };
|
package/dist/ui.css
CHANGED
|
@@ -56,8 +56,10 @@
|
|
|
56
56
|
--color-gray-950: oklch(13% 0.028 261.692);
|
|
57
57
|
--color-zinc-400: oklch(70.5% 0.015 286.067);
|
|
58
58
|
--color-zinc-500: oklch(55.2% 0.016 285.938);
|
|
59
|
+
--color-neutral-200: oklch(92.2% 0 0);
|
|
59
60
|
--color-neutral-400: oklch(70.8% 0 0);
|
|
60
61
|
--color-neutral-500: oklch(55.6% 0 0);
|
|
62
|
+
--color-neutral-600: oklch(43.9% 0 0);
|
|
61
63
|
--color-stone-400: oklch(70.9% 0.01 56.259);
|
|
62
64
|
--color-stone-500: oklch(55.3% 0.013 58.071);
|
|
63
65
|
--color-white: #fff;
|
|
@@ -66,9 +68,13 @@
|
|
|
66
68
|
--text-xs--line-height: calc(1 / 0.75);
|
|
67
69
|
--text-sm: 0.875rem;
|
|
68
70
|
--text-sm--line-height: calc(1.25 / 0.875);
|
|
71
|
+
--font-weight-normal: 400;
|
|
69
72
|
--font-weight-medium: 500;
|
|
70
73
|
--font-weight-bold: 700;
|
|
74
|
+
--tracking-widest: 0.1em;
|
|
75
|
+
--radius-md: 0.375rem;
|
|
71
76
|
--radius-lg: 0.5rem;
|
|
77
|
+
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
72
78
|
--animate-spin: spin 1s linear infinite;
|
|
73
79
|
--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
74
80
|
--default-transition-duration: 150ms;
|
|
@@ -253,12 +259,24 @@
|
|
|
253
259
|
max-width: 96rem;
|
|
254
260
|
}
|
|
255
261
|
}
|
|
262
|
+
.mx-2 {
|
|
263
|
+
margin-inline: calc(var(--spacing) * 2);
|
|
264
|
+
}
|
|
265
|
+
.mt-2 {
|
|
266
|
+
margin-top: calc(var(--spacing) * 2);
|
|
267
|
+
}
|
|
256
268
|
.mr-1\.5 {
|
|
257
269
|
margin-right: calc(var(--spacing) * 1.5);
|
|
258
270
|
}
|
|
271
|
+
.mb-0\.5 {
|
|
272
|
+
margin-bottom: calc(var(--spacing) * 0.5);
|
|
273
|
+
}
|
|
259
274
|
.mb-1 {
|
|
260
275
|
margin-bottom: calc(var(--spacing) * 1);
|
|
261
276
|
}
|
|
277
|
+
.mb-2 {
|
|
278
|
+
margin-bottom: calc(var(--spacing) * 2);
|
|
279
|
+
}
|
|
262
280
|
.block {
|
|
263
281
|
display: block;
|
|
264
282
|
}
|
|
@@ -286,6 +304,12 @@
|
|
|
286
304
|
.h-full {
|
|
287
305
|
height: 100%;
|
|
288
306
|
}
|
|
307
|
+
.max-h-0 {
|
|
308
|
+
max-height: calc(var(--spacing) * 0);
|
|
309
|
+
}
|
|
310
|
+
.max-h-\[500px\] {
|
|
311
|
+
max-height: 500px;
|
|
312
|
+
}
|
|
289
313
|
.w-1\.5 {
|
|
290
314
|
width: calc(var(--spacing) * 1.5);
|
|
291
315
|
}
|
|
@@ -295,6 +319,9 @@
|
|
|
295
319
|
.w-12 {
|
|
296
320
|
width: calc(var(--spacing) * 12);
|
|
297
321
|
}
|
|
322
|
+
.w-full {
|
|
323
|
+
width: 100%;
|
|
324
|
+
}
|
|
298
325
|
.flex-1 {
|
|
299
326
|
flex: 1;
|
|
300
327
|
}
|
|
@@ -313,6 +340,9 @@
|
|
|
313
340
|
.border-collapse {
|
|
314
341
|
border-collapse: collapse;
|
|
315
342
|
}
|
|
343
|
+
.rotate-180 {
|
|
344
|
+
rotate: 180deg;
|
|
345
|
+
}
|
|
316
346
|
.transform {
|
|
317
347
|
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
|
|
318
348
|
}
|
|
@@ -334,12 +364,28 @@
|
|
|
334
364
|
.items-center {
|
|
335
365
|
align-items: center;
|
|
336
366
|
}
|
|
367
|
+
.justify-between {
|
|
368
|
+
justify-content: space-between;
|
|
369
|
+
}
|
|
370
|
+
.justify-center {
|
|
371
|
+
justify-content: center;
|
|
372
|
+
}
|
|
337
373
|
.gap-2 {
|
|
338
374
|
gap: calc(var(--spacing) * 2);
|
|
339
375
|
}
|
|
376
|
+
.gap-2\.5 {
|
|
377
|
+
gap: calc(var(--spacing) * 2.5);
|
|
378
|
+
}
|
|
340
379
|
.gap-3 {
|
|
341
380
|
gap: calc(var(--spacing) * 3);
|
|
342
381
|
}
|
|
382
|
+
.space-y-0\.5 {
|
|
383
|
+
:where(& > :not(:last-child)) {
|
|
384
|
+
--tw-space-y-reverse: 0;
|
|
385
|
+
margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
|
|
386
|
+
margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
|
|
387
|
+
}
|
|
388
|
+
}
|
|
343
389
|
.space-x-1 {
|
|
344
390
|
:where(& > :not(:last-child)) {
|
|
345
391
|
--tw-space-x-reverse: 0;
|
|
@@ -354,12 +400,20 @@
|
|
|
354
400
|
margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
|
|
355
401
|
}
|
|
356
402
|
}
|
|
403
|
+
.truncate {
|
|
404
|
+
overflow: hidden;
|
|
405
|
+
text-overflow: ellipsis;
|
|
406
|
+
white-space: nowrap;
|
|
407
|
+
}
|
|
357
408
|
.overflow-auto {
|
|
358
409
|
overflow: auto;
|
|
359
410
|
}
|
|
360
411
|
.overflow-hidden {
|
|
361
412
|
overflow: hidden;
|
|
362
413
|
}
|
|
414
|
+
.overflow-x-hidden {
|
|
415
|
+
overflow-x: hidden;
|
|
416
|
+
}
|
|
363
417
|
.overflow-y-auto {
|
|
364
418
|
overflow-y: auto;
|
|
365
419
|
}
|
|
@@ -372,6 +426,9 @@
|
|
|
372
426
|
.rounded-lg {
|
|
373
427
|
border-radius: var(--radius-lg);
|
|
374
428
|
}
|
|
429
|
+
.rounded-md {
|
|
430
|
+
border-radius: var(--radius-md);
|
|
431
|
+
}
|
|
375
432
|
.border {
|
|
376
433
|
border-style: var(--tw-border-style);
|
|
377
434
|
border-width: 1px;
|
|
@@ -531,6 +588,9 @@
|
|
|
531
588
|
.bg-\[\#0B1120\] {
|
|
532
589
|
background-color: #0B1120;
|
|
533
590
|
}
|
|
591
|
+
.bg-\[\#007AFF\] {
|
|
592
|
+
background-color: #007AFF;
|
|
593
|
+
}
|
|
534
594
|
.bg-amber-400\/10 {
|
|
535
595
|
background-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 10%, transparent);
|
|
536
596
|
@supports (color: color-mix(in lab, red, red)) {
|
|
@@ -726,6 +786,18 @@
|
|
|
726
786
|
.bg-violet-500 {
|
|
727
787
|
background-color: var(--color-violet-500);
|
|
728
788
|
}
|
|
789
|
+
.bg-white\/10 {
|
|
790
|
+
background-color: color-mix(in srgb, #fff 10%, transparent);
|
|
791
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
792
|
+
background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
|
|
793
|
+
}
|
|
794
|
+
}
|
|
795
|
+
.bg-white\/20 {
|
|
796
|
+
background-color: color-mix(in srgb, #fff 20%, transparent);
|
|
797
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
798
|
+
background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
|
|
799
|
+
}
|
|
800
|
+
}
|
|
729
801
|
.bg-yellow-400\/10 {
|
|
730
802
|
background-color: color-mix(in srgb, oklch(85.2% 0.199 91.936) 10%, transparent);
|
|
731
803
|
@supports (color: color-mix(in lab, red, red)) {
|
|
@@ -744,12 +816,24 @@
|
|
|
744
816
|
.bg-zinc-500 {
|
|
745
817
|
background-color: var(--color-zinc-500);
|
|
746
818
|
}
|
|
819
|
+
.fill-current {
|
|
820
|
+
fill: currentcolor;
|
|
821
|
+
}
|
|
747
822
|
.p-0\.5 {
|
|
748
823
|
padding: calc(var(--spacing) * 0.5);
|
|
749
824
|
}
|
|
750
825
|
.p-4 {
|
|
751
826
|
padding: calc(var(--spacing) * 4);
|
|
752
827
|
}
|
|
828
|
+
.px-0 {
|
|
829
|
+
padding-inline: calc(var(--spacing) * 0);
|
|
830
|
+
}
|
|
831
|
+
.px-1\.5 {
|
|
832
|
+
padding-inline: calc(var(--spacing) * 1.5);
|
|
833
|
+
}
|
|
834
|
+
.px-2 {
|
|
835
|
+
padding-inline: calc(var(--spacing) * 2);
|
|
836
|
+
}
|
|
753
837
|
.px-2\.5 {
|
|
754
838
|
padding-inline: calc(var(--spacing) * 2.5);
|
|
755
839
|
}
|
|
@@ -774,6 +858,9 @@
|
|
|
774
858
|
.py-2\.5 {
|
|
775
859
|
padding-block: calc(var(--spacing) * 2.5);
|
|
776
860
|
}
|
|
861
|
+
.py-px {
|
|
862
|
+
padding-block: 1px;
|
|
863
|
+
}
|
|
777
864
|
.text-center {
|
|
778
865
|
text-align: center;
|
|
779
866
|
}
|
|
@@ -788,6 +875,19 @@
|
|
|
788
875
|
font-size: var(--text-xs);
|
|
789
876
|
line-height: var(--tw-leading, var(--text-xs--line-height));
|
|
790
877
|
}
|
|
878
|
+
.text-\[10px\] {
|
|
879
|
+
font-size: 10px;
|
|
880
|
+
}
|
|
881
|
+
.text-\[11px\] {
|
|
882
|
+
font-size: 11px;
|
|
883
|
+
}
|
|
884
|
+
.text-\[13px\] {
|
|
885
|
+
font-size: 13px;
|
|
886
|
+
}
|
|
887
|
+
.leading-none {
|
|
888
|
+
--tw-leading: 1;
|
|
889
|
+
line-height: 1;
|
|
890
|
+
}
|
|
791
891
|
.font-bold {
|
|
792
892
|
--tw-font-weight: var(--font-weight-bold);
|
|
793
893
|
font-weight: var(--font-weight-bold);
|
|
@@ -796,6 +896,14 @@
|
|
|
796
896
|
--tw-font-weight: var(--font-weight-medium);
|
|
797
897
|
font-weight: var(--font-weight-medium);
|
|
798
898
|
}
|
|
899
|
+
.font-normal {
|
|
900
|
+
--tw-font-weight: var(--font-weight-normal);
|
|
901
|
+
font-weight: var(--font-weight-normal);
|
|
902
|
+
}
|
|
903
|
+
.tracking-widest {
|
|
904
|
+
--tw-tracking: var(--tracking-widest);
|
|
905
|
+
letter-spacing: var(--tracking-widest);
|
|
906
|
+
}
|
|
799
907
|
.break-all {
|
|
800
908
|
word-break: break-all;
|
|
801
909
|
}
|
|
@@ -847,6 +955,12 @@
|
|
|
847
955
|
.text-neutral-400 {
|
|
848
956
|
color: var(--color-neutral-400);
|
|
849
957
|
}
|
|
958
|
+
.text-neutral-500 {
|
|
959
|
+
color: var(--color-neutral-500);
|
|
960
|
+
}
|
|
961
|
+
.text-neutral-600 {
|
|
962
|
+
color: var(--color-neutral-600);
|
|
963
|
+
}
|
|
850
964
|
.text-orange-400 {
|
|
851
965
|
color: var(--color-orange-400);
|
|
852
966
|
}
|
|
@@ -886,6 +1000,12 @@
|
|
|
886
1000
|
.text-white {
|
|
887
1001
|
color: var(--color-white);
|
|
888
1002
|
}
|
|
1003
|
+
.text-white\/70 {
|
|
1004
|
+
color: color-mix(in srgb, #fff 70%, transparent);
|
|
1005
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
1006
|
+
color: color-mix(in oklab, var(--color-white) 70%, transparent);
|
|
1007
|
+
}
|
|
1008
|
+
}
|
|
889
1009
|
.text-yellow-400 {
|
|
890
1010
|
color: var(--color-yellow-400);
|
|
891
1011
|
}
|
|
@@ -895,13 +1015,29 @@
|
|
|
895
1015
|
.text-zinc-400 {
|
|
896
1016
|
color: var(--color-zinc-400);
|
|
897
1017
|
}
|
|
1018
|
+
.uppercase {
|
|
1019
|
+
text-transform: uppercase;
|
|
1020
|
+
}
|
|
898
1021
|
.italic {
|
|
899
1022
|
font-style: italic;
|
|
900
1023
|
}
|
|
1024
|
+
.opacity-0 {
|
|
1025
|
+
opacity: 0%;
|
|
1026
|
+
}
|
|
1027
|
+
.opacity-70 {
|
|
1028
|
+
opacity: 70%;
|
|
1029
|
+
}
|
|
1030
|
+
.opacity-100 {
|
|
1031
|
+
opacity: 100%;
|
|
1032
|
+
}
|
|
901
1033
|
.shadow-lg {
|
|
902
1034
|
--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
|
903
1035
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
904
1036
|
}
|
|
1037
|
+
.shadow-sm {
|
|
1038
|
+
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
|
1039
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
1040
|
+
}
|
|
905
1041
|
.shadow-blue-900\/20 {
|
|
906
1042
|
--tw-shadow-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 20%, transparent);
|
|
907
1043
|
@supports (color: color-mix(in lab, red, red)) {
|
|
@@ -930,14 +1066,39 @@
|
|
|
930
1066
|
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
931
1067
|
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
932
1068
|
}
|
|
1069
|
+
.transition-opacity {
|
|
1070
|
+
transition-property: opacity;
|
|
1071
|
+
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
1072
|
+
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
1073
|
+
}
|
|
1074
|
+
.transition-transform {
|
|
1075
|
+
transition-property: transform, translate, scale, rotate;
|
|
1076
|
+
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
1077
|
+
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
1078
|
+
}
|
|
1079
|
+
.duration-200 {
|
|
1080
|
+
--tw-duration: 200ms;
|
|
1081
|
+
transition-duration: 200ms;
|
|
1082
|
+
}
|
|
933
1083
|
.duration-300 {
|
|
934
1084
|
--tw-duration: 300ms;
|
|
935
1085
|
transition-duration: 300ms;
|
|
936
1086
|
}
|
|
1087
|
+
.ease-in-out {
|
|
1088
|
+
--tw-ease: var(--ease-in-out);
|
|
1089
|
+
transition-timing-function: var(--ease-in-out);
|
|
1090
|
+
}
|
|
937
1091
|
.select-none {
|
|
938
1092
|
-webkit-user-select: none;
|
|
939
1093
|
user-select: none;
|
|
940
1094
|
}
|
|
1095
|
+
.group-hover\:opacity-100 {
|
|
1096
|
+
&:is(:where(.group):hover *) {
|
|
1097
|
+
@media (hover: hover) {
|
|
1098
|
+
opacity: 100%;
|
|
1099
|
+
}
|
|
1100
|
+
}
|
|
1101
|
+
}
|
|
941
1102
|
.hover\:scale-\[1\.02\] {
|
|
942
1103
|
&:hover {
|
|
943
1104
|
@media (hover: hover) {
|
|
@@ -979,6 +1140,16 @@
|
|
|
979
1140
|
}
|
|
980
1141
|
}
|
|
981
1142
|
}
|
|
1143
|
+
.hover\:bg-white\/10 {
|
|
1144
|
+
&:hover {
|
|
1145
|
+
@media (hover: hover) {
|
|
1146
|
+
background-color: color-mix(in srgb, #fff 10%, transparent);
|
|
1147
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
1148
|
+
background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
|
|
1149
|
+
}
|
|
1150
|
+
}
|
|
1151
|
+
}
|
|
1152
|
+
}
|
|
982
1153
|
.hover\:text-gray-300 {
|
|
983
1154
|
&:hover {
|
|
984
1155
|
@media (hover: hover) {
|
|
@@ -986,6 +1157,13 @@
|
|
|
986
1157
|
}
|
|
987
1158
|
}
|
|
988
1159
|
}
|
|
1160
|
+
.hover\:text-neutral-200 {
|
|
1161
|
+
&:hover {
|
|
1162
|
+
@media (hover: hover) {
|
|
1163
|
+
color: var(--color-neutral-200);
|
|
1164
|
+
}
|
|
1165
|
+
}
|
|
1166
|
+
}
|
|
989
1167
|
.hover\:text-white {
|
|
990
1168
|
&:hover {
|
|
991
1169
|
@media (hover: hover) {
|
|
@@ -1068,6 +1246,11 @@
|
|
|
1068
1246
|
syntax: "*";
|
|
1069
1247
|
inherits: false;
|
|
1070
1248
|
}
|
|
1249
|
+
@property --tw-space-y-reverse {
|
|
1250
|
+
syntax: "*";
|
|
1251
|
+
inherits: false;
|
|
1252
|
+
initial-value: 0;
|
|
1253
|
+
}
|
|
1071
1254
|
@property --tw-space-x-reverse {
|
|
1072
1255
|
syntax: "*";
|
|
1073
1256
|
inherits: false;
|
|
@@ -1078,10 +1261,18 @@
|
|
|
1078
1261
|
inherits: false;
|
|
1079
1262
|
initial-value: solid;
|
|
1080
1263
|
}
|
|
1264
|
+
@property --tw-leading {
|
|
1265
|
+
syntax: "*";
|
|
1266
|
+
inherits: false;
|
|
1267
|
+
}
|
|
1081
1268
|
@property --tw-font-weight {
|
|
1082
1269
|
syntax: "*";
|
|
1083
1270
|
inherits: false;
|
|
1084
1271
|
}
|
|
1272
|
+
@property --tw-tracking {
|
|
1273
|
+
syntax: "*";
|
|
1274
|
+
inherits: false;
|
|
1275
|
+
}
|
|
1085
1276
|
@property --tw-shadow {
|
|
1086
1277
|
syntax: "*";
|
|
1087
1278
|
inherits: false;
|
|
@@ -1209,6 +1400,10 @@
|
|
|
1209
1400
|
syntax: "*";
|
|
1210
1401
|
inherits: false;
|
|
1211
1402
|
}
|
|
1403
|
+
@property --tw-ease {
|
|
1404
|
+
syntax: "*";
|
|
1405
|
+
inherits: false;
|
|
1406
|
+
}
|
|
1212
1407
|
@keyframes spin {
|
|
1213
1408
|
to {
|
|
1214
1409
|
transform: rotate(360deg);
|
|
@@ -1227,9 +1422,12 @@
|
|
|
1227
1422
|
--tw-rotate-z: initial;
|
|
1228
1423
|
--tw-skew-x: initial;
|
|
1229
1424
|
--tw-skew-y: initial;
|
|
1425
|
+
--tw-space-y-reverse: 0;
|
|
1230
1426
|
--tw-space-x-reverse: 0;
|
|
1231
1427
|
--tw-border-style: solid;
|
|
1428
|
+
--tw-leading: initial;
|
|
1232
1429
|
--tw-font-weight: initial;
|
|
1430
|
+
--tw-tracking: initial;
|
|
1233
1431
|
--tw-shadow: 0 0 #0000;
|
|
1234
1432
|
--tw-shadow-color: initial;
|
|
1235
1433
|
--tw-shadow-alpha: 100%;
|
|
@@ -1259,6 +1457,7 @@
|
|
|
1259
1457
|
--tw-drop-shadow-alpha: 100%;
|
|
1260
1458
|
--tw-drop-shadow-size: initial;
|
|
1261
1459
|
--tw-duration: initial;
|
|
1460
|
+
--tw-ease: initial;
|
|
1262
1461
|
}
|
|
1263
1462
|
}
|
|
1264
1463
|
}
|