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 ( - -
-
-

Yaklang 代理管理

-
-
- -
-
-
- ); + return ( + +
+
+

Yaklang 代理管理

+
+
+ +
+
+
+ ); } 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