bilibili搜索引擎首页样式 by hakadao

Imported from https://cdn.jsdelivr.net/gh/hakadao/bilibili-simple-home@master/index.user.css

Mirrored from https://github.com/hakadao/bilibili-simple-home/raw/master/index.user.css

Details

Authorhakadao

LicenseMIT

Categorybilibili, b站, 哔哩哔哩, bilibili.com

Created3 years, 2 months ago

Updated9 months, 4 weeks ago

Code size60 kB

Code checksum6751401f

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

b站搜索引擎首页样式风格，支持几种不同的样式效果

Notes

更新说明已移至 GitHub，这里将暂停记录变更事项

v1.6.17

紧急修复 banner 出现季节动画导致遮盖背景图问题

v1.6.16

添加滚动条样式选项 #43 #42
删除旧首页样式

v1.6.15

适配新内测首页
部分样式颜色调整

v1.6.14

Update scrollbar style (Firefox, Chrome, and Edge)
Add video zoom effect switch (default is off because it lags too much and uses more CPU in Firefox)

v1.6.13

Fix #37

v1.6.12

修正全屏模式下点一下空白区域搜索栏、logo等就会消失 #35
样式配色微调

v1.6.11

修正 topbar 阔度问题

v1.6.10

修正全屏显示壁纸与全屏显示壁纸，不能下滑查看更多视频点击 banner 后高度错误
修正显示横向 scroll bar 问题
调整暗色模式的部分配色

v1.6.9

修正新版首頁顯示遊戲覆蓋背景bug
新版首頁頂部彈窗的顏色適配

v1.6.8.1

更新顏色配色
修正新版首頁搜尋欄附近遊標不能點擊問題

v1.6.4

修正樣式錯誤
對線條搜尋欄樣式進行一定的修改
修改樣式設定中的格式化字符串命名方式
新首頁調整部分動畫效果
添加是否显示 LOGO、分区弹出层显示22娘（新首页）功能

v1.6.2

為新首頁添加【样式2】半屏显示壁纸樣式
修正部分舊首頁樣式上的錯誤
添加禁用右侧排行榜（仅新首页）功能

v1.6.0

修正图片被官方活动覆盖问题

v1.5.9

調整部分樣式效果
添加开启背景全屏覆盖功能

v1.5.8

修正部分樣式 bug
添加自由選擇背景色（實驗性）、背景依附方式設定

V1.5.6 (2022/02/07)

修正部分样式错误
部分显示效果改良

V1.5.5 (2022/02/01)

修正部分样式上的问题
下拉顶栏UI重新设计

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.

/* ==UserStyle==
@name           bilibili搜索引擎首页样式
@namespace      hakadao-bilibili-simple-home
@version        1.8.0
@description    b站搜索引擎首页样式风格，支持几种不同的样式效果
@author         Hakadao <a578457889743@gmail.com> (https://www.hakadao.top)
@homepageURL    https://github.com/hakadao/bilibili-simple-home
@supportURL     https://github.com/hakadao/bilibili-simple-home/issues
@license        MIT
@preprocessor   uso

@advanced dropdown HOME_STYLE "首页样式" {
	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_FULL_2 "全屏显示壁纸" <<<EOT
        /*
        **全屏显示壁纸
        *\/

        .bili-banner {
            height: 100vh !important;
        } 
		/* 新首页 *\/
		.bili-header .bili-header__banner {
		    height: 100vh !important;
			max-height: 100vh !important;
		}
    EOT;

	HOME_STYLE_HALF_1 "【样式1】半屏显示壁纸" <<<EOT
        /*
        **【样式1】半屏显示壁纸
        *\/

        .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_HALF_2 "【样式2】半屏显示壁纸" <<<EOT
        /*
        **【样式2】半屏显示壁纸
        *\/

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

	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;
}

@advanced dropdown LOGO_COLOR "选择 LOGO 图标样式" {
	LOGO_COLOR_THEME "跟随主题颜色" <<<EOT
        var(--a-theme-color)
    EOT;

	LOGO_COLOR_WHITE "白色" <<<EOT
		#FFF
    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-header__arrow {
		color: white;
		filter:...

Reviews

No reviews yet.