/*全局样式*/
body{margin:5px;margin-top:70px;margin-bottom:50px;scrollbar-width:none;transition:margin-top .2s}
*{user-select:none;box-sizing:border-box;font-family:微软雅黑;outline:none;scrollbar-width:none;}
a{color:#1e9fff;text-decoration:none;}
a:hover{text-decoration:underline;}
a:active{opacity:.8;}
::-webkit-scrollbar{display:none;}

/*公共组件*/
.su-btn{margin-bottom:7px;background:#1e9fff;color:white;transition:all .2s;padding:5px;text-align:center;border-radius:5px;}
.dark .su-btn{background:#0084e9;color:rgb(235, 235, 235);}
.su-btn:hover{background:#0084e9;}
.dark .su-btn:hover{background:#007bda!important}
.su-btn:active{background:#0084e9;color:#b0ddff}

/*加载动画*/
.su-loading{position:relative;animation: loading .5s linear 0s infinite;display:inline-block;width:30px;height:30px;}
.su-loading::before{position:absolute;top:0;bottom:0;left:0;margin:auto;display:inline-block;content:"";background:#1e9fff;width:10px;height:10px;border-radius:5px;}
.su-loading::after{position:absolute;top:0;bottom:0;right:0;margin:auto;display:inline-block;content:"";background:orange;width:10px;height:10px;border-radius:5px;}
@keyframes loading {0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}

/*顶栏部分*/
header{position:fixed;top:5px;left:5px;right:5px;z-index:10;border-radius:5px;box-shadow:0 0 3px 0 rgba(0,0,0,.4);padding:5px;background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);height:50px;transition:top .2s}
.dark header{background:rgba(0,0,0,.4)}
.su-title{position:absolute;top:0;bottom:0;left:5px;margin:auto;height:moz-fit-content;height:fit-content;}
.su-title span:nth-child(1){font-size:2em;color:#1e9fff;font-weight:bold}
.su-title span:nth-child(2){color:orange;font-size:2em;}
.su-menuico svg{position:absolute;top:0;bottom:0;right:5px;margin:auto;width:30px;height:30px;}
.dark .su-menuico svg path{fill:rgb(235, 235, 235)!important;}
.su-menuico:hover svg path{fill:#1e9fff!important;}
.su-menuico:active{opacity:.8;}

/*底栏部分*/
footer{transition:bottom .2s;position:fixed;bottom:5px;left:5px;right:5px;z-index:10;border-radius:5px;box-shadow:0 0 3px 0 rgba(0,0,0,.4);padding:2px;background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:.95em;text-align:center;color:#757575;}
.dark footer{background:rgba(0,0,0,.4);color:rgb(185, 185, 185)}

/*菜单*/
.su-menu{opacity:0;height:0;overflow:hidden;width:200px;position:fixed;top:60px;right:5px;z-index:10;border-radius:5px;box-shadow:0 0 3px 0 rgba(0,0,0,.4);background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
.dark .su-menu{background:rgba(0,0,0,.7);color:rgb(235, 235, 235);}
.su-menu.open{height:moz-fit-content;height:fit-content;animation:openMenu .2s;opacity:1;}
.su-menu.closed{animation:closeMenu .2s;opacity:0;}
.su-menu .item{border-radius:5px;transition:all .2s;padding:10px;margin:3px;}
.su-menu .item:hover{background:white;}
.dark .su-menu .item:hover{background:black;}
.su-menu .item:active{transform:scale(.98);}
@keyframes openMenu{
	from{transform:translateY(-10px);opacity:0;display:block;}
	to{transform:translateY(0px);opacity:1;display:block;}
}
@keyframes closeMenu{
	from{height:moz-fit-content;height:fit-content;transform:translateY(0px);opacity:1;display:block;}
	to{height:moz-fit-content;height:fit-content;transform:translateY(-10px);opacity:0;display:block;}
}

/*背景图片*/
.su-background img{transition:all .2s;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:-2;object-fit:cover;filter:blur(10px);transform:scale(1.05)}
.su-background::before{content:"";position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:-1;background:rgba(255,255,255,0.8);display:block;}
.dark .su-background::before{background:rgba(0,0,0,.6);}

/*对话框*/
.su-dialog{display:none;overflow:hidden;z-index:21;box-shadow:0 0 3px 0 rgba(0,0,0,.4);width:80vw;max-width:500px;position:fixed;top:0;bottom:0;left:0;right:0;margin:auto;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-radius:5px;padding:20px;}
.dark .su-dialog{border:1px solid #474747;background:rgba(0,0,0,.7);color:rgb(235, 235, 235);box-shadow:0 0 5px 0 rgba(255,255,255,.3);}
.su-dialog .title{width:100%;font-size:1.5em;font-weight:bold;}
.su-dialog .content{padding-top:10px;padding-bottom:20px;}
.su-dialog .btn{font-size:.95em;width:80px;margin-left:calc(100% - 80px);margin-bottom:0;}
.su-dialog .btn-group{text-align:right;}
.su-dialog .btn-group .su-btn{font-size:.95em;display:inline-block;text-align:center;margin-left:7px;width:80px;margin-bottom:0;}
.su-dialog-mask{animation:maskFadeIn .3s;background:rgba(0,0,0,.3);position:fixed;top:0;bottom:0;left:0;right:0;z-index:20}
.su-dialog.open{animation:openDialog .3s;display:block;}
.su-dialog.closed{opacity:0;animation:closeDialog .3s;display:block;}
.su-dialog.warn{animation:warnDialog .2s;display:block;}
@keyframes openDialog{from{transform:translateY(10px);opacity:0;display:block;}to{transform:translateY(0px);opacity:1;display:block;}}
@keyframes closeDialog{from{transform:translateY(0px);opacity:1;display:block;}to{transform:translateY(10px);opacity:0;display:block;}}
@keyframes warnDialog{0%{opacity:1;}50%{opacity:.6;}100%{opacity:1;}}
@keyframes maskFadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes maskFadeOut{from{opacity:1;}to{opacity:0;}}