diff --git a/src/assets/image/logo.png b/src/assets/image/logo.png
new file mode 100644
index 0000000..c384c7c
Binary files /dev/null and b/src/assets/image/logo.png differ
diff --git a/src/assets/image/logo.svg b/src/assets/image/logo.svg
new file mode 100644
index 0000000..750fb40
--- /dev/null
+++ b/src/assets/image/logo.svg
@@ -0,0 +1,18 @@
+
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 4fe2cab..20707e6 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -6,17 +6,24 @@ body {
-webkit-font-smoothing: antialiased;
}
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
- monospace;
+:root {
+ --primary-main: #5b5c9d;
+ --text-primary: #637381;
+ --selection-color: #f5f5f5;
+}
+
+::selection {
+ color: var(--selection-color);
+ background-color: var(--primary-main);
}
*::-webkit-scrollbar {
- width: 8px;
+ width: 6px;
+ height: 6px;
background: transparent;
}
*::-webkit-scrollbar-thumb {
- border-radius: 8px;
+ border-radius: 6px;
background-color: rgba(#909399, 0.5);
}
diff --git a/src/assets/styles/layout.scss b/src/assets/styles/layout.scss
index 7db9ae1..2499145 100644
--- a/src/assets/styles/layout.scss
+++ b/src/assets/styles/layout.scss
@@ -1,28 +1,42 @@
.layout {
width: 100%;
- height: 100vh;
display: flex;
+ overflow: hidden;
&__sidebar {
position: relative;
- height: 100%;
flex: 1 0 25%;
- max-width: 250px;
+ height: 100vh;
+ max-width: 225px;
+ min-width: 125px;
overflow: hidden auto;
}
&__content {
+ position: relative;
flex: 1 1 75%;
- height: 100%;
+ height: 100vh;
+ overflow: overlay;
+ box-sizing: border-box;
+ }
+
+ &__logo {
+ width: 100%;
+ height: auto;
+ max-width: 180px;
+ max-height: 180px;
+ margin: 0 auto;
+ padding: 8px 8px 0;
+ user-select: none;
+ text-align: center;
box-sizing: border-box;
- overflow: hidden auto;
}
&__traffic {
position: absolute;
left: 0;
right: 0;
- bottom: 18px;
+ bottom: 8px;
> div {
margin: 0 auto;
diff --git a/src/main.tsx b/src/main.tsx
index 1e73217..af6d7de 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,3 +1,4 @@
+///
import "./assets/styles/index.scss";
import React from "react";
diff --git a/src/pages/_layout.tsx b/src/pages/_layout.tsx
index 0446538..199ae86 100644
--- a/src/pages/_layout.tsx
+++ b/src/pages/_layout.tsx
@@ -1,14 +1,9 @@
import { useMemo } from "react";
import { Route, Routes } from "react-router-dom";
import { useRecoilValue } from "recoil";
-import {
- createTheme,
- List,
- Paper,
- ThemeProvider,
- Typography,
-} from "@mui/material";
+import { createTheme, List, Paper, ThemeProvider } from "@mui/material";
import { atomPaletteMode } from "../states/setting";
+import LogoSvg from "../assets/image/logo.svg";
import LogPage from "../pages/log";
import HomePage from "../pages/home";
import ProxyPage from "../pages/proxy";
@@ -45,8 +40,19 @@ const Layout = () => {
];
const theme = useMemo(() => {
- const bgcolor = paletteMode === "light" ? "#f5f5f5" : "#000";
- document.documentElement.style.background = bgcolor;
+ if (paletteMode === "light") {
+ document.documentElement.style.background = "#f5f5f5";
+ document.documentElement.style.setProperty(
+ "--selection-color",
+ "#f5f5f5"
+ );
+ } else {
+ document.documentElement.style.background = "#000";
+ document.documentElement.style.setProperty(
+ "--selection-color",
+ "#d5d5d5"
+ );
+ }
return createTheme({
palette: {
@@ -66,13 +72,9 @@ const Layout = () => {
-
- Clash Verge
-
+
+
+
{routers.map((router) => (