文章展示了插件默认的CSS样式,包括评论区的布局、颜色、阴影、边框、字体等设计元素。样式涵盖了评论区的整体外观、评论的悬停效果、作者信息、评论内容、链接样式等,并提供了暗黑模式的适配样式。此外,还包含了响应式设计,确保在不同设备上的显示效果。
评论区默认的CSS
.fediverse-comments {
max-width:100%;
margin:2em 0;
padding:1.5em;
background:#ffffff;
border-radius:12px;
box-shadow:0 2px 12px rgba(0,0,0,0.08);
color:#2d3748;
}
.fediverse-comments-header {
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:1.5em;
padding-bottom:1em;
border-bottom:1px solid #edf2f7;
}
.fediverse-comments-header h3 {
margin:0;
font-size:1.25em;
color:#2d3748;
display:flex;
align-items:center;
gap:0.5em;
}
.fediverse-icon {
color:#563acc;
}
.fediverse-comments-count {
color:#718096;
font-size:0.9em;
}
.fediverse-comment {
padding:1.25em;
margin-bottom:1em;
background:#f8fafc;
border-radius:8px;
transition:all 0.2s ease;
}
.fediverse-comment:hover {
background:#f1f5f9;
}
.fediverse-comment:last-child {
margin-bottom:0;
}
.comment-metadata {
margin-bottom:0.75em;
}
.comment-author {
display:flex;
align-items:center;
gap:1em;
}
.author-link {
text-decoration:none;
color:inherit;
}
.author-name {
font-weight:600;
color:#2d3748;
}
.comment-time {
color:#718096;
font-size:0.875em;
}
.comment-content {
color:#2d3748;
line-height:1.6;
overflow-wrap:break-word;
}
.comment-content p {
margin:0 0 1em;
}
.comment-content p:last-child {
margin-bottom:0;
}
.comment-content a {
color:#563acc;
text-decoration:none;
border-bottom:1px solid transparent;
transition:border-color 0.2s ease;
}
.comment-content a:hover {
border-bottom-color:#563acc;
}
.no-comments {
padding:2em;
text-align:center;
color:#718096;
display:flex;
flex-direction:column;
align-items:center;
gap:1em;
}
.empty-icon {
color:#cbd5e0;
}
.dark .fediverse-comments {
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
background:#1a1b1e;
box-shadow:0 2px 12px rgba(0,0,0,0.3);
color:#e2e8f0;
}
.dark .fediverse-comments-header {
border-bottom:1px solid #2d3748;
}
.dark .fediverse-comments-header h3 {
color:#e2e8f0;
}
.dark .fediverse-comment {
background:#2d2e32;
border:1px solid #2d3748;
}
.dark .fediverse-comment:hover {
background:#34353a;
}
.dark .author-name {
color:#e2e8f0;
}
.dark .comment-content {
color:#e2e8f0;
}
.dark .comment-content a {
text-decoration:underline;
text-decoration-color:rgba(124,93,255,0.4);
text-underline-offset:2px;
}
.dark .comment-content a:hover {
text-decoration-color:#7c5dff;
}
.dark .comment-content img {
opacity:0.8;
transition:opacity 0.2s ease;
}
.dark .comment-content img:hover {
opacity:1;
}
@media (max-width:768px) {
.fediverse-comments {
padding:1em;
}
.fediverse-comments-header {
flex-direction:column;
align-items:flex-start;
gap:0.5em;
}
.fediverse-comment {
padding:1em;
}
评论
暂无评论