timeline styling updates

This commit is contained in:
BFlat committed 2024-03-26 11:19:55 +07:00
1 parent d70ada7d4a
commit caba034bf2
5 files changed
+19 -11

No files matched your search

@@ -13,7 +13,7 @@ export const Audio = () => {
className="block rounded-lg bg-audio-groupBg pb-5 pl-2 pr-4"
style={{ width: fullWidth + 90 }}
>
<div className="mb-5 pt-2 text-xs font-medium text-white">
<div className="prevent-select mb-5 pt-2 text-xs font-medium text-white">
Global Audio
</div>
<div className="flex flex-col gap-2">
@@ -33,7 +33,7 @@ export const Audio = () => {
clip={clip}
/>
))}
<div className="absolute ps-2 pt-1 text-xs font-medium text-white">
<div className="prevent-select absolute ps-2 pt-1 text-xs font-medium text-white">
Global Audio Track
</div>
</div>
@@ -21,7 +21,9 @@ export const Character = ({ characterId }: Props) => {
className="block rounded-lg bg-character-groupBg pb-5 pl-2 pr-4"
style={{ width: fullWidth + 90 }}
>
<div className="mb-5 pt-2 text-xs font-medium text-white">Character</div>
<div className="prevent-select mb-5 pt-2 text-xs font-medium text-white">
Character
</div>
<div className="flex flex-col gap-5">
<div className="pl-16">
<div className="relative mt-4 block h-9 rounded-lg bg-character-unselected">
@@ -46,7 +48,7 @@ export const Character = ({ characterId }: Props) => {
clip={clip}
/>
))}
<div className="absolute ps-2 pt-1 text-xs font-medium text-white">
<div className="prevent-select absolute ps-2 pt-1 text-xs font-medium text-white">
Animation
</div>
</div>
@@ -74,7 +76,7 @@ export const Character = ({ characterId }: Props) => {
clip={clip}
/>
))}
<div className="absolute ps-2 pt-1 text-xs font-medium text-white">
<div className="prevent-select absolute ps-2 pt-1 text-xs font-medium text-white">
Character Position/Rotation
</div>
</div>
@@ -102,7 +104,7 @@ export const Character = ({ characterId }: Props) => {
clip={clip}
/>
))}
<div className="absolute ps-2 pt-1 text-xs font-medium text-white">
<div className="prevent-select prevent-select absolute ps-2 pt-1 text-xs font-medium text-white">
Lipsync Audio Track
</div>
<button
@@ -42,13 +42,13 @@ export const Timeline = (
return (
<>
<LowerPanel>
<div className="mt-4 flex h-3 text-xs text-white opacity-75">
<div className="prevent-select mt-4 flex h-3 border-t border-t-ui-panel-border text-xs text-white opacity-75">
{Array(length)
.fill(0)
.map((_, index) => (
<Fragment key={index}>
<div
className="absolute ps-1"
className="absolute ps-1 pt-1"
style={{ left: index * sectionWidth + 92 }}
>
00:{index < 10 ? "0" + index.toString() : index.toString()}
@@ -99,8 +99,7 @@ export const Timeline = (
>
<FontAwesomeIcon
icon={faSortDown}
style={{ top: 0, left: -2 }}
className="text-brand-primary"
className="absolute ml-[-5px] mt-[-10px] h-5 text-brand-primary"
/>
<div
className="absolute block bg-brand-primary"
@@ -32,7 +32,7 @@ export const TrackClip = ({ clip, min, max, style, updateClip }: Props) => {
...classes,
"px-[6px] py-[3px]",
"rounded",
"text-xs font-medium text-white",
"prevent-select text-xs font-medium text-white",
].join(" ")}
style={{ top: -28, left: offset * 4 * scale + 2 }}
>
+7
View File
@@ -27,3 +27,10 @@ body {
width: 100vw;
}
.prevent-select {
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
pointer-events: none;
}