Refactor dropdown icon

This commit is contained in:
the1812 2018-12-03 19:54:54 +08:00
parent babe0a5adb
commit 2b47861c63
6 changed files with 31 additions and 26 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 +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 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>
<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><i class="icon-arrow"></i></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

View File

@ -20,6 +20,7 @@
<div class="gui-settings-dropdown popup">
<input readonly type="text" spellcheck="false" key="defaultPlayerMode">
<ul></ul>
<i class="icon-arrow"></i>
</div>
</label>
</li>

View File

@ -144,13 +144,12 @@
margin: 0 16px;
transition: all 0.2s;
}
.gui-settings-textbox-container input,
.gui-settings-dropdown input
.gui-settings-textbox-container input
{
border: none;
height: 100%;
max-width: 80px;
padding: 2px 8px;
padding: 4px 8px;
background: #8884;
transition: all 0.2s;
font-size: 16px;
@ -351,8 +350,16 @@ li.category.folded i.icon-arrow
{
position: relative;
cursor: pointer;
display: inline-block;
-webkit-tap-highlight-color: transparent;
background-color: #8884;
display: inline-flex;
align-items: center;
}
.gui-settings-dropdown>i
{
transition: all .2s ease-out;
transform-origin: center;
transform: rotate(180deg);
}
.gui-settings-dropdown>ul
{
@ -385,23 +392,20 @@ li.category.folded i.icon-arrow
{
transform: scaleY(1);
}
.gui-settings-dropdown.opened>i
{
transform: rotate(0deg);
}
.gui-settings-dropdown input
{
cursor: pointer;
}
.gui-settings-dropdown::after
{
content: "";
border: 4px solid black;
position: absolute;
top: calc(50% - 6px);
box-sizing: border-box;
right: 6px;
transform-origin: center;
transform: rotate(45deg);
border-left-color: transparent;
border-top-color: transparent;
opacity: .8;
border: none;
height: 100%;
max-width: 80px;
padding: 4px 8px;
transition: all 0.2s;
font-size: 16px;
background-color: transparent;
}
.gui-settings-mask