Add dropdown styles

This commit is contained in:
the1812 2018-11-12 19:20:17 +08:00
parent 04249abe8c
commit b83988288d
8 changed files with 34 additions and 15 deletions

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

@ -1 +1 @@
<div class="gui-settings-panel"><div class="gui-settings-box"><div class="gui-settings-header"><span class="gui-settings-title">设置</span><svg class="gui-settings-close" viewBox="0 0 24 24"><path/></svg></div><div class="gui-settings-content"><ul><category>样式</category><li class="indent-0"><label class="gui-settings-textbox-container"><span>主题颜色</span><div class="custom-color-preview"><div class="predefined-colors"><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><li class="indent-0"><label><span>默认播放器模式</span><div class="gui-settings-dropdown"><input type="text" spellcheck="false" key="defaultPlayerMode"><ul></ul></div></label></li><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><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="0" key="blurSettingsPanel" dependencies=""></checkbox><checkbox indent="0" key="useCache" dependencies=""></checkbox></ul></div></div></div> <div class="gui-settings-panel"><div class="gui-settings-box"><div class="gui-settings-header"><span class="gui-settings-title">设置</span><svg class="gui-settings-close" viewBox="0 0 24 24"><path/></svg></div><div class="gui-settings-content"><ul><category>样式</category><li class="indent-0"><label class="gui-settings-textbox-container"><span>主题颜色</span><div class="custom-color-preview"><div class="predefined-colors"><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><li class="indent-0"><label><span class="gui-settings-dropdown-span">默认播放器模式</span><div class="gui-settings-dropdown"><input type="text" spellcheck="false" key="defaultPlayerMode"><ul></ul></div></label></li><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><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="0" key="blurSettingsPanel" dependencies=""></checkbox><checkbox indent="0" key="useCache" dependencies=""></checkbox></ul></div></div></div>

File diff suppressed because one or more lines are too long

View File

@ -337,7 +337,8 @@ body>div.to-top.on,
.user-info .user-info-hd .t, .user-info .user-info-hd .t,
.user-info .points-wrp .points-schedule .now-points, .user-info .points-wrp .points-schedule .now-points,
#community_msg .dyn_menu li a, #community_msg .dyn_menu li a,
.list.main_body .list_box .next_button .list.main_body .list_box .next_button,
.gui-settings-dropdown input
{ {
color: #eee !important; color: #eee !important;
} }

View File

@ -38,7 +38,7 @@
<category>视频与直播</category> <category>视频与直播</category>
<li class="indent-0"> <li class="indent-0">
<label> <label>
<span>默认播放器模式</span> <span class="gui-settings-dropdown-span">默认播放器模式</span>
<div class="gui-settings-dropdown"> <div class="gui-settings-dropdown">
<input type="text" spellcheck="false" key="defaultPlayerMode"> <input type="text" spellcheck="false" key="defaultPlayerMode">
<ul></ul> <ul></ul>

View File

@ -234,12 +234,14 @@ span.settings-category
align-items: center; align-items: center;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
.gui-settings-textbox-container span .gui-settings-textbox-container span,
.gui-settings-dropdown-span
{ {
margin: 0 16px; margin: 0 16px;
transition: all 0.2s; transition: all 0.2s;
} }
.gui-settings-textbox-container input .gui-settings-textbox-container input,
.gui-settings-dropdown input
{ {
border-radius: 4px; border-radius: 4px;
border: none; border: none;
@ -517,6 +519,8 @@ i.settings-category-arrow::after
{ {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
display: inline-block;
-webkit-tap-highlight-color: transparent;
} }
.gui-settings-dropdown>ul .gui-settings-dropdown>ul
{ {
@ -526,6 +530,20 @@ i.settings-category-arrow::after
transform-origin: top; transform-origin: top;
transform: scaleY(0); transform: scaleY(0);
transition: all .2s ease-out; transition: all .2s ease-out;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0px 3px 20px 2px #0004;
border-radius: 4px;
}
.gui-settings-dropdown ul li
{
margin: 8px 0;
height: auto;
}
.gui-settings-dropdown ul li:hover
{
background: rgba(0,0,0,0.16);
} }
.gui-settings-dropdown:hover>ul, .gui-settings-dropdown:hover>ul,
.gui-settings-dropdown:focus-within>ul .gui-settings-dropdown:focus-within>ul