Add search box to custom navbar

This commit is contained in:
the1812 2019-04-14 14:17:12 +08:00
parent 0049fe576b
commit 787b5e8cf0
10 changed files with 107 additions and 23 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1 +1 @@
@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:100%;background:#fff;color:#000;z-index:10001}.custom-navbar path,.custom-navbar.dark:not(.fill) path{fill:#000}.custom-navbar.fill path{fill:#fffd}.custom-navbar.shadow{box-shadow:#0004 0 2px 10px 1px}.custom-navbar .popup,.custom-navbar.dark:not(.fill){color:#eee;background:#222}.custom-navbar,.custom-navbar *{transition:.2s ease-out}.custom-navbar.fill{background-color:var(--theme-color);color:#fffd}.custom-navbar.fill.shadow{box-shadow:var(--theme-color-30) 0 2px 10px 1px}.custom-navbar>ul{display:flex;align-items:center;justify-content:space-between;margin:0 5%;height:100%}.custom-navbar ul{list-style:none}.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,.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:.15s cubic-bezier(.18,.89,.38,1.15) .2s}.custom-navbar .popup.no-padding{padding:0}#custom-navbar-home-popup .category-item:hover .popup,.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;position:relative}#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 .popup{z-index:10002;width:max-content}#custom-navbar-home-popup .category-item .popup a,#upload-actions a{padding:8px 16px;display:flex;justify-content:center;border-bottom:2px solid transparent;font-size:11pt}#custom-navbar-home-popup .category-item .popup a:hover,#upload-actions a:hover{border-bottom:2px solid var(--theme-color)}#custom-navbar-home-popup .category-item span{opacity:.5}.im-list-box{border-radius:0!important}li.nav-item[report-id=playpage_dynamic] .i-frame,li.nav-item[report-id=playpage_dynamic] iframe{display:none!important}#upload-button{padding-left:4px;font-size:12pt;font-weight:700}#upload-actions{width:max-content}
@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;--navbar-foreground:black;--navbar-background:white;position:absolute;top:0;left:0;height:var(--navbar-height);width:100%;background-color:var(--navbar-background);color:var(--navbar-foreground);z-index:10001}.custom-navbar:not(.fill) .custom-navbar-iconfont{color:var(--theme-color)}.custom-navbar path,.custom-navbar.dark:not(.fill) path{fill:#000}.custom-navbar.dark path{fill:#eee}.custom-navbar.fill path{fill:#fffd}.custom-navbar.shadow{box-shadow:#0004 0 2px 10px 1px}.custom-navbar.dark:not(.fill){--navbar-background:#222;--navbar-foreground:#eee}.custom-navbar,.custom-navbar *{transition:.2s ease-out}.custom-navbar.fill{--navbar-background:var(--theme-color);--navbar-foreground:#fffd}.custom-navbar.fill.shadow{box-shadow:var(--theme-color-30) 0 2px 10px 1px}.custom-navbar>ul{display:flex;align-items:center;justify-content:space-between;margin:0 5%;height:100%}.custom-navbar ul{list-style:none}.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,.1)}.custom-navbar .main-content{font-size:10pt;height:100%;display:flex;align-items:center;padding:0 16px}.custom-navbar .popup{color:#eee;background:#222;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:.15s cubic-bezier(.18,.89,.38,1.15) .2s}.custom-navbar .popup.no-padding{padding:0}#custom-navbar-home-popup .category-item:hover .popup,.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;position:relative}#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 .popup{z-index:10002;width:max-content}#custom-navbar-home-popup .category-item .popup a,#upload-actions a{padding:8px 16px;display:flex;justify-content:center;border-bottom:2px solid transparent;font-size:11pt}#custom-navbar-home-popup .category-item .popup a:hover,#upload-actions a:hover{border-bottom:2px solid var(--theme-color)}#custom-navbar-home-popup .category-item span{opacity:.5}.im-list-box{border-radius:0!important}li.nav-item[report-id=playpage_dynamic] .i-frame,li.nav-item[report-id=playpage_dynamic] iframe{display:none!important}#upload-button{padding-left:4px;font-size:12pt;font-weight:700}#upload-actions{width:max-content}.custom-navbar form{height:100%;display:flex;align-items:center;position:relative;--submit-button-size:30px}.custom-navbar form input{border:none;height:60%;background:0 0;border-bottom:2px solid!important;color:var(--navbar-foreground);box-sizing:border-box;width:200px;padding-right:var(--submit-button-size);padding-left:4px}.custom-navbar form input:focus{border-bottom:2px solid!important}.custom-navbar form button[type=submit]{background:0 0;border:none;padding:4px;cursor:pointer;height:var(--submit-button-size);width:var(--submit-button-size);position:absolute;right:0;top:50%;transform:translateY(-50%)}.custom-navbar form input[type=text]::placeholder{color:var(--navbar-foreground)!important;opacity:.8}

View File

@ -1 +1 @@
<div class=custom-navbar><ul><li v-for="component of components"v-bind:class="{disabled: component.disabled}"v-bind:style="{flex: component.flex}"v-on:pointerover=requestPopup(component)><a class=main-content v-bind:href=component.href v-html=component.html></a><div class=popup v-if=component.popupHtml v-bind:class="{'no-padding': component.noPadding}"><div v-if=component.requestedPopup v-html=component.popupHtml></div></div></ul></div>
<div class=custom-navbar><ul><li v-for="component of components"v-bind:class="{disabled: component.disabled}"v-bind:style="{flex: component.flex}"v-on:pointerover=requestPopup(component)><a class=main-content v-if=component.href v-bind:href=component.href v-html=component.html></a><div class=main-content v-else v-html=component.html></div><div class=popup v-if=component.popupHtml v-bind:class="{'no-padding': component.noPadding}"><div v-if=component.requestedPopup v-html=component.popupHtml></div></div></ul></div>

File diff suppressed because one or more lines are too long

2
min/dark.min.css vendored

File diff suppressed because one or more lines are too long

View File

@ -18,20 +18,29 @@
.custom-navbar
{
--navbar-height: 50px;
--navbar-foreground: black;
--navbar-background: white;
position: absolute;
top: 0;
left: 0;
height: var(--navbar-height);
width: 100%;
background: white;
color: black;
background-color: var(--navbar-background);
color: var(--navbar-foreground);
z-index: 10001;
}
.custom-navbar path,
.custom-navbar.dark:not(.fill) path
.custom-navbar:not(.fill) .custom-navbar-iconfont
{
color: var(--theme-color);
}
.custom-navbar path
{
fill: black;
}
.custom-navbar.dark:not(.fill) path
{
fill: #eee;
}
.custom-navbar.fill path
{
fill: #fffd;
@ -40,7 +49,11 @@
{
box-shadow: #0004 0px 2px 10px 1px;
}
.custom-navbar.dark:not(.fill),
.custom-navbar.dark:not(.fill)
{
--navbar-background: #222;
--navbar-foreground: #eee;
}
.custom-navbar .popup
{
color: #eee;
@ -53,8 +66,8 @@
}
.custom-navbar.fill
{
background-color: var(--theme-color);
color: #fffd;
--navbar-background: var(--theme-color);
--navbar-foreground: #fffd;
}
.custom-navbar.fill.shadow
{
@ -190,3 +203,45 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame
{
width: max-content;
}
.custom-navbar form
{
height: 100%;
display: flex;
align-items: center;
position: relative;
--submit-button-size: 30px;
}
.custom-navbar form input
{
border: none;
height: 60%;
background: transparent;
border-bottom: 2px solid var(--navbar-foreground) !important;
color: var(--navbar-foreground);
box-sizing: border-box;
width: 200px;
padding-right: var(--submit-button-size);
padding-left: 4px;
}
.custom-navbar form input:focus
{
border-bottom: 2px solid var(--navbar-foreground) !important;
}
.custom-navbar form button[type="submit"]
{
background: transparent;
border: none;
padding: 4px;
cursor: pointer;
height: var(--submit-button-size);
width: var(--submit-button-size);
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);;
}
.custom-navbar form input[type="text"]::placeholder
{
color: var(--navbar-foreground) !important;
opacity: 0.8;
}

View File

@ -2,7 +2,8 @@
<ul>
<li v-for="component of components" v-bind:class="{disabled: component.disabled}"
v-bind:style="{flex: component.flex}" v-on:pointerover="requestPopup(component)">
<a class="main-content" v-bind:href="component.href" v-html="component.html"></a>
<a class="main-content" v-if="component.href" v-bind:href="component.href" v-html="component.html"></a>
<div class="main-content" v-else v-html="component.html"></div>
<div class="popup" v-if="component.popupHtml" v-bind:class="{'no-padding': component.noPadding}">
<div v-if="component.requestedPopup" v-html="component.popupHtml"></div>
</div>

View File

@ -56,7 +56,7 @@ class Upload extends NavbarComponent
super();
this.href = "https://member.bilibili.com/v2#/upload/video/frame";
this.html = /*html*/`
<svg style="width:18px;height:18px" viewBox="0 0 24 24">
<svg style="width:22px;height:22px" viewBox="0 0 24 24">
<path d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z" />
</svg>
<div id="upload-button">投稿</div>`;
@ -191,6 +191,29 @@ class Category extends NavbarComponent
};
}
}
class UserInfo extends NavbarComponent
{
}
class SearchBox extends NavbarComponent
{
constructor()
{
super();
this.disabled = true;
this.html = /*html*/`
<form autocomplete="off" target="_blank" method="get" action="https://search.bilibili.com/all">
<input type="hidden" name="from_source" value="banner_search">
<input type="text" placeholder="搜索" name="keyword">
<button type="submit" title="搜索">
<svg style="width:22px;height:22px" viewBox="0 0 24 24">
<path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
</svg>
</button>
</form>
`;
}
}
class Iframe extends NavbarComponent
{
constructor(name, link, { src, width, height, lazy })
@ -242,6 +265,7 @@ class Iframe extends NavbarComponent
new SimpleLink("会员购", "https://show.bilibili.com/platform/home.html?msource=pc_web"),
new SimpleLink("漫画", "https://manga.bilibili.com"),
new Blank,
new SearchBox,
new Iframe("消息", "https://message.bilibili.com/", {
src: `https://message.bilibili.com/pages/nav/index`,
width: `110px`,

View File

@ -738,6 +738,10 @@ body>div.to-top.on
{
margin-bottom: 10px !important;
}
#jfContent
{
filter: invert(1);
}
.activity.topic-preview-wrapper .s-bottom
{
border-radius: 0 !important;