/* ========== AI 标识通用样式 ========== */ /* --- 默认配色(无 JS 时的 fallback,靛色) --- */ .ai-inline-icon, .ai-title-badge { --ai-from: #667eea; --ai-to: #a78bfa; --ai-from-deep: #4a5fc7; --ai-to-deep: #667eea; } /* --- 配色系(渐变背景,badge 用更深的 --ai-from-deep / --ai-to-deep) --- */ .ai-color-red { --ai-from: #e74c3c; --ai-to: #f39c9c; --ai-from-deep: #c0392b; --ai-to-deep: #e74c3c; } .ai-color-orange { --ai-from: #e67e22; --ai-to: #f5c77e; --ai-from-deep: #ca6c17; --ai-to-deep: #e67e22; } .ai-color-yellow { --ai-from: #d4a017; --ai-to: #f7dc6f; --ai-from-deep: #b8860b; --ai-to-deep: #d4a017; } .ai-color-blue { --ai-from: #2980b9; --ai-to: #7ec8e3; --ai-from-deep: #1a5276; --ai-to-deep: #2980b9; } .ai-color-indigo { --ai-from: #667eea; --ai-to: #a78bfa; --ai-from-deep: #4a5fc7; --ai-to-deep: #667eea; } .ai-color-purple { --ai-from: #764ba2; --ai-to: #c084fc; --ai-from-deep: #5b3080; --ai-to-deep: #764ba2; } /* --- 1. 嵌入 Icon(行首小图标,轻量化) --- */ .ai-inline-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--ai-from) 45%, white), color-mix(in srgb, var(--ai-to) 50%, white)); border-radius: 4px; font-size: 10px; line-height: 1; vertical-align: middle; margin-right: 3px; flex-shrink: 0; position: relative; overflow: hidden; } /* 嵌入 Icon 内的机器人 SVG */ .ai-inline-icon svg { width: 13px; height: 13px; position: relative; z-index: 1; flex-shrink: 0; } /* 微光动画(慢速、柔和、宽光带) */ .ai-inline-icon::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient( 45deg, transparent 30%, rgba(255,255,255,0.18) 45%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.18) 55%, transparent 70% ); animation: ai-shimmer 12s ease-in-out infinite; } @keyframes ai-shimmer { 0%, 100% { transform: translateX(-100%) rotate(45deg); } 50% { transform: translateX(100%) rotate(45deg); } } /* --- 2. Title AI 标识(标题行右侧,浅色背景+主题色文字+边框) --- */ .ai-title-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 3px; background: linear-gradient(135deg, color-mix(in srgb, var(--ai-from) 8%, white), color-mix(in srgb, var(--ai-to) 10%, white)); border: 1px solid color-mix(in srgb, var(--ai-from) 35%, transparent); border-radius: 10px; font-size: 11px; font-weight: 500; color: var(--ai-from-deep); white-space: nowrap; position: relative; overflow: hidden; line-height: 1.4; /* 呼吸脉冲:模拟 AI 思考进度感 */ animation: ai-pulse 3s ease-in-out infinite; } @keyframes ai-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--ai-pulse-r, 102), var(--ai-pulse-g, 126), var(--ai-pulse-b, 234), 0); } 50% { box-shadow: 0 0 8px 2px rgba(var(--ai-pulse-r, 102), var(--ai-pulse-g, 126), var(--ai-pulse-b, 234), 0.35); } } /* 各配色的脉冲 RGB 值 */ .ai-color-red .ai-title-badge, .ai-title-badge.ai-color-red { --ai-pulse-r: 231; --ai-pulse-g: 76; --ai-pulse-b: 60; } .ai-color-orange .ai-title-badge, .ai-title-badge.ai-color-orange { --ai-pulse-r: 230; --ai-pulse-g: 126; --ai-pulse-b: 34; } .ai-color-yellow .ai-title-badge, .ai-title-badge.ai-color-yellow { --ai-pulse-r: 212; --ai-pulse-g: 160; --ai-pulse-b: 23; } .ai-color-blue .ai-title-badge, .ai-title-badge.ai-color-blue { --ai-pulse-r: 41; --ai-pulse-g: 128; --ai-pulse-b: 185; } .ai-color-indigo .ai-title-badge, .ai-title-badge.ai-color-indigo { --ai-pulse-r: 102; --ai-pulse-g: 126; --ai-pulse-b: 234; } .ai-color-purple .ai-title-badge, .ai-title-badge.ai-color-purple { --ai-pulse-r: 118; --ai-pulse-g: 75; --ai-pulse-b: 162; } .ai-title-badge-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; /* 主题色发光 */ filter: drop-shadow(0 0 2px var(--ai-from)); } .ai-title-badge-icon svg { width: 16px; height: 16px; } /* 高光扫过(柔和、微弱) */ .ai-title-badge::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient( 45deg, transparent 30%, rgba(255,255,255,0.15) 43%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.15) 57%, transparent 70% ); animation: ai-shimmer 14s ease-in-out infinite; } /* --- 星级评价(备注卡片右上角,14px) --- */ .star-rating { display: inline-flex; align-items: center; gap: 1px; } .star-rating .star { position: relative; width: 14px; height: 14px; cursor: default; } .star-rating .star svg { width: 14px; height: 14px; } /* 空星 */ .star-rating .star .star-empty { color: #e8e8e8; } /* 满星 / 半星用 clip 实现 */ .star-rating .star .star-fill { position: absolute; top: 0; left: 0; overflow: hidden; } /* 颜色方案:浅黄→黄→橙→深红橙(0-10 分) */ .star-rating[data-score="0"] { --star-color: #d4d4d4; } .star-rating[data-score="1"] { --star-color: #f5e6a3; } .star-rating[data-score="2"] { --star-color: #f0d86e; } .star-rating[data-score="3"] { --star-color: #f0c93a; } .star-rating[data-score="4"] { --star-color: #f0b429; } .star-rating[data-score="5"] { --star-color: #f09c1a; } .star-rating[data-score="6"] { --star-color: #ed8a0a; } .star-rating[data-score="7"] { --star-color: #e67e22; } .star-rating[data-score="8"] { --star-color: #e05d1a; } .star-rating[data-score="9"] { --star-color: #d44a12; } .star-rating[data-score="10"] { --star-color: #c0392b; } .star-rating .star .star-fill svg { color: var(--star-color); } /* 高分微光 */ .star-rating[data-score="9"] .star .star-fill svg, .star-rating[data-score="10"] .star .star-fill svg { filter: drop-shadow(0 0 2px rgba(192,57,43,0.4)); } /* 备注卡片内星级评价:删除按钮左侧,垂直居中 */ .note-card-wrap { position: relative; } .note-card-wrap .star-rating { /* 不再绝对定位,改为在 flex 布局中自然排列 */ flex-shrink: 0; align-self: center; }