diff --git a/content.js b/content.js index 3248192..fa2de5f 100644 --- a/content.js +++ b/content.js @@ -22,11 +22,13 @@ var style = document.createElement('style'); style.id = 'magnet-panel-style'; style.textContent = [ - /* === 字体引入 === */ + '/* === 字体引入 === */', '@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap");', - /* === CSS 变量 === */ - ':root {', + '/* === CSS 变量 === */', + '@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap");', + + ':root {' ' --m-bg-deep: #0a0e14;', ' --m-bg-primary: #0f1419;', ' --m-bg-secondary: #1a1f2e;', @@ -55,8 +57,8 @@ ' --m-shadow-glow: 0 0 20px var(--m-accent-glow), 0 0 40px rgba(0, 212, 170, 0.15);', '}', - /* === 悬浮球 === */ - '#magnet-float-ball{', + '/* === 悬浮球 === */', + '#magnet-float-ball{' ' position:fixed;bottom:24px;right:24px;', ' width:60px;height:60px;', ' background:linear-gradient(135deg, #0f1419 0%, #1a1f2e 100%);', @@ -73,20 +75,15 @@ ' transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);', ' animation:magnet-pulse 2.5s ease-in-out infinite;', '}', - '#magnet-float-ball:hover{', - ' transform:scale(1.08);', - ' box-shadow:0 0 30px var(--m-accent-glow), 0 0 60px rgba(0, 212, 170, 0.2), inset 0 0 30px rgba(0, 212, 170, 0.15);', - '}', - '#magnet-float-ball:active{transform:scale(0.95);}', - /* === 脉冲动画 === */ - '@keyframes magnet-pulse{', + '/* === 脉冲动画 === */', + '@keyframes magnet-pulse{' ' 0%, 100%{box-shadow:var(--m-shadow-glow), inset 0 0 20px rgba(0, 212, 170, 0.1);}', ' 50%{box-shadow:0 0 30px var(--m-accent-glow), 0 0 50px rgba(0, 212, 170, 0.2), inset 0 0 25px rgba(0, 212, 170, 0.15);}', '}', - /* === 主面板 === */ - '#magnet-floating-panel{', + '/* === 主面板 === */', + '#magnet-floating-panel{' ' position:fixed;right:20px;bottom:20px;', ' width:min(800px, calc(100vw - 40px));', ' height:min(85vh, 860px);', @@ -103,13 +100,9 @@ ' backdrop-filter:blur(20px);', ' animation:magnet-panel-in 0.4s cubic-bezier(0.4, 0, 0.2, 1);', '}', - '@keyframes magnet-panel-in{', - ' from{opacity:0;transform:translateY(20px) scale(0.98);}', - ' to{opacity:1;transform:translateY(0) scale(1);}', - '}', - /* === 面板头部 === */ - '#magnet-floating-panel .magnet-panel-header{', + '/* === 面板头部 === */', + '#magnet-floating-panel .magnet-panel-header{' ' display:flex;justify-content:space-between;align-items:flex-start;', ' padding:20px 24px 16px;', ' background:linear-gradient(180deg, rgba(0, 212, 170, 0.08) 0%, transparent 100%);', @@ -135,8 +128,8 @@ ' display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;', '}', - /* === 切换按钮 === */ - '#magnet-floating-panel .magnet-panel-switch{', + '/* === 切换按钮 === */', + '#magnet-floating-panel .magnet-panel-switch{' ' padding:10px 18px;', ' border:1px solid var(--m-border);', ' border-radius:var(--m-radius-lg);', @@ -160,8 +153,8 @@ ' box-shadow:0 0 15px rgba(0, 212, 170, 0.2);', '}', - /* === 关闭按钮 === */ - '#magnet-floating-panel .magnet-panel-close{', + '/* === 关闭按钮 === */', + '#magnet-floating-panel .magnet-panel-close{' ' width:36px;height:36px;', ' border:1px solid var(--m-border);', ' border-radius:var(--m-radius-md);', @@ -177,8 +170,8 @@ ' color:var(--m-error);', '}', - /* === 设置区域 === */ - '#magnet-settings{', + '/* === 设置区域 === */', + '#magnet-settings{' ' padding:16px 20px;', ' background:var(--m-bg-secondary);', ' border-bottom:1px solid var(--m-border);', @@ -189,8 +182,8 @@ '}', '#magnet-floating-panel .magnet-control-row > *{min-width:0;}', - /* === 输入框样式 === */ - '#magnet-settings input[type="text"],', + '/* === 输入框样式 === */', + '#magnet-settings input[type="text"],' '#magnet-settings input[type="number"],', '#magnet-settings select{', ' padding:10px 14px;', @@ -210,8 +203,8 @@ '}', '#magnet-settings input::placeholder{color:var(--m-text-muted);}', - /* === 主按钮 === */ - '#magnet-settings button:not(.magnet-panel-switch){', + '/* === 主按钮 === */', + '#magnet-settings button:not(.magnet-panel-switch){' ' padding:10px 20px;', ' background:linear-gradient(135deg, var(--m-accent) 0%, #00f5c4 100%);', ' border:none;', @@ -231,8 +224,8 @@ ' transform:translateY(0);', '}', - /* === 内容区域 === */ - '#magnet-floating-panel .magnet-panel-content{', + '/* === 内容区域 === */', + '#magnet-floating-panel .magnet-panel-content{' ' flex:1;min-height:0;', ' padding:16px 20px;', ' background:var(--m-bg-primary);', @@ -243,8 +236,8 @@ '}', '#magnet-floating-panel .magnet-view.is-active{display:flex;}', - /* === 视图工具栏 === */ - '#magnet-floating-panel .magnet-view-toolbar{', + '/* === 视图工具栏 === */', + '#magnet-floating-panel .magnet-view-toolbar{' ' display:flex;justify-content:space-between;align-items:center;', ' gap:12px;padding:14px 18px;', ' background:var(--m-bg-card);', @@ -264,8 +257,8 @@ ' font-size:12px;color:var(--m-text-secondary);', '}', - /* === 磁力列表 === */ - '#magnet-list{', + '/* === 磁力列表 === */', + '#magnet-list{' ' display:flex;flex-direction:column;gap:10px;', ' min-height:0;overflow-y:auto;padding-right:6px;', ' scrollbar-width:thin;scrollbar-color:var(--m-accent) var(--m-bg-secondary);', @@ -274,8 +267,8 @@ '#magnet-list::-webkit-scrollbar-track{background:var(--m-bg-secondary);border-radius:3px;}', '#magnet-list::-webkit-scrollbar-thumb{background:var(--m-accent);border-radius:3px;}', - /* === 列表项 === */ - '.magnet-item{', + '/* === 列表项 === */', + '.magnet-item{' ' display:flex;align-items:flex-start;gap:14px;', ' padding:14px 16px;', ' background:var(--m-bg-card);', @@ -303,8 +296,8 @@ '}', '.magnet-title:hover{color:var(--m-accent);}', - /* === 复制按钮 === */ - '.magnet-copy-btn{', + '/* === 复制按钮 === */', + '.magnet-copy-btn{' ' padding:8px 16px;', ' background:linear-gradient(135deg, var(--m-accent) 0%, #00f5c4 100%);', ' color:var(--m-bg-deep);', @@ -321,8 +314,8 @@ '}', '.magnet-copy-btn:active{transform:scale(0.98);}', - /* === 缓存面板 === */ - '#magnet-cache-panel{', + '/* === 缓存面板 === */', + '#magnet-cache-panel{' ' flex:1;min-height:0;overflow-y:auto;padding-right:6px;', ' scrollbar-width:thin;scrollbar-color:var(--m-accent) var(--m-bg-secondary);', '}', @@ -330,8 +323,8 @@ '#magnet-cache-panel::-webkit-scrollbar-track{background:var(--m-bg-secondary);border-radius:3px;}', '#magnet-cache-panel::-webkit-scrollbar-thumb{background:var(--m-accent);border-radius:3px;}', - /* === 缓存网格 === */ - '.magnet-cache-grid{', + '/* === 缓存网格 === */', + '.magnet-cache-grid{' ' display:grid;', ' grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));', ' gap:12px;margin-bottom:16px;', @@ -356,8 +349,8 @@ ' color:var(--m-accent);', '}', - /* === 缓存区块 === */ - '.magnet-cache-section{margin-top:16px;}', + '/* === 缓存区块 === */', + '.magnet-cache-section{margin-top:16px;}' '.magnet-cache-section-title{', ' font-family:var(--m-font-display);', ' font-size:13px;font-weight:700;', @@ -384,16 +377,16 @@ ' margin-top:6px;line-height:1.5;', '}', - /* === 底部 === */ - '#magnet-floating-panel .magnet-panel-footer{', + '/* === 底部 === */', + '#magnet-floating-panel .magnet-panel-footer{' ' padding:16px 20px 20px;', ' background:var(--m-bg-secondary);', ' border-top:1px solid var(--m-border);', ' display:flex;flex-direction:column;gap:12px;', '}', - /* === 状态栏 === */ - '#magnet-status{', + '/* === 状态栏 === */', + '#magnet-status{' ' padding:12px 16px;border-radius:var(--m-radius-md);', ' font-size:12px;line-height:1.6;', ' background:var(--m-bg-card);', @@ -416,8 +409,8 @@ ' background:rgba(16, 185, 129, 0.1);', '}', - /* === 一键复制按钮 === */ - '#magnet-copy-all{', + '/* === 一键复制按钮 === */', + '#magnet-copy-all{' ' width:100%;padding:14px 20px;', ' background:linear-gradient(135deg, var(--m-accent) 0%, #00f5c4 100%);', ' color:var(--m-bg-deep);', @@ -434,8 +427,8 @@ '}', '#magnet-copy-all:active{transform:translateY(0);}', - /* === 调试菜单 === */ - '#magnet-debug-menu{', + '/* === 调试菜单 === */', + '#magnet-debug-menu{' ' background:var(--m-bg-card) !important;', ' border:1px solid var(--m-border-accent) !important;', ' border-radius:var(--m-radius-md) !important;', @@ -448,8 +441,8 @@ ' accent-color:var(--m-accent);', '}', - /* === 响应式 === */ - '@media (max-width: 900px){', + '/* === 响应式 === */', + '@media (max-width: 900px){' ' #magnet-floating-panel{', ' right:10px;bottom:10px;', ' width:calc(100vw - 20px);', @@ -461,7 +454,7 @@ ' #magnet-floating-panel .magnet-panel-footer{padding-left:16px;padding-right:16px;}', '}', - /* === 空状态 === */ + '/* === 空状态 === */', '.magnet-empty-state{', ' display:flex;flex-direction:column;align-items:center;justify-content:center;', ' padding:40px 20px;text-align:center;', @@ -520,7 +513,7 @@ ' background:rgba(239,68,68,0.15);color:var(--m-error);', '}', - '/* === 吜索记录下拉 === */', + '/* === 搜索记录下拉 === */', '.magnet-history-dropdown{', ' position:absolute;top:100%;left:0;right:0;background:var(--m-bg-card);border:1px solid var(--m-border);border-radius:var(--m-radius-md);box-shadow:var(--m-shadow-lg);z-index:100;max-height:200px;overflow-y:auto;', '}',