549 lines
9.5 KiB
CSS
549 lines
9.5 KiB
CSS
@charset "utf-8";
|
|
a,mark {
|
|
color:inherit
|
|
}
|
|
html {
|
|
color:#000;
|
|
background:#fff;
|
|
font-family:Arial,'Microsoft YaHei';
|
|
font-size:34px;
|
|
-webkit-user-select:none;
|
|
user-select:none;
|
|
-webkit-overflow-scrolling:touch
|
|
}
|
|
body,button,dd,div,dl,dt,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,pre,strong,td,textarea,th,ul {
|
|
padding:0;
|
|
margin:0
|
|
}
|
|
table {
|
|
border-collapse:collapse;
|
|
border-spacing:0
|
|
}
|
|
img {
|
|
display:block;
|
|
border:0;
|
|
max-width:100%
|
|
}
|
|
a {
|
|
text-decoration:none;
|
|
outline:0
|
|
}
|
|
em,i,strong {
|
|
font-style:inherit;
|
|
font-weight:inherit
|
|
}
|
|
li {
|
|
list-style:none
|
|
}
|
|
h1,h2,h3,h4,h5,h6 {
|
|
font-size:100%;
|
|
font-weight:400
|
|
}
|
|
button,input,optgroup,option,select,textarea {
|
|
font-family:inherit;
|
|
font-size:inherit;
|
|
font-style:inherit;
|
|
font-weight:inherit
|
|
}
|
|
mark {
|
|
background-color:rgba(0,0,0,0)
|
|
}
|
|
.clearfix:after {
|
|
content:"\200B";
|
|
display:block;
|
|
height:0;
|
|
clear:both
|
|
}
|
|
.none,[v-cloak] {
|
|
display:none
|
|
}
|
|
.dire-wrap,.key-wrap {
|
|
display:inline-block;
|
|
overflow:hidden;
|
|
will-change:auto;
|
|
contain:style;
|
|
backface-visibility:hidden
|
|
}
|
|
.mask {
|
|
position:fixed;
|
|
width:100%;
|
|
height:100%;
|
|
left:0;
|
|
top:0;
|
|
z-index:95;
|
|
background:rgba(0,0,0,.7)
|
|
}
|
|
.tx_ov {
|
|
overflow:hidden;
|
|
white-space:nowrap;
|
|
text-overflow:ellipsis
|
|
}
|
|
.tx_wrap {
|
|
word-break:break-all;
|
|
word-wrap:break-word
|
|
}
|
|
body {
|
|
background:#000
|
|
}
|
|
.dc-centre,.dc-dire,.dire-ctrl,.key-btn {
|
|
background-size:100% 100%
|
|
}
|
|
#screen {
|
|
position:absolute;
|
|
width:256px;
|
|
height:240px;
|
|
top:calc((100vh + 50px - 256px)/ 2);
|
|
right: 240px;
|
|
transform:scale(3.3333,3.3333) rotate(90deg);
|
|
border:none;
|
|
overflow:hidden
|
|
}
|
|
.ctrl-wrap {
|
|
position:fixed;
|
|
height:100vh;
|
|
width:100%;
|
|
top:0;
|
|
left:0
|
|
}
|
|
.dc-centre,.dc-dire,.dire-ctrl,.dire-wrap,.key-btn,.key-wrap {
|
|
position:absolute
|
|
}
|
|
.dire-wrap {
|
|
width:390px;
|
|
height:390px;
|
|
top:-40px;
|
|
left:-12px
|
|
}
|
|
.dire-ctrl {
|
|
width:290px;
|
|
height:290px;
|
|
margin:50px;
|
|
background-image:url(../resources/7.png);
|
|
overflow:hidden
|
|
}
|
|
.dc-centre {
|
|
width:124px;
|
|
height:124px;
|
|
background-image:url(../resources/8.png);
|
|
will-change:auto;
|
|
contain:style
|
|
}
|
|
.dc-dire {
|
|
width:384px;
|
|
height:384px;
|
|
margin:3px;
|
|
background-image:url(../resources/9.png);
|
|
will-change:auto;
|
|
contain:style
|
|
}
|
|
.key-wrap {
|
|
width:100vw;
|
|
height:390px;
|
|
bottom:0;
|
|
left:10px
|
|
}
|
|
.key-btn {
|
|
width:150px;
|
|
height:150px;
|
|
line-height:150px;
|
|
text-align:center;
|
|
font-size:56px;
|
|
transform:rotate(90deg);
|
|
font-weight:700;
|
|
color:rgba(255,255,255,.5);
|
|
opacity:.5;
|
|
background-image:url(../resources/8.png)
|
|
}
|
|
.key-btn.kay-B {
|
|
top:88px;
|
|
left:80px;
|
|
opacity:.7
|
|
}
|
|
.key-btn.kay-A {
|
|
top:220px;
|
|
left:10px;
|
|
opacity:.7
|
|
}
|
|
.key-btn.kay-Y {
|
|
top:88px;
|
|
left:232px
|
|
}
|
|
.key-btn.kay-X {
|
|
top:256px;
|
|
left:162px
|
|
}
|
|
.key-btn.kay-AB {
|
|
top:220px;
|
|
left:232px
|
|
}
|
|
.key-btn.flat-btn {
|
|
width:120px;
|
|
height:80px;
|
|
font-size:30px;
|
|
line-height:80px
|
|
}
|
|
.key-btn.kay-SE {
|
|
top:120px;
|
|
right:0
|
|
}
|
|
.key-btn.kay-ST {
|
|
top:260px;
|
|
right:0
|
|
}
|
|
.btn-on {
|
|
transform:scale(.9,.9) rotate(90deg)
|
|
}
|
|
.layui-m-layer {
|
|
position:relative;
|
|
z-index:19891014
|
|
}
|
|
.layui-m-layer * {
|
|
-webkit-box-sizing:content-box;
|
|
-moz-box-sizing:content-box;
|
|
box-sizing:content-box
|
|
}
|
|
.layui-m-layermain,.layui-m-layershade {
|
|
position:fixed;
|
|
left:0;
|
|
top:0;
|
|
width:100%;
|
|
height:100%
|
|
}
|
|
.layui-m-layershade {
|
|
background-color:rgba(0,0,0,.7);
|
|
pointer-events:auto
|
|
}
|
|
.layui-m-layermain {
|
|
display:table;
|
|
pointer-events:none
|
|
}
|
|
.layui-m-layermain .layui-m-layersection {
|
|
display:table-cell;
|
|
vertical-align:middle;
|
|
text-align:center
|
|
}
|
|
.layui-m-layerchild {
|
|
position:relative;
|
|
display:inline-block;
|
|
text-align:left;
|
|
background-color:#fff;
|
|
font-size:2.6vh;
|
|
border-radius:20px;
|
|
box-shadow:0 0 8px rgba(0,0,0,.1);
|
|
pointer-events:auto;
|
|
-webkit-overflow-scrolling:touch;
|
|
-webkit-animation-fill-mode:both;
|
|
animation-fill-mode:both;
|
|
-webkit-animation-duration:.2s;
|
|
animation-duration:.2s
|
|
}
|
|
@-webkit-keyframes layui-m-anim-scale {
|
|
0% {
|
|
opacity:0;
|
|
-webkit-transform:scale(.5);
|
|
transform:scale(.5)
|
|
}
|
|
100% {
|
|
opacity:1;
|
|
-webkit-transform:scale(1);
|
|
transform:scale(1)
|
|
}
|
|
}@keyframes layui-m-anim-scale {
|
|
0% {
|
|
opacity:0;
|
|
-webkit-transform:scale(.5);
|
|
transform:scale(.5)
|
|
}
|
|
100% {
|
|
opacity:1;
|
|
-webkit-transform:scale(1);
|
|
transform:scale(1)
|
|
}
|
|
}.layui-m-anim-scale {
|
|
animation-name:layui-m-anim-scale;
|
|
-webkit-animation-name:layui-m-anim-scale
|
|
}
|
|
@-webkit-keyframes layui-m-anim-up {
|
|
0% {
|
|
opacity:0;
|
|
-webkit-transform:translateY(1600px);
|
|
transform:translateY(1600px)
|
|
}
|
|
100% {
|
|
opacity:1;
|
|
-webkit-transform:translateY(0);
|
|
transform:translateY(0)
|
|
}
|
|
}@keyframes layui-m-anim-up {
|
|
0% {
|
|
opacity:0;
|
|
-webkit-transform:translateY(1600px);
|
|
transform:translateY(1600px)
|
|
}
|
|
100% {
|
|
opacity:1;
|
|
-webkit-transform:translateY(0);
|
|
transform:translateY(0)
|
|
}
|
|
}.layui-m-anim-up {
|
|
-webkit-animation-name:layui-m-anim-up;
|
|
animation-name:layui-m-anim-up
|
|
}
|
|
.layui-m-layer0 .layui-m-layerchild {
|
|
width:70%
|
|
}
|
|
.layui-m-layer1 .layui-m-layerchild {
|
|
border:none;
|
|
border-radius:0
|
|
}
|
|
.layui-m-layer2 .layui-m-layerchild {
|
|
width:15vh;
|
|
border:none;
|
|
padding:35px 0;
|
|
box-shadow:none;
|
|
color:#fff;
|
|
background-color:rgba(0,0,0,.7)
|
|
}
|
|
.layui-m-layerchild h3 {
|
|
padding:0 5%;
|
|
height:7.5vh;
|
|
line-height:7.5vh;
|
|
font-size:2.8vh;
|
|
font-weight:400;
|
|
border-radius:20px 20px 0 0;
|
|
text-align:center;
|
|
border-bottom:1px solid #E0E0E0
|
|
}
|
|
.layui-m-layerbtn span,.layui-m-layerchild h3 {
|
|
text-overflow:ellipsis;
|
|
overflow:hidden;
|
|
white-space:nowrap
|
|
}
|
|
.layui-m-layercont {
|
|
padding:8% 10%;
|
|
line-height:4vh;
|
|
text-align:center
|
|
}
|
|
.layui-m-layer1 .layui-m-layercont {
|
|
padding:0;
|
|
text-align:left
|
|
}
|
|
.layui-m-layer2 .layui-m-layercont {
|
|
text-align:center;
|
|
padding:0;
|
|
line-height:0
|
|
}
|
|
.layui-m-layer2 .layui-m-layercont i {
|
|
width:3vh;
|
|
height:3vh;
|
|
margin-left:1vh;
|
|
display:inline-block;
|
|
background-color:#fff;
|
|
border-radius:100%;
|
|
-webkit-animation:layui-m-anim-loading 1.4s infinite ease-in-out;
|
|
animation:layui-m-anim-loading 1.4s infinite ease-in-out;
|
|
-webkit-animation-fill-mode:both;
|
|
animation-fill-mode:both
|
|
}
|
|
.layui-m-layerbtn,.layui-m-layerbtn span {
|
|
position:relative;
|
|
text-align:center;
|
|
border-radius:0 0 20px 20px
|
|
}
|
|
.layui-m-layer2 .layui-m-layercont p {
|
|
margin-top:2vh;
|
|
font-size:2.5vh
|
|
}
|
|
@-webkit-keyframes layui-m-anim-loading {
|
|
0%,100%,80% {
|
|
transform:scale(0);
|
|
-webkit-transform:scale(0)
|
|
}
|
|
40% {
|
|
transform:scale(1);
|
|
-webkit-transform:scale(1)
|
|
}
|
|
}@keyframes layui-m-anim-loading {
|
|
0%,100%,80% {
|
|
transform:scale(0);
|
|
-webkit-transform:scale(0)
|
|
}
|
|
40% {
|
|
transform:scale(1);
|
|
-webkit-transform:scale(1)
|
|
}
|
|
}.layui-m-layer2 .layui-m-layercont i:first-child {
|
|
margin-left:0;
|
|
-webkit-animation-delay:-.32s;
|
|
animation-delay:-.32s
|
|
}
|
|
.layui-m-layer2 .layui-m-layercont i.layui-m-layerload {
|
|
-webkit-animation-delay:-.16s;
|
|
animation-delay:-.16s
|
|
}
|
|
.layui-m-layer2 .layui-m-layercont>div {
|
|
line-height:3.3vh;
|
|
padding-top:14px;
|
|
margin-bottom:40px;
|
|
font-size:3vh
|
|
}
|
|
.layui-m-layerbtn {
|
|
display:block;
|
|
display:-moz-box;
|
|
display:-webkit-box;
|
|
width:100%;
|
|
height:7.5vh;
|
|
line-height:7.5vh;
|
|
font-size:0;
|
|
border-top:1px solid #ddd;
|
|
background-color:#FFF
|
|
}
|
|
.layui-m-layerbtn span {
|
|
display:block;
|
|
-moz-box-flex:1;
|
|
box-flex:1;
|
|
-webkit-box-flex:1;
|
|
font-size:2.8vh;
|
|
cursor:pointer;
|
|
color:#0084ff
|
|
}
|
|
.layui-m-layerbtn span[yes] {
|
|
border-radius:0 0 20px
|
|
}
|
|
.layui-m-layerbtn span[no] {
|
|
border-right:1px solid #ddd;
|
|
border-radius:0 0 0 20px
|
|
}
|
|
.layui-m-layerbtn span:active {
|
|
background-color:#F6F6F6
|
|
}
|
|
.layui-m-layerend {
|
|
position:absolute;
|
|
right:14px;
|
|
top:20px;
|
|
width:60px;
|
|
height:60px;
|
|
border:0;
|
|
font-weight:400;
|
|
background:0 0;
|
|
cursor:pointer;
|
|
-webkit-appearance:none;
|
|
font-size:6vh
|
|
}
|
|
.layui-m-layerend::after,.layui-m-layerend::before {
|
|
position:absolute;
|
|
left:10px;
|
|
top:30px;
|
|
content:'';
|
|
width:18px;
|
|
height:1px;
|
|
background-color:#999;
|
|
transform:rotate(45deg);
|
|
-webkit-transform:rotate(45deg);
|
|
border-radius:12px
|
|
}
|
|
.layui-m-layerend::after {
|
|
transform:rotate(-45deg);
|
|
-webkit-transform:rotate(-45deg)
|
|
}
|
|
body .layui-m-layer .layui-m-layer-footer {
|
|
position:fixed;
|
|
width:95%;
|
|
max-width:100%;
|
|
margin:0 auto;
|
|
left:0;
|
|
right:0;
|
|
bottom:20px;
|
|
background:0 0
|
|
}
|
|
.layui-m-layer-footer .layui-m-layercont {
|
|
padding:20px;
|
|
border-radius:20px 20px 0 0;
|
|
background-color:rgba(255,255,255,.8)
|
|
}
|
|
.layui-m-layer-footer .layui-m-layerbtn {
|
|
display:block;
|
|
height:auto;
|
|
background:0 0;
|
|
border-top:none
|
|
}
|
|
.layui-m-layer-footer .layui-m-layerbtn span {
|
|
background-color:rgba(255,255,255,.8)
|
|
}
|
|
.layui-m-layer-footer .layui-m-layerbtn span[no] {
|
|
color:#FD482C;
|
|
border-top:1px solid #c2c2c2;
|
|
border-radius:0 0 20px 20px
|
|
}
|
|
.layui-m-layer-footer .layui-m-layerbtn span[yes] {
|
|
margin-top:20px;
|
|
border-radius:20px
|
|
}
|
|
body .layui-m-layer .layui-m-layer-msg {
|
|
width:auto;
|
|
max-width:90%;
|
|
margin:0 auto;
|
|
background-color:rgba(0,0,0,.7);
|
|
color:#fff
|
|
}
|
|
.layui-m-layer-msg .layui-m-layercont {
|
|
padding:20px 40px;
|
|
font-size:2.8vh
|
|
}
|
|
/*html, body {
|
|
padding: 0;
|
|
margin: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
cursor: none;
|
|
}
|
|
canvas {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}*/
|
|
/*span {
|
|
color: red;
|
|
bottom: 0px;
|
|
position: absolute;
|
|
right: 0px;
|
|
display: none;
|
|
font-size: 40pt;
|
|
font-weight: bold;
|
|
text-align: right;
|
|
vertical-align: bottom;
|
|
font-family: monospace;
|
|
display:none;
|
|
}*/
|
|
.background-div{
|
|
position: fixed;
|
|
background-color: #000;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
.info-mask {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 110vw;
|
|
height: 250vw;
|
|
background-color: #000;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
background-image:url(../resources/invite-mask.jpg);
|
|
background-repeat:no-repeat;
|
|
background-size: 100%
|
|
}
|
|
#mask-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
}
|
|
.container::-webkit-scrollbar {
|
|
display: none; //Safari and Chrome
|
|
}
|