Add compact style for custom navbar

This commit is contained in:
the1812 2019-05-04 16:19:58 +08:00
parent a3de8bb59c
commit 0c7d68538f
16 changed files with 69 additions and 18 deletions

View File

@ -226,6 +226,7 @@ declare global
customNavbarFill: boolean,
allNavbarFill: boolean,
customNavbarShadow: boolean,
customNavbarCompact: boolean,
playerShadow: boolean,
narrowDanmaku: 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

View File

@ -102,6 +102,7 @@ const settings = {
customNavbarFill: true,
allNavbarFill: true,
customNavbarShadow: true,
customNavbarCompact: false,
playerShadow: false,
narrowDanmaku: true,
favoritesRedirect: true,
@ -1754,6 +1755,7 @@ Resource.manifest = {
customNavbar: "使用自定义顶栏",
customNavbarFill: "主题色填充",
customNavbarShadow: "投影",
customNavbarCompact: "紧凑布局",
allNavbarFill: "填充其他顶栏",
},
},

View File

@ -102,6 +102,7 @@ const settings = {
customNavbarFill: true,
allNavbarFill: true,
customNavbarShadow: true,
customNavbarCompact: false,
playerShadow: false,
narrowDanmaku: true,
favoritesRedirect: true,
@ -1754,6 +1755,7 @@ Resource.manifest = {
customNavbar: "使用自定义顶栏",
customNavbarFill: "主题色填充",
customNavbarShadow: "投影",
customNavbarCompact: "紧凑布局",
allNavbarFill: "填充其他顶栏",
},
},

View File

@ -546,6 +546,7 @@ Resource.manifest = {
customNavbar: "使用自定义顶栏",
customNavbarFill: "主题色填充",
customNavbarShadow: "投影",
customNavbarCompact: "紧凑布局",
allNavbarFill: "填充其他顶栏",
},
},

View File

@ -77,6 +77,7 @@ export const settings = {
customNavbarFill: true,
allNavbarFill: true,
customNavbarShadow: true,
customNavbarCompact: false,
playerShadow: false,
narrowDanmaku: true,
favoritesRedirect: true,

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -163,6 +163,10 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
/* transform-origin: top; */
/* 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
{
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;
position: relative;
}
.custom-navbar.compact #custom-navbar-home-popup .category-item
{
padding: 6px;
}
#custom-navbar-home-popup .category-item:hover
{
background-color: #0001;
@ -230,6 +238,10 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
{
min-width: 150px;
}
.custom-navbar.compact #custom-navbar-home-popup .category-item.main
{
min-width: 110px;
}
#custom-navbar-home-popup .category-item .popup
{
z-index: 10002;
@ -257,6 +269,10 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
font-size: 11pt;
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,
#upload-actions a:hover,
#message-list a:hover
@ -545,6 +561,10 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
width: 100%;
height: 100%;
}
.custom-navbar.compact .video-list li:not(.more) a
{
padding: 6px 8px;
}
.custom-navbar .video-list li:hover
{
background: rgba(0,0,0,0.1);
@ -562,6 +582,10 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
display: flex;
justify-content: center;
}
.custom-navbar.compact .video-list li.more a
{
padding: 6px 0;
}
.custom-navbar .video-list li.more:hover
{
border-color: var(--theme-color);
@ -580,12 +604,23 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
{
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
{
justify-content: space-between;
position: relative;
padding: 6px 8px !important;
}
.custom-navbar.compact .video-list.history li:not(.more) a
{
padding: 6px !important;
}
.custom-navbar .video-list.history a .description
{
opacity: 0.6;

View File

@ -826,10 +826,12 @@ class HistoryList extends VideoList
document.body.insertAdjacentHTML("beforeend", html);
addSettingsListener("useDarkStyle", darkHandler);
darkHandler(settings.useDarkStyle);
addSettingsListener("customNavbarFill", value => classHandler("fill", value, document.querySelector(".custom-navbar")));
classHandler("fill", settings.customNavbarFill, document.querySelector(".custom-navbar"));
addSettingsListener("customNavbarShadow", value => classHandler("shadow", value, document.querySelector(".custom-navbar")));
classHandler("shadow", settings.customNavbarShadow, document.querySelector(".custom-navbar"));
["Fill", "Shadow", "Compact"].forEach(item =>
{
addSettingsListener("customNavbar" + item, value => classHandler(item.toLowerCase(), value, document.querySelector(".custom-navbar")));
classHandler(item.toLowerCase(), settings["customNavbar" + item], document.querySelector(".custom-navbar"));
});
const components = [
new Logo,
new Category,

View File

@ -58,6 +58,7 @@
<checkbox indent="1" key="customNavbarFill" dependencies="customNavbar"></checkbox>
<checkbox indent="1" key="allNavbarFill" 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="darkSchedule" dependencies=""></checkbox>
<textbox indent="1" key="darkScheduleStart" dependencies="darkSchedule"></textbox>

View File

@ -93,6 +93,7 @@ export const toolTips = new Map([
["customNavbarFill", `是否使用主题色填充顶栏.`],
["allNavbarFill", `是否使用主题色填充其他的顶栏, 包括直播/相簿/会员购等.`],
["customNavbarShadow", `是否为顶栏添加一层阴影效果.`],
["customNavbarCompact", `是否为顶栏使用更紧凑的布局.`],
["playerShadow", `为播放器添加主题色投影.`],
["narrowDanmaku", `在网页全屏时, 即使宽度过小也强制保留弹幕发送栏, 注意这可能导致右侧的功能按钮挤出边界.`],
]);

View File

@ -93,6 +93,7 @@ export const toolTips = new Map<keyof BilibiliEvolvedSettings, string>([
["customNavbarFill", `是否使用主题色填充顶栏.`],
["allNavbarFill", `是否使用主题色填充其他的顶栏, 包括直播/相簿/会员购等.`],
["customNavbarShadow", `是否为顶栏添加一层阴影效果.`],
["customNavbarCompact", `是否为顶栏使用更紧凑的布局.`],
["playerShadow", `为播放器添加主题色投影.`],
["narrowDanmaku", `在网页全屏时, 即使宽度过小也强制保留弹幕发送栏, 注意这可能导致右侧的功能按钮挤出边界.`],
]);