Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

优化搜索框居中 #161

Open
nothingshiru opened this issue Oct 15, 2024 · 3 comments
Open

优化搜索框居中 #161

nothingshiru opened this issue Oct 15, 2024 · 3 comments
Labels
enhancement New feature or request

Comments

@nothingshiru
Copy link

因为顶栏左、右部分宽度不一样,搜索框目前只是在中间部分居中,而不是在顶栏居中。

可以让左、右部分一样宽,让搜索框真的居中

.left-entry, .right-entry {
    flex: 1;
    min-width: max-content;
    margin: 0 !important;
}

.right-entry {
    justify-content: flex-end;
}

.bili-header .slide-down .center-search-container {
    margin: 0;
}

屏幕截图(29)

@festoney8 festoney8 added the enhancement New feature or request label Oct 16, 2024
@festoney8
Copy link
Owner

试了一阵,发现和其他功能有一些奇怪的冲突

一个是插件菜单最后的调节顶栏数值功能,如果启用了边距调节会影响居中

另一个是隐藏右上角投稿按钮,为了历史按钮的下拉菜单不超出视口,只能用 visibility 隐藏投稿按钮,也会在视觉上影响居中效果

@nothingshiru
Copy link
Author

nothingshiru commented Oct 17, 2024

不是冲突。你说的这两个问题原本就存在。

如果把调节顶栏数值功能里两个边距选项变成一个,通过 .bili-header .bili-header__bar 里的padding统一调节左右边距,就不会影响居中了吧。(我想不到需要顶栏左右边距不同的场景)

也许可以 display: none 隐藏投稿按钮后,再调一调下拉菜单的位置?

@festoney8
Copy link
Owner

就是为了解决隐藏投稿按钮带来的不对称问题才把左右两侧数值调节分开

下拉菜单的位置是实时赋予的 inline CSS,不想修改这些,牵一发动全身挺别扭,回来找找更优雅的方法

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants