release: 1.4.2, tweak UI, fix emoji on mac

src/assets/styles/anime.scss

@@ -1,21 +1,21 @@
 .page-enter {
   opacity: 0;
-  transform: scale(0.9);
+  clip-path: inset(0 100% 0 0); /* 完全隐藏内容 */
 }
 
 .page-enter-active {
   opacity: 1;
-  transform: scale(1);
-  transition: opacity 300ms, transform 300ms;
+  clip-path: inset(0 0 0 0); /* 逐渐显示整个内容 */
+  transition: opacity 300ms, clip-path 300ms ease-in-out;
 }
 
 .page-exit {
   opacity: 1;
-  transform: scale(0);
+  clip-path: inset(0 0 0 0); /* 完全显示内容 */
 }
 
 .page-exit-active {
   opacity: 0;
-  transform: scale(0.9);
-  transition: opacity 300ms, transform 300ms;
+  clip-path: inset(0 100% 0 0); /* 逐渐隐藏内容 */
+  transition: opacity 300ms, clip-path 300ms ease-in-out;
 }

src/assets/styles/index.scss

@@ -18,7 +18,7 @@ body {
   --scroller-color: #90939980;
   --background-color: #ffffff;
   --background-color-alpha: rgba(24, 103, 192, 0.1);
-  --border-radius: 12px;
+  --border-radius: 8px;
 }
 
 ::selection {

src/assets/styles/layout.scss

@@ -57,7 +57,7 @@
     .the-menu {
       flex: 1 1 80%;
       overflow-y: auto;
-      margin-bottom: 8px;
+      margin-bottom: 0px;
     }
 
     .the-traffic {

src/components/layout/layout-item.tsx

@@ -10,9 +10,7 @@ export const LayoutItem = (props: LinkProps) => {
   const navigate = useNavigate();
 
   return (
-    <ListItem
-      sx={{ py: 0.5, maxWidth: 250, mx: "auto", padding: "4px 0px 4px 2px" }}
-    >
+    <ListItem sx={{ py: 0.5, maxWidth: 250, mx: "auto", padding: "1px 0px" }}>
       <ListItemButton
         selected={!!match}
         sx={[

src/components/layout/use-custom-theme.ts

@@ -87,7 +87,7 @@ export const useCustomTheme = () => {
     }
 
     // css
-    const backgroundColor = mode === "light" ? "#ffffff" : "#0E1621";
+    const backgroundColor = mode === "light" ? "#ffffff" : "#0B121C";
     const selectColor = mode === "light" ? "#f5f5f5" : "#d5d5d5";
     const scrollColor = mode === "light" ? "#90939980" : "#54545480";
 

src/components/setting/mods/clash-core-viewer.tsx

@@ -8,7 +8,7 @@ import { Lock } from "@mui/icons-material";
 import {
   Box,
   Button,
-  IconButton,
+  Tooltip,
   List,
   ListItemButton,
   ListItemText,
@@ -124,18 +124,19 @@ export const ClashCoreViewer = forwardRef<DialogRef>((props, ref) => {
               >
                 <Lock fontSize="inherit" />
               </IconButton> */
-              <Button
-                variant="outlined"
-                size="small"
-                title={t("Tun mode requires")}
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  onGrant(each.core);
-                }}
-              >
-                {t("Grant")}
-              </Button>
+              <Tooltip title={t("Tun mode requires")}>
+                <Button
+                  variant="outlined"
+                  size="small"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onGrant(each.core);
+                  }}
+                >
+                  {t("Grant")}
+                </Button>
+              </Tooltip>
             )}
           </ListItemButton>
         ))}

src/pages/_theme.tsx

@@ -1,3 +1,6 @@
+import getSystem from "@/utils/get-system";
+const OS = getSystem();
+
 // default theme setting
 export const defaultTheme = {
   primary_color: "#1867c0",
@@ -9,7 +12,9 @@ export const defaultTheme = {
   warning_color: "#ed6c02",
   success_color: "#2e7d32",
   background_color: "#ffffff",
-  font_family: `"Roboto", "Helvetica", "Arial", sans-serif, "twemoji mozilla"`,
+  font_family: `"Roboto", "Helvetica", "Arial", sans-serif, ${
+    OS === "windows" ? "twemoji mozilla" : ""
+  }`,
 };
 
 // dark mode