Brief
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- --> <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet"> <style> /* --- 全局重置和基础 --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 18px; /* 增大基础字号 */ height: 100%; } body { font-family: sans-serif; background-color: #1c1c2e; display: flex; justify-content: center; align-items: flex-start; padding-top: 20px; min-height: 100%; line-height: 1.7; /* 增大基础行高 */ overflow: hidden; } /* --- 触发按钮 --- */ .modal-trigger-button { padding: 14px 28px; /* 增大padding */ margin-bottom: 20px; font-family: 'VT323', monospace; background-color: #6a0dad; color: white; border: 2px solid #ff00ff; box-shadow: 0 0 12px #ff00ff, 0 0 6px #ff00ff inset; /* 增强阴影 */ cursor: pointer; font-size: 1.6em; /* 增大字体 */ text-shadow: 0 0 4px white; border-radius: 6px; transition: transform 0.2s, box-shadow 0.2s; } .modal-trigger-button:hover { transform: scale(1.05); box-shadow: 0 0 18px #ff00ff, 0 0 12px #ff00ff inset, 0 0 7px #cc00cc; } /* --- 对话框遮罩层 --- */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .modal-overlay.active { opacity: 1; visibility: visible; } /* --- 对话框主体 --- */ .modal-dialog { background-color: #0a0418; border-radius: 10px; /* 增大圆角 */ box-shadow: 0 0 40px rgba(255,0,255,0.65), 0 0 20px rgba(0,255,255,0.45) inset; /* 增强阴影 */ width: clamp(320px, 90vw, 820px); /* 略微增大宽度 */ /* 关键: 增大最大高度，目标约1.5个手机屏 */ /* 假设手机屏高约600-800px, 1.5倍约900-1200px */ /* 同时也要考虑桌面端不要过高 */ max-height: min(150vh, 950px); /* 尝试用150vh，但最大不超过950px */ overflow: hidden; display: flex; flex-direction: column; border: 3px solid #6a0dad; /* 略增边框 */ transform: scale(0.95); transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .modal-overlay.active .modal-dialog { transform: scale(1); } /* --- 对话框头部 --- */ .modal-header { padding: 12px 18px; /* 增大padding */ background: linear-gradient(to bottom, rgba(40,25,75,0.95), rgba(30,20,55,0.95)); color: #e0e0e0; border-bottom: 2px solid #6a0dad; /* 略增边框 */ display: flex; justify-content: space-between; align-items: center; font-family: 'VT323', monospace; text-shadow: 0 0 5px #ff00ff; flex-shrink: 0; } .modal-header h4 { margin: 0; font-size: 1.5em; color: #ff00ff; } /* 增大字体 */ .modal-close-button { background: none; border: none; color: #d8d8e8; font-family: 'VT323', monospace; font-size: 2em; cursor: pointer; padding: 0 6px; line-height: 1; transition: color 0.2s, transform 0.2s; } /* 增大字体 */ .modal-close-button:hover { color: #ff00ff; transform: rotate(90deg) scale(1.1); } /* --- 对话框内容区域 --- */ .modal-content { flex-grow: 1; overflow-y: auto; overflow-x: hidden; padding: 0; position: relative; -webkit-overflow-scrolling: touch; background-color: var(--card-bg-card, rgba(16, 8, 32, 0.85)); } .modal-content::-webkit-scrollbar { width: 10px; } /* 增大滚动条宽度 */ .modal-content::-webkit-scrollbar-track { background: #0a0418; } .modal-content::-webkit-scrollbar-thumb { background-color: #6a0dad; border-radius: 5px; border: 1px solid #0a0418; } .modal-content::-webkit-scrollbar-thumb:hover { background-color: #ff00ff; } /* --- 角色卡片CSS --- */ .modal-content { /* 确保CSS变量在此作用域内 */ --bg-color-card: #0a0418; --card-bg-card: rgba(16, 8, 32, 0.85); --text-color-card: #e0e0e0; --border-color-card: #6a0dad; --glow-color-primary-card: #ff00ff; --glow-color-secondary-card: #00ffff; --scanline-bg-card: rgba(0, 0, 0, 0.07); --neon-pink-card: #ff40ff; --neon-blue-card: #40c4ff; --neon-green-card: #40ff80; --neon-yellow-card: #ffff40; --neon-orange-card: #ffab40; --neon-purple-card: #ab40ff; /* 增大卡片内字体 */ --font-pixel-card: 'VT323', monospace; --font-mono-card: 'Roboto Mono', monospace; } #crt { width: 100%; position: relative; padding: 20px; /* 增大内边距 */ animation: crtFlicker 0.12s infinite alternate; font-family: var(--font-mono-card); color: var(--text-color-card); display: flex; flex-direction: column; } .profile-card { position: relative; z-index: 2; } @keyframes crtFlicker { 0% { opacity: 0.97; } 100% { opacity: 1; } } .scanlines { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; background: repeating-linear-gradient( transparent, transparent 1px, var(--scanline-bg-card) 2px, var(--scanline-bg-card) 3px ); z-index: 1; opacity: 0.6; animation: scanlineMove 100s linear infinite; } @keyframes scanlineMove { 0% { background-position-y: 0; } 100% { background-position-y: 100vh; } }
11111
