1 line
3.4 KiB
CSS
1 line
3.4 KiB
CSS
.player-wrapper{place-content:center;font-size:12px;width:100%;height:500px}.player-wrapper,.player-wrapper .player-display{display:-webkit-box;display:-ms-flexbox;display:flex}.player-wrapper .player-display{position:absolute;left:4px;bottom:48px;width:150px;height:30px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:#fff}.player-wrapper .container-shell{position:relative;width:100%}.player-wrapper #container{background:rgba(13,14,27,.7);width:100%;height:100%}@media (max-width:720px){.player-wrapper{width:100%;height:100%}.control-wrapper{width:100%}.control-wrapper .control{display:-webkit-box;display:-ms-flexbox;display:flex}}.control-wrapper{position:relative;width:6.25rem;height:6.25rem;max-width:6.25rem;max-height:6.25rem;border-radius:100%;margin-top:1.5rem;margin-left:.5rem;float:left}.control-panel{position:relative;top:0;left:5rem;height:11rem;max-height:11rem}.control-btn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;width:44%;height:44%;border-radius:5px;border:1px solid #1890ff;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .3s linear;transition:all .3s linear}.control-btn:hover{cursor:pointer}.control-btn i{font-size:20px;color:#1890ff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.control-btn i:hover,.control-zoom-btn:hover{cursor:pointer}.control-round{position:absolute;top:21%;left:21%;width:58%;height:58%;background:#fff;border-radius:100%}.control-round-inner{position:absolute;left:13%;top:13%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:70%;height:70%;font-size:40px;color:#1890ff;border:1px solid #1890ff;border-radius:100%;-webkit-transition:all .3s linear;transition:all .3s linear}.control-inner-btn{position:absolute;width:60%;height:60%;background:#fafafa}.control-top{top:-8%;left:27%;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.control-top,.control-top i{border-radius:5px 100% 5px 0}.control-top i{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.control-top .control-inner{left:-1px;bottom:0;border-top:1px solid #1890ff;border-right:1px solid #1890ff;border-radius:0 100% 0 0}.control-left{top:27%;left:-8%;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-radius:5px 0 5px 100%}.control-left i{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.control-left .control-inner{right:-1px;top:-1px;border-bottom:1px solid #1890ff;border-left:1px solid #1890ff;border-radius:0 0 0 100%}.control-right{top:27%;right:-8%;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-radius:5px 100% 5px 0}.control-right i{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.control-right .control-inner{left:-1px;bottom:-1px;border-top:1px solid #1890ff;border-right:1px solid #1890ff;border-radius:0 100% 0 0}.control-bottom{left:27%;bottom:-8%;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-radius:0 5px 100% 5px}.control-bottom i{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.control-bottom .control-inner{top:-1px;left:-1px;border-bottom:1px solid #1890ff;border-right:1px solid #1890ff;border-radius:0 0 100% 0} |