.history-page{
width:100%;
max-width:var(--pw2);
margin:0 auto;
padding:40px var(--gap) var(--gap);
box-sizing:border-box;
}
.history-header{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:28px;
}
.history-title{
font-size:1.5rem;
font-weight:700;
font-family:var(--ff2);
color:var(--cl1);
}
.clear-history-btn{
display:flex;
align-items:center;
gap:6px;
background:none;
border:none;
color:var(--cl3);
padding:8px 16px;
font-size:0.82rem;
font-family:var(--ff2);
font-weight:500;
cursor:pointer;
border-radius:var(--br0);
transition:background 100ms,color 100ms;
}
.clear-history-btn:hover{
background:rgba(220,53,69,0.08);
color:#dc3545;
}
.clear-history-btn svg{
width:14px;
height:14px;
}
.history-list{
display:flex;
flex-direction:column;
gap:2px;
width:100%;
}
.history-item{
display:flex;
align-items:center;
gap:16px;
padding:16px 20px;
background:transparent;
text-decoration:none;
color:var(--cl1);
min-width:0;
}
.history-item:hover{
background:rgba(255,255,255,0.02);
text-decoration:none;
}
.history-name:hover{
text-decoration:underline;
}
.history-type{
font-size:0.72rem;
text-transform:uppercase;
letter-spacing:0.5px;
font-weight:600;
color:var(--cl3);
width:70px;
min-width:70px;
max-width:70px;
text-align:left;
font-family:var(--ff2);
flex-shrink:0;
}
.history-info{
flex:1;
min-width:0;
overflow:hidden;
}
.history-name{
color:var(--cl1);
text-decoration:none;
font-size:1.05rem;
font-weight:500;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
font-family:var(--ff2);
display:table;
}
.history-url{
font-size:0.8rem;
color:var(--cl3);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
margin-top:3px;
font-family:var(--ff2);
}
.history-date{
font-size:0.8rem;
color:var(--cl3);
white-space:nowrap;
font-family:var(--ff2);
flex-shrink:0;
}
.history-delete{
display:flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
background:none;
border:none;
color:var(--cl3);
cursor:pointer;
border-radius:50%;
opacity:0;
transition:opacity 100ms,background 100ms,color 100ms;
flex-shrink:0;
}
.history-item:hover .history-delete{
opacity:1;
}
.history-delete:hover{
background:rgba(220,53,69,0.1);
color:#dc3545;
}
.history-delete svg{
width:20px;
height:20px;
}
.history-empty{
text-align:center;
color:var(--cl3);
padding:60px 0;
font-family:var(--ff2);
font-size:1rem;
}
.history-loader{
text-align:center;
padding:24px 0;
color:var(--cl3);
font-family:var(--ff2);
font-size:0.9rem;
}
.load-more-wrap{
text-align:center;
padding:20px 0;
}
.load-more-btn{
background:none;
color:var(--cl2);
border:none;
padding:10px 32px;
font-size:0.9rem;
font-family:var(--ff2);
font-weight:500;
cursor:pointer;
border-radius:var(--br0);
transition:background 100ms,color 100ms;
}
.load-more-btn:hover{
background:var(--bg3);
color:var(--cl1);
}
@media(max-width:600px){
.history-page{
padding:20px 12px 12px;
}
.history-item{
gap:10px;
padding:14px 14px;
}
.history-type{
width:55px;
min-width:55px;
max-width:55px;
font-size:0.65rem;
}
.history-name{
color:var(--cl1);
text-decoration:none;
font-size:0.95rem;
}
.history-date{
display:none;
}
.history-delete{
opacity:1;
}
}