feat(DownloadOverlay): full redesign

src/components/common/AchievementToast.tsx

@@ -109,7 +109,7 @@ export function AchievementToast({
           }
           className={onClick ? "cursor-pointer" : ""}
         >
-          <div className="flex gap-3 p-1 min-w-[380px] max-w-[380px] min-h-[100px] mc-options-bg">
+          <div className="flex gap-3 p-1 min-w-[380px] max-w-[380px] min-h-[80px] mc-options-bg">
             <div className="h-[54px] w-[54px] flex-shrink-0 flex items-center justify-center bg-[url(/images/empty.png)] bg-cover bg-center bg-no-repeat self-center">
               {getIcon()}
             </div>

src/components/layout/DownloadOverlay.tsx

@@ -20,15 +20,15 @@ export const DownloadOverlay = memo(function DownloadOverlay({ downloadProgress,
       animate={{ opacity: 1, scale: 1, y: 0 }}
       exit={{ opacity: 0, scale: 0.95, y: -10 }}
       transition={{ duration: 0.15 }}
-      className="absolute top-14 right-8 z-100 w-72 bg-[#1a1a1a] border-2 border-[#555] shadow-2xl"
+      className="absolute top-14 right-8 z-100 w-100 mc-options-bg"
       style={{ imageRendering: "pixelated" }}
     >
-      <div className="px-3 pt-2.5 pb-2 border-b border-white/10">
+      <div className="px-3 pt-2.5 pb-2">
-        <span className="text-[13px] text-[#FFFF55] mc-text-shadow uppercase tracking-widest">
+        <span className="text-xl text-[#333333] mc-text-shadow">
           {t("download.title")}
         </span>
       </div>
-      <div className="flex flex-col gap-1.5 px-3 py-2 max-h-[260px] overflow-y-auto custom-scrollbar">
+      <div className="flex flex-col gap-1.5 py-2 max-h-[260px] overflow-y-auto custom-scrollbar mc-options-fg">
         {downloadingIds.map((id) => {
           const pct = downloadProgress[id] ?? 0;
           const edition = editions.find((e) => e.instanceId === id || e.id === id);
@@ -38,62 +38,66 @@ export const DownloadOverlay = memo(function DownloadOverlay({ downloadProgress,
               ? id.replace(/^runner_/, "")
               : t("download.gameFiles"));
           return (
-            <div key={id} className="flex items-center gap-2.5">
+            <div key={id} className="flex items-center mc-options-bg">
-              {edition?.logo ? (
-                edition.logo.startsWith("http") || edition.logo.startsWith("/images") ? (
-                  <img
-                    src={edition.logo}
-                    alt=""
-                    className="w-6 h-6 object-contain shrink-0"
-                    style={{ imageRendering: "pixelated" }}
-                  />
-                ) : (
-                  <ScreenshotImage
-                    path={edition.logo}
-                    alt=""
-                    className="w-6 h-6 object-contain shrink-0"
-                    style={{ imageRendering: "pixelated" }}
-                  />
-                )
-              ) : edition?.titleImage ? (
-                edition.titleImage.startsWith("http") || edition.titleImage.startsWith("/images") ? (
-                  <img
-                    src={edition.titleImage}
-                    alt=""
-                    className="w-6 h-6 object-contain shrink-0"
-                    style={{ imageRendering: "pixelated" }}
-                  />
-                ) : (
-                  <ScreenshotImage
-                    path={edition.titleImage}
-                    alt=""
-                    className="w-6 h-6 object-contain shrink-0"
-                    style={{ imageRendering: "pixelated" }}
-                  />
-                )
-              ) : (
-                <div className="w-6 h-6 flex items-center justify-center border border-[#555] bg-black/40 shrink-0">
-                  <svg className="w-3 h-3 text-[#FFFF55]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
-                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-                    <polyline points="7 10 12 15 17 10" />
-                    <line x1="12" y1="15" x2="12" y2="3" />
-                  </svg>
-                </div>
-              )}
               <div className="flex-1 min-w-0 flex flex-col gap-1">
-                <span className="text-[11px] text-white mc-text-shadow truncate leading-tight">
+                <div className="flex-1 flex flex-row justify-between">
+                  <div className="flex-1 flex flex-row">
+                    {edition?.logo ? (
+                    edition.logo.startsWith("http") || edition.logo.startsWith("/images") ? (
+                      <img
+                        src={edition.logo}
+                        alt=""
+                        className="w-6 h-6 object-contain shrink-0"
+                        style={{ imageRendering: "pixelated" }}
+                      />
+                    ) : (
+                      <ScreenshotImage
+                        path={edition.logo}
+                        alt=""
+                        className="w-6 h-6 object-contain shrink-0"
+                        style={{ imageRendering: "pixelated" }}
+                      />
+                    )
+                  ) : edition?.titleImage ? (
+                    edition.titleImage.startsWith("http") || edition.titleImage.startsWith("/images") ? (
+                      <img
+                        src={edition.titleImage}
+                        alt=""
+                        className="w-6 h-6 object-contain shrink-0"
+                        style={{ imageRendering: "pixelated" }}
+                      />
+                    ) : (
+                      <ScreenshotImage
+                        path={edition.titleImage}
+                        alt=""
+                        className="w-6 h-6 object-contain shrink-0"
+                        style={{ imageRendering: "pixelated" }}
+                      />
+                    )
+                  ) : (
+                    <div className="w-6 h-6 flex items-center justify-center border border-[#555] bg-black/40 shrink-0">
+                      <svg className="w-3 h-3 text-[#FFFF55]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
+                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                        <polyline points="7 10 12 15 17 10" />
+                        <line x1="12" y1="15" x2="12" y2="3" />
+                      </svg>
+                    </div>
+                  )}
+                <span className="text-sm text-[#333333] truncate leading-tight shrink-0 self-center pl-1">
                   {name}
                 </span>
+                </div>
+                <span className="text-sm text-[#333333] w-7 text-right shrink-0 pr-1">
+                  {Math.floor(pct)}%
+                </span>
+                </div>
                 <div className="flex items-center gap-1.5">
-                  <div className="flex-1 h-2 border border-white/30 bg-black/60">
+                  <div className="flex-1 h-3 border border-[#666666] bg-[#666666]">
                     <div
-                      className="h-full bg-[#FFFF55]"
+                      className="h-full bg-[#00ff61]"
                       style={{ width: `${pct}%` }}
                     />
                   </div>
-                  <span className="text-[10px] text-gray-400 mc-text-shadow w-7 text-right shrink-0 leading-none">
-                    {Math.floor(pct)}%
-                  </span>
                 </div>
               </div>
             </div>

src/css/index.css

@@ -72,6 +72,14 @@
     image-rendering: pixelated;
 }
 
+.mc-options-fg { /*neo: tysm https://leanrada.com/9-slicer/ */
+    border-image: url("/images/empty.png") 30 30 30 30 fill / 30px 30px 30px 30px;
+    border-width: 12px;
+    border-style: solid;
+    border-color: transparent;
+    image-rendering: pixelated;
+}
+
 .mc-lce-tab {
     background: linear-gradient(180deg, #c0c0c0 0%, #a0a0a0 100%);
     border: 2px solid #808080;