Improve settings UI

This commit is contained in:
the1812 2018-12-03 19:25:43 +08:00
parent c82476b50e
commit feb8e565cb
11 changed files with 79 additions and 74 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,6 +1,6 @@
// ==UserScript==
// @name Bilibili Evolved (Preview)
// @version 1.6.2
// @version 1.6.3
// @description 增强哔哩哔哩Web端体验(预览版分支): 修复界面瑕疵, 删除广告, 使用夜间模式浏览, 下载视频或视频封面, 以及增加对触屏设备的支持等.
// @author Grant Howard, Coulomb-G
// @copyright 2018, Grant Howrad (https://github.com/the1812)
@ -937,12 +937,11 @@
html = html.replace(new RegExp(`(<(.+)\\s*?indent="[\\d]+?"\\s*?key="${key}"\\s*?dependencies=".*?">)[^\\0]*?(</\\2>)`, "g"),
`$1${name}$3`);
}
return html.replace(/<category>([^\0]*?)<\/category>/g, `
<li class="indent-center category">
<span class="settings-category">
$1
<i class="settings-category-arrow"></i>
</span>
return html.replace(/<category\s*?icon="(.+?)">([^\0]*?)<\/category>/g, `
<li class="indent-center category folded">
<i class="icon-$1" style="margin-right:8px"></i>
<span class="settings-category">$2</span>
<i class="icon-arrow" style="margin-left:8px"></i>
</li>
`).replace(/<checkbox\s*?indent="(.+?)"\s*?key="(.+?)"\s*?dependencies="(.*?)">([^\0]*?)<\/checkbox>/g, `
<li class="indent-$1">

View File

@ -1,6 +1,6 @@
// ==UserScript==
// @name Bilibili Evolved
// @version 1.6.2
// @version 1.6.3
// @description 增强哔哩哔哩Web端体验: 修复界面瑕疵, 删除广告, 使用夜间模式浏览, 下载视频或视频封面, 以及增加对触屏设备的支持等.
// @author Grant Howard, Coulomb-G
// @copyright 2018, Grant Howrad (https://github.com/the1812)
@ -937,12 +937,11 @@
html = html.replace(new RegExp(`(<(.+)\\s*?indent="[\\d]+?"\\s*?key="${key}"\\s*?dependencies=".*?">)[^\\0]*?(</\\2>)`, "g"),
`$1${name}$3`);
}
return html.replace(/<category>([^\0]*?)<\/category>/g, `
<li class="indent-center category">
<span class="settings-category">
$1
<i class="settings-category-arrow"></i>
</span>
return html.replace(/<category\s*?icon="(.+?)">([^\0]*?)<\/category>/g, `
<li class="indent-center category folded">
<i class="icon-$1" style="margin-right:8px"></i>
<span class="settings-category">$2</span>
<i class="icon-arrow" style="margin-left:8px"></i>
</li>
`).replace(/<checkbox\s*?indent="(.+?)"\s*?key="(.+?)"\s*?dependencies="(.*?)">([^\0]*?)<\/checkbox>/g, `
<li class="indent-$1">

View File

@ -1 +1 @@
<div class="gui-settings-mask"></div><div class="gui-settings-widgets-box icons-enabled"><div class="gui-settings-header"><i class="icon-widgets"></i><span class="gui-settings-title">附加功能</span></div><div class="widgets-container"></div></div><div class="gui-settings-box icons-enabled"><div class="gui-settings-header"><i class="icon-settings"></i><span class="gui-settings-title">设置</span></div><div class="gui-settings-content"><ul><category>视频与直播</category><li class="indent-0"><label><span class="gui-settings-dropdown-span">默认播放器模式</span><div class="gui-settings-dropdown popup"><input readonly type="text" spellcheck="false" key="defaultPlayerMode"><ul></ul></div></label></li><checkbox indent="0" key="downloadDanmaku" dependencies=""></checkbox><checkbox indent="0" key="autoLightOff" dependencies=""></checkbox><checkbox indent="0" key="expandDanmakuList" dependencies=""></checkbox><checkbox indent="0" key="harunaScale" dependencies=""></checkbox><checkbox indent="0" key="removeLiveWatermark" dependencies=""></checkbox><checkbox indent="0" key="removeVideoTopMask" dependencies=""></checkbox><checkbox indent="0" key="blurVideoControl" dependencies=""></checkbox><checkbox indent="0" key="customControlBackground" dependencies=""></checkbox><textbox indent="1" key="customControlBackgroundOpacity" dependencies="customControlBackground"></textbox><category>样式</category><li class="indent-0"><label class="gui-settings-textbox-container"><span>主题颜色</span><div class="custom-color-preview"><div class="predefined-colors popup"><div class="predefined-colors-grid"></div></div></div><input key="customStyleColor" dependencies="" spellcheck="false" type="text"/></label></li><checkbox indent="0" key="useNewStyle" dependencies=""></checkbox><textbox indent="1" key="blurBackgroundOpacity" dependencies="useNewStyle"></textbox><checkbox indent="0" key="useDarkStyle" dependencies=""></checkbox><checkbox indent="0" key="darkSchedule" dependencies=""></checkbox><textbox indent="1" key="darkScheduleStart" dependencies="darkSchedule"></textbox><textbox indent="1" key="darkScheduleEnd" dependencies="darkSchedule"></textbox><checkbox indent="0" key="overrideNavBar" dependencies=""></checkbox><checkbox indent="1" key="showBanner" dependencies="overrideNavBar"></checkbox><checkbox indent="0" key="forceWide" dependencies=""></checkbox><textbox indent="1" key="forceWideMinWidth" dependencies="forceWide"></textbox><category>工具</category><checkbox indent="0" key="removeAds" dependencies=""></checkbox><checkbox indent="0" key="watchLaterRedirect" dependencies=""></checkbox><checkbox indent="0" key="hideTopSearch" dependencies=""></checkbox><checkbox indent="0" key="fullTweetsTitle" dependencies=""></checkbox><category>触摸优化</category><checkbox indent="0" key="touchNavBar" dependencies=""></checkbox><checkbox indent="0" key="touchVideoPlayer" dependencies=""></checkbox><checkbox indent="1" key="touchVideoPlayerAnimation" dependencies="touchVideoPlayer"></checkbox><checkbox indent="1" key="touchVideoPlayerDoubleTapControl" dependencies="touchVideoPlayer"></checkbox><category>其他</category><checkbox indent="0" key="toast" dependencies=""></checkbox><checkbox indent="1" key="toastInternalError" dependencies="toast"></checkbox><checkbox indent="0" key="blurSettingsPanel" dependencies=""></checkbox><checkbox indent="0" key="useCache" dependencies=""></checkbox></ul></div></div>
<div class="gui-settings-mask"></div><div class="gui-settings-widgets-box icons-enabled"><div class="gui-settings-header"><i class="icon-widgets"></i><span class="gui-settings-title">附加功能</span></div><div class="widgets-container"></div></div><div class="gui-settings-box icons-enabled"><div class="gui-settings-header"><i class="icon-settings"></i><span class="gui-settings-title">设置</span></div><div class="gui-settings-content"><ul><category icon="video">视频与直播</category><li class="indent-0"><label><span class="gui-settings-dropdown-span">默认播放器模式</span><div class="gui-settings-dropdown popup"><input readonly type="text" spellcheck="false" key="defaultPlayerMode"><ul></ul></div></label></li><checkbox indent="0" key="downloadDanmaku" dependencies=""></checkbox><checkbox indent="0" key="autoLightOff" dependencies=""></checkbox><checkbox indent="0" key="expandDanmakuList" dependencies=""></checkbox><checkbox indent="0" key="harunaScale" dependencies=""></checkbox><checkbox indent="0" key="removeLiveWatermark" dependencies=""></checkbox><checkbox indent="0" key="removeVideoTopMask" dependencies=""></checkbox><checkbox indent="0" key="blurVideoControl" dependencies=""></checkbox><checkbox indent="0" key="customControlBackground" dependencies=""></checkbox><textbox indent="1" key="customControlBackgroundOpacity" dependencies="customControlBackground"></textbox><category icon="style">样式</category><li class="indent-0"><label class="gui-settings-textbox-container"><span>主题颜色</span><div class="custom-color-preview"><div class="predefined-colors popup"><div class="predefined-colors-grid"></div></div></div><input key="customStyleColor" dependencies="" spellcheck="false" type="text"/></label></li><checkbox indent="0" key="useNewStyle" dependencies=""></checkbox><textbox indent="1" key="blurBackgroundOpacity" dependencies="useNewStyle"></textbox><checkbox indent="0" key="useDarkStyle" dependencies=""></checkbox><checkbox indent="0" key="darkSchedule" dependencies=""></checkbox><textbox indent="1" key="darkScheduleStart" dependencies="darkSchedule"></textbox><textbox indent="1" key="darkScheduleEnd" dependencies="darkSchedule"></textbox><checkbox indent="0" key="overrideNavBar" dependencies=""></checkbox><checkbox indent="1" key="showBanner" dependencies="overrideNavBar"></checkbox><checkbox indent="0" key="forceWide" dependencies=""></checkbox><textbox indent="1" key="forceWideMinWidth" dependencies="forceWide"></textbox><category icon="tool">工具</category><checkbox indent="0" key="removeAds" dependencies=""></checkbox><checkbox indent="0" key="watchLaterRedirect" dependencies=""></checkbox><checkbox indent="0" key="hideTopSearch" dependencies=""></checkbox><checkbox indent="0" key="fullTweetsTitle" dependencies=""></checkbox><category icon="touch">触摸优化</category><checkbox indent="0" key="touchNavBar" dependencies=""></checkbox><checkbox indent="0" key="touchVideoPlayer" dependencies=""></checkbox><checkbox indent="1" key="touchVideoPlayerAnimation" dependencies="touchVideoPlayer"></checkbox><checkbox indent="1" key="touchVideoPlayerDoubleTapControl" dependencies="touchVideoPlayer"></checkbox><category icon="other">其他</category><checkbox indent="0" key="toast" dependencies=""></checkbox><checkbox indent="1" key="toastInternalError" dependencies="toast"></checkbox><checkbox indent="0" key="blurSettingsPanel" dependencies=""></checkbox><checkbox indent="0" key="useCache" dependencies=""></checkbox></ul></div></div>

File diff suppressed because one or more lines are too long

2
min/icons.min.css vendored

File diff suppressed because one or more lines are too long

View File

@ -13,7 +13,7 @@
</div>
<div class="gui-settings-content">
<ul>
<category>视频与直播</category>
<category icon="video">视频与直播</category>
<li class="indent-0">
<label>
<span class="gui-settings-dropdown-span">默认播放器模式</span>
@ -32,7 +32,7 @@
<checkbox indent="0" key="blurVideoControl" dependencies=""></checkbox>
<checkbox indent="0" key="customControlBackground" dependencies=""></checkbox>
<textbox indent="1" key="customControlBackgroundOpacity" dependencies="customControlBackground"></textbox>
<category>样式</category>
<category icon="style">样式</category>
<li class="indent-0">
<label class="gui-settings-textbox-container">
<span>主题颜色</span>
@ -54,17 +54,17 @@
<checkbox indent="1" key="showBanner" dependencies="overrideNavBar"></checkbox>
<checkbox indent="0" key="forceWide" dependencies=""></checkbox>
<textbox indent="1" key="forceWideMinWidth" dependencies="forceWide"></textbox>
<category>工具</category>
<category icon="tool">工具</category>
<checkbox indent="0" key="removeAds" dependencies=""></checkbox>
<checkbox indent="0" key="watchLaterRedirect" dependencies=""></checkbox>
<checkbox indent="0" key="hideTopSearch" dependencies=""></checkbox>
<checkbox indent="0" key="fullTweetsTitle" dependencies=""></checkbox>
<category>触摸优化</category>
<category icon="touch">触摸优化</category>
<checkbox indent="0" key="touchNavBar" dependencies=""></checkbox>
<checkbox indent="0" key="touchVideoPlayer" dependencies=""></checkbox>
<checkbox indent="1" key="touchVideoPlayerAnimation" dependencies="touchVideoPlayer"></checkbox>
<checkbox indent="1" key="touchVideoPlayerDoubleTapControl" dependencies="touchVideoPlayer"></checkbox>
<category>其他</category>
<category icon="other">其他</category>
<checkbox indent="0" key="toast" dependencies=""></checkbox>
<checkbox indent="1" key="toastInternalError" dependencies="toast"></checkbox>
<checkbox indent="0" key="blurSettingsPanel" dependencies=""></checkbox>

View File

@ -64,7 +64,7 @@
.gui-settings-content ul li
{
font-size: 16px;
margin-bottom: 12px;
margin-bottom: 18px;
display: flex;
height: 24px;
transition: all .2s;
@ -95,8 +95,8 @@
}
.gui-settings-content ul li.category
{
padding: 8px 0;
margin-bottom: 12px;
padding: 16px 0;
margin-bottom: 18px;
border-top: 1px dashed #8884;
border-bottom: 1px dashed #8884;
background: white;
@ -111,7 +111,7 @@
{
margin-bottom: -1px;
}
span.settings-category
.gui-settings-content ul li.category *
{
opacity: 0.8;
}
@ -332,32 +332,13 @@ input[type=text][key]
background: #fffa;
}
}
i.settings-category-arrow
li.category i.icon-arrow
{
transform-origin: center;
transition: all .2s ease-out;
transform: translateY(2.828427px) rotate(-135deg);
height: 100%;
display: inline-block;
margin-left: 12px;
}
li.category.folded i.settings-category-arrow
li.category.folded i.icon-arrow
{
transform: translateY(-2.828427px) rotate(45deg);
}
i.settings-category-arrow::after
{
content: "";
width: 8px;
height: 8px;
background-color: transparent;
border: 2px solid;
border-color: black;
opacity: .8;
display: block;
border-left-color: transparent;
border-top-color: transparent;
border-radius: 2.4px;
transform: rotate(180deg);
}
.gui-settings-dropdown
{
@ -452,6 +433,10 @@ i.settings-category-arrow::after
flex-direction: column;
box-shadow: 4px 0px 16px 0px #0000;
}
.gui-settings-widgets-box
{
width: 200px;
}
.gui-settings-widgets-box.opened,
.gui-settings-box.opened
{
@ -467,9 +452,9 @@ i.settings-category-arrow::after
{
padding: 32px;
display: flex;
align-items: start;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: column;
align-items: stretch;
justify-content: start;
position: relative;
overscroll-behavior: contain;
overflow: auto;

View File

@ -47,4 +47,28 @@
.icons-enabled .icon-ok::after
{
background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#000000" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" /></svg>');
}
.icons-enabled .icon-video::after
{
background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"> <path fill="#000000" d="M17,10.5V7A1,1 0 0,0 16,6H4A1,1 0 0,0 3,7V17A1,1 0 0,0 4,18H16A1,1 0 0,0 17,17V13.5L21,17.5V6.5L17,10.5Z" /></svg>');
}
.icons-enabled .icon-style::after
{
background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"> <path fill="#000000" d="M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z" /></svg>');
}
.icons-enabled .icon-tool::after
{
background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"> <path fill="#000000" d="M9,5V6H15V5H9M22,18C22,18.53 21.79,19 21.4,19.41C21,19.81 20.55,20 20,20H4C3.45,20 3,19.81 2.6,19.41C2.21,19 2,18.53 2,18V14H7V15H9V14H15V15H17V14H22V18M4.5,7.22C4.84,6.41 5.45,6 6.33,6H7V5C7,4.45 7.18,4 7.57,3.59C7.96,3.2 8.44,3 9,3H15C15.56,3 16.04,3.2 16.43,3.59C16.82,4 17,4.45 17,5V6H17.67C18.55,6 19.16,6.41 19.5,7.22L21.58,12H17V11H15V12H9V11H7V12H2.42L4.5,7.22Z" /></svg>');
}
.icons-enabled .icon-touch::after
{
background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"> <path fill="#000000" d="M10,9A1,1 0 0,1 11,8A1,1 0 0,1 12,9V13.47L13.21,13.6L18.15,15.79C18.68,16.03 19,16.56 19,17.14V21.5C18.97,22.32 18.32,22.97 17.5,23H11C10.62,23 10.26,22.85 10,22.57L5.1,18.37L5.84,17.6C6.03,17.39 6.3,17.28 6.58,17.28H6.8L10,19V9M11,5A4,4 0 0,1 15,9C15,10.5 14.2,11.77 13,12.46V11.24C13.61,10.69 14,9.89 14,9A3,3 0 0,0 11,6A3,3 0 0,0 8,9C8,9.89 8.39,10.69 9,11.24V12.46C7.8,11.77 7,10.5 7,9A4,4 0 0,1 11,5M11,3A6,6 0 0,1 17,9C17,10.7 16.29,12.23 15.16,13.33L14.16,12.88C15.28,11.96 16,10.56 16,9A5,5 0 0,0 11,4A5,5 0 0,0 6,9C6,11.05 7.23,12.81 9,13.58V14.66C6.67,13.83 5,11.61 5,9A6,6 0 0,1 11,3Z" /></svg>');
}
.icons-enabled .icon-other::after
{
background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"> <path fill="#000000" d="M11,13.5V21.5H3V13.5H11M9,15.5H5V19.5H9V15.5M12,2L17.5,11H6.5L12,2M12,5.86L10.08,9H13.92L12,5.86M17.5,13C20,13 22,15 22,17.5C22,20 20,22 17.5,22C15,22 13,20 13,17.5C13,15 15,13 17.5,13M17.5,15A2.5,2.5 0 0,0 15,17.5A2.5,2.5 0 0,0 17.5,20A2.5,2.5 0 0,0 20,17.5A2.5,2.5 0 0,0 17.5,15Z" /></svg>');
}
.icons-enabled .icon-arrow::after
{
background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#000000" d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" /></svg>')
}

View File

@ -1 +1 @@
1.6.2
1.6.3