91 lines
2.0 KiB
CSS
91 lines
2.0 KiB
CSS
/* head_61.css - rift bar (odd: click show nav) */
|
|
.__PFX__-h61-rift{
|
|
--h-bg-1: var(--bg-color);
|
|
--h-bg-2: var(--bg-soft-color);
|
|
--h-accent: var(--primary-color);
|
|
padding:10px 12px 8px;
|
|
background:
|
|
linear-gradient(90deg,var(--h-bg-1) 0%, var(--h-bg-1) 62%, var(--h-bg-2) 62%, var(--h-bg-2) 100%);
|
|
border-bottom:1px solid var(--border-color);
|
|
}
|
|
.__PFX__-h61-row{
|
|
display:flex;
|
|
align-items:center;
|
|
gap:10px;
|
|
}
|
|
.__PFX__-h61-brand{
|
|
font-size:18px;
|
|
font-weight:900;
|
|
color:var(--text-color);
|
|
text-decoration:none;
|
|
white-space:nowrap;
|
|
}
|
|
.__PFX__-h61-search{
|
|
flex:1;
|
|
min-width:0;
|
|
display:flex;
|
|
align-items:center;
|
|
gap:6px;
|
|
padding:4px 6px 4px 10px;
|
|
background:var(--bg-soft-color);
|
|
border:1px solid var(--border-color);
|
|
border-radius:999px;
|
|
}
|
|
.__PFX__-h61-search input{
|
|
flex:1;
|
|
min-width:0;
|
|
border:none;
|
|
outline:none;
|
|
background:transparent;
|
|
color:var(--text-color);
|
|
font-size:13px;
|
|
}
|
|
.__PFX__-h61-btn{
|
|
border:none;
|
|
border-radius:999px;
|
|
background:var(--h-accent);
|
|
color:var(--text-color);
|
|
padding:6px 10px;
|
|
cursor:pointer;
|
|
font-size:12px;
|
|
}
|
|
.__PFX__-h61-toggle{
|
|
border:1px solid var(--border-color);
|
|
background:var(--bg-color);
|
|
color:var(--text-color);
|
|
border-radius:10px;
|
|
padding:7px 10px;
|
|
cursor:pointer;
|
|
white-space:nowrap;
|
|
}
|
|
.__PFX__-h61-nav{
|
|
display:none;
|
|
margin-top:8px;
|
|
}
|
|
.__PFX__-h61-links{
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
gap:8px;
|
|
}
|
|
.__PFX__-h61-links a{
|
|
text-decoration:none;
|
|
font-size:12px;
|
|
padding:5px 10px;
|
|
border-radius:999px;
|
|
background:var(--bg-soft-color);
|
|
border:1px solid var(--border-color);
|
|
color:var(--text-color);
|
|
}
|
|
.__PFX__-h61-links a.active{
|
|
background:var(--h-accent);
|
|
border-color:var(--h-accent);
|
|
font-weight:800;
|
|
}
|
|
@media (max-width:860px){
|
|
body.__PFX__-h61-open .__PFX__-h61-nav{display:block;}
|
|
}
|
|
@media (min-width:861px){
|
|
.__PFX__-h61-toggle{display:none;}
|
|
.__PFX__-h61-nav{display:block;}
|
|
}
|