@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@200..900&display=swap');@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap");*,*:before,*:after{box-sizing:border-box}
:root{--c-grey-100:#f4f6f8;--c-grey-200:#e3e3e3;--c-grey-300:#b2b2b2;--c-grey-400:#7b7b7b;--c-grey-500:#3d3d3d;--c-blue-500:#688afd}
.timeline_main{margin-top:30px;line-height:1.5;font-style:normal;font-weight:400;:lang(en){font-family:"Outfit",sans-serif !important}
:lang(zh){font-family:"Noto Serif SC",serif !important}
}
img{display:block;max-width:100%}
.timeline{width:85%;max-width:700px;margin-left:auto;margin-right:auto;display:flex;flex-direction:column;padding:32px 0 32px 32px;border-left:2px solid var(--c-grey-200);font-size:1.125rem}
.timeline-item{display:flex;gap:24px;& + *{margin-top:48px}
& + .extra-space{margin-top:48px;margin-bottom:24px}
}
.timeline-item-wrapper{display:flex;flex-direction:column}
.new-comment{width:100%;input{border:1px solid var(--c-grey-200);border-radius:6px;height:48px;padding:0 16px;width:100%;background-color:var(--sib-background);&::placeholder{color:var(--c-grey-300)}
&:focus{border-color:var(--c-grey-300);outline:0;box-shadow:0 0 0 4px var(--c-grey-100)}
}
}
.timeline-item-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;margin-left:-52px;flex-shrink:0;overflow:hidden;box-shadow:0 0 0 2px #fff;svg{width:20px;height:20px}
&.faded-icon{background-color:var(--c-grey-200);color:var(--c-grey-400)}
&.filled-icon{background-color:var(--c-blue-500);color:#fff}
}
.timeline-avatar{display:flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;aspect-ratio:1 / 1;flex-shrink:0;width:40px;height:40px;margin-bottom:auto;&.small{width:28px;height:28px}
img{object-fit:cover}
}
.timeline-item-content{display:flex;padding-top:6px;gap:8px;font-weight:700;color:var(--classF);align-items:center;margin-bottom:auto;img{flex-shrink:0}
time{color:var(--c-grey-400);font-size:16px;padding-left:10px}
}
.timeline-item-description{margin-top:12px;color:var(--c-grey-500);border:1px solid var(--c-grey-200);box-shadow:0 4px 4px 0 var(--classD);border-radius:6px;padding:16px;font-size:1rem;color:var(--classF);background-color:var(--sib-background);a{text-decoration:underline;color:inherit !important}
}
.button{border:0;padding:0;display:inline-flex;vertical-align:middle;margin-right:4px;margin-top:12px;align-items:center;justify-content:center;font-size:1rem;height:32px;padding:0 8px;background-color:var(--c-grey-100);flex-shrink:0;cursor:pointer;border-radius:99em;&:hover{background-color:var(--c-grey-200)}
&.square{border-radius:50%;color:var(--c-grey-400);width:32px;height:32px;padding:0;svg{width:24px;height:24px}
&:hover{background-color:var(--c-grey-200);color:var(--c-grey-500)}
}
}
.return-btn{color:var(--c-grey-300);background-color:transparent;border:0;padding:0;display:flex;align-items:center;gap:6px;font-size:1rem;cursor:pointer;font-family:inherit;svg{flex-shrink:0;width:24px;height:24px}
&:hover{font-weight:550;color:var(--c-grey-500)}
}
.avatar-list{display:flex;align-items:center;& > *{position:relative;box-shadow:0 0 0 4px var(--sib-background);margin-right:-8px}
}
.article-card-container{display:flex;width:100%;max-width:800px;max-height:200px;background:linear-gradient(65deg,#ffffff 0%,#efefef9f 100%);box-shadow:0 10px 20px rgba(0,0,0,0.1),0 6px 6px rgba(0,0,0,0.05);border-radius:12px;overflow:hidden;margin-top:12px;transition:transform 0.3s ease-in-out,box-shadow 0.3s ease-in-out;cursor:pointer;animation:fadeIn 0.5s ease-out}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}
to{opacity:1;transform:translateY(0)}
}
.article-card-container:hover{transform:translateY(-8px);box-shadow:0 15px 30px rgba(0,0,0,0.15),0 10px 10px rgba(0,0,0,0.1)}
.article-card-container:active{transform:scale(0.98);background:linear-gradient(135deg,#f9f9f9 0%,#ffffff 100%)}
.article-card-image{flex:0 0 40%;aspect-ratio:4 / 3;background-size:cover;background-position:center;border-right:1px solid #e0e0e0}
@keyframes fadeInImage{to{opacity:1}
}
.article-card-info{flex:1;padding:6px 20px 10px 20px;justify-content:center;display:flex;flex-direction:column}
.article-card-title{flex-shrink:0;font-size:20px;font-weight:bold;height:1.5em;text-decoration:none;color:#2c3e50;transition:text-decoration 0.2s ease-in-out,color 0.2s ease-in-out;letter-spacing:0.5px;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1}
.article-card-title:hover{color:#3498db}
.article-card-meta{font-size:14px;color:#7f8c8d;letter-spacing:0.3px;margin-bottom:3px}
.article-card-tags{font-size:11px;color:#3498db;margin-bottom:5px}
.article-card-tags span{border:1px solid #3498db;border-radius:4px;padding:0px 4px;margin-right:6px;display:inline-block;transition:background-color 0.2s ease-in-out,color 0.2s ease-in-out}
.article-card-tags span:hover{background-color:#007BFF;color:white;border-color:#007BFF}
.article-card-summary{font-size:16px;color:#666;line-height:1.6;overflow:hidden}
.timelime-img-container{display:flex;flex-direction:row;flex-wrap:wrap}
.timeline-item-img{height:auto;padding:10px;will-change:transform;transition:transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94);cursor:pointer;img{border-radius:5px}
}
.timeline-item-img:hover{transform:scale(1.1)}