Bilibili-Evolved/style/custom-navbar/custom-navbar.css
2019-04-06 17:09:18 +08:00

135 lines
2.4 KiB
CSS

@font-face
{
font-family: "custom-navbar-font";
src: url('//s1.hdslb.com/bfs/seed/jinkela/header/asserts/iconfont.ttf') format('truetype');
}
.custom-navbar-iconfont
{
color: inherit;
font-family: "custom-navbar-font" !important;
font-size: 24px;
font-style: normal;
}
.custom-navbar-icon-logo::before
{
content: "\\E725";
}
.custom-navbar
{
--navbar-height: 50px;
position: absolute;
top: 0;
left: 0;
height: var(--navbar-height);
width: 100vw;
background: white;
color: black;
z-index: 10001;
}
.custom-navbar.shadow
{
box-shadow: #0004 0px 2px 10px 1px;
}
.custom-navbar.dark:not(.fill),
.custom-navbar .popup
{
color: #eee;
background: #222;
}
.custom-navbar *,
.custom-navbar
{
transition: all .2s ease-out;
}
.custom-navbar.fill
{
background-color: var(--theme-color);
color: #fffd;
}
.custom-navbar.fill.shadow
{
box-shadow: var(--theme-color-30) 0px 2px 10px 1px;
}
.custom-navbar>ul
{
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 5%;
height: 100%;
}
.custom-navbar>ul>li
{
position: relative;
height: 100%;
display: flex;
align-items: center;
}
.custom-navbar>ul>li:not(.disabled)
{
cursor: pointer;
}
.custom-navbar>ul>li:not(.disabled):hover
{
background: rgba(0,0,0,0.1);
}
.custom-navbar .main-content
{
font-size: 10pt;
height: 100%;
display: flex;
align-items: center;
padding: 0 16px;
}
.custom-navbar .popup
{
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) scale(0);
padding: 16px;
box-shadow: #0002 0 4px 8px 8px;
pointer-events: none;
opacity: 0;
transform-origin: top;
transition: all 0.15s cubic-bezier(0.18, 0.89, 0.38, 1.15);
}
.custom-navbar>ul>li:not(.disabled):hover .popup
{
transform: translateX(-50%) scale(1);
pointer-events: initial;
opacity: 1;
}
.custom-navbar a
{
color: inherit;
}
#custom-navbar-home-popup
{
max-height: 50vh;
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 300px;
}
#custom-navbar-home-popup .category-item
{
font-size: 12pt;
padding: 8px 16px;
cursor: pointer;
}
#custom-navbar-home-popup .category-item:hover
{
background-color: #0001;
}
#custom-navbar-home-popup .category-item a
{
display: flex;
justify-content: space-between;
}
#custom-navbar-home-popup .category-item span
{
opacity: 0.5;
}