daniel543x/artcraft
1
0 Fork 0
mirror of https://github.com/storytold/artcraft.git synced 2026-11-07 02:21:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Webapp stylings (#1916)

Browse Source
This commit is contained in:
BFlat authored and GitHub committed 2026-09-01 10:25:21 +07:00
1 parent d2ad5820e0
commit 60bcfffc8d
156 files changed
+2512 -2753
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/libs/components/tooltip/src/lib/tooltip.tsx
+50 -49
View File
@@ -175,7 +175,8 @@ export const Tooltip = ({
// in Chromium/WebKit (our glass surfaces use backdrop-blur), so a fixed
// tooltip inside one would otherwise be positioned/clipped incorrectly.
const backdropFilter =
cs.backdropFilter || (cs as unknown as Record<string, string>)["webkitBackdropFilter"];
cs.backdropFilter ||
(cs as unknown as Record<string, string>)["webkitBackdropFilter"];
if (
cs.transform !== "none" ||
cs.willChange === "transform" ||
@@ -342,54 +343,54 @@ export const Tooltip = ({
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div
ref={setTooltipRef}
{...(portal ? { "data-modal-outside-safe": "" } : {})}
onPointerEnter={() => interactive && setIsHoveringTooltip(true)}
onPointerLeave={() => interactive && setIsHoveringTooltip(false)}
onClick={() => {
if (closeOnClick) {
setIsShowing(false);
}
}}
style={{
...getStyleForPosition(),
transitionDelay: `${delay}ms`,
transitionProperty: "opacity",
transitionDuration: "200ms",
transitionTimingFunction: "ease-out",
zIndex,
}}
className={twMerge(
isFixed ? "fixed" : "absolute",
"w-max rounded-none bg-ui-panel border border-ui-panel-border",
interactive
? "pointer-events-auto p-3"
: "px-2.5 py-1.5 font-mono text-[11px] font-medium uppercase tracking-[0.1em] pointer-events-none",
"text-base-fg",
className ? className : "",
)}
>
{interactive ? (
content
) : (
<div className="flex flex-col gap-1">
{content}
{imageSrc && (
<img
src={imageSrc}
alt="tooltip"
className="mb-1 aspect-square w-56 rounded-none"
/>
)}
{description && (
<p className="font-sans text-xs font-normal normal-case tracking-normal text-base-fg/80">
{description}
</p>
)}
</div>
)}
</div>
<div
ref={setTooltipRef}
{...(portal ? { "data-modal-outside-safe": "" } : {})}
onPointerEnter={() => interactive && setIsHoveringTooltip(true)}
onPointerLeave={() => interactive && setIsHoveringTooltip(false)}
onClick={() => {
if (closeOnClick) {
setIsShowing(false);
}
}}
style={{
...getStyleForPosition(),
transitionDelay: `${delay}ms`,
transitionProperty: "opacity",
transitionDuration: "200ms",
transitionTimingFunction: "ease-out",
zIndex,
}}
className={twMerge(
isFixed ? "fixed" : "absolute",
"w-max rounded-[3px] bg-ui-panel border border-ui-panel-border",
interactive
? "pointer-events-auto p-3"
: "px-2.5 py-1.5 font-mono text-[11px] font-medium uppercase tracking-[0.1em] pointer-events-none",
"text-base-fg",
className ? className : "",
)}
>
{interactive ? (
content
) : (
<div className="flex flex-col gap-1">
{content}
{imageSrc && (
<img
src={imageSrc}
alt="tooltip"
className="mb-1 aspect-square w-56 rounded-none"
/>
)}
{description && (
<p className="font-sans text-xs font-normal normal-case tracking-normal text-base-fg/80">
{description}
</p>
)}
</div>
)}
</div>
</Transition>
);