插件默认的CSS


文章展示了插件默认的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;
}
CC BY-NC-SA 4.0 Deed | 署名-非商业性使用-相同方式共享
最后更新时间:2025-02-21 09:18:43

评论

0 条评论

暂无评论