softbuilders-react-video-player 1.1.62 → 1.1.64
Sign up to get free protection for your applications and to get access to all the features.
- package/LICENSE +21 -21
- package/dist/components/ChapterTooltip/index.tsx +65 -65
- package/dist/components/ControlBar/index.js +5 -2
- package/dist/components/ControlBar/index.js.map +1 -1
- package/dist/components/ControlBar/index.tsx +6 -3
- package/dist/components/CurrentTimeLabel/index.tsx +13 -13
- package/dist/components/Menu/index.tsx +49 -49
- package/dist/components/MenuButton/index.js +1 -1
- package/dist/components/MenuButton/index.js.map +1 -1
- package/dist/components/MenuButton/index.tsx +1 -1
- package/dist/components/NoteTooltip/index.tsx +46 -46
- package/dist/components/Tooltip/index.tsx +16 -16
- package/dist/components/VideoPlayerComponent/provider.tsx +82 -82
- package/dist/index.mjs +6 -3
- package/dist/styles/tailwind.css +126 -126
- package/package.json +1 -1
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2024 masri-softbuilders
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 masri-softbuilders
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
|
@@ -1,65 +1,65 @@
|
|
|
1
|
-
import React, { useEffect, useState } from "react";
|
|
2
|
-
import Tooltip from "../Tooltip";
|
|
3
|
-
import { durationFormater } from "../../utils";
|
|
4
|
-
import { SoftBuildersVideoPlayerChapter } from "../../types";
|
|
5
|
-
import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
|
|
6
|
-
type Chapter = SoftBuildersVideoPlayerChapter & {
|
|
7
|
-
startPercentage: number;
|
|
8
|
-
endPercentage: number;
|
|
9
|
-
};
|
|
10
|
-
type Props = {
|
|
11
|
-
chapter: Chapter;
|
|
12
|
-
};
|
|
13
|
-
const ChapterTooltip = ({ chapter }: Props) => {
|
|
14
|
-
const { player } = useSoftBuildersVideoPlayerContext();
|
|
15
|
-
|
|
16
|
-
const [open, setOpen] = useState(false);
|
|
17
|
-
const { currentTime } = useSoftBuildersVideoPlayerContext();
|
|
18
|
-
|
|
19
|
-
useEffect(() => {
|
|
20
|
-
if (currentTime === Math.floor(chapter.startTime)) {
|
|
21
|
-
setOpen(true);
|
|
22
|
-
|
|
23
|
-
setTimeout(() => {
|
|
24
|
-
setOpen(false);
|
|
25
|
-
}, 5000);
|
|
26
|
-
}
|
|
27
|
-
}, [currentTime, chapter.startTime]);
|
|
28
|
-
|
|
29
|
-
const handleClickChapter = () => {
|
|
30
|
-
player?.currentTime(chapter.startTime);
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
return (
|
|
34
|
-
<div
|
|
35
|
-
id={`ii-section-${chapter.title}`}
|
|
36
|
-
className="sb-flex sb-items-center sb-w-full sb-h-full sb-absolute sb-z-20"
|
|
37
|
-
style={{
|
|
38
|
-
left: `${chapter.startPercentage}%`,
|
|
39
|
-
width: `${chapter.endPercentage - chapter.startPercentage}%`,
|
|
40
|
-
}}
|
|
41
|
-
onMouseEnter={() => setOpen(true)}
|
|
42
|
-
onMouseLeave={() => setOpen(false)}
|
|
43
|
-
>
|
|
44
|
-
<button
|
|
45
|
-
id={`section-${chapter.title}`}
|
|
46
|
-
className="sb-h-full sb-w-full"
|
|
47
|
-
onClick={handleClickChapter}
|
|
48
|
-
>
|
|
49
|
-
<div className="sb-relative sb-flex sb-h-full sb-w-full sb-justify-between sb-items-center">
|
|
50
|
-
<Tooltip open={open}>
|
|
51
|
-
<div className="sb-flex sb-flex-col sb-gap-2 sb-items-center">
|
|
52
|
-
<p>{chapter.title}</p>
|
|
53
|
-
<p className="sb-p-2 sb-bg-[#303030] sb-bg-opacity-50 sb-rounded-md">
|
|
54
|
-
{durationFormater(chapter.startTime)} -{" "}
|
|
55
|
-
{durationFormater(chapter.endTime)}
|
|
56
|
-
</p>
|
|
57
|
-
</div>
|
|
58
|
-
</Tooltip>
|
|
59
|
-
</div>
|
|
60
|
-
</button>
|
|
61
|
-
</div>
|
|
62
|
-
);
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
export default ChapterTooltip;
|
|
1
|
+
import React, { useEffect, useState } from "react";
|
|
2
|
+
import Tooltip from "../Tooltip";
|
|
3
|
+
import { durationFormater } from "../../utils";
|
|
4
|
+
import { SoftBuildersVideoPlayerChapter } from "../../types";
|
|
5
|
+
import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
|
|
6
|
+
type Chapter = SoftBuildersVideoPlayerChapter & {
|
|
7
|
+
startPercentage: number;
|
|
8
|
+
endPercentage: number;
|
|
9
|
+
};
|
|
10
|
+
type Props = {
|
|
11
|
+
chapter: Chapter;
|
|
12
|
+
};
|
|
13
|
+
const ChapterTooltip = ({ chapter }: Props) => {
|
|
14
|
+
const { player } = useSoftBuildersVideoPlayerContext();
|
|
15
|
+
|
|
16
|
+
const [open, setOpen] = useState(false);
|
|
17
|
+
const { currentTime } = useSoftBuildersVideoPlayerContext();
|
|
18
|
+
|
|
19
|
+
useEffect(() => {
|
|
20
|
+
if (currentTime === Math.floor(chapter.startTime)) {
|
|
21
|
+
setOpen(true);
|
|
22
|
+
|
|
23
|
+
setTimeout(() => {
|
|
24
|
+
setOpen(false);
|
|
25
|
+
}, 5000);
|
|
26
|
+
}
|
|
27
|
+
}, [currentTime, chapter.startTime]);
|
|
28
|
+
|
|
29
|
+
const handleClickChapter = () => {
|
|
30
|
+
player?.currentTime(chapter.startTime);
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
return (
|
|
34
|
+
<div
|
|
35
|
+
id={`ii-section-${chapter.title}`}
|
|
36
|
+
className="sb-flex sb-items-center sb-w-full sb-h-full sb-absolute sb-z-20"
|
|
37
|
+
style={{
|
|
38
|
+
left: `${chapter.startPercentage}%`,
|
|
39
|
+
width: `${chapter.endPercentage - chapter.startPercentage}%`,
|
|
40
|
+
}}
|
|
41
|
+
onMouseEnter={() => setOpen(true)}
|
|
42
|
+
onMouseLeave={() => setOpen(false)}
|
|
43
|
+
>
|
|
44
|
+
<button
|
|
45
|
+
id={`section-${chapter.title}`}
|
|
46
|
+
className="sb-h-full sb-w-full"
|
|
47
|
+
onClick={handleClickChapter}
|
|
48
|
+
>
|
|
49
|
+
<div className="sb-relative sb-flex sb-h-full sb-w-full sb-justify-between sb-items-center">
|
|
50
|
+
<Tooltip open={open}>
|
|
51
|
+
<div className="sb-flex sb-flex-col sb-gap-2 sb-items-center">
|
|
52
|
+
<p>{chapter.title}</p>
|
|
53
|
+
<p className="sb-p-2 sb-bg-[#303030] sb-bg-opacity-50 sb-rounded-md">
|
|
54
|
+
{durationFormater(chapter.startTime)} -{" "}
|
|
55
|
+
{durationFormater(chapter.endTime)}
|
|
56
|
+
</p>
|
|
57
|
+
</div>
|
|
58
|
+
</Tooltip>
|
|
59
|
+
</div>
|
|
60
|
+
</button>
|
|
61
|
+
</div>
|
|
62
|
+
);
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
export default ChapterTooltip;
|
|
@@ -66,8 +66,11 @@ const ControlBar = ({ player, isPaused, setIsPaused, duration, notes, chapters,
|
|
|
66
66
|
: { width: "98%" }, className: `flex gap-2 ${width < 400 ? "absolute sb-top-1" : "-sb-translate-y-0 sb-w-full"} hover:sb-w-[45%] `, children: [_jsx(CurrentTimeLabel, {}), _jsx(TimeSliderContainer, { chapters: chapters, notes: notes }), _jsx("p", { children: durationFormater(duration) })] }) }), _jsx("div", { className: "sb-h-full", children: _jsx(VolumeSlider, { volumeSliderToggler: volumeSliderToggler, width: width, setIsSeeking: (val) => setIsSeeking(val), handleControlDisplayTimer: handleControlDisplayTimer }) }), _jsx(QualityMenu, { width: width, onClick: (e, isOpen) => {
|
|
67
67
|
setVolumeToggler(!volumeSliderToggler);
|
|
68
68
|
setIsQualityMenuOpen && setIsQualityMenuOpen(isOpen);
|
|
69
|
-
} }), disableNote && (_jsx(CreateNoteMenu, { handleSaveNoteAction: handleSaveNoteAction, width: width, setNoteOpen: setNoteOpen, noteButtonClick: () => {
|
|
70
|
-
noteButtonClick(
|
|
69
|
+
} }), disableNote && (_jsx(CreateNoteMenu, { handleSaveNoteAction: handleSaveNoteAction, width: width, setNoteOpen: setNoteOpen, noteButtonClick: (e) => {
|
|
70
|
+
noteButtonClick({
|
|
71
|
+
time: Number((player === null || player === void 0 ? void 0 : player.currentTime()) || 0),
|
|
72
|
+
isOpen: e,
|
|
73
|
+
});
|
|
71
74
|
} })), _jsx(SubtitleMenu, { width: width, onClick: (e, isOpen) => {
|
|
72
75
|
setVolumeToggler(!volumeSliderToggler);
|
|
73
76
|
setIsSubtitleMenuOpen && setIsSubtitleMenuOpen(isOpen);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ControlBar/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,gBAAgB,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAC3C,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,mBAAmB,MAAM,wBAAwB,CAAC;AACzD,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAC7C,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AAKvD,OAAO,EAAE,iCAAiC,EAAE,MAAM,kCAAkC,CAAC;AACrF,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EACL,YAAY,EACZ,WAAW,EACX,cAAc,EACd,SAAS,EACT,QAAQ,GACT,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ControlBar/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -22,6 +22,7 @@ import {
|
|
|
22
22
|
PlayIcon,
|
|
23
23
|
} from "../../images";
|
|
24
24
|
import { set } from "video.js/dist/types/tech/middleware";
|
|
25
|
+
import Tooltip from "../Tooltip";
|
|
25
26
|
|
|
26
27
|
type Props<T> = {
|
|
27
28
|
player: Player | undefined;
|
|
@@ -188,12 +189,14 @@ const ControlBar = <T,>({
|
|
|
188
189
|
handleSaveNoteAction={handleSaveNoteAction}
|
|
189
190
|
width={width}
|
|
190
191
|
setNoteOpen={setNoteOpen}
|
|
191
|
-
noteButtonClick={() => {
|
|
192
|
-
noteButtonClick(
|
|
192
|
+
noteButtonClick={(e) => {
|
|
193
|
+
noteButtonClick({
|
|
194
|
+
time: Number(player?.currentTime() || 0),
|
|
195
|
+
isOpen: e,
|
|
196
|
+
});
|
|
193
197
|
}}
|
|
194
198
|
/>
|
|
195
199
|
)}
|
|
196
|
-
|
|
197
200
|
<SubtitleMenu
|
|
198
201
|
width={width}
|
|
199
202
|
onClick={(e: any, isOpen: boolean) => {
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import React, { useEffect } from "react";
|
|
3
|
-
import { durationFormater } from "../../utils";
|
|
4
|
-
import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
|
|
5
|
-
type Props = {};
|
|
6
|
-
|
|
7
|
-
const CurrentTimeLabel = ({}: Props) => {
|
|
8
|
-
const { currentTime } = useSoftBuildersVideoPlayerContext();
|
|
9
|
-
|
|
10
|
-
return <p>{durationFormater(currentTime)}</p>;
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
export default CurrentTimeLabel;
|
|
1
|
+
"use client";
|
|
2
|
+
import React, { useEffect } from "react";
|
|
3
|
+
import { durationFormater } from "../../utils";
|
|
4
|
+
import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
|
|
5
|
+
type Props = {};
|
|
6
|
+
|
|
7
|
+
const CurrentTimeLabel = ({}: Props) => {
|
|
8
|
+
const { currentTime } = useSoftBuildersVideoPlayerContext();
|
|
9
|
+
|
|
10
|
+
return <p>{durationFormater(currentTime)}</p>;
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
export default CurrentTimeLabel;
|
|
@@ -1,49 +1,49 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
|
|
3
|
-
type Props = {
|
|
4
|
-
name: string;
|
|
5
|
-
};
|
|
6
|
-
|
|
7
|
-
const Menu = ({ name }: Props) => {
|
|
8
|
-
return (
|
|
9
|
-
<div className="absolute right-0 z-10 w-48 mt-2 origin-top-right bg-white border border-gray-300 rounded-md shadow-lg focus:outline-none">
|
|
10
|
-
<div
|
|
11
|
-
className="py-1"
|
|
12
|
-
role="menu"
|
|
13
|
-
aria-orientation="vertical"
|
|
14
|
-
aria-labelledby={`${name}-button`}
|
|
15
|
-
>
|
|
16
|
-
<a
|
|
17
|
-
href="#"
|
|
18
|
-
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
|
|
19
|
-
role="menuitem"
|
|
20
|
-
>
|
|
21
|
-
Dashboard
|
|
22
|
-
</a>
|
|
23
|
-
<a
|
|
24
|
-
href="#"
|
|
25
|
-
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
|
|
26
|
-
role="menuitem"
|
|
27
|
-
>
|
|
28
|
-
Settings
|
|
29
|
-
</a>
|
|
30
|
-
<a
|
|
31
|
-
href="#"
|
|
32
|
-
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
|
|
33
|
-
role="menuitem"
|
|
34
|
-
>
|
|
35
|
-
Profile
|
|
36
|
-
</a>
|
|
37
|
-
<a
|
|
38
|
-
href="#"
|
|
39
|
-
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
|
|
40
|
-
role="menuitem"
|
|
41
|
-
>
|
|
42
|
-
Logout
|
|
43
|
-
</a>
|
|
44
|
-
</div>
|
|
45
|
-
</div>
|
|
46
|
-
);
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
export default Menu;
|
|
1
|
+
import React from "react";
|
|
2
|
+
|
|
3
|
+
type Props = {
|
|
4
|
+
name: string;
|
|
5
|
+
};
|
|
6
|
+
|
|
7
|
+
const Menu = ({ name }: Props) => {
|
|
8
|
+
return (
|
|
9
|
+
<div className="absolute right-0 z-10 w-48 mt-2 origin-top-right bg-white border border-gray-300 rounded-md shadow-lg focus:outline-none">
|
|
10
|
+
<div
|
|
11
|
+
className="py-1"
|
|
12
|
+
role="menu"
|
|
13
|
+
aria-orientation="vertical"
|
|
14
|
+
aria-labelledby={`${name}-button`}
|
|
15
|
+
>
|
|
16
|
+
<a
|
|
17
|
+
href="#"
|
|
18
|
+
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
|
|
19
|
+
role="menuitem"
|
|
20
|
+
>
|
|
21
|
+
Dashboard
|
|
22
|
+
</a>
|
|
23
|
+
<a
|
|
24
|
+
href="#"
|
|
25
|
+
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
|
|
26
|
+
role="menuitem"
|
|
27
|
+
>
|
|
28
|
+
Settings
|
|
29
|
+
</a>
|
|
30
|
+
<a
|
|
31
|
+
href="#"
|
|
32
|
+
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
|
|
33
|
+
role="menuitem"
|
|
34
|
+
>
|
|
35
|
+
Profile
|
|
36
|
+
</a>
|
|
37
|
+
<a
|
|
38
|
+
href="#"
|
|
39
|
+
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
|
|
40
|
+
role="menuitem"
|
|
41
|
+
>
|
|
42
|
+
Logout
|
|
43
|
+
</a>
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
);
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
export default Menu;
|
|
@@ -33,7 +33,7 @@ const MenuButton = ({ buttonContent, menuContent, close, classContainer, onClick
|
|
|
33
33
|
toggleMenu();
|
|
34
34
|
onClick && onClick(e, !isOpen);
|
|
35
35
|
}
|
|
36
|
-
noteButtonClick && noteButtonClick(
|
|
36
|
+
noteButtonClick && noteButtonClick(isOpen);
|
|
37
37
|
}, "aria-haspopup": "true", "aria-expanded": isOpen, "aria-label": "Open menu", children: buttonContent }), isOpen && (_jsx("div", { ref: menuRef, role: "menu", "aria-orientation": "vertical", "aria-labelledby": "Open menu", className: `sb-absolute sb-shadow-lg sb-right-0 sb-bottom-10 ${classContainer}`, children: menuContent }))] }));
|
|
38
38
|
};
|
|
39
39
|
export default MenuButton;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/MenuButton/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAcxE,MAAM,UAAU,GAAG,CAAC,EAClB,aAAa,EACb,WAAW,EACX,KAAK,EACL,cAAc,EACd,OAAO,EACP,WAAW,EACX,eAAe,EACf,YAAY,GAAG,KAAK,GACd,EAAE,EAAE;IACV,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACzD,MAAM,OAAO,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEpD,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IAEpD,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,SAAS,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC/C,IACE,SAAS,CAAC,OAAO;gBACjB,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC;gBACjD,OAAO,CAAC,OAAO;gBACf,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAC/C,CAAC;gBACD,SAAS,CAAC,KAAK,CAAC,CAAC;YACnB,CAAC;QACH,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC3D,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;IAC7E,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK;YAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;IACvB,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,IAAI,WAAW,CAAC,MAAM,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IACb,OAAO,CACL,eAAK,SAAS,EAAC,mCAAmC,aAChD,iBACE,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,CAAC,CAAM,EAAE,EAAE;oBAClB,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,IAAI,CAAC,YAAY,EAAE,CAAC;wBAClB,UAAU,EAAE,CAAC;wBACb,OAAO,IAAI,OAAO,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;oBACjC,CAAC;oBAED,eAAe,IAAI,eAAe,CAAC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/MenuButton/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAcxE,MAAM,UAAU,GAAG,CAAC,EAClB,aAAa,EACb,WAAW,EACX,KAAK,EACL,cAAc,EACd,OAAO,EACP,WAAW,EACX,eAAe,EACf,YAAY,GAAG,KAAK,GACd,EAAE,EAAE;IACV,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACzD,MAAM,OAAO,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEpD,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IAEpD,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,SAAS,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC/C,IACE,SAAS,CAAC,OAAO;gBACjB,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC;gBACjD,OAAO,CAAC,OAAO;gBACf,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAC/C,CAAC;gBACD,SAAS,CAAC,KAAK,CAAC,CAAC;YACnB,CAAC;QACH,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC3D,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;IAC7E,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK;YAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;IACvB,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,IAAI,WAAW,CAAC,MAAM,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IACb,OAAO,CACL,eAAK,SAAS,EAAC,mCAAmC,aAChD,iBACE,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,CAAC,CAAM,EAAE,EAAE;oBAClB,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,IAAI,CAAC,YAAY,EAAE,CAAC;wBAClB,UAAU,EAAE,CAAC;wBACb,OAAO,IAAI,OAAO,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;oBACjC,CAAC;oBAED,eAAe,IAAI,eAAe,CAAC,MAAM,CAAC,CAAC;gBAC7C,CAAC,mBACa,MAAM,mBACL,MAAM,gBACV,WAAW,YAErB,aAAa,GACP,EAER,MAAM,IAAI,CACT,cACE,GAAG,EAAE,OAAO,EACZ,IAAI,EAAC,MAAM,sBACM,UAAU,qBACX,WAAW,EAC3B,SAAS,EAAE,oDAAoD,cAAc,EAAE,YAE9E,WAAW,GACR,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -1,46 +1,46 @@
|
|
|
1
|
-
import React, { useEffect, useState } from "react";
|
|
2
|
-
import Tooltip from "../Tooltip";
|
|
3
|
-
import { durationFormater } from "../../utils";
|
|
4
|
-
import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
|
|
5
|
-
import { SoftBuildersVideoPlayerNote } from "../../types";
|
|
6
|
-
type Note = SoftBuildersVideoPlayerNote & { percentage: number };
|
|
7
|
-
|
|
8
|
-
type Props = {
|
|
9
|
-
note: Note;
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
const NoteTooltip = ({ note }: Props) => {
|
|
13
|
-
const [open, setOpen] = useState(false);
|
|
14
|
-
const { currentTime } = useSoftBuildersVideoPlayerContext();
|
|
15
|
-
|
|
16
|
-
useEffect(() => {
|
|
17
|
-
if (currentTime === Math.floor(note.time)) {
|
|
18
|
-
setOpen(true);
|
|
19
|
-
|
|
20
|
-
setTimeout(() => {
|
|
21
|
-
setOpen(false);
|
|
22
|
-
}, 5000);
|
|
23
|
-
}
|
|
24
|
-
}, [currentTime, note.time]);
|
|
25
|
-
return (
|
|
26
|
-
<div
|
|
27
|
-
className="sb-w-1 sb-h-1 sb-rounded-full sb-bg-white sb-absolute sb-z-30"
|
|
28
|
-
style={{ left: `${note.percentage}%` }}
|
|
29
|
-
onMouseEnter={() => setOpen(true)}
|
|
30
|
-
onMouseLeave={() => setOpen(false)}
|
|
31
|
-
>
|
|
32
|
-
<div className="sb-relative">
|
|
33
|
-
<Tooltip open={open}>
|
|
34
|
-
<div className="sb-flex sb-flex-col sb-gap-2 sb-items-center">
|
|
35
|
-
<p>{note.label}</p>
|
|
36
|
-
<p className="sb-p-2 sb-bg-[#303030] sb-bg-opacity-50 sb-rounded-md">
|
|
37
|
-
{durationFormater(note.time)}
|
|
38
|
-
</p>
|
|
39
|
-
</div>
|
|
40
|
-
</Tooltip>
|
|
41
|
-
</div>
|
|
42
|
-
</div>
|
|
43
|
-
);
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
export default NoteTooltip;
|
|
1
|
+
import React, { useEffect, useState } from "react";
|
|
2
|
+
import Tooltip from "../Tooltip";
|
|
3
|
+
import { durationFormater } from "../../utils";
|
|
4
|
+
import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
|
|
5
|
+
import { SoftBuildersVideoPlayerNote } from "../../types";
|
|
6
|
+
type Note = SoftBuildersVideoPlayerNote & { percentage: number };
|
|
7
|
+
|
|
8
|
+
type Props = {
|
|
9
|
+
note: Note;
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
const NoteTooltip = ({ note }: Props) => {
|
|
13
|
+
const [open, setOpen] = useState(false);
|
|
14
|
+
const { currentTime } = useSoftBuildersVideoPlayerContext();
|
|
15
|
+
|
|
16
|
+
useEffect(() => {
|
|
17
|
+
if (currentTime === Math.floor(note.time)) {
|
|
18
|
+
setOpen(true);
|
|
19
|
+
|
|
20
|
+
setTimeout(() => {
|
|
21
|
+
setOpen(false);
|
|
22
|
+
}, 5000);
|
|
23
|
+
}
|
|
24
|
+
}, [currentTime, note.time]);
|
|
25
|
+
return (
|
|
26
|
+
<div
|
|
27
|
+
className="sb-w-1 sb-h-1 sb-rounded-full sb-bg-white sb-absolute sb-z-30"
|
|
28
|
+
style={{ left: `${note.percentage}%` }}
|
|
29
|
+
onMouseEnter={() => setOpen(true)}
|
|
30
|
+
onMouseLeave={() => setOpen(false)}
|
|
31
|
+
>
|
|
32
|
+
<div className="sb-relative">
|
|
33
|
+
<Tooltip open={open}>
|
|
34
|
+
<div className="sb-flex sb-flex-col sb-gap-2 sb-items-center">
|
|
35
|
+
<p>{note.label}</p>
|
|
36
|
+
<p className="sb-p-2 sb-bg-[#303030] sb-bg-opacity-50 sb-rounded-md">
|
|
37
|
+
{durationFormater(note.time)}
|
|
38
|
+
</p>
|
|
39
|
+
</div>
|
|
40
|
+
</Tooltip>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
);
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
export default NoteTooltip;
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
|
|
3
|
-
type Props = {
|
|
4
|
-
open: boolean;
|
|
5
|
-
children: React.ReactNode;
|
|
6
|
-
};
|
|
7
|
-
const Tooltip = ({ open, children }: Props) => {
|
|
8
|
-
if (!open) return null;
|
|
9
|
-
return (
|
|
10
|
-
<div className="sb-absolute sb-bottom-full sb-mb-2 sb-left-1/2 sb-transform sb--translate-x-1/2 sb-z-10 sb-whitespace-nowrap">
|
|
11
|
-
{children}
|
|
12
|
-
</div>
|
|
13
|
-
);
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
export default Tooltip;
|
|
1
|
+
import React from "react";
|
|
2
|
+
|
|
3
|
+
type Props = {
|
|
4
|
+
open: boolean;
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
};
|
|
7
|
+
const Tooltip = ({ open, children }: Props) => {
|
|
8
|
+
if (!open) return null;
|
|
9
|
+
return (
|
|
10
|
+
<div className="sb-absolute sb-bottom-full sb-mb-2 sb-left-1/2 sb-transform sb--translate-x-1/2 sb-z-10 sb-whitespace-nowrap">
|
|
11
|
+
{children}
|
|
12
|
+
</div>
|
|
13
|
+
);
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
export default Tooltip;
|
|
@@ -1,82 +1,82 @@
|
|
|
1
|
-
import React, {
|
|
2
|
-
createContext,
|
|
3
|
-
useContext,
|
|
4
|
-
useState,
|
|
5
|
-
ReactNode,
|
|
6
|
-
useEffect,
|
|
7
|
-
} from "react";
|
|
8
|
-
import Player from "video.js/dist/types/player";
|
|
9
|
-
|
|
10
|
-
interface SoftBuildersVideoPlayerContextType {
|
|
11
|
-
player: Player | undefined;
|
|
12
|
-
setPlayer: React.Dispatch<React.SetStateAction<Player | undefined>>;
|
|
13
|
-
|
|
14
|
-
currentTime: number;
|
|
15
|
-
setCurrentTime: (value: number) => void;
|
|
16
|
-
|
|
17
|
-
duration: number;
|
|
18
|
-
setDuration: React.Dispatch<React.SetStateAction<number>>;
|
|
19
|
-
|
|
20
|
-
// isPaused: boolean;
|
|
21
|
-
// setIsPaused: React.Dispatch<React.SetStateAction<boolean>>;
|
|
22
|
-
|
|
23
|
-
downloadedBufferPercentage: number;
|
|
24
|
-
downloadedBufferTime: number;
|
|
25
|
-
setDownloadedBufferTimeufferTime: React.Dispatch<
|
|
26
|
-
React.SetStateAction<number>
|
|
27
|
-
>;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
const SoftBuildersVideoPlayerContext = createContext<
|
|
31
|
-
SoftBuildersVideoPlayerContextType | undefined
|
|
32
|
-
>(undefined);
|
|
33
|
-
|
|
34
|
-
// Create a provider component
|
|
35
|
-
export const SoftBuildersVideoPlayerProvider = ({
|
|
36
|
-
children,
|
|
37
|
-
}: {
|
|
38
|
-
children: ReactNode;
|
|
39
|
-
}) => {
|
|
40
|
-
const [player, setPlayer] = useState<Player | undefined>(undefined);
|
|
41
|
-
const [currentTime, setCurrentTime] = useState<number>(0);
|
|
42
|
-
const [duration, setDuration] = useState<number>(1);
|
|
43
|
-
// const [isPaused, setIsPaused] = useState(false);
|
|
44
|
-
const [downloadedBufferTime, setDownloadedBufferTimeufferTime] = useState(0);
|
|
45
|
-
const [downloadedBufferPercentage, setDownloadedBufferPercentage] =
|
|
46
|
-
useState(0);
|
|
47
|
-
|
|
48
|
-
useEffect(() => {
|
|
49
|
-
setDownloadedBufferPercentage((downloadedBufferTime * 100) / duration);
|
|
50
|
-
}, [downloadedBufferTime]);
|
|
51
|
-
|
|
52
|
-
return (
|
|
53
|
-
<SoftBuildersVideoPlayerContext.Provider
|
|
54
|
-
value={{
|
|
55
|
-
player,
|
|
56
|
-
setPlayer,
|
|
57
|
-
duration,
|
|
58
|
-
setDuration,
|
|
59
|
-
currentTime,
|
|
60
|
-
setCurrentTime: (value) => setCurrentTime(Math.floor(value)),
|
|
61
|
-
// isPaused,
|
|
62
|
-
// setIsPaused,
|
|
63
|
-
downloadedBufferTime,
|
|
64
|
-
setDownloadedBufferTimeufferTime,
|
|
65
|
-
downloadedBufferPercentage,
|
|
66
|
-
}}
|
|
67
|
-
>
|
|
68
|
-
{children}
|
|
69
|
-
</SoftBuildersVideoPlayerContext.Provider>
|
|
70
|
-
);
|
|
71
|
-
};
|
|
72
|
-
|
|
73
|
-
// Custom hook to use the context
|
|
74
|
-
export const useSoftBuildersVideoPlayerContext = () => {
|
|
75
|
-
const context = useContext(SoftBuildersVideoPlayerContext);
|
|
76
|
-
if (!context) {
|
|
77
|
-
throw new Error(
|
|
78
|
-
"useSoftBuildersVideoPlayerContext must be used within an SoftBuildersVideoPlayerProvider"
|
|
79
|
-
);
|
|
80
|
-
}
|
|
81
|
-
return context;
|
|
82
|
-
};
|
|
1
|
+
import React, {
|
|
2
|
+
createContext,
|
|
3
|
+
useContext,
|
|
4
|
+
useState,
|
|
5
|
+
ReactNode,
|
|
6
|
+
useEffect,
|
|
7
|
+
} from "react";
|
|
8
|
+
import Player from "video.js/dist/types/player";
|
|
9
|
+
|
|
10
|
+
interface SoftBuildersVideoPlayerContextType {
|
|
11
|
+
player: Player | undefined;
|
|
12
|
+
setPlayer: React.Dispatch<React.SetStateAction<Player | undefined>>;
|
|
13
|
+
|
|
14
|
+
currentTime: number;
|
|
15
|
+
setCurrentTime: (value: number) => void;
|
|
16
|
+
|
|
17
|
+
duration: number;
|
|
18
|
+
setDuration: React.Dispatch<React.SetStateAction<number>>;
|
|
19
|
+
|
|
20
|
+
// isPaused: boolean;
|
|
21
|
+
// setIsPaused: React.Dispatch<React.SetStateAction<boolean>>;
|
|
22
|
+
|
|
23
|
+
downloadedBufferPercentage: number;
|
|
24
|
+
downloadedBufferTime: number;
|
|
25
|
+
setDownloadedBufferTimeufferTime: React.Dispatch<
|
|
26
|
+
React.SetStateAction<number>
|
|
27
|
+
>;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
const SoftBuildersVideoPlayerContext = createContext<
|
|
31
|
+
SoftBuildersVideoPlayerContextType | undefined
|
|
32
|
+
>(undefined);
|
|
33
|
+
|
|
34
|
+
// Create a provider component
|
|
35
|
+
export const SoftBuildersVideoPlayerProvider = ({
|
|
36
|
+
children,
|
|
37
|
+
}: {
|
|
38
|
+
children: ReactNode;
|
|
39
|
+
}) => {
|
|
40
|
+
const [player, setPlayer] = useState<Player | undefined>(undefined);
|
|
41
|
+
const [currentTime, setCurrentTime] = useState<number>(0);
|
|
42
|
+
const [duration, setDuration] = useState<number>(1);
|
|
43
|
+
// const [isPaused, setIsPaused] = useState(false);
|
|
44
|
+
const [downloadedBufferTime, setDownloadedBufferTimeufferTime] = useState(0);
|
|
45
|
+
const [downloadedBufferPercentage, setDownloadedBufferPercentage] =
|
|
46
|
+
useState(0);
|
|
47
|
+
|
|
48
|
+
useEffect(() => {
|
|
49
|
+
setDownloadedBufferPercentage((downloadedBufferTime * 100) / duration);
|
|
50
|
+
}, [downloadedBufferTime]);
|
|
51
|
+
|
|
52
|
+
return (
|
|
53
|
+
<SoftBuildersVideoPlayerContext.Provider
|
|
54
|
+
value={{
|
|
55
|
+
player,
|
|
56
|
+
setPlayer,
|
|
57
|
+
duration,
|
|
58
|
+
setDuration,
|
|
59
|
+
currentTime,
|
|
60
|
+
setCurrentTime: (value) => setCurrentTime(Math.floor(value)),
|
|
61
|
+
// isPaused,
|
|
62
|
+
// setIsPaused,
|
|
63
|
+
downloadedBufferTime,
|
|
64
|
+
setDownloadedBufferTimeufferTime,
|
|
65
|
+
downloadedBufferPercentage,
|
|
66
|
+
}}
|
|
67
|
+
>
|
|
68
|
+
{children}
|
|
69
|
+
</SoftBuildersVideoPlayerContext.Provider>
|
|
70
|
+
);
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
// Custom hook to use the context
|
|
74
|
+
export const useSoftBuildersVideoPlayerContext = () => {
|
|
75
|
+
const context = useContext(SoftBuildersVideoPlayerContext);
|
|
76
|
+
if (!context) {
|
|
77
|
+
throw new Error(
|
|
78
|
+
"useSoftBuildersVideoPlayerContext must be used within an SoftBuildersVideoPlayerProvider"
|
|
79
|
+
);
|
|
80
|
+
}
|
|
81
|
+
return context;
|
|
82
|
+
};
|
package/dist/index.mjs
CHANGED
|
@@ -645,7 +645,7 @@ var MenuButton = ({
|
|
|
645
645
|
toggleMenu();
|
|
646
646
|
onClick && onClick(e, !isOpen);
|
|
647
647
|
}
|
|
648
|
-
noteButtonClick && noteButtonClick(
|
|
648
|
+
noteButtonClick && noteButtonClick(isOpen);
|
|
649
649
|
},
|
|
650
650
|
"aria-haspopup": "true",
|
|
651
651
|
"aria-expanded": isOpen,
|
|
@@ -1354,8 +1354,11 @@ var ControlBar = ({
|
|
|
1354
1354
|
handleSaveNoteAction,
|
|
1355
1355
|
width,
|
|
1356
1356
|
setNoteOpen,
|
|
1357
|
-
noteButtonClick: () => {
|
|
1358
|
-
noteButtonClick(
|
|
1357
|
+
noteButtonClick: (e) => {
|
|
1358
|
+
noteButtonClick({
|
|
1359
|
+
time: Number((player == null ? void 0 : player.currentTime()) || 0),
|
|
1360
|
+
isOpen: e
|
|
1361
|
+
});
|
|
1359
1362
|
}
|
|
1360
1363
|
}
|
|
1361
1364
|
),
|
package/dist/styles/tailwind.css
CHANGED
|
@@ -498,417 +498,417 @@ video {
|
|
|
498
498
|
/* Make elements with the HTML hidden attribute stay hidden by default */
|
|
499
499
|
[hidden] {
|
|
500
500
|
display: none;
|
|
501
|
-
}
|
|
501
|
+
}
|
|
502
502
|
.sb-visible {
|
|
503
503
|
visibility: visible;
|
|
504
|
-
}
|
|
504
|
+
}
|
|
505
505
|
.sb-invisible {
|
|
506
506
|
visibility: hidden;
|
|
507
|
-
}
|
|
507
|
+
}
|
|
508
508
|
.sb-static {
|
|
509
509
|
position: static;
|
|
510
|
-
}
|
|
510
|
+
}
|
|
511
511
|
.sb-absolute {
|
|
512
512
|
position: absolute;
|
|
513
|
-
}
|
|
513
|
+
}
|
|
514
514
|
.sb-relative {
|
|
515
515
|
position: relative;
|
|
516
|
-
}
|
|
516
|
+
}
|
|
517
517
|
.\!sb-top-8 {
|
|
518
518
|
top: 2rem !important;
|
|
519
|
-
}
|
|
519
|
+
}
|
|
520
520
|
.-sb-left-9 {
|
|
521
521
|
left: -2.25rem;
|
|
522
|
-
}
|
|
522
|
+
}
|
|
523
523
|
.-sb-left-\[9\.75rem\] {
|
|
524
524
|
left: -9.75rem;
|
|
525
|
-
}
|
|
525
|
+
}
|
|
526
526
|
.-sb-top-1 {
|
|
527
527
|
top: -0.25rem;
|
|
528
|
-
}
|
|
528
|
+
}
|
|
529
529
|
.sb-bottom-0 {
|
|
530
530
|
bottom: 0px;
|
|
531
|
-
}
|
|
531
|
+
}
|
|
532
532
|
.sb-bottom-1 {
|
|
533
533
|
bottom: 0.25rem;
|
|
534
|
-
}
|
|
534
|
+
}
|
|
535
535
|
.sb-bottom-10 {
|
|
536
536
|
bottom: 2.5rem;
|
|
537
|
-
}
|
|
537
|
+
}
|
|
538
538
|
.sb-bottom-2 {
|
|
539
539
|
bottom: 0.5rem;
|
|
540
|
-
}
|
|
540
|
+
}
|
|
541
541
|
.sb-bottom-full {
|
|
542
542
|
bottom: 100%;
|
|
543
|
-
}
|
|
543
|
+
}
|
|
544
544
|
.sb-left-0 {
|
|
545
545
|
left: 0px;
|
|
546
|
-
}
|
|
546
|
+
}
|
|
547
547
|
.sb-left-1\/2 {
|
|
548
548
|
left: 50%;
|
|
549
|
-
}
|
|
549
|
+
}
|
|
550
550
|
.sb-right-0 {
|
|
551
551
|
right: 0px;
|
|
552
|
-
}
|
|
552
|
+
}
|
|
553
553
|
.sb-top-0 {
|
|
554
554
|
top: 0px;
|
|
555
|
-
}
|
|
555
|
+
}
|
|
556
556
|
.sb-top-1 {
|
|
557
557
|
top: 0.25rem;
|
|
558
|
-
}
|
|
558
|
+
}
|
|
559
559
|
.sb-top-2 {
|
|
560
560
|
top: 0.5rem;
|
|
561
|
-
}
|
|
561
|
+
}
|
|
562
562
|
.sb-top-\[27\%\] {
|
|
563
563
|
top: 27%;
|
|
564
|
-
}
|
|
564
|
+
}
|
|
565
565
|
.sb-z-10 {
|
|
566
566
|
z-index: 10;
|
|
567
|
-
}
|
|
567
|
+
}
|
|
568
568
|
.sb-z-20 {
|
|
569
569
|
z-index: 20;
|
|
570
|
-
}
|
|
570
|
+
}
|
|
571
571
|
.sb-z-30 {
|
|
572
572
|
z-index: 30;
|
|
573
|
-
}
|
|
573
|
+
}
|
|
574
574
|
.sb-col-span-3 {
|
|
575
575
|
grid-column: span 3 / span 3;
|
|
576
|
-
}
|
|
576
|
+
}
|
|
577
577
|
.sb-col-span-9 {
|
|
578
578
|
grid-column: span 9 / span 9;
|
|
579
|
-
}
|
|
579
|
+
}
|
|
580
580
|
.sb-mb-1 {
|
|
581
581
|
margin-bottom: 0.25rem;
|
|
582
|
-
}
|
|
582
|
+
}
|
|
583
583
|
.sb-mb-2 {
|
|
584
584
|
margin-bottom: 0.5rem;
|
|
585
|
-
}
|
|
585
|
+
}
|
|
586
586
|
.sb-ml-0 {
|
|
587
587
|
margin-left: 0px;
|
|
588
|
-
}
|
|
588
|
+
}
|
|
589
589
|
.sb-mr-0 {
|
|
590
590
|
margin-right: 0px;
|
|
591
|
-
}
|
|
591
|
+
}
|
|
592
592
|
.sb-flex {
|
|
593
593
|
display: flex;
|
|
594
|
-
}
|
|
594
|
+
}
|
|
595
595
|
.sb-grid {
|
|
596
596
|
display: grid;
|
|
597
|
-
}
|
|
597
|
+
}
|
|
598
598
|
.sb-h-1 {
|
|
599
599
|
height: 0.25rem;
|
|
600
|
-
}
|
|
600
|
+
}
|
|
601
601
|
.sb-h-16 {
|
|
602
602
|
height: 4rem;
|
|
603
|
-
}
|
|
603
|
+
}
|
|
604
604
|
.sb-h-2 {
|
|
605
605
|
height: 0.5rem;
|
|
606
|
-
}
|
|
606
|
+
}
|
|
607
607
|
.sb-h-3 {
|
|
608
608
|
height: 0.75rem;
|
|
609
|
-
}
|
|
609
|
+
}
|
|
610
610
|
.sb-h-4 {
|
|
611
611
|
height: 1rem;
|
|
612
|
-
}
|
|
612
|
+
}
|
|
613
613
|
.sb-h-5 {
|
|
614
614
|
height: 1.25rem;
|
|
615
|
-
}
|
|
615
|
+
}
|
|
616
616
|
.sb-h-\[\.1px\] {
|
|
617
617
|
height: .1px;
|
|
618
|
-
}
|
|
618
|
+
}
|
|
619
619
|
.sb-h-\[3px\] {
|
|
620
620
|
height: 3px;
|
|
621
|
-
}
|
|
621
|
+
}
|
|
622
622
|
.sb-h-full {
|
|
623
623
|
height: 100%;
|
|
624
|
-
}
|
|
624
|
+
}
|
|
625
625
|
.\!sb-w-16 {
|
|
626
626
|
width: 4rem !important;
|
|
627
|
-
}
|
|
627
|
+
}
|
|
628
628
|
.sb-w-1 {
|
|
629
629
|
width: 0.25rem;
|
|
630
|
-
}
|
|
630
|
+
}
|
|
631
631
|
.sb-w-16 {
|
|
632
632
|
width: 4rem;
|
|
633
|
-
}
|
|
633
|
+
}
|
|
634
634
|
.sb-w-3 {
|
|
635
635
|
width: 0.75rem;
|
|
636
|
-
}
|
|
636
|
+
}
|
|
637
637
|
.sb-w-4 {
|
|
638
638
|
width: 1rem;
|
|
639
|
-
}
|
|
639
|
+
}
|
|
640
640
|
.sb-w-5 {
|
|
641
641
|
width: 1.25rem;
|
|
642
|
-
}
|
|
642
|
+
}
|
|
643
643
|
.sb-w-\[150px\] {
|
|
644
644
|
width: 150px;
|
|
645
|
-
}
|
|
645
|
+
}
|
|
646
646
|
.sb-w-\[220px\] {
|
|
647
647
|
width: 220px;
|
|
648
|
-
}
|
|
648
|
+
}
|
|
649
649
|
.sb-w-\[22px\] {
|
|
650
650
|
width: 22px;
|
|
651
|
-
}
|
|
651
|
+
}
|
|
652
652
|
.sb-w-\[90px\] {
|
|
653
653
|
width: 90px;
|
|
654
|
-
}
|
|
654
|
+
}
|
|
655
655
|
.sb-w-full {
|
|
656
656
|
width: 100%;
|
|
657
|
-
}
|
|
657
|
+
}
|
|
658
658
|
.sb-flex-1 {
|
|
659
659
|
flex: 1 1 0%;
|
|
660
|
-
}
|
|
660
|
+
}
|
|
661
661
|
.sb-border-spacing-x-2 {
|
|
662
662
|
--tw-border-spacing-x: 0.5rem;
|
|
663
663
|
border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
|
|
664
|
-
}
|
|
664
|
+
}
|
|
665
665
|
.-sb-translate-y-0 {
|
|
666
666
|
--tw-translate-y: -0px;
|
|
667
667
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
668
|
-
}
|
|
668
|
+
}
|
|
669
669
|
.-sb-translate-y-1 {
|
|
670
670
|
--tw-translate-y: -0.25rem;
|
|
671
671
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
672
|
-
}
|
|
672
|
+
}
|
|
673
673
|
.sb--translate-x-1\/2 {
|
|
674
674
|
--tw-translate-x: -50%;
|
|
675
675
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
676
|
-
}
|
|
676
|
+
}
|
|
677
677
|
.sb-translate-y-0 {
|
|
678
678
|
--tw-translate-y: 0px;
|
|
679
679
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
680
|
-
}
|
|
680
|
+
}
|
|
681
681
|
.sb-translate-y-1 {
|
|
682
682
|
--tw-translate-y: 0.25rem;
|
|
683
683
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
684
|
-
}
|
|
684
|
+
}
|
|
685
685
|
.-sb-rotate-90 {
|
|
686
686
|
--tw-rotate: -90deg;
|
|
687
687
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
688
|
-
}
|
|
688
|
+
}
|
|
689
689
|
.sb-rotate-0 {
|
|
690
690
|
--tw-rotate: 0deg;
|
|
691
691
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
692
|
-
}
|
|
692
|
+
}
|
|
693
693
|
.sb-rotate-90 {
|
|
694
694
|
--tw-rotate: 90deg;
|
|
695
695
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
696
|
-
}
|
|
696
|
+
}
|
|
697
697
|
.sb-transform {
|
|
698
698
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
699
|
-
}
|
|
699
|
+
}
|
|
700
700
|
.sb-cursor-pointer {
|
|
701
701
|
cursor: pointer;
|
|
702
|
-
}
|
|
702
|
+
}
|
|
703
703
|
.sb-appearance-none {
|
|
704
704
|
-webkit-appearance: none;
|
|
705
705
|
-moz-appearance: none;
|
|
706
706
|
appearance: none;
|
|
707
|
-
}
|
|
707
|
+
}
|
|
708
708
|
.sb-grid-cols-12 {
|
|
709
709
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
710
|
-
}
|
|
710
|
+
}
|
|
711
711
|
.\!sb-flex-row {
|
|
712
712
|
flex-direction: row !important;
|
|
713
|
-
}
|
|
713
|
+
}
|
|
714
714
|
.sb-flex-row {
|
|
715
715
|
flex-direction: row;
|
|
716
|
-
}
|
|
716
|
+
}
|
|
717
717
|
.sb-flex-col {
|
|
718
718
|
flex-direction: column;
|
|
719
|
-
}
|
|
719
|
+
}
|
|
720
720
|
.sb-flex-col-reverse {
|
|
721
721
|
flex-direction: column-reverse;
|
|
722
|
-
}
|
|
722
|
+
}
|
|
723
723
|
.\!sb-items-start {
|
|
724
724
|
align-items: flex-start !important;
|
|
725
|
-
}
|
|
725
|
+
}
|
|
726
726
|
.sb-items-start {
|
|
727
727
|
align-items: flex-start;
|
|
728
|
-
}
|
|
728
|
+
}
|
|
729
729
|
.sb-items-end {
|
|
730
730
|
align-items: flex-end;
|
|
731
|
-
}
|
|
731
|
+
}
|
|
732
732
|
.sb-items-center {
|
|
733
733
|
align-items: center;
|
|
734
|
-
}
|
|
734
|
+
}
|
|
735
735
|
.\!sb-justify-start {
|
|
736
736
|
justify-content: flex-start !important;
|
|
737
|
-
}
|
|
737
|
+
}
|
|
738
738
|
.sb-justify-center {
|
|
739
739
|
justify-content: center;
|
|
740
|
-
}
|
|
740
|
+
}
|
|
741
741
|
.sb-justify-between {
|
|
742
742
|
justify-content: space-between;
|
|
743
|
-
}
|
|
743
|
+
}
|
|
744
744
|
.sb-gap-1 {
|
|
745
745
|
gap: 0.25rem;
|
|
746
|
-
}
|
|
746
|
+
}
|
|
747
747
|
.sb-gap-2 {
|
|
748
748
|
gap: 0.5rem;
|
|
749
|
-
}
|
|
749
|
+
}
|
|
750
750
|
.sb-gap-3 {
|
|
751
751
|
gap: 0.75rem;
|
|
752
|
-
}
|
|
752
|
+
}
|
|
753
753
|
.sb-gap-4 {
|
|
754
754
|
gap: 1rem;
|
|
755
|
-
}
|
|
755
|
+
}
|
|
756
756
|
.sb-overflow-hidden {
|
|
757
757
|
overflow: hidden;
|
|
758
|
-
}
|
|
758
|
+
}
|
|
759
759
|
.sb-whitespace-nowrap {
|
|
760
760
|
white-space: nowrap;
|
|
761
|
-
}
|
|
761
|
+
}
|
|
762
762
|
.sb-rounded-full {
|
|
763
763
|
border-radius: 9999px;
|
|
764
|
-
}
|
|
764
|
+
}
|
|
765
765
|
.sb-rounded-lg {
|
|
766
766
|
border-radius: 0.5rem;
|
|
767
|
-
}
|
|
767
|
+
}
|
|
768
768
|
.sb-rounded-md {
|
|
769
769
|
border-radius: 0.375rem;
|
|
770
|
-
}
|
|
770
|
+
}
|
|
771
771
|
.sb-border {
|
|
772
772
|
border-width: 1px;
|
|
773
|
-
}
|
|
773
|
+
}
|
|
774
774
|
.sb-border-\[\#AAAAAA\] {
|
|
775
775
|
--tw-border-opacity: 1;
|
|
776
776
|
border-color: rgb(170 170 170 / var(--tw-border-opacity));
|
|
777
|
-
}
|
|
777
|
+
}
|
|
778
778
|
.sb-bg-\[\#303030\] {
|
|
779
779
|
--tw-bg-opacity: 1;
|
|
780
780
|
background-color: rgb(48 48 48 / var(--tw-bg-opacity));
|
|
781
|
-
}
|
|
781
|
+
}
|
|
782
782
|
.sb-bg-\[\#AAAAAA\] {
|
|
783
783
|
--tw-bg-opacity: 1;
|
|
784
784
|
background-color: rgb(170 170 170 / var(--tw-bg-opacity));
|
|
785
|
-
}
|
|
785
|
+
}
|
|
786
786
|
.sb-bg-\[red\] {
|
|
787
787
|
--tw-bg-opacity: 1;
|
|
788
788
|
background-color: rgb(255 0 0 / var(--tw-bg-opacity));
|
|
789
|
-
}
|
|
789
|
+
}
|
|
790
790
|
.sb-bg-orange-500 {
|
|
791
791
|
--tw-bg-opacity: 1;
|
|
792
792
|
background-color: rgb(249 115 22 / var(--tw-bg-opacity));
|
|
793
|
-
}
|
|
793
|
+
}
|
|
794
794
|
.sb-bg-slate-400 {
|
|
795
795
|
--tw-bg-opacity: 1;
|
|
796
796
|
background-color: rgb(148 163 184 / var(--tw-bg-opacity));
|
|
797
|
-
}
|
|
797
|
+
}
|
|
798
798
|
.sb-bg-transparent {
|
|
799
799
|
background-color: transparent;
|
|
800
|
-
}
|
|
800
|
+
}
|
|
801
801
|
.sb-bg-white {
|
|
802
802
|
--tw-bg-opacity: 1;
|
|
803
803
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
|
804
|
-
}
|
|
804
|
+
}
|
|
805
805
|
.sb-bg-white\/30 {
|
|
806
806
|
background-color: rgb(255 255 255 / 0.3);
|
|
807
|
-
}
|
|
807
|
+
}
|
|
808
808
|
.sb-bg-opacity-50 {
|
|
809
809
|
--tw-bg-opacity: 0.5;
|
|
810
|
-
}
|
|
810
|
+
}
|
|
811
811
|
.sb-bg-opacity-70 {
|
|
812
812
|
--tw-bg-opacity: 0.7;
|
|
813
|
-
}
|
|
813
|
+
}
|
|
814
814
|
.sb-p-2 {
|
|
815
815
|
padding: 0.5rem;
|
|
816
|
-
}
|
|
816
|
+
}
|
|
817
817
|
.\!sb-px-4 {
|
|
818
818
|
padding-left: 1rem !important;
|
|
819
819
|
padding-right: 1rem !important;
|
|
820
|
-
}
|
|
820
|
+
}
|
|
821
821
|
.sb-px-4 {
|
|
822
822
|
padding-left: 1rem;
|
|
823
823
|
padding-right: 1rem;
|
|
824
|
-
}
|
|
824
|
+
}
|
|
825
825
|
.sb-px-5 {
|
|
826
826
|
padding-left: 1.25rem;
|
|
827
827
|
padding-right: 1.25rem;
|
|
828
|
-
}
|
|
828
|
+
}
|
|
829
829
|
.sb-py-1 {
|
|
830
830
|
padding-top: 0.25rem;
|
|
831
831
|
padding-bottom: 0.25rem;
|
|
832
|
-
}
|
|
832
|
+
}
|
|
833
833
|
.sb-py-3 {
|
|
834
834
|
padding-top: 0.75rem;
|
|
835
835
|
padding-bottom: 0.75rem;
|
|
836
|
-
}
|
|
836
|
+
}
|
|
837
837
|
.sb-py-5 {
|
|
838
838
|
padding-top: 1.25rem;
|
|
839
839
|
padding-bottom: 1.25rem;
|
|
840
|
-
}
|
|
840
|
+
}
|
|
841
841
|
.sb-pb-2 {
|
|
842
842
|
padding-bottom: 0.5rem;
|
|
843
|
-
}
|
|
843
|
+
}
|
|
844
844
|
.sb-pt-2 {
|
|
845
845
|
padding-top: 0.5rem;
|
|
846
|
-
}
|
|
846
|
+
}
|
|
847
847
|
.sb-text-left {
|
|
848
848
|
text-align: left;
|
|
849
|
-
}
|
|
849
|
+
}
|
|
850
850
|
.sb-text-center {
|
|
851
851
|
text-align: center;
|
|
852
|
-
}
|
|
852
|
+
}
|
|
853
853
|
.sb-font-bold {
|
|
854
854
|
font-weight: 700;
|
|
855
|
-
}
|
|
855
|
+
}
|
|
856
856
|
.sb-text-white {
|
|
857
857
|
--tw-text-opacity: 1;
|
|
858
858
|
color: rgb(255 255 255 / var(--tw-text-opacity));
|
|
859
|
-
}
|
|
859
|
+
}
|
|
860
860
|
.sb-opacity-0 {
|
|
861
861
|
opacity: 0;
|
|
862
|
-
}
|
|
862
|
+
}
|
|
863
863
|
.sb-opacity-100 {
|
|
864
864
|
opacity: 1;
|
|
865
|
-
}
|
|
865
|
+
}
|
|
866
866
|
.sb-shadow-lg {
|
|
867
867
|
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
868
868
|
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
|
869
869
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
870
|
-
}
|
|
870
|
+
}
|
|
871
871
|
.sb-backdrop-blur-lg {
|
|
872
872
|
--tw-backdrop-blur: blur(16px);
|
|
873
873
|
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
|
874
874
|
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
|
875
|
-
}
|
|
875
|
+
}
|
|
876
876
|
.sb-transition-all {
|
|
877
877
|
transition-property: all;
|
|
878
878
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
879
879
|
transition-duration: 150ms;
|
|
880
|
-
}
|
|
880
|
+
}
|
|
881
881
|
.sb-transition-opacity {
|
|
882
882
|
transition-property: opacity;
|
|
883
883
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
884
884
|
transition-duration: 150ms;
|
|
885
|
-
}
|
|
885
|
+
}
|
|
886
886
|
.sb-duration-500 {
|
|
887
887
|
transition-duration: 500ms;
|
|
888
|
-
}
|
|
888
|
+
}
|
|
889
889
|
.sb-ease-in-out {
|
|
890
890
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
891
|
-
}
|
|
891
|
+
}
|
|
892
892
|
.placeholder\:sb-text-white::-moz-placeholder {
|
|
893
893
|
--tw-text-opacity: 1;
|
|
894
894
|
color: rgb(255 255 255 / var(--tw-text-opacity));
|
|
895
|
-
}
|
|
895
|
+
}
|
|
896
896
|
.placeholder\:sb-text-white::placeholder {
|
|
897
897
|
--tw-text-opacity: 1;
|
|
898
898
|
color: rgb(255 255 255 / var(--tw-text-opacity));
|
|
899
|
-
}
|
|
899
|
+
}
|
|
900
900
|
.hover\:sb-w-\[45\%\]:hover {
|
|
901
901
|
width: 45%;
|
|
902
|
-
}
|
|
902
|
+
}
|
|
903
903
|
.hover\:sb-scale-150:hover {
|
|
904
904
|
--tw-scale-x: 1.5;
|
|
905
905
|
--tw-scale-y: 1.5;
|
|
906
906
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
907
|
-
}
|
|
907
|
+
}
|
|
908
908
|
.hover\:sb-cursor-pointer:hover {
|
|
909
909
|
cursor: pointer;
|
|
910
|
-
}
|
|
910
|
+
}
|
|
911
911
|
.hover\:sb-text-orange-500:hover {
|
|
912
912
|
--tw-text-opacity: 1;
|
|
913
913
|
color: rgb(249 115 22 / var(--tw-text-opacity));
|
|
914
|
-
}
|
|
914
|
+
}
|