/* 微博地下偶像追踪工具 - 极致骚包设计 */ :root { --primary: #ff1493; /* 更鲜艳的深粉色 - 地下偶像主色调 */ --primary-light: #ff69b4; --secondary: #8a2be2; /* 更鲜艳的紫色 */ --accent: #00ffff; /* 青色 - 霓虹灯效果 */ --neon: #ff00ff; /* 霓虹粉色 */ --surface: #0a0a0a; --surface-alt: #1a1a1a; --border: #333333; --text: #ffffff; --text-light: #cccccc; --shadow: 0 4px 20px rgba(255, 20, 147, 0.3); --shadow-lg: 0 10px 30px rgba(255, 20, 147, 0.5); --radius: 16px; --radius-sm: 10px; --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --glow: 0 0 20px rgba(255, 20, 147, 0.5); } /* 霓虹灯文字效果 */ .neon-text { color: var(--primary); text-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary), 0 0 30px var(--primary); animation: neon-pulse 2s infinite alternate; } @keyframes neon-pulse { from { text-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary), 0 0 30px var(--primary); } to { text-shadow: 0 0 20px var(--primary), 0 0 30px var(--primary), 0 0 40px var(--primary); } } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', system-ui, sans-serif; background: radial-gradient(circle at 20% 20%, #1a0033 0%, transparent 50%), radial-gradient(circle at 80% 80%, #33001a 0%, transparent 50%), linear-gradient(135deg, #0a0014 0%, #1a0033 50%, #33001a 100%); min-height: 100vh; color: var(--text); position: relative; overflow-x: hidden; } /* 星空背景效果 */ body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(white 1px, transparent 1px), radial-gradient(white 1px, transparent 1px); background-size: 50px 50px, 100px 100px; background-position: 0 0, 25px 25px; opacity: 0.1; z-index: -1; animation: twinkle 3s infinite alternate; } @keyframes twinkle { from { opacity: 0.05; } to { opacity: 0.15; } } /* 浮动粒子效果 */ .floating-particles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; } .particle { position: absolute; width: 2px; height: 2px; background: var(--primary); border-radius: 50%; animation: float 6s infinite linear; } @keyframes float { 0% { transform: translateY(100vh) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-100px) rotate(360deg); opacity: 0; } } /* 头部样式 - 地下偶像舞台效果 */ #topbar { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 50%, var(--neon) 100%); padding: 0; box-shadow: var(--shadow); position: relative; overflow: hidden; } #topbar::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); animation: stage-light 3s infinite; } @keyframes stage-light { 0% { left: -100%; } 100% { left: 100%; } } /* 主容器 */ main { max-width: 1200px; margin: 0 auto; padding: 2rem; } /* 标签页样式 - 地下偶像舞台效果 */ .subtabs { display: flex; gap: 1rem; margin-bottom: 2rem; background: rgba(10, 10, 10, 0.8); padding: 0.5rem; border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(10px); border: 1px solid rgba(255, 20, 147, 0.3); position: relative; } .subtabs::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255, 20, 147, 0.1), rgba(138, 43, 226, 0.1)); border-radius: var(--radius); z-index: -1; } .subtab { border: none; background: transparent; padding: 1rem 2rem; border-radius: var(--radius-sm); cursor: pointer; font-weight: 700; color: var(--text-light); transition: var(--transition); position: relative; overflow: hidden; text-transform: uppercase; letter-spacing: 1px; border: 2px solid transparent; } .subtab::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.6s; } .subtab::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width 0.3s; } .subtab:hover::before { left: 100%; } .subtab:hover::after { width: 100%; } .subtab:hover { color: var(--primary); transform: translateY(-2px); border-color: rgba(255, 20, 147, 0.5); box-shadow: 0 5px 15px rgba(255, 20, 147, 0.3); } .subtab.active { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; box-shadow: 0 0 20px rgba(255, 20, 147, 0.5), 0 0 40px rgba(255, 20, 147, 0.3); border: 2px solid var(--accent); animation: tab-glow 2s infinite alternate; } @keyframes tab-glow { from { box-shadow: 0 0 20px rgba(255, 20, 147, 0.5), 0 0 40px rgba(255, 20, 147, 0.3); } to { box-shadow: 0 0 30px rgba(255, 20, 147, 0.7), 0 0 60px rgba(255, 20, 147, 0.5); } } /* 面板样式 - 舞台灯光效果 */ .panel { background: rgba(26, 26, 26, 0.9); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow), 0 0 0 1px rgba(255, 20, 147, 0.2); margin-bottom: 2rem; border: 1px solid rgba(255, 20, 147, 0.3); backdrop-filter: blur(10px); position: relative; overflow: hidden; } .panel::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(from 0deg, transparent, rgba(255, 20, 147, 0.1), transparent); animation: rotate-bg 10s linear infinite; z-index: -1; } @keyframes rotate-bg { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* 紧凑布局 */ .compact { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; } /* 输入框样式 */ .compact input[type="text"], .compact input[type="date"], .compact select { padding: 0.75rem 1rem; border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-size: 0.9rem; transition: var(--transition); min-width: 200px; } .compact input[type="text"]:focus, .compact input[type="date"]:focus, .compact select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255, 45, 149, 0.1); } /* 按钮样式 - 地下偶像舞台按钮 */ .btn { padding: 0.75rem 1.5rem; border: none; border-radius: var(--radius-sm); cursor: pointer; font-weight: 700; font-size: 0.9rem; transition: var(--transition); position: relative; overflow: hidden; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 20px rgba(255, 20, 147, 0.3); text-transform: uppercase; letter-spacing: 0.5px; border: 2px solid transparent; } .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); transition: left 0.6s; } .btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%); transition: all 0.3s; transform: translate(-50%, -50%); } .btn:hover::before { left: 100%; } .btn:hover::after { width: 100%; height: 100%; } .btn:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 30px rgba(255, 20, 147, 0.5), 0 0 60px rgba(255, 0, 255, 0.3); border-color: var(--accent); } .btn:active { transform: translateY(0) scale(0.98); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 10px rgba(255, 20, 147, 0.3); } /* 特殊按钮效果 */ .btn-special { background: linear-gradient(135deg, var(--neon), var(--accent)); animation: btn-pulse 2s infinite alternate; } @keyframes btn-pulse { from { box-shadow: 0 0 20px rgba(255, 0, 255, 0.5), 0 0 40px rgba(0, 255, 255, 0.3); } to { box-shadow: 0 0 30px rgba(255, 0, 255, 0.7), 0 0 60px rgba(0, 255, 255, 0.5); } } /* 预设按钮样式 */ .preset { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1rem 0; } .chip { background: var(--surface-alt); color: var(--text); border: 2px solid var(--border); padding: 0.5rem 1rem; border-radius: 20px; cursor: pointer; font-size: 0.8rem; font-weight: 500; transition: var(--transition); } .chip:hover { background: linear-gradient(135deg, var(--primary), var(--primary-light)); color: white; border-color: var(--primary); transform: translateY(-1px); } /* 结果区域 */ .results { margin-top: 1.5rem; display: grid; gap: 1rem; } /* 卡片样式 - 偶像经济风格 */ .card { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; background: var(--surface); box-shadow: var(--shadow); transition: var(--transition); position: relative; overflow: hidden; } .card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(to bottom, var(--primary), var(--secondary)); } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .meta { font-size: 0.8rem; color: var(--text-light); margin-bottom: 0.5rem; } /* 状态提示 */ .status { margin: 1rem 0; padding: 1rem; border: 1px solid #ffd666; background: #fffbe6; color: #a87000; border-radius: var(--radius-sm); font-weight: 500; } /* 调试区域 */ .debug { margin: 1.5rem 0; padding: 1rem; border: 1px dashed #cbd5e1; border-radius: var(--radius); background: var(--surface-alt); } .debug-actions { display: flex; gap: 0.5rem; margin-bottom: 1rem; } .debug-output { height: 240px; overflow: auto; background: #fafafa; padding: 1rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.8rem; white-space: pre-wrap; border-radius: var(--radius-sm); color: #000000; } /* 模态框样式 - 地下偶像专属设置面板 */ .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(10px); } .modal.hidden { display: none; } .modal-body { background: radial-gradient(circle at 20% 20%, rgba(255, 20, 147, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(138, 43, 226, 0.1) 0%, transparent 50%), linear-gradient(135deg, rgba(10, 10, 10, 0.95) 0%, rgba(26, 26, 26, 0.95) 100%); padding: 2rem; border-radius: var(--radius); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 20, 147, 0.3), 0 0 50px rgba(255, 0, 255, 0.2); max-width: 500px; width: 90%; border: 2px solid rgba(255, 20, 147, 0.5); backdrop-filter: blur(20px); position: relative; overflow: hidden; } .modal-body::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(45deg, rgba(255, 20, 147, 0.3), rgba(138, 43, 226, 0.3), rgba(0, 255, 255, 0.3), rgba(255, 20, 147, 0.3)); border-radius: var(--radius); z-index: -1; animation: modal-border 4s linear infinite; } @keyframes modal-border { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .modal-body h3 { margin-bottom: 1.5rem; color: var(--primary); font-size: 1.5rem; text-align: center; text-shadow: 0 0 10px rgba(255, 20, 147, 0.5); animation: neon-pulse 2s infinite alternate; } .modal-body label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--text); text-shadow: 0 0 5px rgba(255, 255, 255, 0.3); } .modal-body input { width: 100%; padding: 0.75rem; border: 2px solid rgba(255, 20, 147, 0.5); border-radius: var(--radius-sm); margin-bottom: 1rem; transition: var(--transition); background: rgba(26, 26, 26, 0.8); color: white; font-weight: 500; } .modal-body input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.1), 0 0 20px rgba(0, 255, 255, 0.3); } .modal-actions { display: flex; gap: 1.5rem; justify-content: center; margin-top: 2rem; } /* 设置页面按钮专用样式 - 极致骚包效果 */ .modal-actions button { padding: 1rem 2rem; border: none; border-radius: var(--radius-sm); cursor: pointer; font-weight: 700; font-size: 1rem; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; text-transform: uppercase; letter-spacing: 1px; min-width: 120px; z-index: 1; } /* 保存按钮 - 成功确认效果 */ #btn-save-settings { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; border: 2px solid transparent; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 25px rgba(255, 20, 147, 0.4); } #btn-save-settings::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.6s; z-index: -1; } #btn-save-settings::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: radial-gradient(circle, rgba(0, 255, 0, 0.3) 0%, transparent 70%); transition: all 0.3s; transform: translate(-50%, -50%); z-index: -1; } #btn-save-settings:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 40px rgba(255, 20, 147, 0.6), 0 0 80px rgba(0, 255, 0, 0.3); border-color: var(--accent); } #btn-save-settings:hover::before { left: 100%; } #btn-save-settings:hover::after { width: 150%; height: 150%; } #btn-save-settings:active { transform: translateY(-1px) scale(0.98); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 15px rgba(255, 20, 147, 0.3); } /* 保存按钮成功动画 */ #btn-save-settings.saving { animation: save-success 1.5s ease-in-out; } @keyframes save-success { 0% { transform: scale(1); background: linear-gradient(135deg, var(--primary), var(--secondary)); } 25% { transform: scale(1.1); background: linear-gradient(135deg, #00ff00, #00cc00); } 50% { transform: scale(1.05); background: linear-gradient(135deg, #00ff00, #00cc00); } 75% { transform: scale(1.1); background: linear-gradient(135deg, #00ff00, #00cc00); } 100% { transform: scale(1); background: linear-gradient(135deg, var(--primary), var(--secondary)); } } /* 关闭按钮 - 危险警示效果 */ #btn-close-settings { background: linear-gradient(135deg, #ff4444, #cc0000); color: white; border: 2px solid transparent; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 25px rgba(255, 0, 0, 0.4); } #btn-close-settings::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.6s; z-index: -1; } #btn-close-settings::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: radial-gradient(circle, rgba(255, 0, 0, 0.3) 0%, transparent 70%); transition: all 0.3s; transform: translate(-50%, -50%); z-index: -1; } #btn-close-settings:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 40px rgba(255, 0, 0, 0.6), 0 0 80px rgba(255, 0, 0, 0.3); border-color: #ff6666; } #btn-close-settings:hover::before { left: 100%; } #btn-close-settings:hover::after { width: 150%; height: 150%; } #btn-close-settings:active { transform: translateY(-1px) scale(0.98); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 15px rgba(255, 0, 0, 0.3); } /* 关闭按钮警告动画 */ #btn-close-settings.warning { animation: close-warning 0.5s ease-in-out infinite alternate; } @keyframes close-warning { from { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 25px rgba(255, 0, 0, 0.4); transform: scale(1); } to { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 35px rgba(255, 0, 0, 0.6); transform: scale(1.02); } } /* 舞台灯光效果 */ .stage-lights { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; } .light-spot { position: absolute; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 20, 147, 0.1) 0%, transparent 70%); filter: blur(40px); animation: light-spot 8s infinite alternate ease-in-out; } .light-spot:nth-child(1) { animation-delay: 0s; background: radial-gradient(circle, rgba(255, 0, 255, 0.1) 0%, transparent 70%); } .light-spot:nth-child(2) { animation-delay: 2s; background: radial-gradient(circle, rgba(0, 255, 255, 0.1) 0%, transparent 70%); } .light-spot:nth-child(3) { animation-delay: 4s; background: radial-gradient(circle, rgba(138, 43, 226, 0.1) 0%, transparent 70%); } @keyframes light-spot { 0% { transform: translate(0, 0) scale(1); opacity: 0.3; } 33% { transform: translate(50px, 30px) scale(1.2); opacity: 0.5; } 66% { transform: translate(-30px, 60px) scale(0.8); opacity: 0.4; } 100% { transform: translate(20px, -20px) scale(1.1); opacity: 0.6; } } /* 霓虹边框效果 */ .neon-border { border: 2px solid var(--primary); box-shadow: 0 0 5px var(--primary), 0 0 10px var(--primary), 0 0 15px var(--primary), inset 0 0 5px var(--primary); animation: neon-border-pulse 3s infinite alternate; } @keyframes neon-border-pulse { from { border-color: var(--primary); box-shadow: 0 0 5px var(--primary), 0 0 10px var(--primary), 0 0 15px var(--primary); } to { border-color: var(--accent); box-shadow: 0 0 10px var(--accent), 0 0 20px var(--accent), 0 0 30px var(--accent); } } /* 输入框霓虹效果 */ .neon-input { background: rgba(26, 26, 26, 0.8) !important; border: 2px solid var(--primary) !important; color: white !important; box-shadow: 0 0 10px rgba(255, 20, 147, 0.3) !important; transition: all 0.3s ease !important; } .neon-input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.1), 0 0 20px rgba(0, 255, 255, 0.3) !important; } /* 卡片霓虹效果增强 */ .card { border: 1px solid rgba(255, 20, 147, 0.3); background: rgba(26, 26, 26, 0.8); backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 20, 147, 0.1); } .card:hover { border-color: var(--accent); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 255, 255, 0.2), 0 0 20px rgba(255, 20, 147, 0.3); } /* 响应式设计 */ @media (max-width: 768px) { main { padding: 1rem; } .subtabs { flex-direction: column; gap: 0.5rem; } .compact { flex-direction: column; align-items: stretch; } .compact input[type="text"], .compact input[type="date"], .compact select { min-width: auto; width: 100%; } .panel { padding: 1rem; } .preset { justify-content: center; } .light-spot { width: 100px; height: 100px; filter: blur(20px); } } @media (max-width: 480px) { .modal-body { padding: 1rem; margin: 1rem; } .modal-actions { flex-direction: column; } .btn { width: 100%; text-align: center; } .subtab { padding: 0.75rem 1rem; font-size: 0.8rem; } }