feat: components with custom background use transparent background

This commit is contained in:
hamster1963
2024-12-19 10:40:11 +08:00
parent d8c68ffe5f
commit 3d66582a3a
10 changed files with 106 additions and 8 deletions
+16
View File
@@ -43,6 +43,10 @@ export default function Servers() {
const [settingsOpen, setSettingsOpen] = useState<boolean>(false)
const [currentGroup, setCurrentGroup] = useState<string>("All")
const customBackgroundImage =
// @ts-expect-error ShowNetTransfer is a global variable
(window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
useEffect(() => {
const showServicesState = localStorage.getItem("showServices")
if (showServicesState !== null) {
@@ -224,6 +228,9 @@ export default function Servers() {
{
"shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-500": showMap === "1",
},
{
"bg-opacity-50": customBackgroundImage,
},
)}
>
<MapIcon className="size-[13px]" />
@@ -238,6 +245,9 @@ export default function Servers() {
{
"shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-500": showServices === "1",
},
{
"bg-opacity-50": customBackgroundImage,
},
)}
>
<ChartBarSquareIcon className="size-[13px]" />
@@ -252,6 +262,9 @@ export default function Servers() {
{
"shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-500": inline === "1",
},
{
"bg-opacity-50": customBackgroundImage,
},
)}
>
<ViewColumnsIcon className="size-[13px]" />
@@ -267,6 +280,9 @@ export default function Servers() {
"shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] dark:bg-stone-700 bg-stone-200":
settingsOpen,
},
{
"dark:bg-stone-800/50 bg-stone-100/50 ": customBackgroundImage,
},
)}
>
<p className="text-[10px] font-bold whitespace-nowrap">