214 lines
3.8 KiB
CSS
214 lines
3.8 KiB
CSS
.layermbox {
|
|
position:relative;
|
|
z-index:19891014
|
|
}
|
|
.layermmain,.laymshade {
|
|
position:fixed;
|
|
left:0;
|
|
top:0;
|
|
width:100%;
|
|
height:100%
|
|
}
|
|
.layermbtn span,.layermchild {
|
|
display:inline-block;
|
|
position:relative
|
|
}
|
|
.laymshade {
|
|
background-color:rgba(0,0,0,.5);
|
|
pointer-events:auto
|
|
}
|
|
.layermmain {
|
|
display:table;
|
|
font-family:Helvetica,arial,sans-serif;
|
|
pointer-events:none
|
|
}
|
|
.layermmain .section {
|
|
opacity:0.6;
|
|
display:table-cell;
|
|
vertical-align:middle;
|
|
text-align:center
|
|
}
|
|
.layermchild {
|
|
text-align:left;
|
|
pointer-events:auto;
|
|
-webkit-animation-fill-mode:both;
|
|
animation-fill-mode:both;
|
|
-webkit-animation-duration:.18s;
|
|
animation-duration:.18s
|
|
}
|
|
.layermborder {
|
|
border:1px solid #999
|
|
}
|
|
@-webkit-keyframes bounceIn {
|
|
0% {
|
|
opacity:0;
|
|
-webkit-transform:scale(.5);
|
|
transform:scale(.5)
|
|
}
|
|
100% {
|
|
opacity:1;
|
|
-webkit-transform:scale(1);
|
|
transform:scale(1)
|
|
}
|
|
}.layermanim {
|
|
animation-name:bounceIn;
|
|
-webkit-animation-name:bounceIn;
|
|
}
|
|
.layermbox0 .layermchild {
|
|
max-width:90%;
|
|
min-width:9.375rem;
|
|
color:#fff;
|
|
}
|
|
.layermbox1 .layermchild {
|
|
border:none;
|
|
border-radius:0
|
|
}
|
|
.layermbox2 .layermchild {
|
|
width:auto;
|
|
max-width:16.25rem;
|
|
min-width:2.5rem;
|
|
border:none;
|
|
background:0 0;
|
|
box-shadow:none;
|
|
color:#fff
|
|
}
|
|
.layermchild h3 {
|
|
padding:0 2.8125rem 0 0.625rem;
|
|
height:3.125rem;
|
|
line-height:3.125rem;
|
|
font-size:1rem;
|
|
font-weight:400;
|
|
border-radius:0.1875rem 0.1875rem 0 0;
|
|
border-bottom:1px solid #EBEBEB
|
|
}
|
|
.layermbtn span,.layermchild h3 {
|
|
text-overflow:ellipsis;
|
|
overflow:hidden;
|
|
white-space:nowrap
|
|
}
|
|
.layermcont {
|
|
padding:.924rem 0.9375rem;
|
|
text-align:center;
|
|
background-color:#000;
|
|
font-size:0.725rem;
|
|
line-height:1.024rem;
|
|
border-radius:0.1875rem;
|
|
box-shadow:0 0 0.5rem rgba(0,0,0,.1);
|
|
}
|
|
.layermbox1 .layermcont {
|
|
padding:0;
|
|
text-align:left
|
|
}
|
|
.layermbox2 .layermcont {
|
|
text-align:center;
|
|
padding:0;
|
|
line-height:0
|
|
}
|
|
.layermbox2 .layermcont i {
|
|
width:1.5625rem;
|
|
height:1.5625rem;
|
|
margin-left:0.5rem;
|
|
display:inline-block;
|
|
background-color:#fff;
|
|
border-radius:100%;
|
|
-webkit-animation:bouncedelay 1.4s infinite ease-in-out;
|
|
animation:bouncedelay 1.4s infinite ease-in-out;
|
|
-webkit-animation-fill-mode:both;
|
|
animation-fill-mode:both
|
|
}
|
|
@-webkit-keyframes bouncedelay {
|
|
0%,100%,80% {
|
|
transform:scale(0);
|
|
-webkit-transform:scale(0)
|
|
}
|
|
40% {
|
|
transform:scale(1);
|
|
-webkit-transform:scale(1)
|
|
}
|
|
}@keyframes bouncedelay {
|
|
0%,100%,80% {
|
|
transform:scale(0);
|
|
-webkit-transform:scale(0)
|
|
}
|
|
40% {
|
|
transform:scale(1);
|
|
-webkit-transform:scale(1)
|
|
}
|
|
}.layermbox2 .layermcont i:first-child {
|
|
margin-left:0;
|
|
-webkit-animation-delay:-.32s;
|
|
animation-delay:-.32s
|
|
}
|
|
.layermbox2 .layermcont i.laymloadtwo {
|
|
-webkit-animation-delay:-.16s;
|
|
animation-delay:-.16s
|
|
}
|
|
.layermbox2 .layermcont>div {
|
|
line-height:0rem;
|
|
padding-top:0.4375rem;
|
|
margin-bottom:1.25rem;
|
|
font-size:0.875rem
|
|
}
|
|
.layermbtn {
|
|
position:relative;
|
|
height: 1.4375rem;
|
|
line-height: 1.4375rem;
|
|
font-size:0;
|
|
text-align:center;
|
|
}
|
|
.layermbtn span {
|
|
width:50%;
|
|
text-align:center;
|
|
font-size:0.675rem;
|
|
cursor:pointer;
|
|
background-color: #fff;
|
|
color: #333;
|
|
height: 1.4375rem;
|
|
line-height: 1.4375rem;
|
|
|
|
}
|
|
.layermbtn span:first-child {
|
|
height: 1.4375rem;
|
|
background-color:#fff;
|
|
border-right:.02rem solid #333;
|
|
color:#333;
|
|
}
|
|
.layermbtn:before {
|
|
content:'\20';
|
|
position:absolute;
|
|
width:1px;
|
|
height: 1.4375rem;
|
|
left:50%;
|
|
top:0;
|
|
background-color:#EBEBEB
|
|
}
|
|
.layermend {
|
|
position:absolute;
|
|
right:0.4375rem;
|
|
top:0.625rem;
|
|
width:1.875rem;
|
|
height:1.875rem;
|
|
border:0;
|
|
font-weight:400;
|
|
background:0 0;
|
|
cursor:pointer;
|
|
-webkit-appearance:none;
|
|
font-size:1.875rem
|
|
}
|
|
.layermend::after,.layermend::before {
|
|
position:absolute;
|
|
left:0.3125rem;
|
|
top:0.9375rem;
|
|
content:'';
|
|
width:1.125rem;
|
|
height:1px;
|
|
background-color:#999;
|
|
transform:rotate(45deg);
|
|
-webkit-transform:rotate(45deg);
|
|
border-radius:0.1875rem
|
|
}
|
|
.layermend::after {
|
|
transform:rotate(-45deg);
|
|
-webkit-transform:rotate(-45deg)
|
|
}
|