softbuilders-react-video-player 1.1.62 → 1.1.64
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/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
|
+
}
|