/* RSS容器 - 与网站融合 */ .rssfriend-wrap { margin: 20px 0; padding: 0; } .rssfriend-source { margin-bottom: 30px; } .rssfriend-source-title { font-size: 18px; margin: 0 0 15px; padding-left: 8px; border-left: 3px solid #3498db; color: var(--rss-title-color, #2c3e50); } /* RSS列表布局 */ .rssfriend-list { list-style: none; padding: 0; margin: 0; } /* 默认网格布局 */ .rssfriend-list { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } /* 单RSS源横排拉伸显示 */ .rssfriend-list.single-source { grid-template-columns: 1fr; display: block; } .rssfriend-list.single-source .rssfriend-item { display: flex; align-items: center; gap: 20px; padding: 20px; margin-bottom: 15px; border-radius: 8px; background: var(--rss-bg-color, #fff); box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: all 0.3s ease; } .rssfriend-list.single-source .rssfriend-item:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.12); } .rssfriend-list.single-source .rssfriend-item-content { flex: 1; } /* 多RSS源时的卡片样式 */ .rssfriend-list:not(.single-source) .rssfriend-item { padding: 15px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); background: var(--rss-bg-color, #fff); position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; animation: rssFadeIn 0.5s ease forwards; } .rssfriend-list:not(.single-source) .rssfriend-item:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0,0,0,0.12); } .rssfriend-list:not(.single-source) .rssfriend-item:nth-child(1) { animation-delay: 0.1s; } .rssfriend-list:not(.single-source) .rssfriend-item:nth-child(2) { animation-delay: 0.2s; } .rssfriend-list:not(.single-source) .rssfriend-item:nth-child(3) { animation-delay: 0.3s; } @keyframes rssFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* 24小时New标记 */ .rssfriend-new-tag { position: absolute; top: 10px; right: 10px; background: #e74c3c; color: #fff; font-size: 12px; font-weight: bold; padding: 2px 8px; border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); animation: rssNewTag 1.5s infinite alternate; } @keyframes rssNewTag { 0% { opacity: 0.8; transform: scale(1); } 100% { opacity: 1; transform: scale(1.05); } } /* 标题与链接样式 */ .rssfriend-item-title { font-size: 16px; margin: 0 0 8px; } .rssfriend-item-title a { color: var(--rss-link-color, #2c3e50); text-decoration: none; transition: color 0.3s ease; } .rssfriend-item-title a:hover { color: #3498db; text-decoration: underline; } /* 元信息样式 */ .rssfriend-meta { font-size: 12px; margin: 0 0 12px; display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-top: 1px dashed var(--rss-border-color, #eee); border-bottom: 1px dashed var(--rss-border-color, #eee); gap: 10px; } .rssfriend-author { color: var(--rss-author-color, #4a90e2); font-weight: 500; display: flex; align-items: center; gap: 6px; } .rssfriend-favicon { width: 16px; height: 16px; border-radius: 3px; object-fit: cover; margin-left: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); } .rssfriend-date { color: var(--rss-date-color, #7f8c8d); display: flex; align-items: center; gap: 6px; } /* 摘要样式 */ .rssfriend-excerpt { font-size: 14px; color: var(--rss-text-color, #666); line-height: 1.6; margin: 0; } /* 错误/空数据提示 */ .rssfriend-error { padding: 15px; margin: 10px 0; border-radius: 8px; background: #fef2f2; color: #dc3545; font-size: 14px; border: 1px solid #f8d7da; } .rssfriend-empty { text-align: center; padding: 50px 0; color: #999; font-size: 14px; } /* 夜间模式适配 */ body.dark-mode .rssfriend-item, body.night-mode .rssfriend-item, body[data-theme="dark"] .rssfriend-item { --rss-bg-color: #2d3748; --rss-title-color: #e0e0e0; --rss-link-color: #e0e0e0; --rss-text-color: #b0b0b0; --rss-border-color: #444; --rss-author-color: #8ab4f8; --rss-date-color: #9e9e9e; box-shadow: 0 2px 8px rgba(0,0,0,0.3); } body.dark-mode .rssfriend-new-tag, body.night-mode .rssfriend-new-tag { background: #c0392b; box-shadow: 0 2px 4px rgba(0,0,0,0.4); } body.dark-mode .rssfriend-error, body.night-mode .rssfriend-error { background: #422; color: #ffcdd2; border-color: #622; }