SanYeCao-blog/src/styles/latest-comments.css

.latest-comments {
    margin-top: 1.5rem;
}

.latest-comments h2 {
    margin-bottom: 0.8rem;
}

.loading-card {
    height: 82px;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(110, 125, 140, 0.28);
    background: linear-gradient(
        90deg,
        transparent 15%,
        rgba(160, 175, 190, 0.13) 50%,
        transparent 85%
    );
    background-size: 200% 100%;
    animation: shimmer 1.2s infinite linear;
}

@keyframes shimmer {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

.latest-comments-list {
    display: block;
}

.comment-card {
    padding: 1rem 0;
    border-bottom: 1px solid rgba(110, 125, 140, 0.28);
}

.comment-card:first-child {
    padding-top: 0.35rem;
}

.comment-card:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.comment-card-body {
    min-width: 0;
}

.comment-card-info {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.comment-avatar {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
}

.comment-avatar-img,
.comment-avatar-fallback {
    width: 32px;
    height: 32px;
    display: block;
    border-radius: 50%;
    object-fit: cover;
}

.comment-avatar-img {
    background: rgba(160, 175, 190, 0.1);
}

.comment-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(160, 175, 190, 0.14);
    color: #5e6b77;
    font-family: system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    user-select: none;
}

.comment-meta {
    min-width: 0;
    flex: 1;
}

.comment-author-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.55rem;
    min-width: 0;
    font-family: system-ui, sans-serif;
    line-height: 1.35;
}

.comment-author,
.comment-reply-to {
    color: #66717c;
    font-size: 0.82rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.comment-reply-sep,
.comment-time {
    color: #7a858f;
    font-size: 0.72rem;
    font-weight: 400;
}

.comment-card-text {
    display: -webkit-box;
    margin: 0.6rem 0 0.5rem;
    max-height: 4.65em;
    overflow: hidden;
    color: #3f4a54;
    font-family: system-ui, sans-serif;
    font-size: 0.93rem;
    font-weight: 400;
    line-height: 1.55;
    overflow-wrap: anywhere;
    word-break: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.comment-source {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.55rem 1rem;
    min-width: 0;
    color: #89939c;
    font-family: system-ui, sans-serif;
    font-size: 0.75rem;
    line-height: 1.45;
}

.comment-source-context {
    display: flex;
    align-items: baseline;
    flex: 1 1 auto;
    gap: 0.4rem;
    min-width: 0;
}

.comment-source-context > span {
    flex: 0 0 auto;
    white-space: nowrap;
}

.comment-title-link {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: #6f8090;
    font-size: 0.82rem;
    font-weight: 400;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comment-title-link:hover,
.comment-title-link:focus-visible {
    text-decoration: underline;
}

.comment-discussion-link {
    display: none;
    flex: 0 0 auto;
    color: var(--url-color);
    font-size: 0.76rem;
    font-weight: 500;
    text-decoration-line: underline;
    text-decoration-style: dashed;
    text-underline-offset: 0.22em;
    white-space: nowrap;
}

.comment-card.is-truncated .comment-discussion-link {
    display: inline;
}

.latest-comments-empty {
    color: #777;
    font-style: italic;
}

html.dark .comment-card,
.dark .comment-card,
html.dark .loading-card,
.dark .loading-card {
    border-color: rgba(170, 183, 196, 0.25);
}

html.dark .comment-card-text,
.dark .comment-card-text {
    color: #d3d7db;
}

html.dark .comment-author,
.dark .comment-author,
html.dark .comment-reply-to,
.dark .comment-reply-to {
    color: #b9c3cc;
}

html.dark .comment-time,
.dark .comment-time,
html.dark .comment-reply-sep,
.dark .comment-reply-sep,
html.dark .comment-source,
.dark .comment-source {
    color: #929da7;
}

html.dark .comment-title-link,
.dark .comment-title-link {
    color: #aabbd0;
}

html.dark .comment-discussion-link,
.dark .comment-discussion-link {
    color: #9ecbff;
}

html.dark .comment-avatar-fallback,
.dark .comment-avatar-fallback {
    background: rgba(180, 190, 200, 0.14);
    color: #dbe3ea;
}

@media (max-width: 640px) {
    .comment-card {
        padding-block: 0.85rem;
    }

    .comment-card-text {
        margin-top: 0.5rem;
    }

    .comment-source {
        align-items: flex-start;
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .loading-card {
        animation: none;
    }
}