b站首页样式
Nazuki哔哩哔哩首页样式 by Natsumesaki
Details
AuthorNatsumesaki
LicenseMIT
Categorywww.bilibili.com
Created
Updated
Size58 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Nazuki哔哩哔哩首页样式
@namespace bilibili-home
@version 1.0
@description b站搜索引擎首页样式风格
@author Nazuki
@license MIT
@preprocessor uso
\/*原作者Hakadao *\/
@advanced dropdown HOME_STYLE "首页样式" {
HOME_STYLE_HALF_1 "半屏显示壁纸" <<<EOT
.bili-banner {
height: calc(100vh - 363px)!important;
min-height: 450px!important;
z-index: -1!important;
}
@media screen and (max-width: 1438px) {
.first-screen .space-between {
margin-bottom: .5em
}
}
.primary-menu-itnl {
margin-top: -50px!important;
background-color: var(--a-content-1)!important;
backdrop-filter: var(--a-filter-glass);
}
/*搜索框容器*\/
.international-header .nav-search-box {
top: 30vh!important;
}
@media screen and (max-height: 830px) {
.international-header .nav-search-box {
top: 220px!important;
}
}
/*强行制作出搜索栏上的logo*\/
.international-header .nav-search-box:before {
top: -300%;
}
/* 新首页 *\/
.bili-header .bili-header__banner {
height: calc(100vh - 370px)!important;
min-height: 400px;
max-height: calc(100vh - 370px) !important;
}
EOT;
HOME_STYLE_FULL_2 "全屏壁纸首页" <<<EOT
.bili-banner {
height: 100vh !important;
}
/* 新首页 *\/
.bili-header .bili-header__banner {
height: 100vh !important;
max-height: 100vh !important;
}
EOT;
HOME_STYLE_FULL_1 "搜索栏首页" <<<EOT
.bili-banner {
height: 100vh!important;
}
.b-wrap,
.international-footer {
display: none;
}
/* 新首页 *\/
.bili-header .bili-header__banner {
height: 100vh!important;
max-height: 100vh !important;
}
.bili-header__channel,
.bili-layout,
.palette-button-outer,
.header-channel,
.bili-feed4-layout {
display: none!important;
}
EOT;
HOME_STYLE_HALF_2 "页眉壁纸" <<<EOT
.bili-banner {
height: 30vh !important;
min-height: 210px !important;
z-index: -1!important;
}
.primary-menu-itnl {
margin-top: -35px!important;
background-color: var(--a-content-1)!important;
backdrop-filter: var(--a-filter-glass);
}
/*搜索框容器*\/
.international-header .nav-search-box {
top: 12vh!important;
}
@media screen and (max-height: 830px) {
.international-header .nav-search-box {
top: 70px!important;
}
}
/*观看列表按钮位置调整*\/
.first-screen .space-between {
margin-top: 1em!important;
margin-bottom: 0!important;
}
/*强行制作出搜索栏上的logo*\/
.international-header:not(.fixed-top) .nav-search-box:after {
top: 45%!important;
left: -200px!important;
transform: scale(.6);
}
/* 新首页 *\/
.bili-header .bili-header__banner {
height: 30vh !important;
min-height: 210px !important;
max-height: 30vh !important;
}
/*搜索框容器*\/
#i_cecream .bili-header :not(.slide-down) .center-search-container .center-search__bar {
transform: translateY(12vh);
}
@media screen and (max-height: 830px) {
#i_cecream .bili-header :not(.slide-down) .center-search-container .center-search__bar {
transform: translateY(70px);
}
}
/*logo*\/
.bili-header .center-search-container::after {
margin-left: -400px!important;
transform: scale(.6) translateX(-50%) translateY(-110px) !important;
}
EOT;
}
@advanced dropdown THEME "主题选择" {
THEME_DARK_AUTO "暗色模式（跟随系统）" <<<EOT
@media screen and (prefers-color-scheme: dark) {
* {
color-scheme: dark;
}
:root {
--a-bgcolor: hsl(230 12% 6%);
--a-mask-banner-color: hsl(230 12% 6% / var(--a-mask-banner-opacity));
--a-content-1: hsl(230 12% 10%);
--a-content-1-solid: hsl(230 12% 10%);
--a-elevated-1: hsl(230 12% 14%);
--a-elevated-1-solid: hsl(230 12% 14%);
--a-elevated-2: hsl(230 12% 18%);
--a-elevated-2-solid: hsl(230 12% 18%);
--a-divide: rgba(120, 123, 128, 0.3);
--a-depth-white: contrast(0) invert(1);
--a-fill-1: rgba(120, 123, 128, .4);
--a-fill-2: rgba(120, 123, 128, 0.3);
--a-text-1: hsl(215 19% 98%);
--a-text-2: hsl(215 19% 95% / 90%);
--a-text-3: hsl(240 33% 94% / 60%);
}
@supports (backdrop-filter: blur(15px)) {
:root {
--a-filter-glass: blur(15px) saturate(180%);
--a-content-1: hsl(230 12% 10% / 60%);
--a-elevated-1: hsl(230 12% 14% / 60%);
--a-elevated-2: hsl(230 12% 18% / 60%);
}
}
}
EOT;
THEME_DARK "暗色模式" <<<EOT
* {
color-scheme: dark;
}
:root {
--a-bgcolor: hsl(230 12% 6%);
--a-mask-banner-color: hsl(230 12% 6% / var(--a-mask-banner-opacity));
--a-content-1: hsl(230 12% 10%);
--a-content-1-solid: hsl(230 12% 10%);
--a-elevated-1: hsl(230 12% 14%);
--a-elevated-1-solid: hsl(230 12% 14%);
--a-elevated-2: hsl(230 12% 18%);
--a-elevated-2-solid: hsl(230 12% 18%);
--a-divide: rgba(120, 123, 128, 0.3);
--a-depth-white: contrast(0) invert(1);
--a-fill-1: rgba(120, 123, 128, .4);
--a-fill-2: rgba(120, 123, 128, 0.3);
--a-text-1: hsl(215 19% 98%);
--a-text-2: hsl(215 19% 95% / 90%);
--a-text-3: hsl(240 33% 94% / 60%);
}
@supports (backdrop-filter: blur(15px)) {
:root {
--a-filter-glass: blur(15px) saturate(180%);
--a-content-1: hsl(230 12% 10% / 60%);
--a-elevated-1: hsl(230 12% 14% / 60%);
--a-elevated-2: hsl(230 12% 18% / 60%);
}
}
EOT;
THEME_BLACK_AUTO "黑色模式（跟随系统）" <<<EOT
@media screen and (prefers-color-scheme: dark) {
* {
color-scheme: dark;
}
:root {
--a-bgcolor: hsl(0 0% 0%);
--a-mask-banner-color: hsl(0 0% 0% / var(--a-mask-banner-opacity));
--a-content-1: hsl(230 12% 8%);
--a-content-1-solid: hsl(230 12% 8%);
--a-elevated-1: hsl(230 12% 14%);
--a-elevated-1-solid: hsl(230 12% 14%);
--a-elevated-2: hsl(230 12% 20%);
--a-elevated-2-solid: hsl(230 12% 20%);
--a-divide: rgba(84, 84, 88, 0.65);
--a-depth-white: contrast(0) invert(1);
--a-fill-1: rgba(120, 123, 128, .4);
--a-fill-2: rgba(120, 123, 128, 0.3);
--a-text-1: hsl(215 19% 98%);
--a-text-2: hsl(215 19% 95% / 90%);
--a-text-3: hsl(240 33% 94% / 60%);
}
@supports (backdrop-filter: blur(15px)) {
:root {
--a-filter-glass: blur(15px) saturate(180%);
--a-content-1: hsl(230 12% 8% / 60%);
--a-elevated-1: hsl(230 12% 14% / 60%);
--a-elevated-2: hsl(230 12% 20% / 60%);
}
}
}
EOT;
THEME_BLACK "黑色模式" <<<EOT
* {
color-scheme: dark;
}
:root {
--a-bgcolor: hsl(0 0% 0%);
--a-mask-banner-color: hsl(0 0% 0% / var(--a-mask-banner-opacity));
--a-content-1: hsl(230 12% 8%);
--a-content-1-solid: hsl(230 12% 8%);
--a-elevated-1: hsl(230 12% 14%);
--a-elevated-1-solid: hsl(230 12% 14%);
--a-elevated-2: hsl(230 12% 20%);
--a-elevated-2-solid: hsl(230 12% 20%);
--a-divide: rgba(84, 84, 88, 0.65);
--a-depth-white: contrast(0) invert(1);
--a-fill-1: rgba(120, 123, 128, .4);
--a-fill-2: rgba(120, 123, 128, 0.3);
--a-text-1: hsl(215 19% 98%);
--a-text-2: hsl(215 19% 95% / 90%);
--a-text-3: hsl(240 33% 94% / 60%);
}
@supports (backdrop-filter: blur(15px)) {
:root {
--a-filter-glass: blur(15px) saturate(180%);
--a-content-1: hsl(230 12% 8% / 60%);
--a-elevated-1: hsl(230 12% 14% / 60%);
--a-elevated-2: hsl(230 12% 20% / 60%);
}
}
EOT;
THEME_LIGHT "亮色模式" <<<EOT
EOT;
}
@advanced dropdown SCROLL_BAR_STYLE "滚动条样式调整" {
SCROLL_BAR_HIDDEN "隐藏滚动条" <<<EOT
/* custom chrome, edge scrollbar *\/
::-webkit-scrollbar {
width: 0;
height: 0;
}
::-webkit-scrollbar-corner,
::-webkit-scrollbar-track {
background: transparent;
}
/* custom firefox scrollbar *\/
* {
scrollbar-width: none;
}
EOT;
SCROLL_BAR_THEME "配合样式" <<<EOT
/* custom chrome, edge scrollbar *\/
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-corner,
::-webkit-scrollbar-track {
background: transparent;
}
html > ::-webkit-scrollbar-track {
background: var(--a-bgcolor);
}
::-webkit-scrollbar-thumb {
background-color: hsl(0 0% 50% / .6);
border-radius: 20px;
}
/* custom firefox scrollbar *\/
html > * {
scrollbar-color: hsl(0 0% 50% / .6) var(--a-bgcolor);
scrollbar-width: thin !important;
}
* {
scrollbar-color: hsl(0 0% 50% / .6) transparent;
scrollbar-width: thin !important;
}
EOT;
SCROLL_BAR_NOMAL "不做改动（对 mac 用户支援会很好）" <<<EOT
EOT;
}
@advanced dropdown LOGO_COLOR "选择 LOGO 图标样式" {
LOGO_COLOR_DEFAULT "默认" <<<EOT
#FFF
EOT;
LOGO_COLOR_WHITE "白色" <<<EOT
#FFF
EOT;
LOGO_COLOR_THEME "跟随主题颜色" <<<EOT
var(--a-theme-color)
EOT;
}
@advanced dropdown LOGO_DISPLAY "是否显示 LOGO" {
LOGO_ON "显示" <<<EOT
EOT;
LOGO_OFF "关闭" <<<EOT
.international-header .nav-search-box:after,
.bili-header .center-search-container::after {
display: none
}
EOT;
}
@advanced dropdown TOPBAR_LOGO_COLOR "导航栏 LOGO 图标颜色" {
LOGO_COLOR_WHITE "白色" <<<EOT
/*logo*\/
.bili-header .left-entry__title::before {
color: #FFF;
}
/*logo右侧箭头*\/
.bili-header .left-entry__title .mini-header__title .mini...