2023年政策修订增补工作正在进行中，欢迎参与！
User:GuoPC/js/MoeMobileFloatToolbar.js
< User:GuoPC | js
注意：在保存之后，您可能需要清除浏览器缓存才能看到所作出的变更的影响。
- Firefox/Safari：按住“Shift”的同时单击“刷新”，或按“Ctrl-F5”或“Ctrl-R”（Mac为“⌘-R”）
- Google Chrome：按“Ctrl-Shift-R”（Mac为“⌘-Shift-R”）
- Internet Explorer：按住“Ctrl”的同时单击“刷新”，或按“Ctrl-F5”
- Opera：在“工具→首选项”中清除缓存
- 如果您已登录但该页面出现未登录状态，请尝试在地址栏的地址最后添加代码
?_=1来访问最新页面。 - 添加代码后的本页地址如下：
-{R|https://moegirl.icu/User:GuoPC/js/MoeMobileFloatToolbar.js?_=1}-
$(function() {
mw.loader.addStyleTag(`
#moe-mobile-float-toolbar-trigger {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
left: -12px;
top: 50%;
background: var(--theme-background-color);
border-radius: 50%;
box-shadow: rgba(17, 17, 26, .1) 0 0 10px;
font-size: 14px;
padding: 5px;
transform: scale(1.6) translateY(-50%);
transition: all .3s cubic-bezier(.22, .61, .36, 1);
opacity: .8;
width: 28px;
height: 28px;
z-index: 721;
box-sizing: border-box;
cursor: pointer;
}
#moe-mobile-float-toolbar-trigger:hover {
left: 10px;
opacity: 1;
transition: all .3s cubic-bezier(.22, .61, .36, 1);
}
#moe-mobile-float-toolbar-trigger.triggered {
left: 2em;
opacity: 1;
transition: all .3s cubic-bezier(.22, .61, .36, 1);
}
#moe-mobile-float-toolbar-back #moe-mobile-float-toolbar-backdrop {
position: fixed;
top: 0;
left: 0;
background: transparent;
width: 100%;
height: 100%;
transition: background .3s ease-in;
z-index: 1;
}
#moe-mobile-float-toolbar-back.covered #moe-mobile-float-toolbar-backdrop {
background: #0005;
transition: background .3s ease-in;
}
#moe-mobile-float-toolbar-back.uncovered #moe-mobile-float-toolbar-backdrop {
background: transparent;
transition: background .3s ease-in;
}
#moe-mobile-float-toolbar-main {
position: fixed;
left: -10em;
top: 50%;
background: var(--theme-background-color);
border-top: 4px solid var(--theme-accent-color);
border-radius: .4rem;
padding: .4rem;
transform: translateY(-50%);
transition: all .3s cubic-bezier(.22, .61, .36, 1);
opacity: 0;
z-index: 722;
}
#moe-mobile-float-toolbar-main.shown {
left: 1em;
opacity: 1;
transition: all .3s cubic-bezier(.22, .61, .36, 1);
}
#moe-mobile-float-toolbar-main-label {
margin: .5em;
user-select: none;
}
#moe-mobile-float-toolbar-main li {
border-radius: .4rem;
padding: .2em .5em;
transition: all .3s cubic-bezier(.22, .61, .36, 1);
}
#moe-mobile-float-toolbar-main li:hover {
background: #0001;
transition: all .3s cubic-bezier(.22, .61, .36, 1);
}
`);
var toolbarIcon = $('#moe-mobile-toolbar .xicon').clone();
var toolbarList = $('#moe-mobile-toolbar ul').clone();
$('#moe-full-container')
.append($('<div>').addClass('mobile-only').attr('id', 'moe-mobile-float-toolbar-container'));
$('#moe-mobile-float-toolbar-container')
.append($('<div>').attr('id', 'moe-mobile-float-toolbar-trigger').append(toolbarIcon))
.append($('<div>').attr('id', 'moe-mobile-float-toolbar-main'));
$('#moe-mobile-float-toolbar-main')
.append($('<div>').attr('id', 'moe-mobile-float-toolbar-main-label').text('工具'))
.append(toolbarList);
$('#moe-mobile-float-toolbar-container')
.append($('<div>').attr('id', 'moe-mobile-float-toolbar-back'));
$('#moe-mobile-float-toolbar-container').on('click', '#moe-mobile-float-toolbar-trigger', function() {
$('#moe-mobile-float-toolbar-back')
.append($('<div>').attr('id', 'moe-mobile-float-toolbar-backdrop'));
$('#moe-mobile-float-toolbar-back').attr('class', 'covered');
$('#moe-mobile-float-toolbar-trigger').addClass('triggered');
$('#moe-mobile-float-toolbar-main').addClass('shown');
});
$('#moe-full-container').on('click', '#moe-mobile-float-toolbar-backdrop, #moe-global-header, #moe-float-toc-trigger', function() {
$('#moe-mobile-float-toolbar-back').attr('class', 'uncovered');
$('#moe-mobile-float-toolbar-trigger').removeClass('triggered');
$('#moe-mobile-float-toolbar-main').removeClass('shown');
setTimeout(function() {
$('#moe-mobile-float-toolbar-backdrop').remove();
}, 300);
});
$('#moe-mobile-toolbar').hide();
});