mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Add compact style for custom navbar
This commit is contained in:
parent
a3de8bb59c
commit
0c7d68538f
1
@types/global/index.d.ts
vendored
1
@types/global/index.d.ts
vendored
@ -226,6 +226,7 @@ declare global
|
|||||||
customNavbarFill: boolean,
|
customNavbarFill: boolean,
|
||||||
allNavbarFill: boolean,
|
allNavbarFill: boolean,
|
||||||
customNavbarShadow: boolean,
|
customNavbarShadow: boolean,
|
||||||
|
customNavbarCompact: boolean,
|
||||||
playerShadow: boolean,
|
playerShadow: boolean,
|
||||||
narrowDanmaku: boolean,
|
narrowDanmaku: boolean,
|
||||||
favoritesRedirect: boolean,
|
favoritesRedirect: boolean,
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -102,6 +102,7 @@ const settings = {
|
|||||||
customNavbarFill: true,
|
customNavbarFill: true,
|
||||||
allNavbarFill: true,
|
allNavbarFill: true,
|
||||||
customNavbarShadow: true,
|
customNavbarShadow: true,
|
||||||
|
customNavbarCompact: false,
|
||||||
playerShadow: false,
|
playerShadow: false,
|
||||||
narrowDanmaku: true,
|
narrowDanmaku: true,
|
||||||
favoritesRedirect: true,
|
favoritesRedirect: true,
|
||||||
@ -1754,6 +1755,7 @@ Resource.manifest = {
|
|||||||
customNavbar: "使用自定义顶栏",
|
customNavbar: "使用自定义顶栏",
|
||||||
customNavbarFill: "主题色填充",
|
customNavbarFill: "主题色填充",
|
||||||
customNavbarShadow: "投影",
|
customNavbarShadow: "投影",
|
||||||
|
customNavbarCompact: "紧凑布局",
|
||||||
allNavbarFill: "填充其他顶栏",
|
allNavbarFill: "填充其他顶栏",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@ -102,6 +102,7 @@ const settings = {
|
|||||||
customNavbarFill: true,
|
customNavbarFill: true,
|
||||||
allNavbarFill: true,
|
allNavbarFill: true,
|
||||||
customNavbarShadow: true,
|
customNavbarShadow: true,
|
||||||
|
customNavbarCompact: false,
|
||||||
playerShadow: false,
|
playerShadow: false,
|
||||||
narrowDanmaku: true,
|
narrowDanmaku: true,
|
||||||
favoritesRedirect: true,
|
favoritesRedirect: true,
|
||||||
@ -1754,6 +1755,7 @@ Resource.manifest = {
|
|||||||
customNavbar: "使用自定义顶栏",
|
customNavbar: "使用自定义顶栏",
|
||||||
customNavbarFill: "主题色填充",
|
customNavbarFill: "主题色填充",
|
||||||
customNavbarShadow: "投影",
|
customNavbarShadow: "投影",
|
||||||
|
customNavbarCompact: "紧凑布局",
|
||||||
allNavbarFill: "填充其他顶栏",
|
allNavbarFill: "填充其他顶栏",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@ -546,6 +546,7 @@ Resource.manifest = {
|
|||||||
customNavbar: "使用自定义顶栏",
|
customNavbar: "使用自定义顶栏",
|
||||||
customNavbarFill: "主题色填充",
|
customNavbarFill: "主题色填充",
|
||||||
customNavbarShadow: "投影",
|
customNavbarShadow: "投影",
|
||||||
|
customNavbarCompact: "紧凑布局",
|
||||||
allNavbarFill: "填充其他顶栏",
|
allNavbarFill: "填充其他顶栏",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@ -77,6 +77,7 @@ export const settings = {
|
|||||||
customNavbarFill: true,
|
customNavbarFill: true,
|
||||||
allNavbarFill: true,
|
allNavbarFill: true,
|
||||||
customNavbarShadow: true,
|
customNavbarShadow: true,
|
||||||
|
customNavbarCompact: false,
|
||||||
playerShadow: false,
|
playerShadow: false,
|
||||||
narrowDanmaku: true,
|
narrowDanmaku: true,
|
||||||
favoritesRedirect: true,
|
favoritesRedirect: true,
|
||||||
|
|||||||
2
min/custom-navbar.min.css
vendored
2
min/custom-navbar.min.css
vendored
File diff suppressed because one or more lines are too long
2
min/custom-navbar.min.js
vendored
2
min/custom-navbar.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
min/settings-tooltip.zh-CN.min.js
vendored
2
min/settings-tooltip.zh-CN.min.js
vendored
File diff suppressed because one or more lines are too long
@ -163,6 +163,10 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
|
|||||||
/* transform-origin: top; */
|
/* transform-origin: top; */
|
||||||
/* transition: all 0.15s cubic-bezier(0.18, 0.89, 0.38, 1.15) .2s; */
|
/* transition: all 0.15s cubic-bezier(0.18, 0.89, 0.38, 1.15) .2s; */
|
||||||
}
|
}
|
||||||
|
.custom-navbar.compact .popup
|
||||||
|
{
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
.custom-navbar.dark .popup
|
.custom-navbar.dark .popup
|
||||||
{
|
{
|
||||||
box-shadow: rgba(0,0,0,0.3) 0 4px 40px 20px;
|
box-shadow: rgba(0,0,0,0.3) 0 4px 40px 20px;
|
||||||
@ -205,6 +209,10 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
.custom-navbar.compact #custom-navbar-home-popup .category-item
|
||||||
|
{
|
||||||
|
padding: 6px;
|
||||||
|
}
|
||||||
#custom-navbar-home-popup .category-item:hover
|
#custom-navbar-home-popup .category-item:hover
|
||||||
{
|
{
|
||||||
background-color: #0001;
|
background-color: #0001;
|
||||||
@ -230,6 +238,10 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
|
|||||||
{
|
{
|
||||||
min-width: 150px;
|
min-width: 150px;
|
||||||
}
|
}
|
||||||
|
.custom-navbar.compact #custom-navbar-home-popup .category-item.main
|
||||||
|
{
|
||||||
|
min-width: 110px;
|
||||||
|
}
|
||||||
#custom-navbar-home-popup .category-item .popup
|
#custom-navbar-home-popup .category-item .popup
|
||||||
{
|
{
|
||||||
z-index: 10002;
|
z-index: 10002;
|
||||||
@ -257,6 +269,10 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
|
|||||||
font-size: 11pt;
|
font-size: 11pt;
|
||||||
line-height: 16pt;
|
line-height: 16pt;
|
||||||
}
|
}
|
||||||
|
.custom-navbar.compact #custom-navbar-home-popup .category-item .popup a
|
||||||
|
{
|
||||||
|
padding: 6px;
|
||||||
|
}
|
||||||
#custom-navbar-home-popup .category-item .popup a:hover,
|
#custom-navbar-home-popup .category-item .popup a:hover,
|
||||||
#upload-actions a:hover,
|
#upload-actions a:hover,
|
||||||
#message-list a:hover
|
#message-list a:hover
|
||||||
@ -545,6 +561,10 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
.custom-navbar.compact .video-list li:not(.more) a
|
||||||
|
{
|
||||||
|
padding: 6px 8px;
|
||||||
|
}
|
||||||
.custom-navbar .video-list li:hover
|
.custom-navbar .video-list li:hover
|
||||||
{
|
{
|
||||||
background: rgba(0,0,0,0.1);
|
background: rgba(0,0,0,0.1);
|
||||||
@ -562,6 +582,10 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
.custom-navbar.compact .video-list li.more a
|
||||||
|
{
|
||||||
|
padding: 6px 0;
|
||||||
|
}
|
||||||
.custom-navbar .video-list li.more:hover
|
.custom-navbar .video-list li.more:hover
|
||||||
{
|
{
|
||||||
border-color: var(--theme-color);
|
border-color: var(--theme-color);
|
||||||
@ -580,12 +604,23 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
|
|||||||
{
|
{
|
||||||
border: none !important;
|
border: none !important;
|
||||||
}
|
}
|
||||||
|
.custom-navbar.compact .video-list.history .history-item .title,
|
||||||
|
.custom-navbar.compact .video-list li:not(.more) a
|
||||||
|
{
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
.custom-navbar .video-list.history li:not(.more) a
|
.custom-navbar .video-list.history li:not(.more) a
|
||||||
{
|
{
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 6px 8px !important;
|
padding: 6px 8px !important;
|
||||||
}
|
}
|
||||||
|
.custom-navbar.compact .video-list.history li:not(.more) a
|
||||||
|
{
|
||||||
|
padding: 6px !important;
|
||||||
|
}
|
||||||
.custom-navbar .video-list.history a .description
|
.custom-navbar .video-list.history a .description
|
||||||
{
|
{
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
|
|||||||
@ -826,10 +826,12 @@ class HistoryList extends VideoList
|
|||||||
document.body.insertAdjacentHTML("beforeend", html);
|
document.body.insertAdjacentHTML("beforeend", html);
|
||||||
addSettingsListener("useDarkStyle", darkHandler);
|
addSettingsListener("useDarkStyle", darkHandler);
|
||||||
darkHandler(settings.useDarkStyle);
|
darkHandler(settings.useDarkStyle);
|
||||||
addSettingsListener("customNavbarFill", value => classHandler("fill", value, document.querySelector(".custom-navbar")));
|
["Fill", "Shadow", "Compact"].forEach(item =>
|
||||||
classHandler("fill", settings.customNavbarFill, document.querySelector(".custom-navbar"));
|
{
|
||||||
addSettingsListener("customNavbarShadow", value => classHandler("shadow", value, document.querySelector(".custom-navbar")));
|
addSettingsListener("customNavbar" + item, value => classHandler(item.toLowerCase(), value, document.querySelector(".custom-navbar")));
|
||||||
classHandler("shadow", settings.customNavbarShadow, document.querySelector(".custom-navbar"));
|
classHandler(item.toLowerCase(), settings["customNavbar" + item], document.querySelector(".custom-navbar"));
|
||||||
|
});
|
||||||
|
|
||||||
const components = [
|
const components = [
|
||||||
new Logo,
|
new Logo,
|
||||||
new Category,
|
new Category,
|
||||||
|
|||||||
@ -58,6 +58,7 @@
|
|||||||
<checkbox indent="1" key="customNavbarFill" dependencies="customNavbar"></checkbox>
|
<checkbox indent="1" key="customNavbarFill" dependencies="customNavbar"></checkbox>
|
||||||
<checkbox indent="1" key="allNavbarFill" dependencies="customNavbar"></checkbox>
|
<checkbox indent="1" key="allNavbarFill" dependencies="customNavbar"></checkbox>
|
||||||
<checkbox indent="1" key="customNavbarShadow" dependencies="customNavbar"></checkbox>
|
<checkbox indent="1" key="customNavbarShadow" dependencies="customNavbar"></checkbox>
|
||||||
|
<checkbox indent="1" key="customNavbarCompact" dependencies="customNavbar"></checkbox>
|
||||||
<checkbox indent="0" key="useDarkStyle" dependencies=""></checkbox>
|
<checkbox indent="0" key="useDarkStyle" dependencies=""></checkbox>
|
||||||
<checkbox indent="0" key="darkSchedule" dependencies=""></checkbox>
|
<checkbox indent="0" key="darkSchedule" dependencies=""></checkbox>
|
||||||
<textbox indent="1" key="darkScheduleStart" dependencies="darkSchedule"></textbox>
|
<textbox indent="1" key="darkScheduleStart" dependencies="darkSchedule"></textbox>
|
||||||
|
|||||||
@ -93,6 +93,7 @@ export const toolTips = new Map([
|
|||||||
["customNavbarFill", `是否使用主题色填充顶栏.`],
|
["customNavbarFill", `是否使用主题色填充顶栏.`],
|
||||||
["allNavbarFill", `是否使用主题色填充其他的顶栏, 包括直播/相簿/会员购等.`],
|
["allNavbarFill", `是否使用主题色填充其他的顶栏, 包括直播/相簿/会员购等.`],
|
||||||
["customNavbarShadow", `是否为顶栏添加一层阴影效果.`],
|
["customNavbarShadow", `是否为顶栏添加一层阴影效果.`],
|
||||||
|
["customNavbarCompact", `是否为顶栏使用更紧凑的布局.`],
|
||||||
["playerShadow", `为播放器添加主题色投影.`],
|
["playerShadow", `为播放器添加主题色投影.`],
|
||||||
["narrowDanmaku", `在网页全屏时, 即使宽度过小也强制保留弹幕发送栏, 注意这可能导致右侧的功能按钮挤出边界.`],
|
["narrowDanmaku", `在网页全屏时, 即使宽度过小也强制保留弹幕发送栏, 注意这可能导致右侧的功能按钮挤出边界.`],
|
||||||
]);
|
]);
|
||||||
|
|||||||
@ -93,6 +93,7 @@ export const toolTips = new Map<keyof BilibiliEvolvedSettings, string>([
|
|||||||
["customNavbarFill", `是否使用主题色填充顶栏.`],
|
["customNavbarFill", `是否使用主题色填充顶栏.`],
|
||||||
["allNavbarFill", `是否使用主题色填充其他的顶栏, 包括直播/相簿/会员购等.`],
|
["allNavbarFill", `是否使用主题色填充其他的顶栏, 包括直播/相簿/会员购等.`],
|
||||||
["customNavbarShadow", `是否为顶栏添加一层阴影效果.`],
|
["customNavbarShadow", `是否为顶栏添加一层阴影效果.`],
|
||||||
|
["customNavbarCompact", `是否为顶栏使用更紧凑的布局.`],
|
||||||
["playerShadow", `为播放器添加主题色投影.`],
|
["playerShadow", `为播放器添加主题色投影.`],
|
||||||
["narrowDanmaku", `在网页全屏时, 即使宽度过小也强制保留弹幕发送栏, 注意这可能导致右侧的功能按钮挤出边界.`],
|
["narrowDanmaku", `在网页全屏时, 即使宽度过小也强制保留弹幕发送栏, 注意这可能导致右侧的功能按钮挤出边界.`],
|
||||||
]);
|
]);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user