@import 'styles.css';

.history-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 96%;
    list-style: none;
    padding: 0;
    margin: 0;
}

.history-item {
    display: flex;
    gap: 4px;
    height: 28px;
    width: 100%;
    position: relative;
}

.history-date {
    width: 22%;
    color: rgb(101, 98, 94);
    opacity: 0.65;
    font-size: 16px;
    line-height: 28px;
    flex-shrink: 0;
    padding-left: 12px;
    position: relative;
}

.history-date::before {
    content: '';
    position: absolute;
    left: 0;
    top: 13px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: rgb(101, 98, 94);
    opacity: 0.65;
}

.history-text {
    flex: 1;
    color: rgb(101, 98, 94);
    font-size: 16px;
    line-height: 28px;
    flex-shrink: 0;
}

/* 特殊情况：当文本内容超过一行时的样式 */
.history-item.multi-line {
    height: auto;
    min-height: 28px;
}

.history-item.multi-line .history-text {
    height: auto;
    min-height: 28px;
}

.history-item.multi-line .history-date::before {
    top: 12px;
}

/* Remove old timeline styles */
.timeline,
.timeline::before,
.timeline-item,
.timeline-date,
.timeline-content,
.timeline-content::before,
.timeline-content h3,
.timeline-content p {
    display: none;
}

@media (max-width: 1440px) {
    .main-content {
        padding: 1.4% 2% 0 2%;
    }

    .divider{
        margin-bottom: 22px;
    }

}

@media (max-width: 1380px) {
    .sidebar {
        width: 20%;
        overflow: hidden;
    }
}