diff --git a/src/entrypoints/options/main.tsx b/src/entrypoints/options/main.tsx
index 325dd75..f6e2c0b 100644
--- a/src/entrypoints/options/main.tsx
+++ b/src/entrypoints/options/main.tsx
@@ -1,7 +1,8 @@
import React from 'react';
-import { createRoot } from 'react-dom/client';
+import {createRoot} from 'react-dom/client';
import App from './App';
+import '@/styles/global.css'
import './style.css';
const root = createRoot(document.getElementById('app')!);
-root.render();
\ No newline at end of file
+root.render();
\ No newline at end of file
diff --git a/src/entrypoints/popup/App.css b/src/entrypoints/popup/App.css
index 1f495b0..77cb0b1 100644
--- a/src/entrypoints/popup/App.css
+++ b/src/entrypoints/popup/App.css
@@ -42,8 +42,8 @@
}
.popup-container {
- width: 320px;
- min-height: 400px;
+ /*width: 320px;*/
+ /*min-height: 400px;*/
display: flex;
flex-direction: column;
padding: 0;
@@ -52,7 +52,7 @@
}
.popup-header {
- background-color: #F28B44;
+ background-color: var(--yakit-primary);
color: white;
padding: 12px 16px;
text-align: center;
diff --git a/src/entrypoints/popup/App.tsx b/src/entrypoints/popup/App.tsx
index 4c9610c..e389576 100644
--- a/src/entrypoints/popup/App.tsx
+++ b/src/entrypoints/popup/App.tsx
@@ -1,25 +1,26 @@
import React from 'react';
-import { ConfigProvider } from 'antd';
-import { ProxySwitch } from '../../components/ProxySwitch';
+import {ConfigProvider} from 'antd';
+import {ProxySwitch} from '@/components/ProxySwitch';
+import '@/styles/global.css'
import './App.css';
export default function App() {
- return (
-
-
-
- );
+ return (
+
+
+
+ );
}
diff --git a/src/entrypoints/popup/style.css b/src/entrypoints/popup/style.css
index 2c3fac6..18b2635 100644
--- a/src/entrypoints/popup/style.css
+++ b/src/entrypoints/popup/style.css
@@ -27,8 +27,6 @@ body {
margin: 0;
display: flex;
place-items: center;
- min-width: 320px;
- min-height: 100vh;
}
h1 {
diff --git a/src/styles/global.css b/src/styles/global.css
new file mode 100644
index 0000000..46ccb10
--- /dev/null
+++ b/src/styles/global.css
@@ -0,0 +1,58 @@
+:root {
+ --yakit-primary: #F28B44;
+ --yakit-primary-hover: #f4a061;
+ --yakit-primary-active: #e87633;
+ --yakit-primary-5: #fff5eb;
+ --yakit-primary-10: rgba(242, 139, 68, 0.1);
+
+ /* 添加其他全局变量 */
+ --border-color: #f0f0f0;
+ --text-color: #333;
+ --icon-color: #666;
+
+ /* 菜单相关变量 */
+ --menu-item-height: 28px;
+ --menu-padding: 4px;
+ --menu-width: 180px;
+}
+
+.ant-btn-primary {
+ background-color: var(--yakit-primary) !important;
+}
+
+.ant-btn-primary:hover {
+ background-color: var(--yakit-primary-hover) !important;
+}
+
+.ant-btn-primary:active {
+ background-color: var(--yakit-primary-active) !important;
+}
+
+.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
+ background-color: var(--yakit-primary-5) !important;
+}
+
+.ant-select-focused .ant-select-selector,
+.ant-input-focused,
+.ant-input:focus,
+.ant-input-number-focused,
+.ant-input-number:focus {
+ border-color: var(--yakit-primary) !important;
+ box-shadow: 0 0 0 2px var(--yakit-primary-10) !important;
+}
+
+.ant-btn:not(.ant-btn-primary):hover {
+ color: var(--yakit-primary) !important;
+ border-color: var(--yakit-primary) !important;
+}
+
+/* 移除所有滚动条 */
+::-webkit-scrollbar {
+ display: none;
+}
+
+/* 确保所有内容都在视口内 */
+html, body {
+ overflow: hidden;
+ height: fit-content;
+}
\ No newline at end of file