Skip to content

Nazuki哔哩哔哩首页样式 by Natsumesaki

Write a review Install Get Stylus

Details

AuthorNatsumesaki

LicenseMIT

Categorywww.bilibili.com

Created

Updated

Size58 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

b站首页样式

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...

Reviews

No reviews yet.